html,
body,
header,
#intro {
  height: 100%;
}

/* Intro Background Image */
#intro {
  background: url("/assets/images/Intro.jpg") no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Satin Overlay for Intro Backgroud Image */
.overlay {
  background-color: rgb(0, 0, 0, 0.7);
  backdrop-filter: blur(0px);
}

.text-intro {
  color: rgb(204, 204, 204);
}

p,
h1,
h2,
h4,
li,
a {
  color: rgb(77, 77, 77);
}

i,
h5 {
  color: rgb(255, 230, 13);
  text-shadow: 2px 2px 5px black;
}

hr {
  background-size: 4px;
  border-top: 2px solid rgb(204, 204, 204);
  border-color: rgb(204, 204, 204);
}

.fa-hand-pointer-o {
  color: rgb(77, 77, 77);
  text-shadow: none;
}

/* Products & Services Image drop shadow */
.shadow {
  -webkit-box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 5px 5px 15px 1px rgba(0, 0, 0, 0.75);
}

/* Footer Background colour */
.page-footer {
  background-color: rgb(32, 32, 32);
}

/* Footer Links */
a:hover {
  color: rgb(255, 230, 13);
  text-decoration: none;
}

.design {
  filter: grayscale(100%);
}

.design:hover {
  color: #fc4a1a;
  filter: grayscale(0%);
}

/* Colour changed to blend in with footer */
hr.clearfix {
  border-top: 2px solid rgb(32, 32, 32);
  border-color: rgb(32, 32, 32);
}

.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%;
}

.gallery .pics {
  -webkit-transition: all 350ms ease;
  transition: all 350ms ease;
}

.gallery .animation {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.contact {
  margin-right: 5em;
}

.arrow {
  color: rgb(255, 230, 13);
  margin: 8% 0;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

@media (max-width: 450px) {
  .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
    column-width: 100%;
  }
  .phone {
    font-size: x-large;
    margin-top: 0.5em;
  }
}

@media (max-width: 991px) {
  .contact {
    margin-right: 0em;
  }
}

@media only screen and (max-width: 767px) {
  /* Intro Background Image */
  #intro {
    background: url("/assets/images/introMobileBg.jpg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
}