@font-face {
  font-family: 'Dialog';
  font-weight: 300;
  font-style: normal;
  src: url('/wcorp/gc/prod/es_ES/estaticos/smart_city/fonts/dialog_light_regular-webfont.woff2') format('woff2'),
       url('/wcorp/gc/prod/es_ES/estaticos/smart_city/fonts/dialog_light_regular-webfont.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Dialog';
  font-weight: bold;
  font-style: normal;
  src: url('/wcorp/gc/prod/es_ES/estaticos/smart_city/fonts/dialog_bold-webfont.woff2') format('woff2'),
       url('/wcorp/gc/prod/es_ES/estaticos/smart_city/fonts/dialog_bold-webfont.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-family: 'Dialog';
  font-weight: normal;
  font-style: normal;
  src: url('/wcorp/gc/prod/es_ES/estaticos/smart_city/fonts/dialog_regular-webfont.woff2') format('woff2'),
       url('/wcorp/gc/prod/es_ES/estaticos/smart_city/fonts/dialog_regular-webfont.woff') format('woff');
  font-display: swap;
}

:root {
  --green: #61A60E;
  --orange: #E9652C;
  --dark-grey: #7D858B;
}

#smartcity .bg-modal {
  background-color: rgba(255,255,255,.7);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  display: none;
}

#smartcity .bg-modal.show {
  display: none;
}

#smartcity.mobile .bg-modal.show {
  display: block;
}

#smartcity .bg-modal .modal {
  padding: 70px 20px 30px;
  color: #38424A;
  font-size: 16px;
  line-height: 17px;
  font-family: 'Dialog';
  font-weight: normal;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 350px;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.27);
  background-color: white;
  height: auto;
}

#smartcity .bg-modal .modal .close {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

#smartcity .bg-modal .modal p.info {
  color: #5F6971;
  font-size: 17px;
  font-family: 'Dialog';
  font-weight: 300;
  text-align: left;
  line-height: 21px;
}

#smartcity {
  position: relative;
}

#smartcity > .container-image {
  border-top: 4px solid var(--green);
  max-width: 1250px;
  margin: 0 auto;
}

#smartcity .container-image > img {
  margin: 0 auto;
  display: block;
  width: 100%;
}

#smartcity > .inner {
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%;
}

#smartcity header {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
}

#smartcity header .logo {
  text-align: center;
}

#smartcity header .highlight {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

#smartcity header .highlight {
  display: block;
  background-color: transparent;
}

#smartcity header .highlight .column {
  width: 100%;
  float: none;
}

#smartcity header .highlight .column .title {
  font-size: 45px;
  line-height: 1;
  color: var(--green);
  font-family: 'Dialog';
  font-weight: 300;
  text-align: center;
  display: block;
  max-width: 529px;
  margin: 0 auto;
}

#smartcity header .highlight .column > img {
  display: block;
  width: 100%;
  height: auto;
}

#smartcity .info-dots {
  position: absolute; 
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  max-width: 1250px;
  transform: translateX(-50%);
}

#smartcity .info-dots .dtext {
  position: absolute;
}

#smartcity .info-dots .dtext .num {
  width: 22px;
  height: 22px;
  background-color: var(--orange);
  color: white;
  font-family: 'Dialog';
  font-weight: normal;
  font-size: 15px;
  text-align: center;
  border-radius: 50%;
  display: block;
  line-height: 24px;
  margin-bottom: 5px;
}

#smartcity .info-dots .dtext p {
  display: block;
  color: #38424A;
  font-size: 14px;
  font-family: 'Dialog';
  font-weight: 300;
  margin: 0;
  line-height: 16px;
  max-width: 140px;
}

#smartcity .info-dots .p1 {
  top: 31%;
  left: 5.5%;
}

#smartcity .info-dots .p2 {
  top: 30.3%;
  left: 28%;
}

#smartcity .info-dots .p3 {
  top: 30.3%;
  left: 54.3%;
}

#smartcity .info-dots .p4 {
  top: 32.3%;
  left: 80%;
  max-width: 100px;
}

#smartcity .info-dots .p5 {
  top: 41%;
  left: 23.5%;
  max-width: 100px;
}

#smartcity .info-dots .p6 {
  top: 41.5%;
  left: 60%;
}

#smartcity .info-dots .p7 {
  top: 80.5%;
  left: 21%;
  max-width: 100px;
}

#smartcity .info-dots .p8 {
  top: 80.5%;
  left: 60.5%;
}

#smartcity .info-dots .p9 {
  top: 88.5%;
  left: 3.2%;
  max-width: 100px;
}

#smartcity .info-dots .p10 {
  top: 88.3%;
  left: 28%;
}

#smartcity .info-dots .p11 {
  top: 89%;
  left: 54%;
  max-width: 100px;
}

#smartcity .info-dots .p12 {
  top: 88.4%;
  left: 78%;
  max-width: 100px;
}

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

  #smartcity header {
    padding: 40px 20px;
  }

  #smartcity .info-dots {
    padding-top: 38px;
  }

}

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

  #smartcity header {
    padding: 20px;
  }

  #smartcity header .highlight {
    margin: 10px 0;
  }

  #smartcity header .highlight .column .title {
    font-size: 25px;
  }

  #smartcity .info-dots {
    padding-top: 78px;
  }

  #smartcity .info-dots .dtext p {
    font-size: 12px;
    display: none;
  }

  #smartcity .info-dots .p1 {
    top: 36%;
    left: 7%;
  }
  
  #smartcity .info-dots .p2 {
    top: 29.3%;
    left: 25%;
  }
  
  #smartcity .info-dots .p3 {
    top: 34%;
    left: 53%;
  }
  
  #smartcity .info-dots .p4 {
    top: 33.5%;
    left: 79.5%;
  }
  
  #smartcity .info-dots .p5 {
    top: 45.5%;
    left: 22.5%;
  }
  
  #smartcity .info-dots .p6 {
    top: 40.5%;
    left: 57%;
  }
  
  #smartcity .info-dots .p7 {
    top: 81%;
    left: 21%;
  }
  
  #smartcity .info-dots .p8 {
    top: 81%;
    left: 58.5%;
  }
  
  #smartcity .info-dots .p9 {
    top: 89%;
    left: 2%;
  }
  
  #smartcity .info-dots .p10 {
    top: 87.5%;
    left: 25%;
  }
  
  #smartcity .info-dots .p11 {
    top: 89%;
    left: 52.7%;
  }
  
  #smartcity .info-dots .p12 {
    top: 87.5%;
    left: 74%;
  }  

}