.painel-geral {
  width: 100%;
  float: left;
  background: #282a36;
  text-align: left;
}

.painel-aside {
  width: 20%;
  float: left;
  padding-top: 2%;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  text-align: right;
}
.painel-aside-a:link {
  width: 92%;
  float: left;
  color: #ffffff;
  padding: 4%;
}
.painel-aside-a-b:link {
  width: 92%;
  float: left;
  color: #ffffff;
  padding: 4%;
  background: rgba(0,0,0,.1);
}
.painel-aside-cima {
  width: 96%;
  float: left;
  padding: 2%;
  font-size: .8em;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}

.painel-conteudo {
  width: 76%;
  float: left;
  padding: 2%;
  background: var(--bg-cor);
}

.perfil-input {
  width: 90%;
  float: left;
  padding: 10px 1%;
  margin: 2%;
  font-size: 2em;
  font-weight: bold;
  color: #1e2229;
  border: 1px solid #1e2229;
  border-radius: 5px;
}

.perfil-lk-bt-oc {
  width: 40%;
  float: left;
  padding: 10px 1%;
  margin: 2%;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  background: #cc7e00;
}

.perfil-lk-bt:link {
  width: 40%;
  float: left;
  padding: 10px 1%;
  margin: 2%;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  background: #cc7e00;
}

.perfil-lk-bt-c:link {
  width: 94%;
  float: left;
  padding: 10px 1%;
  margin: 2%;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  background: #cc7e00;
}

.perfil-lk-bt-p:link {
  width: 94%;
  float: left;
  padding: 10px 1%;
  margin: 2%;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  color: #ffffff;
  border-radius: 5px;
  background: #cc7e00;
}

/*   FOTO    */

.div-foto-canvas {
  width: 100%;
  float: left;
}
.div-foto-x {
  width: 100%;
  float: left;
}
.div-foto-y {
  width: 25%;
  float: left;
  padding: 10%;
  background-color: #000;
}

.div-foto-y-in {
  width: 300px;
  float: left;
  -ms-transform: rotate(270deg); /* IE 9 */
  -webkit-transform: rotate(270deg); /* Safari 3-8 */
  transform: rotate(270deg);
 position: relative;
  bottom: 170px;
  right: -225px;
}

.div-imagem-y-in {
  width: 300px;
  float: left;
  -ms-transform: rotate(270deg); /* IE 9 */
  -webkit-transform: rotate(270deg); /* Safari 3-8 */
  transform: rotate(270deg);
 position: relative;
  bottom: 270px;
  right: -790px;
}

/*       LOGIN        */

.painel-login {
    width: 90%;
    float: left;
    padding: 3%;
    margin: 2%;
    background: rgba(0,0,0,.7);
    border-radius: 8px;
}

.painel-login-input {
  width: calc(92% - 4px);
  float: left;
  padding: 2%;
  margin: 15px 2%;
  font-size: 1.1em;
  font-weight: bold;
  background: #999999;
  border: 2px solid #000000;
  color: #121212;
  border-radius: 5px;
}

.painel-login-lk:link {
  width: calc(94% - 4px);
  float: left;
  padding: 2%;
  margin: 15px 0;
  font-size: 1.1em;
  font-weight: bold;
  background: #ff6600;
  border: 2px solid #ff6600;
  color: #ffffff;
  border-radius: 5px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
    .painel-aside {
      width: 96%;
      float: left;
      padding: 2%;
      color: #ffffff;
      text-align: center;
    }
    .painel-conteudo {
        width: 96%;
        text-align: center;
    }
    .div-imagem-y-in {
      float: left;
      -ms-transform: rotate(270deg); /* IE 9 */
      -webkit-transform: rotate(270deg); /* Safari 3-8 */
      transform: rotate(270deg);
     position: relative;
      bottom: 125px;
      right: -310px;
    }
}