.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #666; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

.card {background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); }

.container{
    opacity: 0.9;
}

.login-container{
    position: relative;
    width: 300px;
    margin: 80px auto;
    padding: 20px 40px 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    opacity: 0.8;
}

#output{
    position: absolute;
    width: 300px;
    top: -75px;
    left: 0;
    color: #fff;
}

#output.alert-success{
    background: rgb(25, 204, 25);
}

#output.alert-danger{
    background: rgb(228, 105, 105);
}


.login-container::before,.login-container::after{
    content: "";
    position: absolute;
    width: 100%;height: 100%;
    top: 3.5px;left: 0;
    background: #fff;
    z-index: -1;
    -webkit-transform: rotateZ(4deg);
    -moz-transform: rotateZ(4deg);
    -ms-transform: rotateZ(4deg);
    border: 1px solid #ccc;

}

.login-container::after{
    top: 5px;
    z-index: -2;
    -webkit-transform: rotateZ(-2deg);
    -moz-transform: rotateZ(-2deg);
    -ms-transform: rotateZ(-2deg);

}

.avatar{
    width: 100px;height: 100px;
    margin: 10px auto 30px;
    border-radius: 100%;
    border: 2px solid #aaa;
    background-size: cover;
}
.avatarRegistrar{
    width: 170px;height: 150px;
    margin: 10px auto 30px;
    border-radius: 10%;
    border: 2px solid #aaa;
    background-size: cover;
}

.form-box input{
    width: 100%;
    padding: 10px;
    text-align: center;
    height:40px;
    border: 1px solid #ccc;;
    background: #fafafa;
    transition:0.2s ease-in-out;

}

.form-box input:focus{
    outline: 0;
    background: #eee;
}

.form-box input[type="text"]{
    border-radius: 5px 5px 0 0;
    text-transform: lowercase;
}

.form-box input[type="password"]{
    border-radius: 0 0 5px 5px;
    border-top: 0;
}

.form-box button.login{
    margin-top:15px;
    padding: 10px 20px;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/*
/* Created by Filipe Pina
* Specific styles of signin, register, component
*/
/*
 * General styles
 */

.main{
    margin-top: 70px;
}

h1.title {
    font-size: 50px;
    font-family: 'Passion One', cursive;
    font-weight: 400;
}

hr{
    width: 10%;
    color: #fff;
}

.form-group{
    margin-bottom: 15px;
}

label{
    margin-bottom: 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 11px;
    padding-top: 3px;
}

.main-login{
    background-color: #fff;
    /* shadows and rounded borders */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);

}

.main-center{
    margin-top: 30px;
    margin: 0 auto;
    max-width: 330px;
    padding: 40px 40px;

}

.login-button{
    margin-top: 5px;
}

.login-register{
    font-size: 11px;
    text-align: center;
}

/*Alert*/
.dgcAlert {
    top: 0;position: absolute;
    width: 100%;
    display: block;
    height: 1000px; 
    background: url(http://www.dgcmedia.es/recursosExternos/fondoAlert.png) repeat; 
    text-align:center; 
    opacity:0; 
    display:none; 
    z-index:999999999999999;
}
.dgcAlert .dgcVentana{
    width: 500px; 
    background: white;
    min-height: 150px;
    position: relative;
    margin: 0 auto;
    color: black;
    padding: 10px;
    border-radius: 10px;
}
.dgcAlert .dgcVentana .dgcCerrar {
    height: 25px;
    width: 25px;
    float: right; 
    cursor:pointer; 
    background: url(http://www.dgcmedia.es/recursosExternos/cerrarAlert.jpg) no-repeat center center;
}
.dgcAlert .dgcVentana .dgcMensaje { 
    margin: 0 auto; 
    padding-top: 45px; 
    text-align: center; 
    width: 400px;
    font-size: 20px;
}
.dgcAlert .dgcVentana .dgcAceptar{
    background:#09C; 
    bottom:20px; 
    display: inline-block; 
    font-size: 12px; 
    font-weight: bold; 
    height: 24px; 
    line-height: 24px; 
    padding-left: 5px; 
    padding-right: 5px;
    text-align: center; 
    text-transform: uppercase; 
    width: 75px;
    cursor: pointer; 
    color:#FFF; 
    margin-top:50px;
}




@media( max-width : 585px ) {

        /*Alert*/
    .dgcAlert {
        top: 0;position: absolute;
        width: 100%;
        display: block;
        height: 1000px; 
        background: url(http://www.dgcmedia.es/recursosExternos/fondoAlert.png) repeat; 
        text-align:center; 
        opacity:0; 
        display:none; 
        z-index:999999999999999;
    }
    .dgcAlert .dgcVentana{
        width: 300px; 
        background: white;
        min-height: 10px;
        position: relative;
        margin: 0 auto;
        color: black;
        padding: 10px;
        border-radius: 10px;
    }
    .dgcAlert .dgcVentana .dgcCerrar {
        height: 25px;
        width: 25px;
        float: right; 
        cursor:pointer; 
        background: url(http://www.dgcmedia.es/recursosExternos/cerrarAlert.jpg) no-repeat center center;
    }
    .dgcAlert .dgcVentana .dgcMensaje { 
        margin: 0 auto; 
        padding-top: 45px; 
        text-align: center; 
        width: 150px;
        font-size: 14px;
    }
    .dgcAlert .dgcVentana .dgcAceptar{
        background:#09C; 
        bottom:20px; 
        display: inline-block; 
        font-size: 12px; 
        font-weight: bold; 
        height: 24px; 
        line-height: 24px; 
        padding-left: 5px; 
        padding-right: 5px;
        text-align: center; 
        text-transform: uppercase; 
        width: 75px;
        cursor: pointer; 
        color:#FFF; 
        margin-top:50px;
    }

}
@media( max-width : 300px ) {
 
    /*Alert*/
    .dgcAlert {
        top: 0;position: absolute;
        width: 100%;
        display: block;
        height: 1000px; 
        background: url(http://www.dgcmedia.es/recursosExternos/fondoAlert.png) repeat; 
        text-align:center; 
        opacity:0; 
        display:none; 
        z-index:999999999999999;
    }
    .dgcAlert .dgcVentana{
        width: 150px; 
        background: white;
        min-height: 150px;
        position: relative;
        margin: 0 auto;
        color: black;
        padding: 10px;
        border-radius: 10px;
    }
    .dgcAlert .dgcVentana .dgcCerrar {
        height: 25px;
        width: 25px;
        float: right; 
        cursor:pointer; 
        background: url(http://www.dgcmedia.es/recursosExternos/cerrarAlert.jpg) no-repeat center center;
    }
    .dgcAlert .dgcVentana .dgcMensaje { 
        margin: 0 auto; 
        padding-top: 45px; 
        text-align: center; 
        width: 100px;
        font-size: 10px;
    }
    .dgcAlert .dgcVentana .dgcAceptar{
        background:#09C; 
        bottom:20px; 
        display: inline-block; 
        font-size: 12px; 
        font-weight: bold; 
        height: 24px; 
        line-height: 24px; 
        padding-left: 5px; 
        padding-right: 5px;
        text-align: center; 
        text-transform: uppercase; 
        width: 75px;
        cursor: pointer; 
        color:#FFF; 
        margin-top:50px;
    }
}