@charset "UTF-8";
/* CSS Document */

body,html {
    background-color: #333 !important;
    height: 100%;
}
.wrapper {
    width:100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
}


.header {
    position: absolute;
    left:0; top:0;
    width: 100%;
    z-index: 10;
}
.logo {
    margin:20px;
}
.logo img {
    max-width: 100px; height: auto;
}

.footer {
    position: absolute;
    left:0; bottom: 0;
    width:100%;
    padding:20px 0;
    z-index: 10;
}

#iziFrames {
    z-index: 5;
    width:100vw;
    height: 100vh;
    position: absolute;
    left:0; margin-top:16vh;
    transition: all 0.3s;
    box-sizing: content-box;
}
#iziFrames[data-framenums="2"] {
    margin-top:33vh;
}
.iziFrame {
    position: absolute;
    background-color: #000000;
    box-shadow: 0px 0px 50px rgba(0,0,0,1);
    transition: all 0.3s;
}

.iziFrame[data-framenums="1"] {
    width:70vw;
    height:40vw;
    left:15vw; top:0;    
}
.iziFrame[data-framenums="2"],.iziFrame[data-framenums="3"],.iziFrame[data-framenums="4"] {
    width:35vw;
    height:20vw;
    left:14vw; top:0;    
}
.iziFrame[data-framenum="2"] {
    left:51vw; top:0;
}
.iziFrame[data-framenum="3"] {
    left:14vw; top:22vw;
}
.iziFrame[data-framenum="4"] {
    left:51vw; top:22vw;
}





.iziFrame > iframe {
    width: 100%; height: 100%;
}


.optionsHolder {
    position: absolute;
    z-index: 10;
    top:0; right:0;
    background-color: #FFF;
    white-space: nowrap;
    width: 200px;
}
.optionsHolder > * {
    
}


.btn, .form-control {
    border-radius: 0;
    
}
.btn-default {
    border-color: #FFF;
}
.form-control {
    border-color: #FFF;
}