body {

	cursor: url('data/cursor.png'), default;
	


	font-family: helvetica, sans;
  
 	text-align: center;
 	padding: 0%;
}
 

 /*link cursor*/
a {
  cursor: url('data/cursor.png'), default;
}

input {
  cursor: url('data/cursor.png'), default;
}


/*schrift*/

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);

 h1 {
 		font-family: 'Nunito', sans-serif;
		font-weight: 700;
 		font-size: 55px;
 		line-height: 0.98;
		color: #ffffff;
		letter-spacing: 1px;
 }

	p {
		font-family: 'Nunito', sans-serif;
		font-weight: 400;
		font-size: 20px;
		color: #ffffff;
		letter-spacing: 1px;
		 		line-height:0.001;

 }	

 	h2 {
		font-family: 'Nunito', sans-serif;
		font-weight: 700;
		font-size: 20px;
		color: #ffffff;
		letter-spacing: 1px;
		line-height:0.5;
 }	

	h3 {
		font-family: 'Nunito', sans-serif;
		font-weight: 700;
		font-size: 25px;
		color: #ffffff;
		letter-spacing: 1px;
		line-height:1;
 }	

h4 {
		font-family: 'Nunito', sans-serif;
		font-weight: 400;
		font-size: 12px;
		color: #ffffff;
		letter-spacing: 1px;
		line-height:0.5;
 }	
		


/* border */
		
		
		 #to, #bo, #le, #ri {
	background: #ffffff;
	position: fixed;
	z-index: 8;
	}
	#le, #ri {
		top: 0; bottom: 0;
		width: 30px;
		}
		#le { left: 0; }
		#ri { right: 0; }
		
	#to, #bo {
		left: 0; right: 0;
		height: 30px;
		}
		#to { top: 0; }
		#bo{ bottom: 0; }
		 
		 

/* LINK */

/* unvisited link */
a:link {
    color: #ffffff;
    text-decoration: none;
}

/* visited link */
a:visited {
    color: #ffffff;
    text-decoration: none;
}

/* mouse over link */
a:hover {
	color:#ffffff;
    background-color:   #ffffff;

    border-radius: 100px;
   	text-decoration: none;
}

/* selected link */
a:active {
    color: #ffffff;
    text-decoration: none;
}

a.one:hover{ 

	background: rgba(0, 0, 0, 0);
	opacity: 0.5}



/*hintergrund farbe*/

.element {
  animation: pulse 5s infinite; background-color: #FFABF4;
   width: 100%;
  height: 100%
}
 
@keyframes pulse {
  0% {
    background-color: #FFABF4;
    
  }
  50% {
    background-color: #71F5FF;
  }
   100% {
    background-color: #FFABF4;
  }
}








/*mitte*/


.box {


  position: relative;
  top: 50%;
  z-index: 600;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}



  


/*impressum*/

footer{

position:fixed;
bottom: 24px;
left: 0;

width:100%;
}



header {
  z-index: 9;
}







/*jesus*/


.grow img {
  height: 120px;
  width: 120px;
   z-index: 9;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.grow img:hover {
  width: 800px;
  height: 800px;
z-index: 9;
}






/*preloader*/

#preloader {
          animation: pulse 5s infinite; background-color: #FFABF4;
  width: 100%;
  height: 100%;
   position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  z-index: 9000;
   
}

@keyframes pulse {
  0% {
    background-color: #FFABF4;
  }
  50% {
    background-color: #71F5FF;
  }
   100% {
    background-color: #FFABF4;
  }
}

#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;
}






/*index animation*/

.logo {
  position: relative;
  top: 50%;
-webkit-animation: cssAnimation 3.5s 1 ease;
-moz-animation: cssAnimation 3.5s 1 ease;
-o-animation: cssAnimation 3.5s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(0deg) scale(0) skew(0deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(0deg) scale(0) skew(0deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(0) skew(0deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}




.choose {
  position: relative;
  top: 50%;
-webkit-animation: choose 2s 1 ease;
-moz-animation: choose 2s 1 ease;
-o-animation: choose 2s 1 ease;
}
@-webkit-keyframes choose {
from { -webkit-transform: rotate(0deg) scale(0.5) skew(0deg) translate(0px); }
to { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-moz-keyframes choose {
from { -moz-transform: rotate(0deg) scale(0.5) skew(0deg) translate(0px); }
to { -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}
@-o-keyframes choose {
from { -o-transform: rotate(4deg) scale(0.5) skew(0deg) translate(0px); }
to { -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px); }
}





/*mobile*/


@media only screen AND (max-width: 736px) { // 736px is the iPhone 6+ max 
  .mobile { 
    display: none; 
  }