.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInDown {
    animation: fadeInDown 0.6s ease-out both;
}


@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
    animation: fadeOut 0.8s ease-out both;
}

.modal-content{
    height: 100%;
    padding: 40px 0px 0px 0px;
}

.modal-content > div{
    padding: 20px;
    width: 100%;
    height: 100%;
    background-color: #FAFAFA;
    overflow: auto;
}

.modal-content > div > div{
    width: 1366px;
    margin: auto;
}

.close-modal{
    /*margin: 8px;
    background: url(../img/close.svg) no-repeat;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    position: fixed;
    right: 0px;
    top: 0px;*/
    background: linear-gradient(120deg, #7354a2, #D76D77,#FFAF7B);
    padding: 8px;
    width: 100%;
    cursor: pointer;
    font-size: 1.8rem;
    position: fixed;
    top: 0px;
    text-align: center;
    font-family: 'Roboto';
    transition: 0s;
}

.close-modal:hover{
    /*background: url(../img/closeh.svg) no-repeat;*/
    background: linear-gradient(120deg, #8f76b4, #df8a91,#fdbd94);
}

@media only screen and (max-width:1366px) {
    .modal-content > div > div{
        width: 100%;
        margin: auto;
        margin-bottom: 30px;
}
}

@media only screen and (max-width:768px) {
    .modal-content > div {
        margin: 0px;
        padding: 20px;
        min-height: 100vh;
        max-height: 100%;
        width: 100vw;
    }
}