/* PRESETS */
@font-face {
    font-family: Typewriter;
    src: url(/font/AmericanTypewriter.ttc);
}

@font-face {
	font-family:Avenir Light;
	src: url(/font/AvenirLTPro_Light.otf);
}

@font-face {
	font-family:Avenir Medium;
	src: url(/font/AvenirLTPro_Medium.otf);
}

@font-face {
	font-family:Avenir Black;
	src: url(/font/AvenirLTPro_Black.otf);
}

@font-face {
	font-family:Abril;
	src: url(/font/Abril_Display_Regular.otf);
}

@font-face {
	font-family:Abril It;
	src: url(/font/Abril_Display_Italic.otf);
}

@font-face {
	font-family:Montserrat Black;
	src: url(/font/Montserrat-Black.ttf);
}

@font-face {
	font-family:Montserrat Light;
	src: url(/font/Montserrat-Light.ttf);
}

@font-face {
	font-family:Playfair;
	src: url(/font/PlayfairDisplay-Regular.ttf);
}

@font-face {
	font-family:Playfair It;
	src: url(/font/PlayfairDisplay-Italic.ttf);
}
/*
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;
*/
/**********/

/* GENERAL */
html {
	height:100%;
}

body {
	min-height:100%;
	width:100%;
	margin:0px;
	position:relative;
/*	background-color:#eefdff !important;   */
}

div {
	box-sizing:border-box;
}

p {
	margin:0;
}

p.header {
	font-family: 'Roboto', sans-serif;
	font-weight:900;
	font-size:28px;
	color:#363732;
}

p.subtitle {
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	font-size: 18px;
	color:#363732;
}

p.body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
}

p.subscript {
	font-family:Abril It;
	font-size:10px;
	color:#363732;
}

a {
	color:#95d0cf !important;
}

.brighten-image {
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,0.3);
	left:0px;
	top:0px;
	z-index:2;
}

.darken-image {
	position:absolute;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.3);
	left:0px;
	top:0px;
	z-index:2;
	
}

#logo {
	height:40px;
	width:auto;
	position:absolute;
	top:10px;
	right:20px;
	cursor:pointer;
	z-index:99;
}

#footer {
	position:absolute;
	bottom:-40px;
	background-color:#363732;
	width:100%;
	z-index:99;
	display:none;
}

#footer p {
	text-align: left;
	margin-bottom: 0px;
	margin-left: 20px;
	line-height: 25px;
	margin-top: 3px;
	color:#fff;
}

.inner-body {
	max-width:650px;
	display:block;
	margin:20px auto;
	background: rgba(255, 255, 255, 0.75);
	z-index: 99;
	height: 100%;
	position: relative;
	padding:0px 30px;
}

/**********/

/* LOADING CSS */
.loading {
	height:100%;
	width:100%;
	position:absolute;
	left:0px;
	top:0px;
	background:white;
	z-index:100;
}

.loading-doodle-parent {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;
	height:100px;
	width:100px;
}

.loading-text {
	bottom:-35px;
	position:absolute;
	width:100%;
	text-align:center;
	text-transform:uppercase;
}

.loading-doodle {
	stroke-dasharray: 1608;
	stroke-dashoffset: 1608;
	animation: loading 3s linear alternate infinite;
}

.loading svg {
	height:100px;
	width:auto;
}

@keyframes loading {
	to {
		stroke-dashoffset: 0;
	}
	from {
		stroke-dashoffset: 1608;
	}
}
/***************/

/* DOODLE CSS */

.wind-doodle {
	width:30px;
	height:auto;
}

.show-winddoodle {
	stroke-dasharray: 57;
	stroke-dashoffset: 57;
	-webkit-animation: winddoodleinWK 1s linear forwards;
	-moz-animation: winddoodleinMOZ 1s linear forwards;
	-o-animation: winddoodleinO 1s linear forwards;
	animation: winddoodlein 1s linear forwards;
}


@-webkit-keyframes winddoodleinWK {
	from {
		stroke-dashoffset: 57;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@-moz-keyframes winddoodleinMOZ {
	from {
		stroke-dashoffset: 57;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@-o-keyframes winddoodleinO {
	from {
		stroke-dashoffset: 57;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes winddoodlein {
	from {
		stroke-dashoffset: 57;
	}
	to {
		stroke-dashoffset: 0;
	}
}

.seaweed-doodle {
	height:30px;
	width:auto;
}

.show-seaweeddoodle {
	stroke-dasharray: 21;
	stroke-dashoffset: 21;
	-webkit-animation: seaweeddoodleinWK 1.5s linear forwards;
	-moz-animation: seaweeddoodleinMOZ 1.5s linear forwards;
	-o-animation: seaweeddoodleinO 1.5s linear forwards;
	animation: seaweeddoodlein 1.5s linear forwards;
}

@-webkit-keyframes seaweeddoodleinWK {
	from {
		stroke-dashoffset: 21;
	}
	to {
		stroke-dashoffset: 42;
	}
}

@-moz-keyframes seaweeddoodleinMOZ {
	from {
		stroke-dashoffset: 21;
	}
	to {
		stroke-dashoffset: 42;
	}
}

@-o-keyframes seaweeddoodleinO {
	from {
		stroke-dashoffset: 21;
	}
	to {
		stroke-dashoffset: 42;
	}
}

@keyframes seaweeddoodlein {
	from {
		stroke-dashoffset: 21;
	}
	to {
		stroke-dashoffset: 42;
	}
}

.water-doodle {
	width:auto;
	height:50px;
}

.show-waterdoodle {
	stroke-dasharray: 665;
	stroke-dashoffset: 665;
	-webkit-animation: waterdoodleinWK 1.5s linear forwards;
	-moz-animation: waterdoodleinMOZ 1.5s linear forwards;
	-o-animation: waterdoodleinO 1.5s linear forwards;
	animation: waterdoodlein 1.5s linear forwards;
}

@-webkit-keyframes waterdoodleinWK {
	from {
		stroke-dashoffset: 665;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@-moz-keyframes waterdoodleinMOZ {
	from {
		stroke-dashoffset: 665;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@-o-keyframes waterdoodleinO {
	from {
		stroke-dashoffset: 665;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes waterdoodlein {
	from {
		stroke-dashoffset: 665;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/**************/

/* LOGO CLICK CSS */
.logo-skwig-j {
	stroke-dasharray:1560;
	stroke-dashoffset:0;
}

.logo-skwig-s {
	stroke-dasharray:1604;
	stroke-dashoffset:0;
}

.skwiggle-logo-j {
	-webkit-animation: skwiggle-logo-j-WK 0.5s linear alternate infinite;
	-moz-animation: skwiggle-logo-j-MOZ 0.5s linear alternate infinite;
	-o-animation: skwiggle-logo-j-O 0.5s linear alternate infinite;
	animation: skwiggle-logo-j 0.5s linear alternate infinite;
}

.skwiggle-logo-s {
	-webkit-animation: skwiggle-logo-s-WK 0.5s linear alternate infinite;
	-moz-animation: skwiggle-logo-s-MOZ 0.5s linear alternate infinite;
	-o-animation: skwiggle-logo-s-O 0.5s linear alternate infinite;
	animation: skwiggle-logo-s 0.5s linear alternate infinite;
}

@-webkit-keyframes skwiggle-logo-j-WK {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:-1560;
	}
}

@-moz-keyframes skwiggle-logo-j-MOZ {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:-1560;
	}
}

@-o-keyframes skwiggle-logo-j-O {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:-1560;
	}
}

@keyframes skwiggle-logo-j {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:-1560;
	}
}

@-webkit-keyframes skwiggle-logo-s-WK {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:1604;
	}
}

@-moz-keyframes skwiggle-logo-s-MOZ {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:1604;
	}
}

@-o-keyframes skwiggle-logo-s-O {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:1604;
	}
}

@keyframes skwiggle-logo-s {
	from {
		stroke-dashoffset:0;
	}
	to {
		stroke-dashoffset:1604;
	}
}

.unskwiggle-logo-j {
	-webkit-animation: unskwiggle-logo-j-WK 0.5s linear forwards;
	-moz-animation: unskwiggle-logo-j-MOZ 0.5s linear forwards;
	-o-animation: unskwiggle-logo-j-O 0.5s linear forwards;
	animation: unskwiggle-logo-j 0.5s linear forwards;
}

.unskwiggle-logo-s {
	-webkit-animation: unskwiggle-logo-s-WK 0.5s linear forwards;
	-moz-animation: unskwiggle-logo-s-MOZ 0.5s linear forwards;
	-o-animation: unskwiggle-logo-s-O 0.5s linear forwards;
	animation: unskwiggle-logo-s 0.5s linear forwards;
}

@-webkit-keyframes unskwiggle-logo-j-WK {
	to {
		stroke-dashoffset:0;
	}
}

@-moz-keyframes unskwiggle-logo-j-MOZ {
	to {
		stroke-dashoffset:0;
	}
}

@-o-keyframes unskwiggle-logo-j-O {
	to {
		stroke-dashoffset:0;
	}
}

@keyframes unskwiggle-logo-j {
	to {
		stroke-dashoffset:0;
	}
}

@-webkit-keyframes unskwiggle-logo-s-WK {
	to {
		stroke-dashoffset:0;
	}
}

@-moz-keyframes unskwiggle-logo-s-MOZ {
	to {
		stroke-dashoffset:0;
	}
}

@-o-keyframes unskwiggle-logo-s-O {
	to {
		stroke-dashoffset:0;
	}
}

@keyframes unskwiggle-logo-s {
	to {
		stroke-dashoffset:0;
	}
}

/******************/

/* 404 CSS */

#swirl {
	position:absolute;
	top:50%;
	left:50%;
	height:150px;
	width:auto;
	margin-top:-75px;
	margin-left:-75px;
	z-index:99;
}

#error-message {
	position:absolute;
	top:50%;
	width:100%;
	text-align:center;
	margin-top:75px;
	z-index:99;
}


/*********/