:root {

    --primary-color: #ed0b0b;
    --section-alternate-color: #fde5e6;

    --bg-dark: hsl(211, 11%, 90%);
    --bg: hsl(211, 22%, 95%);
    --bg-light: hsl(211, 100%, 100%);
    --text: hsl(211, 31%, 5%);
    --text-muted: hsl(211, 6%, 28%);
    --highlight: hsl(211, 100%, 100%);
    --border: hsl(211, 4%, 51%);
    --border-muted: hsl(211, 6%, 62%);
    --primary: hsl(208, 74%, 28%);
    --secondary: hsl(38, 100%, 17%);
    --danger: hsl(9, 21%, 41%);
    --warning: hsl(52, 23%, 34%);
    --success: hsl(147, 19%, 36%);
    --info: hsl(217, 22%, 41%);

    --shadow-small: inset 0 1px 2px #ffffff30,
        0 1px 2px #00000030,
        0 2px 4px #00000015;

    --shadow-medium: inset 0 1px 2px #ffffff50,
        0 2px 4px #00000030,
        0 2px 8px #00000015;


    --shadow-large: inset 0 1px 2px #ffffff70,
        0 4px 6px #00000030,
        0 6px 10px #00000015;

}


body {
    padding: 0px;

    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;


    margin: 0 auto;

    display: flex;
    justify-content: center;

    background-color: #e0e0e0;

}


.header {
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 20px;
    justify-items: center;
    padding-top: 10px;
}

.header img {
    width: 300px;
}

.title {
    background-color: var(--primary-color);
    color: white;
    display: grid;
    width: 100%;

    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;

    display: grid;

    text-align: center;
    text-wrap: balance;

    & h1 {
        text-shadow: 2px 2px 8px #575757;
        font-size: 2.5rem;
        margin: 0;
    }

    & h2 {
        font-size: 1.2rem;
        margin: 0;
    }
}

.footer {
    background-color: var(--primary-color);
    color: white;
    display: grid;
    padding: 20px;
    justify-content: center;
    text-align: center;
    text-wrap: balance;


    & h2 {
        /* text-shadow: 2px 2px 8px #575757; */
        font-size: 1.25rem;
        margin: 0;
    }

    & h3 {
        font-size: 1rem;
        margin: 0;
    }

    & a[href] {
        text-decoration: none;
    }


    & .link {
        color: white;
        border-bottom: 1px solid white;
    }

    & .social-networks {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: row;
    }
}

.link-with-image {
    display: inline-flex;
    gap: 5px;

    & svg {
        width: 20px;
        fill: var(--primary-color);
        fill: white;
    }

    & .image-container {
        width: 25px;
        height: 25px;
        background-color: white;
        background-color: var(--primary-color);
        border-radius: 50%;
        padding: 5px;

    }
}

.container {
    display: grid;
    grid-auto-rows: auto;
    gap: 20px;
}


.full-page {
    width: 100%;
    background-color: white;
}

@media (min-width: 1200px) {

    .full-page {
        width: 1200px;
        box-shadow: 0 0 8px 9px #d0d0d0;
    }

    .container {
        /* background-color: white; */
    }

    .whatsapplink {
        right: auto;
        left: 50%;
        margin-left: 530px;
        /* 600px (half width) - ~50px (icon width + gap) */
    }

}


.side {

    & h2 {
        font-size: 1.5rem;
        margin: 0;
    }

    &.text,
    &.img {
        font-size: 1rem;
    }

    & img {
        vertical-align: top;
        margin-bottom: 1.25rem;

        border-radius: 20px;

        box-shadow: var(--shadow-medium);
    }

}


.section {

    display: grid;

    justify-items: center;
    align-items: center;
    font-size: 1.3rem;

    padding: 20px;

    padding-top: 80px;
    padding-bottom: 80px;

    & li:not(:first-child) {
        margin-top: 10px;
    }


}

.link-list {

    list-style: none;

    & a[href] {
        color: inherit;
    }

}

@media (min-width: 600px) {

    .section {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-areas:
            "img text"
    }

    .section:nth-child(even) {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-template-areas:
            "text img"
    }
}


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

    /*
    html {
        scroll-snap-type: y proximity;
    }

    .scroll-point {
        scroll-snap-align: start;
    }
    */

    .section {
        grid-template-columns: 1fr;
        gap: 30px;

        grid-template-areas:
            "img"
            "text"
        ;

        /* padding: 0px; */
        padding-top: 40px;
        padding-bottom: 40px;

    }


}

.section img {
    width: 300px;
}

.section:hover img {
    /*
    scale: 1.1;
    transition: scale 0.5s;
    */
}

.section:nth-child(odd) {
    background-color: var(--section-alternate-color);
}



.important {
    font-weight: bold;
    font-size: 1.2rem;
}

.highlight {
    font-weight: bold;
}



.logo-main {
    width: 500px;
}


.button-wrapper {
    display: flex;
    justify-content: center;
}

.button {
    display: inline-flex;
    padding: 10px 20px;

    background-color: var(--primary-color);
    color: white !important;

    border-radius: 5px;

    text-decoration: none;
    font-weight: bold;

    white-space: nowrap;

    border: 0;
    font-size: 1rem;

    box-shadow: var(--shadow-medium);

    cursor: pointer;
}


.pictures {
    columns: auto;
    gap: 1.25rem;
    text-align: center;

    & img {
        vertical-align: top;
        margin-bottom: 1.25rem;

        border-radius: 20px;

        box-shadow: var(--shadow-large);
    }
}


.container-one-column {
    padding: 20px;
}


input,
textarea {
    border: 1px solid #c0c0c0;
    padding: 5px;
}


.form-title {
    font-weight: bold;
}

.form-title.mandatory:after {
    content: ' *';
    color: var(--primary-color);
}

.form-title:not(:first-child) {
    margin-top: 20px;
}

.go-to-main-page {
    cursor: pointer;
}

.form-field {
    display: flex;
    gap: 5px;
}

.mandatory-description {
    display: none;
}

.mandatory-description.show {
    display: unset;

    animation: heartbeat 0.5s alternate infinite;

}

@keyframes heartbeat {
    from {
        scale: 1;
        rotate: -5deg;
    }

    to {
        scale: 1.2;
        rotate: 5deg;
    }

}

.mandatory-description svg {
    width: 20px;
    fill: var(--primary-color);
}

dialog.message {
    position: fixed;
    bottom: 50%;
    transform: translate(0, 50%);
    box-shadow: var(--shadow-large);
}

dialog.message[type=error] {}

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

    dialog.message {
        margin-left: 10px;
        margin-right: 10px;
    }

}



.article {
    display: grid;
    grid-auto-rows: auto;
    gap: 20px;

    & .video {
        align-content: center;
    }

    & .video iframe {
        width: min(100%, 900px);
    }

    & .article-section {}

    & .article-section:nth-child(even) {
        background-color: var(--section-alternate-color)
    }

    &>* {
        padding: 0px;
        padding-left: 20px;
        padding-right: 20px;
    }

    & li:not(:first-child) {
        margin-top: 10px;
    }



}



.whatsapplink {
    position: fixed;

    /* bottom: 10px; */

    bottom: 10px;
    height: 1.5rem;
    width: 1.5rem;

    background-color: green;

    right: 20px;

    opacity: 0.7;

    border-radius: 50%;
    padding: 0.5rem;

    cursor: pointer;

    & svg {
        fill: white;
    }

    transition: scale 0.3s ease-in-out;

}

.whatsapplink:hover {

    scale: 1.2;

    transition: scale 0.3s ease-in-out;

}