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

html {
    font-size: 62.5%;
    font-family: "Gotham-Book";
}

:root {
    --primary-color: #ffcb17;
    --secondary-color: #1b3561;
    --third-color: #009293;
    --general-background: #fefcf5;
    --footer-background: #122340;
    --green-dark: #035f5b;
    --text-gray: #777777;
    --border: #424242;
    --white: #ffffff;
    --primary-blue: #06ABEA;
    --secondary--blue: #0B6AB7;
    --third--blue: #1C4492;
    --bs-font-sans-serif: "Gotham-Book";
}

/* brBanner */

.brBanner img {
    width: 100%;
}

/* brButtons y modal buzones */

.brButtons {
    width: 100%;
    margin: 55px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.brButtons a {
    width: 200px;
    margin: 10px 0;
    padding: 10px 30px;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    color: white;
    background-color: var(--secondary-color);
    box-shadow: 2px 2px 2px gray;
}

.modal h2,
h5 {
    font-size: 2.6rem;
    font-family: "Gotham-Black";
    color: var(--secondary-color);
}

.modal .accordion-body {
    font-size: 1.8rem;
    color: var(--secondary-color);
}

.modal .accordion-body .card-body {
    font-size: 1.8rem;
    color: var(--secondary-color);
}

.modal .accordion-body .card-body svg {
    color: var(--primary-color);
}

.modal-footer button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-size: 1.6rem;
    color: var(--secondary-color);
}

.modal-footer button:hover {
    background-color: var(--secondary-color);
}

/* brVideo  */
.brVideo {
    max-width: 1440px;
    margin: 0 auto;
}

/* br3r  */
.br3r {
    width: 100%;
    margin: 24px auto;
}

.br3r img {
    width: 100%;
    max-width: 200px;
}

.br3r div {
    margin: 24px;
    text-align: center;
}

/* brIntroduction */

.brIntroduction {
    width: 100%;
    margin: 12px auto 0 auto;
}

.brIntroduction .brIntroducction__element {
    margin: 0 30px;
    padding: 81px 10%;
    background-color: var(--white);
    border-radius: 3px;
}

.element__description {
    margin: 30px 0 15px 0;
    max-width: 1440px;
    font-size: 2.0rem;
    font-family: "Gotham-Book";
    text-align: justify;
    color: var(--secondary-color);
}

/* brDirectionsBanco */

.brDirectionsBanco {
    width: 100%;
    margin: 12px auto 0 auto;
}

.brDirectionsBanco__elements {
    margin: 0 30px;
    padding: 81px 0;
}

.brDirectionsBanco h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 5rem;
    padding-bottom: 27px;
    text-align: center;
    color: var(--secondary-color);
}

.brElements {
    display: flex;
    flex-direction: column;
}


.brDirectionsBanco__element1,
.brDirectionsBanco__element2 {
    margin: 0px 3px 15px 0px;
    padding: 81px 10%;
    background-color: var(--white);
    border-radius: 3px;
}

.brDirectionsBanco .brDirectionsBanco__element1 h2,
.brDirectionsBanco .brDirectionsBanco__element2 h2 {
    font-size: 2.6rem;
    font-family: "Gotham-Black";
    text-align: center;
    color: var(--secondary-color);
}

.brDirectionsBanco .accordion-body,
.accordion-button {
    font-size: 1.8rem;
    color: var(--secondary-color);
}

.brDirectionsBanco .accordion-body svg {
    color: var(--primary-color);
}

/* brOurProcess */
.brOurProcess {
    width: 100%;
    margin: -81px auto 0 auto;
}

.brOurProcess__element {
    margin: 0 30px;
    padding: 81px 0;
}

.brOurProcess h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 5rem;
    padding-bottom: 27px;
    text-align: center;
    color: var(--secondary-color);
}

.brOurProcess__background {
    width: 100%;
    height: 54vh;
    border-radius: 3px;
    background-image: url(../img/ropero/Nuestro-Proceso.gif);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

}

/* brGAllery */
.brGallery {
    width: 100%;
    margin: 12px auto 0 auto;
}

.brGallery h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 5rem;
    padding-bottom: 27px;
    text-align: center;
    color: var(--secondary-color);
}

.brGallery__images {
    width: 100%;
    padding: 0 30px 0 30px;
}

.brGallery__images h5 {
    font-size: 1.8rem;
    text-align: center;
}

/* brDonation */
.brDonation {
    width: 100%;
    margin: 12px auto 0 auto;
    color: var(--secondary-color);
}

.brDonation__element {
    margin: 81px 30px;
    display: flex;
    flex-direction: column;
}

.brDonation__linkage,
.brDonation__account {
    margin: 10px 5px;
    padding: 81px 6%;
    font-size: 2rem;
    text-align: center;
    background-color: var(--white);
}

.brDonation__linkage h5 {
    text-align: center;
    margin-bottom: 24px;
    color: var(--primary-color);
}

.brDonation__linkage p {
    margin-bottom: 24px;
    text-align: justify;
}

.brDonation__linkage a {

    width: 200px;
    margin-top: 15px;
    padding: 10px 30px;
    font-size: 1.8rem;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    color: white;
    background-color: var(--secondary-color);
    box-shadow: 2px 2px 2px gray;

}

.brDonation__account img {
    width: 100%;
    max-width: 295px;
}

/* media queries */

@media screen and (min-width: 375px) {

    .brOurProcess__background {
        height: 73vh;
    }

}

@media screen and (min-width: 768px) {

    .brButtons {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .brButtons a {
        width: auto;
    }

    .br3r {
        display: flex;
        justify-content: space-evenly;
    }

    .brDirectionsBanco h2 {
        font-size: 6rem;
    }

}

@media screen and (min-width: 1024px) {

    .brButtons a {
        font-size: 1.8rem;
    }

    .brOurProcess__background {
        height: 132vh;
    }

    .brDonation__element {
        flex-direction: row;
        justify-content: space-around;
    }

}