/*Общие правила для body, main, section, header 
- убрать после контроля дизайна блока контактов

Надо же, блядь, обнаружил, что медиа запросы надо контролировать от боьшего к меньшему, вперемешку не выходит, просто пиздец.*/


@media only screen and (max-width: 1330px) {
	
	.longText {font-size: 0.9em;}
	

}
	
@media only screen and (max-width: 1165px) {
	
	.contacts-and-feedback {grid-gap: 1em;}
	
	.addresses { grid-gap: 1em;}
}

@media only screen and (max-width: 1110px) {
	
	body { padding: 1em 1.5em 0;}
	
}
@media only screen and (max-width: 1025px) {
	
	.longText  {font-size: 0.8em;}
	.longText1,
	.longText2,
	.longText3 {font-size: 0.88em;}
	
}


@media only screen and (max-width: 960px) {
	
	.addresses {grid-template-columns: 1fr;}
	.adress {font-size: 1.3em;}
	.longText,
	.longText1,
	.longText2,
	.longText3 {font-size: 1em;}
}

@media only screen and (max-width: 725px) {
	
	.longText, .longText1 {font-size: 0.88em;}

}

@media only screen and (max-width: 675px) {
	
	.contacts-and-feedback {
		grid-template-columns: 1fr;
		grid-gap: 2em;
	}
	
	.addresses {
		grid-template-columns: 1fr 1fr;
		grid-gap: 2em;}
}

@media only screen and (max-width: 625px) {
.longText {font-size: 0.8em;}	
.longText2 {font-size: 0.88em;}

}



@media only screen and (max-width: 600px) {
	
	.addresses {
		grid-template-columns: 1fr;
		font-size: 1em;
	}
	
	.longText,
	.longText1,
	.longText2 {font-size: 1em;}
	
}

@media only screen and (max-width: 440px) {
	
	body { padding: 1em 0.8em 0; }
	
	.phones-order{
		box-shadow: none;
		padding: 0;
		width: inherit;
	}
	
	.phone {
		border: 2px solid none;
		border-radius: 15px;
		padding: 15px 20px;
		box-shadow: -1px 2px 7px 0px #2e1111;
	}

}

@media only screen and (max-width: 395px) {
	
	.longText {font-size: 0.9em;}
}


@media only screen and (max-width: 375px) {
	
	.justHeaderForContacts { font-size: 20px;}
	.contacts-and-feedback {grid-gap: 2.5em ;}
	.text1, .text2 {padding: 0 1em;}
	h1 {font-size: 1.3em;}
}

@media only screen and (max-width: 335px) {
	
	.longText,
	.longText1,
	.longText2 {font-size: 0.85em;}
}

@media only screen and (max-width: 310px) {
	
	.justHeaderForContacts { font-size: 17px;}
	.contacts-and-feedback {grid-gap: 2.5em ;}
	.adress {font-size: 1em;}
	.longText,
	.longText1,
	.longText2 {font-size: inherit;}

}

@media only screen and (max-width: 285px) {
	.longText {margin: 0 -5px}
}

@media only screen and (max-width: 272px) {
	
	.justHeaderForContacts { font-size: 15px;}
	.contacts-and-feedback {grid-gap: 2em ;}
	.adress {font-size: 0.9em;}
	.phones-order {font-size: 1.2em;}
	.phone { padding: 10px 10px;}
}


@media only screen and (max-width: 250px) {
	
	body {	padding: 1em 0.2em 0; }
	.phone { padding: 10px 7px;}
}

@media only screen and (max-width: 220px) {
	
	.online-order,
	.phone>img {display: none;}
	
}

@media only screen and (max-width: 205px) {
		
	body {	padding: 1em 0.1em 0; }
	.justHeaderForContacts { font-size: 14px;}
	.contacts-and-feedback {grid-gap: 2em ;}
	.adress {font-size: 0.8em;}
}


@media only screen and (max-width: 180px) {
		
	.phones-order {font-size: 1.1em;}
}


@media only screen and (max-width: 165px) {
		
	.phones-order {font-size: 1em;}
}


@media only screen and (max-width: 155px) {
		
	.phones-order {font-size: 0.95em;}
}


@media only screen and (max-width: 145px) {
		
	.justHeaderForContacts { font-size: 13px;}
	.adress {font-size: 0.7em;}
	.phones-order {font-size: 0.9em;}
}


@media only screen and (max-width: 137px) {
		
	.justHeaderForContacts { font-size: 12px;}
	.phones-order {	font-size: 0.83em;}
}