/*font family*/
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 900;
  src: url(/fonts/Avenir-Black-03.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 900;
  src: url(/fonts/Avenir-BlackOblique-04.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 800;
  src: url(/fonts/Avenir-Heavy-05.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 800;
  src: url(/fonts/Avenir-HeavyOblique-06.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 600;
  src: url(/fonts/Avenir-Medium-09.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 600;
  src: url(/fonts/Avenir-MediumOblique-10.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 500;
  src: url(/fonts/Avenir-Roman-12.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 500;
  src: url(/fonts/Avenir-Oblique-11.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Avenir-Book-01.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 400;
  src: url(/fonts/Avenir-BookOblique-02.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/Avenir-Light-07.ttf);
}
@font-face {
  font-family: 'Avenir';
  font-style: italic;
  font-weight: 300;
  src: url(/fonts/Avenir-LightOblique-08.ttf);
}


/* default variables */							
:root {
	--remtech-green : #0e2f3d;
	--remtech-grey : #707070;
	--remtech-blue : #2177b6;
	--cassiopeia-font-family-body: 'Avenir', sans-serif !important;
	--cassiopeia-font-family-headings: 'Avenir', sans-serif !important;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
}
/* font-sizes*/
html {font-size:min(1.5vh,1.5vw);}
h1, h2, h3, h4, h5, h6 {font-weight:900}
h1 {font-size:4.4rem}
h2 {font-size:3.1rem}
h3 {font-size:2.5rem}
h4 {font-size:1.9rem}
h5 {font-size:1.6rem}
h6 {font-size:1.25rem}
p {font-size:1.25rem;font-weight:400}
.tiny {font-size:0.94rem}
.smaller {font-size:1rem}
.small {font-size:1.1rem}
.regular {font-size:1.25rem}
.medium {font-size:1.9rem}
.large {font-size:2.5rem}
.larger {font-size:3.1rem}
.huge {font-size:4.4rem}
.light {font-weight:300}
.black {font-weight:900}
.roman {font-weight:500}
.strong {font-weight:600}
sub {bottom:0; font-size:0.5em}
#cf_1 h6, #cf_2 h6 {font-size:0.94rem}
#cf_1 p, #cf_2 p {font-size:0.94rem;font-weight:600}
.navbar a, .mod-languages a {font-size:1.1rem;font-weight:800;color:white;}
.mod-languages {display:flex;align-items:center;}
div.mod-languages li {padding:.5em 1em;}

/* branding */
.container-banner {
	margin:0;
}
.container-header {
	background-image: url("../images/Mask Group 10.png");
	margin:0;
}
.container-footer {
	/*background-image: url("../images/Mask Group 20.png");*/
	background:black;
	margin:0;
}
.brand-logo img {
	max-width: min(300px,100%);
	padding: 0 5%;
}
.container-nav {padding-right:10%}
.grid-child.brand .navbar-brand {max-width:max(25%,300px);min-width:200px;align-content:center;}
.container-header .mod-menu {flex-wrap:wrap}

.site-grid, .container-below-top.grid-child {display:block}
.container-component>*+* {margin:0}

/*topbar*/
.topbar {font-size: 0.94rem; color: var(--remtech-grey); padding: 10px 80px;display:flex;justify-content:space-between;}
.topbar b {font-size:0.94rem;font-weight:800;}
.topbar span {padding:0 1rem}
 
.remtech-grid46 {
	display:grid;
	grid-template-columns: [full-start] minmax(0, 1fr)[remtech-start] 40% 60% [remtech-end] minmax(0, 1fr)[full-end];
	grid-template-areas: ". remtech-left remtech-right ."
}
.remtech-grid64 {
	display:grid;
	height:37rem;
	grid-template-columns: [full-start] minmax(0, 1fr)[remtech-start] 60% 40% [remtech-end] minmax(0, 1fr)[full-end];
	grid-template-areas: ". remtech-left remtech-right ."
}
.banner-left4 {grid-area: remtech-left;padding-left:17.5%;display:flex;align-items:center;}
.banner-right6 {grid-area: remtech-right;padding-right:12.5%;display:flex;align-items:center;}
.banner-left6 {grid-area: remtech-left;padding-left:12.5%;display:flex;align-items:center;}
.banner-right4 {grid-area: remtech-right;padding-right:17.5%;display:flex;align-items:center;}
.bg-left .mod-custom {background-position: left top;}
.bg-right .mod-custom {background-position: right top;}
.bg-00 .mod-custom {background-position:0%}
.bg-10 .mod-custom {background-position:10%}
.bg-20 .mod-custom {background-position:20%}
.bg-30 .mod-custom {background-position:30%}
.bg-40 .mod-custom {background-position:40%}
.bg-50 .mod-custom {background-position:50%}
.bg-60 .mod-custom {background-position:60%}
.bg-70 .mod-custom {background-position:70%}
.bg-80 .mod-custom {background-position:80%}
.bg-90 .mod-custom {background-position:90%}
.bg-100 {background-position:100%}
.home-banner1 h1, .home-banner1 h2, .home-banner1 h4 {text-shadow: 5px 5px 10px #000000;}
.home-banner3 p {text-shadow: 5px 5px 10px #000000;}
.home-banner4 {padding-top:5.6rem; padding-bottom:5.6rem;}
.home-banner4.banner-right6 {display:block;}
.home-banner5 .banner-right6 {padding-top:5.6rem;padding-bottom:5.6rem;}
.home-banner5 .banner-left4 {padding-top:4.7rem;padding-bottom:4.7rem;padding-left:50%;}
.home-banner3.banner-left4 {min-width:37.5rem;}
.diagnostic-banner8.banner-left6 {padding: 5% 0% 5% 20%;background-image:linear-gradient(to right,rgba(0,0,0,1),rgba(0,0,0,0.7),rgba(0,0,0,0));}
.diagnostic-banner8.banner-left6 li {margin-top:0.75em;margin-bottom:0.75em;}
.diagnostic-banner8.banner-left6 h4, .diagnostic-banner8.banner-left6 li {text-shadow: 5px 5px 10px #000000;}
.event-article-banner4 p {margin-bottom:3rem;color: #4a4d4f;} 
.mod-custom {background-size:cover;background-position:center top;}
#cf_1, #cf_2 {background:transparent; margin:auto;max-width:600px,100%);}
#cf_1 input, #cf_1 textarea, #cf_2 input, #cf_2 textarea {background:transparent !important;color:white;}
#cf_1 ::placeholder, #cf_2 ::placeholder {color: white; opacity: 1;font-size:0.94rem;font-weight:600;}
#cf_1 button, #cf_2 button {border:1px solid white;font-size:0.94rem;font-weight:800;}

/*.support-banner1 #cf_1 .cf-form-wrap {background:rgba(255,255,255,0.69);color:#4A4D4F;}*/
.support-banner1 .convertforms {background:transparent; margin:0;max-width:min(100%,450px);}
.support-banner1 .convertforms input, .support-banner1 .convertforms textarea {background:rgba(255,255,255,0.69) !important;color:#4A4D4F;}
.support-banner1 .convertforms button {background:rgba(0,119,182,1) !important;border:1px solid transparent;color:white;font-size:0.94rem;font-weight:800;}
.support-banner1 .convertforms::placeholder {color: #4A4D4F; opacity: 1;font-size:0.94rem;font-weight:600; /* Firefox */}

.flex-0 {display:flex;align-items: stretch;flex-wrap:wrap;row-gap:20px;column-gap:20px}
.flex-2 { text-align: center; padding: 5%; flex: 45%; border: none;}
.flex-3 { text-align: center; padding: 0%; flex: 30%; border: none;}
.flex-4 { text-align: left; padding: 0%; flex: 23%; border: none;}
.flex-6 { text-align: center; padding: 1.5%; flex: 14%; border: none;}
.autel-adas-banner3 .flex-0 {column-gap: 0%; padding: 20px 0 0; justify-content: center;}
.autel-adas-banner3 .flex-6 {text-align: center; padding: 20px 1%;max-width:250px;}
.driving-level img {width:100%;max-width:250px;}
.autel-adas-banner3 .flex-2 {text-align: center; padding: 2%; color:white; border: 1px solid #707070;}
.autel-adas-banner3 .flex-2 h4 {color:white;font-size:1.3rem;}
h4.driving-level-no {color:#4A4D4F; margin-top:10px; margin-bottom:30px;}
.faqs {margin:4vh 15%;font-size:2vh;}
.faqs label {border:none; font-weight:500;}
.faqs section {border:none;}

@media screen and (max-width:1440px) {
	.flex-6 {flex:30%;min-width:30%;}
}
@media screen and (max-width:1024px) {
	.remtech-grid46, .remtech-grid64 {
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas: "remtech-left" "remtech-right"
	}
	.banner-left4 {grid-area: remtech-left;padding:5% !important;margin:auto;}
	.banner-right6 {grid-area: remtech-right;padding:5%}
	.banner-left6 {grid-area: remtech-left;padding:5%;}
	.banner-right4 {grid-area: remtech-right;padding:5%}
	.home-banner3.banner-left4 {min-width:0px}
	.home-banner5 .banner-right6, .home-banner5 .banner-left4 {padding:20px}
	.diagnostic-banner8.banner-left6 {padding: 5% 5% 5% 5%;}
	.topbar {flex-direction:column;}
	.topbar-social-media {margin:auto;text-align:center;display:none;}
	.topbar-contact {margin:auto;text-align:center;}
	.topbar span {display:none;}
	.topbar span.phone {display:block}
	nav.navbar {margin:0px !important;}
	.container-nav {flex-direction:row-reverse;}
	.grid-child.brand {mex-width:90%}
	.flex-2 {flex:90%;}
	.flex-3 {flex:30%;}
	.flex-4 {flex:45%;}
	.flex-6 {flex:30%;}
}
@media screen and (max-width:600px) {
	.flex-3 {flex:100%;}
	.flex-4 {flex:100%;}
	.flex-6 {flex:45%;}
}
@media screen and (max-width:400px) {
	.flex-6 {flex:90%;}
}
.container-bottom-a>* {padding:0px;margin:0px;border:none}
.card-body {padding:0px}
.bottom-b.card {
    padding: 4.3rem;
    color: white;
    background: transparent;
    border: none;
		margin:0px;
		padding-top:0px;
}
.bottom-b.card h5 {font-size:1.1rem}
.bottom-b.card h6 {line-height:1.8; text-transform:uppercase;}
.bottom-b.card h6 a{text-decoration:none;}
.footer .grid-child {padding: 7.5rem 0.5rem 2.5rem;}
.footer .grid-child.container-bottom-b {padding: 0 10%;align-items:normal;}
.com-users-login {width:min(56rem,100%);height:28rem;margin:4.3rem auto;padding:2.5rem; border:1px solid silver;display:flex;align-items:center;}
.com-users-login form {width:32rem;margin:auto;max-width:98%;}
.com-users-login fieldset {margin-bottom:0px;}
.com-users-login__options.list-group {display:flex;justify-content:space-between;flex-basis:max-content;flex-direction:row;margin-top:0;}
.com-users-login__options .list-group-item {border:none}
.com-users-login__options a.list-group-item {color:var(--remtech-blue);}
.btn-primary {background-color:var(--remtech-blue);font-size:1.6rem;text-transform:uppercase;}
.com-users-login input {font-size:1.2rem;font-weight:600; /* Firefox */}

.expert-articles {padding:4rem 7.5% 0;}
ul.mod-articlescategory {display:flex;column-gap:5%;}
ul.mod-articlescategory li {border:1px solid silver;padding:0;flex-basis:30%;flex-grow:1;}
.mod-articlescategory-image img {display:block;width:100%}
.mod-articlescategory-text {padding:2rem;}
ul.mod-articlescategory a {display:block;font-size:1.6rem;color:black;font-weight:900;}
ul.mod-articlescategory .mod-articles-category-readmore a {text-align:right; font-size:1.25rem;font-weight:400;}


/* FAQ styles */
.faqs {
	margin: 4.3rem 7.5%; /*Remtech custom margin*/
	transform: translateZ(0);
	font-size:2vh;
}

.faqs label span,
.faqs label p,
.faqs label h2,
.faqs label h3,
.faqs label h4,
.faqs label h5,
.faqs label h6 {
	margin: initial; 
	padding: 0 7.5%;
	line-height: 1.34;
	display: block;
	text-transform: none;
	margin-top: 2px;
	padding-right: 15px;
}

.faqs input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

.faqs label {
	margin: 5px 0;
	position: relative;
	display: block;
	color: var(--remtech-grey);
	padding: 6px 0 1rem 0;
	font-weight: 800;
	font-size:1.6rem;
	cursor: pointer;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	/*border: solid 2px #000;
	border-radius: 10px; no border */
}

.faqs label:hover {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	cursor: pointer;
}

.faq-container section {
	max-height: 0;
	transition: .3s all;
	overflow: hidden;
	padding: 0 7.5%;
	font-size:1.25rem;
	
}

#faq1:checked~label[for*='1']:after,
#faq2:checked~label[for*='2']:after,
#faq3:checked~label[for*='3']:after,
#faq4:checked~label[for*='4']:after,
#faq5:checked~label[for*='5']:after,
#faq6:checked~label[for*='6']:after,
#faq7:checked~label[for*='7']:after,
#faq8:checked~label[for*='8']:after,
#faq9:checked~label[for*='9']:after,
#faq10:checked~label[for*='10']:after,
#faq11:checked~label[for*='11']:after,
#faq12:checked~label[for*='12']:after,
#faq13:checked~label[for*='13']:after,
#faq14:checked~label[for*='14']:after,
#faq15:checked~label[for*='15']:after,
#faq16:checked~label[for*='16']:after,
#faq17:checked~label[for*='17']:after,
#faq18:checked~label[for*='18']:after,
#faq19:checked~label[for*='19']:after,
#faq20:checked~label[for*='20']:after,
#faq21:checked~label[for*='21']:after,
#faq22:checked~label[for*='22']:after,
#faq23:checked~label[for*='23']:after,
#faq24:checked~label[for*='24']:after,
#faq25:checked~label[for*='25']:after,
#faq26:checked~label[for*='26']:after,
#faq27:checked~label[for*='27']:after,
#faq28:checked~label[for*='28']:after,
#faq29:checked~label[for*='29']:after,
#faq30:checked~label[for*='30']:after,
#faq31:checked~label[for*='31']:after,
#faq32:checked~label[for*='32']:after {
	transform: rotate(-180deg);
}

#faq1:checked~#answ1,
#faq2:checked~#answ2,
#faq3:checked~#answ3,
#faq4:checked~#answ4,
#faq5:checked~#answ5,
#faq6:checked~#answ6,
#faq7:checked~#answ7,
#faq8:checked~#answ8,
#faq9:checked~#answ9,
#faq10:checked~#answ10,
#faq11:checked~#answ11,
#faq12:checked~#answ12,
#faq13:checked~#answ13,
#faq14:checked~#answ14,
#faq15:checked~#answ15,
#faq16:checked~#answ16,
#faq17:checked~#answ17,
#faq18:checked~#answ18,
#faq19:checked~#answ19,
#faq20:checked~#answ20,
#faq21:checked~#answ21,
#faq22:checked~#answ22,
#faq23:checked~#answ23,
#faq24:checked~#answ24,
#faq25:checked~#answ25,
#faq26:checked~#answ26,
#faq27:checked~#answ27,
#faq28:checked~#answ28,
#faq29:checked~#answ29,
#faq30:checked~#answ30,
#faq31:checked~#answ31,
#faq32:checked~#answ32 {
	max-height: 7000px;
/*	border: solid 2px #000; */
	margin-right: 0px;
	margin-top: -16px;
	padding-top: 1rem;
	padding-bottom: 1rem;
/*	border-radius: 0 0 10px 10px; */
}

.faqs label:after {
    content: '\f078'; 
    position: absolute;
    top: 6px;
    right: 20px;
    font-size: 18px;
    font-family: FontAwesome;
    transition: .3s transform;
}
div.faqs > div {
	border:1px solid var(--remtech-grey)
}
h2.faqs-title {margin: 4.3rem 7.5% 0;}
.faqs table {width:400px;max-width:100%;}
.faqs th, .faqs td {text-align:center;padding:0px 4px;border:1px solid var(--remtech-grey);}

/* article styles */
img.article-logo {width:130px;}
.blog-article {padding:4.3rem 7.5%}
.blog-article h2, .blog-article h3 {text-align:center;}
.blog-article p {font-size:1.25rem;font-weight:500;}
.article-image-container {padding-right:20%;}
.article-image-container ul.fields-container {list-style-type:none;}
.article-image-container ul.fields-container li {text-align:center}
.article-image-container ul.fields-container li img {border:none;}
.article-banner-2 {
	display:flex;align-items:center;justify-content:center;flex:0;
}
@media screen and (max-width:1440px) {
	.article-banner-2 {
		display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0;
	}
}
.area-container {
	display:grid;
	grid-template-columns:50% 50%;
	grid-template-areas:"image text";
}
@media screen and (max-width:600px) {
	.area-container {
		grid-template-columns:100%;
		grid-template-areas:"image" "text";
		grid-row-gap:4em;
	}
	.article-image-container {padding-right:0;}
}
.article-full-container {
	width:100%;
}
.article-image-container {
	grid-area:image;
}
.article-text-container {
	grid-area:text;
}

/* hide social buttons */
.topbar-social-media {display:none}
.footer-follow-us h6 {display:none}