:root {
	--black: #272f2c;
	--purple: #6a3253;
	--dark-red: #b92638;
	--light-red: #ce3b45;
	--orange: #d5693f;
	--yellow: #ebb533;
	--gray: #e2e2e2;
}
* {
	box-sizing:border-box;
}
body {
	background:var(--gray);
	color:var(--black);
	font-family: "roboto", sans-serif;
	font-weight: 400;
	font-size:24px;
	line-height:32px;
	font-style: normal;
	margin:0;
	padding:0;
}
.roboto-regular {
	font-family: "roboto", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.roboto-italic {
	font-family: "roboto", sans-serif;
	font-weight: 400;
	font-style: italic;
}
.roboto-bold {
	font-family: "roboto", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.roboto-bold-italic {
	font-family: "roboto", sans-serif;
	font-weight: 700;
	font-style: italic;
}
a {
	transition:all .3s;
}
a:link, a:visited, a:active { color:var(--gray); text-decoration:none; }
a:hover { color:var(--light-red); }
a.button {
	display:block;
	border:1px solid var(--black);
	border-radius:8px;
	padding:15px 45px;
	font-size:16px;
	line-height:16px;
	font-weight:700;
	color:var(--black);
	background:var(--gray);
}
a.button:hover {
	color:var(--gray);
	background:var(--black);
}
h1, h2, h3, h4, h5, h6 {
	font-family: "erbaum", sans-serif;
	font-weight: 700;
	font-style: normal;
	text-transform:uppercase;
	margin:0 0 15px 0;
}
h1 {
	font-size:80px;
	line-height:80px;
}
h2 {
	font-size:60px;
	line-height:60px;
}
h3 {
	font-size:36px;
	line-height:46px;
}
p {
	margin:0 0 30px 0;
}
.inner {
	max-width:1400px;
	margin:0 auto;
}
header {
	background:var(--black);
	color:var(--gray);
	text-align:center;
	.inner {
		padding:0 0 50px 0;
	}
	a.logo {
		display:block;
		padding:20px 20px;
		img {
			width:60px;
			height:auto;
		}
	}
	.menu-bar {
		padding:20px 0 0 0;
		display:flex;
		justify-content:space-between;
		align-items:center;
		align-content:center;
		ul {
			list-style-type:none;
			margin:0;
			padding:0;
			display:flex;
			li {
				margin:0;
				padding:0;
				a {
					display:block;
					padding:10px 40px;
					font-size:20px;
				}
			}
		}
	}
	h1 {
		padding:70px 0 0 0;
	}
	.color-bar {
		width:100%;
		height:30px;
	}
	.color-bar.yellow {
		background:var(--yellow);
	}
	.color-bar.orange {
		background:var(--orange);
	}
	.color-bar.light-red {
		background:var(--light-red);
	}
	.color-bar.dark-red {
		background:var(--dark-red);
	}
	.color-bar.purple {
		background:var(--purple);
	}
}
#main {
	padding:60px 0px 0 0px;
	text-align:center;
}
.intro-content {
	padding:20px 200px 70px 200px;
	text-align:center;
	.buttons {
		display:flex;
		gap:10px;
		justify-content:center;
	}
}
.podcast-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin:0 20px 100px 20px;
	justify-content:center;
}
.column {
	flex: 1 1 calc(50% - 20px);
	box-sizing: border-box;
}
.column iframe {
	width: 100%;
}
.youtube-container {
	display: flex;
    justify-content: center;
	margin-bottom:80px;
    iframe {
        aspect-ratio: 16 / 9;
        width: 100% !important;
    }
}
.more-episodes {
	display:inline-block;
	margin-top:20px;
}
.embed-container {
	margin:0 20px 80px 20px;
}
.cta-panel {
	text-align:center;
	background:var(--yellow);
	padding:80px 300px 70px 300px;
	margin-bottom:100px;
	h2 {
		margin-bottom:20px;
	}
	p {
		font-size:20px;
		line-height:28px;
	}
	a.button {
		background:var(--black);
		color:var(--gray);
		width:auto;
		display:inline-block;
	}
	a.button:hover {
		background:var(--yellow);
		color:var(--black);
	}
}
footer {
	background:var(--black);
	color:var(--gray);
	font-size:20px;
	line-height:28px;
	padding:120px 0;
	.inner {
		display:flex;
		align-items:flex-start;
		justify-content:space-between;
		.left {
			flex-basis:66%;
			padding:60px 350px 60px 100px;
			.socials {
				display:flex;
				justify-content:flex-start;
				gap:20px;
				margin-bottom:20px;
				a {
					display:inline-block;
					width:50px;
					height:50px;
					opacity:1;
					svg {
						width:100%;
						height:auto;
					}
				}
				a:hover {
					opacity:.5;
				}
			}
			.copyright {
				margin-top:100px;
				text-transform:uppercase;
				font-size:10px;
			}
		}
		.right {
			flex-basis:34%;
			border-left:1px solid var(--gray);
			padding:60px 80px 60px 60px;
			a.button {
				text-transform:uppercase;
				background:var(--yellow);
				color:var(--black);
				border-color:var(--yellow);
				width:auto;
				display:inline-block;
			}
			a.button:hover {
				background:var(--black);
				color:var(--yellow);
			}
		}
	}
}

@media screen and (max-width:1350px) {
	.cta-panel {
		padding:80px 100px 70px 100px;
	}
	footer .inner .left {
		padding-right:250px;
		padding-left:30px;
	}
	footer .inner .right {
		padding-right:30px;
		padding-left:50px;
	}
}

@media screen and (max-width:991px) {
	h1 {
		font-size:60px;
		line-height:60px;
	}
	.intro-content {
		padding-left:30px;
		padding-right:30px;
	}
	.cta-panel {
		padding-left:30px;
		padding-right:30px;
		margin-bottom:50px;
	}
	.embed-container {
		margin-bottom:50px;
	}
	.youtube-container {
		margin-bottom:50px;
	}
	.podcast-grid {
		margin-bottom:50px;
	}
	footer {
		padding:60px 0;
		.inner {
			.left {
				flex-basis:50%;
				padding:20px 40px 20px 20px;
				.copyright {
					margin-top:40px;
				}
			}
			.right {
				flex-basis:50%;
				padding:40px 20px 60px 40px;
			}
		}
	}
}

@media screen and (max-width:767px) {
	.menu-bar {
		padding-top:0;
	}
	body {
		font-size:20px;
		line-height:28px;
	}
	h2 {
		font-size:34px;
		line-height:36px;
	}
	h3 {
		font-size:30px;
		line-height:36px;
	}
	.cta-panel {
		padding:50px 20px 50px 20px;
	}
	.intro-content {
		padding:0 20px 30px 20px;
		.buttons {
			flex-wrap:wrap;
			a.button {
				width:100%;
			}
		}
	}
	.podcast-grid {
		margin-bottom:50px;
		.column {
			flex:1 1 100%;
		}
	}
	header {
		h1 {
			padding-top:20px;
			font-size:34px;
			line-height:36px;
			br {
				display:none;
			}
		}
		p {
			padding:0 20px;
		}
		.inner {
			padding-bottom:10px;
		}
		& .menu-bar {
			& ul {
				& li {
					a {
						display: block;
						padding: 10px 10px;
						font-size: 16px;
					}
				}
			}
		}
	}
	footer {
		padding:40px 0;
		.inner {
			flex-wrap:wrap;
			.left {
				flex-basis:100%;
				padding:20px 20px;
			}
			.right {
				flex-basis:100%;
				border-left:0;
				padding:20px 20px;
			}
		}
	}
}