html,body {height:100%;}

:root {
  --white: #FFFFFF;
  --grey: #333d48;
  --gold: #A6986E;
  --light-gold: #AC9F78;
}

html {  scroll-behavior: smooth;margin:0;padding:0;}
body {background-color:var(--white);font-family: 'avenir_nextmedium', sans-serif;color:var(--grey);margin:0;padding:0;}
h2 {font-size:24px;font-weight:normal;font-family: 'avenir_nextregular';line-height:1.3;margin-bottom:25px;}
h3 {font-size:21px;font-weight:normal;font-family: 'avenir_nextregular';line-height:1.3;margin-bottom:25px;}
p {font-family: 'avenir_nextregular';font-size:16px;line-height:1.4;}
a {text-decoration: none;}

.bg-grey {background-color:var(--grey);color:}

/*Header*/
header {
  background-color: var(--white);
  color: var(--grey);
  padding: 25px 0;
  position: relative;
  z-index:9999
}

.navbar-brand {margin-left:0}
.navbar-brand img:first-of-type {margin-right:20px}
.navbar-brand div {display:none}
.navbar-nav {padding-top:20px}

nav a {
  font-size: 16px;
  letter-spacing: 1.6px;
  color: var(--grey);
  text-decoration: none;
  margin: 0 10px;
  font-family: 'avenir_nextmedium', sans-serif;
}

.home-logo {height:calc(100vh - 141px);text-align: right;position: relative;color:#FFFFFF}
.home-logo > div {position: absolute;bottom:0;padding:25px 25px;border-top:1px solid #FFFFFF;width:100%;}
.home-logo h2{text-align: left;margin-bottom:0;}

.intro {color:var(--white);border-bottom:50px solid var(--grey);position: relative;text-align: left;}
.intro-logo {background-image:url('../images/intro.png');background-repeat: no-repeat;background-position: center;height:100vw;background-size:140vw}
.intro a {display: inline-block; color: var(--gold); border-top:1px solid var(--gold);font-size:14px;padding-top:10px;margin-top:30px;}
.intro-left {position: absolute;top:0;bottom:0;left:0;width:10px;background-color:var(--grey)}
.intro-right {position: absolute;top:0;bottom:0;right:0;width:10px;background-color:var(--grey)}

.services-logo {height:300px;text-align: right;position: relative;color:#FFFFFF;}
.services-logo > div {position: absolute;bottom:0;padding:25px 25px;border-top:1px solid #FFFFFF;width:100%;}
.services-logo h2{text-align: left;margin-bottom:0;}

.services {background-color:var(--light-gold);padding:50px 0;color:#FFFFFF}
.services h3 {border-bottom:1px solid #FFFFFF;padding-bottom:15px;margin-bottom:15px;}
.services ul {margin-left:0;padding-left:20px;}
.services .circle {width:150px;height:150px;border-radius:50%;overflow:hidden;margin-bottom:15px;background-color:var(--grey);background-image:url('../images/services.svg');background-size:60px;background-position: center;background-repeat: no-repeat;}

.expertise-logo {height:400px;text-align: right;position: relative;color:var(--grey);}
.expertise-logo > div {position: absolute;bottom:0;padding:25px 25px;border-top:1px solid #FFFFFF;width:100%;background-color:rgba(255,255,255,0.8)}
.expertise-logo h2{text-align: left;margin-bottom:0;}

.expertise {padding-top:50px;background-size:cover;background-position: center;color:#FFFFFF;background-color:var(--grey)}
.expertise ul {margin-left:0;padding-left:20px;}

.contact-logo {height:auto;text-align: right;position: relative;color:#FFFFFF;}
.contact-logo > div {/*position: absolute;bottom:0;*/padding:25px 25px;width:100%;background-color:var(--gold)}
.contact-logo h2{text-align: left;margin-bottom:0;}

.contact {background-color:#FFFFFF;padding:50px 0;color:var(--grey)}
.contact a {color:var(--grey)}
.contact h3 {margin-bottom:40px}

.slideshow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slideshow 16s infinite ease-in-out;
  transform-origin: 33% 50%;
}

.slideshow img:nth-child(1) {
  animation-delay: 0s;
}

.slideshow img:nth-child(2) {
  animation-delay: 4s;
}

.slideshow img:nth-child(3) {
  animation-delay: 8s;
}

.slideshow img:nth-child(4) {
  animation-delay: 12s;
}

.slideshow img:nth-child(5) {
  animation-delay: 16s;
}

@keyframes slideshow {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  16.67% {
    opacity: 1;
  }

  33.33% {
    opacity: 1;

  }

  80% {
    opacity: 1;

  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
		
.floating-label {
  position: absolute;
  top: 16px;
  left: 12px;
  padding: 0 4px;
  background: #EDEEEF;
  transition: all 0.2s ease;
  pointer-events: none;
  color: var(--grey);
}

.form-control {border-radius: 0;}

.form-control:focus {border:none !important;background-color:#EDEEEF;box-shadow:none !important;}

.form-control:focus~.floating-label,
.form-control:not(:placeholder-shown)~.floating-label {
  top: 1px;
  left: 8px;
  font-size: 12px;
}

.form-control {
  padding: 16px 12px;
  background-color:#EDEEEF;
}

textarea.form-control~.floating-label {
  top: 16px;
}

textarea.form-control:focus~.floating-label,
textarea.form-control:not(:placeholder-shown)~.floating-label {
  top: 1px;  
}

form button {width:100%;border:none;text-align: center;background-color:var(--gold);letter-spacing: 3px;font-size:16px;padding:12px 0;color:#FFFFFF;margin-bottom:10px;}
form small {color:var(--gold);font-size:12px;letter-spacing: 1px;}

#contact-thanks {display: none;}

footer {background-color:var(--gold);height:100px;}

@media (aspect-ratio > 16/9) {
  .video-background iframe {
    height: 56.25vw;
  }
}

@media (aspect-ratio < 16/9) {
  .video-background iframe {
    width: 177.78vh;
  }
}


/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.intro-left,.intro-right {width:calc(50% - 270px);}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  h2 {font-size:31px;}
  .navbar-brand img:last-of-type {display:inline}    
  .navbar-brand div {display:inline;font-family: 'avenir_nextregular';line-height:1;color:var(--grey)}    
  .home-logo > div {padding:25px 0;}
  .intro {border-top:50px solid var(--grey);text-align: left;}
  .intro-logo {height:auto;background-size:cover}
  .intro-left,.intro-right {width:calc(50% - 360px);}
  .services {padding:60px 0;}
  .expertise {padding:60px 0;background-image:url(../images/expertise.jpg);}
  .contact {padding:60px 0;}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.navbar-nav {padding-top:0}
  .navbar-nav li:last-of-type a {margin-right:0;padding-right:0 !important;}	
  .intro {border-top:70px solid var(--grey);border-bottom:70px solid var(--grey);}
  .intro-logo {background-size:cover}
  .intro-left,.intro-right {width:calc(50% - 480px);}
  .services {padding:70px 0;}
  .expertise {padding:70px 0;}
  .contact {padding:70px 0;}
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  .intro {border-top:80px solid var(--grey);border-bottom:80px solid var(--grey);}
	.intro-left,.intro-right {width:calc(50% - 570px);}
  .services-logo {height:400px;}
  .services {padding:80px 0;}
  .expertise-logo {height:500px;}
  .expertise {padding:80px 0;}
  .contact {padding:80px 0;}
}

/* Extra wxtra large devices (xlarge desktops, 1400px and up)*/
@media (min-width: 1400px) {
  .intro {border-top:100px solid var(--grey);border-bottom:100px solid var(--grey);}
	.intro-left,.intro-right {width:calc(50% - 660px);}
  .services {padding:100px 0;}
  .expertise {padding:100px 0;}
  .contact {padding:100px 0;}
}