#contact_us_map{
    max-width: 100vw;
    height: auto;
    background-color: black;
}

#contact_us_map .container{
    padding-top: 32px;
    background-color: black;;
    max-width: 1440px;
    height:auto;
    margin: 0 auto;
    padding-left: 60px;
}

.row_1{
    display: grid;
    grid-template-columns: 30% 70%;
    padding-left: 60px;
}

.row_2{
        display: grid;
    grid-template-columns: 65% 35%;
    padding-left: 60px;

}
  
.map-container {
  position: relative;
  width: 100%;
  max-width: 800px; 
  margin: 0 auto;
  z-index: 40;
}

.responsive-map {
  width: 110%;
  height: auto;
  display: block;
  margin-left: -80px;
}

.map-pointer {
  position: absolute;
  cursor: pointer;
  background-image: url(../assets/images/footer/pointer.png);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 15px;
}

.map-pointer:hover {
    background-image: url(../assets/images/footer/pointer_selected.png);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 15px;
}

.map-pointer .name{
    visibility: hidden;
    color: #fb6c25;
    font-family: MontserratB;
    font-size: 15px;
    text-transform: uppercase;
  }

  #pointer-8.map-pointer{
    background-image: url(../assets/images/footer/pointer_selected.png);
  }

  #pointer-8.map-pointer .name{
    visibility: visible;
    position: relative;
    top:-40px;
  }
  
  .map-pointer:hover .name{
    visibility: visible;
    position: relative;
    top:-40px;
    
  }

  .map-pointer:hover .posDown{
    top:30px;
  }

#pointer-1{
   top: 7.5%; left: 12.8%;
}
#pointer-2{
   top: 31%; left: 32%;
}
#pointer-3{
   top: 29%; left: 40.5%;
}
#pointer-4{
   top: 23.5%; left: 43.5%;
}
#pointer-5{
   top: 27.5%; left: 45%;
}
#pointer-6{
   top: 29.5%; left: 46.5%;
}
#pointer-7{
   top: 33%; left: 48.5%;
}
#pointer-8{
   top: 28%; left: 50%;
}
#pointer-9{
   top: 34%; left: 67%;
}
#pointer-10{
   top: 25%; left: 81%;
}
#pointer-11{
   top: 12%; left: 71%;
}
#pointer-12{
   top: 14%; left: 22.5%;
}
#pointer-13{
   top: 48%; left: 91%;
}
#pointer-14{
   top: 51%; left: 40.5%;
}

#contact_us_map .connect_text{
    overflow: visible;
    z-index: 25
  }
  
  #contact_us_map .connect_text .heading{
    font-family: MontserratB;
    font-size: 24px;
    color: white;
    text-transform: uppercase;
    padding-bottom: 30px;
    padding-top: 63px;
    margin-right: -150px;
  }
  
  #contact_us_map .connect_text .text{
    font-family: MontserratR;
    font-size: 19px;
    color: #e9e9e9;
    margin-right: -60px;
  }
  
  #contact_us_map .row_2 .happen{
   padding-top: 10px;
  }

  #contact_us_map .row_2 .happen img{
    width: 45%;
    height: auto;
  }

  #contact_us_map .row_2 .btn_connect {
    color: black;
    font-family: MontserratB;
    font-size: 25px;
    padding-top: 20px;
  }

  #contact_us_map .row_2 button {
    padding: 18px 55px;
    background-color: #dddddd;
    text-transform: uppercase;
    border-radius: 5px;
  }

  .row_3{
    display: grid;
    grid-template-columns: 65% 35%;
    padding: 80px 80px 40px 60px;
    font-family: MontserratR;
    font-size: 25px;
    color: white;
    background-color: black;
  }

  .row_3 .text{
    display: grid;
    grid-template-columns: 33% 33% 33%;
  }

  .row_3 .text span{
    padding: 17px 0 5px;
  }

  .row_3 .heading{
    font-size: 30px;
  }
  
  .row_3 a, .row_3 a:link, .row_3 a:visited, .row_3 a:hover, .row_3 a:active{
    color: white;
    text-decoration: none;
  }
  
  .row_3 .address .line_1{
    background-image: url(../assets/images/footer/hq.png);
    background-repeat: no-repeat;
    background-position: left;
  }
  
  .row_3 .address .line_1 > div{
    padding-left: 45px;
    padding-top: 17px;
  }

  @media only screen and (min-width: 1366px) and (max-width: 1919px){
   #contact_us_map .container{
      padding-left: 0px;
   }

    .row_3 .heading{
        font-size: 25px;
    }

    .row_3 .text span{
        padding: 10px 0 5px;
    }

    .row_3{
        font-size: 19px;
    }

  }

  @media only screen and (min-width: 1024px) and (max-width: 1365px){
    #contact_us_map .container{
        max-width: 99vw;
        padding-left: 0px;
    }
    
    .row_1{
        padding-left:20px;
    }
  
    #contact_us_map .connect_text .heading{
    font-size: 18px;
    padding-top: 50px;
    }

    #contact_us_map .connect_text .text{
    font-size: 14px;
    margin-right: 0px;
    }

    .responsive-map {
        margin-left: -72px;
        margin-top: 10px;
    }

    .row_2{
        padding-left: 20px;
    }

    #contact_us_map .row_2 .btn_connect {
    font-size: 22px;
    }

    .row_3{
      grid-template-columns: 65% 35%;
      padding-left: 20px;
      font-size: 18px;
    }

    .row_3 .heading {
        padding-bottom: 10px;
    }
  }
  
@media only screen and (min-width: 768px) and (max-width: 1023px){
   #contact_us_map .container{
      padding-left: 0px;
   }

  .row_1{
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
    padding: 0 20px;
    }

    #contact_us_map .connect_text .heading{
        padding-top: 20px;
        text-align: center;
        margin-right: 0px;
    }

    #contact_us_map .connect_text .text{
        margin-right: 0px;
        text-align: justify;
        font-size: 17px;
    }

    .responsive-map {
    width: 100%;
    margin-left: 0px;
    padding: 30px 0 0 0;
    }

    .map-pointer {
        background-image: url(../assets/images/footer/pointer_small.png);
        width: 10px;
        height: 14px;
        background-size: 10px;
    }

    .map-pointer:hover {
        background-image: url(../assets/images/footer/pointer_selected_small.png);
        width: 10px;
        height: 14px;
        background-size: 10px;

    }

#pointer-1{
   top: 14.5%; left: 21.5%;
}
#pointer-2{
   top: 34%; left: 38.5%;
}
#pointer-3{
   top: 32%; left: 45.5%;
}
#pointer-4{
   top: 29.5%; left: 49.5%;
}
#pointer-5{
   top: 32.5%; left: 50.8%;
}
#pointer-6{
   top: 33.5%; left: 52%;
}
#pointer-7{
   top: 36%; left: 53.5%;
}
#pointer-8{
   top: 32%; left: 54.5%;
}
#pointer-9{
   top: 36%; left: 70%;
}
#pointer-10{
   top: 30%; left: 84%;
}
#pointer-11{
   top: 17%; left: 74%;
}
#pointer-12{
   top: 20%; left: 29.5%;
}
#pointer-13{
   top: 48%; left: 91%;
}
#pointer-14{
   top: 51%; left: 46%;
}

    .row_2{
        padding-left: 20px;
        /* grid-template-columns: 60% 40%; */
    }

    #contact_us_map .row_2 .btn_connect{
        font-size: 16px
    }

    #contact_us_map .row_2 button {
        padding: 16px 35px;
    }

    .row_3{
        grid-template-columns: 100%;
        padding: 40px 20px 40px;
        font-size: 18px;
    }

    .row_3 .follow{
        padding-top: 30px;
    }

    .row_3 .heading {
        font-size: 22px;
    }

    .row_3 .text {
       max-width: 50vw;
    }
    
    .row_3 .text span {
        padding: 0px 0 5px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 767px){
   #contact_us_map .container{
      padding-left: 0px;
   }

  .row_1{
    display: grid;
    grid-template-columns: 100%;
    margin: 0 auto;
    padding: 0 20px;
    }

    #contact_us_map .connect_text .heading{
        padding-top: 0px;
        text-align: center;
        margin-right: 0px;
        font-size: 20px;
    }

    #contact_us_map .connect_text .text{
        margin-right: 0px;
        text-align: justify;
        font-size: 16px;
    }

    .responsive-map {
    width: 100%;
    margin-left: 0px;
    padding: 30px 0 0 0;
    }

    #contact_us_map .row_2 .happen img {
    width: 71%;
    height: auto;
}

    .map-pointer {
        background-image: url(../assets/images/footer/pointer_small.png);
        width: 10px;
        height: 14px;
        background-size: 10px;
    }

    .map-pointer:hover {
        background-image: url(../assets/images/footer/pointer_selected_small.png);
        width: 10px;
        height: 14px;
        background-size: 10px;

    }

#pointer-1{
   top: 14.5%; left: 20.5%;
}
#pointer-2{
   top: 34%; left: 38.5%;
}
#pointer-3{
   top: 32%; left: 45.5%;
}
#pointer-4{
   top: 29.5%; left: 49.5%;
}
#pointer-5{
   top: 32.5%; left: 50.8%;
}
#pointer-6{
   top: 33.5%; left: 52%;
}
#pointer-7{
   top: 36%; left: 53.5%;
}
#pointer-8{
   top: 32%; left: 54.5%;
}
#pointer-9{
   top: 36%; left: 70%;
}
#pointer-10{
   top: 30%; left: 84%;
}
#pointer-11{
   top: 17%; left: 74%;
}
#pointer-12{
   top: 20%; left: 29.5%;
}
#pointer-13{
   top: 48%; left: 91%; overflow:hidden;
}
#pointer-14{
   top: 51%; left: 46%;
}

    .row_2{
      padding-left: 0px;
      grid-template-columns: 100%;
      margin: 0 auto;
      text-align: center;
      padding-top: 30px;
    }

    #contact_us_map .row_2 .btn_connect{
        font-size: 20px;
        padding-top: 30px;
    }

    #contact_us_map .row_2 button {
                padding: 9px 15px;
    }

    .row_3{
        grid-template-columns: 100%;
        padding: 40px 0px 40px 20px;
        font-size: 17px;
    }

    .row_3 .follow{
        padding-top: 30px;
    }

    .row_3 .heading {
        font-size: 22px;
    }

    .row_3 .text {
       max-width: 100vw;
    }
    
    .row_3 .text span {
        padding: 0px 0 5px;
    }
}