/*
										This style sheet is used to style all of the main website elements
*/
/*						Set everything to use border-box model						*/
html{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 100%;
}
*, *:before, *:after{
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

/*						Small screen and Medium only (Tablets, Mobile Displays and smaller)						*/
@media screen and (max-width: 75.9375em){
	#logo{
		max-width: 45%;
		padding: 0.1em;
		padding-top: 0.29em;
	}
/*						Responsive text using vmax, scales text relative to the dimensions of the viewport						*/
	.box .details .text h4, .box .details .text p, .loginText, .button1, .button2, .logout-button{
		font-size: 2vmax;
	}
}

/*						Large screen and upwards (Desktop Displays and larger)						*/
@media screen and (min-width: 76em){
	body{
		margin: auto;
		width: 76em;
	}
	#logo{
		margin: 0.2em 2em 0.1em;
		max-width: 100%;
	}
	.box{
		width: 75%;
		margin: 1.5em auto 1.5em;
	}
	.box .details .text h4, .button1, .button2{
		font-size: 1.25em;
	}
	.logout-button{
		font-size: 0.8vmax;
	}
}

/*						Body formatting					*/
body{
	font-family: "Verdana", sans-serif;
	background-color: #FFFFFF;
}

/*						Top of page					*/
.top-box{
	background-color: #808080;
	overflow: auto;
	padding: 0.5em;
}
.loginText{
	float: right;
	text-decoration: none;
	color: #000000;
	font-weight: bold;
	padding: 0.2em;
}
a.loginText:hover{
	cursor: pointer;
	transition: 250ms;
	color: #29ABE2;
}
#login-section{
	padding-right: 2em;
}

/*						Main Content						*/
.container{
	margin: 1em 1.5em 1em;
}
.content-1, .content-2{
	width: 50%;
	margin: auto;
}
.content-1{
	float: left;
}
.content-2{
	float: right;
}
.box{
	border: solid;
	border-color: #29ABE2;
	overflow: hidden;
}
.box .details{
	text-align: center;
	padding: 1em 0.5em 1em 0.5em;
}
.box img{
	display: block;
	max-width: 100%;
	margin: auto auto auto;
	padding: 0.5em;
}

/*						Buttons						*/
.button{
	padding: 10%;
}
.button1{
	background-color: #29ABE2;
	color: #FFFFFF;
	border: none;
	padding: 0.5em;
	text-decoration: none;
}
.button1:hover{
	cursor: pointer;
	transition: 250ms;
	color: #000000;
	background-color: #808080;
}
.button2{
	background-color: #FFFFFF;
	color: #000000;
	border: solid;
	border-color: #29ABE2;
	padding: 0.5em;
	padding-left: 2em;
	padding-right: 2em;
	text-decoration: none;
}
.button2:hover{
	cursor: pointer;
	transition: 250ms;
	color: #000000;
	background-color: #808080;
	border-color: #000000;
}
/*						Footer						*/
#first-footer{
	background-color: #808080;
	text-align: right;
	padding: 0.5em;
	overflow: auto;
}
#first-footer img{
	margin: 0.2em;
}
#first-footer img:hover{
	transition: 250ms;
	opacity: 0.6;
	cursor: pointer;
}
#second-footer{
	background-color: #2B2B2B;
	text-align: center;
	color: #FFFFFF;
	overflow: auto;
	padding: 1em;
}

/*
										This CSS is used to style the navigation element
*/
/*		Small and medium device screens		*/
@media screen and (max-width: 75.9375em){
	#mobile-menu-icon{
		display: block;
	}	
	.navigation-main{
		display: none;
	}
	nav ul li a{
		display: block;
		text-align: center;
		font-size: 1.2em;
		background-color: #808080;
		border: solid;
	}
}

/*						Large screen and upwards						*/
@media screen and (min-width: 76em){
	#mobile-menu-icon{
		display: none;
	}
	nav ul li{
		display: inline;
	}
	nav{
		word-spacing: 0.12em;
	}
	.navigation-main{
		padding: 1em;
	}
}

/*					All devices					*/
#active{
	background-color: #808080;
}
nav, .mobile{
	background-color: #29ABE2;
}
#mobile-menu-icon{
	text-decoration: none;
	font-weight: bold;
	font-size: 2em;
	color: #FFFFFF;
}
nav ul li{
	list-style: none;
}
nav ul li a{
	padding: 0.5em;
	font-size: 1.05em;
	text-decoration: none;
	color: #000000;
	background-color: #FFFFFF;
	border-color: #29ABE2;
}
nav ul li a:hover{
	cursor: pointer;
	transition: 250ms;
	background-color: #808080;
}