/*
Theme Name: album of us 2.0
Theme URI: http://albumofus.com
Author: Brian Manning
Author URI: http://brimanning.com/
Description: A theme for album of us, a visual travel blog following Brian Manning (http://brimanning.com) and Missy Manning (http://missymanning.com).
Version: 2.0
Text Domain: albumofus
*/

body{
  text-align: center;
  background: url(img/topography3.jpg);
  font-family: sans-serif;
  min-height: 100%;
  margin: 0px;
  position: relative;
}


html{
  min-height: 100%;
  margin: 0px;
}

.banner {
    color: black;
    background-color: white;
    margin-top: .6%;
    text-align: center;
    height: 45px;
    box-shadow: 1px 3px 10px #131212;
}

.logohome {
    background-image: url(img/albumofus-640.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 100%;
    width: 50px;
    display: inline-block;
    padding: 0%;
    margin: 0%;
}

div.bannertext {
  font-size: 10.5px;
  float: right;
  margin-right: 18%;
  position: relative;
}

div.photos {
    min-width: 320px;
    max-width: 1100px;
    margin: 9px auto;
    width: 100%;
}

div.bottomphotos{
  width: 33%;
  margin-top: 0%;
  float: right;
}

div.centerphoto {
  position: relative;
  box-shadow: 1px 3px 10px #131212;
  width: 66%;
  float: left;
}

.centerphoto:hover .metadata {
  opacity: 0.8;
}

.centerphoto:hover .previous,
.centerphoto:hover .next {
  opacity: 0.92;
}

div.bottomleftphoto {
  position: relative;
  padding-bottom: 98%;
  width: 100%;
  overflow: hidden;
  box-shadow: 1px 3px 10px #131212;
  /* float: left; */
  margin-bottom: 8px;
}

div.bottomrightphoto {
  position: relative;
  padding-bottom: 100%;
  width: 100%;
  overflow: hidden;
  box-shadow: 1px 3px 10px #131212;
  float: right;
}

div.bottomrightphoto.enlarged {
    width: 300%;
  }

.bottomrightdescription {
  padding-top: 4%;
  padding-bottom: 4%;
  font-size: 9px;
  position: absolute;
  width: 98%;
  color: #272626;
  font-family:sans-serif;
  z-index: 2;
  bottom: 0;
  opacity: 0;
  background-color: white;
  text-align: left;
  padding-left: 2%;
  transition: opacity .5s;
}

.bottomrightphoto:hover .bottomrightdescription {
  opacity: 0.8;
}

img.main {
  width: 100%;
  display: block;
}

iframe.bottomleft{
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

img.bottomright{
  position: absolute;
  height: 100%;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.previous, .next {
    position: absolute;
    height: 10%;
    width: 4%;
    z-index: 2;
    top: calc(50% - 55px);
    opacity: 0;
    transition: opacity .5s;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.previous {
    left: 3%;
    background-image: url(img/leftarrow.png);
}

.next {
    right: 3%;
    background-image: url(img/rightarrow.png);
}

.metadata {
    padding-top: 2%;
    padding-bottom: 2%;
    font-size: 11px;
    position: absolute;
    width: 100%;
    color: #000000;
    font-family:sans-serif;
    z-index: 2;
    bottom: 0;
    opacity: 0;
    background-color: white;
    transition: opacity .5s;
    text-align: left;
}

.mileage {
    padding-left: 2%;
}

.location {
    padding-right: 2%;
    float: right;
}

#wpstats {
    display: none;
}

.clear {
    clear: both;
}

@media only screen and (min-width: 400px) {
    .banner {
	height: 75px;
     }
    .logohome {
	width: 85px;
     }
}

@media only screen and (min-width: 768px) {
    .banner {
	height: 110px;
	}
    .logohome {
	width: 130px;
	}
    .metadata {
	font-size: 14px;
     }
    .bottomrightdescription {
	font-size: 12px;
     }
}