/*@font-face {
  font-family: TriviaSlabRegularBold;
  src: url("TriviaSlabRegularBold.eot");
}*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:700&subset=latin,latin-ext);

body{
  padding: 0;
  margin: 0;
  font-family: 'Roboto Slab', serif;
}

#wraper{
  width: 700px;
  margin-left: auto;
  margin-right: auto;
}
#header{width: 100%; display: block; padding-top: 30px;}
#contact{width: 180px; text-align: right; display: inline-block; cursor: pointer;}
#about{position: absolute; display: none;}
#about.active{display: inline-block;}
#about p{font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; padding: 8px 0 0 15px; margin: 0;}
#content{clear: both; width: 700px;}
#book-1-container, #book-2-container, #book-3-container{
  width: 180px; 
  height: 1344px; 
  margin: 0 15px; 
  float: right; 
  display: inline-block;
  background-size: 180px 1209px;
}
#book-1-container{background-image: url('img/book-osady.png');}
#book-2-container{background-image: url('img/book-mikulovice.png');}
#book-3-container{background-image: url('img/book-supikovice.png');}
.book{ text-align: center;}
#book-1, #book-2, #book-3{
  position: absolute;
  width: 180px; height: 1209px; 
  background: #fff;
  -webkit-transition: background-color 0.6s linear;
  -moz-transition: background-color 0.6s linear;
  -o-transition: background-color 0.6s linear;
  -ms-transition: background-color 0.6s linear;
  transition: background-color 0.6s linear;
}
#book-1:hover, #book-2:hover, #book-3:hover{
  background-color: transparent;
  -webkit-transition: background-color 0.6s linear;
  -moz-transition: background-color 0.6s linear;
  -o-transition: background-color 0.6s linear;
  -ms-transition: background-color 0.6s linear;
  transition: background-color 0.6s linear;
}
h1{font-size: 14px; font-weight: normal;}
h2{font-size: 18px; padding-top: 81px;}
#book-1 h2{padding-top: 61px;}
a{text-decoration: none; color: #000;}
#galery{
  padding: 10px;
  max-width: 1500px;        
  margin-left: auto;
  margin-right: auto;
}
#galery img{width: 100%; margin-bottom: 10px;}
#back{
  position: fixed;
  top: 15px;
  right: 15px;
  font-weight: bold;
  color: #999;
  font-size: 28px;
}