@import "../js/google-code-prettify/prettify.css";
html * {
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	 -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
		}

html, body {
	overflow:auto;
	font-size: 15px;
	padding: 0;
	margin: 0;
	background: #f4f5f6;
	font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;,
	sans-serif;
	font-weight: 300;
	color:#444444;
	}
body {
	line-height: 1.6em;
	}

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, main {
  display: block;
}

ol, ul {
  list-style: none;
}

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

	* {
		-webkit-box-sizing: border-box;
		  -moz-box-sizing: border-box;
		  box-sizing: border-box;
		}

			.slider_description {
				position: absolute;
				bottom: 20px;
				right: 20px;
				padding: 10px 20px;
				background: rgba(255,255,255,.5);
				font-weight: 500;
				text-transform: uppercase;
				color: #000;
				border: 2px solid transparent;
				border-radius: 50px;
				cursor: pointer;
				z-index: 100;
	
				-webkit-transition: all 0.3s;
				transition: all 0.3s;
			}
			.slider_description:hover ,
			.slider_description:focus{
				background: rgba(255,255,255,.0);
				color: #FFF;
				border-color: #FFF;
			}
			
			/* Slider Styles */
			#example {
				position: relative;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				width: 100%;
				height: 100%;
				height: 100vh;
				background: #f4f5f6;
				z-index: 2;
			}
			#example .frame {
				width: 100%;
				height: 100%;

				-webkit-perspective: 1000px;
				perspective: 1000px;

				-webkit-perspective-origin: 50% 50%;
				perspective-origin: 50% 50%;
			}
			#example .frame .slide_element {
				height: 100%;

				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			#example .frame .slide_element > div {
				float: left;
				height: 100%;
			}
			#example .frame .mSCover img {
				max-width: none;
			}

			/* Animated layers styles */
			.transparent {
				opacity: 0;
			}
			.bgImg {
				top: 0;
				left: 0;
				width: 100%;
				height: 115%;
				background-position: 50%;
				background-repeat: no-repeat;
				-webkit-background-size: cover;
		  		   -moz-background-size: cover;
	 				 -o-background-size: cover;
	 		  		    background-size: cover;
				-webkit-transform: translateZ(0px) translateY(-7%);
				transform: translateZ(0px) translateY(-7%);
				z-index: 1;
			}
			.bgImg1 {
				background-image: url('../img/slider/confianza.jpg') ;
			}
			.bgImg2 {
				background-image: url('../img/slider/herramienta.jpg');
			}
			.bgImg3 {
				background-image: url('../img/slider/yatla_sofom2.jpg');
			}
			.bgImg4 {
				background-image: url('../img/slider/casadebolsa.jpg');
			}
			.bgImg5 {
				background-image: url('../img/slider/YATLA_SistemaFiduciarioWeb.jpg');
			}
		/*********/
		/*********/
		.m-btn {
		    border: 0 none;
		    cursor: pointer;
		    display: inline-block;
		    font-size: 14px;
		    line-height: 14px;
		    margin: 8px auto 0;
		    min-width: 42px;
		    outline: 0 none;
		    overflow: visible;
		    padding: 4px 14px !important;
		    position: relative;
		    text-align: center;
		    text-decoration: none;
		    vertical-align: inherit;
		    white-space: nowrap;
		    z-index: 2;
		}
		.m-btn.icn-only {
	    min-width: 14px;
		}
		
		.big {
			margin-top: -50%;
		    font-size: 18px;
		    line-height: 38px;
		    padding: 14px 15px;
		    border-radius: 50%;
		    /*box-shadow: 0 0 2px 1px rgba(0,0,0,0.2),0 2px 6px 1px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.2) inset;*/
		}
		@media screen and (-webkit-min-device-pixel-ratio:0) { 
			.big{padding:0px 25px 0 15px !important;}
			.nav li label{
				padding: 1em 2.5em 1.6em !important;
				margin-top:-1em;
			}
			
		}
		
/*************************************
Que es yatla?
*************************************/
		#monitor {
		    height: 460px;
		    position: relative;
		}
		.inner {
		    max-width: 1050px;
		    padding: 0 20px;
		    width: 100%;
		}
		.monitor-wrap {
		    height: 100%;
		    position: relative;
		    width: 100%;
		}
		.monitor_window {
		    height: 54%;
		    left: -5%;
		    overflow: hidden;
		    pointer-events: none;
		    position: relative;
		    top: 21%;
		    width: 85%;
		    background: #f4f5f6; none repeat scroll 0 0;
		}
		.monitor_display, .cel_display {
		    pointer-events: none;
		    position: absolute;
		    z-index: 1;
		}
		.monitor_display img ,
		.monitor_display, img{
		    display: inline-block;
		}
		.monitor_content{width: 90%;}
		#monitor,.inner,img,.monitor_window,.monitor-wr,.monitor_display {
		    margin: 0 auto;
		}
		#up_down{
		position: relative;
		-webkit-animation: up_down 15s infinite;
		   -moz-animation: up_down 15s infinite;
			 -o-animation: up_down 15s infinite;
				animation: up_down 15s infinite;
		 -webkit-animation-direction:alternate;
			-moz-animation-direction:alternate;
			  -o-animation-direction:alternate;
			 	 animation-direction:alternate;
					animation-delay:1s;
			   -moz-animation-delay:1s;
			-webkit-animation-delay:1s;
				 -o-animation-delay:1s;
		  }
		@-o-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -o-animation-timing-function: ease-in;} 
		 50%{top:-80%; -o-animation-timing-function: ease-out;}  
		 60%{top:-90%; -o-animation-timing-function: ease-in;}    
		 90% {top: -263%;}
		 100% {top: -263%; -o-animation-timing-function: ease-out;}  
		}
		@-moz-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -moz-animation-timing-function: ease-in;} 
		 50%{top:-80%; -moz-animation-timing-function: ease-out;}  
		 60%{top:-90%; -moz-animation-timing-function: ease-in;}    
		 90% {top: -263%;}
		 100% {bottom: -263%; -moz-animation-timing-function: ease-out;}  
		}
		@-webkit-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -webkit-animation-timing-function: ease-in;} 
		 50%{top:-80%; -webkit-animation-timing-function: ease-out;}  
		 60%{top:-90%; -webkit-animation-timing-function: ease-in;}    
		 90% {top: -263%;}
		 100% {top: -263%; -webkit-animation-timing-function: ease-out;}  
		}
		@keyframes up_down{
		 0%{top:0;}
		 20%{top:0; animation-timing-function: ease-in;} 
		 50%{top:-80%; animation-timing-function: ease-out;}  
		 60%{top:-90%; animation-timing-function: ease-in;}    
		 90% {top: -263%;}
		 100% {top: -263%; animation-timing-function: ease-out;}  
		}
	.display_none_in_big_screens{
		display: :block;
	}
	.mr {
    font-size: 70% !important;
    font-weight: 300;
    opacity: 1 !important;
    padding: 0;
    vertical-align: top;
	}
	a.dsgcorplink,
	a.dsgcorplink:link ,
	a.dsgcorplink:visited {
		font-weight: bold;
		color:#555555 !important;
	}
	a.dsgcorplink:hover,
	a.dsgcorplink:focus{
		color:#ee7b00 !important;
		box-shadow: 0 2px 0 rgba(0,0,0,0.3)
	}

/***************************************
****************************************
*MODAL BOX*
****************************************
****************************************/
.overlay {
	display:none;
	position: absolute !important;
	z-index:3;
}

.modal {
	background: #f4f5f6;
	border: #404040;
	color:#e5e5e5;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-moz-box-shadow: 0 1px 3px #000;
	-webkit-box-shadow: 0 1px 5px #000;
	box-shadow: 1px 1px 4px #000,
				0 0 15px rgba(0,0,0,.4),
				0 0 30px rgba(0,0,0,.6),
				1px 1px 0 #999 inset;
	padding:6px 20px 20px;
	text-shadow:none;
	overflow: visible;
	position:fixed !important;
	height:auto;
	width:80%;
	top:0;
	left:0;
	text-align: right;
}

.modal a, .close{
	color:#6dc6f2;
	cursor:pointer;
	font-size:1em;
	line-height:.2em;
	padding:1.7em 0.35em;
	color:#FFF;
	right: -2.6em;
	top:0;
	position:relative;
	background-color:rgba(255,51,0,.5);
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	vertical-align: middle;
	text-shadow:0 1px 1px rgba(0,0,0,.4);
	box-shadow:0 0 4px rgba(0,0,0,.1) inset;
}
.modal a:hover,
.modal a:focus{
	background-color:rgba(228, 0, 43,.7);
	box-shadow: 0 0 4px rgba(0,0,0,.3),
				0 0 16px rgba(0,0,0,.3),
				0 0 12px rgba(125, 0, 24, .8) inset;
}

video{
	display:block;
	width:100%;
	height:100%;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	margin:0 auto;
	box-shadow:1px 1px 0 rgba(255,255,255,.4),
			  -1px -1px 0 rgba(0,0,0,.3);
	}
.fa-star,.fa-star-o{color:#bbbdc0;}
.yatla-title{
	font-weight:bold;
	}	
.yatla-title .fa-registered,
h1 .markregistered,
.markregistered{
	font-size: 0.45em !important;
	font-weight: 400;
	margin-left: -4px;
    margin-right: 4px;
    vertical-align: 1.2em;
}
h1 .markregistered{
	font-size: 0.3em !important;
	vertical-align: 2em;
}
/*FIN MODALBOX*/

.imagen_beneficios, .imagen_porqueyatla{
	background-image: url("../img/assets/beneficios.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    padding: 3% 0 4%;
    position: relative;
}
.imagen_porqueyatla{background-image: url("../img/assets/porqueyatla.jpg");}
.imagen_beneficios h1, .imagen_porqueyatla h1{
	color:#FFF !important;
	text-shadow:0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}


@media screen and (max-width:1199px) {
	.monitor_window {
		    height: 46%;
		    top: 17%;
		    width: 86%;
		    left:-4.5%;
		}
	@-webkit-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -webkit-animation-timing-function: ease-in;} 
		 50%{top:-80%; -webkit-animation-timing-function: ease-out;}  
		 60%{top:-90%; -webkit-animation-timing-function: ease-in;}    
		 90% {top: -252%;}
		 100% {top: -252%; -webkit-animation-timing-function: ease-out;}  
		}
		@keyframes up_down{
		 0%{top:0;}
		 20%{top:0; animation-timing-function: ease-in;} 
		 50%{top:-80%; animation-timing-function: ease-out;}  
		 60%{top:-90%; animation-timing-function: ease-in;}    
		 90% {top: -252%;}
		 100% {top: -252%; animation-timing-function: ease-out;}  
		}	

}

/****************************************************************
*****************************************************************
 991px Aquì Cambia  de 2 a 1 columnas
*****************************************************************
*****************************************************************/
@media screen and (max-width:991px) {
	.monitor_window {
		    height: 60%;
		    left: -10%;
		    width: 75%;
		}
		@-webkit-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -webkit-animation-timing-function: ease-in;} 
		 50%{top:-45%; -webkit-animation-timing-function: ease-out;}  
		 60%{top:-55%; -webkit-animation-timing-function: ease-in;}    
		 90% {top: -130%;}
		 100% {top: -130%; -webkit-animation-timing-function: ease-out;}  
		}
		@keyframes up_down{
		 0%{top:0;}
		 20%{top:0; animation-timing-function: ease-in;} 
		 50%{top:-45%; animation-timing-function: ease-out;}  
		 60%{top:-55%; animation-timing-function: ease-in;}    
		 90% {top: -130%;}
		 100% {top: -130%; animation-timing-function: ease-out;}  
		}
	.display_none_in_big_screens{
		display:none !important;
	}	
}
@media screen and (max-width:690px) {
	.monitor_window {
		    height: 55%;
		    left: -5%;
		    width: 85%;
		}
	h1, h1.header{
	font-size: 2.4em !important;
	 margin: 1.6em auto 0.8em;
	}	
	
}		
@media screen and (max-width:525px) {
	.monitor_window {
		    height: 40%;
		    left: -5%;
		    width: 85%;
		    top: 15%;
		}
@-webkit-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -webkit-animation-timing-function: ease-in;} 
		 50%{top:-65%; -webkit-animation-timing-function: ease-out;}  
		 60%{top:-75%; -webkit-animation-timing-function: ease-in;}    
		 90% {top: -230%;}
		 100% {top: -230%; -webkit-animation-timing-function: ease-out;}  
		}
		@keyframes up_down{
		 0%{top:0;}
		 20%{top:0; animation-timing-function: ease-in;} 
		 50%{top:-65%; animation-timing-function: ease-out;}  
		 60%{top:-75%; animation-timing-function: ease-in;}    
		 90% {top: -230%;}
		 100% {top: -230%; animation-timing-function: ease-out;}  
		}	
}
@media screen and (max-width:471px) {
	.monitor_window {
		    height: 40%;
		    left: -6%;
		    top: 10%;
		}
		@-webkit-keyframes up_down{
		 0%{top:0;}
		 20%{top:0; -webkit-animation-timing-function: ease-in;} 
		 50%{top:-45%; -webkit-animation-timing-function: ease-out;}  
		 60%{top:-55%; -webkit-animation-timing-function: ease-in;}    
		 90% {top: -190%;}
		 100% {top: -190%; -webkit-animation-timing-function: ease-out;}  
		}
		@keyframes up_down{
		 0%{top:0;}
		 20%{top:0; animation-timing-function: ease-in;} 
		 50%{top:-45%; animation-timing-function: ease-out;}  
		 60%{top:-55%; animation-timing-function: ease-in;}    
		 90% {top: -190%;}
		 100% {top: -190%; animation-timing-function: ease-out;}  
		}	
}		
@media screen and (max-width:380px) {
	.monitor_window {
		    height: 31%;
		    left: -6%;
		    top: 10%;
		}
			
}	

/*****************************************
BASIC = GENERAL STYLES
******************************************/

	p {
    margin: 0.6em 0 1.6em !important;
    font-weight: normal;
    }	
	h1,h2,h3,h4,h5,h6{
		font-family: "Open Sans","HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
		text-rendering:optimizespeed;
		-webkit-font-smoothing:antialiased;
		color:#555555 !important;
		font-weight: 300 !important;
		line-height: 1.4em !important;
		}
	h1, .h1 {
    font-size: 3em !important;
	}	
	h2, .h2 {
    font-size: 1.8em !important;
	}	
	h3 .h3 {
    font-size: 1.5em !important;
}
	hr{border-color:#ccc}


	::selection{
		background:#ee7000;
		color:#fff;
		text-shadow:0 1px 1px rgba(0,0,0,0.2);}
	::-moz-selection{
		background:#ee7000;
		color:#fff;
		text-shadow:0 1px 1px rgba(0,0,0,0.2);
		}
.container p{line-height:1.5em !important;}
/*********************
 NAVIGATION
 *********************/
	#navigation{
		padding-right:20px;
		padding-left:20px;
		border:0;
		height: auto;
		z-index: 2;
		background: transparent none repeat scroll 0 0;
		}
	.navbar-header{
		background:#f4f5f6;
		box-shadow:0 2px 5px rgba(0,0,0,.2),0 1px 0 rgba(0,0,0,.1);
	}
	.navbar .brand{
		float:left;
		display:block;
		padding:3px 20px;
		}
	.navbar .container,.navbar .navbar-collapse{
		padding:0
		}
	.navbar-header {
	    float: none !important;
	}	
	.navbar-collapse.collapse {
	    margin-top: -52px;
	}	
	.navbar-collapse.in {
	    margin-top: 0px;
	}
	.navbar-nav {
	    background: #f4f5f6 none repeat scroll 0 0;
	    margin:0 auto;
		}
	.in > .navbar-nav {
	    margin:0 auto 2.5em;
		}	
@media (max-width: 240px){
	.navbar .brand{
		margin-left:-12px
		}
	}
	.navbar-fixed-top{
		position:fixed;
	}
	.nav a,
	.nav .liga{
		color:#302e2a !important;
		text-decoration: none;
		box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset,
					0 -1px 0 rgba(2,181,147,0.0) inset
		-webkit-transition: all 0.17s;
				transition: all 0.17s;
	}
	.nav .active > a{
		color:#09a889 !important
	}
	.nav a:hover,
	.nav a:focus,
	.navbar .nav li a:hover,
	.navbar .nav li a:focus,
	.nav .liga:hover,
	.nav .liga:focus{
		color:#ff6700 !important;
		box-shadow: 0 -10px 0 #fff inset,
					0 -13px 0 #02b593 inset;
	}
	.dropdown .dropdown-toggle .fa-arrow-down{
		-webkit-transition-duration: 0.35s;
		   -moz-transition-duration: 0.35s;
			 -o-transition-duration: 0.35s;
				transition-duration: 0.35s;

		-webkit-transition-property: -webkit-transform;
		   -moz-transition-property: -moz-transform;
			 -o-transition-property: -o-transform;
				transition-property: transform;
	}
	.dropdown.open .dropdown-toggle .fa-arrow-down{
		-webkit-transform:rotate(180deg);
		   -moz-transform:rotate(180deg);
			 -o-transform:rotate(180deg);
	    	   transform: rotate(180deg);
	}
	.navbar .nav .active a,
	.navbar .nav .active a:hover{
		background:transparent;box-shadow:none;
		}
	.navbar .nav li a,
	.navbar .nav li label{
		text-shadow:none;
		text-align:left;
		padding:1.6em 2.5em;
		line-height: 20px;
		color: #302e2a !important;
		}
	.navbar-inner{
		background:transparent;
		margin-right:auto;
		margin-left:auto}
	.navbar-fixed-top{
		margin:auto
		}
	.navbar .btn-navbar{
		float:right;padding:12px;margin:12px 0}
	.navbar-collapse .nav li a:hover,
	.navbar-collapse .dropdown-menu a:hover{
		background-color:transparent
		}
	.navbar-collapse .nav li a,
	.navbar-collapse .nav li label{
		font-weight:400;text-transform:uppercase;font-size:10px
		}
	.navbar-collapse .nav li .dropdown-menu a,
	.navbar-collapse .nav li .dropdown-menu label{
		padding:3px 20px;
		text-align:left;
		background:#f4f5f6;
		}
	
	.navbar-toggle{
		margin-top:14px
		}
.navbar-collapse.in ul {
  
}
.navbar-collapse.in,
.navbar-collapse.in ul.nav > li > a{
}
.dropdown-menu > li > a {
    line-height: 2.6em !important;
    padding: 3px 20px 10px !important;
}
	
@media (max-width: 979px){
	.navbar{padding:0 20px;
		margin-bottom:0
		}
	.navbar .brand{
		padding-right:10px;
		padding-left:10px;
		margin:0 auto;
		}
}
@media (max-width: 767px){
	.navbar .pull-right{
		box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.1), -2px 3px 16px 1px rgba(0, 0, 0, 0.2),0 0 9px 1px rgba(0, 0, 0, 0.1);
    	/*float: none !important;*/
    	min-width: 200px;
    	width: 35%;
		}
	.navbar-collapse .nav li .dropdown-menu a{
		text-align:center
		}
}
/*****************
END NAV
******************/

	#intro .col-md-offset-2{
		height:360px;
		float:none;
		margin:auto;
		position:absolute;
		top:0;bottom:0;left:0;
		right:0}

	img#logo{
		position:relative;
		left:-45px;
		display:block;
		width:300px; 
		margin:0 auto;
		margin-bottom:40px
		}
	p.browsehappy{text-align:center;
		margin-top:80px;
		font-size:50px;
		font-weight:300;
		letter-spacing:-3px
		}
	.margin25{
		margin-top:25%
		}
	.margin0{
		margin:0!important
		}
	.divide{
		margin-top:0;
		margin-bottom:2%
		}
	.divider{
		border-bottom:2px solid  rgba(80, 80, 66, 0.2)}
	.list_small{margin-top: -1em;}	
	.list_small li{
		padding: 0.5em;
		list-style: outside none disc;
		margin-left: 3em;
	}	
	h1{
		font-size:56px;
		text-align:center;
		margin-bottom:35px;
		line-height:1;
		letter-spacing:-3px
	}
	h1[id]{text-align:left}
@media (max-width: 767px){
	h1{font-size:32px}
}
	h4.small{
		font-size:13px;
		font-weight:100;
		color:#bbbdc0;
		text-transform:uppercase;
		text-align:center;
		letter-spacing:1px;
		margin:35px 0}
	.center{
		text-align:center;
	}
	.left_textalign{text-align: left}
	h5{
		border-bottom:1px solid #dfe1e3;
		padding-bottom:15px;
		margin-top:15px}
	a{	color:#00aeef;
		background: transparent;
	    background: rgba(0,0,0,0);
	}
	a:hover{color:#00aeef;text-decoration:none}
	#introducing i{
		font-size:170px;
		color:#bbbdc0;
		line-height:1.2em !important
		}
	#introducing ul li ul li i.fa.fa-check,
	#introducing ul li ul li i.fa.fa-cog{
	    color: #bbbdc0;
	    font-size: 1em;
	    margin-left: -1.5em;
   		padding: 0 0.5em 0 0;
	}
	#introducing ul li ul li,
	#introducing ul li ul li{
	    margin-right: 1.5em;
	}
	a.fa.fa-plus-circle{
		cursor:pointer;
		padding:0.5em;
		color:##13bb9e;
	}	
	/*#introducing ul li ul li i.fa.fa-check{color:#13bb9e;}*/

	textarea:focus,input:focus,a:focus,:focus{
		outline:none}
	.navbar .nav .active a,
	.navbar .nav .active a:hover,
	.navbar .nav .active a:focus{
		background-color:transparent!important;
		box-shadow:none;
		-webkit-box-shadow:none;
		-moz-box-shadow:none;
		-ms-box-shadow:none;
		-o-box-shadow:none}
	h1.header{
		font-size:3em;
		color:#505050;
		font-weight:300 !important;
		text-shadow:0 1px 2px rgba(255,255,255,0.5);
		text-align: left;
		line-height:0.8em;
		margin:0 auto 1em;


		letter-spacing:-2px}
	h2.header{text-shadow:0 1px 1px rgba(0,0,0,0.5)}
@media (max-width: 767px){
	h1.header{font-size:42px}
}
	p.header{
		font-size:1.2em;
		font-weight:300;
		text-align:justify;
		line-height:1.4em;
		text-shadow:0 1px 1px rgba(255,255,255,0.5);
		padding: 0 0 0 1em;
		max-width: 800px;
		margin:auto;
		text-align: :justify;
	}
	p.header .fa-quote-left,
	p.header .fa-quote-right{
		color:rgba(0,0,0,0.4);
		font-size:80%;
	}
	#header-top-desktop h1.header,
	#header-top-mobile h1.header{
		font-weight:600}
	#header-top-desktop h1.header,
	#header-top-mobile h1.header,
	#header-top-desktop p.header,
	#header-top-mobile p.header{
		color:#000;
		text-shadow:none}
		#header-top-desktop p.header,
		#header-top-mobile p.header{
			line-height:1.5em;
			margin:30px 10%}

@media (max-width: 767px){
	p.header{font-size:18px;padding: 1.6em 1em;
	}
		#header-top-desktop p.header{margin:15px 3%}
}

	#introducing-top-desktop,
	#introducing-top{
	 		   /*
	 		   height: 100vh;
	 		   */
		}
	#introducing-top,
	#productos{
	 	background: #ffffff;
	    }
	 .in_small_screen{
	/*
		display: none;
	*/
	}    
@media (max-width: 990px) {
	#introducing-top{
		background: #ffffff;
		background-image: none;
	    }
	.in_small_screen{
		display: block;

	}    
}	    
	#introducing-top-desktop{}   
	#introducing-top-mobile{background:#000}
	#works-top-desktop{background:#000}
	#works-top-mobile{background:#000}
	#examples-top-desktop{background:#000}
	#examples-top-mobile{background:#000}
	#testimonial-top-desktop{background:#000}
	#testimonial-top-mobile{background:#000}
	#become-developer-top-desktop{background:#000}
	#become-developer-top-mobile{background:#000}
	#affilates-top-desktop{background:#000}
	#affilates-top-mobile{background:#000}
	#header-top-desktop,
	#introducing-top-desktop,
	#introducing,
	#porqueyatla,
	#productos,
	#foot{
		padding:0 0 4.3em;
		}
	#testimonial-top-desktop,
	#testimonial-top-mobile{
		padding:60px 0
		}
	#examples-top-desktop .inner,
	#examples-top-mobile .inner{
		position:relative;
		overflow:hidden;width:100%;
		height:476px;
		margin-bottom:-476px;
		top:-150px}
	#foot{
		background: #6c6c6c;
		color:rgba(255,255,255,0.9);
		padding-bottom: 25px;
	}	
	#foot p{line-height: 1.4em;}
@media (max-width: 767px){
	#examples-top-desktop .inner,
	#examples-top-mobile .inner{
		display:none}
	}
	#examples-top-desktop .inner i,
	#examples-top-mobile .inner i{
		position:absolute;
		display:block;width:929px;
		height:929px
		}
	#examples-top-mobile .inner i{opacity:.5}
	#examples-top-desktop .inner i#black,
	#examples-top-mobile .inner i#black{
		background:url(../img/flat-iphone-mockup.png);
		right:-500px;top:-200px
		}
	#examples-top-desktop .inner i#white,
	#examples-top-mobile .inner i#white{
		background:url(../img/flat-iphone-mockup-white.png);
		left:-500px;top:-400px
		}
	#examples-top-desktop .header,
	#examples-top-mobile .header{position:relative;z-index:10}
@media (max-width: 1024px){
	#header-top-desktop,
	#introducing-top-desktop,
	#works-top-desktop,
	#examples-top-desktop,
	#testimonial-top-desktop{
		background-size:auto
		}
	}
	#introducing,#examples{padding-right:20px;padding-left:20px;background:#f4f5f6}
	#hint1{background:#4d90fe;padding:15px;text-align:center}
	#hint2{background:#4d90fe;padding:15px;text-align:center}
	#hint3{background:#4d90fe;padding:15px;text-align:center}
	#hint1 a,
	#hint2 a,
	#hint3 a{color:#fff}
	input[type="text"],
	select,
	textarea{
		border:1px solid rgba(0,0,0,0.3);
		background:#ffffff;
		border-radius:0;
		box-shadow:none;
		border:1px solid rgba(0, 0, 0, 0.2);
		padding: 0.4em 0.8em 0.5em;
	    width: 100%;
	}
	textarea {
    height: 7em;
    max-height: 7em;
    max-width: 100%;
    min-height: 7em;
    min-width: 100%;
    overflow: auto;
	}
	input[type="submit"] {
		font-weight: bold;
		text-shadow:0 1px 2px rgba(0,0,0,0.2),0 1px 0 rgba(0,0,0,0.1);
		box-shadow: 0 0 0 1px rgba(255,255,255,0.8);
		position: relative;
		font-family: FontAwesome, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;,
		sans-serif;
		padding:1em 2em;
		border-radius: 2px;
		border:none;
		-webkit-transition: 0.15s all ease-in-out;
			    transition: 0.15s all ease-in-out;
	}
	input[type="submit"]:hover,
	input[type="submit"]:focus
	 {
		box-shadow: 0 0 0 4px #05b3db inset,0 0 0 6px rgba(0,0,0,0.3) inset;
		text-shadow:0 1px 3px rgba(0,0,0,0.2),0 1px 1px rgba(0,0,0,0.1);
	}

	#address{text-align:center}
	.honeypot{display:none}
	.message{display:none}
	.alert{padding:5px 15px;margin:8px 0 0}
	#footer{padding-right:20px;padding-left:20px;background-color:#eeeff2;border-top:1px solid #e9ebed;text-shadow:1px 1px 0 rgba(255,255,255,1)}
	#footer .col-md-2{border-bottom:1px solid #dfe1e3;padding-bottom:15px}
	#footer ul{list-style:none;margin:0}
	#footer li{padding-bottom:5px;text-align:right}

@media (max-width: 767px){
	#footer li{
		padding-bottom:5px;
		text-align:center
		}
	}

/***************************
****************************/
.h { margin-top: 0; }

.button, .btn {
  display: inline-block;
  margin: 0;
  padding: 10px 15px;
  background-color: #02b593;
  border: none;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   font-weight: 300;
}
.social .boton,
.button, .btn {
	-webkit-transition: 0.15s all ease-in-out;
	-moz-transition: 0.15s all ease-in-out;
  transition: 0.15s all ease-in-out;

}
.button:hover,
.button:focus { background: #A70634;box-shadow: inset 0 0 3px 1px rgba(0, 0, 0, 0.3); }
.cerrar_tache{
	 background: #02b593 none repeat scroll 0 0;
    font-size: 3em;
    line-height: 1em;
    margin-right: -20px;
    margin-top: 21px;
    padding: 4px 22px 22px;
    z-index: 2;
	}
.cerrar_tache:hover,
.cerrar_texto:hover,
.cerrar_tache:focus,
.cerrar_texto:focus {
	background: #EF254C;
	box-shadow: 0 0 0 8px #EF254C inset, 0 0 0 10px rgba(255, 255, 255, 0.99) inset;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	}
.cerrar_texto{
	margin: -4px auto -20px -20px;
    padding: 20px;
     font-weight: bold;
	}	
.hero {
  position: relative;
  top: 50%;
  left: 50%;
  color: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.4);
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.state {
  position: absolute;
  top: 0;
  left: -100vw;
}

.state:checked ~ .content {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.state:checked ~ .backdrop {
  bottom: 0;
  opacity: 1;
  z-index: 1;
}
.robotic { display: none !important; }

.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  padding: 0 20px;
  z-index: 10;
}

.lightbox .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 2;
  max-width: 650px;
  max-height: 85vh;
  margin: 50px auto;
  padding:8px 20px 20px;
  background: #eaeaea;
  -webkit-transform: translateY(-200%);
  -ms-transform: translateY(-200%);
  transform: translateY(-200%);
  -webkit-transition: 0.3s -webkit-transform ease-in-out;
  transition: 0.3s transform ease-in-out;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 10px 2px rgba(0, 0, 0, 0.2),0 0 60px 1px rgba(0,0,0,0.3);
}

.lightbox .header,
.lightbox .footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.lightbox .header .h,
.lightbox .footer .h { margin: 0; }

.lightbox .header .button:not(:first-child),
.lightbox .footer .button:not(:first-child) { margin-left: auto; }

.lightbox .header { padding-bottom: 30px; }

.lightbox .footer { padding-top: 20px; box-shadow: 0 -4px 50px 1px rgba(234, 234, 234, 0.8); }
.lightbox .header{
	height: 60px;
	line-height: 60px;
	background: #eaeaea none repeat scroll 0 0;
}
.contact_button{
	cursor:pointer;
	background:#02b593;
	border-radius: 3px;
	box-shadow: 0 0 0 4px rgba(255,255,255,0.9);
	margin: 6.6em auto 2em;
    padding: 1em 2.6em 1.4em;
	-webkit-transition: all 0.2s;
				transition: all 0.2s;
}
.contact_button:hover,
.contact_button:focus{
	box-shadow:0 0 0 4px rgba(0,0,0,0.3);

}
.btn_solicitar{
	font-family:'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',Helvetica, Arial,'Lucida Grande',sans-serif;
	font-weight:bold;
	color:#FFF;
	letter-spacing: 1px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 0 rgba(238,123,0,0.0), 0 4px 0 rgba(255,255,255,0.0), 0 6px 0 rgba(0,0,0,0.0);
	line-height: 1.7em;
}
label .fa-laptop,
label .fa-laptop{
	color:#FFF;
}
label .fa-laptop,
.btn_solicitar{
	-webkit-transition: all 0.2s;
				transition: all 0.2s;
}
label:hover .btn_solicitar,
label:focus .btn_solicitar,
.btn_solicitar:hover,
.btn_solicitar:focus,
.btn_solicitar:active{
	color:rgba(30,30,30,0.8);
	text-shadow: 0 1px 1px rgba(255,255,255, 0.3);
	box-shadow: 0 2px 0 #02b593, 0 4px 0 rgba(255,255,255,0.98);
}
label:hover .fa-laptop,
label:focus .fa-laptop{
	color:rgba(30,30,30,0.6);
}
form p label{
	font-size: 0.8em
	}
form p{
	margin: 0.2em 0 1em !important;
}	
#foot a{
	text-shadow:none;
	color:#02b593 !important;
}
#foot a:hover,
#foot a:focus{
color:#ee7b00 !important;
text-shadow:0 1px 2px rgba(0,0,0,0.3), 0 1px 0 rgba(0,0,0,0.1);
}

@media screen and (min-height:660px) {
	.lightbox > .header {
    	height: 40px !important;
    	line-height: 40px !important;
		}
}

.lightbox .main {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow: scroll;
}

.lightbox .backdrop {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.6);
  -webkit-transition: 0.3s opacity ease-in-out;
  transition: 0.3s opacity ease-in-out;
}

.cd-main-content.cd-about {
    background-color: #eaeaea;
    padding-top: 30px;
    padding-bottom: 30px;
	}
.cd-main-content.cd-about::after {
    background-color: rgba(40, 48, 64, 0);
    background-image: linear-gradient(to top, #eaeaea, rgba(234, 234, 234, 0));
	}
.cd-main-content.cd-about::before {
    background-color: rgba(40, 48, 64, 0);
    background-image: linear-gradient(to bottom, #eaeaea, rgba(234, 234, 234, 0));
	}	
.cd-main-content::after, .cd-main-content::before {
    content: "";
    height: 60px;
    left: 0;
    position: absolute;
    width: 100%;
    pointer-events: none;
}
.cd-main-content::before {
    top: 4em;
    height: 35px;
    z-index: 1;
}
.cd-main-content::after {
    bottom: 70px;
}
.cd-about form{
	 margin-top: -1.2em;
    padding-bottom: 2em;
	}
.lightbox .header h3 {
    color: #202020 !important;
    padding-right: 1em;
    margin-top: 1.6em !important;
	}    

.sofomstar .fa-star{ color:#579697}
.bolsastar .fa-star{ color:#df9a3a}
.bancostar .fa-star{ color:#ff6b00}
.sofomstar .fa-star,
.bolsastar .fa-star,
.bancostar .fa-star{text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 4px rgba(0, 0, 0, 0.3);}

.cd-main-content  p {
	line-height: 1.5em;
	text-align: justify;
	padding-right:3em;
	margin-top: 0px;
}
.text_align_left p{
	text-align: left;
}

.doto{
	color: #02b593;
  text-shadow:0 2px 0px rgba(255,255,255,0.1);
  margin-left: -2em;
  padding-right:0.6em;
  }
 /**********
 YATLAS COLORES
 **********/ 
 .yatla_colors{
 	width: 100%;
 	margin: 0 auto;
 	padding: 7em 0 2em;
 }
 .yatla_bancos{background: #ee7b00 none repeat scroll 0 0 !important;}
 .yatla_casadebolsa{background: #df9a3a none repeat scroll 0 0 !important;}
 .yatla_sofom{background: #579697 none repeat scroll 0 0 !important;}

.nueva_era img{
	max-width:440px;
	width:100%;
	height: auto;
	margin:0 auto
}
.nueva_era_blk {
    height: auto;
    margin-bottom: 0;
    padding: 11em 0 6em;
    width: 100%;
}
@media screen and (max-width:690px) {
 .lightbox .header h3 {
    text-align: justify !important;
    font-size: 1.2em;
	}
	.cerrar_tache {
     line-height: 0.4em;
    margin-top: 35px;
    line-height: 0.5em;
	}	
	.lightbox .header {
    height: 23px;
    line-height: 23px;
	}	
	.cd-main-content::before {
    height: 35px;
    top: 38px;
	}
	.nueva_era img,
	.contact_button{
			width:80%;
		}
	.yatla_colors{
 	margin: 0 auto;
 	padding: 4em 0 1.6em;
 	}
 	.contact_button{
 	 margin: 4.6em auto 2em;
 	}	
 	.fa-2x {
    font-size: 1.6em !important;
}
} 
@media screen and (max-height:690px) {
 .lightbox .header h3 {

    text-align: justify !important;
    font-size: 1.2em; 
	}
	.cerrar_tache {
     line-height: 0.4em;
    margin-top: 35px;
    line-height: 0.5em;
	}	
	.lightbox .header {
    height: 30px;
    line-height: 23px;
	}	
	.cd-main-content::before {
    height: 35px;
    top: 38px;

	}
	form p {
    margin: 0.4em 0 1em !important;
	}
} 
@media screen and (max-width:991px) {
.yatla_label .yatla-title::after {
      content: '';
	  position: absolute;
	  left: 50%;
	  top: calc(16% + 30px);
	  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0);
	  -moz-transform: translateX(-50%) translateY(-50%) scaleX(0);
	  -ms-transform: translateX(-50%) translateY(-50%) scaleX(0);
	  -o-transform: translateX(-50%) translateY(-50%) scaleX(0);
	  transform: translateX(-50%) translateY(-50%) scaleX(0);
	  height: 4px;
	  width: 128px;
	  background-color: #02b593;
	  -webkit-transition: -webkit-transform 0.26s;
	  -moz-transition: -moz-transform 0.26s;
	  transition: transform 0.26s;
	}
}
/****************************************************
*****************************************************/

	.
	#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:9999}
	#status{width:64px;height:64px;position:absolute;left:50%;top:50%;background-repeat:no-repeat;background-position:center;margin:-32px 0 0 -32px}
	#preloader .timer{
		-webkit-box-sizing:border-box;
		   -moz-box-sizing:border-box;
			-ms-box-sizing:border-box;
				box-sizing:border-box;
		display:block;width:64px;
		height:64px;
		margin:auto;
		border-width:5px;
		border-style:solid;
		border-color:#000 transparent transparent;
		border-radius:32px;text-indent:-9999px;
		-webkit-animation:spinner 1s linear infinite;animation:spinner 1s linear infinite
		}
	#more{
			text-align:center;
			position:relative;
			height:100px;
			right:0;
			left:0;
			bottom:82px;
			pointer-events:none;
			z-index: 2;
		}
	#more a{pointer-events:all}
	.delay2{
					animation-delay:2s;
			   -moz-animation-delay:2s;
			-webkit-animation-delay:2s;
				 -o-animation-delay:2s;
			}
	.delay5{
					animation-delay:5s !important;
			   -moz-animation-delay:5s !important;
			-webkit-animation-delay:5s !important;
				 -o-animation-delay:5s !important;
			}		
	.animated{
			-webkit-animation-duration:2s;
			-moz-animation-duration:2s;
			-o-animation-duration:2s;
			animation-duration:2s;
			-webkit-animation-fill-mode:both;
			   -moz-animation-fill-mode:both;
				 -o-animation-fill-mode:both;
					animation-fill-mode:both
		}
/*******************
fadeInUp
 ******************/		
		@-webkit-keyframes fadeInUp{
			0%{opacity:0;-webkit-transform:translateY(20px)}

			100%{opacity:1;-webkit-transform:translateY(0)}
		}
		@-moz-keyframes fadeInUp{
			0%{opacity:0;-moz-transform:translateY(20px)}
			100%{opacity:1;-moz-transform:translateY(0)}
		}
		@-o-keyframes fadeInUp{0%{
			opacity:0;-o-transform:translateY(20px)}
			100%{opacity:1;-o-transform:translateY(0)}
		}
		@keyframes fadeInUp{
			0%{opacity:0;transform:translateY(20px)}
			100%{opacity:1;transform:translateY(0)}
		}
	.fadeInUp{
			-webkit-animation-name:fadeInUp;
			   -moz-animation-name:fadeInUp;
				 -o-animation-name:fadeInUp;
					animation-name:fadeInUp
		}
/*******************
 boinceInUp
 ******************/
 		@-o-keyframes bounceInUp {
		  from, 60%, 75%, 90%, 100% {
		    -o-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		  }

		  from {
		    opacity: 0;
		    -o-transform: translate3d(0, 3000px, 0);
		    transform: translate3d(0, 3000px, 0);
		  }

		  50% {
		    opacity: 0;
		    -o-transform: translate3d(0, 100px, 0);
		    transform: translate3d(0, 100px, 0);
		  }

		  60% {
		    opacity: 1;
		    -o-transform: translate3d(0, -20px, 0);
		    transform: translate3d(0, -20px, 0);
		  }

		  75% {
		    -o-transform: translate3d(0, 10px, 0);
		    transform: translate3d(0, 10px, 0);
		  }

		  90% {
		    -o-transform: translate3d(0, -5px, 0);
		    transform: translate3d(0, -5px, 0);
		  }

		  100% {
		    -o-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}


		 @-webkit-keyframes bounceInUp {
		  from, 60%, 75%, 90%, 100% {
		    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		  }

		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 3000px, 0);
		    transform: translate3d(0, 3000px, 0);
		  }

		  50% {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 100px, 0);
		    transform: translate3d(0, 100px, 0);
		  }

		  60% {
		    opacity: 1;
		    -webkit-transform: translate3d(0, -20px, 0);
		    transform: translate3d(0, -20px, 0);
		  }

		  75% {
		    -webkit-transform: translate3d(0, 10px, 0);
		    transform: translate3d(0, 10px, 0);
		  }

		  90% {
		    -webkit-transform: translate3d(0, -5px, 0);
		    transform: translate3d(0, -5px, 0);
		  }

		  100% {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}

		@keyframes bounceInUp {
		  from, 60%, 75%, 90%, 100% {
		    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		  }

		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 3000px, 0);
		    transform: translate3d(0, 3000px, 0);
		  }

		  50% {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 100px, 0);
		    transform: translate3d(0, 100px, 0);
		  }

		  60% {
		    opacity: 1;
		    -webkit-transform: translate3d(0, -20px, 0);
		    transform: translate3d(0, -20px, 0);
		  }

		  75% {
		    -webkit-transform: translate3d(0, 10px, 0);
		    transform: translate3d(0, 10px, 0);
		  }

		  90% {
		    -webkit-transform: translate3d(0, -5px, 0);
		    transform: translate3d(0, -5px, 0);
		  }

		  100% {
		    -webkit-transform: translate3d(0, 0, 0);
		    transform: translate3d(0, 0, 0);
		  }
		}

		.bounceInUp {
		  -webkit-animation-name: bounceInUp;
		  -moz-animation-name: bounceInUp;
		  -o-animation-name: bounceInUp;
		  animation-name: bounceInUp;
		}

	/**************
	PULSE
	***************/
	.pulse {
	-webkit-animation: pulse 5s infinite;
	   -moz-animation: pulse 5s infinite;
	   	 -o-animation: pulse 5s infinite;
	  		animation: pulse 5s infinite;
	}
		@-webkit-keyframes pulse {
		    0% { opacity:0;-webkit-transform: scale(0); }
		    40% { opacity:1;-webkit-transform: scale(1.35); }
		    90% { opacity:0;-webkit-transform: scale(2); }
		    100% { opacity:0;-webkit-transform: scale(2); }
		}
		@-moz-keyframes pulse {
		    0% { opacity:0;-moz-transform: scale(0); }
		    40% { opacity:1;-moz-transform: scale(1.35); }
		    90% { opacity:0;-moz-transform: scale(2); }
		    100% { opacity:0;-moz-transform: scale(2); }
		}
		@-o-keyframes pulse {
		    0% { opacity:0;-o-transform: scale(0); }
		    40% { opacity:1;-o-transform: scale(1.35); }
		    90% { opacity:0;-o-transform: scale(2); }
		    100% { opacity:0;-o-transform: scale(2); }
		}
		@keyframes pulse {
		    0% { opacity:0;transform: scale(0); }
		    50% { opacity:1;transform: scale(1.35); }
		    90% { opacity:0;transform: scale(2); }
		    100% { opacity:0;transform: scale(2); }
		}
		.pulse {
		    -webkit-animation-name: pulse;
		    	-moz-animation-name: pulse;
		    	 -o-animation-name: pulse;
		   		    animation-name: pulse;
		}
	.bolita{
		border-radius: 50%;
		background: #fff;
		height: 80px;
		width: 80px;
		box-shadow: 0 0 1px 1px rgba(0,0,0,0.4);
		margin: -95px auto 0;
		z-index: 0;
		filter:alpha(opacity=0);
		opacity: 0;
	}	
/************/	
@media (max-width: 979px){a.download,a.documentation,a.discus{font-size:48px;float:none;display:block;width:100%}
}
	#introducing h1{font-size:72px;font-weight:500}
	#introducing h2{font-size:50px;font-weight:300;text-align:center;margin-bottom:35px;line-height:1.5;letter-spacing:-1px}
	.container{margin-right:auto;margin-left:auto;padding:0}
	.container img{max-width:100%;margin:0 auto;}
	


/**************************
PricingTables
***************************/
.cd-pricing-list {
  margin: 2em 0 0;
}
.cd-pricing-list > li {
  position: relative;
  margin-bottom: 1em;
  background-color: #FFFFFF;
  /* Firefox bug - 3D CSS transform, jagged edges */
  outline: 1px solid transparent;

  /*solo Para Ver las tablasBORRABRE*/
  border:1px solid rgba(0,0,0,0.0);
  box-shadow:0 2px 0 rgba(80, 80, 66, 0.25);
}
 /**tableHEADER**/
.cd-pricing-header {
  position: relative;
  z-index: 1;
  height: 60px;
  padding: 1.1em 0.2em 0;
  pointer-events: none;
  background-color: #497dbf;
  color: #FFFFFF;
}
.cd-pricing-header h2 {
	color: rgba(230, 230, 230, 0.99) !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    line-height: 0.7em !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.06);
    text-transform: uppercase;
}
.main .cd-pricing-header h2 {
padding: 0.45em;
}
.cd-pricing-header h2 span{
	font-size: 0.7em;
	color:#FFFFFF;
}
 /**tableBODY**/ 
.cd-pricing-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cd-pricing-features {
  /*width: 600px;*/
}
.cd-pricing-features:after {
  content: "";
  display: table;
  clear: both;
}
.cd-pricing-features li {
	color: rgba(0, 0, 0, 0.74);
  /*width: 100px;*/
  width: auto;
  /*float: left;*/
  float:none;
  padding: 1em 1em 1.4em;
  font-size: 1.4rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.3rem;
  overflow: hidden;
  height: 7em;
}
.cd-pricing-list > li:first-child .cd-pricing-features li {
  text-align: left;
  padding:1.2em;
}

.cd-pricing-list > li .cd-pricing-features li {
	  padding-top: 1.5em;
}	
.cd-pricing-features em{
  font-family: serif;
  font-style: italic;
  font-size: 1rem;
}
.cd-pricing-list > li {
    width: 13.33333%;
    float: left;
  }
   .cd-pricing-list > li.main {
    width: 60%;
  }
.cd-pricing-features li:nth-of-type(2n+1) {
    background-color: rgba(80, 80, 66, 0.16);
  }

@media only screen and (min-width: 768px) {
  .cd-pricing-list {
    margin: 3em 0 0;
  }
   .cd-pricing-list:after {
    content: "";
    display: table;
    clear: both;
  }
  .cd-pricing-list > li {
    width: 13.33333%;
    float: left;
  }
   .cd-pricing-list > li.main {
    width: 60%;
  }
   .cd-pricing-header {
    height: auto;
    padding: 1em 0.6em 1.2em;
    pointer-events: auto;
    text-align: left;
    color: #173d50;
    height: 4em;
  }

  .main .cd-pricing-header {
    text-align: center;
  } 
  .cd-pricing-header h2 {
    font-size: 1.1em !important;
    line-height: 0.7em !important;
}
.cd-pricing-body {
    overflow-x: visible;
  }
  .cd-pricing-features {
    width: auto;
  }
  .cd-pricing-features li {
    float: none;
    width: auto;
    padding: 1em;
    height: 5em;
  }
  .cd-popular .cd-pricing-features li {
    margin: 0 3px;
  }
 
  .cd-has-margins .cd-popular .cd-pricing-features li, .cd-secondary-theme .cd-popular .cd-pricing-features li {
    margin: 0;
  }
  .cd-secondary-theme .cd-pricing-features li {
    color: #FFFFFF;
  }
  .cd-secondary-theme .cd-pricing-features li:nth-of-type(2n+1) {
    background-color: transparent;
  }
}
@media only screen and (max-width: 560px) {
	.cd-pricing-header {
	  height: 60px;
	  padding: 0.81em 1px 0;
	}
	.cd-pricing-header h2 {
    font-size: 0.75em !important;
    line-height: 0.8em !important;
    text-transform: uppercase;
	}
	.cd-pricing-features li {
    height:9.5em;
	}
	.cd-pricing-list > li:first-child .cd-pricing-features li {
	  padding-top: 1em;
	}
	.cd-pricing-list > li .cd-pricing-features li {
	  padding-top: 2.2em;
	}	
}/**SOCIAL**/
.social{
	position:fixed;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
	display:block;
	background: transparent;
	background: rgba(255,255,255,0);
	z-index: 1;
	-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   transform-style: preserve-3d;
   right: 0;
	}
.social .boton,
#foot .social .boton{
	padding:0.4em 1em 0.4em 0.5em;
	float:none;
	}
.social > .boton a,
#foot .social > .boton a{
	color: #FFF !important;
	text-decoration: none !important;
}		 
.social .boton:hover,
.social .boton:focus,
#foot .social .boton:hover,
#foot .social .boton:focus{
	box-shadow:0 1px 8px rgba(0,0,0,0.3),0 1px 4px rgba(0,0,0,0.3);
	background: #f4f5f6;
}	

.social .boton:hover a,
.social .boton:focus a,
#foot .social .boton:hover a,
#foot .social .boton:focus a{color:rgba(0,0,0,0.6) !important;}	

.facebook{background:#557bba}
.twitter{background:#52d1ef }
.gmail	{background:#e33e3a }
.linkedin{background:#0798e0}
@media screen and (max-width:890px) {
.social {
    display: table;
    position: relative;
	}
.social .boton, #foot .social .boton {
    float: left;
	}	
}