/* Adventskalender */
@-webkit-keyframes shake{
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
20%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
40%{-webkit-transform:rotate(20deg);transform:rotate(20deg);}
60%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}
80%{-webkit-transform:rotate(10deg);transform:rotate(10deg);}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes shake{
0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
20%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
40%{-webkit-transform:rotate(20deg);transform:rotate(20deg);}
60%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}
80%{-webkit-transform:rotate(10deg);transform:rotate(10deg);}
100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
h2.weihnacht{margin-top:50px;}
#advent{width:100%;height:auto;min-height:400px;margin:20px auto;border-radius:8px;border:1px solid #ccc;text-align:center;}
#advent{padding:0;background-position:left top;background-size:150%;}
.advent_no{width:100%;height:auto;margin:10px auto;border-radius:8px;border:0 solid #ccc;text-align:center;}
.advent_no img{max-width:100%;width:auto;height:auto;}
@media screen and (max-width:490px){
div.door{margin:0;}
#advent_no{min-height:70px;}
}
@media screen and (min-width:491px){
#advent{max-width:645px;min-height:600px;}
div.door{margin:5px 10px;}
}
@media screen and (min-width:700px){
#advent{background-position:center top;background-size:100%;}
}
.bild{border-radius:8px;}
.box, .present{width:100%;height:100%;border-bottom-right-radius:15px;border-top-right-radius:30px;}
div.door{display:inline-block;width:6em;height:6em;-webkit-perspective:360px;perspective:360px;text-align:center;}

.box{position:relative;text-align:center;cursor:pointer;background:transparent;border:1px dotted #ccc;
-webkit-transform-style:preserve-3d;transform-style:preserve-3d;
-webkit-transform-origin:0;transform-origin:0;
-webkit-perspective:360px;perspective:360px;
-webkit-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}


div.door:hover .box{background:var(--basic-color2);filter:alpha(opacity=80);opacity:.80;
-webkit-transform:rotateY(-97deg);transform:rotateY(-97deg);
-webkit-perspective-origin:0;perspective-origin:0;
-webkit-transition:all .8s ease-in;transition:all .8s ease-in;margin:0;}
div.door.active:hover .box{background:#900;}

.box em{position:absolute;width:66px;height:66px;top:50%;left:50%;margin:0;padding:.5em;font-size:1.4em;line-height:3em;font-style:normal;font-weight:700;color:#c5c9c7;border-radius:50%;
-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:transparent;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}
div.door:hover .box em{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--basic-color2);color:#fff;}
div.door.active:hover .box em{background:#c00;color:#fff;}

.present{position:absolute;top:0;left:0;z-index:-1;margin:0;}

.leer{position:relative;width:60px;height:60px;background:#900;margin:20px auto 0 auto;font-size:2em;font-weight:bold;text-align:center;line-height:1.75em;color:#f00;border-radius:50%;display:none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;}
.leer:before{content:"";width:10px;height:7px;position:absolute;top:-11px;left:50%;margin-left:-7px;border-top-left-radius:50%;border-top-right-radius:50%;border:3px solid #000;z-index:1;}
div.door:hover .leer{display:inline-block;-webkit-animation:shake 1s;animation:shake 1s;-webkit-transform-origin:50% 0;transform-origin:50% 0;transition:5.9s;}

.advent a{cursor:pointer;}
.advent{position:relative;width:80px;height:80px;margin:3px 0 0 -2px;font-size:2.5em;font-weight:bold;text-align:center;line-height:1.75em;color:#fff;border-radius:50%;display:none;background:#333;}
.advent img{display:inline-table;overflow:hidden;margin:0;width:80px;height:80px;border-radius:50%;}
div.door:hover .advent{display:inline-block;}
div.door.active:hover .present{background:#333;filter:alpha(opacity=100);opacity:1.00;}
div.door:hover .present{background:#666;filter:alpha(opacity=50);opacity:0.50;transition:5.9s;}

/******************************/