@font-face {
	font-family: "Raleway Light Italic";
	src: url(../fonts/Raleway-LightItalic.ttf) format("truetype");
}

@font-face {
	font-family: "Raleway Italic";
	src: url(../fonts/Raleway-Italic.ttf) format("truetype");
}

@font-face {
	font-family: "Raleway SemiBold Italic";
	src: url(../fonts/Raleway-SemiBoldItalic.ttf) format("truetype");
}


@font-face {
    font-family: Merriweather-Regular;
    font-weight: normal;
    font-style: normal;
    src: url("../fonts//Merriweather-Regular.ttf") format("truetype");
}


.worshiptitle {
	width: 500px;
	margin: auto;
}

#headerspace {
	height: 280px;
	color: white;
	font-size: 50pt;
	padding-top: 75px;
	width: 100%;
	background-color: #012B3D;
		font-family: "Raleway Black", Candara, Franklin Gothic Medium, Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;
	text-transform: none;
	text-shadow: none;
	}

#headerspacetext {
	width: 100%;
	height: 310px;
	position: fixed;
	top: 0px;
	padding: 50px 0 0 0;
	overflow: hidden;
	margin: auto;
  background: #012B3D;
	text-align: center;
	}

.headerspacedetails {
	font-size: 20pt;
	display: inline-block;
	line-height: normal;
	text-shadow: none;
	color: white;
	font-family: "Raleway";
}

.headerspacedetails a {
	color: #67B2C7;
	font-size: 12pt;
}


#pagecontent {
	text-align: center;
}

.sectiondetails {
	font-size: 15pt;
	font-family: "Raleway";
}



.hymn {
  font-family: "Raleway SemiBold";	
}

.smallinfo {
	font-size: 10pt;
}

.section {
	font-size: 17pt;
	line-height: normal;
	text-transform: none;
	font-family: "Raleway Extra Bold";
}



.interiorlinks {
	color: #67B2C7;
	font-size: 26pt;
	font-family: "Raleway Extra Bold";
}

.left {
	text-align: left;
}

.confessionofsin {
	text-align: left;
	font-family: "Raleway SemiBold";
}

.confessionoffaith {
	text-align: left;
	font-family: "Raleway SemiBold";
}


.bonusinfo {
	background: #f4f4f4;
	padding: 15px;
	border-radius: 10px;
	border: 3px solid #013D57;
	text-align: left;
}


.sermonoutline {
	background: #f4f4f4;
	padding: 15px;
	border-radius: 10px;
	border: 3px solid #013D57;
	text-align: left;
	font-size: 90%;
}
.sermonoutline li {
	list-style-position: inside;
	padding-bottom: 8px;
	list-style: none;
}


.worshipicon {
	width: 120px;
	display: block;
	margin: 0 auto;
}

@media only screen and (min-width: 550px) and (max-width: 840px) {

	#headerspace {
		font-size: 38pt;
		background-size: 90% auto;
		text-shadow: none;
		padding-top: 50px;
		}
	
	#headerspacetext {
		padding-top: 50px;
		position: absolute;
	}
	
	.headerspacedetails {
		font-size: 18pt;
		color: white;
	}
	
	#page {
		padding-top: 40px;
	}
	
	.sectiondetails {
	font-size: 14pt;
}

.smallinfo {
	font-size: 10pt;
}

.section {
	font-size: 15pt;
	line-height: normal;
}
	




.interiorlinks {
	color: #67B2C7;
	font-size: 24pt;
}
}



#page {
		z-index: 6;
	position: relative;
}


.copyright {
    font-size: 9pt;
	display: inline-block;
	line-height: 11pt;
}



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


	#headerspace {
		font-size: 30pt;
		height: 250px;
		background-size: 90% auto;
		text-shadow: 2px 4px 0px #013D57;
		padding-top: 30px;
		}
	
	#headerspacetext {
		padding-top: 50px;
		position: absolute;
	}
	
	.headerspacedetails {
		font-size: 15pt;
		text-shadow: none;
	}
	
	.headerspacedetails a {
		font-size: 11pt;
	}
	
	#page {
		padding-top: 30px;
	}
	
	.sectiondetails {
	font-size: 13pt;
}

.smallinfo {
	font-size: 10pt;
}

.section {
	font-size: 14pt;
	line-height: normal;
}


.worshiptitle {
	width: 90%;
}

.interiorlinks {
	color: #67B2C7;
	font-size: 22pt;
	text-align: center;
}

}





.response { 
    margin-left: 14px;
    font-family: "Raleway Bold";
    
}



@media screen and (min-width: 741px) {
	#pagecontent {
		width: 100%;
		margin: auto;
	}

		#pagecontainer {

	padding: 0;
		margin: 0 auto;
	height: auto;
			text-align: center;
	}
	
	
	.left {
		text-align: center;
	}
	
	.response {
	    margin-left: 10px;
	}
	
	.bonusinfo {
text-align: center;
}
	
	.sermonoutline {
		text-align: ;
	}
	
	.confessionofsin {
		text-align: justify;
	}
	
	
	
}

a.esv-crossref-link {
  color: #F2BB4B !important;
 
}



.left {
    line-height: 1.4;
}

.hymn {
      line-height: 1.4;  
}

.confessionofsin {
    line-height: 1.4;
}

.confessionoffaith {
    line-height: 1.4;
}

.nurseryinformation {
    line-height: 1.4;
}



.sermonpreview {
	background: transparent;
	padding: 15px 0 0 0;
	text-align: right;
}




#pagecontent {
	overflow: hidden;
}






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

.currentseries {
	font-size: 20px;
	text-transform: uppercase;
	color: #F2BB4B;
	font-weight: bold;
	font-family: "Raleway Black", Candara, Franklin Gothic Medium, Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;

}

.seriesheaders {
	font-size: 23px;
	text-transform: uppercase;
	color: #F2BB4B;
	font-weight: bold;
	font-family: "Raleway Black", Candara, Franklin Gothic Medium, Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;

}


.seriestitle {
	font-size: 23px;
}

.seriesdetails {
	font-size: 17px;
}

.seriescovers{
	float: left;
	margin: 0px 20px 15px 0px;
	box-shadow: 3px 3px 4px grey;
	height: 220px;
	width: 220px;
}


.previewbar {

	padding-top: 15px;
	padding-bottom: 5px;
	height: 235px;
	text-align: left;
	background-color: transparent;
	transition: 0.5s;
}

.previewbar:hover {
	padding-left: 10px;
	background-color: rgba(142, 176, 175, 0);
	cursor: pointer;
	transition: 0.5s;

}


.panel {
	padding: 10px 0px 0px 20px;
	margin: 10px 0px 20px 20px;
	background-color: #EEF2F2;
	display: none;
	height: auto;
	position: relative;
	border: 1px solid #eee;
}

.panel.default {
	display: block;
}


.panel:after, .panel:before {
	bottom: 100%;
	left: 70px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.panel:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #EEF2F2;
	border-width: 22px;
	margin-left: -22px;
}
.panel:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: transparent;
	border-width: 24px;
	margin-left: -24px;
}

}

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


.currentseries {
	font-size: 15px;
	text-transform: uppercase;
	color: #F2BB4B;
	font-weight: bold;
	font-family: "Raleway Black", Candara, Franklin Gothic Medium, Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;

}

.seriesheaders {
	font-size: 15px;
	text-transform: uppercase;
	color: #F2BB4B;
	font-weight: bold;
	font-family: "Raleway Black", Candara, Franklin Gothic Medium, Franklin Gothic,ITC Franklin Gothic,Arial,sans-serif;

}


.seriestitle {
	font-size: 15px;
	font-weight: bold;
}

.seriesdetails {
	font-size: 13px;
}

.seriescovers{
	float: left;
	margin: 0px 20px 15px 0px;
	box-shadow: 3px 3px 4px grey;
	height: 110px;
	width: 110px;
}


.previewbar {

	padding-top: 15px;
	padding-bottom: 5px;
	height: 132px;
	text-align: left;
	background-color: transparent;
	transition: 0.5s;
}

.previewbar:hover {
	background-color: transparent;
	transition: 0.5s;

}


.panel {
	padding: 10px 10px 0px 10px;
	margin: 0px 0px 20px 0px;
	background-color: #EEF2F2;
	display: none;
	height: auto;
	position: relative;
}

.panel.default {
	display: block;
	}


.panel:after, .panel:before {
	bottom: 100%;
	left: 55px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.panel:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #EEF2F2;
	border-width: 20px;
	margin-left: -20px;
}
.panel:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: transparent;
	border-width: 20px;
	margin-left: -20px;
}


}


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

	.seriestitle {
	font-size: 17px;
}

.seriescovers{
	display: none;
}

.previewbar {
	padding-top: 15px;
	padding-bottom: 5px;
	height: 80px;
	text-align: left;
	background-color: transparent;
	transition: 0.5s;
}

}





.mediabutton {
	background-color: #F2BB4B;
	padding: 8px 14px;
	display: inline-block;
	margin: 0 0 10px 0;
	font-size: 16px;
	border-radius: 2px;
}

.mediabutton:hover {
	background-color: #67B2C7;
}

.mediabutton a{
	color: white;
}

@media screen and (max-width: 630px) {
	.mediabutton {
		font-size: 14px;
	}

}


a.esv-crossref-link {
  color: #013D57 !important;
  font-family: "Raleway";
 
}

.seriescoverlarge {
    width: 100%;
    margin: 50px 0 20px 0;
    box-shadow: 5px 5px 5px grey;
}


.line {
    width: 80%;
    border-bottom: 1px solid #EEF2F2;
    margin: auto;
    padding: 10px 0;
}

.sermonseriesh1 {
	font-family: Merriweather-Regular;
	font-size: 18pt;
}

.sermonseriesh2 {
	font-family: Raleway Bold;
	text-transform: uppercase;
	letter-spacing: .5px;
		opacity: .6;
}

.sermonseriesh3 {
	opacity: .8;
}

.sermonsbox {
	width: calc(100% - 60px);
	padding: 50px 30px;
	background-color: #f7f2e9;
}

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

	
	#pagecontainer {
		width: 92%;
	}
}

#topcontainer {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0 40px;
}


.seriescoverbox {
	width: 40%;
}

.seriesdetailsbox {
	width: 60%;
	text-align: left;
		line-height: 1.3;
}



@media screen and (max-width: 630px) {
	#topcontainer {
	width: 100%;
	display: flex;
	align-items: center;
		flex-wrap: wrap;
	gap: 0;
}


.seriescoverbox {
	width: 80%;
	margin: auto;
}

.seriesdetailsbox {
	width: 80%;
	text-align: center;
	margin: auto;
	padding-bottom: 40px;
	line-height: 1.3;
}
}

.toplinks {
	text-align: left;
	padding-top: 50px;
	opacity: .7;
}




.more {display: none;}


.readmorebutton {
  border: none;
  color: #013D57;
  text-align: center;
  text-decoration: none;
		background-color: #fff;
	padding: 0 0 20px 0;
	display: block;
	font-size: 14px;
	border-radius: 2px;
	font-family: Raleway Bold;
	text-transform: uppercase;
	
}

@media screen and (max-width: 630px) {
.readmorebutton {
	font-size: 10pt;
	margin: auto;

    }

}

	.sermondetails {
		font-size: 11pt;
	}

	.date {
		color: #013D57;
		padding: 0;
		font-size: 10pt;
		font-family: Raleway SemiBold;
		opacity: 0.8;
	}

.sermontitle {
	font-family: "Merriweather-Regular", Georgia, Serif;
	opacity: .8;
	font-size: 14.5pt;
}






#line-sermons {
	border-bottom: 2px dotted black;
	opacity: .1;
	width: 80%;
	padding-top: 40px;
	margin: auto;
}








.socialicon {
	width: 25px;
	height: auto;
	margin: 8px 2px 40px 2px;
	opacity: .7;
}

.socialicon:hover {
opacity: 1;
}


.more {display: none;}


.readmorebutton {
  border: none;
  color: #013D57;
  text-align: center;
  text-decoration: none;
		background-color: transparent;
	padding: 0 0 20px 0;
	display: block;
	font-size: 14px;
	border-radius: 2px;
	font-family: Raleway Bold;
	text-transform: uppercase;
	margin: auto;
}

@media screen and (max-width: 630px) {
.readmorebutton {
	font-size: 10pt;
	margin: auto;

	
    }
	}
	

.recentsermonbox {
	width: 80%;
	margin: auto;
}

@media screen and (max-width: 630px) {
	.recentsermonbox {
	width: 93%;
}
}