* {
  box-sizing: border-box;
}

body {
  /* font-family: 'Roboto', sans-serif;
  background-color: #333;
  color: #fff;
  min-height: 100vh;
  margin: 0; */
}

a {
  /* text-decoration: none;
  color: #ffffff; */
}
.text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  margin-top: 2.5px;
  
}
.text2{
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #ffffff;
  margin-top: 10px;
 
}

#logo {
  display: none;
}

#canvas {
  background: #ffffff;
  border-radius: 5px;
  font-family: 'Roboto', sans-serif;
}

/* links in pink circles */
.pink2 {
  width: 120px;
  height: 34px;
  background-color: #C01E5C;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 6px;
  left: 450px;
  
  line-height: 13px;
}

.pink4 {
  width: 107px;
  height: 34px;
  background-color: #C01E5C;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 96px;
  left: 580px;
  line-height: 13px;
}

.pink6 {
  width: 107px;
  height: 34px;
  background-color: #C01E5C;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 96px;
  left: 315px;
  line-height: 13px;
}



/* links in brown circles */
.brown1 {
  width: 107px;
  height: 34px;
  background-color: #715046;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 230px;
  left: 620px;
}

.brown2 {
  width: 170px;
  height: 34px;
  background-color: #715046;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 145px;
  left: 730px;
}

.brown6 {
  width: 107px;
  height: 34px;
  background-color: #715046;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 230px;
  left: 880px;
}

.brown {
  width: 107px;
  height: 34px;
  background-color: #715046;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 335px;
  left: 750px;
}

/* links in blue circles */
.blue2 {
  width: 107px;
  height: 34px;
  background-color: #15499D;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 433px;
  left: 684px;
}

.blue {
  width: 107px;
  height: 36px;
  background-color: #15499D;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 540px;
  left: 827px;
}

.blue6 {
  width: 107px;
  height: 36px;
  background-color: #15499D;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 640px;
  left: 800px;
}

.blue3 {
  width: 107px;
  height: 36px;
  background-color: #15499D;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 640px;
  left: 661px;
}

.blue1 {
  width: 107px;
  height: 36px;
  background-color: #15499D;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 540px;
  left: 557px;
}

/* links in yellow circles */
.yellow2 {
  width: 107px;
  height: 36px;
  background-color: #FAD701;
  background-color:#E5C302;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 430px;
  left: 250px;
}

.yellow6 {
  width: 107px;
  height: 36px;
  background-color: #FAD701;
  background-color:#E5C302;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 539px;
  left: 125px;
}

.yellow3 {
  width: 107px;
  height: 36px;
  background-color: #FAD701;
  background-color:#E5C302;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 640px;
  left: 240px;
}

.yellow4 {
  width: 107px;
  height: 36px;
  background-color: #FAD701;
  background-color:#E5C302;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 539px;
  left: 384px;
}


/* links in red circles */
.red1 {
  width: 107px;
  height: 36px;
  background-color: #C43C27;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 320px;
  left: 180px;
}

.red6 {
  width: 107px;
  height: 36px;
  background-color: #C43C27;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 220px;
  left: 50px;
}

.red2 {
  width: 107px;
  height: 36px;
  background-color: #C43C27;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 125px;
  left: 165px;
}

.red4 {
  width: 107px;
  height: 36px;
  background-color: #C43C27;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  top: 220px;
  left: 285px;
}

.eco2-wrap-outer a {
    color:#FFF;
    font-size:13px;
}
.eco2-wrap > div {
    line-height:13px;
}
.eco2-wrap {
        position: relative;
        width: 1000px;
    margin: 0 auto;
}
.eco2-wrap-outer {
    
}    
#eco-map .yellow2 a:hover,
#eco-map .yellow6 a:hover,
#eco-map .yellow3 a:hover,
#eco-map .yellow4 a:hover {
    color:#715046;
}



@media all and (max-width:1120px){
    
    .eco2-wrap-outer {
        margin-left: -50px;
    }
}

@media all and (max-width:1000px){
    .eco2-wrap {
        margin:auto;
        width:auto;
        overflow-x:scroll;
    }
}