@charset "utf-8";
/*Landing Page*/
.Landing
{
	width: 100%;
	height: 100%;
	background-color: red;
	background:url(../Images/Church.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;


}
.Landing center
{
	font-size: 25px;
	-moz-font-size:15px;
	-webkit-font-size:15px;
	padding-top: 13%;
}
/*Navigation*/
.topnav {
  overflow: hidden;
  background-color: #89cff0;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 5px;
  text-decoration: none;
  font-size: 17px;
  font-family:"Montserrat";
}


.active {
  
  color: white;
}

.topnav .icon {
  display: none;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .Content1 {
  padding-top: 0px;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
    margin-top:10px;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.Content1
{
	width: 100%;
	height:100%;
	font-family:"Montserrat";
}

/*Services*/
.services
{
	
}
.fa-user
{
	width: 30px;
	height: 30px;
	color: black;
	transition: 0.5s;
}
.fa-user:hover
{
	color: green;
	transform: scale(1.2);
}
.left
{
	margin: 100px;
	float: left;
	width: 30%;
	border: 2px;
}
.right
{
	margin: 100px;
	float: right;
	width: 30%;
}

/*news*/
.news
{
	height: 100%;
	background-color: yellow;
}
.about
{
	height: 100%;
	background-color: green;
}
.contact
{
	height: 100%;
	background-color: grey;
}
html,body
{
	height: 100%;
	margin: 0;
	font-family:"Montserrat";
}
/*Submit*/
.submit
{
	margin-top: -20px;
}
.login
{
	font-family:"Montserrat";
}
#border
{
	border: 2px;
	border-style: solid;
	height: 750px;
	padding: 10px;
}
#footer
{
	height: 500px;
	background: #333;
}
.parallax{
	background-image: url(../Images/Church.jpg);
height:200px;
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
@media only screen and (max-width: 1150px)
{
	.left
{
	float: none;
	width: 80%;
	height: 100%;
}
.right
{
	float: none;
	width: 80%;
	height: 100%;
}
#border
{
	height: 520px;
}
}
@media only screen and (max-width: 1080px)
{
.left
{
	float: none;
	margin-left: 1%;
	width: 93.5%;
}
.right
{
	float: none;
	margin-left: 0px;
	width: 93.5%;
}
#border
{
	height: 520px;
	margin: 20px;
}
}

@media only screen and (max-width: 929px)
{
.left
{
	width: 92.5%;
}
.right
{
	width: 92.5%;
}
#border
{
	height: 550px;
}
#small1
{
	
	text-align: left;
	margin-left: 27%;
	margin-right: -500px;
}
#small2
{
	text-align: left;
	margin-top: 60px;
	padding-right: 250px;
}
#small3
{
	margin-top: 80px;
}
}
@media only screen and (max-width: 890px)
{
#small2
{
	padding-right: 30%;
}
}
@media only screen and (max-width: 640px)
{
.left
{
	width: 89.5%;
}
.right
{
	width: 89.5%;
}
#border
{
	height: 680px;
}
#border2
{
	height: 100%;
}
#small1
{
	
	text-align: left;
	margin-left: 25%;
	margin-right: -500px;
}
}
@media only screen and (max-width: 509px)
{
.left
{
	width: 86.5%;
}
.right
{
	width: 86.5%;
}
#border
{
	height: 720px;
}
#small1
{
	
	text-align: left;
	margin-left: 22%;
	margin-right: -500px;
}
}
@media only screen and (max-width: 409px)
{
.left
{
	width: 83.5%;
}
.right
{
	width: 83.5%;
}
#border
{
	height: 900px;
}
#small1
{
	
	text-align: left;
	margin-left: 15%;
	margin-right: -500px;
}
}
@media only screen and (max-width: 380px)
{
.left
{
	width: 82.5%;
}
.right
{
	width: 82.5%;
}
#border
{
	height: 900px;
}
#small1
{
	
	text-align: left;
	margin-left: 10%;
	margin-right: -500px;
}
#small2
{
	margin-top: 40px;
}
}
@media only screen and (max-width: 350px)
{
.left
{
	width: 80.5%;
}
.right
{
	width: 80.5%;
}
#border
{
	height: 930px;
}
}
@media only screen and (max-width: 330px)
{
.left
{
	width: 78.5%;
}
.right
{
	width: 78.5%;
}
#border
{
	height: 900px;
}
}
@media only screen and (max-width: 300px)
{
.left
{
	width: 75.5%;
}
.right
{
	width: 75.5%
}
#border
{
	height: 960px;
}
}@media only screen and (max-width: 270px)
{
.left
{
	width: 75.5%;
}
.right
{
	width: 75.5%
}
#border
{
	height: 1060px;
}
}