label {
  cursor: pointer;
  -webkit-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms;
}

.mcontainer {
  position: absolute;
  left: 0;
  right: 0;
  /*margin: 0 auto;
  padding: 50px;*/
}


.mcontainer .modal-content,
.mcontainer .modal-background {
  visibility: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  cursor: pointer;
}

.mcontainer .modal-background {
  -webkit-transition: height 250ms;
  -o-transition: height 250ms;
  transition: height 250ms;
}
.mcontainer .modal-content {
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 500ms;
  transition: -webkit-transform 500ms;
  -o-transition: transform 500ms;
  transition: transform 500ms;
  transition: transform 500ms, -webkit-transform 500ms;
}
.mcontainer #modal {
  display: none;
}
.mcontainer #modal:checked ~ .modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: visible;
  opacity: 1;
  -webkit-transition: height 250ms;
  -o-transition: height 250ms;
  transition: height 250ms;
  z-index: 15000;
  cursor: default;
}

.mcontainer #modal:checked ~ .modal-content {
  z-index: 16000;
  position: fixed;
  /*top: 50%;*/
  left: 40%;
  margin-top: 50px;
  /*margin-left: -25%;*/
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: auto;
  padding: 40px;
  border-radius: 18px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  cursor: auto;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 500ms;
  transition: -webkit-transform 500ms;
  -o-transition: transform 500ms;
  transition: transform 500ms;
  transition: transform 500ms, -webkit-transform 500ms;

background: rgb(109,6,136);
background: -webkit-linear-gradient(0deg, rgba(109,6,136,1) 0%, rgba(116,9,121,1) 26%, rgba(245,221,255,1) 95%);
background: -webkit-gradient(linear, left bottom, left top, from(rgba(109,6,136,1)), color-stop(26%, rgba(116,9,121,1)), color-stop(95%, rgba(245,221,255,1)));
background: -webkit-linear-gradient(bottom, rgba(109,6,136,1) 0%, rgba(116,9,121,1) 26%, rgba(245,221,255,1) 95%);
background: -o-linear-gradient(bottom, rgba(109,6,136,1) 0%, rgba(116,9,121,1) 26%, rgba(245,221,255,1) 95%);
background: linear-gradient(0deg, rgba(109,6,136,1) 0%, rgba(116,9,121,1) 26%, rgba(245,221,255,1) 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6d0688",endColorstr="#f5ddff",GradientType=1);
  }

.mcontainer #modal:checked ~ .modal-content .modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 22px;
  color: rgba(51, 51, 51, 0.4);
  -webkit-transition: color 200ms, -webkit-transform 500ms;
  transition: color 200ms, -webkit-transform 500ms;
  -o-transition: color 200ms, transform 500ms;
  transition: color 200ms, transform 500ms;
  transition: color 200ms, transform 500ms, -webkit-transform 500ms;
}
.mcontainer #modal:checked ~ .modal-content .modal-close:hover, .mcontainer #modal:checked ~ .modal-content .modal-close:focus {
  color: #333;
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.modalform__description
{color: #FFF;
position: relative;
top: 12px;}