:root {
    --red: #C81818;
    --white: #ffffff;
    --black: #000000;
  }
body{
padding: 2em;
}
caption{
    color: #ffffff;
}
#wrapper{
padding: 2em;
width: 850px;
}
/*General*/
h1, h2, h3, h4, p, a, dt,dd {font-family:Georgia, 'Times New Roman', Times, serif;}
h1{font-size: 1.5em;}
h2{font-size: 1.25em;}
h3{font-size:1em;}
p{font-size:1em;}
a{font-size:1em;color: var(--red)};
.threeColumn{column-count: 3;}

/*topbar*/
#TopBar{
    width: 850px;
}
.Logo{
width: 15em;
}
.Company{
text-align: left;
font-size: 3.5em;
font-family:Georgia, 'Times New Roman', Times, serif;
}
/*NavBar*/
#NavBar{
    width: 900px;
}
#NavBar a:hover {
    color: var(--red);
}
#NavBar a{
font-family:Georgia, 'Times New Roman', Times, serif;
text-decoration: none;
font-size: 2em;
color: var(--white);
width: 800px;
}
.flex-containerNav {
    display: flex;
    background-color: rgb(0, 0, 0);
  }
  
.flex-containerNav > div {
    margin: 1em;
 }
/*footer*/
footer{
    width: 900px;
}
/*jumper*/
.jumperContainer{
    position: relative;
}
.jumperOverlay{
        position: absolute;
        width: 15em;
        height: 15em;
        bottom: 3.69em;
        left: 0;
        z-index: 10;
        background-color: var(--black);
        padding-left: 1em;
        font-size: 1.25em;
        color: var(--white);
}
    
/*footer*/
footer{
font-size: 1em;
color:var(--white);
background-color: var(--black);
height: 2em;
padding: 1em;
}

/*homepagecards*/
.CarCards{
border-spacing: 0px!important; 
width: 100%;
}
.ImageCard{
width: 100%;
}
.CarName{
    color: var(--red);
}
.DataCard{
color: rgb(0, 0, 0);
vertical-align: text-top;
padding-left: 1em;
width: 12em;
}
.CardLogo{
width:10em
}

/*videos*/
.MedVidYouTube{
    width: 800px;
    height: 500px;
    }
.SmallVidYouTube{
float:left;
padding-right:2em;
transition: width 2s;
}
.SmallVidOther{
    float:left;
    padding-right:2em;
    width: 19em;
    transition: width 2s
}
.SmallVidYouTube:hover{
width: 25em;
height: 20em;
}
.SmallVidOther:hover{
width: 30em;
}
.SmallPic{
    float:left;
    padding-right:2em;
    width: 19em;
}

/* form styles */
#Contact{
font-family:Georgia, 'Times New Roman', Times, serif;
width: 60em;
margin-left: 5em;  
}
label{
font-size: 1.25em;
font-family:Georgia, 'Times New Roman', Times, serif;
}
input[type=text] {
    border: 1px solid var(--black);
    border-radius: 2em;
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .5em;
    font-family:Georgia, 'Times New Roman', Times, serif;
}
.SmithDate{
    border: 1px solid var(--black);
    border-radius: 2em;
    padding: .5em;
    font-family:Georgia, 'Times New Roman', Times, serif;
 }
input[type=submit] {
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 2em;
    padding:.25em 1em .25em 1em;
    background-color:var(--red);
    border: none;
    border-radius: 2em;
    color:var(--white);
    transition: width 2s;
    transition: height 2s;
}
input[type=submit]:hover {
width:170px;
height:60px;
}
select{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 1em;
    padding: .5em;
    border-radius: 2em;
}
textarea{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 1em;
    padding: .5em;
    border-radius: 4px;
}
input[type=radio] {
    font-family:Georgia, 'Times New Roman', Times, serif;
    height: 2em;
    width: 2em;
    border-radius: 50%;
}
input[type=radio]:after {
    content: "  ";
    display: inline-block;
    visibility: visible;

}
  
input[type=radio]:checked:after {
    content: "\2688";
    color: var(--white);
    text-align:center;
    background-color: var(--red);
    width: 2em;
    height: 2em;
    border-radius: 50%;
}  

input[type=checkbox] {
    width: 1.5em;
    height: 1.5em;
    margin-right: 8px;
    cursor: pointer;
    font-size: 1.5em;

  }
  
input[type=checkbox]:after {
    content: "  ";
    display: inline-block;
    visibility: visible;

}
  
input[type=checkbox]:checked:after {
    content: "\2714";
    color: var(--white);
    text-align:center;
    background-color: var(--red);
    width: 1.5em;
    height: 1.5em;
}  

.blogContainer{

}
.blogTitle{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 1.5em;
}
.blogDate{
    font-family:Georgia, 'Times New Roman', Times, serif;
    font-size: 1.25em;
    padding: 1em;
}
.blogImageRight img{
    float:right;
    padding-right:2em;
    width: 300px;
    padding: 10px;
}
.blogImageLeft img{
    float:left;
    padding-right:2em;
    width: 300px;
    padding: 10px;
}
.blogText{

}

@media only screen and (max-width: 600px) {
    /* For mobile phones: */
    #NavBar{
    Width: 500px;
    }
    #TopBar{
     Width: 500px;
    }
    footer{
    Width: 500px;
    }
    .Logo{
    width: 10em;
    }
    .Company{
    font-size: 3em;
    }
    #wrapper{
    width: 500px; 
    padding:1em   
    }
    #intro{
    width: 500px;
    }
    .jumperContainer img{
    width: 500px;
    }
    .jumperOverlay{
    visibility: hidden;
    }
    /*homepagecards*/
    .CarCards{
    width: 500px;
    }
    .ImageCard{
    width: 350px;
    }
    .DataCard{
    width: 150px;
    }
    .CardLogo{
    width: 80px;
    }
    .flex-containerNav {
        flex-direction: column;
    }
    .MedVidYouTube{
    width: 500px;
    height: 300px;
    }
  }
@media only screen and (min-width: 1600px) {
/* For Large Screens: */  
#NavBar{
    Width: 1600px;
    }
    #TopBar{
    Width: 1600px;
        }
    footer{
    Width: 1600px;
    
    }
/*General*/
h1{font-size: 2em;}
h2{font-size: 1.75em;}
h3{font-size:1.5em;}
p{font-size:1.5em;}
a{font-size:1.5em;}
dt{font-size: 1.5em;}

#wrapper{
    width: 1600px; 
    padding:1em   
    }
    #intro{
    width: 1550px;
    }
    .jumperContainer img{
    width: 1550px;
    }
    .jumperOverlay{
        width: 20em;
        height: 20em;
        bottom: 5em;
        left: 0;
    }
    .CarCards{
        width: 1550px;
        }
        .ImageCard{
        width: 1100px;
        }
        .DataCard{
        width: 350px;
        }
        .CardLogo{
        width: 160px;
        }
}