*{
    margin: 0;
    padding: 0;
}
.contenedorPrendas{
    width: 800px;
    height: 700px;
    background: #D4EDF9;
    margin: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.parte1{
    width: 49%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.head{
    width: 90%;
    height: 12%;
}
.superior{
    width: 100%;
    height: 17%;
    background: #F9B233;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #F9B233;
    border-radius: 10px 10px 0 0 ;
}
#nombreItem{
    font-family: 'Roboto';
    font-size: 12px;
    color: #312783;
}
.interior{
    width: 100%;
    height: 75%;
    background: #FCE9F3;
    border: 1px solid #951B81;
    border-radius: 0 0 10px 10px ;
    display: flex;
    flex-direction: row;
}
.imgprincipal{
    width: 18%;
    height: 100%;
    display: flex;
    align-items: center;
/*    justify-content: space-between;*/
}
.imgprincipal img{
    width: 80%;
/*    height: 95%;*/

}
.lineaDivisoria{
    border-right: 3px double green;
    height: 90%;
    margin-left: 5%;
}
.items{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.items img{
    width: 15%;
}

.body{
    width: 90%;
    height: 12%;
}
.eyes{
    width: 90%;
    height: 12%;
}
.eyes .items img{
    width: 18%;
}
.nose{
    width: 90%;
    height: 12%;
}
.nose .items img{
    width: 9%;
}
.mounth{
    width: 90%;
    height: 12%;
}
.clothe{
    width: 90%;
    height: 12%;
}
.clothe .items img{
    width: 10%;
}
.colors{
    width: 90%;
    height: 20%;
}
.colors .superior{
    width: 100%;
    height: 12%;
    background: #F9B233;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #F9B233;
    border-radius: 10px 10px 0 0 ;
}
/*//////////////////////////////////// PALETA DE COLORES /////////////////////////////////////////////*/
.paletacolores{
    display: none;
    width: 100%;
    height: 80%;
    background: #ffffff;
    overflow: auto;
    border: 1px solid #951B81;
    border-radius: 0 0 10px 10px ;
}
.paleta{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

}
.color{
    width: 35px;
    height: 35px;
    margin: 4px;
    border: 1px solid green;
}
.parte2{
    width: 51%;
    height: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.titulo{

}
.titulo img{

}
.print{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#print{
    cursor: pointer;
}
#remove{
    cursor: pointer;
}
#print:hover{
    opacity: 0.6;
}
#remove:hover{
    opacity: 0.6;
}
.lienzo{
    width: 360px;
    height: 535px;
    background: #ffffff;
    border: 1px solid #E94E1B;
    border-radius: 10px;
}
.elementos{
    display: none;
    position: absolute;
}
.btnColorear{
    margin-top: 10%;
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.btnColorear:hover{
    opacity: 0.6;
}
#reset:hover{
    opacity: 0.6;
}
/*/////////////////////////////////////  MEDIA QUERIE ////////////////////////////////////////////*/
/*////////////////////////////////////////////////////////////////////////////////////////////////*/
@media screen and (min-width: 700px) and (max-width: 799px){
    .contenedorPrendas{
        width: 100%;
    }
    .parte1{
        width: 47%;
    }
    .head{
        width: 96%;
    }
    .body{
        width: 96%;
    }
    .eyes{
        width: 96%;
    }
    .nose{
        width: 96%;
    }
    .mounth{
        width: 96%;
    }
    .clothe{
        width: 96%;
    }
    .colors{
        width: 96%;
    }
}
@media screen and (min-width: 600px) and (max-width: 699px){
    .contenedorPrendas{
        width: 100%;
        flex-direction: column-reverse;
        height: 1200px;
    }
    .parte1{
        width: 47%;
        height: 45%;
        margin-top: 4%;
    }
    .parte2{
        width: 70%;
        height: 55%;
        margin-top: 2%;
    }

}