@font-face {
		font-family: myFirstFont;
  		src: url(../css/fonts/fnt1.ttf);
  		}
  		@font-face {
		font-family: mysecFont;
  		src: url(../css/fonts/fnt2.ttf);
  		}
  		@font-face {
		font-family: mythrFont;
  		src: url(../css/fonts/fnt3.ttf);
  		}
		.header {
		background-color: #ebe7e1;
		margin-top: 5%;
		margin-left: 1%;
		margin-right: 1%;
		height: 40px;
		margin-bottom: 4%;

		}
		.logo {
      visibility: hidden;
		width: 35%;
		transform: translate(-15%,-35%);
		} 
		.line {
		margin-top: -40%;
		height: 2px;
		background-color: black;
		}
		/*Body*/
		
		.promo {
		height: 305px;
		text-align: center;
		width: 184%;
		border: 4px dashed #f3c6b3;
		margin-top: 1%;
		float: left;
		margin-left: 0%;
		padding-left: 0%;
		padding-right: 1%; 
		padding-bottom: 1.5%;
		margin-bottom: 3%;
		}
		.sche {
		width: 19%;
		float: left;
		margin-left: 1%;
		padding-left: 1%;
		padding-right: 1%; 
		}
		.social {
		width: 68%;
		float: left;
		margin-top: -8%;
		margin-left: 68%;
		margin-right: 1%;
		padding-left: 1%;
		margin-bottom: 2%;
		}
		
		ul, li {
			list-style-type: none;
		}
		footer {
			width: 150%;
			float: left;
			margin-left: 5%;
			margin-top: 8%;
			background-color: #d0bba9;
      padding-right: 34%;
		}
		.sticky {
  		position: fixed;
  		top: -10%;
  		left:2%;
  		max-width: 85%;
		padding-top: 2%;
  		margin-right: 2%;
  		}
  		.left, .right {
  			max-width: 48%;
  			float: left;
  			padding-right: 0;
  			margin-right: 0;
  		}
  		.right {
  			margin-right: -10%;
  		}
  		.menu, .gallery, .order, .contact {
  			float: right;
  			background-color: transparent;
  			text-decoration: none;
  			height: 65px;
  			font-size: 7px;
  			width: 14%;
  			margin-left: 1%;
  			margin-top: -4%;
  			border: none;
  			padding-bottom: 0;

  		}
  		.gallery {
  			margin-right: 8%;
  		}
  		.menu:hover, .gallery:hover, .order:hover, .contact:hover {
  			background-color: #d6d2cb;
  		}
  		.updates-img {
  			width: 190%;
        margin-top: -22%;
  		}
  		.amen-img {
  			width: 220%;
  			margin-top: -18%;
        margin-left: -14%;
        margin-bottom: -32%;
  		}
  		.rowtwo {
  			float: left;
  		}
  		.column {
  			margin-left: 1%;
   			width: 100%;
  		}
  		.lob-pic {
  			width: 0%;
  			margin-left: 10%;
  		}
  		.rowbox {
  			text-align: center;
  			width: 100%;
  			margin-left: 8%;
  		}
  		.promfon {
  			font-family: myFirstFont;
  		}
  		.promfontwo, .promfonthree {
  			font-family: mysecFont;
  			text-align: center;
  		}
  		.promfonthree {
  			margin-left: -11%;
  		}
  		.bottom{
  			font-family: mythrFont;
  			text-align: center;
  			margin-bottom:13%;
  			margin-top: -2%;
  		}
  		.hour {
  			font-family: mythrFont;
  			margin-left: 1%; 
  			float: left;
  			padding-right: 0%;
  			padding-left: 0;
  			border-left: 4px dashed #F2D7C2;
  		}
  		.htitl {
  			font-family: myFirstFont;
  			text-align: center;
  			margin-left: 102%;
  			margin-bottom: 10%;
  			margin-top: 5%;
  		}
  		.schedul {
  			font-family: mysecFont;
  			margin-bottom: 13%;
  			margin-top: 13%; 
  			float: left;
  			margin-left: 28%;
  			padding-right: 11%;
  			border-right: 4px dashed #F2D7C2;
  		}
  		.schedli {
  			margin-bottom: -4.5%;
  		}
  		
  		.rowfour {
  			margin-top: -100%;
  			padding-right: 95%;
  			padding-top: 10%;
        padding-bottom: 1%;
  			float: left;
  			border: 4px dashed #f3c6b3;
  			width: 90%;
  		}
  		.twitt {
  			width: 0%;
  		}

  		.twittpic {
  			float: left;
  			width: 0%;
  			border-radius: 100%;
  			padding: 2.2%;
  			margin-top: -6.5%;
  		}
  		
  		.facebpic {
  			float: left;
  			width: 0%;
  			border-radius: 100%;
  			padding: 2%;
  			margin-top: -6.5%;
  			margin-left: 2%;
  		}
      .faceb {
        width: 0%;
      }
  		.instagpic {
  			float: left;
  			width: 0%;
  			border-radius: 100%;
  			padding: 2%;
  			margin-top: -6.5%;
  			margin-left: 2%;
  		}
      .instag {
        width: 0%;
      }
      
       .column {
        margin-left: 2%;
        float: left;
        width: 50%;
      }
      
      .rowbox {
        text-align: center;
        width: 100%;
        margin-left: 8%;
      }
      .promfon {
        font-family: myFirstFont;
      }
      .promfontwo, .promfonthree {
        font-family: mysecFont;
        text-align: center;
      }
      .promfonthree {
        margin-left: -11%;
      }
      .bottom{
        font-family: mythrFont;
        text-align: center;
        margin-bottom:13%;
        margin-top: -2%;
      }
      .schedul {
        font-family: mysecFont;
        margin-bottom: 13%;
        margin-top: 13%; 
        float: left;
        margin-left: 6%;
        border-right: 4px dashed #F2D7C2;
        transform: translate(98%,-120%);
      }
      .schedli {
        margin-bottom: 1.5%;
        font-size: 80%;
      }
      .schedltwo {
        margin-left: 22%;
        margin-bottom: -10%;
      }
      
       
      .follow {
        margin-top: -9%;
        float: left;
        width: 205%;
        margin-left: 6%;
      }
      .newsletter {
        padding: 0;
      }
       .news {
        font-family: myFirstFont;
        font-size: 150%;
        margin-top: 14%;
        margin-left: 15%;
        text-align: left;
        width: 220%;
       }
       .email {
        width: 200%;
        margin-left: 12%;
        height: 32px;
       }
       .subbutton {
        width: 200%;
        height: 62px;
        margin-left: 16%;
        margin-top: 2%;
        border-radius: 10%;
        background-color: #f3c6b3; /* Green */
        border: none;
        color: black;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-family: mysecFont;
        margin-bottom: 5%;
       }
       .subbutton:hover {
        background-color: #ebe7e1;
        color: black;
       }
       .design, .copyright {
        text-align: center;
        font-size: 250%;
       }
       .footernum {
        text-align: center;
        font-family: myFirstFont; 
        font-size: 200%;
        margin-top: 5%;
        width: 240%;
       }
       .copyright {
        text-align: center;
        font-family: mythrFont;
        margin-bottom: -7%;
        font-size: 115%;
        margin-left: 18%;
       }
       .design {
        font-family: mythrFont;
        font-size: 175%;
        margin-left: 14%;
       }
       .linetwo {
        margin-top: -3.8%;
        height: 5px;
        width: 86.2%;
        background-color: black;
       }
       .footlogo {
        z-index: 1;
        padding-left:30%;
        padding-right: 20%;
        width: 175%;
        margin-left: 12%;
        margin-top: 15%;
       }
       .menu, .gallery, .order, .contact {
        visibility: hidden;
       }
       .topnav {
  overflow: hidden;
  background-color: #d6d2cd;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
  display: block;
}

.topnav a.icon {
  background: #ebe7e1;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 5%;
  text-align: right;
  margin-top: 10%;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #ebe7e1;
  color: black;
}
.hoursimg {
  width: 195%;
  margin-top: 8%;
}
.follow {
  width: 250%; 
}
.facebook {
  width: 66%;
  transform: translate(-25%,0);
  background-color: #c4a667;
  filter: invert(100%);
  border-radius: 55%;
  padding: 2%;
}
.twitter {
 width: 60%;
 transform: translate(106%, -135%);
 background-color: #ff5311;
 filter: invert(100%);
 border-radius: 55%;
 padding: 5%;
}
.instagram {
  background-image: linear-gradient(to bottom left, #75c546, #03339c);
  filter: invert(100%);
  border-radius: 55%;
  padding: 2%;
 width: 66%;
 transform: translate(235%, -252%);
}