/*correct that I typed myself*/
/**{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 100%;
}

body{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	min-height: 100vh;
	font-family: Merriweather, Georgia, serif;
	line-height: 1.45;
}

header{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 72px;
	padding: .5em 0 0 0 ;
	width: 100%;
	text-transform: uppercase;
	background-color: antiquewhite;
}

.site-title{
	font-size: 20px;
}

nav{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: .5em 0;
	width: 100%;
	font-family: "Merriweather Sans", Verdana, sans-serif;
	text-transform: uppercase;
	color: #eee;
	background-color: #333;
}

ul{
	display:flex;
	justify-content: flex-start;
	list-style-type: none;
}

li{
	padding-right: 12px;
	font-size: 12px;
}

main{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 960px;
}

article{
	width: 50%;
	flex:  1 1 300px;
	padding: 2%;
	background-color: white;
}

h2{
	font-size: 24px;
}

h3{
	margin-bottom: 16px;
	color: #666;
	font-size: 20px;
	font-style: italic;
}

article div{
	margin-bottom: 16px;
	text-align: justify;
}

aside{
	width: 25%;
	flex: 1 1 150px;
	font-family: "Merriweather Sans", Verdana, sans-serif;
	padding: 2%;
}

aside div{
	margin-bottom: 16px;
}

.sidebar-left{
	display: none;
	background-color: lightgray;
}

.sidebar-left div{
	padding-top: 4px;
	font-style: italic;
}

.sidebar-right{
	background-color: antiquewhite;
}

footer{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1% 0;
	width: 100%;
	font-family: "Merriweather Sans", Verdana, sans-serif;
	background-color: #333;
	color: #eee;
}

@media (min-width: 480px){
	.site-title{
		font-size: 40px;
	}
	li{
		padding-right: 40px;
		font-size: 16px;
	}

	h2{
		font-size: 32px;
	}

	header,nav{
		justify-content: center;
		padding-left: 0;
	}
}
*/























/*search-filter = header tag, Navigation tag, Main tag, aside tag, aside tag, footer tag, Header and Navigation, table in the article tag*/


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 100%;
}


/*	flex basis was the problem -look up what this is*/
body{
	display: flex;




	flex-direction: column;					
	justify-content: flex-start;				
	align-items: center;
	min-height: 100vh;
	font-family: Merriweather, Georgia, serif;
	line-height: 1.45;
	background-color: lightblue;
	transition: background-color .5s;
}





/*header tag*/
/*header tag*/




header{
	display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .5em 0 0 0;
    height: 72px;
    width: 100%;
    text-transform: uppercase;
    background-color: red;
}
/*header{
	padding: .25em 0;
	width: 100%;
    align-items: center;
    text-transform: uppercase;
    background-color: red;
}*/




.header-img{
	max-height: 100%;
	width: auto;
}

/*header tag*/
/*header tag*/







.site-title{
	font-size: 20px;
}






/*----------------Navigation tag----------------*/
/*Navigation tag*/


nav{
	display: flex;
/*    justify-content: center;*/
    justify-content: flex-start;
    align-items: center;
    padding: .5em 0;
    width: 100%;
    font-family: "Merriweather Sans", Verdana, sans-serif;
    text-transform: uppercase;
    color: #eee;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 10;
}


ul{
	display: flex;
	justify-content: flex-start;
	list-style-type: none;
}

li{
	padding-right: 12px;
	font-size: 12px;
}

a{
	color: inherit;
	text-decoration: none;
}

.nav-hover-highlight:hover{
	color: turquoise;
/*	turquoise*/
}

.hamburger{
	visibility: hidden;
	display: none;
	font-size: 24px;
	user-select: none;
}

.sidenav{
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 60px;
}

.sidenav a{
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.sidenav a:hover{
	color: #f1f1f1;
}

.sidenav .closebtn{
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}


/*-------------Navigation tag-----------------*/









/*----------------Main tag----------------*/



main{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 960px;
}

article{
	width: 50%;
	flex: 1 1 320px;
	padding: 2%;
	background-color: white;
}

span:hover{
    color:#F09440;
}

/*---------------------This was the old code for hovertext---------------------*/
/*.hovertext{
	position: relative;
	border-bottom: 1px dotted black;
}*/

/*.hovertext:hover{
	font-weight: normal;
}*/




/*.hovertext:before{
	content: attr(data-hover);
	visibility: hidden;
	opacity: 0;
	width: 700px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px 5px;
	transition: opacity 1s ease-in-out;


	position: absolute;
	z-index: 1;
	left: 0%;
	top: 110%;
}

.hovertext:hover:before{
	opacity: 1;
	visibility: visible;
	font-weight: normal;
	border: solid #F09440;
}*/
/*---------------------This was the old code for hovertext---------------------*/



/*this used to called key-doctrine-verses*/
.tooltip{
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	color: rgb(151, 101, 48);
/*	color: rgb(67, 106, 51);*/
/*	color: rgb(152, 88, 21);*/
/*	color: rgb(186, 126, 64);*/
/*	color: rgb(147, 56, 56);*/
/*	color: rgb(182, 124, 63);*/
}


.tooltip .tooltip-text{
	visibility: hidden;
	display: flex;
	width: 500%;
	background: #333;
	color: #fff;
	border-radius: 6px;
	padding: 5px 5px;
	border: solid #F09440;
	text-align: center;
	font-weight: normal;

	position: absolute;
	z-index: 1;
	left: 0%;
	top: 110%;
}


/*.tooltip:hover .tooltip-text{*/
/*	visibility: visible;*/
/*}*/

.tooltip:hover{
	color: #F09440;
}




/*---------------mathew 24 tooltip--------------*/
.tooltip{

	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	color: rgb(151, 101, 48);

}


.mat-24{
	visibility: hidden;
	display: flex;
	width: 700%;
	background: #333;
	color: #fff;
	border-radius: 6px;
	padding: 5px 5px;
	border: solid #F09440;
	text-align: center;
	font-weight: normal;

	position: absolute;
	z-index: 1;
	left: 0%;
/*	top: 110%;*/
}

/*.tooltip:hover .mat-24{*/
/*	visibility: visible;*/
/*	color: white;*/
/*}*/

/*.tooltip:hover{
	color: #F09440;
}*/
/*---------------mathew 24 tooltip--------------*/





/*---------------John 1 tooltip--------------*/
.john-1{
	visibility: hidden;
	display: flex;
	width: 700%;
	background: #333;
	color: #fff;
	border-radius: 6px;
	padding: 5px 5px;
	border: solid #F09440;
	text-align: center;
	font-weight: normal;

	position: absolute;
	z-index: 1;
	left: 0%;
/*	top: 110%;*/
}

/*.tooltip:hover .john-1{*/
/*	visibility: visible;*/
/*	color: white;*/
/*}*/

/*.tooltip:hover{
	color: #F09440;
}*/
/*---------------John 1 tooltip--------------*/

h2{
	font-size: 24px;
}

h3{
	margin-bottom: 16px;
	color: #666;
	font-size: 20px;
	font-style: italic;
}

.key-doctrine-verses{
	color: rgb(151, 101, 48);
/*	color: rgb(67, 106, 51);*/
/*	color: rgb(152, 88, 21);*/
/*	color: rgb(186, 126, 64);*/
/*	color: rgb(147, 56, 56);*/
/*	color: rgb(182, 124, 63);*/
}



/*This will organize the Pastors-list*/
.Pastors-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	flex-grow: 1;
	max-width: 960px;
	font-family: Optima, Calibri, sans-serif;
}

.caption{
	display: block;
}

.pastor-border{
	vertical-align: top;
	width: 120px;
	display: inline-block;
	text-align: center;
}

.Pastors-list .pastor-border a:hover .Pastor-circle-Style{
	transform: scale(1.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.Pastors-list .pastor-border a:hover .caption{
	transform: scale(1.5);
	background-color: #333;
	border-radius: 25px;
	/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.article-div{
	font-family: Arial, sans-serif;
}

/*figcaption can also be changed to .caption since it has a class*/
figcaption{
	font-weight: bold;
	font-style: italic;
}

.Pastor-circle-Style{
	border-radius: 50%;
}






/*this will organize the channel for list,border, circle-style*/
/*this will organize the channel for list,border, circle-style*/
.channel-h-tag{
	text-align: center;
	margin-bottom: 16px;
	color: #666;
	background-color: rgb(252, 186, 3);
	font-size: 20px;
	font-style: italic;
	border-radius: 5px 5px 5px 5px;
}

.channel-verses{
	margin-bottom: 20px;
}

.Channel-Title-2{
	margin-top: 20px;
}

.channel-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	flex-grow: 1;
	max-width: 960px;
	font-family: Optima, Calibri, sans-serif;
}

.channel-border{
	vertical-align: top;
	width: 120px;
	display: inline-block;
	text-align: center;
}
.channel-circle-style{
	border-radius: 50%;
}

.channel-list .channel-border a:hover .channel-circle-style{
	/*transform: scale(1.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
	border: 5px solid turquoise;
}
/*this will organize the channel for list,border, circle-style*/
/*this will organize the channel for list,border, circle-style*/









/*this will organize the Documentaries for list,border, circle-style*/
/*this will organize the Documentaries for list,border, circle-style*/
.doc-h-tag{
	text-align: center;
	margin-bottom: 16px;
	color: #666;
	background-color: rgb(252, 186, 3);
	font-size: 20px;
	font-style: italic;
	border-radius: 5px 5px 5px 5px;
}

.doc-p-tag{
    text-align: center;
    /*background-color: red;*/
}

.doc-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	flex-grow: 1;
	max-width: 960px;
	font-family: Optima, Calibri, sans-serif;
}

.doc-border{
	vertical-align: top;
/*	width: 120px;*/
	display: inline-block;
	text-align: center;
	margin: auto;
}
.doc-circle-style{
/*	border-radius: 15%;*/
	border-radius: 20px 20px 20px 20px;
}

.doc-list .doc-border a:hover .doc-circle-style{
	/*transform: scale(1.5);*/
	transform: scale(1.2);
	transition: all 300ms;

}


/*this will organize the Documentaries for list,border, circle-style*/
/*this will organize the Documentaries for list,border, circle-style*/









/*aside tag*/
/*aside tag*/
/*sidebar where video and description is located on the right side*/
aside{
/*	width: 25%;*/
    flex: 1 1 150px;
    font-family: "Merriweather Sans", Verdana, sans-serif;
    padding: 2%;
}



/*aside div{
	margin-bottom: 16px;
}
*/


/*.sidebar-left {
    display: none;
    background-color: lightgray;
}*/
/*.sidebar-left div {
    padding-top: 4px;
    font-style: italic;
}*/




.sidebar-right {
    background-color: antiquewhite;
}

iframe {
  max-width: 100%;
/*  height: auto;*/
}
/*aside tag*/
/*aside tag*/

.strong-hold{
	border: solid black;
	border-radius: 10px 10px 10px 10px;
/*	border: solid #996452;*/
    max-width: 100%;
	height: auto;
} 

article .strong-hold:hover{
	border: 5px solid black;
}


article .churches:hover{
/*	rgb(151, 101, 48);*/
	border: 5px solid black;
	overflow: hidden;
	/*transform: scale(1.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
}

.churches{
	/*border-radius: 50%;*/
	/*max-width: 960px*/
	/*width: 100%;*/
	/*height:100%;*/
	border-radius: 10px 10px 10px 10px;
	max-width: 100%;
	height: auto;
}

.church-list{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: flex-start;
	flex-grow: 1;
	max-width: 960px;
}
/*span{
	border: 5px solid #996452;
}*/




/*----------------Main tag----------------*/

















/*----------------footer tag----------------*/


/*Bottom of the page*/
footer{
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 1% 0;
    width: 100%;
    font-family: "Merriweather Sans", Verdana, sans-serif;
    background-color: #333;
    color: #eee;
}
/*----------------footer tag----------------*/











/*----------------Header and Navigation margin-font adjustments----------------*/


@media (min-width: 480px) {
	.site-title{
		font-size: 40px;
	}
	li{
		padding-right: 40px;
		font-size: 16px;
	}
	h2{
		font-size: 32px;
	}
	header,nav{
		justify-content: center;
		padding-left: 0;
	}
}

@media (max-width: 1270px){
    
    
	.tooltip .tooltip-text{
		width: 200%;
	}

	.tooltip .mat-24{
		width: 200%;
		bottom: 110%;
	}

	.john-1{
		width: 200%;
		left: -70%;
	}
	
	
@media (max-width: 550px){
    
    .hamburger{
		visibility: visible;
		display: block;
	}

	ul{
		display: none;
/*		flex-direction: column;*/
/*		text-align: center;*/
	}

	nav ul:hover{
		display: block;
	}

	.sidenav{padding-top:15px;}
	.sidenav a{font-size: 18px}
    
}






/*.hovertext:hover{
	font-weight: normal;
}*/

	/*.hovertext:before{*/
	/*	content: attr(data-hover);*/
	/*	visibility: hidden;*/
	/*	opacity: 0;*/
	/*	width: 250px;*/
	/*	background-color: #333;*/
	/*	color: #fff;*/
	/*	text-align: center;*/
	/*	border-radius: 5px;*/
	/*	padding: 5px 0;*/
	/*	transition: opacity 1s ease-in-out;*/

	/*	position: absolute;*/
	/*	z-index: 1;*/
	/*	left: 0%;*/
	/*	top: 110%;*/
	/*}*/

	/*.hovertext:hover:before{*/
	/*	opacity: 1;*/
	/*	visibility: visible;*/
	/*	font-weight: normal;*/
	/*}*/

}



/*@media (max-width: 550px){*/
/*    ul{*/
/*        flex-direction: column;*/
/*		text-align: center;  */
/*    }*/
/*}*/




/*----------------Header and Navigation margin-font adjustments----------------*/














/*----------------table in the article tag----------------*/

table,th,td{
	border: 1px solid black;
}

/*.Pastors-list{
	padding: 0px;
}*/

th{
	background-color: #eee;
}

tr:nth-of-type(odd){
	background: #eee;
}


td, th{
	padding: 6px;
}








th{
	font-size: 13px;
	font-weight: normal
	padding: 3px 8px;
	background: darkgray;
	border-top: 4px solid rgb(110, 109, 109);
	border-bottom: 1px solid #fff;
	color: black;
	text-transform: uppercase;
}
/*original style code*/
/*th{
	font-size: 13px;
	font-weight: normal
	padding: 3px 8px;
	background:#b9c9fe;
	border-top: 4px solid #aabcfe;
	border-bottom: 1px solid #fff;
	color: #039;
	text-transform: uppercase;
}*/








td{
	background: rgb(252, 229, 205);
	border-bottom: 1px solid #fff;
	border-top: 1px solid transparent;
/*	font-family: Arial, sans-serif;*/

}
/*original style code*/
/*td{
	background: #e8edff;
	border-bottom: 1px solid #fff;
	border-top: 1px solid transparent;
	font-family: --this line was commented out-- Arial, sans-serif;

}
*/





/*original style code*/
/*tr:hover td{
	background: #d0dafd;
}*/
tr:hover td{
	background: rgb(211, 199, 186)
}


/*----------------table in the article tag----------------*/















/*------------------------------------------------------NOTES------------------------------------------------------------------------*/


/*this will make background image red*/
/*img{
	background-color: red;
}*/



/*https://webdesignplayground.io/lessons/14-1-2*/

/*https://webdesignplayground.io/lessons/14-3-2/ -- use this example to fix the layout of the page*/


/*clipart*/
/*https://www.google.com/search?q=bible+clipart&ei=DvFDZIjVOdKCwbkP79W-2A8&oq=bible&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAxgAMgcIABCKBRBDMgsIABCKBRCRAhCLAzILCAAQgAQQsQMQgwEyBwgAEIoFEEMyDQguEIoFELEDENQCEEMyBwgAEIoFEEMyBwgAEIoFEEMyCAgAEIAEELEDMgcIABCKBRBDMgUIABCABDoKCAAQRxDWBBCwAzoRCAAQigUQkQIQiwMQpgMQqAM6CwguEIMBELEDEIoFOhEILhCABBCxAxCDARDHARDRAzoOCC4QgAQQsQMQxwEQ0QM6EQgAEIAEELEDEIsDEKYDEKgDOg4IABCABBCxAxCDARCLAzoUCC4QigUQsQMQgwEQiwMQpAMQqAM6FwguEIoFELEDEIMBEIsDENIDEJsDEKgDOhoILhCABBCxAxCDARDHARDRAxCLAxDSAxCoAzoQCAAQigUQQxCLAxCoAxCmAzoKCAAQigUQQxCLAzoMCAAQigUQChBDEIsDOgsILhCABBCxAxDUAkoECEEYAFClClilDWDmFmgDcAF4AIABX4gBwwOSAQE1mAEAoAEByAEIuAEDwAEB&sclient=gws-wiz-serp#imgrc=eYif1lnRBQy7gM*/