/* RESET CSS */
    /* body */
    
    body {
        margin: 0;
        padding: 0;
        border: 0;
    }
    /* color */
    
     :root {
        --celeste: #007beb;
        --azul: #073e68;
        --rosado: #e6359f;
        --verde: #00c4B3;
    }
    
    .rosado {
        color: #e6359f !important;
    }
    
    .blanco {
        color: #ffffff !important;
    }
    
    @font-face {
        font-family: 'mohrbold';
        src: url('../fonts/MohrRounded-Bold.ttf') format('woff2'), url('../fonts/MohrRounded-Bold.ttf') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'mohrmedium';
        src: url('../fonts/MohrRounded-Medium.ttf') format('woff2'), url('../fonts/MohrRounded-Medium.ttf') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    
    @font-face {
        font-family: 'mohrregular';
        src: url('../fonts/MohrRounded-Regular.ttf') format('woff2'), url('../fonts/MohrRounded-Regular.ttf') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    /* Titulos */
    
    h1,
    h2,
    h5 {
        font-family: 'mohrbold';
        src: url('../fonts/MohrRounded-Bold.ttf') format('woff2'), url('../fonts/MohrRounded-Bold.ttf') format('woff');
        font-style: normal;
    }
    
    h3,
    h4 {
        font-family: 'Open Sans', sans-serif;
    }
    
    h1 {
        font-size: 2.2rem !important;
        text-align: center !important;
        color: var(--celeste);
    }
    
    h2 {
        text-align: center !important;
        color: var(--celeste);
    }
    
    .parrafo {
        font-family: 'Open Sans', sans-serif;
    }
    
    .titular {
        font-family: 'mohrbold';
        src: url('../fonts/MohrRounded-Bold.ttf') format('woff2'), url('../fonts/MohrRounded-Bold.ttf') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        color: #36e7c9;
        padding-top: 5%;
        text-align: center !important;
        background-color: #ffffff;
        margin-bottom: 0% !important;
        border-color: #ffffff;
    }
    
    .subtitulo {
        font-family: 'mohrbold';
        color: #007beb;
        font-size: 1.6rem;
        padding-bottom: 5%;
        padding-top: 2%;
        text-align: center !important;
        background-color: #ffffff;
        margin-top: 0% !important;
        border-color: #ffffff;
        margin-bottom: 5%;
    }
    /* Fin titulos */
    /* navbar */
    
    .navbar {
        width: 100%;
    }
    /* Fin Navbar */
    
    .embed-responsive-item {
        width: 100%;
        height: 25.4rem;
    }
    
    .manifiesto {
        background-color: #073E68;
        color: white;
        padding: 1% 7% 1% 7%;
    }
    
    .manifiesto i {
        color: #007beb;
        background-color: #073E68;
        padding-left: 40%;
        margin-left: 10px;
    }
    
    .manifiesto2 h3 {
        color: #36e7c9;
        font-family: 'mohrbold';
        padding-bottom: 3%;
        text-align: center !important;
    }
    
    .absolute-text-banner {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        position: absolute;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .video1 {
        background-color: #073E68;
        justify-content: center;
        text-align: center;
        padding: 0% !important;
    }
    
    .cabecera {
        background-color: #073E68;
    }
    
    .cabecera h1 {
        font-size: 2.4rem !important;
    }
    
    .cabecera p {
        padding-left: 30px;
    }
    
    .botones {
        background-color: #007beb;
        justify-content: center;
        padding-top: 1%;
    }
    
    .botones h1 {
        color: #ffffff;
        font-size: 2.4rem !important;
    }
    
    .espaciados {
        padding: 2% 10% 3% 10%;
    }
    
    .carta {
        text-align: center;
        font-family: 'mohrbold';
        color: #ffffff;
        background-image: url('/assets/img/B_ecocarta.jpg');
        position: absolute;
        display: block;
        margin-top: 2%;
        margin-bottom: 2%;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 10rem;
    }
    
    .botoncarta {
        text-align: center;
        font-family: 'mohrbold';
        justify-content: center;
        margin: 3% 20% 10% 20%;
        background-color: #E6359F !important;
        width: 60%;
        border: 1px solid var(--rosado) !important;
    }
    
    .botonsumate {
        text-align: center;
        font-family: 'mohrbold';
        justify-content: center;
        margin: 0% 20% 4% 20%;
        background-color: #E6359F !important;
        width: 60%;
        border: 1px solid var(--rosado) !important;
    }
    
    .botoneseco {
        text-align: center;
        font-family: 'mohrbold';
        justify-content: center;
        margin: 0% 20% 4% 20%;
        background-color: #E6359F !important;
        width: 60%;
        border: 1px solid var(--rosado) !important;
    }
    
    .bordestitulos {
        padding-top: 1%;
        padding-bottom: 2%;
    }
    
    .serparte {
        text-align: center;
        font-family: 'mohrbold';
        justify-content: center;
        background-color: #E6359F !important;
        width: 200px;
        border: 1px solid var(--rosado) !important;
        margin: 2% 0% 1% 0%;
    }
    
    .carta h1 {
        padding-top: 3%;
    }
    
    .escuela h1 {
        padding-top: 3%;
    }
    
    .aliado h1 {
        padding-top: 3%;
    }
    
    .escuela {
        text-align: center;
        font-family: 'mohrbold';
        color: #ffffff;
        background-image: url('/assets/img/B_ecoescuela.jpg');
        position: absolute;
        display: block;
        margin-top: 2%;
        margin-bottom: 2%;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 10rem;
        /*background-position: 0 -70px;*/ 
    }
    
    .aliado {
        text-align: center;
        font-family: 'mohrbold';
        color: #ffffff;
        background-image: url('/assets/img/B_ecoAliados.jpg');
        position: absolute;
        display: block;
        margin-top: 2%;
        margin-bottom: 2%;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 10rem;
    }
    
    .textopreguntas {
        font-family: 'mohrbold';
        color: #007beb;
        font-size: 1.4rem;
        margin-bottom: 0px;
    }
    /* Clases para eco botones cards circulares */
    
    .circular--landscape {
        display: inline-block;
        position: relative;
        width: 13rem;
        height: 13rem;
        overflow: hidden;
        border-radius: 50%;
    }
    
    .circular--landscape img {
        width: 100% !important;
        height: auto !important;
    }
    /* movil */
    
    .circular--landscape-movil {
        display: inline-block;
        position: relative;
        width: 8rem;
        height: 8rem;
        overflow: hidden;
        border-radius: 50%;
    }
    
    .circular--landscape-movil img {
        width: 100% !important;
        height: auto !important;
    }
    /* ESTILOS ECOCARTA */
    /* boton header */
    
    .ecocarta {
        text-align: center;
        font-family: 'mohrbold';
        color: #ffffff;
        background-image: url('/assets/img/B_carta.jpg');
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 20rem;
    }
    
    .modal-content {
        color: #000000 !important;
    }
    /* fin boton header */
    
    .laecocarta {
        padding: 1% !important;
        margin: 1% !important;
    }
    
    .laecocarta h1 {
        padding-bottom: 2%;
    }
    
    .instagrampost {
        background-color: #073e68;
        padding: 2%;
    }
    
    .materialedu {
        background-color: #0079eb1e;
        padding-bottom: 1%;
    }
    
    .materialedu h1 {
        padding-bottom: 2%;
        padding-top: 2%;
    }
    
    .ecotour {
        background-color: #ffffff;
    }
    
    .ecotour h1 {
        padding-bottom: 2%;
        padding-top: 2%;
    }
    /* FIN ESTILOS ECOCARTA */
    /* breadcrumb */
    
    .breadcrumb {
        font-family: 'Open Sans', sans-serif;
        font-weight: 600;
        margin-top: 1%;
    }
    /* ESTILOS ECOALIADOS */
    /* boton header */
    
    .ecoaliados {
        text-align: center;
        font-family: 'mohrbold';
        color: #ffffff;
        background-image: url('/assets/img/ecoaliados.jpg');
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 20rem;
    }
    /* carrusel */
    
    .carousel {
        background-color: var(--azul);
        padding: 1%;
        justify-content: center;
        text-align: center;
        padding: 2% 11%;
    }
    
    .card {
        background-color: transparent !important;
        color: #ffffff !important;
        font-family: 'Open Sans', sans-serif;
        border: none !important;
    }
    /* FIN ESTILOS ECOALIADOS */
    /* ESTILOS ECOESCUELA */
    /* boton header */
    
    .ecoescuela {
        text-align: center;
        font-family: 'mohrbold';
        color: #ffffff;
        background-image: url('/assets/img/ecocescuela_fondo.jpg');
        position: absolute;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 20rem;
    }
    
    .logomochila {
        width: min(70vw, 500px);
        height: auto;
    }
    
    .instacirculo {
        position: relative;
    }
    
    .row>* {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }
    
    .row {
        margin-right: 0% !important;
        --bs-gutter-x: 0% !important;
    }
    
    .postinsta {
        opacity: 0;
    }
    
    .actirecargadas {
        background-image: url('/assets/img/recarga.png');
        background-size: cover;
    }
    
    .recarcuerpo {
        background-image: url('/assets/img/RECARGATUCUERPO.png');
        background-size: cover;
    }
    
    .recarmente {
        background-image: url('/assets/img/RECARGATUMENTE.png');
        background-size: cover;
    }
    
    .recarentorno {
        background-image: url('/assets/img/recargatuentorno.png');
        background-size: cover;
    }