@font-face {
    font-family: 'ralewayblack';
    src: url('raleway-black-webfont.woff2') format('woff2'),
         url('raleway-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ralewayblack_italic';
    src: url('../fonts/raleway-blackitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'ralewaybold';
    src: url('../fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaybold_italic';
    src: url('../fonts/raleway-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayextrabold';
    src: url('../fonts/raleway-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/raleway-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayextrabold_italic';
    src: url('../fonts/raleway-extrabolditalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayextralight';
    src: url('../fonts/raleway-extralight-webfont.woff2') format('woff2'),
         url('../fonts/raleway-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayextralight_italic';
    src: url('../fonts/raleway-extralightitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-extralightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewayitalic';
    src: url('../fonts/raleway-italic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaylight';
    src: url('../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../fonts/raleway-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaylight_italic';
    src: url('../fonts/raleway-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ralewaymedium';
    src: url('../fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('../fonts/raleway-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*
{
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
*:focus
{
    outline:none;
}
body,
html
{
    width:100%;
    height:100%;
}
body
{
    margin:0;
    padding:0;
    font-size:19px;
    font-family: 'ralewaylight';
    background:url(../images/fondo.jpg) center center fixed no-repeat;
    background-size:cover;
}
h1
{
    font-size:0;
    text-align:center;
}
h1 img
{
    display:inline-block;
    max-width:220px;
    width:90%;
}
form
{
    width:85%;
    max-width:400px;
    margin:40px auto 0 auto;
}
form > span{
	display: block;
	position: relative;
}
.content
{
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.70);
    padding: 50px 0;
}
.codigo, .clave, .id-cole
{
    width: 100%;
    height: 45px;
    padding: 0 15px 0 50px;
    font-size: 17px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    font-weight: 400;
    color: #fff;
}
.codigo 
{
    background: #0c9cab url(../images/ico-codigo.svg) left 5px center no-repeat;
    background-size: 25px;
    border: 2px solid #008b9a;
    margin-bottom: 15px;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.clave {
    background: #b6cd1d url(../images/ico-clave.svg) left 10px center no-repeat;
    background-size: auto 25px;
    border: 2px solid #9bb200;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.id-cole
{
    background:#f5bf00 url(../images/ico-id-col.svg) left 7px center no-repeat;
    background-size: auto 25px;
    margin-bottom: 15px;
    border: 2px solid #cda000;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.codigo:focus
{
    box-shadow:inset 0 0 5px #9df6ff;
    background:#0c9cab url(../images/ico-codigo-focus.svg) left 5px center no-repeat;
    background-size:27px;
}
.clave:focus
{
    box-shadow:inset 0 0 5px #f8ffca;
    background:#b6cd1d url(../images/ico-clave-focus.svg) left 10px center no-repeat;
    background-size: auto 27px;
}
.id-cole:focus
{
    box-shadow:inset 0 0 5px #f8ffca;
    background:#f5bf00 url(../images/ico-id-col-focus.svg) left 7px center no-repeat;
    background-size: auto 27px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(0,0,0,0.48);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0,0,0,0.48);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(0,0,0,0.48);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(0,0,0,0.48);
}
.b-entrar
{
    text-align:center;
}
.entrar
{
    width:120px;
    height:45px;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    border:2px solid #ee7a10;
    border-radius:10px;
    -webkit-border-radius: 10px;
    -moz-border-radius:10px;
    color:#fff;
    font-size:17px;
    font-weight:600;
    background: #ee7a10;
    margin-top:15px;
    cursor:pointer;
    box-shadow:inset 0 0 8px rgba(0,0,0,0.50);
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
}
.b-mostrar-clave{
	position:relative;
	position:absolute;
	width: 45px;
	height: 45px;
	top: 0;
	right: 0;
	background: #9bb200;
    border: none;
    border-radius: 0 10px 10px 0;
}
.b-mostrar-clave label{
	position:absolute;
	width: 45px;
	height: 45px;
	top: 0;
	right: 0;
	background: url(../../images/entrada/ocultar-clave.png) center center no-repeat;
	background-size: auto 20px;
}
.b-mostrar-clave input{
	opacity: 0;
}
.b-mostrar-clave input:checked + label{
	background: url(../../images/entrada/mostrar-clave.png) center center no-repeat;
	background-size: auto 20px;
}