/*@font-face
{
font-family: 'myfont;
src:url('fonts/digital-7.regular.ttf') format('truetype');
}
*/
@font-face {
	font-family: 'myfont';
	src: url('../fonts/digital-7.regular.eot?#iefix') format('embedded-opentype'), 
	     url('../fonts/digital-7.regular.woff') format('woff'), 
	     url('../fonts/digital-7.regular.ttf')  format('truetype'),
	     url('../fonts/digital-7.regular.svg#svgFontName') format('svg');
	}

:root {
	--main-radius: 5px;
	--padding-top: 5px;
}

html,body{
margin: 0;
padding:0;

}

.wrapper {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: 100px 50px auto auto;
	grid-template-areas: "n n n n n n" "m m m m m m" "c c c c c c" "c c c c c c" "c c c c c c" "p p p p p p" "p p p p p p" "p p p p p p" "s s s s s s" "s s s s s s" "s s s s s s" "sg sg sg sg sg sg" "t t t t t t" "f f f f f f";
	grid-gap: .5em;
}

.nav {
	display: grid;
	color: rgb(5, 4, 4);
	background: rgb(2, 2, 48);
	grid-area: n;
	grid-gap: .3em;
	grid-template-columns: 1fr 4fr 1fr;
}

#earth {
	margin: auto auto;
	grid-template-columns: 1fr;
	background: url("Earth_Color4096.jpg");
	border-radius: 50%;
	background-size: 100px 100px;
	box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
	animation-name: rotate;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes rotate {
	from {
			background-position-x: 0px;
	}
	to {
			background-position-x: 100px;
	}
}

#earth {
	width: 70px;
	height: 70px;
	border-collapse: separate;
	z-index: 999;
}

#earth {
	/**/
	float: left;
	filter: drop-shadow(0px 0px 10px rgba(236, 239, 240, 0.911));
}

.nav>.holder {
	grid-template-columns: 4fr;
	background: rgb(2, 2, 48);
	font-size: 1.5em;
	color: rgba(248, 217, 217, 0.867);
	font-weight: 500;
	justify-content: center;
	justify-items: center;
	text-justify: middle;
	text-align: center;
	overflow: hidden;
}

.nav>.menu {
	grid-template-columns: 1fr;
	background: rgb(2, 2, 48);
}

.marque {
	background: green;
	grid-area: m;
	grid-template-columns: 1/6;
	border-radius: 12px;
	color: white;
	font-size: 1.5em;
	text-align: center;
	padding-top: 10px;
}

.marque marque {
	font-size: 2em;
}

.slideshow-cont {

	display: grid;
	grid-template-columns: 6fr;
	padding-top: var(--padding-top);
	padding-bottom: var(--padding-top);
	grid-area: c;
	width: 100%;
	background: green;
	}
	
	.dot {
	
		cursor: pointer;
		height: 15px;
		width: 15px;
		margin: 0 2px;
		background-color: black;
		border-radius: 50%;
		display: inline-block;
	/*	transition: background-color 5s ease;*/
		z-index: 100;
	}
	.active,
	.dot:hover {
			background-color: #eee;}
			.prev,
	.next {
			cursor: pointer;
			position: absolute;
			top: 30%;
			width: auto;
			padding: 16px;
			margin-top: -22px;
			color: white;
			font-weight: bold;
			font-size: 18px;
			transition: 0.6s ease;
			border-radius: 0 3px 3px 0;
			user-select: none;
	}
	.next {
		right: 0;
		border-radius: 3px 0 0 3px;
	}
	.prev:hover,
	.next:hover {
			background-color: rgba(0, 0, 0, 0.8);
	}
	.slide-text {
		color: #ddd;
		background-color:transparent;
		background-color: rgba(23, 42, 70, 0.589);
		font-size: 30px;
	position:absolute;
grid-area:c;
		top: 40%;
		width: 100%;
		text-align: center;
		margin-left: 20px;
		margin-right: 20px;
		
	}




.prgm {
	display: grid;
	background: rgb(223, 196, 196);
	background: rgba(2, 46, 66, 0.925);
	grid-gap: .4em;
	grid-area: p;
	border-radius: 12px;
	padding: 10px;
}

.prgm>div {
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	text-align: center;
	font-weight: 700;
	text-justify: bottom;
}

.logo {
	background: rgba(236, 228, 220, 0.6);
	background: #eee;
	font-size: 1em;
	font-weight: lighter;
	padding: 10px;
}

.yt,
.ssl,
.fmly,
.bbl,
.pry,
.fcc,
.zm,
.scd,
.intnum {
	display: grid;
	padding-top: var(--padding-top);
	padding: 10px;
	grid-template-columns: 40% 60%;
	border-radius: 10px;
}

.text {
	background:#ddd;
	font-size: 1em;
	font-weight: lighter;
	padding: 10px;
	text-align: justify;
	text-justify: center;

}

.text p {
	color: rgb(12, 9, 9);
	font-size: .75em;
	font-weight: lighter;
}

.yt a {
	text-decoration: none;
}

.sermon {
	display: grid;
	background: rgb(194, 183, 183);

	grid-gap: .4em;
	grid-area: s;
	grid-template-rows: fit-content(100%);
	border-radius: 12px;
	padding-top: var(--padding-top);
	padding: 10px;
}



.sermon h3 {
	text-align: center;
	color: navy;
	line-height: 1.5em;
}

.srm {
	display: grid;
	background: rgba(89, 112, 122, .6);
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	grid-template-rows: 40px;
}

.song {
	display: grid;
	padding-top: var(--padding-top);
	padding: 10px;
	background: grey;
	grid-area: sg;
	grid-gap: .4em;
	grid-template-columns: 100%;
	border-radius: 12px;
}

.song>div {
	display: grid;
	background: red;
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
}

.song>.sng {
	background: rgba(223, 236, 241, 0.6);
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	grid-template-columns: 40% 60%;
}

.test {
	display: grid;
	background: grey;
	grid-area: t;
	grid-template-columns: 1/6;
	grid-template-columns: 100%;
	border-radius: 12px;
}

.footer {
	display: grid;
	background: rgb(1, 0, 3);
	grid-area: f;
	color: white;
	grid-template-columns: 100%;
}

.footer>div {
	text-align: center;
	border-bottom: 2px white dotted;
	margin-left: 20%;
	margin-right: 20%;
}

.footer p {
	color: rgb(197, 194, 194);
	font-size: .95em;
	padding: 0px;
}

.subft {
	grid-template-columns: 100%;
}

.carousel-control-prev {
	color: red;
}

.carousel-control-prev {
	color: red;
	background: blue;
}
/*The Nav bar menu style starts here*/

.site-nav {
	position: absolute;
	/*  top: 100%;*/
	top: 100px;
	right: 0%;
	background: rgb(31, 73, 146);
	/*background-color: rgba(4, 37, 93, 0.97);*/
	clip-path: circle(0px at top right);
	transition: clip-path ease-in-out 700ms;
	z-index: 1000;
}

.site-nav--open {
	clip-path: circle(150% at top right);
}

.site-nav--open {
	height: auto;
}

.site-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	border-bottom: 1px solid #575766;
}

.site-nav li:last-child {
	border-bottom: none;
}

.site-nav a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
	padding: 1em 1em 1em 1em;
}

.site-nav a:hover,
.site-nav a:focus {
	background: rgb(173, 87, 17);
	color: #ececf1;
}

.site-nav--icon {
	display: inline-block;
	font-size: 1.5em;
	margin-right: 1em;
	text-align: right;
	color: rgba(255, 255, 255, .5)
}

.menu-toggle {
	padding: 1em;
	position: absolute;
	top: 1.5em;
	right: .5em;
	cursor: pointer;
}

.hamburger,
.hamburger::before,
.hamburger::after {
	content: '';
	display: block;
	background: #EBEBD3;
	height: 3px;
	width: 1.75em;
	border-radius: 3px;
	transition: all ease-in-out 500ms;
}

.hamburger::before {
	transform: translateY(-6px);
}

.hamburger::after {
	transform: translateY(3px);
}

.open .hamburger {
	transform: rotate(45deg);
}

.open .hamburger::before {
	opacity: 0;
}

.open .hamburger::after {
	transform: translateY(-3px) rotate(-90deg);
}
.cprt{
	padding:30px;
	color: white;
	background: rgb(1, 0, 3);
	text-align:center;
	}
	/*count down starts here*/

	@font-face
{
    font-family: 'myfont';
src:url('../fonts/digital-7.regular.ttf');
}


.ct_container {
    position:fixed;
    bottom:0%;
    right:0%;
    margin:auto;
    text-align: center;
    padding:12px;
    box-shadow: 0 0 5px 5px rgb(255, 119, 0);
	font-family:sans-serif ;
	font-family:myfont ;
    border-radius: 20px;
    background:rgb(4, 4, 28);
    opacity: .7;
    z-index: 100000;
}

.info{

    /*background: rgb(8, 8, 8);*/
    color:rgb(71, 229, 54);
    font-size:1.5em;
    font-family: myfont;

}
/*count stops here*/

@media only screen and (min-width: 60em) {
	.wrapper {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: 100px 50px 80px 100px 100px 100px auto;
			grid-template-areas: "n n n n n n" "m m m m m m" "c c c c c c" "c c c c c c" "c c c c c c" "p p p p p p" "p p p p p p" "p p p p p p" "s s s s s s" "s s s s s s" "s s s s s s" "sg sg sg sg sg sg" "t t t t t t" "f f f f f f";
			grid-gap: .5em;
	}
	.nav {
			display: grid;
			color: rgb(5, 4, 4);
			background: rgb(2, 2, 48);
			grid-area: n;
			grid-gap: .3em;
			grid-template-columns: 1fr 4fr 1fr;
	}
	.prgm {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			padding-top: var(--padding-top);
			padding-top: var(--padding-top);
	}
	.ssl,
	.fmly,
	.bbl,
	.pry,
	.fcc,
	.yt,
	.zm,
	.scd,
	.intnum {
			display: grid;
			padding-top: var(--padding-top);
			padding: 10px;
			grid-template-columns: 1fr;
			border-radius: 10px;
	}
	.song {
			display: grid;
			padding-top: var(--padding-top);
			padding: 10px;
			background: grey;
			grid-area: sg;
			grid-gap: .4em;
			grid-template-columns: 1fr 1fr 1fr;
			border-radius: 12px;
	}
	.song>.sng {
			background: rgba(223, 236, 241, 0.6);
			border-radius: var(--main-radius);
			padding-top: var(--padding-top);
			grid-template-columns: 1fr;
	}
	
	/*count down starts here*/

	@font-face
{
    font-family: 'myfont';
src:url('../fonts/digital-7.regular.ttf');
}


.ct_container {
    position:fixed;
    bottom:0%;
    right:0%;
    margin:auto;
    text-align: center;
    padding:12px;
    box-shadow: 0 0 2px 2px blue;
	font-family:sans-serif ;
	font-family:myfont ;
    border-radius: 10px;
    background:rgb(0, 0, 21);
    opacity: .7;
    z-index: 100000;
}

.info{

    /*background: rgb(8, 8, 8);*/
    color:rgb(71, 229, 54);
    font-size:1em;
    font-family: myfont;

}	
	
}

@media only screen and (min-width: 80em) {
	.wrapper {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
	
			grid-template-rows: 100px 50px auto  auto;
grid-template-areas: 
"n n n n n n" 
"m m m m m m" 
"c c c c c c" 
"c c c c c c"
"c c c c c c" 
"p p p p p p" 
"p p p p p p" 
"p p p p p p" 
"s s s s s s" 
"s s s s s s" 
"s s s s s s" 
"sg sg sg sg sg sg" 
"t t t t t t" 
"f f f f f f";
grid-gap: .5em;
}
.nav {
display: grid;
color: rgb(5, 4, 4);
background: rgb(2, 2, 48);
grid-area: n;
grid-gap: .3em;
grid-template-columns: 1fr 4fr 1fr;
}
.prgm {
display: grid;
grid-template-columns: 4fr 4fr 4fr;
padding-top: var(--padding-top);
padding-top: var(--padding-top);
grid-area: p;
background: red;
background:rgb(17, 17, 31);
}
.yt,
.ssl,
.fmly,
.bbl,
.pry,
.fcc,
.zm,
.scd,
.intnum {
display: grid;
padding-top: var(--padding-top);
padding: 10px;
border-radius: 10px;
}
.sermon {
display: grid;
background:rgb(17, 17, 31);
grid-area:s;
grid-gap: 1em;
grid-template-columns: 4fr 4fr 4fr;
grid-template-rows: auto;
border-radius: 12px;
padding-bottom: 40px;
padding-top: 20px;
}

#hap-wrapper ,
 #hap-wrapper2,
 #hap-wrapper3{
	display: grid;
	padding-top: var(--padding-top);
	grid-template-columns:4fr ;
	padding: 10px;
	float:left;
	width:33.33%;
	height:200px;

	border-radius: 10px;

}




.slideshow-cont {

display: grid;
grid-template-columns: 6fr;
padding-top: var(--padding-top);
padding-bottom: var(--padding-top);
grid-area: c;
width: 100%;
background: green;
}

.dot {

	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: black;
	border-radius: 50%;
	display: inline-block;
/*	transition: background-color 5s ease;*/
	z-index: 100;
}
.active,
.dot:hover {
		background-color: #eee;}
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 60%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}



.slideshow-cont .slideshow-container .slide-text {


	color: #ddd;
	justify-items: center;
	font-size: 40px;
	padding: 8px 12px;
	position: absolute;
	top: 70%;
	font-weight:600;
	width: 80%;
	text-align: center;
	
}


/* Next */
	.footer {
			display: grid;
			background: rgb(1, 0, 3);
			grid-area: f;
			color: white;
			grid-template-columns: 1.5fr repeat(4, 1.125fr);
			align-items: center;	
			justify-items: center;

	}
	.footer>div {
			text-align: left;
			border-left: 2px rgb(88, 79, 79) dotted;
			margin-top: 10%;
			margin-bottom: 10%;
			margin-left: 10px;
			border-bottom: none;
			grid-template-columns: 1.5fr repeat(4, 1.125fr);
			
	}
	.footer>div:nth-child(1) {
			margin-bottom: 10%;
			margin-left: 20px;
			padding: 20px;
			border-left: none;
			grid-template-columns: 1.5fr repeat(4, 1.125fr);
	}

 
.footer>div:nth-child(6) {
	text-align: center;
	padding: 20px;
	border-left: none;
	grid-template-columns:1/6;
	align-items: center;
	justify-self: center;

}

.cprt{
	padding:30px;
	color: white;
	background: rgb(1, 0, 3);
	text-align:center;
		padding-bottom:60px;
	}
	
	/*count down starts here*/

	@font-face
{
    font-family: 'myfont';
src:url('../fonts/digital-7.regular.ttf');
}


.ct_container {
    position:fixed;
    bottom:0%;
    right:0%;
    margin:auto;
    text-align: center;
    padding:12px;
    box-shadow: 0 0 5px 5px blue;
	font-family:sans-serif ;

    border-radius: 20px;
    background:rgb(0, 0, 21);
    opacity: .7;
    z-index: 100000;
}

.info{

    /*background: rgb(8, 8, 8);*/
    color:rgb(71, 229, 54);
    font-size:1.5em;
    font-family: myfont;

}

} 


.navbar-bottom {
	overflow: hidden;
	background-color: rgba(14, 36, 160, 0.767);
	position: fixed;
	bottom: 0;
	width: 100%;
	display:inline;
  }
  
  .navbar-bottom  a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
  }
  
  .navbar-bottom  a:hover {
	background: #f1f1f1;
	color: black;
  }
  
  .navbar-bottom  a.active {
	background-color: #b5b8b5;
	color: white;
  }
  #status{
	  color:rgb(71, 229, 54);
	  font-family: "Power Geez Unicode1";
  }

<!---->

/*
.status{
border: 5px rgb(12, 217, 42) solid; 
border-radius: 10px rgb(12, 217, 42) solid;
Margin-left: 10%;
 border: 1px rgb(12, 217, 42) solid; 
background-color: rgb(196, 236, 255);
font-size: 3.5em;
position: relative;
padding:5px;
color:rgb(11, 25, 179);
display: inline-block;
z-index: 100;
}
.status::before,
.status::after{
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
right: 0;
bottom: 0;
left: 0;
 border-radius: 5px rgb(12, 217, 42) solid;
 padding:5px;
background-color: rgb(12, 217, 42,0.8); 
animation: repple-1 3s infinite ease-in-out;
z-index: -1;}
.status::after{

animation: repple-2 3s infinite ease-in-out;
animation-delay: 0.9s;  
        }
        @keyframes repple-1{
            0%{
                transform: scale(1);
                opacity: 1;
            }
            100%{
                transform: scale(1.5);
                opacity: 0;
            }
        }
        @keyframes repple-2{
            0%{
                transform: scale(1);
                opacity: 1;
            }
            100%{
                transform: scale(1.7);
                opacity: 0;
            }
        }
        
        */

  .social-icons {
            list-style-type: none;
            padding: 0;
        }
        .social-icons li {
            display: inline;
            margin: 0 10px;
        }
        .social-icons a {
            text-decoration: none;
            color: #fff;
            font-size: 24px;
        }
        .social-icons a:hover {
            color: #0073e6;
        }