@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@0;1&display=swap');


:root {
    --ctd-bkg-1: #fefdfb; /* accessible everywhere */
    /* --ctd-bkg-2: #2c85cc; */
    --ctd-bkg-2: #f3f2f0;
    --ctd-bkg-3: #243f73; /* accessible everywhere */
    --ctd-bkg-4: #f3f2f0; /* accessible everywhere */
    --ctd-bkg-5: #3d68b8; /* accessible everywhere */
    --ctd-bkg-6: #294983; /* accessible everywhere */
    --ctd-bkg-7: #e7e6e5; /* accessible everywhere */
    --ctd-fc-3: #6e6d6d; /* accessible everywhere */
}

/* * {
    background-color: var(--ctd-bkg-7);
} */

.ctd-logo-nav{
    display: flex;
    flex-direction: row;
    align-content: left;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    background: var(--ctd-bkg-3);
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
    /* background:#f6f5f3; */
    position: sticky;       /* fija la barra d navegación al comienzo de la página */
    top: 0px;                 /* margen del borde superior al límite de fijado de la barra de navegación */
}

    .ctd-logo-div {
        width: 220px;
        margin-left: 20px;
        min-height: 50px;
        line-height: 20px;
        /* padding-left: 5px; */
        padding: 2px 0px 2px 5px;
        text-align: left;
        background: var(--ctd-bkg-3);
    }

        #logo-certidata {
            box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
            background: var(--ctd-bkg-3);
        }

        figure {
            background: var(--ctd-bkg-3);
        }

    .ctd-nav-div {
        width: 1200px;
        min-height: 20px;
        padding-left: 15px;
        line-height: 20px;
        text-align: left;
        text-justify: center;
        align-content: center;
        background: var(--ctd-bkg-3);
    }

    .ctd-version {
        margin-right: 30px;
        background: var(--ctd-bkg-3);
    }

.bodyarea-div-0 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 600px;
    /* min-height: 400px; */
    padding-bottom: 20px;
    align-items: center;
    margin-left: 50px;
    margin-right: 50px;
    /* background-color: var(--ctd-bkg-2); */
    background-color: var(--ctd-bkg-4);
}

/* @media (max-width: 200px) {
    .bodyarea-div-0 {
      background-color: var(--ctd-bkg-2);
    }
} */

.bodyarea-div-sec0L {
    display: flex;
    flex-direction: column;
    border-style: dotted; 
    /* border-color: #363434;  */
    border-color: var(--ctd-bkg-3); 
    border-radius: 85px; 
    border-width: 3px; 
    width: 40%; 
    /* width: min-content; */
    height: 200px;
    margin-left: 50px;
    margin-bottom: 10px;
    margin-top: 10px;
    /* align-self: flex-start; */
    align-self: center;
    align-items: center;
    justify-content: center;
    background-color: var(--ctd-bkg-5);
    box-shadow: 7px 7px 10px rgba(0,0,0,0.5);
    font-size: 25px;
    /* text-align: center; */
    }

    .bodyarea-div-sec0L div,
    .bodyarea-div-sec0L div p,
    .bodyarea-div-sec0L div a img {
        background-color: var(--ctd-bkg-5);
    }
    
    .bodyarea-div-sec0L div a img {
        text-decoration: none;
    }

    .bodyarea-div-sec0L p {
       /* font-size: 1.5vw; */
       font-size: clamp(10px, 1.5vw, 25px);
       font-weight: bold;
       color: #FFFFFF;
    }
    /* .bodyarea-div-sec0L p:hover {
       font-size: 30px;
       color: rgb(8, 193, 193);
    } */

    .logo-certires {
        width: 100%;
        height: auto;
    }


.bodyarea-div-sec0R {
    border-style: dotted; 
    border-color: #363434; 
    border-radius: 20px; 
    border-width: 3px; 
    width: 60%; 
    height: 300px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 50px;
    align-self: flex-end;
}

#ctd-footer-div {
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    width: 100%;
    height: 150px;
    background-color: var(--ctd-bkg-7);
    padding-top: 25px;
    padding-bottom: 15px;
    color: var(--ctd-fc-3); 
    font-size: 20px;
}

    #div-footer-upper {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
    }

        #footer-div-contact,
        #footer-div-links,
        #footer-di-ophours {
            display: flex; 
            flex-direction: column; 
            /* width: 400px; */
            width: auto;
            margin-right: 50px;
        }

            .footer-div-unit {
                flex-direction: row;
                /* height: 35px; */
                line-height: 40px;
                align-items: center;
            }
    
        #div-footer-bottom {
            display: flex; 
            flex-direction: row; 
            justify-content: center;
            align-items: center;
            width: 100%;
            font-size: 10px;
            padding-top: 20px;
        }

            #copyright,
            #allrights,
            #producer {
                color: #888888;
                font-size: 12px;
            }

            #producer {
                line-height: 16px;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
    
        #div-footer-ccrights {
            display: flex; 
            flex-direction: row; 
            justify-content: center; 
            width: 100%;
            font-size: small;
            color: #FFFFFF;
            padding-top: 5px;
        }