@import url("https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	width: 100%;
	margin: auto;
	font-size: 13.5pt;
	font-family: 'Yanone Kaffeesatz';
	
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

header {
	border-bottom: 2px solid #2980b9;
	padding: 5px 0;
	width: 100%;
	background-image: url("images/wallheader.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

main {
	width: 60%;
	margin: auto;
	padding: 5px 0;

	display: flex;
	flex: 1;
	flex-flow: column wrap;
}

section { 
	width: 100%;
	padding-bottom: 15px;

	display: flex;
}

section article { 
	flex: 1 1 50%;
}

section aside { 
	flex: 1 1 50%;
	padding-left: 20px;	
}

section aside figure, figcaption { text-align: center;}

footer {
	border-top: 2px solid #2980b9;
	padding: 5px 0;
	width: 100%;
	background-image: url("images/wallheader.png");
    background-repeat: no-repeat;
}

footer .redes { display: none; }

p, a { 
	text-align: justify; 
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	text-decoration: none;
	color: #000;
}

h1 { 
	font-size: 45px;
	font-style: normal;
	font-weight: 400;
	color: #2980b9;	
}

h2 { 
	font-size: 28px;
	font-style: normal;
	font-weight: 400;	
	padding-bottom: 5px;
	margin-bottom: 5px;
	color: #2980b9;	
	border-bottom: 2px solid #2980b9;
}

.wrapper {
	width: 60%;
	margin: auto;

	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.espacio { padding: 10px; }
.redes img { border-radius: 8px; }
.centro {text-align: center;}
.borde { border:1px solid #ccc; padding:2px; background:#eee;}
.doc { padding: 0 30px;}
.home { padding-bottom: 30px;}
.okar {color: #ff5733; }

.menu ul {
	display: flex;	
	list-style: none;
}

.menu a {
	font-size: 23px;
	text-decoration: none;
	padding-right: 15px;
	color: #000;
	font-style: normal;
	font-weight: 350;
}

.menu a:hover {
	color: #ff5733;
	font-style: normal;
	font-weight: 380;
}

.menu ul li .ok { color: #ff5733; }

@media screen and (max-width: 768px){
	.wrapper { width: 95%; display: flex; justify-content: space-around;}
	main { width: 95%; margin:auto;}

	section { display: flex; flex-direction: column;}
	section article, aside { width: 100%; }	
	h1 { font-size: 30px }
	h2 { font-size: 20px; }
	.menu a { font-size: 18px; padding-right: 5px;}
	p { font-size: 18px; }
	header .redes { display: none; }
	header h1, .menu { text-align: center; }
	footer .univer { display: none; }
	footer p { text-align: center; }
	footer .redes { display: block; text-align: center; padding-top: 5px;}
	table td { font-size: 15px; }
}

@media screen and (max-width: 1280px){
	.wrapper { width: 80%; }
	main { width: 80%; margin:auto;}	
	section article, aside { width: 100%; }	
}