@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:#32c6d3;
     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 1px 6px 0 rgba(0,0,0,0.25);
          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:200px;
                         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 .75em;
                              }
                              nav.dealTab-navigation ul li a:hover, nav.dealTab-navigation ul li a.current-dealTab
                              {
								  background-color: #E0E0E0;
                                   color:#d2b860;
                                   border-bottom:10px solid #aab90c;
                              }
                         }
                         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:8em;
								  color: #000000;
                              }
                              nav.dealTab-navigation ul li a span.nav-title
                              {
                                   margin-top:.5em;
								  
    font-size: 17px;
    color: black;

                              }





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






/***************************************************************/
/*                     Holiday Overwrite                       */
/***************************************************************/
#dealTabContent
{
     background: #fff;
}

.intro-outer
{
     background:#196fbf;
     color:#fff;
     padding:5em 0 0;
}
     .intro-container
     {
          
          max-width:1480px;
          margin:0 auto;
          padding:0 10px;
     }
          .intro-box
          {
               max-width:960px;
               margin:0 auto;
               padding:0 10px;
          }
               .intro-box .intro-kv
               {
                    display:block;
                    max-width:100%;
                    margin:0 auto;
               }
               .intro-box h1
               {
                    font-size:1.75em;
                    color:#bba456;
                    margin:.125em auto .625em;
               }
               .intro-box p
               {
                    font-size:1.25em;
                    line-height: 1.25;
                    color:#fff;
                    margin:0 auto;
               }

     .embedsocial-outer
     {
          background-image:url('https://storage-asset.msi.com/us/web/MSIDeals/campaigns/2022/holiday-deals/embed-bg.jpg');
          background-repeat: repeat-x;
          background-position: center;
          background-size: auto;
     }
          .embedsocial-container
          {
               /* min-height:104vw; */
               max-width:1480px;
               margin:0 auto;
               padding:10px;
               
               
          }
          .embedsocial-container iframe.embedsocial-hashtag-iframe
          {
              height:440px !important
          }
          /* @media (min-width:805px) and (max-width:1520px)
          {
               .embedsocial-container
               {
                    min-height:37.63vw;
               }
          }
          @media (min-width:1521px)
          {
               .embedsocial-container
               {
                    min-height:572px;
               }
          } */




#main-kv-wrap
{
     box-shadow:0 5px 5px rgba(0,0,0,0.15);
}
/* color theme */
.bg-container
{
    background: linear-gradient(0deg, rgba(250,250,250,250) 0%, rgba(250,250,250,250) 100%);
    padding:2em 0;
    margin: 0 0 0px;
}
.deals-outer-container
{
    max-width:1480px; 
    margin:0 10px 0; 
    /* background:#3131d1; */
    border-radius: 15px; 
    box-shadow: 0 3px 7px 0 rgba(0,0,0,0.25);
    overflow: hidden;
}

.nv-container
{
    max-width:1480px; 
    margin:0 auto 0px; 
    background: linear-gradient(135deg, #74a3cc 0%, #60a0d7 35%, #335f85 100%);
    border-radius: 15px; 
    box-shadow: 0 3px 7px 0 rgba(0,0,0,0.25);
    overflow: hidden;
}

.faq-container
{
    max-width:1480px; 
    margin:0 auto 50px; 
    background: linear-gradient(135deg, #5b83a6 0%, #40719c 35%, #1b3c59 100%);
    border-radius: 15px; 
    box-shadow: 0 3px 7px 0 rgba(0,0,0,0.25);
    overflow: hidden;
}

/* color theme end */
@media (min-width:1521px)
{
     .deals-outer-container
     {
          margin:0 auto 0; 
     }
}

     h1.deals-outer-title
     {
          position:relative; 

          margin:0; 
          padding:0.5em;
          z-index:5;

          background:#aab90c; 
          color:#fff; 

          font-size:2em;
          
     }



     

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

    
     
     background-color: #e6d6cd;
     background-size: contain;
     background-repeat: no-repeat;
}
     #price-disclaimer p
     {
          padding:0 20px;
          font-size:.85em;
     }



     .project .nv {
      text-align: center;
      /* background: url(https://storage-asset.msi.com/event/2026/nb/2026-back-to-school-nb/images/settings.png) no-repeat;
      background-size: 22% auto;
      background-position: top 0px left -5%; */
    }
    @media (min-width: 996px) {
      .project .nv {
        background-size: 22% auto;
      }
    }
    .project .nv__inner {
      padding: 50px 0;
    }
    @media (min-width: 996px) {
      .project .nv__inner {
        padding: 80px 0px;
      }
    }
    .project .nv__title {
      padding: 0 25px;
    }
    .project .nv__title h2 {
      margin: 0 0 20px;
      font-family: var(--MSIBodyFont);
      font-weight: 700;
      color: var(--color-white);
      font-size: clamp(28px, 7vw, 44px);
      line-height: 1.2;
    }
    .project .nv__sub {
      margin: 0 0 40px;
      color: var(--color-white);
      font-size: 18px;
      font-weight: 600;
      line-height: 1.5;
    }
    @media (min-width: 996px) {
      .project .nv__sub {
        font-size: 22px;
        line-height: 38.5px;
        margin-bottom: 60px;
      }
    }
    .project .nv__badge {
      display: block;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      max-width: min(100%, 160px);
      margin: 0 auto 40px;
    }
    @media (min-width: 996px) {
      .project .nv__badge {
        max-width: 180px;
        margin-bottom: 60px;
      }
    }
    .project .nv__badge img {
      width: auto;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }
    .project .nv {
      display: block;
      width: 100%;
    }
    .project .nv img {
      width: 100%;
      height: auto;
    }
    .project .nv__logos {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      gap: 30px;
      margin-bottom: 25px;
    }
    .project .nv__logo img {
      max-width: 140px;
    }
    

    .faq {
      padding-top: 6vh;
      padding-bottom: 6vh;
      /* background: url(https://storage-asset.msi.com/event/2026/nb/2026-back-to-school-nb/images/folder.png) no-repeat; */
      /* background-size: 22% auto; */
      /* background-position: top 0px right 0%; */
    }
    .faq .faq__titleBox {
      text-align: left;
      margin: 0 0 20px;
      font-family: var(--MSIBodyFont);
      font-weight: 700;
      color: var(--color-white);
      font-size: clamp(28px, 7vw, 36px);
      line-height: 1.2;
    }
    .faq .faq__titleBox::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background: #78a9e4;
      margin: 16px 0 0;
    }
    .faq .tab__title {
      display: block;
      text-align: left;
      padding: 0;
      margin: 0;
    }
    .faq .accordionaas {
      width: 100%;
      margin: 0;
      border-radius: 0;
      -webkit-box-shadow: none;
              box-shadow: none;
      overflow-anchor: none;
    }
    .faq .accordionaas dl {
      border: none;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }
    .faq .accordionaas .accordionTitle,
    .faq .accordionaas .accordion__Heading {
      background: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      color: #fff;
      font-family: var(--MSIBodyFont);
      font-weight: 500;
      padding: 15px 0;
      -webkit-transition: color 0.2s ease;
      transition: color 0.2s ease;
      font-size: 18px;
    }
    .faq .accordionaas .accordionTitle:before,
    .faq .accordionaas .accordion__Heading:before {
      content: ">";
      font-size: 1em;
      line-height: 1;
      margin-right: 12px;
      -webkit-transition: -webkit-transform 0.3s ease;
      transition: -webkit-transform 0.3s ease;
      transition: transform 0.3s ease;
      transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    }
    .faq .accordionaas .accordionTitle:hover,
    .faq .accordionaas .accordion__Heading:hover {
      color: rgba(255, 255, 255, 0.85);
    }
    .faq .accordionaas .accordionTitle.is-expanded:before,
    .faq .accordionaas .accordion__Heading.is-expanded:before {
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    .faq .accordionaas .accordionItem {
      -webkit-transition: max-height 0.35s ease;
      transition: max-height 0.35s ease;
      color: #fff;
      text-align: left;
    }
    .faq .accordionaas p,
    .faq .accordionaas dd,
    .faq .accordionaas b,
    .faq .accordionaas strong {
      color: #fff;
    }
    .faq .accordionaas p {
      padding: 24px 0 24px 1.5em;
      font-size: 16px;
    }
    .faq .accordionaas a {
      color: #d4af37;
    }
    .faq .accordionaas table {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.2);
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    .faq .accordionaas table td {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.15);
    }

    .accordion {
      display: none;
    }
    
    .accordion--active {
      display: block;
    }
    
    .accordion dl, .accordion-list {
      border: 1px solid #ddd;
    }
    
    .accordion dd, .accordion__panel {
      font-size: 1em;
      line-height: 1.5em;
    }
    
    .accordion p {
      padding: 1em 2em 0em 2em;
      font-size: 16px !important;
      margin-bottom: 20px;
    }
    
    .accordion dd a {
      text-decoration: underline;
      color: #7095ed;
    }
    
    .accordion {
      position: relative;
      margin-bottom: 70px;
    }
    
    .container {
      max-width: 960px;
      margin: 0 auto;
      padding: 2em 0 2em 0;
    }
    
    .accordionTitle, .accordion__Heading {
      background-color: #780080;
      text-align: start;
      font-weight: 700;
      padding: 25px 2em;
      display: block;
      text-decoration: none;
      color: #222222;
      -webkit-transition: background-color 0.5s ease-in-out;
      transition: background-color 0.5s ease-in-out;
      border-bottom: 1px solid #600067;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: start;
      -webkit-box-pack--ms-flex-pack: start;
      -webkit-box-pack--ms-flex-pack-justify-content: flex-start;
      -webkit-box-align: center;
      -webkit-box-align--ms-flex-align: center;
      -webkit-box-align--ms-flex-align-align-items: center;
    }
    
    button.accordionTitle {
      width: 100%;
      border: none;
      cursor: pointer;
      font: inherit;
      -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
    }
    
    .accordionTitle:before, .accordion__Heading:before {
      content: "+";
      font-size: 1.5em;
      line-height: 0.5em;
      transition: -webkit-transform 0.3s ease-in-out;
      -webkit-transition: -webkit-transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out;
      transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
      margin-right: 1em;
      text-decoration: none;
      height: 18.03px;
    }
    
    .accordionTitle:hover, .accordion__Heading:hover {
      text-decoration: none;
      color: #666666;
    }
    
    .accordionTitleActive:before,
    .accordionTitle.is-expanded:before {
      -webkit-transform: rotate(-225deg);
      -webkit-transform-transform: rotate(-225deg);
    }
    
    .accordionItem {
      height: auto;
      overflow: hidden;
      max-height: 100em;
      -webkit-transition: max-height 1s;
      transition: max-height 1s;
    }
    
    @media screen and (min-width: 48em) {
      .accordionItem {
        max-height: 100em;
        -webkit-transition: max-height 0.5s;
        transition: max-height 0.5s;
      }
    }
    .accordionItem .scrollbma {
      overflow: auto;
      width: 100%;
    }
    
    .accordionItem table {
      font-size: 16px;
      width: 95%;
      text-align: left;
      margin: 0px 32px 32px;
      border-collapse: collapse;
      border: 1px solid #c1c2ea;
      background: rgba(234, 234, 234, 0.7);
      -webkit-box-shadow: 0 2px 8px #838383;
      box-shadow: 0 2px 8px #838383;
    }
    
    .accordionItem table td {
      display: table-cell;
      border: 1px solid #c1c2ea;
      padding: 5px 10px;
      color: #222222;
      vertical-align: middle;
      width: 25%;
    }
    
    .accordionItem.is-collapsed {
      max-height: 0;
    }
    
    .no-js .accordionItem.is-collapsed {
      max-height: auto;
    }
    
    .animateIn {
      -webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
      animation: accordionIn 0.45s normal ease-in-out both 1;
    }
    
    .animateOut {
      -webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
      animation: accordionOut 0.45s alternate ease-in-out both 1;
    }
    
    @-webkit-keyframes accordionIn {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.9) rotateX(-60deg);
        -webkit-transform-transform: scale(0.9) rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        -webkit-transform-origin-transform-origin: 50% 0;
      }
      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-transform-transform: scale(1);
      }
    }
    @keyframes accordionIn {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.9) rotateX(-60deg);
        -webkit-transform-transform: scale(0.9) rotateX(-60deg);
        -webkit-transform-origin: 50% 0;
        -webkit-transform-origin-transform-origin: 50% 0;
      }
      100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-transform-transform: scale(1);
      }
    }
    @-webkit-keyframes accordionOut {
      0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-transform-transform: scale(1);
      }
      100% {
        opacity: 0;
        -webkit-transform: scale(0.9) rotateX(-60deg);
        -webkit-transform-transform: scale(0.9) rotateX(-60deg);
      }
    }
    @keyframes accordionOut {
      0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -webkit-transform-transform: scale(1);
      }
      100% {
        opacity: 0;
        -webkit-transform: scale(0.9) rotateX(-60deg);
        -webkit-transform-transform: scale(0.9) rotateX(-60deg);
      }
    }
    .accordionaas {
      width: 100%;
      margin: 10px auto 70px;
      border-radius: 12px;
      -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      overflow-anchor: none;
    }
    
    @media screen and (max-width: 991px) {
      .accordionaas {
        width: 100%;
        margin-bottom: 0px;
      }
    }
    .accordionaas .accordionTitle, .accordionaas .accordion__Heading {
      background: #ffffff;
      border-bottom: 1px solid rgba(130, 130, 130, 0.44);
      color: #222222;
    }
    
    .accordionTitle:not(:last-child) {
      border-bottom: none;
    }
    
    .accordionaas dl {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(205, 205, 205, 0.44);
      background: rgba(229, 229, 229, 0.2901960784);
    }
    
    .accordionaas .accordionItem {
      -webkit-transition: max-height 0.35s ease;
      transition: max-height 0.35s ease;
    }