@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

#viewport{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
}
#iteam-wrapper{
    position:absolute;
    width:100vw;
    height:100vh;
    z-index: -10;
}
#ivideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#iplane-wrapper{
    opacity:0;
    position:absolute;
    top:-50%;
    left:-100%;
    transform: translateY(-50%);
    height:50vh;
    padding:0 50vw;
    transition-duration: 1000ms;
    -moz-transition-duration: 1000ms;
    -webkit-transition-duration: 1000ms;
    transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
.plane-curtain{
    height:100%;
    float:left;
    position:relative;
}
.plane-section{
    height:100%;
    float:left;
    position:relative;
}
.plane-section img{
    height:100%;
}
.plane-section.rear img{
    position: relative;
    top: -123.2%;
    height: 223.2%;
}
.plane-section>.imember,
.plane-section>.plane-window,
.plane-section>.plane-curtain{
    position: absolute;
    top:0;
    left:0;
}
.plane-section>.plane-curtain{
    z-index: 10;
}
.plane-section>.plane-block{
    position:relative;
    z-index:20;
}
.plane-section>.plane-window{
    z-index: 30;
}
#imember-caption-left{
    padding-top:7vh;
    display:none;
    height:50vh;
    position:fixed;
    top:24vh;
    left:50%;
    transform: translateX(-50%);
    z-index:10;
    text-align: center;
    transition-duration: 1000ms;
    -moz-transition-duration: 1000ms;
    -webkit-transition-duration: 1000ms;
    transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
#imember-name-left{
    font-family: Montserrat;
    color:#435363;
    margin:0;
    padding: 0;
}
#imember-position-left{
    font-family: Montserrat;
    color:#435363;
    margin:0;
    position:relative;
    /*top:20vh;*/  
    bottom: -19vh;
    padding: 0 1vw;
}
#imember-name-left{
    font-weight:bold;
}
#imember-caption-center{
    padding-top:7vh;
    display:none;
    height:50vh;
    position:fixed;
    top:24vh;
    left:50%;
    transform: translateX(-50%);
    z-index:10;
    text-align: center;
    transition-duration: 1000ms;
    -moz-transition-duration: 1000ms;
    -webkit-transition-duration: 1000ms;
    transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
#imember-name-center{
    font-family: Montserrat;
    color:#435363;
    margin:0;
    padding: 0;
}
#imember-position-center{
    font-family: Montserrat;
    color:#435363;
    margin:0;
    position:relative;
    /*    top:20vh;  */
    bottom: -19vh;  
    padding: 0 1vw;
}
#imember-name-center{
    font-weight:bold;
}
#imember-caption-right{
    padding-top:7vh;
    display:none;
    height:50vh;
    position:fixed;
    top:24vh;
    left:50%;
    transform: translateX(-50%);
    z-index:10;
    text-align: center;
    transition-duration: 1000ms;
    -moz-transition-duration: 1000ms;
    -webkit-transition-duration: 1000ms;
    transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
}
#imember-name-right{
    font-family: Montserrat;
    color:#435363;
    margin:0;
    padding: 0;
}
#imember-position-right{
    font-family: Montserrat;
    color:#435363;
    margin:0;
    position:relative;
    /*top:20vh;*/
    bottom: -19vh;
    padding: 0 1vw;
}
#imember-name-right{
    font-weight:bold;
}
#div-navigation{
    position: fixed;
    left:50%;
    bottom:4vh;
    transform: translateX(-50%);
    z-index: 100;
}
#div-navigation img{
    float:left;
    margin: 0 1vw;
    cursor: pointer;
}
#plane-wing{
    position: fixed;
    top: 2.5%;
    left: 45%;
    transform: translateX(-50%);
    z-index: 50;
}
@media (min-aspect-ratio: 16/9) {
    #ivideo {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9) {
    #ivideo {
        width: auto;
        height: 100%;
    }
}

@media (max-width: 576px){
    /*    #iteam-wrapper{
            transform:scale(0.8);
        }*/
    #div-navigation{
        display:none;
    }
    #imember-name-left {
        font-size: 3.5vw;
        height:10vw;
    }
    #imember-name-center {
        font-size: 3.5vw;
        height:10vw;
    }
    #imember-name-right {
        font-size: 3.5vw;
        height:10vw;
    }
    #imember-position-left {
        font-size: 3vw;
        height:4vw;
    }
    #imember-position-center {
        font-size: 3vw;
        height:4vw;
    }
    #imember-position-right {
        font-size: 3vw;
        height:4vw;
    }
}

@media (min-width: 576px){
    #div-navigation img {
        width: 6.5vw;
    }
    #imember-name-left {
        font-size: 1.8vw;
    }
    #imember-position-left {
        font-size: 1.7vw;
    }
    #imember-name-center {
        font-size: 1.8vw;
    }
    #imember-position-center {
        font-size: 1.7vw;
    }
    #imember-name-right {
        font-size: 1.8vw;
    }
    #imember-position-right {
        font-size: 1.7vw;
    }
}

@media (min-width: 768px){
    #div-navigation img {
        width: 5vw;
    }
    #imember-name-left {
        font-size: 1.2vw;
    }
    #imember-position-left {
        font-size: 1.1vw;
    }
    #imember-name-center {
        font-size: 1.2vw;
    }
    #imember-position-center {
        font-size: 1.1vw;
    }
    #imember-name-right {
        font-size: 1.2vw;
    }
    #imember-position-right {
        font-size: 1.1vw;
    }
}

@media (min-width: 992px){
    #div-navigation img {
        width: 4vw;
    }
    #imember-name-left {
        font-size: 1vw;
    }
    #imember-position-left {
        font-size: 0.9vw;
    }
    #imember-name-center {
        font-size: 1vw;
    }
    #imember-position-center {
        font-size: 0.9vw;
    }
    #imember-name-right {
        font-size: 1vw;
    }
    #imember-position-right {
        font-size: 0.9vw;
    }
}

@media (min-width: 1200px){
    #imember-caption-left,
    #imember-caption-center,
    #imember-caption-right
    {
        top: 27vh;
    }
    #div-navigation img {
        width: 3vw;
    }
    #imember-name-left,
    #imember-name-center,
    #imember-name-right  {
        font-size: 14px;
        height:2vw;
    }
    #imember-position-left,
    #imember-position-center,
    #imember-position-right {
        font-size: 14px;
        height:3vw;
    }
}