header.default {
	align-items:center;
	background-color:var(--color-white); /* set */
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px;
	min-height:10vh;
	max-width:100%;
	overflow-x:visible;/* necesary */
	width:100%;
	z-index:200;
	}



/* SET: Altura
------------------------------*/
header.default {
	height:auto;
	min-height:130px;
	}
	@media only screen and (max-width:1500px) {
	header.default{
	min-height:80px;
	}}




/*--------------------------------------------
LOGOTIPO ////////////////////////////////////
-------------------------------------------*/
header.default a.logotipo{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:0px;
	height:auto;
	justify-content:center;
	margin:5px 0px;
	width:auto;
	}

/* SET: logo size
------------------------------*/
header.default a.logotipo img{
	height:80px; /*set*/	
	width:131px; /*set*/	
	}
	/* Break movil */
	@media only screen and (max-width:620px) {
	header.default a.logotipo img{
	height:80px;
	width:131px;
	}}





/*--------------------------------------------
NAV /////////////////////////////////////////
-------------------------------------------*/
nav.main{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:99;
	justify-content:flex-end;
	height:auto;
	width:auto;
	}



/*--------------------------------------------
MENU UL ////////////////////////////////////
-------------------------------------------*/
nav.main ul.level-1{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:99;
	justify-content:flex-end;
	list-style:none;
	margin:0px;	
	padding:0px;
	width:100%;
	}



/* UL LI
------------------------------*/
nav.main ul.level-1 > li{
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:center;
	list-style:none;
	margin:0px;	
	padding:0px;
	position:relative;
	text-align: center;
	width:auto;
	}



/* UL LI > *
------------------------------*/
nav.main ul.level-1 > li > * {
	align-items:center;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin:0px 0px;
	position:relative;
	transition:all 0.12s;
	text-decoration:none;
	width:auto;
	}


nav.main ul.level-1 > li > a {
	cursor:pointer;
	}


nav.main ul.level-1 > li > a:hover{
	text-decoration:none;
	}






/*--------------------------------------------
SET:  DESIGN ////////////////////////////////
-------------------------------------------*/


/* Distribuimos botones 
------------------------------*/
@media only screen and (max-width:720px) {
	nav.main ul.level-1{
	justify-content:space-between;
	}}



/* Fonts
------------------------------*/
nav.main {
	font-size:1rem;
	font-weight:var(--fw-bold);
	font-family:inherit;
	}



/* separator
------------------------------*/
nav.main ul.level-1 li.separator{
	background-color:var(--color-neutro-soft);
	height:20px;
	width:1px!important;
	}




/* Buttons
------------------------------*/
nav.main ul.level-1 > li > * {
	color:var(--color-neutro-dark);
	height:40px;
	line-height:40px;
	padding:0px 12px;
	/*text-transform:uppercase;*/
	}
nav.main ul.level-1 > li > *:hover {
	color:var(--color-main);
	}




/* Iconos
------------------------------*/
nav.main ul.level-1 li > a > .svg-icon{
	fill:var(--color-neutro-darker);
	height:24px;
	width:24px;
	margin-left:-8px;
	}

nav.main ul.level-1 li > a:hover > .svg-icon{
	fill:var(--color-main);
	}




/*--------------------------------------------
BOTONES ACTIVOS //////////////////////////////
-------------------------------------------*/
body#inicio nav ul li[data-seccion='inicio'] a, 
body#inicio nav ul li[data-seccion='inicio'] a:hover,
body#blog nav ul li[data-seccion='blog'] a, 
body#blog nav ul li[data-seccion='blog'] a:hover,
body#contacto nav ul li[data-seccion='contacto'] a, 
body#contacto nav ul li[data-seccion='contacto'] a:hover   {
	background-color:transparent;
	color:var(--color-main); 
	}



	/*



*/












































/*--------------------------------------------
EXTRAS //////////////////////////////////////
-------------------------------------------*/

/* LEVEL  1 BOX CONTACT
------------------------------------------*/

nav.main ul.level-1 > li.box-contact > *:hover {
	color:var(--color-neutro-darker);
	}




nav.main ul.level-1 li.box-contact{
	margin:0px;
	padding:0px;
	width:auto!important;
	}


nav.main ul.level-1 li.box-contact .box{
	align-items:flex-start;
	cursor:initial;/*or pointer if a*/
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	height:auto;
	justify-content:flex-start;
	margin:0px;
	padding:0px;
	text-decoration:none;
	width:auto!important;
	}
	@media only screen and (max-width:620px) {
	nav.main ul.level-1 li.box-contact .box{
	justify-content:center;
	margin-top:40px;
	width:100%!important;
	}}


nav.main ul.level-1 li.box-contact .box .svg-icon{
	line-height:60px;
	background-color:var(--color-main-soft);
	fill:var(--color-white);
	padding:3px;
	border-radius: 50%;
	margin: 6px 8px 0px 12px;
	height:30px;
	width:30px;
	}
	@media only screen and (max-width:620px) {
	nav.main ul.level-1 li.box-contact .box .svg-icon{
	height:60px;
	margin-left:-16px;
	width:60px;
	}}


nav.main ul.level-1 > li.box-contact div.box:hover .svg-icon{
	background-color:var(--color-main-softer);
	}


nav.main ul.level-1 li.box-contact .box p{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	flex-direction:column;
	height:40px;
	line-height:15px;
	margin:0px;
	padding:0px 0px;
	position:relative;
	width:auto;
	}

	@media only screen and (max-width:620px) {
	nav.main ul.level-1 li.box-contact .box p{
	height:60px;
	}}


nav.main ul.level-1 li.box-contact .box p span{
	position:relative;
	text-align:left;
	width:100%;
	}


nav.main ul.level-1 li.box-contact .box p span:nth-child(1){
	font-size:0.6em;
	width:100%;
	}

nav.main ul.level-1 li.box-contact .box p span:nth-child(2){
	font-weight:600;
	font-size:0.9em;
	width:100%;
	}


header.standar nav.main > ul > li.box-contact > *:hover  {
	color:var(--color-white);
	}


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

nav.main ul.level-1 > li.box-contact .svg-icon,
nav.main ul.level-1 > li.box-contact div.box:hover .svg-icon{
	fill:#4dc247;
	}


}
