@charset "UTF-8";
/* homenaje-regular - latin */
@font-face {
  font-family: 'Homenaje';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/homenaje/homenaje-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/homenaje/homenaje-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/homenaje/homenaje-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/homenaje/homenaje-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/homenaje/homenaje-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/homenaje/homenaje-v16-latin-regular.svg#Homenaje') format('svg'); /* Legacy iOS */
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/oswald/oswald-v49-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/oswald/oswald-v49-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/oswald/oswald-v49-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/oswald/oswald-v49-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/oswald/oswald-v49-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/oswald/oswald-v49-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/opensans/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/opensans/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/opensans/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/opensans/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/opensans/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/opensans/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* lobster-regular - latin */
@font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/lobster/lobster-v28-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/lobster/lobster-v28-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/lobster/lobster-v28-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/lobster/lobster-v28-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/lobster/lobster-v28-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/lobster/lobster-v28-latin-regular.svg#Lobster') format('svg'); /* Legacy iOS */
}
/* homenaje-regular - latin */
@font-face {
  font-family: 'Homenaje';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/homenaje/homenaje-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/fonts/homenaje/homenaje-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/homenaje/homenaje-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/homenaje/homenaje-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/homenaje/homenaje-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/homenaje/homenaje-v16-latin-regular.svg#Homenaje') format('svg'); /* Legacy iOS */
}
body {
	width:100%;
	heigth:100%;
	 -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color:#FFF;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Homenaje';
	font-weight: 700;
	text-align: center;
}

a {
	font-family: 'Homenaje';
	text-decoration: none;
	font-weight: 700;
	color: #000;
	text-align: center;
}

.dotted {
	border-top-width: thin;
	border-top-style: dotted;
	border-top-color: #666;
}



#face {
	position:fixed;
	width:50px;
	height:50px;
	z-index:99;
	border-radius: 50%;
	left: 30px;
	bottom:30px;
	visibility: visible;
	animation-name:colors;
	animation-duration:10s;
	animation-iteration-count:infinite;
	-webkit-animation-name:colors;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
}
#home {
	position:fixed;
	width:50px;
	height:50px;
	z-index:99;
	border-radius: 50%;
	right: 30px;
	bottom:30px;
	visibility: visible;
	animation-name:colors;
	animation-duration:10s;
	animation-iteration-count:infinite;
	-webkit-animation-name:colors;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
}
#eyes {
	position:relative;
	width:50px;
	height:50px;
	z-index:99;
	border-radius: 50%;
	left: 45%;
	bottom:0px;
	visibility: visible;
	animation-name:colors;
	animation-duration:10s;
	animation-iteration-count:infinite;
	-webkit-animation-name:colors;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
}
#content {
	z-index:5;
	width: 100%;
	position: absolute;
	left: 0px;
	top:0px;
}


#topic {
	font-family: 'Lobster';
	font-size:12em;
	text-shadow:15px 15px 5px grey;
	text-align:center;
	top:10px;
	position:relative;
	color:#000;
	background-color:#FFF;
	}
#content #pics img {
}

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


#pics {
	position: relative;
}
  
#topic {
font-size:10em;
	text-shadow:15px 15px 5px grey;  }
}
  @media screen and (max-width: 1240px) {
  
#topic {
font-size:8em;
	text-shadow:9px 9px 3px grey;  }
}
 @media screen and (max-width: 768px) {
  
#topic {
font-size:4em;
	text-shadow:5px 5px 2px grey;  }
}
 @media screen and (max-width: 420px) {
  
#topic {
font-size:4em;
	text-shadow:5px 5px 2px grey;  }
}

#topicblack {
	font-family: 'Lobster';
	font-size:12em;
	text-shadow:15px 15px 5px black;
	line-height:normal;
	text-align:center;
	top:10px;
	padding-bottom:30px;
	position:relative;
	background-color:#333;
	color:#FFF;
	}
	 
  @media screen and (max-width: 1364px) {
  
#topicblack {
font-size:10em;
	text-shadow:15px 15px 5px black;  }
}
  @media screen and (max-width: 1240px) {
  
#topicblack {
font-size:8em;
	text-shadow:9px 9px 3px black;  }
}
 @media screen and (max-width: 768px) {
  
#topicblack {
font-size:4em;
	text-shadow:5px 5px 2px black;  }
}
 @media screen and (max-width: 420px) {
  
#topicblack {
font-size:3em;
	text-shadow:5px 5px 2px black;  }
}
#topicblack2 {
	font-family: 'Lobster';
	font-size:6em;
	text-shadow:7px 7px 3px black;
	line-height:normal;
	text-align:center;
	top:10px;
	padding-bottom:30px;
	position:relative;
	background-color:#333;
	color:#FFF;
	}
	  @media screen and (max-width: 1364px) {
  
#topicblack2 {
font-size:4em;
	text-shadow:6px 6px 3px black;
		padding-bottom:20px;

}
}

  @media screen and (max-width: 1240px) {
  
#topicblack2 {
font-size:2em;
	text-shadow:4px 4px 2px black;
		padding-bottom:10px;
}
	
}
 @media screen and (max-width: 768px) {
  
#topicblack2 {
font-size:2em;
	text-shadow:4px 4px 2px black;
			padding-bottom:10px;
}
}
 @media screen and (max-width: 420px) {
  
#topicblack2 {
font-size:2em;
	text-shadow:2px 2px 1px black; 
			padding-bottom:5px;
}
}

#spalte {
	width:25%;
	position:relative;
	float: left;
	margin-right: 0%;
}
@media screen and (max-width: 1679px) {
  
  #spalte {
    width: 25%;
  }
 }
  @media screen and (max-width: 1364px) {
  
  #spalte {
    width: 25%;
  }
}
  @media screen and (max-width: 1240px) {
  
  #spalte {
    width: 50%;
  }
}
 @media screen and (max-width: 768px) {
  
  #spalte {
    width: 100%;
  }
}
 @media screen and (max-width: 420px) {
  
  #spalte {
    width: 100%;
  }
}
#spielone {
	position:relative;
	overflow:hidden;
	margin:auto;
	max-width:1680px;
	}
#spielone ul li{
	width:25%;
	height:auto;
	position:relative;
	float:left;	
	list-style:none;
	overflow:hidden;
	}	
#spielone li h {
	font-family:'Oswald';
	font-weight:700;
	font-size:1.5em;
	text-align:center;
	display:block;	
	}
#spielone li p {
	font-family:'Open Sans';
	text-align:left;
	display:block;
	width:80%;
	margin-left:10%;
	}

	 
  @media screen and (max-width: 1364px) {
  
  #spielone ul li {
    width: 25%;
	
  }
}
  @media screen and (max-width: 1024px) {
  
  #spielone ul li {
    width: 50%;
  }
}
 @media screen and (max-width: 768px) {
  
  #spielone ul li {
    width: 100%;

  }
}
 @media screen and (max-width: 420px) {
  
  #spielone ul li {
    width: 100%;
  }
}
	
#spieltwo {
	position:relative;
	overflow:hidden;
	background-color:#333;
	margin:auto;
	}
#spieltwo ul li{
	width:25%;
	position:relative;
	float:left;	
	margin-top:25px;
	}	
#spieltwo li h {
	font-family: 'Lobster';
	text-shadow:5px 5px 1px black;
	font-size:2.8em;
	text-align:center;
	display:block;
	color:#FFF;
	}	
#spieltwo li p {
	width:80%;
	margin-left:10%;
	font-family:'Open Sans';
	text-align:left;
	display:block;	
	color:#FFF;
	}
#spielthree {
	position:relative;
	overflow:hidden;
	margin:auto;
	max-width:1680px;
	}
#spielthree ul li{
	width:25%;
	height:auto;
	position:relative;
	float:left;	
	list-style:none;
	overflow:hidden;
	}

#spielfor {
	position:relative;
	overflow:hidden;
	margin:auto;
	max-width:1680px;
	}

#spielfor ul li{
	width:19%;
	height:auto;
	position:relative;
	float:left;	
	list-style:none;
	overflow:hidden;
	}
		
.datewhite {
	font-family:'Homenaje';
	text-shadow:none;
	font-size:0.5em;
	text-align:center;
	display:block;
	color:#FFF;	
	}	
.dateblack {
	font-family:'Homenaje';
	text-shadow:none;
	font-size:0.9em;
	text-align:center;
	display:block;
	color:#000;	
	}	
.oswalder{
	font-family:'Oswald';
	font-weight:700;
	font-size:1.2em;
	}
.osw {
	font-family:'Oswald';
	font-weight:700;
	text-shadow:none;
	font-size:0.4em;
	text-align:center;
	display:block;
	color:#FFF;	
	}
.blockblack   {
	width:50%;
	margin-left:25%;
	margin-bottom:30px;
	font-family:'Homenaje';
	font-size:1.3em;
	text-align:left;
	display:block;	
	}	
.infobox {
	position: absolute;
	width:60%;
	top: 30%;
	padding-bottom: 10px;
	padding-left: 10%;
	padding-top: 10px;
	opacity: 0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	background-color: #FFF;
	border-bottom-right-radius: 10px 10px;
	border-top-right-radius: 10px 10px;
	padding-right: 10%;
	font-family: 'Homenaje';
	font-weight:400;
	font-size: medium;
	color: #333;
	visibility: hidden;
}
#spieltwo li .spiele {
	font-family:'Open Sans';
	text-align:left;
	display:block;	
	color:#FFF;

	}
#spieltwo li .kategorie {
	font-family:'Oswald';
	font-weight:700;
	color:#FFF;
	}

#first {
	font-family: 'Open Sans';
	font-weight:400;
	text-align: left;
	width: 50%;
	margin-bottom:100px;
	margin-top: 25px;
	margin-left: 25%;
	position:relative;
	top:0px;
	left:0px;
}
	
  @media screen and (max-width: 1364px) {
  
  #spieltwo ul li {
    width: 25%;
  }
}
  @media screen and (max-width: 1240px) {
  
  #spieltwo ul li {
    width: 50%;
  }
}
 @media screen and (max-width: 768px) {
  
  #spieltwo ul li {
    width: 100%;
  }
}
 @media screen and (max-width: 420px) {
  
  #spieltwo ul li {
    width: 100%;
  }
}
#second {
	font-family:'Open Sans';
	font-weight:400;
	color:#FFF;
	text-align: justify;
	width: 100%;
	position:relative;
	top:0px;
	left:0px;
	background-color:#333;
	padding-top:25px;
	padding-bottom:50px;
}

#ankhidden {
	visibility: hidden;
	position: relative;
	top: 0px;
	left: 0px;
	height: 0px;
}
#ank {
	visibility: hidden;
	position: relative;
	left: 0px;
	top: 0px;
}

#info {
	background-color: #FFF;
	height: 30px;
	width: 60px;
	left: 0px;
	top: 150px;
	position: absolute;
	padding-left: 20px;
	z-index:8;
	border-bottom-right-radius: 10px 10px;
	border-top-right-radius: 10px 10px;
	font-family: Nova Square;
	padding-top: 10px;
	padding-bottom: 0px;
	color: #333;
}
img {
	border:none;
}
li a img {
}
li a img {
}




/* menu  */


li {
	list-style:none;
}

@keyframes colors {
	from {background-color:#FFF;}
	25% {background-color:#000;}
	50% {background-color:#FFF;}
		75% {background-color:#000;}

	to {background-color:#FFF;}
}
@-webkit-keyframes colors {
	from {background-color:#FFF;}
	25% {background-color:#000;}
	50% {background-color:#FFF;}
		75% {background-color:#000;}

	to {background-color:#FFF;}
}



.menuBox {
	width: 150px;
	height:70px;
}
#title {
	width:70px;
	height:50px;
	position:absolute;
	left:0px;
	top:20px;
	animation-name:colors;
	animation-duration:10s;
	animation-iteration-count:infinite;
	-webkit-animation-name:colors;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	
}

.menubar{
	width:30px;
	height:5px;
	position:absolute;
	right:10px;
	background-color:#FFF;
	
}	

#ddMenu {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  cursor: pointer;
}
#ddMenu  ul {
  float: left;
  overflow: hidden;
  position: fixed;
  top: 70px;
  height:0px;
  left:0px;
  margin:0;
  padding:0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
  -o-transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
  transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
}
#ddMenu:hover ul {
 height: 400px;
}

#ddMenu ul li  {
	position: relative;
  clear: both;
  overflow: hidden;
	} 
#ddMenu ul li a {
	text-decoration: none;
	font-size:2em;
	color: white;
	float:left;
	position:relative;
	padding:4px 22px;
	display:block;
}
#ddMenu ul li span {
	height: 44px;
	width: 100%;
	position: absolute;
	left: -3px;
	top: 0;
}
#ddMenu ul li .black {
	z-index: -1;
  background: black;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#ddMenu ul li .white {
z-index: -2;
  background: white;
}
#ddMenu ul a:hover .black{
width:0%;
}
#ddMenu ul a:hover {
color:black;
}
#impress{

	width:50%;
	position:relative;
	color:#000;
	font-family:'Homenaje';
	text-align:center;
	padding-top:10px;
left:25%;
	overflow:hidden;

}
.imageBox {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.figure {
	width:100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	padding: 0px;
	margin:0px;
	background: #333;

}
.imageBox .tr-opacity {
	opacity:1;
	-webkit-transition: opacity 2s;
}
.imageBox:hover .tr-opacity {
	opacity:0;
}
.imageBox .tr-slideIn {
	width:100%;
left:0;
	margin: 0;
	padding-top: 0px;
	opacity: 0.8;	
	background:#333;
	color: white;
	-webkit-transition: all 2.5s;
	-moz-transition: all 2.5s;
	-o-transition: all 2.5s;
	transition: all 2.5s;
}
.imageBox:hover .tr-slideIn {
	left: -100%;
}