/* General */
@media screen {
  * {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;z-index: 8888;}
  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: 36px;opacity:1;}

  svg.dflogo {width: 20px;height: 20px;top: 8px;left: 0;fill: white;position: absolute;}
  svg.dflogo dflogo-d {fill:white}

  :focus {outline: 0;}

  section.hero {width: 100%;height: 80vh;}
  div.heroitem {position:absolute;top:0;left:0;width: 100%;height: 80vh;background-repeat: no-repeat;background-position: bottom, left;background-size: cover;transition: 1s;background-color: #000;}
  div.heroitem.commercial  {background-image: url(../images/hero-commercial.jpg)}
  div.heroitem.residential {background-image: url(../images/hero-residential.jpg)}
  div.heroitem.healthedu   {background-image: url(../images/hero-healthedu.jpg)}
  div.heroitem .herotext.desktop {position: absolute;top: 37%;right: 0px;font-size: 30px;color: white;background-color: rgb(0, 0, 0);padding: 20px;text-align: left;width: 50%;}
  div.heroitem.residential .herotext.desktop {top: 53%}
  div.heroitem.healthedu .herotext.desktop {top: 44%}
  div.heroitem .herotext.desktop span.head {font-size:1.5em;display:block}
  div.heroitem .herotext.desktop p.content {font-size:0.6em;display:inline-block}

  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-prev, .slick-next {}
  .slick-next {right: 37px;z-index:3;}
  .slick-prev {left: 35px;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%;position: relative;}
  .highlight p {background:black;box-sizing:border-box;padding:10px;margin: 0;}
  .highlight img {width:100%;}
  .highlight .highlight-link {position: absolute; bottom: 66px;right: 0;background: #000;padding: 5px;text-decoration: none;color: #fff;}


  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 svg.dflogo {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;justify-content: center;align-items: center;}
  ul#partners li {flex-basis:10px;margin-right: 15px;}

  /* INTRO */
  div#intro-bg {background-color:#000;top:0;left:0;box-sizing:border-box;width:100%;height: 100%;opacity:1;z-index: 8889;transition: 1s;position: fixed;overflow: hidden;}
  div#intro-logo{position:absolute;top: 45%;margin-top: -100px;left:50%;z-index: 8889;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-logo svg {width: 100px;height: 160px;position:relative;}
  div.intro-titles {font-size:1em;position:absolute;top:50%;left:0;color: #e0e0e0;width:100%;text-align:center;margin-top: 60px;transition:1s;z-index: 8889;}
  div.intro-titles div.intro-title {font-size:2em;padding: 10px 0;}
  div.intro-titles div.intro-title span {font-size:0.6em;}
  div.intro-title-tag {color: #ababab;}

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

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

/* Modal */
@media screen {
  .bodyNoScroll {overflow: hidden;}

  .modal {display: none;align-items: center;justify-content: center;position: fixed;top:0;left:0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0, 0, 0, 0.8);z-index: 99999;overflow: hidden;}
  .modal-body {background-color: #000;padding: 10px 10px 35px 10px;width: 650px;position: relative;border: 1px solid rgba(255, 255, 255, 0.64);color: #d6d0d0;}
  .modal-close {color: #bd3737;position: absolute;top: -5px;right: 10px;font-size: 40px;font-weight: bold;}
  .modal-close:hover, .modal-close:focus {color: #ff7070;text-decoration: none;cursor: pointer;}
  .modal h3 {margin-top:0;padding-top:0;margin-bottom:4px;color:#f5deb3}
  .modal p{margin-top:0;padding-top:0;margin-bottom:4px}
  .modal h2 {padding-top: 0;color: #aaa;font-size: 1.5em;padding-bottom: 10px;}

  .carousel-cell img {display: block;margin: 0 auto;max-height: 70vh;}
}

/* ========== Mobile ========== */
/* Screens under 760 wide PHONES */
@media screen and (max-width:760px){
  .desktop {display:none}
  .mobile {display:block}
  .mobile-only {display: block;}

  section.hero{height: 100vh;background-position: -423px 0px;}
  div.heroitem {height:100vh}
  div.heroitem.residential{background-position-x: -247px;background-position-y: -77px;}
  div.heroitem.commercial{background-position-x: -451px;background-position-y: -126px;}
  div.heroitem.healthedu{background-position-x: -131px;background-position-y: -114px;}

  h1.logo {width: 73px;height: 108px;background: black;left: 10px;}
  .highlights {display:block}
  footer span {display:block}

  nav.mobile {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: 10px;text-align:center;right:0;display: none;}
  .mobile-only.title {background-color:black;color:white;position:absolute;top: 29px;padding:10px;font-size: 1.8em;right:0;}
  .mobile-only.title span.sm {font-size:0.6em;display: block;}
  .mobile-only.subtitle {font-size: 1em;background-color: rgb(0, 0, 0);color: #dad7d7;position:absolute;top: 537px;padding:10px;display:inline-block;width: 100%;left:0;box-sizing:border-box;line-height: 1.6em;}
  .mobile-only.subtitle a {display:inline;margin:0;padding:0}
  .mobile-only.contact a {font-size:1.2em;text-decoration:none;color:#fdb943;background-color: rgb(0, 0, 0);padding:10px;position:absolute;top: 107px;right: 0;}
  .mobile-only.nav {position: absolute;color: white;top: 159px;width: 100%;}

  .mobile-only.menulink {display: block;position: absolute;top: 493px;width: 100%;right: 0;}
  .mobile-only.menu {transition:0.5s;position:absolute;top: 252px;left: -156px;margin-top:0px;padding-top:10px;padding-bottom:10px;background:#000;opacity: 0;}
  .mobile-only.menu.shown {left:0;opacity:1}
  .mobile-only a {color:#fdb943;background:#000;padding:10px;text-decoration:none;font-size: 0.9em;display:inline-block;margin:5px 0;}
  .mobile-only.menu a {display:block;margin:0;padding-bottom:6px}
  .mobile-only.featured a {color:#fdb943;background-color: #000;bottom: 20px;}


  .modal {background-color:#000}
  .modal-body {width: 100%;border: none;}
  .modal h2 {margin-left:10px}
  .modal-close {margin-right:10px}
  .carousel-cell img {display: block;margin: 0 auto;max-height: 70vh;width: 100%;  }

  .slick-prev, .slick-next {visibility:hidden}

}