@font-face {
  font-family: 'futura';
  src: url(../assets/fonts/Futura.ttf);
  }

@font-face {
  font-family: 'rockwell';
  src: url(../assets/fonts/RockwellStd.otf);
  }

@font-face {
  font-family: 'futuraMedium';
  src: url(../assets/fonts/Futura\ Medium.otf);
  }

 
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');


/*Reiniciamos los estilos de la página*/
*{
    margin:0px;
    padding:0px;
}

/******************************************/
/*******************Global*****************/
/******************************************/



a{
    text-decoration: none;
    color: white;
}

img{
    width: 66%;
    border-radius: 8px;    
}


/*FlexBox*/
.flexi{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}


/*Columna de la izquierda*/
.flex1{
    /* background-color: pink; */
    flex-basis: 45%;
    padding:0.5%;
}


/*Columna de la derecha*/
.flex2{
    /* background-color: yellow; */
    flex-basis: 45%;
    padding:0.5%;
}


/*Contenido en Módulos con height 98%*/
.contain{
    width: 98%;
    margin:0 auto;
}


/******************************************/
/*******************M1*********************/
/******************************************/


/*Cabecera de la web con título y selección de idioma*/
.M1{
    background-color:#5b5d64;
    width: 100%;
    height: 15.5%;/*19*/
    position:fixed; 
    top:0;   
    z-index:1;  
    /*transition*/
    /* transition: all 0.6s ease-in; */
    transition: all 0.2s ease-out;
   
}

/*Título*/
.title{
    margin-top:3%; /*5.4*/
    /* transition: all 0.6s ease-in; */
    transition: all 0.2s ease-out;

}

.title a{
    margin-left:12.9vw;
}

.title a:hover{
	color:#d1d1d3;
}

.title h1{
    font-weight:lighter;
    font-size: 2.4vw;
    font-family: futura, sans-serif;
}



/*Language selector*/

.language{
   
    transition: all 0.2s ease-out;
     
}

.language button:hover{
	color:#d1d1d3;
}
.language button{
    /* text-decoration: none; */
    color:white;
    margin-right: 12.9vw;
    font-size: 1vw;
    background-color: transparent;
    border: none;
    font-family: futura, sans-serif;  
    padding-top: 10%;
}
.language button:focus{
    outline: none;
}
.language button:hover{
    cursor: pointer; 
}

.language h2{
    text-align: right;
    font-weight:lighter;
   
 
}


/*Header Small*/
.headerSmall{
    position:fixed;
    height: 10.8%;
    z-index: 1;
}

.headerSmall .title{
margin-top:0.7%;
}

.headerSmall .language {
margin-top:-2.3%;
}

.headerSmall + .M2{
     padding-top: 0%;
}


/******************************************/
/*******************M2*********************/
/******************************************/


/*Subheader Design Information*/
.M2{
    width: 98.3%;
    background-color: #f8c426;
    height: 17.9vw;
    margin:0 auto;   
    margin-top:15.5vh;
    display:flex;
    align-items: center;
}


/*Design Text*/
.textDesign{
    font-size: 1.5vw;
    font-family: rockwell,serif;
    font-weight: 500;
    color:#5B5C64;
    border-left:4px solid #5B5C64;
    padding-bottom:0px;
    margin-left:18px;
}

.textDesign p{
    padding-left:25px;
}


/******************************************/
/*******************M3*********************/
/******************************************/

/*Images*/
.M3{
    background-color: #EDE9E5;
    height: 100%;
    width: 98.3%;
    margin:1% auto; /* 19 px*/
    padding-top: 4.2vw;
    padding-bottom: 4.2vw;
}

.M3 a{
    width: 66%;
    margin-bottom: -0.23vw;
}

.M3 img{
    width: 100%;
}

.M3 .flex1{
    /* background-color: pink; */
    flex-basis: 49%;
    padding:0.5%;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.M3 .flex2{
    /* background-color: yellow; */
    flex-basis: 49%;
    padding: 0.5%;
    display: flex;
    justify-content: flex-start;
}
/******************************************/
/*******************M4*********************/
/******************************************/


/*Profile*/
.M4{
    width: 98.3%;
    background-color: #f8c426;
    height: 100%;
    margin:0 auto;
}


/*Profile Image*/

.M4 .imgContainer{
    width: 100%;
}

.profileImg img {
    z-index: 0;
    margin-top: 4.4vw;
    margin-bottom: 4.4vw;
    filter: contrast(0.5);
    width: 66%;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
}

.M4 .flex1{
    /* background-color: pink; */
    flex-basis: 49%;
    padding:0.5%;
    display: flex;
    justify-content: flex-end;
}

.M4 .flex2{
    /* background-color: yellow; */
    flex-basis: 49%;
    padding: 0.5%;
    display: flex;
    justify-content: flex-start;
}

/*Profile Text*/
.textProfile{
    font-size:1em;
    color:#5B5C64;
    margin:auto 0; 
}

.textProfile p{
    width: 100%;
    font-size: 0.9vw;
    font-weight: 900;
    font-family: 'futuraRegular','Roboto', sans-serif;
    letter-spacing: 1px;
    margin-left:37px;
}

.esloqueves{
    font-family: sans-serif;
    font-weight: 100;
    letter-spacing: 0px;
}

.speak{
    text-decoration: underline ;
    font-style: italic;
    color:#5B5C64;
    font-family: Rockwell;
    font-size: 1.3vw;

}

.sphover:hover a{
	color:#7f8087;
}

.sphover:hover .interrogation{
	color:#7f8087;
	}
	
.speak a{
    text-decoration: none;
    color:#5B5C64;
}



.interrogation{
    text-decoration: none!important;
    font-style: italic;
    color:#5B5C64;
    font-family: Rockwell;
    font-size: 1.3vw;
    
}
/******************************************/
/*******************M5*********************/
/******************************************/


/*Footer*/
.M5{
    background-color: #5b5d64;
    height: 100%;
    width: 100%;
}

.textFooter img{
    width: 100%;
}


/*Footer's text*/
.textFooterLeft{
    color:white;
    font-weight: 500;
    font-size: 1.1vw;
    font-family: 'Roboto','Futura', sans-serif;

}

.mail a{
	color:white;
}

.mail a:hover{
color:#d1d1d3;
}

.textFooter{
    color:white;
    font-weight: normal;
    font-size: 1vw;
    font-family: 'futura','Roboto', sans-serif;
    text-align: right;
    /* margin-top: auto; */
    
    
}

.textFooterLeft p{
    margin-left:12.9vw;
    padding:30px 0;
    line-height: 1.3vw;
}


.textFooter p {
    margin-right: 13.3vw;
    padding:30px 0;
}

.icon{
    margin-top:4px;
    border-radius: 0px;
    width:3.5%;
}



.top{
    transform: rotate(270deg);
    position: absolute;
    right: 5%;
    margin-top: 1%;
  
}

/*Language*/
.hide{
    display:none!important; 
}

.innactive {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
 
}

.copy{
	font-size:0.6vw;
}