@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

/* font-family: 'Open Sans', 'sans-serif'; */
.image-grid {
}

body{

      background-color:#FFFFFF;

}
.nav_text {
	font-family: Arial, Helvetica, sans-serif;
	left: 45px;
	top: 22px;
	position: absolute;
	width: 226px;
	line-height: 24px;
	color: #5F0406;
}
.portfolio_header {
	position: absolute;
	left: 2px;
	top: 50px;
	width: 400px;
}
a:link {
	color: #5F0406;
}
a:visited {
	color: #470203;
}
a:hover {
	color: #470203;
}
body {
	background-image: url(images/bkgradient4_500.jpg);
	background-repeat: repeat-x;
}
a:active {
	color: #9B9B9B;
}
.icon {
	position: absolute;
	left: 661px;
	top: 11px;
}
.style14 {font-size: 16px}

#image-grid{
left: 20px;
	right: auto;
	
	top: 150px;
	position: absolute;
      margin:0px;

}
.custom-col{

      padding:10px;
      overflow:hidden;

}
.img-button{

   cursor:pointer;

}
.img-button > .caption{

   -webkit-transition: all 0.4s ease;

-moz-transition: all 0.4s ease;

-o-transition: all 0.4s ease;

transition: all 0.4s ease;

bottom:-30%;

opacity:0;
 
	position: absolute;

   bottom:-30;

   width: 100%;

   height: 100%;

   text-align: center;

   background-image: -webkit-linear-gradient(270deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

   background-image: -moz-linear-gradient(270deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

   background-image: -o-linear-gradient(270deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

   background-image: linear-gradient(180deg,rgba(59,59,59,0.00) 0%,rgba(0,0,0,0.50) 72.02%);

}

.img-button:hover > .caption{

   -webkit-transform: translate(0em,-30%);

   -moz-transform: translate(0em,-30%);

   -o-transform: translate(0em,-30%);

   transform: translate(0em,-30%);

   opacity:100;

}
.img-button > .caption p{

   position: absolute;

   bottom: 0;

   width: 85%;

   margin: 20px;

   font-family: 'Open Sans', 'sans-serif';

   font-weight:100;

   font-size:1em;

   color:white;
}
.modal {

  text-align: center;

  padding: 0!important;

}

.modal:before {

  content: '';

  display: inline-block;

  height: 100%;

  vertical-align: middle;

  margin-right: -4px;

}

.modal-dialog {

  display: inline-block;

  text-align: left;

  vertical-align: middle;

  margin:4px;

}

.modal-body{

   padding:8px;

   background-color:black;

}

.modal-body img{

   width:100%;

}

#close-wrapper{

   position:absolute;

   top:0;

   right:0;

   width:45px;

   height:45px;

   background-color:rgba(0,0,0,0.5);

   border-bottom-left-radius:6px;

}

#close-btn{

   position:absolute;

   top:20px;

   right:25px;

   color:white;

   opacity:1;

}

.popup-caption{

   width:100%;

   padding-top:6px; 

   background-color:black;

}

.popup-caption p{

   text-align:center;

   font-weight: 300;

   font-size: 1em;

   color: white;

   font-style: normal;

   font-family: 'Open Sans', sans-serif;

   color:white;

   margin-bottom:-4px;

}

 

@media (min-width:400px){

   .modal-dialog{

         width:44%; 

   }

}

 

@media (min-width:600px){

   .modal-dialog{

         width:34%; 

   }

}

#prev-button{
	height:50px;
	width:40px;
	background-color:rgba(0,0,0,0);
	border-top-right-radius:6px;
	border-bottom-right-radius:6px;
	position:absolute;
	top:50%;
	left:0;
	cursor:pointer;
}
#prev-button span{
	position:absolute;
	top:16px;
	left: 20px;
	font-size:1em;
	color:white;
	
}
#next-button{
	height:50px;
	width:40px;
	background-color:rgba(0,0,0,0);
	border-top-left-radius:6px;
	border-bottom-left-radius:6px;
	position:absolute;
	top:50%;
	right:0;
	cursor:pointer;
}
#next-button span{
	position:absolute;
	top:16px;
	right: 20px;
	font-size:1em;
	color:white;
}

@media (min-width:500px){
	.modal-dialog{
		width:44%;	
	}
	#next-button{
		background-color:rgba(0,0,0,0.55);
	}
	#prev-button{
		background-color:rgba(0,0,0,0.55);
	}
	#close-wrapper{
		background-color:rgba(0,0,0,0.55);
	}
}

@media (min-width:700px){
	.modal-dialog{
		width:34%;	
	}
}