html, body {
  /*font-family: Cambria, Geneva, sans-serif;  */
}

body {
    padding-top: 10px;
}

.container {
    line-height: 0px;
}

.wrap {
	z-index: 1;
	padding: 0px;
	border-radius: 5px 0 0 5px;
    /*
    background: -moz-linear-gradient(90deg, rgba(12,76,132,1) 0%, rgba(102,166,242,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(102,166,242,1)), color-stop(100%, rgba(12,76,132,1)));
	background: -webkit-linear-gradient(90deg, rgba	(12,76,132,1) 0%, rgba(102,166,242,1) 100%);
	background: linear-gradient(0deg, rgba(12,76,132,1) 0%, rgba(102,166,242,1) 100%); 
    */
    background: -moz-linear-gradient(90deg, rgba(0, 77, 113,1) 0%, rgba(102,166,242,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(102,166,242,1)), color-stop(100%, rgba(0, 77, 113,1)));
	background: -webkit-linear-gradient(90deg, red 0%, red 100%);
	background: linear-gradient(0deg, rgba(0, 77, 113,1) 0%, rgba(102,166,242,1) 100%); /*Color de fondo Azul*/
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	overflow: hidden;

	height: 500px;
}

.logo
{
    position: absolute;
}

.logo img {
    position:absolute;
    margin-left:10px;
    margin-top: 10px;
    width:180px;
}


/*SLIDER*/

#slideshow {
	position: absolute;    
	margin: 65px auto;
	width: 100%;
	height: 85%;
}

#slideshow h2 {
	margin: 2em 0 1em;   
	text-align: center;
	font-size: 2em;
	color: #fff;
	line-height: .5em;
}

#slideshow p {
	Color: #fff;
	display: block;
    line-height: 18px;
}

#slideshow h2 span {   
	padding: 20px 0;
	border: solid #B6EDE3;
	border-width: 2px 0;
}
 
#slideshow div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 6em;   
	background-repeat: no-repeat;


}
/*
#slideshow .one {
	background-image: url("../img/dots.png")
	background-repeat: no-repeat;
	background-position-y: 180px;
	background-position-x: 50%;
}

#slideshow .two {
    background-image: url("../img/gears.png");
	background-repeat: no-repeat;
	background-position-y: 180px;
	background-position-x: 50%;
}
*/
/*FIN SLIDER*/

.col-center {
	float: none;
	margin: 20px auto;   
}

.center{
	box-shadow: 0px 7px 15px rgba(0,0,0,0.5);
	border-radius: 5px;
	height:500px;
}

.input-control {
	position: relative;
	margin: 30px 10px;
    line-height: 10px;
}

.input-control a
{
    cursor: pointer;
}

.form-wrap {
	padding: 0 10px;
}

.form-wrap-logo {
    position: absolute;
    text-align: center;
    width: 85%;
}

.form-wrap-logo img {
    width: 180px; 
    margin-top:70px;
	float: inherit;
}


/*INPUT*/

.input-control .labelFor {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 16px;
	font-weight: 300;
	line-height: normal;
	color: #5081af;/*Color Azul*/
	-webkit-transform: translate(-12%, -50%) scale(0.75);       			
	transform: translate(+2000%, -300%) scale(0.75);
}
/*
.input-container {
	left: 0;
    opacity: 1;
	visibility: visible;
	-webkit-transition: .3s 	ease;
    transition: .3s ease;
	-webkit-transition-delay: .4s;
	transition-delay: .4s;
}
*/
.input-container:nth-child(2) {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}

.input-container:nth-child(3) {
	-webkit-transition-delay: .6s;     
	transition-delay: .6s;
}

.input-container input {
	outline: none;
	z-index: 1;
	position: relative;
	background: none;
	width: 100%;
	height: 20px;
	border: 0;
	padding-top: 3px;
	font-size: 13px;
	font-weight: 400;
	box-shadow: none;
}

.input-container input:focus ~ label {
	-webkit-transform: translate(-12%, -50%) scale(0.75);   			
	transform: translate(-12%, -50%) scale(0.75);
}

.input-container input:focus ~ .bar:before, .input-container input:focus ~ .bar:after {
	width: 50%;
}

.input-container input:valid ~ label {
	-webkit-transform: translate(-12%, -50%) scale(0.75);
    transform: translate(-12%, -50%) scale(0.75);
    color: #FFFFFF;
}

.input-container label {
	position: absolute;
	color:  #B4B4B4;
	top: 0;
	left: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	-webkit-transform: translate(-1%, -1%) scale(0.9);
	transform: translate(-1%, -1%) scale(0.9);
	-webkit-transition: 0.2s ease;
  	transition: 0.2s ease;
    margin-left: -8px;
    width:260px;
}

.input-container .bar {
	position: absolute;
	left: 0;
	bottom: 0;
	background: #D0D0D0;
	width: 100%;
	height: 1px;
}

.input-container .bar:before, .input-container .bar:after {
	content: '';
	position: absolute;
	background: #5081af;/*Color azul*/
	width: 0;
	height: 1px;
	margin-right: 3px;
	-webkit-transition: .2s ease;
    transition: .2s ease;

}

.input-container .bar:before {
    left: 49%;
}

.input-container .bar:after {
    right: 50%;
}

.input-container input:focus ~ label {
    color: #FFFFFF;
    margin-left: 0;
}

/*FIN INPUT*/

.alert-danger{
    background: white;	
	color: #6f6b6a;
	line-height: 1.1;
}

/*LOGIN*/

.divUsuario {
    margin-top: 180px;
    margin-left: -100px; 
    position: absolute;
    width: 85%
}

.divPass {
    margin-top: 90px;
    margin-left: 200px; 
    position: absolute;
    width: 85%;
}

.divDatosUsuario {
    margin-top: 120px;
    margin-left: 200px; 
    position: absolute;
    width: 85%;
}

#divPassUser a{
    cursor: pointer;
    font-size: 25px;
	font-weight: 300;
	color: #524d47;
}

/*FIN LOGIN*/

/*RECUPERAR CONTRASEÑA*/
.divRecuperarContrasena {
    margin-top: 100px;
    margin-left: -10px; 
    position: absolute;
    width: 85%;
}

/*CREAR SESION*/
.divCrearSesion {
    margin-top: 150px;
    margin-left: -10px; 
    position: absolute;
    width: 85%;
}

.divCrearSesion .input-control
{
    text-align:center;
}

/*CAMBIAR CONTRASEÑA*/

.divMsgPass
{   
    position: absolute;
    margin-top: 150px;
    margin-left: 0px;
    width: 85%;
    color: #5081af;
    text-align:center;
}

.divMsgPass div
{
    background-color: rgba(255,255,255,0);
}

.divChangePass
{
    position: absolute;
    margin-top: 150px;
    margin-left: 200px;
    width: 85%;
}

/*FIN CAMBIAR CONTRASEÑA*/

/*PREPARAR SESION USUARIO*/
.divPrepararSesionUsuario
{   
    position: absolute;
    margin-top: 110px;
    margin-left: 80px;
    width: 85%;
    color: #5081af;
    text-align:center;
}

.divPrepararSesionUsuario div
{
    background-color: rgba(255,255,255,0);
}

/*FIN PREPARAR SESION USUARIO*/

/*AJUSTE PANTALLA INFERIOR A 768px*/
@media (max-width: 767px) {

    body {
	    padding: 0px;
    }

    .center {
	    margin: 0 auto;
	    width: 330px;
	    height: 500px;
    }

    .wrap {
	    /*position: fixed;*/
        border-radius: 5px 5px 0 0;
	    height: 50px;
    }

    .wrap img{
	    margin-left: 10px;
	    width: 85px;
    }

    .col-center{
	    margin: 20px auto;
	    width: 100%;
    }

    /*SLIDER*/

    #slideshow {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    height: 100%;
    }

    #slideshow div {
	    padding: 0;
    }

    #slideshow h2 {
	    margin: 25px 0 0 0;
	    line-height: 0em;
	    text-align: center;
	    font-size: 1.2em;
    }

    #slideshow h2 span {
	    border-width: 0;
    }

    #slideshow p {
	    display: none;
    }

    #slideshow .one {
	    background-position-y: 10px;
	    background-position-x: 50%;
    }

    #slideshow .two {
	    background-position-y: -10px;
	    background-position-x: 20%;
    }

    /*LOGIN*/
    #userLogoMarca{
	    margin-top:10px;
    }

    #divTokenText {
	    width: 25px;
	    float: left;
    }

    #divTokenButton {
	    width: 40px;
	    float: right;
    }

}


/*FOOTER*/

.footer-copyright
{
    position: fixed;
    text-align: right;
    right: 7px;
    bottom: 0px;
}

@media (max-height: 570px)
{
    .footer-copyright
    {
        position: relative;
    }
}

/*END FOOTER*/

/*-------------TEMA ROJO-------------*/
/*Se debe quitar el "/*" para aplicar los cambios*/

.btn-primary {
  background-color: rgb(0, 155, 172);
  border-color: rgb(0, 155, 172);
  border-radius: 16px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
  background-color: rgb(237, 108, 5);
  border-color: rgb(255, 255, 255);
  outline: 0px auto -webkit-focus-ring-color;
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  background-color: rgb(237, 108, 5);
  border-color: rgb(237, 108, 5);
}

a
{
  color:rgb(0, 155, 172);
}
a:active,
a:hover 
{
  color:rgb(0,155,72);
  border: 0px;
}
.input-control .labelFor {
    color: rgb(255,255,255);
}
.wrap {
	background: rgba(237,108,5,255); 
}
.input-container .bar:before, .input-container .bar:after {
	background: rgb(237, 108, 5); /*Banco W JM*/
	
}