/* CSS Document */

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

/* 1. Mobile responsive css 767px
-----------------------------------*/
#mobile-menu{display: none;}

@media (min-width: 1200px){
    /*.container { max-width: 960px;}*/
}

@media (max-width:991px) {

    body{min-width: inherit; overflow-x: hidden;}
    .container{-webkit-box-sizing: border-box;box-sizing: border-box;}

    /*----   header   ----*/
   

    /*--------- home page ------------*/
	 /* mobile menu */
    #mobile-menu, #mobile-menu .menu-trigger{display: block;}
    #mobile-menu .menu-trigger{display: block;width: 45px;height: 45px;position: absolute;-ms-touch-action: manipulation;touch-action: manipulation;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;white-space: nowrap;z-index: 999999;right: 15px;top: 20px;cursor: pointer; background: #e38e08;}
	#mobile-menu .menu-trigger.fixed{position: fixed;-webkit-animation:slide-down 0.7s;animation:slide-down 0.7s;}
    #mobile-menu .menu-trigger.open{left: calc(100% - 40px);background:#000;}
    #mobile-menu .menu-trigger span, #mobile-menu .menu-trigger span:after, #mobile-menu .menu-trigger span:before{background:#fff;height: 2px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;} 
    #mobile-menu .menu-trigger span{position: absolute;display: block;width: 20px;left: 50%;top: 50%;transform: translate(-50% , -50%);-webkit-transform: translate(-50% , -50%);-moz-transform: translate(-50% , -50%)}
    #mobile-menu .menu-trigger span:after, #mobile-menu .menu-trigger span:before{content: '';position: absolute;left: 0;width: 100%;}
    #mobile-menu .menu-trigger span:before{top: -6px;}
    #mobile-menu .menu-trigger span:after{bottom: -6px;}
    #mobile-menu .menu-trigger.open span{background-color: rgba(0,0,0,.0)}
    #mobile-menu .menu-trigger.open span:before{top: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);background: #fff;}
    #mobile-menu .menu-trigger.open span:after{top: 0;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);background: #fff;}
    #mobile-menu .mob-navbar{background:rgba(0, 0, 0, 0.85);position: fixed;top: 0;width: calc(100% - 40px);height: 100%;left: -100%;-webkit-box-sizing: border-box;box-sizing: border-box;z-index: 99999;overflow-y: auto;-webkit-overflow-scrolling: touch;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;margin-right: 40px;}
    #mobile-menu .mob-navbar.open{left: 0;}
    #mobile-menu  ul ul{display: none;background:#000;}
    #mobile-menu  ul ul ul{background:rgb(71, 71, 68)}
    #mobile-menu  ul ul ul ul{background:rgb(60, 60, 56)}
    #mobile-menu  ul li{border-bottom:1px solid rgba(255, 255, 255, 0.10);list-style: none;position: relative;display: block;margin: 0;padding: 0;}
    #mobile-menu  ul li:before{ display: none;}
	#mobile-menu  ul li.current_page_item{background: rgba(37, 171, 223, 0.80);}
	#mobile-menu .menu-header-menu-container ul li{padding: 0 0;}
/*    #mobile-menu  li:last-child{border-bottom-width: 0;padding-bottom: 0;}*/
    #mobile-menu  em{display: block;position: absolute;top: 0;right: 0;width: 30px;height: 39px;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
    #mobile-menu  em:before, #mobile-menu  em:after{content: '';position: absolute;top:50%;margin-top: -1px;left: calc(50% - 8px);width: 16px;height: 2px;background: #fff;}
    #mobile-menu  em:after{transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
    #mobile-menu  em.toggled:after{transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);}
    #mobile-menu  em.level-two:before{content: '';position: absolute;width: 0;height: 0;border-style: solid;border-width: 6px 6px 0 6px;border-color: #fff transparent transparent transparent;background-color: transparent;left: 50%;top: 50%;transform: translate(-50% , -50%);-webkit-transform: translate(-50% , -50%);-moz-transform: translate(-50% , -50%);margin: 0;}
    #mobile-menu  em.level-two:after{display: none;}
    #mobile-menu  em.level-two.toggled{transform: rotate(-180deg);-moz-transform: rotate(-180deg);-webkit-transform: rotate(-180deg)}
    #mobile-menu  li a{color: #fff;padding: 10px 0px 10px 20px;display: block;margin-right: 30px;text-transform: capitalize;line-height: 20px;font-size: 16px;font-weight: normal;letter-spacing: 0.06em;}    
    #mobile-menu  li a:hover{ text-decoration: none;}
    #mobile-menu  li li a{text-transform: none;padding-left: 20px;}
    #mobile-menu  li li li a{padding-left: 25px;margin-right: 0;}
    #mobile-menu  li li li li a{padding-left: 30px;margin-right: 0;}
    #mobile-menu  li a.active{color:#ECE4D8;}
    .scroll-hidden{overflow: hidden;height: 100%;}
    
    .navigation{ display: none;}
	#header .head-right .headphone-blk{ display:none;}
	#header .header_lower:after{ display:none;}
	.home-banner .homebanner_cap h2 strong{ font-size:60px;}
	.home-banner .banner-form{ bottom:-30px;}
	.features_sec h2{ margin-bottom:30px;}
	#footer .footer_upper .social-icons li{ padding:0;}
	#footer .footer_upper p .phone{ font-size:18px; line-height: 2;margin-top: 10px; background-size: 30px; line-height: 1.6; padding: 0 0 0 35px;}    
	#footer .footer_upper .foo-quicklinks{ padding-left:20px;}
	#footer .footer_upper .foo-contact p a{word-break: break-word;}
	.features_sec:after{transform: skew(-70deg); -webkit-transform: skew(-70deg);}
	.whychoose_sec h2{ padding:0; text-align:center; background:none; margin-bottom:20px;}
	.banner_sec .home-banner ~ .container{ position:static; left:0; transform:none; -webkit-transform:none; max-width:100%;}
	.banner_sec .banner-form{ float:none; max-width:100%; bottom:0; margin: 15px 0;}
	.banner_sec .banner-form input[type="text"], .banner_sec .banner-form input[type="email"], .banner_sec .banner-form input[type="tel"], .banner_sec .banner-form textarea{ max-width:100%;}
	
	

}


/* 2. iPad responsive css 768px to 959px
-----------------------------------------*/
@media (min-width:768px) and (max-width:959px) {

    
    
}

/* 3. large desktop responsive css 992px to 1200px
----------------------------------------------------*/
@media (min-width:992px) and (max-width:1199px) {	
	body{min-width:auto;}
	#header .head-right .headphone-blk:after{background-size: contain;}	
	#header .head-right .headphone-blk a{ font-size:40px;}
	#footer .footer_upper .foo-quicklinks{ padding-left:40px;}
	#footer .footer_upper p .phone{ font-size:24px;}
   
}

/* 4. Other media-query
------------------------------------------------*/
@media (max-width:767px){
	
	.home-banner .homebanner_cap{ position:static; transform:none; -webkit-transform:none; max-width:100%; width:92%; margin:0 auto;}   
	.home-banner .banner-form{ bottom:-56px; float:none; max-width:100%;}
	.home-banner .banner-form input[type="text"], .home-banner .banner-form input[type="email"], .home-banner .banner-form input[type="tel"], .home-banner .banner-form textarea{ max-width:100%; width:92%;}
	.home-banner{ padding:0; text-align:center;}
	.home-banner .homebanner_cap h2 strong{ font-size:100%;}
	.home-banner .homebanner_cap h2{ font-size:40px; line-height:1;}
	.home-banner .homebanner_cap p{ font-size:16px; line-height:28px; margin:15px 0;}
    features_sec{ padding:100px 0 50px 0;}
	.features_sec h2 span{ font-size:24px;}
	.features_sec h2{ font-size:40px; margin-bottom:0;}
	.quickcontact_sec p{ padding:0; font-size:18px; margin-bottom:20px;}
	.quickcontact_sec .btn{ float:none; position:static; font-size:18px;}
	.quickcontact_sec{ text-align:center;}
	.welcome_betta h1{ font-size:30px; margin-bottom:15px;}
	.welcome_betta p{ font-size:15px; line-height:30px;}
	.whychoose_sec h3{ font-size:30px; line-height:normal;}
	.whychoose_sec ul li{ font-size:16px;}
	.clientspeech_sec h2{ font-size:30px;}
	.clientspeech_sec .bottom-logos li{ margin:10px 1%; width:30%;}
	#footer .footer_upper .social-icons{ text-align:left;}
	#footer .footer_upper .foo-quicklinks{padding-top: 20px; margin-top: 20px; border-top: rgba(255, 255, 255, 0.2) solid 1px; border-bottom: rgba(255, 255, 255, 0.2) solid 1px; padding-bottom: 20px; margin-bottom: 20px;}
	#footer .footer_upper .foo-contact{padding-top: 20px; margin-top: 20px; border-top: rgba(255, 255, 255, 0.2) solid 1px;}
	#footer .footer_upper h3{ margin-bottom:15px;}
	#footer .footer_lower{ text-align:center;padding-bottom: 80px;}
	#footer .footer_lower .col-md-6 + .col-md-6{ text-align:center;}
	#footer .footer_upper{ padding:30px 0;}
	.clientspeech_sec{ padding:40px 0 0 0;}
	#header .logo img{ max-width:200px !important;}
	.whychoose_sec ul{ margin:0;}
	.clientspeech_sec .testimonial_slide{ padding:0 30px;}
	.clientspeech_sec .testimonial_slide .slick-next{ right:-10px;}
	.clientspeech_sec .testimonial_slide .slick-prev{ left:-10px;}
	
	/************/
	.inner-page p {	color: #4f4f4f;	font-size: 16px;	font-weight: 400;	line-height: 28px;	letter-spacing: 0;	margin-bottom: 25px;}
	.inner-page {	background: #fff;	padding: 40px 0;}
	.inner-page ul li {	font-size: 15px;	color: #4f4f4f;	font-weight: 700;	line-height: 24px;
	padding: 0 0 0 25px;	margin: 0 0 10px;	position: relative;	list-style: none;}
	.inner-banner h1 {	margin: 0px;	padding: 0px;	font-size: 36px;	color: #e8a235;	text-transform: uppercase;	font-weight: 700;	padding: 0 20px;}
	.inner-page .wpcf7-form .wpcf7-form-control-wrap.your-name {	width: 100%;	float: left;}
	.inner-page .wpcf7-form .wpcf7-form-control-wrap.your-email {	width: 100%;	float: right;}
	
	.quickcontact_sec.quickcontact_sec-bt p {	font-weight: 400;	margin: 0;	padding: 17px 0px 16px 0;	display: inline-block;	margin: 0;}
	.quickcontact_sec.quickcontact_sec-bt  .btn {	max-width: 313px;	display: inline-block;	word-wrap: break-word;	width: 100%;	font-size: 14px;}
	.email-contact a { font-size:18px;}
	.features_sec .features-blk .features-cap h3{ font-size:30px; margin-bottom:10px;}
	.whychoose_sec .col-lg-4{ padding:0 10px;}
	
	.mob-phone{ position:fixed; left:0; bottom:0; width:100%; display:block; z-index:999; background: rgba(0, 0, 0, 0.90); line-height:normal; padding:15px 10px; text-align:center;}
	.mob-phone a{font-size: 30px; color: #f7a80f; font-weight: 800; display: inline-block; vertical-align:middle; background:url(../images/phone-icon.png) 0px center no-repeat; background-size:30px; padding-left:40px;}
	.mob-phone a:hover{ text-decoration:none;}
	
	}

@media (max-width:480px){
	.whychoose_sec ul{-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
	.clientspeech_sec .testimonial_slide p{ font-size:16px;}
}