body{  background: #fcfcfc; }

#box-login{ display: inline-block; border: 1px solid #dddddd; border-radius: 2px; padding: 20px 40px; background: #f0f0f0; }

#topo{ display: block; padding: 10px; background: #000000; }

#opcoes{ display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; }
.opcao{ float: left; width: 23%; margin-right: 2%; border: 1px solid #dadada; border-radius: 2px; transition: 0.5s all; margin-bottom: 20px; }
.opcao:hover{ background: #ededed; box-shadow: 0px 0px 4px 1px #dadada; transition: 0.5s all; }
.opcao:nth-of-type(4n+0){ margin-right: 0; }

.opcao-descricao{ background: #e5e5e5; padding: 10px; }

#imagens{ list-style:  none; display: inline-block; margin: auto; }
#imagens li{ display: inline-block; float: left; margin-right: 10px; margin-bottom: 10px; }
.box-imagem{ box-sizing: border-box; border: 1px solid #ededed; padding: 10px; transition: 0.5s all; }
.box-imagem:hover{ background: #dadada; transition: 0.5s all; }

.inativo{ background-color: #fc9c8b; color: #ffffff; }

#lista-conhecimentos{  }

@media(max-width: 1280px){

    .opcao{ width: 32%; margin-right: 2%; }
    .opcao:nth-of-type(4n+0){ margin-right: 2%; }
    .opcao:nth-of-type(3n+0){ margin-right: 0; }

}



@media(max-width: 960px){

    .container{ width: 90%; }

    .opcao{ width: 48%; margin-right: 2%; }
    .opcao:nth-of-type(3n+0){ margin-right: 2%; }
    .opcao:nth-of-type(2n+0){ margin-right: 0; }

}



@media(max-width: 440px){

    #topo .container{ text-align: center !important; }

    .opcao{ width: 100%; }
    .opcao:nth-of-type(2n+0){ margin-right: 0%; }


}