/* Startseite */

* {outline:1px solid rgba(255,255,255,0);}

/* ANIMATIONEN ////////////////////////////////////////////////////////////// */
@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}
/*
@keyframes colorTransparency {
    from {background:rgba(190,212,57,1);}
    to {background:rgba(190,212,57,0.85);}
}
*/

/* TAGS ///////////////////////////////////////////////////////////////////// */


/* KLASSEN ////////////////////////////////////////////////////////////////// */
.mod_article {position:absolute;top:0;left:0;margin:0;width:100%;height:100%;}
.ce_hyperlink.left {position:absolute;top:0;left:0;width:50%;height:100%;background:url('../img/cover-sehen.jpg') no-repeat center;background-size:cover;/*opacity:0;animation:fadeIn 1s ease-in 0s 1 normal forwards running;*/}
.ce_hyperlink.right {position:absolute;top:0;left:50%;width:50%;height:100%;background:url('../img/cover-hoeren.jpg') no-repeat center;background-size:cover;box-shadow:0 0 5px 5px rgba(0,0,0,0.25);/*opacity:0;animation:fadeIn 1s ease-in 0.5s 1 normal forwards running;*/}
.ce_hyperlink .cover {position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:rgba(190,212,57,0.9);transition:background 1s ease-in;}
.ce_hyperlink.left figure {position:absolute;z-index:10;top:calc(50% - 25px);left:calc(60% - 32px);width:64px;height:50px;}
.ce_hyperlink.right figure {position:absolute;z-index:10;top:calc(50% - 25px);right:calc(60% - 32px);width:64px;height:50px;}
.ce_hyperlink.left figure {opacity:0;animation:fadeIn 1s ease-in 0.5s 1 normal forwards running;}
.ce_hyperlink.right figure {opacity:0;animation:fadeIn 1s ease-in 1.5s 1 normal forwards running;}
/*.ce_hyperlink.left .cover {background:rgba(190,212,57,1);animation-name:colorTransparency;animation-duration:2s;animation-delay:1s;animation-fill-mode:forwards;}
.ce_hyperlink.right .cover {background:rgba(190,212,57,1);animation-name:colorTransparency;animation-duration:2s;animation-delay:2s;animation-fill-mode:forwards;}*/
.ce_hyperlink figure:hover + .cover {background:rgba(190,212,57,0);}
.ce_hyperlink a {display:block;border:0;}
.ce_hyperlink a img {opacity:1;transition:opacity 1s ease-in;}
/*.ce_hyperlink a:hover img {opacity:0.25;}*/
.ce_hyperlink figcaption {font-size:1em;font-weight:400;/*text-transform:uppercase;*/letter-spacing:3px;text-align:center;padding:0.5em 0 0 0;color:#000;opacity:1;transition:opacity 1s ease-in;}
/*.ce_hyperlink a:hover figcaption {color:#000;opacity:0.25;}*/

@media screen and (max-width:960px) {
	.ce_hyperlink:hover figure + .cover {background:rgba(190,212,57,0);}
}
@media screen and (min-width:40em) {
	.mod_article {margin:0;}
	.ce_hyperlink.left figure {top:calc(50% - 50px);left:calc(60% - 64px);width:128px;height:100px;}
	.ce_hyperlink.right figure {top:calc(50% - 50px);right:calc(60% - 64px);width:128px;height:100px;}
	.ce_hyperlink figure:hover + .cover {background:rgba(190,212,57,0);}
}
@media screen and (min-width:56em) {
	.mod_article {margin:0;}
	.ce_hyperlink.left figure {top:calc(50% - 100px);left:calc(60% - 128px);width:256px;height:200px;}
	.ce_hyperlink.right figure {top:calc(50% - 100px);right:calc(60% - 128px);width:256px;height:200px;}
	.ce_hyperlink figure:hover + .cover {background:rgba(190,212,57,0);}
	.ce_hyperlink figcaption {font-size:1.25em;font-weight:400;text-align:center;padding:0.5em 0 0 0;}
	.ce_hyperlink.small figure {display:none;}
}



/* HEADER /////////////////////////////////////////////////////////////////// */
.logo {right:50%;width:128px;}
@media screen and (min-width:56em) {
	.logo {top:3em;width:178px;}
}

.menubutton {position:fixed;top:75%;left:50%;}
.menubutton > div {background:#000;border-radius:0 16px 16px 0;}
.menubutton a {color:#fff;}

.mainnav ul {display:none;}
.mainnav ul {display:none;position:fixed;z-index:3000;top:0;left:0;width:50%;height:100%;background:#000;}
.mainnav ul li {display:block;text-align:left;margin:0.75em 0 0.75em 20%;}
.mainnav ul li:first-child {margin-top:25%;}
.mainnav ul li a {color:#bed439;}
.mainnav ul li a:hover {color:#fff;}
#top:target .mainnav ul {display:block;}
#top:target .menubutton .open {display:none;}
#top:target .menubutton .close {display:block;}
@media screen and (max-width:960px) {
	.menubutton {display:block;}
}
@media screen and (min-width: 960px) {
	.menubutton {display:block;}
	.mainnav ul li {display:block;}
	.mainnav ul li:before {content:'';margin:0;}
	.mainnav ul li.first:before {content:'';margin:0;}
}

/* MAIN ///////////////////////////////////////////////////////////////////// */



/* FOOTER /////////////////////////////////////////////////////////////////// */
.footernav {position:absolute;bottom:1em;right:5%;text-align:right;}
.footernav ul {text-align:right;}