@import url("https://use.typekit.net/gko5jsi.css");
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

body {
    font-family: tachyon,sans-serif;
    font-weight: 200;
    font-style: normal;
    animation: 1s ease-out FadeIn;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-style: normal;
    animation: 1s ease-out FadeIn;
}

a {
    text-decoration: none !important;
}

h1 {
    font-family: Tachyon, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-weight: 400 !important;
    font-size: 18px !important;
}

span {
    color: white;
    font-size: 12px;
    font-family: Tachyon, sans-serif;
    font-weight: 100;
    letter-spacing: 1.1px;
}

.hero {
    background-image: url('images/OMC_splash_mobile.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    height: 100vh;
    min-height: 710px;
}

.logo-container {
    margin-top: 0px;
    max-width: 195px;
}

.text-box {
    max-width: 100%;
    font-family: Tachyon, sans-serif;
    font-weight: 100;
    font-size: 10px;
    letter-spacing: 1.2px;
}

.text-box-container, .footer {
    background-color: #232725;
}

.socials-container {
    min-width: 672px;
}

.social {
    width: 100%;
    opacity: .85;
    transition: .3s ease-in-out;
}

.social:hover {
    transition: .3s ease-out;
    opacity: 1;
}

.social-icon {
    width: 20px;
    margin-right: 10px;
    margin-left: 0px;
}

.expand{
    position:relative;
    text-decoration:none;
    display:inline-block;
}

.expand:after {
    display:block;
    content: '';
    border-bottom: solid 1px #fff;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
    transform-origin:100% 50%
}

.expand:hover:after {
    transform: scaleX(1);
    transform-origin:0 50%;
}

.mob-logo {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 25%;
}

.details {
    font-family: Tachyon, sans-serif;
    font-weight: 100;
    font-size: 12px;

}
@media (max-width: 742px) {
    .hero {
        min-height: 460px;
        background-size: 100% auto;
        height: calc(100vw + 100px);
    }
}


@media (min-width: 768px) {
    .hero {
        background-position: bottom center;
    }
}

@media (max-width: 1200px) and (min-width: 872px) {
    .hero {
        background-position: 50% 75%;
    }
}
@media (min-width: 1200px) {
    .hero {
        background-image: url('images/OMC_splash_desktop_hires.png');
        background-position: center center;
    }

    .logo-container {
        margin-top: -20px;
        max-width: 295px;
    }

    .social-icon {
        margin-left: 40px;
    }

    .text-box {
        max-width: 400px;
    }
}

@keyframes FadeIn {
    0% {
      opacity:.2;
    }
    2% {
      opacity:.2;
    }
    100% {
      opacity:1;
    }
}