/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
    font-family: 'alrightsansbold';
    src: url('fonts/alrightsans_bold-webfont.eot');
    src: url('fonts/alrightsans_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alrightsans_bold-webfont.woff') format('woff'),
         url('fonts/alrightsans_bold-webfont.ttf') format('truetype'),
         url('fonts/alrightsans_bold-webfont.svg#alright_sans_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'alrightsansmedium';
    src: url('fonts/alrightsans_medium-webfont.eot');
    src: url('fonts/alrightsans_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alrightsans_medium-webfont.woff') format('woff'),
         url('fonts/alrightsans_medium-webfont.ttf') format('truetype'),
         url('fonts/alrightsans_medium-webfont.svg#alright_sans_mediummedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'alrightsansregular';
    src: url('fonts/alrightsans_regular-webfont.eot');
    src: url('fonts/alrightsans_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/alrightsans_regular-webfont.woff') format('woff'),
         url('fonts/alrightsans_regular-webfont.ttf') format('truetype'),
         url('fonts/alrightsans_regular-webfont.svg#alright_sans_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html, body {
    height: 100%;
		padding:0px;
		margin:0px;
		width:100%;
}

body {
	background:#fff;
	font-family: arial;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

audio {
    vertical-align: middle;
}

#audio {
	left: -900000px;
	position: absolute;
}

#container {
	width:100%;
	height:100%;
	z-index:10;
	top:0; 
	left:0; 
	position:absolute;
}

.row {
	height:33.34%;
	margin:0px;
}

.box {
	min-width:200px;
	min-height:200px;
	height:100%;
	padding:0px;
	position:relative;
}

#candle path,
#bell path,
#bell polygon,
#mittens #right .fillcolor,
#mittens #left .fillcolor,
#skate path,
#fireworks g,
#hotchoc path,
#snowman path,
#snowglobe path,
#sled path {
	fill:#ffffff;
}

#snowglobe .globe,
#mittens #string,
#mittens .cls-7 {
	stroke:#ffffff;
}

#candle {
	background-color:#d1d3d4;
}

#candle .wrap,
#bell .wrap,
#mittens .wrap,
#skate .wrapskate,
#fireworks .wrap,
#hotchoc .wrap,
#snowman .wrapman,
#snowglobe .wrap {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 100%;
	filter: drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
	-webkit-filter: drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
	-moz-filter:drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
	drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
}

#message .wrap {
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

#message .row {
	height:100%;
}

#sled .wrap {
  position: relative;
  bottom: 0px;
	width:146%;
	height:100%;
	filter: drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
	-webkit-filter: drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
	-moz-filter:drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
	drop-shadow(-4px -4px 8px rgba(0,0,0,0.1));
}

#skate .wraplines,
#snowman .wrapballs {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100%;
}

#candle svg,
#bell svg,
#mittens svg,
#skate svg,
#fireworks svg,
#hotchoc svg,
#snowman svg,
#snowglobe svg,
#sled svg {
	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%; 
  height: auto; 
  max-width: 100%; 
  max-height: 100%; 
  margin: auto auto 0;
}

#message .img {
	display: flex;
  justify-content: center;
  height: 70%;
  overflow: hidden;
	padding:5px;
}

#message div.img + div.img {
	height:30%;
}

img {
	flex:none;
	width: 100%;
	height: 100%;
}

#candle,
#bell,
#mittens,
#skate,
#fireworks,
#hotchoc,
#snowman,
#snowglobe,
#sled {
	z-index:2000;
	overflow:hidden;
}

.wrap,
.wrapman,
.wrapballs,
.wraplines,
.wrapskate {
	z-index:1000;
}

#candle:hover .wrap,
#bell:hover .wrap,
#mittens:hover .wrap,
#skate:hover .wrapskate,
#fireworks:hover .wrap,
#hotchoc:hover .wrap,
#snowman:hover .wrapman,
#snowglobe:hover .wrap,
#sled:hover .wrap {
	filter: drop-shadow(-4px 5px 8px rgba(0,0,0,0.5));
	-webkit-filter: drop-shadow(-4px 5px 8px rgba(0,0,0,0.5));
	drop-shadow(-4px 5px 8px rgba(0,0,0,0.5));
	-moz-filter:drop-shadow(-4px -5px 8px rgba(0,0,0,0.5));
}

#candle #flameEnd {
	visibility:hidden;
}

#candle #bg_grad1 {
	fill:url(#candle_grad1);
	opacity:0;
}

#bell {
	background-color:#dedddc;
}

#mittens {
	background-color:#e6e7e8;
}

#mittens .cls-6, 
#mittens .cls-8 {
	opacity:0;
}

#skate {
	background-color:#d4d6d9;
}

#skatelines #thickstoke {
	display:none;
}

#message {
	height:100%;
}

#fireworks {
	background-color:#dedddc;
}

#hotchoc {
	background-color:#e6e7e8;
}

#hotchoc .marshmellow {
	fill:#FFFFFF;
}

#hotchoc #steam1_ov,
#hotchoc #steam2_ov {
	visibility:hidden;
}

#snowman {
	background-color:#d4d6d9;
}

#snowman .snowball {
	opacity:0;
}

#snowglobe {
	background-color:#e6e7e8;
}

#snowglobe-svg .snow { 
  fill: #ffffff; 
  opacity: 0;
}

#sled {
	background-color:#dedddc;
	overflow:hidden;
}

#sled .treelg,
#sled .treesm,
#sled .treemd {
	opacity:0;
}

#popup {
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
  	z-index: 8000;
  	width: 100%;
  	height: 100%;
	opacity: 0;
	display: none;
}


#winterfest {
	position:relative;
	background-color:#ffffff;
	width:90%;
	color:#008ccc;
	margin:0px auto;
	top:50%;
	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

#winterfestbg {
	background-color:#008ccc;
	width:100%;
	padding:0px;
}

#winterfestbg .bg {
	display:none;
}

#winterfestbg .logo {
  padding: 20px;
  width: 70%;
  margin: 0px auto;
}

#winterfest .text {
	padding:20px;
}

#winterfestbg .logo img {
	filter: drop-shadow(-1px -1px 4px rgba(0,0,0,0.4));
	-webkit-filter: drop-shadow(-1px -1px 4px rgba(0,0,0,0.4));
	-moz-filter:drop-shadow(-1px -1px 4px rgba(0,0,0,0.4));
	drop-shadow(-1px -1px 4px rgba(0,0,0,0.4));
}

#winterfest h2 {
	font-size:20px;
	font-family: 'alrightsansbold';
}

#winterfest h3 {
	font-size:15px;
	font-style: italic;
	margin-top:0px;
	font-family: 'alrightsansmedium';
}

.btn-primary {
	background-color:#00a1ea;
	border: none;
  padding: 10px 22px;
  font-size: 15px;
	margin-top:20px;
	white-space:normal;
	font-family: 'alrightsansregular';
}

.btn-primary:hover {
	background-color:#008ccc;
}

button.close {
  padding: 0px 5px 4px 6px;
  background: #ffffff;
  top: 0;
  right: 0;
	opacity:1;
	position:absolute;
    z-index: 5;
}




@media only screen and (min-width: 768px) {
	
	#bell svg {
		max-height:91%;
	}
	
	#sled svg {
		left:3%;
	}
	
	#message.small {
		display:block;
	}
	
	#message.large {
		display:none;
	}
	
	#winterfest {
		width:710px;
	}
	
	#winterfestbg {
		width:710px;
	}
	
	#winterfest .text {
		padding: 15px 25px 30px 25px;
	}
	
	#winterfest h2 {
		font-size:24px;
	}
	
	#winterfest h3 {
		font-size:22px;
	}
	
	.btn-primary {
	  font-size: 18px;
	}
	
	#winterfestbg .bg {
		background-color:#ffffff;
		display:block;
	}
	
	#winterfestbg .logo {
		width:420px;
		height:275px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 60px 0 0;
		margin:0px;
	}
	
	#winterfestbg .logo img {
	filter: drop-shadow(-1px -1px 4px rgba(0,0,0,0.8));
	-webkit-filter: drop-shadow(-1px -1px 4px rgba(0,0,0,0.8));
	-moz-filter:drop-shadow(-1px -1px 4px rgba(0,0,0,0.8));
	drop-shadow(-1px -1px 4px rgba(0,0,0,0.8));
}

	#winterfestbg .bg img {
		width:710px;
		height:287px;
		padding:0px;
	}
	
	#winterfestbg #text {
		position:absolute;
		padding:0px;
	}
	
}


@media only screen and (min-width: 992px) {
	
	#bell svg {
		max-height:100%;
	}
	
	#sled svg {
		left:0;
	}

	#message.small {
		display:none;
	}
	
	#message.large {
		display:block;
	}
	
	#message .img,
	#message div.img + div.img {
	  height: 100%;
	}
	
	#winterfest {
		width:850px;
	}
	
	#winterfest .text {
		padding:25px 40px 50px 40px;
	}
	
	#winterfest h2 {
		font-size:28px;
	}
	
	#winterfest h3 {
		font-size:24px;
	}
	
	#winterfestbg {
		width:850px;
	}
	
	#winterfestbg .logo {
		width:500px;
		height:328px;
	}
	
	#winterfestbg .bg img {
		width:850px;
		height:344px;
	}
	
}


@media only screen and (min-width: 1200px) {


	
}