#santa {
  position: absolute;
  width: 20%;
  top: 7%;
  right: 10%;
  //right: unset;
  z-index: 1000;
}

#santa_mobile {
  display:none;
}

#mouth {
  animation: HoHoHoMouth 6s infinite 6s;
  -webkit-animation: HoHoHoMouth 6s infinite 6s;
  opacity: 0;
}
#hohoho1 {
  animation: HoHoHoText1 6s infinite 6s;
  -webkit-animation: HoHoHoText1 6s infinite 6s;
  fill: white;

  
  font-size:20px;
  font-weight:700;
  opacity: 0;
}
#hohoho2 {
  animation: HoHoHoText2 6s infinite 6s;
  -wbkit-animation: HoHoHotext2 6s infinite 6s;
  font-size:25px;
  font-weight:700;
  opacity: 0;
  fill: red;
}
#hohoho3 {
  animation: HoHoHoText3 6s infinite 6s;
  -webkit-animation: HoHoHoText3 6s infinite 6s;
    font-size:35px;
    font-weight:700;
  opacity: 0;
  fill: yellow;
}
@-webkit-keyframes HoHoHoText1 {
 0% {
opacity:0;
}
 30% {
opacity:1;
}
 40% {
opacity:0;
}
}
 @-webkit-keyframes HoHoHoText2 {
 0% {
opacity:0;
}
 50% {
opacity:1;
}
 60% {
opacity:0;
}
}
@-webkit-keyframes HoHoHoText3 {
 0% {
opacity:0;
}
 70% {
opacity:1;
}
 80% {
opacity:0;
}
}

 @-webkit-keyframes HoHoHoMouth {
 0% {
opacity:0;
}
 30% {
opacity:1;
}
 40% {
opacity:0;
}
 50% {
opacity:1;
}
 60% {
opacity:0;
}
70% {
opacity:1;
}
 80% {
opacity:0;
}
}

@keyframes HoHoHoText1 {
 0% {
opacity:0;
}
 30% {
opacity:1;
}
 40% {
opacity:0;
}
}
 @keyframes HoHoHoText2 {
 0% {
opacity:0;
}
 50% {
opacity:1;
}
 60% {
opacity:0;
}
}
@keyframes HoHoHoText3 {
 0% {
opacity:0;
}
 70% {
opacity:1;
}
 80% {
opacity:0;
}
}

 @keyframes HoHoHoMouth {
 0% {
opacity:0;
}
 30% {
opacity:1;
}
 40% {
opacity:0;
}
 50% {
opacity:1;
}
 60% {
opacity:0;
}
70% {
opacity:1;
}
 80% {
opacity:0;
}
}





#Santa_Container {
  position: absolute;
  margin-right: -35%
}
#Santa_Slide_Panel {
  position: absolute;
  width: 80%;
  //width: 100%;
  height: 100%;
  overflow: hidden;
  margin-left: -55%;
  //margin-left: -99%;
  -webkit-transition: all 3s ease;
  transition: all 1000ms ease;
  cursor: pointer;
  user-select: none;
}
#Santa_Slide_Panel:target {
	margin-left:-55%;
}
#santa {
  -webkit-transition: all 3s ease;
  cursor: pointer;
}

#Santa_Slide_Panel:hover {
  margin-left: 0%;
}
#Santa_Greeting {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 28.75%;
  //right: 0;
  z-index: 100;
  /* Brick Tiled Background */
  background-color: silver;
  background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}
#Santa_Message {
  position: absolute;
  //overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch; /* Accelerates Overflow Scrolling on IOS */

  padding:5px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 60%;
  width: 63%;
  
  
 
  box-shadow: 0 0 0 15px #587A55, 0 0 0 17px #587A55, 0 0 0 19px ghostwhite, 0 0 0 26px #1E340E, 0 0 0 40px #1E340E;
  background: ghostwhite;

}

#Santa_Message p {
  font-family: "Roboto";
  font-size: 110%;
  color: #587A55;
  margin: 20px;
}
/* ANIMATIONS */

.UpDown_1 {
  animation: bottom_animation 6s infinite;
  -webkit-animation: bottom_animation 6s infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.eyesandbrow {
  animation: bottom_animation 6s infinite;
  -webkit-animation: bottom_animation 6s infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
.shizzle-animated {
  visibility: visible !important;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
.Santa_Climbing_Chimney {
  -webkit-animation-name: Santa_Climbing_Chimney;
  animation-name: Santa_Climbing_Chimney;
  animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}
@-webkit-keyframes Santa_Climbing_Chimney {
 0% {
 -webkit-transform: translateY(200%);
}
 50% {
 opacity: 0.7;
 -webkit-transform: translateY(100%) rotate(-7deg);
}
 75% {
 -webkit-transform: translateY(50%) rotate(7deg);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0) rotate(0deg);
}
}
@keyframes Santa_Climbing_Chimney {
 0% {
 transform: translateY(200%);
}
 50% {
 opacity: 0.7;
 transform: translateY(100%) rotate(-7deg);
}
 75% {
 transform: translateY(50%) rotate(7deg);
}
 100% {
 opacity: 1;
 transform: translateY(0) rotate(0deg);
}
}

.slideScaleUpIn {
  -webkit-animation-delay: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: 3s;
  -webkit-animation-delay: 3s;
  animation-duration: 3s;
  -webkit-animation-name: slideScaleUpIn;
  animation-name: slideScaleUpIn;
}

 @-webkit-keyframes slideScaleUpIn {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-2000px) scale(.1);
}
 80% {
 opacity: 1;
 -webkit-transform: scale(.8);
}
}
@keyframes slideScaleUpIn {
 0% {
 opacity: 0;
 transform: translateY(-2000px) scale(.1);
}
 80% {
 opacity: 1;
 transform: scale(.8);
}
}

 
 @keyframes bottom_animation {
 0% {
transform: rotate(0deg);
}
 25% {
transform: rotate(2deg);
}
 50% {
transform: rotate(0deg);
}
 75% {
transform: rotate(2deg);
}
 100% {
transform: rotate(0deg);
}
}

 @-webkit-keyframes bottom_animation {
0% {
transform: rotate(0deg);
}
 25% {
transform: rotate(2deg);
}
 50% {
transform: rotate(0deg);
}
 75% {
transform: rotate(2deg);
}
 100% {
transform: rotate(0deg);
}
}

/* SVG DEFAULT STYLING FROM ILLUSTRATOR */
.santa-0 {
  fill: #C10E0E;
}
.santa-1 {
  fill: #F4C7B3;
}
.santa-2 {
  opacity: 0.2;
}
.cheeks {
  fill: #EAB5A0;
}
.santa-4 {
  fill: #F2F2F2;
  stroke: #E6E6E6;
  stroke-width: 1.8489;
  stroke-miterlimit: 10;
}
.santa-5 {
  fill: none;
}
.santa-6 {
  fill: #F2F2F2;
}
.santa-7 {
  fill: #E6E6E6;
}
.santa-white {
  fill: #FFFFFF;
}
.nose {
  fill: #EAB5A0;
}
.santa-11 {
  fill: #5E5958;
}
.eyeball {
  fill: #F9F5F4;
}
.santa-13 {
  fill: #D60B0B;
}
.santa-14 {
  fill: #BC0202;
}
.santa-15 {
  fill: #C6C6C6;
}
.santa-16 {
  fill: none;
  stroke: #F2F2F2;
  stroke-width: 16.7815;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
.santa-17 {
  fill: #C40808;
}
.santa-18 {
  opacity: 0.15;
}
.santa-19 {
  fill: #B50808;
}
.santa-20 {
  fill: none;
  stroke: #F2F2F2;
  stroke-width: 17.3975;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
  
  
/* WebKit Scrollbar Styling */

::-webkit-scrollbar {
 width: 15px;
}

::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
 border-radius: 8px;
}

::-webkit-scrollbar-thumb {
 border-radius: -10%;
 background-color: rgba(0,62,9,1.00);
}



/* =========================================
   ANIMATED PNG FLAKES
   - Uses 3 layered PNGs
========================================= */
.snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  z-index: 1000; /* Bring above content */
  pointer-events: none; /* Don’t block clicks */

  background: none;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake1.png"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake2.png"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/flake3.png");
  background-repeat: repeat;
  background-size: 600px 600px;

  /* Single standard animation, no vendor prefixes needed now */
  animation: snow 10s linear infinite;
}

/* =========================================
   KEYFRAMES – shared by both layers
   - Moves multiple background layers
     at different speeds/directions
========================================= */
@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;
  }
}







/* Page Stuff */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}


body {
  margin: 0;
  padding: 0;
  height: 100vh;

  /* Main winter-night gradient */
  /*
  background:
    radial-gradient(
      circle at 50% 120%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 60%
    ),
    radial-gradient(
      circle at 80% 0%,
      rgba(0, 140, 255, 0.25) 0%,
      rgba(0, 0, 0, 0) 50%
    ),
    radial-gradient(
      circle at 20% -10%,
      rgba(255, 200, 255, 0.25) 0%,
      rgba(0, 0, 0, 0) 45%
    ),
    linear-gradient(
      to bottom,
      #0a0f1e 0%,
      #0b1224 30%,
      #08101f 60%,
      #050b16 100%
    );
*/
  background-attachment: fixed;
  //color: white;
  overflow-x: hidden;
}
	#santa_close {
	  display:none;
	}
	.santa-bonus span {
		font-size:90%;
	}
	
@media (max-width: 1024px) {
	#santa {
		right: unset !important;
	}
	#santa_desktop {
		display:none;
	}
    #santa:after{
      display: inline-block;
      content: "\00d7"; /* This will render the 'X' */
    }
	#santa_mobile {
      display:block;
    }
	#santa_close {
	  display:block;
	  z-index: 10011;
	}
    #Santa_Slide_Panel {
      width: 100% !important;
      margin-left: -99%;
    }
    #Santa_Greeting {
     right: 0 !important;
    }
    #Santa_Message {
      height: 75%;
	}
    #Santa_Message p {
      font-size: 75%;
	  margin: 10px;
    }
	.santa-bonus span {
		font-size:75%;
	}
}