/* Fonte do Site "Open Sans" */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Fonte das Cifras "Roboto Mono" */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

/* Awesome CDN PRO */
@import url('https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css');


/* ================================== Color Configuration ==== */
:root {
    --white: #fff;
    --black: #000;
    --blue: #4169E1;
    --adsBack: #f5f5f5;

    --color1: #2b3445;
    --color2: #4c5a6e;
    --color3: #99a6b8;
    --color4: #c8ced7;
    --color5: #dce0e5; 
    --color6: #eff1f4;
    --color7: #f68a27;
}




/* ============================== Scrollbar Configuration ==== */
::-webkit-scrollbar {
    width: 8px;
    height: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color7);
}




/* =========================================== Page Setup ==== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

a {
    color: var(--blue); 
}

html, body {
    height: 100%;
}

html {
    /* A cada 1rem será considerado 10px  */
    font-size: 62.5%; /* Ou seja, 62.5% será igual a 10px */
}

body {
    display: flex;
    flex-direction: column;
    /* min-height: 100vh; */

    color: var(--color1);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 1.6rem;
    line-height: 2.2rem;
}

.center {
    width: 90%;
    max-width: 1280px;
    margin: auto;
    /* border: 1px solid red;  */
}

main {
    flex: 1;
}

/* position sticky (Global) */
.sticky {
    position: sticky;
    bottom: 0;
}




/* =============================================== Header ==== */
.header-top {
    z-index: 9;
    background-color: var(--color1);
}


/* ============== Navigation Menu */
nav.content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-header {
    display: flex;
    align-items: center;
    height: 70px;
}



/* ============== Main Navigation */
.nav-main {
    /* border: 1px solid aqua; */
}

ul.menu {
    display: flex;
}

ul.menu > li {
    margin-left: 32px;
}

ul.menu li a {
    display: flex;
    align-items: center;
    padding: 32px 0;
    color: var(--color6);
    transition: .2s;
}

ul.menu > li:hover > a {
    color: var(--color7);
}

ul.menu > li > a > i {
    margin-left: 8px;
    transition: .4s;
}

ul.menu > li:hover > a > i {
    transform: rotate(180deg);
}


/* ===================== Sub-Menu */
ul.menu ul {
    position: absolute;
    width: 160px;
    background-color: var(--color2);
    border-top: 4px solid var(--color7);
    box-shadow: 2px 2px 4px var(--color3);
    padding: 8px 0;
    translate: 0 16px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

ul.menu > li:hover ul {
    translate: 0;
    opacity: 1;
    visibility: visible;
}

ul.menu ul li a {
    padding: 8px 16px;
}

ul.menu ul li:hover a:not(ul.bigger > li:hover a) {
    color: var(--color7);
}






/* ============== Sub-Menu Bigger */
ul.menu ul.bigger {
    display: flex;
    width: 100%;
    left: 0;
    padding: 32px 32px 16px;
}

ul.bigger li {
    margin-right: 40px;
    /* border: 1px solid pink; */
}

ul.bigger li div {
    margin-bottom: 24px;
}

ul.bigger li i {
    font-size: 2.4rem;
    background-color: var(--color6);
    border-radius: 50%;
    padding: 16px;
    color: var(--color2);
}

ul.bigger li h3 {
    font-weight: normal;
    text-decoration: underline;
    color: var(--color6);
    margin-top: 16px;
}

ul.menu ul.bigger li a {
    padding-left: 0;
}

ul.menu ul.bigger li a:hover {
    color: var(--color7);
}

ul.bigger li a img {
    padding-right: 8px;
}




/* ====================================== Footer (Rodapé) ==== */
footer {
    background-color: var(--color2);
    /* flex-shrink: 0; */
}

footer header {
    text-align: center;
    color: var(--color4);
    padding: 8px 0;
}








/* =================================== Section Pagination ==== */
section#paginate {
    text-align: center;
    margin: 32px 0;
}

.pagination {
    display: inline-flex;
    border: 1px solid var(--color5);
    border-radius: 8px;
    box-shadow: 0 1px 2px var(--color6);
}

.pagination a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    /* padding: 8px 16px; */
    color: var(--color1);
}

.pagination a:hover:not(.disable, .active) {
    background-color: var(--color6);
}

.pagination a:not(.disable, .active) {
    cursor: pointer;
}

.pagination .numbers {
    display: flex;
}

.pagination .disable {
    color: var(--color4);
}

.pagination .active {
    font-weight: bold;
    border: 1px solid var(--color3);
    cursor: default;
}






/* ============================================= ADS: All ==== */
.ads {
    background-color: var(--color6);
    border-radius: 8px;
}


/* =========================== ADS: Horizontal Responsive ==== */
.ads .h-responsive {
    text-align: center;
    margin: 8px 0;
}


/* ================================ ADS: Horizontal Fixed ==== */
.ads .h-fixed {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ads .h-fixed .adsbygoogle {
    width: 970px;
    height: 90px;
}









/* =========================================== RESPONSIVE ==== */
/* ADS Google */
@media (max-width: 768px) {
    .ads {
        border-radius: 0;
    }

    .ads.center {
        width: 100%;
    }

    .ads .h-fixed .adsbygoogle {
        width: 468px;
        height: 60px;
    }
}




@media (max-width: 768px) {
    main.block {    /* Block content scrolling */
        overflow: hidden;
    }


/* ============== Navigation Menu */
    .header-top.active {    /* Activate class */
        height: 100vh;
        overflow: auto;
    }

    nav.content {
        /* position: relative; */
        display: block;
        /* display: flex; */
        /* justify-content: space-between; */
    }

    .nav-header {
        /* display: flex; */
        /* align-items: center; */
        justify-content: space-between;
        /* height: 54px; */
    }


/* ============= Button Hamburger */
    .nav-header .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 40px;
        height: 32px;
        border: 1px solid var(--color6);
        border-radius: 4px;
        align-items: center;
        cursor: pointer;
    }

    .nav-header .hamburger span {
        width: 24px;
        height: 2px;
        background-color: var(--color6);
        transition: all .8s ease;
    }

    /* Animation */
    .nav-header .hamburger .move1 {
        rotate: 38deg;
        translate: 0 8px;
    }

    .nav-header .hamburger .move2 {
        translate: -5em;
        background-color: transparent;
    }

    .nav-header .hamburger .move3 {
        rotate: -38deg;
        translate: 0 -8px;
    }


/* ============== Main Navigation */
    .nav-main {
        display: none;
    }
    
    .nav-main.open {    /* Open - Menu Bar */
        display: block;
    }

    ul.menu {
        display: block;
        /* display: flex; */
    }

    ul.menu > li {
        margin-left: 0;
        /* margin-left: 32px; */
    }

    ul.menu li a {
        /* display: flex; */
        /* align-items: center; */
        justify-content: space-between;
        padding: 16px 0;
        /* color: var(--color6); */
        border-bottom: 1px solid var(--color2);
        /* transition: .2s; */
    }

    ul.menu > li:hover > a {
        /* color: var(--color7); */
    }
    
    ul.menu > li > a > i {
        /* margin-left: 8px; */
        /* transition: .4s; */
    }
    
    ul.menu > li:hover > a > i {
        transform: none;
        /* transform: rotate(180deg); */
    }

    ul.menu > li:hover > a > i.rotate {    /* Rotate icon */
        transform: rotate(180deg);
    }




/* ===================== Sub-Menu */
    ul.menu ul {
        display: none;
        position: initial;
        width: 100%;
        background-color: transparent;
        border-top: none;
        border-bottom: 1px solid var(--color2);
        box-shadow: none;
        padding: 0;
        translate: 0;
        opacity: 1;
        visibility: visible;
        transition: .4s;
    }

    ul.menu ul.open {    /* Open - Sub-Menu */
        display: block;
    }

    ul.menu > li:hover ul {
        /* translate: 0; */
        /* opacity: 1; */
        /* visibility: visible; */
    }

    ul.menu ul li a {
        /* padding: 8px 16px; */
        border-bottom: none;
    }

    ul.menu ul li:hover a {
        /* color: var(--color7); */
    }




/* ============== Sub-Menu Bigger */
    ul.menu ul.bigger {
        display: none;
        /* width: 100%; */
        /* left: 0; */
        padding: 8px 16px 0;
    }

    ul.menu ul.bigger.open {    /* Open - Sub-Menu Bigger */
        display: block;
    }

    ul.bigger li {
        margin-right: 0;
        /* border: 1px solid pink; */
    }
    
    ul.bigger li:not(ul.bigger li:last-child) {
        margin-bottom: 40px;
    }

    ul.bigger li div {
        display: flex;
        align-items: center;
        /* margin-bottom: 16px; */
    }

    ul.bigger li i {
        /* font-size: 2.4rem; */
        background-color: var(--color6);
        /* border-radius: 50%; */
        /* padding: 16px; */
        /* color: var(--color2); */
    }
  
    ul.bigger li h3 {
        /* font-weight: normal; */
        /* text-decoration: underline; */
        /* color: var(--color6); */
        margin: 0 8px;
    }

    ul.menu ul.bigger li a {
        justify-content: flex-start;
        /* padding-left: 0; */
    }

    ul.menu ul.bigger li a:hover {
        /* color: var(--color7); */
    }

    ul.bigger li a img {
        /* padding-right: 8px; */
    }


/* ================== Hide Footer */
    footer.hide {
        display: none;
    }
}




@media (max-width: 600px) {
    .center {
        width: 95%;
    } 
}