/* CSS Document */ 

                                                            /* MAX-WIDTH: 1200 */
@media only screen and (max-width: 1200px) {	
	HEADER .offer {margin-right: -20px;}
}

                                                            /* MAX-WIDTH: 1100 */
@media only screen and (max-width: 1100px) {
	.features li {flex-grow: 1; }
}

                                                            /* MAX-WIDTH: 992 */
@media only screen and (max-width: 992px) {
	HEADER #description {
		/*background-color: rgba(0, 0, 0, .3);*/
		width: auto;
		margin: 0 -20px;
		padding: 50px 20px;
	}
	H1 {
		/*border: none;
		padding: 0 0px;
		margin: 0;*/
	}
	H1 span {}
	H1 span:first-child {
	}
	HEADER H3 {margin-top: 100px;}
	HEADER .offer {
		margin-left: -20px;
		padding-top: 20px;
		flex-grow: 1;
	}
	.content.order_send {
		/*display: flex !important;*/
		padding: 20px 20px 0 0;	
		/*justify-content: space-around;*/
	}
	.content.order_send p {flex-basis: 100%;}
	
	#brands img {height: 30px;}
	#director p {font-size: 27px; }
	#serv-img {flex-basis: calc(30% - 20px);}
	.serv-list {flex-basis: 70%;}
}

                                                            /* MAX-WIDTH: 860 */
@media only screen and (max-width: 860px) {
	#logo {margin: 10px 0 0; }
	HEADER .offer {}
	HEADER .offer H4 span:last-child {
		display: inline;
		/*font-size: 1em;*/
	}
	H2 {font-size: 43px;}
	H3 {font-size: 29px;}
	H4 {font-size: 22px;}
	/**#brands img:first-child {display: none; }
	#brands img:nth-child(2) {display: block; }**/
	#prices table {display: none; }
	#prices ul {display: flex; }
	#prices ul li {flex-basis: 49%;	}
	#prices li:nth-child(even) {background-color: transparent; }
	#prices li:nth-child(2) {background-color: whitesmoke; }
	#prices li:nth-child(3n+3) {background-color: whitesmoke; }
	/*.serv-list {flex-basis: 65%;}*/
	.serv-list p, #benefits p {font-size: 18px;}
	#gadgets ul {flex-basis: 100%; }
	#benefits li {padding-left: 60px; }
	ol.process {flex-wrap: wrap;}
	ol.process li {
		max-width: 49.5%; 
		width: calc(50% - 90px); 
		min-height: 6em;
		margin-bottom: 15px; 
		padding-left: 70px;
	}
	ol.process li {
		/*max-width: 100%; */
		width: auto; 
		height: 4em;
		min-height: auto;
		margin-bottom: 0px; 
		display: flex; 
		align-items: center; 
		text-align: left;
		padding-left: 0;
	}
	ol.process li:before {
		position: static; 
		margin: 0 15px;
		line-height: 1.2em;
	}
	#director p {font-size: 22px; }
	#director-img {flex-basis: 45%; }
}

                                                            /* MAX-WIDTH: 768 */
@media only screen and (max-width: 768px) {
	H1 {font-size: 7vw;}
	HEADER #description  {width: auto; }
	HEADER .order_send { }
	#logo-bg address {
		/*width: calc(100% + 0px); */
		margin: 0 0px 10px 0;
		padding: 0;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		order: 3;
	}
	#logo-bg address .tel {font-family: 'roboto_condensedlight', sans-serif;}
	#logo-bg address p {display: none;}
	#logo-bg .whatsapp {
        flex-basis: 170px;
        flex-grow: 1;
        max-width: 220px;
		padding: 5px 10px;
		border: solid 1px limegreen;
		background-color: var(--main-color);
	}
	#logo-bg .whatsapp span {display: block;}
	#logo-bg .whatsapp i {color: white;}
	#menu-icon {
		display: block;
		width: fit-content;
		color: black;
		font-size: 20px;
	}
	#menu-icon:before {
		font: normal normal normal 30px/1em FontAwesome;
		content: "\f0c9";
		display: inline-block;
		margin-right: 5px;
	}
	#main-nav ul {
		display: none;
		position: absolute;
		right: 0;
		top: 30px;
	}
	nav {margin: -65px 0 35px 0; order: 2;}
	nav ul {
		flex-flow: column;
		width: 230px;
		margin-right: 0;
	}
	nav li {position: static;}
	nav li:before {display: none;}
	nav a {
		padding: 10px 10px 7px;
		height: auto;
		display: block;
		text-align: right;
		color: #FFF;
		background-color: rgba(0,0,0, .5);
		border-bottom: 1px solid #FFF;
	}

	H2 {font-size: 34px;}
	#sale H3 {text-align: right; }
	#sale article {
		background-position-y: top;
		background-size: 30%;
	}
    .side-img-block article {
        background: var(--bg-image);
		background-size: contain;
		background-repeat: no-repeat;
		flex-direction: column;
    }
    .side-img-block H2 {
		margin-bottom: 15px;
        /*color: white;
        text-shadow: 2px 2px 2px #222;*/
		display: none;
    }
	.side-img-block div H2 {display: block;}

    .side-img-block H4 {
		padding: 10px;
		margin-left: -10px;
		background-color: rgba(255, 255, 255, .8);
	}
    .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:first-of-type {padding: 0;}
    .side-img-block div {
		flex-basis: calc(100% - 60px);
		padding: 0px;
		background-image: none !important;
		background-color: rgba(255, 255, 255, .75);
	}
    .side-img-block div:first-child {
		display: none;
	}
	.features ul, .features ol {/*padding: 0;*/	}
	.features li {font-size: 18px; }
	.features li:last-child {margin: 0;	}
	#gadgets li {
		flex-basis: calc(33% - 40px);
		flex-grow: 1;
	}
	#serv-img {flex-basis: calc(40% - 20px); }
	.serv-list {flex-basis: 60%;}
	.serv-list li {flex-basis: 100%;}
	.blocks2 li {flex-basis: 99%;}
	#benefits li {flex-basis: calc(99% - 60px); padding-left: 10px; }
	#benefits H4 {font-size: 25px; padding: 10px 0 0 50px;}
	#director p {font-size: 20px; padding-left: 55px; }
	#director p:before {width: 45px; }
}

															/* MAX-WIDTH: 640 */
@media only screen and (max-width: 640px) {
	/*H2 {font-size: 30px;}*/
	H1 {
		/*margin: -30px -20px 20px;*/
		font-size: 9vw;
	}
	H3 {font-size: 25px;}
	#logo-bg {}
	#logo {width: 65%; align-self: flex-start; }
	HEADER article {padding-top: 30px;}
	HEADER #description {/*background-color: rgba(0, 0, 0, .3);*/ }
	HEADER H2 { } 
	HEADER p, HEADER li {font-size: 4.5vw; }
	HEADER .features {padding: 30px 0; }
	HEADER .features li {
		margin-left: 0 !important;
		padding-left: 0;
		/*font-size: 3.6vw;*/
	}
	#sale H3 {font: 30px 'roboto_cnregular', sans-serif; }
	.features ul, .features ol {flex-direction: column;}
	.features li {
		flex-basis: auto; 
		font-size: 20px; 
		border: none !important; 
		margin: 5px 0 0 3% !important; 
		padding-left: 0; 
		position: relative; 
	}
	.features li:before {
		content: '';
		display: block;
		width: 50px;
		height: 2px;
		background: orange;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.features li span {display: inline;	}
	.order_send {padding-top: 0;}
	.order_send p {width: auto; width: auto; margin-bottom: 10px; }
	#brands {margin: 0px 0 20px; background-color: white; }
	#brands img {height: 25px;}
	#gadgets span {font-size: 3vw; }
	#prices ul li {flex-basis: 100%;	}
	#prices li:nth-child(even) {background-color: whitesmoke; }
	#prices li:nth-child(odd) {background-color: transparent; }
	#serv-img {display: none;}
	#services {
		padding: 0px; 
		background: rgba(0, 0, 0, .5) url('../images/services.jpg') no-repeat left top;
		background-blend-mode: color;
		background-size: cover;
		border-top: 240px solid white;
		background: none;
	}
	#services article:first-child {margin-top: -240px;}
	#services H2 {/*color: #FFF; padding-top: 70px;*/ }
	#services H3 {/*color: #DDD; margin-bottom: 70px;*/ }
	#services H4 {/*color: #EEE;*/}
	.serv-list p {/*color: #CCC;*/}
	.serv-list {
		flex-basis: auto; 
	    padding: 20px 20px 0;
		margin: 0 -20px;
	    background: rgba(0, 0, 0, .5) url(../images/services.jpg) no-repeat left top;
	    background-blend-mode: color;
	    background-size: cover;
	}
	.serv-list li {
		box-shadow: 3px 3px 10px #000; 
		background-color: whitesmoke; 
		background-color: rgba(255, 255, 255, .8);
	}
	.serv-list li:nth-last-child(-n+2) {margin-bottom: 30px;}
	.serv-list p:nth-child(odd) {background-color: #EEE; }
	#gadgets li {flex-basis: calc(50% - 40px);}
	#fotogal li {flex-basis: calc(50% - 15px); margin-bottom: 20px; }
	ol.process li {max-width: 100%; }
	FOOTER div {flex-basis: 100%; margin-bottom: 30px;}
	FOOTER .submit {width: 200px;}
}

															/* MAX-WIDTH: 480 */
@media only screen and (max-width: 480px) {
	#logo-bg {
		padding-left: 2%;
		padding-right: 2%;
    }
	HEADER #description {	}
	H1 {
		font-size: 16vw;
		/*font: 7.4vw 'roboto_condensedlight';*/
	}
	HEADER H2 {font-size: 25px; }
	HEADER article {/*padding-bottom: 20px; */}
	HEADER p, HEADER li {font-size: 5.5vw; }
	HEADER .features {padding-top: 20px; }
	HEADER .features strong {display: inline; }
	#logo {width: 80%; }
	#logo-bg address {
		margin: 10px -1% 0 0;
		align-items: unset;
		/*background-color: #EEE;*/
		padding: 0;
	}
	#logo-bg address .fa {margin-right: 5px; }
	#logo-bg address .tel {
		/*width: 50%; */
		justify-content: center;
		font-size: 6vw;
	}
	#logo-bg address a span, 
	#logo-bg address .whatsapp span {/*display: none;*/}
	#logo-bg .whatsapp {flex-basis: auto;}
	#logo-bg address .tel a {
		/*font-size: 6vw; */
		width: auto;
    	
    	&:after {top: 1.7em; left: 40px;}
	}
	HEADER .order_send p {
		width: auto;
		margin: 0 0 10px 0;
	}
	#sale H2 {padding-top: 100px; }
	#sale H3 {font-size: 7.5vw; }
	.side-img-block article {margin-top: 0; }
	.side-img-block ul {margin: 0px 0 0;	}
	#benefits H4 {padding: 0 0 0 25px; }
	#benefits li:before {left: -15px; font-size: 45px; }
	/*.features ul, .features ol {flex-wrap: wrap; justify-content: space-between; }*/
	/*.features li {flex-basis: 46%; }*/
	.features li span {/*display: inline;*/ }
	/*.features li:first-child {border-left: 2px solid orange; }*
	/*.features li:nth-child(odd) {border-left: none; margin: 0; }*/
	/*.features li:nth-child(odd), .features li:nth-child(even) {margin-left: 3%; }*/
	#brands {padding:30px 0; }
	/**#brands img:nth-child(2) {display: none; }
	#brands img:last-child {display: block; }**/
	#brands img {height: 18px; }
	#services {border-top: 270px solid white;}
	#services article:first-child {margin-top: -270px;}
	.flex-3 {flex-direction: column;}
	#vehicles li H5 {text-align: left;}
	.flex-3 li {
		max-width: unset;
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        justify-content: flex-start;}
	#vehicles li img {max-width: 130px;	margin-right: 20px;}
	
	.serv-list li {padding: 20px 10px; flex-basis: 100%; }
	.serv-list p, #benefits p {margin-bottom: 2px;}
	#gadgets H2 {font-size: 8.5vw; }
	#gadgets li {flex-basis: calc(45% - 15px); }
	#gadgets span {font-size: 5vw; }
	ol.process li {font-size: 20px; }
	#director-img {order: -1;}
	#director .flex div, #director .flex div:first-child {flex-basis: 100%;}
}


															/* MAX-WIDTH: 360 */
@media only screen and (max-width: 360px) {
	article, .content {padding: 0 4%;}
	#logo-bg {padding: 0 10px;}
	HEADER #description { }
	HEADER H2 {font-size: 24px;}
	H2 {font-size: 9vw;}
	H4 {font-size: 20px;}
	HEADER p, HEADER li {margin-left: 4%;}
	#benefits li {flex-basis: calc(100% - 40px); padding-left: 40px;}
	#benefits li:before {font-size: 45px; left: -5px;}
	#brands img {height: 18px; }
	ol.process li {font-size: 18px; /*flex-direction: column; align-items: flex-start; margin-bottom: 10px; */ }
	FOOTER H3 {font-size: 29px;}
}




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

                                                            /* MIN-WIDTH: 768 */
@media only screen and (min-width: 768px) {					
	ol.process li:first-child {padding-left: 0px;}
}

                                                            /* MIN-WIDTH: 992 */
@media only screen and (min-width: 992px) {
	HEADER .callback {
		/*margin-top: -50px;*/
	}
}

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

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