html, body { margin: 0; padding: 0; font-family: 'Coiny', cursive; font-size: 16px; /*background-color: #e0c194; background-image: radial-gradient(50% 50%, circle cover, #e0c194, #d1a76a 100%);*/ color: #fff; }
/* Alt: font-family: 'Roboto', sans-serif; */
body { text-align: center }
h1 { font-size: 6vw; color: #fff; letter-spacing: -0.25vw; margin: 0; }
h2.subtitle { font-size: 2.15vw; margin-top: 0px; margin-bottom: 40px; font-family: 'Roboto Slab', sans-serif; }
/*.banner_fixed_h { height: 15vw; width: 100%; padding-top: 50px; top: 0; position: fixed; z-index: 1; }
.banner_fixed_f { width: 100%; bottom: 0; position: fixed; z-index: 1; } */
.banner_fixed_f { font-family: 'Roboto Slab', sans-serif; }
#container { margin: 0 auto; }

#social-share { padding: 0; }
#social-share li { list-style: none; display: inline; margin-left: 1em; }
#social-share li:first-of-type { margin-left: 0; }

/* = Background 2 - Radial Gradient */
/* html { background: rgba(249,171,62,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(231,56,39,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(249,171,62,1)), color-stop(100%, rgba(231,56,39,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(231,56,39,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(231,56,39,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(231,56,39,1) 100%);
background: radial-gradient(ellipse at center, rgba(249,171,62,1) 0%, rgba(231,56,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ab3e', endColorstr='#e73827', GradientType=1 ); }

/* = Background 3 - Radial Gradient */
html { background: rgba(249,171,62,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(253,78,48,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(249,171,62,1)), color-stop(100%, rgba(253,78,48,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(253,78,48,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(253,78,48,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(249,171,62,1) 0%, rgba(253,78,48,1) 100%);
background: radial-gradient(ellipse at center, rgba(249,171,62,1) 0%, rgba(253,78,48,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9ab3e', endColorstr='#fd4e30', GradientType=1 ); height: 100%; background-size: cover;}

/* ===[ COUNTDOWN Styles ]=== */

#countdown {
    font-size: 7rem;
    color: #fff;
	width: 80%;
	margin: 4rem auto;
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media only screen and (max-width: 1750px) {
    #countdown { font-size: 6rem; }
}

@media only screen and (max-width: 1500px) {
    #countdown { font-size: 5rem; }
}

@media only screen and (max-width: 1250px) {
    #countdown { font-size: 4.5rem;  }
}

@media only screen and (max-width: 1150px) {
    #countdown {  font-size: 4rem;  }
}

@media only screen and (max-width: 968px) {
    #countdown { width:90%; font-size: 3.5rem;  }
}

@media only screen and (max-width: 400px) {
    #countdown { font-size: 2.5rem;  }
}

@media only screen and (max-width: 650px), only screen and (max-width: 1000px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	h1 { font-size: 2.25rem; line-height: 1.2; margin: 0 auto; padding: 3rem; }
	h2.subtitle { font-size: 1.5rem; line-height: 1.4; margin: 1rem auto 3rem; padding: 0 2rem; }
	#countdown { font-size: 2.5rem; }
	.banner_fixed_f { font-size: 1rem; line-height: 1.5; padding: 3rem; }
	#social-share img { width: 10%; }
	.mascot { width: 60%; margin: 4rem auto; }
}