* {
  box-sizing: border-box;
}
html, body{
	margin: 0;
	scroll-behavior: smooth;
}
#suppOpen{
	background-image: url("../img/pic/astra_1.jpg");
}
#suppTicket{
	background-image: url("../img/pic/hyundai_1.jpeg");
}
#suppBug{
	background-image: url("../img/pic/yamaha_1.jpg");
}
@font-face{
	font-family: Orbitron-bold;
	src: url(font/Orbitron-Bold.ttf);
}
@font-face{
	font-family: Orbitron-black;
	src: url(font/Orbitron-Black.ttf);
}
@font-face{
	font-family: Orbitron-regular;
	src: url(font/Orbitron-Regular.ttf);
}
form a{
	color: #fff;
}
@media(min-width: 1199px){
	.hidePC{
		display: none;
	}
	.header{
		position: fixed;
		height: 130px;
		width: 100%;
		top: 0;
		left: 0;
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
		z-index: 10;
	}
	.logo{
		position: fixed;
		top: 0;
		left: 0;
		height: 130px;
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #00d;
		clip-path: polygon(
	        0% 0%, 
	        100% 0%, 
	        70% 100%, 
	        0% 100%
	    );
	    z-index: 12;
	}
	.logo img{
		margin-right: 20%;
		max-height: 110px;
		max-width: 90%;
	}
	.nav{
		width: 66%;
		padding-left: 0.5vw;
		height: 130px;
		position: fixed;
		top: 0;
	    left: 14%;
	    background-color: #d1e6ff;
	    z-index: 11;
	}
	.nav ul{
		list-style: none;
		display: flex;
		width: 80%;
		height: 100%;
		align-items: center;
		justify-content: space-around;
		margin: auto;
	}
	.nav ul li{
		display: block;
	}
	.nav ul li a, .nav ul li{
		font-family: Orbitron-bold;
		color: #00d;
		font-size: 22px;
		text-decoration: none;
		transition: 0.3s;
	}
	.nav ul li a:hover{
		color: #f00;
	}
	.platform{
		width: 20%;
		height: 130px;
		position: fixed;
		top: 0;
    left: 80%;
    background-color: #d1e6ff;
    z-index: 11;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
	}
	.platform input{
		width: 38%;
		min-width: 115px;
		margin: 1% 4%;
		font-family: Orbitron-black;
		font-size: 18px;
		height: 45px;
		border-radius: 23px;
		transition: 0.3s;
	}
	.access{
		border: 3px solid #fff;
		background-color: #00d;
		color: #fff;
	}
	.register{
		border: 3px solid #00d;
		background-color: #fff;
		color: #00d;
	}
	.access:hover, .register:hover{
		border: 3px solid #f00;
	}
	.noBackground, .blueBackground, .picture{
	  scroll-margin-top: 140px;
	}
	.container{
		padding-top: 200px;
		margin: 0;
		width: 100%;
		background: linear-gradient(#f7f9fc, #efeffb);
	}
	h1, h2, h3{
		font-family: Orbitron-bold;
		text-align: center;
	}
	h1{
		width: 85%;
		margin: 8px auto 5px auto;
		font-size: 38px;
		color: #000;
		text-decoration: underline;
	}
	.picture{
		width: 90%;
		display: grid;
		margin: auto;
	}
	.picture img{
		grid-area: 1/1;
		border-radius: 50px;
		box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.71);
	}
	#pic1{
		width: 70%;
		z-index: 2;
		grid-column: 1;
    	grid-row: 1;
	}
	#pic2{
		width: 70%;
	 	justify-self: end;
	    align-self: end;
	    transform: translateY(25%);
		z-index: 1;
		margin-bottom: 10%
	}
	.blueBackground, .noBackground{
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.blueBackground{
		background-color: #00d;
	}
	.blueBackground h3{
		font-size: 32px;
		color: #fff;
	}
	.containerFlex{
		width: 75%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
	}
	.blueBackground p{
		width: 50%;
		color: #fff;
		font-size: 23px;
		margin: auto;
		font-family: sans-serif;
		text-align: justify;
		line-height: 1.2em;
	}
	.blueBackground img{
		width: 38%;
		margin: 2%;
		border-radius: 15px;
		box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.71);
	}
	.noBackground h3{
		font-size: 32px;
		color: #00d;
	}
	.noBackground table{
		width: 80%;
		margin: auto;
		border-collapse: collapse;
		margin-bottom: 20px;
	}
	.noBackground table tr{
		border-bottom: 2px solid #000;
	}
	.noBackground th{
		text-align: left;
		color: #00d;
		font-family: Orbitron-regular;
		font-size: 22px;
	}
	#date{
		width: 20%;
	}
	#docs{
		width: 65%;
	}
	#dl{
		width: 15%;
		text-align: center;
	}
	.noBackground td{
		color: #000;
		font-size: 20px;
	}
	table img{
		height: 1.1em;
		display: block;
		margin: auto;
	}
	.containerButton{
		margin: auto;
		display: flex;
		width: 90%;
		justify-content: center;
		align-items: center;
	}
	#bpCar, #bpStorage{
		font-family: Orbitron-bold;
		font-size: 20px;
		background-color: #d1e6ff;
		border-radius: 5px;
		border: 0;
		margin: 10px;
		padding: 5px 10px;
		color: #00d;
		transition: 0.2s;
	}
	#bpStorage{
		color: #444;
		background-color: #c1d6ef;
	}
	.priceTable{
		background-color: #d1e6ff;
		width: 70%;
		margin: 10px auto;
		border-radius: 10px;
		border-collapse: collapse;
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
	}
	.priceTable th{
		text-align: center;
		color: #00d;
		font-family: Orbitron-regular;
		font-size: 20px;
		line-height: 	1.8;
	}
	.priceTable td{
		text-align: center;
		font-size: 20px;
		line-height: 	1.8;
	}
	.priceTable tr{
		border-bottom: 2px solid #000;
	}
	#priceStorage{
		display: none;
	}
	.containerSupport{
		display: flex;
		justify-content: space-around;
		width: 70%;
		margin: 10px auto;
	}
	.supportBlock{
		width: 30%;
		height: 200px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 20px;
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
		margin-top: 10px;
		transition: 0.2s;
		cursor: pointer;
	}
	.supportBlock:hover{
		margin-top: 0px;
	}
	.supportBlock div{
		width: 100%;
		height: 100%;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d1e6ff80;
	}
	h4{
		text-align: center;
		display: block;
		width: 75%;
		color: #00d;
		font-size: 26px;
		font-family: Orbitron-black;
	}
	#contactForm{
		width: 75%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	.containerInput{
		margin: 10px 0;
		text-align: center;
	}
	.medium{
		width: 45%;
	}
	.wide{
		width: 90%;
	}
	.containerInput input[type=text], .containerInput textarea{
		font-size: 20px;
		padding: 5px;
		border-radius: 5px;
		border: 0;
		width: 90%;
		margin: 5px;
	}
	.containerInput textarea{
		height: 8em;
	}
	.containerInput input[type=checkbox]{
		height: 22px;
		width: 22px;
	}
	.g-recaptcha{
		width: 300px;
		margin: auto;
	}
	.containerInput span{
		font-size: 22px;
		color: #fff;
		font-family: sans-serif;
	}
	.containerInput input[type=button]{
		min-width: 35%;
		background-color: #00d;
		border: 2px solid #fff;
		font-size: 22px;
		color: #fff;
		padding: 10px;
		border-radius: 10px;
	}
	#contactError{
		font-size: 20px;
		color: #f00;
	}
	#footer{
		background-color: #444;
		width: 100%;
		padding: 25px;
		margin: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#footer div{
		width: 35%;
		text-align: center;
		color: #fff;
		font-size: 16px;
		font-family: sans-serif;
		line-height: 1.8;
	}
	#footer a{
		color: #fff;
		font-family: sans-serif;
		text-decoration: underline;
	}
}
@media(max-width: 1199px){
	#menuIcon{
		position: fixed;
		z-index: 11;
		right: 25px;
		height: 30px;
		top: 35px;
	}
	.header{
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
		z-index: 10;
	}
	.logo{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		background-color: #00d;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
	}
	.logo img{
		max-height: 90%;
		max-width: 80%;
		display: block;
	}
	#hideMenu{
		position: fixed;
		width: 100%;
		top: 100px;
		left: 0;
		background-color: #d1e6ff;
		z-index: 10;
		height: 0;
		overflow: hidden;
		transition: 0.3s;
	}
	.hidePhone{
		display: none;
	}
	.nav ul{
		list-style: none;
		padding: 0;
		text-align: center;
	}
	.nav li{
		padding: 5px;
		margin: 10px;
		border-bottom: 2px solid #00d;
		font-family: Orbitron-bold;
		font-size: 22px;
	}
	.nav li a{
		color: #00d;
		text-decoration: none;
	}
	.platform{
		width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px auto;
	}
	.platform input{
		width: 41%;
		min-width: 115px;
		margin: 1% 4%;
		font-family: Orbitron-black;
		font-size: 18px;
		height: 45px;
		border-radius: 23px;
		transition: 0.3s;
	}
	.access{
		border: 3px solid #fff;
		background-color: #00d;
		color: #fff;
	}
	.register{
		border: 3px solid #00d;
		background-color: #fff;
		color: #00d;
	}
	.access:hover, .register:hover{
		border: 3px solid #f00;
	}

	.container{
		margin-top: 130px;
	}
	.noBackground, .blueBackground, .picture{
	  scroll-margin-top: 110px;
	}
	.picture{
		width: 90%;
		display: grid;
		margin: auto;
	}
	.picture img{
		grid-area: 1/1;
		border-radius: 10px;
		box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.71);
	}
	#pic1{
		width: 85%;
		z-index: 2;
		grid-column: 1;
    	grid-row: 1;
	}
	#pic2{
		width: 85%;
	 	justify-self: end;
    align-self: end;
    transform: translateY(25%);
		z-index: 1;
		margin-bottom: 10%
	}
	h1, h2, h3{
		font-family: Orbitron-bold;
		text-align: center;
	}
	h1{
		font-size: 20px;
		color: #000;
		text-decoration: underline;
		width: 85%;
		margin: 15px auto 5px auto;
	}
	.blueBackground, .noBackground{
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.blueBackground{
		background-color: #00d;
	}
	.blueBackground h3{
		font-size: 26px;
		color: #fff;
	}
	.containerFlex{
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.reverse{
		flex-direction: column-reverse;
		align-items: center;
	}
	.blueBackground p{
		width: 85%;
		color: #fff;
		font-size: 18px;
		margin: auto;
		font-family: sans-serif;
		text-align: center;
		line-height: 1.5;
	}
	.blueBackground img{
		width: 70%;
		margin: 20px auto;
		border-radius: 15px;
		box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.71);
	}
	.noBackground h3{
		font-size: 26px;
		color: #00d;
	}
	.noBackground table{
		width: 95%;
		margin: auto;
		border-collapse: collapse;
		margin-bottom: 20px;
	}
	.noBackground table tr{
		border-bottom: 2px solid #000;
	}
	.noBackground th{
		text-align: left;
		color: #00d;
		font-family: Orbitron-regular;
		font-size: 18px;
		padding: 5px;
	}
	#date{
		width: 30%;
	}
	#docs{
		width: 60%;
	}
	#dl{
		width: 10%;
		text-align: center;
	}
	.noBackground td{
		color: #000;
		font-size: 16px;
	}
	table img{
		height: 1.1em;
		display: block;
		margin: auto;
	}
	.containerButton{
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		width: 90%;
		justify-content: center;
		align-items: center;
	}
	#bpCar, #bpStorage{
		font-family: Orbitron-bold;
		font-size: 16px;
		background-color: #d1e6ff;
		border-radius: 5px;
		border: 0;
		margin: 10px;
		padding: 5px 10px;
		color: #00d;
		transition: 0.2s;
	}
	#bpStorage{
		color: #444;
		background-color: #c1d6ef;
	}
	.priceContainer{
		background-color: #d1e6ff;
		width: 90%;
		margin: 10px auto;
		border-radius: 10px;
		border-collapse: collapse;
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
	}
	.priceContainer table{
		width: 95%;
		margin: 10px auto;
		border-bottom: 2px solid #00d;
	}
	.priceContainer th{
		text-align: center;
		color: #00d;
		font-family: sans-serif;
		font-size: 16px;
		line-height: 	1.8;
	}
	.priceContainer td{
		text-align: center;
		font-size: 16px;
		line-height: 	1.8;
	}
	.priceContainer tr{
		border-bottom: 2px solid #000;
	}
	#priceStorageNar{
		display: none;
	}
	.containerSupport{
		display: flex;
		justify-content: space-around;
		width: 95%;
		margin: auto;
		flex-wrap: wrap;
	}
	.supportBlock{
		width: 75%;
		height: 200px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 20px;
		box-shadow: 0px 10px 23px -7px rgba(0,0,0,0.71);
		margin-bottom: 15px;
		transition: 0.2s;
		cursor: pointer;
	}
	.supportBlock div{
		width: 100%;
		height: 100%;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d1e6ff80;
	}
	h4{
		text-align: center;
		display: block;
		width: 75%;
		color: #00d;
		font-size: 20px;
		font-family: Orbitron-black;
	}
	#contactForm{
		width: 75%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	.containerInput{
		margin: 10px 0;
		text-align: center;
	}
	#contactForm{
		width: 95%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap: wrap;
	}
	.containerInput{
		margin: 10px 0;
		text-align: center;
	}
	.medium, .wide{
		width: 90%;
	}
	.containerInput input[type=text], .containerInput textarea{
		font-size: 16px;
		padding: 5px;
		border-radius: 5px;
		border: 0;
		width: 100%;
		margin: 5px;
	}
	.containerInput textarea{
		height: 8em;
	}
	.containerInput input[type=checkbox]{
		height: 18px;
		width: 18px;
	}
	.g-recaptcha{
		width: 300px;
		margin: auto;
	}
	.containerInput span{
		font-size: 18px;
		color: #fff;
		font-family: sans-serif;
	}
	.containerInput input[type=button]{
		min-width: 45%;
		background-color: #00d;
		border: 2px solid #fff;
		font-size: 18px;
		color: #fff;
		padding: 10px;
		border-radius: 10px;
	}
	#contactError{
		font-size: 20px;
		color: #f00;
	}
	#footer{
		background-color: #444;
		width: 100%;
		padding: 25px;
		margin: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	#footer div{
		width: 45%;
		text-align: center;
		color: #fff;
		font-size: 14px;
		font-family: sans-serif;
		line-height: 1.8;
	}
	#footer a{
		color: #fff;
		font-family: sans-serif;
		text-decoration: underline;
	}
}