@import url("fonts/fontawesome/font-awesome.css");
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic,900,900italic");
@font-face {
	font-family: cera;
	src: url("fonts/cera.otf");
}

/* ==================================================
	Global Styles
================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	text-decoration: none;
	font
	vertical-align: baseline;
	font-family: cera, Arial, Sans;
	text-rendering: optimizeLegibility;
}

html {
	height: 100vh;
	width: 100vw;
	font-size: 16px;
}

body {
	color: #333;
	background: #fff;
}

a, p, h1, h2, h3 {
	color: #333;
	text-decoration: none;
}

h1{
	font-size: 0;
	display: none;
}

h2, h3 {
	font-size: 3rem;
	letter-spacing: -2px;
	font-weight: bolder;
	text-align: center;
}

h2 {
	font-size: 3rem;
	line-height: 3rem;
	margin-top: 3rem !important;
	text-transform: uppercase;
}

h3 {
	font-size: 2.5rem;
	line-height: 2.5rem;
}

p, a {
	font-size: 1.5rem;
	line-height: 1.5rem;
}

/* ==================================================
	General Layout Styles
================================================== */
#footercont {
	position: relative;
	font-size: 18px;
}

#footercont p.backtotop {
	margin: 0 0 40px 0;
}

#footercont p.backtotop a {
	position: relative;
	display: inline-block;
	background: #fff;
	color: #333;
	font-size: 32px;
	line-height: 32px;
	padding: 5px 12px;
	border-radius: 4px;
}

#footercont p.backtotop a:hover {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}

#footercont p.backtotop a:active {
	top: 2px;
}

/* ==================================================
	Responsive Media Queries - Tablets
================================================== */

@media screen and (max-width: 768px) {

	body {
		font-size: 23px;
		line-height: 29px;
	}
}

/* ==================================================
	Responsive Media Queries - Mobiles
================================================== */

@media screen and (max-width: 480px) {	
	body {
		font-size: 21px;
		line-height: 27px;
	}

	a, p {
		font-size: 1rem;
	}
}


/* ==================================================
	SCROLLSPY
================================================== */
[class*=uk-animation-] {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

[data-uk-scrollspy*=uk-animation-] {
	opacity: 0;
}

.uk-animation-fade {
	-webkit-animation-name: uk-fade;
	animation-name: uk-fade;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

@-webkit-keyframes uk-fade {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

@keyframes uk-fade {
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}

/* ==================================================
	OTROS
================================================== */

.flex-centrado {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.flex-vertical {
	flex-direction: column;
}

.flex-around{
	justify-content: space-around;
	flex-wrap: wrap;
}

.posicion-cont {
	width: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}

.posicion-cont img,
.posicion-cont a {
	display: inline-block;
}

.posicion-cont.izquierda{
	text-align: left;
}

.posicion-cont.centro{
	text-align: center;
}

.posicion-cont.derecha{
	text-align: right;
}

.bloque {
	min-height: calc( 25vh - 2.5px);
	width: 100%;
}

.bloque:nth-of-type(even),
.bloque:nth-of-type(even) a,
.bloque:nth-of-type(even) h2,
.bloque:nth-of-type(even) h3,
.bloque:nth-of-type(even) p {
	background: #333;color: #fff;
}

.bloque>iframe{
	min-height: 40vh;
	width: 100%;
}

.negro {
	background: #333 !important;
}

.bloque:first-of-type, .bloque:nth-of-type(2) {
	padding: 2rem;
}

.bloque:first-of-type img {
	max-width: 30%;
}

.bloque:first-of-type * {
	margin:1rem;
}

.bloque:nth-of-type(2) *{
	margin: 0.5rem;
}

.bloque:nth-of-type(2) * *{
	margin: 1rem;
}

.social, .social * {
	height: 2rem;
	width: 2rem;
}

.social {
	margin: 1rem;
}

.powered {
	height: 10px;	
}