footer{
  font-size: x-small;
  text-align: center;
  margin-bottom: 2%;
  margin-top: 10%;
}

body{
  padding: 2%;
}

select{
  background-color: #fceff9 ;
  height: 5%;
  padding-left: 3%;
  padding-right: 2%;
  border-radius: 5%;
  font-size: 105%;
  margin-bottom: 1%;
}
select:hover {
  background-color: #ffc1f2;
}
option{
  word-wrap: break-word;
}
option:hover, select:hover{
  cursor: pointer;
}
.vis-title{
  font-size: 350%;
}


.introFrame{
  text-align: center;
  margin-left: 10%
  margin-right: 10%;
  margin-top: 7%;
  /*border: 3px solid #4286f4;*/
  width: 90vw;
  font-size: 130%;
  background: none;
  cursor: pointer;
  color: black;
}
.introFrame a:hover{
  color: #5588c1;
  text-decoration: none;
}
.introFrame:after
{
    border:2px solid #d0d0d0;
    border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    transform:translateX(-50%);
    content:' ';
    display:block;
    width: 50%;
    margin-right: 25%;
    margin-left: 50%;
    margin-bottom: 1%;
    margin-top: 2%;
}


#description{
  width: 95%;
  font-size: 80%;
  height: 5%;
}
#message{
  height: 22%;
  width: 95%;
  font-size: 80%;
  text-align: justify;
  margin-right: 10%;
  padding-top: 3%;
  padding: 2%;
  margin-bottom: 1%;
  background-color: #fceff9 ;
  border-radius: 4%;

}

.side-filter{
  width: 95%;
  padding-left: 0%;
  display: flex;
  flex-direction: column;
  /*flex-wrap: wrap;*/
  /*justify-content: space-around;*/
}
#metricText{
  text-align: center;
  margin-top: 5%;
  display: inline-block;
  padding-left: 20%;
}
.radioMetric{
  padding-left: 4%;
  padding-right: 2%;
  padding-bottom: 3%;
}

.filterButtons{
  height: 100%;
  width: 100%;
  margin-right: 2%;
  border-radius: 5%;
  background-color: #fceff9;
  padding-right: 3%;
  padding-left: 4%;
  padding-top: 4%;
  padding-bottom: 3%;
}
label{
  display:inline;
  width: 100%;
  margin-left: 3%;
}


.filter_title{
  font-weight: bold;
}

.title_hist{
  padding-top: 3%;
  padding-left:7%;
}

#intro{
  text-align: center;
  display: inline-block;
  margin-left: 1%;
  margin-right: 1%;
  width: 90vw;
  height: 20%;
  padding: 5%;

}

#explain{
  top: 4%;
  opacity: 0.8;
  background-color: #ffffff;
  margin: 5%;
  font-weight: bold;
  color: #000000;
  color: black;
}

#frame1{
  padding: 2%;
  margin-bottom: 5%;
  /*border: 3px solid #4286f4;*/
  display: inline-block;
  margin-left: 1%;
  margin-right: 1%;
  width: 90vw;
  height: 80vh;
}
#insideFrame1{
  position: relative;
}

#explain{
  /*z-index: 100;*/
  position: absolute;
  font-size: 110%;
}
.bgrd{
  /*position: absolute;*/
  margin-left: auto;
  margin-right: auto;
  opacity: 0.3;
  width: 90vw;
}

#frame2{
  padding: 1%;
  /*border: 3px solid #4286f4;*/
  width: 96vw;
  height: 100vh;
  margin-bottom: 5%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#frame3{
  padding: 1%;
  padding-right: 3%;
  padding-left: 7%;
  margin-bottom: 6%;
  /*border: 3px solid #4286f4;*/
  display: inline-block;
  width: 90vw;
}
#didUSee{
  margin-top: 3%;
  margin-bottom: 1%;
  font-size: 100%;
}
#reveal{
  background-color: #fceff9 ;
  fill: #fceff9 ;
  border: 3% solid black;
  height: 5%;
  width:25%;
  margin-left: 1%;
  margin-bottom: 1%;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: 10%;
}
#reveal:hover {
  background-color: #ffc1f2;
  cursor:pointer;
}
#reveal:active {
  cursor:pointer;
  background-color: #ffc1f2;
  box-shadow: 0 2% #666;
  transform: translateY(2%);
}
#textToHide{
  /*border: 3px solid #4286f4;*/
}
#frame4{
  margin-bottom: 10%;
  /*border: 3px solid #4286f4;*/
  width:  94vw;
  height: 100vh;
  margin-bottom: 12%;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#frame5{
  padding-left: 2%;
  padding-right: 2%;
  /*border: 3px solid #4286f4;*/
  width: 90vw;
  height: 80vh;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

#frame6{
  padding-left: 10%;
  padding-right: 10%;
  width: 90vw;
  margin-top: 3%;
  margin-bottom: 10%;
  text-align: center;
}

#frame6:after
{
    border:2px solid #d0d0d0;
    border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    transform:translateX(-50%);
    content:' ';
    display:block;
    width: 50%;
    margin-right: 25%;
    margin-left: 50%;
    margin-bottom: 1%;
    margin-top: 1%;
}



#left2 {
  text-align: justify;
  padding-right: 2%;
  padding-top: 2%;
  left: 0%;
  width: 23%;
  height: 100%;
  /*font-size: 90%*/
}
#left2 p{
  margin-bottom: 4%;
  padding-top: 0%;
}

#right2 {
  margin-bottom: 0%;
  padding-top: 2%;
  padding-left: 1%;
  right: 0%;
  width: 75%;
  height: 100%;
  float: right;
}

#left3 {
  padding: 2%;
  margin-bottom: 10%;
  left: 0px;
  /*border: 3px solid #42f4f1;*/
}


#right3 {
  padding: 2%;
  margin-bottom: 5%;
  right: 0px;
  width: 75%;
  /*border: 3px solid #73AD21;*/
  float: right;
}

#left4 {
  padding: 5%;
  padding-right: 4%;
  margin-bottom: 2%;
  padding-top: 5%;
  left: 0px;
  width: 25%;
  height: 100%;
}


#right4 {
  padding: 0.5%;
  margin-bottom: 5%;
  right: 0px;
  width: 75%;
  height: 100%;
  /*border: 3px solid #73AD21;*/
  float: right;
}

#left5 {
  padding-top: 4%;
  padding-left: 6%;
  padding-right: 4%;
  margin-bottom: 5%;
  left: 0px;
  width: 40%;
  height: 100%;
  float: left;
}


#right5 {
  padding-top: 3%;
  padding-left: 0%;
  margin-bottom: 5%;
  right: 0%;
  width: 60%;
  height: 100%;
  /*float: right;*/
}

#tks{
  display: inline-block;
  width: 90vw;
  text-align: center;
  font-size: 100%;
}
#tks ul{
  padding-left:40%;
  padding-right:20%;
  text-align: left;
}
#links{
  margin-top: 4%;
  text-align: center;

}

svg{
  width: 100%;
/*  padding-left:0%;
  padding-right: 0%;
  padding-top: 0%;*/
}

#maps .map_indiv{
  cursor:pointer;
  width: 30%;
  padding-top: 0%;
}
.map_indiv p{
  margin-bottom: 0%;
  padding-bottom: 0%;
}
#maps img{
  width: 100%;
}
#maps img:active {
  cursor:pointer;
  box-shadow: 0 2% #666;
  transform: translateY(2%);
}

#maps{
  padding-top: 0%;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#legendMaps{
  font-size: 70%;
  text-align: center;
  padding-left: 35%;
  height: 2%;
  margin-bottom: -10%;
}

.vaContainer1{
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.vaContainer2{
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}


.column1{
    /*border: 3px solid #73AD21;*/
    text-align: left;
    padding-left: 0%;
    margin-right: 0%;
    margin-left: 0%;
    padding-top: 1%;
    margin-top: -2%;
    flex: 1;
    width: 50%;
    padding-bottom: 0%;
}
#colcut, #colcut2{
  padding-top: 2.5%;
}
.column {
    text-align: center;
    flex: 1;
    padding-right: 2%;
    padding-left: 2%
    width: 29%; 
    padding-bottom: 1%;
}

.title_hist_cut, .title_hist_cut2{
  padding-left: 30%;
  padding-bottom: 2%;
  margin-bottom: 0%;
}

.thresholdFilter:hover{
  cursor: pointer;
}
.bottomImg{
  width: 90%;
  /*padding-right: 10%;*/
}
#right52{
  padding-left: 20%;
}

a{
  color: black;
  text-decoration: none;
  width: 100%;
}
#frame6 a, #tks a, #links a{
  color: #5588c1;
}
#explain a:hover {
  width: 100%;
  background-color: #ffc1f2;
  border-radius: 5%;
  padding: 0.2%;
  padding-left: 0.5%;
  padding-right: 0.5%;
  color: black;
  text-decoration: none;
}

rect{
  border-radius: 1%;
}
ol{
  display: inline-block;
  text-align: left;
}