/* 

///////////////////////////////////
///////////////////////////////////

	USAGE NOTES

	Initial: feb 10, 2021 3:56 pm;
	Last update: feb 28, 2021 4:17 pm;

///////////////////////////////////
///////////////////////////////////

*/



/* 

///////////////////////////////////
///////////////////////////////////

		BASE STYLES

///////////////////////////////////
///////////////////////////////////

*/


html {

	width: 100%;
	background: #000;

}

* {

  box-sizing: border-box;

}

*::before, *::after {

  box-sizing: border-box;

}

body {

	width: 100%;
	margin: 0 auto;
	padding: 0;
	color: #fff;
	--oran: #e5801d;
	--gray: #efefef;
	--gry2: #f5f6f3;
	--gry3: #444444;
	--tan1: #f7f5f3;
	--tan2: #f0ebe8;
	--blue: #005e82;
	--red1: #be1e2d;
	--teal: #83a2a3;
	--gren: #aab300;
	--brwn: #513c40;
	--blk1: #0e1111;
	--blk2: #000000;
	--wht1: #ffffff;
	background: #000;
	font-size: 16px;
	text-rendering: optimizeLegibility;

}

main {

	min-height: 100vh;
	background: #000;
	position: relative;
	z-index: 1;

}

#main-container {

	margin: 0 auto;
	width: 100%;
	border-bottom: 1px solid var(--gry3);

}


/* 

///////////////////////////////////
///////////////////////////////////

		HEADER

///////////////////////////////////
///////////////////////////////////

*/


header {

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	width: 100%;
	grid-gap: 4px;
	margin: 0;
	padding: 0;
	position: absolute;
	height: 116px;
	top: 0px;
	z-index: 2;
	background: rgba(255,255,255,0);
	transition-property: background;
	transition-duration: 200ms;
	box-shadow: 0 0 4px rgba(0,0,0,0.3);

}

header:hover {

	background: rgba(255,255,255,1);

}

header #right {

	grid-column-start: 9;
	grid-column-end: 13;
	align-self: center;

}

header #left {

	grid-column-start: 3;
	grid-column-end: 5;
	align-self: center;

}

header #left .horizontal { 

	height: 66px; 
	width: auto; 

}


/* MINI Form */

header #right .cta {

	border: 2px solid white;
	border-radius: 4px;
	background: rgba(255,255,255,0);
	text-decoration: none;
	color: white;
	padding: 12px 16px;
	width: 112px;

}


header #right .cta.header-shown {

	color: var(--oran);
	border: 2px solid var(--oran);
	background: white;

}

header #right .cta:hover, header #right .cta.header-shown:hover {

	background: var(--oran);
	color: white;
	border: 2px solid var(--oran);

}

#right .temp { 

	border: 2px solid #fff; 
	background: rgba(255,255,255,0);
	border-radius: 4px;
	padding: 12px;

}

#right .temp.header-shown { 
 
	border: 2px solid var(--oran); 
	background: rgba(255,255,255,1);
	color: #444;

}

#right form {

	width: 320px;

}

#right form div {

	position: relative;
	overflow: hidden;

}

#right form input {

	width: 200px;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
	outline: 0;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B";

}

#right form input:valid {

	background: rgba(255,255,255,0);

}

#right form input:focus {

	border-color: var(--oran);
	border-radius: 5px;

}

#right form input:focus + label {

  background: white;
  color: #444;
  font-size: 60%;
  padding: 0 6px;
  z-index: 2;
  text-transform: uppercase;

}


#right form label {
	
	top: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B";
	position: absolute;
	padding: 14px 16px 12px 12px;
	transition: 

		background 200ms,
		color 200ms,
		top 200ms,
		bottom 200ms,
		right 200ms,
		left 200ms;

}

.label-shim.header-shown {

	color: #444 !important;

}

#right form input:focus + label {

	bottom: 100%;
	margin-top: 3px;

}


/* 

///////////////////////////////////
///////////////////////////////////

		FOOTER

///////////////////////////////////
///////////////////////////////////

*/

footer {

	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 48px 0 24px 0;
	background: #111;
	/* border-top: 1px solid #ccc; */

}

#foot {

	width: 100%;
	background: #111;
	color: white;

}

#foot p {

	font-family: "Sentinel SSm A", "Sentinel SSm B";
	font-style: normal;
	font-weight: 500;
	font-size: small;
	text-align: center;
	line-height: 200%;

}

#foot a { 

	color: white;
	font-weight: 800; 

}

.foot-menu {

	display: flex;
	width: 33.33%;
	margin: 0 auto;
	padding: 0;
	flex-wrap: nowrap;
	justify-content: space-evenly;

}

.foot-item {

	list-style-type: none;
	line-height: normal !important;
	font-weight: 800;
	min-width: 160px;
	font-size: large;
	text-align: right;

}

.foot-item .about {

	width: 66.67%;

}

.foot-item a {

	position: relative;
	display: inline-block;
	color: white;
	font-weight: 800;
	text-decoration: none;
	overflow: hidden;

}

.foot-item a span {

  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  font-weight: 800;
  transform: translateX(-100%);
  transition: transform 275ms ease;

}

.foot-item a span::before {

  display: inline-block;
  content: attr(data-content);
  color: var(--oran);
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: none;

}

.foot-item a:hover span {

  transform: translateX(0);

}

.foot-item a:hover span::before {

  transform: translateX(0);

}

.address, .address a {

	color: white;
	font-size: large;
	text-decoration: none;

}


.address .ph {

	color: white;
	line-height: inherit;
	display: inline;
	font-size: small;
	font-weight: 500 !important;

}

#foot .expanded {

	font-size: small;
	font-weight: 500;
	font-style: italic;
	display: block;
	margin-top: 32px;

}

#foot .about {

	margin: 0 auto;

}

#foot-separator-social {

	display: flex;
	width: 240px;
	margin: auto;
	justify-content: space-between;

}

svg.tw svg.fb, svg.ig {

	border-bottom: 0;

}

svg.tw:hover, svg.fb:hover, svg.ig:hover {

	border-bottom: 4px solid #111;

}

svg.tw path, svg.fb path, svg.ig path, svg.ig circle {

	fill: white;
	transition-property: fill;
	transition-duration: 200ms;

}	

svg.tw:hover path, svg.fb:hover path, svg.ig:hover path, svg.ig:hover circle {

	fill: var(--oran);

}


/*  

///////////////////////////////////
///////////////////////////////////

		TITLE AREA

///////////////////////////////////
///////////////////////////////////

*/

#cover {

	contain: content;
    content-visibility: auto;
    contain-intrinsic-size: 820px;

}

.item {

    content-visibility: auto;

}

.webp #cover {
	  
	  height: 88vh;
	  background-image: url("../images/worship.webp");
	  background-position: center;
	  background-repeat: no-repeat;
	  /* background-size: cover; */
	  background-color: #000;

}

.no-webp #cover {
	  
	  height: 88vh;
	  background-image: url("../images/worship.png");
	  background-position: center;
	  background-repeat: no-repeat;
	  /* background-size: cover; */
	  background-color: #000;	  

}

.title {

	position: relative;
	top: 33.33%;
	color: white;
	text-align: left;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 4px;

}

.series-title {

	grid-column: 3 / 7;

}

.series-title p {

	text-shadow: 0px 1px rgb(0,0,0);

}

.series-title .description {

	padding-right: 24px;

}

.series-title .verse {

	margin-top: 40px;
	font-size: small;
	font-style: italic;

}

.series-title h1 { 

	color: white;
	font-family: "Ringside Wide SSm A", "Ringside Wide SSm B";
	font-weight: 600;
	font-size: 300%;
	width: 100%;
	/* max-width: 452px; */
	margin: 0;
	animation: 250ms 250ms fade1 backwards linear;
    animation-name: fade1;
    animation-duration: 250ms;
    animation-timing-function: linear;
    animation-delay: 250ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: backwards;
    animation-play-state: running;
	text-shadow: 
		0 1px 1px rgba(0,0,0,0.8), 
      	0 2px 2px rgba(0,0,0,0.6), 
      	0 4px 4px rgba(0,0,0,0.4),
      	0 8px 8px rgba(0,0,0,0.2)

}

.feat-video {

	height: 380px;
	width: 560px;
	grid-column: 7 / 13;
	padding-top: 1em;
	margin-left: 3rem;

}

.feat-video .video-wrapper {

	position: relative;
  	padding-bottom: 56.25%; /* for 16:9 aspect ratio */
  	height: 0;

}

.feat-video .video-wrapper iframe {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

}

.button-slide-right {

	background: rgba(255,255,255,0);
	color: #fff;
	border: 2px solid var(--oran);
	border-radius: 4px;
	padding: 12px;
	cursor: pointer;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B";
	text-shadow: 0px 1px rgb(0,0,0);
	box-shadow: inset 0 0 0 0 var(--oran);
	  -webkit-transition: ease-out 0.4s;
	  -moz-transition: ease-out 0.4s;
	  transition: ease-out 0.4s;

}

.button-slide-right:hover {

	box-shadow: inset 400px 0 0 0 var(--oran);
	color: #fff;

}

.button-slide-right a {

	color: white;
	text-decoration: none;

}

#outer {

	width: 224px;
	text-align: center;
	font-weight: 600;

}

.button-group {

	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	grid-gap: 8px;

}

.secondary-button {

	line-height: 100%;
	font-size: 105%;

}

.secondary-button a {

	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B";
	position: relative;
	display: inline-block;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: all;
	transition-duration: 250ms;
	text-shadow: 0px 1px rgb(0,0,0);

}

.secondary-button a:hover {

	color: var(--oran);
	text-shadow: none;	

}

@keyframes fade1 {

	0% {

    	opacity: 0;

    }

    50% {

    	opacity: 25%;

    }
 
}

@keyframes fade2 {

	0% {

    	opacity: 0;

    }

    50% {

    	opacity: 25%;

    }
 
}


/* 

///////////////////////////////////
///////////////////////////////////

		BODY LAYOUT  

///////////////////////////////////
///////////////////////////////////

*/

.item.zero {

	width: 60vw;
	margin: 0 auto;

}

section.last {

	border-bottom: 4px solid #000;

}


/* 

///////////////////////////////////
///////////////////////////////////

		BODY TEXT  

///////////////////////////////////
///////////////////////////////////

*/


h1 {

	font-family: "Ringside Wide SSm A", "Ringside Wide SSm B";
	font-style: normal;
	font-weight: 700;
	font-size: 400%;

}

h2 {

	font-family: "Ringside Wide SSm A", "Ringside Wide SSm B";
	font-style: normal;
	font-weight: 800;
	font-size: 300%;
	text-align: center;
	color: white;

}

h2.white {

	color: white;

}


.five-hundred {

	font-weight: 500;

}

.six-hundred {

	font-weight: 600;

}

.seven-hundred {

	font-weight: 700;
	
}

a.black {

	text-decoration: underline;
	text-underline-offset: 0.33em;
	font-weight: 500;
	color: black;

}

a.white {

	text-decoration: underline;
	text-underline-offset: 0.33em;
	font-weight: 600;
	color: white;
	text-decoration-thickness: 2px;
	transition-property: all;
	transition-duration: 200ms;

}

a.white:hover {

	color: var(--oran);
	text-decoration-thickness: 4px;

}

p {

	font-family: "Sentinel SSm A", "Sentinel SSm B";
	font-style: normal;
	font-weight: 400;
	font-size: medium;
	line-height: 150%;

}

.item p {

	line-height: 175%;

}

li {

	font-family: "Sentinel SSm A", "Sentinel SSm B";
	font-style: normal;
	font-weight: 400;
	font-size: medium;
	line-height: 125%;
	margin-bottom: 1em;

}

.pickup-notes {

	font-weight: 700;

}


/*

///////////////////////////////////
///////////////////////////////////

			GRAPHICS 

///////////////////////////////////
///////////////////////////////////

*/


.sermon-dates {

	display: flex;
	width: 100%;
	justify-content: space-evenly;
	align-items: center;

}

.sermon-dates > div {

	height: 284px;
	width: 250px;
	text-align: center;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", helvetica, arial, sans-serif;

}

.sermon-dates img {

	border-radius: 0.5rem;
	max-width: 100%;
	height: auto;
	margin-bottom: 16px;

}

.sermon-dates .small-date {

	font-size: 80%;

}

.watch-wrapper {

	position: fixed;
	top: 95%;
	left: 50%;
	transform: translate(-50%, -95%);

}

.watch-wrapper a {

	display: block;
	width: 180px;
	text-decoration: none;
	color: white;
	text-shadow: 0px 1px rgb(0,0,0);
	text-align: center;
	position: relative;
	transition: all .25s;
	padding: 10px 5px;
	border: 2px solid var(--oran);
	border-radius: 6px;		

}

.watch-wrapper a span {

	position: relative;
	z-index: 2;

}

.watch-wrapper a:after {

	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 0;
	height: 101%;
	background: var(--oran);
	transition: all .25s;

}

.watch-wrapper a:hover{

	color: #fff;

}

.watch-wrapper a:hover:after{

	width: 100%;

}



/*

///////////////////////////////////
///////////////////////////////////

		MISCELLANEOUS 

///////////////////////////////////
///////////////////////////////////

*/


.margin-top-5 {

	margin-top: 40px;

}

.margin-bot-5 {

	margin-bottom: 40px;

}

.margin-top-4 {

	margin-top: 32px;

}

.margin-bot-4 {

	margin-bottom: 32px !important;

}

.margin-top-3 {

	margin-top: 24px;

}

.margin-bot-3 {

	margin-bottom: 24px;

}

.margin-top-2 {

	margin-top: 16px;

}

.margin-bot-2 {

	margin-bottom: 16px;

}

.margin-top-1 {

	margin-top: 8px;

}

.margin-bot-1 {

	margin-bottom: 8px;

}

.embiggen {

	font-size: x-large;

}


/*

///////////////////////////////////
///////////////////////////////////

		TEMP 

///////////////////////////////////
///////////////////////////////////

*/


.video-container { 

	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 

} 

.video-container iframe, .video-container object, .video-container embed { 

	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 

}

.temp-photo {

  position: relative;
  width: 100%;

}

.temp-photo-middle {

  transition: 300ms ease-in;
  opacity: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  text-align: center;

}

.temp-photo:hover .temp-photo-middle {
  opacity: 0.3;
}

.temp-photo:hover .temp-photo-middle {
  opacity: 1;
}

.temp-photo-text {

  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: large;
  padding: 40px 24px;
  font-family: "Inkwell Sans A", "Inkwell Sans B";
  font-weight: 500;
  line-height: 125%;
  font-style: italic;

}

/*

///////////////////////////////////
///////////////////////////////////

		PREACHERS

///////////////////////////////////
///////////////////////////////////

*/


.speaker-area {

	display: flex;
	flex-wrap: nowrap;
	height: 352px;
	justify-content: space-evenly;
	align-items: center;
	/* border-top: 1px solid #ccc; */
	/* border-bottom: 1px solid #ccc; */

}

.speaker {

	width: 14.1%;
	height: 340px;
	margin-top: 0;
	text-align: center;
	background: #000;
	cursor: pointer;
	transition-property: margin-top;
	transition-timing-function: ease-in;

}

.webp .speaker.lynch {

	background: url('../images/lynch-600.webp');
	background-size: cover;

}

.no-webp .speaker.lynch {

	background: url('../images/lynch-600.jpg');
	background-size: cover;

}

.webp .speaker.mclaughlin {

	background: url('../images/jameson-600.webp');
	background-size: cover;	

}

.no-webp .speaker.mclaughlin {

	background: url('../images/jameson-600.jpg');
	background-size: cover;

}

.webp .speaker.sanders{

	background: url('../images/sanders-600.webp');
	background-size: cover;

}

.no-webp .speaker.sanders {

	background: url('../images/sanders-600.jpg');
	background-size: cover;	

}

.webp .speaker.young {

	background: url('../images/young-600.webp');
	background-size: cover;

}

.no-webp .speaker.young {

	background: url('../images/young-600.jpg');
	background-size: cover;	

}

.webp .speaker.archer {

	background: url('../images/archer-600.webp');
	background-size: cover;

}

.no-webp .speaker.archer {

	background: url('../images/archer-600.jpg');
	background-size: cover;	

}

.webp .speaker.carter {

	background: url('../images/carter-324.webp');
	background-size: cover;

}

.no-webp .speaker.carter {

	background: url('../images/carter-324.jpg');
	background-size: cover;	

}

.webp .speaker.johnson {

	background: url('../images/johnson-600.webp');
	background-size: cover;

}

.no-webp .speaker.johnson {

	background: url('../images/johnson-600.jpg');
	background-size: cover;	

}

.speaker-bio {

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition-property: opacity;
	transition: 400ms ease-in;
	background-color: rgba(0,0,0,0.8);

}

.speaker-bio:hover {

	opacity: 1;

}

.speaker-bio .text {

	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", helvetica, arial, sans-serif;
	color: white;
	font-size: medium;
	line-height: 133%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;

}

.speaker-bio hr.shim {

	width: 50%;
	color: white;
	margin-top: 1.5em;
	margin-bottom: 0;

}


/*

///////////////////////////////////
///////////////////////////////////

		RESOURCES

///////////////////////////////////
///////////////////////////////////

*/

.resources {

	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	width: 80%;
	margin: 0 auto;
	margin-bottom: 48px !important;
	margin-top: 48px !important;

}

.resources > div {

	width: auto;
	max-width: 224px;
	border-radius: 0.25rem;
	text-align: center;
	filter: saturate(0.7);
	font-family: "Sentinel SSm A", "Sentinel SSm B";
	margin-bottom: 32px;

}

.resources > div:hover {

	filter: saturate(1);

}

.resources a {

	text-decoration: none;

}

.resources img {

	border-radius: 8px;
	margin-bottom: 8px;
	max-width: 100%;
	height: auto;

}

.item.two p {

	text-align: center;

}

.squished {

	margin: 0 auto;
	width: 50%;

}



/*

///////////////////////////////////
///////////////////////////////////

		EMBELLISHMENTS

///////////////////////////////////
///////////////////////////////////

*/


::selection {

	color: #000;
	background-color: #fff;

}


/* 

///////////////////////////////////
///////////////////////////////////

		MEDIA QUERIES

///////////////////////////////////
///////////////////////////////////

*/


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


	.series-title h1 {

		font-size: 240%;
		
	}

	.item.zero {

		margin-top: 3em;

	}

	#outer {

		width: 224px;

	}

}

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


	.series-title {

		grid-column: 2 / 7;
		
	}

	header #left {

		grid-column: 2 / 5;

	}

	header #right {

		grid-column: 9 / 13;

	}

	.speaker {

		background-position-x: center !important;

	}

	.sermon-dates > div {

		height: 268px;
		width: 230px;

	}

	.squished {

		margin: 0 auto;
		width: 75%;

	}

	.feat-video {

		margin-left: 1rem;

	}

}

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


	.feat-video {

		width: 92%;
		height: auto;
		margin-left: 2rem;
		
	}

	.speaker-bio .text {

		font-size: small;

	}

	.foot-item .about {

		width: 80%;

	}

	.item.zero {

		width: 80vw;

	}

}

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


	header #right {

		grid-column: 8 / 13;
		
	}

	.title {

		top: 40%;

	}

}



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


	.sermon-dates > div {

		width: 202px;

	}

	.title {

		top: 33.33%;
		
	}

	.foot-item .about {

		width: 92%;

	}

	input.temp, label.label-shim {

		display: none;

	}

	header #right {

		grid-column: 10 / 13;
		
	}

	header #right .cta {

		width: 180px;

	}

	.squished {

		margin: 0 auto;
		width: 85%;

	}

	.feat-video {

		margin-left: 1rem;
		
	}	

}

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

	header #right {

		grid-column: 9 / 13;
		
	}

	header #right .cta {

		width: 160px;

	}

	#cover {

		height: 100vh;

	}

	.series-title, .feat-video {

		grid-column: 2 / 13;

	}

	.zero {

		margin-top: 4em !important;
		padding-top: 4em;

	}

	.sermon-dates > div {

		height: 248px;
		width: 172px;

	}

}

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


	.sermon-dates > div {

		height: 248px;
		width: 152px;

	}

	.sermon-dates img {

		margin-bottom: 12px;

	}

	.sermon-dates .watch {

		padding: 12px 6px;

	}

}

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

	.sermon-dates {

		flex-wrap: wrap;

	}

	.sermon-dates > div {

		width: 60vw;
		height: 300px;
		margin-bottom: 24px;

	}

	.secondary-button {

		display: none;

	}

	.feat-video {

		margin-left: 0;
		
	}	

}



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


	header #left {

		/* grid-column: 2 / 4; */

	}

	header #right {

		display: none !important;

	}

	.temp-hide-481 {

		display: none;

	}

	.sermon-dates > div {

		width: 70vw;

	}

	.speaker.carter { 

		display: none;

	}

	.speaker {

		width: 16%;

	}

	.speaker-bio .expanded {

		display: none;

	} 

	.zero {

		margin-top: 6em;
		padding-top: 6em;

	}

}


/* 

///////////////////////////////////
///////////////////////////////////

		THE END.

///////////////////////////////////
///////////////////////////////////

*/