/*  MODAL */
.modal{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:red;
  background: #5b5b5bde;
  
}

.modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  background: white;
  padding: 10px;
    opacity: 0;
    display: block;
      animation: fadeIn 1s forwards;
}

.modal.no-active{
display:none;

}

.modal-close{
  position: absolute;
top: 0;
right: 10px;
font-size: 36px;
color: var(--main);
cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1;}
}

@media(max-width:760px){
  .modal-content{
    width:95%;
  }
}