@charset "utf-8";
/* CSS Document */

.map-container {
          position: relative;
          width: 100%;
        }

        .map-container img {
          width: 100%;
          height: auto;
        }

         /*north button*/
        
        .map-container .btn-north {
          position: absolute;
          top: 32% !important;
          left: 48.5%;
          height: 75px;
          width: 75px;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background: transparent;
          color: transparent;
          font-size: 16px;
          padding: 12px 24px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          text-align: center;
          opacity: 0.5;
        }

        .map-container .btn-north:hover {
         font-size-adjust: 12px;
          background: transparent;
          opacity: 0.1;
          border: none;
          outline: none !important;
        }
        
        .map-container .btn-north:focus {
          background: transparent;
          border: none;
          outline: none !important;
        }

        /*center button*/
        .map-container .btn-center {
          position: absolute;
          top: 55.5% !important;
          left: 52.7%;
          height: 75px;
          width: 75px;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background: transparent;
          color: transparent;
          font-size: 16px;
          padding: 12px 24px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          text-align: center;
          opacity: 0.5;
        }

        .map-container .btn-center:hover {
         font-size-adjust: 12px;
          background: transparent;
          opacity: 0.1;
          border: none;
          outline: none !important;
        }
        
        .map-container .btn-center:focus {
          background: transparent;
          border: none;
          outline: none !important;
        }

        /*South button*/
        .map-container .btn-south {
          position: absolute;
          bottom: 1% !important;
          right: 20.3%;
          height: 75px;
          width: 75px;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          background: transparent;
          color: transparent;
          font-size: 16px;
          padding: 12px 24px;
          border: none;
          cursor: pointer;
          border-radius: 5px;
          text-align: center;
          opacity: 0.5;
        }

        .map-container .btn-south:hover {
         font-size-adjust: 12px;
          background: transparent;
          opacity: 0.2;
          border: none;
          outline: none !important;
        }
        
        .map-container .btn-south:focus {
          background: transparent;
          border: none;
          outline: none !important;
        }

        .img {
            width: 100%;
        }

        div.polaroid {
          width: 200%;
          background-color: white;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          margin-bottom: 25px;
        }

        @media only screen and (max-width: 300px) {
          .map-container .btn-north {
            height: 20px;
            width: 20px!important;
          }
          .map-container .btn-center {
            height: 20px;
            width: 20px!important;
          }
          .map-container .btn-south {
            height: 20px;
            width: 20px!important;
          }
      }

        @media only screen and (max-width: 768px) {
            .map-container .btn-north {
              height: 20px;
              width: 20px!important;
            }
            .map-container .btn-center {
              height: 20px;
              width: 20px!important;
            }
            .map-container .btn-south {
              height: 20px;
              width: 20px!important;
            }
        }