/* NAV */

nav {
  /*border-left: 0.7em solid#776238;*/

  background: #211f1f;
  text-align: center;
  font-family: "inter", Helvetica, sans-serif;
  position: fixed;
  width: 100%;
  z-index: 200;
  padding: 0.3em 0em;
  border-bottom: 0em solid #426b3e;
  box-shadow: 0px 0.2px 0px 0px #2c2c2ca3;
}

.navbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 70%;
  margin: 0 auto;
}

.logobox {
  display: inline-block;
  text-align: right;
  font-size: 0.8em;
  letter-spacing: 0.1em;
}

.logo {
  display: inline-block;
  text-decoration: none;
  padding-right: 0.5em;
  padding-left: 1em;
  height: 10%;
  font-weight: bold;
  color: #000000;
  text-transform: lowercase;
  text-align: center;
}

.logo {
  font-family: "satisfy";
  font-size: 1.4em;
  font-weight: bold;
  color: #b1b48a;
}

.logo span {
  font-family: "domine";
  display: block;
  color: rgb(201, 236, 200);
}

.ham {
  display: none;
  background-color: rgb(255, 255, 255);
}

.navbar {
  display: inline-block;
  font-size: 1.1em;
  text-align: center;
  margin: 0 auto;
}

.navbar ul li {
  display: inline-block;
  margin-left: 0em;
}

.navbar ul li a {
  text-decoration: none;
  display: inline-block;
  padding: 1em 2em;
    color: #d8d29f;
  letter-spacing: 0em;
  font-family: "inter", sans-serif !important;

  text-transform: lowercase;
  font-weight: 600;
  font-size: 0.95em;
}

.navbar ul li .active {
  font-weight: bold;
}

.navbar ul li a:hover,
.navbar ul li a:focus {
  font-weight: bold;
}

.sjsj ul li {
  display: inline-block;

  text-decoration: none;
  display: inline-block;
  padding: 1em 2em;
  color: #000000;
  letter-spacing: 0em;
  font-family: "source sans pro", sans-serif !important;

  text-transform: lowercase;
  font-weight: 600;
  font-size: 1em;
}

/* FOOTER */

footer {
  margin-top: 20vh;
  text-align: center;
}

.shhs a {
  color: black;
}

/**/
footer .container {
  width: 70%;

  padding: 0em 0em;

  background-color: #485654;
}

/* newsletter section */
.footer--newsletter {
  padding: 2em;
  color: #fddc9a !important;
  font-size: 1em;
  background-color: #426b3e2d;
  width: 100%;
  margin: 0 auto;
}

#newsletter--form {
  border: none;
  display: flex;
  flex-direction: row;
  width: 50%;
  margin: 0 auto;
}

.footer--newsletter h2 {
  font-size: 0.9em;
  border-bottom: 0px;
  font-weight: bold;
  color: #3a3732;
  padding-bottom: 1.2em;
}

.validateemail {
  font-size: 0.9em;
  font-weight: bold;
}

.footer--newsletter input {
  width: 40%;
  padding: 1em;
  border: none;
  border-radius: 0;
  margin: 0em 0em 0em 0em;
  border-radius: 0.7em 0em 0em 0em;
  flex: 2;
  background-color: #426b3e00;
  border: 0.1em solid #000000;
}

.footer--newsletter input::placeholder {
  font-size: 1.1em;
  font-family: "source sans pro", arial;
  color: black;
}

.footer--newsletter button {
  background: #252525;
  align-self: center;
  margin: 0 auto;
  display: inline-block;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: bold;
  font-size: 0.8em;
  letter-spacing: 0em !important;
  border: none;
  display: block;
  font-weight: lighter;

  line-height: 1.7em;
  border-radius: 0em 0.7em 0em 0em;
  background-color: #242928;
  flex: 1;
  padding: 1em;
  border: 0.2em solid #242928;
  cursor: pointer;
}

/* footer main */

.footer--main {
  width: 90%;
  color: white;
  margin: 0 auto;
}

.footer--main .logobox a {
  color: white;
  font-size: 1.3em;
}

.footer--links a:hover {
  background-color: rgb(68, 68, 68);
}

.footer--social {
  display: inline-block;
}

.footer--social .fab {
  padding: 0.7em;
  color: #252525;
  font-size: 1em;
}

.footer--social .fab:hover {
  background-color: rgb(68, 68, 68);
  cursor: pointer;
}

/**/
footer .logobox {
  font-size: 1.1em;
  margin-bottom: 0em;
}

.footer--main {
  /* background-color: #485654; */
  padding: 0em;
  width: 100%;
}

/***/ /***/ /***/ /***/ /***/

footer .container {
  width: 80%;
  padding: 0em;
  margin: 0 auto;
  padding-bottom: 2em;

  background: radial-gradient(
    circle,
    rgba(223, 246, 178, 0.5886948529411764) 0%,
    rgba(234, 234, 234, 0) 25%,
    rgba(232, 232, 232, 0) 35%
  );

  padding: 3em;

  background-color: #54564800;
}

footer {
  padding: 3em;
}

.footer--newsletter {
  padding: 5em;
  color: #fddc9a !important;
  font-size: 1em;

  background-color: #426b3e00;
  width: 100%;
  margin: 0 auto;
}

.footer--main p {
  font-family: "source sans pro";
}

.footer--main span {
  font-weight: bold;
}

/* BREAKPOINTS */

/* small pc */
@media screen and (max-width: 1378px) {
  .navbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
    margin: 0 auto;
  }

  .navbar ul li a {
    text-decoration: none;
    display: inline-block;
    padding: 1em 1em;
    color: #000000;
  }

  .footer--newsletter input {
    width: 70%;
  }
}

/* small pc */
@media screen and (max-width: 1150px) {
  .navbar ul li {
    margin-left: 2em;
  }

  .navbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }

  nav {
    padding: 0.7em;
  }

  .ham {
    display: inline-block;
    z-index: 1000;
    border: none;
    cursor: pointer;
    background-size: 100%;
    font-size: 1.5em;
    background-color: #d3d3d3;
    color: black;
  }

  .showClose {
    background-color: black;
  }

  .showClose .fa-bars {
    display: none;
    background-color: black;
  }

  .showClose:before {
    border: 0em solid red;
    content: "\f00d";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 1.3em;
    background-color: black;
    color: white;
  }

  .navbar {
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    color: white;
    transform: translateY(-100%);
    transition: transform 0.2s ease;
  }

  .showNav {
    transform: translateY(0);
  }

  .navbar ul {
    width: 100%;
    height: 100%;
    list-style: none;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    font-size: 1.2em;
  }

  .navbar ul li a {
    color: white;
    padding-bottom: 10px;
    border-bottom: 2px solid black;
  }

  .footer--newsletter input {
    width: 100%;
  }

  .footer--social .fab {
    font-size: 1.3em;
  }

  .footer--newsletter {
    padding: 3em 0.5em;
  }
}

/* tablet xl */
@media screen and (max-width: 1100px) {
  footer .logobox {
    text-shadow: -1px -1px 0 #d3d3d3, -1px 1px 0 #d3d3d3, 1px -1px 0 #d3d3d3,
      1px 1px 0 #d3d3d3;
  }

  footer {
    width: 100%;
    padding: 0;
    padding-bottom: 7em;
  }
  .footer--newsletter input {
    width: 100%;
  }

  footer .container {
    width: 70%;
    padding: 0;
  }

  #newsletter--form {
    width: 100%;
  }
}

/* mobile xl */
@media screen and (max-width: 590px) {
  footer .logobox {
    text-shadow: -1px -1px 0 #d3d3d3, -1px 1px 0 #d3d3d3, 1px -1px 0 #d3d3d3,
      1px 1px 0 #d3d3d3;
    font-size: 1em;
  }

  .footer--info .main--button {
    width: 60%;
  }

  footer {
    width: 100%;
  }
  .footer--newsletter input {
    width: 100%;
  }

  footer .container {
    width: 90%;
    padding: 0;
  }

  #newsletter--form {
    width: 100%;
  }
}

/* mobile */
@media screen and (max-width: 440px) {
  footer {
    padding-top: 7em;
  }
  .footer--info .main--button {
    width: 100%;
  }

  .footer--links {
    margin: 7em 0em;
  }

  .footer--links a {
    font-size: 1em;
    margin: 2em;
  }

  .footer--social .fab {
    font-size: 1.2em;
    display: block;
    line-height: 2em;
    padding: 0.7em;
  }

  .navbar ul {
    height: 96%;
  }

  .footer--newsletter h2 {
    font-size: 0.9em;
    font-weight: lighter;
  }
}

.validateemail {
  margin: 0em;
  margin-top: 1em;
}

.validateemail .success {
  color: blue !important;
  font-size: 1em;
}

.validateemail .error {
  color: black;
  font-size: 1em;
}