*, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; }


body {
  height: 100vh;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
background: #1b2735;
 background-image: linear-gradient(to bottom, #1b2735 , #fff);

  overflow-x: hidden;
  	padding: 0px;
	margin: 0px;

}
html {
	background: #fff;
	padding: 0px;
	margin: 0px;
	
   
	
}




.xmas1, .xmas2{
	font-size: 82px;
	color: #e60000;

	font-family: 'Mountains of Christmas', cursive;
	width: 100%;
	text-align: center;
	margin-top: -30px;
	text-shadow: 2px 2px #4d0000;
	line-height: 1.7;
	

  filter: drop-shadow(0 0 10px white);

}


.xmas2{
	color: #009900;
	text-shadow: 2px 2px #003311;
}

.xmas1, .snowglow {
  filter: drop-shadow(0 0 10px white);
}

#footer-top-link {
    position:fixed;
    right:0px;
    bottom:0px;
    height:30px;
    width:60px;
	float: right;
    display:none;
	background: #000000;
	opacity: 0.7;	
	color: #ffffff;
	padding: 5px;
	font-size: 16px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}



.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,1.0);
	
	z-index: 3;
}
				
#loading-bar-spinner {
	pointer-events: none;
	-webkit-pointer-events: none;
	-webkit-transition: 350ms linear all;
	-moz-transition: 350ms linear all;
	-o-transition: 350ms linear all;
	transition: 350ms linear all;
	position: absolute;
    top:40%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	z-index: 3;
}

#loading-bar-spinner .spinner-icon {
		  width: 100px;
		  height: 100px;
		  border:  solid 4px transparent;
		  border-top-color:  #cc0000;
		  border-left-color: #ff1a1a;
		  border-bottom-color: #ff6666;
		  border-right-color: #ffb3b3;
		  border-radius: 50%;
		  -webkit-animation: loading-bar-spinner 700ms linear infinite;
		  -moz-animation:    loading-bar-spinner 700ms linear infinite;
		  -ms-animation:     loading-bar-spinner 700ms linear infinite;
		  -o-animation:      loading-bar-spinner 700ms linear infinite;
		  animation:         loading-bar-spinner 700ms linear infinite;
}

@-webkit-keyframes loading-bar-spinner {
		  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
		  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes loading-bar-spinner {
		  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
		  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes loading-bar-spinner {
		  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
		  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes loading-bar-spinner {
		  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
		  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes loading-bar-spinner {
		  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
		  100% { transform: rotate(360deg); transform: rotate(360deg); }
}



.thankyou {
	height: auto;
	min-height: 500px;
	padding: 20px;
	width: 700px;
	max-width: 95%;
	text-align: left;
	background-color:rgba(255,255,255,0.0);
	font-size: 32px;
	font-family: 'Mountains of Christmas', cursive;
	color: #009933;
	text-shadow: 1px 1px #003311;
	
}




div.polaroid {
  max-width: 80%;
  width: 600px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 65px;
  padding: 20px;
	font-size: 27px;
	font-family: 'Mountains of Christmas', cursive;
	color: #009933;
	text-shadow: 1px 1px #003311;
}

div.container {
  text-align: center;
  padding: 10px 20px;
}




.worldspin {

 
  
  -webkit-animation: spin 30s linear infinite;
  animation: spin 30s linear infinite;
   width: 100vmin;
  height: 100vmin;
}

@-moz-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



.worldcontainer {
	 margin-top: -650px; 
	 position: relative;
}


.whiteshade {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,1)); 
	height: 200px; 
	width: 100%; 
	margin-top: -800px; 
	position: relative;
}

.whiteshadeblock {
	background: #fff; 
	height: 700px; 
	width: 100%; 
	margin-top: -2px;  
	position: relative;
}

.xmred{
	color: #e60000;

}


.xmgreen{
	color: #009900;

}

.font_easy_read {
	color: #009933;
	text-shadow: 1px 1px #003311;
	font-size: 30px;
	font-family: Arial, Helvetica, sans-serif;
}






.load_barber {

    text-align: center;
    color: #4c3f2e;	

    overflow: hidden;
	padding: 1.5rem;

	
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
	z-index: 3;
	height: 40px;
	width: 150px;
	box-shadow: 4px 4px 2px #aaaaaa;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}


.candycane {
  z-index: 3;/* safari fix-jp   */
  border-top-right-radius: 40px;
  border-top-left-radius: 40px;
  height: 180px;
  overflow: hidden;
  position: relative;
  width: 80px;  
  
	position: absolute;
    top:-10%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}
.candycane:before, .candycane:after {
  background-color: #fff;
  content: "";
  position: absolute;
}
.candycane:before {
  bottom: 0;
  height: 126.6666666667px;
  left: 0;
  width: 50px;
}
.candycane:after {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  bottom: 126.6666666667px;
  left: 30px;
  right: 30px;
  top: 30px;
}


@-webkit-keyframes bg_barber {
	from {
		-webkit-transform: translateX(0);
	}
	to { 
		-webkit-transform: translateX(46px);
	}
}

@keyframes bg_barber {
	from {
		transform: translateX(0);
	}
	to { 
		transform: translateX(46px);
	}
}




.candy-cane{
    position: absolute;
    left: -46px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
	
  background: -webkit-repeating-linear-gradient(
    145deg,
    #d42111 1px,
    #ffc6b3 2px,
    #fff5ed 11px,
    #d42111 12px,
    #ff3300 20px
  );
  background: repeating-linear-gradient(
    -55deg,
    #d42111 1px,
    #ffc6b3 2px,
    #fff5ed 11px,
    #d42111 12px,
    #ff3300 20px
	);
    
    -webkit-animation-name: bg_barber;
	-webkit-animation-duration: 1.6s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	
    animation-name: bg_barber;
	animation-duration: 1.6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}


h1 {
	display: inline;	
	font-size: 33px;
}

.candy-cane-stripe-1 {
  
  background: repeating-linear-gradient(
    55deg,
    transparent,
    transparent 10px,
    #cc0000 10px,
    #ff3300 20px
  ),
  linear-gradient(
    to bottom,
    #d42111,
    #fff,
    #fefefe,	
	#d42111
  )
}



.footer { 
   left: 0;
   width: 100%;
   background-color: #d42111;
   color: #ffffff;
}

.footer a {
	color: #ffffff;
}

.footer_powered a {
	color: #d42111;
}

.footer_green_fade {
	background-image: linear-gradient(to bottom, #29a329 , #70db70);
}

.footer_red_fade {
	background-image: linear-gradient(to bottom, #d42111 , #991f00);
}



@media screen and (max-width: 900px) 	{
	.whiteshade {
		margin-top: -800px; 
	}	

}


@media screen and (max-width: 800px) 	{
	.whiteshade {
		margin-top: -750px; 
	}	

}





@media screen and (max-width: 700px) 	{
	.xmas1, .xmas2 {
		font-size: 62px;
	}	
	
	.whiteshade {
		margin-top: -650px; 
	}	

}

@media screen and (max-width: 600px) 	{
	
	.whiteshade {
		margin-top: -530px; 
	}	
	h1 {
		font-size: 23px;
	}
}

@media screen and (max-width: 500px) 	{
	.xmas1, .xmas2 {
		font-size: 50px;
	}	
	
	.whiteshade {
		margin-top: -500px; 
	}	
	
	.countdown_to_santa{
		font-size: 20px;
	}
}



@media screen and (max-width: 400px) 	{
	
	.whiteshade {
		margin-top: -440px; 
	}	

}


@media only screen and (min-device-width: 480px) 
                   and (max-device-width: 640px) 
                   and (orientation: landscape) {

	.whiteshade {
		margin-top: -440px; 
	}	
}


@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
	.whiteshade {
		margin-top: -440px; 
	}	
	
	.reindeerflying {
		width: 300px;
	}
	.xmas1, .xmas2 {
		font-size: 40px;
	}		
}