/*
Copyright 2016 Banapple Websites

TERMS OF USE
You may redistribute this template.
You may not sell this template.
You may not claim this template as your own work.

HELP
Please refer to the Instructions.txt, or contact me on Skype @ TheBanapple, or email jon@thebanapple.com.
If you wish to customize this and are not capible of doing so yourself, get in touch.
I charge a small sum for adding more features to this page
*/

html {
    position: relative;
    min-height: 100%;
}

body {
	margin: 0px 0px 5px 0px;
	min-height: 10px;
}

a, a:hover, a:visited {
	text-decoration: none;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}

.header {
	z-index: 20;
	height: 400px;
	min-width: 760px;
    -webkit-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.banner {
	background-color: rgba(255, 255, 255, 0.1);
	padding: 10px 0px;
	font-size: 25px;
	font-weight: 600;
	text-align: center;
	position: relative;
	width: 100%;
	min-width: 760px;
	top: 0px;
	color: #f2f2f2;
	text-shadow: 0px 0px 5px rgba(38, 38, 38, 0.8);
}

.header .logo {
	margin: 20px auto 0px auto;
	display: block;
	height: 250px;
	animation-duration: 5s;
}

.content {
	z-index: 20;
	min-width: 760px;
    height: 550px;
    -webkit-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.content span {
	display: block;
	text-align: center;
	color: #f2f2f2;
	text-shadow: 0px 0px 5px rgba(38, 38, 38, 0.8);
}

.content .server {
	padding: 10px;
	max-width: 500px;
	margin: auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border-width: 2px;
	border-color: #E5E4E2;
	border-style: solid;
}

.content .navbar {
	height: 425px;
	min-width: 760px;
	width: 95%;
	margin: 50px auto;
	font-size: 20px;
}

.content .iconWrap {
	width: 25%;
	min-width: 190px;
	margin-bottom: 25px;
	float: left;
}

.content .icon {
	width: 190px;
	height: 165px;
	margin: auto;
	display: block;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.content .icon:hover {
	-webkit-transform: translate(0px,10px) scale:(0.25);
	-moz-transform: translate(0px,10px) scale:(0.25);
	-o-transform: translate(0px,10px) scale:(0.25);
	transform: translate(0px,-20px) scale(1.1,1.1);
}

.footer {
	z-index: 20;
	width: 100%;
	min-width: 760px;
	height: 10px;
	background-color: rgba(255, 255, 255, 0.1);
	padding: 10px 0px;
	text-align: center;
	font-size: 10px;
	position: absolute;
    left: 0;
    bottom: 0;
    -webkit-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.footer a {
	color: #333333;
}