* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
	margin: 0;
	padding: 0;
	
	/* font-size: 10px; */
	line-height: 1.4;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
}
*:focus {
	outline: none;
}
html {
	font-size: 10px;
	min-height: 100%;
}
body {
	min-height: 100%;

	background-color: #F7F7F7;
}
a {
	text-decoration: none;
}
/* ---------------------------------------------------------- */
h1 {
	font-size: 4rem;
}
h2 {
	font-size: 3rem;
	margin-top: 4rem;
	margin-bottom: 2rem;
}
h3 {
	font-size: 2.5rem;
	margin-top: 3.5rem;
	margin-bottom: 1.5rem;
}
h4 {
	font-size: 2rem;
	margin-top: 3rem;
	margin-bottom: 1rem;	
}
iframe {
	display: block;
	border: none;
}

/* ---------------------------------------------------------- */
/* .transition-easteregg { */
	/* transition: all 1.0s ease; */
	/* -moz-transition: all 1.0s ease; */
	/* -ms-transition: all 1.0s ease; */
	/* -webkit-transition: all 1.0s ease; */
	/* -o-transition: all 1.0s ease; */
/* } */




/* OVERLAY */

.overlay {
	position: fixed !important;
	z-index: 10000;
	top: 0;
	left: 0;
	right: 0;
	
	height: 0;
	
	overflow: hidden;
	
	opacity: 0;
	
	/* height of header */
	margin-top: 7rem;
}

.overlay.visible {
	opacity: 1;
	/* -height of header */
	height: calc(100% - 7rem);
}

.overlay-trailer-content,
.overlay-piksel-content {
	display: inline-block;
    margin: 0 25%;
    width: 50%;
	background-color: #000000;
	position: relative;
}

/* OVERLAY PIKSEL */
.overlay-piksel-content	{
	border: 1px solid #F25923;
	width: 75%;
	margin: 0 12.5%;
	height: calc(100vh - 12rem);
}
/*
.overlay-piksel-content {
	border: 1px solid #F25923;
	height: calc(50vw * 0.5625);
}
*/
.overlay-piksel-content iframe {
	height: 100%;
	width: 100%;
}
.overlay-piksel-content .close {
	background-color: #000000;
  border: 1px solid #f25923;
  border-radius: 2.5rem;
  font-size: 1.5rem;
  padding: 3px 5px 4px 4px;
  position: absolute;
  right: -1rem;
  top: -1rem;
	color: #ffffff;
}
.overlay-piksel-content .close:hover {	
    border: 1px solid #ffffff;
}

/* OVERLAY TRAILER */

.overlay-trailer-content .trailer-info {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	padding: 1.5rem;
}
.overlay-trailer-content.fade-out .trailer-info,
.overlay-trailer-content.fade-out .controls {
	opacity: 0;
}
.overlay-trailer-content .controls {
	position: absolute;
	bottom: 0;
	padding: 1.5rem;
}
.overlay-trailer-content .controls.left {
	left: 0;
}
.overlay-trailer-content .controls.right {
	right: 0;
}
.overlay-trailer-content .controls.right .control{
	margin-left: 1.5rem;
}
.overlay-trailer-content .control {
	border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 2.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    width: 5rem;
}
.overlay-trailer-content .control:hover {
	border-color: #F25923;
}
.overlay-trailer-content .control.close {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
}
.overlay-trailer .player {
	width: 100%;
	height: auto;
	max-height: calc(100vh - 7rem);
	display: block;
}

/* OVERLAY GALLERY */

.overlay-gallery .table {
	table-layout: fixed;
}
.overlay-gallery .table-cell {
	width: 100%;
}
.overlay-gallery .controls {
	position: absolute;
	top: 0;
	bottom: 0;
	
	width: 25%;
	
	opacity: 0.4;
}
.overlay-gallery .left {
	left: 0;
}
.overlay-gallery .right {
	right: 0;
}
.overlay-gallery .controls:hover {
	opacity: 0.8;
}
.overlay-gallery .controls .control {
	position: absolute;
	top: 50%;
	margin-top:-3.75rem;
	
	font-size: 7.5rem;
}
.overlay-gallery .right .control {
	right: 2rem;
}
.overlay-gallery .left .control {
	left: 2rem;
}
.overlay-gallery .close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	
	font-size: 2.5rem;
	
	opacity: 0.4;
}
.overlay-gallery .close:hover {
	opacity: 0.8;
}
.overlay-gallery-content {
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
    width: calc(100% - 14rem);
}
.overlay-gallery-content > img {
    max-height: 100%;
    max-width: 100%;
}


/* ---------------------------------------------------------- */


header {
	position: fixed;
	
	top: 0;
	left: 0;
	
	width: 100%;
	
	height: 10rem;
	line-height: 10rem;
	
	z-index: 10000;
}
header * {
	font-size: 1.8rem;
}
header img {
	display: inline-block;
	
	height: inherit;
	line-height: inherit;
	
	padding: 2rem 0;
}

header .container:first-child {
	height: 7rem;
	line-height: 7rem;
}

header .home-container {
	position: relative;
	float: left;
	
	height: 7rem;
	line-height: 7rem;
	
	margin-right: 3rem;
}
header .home {
	display: inline-block;
	
	height: inherit;
	line-height: inherit;
	
	margin-right: 0.5rem;
}
header .beta {
	position: absolute;
	text-transform: uppercase;
	bottom: 2rem;
	font-size: 1rem;
}

header .logo-container {
	position: relative;
	float: right;
	
	height: 3rem;
	line-height: 3rem;
}
header .logo-container span {
	float:right; 
	display: block;
	font-size: 1.2rem;
}
header .logo-container img {
	float: right;
	display: block;
	margin: 0;
	padding: 0.5rem 0 0.5rem 0.2rem;
}

header .logo {
	display: inline-block;
	
	height: inherit;
	line-height: inherit;
	
	margin-right: 0.5rem;
}

header nav {
	display: inline-block;
	
	height: 7rem;
	line-height: 7rem;
}

header nav a {
	position: relative;
	
	padding: 0 0.6rem;
	
	line-height: inherit;
}

header nav a span {
	padding: 0.4rem 0.6rem;
}
header nav a:hover span,
header nav a.active span {	
	color: #F25923;
	background: #ffffff;
}
header nav sup.new {
	position: absolute;
	
	right: -9px;
	top: -9px;
	
	font-size: 0.6em;
	font-weight: 700;
	text-transform: uppercase;
	
	padding: 3px;
	
	transform: rotate(30deg);
}
header > div > ul {
	z-index: 1;
	height: 7rem;
	line-height: 7rem;
}
header ul {
	float: right;
	position: relative;
	list-style-type: none;
}
header li.submenu {
	float: left;
	line-height: inherit;
	height: inherit;
}


header li.submenu > a {
	display: inline-block;
	
	margin-left: 2rem;

	line-height: inherit;
}
header li.submenu:first-child > a:first-child {
    margin: 0;
}

header li.submenu > a:hover {
	text-decoration: underline;
}
header .dialog {
	display: block;
	position: absolute;
	
	top: 100%;
	right: 0;
	left: 0;
	
	padding: 1rem;
	
	border-radius: 0 0 0.5rem 0.5rem;
	border-top: none;
	background-color: #F7F7F7;
}
header .dialog ul {
	float: none;
}
header .dialog a {
	display: inline-block;

	height: 5rem;
	line-height: 5rem;
	
	padding: 0 1.5rem;
}

header .dialog .spacer {
	padding-top: 3rem;
	border-top: 1px solid #f25923;
}
header .dialog a.active span,
header .dialog a:hover span {
	border-bottom: 1px solid #F25923;
}
header .dialog.dialog-hide {
	top: -1000px !important;
}
header .dialog input {
	display: block;
	width: 100%;

	padding: 0.5rem 1rem;
	margin: 1rem 0;
}

header .dialog p {
	padding: 0 1.5rem;
}
#login-dialog {
	left: auto;
}
#search-dialog p {
	padding: 0;
}

#menu span.fa,
#login span.fa,
#account span.fa,
#search span.fa {
	display: inline-block;
	padding-right: 1rem;
}
header span.fa-film {
	display: block;
	position: absolute;
}
#menu {
	display: none;
}

header .container.sub-navigation {
	height: 3rem;
}

header nav.sub-navigation {
	display: inline-block;
	
	height: 3rem;
	line-height: 3rem;
}

/* ---------------------------------------------------------- */
main {
	padding-top: 10rem;
	overflow: hidden;
	display: block;
	min-height: calc(100vh - 14rem);
}
/* ---------------------------------------------------------- */
footer {
	width: 100%;
}
footer .container > a {
	margin: 0 25px;
	display: inline-block;
}
footer .container > a img {
	display: inline-block;
}
footer nav {
	display: block;
	
	width: 100%;
	/* height: 5rem; */
}
footer nav a {
	display: inline-block;

	height: 5rem;
	
	padding-left: 3rem;
	padding-right: 3rem;
	
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 5rem;
	vertical-align: middle;
	color: #8c9096;
}
footer nav a:hover {
	color: #41464b;
}

.content-text {
	white-space: pre-wrap;
}
.content-text * {
	white-space: normal;
}
.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text p,
.content-text ol,
.content-text ul {
	margin: 0;
	margin-bottom: 0.5rem;
	padding: 0;
}
.content-text h1 {
	font-size: 2rem;
}
.content-text h2 {
	font-size: 1.9rem;
}
.content-text h3 {
	font-size: 1.8rem;
}
.content-text h4 {
	font-size: 1.6rem;
}
.content-text p {
	margin-bottom: 0.5rem
}

.content-text img {
	display: inline;
}

.content-text ul,
.content-text ol {
	margin-bottom:0.5rem;
	margin-left: 2rem;
}
.content-text ul li,
.content-text ol li {
	padding-left: 1rem;
}

.content-text strong,
.content-text b {
	font-weight: normal;
}
.content-text a {
	color: #F25923;
	text-decoration: none;
}
.content-text a:hover {
	text-decoration: underline;
}

/* LINK TO MORE */

.link-all {
	position: absolute;
	right: 0;
	top: 5rem;
	
	margin-right: 10%;
		
	font-size: 2.5rem;
	font-weight: lighter;
}
.link-all:hover {
	text-decoration: underline;
}



/* NEWS */

.news {
	width: 100%;
	/* height: 100%; */
}
.news .blind {
	display: block;
	width: 100%;
}
.news:hover .slide-text {
	max-height: 10rem; 
}
.news .text {
	padding: 0 2rem;
}
.news-detail .underline-container {
	width: 95%;
}

/* FUN */
.fun-content {
	position: relative;
}

.fun-single,
.fun-slide {
	width: 100%;
	height: 100%;
	
	cursor: pointer;
}
.fun-item .text {
	padding: 0 5%;
}
.fun-item:hover .slide-text {
	max-height: 10rem; 
}
.fun-controls .fun-arrow {
	position: absolute;
	z-index: 10;
	top: 0;
	bottom: 0;
	
	width: 4rem;
}
.fun-controls .fun-prev {
	left: 0;
}
.fun-controls .fun-next {
	right: 0;
}
.fun-arrow .control {
	position: absolute;
	top: 50%;
	
	width: 100%;
	
	margin-top: -2rem;
	
	font-size: 4rem;
	text-align: center;
	
	opacity: 0.4;
}
.fun-arrow:hover .control {
	opacity: 0.8;
}
div.fun-item {
	position: relative;
	overflow: hidden;
	
	width: 100%;
	height: 100%;
}
.fun-item .blind {
	display: block;
	width: 100%;
	height: 40rem;
}



/* ---------------------------------------------------------- */
.slider-list {
	position: relative;
	overflow: hidden;

	width: 100%;
	height: 35vw;
}
.slider-list.small {
	height: 27vw;
}
.slider-list .slick-list {
	width: 100%;
	height: 100%;
}
.slider-list .slick-list .slick-track {
	height: 100%;
}
div.slider-items {
	width: 100%;
	height: 100%;
}
.slider-list .container-detail {
	top: 1vw;
	height: 25vw;
}
.slider-list .container-detail .cover {
	width: auto;
	height: 25vw;
}
.slider-list .container-detail .content {
	left: 20vw;
	width: 59.5vw;
}
.slider-list .underline-container {
	height: auto !important;
	width: 95%;
}
.slider-list div.slider-controls div.slider-arrow {
	position: absolute;
	
	top: 0;
	width: 10%;
	height: 100%;
	
	text-align:center;
}
.slider-list .slider-arrow span {
	position: absolute;
	display: block;
	
	width: 100%;
	top: 50%;
	
	margin-top: -2.5rem;
	
	color: #ffffff;
	font-size: 5rem;
	font-weight: bold;
	z-index: 10;
}
.slider-list div.slider-controls div.slider-arrow:hover span {
	margin-top: -3rem;
	font-size: 6rem;
}
.slider-list div.slider-controls div.slider-prev {
	left: 0;
}
.slider-list div.slider-controls div.slider-next {
	right: 0;
}

/* ---------------------------------------------------------- */

.monsterteaser {
	height: 100%;
}
.monsterteaser.fit-parent {
	position: relative;
}
.monsterteaser:hover .slide-text {
	max-height: 9.7rem; 
}


/* ---------------------------------------------------------- */

div.detail .cover .trailer .play {
	position: absolute;
	top: 50%;
	margin-top: -3.5rem;
	left: 50%;
	margin-left: -2.5rem;
}
div.detail .cover .trailer {
	color: #FFFFFF;
	font-size: 7rem;
	
	cursor: pointer;
	
	opacity: 0.45;
	
	background-color: rgba(0, 0, 0, 0.75);
}
div.detail .cover .trailer:hover {
	opacity: 0.9;
}

/* ---------------------------------------------------------- */
div.search h1 {
	float:left;
	
	margin-top: 4rem;
	margin-bottom: 2rem;
		
	font-size: 3rem !important;
}
/* ---------------------------------------------------------- */
div.account h1 {
	float:left;
	position: relative;
	
	margin-top: 4rem;
	margin-bottom: 2rem;
		
	font-size: 3rem !important;
	color: #606060;
}
div.account a {
	display: block;
	
	margin-left: 1.5rem;
	
	font-size: 2rem;
	color: #F25923;
}
div.account a:hover {
	text-decoration: underline;
}
/* ---------------------------------------------------------- */
div.legal h1 {
	float: none;
	display: block;
	
	margin-top: 4rem;
	margin-bottom: 2rem;
		
	font-size: 3rem;
	color: #606060;
}

/* ---------------------------------------------------------- */
div.gallery {
	position: relative;
}
div.gallery .gallery-items {
	width: 100%;
	
	padding-left: 4rem;
	padding-right: 4rem;
}
div.gallery .gallery-item {
	position: relative;
	overflow: hidden;
	
	margin-left: 1rem;
	margin-right: 1rem;
	
	height: 30rem;
	
	/*border-radius: 0.5rem;*/
}
div.gallery .gallery-item:hover {
	cursor: pointer;
}
div.gallery .gallery-controls .gallery-arrow {
	position: absolute;
	top: 0;
}
div.gallery .gallery-controls span {
	display: block;
	position: relative;
	
	top: 50%;
	
	width: 100%;
	
	margin-top: -2.5rem;
	
	font-size: 5rem;
	color: #F25923;
}
div.gallery .gallery-controls .gallery-prev {
	left: 0;

	width: 4rem;
	height: 100%;
}
div.gallery .gallery-controls .gallery-prev span {
	text-align: left;
}
div.gallery .gallery-controls .gallery-next {
	right: 0;
	
	width: 4rem;
	height: 100%;
}
div.gallery .gallery-controls .gallery-next span {
	text-align: right;
}
/* ---------------------------------------------------------- */

.cooperation.detail img.brand {
	width: auto !important;
	position: absolute;
	
	right: 10%;
	top: -18rem; 
	
	width: 10rem;
	height: 10rem;
}
.cooperation.detail img.brand-teaser {
	width: auto !important;
	position: absolute;
	
	left: 10%;
	top: -30rem; 
	
	width: 25rem;
	height: 25rem;
}
.cooperation.detail img {
	width: 100%;
	display: block;
}
.cooperation.detail ol, .cooperation.detail ul {
	padding-left: 20px;
}


/* ---------------------------------------------------------- */
/* breakpoint definition - desktop */
@media (min-width: 1301px) {
	.slider div.slider-controls div.slider-arrow {
		width: 10%;
	}
}

/* breakpoint definition - desktop lowres */
@media (max-width: 1300px) and (min-width: 1008px) {

	.slider div.slider-controls div.slider-arrow {
		width: 10%;
	}

	/*
	.overlay-piksel-content {
		width: 65%;
		margin: 0 17.5%;
		height: calc(65vw * 0.5625);
	}
	*/
	
	.overlay-trailer-content {
		width: 65%;
		margin: 0 17.5%;
	}
}

/* breakpoint definition - tablet */
@media (max-width: 1007px) and (min-width: 600px) { 
	
	.slider div.slider-controls div.slider-arrow {
		width: 5%;
	}

	.link-all{
		margin-right: 5%;
	}
	
	div.detail .text .slide-text:hover {
		max-height: 75rem;
	}

	.cooperation.detail img.brand {
		right: 5%;

		top: -16rem; 
		width: 8rem;
		height: 8rem;
	}	

	.slider-list .underline-container {
		height: auto !important;
		width: 95%;
	}
	.slider-list .container-detail .content {
		left: 22vw;
	}
	
	/*
	.overlay-piksel-content {
		width: 75%;
		margin: 0 12.5%;
		height: calc(75vw * 0.5625);
	}
	*/
	
	.overlay-trailer-content {
		width: 75%;
		margin: 0 12.5%;
	}
}

/* breakpoint definition - menu */
@media (max-width: 870px) {
	/* hide nav */
	header nav {
		display: none;
	}
	/* display menu */
	#menu {
		display: block;
	}

	.slider-list .underline-container {
		height: auto !important;
		width: 85%;
	}

	.news-detail .underline-container {
		width: 85%;
	}
	
	.overlay-content {
		width: 90%;
		margin: 0 5%;
	}

	/*	
	.overlay-piksel-content {
		height: calc(100vh - 10rem);
	}
	*/
	
	.overlay-gallery .left .control {
		left: 1rem;
	}
	
	.overlay-gallery .right .control {
		right: 1rem;
	}

}

/* breakpoint definition - mobile */
@media (max-width: 599px) {
	
	.link-all {
		position: relative;
		top: auto;
		right: auto;
		
		margin: 0;
	}

	header {
		height: 8rem;
		line-height: 8rem;
	}
	
	header .container:first-child {
		height: 8rem;
		line-height: 8rem;
	}
	
	header .home-container {
		float: none;
		height: 5rem;
		line-height: 5rem;
		text-align: center;
		margin: 0;
	}

	header .beta {
		bottom: 1rem;
	}
	
	header .home {
		display: inline-block;
		margin-right: 0.5rem;
	}
	
	header img {
		padding: 1rem 0;
	}
	
	header > div > ul {
		height: 3rem;
		line-height: 3rem;
	}
	
	header ul,
	header > div > ul	{
		float: none;
		text-align: center;
		position: static;
	}

	header li.submenu {
		display: inline-block;
		float: none;
	}
	
	header li.submenu:first-child > a:first-child {
		margin: 0 1.5rem;
	}
	header li.submenu > a {
		margin: 0 1.5rem;
	}
	
	main {
		padding-top: 13rem;
	}
	
	
	
	#menu {
		display: inline;
	}

	header .account-label {
		display: none;
	}

	.slider div.slider-controls div.slider-arrow {
		width: 5%;
	}
	
	div.detail .text .description.slide-text:hover {
		max-height: 100rem;
	}

	.cooperation.detail img.brand {
		right: 5%;

		top: -16rem; 
		width: 8rem;
		height: 8rem;
	}	
	
	.slider-list {
		height: 35vh;
	}
	.slider-list .container-detail {
		height: auto !important;
	}
	.slider-list .underline-container {
		height: auto !important;
		width: 80%;
	}
	.slider-list .container-detail .cover {
		display: none;
	}
	.slider-list .container-detail .content {
		right: 16px;
		left: 16px;
	}

	.slider-list.small {
		/* height: 5rem;; */
		height: auto !important;
	}
	.slider-list.small .bg-image {
		display: none;
	}
	.slider-list.small .share {
		/* bottom: 0; */
		top: 0.5vh;
		right: 5%;
	}

	.news-detail .underline-container {
		width: 80%;
	}
	
	/*
	.overlay-piksel-content	{
		height: calc(100vh - 12rem);
	}
	*/
	
	.overlay {
		/* height of header */
		margin-top: 8rem;
	}
	
	.visible {
		/* -height of header */
		height: calc(100% - 8rem);
	}
	
	.overlay-trailer .player {
		/* -height of header */
		max-height: calc(100vh - 8rem);
	}
}

/* breakpoint definition - two lines */
@media (max-width: 520px) {
	
	header * {
		font-size: 1.6rem;
	}
	
	header li.submenu:first-child > a:first-child {
		margin: 0 1.25rem;
	}
	header li.submenu > a {
		margin: 0 1.25rem;
	}
	
	#menu {
		display: inline;
	}
	
	#login-dialog {
		left: 0;
	}
	
	header .logo-container span {
		font-size: 1rem;
	}
	
	/*
	.overlay-piksel-content	{
		height: calc(100vh - 12rem);
	}
	*/

	footer .container > a {
		margin: 0 15px;
	}
}

/* breakpoint definition - mobile extra small */
@media (max-width: 390px) {
	
	header * {
		font-size: 1.3rem;
	}
	
	header li.submenu:first-child > a:first-child {
		margin: 0 1rem;
	}
	header li.submenu > a {
		margin: 0 1rem;
	}

	header .sub-navigation {
		display: none;
	}
		
	main {
		padding-top: 10rem;
	}
	
	div.slider div.slider-controls div.slider-arrow {
		width: 8%;
	}
	
	.monsterteaser .description {
		display: none;
	}
	
	.monsterteaser .text {
		padding: 0 5%;
	}
	
	/* .monsterteaser .text .title { */
		/* font-size: 2rem; */
	/* } */
	
	h2 {
		font-size: 2rem;
	}
	
	/* .title, */
	.info,
	.button	{
		font-size: 2.5rem;
	}
	
	.link-all {
		font-size: 1.5rem;
	}

	.cooperation.detail img.brand {
		right: 2%;

		top: -14rem; 
		width: 6rem;
		height: 6rem;
	}	
	.cooperation.detail img.brand-teaser {
		left: 5%;
		top: -20rem; 
		
		width: 15rem;
		height: 15rem;
	}
	
	.overlay-trailer-content {
		width: 100%;
		margin: 0;
	}
	
	footer .container > a {
		margin: 0 10px;
	}
	
	footer nav a {
		font-size: 1.25rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}