@import url('https://fonts.googleapis.com/css?family=Roboto:wght@500&display=swap');
@import "index_icons.css";

html {
  /*
  background-image: url(/static/img/prod-guide/jpg-guides/sp-Web-guides-_Seite_02.jpg);
  background-image: url(/static/img/prod-guide/pages-1.jpg);
  background-repeat:no-repeat;
  background-position: top center;
  */
  background-color: #f0f0f0;
   font-size: 20px;
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: "Benton Sans Bk", Roboto, Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.pure-g > div, container > div {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
}

.container { 
 -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
   max-width:1370px;
   margin:0 auto;
}

a { color:#0088ff; text-decoration:none}
a:hover { color: black; text-decoration: underline}
h1, h2, h3, h4, h5, h6 {font-weight:500; font-family:"Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;} 
h1 { font-size:2em}

img {vertical-align:middle}
strong, b { font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;font-weight:500; }

/* .pure-img  {width:100%} */
.line { border-bottom: 1px solid black;}
.content { position:relative}
.pure-img  {max-width:100%; display: block; margin-left: auto; margin-right: auto; max-height:100%} 
.pure-img-upscale  {width:100%} 
.center {text-align:center}
.rm-link {line-height: 2em}
.morenews { margin-bottom:20px}

input, select {max-width:100%; }
input {height:34px}
select {height:38px}
input:focus { outline: none;  border-color: none;
  -webkit-box-shadow: none;
  box-shadow: none;}

.p_small { font-size:0.8em}

/* HEADER */
/* ------------------------------------------------------------------ */

header {margin:12px 0px 108px 0px; }
header a {color:black; text-decoration:none}
header a:hover { color: #001f98; text-decoration:none}
header a.active { color: #001f98; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif ;}

header .pure-u-md-1-4:nth-child(1)  { padding-right:22.5px } 
header .pure-u-md-1-4:nth-child(2)  { padding-left:7.5px } 
header .pure-u-md-1-4:nth-child(3)  { padding:0 15px } 
header .pure-u-md-1-4:nth-child(4)  { padding-left:7.5px; text-align:right }

header .icons { text-align:right; font-size:1em; padding-right:7px;}
header .icons a {color:#a3a3a3; padding-left: 18px}
header .icons a:nth-child(3)  {color:#a3a3a3; padding-left: 21px; padding-right:0px;}

.search svg path, .search svg circle, .search svg line { stroke:#a3a3a3 }
.search svg:hover path, .search svg:hover circle, .search svg:hover line { stroke:#001F98 }

header .menu .pure-u-md-1-4 {  font-size:22px; line-height:30px}
header .menu {margin-top:-12px;}
header .icons a:hover {color:#001f98}
header .icons img {
  opacity: 0.44;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
header .icons img:hover {
  opacity: 1;
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}   
header .line { border-bottom: 1px solid black; margin:8px 0px 32px 0px}


header .msearch {display:none}
header label {display:none }
#menu-toggle {display:none }



/* FOOTER */
/* ------------------------------------------------------------------ */

footer .container {
  background:  #0032a1;
}
footer { color: white; margin-top:100px}
footer a { color: white }
footer a:hover { color: white }
footer b {font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; font-size: 18px}
footer .logo { padding:30px 24px }
footer .menu {margin-bottom:40px}


footer .pure-g [class *= "pure-u"] { font-size: 18px; line-height:1.7em}
footer .pure-u-sm-1-4:nth-child(1), footer .pure-u-md-1-4:nth-child(1)  { padding-left:25px; padding-right:22.5px } 
footer .pure-u-sm-1-4:nth-child(2), footer .pure-u-md-1-4:nth-child(2)  { padding-left:7.5px } 
footer .pure-u-sm-1-4:nth-child(3), footer .pure-u-md-1-4:nth-child(3)  { padding:0 15px } 
footer .pure-u-sm-1-4:nth-child(4), footer .pure-u-md-1-4:nth-child(4) { padding-left:22.5px;}
footer .language { text-align:right; padding: 30px; }
footer .impressum [class *= "pure-u"] {font-size: 14px;padding-left:25px;}
footer .impressum a { padding-right:10px}
footer .impressum { margin-top:34px}
footer .canals a { padding:0px 5px;vertical-align:middle}
footer .canals a:nth-child(1) { padding-left: 0px}
footer .canals { padding-left:25px}
footer .newsletter, footer .impressum { padding-left:15px}
footer .pure-g [class *= "pure-u"] .cntct { line-height:1.4em}
footer .vod {font-family: "Benton Sans Bd", Roboto, Arial, Helvetica, sans-serif; font-size:1.1em;}
footer .vod:hover {text-decoration:none}

footer input {padding:0px 8px !important;font-family: "Benton Sans Bk", Roboto, Arial, Helvetica, sans-serif; color:Gray;margin-top:5px}
footer input.submit {font-family: "Benton Sans Bd", Roboto, Arial, Helvetica, sans-serif;color:#b0b0b0; margin-top:7px; padding-top: 1px !important;}
footer input[type="email"]:invalid:not(:focus):not(:placeholder-shown) {background:red}

footer ul { padding:0px; margin:0; list-style-type:none}


/* submenus */
/* ------------------------------------------------------------------ */

.submenu {padding-right:45px}
.submenu ul {margin:0; padding:0; list-style:none;}
.submenu ul li {margin-bottom:8px; line-height:1.1em}
.submenu ul:nth-child(2) {margin-top:55px; border-top:1px solid black; padding-top:20px}

.submenu a { font-size:1.1em;}
.submenu a { color:black; text-decoration:none}
.submenu a:hover { color:#0088ff}
.submenu a.active { color: #001f98; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;}

.submenu .subsub {margin-top:40px; border-top: 1px solid black; padding-top: 30px}
.submenu .subsel { display:none}

/* headers general */
/* ------------------------------------------------------------------ */

.sorter, 
.breadcrumb, 
.pagination, 
.letterheads, 
.searchr { 
  padding: 0px 0px;
  margin-bottom:26px;
  line-height:62px;
}
.sorter .container, 
.breadcrumb .container, 
.pagination .container,
.letterheads .container,
.searchr .container {
  border-top: 1px solid black;
  height:64px;
  border-bottom: 1px solid black;
}
.sorter a:hover, 
.breadcrumb a:hover, 
.pagination a:hover,
.letterheads a:hover,
.searchr a:hover {
  text-decoration:none;
  color:white;
  background: #001f98;
}

.letterheads_mobile { display:none}


/* SORTING HEADER */
/* ------------------------------------------------------------------ */


.sorter .pure-g [class *= "pure-u"] { font-size: 21px; }
.sorter .viewoptions { text-align:right }
.sorter .viewoptions a { margin-left: 28px }
.sorter .entryCbtn {  
  margin-left: 26px; display: inline-block; 
  background:white; line-height: 34px; padding: 5px 20px; 
  font-family: "Benton Sans Bd", Roboto, Arial, Helvetica, sans-serif;

  }
.sorter .entryCbtn a {  margin-left: 0px; color: #001f98;}

/*
.sorter ul {
  margin:0;
  padding:0;
	float: left;
  display: inline-block; 
	list-style: none;
  border: 1px solid green;
}
*/

.sorter .label {
  float:left;
  margin-right:20px;
}

.sorter ul ul, .search ul ul {
  display:none;
}

.sorter ul li:hover > ul, .search ul li:hover > ul  {
  display: block;
  
}

.sorter ul, .search ul {
  margin:0;
  line-height: 34px; 
  margin-top:10px;
	display: inline-table;
  list-style: none;
  position: relative;
  padding:0;
  /* float: left; */
}
.sorter ul:after, .search ul:after {
  content: ""; clear: both; display: block;
}

.sorter ul ul, .search ul ul {
  margin:0;
}

.sorter ul li, .search ul li {
 float: left;
 padding:0;
}

.sorter ul ul li, .search ul ul li {
  float: none; 
}

.sorter ul li a, .search ul li a {
  margin:0 15px;
  padding:4px 20px;
  width:220px;
  display:block;
  background:white; 
  font-family: "Benton Sans Bd", Roboto, Arial, Helvetica, sans-serif;
  color: black;
 
}

.sorter ul li a.selected, .search ul li a.selected {
  background: url(/static/img/triangle.png) 90% no-repeat white;
  font-family: "Benton Sans Bd", Roboto, Arial, Helvetica, sans-serif;
   color: #001f98;
}


/* BREADCRUMB HEADER */
/* ------------------------------------------------------------------ */

.breadcrumb a { color:black; margin: 0 25px}
.breadcrumb a:nth-child(1) { margin-left:0px}
/* ------------------------------------------------------------------ */



.pagecontent { padding: 0 80px 0 10px; line-height:1.3em}

.sidebar { padding: 0 0px 0 22.5px; line-height:1.3em }

.pagecontent p.heading, .pagecontent h2, .pagecontent h3, .sidebar h3, .sidebar h2 { font-size:1.3em; font-family: "Benton Sans Med",Arial, Helvetica, sans-serif; margin-bottom:4px;}
.pagecontent h2 { line-height:1.2em; margin-bottom:15px;}
.pagecontent h3 { font-size:1.1em; margin-top:25px; margin-bottom:25px; padding-top:15px; border-top:1px solid black}

.heading { font-size: 2em}

.sidebar p { padding-right:30px;}
.sidebar p.heading,  .sidebar h3, .sidebar h2 { border-top: 1px solid black; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;padding:20px 0 3px 0; margin:0; font-size:1.0em; }

.pagecontent h1, .pagecontent h2, .pagecontent h3, .pagecontent h4
  { font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;}

.pagecontent p, 
.pagecontent h1:nth-child(1),
.pagecontent h2:nth-child(1),
.pagecontent h3:nth-child(1),
.pagecontent h4:nth-child(1),
.sidebar p, 
.sidebar h1:nth-child(1),
.sidebar h2:nth-child(1),
.sidebar h3:nth-child(1),
.sidebar h4:nth-child(1)
 { margin-top:0px;}
 
 .pagecontent p {margin-bottom:35px}
 .sidebar p {margin-bottom:65px}
 .pagecontent ul { padding-left:20px}

/* MOVIE DETAIL */
/* ------------------------------------------------------------------ */

.moviedetail { margin-top:115px}
.moviedetail {line-height: 1.3em; position:relative;}
.moviedetail h1 { margin:0 0 60px 0; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; line-height: 1.2em; font-weight:500;  }
.moviedetail .movieimg { margin-bottom:70px; text-align:center}
.moviedetail .movieimg .caption { width:500px; text-align:left; }
.moviedetail .movieimg .caption p {font-size:12px}
.moviedetail .item { margin-bottom:11px } 

.moviedetail .right { padding-left: 15px }
.moviedetail .left { padding-right: 50px }
.moviedetail .right .content { padding-right: 20px }
.moviedetail .right .pure-u-12-24:nth-child(2) { padding-left: 15px }
.moviedetail .sub { border-top: 1px solid black; margin-top:42px; padding-top:18px; padding-bottom:6px}
.moviedetail .sub a,  
.moviedetail .sub .head { font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; cursor: pointer}
.moviedetail .sub .head { background: url(/static/img/triangle_b_d.png) top right 20px no-repeat; }
.moviedetail .sub .head-closed { background: url(/static/img/triangle_b_r.png) top right 20px no-repeat; }
.moviedetail p img {height:auto;max-width:100%;   display: block; margin-left: auto; margin-right: auto;}
.moviedetail p img:only-child  {margin:-20px auto}

.moviedetail .item p {padding:0;margin:0}
.moviedetail .credititem, .moviedetail .fyear {margin-top:0.4em; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;}
.moviedetail .left .sub .head { margin-bottom:0.4em;}
.moviedetail .line { margin: 20px 0px 0px 0px }
.moviedetail .descr p:nth-child(1), .moviedetail .kurz p:nth-child(1) { margin-top:0px; padding-top:0px}
.moviedetail .kurztext { border-bottom: 1px solid black; padding-bottom: 20px; margin-bottom:40px; }

.filmmaker  {min-height:320px}
.filmmaker .sub:nth-child(1) { margin-top:0px; }
.filmmaker .left { padding-right: 22.5px }
.filmmaker .cent { padding-left: 7.5px; padding-right:60px}
.filmmaker .cent p { padding-right:30px}
.filmmaker .pure-img { margin-left:0}
/*
.mtext {max-height: 6.5em}
.descr { max-height: 12.9em}
*/

/* Tour programs  */
/* ------------------------------------------------------------------ */

.tourprogram .pure-u-md-3-4 { padding-left:7.5px}
.tourprogram .programtitle h1 {margin: -6px 0 0 0; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; line-height: 1.2em; }
.tourprogram .programtitle h2 {margin:0; font-family: "Benton Sans Bk"; font-size:2em}
.tourprogram .programtitle  {margin-bottom:70px}
.tourprogram .image img  {max-height:576px}
.tourprogram .image  {margin-bottom:43px}
.tourprogram .pure-u-3-4 { padding-left: 10px }
.tourprogram .right { padding-left: 20px }
.tourprogram .text { margin-bottom: 100px; padding-right:60px; line-height: 1.3em;}


/* FILMMAKER(S) ADDITIONS  */
/* ------------------------------------------------------------------ */

.filmmaker { margin-bottom: 120px }

.filmmakers [class *= "pure-u"]  {
  margin-top:35px;
  margin-bottom: 120px;
  font-size:0.9em;
  line-height:1.85em;
}
.filmmakers .cols { column-count: 4;}
.filmmakers [class *= "pure-u"]  a {
  color:black;
}
.filmmakers a.active { color: #001f98; font-family: "Benton Sans Bd"; }

.letterheads [class *= "pure-u"]  {
  padding:0px 0px; overflow:hidden;
}

.letterheads { text-align:center}
.letterheads a, .pagination a { color:black; width:3.84%; text-align: center; display:inline-block;}
.pagination a { color:black; width:62px; text-align: center; display:inline-block;}
.letterheads a:hover, .pagination a:hover  
  { background:#001f98; color:white; text-decoration:none }
.letterheads a.active, .pagination a.active
  { background:white; color:#001f98; text-decoration:none; font-family: "Benton Sans Bd"; }

.pagination .label, .pagination .next, .pagination .prev, .pagination .current { display: inline}
.pagination .up { text-align:right}
.pagination .up a {height:62px;width:auto; padding: 0px 10px 0px 20px}
.pagination .up a svg {vertical-align:middle; margin-right:10px}
.pagination .up a:hover svg line, .pagination .up a:hover svg polyline { stroke:white}
.imgcredit { font-size: 0.6em}

/* SELECT BOX */
/* ------------------------------------------------------------------ */

select {
  font-size:1em;
  line-height: 34px;
  padding:4px 10px 0px 20px;
  margin-left:0px;
  border:0px;
  border-radius: 3px; 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "Benton Sans Bd";
  color: #001f98;
  background: url(/static/img/triangle.png) 95% no-repeat white;
  min-width:300px;
}
.sorter select:nth-child(2) {  margin-left:26px; }


input { 
  background:white; 
  border:0; 
  line-height: 34px;
  border-radius: 3px; 
  padding:4px 10px 0px 20px;
  color: #001f98;
  font-family: "Benton Sans Bd";
  margin:0px;
  min-width:90%;
}

header .search input {
  min-width:100px;
}

.content .search {
  padding: 25px 0px;
  line-height:2.1em;
}

.content .search .right { padding-left:15px}


.content .search button {
  color:#c1cbe6;
  margin:52px 0px 0px 0px; 
  height:38px; 
  line-height:38px;
  border:0; 
  border-radius: 5px; 
  background:none;
  font-family: "Benton Sans Bd";
  width:200px;
  font-size:0.8em;
}

.content .search button svg circle, 
.content .search button svg line
 {
  stroke:#c1cbe6;
}

.content .search button.valid, footer .newsletter .valid { 
  color:white;
  background-color:#0088ff;

  /*background: url(/static/img/svg/search_w.svg) 80% no-repeat #0088ff;
  background-size: 16px 16px;*/
}
.content .search button.valid svg circle, 
.content .search button.valid svg line
 {
  stroke:white
}

header .search { padding-right:7px; text-align:right} 
header .search svg {vertical-align:middle}
header .search .short {  width:150px; line-height: 36px; padding-top: 2px; padding-bottom:2px; display:none}

header .search a  { padding-left:0px !important}
header .search svg { padding:5px; border-radius:5px}
header .search a.valid  svg { background: blue }
header .search a.valid svg circle, 
header .search a.valid svg line { stroke:white }


.search input, .search select {width:100%}
.search input:focus, .search select:focus { border:1px solid blue}
.search .all {font-family: "Benton Sans Bk";color:#666666}
.search .pure-u-1-1:nth-child(1) {padding-right:30px}
.search button svg {width:24px;height:24px;vertical-align:middle; margin:0px 5px 3px 5px;}

.search button img {vertical-align:middle; margin:0px 5px 3px 5px;}



/* MOVIE THUMB */
/* ------------------------------------------------------------------ */

.movielist { margin-top:75px }
.thumb a , .newreleaseslides a{ text-decoration:none; color:black}
.thumb .pure-img  {} 
.thumb { min-height: 446px; line-height:1.4em; padding-bottom:20px; margin-bottom:1px}
.thumb:nth-child(3n) { padding-left: 20px;}
.thumb:nth-child(3n-1) { padding-left: 10px; padding-right:10px}
.thumb:nth-child(3n+1) { padding-right: 20px;}
.thumb .title, .vimeo .title, .slide .title {font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;  font-weight:500; font-size:1.3em; margin:15px 0px 5px 0px}
.thumb .regie p, .vimeo .regie p, .slide .regie p {margin:0}


.search input::placeholder {font-family: "Benton Sans Bk"; color:white;}

/* NEWS */
/* ------------------------------------------------------------------ */

.news .item {margin-bottom:40px;}
.news {margin-bottom:100px}
.news .title {margin:0px 0px 25px 0px; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; font-size:1.3em}
.news .image {text-align:right; margin-bottom:80px;padding-left:45px}
.news .text {padding:0px 80px 80px 0px;}

.indexleft {padding-right:52px}
.indexleft .text {padding-right:12px}
.indexright  {padding-left:15px}
.indexright a  { text-decoration:none; color:black}
.indexright a:hover  { text-decoration:none; color:black}
.indexright h3, .indexleft h3, .index h3 { font-size: 1em; margin: 69px 0px 18px 0; padding: 18px 0px; border-top: 1px solid black}
.indexright .item, .indexleft .item { margin-bottom:50px;}
.indexright h2 {font-size: 1em }
.index h3 { margin-top:10px;}

/* EVENTS */
/* ------------------------------------------------------------------ */

.events {margin-bottom:100px}
/*.events .date, .events .time {margin:0px 0px 0px 0px; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; font-size:1.3em}*/
.events .date, .eventdetail .date { font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; font-size:1.2em}
.events .title {margin:0.3em 0px 1em 0px; font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; font-size:1.2em}

.events .image {margin-bottom:1em; margin-top:1em}
.events .text {padding:0px 30px 120px 0px;}
.events .descr p:last-child {margin-bottom:0.5em}
.events .location { margin-bottom:0.5em;margin-top:5px; font-size:0.9em; padding-right: 10px; }
.events .descr {padding-top:10px;line-height:1.5em; padding-right:50px; padding-bottom:5px}

.events  .pagecontent { padding: 0 20px 0 7.5px;}
.eventdetail .programtitle { margin-bottom:45px}
.eventdetail .programtitle h1 { margin-bottom:0.5em}
.eventdetail .programtitle .date { margin-bottom:0.3em}
.eventdetail .text p {margin-top:5px}
.eventdetail .text p:nth-child(1), 
.eventdetail .ticketing p:nth-child(1) 
  {padding-top:0px; margin-top:0px}

.eventdetail .ticketing {font-size:0.8em; margin-bottom:45px}
.events .catdescr { margin-bottom:40px }
.events .descr { padding-top:0px}

.indexright .events { margin-bottom:40px}
.indexright .events .image {margin-top:0}
.indexright .events .title { margin:0px 0px} 

.news .mobile-header, .events .mobile-header { display:none}


/* EDIT OVERLAY == */
/* ------------------------------------------------------------------ */

div.edit { 
  width:100%;
  position:absolute;
  top:-40px;
  text-align:right;
}
.edit a, a.edit { margin-left:30px; color:#0088ff; text-decoration:none}
.edit a:hover,  a.edit:hover { color: black; text-decoration: underline}

div.iedit { 
 text-align:right;
}


/* oinput types */

/* The container */
.checkbox {
  display: block;
  position: relative;
  margin-top:12px;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkbox .checkmark {
  position: absolute;
  top: 0px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: none;
  border:1px solid white;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  background-color: #0088ff;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
  background-color: none;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg)
}

.caption .container  { max-width:1224px; }

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

@media screen and (max-width: 1380px) {
  .container { max-width:95%}
  .caption .container  { max-width:1024px; letter-spacing: normal; line-height:1.2em;}
  .content .search select { width:100%; font-size:0.9em} 
}

@media screen and (max-width: 1280px) {
  header .logo svg { width:220px}
  .container { max-width:97%}
  .thumb { min-height:425px }
  
}

@media screen and (max-width: 1024px) {
  .container { max-width:100%}
  .container {padding-right:20px; padding-left:20px}
  header .menu .pure-u-md-1-4 {    line-height: 28px;  }
  header { margin-bottom:90px}
  .caption .container  { max-width:980px; letter-spacing: normal; line-height:1.2em;}
  .news .container, .events .container {}
  .news, .events { margin-top:115px}
  .indexright .events { margin-top:20px}
  .news .image { padding-left:15px}
  .events .image { padding-left:0}
  .news .text, .events .text { padding-right:30px; padding-bottom:80px;}
  .news .title, .events .title { margin-top:3px; margin-bottom:0px}
  .news .descr, .events .descr { padding-top:5px; font-size:0.9em; line-height:1.3em}
  .tourprogram .programtitle h1 { font-size:1.5em}
  .tourprogram .programtitle h2 { font-size:1.5em}
  .tourprogram .programtitle  { margin-bottom:30px}

  .filmmaker { margin-bottom: 60px;}
  .filmmaker .sub:nth-child(1) { margin-top:42px; }

  .filmmaker .cent, .filmmaker .right { padding-left: 0; padding-right:0px }

  .sorter { margin-top:118px; }
  .sorter .label { margin-right: 10px}
  .sorter .pure-g [class*="pure-u"] { font-size: .8em;}
  .sorter .show { font-size: 1.1em;}
  .thumb { min-height:340px;}
  .thumb .title { margin: 18px 0px 1px 0px}
  .movielist .pure-g [class*="pure-u"], .moviedetail  .pure-g [class*="pure-u"] { font-size: .9em;}
  .moviedetail h1 { margin:8px 0px 35px 0px; font-size:1.6em }
  .moviedetail .movieimg { margin-bottom:62px}
  .submenu {padding-bottom:40px;word-break: break-word;hyphens: auto; padding-right:30px}
  .sidebar {margin-left:25%;padding-left:10px; margin-top:40px;margin-bottom:0px}
 
  footer .newsletter { padding-left: 25px;padding-right:50px; }
  footer .newsletter form input {font-size:0.9em;}
  footer .impressum, footer .canals { padding-left: 15px;}
  footer .impressum { text-align:right; padding-right:15px}
  footer .language { text-align:right; padding-right:25px}
  footer input {width:100%; }
  footer .cntct, footer .links { padding-bottom:40px}
 
  .tourprogram .text { margin-bottom:60px}
   .eventdetail .ticketing {   line-height: 1.3em; font-size:0.7em; }
   .eventdetail .ticketing p {  margin-top:0;margin-bottom:0.5em }
   
  .content input {  width:270px;  }
  header #search_query { width:150px }
   
}

@media screen and (max-width: 768px) {
  select, input { line-height: 28px; padding:2px 20px;}
  .container { max-width:100%}
  .container {padding-right:20px; padding-left:20px}
  
  header { background:  #0032a1; color:white; margin-top:0px; margin-bottom:0px; padding:9px 0px 9px 0px}
  header .container {display:flex; flex-flow: row}
  header .logo { order:2 }
  header .msearch { text-align:right; order:3; display:block}
  header .icons { display:none}
  header .logo svg { width:220px}
  header a {color:white}
  header .line {display:none}
  header .logo { padding: 5px; text-align:center }
  header .logo svg { height:24px}
  header .logo svg path {fill:white}
  header .pure-u-1-1 { padding:0px}
  header .pure-u-md-1-4:nth-child(2) {padding-left: 15px;}
  
  .msearch svg {height:24px}
  .search svg path, .search svg circle, .search svg line { stroke:white }
  .search svg:hover path, .search svg:hover circle, .search svg:hover line { stroke:#d2d2d2 }
  header .search svg { padding:0px; border-radius:0px; vertical-align:top}
  header .mlang { display:inline-block; float:left; padding-left:50%;}
  header label { display:block; cursor: pointer; }
  header label svg { height: 21px; margin-top:1px; }
  header label svg rect { fill:white }
  #menu-toggle {  display: none; }
  #menu { 
    display:none;
    position:absolute; 
    top:50px;
    left: 0px; 
    background:#0032a1;
    z-index:1001; 
    padding: 20px 0px 30px 0px; 
  }
  #menu .pure-u-1-1 {  line-height:1.6em; padding-left:24px}
  #menu a {font-size: 0.8em}
  #menu a:hover, .msearch a:hover { font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; color:white} 
  #menu a.active { font-family: "Benton Sans Med", Roboto, Arial, Helvetica, sans-serif; color:white} 

  footer .logo img { max-width:130px}
  footer .pure-g [class*="pure-u"] { font-size: .9em;}
  footer .pure-u-sm-1-4:nth-child(1), 
  footer .pure-u-sm-1-2:nth-child(1),
  footer .pure-u-sm-1-2:nth-child(3)  { padding-left:5px}
  footer .pure-u-md-1-4:nth-child(2) { padding-left:25px}
  footer .pure-u-1-4:nth-child(1) {padding-left:0px}
  footer .logo {padding-left:5px;}
  footer .canals { padding-left:15px}
  footer .impressum { padding-right:0px; text-align:right}
  footer .newsletter { padding-left: 25px;padding-right:30px; }
  footer .language { padding-right:5px}
  footer input {font-size:1em}
  
  .movielist { margin-top:110px;}
  .thumb:nth-child(3n),.thumb:nth-child(3n-1),.thumb:nth-child(3n+1) { padding-left:0px; padding-right:0px}
  .thumb:nth-child(2n) { padding-left:15px; padding-right:0px}
  .thumb:nth-child(2n+1) { padding-left:0px; padding-right:15px}

  .sorter { margin-top:0px; }
  .sorter .container {border:0} 
  .sorter .label { margin-right: 25px}
  .sorter ul li a, .search ul li a { margin:0}
  .sorter ul li a { width: 225px; margin-right:10px; padding-left:10px }
  .sorter .pure-g [class*="pure-u"] { font-size: .9em;}

  .filmmaker .sub:nth-child(1) { margin-top:42px; }
  .filmmakers .cols { column-count: 3; margin-top:0px}
  
  .slides {padding-left:0px; padding-right:0px;margin-top:-15px}
  .caption .container  { max-width:700px; letter-spacing: normal; line-height:1.2em; padding-left:15px}
  
  .indexleft {padding-right:45px; padding-left:0px}
  .indexright {padding-left:15px; padding-right:0px}
  .indexright .events .image {padding-left:0px; padding-top:20px; margin-bottom:40px}
     
  .submenu { padding-right: 0px; }
  .submenu .subsel { display:block}
  .submenu select { width:100%}
  
  .tourprogram .text { margin-bottom:40px}
  .tourprogram .pure-u-md-3-4 { padding-left:0px}
  .events .container {display: flex; flex-direction: column}
  .events .image { order:1; padding:0px; margin-bottom:5px}
  .events .text { order:2}
  .events .pagecontent { padding-left:0px; padding-right:0px;}
  
  
  .tourprogram .image {margin-bottom:15px}
  .tourprogram .text p {margin-top:5px}
  .tourprogram .right { padding-left:0px; padding-bottom:40px}
  
  .news { margin-top: 60px}
  .events { margin-top: 0px}
  .news .date, .events .date { font-size:1.35em; line-height:1.3em}
  .news .location, .events .location { font-size:.9em }
  .events .text { padding-right:0}
  .events .descr {padding-right:0}

  
  .moviedetail { margin-top:18px}
  .moviedetail .right, .content .search .right {padding-left:0px; padding-right:0px}
  .moviedetail .moviedata {display: flex; flex-direction: row}
  .moviedetail .moviedata .right { order: 2; margin-bottom: 30px}
  .moviedetail .moviedata .sub { margin: 15px 0px}
  .moviedetail .moviedata .left { order: 1; padding-bottom: 30px }
  .moviedetail .card { padding-bottom: 20px }
  .moviedetail .movieimg { margin-bottom: 35px}
  .moviedetail h1 { margin-bottom: 35px}
  .moviedetail .left { padding-right: 0px }
  .moviedetail .left .descr { padding-right: 65px }
  .movielist { margin-top:40px}
  
  .filmmaker .left { padding-bottom: 0px}
  .filmmaker .left { padding-right: 22.5px }
  .filmmaker { margin-bottom: 60px}
  .filmmaker .info { padding-right:50px}
  .filmmaker .descr { padding-left: 10px}
  
  .content .submenu { padding-top:50px;padding-bottom: 52px; font-size:0.9em; }
  .content ul  {column-count: 2}
  .content .sublist { display:none;}
  .content { margin-top:15px; line-height: 1.5em}
  .content .search select { font-size:.9em}
  .content .search button { margin-top:30px}
  .content .searchr .container { margin: 0px 20px;padding:0px}
  .content .search select { width:60%} 
  .content .search input {margin-left:7px} 
  
  .pagecontent { padding-left:0px; padding-right:0px;line-height:1.5em}
  .sidebar {margin:0px; margin-top:40px; padding-left:0px}

  .letterheads { display:none}
  .letterheads_mobile { display:block}
  
   .edit, .admin { display: none }
}

@media screen and (max-width: 414px) {
  html, button, input, select, textarea,
    .pure-g [class *= "pure-u"] {font-size: 1em;}
  .container {padding-right:20px; padding-left:20px}
      
  .indexleft {padding:0}
  .indexright {padding:0}  
 
  header .mlang { padding-left: 0px}
  header .logo svg { width:200px}
  .submenu { padding-right:0px}
      
      
  .moviedetail .movieimg .caption { width:320px}

  .content { margin-top:20px}
  footer { margin-top:40px;overflow:hidden}
  footer .pure-g [class *= "pure-u"] {font-size:.9em; line-height: 1.6em;}
  footer .pure-u-1-2, footer .pure-u-1-1 { padding-left:0px !important}
  footer .r-1-2 {padding-left:15px !important}
  footer .logo {padding-left:0px;}
  footer .language {padding-right:0px}
  footer .menu { margin-bottom: 40px}
  footer .canals { text-align:center; margin-top:40px; margin-bottom:20px}
  footer .impressum { text-align:center;}
  footer .newsletter { padding-right:0px }
  footer .newsletter .newsletterform  { padding:0px; }
  footer .contacts { margin-bottom:4px}
  footer form {font-size:1.2em}

   .movielist {margin-top:62px}
   .movielist .pure-g [class*="pure-u"] { font-size:1.1em}
  .thumb { min-height: 0px; margin-bottom:25px}
  .thumb:nth-child(3n),.thumb:nth-child(3n-1),.thumb:nth-child(3n+1) { padding-left:0; padding-right:0}
  .caption .container  { max-width:360px; letter-spacing: normal; line-height:1em; padding-left:15px}
  .caption .h1 strong { line-height:1em; }
  
  .sorter .label { display:none}
  .sorter .container {border:0}
  .sorter .pure-g [class*="pure-u"] { font-size: 1.1em;}
  .sorter ul li a { width: 320px; margin-right:0px; padding-left:10px }
  
  .slides {padding-left:0px; padding-right:0px;margin-top:-20px}
  .slides p { font-size:0.7em}
  .indexleft h3:nth-child(1)  { border:0; margin-top:0px; margin-bottom:8px}
  .indexright h3 { margin-top:20px}
  .indexright .item, .indexleft .item { margin-bottom: 30px }
  .indexright .events .image {padding-left:0px; padding-top:10px; margin-bottom:40px}
  
  .searchr .label {font-size:0.9em}
  
  .news, .events { margin-bottom:0px}
  .news .container, .events .container {display: flex; flex-direction: column}
  .news .image, .events .image { order:1; padding:0px; margin-bottom:25px}
  .news .image { margin-bottom:15px}
  .news .text, .events .text { order:2; padding-bottom:50px}
  .vimeo {display:inherit; padding-bottom: 40px}
  
  .sorter ul li a { width: 280px; margin-right:10px }
  .sorter ul {}
  .sorter ul li { margin:3px 0px;}
  .sorter ul li ul li { margin:0px 0px}
  .moviedetail { margin-top: 0px}
  .moviedetail h1 { margin-top: 0px}
  .moviedetail .movieimg { margin-bottom:20px}
  .moviedetail .left .descr { padding-right: 0px }
  
  .filmmaker .info { padding-right:0px}
  
  .content .search { padding-top: 0px; padding-right:10px}
  .content .search .pure-g [class*="pure-u"] { padding-bottom:0px}
  .content .search input::placeholder {color:#999; font-family: "Benton Sans Bk";}
  .content .search .label { display:none}   
  .content .search select { width:90%; margin-bottom:5px} 
  .content .search input { margin-bottom:5px} 
  .content .search input {margin-left:0px}
  .search .pure-u-1-1:nth-child(1) {padding-right:0px}
  .content .search  input { width:90%} 
  .search select {  min-width: 0px;} 
  
  .pagination .container { border:none}
  .pagination .label {display:none}
  .pagination { line-height:40px}
  .pagination a {width:40px; background:#c1cde5; margin: 0px 6px 0px 0px}
  .pagination a:nth-child(1) {margin-left:0px}
  .pagination .dots { margin-right:6px}
  .pagination .txt {display:none}
  .pagination .up a {height:40px;width:auto; padding: 0px 0px 0px 0px;  margin-right:0px; background:none; }
  .pagination .up a svg {vertical-align:middle; margin-top:7px; margin-right:0px}
  .pagination .up a:hover {color:black} 
  .pagination .pure-u-3-4 {width:90%}
  .pagination .pure-u-1-4 {width:10%}
  
  .filmmaker .descr { padding-left: 0px;}
  .filmmaker .left {padding-bottom:20px; padding-right:0}
  .letterheads_mobile select { width:100%}
   .filmmakers .cols { column-count: 1;}
   
   .tourprogram select { padding-left:10px}
   .tourprogram .programtitle h1 {font-size:1.9em}
   .tourprogram .programtitle h2 {font-size:1.9em; margin-top:8px}
   .tourprogram .programtitle { margin-bottom: 36px}
   .tourprogram .text { padding-right:0px}
   
  .content .submenu { padding-top:9px;padding-bottom: 30px; font-size:1.1em;}
  .content ul  {column-count: 1}
  .pagecontent {padding-left:0px; padding-right:0px;}
  .sidebar {margin:0px; margin-top:40px; padding-left:0px}

}