*{

	/* apply a natural box layout model to all elements
	http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
	-webkit-box-sizing: border-box; box-sizing: border-box;
}

/*micro-clearfix by Nicolas Gallagher modified by cssmojo http://cssmojo.com/the-very-latest-clearfix-reloaded/ */
/* For modern browsers */
.cf:after {
    content:" ";
    display:block;
    clear:both;
}

/* colors, just to tell everything apart. This willed be changed later. */

html{
	background-color:#ccc;
	font-family: 'Fjalla One', Raleway, Verdana, sans-serif;
}
body{
	min-width: 320px;
	font-size: 100%;
	line-height: 1.2em;
	background-color: white;
}

/*---- Basic Layout ----*/

a{
	text-decoration: none;
}

/*---- Header Start----*/
header div:first-child{
	width: 100%;
	margin: 0 auto;
}
header .navBar{
	margin: 0 auto;
	background-color: #FFF;
	border-bottom: #1bc6a1 solid 4px;
	position: fixed;
	z-index: 10;
}
header h1{
	width:100px;
	font-size: 1.5em;
	float: left;
	position: relative;
	left: 3%;
	background: url(../images/logoSmall.gif) center no-repeat;
	text-indent: -9999px;
}
header h1 a{
	display: block;
	padding: 0 .25em;
	line-height: 45px;
	text-align: center;
}
header h1 + a{
	display: block;
	float: right;
	font-size: 1.4em;
	line-height: 45px;
	text-decoration: none;
	color: #333;
	text-align: center;
	width: 100px;
}
.navContent{
	display: none;
	height: 0;
	transition: 1s ease-all;
}
header input {
	display: none;
}
header input ~ label .icon-cancel {
	display: none;
}
header input ~ label {
	display: block;
	float: right;
	font-size: 1.8em;
	text-decoration: none;
	color: #329396;
	padding: .3em .5em .2em .35em;
	width: 60px;
	height: 45px;
}
header input:checked ~ label {
	display: block;
	float: right;
	font-size: 1.8em;
	text-decoration: none;
	color: #329396;
	padding: .3em .5em .2em .1em;
	width: 50px;
	height: 45px;
}
header input ~ label:hover{
	cursor: pointer;
}
header input:checked ~ label ~ .navContent { 
	height: 265px;
	display: block;
	clear: both;
}
header input ~ label span{
	font-size: .6em;
	line-height: 1.8em;
	transition: 1s ease;
}
header input:checked ~ label span{
	display: none;
}
header input:checked ~ label .icon-cancel{
	display: block;
	transition: 1s ease;
}
header input ~ label:hover,
header input:checked ~ label:hover{
	color: #1bc6a1;
}
header nav ul{
	padding: .25em 0;
	line-height: 30px;
}
header nav li a{
	display: block;
	padding: .25em 1em;
	color: #333;
	text-transform: uppercase;
	font-size: 1.2em;
	border-bottom: #1bc6a1 2px solid;
	transition: .4s ease;
}
header nav li a:hover{
	background-color: #1bc6a1;
	color: white; /* aqua */
}
.home header nav .homeNav a,
.attend header nav .attendNav a,
.exhibits header nav .exhibitsNav a,
.features header nav .featuresNav a,
.contact header nav .contactNav a{
	background-color: #1bc6a1;
	color: white;
}
.social{
	text-align: center;
	padding: .5em;
}
.social a{
	display: inline-block;
	font-size: 1.5em;
	line-height: 35px;
	text-decoration: none;
	color: #329396;
	width: 35px;
	text-align: center;
	transition: .4s ease;
}
.social a:hover{
	color: #1bc6a1;
}
.hero{
	clear: both;
	height: 295px;
	padding-top:45px;
}
/*---- Hero Images Start----*/
.home .hero{
	background: url(../images/homeHeroSmall.jpg) bottom center no-repeat;
}
.attend .hero{
	background: url(../images/attendHeroSmall.jpg) top center no-repeat;
}
.contact .hero{
	background: url(../images/contactHeroSmall.jpg) center no-repeat;
}
.exhibits .hero{
	background: url(../images/exhibitsHeroSmall.jpg) center no-repeat;
}
.features .hero{
	background: url(../images/featuresHeroSmall.jpg) center no-repeat;
}
.petWaiver .hero{
	background: url(../images/petWaiverHeroSmall.jpg) center no-repeat;
}
.volunteer .hero{
	background: url(../images/volunteerHeroSmall.jpg) center no-repeat;
}
.immunization .hero{
	background: url(../images/immunizationHeroSmall.jpg) center no-repeat;
}
.directions .hero{
	background: url(../images/directionsHeroSmall.jpg) center no-repeat;
}
/*---- Hero Images End----*/
/*---- Header End----*/
/*---- Home Main Start----*/
.hero div{
	max-width: 1200px;
	margin: 0 auto;
}
.hero h2{
	font-size: 2em;
	font-weight: 700;
	position: relative;
	line-height: 1.1em;
	top: 30px;
	padding: .25em .25em 0 5%;
	color: #329396;
	font-family: Raleway;
}
.hero h2:last-child{
	text-transform: uppercase;
	font-size: 1.5em;
}
main{
	background-color: #FFF;
}
section{
	position: relative;
}
section h3{
	font-size: 1.6em;
	padding: 1em 0 .3em .8em;
	color: #329396;
	line-height: 1.2em;
}
section p,
.join-video p{
	font-family: Raleway;
	padding: 0 1.2em 1em 1.2em;
	color: #333;
	line-height: 1.3em;
}
.figure{
	margin: 30px 0;
	position: relative;
	display: block;
	transition: .3s ease-in-out;
}
.figure:hover{
	opacity: .6;
}
.figure figcaption{
	position: absolute;
	line-height: 2.9em;
	width:100%;
	bottom:0;
}
.figure h3{
	font-size: 1.5em;
	padding-left: .7em;
	color:white;
	background-color: #329396;
}
.figure img{
	display: block;
	width:100%;
}
.home section:last-of-type h3,
.join-video h3{
	font-size: 1.6em;
	padding: 1em 0 .3em .8em;
	color: #329396;
}
.play{
	display: none;
}
.video{
	position: relative;
	height: 0;
	padding-top: 25px;
	padding-bottom: 56.25%;
}
.video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
}
/*---- Home Main End ----*/
/*---- Attend Main Start ----*/
.attend main{
	padding-bottom: 1em;
}
/*---- Attend Main End ----*/
/*---- Exhibits Start ----*/
h4{
	font-size: 1.2em;
	color: #329396;
	padding: 1em 1em .2em 1em;
}
.list{
	font-family: raleway;
	font-size: .9em;
	line-height: 1.2em;
	padding: 0 1.2em 0 1.9em;
	color: #333;
}
.list li{
	padding: .25em 0;
}
.list:first-of-type li:before{
	content:"- ";
	font-family: 'fjalla one';
	font-weight: 700;
	color: #1bc6a1;
}
.list:last-child li:nth-child(even){
	padding-bottom: 1.3em;
}
.list li:nth-child(odd) span{
	color: green;
	font-family: 'fjalla one'
}
.list li:nth-child(even) span{
	color: red;
	font-family: 'fjalla one'
}
/*---- Exhibits End ----*/
/*---- Features Start ----*/

/*---- Features End ----*/
/*---- Contact Start ----*/
.contact h4{
	padding: .3em 0 .5em 1em;
}
.contact h4 a{
	color: #1bc6a1;
}
.contact h4 a:hover{
	color: #329396;
}
.contact p:nth-of-type(2){
	margin-bottom: 1.5em;
}
.contact main,
.petWaiver main{
	padding: 1em;
}
form{
	width: 90%;
	margin: 0 auto;
}
label, input, textarea, option{
	display: block;
	width: 100%;
}
input, option{
	line-height: 2em;
}
label{
	padding: .6em 0 .4em 0;
	font-size: .8em;
	color: #329396;
}
input{
	margin-bottom: 1em;
	font-size: .8em;
}
option{
	margin-bottom: .25em;
}
#submit{
	width: 150px;
	height: 35px;
	border-radius: 4px;
	float: right;
}
textarea{
	margin: .4em 0 1em 0;
}
#submit{
	cursor: pointer;
	background-color: #1bc6a1;
	border: none;
	color: white;
	font-family: 'Fjalla One';
	font-size: 1.2em;
	line-height: 1.9em;
	box-shadow: 2px 2px 5px #333;
	transition: .4s ease;
	text-transform: uppercase;
}
#submit:hover{
	background-color: #329396;
}
.success div{
	clear: both;
	margin: 0 auto;
	font-size: 1.2em;
	line-height: 1.5em;
	color: #329396;
	padding: 1em 0;
	width: 90%;
	text-align: center;
}
/*---- Contact End----*/
/*---- Pet Waiver Start ----*/

/*---- Pet Waiver End ----*/
/*---- Volunteer Start ----*/
legend{
	color: #329396;
}
.border{
	border: #1bc6a1 2px groove;
	padding: 0 2%;
	margin-bottom: 1em;
}
/*---- Volunteer End ----*/
/*---- Directions Start ----*/
.directions iframe{
	width: 100%;
}
/*---- Directions End ----*/
/*---- Immunization Start ----*/
.click a{
	color: #329396;
}
.click a:hover{
	color: #1bc6a1;
}
.immunization h4{
	line-height: 1.4em;
}

/*---- Immunization End ----*/
/*---- Footer Start----*/
footer{
	margin-top: 30px;
	clear: both;
	height: 150px;
	position: relative;
	background-color: #FFF;
	border-top: #1bc6a1 solid 4px;
}
footer div:first-child{
	max-width: 1200px;
	margin: 0 auto;
}
.smallNav{
	padding: 1.5em 0 1.5em 0em;
	color: #333;
	text-align: center;
}
.smallNav li{
	display: inline-block;
}
.smallNav li a{
	color: #333;
	padding: .25em .5em;
	transition: .4s ease;
}
.smallNav li a:hover{
	color: #329396;
}
.attend .smallNav .attendNav a,
.exhibits .smallNav .exhibitsNav a,
.features .smallNav .featuresNav a,
.contact .smallNav .contactNav a{
	color: #329396;
}
footer nav{
	display: none;
}
footer h1{
	display: none;
}
.footerSocial{
	text-align: center;
	padding: .5em;
	transition: .4s ease;
}
.footerSocial a{
	display: inline-block;
	font-size: 1.5em;
	line-height: 35px;
	text-decoration: none;
	color: #329396;
	width: 35px;
	text-align: center;
}
.footerSocial a:hover{
	color: #1bc6a1;
}
footer small{
	display: block;
	width: 100%;
	clear: both;
	text-align: center;
	color: white;
	padding: .2em 0;
	font-family: Raleway;
	font-size: .8em;
	position: absolute;
	bottom: 0;
	background-color: #329396;
}
/*---- Footer End----*/

/*Media Queries Start*/
@media only screen and (min-width:550px){
	body{
		background: url(../images/background.gif);
	}
	/* Header Start */
	.navBar{
		height: 60px;
		position: relative;
	}
	header h1{
		margin: .25em 0 0 3%;
		width: 100px;
		background: url(../images/logoMed.gif) center no-repeat;
	}
	header h1 a{
		width: 100px;
	}
	.navContent{
		display: block;
		position: relative;
		float: right;
		top: 1.5em;
		right: 1em;
	}
	.navContent li{
		float: left;
	}
	header nav li a{
		font-size: 1em;
		line-height: 1.5em;
		border-bottom: none;
		padding: .2em .6em;
	}
	header input ~ label{
		display: none;
	}
	/*---- Hero Images Start----*/
	.hero{
		height: 360px;
		padding-top: 60px;
	}
	.social{
		display: none;
	}
	.home .hero{
	background: url(../images/homeHeroMed.jpg) bottom no-repeat;
	}
	.attend .hero{
	background: url(../images/attendHeroMed.jpg) center no-repeat;
	}
	.contact .hero{
	background: url(../images/contactHeroMed.jpg) center no-repeat;
	}
	.exhibits .hero{
	background: url(../images/exhibitsHeroMed.jpg) center no-repeat;
	}
	.features .hero{
	background: url(../images/featuresHeroMed.jpg) center no-repeat;
	}
	.petWaiver .hero{
	background: url(../images/petWaiverHeroMed.jpg) center no-repeat;
	}
	.volunteer .hero{
	background: url(../images/volunteerHeroMed.jpg) center no-repeat;
	}
	.immunization .hero{
	background: url(../images/immunizationHeroMed.jpg)center 100px no-repeat;
	background-color: #FFF;
	background-size: 80%;
	}
	.directions .hero{
	background: url(../images/directionsHeroMed.jpg) center no-repeat;
	}
	/*---- Hero Images End----*/
	.hero h2{
		font-size: 2.3em;
		top: 30px;
		padding: .25em .25em 0 3%;
	}
	/*---- Header End ----*/
	/*---- Main Start ----*/
	main,
	.success{
	background-color: rgba(256,256,256,.6);
	max-width: 1200px;
	margin: 0 auto;
	}
	.join-video{
		margin-top: 3em;
	}
	.video{
		margin: 0 auto;
		width: 75%;
	}
	section:first-child{
		margin-bottom: 2%;
	}
	.percent50 h3{
		width: 50%;
	}
	.percent50 p{
		width: 50%;
	}
	.home section:first-child{
		background: url(../images/aboutUs.jpg) right center no-repeat;
		background-size: 50%;
	}
	.attend section:first-child{
		background: url(../images/bringPetMed.jpg) right center no-repeat;
		background-size: 50%;
	}
	.exhibits section:first-child{
		background: url(../images/exhibitsMed.jpg) right center no-repeat;
		background-size: 50%;
	}
	.features section:first-child{
		background: url(../images/petTalentMed.jpg) right center no-repeat;
		background-size: 50%;
	}
	.features section:nth-child(2){
		background: url(../images/petCostumeMed.jpg) left center no-repeat;
		background-size: 50%;
	}
	.features section:last-child{
		background: url(../images/musicalChairsMed.jpg) right center no-repeat;
		background-size: 50%;
	}
	.directions section:first-child{
		background: url(../images/dogDirectionsMed.jpg) right center no-repeat;
		background-size: 50%;
	}
	.volunteer section:first-child{
		background: url(../images/dogvolunteerMed.jpg) right center no-repeat;
		background-size: 50%;
		min-height: 200px;
	}
	.immunization section:first-child{
		background: url(../images/immunMed.jpg) right center no-repeat;
		background-size: 50%;
	}
	.figure{
		width: 47%;
		float: left;
	}
	.figure:nth-child(odd){
		margin: 0 2% 2% 1%;
	}
	.figure:nth-child(even){
		margin: 0 1% 2% 2%;
	}
	.play{
		clear: both;
		display: block;
		text-align: center;
		color: white;
		font-size: 2.5em;
		line-height: 1.5em;
		background-color: #1bc6a1;
		margin-bottom: .25em;
	}
	/*---- Main End ----*/
	/*---- Contact Start -----*/
	.contact main section{
		float: left;
		width: 48%;
		height: 640px;
		background: url(../images/dogContactMed.jpg) bottom center no-repeat;
		background-size: 100%;
	}
	.contact form{
		width: 48%;
		float: right;
	}
	.contact .option{
		width: 90%;
	}
	.success div{
	font-size: 1.4em;
	line-height: 1.5em;
	}
	/*---- Contact End ----*/
	/*---- Exhibits Start ----*/
	.exhibits h4{
		
		font-size: 1.5em;
	}
	.exhibits .list li{
		width: 46%;
		float: left;
		height: 45px;
	}
	.exhibits .list li:nth-child(even){
		float: right;
	}
	.exhibits section:last-child li{
		height: 125px;
	}
	.exhibits section:nth-child(2),
	.exhibits section:last-child{
		width: 100%;
		margin: 0 auto;
	}
	/*---- Exhibits End ----*/
	/*---- Features Start ----*/
	.features section:nth-child(2) div{
		float: right;
		width: 50%;
	}
	.features section{
		min-height: 300px;
	}
	/*---- Features End ----*/
	/*---- Pet Waiver Start ----*/
	.petWaiver form{
		width: 75%;
	}
	/*---- Pet Waiver End ----*/
	/*---- Volunteer Start ----*/
	.volunteer form{

	}
	.fleft{
		float: left;
		width: 48%;
	}
	.fright{
		float: right;
		width: 48%;
	}
	.volunteer #submit{
		clear: both;
	}
	/*---- Volunteer End ----*/
	/*---- Immun Start -----*/
	.immunization h4{
		padding-bottom: .5em;
	}
	.immunization section:nth-child(2){
		width: 48%;
		float: left;
	}
	.immunization section:nth-child(3){
		width: 50%;
		float: right;
		height: 570px;
		border-left: #329396 2px solid;
		padding-left: 1em;
		background: url(../images/immun2Med.jpg) bottom right no-repeat;
		background-size: 90%;
	}
	.immunization section:last-child{
		clear: both;
	}
	.immunization section:last-child div{
		width: 48%;
		float: left;
	}
	.immunization section:last-child + p{
		width: 48%;
		float: right;
	}
	/*---- Immun End -----*/
	/*---- Footer Start ----*/
	.smallNav{
		display: none;
	}
	footer{
		height: 175px;
	}
	footer nav{
		display: block;
		width: 76%;
		padding: 1em 0 3em 1em;
		float: left;
	}
	footer nav li{
		display: block;
		float: left;
		position: relative;
	}
	footer nav li a{
		color: #329396;
		text-decoration: none;
		padding: .2em 1em;
	}
	footer nav li a:hover{
		color: #1bc6a1;
	}
	footer div:nth-child(3){
		width: 24%;
		float: right;
	}
	footer h1{
		display: block;
		margin: 3% auto;
		text-indent: -9999px;
	}
	footer h1 a{
		display: block;
		margin: 5% auto;
		width: 110px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: url(../images/logoMed.gif) center no-repeat;
	}
	.submenu{
		position: absolute;
		font-size: .8em;
		padding-left: .25em;
	}
	.submenu li{
		width: 114px;
	}
	.submenu li a{
		width: 100%;
	}
	.footerSocial{
		margin: 5% auto;
		width: 100%;
		padding-left: .4em;
		margin-right: 3%;
	}
	.footerSocial a{
		font-size: 1.1em;
		line-height: 20px;
		color: #329396;
		width: 20%;
	}
	/*---- Footer End ----*/
} /*---- Closes 550px -----*/

/* Media Query 750px Start*/
@media only screen and (min-width:750px){
	/*---- Header Start ----*/
	.navBar{
		height: 80px;
	}
	header h1{
		width: 160px;
		background: url(../images/logoLarge.gif) center no-repeat;
	}
	header h1 a{
		width: 160px;
		height: 68px;
	}
	.navContent{
		display: block;
		position: relative;
		float: right;
		top: 2.15em;
		right: 5%;
	}
	.navContent li a{
		margin: 0;
		font-size: 1.2em;
		line-height: 1.7em;
	}
	header h1 + a{
		display: none;
	}
	/*---- Hero Images Start----*/
	.hero{
		height: 580px;
		padding-top: 80px;
	}

	.home .hero{
		background: url(../images/homeHeroLarge.jpg) center no-repeat;
		background-color: #FFF;
	}
	.attend .hero{
		background: url(../images/attendHeroLarge.jpg) bottom center no-repeat;
		background-color: #FFF;
	}
	.contact .hero{
		background: url(../images/contactHeroLarge.jpg) center no-repeat;
		background-color: #FFF;
	}
	.exhibits .hero{
		background: url(../images/exhibitsHeroLarge.jpg) center 0 no-repeat;
		background-color: #FFF;
	}
	.features .hero{
		background: url(../images/featuresHeroLarge.jpg) center no-repeat;
		background-color: #FFF;
	}
	.petWaiver .hero{
		background: url(../images/petWaiverHeroLarge.jpg) center top no-repeat;
		background-color: #FFF;
	}
	.volunteer .hero{
		background: url(../images/volunteerHeroLarge.jpg) center no-repeat;
		background-color: #FFF;
	}
	.immunization .hero{
		background: url(../images/immunizationHeroLarge.jpg) bottom center no-repeat;
		background-color: #FFF;
		background-size: 60%;
	}
	.directions .hero{
		background: url(../images/directionsHeroLarge.jpg) center no-repeat;
		background-color: #FFF;
	}
	/*---- Hero Images End----*/
	.hero h2{
		font-size: 2.7em;
		padding: .25em .25em 0 3%;
	}
	/* Main Start */
	main{
		max-width: 1200px;
		margin: 0 auto;
	}
	.join-video{
		display: flex;
		justify-content: space-between;
		height: 340px;
	}
	.join-video div{
		width: 50%;
	}
	.video iframe{
		height: 45%;
	}
	section:first-child{
		min-height: 300px;
	}
	.home section:first-child{
		background: url(../images/aboutUsLarge.jpg) right center no-repeat;
		background-size: 50%;
		min-height: 300px;
	}
	.attend section:first-child{
		background: url(../images/bringPet.jpg) right center no-repeat;
		background-size: 50%;
	}
	.exhibits section:first-child{
		background: url(../images/exhibitsLarge.jpg) right center no-repeat;
		background-size: 50%;
	}
	.features section:first-child{
		background: url(../images/petTalentLarge.jpg) right bottom no-repeat;
		background-size: 50%;
		margin-bottom: 0;
	}
	.features section:nth-child(2){
		background: url(../images/petCostumeLarge.jpg) left center no-repeat;
		background-size: 50%;
	}
	.features section:last-child{
		background: url(../images/musicalChairsLarge.jpg) right center no-repeat;
		background-size: 50%;
	}
	.directions section:first-child{
		background: url(../images/dogDirectionsLarge.jpg) right center no-repeat;
		background-size: 50%;
		margin-bottom: 0;
	}
	.volunteer section:first-child{
		background: url(../images/dogvolunteerLarge.jpg) right center no-repeat;
		background-size: 50%;
		min-height: 250px;
	}
	.immunization section:first-child{
		background: url(../images/immunLarge.jpg) right center no-repeat;
		background-size: 50%;
	}
	section:first-child h3{
		padding-top: 1.5em;
	}
	/*---- Contact Start ----*/
	.contact main section:first-child{
			width: 48%;
			height: 670px;
			background: url(../images/dogContactLarge.jpg) bottom center no-repeat;
			background-size: 95%;
			margin-bottom: 0;
	}
	.success div{
	font-size: 1.6em;
	line-height: 1.5em;
	}
	/*---- Contact End ----*/
	/*---- Pet Waiver Start ----*/
	.petWaiver section{
		width: 48%;
		float: left;
	}
	.petWaiver form{
		width: 48%;
		float: right;
		padding-top: 2.2em; 
		background: url(../images/petWaiverLarge.jpg) center 590px no-repeat;
		background-size: 100%;
		height: 970px;
	}
	/*---- Pet Waiver End ----*/
	/*---- Immun Start -----*/
	.immunization section:nth-child(3){
		width: 50%;
		float: right;
		height: 540px;
		border-left: #329396 2px solid;
		padding-left: 1em;
		background: url(../images/immun2Large.jpg) bottom center no-repeat;
		background-size: 86%;
	}
	/*---- Immun End -----*/
	/*---- Exhibits Start ----*/

	.exhibits h4{
		font-size: 1.5em;
	}
	.exhibits .list li{
		width: 46%;
		float: left;
		height: 40px;
	}
	.exhibits .list li:nth-child(even){
		float: right;
	}
	.exhibits section:last-child li{
		height: 115px;
	}
	.exhibits section:nth-child(2),
	.exhibits section:last-child{
		width: 80%;
		margin: 0 auto;
	}

	/*---- Exhibits End ----*/
	/*---- Footer Start ----*/
	footer{
		height: 200px;
	}
	footer nav{
		width: 60%;
	}
	footer li{
		margin: 0 .2em;
	}
	footer li a{
		font-size: 1em;
		line-height: 1em;
		padding: .1em .3em;
	}
	footer h1{
		display: block;
		margin: 2% auto;
		text-indent: -9999px;
	}
	footer h1 a{
		margin: 3% auto;
		width: 160px;
		height: 70px;
		text-align: center;
		background: url(../images/logoLarge.gif) center no-repeat;
	}
	footer div:nth-child(3){
		width: 40%;
	}
	.footerSocial{
		margin: 3% auto;
		width: 100%;
		padding-left: .4em;
		margin-right: 3%;
	}
	.footerSocial a{
		font-size: 1.6em;
		line-height: 20px;
		color: #329396;
		width: 11%;
	}
	/*----Footer End ----*/
}
/*---- Media Query 750px End ----*/