/* Make elements as high as viewport */

 
/* Video background */

.videobg {
  position: relative;
  width: 100%; /* Set video container element width here */
   
  overflow: hidden;
  background: #111; /* bg color, if video is not high enough */
}
@media only screen and (min-width :320px) {
.videobg {
     height: auto;
}
    }
         @media only screen and (min-width :360px) {
.videobg {
 height: auto;
}
    }
     @media only screen and (min-width : 480px) {
.videobg {
 height: auto;
}
  
    }
        
     @media only screen and (min-width : 600px) {
 .videobg {
  height: auto;
}
  
    }
       @media only screen and (min-width : 768px) {
 .videobg {
    height: auto;
}
              }     
 @media only screen and (min-width : 992px) {
 .videobg {
       height: 70%;
              }
    } 
   
/* horizontally center the video */
.videobg-width {
  position: absolute;
  width: 100%; /* Change width value to cover more area*/
  height: 100%;
  left: -9999px;
  right: -9999px;
  margin: auto;
}

/* set video aspect ratio and vertically center */
.videobg-aspect {
  position: absolute;
  width: 100%;
  height: 0;
  top: -9999px;
  bottom: -9999px;
  margin: auto;
  padding-bottom: 56.25%; /* 16:9 ratio */
  overflow: hidden;
  
}

.videobg-make-height {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.videobg-hide-controls {
  box-sizing: content-box;
  position: relative;
  height: 100%;
  width: 100%;
  /* Vimeo timeline and play button are ~55px high */
  padding: 55px 97.7777px; /* 16:9 ratio */
  top: -55px; 
  left: -97.7777px; /* 16:9 ratio */
}

.videobg iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: 0 none;
} 


.videoWrapper {
    position: relative;
     padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

    .videoWrapper iframe {
        position: absolute;
        top: -8px;
        left: 0;
        width: 100%;
        height: 100%;    border: 0;
    }
        
        
          .banner-container {
  width: 100%;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}

.bkgd-image-style {
  position: relative;
  width: 100%;
}

.video-wrapper {
  width: 100%;
  position: relative;
  top: 0px;
overflow:hidden
}
       @media  (min-width : 320px) {
.audio-control {
   width: 34px;
    height: 35px;
    font-size: 21px;
    }    .videobg {
  height: auto;
} }
 
     @media  (min-width : 480px) {
.audio-control {
  
     width: 38px;
    height: 38px;
    font-size: 21px;   }
    
    .videobg {
  height: auto;
}
    }
  
        
     @media   (min-width : 600px) {
 .videobg {
  height: auto;
}
  
.audio-control {
  
        width: 35px;
    height: 35px;
    font-size: 21px;
}
    }
       @media only screen and (min-width : 768px) {
 .videobg {
    height: auto;
}
              }     

     
a.play-pause-button {
  width: 50px;
  height: 50px;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-container:hover + .video-control {
  
}
.embed-container iframe #player .controls-wrapper {
  display: none;
}

/* video button style */
.video-control {
opacity: 1;
    position: absolute;
    width: 35px;
    height: 35px;
    top: 3%;
   right: 52px;
}
.video-control:hover {

}
.video-control:before, .video-control:after {
  content: '';
  width: 100%;
  height: 100%;
  max-width: 131px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  position: absolute;font-size: 18px;color: #659fa0;background-color:#fff; padding:10px; border-radius:8px;color: #659fa0;
}
.video-control:before {
    content: "\f04b";
  /*content: "\ea1c";*/
}
.video-control:after {
  content: "\f04c";
  /*content: "\ea1d";*/
}
.video-control.paused:after, .video-control.playing:before {
  opacity: 0;
}

 

/* audio button style */
.audio-control {
  opacity: 1;
  position: absolute;
      
  top: 3%;
 right: 10px;
  transition: opacity 0.3s; background-color:#fff; padding:10px; border-radius:8px;color: #659fa0;
}
.audio-control:hover {
  opacity: 1;
}
.audio-control:before, .audio-control:after {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  max-width: 36px;
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;    
}
.audio-control:before {
content: "\f028";top: 8px;
    left: 8px;
}
.audio-control:after {
  content: "\f026";top: 8px;
    left: 8px;
}
.audio-control.unmuted:after, .audio-control.muted:before {
  opacity: 0;
}

/* default style */
body {
margin:0px;
}

.title-wrapper {
  text-align: center;
  margin: 3% 0;
  font-size: 2.5vw;
}
.title-wrapper span {
  color: #fff;
}   
    .visible-android {
  display:none;
}
.visible-ios {
  display:none;
}
.on-device .visible-android, .on-device .visible-ios {
  display:inherit;
}
.device-ios .visible-android {
  display:none !important;
}
.device-ios .hidden-ios {
  display:none !important;
}
.device-android .hidden-android {
  display:none !important;
}
.device-android .visible-ios {
  display:none !important;
}