@font-face {
    font-family: "Nunito";
    src: url("../fonts/Nunito-VariableFont_wght.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-orange-light: #FBBB5A;
    --color-orange-blod: #F7941E;
    --color-gray: #EFEFEF;
    --color-black: #000000;
    --font-base: "Nunito", sans-serif;
}


/* {GROUP} => ESTILIZAÇÕES GERAIS */
/* ======================================================================================= */

* {
    font-family: var(--font-base);
}



/* {GROUP} => PÁGINA INICIAL */
/* ======================================================================================== */
.main-page .section-pub {
    width: 100%;
    height: 300px;
    background-color: #F2F6F9;
}

.main-page .section-pub h3 {
    letter-spacing: 70px;
    opacity: 0.5;
    text-align: center;
    position: relative;
    top: 40%;
}

.main-page .section-menu {
    margin-top: 15px;
}

.main-page .section-menu .left h5 {
    font-size: 0.8rem;
}

.main-page .section-menu .left .date {
    font-weight: bold;
}

.main-page .section-menu .left .edition:hover {
    text-decoration: underline;
    color: var(--color-orange-light);
    cursor: pointer;
}

.main-page .section-menu .right {
    display: flex;
    justify-content: flex-end;
}

.main-page .section-menu .right a {
    padding: 5px;
    margin-left: 10px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    width: 80px;
    text-align: center;
}

.main-page .section-menu .right .assign {
    background-color: var(--color-orange-blod);
    border-radius: 3px;
    color: #fff;
}

.main-page .section-menu .right .assign:hover {
    background-color: var(--color-orange-light)
}


.main-page .section-menu .right .sign-in {
    border-radius: 5px;
    color: #000;
}

.main-page .section-menu .right .sign-in:hover {
    background-color: #000;
    color: #fff;
}

.main-page .section-menu .menu {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    border-top: solid 1px var(--color-orange-light);
    background-color: var(--color-gray);
}

.main-page .section-menu .menu li {
    list-style: none;
    margin-left: 20px;
    padding: 3px;
}

.main-page .section-menu .menu li a {
    font-size: 14px;
    text-decoration: none;
    color: var(--color-black);
    padding: 10px;
}

.main-page .section-menu .menu li a:hover {
    background-color: var(--color-orange-blod);
    font-weight: bold;
    color: #fff;
}

.main-page .section-news1 {
    margin-top: 40px;
}

.main-page .section-news1 .category-news {
    border-top: var(--color-orange-blod) solid 2px;
    border-bottom: #ebebeb solid 1px;
}

.main-page .section-news1 .category-news h3 {
    display: inline-block;
    border-top: var(--color-orange-blod) solid 4px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 5px;
}

.main-page .section-news1 .row-news {
    display: flex;
    gap: 16px;
    width: 100%;
}


.main-page .section-news1 .left-news {
    display: flex;
    gap: 16px;
    padding-top: 20px;
    padding-right: 20px;
    width: 80%;
    border-right: #ebebeb solid 1px;
}

.main-page .section-news1 .left-news .news-text {
    width: 30%;
}

.main-page .section-news1 .left-news .news-text .title {
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-black);
}

.main-page .section-news1 .left-news .news-text .title:hover {
    color: var(--color-orange-blod);
    cursor: pointer;
}

.main-page .section-news1 .left-news .news-text .description {
    font-size: 14px;
}

.main-page .section-news1 .left-news .news-text .author {
    font-size: 14px;
    font-style: italic;
}


.main-page .section-news1 .left-news .news-image {
    width: 70%;
}

.main-page .section-news1 .left-news .news-image img {
    width: 100%;
}

.main-page .section-news1 .left-news .news-image .date-news {
    margin-top: 4px;
    display: inline-block;
    font-weight: bold;
    font-size: 10px;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
    background-color: var(--color-orange-light);
}

.main-page .section-news1 .left-news .news-image .date-news i {
    margin-right: 10px;
}

.main-page .section-news1 .rigth-news {
    display: flex;
    width: 20%;
    flex-direction: column;
    padding-right: 10px;
    border-right: #ebebeb solid 1px;
}

.main-page .section-news1 .rigth-news .card-onlty-text{
    padding: 20px 0px;
    border-bottom: #ebebeb solid 1px;
}

.main-page .section-news1 .rigth-news .card-onlty-text a{
    display: block;
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-black);
}

.main-page .section-news1 .rigth-news .card-onlty-text a:hover{
    color: var(--color-orange-blod);
    cursor: pointer;
}

.main-page .section-news1 .rigth-news .card-onlty-text h3{
    margin-top: 15px;
    font-size: 14px;
    font-style: italic;
}

.main-page .section-news1 .popular-news {
    padding: 0px 0px;
   
}

.main-page .section-news1 .popular-news .card-news {
    display: flex;
    gap: 16px;
    padding: 20px 0px;
    padding-left: 10px;
     border-bottom: #ebebeb solid 1px;
}

.main-page .section-news1 .popular-news .card-news img {
    width: 40%;
}

.main-page .section-news1 .popular-news .card-news a {
    width: 60%;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--color-black);
}

.main-page .section-news1 .popular-news .card-news a:hover {
   color: var(--color-orange-blod);
    cursor: pointer;
}