/* colors
green
#b2c81d
blue
#179EDB
*/

@font-face {
    font-family: 'robotolight';
    src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
         url('../fonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'yanone_kaffeesatzregular';
    src: url('../fonts/yanonekaffeesatz-regular-webfont.woff2') format('woff2'),
         url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,body {
  background: #666;
  font:25px 'robotolight', sans-serif;
  color: #666;
  padding:0;
  margin:0;
  height:100%;
  min-height:100%;
}

body {
  margin-top:-20px;
}

a {
  color:#179EDB;
  text-decoration:none;
  transition: all 0.3s;
}

a:hover {
  color:#333;
}

.no-break {
 white-space: nowrap;
}

.blue {
  color:#179EDB;
}

.grid-item.blue-bg {
  background: #179EDB;
}

.logo {
  margin:0;
  padding:0;
  font-size:120%;
  font-family: 'yanone_kaffeesatzregular', sans-serif;
  color:#666;
  font-weight:bold;
}

h1.logo {
  font-size: 200%;
  position: relative;
  display:block;
}

h1.logo:before {
  content: 'binaryworx';
  color: rgba(255,255,255,1);
  position: absolute;
  opacity:0.1;
  top: 3px;
  left: 3px
}


#info p {
  font-size:70%;
  line-height:200%;
  margin:20px 0;
}

#info p.smaller, p.smaller {
  margin:5px 0;
  font-size: 60%;
}


#content {
  padding:0.8%;
  width:84%;
}

#mobile-content {
  display:none;
  min-height:auto;
}

#info {
  background:#fff;
  padding:30px;
  border-left:7px solid #179EDB;
  position:fixed;
  right:0;
  top:0;
  bottom:0;
  -webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
  box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.25);
  width:16%;
}

.no-link {
  cursor:text;
  color:#666;
}

/* MASONRY */

.grid-item, .grid-sizer {
  width: 24.25%;
  margin-bottom: 1%;
  min-height:328px;
  position:relative;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefefe+0,eeeeee+100 */
  background: #eee; /* Old browsers */
  background: -moz-radial-gradient(30% 30%, ellipse cover,  rgba(254,254,254,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(30% 30%, ellipse cover,  rgba(254,254,254,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at 30% 30%,  rgba(254,254,254,1) 0%,rgba(238,238,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  opacity:0.8;
  transition: opacity 0.3s ease-in;
}

.intro, .grid-item:hover {
  opacity:1;
}

.intro {
  background:#fff;
  border-bottom: 1px solid #666;
  z-index:9;
}

#text .grid-item {
  width:100%;
}

.grid-w2 { width: 49.5%; }

.grid-h2 {
  min-height:670px;
}

.gutter-sizer {
  width:1%;
}

.grid-inner {
  padding:30px;
  font-size:80%;
  line-height:160%;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}

#agency {
  color:#fff;
  text-shadow:none;
  background: #179EDB;
}

.auto-height {
  min-height:auto;
}

/* referenzen */
.ref-item {
  background-position:50% 50%;
  background-repeat:no-repeat;
  transition: all 0.3s ease-in;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  overflow:hidden;
  font-size:90%;
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
  opacity: 0.8;
}

.ref-item:hover {
  background-position: 50% -5%;
  -webkit-filter: grayscale(0); /* Chrome, Safari, Opera */
  filter: grayscale(0);
  opacity: 1;
}

#r-4tiso {
  background-image:url(../logos/4tiso.png);
}

#ebusti {
  background-image:url(../logos/ebusti.png);
}

#dorian {
  background-image:url(../logos/dorian.png);
}

#handwerk4 {
  background-image:url(../logos/handwerk4.png);
}

#elektrobach {
  background-image:url(../logos/elektrobach.png);
}

#holzbauhenz {
  background-image:url(../logos/holzbauhenz.png);
}

#kismet {
  background-image:url(../logos/kismet.png);
}

#marienburg {
  background-image:url(../logos/marienburg.png);
}

#matheus {
  background-image:url(../logos/matheus.png);
}

#medx {
  background-image:url(../logos/medx.png);
}

#muenchnerkreis {
  background-image:url(../logos/muenchnerkreis.png);
}

#pilates {
  background-image:url(../logos/pilates.png);
}

#slmetall {
  background-image:url(../logos/slmetall.png);
}

#sol {
  background-image:url(../logos/sol.png);
}

#steinhoff {
  background-image:url(../logos/steinhoff.png);
}

#vonbeulwitz {
  background-image:url(../logos/vonbeulwitz.png);
}

#yolivia {
  background-image:url(../logos/yolivia.png);
}

#anzing {
  background-image:url(../logos/anzing.png);
}

/*
# {
  background-image:url(../logos/.png);
}

*/

.grid-content {
  position:absolute;
  bottom:-140px;
  left:0;
  right:0;
  padding:30px 20px;
  height:140px;
  background: rgba(0,0,0,0.1);
  transition: bottom 0.3s ease-in;
  overflow:hidden;
}

.ref-outer {
  cursor: pointer;
}

.ref-outer:hover .grid-content {
  bottom:0;
}

h2,h3 {
  font-size:140%;
  margin:0 0 20px;
  font-family: 'yanone_kaffeesatzregular', sans-serif;
}

.intro h2 {
  margin:20px 0;
}

h3 {
  font-size:120%;
}

.ref-item p {
  margin:0;
}

.ref-item i {
  font-size: 70%;
}


@media only screen and (max-width:1900px) {
  .grid-item, .grid-sizer {
      width: 32.666%;
  }

@media only screen and (max-width:1440px) {
  .grid-item, .grid-sizer {
      width:49.5%;
  }
  .grid-w2 {
    width: 100%;
  }
  #content {
    width: 78%;
  }
  #info {
    width: 22%;
  }
}


@media only screen and (max-width:1200px) {
  #content {
    width: 70%;
  }
  #info {
    width: 30%;
  }
  .grid-h2 {
    height:auto;
  }
}

@media only screen and (max-width:1024px) {
  .ref-item {
    background-position: 50% 0;
    -webkit-filter: grayscale(0); /* Chrome, Safari, Opera */
    filter: grayscale(0);
    opacity: 1;
  }
  .grid-content {
    bottom: 0;
  }
}

@media only screen and (max-width:992px) {
  #content {
    padding:0;
  }
  .grid-item, .grid-sizer {
    width:100%;
    opacity:1;
  }
  #content {
    width: 65%;
  }
  #info {
    width: 35%;
  }
  h1 {
    margin-top:0;
  }
  .intro {
    min-height:auto;
    border-bottom: none;
  }
}

@media only screen and (max-width:767px) {
  #info {
    position:static;
    border:none;
    width:auto;
    height: 110px;
  }
  #content {
    width:auto;
  }
  #mobile-content {
    display:block;
  }
}
@media only screen and (max-width:480px) {
}