/*COLOURS*/
.brand-grey-1 { background-color: #F3F3F3; }
.brand-grey-2 { background-color: #E8E8E8; }
.brand-grey-3 { background-color: #A7A7A7; }
.brand-grey-4 { background-color: #717171; }
.brand-yellow { background-color: #FEC211; }
.w3-button.brand-yellow:hover { background-color: #E8E8E8 !important; }
.brand-blue { background-color: #8DB9C2; }


/*LAYOUT*/
.page-container {
  max-width: 960px;
  margin: auto;
}
@media screen and (max-width: 600px) {
  .mobile-spacer {
    height: 64px;
  }
}
@media screen and (min-width: 601px) {
  .spacer {
    height: 24px;
  }
}


/*NAVIGATION*/
.w3-bar {
  overflow: visible !important;
  position: fixed;
  z-index: 1;
  background-color: white;
  font-size: 17px;
}
#nav-logo {
  height: 18px;
}
#logo-container {
  padding: 6px 8px 0px 16px;
}
.w3-bar-item, nav .w3-button, nav {
  text-decoration: none;
  color: #717171;
  background-color: white;
}
nav .w3-button:hover {
  background-color: #8DB9C2 !important;
}
nav, .w3-dropdown-content, #nav-mobile {
  -webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.35);
  -moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.35);
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.35);
}
nav .fa-chevron-down, nav .fa-phone {
  font-size: 13px;
  padding-top: 0px;
}
nav .fa-chevron-down {
  color: #A7A7A7 !important;
}
nav .fa-phone {
  color: #FEC211 !important;
  font-size: 11px;
  margin-bottom: 2px;
}
#close-mobile-menu {
  padding-top: 40px;
  /*offset for menu height, and jQuery anchor to close mobile menu*/
}


/*BUTTONS & LINKS*/
.button-icon {
  margin-right: 12px;
}
.button-icon-right {
  margin-left: 12px;
}
footer .w3-button, #contact .w3-button, #home-services .w3-button, p>a, span>a, td>a {
  transition: .3s;
}
a:hover {
  color: #8DB9C2;
}
.cta {
  background-color: #F3F3F3 !important;
}
.cta:hover {
  background-color: #8DB9C2 !important;
  color: white !important;
}


/*TYPOGRAPHY*/
*, h1, h2, h3, h4, h5 {
  font-family: 'Barlow', sans-serif;
}
.subheading {
  font-weight: 300;
}
h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0px;
}
p {
  margin-bottom: 0px;
}
sup {
  background-color: #F3F3F3 !important;
  margin: 0px 2px;
  padding: 2px;
}


/*HEADERS*/
header {
  height: 580px;
  background-position: top;
  background-attachment: fixed;
  position: relative;
  color: white;
}
@media screen and (max-width: 600px) {
  header {
    height: 375px;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
  }
}
header .content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 16px;
}
#header-home { background-image: url(assets/images/header-home.jpg); }
#header-services { background-image: url(assets/images/header-services.jpg); }
#header-portfolio { background-image: url(assets/images/header-portfolio.jpg); }
#header-process { background-image: url(assets/images/header-process.jpg); }
#header-contact { background-image: url(assets/images/header-contact.jpg); }



/*HOMEPAGE*/
#header-home img {
  width: 480px; 
}
#header-home h1 {
  font-size: 19px;
  margin: 8px 0px 0px -1px;
}
#home-services #more {
  margin: 48px 0px;
}
.home-section {
  padding: 96px 0px;
}
.home-section a {
  text-decoration: none;
}
.home-section h2 {
  margin-bottom: 48px;
}
@media screen and (max-width: 600px) {
  #header-home {
    background-image: url(assets/images/header-home-mobile.jpg)
  }
  .home-section .w3-half:first-of-type {
    margin-bottom: 64px;
  }
  #home-portfolio p, #home-process p {
    font-size: 13px !important;
  }
  #home-portfolio {
    background: #F3F3F3;
  }
  #home-services, #home-process {
    background: #FFFFFF;
  }
}

.home-col-7 {
  width: 14.2857%;
  float: left;
}
@media screen and (max-width: 600px) {
  .home-col-7 {
    width: 33.3333%;
    min-height: 290px;
  }
  .home-col-7:nth-of-type(7) {
    margin-left: 33.3333%;
    margin-top: 32px;
  }
  .home-col-7:nth-of-type(4), .home-col-7:nth-of-type(5), .home-col-7:nth-of-type(6) {
    margin-top: 32px;
  }
}

@media screen and (min-width: 601px) and (max-width: 992px) {
  .home-section p.w3-large {
    font-size: 14px !important;
  }
}


/*SERVICES, PORTFOLIO & PROCESS*/
#services video, #services img, #process img {
  width: 100%;
  margin-top: 16px;
}
#services h2, #portfolio h2, #process h2 {
  margin-bottom: 8px;
}
#services h3, #portfolio h3, #process h3 {
  margin-top: 24px;
}
@media screen and (max-width: 600px) {
  #services img, #process img {
    margin-bottom: 8px;
  }
}
.margin-top {
  margin-top: 64px !important;
}


/*PORTFOLIO*/
#portfolio img {
  width: 100%;
  padding: 8px;
  cursor: pointer;
}
#portfolio .top {
  cursor: default;
}
#portfolio .images {
  padding: 8px;
}
#portfolio blockquote {
  margin-left: 0px;
  margin-right: 0px;
  font-style: italic;
}


/*CONTACT*/
#contact textarea {
  resize: vertical;
}
#contact table {
  margin-top: -8px;
}
#contact table td {
  padding: 8px 0px;
}
#contact table td:first-of-type {
  width: 16px;
  color: #A7A7A7;
}
#contact table tr:first-of-type {
  font-weight: 600;
}
#contact-map {
  width: 100%;
  height: 453px;
  border: none;
  margin-bottom: -5px;
}

/*FOOTER*/
footer h4, footer p {
  margin: 0px;
}
footer {
  padding: 96px 0px;
  background: #F3F3F3 url(assets/brand-atom-half-right.svg) no-repeat right center;
}
_:-ms-fullscreen, :root footer { background: #F3F3F3 }


/*ANIMATIONS */
.hidden {opacity:0;}
.visible {opacity:1;}
.d0 {animation-delay: .0s;}
.d1 {animation-delay: .15s;}
.d2 {animation-delay: .3s;}
.d3 {animation-delay: .45s;}
.d4 {animation-delay: .6s;}
.d5 {animation-delay: .75s;}
.d6 {animation-delay: .9s;}
.d7 {animation-delay: 1.05s;}
.d8 {animation-delay: 1.2;}
.d9 {animation-delay: 1.35s;}


/*animate.css v3.5.2*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, .95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation-name: rubberBand;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}