/* ===== ESTILOS GENERALES DEL SITIO ===== */

body {
    width: 100%;
    height: 100%;
    font-family: 'Ubuntu', sans-serif;
    background: url(../img/point.png) repeat;
}

h1, h2, h3 {
    color: #d0552d;
    border-bottom: 1px solid #d0552d;
    padding-bottom: 2%;
    /*font-weight: lighter;*/
}

h1:hover, h2:hover, h3:hover {
    color: orange;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
} 

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.3em;
}

h3 {
    font-size: 1em;
}

p {
    font-size: 1em;
    color: #072c76;
    font-weight: lighter;
}

p a {
    text-decoration: none;
    font-weight: bolder;
}

p a:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

img {
    max-width: 100%;
}

a strong {
    color: red;
}

a strong:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

/*
#logo-top {
    width: 89px;
    height: 48px;
    position: absolute;
    top: 0;
    margin: 0.5% 0 0 6%;
}*/

#wrap-top {
    width: 90%;
    height: 25px;
    top: 0;
    margin: 0 auto;
    background-color: rgba(0,0,10,0.4);
}

#wrap-top #menu-top {
    width: 360px;
    height: 25px;
    float: right;
}

#wrap-top #indicadores {
    width: auto;
    height: 25px;
    float: left;
}

#wrap-top #menu-top nav, #wrap-top #menu-top ul {
    width: 360px;
    margin: 0;
    padding: 0;
}

#wrap-top #menu-top ul li {
    float: left;
}

#wrap-top #menu-top ul li a {
    display: block;
    width: 120px;
    height: 25px;
    font-size: 0.7em;
    text-align: center;
    text-decoration: none;
    line-height: 25px;    
    color: #fff;
}

#wrap-top #menu-top ul li a:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}


/* ===== ESTILOS DEL HEADER Y MENU DE NAVEGACION ===== */

header {
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: url(../img/point.png) repeat, rgba(255,255,255,1);
}

#head {
    width: 100%;
    height: auto;
    overflow: hidden;
}

#head #logo a #img-logo {
    width: 250px;
    height: 120px;
    margin: 0;
    padding: 0;
    float: left;
    background: url(../img/logoTexto.png) no-repeat;
}

#head #logo a #img-logo:hover {
    width: 250px;
    height: 120px;
    background: url(../img/logo.png) no-repeat;
    transition-property: all;
    transition-duration: .50s;
    transition-timing-function: linear;
    transition-delay: .50s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .50s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .50s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .50
    -moz-transition-timing-function: linear;
    -moz-transition-delay: .50s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .50s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .50s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .50s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .50s;
}

#head #logo-cert-iso {
    width: 180px;
    height: 100px;
    margin-top: 1%;
    float: right;
}

#head #logo-suatrans {
    width: 150px;
    height: 100px;
    margin-top: 1%;
    float: right;
}

#menu {
    width: 90%;
    height: 64px;
    overflow: hidden;
    margin: 0 auto;
    background: rgba(204,51,0,0.8); 
}

#menu nav {
    width: 700px;
    margin: 0 auto;
    padding:0;
}

#menu nav ul {
    width: 700px;
    margin: 0;
    padding: 0;
}

#menu nav ul li {
    /*margin-left: 2%;
    margin-top: 2%;*/
    float: left;
}

#menu nav ul li a {
    display: block;
    width: 100px;
    height: 64px;
    font-size: 0.9em;    
    text-align: center;
    text-decoration: none;
    line-height: 64px;
    color: white;
    /*background: rgba(204,51,0,0.8);*/
}

#menu nav ul li a:hover {
    color: white;
    background: #072c76;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

#menu #search {
    width: 300px;
    height: 64px;
    margin: 0;
    padding: 0;
    float: right;
}

#menu #social, #menu #social a #logo-twitter, #menu #social a #logo-twitter:hover {
    width: 40px;
    height: 40px;
    float: right;
    margin: 0.8% 0.5% 0 0;
    padding: 0;
}

#menu #social a #logo-twitter {
    background: url(/img/logoTwitterWhite.png) no-repeat;
}

#menu #social a #logo-twitter:hover {
    background: url(/img/logoTwitterBlue.png) no-repeat;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25
    -moz-transition-timing-function: linear;
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

/* ===== ESTILOS PARA EL CONTENEDOR WRAPPER ===== */

#wrapper {
    width: 90%;
    height: auto;
    overflow: hidden;
    margin: 1.5% auto;
}

#wrapper span {
    font-size: 0.8em;
    font-style: italic;
    color: red;
}


/* ===== ESTILOS PARA EL SLIDER ===== */

#slide {
    width: 90%;
    height: 350px;
    overflow: hidden;
    margin: 0 auto 2% auto;
}


/* ===== ESTILOS PARA LOS ARTICULOS, NOTICIAS Y ASIDE ===== */

.banner {
    width: 90%;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}

.banner img {
    max-width: 100%; 
    margin: auto;
    display: block;
}

.container {
    width: 100%;
    height: auto;
    overflow: hidden;
    float: left;
    padding: 2%;
}

.container-articulos, .container-form {
    width: 58%;
    height: auto;
    overflow: hidden;
    float: left;
    padding: 0.5%;
}

.container-noticias, .container-mapa {
    width: 38%;
    height: auto;
    overflow: hidden;
    float: right;
    padding: 0.5%;
}

/*.titulos {
    display: inline;
    width: auto;
    height: 50px;
    margin-bottom: 10%;
    padding: 3%;
    background-color: rgba(204,51,0,0.6);
}

.titulos h1 {
    color: white;
    text-align: center;
    font-weight: lighter;
    line-height: 50px;
}
*/
.container .articulos, .container-articulos .articulos {
    width: 35%;
    height: auto;
    overflow: hidden;
    float: left;
    margin-right: 1%;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/    
    background: rgba(255,255,255,0.6);
}

.container .articulos:hover, .container-articulos .articulos:hover, .container-articulos .articulo-ppal:hover,
.articulos-logistica:hover, .articulos-nosotros:hover, .noticias:hover, #twitter:hover, .noticias-logistica:hover,
.noticias-nosotros:hover, #form-curri:hover, #form:hover, .mapa:hover, .container-productos:hover, .sala-ventas:hover {
    box-shadow: 0px 0px 15px grey;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25
    -moz-transition-timing-function: linear;
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

.container-articulos .articulo-ppal {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: left;
    margin-bottom: 2%;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

.container-productos {
    width: 95%;
    height: auto;
    overflow: hidden;
    margin: 1% auto;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

.articulos-logistica, .articulos-nosotros {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: left;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

.articulos article section p, .noticias aside p, .articulo-ppal {
    text-align: justify;
}

.noticias {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: right;
    margin-bottom: 3%;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

.noticias aside ul {
    margin: 0;
    padding: 2%;
}

.noticias aside ul li {
    list-style-type: circle; 
    margin-left: 1%;
    margin-bottom: 1.5%;
}

.noticias aside ul li a {
    text-decoration: none;
    color: #072c76;
}

.noticias aside ul li a:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

.noticias-logistica, .noticias-nosotros {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: right;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

.noticias-logistica h1 a {
    text-decoration: none;
    line-height: 25px;    
    color: #072c76;
}

.noticias-logistica h1 a:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}
 
.noticias-nosotros .izq {
    width: 45%;
    float: left;
}

.noticias-nosotros .der {
    width: 45%;
    float: right;
}

.noticias-nosotros .izq .logo-iso {
    width: 120px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 1%;
    text-align: center; 
}

.noticias-nosotros .der .logo-bpl {
    width: 180px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 1%;
    text-align: center; 
}

.noticias #logo-suatrans {
    width: 200px;
    height: auto;
    overflow: hidden;
    float: left;
    margin: 1%;
    padding: 1%;
}

/* ===== ESTILOS TIMELINE TWITTER ===== */

#twitter {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: right;
    margin-left: 1%;
    margin-bottom: 1%;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

/* ===== FIN ESTILOS TIMELINE TWITTER ===== */

/* ===== ESTILOS PARA EL FORMULARIO DE CONTACTO Y ENVIO DE CURRICULUMS ===== */

.container-form-curri {
    width: 90%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 2%;
}

#form, #form-curri {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: left;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

#form input, #form textarea, #form-curri input, #form-curri textarea {
    width: 80%;
    margin: 1% auto;
    padding-left: 1%; 
    border: 1px solid #aaa;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    -moz-box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    -webkit-box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    -o-box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    -ms-box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    transition-property: padding;
    transition-duration: .10s;
    transition-delay: .10s;
    /* Chrome, Safari */
    -webkit-transition-property: padding;
    -webkit-transition-duration: .10s;
    -webkit-transition-delay: .10s;
    /* Firefox */
    -moz-transition-property: padding;
    -moz-transition-duration: .10s;
    -moz-transition-delay: .10s;
    /* Opera */
    -o-transition-property: padding;
    -o-transition-duration: .10s;
    -o--transition-delay: .10s;
    /* Microsoft IE */
    -ms-transition-property: padding;
    -ms-transition-duration: .10s;
    -ms-transition-delay: .10s;
}

#form input:focus, #form textarea:focus, #form-curri input:focus, #form-curri textarea:focus {
    background: #fff;
    padding: 4px 0 4px 1%;
    border: 2px solid rgba(204,51,0,0.8);
    box-shadow: 0 0 3px rgba(204,51,0,0.8);
    -moz-box-shadow: 0 0 3px rgba(204,51,0,0.8);
    -webkit-box-shadow: 0 0 3px rgba(204,51,0,0.8);
    -o-box-shadow: 0 0 3px rgba(204,51,0,0.8);
    -ms-box-shadow: 0 0 3px rgba(204,51,0,0.8);
}

#form input, #form-curri input {
    height: 30px;

}

#form textarea, #form-curri textarea {
    height: 100px;
}

#form label, #form-curri label {
    color: #c30;
}

#form p span, #form-curri p span {
    font-size: 0.8em;
    font-style: italic;
    color: red;
}

/* ===== ESTILOS PARA EL BOTON ENVIAR ===== */

input#boton-enviar, .boton-enviar {
    width: 25%;
    height: 40px;
    margin: 2% 0 2% 0;
    float: left;
    font-size: 1.5em;
    color: white; 
    border: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background: rgba(204,51,0,0.8);
}

input#boton-enviar:hover, .boton-enviar:hover {
    color: white;
    background: #072c76;    
    box-shadow: 0px 0px 10px #000;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

/* ===== ESTILOS PARA EL BOTON RESET ===== */

/*.boton-limpiar {
    width: 25%;
    height: 40px;
    margin: 2% 0 2% 5%;
    float: left;
    font-size: 1.5em;
    color: white;
    border: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background: rgba(204,51,0,0.8);
}*/

/*.boton-limpiar:hover {
    color: white;
    background: #072c76;
    box-shadow: 0px 0px 10px #000;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari /
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox /
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera /
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE /
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}*/

/* ===== ESTILOS PARA EL BOTON RESET ===== */

.boton-limpiar {
    width: 25%;
    height: 40px;
    margin: 2% 0 2% 5%;
    float: left;
    font-size: 1.5em;
    color: white;
    border: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    background: rgba(204,51,0,0.8);
}

.boton-limpiar:hover {
    color: white;
    background: #072c76;
    box-shadow: 0px 0px 10px #000;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

/* ===== ESTILOS PARA EL MAPA ===== */

.mapa, .sala-ventas {
    width: 95%;
    height: auto;
    overflow: hidden;
    float: right;
    padding: 2%;
    box-shadow: 0px 0px 4px grey;
    /*border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;*/
    background: rgba(255,255,255,0.6);
}

.sala-ventas {
    margin-bottom: 3%;
}

/*===========================*/


/* ===== ESTILOS PARA LA SECCION PRODUCTOS POR AREA Y RUBRO ===== */



#container-prod > input {
  position: absolute;
  filter: alpha(opacity=0);
  opacity: 0;
}

#container-prod > input:hover {
  cursor: pointer;
}

#container-prod > input:hover + span,
#container-prod > input:checked + span {
  background: rgba(204,51,0,0.8);
  color: #f0f0f0;
  border-radius: 5px;
}
#container-prod > input:checked + span + i {
  color: #1ABC9C;
}

#container-prod > span {
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
      transition: all .5s;
}

#container-prod > input,
#container-prod > span {
  background: #f0f0f0;
  display: block;
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  z-index: 9;
  margin-bottom: 5px;
}

#container-prod .tab-content {
  position: absolute;
  top: 98%;
  right: 10%;
  width: 70%;
  height: 100%;
  margin-top: 60px;
}

#container-prod .tab-content section {
  position: absolute;
  width: 100%;
  height: auto;
  padding: 20px;
  display: none;
  box-shadow: 0px 0px 4px grey;
  background-color: rgba(255,255,255,0.6);
}

#container-prod .tab-content section:hover {
  box-shadow: 0px 0px 10px grey;   
}

#container-prod > input.tab-1:checked ~ .tab-content .tab-item-1 {
  display: block;
}

#container-prod > input.tab-2:checked ~ .tab-content .tab-item-2 {
  display: block;
}

/*===========================*/

/* ESTILOS PARA PRODUCTOS */

#container-prod {
    width: 100%; /* Ancho del contenedor */
    height: 600px;
    margin: 5% auto 5% auto;      
}

#container-prod p a {
    text-decoration: none;
    font-weight: bolder;
}

#container-prod p a:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

#container-prod .tab-content input {
    height: 2.5em;
    visibility: hidden;
}

#container-prod .tab-content label {
     background: rgba(204,51,0,0.8); /* Fondo de las pestañas */
     border-radius: 4px 4px 0 0;
     color: white; /* Color del texto de las pestañas */
     cursor: pointer;
     display: block;
     float: left;
     font-size: 1em; /* Tamaño del texto de las pestañas */
     height: 2.5em;
     line-height: 2.5em;
     margin-top: 2%; 
     margin-right: .25em;
     padding: 0 1.5em;
     text-align: center;
}

#container-prod .tab-content input:hover + label {
     background: #072c76; /* Fondo de las pestañas al pasar el cursor por encima */
     color: white; /* Color del texto de las pestañas al pasar el cursor por encima */
}

#container-prod .tab-content input:checked + label {
     background: #072c76; /* Fondo de las pestañas al presionar */
     color: white; /* Color de las pestañas al presionar */
     position: relative;
     z-index: 6;
}

#contenidos-area, #contenidos-rubro {
     position: relative;
     width: 100%;
     margin-top: 2%;
     background-color: rgba(255,255,255,0.5); /* Fondo del contenido */
     border-radius: 10px;
     min-height: 35em; /* Alto del contenido */
     z-index: 5;
}

#contenidos-area div, #contenidos-rubro div {
     opacity: 0;
     padding: 1.5em;
     position: absolute;
     z-index: -100;
 }

#contenidos-area ul li, #contenidos-rubro ul li {
    list-style-type: none;
    font-size: 1em;
    line-height: 1.8em;
    font-weight: lighter;
    color: #072c76;
}

#contenidos-area ul li a, #contenidos-rubro ul li a {
    color: #072c76;
    text-decoration: none;
}

#contenidos-area ul li a:hover, #contenidos-rubro ul li a:hover {
    color: rgba(204,51,0,0.8);
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

#contenidos-area #contenido-ind, #contenidos-area #contenido-hogar, #contenidos-area #contenido-sunny {
    width: 100%;
}

#contenido-ind p {
     clear: both;
     margin-bottom: 1em;
}

#contenido-ind p.left img {
     float: left;
     margin-right: 1em;
}

#contenido-ind p.last {
     margin-bottom: 0;
}

#contenido-hogar p {
     float: left;
     width: 48.5%;
}

#contenido-hogar p.column-right {
     margin-left: 3%;
}

#contenido-hogar p img {
     display: block;
     margin: 0 auto 1em auto;
}

#container-prod .tab-content input#tab-linea-ind:checked ~ #contenidos-area #contenido-ind,
#container-prod .tab-content input#tab-linea-hogar:checked ~ #contenidos-area #contenido-hogar,
#container-prod .tab-content input#tab-linea-sunny:checked ~ #contenidos-area #contenido-sunny {
     opacity: 1;
     z-index: 100;
}

#contenidos-rubro #contenido-rubro-industria, #contenidos-rubro #contenido-rubro-trat, #contenidos-rubro #contenido-mant, #contenidos-rubro #contenido-rubro-agro {
    width: 100%;
}

#contenido-rubro-industria p {
     clear: both;
     margin-bottom: 1em;
}

#contenido-rubro-industria p.left img {
     float: left;
     margin-right: 1em;
}

#contenido-rubro-industria p.last {
     margin-bottom: 0;
}

#contenido-rubro-trat p {
     float: left;
     width: 48.5%;
}

#contenido-rubro-trat p.column-right {
     margin-left: 3%;
}

#contenido-rubro-trat p img {
     display: block;
     margin: 0 auto 1em auto;
}

#container-prod .tab-content input#tab-rubro-industria:checked ~ #contenidos-rubro #contenido-rubro-industria,
#container-prod .tab-content input#tab-rubro-trat:checked ~ #contenidos-rubro #contenido-rubro-trat,
#container-prod .tab-content input#tab-rubro-mant:checked ~ #contenidos-rubro #contenido-rubro-mant,
#container-prod .tab-content input#tab-rubro-agro:checked ~ #contenidos-rubro #contenido-rubro-agro {
     opacity: 1;
     z-index: 100;
}

/* ===== ESTILOS PARA EL ACORDION SECCION TIPS===== */

#accordion {
    width: 80%;
    margin: 0 auto;
}

#accordion input {
  display: none;
}

#accordion label {
  width: 80%;
  height: 100px;
  line-height: 100px;
  color: #d0552d;
  font-size: 1em;
  margin: 0 auto;
  background: #eee;
  border-radius: .25em;
  cursor: pointer;
  display: block;
  margin-bottom: .125em;
  padding: .25em 2%;
  z-index: 20;
}

#accordion label:hover {
  color: #fff;
  background: rgba(204,51,0,0.8);
}

#accordion input:checked + label {
  background: rgba(204,51,0,0.8);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: white;
  margin-bottom: 0;
}

#accordion article {
  width: 80%;
  height: 0px;
  overflow: hidden;
  margin: 0 auto;
  background: #f7f7f7;
  z-index: 10;
}

#accordion article ul li {
    list-style-type: none;
}

#accordion article p {
  padding: 0.5em;
  text-align: justify;
}

#accordion input:checked ~ article {
  border-bottom-left-radius: .25em;
  border-bottom-right-radius: .25em;
  width: 80%;
  height: auto;
  margin-bottom: .125em;
  padding: 2% 4%;
}

#accordion article table {
    width: 100%;
    margin: 0 auto;
    color: #072c76;
}

#accordion article table tbody tr.par {
    background-color: #ddd;
    border: 1px solid #d0552d;
}

#accordion article table tbody tr.impar {
    background-color: #fff;
    border: 1px solid #d0552d;
}

#accordion article table tbody tr td {
    width: auto;
    height: 50px;
    padding: 0.5%;
    border-right: 1px solid #d0552d;
}


/* ===== ESTILOS PARA EL FOOTER ===== */

.footer-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-top: 1.5%;
    margin-bottom: 0;
    background: rgba(0,0,0,0.3);
}
.footer-container .footer-wrapper {
    width: 90%;
    height: auto;
    overflow: hidden;
    margin: 0.5% auto 0.5% auto;
    color: white;
}

.footer-container .footer-wrapper .footer-info {
    width: 45%;
    height: auto;
    overflow: hidden;
    float: left;
}

.footer-container .footer-wrapper .footer-info h3 {
    font-size: 1.0em;
    color: #d0552d;
}

.footer-container .footer-wrapper .footer-info p {
    font-size: 0.8em;
    margin-bottom: 0;
    padding: 0;
    color: white;
}

.footer-nav {
    width: 100%;
    height: 50px;
    text-align: center;
    float: left;
}

.footer-nav ul {
    margin: 0;
    padding: 0;
}

.footer-nav a, .footer-nav ul li {
    display: inline;
    width: auto;
    height: auto;
    overflow: hidden;
    margin-left: 5px;
    font-size: 0.9em;    
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    line-height: 80px;
    color: #d0552d;
}

.footer-nav a:hover {
    color: white;
    transition-property: all;
    transition-duration: .25s;
    transition-timing-function: linear;
    transition-delay: .25s;
    /* Chrome, Safari */
    -webkit-transition-property: all;
    -webkit-transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: .25s;
    /* Firefox */
    -moz-transition-property: all;
    -moz-transition-duration: .25s;
    -moz-transition-timing-function: linear;../
    -moz-transition-delay: .25s;
    /* Opera */
    -o-transition-property: all;
    -o-transition-duration: .25s;
    -o-transition-timing-function: linear;
    -o-transition-delay: .25s;
    /* Microsoft IE */
    -ms-transition-property: all;
    -ms-transition-duration: .25s;
    -ms-transition-timing-function: linear;
    -ms-transition-delay: .25s;
}

.footer-copyright {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    float: left;
}

.footer-copyright p {
    font-size: 0.6em;
    font-weight: bold;
    text-align: center;
    color: white;
}

/*.footer-container #logo-iso h3, .footer-container #logo-suatrans-footer h3 {
    color: white;
}*/





/* ==========================================================================
   Media Queries
   ========================================================================== 

@media only screen and (min-width: 480px) {

/* ====================
    INTERMEDIATE: Menu
   ==================== 

    nav a {
        float: left;
        width: 27%;
        margin: 0 1.7%;
        padding: 25px 2%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

/* ========================
    INTERMEDIATE: IE Fixes
   ======================== 

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
}

@media only screen and (min-width: 768px) {

/* ====================
    WIDE: CSS3 Effects
   ==================== 

    .header-container,
    .main aside {
        -webkit-box-shadow: 0 5px 10px #aaa;
           -moz-box-shadow: 0 5px 10px #aaa;
                box-shadow: 0 5px 10px #aaa;
    }

/* ============
    WIDE: Menu
   ============ 

    .title {
        float: left;
    }

    
/* ============
    WIDE: Main
   ============ 

    .main article {
        float: left;
        width: 57%;
    }

    .main aside {
        float: right;
        width: 28%;
    }
}

@media only screen and (min-width: 1140px) {

/* ===============
    Maximal Width
   =============== 

    .wrapper {
        width: 1026px; /* 1140px - 10% for margins 
        margin: 0 auto;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}