/* Home screen parallax workout   */

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  /*margin-left:5px;*/
  width: 70%;
  text-align: center !important;
  color: #000 !important;
  opacity:70% !important;
  background-color:grey !important;
  z-index:99 !important;
}

.caption div.border {
  background-color: #111 !important;
  color: #fff !important;
  padding: 18px !important;
  font-size: 25px !important;
  letter-spacing: 10px !important;
}


.home-div-caption-content {
    position: absolute;
    left: 0;
    top: 50%;
    margin-left:15px;
    width: 70%;
    text-align: center;
    color: #000;
    opacity:70%;
    background-color:grey;
    z-index:99 !important;
  }
  
  .home-div-caption-content div.home-div-caption-content-border {
    background-color: #111;
    color: #fff;
    padding: 18px;
    font-size: 25px;
    letter-spacing: 10px;
  }
  
.parallax-1 {
    /* The image used */
    /*background-image: url('../img/ifp_banner_1920.png');*/
  
    /* Full height */
    height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .parallax-2 {
    /* The image used */
    background-image: url('../img/kerala-4882047_960_720.jpg');
  
    /* Full height */
    height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .parallax-3 {
    /* The image used */
    background-image: url('../img/mangrove-species-254419_960_720.jpg');
  
    /* Full height */
    height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  

/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
@media only screen and (max-device-width: 1366px) {
    .parallax {
      background-attachment: scroll;
    }
  }

  /* footer text spacing */
  .footer-text-list-spacing a{
    padding: 5px;
    line-height:2px;
  }
  .footer-hover a:hover{
    color:white;
  }



/* **********************

Home screen Zoom effect work

*************************/
/* The Image container */
.column .div-zoom-effect
{
    background-color:white !important;
    text-shadow: 0 0 3px 	#1a00aa, 0 0 5px #66aa66 !important;
    color:white !important;
   
    -webkit-filter: brightness(100%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.column .div-zoom-effect:hover {
    background-color:white !important;
    text-shadow: 0 0 3px 	#1a0000, 0 0 5px #660066 !important;
    color:white !important;
   
    -webkit-filter: brightness(75%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.column .div-zoom-effect:active {
    background-color:white !important;
    text-shadow: 0 0 3px 	#1a0000, 0 0 5px #660066 !important;
    color:white !important;
    -webkit-filter: brightness(100%);
}

/* Staff Page CSS **********/
.staff-shadow-img {
    background: url(../img/staff_img_shadow.png) no-repeat scroll -7px 180px;
    height: 210px;
}

.staff-image-frame
{
    background: #fff;
    border: 1px solid #D6D6D6;
    height: 210px;
    padding: 5px;
    width: 160px;
    max-width:400px;
    box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}

.staff-photo-size
{
    width:155px;
    height:200px;
}

.banner-shadow{
   box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
.banner-text-shadow
{
    text-shadow: 0 0 3px #1a0000, 0 0 5px #660066;
}

.media-image-effect{
    margin-top: 0.2em;
    border-radius:0.5em; 
    box-shadow:0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
.imageHolder {
    position: relative;
    width: 285px;
    height: 175px;
   
  }
  .imageHolder .caption {
    position: absolute;
    width: 283px;
    height: 50px;
    
    bottom: 0px;
    left: 0px;
    color: #ffffff;
    background: grey;
    text-align:center;
    font-weight:bold;
    opacity:0.7;
  }

  /*footer list hover wrok */
  footer li a:hover {
    color:white;
  }