@font-face {
    font-family: 'rotsan';
    src: url('/funcionalidades/fuentes/rotsan.eot');
    src: url('/funcionalidades/fuentes/rotsan.eot?#iefix') format('embedded-opentype'),
         url('/funcionalidades/fuentes/rotsan.woff') format('woff'),
         url('/funcionalidades/fuentes/rotsan.ttf') format('truetype'),
         url('/funcionalidades/fuentes/rotsan.svg#AccentureRotis') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {height:100%; width:100%; }
body {font-family:'rotsan'; background: url(/funcionalidades/login/backSafety.jpg); background-size: 100% auto; margin:0px; padding:0px; font-size: 18px}
header {background: rgba(0,0,0,0.2); padding: 50px 0px 30px; margin:0px 50px}
header h1 {margin:0px; text-align: center; color: white; font-size: 3em; text-shadow: 1px 1px 2px rgba(10, 10, 10, 1); letter-spacing: 2px}
header h1 i {margin-right:10px}

.login {margin-top:60px}
.logueo1, .logueo2 {background:rgba(0,0,0,0.2); color:white; padding: 30px 35px; margin:0px 30px 0px 100px }
.logueo2, .copy {margin:0px 100px 0px 30px}
.login h2 {margin:0px 0px 10px; font-size: 1.4em}
.login h2 i {float: right; opacity:0.5; font-size: 1.4em; position: relative; top:-10px}
p {margin-top:15px;}
.copy {margin-top: 15px}
.copy p {color:white; margin: 0px; text-align: center;}
form input, form button {width: 100%; background:rgba(255,255,255,0.3); margin: 10px 0px; padding:10px 10px 7px; border: 1px solid white; color: white;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
}
::-moz-placeholder { /* Firefox 19+ */
  color: white;
}
:-ms-input-placeholder { /* IE 10+ */
  color: white;
}
:-moz-placeholder { /* Firefox 18- */
  color: white;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
     background-color: rgba(255,255,255,0.5)!important;
     -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.8) inset;
}

@media only screen and (max-width:1100px){
  body {background-size:auto 100%; background-position:center top; }
}

@media only screen and (max-width:991px){
  .logueo1, .logueo2, header, .logueo2, .copy {margin:0px}
  .copy {margin-top: 15px}
}

@media only screen and (max-width:767px){
  body {background: url(/funcionalidades/login/backSafety2.jpg);}
  body {font-size: 14px;}
  .login {margin-top:40px}
  header, .copy {margin:0px 60px }
  .logueo1, .logueo2 {margin:0px 80px 20px; padding: 25px 20px 20px; }

}

@media only screen and (max-width:600px){
  header h1 {font-size: 2.5em;letter-spacing:0px }
  header {padding: 30px 0px 20px;}
  .login {margin-top:30px}
  header, .copy {margin:0px }
  .logueo1, .logueo2 {margin:0px 20px 20px }
  .copy {margin: 15px 0px 15px}
}

@media only screen and (max-width:400px){
  header h1 {font-size: 1.8em; }
  .login {margin-top:20px}
  .logueo1, .logueo2, header, .copy {margin:0px }
  .logueo1, .logueo2 {margin-bottom:20px }
  .copy {margin: 15px 0px 15px}
}