html, body{
  width:100%;
}
#content {
  display: block;
  height: 100%;
  margin: 0;
}

 @media screen and (max-width: 485px){
   #container{ margin:8px;}
   .row img{width:10%; height auto;}
    #content {font: 200 15px/1 "Lato", sans-serif;}
      #info{width:80%;padding: 10px 5px;}
}
@media screen and (min-width: 485px){
  #container{ margin:80px;}
  #hoverimg{
  display:inline-block;
  width:100%;}
  #container img{
     max-height: 40px;
     width: auto;  }
  #content {font: 400 15px/1.8 "Lato", sans-serif;}
  #info{width:40%;padding: 100px 50px;}
      
}
.bgimg-1, .bgimg-2 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.bgimg-1 {
  background-image: url("/images/about201706_901.png");
  min-height: 600px;
}

.bgimg-2 {
  background-image: url("/images/about201706_902.png");
  min-height: 400px;
}
.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

#about{width:100%;
  color: #777;
  background-color:#999999;

}




#container{

  display:inline-block;
    padding: 10px 10px 6px 10px;
     border:3px solid #666666;
     border-radius: 5px;
     background: #595959;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }

.row{width: 100%;text-align: left;}
   #container img{
     opacity: 0.6;
     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
     transition: all 8000ms ease;
   }
   #container img:hover{
     opacity: 1.0;
     box-shadow: 0 0 0 2px rgba(128, 255, 255, 0.2);
     transition: all 80ms ease;
   }

#info{
  display: inline-block;

  text-align:center;
  text-align: justify;
  color: #262626;

  float: right;
margin:50px;
}