.modal-content img { margin: 0 auto; text-align: center !important; max-width: 100%; height:auto; }
/*FULL SCREEN MODALS*/
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}
.modal-dialog { position: fixed; margin: 0; width: 100%; height: 100%; padding: 0; }
.modal-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid #BF0000; border-radius: 0; box-shadow: none; }
.modal-header { position: absolute; top: 0; right: 0; left: 0; height: 50px; padding: 10px; background: #6598d9; border: 0; }
.modal-title { font-weight: 300; font-size: 2em; color: #fff; line-height: 30px; }
.modal-body { position: absolute; top: 50px; bottom: 60px; width: 100%; font-weight: 300; overflow: auto; text-align:center !important; }
.modal-body img {max-height: 95%;}
.modal-footer { position: absolute; right: 0; bottom: 0; left: 0; height: 60px; padding: 10px; background: #BF0000; text-align:center; }
.modal-content { height: 100%; border-radius: 0; width: 100%; height: 100%; padding: 0 !important; }

.modal-content img {border: 10px solid #e1e1e1; margin-bottom: 20px;}

.imageGrid {display: block; clear:both;}
.imageGrid .col-md-4 {max-height: 246px !important; overflow:hidden !important; margin-bottom: 25px;  }
.overlay { display: block; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.7); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor: pointer; max-height: 348px; }

.projThumbnail {max-height: 450px !important; overflow:hidden !important; margin-bottom: 25px;  }
.projThumbnail h3 {margin-left: 18px; margin-top: 0px; text-transform:uppercase; font-weight: 700 !important; font-size: 16px; border-bottom: 2px solid #202020; padding-bottom: 6px;}
.projectLink{display: block; position: relative; z-index: 110;}

.pp_social {display:none;}

 .button:hover {cursor: pointer !important;}
/* ============================================================
  GLOBAL
============================================================ */
.effects { padding-left: 15px; }
.effects .img { position: relative; float: left; margin-bottom: 5px; width: 100%; overflow: hidden; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: -15px; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { display: block; margin: 0; padding: 0; max-width: 100%; height: auto; }

a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 100; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }

.overlay {background-image: url(../images/overlay1.png); background-repeat: no-repeat; background-position: center center;}
.overlay a {display: block; width: 100%; height: 100%;}

/*a.expand { display: block; position: absolute; z-index: 100; width: 60px; height: 60px; border: solid 2px white; text-align: center; color: white; line-height: 50px; font-weight: 100; font-size: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; -webkit-animation: spin 4s linear infinite; -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; }

a.expand:hover {color:#ffffff; border: solid 2px #ffffff;}*/
/* @-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}*/
/* ============================================================
  EFFECT 1 - SLIDE IN BOTTOM
============================================================ */
#effect-1 .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 0; }
#effect-1 .overlay a.expand { left: 0; right: 0; bottom: 50%; margin: 0 auto -30px auto; }
#effect-1 .img.hover .overlay { height: 100%; }
/* ============================================================
  EFFECT 2 - SLIDE IN TOP
============================================================ */
#effect-2 .overlay { top: 0; left: 0; right: 0; width: 100%; height: 0; }
#effect-2 .overlay a.expand { left: 0; right: 0; top: 50%; margin: -30px auto 0 auto; }
#effect-2 .img.hover .overlay { height: 100%; }
/* ============================================================
  EFFECT 3 - SLIDE IN LEFT
============================================================ */
#effect-3 .overlay { top: 0; bottom: 0; left: 0; width: 0; height: 100%; }
#effect-3 .overlay a.expand { top: 0; bottom: 0; left: 50%; margin: auto 0 auto -30px; }
#effect-3 .img.hover .overlay { width: 100%; }
/* ============================================================
  EFFECT 4 - SLIDE IN RIGHT
============================================================ */
#effect-4 .overlay { top: 0; bottom: 0; right: 0; width: 0; height: 100%; }
#effect-4 .overlay a.expand { top: 0; bottom: 0; right: 50%; margin: auto -30px auto 0; }
#effect-4 .img { overflow: hidden; }
#effect-4 .img.hover .overlay { width: 100%; }
/* ============================================================
  EFFECT 5 - ICON BORDER ANIMATE
============================================================ */
#effect-5 .overlay { top: 0; bottom: 0; left: 0; right: 0; opacity: 0; }
#effect-5 .overlay a.expand { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
#effect-5 .img.hover .overlay { opacity: 1; }
#effect-5 .img.hover .overlay a.expand { width: 60px; height: 60px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; }
/* ============================================================
  EFFECT 6 - ICON BOUNCE IN
============================================================ */
#effect-6 .overlay { top: 0; bottom: 0; left: 0; right: 0; opacity: 0; }
#effect-6 .overlay a.expand { left: 0; right: 0; top: 0; margin: 0 auto; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
#effect-6 .img.hover .overlay { opacity: 1; }
#effect-6 .img.hover .overlay a.expand { top: 50%; margin-top: -30px; opacity: 1; }
a.expand { text-decoration: none !important; }

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Media Queries
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

@media only screen and (max-width: 1200px) {

.imageGrid .col-md-4 {max-height: 506px !important; overflow:hidden !important; margin-bottom: 25px;  }
.overlay { display: block; position: absolute; z-index: 20; background-color: rgba(0, 0, 0, 0.0); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor: pointer; max-height: 406px;  }

}

@media only screen and (max-width: 1100px) {
.effects { padding-left: 5px; }
.effects .img { width: 100%; }
.effects .img:nth-child(n) { margin-right: 5px; }
.effects .img:first-child { margin-left: 0; }
.effects .img:nth-child(2n-1) { margin-left: -5px; }
.effects .img:nth-child(2n) { margin-right: 0; }
.effects .img:last-child { margin-right: 0; }
}

@media only screen and (max-width: 768px) {
	.imageGrid .col-md-4 {max-height: 446px !important; overflow:hidden !important; margin-bottom: 25px;  }
	/*.overlay { display: block; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor: pointer; max-height: 446px; }*/
.projThumbnail {max-height: 400px !important; overflow:hidden !important; margin-bottom: 25px;  }
.projectImage {margin-bottom: 20px !important;}
}

@media only screen and (max-width: 520px) {
.effects .img { width: 100%; }
.effects .img:nth-child(n) { margin-right: 0; }
.effects .img:first-child { margin-left: 0; }
.effects .img:nth-child(2n-1) { margin-left: 0; }
.effects .img:nth-child(2n) { margin-right: 0; }
.effects .img:last-child { margin-right: 0; }
.effects .img img { margin: 0 auto; }

}