/*video container*/
.videoContainer {
    position: relative;
    display: inline-block;
    width:100%;
    background-color:black;
}

            /*this doesnt work, I would like it to but can set max height at moment. might need pro vimeo account to do so
            .playerDiv{

                
            }
            #videoPlayer{
             /*56.25vw;  Given a 16:9 aspect ratio, 9/16*100 = 56.25 /
            min-height: 0vw;
            max-height:80vh;
            width: 100vw; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 /
            }
            **************************************************************************************/

/* audio button style */



/*@media (orientation: landscape) {
    .slidingImageGallerycontainer {
        height:17.5vw;
    }
}

@media (orientation: portrait) {
    .slidingImageGallerycontainer {
        height:25vh;
    }
}
*/



    
    .horizontalVideoPlayerDIV{
        width:100%; 
        display: flex;   
        flex-direction: column;
    }



/**************************************
**makes video fullscreen when rotated on phone
**this section is what is seen on desktop
****************************************/
@media screen and (min-width: 1001px) {
     .audio-control {
        opacity: .5;
        position: absolute;
        transition: opacity 0.3s;
        right: 5%;
        top:5%;
        z-index: 5;
        width:90%;
        height:90%;
       /* right: 1.5%;
        bottom:1.5%;
        z-index: 5;
        width:3.5vw;
        height:3.5vw;*/
    }
        .verticalVideoPlayerDIV{
        width:100vw;
        display: flex;
        justify-content: space-around;
        flex-direction: row-reverse;
        align-items:flex-end;
        /*background-color:blue;*/
    }
}


/*******************************
**this section is on mobile when vertical aka portraiat
*********************************/
@media screen and (max-width: 1000px) {
    .audio-control {
        font-size:1em;
        opacity: .5;
        position: absolute;
        transition: opacity 0.3s;
        right: 5%;
        top:5%;
        z-index: 5;
        width:90%;
        height:90%;
       /* right: 1.5%;
        bottom:1.5%;
        z-index: 5;
        width:3.5vw;
        height:3.5vw;*/
    }
    .verticalVideoPlayerDIV{
        width:100vw; 
        display: flex;   
        flex-direction: column;
        align-items: center;
        /*background-color:green;*/
    }
}

/*******************************
**this section is on mobile when horizontal aka landscape
*********************************/
@media (orientation: landscape) and (max-width: 1000px) {
/*    .mobile-topnav {
        display:none;
    }*/
    .horizontalVideoPlayerDIV #videoContainerDIV{
        background-color:black;
        position: fixed;
        width:100vw;
        height:100vh !important;
        top:0;
        left:0;
        z-index:2000;
    }
    .horizontalVideoPlayerDIV #videoPlayer_sizer, #videoPlayer, #videoPlayer div:first-child{ /*#videoPlayer div:first-child{ #videoPlayer iframe,   /*#videoPlayer_sizer, #videoPlayer, , #videoPlayer div:first-child iframe:first-child{*/
        width:100vw;
        height:100% !important;
        padding:0 !important;
    }
    .horizontalVideoPlayerDIV #Description{
        display:none;
    }
    
        .verticalVideoPlayerDIV{
        width:100vw;
        display: flex;
        justify-content: space-around;
        flex-direction: row-reverse;
        align-items:flex-end;
        /*background-color:yellow;*/
        
    }

}
/*************************************end full screen rotate code**********/









.audio-control:hover {
	 opacity: 1;
}
 .audio-control.unmuted{
    /*background-image: url("/img/volumeControl/volume.png");
    background-repeat: no-repeat;
    -webkit-background-size: 80%;
    -moz-background-size: 80%;
    -o-background-size: 80%;
    background-size: 80%;*/
 }
.audio-control{
    z-index: 6;
}
.audio-control.muted div{
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height:100%;
}
 .audio-control.muted div span:before{
    margin:auto;
    font-weight: bold;
    color: white;
    content: "UNMUTE";
    font-size: 1.5vw;
    
    /*
    background-image: url("/img/volumeControl/mute.png");
    background-repeat: no-repeat;
    -webkit-background-size: 80%;
    -moz-background-size: 80%;
    -o-background-size: 80%;
    background-size: 80%;
    */
 }
 
 
.play-pause-control {
    position: absolute;
    right: 5%;
    top:5%;
    z-index: 5;
    width:90%;
    height:90%;
}
.play-pause-control img{
    width:3%;
    opacity:0;
}

.play-pause-control div{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}
.play-pause-control.playing{
     opacity:0;
 }

.audio-control.paused img:hover {
	 opacity: 1;
}
.play-pause-control.paused{
    z-index: 7 !important;
}
 .play-pause-control.paused img{
    opacity:0.5;
    transition: opacity 0.3s;
    
 }