@import url(https://fonts.googleapis.com/css?family=Archivo+Black);
img, legend {
    border: 0 none;
}
h1, h2, h3, h4, h5, h6, legend, p, td, th, ul {
    padding: 0;
}
.event, .feed, .feed .grid-sizer {
    width: 100%;
}
.event, .feed, .footer, .hero {
    max-width: 1042px;
}
.hero__button, a {
    text-decoration: none;
}
.hero__content::after, .movie__list::after, .supporter__list::after, .toplist__content::after, .toplist__instagram::after, .toplist__item::after, .toplist__main::after {
    clear: both;
}
body {
    background: #0c0e11 url(https://images.staticjw.com/for/4341/hero-new.jpg) no-repeat scroll center top / 100% auto;
    color: #fff;
    margin: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden], template {
    display: none;
}
a {
    background-color: transparent;
}
a:active, a:hover {
    outline: 0 none;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, optgroup, strong {
    font-weight: 700;
}
dfn {
    font-style: italic;
}
mark {
    background: #ff0 none repeat scroll 0 0;
    color: #000;
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 1em 40px;
}
hr {
    box-sizing: content-box;
    height: 0;
}
pre, textarea {
    overflow: auto;
}
code, kbd, pre, samp {
    /*font-family: monospace,monospace;*/
	font-family: 'Archivo Black', sans-serif;
    font-size: 1em;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
.socialButton--facebook::before, .socialButton--twitter::before {
    font-style: normal;
    font-weight: 400;
}
button {
    overflow: visible;
}
.socialPost, .supporter__content, .ui-videoPlayer {
    overflow: hidden;
}
button, select {
    text-transform: none;
}
.counter__label, .counter__verticalText, .feed__button, .hero__button, .hero__link, .infoBox__title, .movie__title, .supporter__link, .toplist__label, .ui-button, .ui-paragraph a {
    text-transform: uppercase;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0 none;
    padding: 0;
}
input {
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="search"] {
    box-sizing: content-box;
}
fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


html {
    box-sizing: border-box;
    /*font-family: avenir-medium;*/
	font-family: 'Arial', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.feed__button, .hero__button, .hero__link, .movie__title, .supporter__button, .supporter__link, .toplist__author, .toplist__label, .toplist__link {
    /*font-family: avenir-black;*/
	font-family: 'Archivo Black', sans-serif;
}
*, *::after, *::before {
    box-sizing: inherit;
}
h1, h2, h3, h4, h5, h6, p {
    font-size: 1em;
    font-weight: 400;
    margin: 0;
}
b, em, strong {
    font-style: normal;
}
ul {
    list-style: outside none none;
    margin: 0;
}
.event, .feed {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.event {
    margin: 0 auto;
    padding-bottom: 1.5em;
}
.event__image {
    display: block;
    margin: 1.5em auto 0;
    width: 100%;
}
.feed {
    margin: 0 auto;
}
@media all and (min-width: 30em) and (max-width: 47.99em) {
.feed .grid-sizer {
    width: calc(50% - 0.5em);
}
}
@media all and (min-width: 48em) and (max-width: 61.99em) {
.feed .grid-sizer {
    width: calc(33.3333% - 0.6666em);
}
}
@media all and (min-width: 62em) {
.feed .grid-sizer {
    width: calc(25% - 0.75em);
}
}
@media all and (min-width: 30em) {
.feed .gutter-sizer {
    width: 1em;
}
}
.feed__item {
    margin-bottom: 1em;
    width: 100%;
}
@media all and (min-width: 30em) and (max-width: 47.99em) {
.feed__item {
    float: left;
    width: calc(50% - 0.5em);
}
}
@media all and (min-width: 48em) and (max-width: 61.99em) {
.feed__item {
    float: left;
    width: calc(33.3333% - 0.6666em);
}
}
@media all and (min-width: 62em) {
.feed__item {
    float: left;
    width: calc(25% - 0.75em);
}
}
.feed__button {
    background-color: #262626;
    color: #fff;
    display: block;
    padding: 1em 1.5em;
    transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}
.footer, .hero {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.footer__content, .footer__image {
    display: inline-block;
    margin-right: -4px;
}
.feed__button:hover {
    background-color: #313131;
}
.footer {
    margin: 4.5em auto;
    width: 100%;
}
.footer__content {
    vertical-align: top;
    width: 75%;
}
@media all and (max-width: 47.99em) {
.footer__content {
    width: 100%;
}
}
.footer__image {
    padding-top: 1em;
    text-align: right;
    vertical-align: middle;
    width: 25%;
}
.counter, .hero__options, .movie__social, .socialButton {
    text-align: center;
}
.hero {
    margin: 0 auto;
    padding-bottom: 1.5em;
    width: 100%;
}
.hero__topbar {
    padding-top: 0.75em;
}
.hero__share {
    float: left;
}
.hero__startpage {
    float: right;
}
@media all and (max-width: 47.99em) {
.footer__image {
    text-align: center;
    width: 100%;
}
.hero__share {
    margin-left: -0.75em;
}
.hero__startpage {
    margin-right: -0.75em;
}
}
.hero__link {
    color: #fff;
    font-size: 0.75em;
    transition: color 0.3s ease 0s;
}
.hero__link:hover {
    color: #ffed00;
}
.hero__options {
    padding: 3em 0;
}
@media all and (min-width: 48em) {
.hero__options {
    padding: 6em 0 7em;
}
}
.movie, .supporter {
    padding-bottom: 2em;
    padding-right: 1.5rem;
}
.hero__item {
    margin-bottom: 0.5em;
}
.hero__button {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent #fff;
    border-image: none;
    border-style: solid;
    border-width: 1px;
    color: #fff;
    display: inline-block;
    transition: border 0.3s ease 0s, color 0.3s ease 0s;
}
.hero__button--external, .hero__button:hover {
    border-bottom-color: #ffed00;
    color: #ffed00;
}
.hero__button--external:hover {
}
.hero__image {
    display: block;
    margin: 2.5em auto 0;
    max-width: 240px;
    width: 100%;
}
@media all and (max-width: 29.99em) {
.hero__image {
    max-width: 180px;
}
}
.movie, .supporter, .toplist {
    max-width: 1042px;
}
.hero__content::after, .hero__content::before {
    content: "";
    display: table;
}
@media all and (min-width: 48em) {
.hero__about {
    float: left;
    width: calc(100% - 350px);
}
.hero__counter {
    float: left;
    padding-left: 2em;
    width: 350px;
}
}
.movie, .supporter {
    padding-left: 1.5rem;
}
.movie {
    margin: 0 auto;
    width: 100%;
}
.movie__list {
    margin-top: 3em;
}
.movie__list::after, .movie__list::before {
    content: "";
    display: table;
}
@media all and (max-width: 61.99em) {
.movie__item {
    float: left;
    margin-left: 5%;
    margin-top: 2em;
    width: calc(50% - 2.5%);
}
.movie__item:nth-child(2n+1) {
    clear: both;
    margin-left: 0;
}
.movie__item:nth-child(1), .movie__item:nth-child(2) {
    margin-top: 0;
}
}
@media all and (min-width: 62em) {
.movie__item {
    float: left;
    margin-left: 2.1em;
    margin-top: 2em;
    width: calc(33.3333% - 1.4em);
}
.movie__item:nth-child(3n+1) {
    clear: both;
    margin-left: 0;
}
.movie__item:nth-child(1), .movie__item:nth-child(2), .movie__item:nth-child(3) {
    margin-top: 0;
}
}
.movie__title {
    line-height: 1.2;
    margin-top: 0.5em;
}
.movie__social {
    margin-top: 2em;
}
.supporter {
    margin: 0 auto;
    width: 100%;
}
.supporter__info, .supporter__subtitle {
    margin-bottom: 0.25em;
}
.supporter__info {
    background-color: #262626;
    padding: 1.5em;
}
.supporter__list::after, .supporter__list::before {
    content: "";
    display: table;
}
.supporter__listItem {
    margin-top: 1.5em;
}
.supporter__listItem:first-child {
    margin-top: 0;
}
@media all and (min-width: 48em) {
.supporter__listItem {
    float: left;
    margin-left: 1em;
    margin-top: 0.5em;
    width: calc(33.3333% - 0.67em);
}
.supporter__listItem:nth-child(3n+1) {
    clear: both;
    margin-left: 0;
}
.supporter__listItem:nth-child(1), .supporter__listItem:nth-child(2), .supporter__listItem:nth-child(3) {
    margin-top: 0;
}
}
.supporter__link {
    background-color: #262626;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 0.875em;
    padding-bottom: 1px;
    transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s, border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}
.supporter__link:hover {
    border-color: #ffed00;
    color: #ffed00;
}
.supporter__button {
    background-color: #262626;
    color: #fff;
    display: block;
    padding: 1em 1.5em;
    text-transform: uppercase;
    transition: background-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}
.supporter__button:hover {
    background-color: #313131;
}
.supporter__button.is-open {
    background-color: #575757;
}
.supporter__button--external {
    background-color: #ffed00;
    color: #000;
    transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
}
.supporter__button--external:hover {
    background-color: #262626;
    color: #ffed00;
}
.toplist {
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: 100%;
}
.toplist__main::after, .toplist__main::before {
    content: "";
    display: table;
}
@media all and (min-width: 48em) {
.toplist--posts1 .toplist__header {
    float: left;
    padding-right: 1em;
    width: calc(100% - 480px);
}
}
@media all and (min-width: 62em) {
.toplist--posts1 .toplist__header {
    width: 42%;
}
}
.toplist__content {
    padding: 1em 0;
    position: relative;
}
.toplist__content::after, .toplist__content::before {
    content: "";
    display: table;
}
@media all and (min-width: 48em) {
.toplist--posts1 .toplist__content {
    float: left;
    padding-left: 1em;
    width: 480px;
}
}
@media all and (min-width: 62em) {
.toplist--posts1 .toplist__content {
    width: 58%;
}
}
.toplist__fade {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 15%;
    z-index: 10;
}
.toplist--posts1 .toplist__fade, .toplist--posts2 .toplist__fade {
    display: none;
}
@media all and (max-width: 61.99em) {
.toplist__fade {
    width: 10%;
}
}
.toplist__fade--left {
    background: rgba(0, 0, 0, 0) url(https://images.staticjw.com/for/9795/fade-left.png) repeat-y scroll 0 0 / 100% auto;
    left: 0;
}
.toplist__fade--right {
    background: rgba(0, 0, 0, 0) url(https://images.staticjw.com/for/4441/fade-right.png) repeat-y scroll 0 0 / 100% auto;
    right: 0;
}
@media all and (max-width: 29.99em) {
.toplist__fade {
    display: none;
}
.toplist .toplist__carousel {
    margin: 0 -0.5em;
}
}
.toplist__item {
    padding: 0 1em;
    width: 65%;
}
.toplist__item::after, .toplist__item::before {
    content: "";
    display: table;
}
@media all and (max-width: 29.99em) {
.toplist__item {
    padding: 0.5em;
    width: 100%;
}
}
@media all and (min-width: 30em) and (max-width: 61.99em) {
.toplist__item {
    padding: 0 0.5em;
    width: 75%;
}
}
@media all {
.toplist--posts1 .toplist__item {
    padding: 0;
    width: 100%;
}
.toplist--posts2 .toplist__item {
    float: left;
    width: 50%;
}
.toplist--posts2 .toplist__item:first-child {
    padding-left: 0;
}
.toplist--posts2 .toplist__item:last-child {
    padding-right: 0;
}
}
.toplist .flickity-page-dots {
    bottom: -1.5em;
}
.toplist .flickity-page-dots .dot {
    background: #ffed00 none repeat scroll 0 0;
}
.toplist .flickity-page-dots .dot .is-selected {
    opacity: 0.5;
}
.toplist .flickity-prev-next-button, .toplist .flickity-prev-next-button:hover {
    background: #ffed00 none repeat scroll 0 0;
    z-index: 12;
}
@media all and (max-width: 61.99em) {
.toplist .flickity-prev-next-button, .toplist .flickity-prev-next-button:hover {
    display: none;
}
}
.toplist__instagram {
    background-color: #262626;
    margin-bottom: 0.5em;
    padding: 0.5em;
}
.toplist__instagram::after, .toplist__instagram::before {
    content: "";
    display: table;
}
.toplist__image {
    display: block;
    max-width: 100%;
    width: 100%;
}
@media all and (max-width: 47.99em) {
.toplist__image {
    margin-bottom: 0.5em;
}
}
.toplist__label {
    color: #ffed00;
}
@media all and (min-width: 48em) {
.toplist__image {
    float: left;
    margin-left: 1em;
    width: calc(50% - 0.5em);
}
.toplist__image:first-child {
    margin-left: 0;
}
.toplist__info {
    float: left;
    margin-left: 1em;
    width: calc(50% - 0.5em);
}
.toplist__info:first-child {
    margin-left: 0;
}
.toplist__label {
    margin-top: 0.5em;
}
}
.toplist__author {
    color: #ffed00;
    line-height: 1.2;
    margin-top: 0.25em;
}
.toplist__link {
    color: #ffed00;
}
.toplist__link--medium {
    /*font-family: avenir-medium;*/
	font-family: 'Archivo Black', sans-serif;
}
.counter__verticalText, .ui-button {
    /*font-family: avenir-black;*/
	font-family: 'Archivo Black', sans-serif;
}
.toplist__text {
    color: #c4c4c4;
    line-height: 1.2;
    margin-top: 0.25em;
}
.ui-button {
    background-color: #262626;
    margin-bottom: 0.125em;
    padding: 1em;
}
.ui-button--external {
    background-color: #ffed00;
    color: #000;
}
.counter {
    font-size: 0.875em;
    margin-bottom: 2em;
    padding-left: 4.5em;
    position: relative;
}
.counter__title {
    background: #877451 none repeat scroll 0 0;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 4.5em;
}
.counter__verticalText {
    left: 50%;
    line-height: 1.2;
    padding-top: 0.25em;
    position: absolute;
    top: 50%;
    transform: rotate(-90deg) translateY(-50%) translateX(-50%);
    transform-origin: left top 0;
}
.counter__number {
    background: #000 none repeat scroll 0 0;
    font-family: avenir-black;
    font-size: 3.5em;
    line-height: 1.1;
    padding: 0.2em;
}
.counter__label, .infoBox__title, .ui-paragraph a {
	font-family: 'Archivo Black', sans-serif;
    /*font-family: avenir-black;*/
}
.socialButton--facebook::before, .socialButton--twitter::before {
    display: inline-block;
    font-size: 2em;
    line-height: 1;
    text-transform: none;
}
.counter__label {
    background: #ffed00 none repeat scroll 0 0;
    color: #000;
    display: block;
    padding: 0.25em;
    transition: color 0.3s ease 0s, background 0.3s ease 0s;
}
.counter__label--link:hover {
    background: #262626 none repeat scroll 0 0;
    color: #ffed00;
}
.ui-divider {
    background-color: #ffed00;
    border: medium none;
    height: 2px;
    margin: 3em 0 1em;
    width: 40px;
}
@media all and (min-width: 48em) {
.ui-divider {
    height: 4px;
    margin: 2em 0;
    width: 60px;
}
}
.ui-divider--full {
    width: 100%;
}
.infoBox {
    margin-bottom: 1.5em;
}
.infoBox:last-child {
    margin-bottom: 0;
}
.infoBox__text {
    color: #c4c4c4;
}
.infoBox__link {
    color: #ffed00;
    text-decoration: underline;
}
.ui-paragraph p {
    color: #eee;
    margin-bottom: 1em;
    text-shadow: 0 1px 0 #000, 0 0 0.75em rgba(0, 0, 0, 0.5);
}
.ui-paragraph a {
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 0.875em;
    padding-bottom: 1px;
    transition: color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s, border-color 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}
.socialButton--facebook::before, .socialButton--twitter::before {
    font-family: icomoon;
    padding-top: 1px;
}
.ui-paragraph a:hover {
    border-color: #ffed00;
    color: #ffed00;
}
.socialButton {
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    height: 4em;
    margin: 0 0.5em;
    padding: 1em;
    transition: background-color 0.3s ease 0s;
    vertical-align: middle;
    width: 4em;
}
.socialButton--facebook {
    background-color: #3b5998;
}
.socialButton--facebook:hover {
    background-color: #324c81;
}
.socialButton--facebook::before {
    content: "";
    font-variant: normal;
}
.socialButton--twitter {
    background-color: #4099ff;
}
.socialButton--twitter:hover {
    background-color: #107fff;
}
.socialButton--twitter::before {
    content: "";
    font-variant: normal;
}
.socialPost__author, .socialPost__link, .ui-title {
   /* font-family: avenir-black;*/
   font-family: 'Archivo Black', sans-serif;
}
.socialPost {
    background-color: #262626;
    padding: 0.5em;
}
.socialPost__figure {
    display: block;
    margin-bottom: 0.75em;
    padding-top: 100%;
    position: relative;
}
.socialPost__playIcon {
    background: rgba(0, 0, 0, 0) url(https://images.staticjw.com/for/6086/play-icon.png) repeat scroll center center / contain ;
    font-size: 5em;
    height: 1em;
    left: 50%;
    margin: -0.5em 0 0 -0.5em;
    position: absolute;
    top: 50%;
    width: 1em;
    z-index: 2;
}
.socialPost__image {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.socialPost__author {
    color: #ffed00;
    line-height: 1.2;
}
.socialPost__link {
    color: #ffed00;
}
.socialPost__inline {
    color: #fff;
    text-decoration: underline;
    transition: color 0.3s ease 0s;
}
.socialPost__inline:hover {
    color: #ffed00;
}
.socialPost__text {
    color: #c4c4c4;
    line-height: 1.2;
    margin-top: 0.25em;
}
.ui-title {
    margin-bottom: 1em;
    text-transform: uppercase;
}
.ui-videoPlayer {
    height: 0;
    padding-bottom: 56%;
    position: relative;
    width: 100%;
}
.ui-videoPlayer embed, .ui-videoPlayer iframe, .ui-videoPlayer object {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}







.flickity-enabled {
    position: relative;
}
.flickity-enabled:focus {
    outline: 0 none;
}
.flickity-viewport {
    height: 100%;
    overflow: hidden;
    position: relative;
}
.flickity-slider {
    height: 100%;
    position: absolute;
    width: 100%;
}
.flickity-enabled.is-draggable {
    -moz-user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
    cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: grabbing;
}
.flickity-prev-next-button {
    background: hsla(0, 0%, 100%, 0.75) none repeat scroll 0 0;
    border: medium none;
    border-radius: 50%;
    cursor: pointer;
    height: 44px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
}
.flickity-prev-next-button:hover {
    background: #fff none repeat scroll 0 0;
}
.flickity-prev-next-button:focus {
    box-shadow: 0 0 0 5px #09f;
    outline: 0 none;
}
.flickity-prev-next-button:active {
    opacity: 0.6;
}
.flickity-prev-next-button.previous {
    left: 10px;
}
.flickity-prev-next-button.next {
    right: 10px;
}
.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
    left: 10px;
    right: auto;
}
.flickity-prev-next-button:disabled {
    cursor: auto;
    opacity: 0.3;
}
.flickity-prev-next-button svg {
    height: 60%;
    left: 20%;
    position: absolute;
    top: 20%;
    width: 60%;
}
.flickity-prev-next-button .arrow {
    fill: #333;
}
.flickity-prev-next-button.no-svg {
    color: #333;
    font-size: 26px;
}
.flickity-page-dots {
    bottom: -25px;
    line-height: 1;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
.flickity-rtl .flickity-page-dots {
    direction: rtl;
}
.flickity-page-dots .dot {
    background: #333 none repeat scroll 0 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: 0 8px;
    opacity: 0.25;
    width: 10px;
}
.flickity-page-dots .dot.is-selected {
    opacity: 1;
}