

<style type="text/css">

* {
  margin: 0;
  padding: 0;
}
html, body {

  height: 100%;
  padding:0;
  margin:0;
}

body {
  font-size: 36px;

  font-family: 'Lato', sans-serif;

font-weight: 300;
line-height: 1.42857143;
padding:0;
margin:0;
}

.mycolor {color:#13b3ac;}
.mybgcolor {background-color:#13b3ac;}

.pointer {cursor:pointer;}

.mysvg {width:75px;}

p {padding:15px 0;}

#content {
    height: 250vh;
    background: #eee;
    width:100%;
}

.mybgs {
	background-repeat: no-repeat;
 	background-size: cover;
 	background-attachment: fixed;
 	background-position:center center;

}

.container {width:95%;padding:0 2.5%;max-width:1280px; margin: auto;}

h2 {font-size:36px;margin:15px 0 60px 0;line-height:42px;font-weight:300;}

.btn {border-radius:50%;padding:5px;color:#FFF;width:75px;height:75px;display:block;text-align:center;font-weight:600; line-height:25px;;}

#start, #area2, #area3, #area4 {
  	display:none;
    position: fixed;
    height:100vh;
	width: 95%;
	color:#333;
   	text-align:center;

   	padding:0 2.5% ;
   	padding-top:30vh;
    top: 0px;
    left: 0px;
}

#start {
background-image: url("../images/bg_sample.jpg");
	 background-position: bottom right;
color:#FFF;
   	padding-top:30vh;
}

#logo {width:80%;max-width:500px;}

#start p.logosub {margin:-80px 0 0 80px;font-size:30px;}





#area3,#area2,#area3,#area4{line-height:1.5em;font-size:20px;}
.schwerpunkte {margin:0px 0 60px 0;font-weight:100;font-size:2em;}
.myli {display:block;cursor:pointer;}
.myli img {height:75px;vertical-align:baseline;margin-right:0px;}
.col3 {width:30%;padding: 0 1.66%;float:left;}
.col2 {width:45%;padding: 0 1.66%;float:left;}

.hinweis {position:fixed; bottom:10px;font-size:13px;line-height:1.2em;color:#666;margin-top:60px;width:75%;left:12.5%;}



.contact {font-size:1.5em;line-height:1.3em;}

#area3 {
  	background-image: url("../images/lui.jpg");
	background-position: bottom right;
	line-height:1.5em;font-size:20px;
	padding-top:25vh;
 }

#area3 div {text-align:left;color:#FFF;width:25%;padding-left:5%;}

#area3 img {height:75px;}



#overlayhypno, #overlaysw1, #overlaysw2, #overlaysw3, #aboutme {width:50%;padding:25%;padding-top:20vh;   }
.close {position:fixed;z-index:10;top:0px; right:10px; color:#FFF;cursor:pointer;font-size:48px;}

#aboutme {padding-top:10vh;}


.overlay {font-size:18px;width:100%;height:100%;padding:10px;top:0;left:0;z-index:9;position:fixed;display:none;}
.overlay h2 {font-weight:600;color:#FFF;}



.aniscale {


  animation: crescendo 2.5s alternate infinite ease-in;
}

.aniscale:hover {  animation: none; opacity:0.8;transform: scale(1.2);}

@keyframes crescendo {
  0%   {transform: scale(1.0);}
  100% {transform: scale(1.2);}
}








@media only screen and (max-width: 1400px) {

	#area2,#area3,#area4 {
	padding-top:25vh;
	}
	  #area4,  #overlayhypno {
   		padding-top:10vh;
    }

    #area3 div {width:35%;}
    #area3 {line-height:1.2em;font-size:16px;}

}


@media only screen and (max-width: 600px) {

	#content {
    height: 300vh;}

	.container {
   width:95%;
   padding-left:2.5%;}

  .mhide {display:none;}
	h2 {font-size:24px;}
	img {max-width:75px;}

	.mybgs {

 		background-attachment: scroll;


	}

  #start p.logosub {margin:-50px 0 0 50px;font-size:16px;}

  #area2,#area3,#area4 {
    padding-top:10vh;
    font-size:14px;
    line-height: 1.2em;
  }

  #area2  {

  padding-top:5vh;
  }



	.schwerpunkte, .hinweis {margin:0px 0 20px 0;;}


  .col3 {width:60%;padding: 0 0 60px 20%;}
  .myli img {height:65px;}

  #area3 {padding-top:10px;}
   #area3 div {
   	 width:95%;
   padding-left:2.5%;

   }

#area3 p {padding:15px 0 0 0;}
#area3 img {height:65px;}

   .contact {font-size:1.2em;line-height:1.2em;}


   #overlayhypno, #overlaysw1, #overlaysw2, #overlaysw3, #aboutme {width:95%;padding:2.5%;padding-top:5vh;   }

   .overlay {font-size:14px;}
   .overlay h2 {margin-bottom:15px;font-size:18px;line-height:24px;}
   .overlay p {}



}


@media only screen and (max-width: 320px) {


    .col3 {width:80%;padding: 0 0 50px 10%;}
    #area2  {

    padding-top:1vh;
    }

}

</style>
