@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;}

body {padding: 0px; font-size:18px; font-family:'rotsan';}

h1 {width: 100%; min-width: 384px; min-height: 104px; background: url(/img/dsgn/logo.jpg) center center no-repeat; margin: 20px 0px}

h1 span {display:none;}

.enca {background: #265370; /* Old browsers */
background: -moz-linear-gradient(top, #265370 0%, #7498b3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #265370 0%,#7498b3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #265370 0%,#7498b3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#265370', endColorstr='#7498b3',GradientType=0 ); /* IE6-9 */}
.sistemas {display: flex; justify-content: flex-end; align-items: flex-end; min-height: 104px; margin: 20px 0px; padding-right: 100px; }
.sistemas a {margin: 0px 5px; width:177px; height: 66px;}
.sistemas a span {display:none}
.sistemas a:first-child {background: url(/img/dsgn/safety.png) no-repeat;}
.sistemas a:first-child:hover {background: url(/img/dsgn/safetydb.png) no-repeat;}
.sistemas a:nth-child(2) {background: url(/img/dsgn/proveedores.png) no-repeat;}
.sistemas a:nth-child(2):hover {background: url(/img/dsgn/proveedores2.png) no-repeat;}
.sistemas a:nth-child(3) {background: url(/img/dsgn/facilities.png) no-repeat;}
.sistemas a:nth-child(3):hover {background: url(/img/dsgn/facilities2.png) no-repeat;}
.sistemas a:nth-child(4) {background: url(/img/dsgn/extintores.png) no-repeat;}
.sistemas a:nth-child(4):hover {background: url(/img/dsgn/extintores2.png) no-repeat;}

.encabezado {padding-right: 0px; padding-left: 0px;}
.encabezado .solint {width: 100%; /*border-top: 5px solid #333399;*/ -webkit-box-shadow: 0px 1px 2px 0px rgba(153,153,153,1); -moz-box-shadow: 0px 1px 2px 0px rgba(153,153,153,1); box-shadow: 0px 1px 2px 0px rgba(153,153,153,1);  }
.encabezado .loguito {position:absolute; top:30px; left:40px;}
.encabezado .btns {position:absolute; top:30px; right:40px}
.encabezado .btns a {-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; padding:13px 16px 0px; display: inline-block; color:white; width:175px; text-decoration: none}
.encabezado .btns a.safety {background:rgb(102,153,102); }
.encabezado .btns a.facilities {background:rgb(208,98,0);}
.encabezado .btns a.safety:hover {background:rgb(76,126,76); }
.encabezado .btns a.facilities:hover {background:rgb(183,86,0);}
.encabezado .btns a p {margin-left:40px; line-height:22px}
.encabezado .btns a i {float:left; font-size:2em}

.sinpad {padding-right: 0px; padding-left: 0px; margin-right: auto; margin-left: auto; text-align: justify;}
.sinpad .row {margin-right: 0px; margin-left: 0px;}
.sinpad div {padding: 0px;}

.sinpad h2, .sinpad h3 {margin:40px 0px 30px 0px; background: #333399; padding: 10px 5px 5px 5px; color: white;}
.sinpad h2 {padding-left:100px;}
.sinpad h3 {padding: 10px 0px 5px 40px;}
.sinpad h4 {font-size: 1.5em; padding-top:15px; color: #333399;}
.sinpad .izq {padding: 0px 40px 0px 100px;}
.sinpad .der {padding: 0px 100px 0px 40px;}
.sinpad p {5px 0px 5px 0px}
.sinpad ul {padding: 5px 0px 5px 30px; margin: 0px;}
.sinpad .der .img {padding:15px 100px 0px 40px; text-align: center;}
.sinpad .der .img img {max-width: 100%}

h2.contacto {background: #003366; text-align:center;}

.btn {background: #003366; border: 1px solid #003366; padding-top: 8px}

footer {margin-top: 30px; background: #333; color: white; padding: 25px 100px 15px; text-align: left; font-size: 0.9em}
footer p { padding: 0px; margin:0px;}
footer p a {font-size: 1em; color: white}
footer p a:hover {color:white;}
footer img {max-width: 100%}
.foot div:nth-child(2) p:first-child {margin-bottom:10px}
.foot div:last-child { text-align: center;}
.copy { text-align: center; margin-top: 20px; font-size: 1.2em;}

@media only screen and (max-width:1400px){
  body{}
  .sistemas {padding-right: 0px;}
  .sinpad h2 {padding-left:70px;}
  .sinpad .izq {padding: 0px 30px 0px 70px;}
  .sinpad .der {padding: 0px 70px 0px 30px;}
  .sinpad .der .img {padding:15px 70px 0px 30px;}
}

@media only screen and (max-width:1199px){
  body {}
  h1 {width: 100%; min-width: 100%; min-height:95px; background: url(/img/dsgn/logo.jpg) center center no-repeat; background-size: contain!important;}
  .sistemas a {background-size:contain!important; height: 56px;}
  .sistemas {min-height: 104px; align-items: center;}
  .sinpad h2 {padding-left:50px;}
  .sinpad h3 {padding-left:10px; text-align: left}
  .sinpad .izq {padding: 0px 20px 0px 50px;}
  .sinpad .der {padding: 0px 50px 0px 20px;}
  .sinpad .der .img {padding:15px 50px 0px 20px;}
  footer {padding: 20px 50px 15px;}
}

@media only screen and (max-width:991px){
body {font-size: 13px}
 h1, .sistemas {margin:0px;}
 .sistemas {min-height: 100px; }
 .sistemas a {height: 46px;}
 .sinpad h2 {padding-left:20px;}
 .sinpad h3 {padding-left:20px; text-align: left}
 .sinpad .izq {padding: 0px 20px 0px 20px;}
 .sinpad .der {padding: 0px 20px 0px 20px;}
 .sinpad .der .img {padding:15px 20px 0px 20px;}
 footer, .copy {font-size: 0.9em}
 footer {padding: 20px 20px 15px;}
 footer p {padding: 0px 5px}

 .encabezado .loguito {top:20px; left:20px;}
 .encabezado .btns {top:20px; right:20px}
 .encabezado .loguito img {width:220px}
 .encabezado .btns a {padding:7px 10px 5px; width:125px;}
 .encabezado .btns a p {line-height:15px; padding: 0px; margin: 0px; margin-left:30px}

}

@media only screen and (max-width:767px){
  h1 {margin:20px 0px 10px}
  .sinpad h2, .sinpad h3 {margin:30px 0px 20px 0px; font-size: 1.2em}
  .sistemas {flex-wrap:wrap; justify-content: center; max-width: 500px; margin: 0px auto 20px}
  .sistemas a {width:100%; max-width:177px; height: 66px; margin-bottom: 5px}
  footer, .copy { text-align: center;}
  footer .men {display:none;}
  footer p {margin-bottom: 10px}
  footer img { max-width: 200px}

}

@media only screen and (max-width:600px){
.sinpad h2, .sinpad h3 {margin:20px 0px 20px 0px; font-size: 1.2em}
.encabezado a.loguito {position:relative; top:0px; left:0px; width: 100%; text-align: center; display: inline-block;}
.encabezado .loguito img {width:80%; margin: 5px auto;}
.encabezado .btns {position:relative; text-align: center; width: 100%; top:0px; right: 0px; margin-bottom: 15px;}
.encabezado .btns a {margin:10px auto 0px; text-align: left;}
}

@media only screen and (max-width:300px){
.encabezado .btns a {display: block}
}