* {margin: 0; padding: 0;  
   outline: none;
   font-weight: 300;
   box-sizing: border-box;    
   font-family: 'Poppins', sans-serif;
}
/*a{
  text-decoration:none
}
a:hover{
  text-decoration:none
}
a:link {
   color: red;
}

/* link que foi visitado
a:visited {
    color: red;
}


a:hover {
    color: #000000;
}
#cabecalho_mobile{
  display:none;
  width: 100%;
  height: 100px;
  padding: 1%;
  background-color: red;
  position: relative;
  float: left;
}

a:active {
    color: blue;
} */

#cabecalho_mobile{
  display:none;  
}

  #lad_cab_esquerdo{
    width: 10%;
    height: 100%;
    padding: 1%;
    background-color: #556B2F;
    position: relative;
    float: left;
  }
  #lad_cab_centro{
    width: 80%;
    height: 100%;
    padding: 1%;
    background-color: #FFD700;
    position: relative;
    float: left;
  }
  #lad_cab_direito{
    width: 10%;
    height: 100%;
    padding: 1%;
    background-color: #F4A460;
    position: relative;
    float: left;
  }

#lado_esquerdo{
  width: 20%;
  height: 2150px;
  padding: 1%;
  background-image: url("background.jpg");
  background-color:#FF6347;
  position: relative;
  float: left;
}
  #logo{
    text-decoration: none;
    font-size: 35px;
    color: yellow;
    text-align: center;
    font-family: 'Satisfy', cursive;    
    cursor: pointer;
    transition: .2s;
  }
   #logo: link{
    font-size: 35px;
   }
  #logo:hover{
   /*box-shadow: 0px 0px 8px yellow;*/
   transform: scale(1.05);
   font-size: 38px;
 }
 
    #buscas{
    width: 100%;
    height: 6%;
    padding: 1%;
    font-size: 12px;
    text-align: justify;  
    background-color:;
    color:;
    }
    #busca_input{
    width: 70%;
    height: 70%;    
    font-size: 12px;    
    text-align: justify;
    }
    #busca_botao{ 
    color: white;  
    text-align: center;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600px; 
    border:0;
    cursor: pointer;
    transition: .2s;
    }
    #busca_botao:hover{ 
    transform: scale(1.05);
    font-size: 18px;
    color:#000000;
    font-weight: 900px; 
    }
    #categorias2{
      width: 100%;
      height: 17%;
      background-color:;
      opacity:;
      border: 1px solid #fff;
      margin-top: 2%;
      margin-bottom: 15%;
      padding: 2%;
    }
    #categorias{
      width: 100%;
      height: 20%;
      margin: 1%;
      background-color:; 
    }
    .cattt{
      width: 100%;
    }


    /* Checkbox Hack */
#toggle-1 {
   display:none;
}

label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  cursor: pointer;
  padding: 5px;
}

/* CSS padrão da div */
#mostra {
   display:none;
}

/* CSS quando o checkbox está marcado */
#toggle-1:checked ~ #mostra {
   display:block;
}



#lado_esquerdo a{
  color:yellow;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: .3s;
}

#lado_esquerdo nav.menu-desktop a:hover{
  font-weight: 900;
  color:#000;
  transform: scale(1.09);
}
#lado_esquerdo nav.menu-desktop ul{
  list-style-type: none;  
}
#lado_esquerdo nav.menu-desktop ul li{
  display: inline-block;  
  padding: 0 40px;
}

.menu-desktop{  
  background-color:;
  width: 100%;
  height: 40%;
}

#dados_desktop{
  width: 80%;
  height: 25px; 
  padding-top: 1%;
  padding-bottom: 0.7%;
  padding-right: 10%;
  text-align: right;
  font-family: 'Satisfy', cursive;  
  animation:bg 7s ease-in-out infinite alternate;
  background-color:;
  position: relative;
  float: left;
}

@keyframes bg {
  25% {
    color: white;
  }

  50% {
    color: red;
  }

  75% {
    color: black;
  }


100%{
  color: yellow;
}}


#centro{
  width: 70%;
  height: 1100px;
  padding: 1%;
  background-color:;
  position: relative;
  float: left;
}

  #conteudo{
    width: 100%;
    height: 28%;
    padding: 1%;
    margin: 1%;  
    color:black;
    background-color:;
    position: relative;
    float: left;
    cursor: pointer;
    transition: .2s;
  }

  #conteudo:link{
    color: black;
  }
  #conteudo:hover{
   background-color:#FFD700; 
   box-shadow: 0px 0px 8px  #FFFF00;
   transform: scale(1.05);
   color:white;
 }

  #conteudo #titulos{
    width: 100%;
    height: 20%;
    padding: 1%;
    color: red;
    font-weight:900;
    font-size: 15px;
    background-color: ;
    position: relative;
    float: left;
  }
  #descricao{
    width: 70%;
    height: 90%;
    padding: 3%;
    text-align: justify;
    color:black;
    background-color:;
    position: relative;
   float: left;

  }
  #imagem_artista{
    width: 30%;
    height: 90%;    
    background-color:red;
    align-items:right;
    position: relative;
    float: left;
  }
  #endereco1{
    width: 50%;
    height: 10%;
    font-size: 10px;
    padding: 1%;
    background-color:;
    position: relative;
    float: left;
  }
  #endereco2{
    width: 50%;
    height: 10%;
    padding: 1%;
    background-color: ;
    text-align: right;
    position: relative;
  float: left;
  }
  #linha{
    width: 98%;
    height: 2px;
    margin:2%;
    background-color: red;
    position: relative;
    float: left;
  }


  /*   cadastro  --------------------------------------------------- 

nome_usuario, email_usuario, telefone1, telefone2, estado, 
cidade, facebook, instagram, telegram, site, descricao, descricao_completa, 
foto_usuario, salvar, form_cadastro
 */
 /*   cadastro  --------------------------------------------------- */

#form_cadastro{
  width:80%;
  height:95%;
  padding: 2%; 
  margin: 0 auto;
  background-color:;
  text-align: center;
}
#nome_usuario, #email_usuario, #facebook, #instagram, #telegram, #site{
  width: 84%;
  height: 4%;
  padding: 2%;
}
#telefone1, #telefone2, #estado, #cidade{
  width: 41.5%;
  height: 3%;
  padding: 2%;
}


#caixas{
  width: 85%;
  height: 16%;
  background-color: ;
  padding: 2%;
  margin-left: 8%;
  text-align: left;
}

#caixa_interna{
  width: 40%;
  height: 100%;
  background-color:;
  margin: 1%;
  float: left;
}



#localidade{
  width: 84%;
  height: 3%;
  padding: 2%;
}

#salvar{
  width: 20%;
  height: 5%;
  border:none;
  cursor: pointer;
  background-color: #FF4500;
}
#salvar:hover{ 
   transform: scale(1.05);
   font-size: 14px;
   color:#000000;
  font-weight: 900px; 
 }

  /*   cadastro  --------------------------------------------------- */




  /*   visualização do artista--------------------------------------------------- */

  #lado_esquerdo_visual{
  width: 20%;
  height: 1400px;
  padding: 1%;
  background-image: url("background.jpg");
  background-color:;
  position: relative;
  float: left;
}

   #lado_esquerdo_visual a{
   color:yellow;
   font-size: 17px;
   text-decoration: none;
   display: inline-block;
   transition: .3s;
}
#lado_esquerdo_visual nav.menu-desktop a:hover{
  font-weight: 900;
  color:#000;
  transform: scale(1.09);
}
#lado_esquerdo_visual nav.menu-desktop ul{
  list-style-type: none;  
}
#lado_esquerdo_visual nav.menu-desktop ul li{
  display: inline-block;  
  padding: 0 40px;
}

  #centro_visual{
  width: 65%;
  height: 1000px;
  padding: 1%;
  background-color:;
  position: relative;
  float: left;
}

  #conteudo_visual{
    width: 100%;
    height: 100%;
    padding: 1%;
    margin: 1%;  
    background-color:;
    position: relative;
    float: left;
    cursor: pointer;
    transition: .2s;
  }

  #conteudo_visual #titulos_visual{
    width: 100%;
    height: 5%;
    padding:;
    color: red;
    font-weight:900;
    font-size: 15px;
    text-align: center;
    background-color:;
    position: relative;
    float: left;
  }
  #descricao_visual{
    width: 60%;
    height: 100%;
    padding: 3%;
    text-align: justify;
    background-color:;
    position: relative;
    float: left;
  }
  #imagem_artista_visual{
    width: 40%;
    height: 38%;       
    margin-top: 9%;
    background-color:;
    align-items:right;
    position: relative;
    float: left;
  }
  #endereco1_visual{
    width: 40%;
    height: 10%;
    margin-top: 4%;
    padding-top:1%;
    text-align: center;
    color: #1E90FF;
    background-color:;
    position: relative;
    float:left;
  }
  #endereco2_visual{
    width: 40%;
    height: 20%;
    margin-top: 5%;
    text-align: center;    
    font-size: 16px;
    background-color:;    
    position: relative;
    float: left;
  }

  .btn-social button{
  width:40px;
  height:40px; 
  background-color:;
  font-size: 18px;
  cursor:pointer;
  margin:11px 5px;
  transition: .2s
}

    .btn-social button:hover{
   box-shadow: 0px 0px 8px red;
   transform: scale(1.05);
   font-size: 22px;
 }


  }
  #linha{
    width: 98%;
    height: 5px;
    margin:2%;
    background-color: red;
    position: relative;
  float: left;
  }


#galeria{
  width: 100%;
  height:25%;
  background-color:;
  padding: 1%;
  margin: 1%;  
  position: relative;
  float: left;
}

.galerias{
  width: 30%;
  height: 90%; 
  position: relative;
  cursor: pointer;
  transition: .2s;
  float: left;
  margin: 1.5%;
}

 .galerias:hover {
   color:red;
   box-shadow: 0px 0px 8px red;
   transform: scale(1.05);
 }


.titulo_galeria{
  padding-top: 2%;
  text-align: center;
}



  /* fim de visualização do artista-------------------------------------------------*/


#lado_direito{
  width: 10%;
  height: 1120px;
  padding: 1%;
  background-color:;
  position: relative;
  float: left;
}

#rodape{
  width: 100%;
  height: 450px;
  padding: 1%;
  background-color:#C0C0C0;
  position: relative;
  float: left;
}
#titulos_rodape{
  text-align: center;
  font-family: sans-serif;
  font-weight: 400;
  font-style: normal;
}
  #numeracao_paginas{
  width: 100%;
  height: 50px;   
  display: flex;
  margin-bottom: 2%;
  flex-direction: row;
  justify-content: center;
  background-color:;
  position: relative;
  float: left;
  }
  
  #rodape_esquerdo{
  width: 31%;
  height: 300px;
  padding: 2%;
  margin: 1%;
  background-color:#C0C0C0;
  border: 1px solid black;
  cursor: pointer;
  transition: .2s;
  position: relative;
  float: left;
  }
  #rodape_centro{
  width: 32%;
  height: 300px;
  padding: 2%;
  margin: 1%;
  background-color:#C0C0C0;
  border: 1px solid black;
  cursor: pointer;
  transition: .2s;
  position: relative;
  float: left;
  }
  #rodape_direito{
  width: 31%;
  height: 300px;
  padding: 2%;
  margin: 1%;
  background-color:#C0C0C0;
  border: 1px solid black;
  cursor: pointer;
  transition: .2s;
  position: relative;
  float: left;
  }

  #rodape_esquerdo:hover, #rodape_centro:hover, #rodape_direito:hover {
   color:white;
   box-shadow: 0px 0px 8px red;
   transform: scale(1.05);
 }

#formulario_login{
  width:80%;
  height:95%;
  padding: 2%; 
  margin: 0 auto;
  background-color:;
  text-align: center;
  }

  #login_usuario, #login_senha{
   width: 80%;
   height: 2%;
   padding: 2%;
  }

 #desenvolvedor{
  width: 100%;
  height: 5%;
  text-align: center;
  color: #fff;
  background-color: red;
  position: relative;
  float: left;
 }

 /* --------------------------------         900 a 1200          -------------------------------------------*/
@media screen and (max-width: 900px) and (max-height: 1200px){
    #logo{
    font-size: 35px;
    
   }
   #logo:hover{
   font-size: 38px;
   }
 
   #descricao{
   font-size: 14px;
  }
  #rodape{  
  height: 450px;
 }
  #rodape_esquerdo{
  height: 350px;
  }
  #rodape_centro{
  height: 350px;
  }
  #rodape_direito{
  height: 350px;  
  }
}

 /* --------------------------------         430 a 900          -------------------------------------------*/
@media screen and (max-width: 414px) and (max-height: 930px){
 #cabecalho_mobile{  
  display: block;
  width: 100%;
  height: 180px;
  padding: 1%;
  background-color: red;
  background-image: url("background.jpg");
  position: relative;
  float: left;
}


#dados_desktop{
 display:none;
}

#dados_mobile{
  display:none;
  width: 100%;
  height: 28%; 
  padding-top:;
  padding-bottom: ;
  text-align: center;
  font-size: 15px;
  font-family: 'Satisfy', cursive;  
  background-color:;
  animation:bg 7s ease-in-out infinite alternate;  
  color: white;
  position: relative;
  float: left;
}

@keyframes bg {
  25% {
    color: white;
  }

  50% {
    color: red;
  }

  75% {
    color: black;
  }


100%{
  color: yellow;
}}



#buscas_mobile{
  width: 100%;
  height: 50%;
  background-color:;
  position: relative;
  float: left;
}
#busca_input{
  width: 80%;
  height: 50px;
  padding: 2%;
  font-weight: 1000;
  background-color:;
  margin: 2%;
  margin-bottom: 5%;
  margin-left: 5%;
}

#busca_botao{
  font-size: 28px;
}

#busca_botao:hover{
  font-size:32px;
}

#logo{
  font-size: 50px;
  width: 20%;
  padding-top:;
  margin-left: 28%;
}
  #logo:hover{
   /*box-shadow: 0px 0px 8px yellow;*/
   transform: scale(1.05);
   font-size: 58px;
 }



  /*estilo do  menu mobilr*/
.btn-abrir-menu{
    text-align: center;
    padding-top: 9%;
  color:yellow;
  font-size: 40px;
}

.menu-mobile{
  background-color: #000;
  height: 150vh;
  position: fixed;
  top:0;
  right:0;
  z-index: 99999;
  width: 0%;
  overflow: hidden;
  transition: .8s;
}

.menu-mobile.abrir-menu{
  width: 70%;

}

.menu-mobile.abrir-menu~.overlay-menu{
   display: block;
}

.menu-mobile .btn-fechar{
  padding: 50px 5%;

}
.menu-mobile .btn-fechar i{
  color: #FFD700;
  font-size: 40px;
}

.menu-mobile nav ul{
  text-align: right;
}
.menu-mobile nav ul li a{
  text-decoration:none;
  color:#fff;
  font-size:20px;
  font-weight: 300;
  padding: 10px 15%;
  display: block;
}
.menu-mobile nav ul li a:hover{
  background-color: #FFD700;
  color: #000;
}

.overlay-menu{
  background-color: #000000a7;
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left: 0;
  z-index:88888;
  display: none;
}

#lad_cab_esquerdo{
  width: 10%;
  height: 40%;
  background-color: transparent;
}
#lad_cab_centro{
 width: 60%;
 height: 40%;
  background-color: transparent;
}
#lad_cab_direito{
  width: 30%;
  height: 40%;
  padding-left: 10%;
   background-color: transparent;
}
 #lado_esquerdo, #lado_direito{
  display:none;
 }
 #centro{
  width: 95%;
  height: 100%;
  background-color:;
 }
 #conteudo{
  width: 98%;
  height: 40%;
  margin:3.5%;
  text-align: center;
 }
 #descricao{
  width: 100%;
 }
 #descricao #titulos{
  text-align: center;
 }
 #imagem_artista{
  width: 100%;
  height: 370px;
  background-color: red;  
  align-items:center ;  
  text-align: center;
 }

 #endereco1{
  text-align: left;
 }

 #linha{
  width: 99%;
  margin: 1%;
 }

#centro_visual{
  width: 95%;
  height: 100%;
 }

  #descricao_visual{
    width: 100%;
    height: 100%;
  }

  #imagem_artista_visual{
    width: 100%;
    height: 370px;    
    background-color: red;   
    margin: 0;
    align-items:center;
  }




  #endereco1_visual{
    text-align: center;
    width: 100%;
    height: 20%;

  }
  #endereco2_visual{
    width: 100%;
    height: 20%;  
  }


  .btn-social button{
  width:20%;
  height:60px; 
  background-color:;
  font-size: 22px;
  cursor:pointer;
  margin:15px 5px;
  transition: .2s
}


#galeria{
  width: 100%;
  height:100%; 
}

.galerias{
  width: 100%;
  height: 50%; 
  text-align: center;  
}

 #rodape{  
  height: 60%;  
 }
 #numeracao_paginas{
 height: 10%;
 }
 #paginacao{
 width: 80%;  
 }
  #rodape_esquerdo{
  width: 98%;  
  height: 300px;
  border: 1px solid;  
  }
  #rodape_centro{
  width: 98%;  
  height: 300px;  
  border: 1px solid; 
  }
  #rodape_direito{
  width: 98%;  
  height: 300px;  
  font-weight: 900;  
  border: 1px solid;  
  }
}