/*
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    */

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    
    .primary-menu > li{
        margin: 0 38px !important;
    }
    
	.work-content {
		margin-top: 3%;
    }
	.custom-work-outer {
		margin-bottom: 2%;
		max-height: 95px;
	}
	.h1-background-absolute {
		max-height: 95px;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
    .toggle-icon{
        width: 27px;
        height: 10px;
        background: url("/wp-content/themes/petroavtotrans/assets/images/icon-hamburger.png") no-repeat;
        color: #fff;        
    }
    
    .header-phone, .header-phone:link, .header-phone:visited, .header-phone:hover, .header-phone:active{
        height: 30px;
    }
    
    .btn-messengers{
        display: none;
    }
    
	.work-content {
		margin-top: 2%;
    }
	.custom-work-outer {
		margin-bottom: 2%;
		max-height: 85px;
	}
	.h1-background-absolute {
		max-height: 85px;
	}
	
}
    
/* ipad, ipad pro 768px - 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    .questions-h1{
        font-size: 34px !important;
    }
    
    .questions-phone{
        font-size: 40px !important;
    }
    
    .header-navigation-wrapper{
        width: 98% !important;
    }
    
    .header-titles{
        height: 72px;
        line-height: 72px;
    }
    
    .header-titles-wrapper{
        width: 98% !important;
        justify-content: unset;
        padding: 20px 0 40px 20px;       
    }

    .header-logo, .header-logo:link, .header-logo:visited, .header-logo:hover, .header-logo:active{
        font-size: 23px;
        background: url(/wp-content/themes/petroavtotrans/assets/images/icon-logo.png) no-repeat left;
        background-size: contain;
        height: 30px;
        padding-left: 40px;
    }

    .header-slogan{
        font-size: 16px;
        height: 30px;
    }

    .header-phone, .header-phone:link, .header-phone:visited, .header-phone:hover, .header-phone:active{
        height: 30px;
    }
    
   .primary-menu > li{
        margin: 0 38px !important;
    }

    .section-inner{
        width: 100%;
    }
    
    .menu-modal .menu-top {
        background: #293f93;
        color: #fff;
    }
    
	h1.services-h1 {
		font-size: 3.5vw;
		padding: 2%;
	}
    .service-header {
		font-size: 16px;
		line-height: 23px !important;
        min-height: 100px !important;
    }
    
    .header-inner .toggle {
        align-items: unset !important;
        display: unset !important;
    }
    
    .nav-toggle{
        position: absolute !important;
        right: 0 !important;
        top: 30px !important;
        bottom: unset !important;
    }
    
    .slide-text{
        font-size: 38px;
        padding: 100px 0 0 49px;
        line-height: 57px;
    }
    
    .feedback-form{
        background: #2a9bf5;
        padding: 24px 31px;
        border-radius: 5px;
    }
    
    .feedback-input input, .feedback-input select, .feedback-input option{
        max-width: 100%;
        width: 100%;
    }
    
    .feedback-submit{
        width: 100%;
    }
    
    .feedback-map{
        margin: 20px 0 0 0 !important; 
        padding: 0 !important;
    }
    

}

/* mobile devices < 768px */

@media screen and (max-width: 768px) {
    .entry-content {
        width: 100%;
		padding-left: 2%;
    	padding-right: 2%;
		padding-top: 2%;
    }
	h3.post-title {
		text-align: center;
    } 
	
	h1.services-h1 {
		font-size: 5.5vw;
		padding: 2%;
	}
    .service-header {
		text-align: center;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		min-height: 92px !important;
    }
    .service-header a {
		text-align: center;
		padding: 0px;
		margin: 0px;
		font-size: 5vw;
		line-height: 4.5vw !important;
    }
    .post-header div {
		padding-left: 2% !important;
	}
	.post-header-line-1 *{
		font-size: 4.5vw !important;
		font-weight: bold;
		text-align: center !important;
		margin: auto;
	}
	
	.slide-text{
        font-family: "helioscond", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 16px;
        position: absolute;
        top: 0 !important;
        padding: 25px 0 0 49px;
        line-height: unset !important;
    }
    
	.questions-phone, .questions-h1 {
        font-size: 8vw !important;
    }
	
    .section-inner{
        width: 100%;
    }

    .btn-messengers{
        display: none;
    }

    .header-titles-wrapper{
        justify-content: unset;
        padding: 20px 0 40px 20px;       
    }

    .header-logo, .header-logo:link, .header-logo:visited, .header-logo:hover, .header-logo:active{
        font-size: 23px;
        background: url(/wp-content/themes/petroavtotrans/assets/images/icon-logo.png) no-repeat left;
        background-size: contain;
        height: 30px;
        padding-left: 40px;
    }

    .header-phone, .header-phone:link, .header-phone:visited, .header-phone:hover, .header-phone:active{
        height: 30px;
    }

    .header-slogan{
        font-size: 16px;
        height: 30px;
    }
    
    .service-header{
        font-size: 16px;
        line-height: 18px;
        min-height: 72px;
    }
    
    .feedback-form{
        background: #2a9bf5;
        padding: 24px 31px;
        border-radius: 5px;
    }
    
    .feedback-input input, .feedback-input select, .feedback-input option{
        width: 100%;
        max-width: 100%;
    }
    
    .feedback-submit{
        width: 100%;
    }
    
    .feedback-map{
        margin: 20px 0 0 0 !important; 
        padding: 0 !important;
    }
    
    .col-half-offset{
        margin-left: unset !important;
    }
    
    .custom-h1{
        text-align: center !important;
    }
    
    .feedback-map{
        margin: 0 unset;
    }
    
    .slick-slide img{
        margin: 0 auto;
    }
    
    .main-content div img, .main-content p img{
        width: 100%;
        text-align: left !important;
        margin: 0 12px 12px 0;        
    }

    .main-content {
        padding: 0 20px;
    }

    /*.main-content h1, .main-content h2, .work-content h1, .work-content h2{
        font-size: 24px;
    }*/
    
    #vk_groups,
    #vk_groups iframe {
        width: 100% !important;
    }

    .article{
        margin-right: unset;
        margin: 0 auto !important;
    }
    
    .article-img, .article-desc{
        max-width: unset;
    }
    
    .article-desc{
        width: 220px;
        margin: 0 auto;        
    }
    
    .show-more{
        width: 156px;
    }
 
    .hidden-for-mobile{
        display: none;
    }   
    
    .header-inner .toggle {
        align-items: unset !important;
        display: unset !important;
    }
    
    .nav-toggle{
        position: absolute !important;
        right: 0 !important;
        top: 30px !important;
        bottom: unset !important;
    }
    
    .toggle-icon{
        width: 27px;
        height: 10px;
        background: url("/wp-content/themes/petroavtotrans/assets/images/icon-hamburger.png") no-repeat;
        color: #fff;        
    }
    
    .header-phone, .header-phone:link, .header-phone:visited, .header-phone:hover, .header-phone:active{
        height: 30px;
    }
    
    .menu-modal .menu-top{
        background: #293f93;
        color: #fff;
    }
    
    .modal-menu a{
        font-family: "HeliosCond", "Helvetica Neue", Helvetica, sans-serif;
        font-size: 16px;
        text-transform: uppercase;        
    }

    .modal-menu > li > a, .modal-menu > li > .ancestor-wrapper > a{
        font-size: unset;
        font-weight: bold;
        letter-spacing: unset;
    }
    
    .header-footer-group, body:not(.overlay-header) #site-header .toggle, .menu-modal .toggle{
        color: #fff;
    }
    
    button.close-nav-toggle svg{
        margin-right: 24px;
    }
 
    .toggle-icon-footer{
        margin-top: -30px;
        color: #fff;
    }
    
    .toggle-icon-header{
        
    }

    .social-text{
        text-align: center;
        font-size: 23px;
    }
	
	.work-content {
		margin-top: 0;
        
	}
	.custom-work-outer {
		margin-bottom: 2.5%;
		background: #f0f0f0;
		width: 100%;
		padding-left: 4%;
		padding-right: 1%;
		padding-top: 1%;
		padding-bottom: 1%;
	}
	.h1-background-absolute {
		display: none;	
	}
	.separator img {
		width: 100%;
		max-width: 280px;
	}

}

@media screen and (max-width: 380px) {
	.breadcrumbps {
		white-space: nowrap; /* Запрещаем перенос строк */
		overflow: hidden; /* Обрезаем все, что не помещается в область */
		text-overflow: ellipsis; /* Добавляем многоточие */	
		/* display: none; */
	}
	
}