/* CSS Document */
/*
body {
	margin: 0;
	background-color: #162603;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	/ *background-image: url(../old/mtcarmeltest/images/bg_gradient.jpg); background-repeat:repeat-x;* /
}

#wrapper {
	margin: 0;
}

#content { width: 922px; margin: 40px auto;	padding: 0px; background-color: #FFFFFF; border: 2px solid #333333; background-image: url(images/topimg.jpg); 
           background-repeat:no-repeat; background-position: center top; }
#innercontent { padding: 115px 10px 10px 10px; }
#bottomimg { clear: both; background-image: url(images/bottomimg.jpg); background-repeat:no-repeat; background-position: center bottom; width: 922px; 
             height: 168px;}
.bottomtitle { position: relative; bottom: -140px; left: 160px; width: 450px; font-size: 1.2em; color: #162603;}

#nav { float: left; width: 10%;} 
#displaypic { float: right; width: 80%; }

.heading { background-image:url(images/header.gif); background-repeat: no-repeat; width: 191px; height: 29px; position: relative; margin: -35px 0 0 0; }
.picbox { border: 1px solid #000000; margin: 4px; width: 100px; float: left; }
*/

body {
	margin:0;
    background-color: #162603;
	font-family: Arial,Helvetica,sans-serif; 
	font-size: 1em;

	background: #355b08;
	background: -moz-linear-gradient(top,  hsla(87,84%,20%,1) 0%, hsla(88,90%,8%,1) 100%);
	background: -webkit-linear-gradient(top,  hsla(87,84%,20%,1) 0%,hsla(88,90%,8%,1) 100%);
	background: linear-gradient(to bottom,  hsla(87,84%,20%,1) 0%,hsla(88,90%,8%,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#355b08', endColorstr='#152602',GradientType=0 );
	
}

a {
	color: darkolivegreen;
}

a:hover {
	text-decoration: none;
}

.inner-header {
	padding: .5em;
}

.inner-header h1 {
    color: white;
    font-family: 'Amiri', serif;
    font-size: 3rem;
    line-height: .9;
    margin: 0;
}

.inner-header a {
	text-decoration: none;
	text-shadow: 3px 3px 6px #333333;
}

.inner-content h1 {
	color: white;
}

.section-title {
	margin-top: 0;
}

.photo-content {
	background-color: white;
	background-image: url(images/topimg.jpg), url(images/bottomimg.jpg);
	background-position: 50% top, 50% bottom;
	background-repeat: no-repeat,no-repeat;
	background-size: contain,contain;
	padding: 6em 1em 8em 1em;
	padding: 3em 1em 6em 1em;
}

.select-year {
	border-color: #c5c5c5;
    padding: 5px 8px;
    border-radius: 3px;
	font-size: 1.05rem;
}

.show-pics {
	position: relative;
}

.picbox {
	margin-bottom: .5rem;
}

.picbox a {
	display:block;
}

/* Gets rid of extra space at the bottom between image and div */
.picbox a img {
	display:block;
	width: 100px;
	height: 75px;
}

.displaypic {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}


.bottom-title {
    position: absolute;
    width: 100%;
    left: 0%;
    bottom: -2em;
    font-size: 1.1rem;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
	.container {
		max-width: 540px;
		margin-left: auto;
		margin-right: auto;
	}

	.photo-content {
		padding: 4em 1em 8em 1em;
	}

	.bottom-title {
		position: absolute;
		width: auto;
		left: 17%;
		bottom: -4em;
	}
 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.container {
		display: flex;
		max-width: 720px;
		margin-left: auto;
		margin-right: auto;
	}

	.form-container {
		flex-basis: 16em;
	}

	.show-pics {
		flex-shrink: 3;
	}

	.photo-content {
		padding: 6em 1em 10em 1em;
	}

	.bottom-title {
		left: -38px;
		bottom: -7em;
		font-size: 1.3rem;
	}
 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	/*.container {
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
	}*/
 }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	/*.container {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
	}*/
 }

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
	/*.container {
		max-width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}*/
 }