/*---------------------------- DAMOS DE ALTA LAS VARIABLES A USAR EN LA WEB ---------------------------*/ 

@import url("https://use.typekit.net/mrf6cig.css"); /*import de adobe - letra brush-script sans-serif*/



/* //////////////////////////////
   CONFIG. COLORES EN RAÍZ
///////////////////////////////*/

:root {
    --color_uno: #ffffff; /*BLANCO*/
	  --color_dos: #1a1a1a; /*NEGRO GRISACEO*/
	    --color_tres: #e5e5e5; /*GRIS CLARO*/
		  --color_cuatro: #f5f5f5; /* GRIS TENUE - BLANCO*/
			--color_cinco: #cacaca; /*GRIS MEDIO*/
				--color_seis: #transparent; /*TRANSPARENTE*/
					--color_siete: #7e7e7e; /*GRIS OSCURO*/
		
}


/* //////////////////////////////
   CONFIG. LETRAS PÁGINA
///////////////////////////////*/
:root {
 --letra_uno: 'Titillium Web'; /*BLANCO*/
	--letra_dos: 'Open Sans';
		--letra_tres: 'brush-script-std';
	
--lmodo_uno: sans-serif;
	--lmodo_dos:	none;
		--lmodo_tres:	none;
}



/*----------------------------------- FIN VARIABLES ----------------------------------------------------*/ 



/* //////////////////////////////
  ELEMENTOS BÁSICOS DE LA WEB
///////////////////////////////*/

* {/* reseteamos la pagina para uqe el navegador no ponga margnes auto*/
	margin: 0px;
	padding: 0px;
}

body {/* añadimos un estilo de fuente web*/	font-family: var(--letra_uno), var(--lmodo_uno);

}

h1 {/* añadimos un estilo para el css para los textos de tipo H1 */
	font-size: 66px;
}

h2 {font-size: 48px;
	margin-bottom: 30px;
}

i { font-size: 45px; color: var(--color_dos); }  	/* a todos los Iconos que estén en un link a */

h3 { font-size: 33px;
	 margin-bottom: 22px; }

h4 { font-size: 22px;
	 margin-bottom: 18px; }

h5 { font-size: 33px; 
	 margin-bottom: 12px;}

p {/* añadimos un estilo para el css para los textos de tipo p */
	font-size: 22px;
	color: var(--color_dos);
	margin-bottom: 10px;
	margin-top: 10px;
	margin: 3px;
	padding: 3px;
}

a:hover {/* quitamos la linea dentro de las fotos, que indica que es un link */
	text-decoration:none;
}

a i {font-size: 22px; color: var(--color_dos); }  	/* a todos los Iconos que estén en un link a */

 .ancla:before {       
  display: block;       
  content: " ";       
  margin-top: -125px;       
  height: 125px;       
  visibility: hidden; 
} 



section {
	/* añadimos un estilo con padding (espacio-margen) para cuando haya un section */

	padding: 10px ; /* descartado su 0 después del 120 para que no lo pegue chungo al lateral*/
}




.text-dark { 
	/* creamos un texto negro*/
		color: var(--color_dos);
}





/* //////////////////////////////
   MARGENER GENERALES PÁGINA
//////////////////////////////*/

 /* creamos unos márgenes estandar para las 3 medidas de la padding de la página. */
.margintop-xs{ margin-top: 15px; }
.margintop-ms{ margin-top: 30px; }
.margintop-lg{ margin-top: 60px; }


/* //////////////////////////////
   CONFIGURACIÓN DE BACKGROUNDS
//////////////////////////////*/

.bg-1 { /* BLANCO */ 
	background-color: var(--color_uno); 
}
.bg-2 { /* NEGRO GRISACEO */
	background-color: var(--color_dos) ; 	/*ponemos el !important porque bootstrap tiene un bgdark por defecto*/
}
.bg-3 { /* GRIS CLARO */
	background-color: var(--color_tres); 
}
.bg-4 { /* GRIS TENUE - BLANCO */ 
	background-color: var(--color_cuatro); 
}
.bg-5 { /* GRIS MEDIO */
	background-color: var(--color_cinco); 
}
.bg-6 { /* TRANSPARENTE */ 
	background-color: var(--color_seis); 
}


.divider { border-bottom: 10px solid var(--color_cuatro); }


/* //////////////////////////////
   BOTONES
//////////////////////////////*/


.btn { 
	/* añadimos una clase para el estilo botón base*/
	font-size: 14px;
	padding: 15px 26px;
	min-width: 160px;
	border-radius: 2px;
	display: inlite-block;
}


.btn-light { 
	/* añadimos una clase para el estilo botón blanco usado en foto-portada (al ir después recoge los valores del anterior mas los añadidos)*/
	background-color: var(--color_uno);
	color: var(--color_dos);
	border: 2px solid var(--color_uno);
}

.btn-dark { 
	/* añadimos una clase para el estilo botón blanco usado en foto-portada (al ir después recoge los valores del anterior mas los añadidos)*/
	background-color: var(--color_dos);
	color: var(--color_uno);
	border: 2px solid var(--color_dos);
	font-size: 20px;

}

.btn-transparent { 
	/* añadimos una clase para el estilo botón blanco usado en foto-portada (al ir después recoge los valores del anterior mas los añadidos)*/
	background-color: var(--color_seis);
	color: var(--color_uno);
	border: 2px solid var(--color_uno);
}

.btn i { 
	/* PARA TODOS LOS ICONOS (i)  DENTRO DE LOS BOTONES (btn ) añadimos una clase para el espacio entre el icono y el texto (como el del boton de portada))*/
		font-size: 14px; margin-left: 10px;
}






/* //////////////////////////////
   NAVBAR ESTILOS
//////////////////////////////*/

.navbar-alt {
	z-index: 15000;
	background-color: var(--color_uno);
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .05);

	-webkit-transition: margin-left .5s;
	-webkit-transition: background-color .5s;
}
.navbar-alt a {font-size:22px;
}



#logo-nav{ 
	/* hacemos una clase de estilo para el logo*/	 
min-width: 80px;
max-width: 100px;
margin-bottom:10px;

}




/*esto permite menu desplegable con hover - hover del padre - los hijos - con display block*/
.dropdown:hover> .dropdown-menu {display: block;}

.dropdown-item {
	font-weight: 400;

	clear: both;
	width: 100%;
	padding: .25rem 1.7rem;
	text-align: inherit;
	white-space: nowrap;
	color: var(--color_siete);
	border: 0;
	background-color: transparent
}


.dropdown-item:hover {
	text-decoration: none;
	color:  var(--color_dos);
	background-color:  var(--color_cuatro);
}

#texto-navbar{
	font-family: var(--letra_tres), var(--lmodo_uno);
	font-size: 40px;
}



/* //////////////
   FOTOPORTADA
//////////////*/

#fotoportada { 
		/* hacemos una clase para la foto grande de portada.*/	 
	background-image: url('images/fotoportada.jpg');
	background-size: cover;
	padding-top:90px;
	min-height: 700px;
	color: var(--color_uno);
/* 		background-attachment:fixed;
			z-index: 0; *//*añadimos estas dos lineas para que todo le pase por encima - zindex-y se quede fijo al scroll - atachment-*/
}


#fotoportada p {
	/* añadimos un estilo para el css para los textos de tipo p en la fotoportada */
	color: var(--color_uno);
	margin-top:240px;
	margin-right:15%;
	font-family: var(--letra_tres), var(--lmodo_uno);
	text-shadow: 2px 2px 5px  var(--color_uno);
	float:right;
	font-size:90px;
	font-style: normal;
	} 


.content-center { 
	max-width: 800px;
	margin: 0 auto 60px auto;
	text-align: center;
}

.content-center h1 { 
	margin-top: 50px ;
}
.content-center h3 { 
	margin-top: 30px ;
}

.full-width {/*con esto le vamos a dar formato automáticamente a la línea que lo asociemos de codigo*/
    width: 100%;
}



/* //////////////
   NOSAFILOSOFIA
//////////////*/

.nosafilosofia-container {
		/* añadimos una clase para la sección de galería, para la parrilla de las fotos. */
	overflow: hidden;/* lo que se salga del container no se va a ver */
	height: 400px;/*coja altura fija de la celda - row de ese tamaño de pixeles*/
	width: 100%;   /*coja todo el ancho de la celda - row */
	background-color: var(--color_uno);  /*color fondo de los divs internos */
	margin: 35px 0;   /* margen de todo el contenedor con el anterior */
	position: relative;
	z-index: 1000; /*posición en cuanto a superposiciones en la página. */
	padding: 40px 20px; /* margenes del contenido que hay dentro del contenedor */
	border: 2px solid var(--color_tres);
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;

}

.nosafilosofia-container i {
	font-size: 45px; color: var(--color_dos);
}



/* //////////////
   NOSOTROS - quen somos
//////////////*/


.nosotros-container {
	/* añadimos una clase para la sección de galería, para la parrilla de las fotos. */
	height: 100%;
position: relative;    /* posicion relativa */
overflow: hidden;
margin: 10px 0; /* margen de 10 arriba y abajo nada lateral */
border-radius: 2px;  /* difuminado de bordes  */
	justify-content: space-between;
	
}

.nosotros-detalleimage {

position: relative;  /* para uqe esté dentro de la imagen y como la otra es relativa, está dentro de la imagen.dentro de la otra es fija dentro de la relativa */
height: 100%;/*coja altura fija de la celda - row de ese tamaño de pixeles*/
width: 100%; /* distancia de la izquierda */
margin: 0px; 
padding: 20px 20px; /* margenes del contenido que hay dentro del contenedor */
z-index: 7000;
}


.nosotros-detalletext {
position: relative;  /* para uqe esté dentro de la imagen y como la otra es relativa, está dentro de la imagen.dentro de la otra es fija dentro de la relativa */
overflow: hidden;/* lo que se salga del container no se va a ver */
height: 100%;/*coja altura fija de la celda - row de ese tamaño de pixeles*/
width: 100%;   /*coja todo el ancho de la celda - row */
margin: 10px;   /* margen de todo el contenedor con el anterior */
z-index: 7000; /*posición en cuanto a superposiciones en la página. */
padding: 0px 10px; /* margenes del contenido que hay dentro del contenedor */
/* background-color: var(--color_cuatro); */
}

.nosotros-detalletext p {
margin-left: 20px;
margin-right: 30px;
margin-bottom: 20px;
font-size: 22px;
color: var(--color_dos);
text-align: justify;
}

.nosotros-detalletext h1 {
	  margin-top: 0px;
		margin-bottom: 10px;
}

	
/* //////////////
   PROXECTOS
//////////////*/

.proxectos-container {
		/* añadimos una clase para la sección de galería, para la parrilla de las fotos. */
    position: relative;    /* posicion relativa */
    overflow: hidden;
    margin: 10px 0; /* margen de 10 arriba y abajo nada lateral */
    border-radius: 2px;  /* difuminado de bordes  */
}

.proxectos-container img {/* es el efecto de la transición para dar a la ampliación de la img y el tiempo que tarda*/
    -moz-transition: all 0.8s; /* tiempo que tarda en hacer esta transicion*/
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.proxectos-container:hover img {/* es la transición "transform" , el tipo de movimiento que da la imagen al ponerse encima*/
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.proxectos-detalle {
		/* añadimos una clase para la sección de galería - detalle, para las fotos. */
    position: absolute;  /* para uqe esté dentro de la imagen y como la otra es relativa, está dentro de la imagen.dentro de la otra es fija dentro de la relativa */
    bottom: 25px;  /* a esa distancia de arriba de la parte de abajo */
    left: 25px;  /* distancia de la izquierda */
    z-index: 7000;
}

.proxectos-detalle a {
    z-index: 7000;
}

.proxectos-detalle h2 {
    margin-bottom: 0px; /* distancia entre h2 y el texto dentro de la foto de proxectos */
    z-index: 7000;
}

.proxectos-detalle p {
	margin-top: 5px;/* distancia entre h2 y el texto dentro de la foto de proxectos */
	margin-bottom: 0px; 
	z-index: 7000;
	/* añadimos un estilo para el css para los textos de tipo p */
	/*font-size: 22px;
	color: #1a1a1a;
	line-height: 1.8px;
	margin-bottom: 30px;
	margin-top: 50px;*/
}

.proxectos-detalle a h2, .proxectos-detalle a p {	/* dentro de proxectos detalle, y dentro de la etiqueta "a"..... esto lo hace para poner las letras en blanco en  las fotos.*/	 
    color: var(--color_uno);
    text-shadow: 0 0 0.15em var(--color_dos), 0 0 0.15em var(--color_dos);	/* */ /*sombreamos el h1 para que sea legible. pendiente el subtexto*/

}






/* //////////////
   CONTACTOS
//////////////*/

.contacto-container {
	overflow: hidden;/* lo que se salga del container no se va a ver */
	height: 300px; /*coja altura fija de la celda - row de ese tamaño de pixeles*/
	width: 100%;   /*coja todo el ancho de la celda - row */
	background-color: var(--color_cuatro);  /*color fondo de los divs internos */
	margin: 35px 0;   /* margen de todo el contenedor con el anterior */
	position: relative;
	z-index: 1000; /*posición en cuanto a superposiciones en la página. */
	padding: 15px 0px; /* margenes del contenido que hay dentro del contenedor */ 
	border: 2px solid #ffffff;
 	justify-content: space-between;
	box-sizing: border-box;
	margin-bottom: 35px;
}

.contacto-container i { 
		/* PARA TODOS LOS ICONOS (i)  Dentro del container de contactos, añadimos un margen entre el icono a la derecha y el txt a la izq. de 10px*/
		 margin-right: 25px;
}

.contacto-container p, .contacto-container h3 { /* formato para los elementos de contacto */
	margin-top: 5px;
    margin-bottom: 5px; 
	margin-right: 0px;
	text-align: center;
}



/* //////////////
   FORMULARIO
//////////////*/

.formulario-container { 
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
	margin-right: 25px;
	margin-left: 25px;

    margin: 10px 0; /* margen de 10 arriba y abajo nada lateral */
    border-radius: 2px;  /* difuminado de bordes  */
}



.formulario-container p { 
	padding: 5px;
	color: var(--color_dos);
	margin-top: 5px;
    margin-bottom: 2px; 
	margin-right: 0px;
	font-size: 12px;
	
}

.formulario-container label { 
	color: var(--color_dos);
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 0px; 
    font-size: 18px;
	text-align: left;
}




/* //////////////
   FOOTER
//////////////*/

footer {
    padding: 30px 0;
    text-align: center;
    color: var(--color_uno);
}

footer a {
    color: var(--color_uno);
}

footer i { font-size: 22px; color: var(--color_uno); }



footer a:hover {
    color: var(--color_uno);
}
footer p {
	/* añadimos un estilo para el css para los textos de tipo p */
	font-size: 15px;
	color: var(--color_uno);
}
	
footer .list-inline, .list-inline-item {
    padding: 10px 15px;
}

footer ul{
       list-style:none;
       }

footer a i {
  /* distancia entre h2 y el texto dentro de la foto de galeria */
	margin-top: 0px;/* distancia entre h2 y el texto dentro de la foto de galeria */
    margin-bottom: 25px; 
    color: var(--color_uno);

}

.logo-footer {
	/* hacemos una clase de estilo para el logo*/	 
min-width: 130px;
max-width: 150px;


}


/* añadimos esta línea para poder usar los iconos fa*/
.fa-bullhorn:before {
    content: "\f0a1";
}
 
.fa {
    /* display: inline-block; */
    font: normal normal normal 20px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}




/*// Extra small devices (portrait phones, less than 576px) - -como se van a comportar estilos de letra h1-p-o la galeria.*/
 @media (max-width: 575.98px) { 
    h1 { font-size: 40px; line-height: normal; }
	h2 { font-size: 32px; line-height: normal; }
	h3 { font-size: 26px; line-height: normal; }
	h4 { font-size: 18px; line-height: normal; }
	h5 { font-size: 10px; line-height: normal; }
	p  { font-size: 18px; line-height: normal; }
	#texto-navbar{ font-size:20px;}
	.texto-nav-item{ font-size:18px;}
    .proxectos-detalle h2 { font-size: 32px; }
	.old_galery-detalle h2 { font-size: 32px; }
	.nosafilosofia-detalle h2 { font-size: 18px; }
	.contacto-container p { font-size: 26px; } 
	.nosotros-detalletext p { font-size: 16px; } 
	.contacto-container h3 { font-size: 26px; }
	footer p { font-size: 12px; }
	#fotoportada p { font-size: 40px; line-height: normal;
	margin-top:240px;
	margin-right:20%;}
	#fotoportada h1 { font-size: 40px; line-height: normal;
	margin-top:240px;
	margin-right:20%;}

.maxtext { font-size: 70px; margin-bottom:15px;		margin-top:325px; 	margin-left:70px; 	 	line-height: normal;}
.mintext { font-size: 26px; margin-bottom:15px; 	margin-top:50px;	margin-left:190px;		line-height: normal;}
}


/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
    h1 { font-size: 40px; line-height: normal; }
	h2 { font-size: 32px; line-height: normal; }
	h3 { font-size: 26px; line-height: normal; }
	h4 { font-size: 18px; line-height: normal; }
	h5 { font-size: 10px; line-height: normal; }
	p  { font-size: 18px; line-height: normal; }
	#texto-navbar{ font-size:36px;}
	.texto-nav-item{ font-size:20px;}
    .proxectos-detalle h2 { font-size: 32px; }
	.old_galery-detalle h2 { font-size: 32px; }
	.nosafilosofia-detalle h2 { font-size: 18px; }
	.contacto-container p { font-size: 26px; } 
	.nosotros-detalletext p { font-size: 16px; } 
	.contacto-container h3 { font-size: 26px; }
	footer p { font-size: 12px; }
	#fotoportada p { font-size: 40px; line-height: normal;
		margin-top:240px;
	margin-right:20%;}
	#fotoportada h1 { font-size: 40px; line-height: normal;
		margin-top:240px;
	margin-right:20%;}
	.navbar-brand {
		margin-left: 0.1rem
	}

.maxtext { font-size: 70px; margin-bottom:15px;		margin-top:325px; 	margin-left:70px; 	 	line-height: normal;}
.mintext { font-size: 26px; margin-bottom:15px; 	margin-top:50px;	margin-left:190px;		line-height: normal;}
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 
	#texto-navbar{ font-size:48px;}
	.texto-nav-item{ font-size:22px;}
    .proxectos-detalle h2 { font-size: 30px;}
	 .old_galery-detalle h2 { font-size: 30px; }
.maxtext { font-size: 70px; margin-bottom:15px;		margin-top:325px; 	margin-left:40px; 	 	line-height: normal;}
.mintext { font-size: 26px; margin-bottom:15px; 	margin-top:50px;	margin-left:90px;		line-height: normal;}
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { }

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { }