/* CONTACT-BANNER */

.contact-banner {
    background-image: url('../img/contact-banner.png');
    background-position: center;
    background-size: cover;
    color: #383838;
    min-height: 40vh;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

/* FORM-CONTAINER */

  .form-container {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
    font-family: 'Didact Gothic', sans-serif;
    color: #FEFCFB;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  .company-info {
    color: #383838;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .company-info h3,
  .company-info ul li:first-of-type {
      margin-bottom: 2rem;
  }

  .fa-road,
  .fa-phone { margin-right: 5px; }

  .wrapper {
    box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
  }
  
  .wrapper > * {
    padding: 1rem;
  }

  .contact {
    background:#383838;
  }

/* FORM STYLES */

.contact form {
    display: flex;
    flex-direction: column;
  }
  
  .contact form label {
    display: block;
  }
  
  .contact form p {
    margin: .5rem 0;
  }
  
  .contact form .full {
    grid-column: 1 / 3;
  }
  
  .contact form button,
  .contact form input,
  .contact form textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #DA4167;
    color: #383838;
  }
  
  .contact form button {
    background: #DA4167;
    color: #FEFCFB;
    border: 0;
    text-transform: uppercase;
  }
  
  .contact form button:hover,
  .contact form button:focus {
    background:#FEFCFB;
    color:#383838;
    outline: 0;
    transition: all 1s ease-out;
    cursor: pointer;
  }
  
/* LARGE SCREENS */

  @media (min-width:700px) {

    .wrapper {
      display: grid;
      grid-template-columns: 1fr 2fr;
    }
  
    .wrapper > * {
      padding: 2rem;
    }  

    .company-info h3, .company-info ul, .brand {
      text-align: left;
    }

    .contact form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
    }

    .contact form p { margin: 0; }
  
  }

  /* CONTACT-LOCATION */

  .contact-location {
    max-width: 85%;
    margin: 2rem auto;
    text-align: center;
  }
  
  #mapa {
    height: 350px;
  }

  @media screen and (min-width:700px) { 
    
    #mapa {
      height: 550px;
    }

  }