/* ====== Begin Boilerplate CSS ====== */

html {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
    background-color: #fff; /* Color you see during overscroll */
    font-size: 62.5%; /* makes rem = px size */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Apercu', sans-serif;
    min-height: 100%;
    /*height: 100%;*/
    color: #fff;
    /*-webkit-font-smoothing: antialiased;*/
    /*-moz-osx-font-smoothing: grayscale;*/
}

*, *:before, *:after {
    box-sizing: border-box;
}

p, li, span { margin: 0; line-height: 1.65; }

a { outline: 0; text-decoration: none; }

a:link { text-decoration: none; color: #fff; }
a:visited { text-decoration: none; color: #fff; }
a:focus { outline: 1px dotted #444; }
a:hover { text-decoration: none; color: #fff; }
a:active { text-decoration: none; color: #fff; }

* { -webkit-tap-highlight-color: transparent; }
body.mobile * { cursor: auto !important; }

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0;
    font-weight: normal;
}

html > * { font-size: 1.3rem; }

.table-table {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}

.table-cell {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.page-curtain {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transition: opacity 2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

body.loaded .page-curtain {
    pointer-events: none;
    opacity: 0;
}

.vh-landing video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 101%;
    min-height: 101%;
    width: auto;
    height: auto;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
    .vh-landing video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    .vh-landing video {
        width: auto;
        height: 100%;
    }
}



/* ====== Begin Custom CSS ====== */

.vh-landing {
    position: relative;
    display: block;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.lp-portal-wrapper {
    text-align: center;
    color: #fff;
    padding: 24px;
}

.lp-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.lp-content {
    position: relative;
    display: block;
    width: 100%;
}

.lp-11w-landing-logo {
    position: relative;
    display: block;
    margin: 0 auto 38px;
    width: 75%;
    max-width: 300px;
}

.lp-pre-title {
    position: relative;
    display: block;
    font-family: 'TradeGothic CondEighteen';
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 1.8rem;
    margin: 0 auto 32px;
}

.lp-title {
    position: relative;
    display: block;
    font-family: 'Canela-Regular';
    font-size: 3.6rem;
    margin: 0 auto 36px;
}

.lp-landing-buttons-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
}

.lp-landing-buttons-wrapper a {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 260px;
    max-width: 100%;
    margin: 0 6px 12px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-family: 'TradeGothic CondEighteen';
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 1.25rem;
    transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.lp-landing-buttons-wrapper a, .lp-landing-buttons-wrapper a:link, .lp-landing-buttons-wrapper a:visited {
    background-color: #ad936d;
    color: #fff;
}
.lp-landing-buttons-wrapper a:hover, .lp-landing-buttons-wrapper a:active {
    background-color: #fff;
    color: #ad936d;
}

.lp-v-offset {
    position: relative;
    display: block;
    padding-top: 48px;
}


/* anim */

body.preload .lp-overlay,
body.preload .lp-11w-landing-logo,
body.preload .lp-pre-title,
body.preload .lp-title,
body.preload .lp-landing-buttons-wrapper {
    opacity: 0;
}

.lp-overlay,
.lp-11w-landing-logo,
.lp-pre-title,
.lp-title,
.lp-landing-buttons-wrapper {
    transition-property: opacity;
    transition-timing-function: ease-in-out;
}

.lp-overlay {
    transition-delay: 3.0s;
    transition-duration: 2s;
}

.lp-11w-landing-logo {
    transition-delay: 3.5s;
    transition-duration: 2.5s;
}

.lp-pre-title {
    transition-delay: 3.5s;
    transition-duration: 2.5s;
}

.lp-title {
    transition-delay: 6.0s;
    transition-duration: 1.5s;
}

.lp-landing-buttons-wrapper {
    transition-delay: 6.15s;
    transition-duration: 1.5s;
}

/* faster */

body.faster .page-curtain {
    transition-duration: 1.25s;
}

body.faster .lp-overlay {
    transition-delay: 1.75s;
    transition-duration: 2s;
}

body.faster .lp-11w-landing-logo {
    transition-delay: 2.25s;
    transition-duration: 2.5s;
}

body.faster .lp-pre-title {
    transition-delay: 2.25s;
    transition-duration: 2.5s;
}

body.faster .lp-title {
    transition-delay: 4.25s;
    transition-duration: 1.5s;
}

body.faster .lp-landing-buttons-wrapper {
    transition-delay: 4.4s;
    transition-duration: 1.5s;
}



/* ====== Media Queries ====== */

@media all and (min-width: 960px) {

    .lp-portal-wrapper {
        padding: 48px;
    }

    .lp-11w-landing-logo {
        margin-bottom: 56px;
        max-width: 360px;
    }

    .lp-pre-title {
        letter-spacing: 2.5px;
        font-size: 2.4rem;
        margin-bottom: 36px;
    }

    .lp-title {
        font-size: 7.2rem;
        margin-bottom: 36px;
    }

    .lp-v-offset {
        padding-top: 96px;
    }

}

@media all and (min-width: 1024px) {

    .lp-landing-buttons-wrapper a {
        margin: 0 8px 16px;
        font-size: 1.4rem;
        width: 290px;
        height: 46px;
        line-height: 46px;
    }

}