/* GLOBAL FONTS && FRAMEWORK FIX */
/* https://css-tricks.com/considerations-styling-modal/ */


@import url('../../../../global/ms_fonts.css');

.btn.btn-default.btn-block{display:none;}

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

#thisMS{
  background-color:#a0bec5;
	background-color: #1A3248;
  background-position:center top;
  background-repeat: no-repeat;
  background-size:contain;  
  background-image:url("../../../images/microsite_images/Adventskalender2024/bg.webp");
  background-repeat: no-repeat;
}

#thisMS .bg_glance1{position:absolute;z-index:1;animation: shine linear 7s; animation-iteration-count: infinite; transform-origin: 50% 50%;-webkit-mix-blend-mode: lighten;mix-blend-mode: lighten;}
#thisMS .bg_glance2{position:absolute;z-index:1;animation: shine linear 5s; animation-iteration-count: infinite; transform-origin: 50% 50%;-webkit-mix-blend-mode: lighten;mix-blend-mode: lighten;}
#thisMS .bg_glance3{position:absolute;z-index:1;animation: shine linear 3s; animation-iteration-count: infinite; transform-origin: 50% 50%;-webkit-mix-blend-mode: lighten;mix-blend-mode: lighten;}

 #thisMS .beendetText{color:#FF0000;font-size:200%;text-align:center;font-weight:bold;position:absolute;z-index:5;padding:20px;border:5px solid red;
	left:20%;top:10%;
  background: rgba(0, 0, 0); /* Fallback */
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0px 0px 10px 5px rgba(255,255,255,1);
  -moz-box-shadow: 0px 0px 10px 5px rgba(255,255,255,1);
  box-shadow: 0px 0px 10px 5px rgba(255,255,255,1);
  text-shadow: 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1), 0px 0px 5px rgba(255, 255, 255, 1);
  transform: rotate(343deg) scale(1) skew(1deg) translate(0px);
  -webkit-transform: rotate(343deg) scale(1) skew(1deg) translate(0px);
  -moz-transform: rotate(343deg) scale(1) skew(1deg) translate(0px);
  -o-transform: rotate(343deg) scale(1) skew(1deg) translate(0px);
  -ms-transform: rotate(343deg) scale(1) skew(1deg) translate(0px);
}

#thisMS .sent_text p{color:green;text-align:center;font-size:120%;}
#thisMS .today-pulse{animation: pulsate 1.2s ease-out;animation-iteration-count: infinite;}  

#thisMS line{border:solid grey 1px}

/* Modal */
#thisMS .layer-fade{position:absolute;z-index:9;left:0;right:0;bottom:0;top:0;background: rgba(255, 255, 255, .6);display:none;}
#thisMS .layer-content{margin:30px;}
#thisMS .modal-content{font-family:"Roboto_Medium";border-radius:0;border:none;padding:2em;}
#thisMS .modal-content p.h2{font-family:"Roboto_Condensed_Bold", "opensans_bold";color:#fff;text-align:center;font-size:180%;margin:0;padding:0;/*text-shadow: 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1), 0px 0px 5px rgba(0, 36, 123, 1);*/color:#000;}
#thisMS .modal-content p.h3{font-family:"Roboto_Light";font-weight:normal;margin:0;padding:0;text-align:center;}
#thisMS .input-vvimg-code input{height:70px;font-size:150%;}
#thisMS .input-vvimg-code{padding-right:18px;}
#thisMS .vvimg img{height:70px;border-radius:.5em;margin-top:3px;width:100%;margin-left:5px;}
#thisMS .form-values input{margin:.3em;}
#thisMS .form-values p.h2{padding:.5em 0;}
#thisMS p.price-title{padding-bottom:.5em !important;}

#thisMS .form-parent{background:#eee;padding-bottom:1.5em;}
#thisMS .form-parent a, #thisMS .price-text a{text-decoration:underline !important;}
#thisMS .form-parent a:hover, #thisMS .price-text a:hover{text-decoration:none !important;}

#thisMS .price-background{display: block;background-image: url(../../../images/microsite_images/Adventskalender2023/prizes/background.webp);background-repeat: no-repeat;background-position: center;background-size:contain;}

/* sponsoren */
#thisMS .area-sponsoren p.h2{font-family:"Roboto_Condensed_Bold", "opensans_bold";text-align: center;}
#thisMS .sponsoren{display:table;border-collapse:separate;border-spacing:5px;table-layout: fixed;text-align:center;width:100%;padding-top:2em}
#thisMS .sponsor{display:table-cell;vertical-align: middle;height:100%;padding:0 1em;}
#thisMS .sponsor img{max-width:100%;max-height:100px;}
/*#thisMS .sponsorbreak{display:table-row;}*/


/* Reminder */
#thisMS .reminder-pos{background:#fff;padding-bottom:20px;position: relative;z-index:2;}
#thisMS .reminder-form{}
#thisMS .reminder-form p.h2{font-size:135%;background:#00247c;font-family:"Roboto_Condensed_Bold", "opensans_bold";color:#fff;color:#FFF;padding:.5em 0;margin:0 0 0 0;text-align: center;}
#thisMS .reminder-form p.h2 .glyphicon{margin-right:1em;}
#thisMS .reminder-form p.h3{font-family:"Roboto_Condensed_Bold", "opensans_bold";text-transform: none;padding:1em 0;}
#thisMS .sent_text p{font-family:"Roboto_Medium";font-size:150%;text-align: center;color:#031849}
#thisMS .sent_text span{font-size:120%;color:#000;display:block;color:#00247B;font-family:"Roboto_Bold";}
#thisMS .sent_text_block{background:rgba(255,255,255,1.00);border-radius:5px;padding:.5em;margin-top:.5em;}
#thisMS .reminder-form .btn-primary{background-color:#00247c}
#thisMS .calendar-doors{min-height:1500px;padding-right:30px;}


/* door ani */
/* 1440 - (10*2) - (6*10) / 7 = 194.29px Breite  */ 
#thisMS .backDoor{background-color: rgba(0,16,34,0.70);position:relative;z-index:1;width:150px;height:101px;margin: 0 auto;margin-top:50px;border:1px solid #eee;background-position: center;background-repeat: no-repeat;background-size:80%;}
#thisMS .door{border:1px solid #eee;background-color: rgba(26,50,72,0.75);position:absolute;z-index:3;top:0px;left:0px;width:150px;height:101px;transform-origin: left;transition: all 0.5s ease-in-out;color:#fff;}

#thisMS .door13 .door, #thisMS .door2 .door, #thisMS .door4 .door, #thisMS .door6 .door, #thisMS .door11 .door, #thisMS .door17 .door, #thisMS .door22 .door, #thisMS .door20 .door, #thisMS .door15 .door, #thisMS .door9 .door, #thisMS .door25 .door, #thisMS .door29 .door, #thisMS .door27 .door, #thisMS .door31 .door{background-color: rgba(163,191,193,0.75);}

#thisMS .door > span{font-size:350%;color:#fff;display:block;text-align: center;text-decoration: none;padding-top:15px;padding-bottom:30px;display:block;caret-color: transparent;}
#thisMS .backDoor.open, #thisMS .door .open, #thisMS .open .door, #thisMS .today .door{cursor: pointer;}
#thisMS .today .door{z-index:8;}/* um shuffle zu überschreiben damit Tür im Vordergrun ist beim Öffnen */
#thisMS .backDoor.open .door{transform: perspective(2500px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-85deg);display:none;}
#thisMS .animation_doorOpen{transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);}
#thisMS .backDoor a{position: absolute;top:0;bottom:0;left:0;right:0;}


@media (min-width:600px){	
		
  /* Modal */  
  #thisMS .modal-content{background:none;}
  #thisMS .modal-content:after{content:"";background-image: url(../../../images/microsite_images/Adventskalender2018/background.jpg);opacity:.99;position:absolute;z-index:-1;background:#fff;top:0;left:0;bottom:0;right:0;}
  #thisMS .calendar-doors{min-height:1500px;}
  
}
@media (min-width:980px){	 
	
	#thisMS .calendar-doors{min-height:1100px;}  
	
	#thisMS .reminder-form {}
	#thisMS .area-sponsoren{}  
  
  
}

@media (min-width:1680px){
	
	#thisMS .reminder-pos{border-radius:5px;-webkit-box-shadow: 5px 5px 15px 5px #000000; box-shadow: 5px 5px 15px 5px #000000;}
	
  #thisMS .calendar-doors{min-height:1800px;}
  
	#thisMS .reminder-form {background-color:#fff}
	/*#thisMS .area-sponsoren{margin-top:20px;}*/
	
  #thisMS .backDoor{position:absolute;width:194px;height:130px;}
  #thisMS .door{width:194px;height:130px;}
	#thisMS .door > span{padding-top:35px;padding-bottom:30px;}
	
  #thisMS .door2{margin:280px 0 0 10px}
  #thisMS .door1{margin:420px 0 0 10px}
  #thisMS .door3{margin:560px 0 0 10px}
  
  #thisMS .door4{margin:220px 0 0 214px}
  #thisMS .door5{margin:360px 0 0 214px}
  #thisMS .door6{margin:500px 0 0 214px}
  #thisMS .door7{margin:640px 0 0 214px}
    
  #thisMS .door8{margin:160px 0 0 414px}
  #thisMS .door9{margin:300px 0 0 414px}
  #thisMS .door24{margin:440px 0 0 414px;width:602px}
  #thisMS .door24 .door{width:602px}   /* andere Breite */
  #thisMS .door10{margin:580px 0 0 414px}
  #thisMS .door11{margin:720px 0 0 414px}
  
  #thisMS .door14{margin:160px 0 0 618px}
  #thisMS .door15{margin:300px 0 0 618px}
  
  #thisMS .door16{margin:580px 0 0 618px}
  #thisMS .door17{margin:720px 0 0 618px}
  
  #thisMS .door19{margin:160px 0 0 822px}
  #thisMS .door20{margin:300px 0 0 822px}
  
  #thisMS .door21{margin:580px 0 0 822px}
  #thisMS .door22{margin:720px 0 0 822px}
  
  #thisMS .door25{margin:220px 0 0 1026px}
  #thisMS .door26{margin:360px 0 0 1026px}  
  #thisMS .door27{margin:500px 0 0 1026px}
  #thisMS .door28{margin:640px 0 0 1026px}
  
  #thisMS .door29{margin:280px 0 0 1230px}
  #thisMS .door30{margin:420px 0 0 1230px}  
  #thisMS .door31{margin:560px 0 0 1230px}
  
  /* horizontal versetzt: */
  #thisMS .door13{margin:20px 0 0 511px}
  #thisMS .door23{margin:20px 0 0 720px}
  #thisMS .door12{margin:860px 0 0 511px}
  #thisMS .door18{margin:860px 0 0 720px}  
}

@keyframes shine{
  0% {opacity:0;}
  50% {opacity:0.5;}
  100% {opacity:0;}
}