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

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

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


  /*jamalida button*/
        
      .map-container .btn-jamalida {
        position: absolute;
        top: 40% !important;
        left: 15%;
        height: 440px;
        width: 240px;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background: transparent;
        color:transparent;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
        opacity: 0.5;
      }

      @media (max-width: 575px) {
        .map-container .btn-jamalida {
          top: 35% !important;
          left: 15%;
          height: 240px;
          width: 90px;
        }
      }

      .map-container .btn-jamalida:hover {
        font-family: 'Merriweather Sans', sans-serif;
        font-size: 35px;
        color: rgb(148, 7, 7);
        text-shadow: 2px 2px 8px #FFf;
        margin: 50px 0;
        background:transparent;
        border: none;
        outline: none !important;
      }

      @media (max-width: 575px) {
        .map-container .btn-jamalida:hover {
          font-size: 10px;
          color: black;
          margin: 0;
        }
      }
      
      .map-container .btn-jamalida:focus {
        background: transparent;
        border: none;
        outline: none !important;
      }

      /*kalam button*/
        
      .map-container .btn-kalam {
        position: absolute;
        top: 32% !important;
        left: 35%;
        height: 340px;
        width: 200px;
        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;
      }

      @media (max-width: 575px) {
        .map-container .btn-kalam {
          top: 35% !important;
          left: 36%;
          height: 240px;
          width: 4px;
        }
      }

      .map-container .btn-kalam:hover {
        font-family: 'Merriweather Sans', sans-serif;
        font-size: 35px;
        color: rgb(148, 7, 7);
        text-shadow: 2px 2px 8px #FFf;
        margin: 90px 0;
        background:transparent;
        border: none;
        outline: none !important;
      }
      
      @media (max-width: 575px) {
        .map-container .btn-kalam:hover {
          font-size: 10px;
          color: black;
          margin: 0;
        }
      }

      .map-container .btn-kalam:focus {
        background: transparent;
        border: none;
        outline: none !important;
      }

      /*sabekun button*/
        
      .map-container .btn-sabekun {
        position: absolute;
        top: 36% !important;
        left: 50%;
        height: 340px;
        width: 180px;
        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;
      }

      @media (max-width: 575px) {
        .map-container .btn-sabekun {
          top: 35% !important;
          left: 50%;
          height: 230px;
          width: 4px;
        }
      }

      .map-container .btn-sabekun:hover {
        font-family: 'Merriweather Sans', sans-serif;
        font-size: 35px;
        color: rgb(148, 7, 7);
        text-shadow: 2px 2px 8px #FFf;
        margin: 90px 0;
        background:transparent;
        border: none;
        outline: none !important;
      }

      @media (max-width: 575px) {
        .map-container .btn-sabekun:hover {
          font-size: 10px;
          color: black;
          margin: 0;
        }
      }
      
      .map-container .btn-sabekun:focus {
        background: transparent;
        border: none;
        outline: none !important;
      }

      /*rahmat button*/
        
        .map-container .btn-rahmat {
          position: absolute;
          top: 32% !important;
          right: 16.5%;
          height: 340px;
          width: 220px;
          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;
        }

        @media (max-width: 575px) {
          .map-container .btn-rahmat {
            top: 35% !important;
            right: 21%;
            height: 230px;
            width: 4px;
          }
        }
        .map-container .btn-rahmat:hover {
          font-family: 'Merriweather Sans', sans-serif;
          font-size: 35px;
          color: rgb(148, 7, 7);
          text-shadow: 2px 2px 8px #FFf;
          margin: 80px 0;
          background:transparent;
          border: none;
          outline: none !important;
        }

        @media (max-width: 575px) {
          .map-container .btn-rahmat:hover {
            font-size: 10px;
            color: black;
            margin: 0;
          }
        }
        
        .map-container .btn-rahmat:focus {
          background: transparent;
          border: none;
          outline: none !important;
        }

         /*jubair button*/
        
        .map-container .btn-jubair {
          position: absolute;
          top: 42% !important;
          right: 0.3%;
          height: 360px;
          width: 210px;
          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;
        }

        @media (max-width: 575px) {
          .map-container .btn-jubair {
            top: 45% !important;
            right: 1%;
            height: 200px;
            width: 60px;
          }
        }

        .map-container .btn-jubair:hover {
          font-family: 'Merriweather Sans', sans-serif;
          font-size: 35px;
          color: rgb(148, 7, 7);
          text-shadow: 2px 2px 8px #FFf;
          margin: 80px 0;
          background:transparent;
          border: none;
          outline: none !important;
        }

        @media (max-width: 575px) {
          .map-container .btn-jubair:hover {
            font-size: 10px;
            color: black;
            margin: 0;
          }
        }
        
        .map-container .btn-jubair:focus {
          background: transparent;
          border: none;
          outline: none !important;
        }

        /*London button*/
        .map-container .btn-london {
          position: absolute;
          top: 38% !important;
          left: 47.7%;
          height: 40px;
          width: 40px;
          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-london:hover {
         font-size-adjust: 12px;
          background: transparent;
          opacity: 0.2;
          border: none;
          outline: none !important;
        }
        
        .map-container .btn-london:focus {
          background: transparent;
          border: none;
          outline: none !important;
        }

        /*New York button*/
        .map-container .btn-newyork {
          position: absolute;
          top: 41% !important;
          left: 33%;
          height: 40px;
          width: 40px;
          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-newyork:hover {
         font-size-adjust: 12px;
          background: transparent;
          opacity: 0.2;
          border: none;
          outline: none !important;
        }
        
        .map-container .btn-newyork: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: 768px) {
            .map-container .btn-cambodia {
              height: 40px;
              width: 80px!important;
            }
            .map-container .btn-london {
              height: 40px;
              width: 60px!important;
            }
            .map-container .btn-newyork {
              height: 40px;
              width: 60px!important;
            }
        }