.audio,
.footer {
    position: absolute;
    left: 0;
    text-align: center
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans';
    font-size: 18px;
    background-size: cover;
    background-repeat: no-repeat!important;
    background-position-x: center!important;
    background-color: #000!important
}

.footer {
    position: fixed;
    font-family: 'Agency FB', Arial;
    font-size: 24pt;
    width: 100%;
    bottom: 0;
    padding: 3px;
    background-color: #000
}

.audio {
    position: fixed;
    width: auto;
    bottom: 1%;
    padding: 2%
}

.flex-container>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 98%;
    height: 80%;
    margin: 2%;
    text-align: center;
    line-height: 0
}

.IgwLogo,
.VavelLogo {
    width: auto;
    height: auto;
    margin: 10px auto
}

.IgwLogo {
    max-width: 70%;
    max-height: 70%
}

.VavelLogo {
    max-width: 8%;
    max-height: 8%
}

.video-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100
}

.video-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -100
}

.focus-effect {
    -moz-opacity: .8;
    -khtml-opacity: .8;
    opacity: .8
}

img:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

@media screen and (max-height:620px) {
    .flex-container>div {
        margin: 0
    }
}

@media screen and (max-height:850px),
screen and (max-width:800px) {
    .shrinkbot {
        display: none
    }
}

@media screen and (max-height:900px) {
    .VavelLogo {
        max-width: 4%;
        max-height: 4%
    }
}

.focustext {
    -moz-opacity: .7;
    -khtml-opacity: .7;
    opacity: .7
}

.focustext:hover {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1
}

.sound-btn-effect {
    -moz-opacity: .55;
    -khtml-opacity: .55;
    opacity: .55;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.sound-btn-effect:hover {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4)
}

.side-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 425px;
    font-family: 'Agency FB', Arial;
    color: #fff;
    font-size: 2.5em;
    padding: 0;
    margin: 0;
    border: 0;
}

.warfront-panel {
    position: absolute;
    bottom: 44px;
}

.background-frame1-1 {
    background-size: 100% 97%;
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
    height: 620px;
}

.background-frame1-2 {
    background-image: url(img/Background_Frame_1.png);
    background-size: 100% 92%;
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 5px;
    padding-bottom: 0;
    background: rgba(7, 47, 95, .253);
    height: 246px;
}

.background-frame2-1 {
    background-image: url(img/Background_Frame_2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: bottom;
    text-align: center;
    padding-top: .15em
}

.background-frame2-2 {
    background-image: url(img/Background_Frame_2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: bottom;
    text-align: center;
    padding-top: .15em
}

@media screen and (max-height:1000px) {
    .background-frame1-2 {
        height: 246px padding-top: 25px
    }
    .background-frame1-1 {
        height: 580px
    }
}

@media screen and (max-height:950px) {
    .background-frame2-2 {}
    .background-frame1-2 {
        height: 246px
    }
    .background-frame1-1 {
        height: 530px
    }
}

@media screen and (max-height:900px) {
    .background-frame2-2 {}
    .background-frame1-2 {
        height: 246px
    }
    .background-frame1-1 {
        height: 500px
    }
}

@media screen and (max-height:880px) {
    .background-frame2-2 {}
    .background-frame1-2 {
        height: 246px padding-top: 18px
    }
    .background-frame1-1 {
        height: 480px
    }
}

@media screen and (max-height:860px) {
    .background-frame1-1 {
        height: 450px
    }
    .background-frame2-2 {}
    .background-frame1-2 {
        height: 246px padding-top: 18px
    }
}

@media screen and (max-height:840px) {
    .background-frame1-1 {
        height: 420px
    }
    .background-frame2-2 {}
    .background-frame1-2 {
        height: 246px padding-top: 18px
    }
}

@media screen and (max-height:810px) {
    .background-frame1-1 {
        height: 350px
    }
    .background-frame2-2 {}
    .background-frame1-2 {
        height: 246px padding-top: 18px
    }
}

@media screen and (max-height:750px) {
    .background-frame1-1 {
        height: 290px;
    }
    .background-frame1-2 {}
}

@media screen and (max-height:650px) {
    .background-frame1-1 {
        height: 210px;
    }
    .background-frame2-2 {
        display: none
    }
}

@media screen and (max-height:550px) {
    .background-frame1-1 {
        height: 150px;
    }
    .background-frame2-1 {
        display: none
    }
    .background-frame2-1 {
        display: none
    }
}

@media screen and (max-height:500px) {
    .background-frame1-1 {
        display: none
    }
    .background-frame1-2 {
        display: none
    }
    .background-frame2-2 {
        display: none
    }
}

@media screen and (max-width:1200px) {
    .side-panel {
        display: none
    }
}

@font-face {
    font-family: 'Agency FB';
    src: url(fonts/AgencyFB-Reg.woff) format('woff'), url(fonts/AgencyFB-Reg.ttf) format('truetype');
    font-weight: 400;
    font-style: normal
}