* {margin:0;padding:0}
body {background-color:#393939;font-family: 'Lato', sans-serif;font-size:16px}
.mobile-only {display: none}
section {width:100%}
div.container {width: 90%;margin:0 auto;position:relative;}
nav div.container {display:flex;width:97%;}
nav {background-color: #000;box-sizing: border-box;width:100%;color:white;position: fixed;}
nav.mobile {display: none}
nav ul {list-style-type: none;}
nav li {display:inline-block;}
nav ul {/* flex: 1; */}
nav ul.industries {margin-left:140px;flex: 2;/* background: red; *//* text-align: center; */}
nav ul.industries li {margin-left:0px;}
nav ul.dropdowns > li:hover{background-color:#333}
nav ul.dropdowns > li > a{background:url(/images/down-arrow.png) no-repeat;background-position: bottom right;padding-right: 25px; margin-right: 10px;background-position-y: 15px; background-origin: padding-box  }
nav ul.dropdowns > li a:hover {background-color:#333}
nav a {color:white;text-decoration: none;font-size:0.9em;padding:10px;display: block;cursor:pointer;}
nav a:hover {background:#333}
nav ul ul {display: block;position: absolute;background: rgba(0, 0, 0, 0.8);margin-left: -117px;}
nav ul ul li {display:block;min-width:200px}
nav ul ul li a{padding:10px;text-align: right;border-top:1px solid transparent;border-bottom:1px solid transparent;color: #999;padding-right: 35px;}
nav ul ul li a:hover {background-color: #333;border-top: 1px solid #666;border-bottom: 1px solid #666;color:#fff}

nav ul.dropdowns .menu {transition:0.5s;opacity:0;top:-300px}
nav ul.dropdowns .menu.active {top:37px;opacity:1}


section.hero {
  background: url(../images/AdobeStock_118665137-c.jpg);
  width: 100%;height: 55vh; background-repeat: no-repeat; background-position: bottom, left;
  background-size: cover;
}

h1.logo {width:123px;height:198px;position: absolute;z-index:2;left:10px;
  width:123px;height: 198px;

  background-image: url('../images/logo.png'),
  linear-gradient(to right, rgba(0, 0, 0, 1),
  rgba(0, 0, 0, 1));

  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center;

  position: absolute;
  top:-10px;left:0;
  text-indent: -9999px;
  display:none;

}

h2 {color:white;line-height: 1.2em;    padding: 10px 0;}

p {color:#989898;line-height:1.4em;margin:10px 0;}

.instagram {margin-top:20px;position:relative;opacity:0;transition:1s}
.instagram .instagram-frame {position:absolute;top: 3px;left: -1px;z-index: 2;width: 50px;background-color:black;padding: 8px 8px;box-sizing:border-box;}
.instagram img.logo {}
.instagram ul {list-style-type:none;/*display:flex;overflow-x:hidden*/}
.instagram ul img{height: 300px;}
.instagram ul li.slick-slide {border:4px solid black}

.slick-next {right:10px;z-index:3}
.slick-prev {left: 10px;z-index:3}

.highlights {display:flex;border-top:8px solid black;background-color:black;}
.highlight {border:6px solid black;box-sizing:border-box;flex-basis:100%}
.highlight p {background:black;box-sizing:border-box;padding:10px;margin: 0;}
.highlight img {width:100%;height: 290px;}

footer{background-color: black;color:#aaa;line-height:3em;text-align:center;position:relative;margin-top:20px;bottom:0;width:100%}
footer span, footer img {margin:0 10px}
footer img {position:relative;top:7px}
footer a {color:#aaa;text-decoration:none}

ul#partners {list-style-type:none;display:flex;padding:20px 0;flex-wrap:wrap;}
ul#partners li {flex-basis:10px;}

/* INTRO */
div#intro-bg {background-color:#000;position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100vh;opacity:1;z-index:999;transition: 1s}
div#intro-logo{position:absolute;top:50%;margin-top:-100px;left:50%;z-index:1000;margin-left:-60px;background-color:#000;padding:20px;box-sizing:border-box;transition:1s cubic-bezier(0.4, 0, 0.07, 1.18)}
div.intro-titles {font-size:1em;z-index:1001;position:absolute;top:50%;left:0;color:white;width:100%;text-align:center;margin-top:100px;transition:1s}
div.intro-titles div.intro-title {font-size:2em}
div.intro-titles div.intro-title span {font-size:0.6em}

div#intro-bg.done {opacity:0}
div.intro-titles.done {opacity:0}

div#intro-logo.done {top:95px;left:70px;transform: scale(1.0);}



/* ========== Media Queries ========== */

/* Screens under 760 wide PHONES */
@media screen and (max-width:760px){
  section.hero{height: 100vh;background-position: -423px 0px;}
  nav.desktop {display:none}
  nav.mobile {display:block}
  h1.logo {width: 73px;height: 108px;background: black;left: 10px;}
  .highlights {display:block}
  footer span {display:block}

  .mobile-only {display: block;}


  nav.mobile div.logo {background-color:black;position: absolute;top: 0;left: 10px;padding: 10px;display:none}
  nav.mobile div.logo img {width:50px;display:none}

  div#intro-logo.done {top:50px;left:40px;transform: scale(0.5);}

  .mobile-only.down-arrow {position: absolute;bottom: 50px;;text-align:center;color: wheat;background-color:black;padding:10px;margin:0 auto;right:0}
  .mobile-only.title {background-color:black;color:white;position:absolute;top: 69px;padding:10px;font-size:2em;right:0;}
  .mobile-only.title span.sm {font-size:0.6em;display: block;}
  .mobile-only.subtitle {font-size:1.2em;background-color:black;color:white;position:absolute;top: 170px;padding:10px;display:inline-block;width: 100%;left:0;box-sizing:border-box;}
  .mobile-only.contact a {font-size:1.2em;text-decoration:none;color:#fdb943;background-color:#000;padding:10px;position:absolute;top: 265px;}
}