@charset "utf-8";

*{

    margin         : 0;
    padding        : 0;
    border-width   : 0;
    border-style   : solid;
    list-style     : none;
    list-style-type: none;
    vertical-align : baseline;
    transition     : all 0.25s linear;
}

/***************************************************************************************************
 * Fonte: Open Sans
***************************************************************************************************/
@font-face{

    font-family: 'Open Sans';
    font-style : normal;
    font-weight: 300;

    src: local('Open Sans Light'), local('OpenSans-Light');
    src: url(../fontes/openSans/light/openSans-light.eot);
    src: url(../fontes/openSans/light/openSans-light.eot?iefix) format('embedded-opentype'),
         url(../fontes/openSans/light/openSans-light.woff2) format('woff2'),
         url(../fontes/openSans/light/openSans-light.woff) format('woff'),
         url(../fontes/openSans/light/openSans-light.ttf) format('truetype'),
         url(../fontes/openSans/light/openSans-light.svg#open-sans) format('svg');
}

@font-face{

    font-family: 'Open Sans';
    font-style : normal;
    font-weight: 400;

    src: local('Open Sans Regular'), local('OpenSans-Regular');
    src: url(../fontes/openSans/regular/openSans-regular.eot);
    src: url(../fontes/openSans/regular/openSans-regular.eot?iefix) format('embedded-opentype'),
         url(../fontes/openSans/regular/openSans-regular.woff2) format('woff2'),
         url(../fontes/openSans/regular/openSans-regular.woff) format('woff'),
         url(../fontes/openSans/regular/openSans-regular.ttf) format('truetype'),
         url(../fontes/openSans/regular/openSans-regular.svg#open-sans) format('svg');
}

/***************************************************************************************************
 * Reset
***************************************************************************************************/

.clear{

    height : 0;
    clear  : both;
    display: block;
}

/***************************************************************************************************
 * Site - Header
***************************************************************************************************/

html{

    height         : 100vh;
    display        : flex;
    scroll-behavior: smooth;
}

body{

    color           : #4a4a49;
    font-size       : 15px;
    font-family     : 'Open Sans', sans-serif;
    font-weight     : 300;
    text-align      : center;
    min-width       : 270px;
    margin          : auto;
    padding         : 30px 0;
    background-color: #fefefe;
}

body.azul{

    background-color: #fefeff;
}

body.verde{

    background-color: #fefffe;
}

body.vermelho{

    background-color: #fffefe;
}

header{

    width     : 200px;
    height    : 241px;
    margin    : 0 auto;
    position  : relative;
    z-index   : -1;
}

              img.logo,
body.azul     img.logo,
body.verde    img.logo,
body.vermelho img.logo{

    width     : auto;
    height    : 100%;
    max-height: 241px;
    left      : 0;
    position  : absolute;
}

body.azul     img.logo#__logo-azul,
body.verde    img.logo#__logo-verde,
body.vermelho img.logo#__logo-vermelho{

    opacity: 1;
}

              img.logo#__logo-azul,
              img.logo#__logo-verde,
              img.logo#__logo-vermelho,

body.azul     img.logo#__logo-cinza,
body.azul     img.logo#__logo-verde,
body.azul     img.logo#__logo-vermelho,

body.verde    img.logo#__logo-azul,
body.verde    img.logo#__logo-cinza,
body.verde    img.logo#__logo-vermelho,

body.vermelho img.logo#__logo-azul,
body.vermelho img.logo#__logo-verde,
body.vermelho img.logo#__logo-cinza{

    opacity: 0;
}

/***************************************************************************************************
 * Site - Conteúdo
***************************************************************************************************/

section{

    display   : table;
    text-align: center;
    margin    : 10px auto 0 auto;
}

section#__sobre{

    cursor   : pointer;
    display  : block;
    max-width: 950px;
    margin   : 30px auto 0 auto;
    overflow : hidden;
    height   : 70px;
}

section#__sobre:hover{

    height : 282px;
}

footer{

    margin-top: 25px;
    font-size : 11px;
    color     : #4a4a49;
    opacity   : 0.7;
}

footer img{

    background-color: #4a4a49;
    position        : relative;
    top             : 2px;
    width           : 137px;
    height          : 11px;
}

p{

    margin: 15px 0;
}

div.grupos{

    float  : left;
    display: table;
    cursor : pointer;
    margin : 20px;
}

hr{

    width       : 25%;
    margin      : 0 auto;
    border-color: #c6c6c6;
    padding     : 0 0 5px 0;
    border-width: 0 0 1px 0;
}

section#__sobre hr{

    width                    : 5%;
    margin                   : 20px auto;
    animation-name           : pulsaSobre;
    animation-duration       : 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

div.coloridos         hr,
div.grupos:hover      hr,
section#__sobre:hover hr{

    width       : 100%;
    border-color: #4a4a49;
}

section#__sobre:hover hr{

    width         : 80%;
    animation-name: initial;
}

h1, h2{

    margin-top  : 15px;
    color       : #c6c6c6;
    font-size   : 15px;
    font-variant: small-caps;
    font-weight : 400;
}

h1,
div.coloridos    h2,
div.grupos:hover h2{

    color: #4a4a49;
}

h1{

    margin-top : initial;
    font-size  : 27px;
    font-weight: 300;
}

div.grupos img{

    width  : 50px;
    height : 50px;
    opacity: 0;
}

div.grupos a{

    float          : left;
    color          : #c6c6c6;
    opacity        : 0.7;
    width          : 69px;
    margin         : 10px;
    text-decoration: none;
    text-align     : center;
    display        : block;
}

div.coloridos a,
div.grupos    a:hover{

    opacity: 1;
    color  : #4a4a49;
}

div.coloridos a       img,
div.grupos    a:hover img{

    opacity: 1;
}

span.link-background{

    width           : 50px;
    height          : 50px;
    display         : block;
    margin          : 0 auto 10px auto;
    background-size : 50px 50px;
    background-color: #4a4a49;
}

div.coloridos a       span.link-background,
div.grupos    a:hover span.link-background{

    background-color: #fefefe;
}

span.link-background#__instagram{

    background-image: url(../imagens/logosSocial-sombra/instagram.svg);
}

span.link-background#__pixelfed{

    background-image: url(../imagens/logosSocial-sombra/pixelfed.svg);
}

span.link-background#__behance{

    background-image: url(../imagens/logosSocial-sombra/behance.svg);
}

span.link-background#__linkedin{

    background-image: url(../imagens/logosSocial-sombra/linkedin.svg);
}

span.link-background#__twitter{

    background-image: url(../imagens/logosSocial-sombra/twitter.svg);
}

span.link-background#__facebook{

    background-image: url(../imagens/logosSocial-sombra/facebook.svg);
}

span.link-background#__youtube{

    background-image: url(../imagens/logosSocial-sombra/youtube.svg);
}

span.link-background#__mastodon{

    background-image: url(../imagens/logosSocial-sombra/mastodon.svg);
}

span.link-background#__lastfm{

    background-image: url(../imagens/logosSocial-sombra/lastFm.svg);
}

span.link-background#__pinterest{

    background-image: url(../imagens/logosSocial-sombra/pinterest.svg);
}

span.link-background#__vaojogar{

    background-image: url(../imagens/logosSocial-sombra/vaoJogar.svg);
}

span.link-background#__covid{

    background-image: url(../imagens/logosSocial-sombra/covid.svg);
}

span.link-background#__telegram{

    background-image: url(../imagens/logosSocial-sombra/telegram.svg);
}

img.mais{

    z-index                  : 1;
    position                 : fixed;
    bottom                   : 10px;
    right                    : 10px;
    width                    : 30px;
    height                   : 16px;
    opacity                  : 0;
    animation-name           : fadeout;
    animation-duration       : 1s;
    animation-timing-function: linear;
}

/***************************************************************************************************
 * Animações
***************************************************************************************************/
@keyframes desce{

    000% { bottom: 15px; opacity: 1.0; }
    010% { bottom: 14px; opacity: 0.9; }
    020% { bottom: 13px; opacity: 0.8; }
    030% { bottom: 12px; opacity: 0.7; }
    040% { bottom: 11px; opacity: 0.6; }
    050% { bottom: 10px; opacity: 0.5; }
    060% { bottom: 09px; opacity: 0.4; }
    070% { bottom: 08px; opacity: 0.3; }
    080% { bottom: 07px; opacity: 0.2; }
    090% { bottom: 06px; opacity: 0.1; }
    100% { bottom: 05px; opacity: 0.0; }
}

@keyframes pulsaSobre{

    000% { width: 05%; }
    010% { width: 06%; }
    020% { width: 07%; }
    030% { width: 08%; }
    040% { width: 09%; }
    050% { width: 10%; }
    060% { width: 09%; }
    070% { width: 08%; }
    080% { width: 07%; }
    090% { width: 06%; }
    100% { width: 05%; }
}

@keyframes fadein{

    from { filter: opacity(0); }
    to   { filter: opacity(1); }
}

@keyframes fadeout{

    from { opacity: 1; }
    to   { opacity: 0; }
}

/***************************************************************************************************
 * Mobile
***************************************************************************************************/

@media only screen and (max-width: 1150px){

    div.grupos a{

        width: auto;
    }
}

@media only screen and (max-width: 1050px){

    div.grupos{

        margin: 15px;
    }
}

@media only screen and (max-width: 1010px){

    body{

        width: 270px;
    }

    header{

        position: fixed;
        top     : 0;
    }

                  img.logo,
    body.azul     img.logo,
    body.verde    img.logo,
    body.vermelho img.logo{

        left: 35px; /* (270px - 200px) / 2 */
        top : 30px;
    }

    section#__sobre,
    section#__sobre:hover{

        cursor: initial;
        height: initial;
        margin: 280px auto 0 auto; /* 241px + 30px + 9px segurança */
    }

    section#__sobre       hr,
    section#__sobre:hover hr{

        width         : 60%;
        animation-name: initial;
    }

    section#__section{

        margin-bottom: 280px;  /* 241px + 30px + 9px segurança */
    }

    div.grupos{

        cursor: initial;
        float : initial;
        margin: 30px auto;
    }

    div.grupos a{

        width: 69px;
    }

    img.mais{

        animation-name           : desce;
        animation-iteration-count: infinite;
    }
}

/***************************************************************************************************
 * Cores
 *
 * Cinza         : #4a4a49
 * Cinza claro   : #c6c6c6
 * Azul          : #003e61
 * Azul claro    : #97b3cd
 * Verde         : #5b6d1d
 * Verde claro   : #cad3b1
 * Vermelho      : #b92d19
 * Vermelho claro: #e7b7a3
***************************************************************************************************/
.cinza{

    color: #4a4a49;
}

.azul{

    color: #003e61;
}

.verde{

    color: #5b6d1d;
}

.vermelho{

    color: #b92d19;
}

/***************************************************************************************************
 * Alterações de cor - Claro
***************************************************************************************************/

body.azul a,
body.azul h2{

    color: #97b3cd;
}

body.verde a,
body.verde h2{

    color: #cad3b1;
}

body.vermelho a,
body.vermelho h2{

    color: #e7b7a3;
}

body.azul div.grupos      hr,
body.azul section#__sobre hr{

    border-color: #97b3cd;
}

body.verde div.grupos      hr,
body.verde section#__sobre hr{

    border-color: #cad3b1;
}

body.vermelho div.grupos      hr,
body.vermelho section#__sobre hr{

    border-color: #e7b7a3;
}

/***************************************************************************************************
 * Alterações de cor - Escuro
***************************************************************************************************/

body.azul h1,
body.azul footer,
body.azul a:hover,
body.azul div.coloridos a,
body.azul div.coloridos h2,
body.azul div.grupos:hover h2{

    color: #003e61;
}

body.verde h1,
body.verde footer,
body.verde a:hover,
body.verde div.coloridos a,
body.verde div.coloridos h2,
body.verde div.grupos:hover h2{

    color: #5b6d1d;
}

body.vermelho h1,
body.vermelho footer,
body.vermelho a:hover,
body.vermelho div.coloridos a,
body.vermelho div.coloridos h2,
body.vermelho div.grupos:hover h2{

    color: #b92d19;
}

body.azul div.grupos:hover      hr,
body.azul div.coloridos         hr,
body.azul section#__sobre:hover hr{

    border-color: #003e61;
}

body.verde div.grupos:hover      hr,
body.verde div.coloridos         hr,
body.verde section#__sobre:hover hr{

    border-color: #5b6d1d;
}

body.vermelho div.grupos:hover      hr,
body.vermelho div.coloridos         hr,
body.vermelho section#__sobre:hover hr{

    border-color: #b92d19;
}

body.azul footer img,
body.azul span.link-background{

    background-color: #003e61;
}

body.verde footer img,
body.verde span.link-background{

    background-color: #5b6d1d;
}

body.vermelho footer img,
body.vermelho span.link-background{

    background-color: #b92d19;
}