/* html5doctor.com/html-5-reset-stylesheet/ */

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ========= CUSTOM RESET ======= */
figure {
	margin: 0;
	
}



/* ========= BASICS ======= */


/*prevents collapsing*/

body,
html {
	height: 100%;
	width: 100%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	/* Needed for mobile WebKit */
	-moz-box-sizing: border-box;
	/* Needed for Firefox */
	box-sizing: border-box;
}


/* Optional min width */

html {
	min-width: 314px;
}

body {
	color: #fff;
	/* Background image is centered vertically and horizontally at all times */
	
	background-position: center center;
	/* Background image doesn't tile */
	background-repeat: no-repeat;
	/* Background image is fixed in the viewport so that it doesn't move when
	 the content's height is greater than the image's height */
	
	background-attachment: fixed;
	/* This is what makes the background image rescale based
	 on the container's size */
	
	background-size: cover;
	/* Set a background color that will be displayed
	 while the background image is loading */
	
	background-color: #000;
	font-style: normal;
	font-weight: 300;
	
	font-smoothing: always; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* corrects too fat fonts on mac*/

}

img {
	max-width: 100%;
}

a,
a:link,
a:visited a:hover,
a:active {
	text-decoration: none;
	outline: 0;
}

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.hidden {
	display: none !important;
}

.container {
	position: absolute;
	z-index: 5;
	left: 50%;
	margin-left: -31.25rem;
	/* 500/16 */
	
	top: 0.3125em;
	/* 5/16 */
	
	width: 61.5rem;
	/* 984/16 */
	
	height: 98vh;
	/*	background-color: aquamarine;*/
}

.dark {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background-color: black;
	opacity: 0.5;
}

.inline {
	display: inline;
}

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

.logobackground {
	position: fixed;
	margin-top: 0px;
	text-align: center;
	top: 0;
	left: 0%;
	right: 0%;
	z-index: 10;
	height: 170px;
	background-color:#000000;
}

.logotitle {
	position: fixed;
	margin-top: 32px;
	text-align: center;
	top: 0;
	left: 0%;
	right: 0%;
	z-index: 15;
}

.logoframe {
	/*    // wird 100%, wenn die Grafik*/
	/*    // höher als breit ist*/
	
	vertical-align: middle;
	overflow: hidden;
	z-index: 15;
	/*	background-color: yellow;*/
}

.logo {
	display: block;
	/*  text-indent: -9999px;*/
	
	height: 3.38rem;
	/* 54/16 */
	
	width: 19.8125rem;
	/* 317/16 */
	
	background: url(/static/img/anorak_logo.svg);
	background-size: 317px 54px;
	background-repeat: no-repeat;
	margin: 0 auto;
}

.dropdown_open {
	display: inline-block;
	text-indent: -9999px;
	height: 1.3125rem;
	/* 21/16 */
	
	width: 1.3125rem;
	/* 21/16 */
	
	background: url(/static/img/dropdown_open.svg);
	background-size: 21px 21px;
	margin: 0 auto;
}
/* ========= DIRECTOR BOX ======= */

.dirboxframe {
	position: fixed;
	display: table;
	border: 1px solid #fff;
	margin-top: 6.1875rem;
	/* 99/16 */
	
	width: 22.1875rem;
	/* 355/16 */
	
	height: 2.375em;
	/* 38/16 */
	
	left: 50%;
	z-index: 15;
	margin-left: -10rem;
	/* half width */
	/*	margin-left: 21.25rem;*/
	/* 340/16 */
	/*background-color: orange;*/
}

.dirbox {
	display: table-cell;
	border-right: 1px solid #fff;
	width: 19.9rem;
	/* 315/16 */
	
	vertical-align: top;
	/*    background-color: coral;*/
}

.dirbox h3 {
	line-height: 2.3125rem;
	/* 37/16 */
}

.dirlistswitch {
	height: 100%;
	width: 2.375rem;
	/* 38/16 */
	
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	/*    background-color: peachpuff;*/
}

.dirlistswitch svg {
	height: 1.3125rem;
	/* 21/16 */
	
	width: 1.3125rem;
	/* 21/16 */
	/*    background-color: #ff0000;*/
}
/* ========= REVOLVER ======= */

#menu {
	display: none;
	width: 32rem;
	/* 600/16 */
	
	overflow: hidden;
	height: 41rem;
	position: absolute;
	top: 0;
	z-index: 30;
	left: 50%;
	margin-left: -16rem;
	margin-top: 10rem;
	/* 160/16 */
	/*background-color: coral;*/
}

#menu a {
	text-decoration: none;
	display: block;
}

#mover {
	position: absolute;
	left: 50%;
	margin-left: -16rem;
	width: 32rem;
	height: 12.5rem;
	/* 360/16 */
}

#mover div {
	padding: 0 1.875rem;
	/* 30/16 */
	/*background-color: red;*/
}

#menu .hover {
	color: #ffffff;
	margin-left: -0.3125rem;
	/* 5/16 */
}

#menu ul {
	font-size: 1.5rem;
	/* 24/16 */
	
	line-height: 1.5rem;
	/* 48/16 */
	
	font-weight: 100;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	text-align: center;
}

ul li {
	text-align: center;
}
/*Gradient*/
/* ========= FOOTER ======= */

#pagefooter {
/*	background-color: cornflowerblue;*/
	display: table;
	position: fixed;
	bottom: 0;
	left: 0px;
	width: 100%;
	height: 4.5rem;
/*		adjust margin-bottom HERE*/
	/*	height: 4.0rem;*/
	/* 100/16 */
	
	-webkit-transition: background-color 0.7s ease;
	-moz-transition: background-color 0.7s ease;
	-o-transition: background-color 0.7s ease;
	transition: background-color 0.7s ease;
/*	background-color: none;*/
}

#pagefooter:hover {
	background-color: #000000;
/*	background-color: #000000;*/
}

#innerpagefooter {
	display: table-cell;
	/* 984/16 */
	
	text-align: center;
	/*	->>> teasertext*/
/*		background-color: coral;*/
}

.centered {
	position: relative;
	display: inline-block;
	width: 90%;
	height: 1rem;
/*	padding: 0,00000001rem;*/
/*		background-color: orchid; */
}

nav {
	/*	margin: 3.5% 0 0 0;*/
	/*	padding: 3.5% 0 0 0;*/
}

.footernav {
	display: table;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
/*	top: 90%;*/
	/*	width: 100%;*/
	/*	border-top: 10px solid white;*/
	padding: 0.4rem 0;
/*	background-color: darkseagreen;*/
	border-collapse: collapse;
}

.footerrow {
/*	width: 100%;*/ 
/*	background-color: lawngreen;*/
	display: table-row;
	line-height: 2.2rem;
}

.fr a  {
	padding: 0rem 2.9rem 0rem 2.9rem;
}

.anorakprod a {
	padding-left: 0;
}

.legal a{
/*	margin-right: 3px;*/
	padding-right: 0px;
}

.footerline {
	/*border-top: 1px solid #FFF; */
	max-width: 40rem;
	/*	height: 1rem;*/
	margin: 0 auto;
	/*	margin-top: 0;*/
}


.email_btn, .phone_btn, .legal_btn {
	display: none;
}


/* ========= INFOBOX ======= */

.teaser {
	position: absolute;
	bottom: 4rem;
	right: 50%;
	transform: translateX(51%);
	/*	background-color: dodgerblue;*/
}

.teaser img {
	position: absolute;
	left: 0%;
	top: 30%;
	transform: translateY(-29%);
}


#infobox {
	margin-left: 5.1rem;
	width: 420px;
	float: left;
	z-index: 5;
	text-align: left;
}

#infobox p {
/*	color: red;*/
}

.infotext:after {
	content: " ";
}

.btn {
/*	display: inline-block;*/
	float: right;
	
	position: absolute;
	top: 1.5rem;
	/* 22/16 */
	
	right: 0rem;
	border: 1px solid #747474;
	/*background-color: red;*/
	
	padding: 0rem 0.375rem;
	/* 0/16 */
	/* 6/16 */
	
	line-height: 1.6rem;
	margin-left: 0rem 0.375rem 0rem 0.5rem;
}


#info_btn {
	/*	display: inline-block;*/
	/*	position: absolute;*/
	/*	top: 1.5rem;*/
	/* 22/16 */
	display: inline;
	border: 1px solid #FFF;
	/*background-color: red;*/

	padding: 0.275rem 0.5em ;
	/* 0/16 */
	/* 6/16 */

	line-height: 1.6rem;
	/*	margin-left: 1rem;*/
	margin-top: 1rem;
/*	margin-left: 1.5rem;*/
}

.info {
	/*margin-left: 1.25rem;*/
	margin-top: 0.3125rem;
}
.infologobtn {
	display: inline-block;
	position: absolute;
	top: 1.5rem;
	right: 0rem;
	border: 1px solid #747474;
	padding: 4px 4px 0px 4px;
	margin-left: 0rem 0.375rem 0rem 0.5rem;
}

#info_btn:hover {
	border: 1px solid #747474;
}

/* 20/16 */
/* 5/16 */

.ibtn {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: yellow;
}

.btn:hover,
.bbtn:hover {
	border: 1px solid #fff;
}


/* ========= DIRECTOR HERO ======= */

.dirhero {
	position: absolute;
	top: 52%;
	right: 0;
	left: 0;
	width: 100%;
	height: 3.75rem;
	/* 60/16 */
	
	margin-top: -3.0625rem;
	text-align: center;
	z-index: 3;
}
/* ========= DETAIL ======= */

.btn_play {
	display: block;
	text-indent: -9999px;
	height: 98px;
	width: 98px;
	background: url(/static/img/btn_play_06.svg);
	background-size: 98px 98px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -3.0625rem;
	/* 49/16 */
	margin-top: -3.0625rem;
	/* 49/16 */
}

.mvi_info {
    position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -16rem;
	/* 49/16 */
	margin-top: 0rem;
	width: 48px;
	padding-top: 42px;
}



.mvinfo {

	display: table;
	width: 513px;
/*	height: 74px;*/
	margin: 24px auto;
	padding: 0px;
}


.mvi_h {
	display: table-row;
	line-height: 40px;
}

.mvinfo p {
	padding-top: 6px;
}


/* ========= FILMTILES ======= */

.filmtiles {
	position: absolute;
	top: 100%;
	left: 0%;
	width: 100%;
	margin-top: -100px;
	height: 500px;
}

.projectcard2 {
	float: left;
	width: 491px;
	height: 276px;
	background-color: darkgrey;
	border: 0px solid #fff;
}

.projectcard3 {
	float: left;
	width: 327px;
	height: 185px;
}

.projectcard2_front {
	display: none;
	position: absolute;
	top: 1;
	left: 1;
	width: 491px;
	height: 276px;
	/* z-index: 2; */
}

.projectcard2_back {
	display: none;
	position: absolute;
	top: 1;
	left: 1;
	width: 491px;
	height: 276px;
	background-color: black;
	opacity: 0.5;
	/* z-index: 1; */
}

.pc_play {
	margin: 0 auto;
	width: 12.63%;
	padding-top: 62px;
/*	background-color: darkgreen;*/
}

.pc_btn_play {
	display: block;
	text-indent: -9999px;
	height: 62px;
	width: 62px;
	background: url(/static/img/pc_btn_play.svg);
	background-size: 62px 62px;
	/*	margin-bottom: 10px;*/
	/*	margin-bottom: 16.12%;*/
	margin-bottom: 0.625rem;
	/* 10/16 */
/*	margin-top: 200px;*/
}

.pcinfo {
	display: table;
	table-layout: fixed;
	width: 100%;
	width: 415px;
	margin: 0.3125rem auto;
	overflow: hidden;
}

.pci_h {
/*	line-height: 2.625rem;*/
	/* 42/16 */
	line-height: 200%;
	height: 100%;
}


.pcinfo .col2 {
	overflow: hidden;
}

.tr {
	display: table-row;
}

.td {
	display: table-cell;
	}


.pcinfo p {
	line-height: 120%;
	/*	padding: 4rem 0.r625em 0.3125rem;*/
	/* 5/16 */
	/* 10/16 */
	/* 5/16 */
}

.tr .title {
/*	height: 500%;*/
/*	height: 100px;*/
/*	margin-top: 100px;*/
	padding-top: 1%;
}

/* hack gleicher Zeilenabstand*/
.tr:nth-child(3) {
	line-height: 2rem;
}


.col1, .col2, .col3, .col4 {
	display: table-cell;
/*	width: 33.333333%;*/
	width: 10%;
	text-align: center;

}

#cv_download_btn{
	display: inline;
	border: 1px solid #FFF;
	line-height: 1.6rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
	text-align: center;
	padding: 0.5rem 1rem;
}

/* ========= SELECTED PROJECTS ======= */

#selected {
	position: absolute;
	top: 100%;
	left: 0%;
	float: left;
	width: 61.5rem;
	/* 984/16 */
	
	height: 32rem;
	/*400/16 */
	/* MR */
	
	margin-top: 35.5625rem;
	/* 553/16 */
}

#selected h4 {
	font-size: 1.5rem;
	/* 24/16 */
	
	text-align: center;
	padding-bottom: 1rem;
	font-weight: 100;
}

.selecteddescription p {
	display: inline-block;
	padding: 0.9375rem;
	/* 15/16 */
}

.selecteddescription {
	width: 61.25rem;
	/* 980/16 */
	background-color: black;
	float: left;
}

.selected_front,
.selected_back {
	position: absolute;
	/*      top: 100%;*/
	
	left: 1;
	/*	margin-top: -22.5rem;*/
	/*	360/16 */
	
	margin-bottom: 9rem;
	/* 160/16 */
	
	height: 23.875rem;
	/* 350/16 */
	/* MR */
	
	width: 61.5rem;
	/* 984/16 */
}

.selected_front {
	z-index: 0;
}

.selected_back {
	background-color: black;
	opacity: 1;
	z-index: -1;
}

.centertb {
	display: table-cell;
	width: 60.625rem;
	/* 970/16 */
	/*	    background-color: purple;*/
	
	height: 3.125rem;
	/* 50/16 */
	
	text-align: center;
}

#cv_download_btn{
	text-align: center;
/*	margin: 0 auto;
	margin-left: -150px;*/
	padding: 0.5rem 0.5rem;
}

.bbtn {
	display: inline-block;
	border: 1px solid #A4A4A4;
	line-height: 40px;
	/*	background-color: crimson;*/
	
	padding: 0px 10px;
	margin: 20px auto 0px;
}

#detailborderbottom {
	position: absolute;
	top: 100%;
	left: 0%;
	float: left;
	width: 61.5rem;
	/* 984/16 */
	
	height: 3rem;
	/*400/16 */
	
	margin-top: 34.5625rem;
	/* 553/16 */
}
/* ========= CONTACT ======= */

#adr01,
#adr02 {
	width: 491px;
	float: left;
	margin-top: 198px;
	margin-bottom: 35px;
	padding: 15px;
	line-height: 34px;
}

#adr01 {
	text-align: right;
	/*	background-color: orange;*/
}

#adr02 {
	text-align: left;
	/*	background-color: lemonchiffon;*/
}

.team {
	width: 327px;
	height: 200px;
	float: left;
	text-align: center;
	/*line-height: 30px;*/
	
	padding: 24px 5px 24px;
}

.team h4 {
	padding-bottom: 4px;
}

.team h5 {
	line-height: 30px;
	padding-bottom: 7px;
}

.team span {
	line-height: 28px;
}


.radicalbox {
	width:150px;
	height:42px;
	cursor: pointer;
	background: url("/static/img/CP_RM.png");
	background-repeat: no-repeat;
	background-size:cover;
	clear: both;
	margin: 0 auto;
	margin-top:25px;
}
.radicaltopmargin {
	width:214px;
	height:1px;
	clear: both;
	margin: 0 auto;
}
.radicalmargin {
	width:214px;
	height:150px;
	clear: both;
	margin: 0 auto;
}
.contact_btn {
	width: 140px;
	margin: 0 auto;
	/*	background-color: burlywood;*/
}

.contact_mail,
.contact_in,
.contact_dl {
	width: 40px;
	float: left;
	margin: 16px 0px 10px;
}

.contact_in,
.contact_dl {
	margin-left: 10px;
}

.team:last-child {
	/*	background-color: aquamarine;
	
	margin-bottom: 9rem;*/
}
/*==========LEGAL==============*/

.legalhead {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	width: 491px;
	margin-top: 198px;
	margin-bottom: 35px;
	padding: 15px;
}

.legalhead adress {
	padding-bottom: 1rem;
}

#smallprint {
	width: 65%;
	margin: 0 auto;
	text-align: center;
	margin-top: 1rem;
	margin-bottom: 9rem;
	margin-left: auto;
	margin-right: auto;
}

#legalborderbottom {
	width: 61.5rem;
	/* 984/16 */
	
	height: 3rem;
	/*400/16 */
	
	margin-top: 3rem;
	/* 553/16 */
}
#p404 {
	position:absolute;
	text-align:center;
	top:5px;
	right:1px;
	left: 1px;
	width: 70%;
	float: left;
	margin-left: auto;
	margin-right: auto;
}
.p404button {
	display: inline;
	border: 1px solid #FFF;
	/*background-color: red;*/

	padding: 0.275rem 0.5em ;

}
/* ========== SPECIAL PRODUCTION =========== */

.special_bg {
	background-color: #000;
}

.special {
	position: relative;
	max-width: 986px;
/*	background-color: #3E3E3E;*/
	margin-top: 198px;
}

.special_btn_play {
	height: 48px;
	width: 48px;
	background: url(/static/img/pc_btn_play_small.svg);
	background-size: contain;
	background-repeat: no-repeat;

	margin-left: 241px;
	margin-top: 136px;
	transform: translateX(-50%);
	transform: translateY(-50%);
	}


#description{
	width: 482px;
	float: right;
}
#description2 {
	width: 482px;
	float: right;
}

#description h1 {
	text-transform: uppercase;
}

.gallery {
	width: 100%;
	float: left;
	margin-top: 1.875rem;
	margin-bottom: 1.875rem;
}

.gallery img {
	width: 33.333333%;
	height: auto;
	float: left;
}

.credits {
/*	clear: both;*/
/*	display: table;*/
/*	border-collapse: collapse;*/
	float: right;
	width: 50%;
/*	background-color: gold;*/
	}


.credits, table, tr, td {
/*    border: 1px solid red;*/
    border-collapse: collapse;
}

.role {
	width: 10.5rem;
/*	background-color: fuchsia;*/
}

.credits td:nth-child(2) { text-transform: uppercase; }

.selectedvideo {
	float: left;
	width:482px;
	height:272px;

}

#special_btn {
	width: 100%;
	text-align: center;
	margin-bottom: 160px;
	margin-top: 60px;
}
.cspecial_btn {
	width: 100%;
	text-align: center;
	margin-bottom: 160px;
	margin-top: 60px;
	transform: translateY(30px);
}

.externallink {
	margin-right:-37px;
	margin-left:10px;
	border: 0px;
	background-color:black;
	transform: translateY(-15px);
}

.awardsbox {
	clear: both;
	margin: 0 auto;
	width: 80%;
	padding-bottom:150px;
	padding-top:5px;

}


.special #info_btn{
	text-align: center;
/*	margin: 0 auto;
	margin-left: -150px;*/
	padding: 0.5rem 2rem;
}



.awards {
	width: 100%;
	text-align: center;
	margin-top: 4rem;

}

.awardlogo {
	width: 50px;
	height: auto;
	margin: 0 0.75rem ;
/*	margin: 2rem, 4rem;*/
/*	float: left;*/
}

img.awardlogo  {
/*		margin: 2rem, 4rem;*/
/*    display: block;*/

/*    margin-left: auto;*/
/*    margin-right: auto*/
}

.selectedproject_close {
	cursor: pointer;
	position: fixed;
	top:25px;
	z-index:999;
	right:30px;
	height: 40px;
	width: 40px;
	background: url(/static/img/player/close_default.png);
	background-size: 40px 40px;
	display: inline-block;
}



/* ========= ANORAK PRODUCTIONS ======= */

.fadedScroller_fade {
    content:'';
	top:1px;
	left:1px;
	right:1px;
    height: 300px;
	background-color: red;
	background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 0) 100%);
    position: fixed;
}

#fullpage {
/*	width: 100%;*/
/*	height: 100%;*/
/*	padding-top: 0;*/
/*	position: relative;*/

}

.ap {
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto auto;
    border: 0px solid transparent;
/*		text laeuft über*/
/*		height: 66vh;*/
/*Bild wird aufgespreizt*/
		min-height: 66vh;
}


.btn_ap_i_close {
	cursor: pointer;
	position: absolute;
	top:10%;
	bottom:90%;
	left:90%;
	right:10%;
	height: 40px;
	width: 40px;
	background: url(/static/img/player/close_default.png);
	background-size: 40px 40px;
	display: inline-block;
}

.ap_info {
	position:relative;
	border: 1px solid transparent;
	display:none;
	height: 100%;
	/*background-color:rgba(0, 0, 0, 0.5); */
}

.ap_i {
	position:relative;
	cursor: pointer;
	display: block;
	min-height: 66vh;
	border: 1px solid transparent;
	/*margin: 4rem auto 0; */
}

.ap_i:hover {
	cursor: pointer;
}


.btn_ap_i {
	height: 62px;
	width: 62px;
	position: absolute;
	top:50%;
	bottom:50%;
	left:50%;
	right:50%;
	transform: translateX(-50%);
	background: url(/static/img/sp_infobutton.png);
	background-size: 62px 62px;
	display: inline-block;
}

.btn_play_ap {
	height: 64px;
	width: 64px;
	background: url(/static/img/pc_btn_play.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 64px 64px;
	display: inline-block;
	margin: 16rem auto 0;
}

.btn_link_ap {
	height: 48px;
	width: 100px;
	display: block;
	border: 1px solid #FFF;
	/*background-color: red;*/
	font-family: "Sabon LT W02 Roman", Garamond, "Times New Roman", serif;
	text-transform: uppercase;
	font-size: 1.2rem;
	padding: 0.5em ;
	/* 0/16 */
	/* 6/16 */

	line-height: 1.6rem;
	/*	margin-left: 1rem;*/
	margin-top: 1rem;
	margin: 16rem auto 0;
}
.apinfo {
	max-width:60rem;
	margin: 2rem auto 5rem;
}

.ap_awards {
	max-width: 60rem;
	margin-bottom: 140px;
}

.ap_h {
	display: table-row;
	line-height: 40px;
}

.apdesc  {
	line-height: 34px;
}

.awardlogo_ap {
	width: 50px;
	height: auto;
	margin: 2rem 0.75rem 0;
/*	margin: 2rem, 4rem */
}


/* ========= MEDIA QUERIES ======= */

@media (max-width: 1300px) {
	.dirboxframe {
		width: 19.9rem;
	}
	#infologo {
/*		display: none;*/
	}

}

@media (min-width: 631px) and (max-width: 1300px) {
	#pagefooter {
/*		height: 156px;*/
		width: 100vw;
/*		background-color: aqua;*/
	}



	#radicallogo {

		left: 40%;
		margin-left: 200px;
	}
}
/* =================== tablet ========== */
	


@media (min-width: 650px) and (max-width: 981px) {
	.container {
		width: 650px;
		margin-left: -325px;
		left: 50%;
/*			background-color: yellow;*/
	}
	

	
	#infologo {
/*		display: none;*/
	}
	#adr01,
	#adr02 {
		width: 325px;
	}
	.team {
		width: 325px;
		padding: 24px 5px 24px;
	}
	
	/* ========== FOOTER ==============*/
	
	
	.teaser {
/*		background-color: mediumorchid;*/
	}
	
	#innerpagefooter {
/*		text-align: left;*/
	/*	->>> teasertext*/
/*		background-color: coral;*/
		line-height: 0.3rem;
/*		adjust X postition of footer HERE*/
	}
	
	#pagefooter {
		height: 4rem;
		bottom: 0rem;
/*		width: 100vw;*/
	}
	
	.centered {
		height: 2rem;
	}
	
	.footerline {
		width: 33.5rem; 
	}
	 
	.footernav {
/*		transform: translateY(-60%);*/
		margin-top: 0.4rem;
	}
	
	.contact a, .legal a, .footernav a{
		font-size: 1.1rem; 
	}
	
	.email_btn, .phone_btn, .legal_btn {
		display: none;
	}
	
	.fr a {
		padding: 0;
	}
	
	.fr {
		padding: 0rem 2.1rem 0rem 2.1rem;
	}

	
	.anorakprod {
		padding-left: 0;
	}

	.legal {
	/*	margin-right: 3px;*/
		padding-right: 0px;
	}
	


	#pagefooter:hover {
/*		background-color: none;*/
	}


	#infobox {
		width: 380px;
		}
	
	
	
	.info {
		display: none;
	}
	#radicallogo {
		position: relative;
		display: table-cell;
		text-align: center;
		height: 40px;
		width: 100%;
		left: 0;
		top: 0;
		float: left;
		margin: 0;
		margin-left: 2rem;
	}
	#radicallogo svg {
		width: 200px;
		display: none;
	}
	
}
/* ========== Tablet - mobile ====== DETAILseite */

@media (max-width: 981px) {

	.cspecial_btn {
		transform: translateY(-20px);
	}
	.btn_link_ap {
		margin: 13rem auto 0;
	}

	.projectcard2,
	.projectcard3 {
		float: none;
		margin: 0 auto;
	}
	.projectcard2_front {
		display: block;
	}
	#smallprint {
		width: 80%;
	}
	#special_info_btn {

		border: 1px solid #747474;
		padding: 0rem 0.375rem;
		line-height: 1.6rem;
		margin-top: .5rem;
		margin-left: 1.5rem;
	}
	.awards {
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.credits {
		float: left;
		padding:20px;
		width: 100%;
		}

	.role {
		width: 40%;
	}
	.name {
		width: 60%;
	}
	#special_btn {
		width: 100%;
		margin-left: 50%;
		transform: translateX(-50%);
		text-align: center;
		margin-bottom: 0px;
		margin-top: 30px;
	}

	.selectedvideo {
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		width: 98vw;
		height: 56.25vw;
		margin-bottom: 30px;
	}

	.special_btn_play {
		margin-top: 26vw;
		margin-left: 50%;

		transform: translateX(-50%);
	}
	#description {
		width: 100%;
		padding:20px;
		float: left;
	}
	#description2 {
		width: 100%;
		padding:20px;
		float: left;
	}
}

@media (min-width: 650px) and (max-width: 981px) {
	#selected {
		width: 650px;
		margin-top: 1135px;
		height: 950px;
	}
	.selecteddescription {
		width: 650px;
		background-color: black;
	}
 	
	.selected_front {
		/*		position: absolute;*/
		/*		top: 100%;*/
		
		left: 1;
		/*		margin-top: -360px;*/
		
		margin-bottom: 160px;
		height: 750px;
		width: 100%;
		min-width: 300px;
		/*			width: 100%;*/
	}
	.selected_back {
		display: none;
	}
	#legalborderbottom,
	#detailborderbottom {
		width: 80vw;
		margin-top: 67rem;
		/* 553/16 */
	}
}


@media (max-width: 650px) {
	
	#selected {
		width: 100vw;
		height: 950px;
		margin-top: 1155px;
	}
	.btn_link_ap {
		margin: 13rem auto 0;
	}
	.cspecial_btn {
		transform: translateY(10px);
	}
	
/*	============== FOOTER ============= */
	
	#pagefooter {
		height: 5rem;
		bottom: 0rem;
	/*		adjust margin-bottom HERE*/
		width: 100vw;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;

	}
	#pagefooter:hover {
		background-color: transparent;
	}
	.teaser {
/*	position: absolute;*/
		bottom: 3rem;
/*	right: 50%;*/
/*	transform: translateX(51%);*/
/*		background-color: dodgerblue;*/
	}

	
	.teaser img {
		display: none;
		}
	
	#infobox {
		margin-left: 0rem;
		max-width: 350px;
		float: left;
		z-index: 5;
		text-align: left;
	}

	
	.centered {
		padding: 0rem;
/*		background-color: aqua;*/
	}
	
	.footernav {
		background-color: black;
		border: solid 1px #747474;
		height: 30px;
		max-width: 400px;
/*		empty-cells: show;*/
/*		empty-row: show;*/
	}
	
	.footerline {
		display: none;
	}
	
	.tablespacing {
		display: table-row;
		line-height: 0.1rem;
/*		background-color: darkgoldenrod;*/
		z-index: 500;
	}
	


	.footerrow {
/*		background-color: aquamarine;*/
/*		line-height: 2rem;*/
/*		height: 1em;*/
	}


	.contact, .legal {
		display: none; 
	}
	

	.fr a {
		padding: 0rem;
	}
	
	.anorakprod {
		text-align: left;
/*		vertical-align: middle;*/
		padding: 0rem;
		width: 50%;
/*		background-color: bisque;*/
	}
	.anorakprod a {
		padding: 0.5rem;
	}

	.email_btn, .phone_btn, .legal_btn {
		display: table-cell;
		min-width: 40px;
		text-align:center;
		opacity: 1;
		height: 36px;
		border-left: 1px solid #747474;
	}

	.email_btn:hover , .phone_btn:hover, .legal_btn:hover {
		opacity: 0.5;
	}
	
	#footer-icon-mail {
		width: auto;
		height: 16px;
		border: 0;
	}

	#footer-icon-phone {
		width: auto;
		height: 20px;
		border: 0;
	}

	#footer-icon-legal {
		width: auto;
		height: 20px;
		border: 0 ;

	}

	.selected_front {
		width: 100%;
		height: 100%;
	}
	.selected_back {
		display: none;
	}
	.selecteddescription {
		width: 100%;
		background-color: black;
	}
	.centertb {
		width: 100vw;
		/*	margin: 0 auto;*/
	}
	.legalhead {
		margin-bottom: 20px;
	}
}
/* =========================== */

@media (max-width: 491px) {
	.container {
		width: 100vw;
	}
	.btn_link_ap {
		margin: 13rem auto 0;
	}
	.play_button_frame {
		height: 100vh;
	}
	.dirhero {
		bottom: 150px;
	}
	/* MR */
	
	.play_button_frame {
		position: relative;
		margin-top: 50%;
		top: 0;
		height: 40%;
	}
	/* MR */
	/* OLD - was .play_button*/
	
	.btn_play {
		top: 0;
		margin-top: 70%;
		position: relative;	}
	
	.mvinfo {
/*		background-color: red;*/
/*		width: 100%;*/
		width: 350px;
/*	margin: 5px auto;*/
		margin-left: 80px;
		overflow: hidden;
	}

	
	/* MR */
	
	div .pc_btn_play {
		width: 100%;
		height: inherit;
/*		background-color: orange;*/
		position: relative;
		width: 100%;
/*		height: auto;*/
	}
	
	div .pc_btn_play:before {
		content: "";
		display: block;
		padding-top: 100%;
	}

	
	.pc_btn_play {
		height: 48px;
		width: 48px;
		background: url(/static/img/pc_btn_play_small.svg);
		background-size: contain;
		background-repeat: no-repeat;
		/*	hack to maintain aspect ratio*/
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		}
	
	
	.filmtiles {
		top: 0;
		position: relative;
		margin-top: 40%
	}
	.projectcard2 {
		float: left;
		width: 100vw;
		height: 56vw;
		background-size: cover;
		/*		background: center center cover no-repeat;*/
		/*		background-image: none;*/
	}
	.projectcard2_front {
		width: 100vw;
		height: 56vw;
	}
	.projectcard2_back {
		width: 100vw;
		height: 56vw;
	}
	.pcinfo {
		width: 88%;
	}
	.pcinfo p {
/*		padding: 0px 0px 0px;*/
/*		line-height: 140%;*/
	}
	
	.pci_h h4, .mvi_h h4 {
	line-height: 1.6rem;
	/* 42/16 */
	}

	.cspecial_btn {
		transform: translateY(20px);
	}
	#legalborderbottom,
	#detailborderbottom {
		width: 100vw;
		position: relative;
		margin-top: 3rem;
	}
	#selected,
	.selected_front,
	.projectcard3 {
		position: relative;
	}
	#selected {
		padding-top: 10px;
		float: left;
		width: 100%;
		margin-top: 5rem;
		height: 950px;
	}
	.selected_front {
		margin-bottom: 0px;
	}
	.selected_back {
		display: none;
	}
	.selecteddescription {
		float: none;
		text-align: center;
		width: 100%;
		background-color: black;
	}
	.centertb {
		float: left;
		width: 100%;
	}
	.projectcard3 {
		float: none;
		width: 327px;
		margin: 0 auto;
		clear: both;
	}
	.footernav {
		background-color: black;
		border: solid 1px #747474;
		height: 30px;
		width: 99%;
/*		empty-cells: show;*/
/*		empty-row: show;*/
	}
}
/* == mobile == zwischengroesse wegen layout */

@media (max-width: 680px) {
	.selectedproject_close {
		right: 5px;
		top: 5px;
		height: 30px;
		width: 30px;
		background-size: 30px 30px;
	}
	.container {
		max-width: 100%;
		left: 0%;
		margin-left: 0px;
		/*		background-color: fuchsia;*/
	}
	.logo {
		background: url(/static/img/anorak_logo_small.svg);
		width: 18.75em;
		/* 300/16 */
		
		height: 3.125em;
		/* 50/16 */
		
		background-size: contain;
		background-repeat: no-repeat;
	}
	.dirboxframe {
		width: 18.75em;
		/* 300/16 */
		
		margin-left: -9.375em;
		/* 150/16 */
	}
	#menu ul {
		font-size: 1.4rem;
		/* 24/16 */
		
		line-height: 1.25rem;
		/* 48/16 */
		
		font-weight: 100;
		letter-spacing: 0.0625rem;
		text-transform: uppercase;
		text-align: center;
		margin: 0px;
	}
	#front {
		position: relative;
		float: left;
		width: 100px;
		height: 65vh;
		/*		background-color: gold;*/
	}
	/* FOOTER */
	
	
	#adr01,
	#adr02 {
		width: 100%;
		padding: 15px;
		line-height: 26px;
		text-align: center;
	}
	#adr01 {
		margin-top: 160px;
		margin-bottom: -26px;
	}
	#adr02 {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.team {
		width: 100%;		
		text-align: center;		
		padding: 24px 5px 24px;
	}
	.legalhead {
		width: 90%;
	}
	#smallprint {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		margin-top: 0rem;
		margin-bottom: 9rem;
		margin-left: auto;
		margin-right: auto;
	}
}