/* -------------------------------------- */
/* --- ESTILOS PAGINAS BASICAS SISTEL --- */
/* -------------------------------------- */


/* -- J U M B O -- */

.jumbo {
    background-color: #ccc;
    background-position: 75% top;
    background-size: cover;
    margin-bottom: 0;
    padding: 300px 0 1em;
}

.jumbo-titulo {
    background-color: white;
    padding: 1em 1.5em;
}

.jumbo2 {
    background-color: #ccc;
    background-position: center center;
    margin-bottom: 0;
    padding: 300px 0 1em;
}

/* -- J U M B O -- Sistel -- */

.jumbo-sistel h1 {
    /*color: #0090e7;*/
    color:#0085ca;
    font-family: "Roboto", sans-serif;
    font-weight:300;
    margin: 0 0 0.2em 0;
}

.jumbo-sistel h2 {
    color: #444;
    font-family: "Roboto", sans-serif;
    font-weight:300;
    margin: 0 0 0.6em 0;
}

.jumbo-sistel h3,
.jumbo-sistel p,
.jumbo-sistel span {
    color: #222;
    font-family: "Open Sans";
}

.jumbo-sistel .btn {
    background-color: rgba(255, 255, 255, 0.3);
    /*border: 1px solid #0090e7;*/
    border: 1px solid #0085ca;
    /*color: #0090e7;*/
    color:#0085ca;
    font-family: "Roboto", sans-serif;
    font-size: 0.8em;
    font-weight:300;
    padding: 0.6em 1.2em;
    display: inline-block;
    margin: 0;
}

.jumbo-sistel .btn:hover {
    /*background-color: #0090e7;*/
    background-color: #0085ca;
    color: white;
}


/* --- SECTOR CERAMICO --- */


.jumbo-ceramico {
	background-image: url('/sites/default/files/pictures/fondo-ceramico-2019.jpg')!important;
	background-color: #eee;
}

@media screen and (min-width: 960px) {
	.jumbo-ceramico {
		background-image: url('/sites/default/files/pictures/ceramica-fondo-h-somium.jpg')!important;

	}
}

.jumbo-ceramico h1,
.jumbo-ceramico-prensa h1 {
	color: #222;
    font-family: "Fjalla One", sans-serif;
    font-size: 1.8em;
    font-weight: 700;
    margin: 0 0 0.2em 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.jumbo-ceramico h2,
.jumbo-ceramico-prensa h2 {
    color: #99999E;
    font-family: "Poppins", sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    margin: 0;
    text-transform: uppercase;
}

.jumbo-ceramico h3,
.jumbo-ceramico p,
.jumbo-ceramico span,
.jumbo-ceramico-prensa h3,
.jumbo-ceramico-prensa p,
.jumbo-ceramico-prensa span, {
    color: #222;
}

.jumbo-ceramico .btn,
.jumbo-ceramico-prensa .btn {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #ED8B00;
    color: #ED8B00;
    font-size: 0.8em;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    padding: 0.6em 1.2em;
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
}

div.jumbo-ceramico,
div.jumbo-ceramico-prensa {
	padding: 12em 1em 10em 1em;
}

div.banda-ceramica-intro {
	padding: 2em!important;
}

div.banda-ceramica-intro p {
	margin: 0;
}

div.banda-ceramica-agenda {
	padding: 1em!important;
}

div.banda-ceramica-agenda p.titulo-banda {
	font-family: "Poppins", sans-serif!important;;
	font-size: 1.2em!important;
    font-weight: 400!important;
    margin: 2em 0 0!important;
    text-align: center!important;
    text-transform: uppercase!important;
}

div.banda-ceramica-intro h2 {
	color: #222!important;
    font-family: "Fjalla One", sans-serif!important;
    font-size: 1.5em;
    letter-spacing: -0.5px;
    line-height: 1.3em;
    margin: 1em 0 0.5em!important;
}

div.banda-ceramica-intro p {
	color: #222!important;
	font-family: "Poppins", sans-serif!important;
    font-size: 0.8em;
    letter-spacing: -0.2px;
}

div.banda-ceramica-intro p.ceramica-asistir a {
    padding: 0px 10px;
    border-radius: 12px;
    border: 1px solid;
    color: #333;
}

div.banda-ceramica-intro p.ceramica-asistir a:hover {
    background-color: #333;
    border-color: #333;
    color: white;
}

div.banda-ceramica-intro p strong {
	font-weight: 700!important;
}

div.banda-ceramica-intro p.ceramica-asistir {
    background-color: #FFEC3E;
    padding: 2em;
    text-align: center;
}

div.banda-ceramica-intro p.ceramica-asistir a {
    padding: 0px 10px;
    border-radius: 12px;
    border: 1px solid;
    color: #333;
}

div.ceramico-item {
	text-align: center;
	padding: 2em;
	border-bottom: 1px solid #CCC;
}

div.ceramico-item:last-child {
	border:none;
}

div.ceramico-item p {
	color: #222;
	margin: 0;
}

div.ceramico-item p.ceramico-logo-v img {
    max-width: 100px!important;
}

div.ceramico-item p.ceramico-logo-h img {
    max-height: 50px!important;
}

div.ceramico-item p.ceramico-horas {
	color: #666;
	font-family: "Poppins", sans-serif;
    font-size: 0.7em;
} 

div.ceramico-item p.ceramico-lugar {
	color: #222;
	font-family: "Poppins", sans-serif;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
}

div.ceramico-item p.ceramico-ponente {
	color: #222;
	font-family: "Poppins", sans-serif;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1em;
    margin-top: 12px;
}

div.ceramico-item p.ceramico-cargo {
	color: #222;
	font-family: "Poppins", sans-serif;
    font-size: 0.7em;
    line-height: 1.2em;
    font-weight: 400;
    margin-top: 6px;
}

div.ceramico-item p.ceramico-desc {
	color: #222;
	font-family: "Poppins", sans-serif;
    font-size: 0.7em;
    line-height: 1.2em;
    margin-top: 12px;
}

div.ceramico-item p.ceramico-aviso {
	background-color: #FFCF2E;
	border-radius: 16px;
	color: #222;
	display: inline-block;
	font-family: "Poppins", sans-serif;
    font-size: 0.7em;
    line-height: 1.2em;
    text-transform: uppercase;
    margin-top: 12px;
    padding: 3px 12px 2px;
}


/* --- VERTICALES HOME --- */


.verticales-home {
    background-color: white;
    border-top: 1px solid #eee;
    padding: 2em 0;
    margin: 0;
}

.verticales-home p {
    margin: 0;
}


/* --- TITAN --- */

.titan {
	background-color: #ddd;
	color: white;
	height: 550px;
	padding: 2em;

}

.titan .titan-contenido {
	text-align: center;
}

.titan .titan-grupo {
	margin: 30px auto;
}


.titan h1 {
	height: 2.4em;
	line-height: 1.2em;
	margin-bottom: 0.6em;
}

.titan h1 span {
	color: #333;
	font-size: 1.2em;
	font-weight: 700;
	padding: 0;
	margin: 0;
}

.titan h2 {
	color: #555;
	padding: 0;
	margin: 0 0 1.2em 0;
}

.titan .btn-titan,
.titan .btn-titan:active,
.titan .btn-titan:visited {
	border: 2px solid #333;
	color: #333;
	display: inline-block;
	padding: 0.8em;
	font-size: 0.8em;
	font-weight: 400;
	text-transform: uppercase;
    transition: 0.25s ease-out;
}

.titan .btn-titan:hover {
    background-color: #0090e7;
    border-color: #0090e7; 
    box-shadow: 0 6px 6px rgba(0,0,0,0.3);
    color: white;
    transform: scale(1.1);
}

.titan-ecommerce {
	background: url('/sites/default/files/pictures/bm-ecommerce-fondo-v5.jpg');
	background-position: center center;
	background-repeat: no-repeat;
}

@media screen and (min-width: 960px){
	.titan h1 {
		height: auto;
		line-height: 1.2em;
		margin-bottom: 0.6em;
	}
	
	.titan-ecommerce {
		background-position: center top;
	}
		
	.titan .titan-grupo {
		margin: 120px auto;
		width: 480px;
	}
	
	.titan h2 {
		color: #555;
	}
}


/* --- WHITE WALKER --- */

.white-walker {
	background: url('/sites/default/files/pictures/lab-fondo-desk-photo.jpg') no-repeat top center fixed;
}

.white-walker-dim {
	background: rgba(0,0,0,0.5);
	padding: 6em 0;
}

.white-walker .white-walker-contenido {
	text-align: center;
}

.white-walker .white-walker-grupo {
	margin: 30px auto;
}

.white-walker h1 {
	color: white;
    font-size: 3.6em;
    font-weight: 400;
    padding: 0;
    margin: 0;
    letter-spacing: -0.04em;
}

.white-walker h2 {
    color: white;
    font-size: 1.2em;
    margin: 0 0 1.2em 0;
    padding: 0;
    letter-spacing: -0.04em;
}


@media screen and (min-width: 990px){
	.white-walker h1 {
	    font-size: 4.8em;
	    letter-spacing: -0.04em;
	}
	
	.white-walker h2 {
	    font-size: 2.4em;
	    letter-spacing: -0.04em;
	}
}

.white-walker .btn-white-walker,
.white-walker .btn-white-walker:active,
.white-walker .btn-white-walker:visited {
	background-color: white;
	/* border: 1px solid #DDD; */
	color: #000;
	display: inline-block;
	font-size: 0.8em;
	font-weight: 400;
	padding: 0.8em 1.6em;
	text-transform: uppercase;
	transition: 0.25s ease-out;
}

.white-walker .btn-white-walker:hover {
    background-color: #0090e7;
    /* border-color: #0090e7; */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    color: white;
    transform: scale(1.1);
}



/* --- Banda Wrapper --- */

div.banda-wrapper {
    background-color: white;
    background-position: center center;
    color: #222;
    clear: both;
}

div.banda-wrapper p, div.banda-wrapper span, div.banda-wrapper li {
    color: #222;
    font-family: "Roboto", sans-serif;
    font-weight:300;
}

div.banda-wrapper p strong {
    font-weight: 400;
}

div.banda-wrapper h2 {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    margin-bottom: 0.6em;
}

div.banda-wrapper p.titulo-banda {
    font-size: 1.4em;
    font-weight: 400;
    margin: 0 0 1.6em 0;
    text-align: center;
    text-transform: uppercase;
}

div.banda-wrapper p.subtitulo-banda {
    font-weight: 300;
    margin: 0 0 1.6em 0;
    text-align: center;
}


div.banda-margen {
    padding: 2.4em 0;
}

div.linea-puntos-arriba {
    border-top: 1px dashed #CCC;
}

div.banda-wrapper p.titulo-icono {

    font-family: "Roboto", sans-serif;
    font-size: 1.2em;
    font-weight: 300;
    margin: 0.6em 0;
}

div.banda-wrapper p.titulo-icono i {
    color: #22da27;
}

div.banda-wrapper p.texto-icono {
    font-family: "Roboto", sans-serif;
    font-size: 0.8em;
    margin: 0.6em 0;
}

div.banda-wrapper p.sin-margen,
div.jumbo-titulo p.sin-margen {
    margin: 0;
}


div.banda-wrapper p.cita-foto {
    margin: 0 0 0.2em 0;}

div.banda-wrapper p.cita-foto img {
    height: 96px;
    width: 96px;
}

div.banda-wrapper p.cita-texto {
    font-size: 1.4em;
    font-style: italic;
    line-height: 1.2em;
    margin: 0 0 0.8em 0;
}

div.banda-wrapper p.cita-nombre {
    font-size: 1em;
    font-weight:300;
    margin: 0;
    line-height: 1.2em;
}

div.banda-wrapper p.cita-cargo {
    margin: 0 0 1em 0;
    font-size: 0.6em;
    text-transform: uppercase;
    font-weight: 600;
}

div.banda-wrapper p.cita-btn {
    tex-align: center;
    margin: 0 0 0.2em 0;
}

div.banda-wrapper p.cita-btn a {
    border: 1px solid #222;
    display: inline-block;
    font-size: 0.8em;
    font-weight: 300;
    padding: 0.3em 1.2em;
    text-transform: uppercase;
    margin: 0;
}
div.banda-wrapper p.cita-btn a:hover{
    border: 1px solid #222;
    background:white;
    color:black;
}

div.banda-wrapper p.cita-btn a.cita-btn-sage {
    background-color: white;
    border: 1px solid #001a70;
    color: #001a70;
    display: inline-block;
    margin: 0;
}

div.banda-wrapper p.cita-btn a.cita-btn-sage:hover {
    background-color: #001a70;
    color: white;
}

div.banda-wrapper .row {
    clear: both;
    overflow: hidden;
}

.apartado-gris {
    background-color: #f6f6f6;
    border-bottom: 3px solid #e6e6e6;
    padding: 1em;
}

/* -- Banda Saber Mas -- */

.btn-xxl {
}

.btn-xxl,
.btn-xxl:visited,
.btn-xxl:active {
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px solid #444;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 1.2em;
    font-weight:300;
    margin: 0;
    padding: 0.6em 2.4em;
    transition: 0.25s ease-out;
}

.btn-xxl:hover {
    background-color: #0085ca;
    border-color: #0085ca;
    color: white;
    transform: scale(1.1);
}

/* -- Banda Zona Logos -- */

div.banda-zona-logos {
    background-color: #444;
    background-image: url("/sites/default/files/pictures/sistel-fondo-nubes-sol-blanco.jpg");
    text-align: center;
}

div.banda-zona-logos p {
    margin: 0;
}

div.banda-zona-logos p.titulo-banda {

}

div.banda-zona-logos p img {
    margin: 0 1em 1em;
    transition: 0.25s ease-out;
}

div.banda-zona-logos p img:hover {
    transform: scale(1.1);
}

/* --- Áreas Sistel --- */

.areas-sistel-wrap {
    margin-bottom: 1em;
    overflow: hidden;
    transition: 0.25s ease-out;
}

.areas-sistel-icono {
    border-bottom: none;
    line-height: 0.1;
    margin: 0;
    overflow: hidden;
    text-align: right;
}

.area-bp .areas-sistel-icono  {
    background-color: #F18C00;
}

.area-ba .areas-sistel-icono  {
    background-color: #C03CFF;
}

.area-bm .areas-sistel-icono  {
    background-color: #83B819;
}

.area-bss .areas-sistel-icono  {
    background-color: #E2007A;
}

.area-bis .areas-sistel-icono  {
    background-color: #E31373;
}


div.areas-sistel-wrap:hover .areas-sistel {
    border-color: #22da27;
}

.areas-sistel-titulo {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-weight: 400 !important;
    margin: 0;
    padding: 0.6em;
    text-transform: uppercase;
    transition: 0.25s ease-out;
}

.areas-sistel-texto {
    border: 1px solid #ddd;
    border-top-style: dashed;
    border-bottom: none;
    font-size: 0.8em;
    margin: 0;
    padding: 1em;
    transition: 0.25s ease-out;
}

.areas-sistel-wrap:hover .areas-sistel-texto {
    background-color: #f6f6f6;
}

.areas-sistel-cargo {
    display: block;
    margin-bottom: 1em;
    font-size: 1em;
}


ul.areas-sistel-lista {
    border: 1px solid #ddd;
    border-top: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    transition: 0.25s ease-out;
}

ul.areas-sistel-lista {
    margin: 0;
    padding: 0;
}

ul.areas-sistel-lista li {
    border-top: 1px solid #e8e8e8;
    list-style-type: none;
    margin: 0;
    padding: 0.3em 1em;
    transition: 0.25s ease-out;
}

.area-bp li:hover  {
    background-color: #F18C00;
    border-top-style: solid;
    border-top-color: #F18C00;
}

.area-bp strong {
    color: #F18C00;
}

.area-ba li:hover  {
    background-color: #C03CFF;
    border-top-style: solid;
    border-top-color: #C03CFF;
}

.area-ba strong {
    color: #C03CFF;
}

.area-bm li:hover  {
    background-color: #83B819;
    border-top-style: solid;
    border-top-color: #83B819;
}

.area-bm strong {
    color: #83B819;
}

.area-bss li:hover  {
    background-color: #E2007A;
    border-top-style: solid;
    border-top-color: #E2007A;
}

.area-bss strong {
    color: #E2007A;
}

.area-bis li:hover  {
    background-color: #E31373;
    border-top-style: solid;
    border-top-color: #E31373;
}

.area-bis strong {
    color: #E31373;
}


.areas-sistel-lista li:hover span {
    color: white;
}

.areas-sistel-lista li span {
    font-size: 0.8em;
}

/* --- LISTADO ETIQUETAS --- */

.listado-etiquetas {
    list-style-type: none;
    margin: 0;
}

.listado-etiquetas li {
    border-bottom: 1px dashed #ccc;
    font-family: "Roboto",sans-serif;
    font-size: 0.75em;
    font-weight:300;
    line-height: 1.5em;
    padding: 1.5em;
}

.listado-etiquetas strong {
    background-color: #22da27;
    color: white;
    margin-right: 0.1em;
    padding: 0.15em 0.3em;
}

/* --- S I I --- */

.jumbo-sii h1 {
    color: #0090e7;
    font-family: "Roboto", sans-serif;
    font-weight:300;
    margin: 0 0 0.2em 0;
}

.jumbo-sii h2 {
    color: #444;
    font-family: "Roboto", sans-serif;
    font-weight:300;
    margin: 0 0 0.6em 0;
}

.jumbo-sii h3,
.jumbo-sii p,
.jumbo-sii span {
    color: #222;
    font-family: "Roboto", sans-serif;
}

.jumbo-sii .btn {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #0090e7;
    color: #0090e7;
    font-family: "Roboto", sans-serif;
    font-size: 0.8em;
    font-weight:300;
    padding: 0.6em 1.2em;
    display: inline-block;
    margin: 0;
}

.jumbo-sii .btn:hover {
    background-color: #0090e7;
    color: white;
}

/* --- --- */

div.banda-wrapper p.titulo-banda-sii {
    text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 400;
    margin-bottom: 0;
}

div.banda-wrapper p.subtitulo-banda-sii {
    color: #0090e7;
    font-size: 1em;
    font-weight:300;
    margin-bottom: 2em;
}

/* --- --- */

div.banda-sii-preguntas {
    padding: 1em 0;
}

div.banda-sii-preguntas .sii-pregunta {
    margin: 1.5em 0;
}

div.banda-sii-preguntas .sii-pregunta-icono {
    float: left;
}

div.banda-sii-preguntas .sii-pregunta-icono img {
    width: 72px;
}


div.banda-sii-preguntas .sii-pregunta-titulo {
    font-size: 1em;
    font-weight: 400;
    margin: 0 0 0.75em 96px;
}

div.banda-sii-preguntas .sii-pregunta-texto {
    font-size: 0.875em;
    margin: 0 0 0.75em 96px;
}

div.banda-sii-preguntas .sii-pregunta-texto strong {
    font-weight:300;
    color: #0090e7;
}

/* --- --- */

div.banda-sii-cita {
    background: url('/sites/default/files/pictures/sii-fondo-banda-oscura.jpg') no-repeat center center #666;
    background-attachment: fixed;
    background-size: cover;
}

div.banda-sii-cita p.sii-cita {
    color: white;
    font-size: 2em;
    font-weight: 400;
    text-align: center;
    margin:0 auto 0.5em;
}

div.banda-sii-cita p.sii-cita-btn {
    color: white;
    text-align: center;
    margin:0 auto;
}

/* --- --- */

div.banda-sii-pasos {
    background: url('/sites/default/files/pictures/sii-fondo-banda-oscura.jpg') no-repeat center center #666;
    background-attachment: fixed;
    background-size: cover;
}

div.banda-sii-pasos div.sii-pasos {

}

div.banda-sii-pasos div.sii-pasos-item {
    margin-bottom: 1em;
}

div.banda-sii-pasos p.sii-paso-numero {
    color: #0090e7;
    clear: both;
    font-size: 1.5em;
    float: left;
    margin: 0;
    line-height: 1em;
}

div.banda-sii-pasos p.sii-paso-texto {
    margin: 0 0 0 2em;
    line-height: 1.5em;
}

div.banda-sii-pasos .titulo-banda-sii,
div.banda-sii-pasos .subtitulo-banda-sii,
div.banda-sii-pasos p {
    color: white;
}

.btn-sii-alt, .btn-sii-alt:visited, .btn-sii-alt:active {
    background: transparent;
    border: 2px solid white;
    color: white;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 0.875em;
    font-weight:300;
    margin: 0;
    padding: 0.6em 2.4em;
    transition: 0.25s ease-out;
}

.btn-sii-alt:hover {
    background-color: #0090e7;
    border-color: #0090e7;
    color: white;
    transform: scale(1.1);
}

/* --- --- */

div.banda-sii-como-funciona {
    border-top: 1px dashed #ddd;
}

div.banda-sii-como-funciona .sii-fase {
}

div.banda-sii-como-funciona .sii-fase-icono {
    text-align: center;
}

div.banda-sii-como-funciona .sii-fase-titulo {
    font-size: 0.875em;
    font-weight: 400;
    line-height: 1.5em;
    margin-bottom: 0;
}

div.banda-sii-como-funciona .sii-fase-numero {
    border: 1px solid #0090e7;
    color: #0090e7;
    display: inline-block;
    font-size: 1.5em;
    font-weight: 400;
    height: 2em;
    line-height: 1em;
    margin-right: 0.4em;
    padding: 12px;
    text-align: center;
    width: 2em;
}

div.banda-sii-como-funciona .sii-fase-descripcion {
    font-size: 0.75em;
    margin-left: 4.5em
}

.sii-flecha {
    margin: 3em 0;
}

/* --- --- */

div.banda-sii-sesion-sage-sage {
    background-image: url('/sites/default/files/pictures/negro33.png'), url('/sites/default/files/2016-04-04-webinar-sii.jpg');
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

div.banda-sii-sesion-sage-sage p.titulo-banda-sii,
div.banda-sii-sesion-sage-sage p.subtitulo-banda-sii,
div.banda-sii-sesion-sage-sage p,
div.banda-sii-sesion-sage-sage h2,
div.banda-sii-sesion-sage-sage li {
    color: white;
}

div.banda-sii-sesion-sistel {
    background-color: #0085CA;
}

div.banda-sii-sesion-sistel p.titulo-banda-sii,
div.banda-sii-sesion-sistel p.subtitulo-banda-sii,
div.banda-sii-sesion-sistel p,
div.banda-sii-sesion-sistel li {
    color: white;
}

.btn-sii-var, .btn-sii-var:visited, .btn-sii-var:active {
    background: transparent;
    border: 2px solid white;
    color: white;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 0.875em;
    font-weight:300;
    margin: 0;
    padding: 0.6em 2.4em;
    transition: 0.25s ease-out;
}

.btn-sii-var:hover {
    background-color: white;
    border-color: white;
    color: #0085CA;
    transform: scale(1.1);
}

/* --- --- */

div.banda-sii-faq {
    background-color: #f6f6f6;
}

div.banda-sii-faq .faq {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

div.banda-sii-faq .faq li {
    font-family: "Roboto", sans-serif;
}

div.banda-sii-faq .faq li.faq-pregunta {
    background-color: white;
    border: 1px solid #ccc;
    border-bottom: 1px dotted #ccc;
    font-size: 0.875em;
    padding: 0.75em 0.875em;
}

div.banda-sii-faq .faq li.faq-respuesta {
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    font-size: 0.75em;
    font-weight:300;
    padding: 0.875em;
    margin-bottom: 1.5em;
}

/* --- --- */

.btn-sii, .btn-sii:visited, .btn-sii:active {
    background-color: rgba(255, 255, 255, 0.3);
    border: 2px solid #444;
    display: inline-block;
    font-family: "Roboto", sans-serif;
    font-size: 0.875em;
    font-weight:300;
    margin: 0;
    padding: 0.6em 2.4em;
    transition: 0.25s ease-out;
}

.btn-sii:hover {
    background-color: #0090e7;
    border-color: #0090e7;
    color: white;
    transform: scale(1.1);
}

/* --- Inauguración --- */

div.banda-foto {
    color: white;
    text-align: center;
    padding: 160px 0;
}

div.banda-foto p {
    color: white;
    margin: 0;
}

div.banda-foto p.titulo-inauguracion {
    font-size: 2em;
    font-weight:300;
    margin: 0;
}

div.banda-foto p.titulo-inauguracion strong {
    font-weight: 400;
}

div.banda-foto-oficinas-1 {
    background: url('/sites/default/files/pictures/invitacion-foto1.jpg') center center #88402E;
    background-size: cover;
}

div.banda-foto-oficinas-2 {
    background: url('/sites/default/files/pictures/invitacion-foto2.jpg') center center #F3E7B9;
    background-size: cover;
}

div.banda-foto-oficinas-2 p.titulo-inauguracion {
    color: #4F2B38;
}

div.banda-foto-oficinas-3 {
    background: url('/sites/default/files/pictures/invitacion-foto3.jpg') center center #373027;
    background-size: cover;
}

div.banda-foto-oficinas-4 {
    background: url('/sites/default/files/pictures/invitacion-foto4.jpg') center center #1A435C;
    background-size: cover;
}

.btn-pin, .btn-pin:active, .btn-pin:visited {
    background: transparent;
    border: 1px solid white;
    color: white;
    display: inline-block;
    font-size: 0.85em;
    margin: 1.2em;
    padding: 0.4em 1.2em;
}

.btn-pin:hover {
    background-color: white;
    color: #222;
}

@media (min-width: 990px) {
    div.banda-foto {
        padding: 240px 0;
    }
}

/* --- --- */

.masinfo {
    line-height: 0;
    margin: 0;
}

/* --- R E S P O N S I V E --- T A B L E T --- */

@media (min-width: 990px) {
    div.banda-wrapper {
        background-size: cover;
    }
    
    div.jumbo, 
    div.jumbo2 {
        padding: 180px 0;
    }

    div.jumbo-titulo {
        /* max-width: 50%; */
        display: inline-block;
    }
    
    div.jumbo-ceramico div.jumbo-titulo,
    div.jumbo-ceramico-prensa div.jumbo-titulo {
        max-width: 50%;
        display: inline-block;
    }
    
    div.jumbo-sii div.jumbo-titulo {
        max-width: 60%;
    }
    
    div.banda-zona-logos p.titulo-banda {
        margin: 0 auto 1.8em;
        max-width: 75%;
    }

    div.banda-zona-logos .zona-logos {
        margin: 0 auto;
        max-width: 75%;
    }
}

/* --- R E S P O N S I V E  --- D E S K T O P --- */

@media (min-width: 1200px) {
	div.jumbo {
        background-attachment: fixed;
		background-position: center top;
		background-size: auto;
	}
	
	div.jumbo-ceramico {
        background-attachment: scroll;
	}
}




/* NUESTROS VALORES */

div.banda-nuestros-valores .titulo-banda, div.banda-nuestros-valores p {
    color: white;
}


div.banda-nuestros-valores .numero-valores {
    border: 2px solid white;
    display: block;
    font-size: 48px;
    font-weight:300;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    line-height: 100px;
    width: 100px;
}

div.banda-nuestros-valores .titulo-valores {
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

.banda-nuestros-valores{
    background-color: white !important;

}
.fondo-no-opaco{
    background: rgba(0, 0, 0, 0.4);
    padding: 15px 15px;
}

.fondo-valores-col {
    margin-bottom: 30px;
}

.fondo-numero-valores{
    width: 100%;
    /*border: 3px solid #ED8B00;*/ 
    background-repeat: no-repeat;
    background-size:cover;
}

.col-1 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/valores-compromiso.jpg");
}
.col-2 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/valorescercania.jpg");
}
.col-3 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/valoresilusion.jpg");
}
.col-4 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/valoresgenerosidad.jpg");
}
.col-5 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/valoresexcelencia.jpg");
}
.col-6 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/valoresrespeto.jpg");
}

.banda-nuestros-valores .numero-valores{
    background-color: transparent;
}


.fondo-texto-valores{
    background-color: #0085ca;
    padding: 20px 20px;

}

.banda-nuestros-valores .texto-valores{
    display:initial;
}


@media screen and (min-width: 768px){
    .fondo-texto-valores{
        height: 220px;
    }
}

/* RESPONSABILIDAD SOCIAL CORPORATIVA */

.banda-responsabilidad-social .responsabilidad-quote {
    font-size: 3em;
    border: 0px solid #333;
    padding:0;

}

.banda-responsabilidad-social .responsabilidad-quote p{
    line-height: 1.2;
    margin: 0;
    text-align: left;
    font-weight: 700;
    color:#0085ca;
}

div.banda-responsabilidad-social .clase-titulo {
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.5;
    font-size: 2em;
    margin: 10px auto;
}

@media screen and (min-width: 768px){
    .responsabilidad-quote p{
        line-height: 4;
    }
}

.banda-responsabilidad-social .fondo-numero-valores{
    width: 100%;
    padding: 15px 15px;
    /*border: 3px solid #ED8B00;*/ 
    background-repeat: no-repeat;
    background-size:cover;
    height: 280px;
}

.banda-responsabilidad-social .col-1 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/social-personal.jpg");

}
.banda-responsabilidad-social .col-2 .fondo-numero-valores{
    background-image:url("/sites/default/files/pictures/social-medio-ambiente.jpg");
}

div.banda-responsabilidad-social .titulo-valores {
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

div.banda-responsabilidad-social{
    background-color: white;
    padding-bottom:0px;
}

.banda-responsabilidad-social .fondo-valores-col {
    margin-bottom: 30px;

}

.banda-responsabilidad-social .fondo-valores-col p{
    color:white;   
}

.banda-responsabilidad-social .fondo-texto-valores{
    background-color: #0081c5;
    padding: 20px 20px;

}

@media screen and (min-width: 768px){
    .banda-responsabilidad-social .fondo-texto-valores{
        height: 310px;
    }
}

/* SOBRE NOSOTROS */
.clase-sobre-nosotros h2{
    text-transform: uppercase;
}
.clase-sobre-nosotros p.caja{
    font-size: 1.6em;
    padding: 1em;
    border: 0px solid #333;
    background: #0085ca;
    color: white;
    line-height: 1.2;
}

/* BUSINESS AREAS */

.fondo-bp-icono, .fondo-ba-icono, .fondo-bm-icono, .fondo-bss-icono{
    padding: 50px 15px;
    text-align: center;
}

.fondo-bp-icono, .area-bp .areas-sistel-icono{
    background-color:#6cc24a;
}
.fondo-ba-icono, .area-ba .areas-sistel-icono{
    background-color:#702082;
}
.fondo-bm-icono, .area-bm .areas-sistel-icono{
    background-color: #001a70;
}
.fondo-bss-icono, .area-bss .areas-sistel-icono{
    background-color:#ed8b00;
}

@media screen and (min-width: 990px){
    .areas-sistel-texto{
        min-height:280px;
    }
}


.area-bp li:hover {
    border-top-color:#6cc24a;
    background-color:#6cc24a;
}

.area-bp strong {
    color: #6cc24a;
}

.area-ba li:hover {
    border-top-color:#702082;
    background-color:#702082;
}

.area-ba strong {
    color: #702082;
}

.area-bm li:hover {
    border-top-color:#001a70;
    background-color:#001a70;
}

.area-bm strong {
    color: #001a70;
}

.area-bss li:hover {
    border-top-color:#ed8b00;
    background-color:#ed8b00;
}

.area-bss strong {
    color: #ed8b00;
}

.areas-sistel-wrap {
}

.areas-sistel-icono img {
    height:96px;
}


/* --- Funcionalidades --- */


.funcionalidades-wrap {
    border-bottom: 4px solid #e6e6e6;
    padding: 0.6em 0;
    margin-bottom: 1em;
    transition: 0.25s ease-out;
}

.funcionalidades-wrap:hover {
    background-color: #22da27;
    border-color: #189418;
}

.funcionalidades-icono {
    line-height: 0.1;
    margin: 0;
    text-align: center;
}

.funcionalidades-icono img {
    box-sizing: content-box;
    transition: 0.25s ease-out;
}

.funcionalidades-wrap:hover .funcionalidades-icono img {
    background-color: white;
}

.funcionalidades {
    height: 160px;
    transition: 0.25s ease-out;
}

.funcionalidades-wrap:hover .funcionalidades {
    border-color: #22da27;
}

.funcionalidades-titulo {
    font-weight: 200 !important;
    margin: 0;
    padding: 0.6em 1em 0;
    text-align: center;
    text-transform: uppercase;
    transition: 0.25s ease-out;
}

.funcionalidades-wrap:hover .funcionalidades-titulo {
    color: white;
}

.funcionalidades-texto {
    font-size: 0.8em;
    margin: 0;
    padding: 0.6em 1em 0;
    text-align: center;
}

/* BANDA AMARILLA */

div.banda-yellow {
background-color: #ffc72c;
}

/* BANDA AZUL */

div.banda-blue {
background-color: #0085ca;
}

/* BANDA PANEL ABEJAS */

div.banda-panel-abejas {
	background-color: transparent;
	background-image: url("/sites/default/files/pictures/trama-panel-blanco-40.png");
	padding: 2.4em 0;
}

/* CITA CENTRADA */

.clase-sidebar p.cita-foto, .clase-sidebar p.cita-texto, .clase-sidebar p.cita-nombre, .clase-sidebar p.cita-cargo, .clase-sidebar p.cita-btn{
    text-align: center;
}

.clase-sidebar .apartado-gris {
    background-color: transparent;
    border-bottom: 0px solid #e6e6e6;
}


/* CITA A LA IZQUIERDA */
.clase-sidebar .apartado-gris.izquierda{
    border-right: 0px solid rgba(0, 0, 0, 0.36);
}

/* CITA A LA DERECHA */
.clase-sidebar .apartado-gris.derecha{
    border-left: 0px solid rgba(0, 0, 0, 0.36);
}


@media screen and (min-width: 990px){
    /* CITA A LA IZQUIERDA */
    .clase-sidebar .apartado-gris.izquierda{
        border-right: 3px solid rgba(0, 0, 0, 0.36);
    }

    /* CITA A LA DERECHA */
    .clase-sidebar .apartado-gris.derecha{
        border-left: 3px solid rgba(0, 0, 0, 0.36);
    }
}


/* TABLA COMO NETAPP */

.caja-externa .col-md-6, .caja-externa .col-md-4{
    padding-left:0px;
    padding-right:0px;
}

.caja-externa {
    margin-bottom: 1em;
    overflow: hidden;
    transition: 0.25s ease-out;
    background: white;
    /* box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); */
    border:1px solid #ddd;
    border-bottom:none;
}

.caja-externa .celda-texto:hover {
    background-color: #f6f6f6;
}


.celda-imagen {
    padding: 30px 0 0px;
    text-align: center;
    margin:0;
}

.celda-imagen img {
    height:96px;
}
.celda-imagen-pequena img{
    height: 48px;
}

.celda-titulo {
    font-weight: 400 !important;
    margin: 0;
    padding: 0.6em;
    text-transform: uppercase;
    transition: 0.25s ease-out;
    text-align:center;
}

.celda-titulo span {
    text-transform: none;
}

.celda-texto {
    border-top: 1px dashed #ddd;
    border-bottom: none;
    font-size: 0.8em;
    margin: 0;
    padding: 1em;
    transition: 0.25s ease-out;
}

.col-1 .celda-texto,.col-1 ul.caja-lista{
    border-right:1px solid #ddd;
}

.tabla-2 .col-2 .celda-texto, .tabla-2 .col-2 ul.caja-lista{
    border-right:1px solid #ddd;
}

ul.caja-lista {
    border-bottom:none;
    border-top: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    transition: 0.25s ease-out;
}

ul.caja-lista {
    margin: 0;
    padding: 0;
}

ul.caja-lista li {
    border-top: 1px solid #ddd;
    list-style-type: none;
    margin: 0;
    padding: 0.3em 1em;
    transition: 0.25s ease-out;
}

.tabla-1 .col-2 ul:last-child, .tabla-2 .col-3 ul:last-child{
    border-bottom:1px solid #ddd;
}

.caja-externa li:hover i {
    color: white;
}

.caja-lista li span {
    padding-left: 0.6em;
    font-size: 0.8em;
}

.caja-lista li:hover span {
    color: white;
}

li.no-visible{
    display:none;
}

.caja-externa li.no-visible:hover {
    border-top-color: transparent;
    background-color: transparent;
    border-top: 1px solid #ddd;
}


@media screen and (min-width: 990px){
    div.caja-externa .col-2 p, div.caja-externa .col-2 ul,div.caja-externa .col-3 p, div.caja-externa .col-3 ul{
        border-left:0px;
    }   
    ul.caja-lista {
        border-bottom: 1px solid #ddd;
    }
    li.no-visible{
        display:block;
    }
}

/* COLUMNA BASICA DE TABLA */

.caja-externa.columna-basica{
    border: 1px solid #6cc24a;
    margin: 10px 0px;
}

.columna-basica .celda-texto p{
    text-align: center;
    margin: 5px 20px;
}

.columna-basica span{
    text-align: center;
}

.celda-descripcion{
    text-align: center;
    margin: 0.8em;
}

/* view-productos */

.group-container.field-group-div.container, .group-left .group-container2, .group-left .group-container3{
    text-align: center;
    background: #f6f6f6;
    padding: 1em;
}

.field-productos{ 
    display: inline-block;
	width: auto;
}

.field-productos img{
    height: 4em;
}

.view-productos .item-list{
	text-align: center;
}

.view-productos .item-list ul li {
	display: inline-block;
	margin: 0 1em 1em 0;
	padding: 0;
	list-style-type: none;
}

.view-productos .item-list a {
	display: inline-block;
    color: #222;
    cursor: pointer;
}


/* BANDA DE NUBES */

div.banda-nubes{
    background:url("/sites/default/files/fondo-nubes.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


/*banda pintura azul compuesta*/

div.banda-azul-arriba{
    background: url("/sites/default/files/pictures/banner-sense-arriba.jpg") top center white no-repeat;
}
div.banda-azul-abajo{
    background: url("/sites/default/files/pictures/banner-sense-abajo.jpg") bottom center white no-repeat;
}

/* --- Area GENERICAS --- */


.area-wrap {
    margin-bottom: 1em;
    overflow: hidden;
    transition: 0.25s ease-out;
}

.area-icono {
    border-radius: 0.6em 0.6em 0 0;
    border-bottom: none;
    line-height: 0.1;
    margin: 0;
    text-align: center;
}

.area-icono img {

}

.area-wrap:hover .area {
    border-color: #22da27;
}

.area-titulo {
    color: #22da27;
    font-size: 1.2em;
    font-weight: 100 !important;
    line-height: 1.2em;
    margin: 0 auto;
    max-width: 300px;
    padding: 1.2em 1.2em 0;
    text-align: center;

}

.area-texto {
    font-size: 0.9em;
    margin: 0;
    padding: 1.2em;
}


/* Sistel LAB */

div.clase-sistel-lab div.icono-grupo {
    margin-bottom: 1em;
}

div.clase-sistel-lab p.titulo-icono {
    background: rgba(0, 133, 202, 0.2);
    margin: 0;
    padding: 0.6em 1.2em;
    color: #0085ca;
    transition: 0.25s ease-out;
}

div.clase-sistel-lab p.titulo-icono i {
    color: #222;
}

div.clase-sistel-lab p.titulo-icono img {
    height:20px;
}

div.clase-sistel-lab p.titulo-icono strong {
    color: #0085ca;
    padding: 0.2em 0.5em;
    font-weight: 600;
    margin-right: 0.6em;
    background-color: white;
    border: 1px solid #0085ca;
    transition: 0.25s ease-out;
}

div.clase-sistel-lab div.icono-grupo:hover p.titulo-icono {
    border-bottom: none;
    background-color:#0085ca;
    margin: 0;
    padding: 0.6em 1.2em;
    color: white;
}

div.clase-sistel-lab div.icono-grupo:hover p.titulo-icono strong {
    color: white;
    padding: 0.2em 0.5em;
    font-weight: 600;
    margin-right: 0.6em;
    background-color: #0085ca;
    border: 1px solid white;
    transform:scale(1.1);
}

div.clase-lab-banda-iconos p.svg-icono {
	text-align: center;	
}

div.clase-lab-banda-iconos p.texto-icono {
	font-size: 1.4em;
	border-bottom: 1px solid #DDD;
	padding-bottom: 0.6em;
	text-align: center;
	margin: 0.6em 0;
	line-height: 1.2em;
}

div.clase-lab-banda-iconos p.desc-icono {
    font-size: 0.8em;
    margin: 0.6em 0;
}

.polaroid-borde-1 {
	border: 1px solid #ddd;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);		
	margin-bottom: 1.8em;
	padding: 0.6em;
}

.polaroid-borde-2 p {
	margin: 0!important;
	line-height: 0;
}

.banda-space {
	background: url('/sites/default/files/pictures/lab-fondo-space.jpg') no-repeat top center fixed #000;
	
}

.banda-space h1 {
	color: white;
	padding: 3em 0;
	text-align: center;
}


/* --- --- --- */


#block-views-taxo-productos-home-block .content {
	padding: 2em 0 0!important;
}

.view-taxo-productos-home .view-content {
	text-align: center;
}

.view-taxo-productos-home div {
	display: inline-block;
}

.view-taxo-productos-home a {
	display: inline-block;
}

.view-taxo-productos-home img {
	display: inline-block;
	height: 30px;
	margin: 0 1em 1em 0;
}

@media screen and (min-width: 990px){
	.view-taxo-productos-home img {
		height: 65px;
	}
}