@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600);

body, h1, h2, h3, h4, h5, p, label{
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
}
a, a:focus, a:hover, a:visited {
    color: #DD614A;
}

.vertical-center {
    /*text-align:center;*/
    display: flex;
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    align-items: center;
    margin: 0px auto 0px auto;
    text-shadow: none;
}
/*@media screen and (max-width: 321px){
    .vertical-center {
        min-height: none;
    }
}*/

@media all and (orientation:portrait) {
    input {
        font-size: 16px;
    }
    .vertical-center {
        min-height: none;
        padding-top: 45px;
    }
}

@media all and (orientation:landscape) {
    .vertical-center {
        min-height: none;
        padding-top: 8px;
    }
}

.login_box {
    /*margin-top: 4em;*/
    max-width: 280px;
}
.logo {
    /*padding-top: 10px;*/
    /*margin-top: 0px;*/
    text-align: center;
    width: 100%;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: solid 1px #eee;
}

.footer { 
    padding-top: 20px;
    text-align:center; 
}
.footer a { 
    color: #DD614A; 
}

/* form starting stylings ------------------------------- */
.group { 
    position:relative; 
    margin-bottom:25px; 
}
input {
    /*font-size:18px;*/
    padding:10px 10px 10px 5px;
    display:block;
    width: 100%;
    border:none;
    border-bottom:1px solid #eee;
}

input:focus { 
    outline:none; 
    border-bottom:1px solid #DD614A;
}

/* LABEL ======================================= */


label{
    color:#000000; 
    font-size:18px;
    /*font-weight:normal;*/
    position:absolute;
    pointer-events:none;
    left:5px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

/*input[type='email']:not(.empty):invalid ~ label {
    top:-20px;
    font-size:14px;
    color:#DD614A;
}
*/
input:focus:invalid ~ label {
    top:-20px;
    font-size:14px;
    color:#DD614A;
}
input:not(.empty):invalid ~ label {
    top:-20px;
    font-size:14px;
    color:#DD614A;
}


input:valid ~ label {
    top:-20px;
    font-size:14px;
    color:#73A580;
}

/* active state */
input:focus ~ label {
    top:-20px;
    font-size:14px;
    color:#000000;
}

input:focus:valid ~ label {
    top:-20px;
    font-size:14px;
    color:#73A580;
}

.login_button {
    color: #ffffff;
    background-color: #DD614A;
}

/* BOTTOM BARS ================================= */
.bar  { position:relative; display:block; width: 100%; }
.bar:before, .bar:after   {
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:#DD614A; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%; 
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#DD614A; }
    to  { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#DD614A; }
    to  { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#DD614A; }
    to  { width:0; background:transparent; }
}