@charset "utf-8";
/* CSS Document */

:root {
	--header-height:60px;	
	--gap-xsmall:15px;
	--gap-small:20px;
	--gap-big:20px;
	--gap-xl:40px;	
	--main-font-size: 12px;
	--menu-font-size:13px;
}

/**/

header .header-item{
	padding: var(--gap-xsmall) 0;
}

header .hi-lang-bar{	
	padding: var(--gap-xsmall) var(--gap-small) 0;
}

header .hi-lang-bar span{
	font-size: 13px;
}

header .hi-btn {
  justify-content: flex-start;
  width: 25%;
  padding: 0;
}

.header-menu-btn .btn-menu{
	width: var(--header-height);
	height: var(--header-height);
	padding: 17px var(--gap-small) 0 var(--gap-small);
	margin-left: 5px;
}

/**/

header .menu-bar{
	position: absolute;
	z-index: -2;
	left: 0px;
	top:var(--header-height);
	width: 100%;
	
	height: 0px;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#12707f+0,2a4f64+100&0.90+0,0.90+100 */
	background: -moz-linear-gradient(top,  rgba(18,112,127,0.90) 0%, rgba(42,79,100,0.90) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(18,112,127,0.90) 0%,rgba(42,79,100,0.90) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(18,112,127,0.90) 0%,rgba(42,79,100,0.90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d912707f', endColorstr='#d92a4f64',GradientType=0 ); /* IE6-9 */

	padding: 0 var(--gap-big);
	
	overflow: hidden;
}

header .menu-bar{
	top:0px;
}

header.open .menu-bar{
	top:0px;
	height:100vh;
	padding-top: var(--header-height);
	
}

header.open .header-bk{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}

header.open .header-logo{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
}

header .menu-bar .header-logo-big{
	display: flex;
	width: 100%;
	margin-top: calc(var(--header-height)*-1);
	padding-top: var(--gap-small);
	justify-content: space-around;
	margin-bottom: 40px;
}

header .menu-bar .header-logo-big img{
	width: 25%;
}

/**/

.mp-block a div, .mp-block a:active div, .mp-block a:link div, .mp-block a:visited div{
  font-size: 18px;
}

.mp-block{	
	flex-wrap: wrap;
	justify-content: space-around;
}

.mp-block a{
	width: 100%;
}

.mp-block a .box{
	padding: 5px 0;
}

.mp-block a .base{
	height: 1px;
}

header .menu-bar .mp-block {
  gap: 0;
}

header .menu-bar .mp-block a{
	margin-bottom: var(--gap-big);
}

header .menu-bar .mp-block a:last:child{
	margin-bottom:0;
}



/**/



.no-padding-resp{
	padding: 0;
}

.btn-big{
	font-size: 1.2rem;
	padding: 10px 20px;
	margin-top: var(--gap-big);
}

.padding-top-xl-resp{
	padding-top: var(--gap-xl);
}

.padding-top-big-resp{
	padding-top: var(--gap-big);
}

.titulo-1{
	font-size: 1.4rem;
}

.titulo-2{
	font-size: 2rem;
}

/**/
.contacto-box > div{
	margin-bottom: var(--gap-xl);
}


/**/

.intro-txt{
	font-size: 3rem;
}

@media(max-width:1000px){
	:root {
		--main-font-size: 10px;
	}
	
	.header-menu-btn .btn-menu{
		padding: 19px var(--gap-small) 0 var(--gap-small);
	}
}

@media(max-width:950px){
	
	
	.col-reverse{
		flex-direction: column-reverse;
	}
	
	.titulo-1{
		font-size: 1.5rem;
	}
	
	.padding-top-xl-resp{
		padding-top: 0;
	}
	
	
	.grid-x2{
		flex-wrap: wrap;
	}
	
	.grid-x2 .col-x2{
		width: 100% !important;
	}
	
	.grid-x2 .col-x2.col-small{
		padding-bottom: 0;
	}
	
	.grid-x2-color-box .col-x2.col-small{
		padding-bottom: var(--gap-xl);
	}
}

@media(max-width:750px){
	
	.grid-x3 .col-x3{
		width: 50%;
		height: 300px;
	}
		
	.grid-x3 .col-x3:nth-child(1) { order: 1; }
    .grid-x3 .col-x3:nth-child(2) { order: 2; }
	.grid-x3 .col-x3:nth-child(3) { order: 4; }
	.grid-x3 .col-x3:nth-child(4) { order: 3; }
	.grid-x3 .col-x3:nth-child(5) { order: 5; }
	.grid-x3 .col-x3:nth-child(6) { order: 6; }    
	
	
}

@media(max-width:700px){
	.grid-x2-half{
		flex-wrap: wrap;
	}
	
	.grid-x2-half .col-x2-half{
		width: 100%;
	}
}

@media(max-width:600px){
	header .hi-logo {
		padding: var(--gap-small) 0;
		margin-top: -3px;
	}
	
}