* {
  box-sizing: border-box;
}
body {
  background:#1b2b42;
}

h1 {
  color:#1b2b42;
  font-family:'Bebas Neue Bold';
  font-weight:normal;
  font-size:42px;
  padding:15px;
}

sup {
  font-size:20px;
}

.bar{
  fill: #1d68a5;
}

.header {
  background-color: #fff;
}

.banner_logo {
height:80px;
vertical-align: middle;
margin-left:50px;
padding-right:50px;
float:left;
}

.menu {
  width: 50%;
  float: left;
  padding: 10px;
  height:75%;
}

.menu_j {
  width: 40%;
  float: left;
  padding: 10px;
  height:75%;
}

.main_j {
  width: 60%;
  float: left;
  padding-top: 10px;
  height:75%;
}

.main {
  width: 50%;
  float: left;
  padding-top: 10px;
  height:75%;
}

.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

td {
  padding:5px 20px;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: #1b2b42;
  }
.infos {display:block;
width:100%;
height:50%; }
.menu {display:block;
width:100%;
height:50%;}
.menu_j {width: 100%;}
.main {width:100%;
  height:50%;
padding :0px 10px;}
.main_j {width: 100%;}
.banner_logo {
  position:relative;
  float:none;
  alignment-baseline: middle; 
}
td { 
    /* Behave  like a "row" */
    content: attr(data-td);
    display:block;
    border: none;
    position: relative;
    font-size-adjust:0.4; 
  }

h1 {
text-align: center;
  padding:0px;
}
}




polygon {
  fill:"#828282";
  stroke:purple;
  opacity:0.5;
}
polygon:hover{
  fill: yellow;
  opacity:1;
}