@import url('//fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

.hidden {
    display: none;
}

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

h3 {
    font-weight: normal;
}

.video {
    width: inherit;
}
body {
    margin:0;
    background: #000;
}
body * {
    color:white;
    font-family: "Fira Sans", sans-serif;
}

.section {
    background: #000;
    display:flex;
    flex-flow:row wrap;
    width: 100%;
    padding:1vw 0;
}
.section p {
    font-weight: bold;
    font-size: 110%;
}
.section-2-divider {
    flex:0 0 40%; 
    margin:0 5%
}

#logo {
    position: absolute;
    top:5%;
    margin:auto;
    left:5%;
    z-index: 1;
}

#logo img {
    max-width: 220px;
}

#logo-mobile {
    display:none
}

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

.white-button {
    background:transparent;
    border: 2px solid white;
    color:white;
}

.white-button:hover {
    background:white;
    color:black;
}

.brand {
    height:122px
}


.brand-column-1 {
    flex:0 0 22%;
}

.brand-column-1 img {
    width:100%;
    height:100px
}

.brand-column-2 {
    flex:0 0 68%;
    padding:1% 0;
    font-weight:bold
}

.brand-column-2 h3 {
    font-size: 2rem;
}

.brand-column-3 {
    flex:0 0 10%;
    margin:auto;
}

form {
    display:flex;
    flex-flow: row wrap;
}

form>* {
    flex: 0 0 100%;
    min-height:35px;
    margin: 2% 0;
    color:black;
}

.sidebar {
    position:fixed;
    right:0;
    width:3vw;
    background:black;
    height:100vh;
    z-index:1;
    display:flex;
    flex-flow:column;
}

.sidebar img {
    width:2vw;
    margin: 2vh 0.5vw
}

.dropdown {
    display:none;
    position:fixed;
    right:3vw;
    z-index:1;
    background: black;
}

#hamburger:hover + .dropdown, .dropdown:hover {
    display:flex;
    flex-flow:column;
    width:10vw
}

.dropdown>* {
    margin:15% 0;
    text-align:center
}

.footer {
    background:black;
    display:flex;
}

.footer .section {
    width:30%;
    margin-left:5%;
}

.footer .section * {
    flex: 0 0 20%;
    text-decoration: none;
}

.section.right {
    position: absolute; 
    right:0;
    width:15%
}

.section.right>* {
    flex: 0 0 20%;
}

.blue-bar {
    background: #006d95;
    text-align: center;
    padding:12px 0;
    margin:0;
    display:none
}
.blue-bar>* {
    margin:0;
    padding:0;
    display:flex;
    flex-flow: row wrap;
    width:50%;
    margin-left:25%
}
.blue-bar a {
    flex:0 0 25%
}

@media screen and (max-width:1024px) {
    .brand {
        height:auto;
    }
    .brand > div {
        flex:0 0 100% !important
    }
    .brand-column-2 {
        padding: 2% 10%
    }
    .brand-column-3 .white-button {
        position:relative;
        left:40%;
        width:20%;
        margin:auto;
        min-height:40px
    }
}

.break {
    display:none;
}

@media screen and (max-width:640px) {
    .blue-bar {
        display:block
    }
    .blue-bar a {
        flex:0 0 25%
    }
    .sidebar {
        display:none;
    }
    .section {
        position: static;
    }
    .section-2-divider {
        flex: 0 0 100%;
        margin:0;
        padding:0 5%
    }
    .section-2-divider input {
        flex:0 0 100% !important;
        left:0 !important
    }
    .footer .section {
        flex-flow: column wrap;
        width:100%;
        position:relative
    }
    .section.right {
        align-items:center
    }
    .break {
        display:block
    }
}