@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:#f2f2f2;

     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;
     		}
     	}







/***************************************************************/
/*                     Deal Tab Content                        */
/***************************************************************/
h2.shop-h2
{
     font-size:2em;
     
     color:#fff;

     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:2em 0 0;
}
     #price-disclaimer p
     {
          padding:0 20px;
          font-size:.85em;
     }

/***************************************************************/
/*                           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-outer
{
     
     border-top:5px solid #00c7fc;
     padding-top:10px;
     background: linear-gradient(0deg, rgba(10,0,31,1) 0%, rgba(0,8,100,1) 100%); 
}
#hatch-wrap
{
     padding:5em 10px 3em;

     background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2022/08_01-intel_gamer_days/img/enter-to-win.svg');
     background-size: contain;
     background-repeat: repeat-y;

}
     #price-disclaimer p
     {
          padding:0 20px;
          font-size:.85em;
     }



/***************************************************************/
/*                      Additional Banners                     */
/***************************************************************/
.mini-banner
{
     width:100%;
     max-width:320px;
     margin:45px auto 25px;
}
     .mini-banner img
     {
          display:block;

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

     }

.top-link-banner-wrap
{
     display: block;

     width:100%;
     padding:6em 20px 5em;
     margin:0 auto 5em;
     
     background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2022/08_01-intel_gamer_days/img/bg-tile.png');
     background-size:auto;
     background-repeat: repeat;

     text-align: center;

}
.top-link-banner
{
     display: inline-block;
     box-shadow: 0 10px 20px -5px rgba(0,0,0,0.25);
     
}

     .top-link-banner img, .top-link-banner picture
     {
          display:block;
          max-width:100%;
          margin:0 auto;
     }

     .combo-links
     {
          margin-top:2em;
          text-align: center;
          color:#fff;
     }
     .combo-links a
     {
          vertical-align: middle;
          display: inline-block;
          border:1px solid #00c7fc;
          border-radius:8px;
          text-decoration: none;
          padding:.75em 0;
          width:180px;
          text-align: center;
          margin:.5em 2px 1em;
          background: #000864;
          box-shadow: 0 10px 15px -5px rgba(0,0,0,0.35);
     }
     .combo-links a img
     {
          display: block;
          margin:0 auto;
          height:50px;
     }
          .combo-links a:hover
          {
               background:#00c7fc;
          }
     .combo-links h3
     {
          display: inline-block;
          vertical-align: middle;
          font-size:1.5em;
          margin:.5em 10px .5em 0;
     }
     


/***************************************************************/
/*                       Custom Styles                         */
/***************************************************************/

h2.shop-h2
{     
     color:#fff;
}
#deal-section-wrap
{
     background: linear-gradient(0deg, rgba(10,0,31,1) 0%, rgba(0,8,100,1) 100%);     
     padding:0 0 4em;
}
.dealBox
{
     
     color:#fff;
     background:none; 
     border:1px solid rgba(255,255,255,0.25);
     border-radius: 0;
}     

.dealBox .dealMessage
{
     color:#00c7fc;
}

.dealBox .dealTitle
{
     color:#00c7fc;
}

.dealLink-wrap button
{
     background: #00c7fc;
     border-color:#00c7fc;
     color:#180d6b;
}
.dealLink-wrap button:hover
{

     
     background: #fff;
     border-color:#fff;
}


ul.dealTagNav li button
{
     border-radius: 5px;
     border: 1px solid #fff;
     background:none;
     opacity:.75;

     color:#fff;
     font-weight:bold;
}
ul.dealTagNav li button:hover, ul.dealTagNav li button.active
{
     border: 1px solid #00c7fc;
     /* border-radius: 0; */
     background:#00c7fc;

     color:#180d6b;     
}



.shop-overlay
{
     background: rgba(0,0,0,0.8);
}


#price-disclaimer
{
     color:#ffffff;
}
#price-disclaimer p {
     padding: 0 20px;
     font-size: .85em;
     line-height: 1.5;
 }




/*
//-------------------------------------------- Intro 
*/



#igd-intro
{
     padding:6em 20px 5em;
     background:#0a001f;
     color:#fff;

}

     .igd-info
     {
          max-width:640px;
          margin:0 auto;
          text-align: center;
     }

          #igd-intro .igd-info h1
          {
               font-size:3.5em;
               line-height:1;
               margin:.5em 20px .35em;
          }

          #igd-intro .igd-info h2
          {
               line-height:1;

               color:#01fffd;
          }

     .igd-links
     {
          display: flex;
          justify-content: center;
          align-items: stretch;
          flex-direction:column;
          max-width:1440px;
          margin:2em auto 0;
     }
      
     @media (min-width:721px)
     {
          .igd-links
          {
               flex-direction:row;
          }
     }
               

          .igd-links a, .igd-links button
          {
               display: block;

               width:100%;
               margin:5px auto;
               padding:5px;
               background:#0040ff;
               border:none;
               
               color:#fff;
               font-family:'Open Sans', arial;
               font-size:14px;
               line-height: 1.25;
               text-decoration: none;
               text-align: left;

               cursor:pointer;
               
          }
          @media (min-width:721px)
          {
               .igd-links a, .igd-links button
               {
                    margin:10px;
                    
               }
          }

          .igd-links a:hover, .igd-links button:hover
          {
               background:#01fffd;
               color:#0a001f;
          }

               .igd-links h3
               {
                    
                    display: block;
                    padding:1em 15px .25em;
                    margin:0;
                    font-weight: 300;
                    font-weight: 800;
                    font-size:1.5em;
                    line-height: 1.15;
                    
               }
               .igd-links p
               {
                    display: block;
                    padding:0 15px 1em;
                    margin:0;

                    font-weight: 300;
                    font-size:1em;
                    line-height: 1.5;
               }

               .igd-links img
               {
                    display: block;

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

               @media (max-width:720px)
               {
                    .igd-links img
                    {
                         display: inline-block;
                         width:40%;
                         vertical-align: middle;
                    }
                    .igd-links .info
                    {
                         display: inline-block;
                         width: 55%;
                         vertical-align: middle;
                    }
               }