@font-face {
    font-family: Pluvia;
    src: url(assets/pluvia/PluviaVF.woff);
    font-weight: 900;
}



/* -------------------------------------------------------------
   GLIGHTBOX
------------------------------------------------------------- */

body #glightbox-body {
    z-index: 999 !important
}

body .gclose,
body .gnext,
body .gprev,
body .gslide-image img.zoomable {
    cursor: none;
}

#glightbox-slider > div.gslide.loaded.current > div > div > div{
    max-width: 100% !important;
}

#glightbox-slider > div.gslide.loaded.current > div > div > div > div > div > div.plyr__video-wrapper.plyr__video-wrapper--fixed-ratio > video{
    max-width: 100% !important;
    max-height: 90% !important;
    padding: 5% 0 0 5%
}

/* -------------------------------------------------------------
   GLOBAL 
------------------------------------------------------------- */

div.grid.pluvia-letters>p {
    font-family: Pluvia;
    justify-self: center;
    grid-column: auto;
}

img,
video {
    width: 100%;
    height: auto;
}

.hero {
    margin-top: 5vh;
}

.hero-code,
.hero-img {
    width: 100%;
}

.hero-img {
    max-height: 80vh;
    overflow: hidden;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-code {
    height: 80vh;
}

.hero-code>canvas {
    border-radius: 2vw;
}

.image-text-1,
.image-text-2,
.image-text-3,
.final-posters,
.grid-gallery,
.img-full, .img-half, .img-half-bachelor,
.process1, .process2,.process3{
    margin-top: 12vh;
}

.img-full div,
.img-half div,
.img-half-bachelor div,
.img-scroll div {
    width: 100%;
}

.img-scroll img {
    width: 100%;
}

.final-posters img {
    width: 100%;
}

.hero h2,
.final-posters h4 {
    width: 100%;
}

/* -------------------------------------------------------------
   MOBILE 
------------------------------------------------------------- */
.pluvia-letters {
    margin-top: 4vw;
}

div.grid.pluvia-letters>p {
    font-size: 27vw;
    grid-column: span 2;
    line-height: 22vw;
}

.hero h2,
.hero-code,
.hero-img {
    grid-column: span 6;
}

.project-info-grid {
    margin-top: 5vh;
    row-gap: 2vh;
    grid-template-areas:
        "description description description description description description"
        "date date . course course .";
}

.project-descripition {
    grid-area: description;
}

.project-date {
    grid-area: date;
}

.project-course {
    grid-area: course;
}

.image-text-1 {
    grid-template-areas:
        "img img img img img img"
        "text text text text text text";
}

.image-text-1 a {
    grid-area: img;
}

.image-text-1 div {
    grid-area: text;
}

.image-text-2 {
    grid-template-areas:
        "img img img img img img"
        "text text text text text text";
}

.image-text-2>div {
    grid-area: img;
    height: auto;
    overflow-y: hidden;
}

.image-text-2 :nth-child(2) {
    grid-area: text;
}

.image-text-3 {
    grid-template-areas:
        "img img img img img img"
        "text text text text text text";
}

.image-text-3 a {
    grid-area: img;
}

.image-text-3 div {
    grid-area: text;
}

.final-posters {
    grid-template-rows: auto;
    row-gap: var(--row-gap);
}

.final-posters h4 {
    grid-column: span 6;
}

.final-posters a {
    grid-column: span 3;
}

.spacer {
    display: none;
}

.img-half div,
.img-half a {
    grid-column: span 3;
}

.img-half-bachelor > a:nth-child(2){
    grid-area: p1;
}
.img-half-bachelor > a:nth-child(3){
    grid-area: p2;
}
.img-half-bachelor > a:nth-child(4){
    grid-area: p3;
}
.img-half-bachelor > a:nth-child(5){
    grid-area: p4;
}

.img-half-bachelor > h4{
    grid-area: h4;
}

.img-half-bachelor{
grid-template-areas:
        "h4 h4 h4 h4 h4 h4"
        "p1 p1 p1 p2 p2 p2"
        "p3 p3 p3 p4 p4 p4";
}

.img-full div {
    grid-column: span 6;
}

.final-posters video {
    display: none;
}

.styleguide {
    grid-template-areas:
        "color1 color1 color2 color2 color3 color3"
        "color4 color4 color5 color5 color6 color6"
        "text text text text text text";
}

.color1 {
    background-color: #fff;
    color: #000;
    grid-area: color1;
}

.color2 {
    background-color: #000;
    color: var(--bg);
    grid-area: color2;
}

.color3 {
    background-color: #ff0000;
    color: var(--bg);
    grid-area: color3;
}

.color4 {
    background-color: #B2B2B2;
    color: var(--bg);
    grid-area: color4;
}

.color5 {
    background-color: #ff0000;
    color: var(--bg);
    grid-area: color5;
}

.color6 {
    background-color: #B60000;
    color: var(--bg);
    grid-area: color6;
}

.colors {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 2vh 0 2vh 0;
}

.styleguide-text {
    grid-area: text;
}

footer {
    height: 2vh;
}

.process1, .process2{
    grid-template-areas:
    " text text text text text text"
    "img img img img img img"
    ;
}


.process1-text, .process2-text, .process3-text{
        grid-area: text;
    }
    .process1-images, .process2-images{
        grid-area: img;
    }



.process1-images {
  display: flex;
  align-items: flex-start;
}

.process1-images a {
  flex: 1;
  margin-right: -30px;
}



.process1-images.pluvia-images a{
  flex: 1;
  margin-right: -50px;
}

.process1-images a:last-child {
  margin-right: 0;
}



.process1-images.pluvia-images a{
  margin: 0;
}

.process1-images.pluvia-images a:nth-child(1){
  margin-left: -.8%;
}
.process1-images.pluvia-images a:nth-child(2){
  margin-left: -3.5%;
}
.process1-images.pluvia-images a:nth-child(3){
  margin-left: -2.5%;
}
.process1-images.pluvia-images a:nth-child(4){
  margin-left: -2.5%;
}
.process1-images.pluvia-images a:nth-child(5){
  margin-right: -.5%;
}

.process1-images.pluvia-images a:nth-child(1) { transform: translateY(0px); }
.process1-images.pluvia-images a:nth-child(2) { transform: translateY(10%); }
.process1-images.pluvia-images a:nth-child(3) { transform: translateY(2%); }
.process1-images.pluvia-images a:nth-child(4) { transform: translateY(15%); }
.process1-images.pluvia-images a:nth-child(5) { transform: translateY(5%); }



.process1-images a:nth-child(1) { transform: translateY(0px); }
.process1-images a:nth-child(2) { transform: translateY(30px); }
.process1-images a:nth-child(3) { transform: translateY(10px); }
.process1-images a:nth-child(4) { transform: translateY(50px); }
.process1-images a:nth-child(5) { transform: translateY(20px); }

.process1-images a img {
  display: block;
  width: 100%; 
}






.process1,.process2{
    height: auto;
    padding-bottom: 5vmax;
}

.process2-images div{
    display: flex;
}
    
.process2-images {
  display: flex;
  flex-direction: column;
}


.process2-images a img {
  display: block;
  width: 105%; 
}


.process2-images > div:nth-child(1) > a:nth-child(1) { transform: translateY(0px); }
.process2-images > div:nth-child(1) > a:nth-child(2) { transform: translateY(25%) translateX(-10%); }
.process2-images > div:nth-child(1) > a:nth-child(3) { transform: translateY(10%) translateX(-15%); }


.process2-images > div:nth-child(2) > a:nth-child(1) { transform: translateY(50%) translateX(0%); }
.process2-images > div:nth-child(2) > a:nth-child(2) { transform: translateY(30%) translateX(0%); }
.process2-images > div:nth-child(2) > a:nth-child(3) { transform: translateY(-10%) translateX(-5%);}




















.process3{
    grid-template-areas:
    " text text text text text text"
    "img1 img1 img2 img2 img3 img3"
    ;
}




.process3 a:nth-child(2) { grid-area: img1; }
.process3 a:nth-child(3) { grid-area: img2; }
.process3 a:nth-child(4) { grid-area: img3; }

.process3 a img {
  width: 100%;
  display: block;
}


/* -------------------------------------------------------------
   TABLET
------------------------------------------------------------- */

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

    .hero h2,
    .hero-code,
    .hero-img {
        grid-column: span 8;
    }

    .project-info-grid {
        margin-top: 10vh;
        grid-template-areas:
            "description description description description description description description description"
            "date date . course course . . .";
    }

    .image-text-1 {
        grid-template-areas:
            "img img img img img img img img"
            "text text text text text text text text";
    }

    .image-text-2>div {
        grid-column: span 8;
        height: auto;
        overflow: hidden;
    }

    .image-text-3 {
        grid-template-areas:
            "img img img img img img img img"
            "text text text text text text text text";
    }

    .final-posters h4 {
        grid-column: span 8;
    }

    .final-posters a {
        grid-column: span 4;
    }

    .spacer {
        display: none;
    }

    .img-scroll div {
        grid-column: span 8;
    }

    .img-full div {
        grid-column: span 8;
    }

    .img-half div,
    .img-half a {
        grid-column: span 4;
    }

    .img-half-bachelor{
    grid-template-areas:
        "h4 h4 h4 h4 h4 h4 h4 h4"
        "p1 p1 p1 p1 p2 p2 p2 p2"
        "p3 p3 p3 p3 p4 p4 p4 p4";
}

    .final-posters video {
        display: none;
    }

    .styleguide {
        grid-template-areas:
            "color1 color1 color1 color1 color2 color2 color2 color2"
            "color3 color3 color3 color3 color4 color4 color4 color4"
            "color5 color5 color5 color5 color6 color6 color6 color6"
            "text text text text text text text text";
    }

    footer {
        height: 4vh;
    }

    div.grid.pluvia-letters>p {
        font-size: 22vw;
        line-height: 17vw;
    }

    .process1, .process2{
    grid-template-areas:
        "text text text text text text text text"
        "img img img img img img img img";
    }
    .process3{
    grid-template-areas:
        "text text text text text text text text"
        ". img1 img1 img2 img2 img3 img3 .";
    }

    .process2{
    padding-bottom: 7vmax;
}
}


/* -------------------------------------------------------------
   DESKTOP
------------------------------------------------------------- */

@media only screen and (min-width: 1200px) {

    .hero h2,
    .hero-code,
    .hero-img {
        grid-column: span 10;
    }


    .project-info-grid {
        grid-template-areas:
            "description description description description description . date course . .";
    }

    .image-text-1 {
        grid-template-areas:
            "img img img img img img img . text text";
    }

    .image-text-3 {
        grid-template-areas:
            "text text . img img img img img img img";
    }

    .image-text-2 {
        grid-template-areas:
            "img img img img img img img . text text";
    }

    .image-text-2>div {
        grid-area: img;
        overflow: hidden;
    }


    .final-posters h4 {
        grid-column: span 10;
    }

    .final-posters a {
        grid-column: span 2;
    }

    .final-posters div {
        grid-column: span 2;
    }

    .spacer {
        grid-column: span 2;
        display: block;
    }


    .img-full>div {
        width: 100%;
        grid-column: span 10;
    }

    .img-half div,
    .img-half a {
        grid-column: span 5;
    }

    .img-half-bachelor{
    grid-template-areas:
        ". h4 h4 h4 h4 h4 h4 h4 h4 ."
        ". p1 p1 p1 p1 p2 p2 p2 p2 ."
        ". p3 p3 p3 p3 p4 p4 p4 p4 . ";
}


    .grid-gallery {
        margin-top: 20vh;
    }

    .img-scroll div {
        grid-column: span 10;
    }

    .final-posters img {
        display: block;
    }

    .final-posters video {
        display: block;
    }

    .pluvia-letters {
        margin-top: 10vw;
    }

    div.grid.pluvia-letters>p {
        font-size: 20vw;
        line-height: 15vw;
    }

    .styleguide {
        grid-template-areas:
            "text text text .color1 color1 color1 color2 color2 color2"
            "text text text .color3 color3 color3 color4 color4 color4"
            "text text text .color5 color5 color5 color6 color6 color6"
        ;
    }

    .colors {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 20vh;
        text-align: center;
        padding: 2vh 0 2vh 0;
    }

    footer {
        height: 4vh;
    }

    .process1, .process2{
    grid-template-areas:
        " text text . img img img img img img img ";
    }

     .process3{
    grid-template-areas:
        "text text text . img1 img1 img2 img2 img3 img3"
        
    }
    

    .process2 {
    height: 37vw;
    padding: 0;
    }

    .process1{
        padding: 0;
    }


    
}


@media only screen and (min-width: 1400px) {
.process1{
        padding-bottom: 3vw;
    }
}