* {box-sizing:border-box;}
html, body {
	padding:0;
	margin:0;
	}

	
span {
font-size:15px;
}
	
	/*LOGO*/
#logoDiv {
	width:100%;
	background-color:transparent;
	text-align:center;
	padding:2em;
	display:block;
	position:absolute;
	z-index:100;
	}

#BANNER_CONTAINER {
	text-align:center;
	}

	
	/*BANNER*/
#bannerDiv {
	background-image: url("images/tintedBannerImg.png");
	background-position:80% 34%;
	background-repeat:no-repeat;
	background-size:100%;
	height:25em;
	overflow:hidden;

	}
	




#bannerDiv h3 {
	color:white;
	font-family: 'CAC Champagne', arial;	
	font-size:6.25em;
	font-weight:normal;
	text-align:center;
	line-height:0.75em;
	}
	
#bannerDiv {
	margin:-55px;
	margin-bottom:0px; /*this makes the banner not have padding from the CONTENT div*/
	}
	
#newBannerDiv{
	position:relative;
	width: calc(100vw - 10px);
    left: calc(-50vw + 50%);
	margin-top:-10px;
}


	/*CONTENT*/
	
	#CONTENT {
		padding:55px;
	}
	
	#CONTENT p {
		font-size: 1.4em ;
		line-height: 34px ;
		font-family: "Gentium Basic";
		padding:0px;
		color:#6c6c6c;
	}	
	
	#bannerDiv p {
	color:white;
	font-family:verdana;
	font-style:italic;
	font-size:1.33em;
	letter-spacing:1px;
	text-align:center;
	margin-top:-140px;
	/*cant get it to move up*/
	/*this is down here because I need it to be processed after CONTENT p*/
	}
	
	#CONTENT h1 {
		text-align:center;
		color:#6c6c6c;
	}
	
	#CONTENT h2 {
	color:#6c6c6c;
	text-align:center;
	}
	
	#CONTENT ul {
		font-size: 1.4em ;
		line-height: 34px ;
		font-family: "Gentium Basic";
		padding:0px;
		text-align:center;
		color:#6c6c6c;
		position: relative;
	}
	
	#CONTENT pre {
		font-size: 1.4em ;
		line-height: 34px ;
		font-family: "Gentium Basic";
		padding:0px;
		color:#6c6c6c;
	}
	
	.floatRight {
		float:right;
		padding-left:30px;
	}
	
	.floatLeft {
		float:left;
		padding-right:30px;
	}
	
	.mobileHeader {
		display:none;
	}
	
	.centered {
		text-align:center;
		margin:0 auto;
		width:100%;
	}
	
	.center {
	margin:0 auto;
	}
	
	.widthSeventyFive {
		width:75%;
	}
	
	.widthTwentyFive {
		width:25%;
	}
	
	.widthOneHundred {
	width:100%;
	}
	
	
	
	.textAlignLeft {
	text-align:left;
	}

	
	
	
	
	
	
	

.hasText {
	font-size: 1.4em;
	line-height: 34px;
	font-family: "Gentium Basic";
	color:#6c6c6c;
	}

.title { /*this is first used in memorium, just for the headers or titles (whatever you wanna call em)*/
	text-align: center;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color:#6c6c6c;
	}

/*this is to make the 3 images in testimonials work*/
.testimonialGalleryImage {
	max-height:100%;
	height:100%;
	width:auto;
	height:21em;

}

.inline {
display:inline-block;
}

.centeredText {
	text-align:center;
}

.marginTop {
	margin-top:50px;
}

.smallMarginTop {
	margin-top:25px;
}

.captionPadding {
padding-bottom:27.2px;
}
	
#logo {
width:130px;
margin-bottom:-25px;
}

.photoAlign {
	width:25%;
	overflow:hidden;
}


#lyndaOnGia2 {
	left:-100px;
	position:relative;
}
/*
.galleryCaption {
	margin-top: -50px;
	font-size: 1.4em;
	line-height: 34px;
	font-family: "Gentium Basic";
	display:block;	
	}

.fadeOut:hover  + .galleryCaption {
	display:block;
}
*/
	/*mobile css*/
@media screen and (max-width: 960px) {


	/*BANNER*/
	
	.floatLeft {
		float:left;
		padding:0px;
	}
	
	.floatRight {
	float:right;
	padding:0px;
	}
	
	.widthSeventyFive {
		width:100%;
	}
	
	.widthTwentyFive {
		width:100%;
	}
	
	
	#CONTENT img {
		width:100%;
	}
	#bannerDiv {
		height:14em;
	}

	#bannerDiv h3 {
		color:white;
		font-family: 'CAC Champagne', arial;	
		font-size:3.5em;
		font-weight:normal;
		text-align:center;
		
	}

	#bannerDiv p {
		color:white;
		font-family:verdana;
		font-style:italic;
		font-size:1em;
		letter-spacing:1px;
		text-align:center;
		position:relative;
	}
	
	#BANNER_CONTAINER {
		margin-top:35px;
	}
	#gerardImg {
		margin-bottom:0px;
	}
	
	#lyndaOnGia2 {
	left:-100px;
	position:static;
}
	
	.testimonialGalleryImage {
	width:100%;
	height:auto;
	}
	
	.photoAlign{
	width:100%;
	margin-top:50px;
	}
	
	.mobileMargin {
	margin-top:50px;
	}
	pre{
margin-left:-150px;
	}
}