/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< GENERAL >>>>>>>>>>*/	

html, body {
	display:flex;
	flex-direction: row; 
	flex-wrap: wrap;
	justify-content:center;
	align-items:flex-start;
	background-color:#fff;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	height: auto;
	min-height:100vh;
	line-height:1.3em;
		overflow-x:hidden;
	position: relative;
	width:100%;
	}


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


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

section {
	height: auto;
	}
	

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

a.logotipo,
nav,
section.indexproductos div.in > a h2,
section.panelcontacto div.in > div p b,
body#productos ul.zigzag-full li div.info .title{
	font-family: 'Nunito', sans-serif; /* Fuente secundaria */
	}


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


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,
section.indexproductos div.in > a {
	transition:all 0.15s;
	}



.lazyload,
.lazyloading {
	opacity: 0;
	}

.loading,
.lazyload,
.lazyloaded,
.image  {
	opacity: 1;
	transition: opacity 1000ms;
	}


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


/* --------------------------------------------------------------- < HEADER > */

header {
  overflow-x:visible;/*necesary*/
  z-index:200;
  }
  @media only screen and (max-width:620px) {
  header{
  position:relative;
  left:0px;
  top:0px;
  }}


/*----- IN -----*/
header div.in {
  align-items:center;
  height:100px;
  justify-content:space-between;
  overflow-x:visible;/*necesary*/
  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:70px;
  justify-content:space-between!important;
  position:initial; /* sirve para que nav no lo tome en cuenta al posicionar*/
  }}


/*----- 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{
	display:none; /* temporal */
  height:60px;
  margin:0px;
  padding:0px;
  width:auto; 
  }
  @media only screen and (max-width:620px) {
  header a.logotipo img{
  height:70px;
  width:auto;
  }}

header a.logotipo,
header a.logotipo:hover{ /*texto temporal*/
  height:70px;
  line-height:70px;
  text-decoration: none;
  font-size:1.8em;
	}
	@media only screen and (max-width:1020px) {
	header a.logotipo,
	header a.logotipo:hover{
	font-size:1.6em;
	}}
	@media only screen and (max-width:920px) {
	header a.logotipo,
	header a.logotipo:hover{
	font-size:1.4em;
	}}
	@media only screen and (max-width:420px) {
	header a.logotipo,
	header a.logotipo:hover{
	font-size:1.2em;
	}}
 /* --------------------------------------------------------------- < NAV > */
nav{
  display:flex;
  height:auto;
  position:relative;
  width:auto;
  }
  @media only screen and (max-width:820px) {
  nav {
  margin-top:0px;
  width:100%;
  }}



/*nav:before {
	content:"";
	position:absolute;
	left:-23px;
	top:0px;
	border-top:100px solid #4fd186;
	border-left: 23px solid transparent;
	border-right: 0px solid transparent;
	height:0;
	width:0px;
	}
	@media only screen and (max-width:1500px) {
	nav:before {
	border-left: 10px solid transparent;
	border-top: 70px solid #4fd186;
	left:-10px;
	}}
	@media only screen and (max-width:720px) {
	nav:before {
	display:none;
	}}

nav:after {
	content:"";
	position:absolute;
	right:-23px;
	top:0px;
	border-bottom:100px solid #4fd186;
	border-left:0px solid transparent;
	border-right:23px solid transparent;
	height:0;
	width:0px;
	}
	@media only screen and (max-width:1500px) {
	nav:after {
	border-bottom:70px solid #4fd186;
	border-right:10px solid transparent;
	right:-10px;
	}}
	@media only screen and (max-width:720px) {
	nav:after {
	display:none;
	}}
*/

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


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


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

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

/*----------*/
nav ul li > *{
  cursor:pointer;
  display:block;
  font-size:0.9em;
  font-weight:700; 
  height:60px;
  line-height:60px;
  text-decoration:none;
  padding:0px 12px;
  position:relative;
  text-transform:uppercase;
  width: auto;
  }
  @media only screen and (max-width:1020px) {
  nav ul li > *{
  padding:0px 10px;
  }}
  @media only screen and (max-width:920px) {
  nav ul li > *{
  font-size:0.8em;
  padding:0px 8px;
  }}



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

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

nav ul li.ls{
	align-items:flex-start;
	display:flex;
	justify-content:center;
	flex-direction:row;
	flex-wrap:wrap;
	height:auto;
	margin-left:0px;
	justify-content:flex-start;
	width:auto;
	}
	@media only screen and (max-width:620px) {
	nav ul li.ls{
	font-size:0.8em;
	justify-content:flex-start;
	margin-top:40px;
	margin-left:-30px;
	width:100%;
	}}


nav ul li.ls .svg-icon{
	border-bottom:0px solid transparent!important;
	cursor:default;
	fill:#fff;
	height:60px;
	width:60px;
	}



nav ul li.ls span{
	border-bottom:0px solid transparent!important;
	cursor:text;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	flex-direction:column;
	height:60px!important;
	line-height:18px!important;
	padding:0px 0px!important;
	position:relative;
	width:auto;
	}

nav ul li.ls span b{
	font-size:0.8em;
	text-align: left;
	width:100%;
	}
	@media only screen and (max-width:620px) {
	nav ul li.ls span b{
	font-size:1.2em;
	}}



nav ul li.ls span i{
	font-size:1.4em;
	font-weight:400;
	font-style: normal;
	text-align: left;
	width:100%;
	}

nav ul li.ls span:first-child{
	font-size:0.6em;
	}

div.shadow {
  display:none;
  visibility:hidden;
  background-color:#000;
  display:block;
  height:100vh;
  opacity:0.0;
  transition:all 0.18s;
  position:absolute;
  bottom:0px;
  left:0px;
  right:0px;
  top:0px;
  width:100vw;
  }

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

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


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

input.movil-button[type=checkbox] + label .svg-icon{
	fill:#fff;
	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) {

body, html {overflow-x:hidden;}

/*----- MOSTRAMOS BOTON MOVIL  -----*/
input.movil-button[type=checkbox] + label{
display:block;
}

/*----- Z INDEX  -----*/
div.shadow {z-index:9;}
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 {
background-color:#33b66b;
align-items:center;
flex-direction:row;
justify-content:center;
height:100vh!important;
margin-top:0px;
position:absolute;
bottom:0px;
left:auto;
top:0px;
right:0px;
transform:translateX(80vw);
padding:40px;
width:80vw;
visibility:visible;
opacity:1.0;
transition:all 0.16s;
}
nav ul{
align-items:flex-center;
justify-content:center;
flex-direction:row;
max-width:100%;
margin:0px 0px;
padding:0px 0px;
width:100%;
}
nav ul li{
border-bottom:1px solid #84e3ac;
margin:5px 0px;
width:100%;
}
nav ul li:last-child{
border-bottom:0px solid #fff; /* set */
}
nav ul li a{
display:block;
height:auto;
line-height:26px;
font-size:1.1em;
margin:0px 0px;
padding:0px 0px;
text-align:left;
width:100%;
}
nav ul li a:hover{
background-color:transparent!important;
}
}

.action-movil{
  transform:translateX(0vw);
  }

.show-shadow{
  display:block!important;
  visibility:visible!important;
  opacity:0.6!important;
  }

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX  >>>>>>>>>>*/
body#index section {
	padding:40px 0px;
	}


body#index img.ls{

	}
	@media only screen and (max-width:620px) {
	body#index img.ls{
	display:none;
	}}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< INDEX PRODUCTOS  >>>>>>>>>>*/
section.indexproductos div.in{
	align-items:stretch;
	justify-content:space-between;
	flex-direction:row;
	padding:80px 0px;
	}


section.indexproductos div.in > a{
	align-items:center;
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:auto; /* set */
	margin-bottom:0px; /* set */
	order:1;
	padding:40px;
	text-align: center;
	text-decoration:none;
	width:33.33%;
	}
	@media only screen and (max-width:720px) {
	section.indexproductos div.in > a{
	margin-bottom:20px;
	width:49%;
	}}
	@media only screen and (max-width:620px) {
	section.indexproductos div.in > a{
	padding:20px;
	}}
	@media only screen and (max-width:720px) {
	section.indexproductos div.in > a.pulseras{
	order:1;
	}
	section.indexproductos div.in > a.etiquetas{
	order:2;
	}
	section.indexproductos div.in > a.escudos{
	order:3;
	}
	section.indexproductos div.in > a.politicas{
	order:4!important;
	}
	section.indexproductos div.in > a.gafetes{
	order:5;
	}
	section.indexproductos div.in > a.palas{
	order:6;
	}
	section.indexproductos div.in > a.cubrebocas{
	order:6;
	}
	}


section.indexproductos div.in > a.palas {
	display:none;
	}


section.indexproductos div.in > a span {
	background-image:url(../svg/icons.svg);
	background-repeat:no-repeat;
	background-size:1000px 100px;
	border-radius:50%;
	height:100px;
	margin-bottom:8px;
	width:100px;
	}


section.indexproductos div.in > a.pulseras span {
	background-position:0px 0px;
	}
section.indexproductos div.in > a.etiquetas span {
	background-position:-100px 0px;
	}
section.indexproductos div.in > a.politicas span {
	background-position:-200px 0px;
	}
section.indexproductos div.in > a.escudos span {
	background-position:-300px 0px;
	}
section.indexproductos div.in > a.gafetes span {
	background-position:-400px 0px;
	}
section.indexproductos div.in > a.palas span {
	background-position:-500px 0px;
	}
section.indexproductos div.in > a.cubrebocas span {
	background-position:-600px 0px;
	}



section.indexproductos div.in > a h2{
	font-size:1.2em;
	font-weight:600;
	line-height:1.2em;
	height:40px;
	text-transform:uppercase;
	}
	@media only screen and (max-width:1020px) {
	section.indexproductos div.in > a h2{
	height:auto;
	}}

section.indexproductos div.in > a p{
	font-size:1em;
	font-weight:300;
	text-align:center;
	height:auto;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< PANEL CONTACTO  >>>>>>>>>>*/
section.panelcontacto{
	background-image:url(../images/ima-panelcontacto.jpg);
	background-size:cover;
	background-position:center center;
	z-index:100;
	}

section.panelcontacto div.in{
	min-height:240px;
	}

section.panelcontacto div.in > div{
	height:auto;
	min-height:400px;
	margin-left:-300px;
	margin-top:-80px;
	padding:30px 30px 30px 30px;
	position:absolute;
	text-align: center;
	width:600px;
	top:0px;
	left:50%;
	}
	@media only screen and (max-width:1500px) {
	section.panelcontacto div.in > div{
	margin-left:-250px;
	width:500px;
	}}
	@media only screen and (max-width:720px) {
	section.panelcontacto div.in > div{
	margin-top:-140px;
	min-height:200px;
	left:0px!important;
	margin-left:5%!important;
	padding:30px 20px 30px 20px;
	width:90%;
	}}


section.panelcontacto div.in > div > *{
	width:100%;
	}

section.panelcontacto div.in > div > span{
	text-align:center;
	margin:0px;
	padding:0px;
	}

section.panelcontacto div.in > div span img{
	display:inline-block;
	height:auto;
	width:130px;
	}

section.panelcontacto div.in > div p{
	text-align:center;
	font-size:1.4em;
	font-weight:400;
	line-height:1.1em;
	margin:0px;
	padding:0px;
	}
	@media only screen and (max-width:620px) {
	section.panelcontacto div.in > div p{
	font-size:1.2em;
	}}


section.panelcontacto div.in > div p b{
	font-size:1em;
	font-weight:inherit;
	font-weight:700;
	line-height:1.1em;
	text-transform:uppercase;
	}
	@media only screen and (max-width:620px) {
	section.panelcontacto div.in > div p b{
	font-size:0.8em;
	}}



section.panelcontacto ul.actions{
	justify-content:center;
	width:80%;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< PRODUCTOS  >>>>>>>>>>*/
body#productos ul.zigzag-full li.palas {
	display:none;
	}

body#productos ul.zigzag-full li div.info {
	display:flex;
	align-items:flex-start;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:center;
	padding:10px 40px 40px 40px;
	}
	
body#productos ul.zigzag-full li div.info .title{
	font-size:1.2em;
	text-align:left;
	text-transform:uppercase;
	}

body#productos ul.zigzag-full li div.info p{
	text-align:left;
	padding:0px 0px;
	}


body#productos ul.zigzag-full li div.info span {
	border:3px solid rgba(255, 255, 255, 0.6);
	background-image:url(../svg/icons.svg);
	background-repeat:no-repeat;
	background-size:1000px 100px;
	border-radius:50%;
	height:106px;
	margin-bottom:8px;
	width:106px;
	}


body#productos ul.zigzag-full li.pulseras div.info span {
	background-position:0px 0px;
	}
body#productos ul.zigzag-full li.etiquetas div.info span {
	background-position:-100px 0px;
	}
body#productos ul.zigzag-full li.politicas div.info span {
	background-position:-200px 0px;
	}
body#productos ul.zigzag-full li.escudos div.info span {
	background-position:-300px 0px;
	}
body#productos ul.zigzag-full li.gafetes div.info span {
	background-position:-400px 0px;
	}
body#productos ul.zigzag-full li.palas div.info span {
	background-position:-500px 0px;
	}
body#productos ul.zigzag-full li.cubrebocas div.info span {
	background-position:-600px 0px;
	}


body#productos ul.zigzag-full li div.info p a{
	background-color:rgba(255, 255, 255, 0.8);
	color:#000;
	border-radius:18px;
	display:inline-block;
	font-size:0.8em;
	height:32px;
	line-height:32px;
	margin-top:8px;
	text-decoration:none;
	text-transform:uppercase;
	padding:0px 12px;
	width: auto!important;
	}


body#productos ul.zigzag-full li div.info p a:hover{
	background-color:rgba(255, 255, 255, 1.0);
	}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< CONTACTO  >>>>>>>>>>*/
div.container{
	padding:40px 0px;
	}

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


body#contacto div.container{
	margin-top:-380px;/*delete*/
	}

body#contacto article {
	padding:40px;
	width:60%;
	}
	@media only screen and (max-width:820px) {
	body#contacto article {
	padding:20px;
	width:58%;
	}}
	@media only screen and (max-width:620px) {
	body#contacto article {
	width:100%;
	}}

body#contacto aside {
	padding:40px;
	width:35%;
	}
	@media only screen and (max-width:820px) {
	body#contacto aside {
	padding:20px;
	width:40%;
	}}
	@media only screen and (max-width:620px) {
	body#contacto aside {
	width:100%;
	}}


body#contacto article ul.actions{
	justify-content:center;
	}

body#contacto article ul.actions li{
	min-width:200px;
	text-align:center;
	}
	@media only screen and (max-width:620px) {
	body#contacto article ul.actions li{
	width:80%;
	}}

body#contacto aside div img{
	margin-left:20%;
	width:60%;
	}

body#contacto section{
	padding:40px 0px;
	}


body#contacto section iframe{
	height:400px;
	width:100%;
	}
	@media only screen and (max-width:620px) {
	body#contacto section iframe{
	height:300px;
	}}


/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FOOTER >>>>>>>>>>*/
footer {
	font-size:0.8em;
	padding:60px 0px 30px 0px;
	}

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

footer p{
	width:45%;
	}
	@media only screen and (max-width:720px) {
	footer p{
	text-align: center;
	width:100%;
	}}



/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FIRMA >>>>>>>>>>*/
a.firma,
a.firma:visited,
a.firma:hover{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	height:auto;
	width:auto;
	cursor:text;
	float:none;
	text-decoration:none;
	width:auto;
	}
	@media only screen and (max-width:720px) {
	footer a.firma{
	text-align: center;
	}}

a.firma:hover strong{
	cursor:pointer;
	color:#000;
	}


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


a.firma span{
	background-color:#da1f43;
	background-image: url(../svg/icon-ls.svg);
	background-size:40px 20px;
	background-position:0px 0px;
	display:block;
	/*background-color: #da1f43;*/
	border-radius:50%;
	height:20px;
	margin:0px 3px 0px 3px;
	width:20px;
	}

a.firma:hover span{
	background-color:#da1f43;
	}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< FLEXBOX >>>>>>>>>> */

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