:root {
    --color-green: #00a878;
    --color-red: #fe5e41;
    --color-button: #fdffff;
    --color-black: #000;
    --color-azul: #415efe;
    --color-negro: #646464;
}
.switch-button {
    display: inline-block;
}
.switch-button .switch-button__checkbox {
    display: none;
}
.switch-button .switch-button__label {
    background-color: var(--color-negro);
    width: 3rem;
    height: 1rem;
    border-radius: 3rem;
    display: inline-block;
    position: relative;
}
.switch-button .switch-button__label:before {
    transition: .2s;
    display: block;
    position: absolute;
    width: 1rem;
    height: 1rem;
    background-color: var(--color-button);
    content: '';
    border-radius: 50%;
    box-shadow: inset 0px 0px 0px 1px var(--color-black);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label {
    background-color: var(--color-azul);
}
.switch-button .switch-button__checkbox:checked + .switch-button__label:before {
    transform: translateX(2rem);
}

.img100{
    width: 100%;
}
.img50{
    width: 50%;
}
.img40{
    width: 40%;
}
.img30{
    width: 30%;
}
.img20{
    width: 20%;
}
.img10{
    width: 10%;
}

.oculto{
    display: none;
}
.visible{
    display: show;
}
.icono{
    width: 30px;
}