/* Forms----------------------------------------- */

/* TO-CONSIDER:
:not(:focus):invalid { }
input:not(:placeholder-shown):not(:focus):invalid
*/

:focus{
    outline:0
}
::-webkit-file-upload-button{
    background:none;
    border:0;
    padding:0
}
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
    display:none
}

.frm-item label,
.u-notSelectable{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

.frm.is-error [type=submit] + .frm-error:after,
.frm:invalid [type=submit]:hover + .frm-error:after,
.frm:invalid [type=submit]:focus + .frm-error:after{
    color:#c9302c;
    content:attr(data-error);
    display:block;
    font-weight:900;
    position:absolute;
	text-align:center;
	width:100%
}

.frm fieldset{
    border:0;
    padding:0 20px
}
.frm fieldset > legend{
    display:block;
    font-size:1.8rem;
    font-weight:100;
    margin:0 10px;
    padding:0 0 20px 4px;
    width:calc(100% - 20px)
}
.frm fieldset > legend:after{
    border-top:1px rgba(0,0,0,.05) solid;
    content:'';
    display:block;
    width:100%;
    top:10px
}

.frm-item.col{
    margin-bottom:20px
}

.frm-item abbr{
    text-decoration:none
}

.frm-item label{
    cursor:pointer;
    font-size:1.2rem;
    font-weight:200;
    line-height:1.2em;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
    text-overflow:ellipsis
}

.frm-error{
    display:block
}

.frm-item .u-fullWidth{
    display:block;
    width:100%
}

.frm-item input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='image']):not([type='range']),
.frm-item textarea{
	-webkit-appearance:none;
    background:rgba(0,0,0,.15);
    border:0;
    border-radius:18px;
    box-shadow:none;
	color:rgba(255,255,255,.8);
    cursor:pointer;
    font-size:1rem;
    line-height:1.6em;
    margin-top:20px;
    outline:none;
    padding:4px 16px;
    transition:.2s;
	width:100%
}
.frm-item input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='image']):not([type='range']):focus,
.frm-item textarea:focus{
    background:#fff;
    box-shadow:0 0 0 2px #1E90FF;
    color:#222
}
.frm-item input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='image']):not([type='range']) + label,
.frm-item select + label,
.frm-item textarea + label{
    left:14px;
    position:absolute;
    top:-8px
}
input[type=checkbox],
input[type=radio],
input[type=range]{
    cursor:pointer
}
.frm-item input[type=checkbox] + label,
.frm-item input[type=radio] + label,
.frm-item input[type=range] + label{
    left:auto;
    position:relative;
    top:auto
}
input[type=search],
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration{
    -webkit-border-radius:0;
    -webkit-appearance:none
}
.frm-item select{
    display:block;
    font-family:inherit;
    font-size:1rem;
    line-height:1.4em;
    margin-top:20px;
    width:100%
}
.frm-item select + label{
	top:-18px
}
option{
    padding:4px 6px
}
.frm-item textarea{
    width:100%
}
.frm-item input:focus:valid + label:after,
.frm-item select:focus:valid + label:after,
.frm-item textarea:focus:valid + label:after{

}
.frm input.frm-item--hasFocused:invalid:not(:focus),
.frm select.frm-item--hasFocused:invalid:not(:focus),
.frm textarea.frm-item--hasFocused:invalid:not(:focus){
    box-shadow:0 0 0 2px #c9302c!important
}
.frm input + label + span,
.frm select + label + span,
.frm textarea + label + span{
    position:static
}
.frm input + label + span:after,
.frm select + label + span:after,
.frm textarea + label + span:after{
    font-size:1.2rem;
    left:0;
    line-height:1.2em;
    padding:4px 0 0 16px;
    position:absolute;
    top:100%;
    width:100%
}
.frm input + label + span:before,
.frm select + label + span:before,
.frm textarea + label + span:before{
    left:-4px;
    position:absolute;
    top:-9px
}
.frm input:focus:invalid + label + span:after,
.frm select:focus:invalid + label + span:after,
.frm textarea:focus:invalid + label + span:after{
    color:#fff;
    content:attr(data-hint)
}
.frm input.frm-item--hasFocused:invalid:not(:focus) + label + span:after,
.frm select.frm-item--hasFocused:invalid:not(:focus) + label + span:after,
.frm textarea.frm-item--hasFocused:invalid:not(:focus) + label + span:after,
.frm input.is-error + label + span:after,
.frm select.is-error + label + span:after,
.frm textarea.is-error + label + span:after{
	color:#c9302c;
    content:attr(data-error)
}
.frm textarea.frm-item--hasFocused:invalid:not(:focus) + label + span:after{
	margin-top:-4px
}
.frm input.frm-item--hasFocused:valid:not([type=radio]):not([type=checkbox]):not([type=range]):not(:focus) + label + span:before,
.frm select.frm-item--hasFocused:valid:not(:focus) + label + span:before,
.frm textarea.frm-item--hasFocused:valid:not(:focus) + label + span:before{
    color:#fff;
    content:'\2713';
}
button,
.button{
    background:#e6e6e6;
    border:0;
    border-radius:3px;
    color:rgba(0,0,0,.8);
    cursor:pointer;
    display:inline-block;
    font-family:inherit;
    font-size:100%;
    letter-spacing:-.05em;
    padding:.6em 1em;
    text-decoration:none;
    transition:.08s
}
.button:focus,
button:focus{
    box-shadow:0 0 0 2px rgba(30,144,255,1), 0 0 14px rgba(30,144,255,1)
}
.button:hover,
button:hover{
    opacity:.8;
    text-decoration:none
}
button:active,
.button:active{
    box-shadow:0 0 0 2px rgba(0,0,0,.1) inset;
    opacity:1;
    text-decoration:none;
    transform:scale(.9);
    z-index:2
}
button:disabled,
.button--disabled{
    cursor:pointer;
    opacity:.3;
    pointer-events:none
}

.button{
	margin-bottom:20px
}

.button > .fa{
    display:inline-block;
    margin-right:6px
}

.button--primary,
.button--secondary,
.button--success,
.button--error,
.button--warning {
    color:rgba(255,255,255,.9);
    text-shadow:0 1px 0 rgba(0,0,0,.2)
}
.button--primary{
    background:#02b875;
    background:#5ac878
}
.button--secondary{
    background:rgba(30,144,255,1)
}
.button--success{
    background:#449d44
}
.button--error{
    background:#c9302c
}
.button--warning{
    background:#ec971f
}
.button--large{
    font-size:2rem;
    letter-spacing:-1px
}
.button--xLarge{
    font-size:5rem
}
.button--small{
    font-size:1.2rem
}
.button--circular{
    border-radius:40px
}
.button--border,
.button--borderDark,
.button--transparentBG{
    background:transparent;
    text-shadow:none
}
.button--bordered{
	box-shadow:0 0 0 1px rgba(255,255,255,.9) inset
}
.button--borderedDark{
	box-shadow:0 0 0 2px rgba(30,144,255,1) inset;
	color:rgba(30,144,255,1)
}
.button--block{
    display:block;
    text-align:center;
    width:100%
}
.button--link{
    background:transparent;
    box-shadow:none;
    color:rgba(30,144,255,1)
}