/* Colours

*/
body{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
p {
  font-size: 1.0rem;
  color: #666;
}
h1 {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1.8rem;
}
h2, h3, h4 {
  font-weight: 400;
}

h2  {
  font-size: 1.4em;
}
h3  {
  font-size: 1.0em;
}

h4  {
  font-size: 1.1em;
}
h2 a:link {color: #000; text-decoration: none;}
h2 a:visited {color: #000; text-decoration: none;}
h2 a:hover {color: #000;text-decoration: none;}
h3 a:link {color: #000; text-decoration: none;}
h3 a:visited {color: #000; text-decoration: none;}
h3 a:hover {color: #000;text-decoration: none;}

p a:link {color: #000; text-decoration: none;}
p a:visited {color: #000; text-decoration: none;}
p a:hover {color: #666;text-decoration: none;}

h5 {color:#000;}
h5 a:link {color: #000; text-decoration: none;}
h5 a:visited {color: #000; text-decoration: none;}
h5 a:hover {color: #666;text-decoration: underline;}

h6 {color:#000;}
h6 a:link {color: #000; text-decoration: none;}
h6 a:visited {color: #000; text-decoration: none;}
h6 a:hover {color: #666;text-decoration: none;}

.text-white {color:#fff;}
.text-white a:link {color: #fff; text-decoration: none;}
.text-white a:visited {color: #fff; text-decoration: none;}
.text-white a:hover {color: #fff;text-decoration: underline;}
li {
  font-size: 1.0rem;
  line-height: 2.0;
  color: #666;
}


.nav-link, .dropdown-item {
  font-size: 0.9rem;
}
.navstripe  {
  height: 88px;
  position:fixed;
  top: 0;
  z-index: 111;
}
.footer {
  background-color:#666;
  margin-top:80px;
  padding-top:30px;
  padding-bottom:30px;
}

.text-blue {color:#344690;}

.footer {color:#fff;}
.footer a:link {color: #fff; text-decoration: none;}
.footer a:visited {color: #fff; text-decoration: none;}
.footer a:hover {color: #fff;text-decoration: underline;}

.projlink {color:#000; cursor: pointer;}
.projlink a:link {color: #000; text-decoration: none;}
.projlink a:visited {color: #000; text-decoration: none;}
.projlink a:hover {color: #000;text-decoration: none;}


/* banner tint  & margin */
.captionbg  {
  background: rgba(23, 60, 92, .6);
  padding:20px;
  border-radius: 8px;
}
.btxtpos  {
  margin-top: 20px;
}

/* services overlay */
.caption {
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0) .85s ease-in;
            transform: translateZ(0) .85s ease-in;
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .9s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
    z-index: -10;
}

.caption__overlay__content {
  font-size: 0.9rem;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    transition: -webkit-transform 1.5s ease-out;
    transition:         transform 1.5s ease-out;
    transition: color 1.0s ease;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .55s ease-out;
    transition:         transform .55s ease-out;
    color: black;
    padding-bottom: 13px;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    color: white;
}


/* Misc */
.nvz {
  z-index: 900;
}
.pointer {cursor: default;}
.dimimg {opacity: 0.4;}
.greenpanel  {background-color: #06b53f}
.projectpic {
  height: 340px;
  overflow:  hidden;
}
.zoom {
  transition: transform .5s; /* Animation */
  height: 100%;
  width: 100%;
  object-fit: cover;  /* image covers outer div */
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(1.1); /* (110% zoom ) */
}

.teamphoto  {
  width: 10vw; 
  height: 70vw;
  object-fit: cover;
}

.cardphoto  {
  object-fit: cover;
}

@media only screen and (min-width : 768px) {
  .teamphoto, .cardphoto  {
    height: 20vw;
  }
  .captionbg  {
    background: rgba(23, 60, 92, .6);
    padding:20px;
    border-radius: 8px;
    line-height: 16px;
  }
  /* banner margin */
  .btxtpos  {
    margin-top: 140px;
  }

}
@media only screen and (min-width : 1370px) {
  .teamphoto, .cardphoto  {
    height: 16vw;
  }

}