/*****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;
font-family:"Comic Sans MS",bold, sans-serif;
display:flex;
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*/
}

.elemento1 a p{     /*Para la pagina principal no hay HOVER. mientras este en ella aparecera seleccionado*/
background:#ffffff;
color:black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}

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

.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;
}

.elemento4 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 *******************************/






/*********************CSS DEL VIDEO DE LA PAGINA PRINCIPAL*****************/

.containerVideo{
display:flex;
justify-content:center;
padding: 100px 0px;

}

section div iframe {
width:40%;
height:300px;
border-radius: 20px; /*para redondear las esquinas del video*/
box-shadow: 10px 10px #424242;  /*sombreado para el video*/
}
/*******FIN CSS VIDEO******/







/******************CSS PARA EL FOOTER********************/
footer{
  background:#202020;
  display:flex;
  flex-direction:column; /*organizar las cajas hijas en columna*/
  width:100%; 
  color:white;
}

.containerfooter {
  padding:20px;
  display:flex;
  flex-direction:row; /*direccion en la cual se van a organizar nuestras cajas. row, colum,row-reverse,column-reverse*/
  justify-content:space-around; /*Todos los elementos los distribuye entre el ancho del contenedor padre dejando un espacio   	y  lo acomoda proporcionalmente*/
}

.masinformacion{max-width:30%;}
.masinformacion div p{padding:10px 0px; text-align: justify;}

.redessociales{
  max-width:30%;
  display:flex; 
  flex-direction:column;
}


.facebook{padding:10px 0px;display:flex; flex-direction:row;}  /*caja que incluye logo + "Facebook"*/
.icon-facebook{font-size:30px; }
.facebook a p{padding:0px 10px;color:white;}
.facebook a{text-decoration:none;} /*eliminar el subrayado por defecto del enlace*/

.twitter{padding:10px 0px;display:flex; flex-direction:row;} /*caja que incluye logo + "Twitter"*/
.icon-twitter{font-size:30px;}
.twitter a p{padding:0px 10px;color:white;}
.twitter a{text-decoration:none;}


.instagram{padding:10px 0px;display:flex; flex-direction:row;} /*caja que incluye logo + "Instagram"*/
.icon-instagram{font-size:30px;}  /*dimensionar el tamaño del logo*/
.instagram a p{padding:0px 10px;}    /*para alinear el logo*/
.instagram a{text-decoration:none;color:white;} /*eliminar el subrayado por defecto del enlace*/

.informacioncontacto{
  max-width:30%;
}

.direccion{display:flex; flex-direction:row;}
.icon-home3{font-size:30px;}

.movil{display:flex; flex-direction:row;}
.icon-mobile{font-size:30px;}

.correo{padding:0px 5px;display:flex; flex-direction:row;}
.icon-envelope{font-size:30px;}

.datos{padding:8px 0px;}
.movil{padding:20px 0px;}
.correo{padding:0px 5px;}

.direccion p{padding: 8px 6px;}
.movil p{padding:5px 5px;}
.cajatextocorreo p{padding:4px 10px;}


              /****pie del footer****/
.piefooter{
background:#000000;
padding:10px 0px;
width:100%;
display:flex; 
flex-flow:wrap;
justify-content: space-between;   /* Distribuir items uniformemente. el primer item al inicio, el ultimo al final */
}