body {
    margin: 0;
    padding: 0;
}

#adContainer {
    width: 100%;
    height: 100vh;
    max-width: 600px;
    position: absolute;
    overflow: hidden;
    display: block;
    background: url('loading.png') center center no-repeat #49c2ef;
}

#contents {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    background-color: gray;
    overflow: hidden;
    visibility: hidden;
}

img {max-width: 100%;}

#close {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    z-index: 1000;
    background-image: url('close.png');
}

#exit {
    width: 40%;
    display: block;
    position: absolute;
    left:5%;
    bottom: 7%;
    transform: translateY(300%);
}

/* LANDSCAPE CONTROL */
#rotate {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: url('rotation.png') center center no-repeat black;
    display: none;
}

#desk {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    opacity: 0;
}


@media only screen and (orientation: landscape) {
    #adContainer {max-width: 100%;}
    #rotate {display: block}
    #desk {opacity: 1;}
    p {
        color: white;
        font-family: Arial, Helvetica, sans-serif;
    }
  }

/* START STYLING HERE */
/* @import url('video.css');
@import url('carousel.css'); */

#logo {
    width: 90%;
    position: absolute;
    top: 47%;
    left: 5%;
    transform: translateY(-50%);
    overflow: hidden;
    height: 80vh;
}

#af-logo {
    width: 40%;
    position: absolute;
    bottom: 1%;
    right: 1%;
}

#introScreen {
    width: 100%;
    height: 100%;
    background: #fff;
    position: absolute;
}

#grad {
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('gradient.png') center center no-repeat;
    background-size: cover;
}

#car {
    width: 100%;
    position: absolute;
    height: 100%;
    background: url('car-blank.jpg') no-repeat center center;
    background-size: cover;
}

#car div {
    position: absolute;
}

#car2, #car3, #car4, #car5 {
    opacity: 0;
}

#choose {
    position: absolute;
    top: 20%;
    width: 100%;
}

#btns {
    width: 80%;
    height: 50px;
    left: 10%;
    bottom: 20%;
    justify-content:space-between;
    position: absolute;
    display: flex;
}

.btn {
    width: 30px;
    height: 30px;
    background: grey;
    border-radius: 10px;
    border: #000 1px solid;
}

#btnRed {
    background-color: #920002;
    /* background-image: url('check.png'); */
    background-size: cover;
}

#btnGrey {
    background-color: #ababb0;
    /* background-image: url('check.png'); */
    background-size: cover;
}

#btnBlack {
    background-color: #000;
    /* background-image: url('check.png'); */
    background-size: cover;
}

#btnWhite {
    background-color: #fff;
    /* background-image: url('check.png'); */
    background-size: cover;
}

#btnSilver {
    background-color: #c1c0c5;
    /* background-image: url('check.png'); */
    background-size: cover;
}

#btnBlue {
    background-color: #516b78;
    /* background-image: url('check.png'); */
    background-size: cover;
}

#enterBtn {
    width: 40%;
    position: absolute;
    left: 30%;
    bottom: 10%;
    transform: translateX(-500%);
}

#mainPage {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('cover-generic.jpg');
    background-size: cover;
    background-position: center bottom;
}


#headline, #subHead{
    width: 80%;
    position: absolute;
    height: 100%;
    top: 10%;
    left: 10%;
    transform: translateX(-100%);
    
}
#headlineIntro, #subHeadIntro{
    width: 80%;
    position: absolute;
    height: 100%;
    top: 10%;
    left: 10%;
    
}

#galBtns {
    width: 60%;
    left: 20%;
    position: absolute;
    height: auto;
    bottom: 20%;
    transform: translateX(-150%);
    display: flex;
    justify-content:space-between;
    overflow: hidden;
}

.gal {
    width: 80%;
    height: auto;
    display: block;
    margin-left: 10%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.overlay {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);

}

#videoIntroBox {
    margin-top: 50%;
    position: relative;
}

.arrow {
    width: 10%;
    left: 45%;
    bottom: 0;
    position: absolute;
}

#videoBox {
    margin-top: 60%;
    background: #002f69;
    display: block;
}

#vidCont {
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url('cover-intro.jpg');
    background-position: bottom center;
    background-color:  rgba(0, 0, 0, 0.9);;
    background-size: cover;
}

#introTagline {
    width: 100%;
    position: absolute;
    bottom: 10%;
}

#bookIntro {
    width: 40%;
    position: absolute;
    bottom: 10%;
    left: 5%;
}

#exploreIntro {
    width: 40%;
    position: absolute;
    bottom: 10%;
    right: 5%;
}

#tapcolor {
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 5%;
}

#tapbtn {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}
#images {
    width: 20%;
    height: 20%;
    position: absolute;
    opacity: 0;
}

#border {
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    display: block;
    height: 85%;
}

#logobox {
    height: 15%;
    display: block;
    overflow: hidden;
    display: flex;
    align-content: space-around;
}

#logoImg {
    width: 20%;
}

#borderLeft {
    height: 50%;
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    width: 70%;
}

#borderRight {
    height: 50%;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    width: 10%;
}