img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}

/* div {
  box-shadow: 10px 10px;
} */

#grad {
  background-image: linear-gradient(blue, lightblue);
  height: 100%;
}

.header {
  color: #f2f2f2; /* white;  */
  background-color: blue;
  text-align: center;
  padding: 10px;
}


.iframe {
  border: none;
}


body {
  margin: 0;
}

h1 {
  font-family: Verdana;
}

/* Style the top navigation bar arrows */
.topnavArrow {
  overflow: hidden;
  float: left;
  width: 14%;
/*  width: 20%;
  background-color: blue;
  padding: 14px 16px;  */
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: blue;
  float: left;
  width: 16%;
/*  width: 20%;
  padding: 14px 24px;
  padding: 14px 16px;  */
}
.topnav a {
  color: #f2f2f2;
}
/* Change color on hover */
.topnav a:hover {
  background-color: teal;  /* clear */
  color: white;
}

#gMain {
  background-image: linear-gradient(blue, lightblue);
  position: absolute;
  width: 100%;
  height: 100%;
/*  z-index: -1; */
}

#featured {
  background-image: linear-gradient(blue, lightblue);
  /* background-color: teal; */
  color: white;
  position: absolute;
  left: 2%;
  width: 96%;
  height:  90%;
  border: none;  
}

* {
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
#featuredImg {
 /*  width:100%;
  height:100%; */
  width: 1400;
  margin-right:15px;
}

#mediaBox {
  
}
.imageButton {
   /* background-color: #008CBA; */
   background: transparent;
} /* Blue */

/* Web Audio inspired code follows... */

figure {
   max-width:64rem;
   width:100%;
   max-height:30.875rem;
   height:100%;
   margin:1.25rem auto;
   padding:1.051%;
   background-color:#666;
}

figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
}

.controls {
   width:100%;
   height:8.0971659919028340080971659919028%; /* of figure's height */
   position:relative;
}

.controls[data-state=hidden] {
   display:none;
}

.controls[data-state=visible] {
   display:block;
}

.controls > * {
   float:left;
   width:3.90625%;
   height:100%;
   margin-left:0.1953125%;
   display:block;
}

.controls > *:first-child {
   margin-left:0;
}



.controls > * {
   float:left;
   width:3.90625%;
   height:100%;
   margin-left:0.1953125%;
   display:block;
}

.controls > *:first-child {
   margin-left:0;
}


ls .progress {
   cursor:pointer;
   width:75.390625%;
}


ls .progress {
   cursor:pointer;
   width:75.390625%;
}


ls button {
   border:none;
   cursor:pointer;
   background:transparent;
   background-size:contain;
   background-repeat:no-repeat;
}

.controls button:hover, .controls button:focus {
   opacity:0.5;
}

.controls button[data-state="play"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAA ... ');
}

.controls button[data-state="pause"] {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAA ... ');
}

.controls progress {
   display:block;
   width:100%;
   height:81%;
   margin-top:0.125rem;
   border:none;
   color:#0095dd;
   -moz-border-radius:2px;
   -webkit-border-radius:2px;
   border-radius:2px;
}

.controls progress[data-state="fake"] {
   background:#e6e6e6;
   height:65%;
}
.controls progress span {
   width:0%;
   height:100%;
   display:inline-block;
   background-color:#2a84cd;
}

.controls progress::-moz-progress-bar {
   background-color:#0095dd;
}

.controls progress::-webkit-progress-value {
   background-color:#0095dd;
}

@media screen and (max-width:64em) {     
   figure {                              
      padding-left:0;                    
      padding-right:0;                   
      height:auto;                       
   }                                     
                                         
   .controls {                           
      height:1.876rem;                   
   }                                     
}                                        
                                         
@media screen and (max-width:42.5em) {                            
   .controls {                                                    
      height:auto;                                                
   }                                                              
                                                                  
   .controls > * {                                                
      display:block;                                              
      width:16.6667%;                                             
      margin-left:0;                                              
      height:2.5rem;                                              
      margin-top:2.5rem;                                          
   }                                                              
                                                                  
   .controls .progress {                                          
      position:absolute;                                          
      top:0;                                                      
      width:100%;                                                 
      float:none;                                                 
      margin-top:0;                                               
   }                                                              
                                                                  
   .controls .progress progress {                                 
      width:98%;                                                  
      margin:0 auto;                                              
   }                                                              
                                                                  
   .controls button {                                             
      background-position:center center;                          
   }                                                              
}