/* Head iframe ---------------------------------------------------------*
 div iframe{
  top:0;left:0px;position:none;
  margin:0;
  padding-bottom:0px;
  max-width:1900px;height:400px;
  border:0;
  }

/* Mixins ----------------------------------------------------*/

#filter-container {
   overflow: hidden;  
   /* margin:30px; padding: 37px 30px 50px 30px  ;  wirkungslos nach localstyle verlagert */
  }
#filter-container div {  margin-bottom:1.5em;   }
.home-featured { padding-left:14em; transition: padding-left 0.8s; 
     padding-right:-40px;   }
img {margin:0 6px 6px 0px;}

/* Vars -----------------------
  smallscreen, mobile und desktop werden hier eineindeutig als semaphore für späteres Javascript erzeugt.
  --------------------------------*/
body:after{   content:'smallscreen'; display:none;  }


/* zentriert filter-container ; responsive Breite einstellen 
    Optimierung nach Spalten und Aussehen nicht nach Graka Auflösungen.
   Mobiles Hochformat (320x480) ---   Mobiles Querformat (480x320)
   Zustand 0 .....Einspalter Vorgabe ohne top menueoffset 170     */
@media only screen and  (max-width: 319px ) 
{  /* schaltesemaphore fuer javascript  window.getComputedStyle(document.body,':after')   */
@viewportnix {
    width: 420px; zoom:0.55;
}
body {margin-top :2.3em;}
footer  h3{
    color: #202020 !important;
    font-size: 1.0em !important;
    line-height: 1.5em;
}
.central { 
    position: relative;
/*    left: 0; */
 /*   top: 3em; */
    width: 92% !important;

    margin: 3em auto 1em  !important;
 /*   clear: both; +/
}

#footwrapper {
margin-left:3em !important;
}

.wrapper {  
   width: 280px; /* filter-container  -20 */
 // top:5em;  
  }
#iframe-wrapper-pageHeader {display:none;}
div#headspace {display:none;}

/* Fancybox smallscreen */
.fancybox-skin {width:92% !important;}
.fancybox-title-inside-wrap {
	padding-top: 10px; 
 // font-size:0.92em !important;
 }
div {margin:auto;} /* mittelt die Bildstellung horizontal */

#sidebar {position:fixed !important; padding-left:0.2 !important; top:40px; margin-left:-55% !important;}
ul#sidebar a{
   display: inline-block; background-color :rgba(222, 222, 222, 0.2);
    width:10px;     height:10px;
   border:2px solid rgba(222, 222, 222, 0.8) ; 
   webkit-border-radius: 50%;
   moz-border-radius: 50%;
   border-radius: 50%;
   box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, 0.4);
   }
ul#sidebar h4{ overflow:hidden;width:0; } /*  text display behind mask */

li a.selected span::after {content:""; border:0 !important;} /* clear Indexmarker Pfeil */

li a.selected  {
  width:16px !important;
  background-color:#c0c0c0 !important;
}
ul#sidebar:before{   content:"______________________________________________";color:transparent; position:relative;left:-0.34em;top:-40px; height:2em; 
  background-color :rgba(0, 0, 0, 0.6);
  }
a.selected h4{ 
  overflow:visible !important ;
   position: absolute; left -0.3em; top:-1.6em; color:white;;
  } /* filtertitel anzeigen  */

.home-featured { padding-left:0.6em;    }
ul#sidebar li {width:0;    background-color :rgba(155, 155, 155, 0.0);
  }
#filter-container {
  width:300px !important;
  margin : 0 0 0  -1.1em !important;   
  }

} /* endmedia 000000000000000000000000000000000000000000000000000000 */

/*		Mobile Layout: 481px.
  Mobiles Querformat (481x320)
  Mobiles Hochformat (481*hx) bis (481 - 767)*hx
    Zustand 1            300 + 170 meueoffset 
  max-width hier real plus 120px notieren  481real +120 = 601notiert  */
@media only screen and (min-width: 320px) and (max-width: 705px) 
{
@viewport {
    width: 380px; zoom:0.74;
}
footer  h3{
    color: #202020 !important;
    font-size: 1.0em !important;
    line-height: 1.5em;
}
body:after{  /* schaltesemaphore fuer javascript   window.getComputedStyle(document.body,':after') */
  content:'mobile'; display:none;  }
/* Fancybox */
.fancybox-skin {width:92% !important;}
.fancybox-title-inside-wrap {
	padding-top: 10px; 
 font-size:0.8em !important;
 }
 .wrapper {
    width: 480px; /* filter-container  -20 :: 170+310 */
    noposition: relative; top:2em; padding-left : 11em;   transition: padding-left 1.8s; }

 #filter-container {
  width:560px; /* 600px;   */
  margin-left :0em; /* 0.21em;   */
  }
.home-featured { padding-left:0.2em;    }
#sidebar {padding-left:0.9em !important;}
} /* end 1 11111111111111111111111111111111111111111111111 */


@media only screen and (min-width: 706px) and (max-width: 920px) 
{
  /*  Querformat für kleine Tablets (800x600) 
  Hochformat für kleine Tablets (600x800)
  Zustand 2  ------------offset---+--zweispalter----------------------- */

 body:after{ /* schaltesemaphore fuer javascript
   window.getComputedStyle(document.body,':after') */
  content:'mobile'; display:none;  }
/* Fancybox */
.fancybox-skin {width:92% !important;}
.fancybox-title-inside-wrap {
	padding-top: 10px; 
 // font-size:0.92em !important;
 }
/* div {margin:auto;} /* mittelt die Bildstellung horizontal */
.wrapper {
    width: 580px;
    noposition: relative; top:2em;  padding-left : 5em;   
    transition: padding-left 1.8s; }

#filter-container {width:600px;     }
} /* end 2  22222222222222222222222222222222222222222222222222 */

/* Zustand 3   */
/* --- Maximum ---*/
@media only screen and (min-width: 921px) and (max-width: 1279px) 
{
  /* Tabletquerformat (1024x768)----------------------------------
   * Tablethochformat (768x1024) ---------------------------------*/

body:after{ /* schaltesemaphore fuer javascript   window.getComputedStyle(document.body,':after') */
  content:'mobile'; display:none;  }

/* Fancybox */
.fancybox-title-inside-wrap {
	padding-top: 10px; 
 // font-size:0.92em !important;
 }
/* div {margin:auto;} /* mittelt die Bildstellung horizontal */

 .wrapper {
    nowidth: 580px; /* filter-container  -20 */
    noposition: relative; top:2em; nopadding-left : 1em; transition: padding-left 1.8s;
    }
 #filter-container{width:680px;    }
} /* end 333333333333333333333333333333333333333333333333333333 */

/* zustand 4 = maxzentriert filter-container responsive Breite einstellen 
 * Desktop */

@media only screen and (min-width: 1280px) 
{
body:after{   /* schaltesemaphore fuer javascript   window.getComputedStyle(document.body,':after') */
  content:'desktop'; display:none;  }
/* Fancybox */

.fancybox-title-inside-wrap {
	padding-top: 10px; 
 // font-size:0.92em !important;
 }
.wrapper {  
  // width: 70%; /* filter-container  -20 */
  noposition: relative; top:2em; padding-left : 1em;  transition: padding-left 1.8s; }

#filter-container{width:98%;   }
} /* end 4  444444444444444444444444444444444444 */


/* zustand 5 = maxzentriert filter-container responsive Breite einstellen 
 * Desktop */

@media only screen and (min-width: 1600px) 
{
body:after{   /* schaltesemaphore fuer javascript   window.getComputedStyle(document.body,':after') */
  content:'desktop'; display:none;  }

#iframe-wrapper-pageHeader { width:100%; background: black;}
iframe {position:relative ; left:50%; margin-left:-800px;}

.wrapper {  
  /* filter-container  -20 */
  noposition: relative; top:2em; padding-left : 1em;  transition: padding-left 1.8s; }

#filter-container{width:77%;  height:94%; }
} /* end 5555555555555555555555555555555555 */


/* GENERAL ------------------------------------------------------------*/
.cf:after,
.cf:before {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
.floatleft {margin:0;  padding:0; } /* Einfluss aus ZMSGraphic graphic canceln*/
.ZMSGraphic{
   //margin-bottom:30px;margin-right:20px;
   margin : auto 0;
   float:left ;
   }

.graphic {


  }


body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
}
body a {
  text-decoration: none;
  /*  -webkit-transition: all 0.3s ease; 
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; */
}
body p {
  margin-bottom: 21px;
}
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
#main, footer {
  line-height: 1.5em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Voltaire', sans-serif;
}
h1 {
  font-size: 42px;
}
h2 {
  font-size: 36px;
}
h3 {
  24px;
}
h5 {
h4 {
  font-size: 21px;
}
  font-size: 18px;
}
h6 {
  font-size: 14px;
}
.alignleft {
  float: left;
  margin: 5px 10px 5px 0;
}
.alignright {
  float: right;
  margin: 5px 0px 5px 10px;
}
.section-div {
  height: 54px;
  border-top: 1px solid #ccc;
}
#logo {
  margin-top: 10px;
  margin-bottom: 20px;
  float: left;
}
#logo:hover {
  opacity: 0.8;
}
/* ENTRY CONTENT ----------------------------------------------------*/.entry-content .heading {
  margin-bottom: 1.5em;
}
/* COMBO NAVIGATION ------------------------------------------------------------*/
#comboNav {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 30px;
  float: left;
}
/* NAVIGATION ------------------------------------------------------------*/
#nav {
  float: right;
  text-decoration: none;
}
#nav > li {
  margin: 0 10px;
}
#nav > li:first-child {
  margin-left: 0px;
}
#nav > li:last-child {
  border-right: none;
  padding-right: 0px;
}
#nav > li > a {
  font-family: Arial, sans-serif;
  font-size: 12px;
  display: block;
  overflow: hidden;
  line-height: 80px;
  border-top: 3px solid transparent;
}
/* sub navigation -----------------------------------------------------*/
.sfHover ul {
  display: block;
  margin-top: 30px;
  margin-left: 0px;
  text-shadow: none;
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.sfHover ul li a {
  display: block;
  padding: 20px 20px;
  display: block;
  font-size: 11px;
  text-decoration: none;
}
/* WIDGET COLS ------------------------------------------------------------*/
.widget-cols {
  margin-top: 60px;
  margin-bottom: 30px;
  font-size: 11px;
}
.widget-cols h4 {
  margin-bottom: 30px;
  font-weight: normal;
  text-align: center;
}
.widget-cols > li {
  width: 220px;
  float: left;
  margin-right: 20px;
}
.widget-cols > li.fourth-col {
  margin-right: 0px;
}
/* HEADER ------------------------------------------------------------*/
header .wrapper {
  /* SLIDER ------------------------------------------------------------*/

}

#kachelpasspartout {
  margin-bottom: 2em;
//  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
//  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
//  -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
//  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
margin-left:1.3em;
}

/* MAIN ------------------------------------------------------------*/
#obs_main {
  min-height: 500px;
  padding-top: 40px;
}
body.home #no_main {
  padding-top: 120px;
}
/* HEADLINE ----------------------------------------------------*/#headline {
  margin-bottom: 20px;
  font-family: 'Voltaire', sans-serif;
  font-size: 48px;
  line-height: 1.1em;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  text-indent: -9000px;
  border-bottom: 1px solid #ccc;
  padding-top: 22px;
  padding-bottom: 22px;
}
/* MASTHEAD ----------------------------------------------------*/.masthead {
  margin-bottom: 35px;
  font-family: 'Voltaire', sans-serif;
  font-size: 48px;
  line-height: 1.1em;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #ccc;
  padding-bottom: 22px;
}
/* FILTERED ITEMS ----------------------------------------------------*/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
#nfilter-buttons {
  text-align: center;
  border-bottom: 1px solid #999;
  margin-bottom: 20px;
}
#nfilter-buttons li {
  display: inline-block;
  margin-bottom: 0px;
}
#nfilter-buttons li a {
  display: block;
  text-decoration: none;
  padding: 5px 10px;
  margin-bottom: 0px;
}






/* PAGE ----------------------------------------------------*/
#page-content,
#page-content-sb {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
}
#page-content-sb {
  width: 640px;
  float: left;
  margin-right: 60px;
}

/* PORTFOLIO ----------------------------------------------------*/#portfolio-content {
  position: relative;
  margin-top: 30px;
  margin-bottom: 60px;
}
#portfolio-content #filter-container {
  margin-bottom: 60px;
}
#portfolio-content #filter-container .heading {
  border: none;
  margin-bottom: 10px;
  padding-bottom: 0px;
}
#portfolio-content #filter-container .portfolio-cat {
  font-style: italic;
}
#portfolio-content .project-pager {
  text-align: center;
  margin-bottom: 20px;
}
#portfolio-content .project-pager .previous-project {
  float: left;
}
#portfolio-content .project-pager .next-project {
  float: right;
}
#portfolio-content #project-box {
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 60px;
}
#portfolio-content #project-box .info {
  float: left;
  width: 164px;
  /* 184 - 20*/

  padding-left: 20px;
  margin-right: 68px;
  font-size: 11px;
}
#portfolio-content #project-box .info strong {
  font-weight: bold;
  display: block;
}
#portfolio-content #project-box .info p {
  margin-bottom: 12px;
}
#portfolio-content #project-box .info .launch {
  display: inline-block;
  padding: 5px;
  margin-left: -5px;
}
#portfolio-content #project-box .entry-content {
  float: left;
  width: 688px;
  /* 940 - (184 + 68) - 20*/

  margin-bottom: 40px;
}
#portfolio-content #project-box .entry-content .multicolumn .column * {
  padding-right: 20px;
}
/* CONTACT  ----------------------------------------------------*/#map-holder {
  margin-bottom: 80px;
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
#map-holder #map_canvas {
  width: 100%;
  height: 300px;
}
#map-holder #map-content {
  padding: 20px;
  border-top: 1px solid #ccc;
}

/* BLOG ------------------------------------------------------------*/
#posts-list {
  position: relative;
  width: 640px;
  float: left;
  margin-top: 30px;
  margin-right: 60px;
}
#posts-list article {
  position: relative;
  margin-bottom: 55px;
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
#posts-list article .feature-image {
  width: 100%;
  line-height: 0em;
}
#posts-list article .feature-image img {
  max-width: 100%;
  border-bottom: 2px solid #ccc;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#posts-list article .feature-image a img:hover {
  opacity: 0.1;
}
#posts-list article .box {
  position: relative;
  padding-left: 40px;
  padding-top: 12px;
  padding-bottom: 18px;
}
#posts-list article .box .entry-date {
  position: absolute;
  width: 50px;
  height: 37px;
  top: 15px;
  left: -23px;
  display: block;
  padding-top: 13px;
  font-family: 'Voltaire', Arial, sans-serif;
  line-height: 1em;
  -moz-border-radius: 60px 60px 60px 60px;
  -webkit-border-radius: 60px 60px 60px 60px;
  border-radius: 60px 60px 60px 60px;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.2);
}
#posts-list article .box .entry-date .number {
  font-size: 18px;
  text-align: center;
  margin-bottom: 3px;
}
#posts-list article .box .entry-date .month {
  font-size: 13px;
  text-align: center;
}
#posts-list article .box .excerpt {
  float: left;
  width: 421px;
}
#posts-list article .box .excerpt .post-heading {
  display: block;
  font-family: 'Voltaire', Arial, sans-serif;
  font-size: 32px;
  line-height: 1.1em;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
  margin-top: 14px;
  margin-bottom: 21px;
}
#posts-list article .box .excerpt .learnmore {
  display: inline-block;
  padding: 7px;
}
#posts-list article .box .meta {
  float: left;
  margin-left: 20px;
  font-size: 11px;
  padding-top: 15px;
}
#posts-list article .box .meta span {
  display: block;
  margin-bottom: 10px;
  padding-left: 25px;
}
#posts-list article .box .meta .user {
  background: url(../img/icon-user.png) no-repeat 0px 0px;
}
#posts-list article .box .meta .comments {
  background: url(../img/icon-comments.png) no-repeat 0px 0px;
}
#posts-list article .box .meta .tags {
  background: url(../img/icon-tags.png) no-repeat 0px 0px;
}
#posts-list article.format-audio .format {
  background: url(../img/icon-format-audio.png) no-repeat 0px 0px;
}
#posts-list article.format-video .format {
  background: url(../img/icon-format-video.png) no-repeat 0px 0px;
}
#posts-list article.format-link .format {
  background: url(../img/icon-format-link.png) no-repeat 0px 0px;
}
#posts-list article.format-quote .format {
  background: url(../img/icon-format-quote.png) no-repeat 0px 0px;
}
#posts-list article.format-standard .format {
  background: url(../img/icon-format-post.png) no-repeat 0px 0px;
}
#posts-list article.format-image .format {
  background: url(../img/icon-format-image.png) no-repeat 0px 0px;
}
body.single #posts-list {
  width: 640px;
}
body.single #posts-list article {
  margin-bottom: 55px;
}
body.single #posts-list article .box {
  position: relative;
  padding-left: 40px;
  padding-top: 12px;
  padding-bottom: 18px;
  padding: 0px 0px 0px 0px;
  background: none;
}
body.single #posts-list article .box .excerpt {
  float: left;
  width: 580px;
  margin-left: 40px;
  margin-bottom: 20px;
  margin-top: 10px;
}
body.single #posts-list article .box .meta {
  width: 580px;
  margin-left: 0px;
  padding: 20px 20px 20px 40px;
}
/* PAGE NAVIGATION ------------------------------------------------------------*/
#main .page-navigation {
  display: block;
  margin-bottom: 100px;
}
#main .page-navigation a {
  display: block;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#main .page-navigation .nav-next {
  float: left;
}
#main .page-navigation .nav-previous {
  float: right;
}

/* RESPONSIVE VIDEO ----------------------------------------------------*/.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* SOCIAL BAR ----------------------------------------------------*/#social-bar {
  display: block;
  float: right;
}
#social-bar li {
  display: block;
  float: left;
  margin-left: 6px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#social-bar li:hover {
  -webkit-transform: translate(0px, -5px);
  -moz-transform: translate(0px, -5px);
  -o-transform: translate(0px, -5px);
  transform: translate(0px, -5px);
}