@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600);

html, body, .container 
{ height: 100%; margin: 0; padding: 0; }



body{
	min-width: 320px;
	overflow: hidden;
	
	background: #f7f7f7; /* Old browsers */
	background: #fcfcfc; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover,  #fcfcfc 63%, #e2e2e2 100%); /* FF3.6+ */
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(63%,#fcfcfc), color-stop(100%,#e2e2e2)); /* Chrome,Safari4+ */
	background: -webkit-radial-gradient(center, ellipse cover,  #fcfcfc 63%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-radial-gradient(center, ellipse cover,  #fcfcfc 63%,#e2e2e2 100%); /* Opera 12+ */
	background: -ms-radial-gradient(center, ellipse cover,  #fcfcfc 63%,#e2e2e2 100%); /* IE10+ */
	background: radial-gradient(ellipse at center,  #fcfcfc 63%,#e2e2e2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#e2e2e2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	}

.container{
	width: 100%;
	box-shadow: 0px -2.5px 0 0px #000 inset, 0px 2px 0 0px #000 inset;
	}

body { 
  -webkit-animation: bugfix infinite 1s;
  }
  
@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
  
  input[type=checkbox]:checked ~ .test {
  height: 200px;
  line-height: 18px; 
  }
  
  input[type=checkbox]:checked ~ .test p {
  	color: rgb(225, 225, 225); 
	background-color: rgb(44, 45, 45);
	}

.test {
height: 0;
transition: height 1s ease;
display: block;
line-height: 0px;
overflow: hidden;
zoom: 1;
}
  
.test p {
  overflow: hidden;
  clear: left;
  margin-bottom: 20px;
  padding-left: 5px;
  display: block;
  
  	 font-family: "Titillium Web";
	 font-style: normal;
	 font-weight: 400;
	 font-size: 11px;
	 
	 background-color: transparent;
	 transition: background-color 3s ease;
	}
  
  ul {
  max-height: 200;
   
  list-style-type: none;
  overflow: hidden;
  
  margin: 10px;
  width: 215px;
  float: left;
  line-height: 14px;
  
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  font-size: 12px;
  color: rgb(119, 119, 119);
  }

  li:first-child {
	 font-family: "Titillium Web";
	 font-style: normal;
	 font-weight: 400;
	 font-size: 12px;
	 text-transform: uppercase;
	 color: rgb(166, 124, 82);
	 
	 
	 margin-bottom: 3px;
	 }
  
.anm {
	width: 96px;
	}

.logopic {
	width: 470px;
	display: block;
	}
  
  
  .logo {
	width: 470px;
	height: 50px;
	position: absolute;
	bottom: 72%;
	left: 50%;
	margin: 0 0 0 -235px;
	}
	
label { 

  cursor: pointer;
  user-select: none;
  width: 470px;
  position: relative;
  display: block;
  }
  
h2  {
	 font-family: "Titillium Web";
	 font-style: normal;
	 font-weight: 400;
	 font-size: 14px;
	 text-align: center;
	 display:block;
	 margin: 10px;
	 color: rgb(150, 148, 146);
  }
  
  .copyright{
	 position: absolute;
	 width: 100%;
	 bottom: 5px;
	 font-family: "Titillium Web";
	 font-style: normal;
	 font-weight: 400;
	 font-size: 11px;
	 text-transform: uppercase;
	 text-align: center;
	 color: rgb(75, 75, 75);
	}


/* ----------- */
/* Font-Stuff */
/* ---------- */

a{
	color: #ccc;
	text-decoration: none;
	}

a:hover{
	color: #000;
	}




/* ----------- */
/* Resize-Stuff */
/* ---------- */
@media screen and (max-width: 480px){
	label {
		width: 100%;
		}
		 
		 
.info {
  margin: -5px;
  margin-bottom: 5px;
 
  }
  
	ul {
	margin: 3px;
	width: 145px;
	}
	
	.logo {
		bottom: 75%;
		width: 100%;
		left: 0%;
		margin: 0 0 0 0px; 
		}
		
	.logopic {
		width: 300px;
		display: block;
		margin-left: auto;
		margin-right: auto
	}

	.context {
		padding-left: 3px;
		}
}