/*
 ----------------------------------
  Animations
	The keys frames represents the
	animations defined in the page.
 ----------------------------------
*/

@keyframes aContent {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


@media screen and (max-width: 659px) {
	@keyframes aHeader {
		0% {
			width: 100%;
			height: 34px;
			opacity: 0;
			border-bottom: 0px solid #fff;
		}
		50% {
			border-bottom: 15px solid #aaa;
		}
		100% {
			width: 100%;
			height: 104px;
			opacity: 1;
			border-bottom: 1px solid #aaa;
		}
	}

	@keyframes aLogoI {
		0% {
			opacity: 1;
			width: 400px;
			left: 50%;
			top: 40%;
			margin-left: -200px;
			margin-top: -60px;
		}
		100% {
			width: 300px;
			left: 50%;
			top: 10px;
			margin-left: -150px;
			margin-top: 0px;
		}
	}
	
	@keyframes aContact {
		0% {
			opacity: 0;
			background-color: #ddd;
		}
		30% {
			background-color: #555;
		}
		100% {
			background-color: #ddd;
			opacity: 1;
		}
	}

}

@media screen and (min-width: 660px) {
	@keyframes aHeader {
		0% {
			width: 0px;
			height: 34px;
			opacity: 0;
			border-bottom: 10px solid #fff;
		}
		50% {
			border-bottom: 15px solid #aaa;
		}
		100% {
			width: 100%;
			height: 104px;
			opacity: 1;
			border-bottom: 1px solid #aaa;
		}
	}

	@keyframes aLogoI {
		0% {
			opacity: 1;
			width: 400px;
			left: 50%;
			top: 40%;
			margin-left: -200px;
			margin-top: -60px;
		}
		50% {
			width: 300px;
			left: 50%;
			top: 40%;
			margin-left: -150px;
			margin-top: -42px;
		}
		100% {
			width: 300px;
			left: 10px;
			top: 10px;
			margin-left: 0px;
			margin-top: 0px;
		}
	}
	
	@keyframes aContact {
		0% {
			right: -350px;
		}
		100% {
			right: 30px;
		}
	}

}



/*
 ----------------------------------
  Base styles
	Core styling that affects the
	base of the page.
 ----------------------------------
*/

* {
	margin: 0px 0px 0px 0px;
	font-family: Arial;
}

body {
	background-color: #fff;
	overflow-x: hidden;
}

h1 {
	margin-top: 10px;
	font-size: larger;
	padding-left: 10px;
	border-bottom: 1px solid black;
}

h2 {
	margin-top: 10px;
	padding-left: 15px;
	font-size: large;
	font-weight: bold;
}

h3 {
	margin-top: 10px;
	margin-left: 20px;
	font-size: large;
	border-bottom: 1px solid #ccc;
	width: 70%;
	min-width: 300px;
	max-width: 600px;
}

.perkInfo {
}

.perk {
	padding-left: 20px;
	width: 70%;
	min-width: 300px;
	max-width: 600px;
}

#content {
	padding-bottom: 450px;
}


/*
 ----------------------------------
  Animation styles
	Putting them outside the media
	block will ensure animation
	runs no more than once.
 ----------------------------------
*/

#header {
	background-color: #ddd;
	height: 34px;
	width: 0px;
	
	animation-duration: 0.8s;
	animation-name: aHeader;
	animation-delay: 0.9s;
	animation-fill-mode: forwards;
}

#logoI {
	position: absolute;
	
	width: 400px;
	left: 50%;
	top: 40%;
	margin-left: -200px;
	margin-top: -60px;
	
	animation-name: aLogoI;
	animation-duration: 1s;
	-webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}

#content {
	padding: 10px;
	padding-bottom: 120px;
	
	opacity: 0;
	animation-duration: 1s;
	animation-name: aContent;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

.contact {
	position: fixed;
	animation-duration: 1s;
	animation-name: aContact;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}

#footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: 15px;
	background-color: #aaa;
}

@media screen and (max-width: 659px) {
	#content {
	}
	
	.contact {
		background-color: #ddd;
		left: 0px;
		right: 0px;
		padding: 10px;
		bottom: 15px;
		animation-delay: 0s;
	}

	.infH {
		font-weight: bold;
		font-size: larger;
	}

	.infT {
		padding-left: 30px;
	}

	.infT .t {
		width: 80px;
		padding-top: 5px;
		display: inline-block;
	}

	.infT .dt {
		font-weight: bold;
		display: inline;
	}
}

@media screen and (min-width: 660px) {

	#welcome {
		font-size: larger;
	}

	#welText {
	}

	#logo {
		display: none; /* inline-block; */
		background-image: url("images/logo2.png");
		width: 300px;
		height: 84px;
		margin: 10px;
		vertical-align: middle;
	}

	#logoI {
	}

	#content {
	}

	.contact {
		right: -350px;
		bottom: 30px;
	}

	.infH {
		font-weight: bold;
		font-size: larger;
	}

	.infT {
		padding-left: 30px;
	}

	.infT .t {
		width: 80px;
		padding-top: 5px;
		display: inline-block;
	}

	.infT .dt {
		font-weight: bold;
		display: inline;
	}

/*

	.menu {
		display: inline-block;
		border: 2px solid #888;
		padding: 6px;
		padding-right: 0px;
		cursor: pointer;
	}

	.menu .menuLine {
		width: 6px;
		height: 30px;
		float: left;
		background-color: #888;
		margin-right: 6px;
	}

	.menu:hover {
		border: 2px solid #000;
	}

	.menu:hover .menuLine {
		background-color: #000;
	}

	#fmenu {
		position: fixed;
		left: 0px;
		top: 0px;
		display: none;
	}
	
*/
}