@font-face {
    font-family: wtk-roman;
    src: url(/assets/wtk-roman.otf);
}

@font-face {
    font-family: wtk-italic;
    src: url(/assets/wtk-italic.otf);
}

body, html {
    background-color: #fff;
    color: #000;
    font-family: 'wtk-roman', 'Times New Roman', Times, serif;

    -ms-overflow-style: none;
    scrollbar-width: none;
    
    height: 100%;
    overflow: hidden;
}

.loop {
    position: relative;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;

    -ms-overflow-style: none;
    scrollbar-width: none;
}

::-webkit-scrollbar, .loop::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

::-webkit-scrollbar, ::-moz-scrollbars {
    display: none;
}

::selection {
    color: transparent;
    text-shadow: 0 0 0.279vw rgba(185, 185, 185, 0.8);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility !important;
}

.wrapper {
    margin: 1.389vw;
    margin-top: 6.539vw;
}

.page {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    column-gap: 1.389vw;
}

.main-text, .intro {
    grid-column-start: 13;
    grid-column-end: 25;
    font-size: 1.273vw;
    line-height: 122%;
    text-align: justify;
    letter-spacing: -0.2%;
    text-indent: 4.167vw;
}

.credits {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 1.389vw;

    margin-top: 7.755vw;
    margin-bottom: 1.389vw;

    font-size: 0.926vw;
    text-align: left;
    text-indent: 0;

    line-height: 128%;
}

.col-1 {
    grid-column-start: 1;
    grid-column-end: 5;
}

.col-2 {
    grid-column-start: 6;
    grid-column-end: 9;
}

.col-3 {
    grid-column-start: 9;
    grid-column-end: 13;

    text-align: right;
}

.main-text sup {
    font-size: 0.605vw;
}

.section-index {
    position: absolute;

    font-family: Arial, sans-serif;
    font-size: 0.605vw;
    letter-spacing: 0.3%;
    text-indent: 0;
    line-height: 100%;

    margin-top: 0.186vw;
}

.italic {
    font-family: 'wtk-italic';
    font-style: italic;
}

.headline {
    text-transform: uppercase;
    text-indent: 0;
    text-align: center;

    margin-bottom: 1.563vw;
}

.foot-notes {
    margin-top: 3.935vw;
    margin-bottom: -2.122vw;

    font-size: 1.042vw;
    letter-spacing: 1%;
    line-height: 128%;
    text-indent: 0;
}

.foot-notes sup {
    font-size: 0.723w;
}

.foot-note-single {
    margin-bottom: 0.579vw;
}

.video-container {
    grid-column-start: 6;
    grid-column-end: 25;

    margin-right: -1.489vw;
    margin-bottom: 3.762vw;

    position: relative;
    overflow: hidden;
    padding-top: 41.551vw;
}

.video-container video {
  position: absolute;
  top: 0;
  right: 0;
  width: 73.958vw;
  height: 100%;
}

@media only screen and (max-width: 1024px) {

    .main-text, .intro {
        grid-column-start: 12;
        grid-column-end: 25;

        font-size: 1.563vw;
    }

    .main-text sup, .section-index {
        font-size: 0.684vw;
    }

    .foot-notes {
        margin-top: 5.664vw;
        margin-bottom: 5.664vw;
        font-size: 1.367vw;
    }

    .main-text sup {
        font-size: 0.586vw;
    }

    .foot-note-single {
        margin-bottom: 0.977vw;
    }

    .credits {
        font-size: 1.172vw;
    }

    .credits {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .col-1 {
        grid-column-start: 1;
        grid-column-end: 9;

        text-align: center;

        margin-bottom: 1.833vw;
    }
    
    .col-2 {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    
    .col-3 {
        grid-column-start: 4;
        grid-column-end: 9;
    
        text-align: right;
    }

}

@media only screen and (max-width: 600px) {

    .wrapper {
        margin: 1.869vw;
        margin-top: 8vw;
    }
    
    .page {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        column-gap: 3.738vw;
    }

    .headline {
        margin-bottom: 2vw;
    }
    
    .main-text, .intro {
        grid-column-start: 2;
        grid-column-end: 9;

        font-size: 3vw;
        
        text-indent: 9vw;
    }

    .main-text sup, .section-index {
        font-size: 1.5vw;
    }

    .section-index {
        margin-top: 0.341vw;
    }
    
    .foot-notes {
        margin-top: 9vw;
        margin-bottom: -2.869vw;
        font-size: 2.667vw
        ;
    }

    .credits {
        font-size: 2.167vw;
        letter-spacing: 0.3%;
    }

    .credits {
        grid-template-columns: repeat(8, 1fr);
        column-gap: 3.738vw;
    
        margin-top: 6.667vw;
        margin-bottom: 4w;
    }
    
    .col-1 {
        grid-column-start: 1;
        grid-column-end: 9;

        text-align: center;

        margin-bottom: 2.833vw;
    }
    
    .col-2 {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    
    .col-3 {
        grid-column-start: 4;
        grid-column-end: 9;
    
        text-align: right;
    }

    .foot-notes sup {
        font-size: 1.333vw;
    }
    
    .foot-note-single {
        margin-bottom: 2.336vw;
    }
    
    .video-container {
        grid-column-start: 1;
        grid-column-end: 9;

        padding-top: 56.308vw;
        margin-left: -1.869vw;
        margin-right: -1.869vw;
        margin-bottom: 7.833vw;
    }
    
    .video-container video {
      left: 0;
      width: 100vw;
      height: 100%;
    }

}