@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:300px;
     max-width:2560px;
     font-family: "Open Sans", sans-serif;
     font-weight:normal;
     font-size:15px;
     line-height: 1.25;
     overflow:hidden;
     position: relative;
     background:#fff;
     color:#111111;
}
     #msi_custom_page *
     {
          box-sizing: border-box;
     }
     @media (min-width:801px)
     {
          #msi_custom_page
          {
               font-size:18px;
          }
     }
     #msi_custom_page sup
     {
          font-size:.5em;
     }
.section-outer
{

     width:100%;
     margin:0 auto;
     background-repeat:no-repeat;
     background-position: top center;
     background-size: cover;
     position:relative;
}
.section-inner
{
     width:100%;
     max-width:1440px;
     margin:0 auto;
     position:relative;
}



/* text */




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

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



#section-nav
{
     background:#825b10;
}
#page_tab_nav
{
     width:100%;
     max-width:1440px;
     margin:0 auto 3em;

}
     @media (min-width:721px)
     {
          #page_tab_nav
          {
               display:table;
          }
     }
     #page_tab_nav ul
     {
          box-sizing: border-box;

          background:#825b10;

          padding:20px;
          margin:0 auto;

          list-style: none;
          list-style-position: inside;
          text-align: center;
     }
          @media (min-width:721px)
          {
               #page_tab_nav ul
               {
                    display:table-row;
               }
          }
          #page_tab_nav ul li
          {
               display:block;
               box-sizing: border-box;

               width:100%;
               margin:12px auto;

               background:none;
               border:3px solid #a98125;
               border-radius:20px;

          }
          #page_tab_nav ul li:hover,
          #page_tab_nav ul li.page_tab_wrap-on
          {
               background:#a98125;
          }
               @media (min-width:721px)
               {
                    #page_tab_nav ul li
                    {
                         display:table-cell;
                         width:25%;

                         border:none;
                         border-radius: 0;

                         vertical-align: middle;
                    }
               }
          #page_tab_nav ul li a
          {
               display: block;
               box-sizing: border-box;

               width:100%;
               padding:10px;

               background:none;
               border:none;
               border-radius:20px;

               color:#fff;
               font-family: "Open Sans", sans-serif;
               font-weight:600;
               font-size:.85em;
               text-decoration: none;

               cursor:pointer;
          }
               @media (min-width:721px)
               {
                    #page_tab_nav ul li a
                    {
                         padding:20px;
                    }
                    .line-break
                    {
                         display:block;
                    }
               }
               #page_tab_nav ul li a img
               {
                    display:none;


               }
                    @media (min-width:721px)
                    {
                         #page_tab_nav ul li a img
                         {
                              display:block;
                              margin: 0 auto .5em;
                              width:60px;
                         }
                    }

#content-wrap
{
     padding:0 0 3em;
}


#section-promo
{
     max-width:1440px;
     margin:0 auto;

     color:#111111;
     font-family: "Open Sans", sans-serif;
     text-align: center;

}
     .promo-wrap
     {
          display: flex;
          flex-wrap: wrap;
          justify-content:space-evenly;
     }
     .promo-box
     {

          width:100%;
          padding:2em 10px 2.5em;
          margin-bottom:16px;

          box-sizing: border-box;
          background:#efefef;
          border-radius:10px;

          font-size:12px;
          text-align: center;

     }
          @media (min-width:481px)
          {
               .promo-box
               {
                    width:calc(50% - 20px);
               }
          }
          @media (min-width:1081px)
          {
               .promo-box
               {
                    width:calc(33% - 20px);
               }
          }
          @media (min-width:1281px)
          {
               .promo-box
               {
                    font-size:14px;
               }
          }
               /** Contents **/
               .promo-kv
               {
                    display:block;

                    width:80%;
                    margin:0 auto;
               }
               h2.promo-title
               {
                    margin:0 auto .5em;

                    font-family: "Open Sans", sans-serif;
                    font-size:1.5em;
                    font-weight:700;
                    text-align: center;
               }

               ul.promo-spec
               {
                    display:block;

                    max-width:400px;
                    padding:0;
                    margin:0 auto 1.5em;

                    list-style: none;
                    list-style-position: inside;	
                    text-align: center;
               }
                    ul.promo-spec li
                    {
                         display:inline-block;
                         line-height:1.35;
                    }
                         ul.promo-spec li:after
                         {
                              content:", ";
                         }
                              ul.promo-spec li:last-child:after
                              {
                                   content:"";
                              }
                    ul.promo-spec li.promo-windows
                    {
                         display:block;
                         margin-bottom:.25em;
                    }
                         ul.promo-spec li.promo-windows:after
                         {
                              content:"";
                         }
                         ul.promo-spec li.promo-windows .windows-disclaimer
                         {
                              display:inline-block;
                              font-size:.625em;
                              line-height:1.35em;
                              margin:.35em 0 .5em;
                         }


               .old-price
               {
                    margin:.25em auto 0;

                    font-family: "Open Sans", sans-serif;
                    font-size:.85em;
                    text-align: center;
                    color:#666;

                    text-decoration:line-through;
               }
               .new-price
               {
                    margin:.25em auto .25em;

                    font-family: "Open Sans", sans-serif;
                    font-size:2.5em;
                    font-weight:700;
                    line-height: .85em;
                    text-align: center;


               }
                    .new-price .save-label
                    {
                         width:30%;
                         min-width:150px;
                         margin:0 auto .5em;
                         padding:4px 0;

                         background:#cc9f39;
                         border-radius:2px;

                         color:#fff;
                         font-size:.45em;
                         line-height: 1;

                    }
               h3.buy-label
               {
                    margin:2em auto .5em;

                    font-family: "Open Sans", sans-serif;
                    font-size:.85em;
                    font-weight:700;
                    text-align: center;
               }
               #section-promo sup
               {
                    font-size:.4em;
                    line-height:0;
               }


               .promo-link-wrap
               {
                    display:inline-block;
                    position: relative;

                    margin:2px auto 0;
                    height:64px;

                    background:none;
               }

                    .promo-link-wrap .promo-link
                    {
                         display:block;
                         position: absolute;
                         left:50%;
                         top:50%;
                         transform: translate(-50%, -50%);

                         padding:5px 20px;

                         background:#fff;
                         border:1px solid #ccc;
                         border-radius:10px;
                         box-shadow:0 8px 8px -8px rgba(0,0,0,0.2);
                    }
                         .promo-link-wrap .promo-link:hover
                         {
                              border:3px solid #ccc;
                         }
                         .promo-link-wrap .promo-link img
                         {
                              display:block;
                              height:50px;

                         }

                    .promo-link-wrap .promo-link.hatch-link
                    {
                         width:120px;
                         padding:15px;
                    }





/* swiper */

#section-swiper
{
     padding:.5em 0 3em;

     background:url('https://storage-asset.msi.com/ca/picture/image/2023dockingredeem/rollingbg2_2560x800.jpg') no-repeat center center;
     background-size: cover;
}
     .swiper-wrap
     {
          position: relative;

          margin:0 auto;
          width:calc(100% - 20px);
          max-width:1600px;

     }
          html:root
          {
               --swiper-navigation-size: 24px;
               --swiper-theme-color: #cccccc;
               --swiper-pagination-bullet-horizontal-gap: 6px;
               --swiper-pagination-bullet-inactive-color: #999999;
          }
          .swiper
          {
               width:calc(100% - 40px);
               max-width:1440px;
          }
               .swiper-wrapper
               {

                    margin:0 auto;
                    padding:3em 0 4em;
               }
                    .swiper-slide
                    {
                         padding:0 20px;
                    }
               .swiper-pagination-bullet
               {
                    font-size:0;
               }
                    .swiper-pagination-bullet:hover
                    {
                         background:#a98125;
                         opacity:1;
                    }
               .swiper-button-next, .swiper-button-prev
               {
                    z-index:100;
               }
                    .swiper-button-next:hover, .swiper-button-prev:hover
                    {
                         color:#a98125;
                    }
               @media(min-width:801px)
               {
                    .swiper-pagination
                    {
                         padding:0 20px;
                         text-align: center;

                    }
               }


#video-swiper
{
     padding:0 0;
     margin:0 auto;

}
     #video-swiper .swiper-wrapper
     {

          margin:0 auto;
          padding:0 0 4em;
     }
     .vid-swipe
     {
          position:relative;
          width:100%;
          padding-bottom:75%;

          background-size:cover;

          border-radius: 10px;
     }
          @media (max-width: 800px)
          {
               .vid-swipe-0{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid0b.jpg');}
			   .vid-swipe-1{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid1b.jpg');}
               .vid-swipe-2{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid2b.jpg');}
               .vid-swipe-3{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid3b.jpg');}

               #video-swiper .vid-swipe .text-info
               {
                    box-sizing: border-box;
                    position: absolute;
                    top: 50%;

                    width: 100%;
                    padding: 48px;

                    transform: translateY(-50%);

                    color:#fff;
               }
          }
          @media (min-width: 801px)
          {
               .vid-swipe
               {
                    padding-bottom:50%;
               }
                    .vid-swipe-0{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid0.jpg');}
			        .vid-swipe-1{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid1.jpg');}
                    .vid-swipe-2{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid2.jpg');}
                    .vid-swipe-3{background-image:url('https://storage-asset.msi.com/us/picture/image/promotion/2021/10_18-holiday_deals/vid3.jpg');}

               #video-swiper .vid-swipe .text-info
               {
                    position: absolute;
                    top: 50%;
                    right: 10px;

                    width: 50%;
                    max-width: 540px;
                    padding: 48px;

                    transform: translateY(-50%);

                    color:#fff;
               }
          }
               .text-info img
               {
                    display:block;
                    max-width:100%;
                    margin-bottom:.25em;
               }
               .text-info p
               {
                    padding:1em 0;
                    margin:0 0 1em;

                    font-size:.85em;
               }

               .vdPopUp
               {
                    display: inline-block;

                    margin:0 4px 8px 0;
                    padding: 12px 16px;
                    background: #f5ba32;
                    border-radius: 6px;

                    color: #111111;
                    font-size:.85em;
                    font-weight: 700;
                    text-decoration: none;
               }
                    .vdPopUp:hover
                    {
                         background: #fff;
                    }
                    .vdPopUp .triangle-right
                    {
                         display: inline-block;
                         border-top: 0.35em solid transparent;
                         border-bottom: 0.35em solid transparent;
                         border-left: 0.45em solid #000;
                         margin-left: 0.25em;
                         opacity: .5;
                    }

               .learn-more
               {
                    display: inline-block;
                    box-sizing: border-box;

                    padding: 12px 16px;
                    border-radius: 6px;
                    background: #555;

                    color: #fff;
                    font-size:.85em;
                    font-weight: 700;
                    text-decoration: none;
               }
                    .learn-more:hover
                    {
                         background:#999;
                    }

                    .learn-more .triangle-right
                    {
                         display: inline-block;
                         border-top: 0.35em solid transparent;
                         border-bottom: 0.35em solid transparent;
                         border-left: 0.45em solid #fff;
                         margin-left: 0.25em;
                         opacity: .5;
                    }


     #video-swiper .swiper-pagination.swiper-pagination-bullets
     {
          bottom:35px;
     }




/** More Deals **/

.deals-box
{
     font-size:.75em;
     color:#fff;
     text-align: center;

     padding:20px 0;
}






/** Footer **/

#vendors
{
     padding:1em 16px 3em;
}
     #vendors h4
     {
          font-family: "Open Sans", sans-serif;
          font-weight: 400;
     }
     #vendors p
     {

          max-width:800px;
          margin:0 auto 2em;

          font-family: "Open Sans", sans-serif;
          font-weight: normal;
          font-size:.75em;
          line-height: 1.5;
     }
     #vendors p a
     {
          display:inline-block;
     }

     #vendors .vendor-list
     {
          text-align: center;
          max-width:800px;
          margin:0 auto;
     }
          #vendors .vendor-list img
          {
               height:70px;
               padding:0 10px;
               display:inline-block;
          }