/**
 * typography & basics setup
 */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -ms-box-sizing: border-box;
/*  margin: 0;
  padding: 0;
*/
}

body {
  margin: 0;
  font-family: 'Nunito', helvetica, arial, georgia;
}

h1, h2, h3, .menu-item { color: #036; font-weight: 600; }

/*color fix for menu items*/
.menu-item:visited { color:#036; }

h1 {
  font-size: 30px;
}
.inner-wrapper h1 {
  margin-left: 48px;
}
h2 { color: #666; font-size: 24px; }

a { text-decoration: none;}

/*a:link{color:inherit}*/
/*a:active{color:inherit}*/
/*a:visited{color:inherit}*/
/*a:hover{color:inherit}*/

.panel h2.header a {
  /*anchor will be extended to fill box horizontally*/
  display: block;
  /*hacky, but hey...*/
  color: #666;
}
.panel p {
  color: #666; 
  font-weight: 100;
  font-family: helvetica, arial, georgia;
}

li {
  margin-left: -20px;
  list-style-type: none;
}


/*always show scrollbar*/
/*html { overflow-y: scroll; } */


.wrapper {
  /*position context for children*/
  position: relative;
  margin: 0 auto;
  /*width: 100%;*/
  min-width: 960px;
  background: url(images/alu-bg.jpg);
  background-color: #d1d1d1;
}


/**
 * header
 */

header {
  padding-top: 63%;
  min-width: 960px;
  /*height: 800px;*/
  background: url(images/header-mountain-lake.jpg) no-repeat;
  background-size: 100%;
}
.logo {
  position: absolute;
  top:0;
  right:0;
  width: 148px;
}
.header-captions {
  position:absolute;
  top: 25em;
  display: block;
}
.menu-item {
  display: inline-block;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 3px 20px 0 35px;
  width: 255px;
  height: 40px;
  background-color: rgba(255,255,255,.5);
  vertical-align: middle;
  font-weight: 600;
  font-size: 26px;

  -webkit-transition: width .5s ease-in-out;
     -moz-transition: width .5s ease-in-out;
      -ms-transition: width .5s ease-in-out;
       -o-transition: width .5s ease-in-out;
          transition: width .5s ease-in-out;

}

.menu-item-green-energy:hover { width: 550px; }
.menu-item-mobile-web:hover { width: 650px;}
.menu-item-real-estate:hover  { width: 800px; }


.main {
  position: relative;
  display: none;
  /*for panel-images to initially hide*/
  overflow: hidden;
  min-width: 960px;
  min-height: 500px;
}




/**
 * panels
 */

.panels {
  margin-left: 30px;
  padding-bottom: 100px;
}

.panel {
  position: relative;
  display: block;
  /* overridden by kwicks but good for when JavaScript is disabled */
  margin-top: 10px;
  padding: 10px 20px;
  width: 60%;
  border: 1px solid #666;
  border-radius: 8px;
  background-color: #fff;
}


.panel-images > li {
  margin-bottom: 4px;
}
.panel-images img,
.panel img {
  position: absolute;
  top: 0px;
  right: -275px;
  width: 235px;
  border-radius: 8px;
  opacity: 0;
  -webkit-transition: -webkit-transform 1s ease-out,
  opacity 1s ease-in-out;
  transition: transform 1s ease-out,
  opacity 1s ease-in-out;
  transition: transform 1s ease-out,
  opacity 1s ease-in-out;
  transition: transform 1s ease-out,
  opacity 1s ease-in-out;
  transition: transform 1s ease-out,
  opacity 1s ease-in-out;
  
  -webkit-transform: translate(300px, 0);
  -moz-transform: translate(300px, 0);
  -ms-transform: translate(300px, 0);
  -o-transform: translate(300px, 0);
  transform: translate(300px, 0);

}
.panel:hover img {
  opacity: 1;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
 }

.footer-boxshadow {
  height: 18px;
  background: url(images/footer-alu-shadow-softer.png) 100% 100% repeat-x;
}

footer {
  position: relative;
  bottom: 0;
  min-width: 960px;
  width: 100%;
  height: 190px;
  background: url(images/footer-alu-bg.jpg) repeat-x;
/*  background: url(images/footer-alu-shadow.png) no-repeat,
              url(images/footer-alu-bg.jpg) 0 18px no-repeat;
*/
  font-weight: 600;
}

footer nav {
  margin: 0 auto;
  padding-top: 80px;
  width: 100%;
  text-align: center;
}
footer nav a {
  display: inline-block;
  margin: 0 20px;
  color: white;
  font-size: 20px;
}
footer nav a:hover {
  color: #036;
  opacity: .5;
}

.follow img {
  vertical-align: middle;
}

.copyright {
  color: #444;
  text-align: center;
  font-weight: 300;
  font-size: 12px;
}

/**
 * front-page specifics
 */


.inner-wrapper {
    margin-left: 20px;
}


/**
 * /project page specifics 
 */
.back-header {
  position: relative;
  height: 133px;
  background-color: white;
}
.back-header a {
  position: relative;
  top: 60%;
  padding-left: 20px;
  color: #036;
  font-weight: 600;
  font-size: 24px;
}
.back-header .logo-small {
  position: absolute;
  top: 6px;
  right: 6px;
}
.back-header .logo-small img {
  width: 120px;
}

.project {
  /*border fix*/
  overflow: hidden;
  margin: 30px 20px;
  min-width: 960px;
  border: 1px solid black;
  border-radius: 16px;
  background-color: #ebebeb;

}
.project-panel {
  overflow: hidden;
  width: 100%;
  /*border: 1px solid #333;*/
  /*border-radius: 8px;*/
  background-color: white;
}

.ehc-box {
  background-color: white;
}
.ehc-box a {
  text-decoration: underline;
}
.project-panel p {
  font-size: 14px;
}
.desc-panel {
  float: left;
  padding: 0 30px;
  width: 65%;
}
.info-panel {
  float: right;
  overflow: hidden;
  margin-right: 26px;
  padding-top: 23px;
  width: 30%;
}

.info-image {
  width: 100%;
  border-radius: 8px;
}
.info-panel ul {
  display: inline-block;
  margin-bottom: 50px;
  width: 48%;
  vertical-align: top;
  /*border: 1px solid black;*/
  text-align: left;
  word-wrap: break-word;
  -moz-hyphens: auto;
  font-size: 12px;
}
.info-panel li:first-of-type {
    margin: 0 0 5px -35px;
    list-style-type: none;
}
.info-panel li {
    list-style-type: square;
}
/**
 * consultancy page specifics
 */

.project.consultancy {
  /*display: table;*/ border-spacing: 8px;
  border-collapse: separate;
  /*background-color: transparent;*/
  margin: 30px 20px;
  padding: 20px 0 30px 0;
  border: 1px solid black;
  border-radius: 16px;
  background-color: #ebebeb;

}
.project.consultancy .ehc-box img {
    width: 100%;
}
.project.consultancy .ehc-header {
  /*display: table-caption;*/
}
.project .ehc-header {
  margin-left: 40px;
}

.project .ehc-row { width: 98%; margin: 0 auto; }
.project.consultancy .ehc-row {
  display: block;
}

.project .ehc-box {
  padding: 5px;
  border: 1px solid black;
  border-radius: 16px;
  vertical-align: top;
  font-size: 12px;
}
.project.consultancy .ehc-box {
  display: table-cell;
  width: 25%; /* 1/4 for 4 boxes in per row*/
}
.ehc-box p,
.ehc-box li {
  list-style-type: disc;
}
.ehc-box h3 {
  font-size: 16px;
}
.ehc-box.single {
  margin: 40px 25px;
  background-color: white;

} 
.ehc-box h2 {
  margin: 15px;
}
.ehc-box.single p {
  margin: 15px;
  /*a test size for paragraphs*/
  font-size: 14px;
}
.ehc-box.single img {
  padding: 15px;
}
.ehc-box.single.green-mile img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 66%;
}
p.image-caption {
  float: right;
}

/**
 * about us page specifics
 */


.staff-box {
  margin: 40px 0 40px 20px;
  /*border: 1px solid black;*/
}
.staff-img {
  float: left;
  /*border: 1px solid red;*/
  /*resets padding from `.ehc-box.single img` for border-radius to show*/
  padding: 0 !important;
  margin-top: 20px;
  width: 15%;
  border-radius: 8px;
}
.staff-text {
  float: right;
  width: 84%;
  /*border: 1px solid red;*/
}

/**
 * client page specifics
 */

.client-logos {
  margin: 30px auto 30px;
  width: 80%;
}
.client-logos img {
  max-width: 20%;
  border: 1px solid transparent;
  vertical-align: middle;
  -webkit-transition: -webkit-transform .5s;
  transition: transform .5s;
}
.client-logos img:hover {
  border: 1px solid #ccc;
  box-shadow: 8px 8px 7px #777;
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

/**
 * video & animation page specifics
 */
#ytobject {
  /*transform: rotate(5deg);*/ /*lol!*/
/*border: 10px solid green;*/
margin: 30px;
border-radius: 16px; /*possible?*/
}

/**
 * helper classes
 */

.fr { float: right; }
.fl { float: left; }
.clearfix { clear: both; }