@import url("https://fonts.googleapis.com/css2?family=Staatliches&display=swap");
@media (max-width: 767px) {
  .hidden-xs,
  tr.hidden-xs,
  th.hidden-xs,
  td.hidden-xs {
    display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm,
  tr.hidden-sm,
  th.hidden-sm,
  td.hidden-sm {
    display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md,
  tr.hidden-md,
  th.hidden-md,
  td.hidden-md {
    display: none !important; } }
@media (min-width: 1200px) {
  .hidden-lg,
  tr.hidden-lg,
  th.hidden-lg,
  td.hidden-lg {
    display: none !important; } }
a {
  cursor: pointer; }
  a:hover {
    text-decoration: none; }
  a:focus {
    text-decoration: none; }

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

.clearfix:after {
  clear: both; }

.clearfix {
  *zoom: 1; }

ul {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0;
  margin: 0;
  padding: 0; }

*:focus {
  outline: 0; }

.relative {
  position: relative; }

.hidden {
  display: none; }

.fullWidth {
  width: 100%; }

.negativeIndent {
  text-indent: -999999px; }

.reverseFloat {
  float: right; }

.makeDiv {
  display: inline-block; }

.centeredImage {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.italic {
  font-style: italic; }

.noMargin {
  margin: 0; }

.noMarginTop {
  margin-top: 0; }

.noMarginBottom {
  margin-bottom: 0; }

.noMarginLeft {
  margin-left: 0; }

.noMarginRight {
  margin-right: 0; }

.noPadding {
  padding: 0; }

.noPaddingTop {
  padding-top: 0; }

.noPaddingBottom {
  padding-bottom: 0; }

.noPaddingLeft {
  padding-left: 0; }

.noPaddingRight {
  padding-right: 0; }

.grayscale {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  /* For Webkit browsers */
  filter: gray;
  /* For IE 6 - 9 */
  -webkit-transition: all .4s ease;
  /* Transition for Webkit browsers */ }

.grayscale:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none; }

.invertscale {
  filter: invert(50%);
  -webkit-filter: invert(50%);
  /* For Webkit browsers */
  filter: gray;
  /* For IE 6 - 9 */
  -webkit-transition: all .4s ease;
  /* Transition for Webkit browsers */ }

.invertscale:hover {
  filter: invert(0%);
  -webkit-filter: invert(0%);
  filter: none; }

/* columns of same height styles */
.container-xs-height {
  display: table;
  padding-left: 0px;
  padding-right: 0px; }

.row-xs-height {
  display: table-row; }

.col-xs-height {
  display: table-cell;
  float: none; }

@media (min-width: 768px) {
  .container-sm-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px; }

  .row-sm-height {
    display: table-row; }

  .col-sm-height {
    display: table-cell;
    float: none; } }
@media (min-width: 992px) {
  .container-md-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px; }

  .row-md-height {
    display: table-row; }

  .col-md-height {
    display: table-cell;
    float: none; } }
@media (min-width: 1200px) {
  .container-lg-height {
    display: table;
    padding-left: 0px;
    padding-right: 0px; }

  .row-lg-height {
    display: table-row; }

  .col-lg-height {
    display: table-cell;
    float: none; } }
/* vertical alignment styles */
.col-top {
  vertical-align: top; }

.col-middle {
  vertical-align: middle; }

.col-bottom {
  vertical-align: bottom; }

.rowNo, .contNo, .colNo {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0; }

.visible-xs {
  display: none; }
  @media only screen and (max-width: 767px) {
    .visible-xs {
      display: block; } }

a {
  color: inherit;
  text-decoration: none; }
  a:hover {
    color: inherit; }
  a:active {
    color: inherit; }

p {
  margin: 0; }

.slick-slider *:focus {
  outline: 0; }

.swiper-button-disabled {
  opacity: .5; }

.container {
  max-width: 100%;
  padding: 0 32px; }

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 925px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  pointer-events: none;
  background-color: #000; }
  .loading .bar:after {
    content: '';
    width: 0;
    height: 3px;
    background: #fff;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2; }
  .loading video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .loading img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    z-index: 1;
    transform-origin: 59% 50%; }
  .loading .scroll {
    display: none;
    position: absolute;
    bottom: 32px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
    z-index: 2; }
    .loading .scroll span {
      display: inline-block;
      width: 1px;
      height: 60px;
      background: #fff;
      margin-bottom: 10px; }
  .loading:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7; }
  .loading.step {
    background-image: url(../img/loading.png); }
    .loading.step video {
      opacity: 0;
      transition: 1s; }
  .loading.active {
    transition: 1.5s;
    transform: translateY(-100%); }
    .loading.active .scroll {
      transition: .4s;
      opacity: 0; }
    .loading.active img {
      display: none; }
  .loading.page {
    z-index: 99; }
    .loading.page:after {
      display: none; }
    .loading.page video, .loading.page .scroll {
      display: none; }
    .loading.page .bar:after {
      transition: .3s;
      width: 100%; }
    .loading.page.active {
      transform: translateY(0);
      opacity: 0;
      visibility: hidden; }
  .loading.load {
    z-index: 99;
    transition: .3s; }
    .loading.load:after {
      display: none; }
    .loading.load .bar {
      display: none; }
    .loading.load video, .loading.load .scroll {
      display: none; }

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: auto;
  z-index: 98;
  opacity: 0;
  visibility: hidden;
  transition: .7s; }
  .popup.active {
    opacity: 1;
    visibility: visible; }

body {
  font-family: "Staatliches", sans-serif;
  background: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  text-transform: uppercase; }

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  margin-top: 32px;
  pointer-events: none;
  opacity: 0; }
  header .logo {
    pointer-events: auto; }
    header .logo img {
      width: 250px;
      transition: .7s; }
      @media only screen and (max-width: 767px) {
        header .logo img {
          width: 150px; } }
  header .middle {
    transition: 1s;
    transition-delay: 1s; }
  header .row {
    height: 250px;
    align-items: center;
    transition: .7s; }
  header nav {
    top: 0;
    right: 32px;
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 330px;
    transition: 1s; }
    header nav .item {
      position: relative;
      color: #fff;
      pointer-events: auto;
      font-size: 1.3rem; }
      header nav .item .sub {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 30px; }
        header nav .item .sub a {
          display: block;
          white-space: nowrap;
          margin-bottom: 5px;
          transition: opacity .4s; }
          header nav .item .sub a:hover {
            opacity: .5; }
      header nav .item:after {
        content: '';
        width: 0;
        bottom: -2px;
        position: absolute;
        left: 0;
        background: #fff;
        height: 1px;
        transition: .4s; }
      header nav .item:hover .sub {
        display: block; }
      header nav .item:hover:after {
        width: 100%; }
    @media only screen and (max-width: 767px) {
      header nav {
        width: 250px;
        right: 12px; } }
  header.load {
    opacity: 1; }
  header.first .row {
    height: calc(100vh - 32px); }
  header.first .logo img {
    width: 400px; }
    @media (min-width: 768px) and (max-width: 991px) {
      header.first .logo img {
        width: 300px; } }
    @media only screen and (max-width: 767px) {
      header.first .logo img {
        width: 200px; } }
  header.first nav {
    width: calc(100% - 64px); }
  header.active .logo {
    opacity: 0; }
  @media only screen and (max-width: 767px) {
    header {
      margin-top: 12px; } }

footer {
  background: #000;
  color: #fff;
  padding: 24px 0;
  position: relative;
  z-index: 1;
  font-weight: 300;
  font-size: 1rem; }

nav.main {
  position: fixed;
  top: 94px;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  visibility: hidden; }
  nav.main .item {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    position: relative;
    height: 0;
    border-top: 1px solid #000;
    background: #000;
    overflow: hidden;
    transition: .7s; }
    nav.main .item .img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      background-position: center;
      background-size: cover;
      transition: .4s; }
    nav.main .item:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: .3;
      z-index: 1; }
    nav.main .item span {
      position: absolute;
      z-index: 2;
      font-size: 2.6rem;
      opacity: 0; }
    nav.main .item:hover .img {
      opacity: 1; }
  nav.main.active {
    visibility: visible; }
    nav.main.active .item {
      height: 20%;
      border-color: #fff; }
      nav.main.active .item span {
        opacity: 1;
        transition: .7s;
        transition-delay: 1s; }
      nav.main.active .item:nth-of-type(1) {
        transition-delay: .2s; }
        nav.main.active .item:nth-of-type(1) span {
          transition-delay: .8s; }
      nav.main.active .item:nth-of-type(2) {
        transition-delay: .4s; }
        nav.main.active .item:nth-of-type(2) span {
          transition-delay: 1s; }
      nav.main.active .item:nth-of-type(3) {
        transition-delay: .6s; }
        nav.main.active .item:nth-of-type(3) span {
          transition-delay: 1.2s; }
      nav.main.active .item:nth-of-type(4) {
        transition-delay: .8s; }
        nav.main.active .item:nth-of-type(4) span {
          transition-delay: 1.4s; }
      nav.main.active .item:nth-of-type(5) {
        transition-delay: 1s; }
        nav.main.active .item:nth-of-type(5) span {
          transition-delay: 1.6s; }

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: 1s opacity; }
  .bg iframe {
    width: 100vw;
    height: 56.25vw;
    /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh;
    /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .bg:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7; }
  .bg.zoom iframe {
    transform: translate(-50%, -50%) scale(1.5); }
  .bg.active {
    opacity: 0; }
  .bg.view-active {
    opacity: 0; }

.list {
  position: relative;
  z-index: 1;
  padding-left: 12px;
  padding-bottom: 64px;
  overflow: hidden;
  transition: .4s opacity;
  min-height: 100vh;
  padding-top: 200px; }
  .list .item {
    font-size: 2.6rem;
    line-height: 1.3;
    color: #fff;
    opacity: .2;
    transition: .4s;
    transform-origin: left center;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    white-space: nowrap;
    /*filter: blur(3px);*/ }
    .list .item .director {
      opacity: 0;
      position: relative;
      left: -10px;
      transition: .4s; }
    .list .item.hover {
      opacity: .5;
      /*filter: blur(1px);*/
      /*transform: scale(1.05);*/ }
    .list .item.active {
      transform: scale(1.2);
      opacity: 1;
      /*filter: blur(0);*/ }
    @media only screen and (max-width: 767px) {
      .list .item {
        font-size: 1.5rem;
        white-space: normal; }
        .list .item .director {
          display: none; } }
  .list .contact-item {
    font-size: 2.2rem;
    line-height: 1.3;
    color: #fff; }
    .list .contact-item .social a {
      display: inline-block;
      margin-right: 10px; }
      .list .contact-item .social a img {
        width: 40px; }
    @media only screen and (max-width: 767px) {
      .list .contact-item {
        font-size: 1.5rem; } }
  .list iframe {
    width: 100%;
    height: 56.25%;
    /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
    min-height: 100%;
    min-width: 177.77%;
    /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden; }
  .list:not(.active) .item {
    background: none !important; }
  .list.active {
    padding: 94px 32px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 24px; }
    .list.active .item {
      position: relative;
      aspect-ratio: 4/3;
      opacity: 1;
      border-radius: 15px;
      filter: none;
      transform: scale(1) !important;
      overflow: hidden; }
      .list.active .item span {
        position: absolute;
        bottom: 50px;
        left: 24px;
        font-size: 1.3rem;
        z-index: 2; }
      .list.active .item .director {
        bottom: 24px;
        left: 24px;
        opacity: 1;
        font-size: 1rem; }
      .list.active .item iframe {
        visibility: visible; }
      .list.active .item.zoom iframe {
        transform: translate(-50%, -50%) scale(1.5); }
      .list.active .item:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: .3;
        z-index: 1;
        transition: .4s; }
      .list.active .item:hover:after {
        opacity: 0; }
    @media (min-width: 992px) and (max-width: 1199px) {
      .list.active {
        padding-top: 300px; } }
    @media (min-width: 768px) and (max-width: 991px) {
      .list.active {
        padding-top: 300px; } }
    @media only screen and (max-width: 767px) {
      .list.active {
        padding-top: 230px;
        grid-template-columns: auto; }
        .list.active .item .director {
          display: block; } }
  @media (min-width: 992px) and (max-width: 1199px) {
    .list {
      padding-top: 300px; } }
  @media (min-width: 768px) and (max-width: 991px) {
    .list {
      padding-top: 300px; } }
  @media only screen and (max-width: 767px) {
    .list {
      padding-top: 230px; } }

.player {
  position: fixed;
  background: #000;
  color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: 1s; }
  .player .box {
    position: relative; }
    .player .box .cls {
      position: absolute;
      top: -64px;
      right: -64px;
      width: 44px;
      line-height: 44px;
      background: rgba(255, 255, 255, 0.1);
      text-align: center;
      border-radius: 8px;
      z-index: 1; }
      .player .box .cls svg {
        width: 22px; }
      @media only screen and (max-width: 767px) {
        .player .box .cls {
          top: -60px;
          right: 0; } }
    .player .box .title {
      font-size: 1.3rem;
      margin: 10px 0 0 0; }
    .player .box .director {
      font-size: 1rem; }
    .player .box iframe {
      display: block;
      width: 80vw;
      max-width: 1000px;
      aspect-ratio: 16/9;
      border-radius: 14px; }
  .player.active {
    transform: translateX(0); }

.view {
  position: fixed;
  left: 0;
  bottom: 32px;
  width: 100%;
  text-align: center;
  z-index: 1; }
  .view a {
    display: inline-block;
    margin: 0 16px; }
  .view svg {
    width: 22px; }
  @media only screen and (max-width: 767px) {
    .view {
      bottom: 12px; } }

main {
  transition: 1.5s; }
  main.active {
    transform: translateX(-100%); }
  main.first {
    transform: translateY(100%); }

.mb-6 {
  margin-bottom: 4rem; }

.mb-7 {
  margin-bottom: 5rem; }

.mb-8 {
  margin-bottom: 6rem; }

.mb-40 {
  margin-bottom: 40px; }
  @media only screen and (max-width: 767px) {
    .mb-40 {
      margin-bottom: 30px; } }

.mb-80 {
  margin-bottom: 80px; }
  @media only screen and (max-width: 767px) {
    .mb-80 {
      margin-bottom: 40px; } }

.mb-100 {
  margin-bottom: 100px; }
  @media only screen and (max-width: 767px) {
    .mb-100 {
      margin-bottom: 50px; } }

.mb-120 {
  margin-bottom: 120px; }
  @media only screen and (max-width: 767px) {
    .mb-120 {
      margin-bottom: 50px; } }

.mb-240 {
  margin-bottom: 240px; }
  @media only screen and (max-width: 767px) {
    .mb-240 {
      margin-bottom: 50px; } }

.w-80 {
  width: 80%; }

.g-120 {
  --bs-gutter-x: 120px; }

.b-16 {
  border-radius: 16px; }

.f-24 {
  font-size: 1.5rem; }

.anim {
  opacity: 0;
  transform: translateY(60px); }
  .anim.anim-opa {
    transform: translateY(0); }
  .anim.anim-title {
    transform: translateY(0);
    opacity: 1; }
    .anim.anim-title span {
      opacity: 0;
      transform: translateY(30px); }
  .anim.anim-slide {
    position: relative;
    transform: translateY(0);
    opacity: 1;
    overflow: hidden; }
    .anim.anim-slide:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: #fff; }
  .anim.play {
    transform: translateY(0);
    opacity: 1;
    transition: 1s; }
    .anim.play.anim-del-2 {
      transition-delay: .2s; }
    .anim.play.anim-del-4 {
      transition-delay: .4s; }
    .anim.play.anim-del-6 {
      transition-delay: .6s; }
    .anim.play.anim-del-8 {
      transition-delay: .8s; }
    .anim.play.anim-del-20 {
      transition-delay: 2s; }
    .anim.play.anim-title span {
      transition: .5s;
      opacity: 1;
      transform: translateY(0); }
    .anim.play.anim-slide:after {
      transition: 1s;
      transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      /* easeOutQuad */
      left: 100%; }
    .anim.play.anim-slide.anim-del-2:after {
      transition-delay: .4s; }
    .anim.play.anim-slide.anim-del-4:after {
      transition-delay: .8s; }

.anim-boxes .anim:nth-of-type(2) {
  transition-delay: .2s; }
.anim-boxes .anim:nth-of-type(3) {
  transition-delay: .4s; }
.anim-boxes .anim:nth-of-type(4) {
  transition-delay: .6s; }
.anim-boxes .anim:nth-of-type(5) {
  transition-delay: .8s; }
.anim-boxes .anim:nth-of-type(6) {
  transition-delay: 1s; }
.anim-boxes .anim:nth-of-type(7) {
  transition-delay: 1.2s; }
.anim-boxes .anim:nth-of-type(8) {
  transition-delay: 1.4s; }
.anim-boxes .anim:nth-of-type(9) {
  transition-delay: 1.6s; }

/*# sourceMappingURL=style.css.map */