@charset "UTF-8";
header{
	width: 100%;
	min-width: 320px;
	max-width: 1200px;
	margin: 0 auto;
	
}

#banner{
    height: 2.5em;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  
}

#banner p{
	text-align: center;
	 font-size: 55%;
    letter-spacing: .5em;
    background-color: black;
    color: #FFFFFF;
	line-height: 2.5em;
	text-transform: uppercase;
	 font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

.logo{
	width: 100%;
	margin: 0 auto;
	border-bottom: solid;

}

.logo img{
	width: 90%;
	margin-left: 1em;
}
	

.seacrh img {
width: 100%;
height: 68px;
margin: 0 auto 0 auto;	
}




nav {
	width: 100%;
	height: 2.5em;
	text-align: center;
	border-bottom: solid;
	background-color: black;
}

li {
	display: inline-block;
	margin-left: 1.5em;
	margin-right: 1.5em;
	line-height: 2.5em;
	text-transform: uppercase;
	 font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}

a{
	color: white;
	font-size: .75em;
	letter-spacing: .1em
}

a:hover{
	color: white;
	text-decoration: underline
}

.hide{
	display: none;
}

.hide:hover{
	color: white;
	text-decoration: underline
	
}


article {
	width: 100%;
	min-width: 320px;
	max-width: 1500px;
	margin: 0 auto;
}

.image1 {
    width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
	
}

.image1 img{
	width: 80%;
	height: 40%;
	margin-left: 2em;
	
	
}


div.image1title{
	margin: 0 auto;
	padding-top: .5em;
	text-align: left;
	
}

 div.image1title h3{
    width: 80%;
	display: block;
	padding-left: 1.5em;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
  	font-style: normal;
	letter-spacing: .25em;

}

div.image1title:hover{
	
	color: gray;
	text-decoration: underline;
	
	
}

	
div.image1location {
	text-align: right;
	padding-right: 1em;
}

div.image1location p{
	display: inline;
	width: 10%;
	margin-left: 5em;
	font-size: .75em;
	 font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em
}
	



.image2 {
	width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
	
}

.image2 img{
	width: 80%;
	height: 40%;
	margin-left: 2em;
}

div.image2title{
	margin: 0 auto;
	padding-top: .5em;
	text-align: center;
	
}

 div.image2title h3{
	width: 80%;
	display: block;
	padding-left: 1.5em;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
  	font-style: normal;
	letter-spacing: .25em;

}

div.image2title:hover{
	
	color: gray;
	text-decoration: underline;
	
	
}


	
div.image2location {
	text-align: right;
	padding-right: 1em;
}

div.image2location p{
	display: inline;
	width: 10%;
	margin-left: 5em;
	font-size: .75em;
	 font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em
}
	


.image3{
	width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
}

.image3 img {
	width: 80%;
	height: 50%;
	padding-left: 2em;

	
}

div.image3title{
	margin: 0 auto;
	padding-left: .5em;
	padding-top: .5em;
	
}

 div.image3title h3{
	 width: 80%;
	display: block;
	padding-left: 1.5em;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
  	font-style: normal;
	letter-spacing: .25em;
}

div.image3title:hover{
	
	color: gray;
	text-decoration: underline;
	
	
}

	
div.image3location {
	text-align: right;
	padding-right: 1em;
}

div.image3location p{
	display: inline;
	width: 10%;
	margin-left: 5em;
	font-size: .75em;
	 font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em
}

.image4{
	width: 100%;
	margin: 0 auto;
	padding-top: 1.5em;
	
}

.image4 img {
	width: 80%;
	height: 50%;
	padding-left: 2em;

	
}


div.image4title{
	margin: 0 auto;
	padding-left: .5em;
	padding-top: .5em;
	
}

 div.image4title h3{
	 width: 80%;
	display: block;
	padding-left: 1.5em;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
  	font-style: normal;
	letter-spacing: .25em;
}

div.image4title:hover{
	
	color: gray;
	text-decoration: underline;
	
	
}

	
div.image4location {
	text-align: right;
	padding-right: 1em;
}

div.image4location p{
	display: inline;
	width: 10%;
	margin-left: 5em;
	font-size: .75em;
	 font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em
}

div.title{
	width: 100%;
	background-color: black;
	margin: 1em auto 0 auto;
	
}

div.title h2{
	
	width: 70%;
	height: 2em;
	line-height: 2em;
	text-align: center;
	margin: 1em auto 0 auto;
	letter-spacing: .5em;
	text-transform: uppercase;
	color: white;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}
	
	


div.calandarbox1 {
	width: 100%;
	border-bottom: solid;
	padding-bottom: 1em;
	padding-top: 1em;
	
	
	
}

div.calandarbox1:hover {
	background-color: gray;
}

div.datebox1 {
	padding-bottom: .5em;
	text-align: right;
	
}

div.datebox1 p{
	width: 10%;
	text-transform: uppercase;
	display: inline;
	padding-bottom: 1em;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	margin-left: 0;
	padding-right: .5em;
	font-size: .75em;
	letter-spacing: .15em
	
}

div.event1 h3{
	margin: 0 auto;
	margin-left: -1.5em;
	padding-left: 2em;
	font-size: 1.25em;
	width: 100%;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
	font-style: normal;}


div.location1 {
	 width: 100%;
	padding-right: .5em;
	text-align: right;
	
	
}

div.location1 p {
	font-size: .75em;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em;
	
}

div.calandarbox2 {
	width: 100%;
	border-bottom: solid;
	padding-bottom: 1em;
	padding-top: 1em;
	
	
}

div.calandarbox2:hover {
	background-color: gray;
}

div.datebox2 {
	padding-bottom: .5em;
	text-align: right;
	
}

div.datebox2 p{
	width: 10%;
	text-transform: uppercase;
	display: inline;
	padding-bottom: 1em;
	padding-left: 1.5em;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	margin-left: 0;
	padding-right: .5em;
	font-size: .75em;
	letter-spacing: .15em


}

	
	
div.event2 h3{
    margin: 0 auto;
	margin-left: -1.5em;
	font-size: 1.25em;
	padding-left: 2em;
	width: 100%;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
  	font-style: normal;
	
}

div.location2{ 
	 width: 100%;
	text-align: right;
 padding-right: .5em;
	
}

div.location2 p {
	font-size: .75em;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em
}


div.calandarbox3 {
	width: 100%;
	border-bottom: solid;
	padding-bottom: 1em;
	padding-top: 1em;
	
	
}

div.calandarbox3:hover {
	background-color: gray;
}

div.datebox3{
	padding-bottom: .5em;
	text-align: right;
}

div.datebox3 p{
	width: 10%;
	text-transform: uppercase;
	display: inline;
	padding-bottom: 1em;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	margin-left: 0;
	padding-right: .5em;
	font-size: .75em;
	letter-spacing: .15em

}

	
	
div.event3 {
	padding-left: .5em;
	text-align: left;
}

div.event3 h3{
	margin: 0 auto;
	padding-left: 2em;
	font-size: 1.25em;
	margin-left: -1.5em;
	width: 100%;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400 bold;
  	font-style: normal;
	
}


div.location3{
 width: 100%;
 text-align: right;
 padding-right: .5em;

}

div.location3 p {
	font-size: .75em;
	font-family: "Montserrat", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	letter-spacing: .15em
}


#logobanner{
	
	width: 100%;
	margin: 0 auto;
	padding-top: 1em;
	padding-bottom: 1em;
	
}

#logobanner img{
	width: 90%;
	margin: 0 auto;
	display: block;
}

#socials{
	width: 100%;
	background-color: black;
	margin: 0 auto;
	
}

#socials img{
	margin: 0 auto;
	display: block;
	
}
	

@media (min-width: 400px){
	.logo img{
		width: 70%;
		padding-left: 4em;
			
	}
	
	.seacrh img {
		width: 80%;
		padding-left: 3em;
		
	}
	
	a {
		font-size: .95em;
	}
	
	div.image1title h3 {
		
		width: 90%;
		font-size: 1.25em;
		
	}

	
	div.image1location p {
		width: 20%;
		font-size: .95em;
	}
	
	div.image2title h3 {
		
		width: 90%;
		font-size: 1.25em;
		
	}
	
	
	div.image2location p {
		width: 20%;
		font-size: .95em;
	}
	
	div.image3title h3 {
		
		width: 90%;
		font-size: 1.25em;
		
	}
	
	
	div.image3location p {
		width: 20%;
		font-size: .95em;
	}
	
	div.image4title h3 {
		
		width: 90%;
		font-size: 1.25em;
		
	}
	
	
	div.image4location p {
		width: 20%;
		font-size: .95em;
	}
	
	div.event1 {
		width: 80%;
		font-size: 1.15em;
	}
	
	div.datebox1 p {
		width: 20%;
		font-size: .85em;
	}
	
	div.location1 p {
		
		width: 100%;
		font-size: .95em;
		
	}
	
	
	div.event2 {
		width: 80%;
		font-size: 1.15em;
	}
	
	div.datebox2 p {
		width: 20%;
		font-size: .85em;
	}
	
	div.location2 p {
		
		width: 100%;
		font-size: .95em;
		
	}
	
	div.event3 {
		width: 80%;
		font-size: 1.15em;
	}
	
	div.datebox3 p {
		width: 20%;
		font-size: .85em;
	}
	
	div.location3 p {
		
		width: 100%;
		font-size: .95em;
		
	}
	
	#logobanner img {
		width: 70%;
	}
	
	
}

@media (min-width: 600px){
	
	#banner {
		font-size: 1.5em;
	}
	
	.logo img{
		width: 60%;
		padding-left: 7em;
	}
	
	.seacrh img {
		width: 50%;
		padding-left: 9.5em;
	}
	
	.image1 {
		width: 100%;
		
	}
	
	.image1 img {
		width: 70%;
		padding-left: 3.5em;
		
	}
	
	
	.image2 {
		width: 100%;
		
	}
	
	.image2 img {
		width: 70%;
		padding-left: 3.5em;
		
	}
	
	
	.image3 {
		width: 100%;
		
	}
	
	.image3 img {
		width: 70%;
		padding-left: 5.5em;
		
	}
	
	
	.image4 {
		width: 100%;
		
	}
	
	.image4 img {
		width: 70%;
		height: 70%;
		padding-left: 5.5em;
		
	}
	
	
	#logobanner{
		width: 70%;
	}
}


@media (min-width: 720px){
	
	.logo img {
		width: 55%;
		padding-left: 9.5em;
	}
	
	.seacrh{
		width: 100%;
		margin: 0 auto;
	}
	
	.seacrh img {
		width: 50%;
		padding-left: 11em;
	}
	
	article {
		width: 100%;
	}
	
	.image1 {
		float: left;
		width: 65%;
	
	}
	
	.image1 img {
		width: 80%;
	}
	
	
	
	.image1title {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
	
	
	}
	
	.image1title h3 {
		
		padding-top: 5em;
		text-align: right;
	}
	
	
	
	.image1location {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		padding-top: 1em;
	}
	
	.image1location p {
		display: inline-block;
		padding-left: 0;
		text-align: center;
		
		
	}
	
	.image2 {
		float: left;
		width: 65%;
	
	}
	
	.image2 img {
		width: 80%;
	}
	
	
	
	.image2title {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		
	
	
	}
	
	.image2title h3 {
		
	    padding-top: 5em;
		text-align: right;
	}
	
	
	
		.image2location {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		padding-top: 1em;
	}
	
	.image2location p {
		display: inline-block;
		padding-left: 0;
		text-align: center;
		
		
	}
	
	
	.image3 {
		float: left;
		width: 65%;
	
	}
	
	.image3 img {
		width: 80%;
	}
	
	
	
	.image3title {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		
	
	
	}
	
	.image3title h3 {
		
	    padding-top: 5em;
		text-align: right;
	}
	
	
	
		.image3location {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		padding-top: 1em;
	}
	
	.image3location p {
		display: inline-block;
		padding-left: 0;
		text-align: center;
		
		
	}
	
		
	.image4 {
		float: left;
		width: 65%;
		height: 70%;
	
	}
	
	.image4 img {
		width: 80%;
		height: 70%;
	}
	
	
	
	.image4title {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		
	
	
	}
	
	.image4title h3 {
		
	    padding-top: 5em;
		text-align: right;
		
	}
	
	
		.image4location {
		float: left;
		display: inline;
		width: 25%;
		margin: 0 auto;
		padding-top: 1em;
	}
	
	.image4location p {
		display: inline-block;
		padding-left: 0;
		text-align: center;
		
		
	}
	
	#calandar {
		width: 100%;
		float: left;
	}
	
	#logobanner img {
		width: 60%;
	}
}

@media (min-width: 850px){
	
		
	#banner {
		position: relative;
	}
	
	.logo{
		width: 100%;
		border-bottom: hidden;
	}
	.logo img {
		width: 35%;
		padding-left: 1em;
		float: left;
		
	}
	
	.seacrh img {
		position: absolute;
		right: 0;
		top: 5;
		z-index: 100;
		width: 35%;
		padding-left: 16em;
		
	}
	nav {
		float: left;
	}
	
	
	.hide {
		display: inline-block;
	}
	
	.image1 {
		width: 65%;
	}
	
	.image1title {
		width: 35%;
		font-size: 1.25em;
	}
	
	.image2 {
		width: 65%;
	}
	
	.image2title {
		width: 35%;
		font-size: 1.25em;
	}
	
		.image3 {
		width: 65%;
	}
	
	.image3title {
		width: 30%;
		font-size: 1.25em;
	}
	
		.image4 {
		width: 65%;
	}
	
	.image4title {
		width: 30%;
		font-size: 1.25em;
	}
	
	
}

@media (min-width: 1000px){
	
	#banner {
		position: relative;
	}
	
	.logo{
		width: 100%;
		border-bottom: hidden;
	}
	.logo img {
		width: 35%;
		padding-left: 1em;
		float: left;
		
	}
	
	.seacrh img {
		position: absolute;
		right: 10;
		top: 5;
		z-index: 100;
		max-width: 35%;
		padding-left: 16em;
		
	}
	
	
	nav {
		float: left;
	}
	
	a{
		letter-spacing: .25em;
	}
	
	
	.image1, .image2, .image3, .image4 {
		width: 60%;
	}
	
	.image1title, .image2title, .image3title, .image4title{
		padding-top: 3em;
		width: 30%;
		font-size: 1.75em;
	}
	.image1title h3, .image2title h3, .image3title h3, .image4title h3 {
		font-size: 2em;
	}
	
	.image1location, .image2location, .image3location, .image4location {
		font-size: 1.25em;
	}
	
	#logobanner img{
		width: 40%;
	}
	
	#calandar {
		width: 100%;
	}
	
	.event1 {
		width: 80%;
		
	}
	
	.event1 h3 {
		font-size: 2.5em;
	}
		
	
	
}

@media (min-width: 1200px){
	
	.logo img{
		width: 30%;
	}
	
	.seacrh img {
		width: 30%;

	}
}