@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');

:root {
    /*Cores importantes*/

    /*............................*/
    --primary1: #e70146;
    --secundary1: #1c84ad;
    --primary2: #4e73df;
    --secondary2: #858796;
    --hover-color: #fdd052;
    --dark1: #1c2022;
    --dark2: #5a5c69;
    --maincolor: #5168f4;
    --dark-color: #11152a;
    --light-color: hsl(232, 45%, 87%);
    --header-bg: var(--secundary1);
    --blue-light: #404eed;
    --blue-dark: #3946d4;
    --bg1: #fff;
    --bg2: #e2e3e9;
    --bg3: black;
    --color-neutra-0: #0c0c0c;
    --color-neutra-10: #171717;
    --color-neutra-30: #a8a29e;
    --color-neutra-40: #f5f5f5;
    --blue: #4e73df;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #e74a3b;
    --orange: #fd7e14;
    --yellow: #f6c23e;
    --green: #1cc88a;
    --teal: #20c9a6;
    --cyan: #36b9cc;
    --gray: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --danger: #e74a3b;
    --light: #f8f9fc;
    --font-family-inter-sans-serif: "inter" sans-serif;
    --font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*list-style: none;*/
    text-decoration: none;
    font-size: 16px;
    font-family: var(--font-family-sans-serif);
}

*::after,
*::before {
    box-sizing: inherit;
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    background: var(--bg1);

    /* 
   font-family: 'Crimson Pro', 'propins', serif;*/
}

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

.flex-row {
    display: flex;
}

.flex-center-w {
    justify-content: center;
}

.flex-center-h {
    align-items: center;
}

.flex-center-wh {
    align-items: center;
    justify-content: center;
}

.dh {
    color: black;
    font-size: 14px;
    font-weight: bold;

}


/*CABEÇALHO*/
/*SKELETON LOADER*/
.skeleton {
    opacity: .7;
    animation: skeleton_loading 1s linear infinite alternate;
}

@keyframes skeleton_loading {
    0% {
        background-color: hsl(200, 20%, 70%);
    }

    0% {
        background-color: hsl(200, 20%, 95%);
    }
}

.skeleton_text {
    width: 100%;
    height: .5rem;
    margin-bottom: .25rem;
    border-radius: .125rem;
}

.skeleton_text:last-child {
    width: 80%;
    margin-bottom: 0;
}

/*FIM DO SKELETON LOADER*/
header {
    width: 100%;
    background-color: var(--header-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    z-index: 10;
}

#sec-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    width: 100%;
    height: 70px;
    padding: 2px 15px;

}

.branding {
    height: 100%;
    width: 190px;
    text-align: center;
    padding: 0.2rem;
    margin-right: 0.2rem;
}

.branding-logo {
    /*color: #a0d525;
    font-size: calc(0.8rem + 1vw);
    text-decoration: none;*/
    height: 100%;
    width: 100%;
}

.branding-logo span {
    color: var(--light);
    font-size: calc(0.8rem + 1vw);
}

.branding-logo:hover {
    color: var(--light);
}

.branding-logo img {
    height: 100%;
    width: 100%;
}

.top-dir {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 190px);
    height: 100%;
    padding: 5px;

}

.top-dir-f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 5px 0;

}

.phone,
.mail,
.endereco {
    display: flex;
    align-items: center;
    width: auto;
}

.p-img {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(8, 141, 26);
    ;
    padding: 5px;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    margin-right: 5px;


}

.p-img i {
    color: white;

}

.p-img i #phone-span {
    font-weight: bold;
}

.t-d-ajuda {
    margin-left: 50px;
}

.t-d-ajuda span a {
    text-decoration: dotted;
    color: red;
}

#d-dh {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 100px;
    width: calc(100vw - 250px);
    margin-right: 5px;
}

#hora {
    margin-left: 10px;
    text-align: center;
    height: 100%;
    padding: 5px;
    width: 80px;
    background: #1d53a3;
    color: white;
    border-radius: 5px;
}

#top-u-data {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 240px;


}

#user-login {
    border: solid 1px #d4cece;
    padding: 2px 6px;
    border-radius: 20px;
    height: 30px;
}

#user-login img {
    width: 20px;
}

#user-login a {
    height: 100%;
    display: flex;
    align-items: center;
    color: rgb(241, 9, 9);
    font-weight: bold;
    font-size: 0.1rem;
}

#user-login a:hover {
    color: var(--hover-color);
}

.user-login a span {
    font-size: 0.7rem;
}

/*header.had-aluno,
.h-funcionario {
    background: linear-gradient(-45deg, #023f07, #039116, #055202, #012901) no-repeat;
}*/

header.sticky {
    position: relative;
    top: 0;
    position: fixed;
    background: #1b365f;
}

#sec-top.epo-fun {
    position: fixed;
    width: 100%;
    background-color: var(--header-bg);
    z-index: 10;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.8rem;
    width: 100%;
    height: 35px;
}

.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.menu li {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0 2px 1px 2px;
    height: 100%;
}

.menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--light);
    padding: 0 1em;
    height: 100%;
    /*padding: 1em 1.5em;*/
    font-size: 1em;
    /*1.3em*/
    /*border-radius: 5px;*/
}

/*Submenu*/
.has-dropdown {
    position: relative;
}

.submenu {
    position: absolute;
    left: 0;
    background-color: var(--secundary1);
    white-space: nowrap;
    padding: 0;
    /*padding: 1.5em 0;*/
    min-width: 18em;
    /* min-width: 22em;*/
    /*esconder submenu*/
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
}

.submenu>li>a {
    padding: 0.4em;
    /*padding: 0.8em 1.5em;*/
    font-size: 0.8em;
}

.submenu .submenu {
    left: -100%;
    top: 0;
}

.submenu .submenu .submenu {
    left: -100%;
    top: 0;
}

.menu>li:hover>a,
.submenu>li:hover>a {
    background-color: hsla(0, 0%, 100%, 0.05);
    color: var(--hover-color);
}

/*Quando passa o rato no menu*/
.menu>li:hover>a {
    background: rgb(8, 141, 26);

    transition: all .5s;
}

.menu>li.li-aluno:hover>a {
    background-color: #064106;
}

/*Arrows*/
.arrow {
    width: 0.5em;
    height: 0.5em;
    display: inline-block;
    vertical-align: middle;
    border-left: 0.15em solid currentColor;
    border-bottom: 0.15em solid currentColor;
    transform: rotate(-45deg);
    margin-top: -0.25em;
    transition: transform 100ms ease-in-out;
}

/*Abrir submenu */
.menu>li:hover>a+.submenu,
.submenu>li:hover>a+.submenu {
    opacity: 1;
    transform: scaleY(1);
}

/*Animação arrows*/
.menu>li:hover>a>.arrow,
.submenu>li:hover>a>.arrow {
    transform: rotate(225deg);
}


.btn-menu {
    display: none;
}


@media (max-width: 1027px) {
    .menu li a {
        font-size: 0.8rem;
        padding: 0.5rem 0.6rem;
    }

    .user-login {
        width: 5rem;
    }

    .user-login a img {
        width: 0.2rem;
        height: 1.2rem;
    }

    .user-login a span {
        font-size: 0.7rem;
    }
}

@media (max-width: 859px) {
    .menu li:nth-child(6) {
        text-align: justify;
        min-width: 5rem;
    }
}


@media (max-width: 750px) {
    .navbar {
        position: relative;
        width: 90%;
        padding: 0 10px;
    }

    .user-login {
        width: 8rem;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    .menu {
        display: block;
        position: absolute;
        top: 3.6875rem;
        left: -0.8rem;
        background: linear-gradient(72deg, rgba(61, 119, 226, 0.85) 10%, rgba(12, 80, 64, 0.85)99%);
        text-align: center;
        width: 100vw;
        height: 0;
        z-index: 1;
        visibility: hidden;
        transition: 0.5s;
        overflow-y: hidden;
    }

    .menu a {
        padding: 1rem 0;
        margin-inline: 1rem;
        border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.16);
        border-radius: 0;

    }

    .btn-menu {
        background: none;
        font: inherit;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--light);
        padding-block: 1rem;
        cursor: pointer;
        position: relative;
        margin: 0 auto;
    }

    /*Desenhar o menu hamburger*/
    .hamburger {
        border-top: 0.125rem solid;
        width: 1.25rem;
    }

    .hamburger::before,
    .hamburger::after {
        content: " ";
        display: block;
        width: 1.25rem;
        height: 0.125rem;
        background: currentColor;
        margin-top: 0.3125rem;
        position: relative;
        transition: 0.3s;
    }

    .navbar.active .menu {
        height: calc(100vh - 4.6875rem);
        visibility: visible;
        overflow-y: auto;
    }

    .navbar.active .hamburger {
        border-top-color: transparent;
    }

    .navbar.active .hamburger::before {
        transform: rotate(135deg);
    }

    .navbar.active .hamburger::after {
        transform: rotate(-135deg);
        top: -0.45375rem;
    }
}


/*____________________ FIM DO CABEÇALHO ____________________*/


/*::::::: LOGIN :::::::::*/

/*@import url('https://fonts.googleapis.com/css2?family=Corinthia:wght@700&family=Poppins:wght@400;700&display=swap');



*/
.l-container {
    user-select: none;
}

.form-login {
    width: 100%;

}

h2 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    color: white;
    margin-bottom: 45px;
}

.wel-span {
    font-size: 1.5rem;
    color: var(--color-neutra-30);
}




.wrapper>div {
    width: 600px;
    height: 350px;
    display: flex;
    flex-direction: column;
    margin: 5em auto;
    background-color: var(--maincolor);
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.45) 0 25px 26px -20px;
}

:is(.login, .signup)>div {
    position: relative;
    flex: 0 1 50%;
    padding: 10px;
}

.content-heading .y-style {
    display: flex;
    flex-direction: column;
}

.logo a {
    display: inline-block;
    margin-bottom: 30px;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-color);
}

.logo span {
    color: #213ef1;
}

.content-heading p {
    color: var(--light-color);
}

.content-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.welcome {
    text-align: center;
}

#descript {
    margin-right: 2.7rem;
    font-size: 0.8rem;
}

/*ocultar o form de registo*/
/*
form input:not(#terms, #remember) {
    font-family: inherit;
    width: 100%;
    outline: 0;
    margin: 0 0 20px;
    padding: 10px 15px;
    border-radius: 7px;
    border: 1px solid var(--light-color);
}

form input::placeholder {
    color: var(--light-color);

}
*/
.form-g button {
    background-color: #eb3b5a;
    color: white;
    width: 100%;
    margin: 30px 0;
    border: 0;
    line-height: 42px;
    border-radius: 7px;
    font-weight: 700;
    cursor: pointer;
    transform: all .3s ease-out;
    -webkit-transform: all .3s ease-out;

}

.form-g button:hover {
    background-color: var(--dark-color);
}

.afterform {
    text-align: center;
    margin-top: 20px;
}

.form-g .check {
    position: relative;
    padding-left: 20px;
    font-size: 12px;
    float: left;
    border: solid 1px red
}

.form-g .check input {
    position: absolute;
    left: -10px;
    top: 4px;
    border: solid 1px blue
}

.form-g .forgot {
    float: right;
    font-size: 12px;
}

.form-g label a,
.afterform {
    color: var(--maincolor);
}

.form-g:is(p, label) a:hover,
.afterform a:hover {
    border-bottom: 1px dotted;

}

.content-form::before {
    content: '';
    position: absolute;
    width: 300%;
    height: 200%;
    background-color: white;
    border-radius: 50%;
    transform: translate3d(-27%, 21%, 0);
    -webkit-transform: translate3d(-27%, 21%, 0);
    animation: move 0.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    -webkit-animation: move 0.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes move {
    from {
        opacity: 0;
        transform: translate3d(50%, 60%, 0);
    }

    to {
        opacity: 1;
    }

}

.y-style {
    position: relative;
    transform: translate3d(0, 20%, 0);
    -webkit-transform: translate3d(0, 20%, 0);
    animation: fade-in 0.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    -webkit-animation: fade-in 0.7s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translate3d(0, 20%, 20);
    }

    to {
        opacity: 1;
    }
}

:is(.login-show, .signup-show) .y-style {
    transform: translate3d(0, 0, 0);
}

.social :is(ul, p) {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 20px;
    margin: 2px;
}

.social p::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 90%;
    background-color: var(--light-color);
    top: 0;
    margin: 11px;
}

.social p span {
    background-color: white;
    z-index: 1;
    padding: 0 20px;
    color: var(--light-color);
    font-size: 11px;
}

.social a {
    display: flex;
    font-size: 20px;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    transition: transform .3s;
}

.social a:hover {
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
}

.google {
    color: #db4437;
}

.facebook {
    color: #4267b2;
}

.twiter {
    color: #1da1f2;
}

.login-show .signup,
.signup-show .login {
    display: none;

}

.signup-show .signup,
.login-show .login {
    display: flex;

}

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

    .wrapper>div {
        flex-direction: row;

    }

    .signup .content-heading .y-style {
        height: 100%;
        justify-content: space-between;

    }

    .content-form::before {
        width: 200%;
        transform: translate3d(-18%, -10%, 0);
        -webkit-transform: translate3d(-18%, -10%, 0);

    }

    .welcome {
        text-align: left;
        margin: 5em 0 auto;
    }

    @keyframes move {
        from {
            opacity: 0;
            transform: trah;
        }

        to {
            opacity: 1;
        }

    }

}

.esc_login {
    min-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
}

.el1 {
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el2 {
    width: 100%;
    min-height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.el-card {
    width: 20rem;
    height: 25rem;
    margin: 1rem;
    background-color: var(--color-neutra-40);
    border-radius: 10px;
    position: relative;
    border: solid 1px var(--blue);
    box-shadow: rgb(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
}

.el-card .el-titulo {
    text-align: center;
    width: 100%;
    background: var(--blue);
    color: var(--bg1);
    font-size: 1rem;
    font-weight: 400;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    user-select: none;
    box-shadow: rgb(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
}

.el-card .el-img {
    text-align: center;
    margin: 0.4rem;
    user-select: none;
}

.el-card .el-img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.el-card .el-botao {
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-card .el-botao .btn-login {
    width: 80%;
    border: none;
    border-radius: 10px;
}


/*:::::::FIM LOGIN :::::::::*/


/*::::::::::::::::::::::::::: MAIN ::::::::::::::::::::::::::*/
.epon {
    display: flex;
    flex-direction: column;
    width: 100%;

}

.Main {
    /* min-height: calc(100vh - 50px);

    display: flex;
    flex-direction: column;
    padding: 10px;*/
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;*/


    padding: 5px;



}

.pg-interna {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-template-areas:
        "dir   esq"
        "ba esq";
    gap: 10px;
    margin: 4.4rem 4px;
}

.pg-interna .dir {
    grid-area: dir;
    width: 100%;
    margin-right: 40px;
    gap: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    border-radius: 10px;

}

.pg-interna .dir .epo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

}

.pg-interna .dir .epo-card {
    position: relative;
    user-select: none;
    padding: 0.1rem;
    height: 3rem;
    width: 5rem;
    background: hsla(133, 64%, 29%, 0.521);
    border-radius: 10px;
    cursor: pointer;
}

.pg-interna .dir .epo-card:hover {
    transform: scale(1.1);
    background: hsla(193, 15%, 31%, 0.39);
}

.epo-card a {
    position: absolute;
    height: 100%;
    width: 100%;
    text-decoration: none;
    border-radius: 10px;
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ep-int-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.ep-int-top span{
    color: var(--color-neutra-0);
    font-size: .6rem;
    font-weight: bold;
    min-width: 1.4rem;
    top: .2rem;
    right: 0.8rem;
    padding: 2px;
    background: rgba(0, 128, 0, 0.226);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}

 .epo-card i {
    font-size: 1.2rem;
    color: var(--header-bg);
}


.epo-card-text{
    padding: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
 .epo-card-text .ti {
    color: whitesmoke;
    font-size: 0.6rem;
    font-weight: bold;
}


.pg-interna .dir .epo-card .epo-card-text .to {

    color: var(--red);
}


.pg-interna .esq {
    grid-area: esq;
    min-height: 100vh;
    /*border: solid 1px blue;*/
    display: flex;
    flex-direction: column;

}

.pg-interna .esq .tit-sidebar,
.home-destaques .tit-sidebar {
    display: flex;
    align-items: center;
    background: var(--header-bg);
    color: white;
    border-radius: 3px;
    padding: 1px 13px 2px 13px;
}

.pg-interna .esq .tit-sidebar #destaques,
.home-destaques .tit-sidebar #destaqu {
    font-weight: bold;
    font-size: 1.2rem;
    border-bottom: solid 2px var(--danger);
    padding: 3px 1px;

}

.pg-interna .esq .rec,
.home-destaques .rec {
    margin-top: 30px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.pg-interna .esq .rec:hover,
.home-destaques .rec:hover {
    background: hsla(120, 2%, 25%, 0.116);
}

.pg-interna .esq .rec .epo-rec-not,
.home-destaques .rec .epo-rec-not {


    font-size: 0.7rem;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "img descr"
        "img r-data";
}

.pg-interna .esq .rec .epo-rec-not .img,
.home-destaques .rec .epo-rec-not .img {
    grid-area: img;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    width: 70px;
    height: 70px;
}

.pg-interna .esq .rec .epo-rec-not .img img,
.home-destaques .rec .epo-rec-not .img img {
    grid-area: img;
    width: 100%;
    height: 100%;
    margin-right: 1px;
    border-radius: 5px;
    box-shadow: 0 1px 4px #000;
}

.pg-interna .esq .rec .epo-rec-not .rec-descr,
.home-destaques .rec .epo-rec-not .rec-descr {
    grid-area: descr;
    line-height: 0.9rem;
    font-size: 0.9rem;
}

.pg-interna .esq .rec .epo-rec-not .rec-data,
.home-destaques .rec .epo-rec-not .rec-data {
    grid-area: r-data;
    color: var(--primary1);
    font-size: 0.8rem;
}



.ba {
    grid-area: ba;
    min-height: 100vh;
    margin-right: 30px;
    /*border: solid 1px black;*/
    margin-top: 40px;
}

.main-home {
    position: relative;
    height: calc(100vh - 150px);
    display: flex;
    justify-content: space-between;

}

#cim-ent {
    /*padding: 20px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 70%;
    border: solid 1px yellow;
    display: flex;*/
    min-height: calc(100vh - 150px);
    display: flex;
    flex-direction: column;

    width: 70%;
    margin: 0 20px 0 0;

}

#pub-ent {

    height: 100%;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#not-ent-lat {
    /*position: absolute;
    top: 0;
    right: 0;
    border: solid 1px blue;
    width: 20%;
    height: 100%;*/

    width: 20%;
    min-height: calc(100vh - 150px);
    padding: 10px 10px 20px 10px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
}

#not-ent-lat .teste {
    background: #fff;
    /*position: absolute;
    top: 0;
    right: 0;
    border: solid 1px blue;
    width: 20%;*/
    width: 100%;
    height: 100%;
    border: solid 1px #ccc;


}

/*
#bai-ent {
     margin-top: 15px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    min-height: 30%;
    border: solid 1px blue;
    padding: 10px;
    margin-top: 10px;
    border: solid 1px blue;
    background: green;
    height: 30%;

}*/

/*:::::: últimas publicaºoes */

.epo-pub-ult {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 600px 1fr;
    grid-template-areas: "esq dir";
    gap: 1rem;
}

.epo-pub-ut-le {
    grid-area: "esq";
    display: flex;

}

.epo-pub-ut-le-destaque {
    width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.le-destaque-img {
    width: 100%;
    height: 400px;
}

.le-destaque-img img {
    width: 100%;
    height: 400px;
    border-bottom: 5px solid green;
}

.le-destaque-titlo {
    margin-top: 0.8rem;
}

.le-destaque-publi {
    text-align: justify;
    margin-top: 0.8rem;
    padding: 1rem;
}


.epo-pub-ut-ld {
    margin-left: 1rem;
    padding: 1rem;
    grid-area: "dir";
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Cria duas colunas com largura igual */
    gap: 1.5rem;
    /* Adiciona espaço entre as colunas */
    align-self: flex-start;
}

.epo-card-not {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
}

.card-not-img,
.card-not-img img {
    width: 100%;
}

.card-not-img img {
    height: 10rem;
    margin-bottom: 0.3rem;
    border-bottom: 3px dotted green;
}

.card-not-data,
.card-not-tit,
.card-not-pub {
    width: 100%;
}

.card-not-data {
    margin-bottom: .7rem;
}

.card-not-data span {
    color: var(--dark-color);
    font-size: .8rem;

}

.card-not-tit {
    line-height: 1.1rem;
    margin-bottom: 2rem;
}

.card-not-tit-span {
    font-weight: bold;
    font-size: 1.2rem;
}

.card-not-pub {
    line-height: 1rem;
    margin-bottom: 2rem;
}

.card-not-tit-pub {
    font-size: .97rem;
}

/*------------------------------- Coordenações -----------------*/

/*

.swiper {
    width: 90%;
    height: 400px;
 padding: 15px;
 /*object-fit: cover;
 background-image: url("/public/img/site/ipolub.jpg");
 border: solid 1px red;
}

.mySwiper {
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
}


.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.swiper-slide {
    font-size: 18px;
    color: black;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 60px;
}

.parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

.swiper-slide .title {
    font-size: 41px;
    font-weight: 300;
}

.swiper-slide .subtitle {
    font-size: 21px;
}

.swiper-slide .text {
    font-size: 14px;
    max-width: 400px;
    line-height: 1.3;
}*/

/*_______ IMAGEM COORDENADORES ________*/
.caixa {
    position: relative;
    width: 400px;
    height: 400px;
    background: rgba(04, 03, 05, .5);
    border-radius: 50%;
    overflow: hidden;
}

.caixa::before {
    content: "";
    position: absolute;
    inset: -10px 140px;
    background: linear-gradient(315deg, #fbff00, #00e1ff);
    transition: .5s;
    animation: animar 4s linear infinite;

}

.caixa:hover>.conteudo {
    background: #0907a3;
    cursor: pointer;

}

.caixa:hover>.conteudo span,
.caixa:hover>.conteudo h2,
.caixa:hover>.conteudo a {
    transform: translateY(0);
    opacity: 1;


}

.caixa:hover::before {
    inset: -20px 0;
}

.caixa::after {
    content: '';
    position: absolute;
    inset: 6px;
    background: #4b4b4b;
    border-radius: 50%;
    z-index: 1;
}

.conteudo {
    position: absolute;
    inset: 30px;
    border: 6px solid #000;
    z-index: 2;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    user-select: none;
}

.conteudo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
    pointer-events: none;

}

.conteudo h2 {
    font-size: 1.5em;
    text-align: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    transform: translateY(250px);
    transition: .5s;

}

.conteudo h2 span {
    font-weight: 300;
    font-size: .75em;
    color: tomato;
}

.conteudo>span {
    font-size: 2.5em;
    transform: translateY(250px);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.conteudo a {
    margin-top: 10px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    color: #6b6b6b;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    transform: translateY(250px);
    transition: 0.5s;
}

.conteudo a:hover {
    letter-spacing: .2em;
    color: #8a0404;
}

.caixa:hover .conteudo img {
    opacity: 0;
}

@keyframes animar {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }

}

/*____________ Fim imagem Coordenadores ____________________________*/
/*------------------------------- FIM Coordenações -----------------*/

.not-home {
    min-height: 100vh;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.content-home-2 {
    min-height: 100vh;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tit-home-sep {
    display: flex;
    align-items: center;
}

.tit-home-sep #text-tit-sep {
    color: var(--primary2);
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: solid 2px red;
}

.tit-home-sep #text-tit-sep1 {
    color: var(--primary2);
    font-size: 1.3rem;
    font-weight: bold;
    border-bottom: solid 2px red;
}

.cdp-ft {
    margin-top: 2rem;
}

.text-tit-sep2 {
    color: var(--primary2);
    font-size: 1rem;
    font-weight: bold;
}

.proj-dest {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 2rem 0 1rem 0;
}

.proj-dest #img-dest-proj {
    position: relative;
    width: 100%;
    height: 400px;
    margin-right: 1rem;
    /*border: solid 2px red;*/
}

.proj-dest #img-dest-proj img {
    height: 100%;
    width: 100%;
}


.proj-dest #proj-dest-tit {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #1a19194f;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proj-dest #tit-med {
    color: white;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
}

.proj-dest #cont-dest {

    width: 40%;
    margin: 0.5rem;
    border-bottom: solid 2px yellow;
}


.proj-dest #cont-dest-proj {
    width: 100%;
}


#cont-dest-proj-ft {
    width: 100%;
    min-height: 100vh;
    display: flex;
}

#cont-dest-proj-ft .sep {
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

#cont-dest-proj-ft .sep .text-tit-cont2 {
    margin-left: 2rem;
}

#cont-dest-proj-ft-le {
    padding: 1rem;
    width: 40%;

}

#cont-dest-proj-ft-ld {
    padding: 1rem;
    width: 60%;
}

#descrp {
    text-align: justify;
}

/*Opiniões*/
.opinioes {
    margin-top: 2rem;
}

.tit-opinioes {
    display: flex;
    margin-bottom: 1rem;
}

.tit-opinioes #destaques {
    color: var(--primary2);
    font-size: 1.4rem;
    font-weight: bold;
    border-bottom: solid 2px red;
}

.op-g {
    background: #eff1f1;
}

.div-op {
    min-height: 30vh;
    /*  border: solid 1px red;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.int-div-op {
    min-height: 10vh;

    display: flex;
    gap: .3rem;
    margin: 1rem;
}

.id-div-op {
    width: 5%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: solid 1px green;*/

}

.id-div-op .img-div-op {
    width: 100%;
    height: 70%;
    border: solid 1px var(--gray);
    border-radius: 10px;
}

.img-div-op img {
    width: 100%;
    height: 100%;
}

.nom-div-op {
    height: 30%;
}

.nom-div-op #s-nom-div-op {
    font-weight: bold;
    font-size: .7rem;
}

.desc-div-op {
    border-radius: 1rem;
    padding: 0 1rem;
    min-width: 50%;

}

.desc-div-op #s-desc-div-op {
    text-align: justify;
}

.lik-div-op {
    margin-top: 1rem;
    display: flex;
    padding-right: 1rem;
}

.l-div-op {
    margin-right: 1rem;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    padding: .4rem;

}

.l-div-op:hover {
    background: #b1b1bd27;
}


/*______________FIM DO MAIN____________________________*/




/*::::::::::  CONTACTOS ::::::::::::*/
.contactos {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cont-int-esqu {
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 1rem;
    height: 100%;
}

.i-img {
    background: none;
}

.i-img i {
    color: #023f07;

}

.cont-int-dir {
    padding-left: 20px;
    width: calc(100vw - 500px);
    height: calc(100vh - 200px);
}

.cont-int-dir .c-map {
    width: 100%;
    height: 100%;
    border: none;
}

/*______________FIM DO CONTACTOS____________________________*/

/*::::::::::  APOIO ::::::::::::*/
.apoio h1 {
    color: blue;
    border-bottom: solid 1px red;
    display: inline-block;
    margin: 10px 0;
}

.apoio p {
    margin-top: 15px;
    text-align: justify;
}

.apoio .ap-card {
    display: flex;
    margin: 10px;
    padding: 10px;
    border: solid 1px #ccc;
    border-radius: 10px;
    gap: 3rem;
}

.ap-card .ap-card-dir span {
    font-weight: bold;
}

.a-cima {
    display: flex;
    gap: 3rem;
}

.a-cima .a-esq,
.a-dir {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 5px;
    margin: 5px;
}

.a-esq {
    margin-right: 3rem;
}

.a-dir {
    margin-left: 5rem;
}
.a-dir .form-doacao {
    margin: 5rem;
    box-shadow: 0 .1rem .4rem #0002;
    background: rgba(24, 2, 85, 0.041);
    padding: 1rem;
}
.fd-input-group{
    display: flex;
    flex-direction: column;
    padding: .3rem;
}
.fd-input-group input, .fd-input-group textarea {
    outline: none;
    border: none;
    border-radius: 3px;
    border: solid 1px rgba(141, 141, 141, 0.192);
    padding: 2px;
    font-size: .9rem;
}
.fd-input-group input:hover, .fd-input-group textarea:hover,
.fd-input-group input:active, .fd-input-group textarea:active {
   
    border: solid 1px blue;
   transition: .7s;
}

.fd-btn-input-group{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1rem;
}
.fd-btn-input-group label{
  font-size: .9rem;
}
.fd-btn-input-group button{
   border: none;
   padding: .4rem;
   border-radius: 4px;
   background-color: var(--primary2);
   color: var(--bg1);
   cursor: pointer;
}

.fd-btn-input-group button:hover{
   
    background-color: var(--secundary1);

 }
/*______________FIM DO APOIO____________________________*/

/*::::::::::  SOBRE NÓS ::::::::::::*/
.sobre-top {
    position: relative;
    height: 10rem;
    background-color: #00910c4f;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 100px;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}

.s-top-fundo {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

.s-top-fundo span {
    position: absolute;
    top: 20%;
    margin: 0 auto;
    font-size: 2rem;
    font-weight: bold;
}

.s-top-img {
    position: absolute;
    margin: 0 auto;

    width: 20%;
    height: 50%;

    top: 70%;
    background-color: #e4eee5ef;
    box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
    border-bottom: solid 1px red;
    border-radius: 10px;
    background-size: cover;

}

.s-top-img img {
    width: 100%;
    height: 100%;
}

.sobre h1 {
    color: blue;
    border-bottom: solid 1px red;
    display: inline-block;
    margin: 10px 0;
}

.qs-sub-group {
    margin-top: 1rem;
}

.qs-sub-group #div-mudanca {
    margin-top: 2rem;
    background-color: var(--blue);
    color: var(--bg1);
    border-radius: 10px;
    padding: .5rem;
}

.qs-lista {
    padding-left: 3rem;
}

.sobre p {
    margin-top: 15px;
    text-align: justify;
}

.sobre .ap-card {
    display: flex;
    margin: 10px;
    padding: 10px;
    border: solid 1px #ccc;
    border-radius: 10px;
}

.sobre .ap-card .ap-card-dir span {
    font-weight: bold;
}

.sobre .a-cima {
    display: flex;
}

.sobre .a-cima .a-esq,
.a-dir {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    padding: 5px;
    margin: 5px;
}

.sobre .a-dir {
    margin-left: 55px;
}

.sobre ul {
    list-style-position: outside;
    list-style-type: circle;
}

/*______________FIM DO SOBRE NÓS____________________________*/

/*::::::::::  PROJECTOS ::::::::::::*/
#projectos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 100px;
}

.p-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    /*border: solid 1px red;*/
    padding: 10px;
    gap: 3rem;
    width: 100%;
}

.p-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.p-card img {
    width: 100%;
}

.card {
    position: relative;
    height: 200px;
    width: 250px;
    z-index: 0;
}

.card .face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
}

.card .front {
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 5px 10px #000;
}

.front img {
    height: 100%;
    width: 100%;
    position: absolute;
}

.front h3 {
    position: absolute;
    width: 100%;
    bottom: -10px;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    text-align: center;
    padding: 5px;
    font-size: 1.2rem;
}

.card .back {
    transform: perspective(600px) rotateY(180deg);
    background: rgba(3, 35, 54);
    padding: 2px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow: 0 5px 10px #000;
}

.back .link {
    border-top: solid 1px #f3f3f3;
    height: 50px;
    line-height: 50px;
}

.back .link a {
    color: #f3f3f3;
}

.back .link a:hover {
    color: #039116;
    text-decoration: solid;
}

.back h3 {
    font-size: 15px;
    margin-top: 10px;
    /*letter-spacing: 2px;*/
    font-size: 1.2rem;
    color: yellow;
}

.back p {
    text-align: justify;
}

.card:hover .front {
    transform: perspective(600px) rotateY(180deg);
}

.card:hover .back {
    transform: perspective(600px) rotateY(360deg);
}

/*______________FIM DO PROJECTOS____________________________*/
/*::::::::::  RODAPÉ ::::::::::::*/
footer {
    width: 100%;
    color: var(--color-neutra-40);
}

#footer-content {
    background: #304c77;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1rem;
}

.footer-content h3 {
    margin-bottom: 0.7rem;
    color: var(--color-neutra-40);
}

#footer-social-media {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

.footer-link {
    text-decoration: none;
}

#footer-social-media .footer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    color: var(--color-neutra-40);
    border-radius: 50%;

    transition: .5s;
}

#footer-social-media .footer-link:hover {
    opacity: 0.8;
}

#footer-social-media .footer-link i {
    font-size: 1.5rem;
}

#instagram {
    background: linear-gradient(#7f37c9, #ff2992, #ff9807);
}

#facebook {
    background: #4267b3;
}

#whatsapp {
    background: #25d366;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
}

.footer-list .f-parc {
    display: flex;
    align-items: center;
    padding: 2px;
}

.footer-list .f-parc img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
    border-radius: 3px;
}

.footer-list .footer-link,
#footer-subscribe p {
    color: var(--color-neutra-30);
    transition: .5s;
}

.footer-list .footer-link:hover {
    color: #7f37c9;
}

#footer-subscribe {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 2px;
}

.epo-form {
    padding: 2px;
    display: flex;
    flex-direction: column;
}

#input-group {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 4px;
    padding: 2px;
}

#input-group input,
#input-group textarea {
    border-radius: 4px;
    background: var(--color-neutra-40);
    color: var(--color-neutra-0);
    padding: 3px;
    border: none;

}

#input-group textarea {
    text-align: justify;
}

#input-group button {
    background: var(--maincolor);
    border: none;
    color: var(--color-neutra-40);
    padding: 0 1.25rem;
    font-size: 1.125rem;
    height: 100%;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
}

#input-group button:hover {
    opacity: 0.8;
    background: var(--green);

}

#footer-copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1b365f;
    color: var(--color-neutra-40);
    font-size: 0.9rem;
    padding: 1.5rem;
    font-weight: 400;
    height: 2rem;
}

#footer-copyright span a {
    color: var(--color-neutra-40);
}

#footer-copyright span a:hover {
    color: var(--hover-color);
}

@media screen and (max-width: 768px) {
    #footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    #footer-social-media {
        gap: 1rem;
    }

    #footer-social-media .footer-link {
        height: 2rem;
        width: 2rem;
        font-size: 1rem;
    }

    #footer-social-media .footer-link i {
        font-size: 1rem;
    }
}

@media screen and (max-width: 426px) {
    #footer-content {
        grid-template-columns: repeat(1, 1fr);
        padding: 3rem 2rem;
    }
}


/*____________________ FIM DO RODAPÉ ____________________*/

/*::::Funcionario */

.funci {
    background: var(--bg2);
}

/*____________________ Fim funcionário _____________________________*/

.swiper {
    width: 100%;
    height: calc(100vh - 80px);
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    transition: all 1s;
}

.swiper-slide img {
    position: absolute;
    width: 100%;
    height: 100%;

}

.div-details {
    position: absolute;
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;


}

.init-text {
    width: 100%;
    height: 100%;
    padding: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(51, 49, 49);
    /*-webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);*/
    opacity: 0.6;
    color: white;
}

.div-init-tit,
.div-init-descri {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation-duration: 2s;

}

.caixa {
    opacity: 1;
}



/*teste entrada*/


/* Lado direito*/
.home-img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: solid 1px red;*/

}


.home-img .slide,
.home-img .slide .containerproje,
.slide-container {
    height: 100%;
    width: 100%;

}

.containerproje {
    position: relative;

    /* border: solid 1px blue;*/

}

.slide-container {
    /*border: solid 1px red;*/
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.slide-container #tit {
    width: 100%;
    height: 10%;
    text-align: center;
    /*border: solid 1px black;*/
    margin-bottom: 0.2rem;
    display: none;
}

.slide-container #tit h3 {
    font-size: 1.5rem;
    color: var(--light);
    font-weight: bold;
}

.slide-container .cont-slade {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /*border: solid 1px black;*/
}

.cont-slade .contentproje {
    position: relative;
    /*display: flex;
    align-items: center;
    justify-content: space-between;*/
    width: 100%;
    height: 100%;
    /*margin-bottom: 0.3rem;*/

}


.cont-slade .div-btn-proj {
    width: 100%;
    height: 15%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

.contentproje .p {
    position: absolute;
    bottom: 0;
    padding: .1rem;
    width: 100%;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    border-radius: 0 0 10px 10px;
    /* border: solid 1px red;
    animation: slideContent .3s linear .3s backwards;*/
}

.contentproje .p span {

    animation: slideContent .3s linear .3s backwards;
}

.contentproje .p .saibamais {
    padding: 1rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    animation: slideContent .3s linear .3s backwards;

}




.contentproje .img-d {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /*border: solid 1px red;*/
    animation: slideImg .5s linear .5s backwards;
}


.cont-slade .img-d .imagem {
    width: 100%;
    height: 100%;
    /* border: solid 1px blue;*/
}

.cont-slade .img-d .imagem img {
    /* min-width: 200px;
    min-height: 200px;*/
    width: 100%;
    height: 100%;
    border-radius: 10px;
    image-rendering: optimizeQuality;

}

@keyframes slideContent {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

}

@keyframes slideImg {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
}

/*
.div-btn-proj .btnproje {
    margin-top: 10px;
    display: inline-block;
    background: var(--primary2);
    font-size: 17px;
    color: #ffffff;
    padding: 0.1rem 1rem;
    border-radius: 5px;
    text-decoration: none;
}

.div-btn-proj .btnproje:hover {
    background: #a355d7;
}
    /* border: solid 2px #9832c3;*/
.btnproje {
    padding: 4px;
    /* background: hsla(201, 14%, 64%, 0.167);*/

    border-radius: 10px;
}

.btnproje:hover {
    color: red;
}

.containerproje .slide-container {
    position: relative;
    display: none;
    user-select: none;
    /* background: #0000003b;*/
    border-radius: 10px;
    overflow: hidden;
}

.containerproje .slide-container.active {
    display: block;
}

.containerproje .slide-container {
    animation: fundo 6s ease both;

    /*background: url('./b.png') no-repeat;
    background-size: contain;*/

}

/*
.containerproje .slide-container:nth-child(2) {
     background: #a355d7;
    background-size: cover;
    animation: fundo 5s ease both;
}

.containerproje .slide-container:nth-child(3) {
    /* background: cadetblue;
    background-size: cover;
    animation: fundo 5s ease both;
}*/

@keyframes fundo {
    0% {
        transform: scale(1), translate(0, 0);
        transform-origin: 16% 84%;
    }

    100% {
        transform: scale(1.25), translate(-20px, 15px);
        transform-origin: left bottom
    }
}

#np {
    position: absolute;
    top: 50%;
    width: 100%;
    user-select: none;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

#prev,
#next {
    position: relative;

    color: #ffff;
    background: var(--blue);
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 1rem;
    text-align: center;
    cursor: pointer;
    font-weight: bolder;
    border-radius: 50%;
    opacity: .6;
}

#prev:hover,
#next:hover {
    background: green;
    transform: scale(1.1);
}

/*::::::::::::::::::::::: Modal :::::::::::::::::::::::::::::::::::*/
.modal-header {
    display: flex;
    align-items: center;
    height: 30px;
}



.modal {
    display: none;
    /* Por padrão, oculte o modal */
    position: fixed;
    /* Posicionamento fixo para permanecer no centro */
    z-index: 300;
    /* Z-index alto para garantir que esteja acima de outros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Adiciona rolagem se necessário */
    background-color: rgba(0, 0, 0, 0.4);
    /* Fundo semi-transparente */
    user-select: none;
}

.mod-interna {
    position: relative;
    width: 30%;
    background: black;
    margin: 0 auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

.mod-tit {
    position: absolute;
    top: 0;
    width: 100%;
    height: 2rem;
    background: var(--blue-dark);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: var(--bg1);
    display: flex;
    align-items: center;
    padding: 0.3rem;
}

.modal-content {
    position: absolute;
    top: 2rem;
    width: 100%;
    background-color: #fefefe;
    padding: 20px;
    border-radius: 0;


}

/* Fechar o botão do modal */
.close {
    position: absolute;
    color: #aaa;
    top: 1px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;
}

/* Animação ao abrir o modal */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}


/* DIV SMS*/

.div-sms {
    display: none;
    background: rgba(1, 138, 1, 0.596);
    border-radius: 10px;
    color: white;
    padding: 5px;
    text-align: center;
    margin: 5px 0 10px 0;
    transition: .5s;
}

.div-sms #sms {
    font-size: 1rem;
    font-weight: bold;
    color: white;
}

.div-sms.vi {
    display: block;
    
}