@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
html, body {
    max-width: 100%;
    overflow-x: hidden;
}


body {
	background: #fff;
    background-repeat:no-repeat;
    background-size:cover;
	opacity:0;
}

#main{
	width:100vw;
	max-width:1500px;
	margin: 0 auto;
	padding: 0px;
}

#logo{
	position: absolute;
	float:left;
	width:20vw;
	min-width:130px;
	max-width:400px;
}

header{
	padding-bottom: 3em; 
}

nav{
	right: 0;
	top: 0;
	z-index:100;
	width:100vw;
	float:right;
	margin-right:2em;
}

#menu{
	float:right;
	display: block;
}

#menu a {
  text-align: center;
  padding: 0 0.5em;
  text-decoration: none;
  font-size:1.5em;
  border-bottom: none;
  color:#000;
  font-family:Montserrat;
}


#menu a:hover {
  color:#f00;
  background-color:#fafafe;
}


#menu a:visited {
  color:#000;
}

#iconos{
	float:right;
	padding:0.25vw;
	margin-top:10px;
	display: flex;
}

.flexbox-container > div {
        width: 50%;
        padding: 10px;
		
}

.flexbox-container > div:first-child {
        margin-right: 20px;
}



.resaltar{
	border:0.2em solid #B5B6B5;
}

.icono_social, .icono_language{
	width:1.8vw;
	min-width:35px;
	margin:0px;
	padding:0px;
	max-width: 100px;
}

.icono_language{

}

.slider img{
	width:98%;
	overflow:visible;
	margin:0;
	padding:0;
}

.slider{
  margin: 0 auto;
  padding: 20px;
  width:100%;
  max-width:1500px;
  overflow:visible;

}
.slider:after{
  clear: both;
  content: '';
  display: table; 
}

.leyenda{
	font-size:3em;
	text-align:center;
	margin:2em 0;
	font-family:Montserrat;
	text-transform: uppercase;
}

.leyenda2{
	font-size:2.5em;
	text-align:center;
	margin:2em 0;
	font-family:Montserrat;
	color:#989898;
}

.leyenda3 {
	text-align: center;
	margin:1em auto;
	width:50%;
}

.leyenda3 a{
	font-family:Montserrat;
	text-decoration: none;
	font-size:0.75em;
	color:#989898;
	padding:1.25em;
	border-radius: 45px;
	border: 2px solid #989898;
}

.boton{

}

.hr{
	width:100%;
}

.flexbox-container {
        display: flex;
}

.flexbox-container > div {
        width: 50%;
        padding: 10px;
		
}

.flexbox-container > div:first-child {
        margin-right: 20px;
}

p{
	font-size: 1.35vw;
	text-align: justify;
	text-justify: inter-word;
	font-family: 'Roboto', sans-serif;
}

.icono{
	width:60%;
	max-width:650px;
}
.icono2{
	width:100%;
}
.icono3{
	width:30%;
	max-width:300px;
	 vertical-align: text-top;
}
.icono3b{
	width:30%;
	max-width:300px;
	 vertical-align:text-bottom;
}
.icono4{
	width:8%;
	max-width:200px;
}



h2{
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  font-size:3vw;
  font-family:Montserrat;
}




/***Efecto fadein entrada**/
body.show{
  -webkit-animation:fadeIn 5s ease;
  opacity:1;
}
@-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}


/*** media query responsive ***/


@media (max-width: 767px) { /*1 pixel más y es para ipad también*/
	nav{
		
	}
	#menu a {
		font-size: 9pt;
		margin-top:20px;
		padding:0 0.5em;
	}



	p{
		font-size: 12pt;
	}
	.flexbox-container{
		display: block;
		margin: 5px auto;
		
	}
	.flexbox-container div{
        width: 90%;
        padding: 10px;
		text-align:center;
	}
	.flexbox-container div img{
        width: 25%;
        padding: 10px;
		text-align:center;
	}
	.icono2{
		width: 100% !important;
	}
	.leyenda, h2{
		font-size:14pt;
	}
	
	.leyenda2{
		font-size:11pt;
	}
	.leyenda3 a{
		font-size:9pt;
	}

	.leyenda3 {
		width:60%;
	}
}

@media (max-width: 450px) {  /*para que no se monte ĺogo con iconos*/
	#iconos{
		margin-top:3em;
	}
	.leyenda3 a{
		font-size:7pt;
	}

	.leyenda3 {
		width:65%;
	}
}