@charset "UTF-8";
@import url("webfonts/HelveticaNowDisplay_Medium/stylesheet.css");
@import url("webfonts/HelveticaNowDisplay_Black/stylesheet.css");
@import url("webfonts/HelveticaNowDisplay_Bold/stylesheet.css");
@import url("webfonts/HelveticaNowDisplay_Regular/stylesheet.css");
@import url("webfonts/HelveticaNowDisplay_Light/stylesheet.css");



body, a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family:'HelveticaNowDisplay Regular';
  color: #434343;
  font-size: .99em;
}



html{
	
	
    
}
body{
	
	margin: 0px;
	
	
	
}
a {
  color: #434343;
  line-height: 1.1;
  text-decoration: none;
  font-size: 1em;
}


 a:hover {
  color: #6CAA44;
	font-size: 1em;
}


h1 {
	
	font-family:'HelveticaNowDisplay Light';
	font-size: 2em;	
	

}


h2 {
	
	font-family: 'HelveticaNowDisplay Light';
	font-size: 2em;
	
}

h3 {
	font-family: 'HelveticaNowDisplay Light';
	font-size: 2em;
	
	
}

h4{
	font-family:"HelveticaNowDisplay Light";
	font-size: 1.1em;
	
	
	}

p{
	font-family:'HelveticaNowDisplay Regular';
	font-size: .99em;
	
}
button{

border: 0;
border-radius: 0rem;
background-color: transparent;
color: white;
font-family: system-ui, sans-serif;
font-size: 1rem;
line-height: 1.2;
white-space: nowrap;
text-decoration: none;
padding: 0px;
margin:0px;
cursor: pointer;

}
.maincontainer {
	
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
	
}

.float{
	position:fixed;
	width:70px;
	height:70px;
	bottom:30px;
	right:50px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  	font-size:30px;
	box-shadow: 2px 2px 3px #999;
  	z-index:100;
}


.my-float{
	margin-top:16px;
}
.fa-whatsapp { 
	
	margin-right: -6px;
	margin-top: 12px;
}


/* HEADER */



/* DROPDOWN MENU */

.dropdown {
  padding-left: 5%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 15px;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: .9em;
  line-height: 1.5;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

/* -------------------------------- 

1. Auto-Hiding Navigation - Simple

-------------------------------- */
.cd-auto-hide-header {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
	padding-top: 10px;
  background-color: #ffffff;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.cd-auto-hide-header::after {
  clear: both;
  content: "";
  display: block;
}
.cd-auto-hide-header.is-hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}
@media only screen and (min-width: 1024px) {
  .cd-auto-hide-header {
    height: 100px;
  }
}

.cd-auto-hide-header .logo,
.cd-auto-hide-header .nav-trigger {
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.cd-auto-hide-header .logo {
	
	
  left: 5%;
}
.cd-auto-hide-header .logo a, .cd-auto-hide-header .logo img {
  display: block;
}

.cd-auto-hide-header .nav-trigger {
  /* vertically align its content */
  display: table;
  height: 100%;
  padding: 0 1em;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #25283D;
  font-weight: bold;
  right: 0;
  border-left: 1px solid #f2f2f2;
}
.cd-auto-hide-header .nav-trigger span {
  /* vertically align inside parent element */
  display: table-cell;
  vertical-align: middle;
}
.cd-auto-hide-header .nav-trigger em, .cd-auto-hide-header .nav-trigger em::after, .cd-auto-hide-header .nav-trigger em::before {
  /* this is the menu icon */
  display: block;
  position: relative;
  height: 3px;
  width: 32px;
  background-color: #434343;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.cd-auto-hide-header .nav-trigger em {
  /* this is the menu central line */
  margin: 6px auto 14px;
  -webkit-transition: background-color .2s;
  transition: background-color .2s;
}
.cd-auto-hide-header .nav-trigger em::before, .cd-auto-hide-header .nav-trigger em::after {
  position: absolute;
  content: '';
  left: 0;
  -webkit-transition: -webkit-transform .2s;
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
}
.cd-auto-hide-header .nav-trigger em::before {
  /* this is the menu icon top line */
  -webkit-transform: translateY(-6px);
      -ms-transform: translateY(-6px);
          transform: translateY(-6px);
}
.cd-auto-hide-header .nav-trigger em::after {
  /* this is the menu icon bottom line */
  -webkit-transform: translateY(6px);
      -ms-transform: translateY(6px);
          transform: translateY(6px);
}
@media only screen and (min-width: 1024px) {
  .cd-auto-hide-header .nav-trigger {
    display: none;
  }
}

.cd-auto-hide-header.nav-open .nav-trigger em {
  /* transform menu icon into a 'X' icon */
  background-color: rgba(255, 255, 255, 0);
}
.cd-auto-hide-header.nav-open .nav-trigger em::before {
  /* rotate top line */
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.cd-auto-hide-header.nav-open .nav-trigger em::after {
  /* rotate bottom line */
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.cd-primary-nav {
  display: inline-block;
  float: right;
  height: 100%;
  padding-right: 5%;
	
}
.cd-primary-nav > ul {
  position: absolute;
  z-index: 2;
  top: 90px;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  display: none;
  box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
.cd-primary-nav > ul a {
  /* target primary-nav links */
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  
  border-top: 1px solid #f2f2f2;
}
.cd-primary-nav > ul a:hover, .cd-primary-nav > ul a.active {
  color:#6CAA44 ;
}
@media only screen and (min-width: 1024px) {
  .cd-primary-nav {
    /* vertically align its content */
    display: table;
	 
	 
  }
  .cd-primary-nav > ul {
    /* vertically align inside parent element */
    display: table-cell;
    vertical-align: middle;
    /* reset mobile style */
    position: relative;
    width: auto;
    top: 0;
    
	
    background-color: transparent;
    box-shadow: none;
	   
  }
  .cd-primary-nav > ul::after {
    clear: both;
    content: "";
    display: block;
  }
  .cd-primary-nav > ul li {
    display: inline-block;
    float: left;
    margin-right: 1.5em;
  }
  .cd-primary-nav > ul li:last-of-type {
    margin-right: 0;
  }
  .cd-primary-nav > ul a {
    /* reset mobile style */
    height: auto;
    line-height: normal;
    padding: 0;
    border: none;
  }
}

.nav-open .cd-primary-nav ul,
.cd-primary-nav ul:target {
  /* 
  	show primary nav - mobile only 
  	:target is used to show navigation on no-js devices
  */
  display: block;
}
@media only screen and (min-width: 1024px) {
  .nav-open .cd-primary-nav ul,
  .cd-primary-nav ul:target {
    display: table-cell;
  }
}


#iconFacebook:hover {
 filter: invert(0.4) sepia(1) saturate(4) hue-rotate(46.800000000000004deg) brightness(0.94);
}


/*FIN HEADER Y MENU*/


main{
	
	margin-top: 130px;
	width:100%; 
	grid-column: 1/4;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom: 30px;
	height: 100vh;
	
}

main h3 {
	font-family: 'Bebas Neue', cursive;
	font-size: 2.1em;
	
}



.formularioContainer {
	
	grid-column: 1/2;
	margin: 0px 0px 0px 100px ;
	-webkit-box-shadow: 6px 6px 6px -1px rgba(0,0,0,0.21); 
	box-shadow: 6px 6px 6px -1px rgba(0,0,0,0.21);
	border-radius: 25px;
	height: 500px;
	text-align: center;
	padding: 10px;
	
	
}

.contactosContainer {
	grid-column: 2/3;
	display: grid;
	grid-template-columns: 1fr;
	color: white;
	height: 500px;
	margin-left: 50px;
}

.contactosContainer a,p,h2 {

	color: white;
}



.contactos {
	
	grid-column: 1/2;
	background-color:#808080;
	text-align: left;
	padding: 50px;
	
}

.mapa {
	grid-column: 3/4;
	height: 500px;
}










/*FORMULARIO DE COMPRA*/

.form-btn,
.form-btn-cancel,
.form-btn-error {
  background: transparent;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 5px 24px;
  margin-top: 2.25rem;
  position: relative;
  z-index: 0;
  transition: transform 0.28s ease;
  will-change: transform;
}

.form-btn::before,
.form-btn::after,
.form-btn-cancel::before,
.form-btn-cancel::after,
.form-btn-error::before,
.form-btn-error::after {
  position: absolute;
  content: "";
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
}

.form-btn::before,
.form-btn-cancel::before,
.form-btn-error::before {
  
  z-index: -2;
	background: #808080;
}

.form-btn::after,
.form-btn-cancel::after,
.form-btn-error::after {
  background: #6CAA44;
  z-index: -1;
  opacity: 1;
  transition: opacity 0.28s ease;
  will-change: opacity;
}

.form-btn:focus,
.form-btn-cancel:focus,
.form-btn-error:focus {
  outline: none;
}

.form-btn:focus::after,
.form-btn:hover::after,
.form-btn-cancel:focus::after,
.form-btn-cancel:hover::after,
.form-btn-error:focus::after,
.form-btn-error:hover::after {
  opacity: 0.3;
}

.form-btn:active,
.form-btn-cancel:active,
.form-btn-error:active {
  transform: translateY(1px);
}

.form-btn-error::before {
  background: #d9534f;
}

.form-btn-cancel {
  transition: color 0.28s ease, transform 0.28s ease;
  color:  #434343;
  
  will-change: color, transform;
}

.form-btn-cancel.-nooutline {
  border-color: transparent;
}

.form-btn-cancel::before {
  background: #747474;
  opacity: 0;
  transition: opacity 0.28s ease;
  will-change: opacity;
}

.form-btn-cancel::after {
  display: none;
}

.form-btn-cancel:focus,
.form-btn-cancel:hover {
  color: #fff;
}

.form-btn-cancel:focus::before,
.form-btn-cancel:hover::before {
  opacity: 1;
}



.form-actions {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  margin-top: 2.25rem;
}

.form-actions .form-btn-cancel {
  -ms-flex-order: -1;
  order: -1;
}

.form-actions::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  
  opacity: 0.3;
}

.form-actions > * {
  -ms-flex: 1;
  flex: 1;
  margin-top: 0;
}

.form-fieldset {
 
  border: 0;
}

.form-fieldset + .form-fieldset {
  margin-top: 15px;
}

.form-legend {
  padding: 1em 0 0;
  margin: 0 0 -0.5em;
  font-size: 1.5rem;
  text-align: center;
}

.form-legend + p {
  margin-top: 1rem;
}

.form-element {
  position: relative;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.form-element-hint {
  font-weight: 400;
  font-size: 0.6875rem;
  color: #a6a6a6;
  display: block;
}

.form-element-bar {
  position: relative;
  height: 1px;
  background: #999;
  display: block;
}

.form-element-bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  height: 2px;
  display: block;
  transform: rotateY(90deg);
  transition: transform 0.28s ease;
  will-change: transform;
}

.form-element-label {
  position: absolute;
  top: 0.75rem;
	left: 0;
	right: 0;
	text-align: center;
  
  pointer-events: none;
  z-index: 1;
  font-size: 1rem;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  color: #434343;
  transform: translateY(-50%);
  transform-origin: left center;
  transition: transform 0.28s ease, color 0.28s linear, opacity 0.28s linear;
  will-change: transform, color, opacity;
}

.form-element-field {
  outline: none;
  height: 1.7rem;
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 1rem;
  border: 0 solid transparent;
  line-height: 1.5;
  width: 100%;
  color: #A2A2A2;
  box-shadow: none;
  opacity: 0.001;
  transition: opacity 0.28s ease;
  will-change: opacity;
}

.form-element-field:-ms-input-placeholder {
  color: #434343;
  transform: scale(0.9);
  transform-origin: left top;
}

.form-element-field::placeholder {
  color: #434343;
  transform: scale(0.9);
  transform-origin: left top;
}

.form-element-field:focus ~ .form-element-bar::after {
  transform: rotateY(0deg);
}

.form-element-field:focus ~ .form-element-label {
  color: #71AC4A;
font-family: "HelveticaNowDisplay Bold";
}

.form-element-field.-hasvalue,
.form-element-field:focus {
  opacity: 1;
}

.form-element-field.-hasvalue ~ .form-element-label,
.form-element-field:focus ~ .form-element-label {
  transform: translateY(-100%) translateY(-0.5em) translateY(-2px) scale(0.9);
  cursor: pointer;
  pointer-events: auto;

	
}

.form-has-error .form-element-label.form-element-label,
.form-has-error .form-element-hint {
  color: #d9534f;
}

.form-has-error .form-element-bar,
.form-has-error .form-element-bar::after {
  background: #d9534f;
}

.form-is-success .form-element-label.form-element-label,
.form-is-success .form-element-hint {
  color: #6CAA44;
}

.form-is-success .form-element-bar::after {
  background: #6CAA44;
}

input.form-element-field:not(:placeholder-shown),
textarea.form-element-field:not(:placeholder-shown) {
  opacity: 1;
}

input.form-element-field:not(:placeholder-shown) ~ .form-element-label,
textarea.form-element-field:not(:placeholder-shown) ~ .form-element-label {
  transform: translateY(-100%) translateY(-0.5em) translateY(-2px) scale(0.9);
  cursor: pointer;
  pointer-events: auto;
}

textarea.form-element-field {
  height: auto;
  min-height: 3rem;
}

select.form-element-field {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}

.form-select-placeholder {
  color: white;
  display: none;
}

.form-select .form-element-bar::before {
  content: "";
  position: absolute;
  height: 0.5em;
  width: 0.5em;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
  display: block;
  right: 0.5em;
  bottom: 0;
  transition: transform 0.28s ease;
  transform: translateY(-100%) rotateX(0deg) rotate(45deg);
  will-change: transform;
}

.form-select select:focus ~ .form-element-bar::before {
  transform: translateY(-50%) rotateX(180deg) rotate(45deg);
}

.form-element-field[type="number"] {
  -moz-appearance: textfield;
}

.form-element-field[type="number"]::-webkit-outer-spin-button,
.form-element-field[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


::placeholder {
  font-family: "HelveticaNowDisplay Light";
  font-size: .9em;
	color: #A2A2A2!important;

}



/*FOOTER*/



footer {
	grid-column: 1/4;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background-color: #71AC4A;
	width: 100%;
	padding: 50px 100px 50px 100px;
	z-index: 0;
	position: sticky;


}

footer p{
	color: white;
	font-size: .9em;
}



footer h3{
	color: white;
	font-size: 1.1em;
}

footer a{
	color: white;
	display: inline;
}


footer a:hover{
	color: white;
	display: inline;
}


.contactFooter {
	grid-column: 1/2;
	text-align: left;
}


.menuFooter {
	grid-column: 3/4;
	text-align: right;

}


.brandSection {
	grid-column: 2/3;
	text-align: center;
}


.brandSection p {
font-size: .7em;
	color: white;
}







/*MOBILE VERSION*/


@media only screen and (max-width: 900px) {
	
	.maincontainer {
	
	display: grid;
	grid-template-columns: 1fr ;
	width: 100%;
	gap: 0%;

	}
	
	
	
	.float{
	position:fixed;
	width:70px;
	height:70px;
	bottom:30px;
	right:30px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  	font-size:30px;
	box-shadow: 2px 2px 3px #999;
  	z-index:100;
}


.my-float{
	margin-top:16px;
}
.fa-whatsapp { 
	
	margin-right: -6px;
	margin-top: 12px;


}
	
	
	/* DROPDOWN MENU */

.dropdown {
padding-left: 0%;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 350px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding: 0px;
  left: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: .9em;
  line-height: 1.5;
  height: 100%;
}

		

	
	
	/*MAIN---------------------------------*/
	
	
	
	main{
	height: auto;
	margin-top: 100px;
	width:100%; 
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 1fr;
	padding: 0px;
	
}

main h3 {
	font-family: 'Bebas Neue', cursive;
	font-size: 2em;
	
	
}
	
	
	
	.formularioContainer {
	
	grid-column: 1/2;
	margin: 0px 0px 0px 0px ;
	-webkit-box-shadow: 6px 6px 6px -1px rgba(0,0,0,0.21); 
	box-shadow: 6px 6px 6px -1px rgba(0,0,0,0.21);
	border-radius: 0px;
	height: 700px;
	text-align: center;
	padding: 10px;
	
	
}

.contactosContainer {
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 1fr;
	color: white;
	margin-left: 0px;
}

.contactosContainer a,p,h2 {

	color: white;
}



.contactos {
	
	grid-column: 1/2;
	background-color:#808080;
	margin-bottom: 10px;
	text-align: center;
	padding: 20px;
	
}

.mapa {
	grid-column: 1/2;
}


	
	
	
	
	
	/*FOOTER*/
	
footer {
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 1fr;
	background-color: #71AC4A;
	width: 100%;
	padding-bottom: 50px;
	
}

	footer h3{
	color: white;
	font-size: 1.1em;
}

footer a{
	color: white;
	display: inline;
}


footer a:hover{
	color: white;
	display: inline;
}


.contactFooter {
	grid-column: 1/2;
	text-align: center;
	visibility: visible;
	padding-top: 50px;

}


.menuFooter {
	
	padding-top: 0px;
	padding-bottom: 0px;
	grid-column: 1/2;
	text-align: center;
	visibility: hidden;
	height: 0px;
	width: 0px;

}
	
	
	

	
.greenLine{
	
	visibility: hidden;
	
	}
	
	.greenLine2{
	
	visibility: hidden;
	
	}
	


.brandSection {
	grid-column: 1/2;
	text-align: center;
	padding-top: 50px;
}


.brandSection p {
font-size: .7em;
	color: white;
}

	
	

	
	
	
	
	
}