@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
    /*common setting*/
    
    #mysticLight_landing h3 {
        font-size: 40px;
    }
    
    .red {
        color: #f00;
    }
    
    .grey {
        color: #444;
    }
    
    .no-padding {
        padding-left: 0;
        padding-right: 0;
    }
    
    .margin-center {
        margin: 0 auto;
    }
    /*section  1*/
    
    .scroll-down {
        position: absolute;
        left: 50%;
        bottom: 5vh;
        display: block;
        text-align: center;
        font-size: 20px;
        text-decoration: none;
        text-shadow: 0;
        width: 30px;
        height: 30px;
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
        z-index: 9;
        -webkit-transform: translate(-50%, 0%) rotate(45deg);
        -moz-transform: translate(-50%, 0%) rotate(45deg);
        transform: translate(-50%, 0%) rotate(45deg);
        -webkit-animation: fade_move_down 1s ease-in-out infinite;
        -moz-animation: fade_move_down 1s ease-in-out infinite;
        animation: fade_move_down 1s ease-in-out infinite;
    }
    
    #mysticLight_header {
        width: 100%;
        padding-bottom: 54%;
    }
    
    .bg-animation {
        position: relative;
        width: 100%;
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/banner.jpg);
        background-position: 0 60%;
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: 10;
    }
    
    .bg-animation::after {
        width: 100%;
        content: "";
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/banner2.jpg);
        background-position: 0 60%;
        background-size: 100%;
        background-repeat: no-repeat;
        opacity: 0;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 30;
        animation-name: opacity-eye;
        animation-duration: 4s;
        animation-delay: 2s;
        animation-iteration-count: infinite;
    }
    
    .bg-animation::before {
        width: 100%;
        content: "";
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/banner3.jpg);
        background-position: 0 60%;
        background-size: 100%;
        background-repeat: no-repeat;
        opacity: 0;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: 20;
        animation-name: opacity-eye;
        animation-duration: 4s;
        animation-delay: 5s;
        animation-iteration-count: infinite;
    }
    
    #mysticLight_landing nav ul {
        text-align: center;
        background-color: rgba( 255, 255, 255, .1);
        margin: 0;
        padding: 0;
        line-height: 0;
    }
    
    #mysticLight_landing nav ul li {
        display: inline-block;
        max-width: 100%;
        width: 16%;
        margin: 0;
        padding: 15px 10px;
        border: #555 1px solid;
        transition: all .1s ease-in;
        cursor: pointer;
    }
    
    #mysticLight_landing nav ul li:hover {
        border: #f00 1px solid;
        background-color: rgba( 255, 0, 0, .2);
    }
    
    #mysticLight_landing nav ul li a img {
        margin: 0 auto;
    }
    
    #mysticLight_landing nav ul li.activebtn {
        border: #999 1px solid;
        background-color: rgba( 0, 0, 0, .5);
    }
    
    #feature-slider {
        position: relative;
    }
    
    #feature-slider .owl-next,
    #feature-slider .owl-prev {
        position: absolute;
        text-align: left;
        z-index: 11;
        top: 45%;
        left: 0;
        padding: 10px 20px 10px 15%;
        background-color: rgba(255, 0, 0, 0);
        color: #fff;
        font-size: 30px;
    }
    
    #feature-slider .owl-next {
        left: auto;
        right: 0;
        text-align: right;
        padding: 10px 15% 10px 20px;
    }
    
    .mystic_slider div {
        width: 100%;
    }
    
    .mystic_slider .mystic {
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/feature_sync.jpg);
        padding: 0 6%;
    }
    
    .mystic_slider .mystic p {
        width: 90%;
        margin-left: 0%; 
        text-align: left;       
    }
    
    .mystic_slider .mystic_sync {
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/feature_mystic.jpg);
    }
    
    .mystic_slider .mystic_sync p {
        width: 60%;
        margin: 0 auto;
    }

     .mystic_slider .list_txt{
        font-size: 1.15em;
        line-height: 1.8em;
        color: #fff;
        font-weight: normal;
        margin-left: 15px;
        text-align: left;
    }
    .mystic_slider .list_txt li{
        text-indent: 0px;
    }
    #mysticLight_landing .item.mystic.text-right h3{
        text-align: left;
    }
   
     /* .mystic_slider .list_txt li{
        list-style: none;
      }*/
      /* .mystic_slider .list_txt li:before{
         content: "";
       }*/
    
    .mystic_slider .mystic_extension {
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/feature_extension.jpg);
        padding: 0 8%;
    }
    
    .mystic_slider .mystic,
    .mystic_slider .mystic_sync,
    .mystic_slider .mystic_extension {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center 80%;
        width: 65%;
        margin: 3% auto;
        padding-bottom: 30%;
    }


    /*  .mystic_slider::before {
        position: absolute;
        left: 0;
        z-index: 1;
        content: '';
        display: block;
        width: 15%;
        padding-bottom: 40%;
        box-shadow: inset 230px 0 230px -90px rgba(0, 0, 0, 1);
    }
    
    .mystic_slider::after {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
        content: '';
        display: block;
        width: 15%;
        padding-bottom: 40%;
        box-shadow: inset -230px 0 230px -90px rgba(0, 0, 0, 1);
    }*/
    /*section 2*/
    
    #section-mysticlight-image-lights {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: auto;
    }
    
    .mysticlight {
        padding-top: 3%;
        position: relative;
        max-width: 1920px;
        margin: 0 auto;
    }
    
    .mysticlight_panel {
        position: absolute;
        z-index: 10;
        top: 12%;
    }
    
    .lightBackground {
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/ML.jpg);
        background-size: 100%;
    }
    
    .lightBackground img {
        z-index: 5;
        position: relative;
    }
    
    #msi-x370_gaming_pro_carbon-mysticlight-hero-lights,
    #msi-x370_gaming_pro_carbon-mysticlight-hero-lights-2 {
        position: absolute;
        z-index: 1;
    }
    
    #msi-x370_gaming_pro_carbon-mysticlight-hero-lights {
        z-index: 9;
    }
    
    .light-shape {
        position: absolute;
        right: 9.4%;
    }
    
    #section-mysticlight-effectpicker li {
        width: 5.5em;
    }
    
    .mystic-light-icon:before {
        font-size: 3.5rem;
    }
    /*section 3*/
    
    .filter-bg {
        background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/bg_filter.jpg);
        background-position: center 0;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 4%;
        padding-bottom: 4%;
        border-top: #f00 10px solid;
        border-bottom: #f00 10px solid;
    }
    
    .filter-line {
        border: #313131 10px solid;
        padding: 0;
    }
    
    .title {
        font-family: 'DINCond-Bold';
        background-color: #000;
        padding-top: .3%;
        padding-bottom: 2%;
        text-shadow: 7px 7px rgba(100, 100, 100, .3);
    }
    
    .question {
        font-family: 'DINPro-Regular';
        background-color: #313131;
        color: white;
        font-size: 20px;
        line-height: 25px;
        text-transform: uppercase;
        padding: 1.5% 2.5%;
    }
    
    .answer {
        font-family: 'din_pro_bold';
        background-color: #000;
        color: #444;
        font-size: 20px;
        line-height: 25px;
        text-transform: uppercase;
        padding: 1.5% 2.5%;
        word-wrap: break-word;
        overflow:hidden; /* 07/04 by chloe  */
    }
  
    .answer span {
        cursor: pointer;
        margin-right: 5%;
        transition: all .2s ease-in;
        display: inline-block; /* 07/05 by chloe  */
    }
    
    .answer span:hover,
    .answer .active {
        color: #f00;
        text-shadow: 0 0 20px #FF0000, 0 0 25px #FF0000;
        outline: none;
    }
    
    .reset {
        font-family: 'din_pro_bold';
        color: white;
        font-size: 20px;
        line-height: 25px;
        text-transform: uppercase;
        padding: 1.5% 8%;
        margin-top: 1%;
    }
    
    .reset span:first-child {
        cursor: pointer;
        float: left;
        border: #333 3px solid;
        border-radius: 5px;
        padding: 10px 15px;
    }
    
    .reset span:last-child {
        cursor: pointer;
        float: right;
        border: #333 3px solid;
        border-radius: 5px;
        padding: 10px 15px;
    }
    
    .reset span:hover {
        color: #f00;
    }
    /*  .filter-title {
        font-family: 'DINCond-Bold';
        background-color: #000;
        padding-top: 5%;
        padding-bottom: 3%;
    }*/
    /*section 4*/
    
    .product-list {
        padding-bottom: 8%;
    }
    
    .no-result {
        font-family: 'din_pro_bold';
        color: white;
        font-size: 30px;
        line-height: 35px;
        text-transform: uppercase;
        /*border: #fff  3px solid;*/
        border-radius: 10px;
        padding: 3%;
        margin-top: 10%;
    }
    
    .try {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        cursor: pointer;
        border: #333 2px solid;
        border-radius: 5px;
        padding: 5px 15px;
        margin-top: 3%;
    }
    
    .try:hover {
        color: #f00;
    }
    
    .item-product {
        position: relative;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 30px;
        margin: 30px 0;
        transition: box-shadow .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
    }
    
    .item-product:hover {
        opacity: 1;
        transform: translate(0, -4px);
        box-shadow: 0 0 30px #f00;
        -webkit-animation: rainbowBorder 2s linear infinite;
        animation: rainbowBorder 2s linear infinite;
    }
    
    .item-product:hover .more-btn {
        -webkit-animation: rainbowText 2s linear infinite;
        animation: rainbowText 2s linear infinite;
    }
    
    .model-name {
        padding-top: 5px;
        padding-bottom: 50px;
        font-family: 'DINCond-Bold';
        font-size: 18px;
        line-height: 24px;
        color: #fff;
    }
    
    .model-more {
        position: absolute;
        width: 100%;
        bottom: 1%;
    }
    
    .more-btn {
        color: #999;
        border: #999 1px solid;
        padding: 2px 10px;
        border-radius: 8px;
    }
    
    .answer span:hover,
    .answer .on {
        color: #f00;
        text-shadow: 0 0 20px #FF0000, 0 0 25px #FF0000;
        outline: none;
    }
    
    .mid-sync {
        width: auto;
        position: relative;
        z-index: 1;
        margin-bottom: -4%;
    }
    /*section 5*/
    
    .mid-sync {
        padding-top: 2%;
    }
    
    .mid-parner {
        padding-top: 2%;
        padding-bottom: 4%;
    }
    /*section 6*/
    
    .partner-pd-title {
        font-family: 'din_pro_bold';
        font-size: 40px;
        color: #000;
        width: 100%;
        text-align: center;
        background: linear-gradient(to right, rgba(0, 0, 0, 1) 10%, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 90%);
        margin-top: 4%;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
    
    #product-slider {
        position: relative;
    }
    
    #product-slider .owl-prev,
    #product-slider .owl-next,
    #product-slider2 .owl-prev,
    #product-slider2 .owl-next,
    #product-slider3 .owl-prev,
    #product-slider3 .owl-next,
    #product-slider4 .owl-prev,
    #product-slider4 .owl-next,
    #product-slider5 .owl-prev,
    #product-slider5 .owl-next {
        position: absolute;
        top: 45%;
        left: -60px;
        padding: 8px 12px;
        background-color: rgba(255, 0, 0, .8);
        color: #fff;
        font-size: 24px;
    }


    
    #product-slider,
    #product-slider2,
    #product-slider3,
    #product-slider4,
    #product-slider5 {
        margin: 0 auto;
        width: 70%;
    }
    
    #product-slider .owl-next,
    #product-slider2 .owl-next,
    #product-slider3 .owl-next,
    #product-slider4 .owl-next,
    #product-slider5 .owl-next {
        left: auto;
        right: -60px;
        padding: 8px 12px;
    }


    /*section 8*/
   
    .download-bg {
       background-image: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/download-bg.jpg);
        background-position: center 0;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 4%;
        padding-bottom: 4%;
        border-top: #f00 10px solid;
        border-bottom: #f00 10px solid;
        margin-top: 30px;
    }

    .download-header{
        margin: 20px auto;
        width: 100%;
        max-width: 1410px;
        text-align: center;
    }

    .header-img{
        width: 90%;
    }


    .download-body {
        margin: 0 auto;
        width: 100%;
        max-width: 1410px;
    }


     .download-body .bd-table{
        display: table;
        border-collapse: separate;
        border-spacing: 30px;                 
     }

     .download-body .bd-td:nth-child(1) {
        display: table-cell;
        width: 50%;
        vertical-align: top;
        padding: 0;
     }
     .download-body .bd-td:nth-child(2) {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
        padding: 0;
     }

     .download-body .info{
        margin: 20px 0;
        padding: 0;

     }

     .itexm-ul{
        display: block;
        padding: 0px 15px;
        margin: 0;
        max-width: 1170px;
     }
    
    .itexm-ul:after{
        display: block;
        content: "";
        clear: both;
    }

     .itexm-ul > li{
        float: left;
        width: 40%;
     }

    .download-body  .txt{
        font-size: 18px;
        line-height: 1.6;
        color: #fff;
    }

     .download-body  .att{
        font-size: 16px;
        line-height: 1.6;
        color: #c9c9c9;
    }
    
    .download-body ul, .download-body li{
        list-style: none;
    }

    
    .download-body .item-product {
        width: 50%;
        position: relative;
        text-align: center;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 20px 0;
        border: 0px solid #c9c9c9;
        transition: border .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
    }
    
     .download-body .item-product:hover {
        opacity: 1;
        transform: translate(0, -4px);
        box-shadow: 0 0 30px #f00;
        -webkit-animation: rainbowBorder 2s linear infinite;
        animation: rainbowBorder 2s linear infinite;
    }

    
    .download-body .model-name {
        display: block;
        padding-top:10px;
        padding-bottom: 00px;
        font-family: 'DINCond-Bold';
        font-size: 18px;
        line-height: 24px;
        color: #fff;
    }
 

    .download-icon{
       text-align: center;
       width: 100%;
       margin: 0 auto;

    }

    .img-icon{
        width: 100%;
        max-width: 150px;

    }


  @media (max-width: 1366px) {

        .download-body {
            width: 80%;
        }

        .download-header{
            margin: 20px auto;
            width: 80%;
        }
    }

    @media (max-width: 1024px) {

    .download-header{
        margin: 10px 15px;
        width: 100%;
        max-width: 1024px;
        text-align: center;
    }

    .download-body .bd-table{
        display: block;
        width: 95%;
        max-width: 1024px;
        margin: 0 auto;
     }

     .download-body .bd-td:nth-child(1) {
        display: block;
        width: 100%;
        vertical-align: middle;
        padding: 0 ;
     }


     .download-body .bd-td:nth-child(2) {
        display: block;
        width: 100%;
         vertical-align: middle;
         padding: 0;
     }

     .itexm-ul{
        display: block;
        margin: 0 auto;
        max-width: 640px;
     }

     .download-body .item-product {
        width: 50%;
    }

     .itexm-ul > li {
        float: left;
        width: 50%;
    }

    
    

    }

    @media (max-width: 736px) {
    

        .download-header {
            width: 90%;
        }

        .itexm-ul li{
            padding: 0 5px;
        }

        .itexm-ul > li {
            width: 40%;
        }
    }

    /*go top btn*/
    
    #return-to-top {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: rgb(0, 0, 0);
        background: #f00;
        width: 40px;
        height: 40px;
        display: block;
        text-decoration: none;
        -webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        border-radius: 35px;
        display: none;
        -webkit-transition: all 0.3s linear;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        z-index: 2;
    }
    
    #return-to-top i {
        color: #fff;
        margin: 0;
        position: relative;
        left: 12px;
        top: 9px;
        font-size: 18px;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #product-slider5 .owl-nav .disabled{
        display: block;
    }
    
    #return-to-top:hover {
        background: #970000;
    }
    
    #return-to-top:hover i {
        color: #fff;
        top: 5px;
    }
    
    @keyframes opacity-eye {
        0% {
            opacity: 0;
        }
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    /*animated scroll arrow animation*/
    
    @-webkit-keyframes fade_move_down {
        0% {
            -webkit-transform: translate(0, -10px) rotate(45deg);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            -webkit-transform: translate(0, 10px) rotate(45deg);
            opacity: 0;
        }
    }
    
    @-moz-keyframes fade_move_down {
        0% {
            -moz-transform: translate(0, -10px) rotate(45deg);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            -moz-transform: translate(0, 10px) rotate(45deg);
            opacity: 0;
        }
    }
    
    @keyframes fade_move_down {
        0% {
            transform: translate(0, -10px) rotate(45deg);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: translate(0, 10px) rotate(45deg);
            opacity: 0;
        }
    }
    
    @keyframes rainbowBorder {
        0% {
            box-shadow: 0 0 5px #ff0000;
        }
        12.5% {
            box-shadow: 0 0 5px #ff9000;
        }
        25% {
            box-shadow: 0 0 5px #feff00;
        }
        37.5% {
            box-shadow: 0 0 5px #1dff00;
        }
        50% {
            box-shadow: 0 0 5px #00ffe6;
        }
        62.5% {
            box-shadow: 0 0 5px #0042ff;
        }
        75% {
            box-shadow: 0 0 5px #e200ff;
        }
        87.8% {
            box-shadow: 0 0 5px #ff00b6;
        }
        100% {
            box-shadow: 0 0 5px #ff0000;
        }
    }
    
    @keyframes rainbowText {
        0% {
            color: #ff0000;
            border: #ff0000 1px solid;
        }
        12.5% {
            color: #ff9000;
            border: #ff9000 1px solid;
        }
        25% {
            color: #feff00;
            border: #feff00 1px solid;
        }
        37.5% {
            color: #1dff00;
            border: #1dff00 1px solid;
        }
        50% {
            color: #00ffe6;
            border: #00ffe6 1px solid;
        }
        62.5% {
            color: #0042ff;
            border: #0042ff 1px solid;
        }
        75% {
            color: #e200ff;
            border: #e200ff 1px solid;
        }
        87.8% {
            color: #ff00b6;
            border: #ff00b6 1px solid;
        }
        100% {
            color: #ff0000;
            border: #ff0000 1px solid;
        }
    }


    
    #product-slider3 .disabled,
    #product-slider4 .disabled {
        display: block !important;
    }
    
    #section-mysticlight-background-light {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 0;
        transform: translateX(-60px);
    }
    
    #mysticLight_landing .leftMenu {
        position: fixed;
        top: 30vh;
        z-index: 99;       
        width: 78px;
        right: -100px;
        display: block; 
    }
    
    
    #mysticLight_landing .leftMenu ul li {
        display: inline-block;
        margin-top: 15px;
        position: relative;
        cursor: pointer;
      
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(1) {
        width: 73px;
        height: 87px;
        background: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/left-menu_rgb.png) 0 0 no-repeat;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(2) {
        width: 73px;
        height: 85px;
        background: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/left-menu_mb.png) 0 0 no-repeat;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(3) {
        width: 73px;
        height: 89px;
        background: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/left-menu_led.png) 0 0 no-repeat;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(4) {
         width: 73px;
        height: 76px;
        background: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/left-menu_donwload.png) 0 0 no-repeat;
    }

    #mysticLight_landing .leftMenu ul li:nth-of-type(5) {
        width: 73px;
        height: 76px;
        background: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/left-menu_fb.png) 0 0 no-repeat;
    }

    #mysticLight_landing .leftMenu ul li:nth-of-type(6) {
         width: 73px;
        height: 76px;
        background: url(https://asset.msi.com/event/mb/2017/mb-mystic-light/images/left-menu_top.png) 0 0 no-repeat;
    }

    #mysticLight_landing .leftMenu ul li:nth-of-type(1):before {
        content: 'Mystic Light Palette';
        display: inline-block;
        position: absolute;
        top: 37px;
        right: 75px;
        color: #fff;
        width: 120px;
        text-align: right;
        opacity: 0;
        transition: opacity .5s;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(1):hover:before {
        opacity: 1;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(2):before {
        content: 'Choose Your Motherboard';
        display: inline-block;
        position: absolute;
        top: 25px;
         right: 75px;
        color: #fff;
        width: 120px;
        text-align: right;
        opacity: 0;
        transition: opacity .5s;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(2):hover:before {
        opacity: 1;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(3):before {
        content: 'Mystic Light Sync Partners';
        display: inline-block;
        position: absolute;
        top: 30px;
         right: 75px;
        color: #fff;
        width: 120px;
        text-align: right;
        opacity: 0;
        transition: opacity .5s;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(3):hover:before {
        opacity: 1;
    }
    


    #mysticLight_landing .leftMenu ul li:nth-of-type(4):before {
        content: 'Download SDK';
        display: inline-block;
        position: absolute;
        top: 25px;
         right: 75px;
        color: #fff;
        width: 120px;
        text-align: right;
        opacity: 0;
        transition: opacity .5s;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(4):hover:before {
        opacity: 1;
    }
    
    #mysticLight_landing .leftMenu ul li:nth-of-type(5):hover:before {
        opacity: 1;
    }

    #mysticLight_landing .leftMenu ul li:nth-of-type(6):before {
        content: 'Back to Top';
        display: inline-block;
        position: absolute;
        top: 25px;
         right: 75px;
        color: #fff;
        width: 120px;
        text-align: right;
        opacity: 0;
        transition: opacity .5s;
    }


    #mysticLight_landing .leftMenu ul li:nth-of-type(6):hover:before {
        opacity: 1;
    }
    
    .intel_logo{
        width: 100%;
        max-width: 280px;
        height: auto;
        position: absolute;
        right: 2%;
        top:6%;
        z-index: 9999;
    }


   

    @media (min-width: 1200px) and (max-width: 1570px) {
        .filter-line {
            width: 50%;
            margin-left: 26.333333%;
        }
    }
    
    @media (min-width: 1200px) and (max-width: 1399px) {
        .effectpicker-container {
            padding-left: 0;
            padding-right: 0;
        }
        .light-shape {
            right: 9.7%;
            top: 0.35%;
        }
    }

        @media (min-width: 1281px) and (max-width: 1366px) {


        #mysticLight_landing .leftMenu {
            
            top: 20vh;
            
        }

        #mysticLight_landing .leftMenu ul li:nth-of-type(1) {
            width: 62px;
            height: 64.2px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(2) {
            width: 62px;
            height: 64.2px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(3) {
            width: 62px;
            height: 64.2px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(4) {
             width: 65px;
           height: 60.2px;
            background-size: 100%;
        }

        #mysticLight_landing .leftMenu ul li:nth-of-type(5) {
             width: 65px;
            height: 50.2px;
            background-size: 100%;
        }

       #mysticLight_landing .leftMenu ul li:nth-of-type(6) {
            width: 65px;
            height: 50.2px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(1):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(2):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(3):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(4):before.
        #mysticLight_landing .leftMenu ul li:nth-of-type(5):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(6):before, {
            top: 0px;
            right: 63px;
            background-color: rgba(0, 0, 0, .6);
            padding-right: 8px;
            padding-top: 5px;
            padding-bottom: 5px;
            border-radius: 10px;
        }
    }

    @media (min-width: 992px) and (max-width: 1199px) {
        #mysticLight_landing nav ul li {
            width: 20%;
        }
        .light-shape {
            right: 9.8%;
            top: 0.58%;
        }
        .mysticlight_panel {
            position: absolute;
            z-index: 10;
            top: -5%;
        }

         
    }
    /* Portrait tablets and small desktops */
    
    @media (min-width: 768px) and (max-width: 991px) {
        #mysticLight_landing nav ul li {
            width: 30%;
        }
        .mysticlight_panel {
            position: relative;
        }
        .light-shape {
            position: relative;
        }
        #section-mysticlight-image-lights {
            width: 81%;
            left: auto;
            right: 0;
        }

        
    }
    /* Landscape phones and portrait tablets */
    
    @media (max-width: 767px) {
        #mysticLight_landing nav ul li {
            width: 30%;
        }
        .mystic_slider .mystic,
        .mystic_slider .mystic_sync,
        .mystic_slider .mystic_extension {
            background-position: center 100%;
        }
        .mystic_slider .mystic_sync p {
            width: 100%;
            margin: 0 auto;
        }
    }
    
    @media (max-width: 1200px) {
        .item-product {
            min-height: 290px;
            position: relative;
            text-align: center;
            padding-top: 15px;
            padding-bottom: 15px;
            margin: 8px 0;
            transition: box-shadow .35s ease-out, transform .3s ease-out, opacity .2s ease-out;
        }
    }
    
    @media (max-width: 1280px) {
        #mysticLight_landing .leftMenu ul li:nth-of-type(1) {
            width: 49.8px;
            height: 52.2px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(2) {
            width: 49.8px;
            height: 51px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(3) {
            width: 49.8px;
            height: 53.4px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(4) {
            width: 49.8px;
            height: 45.6px;
            background-size: 100%;
        }

        #mysticLight_landing .leftMenu ul li:nth-of-type(5) {
            width: 49.8px;
            height: 45.6px;
            background-size: 100%;
        }

       #mysticLight_landing .leftMenu ul li:nth-of-type(6) {
            width: 49.8px;
            height: 45.6px;
            background-size: 100%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(1):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(2):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(3):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(4):before.
        #mysticLight_landing .leftMenu ul li:nth-of-type(5):before,
        #mysticLight_landing .leftMenu ul li:nth-of-type(6):before, {
            top: 18px;
            right: 60px;
            background-color: rgba(0, 0, 0, .6);
            padding-right: 8px;
            padding-top: 5px;
            padding-bottom: 5px;
            border-radius: 10px;
        }
        .intel_logo{
            width: 24%;
        }
    }
    
    @media (max-width: 763px) {

        .intel_logo{
            width: 25%;
        }

        #mysticLight_landing h3 {
            font-size: 2em;
            text-align: center;
        }

        .download-body .txt {
            font-size: 1.2rem;
            line-height: 1.4;
        }

        .download-body .att {
           font-size: 1rem;
            line-height: 1.2;
            color: #c9c9c9;
        }

         .header-img{
            width: 50%;
            
        }

        .mystic_slider .mystic p {
            width: 100%;
            margin-left: 0;
            margin: 0 auto;
        }


         .mystic_slider p{
            font-size: 1.2em;
            line-height: 1.2em;
            text-align: center;
         }

        .mystic_slider .mystic_extension {
            padding: 0 8%;
        }

        .mystic_slider .mystic,
        .mystic_slider .mystic_sync,
        .mystic_slider .mystic_extension {
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center 80%;
            width: 90%;
            margin: 0 auto;
            padding-bottom: 66%;
        }

        #feature-slider .owl-next {
            padding: 5px 10px;
            font-size: 1.6em;
            right: 0px;/*0705 by chloe*/
        }

        #feature-slider .owl-prev {
            padding: 10px 12px;
            font-size: 1.6em;
            left: 0px;/*0705 by chloe*/
        }
        .question {
            font-size: 1.2em;
            line-height: 1.6em;
        }
        .answer {
            font-size: 1.6em;
            line-height: 1.6em;
            word-wrap: break-word;
        }
        .mid-sync {
            width: 30%;
            position: relative;
            z-index: 1;
            margin-bottom: -4%;
        }
        .partner-pd-title {
            font-size: 1.6em;
            margin-bottom: 15px;
            background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 100%);
        }
        #product-slider .owl-prev,
        #product-slider2 .owl-prev,
        #product-slider3 .owl-prev,
        #product-slider4 .owl-prev {
            padding: 5px 10px;
            font-size: 1.6em;
            left: -10%;
        }
        #product-slider .owl-next,
        #product-slider2 .owl-next,
        #product-slider3 .owl-next,
        #product-slider4 .owl-next {
            padding: 5px 10px;
            font-size: 1.6em;
            right: -10%;/*0705 by chloe*/
        }
        

      
        #mysticLight_landing .leftMenu ul li:nth-of-type(1) {
            background-size: 78%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(2) {
            background-size: 78%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(3) {
            background-size: 78%;
        }
        #mysticLight_landing .leftMenu ul li:nth-of-type(4) {
            background-size: 78%;
        }

        #mysticLight_landing .leftMenu {
        display: none;
        } /*0705 by chloe*/
    }