body{
background-color: rgba(220,220,220,1);
}

#title{
position: relative;
font-family: sans-serif;
font-size: 1.5em;
color: rgba(98,98,98,1);
text-align: center;
}

/*#background{
background-color: rgba(220,220,220,1);
position: relative;
height: 600px;
width:1150px;
top: 150px;
}*/
#wrapper{
position:absolute;
top:100px;
/*left:200px;*/
margin-left: auto;
margin-right: auto;
left:0;
right:0;
height:700px;
width:750px;
}

#pic {
  width:350px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic img{
width: inherit;
height: inherit;
}

#pic:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic:after {
  display: block;
  background-color: rgba(240, 124, 15, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: 2% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 5%;
  width: 94%;
  z-index: 3;
}

#pic img {
  border: none;
  display: block;
  z-index: 1;
}

#pic:before,
#pic:after,
#pic img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic:hover:before {
  opacity: 0.3;
}

#pic:hover:after {
  left: 0;
}
/*-------------------------------------------------*/

#pic2 {
  width:350px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic2 img{
width: inherit;
height: inherit;
}

#pic2:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  /*height: 100%;*/
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic2:after {
  display: block;
  background-color: rgba(240, 124, 15, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  font-size:1.5em;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: /*2% 3%*/25% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  vertical-align:-50%;
  top:0%;
  width: 94%;
  height:100%;
  z-index: 3;
}

#pic2 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic2:before,
#pic2:after,
#pic2 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic2:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic2:hover:before {
  opacity: 0.3;
}

#pic2:hover:after {
  left: 0;
}

/*-----------------------------------------------------------*/

#pic3 {
  width:350px;
  height:200px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;

}

#pic3 img{
width: inherit;
height: inherit;
}

#pic3:before {
  display: block;
  /*background-color: rgb(0, 0, 0);*/
  background-color: #ffffff;
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic3:after {
  display: block;
  background-color: /*rgba(240, 124, 15, 0.8)*/ rgba(0, 0, 0, 0.8);
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff;
  content: attr(title);
  left: -100%;
  padding: 2% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 84%;
  width: 94%;
  z-index: 3;
}

#pic3 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic3:before,
#pic3:after,
#pic3 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic3:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic3:hover:before {
  opacity: 0.3;
}

#pic3:hover:after {
  left: 0;
}
/*-------------------------------------------------*/

#pic4 {
  width:auto;
  height:auto;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  margin: 3px;

}

#pic4 img{
width: 350px;
height: inherit;
}

#pic4:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

#pic4:after {
  display: block;
  background-color: #fa2133;
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff;
  content: attr(title);
  /*left: -100%;*/
  bottom: -100%;
  padding: 2% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  /*top: 5%;*/
  width: 94%;
  z-index: 3;
}

#pic4 img {
  border: none;
  display: block;
  z-index: 1;
}

#pic4:before,
#pic4:after,
#pic4 img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

#pic4:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

#pic4:hover:before {
  opacity: 0.3;
}

#pic4:hover:after {
  /*left: 0;*/
  bottom: 0;
}