@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
}

/* Fade In Up */
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}


/* Fade In Down */
@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}
.fadeInDown {
	animation-name: fadeInDown;
}

/* Custom --------------- */
.animate {
	opacity: 0;
	transform: translate3d(0, 40%, 0);
	-webkit-animation-duration: 1s;
	animation-duration: all 1s;
	-webkit-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.animate.in-view {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* ----------------------------------------------
   Icons & Animate Fill
   ---------------------------------------------- */
.fadein svg {
	stroke-width: 2;
	fill-opacity: 0;
	transition: fill-opacity 1s;
}
.fadein svg.finished {
	fill-opacity: 1;
}


/* ----------------------------------------------
   WHALE TAIL - GRAY
   ---------------------------------------------- */
.whaletail-gray,
.crossed-harpoons-blue {
	display: inline-block;
	vertical-align: middle;
	width: 80px;
	height: 80px;
	margin: 0 auto;
}
.fishhook-blue,
.whaletail-blue,
.flag-coral,
.telescope-coral,
.harpoon-coral {
	display: block;
	margin: 0 auto;
	width: 50px;
	height: 50px;
}
.flag-coral,
.telescope-coral,
.harpoon-coral {
	display: block;
	margin: 0;
	width: auto;
	height: 50px;
}
.flag-coral,
.harpoon-coral {
	width: 50px;
}
.telescope-coral,
.telescope-blue {
	width: 100px;
}
.telescope-blue{
	height: 50px;
	margin: 0 auto;
}


.svg {
	stroke-opacity: 0;
	fill-opacity: 0;
}
.create {
	stroke-width: 2;
	stroke-opacity: 1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;

	-o-animation: draw 4s linear forwards;
	-ms-animation: draw 4s linear forwards;
	-moz-animation: draw 4s linear forwards;
	-webkit-animation: draw 4s linear forwards;
	animation: draw 4s linear forwards;

	-o-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	-moz-animation-delay: 0.8s;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
@keyframes draw {
	50% {
		stroke-dashoffset: 0;
		fill-opacity: 0;
	}
	100% {
		fill-opacity: 1;
		stroke-dashoffset: 0;
	}
}