/* Imports
---------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Tinos:ital@0;1&display=swap');

/* Base
---------------------------------------------------- */

	html {
		padding: 0 5%;
		background: #fcfcfc;
	}

	body {
		max-width: 850px;
		margin: 50px auto 75px auto;
		padding: 0;
		color: #171717;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.6;
		background: #fff;
		box-shadow: rgba(0,0,0,0.1) 1px 2px 2px,rgba(0,0,0,0.1) 2px 4px 4px,rgba(0,0,0,0.1) 4px 8px 8px,rgba(0,0,0,0.1) 8px 16px 16px,rgba(0,0,0,0.1) 16px 32px 32px,rgba(0,0,0,0.1) 32px 64px 64px;
		position: relative;
	}

	body:after {
		content: "";
		background: #f1f1f1;
		display: block;
		position: absolute;
		top: 20px;
		left: 20px;
		right: -20px;
		bottom: -20px;
		z-index: -1;
	}

	/* headings */

	h1, h2, h3, h4, h5, h6 {
		margin: 0 0 20px 0;
		color: #171717;
		font-family: "Tinos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-weight: 400;
		line-height: 1.35;
	}

	h1 { font-size: 40px; }
	h2 { font-size: 32px; }
	h3 { font-size: 28px; }
	h4 { font-size: 24px; }
	h5 { font-size: 20px; }
	h6 { font-size: 16px; }

/* Header
---------------------------------------------------- */

	#header {
		width: 100%;
		margin: 0 auto;
		padding: 0 7%;
		border-bottom: 1px solid #d8d8d8;
		box-sizing: border-box;
	}

	/* intro */

	#intro {
		padding: 50px 0 40px 0;
	}

	#intro h1 {
		margin: 0;
	}

	#intro p {
		margin: 0;
		font-family: "Tinos", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 20px;
		font-style: italic;
	}

	/* main nav */

	#navigation-primary ul {
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	#navigation-primary ul li {
		margin: 0 25px -1px 0;
		display: inline-block;
	}

	#navigation-primary button {
		margin: 0;
		padding: 5px 0;
		color: #000;
		font-size: 14px;
		text-decoration: none;
		background: none;
		border: none;
		border-bottom: 3px solid transparent;
		display: block;
		cursor: pointer;
	}

	#navigation-primary button:hover {
		border-bottom: 3px solid #000;
	}

	#navigation-primary button.selected {
		border-bottom: 3px solid #000;
	}

	#navigation-primary button.theme-ferriss:hover, #navigation-primary button.theme-ferriss.selected { border-color: #6cb78a; }
	#navigation-primary button.theme-fridman:hover, #navigation-primary button.theme-fridman.selected { border-color: #6c95b7; }
	#navigation-primary button.theme-rogan:hover, #navigation-primary button.theme-rogan.selected { border-color: #b77c6c; }
	#navigation-primary button.theme-willink:hover, #navigation-primary button.theme-willink.selected { border-color: #6c6c6c; }

/* Body
---------------------------------------------------- */

	/* main */

	#main {
		width: 100%;
		margin: 0 auto;
		padding: 80px 7% 30px 7%;
		box-sizing: border-box;
	}

	/* podcast episodes */
	
	#podcast-episodes article {
		margin: 0 0 80px 0;
		position: relative;
	}

	#podcast-episodes article h2 {
		margin-bottom: 15px;
	}

	#podcast-episodes article h6 {
		color: #d4d4d4;
		text-transform: uppercase;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 1px;
		display: inline-block;
		transform: rotate(-90deg);
		position: absolute;
		bottom: 40px;
		left: -83px;
	}

	#podcast-episodes article figure {
		width: 35px;
		height: 35px;
		margin: 0 0 0 -35px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 5px;
		left: -8.1%;
	}

	#podcast-episodes article figure.theme-ferriss { background-color: #6cb78a; }
	#podcast-episodes article figure.theme-fridman { background-color: #6c95b7; }
	#podcast-episodes article figure.theme-rogan { background-color: #b77c6c; }
	#podcast-episodes article figure.theme-willink { background-color: #6c6c6c; }

	#podcast-episodes article cite {
		margin-top: 20px;
		font-style: normal;
		display: block;
	}

	#podcast-episodes article cite strong {
		margin-right: 10px;
		font-weight: 600;
	}

	#podcast-episodes article cite a, #podcast-episodes article cite a:visited {
		margin: 0 3px 0 0;
		padding: 6px 8px;
		color: #000;
		font-size: 14px;
		background: #eee;
		text-decoration: none;
	}

	#podcast-episodes article cite a:hover {
		background: #dfdfdf;
	}

	#podcast-episodes article details {
		padding: 0 20px;
		background: #fff;
		border: 1px solid #d8d8d8;
		position: relative;
	}

	#podcast-episodes article details * {
		position: relative;
		z-index: 1;
	}

	#podcast-episodes article details:after {
		content: "";
		border: 5px solid #f1f1f1;
		border-top: none;
		border-left: none;
		display: block;
		position: absolute;
		top: 6px;
		left: 6px;
		right: -6px;
		bottom: -6px;
		z-index: 0;
		transition: all .1s linear;
	}

	#podcast-episodes article details:hover:after {
		border-color: #e9e9e9;
	}

	#podcast-episodes article details summary {
		margin: 0 -20px -1px -20px;
		padding: 5px 20px;
		background: #fff;
		border-bottom: 1px solid #d8d8d8;
		cursor: pointer;
	}

	#podcast-episodes article details > div {
		padding: 10px 17px;
	}

/* Footer
---------------------------------------------------- */

	#footer {
		width: 100%;
		padding: 50px 7%;
		color: #fff;
		background: #171717;
		box-sizing: border-box;
	}

	#outro h3 {
		color: #fff;
	}

	#outro p {
		font-weight: 200;
	}

	/* copyright */

	#footer small {
		color: #999;
		font-size: 12px;
		font-weight: 300;
	}