* {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    display:block;
}

body, html {
	height: 100%;
	overflow-x: hidden;
}

body {
	background: url("images/antarctica.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

#container {
	width: 90%;
	margin: 5%;
}

header {
	height: 3%;
}

h1 {
	text-align: center;
	color: navy;
}

nav {
	background-color: navy;
	margin: 1%;
	padding: 2%;
	text-align: center;
	height: 2%;
	font-family: 'Roboto Condensed';
}

nav ul, nav ul li, nav ul li a {
	display: inline;
	padding: 3%;
	color: white;
	text-decoration: none;
}

nav ul li a:hover {
	color: #81B0DD;
}

h3 {
	color: white;
	font-family: 'Roboto Condensed';
	font-size: 1rem;
	background-color: navy;
	text-decoration: none;
	padding: 2%;
	width: 40%;
	margin: auto;
	text-align: center;
}

#grow {
	animation: pound .25s alternate;
	animation-duration: 2s;
	animation-iteration-count: 4;
	transform-origin: center;
}

@keyframes pound {
	to { 
		transform: scale(1.2); 
	}
}

#over {
	overflow: hidden;
}

.slidein {
	animation-duration: 2s;
	animation-name: slidein;
	animation-iteration-count: 1;
}

@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%;
	}

	to {
		margin-left: 0%;
		width: 100%;
	}
}

h2 {
	color: navy;
	text-align: center;
	margin-top: 2%;
	font-family: 'Roboto Condensed';
	font-size: 1.5rem;
}

a {
	text-decoration: none;
}

p {
	font-family: 'Open Sans';
}

p::first-letter {
	color: navy;
	font-size: 1.5rem;
}

/**** homepage main text fade in on white box ***/

#intro {
	background-color: white;
	width: 90%;
	margin: auto;
	text-align: center;
	padding: 2%;
	-webkit-transition: fadein 2s;
	animation-duration: 10s;
    -moz-transition: fadein 2s;
    transition: fadein 2s;
    -webkit-animation-name: fadein;
	animation-name: fadein;
}

@keyframes fadein {
    from { 
    	opacity: 0; 
    }

    to { 
    	opacity: 1; 
    }
}

@-moz-keyframes fadein {
    from { 
    	opacity: 0; 
    }
    
    to { 
    	opacity: 1; 
    }
}

@-webkit-keyframes fadein {
    from { 
    	opacity: 0; 
    }
    
    to   { 
    	opacity: 1; 
    }
}

figure {
	text-align: center;
}

/*** homepage penguin rotate wiggle ***/

#baby {
	max-width: 200px;
	margin: auto;
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	}

#baby:hover {
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
		-moz-transform: rotate(10deg);
		transition: 1s;
		-webkit-transition: 1s;
		-moz-transition: 1s;
}

#little {
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
}

#little:hover {
	transform: rotate(-20deg);
	-webkit-transition: rotate(-20deg);
	transition-delay: .5s;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
}

#mini {
	transition: 1s;
	-webkit-transition: 1s;
	-moz-transition: 1s;
}

#mini:hover {
	transform: rotate(10deg);
	-webkit-transition: rotate(10deg);
	transition-delay: 1s;
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
}

/*** walking penguins in background ***/ 

#penguins img {
	max-width: 100px;
	margin-top: 5%;
}

@keyframes penguingroup {
	0% {
		margin-left: -50%;
	}
	100% {
		margin-left: 100%;
	}
}
@-webkit-keyframes penguingroup {
	0% {
		margin-left: -50%;
	}
	100% {
		margin-left: 100%;
	}
}
@-moz-keyframes penguingroup {
	0% {
		margin-left: -50%;
	}
	100% {
		margin-left: 100%;
	}
}

#penguin1 {
	animation: penguingroup 20s linear infinite;
	-webkit-animation: penguingroup 20s linear infinite;
	-moz-animation: penguingroup 20s linear infinite;
	z-index: -5;
	position: absolute;
}

#penguin2 {
	animation: penguingroup 25s linear infinite;
	-webkit-animation: penguingroup 25s linear infinite;
	-moz-animation: penguingroup 25s linear infinite;
	z-index: -15;
	position: absolute;
}

#penguin3 {
	animation: penguingroup 12s linear infinite;
	-webkit-animation: penguingroup 12s linear infinite;
	-moz-animation: penguingroup 12s linear infinite;
	z-index: -12;
	position: absolute;
}

#penguin4 {
	animation: penguingroup 15s linear infinite;
	-webkit-animation: penguingroup 15s linear infinite;
	-moz-animation: penguingroup 15s linear infinite;
	z-index: -25;
	position: absolute;
}

#penguin5 {
	animation: penguingroup 30s linear infinite;
	-webkit-animation: penguingroup 30s linear infinite;
	-moz-animation: penguingroup 30s linear infinite;
	z-index: -2;
	position: absolute;
}

/**** gradient effect on voyage text passage on pilgrimage page ***/

#voyage p {
	color: white;
}

#voyage {
	padding: 2%;
	padding-bottom: 4%;
	text-align: center;
	margin: auto;
	background: linear-gradient(2deg, #00427e, #7fade0);
	background-size: 100% 100%;
	animation-name: voyage;
	-webkit-animation: voyage 30s ease infinite;
	-moz-animation: voyage 30s ease infinite;
	animation: voyage 30s ease infinite;
}

@-webkit-keyframes voyage {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes voyage {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes voyage { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#types {
	padding: 2%;
	margin: 1%;
	background-color: rgba(255, 255, 255, .5);
}

/***** species background color change *******/

.species {
	background-color: #2E68A8;
	margin: auto;
    animation-name: species;
    animation-duration: 4s;
}

@keyframes species {
    from {
    	background-color: #81B0DD;
    }
    
    to {
    	background-color: #2E68A8;
    }
}

.species p, .species h2 {
	color: white;
	text-align: center;
}

.species p {
	padding: 1%;
}

.species h2 {
	padding-top: 2%;
}

.species img {
	max-width: 150px;
	margin-left: 28%;
}

/********* HORIZONTAL TICKER ************/

#iFeatures {
	position: absolute;
  width: 100%;
  height: 5%;
  left: 0;
  background-color: rgba(0,39,62,.85);
}

.ticker {
  position: absolute;
  left: 10px;
  right: 10px;
  padding: 1%;
  overflow: hidden;
}

.ticker p {
  position: relative;
  white-space: nowrap;
  width: auto;
  color: white;
  font-size: .9rem;
}

.ticker a {
  color: white;
}

.ticker a:hover {
	color: blue;
}

.ticker p::first-letter {
	color: white;
	font-size: .9rem;
}

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




/**** MEDIA QUERIES ****/

@media (min-width: 500px) {

	nav {
		padding: 1%;
	}

	#intro {
		max-width: 500px;
	}

	.species {
		text-align: center;
		margin: auto;
	}

	.species img {
		margin: auto;
	}

}

@media (min-width: 800px) {

	.species {
		max-width: 1100px;
	}

	.species h2 {
		text-align: left;
		margin-left: 4%;
	}

	.species p {
		width: 80%;
		text-align: right;
		margin-left: 10%;
		padding-top: 0;
	}

	.species img {
		float: left;
		padding-left: 4%;
		padding-right: 5%;
		clear: both;
		padding-bottom: 3%;
		padding-top: 2%;
	}

	#voyage {
		max-width: 800px;
	}

}