/* Style sheet created by: Carissa Limiero, 08 April 2017 */

/* Style for body specifies a background color */
body {
	background-color: #FCF7F8;
	margin: 0;
}

/* Style centers logo in the header */
header {
	text-align: center;
}

/* Style specifies text properties for main element */
main {
	font-family: Avenir, "Arial", sans-serif;
	padding: 1em;
	overflow: auto;
}

/* Style centers footer info and specifies text properties */
footer {
	text-align: center;
	font-family: Avenir, "Arial", sans-serif;
}

/* Style to create a fluid image */
img {
	max-width: 100%;
}

/* Style for MOBILE layout */

/* Style hides the desktop class. */
.desktop {
	display: none;
}
	/* Style adds margin to header img */
	header img {
		margin-left: .5em;
		margin-right: .5em;
	}
	
	/* Style for nav */
	nav {
		font-family: Avenir, "Arial", sans-serif;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		margin-top: 1em;
	}

	/* Style specifies padding and margins for unordered list */
	nav ul {
		padding: 0;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within navigation */
	nav li {
		background-color: #ED6A5A;
		list-style-type: none;
		margin: 0.3em;
		padding: 0.4em;
		text-decoration: none;
	}

	/* Style changes navigation link text color to white and removes the underline */
	nav a {
		color: #FFFFFF;
		text-decoration: none;
	}
	
	nav li a:active {
		color: #2E6171;
	}
	
	.photo-categories {
		font-size: 0;
	}
	
	/* Style for photo category */
	.photo-category {
		display: inline-block;
		width: 48%;
		margin: 1%;
		padding: 0;
		text-align: center;
		position: relative;
		font-size: 1rem;
		transition: .5s;
	}
	
	.photo-category:hover {
		opacity: 0.7;
		transition: .5s;
	}
	
	.photo-category h1 {
		position: absolute;
		background-color: rgba(161, 181, 216, 0.8);
		color: #FFFFFF;
		width: 100%;
		margin: 0;
		bottom: 1em;
	}
	
	figure {
		margin: 0 0 2em 0;
	}
	
	figcaption {
		text-align: center;
		font-style: italic;
	}
	
	.video {
		max-width: 100%;
		transition: .5s;
	}
	
	.video figcaption {
		text-align: center;
		margin-left: 5%;
		margin-right: 5%;
	}
	
	.video h1 {
		text-align: center;
	}
	
	.video figure img {
		width: 90%;
		padding-right: 5%;
		padding-left: 5%;
		position: relative;
	}
	
	/* Style for form submission */
	input, textarea {
		display: block;
		margin-bottom: 1em;
	}
	
	label {
		display: block;
		float: left;
		padding-right: 0.5em;
		text-align: right;
	}
	
	.btn {
		margin-left: 0;
		border-radius: 1em;
		font-family: Avenir, "Arial", sans-serif;
		font-size: .9em;
		text-align: center;
		background-color: #2E6171;
		color: white;
		padding: .5em 2em .5em 2em;
		margin-left: 12em;
	}
	
	.home-about img {
		float: center;
		max-width: 90%;
		margin-right: 5%;
		margin-left: 5%;
	}
	
	.home-about h1, p{
		text-align: center;
	}
	
	#decoration img {
		max-width: 80%;
		margin-right: 10%;
		margin-left: 10%;
		padding-top: 1%;
	}


/* Style for TABLET layout */

/* Media query for tablet viewport targets screen size with a minimum width of 660px */

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

/* Style specifies to hide the mobile class */
.mobile {
	overflow: auto;
	display: none;
}

/* Style specifies to display the desktop class */
.desktop {
	display: block;
}
	
	/* Style for the nav specifies text properties */
	nav {
		font-family: Avenir, "Arial", sans-serif;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		margin-top: 1em;
		background-color: #ED6A5A;
		padding-top: 1em;
		padding-bottom: 1em;
		height: auto;
		white-space: nowrap;
		width: 100%;
	}

	/* Style specifies padding and margins for unordered list */
	nav ul {
		padding: 0 0 0 0;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

	/* Style for nav li specifies the background color, removes bullet style, and applies margins and padding for list items within navigation */
	nav li {
		list-style-type: none;
		color: #FCF7F8;
		padding: 0;
		text-decoration: none;
		width: 100%;
		display: inline;
		margin-left: 1%;
		margin-right: 1%;
		padding-left: .5em;
		padding-right: .5em;
		white-space: nowrap;
		background-color: #ED6A5A;
	}
	
	/* Style rule to remove underline from nav a */
	nav a {
		text-decoration: none;
	}
	
	/* Style to create a fluid image */
	img {
		max-width: 75%;
	}
	
	/* Style for banner image */
	#banner {
		max-width: 100%;
	}
	
	.photo-category {
		width: 48%;
		margin: 1%;
	}
	
	.photo-category img {
		max-width: 100%;
	}
	
	.photo-category h1 {
		bottom: 1.8em;
	}
	
	figure {
		text-align: center;
	}
	
	figure img {
		margin: 0 auto;
	}
	
	.home-about img {
		max-width: 50%;
		float: left;
		margin-left: 2%;
		padding-top: 1em;
	}
	
	.home-about p {
		text-align: center;
		margin-right: 3%;
		padding-top: 0;
	}
	
}

/* Style for DESKTOP layout */

/* Media query for desktop viewport targets screen size with a minimum width of 830px */

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

.desktop {
	display: block;
}
	
	/* Style rules for pseudo class */
	nav li a:link {
		color: #FFFFFF;
	}

	nav li a:visited {
		color: #FFFFFF;
	}

	nav li a:hover {
		color: #A1B5D8;
	}

	nav li a:active {
		color: #2E6171;
	}
	
	/* Style to create a fluid image */
	img {
		max-width: 50%;
	}
	
	.photo-category {
		width: 23%;
		margin: 1%
	}
	
	figure {
		display: inline-block;
		vertical-align: middle;
		width: 49.5%;
	}
	
	figure img {
		max-width: 75%;
	}
	
	.video figure img:hover {
		opacity: 0.7;
		transition: .5s;
		position: relative;
	}
	
	.btn:hover {
		background-color: #547D8A;
	}
	
	.btn:active {
		background-color: #547D8A;
		color: #ED6A5A;
	}
	
	.home-about img {
		max-width: 80%;
		float: left;
		margin-left 2%;
	}
	
	.home-about p {
		text-align: center;
		float: center;
	}
	
	.home-about {
		max-width: 90%;
		margin-right: 5%;
		margin-left: 5%;
	}
	
}