@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;
}



body{
	
	
    
}
a {
  color: #434343;
  line-height: 1.1;
  text-decoration: none;
}
 a:hover {
  color: #6CAA44;
}


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

}


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

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;
	
}


.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;

}



/* 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;}

.dropdown:focus .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;
  }
}




/*FIN HEADER Y MENU*/


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

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


.titulo {
	
	grid-column: 1/4;
	width: 100%;
	background-color: #808080;
	display: flex;
	align-items:flex-start;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: flex-start;
	padding: 70px 0px 0px 100px;
	text-align: left;
	height: 200px;
	margin-bottom: 30px;
	line-height: 1.2;
}

.titulo h1 {
	font-size: 2.3em;
	color:white;
	font-family: "HelveticaNowDisplay Light";
}


.bannerProIndustrias {
	
	width: 100%;
	height:200px; 
    background-image:url("images/productosIndustrialesBanner.png");
  	background-size:cover;
	background-repeat: no-repeat;
	grid-column: 4/6;
	
}

.bannerProAuto {
	
	width: 100%;
	height:200px; 
    background-image:url("images/Productos AutoBanner.png");
  	background-size:cover;
	background-repeat: no-repeat;
	grid-column: 4/6;
	
}

.greySquare {
	
	
	
	grid-column: 3/4;
	width: 100%;
	background-color: #6CAA44;
	display: flex;
	align-items:center;
	padding: 9px 0px 0px 100px;
	text-align: left;
	height: 200px;
	margin-bottom: 30px;
}







.productsContainer {
	
	grid-column: 1/6;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0px 100px 100px 100px ;
	grid-gap: 10px;
	
}

.productContainer {
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	border: 1px solid #A7A7A7;
	padding: 10px;

}

.productContainer h3{
	
	font-size: 1.9em;

}

.productContainer p{
	
	font-size: 1em;

}



.productImage {
	grid-column: 1/3;
}


.labelContainer {
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column: 1/3;
	margin-top: 5px;
	margin-bottom: 5px;
}

.tituloProducto {
	
	grid-column: 1/3;

}

.subtituloProducto {
	grid-column: 1/3;
}

.buyIcon {
	
	grid-column: 1/3;
	border: 1px solid #A7A7A7;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
}



.buyIcon:hover {
	
	
	border: 1px solid #707070;
	
}

.buyIcon a:hover{
	
color: #71AC4A;
}


.buyIcon a{
	
	font-size: .9em;
}









/*FOOTER*/



footer {
	grid-column: 1/6;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background-color: #71AC4A;
	width: 100%;
	padding: 50px 100px 50px 100px;
 	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) {
	
	
	html{
		
		height:  100%
		
	}
	
	.maincontainer {
	
	
	display: grid;
	grid-template-columns: 1fr ;
	width: 100%;
	height: 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;


}
	
	/* 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{
	
	margin-top: 100px;
	width:100%; 
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 1fr;
	
}

main h3 {
	font-family: 'Bebas Neue', cursive;
	font-size: 2em;
	
	
}
	
	
	
	.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: 13px;


}

	
	
	
	
.bannerProIndustrias {
	
	width: 100%;
	height:0px; 
    background-image:url("images/productosIndustrialesBanner.png");
  	background-size:140%;
	background-position: top;
	background-repeat: no-repeat;
	grid-column: 1/2;
	visibility: hidden;
	
	
}

.bannerProAuto {
	
	width: 100%;
	height:0px; 
    background-image:url("images/Productos AutoBanner.png");
  	background-size:140%;
	background-repeat: no-repeat;
	grid-column: 1/2;
	visibility: hidden;
	
}
	
	.greySquare {
	
	
	
	grid-column: 1/2;
	width: 100%;
	background-color: #808080;
	display: flex;
	align-items:center;
	padding: 0px 0px 0px 100px;
	text-align: left;
	height: 200px;
	margin-bottom: 30px;
		visibility: hidden;
}



.titulo {
	
	width: 100%;
	background-color: #808080;
	display: flex;
	justify-content: left;
	align-items: left;
	padding-left: 10px ;
	line-height: 2.5em;
	grid-column: 1/2;
	text-align: left;
	height: 200px;
}




.productsContainer {
	
	grid-column: 1/2;
	display: grid;
	grid-template-columns: 1fr;
	padding: 20px 10px 20px 10px ;
	grid-gap: 10px;
	margin-bottom: 100px;
	
}

.productContainer {
	
	display: grid;
	grid-template-columns: 1fr ;
	width: 100%;
	border: 1px solid #A7A7A7;
	padding: 10px;

}

.productContainer h3{
	
	font-size: 1.9em;

}

.productContainer p{
	
	font-size: .8em;

}



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


.labelContainer {
	
	display: grid;
	grid-template-columns: 1fr;
	grid-column: 1/2;
	margin-top: 5px;
	margin-bottom: 5px;
}

.tituloProducto {
	
		grid-column: 1/2;

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

.buyIcon {
	
	grid-column: 1/2;
	border: 1px solid #A7A7A7;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
}



.buyIcon:hover {
	
	
	border: 1px solid #707070;
	
}

.buyIcon a:hover{
	
color: #71AC4A;
}


.buyIcon a{
	
	font-size: .9em;
}





	
	
	
	
	
	
	
	/*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;
}

	
	

	
	
}
	
	
	
	
	





















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