*{
	/* Universal reset: */    
  margin: 0;
  padding: 0;
}




html {background-image:url(home.gif);
background-attachment: fixed;
 background-size: cover;
width: 100%;
height: 500px;
}


@media (max-width: @iphone-screen) {
    html {  
       background-image:none;
    }
}


@media all and (max-width:1000px) {
      html {  
       background-image:none;
    }
}




header,footer,
article,section,
hgroup,figure
{
display:block;
}



body{
width: 100%;
min-height: 100%;
margin: 0;
  padding: 0;
font-size:0.9em;
line-height:1.5;
color:#1F1F1F;
width:auto;
background-color:white;
opacity: 0.99;
font-family:Arial, Helvetica, sans-serif;
}


@media all and (max-width:1000px) {
    body {font-size:0.9em;}
}




/* Hyperlink Styles: */

a {
	color:#E33559;
	text-decoration:none;
	outline:none;
}


a:hover, a:focus, a:active {
	opacity:0.5;transition-duration: 0.5s;
	}






/* Headings: */

h1,h2,h3{
	font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
}

h1{

	font-size:3.5em;
	padding:0.5em 0 0;
}




h2{
color:#2E2E2E;	
font-size:2em;
	font-weight:normal;
	letter-spacing:0.02em;
	margin-top:4em;
	text-align:center; 
text-transform: uppercase;
}

@media all and (max-width:1000px) {
    h2 {font-size:1.4em;}
}

@media (max-width: @iphone-screen) {
    h2 {font-size:1.4em;}
}



h3{
	color: #2E2E2E;
	font-size:1.3em;
	font-weight:normal;
	margin:0 em;
letter-spacing:0.01em;
	text-align:center; 
}


@media all and (max-width:1000px) {
    h3 {font-size:1.1em;}
}

@media (max-width: @iphone-screen) {
    h3 {font-size:1.1em;}
}



ul, li{
	line-height:1.6em;
}

p{color: #11111; 
	line-height:1.8em;
}


ul{
	list-style: none;
}



.line{
	/* The dividing line: */
	height:2px;
	background:#2E2E2E; 
	-moz-box-shadow:0 0 3px #4D7788;
	-webkit-box-shadow:0 0 3px #4D7788;
	box-shadow:0 0 3px #4D7788;
	opacity:0.8;
	margin:1.4em 0;
overflow:hidden;
	
}


.line1{
	/* The dividing line: */
	height:2.4px;
	background:#E33259; 
	opacity:0.8;
	margin:1.4em 0;
overflow:hidden;
}


.line2{
	/* The dividing line: */
	height:2.4px;
	background:#e600ac; 
	opacity:0.8;
	margin:1.4em 0;
overflow:hidden;
}


.line3{
	/* The dividing line: */
	height:2.4px;
	background:#cc00cc; 
	opacity:0.8;
	margin:1.4em 0;
overflow:hidden;
}


.line4{
	/* The dividing line: */
	height:2.4px;
	background:#d11d8d; 
	opacity:0.8;
	margin:1.4em 0;
overflow:hidden;
}



article .line{
	/* The dividing line inside of the article is darker: */
	opacity:0.6;
}

footer .line{
	margin:2em 0;
}



.clear:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}




/* The navigation styling: */

/* navigation */





.navigation
{
	position: fixed;
  	top:0;
	z-index:999;
opacity: 0.9;
	-moz-box-shadow:0 0 8px #2E2E2E;
	-webkit-box-shadow:0 0 8px #2E2E2E;
	box-shadow:0 0 8px #2E2E2E;
}



ul.navigation {  
   	 background:white; 
   	 font-size:1.5em;
   	 font-weight:normal;
   	 letter-spacing:0.01em;
   	 height:1.1em;
   	 width: 100%; 
	 padding: 25px 5px 20px 0px; 
}


ul.navigation > li {  
  	float: left;
	text-align:center;
}

ul.navigation ul {  
    display: none; 
    position: absolute;
    width: 20%; 
    left: 0; top: 100%; 
}

ul.navigation a {  
   	 cursor: pointer; 
    	display: block; 
	background-color:white;
	color: #2E2E2E;
   	 line-height: 30px; 
   	 padding: 0 10px; 
}



ul.navigation a:focus, ul.navigation a:active {
	opacity:0.5;
transition-duration: 0.1s;
-webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
	}




ul.navigation li { list-style: none;width: 20%;}

ul.navigation li:hover ul { display: block;color: black; 
}  

ul.navigation a:hover {opacity:0.7; 
color: #ababab; 
-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);} 

@media all and (max-width:1000px) {
    ul.navigation {  height: auto; font-size: 0.6em; }
    ul.navigation > li {  float: none; width: 100%; }
    ul.navigation a { line-height: 1.6em; }
    ul.navigation ul { position: relative; }
}






/* Article styles: */

#page{
	width:auto;
	margin:0 auto;
	position:relative;
}




article{
	background-color:#FFFFFF;
	width: 35%;
	display: block;
   	margin-left: auto;
   	margin-right: auto;
	margin-top:30em;
	padding:1em 3em 1em 2em;
	position: center;
text-align:center;
overflow:hidden;
	}

@media all and (max-width: 1000px) {
    article {font-size:0.9em; margin-top:0em;width:70%;padding:5em 4em 5em 2em;}
}


@media (max-width: @iphone-screen) {
    article {font-size:0.9em; margin-top:0em; width:70%; padding:5em 4em 5em 2em}
}





.img_seitsicht{
width: 35%;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
margin-top:0.6em;
  margin-bottom:1.5em;
  margin-left:2em;
opacity: 0.8;
}


.img_seitsicht:hover{
opacity: 1;
}






.ih-item {
position: relative; 
width:23%;
	display: block;
   	margin-left: auto;
margin-right:auto;
margin-top:0.6em;
  margin-bottom:1.5em;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}






.ih-item,
.ih-item * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.ih-item a {
  color: #333;
}


.ih-item a:hover {
  text-decoration: none;
}


.ih-item img {
  width: 100%;
  height:100%;
position: center; 
margin: auto
}


.ih-item.circle {
  position: center;
  width: 275px;
  height: 275px;}




.ih-item.circle .img {
  position: relative; 
opacity: 1;
  width: 275px;
  height: 275px;
border-radius: 50%;}




.ih-item.circle .img:before {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height:100%;
  border-radius: 50%;
box-shadow: 0 1px 1px rgba(0, 0, 0);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}




.ih-item.circle .img img {
  border-radius: 50%;
}


.ih-item.circle .info {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
border-radius: 50%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}



.ih-item.circle.effect13 .info {
background: grey;
opacity: 0.1;  
  pointer-events: none;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}


.ih-item.circle.effect13 .info h3 {
  visibility: hidden;
  color:white;
  text-transform: uppercase;
  position: relative;
letter-spacing:0.01em;
font-size:1.3em;
margin:0 em;
  padding: 55px 0 0 0;
  height: 90px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}


.ih-item.circle.effect13 .info p {
  visibility: hidden;
  color: white;
  padding: 11px 5px;
  margin: 0 30px;
line-height:1.6em;
font-size:0.9em;
border-top: 2.4px solid rgb(0, 255, 255);
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

@media all and (max-width:1000px) {
    .ih-item.circle.effect13 .info p {
font-size:1em;}
}


.ih-item.circle.effect13 a:hover .info {
  opacity: 0;
}

.ih-item.circle.effect13 a:hover h3 {
  visibility: visible;
}

.ih-item.circle.effect13 a:hover p {
  visibility: visible;
}


.ih-item.circle.effect13.from_left_and_right .info h3 {
opacity: 1;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ih-item.circle.effect13.from_left_and_right .info p {
opacity: 1;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.ih-item.circle.effect13.from_left_and_right a:hover h3 {
opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.ih-item.circle.effect13.from_left_and_right a:hover p {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}






.ih-item.circle.effect13 a:hover .info {
  opacity: 1;
}

.ih-item.circle.effect13 a:hover h3 {
  visibility: visible;
}

.ih-item.circle.effect13 a:hover p {
  visibility: visible;
}



.ih-item.circle.effect13 a:active .info {
  opacity: 1;
}

.ih-item.circle.effect13 a:active h3 {
  visibility: visible;
  opacity: 1;
}

.ih-item.circle.effect13 a:active p {
  visibility: visible;
  opacity: 1;
}






.ih-item.circle.effect13 a:focus .info {
  opacity: 1;
}

.ih-item.circle.effect13 a:focus h3 {
  visibility: visible;
  opacity: 1;
}

.ih-item.circle.effect13 a:focus p {
  visibility: visible;
  opacity: 1;
}




.logo{
width:65%;
margin-top:2em;
  margin-bottom:1.5em;
opacity: 1;
border-radius: none;
-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.logo:hover{
opacity: 1;
-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}


@media (max-width: @iphone-screen) {
    .logo{
width:82%;
}
}


@media all and (max-width:800px) {
     .logo{
width:82%;
}
}




.logos{
width:65%;
margin-top:0.6em;
  margin-bottom:1.5em;
opacity: 1;
border-radius: none;
-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.logos:hover{
opacity: 1;
-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}


@media (max-width: @iphone-screen) {
    .logos{
width:93%;
}
}


@media all and (max-width:800px) {
     .logos{
width:92%;
}
}








ghostbutton1{
    	color: #11111;
	font-size:3em;
	text-transform:uppercase;
	font-weight:normal;
	margin-bottom: 0.3em;
	letter-spacing:0.01em;
	margin-top: 0.3em;
	text-align:center; 
    border-top:2.4px solid #e600ac;
    padding: 0.85em 1.7em;
    display: inline-block;
    overflow: hidden;
    border-radius: 2px;
 }

@media all and (max-width: 1000px) {
    ghostbutton1 {font-size:0.9em;}
}


@media (max-width: @iphone-screen) {
    ghostbutton1 {font-size:0.9em}
}







ghostbutton2{
    	color: #11111;
	font-size:1.1em;
	text-transform:uppercase;
	font-weight:normal;
	margin-bottom: 0.3em;
	letter-spacing:0.01em;
	margin-top: 0.3em;
	text-align:center; 
    border-top:2.4px solid #50ff2f;
    padding: 0.85em 1.7em;
    display: inline-block;
    overflow: hidden;
    border-radius: 2px;
 }

@media all and (max-width: 1000px) {
    ghostbutton2 {font-size:0.9em;}
}


@media (max-width: @iphone-screen) {
    ghostbutton2 {font-size:0.9em}
}

	



ghostbutton3{
    	color: #11111;
	font-size:1.1em;
	text-transform:uppercase;
	font-weight:normal;
	margin-bottom: 0.3em;
	letter-spacing:0.01em;
	margin-top: 0.3em;
	text-align:center; 
    border-top:2.4px solid #e600ac;
    padding: 0.85em 1.7em;
    display: inline-block;
    overflow: hidden;
    border-radius: 2px;
 }

@media all and (max-width: 1000px) {
    ghostbutton2 {font-size:0.9em;}
}


@media (max-width: @iphone-screen) {
    ghostbutton2 {font-size:0.9em}
}





.akkordeon {
  width:50%;
height: auto; 
  padding: 0.2em; 
  margin-top:0em;
margin-left:24%;
  background: white;
  border: none;
text-align:center;
}



.akkordeon label{
margin-bottom:0.1em;
  margin-top:0.1em;
padding: 0.1em; 
  position: relative;
 height:2em;
  display: block;
color:#1F1F1F;
  cursor: pointer;
background:white; 
font-size:2em;
text-align: center-top;
opacity:0.8;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}



.akkordeon label:hover{
	opacity:0.9;color: #00FFFF;
-webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);

}

.akkordeon input + label {
transition: all 0.5s ease-in-out; 
}

.akkordeon input:checked + label, 
.akkordeon input:checked + label:hover
{   	background:white; 
box-shadow: 0 0px 0px rgba(0, 0, 0);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}


.akkordeon input{
	display: none;
}


.akkordeon p {
  overflow: hidden;
font-size:1em;
  height: 0;
  margin-top: 0;
  margin-bottom:2em;
padding:0;
transition: all 0.5s ease-in-out;
}

@media all and (max-width: 1000px) {
    .akkordeon p {font-size:1em;}
}

.akkordeon input: ~ p{
  transition: all 0.4s ease-in-out;
}

.akkordeon input:checked ~ p{
  transition: all 0.4s ease-in-out;
height:auto;
}

.akkordeon input:not(:checked) ~ p{
height: 0;
}





.box {
 width:30%;
 float:left; 
padding: 10%; 
    border: 2px solid #14ff2a;
}





.animated-text {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}




/* Footer styling: */

footer{margin-top: 80em;
margin-bottom: 0.2em;
	text-align:center;
	font-size:0.6em;
}

footer p{
	position:relative;
}

footer a,footer a:visited{
	color:#151515;
	padding:2px 4px;
	z-index:100;
	position:relative;
}

footer a:hover
{
	text-decoration:none;
}