/**
 * Version: 1.0.3
 * Author: Lucas Campelo
 * Author URI: mailto:campelo.lucas@hotmail.com
 */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* OVERALL SETTINGS */
:root {
    --blue-primary: #03A6A6;
    --blue-secondary: #00414b;
    --blue-tertiary: #00232e;
    --blue-logo: #00264e;
    --grey: #F9F7F6;
    --red: #C71D1C;
    font-size: 62.5%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    scroll-behavior: smooth;
}

body {
    font-family: Poppins, sans-serif;
    font-size: 1.6rem;
}

ul {
    list-style-position: inside;
}

#page > header a,
#page > footer a {
    text-decoration: none;
    color: white;
}

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

.flex-row {
    display: flex;
    flex-direction: row;
}

.container {
    margin: auto;
    width: 100%;
    max-width: 120rem;
}

.text-error {
    color: var(--red);
}

/* [ HEADER ] */
#page > header {
    height: 24rem;
    background-color: var(--blue-primary);
}

#page > header .masthead {
    margin: auto;
    width: 100%;
    max-width: 120rem;
    height: 4rem;
    color: white;
    justify-content: space-between;
    align-items: center;
}

#page > header .masthead .social-icons {
    gap: 2rem;
}

#page > header .masthead .social-icons i {
    font-size: 2rem;
}

#page > header .banner-wrapper {
    flex-grow: 1;
    background-color: white; 
}

#page > header .banner {
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: 120rem;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#page > header .banner .logo {
    flex-grow: 1;
    gap: 2rem;
    min-width: 300px;
}

#page > header .banner .logo h1 {
    color: var(--blue-logo);
    align-self: center;
    font-size: 3rem;
}

#page > header .banner .logo img {
    max-width: 100%;
    width: 130px;
    height: auto;
}

/* [ HEADER MENU ] */
#page > header nav {
    margin: auto;
    width: 100%;
    max-width: 120rem;
    height: 4rem;
    color: white;
    display: flex;
    align-items: center;
    position: relative;
}

#page > header nav ul {
    height: 100%;
    list-style: none;
    flex: 1;
}

#page > header nav .hamburger {
    display: none;
}

#page > header nav ul li {
    height: inherit;
    letter-spacing: .1rem;
    line-height: 4rem;
    font-size: 1.3rem;
}

#page > header nav ul li a {
    display: inline-block;
    padding-inline: 1.4rem;
    background-color: transparent;
    transition: background-color .5s ease;
}

#page > header nav ul li.menu-item-has-children {
    position: relative;
    transition: background-color .3s ease .2s, opacity .3s ease .2s;
}

#page > header nav ul li.menu-item-has-children:hover,
#page > header nav ul li.menu-item-has-children:focus {
    position: relative;
    transition: background-color .3s ease .0s, opacity .3s ease .0s;
}

#page > header nav ul li.menu-item-has-children > a {
    display: inline-flex;
    flex-direction: row;
}

#page > header nav ul li.menu-item-has-children > a::after {
    display: block;
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 6px;
}

#page > header nav ul li.menu-item-has-children ul {
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all .3s ease .2s;
    position: absolute;
    z-index: 1;
    top: calc(100% + 6px);
    left: 0;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background-color: var(--blue-primary);
    border-radius: 8px;
    
    display:flex;
    flex-direction: column;
    height: auto;
    width: max-content;
}

#page > header nav ul li.menu-item-has-children:hover ul {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease 0s;
}

#page > header nav ul li.menu-item-has-children ul a {
    width: 100%;
}

#page > header nav ul li.current-menu-ancestor > a,
#page > header nav ul li.current-menu-item > a,
#page > header nav ul li a:hover,
#page > header nav ul li a:focus {
    background-color: var(--blue-secondary);
}

#page > header nav .backdrop {
    opacity: 0;
}

#page > header nav .search-form {
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease-out, visibility .2s ease-out .2s;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: absolute;
    top: calc(100% + 2px);
    right: 4px;
    background: var(--blue-primary);
    padding: 8px 12px;
    box-shadow: 1px 2px 8px #000;
}

#page > header nav .search-form.active {
    visibility: visible;
    opacity: 1;
    transition: opacity .2s ease-out, visibility .2s ease-out .0s;
}


#page > header nav .search-form input[type="submit"] {
    color: #FFF;
    border: 1px solid #FFF;
    background-color: transparent;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
}

#page > header nav .search-form label {
    display: flex;
    justify-content: center;
}

#page > header nav .search-form label span {
    display: none;
}

#page > header nav .search-form label input {
    outline: none;
    padding: 2px;
}

#page > header nav .focus-on-search {
    background-color: transparent;
    border: none;
    color: inherit;
    font-size: 1.6rem;
    padding-inline: 1.6rem;
    cursor: pointer;
}

/* CONTENT - GENERAL */
main .main-header {
    padding-block: 3rem;
    text-align: center;
    font-size: 2rem;
    color: var(--blue-primary);
    border-bottom: .3rem solid var(--blue-primary);
}

main .main-header a > img {
    max-width: 100%;
    height: auto;
}

main .main-header + .content-wrapper {
    margin-top: 3.2rem;
}

main .content-wrapper {
    width: 100%;
    max-width: 120rem;
    margin: auto;
}

main .content-wrapper .post {
    max-width: 100%;
}

/* CONTENT - 404 */
.error-404 .page-title {
    font-size: 4rem;
    line-height: 4rem;
    color: var(--blue-primary);
    margin-block: 4rem;
    text-align: center;
}

.error-404 .page-content p,
.error-404 .page-content h2,
.error-404 .page-content p {
    color: var(--blue-primary);
}

#page .error-404 .page-content a:hover,
#page .error-404 .page-content a:focus {
    color: var(--blue-secondary);
}


/* CONTENT - PESQUISA */
body.search main .content-wrapper > .page-header {
    padding-block: 3.2rem;
    color: var(--blue-primary);
}

body.search main .content-wrapper .nav-links {
    margin-top: 1.6rem;
}

body.search main .content-wrapper .nav-links a {
    margin-top: 1.6rem;
    color: var(--blue-primary);
}

/* [ HOME ] */
/* > [ HOME ] >> Last News Bar - page top */
section .main-header .last-news-bar .last-news-button {
    min-width: fit-content;
    padding: 2rem;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .1rem;
    color: white;
    background-color: var(--blue-secondary);
}

section .main-header .last-news-bar {
    gap: 2rem;
}

section .main-header .last-news-bar .last-news-wrapper {
    width: 100%;
    border: .1rem solid lightgrey;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

section .main-header .last-news-bar .last-news-links {
    text-align: left;
    flex-grow: 1;
    padding-inline: 1rem;
    list-style: none;
    position: relative;
    height: 6.5rem;
}

section .main-header .last-news-bar .last-news-links li {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);

    opacity: 0;
    visibility: hidden;

    transition: opacity .3s ease .2s, visibility .3s ease .2s;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

section .main-header .last-news-bar .last-news-links li.active {
    opacity: 1;
    visibility: visible;
    transition-delay: .5s;
}

section .main-header .last-news-bar .last-news-wrapper a {
    font-size: 1.4rem;
    color: black;
}

section .main-header .last-news-bar .last-news-links a h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

section .main-header .last-news-bar .last-news-links a h3:hover {
    color: var(--blue-secondary);
}

section .main-header .last-news-bar .last-news-wrapper .arrow-buttons {
    gap: 2rem;
    padding-inline: 1rem;
}

section .main-header .last-news-bar .last-news-wrapper .arrow-buttons button {
    appearance: unset;
    border: none;
    background: transparent;
    cursor: pointer;
}

section .main-header .last-news-bar .last-news-wrapper .arrow-buttons i {
    font-size: 2rem;
}

/* > [ HOME ] >> Main News */
#page > main a {
    text-decoration: none;
    color: inherit;
}
#page > main .main-news-wrapper a:hover {
    color: var(--blue-primary);
}

#page > main section .main-news-wrapper {
    margin-top: 4rem;
    margin-bottom: 6rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;

}

#page > main section .main-news-wrapper .main-news-item {
    border-radius: 1.2rem;
    border: .2rem solid grey;
    overflow: hidden;
    position: relative;
    color: #FFF;
}

#page > main section .main-news-wrapper .main-news-item .news-item-content {
    position: absolute;
    left: 5%;
    bottom: 5%;
}

/* the big news item */
#page > main section .main-news-wrapper .main-news-item:nth-child(1) {
    grid-row: span 2;
}

#page > main section .main-news-wrapper .main-news-item:nth-child(1) .news-item-content a h2 {
    font-size: 2.8rem;
}

#page > main section .main-news-wrapper .main-news-item:nth-child(1) .news-item-content .post-date {
    font-size: 2rem;
    padding-bottom: 0.4rem;
}

#page > main section .main-news-wrapper .main-news-item:nth-child(1) .news-item-content .news-item-author {
    font-size: 1.6rem;
    background-color: var(--blue-tertiary);
}


/* all small news item */
#page > main section .main-news-wrapper .main-news-item .news-item-content a h2 {
    font-size: 1.4rem;
    padding-right: 1rem;
}

#page > main section .main-news-wrapper .main-news-item .news-item-content .post-date {
    font-size: 1.4rem;
}

#page > main section .main-news-wrapper .main-news-item .news-item-content .news-item-author {
    margin-top: 1.4rem;
    width: max-content;
    padding: .4rem 1.6rem;
    font-size: 1.2rem;
    color: white;
    background-color: var(--red);
    border-radius: 2rem;
}

#page > main section .main-news-wrapper .main-news-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}

/* Minuto a Minuto */
#page #minuto-a-minuto {
    gap: 1rem;
    display: flex;
}

#page #minuto-a-minuto > div {
    background-color: var(--red);
    color: #FFF;
    padding: 1rem 1.5rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
}

#page #minuto-a-minuto > a {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    color: var(--red);
    font-size: 2.5rem;
    font-weight: 600;
}


/* [ HOME ] > banner-all-news */
#page > main section#bannerAllNews {
    margin-block: 6rem;
}
#page > main section .banner-all-news {
    background-color: var(--grey);
}

#page > main section .banner-all-news-wrapper {
    max-width: 120rem;
    margin: auto;
    padding-block: 8rem;
    text-align: center;
}

#page > main section .banner-all-news .banner-all-news-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 6rem;
}

/* [ HOME] > banner-all-news > banner-all-news-item */
#page main .banner-all-news-item {
    gap: .8rem;
}

#page main .banner-all-news-item .banner-all-news-item-thumbnail {
    aspect-ratio: 1/1;
    max-width: 15rem;
}

#page main .banner-all-news-item .banner-all-news-item-thumbnail img {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

#page main .banner-all-news-item .banner-all-news-item-content {
    text-align: left;
    font-size: 1rem;
}

#page main .banner-all-news-item .banner-all-news-item-content .banner-item-content-date,
#page main .banner-all-news-item .banner-all-news-item-content .banner-item-content-author {
    margin-block: .4rem;
    font-weight: 500;
    color: #CACACA;
}

#page main .banner-all-news-item .banner-all-news-item-content .banner-item-content-author:has(.in-live) {
    color: var(--red);
}

#page main .banner-all-news-item .banner-all-news-item-content .banner-item-content-title a {
    color: var(--blue-primary);
}
#page main .banner-all-news-item .banner-all-news-item-content .banner-item-content-title a:hover {
    color: var(--blue-secondary);
}

#page > main section .banner-all-news-wrapper .btn-all-news a {
    width: max-content;
    padding: 1.4rem 2rem;
    letter-spacing: .1rem;
    font-size: 1.4rem;
    background-color: var(--blue-primary);
    border-radius: 3rem;
    text-transform: uppercase;
    transition: all .3s ease;
    color: #FFF;
}

#page > main section .banner-all-news-wrapper .btn-all-news a:hover {
    background-color: var(--blue-secondary);
}


/* [ HOME ] > recent-news section > recent-news header */
#page > main section#recentNews {
    margin-bottom: 6rem;
}

#page > main .recent-news-header .recent-title {
    justify-content: space-around;
    align-items: center;
    text-align: center;
    gap: 4rem;
    font-size: 1.8rem;
    color: var(--blue-primary);
    letter-spacing: .1rem;
}

#page > main .recent-news-header .horizontal-line {
    display: inline-block;
    height: 3px;
    width: auto;
    border-top: 3px double #EEE;
    flex: auto;
}

#page > main .recent-news-header {
    margin-bottom: 4rem;
}

#page > main .recent-news-header p {
    text-align: center;
    font-size: 1.4rem;
    color: #BFC2C9;
    margin-top: 1.6rem;
}

#page > main .recent-news-header .recent-title img {
    max-width: 30%;
    width: 100%;
    height: auto;
}


/* [ HOME ] > recent-news section > recent-news-items */
#page > main section .recent-news-items {
    justify-content: space-between;
    gap: 2rem;
}

#page > main section .recent-news-items .recent-news-item {
    width: 100%;
    gap: 1rem;
}

#page > main section .recent-news-items .recent-news-item .recent-news-item-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

#page > main section .recent-news-items .recent-news-item .recent-news-item-category a {
    background-color: var(--blue-primary);
    width: max-content;
    font-size: 1.1rem;
    padding: .6rem 1.2rem;
    border-radius: 3rem;
    color: #FFF;
}

#page > main section .recent-news-items .recent-news-item .recent-news-item-title a {
    color: black;
    font-size: 1.4rem;
}

#page > main section .recent-news-items .recent-news-item .recent-news-item-title a:hover {
    color: var(--blue-primary);
}

#page > main section .recent-news-items .recent-news-item .recent-news-item-info {
    gap: .8rem;
    font-size: 1.2rem;
    flex-wrap: wrap;
}

#page > main section .recent-news-items .recent-news-item .recent-news-item-info p a {
    color: black;
}



/* [ HOME ] > section #advertisement */
#page > main section#advertisement {
    display: flex;
    justify-content: center;
    margin-block: 6rem;
}

#page > main section#advertisement img {
    width: 100%;
    height: auto;
}


/* [ HOME ] > section All News */
#page > main section .all-news-content a {
    color: black;
}

#page > main section .all-news-content a:hover {
    color: var(--blue-primary);
}

#page > main section .all-news-header {
    font-size: 2.8rem;
    letter-spacing: .1rem;
    font-weight: bold;
    color: var(--blue-primary);
    margin-bottom: 2rem;
}

/* all news -- aside-columnists */
#page > main section .all-news-content {
    gap: 6rem;
    margin-bottom: 6rem;
}

#page > main section .all-news-items {
    max-width: 100%;
}

#page > main section .all-news-items .all-news-item {
    gap: 2rem;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: .2rem solid var(--blue-secondary);
    display: grid;
    grid-template-columns: 20rem 1fr;
}

#page > main section .all-news-items .all-news-item .all-news-item-thumbnail {
    max-width: 20rem;
    max-height: 20rem;
}

#page > main section .all-news-items .all-news-item .all-news-item-thumbnail img {
    width: 100%;
    height: 100%;
    min-height: 20rem;
    object-fit: cover;
}

#page > main section .all-news-items .all-news-item .all-news-item-content {
    justify-content: center;
    gap: 1rem;
}

#page > main section .all-news-items .all-news-item .all-news-item-content .all-news-item-category {
    color: #73767E;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .1rem;
}

#page > main section .all-news-items .all-news-item .all-news-item-content .all-news-item-title {
    letter-spacing: .1rem;
    font-size: 2rem;
}

#page > main section .all-news-items .all-news-item .all-news-item-content .all-news-item-info {
    gap: 1rem;
    color: #73767E;
    font-size: 1.4rem;
}

#page > main section .all-news-content .all-news-items .btn-all-news {
    margin-top: 4rem;
}

#page > main section .all-news-content .all-news-items .btn-all-news a {
    width: max-content;
    padding: 1.4rem 2rem;
    letter-spacing: .1rem;
    font-size: 1.4rem;
    color: white;
    background-color: var(--blue-primary);
    border-radius: 3rem;
    text-transform: uppercase;
    transition: all .3s ease;
}

#page > main section .all-news-content .all-news-items .btn-all-news a:hover {
    background-color: var(--blue-secondary);
}

/* CONTENT - AUTOR */
body.author main .author-header {
    max-width: 120rem;
    margin: 3rem auto;
    padding: 2rem;
    border: 1px solid black;
    border-bottom-width: 4px;
    display: flex;
    gap: 2.4rem;
    align-items: center;
}

body.author main .author-header .author-avatar {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

body.author main .content-wrapper .content-title {
    color: var(--blue-primary);
    margin: 2rem 0 4rem;
}

body.author main .author-header .author-avatar img {
    max-width: 165px;
    width: 100%;
    aspect-ratio: 1/1;

}

body.author main .author-header .author-info {
    flex: 1;
    font-size: 1.6rem;
    white-space: pre-line;
}

body.author main .author-header .author-info h2 {
    margin-bottom: 1.6rem;
}

body.author #page > main .author-header .author-info .author-social-media  {
    column-gap: 0.8rem;
    margin-top: 1.2rem;
}


body.author #page > main .author-header .author-info .author-social-media a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;

    background-color: var(--blue-primary);
    color: #FFF;
    text-decoration: none;
}

main .main-ad img {
    max-width: 100%;
    height: auto;
}

main .main-ad {
    margin: 4rem 2rem;
    text-align: center;
}



/* [ POST ] */
main .post-page-content {
    margin-top: 6rem;
    gap: 4rem;
}

main .post-page-content .sidebar-ads {
    max-width: 25%;
    min-width: 25%;
}

main .post-page-content .sidebar-ads .ads-wrapper {
    position: sticky;
    top: 0;
}

main .content-wrapper .post-content .post-content-ads {
    display: none;
}

/* > [ POST-HEADER ] */
main .post .post-header {
    gap: 3rem;
}

main .post .post-header .post-date i,
main .post .post-header .post-time i {
    color: var(--blue-primary);
}

main .post .post-header h1 {
    font-size: 3.2rem;
    line-height: 3.2rem;
    letter-spacing: .1rem;
    color: var(--blue-primary);
}

/* >> [ POST-HEADER ] - post-categories */
main .post .post-header .post-header-content .post-categories {
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

main .post .post-header .post-header-content .post-categories .post-category.post-author {
    width: max-content;
    padding: .4rem 6rem;
    font-size: 1.8rem;
    color: white;
    background-color: var(--blue-tertiary);
    border-radius: 2.4rem;
}

main .post .post-header .post-header-content .post-categories a {
    text-decoration: none;
}


main .post .post-header .post-header-content .post-categories .post-category {
    width: max-content;
    padding: .6rem 4rem;
    font-size: 1.2rem;
    color: white;
    background-color: var(--blue-primary);
    border-radius: 2.4rem;
    text-decoration: none;
}

/* post-category hover */
main .post .post-header .post-header-content .post-categories .post-category.post-author:hover {
    background-color: color-mix(in srgb, var(--blue-tertiary), #FFF 15%);
}
main .post .post-header .post-header-content .post-categories .post-category:hover {
    background-color: color-mix(in srgb, var(--blue-primary), #FFF 15%);
}

/* >> [ POST-HEADER ] - post-bar */
main .post .post-header .post-header-content .post-bar {
    justify-content: space-between;
    gap: 1rem;
}

main .post .post-header .post-header-content .post-bar .post-bar-items {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 1.4rem;
    color: grey;
}

.post .post-bar .post-bar-tags a {
    color: inherit;
    text-decoration: none;
    display: inline;
}

.post .post-bar .post-bar-tags a:hover,
.post .post-bar .post-bar-tags a:focus {
    color: #333;
    text-decoration: none;
}

main .post .post-header .post-header-content .post-bar .post-bar-social {
    min-width: max-content;
    align-self: flex-end;
}

#page > main .post .post-header .post-header-content .post-bar .post-bar-social a {
    color: #FFF;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 30px;
    height: 30px;
    background-color: var(--blue-primary);
    border-radius: 50%;
    transition: all .2s linear;
    font-size: 1.6rem;
}

main .post .post-header .post-header-content .post-bar .post-bar-social:has(a:hover) a:not(:hover) {
    opacity: .5;
}

/*  [ POST ] - Sidebar Ads */
main .post-page-content .sidebar-ads img {
    width: 100%;
    height: auto;
}

/* > [ POST-CONTENT ] */
main .post .post-content {
    /* text-align: center; */
    color: #181818;
    margin-top: 2rem;
    margin-bottom: 2rem;

    text-wrap: wrap;
    word-wrap: break-word;
}

main .post .post-content h1,
main .post .post-content h2,
main .post .post-content h3,
main .post .post-content h4,
main .post .post-content h5,
main .post .post-content h6 {
    margin-block: 1.6rem;
}


main .post .post-content h1,
main .post .post-content h2 {
    color: var(--blue-primary);
    border-bottom: 1px solid #e6e6e6;
    padding-bottom: 0.5rem;
    margin-bottom: 1.1rem;
}

main .post .post-content img {
    max-width: 100%;
    height: auto;
}

main .post .post-content p {
    text-align: left;
    margin-block: 2rem;
}

#page > main .post .post-content a {
    color: var(--blue-primary);
}

#page > main .post .post-content a:hover,
#page > main .post .post-content a:focus {
    color: var(--blue-secondary);
}

main .post .post-content iframe[src^="https://www.youtube.com"] {
    aspect-ratio: 640 / 360;
    max-width: 100%;
    height: auto;
}

/* > [ POST-NAVIGATION ] */
main .content-wrapper .post-navigation {
    justify-content: space-between;
    margin-bottom: 6rem;
}

main .content-wrapper .post-navigation .prev-post,
main .content-wrapper .post-navigation .next-post {
    width: 50%;
}

main .content-wrapper .post-navigation .next-post {
    text-align: right;
    border-left: .1rem solid #adadad;
}


main .content-wrapper .post-navigation h3 {
    color: grey;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 1.8rem;
    letter-spacing: .1rem;
}

main .content-wrapper .post-navigation a {
    font-size: 1.6rem;
    color: var(--blue-primary);
}

main .content-wrapper .post-navigation a:hover {
    text-decoration: underline;
}



/* [ CATEGORY ] */
main .category-content {
    gap: 4rem;
}

/* [ CATEGORY ] - news */
main .category-content a {
    text-decoration: none;
    color: var(--blue-primary);
}

main .category a:hover {
    color: var(--blue-secondary);
}

main .category {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, min-content);
    gap: 4rem;
}

main .category-item {
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: .1rem solid var(--blue-secondary);
}

main .category-item a > img {
    max-width: 20rem;
    height: fit-content;
}

main .category-item-content a h2 {
    font-size: 2.4rem;
    margin-bottom: 1rem;
}


main .category-item-content p {
    color: #adadad;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

main .category-item-content a {
    color: var(--blue-primary);
    font-size: 1.4rem;
}

main .category .category-navigation {
    grid-column: span 2;
}

main .category .category-navigation ul {
    list-style: none;
    justify-content: center;
    gap: 2rem;
    display: flex;
    flex-direction: row;
}

main .category .category-navigation .current {
    color: var(--blue-secondary);
}

/* [ CATEGORY ] - columnists */
main .aside-columnists {
    gap: 3rem;
}

main .aside-columnists a > img {
    width: 100%;
    height: auto;
}

main .aside-columnists .follow-us {
    text-align: center;
    border-top: .1rem solid black;
    border-bottom: .1rem solid black;
    padding-block: 2rem;
}

main .aside-columnists .follow-us h3 {
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 2rem;
}

main .aside-columnists .follow-us i {
    font-size: 2rem;
    padding: 1rem;
    border: .1rem solid black;
    border-radius: 1.2rem;    
}

main .aside-columnists .follow-us i:hover {
    color: white;
    border-color: white;
    background-color: var(--blue-secondary);
}

main .aside-columnists .columnists {
    gap: 2rem;
    margin-bottom: 2rem;
}

main .aside-columnists .columnists h2 {
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: .1rem;
}

main .aside-columnists .columnists a:hover {
    color: var(--blue-secondary);
}

/* [ CATEGORY ] - columnists-item */
main .aside-columnists .columnists .columnists-item,
main .content-wrapper article.content-colunistas .columnists-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
}

main .content-wrapper article.content-colunistas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
}

main .aside-columnists .columnists .columnists-item a:not(:has(img)),
main .content-wrapper article.content-colunistas .columnists-item a:not(:has(img)) {
    display: flex;
    height: 100%;
    align-items: center;
}

main .aside-columnists .columnists .columnists-item a img,
main .content-wrapper article.content-colunistas .columnists-item a img {
    width: 9.6rem;
    height: 9.6rem;
    border-radius: 50%;
}



/* [ PAGE ] */
section article {
    gap: 8rem;
}

section article .img-border {
    width: 56rem;
    height: 56rem;
    border: .1rem solid var(--blue-secondary);
}

section article.a-article img {
    transform: translate(2rem, 2rem);
}
section article.b-article img {
    transform: translate(-2rem, 2rem);
}

section article p {
    margin-block: 1.6rem;
}



/* [ SUBSCRIBE ] */
.subscribe {
    margin-top: 2rem;
    height: 46rem;
    background-color: var(--grey);
    justify-content: center;
    align-items: center;    
}

.subscribe i {
    margin-bottom: 2rem;
    font-size: 4rem;
    color: #E63316;
    text-shadow: .2rem .2rem .4rem #0004;
}

.subscribe .email-input {
    margin-block: 2rem;
}

.subscribe p {
    margin: 1rem;
}

.subscribe input {
    padding: 1.2rem 2rem;
    border: 1px solid color-mix(in srgb, var(--blue-primary), var(--grey) 70%);
    border-radius: 2rem;
    outline-color: darkgrey;
    outline: none;
    font-family: inherit;
}

.subscribe input:focus,
.subscribe input:hover {
    border-color: var(--blue-primary);
}

.subscribe input[type=submit] {
    cursor: pointer;
    font-weight: bold;
    padding: 1.2rem 2rem;
    background-color: white;
    border-radius: 2rem;
    outline: none;
    font-family: inherit;
}

.subscribe input[type=submit]:hover,
.subscribe input[type=submit]:focus {
    background: #f1f1f1;
}

.subscribe label {
    font-size: 1.4rem;
}



/* [ FOOTER ] */
footer .footer-wrapper {
    color: white;
    background-color: var(--blue-primary);;
    padding-block: 4rem;
}

footer .footer-content {
    max-width: 120rem;
    margin: auto;
}

footer .footer-items {
    gap: 4rem;
    flex-wrap: no-wrap;
}

footer .footer-items .footer-item {
    width: 100%;
}

footer .footer-item-header{
    margin-bottom: 2rem;
}

footer .footer-item-header img {
    max-width: 6rem;
    margin-right: 1rem;
}

footer .footer-item h2 {
    font-size: 1.4rem;
    margin-block: 1.2rem;
}

footer .footer-item:not(h2) {
    font-size: 1.2rem;
}

footer .footer-item p {
    color: #555;
}

footer .footer-item li {
    list-style: none;
    margin-bottom: .8rem;
}

footer .footer-social-links {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

footer .footer-item.social-links i {
    font-size: 1.6rem;
}

footer .footer-item.social-links a:nth-child(4) i {
padding: .6rem .8rem;
}

footer .footer-item a {
    transition: all .15s linear;
}

footer .footer-item.social-links a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all .15s linear;
    width: 50px;
    height: 50px;
    padding: .6rem;
    border-radius: 50%;
    color: #FFF;
    border: 1px solid #555;
}

footer .footer-item:has(a:hover) a:not(:hover) {
    opacity: .5;
}

footer .footer-rights {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid grey;
    text-align: center;
}

footer .footer-item .recent-posts li {
    margin-bottom: 2rem;
    font-size: 1.3rem;
}

footer .footer-item .recent-posts li .post-thumbnail {
    max-width: 90px;
    min-width: 90px;
    margin-right: 1rem;
}

footer .footer-item .recent-posts li img {
    width: 100%;
    height: auto;
}


/* MEDIA QUEURIES */
/* big screens */
@media screen and (min-width: 1300px) {
    body {
        font-size: 2rem;
    }

    .subscribe label {
        font-size: 1.6rem;
    }

    footer .footer-item p,
    footer .footer-item li,
    footer .footer-item h2 {
        font-size: 1.7rem;
    }
}

@media screen and (max-width: 1300px) {
    .padding-inline {
        padding-inline: 5%;
    }
}


@media screen and (max-width: 1220px) {
    main .category .category-item > img {
        max-width: 16rem;
    }

    main .category .category-item h2 {
        font-size: 1.6rem;
    }
}



@media screen and (max-width: 1030px) {
    section article .img-border img,
    section article .img-border {
        width: 30rem;
        height: 30rem;
    }

    #page > header .banner .logo h1 {
        font-size: 2.4rem;
    }

    /* home > recent-news */
    #page > main section .recent-news-items {
        flex-wrap: wrap;
    }

    /* home > recent-news */
    #page > main section .recent-news-items .recent-news-item {
        flex: 1;
        min-width: 36%;
    }
}


/* laptops */
@media screen and (max-width: 992px) {
    #page > header .banner .logo h1 {
        font-size: 2.2rem;
    }

    #page > header .banner .advertisement {
        text-align: right;
    }

    #page > header .banner .advertisement img {
        max-width: 450px;
        width: 100%;
        height: auto;
    }

    /* content - category */
    main .category {
        display: flex;
        flex-direction: column;
    }
}


/* portrait tablets and large phones */
@media screen and (max-width: 838px) {

    #page > header nav ul li {
        font-size: 1.2rem;
    }

    main .main-header {
        font-size: 1.4rem;
    }
}


/* medium screens */
@media screen and (max-width: 768px) {
    #page > header .masthead {
        font-size: 1.2rem;
    }

    #page > header .banner .logo {
        font-size: 1.2rem;
    }

    #page > header nav ul li {
        font-size: 1rem;
        padding-inline: 0;
    }

    #page > header nav ul li a {
        padding-inline: 1rem;
    }

    #page > header nav ul li .sub-menu a {
        padding-inline: 2rem 1rem;
    }

    /* content - home */
    /* home > last-news-bar */
    #page > main section .main-header .last-news-bar {
        flex-direction: column;
    }

    #page > main section .main-header .last-news-bar .last-news-wrapper .last-news-links a h3 {
        font-weight: 500;
        font-size: 1.6rem;
    }

    /* home > main-news */
    #page > main section .main-news-wrapper {
        grid-template-columns: 1fr;
    }

    #page > main section .main-news-wrapper .main-news-item {
        max-height: 35rem;
    }

    #page > main section .main-news-wrapper .main-news-item:nth-child(1) .news-item-content a h2 {
        font-size: inherit;
    }

    #page > main section .main-news-wrapper .main-news-item:nth-child(1) .news-item-content .post-date {
        font-size: inherit;
    }

    #page > main section .main-news-wrapper .main-news-item .news-item-content a h2 {
        font-size: 1.6rem;
    }

    /* home > banner-all-news*/
    #page > main section .banner-all-news .banner-all-news-items {
        grid-template-columns: 1fr;
        gap: 4rem;
        text-align: left;
    }

    #page > main section .banner-all-news .banner-all-news-items .banner-all-news-item {
        flex-direction: column;
    }

    #page > main section .banner-all-news-item .banner-all-news-item-thumbnail {
        max-width: 100%;
        max-height: 20rem;
    }
    
    #page > main section .banner-all-news-item .banner-all-news-item-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #page > main section .banner-all-news .banner-all-news-items .banner-all-news-item .banner-all-news-item-content {
        font-size: .8em;
    }

    #page > main section .banner-all-news .banner-all-news-wrapper .btn-all-news a {
        font-size: 1.2rem;
        padding: 1rem;
    }

    #page > main .recent-news-header .recent-title {
        font-size: 1.2rem;
    }

    #page > main .recent-news-header .recent-title img {
        max-width: 15rem;
    }

    /* home > all-news */
    #page > main section .all-news-content {
        flex-direction: column;
    }

    #page > main section .all-news-header {
        font-size: 2rem;
    }

    #page > main section .all-news-content .all-news-item {
        grid-template-columns: 1fr;
        gap: 6rem;
    }

    #page > main section .all-news-content .all-news-items .all-news-item .all-news-item-thumbnail {
        max-width: 100%;
        max-height: 30rem;
    }

    .all-news-item-title a {
        font-size: 1.6rem;
    }

    #page > main section .all-news-content .all-news-items .btn-all-news {
        text-align: center;
    }

    #page > main section .all-news-content .aside-columnists,
    body.home #page > main .aside-columnists {
        display: none;
    }


    /* content - post */
    main .post-page-content .sidebar-ads {
        display: none;
    }

    main .content-wrapper .post-content .post-content-ads {
        display: block;
    }

    /* content - page*/
    main section article.a-article,
    main section article.b-article {
        flex-direction: column;
        align-items: center;
        gap: 4rem;
    }

    /* content - category*/
    main .category-content {
        display: flex;
        flex-direction: column;
    }

    main .aside-columnists > img {
        max-width: 80%;
        align-self: center;
    }

    main .aside-columnists h3 {
        font-size: 1.8rem;
    }

    main .aside-columnists > a {
        text-align: center;
    }

    main .aside-columnists a > img {
        width: 75%;
        height: auto;
    }

    /* FOOTER */
    footer .footer-wrapper {
        min-width: auto;
        padding-inline: 5%;
    }

    footer .footer-items {
        flex-direction: column;
        flex-grow: 1;
        gap: 2rem;
    }

    footer .footer-items .footer-item:nth-child(2) {
        display: none;
    }

    footer .footer-items .footer-item {
        max-width: 100%;
    }

    footer .footer-items .footer-item:nth-child(1) h2 {
        font-size: 2.4rem;
    }

    footer .footer-items .footer-item:nth-child(1) img {
        max-width: 10rem;
    }

    footer .footer-items .footer-item:nth-child(1) .footer-item-header {
        justify-content: center;
    }
    
    footer .footer-items .footer-item .footer-item-header,
    footer .footer-items .footer-item .footer-item-header h2 {
        margin-bottom: 1rem;
        letter-spacing: .2rem;
    }

    footer .footer-rights {
        font-size: 1.2rem;
    }
}


/* small phones */
@media screen and (max-width: 610px) {
    #page > header {
        min-width: auto;
        height: auto;
    }

    #page > header .masthead {
        display: none;
    }

    #page > header .banner {
        flex-direction: column;
        align-content: center;
    }

    #page > header .banner .logo {
        align-items: center;
    }

    #page > header .banner .advertisement {
        width: 100%;
        text-align: center;
        margin-bottom: 1rem; 
    }

    #page > header .banner .advertisement img {
        max-width: 100%;
    }

    #page > header nav {
        justify-content: space-between;
    }

    /* HAMBURGER MENU*/
    #page > header nav ul {
        box-shadow: .2rem .4rem .6rem .2rem #0007;
        visibility: hidden;
        flex-direction: column;
        position: fixed;
        left: -270px;
        top: 0;
        bottom: 0;
        width: 250px;
        background: var(--blue-primary);
        height: auto;
        z-index: 100000;
        transition: left .2s ease-in 0s, visibility .2s linear .2s;
    }
    #page > header nav ul li a {
        width: 100%;
    }
    #page > header nav .backdrop {
        visibility: hidden;
        opacity: 0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: fixed;
        background: rgba(0, 0, 0, 0.45);
        transition: opacity .2s ease-in, visibility .2s linear .2s;
    }
    #page > header nav.open .backdrop {
        visibility: visible;
        opacity: 1;
        transition: opacity .2s ease-in, visibility .2s linear 0s;
    }
    #page > header nav.open ul {
        visibility: visible;
        left: 0;
        transition: left .2s ease-in 0s;
    }

    #page > header nav ul li {
        font-weight: 500;
        font-size: 1.3rem;
    }

    #page > header nav ul li:hover {
        text-decoration: none;
    }

    #page > header nav ul li.menu-item-has-children ul {
        height: max-content;
        max-height: 0;
        width: 100%;
        transition: max-height .4s ease;
        opacity: 1;
        visibility: visible;
        position: initial;
        box-shadow: none;
        max-width: 100%;
        border-radius: initial;
    }

    #page > header nav ul li.menu-item-has-children:hover ul,
    #page > header nav ul li.menu-item-has-children:focus ul {
        max-height: 400px;
        transition: max-height .4s ease;
    }

    #page > header nav .hamburger {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 40px;
        background-color: transparent;
        border: none;
        color: inherit;
    }

    /* CONTENT */
    main {
        min-width: auto;
    }

    main .main-header {
        font-size: 1.4rem;
    }

    /* CONTENT - HOME */
    main section .main-header .last-news-bar .last-news-button {
        font-size: 1.2rem;
        padding: 1rem; 
    }

    main section .main-header .last-news-bar .last-news-wrapper .last-news-links a h3 {
        font-size: 1rem;
    }

    section .main-news-wrapper .main-news-item:nth-child(1) .news-item-content a h2 {
        font-size: 1.4rem;
    }

    section .main-news-wrapper .main-news-item .news-item-content a h2 {
        font-size: 1.2rem;
    }

    .recent-news-header .recent-title {
        font-size: 1rem;
    }

    .recent-news-header .recent-title img {
        max-width: 4rem;
    }

    /* Minuto a Minuto */
    #page #minuto-a-minuto {
        flex-direction: column;
    }

    /* CONTENT - POST */
    /* > post-header */
    main .post .post-header h1 {
        font-size: 2.8rem;
    }

    main .post .post-header .post-header-content .post-tags {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    /* > post-tags */
    main .post .post-header .post-header-content .post-tags a {
        width: 100%;
    }

    main .post .post-header .post-header-content .post-tags a .post-tag.post-author {
        font-size: 1.2rem;
        width: 100%;
    }

    main .post .post-header .post-header-content .post-tags a .post-tag {
        font-size: 1rem;
        width: 100%;
    }

    /* post-bar */
    main .post .post-header .post-header-content .post-bar .post-bar-items {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    main .post .post-header .post-header-content .post-bar {
        flex-direction: column;
        gap: 2rem;
    }

    main .post .post-header .post-header-content .post-bar .post-bar-social {
        align-self: flex-end;
    }

    main .post .post-header .post-header-content .post-bar .post-bar-social i {
        font-size: 1rem;
        padding: .6rem;
    }

    /* home > recent-news */
    #page > main section .recent-news-items {
        flex-direction: column;
    }

    /* > post-navigation */
    main .content-wrapper .post-navigation h3,
    main .content-wrapper .post-navigation a {
        font-size: 1rem;
    }


/* CONTENT - CATEGORY */
    main .category-item a img {
        max-width: 12rem;
        height: fit-content;
    }

    main .category .category-item a h2 {
        font-size: 1.4rem;
    }

    main .category .category-item p, 
    main .category .category-item a {
        font-size: 1rem;
    }

    main .content-wrapper article.content-colunistas {
        grid-template-columns: 1fr;
    }


    /* CONTENT - PAGE */
    main section article.a-article,
    main section article.b-article {
        flex-direction: column;
        align-items: center;
    }


    /* SUBSCRIBE */
    .subscribe {
        min-width: auto;
        padding-inline: 5%;
        text-align: center;
    }

    .subscribe .email-input input[type=email] {
        width: 90%;
        border-radius: 2rem;
    }

    .subscribe .email-input input[type=submit] {
        width: 90%;
        margin-top: 1rem;
        border-radius: 2rem;
    }

    .subscribe label {
        width: 70%;
        margin-top: 2rem;
    }

    .subscribe label input[type="checkbox"] {
        vertical-align: middle;
    }
}