.vmodal{
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.8);

  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  display: flex;

  animation: modals 6s 2s;
  visibility: hidden;
  opacity: 0;
}

.contenidos{
  margin: auto;
  width: 40%;
  height: 90%;
  background: #000;
  border-radius: 10px;
}
#cerrar{
  display: none;
}

#cerrar + label{
  position: fixed;
  color: #000;
  font-size: 25px;
  z-index: 500;
  background: darkred;
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50%;
  right: 10px;
  cursor: pointer;

  animation: modals 6s 2s;
  visibility: hidden;
  opacity: 0;

}

#cerrar:checked + label, #cerrar:checked ~ .vmodal{
  display: none;
}

@keyframes modals{
  100%{
    visibility: visible;
    opacity: 1;
  }
}

@media only screen and (max-width : 380px) {
  .contenidos{
    width: 90%;

  }  
}