/****CSS CODE*****/

*{
margin:0;
padding:0;
font-family:sans-serif;
}


body{
background:white;
}

/********************CSS PARA EL SLIDER*******************/
.main{
width:100%;  /*que porcentaje de la pantalla quiero que ocupe la foto de cabecera*/
margin:0px 0px;
}

.slides{ /*Es el contenedor de todas nuestras imagenes*/
width:100%;
height:400px;
}



.slides img{ /*imagenes del slide*/
width:100%;  /*Con este width va a mantener el 100% del ancho y el alto no lo respetara sino que lo acomodara proporcionalmente*/
height:400px;
}


.slidesjs-pagination{
  background:#424242;
  list-style:none;
  opacity:0.4;
  display:flex; /*a continuacion estoy usando Flexbox para alinear los botones de paginacion del slider en el centro*/
  position:absolute; /*Colocamos el container en el origen que es el margen superior izquierdo*/
  top:350px;   /*bajamos 350px desde el origen*/
  z-index:900;  /*para traer al frente la caja y dejar la foto al fondo*/
  border-radius: 20px;
}


/*.slidesjs-pagination li{
     
}*/

.slidesjs-pagination li a{
display:block;
padding:20px 20px;
color:#FFF;
text-decoration:none;
border-radius:30px;
}


.slidesjs-pagination li a:hover{
background:#000;
}

.slides .active{ /*esto afecta solo a los elementos activos es decir seleccionados*/
background:#000;
}


.slidesjs-navigation{ /*Actua sobre las cajas "Anterior" y "Siguiente" las quito porque no me gustan. asi que display=none*/
display:none;
background:#000000;
color:#fff;
text-decoration:none;
padding:10px 20px;
float:right;
}
/********************FIN CSS SLIDER*******************/





                                                   
/***************Menu de navegacion: PRINCIPAL SENSORES PROYECTOS SOBRE MI *******************************/


.flexContainerMenuNavegacion{ /*Por norma para usar Flexbox necesito un div que contenga a otros elementos tipo <div>*/
  background:#000;             /*color de fondo de la barra de navegacion*/
  width:auto;
  height:70px; /*ancho de la barra de navegacion*/
  display:flex;                      /*para poder empezar a trabajar con Flexbox*/
  align-items:center; /*los elementos de la caja contenedora se sitúan en la linea central */
  justify-content:space-around;  /*elementos equieespaciados con espacio al comienzo y al final*/  
}

nav div div a p{
  font-size:21px;
  color:white;
  padding:0px 0px;
  font-family: "Comic Sans MS",bold, sans-serif;
  font-weight:bold;
}

nav div div a{  /*eliminamos el subrayado por defecto que biene con el link <a> </a>*/
text-decoration:none;
}
              
.elemento1 a p{
width:120px;
height:70px;
padding:0px 0px;
display:flex;
font-family:"Comic Sans MS",bold, sans-serif;
align-items:center; /*los elementos de la caja contenedora se sitúan en la linea central */
justify-content:center;  /*coloca los elementos en el centro de la caja contenedora que en este caso se llama elemento1*/
}

.elemento2 a p{
width:122px;
height:70px;
display:flex;
font-family:"Comic Sans MS",bold, sans-serif;
align-items:center; /*los elementos de la caja contenedora se sitúan en la linea central */
justify-content:center;  /*coloca los elementos centrados dentro de la caja contenedora que en este caso se llama elemento2*/
}

.elemento3 a p{
width:151px;
height:70px;
display:flex;
font-family:"Comic Sans MS",bold, sans-serif;
align-items:center; /*los elementos de la caja contenedora se sitúan en la linea central */
justify-content:center;  /*coloca los elementos centrados dentro de la caja contenedora que en este caso se llama elemento3*/
}

.elemento4 a p{
width:132px;
height:70px;
display:flex;
font-family:"Comic Sans MS",bold, sans-serif;
align-items:center; /*los elementos de la caja contenedora se sitúan en la linea central */
justify-content:center;  /*coloca los elementos centrados dentro de la caja contenedora que en este caso se llama elemento4*/
}


.elemento5 a p{
width:113px;
height:70px;
display:flex;
font-family:"Comic Sans MS",bold, sans-serif;
align-items:center; /*los elementos de la caja contenedora se sitúan en la linea central */
justify-content:center;  /*coloca los elementos centrados dentro de la caja contenedora que en este caso se llama elemento5*/
}

.elemento4 a p{     /*Para la pagina principal no hay HOVER. mientras este en ella aparecera seleccionado*/
font-family:"Comic Sans MS",bold, sans-serif;
background:#ffffff;
color:black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

                /*************EFECTOS HOVER*********/

.elemento1 a p:hover{     /*Efectos al pasar el mouse por el menu de navegacion*/
background:#ffffff;
color:black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

.elemento2 a p:hover{     /*Efectos al pasar el mouse por el menu de navegacion*/
background:#ffffff;
color:black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}


.elemento3 a p:hover{     /*Efectos al pasar el mouse por el menu de navegacion*/
background:#ffffff;
color:black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}


.elemento5 a p:hover{     /*Efectos al pasar el mouse por el menu de navegacion*/
background:#ffffff;
color:black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

/***************FIN Menu de navegacion. PRINCIPAL SENSORES PROYECTOS SOBRE MI *******************************/



.proyectos {

display:flex;

}