@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");

* {
    margin: 0px;
    box-sizing: border-box;
    padding: 0px;
}

html {
    height: 100%;
}

body {
    /* padding: 0px 5vw; */
    height: 100%;
    font-family: "Oswald", sans-serif;
}

/* .header {
    min-height: 15vh;
    background-color: #003399;
    width: 33vw;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header svg {
    width: 40%;
}

.header-span {
    padding: 0px;
    color: #ffe900;
} */

.main-picture {
    background: url("../images/impact/pic_1-big.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
    /* padding-bottom: 50%; */
}

.main-picture-color {
    background: rgba(16, 17, 120, 0.66);
    width: 100%;
    padding-bottom: 47.05%;
    clip-path: polygon(0 0, 67% 0, 47% 100%, 0% 100%);
}

.main-button__container {
    display: flex;
    justify-content: center;
    position: relative;
}

.main-button__button {
    position: absolute;
    background: rgba(16, 17, 120, 1);
    padding: 2% 3%;
    width: fit-content;
    color: white;
    text-transform: uppercase;
    transform: skew(-20deg);
    box-shadow: 0.625rem -0.625rem #ffe900;
    bottom: -70px;
    font: normal normal bold 5rem/4.375rem Oswald;
    cursor: pointer;
    transition: all 0.2s;
}

.main-button__button:active {
    transform: translateY(-3px);
}

.main-picture img {
    display: block;
    width: 100%;
    background: #ffe900;
}

.impact-text {
    margin-top: 15%;
}

.impact-text-header {
    padding: 0px 8vw;
    text-align: center;
    font: normal normal bold 2.1rem/2.5rem Oswald;
    color: #000000;
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

.impact-text-button {
    cursor: pointer;
    width: fit-content;
    padding: 1% 3%;
    margin: 0px auto;
    margin-bottom: 12%;
    margin-top: 2%;
    text-align: center;
    color: #00317e;
    background: #ffcc00;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.impact-text-button:hover {
    background: #00317e;
    color: #ffcc00;
}

.impact-text-button-header {
    text-transform: uppercase;
    font: normal normal bold 1.56rem/1.56rem Oswald;
}

.main-picture-color2 {
    background: rgba(16, 17, 120, 0.66);
    width: 100%;
    padding-bottom: 47.05%;
    clip-path: polygon(32% 0, 100% 0, 100% 100%, 52% 100%);
}

.main-picture-inside-text-header {
    text-align: right;
    font: normal normal bold 3.4rem/5.6rem Oswald;
    letter-spacing: 1.08px;
    color: #ffffff;
    position: absolute;
    right: 7vw;
    top: 22vh;
    border-bottom: 3px solid #ffe900;
    padding-bottom: 1%;
    border-spacing: 15px;
}

.main-picture-inside-text__text {
    text-align: right;
    font: normal normal bold 3.4rem/3.75rem Oswald;
    letter-spacing: 1.08px;
    color: #ffffff;
    text-transform: uppercase;
    position: absolute;
    right: 7vw;
    top: 37vh;
    padding-left: 50%;
}

.impact-image-slides {
    padding: 0px 6vw;
    margin-top: 10%;
    margin-bottom: 25%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 2%;
    grid-row-gap: 8%;
}

.impact-image-slide {
    border: 3px solid #ff9800;
    max-width: fit-content;
}

.impact-image-container {
    width: 100%;
}

.impact-image-container img {
    width: 100%;
}

.impact-image-slide-main-text {
    margin-top: 3%;
    padding-left: 7%;
    padding-right: 3%;
}

.impact-image-slide-button {
    margin-left: 7%;
    background: #ffcc00;
    display: inline-block;
    padding: 2% 10%;
    text-transform: uppercase;
    font: normal normal 300;
    align-self: flex-start;
    justify-items: flex-end;
    margin-top: auto;
    margin-bottom: 5%;
    cursor: pointer;
    transition: all 0.2s;
}

.impact-image-slide-button:hover {
    background: black;
    color: white;
}

.impact-image-slide-button-text {
    text-align: center;
    font: normal normal 600 1.5rem Oswald;
}

.impact-image-slide-main-text-header {
    text-transform: uppercase;
    font: normal normal bold 2rem/2.2rem Oswald;
    text-align: left;
    color: black;
}

.impact-image-slide-main-text__text {
    color: black;
    text-align: left;
    font: normal normal 600 1.3rem/1.8rem Oswald;
    padding-top: 10%;
    padding-right: 3%;
    margin-bottom: 10%;
}

.impact-image-slide {
    display: flex;
    flex-direction: column;
    position: relative;
}

.impact-image-slide-image-header {
    position: absolute;
    top: 2vh;
    padding: 3% 10%;
    left: 0px;
    right: 35%;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.impact-image-slide-image-header-text {
    text-transform: uppercase;
    text-align: center;
    font: normal normal bold 1.6rem Oswald;
}

.impact-blue__light {
    border: 5px solid #03a9f4;
}

.impact-head-blue__light {
    background: #03a9f4;
}

.impact-green__dark {
    border: 5px solid #00796b;
}

.impact-head-green__dark {
    background: #00796b;
}

.impact-red {
    border: 5px solid #f44336;
}

.impact-head-red {
    background: #f44336;
}

.impact-green__light {
    border: 5px solid #4caf50;
}

.impact-head-green__light {
    background: #4caf50;
}

.impact-blue {
    border: 5px solid #536dfe;
}

.impact-head-blue {
    background: #536dfe;
}

.impact-orange {
    border: 5px solid #ff9800;
}

.impact-head-orange {
    background: #ffcc00;
}

@media (max-width: 1400px) {
    .main-picture-inside-text__text {
        font: normal normal bold 2.4rem/2.75rem Oswald;
    }
}

@media (max-width: 1100px) {
    .main-picture-inside-text__text {
        font: normal normal bold 1.4rem/1.75rem Oswald;
    }

    .impact-image-slides {
        grid-template-columns: 1fr 1fr;
    }

    .main-picture-inside-text-header {
        top: 1vh;
    }

    .main-picture-inside-text__text {
        top: 15vh;
    }

    #impact-boxes-link {
        margin-bottom: 500px;
    }
}

@media (max-width: 850px) {
    html {
        font-size: 70%;
    }

    .main-button__button {
        bottom: -7vh;
    }

    .main-picture-inside-text-header {
        top: 5vh;
    }

    .main-picture-inside-text__text {
        top: 18vh;
    }

    .impact-text-button-header {
        font-size: 3rem;
    }

    .impact-text-button {
        padding: 2% 5%;
    }
}

@media (max-width: 600px) {
    .impact-image-slides {
        grid-template-columns: 1fr;
        grid-row-gap: 1%;
    }

    .impact-text-button {
        padding: 4% 10%;
    }
}

@media (max-width: 500px) {
    .main-button__button {
        font: normal normal bold 3.5rem/2.875rem Oswald;
        bottom: -4vh;
    }

    .main-picture-inside-text-header {
        top: 1vh;
    }

    .main-picture-inside-text__text {
        top: 11vh;
    }
}

@media (max-width: 420px) {
    .main-picture-color2 {
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 25% 100%);
    }

    .main-picture-inside-text__text {
        right: auto;
        left: -150px;
        padding-right: 1%;
    }

    html {
        font-size: 60%;
    }
}

@media (max-height: 550px) {
    .main-picture-inside-text__text {
        top: 28vh;
    }
}

@media (max-width: 360px) {
    .impact-text-button-header {
        font-size: 2rem;
    }
}