/* CSS Document */ 

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

                                                            /* 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: 30px 20px;	
	}
	H1 {
		/*border: none;
		padding: 0 0px;
		margin: 0;*/
	}
	H1 span {font-size: 0.7em;}
	H1 span:first-child {
	}
	HEADER .offer {max-width: 100%;	}
	HEADER .order_send {/*display: none;*/}
	.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 article {flex-direction: column;}
	HEADER .order_send {
		max-width: unset;
		margin-right: 0;
	}
	HEADER H3 {
		margin-top: 0;
	}
	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 {flex-basis: calc(49% - 60px); padding-left: 60px; }
	ol.process {flex-wrap: wrap;}
	ol.process li {
		max-width: 50%; 
		width: calc(50% - 90px); 
		min-height: 6em;
		margin-bottom: 15px; 
		padding-left: 70px;
	}
	#director p {font-size: 22px; }
	#director-img {flex-basis: 45%; }
}

                                                            /* MAX-WIDTH: 768 */
@media only screen and (max-width: 768px) {
	H1 {font-size: 6vw;}
	#logo-bg address {
		width: calc(100% + 0px); 
		justify-content: space-between;
		margin: 10px 0 10px 20px;
		/*padding: 0 20px;*/
		order: 3;
	}
	#menu-icon {
		display: block;
		width: fit-content;
		color: black;
		font-size: 20px;
	}
	#menu-icon:before {
		font: 30px/1em FontAwesome;
		content: "\f0c9";
		display: inline-block;
	}
	#main-nav ul {
		display: none;
		position: absolute;
		right: -30px;
		top: 30px;
	}
	nav {
		margin: -40px 10px 0px 0;
		order: 2;
		background: transparent;
	}
	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; }
    
    .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;
    }
    .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 {
		flex-basis: calc(100% - 60px);
		padding: 50px 20px;
		background-image: none !important;
		background-color: rgba(255, 255, 255, .6);
	}
    .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); }
	#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: 0px -20px 20px;
		font-size: 9vw;
	}
	H3 {font-size: 25px;}
	#logo-bg { }
	#logo {width: 65%; align-self: flex-start; }
	HEADER article {padding-top: 0;}
	HEADER #description {/*background-color: rgba(0, 0, 0, .3);*/ }
	HEADER H2 {padding-left: 10px; } 
	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 article {background-position-y: bottom; background-size: 25%; }
	#sale H3 {padding-left: 0; font-size: 7.2vw; }
	.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: 0;*/}
	#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);}
	ol.process li {
		max-width: 100%; 
		width: auto; 
		height: 4.5em;
		min-height: auto;
		margin-bottom: 0px; 
		display: flex; 
		align-items: center; 
		padding-left: 0;
	}
	ol.process li:before {position: static; margin-right: 10px; font-size: 100px; opacity: .3; }
	#fotogal li {flex-basis: calc(50% - 15px); margin-bottom: 20px; }
	FOOTER div {flex-basis: 100%; margin-bottom: 30px;}
	FOOTER .submit {width: 200px;}
}

															/* MAX-WIDTH: 480 */
@media only screen and (max-width: 480px) {
	HEADER #description {	}
	H1 {
		font-size:10vw;
		/*font: 7.4vw 'roboto_condensedlight';*/
	}
	HEADER H2 {
		font-size: 25px;
		padding: 0 5px;
        line-height: 1.3em;
        background: none;
        color: bisque;
	}
	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: 0;
		/*background-color: lavenderblush;*/
		padding: 0;
	}
	#logo-bg address a {
		font-size: 5.5vw; 
		margin: 0px 0px;
		padding: 10px 0;
		width: 50%;
		display: flex;
    	justify-content: center;
	}
	#logo-bg address .fa {margin: 0; }
	#logo-bg address .tel {width: fit-content;}
	#logo-bg address .tel a {
		font-size: 7.0vw; 
		width: auto;
    	
    	&:after {top: 1.7em; left: 40px;}
	}
	HEADER .offer H3 {
		font-size: 8vw;
	}
	#benefits li {padding-left: 37px; }
	#benefits li:before {left: -15px; font-size: 45px; }
	.side-img-block article {margin-top: 0; }
	.side-img-block ul {margin: 0px 0 0;	}
	.features li span {/*display: inline;*/ }
	#brands {padding:30px 0; }
	#brands img {height: 18px; }
	#services {border-top: 270px solid white;}
	#services article:first-child {margin-top: -270px;}
	.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: 22px; }
	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) {				
}