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

body{

      background-color:#FFFFFF;

}

#image-grid{

      margin:6px;
	height:400px;

}

.primary_header {
	width: 100%;
	background-color: #52bad5;
	padding-top: 10px;
	padding-bottom: 10px;
	clear: left;
	border-bottom: 2px solid #2C9AB7;
	text-align: center;
	
}

.title {
	font-weight: bold;
	font-style: normal;
	font-family: "Source Sans Pro";
	text-align: center;
	color: #FFFFFF;
	letter-spacing: 2px;
}

.custom-col{

      padding:6px;
      overflow:hidden;
	height:400px;

}

.img-button{

   cursor:pointer;

}

.img-button > .caption{

   position: absolute;

   bottom:0;

   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 > .caption p{

   position: absolute;

   width: 85%;

   margin: 20px;

   font-family: 'Cambria', 'Cambria';

   font-weight:100;

   font-size:1em;

   color:white;
	
	-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;
 
}

.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;

}

.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:12px;

   background-color:black;

}

.modal-body img{

   width:100%;

}

#close-wrapper{

   position:absolute;

   top:0;

   right:0;

   width:55px;

   height:55px;

   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: 'Cambria', 'Cambria';

   margin-bottom:-4px;

}

 

@media (min-width:763px){

   .modal-dialog{

         width:80%; 

   }

}

 

@media (min-width:1250px){

   .modal-dialog{

         width:70%; 

   }

}