@import url'https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* { margin:0 auto; padding: 0 2px 0 2px; box-sizing: border-box; outline:none; 
    font-family:'Poppins',sans-serif;
}
body {align-items: center;  /*background: #f2f2f2*/ }

.container { position: relative; max-width: 800px; padding: 20px; color: #555 black;}

.container .content { display: none; margin-top:30px; background-color: #FAEDFE }

.container .content.contentCatala { display: block; background-color: #FAFBE5}

.check { position: relative; width: 50px; }

.check:before {
    content: '';
    position: absolute;
    width:50px;
    height:25px;
    background: #333;
    border-radius: 25px;
}

.check:checked:before { background: violet; }

.check:after {
    content: '';
    position: absolute;
    left: 0px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 25px;
    transition: .7s;
    border: 2px solid #333;
    box-sizing: border-box;
}

.check:checked:after { left: 25px; border: 2px solid #00a1ff;}

.check:checked ~ .content.contentCatala { display: none;}

.check:checked ~ .content.contentSpanish { display: block;}

.cat { color:green;}
        
.es { color:black;}