/*---------------------------------------------------------------- 
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}


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

:root {

	--color-main-darker:#2a2c3c;
	--color-main-dark:#32375f;
	--color-main:#3AA0BD;
	--color-main-soft:#5c65a8;
	--color-main-softer:#c4c8e6;

	--color-second-darker:#222a26;
	--color-second-dark:#366751;
	--color-second:#5abc93;
	--color-second-soft:#8acfb2;
	--color-second-softer:#ddede6;


	--color-neutro-darker:#17191a;
	--color-neutro-dark:#343638;
	--color-neutro:#62686d;
	--color-neutro-soft:#75797C;
	--color-neutro-softer:#E6EAEF;

	--color-ok:#55b88b;
	--color-ok-softer:#a9dac4;
	--color-warning:#edbc2a;
	--color-warning-softer:#f9f8ea;
	--color-caution:#fc6161;
	--color-caution-softer:#f2c9c9;

	}


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

/* --------------------------------------------- COLORS  > UNO */
.color1-dark2,
	.box-info.uno{
	color:#171f2d;
	}
.color1-dark1{
	color:#253756;
	}
.color1{
	color:#3f5b94;
	}
.color1-clear1{
	color:#829bbf;
	}
.color1-clear2,
	ul.actions li > *,
	ul.actions li label > *{
	color:#d6deed;
	}




.color1back-dark2{
	background-color:#171f2d;
	}
.color1back-dark1{
	background-color:#253756;
	}
.color1back,
	.coloruno/* UNO*/{
	background-color:#3f5b94;
	}
.color1back-clear1{
	background-color:#829bbf;
	}
.color1back-clear2,
	.box-info.uno{
	background-color:#d6deed;
	}

/* --------------------------------------------- COLORS  > DOS */
.color2-dark2,
	.box-info.dos{
	color:#17333a;
	}
.color2-dark1{
	color:#2c6775;
	}
.color2,
	body#index h4,
	body#index section.index-quienes div.in div.uno a:hover,
	body#contacto aside p b,
	article h3,
	body#nosotros article a:hover,
	body#servicios article h2,
	body#servicios h3{
	color:#3ba0bd;
	}
.color2-clear1{
	color:#9ecdd8;
	}
.color2-clear2,
	body#index section.simple-banner-h a,
	body#landing section.simple-banner-h a{
	color:#d5ecef;
	}


.color2back-dark2{
	background-color:#17333a;
	}
.color2back-dark1{
	background-color:#2c6775;
	}
.color2back,
	.colordos,
	nav ul li a:hover,
	body#index section.simple-banner-h a,
	body#index h4 b,
	body#landing section.simple-banner-h a,
	body#landing h4 b,
	ul.actions li a,
	ul.actions li span,
	article h3 b,
	body#servicios h3 b{
	background-color:#3ba0bd;
	}
.color2back-clear1{
	background-color:#9ecdd8;
	}
.color2back-clear2,
	.box-info.dos{
	background-color:#d5ecef;
	}

/* --------------------------------------------- COLORS  > NEUTRO */
.colorneutro-dark2,
	.box-info{
	color:#161d1e;
	}
.colorneutro-dark1,
	html, body,
	a, a:visited, a:hover,
	.txt-small a:hover,
	div.alert p.msj{
	color:#383f3f;
	}
.colorneutro,
div.top div.in,
	body#index section.index-panels div.in a *,
	body#index section.index-quienes div.in div.uno a, 
	footer,
	a.firma,
	a.firma:visited,
	a.firma:hover{
	color:#697272;
	}
.colorneutro-clear1,
	.txt-small,
	.txt-small a, 
	.txt-small a:visited,
	nav ul li a,
	nav ul li a:visited,
	body#index section.index-contacto div.in div.formulario div.ls,
	body#contacto aside p{
	color:#adbbbc;
	}
.colorneutro-clear2,
	.btn-cancelar, 
	.btn-cancelar:visited,
	body#index section.simple-banner-h h1,
	body#index section.index-panels div.in a:hover *,
	body#transporte section.simple-banner-h h1,
	body#transporte section.index-panels div.in a:hover *{
	color:#e4eaea!important;
	}



.colorneutroback-dark2,
	nav,
	body#index section.simple-banner-h h1,
	body#landing section.simple-banner-h h1,
	section.index-panels div.in,
	body#index section.index-contacto div.in div.formulario div.ls,
	footer,
	body#contacto aside,
	body#servicios article div.ls{
	background-color:#161d1e;
	}
.colorneutroback-dark1{
	background-color:#383f3f;
	}
.colorneutroback{
	background-color:#697272;
	}
.colorneutroback-clear1,
	.btn-cancelar, 
	.btn-cancelar:visited{
	background-color:#adbbbc!important;
	}
.colorneutroback-clear2,
	.box-info,
	div.alert p.msj,
	hr,
	input[type=submit] + label,
	input[type=text], 
	textarea,
	input[type="text"]:focus, 
	textarea:focus,
	select:focus,
	section.panel-nosotros div.in div,
	body#contacto div.container,
	body#nosotros aside a,
	body#servicios div.container{
	background-color:#e4eaea;
	}


/* --------------------------------------------- COLORS  > BLANCO */
.colorwhite,
	nav ul li a:hover,
	body#index section.simple-banner-h a:hover,
	body#landing section.simple-banner-h a:hover {
	color:#fff;
	}


.colorwhiteback,
	html, body, 
	header,
	body#contacto article,
	body#servicios article {
	background-color:#fff;
	}

/* --------------------------------------------- COLORS  > OK */
.colorok-black,
	.box-info.ok,
	div.alert p.okas{
	color:#1d3322!important;
	}
.colorok {
	color:#66b57e!important;
	}
.colorok-clear,
	.btn-ok, 
	.btn-ok:visited{
	color:#d9f4e2!important;
	}





.colorokback-dark {
	background-color:#1d3322!important;
	}
.colorokback,
	.btn-ok, 
	.btn-ok:visited {
	background-color:#66b57e!important;
	}
.colorokback-clear,
	.box-info.ok,
	div.alert p.okas {
	background-color:#d9f4e2!important;
	}

/* --------------------------------------------- COLORS  > ALERT */
.coloralert-black,
	.box-info.warning {
	color:#360c0c;
	}
.coloralert,
	div.alert p.error {
	color:#e96c6c;
	}
.coloralert-clear,
	.btn-delete, 
	.btn-delete:visited {
	color:#f5e6e6!important;
	}





.coloralertback-dark {
	background-color:#360c0c;
	}
.coloralertback,
	.btn-delete, 
	.btn-delete:visited {
	background-color:#e96c6c!important;
	}
.coloralertback-clear,
	.box-info.warning,
	div.alert p.error {
	background-color:#f5e6e6;
	}

/*---------------------------------------------------------------- 
GENERAL /////////////////////////////////////////////////////////
----------------------------------------------------------------*/
html, body {
	display:flex;
	flex-direction:row; 
	flex-wrap: wrap;
	justify-content:center;
	align-items:flex-start;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	height: auto;
	min-height:100vh;
	line-height:1.3em;	
	position: relative;
	width:100%;
	}


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


div.contenedor {
	padding:40px 0px;
	}


section {
	height: auto;
	}
	

article {
	height: auto;
	width:100%;
	}
	
aside{
	height: auto;
	}
	

h1, h2, h3, h4, h5, h6,
div.top div.in p,
body#index section.index-contacto div.in div.formulario  div.ls  {
	font-family: 'Montserrat', sans-serif; /* Fuente secundaria */
	}


h1, h2, h3, h4, h5, h6 {
	font-weight:900;
	height:auto;
	margin:0px;
	padding:5px 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;}


img{
	display:block;
	padding:0px;
	margin: 0px;
	max-width:100%;
	padding: 0px;
	}

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

a:hover {	
	text-decoration:underline;
	}

p {
	color: inherit;
	height:auto;
	line-height:1.2em;
	margin: 0px;
	padding:20px 0px;
	text-align: justify;
	width:100%;
	}

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


p.center {
	text-align:center;
	}




ul, ol {
	float: none;
	height: auto;
	margin:15px 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;
	}

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


* {
	box-sizing:border-box!important;
	float: none;
	}


nav ul li a,
body#index section.index-panels div.in a h2,
body#index section.index-panels div.in a h3{
 	transition:all 0.12s;
 	}


 /* Box sizing
------------------------------*/
* {
	box-sizing:border-box!important;
	}
	


h1 {
	font-weight:500;
}

/*---------------------------------------------------------------- 
ESTRUCTURA ///////////////////////////////////////////////////////
----------------------------------------------------------------*/
div.contenedor,
div.container,
div.top,
header,
section{
	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;
	width:100%;
	}

/*------------------------------------------------------------------------ 
02 DIV IN  //////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
.in.full,
.in-full,
.in-full-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

.in.wide,
.in-wide,
.in-wide-to-none{
	padding-left:6vw;
	padding-right:6vw;
	/*width:90vw;*/
	}


.in,
.in-to-full,
.in-to-wide,
.in-to-thin,
.in-to-none{
	padding-left:10vw;
	padding-right:10vw;
	}

.in.thin,
.in-thin,
.in-thin-to-full,
.in-thin-to-wide,
.in-thin-to-none{
	padding-left:20vw;
	padding-right:20vw;
	}

/*                                       
-----------------------------------------  2200 ---
--------------------------------------------------*/
@media only screen and (max-width:2200px) {
	.in.full,
	.in-full,
	.in-full-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in.wide,
	.in-wide,
	.in-wide-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:10vw;
	padding-right:10vw;
	/*width:80vw;*/
	}

	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-none{
	padding-left:20vw;
	padding-right:20vw;
	/*width:60vw;*/
	}

}



/*                                       
-----------------------------------------  1200 ---
--------------------------------------------------*/
@media only screen and (max-width:1200px) {
	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-none{
	padding-left:15vw;
	padding-right:15vw;
	/*width:70vw;*/
	}
}


/*                                       
-----------------------------------------  1020 ---
--------------------------------------------------*/
@media only screen and (max-width:1020px) {

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}
}



/*                                       
-----------------------------------------  820 ---
--------------------------------------------------*/
@media only screen and (max-width:820px) {

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:6vw;
	padding-right:6vw;
	}

	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-none{
	padding-left:10vw;
	padding-right:10vw;
	}
}


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

	.in,
	.in-to-full,
	.in-to-wide,
	.in-to-none{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in.thin,
	.in-thin,
	.in-thin-to-full,
	.in-thin-to-wide,
	.in-thin-to-non{
	padding-left:8vw;
	padding-right:8vw;
	}

}

/*                                       
------------------------------------------  620 ---
--------------------------------------------------*/
@media only screen and (max-width:620px) {

	.in-full,
	.in-to-full,
	.in-thin-to-full{
	padding-left:3vw;
	padding-right:3vw;
	}

	.in-wide,
	.in-to-wide,
	.in-thin-to-wide{
	padding-left:3vw;
	padding-right:3vw;
	}


	.in{
	padding-left:7vw;
	padding-right:7vw;
	}


	.in.thin,
	.in-thin,
	.in-to-thin{
	padding-left:10vw;
	padding-right:10vw;
	}

	.in-full-to-none,
	.in-wide-to-none,
	.in-to-none,
	.in-thin-to-none{
	padding-left:0vw;
	padding-right:0vw;
	}
	
}

/*                                       
------------------------------------------  520 ---
--------------------------------------------------*/
@media only screen and (max-width:520px) {
	.in{
	padding-left:5vw;
	padding-right:5vw;
	}
	.in.thin,
	.in-thin,
	.in-to-thin{
	padding-left:9vw;
	padding-right:9vw;
	}
}

/*                                       
------------------------------------------  420 ---
--------------------------------------------------*/
@media only screen and (max-width:420px) {
	.in{
	padding-left:3vw;
	padding-right:3vw;
	}
	.in.thin,
	.in-thin,
	.in-to-thin{
	padding-left:6vw;
	padding-right:6vw;
	}
}
/*---------------------------------------------------------------- 
PATRONES ////////////////////////////////////////////////////////
----------------------------------------------------------------*/
/* BOX INFO  ----------------------------*/
.box-info {
	font-size:0.9em;
	height:auto;
	padding:20px;
	margin:5px 0px; /* set */
	width:100%;
	}

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

ul.bar-social * {
	list-style:none;
	text-decoration:none;
	}

ul.bar-social li{
	border-right:1px solid #e4eaea;
	height: auto;
	list-style:none;
	margin:0px;
	padding:0px;
	width:auto;
	}

ul.bar-social li a{
	display:block;
	height:40px;
	overflow:hidden!important;
	width:40px;
	}


/* tamaño del svg actualmente (5x)(1x)*/
ul.bar-social li a img{
	display:block;
	height:auto;
	max-width:200px;
	width:200px;
	}

ul.bar-social li a:hover img{
	margin-top:-40px;
	}

ul.bar-social li a.facebook img{
	margin-left:0px;
	}
ul.bar-social li a.whatsapp img{
	margin-left:-80px;
	}
ul.bar-social li a.instagram img{
	margin-left:-120px;
	}
ul.bar-social li a.youtube img{
	margin-left:-160px;
	}







/* SIMPLE BANNER  ----------------------------*/
.simple-banner-h{
	height:80vh;
	position:relative;
	}


.simple-banner-h picture{
	height:auto;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	top:0px;
	width:auto;
	}

.simple-banner-h picture img{
	height:100%;
	width:100%;
	object-fit:cover;
	}

.simple-banner-h div.in {
	flex-direction:column;
	justify-content:center;
	height:100%;
	z-index:10;
	}



/* lazy load  ----------------------------*/
.lazyload,
.lazyloading {
	opacity: 0;
	}

.loading,
.lazyload,
.lazyloaded,
.image  {
	opacity: 1;
	transition: opacity 1000ms;
	}
	
/* --------------------------------------------------------------- < HEADER > */
header {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-left:12.5%;
	border-bottom:1px solid #e4eaea;
	border-top:1px solid #e4eaea;
	overflow:visible;/*necesary*/
	width:100%;
	z-index:100;
	}
	@media only screen and (max-width:820px) {
	header{
	justify-content:center;
	padding-left:0%;
	}}
	@media only screen and (max-width:620px) {
	header{
	justify-content:space-between!important;
	position:fixed;
	left:0px;
	top:0px;
	padding-left:6%;
	padding-right: 6%;
	}}

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


/*----------*/
header a.logotipo{
	display:block;
	height:auto;
	margin:0px;
	padding:0px;
	width:180px;/* set */
	}
	@media only screen and (max-width:1500px) {
	header a.logotipo{
	width:160px;/* set */
	}}
	@media only screen and (max-width:720px) {
	header a.logotipo{
	width:160px;/* set */
	}}
	@media only screen and (max-width:620px) {
	header a.logotipo{
	width:160px;/* set */
	}}

header a.logotipo.movil:nth-child(2){
	display:none;
	}

header a.logotipo img{
	height:auto;
	margin:0px;
	padding:0px;
	width:100%;	
	}

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

/* --------------------------------------------------------------- < NAV > */
nav{
	display:flex;
	height:auto;
	font-weight:300;
	font-size:0.8em;
	text-transform:uppercase;
	padding-right:12%;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav {
	margin-top:15px;
	padding-right:0%;
	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{
	display:block;
	margin-left:20px;
	text-align: center;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	nav ul li{
	justify-content:space-around;
	margin-left:1px;
	}}

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

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

nav ul li > *{
	display:flex;
	cursor:pointer;
	height:90px;
	line-height:90px;
	text-decoration:none;
	padding:0px 20px;
	position:relative;
	width:auto!important;
	}
	@media only screen and (max-width:1500px) {
	nav ul li > *{
	padding:0px 16px;
	}}
	@media only screen and (max-width:920px) {
	nav ul li > *{
	padding:0px 10px;
	}}
	@media only screen and (max-width:920px) {
	nav ul li > *{
	padding:0px 16px;
	}}

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

/*----------*/
	@media only screen and (max-width:620px) {
	header a.logotipo.movil{
	display:block;
	margin-bottom:40px;
	width:50%;
	}
	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{
	justify-content:center;
	flex-direction:column;
	padding:0px 40px;
	width:100%;
	}
	nav ul li{
	border-bottom:1px solid #dedede; /* set */
	background-color:transparent; /* no necesary */
	margin-left:1px;
	}
	nav ul li:last-child{
	border-bottom:0px solid #fff; /* set */
	}
	nav ul li > *{
	color:var(--color-black)!important;
	font-weight:bolder;
	height:60px!important;
	line-height:60px!important;
	padding:0px!important;
	justify-content:center;
	text-align:center!important;
	}
	nav ul li > *:hover{
	color:var(--color-black)!important;
	background-color:transparent!important;
	color:inherit!important;
	}

	}


/*---------------------------------------------------------------- 
ALL  ///////////////////////////////////////////////////////////
----------------------------------------------------------------*/
div.top div.in {
	justify-content:flex-end;
	}


div.top div.in p {
	border-right:1px solid #e4eaea;
	font-size:0.8em;
	font-weight:700;
	height:40px;
	line-height:40px;
	letter-spacing:0.04em;
	margin:0px;
	padding:0px;
	padding-right:16px;
	width:auto;
	}


/*---------------------------------------------------------------- 
INDEX  ///////////////////////////////////////////////////////////
----------------------------------------------------------------*/
body#index h4{
	display:block;
	padding:0px;
	margin:0px;
	width:auto!important;
	}

body#index h4 b{
	display:block;
	height:5px;
	margin-top:4px;
	width:90%;
	}
	@media only screen and (max-width:620px) {
	body#index h4 b{
	margin-left:5%;
	}}


/* Simple banner  ----------------------------*/
body#index section.simple-banner-h,
body#landing section.simple-banner-h {
	height:70vh;
	z-index:9;
	}
	@media only screen and (max-width:620px) {
	body#index section.simple-banner-h,
	body#landing section.simple-banner-h  {
	height:80vh;
	}}



body#index section.simple-banner-h div.in{
	}
	@media only screen and (max-width:620px) {
	body#index section.simple-banner-h div.in,
	body#landing section.simple-banner-h div.in{
	align-items:center;
	}}


body#index section.simple-banner-h h1{
	height:auto;
	font-weight:600;
	font-size:1.4em;
	padding:40px;
	width:600px;
	min-width:50%;
	}

body#landing section.simple-banner-h h1 {
	height:auto;
	font-weight:600;
	padding:40px;
	text-align:center;
	color:var(--color-white);
	}


	@media only screen and (max-width:1500px) {
	body#index section.simple-banner-h h1{
	width:500px;
	}}
	@media only screen and (max-width:920px) {
	body#index section.simple-banner-h h1{
	font-size:1.8em;
	}}
	@media only screen and (max-width:820px) {
	body#index section.simple-banner-h h1,
	body#landing section.simple-banner-h h1{
	font-size:1.6em;
	}
	body#landing section.simple-banner-h h1,
	body#landing section.simple-banner-h h1 {
	height:auto;
	font-weight:600;
	padding:40px;
	}
	}
	@media only screen and (max-width:620px) {
	body#index section.simple-banner-h h1,
	body#landing section.simple-banner-h h1{
	font-size:1.4em;
	margin-top:-60px;
	padding:30px;
	width:100%;
	}}




body#landing section.simple-banner-h h2 {
	background-color: var(--color-black-50);
	height:auto;
	font-size:1.4em;
	font-weight:600;
	padding:20px;
	text-align:center;
	color:var(--color-white);
	}




body#index section.simple-banner-h a{
	display:block;
	font-weight:300;
	height:42px;
	line-height:42px;
	padding:0px 40px;
	text-decoration:none;
	text-transform:uppercase;
	width:auto;
	}

body#index section.simple-banner-h a span{
	
	float:right;
	height:36px;
	margin:3px 0px 3px 6px;
	overflow:hidden;
	width:36px;
	}

body#index section.simple-banner-h a span img{
	display:block;
	height:72px;
	max-width:180px;
	opacity:0.8;
	width:180px;
	}

body#index section.simple-banner-h a:hover img{
	opacity:1;
	}

/* Section Panels  ----------------------------*/
body#index section.index-panels{
	margin-top:-80px;
	position:relative;
	z-index:10;
	}


body#index section.index-panels div.in{
	align-items:stretch;
	justify-content:space-between;
	padding:40px 0px;
	gap:20px;
	}
	@media only screen and (max-width:720px) {
	body#index section.index-panels div.in{
	padding:20px 40px;
	}}

body#index section.index-panels div.in a{
	align-items:center;
	border-right:1px solid #383f3f;
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	flex-grow:9;
	height:auto; 
	padding:0px 0px;
	text-decoration:none;
	width:20%;
	}
	@media only screen and (max-width:1020px) {
	body#index section.index-panels div.in a{
	border-right:0px solid #383f3f;
	border-bottom:1px solid #383f3f;
	width:40%;
	}}

	@media only screen and (max-width:720px) {
	body#index section.index-panels div.in a{
	border-right:0px solid #383f3f;
	border-bottom:1px solid #383f3f;
	padding:40px 0px;
	width:100%;
	}}


body#index section.index-panels div.in a:last-child {
	border-right:0px solid #383f3f;
	border-bottom:0px solid #383f3f;
	}


body#index section.index-panels div.in a span.icon-servicios{
	display:block;
	height:140px;
	overflow:hidden;
	width:140px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a span.icon-servicios{
	height:100px;
	width:100px;
	}}


body#index section.index-panels div.in a span.icon-servicios img{
	height:140px;
	max-width:100000px;
	width:560px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a span.icon-servicios img{
	height:100px;
	width:400px;
	}}


body#index section.index-panels div.in a span.icon-servicios.logistica img{
	margin:0px 0px 0px 0px;
	}

body#index section.index-panels div.in a span.icon-servicios.auditoria img{
	margin:0px 0px 0px -140px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a span.icon-servicios.auditoria img{
	margin:0px 0px 0px -100px;
	}}

body#index section.index-panels div.in a span.icon-servicios.despacho img{
	margin:0px 0px 0px -280px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a span.icon-servicios.despacho img{
	margin:0px 0px 0px -200px;
	}}

body#index section.index-panels div.in a span.icon-servicios.quimicos img{
	margin:0px 0px 0px -420px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a span.icon-servicios.quimicos img{
	margin:0px 0px 0px -300px;
	}}


body#index section.index-panels div.in a h2,
body#index section.index-panels div.in a h3{
	text-align:center;
	}

body#index section.index-panels div.in a h2{
	font-size:1.4em;
	font-weight:600;
	padding:0px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a h2{
	font-size:1.3em;
	}}
	@media only screen and (max-width:1020px) {
	body#index section.index-panels div.in a h2{
	font-size:1.2em;
	}}
	@media only screen and (max-width:820px) {
	body#index section.index-panels div.in a h2{
	font-size:1em;
	}}
	@media only screen and (max-width:720px) {
	body#index section.index-panels div.in a h2{
	font-size:1.2em;
	}}

body#index section.index-panels div.in a h3{
	font-size:1.4em;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	padding:0px;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-panels div.in a h3{
	font-size:1.3em;
	}}
	@media only screen and (max-width:1020px) {
	body#index section.index-panels div.in a h3{
	font-size:1.2em;
	}}
	@media only screen and (max-width:820px) {
	body#index section.index-panels div.in a h3{
	font-size:1em;
	}}
	@media only screen and (max-width:720px) {
	body#index section.index-panels div.in a h3{
	font-size:1.2em;
	}}

body#index section.index-panels div.in a span.arrow {
	display:block;
	height:40px;
	overflow:hidden;
	margin-top:12px;
	width:40px;
	}

body#index section.index-panels div.in a span.arrow img{
	display:block;
	height:80px;
	max-width:200px;
	opacity:0.6;
	width:200px;
	}

body#index section.index-panels div.in a:hover span.arrow img{
	opacity:1;
	}


/* Quienes somos (video) ----------------------------*/

body#index section.index-quienes {
	background-image:url(../images/index-video.jpg);
	background-size:cover;
	background-position:100% 50%;
	margin-top:-80px;
	padding:200px 0px 120px 0px;
	z-index:9;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-quienes{
	padding:160px 0px 80px 0px;
	}}
	@media only screen and (max-width:820px) {
	body#index section.index-quienes{
	background-position:80% 50%;
	}}
	@media only screen and (max-width:620px) {
	body#index section.index-quienes{
	background-position:70% 50%;
	}}


body#index section.index-quienes div.in{
	align-items:center;
	flex-direction:row;
	justify-content:space-between;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-quienes div.in{
	justify-content:center;
	}}



body#index section.index-quienes div.in > div.uno{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	width:30%;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-quienes div.in div.uno{
	width:40%;
	}}
	@media only screen and (max-width:1020px) {
	body#index section.index-quienes div.in div.uno{
	width:45%;
	}}
	@media only screen and (max-width:920px) {
	body#index section.index-quienes div.in div.uno{
	width:50%;
	}}
	@media only screen and (max-width:620px) {
	body#index section.index-quienes div.in div.uno{
	align-items:center;
	width:100%;
	}}


body#index section.index-quienes div.in div.uno h4{
	display:block;
	padding:0px;
	margin:0px;
	width:auto!important;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-quienes div.in div.uno h4{
	text-align:center;
	}}

body#index section.index-quienes div.in div.uno p{
	text-align:left;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-quienes div.in div.uno p{
	text-align:center;
	}}


body#index section.index-quienes div.in div.uno a{
	display:block;
	height:36px;
	line-height:36px;
	padding:0px;
	margin:0px;
	text-decoration:none;
	width:auto;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-quienes div.in div.uno a{
	display:none;
	}}

body#index section.index-quienes div.in div.uno a span{
	float:right;
	height:28px;
	margin:5px 0px 0px 4px;
	overflow:hidden;
	width:28px;
	}

body#index section.index-quienes div.in div.uno a img{
	height: auto;
	max-width:140px;
	margin-top:-28px;
	opacity:0.8;
	width:140px; 
	}


body#index section.index-quienes div.in div.uno a:hover img{
	opacity:1;
	}




body#index section.index-quienes div.in > a{
	height:200px;
	overflow:hidden;
	width:200px;
	}

body#index section.index-quienes div.in > a img{
	height:auto;
	max-width:1000px;
	width:1000px;
	}

body#index section.index-quienes div.in > a img{
	margin-top:-200px;
	margin-left:-200px;
	opacity:0.8;
	}

body#index section.index-quienes div.in > a:hover img{
	opacity:1;
	}

/* Section Panels  ----------------------------*/
section.panel-nosotros{
	padding:80px 0px;
	}

section.panel-nosotros div.in{
	align-items:stretch; 
	justify-content:space-between;
	}


section.panel-nosotros div.in div{
	height:auto; /* set */
	margin-bottom:20px; /* set */
	width:32%; /* determina cuantos paneles hay en un renglon*/
	}
	@media only screen and (max-width:720px) {
	section.panel-nosotros div.in div{
	width:100%;
	}}


section.panel-nosotros p{
	text-align:left;
	padding:40px 40px;
	}
	@media only screen and (max-width:1500px) {
	section.panel-nosotros p{
	padding:30px 30px;
	}}
	@media only screen and (max-width:620px) {
	section.panel-nosotros p{
	padding:20px 20px;
	}}

/* Index contacto  ----------------------------*/
body#index section.index-contacto {
	position:relative;
	padding:100px 0px;
	}

body#index section.index-contacto div.in{
	position:relative;
	justify-content:center;
	z-index:10;
	}

body#index section.index-contacto div.in div.formulario{
	box-shadow:0px 0px 6px rgba(0, 0, 0, 0.2);
	background-color:#fff;
	margin-top:160px;
	width:50%;
	}
	@media only screen and (max-width:1500px) {
	body#index section.index-contacto div.in div.formulario{
	margin-top:120px;
	margin-bottom:80px;
	width:70%;
	}}
	@media only screen and (max-width:1020px) {
	body#index section.index-contacto div.in div.formulario{
	margin-top:100px;
	width:80%;
	}}
	@media only screen and (max-width:920px) {
	body#index section.index-contacto div.in div.formulario{
	margin-top:80px;
	}}
	@media only screen and (max-width:820px) {
	body#index section.index-contacto div.in div.formulario{
	margin-top:60px;
	}}
	@media only screen and (max-width:720px) {
	body#index section.index-contacto div.in div.formulario{
	margin-top:40px;
	}}
	@media only screen and (max-width:620px) {
	body#index section.index-contacto div.in div.formulario{
	margin-top:40px;
	width:100%;
	}}

body#index section.index-contacto div.in div.formulario > div.ls{
	font-size:1.4em;
	padding:40px;
	text-align:center;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-contacto div.in div.formulario > div.ls{
	font-size:1.3em;
	padding:20px;
	}}



body#index section.index-contacto div.in div.formulario > div{
	padding:40px;
	}
	@media only screen and (max-width:620px) {
	body#index section.index-contacto div.in div.formulario > div{
	padding:20px;
	}}


body#index section.index-contacto div.in div.formulario div.ls2{
	display:flex;
	flex-direction:column;
	align-items:center;
	}

body#index section.index-contacto div.in div.formulario div.ls2 h4{
	text-align:center;
	margin-bottom:20px;
	}

body#index section.index-contacto div.in div.formulario div.ls2 h4 b{
	margin-left:5%;
	}

body#index section.index-contacto div.in div.formulario div.ls2 form{
	width:100%;
	}

body#index section.index-contacto div.in div.formulario ul.actions{
	justify-content:center;
	}

body#index section.index-contacto div.uno,
body#index section.index-contacto div.dos {
	height:auto;
	left:0px;
	right:0px;
	position:absolute;
	z-index:8;
	width:100%;
	}

body#index section.index-contacto div picture {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	height:100%;
	width:100%;
	}


body#index section.index-contacto div.uno {
	background-color:#fff;
	bottom:50%;
	top:0px;
	}
	@media only screen and (max-width:1020px) {
	body#index section.index-contacto div.uno {
	background-color:#efefef;
	}}


body#index section.index-contacto div.uno picture{
	justify-content:center;
	align-items:flex-start;
	}
body#index section.index-contacto div.uno img{
	height:auto;
	max-width:10000px!important;
	width:100%!important;
	}

body#index section.index-contacto div.dos {
	background-color:#fff;
	bottom:0px;
	top:50%;
	}
body#index section.index-contacto div.dos picture{
	justify-content:flex-end;
	}
body#index section.index-contacto div.dos img{
	height:100%;
	width:auto;
	}
	@media only screen and (max-width:820px) {
	body#index section.index-contacto div.dos img{
	height:100%;
	width:100;
	object-fit:cover;
	}}


/*---------------------------------------------------------------- 
INTERIOR  ///////////////////////////////////////////////////////
----------------------------------------------------------------*/
div.container {
	padding:120px 0px;
	}
	@media only screen and (max-width:1500px) {
	div.container {
	padding:80px 0px;
	}}

div.container div.in {
	justify-content:space-between;
	}

article {
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
	align-items:flex-start;
	width:60%;
	}
	@media only screen and (max-width:620px) {
	article {
	width:100%;
	}}


aside {
	width:35%;
	}
	@media only screen and (max-width:620px) {
	aside {
	width:100%;
	}}


article h3,
body#servicios h3{
	display:block;
	padding:0px;
	margin:0px;
	width:auto!important;
	}


article h3 b,
	body#servicios h3 b{
	display:block;
	height:5px;
	margin-top:4px;
	width:90%;
	}

/* --------------------------------------------- NOSOTROS */
body#nosotros div.container div.in{
	align-items:center;
	}
	@media only screen and (max-width:920px) {
	body#nosotros div.container div.in{
	align-items:flex-start;
	}}

body#nosotros article {
	width:45%;
	}
	@media only screen and (max-width:620px) {
	body#nosotros article {
	width:100%;
	}}


body#nosotros article p{
	font-size:1.4em;
	text-align:left;
	}
	@media only screen and (max-width:1020px) {
	body#nosotros article p{
	font-size:1.3em;
	}}
	@media only screen and (max-width:820px) {
	body#nosotros article p{
	font-size:1.2em;
	}}


body#nosotros article a{
	display:block;
	height:36px;
	line-height:36px;
	padding:0px;
	margin:0px;
	text-decoration:none;
	width:auto;
	}
	@media only screen and (max-width:620px) {
	body#nosotros article a{
	display:none;
	}}


body#nosotros article a span{
	float:right;
	height:28px;
	margin:5px 0px 0px 4px;
	overflow:hidden;
	width:28px;
	}

body#nosotros article a img{
	height: auto;
	max-width:140px;
	margin-top:-28px;
	opacity:0.8;
	width:140px; 
	}

body#nosotros article a:hover img{
	opacity:1;
	}

body#nosotros aside {
	width:45%;
	}
	@media only screen and (max-width:620px) {
	body#nosotros aside {
	width:100%;
	}}

body#nosotros aside a{
	display:block;
	border:10px solid #e4eaea;
	height: auto;
	position:relative;
	width:100%;
	}

body#nosotros aside a img {
	height: auto;
	width:100%;
	}

body#nosotros aside a span{
	display:block;
	height:180px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-90px 0px 0px -90px;
	overflow:hidden;
	width:180px;
	}

body#nosotros aside a span img{
	height:auto;
	max-width:900px;
	opacity:0.8;
	width:900px;
	}

body#nosotros aside a span img{
	margin-left:-180px;
	margin-top:-180px;
	}

body#nosotros aside a:hover span img{
	opacity:1;
	}




/* --------------------------------------------- SERVICIOS */
body#servicios div.container div.in{
	justify-content: space-between;
	}
	@media only screen and (max-width:820px) {
	body#servicios div.container div.in{
	align-items: stretch;
	}}



body#servicios div.titulo{
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
	margin-bottom:40px;
	width:100%;
	}

body#servicios h3{
	text-align:center;
	}

body#servicios h3 b{
	margin-left:5%;
	}


body#servicios article{
	align-items:center;
	flex-direction:column;
	width:32%!important;
	}
	@media only screen and (max-width:820px) {
	body#servicios article{
	margin-bottom:20px;
	width:48%!important;
	}}
	@media only screen and (max-width:620px) {
	body#servicios article{
	width:100%!important;
	}}



body#servicios article div.ls{
	text-align:center;
	padding:20px;
	width:100%;
	}


body#servicios article span.icon-servicios{
	display:block;
	height:140px;
	margin-left:auto;
	margin-right: auto;
	overflow:hidden;
	width:140px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article span.icon-servicios{
	height:100px;
	width:100px;
	}}

body#servicios article span.icon-servicios img{
	height:140px;
	max-width:100000px;
	width:560px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article span.icon-servicios img{
	height:100px;
	width:400px;
	}}


body#servicios article span.icon-servicios.logistica img{
	margin:0px 0px 0px 0px;
	}
body#servicios article span.icon-servicios.auditoria img{
	margin:0px 0px 0px -140px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article span.icon-servicios.auditoria img{
	margin:0px 0px 0px -100px;
	}}
body#servicios article span.icon-servicios.despacho img{
	margin:0px 0px 0px -280px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article span.icon-servicios.despacho img{
	margin:0px 0px 0px -200px;
	}}
body#servicios article span.icon-servicios.quimicos img{
	margin:0px 0px 0px -420px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article span.icon-servicios.quimicos img{
	margin:0px 0px 0px -300px;
	}}


body#servicios article h2,
body#servicios article h3{
	text-align:center;
	}

body#servicios article h2{
	font-size:1.4em;
	font-weight:600;
	padding:0px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article h2{
	font-size:1.3em;
	}}
	@media only screen and (max-width:1020px) {
	body#servicios article h2{
	font-size:1.2em;
	}}
	@media only screen and (max-width:820px) {
	body#servicios article h2{
	font-size:1em;
	}}
	@media only screen and (max-width:720px) {
	body#servicios article h2{
	font-size:1.2em;
	}}

body#servicios article h3{
	font-size:1.4em;
	font-family: 'Lato', sans-serif;
	font-weight:300;
	padding:0px;
	}
	@media only screen and (max-width:1500px) {
	body#servicios article h3{
	font-size:1.3em;
	}}
	@media only screen and (max-width:1020px) {
	body#servicios article h3{
	font-size:1.2em;
	}}
	@media only screen and (max-width:820px) {
	body#servicios article h3{
	font-size:1em;
	}}
	@media only screen and (max-width:720px) {
	body#servicios article h3{
	font-size:1.2em;
	}}

body#servicios article ul{
	padding:20px;
	}


body#servicios article ul li{
	display:block;
	height:32px;
	line-height:32px;
	list-style:none;
	padding:0px;
	margin:0px;
	width:100%;
	}

body#servicios article ul li span{
	background-image:url(../svg/icons.svg);
	background-size:160px 64px;
	background-position:0px -32px;
	display:inline-block;
	float:left;
	height:32px;
	width:32px;
	}


body#servicios div.container div.in div.contactanos{
	margin-top:100px;
	width:100%;
	}

body#servicios div.container div.in h4 {
	font-size:1.2em;
	font-weight:600;
	text-align:center;
	}

body#servicios div.container div.in div.contactanos ul.actions{
	justify-content:center;
	}

/* --------------------------------------------- CONTACTO */
body#contacto article{
	padding:40px;
	}

body#contacto article{
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	text-align:left;
	padding:40px;
	}

body#contacto article div.formulario{
	margin-top:20px;
	width:100%;
	}


body#contacto aside{
	padding:40px;
	}
	@media only screen and (max-width:620px) {
	body#contacto aside{
	margin-top:20px;
	}}


body#contacto aside p{
	text-align:left;
	}

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


/* --------------------------------------------------------------- < FOOTER > */


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

ul.actions li {
	list-style:none;
	padding: 0px;
	margin:0px;
	margin-right:8px;
	margin-bottom:8px;
	position:relative;
	width:auto;
	}
	@media only screen and (max-width:620px) {
	ul.actions li{
	margin-right:0px;
	margin-bottom:10px;
	text-align: center;
	width:100%; 
	}}

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


ul.actions li label {
	margin:0px!important;
	padding:0px!important;
	color:inherit;
	}



ul.actions li > *,
ul.actions li label > *{
	align-items:center;
	align-content: center;
	display: flex;
	justify-content:center;
	border-radius:6px;
	color:inherit;
	cursor: pointer;
	font-size:1em;
	font-weight:700;
	height:48px;
	line-height:48px;
	margin: 0px;
	padding:0px 20px; 
	position: relative;
	text-decoration: none;
	width:auto;
	}
	ul.actions li > * .svg-icon {
	float:left;
	height:48px;
	width:48px;
	}

	@media only screen and (max-width:1500px) {
	ul.actions li > *,
	ul.actions li label > *{
	height:36px;
	line-height:36px;
	}
	ul.actions li > * .svg-icon {
	height:36px;
	width:36px;
	}
	}
	@media only screen and (max-width:620px) {
	ul.actions li > *,
	ul.actions li label > *{
	height:50px;
	line-height:50px;
	padding:0px 0px; 
	text-align: center;
	width:100%; 
	}
	ul.actions li > * .svg-icon {
	height:50px;
	width:50px;
	}
	}



ul.actions li input[type="file"],
ul.actions li input[type="submit"]{
	visibility: hidden;
	display:none;
	}


ul.actions li a:hover,
ul.actions li span:hover{
	color:#fff!important;
	}





/*---------------------------------------------------------------- 
VARIOS ///////////////////////////////////////////////////////////
----------------------------------------------------------------*/
.first {
	}
	@media only screen and (max-width:620px) {
	.first{
	margin-top:62px;
	}}


.txt-small {
	font-size:0.8em;
	}


/*--------------------------------------------------------------------------- FIRMA */
a.firma,
a.firma:visited,
a.firma:hover{
	display:flex;
	flex-direction:row;
	font-size:0.8em;
	justify-content:flex-end;
	cursor:text;
	float:none;
	height:auto;
	text-decoration:none;
	margin-top: 50px;
	width:auto;
	}
	@media only screen and (max-width:720px) {
	a.firma,
	a.firma:visited,
	a.firma:hover{
	flex-direction:column;
	text-align: center;
	}}



a.firma b{
	display:block;
	height:22px;
	line-height:20px;
	font-style:normal;
	font-weight:normal;
	width:auto;
	}


a.firma span{
	cursor:pointer;
	display:block;
	height:22px; /*set*/
	margin:0px 0px 0px 5px;
	width:auto;
	}

a.firma span img{
	height:100%;
	width:auto;
	}

/*--------------------------------------------------------------------------- GUIA (delete) */

.flex-container {
	display: flex;

	/* Dirección de items */
	flex-direction: row; /* → */
	flex-direction: row-reverse; /* ← */
	flex-direction: column; /* ↓ */
	flex-direction: column-reverse; /* ↑ */

	/* Envolvente */
	flex-wrap: wrap; /* Respeta tamaño de flex-items al llegar a limite de espacio*/
	flex-wrap: nowrap; /* Reduce flex-items conforme se reduce wrap al llegar a limite de espacio*/
	flex-wrap: wrap-reverse; /* Reduce flex-items conforme se reduce wrap y los invierte en orden  al llegar a limite de espacio*/

	/* Justificación */
	justify-content:flex-start; /* 1 2 3 4 - - - - - - - */
	justify-content:flex-end; /* - - - - - - -  1 2 3 4 */
	justify-content:center; /* - - - 1 2 3 4 - - - */
	justify-content:space-between; /* 1 - - - 2 - - - 3 - - - 4 */
	justify-content:space-around; /* - 1 - - 2 - - 3 - - 4 - */
	justify-content:space-evenly; /* - 1 - 2 - 3 - 4 - */


	/* Alineación (vertical )*/
	align-items:flex-start; /* top */
	align-items:flex-end; /* bottom */
	align-items:center; /* middle */
	align-items:stretch; /* Modifica altura de .flex-items para adaptarlos a todo lo alto */
	align-items:baseline; /* ???  */
	}	



.flex-items{
	order:1; /* default 0, orden de items  */
	}