body{
    background: #EEEEEE;
    font-size: 100%;
}

:focus{
    outline: 0;
}


@keyframes slidein {
    from { margin-top: 0px;} to { margin-top: 10%; }
}

@-webkit-keyframes slidein {
    from { margin-top: 0px; } to { margin-top: 10%; }
}

body > div {
    margin: 10% auto auto auto;

    -webkit-animation-duration: 3s;
    -webkit-animation-name: slidein;

    animation-duration: 3s;
    animation-name: slidein;

    width: 95%;
    max-width: 500px;
}

@media (min-width: 800px){
    *{
        font-size: 16px;
    }
}

@media (min-width: 500px) and (max-width: 799px){
    *{
        font-size: 16px;
    }
}

@media (max-width: 499px){
    * {
        font-size: 18px;
    }
}



.titulo{
    color: rgba(16,60,107,1);
    display: block;

    font-family: 'Quicksand', sans-serif;
    font-size: 2em;

}

#contenedor{
	background: rgba(73,155,234,1);
	background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(16,60,107,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(16,60,107,1)));
	background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(16,60,107,1) 100%);
	background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(16,60,107,1) 100%);
	background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(16,60,107,1) 100%);
	background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(16,60,107,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#103c6b', GradientType=0 );

    border: 1px solid #003750;
    border-radius: 5px;
    color: rgba(0,0,0, 0.8);
    line-height: 1.5;
    margin: 3em auto 50px auto;
    padding: 30px 30px 20px;
    position: relative;


    -moz-box-shadow: 0 25px 40px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 25px 40px rgba(0,0,0, 0.7);
    -ms-box-shadow: 0 25px 40px rgba(0,0,0, 0.7);
    box-shadow: 0 40px 40px rgba(0, 0, 0, 0.7);

    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1s;
    -webkit-animation-name: opacitycontainer;
    -webkit-animation-fill-mode: backwards;

    animation-duration: 2s;
    animation-delay: 1s;
    animation-name: opacitycontainer;
    animation-fill-mode: backwards;


}

@keyframes opacitycontainer {
    from { opacity: 0; } to { opacity: 1; }
}

@-webkit-keyframes opacitycontainer {
    from { opacity: 0; } to { opacity: 1; }
}

#contenedor form {
    display:block;
    margin: -5px 0px 0px 0px;
}

.campos{
    background: #f5ecbc;
    border-radius: 3px;
    border: 1px solid #003750;
    display: block;
    font-family: 'Quicksand', sans-serif;
    height: 25px;
    margin: 0px 0px 10px 0px;
    padding: 4px 16px;
    width: 90%;
}

#btn-login{
    -moz-box-shadow: 0 1px 1px #003750;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    -webkit-box-shadow: 0 1px 1px #003750;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
    box-shadow: 0 1px 1px #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

    background: -moz-linear-gradient(top, white, #cecccc);
    background: -ms-linear-gradient(top, white, #cecccc);
    background: -o-linear-gradient(top, white, #cecccc);
    background: -webkit-linear-gradient(top, white, #cecccc);

    border-color: #999;
    border-radius: 3px;
    border: 1px solid #DDD;
    color: #666;
    cursor: pointer;
    float:right;

    font-weight: bold;
    font-family: Sans-Serif;
    margin-right: -5px;
    padding: 6px 10px;
    text-shadow: 0 1px 1px white;
    vertical-align: middle;
    white-space: nowrap;
}

#btn-login:active {
    -moz-box-shadow: inset 0 1px 2px #aaa;
    -webkit-box-shadow: inset 0 1px 2px #aaa;
     box-shadow: inset 0 1px 2px #aaa;

    background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
    background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
    background: -o-linear-gradient(top, #E6E6E6, gainsboro);
    background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
    border-bottom-color: #CCC;
    border-top-color: #999;
    border: 1px solid #AAA;
}


input[type="checkbox"]{
    margin-top: -2px;
}

#keepmein{
    color: #2887b7;
    font-family: Helvetica, Arial;
    font-size: 15px;
    font-weight: bold;
    margin-top: -5px;
}

#forgot{
    color: #ededed;
    display: block;
    font-weight: bold;
    font-family: Helvetica, Arial;
    margin: -2px 5px 0px 0px;
    text-decoration: none;
}

#forgot:hover{
    color: #2887b7;
}

.copyright{
    color: #404040;
    display: block;
    margin: 10px auto auto auto;
    text-align:right;

    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 3s;
    -webkit-animation-name: opacitycontainer;
    -webkit-animation-fill-mode: backwards;

    animation-duration: 1s;
    animation-delay: 3s;
    animation-name: opacitycontainer;
    animation-fill-mode: backwards;
}


p.copyright a{
    color:#404040;
    text-decoration: none;
}
p.copyright a:hover{
    color: #000;
}

.message{
    //position: absolute;
    color: #404040;
    display: block;

    background-color: rgba(55, 89, 125, 0.20);

    padding: 0.5%;

    width: 99%;
    max-width: 500px;


    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.50);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);;
    box-shadow: 0px 0px 5px rgba(17, 54, 125, 0.50);

    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 3s;
    -webkit-animation-name: opacitycontainer;
    -webkit-animation-fill-mode: backwards;

    animation: opacitycontainer 1s backwards 3s;
}


.error {
    color: red;
    position: absolute;
    right: 10px;
    top: 0px;

    width: 250px;

    background-color: rgba(125, 0, 0, 0.1);
    display: block;
    margin: 20px auto 0px auto;
    text-align: center;
    border-radius: 8px;
    padding: 12px;

    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px rgba(125, 0, 0, 0.5);
}