/*                                  __
   _______  _________  ______ ___  / /_  ___  _____
  / ___/ / / / ___/ / / / __ `__ \/ __ \/ _ \/ ___/
 / /__/ /_/ / /__/ /_/ / / / / / / /_/ /  __/ /
 \___/\__,_/\___/\__,_/_/ /_/ /_/_.___/\___/_/
*/

:root {
    --colour-fade-duration: 0.8s;
}

body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #000;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
}

img {
  image-orientation: from-image;
  user-drag: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.clients img {
  display: block;
  max-height:115px;
  width: auto;
  height: auto;
}

#topright {
  float: right;
  margin: 50px;
  transform: translateY(-7rem);
}

.toplogo {
  padding-left: 1em;
  max-height: 6rem;
  max-width: auto;
  vertical-align: middle;
  transform: translateY(1rem);
}

#mastimg {
  transform: translateY(-140px);
  width: 70vw;
  max-width: 348px;
  max-height: 224px;
}

#top-header {
  height: 8em;
  background-color: #00f;
  position: fixed;
  top: -500px;
  z-index: 99;
  width: 100%;
  background: #000;
  transition: top 0.3s;
  vertical-align: middle;
}

a {
  color: #009145;
}

a:hover {
  color: #9dc25e;
}

a:visited {
  color: #009145;
}

.contactform {
  line-height: 3em;
  transform: translateY(-4rem);
}

::placeholder {
  color: #fff;
}

button {
  transition: 0.2s;
}

input {
  border: none;
  border-bottom: solid;
  border-radius: 0;
  border-width: 1px;
  color: #a8a8a8;
  background-color: rgba(0,0,0,0);
  width: 45vw;
  max-width: 350px;
}

textarea {
  resize: none;
  border: none;
  border-radius: 0;
  color: #a8a8a8;
  background-color: rgba(0,0,0,0);
  width: 45vw;
  max-width: 350px;
}

button {
  border: none;
  color: #fff;
  background-color: rgba(0,0,0,0);
}

button:hover {
  color: #009145;
}

.separate {
  min-height: 300px;
  font: larger;
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* filter: grayscale(100%); */
  transition: filter var(--colour-fade-duration);
  -webkit-transition: filter var(--colour-fade-duration);
  -moz-transition: filter var(--colour-fade-duration);
  -o-transition: filter var(--colour-fade-duration);
}

#reality {
    position: relative;
    height: 30vw;
    background-image: url('./tinified/reality-col2.png');
    /* filter: grayscale(100%); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-shadow: 2px 2px 4px #000000;
    min-height: 600px;
}

.overlay-text {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.rather {
  text-align: center;
  margin-right: 4.75rem;
  margin-left: 4.75rem;
}

.col-right {
  margin-right: 5%;
  width: 40%;
  text-align: center;
  float: right;
}

.col-left {
  margin-left: 5%;
  width: 40%;
  text-align: center;
  float: left;
}

.carousel {
  background-image: url('./hands.png');
  background-repeat: no-repeat;
  background-color: #0c0c0c;
  background-size: cover;
}

.mid{
  background-image: url('./lights.png');
}

.mid h2 { font-size: 20pt; }

.mid h3 { font-size: 12pt; }

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

.carousel-item {
  height: 64rem;
}

.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

#mast .textcontent {
  transform: translateY(-120px);
  max-width: 100%;
  max-height: 12rem;
}

.textcontent {
  font-size: 14pt;
  font-weight: 200;
}

.photo-sub-line {
    padding-top: 10px;
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: space-between;
}

.photo-subtitle {
    justify-self: start;
}

.photo-credit {
    justify-self: end;
}

#servicestitle h2 {
  width: 100%;
  text-decoration: underline;
  padding-bottom: 12px;
  text-align: center;
  font-size: 14pt;
}

.clients {
  transition: 0.2s;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-around;
}

.marketing .col-lg-4 {
  text-align: center;
}

.marketing p {
  font-size: smaller;
  font-size: 10pt;
  color: #a8a8a8;
}

.marketing h3 {
  font-size: 12pt;
  font-weight: 400;
}

.containerfoot {
  margin-right: 4.75rem;
  margin-left: 4.75rem;
}

.container {
    width: 100%;
}

.featurette {
  width: 100rem;
  background-image: url('lights.png');
}

.featurette-divider {
  margin: 5rem 0;
  background-color: #000;
  border-color: #000;
}

.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}

  #contact {
    float: right;
  }

/* media queries for iPhones */

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
      #contactfoot {
        float: left;
      }
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      #contactfoot {
        float: left;
      }
      #topright {
        visibility: hidden;
      }
      #mast {
        max-height: 600px;
      }
      #mastimg {
        transform: translateY(-280px);
      }
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      #contactfoot {
        float: right;
      }
      header {
        height: 8rem;
      }
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
      #contactfoot {
        float: left;
      }
}

/* Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      #contactfoot {
        float: left;
      }
      #topright {
        visibility: hidden;
      }
      .hidemob {
        opacity: 0;
      }
      #mast {
        max-height: 600px;
      }
      #mastimg {
        transform: translateY(-280px);
      }
}

/* Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      #contactfoot {
        float: right;
      }
      header {
        height: 8rem;
      }
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
      #contactfoot {
        float: left;
      }
}

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
      #contactfoot {
        float: left;
      }
      #topright {
        visibility: visible;
      }
      .hidemob {
        opacity: 0;
      }
      #mast {
        max-height: 600px;
      }
      #mastimg {
        transform: translateY(-280px);
      }
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
      #contactfoot {
        float: right;
      }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
      #contactfoot {
        float: left;
      }
}

/* Portrait */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
      #contactfoot {
        float: left;
      }
      .hidemob {
        opacity: 0;
      }
      #mast {
        max-height: 600px;
      }
      #mastimg {
        transform: translateY(-280px);
      }
}

/* Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
      #contactfoot {
        float: right;
      }
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
      #contactfoot {
        float: left;
      }
  }

/* Portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) {
      #contactfoot {
        float: left;
      }
      .hidemob {
        opacity: 0;
      }
      #mast {
        max-height: 600px;
      }
      #mastimg {
        transform: translateY(-280px);
      }
}

/* Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) {
      #contactfoot {
        float: right;
      }
      header {
        height: 8rem;
      }
}

@media (max-width: 470px) {
    .containerfoot {
        text-align: left;
        float: left;
    }
}