/* BS4 klassen */

.order-first {
   -ms-flex-order: -1;
   order: -1;
 }
 
 .order-last {
   -ms-flex-order: 13;
   order: 13;
 }


/* ADVENTSKALENDER */

.row-adventskalender  { 
   display: -webkit-box;  
   display: -moz-box;  
   display: -webkit-flex;  
   display: -ms-flex;  
   display: flex;  
   -webkit-flex-wrap: wrap;  
   -ms-flex-wrap: wrap;  
   flex-wrap: wrap;  
 } 
 
     
 
 .content-adventskalender {  
   display: -webkit-box;  
   display: -moz-box;  
   display: -webkit-flex;  
   display: -ms-flex;  
   display: flex;  
   flex-direction: column;   
 }


.calendar {
   position: relative;
}

.calendarBoxNumber {
   color: #fff;
   font-size: 25px;
   background-color: red;
   display: block;
   width: 40px;
   height: 40px;
   line-height: 40px;
   box-sizing: border-box;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   border-radius: 50% !important;
} 

.flip-card-shown,
.flip-card {
 background-color: transparent;
 perspective: 1000px;
 -webkit-perspective: 1000px; /* Chrome, Safari, Opera */
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}


.flip-card {
   cursor: pointer;
}

.flip-card-inner {
 position: relative;
 width: 100%;
 height: 100%;
 text-align: center;
 transition: transform 0.6s;
 transform-style: preserve-3d;
 box-shadow: 0 4px 8px 0 #00000033;
 border-radius: 1rem;
}

/* "1081" wegen der Breitansicht Ipad Air (hat 1080)*/  
@media (min-width: 1081px) {
.flip-card:hover .flip-card-inner {
   -webkit-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
  }
}

.flip-card-front,
.flip-card-back {
 position: absolute;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 top: 0;
 right: 0;
 border-radius: 1rem;
}


.flip-card-front img,
.flip-card-back img {
 border-radius: 1rem;
}

/* "1081" wegen der Breitansicht Ipad Air (hat 1080)*/  
@media (max-width: 1080px) {
   .flip-card .flip-card-front {
   display: none;
   }
}

.flip-card-front {
   background-size: cover;
   background-position: center;
}


.flip-card-back {
   background-color: #fff;
   color: white;
   }

/* "1081" wegen der Breitansicht Ipad Air (hat 1080)*/  
@media (min-width: 1081px) {
.flip-card-back {
   -webkit-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);
   }
}


.flip-card-back-shown{
   cursor: pointer;
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility:visible;
   top: 0;
   right: 0;
   /*opacity: 0.35;
   box-shadow: inset 0 0 50px rgba(0,0,0,.1);
   -moz-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
   -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,1);	
   */
 }


 .flip-card-back-shown .calendarBoxNumber {
   background-color: #000000;
   opacity: 0.35;
} 

/* ##########################################################*/
/* HÖHENDEFINITION DER TÜRCHEN */
/* ##########################################################*/
.calendar,
.flip-card-front,
.flip-card-back {
   min-height: 110px; 
}


.calendar .img-fluid-height {
   max-width: 90%;
   max-height: 100%;
}


@media (min-width: 768px) { 
       .calendar,
       .flip-card-front,
       .flip-card-back {
           min-height: 200px; 
       }
}


@media (min-width: 992px) { 
       .calendar,
       .flip-card-front,
       .flip-card-back {
           min-height: 300px; 
       }
}




/* Hintergrundbilder für die Türchen */

#calendarBox_1 {
   background-image: url("../images/001.jpg");
}

#calendarBox_2 {
   background-image: url("../images/002.jpg");
}

#calendarBox_3 {
   background-image: url("../images/003.jpg");
}

#calendarBox_4 {
   background-image: url("../images/004.jpg");
}

#calendarBox_5 {
   background-image: url("../images/005.jpg");
}

#calendarBox_6 {
   background-image: url("../images/006.jpg");
}

#calendarBox_7 {
   background-image: url("../images/007.jpg");
}

#calendarBox_8 {
   background-image: url("../images/008.jpg");
}

#calendarBox_9 {
   background-image: url("../images/009.jpg");
}

#calendarBox_10{
   background-image: url("../images/010.jpg");
}

#calendarBox_11{
   background-image: url("../images/011.jpg");
}

#calendarBox_12{
   background-image: url("../images/012.jpg");
}

#calendarBox_13{
   background-image: url("../images/013.jpg");
}

#calendarBox_14{
   background-image: url("../images/014.jpg");
}

#calendarBox_15{
   background-image: url("../images/015.jpg");
}

#calendarBox_16{
   background-image: url("../images/016.jpg");
}

#calendarBox_17{
   background-image: url("../images/017.jpg");
}

#calendarBox_18{
   background-image: url("../images/018.jpg");
}

#calendarBox_19{
   background-image: url("../images/019.jpg");
}

#calendarBox_20{
   background-image: url("../images/020.jpg");
}

#calendarBox_21{
   background-image: url("../images/021.jpg");
}

#calendarBox_22{
   background-image: url("../images/022.jpg");
}

#calendarBox_23{
   background-image: url("../images/023.jpg");
}

#calendarBox_24{
   background-image: url("../images/024.jpg");
}