@font-face {
  font-family: Montserrat-Regular;
  src: url('../fonts/montserrat/Montserrat-Regular.ttf'); 
}

@font-face {
  font-family: Montserrat-Light;
  src: url('../fonts/montserrat/Montserrat-Light.ttf');
}

@font-face {
  font-family: Corinthia-Bold;
  src: url('../fonts/Corinthia/Corinthia-Bold.ttf'); 
}

*,
*::after,
*::before {
  box-sizing: border-box;
  font-family: Montserrat-Regular;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-and-descr-container {
  width: 100%;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  justify-content: center;
  align-items: center;
  margin: 2em;
}


/* 

        MID-LOGO 

*/

.side-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 90%;
  height: 100%;
  align-items: center;
  text-align: center;
  margin: auto;
}

.side-contact-logo-container {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
}

    .side-contact-logo {
      background-image: url(../images/logo_nom.svg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 10em;
      width: 10em;
    }

.side-contact-text {
  font-family: Montserrat-Light;
  justify-content: center;
  text-align: center;
  font-size: 11pt;
  width:95%;
  height: fit-content;
  margin: 2em;
}

.contact-text-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-text-btn {
  background-color: white;
  padding: 0 0.7em;
  font-size: 11pt;
  margin: 0 1em;
}
/* 

        CONTACT FORM 

*/

#contact-container {
    display: flex;
    width: 100%;
    height: fit-content;
    position: relative;
}

.contact-show {
    display: block;
}

.contact-hide {
    display: none;
}

form {
  font-size: 11pt;
  position: relative;
  width: fit-content;
  min-width: 80%;
  padding: 0 2em;
  margin: 0 auto;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.02);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
}
form fieldset {
  margin: 0 0 0 0;
}
form .legend {
  font-family: Corinthia-Bold;
  text-align: center;
  font-size: 40pt;
  font-weight: 600;
  padding-bottom: 0.1em;
  margin-bottom: 0.3em;
  border-bottom: 1px solid #b0b5b6;
}
form fieldset > div {
  position: relative;
  margin: 1em 0;
}

form .two-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

form .two-fields-row > div:nth-child(1) {
  padding-right: 1em;
}

form .two-fields-row > div:nth-child(2) {
  padding-left: 1em;
}

form h4,
form .label {
  color: #5e6b6d;
  margin-bottom: 0.3em;
}
form .label {
  display: block;
}
form input,
form button,
form textarea,
form label {
  color: #2b3e51;
}
form input[type="text"],
form input[type="email"],
form textarea,
form legend {
  display: block;
  width: 100%;
  appearance: none;
}

form input[type="text"],
form input[type="email"],
form textarea {
  padding: 0.8em;
  border: 1px solid #cfd9db;
  background-color: #ffffff;
  border-radius: 0.5em;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
  outline: none;
  border-color: #2c3e50;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
  margin: 0;
}

form form-list {
  margin-top: 16px;
}
form form-list::after {
  clear: both;
  content: "";
  display: table;
}
form form-list li {
  display: inline-block;
  position: relative;
  user-select: none;
  margin: 0 26px 16px 0;
  left: 0;
}
form input[type="radio"],
form input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  opacity: 0;
  z-index: 2;
}
form input[type="radio"] + label,
form input[type="checkbox"] + label {
  padding-left: 24px;
}
form input[type="radio"] + label::before,
form input[type="radio"] + label::after,
form input[type="checkbox"] + label::before,
form input[type="checkbox"] + label::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
}
form input[type="radio"] + label::before,
form input[type="checkbox"] + label::before {
  border: 1px solid #cfd9db;
  background: #ffffff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
}
form input[type="radio"] + label::before,
form input[type="radio"] + label::after {
  border-radius: 50%;
}
form input[type="checkbox"] + label::before,
form input[type="checkbox"] + label::after {
  border-radius: 0.25em;
}
form input[type="radio"] + label::after,
form input[type="checkbox"] + label::after {
  background-color: #2c3e50;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.4);
  display: none;
}
form input[type="radio"] + label::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Ccircle%20fill%3D%22%23FFFFFF%22%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%0D%0A%3C%2Fsvg%3E");
}
form input[type="checkbox"] + label::after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2018.1.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2216px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2016%2016%22%20enable-background%3D%22new%200%200%2016%2016%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%20points%3D%225%2C8%207%2C10%2011%2C6%20%22%2F%3E%0D%0A%3C%2Fsvg%3E");
}
form input[type="radio"]:focus + label::before,
form input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 5px rgba(44, 151, 222, 0.6);
}
form input[type="radio"]:checked + label::after,
form input[type="checkbox"]:checked + label::after {
  display: block;
}

form textarea {
  min-height: 6em;
  resize: none;
  overflow: auto;
}

form input[type="submit"],
form button{
  border: none;
  background: #2c3e50;
  border-radius: 0.25em;
  padding: 12px 20px;
  color: #ffffff;
  font-weight: bold;
  float: right;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  appearance: none;
}
.no-touch form input[type="submit"]:hover,
.no-touch form button:hover {
  background: #42a2e1;
}
form input[type="submit"]:focus,
form button:focus {
  outline: none;
  background: #2b3e51;
}
form input[type="submit"]:active,
form button:active {
  transform: scale(0.9);
}
form .error-message {
  height: 35px;
  margin: 0px;
}
form .error-message p {
  background: #e94b35;
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 0.25em;
  padding: 16px;
}
form .error {
  border-color: #e94b35 !important;
}
form .counter {
  background-color: #ecf0f1;
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 10px;
  padding: 4px;
}

form input::placeholder,
form textarea::placeholder {
  font-size: 9pt;
  color: rgba(0,0,0, 0.6);
}

.debug {
  border-radius: 4px;
  margin: 50px auto;
  width: 500px;
  background-color: #000;
  padding: 50px;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
}

.debug pre {
  color: #ffffff;
  font-size: 18px;
  line-height: 30px;
  font-family: "Source Code Pro", monospace;
  font-weight: 300;
  white-space: pre-wrap;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.popup-container {
  position: absolute;
  background-color: transparent;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.popup {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: white;
}

.popup #popup-text {
  margin-bottom: 20px;
}

.cadet-blue {
  background-color: cadetblue;
}
/* #popupClose {
  transform: translateY(10px);
} */

.confirm {
  display: block;
  text-align: center;
  color: cadetblue;
  font-weight: bold;
  font-size: 11pt;
  padding: 0.5em;
}