@font-face {

    font-family: 'Lato-Regular'; /*a name to be used later*/

    src: url('../fonts/Lato-Regular.ttf'); /*URL to font*/

}



@font-face {

    font-family: 'Lato-Light'; /*a name to be used later*/

    src: url('../fonts/Lato-Light.ttf'); /*URL to font*/

}



@font-face {

    font-family: 'Lato-Bold'; /*a name to be used later*/

    src: url('../fonts/Lato-Bold.ttf'); /*URL to font*/

}



html {

    box-sizing: border-box;

	width: 100%;

	height: 100%;

}



body{

	width: 100%;

	height: 100%;

}

*, *:before, *:after {

	box-sizing: inherit;

}

/* Consecration */

.consecration-banner {
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    background: #fff568;
    z-index: 10;
    padding: 0.2em;
    text-align: center;
    font-family: 'Lato-Regular';
    text-decoration: none;
    color: black;
}

/* Desktop Navigation */

@media only screen and (min-width: 930px) {
    .consecration-banner {
        font-size: 1.5em;
    }
}
    
/* End Desktop Navigation */

/* End Consecration */

/* General */



.menu-button-container{

    display: block;

    position: absolute;

    top: 75%;

}



.menu-button{

    font-family: Lato-Bold;

    font-size: 100%;

    color: white;

    float: left;

    border: 1px solid;

    margin: 0.3em 5%;

    padding: 0.2em;

    text-decoration: none;

    width: 90vw;

}



.more-button{

	font-family: Lato-Bold;

    font-size: 80%;

    color: black;

    text-align: center;

    border: 1px solid;

    margin: 2em 40px;

    padding: 0.3em 1em 0.1em 1em;

    text-decoration: none;

    display: inline-block;

}



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	.more-button{

		font-size: 13px;

		border: 1px solid;

		margin-top: 2em;

		padding: 5px 40px;

		width: auto;

	}

	



}

/* End Desktop Navigation */

/* End General */



/* Navbar */

.navigation {

  height: 50px;

  background: #4C4A4B;

  position: fixed;

  width: 100%;

  z-index: 2;

}



.nav-container {

  max-width: 1170px;

  margin: 0 auto;

}



.brand {

  position: absolute;

  padding-left: 15px;

  padding-top: 2px;

  float: left;

  line-height: 50px;

  text-transform: uppercase;

  font-size: 110%;

  font-family: 'Lato-Regular';

}



.brand > a> img{

   vertical-align: middle;

   margin-right: 25px;

}



.brand a,

.brand a:visited {

  color: #ffffff;

  text-decoration: none;

    line-height: 20px;

}



nav {

  float: right;

}



nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



nav ul li {

  float: left;

  position: relative;

}



nav ul li a,

nav ul li a:visited {

  display: block;

  padding: 0 17px;

  line-height: 50px;

  color: #ffffff;

  text-decoration: none;

  font-size: 110%;

  font-family: 'Lato-Regular';

  background: #4C4A4B;

}



nav ul li #nav-gallery{

    //background: #563E5E;

}



nav ul li #nav-contact{

    background: #5d458a;

}





nav ul li a:hover,

nav ul li a:visited:hover {

  color: #ffffff;

}







/* Mobile navigation */



.nav-mobile {

  display: none;

  position: absolute;

  top: 0;

  right: 0;

  height: 50px;

  width: 50px;

}



@media only screen and (max-width: 930px) {

  .nav-mobile {

    display: block;

  }

  nav {

    width: 100%;

    padding: 50px 0 0px;

  }

  nav ul {

    border-top: solid 1px #656565;

    display: none;

  }

  nav ul li {

    float: none;

  }

  nav ul li a {

    padding: 15px;

    line-height: 20px;

  }

}



@media screen and (min-width: 930px) {

  .nav-list {

    display: block !important;

  }

  

  .brand {

	  padding-left: 20px;

	  padding-top: 0;

	  float: left;

	  line-height: 80px;

	  font-size: 23px;

	  font-family: 'Lato-Regular';

	}



	.brand a,

	.brand a:visited {

	  color: #ffffff;

	  text-decoration: none;

		line-height: 20px;

	}

}



#nav-toggle {

  position: absolute;

  top: 12px;

  cursor: pointer;

  padding: 10px 35px 16px 0px;

}



#nav-toggle span,

#nav-toggle span:before,

#nav-toggle span:after {

  cursor: pointer;

  border-radius: 1px;

  height: 4px;

  width: 30px;

  background: #ffffff;

  position: absolute;

  display: block;

  content: '';

  transition: all 300ms ease-in-out;

}



#nav-toggle span:before {

  top: -10px;

}



#nav-toggle span:after {

  bottom: -10px;
}



#nav-toggle.active span {

  background-color: transparent;

}



#nav-toggle.active span:before,

#nav-toggle.active span:after {

  top: 0;

}



#nav-toggle.active span:before {

  transform: rotate(45deg);

}



#nav-toggle.active span:after {

  transform: rotate(-45deg);

}



article {

  margin: 0 auto;

}



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	.navigation {

	  height: 80px;

	  background: rgba(39, 39, 39, 0.81);

	  position: fixed;

	}

	

	nav ul li a,

	nav ul li a:visited {

		  line-height: 80px;

		  color: #ffffff;

		  font-size: 23px;

		  background:rgba(0, 0, 0, 0);

	}

}

/* End Desktop Navigation */



/* end Navbar */



.main{



}



.anchor{

	position:absolute;

	top:-49px;

	transition: 2s;

}



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	.anchor{

		top:0;

	}

}

/* End Desktop Navigation */



/* Splash */



.splash{

	min-height: 480px;

    position: relative;

    text-align: center;

    height: 100vh;

	box-shadow: 0 17px 25px rgba(136, 136, 136, 0.34);

	transition: 0.5s;

}



.carousel{

    height: 100%;

    overflow: hidden;

    width: 100%;

    position: absolute;

	z-index: -1;

}



.carousel img{

    height: 100%;

}



.carousel figure{

    height: 100%;

    margin: 0;

}



#first-slide{

    background: url("../images/c1-small.jpg") no-repeat center;

    background-size: cover;

}



#second-slide{

    background: url("../images/c2-small.jpg") no-repeat center;

    background-size: cover;

}



#third-slide{

    background: url("../images/c3-small.jpg") no-repeat top;

    background-size: cover;

}



.shade{

    height: 100%;

    position: absolute;

    opacity: 0.5;

    background: black;

    width: 100%;

	z-index: -1;

}



.logo{

	width: 5em;

    display: block;

    margin: 0 auto;

    top: 15%;

	position: relative;

}



.church-name{

    color: white;

    width: 100%;

    font-size: 110%;

    font-family: 'Lato-Regular';

    text-align: center;

    padding-bottom: 0.5em;

    margin-bottom: 0.5em;

    position: absolute;

    top: 40%;

    margin-left: auto;

    margin: auto;

}



.address{

	color: white;

    font-size: 100%;

    width: 100%;

    font-family: 'Lato-Light';

    top: 100%;

    display: block;

    margin-left: auto;

    margin: auto;

    margin-top: 0.5em;

}



.church-name .underline-box{

    border-bottom: solid 1px;

    display: inline-block;

    padding: 0 0.1em 0.1em;

    width: 90%;

}



.church-name .title, .church-name .subtitle{

	font-weight: bold;

	display: inline-block;

	font-size: 120%;

}	



.church-name .subtitle{

	clear: left;

}



.address .street{

	display: block;

}



.address > .comma{

	visibility: hidden;

}



.address .city{

	

}



.menu-button-container{

    display: block;

    position: absolute;

    top: 75%;

}



.menu-button{

    font-family: Lato-Bold;

    font-size: 100%;

    color: white;

    float: left;

    border: 1px solid;

    margin: 0.3em 5%;

    padding: 0.2em;

    text-decoration: none;

    width: 90vw;

}



/* Landscape mobile navigation */



@media only screen and (min-width: 450px) {

	#first-slide{

    		background: url("../images/c1-medium.jpg") no-repeat center;

	}



	#second-slide{

    		background: url("../images/c2-medium.jpg") no-repeat center;

	}



	#third-slide{

    		background: url("../images/c3-medium.jpg") no-repeat top;

	}

	.splash{

		min-height: 400px;

	    height: 400px;

	}

	

	.logo{

		top: 18%;	

	}

	

	.address{

		top: 19%;	

	}

	

	.address .street{

		display: inline;

	}

	

	.address > .comma{

		visibility: visible;

	}

	

	.church-name{

		top: 49%;

	}

	

	.church-name .underline-box{

	    padding: 0 1em 0.4em;

		width: auto;

	}

	

	.menu-button-container{

		position: absolute;

		top: 53%;

		margin: 7.5em auto;

		display: block;

		width: 26.3em;

		left: 0;

		right: 0;

	}	



	.menu-button{

		font-family: Lato-Bold;

		float: left;

		margin: 0 14px;

		width: 7em;

	}

}



/* End Landscape mobile navigation */



/* Desktop Navigation */

@media only screen and (min-width: 930px) {


	#first-slide{

    		background: url("../images/c1-large.jpg") no-repeat center;

	}



	#second-slide{

    		background: url("../images/c2-large.jpg") no-repeat center;

	}



	#third-slide{

    		background: url("../images/c3-large.jpg") no-repeat top;

	}

	.splash{

		height: 740px;

	}



	.carousel{

		height: 740px;

		width: 100%;

		position: absolute;

	}

	

	.logo{

		display: block;

		margin: 0 auto;

		top: 25%;

		width: auto;

	}

	

	.church-name{

		color: white;

		font-size: 34px;

		top: 60%;

	}

	

	.church-name .title, .church-name .subtitle{

		font-size: 34px;

	}	

	

	.address{

		font-size: 25px;

	    margin-top: 1.5em;

	}

	

	.menu-button-container{

		top: 71%;

		width: 32.5em;

	}

	

	.menu-button{

		font-size: 13px;

		border: 1px solid;

		margin: 14px;

		padding: 10px 40px;

		width: auto;

	}

}

/* End Desktop Navigation */



/* end Splash */



/* Description */



.description{

    padding: 20px 0;

	text-align: center;

}



.archangels-logo{

	width: 100vw;

	max-width: 500px;

	display: block;

	margin: 0 auto;

}



.description > .title{

	font-family: 'Lato-Regular';

	text-align: center;

	font-size: 110%;

}



.description > p{

	margin: 1em 1em 0 1em;

	text-align: center;

}



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	.description {

		padding: 40px 0 20px 0;

		text-align: center;

	}

	

	.archangels-logo{

		max-width: 600px;

	}

	

	.description > .title{

		    font-size: 200%;

			margin: 1em 0;

	}

	

	.description > p{

		margin: 1em auto;

	    width: 59vw;

		font-size: 19px;

		font-family: 'Lato-Regular';

	}

	



}

/* End Desktop Navigation */



/* end Description */



/* Calendar */



.calendar{

	box-shadow: 0 -17px 25px rgba(136, 136, 136, 0.34), 0 17px 25px rgb(134, 134, 134);

	position: relative;

	text-align: center;

}



.calendar > .background{

	background: url("../images/cal.jpg") no-repeat top right;

    background-size: cover;

    height: 100%;

    overflow: hidden;

    width: 100%;

    position: absolute;

	z-index: -1;

}



.calendar > .title{

	font-family: 'Lato-Regular';

	text-align: center;

	font-size: 110%;

	color: white;

	padding-top: 40px;

}



.calendar-frame{

    width: 86vw;

    height: 130vw;

	position: relative;

	padding-bottom: 40px;

    margin: auto;

    display: block;

}



.calendar > p {

	color: white;

	text-align: center;

	padding: 0 1em;

	width: 86vw;

	margin: 1em auto;

	max-width: 1100px;

}



/* Landscape mobile navigation */



@media only screen and (min-width: 450px) {

	.calendar-frame{

		height: 60vw;

	}

}



/* End Landscape mobile navigation */



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	.calendar > .title{

		    font-size: 200%;

			padding: 80px 0 0.5em;

	}

	

	.calendar > p{

		font-size: 19px;

		font-family: 'Lato-Regular';

	}

	

	.calendar-frame{

		margin-top: 50px;

		padding-bottom: 80px;

		height: 850px;

	}



}

/* End Desktop Navigation */



/* end Calendar */



/* Stewardship */



.stewardship{

	position: relative;

	text-align: center;

	padding-bottom: 40px;

}



.stewardship > .background{

	background: url("../images/stewardship-back.jpg") no-repeat center;

    background-size: cover;

    height: 100%;

    overflow: hidden;

    width: 100%;

    position: absolute;

	z-index: -1;

}



.shade.light{

	background: white;

	opacity: 0.8;

}



.stewardship-logo{

    width: 6em;

    margin: auto;

    display: block;

    padding-top: 40px;

}



.stewardship > .title{

	font-family: 'Lato-Regular';

	text-align: center;

	font-size: 110%;

}



.stewardship > p{

	margin: 1em 1em 0 1em;

	text-align: center;

}







/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	

	.stewardship-logo{

		width: 120px;

		padding-top: 80px;

	}

	

	.stewardship > .title{

		font-size: 200%;

		margin: 1em 0;

	}

	

	.stewardship > p{

		margin: 1em auto;

	    width: 650px;

		font-size: 19px;

		font-family: 'Lato-Regular';

	}

	

	.stewardship > .background{

		background: url(../images/stewardship-back.jpg) no-repeat;

	    background-size: cover;

	}

	



}

/* End Desktop Navigation */



/* end Stewardship */



/* Location */



.location{

	box-shadow: 0 -17px 25px rgb(134, 134, 134), 0 17px 25px rgb(134, 134, 134);

	position: relative;

	color: white;

}



.map-pin{

	width: 2em;

	display: block;

	margin: auto;

    padding-top: 20px;

}



.location > .background{

	background: url("../images/location.jpg") center top no-repeat;

    background-size: auto 200%;

    height: 100%;

    overflow: hidden;

    width: 100%;

    position: absolute;

	z-index: -1;

}



.location  div{

	display: block;

    text-align: center;

    padding-bottom: 10px;

}



.find{

	font-family: Lato-Bold;

}



.location > .telephone{

	padding-bottom: 40px !important;

}



/* Landscape mobile navigation */



@media only screen and (min-width: 450px) {

	.location > .background{

		background-size: cover;

	}

	

	.location-container{

		width: 90%;

		padding-bottom: 7em !important;

		margin: auto;

	}

	

	.location-container div{

		float: left;

		margin-top: 0.5em;

		width: 33%;

	}

}



/* Landscape mobile navigation */



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	.map-pin{

		width: 5em;

		padding-top: 160px;

	}

	

	.location-container{

		width: 70vw;

		min-width: 850px;

		padding-bottom: 290px !important;

	}

	

	.location-container div{

		font-size: 30px

	}



}

/* End Desktop Navigation */



/* end Location */



/* Map */



.map{

	background: url("../images/map.jpg") no-repeat;

    background-size: cover;

	height: 60vw;

	max-height: 300px;

}



/* Landscape mobile navigation */



@media only screen and (min-width: 450px) {

	.map{

		background: url(../images/map.jpg) center no-repeat;

		background-size: cover;

		height: 40vw;

	}

}


/* End Landscape mobile navigation */



/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	.map{

		height: 650px;

		max-height: none;

	}



}

/* End Desktop Navigation */



/* end Map */



/* Contact */



.contact{

	box-shadow: 0 -17px 25px rgb(134, 134, 134);

	position: relative;

	color: white;

	text-align: center;

}





.contact > .background{

	background: url("../images/contact.jpg") bottom no-repeat;

    background-size: auto 180%;

    height: 100%;

    overflow: hidden;

    width: 100%;

    position: absolute;

	z-index: -1;

}



.contact > .title{

	font-family: 'Lato-Regular';

	text-align: center;

	font-size: 110%;

	color: white;

	padding-top: 40px;

	padding-bottom: 1em;

	text-shadow: 2px 2px 8px black;

}



::-webkit-input-placeholder { /* WebKit, Blink, Edge */

    color:    white;

}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

   color:    white;

   opacity:  1;

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

   color:    white;

   opacity:  1;

}

:-ms-input-placeholder { /* Internet Explorer 10-11 */

   color:    white;

}



.contact input, .contact textarea, .contact .send-button{

    background: rgba(0,0,0,0.6);

    color: white;

    border: solid 1px;

    margin: .5em auto;

    display: block;

    height: 2em;

    width: 86vw;

    padding: 0.5em;

}

.email-input-error{
	
	border-color: #ff8a22 !important;

}


.contact textarea{

	resize: none;

	height: 10em;

}



.contact .send-button{

	margin-top: 1em;

	text-decoration: none;

	margin-bottom: 20px;
	
	text-align: center;

	display: inline-block;

}

.email-response{
	display: inline-block;
    margin-top: 1em;
    font-size: 1.3em;
    font-family: 'Lato-Regular';
    font-weight: bold;
}

.email-response-error{
	color: #ff8a22;
	margin-bottom: 20px;
}

.email-response-good{
	color: #31ff31;
	margin-bottom: 20px;
}

/* Desktop Navigation */

@media only screen and (min-width: 930px) {

	

	.contact{

		padding-bottom: 120px;

	}



	.contact > .background{

		background-size: cover;

	}



	.contact .title{

		font-size: 200%;

		margin: 0;

		padding-top: 100px;

	}

	

	.contact .left-contact{

		display: inline-block;

		height: 200px;

		vertical-align: top;

		margin: 0 10px 0 0;

	}



	.contact input{

		width: 300px;

		height: 50px;

		margin-bottom: 25px;

		margin-top: 0;

	}

	

	.contact textarea{

		width: 591px;

		height: 200px;

		margin: 0 0 0 10px;

		display: inline-block;

		vertical-align: bottom;

		padding: 15px;

	}

	

	.contact .send-button{

		height: 50px;

		line-height: 31px;

		display: block;

		width: 915px;

		margin-top: 20px;

		margin-bottom: 0;

	}



}

/* End Desktop Navigation */



/* end Contact */



/* Fading animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}