.modal-open {
 border: 4px solid #cdafd1;
    margin: 3px;
    border-radius: 22px;
    text-decoration: none;
    color: #051832;
    font-size: 14px;
    padding: 4px 4px 4px 4px;
    display: block;
    border-bottom: 4px solid #5e0404;
    border-top: 4px solid #5e0404;
    text-transform: uppercase;
    text-wrap: nowrap;
}
.modal-open:hover {
    color: white;
    background-color: #1E83c1;
  box-shadow: 0 5px 10px rgb(1, 61, 98, 59%);;
}
.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0; 
  transition: .5s ease-in;
  z-index: 100;
}
.modal-content {
  background-color: #fff;
  width: 95%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  border-radius: 8px;
  transform: perspective(500px) translateY(-100%) rotateX(45deg);
  transition: transform .5s ease-out;
}
#modal-toggle {
/*   display: none; */
}
#modal-toggle:checked ~ .modal-wrapper {
  visibility: visible;
  opacity: 1;
}
#modal-toggle:checked ~ .modal-wrapper .modal-content{
  transform: translateY(0) rotate(0);
}
.modal-open::after {
 content: "\00D7";
    position: fixed;
    top: calc(15% - 40px);
    right: calc(2% + 20px);
    cursor: pointer;
    background-color: #ee3737;
    color: #fff;
    font-size: 32px;
    font-weigth: bold;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);

}
#modal-toggle:checked + .modal-open::after {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
  transition: .5s ease-out .35s;
}












.modal-open2 {
 border: 4px solid #cdafd1;
    margin: 3px;
    border-radius: 22px;
    text-decoration: none;
    color: #051832;
    font-size: 14px;
    padding: 4px 4px 4px 4px;
    display: block;
    border-bottom: 4px solid #5e0404;
    border-top: 4px solid #5e0404;
    text-transform: uppercase;
    text-wrap: nowrap;
}
.modal-open2:hover {
    color: white;
    background-color: #1E83c1;
  box-shadow: 0 5px 10px rgb(1, 61, 98, 59%);;
}
.modal-wrapper2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0; 
  transition: .5s ease-in;
  z-index: 100;
}
.modal-content2 {
  background-color: #ffffff26;
    color: wheat;
  width: 95%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  border-radius: 8px;
  transform: perspective(500px) translateY(-100%) rotateX(45deg);
  transition: transform .5s ease-out;
}
#modal-toggle2 {
/*   display: none; */
}
#modal-toggle2:checked ~ .modal-wrapper2 {
  visibility: visible;
  opacity: 1;
}
#modal-toggle2:checked ~ .modal-wrapper2 .modal-content2 {
  transform: translateY(0) rotate(0);
}
.modal-open2::after {
 content: "\00D7";
    position: fixed;
    top: calc(15% - 40px);
    right: calc(2% + 20px);
    cursor: pointer;
    background-color: #ee3737;
    color: #fff;
    font-size: 32px;
    font-weigth: bold;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);

}
#modal-toggle2:checked + .modal-open2::after {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
  transition: .5s ease-out .35s;



}









.modal-open3 {
 border: 4px solid #cdafd1;
    margin: 3px;
    border-radius: 22px;
    text-decoration: none;
    color: #051832;
    font-size: 14px;
    padding: 4px 4px 4px 4px;
    display: block;
    border-bottom: 4px solid #5e0404;
    border-top: 4px solid #5e0404;
    text-transform: uppercase;
    text-wrap: nowrap;
}
.modal-open3:hover {
    color: white;
    background-color: #1E83c1;
  box-shadow: 0 5px 10px rgb(1, 61, 98, 59%);;
}
.modal-wrapper3 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0; 
  transition: .5s ease-in;
  z-index: 100;
}
.modal-content3 {
    background-color: #fff;
  width: 95%;
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  border-radius: 8px;
  transform: perspective(500px) translateY(-100%) rotateX(45deg);
  transition: transform .5s ease-out;
}
#modal-toggle3 {
/*   display: none; */
}
#modal-toggle3:checked ~ .modal-wrapper3 {
  visibility: visible;
  opacity: 1;
}
#modal-toggle3:checked ~ .modal-wrapper3 .modal-content3 {
  transform: translateY(0) rotate(0);
}
.modal-open3::after {
 content: "\00D7";
    position: fixed;
    top: calc(15% - 40px);
    right: calc(2% + 20px);
    cursor: pointer;
    background-color: #ee3737;
    color: #fff;
    font-size: 32px;
    font-weigth: bold;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    z-index: 110;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);

}
#modal-toggle3:checked + .modal-open3::after {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
  transition: .5s ease-out .35s;



}