body {
    padding: 0;
    margin: 0;
    font-family: 'Open Sans';
    max-width: 100vw;
    overflow-x: hidden;
}

main {
    padding: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;
}

main #bg_imgs {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

main #bg_imgs img {
    max-width: 1920px;
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

main #bg_imgs img.active {
    z-index: 3;
}

main .name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    border: 10px solid white;
    font-size: 10em;
    line-height: 1.3em;
    color: white;
    z-index: 999;
}

main .name h1 {
    font-weight: 200;
    padding: 0;
    margin: 0;
    margin-top: -.05em;
}

@media only screen AND (max-width: 720px) {
    body {
        max-height: 100vh;
        overflow: hidden;
    }
    
    main #bg_imgs img {
        max-width: unset;

    }

    main .name {
        position: relative;
        top: unset;
        left: unset;
        transform: none;
        font-size: 7em;
        width: 4.5em;
        margin: 28%;
        top: 16px;
    }
}