@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');

/* CSS Document */

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#container {
	width:100%;
}
#home {
	width:100%;
	height:100%;
	position:relative;
	background:url(images/bg_home.jpg) center center no-repeat;
	background-size:cover;
}
#slide_nosotros {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_nosotros.jpg) center center no-repeat;
	background-size:cover;
	display:table;
}
#slide_sostenible {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_sostenible.jpg) center center no-repeat;
	background-size:cover;
}
#slide_proceso {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_proceso.jpg) center center no-repeat;
	background-size:cover;
}
#slide_productos {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_productos.jpg) center center no-repeat;
	background-size:cover;
}
#slide_numbers {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_numbers.jpg) center center no-repeat;
	background-size:cover;
}
#slide_porton {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_porton.jpg) center center no-repeat;
	background-size:cover;
}
#slide_contacto {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_contacto.jpg) center center no-repeat;
	background-size:cover;
}
#slide_sectores {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_sectores.jpg) center center no-repeat;
	background-size:cover;
}
.slide_align_left {
	width:calc(100% - 150px);
	padding:40px 75px 40px 75px;
	max-width:550px;
	min-height:420px;
	text-align:left;
	display:table;
	float:left;
}
.slide_align_right {
	width:calc(100% - 150px);
	padding:40px 75px 40px 75px;
	max-width:550px;
	min-height:420px;
	text-align:right;
	display:table;
	float:right;
}
.slide_align_center {
	width:calc(100% - 150px);
	padding:40px 75px 40px 75px;
	min-height:420px;
	text-align:center;
	display:table;
}
.slide_align{
	width:100%;
	height:100% !important;
	display:table-cell;
	vertical-align:middle;
}
#banner {
	width:100%;
	min-height:500px;
	position:relative;
}
.wraper {
	width:100%;
}
.contenido {
	width:calc(100% - 150px);
	max-width:1050px;
	padding:0 75px 0 75px;
	margin:auto;
}
#footer {
	width:100%;
	min-height:50px;
	background:#8b766c;
}

#nav {
	width:250px;
	height:100%; 
	position:fixed; 
	background:#FFF;
	z-index:10;
	box-shadow: 30px 0 60px rgba(0, 0, 0, 0.25);
}
	
#logo_sidemenu {
	height:auto;
	width:120px;
	left:50px;
	top:60px;
	position:absolute;
}
#sidemenu {
	position:absolute; 
	bottom:60px;
	left:40px;
}
.icon_close {
	background:url(images/close.png) center center no-repeat;
	background-size:30px 30px;
	width:40px;
	height:40px;
	color:transparent;
	cursor:pointer;
	display:block;
	position:absolute; 
	right:20px; 
	top:20px;
	z-index:2;
	transition: transform 0.3s;
}
.icon_close:hover {
	transform: rotate(90deg);
}

.icon_menu_white {
	background: url(images/icon_menu_white.png) center center no-repeat;
	background-size:30px 30px;
	width:40px;
	height:40px;
	color:transparent;
	cursor:pointer;
	display:block;
	position:fixed; 
	left:20px; 
	top:20px;
	z-index:2;
	transition: transform 0.3s;
}
.icon_menu_white:hover {
	transform: scale(1.10);
}

#logo_home {
	height:auto;
	width:150px;
}
#logo_internas {
	position:absolute;
	z-index:3;
	top:30px;
	height:auto;
	width:100px;
	margin-left:-50px;
	left:50%;
	transition: transform 0.3s;
}
#logo_internas:hover {
	transform: scale(1.10);
}
#mouse_down {
	height:auto;
	width:40px;
	left:50%;
	margin-left:-20px;
	bottom:30px;
	position:absolute;
	z-index:2;
}
#frase {
	width:100%;
	height:100%;
	display:table;
	max-width:850px !important;
	margin:auto;
}

#frase_align {
	display:table-cell;
	vertical-align:middle;
	height:100%;
	width:calc(100% - 100px);
	padding:0 50px 0 50px;
	text-align:center;
}

.banner_vline {
	width:1px; 
	height:40px; 
	display:block; 
	background:#FFF; 
	margin-top:20px;
}
.banner_frase {
	width:calc(100% - 375px); 
	padding-right:75px;
}
.banner_wrapper {
	display:table; 
	min-height:500px; 
	width:100%;
}
.banner_contenido {
	width:100%; 
	height:100%; 
	display:table-cell; 
	vertical-align:bottom
}
.content_small {
	width:calc(100% - 415px); 
	display:inline-block; 
	padding-right:75px; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:40px;
}

.content_full {
	width:calc(100% - 40px); 
	display:inline-block; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:40px;
}

.content_product {
	width:calc(100% - 40px - 50%); 
	display:block; 
	padding-right:40%; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:40px;
	background-position:right center;
	background-repeat:no-repeat;
	margin-bottom:40px;
}
.content_fijo {
	width:250px; 
	display:inline-block; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:40px;
}
.formulario {
	float:right; 
	width:calc(100% - 365px); 
	padding:40px 0 0 0;
}

.patch {
	max-width:200px; 
	height:300px; 
	width:calc(100% - 100px);
	padding:0 50px 0 50px; 
	margin-top:-75px; 
	z-index:10; 
	display:inline-table;
	position:absolute;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% auto;
	text-align:center;
}

.steps {
	width:100%; 
	max-width:325px; 
	min-width:250px; 
	display:inline-block; 
	margin:10px;
}
.steps_img {
	float:left; 
	width:150px;
}
.steps_content {
	float:right;
	width:calc(100% - 160px);
	display:table;
}
.steps_content_align{
	display:table-cell;
	vertical-align:middle; 
	height:150px;
}

.footer_info {
	float:left; padding:15px 0 0 75px;
}
.footer_credito {
	float:right; 
	padding:15px 75px 0 0;
}
.footer_space {
	padding-right:30px;
}

.logos {
	vertical-align:middle;
	padding-right:40px;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.logos:hover {
	-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
    filter: grayscale(0);
}

.icon_process {
	background:#e2dcda;
	width:130px; 
	border-radius:65px; 
	height:130px; 
	margin:0 15px 20px 15px;
}
.thumb_process {
	width:160px; 
	text-align:center; 
	display:inline-block;
	margin-bottom:40px;
}

.thumb_sectores {
	display:inline-table; 
	text-align:center; 
	background-position:center center; 
	background-repeat:no-repeat;
	background-size:195px 195px;
	margin:0 40px 40px 0;
}
.img_sectores {
	width:200px; 
	height:200px; 
	display:table-cell; 
	vertical-align:middle; 
	background:url(images/mask.png) center center no-repeat;
	background-size:200px 200px;
}

.form_side_left {
	float:left;
	width:50%;
}
.form_side_right {
	float:right;
	width:50%;
}

/* Fonts */
.menu {
	font-family: 'Lato', sans-serif;
	font-weight:700;
	font-size:20px;
	color:#513529;
	text-decoration:none;
	display:block;
	padding:5px 0 5px 0;
}
.menu:hover {
	color:#8c766b;
}


.credito {
	font-family:Verdana, Geneva, sans-serif;
	font-size:8px;
	color:#FFF;
	text-decoration:none;
	opacity:.75;
	letter-spacing:2px;
	text-transform:uppercase;
}
.t0 {
	font-family: 'Lato', sans-serif;
	font-size:50px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
.t1 {
	font-family: 'Lato', sans-serif;
	font-size:30px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
.t2 {
	font-family: 'Lato', sans-serif;
	font-size:22px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
.t3 {
	font-family: 'Lato', sans-serif;
	font-size:16px;
	color:#8b766c;
	text-decoration:none;
	font-weight:300;
}
.t4 {
	font-family: 'Lato', sans-serif;
	font-size:16px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
.t5 {
	font-family: 'Lato', sans-serif;
	font-size:14px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}


.bt_white {
	color:#FFF;
	text-decoration:none;
	border-radius:20px;
	height:30px;
	padding:10px 25px 0 25px;
	background:rgba(255,255,255,.25);
	transition: transform 0.3s;
	display:inline-block;
	cursor:pointer;
	font-family: 'Lato', sans-serif;
	font-size:16px;
	font-weight:300;
}
.bt_white:hover {
	transform: scale(1.10);
}

.bt_beige {
	color:#FFF;
	text-decoration:none;
	border-radius:20px;
	height:30px;
	padding:10px 25px 0 25px;
	background:#c5bab5;
	transition: transform 0.3s;
	display:inline-block;
	cursor:pointer;
	font-family: 'Lato', sans-serif;
	font-size:16px;
	font-weight:300;
}
.bt_beige:hover {
	transform: scale(1.10);
}



/* Icons */
#container_redes {
	position:absolute;
	z-index:30;
	top:25px;
	right:25px;
	display:block;
	width:100px;
	height:50px;
}

.redes {
	color:transparent;
	display:inline-block;
	cursor:pointer;
	width:30px;
	height:30px;
	text-decoration:none;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:20px 20px;
}
.fb {
	background-image:url(images/logo_fb.png);
}
.in {
	background-image:url(images/logo_in.png);
}
.gr {
	background-image:url(images/logo_gr.png);
}
.fbc {
	background-image:url(images/logoc_fb.png);
}
.inc {
	background-image:url(images/logoc_in.png);
}
.grc {
	background-image:url(images/logoc_gr.png);
}
/* Forms */

.field {
	color:#8c766c;
	width:calc(100% - 30px);
	margin:5px;
	padding-left:10px;
	padding-right:10px;
	height:40px;
	text-decoration:none;
	font-family: 'Lato', sans-serif;
	font-size:14px;
	font-weight:400;
	outline:none;
	border:none;
	background:#f0edec;
}
.area {
	color:#8c766c;
	width:calc(100% - 30px);
	margin:5px;
	padding:10px;
	height:180px;
	text-decoration:none;
	font-family: 'Lato', sans-serif;
	font-size:14px;
	font-weight:400;
	outline:none;
	border:none;
	background:#f0edec;
	resize:none;
}

.bt_send {
	color:#FFF;
	text-decoration:none;
	border-radius:20px;
	height:40px;
	width:100%;
	text-align:center;
	background:#007836;
	display:block;
	cursor:pointer;
	font-family: 'Lato', sans-serif;
	font-size:16px;
	font-weight:700;
	border:none;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
/* EANIMATION */
.chart_main {
	display:inline-block; 
	width:240px;
}
.chart {
  position: relative;
  display: inline-block;
}
.chart_num {
	position:absolute; 
	top:20px; 
	right:120px; 
	z-index:2;
	text-align:right;
}
.chart_txt {
	position:absolute; 
	top:80px; 
	left:50px;
	width:100px;
	z-index:2;
	text-align:left;
}
.outer {
  fill: transparent;
  stroke: #fff;
  stroke-width: 10;
  stroke-dasharray: 534;
  transition: stroke-dashoffset 1s;
  -webkit-animation-play-state: running;
  -moz-transform: rotate(-89deg) translateX(-190px);
}

.chart:hover .outer {
  stroke-dashoffset: 534 !important;
  -webkit-animation-play-state: paused;
}

.chart[data-percent='75'] .outer {
  stroke-dashoffset: 133;
  -webkit-animation: show75 2s;
  animation: show75 2s;
}


@-webkit-keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 134;
  }
}

@keyframes show75 {
  from {
    stroke-dashoffset: 537;
  }
  
  to {
    stroke-dashoffset: 137;
  }
}







@media screen and (max-width: 900px) {
#logo_home {
	height:auto;
	width:125px;
}
#logo_internas {
	position:absolute;
	z-index:3;
	top:30px;
	height:auto;
	width:80px;
	margin-left:-40px;
	left:50%;
	transition: transform 0.3s;
}
#logo_internas:hover {
	transform: scale(1.10);
}
#logo_sidemenu {
	height:auto;
	width:120px;
	left:50px;
	top:60px;
	position:absolute;
}
#container_redes {
	display:none;
}
.logos {
	display:block;
	vertical-align:middle;
	padding-right:0;
	padding-bottom:20px;
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.logos:hover {
	-webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
    filter: grayscale(0);
}
#slide_porton {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_porton_mobile.jpg) center center no-repeat;
	background-size:cover;
}
#slide_numbers {
	width:100%;
	min-height:500px;
	background:url(images/bg_slide_numbers_mobile.jpg) center center no-repeat;
	background-size:cover;
}
.slide_align_left {
	width:calc(100% - 50px);
	padding:40px 25px 40px 25px;
	max-width:550px;
	min-height:420px;
	text-align:left;
	display:table;
	float:left;
}
.slide_align_right {
	width:calc(100% - 50px);
	padding:40px 25px 40px 25px;
	max-width:550px;
	min-height:420px;
	text-align:right;
	display:table;
	float:right;
}
.slide_align_center {
	width:calc(100% - 50px);
	padding:40px 25px 40px 25px;
	min-height:420px;
	text-align:center;
	display:table;
}

.content_fijo {
	width:calc(100% - 40px); 
	display:inline-block; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:40px;
}
.formulario {
	float:none; 
	width:100%; 
	padding:40px 0 0 0;
}
.form_side_left {
	float:none;
	width:100%;
}
.form_side_right {
	float:none;
	width:100%;
}
.banner_frase {
	width:100%; 
	padding-right:0;
}
.contenido {
	width:calc(100% - 50px);
	padding:0 25px 0 25px;
}
.content_small {
	width:calc(100% - 25px); 
	display:inline-block; 
	padding-right:0; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:25px;
}
.patch {
	max-width:200px; 
	height:300px; 
	width:calc(100% - 100px);
	padding:0 50px 0 50px; 
	z-index:10;
	display:table;
	position:relative;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% auto;
	text-align:center;
	margin:30px 0 0 0;
}
.footer_info {
	float:none; 
	padding:15px 0 15px 25px;
}
.footer_credito {
	float:none; 
	padding:15px 0 25px 25px;
}
.footer_space {
	display:block;
	padding-right:30px;
}
.content_product {
	width:calc(100% - 40px); 
	display:block; 
	padding-right:0; 
	border-left:solid 1px #8b766c; 
	padding-top:40px; 
	padding-left:40px;
	background-position:bottom center;
	background-repeat:no-repeat;
	margin-bottom:40px;
	background-size:75% auto !important;
	padding-bottom:240px;
}
.t0 {
	font-family: 'Lato', sans-serif;
	font-size:34px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
.t1 {
	font-family: 'Lato', sans-serif;
	font-size:26px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
.t2 {
	font-family: 'Lato', sans-serif;
	font-size:20px;
	color:#FFF;
	text-decoration:none;
	font-weight:300;
}
}