/*
search for /* @group to skip to next section
*/

/* @group commonly used *//*------------------------------------------------------------------------------- */

*
{
	margin: 0;
	padding: 0;
}

html
{ overflow-y: scroll; }


body
{
	font: 110%/1.4em normal;
	font-family: MariaHendriks, Georgia, serif;
	color: #231f20;
	background: #FFF;
}

a
{
	outline: none;
	color: #5d5053;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	transition: .4s;
}

.here>a,
a:hover
{ color: #ec2324; }

a img
{
	border: none;
	display: block;
}

img, fieldset { border: 0; }

img,
video
{
	max-width: 100%;
	height: auto;
}

ul { list-style: disc inside; }
ol { list-style: decimal inside; }

ul li,
ol li
{ padding-left: 1em; }

.wrapper
{
	width: 1100px;
	margin: 0 auto;
}

.wrapper>.content { padding: 10px 0; }

.clearfix:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

::selection { background: #ad1415; color: #FFF; }
::-moz-selection { background: #ad1415; color: #FFF; }

.wrapper>footer
{
	clear: both;
	border-top: 1px solid #ec2324;
	margin: 10px 0;
	font-size: 0.8em;
	text-align: center;
}

img.animation
{
	float: left;
	margin: 0.5em 20px 20px 0;
}

.content.error
{
	text-align: center;
	padding: 50px 0;
}

.warning { color: #BD0101; }

/* @end */
/* @group typography *//*------------------------------------------------------------------------------- */

@font-face
{
	font-family: MariaHendriks;
	src: url(../fonts/mh_roman.eot?) format('embedded-opentype'),
		 url(../fonts/mh_roman.svg#MariaHendriks) format('svg'),
	     url(../fonts/mh_roman.ttf)  format('truetype');
}

@font-face
{
	font-family: MariaHendriks;
	src: url(../fonts/mh_bold.eot?) format('embedded-opentype'),
		 url(../fonts/mh_bold.svg#MariaHendriks) format('svg'),
	     url(../fonts/mh_bold.ttf)  format('truetype');
	font-weight: bold;
}

h1, h2, h3, h4, h5, h6
{
	line-height: 1em;
	padding: 0.3em 0;
	font-weight: bold;
}

h1 { font-size: 2.1em; }
h2 { font-size: 1.9em; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.1em; }

p { padding: 0.4em 0; }

/* @end */
/* @group header *//*------------------------------------------------------------------------------- */

.wrapper>header
{
	font-size: 2.2em;
	padding: 10px 0 30px 0;
	text-align: center;
	position: relative;
	z-index: 2;
}

header a
{
	color: #231f20;
	text-decoration: none;
}

header h1 { padding: 0; }

header h1 a
{
	padding: 20px 0;
	display: block;
	color: #ec2324;
}

header ul
{
	list-style: none;
	font-weight: bold;
	font-size: 1.1em;
}

header ul li
{
	display: inline-block;
	position: relative;
	margin-left: -3px;
	padding: 0;
}

header li a
{
	display: block;
	padding: 0 35px;
}

header li a:after
{
	position: absolute;
	width: 3px;
	left: -3px;
	top: -0.1em;
	content: "";
	background: #000;
	height: 100%;
	padding: 0.1em 0;

}

header li:first-child a:after { display: none; }

header ul.secondary
{
	font-size: 0.55em;
	padding: 35px 0 10px 0;
}

header ul.secondary li a
{ padding: 0 13px; }

header ul.secondary li a:after
{
	width: 2px;
	left: -2px;
	padding: 0;
	top: 0;
}

/* @end */
/* @group flexslider *//*------------------------------------------------------------------------------- */

.flexslider
{
	position: relative;
	min-height: inherit;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.flexslider .slides { list-style: none; }

.flexslider .slides li
{
	display: none;
	padding: 0;
}

.flexslider .slides li:first-child { display: block; }

.flexslider .singer img
{
	display: none;
	float: left;
}
.flexslider .singer img:first-child { display: block; }

.flexslider .slides div
{
	position: absolute;
	left: 20px;
	bottom: 20px;
	right: 20px;
	max-width: 500px;
	padding: 10px 20px;
	background: rgba(255,255,255,0.8);
}

.flexslider .slides div :first-child { padding-bottom: 0; }

.flexslider .flex-control-paging
{
	list-style: none;
	text-align: center;
	padding: 20px 0 15px;
	position: relative;
	left: 0;
	width: 100%;
	clear: both;
}

.flexslider .flex-control-paging li
{
	display: inline-block;
	margin: 0 8px;
	font-size: 0;
}

.flexslider .flex-control-paging a
{
	width: 15px;
	height: 15px;
	background: #231f20;
	display: block;
	text-indent: -999em;
	border-radius: 100px;
	cursor: pointer;
}

.flexslider a.flex-active,
.flexslider .flex-control-paging a:hover
{ background: #ec2324; }

/* @end */
/* @group gallery *//*------------------------------------------------------------------------------- */

.gallery { margin-top: -30px; }

.gallery>article,
.gallery .container
{
	float: left;
	width: 800px;
	position: relative;
}

.gallery .container { margin-left: 20px; }

.gallery .container article
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	padding-bottom: 20px;
}

.gallery .control
{
	position: absolute;
	left: -10px;
	top: 22px;
	margin-top: -22px;
	width: 300px;
	height: 600px;
	z-index: 2;
	cursor: pointer;
	background: url(../images/css/pixel.gif);
}

.gallery .control span
{
	position: absolute;
	width: 45px;
	height: 45px;
	background: url(../images/css/slide_nav.png) no-repeat 0 -100px;
	top: 50%;
	margin-top: -22px;
	left: 0;
	display: none;
}

.gallery .control:hover span
{ display: block; }

.gallery .control.next
{
	left: auto;
	right: -10px;
}

.gallery .control.next span
{
	left: auto;
	right: 0;
	background-position: right -100px;
}

.thumbs
{
	list-style: none;
	float: right;
	margin: -5px 50px 0 20px;
	padding: 50px 0;
	position: relative;
	width: 202px;
}

.thumbs>span
{
	position: absolute;
	right: 0;
	top: 20px;
	width: 200px;
	height: 30px;
	background: url(../images/css/thumb_nav.png) no-repeat center 0;
	cursor: pointer;
}

.thumbs>span:hover
{ background-position: center -50px; }

.thumbs>span.next
{
	top: auto;
	bottom: 20px;
	background-position: center -100px;
}

.thumbs>span.next:hover
{ background-position: center -150px; }

.thumbs>div
{
	height: 525px;
	overflow: hidden;
}

.thumbs ul
{
	list-style: none;
	position: relative;
}

.thumbs ul { float: right; }

.thumbs li
{
	margin: 10px 0;
	display: block;
	height: 75px;
	overflow: hidden;
	padding: 0;
	border: 1px solid transparent;
	position: relative;
}

.thumbs li div
{
	width: 200px;
	height: 75px;
	display: inline-block;
}

.thumbs .here,
.thumbs li:hover
{ border-color: #ec2324; }

/* @end */
/* @group topics *//*------------------------------------------------------------------------------- */

.topics
{ margin: 20px 0; }

.topics a
{
	position: relative;
	float: left;
	width: 260px;
	height: 195px;
	margin: 0 10px 10px 0;
}

.topics img,
.topics a>div
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.topics a>div
{
	background: rgba(0,0,0,0.8);
	color: #FFF;
	padding: 15px;
	width: 230px;
	height: 165px;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	transition: .4s;
	opacity: 0;
}

.topics a:hover>div { opacity: 1; }

.topics a>div :first-child { padding: 0; }

.topic
{
	border-bottom: 1px solid #ec2324;
	padding-bottom: 10px;
}

a.back
{
	padding: 10px 0 20px 50px;
	display: block;
	position: relative;
	text-decoration: none;
}

a.back:before
{
	content: "";
	width: 45px;
	height: 45px;
	position: absolute;
	left: 0;
	top: 0;
	background: url(../images/css/slide_nav.png) no-repeat;
}

a.back:hover:before
{ background-position: 0 -100px; }

/* @end */
/* @group video *//*------------------------------------------------------------------------------- */

.video {
	position: relative;
}

.video.playing .video__btn {
	display: none;
}

.video__btn {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
  height: 60px;
  border: 2px solid #fff;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0);
  background: rgba(236,35,36,0.9);
  transition: 0.3s;
  transition-property: background-color, box-shadow;
	z-index: 2;
  left: calc(50% - 30px);
  top:  calc(50% - 30px);
	cursor: pointer;
	transform: scale(1.5);
}

.video__btn:hover,
.video__btn:focus {
  background-color: rgba(236,35,36,1);
  box-shadow: 0 0 5px rgba(0,0,0,0.8);
}

.video__btn::before,
.video__btn::after {
	position: absolute;
	display: block;
	content: "";
	border: 1px solid transparent;
  border-width: 12px 18px;
  border-left-color: #fff;
  left: calc(50% - 6px);
  top:  calc(50% - 12px);
}

/* @end */
/* @group responsive *//*------------------------------------------------------------------------------- */

@media screen and (max-width: 1200px) /*------------------------------------------------------------------------------- */
{
	.wrapper
	{
		width: 92%;
		padding: 0 4%;
	}

	.wrapper>header { font-size: 2em; }

	header ul.secondary li a:after
	{
		height: 50%;
		top:  25%;
	}

	.flexslider .slides div { font-size: 1em; }

	.gallery .container
	{
		width: 80%;
		margin-left: 0;
	}

	.gallery>article { width: 75%; }

	.gallery .container article
	{ width: 100%; }

	.gallery .control
	{
		height: 500px;
		width: 30%;
	}

	.thumbs { margin-right: 0; }

	.thumbs ul,
	.thumbs>span
	{
		width: 180px;
		overflow: hidden;
	}

	.thumbs img { max-width: 999em; }
}

@media screen and (max-width: 1050px) /*------------------------------------------------------------------------------- */
{
	.gallery .container { width: 75%; }
	.gallery>article { width: 70%; }

	.thumbs ul,
	.thumbs>span
	{ width: 145px; }
}

@media screen and (max-width: 800px) /*------------------------------------------------------------------------------- */
{
	.gallery > article,
	.gallery .container { width: 100%; }

	.gallery .control { height: 450px; }

	.gallery .control span
	{
		display: block;
		background-position: 0 0;
	}

	.gallery .control.next span { background-position: -100px 0; }

	.gallery .control:hover span { background-position: 0 -100px; }
	.gallery .control.next:hover span { background-position: -100px -100px; }

	.thumbs { display: none; }
}

@media screen and (max-width: 700px) /*------------------------------------------------------------------------------- */
{
	.wrapper>header
	{
		font-size: 1.4em;
		padding-bottom: 10px;
	}

	header h1 a { padding: 10px 0; }

	header li a { padding: 0 20px; }

	header ul.secondary { padding: 20px 0; }

	header ul.secondary li a { padding: 0 7px; }

	header li a:after,
	header ul.secondary li a:after
	{
		height: 50%;
		top:  20%;
	}

	.gallery .control { height: 350px; }

	img.animation
	{
		max-width: 100%;
		float: none;
		margin: 0;
	}

	.topics { text-align: center; }

	.topics a
	{
		float: none;
		display: inline-block;
		width: 300px;
		height: 225px;
	}

	.topics a>div
	{
		width: 270px;
		height: 195px;
		text-align: left;
	}

	.video__btn {
		transform: scale(1);
	}

}

@media screen and (max-width: 450px) /*------------------------------------------------------------------------------- */
{
	header h1 { font-size: 1.5em; }

	header ul li { display: block; }

	header li a:after,
	header ul.secondary li a:after
	{ display: none; }

	header ul.secondary { font-size: 0.7em; }

	header ul li a
	{
		padding: 2px 0;
		border-bottom: 1px solid #EEE;
	}

	.flexslider .slides div { display: none; }

	.flexslider .flex-control-paging li { margin: 0 5px; }

	.flexslider .flex-control-paging a
	{
		width: 12px;
		height: 12px;
	}

	.gallery .control
	{
		height: 250px;
		left: -10px;
	}

	.gallery .control.next
	{ right: -10px; }
}

@media screen and (max-width: 350px) /*------------------------------------------------------------------------------- */
{
	.gallery .control { height: 200px; }
}

/* @end */