/* ********************************************
 * General CSS Rules
 * ********************************************/

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'),
       local('Roboto-LightItalic'),
       url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2)
       format('woff2'),
       url(http://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff)
       format('woff');
}

p {
	text-align : justify;
}

/* ********************************************
 * Semantic CSS Rules
 * ********************************************/

/*
 * Transitions
 */
 
/*
 * All and mostly Mobile(< 600px)
 */

aside {
	background : #333333;
	padding : 1em;
	margin : 1em 0em;
	color : white;
	border: 0.1em solid black;
	font-family: Roboto;
	font-style : italic;
}
 
/* Nav Bar */
nav {
	width : 100%;
	padding-left : 1em;
	padding-right : 1em;
	display : flex;
	flex-wrap : wrap;
	justify-content: center;
	position : fixed;
	border-bottom: 0.1em solid black;
	background : url('../img/siteHeader.jpg');
	background-size : 100%;
	box-shadow: inset 0 0 10em 2em #fefefe;
	text-align:center;
	height : 8em;
	transition: height 0.5s, padding 0.5s;
	z-index : 2147483647;
}
nav > * {
	margin : 1em;
	display: inline-block;
	line-height : 2em;
	transition: line-height 0.5s;
	flex-grow : 1;
}
nav > *:first-child {
	width : 100%;
	text-align : center;
	transition : width 0.5s;
}
nav > *:first-child img {
	height : 2em;
	transition: height 0.5s;
}
nav > a {
	color : black;
}
nav > a:hover {
	text-decoration: none;
	color : #777;
}

/* Main Content */
main > * {
	margin : 0em Auto;
	padding-left : 1em;
	padding-right : 1em;
	transition: padding 0.5s;
}
main > header {
	background : #333333;
	color : white;
	padding-top : 8em;
	padding-bottom : 1em;
	overflow : hidden;
	transition: padding 0.5s;
}
main > header > * {
	font-size : 1.5em;
	transition: font-size 0.5s;
}
main > header > h1 {
	font-size : 4em;
	transition: font-size 0.5s;
}

section {
	padding-top : 1em;
	padding-bottom : 1em;
    padding-left : 4em;
    padding-right : 4em;
}

/* Footer */
footer {
	margin : 0em Auto;
	padding : 1em;
	height : 5em;
	transition: padding 0.5s;
}

/*
 * Tablet Portrait (> 600px && < 768px)
 */
@media (min-width: 600px) {
	/* Nav Bar */
	nav {
		display : initial;
		height : 8em;
		text-align:right;
	}
	nav > *:first-child {
		float : left;
		margin-left : 0em;
	}
	nav > *:first-child {
		width : 8em;
		text-align : center;
	}
	
	/* Main Content */
	main > header {
		padding-top : 5em;
	}
}
/*
 * Tablet Portrait + (> 768px && < 1024px)
 */
@media (min-width: 768px) {
	/* Nav Bar */
	nav {
		height : 6em;
		padding-left : 4em;
		padding-right : 4em;
	}
	nav > * {
		line-height : 4em;
	}
	nav > *:first-child img {
		height : 3em;
	}
	nav.nav-small {
		height: 4em;
	}
	nav.nav-small > * {
		line-height : 2em;
	}
	nav.nav-small > *:first-child img {
		height : 2em;
	}
	
	/* Main Content */
	main > * {
		padding-left : 4em;
		padding-right : 4em;
	}
	main > header {
		padding-top : 7em;
	}
	
	/* Footer */
	footer {
		padding-left : 4em;
		padding-right : 4em;
	}
}

/*
 * Tablet Landscape (> 1024px && < 1366px)
 */
@media (min-width : 1024px) {
	/* Nav Bar */
	nav {
		padding-left : 7em;
		padding-right : 7em;
	}
	
	/* Main Content */
	main > * {
		padding-left : 7em;
		padding-right : 7em;
	}
	
	/* Footer */
	footer {
		padding-left : 7em;
		padding-right : 7em;
	}
}
/*
 * Computer (> 1366px)
 */
@media (min-width : 1366px) {
	/* Nav Bar */
	nav {
		padding-left : 12em;
		padding-right : 12em;
	}
	
	/* Main Content */
	main  > * {
		padding-left : 12em;
		padding-right : 12em;
	}
	
	/* Footer */
	footer {
		padding-left : 12em;
		padding-right : 12em;
	}
}

.spaceHeader{
    padding-top : 7em;
}
.whiteBackground{
    background : white;
}

.whiteText{
    color : white;
}

.smallText{
    font-size: 18px;
}

.mediumText{
    font-size: 24px;
}

.subtitleText{
    font-size: 28px;
}