body, html {
    font-family:  'Roboto', sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.text-center {
    text-align:center;
}
#logo-cliente {
    width:auto;
    max-width:130px;
    height:auto;
    padding:10px 0;
}
.login-wrap{
	width: auto;
    height: auto;
    margin: auto;
    padding:10px 20px;
    max-width: 400px;
    min-width: 400px;
    box-shadow: 0 12px 15px 0 rgba(0,0,0,.24), 0 17px 50px 0 rgba(0,0,0,.19);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    overflow:hidden;
    background:rgba(1,0,0,.8);
     -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;  
    border-radius: 15px; 
    /*background:#3e5155;*/

}
.login-html{
	width:auto;
	height:100%;
	padding:10px 10px 0px 10px;
	/*background:rgba(40,57,101,.9);*/
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
	-webkit-transform:rotateY(180deg);
	        transform:rotateY(180deg);
	-webkit-backface-visibility:hidden;
	        backface-visibility:hidden;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
	display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
	text-transform:uppercase;
}
.login-html .tab{
	font-size:22px;
	margin-right:15px;
	padding-bottom:5px;
	margin:0 15px 10px 0;
	display:inline-block;
	border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
	color:#fff;
	border-color:#1161ee;
}
.login-form{
	min-height:345px;
	position:relative;
	-webkit-perspective:1000px;
	        perspective:1000px;
	-webkit-transform-style:preserve-3d;
	        transform-style:preserve-3d;
    margin-bottom:20px;
}
.login-form .group{
	margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
	width:100%;
	color:#fff;
	display:block;
}
.login-form .group .input,
.login-form .group .button{
	border:none;
	padding:15px 20px;
	border-radius:5px;
	background:rgba(255,255,255,1);
    outline:none !important;
}
.login-form .group .input {
    color:#444;
    font-size:18px;
}
.login-form .group input[data-type="password"]{
	text-security:circle;
	-webkit-text-security:circle;
}
.login-form .group .label{
	color:#fff;
	font-size:14px;
    letter-spacing:4px;
    margin-bottom:20px;
    font-family:  'Roboto', sans-serif;
}
.login-form .group .button{
	background:#FEBA00;
    cursor:pointer;
     -webkit-transition: all 300ms ease-out;
    -moz-transition: all 600ms ease-out;
    -ms-transition: all 600ms ease-out;
    -o-transition: all 600ms ease-out;
    transition: all 600ms ease-out; 
    font-family:  'Roboto', sans-serif;
}
.login-form .group .button:hover {
   background:#d1990c;  
}

.login-form .group label .icon{
	width:15px;
	height:15px;
	border-radius:2px;
	position:relative;
	display:inline-block;
	background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
	content:'';
	width:10px;
	height:2px;
	background:#fff;
	position:absolute;
	-webkit-transition:all .2s ease-in-out 0s;
	transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
	left:3px;
	width:5px;
	bottom:6px;
	-webkit-transform:scale(0) rotate(0);
	        transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
	top:6px;
	right:0;
	-webkit-transform:scale(0) rotate(0);
	        transform:scale(0) rotate(0);
}
.login-form .group .check + label{
	color:#D1990C;
}
.login-form .group .check:checked + label{
	color:#fff;
}
.login-form .group .check:checked + label .icon{
	background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
	-webkit-transform:scale(1) rotate(45deg);
	        transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
	-webkit-transform:scale(1) rotate(-45deg);
	        transform:scale(1) rotate(-45deg);
}
.login-form .sign-in-htm{
	-webkit-transform:rotate(0);
	        transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
	-webkit-transform:rotate(0);
	        transform:rotate(0);
}

.hr{
	height:2px;
	margin:10px 0 10px 0;
	background:rgba(255,255,255,.2);
}
.foot-lnk{
	text-align:center;
}
.foot-lnk a{
    color:#fff;
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 600px) {
    .login-wrap {
        width: auto;
        height: auto;
        margin: auto;
        max-width: 300px !important;
        min-width: 300px !important;
    }
   
    .login-html {
        padding: 0px;
    }
    .login-wrap #logo-cliente {
        width: 80px !important;
        max-width: 80px !important;  
        padding: 0;         
    }
    .login-form {
        margin-bottom:0px;
        min-height:300px;
    }
    .login-form .group .input {
        padding:5px        
    }
    .login-form .group .label {
        font-size:10px;
        margin-bottom:5px;
    }
    .login-form .group .label {
        font-size:10px;
        margin-bottom:5px;
    }
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

@media only screen 
and (min-device-width : 601px) 
and (max-device-width : 767px) {
    .login-wrap {
        width: auto;
        height: auto;
        margin: auto;
        max-width: 450px !important;
        min-width: 450px !important;
    }
   
    .login-html {
        padding:90px 70px 50px 70px;
    }
   
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    .login-html {
        padding:90px 70px 50px 70px;
    }

    
}

/* iPads (landscape) Tumbado----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
    
}

/* iPads (portrait)  Pie----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
   
}



/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


/*====================================================
Desktops and laptops
======================================================*/
@media only screen 
and (min-width : 320px) 
and (max-width : 600px) {
    .login-wrap {
        width: auto;
        height: auto;
        margin: auto;
        max-width: 300px !important;
        min-width: 300px !important;
    }
    .login-html {
        padding: 0px;
    }
    .login-wrap #logo-cliente {
        width: 80px !important;
        max-width: 80px !important;  
        padding: 0;         
    }
    .login-form {
        margin-bottom:0px;
        min-height:300px;
    }
    .login-form .group .input {
        padding:5px        
    }
    .login-form .group .label {
        font-size:10px;
        margin-bottom:5px;
    }
    .login-form .group .label {
        font-size:10px;
        margin-bottom:5px;
    }
   
}

@media only screen 
and (min-width : 601px) 
and (max-width : 767px) {
    .login-wrap {
        width: auto;
        height: auto;
        margin: auto;
        max-width: 450px !important;
        min-width: 450px !important;
    }
   
    .login-html {
        padding:90px 70px 50px 70px;
    }

    
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
    .login-html {
        padding:90px 70px 50px 70px;
    }
    
}

@media only screen 
and (max-height : 767px) and 
(min-width : 1024px) {
/* Styles */

}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}


.loader {
  height: 4px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ddd;
  visibility:hidden;
}
.loader.active {
    visibility:visible
}
.loader:before{
  display: block;
  position: absolute;
  content: "";
  left: -200px;
  width: 200px;
  height: 4px;
  background-color: #2980b9;
  animation: loading 2s linear infinite;
}

@keyframes loading {
    from {left: -200px; width: 30%;}
    50% {width: 30%;}
    70% {width: 70%;}
    80% { left: 50%;}
    95% {left: 120%;}
    to {left: 100%;}
}