/* Scss Document */
/* Brandcolors */
/* ============================= CONTACT STYLES ============================== */
#contact_form_body {
  width: 100%;
  height: 100%;
  padding: 15vh 0 0 0;
  background: #112758;
  display: flex;
  justify-content: center;
  align-items: center; }
  #contact_form_body .form {
    width: 100%;
    padding: 0 5vh; }
    #contact_form_body .form .form__item {
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 2% 0; }
      #contact_form_body .form .form__item label {
        padding: 2% 0; }
      #contact_form_body .form .form__item input {
        height: 45px;
        padding-left: 10px; }
      #contact_form_body .form .form__item input:focus {
        outline-color: #d15152; }
      #contact_form_body .form .form__item .form__item--label {
        font-size: 0.8em;
        padding: 2% 0; }
    #contact_form_body .form .form__item--scf-website {
      display: none; }
    #contact_form_body .form .form__item--scf_accept .form__item--label {
      display: none; }
    #contact_form_body .form .form__item--scf_accept label {
      height: 10px;
      display: flex;
      align-items: center;
      font-weight: 300;
      font-size: 0.7em; }
      #contact_form_body .form .form__item--scf_accept label input {
        margin: 0;
        margin-right: 15px;
        height: auto; }
    #contact_form_body .form textarea {
      height: 20vh;
      outline-color: #d15152;
      padding: 10px 0 0 10px; }
    #contact_form_body .form .form__item--submit {
      align-items: center;
      margin: 0 auto; }
      #contact_form_body .form .form__item--submit button {
        background: transparent;
        color: #fff;
        border: 0;
        border-bottom: 2px solid #d15152;
        padding-bottom: 5px; }
      #contact_form_body .form .form__item--submit button:focus {
        outline: none; }
    #contact_form_body .form .form__item--scf_email .field--error--message {
      align-self: flex-end;
      position: absolute; }
    #contact_form_body .form .form--error--message, #contact_form_body .form .field--error--message {
      color: red;
      font-size: 0.8em;
      margin: 1% 0;
      text-align: center; }
  #contact_form_body .form--success--message {
    color: green;
    text-align: center;
    width: 60%; }

#contact_info {
  width: 100%;
  background-color: #d15152;
  color: #fff; }
  #contact_info ul {
    list-style: none;
    margin: 0;
    padding: 50px 5vh; }
    #contact_info ul a {
      color: #fff;
      font-weight: 300;
      text-decoration: none; }
  #contact_info #info_studio {
    font-weight: 300; }

#contact_location {
  background-color: #d15152;
  display: block; }
  #contact_location #map {
    height: 300px; }
  #contact_location a {
    width: max-content;
    margin: 5vh;
    color: #fff;
    font-size: 0.8em;
    display: flex;
    text-decoration: none;
    border-bottom: 2px solid #112758;
    padding-bottom: 5px; }
    #contact_location a img {
      padding-left: 10px; }

@supports (display: grid) {
  @media screen and (min-width: 720px) {
    #contact_page {
      padding-bottom: 10vh;
      background-image: url("../img/jpeg/contact.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
      grid-template-rows: 20vh auto auto auto;
      grid-template-areas: " . . . . . ." ". form form form form ." ". info info info info ." ". location location  location location ." " . . . . . ."; }
      #contact_page #contact_form_body {
        grid-area: form;
        border-radius: 20px 20px 0 0;
        padding: 0; }
      #contact_page #contact_info {
        grid-area: info; }
        #contact_page #contact_info ul {
          padding: 5%; }
      #contact_page #contact_location {
        grid-area: location;
        border-radius: 0 0 20px 20px; } }
  @media screen and (min-width: 1024px) {
    #contact_page {
      grid-gap: 0 50px;
      grid-template-areas: ". . . . . ." ". form form info info ." ". form form location location ." ". . . . . ."; }
      #contact_page #contact_form_body {
        border-radius: 20px; }
      #contact_page #contact_info {
        border-radius: 20px 20px 0 0; } } }