html {
    background-color: #3B3A40;
}
body {
    margin:0;
}

#name {
    text-decoration: underline;
    position: absolute;
    top: 99%;
    left: 46%;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color:  #F5F5F5;
    font-size: 1 em;    
}

#twitter {
    display: none;
    position: absolute;
    top: 8px;
    left: 40px;
}

#facebook {
    display: none;
    position: absolute;
    top: 8px;
    left: 95px;
           
}

#linkedin {
    display: none;
    position: absolute;
    top: 8px;
    left: 150px;
}

#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image10, #image11 {
      min-width: 811px;
      min-height: 470px;
width: 100%;
  height: auto;
    position: absolute;
    top: 0;
}

#loading
{
z-index: 100;
width: 100%;
  height: auto;
    position: absolute;
}

#page12TopText{
  display: none;
  position: absolute;
  left: 5%;
  top: 10%;
  height: 15%;
}

#image12 {
height:28%;
width:auto;
display: none;
left: 5%;
top: 23%;
position: absolute;
}

#image12f {
height:28%;
width:auto;
display: none;
left: 5%;
top: 23%;
position: absolute;
}


#image13, #image13f {
height:30%;
width:auto;
display: none;
left: 35%;
top: 23%;
position: absolute;
}

#image14 {
height:35%;
width:auto;
display: none;
left: 60%;
top: 23%;
position: absolute;
}

#image14t {
height:25%;
width:auto;
display: none;
left: 5%;
top: 60%;
position: absolute;
}

#image4-i {
    position: absolute;
left: 66%;
top: 5%;
}

#image4-info {
    position: absolute;
left: 45%;
top: 5%;
top: -500px;
}
 #Arrow2, #Arrow3, #Arrow4, #Arrow5, #Arrow6, #Arrow7, #Arrow8,#Arrow10, #Arrow11{
top: 45%;
position: absolute;
width: 100px;
height: 100px;

}

#Arrow2:hover, #Arrow3:hover, #Arrow4:hover , #Arrow5:hover , #Arrow6:hover,  #Arrow7:hover, #Arrow8:hover, #Arrow10:hover, #Arrow11:hover {
   background-image: url(http://wellowater.org/narmada/images/ArrowAlt.png);
}


#button1 {
   top: 70%;
    left: 14%;
    height: 40px;
    width: 110px;
    background-color: #303030;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid  #303030  ;
    text-align: center;
    position: absolute;
    cursor: default;
}


#button2 {

    top: 90%;
    left: 8%;
    height: 40px;
    width: 260px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default;
}

#button3 {

    top: 60%;
    left: 81%;
    height: 40px;
    width: 110px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default;
}

#button4 {

    top: 95%;
    left: 10%;
    height: 40px;
    width: 160px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#button5 {

    top: 55vh;
    left: 80%;
    height: 40px;
    width: 160px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#button6 {

    top: 20%;
    left: 64%;
    height: 40px;
    width: 220px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#button7 {

    top: 80%;
    left: 73.5%;
    height: 40px;
    width: 160px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#button8 {

    top: 80%;
    left: 45%;
    height: 40px;
    width: 160px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#button10 {

    top: 50%;
    left: 70%;
    height: 40px;
    width: 160px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#button11 {

    top: 84%;
    left: 73%;
    height: 40px;
    width: 160px;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #F5F5F5;
    text-align: center;
    position: absolute;
    cursor: default
}

#buttonD, #buttonD1 {
     display: none;
    top: 75%;
    left: 50%;
    background-color: #F5F5F5;
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.1 opacity */
    background: rgba(255, 255, 255, 0.1);
    border: 2.5px solid #69c1ff;
    text-align: center;
    position: absolute;
    color: #69c1ff;
    font-size: 1.15em;
    font-weight: bold;
    cursor: pointer;
    font-family: Gotham, Candara, Segoe, Arial, sans-serif;
    padding: 1vmax 1.5vmax;
}

#buttonD{ top: 75%; left: 50%; }

#buttonD1 { top: 75%; left: 70%; }


#button1:hover, #button2:hover, #button3:hover , #button4:hover , #button5:hover,  #button6:hover, #button7:hover, #button8:hover, #button10:hover, #button11:hover {
    background-color: #DC143C;
    border-color: #DC143C;
    opacity: 1;
}

#buttonD:hover, #buttonD1:hover {
     background-color:  #47A3FF;
    border-color: #47A3FF;
    opacity: 1;
    color: #f5f5f5;
}

#panel {
    top: 76%;
    left: 70%;
    height: 50px;
    width: 210px;
    text-align: center;
    position: absolute;
    
}


#text1 {
    font-family: Gotham, Candara, Segoe, Arial, sans-serif;
    color:  #303030  ;
    font-size: 0.8em;
    padding-top: 11.8px;
}

#text2, #text3, #text4, #text5, #text6, #text7, #text8, #text10, #text11 {
    font-family: Gotham, Candara, Segoe, Arial, sans-serif;
    color:  #F5F5F5;
    font-size: 0.6em;
    padding-top: 14px;
}