@charset "UTF-8"
/* CSS Document */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	font-family: 'Mulish', sans-serif;
	line-height: 1;
	color: #364a2f;
	font-size: 1.1em;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, *::after, *::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*estilos de parrafos*/

h2{

	font-family: 'Playfair Display', serif;
	font-size:3em;
	margin:0 0 15px 0;
	text-align: left;
	color: #9ab53d;
}


h4{

	font-family: 'Playfair Display', serif;
	font-size:1.3em;
	margin:0 0 15px 0;
	text-align: center;
	color: #ffffff;
}

p{
	font-family: 'Mulish', sans-serif;
	font-size:17px;
	text-align:left;
	color:#364a2f;
	line-height:1.4em;

}

header{
	margin:0 0 15px 0;


}



#contacto_Header{
	margin: 15px 0 0 0;
	padding: 0 0 10px 30px;
 



}

#contacto_Header a{
	padding:0 0 0 35px;
	color:#eca71f;
	display: block;
	text-decoration: none;
	background: url("../imgs/header-icon-email.svg") left no-repeat;

}

#contacto_Header a:hover{
	color:#9ab53d;
	fill:#9ab53d;
}



#header_logo{
	min-height: 140px;
	padding: 0 0 0 0;
	margin:0 auto;
	background:#ffffff;
}

#header_logo h1 {
	text-align: center;
}

#header_RRSS{
	padding:10px 20px 0 0;
	text-align:right;
	background: #FFF;
}

#header_RRSS p {
	color: #acacac	;
	text-align:right;
}
#header_RRSS span {
	display: none;
}


#header_RRSS ul li {
	display: inline-block;
}

#header_RRSS ul li a {
	width: 27px;
	height: 25px;
	display: block;
	background-color: #fff;
}

.icon-facebook a {
	background: url("../imgs/header-icon-Facebook.svg") center no-repeat;
}
.icon-facebook a:hover {
	background-color:#9ab53d ;

}


.icon-linkedin a {
	background: url("../imgs/header-icon-Linkedin.svg") center no-repeat;
}
.icon-linkedin a:hover {
	background-color:#9ab53d ;

}

.icon-blogger a {
	background: url("../imgs/header-icon-blogger.svg") center no-repeat;
}
.icon-blogger a:hover {
	background-color:#9ab53d ;

}

@media only screen and (max-width: 600px) {

	#header_RRSS  {
	padding:20px ;
}
	#header_RRSS p {
	color: #acacac	;
	text-align:left;
}

	#header_RRSS a {
	text-align:left;

}
	#header_RRSS  ul {
	text-align:left;
	float: left;
	margin: 0;
	padding: 0;


}
}



nav{
	padding: 30px 0 0 0;
}

nav ul{
	letter-spacing: 2px;
	padding: 1% 0 0 0;
	text-align: center;
	margin: 0 auto;
	text-transform: uppercase;
}

nav ul li{
	min-width: 192px;
	display: inline-block;
	margin:0 0.5% 0 0.5%;

}

nav ul li a{
	width: 192px;
	display: block;
 	color:#ACACAC;
 	padding: 5px;
 	text-decoration: none;
 	background-image: linear-gradient(to left, #eeeeee, #e9e9e9)  ;
 	border-radius: 25px;

}

nav ul li a:hover{
 	color:#FFFFFF;
 	transition: 0.6s;
 	background: #9ab53d;
 	background-position: right;


}


@media only screen and (max-width: 500px) {

	nav ul li a{
	width: 100%;
	display: block;
 	color:#ACACAC;
 	padding: 5px;
 	text-decoration: none;
 	background-image: linear-gradient(to left, #eeeeee, #e9e9e9)  ;
	}

	#whatWeDo_txt{
	padding:40px;
	min-height: 400px;
	background:#9ab53d;
	border-radius: 25px;

}


}


/*cierre del header*/

/* banner principal */

#banner_principal{
	min-height: 625px;
	background: #e1e1e1 url("../imgs/img_banner.png") center no-repeat;
	background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}


#contenido{
	padding: 0;
	margin: 0;

}


#about{
	min-height: 550px;
	padding: 2% 0 3% 0;
	background: #eca71f url("../imgs/fondo-about.svg") top no-repeat;
}

#about-box{
	padding: 15px 0 35px 0;
	background: #FFFFFF;
	box-shadow:0 10px 25px 5px #c98e1a;

}

#about_image{
	padding: 40px 0 0 20px;
	min-height: 400px;
	float: left;
	margin: 0 15px 0 0;


}

#about_txt{
	column-count: 2 ;
	
}

#about_txt p{
	font-size: 15px;
	
}

@media only screen and (max-width: 1400px) {
	#about_txt{
	column-count: 1 ;
	padding: 20px
	
}

}

/* sección What We Do */

#whatWeDo{

	padding: 40px 0 40px 0;
 min-height: 500px;
 background: #699e00  url("../imgs/bg-whatWeDo.png") center no-repeat;
   background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

#whatWeDo_txt{
	padding:25px;
	min-height: 400px;
	background:#9ab53d;
	border-radius: 25px;

}
#whatWeDo_txt h2{
	color: #FFFFFF;

}
#whatWeDo_txt p{
	color: #FFFFFF;

}

/* sección  We offer */

#weOffer{
	padding: 1% 0 1% 0;
	background: #9ab53d url("../imgs/we offer bg.png") right no-repeat;
	background-position:100% 20%;
	background-size: 35%;

}

.titular_blanco h2 {
	color: #FFFFFF;
	text-align: center;

}

#cardcontainer{
	padding: 0;
	margin: 0 auto;



}



/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
	
  	background-color: transparent;
 	/*max-width: 375px;*/
  	height: 325px;
  	perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	padding: 11% 0 0 0;
	background-color: #7fa109;
  	color: #FFFFFF;
  	border-radius: 20px;
  	box-shadow: 1px 5px 5px #74862a;
}

.flip-card-front img{
	margin: 15px 0 40px 0;
}

/* Style the back side */
.flip-card-back {
  	background-color: #3d8200;
  	color: #ffffff;
  	transform: rotateY(180deg);
  	border-radius: 20px;
  	border: 1px solid  #a4ca8e;
  	box-shadow: 1px 5px 5px #74862a;
}


.flip-card-back p {
	padding: 11% ;
	text-align: center;
  	color: #ffffff;
}

.flip-card-back ul{
	padding: 17% 11% 11% 11% ;

}



.flip-card-back ul li {
	padding: 0 0 0 20px;
	margin: 0 0 30px 0; 
	text-align: left;
  	color: #ffffff;
  	background: url("../imgs/list-check.svg") no-repeat;
  	background-position: 0 4px;
  	background-size:15px ;

}


#motto{
	padding: 60px 0 0 0;
	margin-top: 30px;
	background: url("../imgs/icon-heart.svg") top no-repeat;
	background-size: 6%;

}

#motto p{
	font-size: 1.3em;
	text-align: center;
	color:#FFFFFF;
}


/*recent Work*/

#recent_work{
	background-color: #ffffff;

}

#recent_work-header{
	height: 250px;
	margin: 0;
	padding:150px 0 0 0;
	display:block ;
	background:#9ab53d url("../imgs/bg-recent work.png")no-repeat ;
	background-position:50% 105%;
	display: block;
}

#recent_work-header h2{
	text-align: center;
	color:#060606;

}

#demoVideo{ 	
	padding: 0;
	max-height: 370px;
	box-shadow: 1px 5px 5px #777777;
	borden:none;

}

#contenedor-video{
	padding: 50px 0 0 0;
	min-height: 500px;
	background: #FFFFFF;
}


/*Locations*/

#locations{
	padding: 5% 0 3% 0;
	background:url("../imgs/fondo locations.svg") no-repeat;
	background-position: 50% 25%;
	background-size:75%;



}

#text-Location{
	padding: 10px;
	margin:0 0 15px 0;
	background: #fff;

}

#box1 img {
	margin: 3px;


}

#box2 img{
	margin: 3px;
		background: #fff;



}

#box3 img{
	margin: 3px;


}

#text-Location{
	padding:20px;
	height: 320px;

}



/*footer*/

footer{
	margin:10px 0 0 0;
	padding: 0;
	background:#eca71f url("../imgs/footer-heliconia.svg") no-repeat;	
	background-position:-120px 80px ;

}

/*forms*/
form {
	padding: 20px 0 50px 0;
	margin: 0;
  text-align: left;
  border-bottom: 1px solid #fff;
}

form h2 {
  color: #fff;
  font-size: 2em;

}

form h4 {
	text-align: left;
  color: #fff;
  
}

form p {
	text-align: left;
  color: #fff;
  
}



input[type=text], input[type=submit] {
  padding: 12px;
  color: black; 
  background: #FFF;
  border: 4px solid #eca71f;
  box-sizing: border-box;
}


input[type=submit] {
  background-color: #e99300;
  color: white;
   border: 3px solid #eca71f;
}

input[type=submit]:hover {
  opacity: 0.8;
  color:#e99300;
  background: white;
}



/*col de contacto*/

#Footer-contacto{
	padding:20px 0 30px 15px;


}

#Footer-contacto p{
	margin: 10px 0 20px 0;
	font-size: 1.3em;
	color: #ffffff;
}

#Footer-contacto ul {
	margin: 0 0 20px 0;
	padding: 0;
}

#Footer-contacto ul li{
	display: block;
	padding:5px 5px 5px 30px ;
	background:url("../imgs/phone-icon .svg") left bottom no-repeat ;
	color: #FFFFFF;
}


#Footer-contacto a {
	text-decoration: none;
	font-size: 1.1em;
	padding:10px 20px 10px 20px;
	background:#ffffff;
	border-radius: 25px;
	color: #e99300;
}

#Footer-contacto a:hover {
	background:#b06800;
	color: #FFFFFF;
}


#Footer-rrss{
	height: 180px;
	padding: 5% 0 0 0;
	border-left: 1px solid #FFFFFF;
}


#Footer-rrss a {
	margin: 0 2% 0 2%;
	width: 65px;
	height: 65px;
	display: inline-block;
	text-align: center;
}



#Footer-nav{
	height: 180px;
	padding: 0 0 20px 0;
	border-left: 1px solid #FFFFFF;

}


#Footer-nav ul li {
	margin:5px 0 10px 0;
	display:block;
	text-align: left;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 100;
}


#Footer-nav ul li a {
	text-decoration: none;
	color: #ffffff;

}


#Footer-nav ul li a:hover {
	color: #9a4300;
	
}

#copyright{
	padding: 20px 0 0 0;
	min-height:65px;
	background-color: #e99300;
}

#copyright p {
	text-align: center;
	color: #ffffff;
	font-size:0.9em;
}

#pymesBox{
	padding: 20px;
	height: 250px;
	border-radius:25px 25px 0 0;
	background: #fff;

}

#pymesBox p {
	text-size:6px;
	text-align: center;


}



/*Parallax*/
.parallax {
  /* The image used */
  /* Set a specific height */
  min-height: 500px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.ml-1 {
  margin-left: ($spacer * .10) !important;
}