/* @font-face {
  font-family: "CooperHewitt-Semibold";
  src: url("./CooperHewitt-Semibold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
  font-family: "CooperHewitt-Book";
  src: url("./CooperHewitt-Book.otf") format("opentype");
    font-weight: medium;
    font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-Medium";
  src: url("./CooperHewitt-Medium.otf") format("opentype");
    font-weight: medium;
    font-style: normal;
}
@font-face {
  font-family: "CooperHewitt-Light";
  src: url("./CooperHewitt-Light.otf") format("opentype");
    font-weight: lighter;
    font-style: normal;
}
*/

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@100;300;500&display=swap');

body, html {
  background-color: white;
  width: 100vw;
  color: black;
  padding: 0;
  margin: 0;
  font-family: "CooperHewitt-Book";
  font-family: 'Urbanist', sans-serif;
  font-weight: 300;
  font-size: 1rem;
}
#content p {
  font-size: clamp(0.7rem, 3vw, 2rem);
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.3;
}
header {
  min-height: 10rem;
  height: min-content;
  position: relative;
  color: white;
  font-family: sans-serif;
  font-weight: 600;
}


header #menu {
  background-color: rgba(0,0,0,0.55);
  display: flex;
  height: calc(1rem + 6vw);
}
header #menu * {
  text-decoration: none;
  font-size: calc(9px + 0.6vw );
  color: white;
  font-weight: 100;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
  box-sizing: border-box;
  flex-grow: 1;
  border-bottom: 2px solid white;
  transition: background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.menu__link__formular {
  background-color: rgba(0,0,0,0);
}

header #menu *:hover {
  background-color: rgba(0,0,0,0.2);
}


header #banner__text {
  width: 100%;
}
header #banner__text * {
  text-align: center;
  font-family: "CooperHewitt-Book";
  font-family: 'Urbanist', sans-serif;
}
header #banner__text__ln1 {
  font-size: calc(0.7rem + 0.6vw);
}
header #banner__text__ln2 {
  font-size: calc(2.1rem + 0.6vw);
  font-family: "CooperHewitt-Semibold";
  font-family: 'Urbanist', sans-serif;
}
.banner__img__info {
  filter: brightness(0.7);
}
header #menu {
  position: absolute;
  width: 100%;
  text-transform: uppercase;
  z-index: 420;
}
header #banner {
  height: 100%;
  overflow: hidden;
  position: relative;
}
header #banner__img {
  width: 100vw;
  min-height: 4rem;
  height: auto;

  overflow: hidden;
}
header #banner__text {
  position: absolute;
  transform: translate(-50%, -30%);
  top: 50%;
  left: 50%;
}

#content {
  padding: 10vw;
  padding-top: 15vw;
  max-width: 57rem;
  margin: auto;
}
#content.intro > * {
  text-align: center;
}

hr {
  margin: 6rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

footer {
  text-align: center;
  font-weight: 500;
}

footer > p {
  padding: 10vw;
}

footer svg {
    height: 0.9rem;
    position: relative;
    top: 0.2rem;
}
footer a {
  color: black;
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}
 h2 {
   font-family: "CooperHewitt-Medium";
   font-family: "Urbanist", sans-serif;
   text-transform: uppercase;
   font-size: clamp(0.8rem, 3.2vw, 2.2rem);
   margin: 0;
   letter-spacing: 1.6px;
 }

 form {
   display: flex;
   flex-direction: column;

 }
 form label {
  position: relative;
  top: -2.2em;
  left: 0.8rem;
  color: white;
  pointer-events: none;
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  color: rgb(30,30,30);
 }

  input:focus + label,
  input:not(:placeholder-shown) + label {
      top: -5rem;
      color: black;
    }

 form * {
   padding-bottom: 1rem;
   
 }
 form input, form textarea{
  padding-top: 1rem;
  padding-left: 1rem;
  background-color: rgba(255,255,255,0.2);
  color: rgb(30,30,30);
  transition: linear 0.1s;
  border: 2px solid black;
 }
 form textarea {
   resize: none;
   position: absolute;
   max-width: 57rem;
   padding-right: 10vw;
   width: 100%;
   box-sizing: border-box;
 }
 .box {
   height: 21rem;
   position: relative;
 }
 textarea + label {
   top: 1rem;
 }
    textarea:focus + label,
    textarea:not(:placeholder-shown) + label
     {
      top: -1.5rem;
      color: black;
    }
input:not(:placeholder-shown):not(:focus):invalid {
  border: 2px solid rgba(255,127,127,1);
}

.form__upload__label {
  position: unset;
  top: unset;
  padding-bottom: 0;
}

input[type=file] {
  border: none;
  padding-bottom: 1.5rem;
  padding-left: 0;
}

input[type=file]::file-selector-button, input[type=file]::-webkit-file-upload-button {
  border: 1px solid black;
  background-color: white;
  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  margin-right: 1rem;
  border-radius: 0;
}

.form_response {
  text-align: center;
  font-size: clamp(0.5rem, 1.8vw, 1.5rem) !important;
  opacity: 1;
  animation: cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s;
}
form:not(".form--result") p {
  opacity: 0;
  animation: cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s;
}

.form--result p {
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
}