/* -------------------------------------------------------------
======	RESET
------------------------------------------------------------- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }



html, button, input, select, textarea {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: 400; /* normal */
	color: #555; 
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}

body { margin: 0; font-size: 16px; color:#666666; line-height: 1.6; text-align:justify;}

a { color: #666666; font-weight: normal;  font-style:italic; font-size:14px;
	cursor: pointer;  text-decoration: none;
	transition:color 0.2s ease; -moz-transition:color 0.2s ease; -webkit-transition:color 0.2s ease; -o-transition:color 0.2s ease;}

a:hover { color: #000; text-decoration:none;} 

::-moz-selection { background: #0078CF; color: #fff; text-shadow: none; }
::selection { background: #0078CF; color: #fff; text-shadow: none; }	

p{margin: 0 0 1em;}
p:last-child {margin-bottom: 0;}

a:visited{opacity:0.9;}
a:active, a:focus{position:relative;top:1px;}

ul, ol{list-style:none; list-style-image:none; margin:0; padding:0;}
img{border:0; -ms-interpolation-mode:bicubic; vertical-align:middle}

.downbox{ width:150px; height:66px; background: url(../img/down.png); background-repeat: no-repeat}




/* -- TYPO
------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0 0 1em; font-weight: normal;}

h1 {font-size: 4.1em; 
	letter-spacing: -0.075em; 
	text-transform: uppercase; 
	line-height: 0.9; 
	color: #555;
	margin: 0 0 0.5em; 
	font-weight: normal; }
h2 { font-size: 2.5em; margin: 0 0 20px; letter-spacing: -0.05em; color: #555; line-height: 1; }
h3 { font-size: 1.3em; font-weight:bold; margin-bottom:0.2em; color:#444; }
h4 { font-size: 0.9em; font-style:italic; font-weight:100; }
h5 { font-size: 26px; text-transform: none; margin-bottom: 0.7em; color: #666666; font-style:italic; font-weight:100; }
h6 { font-size: 1em; margin-bottom: 2px; font-weight: 700; }

.leftbox {margin-left:-3em; margin-top:0.8em; width:30px; height:15px; float:left; display:block; background-color:#b1b2b3; position: absolute; box-shadow: 5px 5px 10px #cccccc; }

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#333; text-decoration: none;}
h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#0078CF;text-decoration: underline;}



/* -- GRID  /
------------------------------------------------------------- */
body{width:100%;  background: url(../img/stripes_right.png); background-repeat: repeat-x; 
}


.stripebox {
	background: url(../img/stripe.png);
	background-repeat: repeat-x;
	width: 50%; 
	height: 136px;
	position: absolute;
	top:125px;
	z-index:-1;
}
	
.wappen { background: url(../img/wappen.png); background-repeat:no-repeat; position:absolute; z-index:1000; width:200px; height:150px; margin-top:1em; margin-left: 9px ;}
.container { width: 90%; margin: 2em auto; width: 1000px; min-width: 300px; }
 
 
.grid-wrap {
   /* the same as your gutter */
  overflow: hidden;
  *zoom:1;}
  .grid-wrap:before, .grid-wrap:after{content:""; display:table}
  .grid-wrap:after{clear:both}
  
.grid {
  float: left;
  padding-left: 1em; /* this is your gutter between columns */
  padding-right: 1em;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *behavior: url(/js/boxsizing.htc); }
  
.half-gutter {margin-left: -1.5em; }
  .half-gutter .grid-col {padding-left: 1.5em; }
  
.col-full {width: 100%; }
.col-one-half {width: 50%; }
.col-one-third {width: 33.333%; }
.col-two-thirds {width: 66.666%; }
.col-one-quarter {width: 25%; }
.col-three-quarters {width: 75%; }

.divide-top{ background-color: #e0e0e0; padding-top: 1em; margin-top: 1.5em; width:100%; min-height:100px; max-height:1000px; }

.mright{ margin-right: 3em;}
.mleft{ margin-left: 3em;}
.mtop{ margin-top: 3em;}
.mtop2{ margin-top: 3em;}
.mtopleft{ margin-top: 3em; margin-left:2em;}
.mbottom{ margin-bottom: 3em;}
.halfmright{ margin-right: 1.5em;}
.halfmleft{ margin-left: 1.5em;}
.halfmtop{ margin-top: 1.5em;}
.halfmbottom{ margin-bottom: 1.5em;}


.nomargin{ padding-left: -3em;}

.fullmargin{ padding-left: 3em; padding-right: 3em;}
.marginbottom{ margin-bottom:10%;}

.fright, .fleft{display:block; overflow:hidden}
.fright{float:right}
.fleft{float:left}

.alignleft{float: left;clear: left;margin: 0.38em 1.62em 0.38em 0;}
.alignright {float: right;clear: right;margin: 0.38em 0 0.38em 1.62em;}
.aligncenter {margin: 0 auto 1.62em;display: block;}

.impressum {display: block; position:relative; margin-top:-35px; padding-right: 1em; z-index:500;}


/* -- SLIDER  /
------------------------------------------------------------- */

/**
 *
 * slippry v1.3.1 - Responsive content slider for jQuery
 * http://slippry.com
 *
 * Authors: Lukas Jakob Hafner - @saftsaak
 *          Thomas Hurd - @SeenNotHurd
 *
 * Copyright 2015, booncon oy - http://booncon.com
 *
 *
 * Released under the MIT license - http://opensource.org/licenses/MIT
 */
/* kenBurns animations, very basic */



/* added to the original element calling slippry */


/* element that wraps the slides */
.sy-slides-wrap {
  position: relative;
  height: auto;
  width: auto;
  margin-left: 1em;
  margin-right: 1em;

		
		}
  .sy-slides-wrap:hover .sy-controls {
    display: block; }

/* element that crops the visible area to the slides */
.sy-slides-crop {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  }

/* list containing the slides */
.sy-list {
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  }
  .sy-list.horizontal {
    -moz-transition: left ease;
    -o-transition: left ease;
    -webkit-transition: left ease;
    transition: left ease; }
  .sy-list.vertical {
    -moz-transition: top ease;
    -o-transition: top ease;
    -webkit-transition: top ease;
    transition: top ease; }

/* single slide */
.sy-slide {
  position: absolute;
  width: 100%;
  z-index: 2; }
  .sy-slide.kenburns {
    width: 140%;
    left: -20%; }
   
  .sy-slide.sy-active {
    z-index: 3; }
  .sy-slide > img {
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
	height:auto;
	-moz-border-radius: 0px 20px 20px 20px;
    -webkit-border-radius: 0px 20px 20px 20px;
    border-radius: 0px 20px 20px 20px;
	
	
	}
  .sy-slide > a {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%; }
    .sy-slide > a > img {
      margin: 0;
      padding: 0;
      display: block;
      width: 100%;
      border: 0; }

/* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */
.sy-controls {
  list-style: none;
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 0;
  margin: 0; }
  .sy-controls li {
    position: absolute;
    width:5%;
    min-width: 4.2em;
    height: 100%;
    z-index: 33; }
    .sy-controls li.sy-prev {
      left: 0m;
      top: 0;
	  background:url(../img/arrow_left.png) no-repeat center center;
	  }
      .sy-controls li.sy-prev a:after {
        background-position: -5% 0; }
    .sy-controls li.sy-next {
      right: 0;
      top: 0;
	  background:url(../img/arrow_right.png) no-repeat center center}
      .sy-controls li.sy-next a:after {
        background-position: 105% 0; }
    .sy-controls li a {
      position: relative;
      width: 100%;
      height: 100%;
      display: block;
      text-indent: -9999px; }
      .sy-controls li a:link, .sy-controls li a:visited {
         }
      .sy-controls li a:hover, .sy-controls li a:focus {
        opacity: 0.0;
        outline: none; }

  @media only screen and (max-device-width: 600px) {
    .sy-controls {
      display: block; }
      .sy-controls li {
        min-width: 2.1em; }
        .sy-controls li a:after {
          width: 1.4em;
          height: 1.4em;
          margin-top: -0.7em;
          margin-left: -0.7em; } }

/* captions, styled fo the overlay variant */
.sy-caption-wrap {
  position: absolute;
  bottom: 2em;
  z-index: 12;
  left: 50%; }
  .sy-caption-wrap .sy-caption {
    position: relative;
    left: -50%;
    background-color: rgba(0, 0, 0, 0.54);
    color: #fff;
    padding: 0.4em 1em;
    -moz-border-radius: 1.2em;
    -webkit-border-radius: 1.2em;
    border-radius: 1.2em; }
    .sy-caption-wrap .sy-caption a:link, .sy-caption-wrap .sy-caption a:visited {
      color: #e24b70;
      font-weight: 600;
      text-decoration: none; }
    .sy-caption-wrap .sy-caption a:hover, .sy-caption-wrap .sy-caption a:focus {
      text-decoration: underline; }
  @media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
    .sy-caption-wrap {
      left: 0;
      bottom: 0.4em; }
      .sy-caption-wrap .sy-caption {
        left: 0;
        padding: 0.2em 0.4em;
        font-size: 0.92em;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0; } }

/* pager bubbles */
.sy-pager {
  overflow: hidden;
  *zoom: 1;
  display: block;
  width: auto;
  float:right;
  margin-top:0.6em;
  margin-right:2.5em;
  padding: 0;
  list-style: none;
  text-align: center; }
  
  .sy-pager li {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin: 0 0.2em 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%; }
    .sy-pager li.sy-active a {
      background-color: #333; }
    .sy-pager li a {
      width: 100%;
      height: 100%;
      display: block;
      background-color: #ccc;
      text-indent: -9999px;
      -moz-background-size: 2em;
      -o-background-size: 2em;
      -webkit-background-size: 2em;
      background-size: 2em;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%; }
      .sy-pager li a:link, .sy-pager li a:visited {
        opacity: 1.0; }
      .sy-pager li a:hover, .sy-pager li a:focus {
        opacity: 0.6; }



/* -- MISC
------------------------------------------------------------- */
figure { max-height: 100%; overflow: hidden;}
figure figcaption { }
img { max-width: 100%; height: auto; width: auto; }

a img {
    -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    transition: opacity 1s ease; }
a img:hover {
	*zoom: 1;
	opacity: 0.7;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 70);
	filter: alpha(opacity = 70);}
    
    

    
/* -- HEADER
------------------------------------------------------------- */
header#navtop { margin-bottom: 2em; clear: both; overflow: hidden; }




    
/* -- MENU
------------------------------------------------------------- */

nav ul {
    text-align: center;
    width: auto;
        padding: 0em 0em 2em;
		margin-left:3em;
		float:left;
}
 
nav li {
    display: inline-block;
	margin-right:0.5em;
        padding: 0;
		

}
 
 
      nav a, nav span, nav h2 {
		display:block;
    	width: 8.2em;
        padding: 0.3em;
        text-decoration: none; 
		font-weight:100;
		font-size:16px;
		font-style:normal;
        border-radius: 0 0 10px 10px;
		-webkit-box-shadow: 0 10px 10px 0 #ccc;
		box-shadow: 0 10px 10px 0 #ccc;
        color: white; 
        background-color:#e30613;
      }
 


.navactive { color: #0078CF }

    
/* -- LOGO
------------------------------------------------------------- */

.logo {margin-bottom: 0em;}
.logobox {margin-bottom: 0em;}

.logo:hover {background: none;}
		
		
/* -- GENERAL 
------------------------------------------------------------- */
.main > section { margin-bottom: 4em; border-left: solid 2px #ccc; border-right: solid 2px #ccc; z-index:100; }
.main header{ color: #555; margin-bottom: 3em; z-index:100; }
.main header {border-top-color:#999; z-index:100; }

hr{border-top-color:#ccc; border-style:dotted; margin-top:2em; margin-bottom:2em;}

.arrow:after {content:" \27F6"; /* html unicode: ⟶ */ } 
header .arrow {color: #999; font-style: italic;}
.arrow:hover {color: #0078CF; }


/* -- FOOTER
------------------------------------------------------------- */
footer  { text-align:center; width: 90%; margin-left:auto; margin-right:auto; width: 1000px; min-width: 300px; }
footer nav ul { float: right; overflow: hidden; }
footer a {color: #999;}
footer li { float: left; margin-right: 1em; padding-right: 1em; border-right: 1px solid #DDD; font-size: 0.8em; }
footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
.up a { display: block; text-align: center; margin: 0 auto; }


/* -- HOME-PAGE
------------------------------------------------------------- */
/* Services */
.services aside { color: #999; padding-top: 1em; border-top: 1px solid #DDD;}
.services aside:after, .services h5:after { content: ""; display: block; height: 1px; width: 1em; background: #DDD; margin: 1em 0; }


/* -- WORKS / Home-page and Works-page
------------------------------------------------------------- */
.works figure > a{ 
	display: block; 
	height: 100%; width: 100%; 
	overflow: hidden; 
	position: relative;
	border-top: 1px solid #DDD; padding-top: 1em; }
 	
.works figure .zoom{ 
	display: block; 
	position: absolute; top: 10px; left: 0; 
	background: url(../img/zoom.png) no-repeat center; 
	width: 100%; height: 100%; 
	*zoom: 1;
	opacity: 0;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 0);
	filter: alpha(opacity = 0); }

.works figure figcaption{ margin-top: 1em; padding: 0 0.5em; white-space: nowrap; }
.works figure figcaption a{line-height:2em; color: #555; font-weight: 700; }
.works figure figcaption p{ margin: 0; }

.works-page .works figure { margin-bottom: 3em;}

.main aside{margin-bottom: 3em}
.main aside menu{padding: 0 0 0 1em; line-height: 2em;}
.main aside menu a{color: #999;}
.main aside menu .buttonactive {color: #0078CF }


/* -------------------------------------------------------------
======	MISC
------------------------------------------------------------- */

.ir{display:block; border:0; text-indent:-999em; overflow:hidden; background-color:transparent; background-repeat:no-repeat; text-align:left; direction:ltr; *line-height: 0;}
.ir br{display:none}
.hidden{display:none !important; visibility:hidden}



/* -------------------------------------------------------------
======	IE Fix
------------------------------------------------------------- */
.lt-ie9 .works figure a, .lt-ie9 .works figure a img { filter:inherit} 
/* jquery filter opacity issue IE8 */

.lt-ie9 .container {min-width: 780px;}
.lt-ie8 .container {width: 960px;}
.lt-ie8 .grid-wrap {margin-left: 0; }
.lt-ie8 .grid {padding: 0;margin-left: 5%; }
  .lt-ie8 .grid:first-child {margin-left: 0; }

.lt-ie8 .col-full {width: 99.95%; }
.lt-ie8 .col-full + .grid {margin-left: 0; }
.lt-ie8 .col-one-half {width: 47.45%; }
.lt-ie8 .col-one-third {width: 29.55%; }
.lt-ie8 .col-two-thirds {width: 64.95%; }
.lt-ie8 .col-one-quarter {width: 19.95%; }
.lt-ie8 .col-three-quarters {width: 74.95%; }



/* -------------------------------------------------------------
======	MEDIA QUERIES
------------------------------------------------------------- */

/* -- Media query 1 (mq1)
------------------------------------------------------------- */
@media only screen and (max-width: 60em) { /* 13 / 780 */
	.mq1-col-full {width: 100%; }
	.mq1-col-one-half {width: 50%; }
	.mq1-col-one-third {width: 33.333%; }
	.mq1-col-two-thirds {width: 66.666%; }
	.mq1-col-one-quarter {width: 25%; }
	.mq1-col-three-quarters {width: 75%; }
	/**/
	h1{font-size: 3.1em;}
	.slide figcaption{ width: 80%;}
	footer li { float: left; margin-right: 0.5em; padding-right: 0.5em; border-right: 1px solid #DDD;} 
}
    
/* -- Media query 2 (mq2)
------------------------------------------------------------- */
@media only screen and (max-width: 48em) { /* 13 / 624 */
	.mq2-col-full {width: 100%;}
	.mq2-col-one-half {width: 50%; }
	.mq2-col-one-third { width: 33.333%; }
	.mq2-col-two-thirds {width: 66.666%; }
	.mq2-col-one-quarter {width: 25%; }
	.mq2-col-three-quarters {width: 75%; }
	/**/
	header nav { width: 100%; }
	header nav ul {  padding: 0 ; border-left:none; line-height: 2em; }
	header nav ul li { float: left;  padding: 0 1em ; border-left:1px solid #ddd; }
	.slider { margin-top: 3em; }
}
    
/* -- Media query 3 (mq3)
------------------------------------------------------------- */
@media only screen and (max-width: 30em) { /* 13 / 390 */

.container { width: 90%; margin: 2em auto; min-width: 1000px; min-width: 300px;}
footer  { text-align:center; width: 90%; margin-left:auto; margin-right:auto; min-width: 1000px; min-width: 300px; }
	.mq3-col-full { width: 100%; }
	.mq3-col-one-half { width: 50%; }
	.mq3-col-one-third { width: 33.333%; }
	.mq3-col-two-thirds { width: 66.666%; }
	.mq3-col-one-quarter { width: 25%; }
	.mq3-col-three-quarters { width: 75%; } 
	.mq3-none {display: none;}
	/**/
	header nav ul li { padding: 0 0.5em ; }
	footer li { float: none; margin-right: 0em; padding-right: 0em; border-right: none; line-height: 2em;}
	.services article {	margin-top: 3em;} .services article:first-of-type {	margin-top: 0;}
	
	.fullmargin{ padding-left: 1em; padding-right: 1em;}
	
	.impressum { width:100%; text-align:center;  margin-top:0px; margin-right:0 ; }
	.alignright {float: none;clear: right;margin: 0em 0em 2em 0em;}
	.aligncenter {margin: auto auto 1.6em auto;}
	.logo {margin: 0em;}
	.leftbox {margin-left:-1em; margin-top:0.8em; width:10px; height:15px; float:left; display:block; background-color:#b1b2b3; position: absolute; box-shadow: 5px 5px 10px #cccccc; }
	.wappen { background: url(../img/wappen_320.png); background-repeat:no-repeat; position:absolute; z-index:1000; width:100px; height:65px; margin-top:-4.5em; margin-left: -1.5em ;}
	.mtopleft{ margin-top: 1em; margin-left:0em;}


	body { margin: 0; font-size: 16px; color:#666666; line-height: 1.6; text-align: left;}

nav ul {
    text-align: center;
    width:100%;
        margin: 2em 0 3em 0;
        padding: 0em 0em 0em;
		margin-left:0em;
		float: none;
}
 
nav li {
    display: inline;
		margin-right:0em;
        padding: 0;

}
      nav a, nav span, nav h2 {
		display:block;
    	width:auto;
		margin-top:2px;
        padding: 0.7em;
        text-decoration: none; 
		font-weight:100;
		font-size:16px;
		font-style:normal;
        color: white; 
        background-color:#e30613;
		border-radius: 0 0 0px 0px;
        box-shadow: 0px 0px 0px;
		box-shadow: 0px 0px 0px;
      }
	  
.navactive { color: #0078CF }

.sy-slides-wrap {
  position: relative;
  height: auto;
  width: auto;
  margin-left: 0em;
  margin-right: 0em;
  }

.sy-pager {
  overflow: hidden;
  *zoom: 1;
  display: block;
  width: auto;
  float: none;
  margin-top:0.6em;
  margin-right:0em;
  padding: 0;
  list-style: none;
  text-align: center; }
  
    .sy-slide > img {
    margin: 0;
    padding: 0;
    display: block;
    width: auto;
	height:auto;
	-moz-border-radius: 0px 0px 0px 0px;
    -webkit-border-radius: 0px 0px 0px 0px;
    border-radius: 0px 0px 0px 0px;

}

.stripebox {
	background: none;
	background-repeat: repeat-x;
	width: 50%; 
	height: 136px;
	position: absolute;
	top:125px;
	z-index:-1;
}

/* -- PRINT STYLES 
------------------------------------------------------------- */
@media print{ 
	*{background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important}
	abbr[title]:after{content:"("attr(title) ")"}
	pre, blockquote{page-break-inside:avoid}
	thead{display:table-header-group}
	tr, img{page-break-inside:avoid}
	img{max-width:100% !important}
	p, h2, h3{orphans:3; widows:3}
	h2, h3{page-break-after:avoid} 
}
 
 
 
/* -------------------------------------------------------------
======	END
------------------------------------------------------------- */