/*
	Orange: FF6700
	Magenta: FC0098
*/
html, body
{
	height: 100%;
	overflow: hidden;
}

body
{
	background-color: #00AFF0;
	font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	margin: 0px;
	padding: 0px;
}

.bg {
	background-color: #FFFFFF;
	background-image: url("../images/bgLine.jpg");
	background-repeat:  repeat-x;
}

.bgWebkit {
	background-color: #FFF;
	background-image: url("../images/bgLineWebkit.jpg");
	background-repeat:  repeat-x;
}

div#header
{
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0px;
	padding: 18px 20px 14px;
}
	div#header .left
	{
		display: flex;
		align-items: center;
		gap: 12px;
	}

	div#header h1
	{
		font-size: 30px;
		font-weight: 600;
		letter-spacing: -0.03em;
		line-height: 1;
		margin: 0px;
		padding: 0px;
	}

	div#header img
	{
		display: block;
		height: 42px;
		width: auto;
	}

	#languageSelector
	{
		appearance: none;
		background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23003B5A' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 10px center;
		border: 0;
		border-radius: 6px;
		color: #003B5A;
		font-family: inherit;
		font-size: 13px;
		font-weight: 600;
		margin-right: 4px;
		padding: 7px 28px 7px 10px;
	}

ul#nav
{
	background-color: #003B5A;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	margin: 0px;
	padding: 0px;
	padding-bottom: 10px;
	padding-left: 16px;
	padding-top: 10px;
}
	ul#nav li
	{
		border-right: 1px solid #286B82;
		color: white;
		display: inline;
		list-style: none;
		margin: 0px;
		padding: 0px;
		padding-left: 8px;
		padding-right: 8px;
	}
	
	ul#nav a:link
	{
		color: #FFFFFF;
		text-decoration: none;
	}
	
	ul#nav a:visited
	{
		color: #FFFFFF;
		text-decoration: none;
	}
	
	ul#nav a:hover
	{
		text-decoration: underline;
	}

#viewport
{
	height: 840px;
	margin: 0 auto;
	position: relative;
	transform-origin: top center;
	width: 1000px;
}

div#storyContent
{
	background-color: #FFFFFF;
	display: none;
	height: 840px;
	left: 0;
	margin: 0;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 0;
	width: 1000px;
}

#headlineStory { padding-bottom: 40px; }

div#mainContent
{
	background-image: url("../images/background.png");
	background-position: center top;
	background-repeat: no-repeat;
	height: 840px;
	margin: 0;
	max-width: 1000px;
	min-width: 1000px;
	overflow: hidden;
	padding: 0px;
	position: relative;
	width: 1000px;
}

	h2.tagline
	{
		color: #FFFFFF;
		font-size: 28px;
		font-weight: 600;
		height: 64px;
		letter-spacing: -0.02em;
		line-height: 1.25;
		margin: 0px auto;
		padding: 18px 40px 0;
		text-align: center;
		text-shadow: 0 1px 0 rgba(0, 60, 90, 0.12);
	}
	
	div#svgload
	{
		height: 740px;
		margin: 0px;
		padding: 0px;
		position: relative;
		width: 100%;
	}

	div#svgload svg
	{
		display: block;
	}
	
#svgload rect
{
	transition: fill 0.45s ease;
}

.lightOff {
	fill: #FD0099;
}

.lightOn {
	fill: #FF6800;
	filter: drop-shadow(0 0 2px #ffd27a);
}

.tweetQuote {
	cursor: pointer;
	position: absolute;
	z-index: 7;
}

.tweetQuoteLarge {
	background-image: url("../images/tweetBackground.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	color: white;
	font-size: 12px;
	font-weight: 600;
	height: 87px;
	line-height: 1.35;
	padding: 10px 16px 10px 10px;
	position: absolute;
	width: 190px;
	z-index: 7;
}

.zoomer {
	cursor: pointer;
	position: absolute;
	z-index: 5;
}

div#slider ul { margin: 0px; padding: 0px; }

/* STORIES */
button {
	background: none;
	background-image: url("../images/button.png");
	background-repeat: no-repeat;
	border: none;
	color: #0b6ea8;
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	height: 32px;
	letter-spacing: -0.01em;
	margin-right: 34px;
	padding: 4px 8px;
	width: 158px;
}

div#storyContent { 
 }

div#storyContent p {
	color: #FFFFFF;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.3;
	margin: 16px 0 8px;
	max-width: 680px;
	min-height: 72px;
}

#personAnim {
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

div#grandmaMeetsDog {
	background-image: url("../images/background_tv.png");
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

div#eggnogCelebration {
	background-image: url("../images/background_webcam.png");
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

div#callingGrandpa {
	background-image: url("../images/background_freetalk.png");
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

div#dormRoomate {
	background-image: url("../images/background_headset.png");
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

div#homeworkChecker {
	background-image: url("../images/background_smartphone.png");
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

.greeting {
	align-items: center;
	animation: greet-pop 0.45s cubic-bezier(.2, 1.45, .4, 1) both, greet-float 2.6s ease-in-out 0.45s infinite;
	background-image: url("../images/greetingsBubble.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	display: flex;
	font-size: 11px;
	font-weight: 700;
	height: 96px;
	justify-content: center;
	letter-spacing: -0.01em;
	line-height: 1.15;
	padding: 8px 8px 24px;
	position: absolute;
	text-align: center;
	text-shadow: 0 1px 0 rgba(120, 0, 60, 0.25);
	width: 88px;
	z-index: 6;
}

.flourish {
	animation: flourish-wobble 3.8s ease-in-out infinite;
	pointer-events: none;
	transform-origin: center center;
	z-index: 4;
}

#moon, #sun {
	pointer-events: none;
	z-index: 4;
}

#moon {
	animation: moon-drift 4.8s ease-in-out infinite;
	transform-origin: center center;
}

#sun {
	animation: sun-glow 3.4s ease-in-out infinite;
	transform-origin: center center;
}

#snow {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

#snow span {
	animation-iteration-count: infinite;
	animation-name: snow-fall;
	animation-timing-function: linear;
	background: #fff;
	border-radius: 50%;
	position: absolute;
	top: -12px;
}

@keyframes greet-pop {
	from { opacity: 0; transform: translateY(10px) scale(0.55); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes greet-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px); }
}

@keyframes flourish-wobble {
	0%, 100% { transform: rotate(var(--spin)) scale(1); }
	50% { transform: rotate(calc(var(--spin) + 14deg)) scale(1.08); }
}

@keyframes moon-drift {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50% { transform: translateY(16px) rotate(-10deg); }
}

@keyframes sun-glow {
	0%, 100% { transform: translateY(0) rotate(-8deg) scale(1); filter: drop-shadow(0 0 0 rgba(255, 220, 80, 0)); }
	50% { transform: translateY(-12px) rotate(8deg) scale(1.07); filter: drop-shadow(0 0 12px rgba(255, 220, 80, 0.85)); }
}

@keyframes snow-fall {
	0% { transform: translate3d(0, 0, 0); }
	100% { transform: translate3d(36px, 900px, 0); }
}

#storyContent a { text-decoration: none; }