@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,800|Lora:400italic|Playfair+Display:700);
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

/* UNRELATED to tooltips */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background: #ededed;
}
main {
  flex: 1 1 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
aside {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #49b293;
  color: #fff;
  padding: 1em;
}
main div {
  text-align: center;
  color: #353539;
}
main span {
  padding: .5em 1em;
  margin: .5em;
  display: inline-block;
  background: #dedede;
}

aside a {
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  padding: .4em 1em;
}

#fotocomputador{display: block}
#fotocelular{display: none}

/* Add a black background color to the top navigation */
.topnav {
  background-color: #FF7600;
  overflow: hidden;
display: none;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
.autores{color: #52006A;
font-size: 0.8em;
font-family: 'Source Serif Pro', serif; }
#tituloinicio {top:75%;}
#tituloinicio h1 {font-size: 3em;
text-align: center;
text-shadow: 3px 3px 3px #52006A;}
#titulouno {top:75%;}
#titulouno h1 {font-size: 2.4em;
text-align: center;
text-shadow: 3px 3px 3px #52006A;}
h3 {color: #52006A}
.pie{width:100%;
text-align: center;
margin-bottom: -140px}
.pie span {color:#CD113B; }
.piedos{width:100%;
text-align: center;
margin-bottom: -140px}
.piedos span {color:#CD113B; }
.grafico {width: 100%;
margin-bottom: 30px}
.grafico img {width: 100%}
#logos{margin-left: 99px}
#logouno {width:218px}
#logouno img {margin-top: 11px;
width:191px;
margin-left: -8px}
#logodos {width: 200px;
margin-left: -7px;}
#logodos img{width: 229px;
margin-left: -10px;
margin-top: -4px}
#logotres {width: 150px;
margin-left: 40px}
#logotres img {width: 150px;
margin-left: 7px;
margin-top: -21px}
#logocuatro {width: 150px;
margin-left: -30px}
#logocuatro img {width: 150px;
margin-left: 73px;
margin-top: -30px}
#logocinco {margin-top: 0px;
margin-left: 0px;
width: 133px}
#logocinco img {margin-top: 33px;
margin-left: 112px;
width: 133px}
.logo {width: 100%;
float: left;
margin-right: 0px;
margin-left: 70px;
margin-top: 50px;}
.logo img {width: 130px}
h4 {color: #52006A;
text-align: center;
font-size: 2em;
margin-bottom: 40px;
display: block}
#menuinferior {width: 100%;
max-width: 1000px;
margin: 0 auto;
display: block;
	margin-top: -100px;
	margin-bottom: 70px;
	height: 300px;
    margin-left: 230px}

.uno {position: relative;
    width: 400px;
    float: left;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
	margin-right: 10px;
	margin-left: 18px;
    margin-top: 30px}

.uno img {display: block;
    width: 400px;}

#fotohover1 {position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url("../img/4miblancoynegro.jpg");
    opacity: 0;
    transition: .5s;
    background-size: cover;}

.uno:hover #fotohover1{
	opacity:1;}

.textohover {font-size: 1.2em;
    position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    line-height: 1;
    text-align: center;
    width: 300px;
    color: #FFFFFF;
    text-shadow: 3px 3px 3px black }

#fotohover2 {position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-image: url("../img/5miblancoynegro.jpg");
    opacity: 0;
    transition: .5s;
    background-size: cover;}

.uno:hover #fotohover2{
	opacity:1;}

#fotohover3 {position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    transition: .5s;
    background-size: cover;}

.uno:hover #fotohover3{
	opacity:1;}

#fotohover4 {position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    opacity: 0;
    transition: .5s;
    background-size: cover;}

.uno:hover #fotohover4{
	opacity:1;}

footer {background-color:#FF7600;
height: 200px;
width: 100%}

#logoscomputador {text-align: center;}
#logoscomputador img {margin-top: 30px}
#logoscelular{display: none}

#menu {width: 100%;
max-width: 1000px;
margin: 0 auto;}

body {
	background: #fff;
	color: #2a2a2a;
	font-weight: 400;
	font-size: 22px;
	line-height: 2;
	font-family: 'Akshar', sans-serif;;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	
}

.demo-7 {
	background: #f5f5f5;
}

.demo-5 {
	background: #f8dab4;
	color: #5c554c;
}

.demo-6 {
	background: #f1f1f1;
}

.demo-1 {
	background: #43434b;
}

a {
	outline: none;
	color: #FFA900;
	text-decoration: none;
}

a:hover, a:focus {
	color: #52006A;
}

.demo-4 a {
	color: #43939d;
}

.demo-4 a:hover,
.demo-4 a:focus {
	color: #7b8d92;
}

.demo-8 a {
	color: #cf7000;
}

.demo-8 a:hover,
.demo-8 a:focus {
	color: #cf7000;
}

/* To Navigation Style */
.codrops-top {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 0.6em;
	padding: 0 32px;
	letter-spacing: 1px;
	z-index: 10000;
}

.codrops-top a {
	display: inline-block;
	color: #fff;
	text-decoration: none;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	display: block;
	float: left;
}

.codrops-icon:before {
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	text-align: center;
	speak: none;
	margin: 0 0.55em 0 0;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

.codrops-demos {
	padding: 0 0 1em;
	position: relative;
}

.codrops-demos a {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 0.6em;
	letter-spacing: 1px;
	padding: 0.3em 0;
	display: inline-block;
	opacity: 0.7;
	margin: 0 0.5em;
	white-space: nowrap;
	color: #cf4a5c;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
	opacity: 1;
	color: #69606b;
}

.codrops-demos a.current-demo {
	border-bottom: 3px solid #69606b;
}

.related {
	padding: 3em 0;
	text-align: center;
	font-size: 1.5em;
	position: relative;
}

.demo-5 .related {
	width: 60%;
	margin-left: 40%;
}

@media screen and (max-width: 40em) {

	.codrops-icon span {
		display: none;
	}

	.related {
		font-size: 80%;
	}

}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
	.topnav {
	width: 100%;
	z-index: 30000;
	top:0;
	left:0;
	position: fixed;
	display: block}
  .topnav.responsive {position: fixed;}
  .topnav.responsive a.icon {
    position: fixed;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
	.piedos{width:100%;
text-align: center;
margin-bottom: -97px}
.piedos span {color:#CD113B;
	font-size: 1.8em;
	line-height: 0.5}
	#titulouno {top:63%;}
	#menuinferior {display: none}
	#logos{margin-left: 0px}
#logouno {width:100%;
	text-align: center}
#logouno img {margin-top: 70px;
width:80%;
margin-left: 0px}
#logodos {width: 100%;
margin-left: 0px;
	text-align: center}
#logodos img{width: 95%;
margin-left: 0px;
margin-top: -21px}
#logotres {width: 100%;
margin-left: 0px;
	text-align: center}
#logotres img {width: 80%;
margin-left: 0px;
margin-top: -20px}
#logocuatro {width: 100%;
margin-left: 0px;
	text-align: center}
#logocuatro img {width: 80%;
margin-left: 0px;
margin-top: -49px}
#logocinco {margin-top: 0px;
margin-left: 0px;
	text-align: center;
	width: 98%}
#logocinco img {margin-top: 37px;
margin-left: 0px;
width: 94%}
	#logoseis {margin-top: 0px;
margin-left: 0px;
	text-align: center;
	width: 98%}
#logoseis img {margin-top: 37px;
margin-left: 0px;
width: 94%}
	#logosiete {margin-top: 0px;
margin-left: 0px;
	text-align: center;
	width: 98%}
#logosiete img {margin-top: 37px;
margin-left: 0px;
width: 94%}
.logo {width: 100%;
float: none;
margin-right: 0px;
margin-left: 0px;
margin-top: 50px;}
.logo img {width: 50px}
.pie{margin-bottom: -74px;
	text-align: center;
	width: 100%;
	line-height: 1.3em;}
.pie span {color:#CD113B;
	font-size: 0.9em;
	margin-left: 10px;
	margin-right: 10px;}
	.multimedia {width: 100%;
	height: 134px;
	margin-bottom: 0px}
	.multimedia iframe{width: 100%;
	height: 134px}
	#titulouno h1 {font-size: 3.3em;
text-align: center;
text-shadow: 3px 3px 3px #52006A;}
h4{display: none}
footer {height: 2370px}
	#logoscelular{display: block}
	#logoscomputador {display:none}
	#fotocomputador{display: none}
#fotocelular{display: block}
}