@import url('./reset.css');
@import url('./typography.css');
@import url('./wrap.css');
@import url('./header-footer.css');
@import url('./project-list.css');
@import url('./blog.css');
@import url('./case-study.css');
@import url('./project-grid.css');

::selection {
    background: #fff7a0;
}

body {
    background: #feffff;
    font-family: Muli,sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    color: #777;
}

.page,.page__content {
    float: left;
    clear: both;
    width: 100%;
}

.page {
    -webkit-transition: all .6s cubic-bezier(.2,.3,0,1);
    -moz-transition: all .6s cubic-bezier(.2,.3,0,1);
    -ms-transition: all .6s cubic-bezier(.2,.3,0,1);
    -o-transition: all .6s cubic-bezier(.2,.3,0,1);
    transition: all .6s cubic-bezier(.2,.3,0,1)
}

section:not(.hero) {
    -webkit-transition: all .8s cubic-bezier(.2,.3,0,1);
    -moz-transition: all .8s cubic-bezier(.2,.3,0,1);
    -ms-transition: all .8s cubic-bezier(.2,.3,0,1);
    -o-transition: all .8s cubic-bezier(.2,.3,0,1);
    transition: all .8s cubic-bezier(.2,.3,0,1)
}

/**HERO BLOCK STYLES**/

.hero {
    position: relative;
    margin-top: 20px;
    padding: 60px 0 0px;
    /*background: rgb(0 18 13);*/
}

    /*@media only screen and (min-width: 768px) {
        .hero {
            margin-top:25px;
            padding: 120px 0 180px
        }
    }

    @media only screen and (min-width: 1220px) {
        .hero {
            margin-top:30px;
            padding: 160px 0 220px
        }
    }*/


/*.hero h1 {
    color: #fff
}*/

    @media only screen and (min-width: 768px) {
        .hero h1 {
            white-space:pre-line
        }
    }

    @media only screen and (min-width: 768px) {
        .hero p {
            margin-top:25px
        }
    }

    @media only screen and (min-width: 1220px) {
        .hero p {
            margin-top:30px
        }
    }

.hero__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.2;
}

.hero__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgb(53 40 255 / 75%);
}

hr {
    margin: 40px 0;
    border: 0;
    height: 1px;
    background: #e1e1e1;
    clear: both;
}

/**ABOUT PAGE**/

.about__pic {
    text-align: center;
}

.about__grid {
    margin-top: 80px;
    display: flex;
    grid-gap: 24px;
    flex-direction: column;
}

    @media only screen and (min-width: 768px) {
        .about__grid {
            flex-direction:row;
        }
    }

.about__grid img {
    width: 350px;
    border-radius: 16px;
    filter: grayscale(1);
}

.about__imgs {
    display: flex;
    grid-gap: 24px;
    margin-top: 24px;
    flex-direction: column;
}

    @media only screen and (min-width: 768px) {
        .about__imgs {
            flex-direction:row;
            height: 400px;
        }
    }

.about__imgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}