/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 26.11.2015, 01:11:00
    Author     : clausputscher
*/

@font-face {
font-family: "VeluxGothic";
src:url(../fonts/VeluxGothic-Regular.otf) format("opentype");
}

@font-face {
font-family: "VeluxGothic-bold";
font-weight: bold;
src:url(../fonts/VeluxGothic-Bold.otf) format("opentype");
}

@font-face {
font-family: "VeluxGothic-black";
font-weight: bold;
src:url(../fonts/VeluxGothic-Black.otf) format("opentype");
}

@font-face{ 
   font-family: VeluxGothic;
   src: url('../fonts/VeluxGothic-Regular.eot'); 
   src: url('../fonts/VeluxGothic-Regular.eot?') format('eot'), 
   url('../fonts/VeluxGothic-Regular.woff') format('woff'),  
   url('../fonts/VeluxGothic-Regular.ttf') format('truetype'),
   url('../fonts/VeluxGothic-Regular.svg#svgVeluxGothic-Regular') format('svg');
}

@font-face{ 
   font-family: VeluxGothicLight;
   src: url('../fonts/VeluxGothic-Light.eot'); 
   src: url('../fonts/VeluxGothic-Light.eot?') format('eot'), 
   url('../fonts/VeluxGothic-Light.woff') format('woff'),  
   url('../fonts/VeluxGothic-Light.ttf') format('truetype'),
   url('../fonts/VeluxGothic-Light.svg#svgVeluxGothic-Light') format('svg');
}

@font-face{ 
   font-family: VeluxGothicBold;
   src: url('../fonts/VeluxGothic-Bold.eot'); 
   src: url('../fonts/VeluxGothic-Bold.eot?') format('eot'), 
   url('../fonts/VeluxGothic-Bold.woff') format('woff'),  
   url('../fonts/VeluxGothic-Bold.ttf') format('truetype'),
   url('../fonts/VeluxGothic-Bold.svg#svgVeluxGothic-Bold') format('svg');
}

@font-face{ 
   font-family: VeluxGothicBlack;
   src: url('../fonts/VeluxGothic-Black.eot'); 
   src: url('../fonts/VeluxGothic-Black.eot?') format('eot'), 
   url('../fonts/VeluxGothic-Black.woff') format('woff'),  
   url('../fonts/VeluxGothic-Black.ttf') format('truetype'),
   url('../fonts/VeluxGothic-Black.svg#svgVeluxGothic-Black') format('svg');
}


* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.clear{
    clear:both;
    width: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
}

body {
  font-family: "VeluxGothic", sans-serif;
}

h1, h2, h3, h4, h5, h6, p {
  font-family: "VeluxGothic", sans-serif;
  font-weight: normal;
}

#inspiration-container{
  padding: 0 10px;
  margin: 0 auto;
  width: 940px;
}

/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.2em 1.0em 0;
  background: white;
  border: none;
  border-radius: 7px;
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  cursor: pointer;
  height: 61px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}


.button.is-checked {
  background: #333333;
  color: #ffffff;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}
.button p{
  font-size: 14px;
  margin-top: 5px;
  margin-bottom: 0;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;  
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  background: url('../images/button-border.png') no-repeat left top;
  float: left;
  border-radius: 0;
  text-align:center;
}
.button-group .button.is-checked {
  background: url('../images/button-border.png') no-repeat left top #333333;
}

.button-group .button:hover{
  background: url('../images/button-border.png') no-repeat left top #333333;
}

.button-group .button:hover p{
  color: #ffffff;
}

/*.button:active,
.button.is-checked {
  background: url('../images/button-border.png') no-repeat left top #333333;
}

.button:active p,
.button.is-checked p{
  color: #ffffff;
}*/


.button-group{
  background: url('../images/button-border.png') no-repeat right top;
  float: left;
}

/* ---- isotope ---- */


/* clear fix */
.isotope:after {
  content: '';
  display: block;
  clear: both;
}
.isotope{
  float: left;
  clear: left;
  width: 100%;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  margin-bottom: 34px;
  width: 48%;
}

.gutter-sizer{
  width: 3%;
}

.element-item .image{
  position: relative;
}

.element-item .darkener{
  background: rgba(0, 0, 0, 0.65);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.element-item .darkener .icon-container{
  left: 50%;
  position: relative;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.element-item .darkener .icon-container p{
  color: #ffffff;
  font-size: 22px;
}
.element-item:hover{
  cursor: pointer;
}
.element-item:hover .darkener{
  opacity: 1;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item p {
  font-size: 22px;
  margin-top: 12px;
}

#Navigation-Wrapper{
    float: left;
    clear: left;
    width: 100%;
}

#Navigation-Wrapper.no-title{
  margin-top: 30px;
}

#sorts{
    margin-bottom:20px;
}

h1{
  font-family: "VeluxGothicLight", sans-serif;  
  font-size: 46px;
  margin-bottom:30px;
  margin-top: 76px; 
}
h2{
  font-size: 22px;
  margin-top: 17px;
  margin-bottom: 25px;
}

h3{
  font-family: "VeluxGothicBlack", sans-serif;
  font-size: 15px;
  margin-top: 18px;
  margin-bottom: 14px;
}
p{
  font-size: 15px;
  line-height: 22px;
  margin-top: 0;
}

#Detail-View #Detail-View-Text{
    margin-bottom:100px;  
}

#filters{
    margin-bottom:23px;
}

.twentytwenty-container img{
  width: 100%;
}


@media (max-width: 959px){
	
  #inspiration-container{
    width: 100%;
  }
  h1{
    margin: 17px auto 30px auto;
    width: 90%;
  }
  #Navigation-Wrapper{
    margin-left: 5%;
    width: 90%;
  }
  #Detail-View{
    margin-left: 5%;
    width: 90%;
  }
  #Detail-View h2{
    margin-bottom: 35px;
  }
  .element-item{
    width: 100%;
  }
  .gutter-sizer{
    width: 0;
  }
  .element-item .image .big-image{
    width: 100%;
  }
}
@media (max-width: 939px){
  #filters{
    width: 100%;
  }
  .button-group .button{
    width: 25%;
  }
  .button-group{
    background: url('../images/button-border_big.png') no-repeat right top transparent;
  }
}
@media (max-width: 600px){
  #Detail-View{
    display: none;
  }
  .button-group{
    margin-top: 35px;
  }
  .button-group .button p{
    display: none;
  }
  .button-group .button img{
    margin-top: 15px;
  }
  #filters{
    margin-top: 0;
  }
}