/* CSS Document */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,body {
	min-height: 100%;
	margin: 0; 
	padding: 0; 
	font-family: Arial, Helvetica, sans-serif;
}

.clearfix {
	clear: both;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

a {
	color: #333333;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

header {
	display: flex;
	justify-content: center;
}

.adventlogo {
	margin-top: 1em;
	background: url(/portfolio/advent/images/AdventWebsiteLogo.jpg) no-repeat 50% 50%;
	width: 100%;
	height: 100px;
}

.adventlogo a {
	display: block;
	width: 100%;
	height: 100px;
}

.pagetitle { 
	text-align: center;
	font-size: 1.5em;
}

h2 {
	font-size: 1.25em;
}

/***************************************************************/
/***************************************************************/
/***********************   Navigation  *************************/
nav {
	background: #ff0000;
	background: -moz-linear-gradient(top,  #ff0000 0%, #b20026 100%);
	background: -webkit-linear-gradient(top,  #ff0000 0%,#b20026 100%);
	background: linear-gradient(to bottom,  #ff0000 0%,#b20026 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#b20026',GradientType=0 );
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
	text-align: center;
}

nav li {
	display: inline-block;
}

nav li a {
	display: block;
	font-weight: bold;
	text-decoration: none;
	color: #000000;
	color: #FFFFFF;
	text-align: center;
	padding: 7px 5px;
}

/*#home nav ul li:last-child a {
	color: #CC0000;
}*/

#memorial nav ul li:nth-child(6) a,
#equipment nav ul li:nth-child(5) a,
#projects nav ul li:nth-child(4) a,
#booking nav ul li:nth-child(3) a,
#memorabilia nav ul li:nth-child(2) a,
#testimonies nav ul li:nth-child(1) a {
	color: #FFF500;
}

/********* Testimony subnav  ************/
.subnav {
	text-align: center;
	margin-top: .2em;
	margin-bottom: 1em;
}

.subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.subnav li {
	display: inline-block;
}

.subnav li a {
	display: block;
	padding: 2px 4px;
}

body.kelley .subnav li:nth-child(1) a,
body.jerry .subnav li:nth-child(2) a,
body.barry .subnav li:nth-child(3) a,
body.wayne .subnav li:nth-child(4) a,
body.jo .subnav li:nth-child(5) a {
	text-decoration: none;
	font-weight: bold;
}
/********* Testimony subnav  ************/

/********* Testimony jonav  ************/
.jonav {
	text-align: center;
	margin-top: .3em;
	background: #DEDEDE
}

.jonav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.jonav li {
	display: inline-block;
}

.jonav li a {
	display: block;
	padding: 4px 4px;
}

body.beginning .jonav li:nth-child(1) a,
body.letter1 .jonav li:nth-child(2) a,
body.letter2 .jonav li:nth-child(3) a,
body.letter3 .jonav li:nth-child(4) a {
	text-decoration: none;
	font-weight: 600;
}
/********* Testimony jonav  ************/

/********* Projects subnav  ************/
.projectsnav {
	text-align: center;
	background: #DEDEDE
}

.projectsnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

.projectsnav li {
	display: inline-block;
}

.projectsnav li a {
	display: block;
	padding: 4px 4px;
}

body.projectshome .projectsnav li:nth-child(1) a, 	/* home */
body.sooner .projectsnav li:nth-child(2) a, 		/* Sooner */
body.after7 .projectsnav li:nth-child(3) a, 		/* After 7 */
body.worldreview .projectsnav li:nth-child(4) a,	/* World Review */
body.heavenbound .projectsnav li:nth-child(5) a {	/* heaven bound */
	text-decoration: none;
	font-weight: 600;
}

.audio {
    height: 2.5em;
    display: inline-block;
    margin-right: 10px;
	/*width: 250px;*/
}

.audio-list span {
	display: inline-block;
    width: 12em;
    min-height: 1.6em;
    padding-top: 5px;
    overflow: auto;
}


/********* Projects subnav  ************/

/***************************************************************/
/***************************************************************/
/***************************************************************/

#memorial article img {
	width: 100%;
	max-width: 355px;
	height: auto;
}

.sooner figure,
.after7 figure,
.worldreview figure,
.heavenbound figure {
	width: 315px;
	text-align: center;
}

.sooner figure > img,
.after7 figure > img,
.worldreview > figure img,
.heavenbound > figure img {
	width: 100%;
	height: auto;
	max-width: 315px;
}

.sooner figcaption,
.after7 figcaption,
.worldreview figcaption,
.heavenbound figcaption {
	text-align: initial;
	padding: 4px 10px;
}

.sooner figcaption p,
.after7 figcaption p,
.worldreview figcaption p,
.heavenbound figcaption p {
	text-align: center;
}

.song-container {
	margin-left: 2em;
	overflow: auto;
}

.music-video {
	height: revert !important;
}

.content {
	padding: 5px;
	position: relative;
}

article {
	padding: 5px;
	font-size: 1.2em;
    line-height: 1.4;
}

.testimonies {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch
}

.testimonies figure {
	width: 9em;
}

figure {
	margin: 0 auto;
	padding: 0;
}

figure > a{
	display:block;
	text-align: center;
}

.fullcircle {
	float: left;
	margin: 0 .4em .2em 0;
}

figure.fullcirclepic {
	width: 100%;
}

#testimonies figcaption:first-of-type p {
	margin-top: 0;
}

figure.kelleytestimonyphoto,
figure.jerrystestimonyphoto,
figure.barrystestimonyphoto,
figure.waynestestimonyphoto {
	margin: 0 .5em .2em 0;
    display: block;
    width: 200px;
    height: 200px;
    float: left;
    background: #CCCCCC;
    border: 1px solid #AAAAAA;
}

figure.jostestimonyphoto {
	margin: 0 .5em .2em 0;
    display: block;
    width: 200px;
    height: 278px;
    float: left;
    background: #CCCCCC;
    border: 1px solid #AAAAAA;
}

.sidenote {
	padding: 10px 5px 5px 5px; 
}

.sidenotemenu {
	list-style-type: none; 
	margin: 0 0 2em 0; 
	padding: 0 10px;
	display: block;
}

.sidenotemenu li {
	float: left; 
	margin: 0; 
	padding: 0;
	width: 50%;
}

.sidenotemenu li:last-child {
	text-align: right;
	padding-right: 1em;
}

.fullcircle-close {
	text-align: right;
	padding-right: 1em;
}

#fullcirclepic figure {
	margin: 0;
	padding: 0;
	text-align: center;
}

#fullcirclepic figcaption {
	margin-top: .4em;
}

p.separator { 
	height: 30px; 
	max-width: 800px;
    margin: 0 auto .8em auto;
	background: url(../images/leftarrowline.gif) repeat-x 0 50%;
}

p span.rarrow { 
	background: url(../images/rightarrowline.gif) no-repeat 100% 50%;
	display: block; 
	height: 30px; 
}

/***************************  MEDIA  ************************************/
/***************************  MEDIA  ************************************/
/***************************  MEDIA  ************************************/

.audio audio {
	width: 100%;
}

.projects {
	display: flex;
    flex-flow: row wrap;
    align-items: stretch;
}

.projects figure {
	padding-bottom: 1em;
	width: 9em;
}

.songlist {
    list-style: none;
    /* margin: 0 1.8em; */
    padding: 0;
    /* font-size: .9em; */
    /* column-count: 2; */
    /* text-align: center;*/
}

.songlist li {
	text-align: left;
}

/*
.ourvideo {
	position: absolute;
	top: 3em;
	-webkit-box-shadow: 0px 16px 35px 0px rgba(133,27,0,1);
	-moz-box-shadow: 0px 16px 35px 0px rgba(133,27,0,1);
	box-shadow: 0px 16px 35px 0px rgba(133,27,0,1);
}

.windowcontrols {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 2em;
	background: #CCCCCC;
	border-top: 1px solid #000000;
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
}

.windowcontrols p {
	margin: 0;
	color: #999999;
}

.closewindow {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}
.closewindow:hover {
  opacity: 1;
}
.closewindow:before, .closewindow:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 18px;
  width: 2px;
  background-color: #333;
}
.closewindow:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.closewindow:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.videowindow {
	width: 600px;
	height: 330px;
	background: #0066FF;
	border: 1px solid #000000;
}
*/
/***************************  MEDIA  ************************************/
/***************************  MEDIA  ************************************/
/***************************  MEDIA  ************************************/


/*************   Memories Accordion   ******************/
.memories ul { 
	list-style-type: none; 
	padding: 0; 
	margin: 0; 
}

.memories ul li { 
	padding-bottom: 0; 
	margin-bottom: 0; 
	border: 0px; 
	background: #F8F0E9; 
}

.memories ul li div { 
	position: relative; 
	padding-bottom: 30px; 
	padding: 0 15px; 
	margin-top: 0; 
}

.memories ul li div p { 
	padding-top: 1px;
}

.memories ul li div p:last-child { 
	margin-bottom: 0; 
	padding-bottom: 1em; 
}

.memories ul li > a { 
	display: block; 
	padding: 10px; 
	margin-bottom: 0; 
	background-color: #990000; 
	text-decoration: none; 
	color: #FFFFFF; 
	font-weight: bold; 
}

.memories ul li >  a:hover { 
	background-color: #CC3300; 
}
/*************   Memories Accordion   ******************/


footer {
	text-align: center;
	padding: 5px;
}





@media screen and (min-width: 576px){
	.audio {
		display: inline-block;
		margin-right: 10px;
	}
	
	.audio-list span {
		display: inline-block;
		width: 12em;
		min-height: 1.6em;
		padding-top: 5px;
		overflow: auto;
	}
}



@media screen and (min-width: 768px) { 
	header {
		display: block;
	}

	.adventlogo {
		background: url(/portfolio/advent/images/AdventWebsiteLogo.jpg) no-repeat 1em 50%;
		width: 300px;
		height: 100px;
		margin-top: .8em;
	}
	
	nav {
		background: none;
		width: 200px;
		height: 500px;
		float: left;
	}
	
	nav ul {
		text-align:left;
	}
	
	nav li {
		display: block;
	}
	
	nav li a {
		color: #000000;
		text-align: left;
		padding: 3px 5px;
	}
	
	nav li a:hover {
		color: #FF0000;
	}

	nav ul li:nth-child(1) {
		padding-left: 90px;
	}
	
	nav ul li:nth-child(2) {
		padding-left: 95px;
	}

	nav ul li:nth-child(3) {
		padding-left: 75px;
	}
	
	nav ul li:nth-child(4) {
		padding-left: 65px;
	}
	
	nav ul li:nth-child(5) {
		padding-left: 34px;
	}

	nav ul li:nth-child(6) {
		padding-left: 41px;
	}

	#memorial nav ul li:nth-child(6) a,
	#equipment nav ul li:nth-child(5) a,
	#projects nav ul li:nth-child(4) a,
	#booking nav ul li:nth-child(3) a,
	#memorabilia nav ul li:nth-child(2) a,
	#testimonies nav ul li:nth-child(1) a {
		color: #FF0000;
	}

	#home .content {
		padding: 0;
		background: url(../images/home-bg.jpg) no-repeat 0 0;
	}
	
	#memorial .content {
		padding: 0;
		background: url(../images/memorial-bg.jpg) no-repeat 0 0;
	}

	#equipment .content {
		padding: 0;
		background: url(../images/equipment-bg.jpg) no-repeat 0 0;
	}
	
	#projects .content {
		padding: 0;
		background: url(../images/projects-bg.jpg) no-repeat 0 0;
	}

	#booking .content {
		padding: 0;
		background: url(../images/booking-bg.jpg) no-repeat 0 0;
		min-height: 500px
	}

	#memorabilia .content {
		padding: 0;
		background: url(../images/memorabilia-bg.jpg) no-repeat 0 0;
	}

	#testimonies .content {
		padding: 0;
		background: url(../images/testimonies-bg.jpg) no-repeat 0 0;
	}

	#memorial article img {
		max-width: 300px;
	}
	
	article {
		padding-left: 1em;
		padding-right: 1em;
		font-size: 1.1em;
	}

	p.separator { 
		height: 30px; 
		max-width: 800px;
		margin: 0 auto .8em 18%;
		background: url(../images/leftarrowline.gif) repeat-x 0 50%;
	}

	.jonav {
		margin-left: 200px;
		margin-right: .5em;
	}
	
	.projectsnav {
		margin-left: 200px;
		margin-right: .5em;
	}
	
	#memorabilia article,
	#projects article {
		margin-left: 180px;
	}
	
	.after7 figure img {
		width: auto;
		height: auto;
	}

	/*   Projects
	****************************************************************/
	.song-container {
		float: left;
	}
	
	.sooner figure,
	.after7 figure,
	.worldreview figure,
	.heavenbound figure {
		overflow: auto;
		margin:0;
		height: 375px;
		float: left;
	}
	
	.sooner figure img,
	.after7 figure img,
	.worldreview figure img,
	.heavenbound figure img {
		/*float: left;
		margin-right: 1em;*/
	}

	.songlist {
		margin: 0 0 0 1em;
		padding: 0;
		font-size: 1.2em;
		column-count: unset;
	}
	
	.sooner figcaption p, 
	.after7 figcaption p, 
	.worldreview figcaption p, 
	.heavenbound figcaption p {
    	text-align: left;
	}
	
	.extra-songlist-padding {
		padding-left: 16.25em;
	}
}


@media screen and (min-width: 1050px){
	.song-container {
		margin-left: 0;
	}
}


@media screen and (min-width: 1200px){
	.audio {
		height: 1.6em;
		display: inline-block;
		margin-right: 0;
		width: revert;
	}
	

}