.content-container { width:1200px; position:relative; margin:80px auto;}

.regional-presence-content-col-1 { width:460px; float:left; padding-top:20px; padding-bottom:20px; margin-right:80px;}
.regional-presence-content-col-2 { width:660px; float:left; }


.regional-presence { 
    background:#ddf0f7;
    width:100%; 
}
.regional-presence-container { 
    width:1200px; margin:0 auto; padding-top:80px; padding-bottom:80px; 
}
.regional-presence-column { float:left; width:350px; margin:0 25px; }
.regional-presence-column img { margin:20px 0; max-width:300px; }

.regional-presence-company { float:left; width:220px; height:220px; margin:20px; border:1px solid #ccc;  display: flex;
  justify-content: center;
  align-items: center; text-align:center; padding:10px; text-decoration:none; transition:0.3s; color:#000; cursor:pointer; }

.regional-presence-company span { font-family: "Open Sans", sans-serif; font-size:14px; }

.regional-presence-company:hover { border:1px solid #0396e6; }

.resize-img-90 { width:90%; margin:0 auto;}
.resize-img-80 { width:80%; margin:0 auto;}
.resize-img-45 { width:45%; margin:0 auto;}
.resize-img-40 { width:40%; margin:0 auto;}
.resize-img-35 { width:35%; margin:0 auto;}
.resize-img-30 { width:30%; margin:0 auto;}

@media screen and (max-width: 1250px) {

.content-container { width:740px; position:relative; margin:60px auto;}

.regional-presence-content-col-1 { width:330px; float:left; padding-top:20px; padding-bottom:20px; margin-right:80px;}
.regional-presence-content-col-2 { width:330px; float:left; }

.regional-presence-container { width:740px; }

.regional-presence-column { float:left; width:226.6666666666667px; margin:0 10px; }
.regional-presence-column img { margin:20px 0; max-width:200px; }

.regional-presence-company { float:left; width:127px; height:127px; margin:10px; border:1px solid #ccc;  display: flex;
  justify-content: center;
  align-items: center; text-align:center; padding:10px; text-decoration:none; transition:0.3s; color:#000; cursor:pointer; }

}


@media screen and (max-width: 768px) {

	.content-container { width:100%; position:relative; margin:20px auto;}
	.regional-presence-content-col-1 { width:90%; float:none; padding-top:20px; padding-bottom:10px; margin:0 auto;}
	.regional-presence-content-col-2 { width:90%; float:none; margin:0 auto;}
	
	.regional-presence-container { 
    width:90%; margin:0 auto; padding-top:40px; padding-bottom:20px; }
    .regional-presence-column { max-width:100%; width:100%; float:none; margin:0 auto 60px auto; }
    .regional-presence-column img { max-width:100%; width:100%; }
    
    .regional-presence-company { float:none; margin:20px auto; }

}


/* Pop up (Modal) */

.openmapimg { cursor:pointer; transition:0.3s; }
.openmapimg:hover { opacity:0.6; }

.map-modal-content {
  background-color: #fff;
  margin: 70px auto; /* 15% from the top and centered */
  padding: 30px;
  border-radius:20px;
  height:auto;
  width: 60%; /* Could be more or less, depending on screen size */
  display: flex;
  justify-content: center;
  align-items: center; text-align:center;
  position:relative;
}

.map-modal-content img { max-width:100%; }

.map-modal-content p { font-size:14px; font-weight:normal; font-family: "Open Sans", sans-serif; }
.map-modal-content span { font-weight:600; font-family: "Open Sans", sans-serif; }

.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: hidden; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fff;
  margin: 12% auto; /* 15% from the top and centered */
  padding: 30px;
  border-radius:20px;
  height:250px;
  width: 250px; /* Could be more or less, depending on screen size */
  display: flex;
  justify-content: center;
  align-items: center; text-align:center;
  position:relative;
}

.modal-content p { font-size:14px; font-weight:normal; font-family: "Open Sans", sans-serif; }
.modal-content span { font-weight:600; font-family: "Open Sans", sans-serif; }

.close {
  color: #0396e6;
  float: right;
  font-size: 40px;
  font-weight: bold;
  position:absolute;
  top:0; 
  right:15px;
}

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

@media screen and (max-width: 768px) {
 
    .modal-content {
        margin: 40% auto; /* 15% from the top and centered */
    }
}