.info-panel {
    padding-top: 50px;
    padding-left: 50px;
    position: fixed;
    z-index: 10;
}


.close-panel {
    color: red;
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}
.close-panel:hover {
    opacity: 1;
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
  }


/* Info panel transition... */
.info-panel-content {
    display: block;
    opacity: 1;
    padding-left: 50px;
    position: fixed; 
    left: 0;

    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    pointer-events: none;
}
@media only screen and (min-width: 1407px) {
    .info-panel-content {
        right: 75%;
    }
}
@media only screen and (max-width: 1407px) and (min-width: 1024px) {
    /* Info panel transition... */
    .info-panel-content {
        right: 60%;
    }
}
@media only screen and (max-width: 1024px) {
    /* Info panel transition... */
    .info-panel-content {
        right: 50%;
    }
}
.info-panel-content.is-active {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    z-index: 10;
    pointer-events: auto;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}