@font-face {
    font-family: "Gotham Rounded";
    font-weight: bold;
    src: url("fonts/gothamrnd-bold.ae8f19f441b3.otf");
}

@font-face {
    font-family: "Gotham Rounded";
    font-weight: normal;
    src: url("fonts/gothamrnd-light.1549fe8fd297.otf");
}

@font-face {
    font-family: "Gotham";
    font-weight: normal;
    src: url("fonts/gothamlight.bceda3fae660.otf");
}

@font-face {
    font-family: "Gotham";
    font-weight: bold;
    src: url("fonts/gothambold.722c5f898bbc.otf");
}

@font-face {
    font-family: "Kontinent";
    font-weight: normal;
    src: url("fonts/kontinent.86c74505f3ab.otf");
}

@font-face {
    font-family: "GT Pressura Mono";
    font-weight: normal;
    src: url("fonts/gtpressuramono.5358c35eb0aa.ttf");
}

@font-face {
    font-family: "Catalogue Regular";
    font-weight: normal;
    src: url("fonts/catalogueregular.03a421175379.otf");
}


html { height: 100%; margin: 0; padding: 0; }
body { min-height: 100%; margin: 0; padding: 0; }

#index--wrapper { margin: 0 auto; width: 100%; }
#mainmenu { padding: 0 1em; }
.menu--anim { -webkit-animation: wait-fadein 4s; animation: wait-fadein 4s; }.
.menu--fast-anim { -webkit-animation: fadein 1s; animation: fadein 1s; }
#logo { width: 100%; }
ul#directors { margin: 0.5em 0; font-weight: bold; font-size: 0.8em; }
@media screen and (min-width: 600px) {
    #index--wrapper { flex: 0 0 auto; display: flex; flex-flow: row nowrap; align-items: center; position: absolute; min-height: 100%; margin: 0 0; }
    #index--left { flex: 1 10 20em; }
    #index--mid { flex: 1 1 17em; text-align: center; }
    #index--right { flex: 1 1 20em; padding-bottom: 107px/* replace in JS */; height: 100%; box-sizing: border-box; display: flex; align-items: center;}
    .flex-filler { flex: 1 1 0; }
    #mainmenu { flex: 0 0 auto; }
    ul#directors { font-size: 1em; }
    #logo { width: 100%; max-width: 100%; }
}

#leftblock { font-weight: normal; margin: 1em auto; }
.textblock { margin: 0 1.2em; }
.content--text {
    padding: 2.5em 1.2em 0 1.2em;
    max-width: 50em;
    text-align: justify;
    margin-right: 0;
}
@media screen and (min-width: 450px) {
    .content--text { padding: 2.5em 0 0 0; }
}
@media screen and (min-width: 450px) and (max-width: 849px) {
    #leftblock, #content { width: 400px; margin: 2em auto; }
    .textblock { margin: 0; }
}
@media screen and (min-width: 850px) and (max-width: 1600px) {
    #leftblock { width: 16em; float: left; padding: 1.3em 4em 2em 4em; margin: 0; }
    #content { margin-left: 24em; margin-top: 2em; margin-right: 1em; }
    .textblock { margin: 0; }
    .content--text { margin-right: 3em; }
}
@media screen and (min-width: 1601px) {
    #leftblock { width: 20em; float: left; padding: 1.3em 5em 2em 5em; margin: 0; }
    #content { margin-left: 30em; margin-top: 4em; margin-right: 2em; }
    .textblock { margin: 0; }
    .content--text { margin-right: 2em; }
}

#leftblock h1 { text-align: center; font-weight: bold; }
#leftblock .back { text-align: center; }
#leftblock .back img { width: 70%; display: inline-block; margin-top: 1em; }
#leftblock .back.contact img { width: 89%; margin-top: -0.5em; }
.textblock { text-align: justify; font-size: 90%; }
.center { text-align: center; }
.contactblock { margin-left: 17.3%; }

.cards { padding: 1em; }
.cards .card { margin-bottom: 1em; }
.cards .card a { text-transform: none; }
.icons a img { width: 1.7em; height: auto; }
@media screen and (min-width: 850px) {
    .cards { padding: 3.5em 2em 4em 0; position: relative; max-width: 31em; }
    .cards .card { float: left; margin-top: 1em; margin-bottom: 0; width: 15em; max-width: 15em; font-size: 0.875em; }
}

.v-card-dl { font-size: 0.8em; }

a { text-decoration: none; text-transform: uppercase; }

ul.menu { list-style: none; padding-left: 0; }
ul#mainmenu { font-size: 1.15em; }

h1 { text-transform: uppercase; font-size: 1.6em; }
h1 .subtitle { text-transform: none; font-size: 0.6em; white-space: nowrap; }

/* thumbnail stuff */

.dl-wrapper { max-width: 100%; margin-bottom: 1em; }
#grid .item { flex: 0 0 auto; display: flex; flex-flow: column nowrap; align-items: center; position: relative; width: 100%; background-color: black; box-sizing: border-box; overflow: hidden; padding-top: 56.25%; }
#grid img { position: absolute; top: 0; left: 0; border: none; width: auto; height: 100%; }
@media screen and (max-width: 449px) {
    #grid img { left: 50%; transform: translate(-50%, 0); }
}
@media screen and (min-width: 450px) {
    #grid { display: flex; flex-flow: row wrap; align-items: bottom; }
    #grid .item { padding-top: 0; }
    #grid img { flex: 1 1 auto; position: static; }
    transform: none;
}
@media screen and (min-width: 450px) and (max-width: 849px) {
    #grid .item { width: 400px; }
    #grid img { width: auto; height: 226px; }
}
@media screen and (min-width: 850px) {
    .dl-wrapper { margin-bottom: 0.3em; }
    #grid { padding: 1.3em 1em 1em 0; }
    #grid .item { margin-right: 0.3em; width: 400px; height: 226px; padding-top: 0; }
    #grid img { width: auto; height: 100%; }
}
#grid a { color: black; }
#grid .item .idesc { display: block; height: 1.5em; font-size: 0.6em; }
#grid .item .vid-desc { position: absolute; bottom: 0.5em; left: 0.5em; color: white; }
#grid .item .title { text-transform: none; font-size: 0.85em; }
#grid .item .sub { text-transform: none; font-size: 0.7em; }
#grid .item .sub.first { margin-top: 0.5em; }
#grid .item .sub > .director { text-transform: uppercase; }

.dl-wrapper { }
.dl-list { text-align: right; font-size: 0.7em; margin-right: 0.4em; height: 0; overflow: hidden; }
#grid .dl-wrapper:hover .dl-list { overflow: visible; height: 20px; padding-top: 0.3em; }
#grid .dl-list a:hover { color: white; }

/* player stuff */
#player, .videoplayer { display:block; width:720px; height:480px; }
#fancy_ajax { overflow:hidden; }
.jw-icon-inline.jw-logo-button { display: none; }

@keyframes wait-fadein {
    from { opacity: 0; }
    37.5% { opacity: 0; }
    to   { opacity: 1; }
}

@-webkit-keyframes wait-fadein {
    from { opacity: 0; }
    37.5% { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fadein {
    from { opacity: 0; }
    20%  { opacity: 80%; }
    to   { opacity: 1; }
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    20%  { opacity: 80%; }
    to   { opacity: 1; }
}

#video_wrapper {
    display: none;
    width: 95%;
    height: auto;
    min-height: 200px;
}

#login_form {
    padding: 0 1em;
}
@media screen and (max-width: 599px) {
    #login_form { text-align: center; }
}
#login_form p {
    display: inline-block;
    margin: 0;
}
#login_form input, #login_form input[type="submit"] {
    border: 1px solid white;
    background-color: white;
    border-radius: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}
#login_form input#id_password {
    margin-right: 0;
}
#login_form input[type="submit"] {
    margin-left: 0;
}
#login_form .errorlist {
    padding-left: 0;
}
#login_form .errorlist li {
    list-style: none;
}