/*** FONTS ***/
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@400;500;600;700;800;900&family=Chakra+Petch:wght@300;400;500;600;700&family=PT+Sans+Narrow:wght@400;700&display=swap');

/*** GENERAL STYLES ***/
html, body {
    overflow-x: hidden;
}

html {
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Chakra Petch', sans-serif;
    color: #0e0e0e;
}

a, p, small {
    color: #0e0e0e;
    font-family: 'Alumni Sans', sans-serif;
}

/*** HEADER ***/
header {
    position: fixed;
    z-index: 999;
    width: 100%;
    transition: all ease 2s;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

#static-header {
    opacity: 1;
}

header nav ul {
    display: flex;
    margin-right: 50px;
}

header a {
    color: #f4f4f4;
    font-size: 20px;
    text-decoration: none;
    border-bottom: transparent solid 0.5px;
    transition: all ease 0.1s;
}

header ul a:hover {
    border-bottom: #f4f4f4 solid 0.5px;
}

header img {
    width: 70px;
    height: auto;
    margin-left: 35px;
}

.show-header {
    opacity: 1;
}

header ul {
    list-style: none;
}

header ul li {
    margin: 0 20px;
}

/*** INDEX PAGE ***/

/* NEW mastehead */

.lightsOff
{
    min-height: 800px;
    max-height: 1500px;
    height: 140vh;
    width: 100%;
    background-image: url("../img/lights-off.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;  
}

.lightsOn
{
    min-height: 800px;
    max-height: 1500px;
    height: 140vh;
    width: 100%;
    background-image: url("../img/lights-on.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-end;  
    position: absolute;
    top: 0;
    opacity: 0;
}

.scrollLights
{
    position: relative;
    display: flex;
    justify-content: center;
}

.cloudContainer
{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 15vh;
}

.cloudContainer img
{
    position: absolute;
    z-index: 5;
    width: auto;
    bottom: 40vh;
}


.cloudContainer img:nth-child(1)
{
    /* border: green 5px solid; */
    animation: animateFogV1 25s infinite linear;
}

.cloudContainer img:nth-child(2)
{
    animation: animateFogV2 28s infinite linear;
}

.cloudContainer img:nth-child(3)
{
    /* border: orange 5px solid; */
    animation: animateFogV1 31s infinite linear;
    animation-delay: -9s;
}

.cloudContainer img:nth-child(4)
{
    /* border: red 5px solid; */
    animation: animateFogV2 34s infinite linear;
}

.cloudContainer img:nth-child(5)
{
    /* border: pink 5px solid; */
    animation: animateFogV1 37s infinite linear;
    animation-delay: -18s;
}

.cloudContainer img:nth-child(6)
{
    /* border: purple 5px solid; */
    animation: animateFogV2 40s infinite linear;
}

.cloudContainer img:nth-child(7)
{
    /* border: magenta 5px solid; */
    animation: animateFogV1 43s infinite linear;
    animation-delay: -30s;
}

.cloudContainer img:nth-child(8)
{
    /* border: white 5px solid; */
    animation: animateFogV2 46s infinite linear;
}

.cloudContainer img:nth-child(9)
{
    /* border: black 5px solid; */
    animation: animateFogV1 49s infinite linear;
    animation-delay: -44s;
}


@keyframes animateFogV1 {
    0% {
        height: 30vh;
        transform: translate(-60vw, 0vh) rotate(0deg);
        opacity: 0;
    }
    25% {
        opacity: 0.7;
        transform: translate(-30vw, -5vh) rotate(90deg);
    }
    50% {
        opacity: 1;
        transform: translate(0, 5vh) rotate(180deg);
    }
    75% {
        opacity: 0.7;
        transform: translate(30vw, -5vh) rotate(270deg);
    }
    100% {
        height: 90vh;
        transform: translate(60vw, 0) rotate(360deg);
        opacity: 0;
    }
}

@keyframes animateFogV2 {
    0% {
        height: 20vh;
        transform: translate(-70vw, 0) rotate(0deg);
        opacity: 0;
    }
    25% {
        opacity: 0.8;
        transform: translate(-35vw, -3vh) rotate(60deg);
    }
    50% {
        opacity: 1;
        transform: translate(0, 5vh) rotate(180deg);
    }
    75% {
        opacity: 0.8;
        transform: translate(35vw, -3vh) rotate(240deg);
    }
    100% {
        height: 100vh;
        transform: translate(70vw, 0) rotate(300deg);
        opacity: 0;
    }
}

.title
{
    color: white;
    font-size: 80px;
    font-weight: 300;
    font-style: normal;
    margin: 0 0 15px 0;
    padding: 0 30px;
    letter-spacing: 6px;;
   
}

.subtitle
{
    color: white;
    font-size: 27px;
    font-family: 'Alumni Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    margin: 0; 
}

.titleContainer
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: white;
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative;
    padding-bottom: 15vh;
}

/*** timeline ***/
.timeline {
    padding: 20px 30px 110px 30px;
    position: relative;
    /* source: https://getoutlines.com/blueprints/6614/2008-audi-r8-coupe-blueprints */
    /* source: https://drawingdatabase.com/audi-r8-v10-spyder-quattro-2019/ */
    background-image: url("../img/audi-drawings.jpg");
    background-size: cover;
    background-position: center;
}

.timeline-bar {
    position: absolute;
    display: block;
    width: 1px;
    height: 85%;
    background-color: #e1e1e1;
    left: 50%;
}

.timeline h2, .customize h2, .customize h3 {
    text-align: center;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: 7px;
    padding-top: 70px;
    margin-bottom: 120px;
    margin-right: 30px;
    margin-left: 30px;
}

.timeline h3 {
    font-size: 20px;
}

.timeline small {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
}

.timeline p {
    font-size: 18px;
    font-family: 'PT Sans Narrow', sans-serif;
    letter-spacing: 0.4px;
}

.timeline-container {
    max-width: 1200px;
    margin: auto;
}

.timeline-element {
    width: 50%;
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 70px;
}

.timeline-element div {
    background-color: #e1e1e1;
    padding: 10px 15px;
    margin-right: 90px;
}

.timeline-element img {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 50%;
    right: 0;
    margin-right: -100px;
    padding: 5px;
    background-color: #f1efee;
    border: #0e0e0e dotted 2px;
}

/* adjust generation images on right right side */
.timeline-right img {
    left: 0;
    margin-left: -190px;
}

.timeline-left {
    left: 0px;
    margin-left: -20px;
}

.timeline-right {
    right: -50%;
    margin-left: 110px;
}

.left-arrow {
    border-left: 17px solid #e1e1e1;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    position: absolute;
    top: 85px;
    right: 0;
    margin-right: 98.5px;
}

.right-arrow {
    border-right: 17px solid #e1e1e1;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    position: absolute;
    top: 85px;
    left: 0;
    margin-left: 8.5px;
}

.close-up-logo {
    height: 70vh;
    background-color: #1d1d1d;
    background-image: url("../img/close-up-audi-logo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 60%;
    background-position-x: center;
    background-attachment: fixed;
}

.customize {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*** interactive car customization ***/
.customize h2 {
    font-size: 40px;
    margin-bottom: 0px;
}

.customize h3 {
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 70px;
}

.customize-img {
    width: 500px;
    height: auto;
    margin: 0 30px 75px 30px;
}

.car-trim-btn-container {
    display: flex;
    margin-bottom: 70px;
}

.car-trim-btn {
    font-family: 'Alumni Sans', sans-serif;
    font-size: 25px;
    letter-spacing: 2px;
    cursor: pointer;
    margin: 0 20px;
    width: 110px;
    text-align: center;
    padding: 3px;
    color: #0e0e0e;
    transition: 0.5s ease all;
    border-bottom: solid 0.5px white;
}

.selected-btn {
    border: solid 0.5px #0e0e0e;
}

.unselected-btn:hover {
    border-bottom: solid 0.5px #0e0e0e;
}

.color-selector-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 100px;
}

.color-bar {
    background-image: linear-gradient(to right, white,black,white);
    width: 80%;
    max-width: 1500px;
    height: 3px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.color-option-container {
    display: inline-block;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 1px;
}

.color-option {
    display: block;
    height: 85%;
    width: 85%;
    cursor: pointer;
}

.selected {
    border: solid #0e0e0e 1px;
}

.color-option-container:nth-child(1) span {
    background-image: linear-gradient(to bottom right, black, #696969);
}

.color-option-container:nth-child(2) span {
    background-image: linear-gradient(to bottom right, #4b4b4b, #919191);
}

.color-option-container:nth-child(3) span {
    background-image: linear-gradient(to bottom right, #b0b0b0, #dedcdc);
}

.color-option-container:nth-child(4) span {
    background-image: linear-gradient(to bottom right, #ececec, #ffffff);
}

.color-option-container:nth-child(5) span {
    background-image: linear-gradient(to bottom right, #2e4580, #6275a8);
}

.color-option-container:nth-child(6) span {
    background-image: linear-gradient(to bottom right, #0233ff, #8098f6);
}

.color-option-container:nth-child(7) span {
    background-image: linear-gradient(to bottom right, #f5d502, #fcf38c);
}

.color-option-container:nth-child(8) span {
    background-image: linear-gradient(to bottom right, #a40000, #e16e6e);
}

.wheel-selector-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#color-choice, #wheel-choice {
    font-size: 17px;
}

#color-choice {
    margin-top: -70px;
}

.wheel-selector-container img {
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin: 35px 2px 10px 2px;
}

#wheel-choice {
    margin-bottom: 80px;
}

.buy-btn {
    font-family: 'Alumni Sans', sans-serif;
    font-size: 45px;
    letter-spacing: 3px;
    cursor: pointer;
    margin: 30px 0 120px 0;
    width: 200px;
    text-align: center;
    padding: 11px;
    color: #0e0e0e;
    transition: 0.5s ease all;
    border: solid 1px #0e0e0e;
    text-decoration: none;
}

.buy-btn:hover {
    background-color: #efefef;
}


/* wheel block */
.close-up-wheel {
    height: 70vh;
    background-color: #1d1d1d;
    background-image: url("../img/close-up-wheel.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* quattro */
.quattro {
    height: 100vh;
    max-height: 1000px;
    min-height: 800px;
    background-image: url("../img/winter-audi-logo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.quattro-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quattro-text h2 {
    margin-top: 0px;
    color: #f4f4f4;
    font-size: 95px;
    font-weight: 300;
    text-align: center;
    text-shadow: 0.5px 0.5px 0.5px #0e0e0e;
    letter-spacing: 5px;
}

.quattro-text h3 {
    margin-top: -10px;
    color: #0e0e0e;
    font-size: 25px;
    text-align: center;
    letter-spacing: 1px;
}

.quattro-text p {
    font-size: 23px;
    line-height: 29px;
    font-family: 'PT Sans Narrow', sans-serif;
    text-align: center;
    margin: 0 30px;
    letter-spacing: 1px;
}

.quattro-text small {
    margin-top: 50px;
    font-size: 16px;
}

/* snow animation */
.snow-container {
    height: 100%;
    max-height: 1000px;
    min-height: 800px;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.snowflake {
    width: 12px;
    height: 12px;
    display: inline-block;
    background-size: cover;
    animation: animate-snow 20s infinite linear;
}

@keyframes animate-snow {
    0%{
        opacity: 0.9;
        transform: translate(0, 0) rotateZ(0deg);
    }

    95%{
        opacity: 0.9;
    }


    100%{
        opacity: 0;
        transform: translate(0, 95vh) rotateZ(30deg);
    }
}

.snowflake:nth-child(5n+1) {
    background-image: url("../img/snowflake1.png");
}

.snowflake:nth-child(5n+2) {
    background-image: url("../img/snowflake2.png");
    animation-delay: -4s;
}

.snowflake:nth-child(5n+3) {
    background-image: url("../img/snowflake3.png");
    animation-delay: -6s;
}

.snowflake:nth-child(5n+4) {
    background-image: url("../img/snowflake4.png");
    animation-delay: -8s;
}

.snowflake:nth-child(5n) {
    background-image: url("../img/snowflake5.png");
    animation-delay: -14s;
}

.snowflake:nth-child(6n+2) {
    animation-delay: -4s;
}

.snowflake:nth-child(6n+3) {
    animation-delay: -6s;
}

.snowflake:nth-child(6n+4) {
    animation-delay: -8s;
}

.snowflake:nth-child(6n) {
    animation-delay: -14s;
}

/* specs */

.specs-details {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 160px 30px 100px 30px;
    position: relative;
    z-index: 1;
}

.specs-details h3 {
    font-size: 50px;
    font-weight: 300;
    text-align: center;
    margin: 30px 30px;
    letter-spacing: 3px;
}

.specs-details h3 span {
    font-weight: 600;
}

.specs-details small {
    margin-top: 50px;
    font-size: 16px;
}

/* test drive */
.video-bg {
    width: 100%;
    height: auto;
    position: relative;
    z-index: -999;
}

.book-test-drive {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.test-drive-btn {
    color: #f4f4f4;
    border: 1px solid #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 80px;
    text-align: center;
    font-size: 30px;
    letter-spacing: 2px;
    transition: 0.8s all ease;
    text-decoration: none;
    position: absolute;
    margin-top: 95px;
}

.test-drive-btn:hover {
    background-color: #f4f4f4;
    color: #0e0e0e;
}

.test-drive h2 {
    color: #f4f4f4;
    margin: 0 30px 170px 30px;
    font-size: 40px;
    position: absolute;
    letter-spacing: 2px;
    text-align: center;
}

/* inventory */
.inventory {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("../img/audi-brand.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 250px 30px 100px 30px;
}

.inventory h2 {
    font-size: 55px;
    font-weight: 300;
    margin-top: -100px;
    letter-spacing: 6px;
}

.inventory h3 {
    font-size: 30px;
    letter-spacing: 2px;
    margin: 20px 30px;
}

.plus {
    font-style: italic;
}

.inventory p {
    font-size: 23px;
    font-family: 'PT Sans Narrow', sans-serif;
    margin: 60px 30px 70px 30px;
    max-width: 900px;
    line-height: 29px;
    letter-spacing: 1px;
}

.inventory-btn-container, .product-btn-container {
    display: flex;
    justify-content: center;
}

.inventory-btn-container a, .product-btn-container a {
    font-family: 'Alumni Sans', sans-serif;
    font-size: 30px;
    letter-spacing: 3px;
    cursor: pointer;
    width: 300px;
    text-align: center;
    padding: 11px;
    color: #0e0e0e;
    transition: 0.5s ease all;
    border: solid 1px #0e0e0e;
    text-decoration: none;
    margin: 0 10px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inventory-btn-container a:nth-child(1), .product-btn-container a:nth-child(1) {
    background-color: white;
}


.inventory-btn-container a:nth-child(2), .product-btn-container a:nth-child(2) {
    font-size: 20px;
    background-color: #efefef;
}

.inventory-btn-container a:hover, .product-btn-container a:hover {
    background-color: #efefef;
}

.inventory-btn-container a:nth-child(2):hover, .product-btn-container a:nth-child(2):hover {
    font-size: 20px;
    background-color: #d2d2d2;
}

.product-btn-container {
    margin-bottom: 150px;
    margin-top: 40px;
}

/*** FOOTER ***/
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0e0e0e;
    border-top: 1px red solid;
    color: #f4f4f4;
    padding: 20px 0 0 0;
    border-top: solid #f4f4f4 0.5px;
}

footer > div:nth-child(1) {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

footer a, footer small {
    color: #f4f4f4;
    font-size: 18px;
    letter-spacing: 0.5px;
}

footer > div .action-menu li {
    margin-bottom: 18px;
}

footer > div > nav li {
    margin-bottom: 12px;
}

footer img {
    width: auto;
    height: 60px;
}

footer address {
    font-style: normal;
    font-family: 'Alumni Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;
}

.address-container {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 10px;
}

.address-container div {
    margin-bottom: 10px;
}

footer ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding-left: 0;
}

footer li {
    margin-bottom: 5px;
}


.copyright-container a, .copyright-container small {
    margin: 0 4px;
    color: black;
}

.copyright-container {
    background-color: #c7c7c7;
    width: 100%;
    text-align: center;
    padding: 5px 0;
}

footer i {
    margin-right: 8px;
}

.address-container div:nth-child(3) {
    display: flex;
}

/*** ABOUT AND CONTACT PAGES ***/
.secondary-masthead {
    background-color: #0e0e0e;
    width: 100%;
    height: 500px;
    margin-top: -30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 45px;
    background-image: url("../img/red-audi-r8.jpg");
    background-size: cover;
    background-position: center;
}

.about, .contact {
    background-image: url("../img/audi-spyder-and-coupe-faded.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.about h1, .contact h1 {
    color: #f4f4f4;
    font-size: 150px;
    letter-spacing: 10px;
}

.about-audi, .contact-audi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 600px;
    border-top: #afafaf solid 15px;
}

.contact-audi {
    height: auto;
}

.about-audi h2, .contact-audi h2 {
    font-size: 50px;
    font-weight: 300;
    letter-spacing: 3px;
    margin: -30px 30px 50px 30px;
    text-align: center;
}

.contact-audi h2 {
    margin-top: 100px;
}

.about-audi p, .contact-audi p {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 23px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
    max-width: 800px;
    line-height: 29px;
    letter-spacing: 1px;
}

/* contact form */
.contact-form fieldset {
    border: none;
    display: flex;
    align-items: flex-start;
    margin: 3px 0;
}

.contact-form label {
    font-family: 'Alumni Sans', sans-serif;
    font-size: 22px;
    width: 80px;
    letter-spacing: 1px;
}

.contact-form {
    margin: 50px 30px 130px 30px;
    background-color: #e1e1e1;
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-form textarea, .contact-form input {
    width: 250px;
    border: 0.5px solid #0e0e0e;
}

.contact-form textarea {
    height: 100px;
}

.contact-form button {
    font-family: 'Alumni Sans', sans-serif;
    font-size: 30px;
    margin-top: 20px;
    border-radius: 0;
    border: 0.5px solid #0e0e0e;
    width: 100px;
    cursor: pointer;
    transition: 0.5s ease all;
    background-color: #c9c7c7;
    letter-spacing: 1px;
    text-align: center;
    color: #0e0e0e;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 300;
}

.contact-form button:hover {
    background-color: #e1e1e1;
}

/*** PRODUCT PAGE ***/
.product-masthead {
    height: 80vh;
    width: 100%;
    background-image: url("../img/audi-r8-headlight.jpg");
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.product-masthead h1 {
    color: #f4f4f4;
    font-size: 70px;
    margin: 0 0 40px 50px;
    letter-spacing: 2px;
}

.product-masthead h1 span {
    display: block;
    margin-bottom: 30px;
    background-color: #4b4b4b;
    font-size: 40px;
    padding: 10px;
    width: 330px;
    display: flex;
    justify-content: center;
}

.product-img-block {
    height: 70vh;
    background-image: url("../img/audi-r8-back-view.jpg");
    background-size: cover;
    background-position-y: 60%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* config table */
.configurations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* source: https://dyler.com/blog/456/rear-wheel-drive-makes-a-comeback-to-audi-r8-lineup */
    background-image: url("../img/audi-r8-interior.jpg");
    background-size: cover;
    background-position: center;
}

.configurations h2 {
    font-weight: 400;
    margin-top: 110px;
    margin-bottom: 50px;
    letter-spacing: 7px;
    font-size: 40px;
    color: white;
}

.configurations p {
    font-size: 25px;
    font-family: 'PT Sans Narrow', sans-serif;
    margin-top: 70px;
    margin-bottom: 40px;
    letter-spacing: 1px;
    color: white;
}

select {
    font-family: 'Alumni Sans', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
}

td {
    font-family: 'PT Sans Narrow', sans-serif;
    background-color: #ececec;
    font-size: 20px;
    padding: 25px;
}

td span {
    display: block;
}

.mobile-table {
    display: none;
}

table tr:nth-child(1) td {
    font-weight: bold;
}

.desktop-table {
    max-width: 900px;
    margin-right: 30px;
    margin-left: 30px;
}

.desktop-table td {
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
}

table {
    margin-bottom: 110px;
}

/* engine block */
.engine {
    height: 50vh;
    min-height: 600px;
    max-height: 800px;
    /* source: https://www.audi-mediacenter.com/en/photos/detail/audi-r8-v10-21605 */
    background-image: url("../img/audi-r8-engine-faded.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.engine h2, .engine h3 {
    margin: 0;
    font-weight: 200;
    text-shadow:
            -1px -1px 0 #fff, /* Top left */
            1px -1px 0 #fff, /* Top right */
            -1px  1px 0 #fff, /* Bottom left */
            1px  1px 0 #fff; /* Bottom right */
    text-align: center;
    max-width: 800px;
}

.engine h2 {
    font-size: 50px;
    margin-bottom: 65px;
}

.engine h3 {
    line-height: 35px;
}

/* coupe and spyder block */
.coupe-and-spyder-block {
    /* source: https://www.audi-mediacenter.com/en/photos/detail/audi-r8-v10-rwd-coupe-audi-r8-v10-rwd-spyder-86612  */
    background-image: url("../img/audi-coupe-and-spyder.jpeg");
    background-size: cover;
    background-position: center;
    height: 500px;
}

/************* MEDIA QUERIES *************/

@media screen and (min-width: 1500px) {
    .lightsOff
    {
        background-image: url("../img/lights-off-extended.jpg");
    }
    .lightsOn
    {
        background-image: url("../img/lights-on-extended.jpg");
    }

}

@media screen and (max-width: 1600px){
    .quattro-text h2 {
        margin-top: 90px;
    }
}

@media screen and (max-width: 1170px) {

    .quattro-text h2 {
        margin-top: 125px;
        margin-right: 30px;
        margin-left: 30px;
    }

    .quattro-text small {
        margin-top: 25px;
    }

    .quattro-text h3 {
        margin-top: -30px;
    }
}

@media screen and (max-width: 1130px) {

    .contact h1 {
        font-size: 120px;
        letter-spacing: 8px;
    }

    .about h1 {
        font-size: 130px;
        letter-spacing: 8px;
    }
}


@media screen and (min-width: 1024px) {
    /*** CUSTOM SCROLLBAR ***/
    /* Firefox */
    html {
        scrollbar-width: none;
        -ms-overflow-style: none; /* IE and Edge */
    }

    /* all other browsers */
    ::-webkit-scrollbar {
        width: 0;
    }

    #scrollbar-thumb {
        width: 13px;
        height: auto;
        position: absolute;
        right: 2px;
        z-index: 1000;
        filter: drop-shadow(1px 1px 1px rgba(14, 14, 14, 0.42));
        display: block;
    }

    #thumb-container {
        height: 100vh;
        /* background-color: rgba(225, 225, 225, 0.25); */
        width: 17px;
        position: fixed;
        right: 0;
        z-index: 999;
        border-radius: 15px;
        /* border: 0.5px solid #b9b9b9; */
        opacity: 0;
        transition: .8s ease all;
    }
}

@media screen and (max-width: 1023px) {
    #scrollbar-thumb {
        display: none;
    }
}

@media screen and (max-width: 850px) {
    .contact h1 {
        font-size: 80px;
        letter-spacing: 6px;
    }

    .about h1 {
        font-size: 100px;
        letter-spacing: 6px;
    }
}

@media screen and (max-width: 800px) {

    .timeline-element img {
        width: 120px;
        height: 120px;
        right: 15px;
    }

    /* adjust generation images on right right side */
    .timeline-right img {
        left: 15px;
    }

    .right-arrow, .left-arrow {
        margin-top: -20px;
    }
}

@media screen and (max-width: 768px) {

    /* hamburger menu */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-right: 30px;
        margin-top: 5px;
    }

    .burger-bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 0.7px 0;
        border-top: 5px #f4f4f4 dotted;
    }

    /* nav menu */
    header div:nth-child(3) {
        position: absolute;
        width: 300px;
        height: 100vh;
        display: flex;
        top: 100%;
        left: 100%;
        justify-content: flex-end;
        transition: 0.5s all ease;
    }

    .darken-header {
        background-color: rgba(0, 0, 0, 0.8);
    }

    header nav a {
        color: #0e0e0e;
        font-size: 28px;
        margin-bottom: 25px;
        display: block;
        transition: 0.5s all ease;
    }

    header ul a:hover {
        border-bottom: #0e0e0e solid 0.5px;
    }

    header nav ul {
        flex-direction: column;
        background-color: #ececec;
        height: 100vh;
        padding: 40px 18px;
        width: 200px;
        margin-top: 0px;
        margin-right: 10px;
        position: relative;
        transition: 0.5s all ease;
    }

    .open-menu {
        margin-right: 300px;
    }

    header {
        justify-content: space-between;
    }

    .wrapper {
        position: fixed;
        width: 100%;
        height: 100vh;
        z-index: -999;
        background-color: transparent;
    }

    .wrapper-active {
        z-index: 99;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .mobile-table {
        display: block;
    }

    .desktop-table {
        display: none;
    }

    table td:nth-child(1) {
        font-weight: bold;
    }

    table tr:nth-child(1) td:nth-child(2) {
        font-weight: normal;
    }

    /* disable parallax on mobile */
    .close-up-wheel, .inventory, .close-up-logo, .engine, .product-img-block, .about, .contact {
        background-attachment: scroll;
    }

    .engine {
        justify-content: space-between;
        padding-top: 135px;
        padding-bottom: 145px;
        background-image: url("../img/audi-r8-engine-lg.jpg");
        background-position-y: -60px;
    }

    .inventory {
        padding: 100px 20px 80px 20px;
    }

    .inventory-btn-container, .product-btn-container  {
        flex-direction: column;
    }

    .inventory-btn-container a, .product-btn-container a {
        display: block;
        margin-bottom: 10px;
    }

    .test-drive h2 {
        margin: 0 30px 150px 30px;
        font-size: 30px;
    }

    .inventory h2 {
        font-size: 45px;
        font-weight: 300;
        margin-top: 0px;
        margin-right: 30px;
        margin-left: 30px;
        padding-top: 100px;
    }

    .inventory-btn-container {
        margin-bottom: 100px;
    }

    .product-masthead {
        height: 80vh;
        width: 100%;
    }

    .img-container {
        display: flex;
        flex-direction: column;
        margin-top: 0;
    }

    footer img {
        height: 50px;
        margin: 7px 7px 7px 25px;
    }
}

@media screen and (max-width: 700px) {

    .timeline-element img {
        right: 35px;
    }

    /* adjust generation images on right right side */
    .timeline-right img {
        left: 35px;
    }

    .timeline-left {
        margin-left: 0px;
    }

    .timeline-right {
        margin-left: 90px;
    }

    .inventory {
        height: auto;
    }

    .breakSmallScreens {
        display: block;
    }
}

@media screen and (max-width: 660px) {

    .quattro-text h2 {
        margin-top: 150px;
        font-size: 75px;
    }

    .quattro-text h3 {
        margin-top: -15px;
    }

    .quattro-text small {
        margin-top: 15px;
    }

    .customize-img {
        width: 400px;
    }


    .about h1, .contact h1 {
        font-size: 60px;
        letter-spacing: 4px;
        margin-left: 30px;
        margin-right: 30px;
        text-align: center;
    }

    .about h1 {
        font-size: 80px;
    }

    .product-masthead h1 {
        margin: 0px 0 20px 20px;
    }

    .product-masthead h1 span {
        margin-bottom: 3px;
    }

    .engine {
        padding-top: 80px;
        padding-bottom: 90px;
    }
}

@media screen and (max-width: 630px) {

    .timeline-bar {
        left: 80px;
    }

    .timeline-element img {
        left: 0px;
        margin: 0 0 0 -145px;
    }

    .timeline-left {
        left: 130px;
        margin-left: 0px;
        padding-right: 50px;
    }

    .timeline-right {
        left: 130px;
        margin-left: 0px;
        padding-right: 50px;
    }

    .timeline-element {
        width: 100%;
        margin-bottom: 40px;
    }

    .left-arrow {
        border-right: 17px solid #e1e1e1;
        border-left: 17px solid transparent;
        position: absolute;
        top: 85px;
        left: 0px;
        margin-left: -8.5px;
        width: 0px;
    }
}

@media screen and (max-width: 610px) {

    .quattro-text h2 {
        margin-top: -160px;
        font-size: 95px;
        color: #0e0e0e;
        text-shadow: none;
    }

    .quattro-text h3 {
        margin: 0px 30px 85px 30px;
        font-size: 35px;
        color: #f4f4f4;
    }

    .quattro-text small {
        margin-top: 15px;
    }

    .test-drive h2 {
        margin: 0 30px 100px 30px;
        font-size: 25px;
    }

    .color-bar {
        width: 95%;
    }
}

@media screen and (max-width: 610px) {
    .action-menu {
        display: none;
    }

    .lightsOn, .lightsOff {
        height: 120vh;
    }
}

@media screen and (max-width: 552px) {



    .title {
        line-height: 70px;
    }

    .titleContainer {
        padding-bottom: 10vh;
    }
}

@media screen and (max-width: 550px) {

    .specs-details h3 {
        font-size: 40px;
        margin: 30px 45px;
    }

    .specs-details small {
        margin-top: 50px;
        font-size: 16px;
    }

    .engine {
        background-image: url("../img/audi-r8-engine.jpg");
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .video-bg {
        display: none;
    }

    .book-test-drive {
        background-image: url("../img/r8-steering-wheel.jpg");
        height: 500px;
        background-size: cover;
        background-position: center;
    }
}

@media screen and (max-width: 515px) {
    .timeline h2 {
        font-size: 50px;
    }

    .specs-details h3 {
        margin-top: 0;
    }
}

@media screen and (max-width: 480px) {

    .address-container {
        display: none;
    }

    .img-container {
        flex-direction: row;
        margin-bottom: 0;
    }

    footer > div:nth-child(1) {
        margin-bottom: 10px;

    }
    footer {
        padding-top: 15px;
    }

    .img-container img:nth-child(2) {
        height: 35px;
        margin-top: 15px;
    }

    .copyright-container small {
        font-size: 14px;
    }
}

@media screen and (max-width: 470px) {

    .customize-img {
        width: 350px;
    }

    .specs-details h3 {
        font-size: 35px;
    }

    .test-drive-btn {
        width: 240px;
        height: 60px;
        font-size: 30px;
        margin-top: 70px;
    }

    .contact-form {
        width: 300px;
    }

    .contact-form textarea, .contact-form input {
        width: 200px;
    }
}

@media screen and (max-width: 425px) {

    .quattro-text h2 {
        margin-top: -100px;
        font-size: 75px;
    }

    .quattro-text p {
        margin-top: 0px
    }

}

@media screen and (max-width: 410px) {

    .customize-img {
        width: 310px;
    }

    .configurations h2 {
        font-size: 30px;
    }

    .mobile-table {
        margin-right: 20px;
        margin-left: 30px;
    }
}

@media screen and (max-width: 395px) {

    .timeline h2 {
        font-size: 38px;
        margin: -10px 15px 60px 15px;
    }

    .contact-form {
        width: 260px;
    }

    .contact-form textarea, .contact-form input {
        width: 170px;
    }

    .engine {
        background-position-y: -75px;
    }
}

@media screen and (max-width: 385px) {

    .engine {
        background-position-y: -95px;
    }
}

@media screen and (max-width: 360px) {

    .timeline-element img {
        width: 100px;
        height: 100px;
    }

    .timeline-bar {
        left: 75px;
    }

    .timeline-element div {
        margin-left: -15px;
    }

    .left-arrow {
        margin-left: -27px;
        margin-top: -10px;
    }

    .right-arrow {
        margin-left: -10px;
        margin-top: -30px;
    }

    .inventory h2 {
        font-size: 40px;
    }

    .inventory-btn-container a, .product-btn-container a {
        width: 200px;
    }
}

@media screen and (max-width: 350px) {

    .customize-img {
        width: 290px;
    }

    .timeline-element img {
        width: 90px;
        height: 90px;
    }

    .timeline-bar {
        left: 70px;
    }

    .timeline-element div {
        margin-left: -38px;
        margin-right: 60px;
    }

    .left-arrow {
        margin-left: -47px;
    }

    .right-arrow {
        margin-left: -30px;
    }

    .timeline-element p {
        font-size: 15px;
    }

    .title {
        font-size: 70px;
    }
}

@media screen and (max-width: 330px) {

    .engine {
        background-position-y: -100px;
    }
}