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

@media (max-width: 1920px){
.slider-wrapper img { width: 100%;}
    .box {left:12em;}
}

@media (max-width: 1600px){
    .box {left:8em;}
}

@media (max-width: 1440px){
.slider-wrapper img { width: 90%;}
    .box {left:4.5em;}
}

@media (max-width: 1366px){
.box {left:3em;}
}

@media (max-width: 1280px){
    img.sk-wording { margin-right: 12%; }
    .box {left:2em;}
    .thx-container {padding:110px 20px;}
}

@media (max-width: 1024px) {
	.box {
	padding: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
    left:0em;
	}
	.box .inputBox label { font-size: 12px;}
	.box .inputBox { margin-bottom: 0.2em;}
	.aki-left-btn { width: 350px; }
	.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;
    }
}

/* ---- Start of max-width 992px CSS ---- */
@media (max-width: 992px) {

	.footer-section{    margin-bottom: 6em;}
	#thankyou .slider-wrapper{display:none;}
	#thankyou .slider-wrapper-mobile{    width: auto;
    background: url(../img/DR-Wenjie&Carol-15-1-thankyou.jpg) center top no-repeat;
    background-size: 100% 100%;
        display:block;
}
    #thankyou .slider-wrapper-mobile img{ width:90%; margin:0 auto; display: block;}
	.thx-container {padding:80px 20px;}
	
    .tab-mob-view{display: block; color:#fff;}
    .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;
	}
	
	.contact-box, .whatsapp-box, .fbm-box, .booking-box {
    width: auto;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    flex: 1;
    font-size: 18px;
}
	.contact-box, .fbm-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;
}
	
	.whatsapp-box, .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 {
    background: url(../img/RM660-GMY-mobile-1st-page-background.jpg)no-repeat;
    padding: 3.5em 0;
}
	
	.aki-left img{ width:100%;}
	.aki-left iframe{ 
		width:100%;
		min-height: 180px;
	}
	
}
/* ---- End of max-width 992px CSS ---- */


/* ---- Start of min-width 480px and max-width 768px CSS ---- */
@media all and (min-width: 480px) and (max-width: 768px) {
	
}
/* ---- End of min-width 480px and max-width 768px CSS ---- */


/* ---- Start of max-width 767px CSS ---- */
@media all and (max-width: 768px) {
    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: 5px;
    }
    .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;
    }
    
    #section-one{
	width: auto; 
	background: url(../img/DR-Wenjie&Carol-17.png) center top no-repeat;
	 background-size: 100% auto;
    }
    .dorra-logo-moblie{width: 100%; display: block; text-align: center; padding:30px 0 10px 0;}
    .slider-wrapper-mobile{ width: 90%; display: block; margin: 0 auto;}
	.slider-wrapper{display:none;}
    .dorra-logo{display:none;}
    .gmy-pic{display:block; margin:0 auto;}

    
    .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;
    }
	
	.aki-left-btn{margin-left:3em; width:270px; }
	
	.box h2 {font-size: 10px;}
	.box {
    padding: 10px;
    margin-top: 120px;
    margin-bottom: 70px;
	}
	.box .inputBox label { font-size: 20px;line-height: normal;padding-bottom:10px;}
	
	.box .inputBox input, .box .inputBox select {
		font-size: 20px;line-height: normal; padding:10px;margin-bottom:0.5em;}
    .box .inputBox { margin-bottom: 1em;}
	
    .terms-agree, .terms-agree a, .terms{ font-size: 16px; line-height: 20px; }
    
    .box .btn-submit input { font-size:24px;padding: 25px 30px;}
    
    
	#aki-video .left-text{width:100%;}
	#aki-video .video-frame iframe { min-height: 190px; }
	.title-challenge { font-size: 30px;}
	.title-challenge span { font-size: 50px;}
	
	#challenge .shop-carousel .owl-nav div.owl-next, #beforeafter .shop-carousel .owl-nav div.owl-next {
    margin-right: -16%;
	}
    
    .socialicon-desktop { display: none;}
	
}
/* ---- End of max-width 767px CSS ---- */


/* ---- Start of max-width 520px CSS ---- */
@media all and (max-width: 520px) {
    
    .box .btn-submit input { font-size:12px; padding: 10px 30px;}
    
    .terms-agree, .terms-agree a, .terms { font-size: 13px; }
	
    .box .inputBox label { font-size: 10px;line-height: normal;}
	
	.box .inputBox input, .box .inputBox select { font-size: 10px;line-height: normal; padding:0; margin-bottom: 0;}
    .box .inputBox { margin-bottom: 0.2em; }
    .box { margin: 70px 20px; }

    .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;}
    
    .desktop-view{display: none;}
    .tablet-view{display: none;}
    .mobile-view{display: block;}
	
	.aki-left-btn{ display:none;}
	
	.box { 
		width: auto;
		margin: 50px 20px;
		display:inline-block;
		box-shadow:none;
	}
	#aki-video .left-text {
    position: relative;
		margin-bottom: 2em;
	}
	
	#aki-video .video-frame iframe { min-height: 220px;}
	
	.title-challenge { font-size: 20px; }
	.title-challenge span { font-size: 26px;}
	

	.col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
	
	.col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
	
	.xs-padding { padding: 0px;
}
	
	
	
	.box .inputBox label,.box .inputBox input, .box .inputBox select {font-size: 12px;}
	.promotion_brand img{width: auto;}
	
	#challenge .shop-carousel .owl-nav div.owl-next, #beforeafter .shop-carousel .owl-nav div.owl-next {
    margin-right: -5%;
	width: 20px;
    height: 20px;
	line-height: inherit;
	}
	
	#challenge .shop-carousel .owl-nav div.owl-prev, #beforeafter .shop-carousel .owl-nav div.owl-prev {
	width: 20px;
    height: 20px;
	line-height: normal;
    left:5%;
	}	
    
  #challenge .shop-carousel .owl-nav div.owl-prev .ti-arrow-left, #beforeafter .shop-carousel .owl-nav div.owl-prev .ti-arrow-left
    {line-height: 1.7;}
	
#challenge .owl-carousel, #beforeafter .owl-carousel {
	width: 100%;}

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


/* ---- Start of max-width 420px CSS ---- */
@media all and (max-width: 422px) {

    .dorra-logo-moblie{ width:200px; text-align: center;margin: 0 auto;}
    .about-list {
        padding: 5% 0;
    }
    
    h1.white-text.t1 {
        font-size: 45px!important;
    }
	
	.box .inputBox input, .box .inputBox select {
    line-height: inherit;
	}
    
    .slider-wrapper-mobile { width: 78%;}
    
}
/* ---- End of max-width 420px CSS ---- */

/* ---- Start of max-width 393px CSS ---- */
@media all and (max-width: 393px) {
.box { margin: 50px 20px; }

.box .inputBox label, .box .inputBox input, .box .inputBox select {padding-bottom:0;}
    
.box .inputBox { margin-bottom: 0.5em; }
    
}

/* ---- Start of max-width 380px CSS ---- */
@media all and (max-width: 380px) {
	.about-list li {
        font-size: 17px;
    }
    h1.white-text.t1 {
        font-size: 43px!important;
    }
    p.white-text.t2 {
        font-size: 11px;
    }
    
}
/* ---- End of max-width 380px CSS ---- */

/* ---- Start of max-width 375px CSS ---- */
@media all and (max-width: 375px) {
#aki-video .video-frame iframe {
    min-height: 190px;
}
	
	.promotion_brand{     width: auto; padding-top:5px;}
	.box { margin: 30px 20px; }
    .box .btn-submit input {  padding: 5px 30px; }
	
}