/*linear-gradient(to right, $main, $secondary)*/

.hero
  background: url(../img/building-1245984_960_7201.jpg)
  color: $text-inverse
  padding-top: 0em
  padding-bottom: 4em
  text-align: center
  background-size: cover
  background-position: center

  @media(min-width: 725px)
    text-align: left
    padding-bottom: 0
    height: 80vmin
    min-height: 800px

.hero-text
  @media(min-width: 725px)
    margin-top: 10vmax
    text-align: left

.form-wrapper
  display: flex
  align-items: center
  justify-content: space-evenly
  width: 90%
  margin: auto
  color: black
  border-radius: 20px
  input
    padding: 0.1rem 0.1rem
  label
    margin: 0rem 0.1rem

#enviar
  padding: 0.1rem
  background: #1d1d18
  border: none
  color: white
  font-size: 1.8rem
  cursor: pointer
  width: 100%
  padding: 0.2rem
  margin-top: 2rem
  border-bottom-left-radius: 20px
  border-bottom-right-radius: 20px

.contacto-wrapper
  padding: 1rem
  display: flex
  min-height: 70vh
  align-items: center
  justify-content: center
  width: 95%
  margin: auto
  background: rgba(255, 255, 255, 0.7)
  color: black
  border-radius: 20px
.name-form
  padding: 1rem
  text-align: center
.email-form
  padding: 1rem
  text-align: center
.hero-contacto
  color: $text-inverse
  padding-top: 0em
  padding-bottom: 5em
  text-align: center
.hero-contacto-sales
  padding-top: 0em
  padding-bottom: 6em
  text-align: center

.hero-mv
  background: url(../img/architectural-design-architecture-black-and-white-1755848.jpg)
  background-size: cover
  background-position: auto
  color: $text-inverse
  padding-top: 0em
  padding-bottom: 8em
  text-align: center

  @media(min-width: 725px)
    text-align: left
    padding-bottom: 0
    height: 80vmin
    min-height: 800px
