/* AR Guidance popup
    ----------------------------------------------------------- */
    
    #popup_slider_overlay {
        background: #fff;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
    }
    
    #popup_slider_container {
        display: none;
        overflow: auto;
        position: fixed;
        z-index: 3000;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    #popup_slider_box {
        pointer-events: auto;
        position: absolute;
        z-index: 2;
        display: block;
        margin: 0 auto;
        z-index: 3000;
        width: 100%;
        padding: 18px;
        box-sizing: border-box;
        background: #fff;
        opacity: 0;
        top: 0;
        right: 0;
        left: 0;
        height: 100%;
        padding-top: 30px;
        overflow: scroll;
    }

    #popup_slider_inner {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 40px;
        pointer-events: none;
    }

    body.popup_slider_active #popup_slider_container {
        display: block;
    }

    body.popup_slider_visble #popup_slider_overlay {
        opacity: 1;
    }

    body.popup_slider_visble #popup_slider_box {
        opacity: 1;
        transform: none;
        /*transition: opacity 200ms ease-in;*/
        transition: transform 3000ms cubic-bezier(.18, 1, .21, 1), opacity 2000ms cubic-bezier(.18, 1, .21, 1);
    }

    #popup_slider_container div,
    #popup_slider_container span,
    #popup_slider_slides h1,
    #popup_slider_slides h2,
    #popup_slider_slides h3,
    #popup_slider_slides h4,
    #popup_slider_slides h5,
    #popup_slider_slides h6,
    #popup_slider_slides p,
    #popup_slider_slides .button {
        /*font-family: Calibre,Sans-Serif !important;*/
        text-transform: none !important;
        letter-spacing: 0;
        margin-right: auto;
        margin-left: auto;
        color: rgb(21, 21, 21);
    }

    h2.popup_slider_main_header {
        width: 100%;
        font-weight: bold;
        font-size: 4.5rem;
        line-height: 4rem;
        max-width: 325px;
        margin-top: 30px;
    }

    h6.popup_slider_small_subtitle {
        margin-top: -10px;
        margin-bottom: 50px;
        max-width: 325px;
        font-size: 2rem;
    }

    h3.popup_slider_subtitle {
        margin-bottom: 35px;
        font-size: 3.0rem;
        line-height: 4.0rem;
        max-width: 385px;
    }

    .popup_slider_description p {
        font-size: 2.5rem;
        line-height: 3.5rem;
        max-width: 424px;
        margin: 5px auto;
    }

    .popup_slider_gif_container.small,
    .popup_slider_gif_container.large {
        margin-bottom: 15px;
    }

    #popup_slider_slides {
      position: relative;
      margin: 0 auto 0 auto;
      border-radius: 4px;
      height: 100%;
      /*font-family: Calibre,Sans-Serif !important;*/
    }

    #popup_slider_slides ul {
      position: relative;
      margin: 0;
      padding: 0;
      height: 100%;
      list-style: none;
    }
    #popup_slider_slides ul li.slide_2,
    #popup_slider_slides ul li.slide_1 {
      position: relative;
      display: block;
      float: left;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      text-align: center;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container {
        width: 100%;
        margin-top: auto;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button {
        display: block;
        margin: 10px 0;
        width: 100%;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button a {
        float: none;
        font-size: 2.5rem;
        line-height: 3.5rem;
        padding-top: 16.5px;
        padding-bottom: 13px;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button a {
        border: 3px solid rgb(21, 21, 21);
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button a.control_exit span {
        color: rgb(21, 21, 21) !important;
    }
    #popup_slider_slides ul li .popup_slider_buttons_container .button a {
        background-color: rgb(21, 21, 21);
        color: #fff;
    }
    #popup_slider_slides ul li .popup_slider_buttons_container .button a.control_exit {
        background-color: #fff;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button a span {
        color: #fff;

    background: unset;
    border: 0;
}

    #popup_slider_slides ul li .popup_slider_buttons_container .button a.control_next:after {
        font-family: "artlogic-social-icons" !important;
        content: "\e027";
        margin-left: 7px;
        margin-bottom: 1;
        font-size: 1em;
        vertical-align: top;
    }

    .button .button_loader {
        position: absolute;
        top: 50px;
        left: 50%;
        width: 26px;
        height: 26px;
        margin-left: -13px !important;
        min-width: 0;
        z-index: 5;
        padding: 0 !important;
        transition: top 400ms ease-in-out;
        transform: translateY(-50%);
        pointer-events: none;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button.loading a {
        opacity: 1;
    }
    #popup_slider_slides ul li .popup_slider_buttons_container .button.loading a span {
        opacity: 0;
    }

    #popup_slider_slides ul li .popup_slider_buttons_container .button.loading .button_loader svg .path {
        stroke: #fff;
    }

    #popup_slider_slides ul li.slide_1 .popup_slider_buttons_container .button.top.loading .button_loader svg .path {
        stroke: rgb(21, 21, 21);
    }

    #popup_slider_container:not(.qr_code) #popup_slider_close_popup {
        display: none;
    }

    #popup_slider_container .close {
        position: absolute;
        z-index: 1200;
        cursor: pointer;
        text-indent: -9999px;
        top: 30px;
        right: 25px;
        z-index: 100;
        width: 30px;
        height: 30px;
        cursor: pointer;
        -moz-transition: opacity 2s cubic-bezier(.18, 1, .21, 1);
        -o-transition: opacity 2s cubic-bezier(.18, 1, .21, 1);
        -webkit-transition: opacity 2s cubic-bezier(.18, 1, .21, 1);
        transition: opacity 2s cubic-bezier(.18, 1, .21, 1);
    }
        #popup_slider_container .close a {
            display: block;
            text-indent: 0;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 0;
            right: 0;
            left: 0;
            text-indent: -9999px;
        }
        #popup_slider_container .close::after {
            display: block;
            content: "\e034";
            text-indent: 0;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            right: 0;
            left: 0;
            text-align: right;
            font-family: "artlogic-social-icons" !important;
            font-style: normal !important;
            font-weight: normal !important;
            font-variant: normal !important;
            font-size: 20px;
            line-height: 20px;
            letter-spacing: 0;
            text-transform: none !important;
            speak: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            color: #555;
        }

/* AR QR Code popup
----------------------------------------------------------- */

    #popup_slider_container.qr_code #popup_slider_box {
        width: 100%;
        max-width: 580px;
        min-height: auto;
        top: auto;
        padding-top: 20px;
        position: relative;
        height: auto;
    }

    #popup_slider_container.qr_code #popup_slider_overlay {
        background: rgba(0,0,0,0.4);
        height: 100%;
    }

    #popup_slider_container.qr_code .qr_code_wrapper {
        display: flex;
    }

    #popup_slider_container.qr_code .qr_code_wrapper .qr_code_image {
        flex: 50%;
        padding: 10px 10px 0 5px;
    }

    #popup_slider_container.qr_code .qr_code_wrapper .qr_code_description {
        flex: 50%;
        display: flex;
        justify-content: center;
    }

    #popup_slider_container.qr_code .qr_code_wrapper .qr_code_description .description {
        margin: auto 0;
        text-align: center;
        padding: 30px;
        line-height: 1.8em;
        color: #010101;
    }

    #popup_slider_container.qr_code .qr_code_wrapper .qr_code_description .description .note {
        font-size: 1.2rem;
        line-height: 1.8em;
        padding: 30px 0 0 0;
    }

    #popup_slider_container.qr_code .qr_code_wrapper .qr_code_image .ar-qr_code-label {
        display: none;
    }

/* AR Mobile device warning (AR is not enabled)
----------------------------------------------------------- */

    .note_panel_warning.ar_warning_mobile {
        margin-bottom: 5px;
    }

    .note_panel_warning.ar_warning_mobile .note_panel_message {
        line-height: 2.2rem;
        padding: 15px 10px 13px 40px;
        position: relative;
        font-size: 1.1rem;
    }

    .note_panel_warning.note_panel_warning.ar_warning_mobile {
        border: 1px solid #FFC376;
        background: #FFF0DC;
        color: #8E530F;
    }

    .note_panel_warning.ar_warning_mobile .fa.fa-warning {
        position: absolute;
        left: 15px;
        top: 17px;
        color: #F19B06;
        margin-right: 15px;
        padding-right: 15px;
    }

    .arpromptbox {
        z-index: 9999 !important;
    }

    div.arprompt .arpromptclose {
        right: 8px !important;
    }

    .ar_mobile_prompt h3 {
        line-height: 1.5em;
        max-width: 95%;
    }

    .ar_mobile_prompt p {
        line-height: 2.3rem;
    }

    /* Slide AR Intro (slide 1)
    ----------------------------------------------------------- */


    /* Slide AR Tips (slide 2)
    ----------------------------------------------------------- */

    .slide_2 h2.popup_slider_main_header {
        margin-bottom: 30px;
    }

    .slide_2 .popup_slider_description p {
        max-width: 400px;
    }

    .slide_2 .popup_slider_description.top p {
        max-width: 335px;
        margin: 0 auto;
    }

    .slide_2 .popup_slider_description.bottom p {
        max-width: 450px;
    }

    /* Animations
    ----------------------------------------------------------- */

    #popup_slider_slides ul li .content_wrapper.visible ul {
        display: flex;
        flex-direction: column;
        /*justify-content: space-around;*/
    }

    #popup_slider_slides ul li .content_wrapper ul li:not(.popup_slider_buttons_container) {
        margin-bottom: auto;
    }

    #popup_slider_slides ul li .content_wrapper ul li,
    #popup_slider_slides ul li.slide_2 .content_wrapper ul li {
        opacity: 0;

    }
    #popup_slider_slides ul li.slide_2 .content_wrapper.visible ul li.animate_in {
        opacity: 1;
        transform: none;
        transition: transform 1200ms cubic-bezier(0.0,0.0,0.2,1),opacity 1200ms cubic-bezier(0.0,0.0,0.2,1);
    }
    #popup_slider_slides ul li:not(.slide_2) .content_wrapper.visible ul li {
        opacity: 1;
        transform: none;
        transition: transform 1200ms cubic-bezier(0.0,0.0,0.2,1),opacity 1200ms cubic-bezier(0.0,0.0,0.2,1);
    }

    #popup_slider_slides ul li .content_wrapper.visible ul li:first-child {
        -webkit-transition-delay: 100ms;
        transition-delay: 100ms;
    }
    #popup_slider_slides ul li .content_wrapper.visible ul li:nth-child(2) {
        -webkit-transition-delay: 600ms;
        transition-delay: 600ms;
    }
    #popup_slider_slides ul li .content_wrapper.visible ul li:nth-child(3) {
        -webkit-transition-delay: 1100ms;
        transition-delay: 1100ms;
    }
    #popup_slider_slides ul li .content_wrapper.visible ul li:nth-child(4) {
        -webkit-transition-delay: 1600ms;
        transition-delay: 1600ms;
    }
    #popup_slider_slides ul li .content_wrapper.visible ul li:nth-child(5) {
        -webkit-transition-delay: 1600ms;
        transition-delay: 1600ms;
    }

    @keyframes fade-in-item {
      0%   { display: block; opacity: 0;  }
      30% { display: block; opacity: .5; }
      60% { display: block; opacity: .8; }
      100% { display: block; opacity: 1; }
    }

    @keyframes ar_tip_animation {
        0% {background-position: 0%;}
        75% {background-position: 100%;}
        100% {background-position: 100%;}
    }

    /*@keyframes ar_tip_animation {*/
    /*  0% { background-position: 0; }*/
    /*  100% { background-position: -4920px; }*/
    /*}*/

    li .gif_animate {
        display: block;
        margin: 0 auto;
        animation-play-state: paused;
    }

    li.animate_in .gif_animate {
        animation-play-state: running;
    }

    /* Animation images
    ----------------------------------------------------------- */

    .main_image {
        display: block;
        width: 310px;
        height: 260px;
        margin: 0 auto;
        background: url(/lib/jquery/plugins/augmented_reality/1.0/assets/main_image_52_frames.png) 0 0 no-repeat;
        background-size: 5200% 260px;
        animation: ar_tip_animation 2s steps(51, end) infinite forwards;
        -webkit-animation: ar_tip_animation 2s steps(51, end) infinite forwards;
    }

    .light_bulb {
        width: 80px;
        height: 80px;
        background: url(/lib/jquery/plugins/augmented_reality/1.0/assets/bulb.png) 0 0 no-repeat;
        background-size: 800% 80px;
    }
    li.animate_in .light_bulb {
        animation-play-state: play;
        -webkit-animation: ar_tip_animation 1.2s steps(7, end) 1 forwards;
        animation: ar_tip_animation 1.2s steps(7, end) 1 forwards;
    }

    .wall_template {
        width: 270px;
        height: 150px;
        background: url(/lib/jquery/plugins/augmented_reality/1.0/assets/wall_template_sprite_24_frames.jpg) 0 0 no-repeat;
        background-size: 2400% 150px;
    }

    li.animate_in .wall_template {
        -webkit-animation: ar_tip_animation 1.2s steps(23) 2 forwards;
        animation: ar_tip_animation 1.2s steps(23) 2 forwards;
    }

    .wall_scan {
        width: 180px;
        height: 160px;
        background: url(/lib/jquery/plugins/augmented_reality/1.0/assets/wall_scan_sprite_36_frames.png) 0 0 no-repeat;
        background-size: 3600% 160px;
    }

    li.animate_in .wall_scan {
        animation: ar_tip_animation 2.5s steps(35, start) 2 forwards;
        -webkit-animation: ar_tip_animation 2.5s steps(35, start) 2 forwards;
    }

    #popup_slider_slides ul li .content_wrapper.visible {
        opacity: 1.0;
        transform: none;
        transition: transform 700ms cubic-bezier(0.0,0.0,0.2,1),opacity 700ms cubic-bezier(0.0,0.0,0.2,1);
    }

    #popup_slider_slides ul li .content_wrapper {
        opacity: 0;
        transform: translate3d(0,20px,0);
        height: 100%;
    }

     /*#popup_slider_slides ul,*/
     /*#popup_slider_slides,*/
     /*#popup_slider_box,*/
     /*#popup_slider_inner {*/
     /*    min-height: 100% !important;*/
     /*    height: 90vh !important;*/
     /*}*/



    /* RESPONSIVENESS
    ----------------------------------------------------------- */

    @media screen and (min-width: 1024px) and (orientation : portrait) {

        h2.popup_slider_main_header {
            font-size: 6.4rem;
            line-height: 5.5rem;
        }

        h3.popup_slider_subtitle {
            margin-bottom: 35px;
            font-size: 4.6rem;
            line-height: 5.1rem;
            max-width: 595px;
            margin-top: 25px;
        }

        h6.popup_slider_small_subtitle {
            margin-top: 0;
            margin-bottom: 50px;
            max-width: 325px;
            font-size: 2.5rem;
        }

        .popup_slider_description p {
            max-width: 600px;
        }

        #popup_slider_slides ul li .popup_slider_buttons_container .button a,
        .popup_slider_description p {
            font-size: 3.5rem;
            line-height: 4.6rem;
        }

        #popup_slider_slides ul li .popup_slider_buttons_container .button a {
            padding-bottom: 18px;
            padding-top: 22px;
        }

        .slide_2 .popup_slider_description.top p {
            max-width: 450px;
        }

        .slide_2 .popup_slider_description.bottom p {
            max-width: 625px;
        }

        .slide_2 .popup_slider_description p {
            max-width: 555px;
        }

        .main_image {
            width: 450px;
            height: 400px;
            background-size: 5200% 400px;
        }

        .light_bulb {
            width: 140px;
            height: 140px;
            background-size: 800% 140px;
            padding-bottom: 20px;
        }

        .wall_template {
            width: 420px;
            height: 215px;
            background-size: 2400% 215px;
        }

        .wall_scan {
            width: 265px;
            height: 205px;
            background-size: 3600% 205px;
        }
    }


    @media screen and (max-width: 767px) {

        h2.popup_slider_main_header {
            width: 100%;
            font-weight: bold;
            font-size: 3.4rem;
            line-height: 2.5rem;
            max-width: 275px;
            margin-top: 5px;
        }

        h3.popup_slider_subtitle {
            margin-bottom: 5px;
            font-size: 2.3rem;
            line-height: 2.7rem;
            max-width: 300px;
        }

        h6.popup_slider_small_subtitle {
            margin-top: -15px;
            margin-bottom: 25px;
            max-width: 275px;
        }

        .popup_slider_description p {
            font-size: 1.8rem;
            line-height: 2.6rem;
            max-width: 305px;
            margin: 0 auto;
        }

        .slide_2 h2.popup_slider_main_header {
            margin-bottom: 25px;
        }

        .slide_2 .popup_slider_description p {
            max-width: 100%;
        }

        
        #popup_slider_slides ul li .popup_slider_buttons_container .button {
            margin: 5px 0;
        }
        
        #popup_slider_slides ul li .popup_slider_buttons_container .button a {
            padding-bottom: 10px;
            padding-top: 13px;
            font-size: 1.7rem;
            line-height: 2.6rem;
        }
    }
     
     @media screen and (max-width: 767px) and (max-height: 720px) {
         
        h2.popup_slider_main_header {
            font-size: 3rem;
            line-height: 2.8rem;
            max-width: 275px;
        }
        
        h3.popup_slider_subtitle {
            margin-bottom: 15px;
            font-size: 2.2rem;
            line-height: 2.4rem;
            max-width: 280px;
        }

        h6.popup_slider_small_subtitle {
            margin-top: -18px;
            margin-bottom: 15px;
            max-width: 275px;
            font-size: 1.3rem;
            line-height: 2.8rem;
        }
        
        .popup_slider_description p {
            max-width: 300px;
        }
        
        #popup_slider_slides ul li .popup_slider_buttons_container .button a,
        .popup_slider_description p {
            font-size: 1.8rem;
            line-height: 2.3rem;
        }
        
        .slide_2 .popup_slider_description p {
            max-width: 250px;
        }
        
        .slide_2 .popup_slider_description.bottom p {
            max-width: 320px;
        }
        
        .slide_2 .popup_slider_description.top p {
            max-width: 200px;
        }
        
        .slide_2 h2.popup_slider_main_header {
            margin-top: 0px;
        }
        
        .main_image {
            width: 210px;
            height: 200px;
            background-size: 5200% 200px;
        }
        
        .wall_template {
            width: 160px;
            height: 90px;
            background-size: 2400% 90px;
        }
        
        .wall_scan {
            width: 115px;
            height: 105px;
            margin-top: 0;
            background-size: 3600% 105px;
        }
        
        .light_bulb {
            width: 60px;
            height: 60px;
            background-size: 800% 60px; 
        }
     }
     
     @media screen and (max-width: 640px) {
         
        #popup_slider_container.qr_code #popup_slider_box #popup_slider_close_popup .close {
            right: 20px;
        }
        
        #popup_slider_container.qr_code #popup_slider_box #popup_slider_inner {
            padding: 0;
        }
        #popup_slider_container.qr_code #popup_slider_box {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 100%;
            padding-top: 55px;
            padding-bottom: 90px;
        }
        
        #popup_slider_container.qr_code .qr_code_wrapper {
            flex-direction: column;
        }
     }
     
      @media screen and (max-width: 459px) {
    
        h6.popup_slider_small_subtitle {
            margin-top: -16px;
            font-size: 1.3rem;
        }
        
        .popup_slider_description p {
            margin-bottom: 5px;
        }
        
        .slide_2 h2.popup_slider_main_header {
            margin-bottom: 15px;
        }
        
        .wall_template {
            width: 215px;
            height: 115px;
            background-size: 2400% 115px;
        }
        
        .wall_scan {
            width: 160px;
            height: 140px;
            margin-top: 0px;
            background-size: 3600% 140px;
        }
        
        .main_image {
            width: 250px;
            height: 220px;
            background-size: 5200% 220px;
        }

        /*.ar_mobile_prompt h3 {*/
        /*    font-size: 1.3rem;*/
        /*    line-height: 1.4em;*/
        /*}*/
        .arpromptbuttons button,
        .ar_mobile_prompt p {
            /*font-size: 1.2rem !important;*/
        }
     }
     
     @media screen and (max-width: 459px) and (max-height: 667px) {
         
        h2.popup_slider_main_header {
            font-size: 2.6rem;
            line-height: 2.2rem;
            max-width: 275px;
        }
        
        h3.popup_slider_subtitle {
            margin-bottom: 15px;
            font-size: 2rem;
            line-height: 2.1rem;
            max-width: 240px;
        }

        h6.popup_slider_small_subtitle {
            margin-top: -18px;
            margin-bottom: 15px;
            max-width: 275px;
            font-size: 1.1rem;
            line-height: 2.8rem;
        }
        
        .popup_slider_description p {
            margin-bottom: 5px;
            max-width: 272px;
        }
        
        #popup_slider_slides ul li .popup_slider_buttons_container .button a,
        .popup_slider_description p {
            font-size: 1.6rem;
            line-height: 2.2rem;
        }
        
        .slide_2 .popup_slider_description.top p {
            max-width: 180px;
        }
        
        .slide_2 .popup_slider_description p {
            max-width: 222px;
        }
        
        .slide_2 .popup_slider_description.bottom p {
            max-width: 275px;
        }
        
        .slide_2 h2.popup_slider_main_header {
            margin-top: 0px;
        }
        
        .wall_template {
            width: 150px;
            height: 80px;
            background-size: 2400% 80px;
        }
        
        .wall_scan {
            width: 105px;
            height: 95px;
            margin-top: 0;
            background-size: 3600% 95px;
        }
        
        .main_image {
            width: 170px;
            height: 150px;
            background-size: 5200% 150px;
        }
        
        .light_bulb {
            width: 50px;
            height: 50px;
            background-size: 800% 50px; 
        }
     }

     @media screen and (max-width: 1023px) and (orientation : landscape) {
         
         #popup_slider_slides,
         #popup_slider_box,
         #popup_slider_inner {
             min-height: 100vh;
             height: auto;
         }
         
         #popup_slider_slides ul li .content_wrapper ul li:not(:last-child) {
             padding-bottom: 40px;
         }
     }
     
     @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
         
        h2.popup_slider_main_header {
            font-size: 3rem;
            line-height: 2.8rem;
            max-width: 275px;
        }
        
        h3.popup_slider_subtitle {
            margin-bottom: 15px;
            font-size: 2.2rem;
            line-height: 2.4rem;
            max-width: 280px;
        }

        h6.popup_slider_small_subtitle {
            margin-top: -18px;
            margin-bottom: 15px;
            max-width: 275px;
            font-size: 1.3rem;
            line-height: 2.8rem;
        }

        .popup_slider_description p {
            max-width: 300px;
        }
        
        #popup_slider_slides ul li .popup_slider_buttons_container .button a,
        .popup_slider_description p {
            font-size: 1.8rem;
            line-height: 2.3rem;
        }
        
        .slide_2 .popup_slider_description.top p {
            max-width: 200px;
        }
        
        .slide_2 .popup_slider_description p {
            max-width: 250px;
        }
        
        .slide_2 .popup_slider_description.bottom p {
            max-width: 320px;
        }
        
        .slide_2 h2.popup_slider_main_header {
            margin-top: 0px;
        }
        
        .wall_template {
            width: 180px;
            height: 100px;
            background-size: 2400% 100px;
        }
        
        .wall_scan {
            width: 130px;
            height: 110px;
            margin-top: 0;
            background-size: 3600% 110px;
        }
        
        .main_image {
            width: 250px;
            height: 200px;
            background-size: 5200% 200px;
        }
        
        .light_bulb {
            width: 70px;
            height: 70px;
            background-size: 800% 70px; 
        }
         
     }