/*
Tutorial Name: Caption Hover Animation with CSS3 transform and transitions
Author: Samuel Dalusung
*/

/*= MAIN STYLES
--------------------------------------------------------*/
section.v-center{margin-top:15px}

ul.board {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0;
}

ul.board li.boardItem {
    display: inline-block;
    list-style: none;
    padding: 0;
  /* width:24% ;
  min-width:265px; */
}

ul.board li.boardItem figure img {
  width:100%;
  border:0px solid #ccc;
  
}

figure {
    margin: 0;
    padding: 0;
	width:100%;
    position: relative;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    border: 3px solid #fff; 
  vertical-align: middle;
  

}

figure:hover figcaption {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0;
}

figcaption {
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    filter: alpha(opacity=0);
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 250px;
    background: rgba(0,0,0,.5);
    color: #fff;
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    transition: all .9s ease;
    -webkit-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -o-transition-delay: .5s;
    -ms-transition-delay: .5s;
    transition-delay: .5s;
  text-align:center;  
}

figcaption h3 {
    font-family: 'Open sans';
    font-weight: 400;
    color: #fff;
    padding: 10px 20px;
    margin-bottom: 0;
    position: relative;
    righ: 100%;
    margin-top: 65px; /* 37px */
    font-size: 30px;
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    transition: all .9s ease;
}

figcaption p {
    font-family: 'Open sans';
    padding: 10px 20px;
    margin-bottom: 0;
    margin-top: 20px;
    position: relative;
    left: 100%;
    font-size: 13px;
    -webkit-transition: all .9s ease;
    -moz-transition: all .9s ease;
    -o-transition: all .9s ease;
    -ms-transition: all .9s ease;
    transition: all .9s ease;
}

figure:hover h3,figure:hover p {
    left: 0;
}

figcaption a {
    color: #fff;
    border: 2px solid #fff;
    padding: 4px 10px;
    text-decoration: none;
    font-size:20px;
}

figcaption a:hover {
    color: #0E213F;
    background: #fff;
   text-decoration: none;
  border-bottom:1px solid #ccc
}


/*= FOOTER
--------------------------------------------------------*/
/* Modal start */

.modal-box {
  display: none;
  position: fixed;
 /*  transform: translate(-50%, -50%);*/
 top:80px !important;
  z-index: 1000;
  max-width:800px;
  width: 98%;
  background: white;
  border-bottom: 1px solid #aaa;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
  border: 0px solid rgba(0, 0, 0, 0.1);
}

.modal-box header,
.modal-box .modal-header {
  padding: 1.25em 1.5em;
  border-bottom: 1px solid #ddd;
  background-color:#0e213f;
  color:#fff;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0 !important;font-size:22px;color:#fff }

.modal-box .modal-body {
  padding: 2em 1.5em; 
  text-align:initial; 
  min-height:360px;
   overflow-y:scroll;
    max-height:520px;   
}

.modal-box .modal-body .GovSocialItemRow{margin-top:5px}
.modal-box .modal-body .GovSocialItemRow .GovLeftIcon{display:inline-block}
.modal-box .modal-body .GovSocialItemRow .GovRightTxt{display:inline-block;margin-left:5px}

.modal-box footer,
.modal-box .modal-footer {
  padding: 5px;
  border-top: 1px solid #ddd;
  background: rgba(0, 0, 0, 0.02);
  text-align: right;
}

div.modal-box footer.board {
    margin-top: 10px;
    margin-bottom: 0px;
}

div.modal-box footer.board p {
    color: #fff;
    font-family: 'Open Sans';
    font-size: 14px;
    margin: 20px 0 0;
}

div.modal-box footer.board span {
    margin: 0;
    color: #fff;
    font-family: 'Open Sans';
    font-size: 14px;
}

div.modal-box footer.board a {
    color: #747474;
}

div.modal-box footer a.js-modal-close {color:#000}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8) !important;
  display:block;
}

div.gov-popup-footer {border:1px solid #EC5B2B; border-radius:0px;display:inline-block;padding:0px;margin:5px}
div.gov-popup-footer a{text-transform: uppercase;color:#EC5B2B !important;font-weight:bold;padding:4px 12px !important;font-size:16px}
div.gov-popup-footer a:link{text-transform: uppercase;color:#EC5B2B !important}

a.close {
  line-height: 1;
  font-size: 20px;
  position: absolute;
  top: 3%;
  right: 2%;
  text-decoration: none;
  color: #fff;
  opacity:1;
  border:none;
}

a.close:hover {
  color: #333;
  -webkit-transition: color 1s ease;
  -moz-transition: color 1s ease;
  transition: color 1s ease;
}

.modal-box header a.close img{top:-19px;right:-16px;position:relative}

.modal-box img.imgPortrait{
  max-width:200px;
  width:100%;
  height:auto
  }

/*# update #*/
ul.board figcaption h3{color:#fff;}
ul.board figcaption .BoardHoverWrapper{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
ul.board figcaption a.js-open-modal{color:#fff !important;border:1px solid #fff}
ul.board figcaption a.js-open-modal:hover{background-color:#ec5b2b}

@media screen and (max-width: 480px) {
.modal-box .modal-body {
    overflow-y:scroll;
    height:280px;   
  }
.modal-box{ top:45px !important}
div.ContentRightWrapper{margin-top:20px;} 
.modal-box header a.close {display:none}
.modal-box header h3{font-size:16px} 
.modal-box header{padding:15px 15px}  
}

@media screen and (max-width: 1280px) {
.modal-box .modal-body {
    overflow-y:scroll;
    height:400px;
  }
}