/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 02.05.2015, 18:15:04
    Author     : Joel
*/

* { box-sizing:border-box; }
html, body, div { padding:0; margin:0; }
a { text-decoration:none; color:#999; }
a:hover { color:#333; }

/*
* Startpage and Menupage styles
*/
body { width:100%; height:100%; font-family:'Shadows Into Light Two', cursive; font-size: 16px; overflow-x:hidden; }
.home { width:100%; height:100%; background:#000; }
.home .dorfkultur { position:absolute; left:-200px; top:280px; -webkit-transform:rotate(-90deg);transform:rotate(-90deg); color:#FFF; font-size:62px; }
.home .doorcontainer { width:500px; height:665px; margin:0 auto; position:relative; }
.home .doorcontainer .door { -webkit-perspective:900; perspective:900; }
.home .doorcontainer .door img { -webkit-transition:all 1s ease; transition:all 1s ease; }
.home .doorcontainer .door:target img { -webkit-transform:rotateY(-90deg); -webkit-transform-origin:0% 0%; transform:rotateY(-90deg); transform-origin:0% 0% }
.ballroom { width:100%; height:100%; background:#000; }
.ballroom .menuimage { position:absolute; left:calc(50% - 640px); top:calc(50% - 360px); }
.ballroom-mobile { display: none; }

/* 
* Category-specific styles
*/
.leser .maincontainer { background:#6CBE50; color:#FFF; }
.leser .menu a:hover { color:#6CBE50; }
.theater .maincontainer { background:#733054; color:#FFF; }
.theater .menu a:hover { color:#733054; }
.taenzer .maincontainer { background:#C73090; color:#FFF; }
.taenzer .menu a:hover { color:#C73090; }
.gitarist .maincontainer { background:#73D1F6; color:#FFF; }
.gitarist .menu a:hover { color:#73D1F6; }
.trompeter .maincontainer { background:#F37436; color:#FFF; }
.trompeter .menu a:hover { color:#F37436; }
.maler .maincontainer { background:#0F64AE; color:#FFF; }
.maler .menu a:hover { color:#0F64AE; }
.saenger .maincontainer { background:#FFF578; color:#000; }
.saenger .menu a:hover { color:#000; }
.damen .maincontainer { background:#CA0C0E; color:#FFF; }
.damen .menu a:hover { color:#CA0C0E; }

/*
* Navigation styles
*/
.menu { float:right; margin-right:calc(100% - 900px); font-size:2em; }
.menuitems { list-style-type:none; padding: 0; }
.menuitems:after { clear:both; content:""; line-height:0; display:table; }
.menuitems .item { float:left; padding:1em; }

/*
* Layout styles
*/
.header { width:auto; height:250px; margin:1em 2em; }
.logo { float:left; }
.quote { float:none; clear:both; }

.main { width:900px; margin:0 auto; }
.content { font-family:"Curier", sans-serif; }

/*
* Image styles
*/
.imgcontainer:after { clear:both; float:none; content:""; line-height:0; display:table; }
.imgcontainer .item { width:31%; height:200px; float:left; margin:1% 3.5% 1% 0; overflow: hidden; }
.imgcontainer .item:nth-child(3n) { margin-right:0; }
.imgcontainer .item img { max-width: 100%; width:auto; height:auto; }

/*
* Mobile styles
*/
@media screen and (max-width: 1120px) {
	
	/*
	* Startpage and Menupage styles
	*/
	.ballroom .menuimage { display: none; }
	.ballroom-mobile { display: block; }
	.ballroom-mobile .menuitems .item { clear: both; float: none; padding: 0.3em; text-align: left; width: 100%; }
	.ballroom-mobile .menuitems .item a { display: block; border-radius: 5px; font-size: 20px; padding: 15px; }
	.ballroom-mobile .menuitems .leser.item a { background:#6CBE50; color:#FFF; }
	.ballroom-mobile .menuitems .leser.item a:hover { background:#6CBE50; }
	.ballroom-mobile .menuitems .theater.item a { background:#733054; color:#FFF; }
	.ballroom-mobile .menuitems .theater.item a:hover { background:#733054; }
	.ballroom-mobile .menuitems .taenzer.item a { background:#C73090; color:#FFF; }
	.ballroom-mobile .menuitems .taenzer.item a:hover { background:#C73090; }
	.ballroom-mobile .menuitems .gitarist.item a { background:#73D1F6; color:#FFF; }
	.ballroom-mobile .menuitems .gitarist.item a:hover { background:#73D1F6; }
	.ballroom-mobile .menuitems .trompeter.item a { background:#F37436; color:#FFF; }
	.ballroom-mobile .menuitems .trompeter.item a:hover { background:#F37436; }
	.ballroom-mobile .menuitems .maler.item a { background:#0F64AE; color:#FFF; }
	.ballroom-mobile .menuitems .maler.item a:hover { background:#0F64AE; }
	.ballroom-mobile .menuitems .saenger.item a { background:#FFF578; color:#000; }
	.ballroom-mobile .menuitems .saenger.item a:hover { background:#FFF578; }
	.ballroom-mobile .menuitems .damen.item a { background:#CA0C0E; color:#FFF; }
	.ballroom-mobile .menuitems .damen.item a:hover { background:#CA0C0E; }
	
	/*
	* Navigation styles
	*/
	.menu { background: #FFF; margin-right: 0; width: 50%; }
	.menuitems .item { clear: both; float: none; padding: 0; text-align: right; }
	.menuitems .item a { font-size: 16px; }
	
	/*
	* Layout styles
	*/
	.header { height: 190px; }
	.logo { width: 50%; }
	.logo img { max-width: 100%; height: auto; }
	.main { width: 100%; padding: 1em; }
	
	/*
	* Image styles
	*/
	.imgcontainer .item { width:48%; height:auto; max-height: 300px; margin:1% 2% 1% 0; }
	.imgcontainer .item:nth-child(3n) { margin-right:2%; }
	.imgcontainer .item:nth-child(2n) { margin-right:0; }
	.imgcontainer .item:nth-child(2n + 1) { clear: left; }
}