@font-face {
  font-family: Nexa Light;
  src: url(./Fonts/Nexa Light.otf);
  font-style: normal;
}

@font-face {
  font-family: Nexa Bold;
  src: url(./Fonts/Nexa Bold.otf);
  font-style: normal;
}

body {
  background-color: #F2F2F2;
  width: 90.0em;
  height: 120.0em;
  position: relative;
  margin:auto;
  font-size: 62.5%; /* 1em = 10px */
}

#qr {
  position: relative;
  width: 30.0em;
  height: 30.0em;
}

#right-nav2 {
  width: 30.0em;
  height: 60.0em;
  position: absolute;
  margin-left: 45.0em;
  margin-top: 21.5em;
}

.comentario {
  position: relative;
  margin-top: 2.5em;
  width: 19em;
  height: 30em;
  font-family: Nexa Light;
  font-size: 1.6em;
  text-align: justify;
}

#left-nav {
  position: absolute;
  left: 10.0em;
  top: 21.5em;
  width: 20.5em;
  height: 60.0em;
}

#left-nav2 {
  position: absolute;
  margin-left: 20.0em;
  margin-top: 21.5em;
  width: 20.6em;
  height: 60.0em;
}

#once {
  width: 20.5535em;
  height: 52.5908em;
  position: relative;
}


#human {
  width: 18.8em;
  height: 18.8em;
  position: absolute;
  left:37.8em;
  top: 17.1em;
  border-width: medium;
  border-color: red;
  border-style: solid;
}

#humano {
  position: relative;
  padding: 2.2em;
  width: 14.5em;
  height: 14.5em;
}


#maquina {
  position: relative;
  padding: 2.2em;
  width: 14.5em;
  height: 14.5em;
}

#machine {
  width: 18.8em;
  height: 18.8em;
  position: absolute;
  left:59.7em;
  top: 17.1em;
  border-width: medium;
  border-color: red;
  border-style: solid;
}

#media {
  width: 18.8em;
  height: 18.8em;
  position: absolute;
  left:37.8em;
  top: 37.5em;
  border-width: medium;
  border-color: red;
  border-style: solid;
}

#jornal {
  position: relative;
  padding: 2.2em;
  width: 14.5em;
  height: 14.5;
}

#design {
  width: 18.8em;
  height: 18.8em;
  position: absolute;
  left:59.7em;
  top: 37.5em;
  border-width: medium;
  border-color: red;
  border-style: solid;
}

#desenho {
  position: relative;
  padding: 2.2em;
  width: 14.5em;
  height: 14.5;
}

#interaction {
  width: 18.8em;
  height: 18.8em;
  position: absolute;
  left:37.8em;
  top: 58.0em;
  border-width: medium;
  border-color: red;
  border-style: solid;
}

#interacao {
  position: relative;
  padding: 2.2em;
  width: 14.5em;
  height: 14.5;
}

#diagram {
  width: 18.8em;
  height: 18.8em;
  position: absolute;
  left:59.7em;
  top: 58.0em;
  border-width: medium;
  border-color: red;
  border-style: solid;
}

#diagrama {
  position: relative;
  padding: 2.2em;
  width: 14.5em;
  height: 14.5;
}

#tags {
  width: 64.3em;
  height: 6em;
  position: absolute;
  margin-left: auto;
  margin-top: 70em;
  font-size: 1.4em;
  font-family: Nexa Bold;
  text-align: center;
}

a {
  color: red;
}

a:hover {
  color: grey;
  text-decoration: none;
}

a:visited {
  color: black;
}

footer {
  width: 90em;
  height: 10.4em;
  position: absolute;
  top:110em;
  background-color: white;
}

#logo {
  position: relative;
  left: 10em;
  top: 2.5em;
}

.creditos{
  font-family: Nexa Bold;
  font-size: 2.1em;
  color: black;
  position: relative;
  left: 18em;
  bottom: 2em;
}

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
footer{
  display: none;
}
#tags {
  width: 30em;
  height: 10em;
  position: absolute;
  margin-left: 2em;
  margin-top: 70em;
  font-size: 2em;
  font-family: Nexa Bold;
  text-align: center;
}

}

@media screen and (max-width: 900px) {
footer {
    display: none;
  }
  #tags {
    width: 50em;
    height: 10em;
    position: absolute;
    margin-left: 2em;
    margin-top: 70em;
    font-size: 1.4em;
    font-family: Nexa Bold;
    text-align: center;
  }
}

@media screen and (max-width: 500px) {
  #left-nav {
    display: none;
  }
#once {
  display: none;
}
#tags {
  width: 30em;
  height: 10em;
  position: absolute;
  margin-left: 2em;
  margin-top: 70em;
  font-size: 1.4em;
  font-family: Nexa Bold;
  text-align: center;
}
#adapt{

}
}