@font-face {
  font-family: "DIN Light";
  src: url("font/DIN-Light.ttf");
}

@font-face {
  font-family: "DIN Bold";
  src: url("font/DIN-Bold.ttf");
}

@font-face {
  font-family: "DIN Regular";
  src: url("font/DIN-Regular.ttf");
}

@font-face {
  font-family: "DIN Medium";
  src: url("font/DIN-Medium.ttf");
}

@font-face {
  font-family: "Corporate";
  src: url("font/Corporate A Bold Italic.otf");
}


*{
	font-family: DIN Regular, sans-serif;
	text-decoration: none;
	list-style: none;
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	font-size: 16px;
}

section{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 100vh;
	border: 5px #333 solid;
}

section#portada{
}

section#contraportada{
	background-color: #FF0000;
}

section#contraportada h2{
	color: #fff;
	font-family: 'Corporate';
	font-size: 5rem;
	text-align: center;
	word-wrap: break-word;
}

section#presentacion{
	/* padding: 25px; */
}

section#presentacion div.izq{
	width: 60%;
}
section#presentacion div.der{
	width: 40%;
}

section#presentacion p{
	margin-bottom: 15px;
}

section#presentacion h4, h5{
	text-transform: uppercase;
}

section#presentacion h4{
	color: #ff0000;
	font-size: 2rem;
	font-family: 'DIN Bold';
}

section#presentacion h5{
	color: #333;
	font-size: 1.05rem;
	font-family: 'DIN Bold';
	margin-bottom: 10px;
}

section#presentacion h6{
	color: #333;
	font-size: 1.2rem;
	font-family: 'Corporate';
}

section#n3,section#n32,section#n4,section#n42,
section#n5,section#n52,section#n6,section#n62,
section#n7,section#n72,section#n8,section#n82,
section#n9,section#n92,section#n10,section#n102,
section#n11,section#n112,section#n12,section#n122,
section#n13,section#n132,section#n14,section#n142{
	flex-direction: column;
}

section > div.arriba{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	margin-bottom: 25px;
	padding: 25px;
}

section > div.abajo{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

section > div.arriba, div.abajo{
	color:#fff;
	text-align: center;
}

section > div.arriba h4{
	font-family: 'Corporate';
	font-size: 3rem;
}

section > div.arriba h3{
	font-family: 'DIN Bold';
	font-size: 5rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

section > div.medio{
	margin: 50px 0px;
}

section > div.medio > span{
	color: #fff;
	font-family: 'DIN Bold';
	font-size: 3rem;
	text-transform: uppercase;
	margin-bottom: 15px;
}

section > div.abajo h3{
	font-family: 'DIN Bold';
	font-size: 2rem;
	text-transform: uppercase;
	margin-bottom: 15px;
}

section > div.abajo ul{
	max-width: 90%;
	display: block;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

section div.abajo ul:last-child{
	border-bottom: 0;
}

section > div.abajo ul li.tit{
	font-size: 2.5rem;
	text-transform: uppercase;
}

section > div.abajo ul li{
	font-family: 'DIN Medium';
	font-size: 1.1rem;
	margin-bottom: 10px;
}

section > div.abajo ul li span{
	font-style: italic;
}

section#n3, section#n4, section#n5, section#n6,
section#n7, section#n8, section#n9, section#n10,
section#n11, section#n12, section#n13, section#n14{
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	padding: 100px 0px;
	min-height: 70vh;
}

section#n3{
	background-image: url('img/urbanismo.png');
}

section#n4{
	background-image: url('img/turismo.png');
}

section#n5{
	background-image: url('img/deportes.png');
}

section#n6{
	background-image: url('img/empleo.png');
}

section#n7{
	background-image: url('img/agricultura.png');
}

section#n8{
	background-image: url('img/politicas.png');
}

section#n9{
	background-image: url('img/medioambiente.png');
}

section#n10{
	background-image: url('img/cultura.png');
}

section#n11{
	background-image: url('img/ventas.png');
}

section#n12{
	background-image: url('img/urbanismo-color.png');
}

section#n13{
	background-image: url('img/urbanismo-color.png');
}

section#n14{
	background-image: url('img/urbanismo-color.png');
}


section#n32{
	background-color: #B12830;
}

section#n42{
	background-color: #D17811;
}

section#n52{
	background-color: #0A9ED1;
}

section#n62{
	background-color: #E94E1B;
}

section#n72{
	background-color: #898620;
}

section#n82{
	background-color: #D60B52;
}

section#n92{
	background-color: #0D5126;
}

section#n102{
	background-color: #F39200;
}

section#n112{
	background-color: #00A19A;
}

#cabecera, #footer{
	flex-direction: column;
}

#lista{
	margin: 0;
	padding: 0;
}

#presentacion div.der{
	background-image: url('img/SandraGarcia.png');
	background-repeat: no-repeat;
	background-position: 65% center;
	background-attachment: scroll;
	/* padding: 0px 99px; */
	min-height: 100vh;
}

#cabecera img, #portada img, #footer img, #lista img, #final img, #presentacion img{
	/* display: block; */
	max-width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
}

#cabecera h1, #footer h1{
	text-align: center;
	margin-bottom: 10px;
}

div.redes{
	margin: 25px 0px;
}

a{
	color: #ff0000;
	font-weight: bold;
}

a:hover{
	color: rgba(255,0,0,0.8);
}

/*RESPONSIVE*/
@media (max-width:1281px) { 
/* hi-res laptops and desktops */ 

}

@media (max-width:1025px) { 
/* big landscape tablets, laptops, and desktops */ 

}

@media (max-width:961px)  { 
/* tablet, landscape iPad, lo-res laptops ands desktops */
	section > div.medio {
		text-align: center;
	} 

	section > div.medio span {
		font-size: 2.2rem;
	} 

	#lista, #final, #presentacion, #portada{
		min-height: auto;
	}

	#lista div, #final div, #presentacion div, #portada div{
		display: flex;
	}

	#lista img {
		margin-bottom: 0px;
	}

	section#contraportada h2 {
	    font-size: 3rem;
	}
}

@media (max-width:641px)  { 
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 

}

@media (max-width:481px)  { 
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 

}

@media (max-width: 450px)  { 
/* smartphones, iPhone, portrait 480x320 phones */ 

	section > div.abajo ul {
		max-width: 100%;
		padding: 0px 10px;
	}

	section > div.abajo ul li{
		font-size: 1rem;
	}

	section > div.abajo ul li.tit {
    	font-size: 1.75rem;
	}

	section#contraportada h2 {
		font-size: 3rem;
	}
	section > div.arriba h4{
		font-size: 1.5rem;
	}

	section > div.arriba h3{
		font-size: 2.5rem;
		letter-spacing: 0rem;
	}

	section > div.medio > span {
		display: block;
		font-size: 2rem;
		margin: 0;
		width: 100%;
	}

	section > div.medio {
		margin: 50px 0px 50px 0px;
		text-align: center;
		width: 100%;
	}

	#lista, #final, #presentacion, #portada{
		min-height: auto;
	}

	#lista div, #final div, #presentacion div, #portada div{
		display: flex;
	}

	#lista img {
		margin-bottom: 0px;
	}
}