/* The Modal (background) */
      .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }

            /* Modal Header */
      .modal-header {
          padding: 10px 16px;
          background-color: #1590A5;
          color: white;

      }

      /* Modal Body */
      .modal-body {padding: 18px 16px;}

      /* Modal Content */
      .modal-content {
          position: relative;
          top: 20%;
          background-color: #fefefe;
          margin: auto;
          padding: 0;
          border: 1px solid #888;
          width: 50%;
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
          animation-name: animatetop;
          animation-duration: 0.4s
      }

/* Add Animation */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 20%; opacity: 1}
}

      /* The Close Button */
      .close {
          color: #000;
          float: right;
          font-size: 28px;
          font-weight: bold;
      }

      .close:hover,
      .close:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
      }



@media only screen and (min-width: 10px) and (max-width: 320px) {

  #info{
    visibility: hidden;
  }

}

/*MEDIA QUERIES*/
@media only screen and (min-width: 320px) and (max-width: 768px) {

  #info{
    visibility: hidden;
  }

}