@font-face {
    font-family: "RioGrande";
    src: url(/dist/thehouse/fonts/BouWeste.ttf) format("opentype");
}

* {
    margin: 0;
    padding: 0
}

body {
    overflow: hidden;
}

#textbackground {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}

@keyframes blink {
    0% {
        color: blue
    }
    25% {
        color: #87f500;
    }
    50% {
        color: #19ebfa;
    }
    75% {
        color: #f705ef;
    }
    100% {
        color: black;
    }
}

.billboardElement {
    padding: 10%;
    font-family: RioGrande, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
}

.billboardElement p {
    font-size: 60px;
    margin-bottom:25px;
}


.billboardElement div.text {
    font-size: 52px;
}

.billboardElement div.creditstext {
    font-size: 44px;
}

#bringdowntext {
    font-size: 120px;
    color: blue;
    animation: blink 5s steps(1, start) infinite;
    margin-top:40px;
    font-weight: bolder;
}

#youtubeplayers {
    display: none;
    position: absolute
}

#youtubeplayers.started {
    display: block;
}

#players {
    position: absolute
}

#billboard {
    width: 1280px;
    height: 720px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#mp4player {
    display: none;
}
#mp4player video {
    width: 100%;
}



#outro{
    display: none
}



#controls {
    z-index: 11;
    width: 20%;
    max-width: 140px;
    right:10vw;
    position: absolute;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    font-family: RioGrande, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
}

#controls .control {
    display: none
}

#controls.playing .control.pause {
    display: block;
}

#controls.paused .control.play {
    display: block;
}

#controls img{
    height: 5vw;
    max-height: 60px;
    margin-left: auto;
    margin-right: auto;
    padding:5px;
}


#controls .followsocial img{
    height: 2vw;
    max-height: 25px;
}

.creditsicon{

    margin-left: 15px;
    max-height: 60px;
    position: relative;
    top: 10px;
}