/* ============================================================
  COMPONENTS
============================================================ */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

@font-face {
  font-family: 'KGLoveSomebody';
  src: url('../fonts/KGLoveSomebody-regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/KGLoveSomebody-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/KGLoveSomebody-regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/KGLoveSomebody-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/KGLoveSomebody-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;	   
}
@font-face {
	font-family: 'YanoneKaffeesatzRegular';
	src: url('../fonts/yanonekaffeesatz-regular-webfont.eot');
	src: url('../fonts/yanonekaffeesatz-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/yanonekaffeesatz-regular-webfont.woff') format('woff'),
	url('../fonts/yanonekaffeesatz-regular-webfont.ttf') format('truetype'),
	url('../fonts/yanonekaffeesatz-regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Header styles and animations */
.ds-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 50;
	font-family: 'Lato', Arial, sans-serif;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.ds-header-perspective {
	width: 100%;
	height: 100%;
	position: relative;
	-webkit-perspective: 1100px;
	-moz-perspective: 1100px;
	perspective: 1100px;
	-webkit-perspective-origin: 50% 0;
	-moz-perspective-origin: 50% 0;
	perspective-origin: 50% 0;
}

.ds-header-perspective > div {
	z-index: 2;
	text-align: left;
	padding: 0 1%; /* posicion del logo */
	height: 50%;
	width: 100%;
    margin: 0 auto; 
	position: relative;
	text-align: justify;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
	overflow: hidden;
}

.ds-header-front {
	z-index: 1;
	background-image: none;
    background-repeat: repeat;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

.ds-header-front #manitos {
	display: none;
	background:url('../img/menu_ds_logo_manitos_grupal.png'); 
	width:750px;
	height: 108px;	
}

/* Sub-Menu */
.ds-header-perspective .ds-header-qsomos {
	z-index: 1;	
	background: #8BC9A4;
    height: 20%;
    text-align: right;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	position: absolute;
	top: 0;
    opacity: 0.9;
}

.ds-header-perspective .ds-header-colaborar {
	background: #FE8274; /* #90C55E */
    height: 20%;
    text-align: right;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	z-index: 1;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	position: absolute;
	top: 0;
    opacity: 0.9;
}

/* Justify inline-block elements (h1 on left side, nav on right) */
.ds-header-perspective > div::after {
    content: '';
    display: inline-block;
    width: 100%;
}

/* Text styling */
.ds-header h1,
.ds-header h1::before,
.ds-header h1 span,
.ds-header nav,
.ds-header nav::before {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.ds-header h1 {
	font-weight: 300;
	font-size: 3.2em;
	margin: 0; /* era 0 */
	padding: 0 1em 0 0;
	color: #2d383f;
	cursor: default;
	height: 100%;
	z-index: 1;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.ds-header h1::before,
.ds-header nav::before {
	content: '';
	height: 100%;
}

.ds-header h1::after {
	content: '';
	width: 100px;
	height: 96px;
	background: #fff;
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	cursor: pointer;
	box-shadow: inset 0 8px #2d383f, inset 0 16px #fff, inset 0 24px #2d383f, inset 0 32px #fff, inset 0 40px #2d383f, inset 0 48px #fff, inset 0 56px #2d383f;
	opacity: 0;
	border: 20px solid #fff;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.8s;
}

.ds-header nav {
	height: 100%;
}

/* Botonera Principal */
.ds-header nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
    padding: 0.2em 0.6em;
    margin: 0 0.4em 0;
    font-size: 1.0em;
    cursor: pointer;
    color: #fff;
    background-color: #8BC9A4; 
    outline: none;
    text-decoration: none;
	border-radius: 5px;
    /*border: 2px solid #e74c3c;  agregado para que aplique a todos */
}

/* Botonera Principal -over */
.ds-header nav a:hover {
	color: #fff;
    background-color: #F1834E;
}

.ds-header nav a:last-child {
    margin-right: 0;
}

.ds-header .ds-header-front nav a:first-child, 
.ds-header .ds-header-front nav a:last-child {
/*	border: 2px solid #e74c3c; */
}

.ds-header .ds-header-front nav a:first-child:hover,
.ds-header .ds-header-front nav a:last-child:hover {
/*	border: 2px solid #bc3c2f; */
}

/* Botonera secundaria */
.ds-header-qsomos nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
    padding: 0.2em 0.6em;
    margin: 0 0.4em 0;
    font-size: 1.0em;
    cursor: pointer;
    color: #fff;
    background-color: #8BC9A4; /*background-color: #6666CC; */
    outline: none;
    text-decoration: none;
    /*border: 2px solid #e74c3c;  agregado para que aplique a todos */
}

/* Botonera secundaria -over */
.ds-header-qsomos nav a:hover {
	color: #F1834E;
    background-color: #fff;
}

.ds-header-colaborar nav a {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
    padding: 0.2em 0.6em;
    margin: 0 0.4em 0;
    font-size: 1.0em;
    cursor: pointer;
    color: #fff;
    background-color: #FE8274; /*background-color: #8BC9A4; */
    outline: none;
    text-decoration: none;
    /*border: 2px solid #e74c3c;  agregado para que aplique a todos */
}

/* Botonera secundaria -over */
.ds-header-colaborar nav a:hover {
	color: #F1834E;
    background-color: #fff;
}

/* Individual states */
.ds-header-ppal {
	height: 420px;
}

.ds-header-small {
	height: 80px; /* 220px; */
}

.ds-header-hide {
	height: 220px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.ds-header-show {
	height: 220px;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

.ds-header-show1 {
	height: 220px;
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	transform: translateY(0%);
}

.ds-header-show .ds-header-qsomos {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 0%;
}

.ds-header-show1 .ds-header-colaborar {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 0%;
}

.ds-header-subshow {
	height: 220px;
}

.ds-header-subshow1 {
	height: 220px;
}

.ds-header-subshow .ds-header-qsomos {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
}

.ds-header-subshow1 .ds-header-colaborar {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
}

.ds-header-shrink {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ds-header-shrink .ds-header-qsomos {
	opacity: 0;
}

.ds-header-shrink .ds-header-colaborar {
	opacity: 0;
}

.ds-header-rotate {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ds-header-rotate .ds-header-front {
	-webkit-transform: translateY(-100%) rotateX(90deg);
	-moz-transform: translateY(-100%) rotateX(90deg);
	transform: translateY(-100%) rotateX(90deg);
}

.ds-header-rotate .ds-header-qsomos {
	top: 50%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: rotateX(0deg) translateY(-100%);
	-moz-transform: rotateX(0deg) translateY(-100%);
	transform: rotateX(0deg) translateY(-100%);
}

.ds-header-rotate .ds-header-colaborar {
	top: 50%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: rotateX(0deg) translateY(-100%);
	-moz-transform: rotateX(0deg) translateY(-100%);
	transform: rotateX(0deg) translateY(-100%);
}

.ds-header-rotateBack {
	height: 220px;
	top: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.ds-header-rotateBack .ds-header-front {
	-webkit-transform: translateY(0%) rotateX(0deg);
	-moz-transform: translateY(0%) rotateX(0deg);
	transform: translateY(0%) rotateX(0deg);
}

.ds-header-rotateBack .ds-header-qsomos {
	top: 50%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

.ds-header-rotateBack .ds-header-colaborar {
	top: 50%;
	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	transition: transform 0.5s;
	-webkit-transform: rotateX(-90deg);
	-moz-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
}

.ds-header-color {
	height: 420px;
}

.ds-header-color .ds-header-front,
.ds-header-color .ds-header-qsomos {
	background: #f3796c;
}

.ds-header-color .ds-header-colaborar {
	background: #f3796c;
}

.ds-header-color h1,
.ds-header-color nav a {
	color: #fff;
}

.ds-header-box {
	height: 192px;
	width: 100px;
	top: 1px;
	left: 0px;
}

.ds-header-box h1 {
	padding-left: 150px;
}

.ds-header-box h1,
.ds-header-box nav a {
	color: transparent;
}

.ds-header-box h1:after {
	opacity: 1;
}

.ds-header-box nav {
	opacity: 0;
}

.ds-header-fullscreen {
	height: 100%;
	opacity: 0.9;
}

.ds-header-fullscreen .ds-header-front {
	height: 100%;
}

.ds-header-fullscreen .ds-header-qsomos {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
	background: #f3796c;
}

.ds-header-fullscreen .ds-header-colaborar {
	opacity: 0;
	-webkit-transition: top 0.5s, opacity 0s 0.5s;
	-moz-transition: top 0.5s, opacity 0s 0.5s;
	transition: top 0.5s, opacity 0s 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
	background: #f3796c;
}

.ds-header-subfullscreen {
	height: 100%;
	opacity: 0.9;
}

.ds-header-subfullscreen .ds-header-qsomos {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
	background: #f3796c;
}

.ds-header-subfullscreen .ds-header-qsomos nav a {
	color: #fff;
}

.ds-header-subfullscreen .ds-header-colaborar {
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
	transition: top 0.5s;
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	top: 50%;
	background: #f3796c;
}

.ds-header-subfullscreen .ds-header-colaborar nav a {
	color: #fff;
}

/* @media queries for mobile adaption 65em=1024px | 60em=960px | 48em=768px | 30em=480px
Where: 
 1- [max-device-width: 1024px] -> tablets in landscape mode and smaller/older monitors 
 2- [max-device-width: 768px]  -> tablets in portrait mode
 3- [max-device-width: 480px]  -> smartphone
*/
/*@media screen and (max-width: 65em) { 1024px 
	body {
		font-size: 85%;
	}
} 

@media screen and (max-width: 60em) {  960px 

	.ds-header-perspective > div,
	.ds-header nav {
		text-align: center;
	}

	.ds-header h1 {
		padding: 10px 0;
		height: 60%;
	}

	.ds-header .ds-header-qsomos nav {
		padding: 40px 0px;
	}

    .ds-header .ds-header-colaborar nav {
		padding: 40px 0px;
	}
    
	.ds-header nav {
		display: block;
		height: auto;
	}

}

@media screen and (max-width: 38em) {  608px 
	sectionC {
		font-size: 1.3em;
	} 

	.ds-header h1 {
		font-size: 2em;
	}

	.ds-header nav {
		font-size: 60%;
	}
}
*/
/* ============================================================
  STYLE
============================================================ */

section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "KGLoveSomebody", Roboto Slab, serif;
  font-size: 42px; 
  text-align: center;
  background-image: url("../img/cartel_m.png");  
  background-position: 53% 70%;    
  background-repeat: no-repeat;    
  background-size: 273px 124px;
  padding: 1em; 
}

section.module h3 {
  margin-bottom: 40px;
  font-family: "KGLoveSomebody", Roboto Slab, serif;
  font-size: 35px; 
  text-align: center;
  background-image: url("../img/cartel_m.png");  
  background-position: 60% 70%;    
  background-repeat: no-repeat;    
  background-size: 460px 148px;
  padding: 2em; 
}

section.module p {					/* Valor dependientes de @media all and (min-width: 600px) mas abajo*/
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
  line-height: 200%;
}
section.module p:last-child {
  margin-bottom: 0;  
}

section.module.content {    
  padding: 40px 0;    
}

section.module.welcome {      
  margin-top: 0px;    
  padding: 80px 0;       
  background-attachment:fixed;
  background-color: #80C29A; 
  color: #fff;    
  font-family: 'KGLoveSomebody', Century Gothic, serif;
  font-size: 30px;
  text-align: center;
}

section.module.quienes_somos {      
  margin-top: 0px;    
  padding: 135px 0;       
  background-attachment:fixed;
  background-color: #80C29A; 
  color: #fff;    
  font-family: 'KGLoveSomebody', Century Gothic, serif;
  font-size: 30px;
  text-align: center;
}

section.module.que_hacemos{
  margin-top: 0px;      
  padding: 100px 40px; 
  background-image: url("../img/ds_city_g.png");   
  background-attachment:fixed;
  background-position: 50% 0%;    
  background-repeat: no-repeat;     
  background-color: #A2B6F8;
  color: #fff;
  font-family: 'KGLoveSomebody', Century Gothic, serif;  
  font-size: 30px;
  text-align: center;  
}

section.module.nuestros_peques {
  margin-top: 0px;      
  padding: 100px 40px; 
  background-image: url("../img/pirata.png"); 
  background-attachment:fixed;    
  background-position: 50% 90%;
  background-repeat: no-repeat;  
  background-color: #F4F46C;  
  color: #000;    
  font-family: 'KGLoveSomebody', Century Gothic, serif;  
  font-size: 30px;
  text-align: center;  
}

section.module.como_sumarte {
  margin-top: 0px;      
  padding: 40px 0; 
  background-position: -8% 40%;
  background-repeat: no-repeat;  
  background-color: #FE6656;
  color: #fff;    
  font-family: 'KGLoveSomebody', Century Gothic, serif;  
  font-size: 30px;
  text-align: center; 
}

section.module.como_colaborar {
  margin-top: 0px;      
  padding: 120px 40px; 
  background-position: -8% 40%;
  background-repeat: no-repeat;  
  background-color: #FE6656;
  color: #fff;   
  font-family: 'KGLoveSomebody', Century Gothic, serif;  
  font-size: 30px;
  text-align: center;
}

section.module.contacto {
  margin-top: 0px;      
  padding: 80px 0;   
  background-color: #A2B6F8;
  color: #fff;   
}  

section.module.parallax {
  height: 500px;
  background-position: 50% 50%; 
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
}
section.module.parallax h1 {
  font-family: "KGLoveSomebody", Helvetica Neue, Helvetica, Arial, "Lucida Grande", sans-serif;		/* Header Secciones */
  padding: 120px 0;                  																/* Alignment text */
  color: rgba(255, 255, 255, 0.8);
  font-size: 72px;
  line-height: 160px;
  font-weight: 500; 
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-2 { /* Que hacemos*/
  background-image: url("../img/_small/1.jpg");
  height: 350px;
}
section.module.parallax-3 { /* Nuestros Peques */
  background-image: url("../img/_small/2.jpg");
  height: 350px;  
}

/*
@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px; 	
  } 
  section.module p {
    font-size: 20px; 
  } 
  section.module.parallax h1 {
    font-size: 96px; 
  }
}  this was commented while I work on a new re-coding above (importante!) *

@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;   Font Size Slides in between 
  }
} /*

/* ============================================================
  BASE
============================================================ */
/* ============================================================
  RESET 
============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ============================================================
  BOX SIZING & CLEARFIX
============================================================ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
  HTML & BODY
============================================================ */
body {
  background-color: #77B190; /* #77B190; */ 
  color: #787878;
  font-family:"Century Gothic", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
  PRIMARY STRUCTURE
============================================================ */
.wrapper {   
  width: 100%;
  margin: 0 auto;
}

main {
  display: block;
  background-color: #fff; 
}

.container {
  width: 100%;
  max-width: 860px;		 
  margin: 0 auto;
  padding: 0.1px 20px;

}

/* ============================================================
  FOOTER
============================================================ */
footer {
  padding: 20px 0;
}
footer .asides {
  margin-bottom: 20px;
}
footer aside {
  margin-bottom: 10px;
}
footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
footer nav li {
  display: inline-block;
}
footer nav a {
  display: block;
  margin: 0 5px;
  color: #fff;
}
footer .logo {
  text-align: center;
}
footer .logo img {
  display: inline-block;
  vertical-align: middle;
}
footer .social {
  text-align: center;
}
footer .social img {
  display: inline-block;
  vertical-align: middle;
}
footer .hosting {
  text-align: center;
}
footer .hosting small {
  color: #fff;
  font-size: 12px;
}
footer .hosting a {
  color: #A3E0BC; /
}
footer .fb-like {
    vertical-align: top;
    display: inline-block;
    width: 105px;
}
footer .fb_iframe_widget span {
    vertical-align: text-top !important;
    display: inline-block;
    width: 85px;
}

@media all and (min-width: 600px) {
  footer aside {
    margin-bottom: 0;
    float: left;
    width: 33.3333%;
  }
  footer nav ul {
    text-align: left;
  }
  footer nav li {
    display: block;
  }
  footer nav a {
    display: inline-block;
    margin: 0;
  }
  footer .logo {
    text-align: right;
  }
}

/* ============================================================
  TEXT LEVEL SEMANTICS
============================================================ */
a {
  text-decoration: none;
  color: #b4b4b4;
}

a:hover {
  color: #34694B; 
}

/* ============================================================
  Added code
============================================================ */
.hintScroll{
  position: fixed;
  top: 30px;
  right:25px;
  padding: 8em 15em; 
  background-image: url("../img/bubble_hint_scroll.png");
  background-size: 80%; 
  background-attachment:scroll;
  background-repeat: no-repeat; 
  display: none;
}
.globos {
  position: fixed;
  bottom: 2em;
  left: 0px;
  margin-top: 0px;    
  padding: 25em 15em; 
  background-image: url("../img/ds_globos.png");
  background-attachment:fixed;
  background-position: 2% 90%;
  background-repeat: no-repeat;
  display: none;
}
.globos1 {
  position: fixed;
  bottom: 2em;
  left: 0px;
  margin-top: 0px;    
  padding: 25em 15em; 
  background-image: url("../img/ds_globos.png");
  background-attachment:fixed;
  background-position: -3% 90%;
  background-repeat: no-repeat;  
  background-size: 333px 544px;	
  display: none;  
}
.DSLogo {
  z-index: 99;	
  position: fixed;
  bottom: 0em;
  left: 0em;
  top: -3em;    
  padding: 0.1em 17em; 
  background-image: url("../img/_small/DS_Logo_standalone.png");
  background-repeat: no-repeat;  
  background-size: 430px 430px;	
}
.leon {
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/7.png");
  background-position: 15% 100%; 
  background-repeat: no-repeat;  
  background-size: 250px 383px;	
  display: none;
}
.elefante {
  position: fixed;
  bottom: 10em;
  right: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/4.png");
  background-position: 100% 100%;
  background-repeat: no-repeat;  
  background-size: 315px 364px;	
  display: none;  
}
.hipo {
  z-index: 2;	
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/3.png");
  background-position: 1% 100%; 
  background-repeat: no-repeat;  
  background-size: 402px 646px;	
  display: none;
}
.mono {
  position: fixed;
  bottom: 10em;
  right: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/10.png");
  background-position: 90% 80%; 
  background-repeat: no-repeat;  
  background-size: 206px 389px;	
  display: none;
}

.monom {
  z-index: 2;	
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/9.png");
  background-position: 5% 55%;
  background-repeat: no-repeat;  
  background-size: 315px 372px;
  display: none;
}
.clownm {
  position: fixed;
  bottom: 10em;
  right: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/11.png");
  background-position: 90% 100%;
  background-repeat: no-repeat;  
  background-size: 315px 386px;	
  display: none;
}
.cartalm {
  z-index: 98;
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/flecha_madera2.png");
  background-position: 9% 75%; 
  background-repeat: no-repeat;  
  background-size: 291px 312px;	
  -ms-transform: rotate(-7deg); 	/* IE 9 */
  -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  transform: rotate(-7deg);  
  display: none;  
}
.foca {
  z-index: 97;	
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/5.png");
  background-position: 15% 100%; 
  background-repeat: no-repeat;  
  background-size: 278px 334px;	
  display: none;
}
.heroe {
  position: fixed;
  bottom: 10em;
  right: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/ds_heroe.png");
  background-position: 90% 100%; 
  background-repeat: no-repeat;  
  background-size: 504px 476px;	
  display: none;
}
.leon1 {
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/8.png");
  background-position: 15% 70%; 
  background-repeat: no-repeat;  
  background-size: 315px 320px;	
  display: none;
}
.clown {
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/2.png");
  background-position: 0% 100%; 
  background-repeat: no-repeat;  
  background-size: 630px 630px;	
  display: none; 
}
.pirata {
  position: fixed;
  bottom: 0em;    
  left: 0px;
  margin-top: 0px;  
  padding: 22em 20em; 
  background-image: url("../img/ds_pirata.png");
  background-size: 648px 611px; 
  background-position: 100% 40%;
  display: none; 
}
.heroina {
  position: fixed;
  bottom: 0em;    
  left: 0px;
  margin-top: 0px;  
  padding: 22em 20em; 
  background-image: url("../img/ds_heroina.png");
  background-size: 648px 611px; 
  background-position: 100% 40%;
  display: none;
}
.tigre {
  position: fixed;
  bottom: 0em;
  left: 0px;
  margin-top: 0px;    
  padding: 22em 20em; 
  background-image: url("../img/circo/12.png");
  background-position: 5% 80%; 
  background-repeat: no-repeat;  
  background-size: 315px 349px;	
  display: none; 
}
.back-to-top {
	z-index: 3;
    position: fixed;
    bottom: 0px;
    left: 50%;
    background-color: rgba(241, 131, 78, 0.30);
    background-image:url(../img/arrowUp.png);
    padding: 1.8em;
    display: none;
	border-radius: 5px;
}
.back-to-top:hover {    
    background-color: rgba(241, 131, 78, 0.8);
	cursor:pointer;    
}
.button{
	z-index: 3;	
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:50%;
	background-color: rgba(241, 131, 78, 0.30);
	background-image:url(../img/arrow.png);
	border-radius: 5px;
}
.button:hover{
	z-index: 3;
	background-color: rgba(241, 131, 78, 0.8);
	cursor:pointer;
}
.botonera{
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
    padding: 0.2em 0.6em;
    margin: 0 0.4em 0;
    font-size: 1.0em;
    cursor: pointer;
    color: #fff;
    background-color: #8BC9A4;
    outline: none;
    text-decoration: none;
}
.botonera:hover{
	background-color:#494949;
	cursor:pointer;
}
.slide{
    z-index: 1;
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
}
.slideno{
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:100px;
	font-weight:bold;
	color:rgba(255,255,255,0.3);
}

/* ============================================================
  NAV Redes Sociales
============================================================ */
nav#social_side {
	z-index: 5;
	position: fixed;
	top: 25%;
	right: 16px;
	margin-top: 0px;
}
nav#social_side li {
	position: relative;
	height: 20px;
}
nav#social_side li #fb{
	position: relative;
	height: 20px;
}
nav#social_side #fb a {
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
	background: transparent url('../img/facebook_1.png');
}
nav#social_side #fb a:hover, nav#social_side#fb a.active {     
	background: transparent url('../img/facebook_2.png');
}
nav#social_side li #tw{
	position: relative;
	height: 20px;
}
nav#social_side #tw a {
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
	background: transparent url('../img/twitter_1.png');
}
nav#social_side #tw a:hover, nav#social_side#tw a.active {   
	background: transparent url('../img/twitter_2.png');
}
nav#social_side li #in{
	position: relative;
	height: 20px;
}
nav#social_side #in a {
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
	background: transparent url('../img/instagram_1.png');
}
nav#social_side #in a:hover, nav#social_side#in a.active {   
	background: transparent url('../img/instagram_2.png');
}

nav#social_side h1 {
	position: absolute;
	right: 25px;
	top: -7px;
	display: none;
    font-size: 13px;
    padding: 4px 20px 4px 7px;
	color: #fff;
	white-space: nowrap;
	background: transparent url('../img/nav-arrow.png') 100% 50% no-repeat;
	}

/* ============================================================
  Slider (Main)
============================================================ */
/* flex magic tricks */
aside.header {
	-webkit-flex: 0 1 auto;
	-moz-flex:  0 1 auto;
	flex: 0 1 auto;
}

aside.aslider-container {
	-webkit-flex: 1 1 auto;
	-moz-flex:  1 1 auto;
	flex: 1 1 auto;
}

@-moz-document url-prefix() {
body {
    width: 100%;
    -moz-box-sizing: border-box;
    }

}
.aslider { 
	z-index: 1;
    position: relative;
	height: 900px;		
    width: 100%;    
    max-width: 1920px; 
    margin: 0 auto; 
    overflow: hidden; 
}

/* ============================================================
  Single Slide
============================================================ */
.slider { 
    position:relative;
    height: 100%;
    width: 100%;
    overflow: hidden; 
    background-repeat: no-repeat; 
    background-size: cover;
    color: #fff; 
    bottom: 0px;    
} 

.slider img {
    position: relative;
    display: block;
    opacity: 1;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;    
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); 
	background-position: center center;
    background-repeat: no-repeat; 
    background-size: cover;	
}

.slider:hover img {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0); 
}

.slider a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.slider > .caption { 
    top: auto;
    bottom: 0;
    text-align: left;
    position: absolute;
    left: 0;
    padding: 2em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); 
}

.caption h2 { text-align: left; font-size: 56px; font-weight: 200; margin-bottom: 5px;position: relative;}
.caption h2:after {content: '';position:absolute;width: 100%; height: 1px;background: #fff;left: 0;bottom: -6px;
-webkit-transition-delay: 0.05s;transition-delay: 0.05s;-webkit-transition-duration: 0.35s;transition-duration: 0.35s;transform-origin:left;-webkit-transform:scaleX(0);}

.caption p {font-size: 25px;opacity: 0;padding-bottom: 0;margin-bottom: 0; }
.caption h2, .caption p { -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); }

.slider:hover .caption p {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;-webkit-transition-duration: 0.35s;transition-duration: 0.35s;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);opacity: 1;}
.slider:hover .caption h2 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
.slider:hover .caption h2:after {-webkit-transform:scaleX(1);}

/* ============================================================
  Navigation
============================================================ */
.aslider-nav {
    position: absolute;
    top:50%;
    margin-top: -1em;
    z-index: 9999;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); 
    font-size: 40px;
    display: block; 
    padding: 10px 0; 
    width: 5%; 
}

.aslider-nav:hover {
	color: #fff;
	background: rgba(241, 131, 78, 0.7); /* rgba(0,0,0,0.5); */
}

.aslider-prev {left:0;}
.aslider-prev .fa {margin-left: 15px;}
.aslider-next {right:0;text-align: right;}
.aslider-next .fa {margin-right: 15px;}

.slider-preview {position: absolute;top: 0;z-index: 9;width: 100%;}
.preview-prev {right: 100%;}
.preview-next {left: 100%;}

/* ============================================================
  Animation
============================================================ */
/*.caption p, .caption h2, .caption h2:after, a, .dot{
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;} */

.slider img {
    -webkit-transition: opacity 0.35s, 
    -webkit-transform 0.35s;
    transition: opacity 0.35s, 
    transform 0.35s;
}

/* ============================================================
  Contact Form
============================================================ */
body, div, h1,h2, form, fieldset, input, textarea, footer,p {border: 0; outline: none;}

#containerContacto {
	margin:0 -100px 0; 
    width: 1000px;
}
#firstContacto {
    width: 500px;
    float: left;
    height: 440px;
}
#secondContacto {
    width: 500px;
    float: left;
    height: 440px;
}
#clearContacto {
    clear: both;
}

#gmap_canvas{
	height:357px;
	width:486px;
}

/* Facebook Messenger */
#wrapFB {
	margin:0 30px 0; 
	background: none; 
}

/* General */
/* #wrap {
	width:530px; 
	margin:20px auto 0; 
	height:600px;
	background: none; 
	color: #7c7873; 
	font-family: 'KGLoveSomebody'; 
	text-shadow:0 1px 0 #fff; 
	font-size:24px;
	}
	
#wrap h1 {
	margin-top:10px;
	margin-bottom:10px; 
	text-align:center;
	font-size:42px; 
	text-shadow:0 1px 0 #ede8d9; 
	}
	
#wrap p {
	margin-bottom:-10px; 
	text-align:left;
	font-size:24px; 
	text-shadow:0 1px 0 #fff; 
	}	 */

/* /* Sobre */
/* #form_wrap { 
	overflow:hidden; 
	height:446px; 
	position:relative; 
	top:0px;
	-webkit-transition: all 1s ease-in-out .3s;
	-moz-transition: all 1s ease-in-out .3s;
	-o-transition: all 1s ease-in-out .3s;
	transition: all 1s ease-in-out .3s
}

#form_wrap:before {
	content:"";
	position:absolute;
	bottom:128px;
	left:0px;
	background:url('../img/before.png');
	width:530px;
	height: 316px;
}

#form_wrap:after {
	content:"";
	position:absolute;
	bottom:0px;
	left:0;
	background:url('../img/after.png');
	width:530px;
	height: 260px; 
}

#form_wrap.hide:after, #form_wrap.hide:before {display:none; }
#form_wrap:hover {height:776px;top:-200px;}
#form_wrap form {
	background:#f7f2ec url('../img/letter_bg.png'); 
	position:relative;top:200px;overflow:hidden;
	height:200px;width:415px;margin:0px auto;padding:20px; 
	border: 1px solid #fff;
	border-radius: 3px; 
	-moz-border-radius: 3px; -webkit-border-radius: 3px;
	box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff;
	-webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff;
	-webkit-transition: all 1s ease-in-out .3s;
	-moz-transition: all 1s ease-in-out .3s;
	-o-transition: all 1s ease-in-out .3s;
	transition: all 1s ease-in-out .3s;
	}


#form_wrap:hover form {height:530px;}

#form_wrap form label {
	margin: 11px 20px 0 0; 
	font-size: 16px; color: #b3aba1;
	text-transform: uppercase; 
	text-shadow: 0px 1px 0px #fff;
}

#form_wrap form  input[type=text], textarea {
	font: 14px normal normal uppercase helvetica, arial, serif;
	color: #7c7873;background:none;
	width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0;
	border:1px solid #f8f5f1;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
	-moz-box-shadow: inset 0px 0px 1px #726959;
	-webkit-box-shadow:  inset 0px 0px 1px #b3a895; 
	box-shadow:  inset 0px 0px 1px #b3a895;
}	

#form_wrap form textarea { height: 80px; padding-top:14px;}
#form_wrap form textarea:focus, input[type=text]:focus {background:rgba(255,255,255,.35);}
#form_wrap input[type=submit] {
	position:relative;
	font-family:"Century Gothic", Helvetica, sans-serif;
	font-size:24px; color: #7c7873;text-shadow:0 1px 0 #fff;
	width:100%; text-align:center;opacity:0;
	background:none;
	cursor: pointer;
	-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; 
	-webkit-transition: opacity .6s ease-in-out 0s;
	-moz-transition: opacity .6s ease-in-out 0s;
	-o-transition: opacity .6s ease-in-out 0s;
	transition: opacity .6s ease-in-out 0s;
}

#form_wrap:hover input[type=submit] {z-index:1;opacity:1;
	-webkit-transition: opacity .5s ease-in-out 1.3s;
	-moz-transition: opacity .5s ease-in-out 1.3s;
	-o-transition: opacity .5s ease-in-out 1.3s;
	transition: opacity .5s ease-in-out 1.3s;}

#form_wrap:hover input:hover[type=submit] {color:#435c70;}
  */
#content{
    margin:15px auto;
    text-align:center;
    width:630px;
    position:relative;
    height:100%;
}
#formWrapper{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #fff;
    background-color:#f9f9f9;
    width:630px;
    overflow:hidden;
}
#steps{
    width:630px;
	/*height:320px;*/
    overflow:hidden;
}
.step{
    float:left;
    width:630px;
	/*height:320px;*/
}
#navigation{
    height:45px;
    background-color:#80C29A; 
    border-top:1px solid #fff;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
	font-size: 14px;
}
#navigation ul{
    list-style:none;
	float:left;
	margin-left:22px;
}
#navigation ul li{
	float:left;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    position:relative;
	margin:0px;
}
#navigation ul li a{
    display:block;
    height:45px;
    background-color:#444;
    color:#fff;
    outline:none;
    font-weight:bold;
    text-decoration:none;
	text-shadow:1px 1px 1px #000;	
    line-height:45px;
    padding:0px 20px;
    border-right:1px solid #fff;
    border-left:1px solid #fff;
    background:#80C29A;

}
#navigation ul li a:hover{
    background:#EF7845;
    color:#fff;
    text-shadow:1px 1px 1px #000;
}	
#navigation ul li.selected a{
    background:#90C55E;
    color:#fff;
    text-shadow:1px 1px 1px #000;
}
span.checked{
    background:transparent url(../img/checked.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
span.error{
    background:transparent url(../img/error.png) no-repeat top left;
    position:absolute;
    top:0px;
    left:1px;
    width:20px;
    height:20px;
}
#steps form fieldset{
    border:none;
    padding-bottom:20px;
}
#steps form legend{
    text-align:left;
    background-color:#80C29A;
    color:#fff;
    font-size:24px; 
    text-shadow:1px 1px 1px #000;
    font-weight:bold;
    float:left;
    width:590px;
    padding:5px 0px 5px 10px;
    margin:10px 0px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
}
#steps form p{
    float:left;
    clear:both;
    margin:5px 0px;
	color: #000;
	font-size: 13px;
    background-color:#f4f4f4;
    border:1px solid #fff;
    width:400px;
    padding:10px;
    margin-left:100px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
}
#steps form p label{
    width:160px;
    float:left;
	font-size: 13px;
    text-align:right;
    margin-right:15px;
    line-height:26px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
}
#steps form input:not([type=radio]),
#steps form textarea,
#steps form select{
    background: #ffffff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 5px;
    width: 200px;
    float:left;
}
#steps form input:focus{
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background-color:#FFFEEF;
}
#steps form p.submit{
    background:none;
    border:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}
#steps form button {
	border:none;
	outline:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    color: #80C29A;
    display: block;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding: 7px 25px;
    text-shadow: 0 1px 1px #fff;
    font-weight:bold;
    font-family:"Century Gothic", Helvetica, sans-serif;
    font-size:22px;
    -moz-box-shadow:0px 0px 3px #aaa;
    -webkit-box-shadow:0px 0px 3px #aaa;
    box-shadow:0px 0px 3px #aaa;
    background:#fff;
}
#steps form button:hover {
    background:#80C29A;
    color: #fff;
    text-shadow:1px 1px 1px #ccc;
}

#bullets ul{
	font-size: 24px;
    list-style: none; 
    padding: 0;
    margin-bottom:40px;
	text-align: left;
	line-height: 200%;
}

#bullets ul li{
	padding-left: 16px; 
}

#bullets ul li:before {
    content: "•"; 
    padding-right: 8px;
    color: white; 
}

/* ============================================================
  Collage Photos
============================================================ */
.Collage{
    padding:10px;	/* Entre imagenes */
}
.Collage img{
    margin:0;
    padding:0;
    display:inline-block;
    vertical-align:bottom;
    opacity:1;
    border:6px solid #FFF;
}

.Image_Wrapper{
    opacity:0;
    -moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.Image_Wrapper_Extra{
    opacity:0;
    -moz-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    box-shadow:0px 2px 4px rgba(0, 0, 0, 0.1);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.Caption_Collage{
    font-size:14px;
    font-weight:normal;
    font-family:arial;
}
.Caption_Content{
    /* padding:10px; */
    color:#FFF;
}

.effect-parent {
    -webkit-perspective: 1300px;
    -moz-perspective: 1300px;
    perspective: 1300px;
    }

.effect-1 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    -moz-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: fly ease-in-out forwards;
    -moz-animation: fly ease-in-out forwards;
    animation: fly ease-in-out forwards;
}
@-webkit-keyframes fly {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transform-origin:50% 50% 0; }
}

@-moz-keyframes fly {
    100% { -moz-transform: rotateX(0deg); opacity: 1; -moz-transform-origin:50% 50% 0; }
}

@keyframes fly {
    100% { transform: rotateX(0deg); opacity: 1; transform-origin:50% 50% 0; }
}

.effect-2 {
    -webkit-transform: translateY(200px);
    -moz-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: moveUp ease forwards;
    -moz-animation: moveUp ease forwards;
    animation: moveUp ease forwards;
}

@-webkit-keyframes moveUp {
    to { -webkit-transform: translateY(0); opacity: 1; }
}

@-moz-keyframes moveUp {
    to { -moz-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
    to { transform: translateY(0); opacity: 1; }
}

.effect-3 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    -moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    -webkit-animation: fallPerspective ease-in-out forwards;
    -moz-animation: fallPerspective ease-in-out forwards;
    animation: fallPerspective ease-in-out forwards;
}

@-webkit-keyframes fallPerspective {
    100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@-moz-keyframes fallPerspective {
    100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

@keyframes fallPerspective {
    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}

.effect-4 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotateX(-80deg);
    -moz-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    -webkit-animation: flip ease-in-out forwards;
    -moz-animation: flip ease-in-out forwards;
    animation: flip ease-in-out forwards;
}

@-webkit-keyframes flip {
    100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}

@-moz-keyframes flip {
    100% { -moz-transform: rotateX(0deg); opacity: 1; }
}

@keyframes flip {
    100% { transform: rotateX(0deg); opacity: 1; }
}

.effect-5 {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-animation: moveUp ease-in-out forwards;
    -moz-animation: moveUp ease-in-out forwards;
    animation: moveUp ease-in-out forwards;
}

.effect-6 {

    -webkit-transform:  scale(0.638) translate(-179px);
    -moz-transform:     scale(0.638) translate(-179px);
    transform:          scale(0.638) translate(-179px);

    -webkit-animation: moveUp ease-in-out forwards;
    -moz-animation: moveUp ease-in-out forwards;
    animation: moveUp ease-in-out forwards;
}

.effect-duration-1{
    -webkit-animation-duration: .4s;
    -moz-animation-duration:    .4s;
    animation-duration:         .4s;
}
.effect-duration-2{
    -webkit-animation-duration: .5s;
    -moz-animation-duration:    .5s;
    animation-duration:         .5s;
}
.effect-duration-3{
    -webkit-animation-duration: .6s;
    -moz-animation-duration:    .6s;
    animation-duration:         .6s;
}
.effect-duration-4{
    -webkit-animation-duration: .7s;
    -moz-animation-duration:    .7s;
    animation-duration:         .7s;
}
.effect-duration-5{
    -webkit-animation-duration: .8s;
    -moz-animation-duration:    .8s;
    animation-duration:         .8s;
}
.effect-duration-6{
    -webkit-animation-duration: .9s;
    -moz-animation-duration:    .9s;
    animation-duration:         .9s;
}
.effect-duration-7{
    -webkit-animation-duration: .95s;
    -moz-animation-duration:    .95s;
    animation-duration:         .95s;
}
.effect-duration-8{
    -webkit-animation-duration: 1s;
    -moz-animation-duration:    1s;
    animation-duration:         1s;
}
.effect-duration-9{
    -webkit-animation-duration: 1.05s;
    -moz-animation-duration:    1.05s;
    animation-duration:         1.05s;
}
.effect-duration-10{
    -webkit-animation-duration: 1.1s;
    -moz-animation-duration:    1.1s;
    animation-duration:         1.1s;
}

.mobile_menu_button {
    display: none;
    float: left;
    height: 10px;
    margin: 0 10px 0 0;
	background-color: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);	
}

.mobile_menu_button span {
    color: #fff; /* color lineas */
    width: 19px;
    height: 17px;
    font-size: 24px;
    z-index: 50;
    display: table-cell;
    position: relative;
    cursor: pointer;
    vertical-align: middle
}
.dark .mobile_menu_button span {
    color: #000
}
nav.mobile_menu {	
	display: none; 
	z-index: 99;
    width: 100%;
    float: left;
    position: relative;
    top: 0;
    text-align: center;
    overflow: hidden;
    background-color: #fff;
}
nav.mobile_menu ul {
    display: none;
    width: 100%;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0
}
nav.mobile_menu>ul {
    margin-bottom: -1px!important
}
nav.mobile_menu ul li {
    margin: 0;
    padding: 0;
    position: relative
}
nav.mobile_menu ul li a {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-tap-highlight-color: transparent
}
nav.mobile_menu ul li,
nav.mobile_menu ul li,
nav.mobile_menu ul li ul li {
  /*  border-bottom: 1px solid #eaeaea */
}
nav.mobile_menu ul li.open_sub>ul {
  /*  border-top: 1px solid #eaeaea */
}
nav.mobile_menu ul li:last-child {
    border: 0!important
}
nav.mobile_menu ul>li.has_sub>span.mobile_arrow,
nav.mobile_menu ul>li.has_sub>span.mobile_arrow {
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 46px;
    line-height: 46px;
    margin: 0;
    padding: 0 10px 0 0;
    position: absolute;
    top: 0;
    right: 0;
    text-align: right;
    width: 50px;
    z-index: 9000;
    -webkit-tap-highlight-color: transparent
}
nav.mobile_menu ul li span.mobile_arrow i,
nav.mobile_menu ul li span.mobile_arrow i {
    color: #888
}
nav.mobile_menu ul>li>span.mobile_arrow i {
    display: none
}
nav.mobile_menu ul>li.has_sub>span.mobile_arrow i {
    display: inline
}
nav.mobile_menu ul>li.has_sub>span.mobile_arrow i.fa-angle-down,
nav.mobile_menu ul>li.has_sub>span.mobile_arrow i.fa-angle-down {
    display: none
}
nav.mobile_menu ul>li.has_sub.open_sub>span.mobile_arrow i.fa-angle-right,
nav.mobile_menu ul>li.has_sub>ul.open_sub>li>span.mobile_arrow i.fa-angle-right {
    display: none
}
nav.mobile_menu ul>li.has_sub.open_sub>span.mobile_arrow i.fa-angle-down,
nav.mobile_menu ul>li.has_sub ul.open_sub>li>span.mobile_arrow i.fa-angle-down {
    display: inline
}
nav.mobile_menu ul li a,
nav.mobile_menu ul li h3 {
	color: #fff;
    font-size: 1.0em;
    font-weight: 700;
    padding: 10px 0 10px 0;
    display: block;
    position: relative;
    text-transform: uppercase;
    line-height: 26px;
    letter-spacing: 1px;
    background-color: #8BC9A4;
    outline: none;
    text-decoration: none;	
}
nav.mobile_menu ul li a:hover,
nav.mobile_menu ul li.active>a {
    color: #fff
}
nav.mobile_menu ul li ul li {
    margin: 0 0 0 20px
}

/* 
============================================================
  Media Queries
============================================================ 
Optimizado para los siguientes navegadores y resoluciones:
1- Chrome (54.0.2840.99 m) 
   * 1366x768 (OK)
   * 
2- XX
*/
@media(max-width:720px){
/*	.slider img {height: 100%;height:calc(100% + 30px);width: auto;}
	.slider-preview {height: 100%;width: auto;} */
}

@media only screen and (max-width:1000px){	/* Mobile */

	.aslider { 
		height: 640px;
		max-width: 1000px; 		
	}	

	nav#social_side {
		display: none!important
	}	
	
	.ds-header-perspective {
		display: none;
	}

	.ds-header-perspective > div {
		display: none;
	}

	.ds-header-front {
		display: none;
	}

	.ds-header-front #manitos {
		display: none;
		background:url('../img/menu_ds_logo_manitos_grupal.png'); 
		width:750px;
		height: 108px;		
	}
	.DSLogo { 
	  display: none!important 
	}	
	.leon {
	  display: none!important 
	}
	.elefante {
	  display: none!important 	
	}
	.hipo {
	  display: none!important 
	}
	.mono {
	  display: none!important 
	}
	.monom {
	 display: none!important 
	}
	.clownm {
	  display: none!important 
	}
	.clown {
	  display: none!important 
	}	
	.foca {
	  display: none!important 
	}
	.cartelm {
	  display: none!important 
	}	
	.heroe {
	  display: none!important 
	}
	.leon1 {
	  display: none!important 
	}
	.tigre {
	  display: none!important 
	}	
}	

/* max-width : 1366px monitor #1 (Resolution 1920x1080) */
@media screen and (max-width:1920px) {
	section.module h2 {
	  margin-bottom: 60px;
	}
	
	section.module p {					
	  margin-bottom: 30px;
	  font-size: 26px;
	  font-weight: 300;
	  line-height: 200%;
	}
	section.module p:last-child {
	  margin-bottom: 120px;  
	}	
}

/* max-width : 1600px (Resolution 1600x900) */
@media screen and (max-width:1600px) {

	/* Botonera Principal */
	.ds-header nav a {
		padding: 0.1em 0.5em;
		margin: 0 0.3em 0;
		font-size: 0.8em;
	}
	
	.aslider { 
		height: 730px;
		max-width: 1600px; 		
	}		

	.aslider-nav {
		width: 5%; 
	}

	/* Secciones */
	section.module.quienes_somos {      
		padding: 140px 0;	/* 175px muestra animaciones pero la madera desalineada */
	}
	
	section.module h2 {
	  margin-bottom: 45px;
	}
	
	section.module p {					
	  margin-bottom: 80px;
	  font-size: 22px;
	  font-weight: 300;
	  line-height: 200%;
	}
	section.module p:last-child {
	  margin-bottom: 120px;  
	}
	
	.DSLogo {
	  background-size: 318px 318px;	
	}	
	
	.leon {
	  background-position: 5% 90%; 

	}
	.elefante {
	  bottom: 8em;		
	}
	.hipo {
	  background-position: 1% 90%; 
	  background-size: 310px 498px;	
	}
	.mono {
	  bottom: 1em;
	  background-position: 100% 75%;
	}
	.monom {
	  background-position: 5% 90%; 
	}
	.clownm {
	  bottom: 0.5em;
	  background-position: 95% 90%;
	}	
	.foca {
	  background-position: 15% 100%; 
	}
	.heroe {
	  bottom: 6em;
	  background-position: 90% 100%; 
	  background-size: 404px 381px;	
	}
	.leon1 {
	  margin-top: 2em;    
	  background-position: 15% 100%; 
	  background-size: 315px 320px;	
	}			
}

/* max-width : 1366px monitor #2 (Resolution 1366x768) */
@media screen and (max-width:1366px) {

	/* Botonera Principal */
	.ds-header nav a {
		padding: 0.1em 0.5em;
		margin: 0 0.3em 0;
		font-size: 0.8em;
	}
	
	.aslider { 
		height: 620px;
		max-width: 1350px; 		
	}	
	
	.aslider-nav {
		width: 5%; 
	}

	.ds-header-front #manitos {
		background:url('../img/menu_ds_logo_manitos_grupal.png'); 
    	width:540px;
		height: 107px; 
	}	
	
	section.module h2 {
	  margin-bottom: 30px;
	}
	section.module p {					
	  margin-bottom: 30px;
	  font-size: 20px;
	  font-weight: 300;
	  line-height: 200%;
	}
	section.module p:last-child {
	  margin-bottom: 0;  
	}

	section.module.content {    
	  padding: 40px 0;    
	}
	
	section.module.quienes_somos {      
	  padding: 140px 0;       
	}

	section.module.que_hacemos{
	  padding: 60px 40px; 
	}
	
	.DSLogo {
	  background-size: 334px 334px;	
	}	
	
	.leon {
	  background-position: 1% 100%; 

	}
	.elefante {
	  bottom: 5em;		
	}
	.hipo {
	  background-position: 1% 100%; 
	  background-size: 282px 453px;	
	}
	.mono {
	  bottom: 1em;
	  background-position: 100% 90%;
	}
	.monom {
	  bottom: 0em;
	  background-position: 5% 85%; 
	  background-size: 252px 298px;
	}
	.clownm {
	  bottom: 5em;
	  background-position: 100% 100%;
	  background-size: 252px 309px;
	}
	.foca {
	  background-position: 5% 100%; 
	  background-size: 278px 334px;	
	}
	.heroe {
	  background-position: 100% 100%; 
	  background-size: 353px 334px;	
	}
	.leon1 {
	  background-position: 5% 100%; 
	  background-size: 252px 256px;	
	}	
	.clown {
	  background-position: -20% 100%;  
	  background-size: 630px 630px;	
	}
	.tigre {
	  background-position: 0% 90%; 
	  background-size: 284px 315px;	
	}
}
/*popup */
.wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  display: none;
}