* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body {
  background-color: #f7fdb1;
  font-family: "Roboto Condensed", sans-serif;
  color: #1d1919;
}

h1,
h2 {
  font-family: "Domine", serif;
}

#salto ul {
  margin: 0 auto 0.7em auto;
  width: 20em;
}

#salto li {
  display: inline-block;
  text-align: center;
  width: 50%;
}

#salto a {
  color: initial;
  opacity: 0.5;
  font-size: 0.8em;
  font-weight: bold;
}

header h1 {
  text-align: center;
}

#abrir-menu {
  text-decoration: none;
  text-align: center;
  background-color: #1d1919;
  padding: 0.2em 0;
}

#abrir-menu a {
  color: #f7fdb1;
  font-size: 1.5em;
}

#menu {
  background-color: rgba(0, 0, 0, 0.95);
}

#menu ul {
  list-style: none;
}

#menu input {
  font-family: inherit;
  background-color: inherit;
  color: white;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #f7fdb1;
  outline: none;
}

#social-menu {
  position: fixed;
  display: inline-block;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  width: 2.7em;
  height: 9em;
  vertical-align: middle;
  background-color: black;
  border-radius: 0 0.3em 0.3em 0;
  -webkit-border-radius: 0 0.3em 0.3em 0;
  -moz-border-radius: 0 0.3em 0.3em 0;
  -ms-border-radius: 0 0.3em 0.3em 0;
  -o-border-radius: 0 0.3em 0.3em 0;
}

#social-menu ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  width: 100%;
  list-style: none;
}

#social-menu li {
  display: blocK;
  margin: 0.6em 0;
}

#social-menu a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: #f7fdb1;
  font-size: 1.8em;
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
}

#social-menu #social-fb:hover {
  color: #0071bc;
}

#social-menu #social-fb:focus {
  color: #0071bc;
}

#social-menu #social-tw:hover {
  color: #00acee;
}

#social-menu #social-tw:focus {
  color: #00acee;
}

#social-menu #social-in:hover {
  color: #e1306c;
}

#social-menu #social-in:focus {
  color: #e1306c;
}

#social-menu i {
  vertical-align: middle;
}

article h2 {
  padding-bottom: 0.3em;
  border-bottom: solid #1d1919 2px;
}

article a {
  color: #2f89fc;
  text-decoration: none;
}

article#pobrestortugas {
  background-color: rgba(29, 25, 25, 0.95);
  color: #f7fdb1;
}

article#pobrestortugas h2 {
  border-color: #f7fdb1;
}

aside {
  margin-top: 1em;
}

aside h3 {
  text-align: center;
  font-size: 1.4em;
}

aside img {
  width: 50%;
  margin: 1em auto;
}

aside form {
  margin: 1em 0;
  padding: 0 0.5em;
}

aside form fieldset {
  padding: 0.5em 0.5em;
  border: solid rgba(0, 0, 0, 0.2) 1px;
}

aside form legend {
  text-align: center;
}

aside form p {
  text-align: center;
  font-weight: bold;
  margin: 0 0 0.5em 0;
}

aside form label {
  display: block;
  margin: 0.3em 0;
}

aside form input[type=submit] {
  display: block;
  margin: 1em auto 0 auto;
  padding: 0.5em 1em;
  color: #f7fdb1;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  -ms-border-radius: 0.2em;
  -o-border-radius: 0.2em;
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
}

aside form input[type=submit]:hover {
  background-color: black;
}

aside form input[type=submit]:focus {
  background-color: black;
}

footer {
  height: 5em;
  background-color: #1d1919;
}

@media screen and (min-width: 360px) {
  header {
    margin-bottom: 0.5em;
  }

  #menu {
    width: 100%;
    height: 0;
    overflow: hidden;
    outline: none;
    transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
  }

  #menu:focus-within {
    height: 12em !important;
  }

  #menu li {
    text-align: center;
  }

  #menu form {
    height: 2em;
  }

  #menu input {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0 2em;
    outline: none;
    font-size: 1.3em;
    font-weight: 500;
  }

  #menu a {
    padding: 1em 0;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
  }

  #menu a:hover {
    font-size: 120%;
    background-color: #1d1919;
  }

  #menu a:focus {
    font-size: 1.1em;
    background-color: #1d1919;
  }

  #menu a:active {
    background-color: #1d1919;
  }

  #social-menu {
    display: none;
  }

  article #title {
    margin: 0.7em 0.7em;
    font-size: 1.3em;
  }

  article img {
    width: 100%;
  }

  article p {
    font-size: 1.1em;
    margin: 1em 0.7em;
  }

  article#pobrestortugas {
    padding: 1em 0.8em;
    margin: 1.5em 0.7em;
    border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    -ms-border-radius: 0.5em;
    -o-border-radius: 0.5em;
  }

  article#pobrestortugas p {
    margin: 1em 0;
  }

  article#pobrestortugas h2 {
    font-size: 1.7em;
  }

  figure {
    margin: 0 0 0.7em 0;
  }

  figure figcaption {
    font-size: 0.9em;
    margin-left: 0.3em;
  }

  aside {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  header h1 {
    font-size: 3.5em;
  }

  #abrir-menu {
    display: none;
  }

  #menu {
    display: block;
    position: relative;
    height: auto !important;
  }

  #menu:focus-within {
    height: initial !important;
  }

  #menu ul {
    margin-left: 0.5em;
  }

  #menu li {
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  #menu a {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  #menu form {
    width: 80%;
    margin: 0 auto;
  }

  #menu input {
    padding-left: 1em;
    padding-right: 1em;
  }

  article #title {
    font-size: 2em;
  }

  article p {
    margin: 1em 3em;
    font-size: 1.3em;
  }

  article#pobrestortugas {
    padding: 1em 1.5em;
    margin: 1.5em 3em;
  }

  article#pobrestortugas h2 {
    font-size: 2.5em;
  }
}

@media screen and (min-width: 1024px) {
  body {
    width: 88%;
    margin: 0 auto;
    border-left: solid black 1px;
    border-right: solid black 1px;
    box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.75);
    -ms-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.75);
    -o-box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.75);
  }

  header h1 {
    font-size: 4.5em;
  }

  #menu form {
    width: 120%;
  }

  #social-menu {
    display: inline-block;
  }

  main {
    display: inline-block;
    width: 75%;
    border-right: solid rgba(0, 0, 0, 0.2) 1px;
  }

  section {
    width: 90%;
    margin: 0 auto;
  }

  article {
    margin: 0 0;
  }

  article p {
    margin: 1em 1em;
  }

  article#pobrestortugas {
    margin: 3em 2.5em;
  }

  aside {
    display: inline-block;
    width: 25%;
    vertical-align: top;
  }

  aside img {
    display: block;
  }
}

@media screen and (min-width: 1280px) {
  body {
    width: 75%;
  }

  header h1 {
    font-size: 5em;
  }

  #menu a {
    font-size: 1.1em;
  }
}

/*# sourceMappingURL=style.css.map */