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

#c1 {
--grad: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
--cor: #008793; 
/* --grad: linear-gradient(to right top, #0d2e5a, #323d88, #6a46b0, #ad42ce, #f726de);
--cor: #323d88; */
/* --grad: linear-gradient(to right top, #a71d97, #eb2277, #ff5f4f, #ffa024, #f4df1e);
--cor: #eb2277;*/
/* --grad: linear-gradient(to right top, #be2c17, #ba6d00, #a5a000, #7ecd55, #1ef4ae);
--cor: #be2c17; */
}
#c2 {
 --grad: linear-gradient(to right top, #0d2e5a, #323d88, #6a46b0, #ad42ce, #f726de);
--cor: #323d88;
}
#c3 {
     --grad: linear-gradient(to right top, #a71d97, #eb2277, #ff5f4f, #ffa024, #f4df1e);
--cor: #eb2277;
}
#c4 {
 --grad: linear-gradient(to right top, #be2c17, #ba6d00, #a5a000, #7ecd55, #1ef4ae);
--cor: #be2c17;
}


* {
    transition: all 1s ease-out;
    -webkit-animation: fadein 300ms ease-in forwards;
    animation: fadein 300ms ease-in forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-left {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slide-right {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-right {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes pulsate-fwd {
        0% {
                -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
                -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
                filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
            }        48% {
                -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
                -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
                filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
            }
        
            49% {
                -webkit-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.75));
                -moz-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.75));
                filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.75));
            }
        
            50% {
                -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.90));
                -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.90));
                filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.90));
            }
        
            51% {
                -webkit-filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
                -moz-filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
                filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
            }
        
            52% {
                -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
                -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
                filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
            }
}

@keyframes pulsate-fwd {
    0% {
            -webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
            -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
            filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
        }
            48% {
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
    -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));    }

    49% {
-webkit-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.75));
    -moz-filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.75));
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.75));    }
        50% {
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.90));
    -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.90));
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.90));        }
    
        51% {
-webkit-filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
    -moz-filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));
    filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.75));        }

    52% {
-webkit-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
    -moz-filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));
    filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.75));    }
}


html {
    font-family: 'PT Serif', serif;
    font-weight: 400;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    background-size: cover;
        background-attachment: fixed;
}

header, footer {
    background-image: var(--grad);
    width: 100%;
    min-height: 100px;
}

header {
    top: 0;
    position: fixed;
    z-index: 999999;
}

.logo {
    margin-top: .7em;
}
.logo svg {
width: 145px;
height: 70px;
    -webkit-animation: pulsate-fwd 15s linear infinite both;
        animation: pulsate-fwd 15s linear infinite both;
        }

footer {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: white;
}

nav {
    font-weight: 300;
}

nav ul,
nav.filtros ul ul {
    list-style-type: none;
    padding-inline-start: 0;
    box-sizing: border-box;
    margin: 0;
}

nav ul a {
    text-decoration: none;
    color: white;
    line-height: 1.6em;
    font-weight: 700;
}

nav ul a:hover {
    color: rgb(220, 249, 4);
}



footer nav ul {
    padding: 16px 0 32px;
}

footer nav ul ul {
    justify-content: flex-start;
}

footer nav ul ul li {
    margin-right: 3em;
}

footer nav.menu-parceiros ul li {
    font-size: .65em;
}

footer nav.menu-rodape ul li {
    font-size: .85em;
}

.logo-mc.MuiSvgIcon-root {
    width: 100px;
    height: 37.4px;
}

.logo-porto.MuiSvgIcon-root {
    width: 62.4px;
    height: 32.1px;
}

.logo-amp.MuiSvgIcon-root {
    width: 43.3px;
    height: 32.1px;
}

.logo-ageas.MuiSvgIcon-root {
    width: 68.9px;
    height: 34.7px;
}

.logo-balleteatro.MuiSvgIcon-root {
    width: 80px;
    height: 15px;
}

.logo-pm.MuiSvgIcon-root {
    width: 42.5px;
    height: 33px;
}

.logo-pch.MuiSvgIcon-root {
    width: 60.3px;
    height: 33px;
}

.logo-pss.MuiSvgIcon-root {
    width: 33.7px;
    height: 33px;
}

.MuiSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
}

.MuiSvgIcon-colorPrimary {
    color: #3f51b5;
}

.MuiSvgIcon-colorSecondary {
    color: #f50057;
}

.MuiSvgIcon-colorAction {
    color: rgba(0, 0, 0, 0.54);
}

.MuiSvgIcon-colorError {
    color: #f44336;
}

.MuiSvgIcon-colorDisabled {
    color: rgba(0, 0, 0, 0.26);
}

.MuiSvgIcon-fontSizeInherit {
    font-size: inherit;
}

.MuiSvgIcon-fontSizeSmall {
    font-size: 1.25rem;
}

.MuiSvgIcon-fontSizeLarge {
    font-size: 2.1875rem;
}

.destaques {
    margin-top: 100px;
    display: grid;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.destaques>div {
    max-width: 1200px;
    display: none;
    height: 400px;
    align-content: flex-start;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow: hidden;
}
.destaques>div.ativo {
display: flex;
}

.eventos {
    height: 1200px;
    background-color: black;
    position: relative;
    z-index: -2;
}

nav.filtros {
    background-color: #333;
    width: 100%;
    color: white;
}

.agenda {
    position: fixed;
    top: 140px;
}

select,
.subs-button {
    padding: .3em 1em;
    margin: .3em .6em;
    border-radius: 2em;
    border: solid 2px darkgray;
    font-family: 'PT Serif', serif;
    background: none;
    color: darkgray;
    appearance: initial;
    cursor: pointer;
    display: list-item;
    font-size: .80em;
}

.subs-button {
    background-color: #128204;
    color: #b5f2aa;
    border-color: #128204;
    text-decoration: none;
    font-size: .85em;
    display: block;
}

.subs-button:hover {
    color: white;
    cursor: pointer;
}

.submenu {
    width: 100vw;
    background-color: #eee;
    position: fixed;
    top: 100px;
    z-index: 997;
}

.submenu {
    width: 100vw;
    background-color: #eee;
    position: fixed;
    top: 100px;
    z-index: 997;
}

.submenu ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.submenu ul li {
    margin: 7px 16px;
    display: flex;
    flex-shrink: 0;
}

.sublinkativo,
.submenu ul li a:hover {
    color: #000;
    text-decoration: underline;
}

section#entrada {
    display: flex;
    justify-content: center;
}

#entrada nav.filtros {
    position: sticky;
    top: 100px;
    display: none;
}

#entrada .grelha {
    display: flex;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
}

#entrada .grelha a {
    text-decoration: none;
    color: #000;
    display: contents;
}

#entrada .grelha article:hover {
    background-color: white;
    cursor: pointer;
}

#entrada .grelha article {
    min-width: 100px;
    max-width: 100%;
    display: flex;
    flex-flow: column;
        background-color: rgb(255 255 255 / 80%);
            padding: 1.6%;
}

#entrada .grelha article h1 {
    margin-block-start: 0;
    margin-block-end: 0;
}

#entrada .grelha article.mes {
    color: white;
    background-image: var(--grad);
}

article .botoes div {
    display: grid;
    padding: .32em;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
}

#entrada .grelha article .botoes {
    display: flex;
    justify-content: space-around;
}

.destaques>div article {
    padding: 1em 2em 0 0;
    display: flex;
    opacity: 0;
    align-content: flex-end;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
    color: white;
    aspect-ratio: 1/1;
    -webkit-animation: slide-left 1s ease-out forwards;
        animation: slide-left 1s ease-out forwards;
        overflow: hidden;
}
.destaques>div article:nth-child(2) {
        animation-delay: .35s;
}
.destaques>div article:nth-child(3) {
    animation-delay: .7s;
}

.destaques>div article .contentor {
    display: block;
    opacity: 0;
        -webkit-animation: slide-right 1s ease-out forwards;
            animation: slide-right 1s ease-out forwards;
                animation-delay: 1s;
}

.destaques>div article .contentor .botao {
    float: right;
        padding: 1em 0 0;
            margin-top: -2em;
}

.destaques>div article .titulo {
    font-size: 24pt;
    line-height: 1.3em;
    font-weight: 700;
    display: inline;
    padding: 0.1em .5em 0.16em 1rem;
    background-color: var(--cor);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.destaques>div article .datas {
    font-size: 16pt;
    line-height: 1.3em;
    display: inline;
    padding: 0.16em .5em 0.16em 1rem;
    background-color: var(--cor);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.destaques>div article>div {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.disco {
    max-width: 400px;
    margin-bottom: 2em;
}

.conteudo {
padding: 1em 32px 2em;
max-width: 900px;
margin: 8em auto;
color: white;
background-color:rgba(0, 77, 122, .9);
    display: flex;
        flex-wrap: wrap;
            justify-content: space-between;
}
.conteudo p {
font-size: 120%;}

@media screen and (orientation:portrait) {

body {
        background-image: url('../ims/mantras-fundo-v.jpg');
        }
    #menu-topo ul li.logo {
        position: fixed;
        margin-left: -50%;
        width: 100vw;
        left: 50%;
        height: 100px;
        top: 50px;
        margin-top: -50px;
        text-align: center;
        padding: 10px;
        transform: none;
        opacity: 1;
    }


    .menu {
        padding: 0;
        margin: 0;
        position: fixed;
        left: -100vw;
        z-index: 998;
    }

    .menu>li {
        margin: 0;
        padding: 1em 32px;
        transform: translateX(200vw);
        transition: all .1s ease-in;
        opacity: 0;
        width: 100vw;
        box-shadow: 0 0 0.2em 0 rgb(0 0 0 / 50%);
    }

    .menu>li:first-child {
        padding-top: 96px;
    }

    #menu-topo.ativo .menu>li {
        transform: translateX(100vw);
        transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        ;
        opacity: 1;
        background-color: rgb(9, 9, 121);
    }

    #menu-topo.ativo .menu>li:nth-child(4) {
        transform: none;
    }

    #menu-topo.ativo .menu>li:first-child,
    #menu-topo .menu>li:last-child {
        transition-delay: .01s;
    }

    #menu-topo.ativo .menu>li:nth-child(2),
    #menu-topo .menu>li:nth-child(6) {
        transition-delay: .08s;
    }

    #menu-topo.ativo .menu>li:nth-child(3),
    #menu-topo .menu>li:nth-child(5) {
        transition-delay: .16s;
    }

    #menu-topo.ativo .menu>li:nth-child(5),
    #menu-topo .menu>li:nth-child(3) {
        transition-delay: .24s;
    }

    #menu-topo.ativo .menu>li:nth-child(6),
    #menu-topo .menu>li:nth-child(2) {
        transition-delay: .32s;
    }

    #menu-topo.ativo .menu>li:nth-child(7),
    #menu-topo .menu>li:nth-child(1) {
        transition-delay: .40s;
    }

    .line {
        height: 3px;
        width: 24px;
        margin: 5px auto;
        border-radius: 2px;
        -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .menu-button {
        padding: 8px;
        border-radius: 50%;
        /* box-shadow: 0 0 0.2em 0 rgb(0 0 0 / 70%); */
        border: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 16px;
        position: fixed;
        z-index: 999;
        background: none;

    }

    .menu-button>.hamburger {
        width: 24px;
        height: 24px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    #menu-topo.ativo .menu-button>div {
        outline: none;
    }

    #menu-topo.ativo .menu-button>.hamburger>.line:nth-child(1),
    #menu-topo.ativo .menu-button>.hamburger>.line:nth-child(1) {
        -webkit-transform: rotate(45deg) translate(3px, 6px);
        transform: rotate(45deg) translate(3px, 6px);
    }

    #menu-topo.ativo .menu-button>.hamburger>.line:nth-child(2),
    #menu-topo.ativo .menu-button>.hamburger>.line:nth-child(2) {
        -webkit-transform: rotate(-45deg) translate(3px, -6px);
        transform: rotate(-45deg) translate(3px, -6px);
    }

    .line {
        background-color: whitesmoke;
    }

    #menu-topo ul ul {
        display: none;
    }

    nav.filtros ul ul {
        padding: 7px 0;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }

    nav.filtros ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .subs-button {
        margin: calc(7px + .3em) .3em;
    }

    footer,
    .nav.filtros {
        position: static;
    }

    footer nav ul {
        display: flex;
        flex-wrap: wrap;
        padding: 16px;
        margin: 0;
        justify-content: space-between;
    }

    .menu-rodape li {
        margin: 16px 0;
    }

    .submenu ul {

        justify-content: flex-start;
    }

    #entrada .grelha {
        flex-flow: column;
    }

    #entrada .grelha article {
        margin-bottom: .16em;
        background-color: rgb(255 255 255 / 80%);
    }

}

@media screen and (orientation:landscape) {

body {
        background-image: url('../ims/mantras-fundo-h.jpg');
        }

    nav#menu-topo ul ul,
    nav#menu-topo ul ul>ul {
        display: none;
        padding: 0 1em .7em;
    }

    nav#menu-topo ul {
        position: fixed;
    }
nav#menu-topo>ul>li:hover {
transform: scale(105%);
}
    nav#menu-topo ul li:hover>ul,
    nav#menu-topo ul ul li:hover>ul {
        display: block;
        background-color: var(--cor);
    }

    nav#menu-topo ul li:hover ul ul {
        padding: 0;
        margin-left: 1em;
    }

    nav>ul {
        display: flex;
        justify-content: space-around;
        width: 100%;
        align-items: center;
        justify-items: center;
        max-width: 1200px;
        margin: auto;
    }

    nav.filtros ul ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        justify-items: center;
    }

    #menu-topo>ul {
        position: fixed;
        left: 0;
        right: 0;
        padding: 7px;
        z-index: 998;
    }


    footer nav ul {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        justify-items: center;
        margin: auto;
        flex-wrap: wrap;
    }

    footer nav>ul>li {
        padding: 0 1.5em;
    }

    .menu-button {
        display: none;
    }

    nav.filtros {
        position: fixed;
    }

    nav.filtros ul ul {
        padding: 7px;
        justify-content: center;
    }

    .submenu ul {
        justify-content: center;
    }

    #entrada .grelha {
        align-content: flex-start;
    }

    #entrada .grelha article {
        width: 16.52%;
        margin-right: 2px;
        margin-top: 2px;
        aspect-ratio: 1 / 1;
        justify-content: space-between;
    }
    #entrada .grelha article:nth-child(6n) {
    margin-right: 0;}

    .destaques div article {
        min-width: 33%;
    }
        .conteudo div {
            flex: 1 2 40%;
        }
        .conteudo>div:first-child {
        margin-right: 2em;}
}

@media screen and (orientation:landscape) and (max-width:840px) {
    * {
        font-size: 95%;
    }
}