/*---------------------------------------------------------------- 
NORMALIZE ////////////////////////////////////////////////////////
----------------------------------------------------------------*/
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px
solid #c0c0c0;margin:0
2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,
html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/*---------------------------------------------------------------- 
GLOBAL  /////////////////////////////////////////////////////////
----------------------------------------------------------------*/
html, body {
	display:flex;
	flex-direction:row; 
	flex-wrap: wrap;
	justify-content:center;
	align-items:flex-start;
	height: auto;
	min-height:100vh;
	line-height:1.4em;	
	position: relative;
	width:100%;
	}



/* Section
------------------------------*/
section {
	height: auto;
	}
	

/* Article
------------------------------*/
article {
	height: auto;
	width:100%;
	}


/* Aside
------------------------------*/
aside{
	height: auto;
	}
	

/* Font size
------------------------------*/
html, body  {
	font-size:18px;
	}
	@media only screen and (max-width:1500px) {
	html, body {
	font-size:16px;
	}}


/* Fuente primaria
------------------------------*/
html, body{
	font-family: 'Open Sans', sans-serif;
	}


/* Fuente secundaria
------------------------------*/
nav ul  li a{
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:700;
	}


/* Font weight
------------------------------*/
html, body {
	font-weight:400;
	}


/* H
------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
	height:auto;
	margin:0px;
	padding:2px 0px;
	line-height:1.2em;
	width:100%;
	}


h1 {font-size:2em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1em;}



/* Títulos
------------------------------*/
.title {font-size:1.4em;}

.subtitle {font-size:1.2em;}


/* Párrafos
------------------------------*/
p {
	color: inherit;
	height:auto;
	line-height:1.4em;
	margin:0px 0px;
	padding:10px 0px;
	text-align:left;
	width:100%;
	}

.center {
	text-align:center;
	}

.uppercase{
	text-transform:uppercase;
	}


p strong,
p b{
	font-weight:bold;
	}

p a{
	color:inherit;
	}

p.add-columns {
	columns:2;
	column-gap:60px;
	text-align: justify;
	}
	@media only screen and (max-width:620px) {
	p.add-columns{
	columns:1;
	column-gap:0px;
	text-align:left;
	}}
	
.txt-small {font-size:0.8em; line-height:1.2em;}
.txt-small > *{font-size:inherit;}

/* Enlaces
------------------------------*/
a, a:visited{
	margin:0px;
	padding:0px;
	text-decoration:underline;
	}


a:hover {	
	text-decoration:underline;
	}


/* IMG
------------------------------*/
img{
	display:block;
	height:auto;
	padding:0px;
	margin:0px;
	max-width:100%;
	}



img:not([alt]) {
	outline:1px dashed pink;
	}


/* IMG COVER
------------------------------*/

.cover {
	height:200px;
	width:100%;
	}

.cover img {
	height:100%;
	object-fit:cover;
	width:100%;
	}



/* Lazy
------------------------------*/
.lazyloading {
	opacity: 0;
	}

.loading,
.lazyload,
.lazyloaded{
	opacity: 1;
	transition: opacity 0.8s;
	}


/* Listas
------------------------------*/
ul, ol {
	float:none;
	height: auto;
	margin:10px 0px;
	padding-left:18px;
	width:100%;
	}

ul li, 
ol li{
	float: none;
	height: auto;
	line-height:1.4em;
	margin: 0px;
	padding: 0px;
	width:100%;
	}

ul li {
	list-style:disc;
	}

ol li {
	list-style:decimal;
	}



/* Set borders radius
------------------------------*/
.border-radius-general{
	border-radius:6px;
	}


/* Transitions
------------------------------*/
nav ul li a,
nav ul li span,
input.movil-button[type=checkbox] + label .svg-icon{
 	transition:all 0.12s;
 	}


/* add-flex-all
------------------------------*/
.add-flex-row {
	align-items:flex-start;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	}

.add-flex-column {
	align-items:flex-start;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:flex-start;
	}

.add-space-between {
	align-items:stretch!important;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between!important;
	}



/* Otros
------------------------------*/
div.contenedor {
	padding:40px 0px;
	}


hr {
	border:0px;
	padding:0px;
	margin:20px 0px;
	height:1px;
	width: 100%;
	}


* {
	box-sizing:border-box!important;
	float: none;
	/*
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	*/
	}

/*---------------------------------------------------------------- 
COLORS //////////////////////////////////////////////////////////
----------------------------------------------------------------*/

/* UNO / #00a6d2 /
------------------------------------------*/
body#contacto  aside p b,
.color-uno{color:#00a6d2;}

nav ul li a:hover,
ul.actions li a,
ul.actions li span,
ul.table-rows li.row.subtitle > *,
ul.table-rows li.row.subtitle:nth-child(odd) > *,
.color-uno-back{background-color:#00a6d2;}


/* DOS / #007aac /
------------------------------------------*/
.color-dos{color:#007aac;}

.panel-servicios .item.soluciones,
body#inicio .panel-cobertura .item.riveira h2,
body#soluciones-educativas .banner-duopanel div.uno,
body.cursos .banner-duopanel div.uno,
body#soluciones-educativas ul.table-rows .row > a:hover,
.color-dos-back{background-color:#007aac;}


/* TRES / #463f82 /
------------------------------------------*/
.color-tres{color:#463f82;}

.panel-servicios .item.consultoria,
body#inicio .panel-cobertura .item.bajio h2,
body#salud-seguridad .banner-duopanel div.uno,
body.cursos ul.duracion li:nth-child(1),
.color-tres-back{background-color:#463f82;}


/* CUATRO / #ffaa00 / 
------------------------------------------*/
.color-cuatro{color:#ffaa00;}

.panel-servicios .item.ambiental,
body#inicio .panel-cobertura .item.arizona h2,
body#medio-ambiente-laboral .banner-duopanel div.uno,
body.cursos ul.duracion li:nth-child(2),
.color-cuatro-back{background-color:#ffaa00;}


/* CINCO / #00a6d2 / 
------------------------------------------*/
.color-cinco{color:#00a6d2;}

.color-cinco-back{background-color:#00a6d2;}


/* SEIS / #007aac / 
------------------------------------------*/
.color-seis{color:#007aac;}

.color-seis-back{background-color:#007aac;}


/* NEUTRO / #423f3d / 
------------------------------------------*/
nav ul li a,
body.cursos .container.cursos article h4,
.color-neutro{color:#423f3d;}

.banner-duopanel .dos,
.color-neutro-back{background-color:#423f3d;}


/* NEUTRO 2 / #6e6e6e / 
------------------------------------------*/
.alert p.msj,
.color-neutro2{color:#6e6e6e;}


body#theme h3.title,
.panel-servicios .item.gestion,
body#gestion-riesgos .banner-duopanel div.uno,
.color-neutro2-back{background-color:#6e6e6e;}


/* NEUTRO 3 / #e5e5e5 / 
------------------------------------------*/
.color-neutro3{color:#e5e5e5;}

.box-info,
.panel-brands,
.panel-blog,
ul.table-rows li.row:nth-child(odd) > *,
body.single-post ul.bar-social .svg-icon,
hr,
input[type=submit] + label,
input[type=text],
input[type=password],
input[type=email],
input[type=tel], 
textarea,
input[type="text"]:focus,
textarea:focus,
select:focus,
.color-neutro3-back{background-color:#e5e5e5;}


/* NEGRO / #000 / 
------------------------------------------*/
html, body,
.color-negro {color:#000;}

.color-negro-back{background-color:#000;}



/* BLANCO / #FFF / 
------------------------------------------*/
header,
nav ul li a:hover,
.banner-duopanel > *,
footer > *,
ul.actions li a:hover,
ul.actions li span:hover,
.panel-servicios .item h2,
body#inicio .panel-cobertura .item h2,
.box-info.ls,
ul.table-rows li.row.subtitle > *,
body#soluciones-educativas ul.table-rows .row > a:hover,
.color-blanco {color:#fff;}

html, body,
.panel-blog .item,
ul.table-rows li.row > *,
.color-blanco-back{background-color:#fff;}


/* BLANCO / 70% */
ul.actions li a,
ul.actions li span,
ul.actions li input[type=submit] + label {color:rgba(255, 255, 255, 0.7);}



/* COLOR OK / #00a98C / 
------------------------------------------*/
.alert .ok,
.color-ok {color:#00a98C;}

.btn-ok, 
.btn-ok:visited,
.color-ok-back {background-color:#00a98C;}


/* COLOR OK / 20% */
.alert .ok,
.box-info.ok {background-color:rgba(0, 169, 140, 0.2);}



/* COLOR WARNING / #ce5151 / 
------------------------------------------*/
.alert .error,
.color-warning {color:#ce5151;}

.color-warning-back {background-color:#ce5151;}


/* COLOR WARNING / 20% */
.alert .error,
.box-info.warning {background-color:rgba(206, 81, 81, 0.2);}



/* DEGRADADOS
------------------------------------------*/
footer,
.degradado-1-h {
	background-image: linear-gradient(to right, #00a6d2 -10%, #463f82 110%);
	}
.degradado-1-v {
	background-image: linear-gradient(to bottom, #00a6d2 -10%, #463f82 110%);
	}
.banner-duopanel div.uno,
.box-info.ls,
.degradado-1-45 {
	background-image: linear-gradient(40deg, #00a6d2 -10%, #463f82 110%);
	}

/*---------------------------------------------------------------- 
ESTRUCTURA //////////////////////////////////////////////////////
----------------------------------------------------------------*/
div.contenedor,
div.container,
header,
section,
footer{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	height:auto;
	max-width:100%;
	overflow-x:hidden;
	width:100%;
	}


div.in{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:flex-start;
	height:auto;
	min-height:auto;
	max-height:auto;
	max-width:1800px;
	min-width:55%;
	position:relative;
	}

div.in{
	width:75%;
	}
	@media only screen and (max-width:1500px) {
	div.in{
	max-width:94%;
	width:1000px;
	}}
	@media only screen and (max-width:1020px) {
	div.in{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	div.in{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.in{
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.in{
	width:92%;
	}}


div.in.thin{
	width:60%;
	}
	@media only screen and (max-width:1500px) {
	div.in.thin{
	width:800px;
	}}
	@media only screen and (max-width:820px) {
	div.in.thin{
	width:700px;
	}}
	@media only screen and (max-width:720px) {
	div.in.thin{
	width:600px;
	}}
	@media only screen and (max-width:620px) {
	div.in.thin{
	width:92%;
	}}


div.in.full{
	width:94%;
	}
	@media only screen and (max-width:620px) {
	div.in.full{
	width:92%;
	}}


div.in.plus{
	max-width:100%;
	width:calc(100% - 1px)!important;
	}

/*---------------------------------------------------------------- 
HEADER  /////////////////////////////////////////////////////////
----------------------------------------------------------------*/
header {
	overflow:visible;/*necesary*/
	z-index:100;
	}


/* In
------------------------------*/
header div.in {
	align-items:center;
	height:120px;
	justify-content:space-between;
	padding:0px;
	}
	@media only screen and (max-width:820px) {
	header div.in{
	height:auto;
	justify-content:center;
	}}
	@media only screen and (max-width:620px) {
	header div.in{
	height:90px;
	justify-content:space-between!important;
	}}

/* Logotipo
------------------------------*/
header a.logotipo{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	height:auto;
	width:auto;/* set */
	}


header a.logotipo.movil{
	display:none;
	}

header a.logotipo img{
	height:120px;
	margin:0px;
	padding:0px;
	width:auto;	
	}
	@media only screen and (max-width:620px) {
	header a.logotipo img{
	height:90px;
	width:auto;
	}}
/*---------------------------------------------------------------- 
NAV  ////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
nav{
	display:flex;
	height:auto;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav {
	margin-top:15px;
	width:100%;
	}}

/*----------*/
nav ul,
nav ul li {
	padding:0px;
	list-style:none;
	margin:0px;	
	}


nav ul{
	display:flex;
	flex-direction:row;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav ul{
	justify-content:space-around;
	width:100%;
	}}


/*----------*/
nav ul li{
	margin-left:0px;
	text-align: center;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav ul li{
	justify-content:space-around;
	margin-left:0px;
	}}

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

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

nav ul li > *{
	align-items:center;
	border-radius:4px;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	cursor:pointer;
	line-height:40px;
	text-decoration:none;
	text-transform:uppercase;
	padding:0px 10px;
	position:relative;
	width:auto;
	}

nav ul li > *,
nav ul li .add-icon .svg-icon{
	height:40px;
	}

nav ul li .add-icon .svg-icon{
	width:40px;
	}

nav ul li > *:hover{
	text-decoration:none;
	}

/* boton con icono*/
nav ul .add-icon{
	padding-left:0px;/*set*/
	}


/*---------------------------------------------------------------- 
MOVIL  //////////////////////////////////////////////////////////
----------------------------------------------------------------*/

/*----- OCULTAMOS CHECKBOX  -----*/
input.movil-button[type=checkbox] {
	visibility: hidden;
	display:none;
	}


/*----- LABEL DE CHECKBOX  -----*/
input.movil-button[type=checkbox] + label{
	background-color:#fff;
	cursor:pointer;
	display:none; /*ESCONDEMOS BOTON*/
	height:50px;
	position:relative;
	min-width:0%;
	width:50px;
	}

input.movil-button[type=checkbox] + label .svg-icon{
	display:none;
	height:50px;
	padding:8px;
	width:50px;
	transition:all 0.22s;
	}


/*----- MOSTRAMOS ICON DEPENDE DE ESTADO  -----*/
input.movil-button[type=checkbox] + label .svg-icon.btnmovil{
	display:block;
	opacity:1.0;
	}

input.movil-button[type=checkbox]:checked + label .svg-icon.btnmovil{
	display:none;
	opacity:0.0;
	}

input.movil-button[type=checkbox] + label .svg-icon.btnmovil2{
	display:none;
	opacity:0.0;
	}

input.movil-button[type=checkbox]:checked + label .svg-icon.btnmovil2{
	display:block;
	opacity:1.0;
	}



@media only screen and (max-width:620px) {
/*----- MOSTRAMOS BOTON MOVIL  -----*/
input.movil-button[type=checkbox] + label{
display:block;
}

/*----- Z INDEX  -----*/
nav {z-index:10;}
input.movil-button[type=checkbox] + label {z-index:11;}
.logotipo.movil {z-index:11;}


/* LOGO MOVIL
------------------------------*/
header a.logotipo.movil{
display:flex;
margin-bottom:40px;
width:50%;
}
header a.logotipo.movil img{
height:auto;
width:100%;
}

/* NAV
------------------------------*/
nav {
align-items:center;
background-color:#fff; /* set */
flex-direction:column;
justify-content: center;
height:auto;
margin-top:0px;
min-height:100vh;
position:fixed;
bottom:auto;
left:0px;
top:0px;
right:0px;
padding:0px 0px 0px 0px;
width:auto;
visibility:hidden;
opacity:0.0;
transition:all 0.16s;
}
nav ul{
align-items:center;
justify-content:center;
flex-direction:column;
padding:0px 40px;
width:100%;
}
nav ul li{
border-bottom:1px solid #dedede; /* set */
background-color:transparent;
margin-left:1px;
}

nav ul li a:hover{
color:initial;
background-color:transparent;
}
nav ul li:last-child{
border-bottom:0px solid #fff; /* set */
}
}

.show-nav{
	visibility:visible;
	opacity:1.0;
	}


/*---------------------------------------------------------------- 
NAV  ////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
/*---- Botones activos en cada sección ------*/
body#inicio nav ul li.inicio a, 
body#compania nav ul li.compania a, 
body#soluciones nav ul li.soluciones a, 
body.cursos nav ul li.soluciones a,
body#desarrollos nav ul li.desarrollos a,
body#blog nav ul li.tendencias a,  
body#contacto nav ul li.contacto a{
	color:#00a6d2; background-color:transparent;
	}

/*---------------------------------------------------------------- 
MOVIL  //////////////////////////////////////////////////////////
----------------------------------------------------------------*/


/*---------------------------------------------------------------- 
/////////////////////////////////////////////////////////////////
PATRONES  ///////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/

/*---------------------------------
/// FIRST  ///
----------------------------------*/
.first {
	}
	@media only screen and (max-width:620px) {
	.first{
	margin-top:62px; /* = Tamaño de header movil */
	}}


/*---------------------------------
/// w 100%  ///
----------------------------------*/
.w100 {width:100%;}



/*---------------------------------
/// IFRAME  ///
----------------------------------*/
iframe {
	border:0px;
	width:100%!important;
	}


/*---------------------------------
/// ICONS ///
----------------------------------*/
.svg-icon {
	height:32px;
	width:32px;
	}


/*---------------------------------
/// LISTAS  ///
----------------------------------*/
ul.list{
	align-items:flex-start;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	padding:0px;
	}

ul.list,
ul.list li {
	list-style-type: none;
	}


ul.list li {
	line-height:22px;
	min-height:22px;
	margin-bottom:4px;
	height:auto;
	padding-left:32px;
	position:relative;
	}


ul.list li > * {
	font-size:inherit;
	color:inherit;
	font-weight:inherit;
	}

/* LIST OK */
ul.list.ok{
	flex-direction:column;
	}

ul.list.ok li:after{
	background-image:url(../svg/list-ok.svg);
	background-repeat: no-repeat;
	background-size:22px 22px;
	background-position:center;
	content:"";
	height:22px;
	width:22px;
	position:absolute;
	left:0px;
	top:0px;
	}


/* LIST TAG */
ul.list.tag{
	flex-direction:row;
	padding:0px;
	}


ul.list.tag li{
	background-color:#dedede;
	display:block;
	font-size:0.8em;
	height:18px;
	line-height:18px;
	margin:4px 4px 0px 0px;
	padding:0px 10px;
	width:auto;
	}



/*---------------------------------
/// BOX INFO  ///
----------------------------------*/
.box-info {
	font-size:0.9em;
	height:auto;
	padding:20px;
	margin:5px 0px; /* set */
	width:100%;
	}


/*---------------------------------
/// BANNER duopanel ///
----------------------------------*/
.banner-duopanel{
	align-items:stretch;
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:flex-end; /*imagen al principio o final*/
	height:auto;
	margin:0px!important;
	padding:0px!important;
	position:relative!important;
	}


/* Añadimos esta clase a div principal o div.in para ????? */
.add-container {
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:space-between;
	}


/* Aqui se define altura*/
.banner-duopanel .uno,
.banner-duopanel .dos {
	height:340px;
	}
	@media only screen and (max-width:1500px) {
	.banner-duopanel  .uno,
	.banner-duopanel .dos {
	height:280px;
	}}



.banner-duopanel .uno{
	width:50%;
	}
.banner-duopanel .dos{
	width:50%;
	}


.banner-duopanel .uno img{
	height:100%;
	object-fit:cover;
	width:100%;
	}
.banner-duopanel .dos img{
	height:100%;
	object-fit:cover;
	object-position:center center!important; 
	width:100%;
	}




.banner-duopanel div.in {
	order:1;
	position:absolute;
	bottom:0px;
	left:50%;
	top:0px;
	transform: translateX(-50%);
	z-index:10;
	}



/* Add
------------------------------*/
.banner-duopanel  div.uno{
	justify-content:center;
	padding:0px 4%; /*set*/
	}

.banner-duopanel  .title{
	font-size:1.8em;
	text-transform:uppercase;
	}
	@media only screen and (max-width:620px) {
	.banner-duopanel .title{
	font-size:1.6em;
	}}



.banner-duopanel  .subtitle{
	font-size:1.2em;
	font-weight:normal;
	padding:0px;
	margin:0px;
	}



/* BREAK
------------------------------*/
	@media only screen and (max-width:620px) {
	.banner-duopanel .uno{
	order:2;
	height:auto!important;
	padding:36px 4%!important; /*set*/
	width:100%;
	}
	.banner-duopanel .dos{
	order:1;
	height:220px!important;
	width:100%;
	}
	}


/*---------------------------------
/// BRANDS  ///
----------------------------------*/
.panel-brands {
	height:auto;
	}

.panel-brands div.in{
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	}
	@media only screen and (max-width:1500px) {
	.panel-brands div.in{
	justify-content:center;
	}}




.panel-brands .item {
	background-color:#fff; /*set or delete*/
	height:120px;
	padding:10px 20px;
	margin:12px; /*set*/
	width:200px;
	}
	@media only screen and (max-width:1500px) {
	.panel-brands .item{
	height:100px;
	margin:10px 16px;
	width:180px;
	}}
	@media only screen and (max-width:1020px) {
	.panel-brands .item{
	height:80px;
	margin:5px 10px;
	padding:8px 16px;
	width:120px;
	}}
	@media only screen and (max-width:920px) {
	.panel-brands .item{
	height:70px;
	margin:5px 10px;
	padding:6px 12px;
	width:100px;
	}}



.panel-brands img{
	height:100%;
	object-fit:contain;
	width:100%;
	}


/*----------------------------
/// BAR SOCIAL ///
-----------------------------*/
ul.social-bar {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-end;
	height:auto;
	margin:0px;
	margin-right:20px;
	padding:0px;
	width:auto;
	}


ul.social-bar * {
	color:var(--color-blanco); /*set in colors*/
	list-style:none;
	text-decoration:none;
	}

ul.social-bar li,
ul.social-bar li a,
ul.social-bar li span { 
	line-height:40px;
	}

ul.social-bar li{
	font-size:0.8em;
	height: auto;
	margin:0px;
	padding:0px;
	width:auto;
	}

ul.social-bar li.separator{
	display:block;
	background-color:#fff;
	height:16px;
	width:1px;
	}

ul.social-bar li > *{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	height:auto;
	line-height:40px;
	overflow:hidden!important;
	width:auto;
	}

ul.social-bar li span{
	display:block;
	height:40px;
	line-height:40px;
	width:auto;
	}

ul.social-bar .svg-icon {
	height:40px;
	fill:#fff;/* set in colors*/
	padding:8px;/* set */
	width:40px;
	}

/*---------------------------------
/// TABLA ROWS ///
----------------------------------*/

ul.tabla-rows{
 	list-style:none;
 	font-size:0.8em;
 	width:100%;
	}


ul.tabla-rows > li{
 	height:auto;
 	list-style:none;
 	padding:0px;
 	margin:0px 0px;
 	width:100%;
	}


 ul.tabla-rows > li:nth-child(odd){
 	background-color:#fff;
	}

 ul.tabla-rows > li:nth-child(even){
 	background-color:#dedede;
	}


ul.tabla-rows li > ul{
 	align-items:flex-start;
 	display:flex;
 	flex-wrap: wrap;
 	flex-direction:row;
 	justify-content:flex-start;
 	list-style:none;
 	margin:0px;
 	padding:10px 0px;
 	width:100%;
	}



ul.tabla-rows li > ul li{
	list-style:none;
	height:auto;
	line-height:22px;
	list-style:none;
	margin:0px 0px; 
	padding:0px 8px;
	width:auto;
	}


ul.tabla-rows li > ul li.fecha{
	display:none!important;
	order:1;
	width:20%;
	}
ul.tabla-rows li > ul li.nombre{
	order:2;
	width:75%;
	}
ul.tabla-rows li > ul li.categoria{
	order:3;
	width:20%;
	}
ul.tabla-rows li > ul li.horas{
	order:4;
	width:5%;
	}




/* BREAK
------------------------------*/
@media only screen and (max-width:920px) {
ul.tabla-rows li > ul li{
	line-height:20px;
	}

ul.tabla-rows li > ul li.fecha{
	width:32%;
	}
ul.tabla-rows li > ul li.nombre{
	font-weight:bold;
	order:4;
	width:100%;
	}
ul.tabla-rows li > ul li.categoria{
	order:2;
	width:32%;
	}
ul.tabla-rows li > ul li.horas{
	order:3;
	width:32%;
	}}



/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
GENERAL  /////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
.container{
	padding:40px 0px;
	}



/* Title
------------------------------*/
section div.in > .title,
body#soluciones-educativas .container div.in > .title,
body#feed-main .container div.in > .title {
	font-size:1.6em;
	font-weight:400;
	margin-bottom:40px;
	text-align:center;
	text-transform:uppercase;
	}
	@media only screen and (max-width:1500px) {
	section div.in > .title,
	body#soluciones-educativas .container div.in > .title,
	body#feed-main .container div.in > .title {
	font-size:1.5em;
	}}
	@media only screen and (max-width:1020px) {
	section div.in > .title,
	body#soluciones-educativas .container div.in > .title,
	body#feed-main .container div.in > .title {
	font-size:1.4em;
	}}
	@media only screen and (max-width:620px) {
	section div.in > .title,
	body#soluciones-educativas .container div.in > .title,
	body#feed-main .container div.in > .title {
	font-size:1.3em;
	}}



/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
INICIO  /////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#inicio section{
	padding:40px 0px;
	}





/* Banner principal
------------------------------*/
body#inicio .banner-duopanel .uno,
body#inicio .banner-duopanel .dos {
	height:480px;
	}
	@media only screen and (max-width:1500px) {
	body#inicio .banner-duopanel  .uno,
	body#inicio .banner-duopanel .dos {
	height:400px;
	}}



/* ---- Sub Titulo --- */
body#inicio .banner-duopanel .subtitle {
	display:inline!important;
	width:auto!important;
	}

body#inicio .banner-duopanel h1.subtitle {
	font-size:inherit;
	}



/* Panel servicios
------------------------------*/
.panel-servicios{
	padding:40px 0px;
	}



.panel-servicios .item{
	align-items:center;
	border-radius:6px;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:flex-start; 
	height:auto; /* set */
	margin-bottom:20px; /* set */
	padding:30px 40px;
	text-decoration:none;
	width:23%; /* determina cuantos paneles hay en un renglon*/
	}
	@media only screen and (max-width:1500px) {
	.panel-servicios .item{
	width:23%;
	}}
	@media only screen and (max-width:720px) {
	.panel-servicios .item{
	width:49%;
	}}

.panel-servicios .item .svg-icon{
	border-radius:50%;
	fill:#fff;
	height:70px;
	margin-bottom:20px;
	overflow:visible;
	opacity:0.8;
	transition:all 0.2s;
	transform: scale(1.0);
	width:70px;
	}

.panel-servicios .item:hover .svg-icon{
	background-color:#fff;
	overflow:hidden;
	padding:6px!important;
	transform: scale(1.4);
	}


.panel-servicios .item.consultoria:hover .svg-icon{
	fill:#463f82;
	}
.panel-servicios .item.soluciones:hover .svg-icon{
	fill:#007aac;
	}
.panel-servicios .item.gestion:hover .svg-icon{
	fill:#6e6e6e;
	}
.panel-servicios .item.ambiental:hover .svg-icon{
	fill:#ffaa00;
	}





.panel-servicios .item h2{
	font-size:1.1em;
	font-weight:normal;
	opacity:0.8;
	text-align:center;
	}



/* Cobertura
------------------------------*/
body#inicio .panel-cobertura .item{
	border-right:1px solid #dedede;
	padding:16px;
	width:23%;
	}
	@media only screen and (max-width:1200px) {
	body#inicio .panel-cobertura .item{
	padding:8px;
	width:25%;
	}}
	@media only screen and (max-width:920px) {
	body#inicio .panel-cobertura .item{
	border-right:0px solid #dedede;
	width:49%;
	order:2;
	}}
	@media only screen and (max-width:620px) {
	body#inicio .panel-cobertura .item{
	width:100%;
	}}


body#inicio .panel-cobertura .item.mapa{
	border-right:0px solid #dedede;
	width:30%;
	}
	@media only screen and (max-width:1200px) {
	body#inicio .panel-cobertura .item.mapa{
	width:24%;
	}}
	@media only screen and (max-width:920px) {
	body#inicio .panel-cobertura .item.mapa{
	order:1;
	width:49%;
	}}
	@media only screen and (max-width:620px) {
	body#inicio .panel-cobertura .item.mapa{
	width:100%;
	}}


body#inicio .panel-cobertura .item h2{
	font-size:1.2em;
	padding:20px;
	}

body#inicio .panel-cobertura .item p{
	padding:16px 0px;
	}



/* Ultimo Blog
------------------------------*/
body#inicio  section.panel-blog div.in{
	justify-content:space-between;
	}



body#inicio  section.panel-blog .item{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	color:inherit;
	padding:16px;
	text-decoration:none;
	width:30%;
	}
	@media only screen and (max-width:820px) {
	body#inicio  section.panel-blog .item{
	padding:10px;
	margin-bottom:10px;
	width:100%;
	}}




body#inicio  section.panel-blog .item:hover {
	box-shadow:0px 0px 6px rgba(0, 0, 0, 0.2);
	}
	@media only screen and (max-width:620px) {
	body#inicio  section.panel-blog .item:hover{
	box-shadow:0px 0px 6px rgba(0, 0, 0, 0.0);
	}}



body#inicio  section.panel-blog .item .post-cover{
	height:200px;
	width:100%;
	}
	@media only screen and (max-width:1500px) {
	body#inicio  section.panel-blog .item .post-cover{
	height:160px;
	}}
	@media only screen and (max-width:920px) {
	body#inicio  section.panel-blog .item .post-cover{
	height:140px;
	}}
	@media only screen and (max-width:820px) {
	body#inicio  section.panel-blog .item .post-cover{
	height:80px;
	width:80px;
	}}


body#inicio  section.panel-blog .item .post-cover img{
	height:100%;
	object-fit:cover;
	width:100%;
	}


body#inicio  section.panel-blog .item .post-title{
	display:block;
	font-size:1em;
	font-weight:bold;
	margin:18px 0px 10px 0px;
	width:100%;
	}
	@media only screen and (max-width:820px) {
	body#inicio  section.panel-blog .item .post-title{
	margin:0px 0px 0px 10px;
	width:auto;
	}}
	@media only screen and (max-width:620px) {
	body#inicio  section.panel-blog .item .post-title{
	max-width:330px;
	}}
	@media only screen and (max-width:460px) {
	body#inicio  section.panel-blog .item .post-title{
	max-width:220px;
	}}
/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
SOLUCIONES   ////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/

/* Banner
------------------------------*/
body.solucion .banner-duopanel div.uno{
	background-image:none!important;
	}


body.solucion .banner-duopanel  .welcome{
	justify-content:space-between!important;
	width:100%;
	}
	
body.solucion .banner-duopanel  .welcome .svg-icon{
	height:80px;
	fill:#fff;
	margin:0px 12px 0px 0px;
	width:80px;
	}
	@media only screen and (max-width:520px) {
	body.solucion .banner-duopanel  .welcome .svg-icon{
	height:70px;
	width:70px;
	}}



body.solucion .banner-duopanel  .welcome .data{
	width:80%;
	}
	@media only screen and (max-width:1200px) {
	body.solucion .banner-duopanel  .welcome .data{
	width:100%;
	}}
	@media only screen and (max-width:620px) {
	body.solucion .banner-duopanel  .welcome .data{
	width:80%;
	}}
	@media only screen and (max-width:520px) {
	body.solucion .banner-duopanel  .welcome .data{
	width:76%;
	}}



body.solucion .banner-duopanel  .title {
	font-size:1.6em;
	}
	@media only screen and (max-width:1200px) {
	body.solucion .banner-duopanel  .title{
	font-size:1.4em;
	}}


body.solucion .banner-duopanel  .subtitle {
	font-size:1.2em;
	}



/* Container
------------------------------*/
body.solucion div.container div.in {
	justify-content:space-between;
	}

body.solucion article {
	order:2;
	padding:0px 20px;
	width:50%;
	}
	@media only screen and (max-width:620px) {
	body.solucion article {
	order:1;
	width:100%;
	}}


body.solucion aside {
	order:1;
	padding:0px 20px;
	width:50%;
	}
	@media only screen and (max-width:620px) {
	body.solucion aside {
	order:2;
	width:100%;
	}}

body.solucion aside p{
	columns:2;
	column-gap:10px;
	}

/* Contactanos
------------------------------*/
body.solucion ul.actions{
	justify-content:flex-start!important;
	}
	@media only screen and (max-width:620px) {
	body.solucion ul.actions{
	margin-bottom:20px;	
	}}


/*---------------------------------------------------------------- 
SALUD SEGURIDAD  ////////////////////////////////////////////////
----------------------------------------------------------------*/
body.solucion .banner-duopanel div.uno{

	}


/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
COMPAÑIA  ////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#compania div.container,
body#desarrollos div.container {
	padding:40px 0px;
	}

body#compania div.container div.in,
body#desarrollos div.container div.in{
	align-items:flex-start;
	display:flex;
	flex-wrap: wrap;
	flex-direction:row;
	justify-content:space-between;
	}

body#compania div.container article.col-1,
body#desarrollos div.container article.col-1{
	width:48%;
	}
body#compania div.container article.col-2,
body#desarrollos div.container article.col-2{
	width:48%;
	}

/* Rompemos */
	@media only screen and (max-width:620px) {
	body#compania div.container article.col-1,
	body#desarrollos div.container article.col-1{
	width:100%;
	}
	body#compania div.container article.col-2,
	body#desarrollos div.container article.col-2{
	width:100%;
	}
	}

body#compania div.container article p,
body#desarrollos div.container article p{
	width:100%;
	}

body#compania div.container article img,
body#desarrollos div.container article img{
	width:100%;
	}



body#compania .panel-brands{
	padding:40px 0px;
	}

body#compania .panel-brands .item {
	height:90px;
	padding:6px 12px;
	margin:8px; /*set*/
	width:160px;
	}
	@media only screen and (max-width:1500px) {
	body#compania .panel-brands .item{
	height:90px;
	margin:6px;
	width:160px;
	}}
	@media only screen and (max-width:1020px) {
	body#compania .panel-brands .item{
	height:80px;
	margin:5px 10px;
	padding:8px 16px;
	width:120px;
	}}
	@media only screen and (max-width:920px) {
	body#compania .panel-brands .item{
	height:70px;
	margin:5px 10px;
	padding:6px 12px;
	width:100px;
	}}
	@media only screen and (max-width:620px) {
	body#compania .panel-brands .item{
	height:60px;
	margin:4px;
	padding:4px 4px;
	width:90px;
	}}



/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
DESARROLLOS  //////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#desarrollos img:not([alt]) {
	outline:0px dashed pink;
	}


body#desarrollos .gallery-rows{
	background-color:var(--color-neutro-softer);
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:10px;
	padding-top:20px;
	padding-bottom:20px;
	width:100%;
	}


body#desarrollos .gallery-rows .item{
	flex-grow:99;
	aspect-ratio: 2 / 1;
	}

body#desarrollos .gallery-rows .item img{
	height:100%;
	object-fit:cover;
	width:100%;
	}



/* SET: TAMAÑOS
------------------------------------------*/
body#desarrollos .gallery-rows .item:nth-child(1){
	width:100%;
	}

body#desarrollos .gallery-rows .item:nth-child(2),
body#desarrollos .gallery-rows .item:nth-child(3){
	width:48%;
	}

body#desarrollos .gallery-rows .item:nth-child(4),
body#desarrollos .gallery-rows .item:nth-child(5),
body#desarrollos .gallery-rows .item:nth-child(6){
	aspect-ratio: 3 / 2;
	width:30%;
	}

body#desarrollos .gallery-rows .item:nth-child(7),
body#desarrollos .gallery-rows .item:nth-child(8){
	width:48%;
	}


/* BREAK : MOVIL
------------------------------------------*/
	@media only screen and (max-width:620px) {
	body#desarrollos .gallery-rows .item:nth-child(4),
	body#desarrollos .gallery-rows .item:nth-child(5),
	body#desarrollos .gallery-rows .item:nth-child(6){
	aspect-ratio: 2 / 1;
	width:48%;
	}
	}


	@media only screen and (max-width:420px) {
	body#desarrollos .gallery-rows .item:nth-child(2),
	body#desarrollos .gallery-rows .item:nth-child(3){
	aspect-ratio: 2 / 1;
	width:100%;
	}

	body#desarrollos .gallery-rows .item:nth-child(4),
	body#desarrollos .gallery-rows .item:nth-child(5),
	body#desarrollos .gallery-rows .item:nth-child(6){
	aspect-ratio: 2 / 1;
	width:100%;
	}

	body#desarrollos .gallery-rows .item:nth-child(7),
	body#desarrollos .gallery-rows .item:nth-child(8){
	aspect-ratio: 2 / 1;
	width:100%;
	}
	}




/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
CURSOS ///////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
body.cursos ul.duracion {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	list-style:none;
	column-gap:20px;
	margin:20px 0px 60px 0px;
	padding:0px;
	width:100%;
	}


body.cursos ul.duracion li{
	color:#fff;
	font-size:1.2em;
	font-weight:300;
	list-style:none;
	padding:8px 18px 8px 14px;
	width:auto;
	}


body.cursos ul.duracion li b{
	font-weight:400;
	}



body.cursos .container.cursos{
	
	}



body.cursos .container.cursos article{
	padding:0px;
	width:48%;
	}
	@media only screen and (max-width:720px) {
	body.cursos .container.cursos article {
	width:100%;
	}}



body.cursos .container.cursos article h4{
	font-size:1.2em;
	text-transform:uppercase;
	}


/*---------------------------------
////////// LIST  ROWS //////////
----------------------------------*/
ul.table-rows{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content: flex-start;
	list-style: none;
	height: auto;
	margin:0px 0px 15px 0px;
	padding:15px 0px;
	width:100%;
	}


/* Subtitles
------------------------------*/
ul.table-rows li.subtitle > *{
	font-weight:500;
	font-size:1rem!important;
	text-transform:uppercase;
	}


/* Row
------------------------------*/
ul.table-rows li.row{
	list-style:none;
	height:auto;
	line-height:1.1em;
	padding:0px 0px; /* solo aumentar si no hay un etiqueta adentro */
	text-indent:8px;
	width:100%;
	}

ul.table-rows li.row:nth-child(odd){

	}




/* Siempre colocar un elemento interno como un div o anchor */
ul.table-rows li.row > *{
	align-items:stretch;
	color:inherit;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	font-size:1em;
	font-weight:initial;
	height:auto;
	margin:0px;
	padding:8px 8px;
	text-decoration:none;
	text-align:left;
	text-indent:0px;
	width:100%;
	}


/* Añadimos divs generalmente cuando queremos añadir columnas */
ul.table-rows li.row > * div{
	align-items:center;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	height:auto;
	text-indent:0px;
	position:relative;
	padding-left:8px;
	/*width:100%;  Por default medira el 100% */
	}

ul.table-rows li.row > * div:first-child{
	padding-left:0px;
	}

/* cuando haya un link */
ul.table-rows li.row > a:hover {
	background-color:var(--color-second-softer);
	}


/* Predeterminadas
------------------------------*/
ul.table-rows .row .nombre {width:40%;}
ul.table-rows .row .descripcion {width:60%;}


/* Break movil
------------------------------*/

	@media only screen and (max-width:720px) {

	ul.table-rows li.row {
		text-indent:0px;
	}


	ul.table-rows li.row > * {
		padding:16px 8px;
	}


	ul.table-rows li.row > * div {
		padding-left:0px;
	}

	ul.table-rows li.row div .nombre {
		color:#00a6d2;
		font-weight:300;
		margin-bottom:8px;
	}


	ul.table-rows li.row div .descripcion {
		color:#423f3d;
	}

	ul.table-rows li.row.subtitle .nombre,
	ul.table-rows li.row.subtitle .descripcion {
	color:#fff!important;
	}



	ul.table-rows .row .nombre {width:100%;}
	ul.table-rows .row .descripcion {width:100%;}

	}





/* Predeterminadas
------------------------------*/

body#soluciones-educativas ul.table-rows .row .nombre-curso {width:75%;}

body#soluciones-educativas ul.table-rows .row .categoria {width:20%;}

body#soluciones-educativas ul.table-rows .row .horas {width:5%;}


body#soluciones-educativas ul.table-rows{
	font-size:0.8em;
	}



body#soluciones-educativas ul.table-rows .row .horas{
	justify-content:safe flex-end;
	}



body#soluciones-educativas ul.table-rows .row > a:hover {
	border-radius:6px;
	}





/* Break movil
------------------------------*/

	@media only screen and (max-width:720px) {
	body#soluciones-educativas  ul.table-rows .row.subtitle .nombre-curso {width:100%;}
	body#soluciones-educativas ul.table-rows .row.subtitle .categoria {width:100%;}
	body#soluciones-educativas ul.table-rows .row.subtitle .horas {width:100%; justify-content:safe flex-start;}
	}



	@media only screen and (max-width:720px) {
	body#soluciones-educativas  ul.table-rows .row .nombre-curso {width:100%; font-weight:bold!important;}
	body#soluciones-educativas ul.table-rows .row .categoria {width:80%;}
	body#soluciones-educativas ul.table-rows .row .horas {width:20%;}
	}












/*---------------------------------------------------------------- 
//////////////////////////////////////////////////////////////////
CONTACTO  ////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#contacto div.container div.in {
	justify-content:space-between;
	}

body#contacto article {
	width:47%!important;
	}
	@media only screen and (max-width:620px) {
	body#contacto article {
	margin-bottom:40px;
	width:100%!important;
	}}


body#contacto aside {
	width:47%!important;
	}
	@media only screen and (max-width:620px) {
	body#contacto aside {
	width:100%!important;
	}}


body#contacto div.formulario{
	padding:0px; /* set */
	}
	@media only screen and (max-width:1020px) {
	body#contacto div.formulario{
	padding:0px; 
	}}
	@media only screen and (max-width:920px) {
	body#contacto div.formulario{
	padding:0px; 
	}}



body#contacto  aside {
	padding:0px 0px; /* set */
	width:100%;
	}


body#contacto  aside p{
	margin:0px;
	padding:0px;
	}

body#contacto  aside p b{
	font-weight:bold;
	text-transform:uppercase;
	}

body#contacto  aside p i{
	font-style:normal;
	}


body#contacto  ul.actions a.whatsapp{
	background-color:#25d366;
	}



/*---------------------------------------------------------------- 
FOOTER  //////////////////////////////////////////////////////////
----------------------------------------------------------------*/
footer {
	font-size:0.8em;
	padding:10px 0px;
	}

footer div.in{
	justify-content:space-between;
	}
	@media only screen and (max-width:720px) {
	footer div.in{
	justify-content:center;
	}}

footer .col.uno{
	height: auto;
	position:relative;
	width:60%;
	}
	@media only screen and (max-width:720px) {
	footer .col.uno{
	width:100%;
	}}
	@media only screen and (max-width:720px) {
	footer .col.uno p{
	text-align:center;
	}}

footer .col.dos{
	display:flex;
	flex-direction:row;
	justify-content:flex-end;
	flex-wrap:wrap;
	width:30%;
	}
	@media only screen and (max-width:720px) {
	footer .col.dos{
	justify-content:center;	
	width:100%;
	}}

footer .col.dos .logotipo{
	width:120px;
	}


footer .col p{
	line-height:1.4em;
	width:100%;
	}

footer .col a{
	color:inherit;
	text-decoration:none;
	}

footer p a .svg-icon {
	display:inline-block!important;
	height:22px!important;
	fill:#fff;
	margin-bottom:-6px;
	width:22px!important;
	}



/* Firma libélula
------------------------------------------*/
.firma.ls {
	align-items:center;
	color:inherit;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	font-size:0.8em;
	line-height:1.2em;
	justify-content:space-between;
	opacity:0.8;
	text-decoration:none;
	width:auto;
	}
	@media only screen and (max-width:720px) {
	.firma.ls {
	flex-direction:column;
	}}


.firma.ls span{
	height: auto;
	margin:0px 0px 0px 4px;
	text-align:right;
	width:auto;
	}
	@media only screen and (max-width:720px) {
	.firma.ls span{
	margin:0px 0px 4px 0px;
	text-align: center;
	}}

.firma.ls span img{
	height:36px;
	width:36px;
	}


.firma.ls img{
	height:36px;
	width:36px;
	}

/* HTML FIRMA

<a href="https://www.libelulastudio.com" target="_blank"  rel="nofollow" class="firma ls">
<span>Página web desarrollada por<br><b>Libélula Studio</b></span>
<span><img src="svg/firma-ls.svg" alt="Libelula Studio"></span>
</a>
*/



/*---------------------------------------------------------------- 
ACTIONS BOTONES /////////////////////////////////////////////////
----------------------------------------------------------------*/
ul.actions {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	font-weight:300;
	font-size:0.8em;
	letter-spacing:1px;
	height: auto;
	margin:8px 0px 0px 0px;
	padding:0px;
	width:100%;
	}

	
ul.actions li {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	list-style:none;
	padding: 0px;
	margin:0px;
	margin-right:8px;
	margin-bottom:8px;
	text-align:center;
	position:relative;
	width:auto;
	}

ul.actions li:last-child{
	margin-right: 0px;
	}


ul.actions li a,
ul.actions li span,
ul.actions li input[type=submit] + label{
	display: block;
	border-radius:4px;
	cursor: pointer;
	font-size:1em;
	height:46px;
	line-height:46px;
	margin:0px;
	min-width:120px;
	padding:0px 16px; 
	position: relative;
	text-decoration: none;
	text-transform:uppercase;
	width:auto;
	}
	@media only screen and (max-width:1500px) {
	ul.actions li a,
	ul.actions li span,
	ul.actions li input[type=submit] + label{
	height:36px;
	line-height:36px;
	}}


/* al 100% */
@media only screen and (max-width:620px) {
	ul.actions{
	justify-content:center!important;
	padding:0px 10%;
	}
	ul.actions li{
	margin-right:0px;
	margin-bottom:10px;
	min-width:auto;
	text-align:center;
	text-align: center;
	width:100%; 
	}
	ul.actions li a,
	ul.actions li span,
	ul.actions li input[type=submit] + label{
	height:50px;
	line-height:50px;
	padding:0px 0px; 
	text-align: center;
	width:100%; 
	}
	ul.actions .alert > *{
	text-align: center; 
	}
}





/* Alineaciones alternativas
------------------------------*/
ul.actions.center {
	justify-content:center;
	}

ul.actions.center li.alert{
	width:100%;
	}

ul.actions.center li.alert > *{
	text-align:center;
	width:100%;
	}

ul.actions.left {
	justify-content:flex-start;
	}

ul.actions.rigth {
	justify-content:flex-end;
	}


/* Botones con iconos
------------------------------*/
ul.actions .add-icon{
	padding-left:4px!important;
	}
	@media only screen and (max-width:620px) {
	ul.actions .add-icon{
	text-indent:-56px; /*compensamos espacio que ocupa el icono*/
	}}

ul.actions li .add-icon .svg-icon {
	border-radius:0px;
	height:46px;
	float:left;
	fill:#fff;
	margin:0px;
	opacity:0.7;
	padding:4px;
	width:46px;
	}
	@media only screen and (max-width:1500px) {
	ul.actions li .add-icon .svg-icon{
	height:36px;
	width:36px;
	}}
	@media only screen and (max-width:620px) {
	ul.actions li .add-icon .svg-icon{
	height:50px;
	width:50px;
	}}

ul.actions li .add-icon:hover .svg-icon {
	opacity:1.0;
	}

/* Actions second
------------------------------*/
ul.actions.second li a,
ul.actions.second li span,
ul.actions.second li input[type=submit] + label{
	border-radius:4px;
	font-size:0.8em;
	height:36px;
	line-height:36px;
	padding:0px 12px; 
	}
	@media only screen and (max-width:1500px) {
	ul.actions.second li a,
	ul.actions.second li span,
	ul.actions.second li input[type=submit] + label{
	height:28px;
	line-height:28px;
	}}
	@media only screen and (max-width:620px) {
	ul.actions.second li a,
	ul.actions.second li span,
	ul.actions.second li input[type=submit] + label{
	height:32px;
	line-height:32px;
	}}

/* Botones con iconos
------------------------------*/
ul.actions.second .add-icon{
	padding-left:4px;
	}
	@media only screen and (max-width:620px) {
	ul.actions.second .add-icon{
	text-indent:-32px; /*compensamos espacio que ocupa el icono*/
	}}

ul.actions.second li .add-icon .svg-icon {
	height:36px;
	float:left;
	fill:#fff;
	padding:4px;
	width:36px;
	}
	@media only screen and (max-width:1500px) {
	ul.actions.second li .add-icon .svg-icon{
	height:28px;
	width:28px;
	}}
	@media only screen and (max-width:620px) {
	ul.actions.second li .add-icon .svg-icon{
	height:32px;
	width:32px;
	}}

/*---------------------------------------------------------------- 
FORMS ////////////////////////////////////////////////////////////
----------------------------------------------------------------*/
/* Formulario
------------------------------*/
div.formulario {
	height: auto;
	padding-bottom:10px;
	min-width:50%;
	overflow: hidden;
	width:100%;
	}


/* General
------------------------------*/
input, textarea,
input:focus, textarea:focus  {
	outline:0px;
	}


input[type=text],
input[type=password],
input[type=email],
input[type=tel], 
textarea{
	border-radius:4px;
	border:0px;
	display: block;
	font-family: inherit;
	font-size:1em;
	margin:3px 0px;
	padding:0px;
	text-indent:10px;
	width:100%; 
	}


input[type=text],
input[type=password],
input[type=email],
input[type=tel],
select {
	height:60px;
	line-height:60px;
	}
	@media only screen and (max-width:1500px) {
	input[type=text],
	input[type=password],
	input[type=email],
	input[type=tel],
	select {
	height:40px;
	line-height:40px;
	}}


textarea {
	line-height:36px;
	min-height:200px; 
	}
	@media only screen and (max-width:1500px) {
	textarea{
	line-height:26px;
	min-height:140px; 
	}}




/* Checkbox, radio
------------------------------*/
input[type=checkbox],
input[type=radio] {
	visibility: hidden;
	display: none;
	}


input[type=checkbox] + label,
input[type=radio] + label {
	align-items:center;
	cursor:pointer;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	height:auto;
	min-width:60%;
	padding:0px;
	margin:2px 0px;
	width:auto;
	}

input[type=checkbox] + label span,
input[type=radio] + label span{
	display:block;
	background-color:#fff;
	border:4px solid #666;
	border-radius:50%;
	cursor: pointer;
	height:20px; 
	margin-right:10px;
	position: relative;
	transition:all 0.1s;
	width:20px;
	}

input[type=checkbox] + label span:hover,
input[type=radio] + label span:hover{
	box-shadow:0px 0px 2px rgba(0, 0, 0, 0.6);
	transform:scale(1.1);
	}


input[type=checkbox]:checked + label span,
input[type=radio]:checked + label span{
	background-color:#666;
	border:4px solid #999;
	}


input[type=checkbox] + label i,
input[type=radio] + label i{
	display:block;
	font-style: normal;
	height:20px;
	line-height:20px;
	width:auto;
	}


/* Alerts
------------------------------*/
.alert{
	height:auto;
	margin:0px 0px;
	overflow:hidden;
	padding:0px 0px;
	width:100%;
	}


.alert > *{
	font-size:0.8em;
	height:auto;
	margin:0px 0px;
	overflow:hidden;
	padding:0px 0px;
	width:100%;
	}


/* Buscador
------------------------------*/
div.box-search {
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	height: auto;
	width:100%;
	}

div.box-search input[type="submit"]{
	visibility: hidden;
	display:none;
	}


div.box-search input[type=search],
div.box-search input[type=submit] + label{
	font-size:1em;
	font-size:1em;
	height:42px;
	line-height:42px;
	outline:0px;
	}
	@media only screen and (max-width:1500px) {
	div.box-search input[type=search],
	div.box-search input[type=submit] + label{
	height:32px;
	line-height:32px;
	}}


div.box-search input[type=search] {
	background-color:#fff;
	border:1px solid #dedede;
	text-indent:10px;
	margin:0px!important;
	padding:0px 10px;
	width:auto;
	}

div.box-search input[type=submit] + label{
	border:1px solid #dedede;
	cursor:pointer;
	margin:0px!important;
	padding:0px 10px;
	width:auto;
	}

/*---------------------------------------------------------------- 
ANIMACIONES //////////////////////////////////////////////////////
----------------------------------------------------------------*/

/* Inicio
------------------------------	*/
body#inicio section.banner-duopanel .title{
	transition:all 0.6s;
	transform: translateY(60px);
	transition-delay:0.8s;
	opacity:0.0;
	}
	body#inicio section.banner-duopanel .title.animate {
	opacity:1.0;
	transform: translateY(0px);
	}



body#inicio section.banner-duopanel .subtitle{
	transition:all 0.8s;
	transition-delay:1.4s;
	opacity:0.0;
	}
	body#inicio section.banner-duopanel .subtitle.animate {
	opacity:1.0;
	}



body#inicio section.panel-servicios .item{
	transition:all 0.8s;
	opacity:0.0;
	}
	body#inicio section.panel-servicios .item.animate {
	opacity:1.0;
	}



/* Solucion
------------------------------	
body.solucion aside{
	transition:all 0.8s;
	transform: translateY(60px);
	transition-delay:0.4s;
	opacity:0.0;
	}
	body.solucion aside.animate {
	opacity:1.0;
	transform: translateY(0px);
	}*/