@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');


#msi_custom_page
{

     width:100%;
     margin:0 auto;
     min-width:320px;
     max-width:2560px;

     position: relative;
     background:#fafafa;

     color:#101010;
     font-family: "Open Sans", sans-serif;
     font-weight:normal;
     font-size:14px;
     line-height: 1.25;
     overflow:hidden;

}
     #msi_custom_page *
     {
          box-sizing: border-box;
     }
     #msi_custom_page sup
     {
          font-size:.5em;
     }

/* Helper */
.clearfix:after
{
     display: block;
     content: "";
     clear: both;
}
.sr-only
{
     position: absolute;
     margin: -1px 0 0 -1px;
     padding: 0;
     display: block;
     width: 1px;
     height: 1px;
     font-size: 1px;
     line-height: 1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     border: 0;
     outline: 0;
}
.rtl
{
     direction: rtl;
}
.h-line
{
     height:1px;
     width: 100%;
     margin:0 auto;
     background: rgba(0,0,0,0.1);
}

/* text */
.text-center
{
     text-align: center;
}
.text-line-through
{
     text-decoration: line-through;
}


/***************************************************************/
/*                            Main KV                          */
/***************************************************************/
#main-kv-wrap
{
     
     position: relative;
     z-index: 150;

}
     #main-kv img
     {
          display: block;
          width:100%;
     }
     .top-intel
     {
          display: flex;
          align-items: center;
          justify-content: center;

          position: absolute;
          top: 20px;
          right: 20px;

          padding:0 0 0 20px;
          z-index: 50;
          vertical-align: middle;
     }
     	.top-intel img
     	{
     		width:60px;
     		vertical-align:middle;
     	}
     	@media (min-width:961px)
     	{
     		.top-intel img
     		{
     			width:80px;
     			vertical-align:middle;
     		}
     	}

     	.top-intel p
     	{
     		padding:0 5px;

     		color:#fff;
     		font-size:.625em;
               line-height: 1.5em;
     		text-align:right;
               vertical-align: middle;
     	}
          @media (max-width:960px)
     	{
     		.top-intel p
               {
                    width:60px;
               }
     	}
               .top-intel p sup
               {
                    line-height: 1em;
               }



     .top-windows
     {
         position: absolute;
         top: 20px;
         right: 20px;

         width:120px;
     }
     	@media (min-width:961px)
     	{
     		.top-windows
     		{
     			width:140px;
     		}
     	}




/***************************************************************/
/*                      Additional Banners                     */
/***************************************************************/
.top-link-banner
{
     display: block;

     width:100%;
     margin-bottom:3em;

     background:#4e82ff;
     border:none;
     
     text-decoration: none;
     cursor: pointer;
}
.top-link-banner:hover
{
     opacity: .95;
}
     .top-link-banner img
     {
          display:block;
          max-width:100%;
          margin:0 auto;
     }
     
.mini-banner
{
     width:100%;
     max-width:320px;
     margin:45px auto 25px;
}
     .mini-banner img
     {
          display:block;

          margin:0 auto;
          max-width:100%;

     }


/***************************************************************/
/*                     Deal Tab Content                        */
/***************************************************************/
h2.shop-h2
{
     font-size:2em;
     color:#101010;
     margin:0 auto 1.25em;
}
#dealTabContent
{
     font-family: "Open Sans", sans-serif;
     text-align: center;

}

     nav.dealTab-navigation
     {
          background:#fff;

          position: relative;
          box-shadow: 0 0 12px 0 rgba(0,0,0,0.35);
          z-index:100;
     }
          nav.dealTab-navigation ul
          {
               display: block;
               margin: 0 auto;
               padding:0;
          }
          @media(min-width:641px)
          {
               nav.dealTab-navigation ul
               {
                    display: flex;
                    flex-wrap: nowrap;
                    justify-content:center;
               }
          }
               nav.dealTab-navigation ul li
               {
                    display:block;
                    width:100%;
               }
               @media(min-width:801px)
               {
                    nav.dealTab-navigation ul li
                    {
                         width:150px;
                         margin:0 15px;
                    }
               }
                    nav.dealTab-navigation ul li a
                    {
                         box-sizing: border-box;
                         display: block;
                         padding:1em 0;
                         margin:0;

                         text-decoration: none;
                         color:#999;
                    }
                         @media(max-width:640px)
                         {
                              nav.dealTab-navigation ul li a:hover, nav.dealTab-navigation ul li a.current-dealTab
                              {
                                   color:#010101;
                                   background:#dfdfdf;
                              }
                         }

                         @media(min-width:641px)
                         {
                              nav.dealTab-navigation ul li a
                              {
                                   padding:1.75em 0 1.25em;
                              }
                              nav.dealTab-navigation ul li a:hover, nav.dealTab-navigation ul li a.current-dealTab
                              {
                                   color:#010101;
                                   border-bottom:5px solid #333;
                              }
                         }
                         nav.dealTab-navigation ul li a.current-dealTab
                         {
                              pointer-events: none;
                              cursor: default;
                         }
                         nav.dealTab-navigation ul li a span
                         {
                              vertical-align: middle;
                              margin:0 5px;
                         }
                         @media(min-width:641px)
                         {
                              nav.dealTab-navigation ul li span
                              {
                                   display: block;
                                   margin:0 auto;
                              }
                         }
                              nav.dealTab-navigation ul li a span.productLineItem__icon
                              {
                                   font-size:3.25em;
                              }
                              nav.dealTab-navigation ul li a span.nav-title
                              {
                                   margin-top:.5em;
                              }





/***************************************************************/
/*                      Price Disclaimer                       */
/***************************************************************/
#price-disclaimer
{
     padding:3em 0 4em;
}
     #price-disclaimer p
     {
          padding:0 20px;
          font-size:.85em;
          line-height: 1.5em;
     }

/***************************************************************/
/*                           Footer                            */
/***************************************************************/
#dealFooter
{

     padding:4em 0 4em;
     margin:0 auto;
}
     #dealFooter h4
     {
          margin:0 auto 1em;
     }
     
     #dealFooter .vendor-list
     {
          max-width: 800px;
          margin:0 auto;
          padding:0 20px;

          text-align: center;
     }
          #dealFooter .vendor-list img
          {
               display:inline-block;

               height:4em;
               margin:5px 10px;
          }




/***************************************************************/
/*                           Hatch                             */
/***************************************************************/
#hatch-wrap
{
     padding:4em 10px 3em;

     background-image: url('https://storage-asset.msi.com/ca/web/DealPage/2022/back-to-school/img/gleam-bg.jpg');
     background-color:#4e82ff;
     background-size: contain;
     background-repeat: no-repeat;
}