@charset "UTF-8";
/* CSS Document */
:root {
  --padding-lg: 50px;
  --padding-sm: 25px;
}


.project_cover{
    width: 100%;
    /*height: auto;*/
    margin-top: 70px;
    overflow-x: hidden;
}

.project_cover img{
    width: 100%;
    display: block;
    object-fit: contain;
}
.project_cover video{
    width: 100%;
    display: block;
    object-fit: contain;
    
}

.vid.mobile_w{
    width: 100%;
    overflow-x: hidden; 
}

.vid.mobile_w video{
    width: 100%;
    display: block;
    object-fit: contain;
}

.project_center1.mobile_w>.picshow-container{
    width: 100%;
    
    object-fit: contain;
}



.project_photo{
    margin: auto;
    max-width: 1200px;
}

.project_cotainer{
    position: relative;
    display: block;
    width: 100%;
    margin: 150px auto 150px;
    padding-left: var(--padding-lg);
    padding-right: var(--padding-lg);
}

.project_cotainer .opis{
    max-width: 730px;
    margin: auto;
    margin-bottom: 150px;
    font-size: 28px;
    line-height: 42px;
}

.project_cotainer .opis span.title{
    font-size: 36px;
}

.project_cotainer img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.project_cotainer img.narrow{
    min-height: 180px;
    object-fit: cover;
}

.project_cotainer video{
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 50px;
}

.project_center1,
.macbook
{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: 50px;    
}

.project_center2{
    position: relative;
    display: grid;
    grid-template-columns: .5fr 1fr .5fr;
    width: 100%;
    margin-bottom: 50px;
}

.picshow-calendar{
    grid-column: 2;   
}

.project_center70{
    background-color: white;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 50px;
}

.project_center70 div{
    max-width: 70%;
    margin-right: auto;
    margin-left: auto;
}


.project_center50{
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    margin-bottom: 50px;
    
}

.project_center50>.vid_screen{
    height: 100%;
    border: solid 2px white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow-y: hidden;
}


.project_center50>div.vid_screen>section.vid>video{
    margin: 0;
}





.nogap{
    margin-top: -50px;
}

.project_cotainer p.gap150{
    margin-top: 150px;
}

.project_30_center{
    padding-left: 30%;
    padding-right: 30%;
    margin-bottom: 50px;
}

.white{
    background-color: white;
}

.projects_40_60{
    position: relative;
    display: grid;
    grid-template-columns: 412fr 587fr;
    column-gap: 50px;
    margin-bottom: 50px;
}

.projects_60_40{
    position: relative;
    display: grid;
    grid-template-columns: 587fr 412fr;
    column-gap: 50px;
    margin-bottom: 50px;
}

.projects_30_30_30{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 50px;
    margin-bottom: 50px;
}

.projects_25_25_25_25{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 50px;
    margin-bottom: 50px;
}

.projects_25_25_25_25 img{
    display: block; 
}

.projects_25_sub{
    display: grid;
    grid-template-rows: 1fr 1fr;
    /*row-gap: 50px;*/
}


.projects_50_50{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 50px;
    margin-bottom: 50px;
}


.brandbook_pages{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 50px;
    row-gap: 50px;

}


.change_pic,
.change_pic3
{
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
}

.change_pic img,
.change_pic3 img
{
    position: absolute;
    height: 100%;
    display: flex;
    width: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
    z-index: 0;
}

.change_pic img
{
    opacity: 0;
    will-change: opacity;
    animation: change_pic 8s infinite;
}

.change_pic3 img
{
    opacity: 0;   
    will-change: opacity;
    animation: change_pic3_key 6s infinite;
}


.change_pic img:nth-child(1){
    animation-delay: 0s;
}
.change_pic img:nth-child(2){
    animation-delay: 2s;
}
.change_pic img:nth-child(3){
    animation-delay: 4s;
}
.change_pic img:nth-child(4){
    animation-delay: 6s;
}

@keyframes change_pic
{
    0%{opacity:1;}
    25%{opacity:1}
    26%{opacity:0}
}

.change_pic3 img:nth-child(1){
    animation-delay: 0s;
}
.change_pic3 img:nth-child(2){
    animation-delay: 2s;
}
.change_pic3 img:nth-child(3){
    animation-delay: 4s;
}


@keyframes change_pic3_key
{
    0%{opacity:1;}
    33%{opacity:1}
    33.01%{opacity:0}
}



.lottie_container{
    width: 100%;
    height: auto;
}


.picshow-container {
  width: 100%;
  position: relative;
}
.mySlides1,
.mySlides2,
.mySlides3
{
  display: block;
}

.showpic{
  animation-name: showpic;
  animation-duration: 0s;
}

@keyframes showpic {
  from {opacity: 0}
  to {opacity: 1}
}

.screen_graphs{
    width: 100%;
    margin-bottom: 50px;
}

.screen_bar{
    width: 100%;
    height: 80px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-color: white;
    border-width: 2px;
    border-style: solid;
    padding: 27px 0 27px 40px;
}

.circle_bar{
    position: relative;
    display: inline-block;
    height: 25px;
    width: 25px;
    border-color: white;
    border-radius: 30px;
    border-width: 2px;
    border-style: solid;
    margin-right: 12px;
}

.screen_text{
    width: 100%;
    background-color: white;
    padding: 80px 0;
    padding-left: 5%;
    
}
.screen_text p{
    margin: 0;
    padding: 0;
    font-size: 42px;
    color: #ff8100; 
    
}
.screen_wraper{
    width: 100%;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    color: #4f6c80;
    font-size: 24px;
    background-color: white;
    overflow-x: hidden;
}
.screen_container{
    
    padding-left: 5%;
 /*   padding-right: 5%;*/
    padding-bottom: 70px;
    
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 25%);
    grid-column-gap: 10%;
    
}




.we_do{
    margin: 150px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 50px;
    align-items: first baseline;
}
.we_do h4{
    grid-column: 2;
}
.we_do div{
    grid-column: 3/5;
}

h4{
    font-size: 36px;
    line-height: 56px;
    color: black;
}
h5{
    font-size: 28px;
    line-height: 56px;
    color: black;
    font-weight: 400;
}

.view_all {
    width: 100%;
    height: 100px;
    font-size: 32px;
    display: grid;
    border-top: 1px solid black;
    
}
.view_all div{
    margin: auto;
}

.view_all a{
    color: #e64f0e;
}


/* --------------------- 1024px ------------*/
@media (max-width: 1024px){
    .project_cotainer{
        padding-left: var(--padding-sm);
        padding-right: var(--padding-sm);
    }
    
    .project_center2{
    grid-template-columns: .25fr 1fr .25fr;
    }
    
    .brandbook_pages{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: var(--padding-sm);
        row-gap: var(--padding-sm);
    }

    .project_30_center{
        padding-left: 25%;
        padding-right: 25%;
    }
    .projects_40_60,
    .projects_60_40,
    .projects_50_50,
    .projects_30_30_30,
    .projects_25_25_25_25,
    .macbook
    {
        column-gap: var(--padding-sm);
    }

    .screen_text p{
        font-size: 32px;
    }

    .screen_wraper{
        font-size: 18px;
        background-color: white;
    }
    
    .we_do{
        grid-column-gap: 25px;
    }
    
}

/* --------------------- 768px ------------*/
@media (max-width: 768px){
.screen_bar{
        height: 60px;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        padding: 21px 0 21px 30px;
    }

.circle_bar{
        height: 18px;
        width: 18px;
        margin-right: 12px;
    }
    
h4{
        font-size: 28px;
        line-height: 40px;
    }
h5{
        font-size: 20px;
        line-height: 40px;
    }



.vid.mobile_w video{
        width: 150%;
        margin-left: -25%;
    }
    
.project_center1.mobile_w>.picshow-container{
        display: block;
        width: 150%;
        margin-left: -25%;
        margin-right: -25%;
    }
}

/* --------------------- 576px ------------*/
@media (max-width: 576px){
    

.project_cover img{
    width: 150%;
    margin-left: -25%;
    
}
    
.project_cover video{
    width: 150%;
    margin-left: -25%;
    
}    
    
    
.project_center2{
    grid-template-columns: 1fr;
    } 
    
.brandbook_pages{
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--padding-sm);
        row-gap: var(--padding-sm);
    }   
.project_cotainer p.opis{
        margin-bottom: 100px;
        font-size: 20px;
        line-height: 28px;
    }
    
.project_cotainer p.gap150{
        margin-top: 100px;
    }
    
.project_cotainer{
        margin: 100px auto 100px;
    }
    
.project_cotainer p.opis span.title{
        font-size: 24px;
    }

.screen_text p{
    font-size: 32px;
}

    .screen_wraper{
        font-size: 18px;
        background-color: white;
    }

    .screen_container{

        padding-left: 5%;
        padding-bottom: 70px;

        width: 100%;
        display: grid;
        grid-template-columns: repeat(7, 75%);
        grid-column-gap: 30%;

    }

    
    .we_do{
        margin: 100px auto;
    }
    .we_do h4{
        grid-column: 1/3;
    }


}




/* --------------------- 400px ------------*/
@media (max-width: 400px){
    .project_cotainer p.opis{
        margin-top: 80px;
        margin-bottom: 80px;
    }
    
    .project_cotainer{
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .project_cotainer{
        margin: 80px auto 80px;
    }
    .project_cotainer video,
    .project_center1,
    .project_center2,
    .projects_40_60,
    .projects_60_40,
    .projects_50_50,
    .projects_30_30_30,
    .projects_25_25_25_25,
    .project_30_center,
    .posters,
    .icons_104,
    .screen_graphs,
    .macbook
    {
        margin-bottom: var(--padding-sm);
    }
    .projects_40_60,
    .projects_60_40,
    .projects_30_30_30,
    .projects_25_25_25_25,
    .projects_50_50
    {
        grid-template-columns: 1fr;
    }
    
    .projects_60_40>div:nth-child(1),
    .projects_40_60>div:nth-child(1),
    .projects_50_50>div:nth-child(1),
    .projects_30_30_30>div:nth-child(1),
    .projects_30_30_30>div:nth-child(2)
    {
        margin-bottom: 25px;    
    }
    
.projects_25_25_25_25{
        padding-left: 10%;
        padding-right: 10%;
    }
/*    
.projects_25_sub{
    row-gap: 25px;
}
*/  
    
    .project_30_center{
        padding-left: 10%;
        padding-right: 10%;
    }
    
    .brandbook_pages{
        column-gap: 10px;
        row-gap: 10px;
    }
    
    .screen_bar{
        height: 40px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding: 9px 0px 0px 20px;
    }
    
.screen_wraper{

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

}
    .circle_bar{
        height: 12px;
        width: 12px;
        margin-right: 8px;
    }
    
    .view_all {
        font-size: 24px;
    }
    
    .we_do h4{
        grid-column: 1/5;
        margin-bottom: 40px;
    }
    .we_do div{
    grid-column: 1/5;
    }
    
    .nogap{
        margin-top: 0px;
    }
}