@font-face {
    font-family: 'blackoutmidnight';
    src: url('fonts/blackout-midnight-webfont.woff2') format('woff2'),
         url('fonts/blackout-midnight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'bellotaregular';
    src: url('fonts/Bellota-Regular-webfont.eot');
    src: url('fonts/Bellota-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Bellota-Regular-webfont.woff2') format('woff2'),
         url('fonts/Bellota-Regular-webfont.woff') format('woff'),
         url('fonts/Bellota-Regular-webfont.ttf') format('truetype'),
         url('fonts/Bellota-Regular-webfont.svg#bellotaregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


body{
  overflow-x:hidden;
}
  a:link {
    color: black;
    font-style: normal;
      text-decoration: none;
  }

  a:visited {
    color: black;
    font-style: normal;
    text-decoration: none;
  }

  a:hover {
    color: #999999;
    font-style: normal;
    text-decoration: none;
  }

  a:active {
    color: black;
    font-style: normal;
    text-decoration: none;
  }

  #menu{
    width:100%;
    height:100px;
      text-align: center;
      margin:auto;
      text-decoration: none;
      padding-left: 10%;
  }

  .menu{
    font-family: sans-serif;
    font-size:1vw;
    float: left;
    margin-left:10%;
  }


#main{
  width:90%;
  margin:auto;
}
.photo{

}

#pic1{
  float: left;
  background-image:url('images/pic1.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic2{
  float: left;
  background-image:url('images/pic2.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic3{
  float: left;
  background-image:url('images/pic3.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic4{
    float: left;
  background-image:url('images/pic4.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic5{
  float: left;
  background-image:url('images/pic5.jpg');
  background-size: cover;
  background-position: center;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic6{
  float: left;
  background-image:url('images/pic6.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic7{
  float: left;
  background-image:url('images/pic7.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic8{
  float: left;
  background-image:url('images/pic8.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic9{
  float: left;
  background-image:url('images/pic9.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic10{
  float: left;
  background-image:url('images/pic10.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic11{
  float: left;
  background-image:url('images/pic11.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

#pic12{
  float: left;
  background-image:url('images/pic12.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic13{
  float: left;
  background-image:url('images/pic13.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic14{
  float: left;
  background-image:url('images/pic14.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
  background-position: center;
}
#pic15{
  float: left;
  background-image:url('images/pic15.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic16{
  float: left;
  background-image:url('images/pic16.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic17{
  float: left;
  background-image:url('images/pic17.jpg');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}
#pic18{
  float: left;
  background-image:url('images/pic18.tif');
  background-size: cover;
  width:25vw;
  height:50vh;
  margin:2.45%;
}

.description{
  width:30%;
  padding:5%;
  font-size:1.5vw;
  float:left;
  float:right;
  margin-top:-5%;
  font-family: sans-serif;
}

.title{
  font-size:2vw;
  font-family: 'blackoutmidnight';
  width:30%;
  padding:5%;
  text-align: center;
  float:right;
  margin-top:10%;
}

.close{
  position:fixed;
  margin:20px;
  font-size:2vw;
  font-family: sans-serif;
  cursor: default;
  z-index: 10;
}

.popup{
  position:fixed;
  height:100%;
  width:100%;
  background:rgba(255, 255, 255, 0.9);
  display: none;
  margin-top: -4%;
}

#image1{
  float: left;
  background-image:url('images/pic1.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image2{
  float: left;
  background-image:url('images/pic2.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image3{
  float: left;
  background-image:url('images/pic3.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image4{
  float: left;
  background-image:url('images/pic4.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image5{
  float: left;
  background-image:url('images/pic5.jpg');
  background-size: cover;
  background-position: center;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image6{
  float: left;
  background-image:url('images/pic6.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image7{
  float: left;
  background-image:url('images/pic7.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image8{
  float: left;
  background-image:url('images/pic8.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image9{
  float: left;
  background-image:url('images/pic9.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image10{
  float: left;
  background-image:url('images/pic10.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image11{
  float: left;
  background-image:url('images/pic11.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image12{
  float: left;
  background-image:url('images/pic12.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image13{
  float: left;
  background-image:url('images/pic13.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image14{
  float: left;
  background-image:url('images/pic14.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}

#image15{
  float: left;
  background-image:url('images/pic15.jpg');
  background-size: cover;
  width:48vw;
  height:86vh;
  opacity:1;
  margin:3%;
  margin-left:6%;
  background-position: center;
}