/* check */
.container {width:100%;}
#main_content {margin-top: 10px;text-align: left;width: 95%;margin:0 auto;}

/* new stuff 2020 */
#active_lang img {width: 35px;}
span.bars, #hide, #openclose, #hide a {font-size: 50px;line-height: 43px;padding:0;color:rgba(226,244,255,0.6);}


/* navigation */
#page_nav {position: fixed; z-index: 9;left: 0;top: 0; display: inline-block; letter-spacing: 0.03em; text-transform: uppercase; padding:0; background-color:rgba(0,0,0,0.6);}
#page_nav ul {padding:0;}
#page_nav li:first-child {border:none;}
#page_nav li:last-child {padding-bottom: 5px;}
#page_nav li {padding:2px 10px;border-top:1px solid #555;}
#page_nav #spacer {padding-left: 10px;}
#pagenav {}
#navbar, #page_nav {text-align: left;}

body {font-size: 18px;color: #e2f4ff;overflow-x: hidden;}


.btn, .label {height: 14px!important; overflow: hidden; float: left; margin: 0; padding: 0;}
.hidden, .hiddentext, .hiddenvideo, .hiddenimage {display:none}
#hide, #hidetext {margin-top: -1px;font-family:bold Arial, sans-serif;}
hr {margin: 1.5em auto;height: 1px;color: #7a7e7d;background-color: #7a7e7d;border: none;}
#materials_nav {padding:0;margin:-20px 0 0 0;}
#materials_nav li.mainlink, #materials_nav li.mainlink a {text-decoration:none;font:35px 'Roboto Condensed', "Fjalla One", Helvetica, sans-serif!important;}
.noborder {border: none;}
.quotes {display: block;margin: 3% 15% 5% 15%;font:35px 'Roboto Condensed', "Fjalla One", Helvetica, sans-serif!important;color: #e2f4ff;text-shadow:2px 2px 1px #000;text-align: center;}
.quotes li {white-space: pre ;font-size: 15px;line-height: 15px;text-transform: uppercase;}
.ratio {display: block;width:100%;height:auto;}
#video-list {float:left;}
#video-list p iframe {width:200px!important;height:150px;margin:0;padding:0 10px 0 0;}
#img_cap {position: fixed; z-index:5; bottom: 3px; right: 10px; font-size: 10px; padding: 5px;text-shadow: 1px 1px 1px #000;height: 12px; overflow:none; opacity:0.5; filter: alpha(opacity=80);}
[itemprop="articleBodyStart"] #trailer_watch {position:absolute; top: 350px: width:auto; margin:0; padding:15px 0;border-radius:0.2em;border:0 solid #999; background: #89d9ff; color:#E2F4FF; background: #89d9ff; /* Old browsers */
background: -moz-linear-gradient(top,  #89d9ff 0%, #53bbef 40%, #0680dd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#89d9ff), color-stop(40%,#53bbef), color-stop(100%,#0680dd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #89d9ff 0%,#53bbef 40%,#0680dd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #89d9ff 0%,#53bbef 40%,#0680dd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #89d9ff 0%,#53bbef 40%,#0680dd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #89d9ff 0%,#53bbef 40%,#0680dd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89d9ff', endColorstr='#0680dd',GradientType=0 ); /* IE6-9 */}
#trailer_watch {box-shadow:0 0 15px #e2f4ff;}
[itemprop="articleBodyStart"] p {font: normal 25px 'Fjalla One', Impact, Charcoal, Techno, sans-serif;color: #fff;text-shadow:1px 1px 1px #000; margin:40px 0; }
[itemprop="articleBodyStart"] p a {color: #000;text-shadow:1px 1px 1px #e2f4ff;}
#trailer_watch img {position: relative;display: block;padding:0 20px 0 10px; float: left;}
#trailer_watch a span {padding: 12px 20px 0 0;color: #fff;font-family: 'Roboto Condensed', "Fjalla One", Helvetica, Impact, Charcoal, Techno, sans-serif; text-transform:uppercase;font-size: 25px; line-height: 39px;}
#film_by {float: left;font-size: 9px;line-height: 10px;margin:10px 20px 10px 20px;text-shadow:1px 1px 1px #000;opacity: 0.5;}

#awards {position: absolute;right: 20px;top: 74px;opacity: 0.6;}
.call {text-transform: uppercase;color: ##e3f4ff;margin-right: 0;padding-top:7px;}
#fb_icon img {background: #3b5998;width: 24px;height: 24px;}
#fb_icon img, #lang img {border-radius: 3px;padding: 0;}
#follow {font-family: "Fjalla One", Helvetica, Impact, Charcoal, Techno, sans-serif;display: block;font-size: 12px; padding: 0; background: #6a6e75; /* Old browsers */

background: -moz-linear-gradient(top,  #6a6e75 0%, #394051 33%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6a6e75), color-stop(33%,#394051), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #6a6e75 0%,#394051 33%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #6a6e75 0%,#394051 33%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #6a6e75 0%,#394051 33%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #6a6e75 0%,#394051 33%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6a6e75', endColorstr='#000000',GradientType=0 ); /* IE6-8 */

-webkit-box-shadow: 0px 5px 5px rgba(100, 100, 100, 0.75);
-moz-box-shadow:    0px 5px 5px rgba(100, 100, 100, 0.75);
box-shadow:         0px 5px 5px rgba(100, 100, 100, 0.75);}

#follow {position: fixed;bottom: 0; color: #47a0d9;white-space: nowrap;width: 100%}
#follow #fb {text-align:left; margin-left:5%;float: left;}
#follow li {margin:0 10px 0 0;float: left;}
.white_up {-webkit-box-shadow: 0px -3px 8px rgba(255, 255, 174, 0.75);
-moz-box-shadow:    0px -3px 8px rgba(255, 255, 174, 0.75);
box-shadow:         0px -3px 8px rgba(255, 255, 174, 0.75);}
#head_j {background-color: rgba(255,255,255,0.1);height: 87px;width: 100%;white-space: nowrap;margin: 0;text-align: left;}
#head_j h1 {display: block;text-transform: uppercase; letter-spacing:0.02em; margin:10px 10px 0 0; text-shadow: 0 0 25px #e2f4ff;font-size: 39px;text-align: right;}

h1 {font-size: 1.5em;}
#lang {white-space: nowrap;padding: 10px 5px!important; border-top: 2px solid rgba(226,244,255,0.6)!important;border-bottom: 2px solid rgba(226,244,255,0.6)!important;text-align: left;margin-bottom: 5px;}
span#lang {margin-left:10px;}
#lang img {width: 45px; margin-right: 2px;}
#lang a {margin:0;padding:0;opacity:0.7; filter: alpha(opacity=70);}
#lang #active_lang a, #lang a:hover {opacity:1; filter: alpha(opacity=100);}
#main_content {color: #000;}
#poster {display: block; font-size: 0.1em;}
#poster img {display: inline-block;height: 33%;padding:0 0;margin: 0;}
#posters li, {float: left;width: 33%;}
#trailer {position: relative;}
#trailer iframe {position: absolute;top: 0;left: 0;width:100%; height:100%;box-shadow:0 0 5px #000;}
[role="article"] h1 {padding: 0;margin-top: -50px;color: #e2f4ff;font-size: 2em; text-transform: uppercase; text-shadow:0 0 2px #000;}
.wrapper {padding: 0;margin: 0 0 200px 0;text-align: center;background-color: rgba(255,255,255,0.1);height: 100vh;width: 100vw;}
ul, li {list-style:none;}
.red, .red a {font-color: #f00;}




/* ==========================================================================
   Styling and layout for screen media (mobile first)
   ========================================================================== */

@media screen {
/* Layout
   ========================================================================== */

body {margin: 0;}
.container {margin:0 auto 0 auto;max-width: 70em; }
article, articleBodyStart {margin-bottom: 0;text-align: left;padding:0.5em 1em 0.5em 0;}
[role="article"] p img {float: left;border:1px solid black;margin:0 15px 15px 0;}
[itemprop="articleBody"] {background-color: #e2f4ff;padding:12px 15px;box-shadow:0 0 15px #e2f4ff;opacity:0.85;filter: alpha(opacity=85);}
[itemprop="articleBody"] p {padding:7px 20px;}
[itemprop="articleBodyTrailer"] {background-color: #e2f4ff;padding: 0;box-shadow:0 0 15px #e2f4ff;}
[itemprop="articleBodyTrailer"] p {padding:0;}

/* Links
   ========================================================================== */

[itemprop="articleBody"] a {text-decoration: underline;}
h4 a {text-decoration:none!important;font-weight:normal;}
a {text-decoration: none; color: #000; -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5);}
a:hover, a:active {outline: 0;}
a:active {top: 1px;}
a:focus {outline: thin dotted #06f;}
#foot a {color: #e3f4ff!important;}
#head_j h1 a {color: #f60000;}
#head_j h1 a:hover {color: #f00;}
#page_nav a {color:#e3f4ff;}
#page_nav a:hover {color:#f00;}
#navbar a {display: inline-block;}

/* Typography
   ========================================================================== */

body { font-family: 'Roboto Condensed', 'Fjalla One', Helvetica, sans-serif;font-size: 18px;line-height: 1.3;color: #e2f4ff;}
h1 {font-family: Impact, Techno, Arial, Helvetica, sans-serif; font-size: 28px;line-height: 34px; letter-spacing: -1px; margin:0 0;}
h1:first-child {margin-top: 0;}
h4 {font-family: "Fjalla One", Helvetica, Impact, sans-serif; font-size: 16px; text-transform:uppercase; margin: 0;padding:0;}
#page_nav {font-family: "Fjalla One", Helvetica, Impact, sans-serif; }
small, .small {font-size: 12px;}


/* Embedded content
   ========================================================================== */

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

/* image alignments */
img.align-left {float: left;margin: 1em 1em 1em 0;}
img.align-right {float: right;margin: 1em 0 1em 1em;}
img.align-center {display: block; margin: 1em auto;}


/* Lists
   ========================================================================== */

#materials-text-list {
  list-style: none;
  margin: 0 0 0.5em 0;
  padding: 0;
  border-top: solid 1px #000;
}

#materials-text-list [role="article"] p {
  margin: 0 0 0.5em 0;
  padding: 0;}

[itemprop="description"] p {padding: 0 0 0.5em 0;margin: 0;}

#article-list li {
  padding: 0.5em 0 0 1em;
  margin: 0;
}


/* Forms
   ========================================================================== */

/* improves appearance and consistency in all browsers */
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  vertical-align: baseline;
  /* improves appearance and consistency in IE7 */
  *vertical-align: middle;
}

/* suppress red glow that Firefox adds to form fields by default, even when user is still typing
   add focus glow on form elements and kill phantom spacing and dotted border that appears in Firefox */
button:invalid,
a.button:invalid,
input:invalid,
input[type="button"]:invalid,
input[type="reset"]:invalid,
input[type="submit"]:invalid,
textarea:invalid {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
button::-moz-focus-inner,
a.button::-moz-focus-inner,
input::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
textarea::-moz-focus-inner {
  border: 0;
  padding: 0;
}
button:focus,
a.button:focus,
input:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
select:focus,
textarea:focus {
  -webkit-box-shadow: 0 0 7px #0066ff;
  -moz-box-shadow: 0 0 7px #0066ff;
  box-shadow: 0 0 7px #0066ff;
  /* Opera */
  z-index: 1;
}

  /* remove inner padding and search cancel button in webkit on OS X */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

input[type="file"]:focus,
input[type="file"]:active,
input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

input[type="color"] {
  padding: 0;
  height: 2.33333333333333em;
}

/* make sure disable elements really are disabled */
button[disabled],
input[disabled],
input[type="button"][disabled],
input[type="reset"][disabled],
input[type="submit"][disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled],
span.disabled {
  opacity: 1;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  border: solid 1px #d2d2d2 !important;
  text-shadow: none !important;
  color: #888888 !important;
  background: #eee !important;
  cursor: default !important;
  top: 0 !important;
}


/* Buttons
   ========================================================================== */

button,
[role] a.button,
span.disabled,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  /* remove iOS Safari default styling */
  -webkit-appearance: none;
  -webkit-background-clip: padding;
  -khtml-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  width: auto;
  overflow: visible;
  font-family: Arial, Helvetica, sans-serif;
  /* 12px */
  font-size: .85714285714286em;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border: solid 1px #e1a61a;
  -moz-border-radius: .35714285714286em;
  border-radius: .35714285714286em;
  padding: .5em 1em;
  display: inline-block;
  /* display and zoom IE7 fix for display:inline-block */
  *display: inline;
  *zoom: 1;
  color: #333;
  outline: 0;
  background-color: #ffda44;
  /* Konqueror */
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
  /* Safari4+, Chrome */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffda44), to(#fabc2b));
  /* Safari5.1+, Chrome10+ */
  background-image: -webkit-linear-gradient(#ffda44, #fabc2b);
  /* Firefox3.6 */
  background-image: -moz-linear-gradient(#ffda44, #fabc2b);
  /* Opera11.10+ */
  background-image: -o-linear-gradient(#ffda44, #fabc2b);
  /* CSS3 Compliant */
  background-image: linear-gradient(#ffda44, #fabc2b);
}

}




/* ==========================================================================
   Additional layout for screen media 672px and up
   ========================================================================== */


@media only screen and (min-width: 48em) {
#awards {position: absolute;right: 20px;top: 7px;}
#follow #fb {margin-left:5%;}
#head_j h1 {font-size: 47px; float: left;margin-left: 70px; }
#main_content {width: 80%;margin:0 auto;}
}

/* ==========================================================================
   Additional layout for screen media 1280px and up
   ========================================================================== */

@media only screen and (min-width: 80em) {
.container {width: 80%;}
}


/* ==========================================================================
   Styling and layout for print media
   ========================================================================== */

@media print {
body {display: none;}
}