///////////////////////////////////////////////////////////////////
//
//                       ALL
//
///////////////////////////////////////////////////////////////////

/* ========================= */
/*      PODCAST HERO  		 */
/* ========================= */

.podcast-hero{
	position: relative;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: @primary-site-color;
	background-attachment: fixed;
	.cover();
	
	@media screen and (max-width: @ipad){
		height: 80%;
	}
	
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200px;
		display: block;
		.linear-gradient(top, lighten(@primary-site-color, 3%));
	}
	
	&:after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 300px;
		display: block;
		.linear-gradient(bottom, @primary-site-color);
	}
	
	.podcast-hero-inner{
		position: relative;
		width: 100%;
		height: 100%;
		.rgba(@primary-site-color, 0.5);
		z-index: 10;
	}
	
	.podcast-hero-inner > .container{
		position: relative;
		height: 100%;
	}
	
	.podcast-hero-content{
		position: absolute;
		top: 50%;
		left: 0;
		.translateY(-50%);
		width: 100%;
		padding: 0 15px;
		font-weight: 700;
		text-transform: uppercase;
		z-index: 20;
		
		@media screen and (max-width: @ipad){
			top: 45%;
		}
		
		a{
			color: inherit;
		}
		
		.podcast-hero-date{
			display: block;
			margin-bottom: 10px;
			color: #f1f1f1;
		}
		
		.podcast-hero-title{
			text-transform: uppercase;
			font-weight: 700;
			.font-size(3.2);
			
			@media screen and (max-width: @tablet){
				.font-size(2.2);
			}
		}
		
		.podcast-hero-meta{
			.item{
				.inline-block;
				.font-size(1.6);
				list-style: none;
				color: @secondary-site-color;
				
				@media screen and (max-width: @smart){
					margin-bottom: 5px;
					.font-size(1.4);
				}
				
				+ .item{
					&:before{
						content: "//";
						margin: 0 10px;
					}
				}
				
				a{
					&:hover, &:focus{
						color: @white;
					}
				}
			}
		}
	}
	
	.podcast-hero-player-content{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 60px;
	}
}

/* ========================= */
/*    	PODCAST CARD  	     */
/* ========================= */

.podcast-card{
	position: relative;
	background: lighten(@primary-site-color, 3%);
	.clearfix;
	
	.podcast-image{
		a{
			position: relative;
			width: 100%;
			height: 100%;
			display: block;
			
			&:before{
				content: "\f04b";
				font-family: FontAwesome;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-top: -25px;
				margin-left: -25px;
				width: 50px;
				height: 50px;
				background: @white;
				color: @secondary-site-color;
				text-align: center;
				line-height: 51px;
				text-indent: 5px;
				z-index: 5;
				.font-size(2.2);
				.rounded(100%);
				.transition(0.2s);
			}
			
			&:hover, &:focus{
				&:before{
					background: @secondary-site-color;
					color: @white;
				}
			}
		}
		
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	
	.podcast-content{
		padding: 25px;
		color: @white-light;
		
		a{
			color: inherit;
			.transition(0.1s);
			
			&:hover, &:focus{
				color: @white;
			}
		}
	}
	
	.podcast-date{
		display: block;
		margin-bottom: 10px;
	}
	
	.podcast-title{
		.font-size(2.4);
		font-weight: 700;
		text-transform: uppercase;
	}
	
	.podcast-meta{
		.item{
			.inline-block;
			color: @secondary-site-color;
			list-style: none;
			
			+ .item{
				&:before{
					content: "//";
					margin: 0 10px 0 5px;
				}
			}
			
			@media screen and (max-width: @ipad){
				&:last-of-type{
					width: 100%;
					
					&:before{
						display: none;
					}
				}
			}
		}
	}
}

/* ========================= */
/*    PODCAST CARD FULL      */
/* ========================= */

.podcast-card.full{
	.podcast-image{
		position: absolute;
		left: 0;
		top: 0;
		width: 25%;
		height: 100%;
		float: left;
		
		@media screen and (max-width: @tablet){
			position: static;
			width: 100%;
			height: 280px;
		}
		
		a{
			&:after{
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				width: 140px;
				height: 100%;
				.linear-gradient(right, lighten(@primary-site-color, 3%));
				display: block;
				
				@media screen and (max-width: @tablet){
					bottom: 0;
					top: auto;
					width: 100%;
					height: 70%;
					.linear-gradient(bottom, lighten(@primary-site-color, 3%));
				}
			}
		}
	}
	
	.podcast-content{
		width: 75%;
		float: right;
		
		@media screen and (max-width: @tablet){
			width: 100%;
		}
	}
}

/* ========================= */
/*    PODCAST CARD BOXED     */
/* ========================= */

.podcast-card.boxed{
	.podcast-image{
		height: 280px;
		
		a{
			&:after{
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 70%;
				.linear-gradient(bottom, lighten(@primary-site-color, 3%));
				display: block;
			}
		}
	}
	
	.podcast-title{
		@media screen and (max-width: @ipad){
			.font-size(2.1);
		}
		
		@media screen and (min-width: @tablet-min){
			height: 50px;
		}
	}
	
	.podcast-excerpt{
		height: 40px;
		
		@media screen and (max-width: @ipad){
			height: 60px;
		}
		
		@media screen and (max-width: @tablet){
			height: auto;
		}
	}
}

/* ========================= */
/*    PODCAST CARD SIDEBAR   */
/* ========================= */

.podcast-card.sidebar{
	.podcast-image{
		height: 280px;
		
		a{
			&:after{
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 70%;
				.linear-gradient(bottom, lighten(@primary-site-color, 3%));
				display: block;
			}
		}
	}
	
	.podcast-title{
		.font-size(1.8);
		margin-bottom: 5px;
	}
}

/* ========================= */
/*      	TEAM CARD   	 */
/* ========================= */

.team-card{
	background: darken(@white-light, 5%);
	
	.team-card-image{
		position: relative;
		width: 100%;
		height: 270px;
		
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			.rgba(@primary-site-color, 0.5);
			display: block;
		}
	}
	
	.team-card-title{
		margin-top: 25px;
		padding: 0 25px;
		text-transform: uppercase;
		font-weight: 700;
		.font-size(2.2);
	}
	
	.team-card-job{
		padding: 0 25px;
		text-transform: uppercase;
		font-weight: 700;
	}
	
	.team-card-description{
		min-height: 80px;
		margin-bottom: 20px;
		padding: 0 25px;
	}
	
	.team-card-social{
		width: 100%;
		display: table;
		table-layout: fixed;
		
		.social-item{
			list-style: none;
			display: table-cell;
			
			+ .social-item{
				border-left: 1px solid lighten(@primary-site-color, 8%);
			}
		}
		
		a{
			display: block;
			padding: 10px 15px;
			background: lighten(@primary-site-color, 10%);
			color: @white;
			text-align: center;
			
			&:hover, &:focus{
				background: lighten(@primary-site-color, 8%);
			}
		}
	}
}

/* ========================= */
/*      	PAGE HEADER  	 */
/* ========================= */

.page-header, .page-header-podcast, .page-error{
	position: relative;
	height: 450px;
	padding: 0;
	margin: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: @primary-site-color;
	background-attachment: fixed;
	.cover();
	border: none;
	
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 200px;
		display: block;
		.linear-gradient(top, lighten(@primary-site-color, 3%));
	}
	
	&:after{
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 300px;
		display: block;
		.linear-gradient(bottom, @primary-site-color);
	}
	
	.page-header-inner{
		position: relative;
		width: 100%;
		height: 100%;
		padding-top: 140px;
		.rgba(@primary-site-color, 0.7);
		z-index: 5;
		
		@media screen and (max-width: @ipad){
			padding-top: 50px;
		}
	}
	
	h2{
		margin: 90px 0 20px 0;
		font-weight: 700;
		text-transform: uppercase;
		.font-size(4.8);
		letter-spacing: 1px;
		
		@media screen and (max-width: @ipad){
			margin-top: 130px;
		}
		
		@media screen and (max-width: @mobile){
			.font-size(3.4);
		}
	}
}

/* ========================= */
/*    PAGE HEADER PODCAST  	 */
/* ========================= */

.page-header-podcast{
	h2{
		.font-size(3.0);
		
		@media screen and (max-width: @ipad){
			.font-size(2.4);
			margin-top: 90px;
		}
		
		@media screen and (max-width: @mobile){
			.font-size(2.0);
		}
	}
}

/* ========================= */
/*    		PAGE ERROR  	 */
/* ========================= */

.page-error{
	height: 700px;
	
	@media screen and (max-width: @ipad){
		height: 500px;
	}
	
	.page-error-inner{
		position: relative;
		width: 100%;
		height: 100%;
		.rgba(@primary-site-color, 0.7);
		z-index: 5;
		
		@media screen and (max-width: @ipad){
			padding-top: 50px;
		}
	}
	
	.page-error-content{
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		.translateY(-50%);
	}
	
	h2{
		margin-top: 0;
		
		@media screen and (max-width: @ipad){
			margin-top: 0;
		}
	}
}

/* ========================= */
/*    	PODCAST PLAYER  	 */
/* ========================= */

.podcast-player{
	background: @primary-site-color;
	
	.podcast-player-inner{
		padding: 40px 0;
		
		@media screen and (max-width: @tablet){
			padding: 30px 0;
		}
	}
	
	iframe[src*="soundcloud"]{
		width: 100%;
		height: 100px;
		background: #e5e5e5;
	}
	
	.video-frame{
		width: 800px;
		height: 450px;
		display: block;
		margin: 0 auto;
		
		@media screen and (max-width: @ipad){
			width: 100%;
			height: 440px;
		}
		
		@media screen and (max-width: @tablet){
			height: 300px;
		}
		
		@media screen and (max-width: @smart){
			height: 240px;
		}
	}
}

/* ========================= */
/*    	PODCAST META    	 */
/* ========================= */

.podcast-meta-element{
	width: 100%;
	display: table;
	table-layout: fixed;
	background: lighten(@primary-site-color, 5%);
	
	.podcast-meta-item{
		height: 65px;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		color: @white-light;
		.transition(0.2s);
		
		+ .podcast-meta-item{
			border-left: 1px solid lighten(@primary-site-color, 2%);
		}
		
		@media screen and (max-width: @tablet){
			width: 50%;
			height: auto;
			padding: 30px 0;
			display: block;
			float: left;
			border: 1px solid lighten(@primary-site-color, 2%);
		}
		
		@media screen and (max-width: @mobile){
			width: 100%;
		}
	}
	
	a.podcast-meta-item{
		&:hover, &:focus{
			background: @secondary-site-color;
		}
	}

}

/* ========================= */
/*    	PODCAST META    	 */
/* ========================= */

.podcast-links{
	padding: 20px 0;
	background: lighten(@primary-site-color, 2.5%);
	
	.podcast-links-list{
		margin: 0;
		
		li{
			margin: 11px 0;
			list-style: none;
		}
	}
	
	.btn{
		width: 65px;
	}
	
	.podcast-link-cite{
		margin-left: 10px;
		color: @white-light;
		vertical-align: middle;
	}
	
	a.podcast-link-cite{
		color: lighten(@secondary-site-color, 20%);
		
		&:hover, &:focus{
			color: @secondary-site-color;
		}
	}
}

/* ========================= */
/*		  PAGE CONTENT       */
/* ========================= */

.page-content{
	padding-bottom: 50px;
	
	p{
		margin-bottom: 25px;
		color: #444;
		line-height: 25px;
		font-weight: 600;
		.font-family("Open Sans");
		.font-size(1.6);
	}
	
	> figure{
		margin-bottom: 25px;
	}
}

/* ========================= */
/*		  PAGE GALLERY       */
/* ========================= */

.page-gallery{
	margin-bottom: 25px;
	.clearfix;
}

.gallery-item{
	position: relative;
	height: 250px;
	overflow: hidden;
	
	@media screen and (max-width: @mobile){
		height: 160px;
	}
	
	&:hover, &:focus{
		figcaption{
			.translateY(0);
		}
	}
	
	a{
		width: 100%;
		height: 100%;
		display: block;
		.opacity(0.8);
		.transition(0.2s);
		
		&:hover, &:focus{
			.opacity(1);
		}
	}
	
	img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	figcaption{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 15px;
		background: @primary-site-color;
		color: @white-light;
		.transition(0.3s);
		.translateY(100%);
	}
}

/* ========================= */
/*      PAGE PAGINATION      */
/* ========================= */

.page-pagination{
	width: 100%;
	display: table;
	table-layout: fixed;
	
	a{
		position: relative;
		display: block;
		padding: 30px;
		color: #444;
		background: darken(@white-light, 5%);
		
		@media screen and (min-width: @tablet-min){
			display: table-cell;
			vertical-align: middle;
		}
		
		&:hover, &:focus{
			background: darken(@white-light, 9%);
		}
		
		i{
			position: absolute;
			top: 50%;
			margin-top: -7px;
		}
		
		&.page-pagination-prev{
			padding-left: 60px;
			
			i{
				left: 15px;
			}
		}
		
		&.page-pagination-next{
			padding-right: 60px;
			text-align: right;
			
			@media screen and (min-width: @tablet-min){
				border-left: 1px solid darken(@white-light, 9%);
			}
			
			@media screen and (max-width: @tablet){
				border-top: 1px solid darken(@white-light, 9%);
			}
			
			i{
				right: 15px;
			}
		}
	}
	
	p{
		margin: 0;
		font-weight: 700;
	}
}

/* ========================= */
/*      COMMENT ITEM         */
/* ========================= */

.comment-item{
	position: relative;
	margin-bottom: 40px;
	
	.comment-image{
		position: absolute;
		top: 5px;
		left: 0;
	}
	
	.comment-content{
		padding-left: 110px;
	}
	
	.comment-author{
		.font-size(2.0);
		font-style: normal;
		font-weight: 700;
	}
	
	.comment-date{
		margin: 5px 0 10px 0;
		display: block;
		font-weight: 700;
		color: #444;
	}
	
	small{
		margin-left: 3px;
		.font-size(1.3);
		color: #777;
	}
}

/* ========================= */
/*		  PAGE GALLERY       */
/* ========================= */

.map{
	position: relative;
	
	&.touch{
		&:after{
			display: none;
		}
	}
	
	&:after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
	}
	
	iframe{
		width: 100%;
		height: 400px;
	}
}