@charset "UTF-8";

/**
 Basics
 */
 
label{
 display: block; 
 padding-bottom: 6px
}

::placeholder,
.field-group.placeholder-label span.label{
 color: #666;
 opacity: 1
}
.field-group.placeholder-label ::placeholder{
 opacity: 0
}

input, textarea, select, button.btn, a.btn, span.btn{
 border: 1px solid transparent;
 border-radius: 10px;
 padding-top: 7px;
 padding-bottom: 7px
}

input, select, textarea{
 padding-left: 14px;
 padding-right: 14px;
 border-color: #000
}

input[type=hiddenn]{
 background-color: #ffff00;
 border-radius: 0
}

select{
 position: relative;	
 padding-top: 4px;
 padding-bottom: 6px
}

select{
 background-position: calc( 100% - 12px ) 50%, calc(100% - 7px ) 50%;
 background-size: 5px 5px, 5px 5px;
 background-image: linear-gradient( 45deg, transparent 50%, #666 50% ), linear-gradient( 135deg, #666 50%, transparent 50% );
 background-repeat: no-repeat;
 padding-right: 25px
}

select:focus{
 background-image: linear-gradient( 45deg, transparent 50%, #666 50% ), linear-gradient( 135deg, #666 50%, transparent 50% )
}

select:-moz-focusring{
 color: transparent;
 text-shadow: 0 0 0 #000
}


/**
 Reset checkbox, radio, range
 */

input[type="checkbox"], input[type="radio"], input[type="range"]{
 height: auto;	
 padding: 0;
 border: none;
 border-radius: 0 !IMPORTANT;
 background-color: transparent
}

/**
 Form elements - advanced
 */


input[type="checkbox"].styled{
 display: none
}
input[type="checkbox"].styled+label{
 position: relative; 
 display: block;
 width: 30px;
 height: 30px;
 border: solid #d9dadc 1px; 
 background-color: #fff; 
 cursor: pointer
}
input[type="checkbox"].styled+label::before{
 position: absolute;
 top: 6px;
 left: 10px;
 display: block;
 content: '';
 width: 9px;
 height: 14px;
 border: solid transparent 0;
 border-right-width: 3px;
 border-bottom-width: 3px;
 transform: rotate(40deg);
}
input[type="checkbox"].styled:checked+label::before{
 border-color: #40b649;
}


/**
 The .btn button
 */

button.btn, a.btn, span.btn{
 display: inline-block;
 min-width: 80px;
 text-align: center
}

button.btn.stacked, a.btn.stacked, span.btn.stacked{
 display: block;
 width: 100%
}

button.btn, a.btn, span.btn{
 border: 1px solid transparent;
 padding: 0 28px;
 line-height: 1.5;
 background-color: #c0c0c0;
 color: #fff;
 vertical-align: middle;
 text-decoration: none;
 user-select: none
}

button.btn:disabled, a.btn.disabled, span.btn.disabled{
 background-color: #ebebeb;
 color: #c0c0c0;
 cursor: default
}

button.btn.icon:before, a.btn.icon:before{
 content: '\00a0';
}

.btn:not( .stack )+.btn{
 margin-left: 20px
}
.btn+.btn.stack{
 margin-top: 14px
}

button.btn i, a.btn i{
 margin-right: 10px	
}

/**
 Field groups/group 
 */
 
.field-group{
 display: block
}
.field-group>label, .field-group>.label{
 display: block; 
 padding-bottom: 6px
}
.field-group.inline, .field-group .inps{
 display: flex
}


/*
 Placeholder label
 */
 
.field-group.placeholder-label .inp{
 position: relative
}
.field-group.placeholder-label .inp>label, 
.field-group.placeholder-label .inp>.label{
 position: absolute;
 top: 50%;
 left: 15px;
 margin-top: -0.3em;
 line-height: 0.6em;
 transition: ease top 100ms, ease font-size 100ms;
 pointer-events: none
}
.field-group.placeholder-label .inp>textarea+label,
.field-group.placeholder-label .inp>textarea+.label{
 top: 26px
}
.field-group.placeholder-label .inp>input,
.field-group.placeholder-label .inp>textarea{
 padding-top: 20px
}
.field-group.placeholder-label .inp>input.active+label,
.field-group.placeholder-label .inp>input.active+.label,
.field-group.placeholder-label .inp>textarea.active+label,
.field-group.placeholder-label .inp>textarea.active+.label{
 top: 1em;
 font-size: 0.75rem
}

/*
 Field group fields
 */
 
.field-group.placeholder-label .inp,
.field-group input[type="text"],
.field-group input[type="password"],
.field-group input[type="number"],
.field-group input[type="email"],
.field-group input[type="tel"],
.field-group input[type="url"],
.field-group input[type="color"],
.field-group textarea,
.field-group select{
 min-width: 100%
}



/**
 Validiation
 */
 
.form-message{
 max-height: 0; 
 overflow: hidden; 
 opacity: 0; 
 transition: max-height 700ms linear, opacity 700ms
}
.form-message.open{
 max-height: 300px; 
 opacity: 1    
}
.form-message>span{
 display: block; 
 position: relative;
 min-height: 50px;
 padding: 14px 50px 14px 20px;
 text-align: left 
}
.form-message>span>a.cross{
 position: absolute; 
 top: 0; 
 right: 0      
}

@media ( max-width: 575px ){
	
 .form-message{
  margin-left: -20px;
  margin-right: -20px;
 }
 
}