@font-face {
    font-family: 'kinghawaiian';
    src: url('../fonts/kinghawaiian-regular') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kinghawaiian';
    src: url('../fonts/kinghawaiian-bold') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, a, img, ol, ul, li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* In page app style overwrites */
.variantLabel, #BottomFilter {
    font-family: 'kinghawaiian', Serif;
}

/* Page styles */
body {
    min-height: 100vh;
    background-color: #ffffff;
    /*display: flex;*/
    /*flex-direction: column;*/
    font-family: 'kinghawaiian', sans-serif;
}

header.desktop-header {
    /*display: block;*/
    /*border-bottom: #BAAB8F solid 2px;*/
}

.banner {
    width: 100%;
}

#buttonWrapper {
    text-align: center;
}

#ctaLink {
    position: relative;
    top: 50%;
    margin: 1em 0;
    background-color: #ec1200;
    color: white;
    padding: 14px 25px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    font-family: 'kinghawaiian';
}

#ctaLink:hover {
    color: #ec1200;
    background-color: #ffffff;
    border: solid 1px #ec1200;
}

#app-wrapper {
    box-sizing: border-box;
}

.grid_img img {
    display: block;
    width: 100%;
}

.video_wrapper {
    max-width: 900px;
    margin: 0 auto 20px;
}

.video1 { grid-area: video1; }

.image1 { grid-area: image1; }

.text1 { grid-area: text1; }


video {
    width: 100%;
}

footer {
    width: 100%;
    background: #ff6700;
    color: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    line-height: 1.5em;
    padding: 15px;
}

.footerText {
    font-size: 12px;
    color: #ffffff;
    margin: 6px 0 12px;
    font-family: 'kinghawaiian', Serif;
}
.footerText a {
    color: #ffffff;
    text-decoration: none;
}
.footerText a:hover {
    text-decoration: underline;
}

img.footerLogo {
    display: block;
    width: 120px;
    padding: 10px;
}

@media screen and (max-width: 600px) {
    #app-wrapper {
        width: 100%;
    }

    .grid_container {
        display: flex;
        flex-direction: column;
    }

    footer {
        padding: 0 15px;
        box-sizing: border-box;
    }
}