@media (min-width: 260px) and (max-width: 679px) {div.breadcrumbs {margin-top: 55px;} }
/* FRAME */
main#main_content aside#main_ui {width: 100%;}
div#service_frame { width: 100%; z-index: 5; transition: margin-left .8s ease-in-out;}
section#service_content {background: var(--white);}

/* LEFT MENU */
nav#service_left-menu {height: 100%; width: 80px; background: var(--black); z-index: 6; position: fixed;
    transition: left .8s ease-in-out; left: -80px; 
	overflow-y: auto; overflow-x: hidden; -ms-overflow-style: none; scrollbar-width: none;}
    nav#service_left-menu::-webkit-scrollbar {width: 0px; display:none;}
section.service_left-menu { left: 80px; top: 0; opacity: 0; height: 100vh; width:0px;
    transition: all .3s ease-in-out; overflow-x: hidden; position: fixed; z-index: 1; 
    background: var(--dark-blue3); padding-top: 122px; }
@media (min-width: 1024px) {
	section#service_content {background: transparent;}
    header#pc_header.short + main#main_content aside nav section {padding-top: 50px;}
	main#main_content:has(aside#main_ui nav#service_left-menu.show) div#service_frame {width:calc(100% - 80px); margin-left:80px;}
    nav#service_left-menu.show {left: 0;}
    nav#service_left-menu ul {width: 80px; position: relative; z-index: 6;
        display: flex;flex-direction: column; margin-bottom: 122px;}
    header#pc_header.short + main#main_content aside nav#service_left-menu ul {margin-bottom: 50px;}
    nav#service_left-menu li {width: 80px;height: 90px;border-bottom: 1px solid var(--black2);
        position: relative; z-index: 6;
        transition: background .2s ease-in-out;display: flex;align-items: center;justify-content: center;}
    nav#service_left-menu a.icon {width: 80px;height: 90px;
        background: none;opacity: .7; transition: opacity .2s linear;}
    nav#service_left-menu li:hover {background: var(--dark-blue3); cursor: pointer;}
    nav#service_left-menu li:hover section.service_left-menu {width: 350px; opacity: 1;}
    nav#service_left-menu li:hover a {opacity: 1;}
    nav#service_left-menu li section.service_left-menu p {min-width: 320px; min-height: 90px; margin-left: 30px;
        display: flex; align-items: center; line-height: 30px;
        font-size: 22px;opacity: 0;
        transition: opacity .3s linear; letter-spacing: 1px;
        text-transform: uppercase;color: var(--white);}
    nav#service_left-menu li:hover section.service_left-menu p {opacity: 1;}
    nav#service_left-menu li section.service_left-menu ul {overflow-y:auto; overflow-x: hidden;
        width: 320px;margin-left: 10px; max-height: calc(100vh - 280px);}
    nav#service_left-menu li section.service_left-menu ul::-webkit-scrollbar {width: 7px;}
    nav#service_left-menu li section.service_left-menu ul::-webkit-scrollbar-track {
        background: var(--dark-blue3);}
    nav#service_left-menu li section.service_left-menu ul::-webkit-scrollbar-thumb {
        background-color: var(--white2);}
    nav#service_left-menu li section.service_left-menu ul li {
        min-width: 320px;height: auto;border-bottom: none;}
    nav#service_left-menu li section.service_left-menu ul li a {
        width: calc(100% - 70px);margin-left: 10px;padding: 6px 20px; color: var(--grey2);font-size: 14px;
        line-height: 20px;border-bottom: 1px solid var(--white3);transition: all .2s ease-in-out;}
    nav#service_left-menu li section.service_left-menu ul li:hover a {
        color: var(--white); background: var(--dark-blue2);}
}

/* IMAGES */
div#services nav ol li ul li.visible.kompd {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/kompd.webp'); background-size: cover;}
div#services nav ol li ul li.visible.kondic {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/kondic.webp'); background-size: cover;}
div#services nav ol li ul li.visible.vibrostemd {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/vibrostemd.webp'); background-size: cover;}
div#services nav ol li ul li.visible.podveska {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/podveska.webp'); background-size: cover;}
div#services nav ol li ul li.visible.dvigatel {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/dvigatel.webp'); background-size: cover;}
div#services nav ol li ul li.visible.mkpp {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/mkpp.webp'); background-size: cover;}
div#services nav ol li ul li.visible.akpp {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/akpp.webp'); background-size: cover;}
div#services nav ol li ul li.visible.turbina {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/turbina.webp'); background-size: cover;}
div#services nav ol li ul li.visible.electronic {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/electronic.webp'); background-size: cover;}
div#services nav ol li ul li.visible.tormoz {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/tormoz.webp'); background-size: cover;}
div#services nav ol li ul li.visible.topliv {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/topliv.webp'); background-size: cover;}
div#services nav ol li ul li.visible.reika {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/reika.webp'); background-size: cover;}

div#services nav ol li ul li.visible.provodka {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/provodka.webp'); background-size: cover;}
div#services nav ol li ul li.visible.zamykanie {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/zamykanie.webp'); background-size: cover;}
div#services nav ol li ul li.visible.obryv {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/obryv.webp'); background-size: cover;}
div#services nav ol li ul li.visible.vosstan {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/vosstan.webp'); background-size: cover;}
div#services nav ol li ul li.visible.razyom {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/razyom.webp'); background-size: cover;}
div#services nav ol li ul li.visible.massa {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/massa.webp'); background-size: cover;}
div#services nav ol li ul li.predohranitel {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/predohranitel.webp'); background-size: cover;}
div#services nav ol li ul li.visible.rele {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/rele.webp'); background-size: cover;}
div#services nav ol li ul li.visible.okislenie {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/okislenie.webp'); background-size: cover;}

div#services nav ol li ul li.visible.ebur {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/ebur.webp'); background-size: cover;}
div#services nav ol li ul li.visible.debu {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/debu.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remkomfort {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remkomfort.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remblokuprav {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remblokuprav.webp'); background-size: cover;}
div#services nav ol li ul li.visible.elmoduli {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/elmoduli.webp'); background-size: cover;}
div#services nav ol li ul li.visible.svyzblok {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/svyzblok.webp'); background-size: cover;}
div#services nav ol li ul li.visible.perepolus {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/perepolus.webp'); background-size: cover;}
div#services nav ol li ul li.visible.vlaga {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/vlaga.webp'); background-size: cover;}

div#services nav ol li ul li.visible.diagabs {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagabs.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remontabs {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remontabs.webp'); background-size: cover;}
div#services nav ol li ul li.visible.diagairbag {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagairbag.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remontairbag {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remontairbag.webp'); background-size: cover;}
div#services nav ol li ul li.visible.shleyf {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/shleyf.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remontdatabs {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remontdatabs.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remontprovabs {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remontprovabs.webp'); background-size: cover;}

div#services nav ol li ul li.visible.remprib {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remprib.webp'); background-size: cover;}
div#services nav ol li ul li.visible.podsvetkaprib {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/podsvetkaprib.webp'); background-size: cover;}
div#services nav ol li ul li.visible.displey {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/displey.webp'); background-size: cover;}
div#services nav ol li ul li.visible.strelki {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/strelki.webp'); background-size: cover;}
div#services nav ol li ul li.visible.indikatory {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/indikatory.webp'); background-size: cover;}
div#services nav ol li ul li.visible.oshibki {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/oshibki.webp'); background-size: cover;}

div#services nav ol li ul li.visible.centrzamok {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/centrzamok.webp'); background-size: cover;}
div#services nav ol li ul li.visible.steklopod {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/steklopod.webp'); background-size: cover;}
div#services nav ol li ul li.visible.electrozercal {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/electrozercal.webp'); background-size: cover;}
div#services nav ol li ul li.visible.electrosid {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/electrosid.webp'); background-size: cover;}
div#services nav ol li ul li.visible.podogrevstek {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/podogrevstek.webp'); background-size: cover;}
div#services nav ol li ul li.visible.podsid {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/podsid.webp'); background-size: cover;}
div#services nav ol li ul li.visible.dverprovodka {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/dverprovodka.webp'); background-size: cover;}

div#services nav ol li ul li.visible.rulperetyazhka {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/rulperetyazhka.webp'); background-size: cover;}

div#services nav ol li ul li.visible.park {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/park.webp'); background-size: cover;}
div#services nav ol li ul li.visible.diagpark {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagpark.webp'); background-size: cover;}
div#services nav ol li ul li.visible.zadniy {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/zadniy.webp'); background-size: cover;}
div#services nav ol li ul li.visible.kamera {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/kamera.webp'); background-size: cover;}
div#services nav ol li ul li.visible.ustpark {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/ustpark.webp'); background-size: cover;}
div#services nav ol li ul li.visible.datchiki {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/datchiki.webp'); background-size: cover;}
div#services nav ol li ul li.visible.provodkapark {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/provodkapark.webp'); background-size: cover;}

div#services nav ol li ul li.visible.diagosvesh {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagosvesh.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remontfar {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remontfar.webp'); background-size: cover;}
div#services nav ol li ul li.visible.dho {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/dho.webp'); background-size: cover;}
div#services nav ol li ul li.visible.povorotnikir {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/povorotnikir.webp'); background-size: cover;}
div#services nav ol li ul li.visible.stopsignal {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/stopsignal.webp'); background-size: cover;}
div#services nav ol li ul li.visible.oshibkilamp {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/oshibkilamp.webp'); background-size: cover;}
div#services nav ol li ul li.visible.provodkaosvesh {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/provodkaosvesh.webp'); background-size: cover;}
div#services nav ol li ul li.visible.regulirovkafar {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/regulirovkafar.webp'); background-size: cover;}

div#services nav ol li ul li.visible.diagklimat {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagklimat.webp'); background-size: cover;}
div#services nav ol li ul li.visible.ventipechki {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/ventipechki.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remrezistor {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remrezistor.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remklimat {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remklimat.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remkondic {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remkondic.webp'); background-size: cover;}
div#services nav ol li ul li.visible.diagventi {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagventi.webp'); background-size: cover;}

div#services nav ol li ul li.visible.diagmulti {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/diagmulti.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remmagnitoly {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remmagnitoly.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remshtatnoy{background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remshtatnoy.webp'); background-size: cover;}
div#services nav ol li ul li.visible.remusilitel {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/remusilitel.webp'); background-size: cover;}
div#services nav ol li ul li.visible.bluetooth {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/bluetooth.webp'); background-size: cover;}
div#services nav ol li ul li.visible.ustmagni {background-image: linear-gradient(to bottom, var(--alpha-dark), transparent, transparent),
	url('/img/services/cars/ustmagni.webp'); background-size: cover;}

@media (min-width: 581px) {
	div#services nav ol li:first-child ul {
		background-image: url('/img/services/cars/background/diagnostika-avto.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(2) ul {
		background-image: url('/img/services/cars/background/avto-provodka.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(3) ul {
		background-image: url('/img/services/cars/background/auto-control.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(4) ul {
		background-image: url('/img/services/cars/background/car-security.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(5) ul {
		background-image: url('/img/services/cars/background/vehicle-Indicators.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(6) ul {
		background-image: url('/img/services/cars/background/control-module.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(7) ul {
		background-image: url('/img/services/cars/background/steering-wheel.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(8) ul {
		background-image: url('/img/services/cars/background/parking.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(9) ul {
		background-image: url('/img/services/cars/background/auto-lighting.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:nth-child(10) ul {
		background-image: url('/img/services/cars/background/hvac.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
	div#services nav ol li:last-child ul {
		background-image: url('/img/services/cars/background/multimedia.webp');
		background-repeat: no-repeat; background-size: 66.666%; background-position: right bottom;
	}
}

/* LOADER */
@keyframes loader { from { transform: rotate(0deg);} to {transform: rotate(360deg);}}
div#services nav ol li ul li.lazy div {width: 50px; height:50px; position: absolute; z-index: 6; top: calc(50% - 25px); left:calc(50% - 25px);
	border-radius:20%; border-top: 1px solid var(--white); border-bottom: 1px solid var(--white); animation: .2s linear 0s infinite alternate loader;}
div#services nav ol li ul li.visible.lazy div {display:none;}

/* FORM */

div#modal-wrapper textarea {width:100%; margin-top:15px; min-height:60px; font-size: 15px; padding-left: 15px; padding-top:15px; 
	border-radius: 6px; font-family: 'Arial'; resize: vertical; max-height:calc(100vh - 230px);}
div#modal-wrapper textarea::placeholder {font-size: 15px;}
div#modal-wrapper input.invalid::placeholder {color:var(--white);}
div#modal-wrapper textarea, div#modal-wrapper input {transition:background .3s linear;}
div#modal-wrapper textarea.invalid, div#modal-wrapper input.invalid {background:var(--red); color:var(--white);}
div#modal-wrapper textarea.valid, div#modal-wrapper input.valid {background:var(--dark-blue3); color:var(--white);}

/* CONTENT */

@media (max-width: 259px) {body {display:none;}}
@media (min-width: 260px) and (max-width: 439px) {
	div#services nav ol li ul li div {display:none;}
	section#service_content h1 {width:calc(100% - 80px); font-size: 20px; text-align:center; color:var(--dark-blue3); padding:15px 40px; line-height: 28px;}
	div#description, div#diagnostics {width: 100%; padding: 12px; margin 12px;}
	div#diagnostics h2 {color:var(--dark-blue3); font-size: 16px; width: calc(100% - 30px); text-align:center; margin-bottom:10px; margin-top:10px; line-height: 26px;}
	div#description p, div#diagnostics p {width: calc(100% - 30px); font-size: 14px;line-height: 21px; margin-bottom: 7px; color:var(--black2); text-align: justify;}
	div#diagnostics button {width: 180px; height:35px; border-radius: 8px; margin-left: calc(50% - 100px); cursor:pointer; font-size: 16px;
		border: 1px solid var(--white); background: var(--dark-blue3); color:var(--white); transition: background .2s linear; margin-bottom:10px;  margin-top:10px; }
	div#diagnostics button:hover {background: var(--red);}
	
	div#services nav {width:100%; background:var(--white3); margin-bottom:35px;}
	div#services nav h3 {color:var(--dark-blue3); width:calc(100% - 40px); font-size: 16px; line-height: 28px; margin-top:25px; margin-bottom:10px; margin-left:15px;
	border-top: 1px solid var(--dark-blue3); padding-top:10px;}
	div#services nav p {width: calc(100% - 30px); color:var(--black2); font-size: 14px; line-height: 21px; padding-left:15px; margin-bottom:12px;}
	
	section#service_content div#services nav ol li button.show-more { margin-bottom: 10px;margin-top: 10px; margin-right: 20px; float: right; width: 180px;
    	border: none;padding: 5px;font-size: 15px;background: var(--dark-blue3);color: var(--white);border-radius: 8px; transition:background .3s linear;}
	section#service_content div#services nav ol li button.show-more:hover {background: var(--blue); cursor:pointer;}
	
	section#service_content div#services nav ol li ul { max-height:0; overflow:hidden; transition:max-height .35s linear;
		user-select:none;width:100%; display: flex; flex-wrap:wrap; background-size: 98%;}
	div#services nav ol li ul li h4 br, div#services nav ol li ul li span {display:none;}
	
	section#service_content div#services nav ol li ul.open {max-height:2000px;}
	
	div#services nav ol li ul li {width:calc(100% - 20px); height:100px; overflow:hidden; position:relative; margin:5px 10px; border-radius:6px;}
	
	section#service_content div#services nav ol li ul li.visible {background-repeat: no-repeat; background-position: center center;}
	div#services nav ol li ul li h4 {color:var(--white);font-size: 16px; line-height: 24px; display:block;
		margin-top:12px; padding-left:25px; padding-right:25px; position:relative;z-index: 5; max-width:100%;
		background:linear-gradient(90deg, rgba(141,51,69,.9) 0%, rgba(36,50,95,.6) 40%, transparent 80%, transparent 100%);
	}
	div#services nav ol li ul li h4 br, div#services nav ol li ul li span {display:none;}
	div#services nav ol li ul li a {position:absolute; display:block; bottom:5px; right:0px; font-size: 14px; line-height: 20px;
		width:125px; height:20px; background:var(--red); text-align:center; color:var(--white); transition: none; border-radius:6px 0 0 6px;}
}
@media (min-width: 440px) and (max-width: 679px) {
	div#services nav ol li ul li div {display:none;}
	section#service_content h1 {width:100%; font-size: 18px; text-align:center; color:var(--dark-blue3); padding-top:25px; padding-bottom:10px;}
	div#description, div#diagnostics {width: 100%; padding: 12px; margin 12px;}
	div#diagnostics h2 {color:var(--dark-blue3); font-size: 18px; width: calc(100% - 30px); text-align:center; margin-bottom:10px; margin-top:10px;}
	div#description p, div#diagnostics p {width: calc(100% - 30px); font-size: 14px;line-height: 21px; margin-bottom: 7px; color:var(--black2); text-align: justify;}
	div#diagnostics button {width: 250px; height:40px; border-radius: 8px; margin-left: calc(50% - 135px); cursor:pointer; font-size: 16px;
		border: 1px solid var(--white); background: var(--dark-blue3); color:var(--white); transition: background .2s linear; margin-bottom:10px;  margin-top:10px; }
	div#diagnostics button:hover {background: var(--red);}
	
	div#services nav {width:100%; background:var(--white3); margin-bottom:35px;}
	div#services nav h3 {color:var(--dark-blue3); width:calc(100% - 30px); font-size: 18px; line-height: 28px; margin-top:25px; margin-bottom:10px; margin-left:15px;
	border-top: 1px solid var(--dark-blue3); padding-top:10px;}
	div#services nav p {color:var(--black2); font-size: 14px; line-height: 21px; padding-left:15px; margin-bottom:12px;}
	section#service_content div#services nav ol li button.show-more { margin-bottom: 10px;margin-top: 10px; margin-right: 40px; float: right; width: 180px;
    	border: none;padding: 5px;font-size: 15px;background: var(--dark-blue3);color: var(--white);border-radius: 8px; transition:background .3s linear;}
	section#service_content div#services nav ol li button.show-more:hover {background: var(--blue); cursor:pointer;}
	section#service_content div#services nav ol li ul { max-height:0; overflow:hidden; transition:max-height .35s linear;
		user-select:none;width:100%; display: flex; flex-wrap:wrap; background-size: 98%;}
	div#services nav ol li ul li h4 br, div#services nav ol li ul li span {display:none;}
}
@media (min-width: 440px) and (max-width: 580px) {
	section#service_content div#services nav ol li ul.open {max-height:2000px;}
	div#services nav ol li ul li {width:calc(100% - 20px); height:100px; overflow:hidden; position:relative; margin:5px 10px; border-radius:6px; }
	section#service_content div#services nav ol li ul li.visible {background-repeat: no-repeat; background-position: center center;}
	div#services nav ol li ul li h4 {color:var(--white);font-size: 16px; line-height: 24px; display:block;
		margin-top:12px; padding-left:25px; padding-right:25px; position:relative;z-index: 5; max-width:100%;
		background:linear-gradient(90deg, rgba(141,51,69,.9) 0%, rgba(36,50,95,.6) 40%, transparent 80%, transparent 100%);
	}
	div#services nav ol li ul li h4 br, div#services nav ol li ul li span {display:none;}
	div#services nav ol li ul li a {position:absolute; display:block; bottom:5px; right:0px; font-size: 14px; line-height: 20px;
		width:125px; height:20px; background:var(--red); text-align:center; color:var(--white); transition: none; border-radius:6px 0 0 6px;}
}
@media (min-width: 581px) and (max-width: 679px) {
	section#service_content div#services nav ol li ul.open {max-height:2000px;}
	div#services nav ol li ul li {width:50%; height:30vw; overflow:hidden; position:relative;}
	div#services nav ol li ul li h4 {color:var(--white); font-size: 16px; line-height: 24px; width: 90%; padding-top:25px; padding-left:25px; position:relative;z-index: 5;}
	div#services nav ol li ul li a {position:absolute; display:block; bottom:0px; right:0px; font-size: 14px; line-height: 28px;
		border-top:1px solid var(--white); width:125px; height:30px; background:var(--red); text-align:center; color:var(--white);
		transition: none; border-radius: 6px 0 0 0;}
}
@media (min-width: 680px) and (max-width: 1023px) {
	div#services nav ol li ul li div, section#service_content div#services nav ol li button.show-more {display:none;}
	section#service_content h1 {width:100%; font-size: 24px; text-align:center; color:var(--dark-blue3); padding-top:20px; padding-bottom:20px;}
	div#description, div#diagnostics {width: 100%; padding: 15px; margin 15px;}
	div#diagnostics h2 {color:var(--dark-blue3); font-size: 24px; width: calc(100% - 30px); text-align:center; margin-bottom:10px; margin-top:20px;}
	div#description p, div#diagnostics p {width: calc(100% - 30px); font-size: 14px;line-height: 21px; margin-bottom: 7px; color:var(--black2); text-align: justify;}
	div#diagnostics button {width: 250px; height:40px; border-radius: 8px; margin-left: calc(50% - 125px); cursor:pointer; font-size: 16px;
		border: 1px solid var(--white); background: var(--dark-blue3); color:var(--white); transition: background .2s linear; margin-bottom:10px;  margin-top:10px; }
	div#diagnostics button:hover {background: var(--red);}
	div#services nav {width:100%; background:var(--white3);}
	div#services nav h3 {color:var(--dark-blue3); width:calc(100% - 30px); font-size: 18px; line-height: 28px; margin-top:25px; margin-bottom:10px; margin-left:15px;
	border-bottom: 1px solid var(--dark-blue3); padding-bottom:10px;}
	div#services nav p {color:var(--black2); font-size: 14px; line-height: 21px; padding-left:15px; margin-bottom:12px;}
	section#service_content div#services nav ol li ul {background-color:var(--black2); user-select:none;width:100%; display: flex; flex-wrap:wrap; background-size: 98%;}
	div#services nav ol li ul li {width:50%; height:30vw; overflow:hidden; position:relative;}
	div#services nav ol li ul li h4 {color:var(--white); font-size: 16px; line-height: 24px; width: 90%; padding-top:25px; padding-left:25px; position:relative;z-index: 5;}
	div#services nav ol li ul li h4 br {display:none;}
	div#services nav ol li ul li span {width:calc(100% - 50px); height:160px; font-size: 12px; line-height: 18px; transition:bottom .25s ease-in-out;
		display:block; position:absolute; color:var(--white); user-select:none; padding-left:25px;padding-right:25px;padding-top:130px;
		background:linear-gradient(0deg, var(--black) 0%, var(--alpha-dark) 60%, transparent 100%); bottom:-160px;}
	div#services nav ol li ul li a {position:absolute; display:block; bottom:0px; right:-130px; font-size: 14px; line-height: 28px;
		border-top:1px solid var(--white); width:125px; height:30px; background:var(--red); text-align:center; color:var(--white);
		transition: right .25s ease-in-out; border-radius: 6px 0 0 0;}
	div#services nav ol li ul li a:hover {background:var(--orange);}
	div#services nav ol li ul li:hover span {bottom:-15px;}
	div#services nav ol li ul li:hover a {right:0px;}
}
@media (min-width: 1024px) and (max-width: 1279px) {
	div#service_frame { width: calc(100% + 80px);}
	section#service_content div#services nav ol li button.show-more {display:none;}
	main#main_content:has(aside#main_ui nav#service_left-menu.show) div#services {padding-left:calc(50% - 465px);}
	div#service_background {background-image: linear-gradient(to top, var(--white), transparent), url('/img/background/services-background.webp');
		background-repeat: no-repeat; background-size: cover; background-position: center top; filter: blur(4px);
		width:100%; min-height:540px; position: absolute; top:0; z-index: -1;}
	section#service_content h1 {width: calc(100% + 80px); font-size: 30px; text-align:center; color:var(--dark-blue3); background: rgba(255,255,255,.9);
		padding-top:30px; padding-bottom:30px; margin-bottom:30px; }
	div#services {max-width:930px; display: flex; flex-wrap:wrap; padding-left:calc(50% - 465px); transition:padding-left .6s ease-in-out;}
	div.border {border: 1px solid var(--white); padding:12px; min-height:330px;}
	div#description, div#diagnostics {width: calc(50% - 30px); height: 355px;padding: 15px; margin 15px;}
	div#description {background:rgba(36,50,95,.9);}
	div#diagnostics {background:rgba(141,51,69,.9);}
	div#diagnostics button {width: 250px; height:40px; border-radius: 8px; margin-left: calc(50% - 125px); cursor:pointer; font-size: 18px;
		margin-top:40px; border: 1px solid var(--white); background: transparent; color:var(--white); transition: background .2s linear;}
	div#diagnostics button:hover {background: var(--red);}
	div#diagnostics h2 {color:var(--white); font-size: 20px; width: 100%; text-align:center; margin-bottom:20px; margin-top:50px;}
	div#description p, div#diagnostics p {font-size: 14px;line-height: 21px; margin-bottom: 7px; color:var(--white); text-align: justify; text-shadow: 0 0 1px var(--black2);}
	div#description p:last-child {margin-bottom: 0px;}
	div#services nav {width: calc(100% - 2px); margin-left:1px; background:var(--white3); box-shadow: 0 0 2px var(--black2); margin-bottom:35px;}
	div#services nav h3 {color:var(--dark-blue3); font-size: 24px; line-height: 34px; margin-top:25px; margin-bottom:15px; padding-left:20px;}
	div#services nav p {color:var(--black2); font-size: 15px; line-height: 21px; padding-left:20px; margin-bottom:12px;}
	div#services nav ol li ul {background-color:var(--black2); user-select:none;width:100%; display: flex; flex-wrap:wrap;}
	div#services nav ol li ul li {width:33.333%; height:190px; overflow:hidden; position:relative;}
	div#services nav ol li ul li h4 {color:var(--white); font-size: 15px; line-height: 18px; width: 75%; padding-top:15px; padding-left:25px; position:relative;z-index: 5;}
	div#services nav ol li ul li span {width:calc(100% - 30px); height:120px; font-size: 12px; line-height: 15px; transition:bottom .25s ease-in-out;
		display:block; position:absolute; color:var(--white); user-select:none; padding-left:15px;padding-right:15px;padding-top:80px;
		background:linear-gradient(0deg, var(--black) 0%, var(--alpha-dark) 60%, transparent 100%); bottom:-160px;}
	div#services nav ol li ul li a {position:absolute; display:block; bottom:0px; right:-130px; font-size: 12px; line-height: 24px;
		border-top:1px solid var(--white); width:125px; height:24px; background:var(--red); text-align:center; color:var(--white);
		transition: right .25s ease-in-out; border-radius: 6px 0 0 0;}
	div#services nav ol li ul li a:hover {background:var(--orange);}
	div#services nav ol li ul li:hover span {bottom:0px;}
	div#services nav ol li ul li:hover a {right:0px;}
	
}
@media (min-width: 1280px) {
	section#service_content div#services nav ol li button.show-more {display:none;}
	div#service_background {background-image: linear-gradient(to top, var(--white), transparent), url('/img/background/services-background.webp');
		background-repeat: no-repeat; background-size: cover; background-position: center top; filter: blur(4px);
		width:100%; min-height:540px; position: absolute; top:0; z-index: -1;}
	section#service_content h1 {width: calc(100% + 80px); font-size: 36px; text-align:center; color:var(--dark-blue3); background: rgba(255,255,255,.9);
		padding-top:30px; padding-bottom:30px; margin-bottom:30px;}
	div#services {max-width:1200px; margin-left:calc(50% - 600px); display: flex; flex-wrap:wrap;}
	div.border {border: 1px solid var(--white); padding:18px; min-height:270px; border-radius: 8px;}
	div#description, div#diagnostics {width: calc(50% - 50px); height: 330px;padding: 25px; margin 25px;}
	div#description {background:rgba(36,50,95,.9); border-radius: 16px 0 0 0;}
	div#diagnostics {background:rgba(141,51,69,.9); border-radius: 0 16px 0 0;}
	div#diagnostics button {width: 250px; height:40px; border-radius: 8px; margin-left: calc(50% - 125px); cursor:pointer; font-size: 18px;
		margin-top:40px; border: 1px solid var(--white); background: transparent; color:var(--white); transition: background .2s linear;}
	div#diagnostics button:hover {background: var(--red);}
	div#diagnostics h2 {color:var(--white); font-size: 28px; width: 100%; text-align:center; margin-bottom:20px;}
	div#description p, div#diagnostics p {font-size: 15px;line-height: 21px; margin-bottom: 10px; color:var(--white); text-align: justify; text-shadow: 0 0 1px var(--black2);}
	div#description p:last-child {margin-bottom: 0px;}
	div#services nav {width: calc(100% - 2px); margin-left:1px; background:var(--white3); box-shadow: 0 0 2px var(--black2); margin-bottom:45px;}
	div#services nav h3 {color:var(--dark-blue3); font-size: 24px; line-height: 34px; margin-top:45px; margin-bottom:15px; padding-left:25px;}
	div#services nav p {color:var(--black2); font-size: 16px; line-height: 24px; padding-left:25px; margin-bottom:15px;}
	div#services nav ol li ul {background-color:var(--black2); user-select:none;width:100%; display: flex; flex-wrap:wrap;}
	div#services nav ol li ul li {width:33.333%; height:250px; overflow:hidden; position:relative;}
	div#services nav ol li ul li h4 {color:var(--white); font-size: 18px; line-height: 24px; width: 75%; padding-top:25px; padding-left:25px; position:relative;z-index: 5;}
	div#services nav ol li ul li span {width:calc(100% - 50px); height:160px; font-size: 15px; line-height: 18px; transition:bottom .25s ease-in-out;
		display:block; position:absolute; color:var(--white); user-select:none; padding-left:25px;padding-right:25px;padding-top:60px;
		background:linear-gradient(0deg, var(--black) 0%, var(--alpha-dark) 60%, transparent 100%); bottom:-160px;}
	div#services nav ol li ul li a {position:absolute; display:block; bottom:0px; right:-130px; font-size: 14px; line-height: 28px;
		border-top:1px solid var(--white); width:125px; height:30px; background:var(--red); text-align:center; color:var(--white);
		transition: right .25s ease-in-out; border-radius: 6px 0 0 0;}
	div#services nav ol li ul li a:hover {background:var(--orange);}
	div#services nav ol li ul li:hover span {bottom:0px;}
	div#services nav ol li ul li:hover a {right:0px;}
}