@charset 'utf-8';
@import url(reset.css);

@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-regular.eot');
src: url('../fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-regular.woff') format('woff'),
     url('../fonts/opensans-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-semibold.eot');
src: url('../fonts/opensans-semibold.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-semibold.woff') format('woff'),
     url('../fonts/opensans-semibold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Open Sans';
src: url('../fonts/opensans-italic.eot');
src: url('../fonts/opensans-italic.eot?#iefix') format('embedded-opentype'),
     url('../fonts/opensans-italic.woff') format('woff'),
     url('../fonts/opensans-italic.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'Alegreya';
src: url('../fonts/alegreya-bold.eot');
src: url('../fonts/alegreya-bold.eot?#iefix') format('embedded-opentype'),
     url('../fonts/alegreya-bold.woff') format('woff'),
     url('../fonts/alegreya-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Alegreya SC';
src: url('../fonts/alegreyasc-bold.eot');
src: url('../fonts/alegreyasc-bold.eot?#iefix') format('embedded-opentype'),
     url('../fonts/alegreyasc-bold.woff') format('woff'),
     url('../fonts/alegreyasc-bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'SourceCodePro';
src: url('../fonts/sourcecodepro-regular.eot');
src: url('../fonts/sourcecodepro-regular.eot?#iefix') format('embedded-opentype'),
     url('../fonts/sourcecodepro-regular.woff') format('woff'),
     url('../fonts/sourcecodepro-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

a,
aside ul.downloads li a:hover p,
section ul.referenzen li p {
-webkit-transition-property: color, background;
-webkit-transition-duration: 150ms;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: color, background;
-moz-transition-duration: 150ms;
-moz-transition-timing-function: ease-in;
transition-property: color, background;
transition-duration: 150ms;
transition-timing-function: ease-in;
}

li.schalter a div {
-webkit-transition-property: all;
-webkit-transition-duration: 50ms;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: all;
-moz-transition-duration: 50ms;
-moz-transition-timing-function: ease-in;
transition-property: all;
transition-duration: 50ms;
transition-timing-function: ease-in;
}

ul.filter li a,
a * {
-webkit-transition-property: all;
-webkit-transition-duration: 300ms;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: all;
-moz-transition-duration: 300ms;
-moz-transition-timing-function: ease-in;
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease-in;
}

section ul.referenzen li:hover img {
-webkit-transition-property: opacity, filter;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: opacity, filter;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
transition-property: opacity, filter;
transition-duration: 400ms;
transition-timing-function: ease-out;
}

::selection {
background: rgba(242,165,0,0.8);
color: white;
text-shadow: none;
}

img {
-moz-user-select: text;
-webkit-user-select: text;
user-select: text;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

nav li a {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}

.klar {
clear: both;
}

body {
background-image: url('../img/rumpf.png');
background-color: rgb(247,247,247);
background-position: center;
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-size: 13px;
line-height: 20px;
font-weight: normal;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
color: rgb(15,10,20);
}

header {
background-image: url('../img/kopf.png');
background-color: rgb(230,231,230);
background-position: center;
overflow: hidden;
}

header div {
position: relative;
width: 976px;
height: 192px;
padding: 0 16px;
margin: 0 auto;
overflow: visible;
}

header h1 a {
display: block;
width: 128px;
height: 128px;
font-size: 0;
line-height: 0;
color: transparent;
background-image: url('../img/iljastreit.svg');
background-repeat: no-repeat;
position: absolute;
top: 32px;
left: 8px;
z-index: 150;
}

header div img {
display: block;
width: 544px;
height: 232px;
position: relative;
top: 0;
left: 496px;
z-index: 50;
}

header nav {
position: relative;
background-color: rgb(137,138,136);
background-color: rgba(15,18,10,0.42);
margin: 0 auto;
border-bottom: 1px solid white;
z-index: 100;
}

header nav ul,
section > div,
ul.filter,
footer nav {
width: 976px;
margin: 0 auto;
padding: 0 16px;
}

section.referenzen > div {
width: 1008px;
}

header nav ul {
padding-top: 7px;
padding-bottom: 8px;
}

header nav ul li {
display: inline;
margin: 0 32px 0 0;
font-family: 'Alegreya SC';
font-size: 18px;
line-height: 24px;
font-weight: bold;
text-transform: lowercase;
letter-spacing: 0.2em;
color: white;
text-shadow: none;
}

header nav ul li a {
display: inline-block;
color: rgb(207,208,206);
/* height: 40px; */
z-index: 100;
}

header nav ul li a:hover {
color: white;
text-shadow: 0px 0px 24px rgba(0,0,0,0.5);
}

header nav ul li a:active {
color: rgb(242,165,0);
background: transparent;
}

ul.pagination {
clear: both;
border-top: 1px solid rgb(195,194,196);
padding: 16px 0 0 0;
}

li.ellipsis {
margin-right: 8px;
}

ul.filter {
position: relative;
padding: 0 0 4px 0;
z-index: 100;
/* border-bottom: 1px solid rgb(212,212,211); */
}

ul.filter li,
ul.pagination li {
display: inline-block;
}

ul.filter span,
ul.filter a,
ul.pagination li a {
display: inline-block;
color: black;
background: rgb(195,196,194);
padding: 0 8px 2px 8px;
margin: 8px 8px 4px 0;
-webkit-border-radius: 20px;
border-radius: 20px;
}

ul.filter span.vorzur,
ul.filter a.vorzur {
display: block;
width: 22px;
height: 22px;
padding: 0;
font-family: 'SourceCodePro';
font-size: 20px;
line-height: 17px;
text-align: center;
}

ul.filter span.vorzur,
ul.pagination li.disabled a,
ul.pagination li.disabled a:hover {
color: rgb(195,196,194);
background: rgb(219,219,218);
text-shadow: none;
cursor: default;
}

ul.pagination li.selected a {
cursor: default;
}

.js ul.filter li.schalter {
float: right;
}

.js ul.filter li.schalter a {
position: relative;
display: block;
float: left;
width: 40px;
padding: 0;
-webkit-border-radius: 20px;
border-radius: 20px;
background: rgb(137,138,136);
border: 1px solid rgb(137,138,136);
color: white;
text-shadow: none;
margin: 8px 8px 4px 8px;
-webkit-box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2);
box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.2);
}

.js ul.filter li.schalter span {
display: inline;
float: left;
margin: 8px 0 4px 0;
background: none;
}

.js ul.filter li.schalter a div {
position: relative;
top: 0;
left: 0;
display: block;
width: 20px;
height: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: white;
padding: 0;
margin: 0;
-webkit-box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.1);
box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.1);
}

.js ul.filter li.schalter a.aktiv div {
left: 20px;
}

ul.filter a:hover,
ul.filter a.aktiv,
ul.filter li.schalter a:hover,
ul.pagination li.selected a,
ul.pagination li a:hover {
color: white;
text-shadow: none;
background: rgb(242,165,0);
}

ul.filter a.aktiv:hover {
background: black;
}

ul.filter li.schalter a {
display: none;
}

ul.filter a:active,
ul.pagination li a:active {
background: black;
text-shadow: none;
}

.js ul.filter li.mat {
display: none;
}

.js ul.filter.mat li.mat {
display: inline-block;
}

.js ul.filter.mat li.kat {
display: none;
}

section {
padding: 32px 0;
}

section article {
float: left;
width: 472px;
padding-bottom: 32px;
}

hr {
background: rgb(195,194,196);
height: 1px;
border: none;
margin-bottom: 40px;
clear: both;
}

article h2 {
font-family: 'Alegreya';
font-size: 24px;
line-height: 28px;
font-weight: bold;
color: rgb(242,165,0);
margin: 0 0 10px 0;
text-indent: -1px;
}

article h2 span,
article p.datum {
color: rgb(137,138,136);
}

article h3 {
font-family: 'Alegreya';
font-weight: bold;
font-size: 18px;
line-height: 24px;
color: black;
margin: 20px 0 10px 0;
}

article.referenz h3 {
font-family: 'Open Sans', Arial, Verdana, sans-serif;
font-size: 13px;
line-height: 20px;
font-weight: normal;
font-style: italic;
}

article h2 + h3,
article h3 + h4 {
margin-top: 0;
}

article h4 {
font-weight: bold;
margin: 20px 0 10px 0;
}

article.referenz h4 {
margin: 10px 0 0 0;
}

article h5 {
font-style: italic;
margin: 10px 0 5px 0;
color: black;
}

article p {
margin: 0 0 10px 0;
}

article p.datum {
margin: 0 0 8px 0;
}

article ul {
margin: 0 0 8px 0;
}

article ul li {
padding-left: 12px;
text-indent: -12px;
margin: 0 0 4px 0;
}

article ul li:before {
content: '› ';
display: block;
float: left;
width: 12px;
color: rgb(212,135,0);
}

article ol {
list-style-type: decimal;
list-style-position: inside;
}

article ol li {
margin: 0 0 4px 0;
}

article a,
footer a {
color: rgb(212,135,0);
}

article a:hover,
footer a:hover {
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
-webkit-border-radius: 3px;
border-radius: 3px;
color: white;
text-shadow: none;
background: rgb(212,135,0);
border: 4px solid rgb(212,135,0);
margin: -4px;
}

article a:active,
footer a:active {
background: rgb(137,138,136);
border-color: rgb(137,138,136);
}

article iframe {
background: white;
}

aside {
float: right;
width: 456px;
background-image: url('../img/kopf.png');
background-color: rgb(230,231,230);
margin: 8px 0 32px 0;
padding: 4px 0 0 16px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

aside ul.galerie {
margin: 12px 0 0 0;
}

aside ul.galerie li {
display: inline-block;
vertical-align: top;
margin: 0 16px 16px 0;
height: 120px;
}

aside ul.galerie li a {
display: block;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.2);
}

aside ul.galerie li a:hover {
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.4);
border: 4px solid white;
margin: -4px;
}

aside ul.galerie li a img {
display: block;
}

aside ul.galerie li a.dreid {
position: relative;
background-color: rgba(0,0,0,.7);
min-width: 120px;
height: 120px;
}

aside ul.galerie li a.dreid span {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
display: block;
text-align: center;
vertical-align: middle;
text-shadow: none;
color: black;
background-color: rgba(255,255,255,.8);
padding: 8px;
font-family: 'Alegreya SC';
font-size: 18px;
font-weight: bold;
text-align: center;
line-height: 24px;
height: 24px;
width: 24px;
border-radius: 50%;
z-index: 100;
}

aside ul.galerie li a.dreid:hover span {
color: white;
background-color: rgb(242,165,0);
}

aside ul.galerie li a.dreid img {
opacity: 1;
z-index: 10;
}

aside ul.galerie li a.dreid:hover img {
opacity: .5;
}

aside ul + ul.downloads,
aside ul.downloads li + li {
border-top: 1px solid rgb(195,194,196);
}

aside ul.downloads {
margin: 0 16px 0 0;
}

aside ul.downloads li {
clear: both;
padding: 12px 0 16px 0;
}

aside ul.downloads li p {
display: block;
width: 40px;
height: 52px;
text-shadow: none;
line-height: 76px;
color: white;
font-size: 11px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 4px 12px 16px 0;
background: rgb(176,177,174);
-webkit-border-radius: 0px 12px 0px 0px;
border-radius: 0px 12px 0px 0px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
float: left;
}

aside ul.downloads li a {
color: black;
}

aside ul.downloads li a:hover {
color: rgb(212,135,0);
text-shadow: none;
}

aside ul.downloads li a:hover p {
background: rgb(242,165,0);
-webkit-box-shadow: none;
box-shadow: none;
}

aside ul.downloads li a:active {
color: rgb(137,138,136);
}

section ul.referenzen {
width: 1008px;
padding: 16px;
line-height: 0;
}

section ul.referenzen li.aus img {
opacity: 0.25;
filter: grayscale(1) blur(2px);
-webkit-filter: grayscale(1) blur(2px);
-moz-filter: grayscale(100%) blur(2px);
-ms-filter: grayscale(100%) blur(2px);
filter: gray;
}

section ul.referenzen li.aus:hover img {
opacity: 1;
filter: grayscale(0) blur(0);
-webkit-filter: grayscale(0) blur(0);
-moz-filter: grayscale(0) blur(0);
-ms-filter: grayscale(0) blur(0);
filter: none;
}

section ul.referenzen li {
position: relative;
display: inline-block;
width: 136px;
height: 136px;
margin: 0 32px 32px 0;
}

section ul.referenzen li div.meta {
display: none;
}

section ul.referenzen li p {
position: absolute;
line-height: 18px;
left: 0px;
bottom: 0px;
padding: 6px;
width: 124px;
color: transparent;
background: transparent;
text-shadow: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}

section ul.referenzen li:hover p {
color: black;
background: white;
background: rgba(255,255,255,0.9);
}

section ul.referenzen li img {
display: block;
width: 136px;
height: 136px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
-webkit-border-radius: 2px;
border-radius: 2px;
}

section ul.referenzen li:hover img {
-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.4);
border: 4px solid white;
margin: -4px;
}

section.referenz {
padding-bottom: 0;
}

section div#map {
clear: both;
height: 400px;
width: auto;
margin: 0;
padding: 0;
border-top: 1px solid rgb(195,194,196);
border-bottom: 1px solid rgb(195,194,196);
}

footer {
clear: both;
padding: 8px 0;
}

footer ul li {
display: inline-block;
}

footer ul li + li:before {
content: ' · ';
}


/* Displays unter 1024px */
@media only screen and (max-width: 1023px) {
  section > div,
  header div,
  header nav ul,
  section > div,
  ul.filter,
  section ul.referenzen,
  footer nav {
  width: auto;
  padding-right: 32px;
  padding-left: 32px;
  }
  
  section.referenzen > div,
  section ul.referenzen {
  width: auto;
  padding: 0 16px;
  }
  
  .js ul.filter li.schalter {
  float: left;
  margin-right: 16px;
  }
  
  header h1 a {
  left: 24px;
  }
  
  header div img {
  position: absolute;
  left: auto;
  right: 0;
  }
  
  section article {
  width: auto;
  max-width: 472px;
  }
  
  aside {
  width: calc(100% - 536px);
  }
}

/* Displays unter 800px */
@media only screen and (max-width: 800px) {

  aside {
  width: auto;
  float: left;
  }

}

/* Displays unter 720px */
@media only screen and (max-width: 720px) {

  header nav {
  background-color: rgb(137,138,136);
  }
  
  header nav ul li {
  margin: 0 16px 0 0;
  }
  
  section div#map {
  height: 256px;
  }
  
  section ul.referenzen li {
  margin: 0 16px 16px 0;
  }

}

/* Displays unter 520px */
@media only screen and (max-width: 520px) {

  section > div,
  header div,
  header nav ul,
  section > div,
  ul.filter,
  section ul.referenzen,
  footer nav {
  width: auto;
  padding-right: 16px;
  padding-left: 16px;
  }

  section.referenzen {
  padding: 16px 0;
  }

  section.referenzen > div,
  section ul.referenzen {
  padding: 0 8px;
  }

  header div img {
  left: -24px;
  right: auto;
  }

  header h1 a {
  left: 8px;
  top: 8px;
  }

}

/* iPhone breite */
@media only screen and (max-width: 320px) {

  section ul.referenzen {
  margin-right: -16px;
  }

  section ul.referenzen li,
  section ul.referenzen li a,
  section ul.referenzen li a img {
  width: 128px;
  height: 128px;
  }

}

/**** Isotope filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}