@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap");

.bannerambiental {
    width: 100%;
    height: 100%;
}

.banner1 {
    width: 100%;
}

.separator {
    width: 100%;
    height: 15px;
    background-color: rgba(12, 89, 11, 0.298);
    padding: 0%;
    display: flex;
    margin-top: 0%;
    margin-bottom: 0%;
    flex-direction: column-reverse;
}

.titlemodule {
    display: flex;
    width: 100%;
    text-align: left;
    padding-bottom: 3%;
}

.titleambiental {
    text-align: left;
    padding-left: 3%;
    font-size: 47px;
    font-family: "Montserrat";
    color: rgb(21, 16, 88);
    font-weight: bolder;
}

.title2 {
    display: flex;
    text-align: left;
    padding-top: 4%;
}

.imicon {
    padding-left: 2%;
    padding-top: 0.5%;
    width: 5%;
    height: 5%;
}

.rowtitle {
    padding-left: 2%;
    width: 100%;
    text-align: left;
}

.imgrrpp {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.datos {
    font-size: 20px;
    font-family: "Montserrat";
    color: black;
    padding-bottom: 6%;
}

.box1 {
    width: 100%;
}

.divwrapper {
    display: flex;
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
}

.imagenencargado {
    width: 20%;
}

.datosencargado {
    width: 70%;
    padding-left: 3%;
    padding-top: 3%;
}

.iconcardencargado {
    width: 35px;
    height: 35px;
    margin-right: 2%;
    margin-bottom: 0.5%;
}

.contentambiental {
    width: 100%;
    height: 100%;
}

.banners {
    width: 100%;
    height: 100%;
}

.img1 {
    width: 100%;
    border: 0px;
    height: auto;
    margin: 0;
    text-align: left;
}

.imgpuntoslimpios {
    width: 100%;
    height: 100%;
}

.btnma {
    color: #3f9d55;
    background-color: none;
    border-color: #3f9d55;
    border-radius: 50px;
    margin-top: 5%;
}

.btnma:hover,
.btnma:focus,
.btnma:active,
.btnma.active,
.open .dropdown-toggle.btnma {
    color: #ffffff;
    background-color: #3f9d55;
    border-color: #3f9d55;
}

.btnma:active,
.btnma.active,
.open .dropdown-toggle.btnma {
    background-image: none;
}

.btnma.disabled,
.btnma[disabled],
fieldset[disabled] .btnma,
.btnma.disabled:hover,
.btnma[disabled]:hover,
fieldset[disabled] .btnma:hover,
.btnma.disabled:focus,
.btnma[disabled]:focus,
fieldset[disabled] .btnma:focus,
.btnma.disabled:active,
.btnma[disabled]:active,
fieldset[disabled] .btnma:active,
.btnma.disabled.active,
.btnma[disabled].active,
fieldset[disabled] .btnma.active {
    background-color: #5f00db;
    border-color: #3f9d55;
}

.btnma .badge {
    color: #5f00db;
    background-color: #ffffff;
}

.titlecrdsma {
    font-size: 20px;
    font-family: "Montserrat";
    color: black;
}

.colcardbody1 {
    display: block;
    width: 100%;
    border: 0px;
    height: auto;
    margin: 0;
    text-align: center;
    padding-bottom: 4%;
    margin-bottom: 4%;
    padding-top: 4%;
}

.colcardbody2 {
    display: block;
    width: 100%;
    border: 0px;
    height: auto;
    margin: 0;
    text-align: center;
    padding-bottom: 4%;
    padding-top: 4%;
}

.divslider {
    background: #77f4ff;
    background: -moz-linear-gradient(
        left,
        #77f4ff 0%,
        #b6d0ae 50%,
        #fff1f1 100%
    );
    background: -webkit-linear-gradient(
        left,
        #77f4ff 0%,
        #b6d0ae 50%,
        #fff1f1 100%
    );
    background: linear-gradient(
        to right,
        #77f4ff 0%,
        #b6d0ae 50%,
        #fff1f1 100%
    );
}

.cardbackground {
    fill-opacity: 10%;
}

.sliderma{
    padding-left: 15%;
    padding-bottom: 2%;
}


@media only screen and (max-width: 400px) {
    body {
        align-items: center;
    }

    .titleambiental {
        font-size: 12px;
    }

    .titlecrdsma {
        font-size: 10px;
    }

    .datos {
        font-size: 9px;
    }

    .btnma {
        font-size: 10px;
    }

    .imagenencargado {
        padding-top: 30%;
    }

    .imicon {
        padding-top: 4%;
    }

    .colcardbody1 {
        padding-left: 10%;
        padding-right: 10%;
    }

    .colcardbody2 {
        padding-left: 10%;
        padding-right: 10%;
    }

    .contentgaleria {
        padding-left: 0%;
        padding-right: 0%;
    }
}

@media screen and (min-width: 400px) and (max-width: 600px) {
    body {
        align-items: center;
        width: 100%;
    }

    .titleambiental {
        font-size: 18px;
    }

    .titlecrdsma {
        font-size: 13px;
    }

    .datos {
        font-size: 12px;
    }

    .btnma {
        font-size: 12px;
    }

    .imagenencargado {
        padding-top: 20%;
    }

    .imicon {
        padding-top: 3.5%;
    }

    .colcardbody1 {
        padding-left: 15%;
        padding-right: 15%;
    }

    .colcardbody2 {
        padding-left: 15%;
        padding-right: 15%;
    }

    .contentgaleria {
        padding-left: 8%;
        padding-right: 8%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 760px) {
    body {
        align-items: center;
    }

    .titleambiental {
        font-size: 18px;
    }

    .titlecrdsma {
        font-size: 17px;
    }

    .datos {
        font-size: 16px;
    }

    .btnma {
        font-size: 17px;
    }

    .imagenencargado {
        padding-top: 13%;
    }

    .colcardbody1 {
        padding-left: 10%;
        padding-right: 10%;
    }

    .colcardbody2 {
        padding-left: 10%;
        padding-right: 10%;
    }

    .contentgaleria {
        padding-left: 8%;
        padding-right: 8%;
    }
}

@media only screen and (min-width: 760px) and (max-width: 1050px) {
    body {
        align-items: center;
    }

    .titleambiental {
        font-size: 20px;
    }

    .titlecrdsma {
        font-size: 10px;
    }

    .datos {
        font-size: 14px;
    }

    .btnma {
        font-size: 10px;
    }

    .imagenencargado {
        padding-top: 13%;
    }

    .contentgaleria {
        padding-left: 8%;
        padding-right: 8%;
    }
}

@media only screen and (min-width: 1300px) and (max-width: 2300px) {
    body {
        align-items: center;
    }

    .imagenencargado {
        padding-top: 0%;
    }
    .divwrapper {
        padding-bottom: 4%;
    }

    .datosencargado {
        padding-top: 4%;
    }
}