*{
    margin:0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
}


body{
    background-color: rgb(209, 213, 216);
    color: white;
    width: 1000px;
    margin: auto;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 50%);
}

.titleimage{
   margin-bottom: 0;
}

a{text-decoration: none;}

.menu-total{
    position: sticky;
    top: 0;
    background: #CD50DB;
    padding: 10px 0px;
    text-align: center;
    margin-bottom: 5px;
}

.menu li:hover{
    background-color: #8b0997a2;
}

.menu li ul{ /*menu interativo*/
    position: relative;
    top: 558px;
    left: 669px;
    background-color: #cb06dda2;
    display: none;
    width: 128px;
}

.menu li:hover ul, .menu li.over ul{
    display: none; /*menu interativo - on/off*/
}

.menu li ul li{
    display: block;
    width: 48px;
    padding-right: 40px;
}/*menu interativo*/

.menu li ul li ul li{
    display: block;
}

ul#idioma{
    top: 558px;
    left: 993px;
    width: 137px;
}

ul#idioma li{
    padding-right: 49px;
}


.menu li {
    display: inline-block;
    padding: 5px 30px;
    border-right: 0px dashed #FFF;
    transition: background-color 0.7s;
}

.menu li a {
    color: #FFF;
    text-shadow: 0px 0px 1px #fff;
}

.toggle-menu{
    position: relative;
    float: left;
    display: none;
}



div.global{
    height: auto;
}



.conteudo-pages {
    width: 900px;
    height: auto;
    margin: auto;
    background-color: white;
    margin: 0px auto;
    display: inline-flex;
}

.frame-discord{
    width: 250px;
    height: 330px;
    margin: 30px 0px;
}

.box-01-total{
    width: 6000px;
    margin: 0;
}

.box-01{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
}

.box-01{
    font: bold  30px/normal "Courier";
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 3px rgb(0, 0, 0);
}

.titulo-destaque{
    font: bold  30px/normal "Courier";
    margin: 0px auto 20px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 3px rgb(0, 0, 0);
}

p#titulo{
    border-bottom:5px double #cb06dda2;
    width: 167px;
    margin: auto;   
}

.box-01 .item {
    margin: 40px;
    display: inline-block;
    position: relative;
}

.box-01 .item .titulo {
    background: #cb06dda2;
    font: 12px/normal "Courier";
    padding: 5px 20px;
    left: -10px;
    top: 10px;
    color: rgb(255, 255, 255);
    letter-spacing: 1px;
    position: absolute;
}

.box-01 .item .entrar {
    background: #cb06dda2;
    font: 12px/normal "Courier";
    left: -20px;
    top: 40px;
    position: absolute;
    box-shadow: 0px 0px 2px 0px #666;
}

.box-01 .item .entrar a {
    padding: 5px 20px;
    color: #FFF;
    letter-spacing: 1px;
    display: block;
}

.box-01 .item img{
    width: 200px;
    height: 115px;
}

section{
    margin-bottom: 5px;
    background-color: white;
    color: black;
    text-align: center;
}

.rodape-total {
    background: #cb06dda2;
    padding: 10px 0px;
    text-align: center;
    color: #FFF;
}

.rodape > div {
    padding: 0px 80px;
    vertical-align: middle;
    display: inline-block;
}

footer#rodape{
    clear: both;
}

.rodape #dev{
    color: black;
    font-size: 11px;
}

div#guias{
    height: 100%;
}

div#guias-bloco{
    display: inline-block;
    width: 900px;
    margin: 25px 0px 25px 0px;  
}

div#guias-texto{
    display: inline-block;
    width: 500px;
    float: left;    
}

div#guias-img{
    display: inline-block;
    margin-left: 75px;
}

h1#guias{
    color: #000000;
    text-decoration: none;
    text-align: left;
}
h1#guias :hover{
    text-decoration: underline;
    transition: 1s;
}
p#guias{
    text-decoration: none;
    text-align: justify;
    font-size: 10ptS;
}

p#mais-detalhes{
    text-align: right;
}

/*modal idioma*/



.modal-idioma{
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: grid;
    top: 0px;
    left: 0px;
    place-content: center;
    background-color: #00000029;
    visibility: hidden;
    opacity: 0;
    z-index: 4;

}

.modal-idioma:target{
    visibility: visible;
    opacity: 1;
    transition: .5s;
}

.modal-conteudo{
    background-color: #fff;
    width: 200px;
    height: 150px;
    padding: 15px 15px 7px;
    border-radius: 4px;
    border-top: 25px solid #cb06dda2;
    
}

.box-btn{
    width: auto;
    height: auto;
    position: relative;
    top: -47px;
}

.btn-modal{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: white;
    border-radius: 4px;
}

.btn-modal ul{
    margin: auto;
}

.btn-modal li{
    list-style: none;
    background-color: #cb06dda2;
    margin: 20px 0px;
    padding: 5px 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 4px;    
}

.btn-modal li:hover{
    background-color: #8b0997a2;
    transition: 1s;
}

.btn-modal a{
    text-decoration: none;
    color: #fff;
}

.fechar-modal{
    position: relative;
    color: #fff;
    top: -45px;
    right: -104px;
    font-size: 32px;
    padding: 2px;
}

/*modal detalhe staff*/


.modal-detalhe{
    width: 100vw;
    height: 100vh;
    position: fixed;
    display: grid;
    place-content: center;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.227);
    visibility: hidden;
    opacity: 0;
    z-index: 4;
}

.modal-detalhe:target{
    visibility: visible;
    opacity: 1;
    transition: .5s;
}

.modal-conteudo.detalhe{
    height: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.box-staf{
    width: auto;
    height: auto;
}

.fechar-modal-detalhe{
    position: relative;
    color: #fff;
    top: 34px;
    right: -104px;
    font-size: 32px;
    padding: 2px;
}


section.disqus{
    height: auto;
    margin: 0;
    padding: 0;
}

#dsq-app3375{
    width: 800px;
}

/*
@media screen and (max-width: 768px) {


    body{
        background-color: black;
        width: auto;
    }

    .toggle-menu{
        display: block;
        padding: 5px;
        font-size: 18pt;
        top: -7px;
    }

    .menu-total{
        display: flex;
        align-items: center;
    }
    
    .toggle-menu{
        background-color: transparent;
        color: white;
        border-style: none;
        padding: 0px;
        z-index: 3;
    }

    .toggle-menu:hover{
        cursor: pointer;
        background-color: #8b0997a2;
    }

    .menu{
        display: flex;
    }

    .menu ul{
        height: 30px;
        flex-direction: row;
        text-align: center;
        z-index: 4;
    }

    .menu li{
        position: absolute;
        width: auto;
        height: 100;
        display: block;
        background-color: #cb06dda2;
    }

}
*/