@charset "UTF-8";

/* ***************************************************
 * FONTS
 * ***************************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;800&display=swap');


/* ****************************************************
 * DESIGN FUNDAMENTALS
 * ***************************************************/

:root {
	--color-black: #000000;
	--color-gray-1: #EDEDED;
	--color-white: #FFFFFF;
	
	--color-red: #FF0000;
}

body {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	
	font-size: 30px;
	font-weight: 400;
	letter-spacing: -0.02em;
	
}

.color-black { color: var(--color-black); }
.hover-color-black:hover { color: var(--color-black) !important; }
.bg-color-black { background-color: var(--color-black); }
.text-shadow-black { text-shadow: 3px 3px 0px var(--color-black); }

.color-gray-1 { color: var(--color-gray-1); }
.hover-color-gray-1:hover { color: var(--color-gray-1) !important; }
.bg-color-gray-1 { background-color: var(--color-gray-1); }
.text-shadow-gray-1 { text-shadow: 3px 3px 0px var(--color-gray-1); }

.color-white { color: var(--color-white); }
.hover-color-white:hover { color: var(--color-white) !important; }
.bg-color-white { background-color: var(--color-white); }
.text-shadow-white { text-shadow: 3px 3px 0px var(--color-white); }

.color-red { color: var(--color-red); }
.hover-color-red:hover { color: var(--color-red) !important; }
.bg-color-red { background-color: var(--color-red); }
.text-shadow-red { text-shadow: 3px 3px 0px var(--color-red); }


/* ****************************************************
 * HEADINGS, PARAGRAPHS AND OTHER INLINE ELEMENTS
 * ***************************************************/

 h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-weight: 800;
	margin-bottom: 0;
	line-height: 1.5;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
	font-size: 60px;
}

h5, .h5, h6, .h6 {
	font-size: 40px;
}

p {
	line-height: 1.5;
	margin-bottom: 45px;
}

p:last-child {
	margin-bottom: 0;
}

.divider {
	pointer-events: none;
	
	padding:0!important;
	margin:0!important;
	line-height: 1;
	font-size: 0;
	white-space: nowrap;
	overflow: hidden;
}

.divider .divider__graphics {
	pointer-events: none;
	
	width: 100%;
	height: auto;
	margin: 0;
}
/* --- ANIMATION ADDITIONAL --- */
.fadeIn,
.fadeInDown,
.fadeInDownBig,
.fadeInLeft,
.fadeInLeftBig,
.fadeInRight,
.fadeInRightBig,
.fadeInUp,
.fadeInUpBig,
.fadeInTopLeft,
.fadeInTopRight,
.fadeInBottomLeft,
.fadeInBottomRight,
.backInDown,
.backInLeft,
.backInRight,
.backInUp,
.flipInX,
.flipInY,
.lightSpeedInRight,
.lightSpeedInLeft,
.rotateIn,
.rotateInDownLeft,
.rotateInDownRight,
.rotateInUpLeft,
.rotateInUpRight,
.jackInTheBox,
.rollIn,
.zoomIn,
.zoomInDown,
.zoomInLeft,
.zoomInRight,
.zoomInUp
{
	opacity: 0.0 !important;
}

@media (max-width: 767px){
	body {
		font-size: 20px;
	}
	
	h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
		font-size: 30px;
	}
	
	h5, .h5, h6, .h6 {
		font-size: 22px;
	}
	
	p {
		font-size: 20px;
	}
}

/* ****************************************************
 * MARGINS AND PADDINGS
 * ***************************************************/

.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }

.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }

.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }

.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }

@media (min-width: 768px) {
	.mb-md-80 {
		margin-bottom: 80px !important;
	}
}


/* ****************************************************
 * FRONT PAGE MAIN STYLING
 * ***************************************************/

section.introduction {
	padding-top: 150px;
	margin-bottom: -100px;
}

.intro__image {
	position: absolute;
	right: 0;
	bottom: -270px;
	
	width: 75%;
	
	transform: rotate(-5deg);
	
	transition: all 0.5s linear;
}

.presenter__card {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.presenter__image {
	display: block;
	width: 100%;
	max-width: 270px;
	margin-bottom: 30px;
	
	border-radius: 50%;
	
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color: rgba(0,0,0,.1); /* FALLBACK */
}

.presenter__image::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.presenter__name {
	display: block;
	text-align: center;
	font-weight: 800;
}

.presenter__social {
	display: block;
	text-align: center;
	color: var(--color-red);
}

a.presenter__social[href]:hover {
	text-decoration: underline;
	color: var(--color-black);
}

.episode__card {
	display: block;
	width: 100%;
	padding: 30px;
	
	border-radius: 20px;
	
	color: var(--color-black);
	background-color: var(--color-gray-1);
	opacity: 0.8;
	
	transition: all 0.3s linear;
}

a.episode__card {
	text-decoration: none !important;
}

a.episode__card:hover {
	background-color: var(--color-white);
	opacity: 1.0;
}

.episode__card h6 {
	color: var(--color-red);
	font-size: 30px;
	font-weight: normal;
}

.episode__card h4 {
	color: var(--color-black);
	font-size: 34px;
}

.episode__card__icon {
	display: none;
}

a.episode__card .episode__card__icon {
	color: var(--color-black);
	display: block;
	font-size: 60px;
	margin-left: 30px;
	
	transition: color 0.3s linear;
}

a.episode__card:hover .episode__card__icon {
	color: var(--color-red);
}

@media (max-width: 1199px){
	.intro__image {
		bottom: -175px;
	}
}

@media (max-width: 991px){
	section.introduction {
		padding-top: 90px;
		margin-bottom: -50px;
	}
}

@media (max-width: 767px){
	section.introduction {
		padding-top: 70px;
		margin-bottom: 0;
	}
	
	.intro__image {
		position: inherit;
		right: auto;
		bottom: auto;
		
		width: 50%;
		max-width: 170px;
		
		margin-top: 40px;
		margin-bottom: -150px;
		
		
	}
	
	.presenter__image {
		max-width: 132px;
	}
	
	.episode__card h4, .episode__card h6 {
		font-size: 20px;
	}
	
	a.episode__card .episode__card__icon { 
		font-size: 40px;
		margin-left: 20px;
	}
}


/* ****************************************************
 * FRONT PAGE MAIN STYLING
 * ***************************************************/

.episode__link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 30px;
	
	border-radius: 20px;
	background-color: var(--color-red);
	color: var(--color-white);
}

a.episode__link {
	text-decoration: none !important;
	transition: all 0.3s linear;
}

a.episode__link:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

.episode__link > i {
	display: block;
	width: 60px;
	height: 60px;
	margin-right: 30px;
	
	background-size: contain;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

.episode__link > i.youtube { background-image: url('img/youtube-logo-white.png'); }
.episode__link > i.spotify { background-image: url('img/spotify-logo-white.png'); }
.episode__link > i.apple-podcasts { background-image: url('img/apple-podcasts-logo-white.png'); }
.episode__link > i.google-podcasts { background-image: url('img/google-podcasts-logo-white.png'); }

.episode__link > span.label {
	font-size: 30px;
	font-weight: bold;
}

@media (max-width: 767px){
	.episode__link {
		padding: 20px;
	}
	
	.episode__link > i {
		width: 40px;
		height: 40px;
		margin-right: 20px;
	}
	
	.episode__link > span.label {
		font-size: 20px;
	}
}

/* ****************************************************
 * FOOTER STYLING
 * ***************************************************/

section.platforms {
	margin-top: -5vw;
}

.platforms__button {
	 display: block;
	 text-align: center;
}

a.platforms__button[href]:hover {
	text-decoration: none;
}

.platforms__logo {
	display: inline-block;
	width: 132px;
	height: 132px;
	margin-bottom: 20px;
	
	border-radius: 20px;
	
	background-size: 90px 90px;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-color: var(--color-red);
	
	transition: background-color 0.3s linear;
}

a.platforms__button[href]:hover .platforms__logo {
	background-color: var(--color-black);
}

.platforms__title {
	font-weight: 800;
	color: var(--color-red);
	
	transition: color 0.3s linear;
}

a.platforms__button[href]:hover .platforms__title {
	color: var(--color-black);
}

.platforms__logo.youtube { background-image: url('img/youtube-logo-white.png'); }
.platforms__logo.spotify { background-image: url('img/spotify-logo-white.png'); }
.platforms__logo.apple-podcasts { background-image: url('img/apple-podcasts-logo-white.png'); }
.platforms__logo.google-podcasts { background-image: url('img/google-podcasts-logo-white.png'); }

footer section.copyright {
	font-size: 16px;
}

@media (max-width: 767px){
	section.platforms {
		margin-top: 0;
	}
	
	.platforms__logo {
		width: 75px;
		height: 76px;
		
		border-radius: 10px;
		
		background-size: 56px 56px;
	}
}