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

@media (max-width: 1660px){
.slider-wrapper .video-slider iframe { width: 25%; }
    .google-border{ width: 100%;}
    
    #banner{ min-height: 800px;}
}

@media (max-width: 1537px){
#banner { min-height: 730px; }
    
}

@media (max-width: 1440px){
#banner { min-height: 680px; }    
.weon-photo{ width: 200px;}

}

@media (max-width: 1367px){
    #banner { min-height: 640px; }
.slider-wrapper .video-slider iframe { width: 30%; }
}

@media (max-width: 1281px){
    #slider{ background-size: 120% auto;}
    #slider #wayne-carousel{ width: 50%; padding: 10px 0; }
    img.sk-wording { margin-right: 12%; }
    .thx-container {padding:110px 20px;}
    
    .weon-photo{ width: 180px;}
    #banner { min-height: 610px; }  
    
    .short-video{ width: 450px; height: 450px;}
    .artise-video{width: 530px; height: 530px;}
}

@media (max-width: 1200px){
    #beforeafter .owl-carousel,  #14-days-carousel .owl-carousel, #beforeafter-carousel .owl-carousel{width: 90%;}
    
    .slider-r-carousel{ width: 260px; top: 0;}
    .weon-photo{ width: 157px;}
    #banner{ min-height: inherit;}
    
    .short-video{ width: 360px; height: 360px;}
    .artise-video{width: 420px; height: 420px;}
    
    .circle-middle{margin: 57px 0 0 80px;}

}

@media (max-width: 1024px) {
    
    #banner { min-height: 490px;  }
    
     .weon-photo{ width: 145px; padding-bottom: 15px;}
    
    
    .slider-wrapper .video-slider{ top: 3.2%;}
    .slider-wrapper .video-slider iframe{min-height: 230px;}
	
	.thx-container {padding:150px 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;
    }
    
    #book .section-heading h2{
    font-size: 15px;
        line-height: normal;
        font-weight: 600;
    }
    
    .package-text { padding: 0 65px; }
    
}

/* ---- Start of max-width 992px CSS ---- */
@media (max-width: 992px) {
    
    .detox-video iframe{ width: 100%; min-height:500px; }
    
    .bg-mobile-form{ background: #443073;}
    .form-title{ color: #fff; margin-top: 1em;}
    .book{padding: 0 30px 0 30px;}

    #slider-mobile{ width: 100%; display: block;background: url(../img/Carol-09-4.jpg) center top no-repeat; background-size: 100% 100%; text-align: center; padding-bottom: 3em;}
    .slider-wrapper-mobile img{ width: 95%;}
    .logo-mobile{ width: 300px; float: none; margin: 0 auto; padding-top: 60px; padding-bottom: 30px;}

   
    
#thankyou .slider-wrapper-mobile{ width: 100%; display: block;}
	.footer-section{    margin-bottom: 6em;}
	#thankyou .slider-wrapper{display:none;}
	#thankyou{ display:block; background: url(../img/Sherlyn_mobile-background2.jpg) center top no-repeat; background-size: 100% 100%;}
	.thx-container {padding:40px 20px;}
    .package-img-desktop{ width: 100%; display: none;}
    .package-img-mobile{ width: 100%; display: block;}
	
    .tab-mob-view{display: block; color: #0f1d46!important; background: #fff;}
    .active.tab-mob-view{display: block; color:#fff!important;background: #000;}
    .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;
        margin-bottom: 0%;
    }
    
    .about-list {
        padding: 5% 5%;
    }
    .desktop-view{display: none;}
    .tablet-view{display: block;}
    .mobile-view{display: none;}
	
	.contact-bar {
		display: flex;
		position: fixed;
    	width: 100%;
    	bottom: 0;
    	left: 0;
    	z-index: 99;
	}
	
 .whatsapp-box, .booking-box {
    width: auto;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    flex: 1;
    font-size: 18px;
}
	.whatsapp-box {
    background-color: #eaeaea;
}
	.contact-bar span{
		color:#000;
		font-size:10px;
		display: block;
	}
	
	i.fa.fa-phone {
    background: #443073;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding-top: 6px;
}
	i.fa.fa-pencil-square-o {
    background: #fb7abd;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding-top: 7px;
    padding-left: 2px;
}
	i.fa.fa-facebook {
    background: white;
    color: deepskyblue;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding-top: 6px;
}
	
.booking-box {
    background-color: #fff;
}
	i.fa.fa-whatsapp {
    background: green;
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding-top: 6px;
}
	
	.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
	}
	
	#package {
        padding:2em 0;
        background: url(../img/Sherlyn_mobile-background.jpg) center top no-repeat;
        background-size: 100% 100%;
}
    .package-text-top{width: 85%; }
    .package-text-btn{width: 85%;}
    .package-text{ font-weight: 700;}
    
    .text-thanks { padding: 10px 20px; font-size: 18px;}

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


/* ---- End of min-width 480px and max-width 768px CSS ---- */


/* ---- Start of max-width 767px CSS ---- */
@media all and (max-width: 768px) {
    .container{ max-width: 100%;}
    #banner{ display: none;}
    #banner-mobile{ 
        display: block; 
        background: url(../img/DR-microsite-Weon-12.jpg) top left no-repeat;
        min-height: 1080px;
    }
    
    #weon-mobile-carousel{ margin-top: 11em;}
    .para1{ margin: 0 2em;}
    
    .artise-video{ margin: 0 auto; margin-top: 3em;}
    
    .slider-r-carousel{ width: 400px; padding-left: 4em; padding-top: 3em;}
    
    #weon-step .row.step1, #weon-step .row.step3{ display: flex;  flex-direction: column-reverse;}
    
    .steptop { margin: 0 auto; padding: 0; text-align: center;}
    
    .circle-top{ margin: 160px 0 0 100px;}
    
    .stepmiddle{margin: 0 0 0 20%;}
    
    .circle-middle.u-circle{ margin: 140px 0 0 45%;}
    
    .circle-bottom{ margin: 50px 0 0 15%;}
    .stepbottom img{margin: -350px 0 0 30%;}
    
    .banner-pic img{ width: 100%;}
    body, p{
        font-size: 12px;
        line-height: 22px;
    }
    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;
    }
    
    #package .container{ max-width:100%; padding:0;}
    #book{padding: 10px 22px 40px;}
    
    .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;
    }
	.title-challenge { font-size: 30px;}

    
    #book .row .xs-padding {padding:0;}
    
        .thank-model {
        display: none;
    }

        .thank-model-mobile {
        background: url(../img/thankyou-800-bg.jpg) no-repeat;
        display: block;
    }
    
     .box .btn-submit input{ background: #e7e3f2; color: #000;}
    .terms-agree{ color: #fff;}
    
}
/* ---- End of max-width 767px CSS ---- */

/* ---- Start of max-width 640px CSS ---- */
@media all and (max-width: 640px) {
    
    #banner-mobile .container{ padding: 0;}
    #banner-mobile{  background-size: 100% auto; min-height: 860px; }
   
    
    #weon-mobile-carousel{ margin-top: 7em;}
    .artise-video{ height: 100%;}
    
    .slider-r-carousel{ width: 250px; }
    #bar-weon{ margin-top: 2em;}
    
   
    
}

/* ---- Start of max-width 520px CSS ---- */
@media all and (max-width: 520px) {
    
    .step-title, .step-title-02, .step-title-03{ padding: 0.5em 10px 0 10px;}
    
    #banner-mobile{ min-height: 700px;}
    
    .circle-top{margin:50px 0 0 10px;}
    
    .steptop img{ margin: -350px auto 0 60px;}   
   
    .circle-middle.u-circle{margin: 140px 0 0 38%;}
    
    .circle-bottom{ margin: 40px 0 0 0;}
    .stepbottom img{margin: -330px 0 0 60px;}
    
    .detox-video iframe{ min-height:250px; }
    .treatment-title{ margin: 0;}
    
    .short-video{ width: 400px; height: 400px;}

    .logo{ margin: 0 auto; float: none; position: absolute; left: 0; right: 0;}
    .sub-title{letter-spacing: normal; font-size: 1.6rem; line-height: normal;}   

    #banner{ padding-top: 1em;}
    
    .artise-video iframe{ height: 300px;}
    
    .trt-step{width: 10%;} 
    .trt-title{ width: 18%;font-size: 1.4rem;}
    .trt-text{ width:72%; font-size: 0.9rem;}
    
    .intro-title{ width: 350px; font-size: 1.5rem; margin-top: 1em;}
    
    .info p{ font-size: 1rem; line-height: 28px;}
    
    .short-video iframe{ width: 100%;}
    
    .bg-color{ background: #443073; margin-top: 1em !important;}
    
    
    .book{ padding: 10px 20px;}
    .sub-title-right{ font-size: 1.5rem; letter-spacing: 0; margin:0 0 0.3em 0;}
    .form-title{ font-size: 14px; margin: 1em 0 0.5em 0;}
    .xs-padding{ margin: 0; padding: 0 12px;}
    .box{ padding: 0;}
    
    #video-wrapper{ padding: 0 0 3em 0;}
    
    .youtube-link{ padding: 1em 0;}

    .pro-wrap input.checkmark{width: 35px; height: 35px;    }
    

    
 .text-thanks {font-size: 16px;}
    
.logo-mobile{ width: 180px; padding-top: 30px; padding-bottom: 20px;}
    
    .btn-submit{
        text-align: center;
    }
    
    .terms-agree{
            margin: 20px 10px 0 30px; color: #fff;
    }
    
    .box .btn-submit input{ background: #e7e3f2; color: #000;}
    
    .line-right{ border: none;}
    
    .pro-wrap{ font-size:1.5rem; }
    

    
/*testi author */
    #testimonial-author{ max-height: inherit; padding-bottom: 0;}
    .testimonial-bar{ display: none;}
    .testi-info-wrap{ background: #55136f; padding: 20px;}
    
    .testi-info p{ font-size: 15px; line-height: 24px;}
    h2.outlet-title{ font-size: 22px; padding: 0;}
    h2.outlet-title span{ padding: 0;     font-size: 22px;}

    
    
/*google review--*/
    .google-border{ padding: 20px; }
    .google-img{width:180px; margin-top: 2em;}
    .dorra-branch a{font-size: 18px;}
    .google-rate{font-size: 20px;}
    .author-img{ text-align: left;}
    .rate-container{ padding: 0 0 5px 0;}
    .review-topics-title{margin: 0px;height: 20px; padding: 0 4px;border-radius: 8px;}
    .review-topics-title span{ font-size: 80%;}
    .google-rate-wrap{padding:2px 0;}
    .review-part .col-lg-2{-webkit-box-flex: 0;  -ms-flex: 0 0 100%;  flex: 0 0 100%;   max-width: 100%; text-align: left; padding: 0;}
    .review-part .col-lg-2 .author-img{ text-align: left; width: 50px;}
    .review-part{padding: 15px 0;}
    .owl-carousel .owl-item .review-part img{ margin: inherit; padding-left: 15px;}
    
    .youtube-title{ padding-bottom: 0;}
    
    .box .inputBox label.gender { color: #fff;}
    input[type=radio].css-A + label.css-label-A, input[type=radio].css-B + label.css-label-B{width: 100px; color: #fff;}
    .box .inputBox input[type=radio]{ width: 30px;}
    
    .slider-r-carousel { width: 260px; padding-left: 2em; padding-top: 0;}
    
    .slogan{ font-size: 2.5em;}
    .para-info{ font-size: 18px;    padding: 10px 1.5em 0 1.5em;}

    #testi{padding: 2em 0;}
}
/* ---- End of max-width 520px CSS ---- */

/* ---- Start of max-width 480px CSS ---- */
@media all and (max-width: 480px) {
    
    #banner-mobile{ min-height: 650px;}
        .short-video { width: 350px; height: 350px;  }
    .steptop img, .stepbottom img{ width: 350px;}
    
    .circle-middle.u-circle{margin: 140px 0 0 30%;}
    

}


/* ---- Start of max-width 420px CSS ---- */
@media all and (max-width: 423px) {
    
    .logo{ width: 150px;}
    
    .sub-title-right{ margin: 0; font-size: 1.2rem; letter-spacing: 0;}
    .form-title{ font-size: 11px; font-weight: bold;}
    
    .intro-title{ width: 300px;}
    
    .pro-wrap{border: 2px solid #d1c8e5; font-size: 1.1rem;}
    
    .slider-r-carousel{ width: 180px;}
    #weon-mobile-carousel{ margin-top: 6em;}
    
    #banner-mobile{ min-height: 560px;}
    
        .short-video { width: 300px; height: 300px; }
    
    .artise-video{ width: 360px; height: 360px; }
    .circle-middle.u-circle{margin: 140px 0 0 20%;}
    

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

/* ---- Start of max-width 400px CSS ---- */

@media all and (max-width: 400px) {
    #banner-mobile{ min-height: 530px;}
    .package-text-top{font-size: 16px;}
    .package-text-btn{font-size: 18px;}
    .package-text-btn span.text-en{font-size: 18px;}
    .package-text-btn span.text2{font-size: 24px;}
    #book .section-heading h2{font-size: 13px;letter-spacing: 0.5px;}
    
    .steptop img, .stepbottom img{ width: 280px; }
    .circle-bottom.u-circle{width: 280px; }
    .circle-bottom{ margin-left: 1em;}
    .circle-middle{width: 280px; }
    .artise-video{ width: 300px;height: 300px;}
    .short-video {margin: 0 0 0 30px;}
    
    #testi .title{ font-size: 2.5em;}
}


/* ---- End of max-width 380px CSS ---- */

@media all and (max-width: 393px) {
    #banner-mobile { min-height: 510px;}

    }

@media (max-width: 380px) {
    #banner-mobile { min-height: 500px; overflow-y: hidden; }
    #testi .title {font-size: 2em;  }
}