@charset "utf-8";
/* CSS Document */

#about{
	height:100vh;
}
#ghost{
	display:block;
	box-sizing:border-box;
	position:absolute;
	top:70vh;
	width:100%;
	padding-left:10%;
}
.ghost{
	display:table;
	min-width:10%;
	max-width:23%;
	margin-bottom:1%;
}
#ghost1{
	margin-right:4%;
	float:left;
}
#ghost2{
	margin-right:4%;
	float:left;
}
#ghost3{
	margin-right:4%;
	float:left;
}
#ghost4{
	margin-right:4%;
	float:left;
}

.ghost a{
	display:block;
	border: 2px solid #fff;
	border: 0.125rem solid #fff;
	border-radius: 10px;
	color:#fff;
	font-size:32px;
	font-size:1.8rem;
	line-height:1.8rem;
	font-weight:bold;
	text-align:center;
	text-shadow: 0 -1px 1px #000, 0 1px 1px #fff;
	padding:6px;
	padding:0.375rem;
	overflow: hidden;
	width:100%;
	cursor:pointer;
	transition: all 1000ms ease-out;
}
.ghost a:hover{
	background-color:#fff;
	color:#000;	
	text-shadow: 0 -1px 1px #f51, 0 1px 1px #fff;
}
.ghost_target{
	position:relative;
	top:-16vh;
}
.ghost_target1{
	position:relative;
	top:-99vh;
}
.sites{
	margin-bottom: 0.1rem;
	color: #f51;
}

/* ===========================================
   6. Parallaxe
   =========================================== */

section.parallax {
	box-sizing:content-box;
  	margin:0;
	height:101vh;
	/*background-color:#CF2326;*/  
}
.parallax [class*="img__"] {
  	background-position:50% 0;
  	/*height:1080px; für IE8*/
	height:101vh;
  	background-repeat:no-repeat;
 	background-attachment:fixed;
 	background-size:cover;
}


.img__school1_1{
	background-image:url(../../design/school1_1.jpg);
}
.img__school1_2{
	background-image:url(../../design/school1_2.jpg);
}
.img__school1_3{
	background-image:url(../../design/school1_3.jpg);
}
.img__start1_1{
	background-image:url(../../design/start1_1.jpg);
}
.img__school1b_1{
	background-image:url(../../design/school1_1b.jpg);
}
.img__school1_4{
	background-image:url(../../design/school1_4.jpg);
}

.header{
  	position:relative;
	
	top:-4rem;
  	margin:0;
  	padding:1rem;
  	text-align:left;
  	font-size:2rem;
 	color:#333;
  	background-color:rgba(255, 255, 255, 0.75);
}
.header h1{
	margin:0;
	line-height:2rem;
	text-align:left;
  	font-size:2rem;
}
.title{
  position: relative;
  top:28vh;
  left:52vw;
  width: 36vw;
  padding: 1.5%;
  border-radius: 1rem;
  background: rgba(230,230,230,.8);
  box-shadow:0 0 8px rgba(0, 0, 0,.7);
}
.links{
	left:10vw;
}
.dark_gray, p.dark_gray{
	color:#222;
}
.vh_top{
	top:15vh;	
}
/****End Parallaxe****/



/* ===========================================
   6. Animationen
   =========================================== */
/****Begin animation caption home***/

@keyframes expand{
	0% {font-size:60px;font-size:3.75rem;}
	100% {font-size:120px;font-size:7.5rem;}
}
#rgm{
	font-size:60px;
	animation:expand 3s ease-in 1s;
	animation-fill-mode:forwards;
}



/****End animation caption home***/