#content {max-width:65%; margin:0 auto; text-align:justify;}

/*drehendes Zahnrad*/
#zahnradhelper {height:42vw; width:30vw; overflow:hidden; position:relative;}
#zahnrad {
	width:40vw;
	height:40vw;
	background:url("../../images/zahnrad/zahnrad.svg");
	background-size:100% 100%;
	position:relative;
	margin-left:-16vw;
	margin-top:1vw;
	-webkit-animation:spin 20s linear infinite;
    -moz-animation:spin 20s linear infinite;
    animation:spin 20s linear infinite;
    -webkit-user-select: none;
    -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#zahnrad img {
	box-sizing:border-box;
	border-radius:50%;
	height:6vw;
	width:6vw;
	position:absolute;
	-webkit-animation:spinrev 20s linear infinite;
    -moz-animation:spinrev 20s linear infinite;
	animation:spinrev 20s linear infinite;
	-webkit-filter:saturate(20%);
	filter:saturate(20%);
	cursor:pointer;
}
#zahnrad img.highlight {
	-webkit-filter:none;
	filter:none;
}
#name {
	display:inline;
	margin:1em;
}
#prev, #next {
	color:#ea5b0c;
	cursor:pointer;
	font-weight:bold;
	border: none;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
@-moz-keyframes spinrev { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spinrev { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spinrev { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

/*scroll-to-draw Zahnrad*/
#scroll-logo {
  position: fixed;
  bottom: .2em;
  right: .2em;
  width: 5vw;
  height: 5vw;
  z-index:20;
}

/*generelle Styleanpassungen*/
.main.style2 {
	background-image: url("images/noisy_net.png");
}
#header {
	background-color: #EA5B0C;
}

::-webkit-scrollbar {
    width: 12px;
} 
::-webkit-scrollbar-track {
	background:rgba(120,120,120,.8);
    border-radius: 0 10px 10px 0;
} 
::-webkit-scrollbar-thumb {
    border-radius: 0 10px 10px 0;
    background:rgba(235,235,235,.9);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

.counter{
	font-size:4em;
	font-weight:400;
	display:block;
	min-height:4rem;
}


/*Bilder auf kleinen Bildschirmen nicht auf voller Breite darstellen*/
.image.fit img{
	width: 75%;
	margin: 0 auto;
}
@media only screen and (min-width: 630px) {
.image.fit img{
	width:50%;
}}
@media only screen and (min-width: 980px) {
.image.fit img{
	width:100%; /*Layout wird mehrspaltig*/
}}


/*Logo-Transition*/
#logo {
	-webkit-filter:grayscale(0) blur(0);
	filter:grayscale(0) blur(0);
	filter:none; /*für IE9*/
	transition:all 3s;
}
#logo.sw {
	-webkit-filter:grayscale(.9) blur(3px);
	filter:grayscale(.9) blur(3px);
}

/* rauten-fotos */
ul.major-icons li .icon {
	overflow:hidden;
}
ul.major-icons li .icon:before {
	content:"";
	background-size:cover;
	background-position:center center;
	position:relative;
	height:150%;
	width:150%;
	top:-25%;
	left:-25%;
}
.icon.major.bild1:before {
	background-image:url("../../images/frosch.jpg");
}
.icon.major.bild2:before {
	background-image:url("../../images/kartoffel.jpg");
}
.icon.major.bild3:before {
	background-image:url("../../images/mikroskop.jpg");
}
.icon.major.bild4:before {
	background-image:url("../../images/reagenz.jpg");
}
.icon.major.bild5:before {
	background-image:url("../../images/kaese.jpg");
}
.icon.major.bild6:before {
	background-image:url("../../images/flamme.jpg");
}