/* ESTILOS EQUIPO PAGINA PRINCIPAL INICIO*/
body{
	margin: 0;
}
/*ELEMENTOS COMUNES INICIO*/

	/*LOGO DE FONDO INICIO*/	
	#logociedefondo{
		z-index:-9999;
		opacity:0.2;
		width:100%;		
		overflow:hidden;
		position:fixed;
	}
	/*LOGO DE FONDO FIN*/



	/*ESTILOS CONTENEDOR HEADER INICIO*/
	#cabecera{
		width:100%;
		height:8em;
		border-bottom:solid #000 2px;
		display:flex;
		flex-direction : row;	
		font-family: Minion;	
	}
	/*ESTILOS CONTENEDOR HEADER FIN*/


	/* ESTILOS LOGO CIE INICIO*/
	#capaCie{
		display:flex;		
		width:10%;
		justify-content:center;
	}
	/* ESTILOS LOGO CIE FIN*/


	
	/*ESTILOS LOGO AYUNTAMIENTO INICIO*/
	#capapuerto{
		display:flex;
		width:10%;		
		justify-content:center;
		order:2;
		height:120px;

	}
	#fotos{
		display:flex;
		flex-direction:column;
		justify-content:center;
		width:100%;
	}	
	/*ESTILOS LOGO AYUNTAMIENTO FIN*/

	/*ESTILOS MENU INICIO*/
	#menuCie{		
		display:flex;
		position:relative;
		width:80%;
		justify-content: center;
		align-self: flex-end;
		font-family:minion;
	}	
	.menu{		
		display:flex;	
		justify-content: center;
		width:100%;	
		list-style:none;
		padding-left: 0px;
		font-family:minion;
	}
	.menu > li a{		
		text-decoration: none;
		color:#000;
		font-family:minion;
	}
	.menu > li {
		display:inline-block;	
		padding:0.5em 2em ;		
		border-right: solid #000 2px;
		font-family:minion;
	}
	#contacto {
		border-right-style:none;
	}
	.menu li a:hover{
		color:blue;
	}
	/*ESTILOS MENU FIN*/


	/*RESPONSIVE HEADER*/

	@media(max-width: 400px) {

		#logociedefondo {
			display:none;
		}

		/*ESTILOS CONTENEDOR HEADER INICIO*/
		#cabecera{	
			flex-wrap:wrap;		
			border-bottom: 0;
			height:auto;		
			justify-content:center;
		}
		/*ESTILOS CONTENEDOR HEADER FIN*/

		/*ESTILOS MENU INICIO*/
		#menuCie{
			display:flex;
			flex-direction: column;
			order:3;
			width:80%;
			margin-left:5em;
			
		}
		.menu{
			flex-direction: column;
			width:60%;
			justify-content:center;
		}
		.menu > li {
			display:flex;				
			border-right: 0;
			border-bottom:solid #000 2px;			
			text-align:center;
			padding:1em 0em;
			justify-content:center;
		}
		/*ESTILOS MENU FIN*/

		/* ESTILOS LOGO CIE INICIO*/
		#capaCie{
			display:flex;
			width:50%;
			height:120px;						
			order:1;
			justify-content:center;
		}
		#logocie{
			width:100%;			
		}
		/* ESTILOS LOGO CIE FIN*/

		/*ESTILOS LOGO AYUNTAMIENTO INICIO*/
		#capapuerto{
			display:flex;
			width:50%;
			justify-content:center;
			order:2;
			height:120px;		
		}
		/*ESTILOS LOGO AYUNTAMIENTO FIN*/

	}
	@media(min-width: 400px) and (max-width:1000px) {

		#logociedefondo{
			display:none;
		}


		/*ESTILOS CONTENEDOR HEADER INICIO*/
		#cabecera{	
			flex-wrap:wrap;
			border-bottom: 0;
			height:auto;		
			justify-content:center;
		}
		/*ESTILOS CONTENEDOR HEADER FIN*/

		/*ESTILOS MENU INICIO*/
		#menuCie{
			display:flex;
			flex-direction: column;
			order:3;
			width:75%;
			left:13%;
			
			justify-content:center;
		}
		.menu{
			flex-direction: column;
			width:60%;
			justify-content:center;
		}
		.menu > li {				
			border-right: 0;
			border-bottom:solid #000 2px;			
			text-align:center;
		}
		/*ESTILOS MENU FIN*/

		/* ESTILOS LOGO CIE INICIO*/
		#capaCie{
			display:flex;
			width:50%;
			height:120px;						
			order:1;
			justify-content:center;
		}				
		#capapuerto{
			display:flex;
			width:50%;			
			order:2;
			height:120px;
			justify-content:center;		
		}
		/* ESTILOS LOGO CIE FIN*/
	}
		.contenedorImagenCentro{
			
		}

	@media(min-width: 1001px) and (max-width:1540px) {


		/*ESTILOS CONTENEDOR HEADER INICIO*/
		#cabecera{
			display:flex;			
			border-bottom: 0;
			height:auto;		
			justify-content:center;
		}
		/*ESTILOS CONTENEDOR HEADER FIN*/


		/*ESTILOS MENU INICIO*/
		#menuCie{
			display:flex;
			flex-direction: column;
			order:2;
			width:60%;
			justify-content:center;
			
		}
		.menu{
			display:flex;
			align-self:center;			
			flex-wrap : wrap;
			width:100%;
			padding: 0 3em;			
		}
		.menu > li {				
			border-right: 0;
			border-bottom:solid #000 2px;			
			text-align:center;
		}
		/*ESTILOS MENU FIN*/


		/* ESTILOS LOGO CIE INICIO*/
		#capaCie{
			display:flex;
			width:20%;
			height:120px;						
			order:1;
			justify-content:center;
		}
		/* ESTILOS LOGO CIE FIN*/

		/*ESTILOS LOGO AYUNTAMIENTO INICIO*/
		#capapuerto{
			display:flex;
			width:20%;			
			order:3;
			height:120px;
			justify-content:center;		
		}
	/*ESTILOS LOGO AYUNTAMIENTO FIN*/		

	}

	/*ESTILOS DEL FOOTER INICIO*/

	footer	{
		width: 100%;
		height: 70px;
		background:rgb(229, 229, 229);
		border-top:solid #000 2px;
		bottom: 0;
		text-align:center;
		margin-top:150px;
		
	}
	.textoPiedepagina{
		text-align:center;
		margin-top:-100px;

		}
	.redsocial1{
		margin-right: 40px;
	}

	.redsocial3{
		margin-left: 40px;
	}
	/*ESTILOS DEL FOOTER FIN*/

/*ELEMENTOS COMUNES FIN*/



	/*ESTILOS DE LA PAGINA PRINCIPAL INICIO*/
	#body {
	  	font-family:arial | center;
	}

	#cuerpoprincipal{
		width:100%;
		display:flex;
		flex-direction:row;
		font-family:arial;
	}
	#noticias{
		width:20%;
		text-align: center;
		font-family:arial;
	}
	#contenidoCentral{
		width:60%;
		display: flex;
		flex-direction:column;
		justify-content: flex-start;
		font-family:arial;
	}
	#tituloPrincipal{
		text-align: center;
		font-family:arial;
	}
	#texto{
		text-align: center;
	}
	#imagen{
		width:50%;
		left:30%;
		align-self: center;
	}
	.contactoTelf{
		display:flex;
		flex-direction: column;
		font-family: arial;
		width:100%;
		text-align: center;
		padding-bottom: 3%;
	}
	#telefonoCIE{
		font-size: 24px;
	}
	@media(max-width:750px){
		.centrarmapa{
			width:100%;
			justify-content:flex-start;
			align-self:flex-start;
		}
	}

	 @media (min-width:0\0) {  
		#imagen{
			width:70%;
			display:flex;
			height:50%;
			align-self: center;
		}		
	}
	@media (min-width:0\0) and (max-width:400px){
		#imagen{
			width:80%;
			display:flex;				
			align-self: center;
			height:9.375em;
		}
	}

	
	
	
	#recuadro{
		background-color: #909497;
		height:20em;
		border-radius: 1.5em 1.5em 1.5em 1.5em;
		border: solid 0.2em gray;
		overflow: scroll;
	}
	@media (max-width:1000px){
		#cuerpoprincipal{
			display:flex;
			flex-direction:column;
			justify-content:center;			
		}
		#noticias{
			align-self:center;
			display:flex;
			flex-direction:column;
			order:2;
			width:100%;			
		}
		#noticias > h2{
			font-size: 2em;
		}
		#contenidoCentral{
			display:flex;
			justify-content:center;
			width:100%;
			order:1;
		}
		#recuadro{
			width:80%;
			align-self:center;
		}
	}
	.centrarmapa{
		display: flex;
    	justify-content: center;
		max-width: 100%;
		padding-left::3em;
	}
		
	/*ESTILOS DE LA PAGINA PRINCIPAL FIN*/

	/* ESTILOS CONTACTO INICIO*/
	.contenedorfotos{
		display: flex;
	    width: 100%;
	    justify-content: center;
	}
	.contenedorImagenCentro{
		display: flex;
		justify-content: center;
		flex-direction:row;
		justify-content : space-around;
	}

	.hcentrado{
		display: flex;
		justify-content: center;
		font-family:arial;
		text-align: center;
	}

	#formulario{
		display: flex;
		flex-direction: column;
		justify-content:center;
		width:100%;
		text-align:center;
		font-family:arial;
	}
	
	#formulario input:focus:required:invalid{
		border:2px solid red;
	}
	#formulario input:focus:required:valid{
		border:2px solid green;
	}
	img.is img.os{
		width: 100%;
		margin-left: 10%;
		margin-right: 10%;
	}
	@media (min-width:660px) and (max-width: 1100px){

		.is{
			position:relative;
			content:url(../resources/images/captura.gif);			
		}
		.os{
			position:relative;
			content:url(../resources/images/captura2.gif);
		}

	}
	@media (min-width:440px) and (max-width:659px){
		.is{
			position:relative;
			content:url(../resources/images/capturaP.gif);			
		}
		.os{
			position:relative;
			content:url(../resources/images/captura2P.gif);	
		}

	}
	@media (max-width:440px){
		.is{
			position:relative;
			content:url(../resources/images/capturaPP.gif);			
		}
		.os{
			position:relative;
			content:url(../resources/images/captura2PP.gif);
		}
	}

/*ESTILOS CONTACTO FIN*/


/*ESTILOS GALERIA INICIO*/
	 

		#titulogaleria{
		text-align: center;
		font-family:arial;
		}
		#container{
			width:50%;
		}
		.contenedorFoto{
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin-top: 3em;
		}
		.contenedorAlbum{
			display: flex;
			flex-direction: column;		
			align-content: space-between;
			width: 100%;
		}
		#menugaleria{    
		    -webkit-border-radius:10px;
		    -moz-border-radius:10px;
		    -o-border-radius:10px;
		    border-radius:10px;	  
		    overflow:hidden;
		    padding:10px;
		    width:100%;
		    position:relative;
		    display:flex;
		    justify-content:center;	   
		}

		#logociedefondo{
			z-index:-9999;
			opacity:0.2;
			width:100%;		
			overflow:hidden;
			position:fixed;
		}

		#carousel{
			z-index:90;
		}
		
		
		#menugaleria ul{
		    list-style:none;
		    margin:0 10px 0 10px;
		    padding:0;
		}
		#menugaleria ul li{
		   
		    -webkit-border-radius:5px;
		    -moz-border-radius:5px;
		    -o-border-radius:5px;
		    border-radius:5px;
		    float:left;
		    font-family:Arial, Helvetica, sans-serif;
		    font-size:16px;
		    font-weight:bold;
		    margin-right:10px;
		    text-align:center;
		    text-shadow: 0px 1px 0px #FFF;
		}
		#menugaleria ul li a{
		    color:#999;
		    display:block;
		    padding:10px;
		    text-decoration:none;
		    -webkit-transition: 0.4s linear all;
		    -moz-transition: 0.4s linear all;
		    -o-transition: 0.4s linear all;
		    transition: 0.4s linear all;
		}
		#menugaleria ul li a:hover {
		    color:#000;
		}
		 @media(max-width:767px){

	 	#menugaleria{
	 		display:flex;
	 		justify-content:center;
	 		left:0%;
	 		width:100%;

	 	}

	 	#menugaleria ul li a{
	 		padding:0.5em 0;
	 		margin:0 0;
	 		width:100%;	 		
	 	}	 

	 	.menugaleria{
	 		display:flex;
	 		flex-direction:column;
	 		align-self:center;
	 		width:70%;
	 		padding:0 0;
	 		margin:0 0;
	 		
	 		
	 	}
		.contenedorAlbum{
            display:flex;           
            flex-direction:column;
            width:100%;
            

        }
        .contenedorFoto{
            display: flex;
            flex-direction:column;
            width:90%;
        }
    }

    img.item{
    	width:100%;
    }
	img.active{
		width:100%;
	}
	#imgActiva{
		width:100%;
	}
	/*Migas de pan*/
.migasdepan{
	display:flex;
	flex-direction:row;
	color:dimgrey;
	font-family: "arial";

}
.breadcrumb li{
    display:inline;
    text-decoration:none;
 }
.breadcrumb li a{    
	text-decoration:none;
}
.activo{
	color:blue;
}
/*Fin de migas de pan*/
    

/*ESTILOS GALERIA FIN*/