@charset "UTF-8";

:root {
	--shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

body {
	background-color: #222;
	color: #d1d2d3;
    font-family: "Open Sans", sans-serif; }

section, .section { padding: 4rem 0; }
h1 { color: #fff; }
h3 { color: #ffffcc; }
.bg { background-color: #333; }

a, a:hover, a:visited, a:active, a:focus, .bi-facebook { 
	transition: all .15s ease;
	text-decoration: none; }

a { 
	color: #ffc107 }

a:hover { color: #ffcd39; }

.bi { margin-top: -4px; }

.flex-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column; }
	
section h2 {
	color: #ffffcc;
}


/* Navigation */
header {
	background-color: #111;
	padding: 1.5rem;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: center;
}

header h1 { 
	margin-bottom: 0;
	font-size: 20px; }

header h1 .fs-1 { 
	color: #ffffcc;
	text-transform: uppercase; }

header h1 span:last-of-type { color: #ffffcc; }


header img {
	min-height: 100%;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin-right: 1rem;
}

nav {
	display: flex;
	justify-items: center;
	align-items: center;
}

.navbar { 
	padding: 2rem 0 1.25rem 0; 
}

.nav-link { 
	color: #ffffcc !important;}

.nav-link:hover, .nav-link:focus { color: #ccc !important }

/* Landing */
#synopsis {
	display: flex;
	align-items: center;
	background-color: #222; 
}

img.hero {
	max-width: 100%;
	height: auto;
	border-radius: .35rem;
}
	
/* Page */
img.tom, img.jake {
	max-width: 100%;
	height: auto;
	border-radius: 50%;
}

iframe, .iframe {
	max-width: 540px;
	max-height: 304px;
	min-width: 100%;
	height: 304px;;
	border-radius: .35rem;
}

#donate svg {
	width: 150px;
	height: 150px;
}


/* Footer */
footer { 
	background-color: #1a1a1a;
	color: #fff;
	color: #eee;
	padding: 2rem 1rem; }

footer, footer p {
	text-align: center;
	margin-bottom: 0;
	font-size: 14px; }

.footer-links {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	margin-top: .5rem;
	margin-bottom: .5rem; }

.footer-links a {
	color: #ffffcc;
}

.footer-links a:hover { color: #aaa; }
	
	
/* ************ RESPONSIVE ************ */

@media (max-width: 991px) { 
	.order1 { order: 1; }
	.order2 { order: 2; }
	
	iframe {
		max-width: unset;
		max-height: unset;
		min-width: 100%;
		height: 369px;
		border-radius: .35rem;
	}
}

@media (max-width: 767px) { 
	section {
		padding: 2rem 0;
	}
	
	header, nav, .footer-links { 
		display: block; 
	}	
	
	nav {
		justify-items: unset;
		align-items: unset;
	}
	
	.nav-link {
		padding-left: 0 !important;
	}
	
	#donate .text-end {
		text-align: center !important;
		margin-bottom: 1rem;
	}
	
	#tom .offset-lg-1, #jake .order1 {
		text-align: center;
	}
	
	#watch .col-12 {
		text-align: center;
	}
	
	iframe, .iframe {
		height: 169px;
		min-width: 300px;
	}
	
	#synopsis img {
		float: none !important;
		margin-right: 0 !important;
	}
}