body, html {
  /*font-size:100%;*/
  padding:0;
  margin:0;
  height:100%;
}

*, *:after, *:before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body {
  font-family:'Lato', Calibri, Arial, sans-serif;
  color:#f2ede3;
  background:#2a2831;
  font-size:0.9em;
  font-weight:300;
}

a {
  color:white;
  text-decoration:none;
  font-weight:600;
  letter-spacing:2px;
  padding:0 0px;
  text-transform:uppercase;
}

a:hover {
  color:#fff;
}

.logo {
  position:absolute;
  top:10px;
  margin:0 auto;
  left:50%;
  width:210px;
  margin-left:-105px;
  z-index:4;
}

@media only screen and (max-width : 800px) {
  .logo {
    width:150px;
    margin-left:-75px;
  }
}

.container-menu {
  position:relative;
  height:100%;
  padding-right:0;
  padding-left:0;
  margin-right:auto;
  margin-left:auto;
}

.intro-banner {
  position:relative;
  height:100%;
  width:100%;
  padding-left:0;
  padding-right:0;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  /*background-image:url("../../assets/img/bg-intro.png");*/
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

.intro-banner > h1 {
  font-size:3em;
  z-index:4;
  font-family:'Montserrat';
  font-weight:300;
  position:absolute;
  top:57%;
  left:50%;
  text-align:center;
  transform:translate(-50%, -50%);
  display:table;
  color:white;
}

.bg-images {
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  bottom:0;
  z-index:1;
}

.intro-overlay {
  position:absolute;
  max-width:100%;
  max-height:80%;
  top:62%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:3;
}

@media only screen and (min-width : 1100px) {
  .intro-banner-img {
  }
}

.bl-main {
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
}

.bl-main > section {
  position:absolute;
  width:50%;
  height:50%;
  overflow:hidden;
}

.bl-main > section:first-child {
  top:0;
  left:0;
  background:#3b3b3b;
}

.bl-main > section:nth-child(2) {
  top:0;
  left:50%;
  background:#FA987D;
}

.bl-main > section:nth-child(3) {
  top:50%;
  left:0;
  background:#72CCA7;
}

.bl-main > section:nth-child(4) {
  top:50%;
  left:50%;
  background:#10A296;
}

.bl-box {
  position:relative;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:1;
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  -ms-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  -webkit-box-pack:center;
  -moz-box-pack:center;
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content:center;
  -webkit-box-align:center;
  -moz-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
}

.bl-box h2 {
  text-align:center;
  margin:0;
  padding:20px;
  width:100%;
  font-size:2.2em;
  letter-spacing:2px;
  font-family:'Montserrat';
  font-weight:700;
  text-transform:uppercase;
}

.bl-icon-2 {
  font-family:FontAwesome;
  text-shadow:2px 2px 2px #000000;
  src:url('Green Web'),;
  speak:none;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  cursor:pointer;
  z-index:2;
  -webkit-font-smoothing:antialiased;
}

.bl-icon {
  font-family:FontAwesome;
  text-align:center;
  font-size:1.5em;
  margin-bottom:10px;
  text-transform:uppercase;
  font-weight:bold;
  color:white;
  text-shadow:0px 1px 2px rgba(0, 0, 0, 0.15);
  cursor:pointer;
  z-index:2;
  -webkit-font-smoothing:antialiased;
}

@media (min-width: 992px) {
  .bl-icon {
    font-size:2.5em;
  }
}

.bl-icon:before {
  display:block;
  font-size:2em;
  margin-bottom:10px;
}

.bl-icon-about:before {
  content:"\f008";
}

.bl-icon-works:before {
  content:"\e001";
}

.bl-icon-blog:before {
  content:"\e002";
}

.bl-icon-contact:before {
  content:"\e003";
}

.bl-main > section .bl-icon-close {
  position:absolute;
  top:20px;
  right:20px;
  cursor:pointer;
  z-index:100;
  opacity:0;
  pointer-events:none;
}

.bl-icon-close:before {
  content:"\f00d";
}

.bl-content, div.bl-panel-items > div > div {
  opacity:0;
  pointer-events:none;
  position:relative;
  padding-top:4%;
  padding-left:5%;
  padding-right:5%;
  padding-bottom:0%;
  height:90%;
  overflow:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.social-section {
  max-width:1000px;
}

.bl-content {
  z-index:2;
  font-family:'Montserrat';
}

.bl-content p {
  margin:0 auto;
  padding-bottom:15px;
  font-size:1.7em;
  line-height:1.8;
}

.bl-content h2 {
  margin:0 0 20px 0;
  color:white;
  font-family:'Montserrat';
  font-weight:700;
  text-transform:uppercase;
  font-size:2.2em;
  letter-spacing:2px;
}

.bl-content article {
  padding:20px 40px 20px 10px;
}

.bl-content article h3 {
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 10px 0;
  padding-top:20px;
  font-size:1.4em;
}

.bl-content article a {
  color:rgba(0,0,0,0.2);
}

.bl-content > ul {
  list-style:none;
  padding:0;
  margin:0;
}

.bl-content > ul li {
  display:inline-block;
  width:20%;
  margin:1%;
}

.bl-content > ul li a {
  display:block;
  padding:0;
  border:8px solid rgba(0,0,0,0.1);
}

.bl-content > ul li a:hover {
  border:8px solid rgba(81,182,231,0.6);
}

.bl-content > ul li a img {
  display:block;
  max-width:100%;
}

div.bl-panel-items, div.bl-panel-items > div {
  width:100%;
  height:100%;
  top:0;
  left:0;
  position:absolute;
}

div.bl-panel-items > div > div {
  max-width:1200px;
  margin:0 auto;
  opacity:1;
  bottom:90px;
  height: calc(100% - 50px);
  top:0px;
  pointer-events:auto;
}

div.bl-panel-items > div > div h3 {
  font-size:1.7em;
  margin:0 0 10px 0;
  font-weight:600;
  font-family:'Montserrat';
}

@media (min-width: 992px) {
  div.bl-panel-items > div > div h3 {
    font-size:2.1em;
    margin:0 0 15px 0;
  }
}

div.bl-panel-items > div > div p {
  font-size:1.0em;
  font-family:'Montserrat';
}

@media (min-width: 992px) {
  div.bl-panel-items > div > div p {
    font-size:1.2em;
  }
}

div.bl-panel-items > div > div .video-container {
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  position:relative;
  padding-bottom:61.25%;
  height:0;
  overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding-bottom:5%;
}

div.bl-panel-items > div > div img {
  float:none;
  display:block;
  margin-left:auto;
  margin-right:auto;
  max-width:100%;
  padding-bottom:5%;
}

div.bl-panel-items {
  top:100%;
  z-index:9999;
}

div.bl-panel-items > div {
  background:#2a2831;
  z-index:0;
  opacity:0;
  -webkit-transform:translateY(0);
  -webkit-transition:-webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  -moz-transform:translateY(0);
  -moz-transition:-moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  transform:translateY(0);
  transition:transform 0.5s ease-in-out, opacity 0s linear 0.5s;
  -ms-transform:translateY(0);
}

div.bl-panel-items nav {
  position:absolute;
  z-index:9999;
  width:416px;
  left:45%;
  top:0px;
  margin-left:-108px;
  opacity:0;
  -webkit-transition:opacity 0.2s ease-in-out 0.5s;
  -moz-transition:opacity 0.2s ease-in-out 0.5s;
  transition:opacity 0.2s ease-in-out 0.5s;
}

div.bl-panel-items.bl-panel-items-show nav span {
  float:left;
  margin:5px;
}

div.bl-panel-items nav span.bl-next-work {
  font-family:'Montserrat';
  font-size:1.1em;
  font-weight:700;
  letter-spacing:2px;
  display:block;
  text-transform:uppercase;
  line-height:5.5em;
  cursor:pointer;
  margin-right:2em;
}

@media (min-width: 992px) {
  div.bl-panel-items nav span.bl-next-work {
    line-height:5.5em;
  }
}

div.bl-panel-items.bl-panel-items-show nav {
  opacity:1;
  top:-100px;
}

@media (min-width: 600px) {
  div.bl-panel-items.bl-panel-items-show nav {
    opacity:1;
    top:-140px;
  }
}

div.bl-panel-items > div.bl-show-work {
  z-index:1000;
  opacity:1;
  -webkit-transform:translateY(-100%);
  -webkit-transition:-webkit-transform 0.5s ease-in-out;
  -moz-transform:translateY(-100%);
  -moz-transition:-moz-transform 0.5s ease-in-out;
  transform:translateY(-100%);
  transition:transform 0.5s ease-in-out;
  -ms-transform:translateY(-100%);
}

div.bl-panel-items > div.bl-hide-current-work {
  opacity:0;
  -webkit-transition:-webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -webkit-transform:translateY(-100%) scale(0.5);
  -moz-transition:-moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -moz-transform:translateY(-100%) scale(0.5);
  transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transform:translateY(-100%) scale(0.5);
  -ms-transform:translateY(-100%) scale(0.5);
  z-index:0;
}

.bl-main > section {
  -webkit-transition:all 0.5s ease-in-out;
  -moz-transition:all 0.5s ease-in-out;
  transition:all 0.5s ease-in-out;
}

.darker-video {
  background-color:rgba(0,0,0,0.5)!important;
  -webkit-transition:background-color 1000ms linear;
  -ms-transition:background-color 1000ms linear;
  transition:background-color 1000ms linear;
}

.bl-main > section.bl-expand {
  width:100%;
  height:100%;
  top:0;
  left:0;
}

.bl-main > section.bl-expand-top {
  z-index:100;
}

.bl-main > section:first-child.bl-expand {
  background:#2a2831;
}

.bl-main > section:nth-child(2).bl-expand {
  background:#2a2831;
}

.bl-main > section:nth-child(3).bl-expand {
  background:#2a2831;
}

.bl-main > section:nth-child(4).bl-expand {
  background:#0D8278;
}

.bl-main.bl-expand-item > section:not(.bl-expand), .bl-main.bl-expand-item > section.bl-scale-down {
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -ms-transform:scale(0.5);
  transform:scale(0.5);
  opacity:0;
}

.bl-box {
  -webkit-transition:opacity 0.2s linear 0.5s;
  -moz-transition:opacity 0.2s linear 0.5s;
  transition:opacity 0.2s linear 0.5s;
}

.intro-banner {
}

section.bl-expand .bl-box {
  opacity:0;
  -webkit-transition:opacity 0s linear;
  -moz-transition:opacity 0s linear;
  transition:opacity 0s linear;
}

.bl-box h2 {
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}

.no-touch section:not(.bl-expand) .bl-box:hover h2 {
  -webkit-transform:translateY(-15px);
  -moz-transform:translateY(-15px);
  -ms-transform:translateY(-15px);
  transform:translateY(-15px);
}

.bl-content, .bl-icon-close {
  -webkit-transition:opacity 0.1s linear 0s;
  -moz-transition:opacity 0.1s linear 0s;
  transition:opacity 0.1s linear 0s;
}

section.bl-expand .bl-content, section.bl-expand .bl-icon-close {
  pointer-events:auto;
  opacity:1;
  -webkit-transition:opacity 0.3s linear 0.5s;
  -moz-transition:opacity 0.3s linear 0.5s;
  transition:opacity 0.3s linear 0.5s;
}

@media screen and (max-width: 56.5em) {
  .bl-content, .bl-box {
    font-size:75%;
  }
}

@media screen and (max-width: 36.5em) {
  .bl-content, .bl-box {
    font-size:60%;
  }
}

@media screen and (max-width: 56.5em) {
  .bl-expand .bl-box {
    height:130px;
  }
}

@media screen and (max-width: 90.5em) {
  .bl-content > ul li {
    width:30%;
  }
}

@media screen and (max-width: 56.5em) {
  .bl-content > ul li {
    width:40%;
  }
}

@media screen and (max-width: 46.5em) {
  .bl-content > ul li {
    width:47%;
  }
}

@media screen and (max-width: 66.5em) {
  div.bl-panel-items > div > div {
    left:0px;
    right:0px;
    top:30px;
    width:69%;
  }
}

@media screen and (max-width: 46.5em) {
  .bl-content, div.bl-panel-items > div > div {
    left:0px;
    right:0px;
    top:30px;
    width:99%;
  }
}

@media screen and (max-width: 46.5em) {
  .bl-content article {
    padding:10px 10px 10px 10px;
  }
}

@media screen and (max-width: 1200px) {
  .container > .row > img {
  }
}

img {
  /*visibility:hidden;*/
}

@media (max-width: 600px) {
  .bl-next-work {
    font-size:1em!important;
  }
}

@media (max-width: 600px) {
  .fa-close {
    font-size:1em!important;
  }
}

@media (max-width: 66.5em) {
  div.bl-panel-items nav {
    left:40%;
  }
}

@media (max-width: 600px) {
  div.bl-panel-items nav {
    left:45%;
  }
}