/*HOME*/
.botao{
  background-color: #194b32;
    padding: 10px;
    position: absolute;
    top: 30px;
    left: 30px;
    color: white;
    font-size: 20px;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 0.3s;
    transition: all 0.3s;
    transition-duration: 1.7s;
}
.botao:hover{
    background-color: #D0E4AE;
    color: #194b32;
    transform: scale(1.2) translateY(-13px) translateX(20px);
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.424);
}

/*ATRIBUTOS GERAIS*/

body{
    background-color: white;
}
div{
    transition-duration: 2s;
    border: 5px solid #194b32;
    background-color: transparent;
}
div:hover{
    background-color: rgba(255, 255, 255, 0.1);
}
.geral {
    border: none;
     justify-content: center;
    align-items: center;
    display: flex;
}

/* BLOCO*/
.parede {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 205px;
    transform: rotateX(45deg) rotateY(45deg); 
    z-index: 12; 
}
.parede:hover{
    transform: translate(-180px);
}


.ptras {
    position: absolute;
    width: 180px;
    height: 130px;
    background-size: cover;
    top: 185px;
    transform: translate(25px) rotate(-1deg); 
    border: 2px solid #194b32;
    z-index: 10;
}
.ptras:hover {
    z-index: 20;
    transform: translateX(-180px) translateY(200px)  rotate(180deg) scale(1.6);
}
.plado {
    position: absolute;
    width: 180px;
    height: 180px;
    background-size: cover;
    top: 203px;
    transform: translate(180px) rotateX(45deg) rotateY(45deg);
    z-index: 11;
} 
.plado:hover {
    transform: translate(380px);
}
.frente {
    border: 2px solid #194b32;
    position: absolute;
    width: 180px;
    height: 130px;
    background-size: cover;
    top: 278px;
    transform: translate(155px) rotate(-1deg); 
    z-index: 13;
}
.frente:hover {
    z-index: 20;
    width: 99%;
    height: 100%;
    display: block;
    top: 0px;
    transform:translateY(-2px) rotate(360deg);
    background-image:url(xereke.jpg);
}
@media (max-width: 900px) {
     .geral {
        position: absolute;
        left: 40%;
    }
    .frente:hover {
        top: 500px;
        width: 300px;
        height: 200px;
        transform: translateY(2px) rotate(-360deg);
        background-image: url(xereke.jpg);
        background-image: cover;
        border: none;
    }
}