.video-container {
    width: 100%; 
    background-color: #000;
    overflow: hidden;
}

.hidden {
    /* position: absolute;
    top: -10000px;
    left: -10000px; */
    display: none;
}

video {
    background: #000;
    max-width: 100%;
    object-fit: cover;
}

/* .video {
    width: inherit;
    max-height: 500px;
    width:100vw;
    object-fit: cover;
}

@media screen and (min-width:1700px) {
    .video {
        max-height: 700px;
    }
} */

h3 {
    font-weight: normal;
}

.video {
    width: inherit;
}
body {
    margin:0;
    background: #000;
}
body * {
    color:white;
    font-family: 'Roboto', sans-serif;
}
.blue-bar {
    background: #006d95;
    text-align: center;
    padding:12px 0;
    margin:0
}
.blue-bar>* {
    margin:0;
    padding:0;
}
.blue-bar a {
    font-weight: bold;
    color:white;
    text-decoration: none;
}
.blue-bar a:hover {
    text-decoration: underline;
}

.grey-box {
    background: rgba(0,0,0,0.6);
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
    padding:1vw 0;
    text-align: center;
}
.grey-box p {
    padding:0 20vw;
    font-weight: bold;
    font-size: 110%;
}

.cta {
    width:30%;
    background: #e36414;
    font-size: 120%;
    font-weight: bold;
    border-radius: 18px;
    padding:10px;
    border: 6px solid #e36414;
    transition:0.3s ease;
    cursor:pointer
}

.cta:hover {
    background: #ae2012;
    border:6px solid #e36414;
}

#logo {
    position: absolute;
    top:10%;
    text-align:center;
    margin:auto;
    left:0;
    right:0;
    z-index: 1;
}

#logo img {
    /* width:80%; */
    /* transition: 0.5s ease; */
    max-width: 220px;
}

@media screen and (max-width:640px) {
    .cta {
        width:50%;
        margin:2% 25% !important;
    }
    .grey-box {
        position: static;
    }
}

#logo-mobile {
    display:none
}

@media screen and (max-width:550px) {
    #logo {
        display:none;
    }
    #logo-mobile{
        display:block
    }
    #logo-mobile img {
        max-width:200px
    }
}