/*
    Theme Responsive Design
*/

@media (max-width: 1024px) {
	.hero_section{ height: 600px; }
    .hero20 .hphone { right: 0; }
    .hero6{ height: 650px; }
    .hero6 .hero_content { padding: 100px 0; }
    .hero19 .hero_content { padding: 90px 0; }
    .feature4 .feature_moc{ margin-top: 0; }
    .cta4 .dl_content { padding: 27px 0; }
    .content12 .about_bg{ background-position: 100px 25px; }
    .content13 .about_img .img_1 { top: 85px; width: 80%; }
    .content13 .about_content { padding: 48px 0; }
    .content18 .about_content { padding: 0; }
    .skill7 .skill_image{ background-position: 100px center; }
    .video6 .video_content { padding: 50px 0 0; }
}

/* ---- Start of max-width 992px CSS ---- */
@media (max-width: 992px) {
    header ul.nav > li > a { font-size: 10px; padding: 0 7px; }
    .hero_section{ height: 550px; }
    .hero1 .hero_content { padding: 78px 0; }
    .hero1 .hero_content h1{ font-size: 30px; }
    .hero1 .form_container h2{ font-size: 18px; }
    .hero1 .form_container p{ font-size: 12px; }
    .hero3 .hand_moc{ background-position: right 40px; }
    .hero8 .hero_content,
    .hero7 .hero_content,
    .hero6 .hero_content { padding: 80px 0; }
    .hero19 .hero_content { padding: 70px 0; }
    .hero8 .hero_content h1{ font-size: 30px; }
    .hero18 .man_block{ background-position: 220% bottom; }
    .hero25{ height: 480px; }
    .video6 .video_content,
    .content19 .about_content,
    .video5 .video_content,
    .feature20 .service_items,
    .content16 .about_content,
    .skill2 .skill_wrap,
    .content15 .idea_content,
    .content13 .about_content,
    .content10 .about_content,
    .content7 .about_content,
    .content2 .about_content,
    .content1 .about_content{ padding: 0; }
    .content2 .about_img_2 { margin: 53px 0 0 -4px; }
    .content14 .about_image{ background-position: right 120px; }
    .content8 .about_image{ background-position: -60px bottom; }
    .content9 .about_img{ background-position: 60px center; }
    .content3 .block_moc{ background-position: 93% center; }
    .content12 .about_bg{ background-position: 50px 25px; }
    .feature3 .feature_moc .feature_moc_1{ width: 85%; margin-left: -60px; }
    .feature3 .feature_moc .feature_moc_2 { width: 80%; right: 24px; }
    .feature3:before{ width: 68%; }
    .feature6 .service_moc{ background-image: url(../img/feature/feature-6-moc-tab.png); }
    .feature6 .service_items.inverted,
    .feature6 .service_items{ margin: 0; }
    .feature6 .service_items.inverted .service_item{ margin-left: 0; }
    .feature6 .service_items.inverted .service_item,
    .feature6 .service_items .service_item,
    .feature6 .service_items { padding: 0; }
    .feature6 .service_items .service_item h3{ margin: 5px 0; }
    .feature6 .service_items .service_item p{ font-size: 12px; line-height: 18px; }
    .feature7 .service_moc{ background-image: url(../img/feature/feature-7-moc-tab.png); }
    .feature7 .service_items.inverted,
    .feature7 .service_items{ margin: 0; }
    .feature7 .service_items.inverted .service_item{ margin-left: 0; }
    .feature7 .service_items.inverted .service_item,
    .feature7 .service_items .service_item,
    .feature7 .service_items { padding: 0; }
    .feature7 .service_items .service_item h3{ margin: 5px 0; }
    .feature7 .service_items .service_item p{ font-size: 12px; line-height: 18px; }
    .video1 .video_icon { padding: 30px 0; }
    .pricing2 .pricing_table span.price { padding: 15px 20px; font-size: 20px; }
    .cta2 .dl_content { padding: 85px 0; }
    .cta3 .dl_content { padding: 25px 0; }
    .cta3 .dl_moc .dl_moc_1{ width: 85%; }
    .cta3 .dl_moc .dl_moc_2 { width: 80%; }
    .contact16 .contact_wrapper { padding: 15px 0; }
    .contact16 .contact_wrapper .contact_btn a { top: -30px; }
    .contact16 .contact_wrapper .contact_right { font-size: 10px; line-height: 16px; }
    .cta5 .download_moc img { width: 113%; top: -150px; left: -15px; }
    .cta5 .dl_moc{ margin: -30px 0; }
    .pricing6 .pricing_content .fs_btn { position: inherit; bottom: -15px; right: 0; }
    .contact5 .contact_list li{ font-size: 10px; line-height: 16px; }
    .contact5 .contact_list li br{ display: none; }
    .subscribe7 .subscribe_content { padding: 63px 0; }
    .feature18 .service_items li:nth-child(3){ margin-bottom: 30px; }
    .feature18 .service_bg { background-position: 130% bottom; }
    .contact7 .google_map{ display: none; }
    .content18 .about_image{ padding: 10px; }
    .skill7 .skill_image{ background-position: 50px center; }
    .tab6 .tab_content .service_content { padding: 20px 0; }
    .tab6 .tab_menu li a { padding: 0 10px; font-size: 10px; }
    .portfolio17 .gallery_head { padding: 20px 20px 0; }
    .portfolio17 .gallery_carousel .owl-nav div{ bottom: 10px; left: -75px; }
    .portfolio17 .gallery_carousel .owl-nav div.owl-next{ left: -40px; }
}
/* ---- 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: 767px) {
    body, p{ font-size: 12px; line-height: 22px; }
    h1{ font-size: 30px; }
    h2{ font-size: 20px; }
    h3{ font-size: 16px; }
    br{ display: none; }
    .padding{ padding: 60px 0; }
    .xs-padding{ padding: 15px; }
    .header11, .header5{ height: 60px; }
    .navbar-header { padding: 5px 0; }
    .navbar-header .brand { display: block; padding: 13px 25px; }
    .navbar-collapse {
        background-color: #232323;
        border-top: medium none;
        box-shadow: none;
        margin-top: 0px;
        overflow-x: visible;
        padding-left: 0;
        padding-right: 0;
    }
    .navbar .collapse .nav_btn{ display: block; line-height: 45px; }
    ul.nav{ margin: 0; overflow: hidden; }
    .header11 ul.nav > li,
    ul.nav > li{ display: block; margin: 0; }
    .header11  ul.nav > li > a{ display: block; margin: 0; text-align: left; }
    header ul.nav > li > a{
        display: block;
        font-size: 10px;
        color: #ddd;
        line-height: 45px;
        padding: 0 30px !important;
    }
    header ul.nav > li.active > a:before,
    header ul.nav > li.active > a:after,
    header ul.nav > li > a:before,
    header ul.nav > li > a:after{ display: none !important; }
    header ul.nav > li > a:hover,
    header ul.nav > li.active > a {  background-color: #444 !important; color: #fff !important; }
    .hero_section{ height: 450px; }
    .hero_section.hero8,
    .hero_section.hero1{ height: auto; }
    .hero8 .hero_content,
    .hero1 .hero_content { padding: 30px 0; text-align: center; }
    .hero1 .hero_content h1 br{ display: none; }
    .hero1 .form_container{ margin-bottom: 30px; }
    .hero2 .hero_content h1{ font-size: 45px; }
    .hero4 .hero_content{ margin-bottom: 0; }
    .hero7 .hero_content,
    .hero6 .hero_content { padding: 0; }
    .hero8 .hero_content h1 br{ display: none; }
    .hero25,
    .hero13{ height: 400px; }
    .hero19 .hero_content { padding: 0; }
    .hero_section.hero21{ background-color: #f7f7f7; background-image: none; }
    .hero26 .hero_content h1,
    .hero21 .hero_content h1 { font-size: 30px; }
    .hero21 .hero_content h1 span { font-size: 45px; }
    .hero24.hero_section{ height: 500px !important; }
    .hero24 .reserv_form .form-group .col-xs-12{ margin-top: 15px; }
    .hero29 .hero_content h2{ margin: 0; }
    .feature2 .feature_heading{ padding: 0; text-align: left; }
	.contact_form .form-group .col-sm-6:first-child{ margin-bottom: 15px; }
    .feature3:before{ width: 100%; }
    .subscribe_form .form_input{ width: 65%; }
    .subscribe_form .submit{ width: 35%; }
    .feature7 .service_items .service_item,
    .feature6 .service_items .service_item{ text-align: left; }
    .portfolio_filter li { padding: 13px; font-size: 10px; }
    .destination_head .section_heading { padding: 18px 0; }
    .destination_head .section_heading p { font-size: 12px; line-height: 20px; }
    .cta2 .dl_content { padding: 0; text-align: center; }
    .cta2 .dl_content .btn_group a{ margin: 0 5px; }
    .cta3 .dl_content{ text-align: center; }
    .subscribe_form{ width: 90% !important; }
    .subscribe7 .subscribe_form,
    .subscribe6 .subscribe_form,
    .subscribe5 .subscribe_form{ width: 100% !important; }
    .subscribe_form .form_input{  width: 65% !important; }
    .subscribe_form .submit{ width: 35%!important; padding: 0 15px!important; }
    footer,
    .footer_menu{ text-align: center!important; }
    .video2 .video_content h3{ font-size: 20px; padding: 19px 0; }
    .pricing4 .pricing_wrap li.col-xs-6{ padding: 15px; }
    .contact16 .contact_wrapper .contact_btn a{ left: 0; top: -34px; }
    .pricing8 .pricing_content ul{ padding-bottom: 70px; }
    .contact5 .contact_left,
    .contact5 .contact_right{ padding: 60px; }
    .feature17.overlay:before{ width: 100%; }
    .footer4,
    .footer4 .footer_social{ text-align: center; }
    .footer5 p,
    .footer5 .social_links{ text-align: center; }
    .feature20 .service_items .service_item{ padding-left: 90px; padding-right: 90px; text-align: left; }
    .feature20 .service_items .service_item i{  right: auto; left: 0; }
    .content21 .gallery_content { padding: 0; }
    .portfolio17 .gallery_carousel .owl-nav div{ bottom: calc(50% - 15px); left: 0; }
    .portfolio17 .gallery_carousel .owl-nav div.owl-next{ left: auto; right: 0; }
}
/* ---- End of max-width 767px CSS ---- */


/* ---- Start of max-width 480px CSS ---- */
@media all and (max-width: 480px) {
	.col-xs-6{ float: none; width: 100%; }
    .counter4 .fs_countdown2 li,
    .sponsor_images .col-xs-6, 
    .brands .col-xs-6{ float: left; width: 50%; }
    .hero2 .hero_content h1{ font-size: 35px; }
    .hero25,
    .hero16,
    .hero13{ height: 350px; }
    .hero16 .hero_content .content_inner{ padding: 40px; }
    .hero24.hero_Section{ height: auto; }
    .hero24 .reserv_form .col-xs-6{ float: left; width: 50%; }
    .contact16 .contact_wrapper .contact_btn a{ left: 0; top: -59px; }
    .reserv_form .form-group .col-xs-6:first-child{ margin-bottom: 15px; }
}
/* ---- End of max-width 480px CSS ---- */


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



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


/* ---- Start of max-width 380px CSS ---- */
@media all and (max-width: 380px) {
	.header8 .top_header .top_left ul li {
    letter-spacing: 0px;	
}
.height-100 {
    min-height: 750px;
}	
}
/* ---- End of max-width 380px CSS ---- */
@media all and (max-width: 460px) {
	.responsive {
		display: none!important;
}