/*
   Responsive Design
*/
.desktop-view{display: block;}
.tablet-view{display: none;}
.mobile-view{display: none;}
.tab-mob-view{display: none;}

@media (max-width: 1600px){
    #slider-wrapper {min-height: 1000px;}
    
    .live-video-box {  padding-bottom: 35%; height: 0; margin: 26% 20.5% 26% 18.5%;}

    
    .slider-desktop .wilson-video{ margin: 0.5em 0;}    
    .slider-desktop .wilson-video iframe {width: 90%; height: 320px;}
    .slider-desktop .product-desktop { width: 350px;}
    
    }

@media (max-width: 1440px){
    
    .live-video-box { padding-bottom: 28%; margin: 21% 26% 21% 25%;}

    .slider-desktop .wilson-video iframe {width: 70%; height: 250px;}
    .slider-desktop .product-desktop { width: 390px;}
    
    #slider-wrapper {min-height: 800px;}

    
}

@media (max-width: 1280px){
    #slider-wrapper {min-height: 700px;}
    .slider-desktop .product-desktop { width:  320px;}
    .live-video-box { padding-bottom: 25%; margin: 18.5% 29% 21% 27.5%;}
}

@media (max-width: 1280px){
.thx-container {padding:110px 20px;}
}

@media (max-width: 1170px){
    .live-video-box { padding-bottom: 29.5%; margin: 21.5% 25% 21% 23.5%;}
}

@media (max-width: 1024px) {
    
    #qnaframe{
        font-size: 20px;
        text-align: left;
        padding-left: 20px;
        width: 380px;
    }
	
	.thx-container {padding:100px 20px;}
	.title-thanks{ font-size:30px;}
    .hero-section{
/*        height: 650px;*/
        height: auto;
    }
    .hero-content h1 {
        font-size: 32px;
        line-height: 42px;
    }
    .section-heading h2{
        font-size: 32px;
        line-height: 42px;
    }

    .slider-desktop .wilson-video{ margin-bottom: 0;}
    .slider-desktop .wilson-video iframe {height: 200px;}
    .slider-desktop .product-desktop { width: 250px;}
    .sop-text{ margin-top:5em; }
    .sop-text h1{word-break: keep-all; margin-bottom: 0.5em; }
    
}

/* ---- Start of max-width 992px CSS ---- */
@media (max-width: 992px) {
    #slider-wrapper { min-height: 600px;}
        .wording-left{ width: 90%; margin: 0 auto; text-align: center; margin-bottom: 2em;}
    #slider-wrapper .logo { width:100%; margin: 0 auto;  float: none; padding: 30px 0 15px 0; text-align: center;}

    .mobile-text{ margin: 0 auto; text-align: center; display: block;}
    .mobile-text img{ width: 80%; display: inline-block;}
    .slider-wilson-mobile #wilson-carousel.shop-carousel.owl-carousel .owl-item img { width:80%; margin: 0 auto;}
	
	#thankyou .slider-wrapper{display:none;}
	#thankyou .slider-wrapper-mobile{ display:block;}
	.thx-container {padding:20px;}
	
    .sm-padding{ padding: 15px; }
    .menu-btn,
    .menu-wrap ul.nav{
        display: none;
    }
    .slicknav_menu {
/*        display:block;*/
        display: none;
    }
    .slicknav_nav li:last-child{ display: none; }
    .hero-content h1 {
        font-size: 32px;
        line-height: 42px;
    }
    .feature-section{
        padding-top: 0;
    }
    
    div.content {
        width: 100%!important;
        padding: 5%;
    }

    section#outlets img {
        width: 100%!important;
        padding: 5%;
        margin-bottom: 0%;
    }
    
    .about-list {
        padding: 5% 5%;
    }
    .desktop-view{display: none;}
    .tablet-view{display: block;}
    .mobile-view{display: none;}
    
     #appointments .tab-mob-view{ display: block; text-align: center; line-height: normal;}
    #appointments h1, #appointments h3{ color: #fff;}
    
    .footer-section { margin-bottom: 5em;}
.live-video-box { padding-bottom: 25%; margin: 18.5% 29% 8% 27.5%;}
    
}
/* ---- End of max-width 992px CSS ---- */

/* ---- Start of max-width 768px CSS ---- */
@media all and (max-width: 900px) {
.live-video-box {
    padding-bottom: 34%;
    margin: 25% 21.5% 21% 19.5%;
}
}
    
/* ---- Start of max-width 768px CSS ---- */
@media all and (max-width: 768px) {
    body{
        font-size: 12px;
        line-height: 22px;
        background: url(../img/desktop-background.jpg) #f3c300 no-repeat top center ;
    }
    .container{ padding: 0; margin: 0 auto;}
    h1{
        font-size: 30px!important;
    }
    h2{
        font-size: 20px;
    }
    h3{
        font-size: 16px;
    }
    p br{
        display: none;
    }
    .padding{
        padding: 60px 0;
    }
    .xs-padding{
    	padding: 15px;
    }
    .hero-section{
        height: auto;
        padding: 0;
        background-position: top center;
    }
    .hero-content{
        text-align: center;
    }
    .feature-section{
        padding-top: 0;
    }
    .section-heading h2 {
        font-size: 24px;
        line-height: 36px;
    }
    
    h1.white-text.t1 {
        margin-bottom: 0;
		color:#fff;
        line-height: 1.0;
        font-family: times new roman;
        font-size: 48px!important;
    }
    
    .outlet-card{padding: 15px !important;border-radius: 0!important; background: transparent !important;}
    
    .mobile-outlet-card{
        padding: 15px!important;
		background: #fff0c7 !important;
        
        border-radius: 4px!important;
    }

    #logo-wrapper { margin: 0 auto; text-align: center;}
    .left-img {margin-top:-2em;}
    
    #qnaframe{ width: 100%; margin: 0 50px; font-size: 24px; padding-left:30px;}
    .product-kit-img{ margin-left: -3em; margin-top: -1em;}
    
    .box{ width: 80%; margin: 0 auto;}
    .text-form{ font-size: 16px;}
    .box .inputBox{ margin-bottom: 1em;}
    .hair-treatment-img{ margin:0 1em 3em 1em; }
    #outlets{ background: #fff;}
    .flexslider .slides img{ width: auto;}
    
    .jeff-model{display: none;}
    
    #slider-wrapper {
    width: 100%;
    text-align: center;
    background: none;
    min-height: auto;
    background-size: cover;
}
    
    .jeff-video {margin-top: 38em;}
    
    .slider{ display: none;}
    .mobile{ display: block;}
    .jeff-video{ display: none;}
    
    .jeff-video-mobile{ position: absolute; top:0; margin: 0 auto; left: 0;right: 0;
    margin-top: 39em;}
    
    .jeff-video-mobile iframe{ width: 600px; min-height: 350px;}

}
/* ---- End of max-width 767px CSS ---- */


/* ---- Start of max-width 520px CSS ---- */
@media all and (max-width: 520px) {
    .subscribe-form{ width: 100%; }
    .card-header a{
        font-size: 14px;
        line-height: 18px;
    }
    #accordion{
        padding-right: 0;
    }
    .subscribe-form input{
        width: 100%;
    }
    .submit-btn{
        width: 100%;
    }
    .default-btn.order{
        font-size: 8px;
    }
    .section-heading h2{
        font-size: 32px;
        line-height: 26px;
        letter-spacing: -0.5px;
    }
    .section-heading h2 br{
        display: none;
    }
    .icons-wrap span.icon-2{
        left: 5%;
        top: 40px;
    }
    .icons-wrap span {
        left: 110px;
        top: 40px;
    }
    .icons-wrap span.icon-3{
        top: 55px;
    } 
    section#video-generic{padding: 32px 10px!important;}
    section#video-generic div{display: flex; flex-direction: column-reverse;}
    .text-col :nth-child(1) { order: 3; }
    .text-col :nth-child(2) { order: 2; }
    .text-col :nth-child(3) { order: 1; }
    .desktop-view{display: none;}
    .tablet-view{display: none;}
    .mobile-view{display: block;}

    #outlets .container{ padding: 0 30px; }
    .container{ width: 90%; margin: 0 auto;}
    #qnaframe{ margin: 0 auto; width: 85%; font-size: 20px; padding-left:0; margin-bottom: 1em; }
    .question-product-bar .col-lg-8 #qnaframe { float: none; text-align: center;}
    .product-kit-img, .question-product-bar .col-lg-4 .product-kit-img{ display: none;}
    .hair-treatment-img{ margin: 0 auto;}
    #hair-treatment{ padding-bottom: 2em;}
    .jeff-video iframe { height: 220px;}
    .jeff-img img.tvc {   margin-top: -30px;}
    thank-you-img{ margin: 0 auto; text-align: center;}
    
     .jeff-video-mobile{ position: absolute; top:0; margin: 0 auto; left: 0;right: 0;
    margin-top: 26.3em;}
    
    .jeff-video-mobile iframe{ width: 80%; height: 240px; min-height: inherit;}

}
/* ---- End of max-width 520px CSS ---- */

/* ---- Start of max-width 480px CSS ---- */
@media all and (max-width: 480px) {
.jeff-video-mobile { margin-top: 24.3em; }
.jeff-video-mobile iframe { height: 220px;}
    
}


/* ---- Start of max-width 420px CSS ---- */
@media all and (max-width: 422px) {
    
    .jeff-video-mobile { margin-top: 21.5em;}
    .jeff-video-mobile iframe { height: 190px; }
    #slider-wrapper .logo{ width: 180px; padding: 10px 0;}
    #wilson-video-mobile .wilson-video { margin-top: 32em;}
    #wilson-video-mobile .wilson-video iframe { height: 180px;}
    .about-list {
        padding: 5% 0;
    }
    h1.white-text.t1 {
        font-size: 45px!important;
    }
    
    #qnaframe {
    font-size: 16px;
    }
    
    #qnaframe table{ margin-left: -2em;}
     .box {
	padding: 30px 20px;
    }
    
     .jeff-video iframe { height: 200px;}
}
/* ---- End of max-width 420px CSS ---- */

@media all and (max-width: 400px) {
    
    .jeff-video-mobile { margin-top: 20.2em;}
    .jeff-video-mobile iframe { height: 185px; }
}

@media all and (max-width: 393px) {
    
    .jeff-video-mobile { margin-top: 19.9em;}
    .jeff-video-mobile iframe { height: 180px; }
}

@media all and (max-width: 390px) {
    
    .jeff-video-mobile { margin-top: 19.9em;}
    .jeff-video-mobile iframe { height: 175px; }
}

/* ---- Start of max-width 380px CSS ---- */
@media all and (max-width: 380px) {
     .jeff-video iframe { height: 170px;}
	.about-list li {
        font-size: 17px;
    }
    h1.white-text.t1 {
        font-size: 43px!important;
    }
    p.white-text.t2 {
        font-size: 11px;
    }
    
     #wilson-video-mobile .wilson-video { margin-top: 28em;}
    #wilson-video-mobile .wilson-video iframe { height: 160px;}
    
}
/* ---- End of max-width 380px CSS ---- */

/* ---- Start of max-width 360px CSS ---- */
@media all and (max-width: 360px) {
.jeff-video-mobile{ margin-top: 18.1em;}
    
    .jeff-video-mobile iframe{ width: 80%; height: 168px; min-height: inherit;}
}