#b1, #b2, #b3{
         color: black;
         position:fixed;
         top:85px;
     }
     #b1{left:200px;}
     #b2{left:400px;}
     #b3{left:600px;}
     
 body {
     /*margin-left:0px;
     margin-right:0px;
     margin-bottom:0px;
     width: 100%;*/
     font-family: 'Roboto', sans-serif;
     display: grid;
     grid-template-columns: auto;
     grid-template-rows: 170px auto;
     grid-template-areas:
         "barra"
         "corpo";
 }
::-moz-selection { /* Code for Firefox */
  color: white;
  background: black;
}

::selection {
  color: white;
  background: black;
}
 .texto,
 .titulo {
     text-transform: uppercase;
     font-size: 30px;
     line-height: 20px;
 }

 .titulo {
     font-size: 90px;
     margin-bottom: 30px;
 }

 #texto {
     position: absolute;
     transform: translate(-50%, );
     top: 34%;
     margin-left: 100px;

 }

 header {
     padding: 10px;
     padding-left: 200px;
     display: grid;
     grid-template-columns: 10% auto;
     grid-area: barra;
     font-size: 20px;
 }

 #nav {
     display: grid;
     grid-template-columns: repeat(3, 10em);
 }

 #corpo {
     margin-left: 200px;
     display: grid;
     grid-area: corpo;
     grid-template-rows: repeat(2, auto);
     grid-template-areas:
         "info"
         "mapa";
 }
#info {
    display: grid;
    grid-area: info;
    
}
 footer {
     display: grid;
     grid-area: pe;
     background-color: black;
     position: fixed;
     top: 95%;
     left: 0;
     z-index: -1;
     width: 100%;
     padding: 0 10px 0 10px;
     color: white;
 }

 button {
     border: none;
     background-color: none;
     text-align: center;
     font-family: sans-serif;
     font-size: 20px;
     background-color: transperant;
     outline: none;
     top: 100%;
 }

 a {
     color:black;
     text-decoration: none;
 }
.menu{
    display: block;
     font-size: 20px;
     color: white;
     position: relative;
     transform: translate(-50%, -50%);
     top: 50%;
     left: 58%;
     margin-bottom: 30px;
}
 #port {
     top: 51%;
     left: 62%;
 }

 #sobre {
     left: 82%;
 }

 #logo {
     background-image: url(../_img/logoEvandroBranco.svg);
     width: 100px;
     height: 100px;
     background-repeat: no-repeat;
     background-size: cover;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform: translate(-50%, );
     top: 50px;
     left: 50px;
     position: fixed;
     z-index:10;
 }

 .container {
     display: none;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 55px;
     left: 83%;
     cursor: pointer;
     -webkit-appearance: none;
 }

 .bar1,
 .bar2,
 .bar3 {
     width: 35px;
     height: 5px;
     background-color: black;
     margin: 6px 0;
     transition: 0.4s;
 }

 .change .bar1 {
     -webkit-transform: rotate(-45deg) translate(-9px, 6px);
     transform: rotate(-45deg) translate(-9px, 6px);
     background-color: white;
 }

 .change .bar2 {
     opacity: 0;
 }

 .change .bar3 {
     -webkit-transform: rotate(45deg) translate(-8px, -8px);
     transform: rotate(45deg) translate(-8px, -8px);
     background-color: white;
 }

 #bola {
     visibility: hidden;
     height: 0px;
     width: 0px;
     border-radius: 100%;
     background-color: black;
     position: absolute;
     transform: translate(-50%, -50%);
     top: 45px;
     left: 85%;
 }

 /* Parte Responsiva do site */
 @media (max-width: 700px) {
#info{
    margin-left:20px;
}
body{
    grid-template-rows: 100px auto;
    position: relative;
    height: 100%;
    overflow-x:hidden;
}
#corpo {
        margin-left: 0px;
     display: grid;
     grid-area: corpo;
     grid-template-rows: auto;
     grid-template-areas:
         "info"
         "mapa";
 }
     #bola {
         visibility: visible;
         opacity: 0;
     }

     .container {
         display: inline-block;
     }

     header {
         display: none;
         grid-template-columns: 10% auto;
         grid-area: barra;
         font-size: 20px;
     }

     #logo {
         width: 65px;
         height: 65px;
         transform: translate(-50%, -50%);
         top: 55px;
         left: 50%;
         position: absolute;
     }

     button {
         visibility: hidden;
     }

     #texto {
         position: absolute;
         top: 170px;
         margin-left: 35px;

     }

     .texto,
     .titulo {
         text-transform: uppercase;
         font-size: 25px;
         position: relative;
     }

     .texto {
         line-height: 26px;
         top: -70px;
     }

     .titulo {
         font-size: 70px;
         margin-bottom: 0px;
         line-height: 55px;
     }

     

     #nav {
         display: none;
         grid-template-columns: repeat(3, 10em);
     }
 }