@import url(./nav.css);
@import url(./footer.css);

/* CONTACT */
.contact {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.contact, .contact .container {
  padding: 0;
  width: 100%;
  max-width: 100%;
  flex-direction: column
}

.contact .container .content {
  width: 100%;
  display: grid;
  max-width: 100%;
  grid-template-columns: repeat(12, 1fr)
}

.contact .container .content .col {
  width: 100%;
  height: 100%;
  display: flex;
  min-height: 736px;
  position: relative;
  align-items: center;
  grid-column: span 12;
  flex-direction: column;
  justify-content: center
}

.contact .container .content .col:first-child {
  background-size: cover;
  background-image: url(../img/speakers/contact.jpg)
}

.contact .container .content .col .maps {
  display: flex;
  max-width: 356px;
  text-align: left;
  position: absolute;
  border-radius: 8px;
  gap: var(--size20-5);
  flex-direction: column;
  box-sizing: border-box;
  padding: var(--size40-10);
  color: var(--text-primary);
  background: var(--secondary);
  box-shadow: var(--shadow0020-secondary);
}

.contact .container .content .col .maps h4,
.contact .container .content .col .form h2 { font-weight: 900 }
.contact .container .content .col .maps h4 { font-size: var(--size24-5) }

.contact .container .content .col .maps .info {
  display: flex;
  font-size: 14px;
  gap: var(--size15-4);
  align-items: flex-start
}

.contact .container .content .col .maps .info p { font-weight: 400 }
.contact .container .content .col .maps .info p span { font-weight: 700 }

.contact .container .content .col .form {
  width: 100%;
  padding: 10px;
  display: flex;
  max-width: 556px;
  gap: var(--size30-5);
  flex-direction: column;
  box-sizing: border-box;
  justify-content: center
}

.contact .container .content .col .form h2 {
  color: var(--secondary);
  font-size: var(--size60-13)
}

.contact .container .content .col .form form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--size20-5);
  flex-direction: column;
  justify-content: center
}

.contact .container .content .col .form form .field {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center
}

.contact .container .content .col .form form .field input,
.contact .container .content .col .form form textarea {
  width: 100%;
  height: auto;
  border: none;
  outline: none;
  border-radius: 8px;
  padding: var(--size24-5);
  font-size: var(--size16-5);
  transition: var(--transition);
  background-color: var(--bg-paper);
  font-family: 'Roboto', sans-serif
}

.contact .container .content .col .form form .field label {
  position: absolute;
  top: var(--size24-5);
  left: var(--size24-5);
  color: var(--text-ternary);
  font-size: var(--size16-5);
  transition: var(--transition)
}

.contact .container .content .col .form form .field input:focus ~ label,
.contact .container .content .col .form form .field input:valid ~ label,
.contact .container .content .col .form form .field textarea:focus ~ label {
  top: 10%;
  font-size: 12px;
  color: var(--secondary)
}

.contact .container .content .col .form form .submit {
  width: 100%;
  padding: 16px 8px;
  text-transform: uppercase;
  background: var(--secondary);
  box-shadow: 0 0 20px var(--secondary)
}

.desktop .contact .container .content .col .form form .submit:hover {
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary),
              var(--shadow0020-secondary),
              var(--shadow0025-secondary)
}



/* RESPONSIVE */
@media screen and (min-width: 900px) {
  .contact .container .content .col { grid-column: span 6; }
}