@charset "UTF-8";
#top{
	top:-360px;
}
#sociallogo{
	visibility: hidden;
}
body {
	padding:0px;
	margin:0px;
	font-family: zeitung-micro, sans-serif;
	font-weight: 200;
}
header{
	background-color:#ffffff;
	margin-left:10%;
	box-sizing: border-box;
	width:80%;
	height:369px;
	position:fixed;
	top:0px;
	border-top:none;
	border-bottom:9px solid #87C02C;
}

.outerwheel{
	position:absolute;
	left:99px;
	top:9px;
	animation-name:rotateleft;
	animation-duration:10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes rotateleft{
	0%{}
	100%{transform:rotate(359deg)}
}
.innerwheel{
	position:absolute;
	left:117px;
	top:27px;
	animation-name:rotateleft;
	animation-duration:10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction: reverse;
}
.navlefteye{
	top:36px;
	position:absolute;
	left:108px;
	animation-name:eyelook;
	animation-duration:2s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
	z-index:1;
}
@keyframes eyelook{
	0%{}
	5%{transform:rotate(45deg); left:117px; top:38px;}
	10%{transform:rotate(90deg); left:126px; top:36px;}
	15%{transform:rotate(135deg); left:135px; top:38px;}
	20%{transform:rotate(170deg); left:144px; top:36px;}
	25%{transform:rotate(170deg); left:144px; top:36px;}
	40%{transform:rotate(135deg); left:135px; top:38px;}
	45%{transform:rotate(90deg); left:126px; top:36px;}
	50%{transform:rotate(45deg); left:117px; top:38px;}
	55%{transform:rotate(0deg); left:108px; top:36px;}
	60%{transform:rotate(-45deg); left:99px; top:38px;}
	65%{transform:rotate(-90deg); left:90px; top:36px;}
	70%{transform:rotate(-135deg); left:81px; top:38px;}
	80%{transform:rotate(-135deg); left:81px; top:38px;}
	90%{transform:rotate(-90deg); left:90px; top:36px;}
	95%{transform:rotate(-45deg); left:99px; top:38px;}
	100%{transform:rotate(0deg); left:108px; top:36px;}
}
.navcenter{
margin:0px;
position:fixed;
left:50%;
margin-left:-237px;
top:18px;
}
.logo{
	position:fixed;	
	left:50%;
	margin-left:-149px;
	top:88px;
	z-index:2;
}
.navslidertop{
	position:fixed;
	top:18px;
	left:50%;
	margin-left:-426px;
	width:306px;
	height:126px;
	transition:transform .25s;
	background-image:url("/assets/navtop.png");
	background-repeat:none;
	background-size:cover;
}
.navsliderbottom{
	position:fixed;
	width:306px;
	height:126px;
	top:216px;
	left:50%;
	margin-left:-426px;
	transition:transform .25s;
	background-image:url("assets/navbot.png");
	background-size:cover;
	
}

.navleft p{
	position:fixed;
	padding-right:180px;
	padding-left:9px;
	font-size:45px;
	color:#ffffff;
	background-color:#87C02C;
	border:9px solid #000000;
	border-left:36px solid #000000;
	width:108px;
	height:54px;
	left:50%;
	margin-left:-426px;
	margin-top:0px;
	top:144px;
	transition:height .25s, transform .25s, border .5s;
	transition-delay:transform.25s, height .25s, border .5s;
	font-variant:small-caps;
	font-weight:600;
	line-height:45px;

}
.navleft:hover a{
	transition-delay:.25s;
	transition:opacity .5s;
	opacity: 1;
}
.navleft a{
	color:#ffffff;
	font-size:36px;
	font-weight:200;
	line-height:45px;
	text-decoration:none;
	opacity:.0;
	transition:opacity .1s;
}
.navleft a:hover{
	color:#000000;
}
.navleft a:active{
	color:#000000;
	font-weight:100;
}
.navleft:hover p{
	height:252px;
	transform:translateY(-126px);
	border-top:solid 36px #000000;
	border-bottom:solid 36px #000000;
	line-height:54px;
}
.navleft:hover .navslidertop,.navleft:hover .navsliderbottom {
	transform:translate(224px)

}

.navright1 {
	position:fixed;
	top:9px;
	left:50%;
	margin-left:134px;
}

.navgross1 {
	position:fixed;
	top:85px;
	margin-left:295px;
	left:50%;
	animation-name:gross1;
	animation-duration: 3s;
	animation-delay: .8s;
	animation-iteration-count: infinite;
	transition:transform .2s;
	transform:scale(.5);
}
.navgross2 {
	position:fixed;
	top:61px;
	margin-left:336px;
	left:50%;
	animation-name:gross2;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-delay:.6s;
	transition:transform .2s;
	transform:scale(.5);
}
.navgross3 {
	position:fixed;
	top:24px;
	margin-left:353px;
	left:50%;
	animation-name:gross3;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-delay:.4s;
	transition:transform .2s;
	transform:scale(.5);
}
.navgross4 {
	position:fixed;
	top:4px;
	margin-left:312px;
	left:50%;
	animation-name:gross4;
	animation-duration: 3s;
	animation-delay:.2s;
	animation-iteration-count: infinite;
	transition:transform .2s;
	transform:scale(.5);
}
.abouttext{
	position:fixed;
	left:50%;
	margin-left:226px;
	top:45px;
	transform:scale(.7);
	transition: transform .3s;
	z-index:3;
}
.abouttext:hover{
	transform:scale(1) rotate(15deg);
}
.abouttext:hover ~ .navgross1, .abouttext:hover ~ .navgross2, .abouttext:hover ~ .navgross3, .abouttext:hover ~ .navgross4{
	animation-name:grosshover;
	animation-duration:1s;

}
.navgross1{
	animation-delay:.3s;
}
.abouttext:hover ~ .navgross2{
	animation-delay:.2s;

}
.abouttext:hover ~ .navgross3{
	animation-delay:.1s;
}

@keyframes grosshover{
	0%{transform: scale(.5)}
	30%{transform:scale(1)}
	60%{transform:scale(.95)}
	100%{transform:scale(.5)}
}

@keyframes gross1{
	0%{transform: scale(.5)}
	30%{transform:scale(1)}
	35%{transform: scale(.9)}
	40%{transform:scale(.9)}
	45%{transform:scale(.8)}
	50%{transform:scale(.8)}
	75%{transform: scale(.3)}
	100%{transform:scale(.5)}
}
@keyframes gross2{
	0%{transform: scale(.5)}
	30%{transform:scale(.9)}
	35%{transform: scale(.82)}
	40%{transform:scale(.8)}
	45%{transform:scale(.82)}
	50%{transform:scale(.8)}
	75%{transform: scale(.4)}
	100%{transform:scale(.5)}
}
@keyframes gross3{
	0%{transform: scale(.5)}
	30%{transform:scale(1)}
	35%{transform: scale(1)}
	40%{transform:scale(.9)}
	45%{transform:scale(.8)}
	50%{transform:scale(.8)}
	75%{transform: scale(.3)}
	100%{transform:scale(.5)}
}
@keyframes gross4{
	0%{transform: scale(.5)}
	30%{transform:scale(.85)}
	35%{transform: scale(.80)}
	40%{transform:scale(.85)}
	45%{transform:scale(.8)}
	50%{transform:scale(.8)}
	75%{transform:scale(.4)}
	100%{transform:scale(.5)}
}
.navbeadright1{
	position:fixed;
	margin-left:144px;
	top:56px;
	left:50%;
	z-index:3;
	transform:scale(0.1);
	animation-name:vein1;
	animation-duration:1s;
	animation-delay:.1s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
.navbeadright1:nth-child(6){
	animation-delay:.5s;
}
.navbeadright2{
	position:fixed;
	margin-left:161px;
	top:77px;
	left:50%;
	z-index:3;
	transform:scale(.01) rotate(83deg);
	animation-name:vein2;
	animation-duration:1s;
	animation-delay:.3s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
.navbeadright2:nth-child(7){
	animation-delay:.6s;
}
.navbeadright3{
	position:fixed;
	margin-left:197px;
	top:96px;
	left:50%;
	z-index:3;
	transform:scale(.01) rotate(69deg);
	animation-name:vein3;
	animation-duration:1s;
	animation-delay:.5s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
.navbeadright3:nth-child(8){
	animation-delay:1s;
}
.navbeadright4{
	position:fixed;
	margin-left:234px;
	top:141px;
	left:50%;
	z-index:3;
	transform:scale(.01) rotate(45deg);
	animation-name:vein4;
	animation-duration:1s;
	animation-delay:.7s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
.navbeadright4:nth-child(9){
	animation-delay:1s;
}
.navbeadright5{
	position:fixed;
	margin-left:245px;
	top:162px;
	left:50%;
	z-index:3;
	transform:scale(.01) rotate(84deg);
	animation-name:vein5;
	animation-duration:1s;
	animation-delay:.9s;
	animation-iteration-count:infinite;
	animation-timing-function: linear;
}
.navbeadright5:nth-child(10){
	animation-delay:1.2s;
}
@keyframes vein1{
	0%{transform: scale(.1) rotate(72deg)}
	30%{top:40px; margin-left:181px; transform:scale(.6) rotate(68deg)}
	60%{top:30px;margin-left:204px; transform:scale(.8) rotate(75deg);}
	100%{top:38px; margin-left:232px; transform:scale(.01) rotate(120deg);}
	}
@keyframes vein2{
	0%{}
	30%{top:70px; margin-left:184px;transform:scale(.4) rotate(80deg)}
	60%{top:68px; margin-left:207px;transform:scale(.6) rotate(83deg)}
	100%{top:64px; margin-left:218px;transform:scale(.01) rotate(74deg)}
}
@keyframes vein3{
	0%{}
	30%{top:96px; margin-left:204px;transform:scale(.2) rotate(53deg)}
	60%{top:87px; margin-left:211px;transform:scale(.55) rotate(55deg)}
	100%{top:80px; margin-left:238px;transform:scale(.01) rotate(90deg)}
}
@keyframes vein4{
	0%{}
	30%{top:123px; margin-left:247px;transform:scale(.6) rotate(39deg)}
	60%{top:102px; margin-left:261px;transform:scale(.35) rotate(36deg)}
	100%{top:100px; margin-left:278px;transform:scale(.01) rotate(90deg)}
}
@keyframes vein5{
	0%{}
	30%{top:157px; margin-left:259px; transform:scale(.4) rotate(76deg)}
	60%{top:132px; margin-left:279px; transform:scale(.8) rotate(22deg)}
	100%{top:100px; margin-left:287px; transform:scale(.01) rotate(2deg)}
	
}
.homeslice{
	position:fixed;
	top:178px;
	left:50%;
	margin-left:145px;
	width:198px;
	height:165px;
	background-image:url("assets/homeeye.png");
	background-size:cover;
	
}
.hometext{
	transform:scale(.8);
	position:absolute;
	left:45px;
	top:59px;
	transition:transform .1s;
	transition-delay:.1s;
}
.homeslice:hover .hometext{
	transform:translate(-9px, -4.5px) scale(1);
}
.homeeyeupper{
	position:absolute;
	left:21.309px;
	top:28.895px;
	transition:transform .2s;
}
.homeslice:hover .homeeyeupper{
	transform:translatey(-36px) scale(.9, .01);
}
.homeeyelower{
	position:absolute;
	left:18.328px;
	top:62.183px;
	transition:transform .2s;
}
.homeslice:hover .homeeyelower{
	transform:translate(-5px, 27px) scale(.9, .01);
}
main{
	margin-top:360px;
	margin-bottom:36px;
	padding:18px;
	margin-left:10%;
	margin-right:10%;
	background-color:#000000;
	color:#ffffff;
	border:solid 9px #87C02C;
	font-size:18pt;
	overflow:hidden;
}
footer{
	position:fixed;
	left:75%;
	width:144px;
	background-color:#000000;
	margin-left:-81px;
	text-align:center;
	color:#ffffff;
	font-variant: small-caps;
	font-size:12pt;
	height:36px;
	line-height: 9px;
	border:solid 9px #ffffff;
	border-bottom:0px;
	bottom:0px;
}
footer a{
	color:#ffffff;
	text-decoration:none;
}
.galleryimage{
	max-width:40%;
	padding:9px;
	margin:9px;
	background-color:#000000;
	border:9px solid #87C02C;
	clear:left;
	vertical-align: top;
	transition:padding .5s, margin .5s;
}
.galleryimage:hover{
	padding:18px;
	margin:0px;
	border:9px solid #87C02C;
	cursor:pointer;
}
.imagegallery{
	margin:9px;
	padding:9px;
	background-color:#ffffff;
	border:9px;
	text-align:center;
}
main h1{
	text-align:center;
	font-variant:small-caps;
	font-family:zeitung;
	transform:rotate(5deg);
	background-color:#ffffff;
	color:#000000;
	width:80%;
	margin-bottom:72px;
	margin-left:auto;
	margin-right:auto;
}
h1 em{
	font-style:normal;
	color:#87C02C;
}
main a{
	color:#87C02C;

}
main a:hover{
	color:#FFFFFF;
	font-weight:600;
}
.aboutfloatleft{
	float:left;
	margin:18px;
	border:9px solid #ffffff;
	max-width:40%;
}
main:after{
  content: "";
  clear: both;
  display: table;
}
main hr{
	width:50%;
	height:9px;
	background-color:#87C02C;
	border:none;
	
}
.backgroundbar{
	position:fixed;
	left:0px;
	width:5%;
	background-color:#000000;
	height:100%;
	top:0px;
}
.backgroundbar:nth-of-type(2){
left:95%;
}
#popup{
	background-color:#000000;
	border:9px solid #87C02C;
	position:fixed;
	top:100%;
	width:80%;
	height:100%;
	padding:5%;
	left:10%;
	z-index:2;
	text-align:center;
	visibility:hidden;
	box-sizing:border-box;
	transition:top .5s;
}

#imagepopup{
	max-width:90%;
	max-height:90%;
	margin-top:auto;
	margin-bottom:auto;
}
#close{
	position:absolute;
	left:100%;
	margin-left:-146px;
	margin-top:-146px;
	top:144px;
	transform:scale(.5);
	transition:transform .5s, top .5s;
}
#close:hover{
	transform:scale(.8) rotate(180deg);
	cursor:pointer;
}