/* 
CSS nach 
Demo: Tutorial für einen digitalen Adventskalender | webkrauts.de
http://webkrauts.de/artikel/2012/tutorial-digitaler-adventskalender
*/
@font-face {
 font-family:Roboto;
 src:local('Helvetica'),
 local('Droid Sans'),
 local('Arial')
}
/* ----- Basis-Layout / kleiner Bildschirm ----- */

body { color: #000; background:linear-gradient(to right, #065143, #054C40); font: 18px/25px, sans-serif; margin: 0; padding: 0; }
#wrapper { width: 90%; padding: 5%; background: #FFF; }

p { margin: 0 0 5px 0; color: #000; }
h1, h2 { font-family: sans-serif; font-weight: normal; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }

li { padding: 0 0 20px 0; margin-bottom: 30px; }

a { color: #CD0000; text-decoration: none; }
#advent2020 a { padding: 10px; display: block; }
#advent2020 a:hover, #advent2020 a:focus { background-color: #FAE8E8; }
#advent2020 h2 { text-decoration: underline; } /* damit die Überschriften wie Links aussehen, auch wenn die ganze Fläche verlinkt ist */ 
#advent2020 a:hover h2, #advent2020 a:focus h2 { text-decoration: none; }

.left, .right, .small-hide { display: none; }

.img-headline {
width:100%;
display:block;
}
/* ----- Layout, sobald das 3x8-Bild passt | Breite: 3x 250px + 4x 1px border + 2x 20px padding ----- */

    #wrapper { width: 100%; max-width:900px; padding: 20px 0; min-height:850px;margin: 0 auto; background: #FFF;background: url('Adventskalender_2020-1044.jpg') no-repeat; background-position: bottom; background-size:contain}
    p.small-hide { display: block; }
    span.small-hide { display: inline; }
    .teaser { text-indent: -9999px; }

//    #advent2020 { position: relative; padding: 0; margin: 0 auto 24px auto; width: 753px; height: 1000px;  }
    #advent2020 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width:360px;
    height: 600px;
    align-content:flex-start;
    margin:0 auto;
    padding-left:0;
    }

//    #advent2020 li { position: absolute; padding: 0; margin: 0; list-style: none; width: 100px; height: 100px; overflow: hidden; }
    #advent2020 li { padding: 0; margin-right: 10px; margin-bottom:10px;list-style: none; width: 75px; height: 75px; overflow: hidden; }

//    #advent2020 li a { position: absolute; padding: 10px; width: 80px; height: 80px; }
    #advent2020 li a {
    position:relative;
    }
    #advent2020 p, #advent2020 h2 { margin: auto;font-size: 20px; line-height: 24px; margin: 0 0 8px 0; color: #FFF; }
    #advent2020 .cal-content { font-size: 12px; margin:10px 0 0 -15px; line-height: 18px; color:#fff; display:none }
    #advent2020 a:hover, #advent2020 a:focus{ background-color: #054c40; display:block; width:75px; height:75px;}
    #advent2020 .active  a:hover .cal-content, #advent2020 a:focus .cal-content {display:block} 
    
//    #advent2020 span { position: absolute; top: 25%; left: 15%; font-size: 30px; width: 50px; height: 50px; text-align: center; color: #FFF; display: inline-block; }

//    #advent2020 .door { position: absolute; top: 0; width: 80px; height: 80px; background: rgba(0,0,0,0.7); display: block; }
    #advent2020 .door  { display:flex; top: 0; left:0;align-items: center;justify-content: center;position:absolute; height:75px;width:75px; background: rgba(0,0,0,0.7)        }

    #advent2020 .active a:hover .door, #advent2020 .active a:focus .door { top: -115px; }

    #advent2020 .active a .door {    
        -ms-transition: top 1s;
        -o-transition: top 1s;
        -webkit-transition: top 1s;
        -moz-transition: top 1s;
        transition: top 1s; 
    }

    #advent2020 .active a:hover .door  { 
        -ms-transition: top 1.5s;
        -o-transition: top 1.5s;
        -webkit-transition: top 1.5s;
        -moz-transition: top 1.5s;
        transition: top 1.5s;   
    }

    #advent16 { top: 20px; left: 20px; }
    #advent23 { top: 20px; left: 110px; }
    #advent7 { top: 20px; left: 200px; }
    #advent20 { top: 20px; left: 290px; }

    #advent13 { top: 110px; left: 20px; }
    #advent2 { top: 110px; left: 110px; }
    #advent19 { top: 110px; left: 200px; }
    #advent24 { top: 110px; left: 290px; }
    
    #advent9 { top: 200px; left: 20px; }
    #advent5 { top: 200px; left: 110px; }
    #advent14 { top: 200px; left: 200px; }
    #advent3 { top: 200px; left: 290px; }
    
    #advent12 { top: 290px; left: 20px; }
    #advent4 { top: 290px; left: 110px; }
    #advent17 { top: 290px; left: 200px; }
    #advent22 { top: 290px; left: 290px; }

    #advent18 { top: 380px; left: 20px; }
    #advent8 { top: 380px; left: 110px; }
    #advent6 { top: 380px; left: 200px; }
    #advent10 { top: 380px; left: 290px; }

    #advent21 { top: 470px; left: 20px; }
    #advent1 { top: 470px; left: 110px; }
    #advent15 { top: 470px; left: 200px; }
    #advent11 { top: 470px; left: 290px; }

/* ----- Hier kommst du noch nicht rein, die Tür ist zu !! ----- */

.inactive a:hover .door, .inactive a:active .door {
  animation: shake 1s ease-in-out;
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes shake {
16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }
  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

}
/* ----- Layout, sobald das 4x6-Bild passt | Breite: 4x 250px + 5x 1px border + 2x 20px padding ----- */
@media only screen and (min-width : 768px) {
    //#wrapper {max-width:1800px; width:100%; min-height:800px; background: url('Adventskalender_2020_1600x900.jpg') no-repeat center;background-size:contain;}
    #wrapper {max-width:1800px; width:100%; min-height:800px; background: url('Adventskalender_ohne_2020_1600x900.jpg') no-repeat center;background-size:contain;}
    #wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;}

    .img-headline {
    display:none;
    }
    #advent2020 { width: 720px; height: 450px;  }
//    #advent2020 li { width: 110px; height: 110px;  }
    #advent2020 span { top: 30%; left: 25%; font-size: 30px; }

    #advent2020 a:hover, #advent2020 a:focus {width:80px; height:80px;}
    #advent2020 .door {width:80px; height:80px; background: rgba(0,0,0,0.7) }
    #advent2020 li { width: 80px; height: 80px;  }
}
@media only screen and (min-width : 1000px) {
    #advent2020 { width: 960px; height: 420px;  }


    #advent2020 li { width: 110px; height: 110px;  }
    #advent2020 span { top: 30%; left: 25%; font-size: 40px; }
    #advent2020 a:hover, #advent2020 a:focus {width:110px; height:110px;}
    #advent2020 .door {width:110px; height:110px; background: rgba(0,0,0,0.7) }
    #advent2020 .cal-content {font-size:18px;}
    #advent16 { top: 400px; left: 60px; }
    #advent23 { top: 400px; left: 180px; }
    #advent7 { top: 400px; left: 300px; }
    #advent20 { top: 400px; left: 420px; }
    #advent12 { top: 400px; left: 540px; }
    #advent4 { top: 400px; left: 660px; }
    #advent17 { top: 400px; left: 780px; }
    #advent22 { top: 400px; left: 900px; }

    #advent13 { top: 520px; left: 60px; }
    #advent2 { top: 520px; left: 180px; }
    #advent19 { top: 520px; left: 300px; }
    #advent24 { top: 520px; left: 420px; }
    #advent18 { top: 520px; left: 540px; }
    #advent8 { top: 520px; left: 660px; }
    #advent6 { top: 520px; left: 780px; }
    #advent10 { top: 520px; left: 900px; }

    #advent9 { top: 640px; left: 60px; }
    #advent5 { top: 640px; left: 180px; }
    #advent14 { top: 640px; left: 300px; }
    #advent3 { top: 640px; left: 420px; }
    #advent21 { top: 640px; left: 540px; }
    #advent1 { top: 640px; left: 660px; }
    #advent15 { top: 640px; left: 780px; }
    #advent11 { top: 640px; left: 900px; }
}