/*resets*/
* {
  background: 0 0;
  box-sizing: border-box;
  border-collapse: collapse;
  line-height: 1;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html {
  font-size: 16px;
}

body {
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

body.brutal {
    background-color: #ffffff/* #212529;*/;
    font-family: "Lato", Arial, sans-serif;
}

.home, .contact, .about, .work {
    padding: 64px;
    height: 100vh;
    width: 100vw;
}

.hero {
    height: 100%;
    position: relative;
}

.hero-box {
    background-color: #4ECDC4;
    height: 100%;
    padding: 48px;
}

.home .hero-box {
    background-image: url('../images/IMGv4.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.about .hero-box {
    background-color: #7BE0AD;
}

.work .hero-box {
    background-color: #FF8552;
}

.contact .hero-box {
    background-color: #FDE74C;
}

.hero-letter {
    color: #2E86AB;
    font-family: "Lato", Arial, sans-serif;
    font-size: 12rem;
    font-style: italic;
    font-weight: 900;
    position: absolute;
    z-index: 1;
}

.hero-letter--s {left: 20%;top: -52px;}
.hero-letter--h {left: 40%;top: -52px;}
.hero-letter--e {right: 42%;bottom: -48px;}
.hero-letter--a {right: 15%;bottom: -48px;}

.hero-title {
    position: absolute;
    left: 4%;
    top: 0;
}

.hero-title-page {
    color: #2E86AB;
    font-family: "Lato", Arial, sans-serif;
    font-size: 10rem;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 8px;
}

.hero-center {
    border: 20px solid #ffffff;
    height: 100%;
    overflow: auto;
}




.hero-body__heading {
    color: #03120E;
    font-size: 2.5rem;
}

.hero-body__subheading {
    color: #222222;
    font-size: 36px;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 16px;
}

.hero-body__dates {
    color: #666666;
    font-size: 22px;
    margin-bottom: 12px;
}

.contact-body {
    margin: 0 auto;
    max-width: 60%;
    padding: 24px 24px;
    position: relative;
    top:40%;
    transform: translate(0, -40%);
}
.contact-body__text {color: #03120E;font-size: 2rem;}
.contact-body__text p {margin-top: 24px;}
.contact-body__text a {color:#6610F2;}

.content-body {
    margin: 0 auto;
    max-width: 60%;
    padding: 128px 24px 24px;
}

.content-group {
    margin-bottom: 42px;
}

.content-group__heading {
    color: #000000;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 68px;
    margin-bottom: 24px;
}

.content-group__title {
    color: #222222;
    font-size: 36px;
    font-weight: 600;
    line-height: 42px;
    margin-bottom: 16px;
}

.content-group__dates, .work-group__dates {
    color: #666666;
    font-size: 22px;
    margin-bottom: 12px;
}

.content-group__dates--active {
    color: #303AB3;
}

.content-group__text p {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 12px;
}


.hero-link {
    position: absolute;
    z-index: 1;
}

.hero-link--right-top {right: -36px;top: -36px;}
.hero-link--right-bottom {right: -36px;bottom: -36px;}
.home .hero-link--right-bottom .hero-link-group__img svg {transform: rotate(45deg);}
.hero-link--left-bottom {left: -36px;bottom: -36px;}
.home .hero-link--left-bottom .hero-link-group__img svg {transform: rotate(90deg);}

.about .hero-link--right-top .hero-link-group__img svg {transform: rotate(-180deg);}
.about .hero-link--right-bottom .hero-link-group__img svg {transform: rotate(90deg);}
.about .hero-link--left-bottom .hero-link-group__img svg {transform: rotate(135deg);}

.contact .hero-link--right-top .hero-link-group__img svg {transform: rotate(-45deg);}
.contact .hero-link--right-bottom .hero-link-group__img svg {transform: rotate(0deg);}
.contact .hero-link--left-bottom .hero-link-group__img svg {transform: rotate(-90deg);}

.work .hero-link--right-top .hero-link-group__img svg {transform: rotate(-90deg);}
.work .hero-link--right-bottom .hero-link-group__img svg {transform: rotate(-135deg);}
.work .hero-link--left-bottom .hero-link-group__img svg {transform: rotate(-180deg);}

.hero-link-group {
    cursor: pointer;
    padding: 8px 12px;
    user-select: none;
}

.hero-link-group__title {
    color: #F24236;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.05rem;
    text-decoration: none;
}

.hero-link-group__img {display: flex;}

.hero-link--right-top .hero-link-group__img, .hero-link--right-bottom .hero-link-group__img {justify-content: flex-end;}
.hero-link--left-bottom .hero-link-group__img {justify-content: flex-start;}

.hero-link-group__img svg {
    display: block;
    fill: #F24236;
    height: 32px;
    width: 32px;
}

.blocks {
    display: flex;
    height: 100%;
}

.block {
    overflow: hidden;
    min-width: 100%;
}




.row {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin: 0 -8px;}
.col--center {margin: 0 auto;}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
min-height: 1px;padding-left: 8px;padding-right: 8px;position: relative;width: 100%;}
/*.col {-ms-flex-preferred-size: 0;flex-basis: 0;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}*/
.col-2 {flex: 0 0 16.66667%;max-width: 16.66667%;}
.col-3 {flex: 0 0 25%;max-width: 25%;}
.col-4 {flex: 0 0 33.33333%;max-width: 33.33333%;}
.col-5 {flex: 0 0 41.66667%;max-width: 41.66667%;}
.col-6 {flex: 0 0 50%;max-width: 50%;}
.col-7 {flex: 0 0 58.33333%;max-width: 58.33333%;}
.col-8 {flex: 0 0 66.66667%;max-width: 66.66667%;}
.col-9 {flex: 0 0 75%;max-width: 75%;}
.col-10 {flex: 0 0 83.33333%;max-width: 83.33333%;}

/*

interesting things

*/

/*

end interesting things

*/

@supports (-webkit-text-stroke: 2px #F24236) {
    .hero-link-group__title {
        color: transparent;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #F24236;
    }
}


@media(min-width: 1280px) {

}

@media(max-width: 1366px) {
    html, body {
        height: 100%;
    }

    .home, .contact, .about, .work {
        padding: 32px;
        height: 100%;
    }

}

@media(max-width: 1280px) {

}


@media(max-width: 1024px) {
    html, body {
        height: 100%;
    }

    .home, .contact, .about, .work {
        padding: 32px;
        height: 100%;
    }

    .hero-title-page {
        font-size: 8rem;
    }

    .contact-body {
        max-width: 90%;
    }

    .content-body {
        max-width: 80%;
        padding: 84px 16px 16px;
    }

}

@media(max-width: 792px) {

    .contact-body {
        max-width: 80%;
    }

    .hero-letter {
        font-size: 10rem;
    }

    .hero-title-page {
        font-size: 6rem;
        letter-spacing: 6px;
    }

    .hero-body__text {
        font-size: 1.4rem;
    }
  
}

@media(max-width: 590px) {
    html, body {
        height: 100%;
    }

    .home, .contact, .about, .work {
        padding: 24px;
        height: 100%;
    }

    .hero-box {
        padding: 16px;
    }

    .home .hero-box {
        background-position-x: 45%;
    }

    .hero-center {
        border-width: 16px;
    }

    .contact-body {
        max-width: 100%;
        padding: 56px 16px 16px;
        top: 0;
        transform: translate(0, 0);
    }

    .contact-body__text {
        font-size: 1.5rem;
        line-height: 1.6rem;
    }

    .hero-letter {
        font-size: 8rem;
    }

    .hero-letter--s, .hero-letter--h {
        top: -36px;
    }

    .hero-letter--s {
        left: 8%;
    }

    .hero-letter--h {
        left: 32%;
    }

    .hero-letter--e, .hero-letter--a {
        bottom: -32px;
    }

    .hero-letter--e {
        left: 28%;
    }

    .hero-letter--a {
        left: 56%;
    }

    .hero-title {
        left: 4%;
        top: 2%;
    }

    .hero-title-page {
        font-size: 3.2rem;
        letter-spacing: 6px;
    }

    .hero-link--right-top {
        right: -26px;
        top: -26px;
    }

    .hero-link--right-bottom {
        right: -26px;
        bottom: -26px;
    }

    .hero-link--left-bottom {
        left: -26px;
        bottom: -26px;
    }

    .hero-link-group__title {
        font-size: 2rem;
    }

    .content-body {
        max-width: 100%;
        padding: 56px 16px 16px;
    }

    .content-group__heading {
        font-size: 36px;
        font-weight: 800;
        letter-spacing: 0.4px;
        line-height: 1;
        margin-bottom: 16px;
    }
    
    .content-group__title {
        font-size: 24px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 12px;
    }
    
    .work-group__dates {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .content-group__text p {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 12px;
    }
    

}