/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
body, h1, h2, h3{
	font-family: 'Titillium Web', sans-serif;
}
html, body, #header{
	height: 100%
}
.aboutUsTitle{
	color: #333;
	text-align: center;
	text-transform: uppercase;
	text-decoration: underline;
	font-weight: bolder;
	font-size: 50px;
	line-height: 60px;
}
.aboutUsEN{
	font-style: italic;
	color: #333;
	text-align: center;
	text-transform: uppercase;
}
.mainWrapper{
	
}
#header{
	background-image: url(../images/skyline.png) ;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	background-color: white;
}
.logo{
	width: 300px;
	margin: 0 auto;
	position: relative;
	top: 30%;
}
.arrowDown{
	width: 48px;
	height: 90px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	top: 66%
}
#slogan{
	background-color: rgb(249, 56, 56);
    background: rgb(249, 56, 56);
    color: rgba(249, 56, 56);
    height: 30px;
    margin-bottom: 20px;
}
#secondLogo{
	margin-top: 20px;
}
.descripcion{
	padding-top: 40px;
	padding-bottom: 20px;
}
.descripcion p, .descripcion strong{
	text-align: center;
	color: white;
	margin-bottom: 5px;
	font-size: 15px;
}
footer{
	padding-top: 10px;
	padding-bottom: 10px;
}
footer ul{
	margin-bottom: 0px;
	float: left;
}
footer li, .topMenu li{
	display: inline;
	padding-right: 10px;
}
footer a{
	text-decoration: none;
}
footer a:hover{
	color: red;
}
footer span, .topMenu ul{
	float: right;
}
.stickyNav{
	background-color: white;
	position: fixed;
    top: 0px;
    display: block;
    width: 100%;
    z-index: 999;
}
.topMenu{
	padding-top: 10px;
}
.topMenu ul{
	margin-bottom: 10px;
}
.topMenu a{
	color: black;
	text-decoration: none;
}
.topMenu a:hover{
	color: red;
}
hr{
	margin-bottom: 30px;
	margin-top: 30px;
}
.descripcion article{
	line-height: 24px;
}
.spanish{
	margin-top: 40px;
}
.english{
	font-style: italic;
	margin-bottom: 20px;
}
.background01{
	background-image: url(../images/background01.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.background02{
	background-image: url(../images/background01.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
}
.features h1{
	text-align: center;
	font-weight: bolder;
	color: white;
	font-size: 80px;
	line-height: 70px;
	margin-bottom: 10px;
}
.features p{
	text-align: center;
	color: white;
	font-weight: bolder;
	font-size: 25px;
}
.features:hover{
	background-color: rgba(255,255,255,0.6);
	cursor: pointer;
}
.features:hover h1{
	color: rgb(249, 56, 56);
}
.firstMember h3{
	color: white;
	font-weight:bolder;
	font-size: 30px;
	border-bottom: 1px solid white;
	margin-bottom: 20px;
}
.firstMember{
	padding-top: 20px;
	padding-bottom: 20px;
}
.firstMember p{
	color: white;
}
.firstMember ul{
	color: white;
}
.quote{
	text-align: center;
	font-style: italic;
	font-size: 20px;
}
.secondMember{
	text-align: right;
}

.logo-animation {
  -webkit-animation: logo-opacity 6s 1; /* Safari 4+ */
  -moz-animation:    logo-opacity 6s 1; /* Fx 5+ */
  -o-animation:      logo-opacity 6s 1; /* Opera 12+ */
  animation:         logo-opacity 6s 1; /* IE 10+ */
}

@-webkit-keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.arrow-animation {
  -webkit-animation: logo-opacity 5s 1; /* Safari 4+ */
  -moz-animation:    logo-opacity 5s 1; /* Fx 5+ */
  -o-animation:      logo-opacity 5s 1; /* Opera 12+ */
  animation:         logo-opacity 5s 1; /* IE 10+ */
}

@-webkit-keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes logo-opacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}


/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#secondLogo{
			margin-top: 70px;
		}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.features{
			margin-bottom: 20px!important;
		}
		.firstMember p{
			text-align: justify;
		}
		.quote{
			text-align: center!important;
			line-height: 25px;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.features{
			margin-bottom: 20px!important;
		}
		.firstMember p{
			text-align: justify;
		}
		.quote{
			text-align: center!important;
			line-height: 25px;
		}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/