

body {
  font-family: "Javanese Text", "Georgia", serif;
  color: #243758;
  background-color: #fff;
  overflow-x: hidden;
  webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  margin-top: 20px;
  padding: 50px 0;
}

a {
	
	color: white;
	text-decoration: none;
}

a:hover {
	
	text-decoration: none;
	color: white;
}

a.notnav {
  color: #243758;
  font-weight: 600;
}

a.notnav:hover {
  color: #243758;
  font-weight: 600;
  text-decoration: none;
  font-size: 110%;
  transition: all 0.3s ease-in-out;
}


footer {
  font-family: "arial", sans-serif;
  color: #fff;
  background-color: #243758;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  overflow: hidden;
}

footer p {
  padding: 25px;
}

.banner {
  position: relative;
  min-height: 200px;  
  max-height: 600px;
  background-image: url("../assets/Banner2.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-attachment: fixed;
}

nav.navbar {
  background-color: #243758;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  box-shadow: 0px 1px 5px -2px black;
}

nav.show {
  opacity: 1;
}

figure {
  overflow: hidden;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  box-shadow: 0px 1px 5px -2px black;
}

figure:hover figcaption{
  visibility: visible;
}

figure:hover img{
  opacity: 0.2;
  box-shadow: inset 0px 1px 5px -2px black;
  transition: all 0.2s ease-in-out;
}

figcaption{
  font-family: arial, sans serif;
  visibility: hidden;
  position: absolute;
  top: 25%;  
  text-align: left;
  color: #243758;
  padding: 0 10%;
  transition: all 0.3s ease-in-out;
}

figcaption.contact {
	visibility: visible;
	position: relative;
}
.fig {
  visibility: visible;		
}

figure {
  overflow: visible;
}

.book:hover {
  opacity: 0.7;
  box-shadow: inset 0px 1px 6px -2px black;
  transition: all 0.2s ease-in-out;
}

.caption {
  opacity: 1.0;
  transition: all 0.2s ease-in-out;
}

blockquote {
  font-family: auto-pro-1-new,sans-serif;
  font-weight: 200;
  font-style: italic;
  font-size: 1.2rem; 
  margin-bottom: 2rem;
  padding: 1rem;
  background-color: rgba(181, 182, 186, 0.2);
  box-shadow: 0px 1px 5px -2px rgba(0,0,0,0.4);
}

.infocus {
	opacity: .2;
}

.location {
  height:1000px;
  text-align: center;
  padding-top: 100px;
}

.events {
  height:1000px;
  text-align: center;
  padding-top: 100px;
}

iframe {
  display: inline;
  box-shadow: 0px 1px 5px -2px black;
}

iframe:hover {
  opacity: 1.0;
  transform: translateY(-4px);
  box-shadow: 1px 3px 5px -2px black;
  transition: all 0.2s ease-in-out;
}

#modal {
	background-color: #243758;
	color: #fff;
	padding: 10px;
	width: 100%;
}
.phone {
	display:none;
}

.phonedesk {
	margin-top: 1rem;
}

@media screen and (min-width: 800px) {

  .banner {
  position: relative;
  height: 400px;
  background-image: url("../assets/Banner2.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  background-attachment: fixed;
  }  

}

@media screen and (min-width: 767px) and (max-width: 1199px) {
  
  .card {
    max-height: 400px;
  }
  iframe {
    height: 320px;
  }

}

@media screen and (min-width: 767px) and (max-width: 992px) {
  

  iframe {
    height: 360px;
  }

}

@media screen and (max-width: 767px) {
  
  iframe {
    height: 510px;
  }

}

@media screen and (min-width: 1200px) {
  
  .card {
    max-height: 500px;
  }

} 

@media screen and (max-width: 575px) {
	.phone {
	display: inline;
 	background-color: #243758;
 	color: #fff;
  	margin-top: 1.5rem;
  	padding-top: 10px;
  	box-shadow: 0px 1px 5px -2px black;
	}
	
	.phonedesk {
		display: none;
	}
	
	section#services h1 {
		margin-top: .5rem;
	}
}
	

@media screen and (max-width: 511px) {
  
  iframe {
    height: 350px;
  }
	
	
}

@media screen and (min-width: 1500px) {

  .banner {
  position: relative;
  height: 600px;
  background-image: url("../assets/Banner2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  
  
  }
}

@media screen and (max-width: 490px) {
	  h1 {
	  font-size: 1.5em;
	 } 
	
	.phone {
	display: inline;
 	background-color: #243758;
 	color: #fff;
  	margin-top: 1.5rem;
  	padding-top: 10px;
  	box-shadow: 0px 1px 5px -2px black;
	}

	.phone:hover{
	  transform: scalex(.99);
	  transition: all 0.2s ease-in-out;
	  box-shadow: inset 0px 1px 5px -2px black;
	  margin-top: 1.5rem;
	  padding-top: 10px;
	}
	.phonedesk {
		display: none;
	}
}

input[type=submit] {
  width: 100%;
  padding: 12px 20px;
  margin: 40px auto 0px;
  background-color: #243758;
  color: #fff;
  box-shadow: 0px 1px 5px -2px black;
  border: none;
}

input[type=submit]:hover {
  background-color: #1b2942;
  transform: scalex(.99);
  box-shadow: inset 0px 1px 5px -2px black;
  transition: all 0.2s ease-in-out;
}

/* FORM CSS */

form {
  background: #d3d3d3;
  padding: 20px;
  margin: 50px 0 250px;
  box-shadow: 0px 1px 5px -2px black;
}

label {
	margin: 20px 0px -5px;
}

input[type=checkbox] {
	display: inline-block;
	width: auto;
	padding-left: 1em;
}

#checkboxes > label {
	display: inline-block;
	width: 12em;
	
	font-size: 1.2em;
}


@media screen and (min-width: 767px) {
  form {
    margin-top: 60px;
  }
}

