@charset "utf-8";
/* CSS Document */

/****************
Reset
****************/

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

body {    
line-height:1;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {    
display:block;}

blockquote, q {    
quotes:none;}

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

a {    
margin:0;    
padding:0;    
font-size:100%;    
vertical-align:baseline;   
background:transparent;}

abbr[title], dfn[title] {    
border-bottom:1px dotted;    
cursor:help;}

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

hr {    
display:block;   
height:1px;   
border:0;    
border-top:1px solid #cccccc;    
margin:1em 0;    
padding:0;}

input, select {    
vertical-align:middle;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover, a:active {
  outline: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button, input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  vertical-align: top;
}

/****************
Principal
****************/

body {
  margin: 0;
  font-family:'Podkova', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  color: #222;
  background-color: #eeeeee;
  background-size: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: #fff;
  text-decoration: none;
}

h1,h2{
	color: #ff1d25;
	font-weight: 700;
	}

h1{
	font-size: 80px;
	}


.fondog{
	background: #252525;
	border-bottom: 14px solid #363636;
	z-index: 3;
	position: relative;}

#logo3c{
	background: url(../img/logo2.jpg) no-repeat;
	float: left;
	text-indent: -9999px;
	width: 150px;
	height: 92px;
	}

nav{
	padding: 30px 0 30px;}
	
nav ul{
	float: right;list-style:none;
	margin-top: 35px;
	font-family: 'Podkova', Arial, Helvetica, sans-serif;
	font-size: 18px;}
	
nav ul li{
	display: inline;
	font-size: 20px;
	margin: 0 15px;}

nav ul li a{
	border-bottom: 2px solid #fff;}

nav ul li a:hover, nav li .active{
	border-bottom: 2px solid #ff1d25;
	color: #ff1d25;}
	
.clearer{
	clear: both;}

.wrapper {
	width: 1100px;
	margin: 0 auto;
	}

.btn{
	padding: 10px 12px 8px;
	width: 100px;
	}

.rojo{
	background: #ff1d25;}

.lrojo{
	color: #ff1d25;}

footer{
	background: #b3b3b3;
	padding: 25px 0 25px;}

footer section, .pilares-io{
	width: 316px;
	margin: 0 10px;
	padding: 0 15px 0;
	float: left;}
	
footer section p{
	font-size: 20px;
	line-height: 24px;}

footer #facebook, footer #twitter{
	background: url(../img/facebook.jpg);
	background-position: 0 -39px;
	float: left;
	margin: 5px 5px 0;
	width: 40px;
	height: 39px;}

footer #facebook:hover{
	background-position: 0 0;
}

footer #twitter{
	background: url(../img/twitter.jpg) no-repeat;
	background-position: 0 -39px;
}

footer #twitter:hover{
	background-position: 0 0;
}
/****************
HOME
****************/

#intro{
	font-size: 20px;
	font-family: 'eurostile_extended_2regular', helvetica, sans-serif;
	line-height: 25px;
	margin: 20px auto 20px;
	text-align: center;}

#intro h2{
	color: #fff;}

#servicio, #servicio2{
	background: #e5e5e5;
	padding: 30px 0 25px;
	border-bottom: 14px solid #dcdcdc;}


#servicio2 h3{
	color: #ff1d25;
	font-size: 30px;
	margin: 40px 0 30px;}
	
.servicios{
	background: #fafafa;
	float: left;
	width: 316px;
	margin: 10px 10px;
	padding: 15px 15px 20px;}

.servicios h2{
	color: #000;
	font-size: 24px;
	font-weight: 700;
	margin: 10px 0 8px;}

#servicio2 .servicios h2{
	margin: 18px 0 0;}

.servicios p{
	margin: 5px 0 18px;}

.servicios .imgfondo{
	background: #ff1d25;
	width: 316px;
	height: 147px;
	position: relative;}

.servicios .imgfondo img{
	position: absolute;
	top: 0;
	left: 0;}

.servicios:hover{
	-webkit-box-shadow:   3px 3px 0px #C9C9C9;
    box-shadow:   3px 3px 0px #C9C9C9;}
	
.servicios:hover img{
	opacity: 0.8;
}

#noticias, #aliado{
	background: #d6d6d6;
	border-bottom: 14px solid #bebebe;
	width: 100%;
	height: 175px;}

#twitterbird{
	width: 185px;
	margin-top: 40px;
	float: left;}

/****************
SOMOS
****************/

#pilares{
	margin: 10px 0 20px;}

.pilares-io{
	color: #fff;
	width: 300px;
	margin: 20px 18px 30px;
	text-align: center;}

.pilares-io h2{
	color: #fff;
	font-size: 28px;
	margin: 20px 0 8px;
	letter-spacing: 2px;}

#aliado{
	height: auto;
	padding: 0;
	font-size: 18px;}

#aliado img{
	float: left;
	margin: 0 0 0 30px;
	width: 470px;}

#diferenciador{
	width: 600px;
	margin: 40px auto 0;
	float: left;}

/* Effect 6 */

.hi-icon:before {
	font-family: 'ecoicon';
	speak: none;
	font-size: 48px;
	line-height: 90px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.hi-icon-mobile:before {
	content: "\e009";
}

.hi-icon-screen:before {
	content: "\e00a";
}

.hi-icon-earth:before {
	content: "\e002";
}

.hi-icon-support:before {
	content: "\e000";
}

.hi-icon-locked:before {
	content: "\e001";
}

.hi-icon-cog:before {
	content: "\e003";
}

.hi-icon-clock:before {
	content: "\e004";
}

.hi-icon-videos:before {
	content: "\e005";
}

.hi-icon-list:before {
	content: "\e006";
}

.hi-icon-refresh:before {
	content: "\e007";
}

.hi-icon-images:before {
	content: "\e008";
}

.hi-icon-pencil:before {
	content: "\e00b";
}

.hi-icon-link:before {
	content: "\e00c";
}

.hi-icon-mail:before {
	content: "\e00d";
}

.hi-icon-location:before {
	content: "\e00e";
}

.hi-icon-archive:before {
	content: "\e00f";
}

.hi-icon-chat:before {
	content: "\e010";
}

.hi-icon-bookmark:before {
	content: "\e011";
}

.hi-icon-user:before {
	content: "\e012";
}

.hi-icon-contract:before {
	content: "\e013";
}

.hi-icon-star:before {
	content: "\e014";
}

/**/

.pilares-io .hi-icon-wrap {
	text-align: center;
	margin: 0 auto;
}

.pilares-io .hi-icon {
	display: inline-block;
	font-size: 0px;
	cursor: pointer;
	margin: 15px 30px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	cursor:default;
	color: #fff;
}

.pilares-io .hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box; 
	-moz-box-sizing: content-box; 
	box-sizing: content-box;
}

.pilares-io .hi-icon:before {
	font-family: 'ecoicon';
	speak: none;
	font-size: 50px;
	line-height: 100px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.pilares-io .hi-icon-effect-6 .hi-icon {
	box-shadow: 0 0 0 2px rgba(255,255,255,1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.no-touch .pilares-io:hover .hi-icon-effect-6 .hi-icon{
	background: rgba(255,255,255,1);
	color: #252525;
}

.no-touch .pilares-io:hover .hi-icon-effect-6 .hi-icon:before {
	-webkit-animation: spinAround 2s linear infinite;
	-moz-animation: spinAround 2s linear infinite;
	animation: spinAround 2s linear infinite;
}

@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}


/****************
Transitions
****************/

nav ul li a, .servicios, .servicios .imgfondo img, footer #twitter, footer #facebook, input[type="text"], textarea, .clientes ul li img{
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;}

/****************
Slider
****************/

.slide{
	margin: 25px auto 40px;}
	
.sl-slider-wrapper {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.sl-slider {
	position: absolute;
	top: 0;
	left: 0;
}

/* Slide wrapper and slides */

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
} 

.sl-slide {
	z-index: 1;
}

/* The duplicate parts/slices */

.sl-content-slice {
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Horizontal slice */

.sl-slide-horizontal .sl-content-slice {
	width: 100%;
	height: 50%;
	left: -200px;
	-webkit-transform: translateY(0%) scale(1);
	-moz-transform: translateY(0%) scale(1);
	-o-transform: translateY(0%) scale(1);
	-ms-transform: translateY(0%) scale(1);
	transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
	top: -200px;
	padding: 200px 200px 0px 200px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
	top: 50%;
	padding: 0px 200px 200px 200px;
}

/* Vertical slice */

.sl-slide-vertical .sl-content-slice {
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper {
	position: absolute;
}

.sl-content {
	width: 100%;
	height: 100%;
	background: #fff;
}

/* Default styles for background colors */
.sl-slide-horizontal .sl-slide-inner {
	background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
	background: #ccc;
}

.sl-caption{
	background: rgba(0,0,0,0.6);
	padding: 40px 0 10px;
	position: absolute;
	width:100%;
	top: 160px;
}
	
.demo-1 .sl-slider-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

  .sl-slider-wrapper {
	width: 100%;
	height: 450px;
	overflow: hidden;
	position: relative;
}

  .sl-slider h2,
  .sl-slider blockquote {
	font-family: eurostile_extended_2regular, Arial, Helvetica, sans-serif;
	padding: 10px 30px 10px 30px;
	width: 80%;
	max-width: 960px;
	font-weight: 400;
	color: #fff;
	margin: 0 auto;
	position: relative;
	z-index: 100;
}

  .sl-slider h2 {
	font-size: 70px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

  .sl-slider blockquote {
	font-size: 28px;
	line-height: 32px;
	padding-top: 15px;
	font-weight: 300;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
}

  .sl-slider blockquote cite {
	font-size: 28px;
	font-weight: 400;
	font-style: normal;
	padding-top: 20px;
	display: inline-block;
}

  .bg-img {
	padding: 200px;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: absolute;
	top: -200px;
	left: -200px;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
}

/* Custom navigation arrows */

.nav-arrows span {
	position: absolute;
	z-index: 2000;
	top: 50%;
	width: 40px;
	height: 40px;
	border: 8px solid #ddd;
	border: 8px solid rgba(150,150,150,0.4);
	text-indent: -90000px;
	margin-top: -40px;
	cursor: pointer;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-arrows span:hover {
	border-color: rgba(150,150,150,0.9);
}

.nav-arrows span.nav-arrow-prev {
	left: 5%;
	border-right: none;
	border-top: none;
}

.nav-arrows span.nav-arrow-next {
	right: 5%;
	border-left: none;
	border-bottom: none;
}

/* Custom navigation dots */

.nav-dots {
	text-align: center;
	position: absolute;
	bottom: -20px;
	height: 30px;
	width: 100%;
	left: 0;
	z-index: 1000;
}

.nav-dots span {
	display: inline-block;
	position: relative;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	margin: 3px;
	background: #ddd;
	background: rgba(150,150,150,0.4);
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.4), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}

  .nav-dots span {
	background: rgba(150,150,150,0.1);
	margin: 6px;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.4), 
		inset 0 1px 1px rgba(0,0,0,0.1),
		0 0 0 2px rgba(255,255,255,0.5);
}

  .nav-dots span.nav-dot-current,
  .nav-dots span:hover {
	box-shadow: 
		0 1px 1px rgba(219,4,4,0.8), 
		inset 0 1px 1px rgba(0,0,0,0.1),
		0 0 0 5px rgba(219,4,4,0.8);
}

.nav-dots span.nav-dot-current:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	top: 3px;
	left: 3px;
	border-radius: 50%;
	background: rgba(219,4,4,0.8);
}

.bg-img-1 {
	background-image: url(../img/4.jpg);
	background-size: 85%;
}

.bg-img-2 {
	background-image: url(../img/2.jpg);
	background-size: 85%;
}
.bg-img-3 {
	background-image: url(../img/5.jpg);
	background-size: 85%;
}

/* Animations for content elements */

.sl-trans-elems .deco{
	-webkit-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-moz-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-o-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	-ms-animation: roll 1s ease-out both, fadeIn 1s ease-out both;
	animation: roll 1s ease-out both, fadeIn 1s ease-out both;
}
.sl-trans-elems h2{
	-webkit-animation: moveUp 1s ease-in-out both;
	-moz-animation: moveUp 1s ease-in-out both;
	-o-animation: moveUp 1s ease-in-out both;
	-ms-animation: moveUp 1s ease-in-out both;
	animation: moveUp 1s ease-in-out both;
}
.sl-trans-elems blockquote{
	-webkit-animation: fadeIn 0.5s linear 0.5s both;
	-moz-animation: fadeIn 0.5s linear 0.5s both;
	-o-animation: fadeIn 0.5s linear 0.5s both;
	-ms-animation: fadeIn 0.5s linear 0.5s both;
	animation: fadeIn 0.5s linear 0.5s both;
}
.sl-trans-back-elems .deco{
	-webkit-animation: scaleDown 1s ease-in-out both;
	-moz-animation: scaleDown 1s ease-in-out both;
	-o-animation: scaleDown 1s ease-in-out both;
	-ms-animation: scaleDown 1s ease-in-out both;
	animation: scaleDown 1s ease-in-out both;
}
.sl-trans-back-elems h2{
	-webkit-animation: fadeOut 1s ease-in-out both;
	-moz-animation: fadeOut 1s ease-in-out both;
	-o-animation: fadeOut 1s ease-in-out both;
	-ms-animation: fadeOut 1s ease-in-out both;
	animation: fadeOut 1s ease-in-out both;
}
.sl-trans-back-elems blockquote{
	-webkit-animation: fadeOut 1s linear both;
	-moz-animation: fadeOut 1s linear both;
	-o-animation: fadeOut 1s linear both;
	-ms-animation: fadeOut 1s linear both;
	animation: fadeOut 1s linear both;
}
@-webkit-keyframes roll{
	0% {-webkit-transform: translateX(500px) rotate(360deg);}
	100% {-webkit-transform: translateX(0px) rotate(0deg);}
}
@-moz-keyframes roll{
	0% {-moz-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-moz-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-o-keyframes roll{
	0% {-o-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-o-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-ms-keyframes roll{
	0% {-ms-transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {-ms-transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@keyframes roll{
	0% {transform: translateX(500px) rotate(360deg); opacity: 0;}
	100% {transform: translateX(0px) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes moveUp{
	0% {-webkit-transform: translateY(40px);}
	100% {-webkit-transform: translateY(0px);}
}
@-moz-keyframes moveUp{
	0% {-moz-transform: translateY(40px);}
	100% {-moz-transform: translateY(0px);}
}
@-o-keyframes moveUp{
	0% {-o-transform: translateY(40px);}
	100% {-o-transform: translateY(0px);}
}
@-ms-keyframes moveUp{
	0% {-ms-transform: translateY(40px);}
	100% {-ms-transform: translateY(0px);}
}
@keyframes moveUp{
	0% {transform: translateY(40px);}
	100% {transform: translateY(0px);}
}
@-webkit-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-o-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes fadeIn{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@-webkit-keyframes scaleDown{
	0% {-webkit-transform: scale(1);}
	100% {-webkit-transform: scale(0.5);}
}
@-moz-keyframes scaleDown{
	0% {-moz-transform: scale(1);}
	100% {-moz-transform: scale(0.5);}
}
@-o-keyframes scaleDown{
	0% {-o-transform: scale(1);}
	100% {-o-transform: scale(0.5);}
}
@-ms-keyframes scaleDown{
	0% {-ms-transform: scale(1);}
	100% {-ms-transform: scale(0.5);}
}
@keyframes scaleDown{
	0% {transform: scale(1);}
	100% {transform: scale(0.5);}
}
@-webkit-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-moz-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-o-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@-ms-keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}
@keyframes fadeOut{
	0% {opacity: 1;}
	100% {opacity: 0;}
}

/*************
HICIMOS
*************/

.clientes{
	margin: 30px auto 15px;
	font-size: 25px;
	font-family: 'eurostile_extended_2regular', helvetica, sans-serif;
	line-height: 25px;
	margin: 20px auto 20px;
}

.clientes h2{
		color: #fff;}
		
.clientes ul{
	list-style: none;
	margin: 20px auto;}
	
.clientes ul li{
	width: 250px;
	height: 100px;
	float: left;
	margin:5px;
	padding: 0;
	background: #ff1d25;
	}

.clientes ul li img{
	opacity: 1;
	width: 100%;}
	
.clientes ul li img:hover{
	opacity: 0.7;}
	

/*************
FOTOGRID
*************/

#grid_fotos{
	padding: 70px 0 20px;
	border-bottom: 14px solid #dcdcdc;}
	
#grid_fotos, .prod_space h2{
	font-size: 25px;
	font-family: 'eurostile_extended_2regular', helvetica, sans-serif;
	line-height: 25px;
	}

#grid_fotos h2, .prod_space h2{
	color: #222;}
	
.grid {
	max-width: 100%;
	list-style: none;
	margin: 30px auto;
	padding: 0;
}

.grid li {
	display: block;
	float: left;
	padding: 7px;
	width: 31%;
	opacity: 0;
}

.grid li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
	opacity: 1;
}

.grid li a,
.grid li img {
	outline: none;
	border: none;
	display: block;
	max-width: 100%;
}

/* Effect 1: opacity */
.grid.effect-1 li.animate {
	-webkit-animation: fadeIn 0.65s ease forwards;
	-moz-animation: fadeIn 0.65s ease forwards;
	animation: fadeIn 0.65s ease forwards;
}

@-webkit-keyframes fadeIn {
	to { opacity: 1; }
}

@-moz-keyframes fadeIn {
	to { opacity: 1; }
}

@keyframes fadeIn {
	to { opacity: 1; }
}

/**************
LIGHTBOX
**************/

#lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
  opacity: 0.85;
  display: none;
}

/* line 15, ../sass/lightbox.sass */
#lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 24, ../sass/lightbox.sass */
#lightbox img {
  width: auto;
  height: auto;
}
/* line 27, ../sass/lightbox.sass */
#lightbox a img {
  border: none;
}

/* line 30, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: #eee;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 39, ../sass/lightbox.sass */
.lb-container {
  padding: 10px;
}

/* line 42, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 40%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 51, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 59, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 62, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 65, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
  /* Trick IE into showing hover */
  display: block;
}

/* line 72, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}

/* line 76, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}

/* line 81, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../img/prev.png) left 48% no-repeat;
}

/* line 85, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

/* line 88, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 95, ../sass/lightbox.sass */
.lb-data {
  padding: 0 10px;
  color: #bbbbbb;
}
/* line 98, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 103, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 16px;
  line-height: 17px;
}
/* line 107, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: none;
}
/* line 112, ../sass/lightbox.sass */
.lb-data .lb-close {
  width: 35px;
  float: right;
  padding-bottom: 0.7em;
  outline: none;
}
/* line 117, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
}

/*************
SERVICIOS
*************/

.prod_wrap{
	border-bottom: 14px solid #dcdcdc;}

.prod_space{
	margin: 40px auto 50px;
	}

.productos{
	width: 80%;
	margin-bottom: 40px;
	float: left;
	}

.productos img{
	width: 100%;
	margin: 0 auto 25px;}

.productos h2{
	margin-bottom: 20px;}
		
.navprod{
	width: 15%;
	float: right;}

.navprod ul{
	text-align: right;
	list-style: none;
}	


.navprod ul li{
	background: none;
	font-weight: bold;
	font-size: 18px;
	}

.navprod ul li{
	color: #222;}
	
.navprod ul li{
	padding: 10px 15px;
	border-bottom: 2px solid #BBB;
	margin: 0px auto;
}	

.navprod ul a li{
	color: #222;
	font-weight: normal;
	background: url(../img/hoverc.png) no-repeat;
	background-position: 180px 0px;
	background-size: 100%;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}

.navprod ul a li:hover{
	background-position: 0px 0px;
	color: #FFF;}
				
#hacemos{
	width: 450px;
	float: left;
	margin: 40px 0 30px;
	}

#hacemos #intro{
	text-align: left;}
	
#workflow{
	width: 630px;
	margin: 50px 0;
	float: right;}

#workflow ul{
	list-style: none;}

#workflow ul li{
	display: inline;
	float: left;
	width: 72px;
	height: 72px;
	margin: 20px 12px;
	text-align: center;
	border: 3px solid #999;
	color: #999;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	font-size: 18px;}

#workflow ul li p{
	margin-top: -10px;
	opacity: 0;
}
	
#workflow ul li .hi-icon:before{
	font-size: 38px;
	line-height: 75px;}

#workflow ul li.line{
	border: none;
	border-bottom: 2px dashed #BBB;
	width: 30px;
	height: 1px;
	margin: 60px 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;}
	
/*************
CONTACTO
*************/

.suscripcion{
	margin: 40px auto 10px;}

#contacto_respuesta{
	margin: 30px auto 15px;
	font-size: 60px;
	line-height: 65px;
}

label{
	color: #fff;
	font-size: 20px;
	display: block;
	margin: 10px 0;}
	
input[type="text"], textarea{
	background: #CCC;
	padding: 8px 15px;
	border: none;
	width: 100%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;}

input[type="text"]:hover, textarea:hover{
	background: #eee;}

.labels{
	float: left;
	width: 47%;}

.labels div{
	margin-top: 10px;}

#mensaje{
	width: 48%;}

textarea{
	height: 167px;}

#mensaje, #btn_send{
	float: right;}

#btn_send{
	padding: 10px 12px 8px;
	background: #ff1d25;
	color: #fff;
    font-family:'Podkova', Helvetica, Arial, sans-serif;
	border: none;
	width: 100px;
	margin: 10px -28px 25px;}

#googlemap{
	width: 105.2%;
	margin: 0 auto;
	margin-bottom: -35px;
	padding:0;
	overflow: hidden;
	position: relative;
	top: -35px;
	z-index: 1;
	left: -70px;
	height: 350px;
	border-bottom: 14px solid #dcdcdc;}

/************
Twitter
***********/

        .example2 {
            width: 90%;
            padding: 25px;
            margin: 0 auto;
            -webkit-border-radius: 3px;
               -moz-border-radius: 3px;
                    border-radius: 3px;
        }
    
        .example2 .tweet {
			margin-left: 150px;
            overflow: hidden;
        }

        .example2 ul {
            width: 99999px;
            height: 150px;
			list-style: none;
        }

        .example2 ul li {
            width: 200px;
            height: 150px;
            float: left;
            border-right: 1px solid #eee;
            padding: 0 10px 0 0;
            margin: 0 10px 0 0;
        }
		
		.example2 ul li a{
			color: #ff1d25;
		}
			
/************
ANIMATION P
************/

#def{
  -webkit-animation: appear 1s ease-out forwards; /* Safari 4+ */
  -moz-animation:    appear 1s ease-out forwards; /* Fx 5+ */
  -o-animation:      appear 1s ease-out forwards; /* Opera 12+ */
  animation:         appear 1s ease-out forwards; /* IE 10+ */}

#def p{
  -webkit-animation: pmargin 0.5s 1.2s ease-out forwards; /* Safari 4+ */
  -moz-animation:    pmargin 0.5s 1.2s ease-out forwards; /* Fx 5+ */
  -o-animation:      pmargin 0.5s 1.2s ease-out forwards; /* Opera 12+ */
  animation:         pmargin 0.5s 1.2s ease-out forwards; /* IE 10+ */}

#dis{
  opacity: 0;
  -webkit-animation: appear 1s 0.3s ease-out forwards; /* Safari 4+ */
  -moz-animation:    appear 1s 0.3s ease-out forwards; /* Fx 5+ */
  -o-animation:      appear 1s 0.3s ease-out forwards; /* Opera 12+ */
  animation:         appear 1s 0.3s ease-out forwards; /* IE 10+ */}

#dis p{
  -webkit-animation: pmargin 0.5s 1.4s ease-out forwards; /* Safari 4+ */
  -moz-animation:    pmargin 0.5s 1.4s ease-out forwards; /* Fx 5+ */
  -o-animation:      pmargin 0.5s 1.4s ease-out forwards; /* Opera 12+ */
  animation:         pmargin 0.5s 1.4s ease-out forwards; /* IE 10+ */}
  
#dec{
	opacity: 0;
  -webkit-animation: appear 1s 0.6s ease-out forwards; /* Safari 4+ */
  -moz-animation:    appear 1s 0.6s ease-out forwards; /* Fx 5+ */
  -o-animation:      appear 1s 0.6s ease-out forwards; /* Opera 12+ */
  animation:         appear 1s 0.6s ease-out forwards; /* IE 10+ */
}

#dec p{
  -webkit-animation: pmargin 0.5s 1.6s ease-out forwards; /* Safari 4+ */
  -moz-animation:    pmargin 0.5s 1.6s ease-out forwards; /* Fx 5+ */
  -o-animation:      pmargin 0.5s 1.6s ease-out forwards; /* Opera 12+ */
  animation:         pmargin 0.5s 1.6s ease-out forwards; /* IE 10+ */}
  
#dir{
	opacity: 0;
  -webkit-animation: appear 1s 0.9s ease-out forwards; /* Safari 4+ */
  -moz-animation:    appear 1s 0.9s ease-out forwards; /* Fx 5+ */
  -o-animation:      appear 1s 0.9s ease-out forwards; /* Opera 12+ */
  animation:         appear 1s 0.9s ease-out forwards; /* IE 10+ */}

#dir p{
  -webkit-animation: pmargin 0.5s 1.8s ease-out forwards; /* Safari 4+ */
  -moz-animation:    pmargin 0.5s 1.8s ease-out forwards; /* Fx 5+ */
  -o-animation:      pmargin 0.5s 1.8s ease-out forwards; /* Opera 12+ */
  animation:         pmargin 0.5s 1.8s ease-out forwards; /* IE 10+ */}
  
#eva{
	opacity: 0;
  -webkit-animation: appear 1s 1.2s ease-out forwards; /* Safari 4+ */
  -moz-animation:    appear 1s 1.2s ease-out forwards; /* Fx 5+ */
  -o-animation:      appear 1s 1.2s ease-out forwards; /* Opera 12+ */
  animation:         appear 1s 1.2s ease-out forwards; /* IE 10+ */
}

#eva p{
  -webkit-animation: pmargin 0.5s 2s ease-out forwards; /* Safari 4+ */
  -moz-animation:    pmargin 0.5s 2s ease-out forwards; /* Fx 5+ */
  -o-animation:      pmargin 0.5s 2s ease-out forwards; /* Opera 12+ */
  animation:         pmargin 0.5s 2s ease-out forwards; /* IE 10+ */}
  
#workflow ul li:first-child .hi-icon:before{
	opacity: 0;
  -webkit-animation: icons 1s 1s ease-out forwards; /* Safari 4+ */
  -moz-animation:    icons 1s 1s ease-out forwards; /* Fx 5+ */
  -o-animation:      icons 1s 1s ease-out forwards; /* Opera 12+ */
  animation:         icons 1s 1s ease-out forwards; /* IE 10+ */}

#workflow ul li:nth-child(3) .hi-icon:before{
	opacity: 0;
  -webkit-animation: icons 1s 1.2s ease-out forwards; /* Safari 4+ */
  -moz-animation:    icons 1s 1.2s ease-out forwards; /* Fx 5+ */
  -o-animation:      icons 1s 1.2s ease-out forwards; /* Opera 12+ */
  animation:         icons 1s 1.2s ease-out forwards; /* IE 10+ */}
  
#workflow ul li:nth-child(5) .hi-icon:before{
	opacity: 0;
  -webkit-animation: icons 1s 1.4s ease-out forwards; /* Safari 4+ */
  -moz-animation:    icons 1s 1.4s ease-out forwards; /* Fx 5+ */
  -o-animation:      icons 1s 1.4s ease-out forwards; /* Opera 12+ */
  animation:         icons 1s 1.4s ease-out forwards; /* IE 10+ */}

#workflow ul li:nth-child(7) .hi-icon:before{
	opacity: 0;
  -webkit-animation: icons 1s 1.6s ease-out forwards; /* Safari 4+ */
  -moz-animation:    icons 1s 1.6s ease-out forwards; /* Fx 5+ */
  -o-animation:      icons 1s 1.6s ease-out forwards; /* Opera 12+ */
  animation:         icons 1s 1.6s ease-out forwards; /* IE 10+ */}
   
#workflow ul li:last-child .hi-icon:before{
	opacity: 0;
  -webkit-animation: icons 1s 1.8s ease-out forwards; /* Safari 4+ */
  -moz-animation:    icons 1s 1.8s ease-out forwards; /* Fx 5+ */
  -o-animation:      icons 1s 1.8s ease-out forwards; /* Opera 12+ */
  animation:         icons 1s 1.8s ease-out forwards; /* IE 10+ */}

.line{
	opacity: 0;}

@-webkit-keyframes appear {
  0%   {opacity: 0; 
  		width: 40px; 
		height: 40px;}
		
  100% {
	  opacity: 1; 
	  width: 72px; 
	  height: 72px;}
}

@-moz-keyframes appear {
  0%   {opacity: 0; 
  		width: 40px; 
		height: 40px;}
		
  100% {
	  opacity: 1; 
	  width: 72px; 
	  height: 72px;}
}

@-o-keyframes appear {
  0%   {opacity: 0; 
  		width: 40px; 
		height: 40px;}
		
  100% {
	  opacity: 1; 
	  width: 72px; 
	  height: 72px;}
}

@keyframes appear {
  0%   {opacity: 0; 
  		width: 40px; 
		height: 40px;}
		
  100% {
	  opacity: 1; 
	  width: 72px; 
	  height: 72px;}
}



@-webkit-keyframes icons {
  0%   {opacity: 0; 
  		font-size: 0px;}
		
  100% {
	  opacity: 1; 
	  font-size: 38px;}
}

@-moz-keyframes appear {
  0%   {opacity: 0; 
  		font-size: 0px;}
		
  100% {
	  opacity: 1; 
	  font-size: 38px;}
}

@-o-keyframes appear {
  0%   {opacity: 0; 
  		font-size: 0px;}
		
  100% {
	  opacity: 1; 
	  font-size: 38px;}
}

@keyframes appear {
  0%   {opacity: 0; 
  		font-size: 0px;}
		
  100% {
	  opacity: 1; 
	  font-size: 38px;}
}


@-webkit-keyframes pmargin {
  0%   {opacity: 0; 
  		margin-top: -10px;}
		
  100% {
	  opacity: 1; 
	  margin-top: 10px;}
}

@-moz-keyframes pmargin {
  0%   {opacity: 0; 
  		margin-top: -10px;}
		
  100% {
	  opacity: 1; 
	  margin-top: 10px;}
}

@-o-keyframes pmargin {
  0%   {opacity: 0; 
  		margin-top: -10px;}
		
  100% {
	  opacity: 1; 
	  margin-top: 10px;}
}

@keyframes pmargin {
  0%   {opacity: 0; 
  		margin-top: -10px;}
		
  100% {
	  opacity: 1; 
	  margin-top: 10px;}
}