@charset "UTF-8";
:root {
    /*  ---  [Variables] --- */
    --gc-white: #f6f7f8;
/*    --gc-white: #E9E0D2;*/
    --gc-black: #242323;
    --gc-dgrey: #383736;
    --gc-lgrey: #717070;
    --gc-lgrey: #929190;
/*    --gc-lgrey: #b0b1b2;*/
    --gc-highl: #FA4B57;
    --gc-highl: #0088FF;
    --gc-lhighl: #3ea4fd;
    /* - */
    --gc-sanserif: "sofia-pro", "Sofia Pro", sans-serif;   
    --gc-serif: "Times", serif; 
/*    --gc-sanserif: "objektiv-mk1", sans-serif;  */
    font-size: .625em;
    --gc-xlight: 200;
    --gc-light: 300;
    --gc-regular: 400;
    --gc-medium: 500;
    --gc-bold: 600;
    --gc-lineh: 1.618;
    --gc-spacing: .08em;
    --gc-sphalf: .04em;
}
/*main title*/
h3{
    font-weight: var(--gc-medium);
    color: var(--gc-dgrey);
    color: var(--gc-white);
    line-height: 100%;
    font-size: 2vw;
    
}
/*number*/
h4{
    font-weight: var(--gc-xlight);
    font-size: 4vw;
    color: var(--gc-white);
}
/*small title*/
h5{
    font-weight: var(--gc-bold);
    color: var(--gc-lgrey);
/*    line-height: 100%;*/
/*    background-color: brown;*/
/*    padding-bottom: calc(100vw/56);*/
/*    padding-bottom: calc(100vw/84);*/
    padding-bottom: calc(100vw/70);
    font-size: 1.2vw; 
}
.dark-h5{
    color: var(--gc-dgrey);
}
/*paragraphs*/
.p2{
    margin-top: -0.8vw;
    color: var(--gc-lgrey);
    font-weight: var(--gc-light);
/*    font-size: 1.5vw;*/
/*    line-height: 100%;*/
}
/* ---------- WORK ---------- */
#page {
        padding-bottom: 0;
}
/*work mast*/
#w-mast{
    background-color: var(--gc-black);
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    overflow: hidden;
    font-size: 250%;
    
}
#w-mast-video{
    display: none;
}
#w-mast-title{
    height: 100%;
    height: 2vw;
    display: inline-block;
    line-height: 100%;
    padding-top: calc(100vw/28);
    padding-bottom: calc(100vw/28);
}
#w-mast-intro{
    width: 48vw;
    justify-self: center;
    padding-bottom: calc(100vw/28);
}
/*video stuff*/
.embed-vid{
    position: relative;
    height: 0;
    padding-top: 56.25%; /*16:9*/
    overflow: hidden;
}
iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gc-black);
}   
/*work module*/
#work-page{
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: auto; 
    letter-spacing: 0.01em;
    font-size: 250%;
    background-color: var(--gc-black);
/*    border-bottom: 2px solid var(--gc-dgrey);*/
}
/*layout*/
.w-box{
    z-index:1;
    grid-column: 3 / span 10;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;

/*    justify-items: center;*/
}
.w-box-images{
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto;
/*    width: 100%;*/
/*    height: auto;*/
    box-shadow: -50px 50px 100px rgba(255,255,255,0.1);
/*    overflow: hidden;*/
    
}
.wvideo{    
    width: 100%;
    object-fit: fill;
    display: block;
    
/*    box-shadow: h-offset v-offset blur spread color*/
    
}
.w-box-txt{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-row-gap: calc(100vw/28);
/*    padding-top: calc(100vw/14);*/
/*    padding-bottom: calc(100vw/14);*/
    padding-top: calc(100vw/21);
/*    margin-bottom: -4vw;*/
    text-align: left;
/*    background: linear-gradient(0deg, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);*/
/*    background: linear-gradient(0deg,  rgba(36,35,35,1) 90%,  rgba(41,40,40,1) 100%);*/
/*    background: linear-gradient(0deg, rgba(255,255,255,0) 80%,  100%);*/
/*    background-color: rgba(36,35,35,1);*/
    
}
/* grid-row-start + grid-column-start + grid-row-end + grid-column-end:*/
.w-box-txt-num{
    grid-area: 1 / 2 / 2 / 3;
/*    background-color: bisque;*/
    line-height: 0%;
    align-self: center;
    height: 1vw;
    margin-left: -25%; 
    margin-bottom: -5%;
}
.w-box-txt-title{
    grid-area: 1 / 3 / 2 / 11;
/*    background-color: plum;*/
    line-height: 0%;
    align-self: center;
    
/*    background-color: green;*/
    height: 1vw;
}

.w-client{
    grid-area: 3 / 7 / 4 / 10;
}
.w-skills{
    grid-area: 3 / 3 / 4 / 6;
}
.w-task{
    margin-top: calc(100vw/70);
    grid-area: 2 / 3 / 3 / 6;
}
.w-solution{
    margin-top: calc(100vw/70);
    grid-area: 2 / 7 / 3 / 10;
}

/* media sizes */
@media (min-width:2000px) {
    .w-box{
        grid-column: 4 / span 8;
    }    
    #page {
/*        background-color: var(--gc-black);*/
    }
    #work-page {
/*        background-color: var(--gc-black);*/
    }
}
@media (min-width:1680px) {
    .w-box{
        grid-column: 4 / span 8;
    }
}
@media (max-width:1320px) {
    
}
@media (max-width:1400px) {
    .w-box{
        grid-column: 2 / span 12;
    }
}
@media (max-width:1200px) {
    .w-box{
        grid-column: 2 / span 12;
    }
}
@media (max-width:1000px) {
    #w-mast-intro{
        width: 80vw;
    }
    .w-box{
        grid-column: 1 / span 14;
    }
    .w-box-txt{
/*        text-align: center;*/
        padding-bottom: calc(100vw/21);
    }
/*
    .w-box-txt-title{
        line-height: 100%;
        height: auto;
        padding-bottom: calc(100vw/28);
    }
*/
    .w-box-txt-num{
        grid-area: 1 / 2 / 1 / 2;
        display: none;
    }
    .w-box-txt-title{
        grid-area: 1 / 1 / 2 / 12;
        line-height: 0%;
        align-self: center;
        height: 1vw;
        text-align: center;
    }
    
    .w-client{
        grid-area: 3 / 6 / 4 / 10;
        margin-left: 5vw;
    }
    .w-skills{
        grid-area: 3 / 2 / 4 / 6;
        margin-right: 5vw;
    }
    .w-task{
        margin-top: 0px;
        grid-area: 2 / 2 / 3 / 6;
        margin-right: 5vw;
    }
    .w-solution{
        margin-top: 0px;
        grid-area: 2 / 6 / 3 / 10;
        margin-left: 5vw;
    }
    h3{
        font-size: 125%;
    }
    h5{
       font-size: 65%;
    }



}

@media (max-width:840px) {
    #w-mast-video{
        display: none;
    }
        #w-mast-title{
        height: 100%;
/*        height: 2vw;*/
        display: inline-block;
        line-height: 100%;
        padding-top: calc(100vw/14);
        padding-bottom: calc(100vw/14);
    }
    #page {
        padding-left: 0vw;
        padding-right: 0vw;
    }
    h3{
        font-size: 5.5vw;
    }
    h5{
        font-size: 3vw;
/*        text-align: center;*/
    }
    .w-box-txt{
        padding-bottom: calc(100vw/7);
        text-align: center;
    }
    .w-box-txt-title{
        line-height: 100%;
        height: auto;
    }
    .w-box{
        grid-column: 1 / span 14;
    }
    .w-client{
        grid-area: 6 / 2 / 7 / 10;
        margin: 0px;
    }
    .w-skills{
        grid-area: 7 / 2 / 8 / 10;
        margin: 0px;
        
    }
    .w-task{
        grid-area: 2 / 2 / 3 / 10;
        margin: 0px;
    }
    .w-solution{
        grid-area: 4 / 2 / 5 / 10;
        margin: 0px;
    }
}
@media (max-width:840px) and (orientation: landscape) {
    .w-box-images{
        margin-left: 21vw;
        margin-right: 21vw;
    }
    .w-box-txt{
        background: none;
    }

}
@media (max-width:640px) {
    h3{
        font-size: 7vw;
    }
    h5{
        font-size: 4vw;
    }
}

@media (max-width:640px) and (orientation: landscape) {
    
}

@media (max-width:480px) {

}