#landing-snow{
	position:absolute;
}
#copy_banner h3{
	color:#fff;
	font-size: 48px;
}
#copy_banner p{
	color:#fff;
	line-height: 1.8;
    max-width: 600px;
    margin-top: 20px;
}

@media(min-width: 751px) {
	.background-layer{
		position: fixed;
		top:60px;
		left:0;
		width:100%;
    	height: 100vh;
    	background: radial-gradient(ellipse at center, #0096d8 0%,  #002b7f 100%);
/*    	background-image: linear-gradient(125deg, #203ba4 0%, #002b7f 100%);*/
    	animation: sky-animation 4s 100ms forwards;
    	overflow: hidden;
    	animation-timing-function: ease-in-out;
	}
	#copy_banner{
		position: absolute;
		opacity:0;
    	left: 50%;
    	top: 7%;
    	-webkit-transform: translateX(-50%);
    	transform: translateX(-50%);
	}
	.background-layer .moon {
		background-color: #e4eefe;
    	opacity:0;
		width: 150px;
		height: 150px;
		border-radius: 50%;
		box-shadow: 0px 0px 40px 5px whitesmoke;
		position: absolute;
		left: 15%;
		top: 60px;
		animation: moon-animation 4s 1s forwards;
		animation-timing-function: ease-out;
	}

	.background-layer .star {
		position: absolute;
		top: 15%;
		left: 30%;
		height: 2px;
		background: linear-gradient(-45deg, #96b7fe, rgba(0, 0, 255, 0));
		filter: drop-shadow(0 0 6px #86aefd);
		animation: tail 15s 25s ease-in-out infinite, shooting 15s 25s ease-in-out infinite;
	}

	.background-layer .star::before,
	.background-layer .star::after {
		position: absolute;
		content: "";
		top: calc(50% - 1px);
		right: 0;
		height: 2px;
		background: linear-gradient( -45deg, rgba(0, 0, 255, 0), #96b7fe, rgba(0, 0, 255, 0));
		border-radius: 100%;
		transform: translateX(50%) rotateZ(45deg);
		animation: shining 15s 25s ease-in-out infinite;
	}

	.background-layer .star::after {
		transform: translateX(50%) rotateZ(-45deg);
	}

	.background-layer .star:nth-child(1) {
		top: calc(38% - 200px);
		left: calc(50% + 300px);
		animation-delay: 10s;
	}

	.background-layer .star:nth-child(1)::before,
	.background-layer .star:nth-child(1)::after {
		animation-delay: 10s;
	}
}



@keyframes sky-animation {
    0% {
        background: #91c8df;
    }
    25% {
        background-color: #56aed6;
    }
    50% {
        background-color: #329ed4;
    }
    75% {
        background-color: #0096d8;
    }
    90% {
        background-color: #00398b;
    }
}
@keyframes moon-animation {
    0% {
    	opacity:1;
        transform: translateY(40vh);
        left: 5%;
    	box-shadow: 0px 0px 5px 5px whitesmoke;
    }
    30% {
    	opacity:1;
    	box-shadow: 0px 0px 10px 5px whitesmoke;
    }
    100% {
    	opacity:1;
    }
}
@keyframes tail {
    0% {
        width: 0;
    }
    6% {
        width: 140px;
    }
    20% {
        width: 0;
    }
}

@keyframes shining {
    0% {
        width: 0;
    }
    10% {
        width: 30px;
    }
    20% {
        width: 0;
    }
}

@keyframes shooting {
    0% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(340px);
    }
}
.foreground-layer .snow_border{
	position:absolute;
	top:-7.2%;
	left:50%;
	-webkit-transform: translateX(-50%);
    transform: translateX(-50%);
 	z-index: 2;
    width: 103.3%;
}
.foreground-layer #landing-snow{
	width: 100%;
    height: calc(100% + 470px);
    position: absolute;
    top: -470px;
    left: 0;
    right: 0;
    z-index: 3;
}
#big-video.ready{
	position:relative;
	z-index: 5;
}
.foreground-layer .video-inner{
	max-width: 900px;
	width:70vw;
	height:0;
	padding-top: 53.6%;
	position:relative;
}
.foreground-layer video-js{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#onceupon{
	background-color:#fff;
	padding-bottom: 150px;
}

#onceupon .deco .main{
	width:100%;
}

#onceupon h3{
	font-size: 40px;
	color: #0F146F;
}

#onceupon p{
    line-height: 1.8;
    font-family:'Macys Sans Medium','Helvetica Neue', Helvetica, Arial, sans-serif;
}
#onceupon p span{
	font-size: 24px;
	color: #001E83;
}
.vjs-control-bar .vjs-picture-in-picture-control.vjs-control{
	display:none;
}

@media (min-width: 751px) {
	.foreground-layer {
    	position: relative;
    	margin-top: 470px;
    	background-position: center top;
		background-image: url(../images/tiptoe/bg_trees.png);
	}
	
	.foreground-layer .video-container{
    	border: 18px solid #fff;
		display:inline-block;
		position: relative;
		margin: -120px auto 100px;
		border-radius:15px;
		top:0;
	}

	#onceupon p{
		font-size: 18px;
    	margin: 36px auto;
    	max-width: 548px;
	}
	.foreground-layer .deco.tree1{
		top: 160px;
		margin-left: -755px;
		-webkit-transform: scale(0.4) translateX(-50%); 
		transform: scale(0.4) translateX(-50%);
	}
	.foreground-layer .deco.tree2{
		top: 160px;
		margin-left: -780px;
		-webkit-transform: scale(0.9) translateX(-50%); 
		transform: scale(0.9) translateX(-50%);  
	}
	.foreground-layer .deco.tree3{  
		top: 167px;
		margin-left: 635px;
		-webkit-transform: scale(0.4) translateX(-50%); 
		transform: scale(0.4) translateX(-50%);
	}
	.foreground-layer .deco.tree4{ 
		top: 170px;
		margin-left: 735px;
		-webkit-transform: scale(0.7) translateX(-50%); 
		transform: scale(0.7) translateX(-50%);
	}
	.foreground-layer .deco.tree5{ 
		bottom: 7%;
		margin-left: 740px;
		transform: translateX(-50%);
	}

	.foreground-layer .deco.bear{
		top: 100px;
		margin-left: 35em;
		width:22.8em;
	}
	.foreground-layer .bearhand{
		position:absolute;
		width:23.3%;
		top: 6.7em;
		right: 0.9em;
		transform-origin: 50% 95%;
		animation: bearwave 4s 3s infinite;
	}
	.foreground-layer .deco.penguin{
		top: 290px;
		margin-left: 46em;
		width:10.8em;
	}
	.foreground-layer .penguinbody{
		position:absolute;
		width: 83.3%;
		top: 0em;
		right: 0.9em;
		transform-origin: 65% 85%;
		animation: penguinshake 3.5s 4s infinite;
	}
	.foreground-layer .deco.santa{
		top: 440px;
		margin-left: -54em;
		width:18em;
	}
	.foreground-layer .santahand{
		position: absolute;
		width:21.1%;
		top: 3.4em;
		right: 1.8em;
		transform-origin: 50% 90%;
		animation: santawave 3s 4s infinite;
	}
	.foreground-layer .deco.elf1{
		top: 560px;
		margin-left: -58.5em;
		width:10em;
	}
	.foreground-layer .elf1_leftarm{
		position: absolute;
		width:18%;
		top: 8em;
		left: 1em;
		transform-origin: 90% 20%;
		animation: elfleftarm 3s 3s infinite;
	}
	.foreground-layer .elf1_rightarm{
		position: absolute;
		width:18%;
		top: 7.9em;
		right: 1.3em;
		transform-origin: 10% 20%;
		animation: elfrightarm 3s 3s infinite;
	}
	.foreground-layer .deco.elf2{
		top: 595px;
		margin-left: -40.5em;
		width:8.4em;
	}
	.foreground-layer .elf2_leftbrow{
		position: absolute;
		width:13.1%;
		top: 3.9em;
		left: 2.4em;
		transform-origin: 130% 220%;
		animation: elfleftbrow 3s 3.5s infinite;
	}
	.foreground-layer .elf2_rightbrow{
		position: absolute;
		width:14.3%;
		top: 3.8em;
		left: 3.5em;
		transform-origin: 0% 320%;
		animation: elfrightbrow 3s 3.5s infinite;
	}
	.foreground-layer .deco.tiptoe2{
		bottom: 115px;
    	margin-left: 27.5em;
    	width:20em;
	}
	.foreground-layer .tiptoe2body{
		position:relative;
	}
	.foreground-layer .tiptoe2_leftear{
		position: absolute;
		width:22.5%;
		top: 1.1em;
    	left: 1.1em;
    	transform-origin: 100% 100%;
		animation: tiptoeleftear 3s 3.5s infinite;
	}
	.foreground-layer .tiptoe2_rightear{
		position: absolute;
		width:23.5%;
	    top: 4.9em;
    	left: 9.5em;
    	transform-origin: -10% 50%;
		animation: tiptoerightear 3s 3.5s infinite;
	}
	.foreground-layer .tiptoe2_leg{
		position: absolute;
		width:22%;
	    bottom: 3.2em;
    	left: 5.9em;
		transform-origin: 10% 0%;
		animation: tiptoeleg 3s 4.5s infinite;
	}
}


@media only screen and (min-width: 1285px) {
	#big-video .deco.tiptoe{
		bottom: 20px;
    	margin-left: 495px;
    	left:50%;
    }
}

@media only screen and (min-width: 751px) and (max-width: 1200px) {
	#onceupon p{
		max-width: 450px;
	}
	.foreground-layer .deco.tiptoe2{
		margin-left: 38em;
	}
}
@media only screen and (orientation: portrait) and (min-width: 750px) and (max-width: 1075px) and (max-height: 1400px) {
	.foreground-layer{
		background-size: 120% auto;
	}
	.foreground-layer .deco.santa{
		margin-left: -62em;
	}
	.foreground-layer .deco.elf1{
		top:500px;
		margin-left: -68em;
	}
	.foreground-layer .deco.elf2{
		margin-left: -50em;
    	width: 8.4em;
	}
	.foreground-layer .deco.tiptoe2{
		margin-left: 42em;
	}
	#join-parade{
		padding-bottom: 15em;
	}
}

@-webkit-keyframes bearwave{
  0% {-webkit-transform: rotate(4deg);}
  10% {-webkit-transform: rotate(20deg);}
  20% {-webkit-transform: rotate(-2deg);}
  30% {-webkit-transform: rotate(20deg);}
  40% {-webkit-transform: rotate(0deg);}
  50% {-webkit-transform: rotate(20deg);}
  60% {-webkit-transform: rotate(4deg);}
  100% {-webkit-transform: rotate(4deg);}
}
@keyframes bearwave {
  0% {transform: rotate(4deg);}
  10% {transform: rotate(20deg);}
  20% {transform: rotate(-2deg);}
  30% {transform: rotate(20deg);}
  40% {transform: rotate(0deg);}
  50% {transform: rotate(20deg);}
  60% {transform: rotate(4deg);}
  100% {transform: rotate(4deg);}
}

@-webkit-keyframes santawave {
  0% {-webkit-transform: rotate(-4deg);}
  10% {-webkit-transform: rotate(12deg);}
  20% {-webkit-transform: rotate(-10deg);}
  30% {-webkit-transform: rotate(12deg);}
  40% {-webkit-transform: rotate(-8deg);}
  50% {-webkit-transform: rotate(12deg);}
  60% {-webkit-transform: rotate(-4deg);}
  100% {-webkit-transform: rotate(-4deg);}
}
@keyframes santawave {
  0% {transform: rotate(-4deg);}
  10% {transform: rotate(12deg);}
  20% {transform: rotate(-10deg);}
  30% {transform: rotate(12deg);}
  40% {transform: rotate(-8deg);}
  50% {transform: rotate(12deg);}
  60% {transform: rotate(-4deg);}
  100% {transform: rotate(-4deg);}
}

@-webkit-keyframes elfleftarm {
  0% {-webkit-transform: rotate(0deg);}
  20% {-webkit-transform: rotate(10deg);}
  35% {-webkit-transform: rotate(-10deg);}
  45% {-webkit-transform: rotate(5deg);}
  55% {-webkit-transform: rotate(0deg);}
}
@keyframes elfleftarm {
  0% {transform: rotate(0deg);}
  20% {transform: rotate(10deg);}
  35% {transform: rotate(-10deg);}
  45% {transform: rotate(5deg);}
  55% {transform: rotate(0deg);}
}

@-webkit-keyframes elfrightarm {
  0% {-webkit-transform: rotate(0deg);}
  20% {-webkit-transform: rotate(-10deg);}
  35% {-webkit-transform: rotate(10deg);}
  45% {-webkit-transform: rotate(-5deg);}
  55% {-webkit-transform: rotate(0deg);}
}
@keyframes elfrightarm {
  0% {transform: rotate(0deg);}
  20% {transform: rotate(-10deg);}
  35% {transform: rotate(10deg);}
  45% {transform: rotate(-5deg);}
  55% {transform: rotate(0deg);}
}

@-webkit-keyframes elfleftbrow {
  0% {-webkit-transform: rotate(0deg);}
  10% {-webkit-transform: rotate(-10deg);}
  20% {-webkit-transform: rotate(0deg);}
  40% {-webkit-transform: rotate(-10deg);}
  50% {-webkit-transform: rotate(0deg);}
}
@keyframes elfleftbrow {
  0% {transform: rotate(0deg);}
  10% {transform: rotate(-10deg);}
  20% {transform: rotate(0deg);}
  40% {transform: rotate(-10deg);}
  50% {transform: rotate(0deg);}
}

@-webkit-keyframes elfrightbrow {
  0% {-webkit-transform: rotate(0deg);}
  10% {-webkit-transform: rotate(10deg);}
  20% {-webkit-transform: rotate(0deg);}
  40% {-webkit-transform: rotate(10deg);}
  50% {-webkit-transform: rotate(0deg);}
}
@keyframes elfrightbrow {
  0% {transform: rotate(0deg);}
  10% {transform: rotate(10deg);}
  20% {transform: rotate(0deg);}
  40% {transform: rotate(10deg);}
  50% {transform: rotate(0deg);}
}
.page.tiptoe{
	overflow:hidden;
}

.page.tiptoe sup{
	font-size: 10px;
    position: relative;
    top: -6px;
}

.page.tiptoe .button{
	width:195px;
	color:#fff;
	font-size: 16px;
	margin-top: 1em;
}

#donate-now{
	background-color: #002B7F;
	display:none;
}

.left,
.middle,
.right{
	position:relative;
}

#donate-now h3,
#donate-now p,
#join-parade h3,
#join-parade p{
	color:#fff;
}

#donate-now h3,
#join-parade h3{
	font-size: 4em;
	margin-bottom: 0.5em;
}

#donate-now p,
#join-parade p{
	line-height: 1.8;
    max-width: 505px;
}
#donate-now .img{
	border: 1.5em solid #fff;
	border-bottom: 6em solid #fff;
	background-color: #fff;
    -webkit-box-shadow: 6px 6px 10px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.3);
    box-shadow: 6px 6px 10px 0px rgb(0 0 0 / 30%);
    position:relative;
    display:inline-block;
}
#donate-now .img img{
	width:23em;
	height:22em;
}
#donate-now .img1{
	-webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
}
#donate-now .img2{
    position: absolute;
    left: -4%;
    top: -8%;
    -webkit-transform: rotate(-6deg);
    -ms-transform: rotate(-6deg);
    transform: rotate(-6deg);
}
#donate-now .button:nth-of-type(2):before{
	content:"";
	background-image: url(../images/tiptoe/donate_letters.png);
	width: 125px;
	height: 82px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	position: absolute;
	left:-50px;
	top:-15px;
}

#join-parade{
	background-color:#59BFEF;
	padding: 5em 0 4em;
}

.isNationalBelieveWeek #donate-now,
.isNationalBelieveWeekTY #donate-now{
/*	display:block;*/
}

@media (min-width: 751px) {
	.left,
	.middle,
	.right{
		display:inline-block;
		vertical-align: middle;
		width:40%;
	}
	.page.tiptoe .button:hover{
		color:#000;
		background-color: #fff;
	}

	#donate-now .buttons{
    	display: -ms-flexbox;
    	display: -webkit-flex;
		display:flex;
		margin: 2em auto 5em;
	}
	#donate-now .buttons a:first-of-type{
		order:2;
	}
	#donate-now .button{
		margin-right: 1em;
	}
	#donate-now .button:nth-of-type(2){
		width:280px;
		position:relative;
		padding-left: 60px;
	}

	.deco_star{
		position:absolute !important;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	.deco{
		position:absolute;
		left:50%;
	}

	.deco.cloud1{
		margin-left: -870px;
    	top: 58%;
    	-webkit-transform: scale(0.8);
    	transform: scale(0.8);
	}
	.deco.cloud2{
		margin-left: -720px;
    	top: 50%;
    	-webkit-transform: scale(0.8);
    	transform: scale(0.8);
	}
	.deco.cloud3{
    	margin-left: -500px;
    	top: 30%;
    	-webkit-transform: scale(0.7);
    	transform: scale(0.7);
	}
	.deco.cloud4{
		margin-left: 560px;
    	top: 10%;
    	-webkit-transform: scale(0.7);
    	transform: scale(0.7);
	}
	.deco.cloud5{
		margin-left: 720px;
    	top: 75%;
	}

	#donate-now .left{
		width:60%;
		text-align: left;
	}
	#donate-now .right{
		text-align: right;
	}

	#join-parade .parade_balloon1{
		width:9em;
		-webkit-animation:balloon1 6s ease-in-out infinite;
		animation:balloon1 6s ease-in-out infinite;
	}
	#join-parade .parade_balloon2{
		position: relative;
		left:-1em;
		width:8.5em;
   		-webkit-animation:balloon2 5s ease-in-out infinite;
  		animation:balloon2 5s ease-in-out infinite;
	}

	#confetti-canvas{
		pointer-events:none; 
  		position: absolute;
  		top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
	}

	#join-parade .left{
		width:25%;
	}
	#join-parade .middle{
		width:30%;
	}
	#join-parade .right{
		text-align: left;
		margin-left: -4em;
	}
	#join-parade .parade_tiptoe{
		width:35.6em;
	}
	#join-parade .parade_scissor{
		width:16.5em;
		top: 60%;
    	left: 40%;
	}
}

@media (max-width: 750px) {

}


@-webkit-keyframes balloon1 {
  0%,100%{ -webkit-transform:translateY(-20px) rotate(-4deg);}
  50%{ -webkit-transform:translateY(-40px) rotate(8deg); }
}
@keyframes balloon1 {
  0%,100%{ transform:translateY(-20px) rotate(-4deg);}
  50%{ transform:translateY(-40px) rotate(8deg); }
}
@-webkit-keyframes balloon2 {
  0%,100%{ -webkit-transform:translateY(0) rotate(-10deg);}
  50%{ -webkit-transform:translateY(-20px) rotate(2deg); }
}
@keyframes balloon2 {
  0%,100%{ transform:translateY(0) rotate(-10deg);}
  50%{ transform:translateY(-20px) rotate(2deg); }
}
@media(max-width: 750px) {
	.page.tiptoe {
		background-image: url(../images/tiptoe/background_bg.jpg);
		background-size: 100% auto;
    	background-position: center top;
    	background-repeat: no-repeat;
	}
	.page.tiptoe p{
		font-size: 13px;
	}
	.page.tiptoe .button{
		font-size: 12px;
		margin: 15px auto;
		position: relative;
		z-index: 5;
	}

	.background-layer{
		padding: 40px 0 120px;
	}
	#copy_banner h3{
		font-size: 28px;
	}
	#copy_banner p{
		width: 65%;
    	margin: 20px auto;
	}
	.foreground-layer .video-inner{
		width:96%;
		padding-top: 54%;
		margin: 0 auto;
		border-radius: 5px;
    	overflow: hidden;
	}

	#onceupon{
		padding-top: 40px;
		padding-bottom: 30px;
	}
	#onceupon h3{
		font-size: 24px;
	}
	#onceupon p{
		padding: 10px 15%;
	}
	#onceupon p span{
		font-size: 14px;
	}
	#onceupon .img1,
	#onceupon .img2,
	#onceupon .img3{
		width: 95%;
    	margin-bottom: 10px;
	}
	#onceupon .img3{
		margin-top: 30px;
	}

	#donate-now h3, 
	#join-parade h3{
		font-size: 24px;
	}

	#donate-now .narrow{
		padding: 40px 4% 50px;
	}
	#donate-now .img1{
    	margin: 40px 0 0 120px;
	}
	#donate-now .img2{
		left: 12%;
    	top: 11%;
	}
	#donate-now .button:nth-of-type(2):before{
		width: 94px;
    	left: -64px;
    	top: -22px;
    	background-size: 100% auto;
	}
	#join-parade{
		padding: 10px 0 0;
	}
	#join-parade .parade_img1{
		width:100%;
	}
	#join-parade h3{
		margin-top: -20px;
	}
	#join-parade p{
		width: 85%;
    	margin: 0 auto;
	}
	#join-parade .parade_img2{
		width:100%;
		margin-top: -40px;
	}
}