/********************************************
 * ****************  VARS*  ******************
 * ******************************************/
 :root{
  --color-blue: #e3fafc;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-green: #066636;
  --color-green1: #b4ccbf;
  --color-grey: #777777;
  --color-grey-light: #ccc;
  --color-grey-ultralight: #eee;
  --color-red: #f9dbdb;
  --trans-05: all 0.5s ease;
}

 /********************************************
 * ****************  COLORS  *****************
 * ******************************************/
.backblue{background-color: var(  --color-blue)}
.backwhite{background-color: var(  --color-white)}
.backwhite0{background-color: var(  --color-white);opacity: .5}
.backgreen{background-color: var(  --color-green1)}
.backgrey{background-color: var(  --color-grey-ultralight)}
.ftblack{color:var(--color-black)}
.ftgreen{color:var(--color-green)}
.ftgrey{color:var(--color-grey)}
 /********************************************
 * ****************  FIELDS * ****************
 * ******************************************/
.inputBox{
  position: relative;
}

.inputBox input, .inputNoBox input, .inputBox p,  .inputBox textarea, .inputBox select{
  width: 100%;
  padding: 10px;
  background-color: var(  --color-blue);
  border-radius: 10px;
  outline: none;
  color: var(--color-black);
  font-size: 1.5rem;
  transition: 0.5s;
}
.inputBox input, .inputBox p,  .inputBox textarea, .inputBox select{
  border:1px solid;
  border-color:var(--color-green);
}
.inputBox_ input{
  width: 100%;
  padding: 10px 10px 10px 60px;
  border-radius: 10px;
  outline: none;
  color: var(--color-black);
  font-size: 1.2rem;
  transition: 0.5s;
  border:1px solid;
  border-color:var(--color-green);
}
.inputBox p.disabled{
  background-color: var(  --color-grey-light);
  min-height: 38px;
}
.inputBox span {
  position: absolute;
  left: 0;
  padding: 10px;
  pointer-events: none;
  font-size:1.2rem;
  color: var(--color-black);
  transition: 0.5s;
  top: 0px;
}

.inputBox input:valid ~ span, .inputBox p.disabled ~ span, .inputBox input.disabled ~ span, .inputBox textarea:valid ~ span, .inputBox select:valid ~ span,
.inputBox input:focus ~ span, .inputBox textarea:focus ~ span, .inputBox select:focus ~ span, .inputBox select:disabled ~ span{
  color: var(--color-black);
  transform: translateX(10px) translateY(-7px);
  font-size: 1.2rem;
  padding: 0 15px;
  background: var(  --color-blue);
  border-left: 1px solid var(--color-black);
  border-right: 1px solid var(--color-black);
  letter-spacing: 0.2em;
}

.inputBox p.disabled ~ span{
  background: var(  --color-grey-light);
}

input.radiofield ~ span{
  color: var(--color-black);
  font-size: 1rem;
  padding: 10px;
  background: var(  --color-blue);
  letter-spacing: 0.2em;
  display: block;
  margin-left: 10px;
  border-radius: 10px;
}

.inputBox:nth-child(2) input:valid ~ span,
.inputBox:nth-child(2) input:focus ~ span{
background :var(--color-black); ;
color: var(--color-white);
border-radius: 2px;
}

.inputBox input:valid, .inputBox textarea:valid, .inputBox select:valid
.inputBox input:focus, .inputBox textarea:focus, .inputBox select:focus{
  border : 1px solid var(--color-green);
}

input.error, select.error, textarea.error{background: var(--color-red)}
.inputBox input.error:valid ~ span, .inputBox textarea.error:valid ~ span, .inputBox select.error:valid ~ span,
.inputBox input.error:focus ~ span, .inputBox textarea.error:focus ~ span, .inputBox select.error:focus ~ span, .inputBox select.error:disabled ~ span{
  color: var(--color-black);
  background: var( --color-red);
}
 /********************************************
 * ****************  BORDERS * ***************
 * ******************************************/


 /********************************************
 * ******************  FONT * ****************
 * ******************************************/

 /********************************************
 * ******************  CTA  ******************
 * ******************************************/
.CTA{padding: 5px 10px;border-radius:10px;text-decoration: none;}
.CTA1{padding: 5px 20px;border-radius:10px 0 0 10px;}
.CTA2{padding: 10px 20px;border-radius:10px;text-decoration: none;}
.CTAGreen{background: #066636;color:#fff;
  transition: all .2s ease-out; }
.CTAGreen:hover{background: #066636cc;color:#fff;}

.CTABTN{
  display:block;
  font-size: 18px;
  color: var(--color-green);
  text-decoration:none;
}

 /********************************************
 * ****************  ACCORDION  **************
 * ******************************************/

 /********************************************
 * ****************  DROPZONE*  **************
 * ******************************************/

 /********************************************
 * ****************  SWIPER  *****************
 * ******************************************/

 /********************************************
 * ****************  ELEMENT  ****************
 * ******************************************/
.contentBloc{  position: relative;
  left: 250px;
  width: calc(100% - 250px);
  transition: var(--trans-05)
}
.blocBTN{
    background-color: var(  --color-blue);
    border-radius: 5px;
    padding: 10px;
  }
.hspecial{height: calc(100% - 200px);}

.cloture{border-radius: 10px;border:1px solid #000;}

.separator{height:3px; width:100%;background-color: var(  --color-blue);margin: 20px 0 0px}

.submitsearch{
  position: absolute;
  height: 38px;
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
  }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
}
/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
} 

/*X-Small devices (portrait phones, less than 576px)*/
 @media (max-width: 575.98px) {

}

@media (min-width: 992px) {
}

 @media (min-width: 576px) {
}