@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;900&family=Roboto+Condensed:wght@300;700&display=swap');

body {
    margin: 0;
    }

a { 
    text-decoration: none;
    color:aquamarine;
    }

sup { 
    font-size: 0.75em;
    color: #c1c1c1;
    }

.containner {
    padding: 15px 40px 40px 40px;
    display: block;
    max-width: 1088px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    }

.banner {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    }

#mn1-op1, #mn1-op2, #mn1-op3, #mn1-op4, #mn1-op5, #mn2-op1, #mn2-op2, #mn2-op3, #mn2-op4, #mn2-op5 { 
    display: none;
    visibility: visible;
    width: 100%;
    }

.show-flex { 
    display: flex !important;
    }

nav > ul {
    list-style: none;
    display: flex;
    padding: 0;
    margin-top: 25px;
    }

nav > ul > li { 
    display: inline-flex;
    /*
    width: calc(19%);
    height: 104px;
    */
    width: 208px;
    height: 104px;
    padding: 0;
    margin: 0 12px 0 0;
    background-color: #1BB4BA;
    border: 0;
    float: left;
    align-items: center;

    transition: all 200ms linear;

    }

.mn2-op3, .mn2-op4, .mn2-op5 { background-color: #A9ABAE;}

nav > ul > li:last-child {
    margin: 0;
    }

nav > ul > li > a {
    width: 208px;
    height: 104px;
    display: block;
    position: relative;           
    cursor: pointer;
    }

nav > ul > li:hover { background: #4E5A62; }
nav > ul > li:hover .mn-icon { 
    opacity: 0.8;
    }
nav > ul > li:hover .mn-content {
    opacity: 1; 
    color: #9c9c9c;
    animation: mFb 200ms ease-in-out;
    }
nav > ul > li:hover .icon-img {
    width: 100%;
    height: 100%;
    opacity: 0.25;
    background-position: -20px;
    transition: all 100ms linear;
    }

/*nav > ul > li:focus { background: #4E5A62; }*/
/*nav > ul > li:focus-within { background: #4E5A62; height: 124px; }*/
.li-hover {
    background: #4E5A62; height: 124px;
    }


@keyframes mFb {
    from {
        opacity: 0;
        transform: translateY(20%);
        }
    to {
        opacity: 1;
        transform: translateY(0%);
        }          
    }


.mn-icon {
    display: flex;
    position: absolute;
    width: 70px;
    height: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    }

.mn-icon > img {         
    width: 40%;
    height: 40%;
    }

.mn-content {
    display: flex;
    position: absolute;
    color: #FFFFFF;
    width: 138;
    height: 100%;
    left: 70px;
    align-items: center;
    }

.mn-content > div > h2 {
    font-family: "Roboto Condensed";
    font-weight: 700;
    font-size: 1em;
    margin: 0;
    justify-content: left;
    }

.mn-content > div > h3 {
    font-family: "Fira Sans";
    font-weight: 200;
    font-size: 0.6em;
    margin: 0;
    }

.boletim > img {
    background: url("images/icon-boletim.svg") no-repeat center;
    background-size: contain;
    }

.protocolo > img {
    background: url("images/icon-protocolo.svg") no-repeat center;
    background-size: contain;
    }

.legisla > img {
    background: url("images/icon-legisla.svg") no-repeat center;
    background-size: contain;
    }

.repasse > img {
    background: url("images/icon-repasse.svg") no-repeat center;
    background-size: contain;
    }

.contremerg > img {
    background: url("images/icon-contremerg.svg") no-repeat center;
    background-size: contain;
    }

.execorc > img {
    background: url("images/icon-execorc.svg") no-repeat center;
    background-size: contain;
    }

.fiscaliza > img {
    background: url("images/icon-fiscaliza.svg") no-repeat center;
    background-size: contain;
    }

.oquee > img {
    background: url("images/icon-oquee.svg") no-repeat center;
    background-size: contain;
    }

.prevenir > img {
    background: url("images/icon-prevenir.svg") no-repeat center;
    background-size: contain;
    }

.pergresp > img {
    background: url("images/icon-pergresp.svg") no-repeat center;
    background-size: contain;
    }

.op-content {
    position: relative;
    top: -17px;
    min-height: 100px;
    background: #4E5A62;
    color: #FFFFFF;
    }
.op-content > div {
    /*padding: 30px 30px 30px 30px;*/
    margin: 25px 0 25px 25px;
    }
.op-title  { 
    border-right: solid 2px #999;
    padding-right: 25px;
    font-family: "Fira Sans";
    font-weight: 900;
    font-size: 1.25em;
    min-width: 172px;
    }

.op-conteudo {
    font-family: "Roboto Condensed";
    font-weight: 300;
    font-size: 1.0em;
    margin-right: 45px !important;
    /*overflow: hidden;*/
    }

.iframe { 
    width: 794px;
    height: 404px;

    }

.iframe:before {
    content: '';
    background: url("images/cover-video-1.png");
    width: 794px;
    height: 404px;
    display: block;
    }

.iframe2:before{
    background: none;
    width: 0;
    height: 0;
    display: none;
    }

.iframe:hover {
    opacity: 0.8;
    cursor: pointer;
    }

.iframe > iframe {
    display: none;
    }

.iframe-contremerg, .iframe-legislacao { 
    display: none;
    visibility: hidden;
    height: 100%;
    padding-top: 20px;
    }
    

.op-btn {
    background: rgb(120, 120, 120);
    padding: 10px 10px 10px 10px;
    margin-right: 10px;
    cursor: pointer;
    }
.op-btn:hover {
    background: #A9ABAE;
    }
.op-btn-active {
    padding: 10px 10px 20px 10px;
    }

.msg-opening-ce, .msg-opening-le {
    visibility: hidden;
    animation: opening 500ms linear infinite alternate;
    }

@keyframes opening {
from { color: #FFFFFF; }
to   { color: aqua; }
    }