@charset "utf-8";
/* CSS Document */

/* Table of Contents
-----------------------------------------------------------------------------
	1. Mobile
	2. Large Mobile
	3. iPad
	4. Other
*/

/* 1. Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (max-width:640px) {
h1, h2, h3, h4, h5, h6{ margin-bottom:20px;}
h1{ font-size:22px;}
h1:after{ margin:15px auto 0;}
h6{ font-size:15px;}
.banner-arrow{z-index:1 !important;} 
p{ margin-bottom:15px;}
p, blockquote p{ font-size:12px; line-height:22px;}

/* header */
header .logo{ max-width:200px; margin:16px 0 0;}

/* nav */
nav .btn-nav span{ display:none;}

/* dropdown block */
.dropdown-block .container{ padding:0 10px;}
.dropdown-block .desktop-nav{ display:none;}
.dropdown-block .mobile-nav{ display:block;overflow:scroll;}

@media (max-height:340px) {
.dropdown-block .mobile-nav{ max-height:250px; overflow:scroll;}
}

/* footer */
footer{ padding:30px 0 35px 0;}
footer .block{ display:none;}
footer .social-icon{ margin:5px 0 15px; float:none;}
footer .social-icon a{ float:none; display:inline-block;}
footer address{ text-align:center;}
footer .block.address-block{ display:block; float:none; max-width:100%; margin:0; text-align:center;}

/*--------- home page ------------*/
/* banner part */
.home-banner .slidesjs-control, .home-banner .slidesjs-container, .slide{ height:270px !important; background-size:cover !important;}
.home-banner .container{ padding:0 10px;}
.home-banner .tex-caption{ text-align:center; margin:100px auto 0 auto; float:none; max-width:320px;}
.home-banner .tex-caption p{ display:none;}
.home-banner .tex-caption .title{ font-size:30px; line-height:40px;}
.home-banner .tex-caption .sub-title{ line-height:38px;}
.home-banner .slidesjs-pagination{ display:none;}

/* default block */
.default-block{ padding:40px 0;}
.content-bock .left-text, .content-bock .right-text{ text-align: center; float:none; max-width:100%;}
.content-bock h6{ text-align:center; font-size:15px;}

/* img block */
.img-block .img-left, .img-block .img-right{ width:100%; float:none;}
.img-block .img-right figure{ width:50%; float:left;}
.img-block figure .overlay > div p{ font-size:12px; line-height:18px;}

.img-block .img-left figure img.desktop, .img-block .img-right figure img.desktop{ display:none;}
.img-block .img-left figure img.mobile, .img-block .img-right figure img.mobile{ display:block;}

/* quick histor block */
.quick-history{ background:#fff !important;}
.quick-history h2{ font-size:22px;}
.quick-history h2:after{ margin:15px auto 0;}
.quick-history .content-bock{ max-width:280px;}
.quick-history .history .year{ max-width:60px;}
.quick-history .line-black{ width:1px; left:31px;}
.quick-history .history .tex-caption{ max-width:205px; padding-top:5px;}
.quick-history .history .tex-caption p{ line-height:18px;}

/* our family block */
.our-family{ background-position:top center !important;}
.our-family h3{ font-size:22px; margin-bottom:28px;}
.our-family h3:after{ margin:15px auto 0;}
.our-family .block{ float:none; text-align:center; max-width:100%; margin:0 0 20px 0;}
.our-family .block figure{ margin-bottom:15px; min-height:inherit;}
.our-family .block p{ text-align:center;}
.our-family .kef-logo figure{ max-width:85px; }
.our-family .celestion-logo figure{ max-width:195px;}
.our-family .gp-logo-logo figure{ max-width:49px;}
.our-family .block:first-child{ margin:0 0 20px 0;}

/* infographic block */
.infographic-block h4{ font-size:22px; margin-bottom:10px;}
.infographic-block h4:after{ margin:15px auto 0;}
/*.infographic-block .info-block{ display:none;}*/

.infographic-block-top-wrapper h1 {font-size: 26px;}
.infographic-block h3 {font-size: 20px;}
.infographic-block .common-block {padding: 10px 15px;}
.concept-row {flex-direction: column;padding: 0 0px;margin: 0;}
.concept-row .concept-width-left, 
.concept-row .concept-width-right {width: 100%;padding: 0;}


.infographic-block .mobile-info-block{ display:none; text-align:center; max-width:280px; width:100%; background:url(../images/dots.jpg) repeat-x left bottom; margin-bottom:35px; padding-bottom:35px;}

.infographic-block .mobile-info-block .title{ display:block; margin:0 auto 40px auto; opacity:0; max-width:280px;}
.infographic-block .mobile-info-block .title span{ display:inline-block; height:68px; width:68px; border:5px solid #000; position:relative; z-index:2; background:#fff; color:#000; text-align:center; line-height:68px; border-radius:68px; font-size:48px; font-family:'GillSans-Bold',Arial, Helvetica, sans-serif; }
.infographic-block .mobile-info-block .title em{ display:inline-block; position:relative; background:#fff; color:#fff; font-style: normal; color:#000; top:-10px; padding:5px 20px 5px 30px; margin:0 0 0 -18px; font-size:16px; font-family:'GillSans-Bold',Arial, Helvetica, sans-serif; line-height:18px;}
.infographic-block .mobile-info-block .tex-caption{ max-width:280px; margin:0 auto; opacity:0; text-align:left;}
.infographic-block .mobile-info-block .tex-caption p{ color:#fff;}

.infographic-block .mobile-point-01 .title{ margin:60px auto 40px auto;}
.infographic-block .mobile-point-01 .info-img-block{ position:relative; margin-bottom:40px;}
.infographic-block .mobile-point-01 .info-img-block figure{ float:left; margin:0 0 0 0; opacity:0;}
.infographic-block .mobile-point-01 .info-img-block .point-01-right-01{ position:relative; z-index:2;}
.infographic-block .mobile-point-01 .info-img-block .point-01-right-02{ position:absolute; top:205px; z-index:3; max-width:120px;}
.infographic-block .mobile-point-01 .info-img-block .point-01-right-03{ position:relative; float:right; margin-top:-2px; z-index:1; max-width:152px;}

.infographic-block .mobile-point-02 .info-img-block{ position:relative; margin-bottom:40px;}
.infographic-block .mobile-point-02 .info-img-block figure{ float:left; margin:0 0 0 0; opacity:0;}
.infographic-block .mobile-point-02 .info-img-block .point-02-left-01{ position:relative; z-index:2; max-width:120px;}
.infographic-block .mobile-point-02 .info-img-block .point-02-left-02{ position:absolute; top:170px; max-width:120px; z-index:3;}
.infographic-block .mobile-point-02 .info-img-block .point-02-left-03{ position:relative; margin:180px 0 0 5px; max-width:155px; z-index:1;}

.infographic-block .mobile-point-03 .con-block{ background:url(../images/point-03-bg.png) no-repeat -335px top; height:440px; text-align:center; opacity:0;}
.infographic-block .mobile-point-03 .title{ float:left; margin:65px 0 0 0; opacity:0;}
.infographic-block .mobile-point-03 .title span{display:inline-block;}
.infographic-block .mobile-point-03 .title em{ background:none; color:#fff; font-size:16px; padding:5px 0 5px 30px; max-width:190px; text-align:left; font-family:'GillSans-Light',Arial, Helvetica, sans-serif; margin:0 0 0 -18px; display:inline-block; top:-2px;}
.infographic-block .mobile-point-03 figure{ display:block; clear:both; margin:20px 0 0 28px; opacity:0; max-width:185px;}

.infographic-block .mobile-point-04 .title{ max-width:400px; width:100%; text-align:left;}
.infographic-block .mobile-point-04 .title em{ max-width:170px; padding:5px 10px 5px 30px; font-size:15px; margin:0 0 0 -18px; position:relative; top:9px;}
.infographic-block .mobile-point-04 .top-img{ margin-bottom:30px;}
.infographic-block .mobile-point-04 .top-img figure{ float:left; margin:0 1px; opacity:0;}
.infographic-block .mobile-point-04 .big-img{ display:block; width:100%;}
.infographic-block .mobile-point-04 .big-img figure{ display:block; opacity:0;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-01{ max-width:43px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-02{ max-width:56px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-03{ max-width:62px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-04{ max-width:48px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-05{ max-width:59px;}

.infographic-block .mobile-point-05 .info-img-block{ margin-bottom:30px;}
.infographic-block .mobile-point-05 .info-img-block figure{ float:left; margin:30px 0 0 0; opacity:0; max-width:90px;}
.infographic-block .mobile-point-05 .info-img-block figure.queen{ margin:15px 10px 0 10px; max-width:80px;}
.infographic-block .mobile-point-05 .title em{ max-width:170px; margin:0 0 0 -18px; padding:5px 0 5px 30px; position:relative; text-align:left; top:23px;}

.infographic-block .mobile-point-06 { background:none; padding-bottom:0; margin-bottom:10px;}
.infographic-block .mobile-point-06 .title{ margin-bottom:0; opacity:0;}
.infographic-block .mobile-point-06 .title em{ max-width:170px; text-align:left; position:relative; top:-1px; }
.infographic-block .mobile-point-06 .info-img-block{ margin-bottom:40px;}
.infographic-block .mobile-point-06 .info-img-block figure{ margin:20px 0 0 0; opacity:0;}



/*--------- what we do page ------------*/
/* banner part */
.product-banner{ height:270px;}
.product-banner .container{ padding:0 5px;}
.product-banner .tex-caption{ margin:34px auto 0; max-width:300px;}
.product-banner .tex-caption.mar-top{ margin:80px auto 0;}
.product-banner .tex-caption h1{ margin-bottom:15px; font-size:33px;}
.product-banner .tex-caption .title{ font-size:30px; line-height:35px;}
.product-banner .tex-caption .sub-title{ font-size:16px; line-height:22px;}
.line{ max-width:255px;}
.line span{ margin:20px auto 0;}
.product-name{ height:0px; overflow:hidden;}

/* tab tab part */
.tab-block .container{ padding:0 40px;}
.tab-block .tab-nav{ padding:15px 0;}
.tab-block .tab-nav .owl-buttons .owl-prev{ left:-40px; transform:scale(0.7); -webkit-transform:scale(0.7); width:44px; height:46px;}
.tab-block .tab-nav .owl-buttons .owl-next{ right:-40px; transform:scale(0.7); -webkit-transform:scale(0.7);}
.tab-block .tab-nav .block figure{ margin:40px auto 5px;}
.tab-block .tab-nav .block figure img{ width:100px;}
.tab-block .tab-nav .block span{ font-size:11px; line-height:15px; display:block;}
.tab-block .tab-content-block .left-caption{ max-width:100%; padding:15px 20px 20px; float:none; text-align:center;}
.tab-block .tab-content-block .left-caption figure{ max-width:280px; float:none;}
.tab-block .tab-content-block .left-caption .title{ font-size:17px; line-height:24px;}
.tab-block .tab-content-block .left-caption .btn-learn-more{ font-size:14px; max-width:210px;}
.tab-block .tab-content-block .img-caption{ display:none;}
.title-after {margin: 30px auto;}

.img-why-we-do-big .desktop{ display:none;}
.img-why-we-do-big .mobile{ display:block;}

.tab-block .tab-nav .block figure {padding-bottom: 30px;}
.product-block {padding-bottom: 30px;}
.infographic-block-top-wrapper .infographic-img-block {height: 350px;}
.infographic-block-top-wrapper h4 {font-size: 24px;}


/*--------- what we do page ------------*/
/* banner part */
.why-we-do-banner{ height:270px;}
.why-we-do-banner .container{ padding:0 10px;}
.why-we-do-banner .tex-caption{ max-width:300px; margin:85px auto 0; text-align:center;}
.why-we-do-banner .tex-caption h1{ font-size:33px; line-height:38px; margin-bottom:10px; display:block; text-align:center;}
.why-we-do-banner .tex-caption .title{ font-size:30px; line-height:35px;}
.why-we-do-banner .tex-caption p{ display:none;}

/* full body text part */
.full-body-text h2{ font-size:22px; padding:0 40px; line-height:25px;}

/* speaker block part */
.speaker-block{ padding:0 0 35px;}

/* blur img part */
.blur-img-block .blur-img, .blur-img-block .normal-img{ width:100%; text-align:center;}
.blur-img-block .blur-img .text-caption, .blur-img-block .normal-img .text-caption{ float:none; text-align:center; margin:0 auto 0 auto; padding:0; max-width:90%;}
.blur-img-block .blur-img .text-caption {margin:0 auto 40px auto;}
.blur-img-block .text-caption p{ font-size:15px; line-height:23px; padding:25px 24px 20px 24px;}

/* advocate part */
.advocate-block h3{ font-size:23px; margin-bottom:40px;}
.advocate-block .left-text, .advocate-block .right-text{ text-align:left;}
.advocate-block .content-bock h6{ font-size:21px;}

/*--------- concierge page ------------*/
/* concierge banner img part */
.concierge-banner{ height:270px;}
.concierge-banner .container{ padding:0 10px;}
.concierge-banner .tex-caption{margin:85px auto 0; max-width:300px;}
.concierge-banner .tex-caption h1{ font-size:33px; line-height:38px; margin-bottom:10px;}
.concierge-banner .tex-caption p{ display:none;}
.concierge-banner .tex-caption .title{ font-size:30px; line-height:35px;}

/* second navigation part */
.second-navigation{ display:none;}

/* contact us part */
.contact-text .content-bock{ text-align:center;}

/* map block part */

.map-block{ margin:30px 0 20px;}
.map-block .location-block{ padding:0; border:none; float:left; display:none;}
.location-block .location address{ font-size:15px;}
.maping-block #Map{ display:none;}
.map-block .maping-block{ margin:0;}
.map-block .map-dropdown{ display:block; width:280px; height:30px; text-align:center; font-size:14px; margin:0 auto 30px auto;}

.map-block .m-location-block{ display:block; float:left; max-width:310px; width:100%; padding:0; box-sizing:border-box;}
.m-location-block .m-location{ display:none; width:100%;}
.m-location-block .m-location.shown{ display:block;}
.m-location-block .m-location .add-block{ display:block; clear:both;}
.m-location-block .m-location .territory-block{ display:block; clear:both; margin-top:30px;}
.m-location-block .m-location .title{ font-size:16px; letter-spacing:0.05em; font-weight:400; margin:0 0 20px 0;}
.m-location-block .m-location address{ font-style:normal; line-height:28px; font-size:16px; color:#000; font-weight:400;}
.m-location-block .m-location address strong{ color:fff; letter-spacing:0.03em; font-weight:600;}
.m-location-block .m-location address a{ color:#ff2400; text-decoration:underline;}
.m-location-block .m-location address a:hover{ color:#000;}


/* contact form part */
.contact-block h3{ font-size:22px; line-height:25px;}
#contact-form{ margin:30px 0 30px;}
#contact-form .block{ margin-bottom:30px;}
#contact-form .block label{ font-size:15px; line-height:20px;}
.content-bock .left-text, .content-bock .right-text{ text-align:left;}
#contact-form .btn-submit{ margin:0 auto 10px auto;}
#contact-form .block .textarea-style{ height:220px;}
#contact-form .left-block, #contact-form .right-block, #contact-form .left-second{float:none;}
.error-msg, .success-msg{ text-align:center;}
.wpcf7-form .right-block.animation-right{float: left !important;}
    
    /*  kef hero banner */
    .section-title {
        margin-bottom: 40px;
    }
    .section-title .title {
        font-size: 26px;
    }
    #content-area {
        margin-top: 0;
    }
    .kef-banner {
        height: 130px;
        padding: 40px 0px;
    }
    .kef-banner .text-block-top {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .kef-banner .magnolia-logo {
        margin-bottom: 10px;
    }
    .kef-banner .text-block-top:after, 
    .kef-banner .text-block-top:before {
        height: 1px;
    }
    .kef-banner .text-block-top:before {
        bottom: -3px;
    }
    .kef-banner .kef-banner-wrapper img {
        max-width: 200px;
        width: 100%;
        display: block;
    }
    .kef-banner h1 {
        font-size: 20px;
        line-height: normal;
    }
    .kef-banner h2 {
        font-size: 20px;
    }
    .podcast-wrapper .owl-controls {
        margin-top: 40px;
    }
    .podcast-wrapper .best-by-img img {
        max-width: 200px;
    }
    .document-slider .document-block {
        flex-direction: column;
        max-width: 320px;
        padding-bottom: 50px;
    }
    .document-slider .document-block:last-child {
        padding-bottom: 40px;
    }
    .document-block .document-img,
    .document-block .document-content,
    .document-block .document-button {
        width: 100%;
        padding: 0;
    }
    .document-block .document-content {
        padding: 20px;
    }
    .document-block .document-button {
        margin-top: 5px;
    }
    .video-podcast,
    .documents-cover, 
    .training-video {
        padding: 40px 0px;
    }
    .training-wrapper .owl-controls {
        margin-top: 40px;
    }
    .customNavigation .prev2,
    .customNavigation_training .prev2 {
        left: -10px;
    }
    .customNavigation .next2,
    .customNavigation_training .next2 {
        right: -10px;
    }
    .customNavigation .btn {
        background-color: #000;
    }
    .customNavigation_training .btn {
        background-color: rgba(255,255,255,0.7);
    }
}

/* 2. Large Mobile responsive css 640px
------------------------------------------------------------------------------*/
@media (min-width:641px) and (max-width:767px) {
    
.wpcf7-form .right-block.animation-right{float: left !important;}
h1, h2, h3, h4, h5, h6{ margin-bottom:40px;}
h1{ font-size:30px;}
h1:after{ margin:20px auto 0;}
p, blockquote p{ font-size:12px; line-height:23px;}
.banner-arrow{z-index:1 !important;}
/* dropdown block */
.dropdown-block .container{ padding:0 10px;}
.dropdown-block .desktop-nav{ display:none;}
.dropdown-block .mobile-nav{ display:block;}
.mobile-nav ul li ul li:before{ width:25px;}

/* footer */
footer{ padding:50px 0 40px;}
footer .block{ max-width:18%; margin:0 0 0 1%;}		
footer .block.address-block{ max-width:23%;}

/*--------- home page ------------*/
/* banner part */
.home-banner .slidesjs-control, .home-banner .slidesjs-container, .slide{ height:340px !important; background-size:cover !important;}
.home-banner .tex-caption{ margin:78px 0 0;}
.home-banner .tex-caption .title{ font-size:30px; line-height:45px;}
.home-banner .tex-caption .sub-title{ line-height:35px; font-size:22px; margin-bottom:5px;}
.home-banner .tex-caption p{ font-size:16px; line-height:22px;}
.home-banner .slidesjs-pagination{ left:20px; margin:0;}

/* default part */	
.default-block{ padding:40px 0 25px 0;}
.content-bock .left-text, .content-bock .right-text{ max-width:49%;}

/* img block */
.img-block figure .overlay > div{ padding:0 5%;}
.img-block figure .overlay > div h6{ font-size:16px;}
.img-block figure .overlay > div p{ font-size:14px; line-height:20px;}

/* quick histor block */
.quick-history{ background:#fff !important;}
.quick-history h2{ font-size:30px;}
.quick-history h2:after{ margin:20px auto 0;}
.quick-history .line-black{ width:2px; left:40px;}
.quick-history .content-bock{ max-width:500px;}
.quick-history .history .year{ max-width:80px;}
.quick-history .history .tex-caption{ max-width:390px; padding-top:10px;}
.quick-history .history .tex-caption p{ font-size:13px;}

/* our family block */
.our-family{ background-position:top center !important;}
.our-family h3{ font-size:30px; margin-bottom:28px;}
.our-family h3:after{ margin:20px auto 0;}
.our-family .block{ max-width:32%; margin:0 0 0 2%;}
.our-family figure{ margin-bottom:25px !important;}
.our-family .kef-logo figure{ max-width:85px; }
.our-family .celestion-logo figure{ max-width:195px;}
.our-family .gp-logo figure{ max-width:49px;}

/* infographic block */
.infographic-block h4{ font-size:22px; margin-bottom:10px;}
.infographic-block h4:after{ margin:15px auto 0;}
/*.infographic-block .info-block{ display:none;}*/
.infographic-block .mobile-info-block{ display:none; text-align:center; max-width:280px; width:100%; background:url(../images/dots.jpg) repeat-x left bottom; margin-bottom:35px; padding-bottom:35px;}

.infographic-block .mobile-info-block .title{ display:block; margin:0 auto 40px auto; opacity:0; max-width:280px;}
.infographic-block .mobile-info-block .title span{ display:inline-block; height:68px; width:68px; border:5px solid #000; position:relative; z-index:2; background:#fff; color:#000; text-align:center; line-height:68px; border-radius:68px; font-size:48px; font-family:'GillSans-Bold',Arial, Helvetica, sans-serif; }
.infographic-block .mobile-info-block .title em{ display:inline-block; position:relative; background:#fff; color:#fff; font-style: normal; color:#000; top:-10px; padding:5px 20px 5px 30px; margin:0 0 0 -18px; font-size:16px; font-family:'GillSans-Bold',Arial, Helvetica, sans-serif; line-height:18px;}
.infographic-block .mobile-info-block .tex-caption{ max-width:280px; margin:0 auto; opacity:0; text-align:left;}
.infographic-block .mobile-info-block .tex-caption p{ color:#fff;}

.infographic-block .mobile-point-01 .title{ margin:60px auto 40px auto;}
.infographic-block .mobile-point-01 .info-img-block{ position:relative; margin-bottom:40px;}
.infographic-block .mobile-point-01 .info-img-block figure{ float:left; margin:0 0 0 0; opacity:0;}
.infographic-block .mobile-point-01 .info-img-block .point-01-right-01{ position:relative; z-index:2;}
.infographic-block .mobile-point-01 .info-img-block .point-01-right-02{ position:absolute; top:205px; z-index:3; max-width:120px;}
.infographic-block .mobile-point-01 .info-img-block .point-01-right-03{ position:relative; float:right; margin-top:-2px; z-index:1; max-width:152px;}

.infographic-block .mobile-point-02 .info-img-block{ position:relative; margin-bottom:40px;}
.infographic-block .mobile-point-02 .info-img-block figure{ float:left; margin:0 0 0 0; opacity:0;}
.infographic-block .mobile-point-02 .info-img-block .point-02-left-01{ position:relative; z-index:2; max-width:120px;}
.infographic-block .mobile-point-02 .info-img-block .point-02-left-02{ position:absolute; top:170px; max-width:120px; z-index:3;}
.infographic-block .mobile-point-02 .info-img-block .point-02-left-03{ position:relative; margin:180px 0 0 5px; max-width:155px; z-index:1;}

.infographic-block .mobile-point-03 .con-block{ background:url(../images/point-03-bg.png) no-repeat -335px top; height:440px; text-align:center; opacity:0;}
.infographic-block .mobile-point-03 .title{ float:left; margin:65px 0 0 0; opacity:0;}
.infographic-block .mobile-point-03 .title span{display:inline-block;}
.infographic-block .mobile-point-03 .title em{ background:none; color:#fff; font-size:16px; padding:5px 0 5px 30px; max-width:190px; text-align:left; font-family:'GillSans-Light',Arial, Helvetica, sans-serif; margin:0 0 0 -18px; display:inline-block; top:-2px;}
.infographic-block .mobile-point-03 figure{ display:block; clear:both; margin:20px 0 0 28px; opacity:0; max-width:185px;}

.infographic-block .mobile-point-04 .title{ max-width:400px; width:100%; text-align:left;}
.infographic-block .mobile-point-04 .title em{ max-width:170px; padding:5px 10px 5px 30px; font-size:15px; margin:0 0 0 -18px; position:relative; top:9px;}
.infographic-block .mobile-point-04 .top-img{ margin-bottom:30px;}
.infographic-block .mobile-point-04 .top-img figure{ float:left; margin:0 1px; opacity:0;}
.infographic-block .mobile-point-04 .big-img{ display:block; width:100%;}
.infographic-block .mobile-point-04 .big-img figure{ display:block; opacity:0;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-01{ max-width:43px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-02{ max-width:56px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-03{ max-width:62px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-04{ max-width:48px;}
.infographic-block .mobile-point-04 .top-img figure.point-04-left-05{ max-width:59px;}

.infographic-block .mobile-point-05 .info-img-block{ margin-bottom:30px;}
.infographic-block .mobile-point-05 .info-img-block figure{ float:left; margin:30px 0 0 0; opacity:0; max-width:90px;}
.infographic-block .mobile-point-05 .info-img-block figure.queen{ margin:15px 10px 0 10px; max-width:80px;}
.infographic-block .mobile-point-05 .title em{ max-width:170px; margin:0 0 0 -18px; padding:5px 0 5px 30px; position:relative; text-align:left; top:23px;}

.infographic-block .mobile-point-06 { background:none; padding-bottom:0; margin-bottom:10px;}
.infographic-block .mobile-point-06 .title{ margin-bottom:0; opacity:0;}
.infographic-block .mobile-point-06 .title em{ max-width:170px; text-align:left; position:relative; top:-1px; }
.infographic-block .mobile-point-06 .info-img-block{ margin-bottom:40px;}
.infographic-block .mobile-point-06 .info-img-block figure{ margin:20px 0 0 0; opacity:0;}

/*--------- what we do page ------------*/
/* banner part */
.product-banner{ height:340px;}
.product-banner .tex-caption{ margin:72px auto 0;}
.product-banner .tex-caption.mar-top{ margin:130px auto 0;}
.product-banner .tex-caption h1{ margin-bottom:20px;}
.product-banner .tex-caption .title{ font-size:30px; line-height:38px;}
.product-banner .tex-caption .sub-title{ font-size:25px; line-height:32px;}
.line{ max-width:350px;}
.line span{ margin:20px auto 0;}

/* product tab part */
.product-name{ height:90px;}
.product-name .pro-name span{ font-size:16px; line-height:23px;}

/* tab tab part */
.tab-block .container{ padding:0 40px;}
.tab-block .tab-nav .owl-buttons .owl-prev{ left:-30px;}
.tab-block .tab-nav .owl-buttons .owl-next{ right:-30px;}
.tab-block .tab-nav .block figure img{ width:130px;}
.tab-block .tab-nav .block span{ font-size:16px; line-height:22px;}
/*.tab-block .tab-content-block .left-caption{ max-width:60%; padding:15px 20px 0; float:none; text-align:center;}*/
.tab-block .tab-content-block .left-caption{ max-width:100%; padding:15px 20px 20px; float:none; text-align:center;}
.tab-block .tab-content-block .left-caption figure{ max-width:250px; float:none;}
.tab-block .tab-content-block .left-caption .title{ font-size:17px; line-height:24px;}
.tab-block .tab-content-block .left-caption .btn-learn-more{ font-size:14px; max-width:200px;}
.tab-block .tab-content-block .img-caption{ display:none;}

/*--------- why we do page ------------*/
/* why do banner img part */
.why-we-do-banner{ height:340px;}
.why-we-do-banner .tex-caption {max-width:360px; margin:74px 0 0;}
.why-we-do-banner .tex-caption h1{ font-size:30px; line-height:45px; margin-bottom:0;}
.why-we-do-banner .tex-caption .title{ font-size:22px; line-height:35px; margin:0 0 5px 0;}
.why-we-do-banner .tex-caption p{ font-size:15px; line-height:22px;}

/* full body text part */
.full-body-text h2{ font-size:30px;}

/* blur img part */
.blur-img-block .text-caption{ max-width:91%;}
.blur-img-block .text-caption p{ font-size:10px; padding:30px 0 23px;}

/* speaker block part */
.speaker-block{ padding:10px 0 30px;}

/* advocate block part */
.advocate-block h3{ font-size:30px;}

/*--------- concierge page ------------*/
.second-navigation{ padding:15px 0;}
.second-navigation ul li{ margin:0 20px; font-size:17px;}
.second-navigation ul li:before{ left:-22px;}

/* contact form part */
#contact-form .left-block, #contact-form .right-block, #contact-form .left-second{ max-width:49%;}

/*--------- concierge page ------------*/
/* concierge banner img part */
.concierge-banner{ height:340px;}
.concierge-banner .tex-caption{ margin:83px auto 0;}
.concierge-banner .tex-caption h1{ font-size:30px; line-height:45px; margin-bottom:0;}
.concierge-banner .tex-caption .title{ font-size:22px; line-height:35px;}
.concierge-banner .tex-caption p{ font-size:16px; line-height:22px;}

/* map block part */
.map-block{ margin:40px 0 20px;}
.map-block .maping-block{ float:none; max-width:100%; margin:0 auto 50px auto;}
.map-block .location-block{ float:none; clear:both; max-width:100%; padding:0; border:none;}
.location-block .location address{line-height:30px;}
.location-block .location .title{ margin:0 0 30px;}
.location-block .location .add-block{ clear:none; float:left; width:50%;}
.location-block .location .territory-block{clear:none; float:left; width:50%; margin:0;}

/* contact form part */
#contact-form{ margin:30px 0 40px;}
#contact-form .block label{ font-size:16px; line-height:30px;}
#contact-form .block .textarea-style{ height:212px;}
    
    /*  kef hero banner */
    #content-area {
        margin-top: 0;
    }
    .kef-banner {
        height: 250px;
    }
    .kef-banner .text-block-top {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
    .kef-banner .magnolia-logo {
        margin-bottom: 10px;
    }
    .kef-banner .text-block-top:after, 
    .kef-banner .text-block-top:before {
        height: 1px;
    }
    .kef-banner .text-block-top:before {
        bottom: -3px;
    }
    .kef-banner .kef-banner-wrapper img {
        max-width: 300px;
        width: 100%;
        display: block;
    }
    .kef-banner h1 {
        font-size: 32px;
        line-height: normal;
    }
    .kef-banner h2 {
        font-size: 28px;
    }
    .podcast-wrapper .owl-controls {
        margin-top: 40px;
    }
    .podcast-wrapper .best-by-img img {
        max-width: 200px;
    }
    .document-slider .document-block {
        flex-direction: column;
        max-width: 320px;
        padding-bottom: 50px;
    }
    .document-block .document-img,
    .document-block .document-content,
    .document-block .document-button {
        width: 100%;
        padding: 0;
    }
    .document-block .document-content {
        padding: 20px;
    }
    .document-block .document-button {
        margin-top: 5px;
    }   
    .video-podcast,
    .documents-cover, 
    .training-video {
        padding: 60px 0px;
    }
    .customNavigation .prev2,
    .customNavigation_training .prev2 {
        left: -10px;
    }
    .customNavigation .next2,
    .customNavigation_training .next2 {
        right: -10px;
    }
    .customNavigation .btn {
        background-color: #000;
    }
    .customNavigation_training .btn {
        background-color: rgba(255,255,255,0.7);
    }
}

@media (min-width:768px) and (max-width:935px) {
.wpcf7-form .right-block.animation-right{float: left !important;}
}

/* 3. iPad responsive css 768px to 1023px
------------------------------------------------------------------------------*/
@media (min-width:768px) and (max-width:1023px) {
p, blockquote p{ font-size:12px; line-height:23px;}
h6{ font-size:18px;}

/* dropdown block */
.dropdown-block .container{ padding:0 10px;}
.dropdown-block .desktop-nav{ display:none;}
.dropdown-block .mobile-nav{ display:block;height: calc(100vh - 55px);overflow: scroll;}
.mobile-nav ul li ul li:before{ width:35px;}

/* footer */
footer .block{ max-width:18%;}	

/*--------- home page ------------*/
/* banner part */
.home-banner .slidesjs-pagination{ left:20px; margin:0;}

/* default part */	
.content-bock .left-text, .content-bock .right-text{ max-width:49%;}

/* img block */
.img-block figure .overlay > div{ padding:0 5%;}
.img-block figure .overlay > div h6{ font-size:16px;}
.img-block figure .overlay > div p{ font-size:15px; line-height:20px;}

/* quick histor block */
.quick-history .content-bock{ max-width:600px;}
.quick-history .history .tex-caption{ max-width:450px;}
.quick-history .history .tex-caption p{ font-size:13px;}

/* our family block */
.our-family .block{ max-width:32%; margin:0 0 0 2%;}

/* infographic block */
.infographic-block .info-block{ max-width:725px; width:100%;}
.infographic-block .info-block .title em{ font-size:12px; line-height:15px; margin:27px 0 0 -18px;}
.infographic-block .point-01 .left-block{ max-width:360px;}
.infographic-block .point-01 .left-block .title{ margin:20px 0 30px;}
.infographic-block .point-01 .right-block{ max-width:340px;}
.infographic-block .point-01 .right-block .point-01-right-01{ max-width:260px;}
.infographic-block .point-01 .right-block .point-01-right-02{ max-width:120px; top:195px;}
.infographic-block .point-01 .right-block .point-01-right-03{ max-width:190px;}

.infographic-block .point-02 .left-block{max-width:340px;}
.infographic-block .point-02 .left-block .point-02-left-01{ max-width:122px;}
.infographic-block .point-02 .left-block .point-02-left-02{ max-width:134px; top:165px;}
.infographic-block .point-02 .left-block .point-02-left-03{ max-width:183px; margin:170px 0 0 35px;}
.infographic-block .point-02 .right-block{max-width:360px;}

/*.infographic-block .point-03 .title{ margin:63px 0 0 78px;}*/
.infographic-block .point-03 .title em{ font-size:20px;}
.infographic-block .point-03 figure{ margin:5px 0 0 240px;}

.infographic-block .point-04 .left-block{max-width:360px;}
.infographic-block .point-04 .left-block figure{ margin:25px 10px 0 0;}
.infographic-block .point-04 .left-block .title{ margin-bottom:0px;}
.infographic-block .point-04 .left-block .title em{ margin:20px 0 0 -18px; max-width:220px;}
.infographic-block .point-04 .right-block{max-width:340px;}
.infographic-block .point-04 .left-block figure.point-04-left-01{ max-width:50px;}
.infographic-block .point-04 .left-block figure.point-04-left-02{ max-width:64px;}
.infographic-block .point-04 .left-block figure.point-04-left-03{ max-width:71px;}
.infographic-block .point-04 .left-block figure.point-04-left-04{ max-width:54px;}
.infographic-block .point-04 .left-block figure.point-04-left-05{ max-width:67px;}

.infographic-block .point-05 .right-block{ max-width:340px;}
.infographic-block .point-05 .right-block .title { margin-bottom:20px;}
.infographic-block .point-05 .right-block .title em{ max-width:230px; margin:19px 0 0 -18px;}
.infographic-block .point-05 .left-block{ max-width:360px;}
.infographic-block .point-05 .left-block figure{ max-width:110px; margin:20px 0 0;}
.infographic-block .point-05 .left-block figure.queen{ max-width:95px; margin:0px 15px 0;}

.infographic-block .point-06 .left-block{ max-width:360px;}
.infographic-block .point-06 .title{ margin-top:30px;}
.infographic-block .point-06 .right-block{ max-width:360px;}
.infographic-block .point-06 .right-block figure{ margin:0;}


/*--------- what we do page ------------*/
/* product tab part */
.product-name .pro-name span{ font-size:14px;}

/* tab tab part */
.tab-block .container{ padding:0 40px;}
.tab-block .tab-nav .owl-buttons .owl-prev{ left:-30px;}
.tab-block .tab-nav .owl-buttons .owl-next{ right:-30px;}
.tab-block .tab-nav .block figure img{ width:200px;}
.tab-block .tab-content-block .left-caption{ max-width:40%; padding:15px 20px 20px;}
.tab-block .tab-content-block .left-caption .title{ font-size:17px; line-height:24px;}
.tab-block .tab-content-block .left-caption .btn-learn-more{ font-size:14px; max-width:200px;}
.tab-block .tab-content-block .img-caption{ max-width:60%;}
.title-after {margin: 15px 0 15px 0;}
.tab-content-inner {max-width: 90%;}


/*--------- why we do page ------------*/
/* blur img part */
.blur-img-block .text-caption{ max-width:91%;}

/*--------- concierge page ------------*/
.map-block{ margin:50px 0 20px;}
.map-block .maping-block{ float:none; max-width:100%; margin:0 auto 50px auto;}
.map-block .location-block{ float:none; clear:both; max-width:100%; padding:0; border:none;}
.location-block .location address{ font-size:18px; line-height:30px;}
.location-block .location .title{ font-size:18px; margin:0 0 30px;}
.location-block .location .add-block{ clear:none; float:left; width:50%;}
.location-block .location .territory-block{clear:none; float:left; width:50%; margin:0;}


/* contact form part */
#contact-form .left-block, #contact-form .right-block, #contact-form .left-second{ max-width:49%;}

    /*  kef hero banner */
    .kef-banner {
        height: 250px;
    }
    .kef-banner .text-block-top {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
    .kef-banner .magnolia-logo {
        margin-bottom: 15px;
    }
    .kef-banner .kef-banner-wrapper img {
        max-width: 300px;
        display: block;
    }
    .kef-banner h1 {
        font-size: 32px;
    }
    .kef-banner h2 {
        font-size: 28px;
    }
    .podcast-wrapper .owl-controls {
        margin-top: 40px;
    }
    .video-podcast,
    .documents-cover, 
    .training-video {
        padding: 60px 0px;
    }
    .customNavigation .prev2,
    .customNavigation_training .prev2 {
        left: -10px;
    }
    .customNavigation .next2,
    .customNavigation_training .next2 {
        right: -10px;
    }
    .customNavigation .btn {
        background-color: #000;
    }
    .customNavigation_training .btn {
        background-color: rgba(255,255,255,0.7);
    }
}

/* 4. Other media-query
------------------------------------------------------------------------------*/
@media (min-width:1024px) and (max-width:1365px) {
/*--------- what we do page ------------*/
/* tab tab part */
.tab-block .tab-content-block .left-caption{ max-width:40%; padding:15px 20px 20px;}
.tab-block .tab-content-block .img-caption{ max-width:60%;}
.tab-content-inner {max-width: 90%;}
}


@media (min-width:1024px) and (max-width:1199px) {

	.tab-block .tab-nav .owl-buttons .owl-next {right: 0;}
	.tab-block .tab-nav .owl-buttons .owl-prev {left: 0;}
    
    /*  kef hero banner */
    .kef-banner {
        height: 340px;
    }
    .customNavigation .prev2,
    .customNavigation_training .prev2 {
        left: -10px;
    }
    .customNavigation .next2,
    .customNavigation_training .next2 {
        right: -10px;
    }
    .customNavigation .btn {
        background-color: #000;
    }
    .customNavigation_training .btn {
        background-color: rgba(255,255,255,0.7);
    }
}






@media (min-width:768px) and (max-width:1024px) {
.our-family{ background-position:top center !important;}
.infographic-block .common-block {background-position: 100% 100% !important;}
}

/* infographic animation block */	
.info-animation-title, .infographic-block .mobile-point-01 .title.info-animation-title, .infographic-block .mobile-point-02 .title.info-animation-title, .infographic-block .mobile-point-03 .title.info-animation-title, .infographic-block .mobile-point-04 .title.info-animation-title, .infographic-block .mobile-point-05 .title.info-animation-title, .infographic-block .mobile-point-06 .title.info-animation-title{
	opacity:1;
	position:relative;
	z-index:2;
	animation:info-animation-title 1s;
	-webkit-animation:info-animation-title 1s;}
@keyframes info-animation-title{
	0%   { opacity:0; transform: scale(.8); -webkit-transform: scale(0.8); -ms-transform: scale(0.8);}
	100% { opacity:1; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);}}

@-webkit-keyframes info-animation-title{
	0%   { opacity:0; transform: scale(.8); -webkit-transform: scale(0.8); -ms-transform: scale(0.8);}
	100% { opacity:1; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);}}
	
.info-animation-left, .infographic-block .mobile-point-01 figure.info-animation-left, .infographic-block .mobile-point-02 figure.info-animation-left, .infographic-block .mobile-point-04 figure.info-animation-left, .infographic-block .mobile-point-05 figure.info-animation-left{
	opacity:1;
	position:relative;
	z-index:2;
	animation:info-animation-left 1s;
	-webkit-animation:info-animation-left 1s;}
@keyframes info-animation-left{
	0%   { opacity:0; top:0 ;left:-60px;}
	100% { opacity:1 ; top:0; left:0;}}

@-webkit-keyframes info-animation-left{
	0%   { opacity:0; top:0; left:-60px;}
	100% { opacity:1; top:0; left:0;}}

.info-animation-right, .infographic-block .mobile-point-05 figure.info-animation-right{
	opacity:1;
	position:relative;
	z-index:2;
	animation:info-animation-right 1s;
	-webkit-animation:info-animation-right 1s;}
@keyframes info-animation-right{
	0%   { opacity:0; top:0 ; right:-60px;}
	100% { opacity:1 ; top:0; right:0;}}

@-webkit-keyframes info-animation-right{
	0%   { opacity:0; top:0; right:-60px;}
	100% { opacity:1; top:0; right:0;}}

.info-animation-top, .infographic-block .mobile-point-01 figure.info-animation-top, .infographic-block .mobile-point-02 figure.info-animation-top{
	opacity:1;
	position:relative;
	z-index:2;
	animation:info-animation-top 1s;
	-webkit-animation:info-animation-top 1s;}
@keyframes info-animation-top {
	0%   { opacity:0; top:-50px;}
	100% { opacity:1 ; top:0;}}

@-webkit-keyframes info-animation-top{
	0%   { opacity:0; top:-50px;}
	100% { opacity:1; top:0;}}
	
.info-animation-zoom, .infographic-block .mobile-point-01 figure.info-animation-zoom, .infographic-block .mobile-point-02 figure.info-animation-zoom, .infographic-block .mobile-point-03 .con-block.info-animation-zoom, .infographic-block .mobile-point-03 figure.info-animation-zoom, .infographic-block .mobile-point-04 figure.info-animation-zoom, .infographic-block .mobile-point-05 figure.info-animation-zoom, .infographic-block .mobile-point-06 .info-img-block figure.info-animation-zoom{
	opacity:1;
	position:relative;
	z-index:2;
	animation:info-animation-zoom 0.8s;
	-webkit-animation:info-animation-zoom 1s;}
@keyframes info-animation-zoom{
	0%   { opacity:0; transform: scale(.4); -webkit-transform: scale(0.4); -ms-transform: scale(0.4);}
	100% { opacity:1; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);}}
	
@-webkit-keyframes info-animation-zoom{
	0%   { opacity:0; transform: scale(.4); -webkit-transform: scale(0.4); -ms-transform: scale(0.4);}
	100% { opacity:1; transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1);}
}

@media (min-width:320px) and (max-width:767px) {
	.page-template-landing-page .links-block .content-bock .single-link-block{width: auto;float: none;}
	/*.product-name{ height:0px; overflow:hidden;}*/
	.product-name .pro-name span a {font-size: 12px;}
	.title-after {margin: 20px auto;}
	#wrapper{padding-top: 50px;}
	.dropdown-block .mobile-nav {z-index: 99999999;height: calc(100vh - 55px);overflow: scroll;}
	.dropdown-block {height: calc(100vh - 55px);overflow: scroll;}
}
@media (max-width: 1199px){	
    .promotion-inner .customNavigation .btn{    color: #fff;}	
	.promotion-content{padding-right: 30px;}
}
@media (max-width: 767px){
    .document-block .document-content {text-align: center;}
    .document-block .document-content h6{text-align: center;}    
	.promotion-content{padding-left: 15px;}
}
	@media (max-width: 640px){	
    .promotion-img{	
        width: 100%;	
    }	
    .promotion-img img{	
        height: 220px;	
    }	
    .promotion-content{	
        width: 100%;	
        padding-left: 0;	
        padding-top: 15px;	
    }	
    .promotion-cover .customNavigation {	
        top: 90px;	
    }	
    .section-title h2{	
        line-height: 1.1;	
        font-size: 26px;	
    }
	.promotion-content{padding-right: 0;}
}