/* 

	Website Design and Hosting 2023 by Tony Scialdone of Straight Street Design

	Email: tony@straightstreetdesign.com

*/



@font-face {

  font-display: swap;

	font-family: 'Raleway Regular';

	font-style: normal;

	font-weight: var(--font-normal);

	src:	url('/includes/Raleway-Regular.woff2') format('woff2'),

			url('/includes/Raleway-Regular.woff') format('woff');

}



@font-face {

  font-display: swap;

	font-family: 'Raleway Bold';

	font-style: bold;

	font-weight: var(--font-bold);

	src:	url('/includes/Raleway-Bold.woff2') format('woff2'),

			url('/includes/Raleway-Bold.woff') format('woff');

}





/* CSS RESET */



html, *, *::before, *::after { position: relative; margin: 0; padding: 0; box-sizing: border-box; max-width: 100%; background-clip: padding-box; font: inherit; }

html:focus-within { scroll-behavior: smooth; }



body {

	margin: 0;

	padding: 0;

	background-color: #fff;

	font: normal 16px/1.7 'Raleway Regular', sans-serif;

	color: #333;

	text-rendering: optimizeLegibility;

	content-visibility: auto; /* doesn't render stuff you can't see */

	contain-intrinsic-size: 1000px; 

	scroll-behavior: smooth;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	overflow-x: hidden;

	overflow-y: scroll;

	-webkit-overflow-scrolling: touch; }



.flex { display: flex; }

.fr { flex-direction: row; }

.fc { flex-direction: column; }

.jc { justify-content: center; }

.ja { justify-content: space-around; }

.jb { justify-content: space-between; }

.je { justify-content: flex-end; }

.as { align-items: flex-start; }

.ac { align-items: center; }

.ae { align-items: flex-end; }

.astretch { align-items: stretch; }

.fw { flex-wrap: wrap; }

.fb > div { flex-basis: 0; flex-grow: 1; min-width: 300px; }



h1 {   

	margin: 20px 0 40px;

	font: normal 28px/1 'Raleway Bold', sans-serif; 

}



h1 > div { display: inline-block; }

h1 span { display: block; }

h2 { margin: 40px 0 16px; font-size: 1.5rem; }

h3 { font-size: 1.17rem; }

h4, h5, h6 { font-size: 1.00rem; }



hgroup {

	margin: 0 0 40px;

	width: 100%; 

	font-weight: bold;

	color: #666;

}

hgroup h2 {

	font-size: 1rem; 

	border-bottom: 1px solid; 

}



hgroup p {

	padding: 0 40px;

}



p, dl, ol, ul, address {

	margin-bottom: 16px;

	line-height: 1.7;

}



dd, li { margin: 0 0 4px 32px; }



pre { white-space: pre-wrap; }

hr { border: .5px solid; }

blockquote { quotes: none; }

blockquote:before, blockquote:after { content: none; }



article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

img, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; max-width: 100%; height: auto; }

img { vertical-align: bottom; border-style: none; }



table {

	border-collapse: collapse;

	border-spacing: 0; }



:focus {

	outline: 2px solid red;

	outline-offset: 2px; }



img {

  max-width: 100%;

}

img[width] {

  width: auto; /* Defer to max-width */

}

img[width][height] {

  height: auto; /* Preserve aspect ratio */

}



input,

textarea,

select,

button {

  color: inherit;

  font: inherit;

  letter-spacing: inherit;

}

input,

textarea,

button {

  border: 1px solid gray;

}



/* Home Page */





hr {

	margin: 77px auto; 

	width: 70%;

	line-height: 0;

	height: 0;

	border-top: 1px solid #ddd;

}



.gallery {

	display: flex;

	justify-content: center; 

	flex-wrap: wrap;

	gap: 40px;

	margin: 80px 0 0; 	

}



.gallery img {

	padding: 10px; 

	width: calc(50% - 80px); 

	border-radius: 4px;

	border: 1px solid #ddd; 

}





/* Media Page */



.sermons h2 {

	padding: 10px;

	background-color: #666;

	font-size: 1rem;

	color: #fff;

	text-transform: uppercase;

	border-radius: 8px;

}



.sermons h2::after {

	content: '';

	display: block;

	height: 100%;

	width: 24px;

	background-color: #888;

	transform: skew(-10deg);

}

	



.series > div {

	display: flex;

	justify-content: space-between;

	align-items: center;

	flex-wrap: wrap; 

	margin: 20px;

	padding: 16px;

}



.series > div:nth-child(odd) {

	background-color: #eee;

	border-radius: 8px; 

}



.series > div p span {

	display: block;

	font-weight: bold; 

}



.series > div p {

	margin: 0;

	width: calc(100% - 400px); 

}



video {

	aspect-ratio: 16/9; 

	width: 350px;

}



[poster] {

	object-fit: fill;

}

	





/* Contact Page */



form { 

	width: 49%; 

}



input, textarea { 

	margin-bottom: 24px; 

	border: 1px solid #666; 

	border-radius: 4px; 

}



label { 

	display: block; 

	margin: 0 0 4px; 

	width: 99%; 

}



form span { 

	color: red; 

}



[type="text"], [type="email"] { 

	padding: 4px 8px; 

	width: 99%; 

}



[type="text"]:focus, 

[type="email"]:focus,

textarea:focus {

	background-color: aliceblue; 

	outline: 1px solid #006; }

	



textarea { 

	display: block; 

	padding: 16px;

	height: 160px;

	width: 99%; 

}



input[type="submit"] {

	display: block; 

	padding: 10px 20px;

	width: fit-content;

	background-color: #294BEF;

	color: #fff;

	text-decoration: none;

	border: 0; 

	border-radius: 7px;

	transition: all .2s linear;

	cursor: pointer;

}



input[type="submit"]:hover {

	transform: scale(1.1); 

}



.contact-me { 

	padding: 20px; 

	width: 49%; 

	background-color: #333;

	color: #fff;

}









/* Speaker Links */





a:not(.hero a, .btn) { 

	color: blue; 

	text-decoration: none;

	border-bottom: 1px dashed currentcolor;	

}





menu a { 

	color: #fff; 

}



main :where(a:link, a:visited, a:hover, a:active) { color: blue; }













/* Layout */





.hero {

	display: flex;

	justify-content: flex-end;

	align-items: flex-start;

	flex-wrap: wrap; 

	margin: 0 0 40px;

	padding: 10px;

	height: 500px;

	background-color: #00002E;

	background-image: url(/images/hero-2.jpg); 

	background-repeat: no-repeat;

	background-size: cover;

	border-top: 5px solid #000;

	border-bottom: 5px solid #000;

}



.hero a {

	text-decoration: none;

}



menu {

	display: flex;

	justify-content: center; 

	align-items: center; 

	flex-wrap: wrap;

	gap: 40px;

	margin: 0;

	padding: 0;

}



menu li {

	list-style-type: none; 

	margin: 0;

	font-weight: bold; 

	font-size: 1.125rem;

	color: #fff;

	transition: all .2s linear;

}



menu a, .btn {

	display: block; 

	padding: 10px 20px;

	color: #fff;

	text-decoration: none;

	border-radius: 7px;

	transition: all .2s linear;

}



menu a:hover, .btn:hover {

	transform: scale(1.1); 

}



menu:hover li:not(:hover) {

  opacity: 0.5;

}





.btn {

	display: inline-block;

	padding: 8px 16px;

	background-color: #294BEF;

	color: #fff; 

	border: 0; 

}



main {

	margin: 0 auto; 

	padding: 0 0 120px;

	width: 1000px; 

	background-color: #fff; 

}



footer { 

	margin: 100px 0 0; 

	text-align: center; 

}



.copy {

	margin: 0;

	padding: 20px;

	background-color: #00002E;

	font-weight: bold;

	font-size: .7em;

	color: #fff;

	text-align: center;

	text-transform: uppercase; 

}

		





/* Utility Classes */



.red { color: #f00; }

b, strong { font-weight: bold; }

i, em { font-style: italic; }



[hidden] { display: none !important; }



.visually-hidden {

  position: absolute;

  white-space: nowrap;

  width: 1px;

  height: 1px;

  overflow: hidden;

  border: 0;

  padding: 0;

  clip: rect(0 0 0 0);

  clip-path: inset(50%);

  margin: -1px; }



form {

	caret-color: #006;

}