body {

         }
         #name {
             display:block;
         }
         #grow {
             display:none;
         }
         #spot {
             display:none;
         }
         .LevelOne {
             fill:#FFF;
         }
         .LevelTwo {
             fill:#FFF;
         }
          .LevelThree {
             fill:#FFF;
         }
         .firstmap_height {          
          height:3000px;
         }
.bg {
      background-color:#AFC9C7;  
}
         #firstsvg {
            width: 1138px;
               margin-top: 50px;
          
            z-index:3;
            /*overflow: hidden;*/  
            background-color:#AFC9C7;
    
        -webkit-transform: translateZ(0);
         transform: translateZ(0);
         }
         .description {
             width:80%;
             margin:10px;
         }
         .legendImg {
             position:absolute;
             margin-top: 195px;
             margin-left: 870px;
             z-index: 4;
         }
         #secondmap {
                   background-color:#AFC9C7;   
         }
        .secondlegendImg {
         position:absolute;
             margin-top: 565px;
             margin-left: 50px;
             z-index: 4;
        }
         #thirdchart {
             /*margin-top:50px;*/
             width:70%;
             max-width: 700px;
             margin:50px auto;
         }
         .third {
             margin-top:100px;
             margin-bottom:100px;
         }
          .context {
            height:auto;
            z-index:99;
        }
         .legendImg2 {
            position:absolute;
            margin-left: 600px;
            height:114px;
            width:212px;
         }
         #v_spot {
             cursor:pointer;
         }
         #s_spot {
              cursor:pointer;
         }
         #i_spot {
              cursor:pointer;
         }
         #t_spot {
             cursor:pointer;
         }
         #m_spot {
              cursor:pointer;
         }
         #b_spot {
             cursor:pointer;
         }
         #p_spot {
              cursor:pointer;
         }
         .lineStroke {
             stroke:#828282;
         }    
         .lineStroke2 {
             stroke:#828282;
         }
         .lineStroke3 {
             stroke:#828282;
         }
         .lineStroke4 {
             stroke:#828282;
         } 
         .lineStroke5 {
             stroke:#828282;
         }
         .lineStroke6 {
             stroke:#828282;
         }  
         .lineStroke7 {
             stroke:#828282;
         }
         #info {
             position: absolute;
             margin-top: 40px;
             margin-left: 780px;
         }
         #close {
             position:absolute;
             margin-top: -20px;
             margin-left: 350px;
             z-index:99;
             display:none;
             cursor:pointer;
         }
         .infoImg {
             /*position:absolute;*/
             display:none;
         }
         .locationBox {
             position:absolute;
             display:none;
             margin-top: 120px;
            margin-left: 426px;
         }
         .locationBox2 {
             position:absolute;
             display:none;
             margin-top: 155px;
            margin-left: 426px;
         }
         .locationBox3 {
             position:absolute;
             display:none;
               margin-top: 274px;
                margin-left: 476px;
         }
        .locationBox4 {
             position:absolute;
             display:none;
               margin-top: 337px;
                margin-left: 476px;
         }
        .locationBox5 {
         position:absolute;
         display:none;
         margin-top: 343px;
         margin-left: 414px;
         }
       .locationBox6 {
        position:absolute;
        display:none;
        margin-top: 496px;
        margin-left: 434px;
        }
        .locationBox7 {
        position:absolute;
        display:none;
        margin-top: 496px;
        margin-left: 434px;
        }
       .locationBox8 {
        position:absolute;
        display:none;
        margin-top: 169px;
        margin-left: 333px;
        }
        .locationBox9 {
        position:absolute;
        display:none;
        margin-top: 232px;
        margin-left: 342px;
        }
    .locationBox10 {
        position:absolute;
        display:none;
     margin-top: 243px;
    margin-left: 367px;
        }
     .locationBox11 {
        position:absolute;
        display:none;
         margin-top: 264px;
    margin-left: 372px;
        }
       .locationBox12 {
        position:absolute;
        display:none;
         margin-top: 264px;
    margin-left: 372px;
        }
       .locationBox13 {
        position:absolute;
        display:none;
     margin-top: 362px;
    margin-left: 388px;

        }
       .locationBox14 {
        position:absolute;
        display:none;
     margin-top: 362px;
    margin-left: 388px;

        }
       .locationBox15 {
        position:absolute;
        display:none;
     margin-top: 362px;
    margin-left: 388px;

        }
        .locationBox16 {
        position:absolute;
        display:none;
     margin-top: 362px;
    margin-left: 388px;

        }
        .locationBox17 {
        position:absolute;
        display:none;
     margin-top: 362px;
    margin-left: 388px;

        }
         .locationBox18 {
        position:absolute;
        display:none;
        margin-top: 362px;
        margin-left: 388px;
        }
          .locationBox19 {
        position:absolute;
        display:none;
           margin-top: 362px;
    margin-left: 588px;
        }
        .locationBox20 {
        position:absolute;
        display:none;
           margin-top: 162px;
    margin-left: 588px;
        }
        .location {
            position: absolute;
            background-color: white;
            width: 176px;
            padding: 10px;
            border: 2px solid #828282;
            border-radius: 5px;
         }
         #Box1, #Box2,#Box3,#Box4,#Box5,#Box6,#Box7,#Box8,#Box9,#Box10,#Box11,#Box12,#Box13,#Box14,#Box15,#Box16,#Box17,#Box18,#Box19,#Box20 {
             display:none;
         }
         .gdpBox {
             position:absolute;
             background-color: white;
             border: 2px solid #828282;
             width: 250px;
             border-radius: 5px;
             padding: 10px;
             margin-top: 250px;
             margin-left:60%;
         }
          #firstmap_mobile {
        display:none;
    }
           #info_mobile {
        display:none;
    }
           #thirdchart_mobile {
        display:none;
    }
           .legendImg_mobile {
        display:none;
        height:114px;
        width:212px;
    }
.bar {
      position: absolute;
    opacity:1;
}

.barAnimated {
    animation: barAnime 1.5s ease;
}
@keyframes barAnime {
	from {
		    opacity:0;     
	}
	to {
		   opacity:1;
	}
}

@media only screen and (max-width: 1024px) {
    #firstsvg {
        width:100%;
        left: 0%;
        overflow-x:hidden;
        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
    }
      .legendImg {
         position:absolute;
        margin-top: 185px;
             margin-left:750px;
             z-index: 4;
        }

     .legendImg2 {
    position: relative;
    margin:10px;
    margin-left: 0px;
    height:114px;
    width:212px;
}
         #thirdchart {
        display:none;
    }
    #thirdchart_mobile {
        display:block;
    }
        .third {
    margin-top: 50px;
    margin-bottom: 50px;
}
         #info {
             position: absolute;
             margin-top: -60px;
             margin-left: 450px;
         }
         #close {
             position:absolute;
             margin-top: -20px;
             margin-left: 372px;
             z-index:99;
             display:none;
             cursor:pointer;
         }
         #secondmap {
    margin-top: 67px;
}
             .firstmap_height {
    height:3000px;
}
}
@media only screen and (max-width: 767px) {
    #firstsvg {
        display:none;
    }
    #secondmap {
        display:none;
    }
    #firstmap_mobile {
        display:block;
    }
    .legendImg_mobile {
        display:block;
          height:114px;
    width:212px;
    }
    .context .legendImg {
        display:none;
    }
    .firstmap_height{
    height: auto;
}
    .legendImg2 {
    position: relative;
    margin:10px;
      height:114px;
    width:212px;
}
    #info_mobile {
        display:block;
        margin-top:20px;
    }
    #second .description {
        display:none;
    }
  
    #second .legendImg {
        display:none;
    }
    
    .third {
    margin-top: 50px;
    margin-bottom: 50px;
}
    #thirdchart {
        display:none;
    }
    #thirdchart_mobile {
        display:block;
    }

}