@font-face{
    font-family: 'good-times';
    src: url('assets/good-times.ttf');
}
* { margin:0; padding:0; box-sizing:border-box; }
body{
    min-height: 100vh;
    position: relative;
}
body, html { overflow-x:hidden; }
.wrapper{
    background: url(assets/Blue.jpg) center center no-repeat;
    background-size: cover;
    margin:0;
    padding:0;
    padding-bottom: 10vh;
}
.content{
    min-height: 80vh;
    color: white;
}
.content h1{
    font-family: 'good-times';
    font-size: 4em;
    margin-top: 120px;
    letter-spacing: -2px;
    word-spacing: -29px;

}
.content h1 span{
    font-size: 5rem;
}
.content h3{
    font-size: 2em;
    font-weight: 100;
}
.content p{
    font-size: 1.7em;
    font-weight: 100;
    padding-top: 15px;
}
#phone-image{
    height: 600px;
    margin-top: 100px;
    padding: 0;
}
.circle{
    height: 40px;
    width: 40px;
    background-color: rgba(0,0,0,0.4);
    border-radius: 100px;
    position: absolute;
}
.dialogue{
    position: absolute;
    color: black;
    visibility: hidden;
    pointer-events: none;

}
.dialogue svg{
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.7));
    pointer-events: none;
}

#circle-1{
    top: 206px;
    left: 29px;
    width: 30px;
    height:30px;
}

#circle-2{
    top: 265px;
    left: 107px;
}
#circle-3{
    top:372px;
    left: 4px;
    width: 270px;
    height: 54px;
}
#dialogue-1{
    top: 70px;
    left:30px;
}
#dialogue-2{
    top: 100px;
    left: 20px;
}

#dialogue-3{
    z-index: 1000;
    top: 230px;
    left:20px;
}
#circle-2:hover + #dialogue-2{
    visibility: visible !important;
}
#circle-1:hover + #dialogue-1{
    visibility: visible !important;
}
#circle-3:hover + #dialogue-3{
    visibility: visible !important;
}
.download img{
    height: 50px !important;
}
footer{
    background-color: #454545;
    padding: 20px 0;
    max-width: 100vw;
}

.advertise h3{
    padding-top:60px;
    font-weight: 500;
    font-size:2rem;
}
.advertise ul li{
    font-size: 1.5rem;
    font-weight: 100;
    padding-right: 40px;
    padding-bottom: 10px;
}
.advertise li p{
    display: block;
    font-size: 1.3rem; 
    padding-left: 10px;
}
.content ol {
}
.logo-here-container{
    position: relative;
}
#logo-here{
    position: absolute;
    top: 200px;;
    left: 90px;
    width: 60;
}

.advertise .button{
    margin-bottom: 8vh;
    padding: 10px;
    border-radius: 10px;
    background-color: #454545;
    color: white !important;
    border: none;
    box-shadow: 2px 2px 2px black !important;
}

/*Mobile Media Query*/
@media only screen and (max-width: 700px) {
   .content h1{
    font-size: 2.4em;
    margin-top: 60px;
    word-spacing: -10px;
    }
    .content h1 span{
    font-size: 3rem;
    }
    .header p{
        font-size: 1.3em;
    }
    ul{
        list-style-type: none;
    }
    .phone-container{
        margin: auto;
        margin-bottom: 100px;
        display: inline-block !important;
        margin: -100px auto 5vh !important;
        left: 50%;
        transform: translate(-50%);
    }
    .download-img{
        margin:auto;
        display: inline-block;
        position: relative;      left: 50%;
        transform: translate(-50%);
    }
}