@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Alex+Brush');
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather-regular-webfont.woff2') format('woff2'),
         url('fonts/merriweather-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Merriweather';
    src: url('fonts/merriweather-bold-webfont.woff2') format('woff2'),
         url('fonts/merriweather-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

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

h1, h2, h3, h4, h5, h6, p, li, a, span, strong, input, textarea, label, button {
	font-family: 'Merriweather';
}

p {
	font-family: 'Lato';
}

body {
	background: #fdfdfc;
	overflow-x: hidden;
}

img {
	max-width: 100%;
}

.wrapper {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

.col100 { width: 100%; float: left; position: relative; padding: 0 15px; text-align: left;}
.col50 { width: 50%; float: left; position: relative; padding: 0 15px; text-align: left;}

header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 9px 0;
	z-index: 999;
	-webkit-transition: all .7s ease-in-out;
	   -moz-transition: all .7s ease-in-out;
	    -ms-transition: all .7s ease-in-out;
	     -o-transition: all .7s ease-in-out;
	        transition: all .7s ease-in-out;
}

header.scrolled {
	background: #fff;
	box-shadow: 0 1px 0 #eee;
	padding: 9px 0 15px;
}

header.scrolled a.logo {
	width: 150px;
}

header.scrolled nav {
	margin: 21px 0 0 0;
}

header.scrolled nav a {
	color: #333;
}

header .wrapper {
	max-width: 90%;
}

header nav {
	float: right;
	margin: 30px 0;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}

nav li {
	float: left;
}

nav a {
	color: #fff;
	padding: 7px 15px;
	font-size: 15px;
	text-transform: uppercase;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
	border-left: 1px solid;
}

nav li:first-child a {
	border: none;
}

a.logo {
	width: 230px;
	position: relative;
	display: inline-block;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}

article.index {
	background: url('../img/bg-main.jpg') center center no-repeat;
	background-size: cover;
	min-height: 90vh;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

article.index .col100, article.features .col100 {
	text-align: center;
}

h1 {
	text-align: center;
	color: #fff;
	font-size: 60px;
	font-weight: bold;
	line-height: 1.2em;
	margin: 0 0 45px 0;
}

article.index h2 {
	text-align: center;
	color: #fff;
	font-family: 'Alex Brush';
	font-size: 60px;
	margin: 0;
	text-transform: none;
}

h2 {
	text-align: center;
	font-size: 36px;
	font-weight: bold;
	color: #666;
	margin: 15px 0 45px;
	text-transform: uppercase;
}

article.index p {
	text-align: center;
	color: #fff;
	font-size: 22px;
	margin: 0 0 15px 0;
}

a.phone {
	text-align: center;
	display: inline-block;
	color: #fff;
	background: #25d366 url('../img/icon-whatsapp.png') left 6px center no-repeat;
	margin-right: 50px;
	font-size: 21px;
	line-height: 1.2em;
	border-radius: 30px;
	padding: 15px 15px 15px 45px;
}

a.phone2 {
	text-align: center;
	display: inline-block;
	color: #fff;
	background: #f39200 url('../img/icon-phone.png') left 6px center no-repeat;
	margin: 0 auto;	
	font-size: 21px;
	line-height: 1.2em;
	border-radius: 30px;
	padding: 15px 15px 15px 45px;
}

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
a.phone {margin-bottom: 15px; margin-right: 0;}
article.index p {font-size: 24px;}
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
a.phone {margin-bottom: 15px;margin-right: 0;}
article.index p {font-size: 24px;}
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
a.phone {margin-bottom: 15px;margin-right: 0;}
article.index p {font-size: 24px;}
}

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
a.phone {margin-bottom: 15px;margin-right: 0;}
article.index p {font-size: 24px;}
}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
a.phone {margin-bottom: 15px;margin-right: 0;}
article.index p {font-size: 24px;}
}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
a.phone {margin-bottom: 15px;margin-right: 0;}
article.index p {font-size: 24px;}
}


article.servicios {
	margin: -75px 0 30px;
}

ul.servicios {
	margin: 0 0 30px;
	padding: 0;
}

ul.servicios li {
	width: 33.33%;
	float: left;
	padding: 0 30px;
	position: relative;
}

ul.servicios img {
	width: 100%;
}

ul.servicios .text {
	background: #fff;
	border: 1px solid #eee;
	border-top: 0;
	padding: 0 15px;
	border-radius: 0 0 3px 3px;
}

h3 {
	font-weight: bold;
	text-align: center;
	margin: 21px 0 15px;
	display: block;
	line-height: 1.2em;
	color: #333;
	letter-spacing: 1px;
	font-size: 21px;
	text-transform: uppercase;
}

p {
	font-size: 14px;
	color: #575757;
	line-height: 21px;
	margin: 15px 0;
}

article.features {
	background: linear-gradient(90deg, #d47168, #ec906a);
	padding: 60px 0;
}

article.features h2 {
	color: #fff;
}

ul.features {
	margin: 60px 0 30px 0;
}

ul.features li {
	width: 20%;
	float: left;
	text-align: center;
	color: #fff;
	padding: 0 30px;
}

ul.features h3 {
	font-size: 15px;
}

ul.features p, ul.features h3 {
	color: #fff;
	font-family: 'Lato';
	line-height: 1.3em;
	margin-top: 15px;
	text-align: center;
}

a.contact {
	background: #fff;
	text-align: center;
	display: inline-block;
	color: #333;
	margin: 0 auto;
	font-size: 15px;
	line-height: 1.5em;
	border-radius: 30px;
	padding: 12px 24px;
	text-transform: uppercase;
	font-family: 'Lato';
	letter-spacing: 2px;
	font-weight: bold;
}

article.clientes, article.testimonios {
	padding: 60px 0;
}

.carousel {
	position: relative;
}

.carousel.clientes ul.slides li img {
	padding: 15px 30px;
}

article.planta {
	background: url('../img/bg-planta.jpg') center center no-repeat;
	background-size: cover;
	padding: 60px;
	position: relative;
}

article.planta .wrapper {
	background: rgba(255,255,255,.85);
	padding: 30px;
}

ul.metrics {
	margin: -30px 0 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
}

ul.metrics li {
	padding: 0 30px;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 15px;
}

ul.metrics li p {
	text-align: center;
	display: block;
}

ul.metrics li strong {
	display: block;
	text-align: center;
	font-size: 51px;
	color: #ff9300;
	font-family: 'Merriweather';
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 55px;
}

.carousel.testimonios ul.slides li .text {
	text-align: center;
	padding: 9px 30px 30px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 3px;
	margin: 15px 30px;
}

.carousel.testimonios ul.slides {
	height: 100%;
	align-items: center;
	display: flex;
	position: relative;
}

.carousel.testimonios li h4 {
	margin: 30px 0 0 0;
	position: relative;
}

.carousel.testimonios li h4:before {
	content: '';
	display: block;
	position: relative;
	width: 45px;
	height: 1px;
	background: #ff9300;
	left: 50%;
	margin-left: -22px;
	top: -15px;
}

.carousel.testimonios li h5, .carousel.testimonios li h5 strong {
	font-family: 'Lato';
	color: #333;
}

article.testimonios {
	background-image: url(../img/quote-1.png), url(../img/quote-2.png);
	background-repeat: no-repeat;
	background-position: top 60px left 60px, bottom 60px right 60px
}

article.contacto {
	background: url('../img/bg-contacto.jpg') center center no-repeat;
	background-size: cover;
	padding: 60px;
	position: relative;
}

article.contacto .wrapper {
	background: rgba(0,0,0,.6);
	padding: 30px;
}

article.contacto h2 {
	color: #fff;
}

form {
	margin: 30px auto;
	width: 100%;
	max-width: 650px;
}

form input, form textarea {
	width: 100%;
	margin-bottom: 9px;
	height: 40px;
	border: none;
	padding: 11px 9px;
	font-family: 'Lato';
	background: #fdfdfc;
	font-size: 15px;
	letter-spacing: 1px;
}

form textarea {
	height: 120px;
}

form input[type=submit] {
	background: #ff9300;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: bold;
}

ul.data {
	margin: 0 auto;
	padding: 0;
	max-width: 650px;
}

ul.data li {
	color: #fff;
	padding: 2px 0 2px 45px;
	margin: 9px 0;
}

ul.data li a {
	color: #fff;
	text-decoration: none;
}

ul.data li.tel {
	background: url('../img/icon-phone2.png') left top 1px no-repeat;
	background-size: 21px;
}

ul.data li.mail {
	background: url('../img/icon-at.png') left center no-repeat;
	background-size: 21px;
}


/*=====================================================================================================================
BURGER MENU
=====================================================================================================================*/

.overlay, .overlayNav {
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	display: none;
}

.overlay {
	z-index: -1;
}

a.burger {
	display: none;
	position: absolute;
	right: 30px;
	top: 42px;
	width: 45px;
	height: 25px;
	z-index: 10;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}
a.burger span {
	position: absolute;
	width: 100%;
	height: 4px;
	top: 0;
	background: #fff;
	-webkit-transition: all .3s ease-in-out;
	   -moz-transition: all .3s ease-in-out;
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;
	        transition: all .3s ease-in-out;
}
a.burger span:nth-child(2) { top: 10px;}
a.burger span:nth-child(3) { top: 20px;}

a.burger.open span:nth-child(1) {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	top: 9px;
}
a.burger.open span:nth-child(2) {
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
a.burger.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	top: 9px;
}

/*=====================================================================================================================
CONTACTO GRACIAS
=====================================================================================================================*/

.contact-success, .contact-error, .formEdit {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    display: none;
}

.contact-success .wrapper, .contact-error .wrapper, .formEdit .wrapper {
    height: 100%;
    max-width: 650px;
    display: flex;
    align-items: center;
    z-index: 30;
}

.contact-success .col100, .contact-error .col100 {
    background: #fdfdfc;
    padding: 30px;
    border-bottom: 7px solid #ff9300;
    text-align: center;
}

a.close {
    position: absolute;
    right: 0;
    background: #ff9300;
    color: #fff;
    font-weight: bold;
    padding: 9px 15px;
    top: 0;
    width: 40px;
    height: 40px;
}

a.close:after {
	content: '';
	display: block;
	position: absolute;
	top: 17px;
	left: 5px;
	width: 30px;
	height: 4px;
	background: #fff;
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
a.close:before {
	content: '';
	display: block;
	position: absolute;
	top: 17px;
	left: 5px;
	width: 30px;
	height: 4px;
	background: #fff;
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}


/*=====================================================================================================================
RESPONSIVE
=====================================================================================================================*/

@media(max-width: 1280px) {
	nav a {
		padding: 7px 9px;
	}
	header .wrapper {
		max-width: 100%;
	}
	h2 {
		font-size: 30px;
	}
	article.testimonios {
		background-position: top 30px left 30px, bottom 30px right 30px;
		background-size: 45px;
	}
}

@media(max-width: 1024px) {
	ul.servicios li {
		padding: 0 15px;
	}
	ul.features {
	    display: flex;
    	flex-wrap: wrap;
	}
	ul.features li {
		width: 50%;
		padding: 15px;
	}
	article.clientes {
		padding: 30px;
	}
	h1 {
		font-size: 45px;
		margin-bottom: 30px;
	}
	article.index h2 {
		font-size: 45px;	
	}
}

@media(max-width: 800px) {
	header nav, header.scrolled nav {
		position: fixed;
		top: 0;
		right: 0;
		background: #fff;
		height: 100vh;
		margin: 0;
		padding: 80px 0 15px 0;
		-webkit-transition: all .3s ease-in-out;
		   -moz-transition: all .3s ease-in-out;
		    -ms-transition: all .3s ease-in-out;
		     -o-transition: all .3s ease-in-out;
		        transition: all .3s ease-in-out;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
		border-left: 1px solid #ddd;
	}
	header.scrolled nav {
		top: 81px;
		padding: 15px 0 96px 0;
	}
	header nav.open {
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	nav li {
		float: none;
	}
	nav a {
		color: #333;
		padding: 15px 30px;
		display: block;
		border: none;
	}
	a.logo {
		width: 200px;
	}
	a.burger {
		display: block;
	}
	header.scrolled a.burger {
		top: 32px;
	}
	a.burger.open span, header.scrolled a.burger span {
		background: #ff9300
	}
	ul.metrics li strong {
		font-size: 45px;
	}
	.carousel.testimonios ul.slides li .text {
		margin: 0 7px 15px;
	}
	.carousel.clientes ul.slides li img {
		padding: 15px 7px;
	}
}

@media(max-width: 640px) {
	header .wrapper p {text-align: center}
	h1, article.index {
		font-size: 30px;
	}
	article.index h2 {
		display: none;
	}
	h1 br {
		display: none;
	}
	article.index p {
		font-size: 13px;
		margin: -10px 0 4px 0;
	}
	ul.servicios li {
		width: 100%;
		padding: 15px 0;
	}
	ul.features li {
		width: 100%;
	}
	article.clientes {
		padding: 30px 0;
	}
	.col50 {
		width: 100%;
	}
	h2 {
		font-size: 24px;
		margin: 15px 0;
	}
	article.planta, article.contacto {
		padding: 30px;
	}
	ul.metrics {
		margin: 30px 0;
	}
	ul.metrics li strong {
		font-size: 35px;
		line-height: 40px;
	}
	article.planta .wrapper, article.contacto .wrapper {
		padding: 30px 15px;
	}
	ul.metrics li p {
		margin: 7px 0;
	}
	ul.data li {
		padding-left: 35px;
	}
}