.hero {
    height: 98vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: #ffffff;
    font-family: 'pangram-regular';
    text-transform: uppercase;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 68px;
}

.hero:after {
    content: '';
    display: inline-block;
    border: solid 2px #bca292;
    width: 0;
    height: 64px;
    position: absolute;
    bottom: -32px;
    right: 50%;
}

@media (max-width: 61.24em) {
    .hero {
        height: 90vh;
    }
}

.hero-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    width: 560px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    -webkit-animation: fadein 4s;
    /* Safari, Chrome and Opera > 12.1 */
    /* Firefox < 16 */
    /* Internet Explorer */
    /* Opera < 12.1 */
    animation: fadein 4s;
}

.hero-title h1 {
    font-size: 104px;
    margin: 0;
    color: #bca292;
    display: block;
    letter-spacing: 4px;
    display: inline-block;
}

@media (max-width: 61.24em) {
    .hero-title h1 {
        font-size: 54px;
    }
}

.hero-title h2 {
    font-weight: lighter;
    margin-bottom: 0;
    font-size: 23px;
    position: absolute;
    top: -38px;
}

@media (max-width: 61.24em) {
    .hero-title h2 {
        font-size: 18px;
        padding: 0 16px;
        top: -58px;
    }
}

.escape-game-title {
    width: 255px;
    height: 84px;
    top: 80px;
}

@media (max-width: 61.24em) {
    .escape-game-title {
        top: 100px;
        width: calc(255px * 2 / 3);
        height: calc(84px * 2 / 3);
    }
}

.discover-our-themes {
    position: absolute;
    bottom: 49px;
    font-size: 12px;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Firefox < 16 */

/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Internet Explorer */

/* Opera < 12.1 */

// WEBPACK FOOTER //
// ./src/styles/Hero.css