@charset "UTF-8";


/* Messages */

#success, #error {
    z-index:102;
    position:absolute;
    top:0; left:0;
    width:100%;
    height:100%;
    opacity:0;
    visibility:hidden;
    -webkit-transition:opacity    0.2s ease-in-out,
                       visibility 0.2s ease-in-out;
    	    transition:opacity    0.2s ease-in-out,
    	               visibility 0.2s ease-in-out;
}
#success.active, #error.active {
    opacity:1;
    visibility:visible;  
}

#success div, #error div {
    display:table;
    width:100%;
    max-width:400px;
    height:100%;
    margin:0 auto;
}

#success p, #error p {
    display:table-cell;
    vertical-align:middle; 
    text-align:center; 
}

#error p {color:rgb(188,122,122);}


/* Inputs */

textarea,
input {
    position:relative;
    width:100%;
    max-width:400px;
    border-radius:0;
    box-shadow:0 2px 0 rgba(137,150,175,0);
    outline:none;
    resize:none;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;   
    -webkit-transition:background-color 0.2s ease-in-out,
                       box-shadow       0.2s ease-in-out,
                       border-radius    0.2s ease-in-out,
                       border           0.2s ease-in-out; 
            transition:background-color 0.2s ease-in-out,
                       box-shadow       0.2s ease-in-out,
                       border-radius    0.2s ease-in-out,
                       border           0.2s ease-in-out;
}

textarea,
input {
    background:rgb(242,239,223);
    height:48px;
    padding:0 20px;
    border:none;
    margin-bottom:20px;
    /* Text */
    font-family:'Inconsolata',sans-serif;
    font-size:1.8rem;
    letter-spacing:1px;
    color:rgb(64,67,69);
    text-shadow:-1px -1px 0 rgba(255,255,255,0.2);
}

textarea {
    min-height:120px; 
    padding:14px 20px;
}

textarea:focus,
input:focus {box-shadow:0 2px 0 rgba(137,150,175,1);}

fieldset {border:none; margin:0; padding:0;}

/* Error State */

textarea.error,
input.error {box-shadow:0 2px 0 rgba(188,122,122,1);}

label.error {
    display:block;
    margin-bottom:20px;
    font-size:1.2rem;
    font-weight:700;
    line-height:1.2rem;
    color:rgb(188,122,122);
    text-transform:uppercase;
}
.required {color:rgb(188,122,122);}


/* Submit */

input[type="submit"] {
    background:rgb(124,127,129);
    height:40px;
    padding-top:4px;
    border:1px solid rgb(109,112,114);
    border-radius:3px;
    box-shadow:none;
    margin-top:10px;
    margin-bottom:0;
    cursor:pointer;
    /* Text */
    font-family:'BrandonGrotesque-Medium';
    font-size:1.2rem;
    line-height:normal;
    color:rgb(255,255,255);
    text-shadow:1px 1px rgba(109,112,114,0.75);
    text-transform:uppercase;
}

html.no-touch input[type="submit"]:hover {
    background:rgb(154,157,159);
    border-color:rgb(129,132,134);
}

input[type="submit"]:focus {border-color:rgb(69,62,64);}


/* Placeholder */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:rgb(114,117,119);
    -webkit-transition:color 0.2s ease-in-out;
    	    transition:color 0.2s ease-in-out;
}
html.no-touch input:hover::-webkit-input-placeholder,
html.no-touch textarea:hover::-webkit-input-placeholder {color:rgb(64,67,69);}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color:rgb(114,117,119);
    -webkit-transition:color 0.2s ease-in-out;
    	    transition:color 0.2s ease-in-out;
}
html.no-touch input:hover:-moz-placeholder,
html.no-touch textarea:hover:-moz-placeholder {color:rgb(64,67,69);}

input::placeholder,
textarea::placeholder {
    color:rgb(114,117,119);
    -webkit-transition:color 0.2s ease-in-out;
    	    transition:color 0.2s ease-in-out;
}
html.no-touch input:hover::placeholder,
html.no-touch textarea:hover::placeholder {color:rgb(64,67,69);}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {color:rgba(114,117,119,0.5) !important;}
input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder          {color:rgba(114,117,119,0.5) !important;}
input:focus::placeholder,
textarea:focus::placeholder               {color:rgba(114,117,119,0.5) !important;}