/**
* css_style.css v1.1.8
* Copyright 2019 Signify
*/

/*****************************************************
Defaults
*****************************************************/

body,html{
    
    padding:0px;
    margin:0px;
    
}

ul{
    
    padding-left:15px;
}

label.error{
    
    position:relative;
    width: 100%;
    padding:10px 1px 5px 1px;
    margin:0px;
    display: block;
    
}


.checkboxfield label.error{
    
    display: flex;
    
}

/*
Preloading the form
*/
.preloader{
    position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
    background-color: #fff;
    will-change: top;
}

.loader{
    position:relative;
    top:50%;
    width:98px;
    margin: -11px auto 0 auto;
}

.loader span{
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  margin: 4px;
  background-color: #000;
  opacity: 0;
}

.loader span:nth-child(1){
  animation: opacitychange 1s ease-in-out infinite;
}

.loader span:nth-child(2){
  animation: opacitychange 1s ease-in-out 0.33s infinite;
}

.loader span:nth-child(3){
  animation: opacitychange 1s ease-in-out 0.66s infinite;
}

@keyframes opacitychange{
  0%, 100%{
    opacity: 0;
  }

  60%{
    opacity: 1;
  }
}

/*****************************************************
Legacy hiding support
*****************************************************/

.hideme{display: none;}

/*****************************************************
Hide and show elements (steps) based on data attribute
*****************************************************/

[data-display][data-display='none'] {
  display:none!important;
}
[data-display][data-display='block'] {
  display:block!important;
}

/*****************************************************
Page structure
*****************************************************/

.container {
    position: relative;
    max-width: 960px;
    margin: 30px auto 30px auto;
}

.onecol{
    
    max-width: 640px;
    
}

.line{
    
    position:relative;
    margin: 0px 0px 12px 0px;
    clear: both;
    
}

.step { position:relative;}

.pop-up .container{
    
    max-width: 100%;
    margin: 0px auto 0px auto;
    
}

/*****************************************************
Field styling general
*****************************************************/
.form-field{

    display: block;
    width: 100%;
    background-clip: padding-box;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    
}

/*****************************************************
Field styling Select field
*****************************************************/

select.form-field:not([size]):not([multiple]){
    
    height:calc(35px + 5px);

}

select.form-field{
    
    background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
    background-repeat: no-repeat;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right:50px;

    /*iOS select field width support*/
    width:100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

select.form-field::-ms-expand {
    
    display: none;
    
}

select.form-field:focus {
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}

select.form-field option{
    
}

/*****************************************************
Field styling Checkbox field
*****************************************************/

.checkboxfield{
    
    position:relative;
    display:inline-block;
    width: 100%;
    
}

.checkboxfield .option{
    
    width:100%;
    margin-bottom:5px;
    
}

.checkboxfield .option .left{
    
    float:left;
    width: 7%;
    
}

.checkboxfield .option .right{
    
    float:left;
    width: 93%;
    
}

input[type="checkbox"].form-field{
    
    position: absolute;
    opacity: 0;

}

.checkboxfield .option .checklabel{
    
    float:left;
    position: relative;
    margin: 0px 0px 0px 10px;
    cursor: pointer;
    
}

.checkboxfield .option .checkmark {
    float:left;
    position: relative;
    margin: 0px 0px 0px 0px;
    cursor: pointer;
    height: 22px;
    width: 22px;
}

.checkboxfield .option .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

input[type="checkbox"]:checked ~ .checkmark:after {
    display: block;
}

.checkboxfield .option .checkmark:after {

    width: 5px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*****************************************************
Field styling Radio field
*****************************************************/

.radiofield{

    display: inline-block;
    width: 100%;
}

.radiofield label{
    
    display: inline-block;
    width:100%;
    
}

.radiofield .option{
    

    
}

.radiofield .option .left{
    
    float:left;
    width: 10%;
    
}

.radiofield .option .right{
    
    float:left;
    width: 90%;
    
}

input[type="radio"].form-field{
    
    position: absolute;
    opacity: 0;

}

.radiofield .option .checklabel{
    
    float:left;
    position: relative;
    margin: 0px 0px 0px 28px;
    cursor: pointer;
    
}

.radiofield .option .checkmark {
    float:left;
    position: relative;
    margin: 0px 0px 0px 0px;
    cursor: pointer;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    
}

.radiofield .option .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

input[type="radio"]:checked ~ .checkmark:after {
    display: block;
}

/*****************************************************
Field styling Checkbox & Radio field
*****************************************************/

.option{

    float: left;
    position: relative;
    margin:0px;
    padding:0px;
    
}

/*****************************************************
Field styling TextArea
*****************************************************/

textarea.form-field{
    
    min-height: 100px;
    
}

/*****************************************************
Field styling Button
*****************************************************/
.submitbutton{
    
    margin: 0px;
    width:100%;
    
}

.onecol .submitbutton{
    
    display:inline-block;
    
}

.onecol input[type="submit"]{
    
    float: right;
    
}


input[type="submit"]{

    position: relative;
    min-width: 140px;
    width: auto;
	cursor:pointer;
	text-decoration:none !important;
	text-shadow:none;
	filter:none;
    
}

/*****************************************************
Styling Required message
*****************************************************/
#required{
  
    margin:10px 0px 0px 0px;
    
}

.onecol #required{
    
    margin:0px;    
    text-align: right;
    
}

/*****************************************************
Responsive behaviour
*****************************************************/

@media screen and (max-width: 767px) {
    
    .checkboxfield .option{
        
        width:100%;
        
        
    }   
    
    .checkboxfield .option .left{
        
        width:3%;
        
    }
    
    .checkboxfield .option .right{
        
        width:97%;
        
    }
    
    input[type="submit"]{
     
        width:100%;
        
    }
       
}

@media screen and (max-width: 700px) {
    
      
    .checkboxfield .option .left{
        
        width:4%;
        
    }
    
    .checkboxfield .option .right{
        
        width:96%;
        
    }
    
    
}

@media screen and (max-width: 600px) {
    
      
    .checkboxfield .option .left{
        
        width:5%;
        
    }
    
    .checkboxfield .option .right{
        
        width:95%;
        
    }
    
    
}

@media screen and (max-width: 500px) {
    
      
    .checkboxfield .option .left{
        
        width:6%;
        
    }
    
    .checkboxfield .option .right{
        
        width:94%;
        
    }
    
    
}

@media screen and (max-width: 400px) {
    
      
    .checkboxfield .option .left{
        
        width:7%;
        
    }
    
    .checkboxfield .option .right{
        
        width:93%;
        
    }
    
    
}