body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color:#fff;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #fff;
}

#navbar a {
  float: left;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #0c51b9;
  color: white;
}

.content {
background-color:#000;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}


#logo {
	width:auto;
	height:auto;
	background-color:#FFF;
}

#footer {
	width:1322px;
	height:315px;
	float:left;
}

#footcars {
	width:200px;
	height:250px;
	float:left;
	padding-left:10px;
	font-size:13px;
}

#footinsurance {
	width:200px;
	height:450px;
	float:left;
	padding-left:10px;
	font-size:13px;
}

#footcustomer {
	width:200px;
	height:450px;
	float:left;
	padding-left:10px;
	font-size:13px;
}

#footcareers {
	width:200px;
	height:450px;
	float:left;
	padding-left:10px;
	font-size:13px;
}

#fbpage{
	width:200px;
	height:450px;
	float:left;
	padding-left:10px;
	font-size:13px;
}

#footermain {
	width:1312px;
	height:50px;
	float:left;
	padding-left:10px;
}

#footprivacy {
	width:641px;
	height:50px;
	float:left;
	padding-left:10px;
	font-size:13px;
}

#footcopyright {
	width:661px;
	height:50px;
	float:left;
	font-size:13px;
}

a{
	color:inherit;
	text-decoration:none;
}

a:hover {
    color:#00A0C6; 
    text-decoration:none; 
    cursor:pointer;  
}



#video {
	width:auto;
	height:762px;
	background-color:#000;
	float:left;
}


#availcolors {
  width: 1322px;
  height: auto;
  float: left;
  color: #0c51b9;
  padding-top: 10px;
}

#color {
	width:1322px;
	height:500px;
	float:left;
	padding-top:20px;
	color:black;
    
}

.wrapper {
  display:flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.wrappercontainer {
  display: flex;
  height: 400px;
  
}

.card{
  width: 80px;
  border-radius: 0.75rem;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
  margin: 0 5px;
  display: flex;
  align-items: flex-end;
  transition: 0.6s cubic-bezier(0.28, -0.03, 0, 99);
  box-shadow: 0px 10px 30px -5px rgba(0,0,0,0.8); 
  background-color: #fdaf00;
}

.card > .row {
  color: #0c51b9;
  display: flex;
  flex-wrap: wrap;
}

.card > .row > .icon {
  background: #223;
  color:white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
}

.card > .row > .description{
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  height: 80px;
  width: 520px;
  opacity: 0;
  transform: translateY(30px);
  transition-delay: 0.2s;
  transition: all 0.3s ease;
}

.description p {
  color: #b0b0ba;
  padding-top: 5px;
}

.description h4 {
  text-transform: uppercase;
}

input{
  display: none;
}

input:checked + label {
  width: 600px;
}

input:checked + label .description{
  opacity: 1 !important;
  transform: translateY(0)!important;
}

.card[for="c1"]{
    background-image: url("img/color/AquaticAzure.webp")
}

.card[for="c2"]{
    background-image: url("img/color/CrimsonRed.webp")
}

.card[for="c3"]{
    background-image: url("img/color/ElectricBlue.webp")
}

.card[for="c4"]{
    background-image: url("img/color/InfinityBlanc.webp")
}

.card[for="c5"]{
    background-image: url("img/color/IrisBerry.webp")
}

.card[for="c6"]{
    background-image: url("img/color/RosePink.webp")
}

.card[for="c7"]{
    background-image: url("img/color/SummerYellow.webp")
}

.card[for="c8"]{
    background-image: url("img/color/UrbanMint.webp")
}

.card[for="c9"]{
    background-image: url("img/color/ZenithGrey.webp")
}


#vf3small {
  width: 1222px;
  height: 683px;
  float: left;
  padding-top: 100px;
  padding-left: 100px;
  background-image: url("img/VF3small.jpg");
  color:white;
  line-height: 1.2;
}

#design {
  width: 1322px;
  height: auto;
  float: left;
  padding-top: 100px;
  color:white;
  line-height: 1.2;
  background-color: #275ed1;
}

#symbol {
  width: 452px;
  height: 491px;
  float: left;
  padding-top: 50px;
  padding-left: 870px;
  color:#275ed1;
  line-height: 1.2;
  background-image: url("img/vf3_1.png");
}

#advance {
  width: 1272px;
  height: 590px;
  float: left;
  padding-top: 50px;
  padding-left: 50px;
  color:#275ed1;
  line-height: 1.2;
  background-image: url("img/vf3_2.png");
}


#always {
  width: 1322px;
  height: 235px;
  float: left;
  padding-top: 300px;
  color:white;
  line-height: 1.2;
  background-image: url("img/vf3_3.png");
}

#specs {
  width: 622px;
  height: 653px;
  float: left;
  padding-top: 100px;
  padding-left: 700px;
  color:white;
  line-height: 1.2;
  background-image: url("img/specs.jpg");
}




#borderlogo {
	width:1322px;
	height:100px;
	background-color:#FFF;
	float:left;
}

#bordernav {
	width:1322px;
	height:48px;
	background-color:#FFF;
	float:left;
}

#container {
	width:1322px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
}