/* Released: 28th April 2014 - Beverley Hooton @ Focus on Function Web Design - http://fofwebdesign.co.uk */
/* Updated: 24th October 2014 - better placement for modal image in mobile view */
/* Updated: 26th June 2015 - ◄ arrows changed to ► and rotated, for Android */
#video-sec {
  margin: 0;
  padding: 0;
  font: 16px/1.75 Verdana, Arial, Helvetica, sans-serif;
}
#video-sec .page-content {
  padding: 0 1em 1em;
  max-width: 64em;
  margin: auto;
}

/* #### - gallery thumbs - #### */
#video-sec #gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  display: table;
  *overflow: hidden;
}

/* #### - modal overlay plus contents - #### */

#video-sec #gallery .overlay {
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 9999;
  text-align: center;
  background: rgba(0, 0, 0, 0.75);
}

#video-sec #gallery .overlay div p {
  font-size: 0.875em;
  text-align: center;
  max-width: 60em;
  margin: 0 auto;
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 2em;
}
#video-sec #gallery .overlay div a {
  display: inline;
  text-decoration: none;
}
#video-sec #gallery .overlay img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  opacity: 0;
  float: center;
  margin: 0;
  top: 48%;
  left: 50%;
  background-color: #ffffff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);    
    border-radius: 4px;
    padding: 80px 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}
#video-sec #gallery .overlay:target {
  width: auto;
  height: auto;
  bottom: 0;
  right: 0;
  padding: 0.5em 0 5em;
}
#video-sec #gallery .overlay:target img {
  opacity: 1;
}

/* #### - gallery controls - #### */

#video-sec .overlay-footer {
  margin-top:0px;
}

#video-sec #gallery .close { 
  z-index: 1001;
  float: inherit;
  font-size: 18px;
  color: #fff;
  background: #2196F3;
  padding:10px 16px;
  border-radius: 4px;
}
#video-sec #gallery .close:hover {
  background: #555;
}


#video-sec #gallery .overlay div {
    position: relative;
    bottom: auto;
  }
#video-sec #gallery .overlay img {    
    border-radius: 0.3125em;
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;    
  }
#video-sec #gallery .overlay:target {
    padding-top: 2.875em;
  }

/* #### - app fonts - #### */

#video-sec .fjalla-title {
    font-family: 'Fjalla One', sans-serif;
    font-size: 2.125rem;
    color: #673AB7;
    line-height: 120%;
    margin-top: 24px;
}

#video-sec .sop-modal-header {
  margin-bottom: -60px;
  position:relative;
  z-index:100;
  padding:0 24px;  
  font-size: 18px; 
  font-size: 3vw;
  font-size: 4vh;
}
  

#video-sec .media-wrapper {
  margin:0 auto;
    height:60vh;
  text-align:center;
  overflow:hidden;
    max-width:107vh;
}

#video-sec iframe{
height:100%;
width:100%;
}