/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'),
       url('../fonts/roboto-condensed-v16-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v16-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'),
       url('../fonts/roboto-condensed-v16-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-300italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'),
       url('../fonts/roboto-condensed-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v16-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'),
       url('../fonts/roboto-condensed-v16-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-italic.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v16-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'),
       url('../fonts/roboto-condensed-v16-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-condensed-v16-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-condensed-v16-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-condensed-v16-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

   
/* Links */
a,
a:focus,
a:hover {
  color: #fff;
  text-decoration:none;
  cursor:pointer;
}

html,
body {
  min-height: 100%;
  margin:0;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: .94rem;
}

img {
  max-width: 90%;
  height: auto;
  transition: all 0.3s ease-in;
}

nav{
	top:0;
	width:100%;
	height:100%;
	font-size: 1.625rem;
	position: fixed;
	text-align: center;
	overflow: hidden;
	z-index: 100;
	background-image:url('../bilder/hg.jpg');
	background-repeat:repeat;
}
/*main{
	z-index:0;
	overflow: hidden;
height: 100%;
display: block;
	}*/
h1, nav > div.agentur a{
font-weight: 700;
font-size:3.5vh ;
/*font: normal 6vh 'Lino Stamp W05 Regular';*/
line-height:4.2vh;
margin:1% 0 13% 0;
padding:0;
/*color:#45614b;*/
color:#000;
}

h2{
	font-weight:400;
	/*color:#497052;*/
	color:#45614b;
	font-size:3.5vh;
	line-height:4.2vh;
	margin:-4% 0 0 0;
	padding:0;
}

nav > div.leistungen {
	position: absolute;
  z-index: -1;
	display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  width:26%;  
  height:40%;
  margin:0 12%;
}
nav > div.referenzen{
	position: absolute;
  z-index: -1;
	display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  width:26%;
  height:150%;
  margin:0 12%;
}

nav > div.projekte {
	position: absolute;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  right: 0%;
  width:26%;
  height:150%;
  margin:0 12%;
}
nav > div.projekte img{
	margin-right:8%;
	}

nav > div.agentur {
	position: absolute;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  width:26%; 
  height:50%; 
  margin:0 12%;
  }
  
.logo{
	max-width:85%;
	max-height:85%;
	padding:12% 0% 0 0%;
	animation: perspect 2s infinite linear;
	-webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
   animation-iteration-count: 1;
}
@keyframes perspect {
   0% {transform:perspective(300px) rotateX(0deg)}
   25% {transform:perspective(300px) rotateX(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateX(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}


svg {
	width: 100%;
	height: 100%;
	padding: 0;
	margin:0;
}

svg:not(:root) {
    overflow: hidden;
}

polygon{
	stroke: none;
	stroke-width: none;
	}
#p-leistungen{
	/*fill: #9aaea2;*/
	/*fill:#b7c5bc;*/
	fill:#b8c8ba;
	fill-opacity:1;
	}
#p-leistungen:hover {
  transition-duration: 2s;
  fill-opacity:.15;
  }
#p-referenzen{
	fill: #1e3a27;
	opacity:1;
	}
#p-referenzen:hover{
	transition-duration: 2s;
  fill-opacity:.15;
	}
	
#p-agentur{
	fill: #9aaea2;
	fill-opacity:0;
	}
#p-agentur:hover{
	transition-duration: 2s;
  fill-opacity:.15;
	}
	
#p-projekte{
	/*fill: #003517;
	opacity:.7;*/
	fill:#4a6f5a;
	fill-opacity:1;
	}
#p-projekte:hover{
	transition-duration: 2s;
  fill-opacity:.15;
	}

#p-schatten-h, #p-schatten-h{
	fill: #000;
	}
.unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul {
        position: static;
        top:0;
}

.menu nav li.referenzen, nav li.leistungen {
    left: 0;
    transition: all .5s ease .3s;
}

nav li a{
    padding: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

nav li {
    position:absolute;
    text-align: center;
    padding: 0 3%;
   /* font: normal 6vh 'Lino Stamp W05 Regular';*/
   font: bold 5vh 'Roboto';
}

nav li.leistungen {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 32%;
    width: 6vw;
    transition: all .5s ease;
    opacity:.8;
}

nav li.referenzen {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    top: 84.5%;
    width: 6vw;
    transition: all .5s ease;
    opacity:.7;
}

nav li.x, li.x a{
    top: 0;
    width: 195vw;
    transition: all .5s ease;
    opacity:.8;
    color:black;
}

nav li.projekte {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 68%;
    width: 194vw;
    transition: all .5s ease;
    opacity:.8;
}

.unstyled li {
    list-style: none;
}


/*nav li.x,  li.projekte {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    top:0;
    width: 50vh;
    height: 50vh;
    transition: all .5s ease;
    text-align:center;
}
*/
	div#impressum-start{
		position:absolute;
		z-index:101;
		bottom:0;
		right:0;
		padding:1% 2%;
 		color:#fff;
	 	opacity:.5;
	 	font-size:2vh
	}



*, *::after, *::before {
    box-sizing: border-box;
}


@media screen and (orientation: portrait) {
  nav li.leistungen, nav li.referenzen, nav li.projekte{font-size:4.5vh;}
  nav li.referenzen, nav li.leistungen {margin-left:3%;}
	nav li.leistungen {top: 31%;}
	nav li.referenzen {top: 83%;}
	nav li.projekte {top: 69.3%; margin-left:-2.9%; font-size:5vh;}
	
	
	nav > div.leistungen {margin:10.5% 5% 0 15%; height:30%;}
	nav > div.referenzen {margin:8% 5% 0 15%; height:140%;}
	nav > div.projekte {margin:8% 15% 0 5%; height:140%;}
	nav > div.agentur {margin:14% 0 0 11.5%; height:30%;}
	.logo{padding:10.5% 5% 0 5%;}
	
  h2, h1{font-size:2.5vh; line-height:3vh;}
	}

}