*{padding:0; margin:0;}

/*IE SVG Width Fix*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
    #hurricane-map-landscape, #hurricane-map-portrait{
      width:100%;
      height:608px;
    }
}

html,
body {
    font-family: "Source Sans Pro", sans-serif;
    height:100%;
}

caption{
  display: table-caption;
}

#overcast{
  background: rgba(0,0,0,.2);
  height:100%;
}

a{
  color:rgb(0,51,102);
  font-weight:600;
  word-wrap: break-word;
  text-decoration:none;
}

#textSection,
#map-figure,
#imageContainer{
  padding:10px 10px 0 10px;
  font-size:.9em;
}

figurecaption{
  line-height:1.5em;
  font-size:1.1em;
}

#textSection h2,
#textSection h3{
  font-weight:400;
  margin-bottom:10px;
}

#textSection p,
#imageContainer p{
  margin-bottom:10px;
  font-size:1.1em;
}

#textSection a:hover{
  text-decoration:underline;
}

#playButton{
  display:none;
  background:rgb(0,51,102);
  background:rgba(0,51,102,.4);
  position: absolute;
  margin: auto;
  text-align: center;
  left:0; right:0;
  top:0; bottom:0;
  height:75px;
  width:75px;
  border-radius:45px;
  border:none;
  outline:none;
  font-size:24px;
  font-weight:bold;
}

#playButton img{
  width:35px;
  margin:7px auto 0 6px;
}

#map-figure figure {
  text-align: center;
}


#figureButtonCenter{
  position: relative;
}

.imageContent,
.imagesDescription{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  margin-bottom:10px;
}

#imageContainer .imagesDescription p{
  font-size:.7em;
}

.image,
.imagesDescription p{
  flex:1;
  margin-right:10px;
}

.image:last-child,
.imagesDescription p:last-child{
  margin-right:0;
}

.image img{
  width:100%;
}

@media screen and (min-width:768px){
  #textSection,
  #map-figure,
  #imageContainer{
    width:760px;
    margin:10px auto 10px auto;
    font-size:1em;
  }
}

@media screen and (min-width:1200px){
  #textSection,
  #map-figure,
  #imageContainer{
    width:960px;
  }
}

/* following two rules could be moved to vizlab css
 if it existed and was consistantly used */
@media screen and (orientation:portrait){
  .vizlab-landscape:not(.vizlab-portrait){
    display: none;
  }
}

@media screen and (orientation:landscape){
  .vizlab-portrait:not(.vizlab-landscape){
    display: none;
  }
}

.footerThumnail {
  width: 150px;
}