/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/
:root {
  --red: #ff0000;
  --white: #fff;
  --accent: #00ff00;
  --borderColor: #979797;
  --valid: var(--borderColor);
}
/* contact pagina */
/* contact formulier*/
.afterSuccesContactForm {
  display: none;
  text-align: center;
  padding: 70px 30px;
  border-radius: 8px;
}
.afterSuccesContactForm .icongreat {
  content: "\e901";
  font-family: "icomoon" !important;
  color: green;
  font-weight: bold;
  font-size: 60px;
}
.afterSuccesContactForm h3 {
  margin-bottom: 20px;
  font-size: 24px;
}
.afterSuccesContactForm #backToFormContact {
  background-color: var(--accent);
  border-radius: 24px;
  padding: 4px 20px;
  color: white;
  font-size: 18px;
  display: inline-block;
  margin-top: 20px;
}
.afterSuccesContactForm #backToFormContact:hover {
  background-color: #00b300;
}
/* css for the contactblock */
/* hide the labels but make them accessible */
.sr-only {
  height: 1px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: -10000px;
  width: 1px;
}
@media screen and (min-width: 768px) {
  #contactForm .fields-two {
    display: flex;
    column-gap: 1em;
  }
}
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"] {
  padding: 10px 20px;
  width: 100%;
  display: inline-block;
  border-radius: 4px;
  margin: 0.5em 0;
}
#contactForm input[type="text"].invalid,
#contactForm input[type="email"].invalid,
#contactForm input[type="tel"].invalid {
  border: 1px solid var(--red);
}
#contactForm input[type="text"].valid,
#contactForm input[type="email"].valid,
#contactForm input[type="tel"].valid {
  border: 1px solid var(--valid);
}
#contactForm textarea {
  padding: 10px 20px;
  margin-bottom: 0.5em;
  height: 150px;
  border-radius: 4px;
}
#contactForm textarea.invalid {
  border: 1px solid var(--red);
}
#contactForm textarea.valid {
  border: 1px solid var(--valid);
}
#contactForm input[type="button"] {
  background-color: var(--accent);
  border-radius: 8px;
  font-size: 16px;
  color: white;
  padding: 10px 20px;
  margin-top: 20px;
  transition: all 0.2s ease-in-out;
}
#contactForm input[type="button"]:disabled {
  opacity: 0.4;
}
#contactForm input[type="button"]:hover {
  background-color: #00b300;
}
#contactForm .newsLetterBlock {
  margin-top: 25px;
  top: 5px;
  /*Adding custom checkbox icons*/
  /*hiding the original checkboxes*/
  /*when the user checks the checkbox the checked icon will animate in*/
}
#contactForm .newsLetterBlock label:before,
#contactForm .newsLetterBlock label:after {
  /*absolutely positioned*/
  font-size: 17px;
  position: absolute;
  top: -2px;
  left: 0;
}
#contactForm .newsLetterBlock label {
  position: relative;
  padding-left: 30px !important;
  cursor: pointer;
}
#contactForm .newsLetterBlock label:before {
  font-family: "IcoMoon";
  font-weight: normal;
  font-style: normal;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e902";
  /*unchecked*/
  color: green !important;
  top: -4px;
}
#contactForm .newsLetterBlock label:after {
  font-family: "IcoMoon";
  /* to use content: add this font */
  font-weight: normal;
  font-style: normal;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e903";
  /*checked*/
  max-width: 0;
  overflow: hidden;
  opacity: 0.5;
  transition: all 0.35s;
  top: -16px;
  font-size: 27px;
  font-weight: bold;
}
#contactForm .newsLetterBlock input[type="checkbox"] {
  display: none;
}
#contactForm .newsLetterBlock input[type="checkbox"]:checked + label:after {
  max-width: 25px;
  /*an arbitratry number more than the icon's width*/
  opacity: 1;
  /*for fade in effect*/
}
#contactForm .newsLetterBlock input + label:before,
#contactForm .newsLetterBlock input + label:after {
  color: green;
}
#contactForm .newsLetterBlock label {
  font-weight: 300;
}