html, body {
    height: 100%;
}

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

body {
    margin: 0;
    background-color: black;
    overflow: hidden;
}

figure {
    margin: 0;
}

img {
    width: 100%;
}

.video-responsive {
    padding-bottom: 56.25%;
    width: 100%;
}

.canvas,
.video {
    height: 80vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: #000;
    z-index: 5;
}

.canvas {
    top: 50%;
    transform: translateY(-50%);
}

#over_video {
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;

    margin-top: 0;
}

.wrapper-buttons {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;
}


.wrapper-buttons a:first-child {
    margin-right: 5px;
}

.wrapper-buttons a:last-child {
    margin-left: 5px;
}


.wrapper-buttons a {
    position: relative;
    display: block;
    width: 240px;
    height: 71px;
}

.wrapper-buttons img {
    position: absolute;
    width: 100%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.8));
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.8));
    -webkit-transition: filter 0.5s linear;
    -o-transition: filter 0.2s linear;
    transition: filter 0.2s linear;
    will-change: filter;
}

.wrapper-buttons a:hover svg {
    -webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8));
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8));
}

.logo {
    width: 70vw;
    margin: auto;
}

.logo__st0 {
     opacity: 0.3; 
}

.logo__st1 {
    fill: #FFFFFF;
}

.logo__st2 {
    fill: #FFFFFF;
} 

@media (orientation: landscape) and (max-height: 500px) {
    #over_video {
        margin-top: 0 !important;
        height: 80%;
    }

    .logo {
        width: 80vh;
    }

    .wrapper-buttons {
        margin-top: 0;
        margin-bottom: 0;
        width: 60%;
        margin-bottom: 0;
        flex-direction: row;
        align-items: inherit;
    }

    .wrapper-logo {
        margin-top: 0;
    }
}

 @media screen and (max-height: 500px) {
    
} 



@media only screen and (min-width: 768px) {
    #over_video {
        margin-top: 20vh;
        height: 50vh;
    }

    .canvas,
    .video {
        height: 100%;
    }

    .wrapper-buttons {
        margin-bottom: 0;
        flex-direction: row;
        align-items: inherit;
    }
}

@media only screen and (min-width: 900px) {

    #over_video {
        height: 60vh;
    }

    .logo {
        width: 500px;
    }
}

@media only screen and (min-width: 1024px) {
    .wrapper-logo {
        margin-top: 5%;
    }

    .wrapper-buttons {
        margin-top: 5%;
    }
}

.st0 {
    fill: #FFFFFF;
}

.st1 {
    fill: #A6A6A6;
}

.st2 {
    fill: url(#SVGID_1_);
}

.st3 {
    fill: #FFFFFF;
    stroke: #FFFFFF;
    stroke-width: 0.16;
    stroke-miterlimit: 10;
}

.st4 {
    fill: url(#path64_1_);
}

.st5 {
    fill: url(#path78_1_);
}

.st6 {
    fill: url(#path88_1_);
}

.st7 {
    fill: url(#path104_1_);
}