/*big screen*/
@media only screen and (min-width: 2050px) {

    body {line-height: 1.8em; font-size:19px}
    /* h1 {font-size: 5.8em;} */
    /* h2 {font-size: 3.2em;} */

  
    .sidekick-cont {width: 4em; }
    .sidekick {left: 1.5em;}
    .collage-item { width: 19.2%; height: 34rem;}
    .grid-item-archive {width: 31.7%;}
    
    }


@media only screen and (max-width: 900px) {
        body {font-size: 14px; font-size: 1.4vw;}
        h2 {font-size: 2.9em;}
        .container { width: 94%; margin: 0 3%;}
        .cont-offset {width: 100%; margin: 0;}
        
            .topbar { width: 88%;}
        .logo{width: 4em; position: relative;}
        .nav-cont {display: none;}
        .menu .nav-cont {display:block; position:static; }
        .menu {flex-direction: column;}
        .menu .nav-cont li {float:none; text-align:center; margin:0 auto 1.4em; font-size:2em;}
        #ham {display: block;} #lang-switcher {display: none;}
        h1 {font-size: 4.3em;}
        .overtitle1 { width: 97%; font-size: 2.1em; font-weight: 500; }

.circle {left: 72.9%; display: block; width: 23%;}
.s1-img2 { margin-top: 21em;}
.s1-img3 { margin-top: 32em;}
.section1 { height: 43em;}
.big-title, .big-title2 {font-size: 12em;}
.big-title { left: -63vw;}
.w1-img1 {left: 44%; width: 46%;}
.w1-img2 { left: 0%; top: 32em; width: 50%;}
.w1-img4 {left: -3.2%; top: 11em; width: 17%;}
.w1-img3 {left: 61%; top: 50em; width: 42%;}
.grid-item {width: 46%;}
.work1 {margin-bottom: 10em;}
.w3-img1 {width: 54%;}
.big-title2 {left: -94vw;}
.container-about .col1 {padding-left: 0%;}


    
    }

@media only screen and (max-width: 500px) {
    body { font-size: 10px;  font-size: 2.6vw;}
    h1 {font-size: 6.2em;}
    h2 {font-size: 3.1em;}
    h3 {font-size: 1.3em;}
    .container { width: 90%; margin: auto;}
    .col {width: 100%;}

    .menu .nav-cont {margin-left: 0; margin-top: 3em;}


    .section1 {height: auto; margin-top: 2em;}
    .intro-text { position: relative; width: 100%; right: 0; top: -14.8em;}
    .intro-text h3 {text-align: left}
    .circle {left: 58.9%;   top: -5em;display: block; width: 38%;}
    .s1-img1 {left: 0; width: 81%; top: -2em; position: relative;}    
    .s1-img2 {margin-top: 16em; left: 59%; width: 42%; margin-top: -18.1em;}
    .s1-img3 {margin-top: 30em;left: 43%;width: 34%;}
    .big-title, .big-title2 {font-size: 6em;}
    .work1 {height: auto; margin-top: 10em; margin-bottom: 5em;}
    .w1-img1 {top:0; left: 0%; width: 100%; position: relative; margin-top: 1em;}
    .w1-img2 {top:0; left: 0%; width: 100%; position: relative; margin-top: 1em;;}
    .w1-img3 {top:0; left: 0%; width: 100%; position: relative; margin-top: 1em; width: 82%;} 
    .w1-img4 {position: relative; left: 66.8%; top: -4em; width: 33%; z-index: 1;}
    .w1-img5 {left: 78%;mix-blend-mode: multiply; top: -8em;width: 24%; z-index: 2;}
    
    .section3 .container {flex-direction: column-reverse;}
    .section3 .grid-right {width: 80%; margin-left: 0;}
    .grid2x2 {width: 100%; margin-top: 1em; margin-bottom: 0;}
    .grid-item {width: 48.3%;}
    .grid-item:nth-child(2n) {margin-right: 0;}

    h2.work3-title1 {position: static; width: 100%; text-align: left; margin-bottom: 0.7em;}
    .w3-img1 {position: static; width: 100%;}
    .w3-img2 { position: static; margin-top: 1em; width: 78%; margin-left: 22%;}
    .w3-img3 { width: 57%; top: 44em;}

    .section4 {height: auto; padding-bottom: 5em;}
    .big-title2 {left: -244vw;top: 0em;}
    
    section.makingof { margin-top: 14em;}

    .container-about {display: flex; flex-direction: column-reverse; width: 80%; margin-top: 7em;}
    .container-about .col2 {padding: 2em 0 0 0;}


    .footer {padding-top: 4em;}
    .kontakt-small {font-size: 1.4em; line-height: 1.8em;}
}