/*  Theme Name: Unimar EAD - Jogos Humanitários
Theme URI: https://ead.unimar.br
Author: Mustache
Author URI: https://mustache.com.br
Description: aHR0cHM6Ly9vcGVuLnNwb3RpZnkuY29tL3RyYWNrLzU5MDJXNHVIV3podE9mZjFVSzd0aGU/c2k9M2RlYzgyMTQyMzNmNDE5Mw==;
*/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset, figure {margin: 0; padding: 0;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } img {max-width: 100%; height: auto; } @media screen {img { width: auto;} } :root{--font: 'Montserrat', sans-serif; --azul1: #003264; --azul2: #0072BC; --azul3: #4093db; --cinza1:#53595f; --cinza2: #9e9e9e; --cinza3: #eaeaea;} *{font-family: 'Montserrat', sans-serif;} body {color: #000; background: #fff;} a {color: var(--azul2); text-decoration: none; outline: none; } a:hover {text-decoration: none;} b, strong{font-weight: 700;} p {margin: 5px 0; padding: 0;} button:focus {outline:0;} html{scroll-behavior: smooth; } .grecaptcha-badge{display:none!important}

/*Menu*/
#menu{
    width: 100%; 
    padding: 20px 10%; 
    display: flex; 
    align-items: center; 
    flex-direction: row; 
    justify-content: space-between; 
    position: sticky; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 99999; 
    background: var(--azul2);
    & .infos{
        display: flex;
        align-items: center;
        align-content: center;
        & .logo img{
            height: 30px; 
            width: auto; 
            margin-bottom: 0px;
        }
        & .nome{
            color: #fff;
            display: block;
            font-weight: 500;
            display: flex;
            line-height: 1;
            font-size: 1.2rem;
            align-items: center;
            &:before{
                content: '';
                display: block;
                width: 2px;
                height: 30px;
                background: #00d9ff;
                margin: 0 25px;
            }
        }
    }
    & .back{
        & a{
            text-decoration: none;
            cursor: pointer;
            & button{
                background: transparent;
                border: solid 1px #00d9ff;
                color: #fff;
                padding: 10px 30px;
                border-radius: 40px;
                transition: .3s;
                cursor: pointer;
                & i{
                    color: #00d9ff;
                    transition: .3s;
                    margin-right: 5px;
                }
                &:hover{
                    background: #003264;
                    border-color: #003264;
                    color: #fff;
                    & i{
                        color: var(--azul3);
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}

.topo{
    background: url(images/topo.png) center right no-repeat #000;
    background-size: auto 100%;
    padding: 260px 10%;
    & h1{
        color: #fff;
        width: 32%;
        margin: 0;
        line-height: 1.3;
        font-weight: 300;
        & .high{
           color: #1B96FF;
           font-weight: 700; 
        }
    }
    & button{
        background: #1B96FF;
        border: 0;
        border-radius: 50px;
        color: #fff;
        margin-top: 30px;
        padding: 10px 30px;
        transition: .3s;
        cursor: pointer;
        &:hover{
            background: #005baa;
        }
    }

}

.sobre{
    background: #1B96FF;
    background: linear-gradient(90deg, rgba(27, 150, 255, 1) 0%, rgba(81, 175, 255, 1) 100%);
    padding: 130px 25%;
    & p{
        color: #000;
        font-size: 1.25rem;
        line-height: 1.5;
        margin: 15px 0;
        text-align: center;
    }
}

.objetivo{
    background: url(images/objetivo.jpg) center right no-repeat #000;
    background-size: cover;
    padding: 200px 60% 200px 15%;
    & h1{
        color: #1B96FF;
        margin: 0;
        line-height: 1.3;
        font-size: 2rem;
        font-weight: 700;
    }
    & p{
        color: #fff;
        font-size: 1rem;
        line-height: 1.5;
        margin: 10px 0 20px;
    }
    & button{
        background: #1B96FF;
        border: 0;
        border-radius: 50px;
        color: #fff;
        padding: 10px 30px;
        transition: .3s;
        cursor: pointer;
        &:hover{
            background: #005baa;
        }
    }
}

.pq{
    background: #1B96FF;
    background: linear-gradient(90deg, rgba(27, 150, 255, 1) 0%, rgba(81, 175, 255, 1) 100%);
    padding: 100px 20%;
    & h2{
        color: #000;
        margin: 0 auto 60px;
        line-height: 1.3;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
    }
    & .topico{
        background: #fff;
        padding: 40px;
        border-radius: 15px;
        width: 100%;
        height: 340px;
        text-align: center;
        color: #000;
        & .icone{
            height: 80px;
            margin: 0 auto 15px;
            & img{
                height: 80px;
                width: max-content;
                display: block;
                margin: 0 auto
            }
        }
        & h5{
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.3;
            margin: 0 auto 5px;
        }
        & p{
            font-size: .95rem;
            line-height: 1.5;
            margin: 0;
        }
    }
    & .sub{
        & p{
        color: #000;
        font-size: 1.125rem;
        line-height: 1.5;
        margin: 60px 0 0;
        text-align: center;
        }
    }
}

.destaques{
    background: #090D39;
    padding: 100px 20%;
    & h2{
        color: #1B96FF;
        margin: 0 auto 60px;
        line-height: 1.3;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
    }
    & .topico{
        background: #fff;
        padding: 40px;
        border-radius: 15px;
        width: 100%;
        height: 240px;
        text-align: center;
        color: #000;
        & .icone{
            height: 80px;
            margin: 0 auto 15px;
            & img{
                height: 80px;
                width: max-content;
                display: block;
                margin: 0 auto
            }
        }
        & h5{
            font-size: 1.1rem;
            font-weight: 700;
            line-height: 1.3;
            margin: 0 auto 5px;
        }
        & p{
            font-size: .95rem;
            line-height: 1.5;
            margin: 0;
            & span.block{
                display: block;
            }
        }
    }
    & .sub{
        & p{
        color: #fff;
        font-size: 1.125rem;
        line-height: 1.5;
        margin: 60px auto 0;
        width: 60%;
        text-align: center;
        & strong{
            color: #1B96FF;
        }
        }
    }
    & button{
        background: #1B96FF;
        border: 0;
        margin: 20px auto 0;
        display: block;
        border-radius: 50px;
        color: #fff;
        padding: 10px 30px;
        transition: .3s;
        cursor: pointer;
        &:hover{
            background: #005baa;
        }
    }
}

.pesquisadores{
    background: #090D39;
    border-top: solid 5px #1B96FF;
    padding: 100px 20%;
    & h2{
        color: #1B96FF;
        margin: 0 auto 60px;
        line-height: 1.3;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
    }
    & .profissionais{
        display: flex;
        gap: 10px;
        flex-direction: column;
        & .pesquisador{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border-bottom: solid 1px #fff;
            padding: 30px 0;
            cursor: default;
            transition: .3s;
            &:last-of-type{
                border-bottom: 0;
            }
            &:hover{
                border-color: #1B96FF;
            }
            & .links{
                display: flex;
                gap: 10px;
                & .link{
                    opacity: 1;
                    transition: opacity .3s ease;
                    &:hover{
                        opacity: .9;
                    }
                }
            }
            & .nome{
                & h5{
                    margin: 0;
                    color: #1B96FF;
                    font-weight: 600;
                    font-size: 1.5rem;
                    line-height: 1.1;
                    transition: .3s;
                }
            }
        }
    }
}

/*Nao encontrada*/
.notfound {
    padding: 150px 10%; 
    & h2{
        font-size: 2rem;
        color: var(--azul2);
        font-weight: 700;
        margin: 0 0 5px;
    }
    & p{
        width: 85%;
        line-height: 1.5; 
        font-size: 1.1rem;
    }
}

/*Página */
.pagina {margin: 90px auto; font-family: var(--font); font-size: 100%; line-height: 180%; font-weight: 400; padding: 0px; }
.pagina p{word-break: break-word;}
.pagina h2{text-transform: none; font-size: 190%; text-align: left; line-height: 146%; padding: 0px; margin: 0px 0px 10px;}
.pagina strong, .pagina h1, .pagina h2, .pagina h3, .pagina h4, .pagina h5{font-weight: 800; color: var(--azul2); transition: .3s; margin: 10px 0px;}
.pagina a {color: var(--azul2);}
.pagina a:hover {color: var(--azul1); text-decoration: none;}
.pagina ul{list-style: none;}
.pagina ul li::before {font-weight: 900; font-family: "Font Awesome 6 Free";  content: "\f111"; color: var(--azul2); font-size: 30%; line-height: 30%; margin-right: 5px; display: inline-block; width: 1em; margin-left: 0em;}
.pagina ul li{padding: 5px 0px }
.pagina .card-body{padding: 1.25rem 5px;}
.pagina .wp-block-file .wp-block-file__button {background: #005baa;border-radius: 2em;color: #fff;font-size: 90%; padding: 10px 30px; transition: .3s; opacity: 1;}
.pagina .wp-block-file .wp-block-file__button:hover{background: var(--azul1); opacity: 1;}
.pagina .table{margin-bottom: 20px;}
.pagina .table thead th {vertical-align: middle; color: var(--azul2); text-transform: uppercase; font-weight: 600; line-height: 120%;}
.pagina .table thead th b {font-weight: 500; line-height: 80%; font-size: 90%; display: flex; margin-top: 5px;}
.pagina .table th, .table td {padding: 0.75rem 0.75rem 0.75rem 0; text-align: left;}
.pagina .card-header, .pagina .card-header .btn-link {cursor: pointer; background-color: var(--azul2); color: #fff; cursor: pointer; text-decoration: none; padding: 1.25rem 1.25rem; transition: .3s; text-align: left;}
.pagina .card-header:hover {background-color: var(--azul1);}
.pagina .card-header i{color: var(--azul3); margin-right: 10px;}

/*Rodape*/
.footer {
    background: var(--azul1); 
    width: 100%; 
    min-height: 380px; 
    padding-top: 40px; 
    font-family: 'Montserrat', sans-serif; 
    & .content { 
        width: 80%; 
        margin: 0 auto; 
        padding:0px;
        & .rodapemenu {
            width: max-content; 
            padding: 20px 0px; 
            visibility: visible; 
            & .menu {
                color: #FFF; 
                font-size: .8rem;
                font-weight: 300; 
                width: 100%; 
                margin: 0 auto;
                & .titulonavr {
                    font-size: 1rem; 
                    font-weight: 700; 
                    text-transform: uppercase; 
                    margin-bottom: 5px; 
                    padding-left: 0px; 
                    &:after {
                        border-bottom: 3px solid #00d9ff; 
                        content: ""; 
                        display: block; 
                        margin: 10px 0px 0px; 
                        width: 25px;
                    } 
                }
                & ul{
                    display: block; 
                    & li{
                        display: block; 
                        color: #fff; 
                        font-weight: 300; 
                        font-size: .9rem; 
                        padding: 5px 0px; 
                        & a{
                            color: #fff; 
                            text-decoration: none; 
                            transition: .3s; padding: 
                            5px 0px; 
                            &:hover{ 
                                text-decoration: none; 
                                color: #00d9ff;
                            }
                        }
                    } 
                }
            }
        }
        .menusocial {
            margin-top: 20px;
            & img{
                width: 190px; 
                display: block; 
                margin: 0 0 20px 0; 
            } 
            & p {
                text-align: left; 
                color: #fff; 
                font-size: .9rem; 
                margin: 0;
            }
            & a{
                color: #fff;
            }
            & .telefone {
                margin: 10px 0px 20px; 
                width: 100%; 
                line-height: 1; 
                font-size: 1.2rem; 
                color: #fff;
                & i{
                    color: #00d9ff
                }
            }
            & .redes{
                width: max-content; 
                margin-top: 10px;
                display: flex;
                flex-direction: row;
                gap: 5px;
                & .item{
                    background: #fff; 
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: var(--azul1); 
                    border-radius: 50%;  
                    width: 35px; 
                    height: 35px; 
                    font-size: 1rem; 
                    transition: .3s; 
                    &:hover{
                        background: #00d9ff; 
                       color: var(--azul1);
                    }
                }
            }
        }
    }
    & .copyr{
        width: 100%; 
        margin: 0px; 
        background: var(--azul1); 
        color: #fff;
        height: auto; 
        padding: 0px 0px 30px 0px;
        & .rights{
            color: #fff; 
            padding: 0; 
            font-size: .9rem; 
            text-align: center;
        } 
        & .dev{
            text-align: right; 
            padding: 0; 
            font-size: .85rem; 
            font-weight: 300;
            & img{
                width: 30px; 
                margin-top: -2px; 
            } 
        } 
    } 
}

@media screen and (max-width: 1440px) {
    #menu {
        padding: 20px 5%;
    }
    .topo {
        background: url(images/topo.png) center  no-repeat #000;
        background-size: cover;
        padding: 180px 5%;
        & h1 {
            width: 35%;
            font-size: 2.3rem;
        }
        & button{
            margin-top: 20px;
        }
    }
    .sobre {
        padding: 100px 15%;
    }
    .objetivo {
        background-size: auto 100%;
        padding: 130px 60% 130px 5%;
    }
    .pq {
        padding: 80px 8%;
    }
    .destaques {
        padding: 80px 10%;
    }
    .pesquisadores {
        padding: 80px 10%;
    }
    .footer .content {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    #menu{
        & .infos {
            & .logo img {
                height: 30px;
            }
            & .nome {
                font-size: 1rem;
                &:before {
                height: 30px;
                }
            }
        }
    }
    .topo{
        background: url(images/topo-mobile.jpg) center bottom no-repeat #000;
        background-size: 100%;
        padding: 60px 60px 50vh;
        & h1{
            width: 100%;
        }
    }
    .sobre {
        padding: 60px;
        & p{
            font-size: 1rem;
        }
    }
    .objetivo{
        background: url(images/objetivo-mobile.jpg) center bottom no-repeat #00052d;
        background-size: 100%;
        padding: 60px 60px 50vh;
        & h1{
            width: 100%;
            font-size: 1.8rem;
        }
    }
    .pq {
        padding: 60px;
        & h2{
            font-size: 1.8rem;
            margin-bottom: 30px;
        }
        & .topico{
            height: auto;
            margin: 10px 0;
            & .icone {
                height: 60px;
                & img {
                    height: 60px;
                }
            }
        }
        & .sub {
            & p {
                margin-top: 30px;
            }
        }
    }
    .destaques{
        padding: 60px;
        & h2{
            font-size: 1.8rem;
            margin-bottom: 30px;
        }
        & .topico{
            height: auto;
            margin: 10px 0;
            & .icone {
                height: 60px;
                & img {
                    height: 60px;
                }
            }
        }
        & .sub {
            & p {
                width: 100%;
                margin-top: 30px;
            }
        }
    }
    .pesquisadores{
        padding: 60px;
        & h2{
            font-size: 1.8rem;
            margin-bottom: 30px;
        }
        & .profissionais {
            & .pesquisador {
                padding: 20px 0;
                & .nome {
                    max-width: 70%;
                    & h5{
                        font-size: 1.2rem;
                        line-height: 1.2;
                    }
                }
                & .links {
                    max-width: 30%;
                }
            }
        }
    }
}


@media screen and (max-width: 480px) {
    #menu {
        padding: 20px 30px;
        height: auto;
        & .infos {
            & .logo img {
                height: auto;
                width: 200px;
            }
            & .nome {
                line-height: 1.2;
                &:before {
                    margin: 0 15px;
                }
            }
        }
        & .back {
            & a {
                & button {
                    display: none;
                }
            }
        }
    }
    .topo {
        padding: 30px 30px 30vh;
        & h1 {
            font-size: 1.8rem;
        }
    }
    .sobre {
        padding: 40px 35px;
    }
    .objetivo {
        padding: 40px 30px 35vh;
        & h1{
            font-size: 1.5rem;
            text-align: left;
        }
    }
    .pq {
        padding: 40px 30px;
        & h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: left;
        }
        & .topico {
            padding: 30px;
        }
        & .sub {
            & p {
                margin-top: 20px;
                font-size: 1rem;
            }
        }
    }
    .destaques {
        padding: 40px 30px;
        & h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            text-align: left;
        }
        & .topico {
            padding: 30px;
        }
        & .sub {
            & p {
                margin-top: 20px;
                font-size: 1rem;
            }
        }
        & button {
            width: 100%;
            padding: 10px;
        }
    }
    .pesquisadores {
        padding: 40px 30px;
        & h2 {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #fff;
            text-align: left;
        }
        & .profissionais {
            & .pesquisador{
                flex-direction: column!important;
                align-items: flex-start;
                & .nome {
                    max-width: 100%;
                    width: 100%;
                    & h5{
                    font-size: 1.1rem;
                    line-height: 1.3;
                    }
                }
                & .links {
                    max-width: 45%;
                    margin-top: 10px;
                }
            }
        }

    }
    .footer {
        padding: 20px 0 0 0;
        .content {
            padding: 0 20px;
        }
        .copyr {
            & .rights {
                margin-top: 20px;
                text-align: left;
            }
            & .dev {
                text-align: left;
                margin-top: 20px;
            }
        }
    }

}