/** XMAS **/

.merryXmas img{
	max-width: 240px;
}

@keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }
  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }
  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}
@-moz-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }
  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }
  100% {
    background-position: 400px 1000px, 200px 400px, 100px 300px;
  }
}
@-webkit-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }
  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }
  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}
@-ms-keyframes snow {
  0% {
    background-position: 0px 0px, 0px 0px, 0px 0px;
  }
  50% {
    background-position: 500px 500px, 100px 200px, -100px 150px;
  }
  100% {
    background-position: 500px 1000px, 200px 400px, -100px 300px;
  }
}
.frame {
  border: solid 0px rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  width: 100%;
 
  perspective: 21em;
  overflow: hidden;
  &.frame--preserve-3d {
    transform-style: preserve-3d
  }
  overflow: hidden;
  cursor: pointer;
}




.modal-body {
  position: relative;
  padding: 15px;
  
  margin: 0 5% 140px 5%;
}
.door {
  height: inherit;
  /*background: #dc1303;*/
  background: #0e2d45;
 
  transition: 1.6s;
  opacity: 1;
}
/**
 * The "shine" element
 */
.door:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 200%;
  height: 200%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0.0) 100%);
}
/* Hover state - trigger effect */
.door:hover:after {
  opacity: 1;
  top: -30%;
  left: -30%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}
/* Active state */
.door:active:after {
  opacity: 0;
}
#topxmas .open {
  transform-origin: 0 0 /*whatever y value you wish*/ ;
  transform: rotateY(55deg);
}
.NumberXmas {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 24px;
  color: #fff;
}
.modal-xmas {
  background: /*linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.0)),*/ url("../xmas/popup-bg.jpg");
  background-repeat: repeat, repeat;
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-size: auto auto, auto auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  min-height: 450px;
width: 760px;
  max-width: 90vw;
  
}
.modal-xmas h3 {
  color: #5B616A;
}
.xmascontainer .col-md-2, .xmascontainer .col-xs-3 {
  padding-right: 5px;
  padding-left: 5px;
  margin: 0.5%;
}
p.zitat {
  color: #000;
  font-size: 12px;
}
.modal-header {
  padding: 15px;
  border-bottom: 0px solid #e5e5e5; 
}
.modal-footer {
  display: none;
}
#Start #top .modal-body p {
  color: #666;
}
.ButtonClose:hover::after {
  transform: rotate(135deg);
  font-size: 12px;
  cursor: pointer;
}
.ButtonClose::after {
  height: 2px;
  left: 0;
  margin-top: -1px;
  top: 50%;
  width: 100%;
}
#topxmas .ButtonClose::before, #topxmas .ButtonClose::after {
  background-color: #fff;
}
#topxmas .col-md-2 {
  width: 15.66666667%;
}
.closedoor {
  height: inherit;
  background: #ad9961;
  
/*background: #819EA5;*/

  transition: 1.6s;
  opacity: 1;
  border: solid 0px rgba(255, 255, 255, 0.8);
  border-radius: 5px;

  text-align: center;
  font-size: 24px;
  color: #fff;

}
#topxmas .dooropen {
  padding: 0px;
}

@media screen and (max-width: 1024px){
	.bg-overlay-start-xmas {
  background: url("../xmas/xmas-bg4-ipad.jpg");
  background-repeat: repeat, repeat;
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-size: auto auto, auto auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  color: #333;
  height: 100vh;
  padding-top: 50px;
}
.modal-xmas {
  background: /*linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.0)),*/ url("../xmas/popup-bg.jpg");
  background-size: auto;
  background-position: right bottom;
  }
}


@media screen and (max-width: 768px) {
  .frame {
    border: solid 0px rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    width: 100%;
    height: 60px;
    perspective: 21em;
    overflow: hidden;
    &.frame--preserve-3d {
      transform-style: preserve-3d
    }
    overflow: hidden;
    cursor: pointer;
  }
  .closedoor {
    height: inherit;
    background: #0e2d45;
  transition: 1.6s;
  opacity: 0.6;
    transition: 1.6s;
    opacity: 0.8;
    border: solid 0px rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    line-height: 60px;
  }
  #topxmas .dooropen {
    padding: 0px;
    height: 60px !important;
  }
}
@media screen and (max-width: 420px) {
.bg-overlay-start-xmas {
  background: url("../xmas/xmas-bg4-mobile.jpg");
  background-repeat: repeat, repeat;
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-size: auto auto, auto auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  color: #333;
  height: 100vh;
  padding-top: 50px;
}

#topxmas .col-md-2 {
  width: 22%;
}

.modal-body {
    position: relative;
    padding: 15px;
    
    margin: 0 5% 140px 5%;
    padding-bottom: 100px;
}
.modal-xmas {
  background: /*linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.0)),*/ url("../xmas/popup-bg.jpg");
  background-size: auto;
  background-position: right bottom;
  }
  .frame {
    border: solid 0px rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    width: 100%;
    height: 60px;
    perspective: 21em;
    overflow: hidden;
    &.frame--preserve-3d {
      transform-style: preserve-3d
    }
    overflow: hidden;
    cursor: pointer;
  }
  .closedoor {
    height: inherit;
    background: #ad9961;
  transition: 1.6s;
  opacity: 0.6;
    transition: 1.6s;
    opacity: 0.8;
    border: solid 0px rgba(255, 255, 255, 0.8);
    border-radius: 5px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    line-height: 60px;
  }
  #topxmas .dooropen {
    padding: 0px;
    height: 60px;
    height: inherit;
  }
}
.xmascontainer {
  
  padding: 20px;
  margin-top: 5vw;
}

.modal-body{
	text-align: center;
}


/** XMAS ENDE **/

/** XMAS BUTTON ***/
.XmasTextZitat{
  margin-left:10px;
  text-align: center;
  position: absolute;
  right: 3vw; 
  bottom:2vw; 
}

@media screen and (max-width: 1440px){

.xmascontainer{
	margin-top: 30px !important;
}


	.XmasTextZitat{
  margin-left:10px;
  text-align: center;
  position: absolute;
  right: 3vw;
  bottom:20vw;
}


}
  
@media screen and (max-width: 1024px){

.xmascontainer{
	margin-top: 30px !important;
}


	.XmasTextZitat{
  margin-left:10px;
  text-align: center;
  position: absolute;
  right: 5vw;
  bottom:18vw;
}


}


@media screen and (max-width: 768px){
	.XmasTextZitat{
  margin-left:10px;
  text-align: center;
  position: absolute;
  right: 5vw;
  bottom:30vw;
}
}

@media screen and (max-width: 480px){ 
	.XmasTextZitat{
  margin-left:10px;
  text-align: center;
  position: relative !important;
  top:80px;
  transform: scale(0.8);
}


}

 



.Xmasbutton {
	display: inline-block;
	-webkit-box-sizing:border-box;
	   -moz-box-sizing:border-box;
	        box-sizing:border-box;
	min-width:100px;
	padding: 22px 33px;
	/*font-family: 'Lobster', cursive;*/
	font-size: 26px;
	line-height: 26px;
	text-decoration: none;
	color: #FFF !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
	/*background: #a61715;*/
	background: #ad9961;
	background-size: cover;
	outline: none;
	border-radius: 15px;
	border: 1px solid #4c0300;
	/*! box-shadow:
		inset 1px 1px 0px rgba(255,255,255,0.25), /\* highlight *\/
		inset 0 0 6px #a23227, /\* inner glow *\/
		inset 0 80px 80px -40px #ac3223, /\* gradient *\/
		1px 1px 3px rgba(0,0,0,0.75); */ /* shadow */
		
	position: relative;
	overflow: visible; /* IE9 & 10 */
	-webkit-transition: 500ms linear;
	   -moz-transition: 500ms linear;
	     -o-transition: 500ms linear;
					transition: 500ms linear;
}

.Xmasbutton::before {
	content: '';
	display: block;
	position: absolute;
	top: -7px;
	left: -3px;
	right: 0;
	height: 23px;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=) no-repeat 0 0,
	url(data:image/png;base64,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) no-repeat 50% 0,
	url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC) no-repeat 100% 0;
	
}
.Xmasbutton:hover {
	background: #0e2d45;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 40px #FFF;
	background-size: cover;

		
}
.Xmasbutton:focus {
	outline: none; /*FF*/
}
.Xmasbutton:active {
		background: #a61715;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75), 0 0 40px #FFF;
	box-shadow:
		inset 1px 1px 0px rgba(255,255,255,0.25), /* highlight */
		inset 0 0 6px #da3b2c, /* inner glow */
		inset 0 80px 80px -40px #dd4330, /* gradient */
		1px 1px 3px rgba(0,0,0,0.75); /* shadow */
}









/**
 * The "shine" element
 */



.Xmasbutton::before
{
	background-position: -180px;
	-webkit-animation: flare 5s infinite;
  -webkit-animation-timing-function: linear;
  background-image: linear-gradient(65deg, transparent 20%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.3) 27%, transparent 27%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  content: "Shiny";
  color: #FFF;
  display: block;
  padding-right: 140px;
  position: absolute;
}

.shiny::after
{
  content: "Shiny";
  color: #FFF;
  display: block;
  position: absolute;
  text-shadow: 0 1px #6E4414, 0 2px #6E4414, 0 3px #6E4414, 0 4px #6E4414, 0 5px #6E4414, 0 6px #6E4414, 0 7px #6E4414, 0 8px #6E4414, 0 9px #6E4414, 0 10px #6E4414;
  top: 0;
  z-index: -1;
}

.Xmasbutton::after, .Xmasbutton::before
{
		-webkit-animation: sparkle 5s infinite;
  -webkit-animation-timing-function: linear;
	background: #FFF;
  border-radius: 100%;
  box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #FFF, 0 0 25px #FFF, 0 0 30px #FFF, 0 0 35px #FFF;
  content: "";
  display: block;
  height: 10px;
  opacity: 0.7;
  position: absolute;
  width: 10px;
}

.Xmasbutton::before
{
	-webkit-animation-delay: 0.2s;
  height: 7px;
  left: 0.12em;
  top: 0.8em;
  width: 7px;
}

.Xmasbutton::after
{
  top: 0.32em;
  right: -5px;
}

@-webkit-keyframes flare
{
  0%   { background-position: -180px; }
  30%  { background-position: 500px; }
  100% { background-position: 500px; }
}

@-webkit-keyframes sparkle
{
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  40%  { opacity: 0.8; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}



.bg-overlay-start-xmas .container{
	margin-top:4vw; 
}







.ccm-settings-summoner--link {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    box-shadow: 0 0 6px 1px rgba(0,0,0,.5);
}



.bg-overlay-start-xmas {
  background: url("../xmas/xmas_bg.jpg");
  background-repeat: repeat, repeat;
  background-position-x: 0%, 0%;
  background-position-y: 0%, 0%;
  background-size: auto auto, auto auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  color: #333;
  height: 100%;
  min-height:100vh;
  padding-top: 50px; 
}



.presentAbsolute{
  position: absolute;
  top: -60px;
  width: 12vw; 
  right:auto;
  left: 60vw;
}


.xmasAbsolute {
    position: absolute;
    top: 100px;
    width: 200px;
    right: auto;
    left: 30vw;
}
  

.frame, .closedoor {
 height: 5vw;
   line-height: 5vw;
   opacity: 0.3;
 }





 
 .heutigerTag .frame{
  height: 5vw;
   line-height: 5vw;
 	opacity: 1;
 }
 
 
  .xmascontainer .heutigerTag{
  	 padding-right: 0px;
padding-left: 0px;
  }
 

 
 .bg-overlay-start {
    margin-top: -20px;
  
}
 
 
 
 @media (max-width: 480px) {
 
 .xmascontainer {
    margin-top: 140px !important;
}
 
 
 
.frame, .closedoor,
.heutigerTag .frame {
    height: 60px;
    line-height: 60px;
    
}


.xmasAbsolute{
	position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}



.presentAbsolute {
    position: absolute;
    top: -0px;
    width: 40vw;
    right: 0px;
    left: auto;
}



#topxmas .col-md-2 {
    width: 24%;
}


.modal-xmas {
    background: url("../xmas/popup_mobil.jpg");
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto;
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: cover;
    background-position: center center;
    height: 550px;
    padding-top: 150px;
}



}

@media (max-width: 800px) {

.modal-xmas {
    background: url("../xmas/popup-bg.jpg");
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto;
    background-size: cover;
    background-position: center center;
}

.modal-xmas .modal-body{
	margin-top:40px; 
}


 .xmascontainer {
    margin-top: 140px !important;
}
 
 
#topxmas .dooropen, 
.frame, .closedoor,
.heutigerTag .frame {
    height: 90px !important;
    line-height: 90px !important;
    
}


.xmasAbsolute{
	position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}











#topxmas .col-md-2 {
    width: 24%;
}


.presentAbsolute {
    position: absolute;
    top: -0px;
    width: 23vw;
    right: 0px;
    left: auto;
}






}
 
@media (min-width: 801px) and (max-width: 1100px) { 



.modal-xmas {
    background: url("../xmas/popup-bg.jpg");
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto;
    background-size: cover;
    background-position: center center;
}

.modal-xmas .modal-body{
	margin-top:40px; 
}


 .xmascontainer {
    margin-top: 140px !important;
}
 
 
 
.frame, .closedoor,
.heutigerTag .frame {
    height: 90px;
    line-height: 90px;
    
}


.xmasAbsolute{
	position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}











#topxmas .col-md-2 {
    width: 15%;
}


.presentAbsolute {
    position: absolute;
    top: -0px;
    width: 23vw;
    right: 0px;
    left: auto;
}




}
 
 
 
 
 
 
 
 @media (min-width: 1101px){
 
  
#topxmas .dooropen, 
.frame, .closedoor,
.heutigerTag .frame {
    height: 120px !important;
    line-height: 120px !important;
    
}
 	
 }
 
 
 
 
 
 
 
 
 
 .xmasButton{
	background:#0e2d45;
	color: #fff !important;
	margin-right:0.5vw;
	font-size: 20px !important;
	margin-bottom: 20px;
}
  




.xmasButton:hover{
	background:#ad9961;
}


.bg-overlay-start-xmas .container.xmasButtonWrap {
    margin-top: 40px;
}
 
 

 #topxmas .modal-body {
    text-align: center;
    max-width: 400px;
    margin: auto;
}