/* CSS Document */ 

                                                            /* MAX-WIDTH: 1250 */
@media only screen and (max-width: 1250px) {
}

                                                            /* MAX-WIDTH: 1100 */
@media only screen and (max-width: 1100px) {
	#offer {margin: 0 20px;}
}

                                                            /* MAX-WIDTH: 992 */
@media only screen and (max-width: 992px) {
    #logo span {font-size: 1.6vw;}
    HEADER .tel {/*font-size: 3.5vw;*/}
    #description {background-position-x: center;}
}

                                                            /* MAX-WIDTH: 860 */
@media only screen and (max-width: 860px) {
    #logo img {width: 48vw;}
	#description address {
		flex-grow: 1;
		margin: 0 -20px;
		padding: 15px 15px;
		flex-flow: row wrap;
        justify-content: end;
	}
	#description div {max-width: fit-content; }
	#description address H4 {flex-basis: 100%; }
	#description address p {
		flex-basis: calc(100% - 165px);
		flex-basis: 25em;
		text-align: right;
	}
	.blocks4 li, .blocks4 div, .blocks4 article {
    flex-basis: calc(50% - 15px);
    margin-bottom: 20px;
	}
}

                                                            /* MAX-WIDTH: 768 */
@media only screen and (max-width: 768px) {
    #logo {flex-grow: 1; }
	H1 {line-height: 1em; }
    article, .content {padding: 30px 20px;}
    #offer address {
        padding-left: 70px;
    }
    #offer article {flex-direction: column; }
    #offer H2, #offer article div {width: auto; max-width: 100%;}
    #offer H2 {
		font-size: 5vw;
        color: #37B;
        background: none;
        margin-right: 0px;
        	&:before, &:after 
			{display: none;}
    }
    #offer H3 {
		margin-bottom: auto;
		font-size: 4vw;
	}
    .arrow {bottom: 0; }
    #faq li {flex-basis: 100%;}
    .blocks3 li, .blocks3 div, .blocks3 article {
		flex-basis: 49%;
	}
    .side-img-block article {
        background: var(--bg-image);
		background-size: cover;
		flex-direction: column;
    }
    .side-img-block article:after {
	    display: block;
	    content: '';
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 0;
	    background-color: rgba(0, 0, 0, .7);
	}
    .side-img-block div {
		position: relative;
		z-index: 5;
	}
    .side-img-block H2 {
        color: white;
        text-shadow: 2px 2px 2px #222;
        }
    .side-img-block p {color: #DDD;}
    .side-img-block ul {
        padding: 50px 20px 20px;
        margin: 0px 30px 90px;
        background-color: rgba(34, 68, 102, .7);
    }
    .side-img-block ul li {color: white;}
    .side-img-block div {
		background: none !important;
		flex-basis: calc(100% - 60px);
	}
    .side-img-block div:last-of-type {display: none;	}
    FOOTER .request {flex-basis: 100%; }
}

															/* MAX-WIDTH: 640 */
@media only screen and (max-width: 640px) {
	#logo {
        display: block;
        margin-left: 2%; 
        order: 1;
    }
	#logo img {
		width: 70vw;
	}
	#logo span {
		font-size: initial; 
		display: block;
		width: auto;
	}    
	HEADER article {padding: 0;	}
	HEADER .tel {
		justify-content: space-between;
        flex-basis: 100%;
		flex-direction: row;
        order: 3;
		background-color: aliceblue;
	}
	.tel a {
		padding: 10px;
		/*flex-basis: 30%;*/
		flex-grow: 1;
        font-size: 4.3vw;
		justify-content: center;
        align-items: center;
	}
	.tel a.order_call {
	    width: auto;
		font-size: 4.3vw;
	    align-self: auto;
	}
	.tel .telegram {display: flex; }
	.tel .whatsapp .fa {font-size: 54px; }
	.tel span { }
	.tel .fa {font-size: 30px; }
	.tel .telegram .fa {margin-right: .1em; font-size: 45px; border: none; }
	#description article {
		padding-top: 100px;
		padding-bottom: 100px;
	}
    H2 {font-size: 36px;}
    #numbers ul {flex-direction: column;	}
	#numbers ul li {
		flex-direction: column;
		max-width: 100%; 
		display: flex; 
		align-items: flex-start;
		text-align: left;
	}
	.staff li { }
    .blocks2 li, .blocks2 div, .blocks2 article {flex-basis: 100%;}
	FOOTER article:first-child {flex-direction: column;	}
}

															/* MAX-WIDTH: 480 */
@media only screen and (max-width: 480px) {
	#logo {
		max-width: calc(98% - 90px);
	}
	H1 {
		font-size: 43px; 
		margin: 30px 0;
	}
    H2 {font-size: 30px;}
	#offer article {padding: 0; }
	#offer H2 {font-size: 5.5vw; }
	#offer H3 {font-size: 4.5vw; }
	.side-img-block article {margin-top: 0; }
	.side-img-block ul {margin: 0px 0 0;	}
	address .button {}
	.blocks4 li, .blocks4 div, .blocks4 article {
    flex-basis: 100%;
    margin-bottom: 20px;
	}
}

															/* MAX-WIDTH: 360 */
@media only screen and (max-width: 360px) {
}




                                                            /* MIN-WIDTH: 480 */
@media only screen and (min-width: 480px) {
}

                                                            /* MIN-WIDTH: 768 */
@media only screen and (min-width: 768px) {					
}

                                                            /* MIN-WIDTH: 992 */
@media only screen and (min-width: 992px) {
}

                                                            /* MIN-WIDTH: 1100 */
@media only screen and (min-width: 1100px) {				
}

                                                            /* MIN-WIDTH: 1250 */
@media only screen and (min-width: 1250px) {				
}


