.setGeneralVariables() {
	@sticky-header: true;
	@font-family: "Helvetica Neue";
	@accent-color: #FF0000;
	@text-color: #333333;
	@background-color: #ffffff;
	@background-image: none;
	@content-width: 960px;
	@horizontal-separator-color: rgba(0, 0, 0, .2);
}

.setHeaderVariables()
{
	@header-text-color: @background-color;
	@header-background-color: @accent-color;
	@header-height: 60px;
}

.setPlayerVariables()
{
	@button-text-color: #ffffff;
	@button-background-color: @accent-color;

	@player-poster-width: @content-width;
	@player-container-min-height: 450px;
	@player-background-color: #333333;
	@player-background-size: cover;
	@player-fade-color: rgba(0, 0, 0, .4);
	@player-text-color: #ffffff;
}

.setSectionDefaultVariables()
{
	@section-default-header-text-color: @background-color;
	@section-default-header-background-color: @accent-color;
	@section-default-text-color: @text-color;
	@section-default-background-color: @background-color;
}

.setSectionVariables()
{
	@section-information-background-color: @section-default-background-color;
	@section-information-text-color: @section-default-text-color;

	@section-exposition-article-background-color: @background-color;

	@section-members-text-color: @section-default-text-color;
	@section-members-background-color: @section-default-background-color;
	@section-members-name-text-color: @accent-color;
	@section-members-article-width: 200px;

	@section-episodes-text-color: @section-default-text-color;
	@section-episodes-background-color: @section-default-background-color;

	@section-partners-background-color: @section-default-background-color;

	@section-customScheduleBlocks-text-color: @section-default-text-color;
	@section-customScheduleBlocks-background-color: @section-default-background-color;
}

.setFooterVariables()
{
	@footer-text-color: @text-color;
	@footer-background-color: #ececec;
	@footer-height: 100px;
}

.setGeneralVariables();
.setHeaderVariables();
.setPlayerVariables();
.setSectionDefaultVariables();
.setSectionVariables();
.setFooterVariables();

html, body, button, input, td, th
{
	font-family: @font-family, Helvetica Neue, Helvetica, Arial, Tahoma, sans-serif;
}

html, body
{
	font-size: 14px;
	margin: 0;
	scroll-behavior: smooth;
}

body
{
	color: @text-color;
	background-color: @background-color;
	background-image: @background-image;
	background-size: cover;
	background-position: top center;
}

h1, h2, h3, h4, h5, h6
{
	color: @accent-color;
}

h1, h2
{
	font-weight: normal;
}

a
{
	color: @accent-color;
}

.page-loading-container
{
	text-align: center;
	margin-top: 200px;
	font-size: 1.6em;
}

.popup
{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .5);
	z-index: 20;

	.popup-container
	{
		margin: 100px auto 0;
		border-radius: 2px;
		box-shadow: 0 0 20px rgba(0, 0, 0, .5);
		width: 300px;
		max-width: 100%;
		background-color: @background-color;
		color: @text-color;

		.popup-body
		{
			padding: 20px;
		}

		.popup-footer
		{
			padding: 10px 20px;
			border-top: solid 1px rgba(0, 0, 0, .1);
			text-align: right;

			button
			{
				appearance: none;
				border: none;
				background-color: @button-background-color;
				color: @button-text-color;
				padding: 6px 18px;
				border-radius: 2px;
				cursor: pointer;

				&:hover
				{
					background-color: darken(@button-background-color, 20%);
				}
			}
		}
	}
}

header
{
	display: block;
	box-sizing: border-box;
	background-color: @header-background-color;
	color: @header-text-color;
	height: @header-height;
	position: if(@sticky-header, fixed, absolute);
	z-index: 10;
	left: 0;
	right: 0;
	top: 0;

	.header-wrapper
	{
		max-width: @content-width;
		margin: auto;
	}

	.landing-logo
	{
		max-height: @header-height;
		max-width: 50%;
		float: left;

		img
		{
			margin: 4px;
			max-height: @header-height - 8px;
			max-width: 300px;
		}
	}

	.landing-nav-links
	{
		width: 100%;
		height: 100%;
		min-width: 200px;
		text-align: right;

		a
		{
			display: inline-block;
			color: inherit;
			margin: 0 8px;
			text-decoration: none;
			opacity: .8;

			span
			{
				display: inline-block;
			}

			&.landing-nav-link-current
			{
				font-weight: bold;
			}

			&.landing-nav-link-current, &:hover
			{
				opacity: 1;
			}
		}
	}
}

main
{
	display: block;
	background: @player-background-color no-repeat center;
	background-size: @player-background-size;
	position: relative;
	margin-top: if(@sticky-header, @header-height, 0);

	.player-poster
	{
		width: 100%;
		display: block;
	}

	.player-poster-fade
	{
		background-color: @player-fade-color;
		transition: background-color .5s;
		padding-top: if(@sticky-header, 0, @header-height);
	}

	.player-text-layer
	{

		&.player-registration-enter
		{
			padding: 10px;
			max-width: @player-poster-width;
			margin: auto;
			box-sizing: border-box;
			color: @player-text-color;
			font-size: 1.4em;

			table
			{
				width: 100%;
				height: @player-container-min-height;
				border: none;

				tr {
					height: 50%;

					td
					{
						padding: 0;
					}
					td:last-child
					{
						vertical-align: bottom;
					}
				}
			}

			h1
			{
				color: inherit;
				font-weight: bold;
				white-space: pre-wrap;
			}

			button
			{
				padding: 10px 28px;
				border: none;
				border-radius: 3px;
				font-size: .7em;
				background-color: @button-background-color;
				color: @button-text-color;
				cursor: pointer;

				&:hover
				{
					background-color: darken(@button-background-color, 20%);
				}
			}
		}

		&.player-embed-container
		{
			max-width: @content-width;
			margin: auto;
			padding: 10px 0;

			#player-embed, iframe
			{
				background-color: transparent;
				min-height: 350px;
			}
			iframe
			{
				box-shadow: 0 0 10px rgba(0, 0, 0, .2);
			}
		}
	}
}

aside
{
	display: block;
	background-color: @section-default-background-color;
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: center top;

	color: @section-default-text-color;

	> h1
	{
		background: @section-default-header-background-color;
		color: @section-default-header-text-color;
		margin: 0;
		padding: 12px;
		text-align: center;
		font-size: 2em;
	}

	.landing-nav-section-text
	{
		box-sizing: border-box;
		max-width: @content-width;
		padding: 40px 50px;
		margin: auto;
	}

	&.section-exposition
	{
		text-align: center;

		article
		{
			text-align: center;
			box-sizing: border-box;
			padding: 17px;
			margin: 10px;
			color: @accent-color;
			cursor: pointer;
			height: 260px;
			vertical-align: top;
			font-size: 1.6em;

			&.exposition-brand-preview
			{
				background: @section-exposition-article-background-color no-repeat center;
				background-size: cover;
				border: solid 3px transparent;

				&:hover
				{
					border-color: @accent-color;
				}

				.exposition-brand-preview-logo
				{
					height: 100%;
					background: no-repeat center;
					background-size: contain;
				}

				table
				{
					width: 100%;
					height: 100%;
					border: none;
				}
			}
			&.exposition-brand-link
			{
				height: 145px;
				border: solid 2px transparent;
				background-color: #ffffff;
				vertical-align: top;

				a {
					display: block;
					height: 100%;
					background: no-repeat center;
					background-size: contain;
				}

				&:hover
				{
					border-color: @accent-color;
				}
			}

			img
			{
				max-width: 100%;
				max-height: 100%;
			}
		}

		.exposition-brand-header
		{
			margin: 10px 0;
			text-align: left;
			font-size: 1.4em;
			color: @accent-color;

			.exposition-brand-header-button-cell
			{
				width: 30px;
			}
			.exposition-brand-header-logo-cell
			{
				width: 80px;
			}

			img
			{
				max-width: 600px;
				max-height: 50px;
				margin-left: 10px;
				//background-color: @section-exposition-article-background-color;
				padding: 2px 8px;
			}

			button
			{
				appearance: none;
				cursor: pointer;
				margin-right: 10px;
				height: 60px;
				width: 30px;
				border: none;
				background: @button-background-color no-repeat center url(/player/images/icon-arrow-left.svg);
				position: relative;

				&:hover
				{
					background-color: darken(@button-background-color, 20%);
				}
			}
		}

		.exposition-brand-links
		{
			display: flex;

			a
			{
				display: inline-block;
				text-decoration: none;
				cursor: pointer;
				border: none;
				background: @button-background-color;
				color: @background-color;
				appearance: none;
				font-size: 1.2em;
				width: 100%;
				margin: 10px 5px;
				padding: 8px;

				&:hover
				{
					background-color: darken(@button-background-color, 20%);
				}

				&:first-child
				{
					margin-left: 0;
				}
				&:last-child
				{
					margin-right: 0;
				}
			}
		}

		.exposition-video {

			iframe
			{
				width: 100%;
				height: 300px;
				border: none;
			}

			&.aspect_16x9{
				width: 100%;
				padding-top: 56.25%;
				position: relative;

				iframe {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}
		}

		.exposition-brand-description
		{
			background: #f2f0f0;
			text-align: left;
			padding: 10px;
			font-size: 1.2em;
		}

		.exposition-brand-contacts
		{
			font-size: .9em;

			h3
			{
				margin-top: 3em;
				margin-bottom: .1em;
			}

			div
			{
				line-height: 1.5em;
			}

			a
			{
				color: fade(@text-color, 70%);
				text-decoration: none;

				&:hover
				{
					color: @text-color;
				}

				&:after
				{
					content: ', ';
				}
				&:last-child:after
				{
					content: none;
				}
			}
		}
	}

	&.section-text-block
	{
		img
		{
			max-width: 100%;
		}
	}

	&#information,
	&.section-information
	{
		background-color: @section-information-background-color;
		color: @section-information-text-color;

		.landing-nav-section-text
		{
			font-size: 1.4em;
		}
	}

	&.section-nominations
	{
		text-align: center;

		article
		{
			display: inline-block;
			width: 194px;
			background: #ffffff;
			border-radius: 15px;
			color: #000000;
			height: 80px;
			position: relative;
			margin: 40px 10px;
			vertical-align: top;
			text-align: left;

			.nomination-count
			{
				float: right;
				background: @accent-color;
				margin-top: 10px;
				margin-right: -10px;
				padding: 6px 10px;
				min-width: 45px;
				box-sizing: border-box;
				color: #ffffff;
				text-align: center;
			}

			.nomination-title
			{
				margin: 10px 40px 10px 10px;
				font-weight: bold;
			}

			.nomination-icon
			{
				position: absolute;
				right: 0;
				bottom: 0;
				margin: 5px;
			}
		}
	}

	&.section-members
	{
		background-color: @section-members-background-color;
		color: @section-members-text-color;
		text-align: center;

		article
		{
			text-align: center;
			padding: 10px 4px;
			box-sizing: border-box;
			min-height: 280px;
			vertical-align: top;

			.member-avatar
			{
				width: 128px;
				height: 128px;
				display: block;
				margin: auto;
				border-radius: 100%;
				background: #4c4c4c no-repeat center;
				background-size: cover;
			}

			.member-name
			{
				font-weight: bold;
				color: @section-members-name-text-color;
			}

			.member-info
			{
				font-size: .8em;
			}

			&.member-type-block
			{
				clear: left;
				min-height: 180px;

				.member-avatar
				{
					float: left;
				}

				.member-name,
				.member-info
				{
					text-align: left;
					margin-left: 150px;
				}
			}
		}
	}

	&.section-episodes
	{
		background-color: @section-episodes-background-color;
		color: @section-episodes-text-color;

		h2
		{
			text-align: center;
			margin: 8px;
		}

		.episodes-subtitle
		{
			text-align: center;
			white-space: pre-wrap;
		}

		p
		{
			margin: 4px 0;
		}

		.episode-streams-tabs
		{
			text-align: center;

			.episodes-stream-tab-title
			{
				display: inline-block;
				cursor: pointer;

				&.active-tab
				{
					font-weight: bold;
				}

				&:not(.active-tab)
				{
					opacity: .7;
				}
			}
		}

		.episodes-days-tabs
		{
			text-align: center;

			.episodes-days-tab-title
			{
				display: inline-block;
				cursor: pointer;

				&.active-tab
				{
					font-weight: bold;
				}
			}

			.episodes-days-tab-content
			{
				text-align: left;
				display: none;

				&.active-tab
				{
					display: block;
				}
			}
		}

		article
		{
			padding: 14px 0;
			border-top: solid 1px @horizontal-separator-color;

			h3
			{
				margin: 0;
			}

			.episode-time
			{
				float: left;
				width: 180px;
				text-align: right;
				font-size: 1.2em;
				font-weight: bold;
				color: @accent-color;
			}

			.episode-name
			{
				color: @accent-color;
				white-space: pre-wrap;
			}

			.episode-member-name
			{
				font-weight: bold;
			}

			.episode-member-info
			{}

			.episode-info
			{
				margin-left: 200px;
			}

			.episode-description
			{
				font-style: italic;
				margin-top: 15px;
			}
		}
	}

	&.section-partners
	{
		background-color: @section-partners-background-color;

		article
		{
			border-bottom: solid 1px @horizontal-separator-color;
			margin-bottom: 20px;

			&:last-child
			{
				border-bottom: none;
			}
		}

		.partner-logos
		{
			margin: 20px 0;
			text-align: center;

			.partner-logo
			{
				display: inline-block;
				max-width: 100%;
				width: 220px;
				height: 145px;
				padding: 20px;
				box-sizing: border-box;

				div,
				a
				{
					display: block;
					height: 100%;
					background: no-repeat center;
					background-size: contain;
				}

				img
				{
					max-width: 100%;
					max-height: 100%;
				}

				&.partner-logo-size-1x2
				{
					width: 440px;
				}
			}
		}
	}

	&.section-custom-schedule-blocks
	{
		background-color: @section-customScheduleBlocks-background-color;
		color: @section-customScheduleBlocks-text-color;

		.date-block
		{
			margin-bottom: 3em;
			border-radius: 5px;
			overflow: hidden;
			background: @background-color;

			.date-title
			{
				background: @section-default-header-background-color;
				font-size: 1.4em;
				padding: .2em .5em;
				color: @section-default-header-text-color;
			}

			.block-item
			{
				padding: .5em;
				line-height: 1.6em;

				.block-item-description
				{
					white-space: pre-wrap;
				}

				.block-item-date
				{
					font-weight: bold;
				}
			}

			.block-footer
			{
				margin: .5em;
				line-height: 1.6em;

				.block-footer-link
				{
					color: @text-color;
					text-decoration: none;
					font-weight: bold;

					&:hover
					{
						color: @accent-color;
					}

					&:after
					{
						content: '►';
						display: inline-block;
						color: @accent-color;
						font-size: 1.6em;
						vertical-align: top;
						margin-left: 4px;
					}
				}
			}
		}
	}
}

.btn-link
{
	display: inline-block;
	color: @text-color;
	text-decoration: none;
	font-weight: bold;
	line-height: 1.6em;
	margin: 5px 0;

	&:hover
	{
		color: @accent-color;
	}
}
.btn-link-arrow
{
	&:after
	{
		content: '►';
		display: inline-block;
		color: @accent-color;
		font-size: 1.6em;
		vertical-align: top;
		margin-left: 4px;
	}
}

footer
{
	display: block;
	text-align: center;
	font-size: .7em;
	background: @footer-background-color;
	color: @footer-text-color;
	padding: 25px 5px;
	box-sizing: border-box;
}

@media screen and (min-width: 801px)
{
	header
	{
		.landing-logo
		{
			max-width: 300px;
		}

		.landing-nav-links
		{
			a
			{
				line-height: @header-height;
			}
		}
	}

	main
	{
		.player-text-layer
		{
			&.player-registration-enter
			{
				font-size: 2em;
			}
		}
	}
}

@media screen and (min-width: 400px)
{
	main
	{
		.player-text-layer
		{
			&.player-registration-enter
			{
				h1
				{
					font-size: 1.8em;
				}
			}
		}
	}
	aside
	{
		&.section-exposition
		{
			article
			{
				display: inline-block;
				width: 170px;

				&.exposition-brand-link
				{
					width: 220px;
				}

				&.exposition-brand-preview
				{
					width: 260px;
				}
			}

			.exposition-brand-links
			{
				a
				{
					&.exposition-brand-webinar:after,
					&.exposition-brand-presentation:after
					{
						content: '';
						display: inline-block;
						width: 19px;
						height: 13px;
						margin-left: 10px;
						background-repeat: no-repeat;
						background-position: center;
						background-size: contain;
						vertical-align: middle;
					}
					&.exposition-brand-webinar:after
					{
						background-image: url('/player/images/icon-camera.svg');
					}
					&.exposition-brand-presentation:after
					{
						background-image: url('/player/images/icon-download-presentation.svg');
					}
				}
			}
		}

		&.section-members
		{
			article.member-type-inline
			{
				display: inline-block;
				width: @section-members-article-width;
			}
		}
	}
}

@media screen and (max-width: 800px)
{
	header
	{
	}

	aside
	{
		.landing-nav-section-text
		{
			padding: 5px;
		}

		&.section-episodes
		{
			article
			{
				.episode-time
				{
					float: none;
					width: auto;
					text-align: left;
				}

				.episode-info
				{
					margin-left: 0;
				}
			}
		}
	}
}