/*---------------------------------------------------------------------------------------------------------
	GENERAL
---------------------------------------------------------------------------------------------------------*/
html {
	height: 100%;
}

body {
	background: #000;
	font: 20px/1.8 'Yanone Kaffeesatz', sans-serif;
	height: 130%;
	display: table;
	width: 100%;
	color: #222;
	font-weight: lighter;
	overflow-x: hidden;
}

a {
	text-decoration: none;
	color: #222;
}

.button {
	text-transform: uppercase;
	padding: 0 .7em;
	display: inline-block;
	color: white;
	font-size: 1em;
	letter-spacing: 1px;
	font-weight: normal;
	margin: 1em 0;
	background: #222;
	transition: all .3s ease;
}

.button:hover {
	opacity: .7;
}

h1 {
	font-weight: normal;
}

h2 {
	text-align: center;
	width: 100%;
	border-bottom: 2px solid;
	text-transform: uppercase;
	margin-top: 0;
}

h3 {
	margin: 0;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

p a {
	border-bottom: 1px solid;
	font-weight: normal;
}

.wrapper, .small-wrapper {
	margin: 0 auto;
	max-width: inherit;
	padding: 0 5%;
	position: relative;
}

.small-wrapper {
	max-width: 1200px;
}

.two-col {
       -moz-column-count: 2;
       -moz-column-gap: 2em;
       -webkit-column-count: 2;
       -webkit-column-gap: 2em;
}

/*---------------------------------------------------------------------------------------------------------
	HEADER
---------------------------------------------------------------------------------------------------------*/
.header {
	background: #fff;
	height: 80px;
	overflow: hidden;
	width: 100%;
}

.header #site-logo {
	display: inline-block;
	float: left;
	max-width: 200px;
	height: auto;
	line-height: 0;
	margin-top: 1.2em;
}

.header #site-logo img {
	width: 100%;
	height: auto;
}

.header nav#main-menu {
	display: inline-block;
	float: right;
}

.header nav#main-menu ul li {
	display: inline-block;
	line-height: 80px;
	border-left: 1px solid #ccc;
	transition: all .1s ease;
}

.header nav#main-menu ul li:hover {
	background: #000;
}

.header nav#main-menu ul li a#contacto-link {
	cursor: pointer;
}

.header nav#main-menu ul li:last-child {
	border-right: 1px solid #ccc;
}

.header nav#main-menu ul li a {
	display: inline-block;
	height: 100%;
	padding: 0 1em;
	letter-spacing: .3px;
	text-transform: uppercase;
	font-size: .888em;
	color: #222;
	position: relative;
	top: -1px;
	transition: all .5s ease;
}

.header nav#main-menu ul li a:hover {
	color: #eee;
}

.menu-active {
	background: black !important;
	color: #FF4D00 !important;
	transition: all .2s ease;
}

.notransition {
	transition: none !important;
}

/*** RESPONSIVE MENU ***/
.header #menu {
	display: none;
}

nav#secondary-menu {
	margin: 1.5em 0;
}

nav#secondary-menu ul li {
	display: inline-block;
	margin-bottom: .2em;
	transition: all .1s ease;
}

nav#secondary-menu ul li a {
	display: inline-block;
	padding: .5em;
	line-height: 1;
	color: #666;
	text-transform: uppercase;
	letter-spacing: .3px;
	font-size: .9em;
	font-weight: normal;
	transition: color .5s ease;
	border: 1px solid #444;
}

nav#secondary-menu ul li a:hover {
	color: #eee;
	border: 1px solid #eee;
}

.secondary-active {
	color: #000 !important;
	background: #FF4D00;
	border: 1px solid #FF4D00 !important;
}


/*---------------------------------------------------------------------------------------------------------
	MISC
---------------------------------------------------------------------------------------------------------*/
ul.dropdown ul,
ul.dropdown li:hover ul ul,
ul.dropdown ul li:hover ul ul {
	display: none;
}

ul.dropdown li:hover ul,
ul.dropdown ul li:hover ul ,
ul.dropdown ul li ul li:hover ul {
	display: block;
}

/*---------------------------------------------------------------------------------------------------------
	HOME / PRODUCTOS
---------------------------------------------------------------------------------------------------------*/
.content-container {
	position: absolute;
	width: 100%;
	height: 100%;
	margin-bottom: 2em;
}

.row {
	width: 100%;
	height: 50%;
	position: relative;
}

.col {
	display: inline-block;
	height: 100%;
	width: 33.3%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

    transition: all .5s ease;
    cursor: pointer;
    vertical-align: top;
    position: relative;
    z-index: 0;
}

.col:hover, .open {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

.col div.title-container {
	width: 100%;
	text-align: center;
	display: inline-block;}

.col div.title-container span {
	background: rgba(0,0,0,.8);
	color: white;
	text-transform: uppercase;
	font-size: 1.2em;
	position: absolute;
	display: inline-block;
	width: 100%;
	bottom: 0;
	left: 0;
}

/*** ARTICLE FIRST OPEN ***/
article.first-open {
	display: none;
	background: #fff;
	position: absolute;
	border-bottom: 0;
	text-align: center;
	cursor: default;
	width: 33.3%;
	z-index: 9;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 1);
	height: 100%;
	top: 65%;
}

article.first-open .article-wrapper {
	padding: 5%;
}

article.first-open .close {
	position: absolute;
	right: .5em;
	top: .5em;
	cursor: pointer;
	color: #aaa;
	transition: all .3s ease;
}

article.first-open .close:hover {
	color: #666;
}

article.first-open p {
	font-size: .9em;
	line-height: 1.5;
	margin-bottom: .2em;
}

/*** ARTICLE SECOND OPEN ***/
article.second-open {
	display: none;
	background: #fff;
	position: absolute;
	width:100%;
	top: 0;
	z-index: 99;
}

article.second-open .close {
	position: absolute;
	right: 0;
	color: #aaa;
	background: #fff;
	top: -30px;
	width: 40px;
	height: 30px;
	text-align: center;
	line-height: 2.2;
	cursor: pointer;
	transition: all .3s ease;
}

article.second-open .close:hover {
	color: #666;
}

article.second-open h3 {
	text-transform: uppercase;
	font-weight: normal;
}

article.second-open p {
	font-size: .9em;
	line-height: 1.5;
}

article.second-open .left-image {
	width: 20%;
	display: inline-block;
	float: left;
	height: 1100px;
}

article.second-open .text-container {
	padding: 2% 2% 0;
	overflow: hidden;
	width: 76%;
	float: right;
}

article.second-open .text-container .wrapper {
	padding: 0;
}

article.second-open .text-container .left {
	display: inline-block;
	float: left;
	width: 48%;
}

article.second-open .text-container .right {
	display: inline-block;
	float: right;
	width: 48%;
}

article.second-open .disponibility {
	font-size: .9em;
}

article.second-open .features {
	display: inline-block;
	width: 60%;
	overflow: hidden;
	float: left;
}

article.second-open .features img {
	width: 100%;
	height: auto;
	margin: 1em 0;
}

article.second-open .flexslider {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	margin: 2em 0 0 !important;
}

article.second-open .flexslider .slides img {
	margin-bottom: 0;
	position: relative;
	left: 3px;
}

article.second-open .flexslider h3 {
	text-transform: uppercase;
	text-align: center;
	font-weight: 300;
}

article.second-open .flex-direction-nav a {
	height: auto !important;
}

article.second-open .artist {
	display: inline-block;
	width: 34%;
	float: right;
	padding: 2%;
	text-align: center;
}

article.second-open .artist a {
	color: #eee;
}

article.second-open .artist a:hover {
	border-bottom: 1px solid;
}

article.second-open .artist .artist-social {
	margin-top: 2em;
}

article.second-open .artist img.artist-profile {
	width: 60%;
	margin: 0 auto;
	margin-top: 1.5em;
	height: auto;
	border-radius: 100%;
	display: block;
	margin-bottom: 1em;
}

article.second-open .artist h2 {
	border-bottom: none;
	color: #fff !important;
}

article.second-open .artist p {
	color: #eee;
}

/* PINTURAS
**********************************************************************************************************/
/*** Grids BG Images ***/
.pinturas #row1 #col1 {
	background: url(img/termoplastica.jpg) 50%;
	background-size: cover;
}

.pinturas #row1 #col2 {
	background: url(img/anticorrosivo.jpg) 50%;
	background-size: cover;
}

.pinturas #row1 #col3 {
	background: url(img/sotofondo.jpg) 50%;
	background-size: cover;
}

.pinturas #row2 #col1 {
	background: url(img/emulsionada.jpg) 50%;
	background-size: cover;
}

.pinturas #row2 #col2 {
	background: url(img/silicone.jpg) 50%;
	background-size: cover;
}

.pinturas #row2 #col3 {
	background: url(img/para-canchas.jpg) 50%;
	background-size: cover;
}

/*** Cols Position and Color ***/
.pinturas #row1 article.first-open.termoplastica {
	left: 0;
}

.pinturas #row1 article.first-open.termoplastica a.button {
	background: #AC222A;
}

.pinturas #row1 article.first-open.termoplastica h2 {
	color: #AC222A;
}
/***/
.pinturas #row1 article.first-open.anticorrosivo {
	left: 33.3%;
}

.pinturas #row1 article.first-open.anticorrosivo a.button {
	background: #914A2A;
}

.pinturas #row1 article.first-open.anticorrosivo h2 {
	color: #914A2A;
}
/***/
.pinturas #row1 article.first-open.sotofondo {
	left: 66.6%;
}

.pinturas #row1 article.first-open.sotofondo a.button {
	background: #676767;
}

.pinturas #row1 article.first-open.sotofondo h2 {
	color: #676767;
}
/***/
.pinturas #row2 article.first-open.emulsionada {
	left: 0;
	top: -65%;
}

.pinturas #row2 article.first-open.emulsionada a.button {
	background: #007196;
}

.pinturas #row2 article.first-open.emulsionada h2 {
	color: #007196;
}
/***/
.pinturas #row2 article.first-open.silicone {
	left: 33.3%;
	top: -65%;
}

.pinturas #row2 article.first-open.silicone a.button {
	background: #8E0062;
}

.pinturas #row2 article.first-open.silicone h2 {
	color: #8E0062;
}
/***/
.pinturas #row2 article.first-open.para-canchas {
	left: 66.6%;
	top: -65%;
}

.pinturas #row2 article.first-open.para-canchas a.button {
	background: #4E8781;
}

.pinturas #row2 article.first-open.para-canchas h2 {
	color: #4E8781;
}

/*** Second Open BG Images Large ***/
.pinturas article.second-open.termoplastica .left-image {
	background: url(img/termoplastica-large.jpg) 50%;
	background-size: cover;
}

.pinturas article.second-open.anticorrosivo .left-image {
	background: url(img/anticorrosivo-large.jpg) 50%;
	background-size: cover;
}

.pinturas article.second-open.sotofondo .left-image {
	background: url(img/sotofondo-large.jpg) 50%;
	background-size: cover;
}

.pinturas article.second-open.emulsionada .left-image {
	background: url(img/emulsionada-large.jpg) 50%;
	background-size: cover;
}

.pinturas article.second-open.silicone .left-image {
	background: url(img/silicone-large.jpg) 50%;
	background-size: cover;
}

.pinturas article.second-open.para-canchas .left-image {
	background: url(img/para-canchas-large.jpg) 50%;
	background-size: cover;
}

/*** Second Open Title Color ***/
.pinturas article.second-open.termoplastica h2 {
	color: #AC222A;
}

.pinturas article.second-open.anticorrosivo h2 {
	color:#914A2A;
}

.pinturas article.second-open.sotofondo h2 {
	color: #676767;
}

.pinturas article.second-open.emulsionada h2 {
	color: #007196;
}

.pinturas article.second-open.silicone h2 {
	color: #8E0062;
}

.pinturas article.second-open.para-canchas h2 {
	color: #4E8781;
}

/*** Second Open Artist BG ***/
.pinturas article.second-open .artist.termoplastica {
	background: #AC222A;
	color: #111;
}

.pinturas article.second-open .artist.anticorrosivo {
	background: #914A2A;
	color: #111;
}

.pinturas article.second-open .artist.sotofondo {
	background: #676767;
	color: #111;
}

.pinturas article.second-open .artist.emulsionada {
	background: #007196;
	color: #111;
}

.pinturas article.second-open .artist.silicone {
	background: #8E0062;
	color: #111;
}

.pinturas article.second-open .artist.para-canchas {
	background: #4E8781;
	color: #111;
}


/* Revestimientos
**********************************************************************************************************/
.revestimientos #row2 .col {
	width: 50%;
}

/*** Grids BG Images ***/
.revestimientos #row1 #col1 {
	background: url(img/texturizado.jpg) 50%;
	background-size: cover;
}

.revestimientos #row1 #col2 {
	background: url(img/frisotex.jpg) 50%;
	background-size: cover;
}

.revestimientos #row1 #col3 {
	background: url(img/pasta.jpg) 50%;
	background-size: cover;
}

.revestimientos #row2 #col1 {
	background: url(img/cola-blanca.jpg) 50%;
	background-size: cover;
}

.revestimientos #row2 #col2 {
	background: url(img/esgrafiado.jpg) 50%;
	background-size: cover;
}

/*** Grids Cols Position and Color ***/
.revestimientos #row1 article.first-open.texturizado {
	left: 0;
}

.revestimientos #row1 article.first-open.texturizado a.button {
	background: #42297E;
}

.revestimientos #row1 article.first-open.texturizado h2 {
	color: #42297E;
}
/***/
.revestimientos #row1 article.first-open.frisotex {
	left: 33.3%;
}

.revestimientos #row1 article.first-open.frisotex a.button {
	background: #A4BA00;
}

.revestimientos #row1 article.first-open.frisotex h2 {
	color: #A4BA00;
}
/***/
.revestimientos #row1 article.first-open.pasta {
	left: 66.6%;
}

.revestimientos #row1 article.first-open.pasta a.button {
	background: #DEAA00;
}

.revestimientos #row1 article.first-open.pasta h2 {
	color: #DEAA00;
}
/***/
.revestimientos #row2 article.first-open.cola-blanca {
	left: 0;
	top: -65%;
	width: 50%;
}

.revestimientos #row2 article.first-open.cola-blanca a.button {
	background: #E55919;
}

.revestimientos #row2 article.first-open.cola-blanca h2 {
	color: #E55919;
}
/***/
.revestimientos #row2 article.first-open.esgrafiado {
	left: 50%;
	top: -65%;
	width: 50%;
}

.revestimientos #row2 article.first-open.esgrafiado a.button {
	background: #008C41;
}

.revestimientos #row2 article.first-open.esgrafiado h2 {
	color: #008C41;
}

/*** Second Open BG Images Large ***/
.revestimientos article.second-open.texturizado .left-image {
	background: url(img/texturizado-large.jpg) 50%;
	background-size: cover;
}

.revestimientos article.second-open.frisotex .left-image {
	background: url(img/frisotex-large.jpg) 50%;
	background-size: cover;
}

.revestimientos article.second-open.pasta .left-image {
	background: url(img/pasta-large.jpg) 50%;
	background-size: cover;
}

.revestimientos article.second-open.cola-blanca .left-image {
	background: url(img/cola-blanca-large.jpg) 50%;
	background-size: cover;
}

.revestimientos article.second-open.esgrafiado .left-image {
	background: url(img/esgrafiado-large.jpg) 50%;
	background-size: cover;
}

/*** Second Open Title Color ***/
.revestimientos article.second-open.texturizado h2 {
	color: #42297E;
}

.revestimientos article.second-open.frisotex h2 {
	color: #A4BA00;
}

.revestimientos article.second-open.pasta h2 {
	color: #DEAA00;
}

.revestimientos article.second-open.cola-blanca h2 {
	color: #E55919;
}

.revestimientos article.second-open.esgrafiado h2 {
	color: #008C41;
}

/*** Second Open Artist BG ***/
.revestimientos article.second-open .artist.texturizado {
	background: #42297E;
	color: #111;
}

.revestimientos article.second-open .artist.frisotex {
	background: #A4BA00;
	color: #111;
}

.revestimientos article.second-open .artist.pasta {
	background: #DEAA00;
	color: #111;
}

.revestimientos article.second-open .artist.cola-blanca {
	background: #E55919;
	color: #111;
}

.revestimientos article.second-open .artist.esgrafiado {
	background: #008C41;
	color: #111;
}


/* Cerámica y Porcelanato
**********************************************************************************************************/
.ceramica-porcelanato #row1 .col {
	width: 50%;
}

.ceramica-porcelanato #row2 .col {
	width: 100%;
}

/*** Grids BG Images ***/
.ceramica-porcelanato #row1 #col1 {
	background: url(img/listelos.jpg) 50%;
	background-size: cover;
}

.ceramica-porcelanato #row1 #col2 {
	background: url(img/ceramica.jpg) 50%;
	background-size: cover;
}

.ceramica-porcelanato #row2 #col1 {
	background: url(img/porcelanato.jpg) 50%;
	background-size: cover;
}

/*** Grids Cols Position ***/
.ceramica-porcelanato #row1 article.first-open.listelos {
	left: 0;
	width: 50%;
}
/***/
.ceramica-porcelanato #row1 article.first-open.ceramica {
	left: 50%;
	width: 50%;
}
/***/
.ceramica-porcelanato #row2 article.first-open.porcelanato {
	left: 50%;
	top: -65%;
	width: 50%;
	margin-left: -25%;
}

/*** Second Open BG Images Large ***/
.ceramica-porcelanato article.second-open .close {
	top: 360px;
	right: 10px;
}

.ceramica-porcelanato article.second-open .left-image {
	width: 100%;
	height: 350px;
	display: block;
	float: none;
}

.ceramica-porcelanato article.second-open .text-container {
	width: 70%;
	margin: 0 auto;
	margin-top: 1em;
	margin-bottom: 4em;
	display: block;
	float: none;
}

.ceramica-porcelanato article.second-open .text-container .left,
.ceramica-porcelanato article.second-open .text-container .right {
	width: 47%;
}

.ceramica-porcelanato article.second-open.listelos .left-image {
	background: url(img/listelos.jpg) 0 50%;
	background-size: cover;
}

.ceramica-porcelanato article.second-open.ceramica .left-image {
	background: url(img/ceramica.jpg) 0 50%;
	background-size: cover;
}

.ceramica-porcelanato article.second-open.porcelanato .left-image {
	background: url(img/porcelanato.jpg) 0 -2px;
	background-size: cover;
}


/* Hierro
**********************************************************************************************************/
.hierro #row1 .col {
	width: 25%;
}

/*** Grids BG Images ***/
.hierro #row1 #col1 {
	background: url(img/mallas.jpg) 50%;
	background-size: cover;
}

.hierro #row1 #col2 {
	background: url(img/cabillas.jpg) 50%;
	background-size: cover;
}

.hierro #row1 #col3 {
	background: url(img/pletinas.jpg) 50%;
	background-size: cover;
}

.hierro #row1 #col4 {
	background: url(img/alambrones.jpg) 50%;
	background-size: cover;
}

.hierro #row2 #col1 {
	background: url(img/tubos.jpg) 50%;
	background-size: cover;
}

.hierro #row2 #col2 {
	background: url(img/cerchas.jpg) 50%;
	background-size: cover;
}

.hierro #row2 #col3 {
	background: url(img/laminas.jpg) 50%;
	background-size: cover;
}

/*** Grids Cols Position ***/
.hierro #row1 article.first-open.mallas {
	left: 0;
	width: 25%;
}
/***/
.hierro #row1 article.first-open.cabillas {
	left: 25%;
	width: 25%;
}
/***/
.hierro #row1 article.first-open.pletinas {
	left: 50%;
	width: 25%;
}
/***/
.hierro #row1 article.first-open.alambrones {
	left: 75%;
	width: 25%;
}
/***/
.hierro #row2 article.first-open.tubos-hierro {
	left: 0;
	top: -65%;
	width: 33.3%;
}
/***/
.hierro #row2 article.first-open.cerchas {
	left: 33.3%;
	top: -65%;
	width: 33.3%;
}
/***/
.hierro #row2 article.first-open.laminas-hierro {
	left: 66.6%;
	top: -65%;
	width: 33.3%;
}

/*** Second Open BG Images Large ***/
.hierro article.second-open .left-image {
	width: 40%;
	height: 800px;
}

.hierro article.second-open .text-container {
	width: 54%;
}

.hierro article.second-open .text-container .left,
.hierro article.second-open .text-container .right {
	width: 47%;
}

.hierro article.second-open.mallas .left-image {
	background: url(img/mallas.jpg) 50%;
	background-size: cover;
}

.hierro article.second-open.cabillas .left-image {
	background: url(img/cabillas.jpg) 50%;
	background-size: cover;
}

.hierro article.second-open.pletinas .left-image {
	background: url(img/pletinas.jpg) 50%;
	background-size: cover;
}

.hierro article.second-open.alambrones .left-image {
	background: url(img/alambrones.jpg) 50%;
	background-size: cover;
}

.hierro article.second-open.tubos-hierro .left-image {
	background: url(img/tubos.jpg) 50%;
	background-size: cover;
}

.hierro article.second-open.cerchas .left-image {
	background: url(img/cerchas.jpg) 50%;
	background-size: cover;
}

.hierro article.second-open.laminas-hierro .left-image {
	background: url(img/laminas.jpg) 50%;
	background-size: cover;
}


/* Morteros
**********************************************************************************************************/
.morteros #row1 .col {
	width: 50%;
}

.morteros #row2 .col {
	width: 100%;
}

/*** Grids BG Images ***/
.morteros #row1 #col1 {
	background: url(img/stucco.jpg) 70%;
	background-size: cover;
}

.morteros #row1 #col2 {
	background: url(img/proyectado.jpg) 50%;
	background-size: cover;
}

.morteros #row2 #col1 {
	background: url(img/pego.jpg) 50%;
	background-size: cover;
}

/*** Grids Cols Position ***/
.morteros #row1 article.first-open.stucco {
	left: 0;
	width: 50%;
}
/***/
.morteros #row1 article.first-open.proyectado {
	left: 50%;
	width: 50%;
}
/***/
.morteros #row2 article.first-open.pego {
	left: 50%;
	width: 50%;
	top: -65%;
	margin-left: -25%;
}

/*** Second Open BG Images Large ***/
.morteros article.second-open .left-image {
	width: 30%;
	height: 1000px;
}

.morteros article.second-open .text-container {
	width: 64%;
}

.morteros article.second-open.stucco .left-image {
	background: url(img/stucco-large.jpg) 50%;
	background-size: cover;
}

.morteros article.second-open.proyectado .left-image {
	background: url(img/proyectado-large.jpg) 50%;
	background-size: cover;
}

.morteros article.second-open.pego .left-image {
	background: url(img/pego-large.jpg) 50%;
	background-size: cover;
}


/* Piezas Sanitarias y Muebles
**********************************************************************************************************/
.sanitarias-muebles #row1 .col {
	width: 33.3%;
}

.sanitarias-muebles #row2 .col {
	width: 50%;
}

/*** Grids BG Images ***/
.sanitarias-muebles #row1 #col1 {
	background: url(img/griferia.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles #row1 #col2 {
	background: url(img/sanitarios.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles #row1 #col3 {
	background: url(img/lavamanos.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles #row2 #col1 {
	background: url(img/muebles-cocina.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles #row2 #col2 {
	background: url(img/muebles-bano.jpg) 50%;
	background-size: cover;
}

/*** Grids Cols Position ***/
.sanitarias-muebles #row1 article.first-open.griferia {
	left: 0;
	width: 33.3%;
}
/***/
.sanitarias-muebles #row1 article.first-open.sanitarios {
	left: 33.3%;
	width: 33.3%;
}
/***/
.sanitarias-muebles #row1 article.first-open.lavamanos {
	left: 66.6%;
	width: 33.3%;
}
/***/
.sanitarias-muebles #row2 article.first-open.muebles-cocina {
	left: 0%;
	width: 50%;
	top: -65%;
}
/***/
.sanitarias-muebles #row2 article.first-open.muebles-bano {
	left: 50%;
	width: 50%;
	top: -65%;
}

/*** Second Open BG Images Large ***/
.sanitarias-muebles article.second-open .left-image {
	width: 40%;
	height: 800px;
}

.sanitarias-muebles article.second-open .text-container {
	width: 54%;
}

.sanitarias-muebles article.second-open.griferia .left-image {
	background: url(img/griferia.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles article.second-open.sanitarios .left-image {
	background: url(img/sanitarios.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles article.second-open.lavamanos .left-image {
	background: url(img/lavamanos.jpg) 50%;
	background-size: cover;
}

.sanitarias-muebles article.second-open.muebles-cocina .left-image {
	background: url(img/muebles-cocina.jpg) 50% 60%;
	background-size: cover;
}

.sanitarias-muebles article.second-open.muebles-bano .left-image {
	background: url(img/muebles-bano.jpg) 50%;
	background-size: cover;
}



/* Lavatodo
**********************************************************************************************************/
.lavatodo #row2 .col {
	width: 50%;
}

/*** Grids BG Images ***/

.lavatodo #row1 #col1 {
	background: url(img/lavatodo.jpg) 100%;
	background-size: cover;
	width: 100%;
}

.lavatodo #row1 #col2 {
	background: url(img/frisotex.jpg) 50%;
	background-size: cover;
}

.lavatodo #row1 #col3 {
	background: url(img/pasta.jpg) 50%;
	background-size: cover;
}

.lavatodo #row2 #col1 {
	background: url(img/cola-blanca.jpg) 50%;
	background-size: cover;
}

.lavatodo #row2 #col2 {
	background: url(img/esgrafiado.jpg) 50%;
	background-size: cover;
}

/*** Grids Cols Position and Color ***/
.lavatodo #row1 article.first-open.lavatodo {
	left: 33.3%;
}

.lavatodo #row1 article.first-open.lavatodo a.button {
	background: #3399ff;
}

.lavatodo #row1 article.first-open.lavatodo h2 {
	color: #3399ff;
}
/***/
.lavatodo #row1 article.first-open.frisotex {
	left: 33.3%;
}

.lavatodo #row1 article.first-open.frisotex a.button {
	background: #A4BA00;
}

.lavatodo #row1 article.first-open.frisotex h2 {
	color: #A4BA00;
}
/***/
.lavatodo #row1 article.first-open.pasta {
	left: 66.6%;
}

.lavatodo #row1 article.first-open.pasta a.button {
	background: #DEAA00;
}

.lavatodo #row1 article.first-open.pasta h2 {
	color: #DEAA00;
}
/***/
.lavatodo #row2 article.first-open.cola-blanca {
	left: 0;
	top: -65%;
	width: 50%;
}

.lavatodo #row2 article.first-open.cola-blanca a.button {
	background: #E55919;
}

.lavatodo #row2 article.first-open.cola-blanca h2 {
	color: #E55919;
}
/***/
.lavatodo #row2 article.first-open.esgrafiado {
	left: 50%;
	top: -65%;
	width: 50%;
}

.lavatodo #row2 article.first-open.esgrafiado a.button {
	background: #008C41;
}

.lavatodo #row2 article.first-open.esgrafiado h2 {
	color: #008C41;
}

/*** Second Open BG Images Large ***/
.lavatodo article.second-open.lavatodo .left-image {
	background: url(img/lavatodo-large.jpg) 50%;
	background-size: cover;
}

.lavatodo article.second-open.cleantex .left-image {
	background: url(img/frisotex-large.jpg) 50%;
	background-size: cover;
}

/*** Second Open Title Color ***/
.lavatodo article.second-open.lavatodo h2 {
	color: #3399ff;
}

.lavatodo article.second-open.cleantex h2 {
	color: #3399ff;
}

/*** Second Open Artist BG ***/
.lavatodo article.second-open .artist.texturizado {
	background: #3399ff;
	color: #111;
}

.lavatodo article.second-open .artist.cleantex {
	background: #3399ff;
	color: #111;
}




/* INDUSTRIAL
**********************************************************************************************************/
/*** Grids BG Images ***/
.industrial #row1 #col1 {
	background: url(img/resina-1.jpg) 50%;
	background-size: cover;
}

.industrial #row1 #col2 {
	background: url(img/industrial-pintura-1.jpg) 50%;
	background-size: cover;
}

.industrial #row1 #col3 {
	background: url(img/basf-1.jpg) 50%;
	background-size: cover;
}


/*** Cols Position and Color ***/
.industrial #row1 article.first-open.termoplastica {
	left: 0;
}

.industrial #row1 article.first-open.termoplastica a.button {
	background: #AC222A;
}

.industrial #row1 article.first-open.termoplastica h2 {
	color: #AC222A;
}
/***/
.industrial #row1 article.first-open.anticorrosivo {
	left: 33.3%;
}

.industrial #row1 article.first-open.anticorrosivo a.button {
	background: #914A2A;
}

.industrial #row1 article.first-open.anticorrosivo h2 {
	color: #914A2A;
}
/***/
.industrial #row1 article.first-open.sotofondo {
	left: 66.6%;
}

.industrial #row1 article.first-open.sotofondo a.button {
	background: #676767;
}

.industrial #row1 article.first-open.sotofondo h2 {
	color: #676767;
}
/***/
}

/*** Second Open BG Images Large ***/
.industrial article.second-open.resina .left-image {
	background: url(img/resina-large.jpg) 50%;
	background-size: cover;
}

.industrial article.second-open.resina .left-image {
	background: url(img/resina-large.jpg) 50%;
	background-size: cover;
}

.industrial article.second-open.anticorrosivo .left-image {
	background: url(img/pintura-large.jpg) 50%;
	background-size: cover;
}

.industrial article.second-open.sotofondo .left-image {
	background: url(img/aditivos-large.jpg) 50%;
	background-size: cover;
}

/*** Second Open Title Color ***/
.industrial article.second-open.resina h2 {
	color: #AC222A;
}

.industrial article.second-open.anticorrosivo h2 {
	color:#914A2A;
}

.industrial article.second-open.sotofondo h2 {
	color: #676767;
}

/*** Second Open Artist BG ***/
.industrial article.second-open .artist.resina {
	background: #AC222A;
	color: #111;
}

.industrial article.second-open .artist.anticorrosivo {
	background: #914A2A;
	color: #111;
}

.industrial article.second-open .artist.sotofondo {
	background: #676767;
	color: #111;
}



/*---------------------------------------------------------------------------------------------------------
	NOSOTROS
---------------------------------------------------------------------------------------------------------*/
.nosotros {
	color: #ddd;
}

.nosotros article {
	display: none;
	width: 100%;
	clear: both;
}

.nosotros p,
.nosotros ul li {
	margin-top: 0;
	line-height: 160%;
}

.nosotros h1 {
	color: #FF4D00;
	line-height: 1
}

/*** Historia ***/
.nosotros .historia .image-container {
	display: inline-block;
	float: left;
	width: 38%;
}

.nosotros article .image-container img {
	width: 100%;
	height: auto;
}

.nosotros .historia .text-container {
	display: inline-block;
	float: right;
	width: 58%;
	margin-bottom: 4em;
}

/*** Mision y Visión / Valores ***/
.nosotros .mision-vision .image-container,
.nosotros .valores .image-container {
	display: inline-block;
	float: left;
	width: 48%;
}

.nosotros .mision-vision .text-container,
.nosotros .valores .text-container {
	display: inline-block;
	float: right;
	width: 48%;
}

.nosotros .valores ul li {
	margin: 0 0 .5em 0;
}

/*---------------------------------------------------------------------------------------------------------
	SERVICIOS
---------------------------------------------------------------------------------------------------------*/
.servicios {
	color: #ddd;
	margin-bottom: 4em;
	height: auto;
}

.servicios article {
	margin-top: 3.5em;
	/*display: none;*/
}

.servicios h1 {
	color: #FF4D00;
	line-height: 1;
	margin-top: 0;
}

.servicios figure {
	display: inline-block;
	width: 49.5%;
}

.servicios figure img {
	width: 100%;
	height: auto;
}

.servicios .image-container {
	display: inline-block;
	float: left;
	width: 38%;
}

.servicios article .image-container img {
	width: 100%;
	height: auto;
}

.servicios .text-container {
	display: inline-block;
	float: right;
	width: 58%;
}

/*---------------------------------------------------------------------------------------------------------
	CONTACTO
---------------------------------------------------------------------------------------------------------*/
.contacto {
	display: none;
	max-width: 400px;
	width: 100%;
	position: fixed;
	right: -100px;
	z-index: 999;
	background: black;
	height: auto
	top: 80px;
	padding: 0 1.5em;
	border-left: 4px solid #FF4D00;
	color: #ccc;
	transition: right .4s ease;
	height: 100%;
}

.contacto .close {
	position: absolute;
	right: 1.5em;
	top: 1em;
	color: #666;
	font-size: 1.2em;
	cursor: pointer;
	transition: all .3s ease;
}

.contacto .close:hover {
	color: #eee;
}

.contacto h1 {
	color: #FF4D00;
}

.contacto a {
	color: #ccc;
	font-weight: lighter;
}

.contacto .address,
.contacto .email,
.contacto .telefonos {
	border-bottom: 1px solid #666;
	position: relative;
}

.contacto .email p,
.contacto .address p,
.contacto .telefonos p {
	margin-left: 2em;
}

.contacto .email:before,
.contacto .address:before,
.contacto .telefonos:before {
	position: absolute;
	top: 5px;
}


/*---------------------------------------------------------------------------------------------------------
	DISTRIBUIDORES
---------------------------------------------------------------------------------------------------------*/
.distribuidores {
	color: white;
	padding-top: 3em;
	height: auto;
}

.distribuidores .active {
	-webkit-transform: scale(1.5, 1.5) translate(0, -6px);
	-ms-transform: scale(1.5, 1.5) translate(0, -6px);
	-moz-transform: scale(1.5, 1.5) translate(0, -6px);
}

.distribuidores h1 {
	margin-top:0;
	line-height: 1;
	margin-bottom: .3em;
	color: #FF4D00;
}

.distribuidores h2 {
	border: none;
	text-align: left;
	margin: 0;
	font-weight: normal;
}

.distribuidores .mapa {
	display: inline-block;
	float: left;
	width: 55%;
	text-align: right;
	padding-right: 5%;
	position: relative;
	margin-left: 3%;
}

.distribuidores .mapa img {
	height: auto;
	width: 100%;
	max-width: 550px;
}

.distribuidores .mapa .pointers {
	position: fixed;
}

.distribuidores .mapa .pointers .apunta {
	max-width: 4%;
	position: absolute;
	cursor: pointer;
	transition: all .2s ease;
}

.distribuidores .mapa .pointers .apunta:hover {
	-webkit-transform: scale(1.15, 1.15) translate(0, -2px);
	-moz-transform: scale(1.15, 1.15) translate(0, -2px);
	-ms-transform: scale(1.15, 1.15) translate(0, -2px);
}

.distribuidores .mapa .pointers #zulia-norte {
	margin-left: 5%;
	margin-top: 2%;
}

.distribuidores .mapa .pointers #zulia-sur {
	margin-left: 3%;
	margin-top: 11%;
}

.distribuidores .mapa .pointers #barinas {
	margin-left: 16%;
	margin-top: 20%;
}

.distribuidores .mapa .pointers #portuguesa {
	margin-left: 23%;
	margin-top: 14%;
}

.distribuidores .mapa .pointers #lara {
	margin-left: 15%;
	margin-top: 5%;
}

.distribuidores .mapa .pointers #falcon {
	margin-left: 22%;
	margin-top: -2%;
}

.distribuidores .list {
	display: inline-block;
	float: left;
	width: 35%;
	margin-left: 65%;
}

.distribuidores .list ul {
	display: none;
	margin-bottom: 4em;
}

.distribuidores .list ul li {
	font-size: .888em;
	line-height: 180%;
}

.distribuidores .list ul li a {
	cursor: pointer;
	color: white;
}


/*---------------------------------------------------------------------------------------------------------
	FOOTER
---------------------------------------------------------------------------------------------------------*/
footer {
	background: #111;
	color: #ccc;
	position: fixed;
	bottom: 0;
	width: 100%;
}

footer .wrapper {
	padding: 0 5%;
}

footer small {
	position: relative;
	top: -3px;
	font-size: 15px;
}

footer .name {
	color: #FF4D00;
	margin-right: 1em;
}

footer .social-footer {
	display: inline-block;
	float: right;
	position: relative;
	top: .6em;
}

footer .social-footer li {
	display: inline-block;
	margin-left: 1em;
}

footer .social-footer a {
	color: #999;
}

footer .social-footer a:hover {
	color: #FF4D00;
}


/* Smaller than 1024
   ========================================================================== */
@media handheld, only screen and (max-width: 1023px) {
	.header {
		height: auto;
		min-height: 80px;
	}

	.header #main-menu.js {
		display: none;
	}

	.header #site-logo {
		display: block;
		float: none;
	}

	.header nav#main-menu {
		width: 100%;
		float: none;
		padding: .8em 0 .5em;
	}

	.header nav#main-menu ul li {
		display: block;
		width: 100%;
		border-left: none;
		line-height: 0;
		border-bottom: 1px solid #ccc;
	}

	.header nav#main-menu ul li:hover {
		background: inherit;
	}

	.header nav#main-menu ul li:last-child {
		border-bottom: none;
		border-right: none !important;
	}

	.header nav#main-menu ul li a {
		display: inline-block;
		height: auto;
		padding: 1em 0;
		line-height: 1;
		width: 100%;
	}

	.header nav#main-menu ul li a:hover {
		color: initial;
	}

	.header #menu {
		display: block;
		position: absolute;
		top: -2px;
		right: 5%;
		font-size: 1em;
		line-height: 1;
		color: #fff;
		cursor: pointer;
		background: #999;
		padding: 0.5em .4em .2em;
		border-radius: 5px;
	}

	.menu-active {
		background: none !important;
	}

	article.second-open .left-image {
		width: 100% !important;
		float: none !important;
		height: 200px !important;
	}

	article.second-open .text-container {
		padding: 0;
		overflow: hidden;
		width: 100%;
		float: none !important;
		margin: 0 auto;
	}

	article.second-open .text-container .left {
		width: 46%;
	}

	article.second-open .text-container .right {
		width: 46%;
	}

	article.second-open .text-container .wrapper {
		padding: 2% 5%;
	}

	article.second-open .artist {
		width: 100%;
		float: none;
		padding: 0%;
		text-align: center;
	}

	article.second-open .artist .wrapper {
		padding: 2% 5%;
	}

	article.second-open .features {
		display: inline-block;
		width: 100%;
		overflow: hidden;
		float: left;
		margin-bottom: 1em;
	}

	.pinturas article.second-open.emulsionada .left-image {
		background: url("http://localhost/pinytex/img/emulsionada-large.jpg") 50% 0%;
		background-size: cover;
	}

	article.second-open .close {
		top: -38px !important;
		height: 38px !important;
		right: 0 !important;
	}

	.hierro article.second-open .text-container {
		width: 70%;
		margin: 0 auto;
		margin-bottom: 20%;
	}

	.morteros article.second-open .text-container {
		width: 90%;
		margin-bottom: 20%;
		padding: 2% 0;
	}

	.sanitarias-muebles article.second-open .text-container {
		width: 90%;
		margin-bottom: 20%;
		padding: 2% 0;
	}

	.nosotros .historia .text-container {
		width: 100%;
	}

	.nosotros .historia .image-container,
	.servicios .image-container {
		width: 100%;
		margin-bottom: 1em !important;
	}

	.distribuidores .mapa img {
		max-width: 400px;
	}

	.col {
	    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	    filter: none; /* IE6-9 */
	    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

	    transition: all 0s ease;
	}

	.col:hover, .open {
	    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	    -webkit-filter: grayscale(0%);
	}


}


/* Smaller than 768
   ========================================================================== */
@media handheld, only screen and (max-width: 767px) {
	.col {
		width: 100% !important;
		height: 33.4%;
		box-shadow: none;
		border-top: 1px solid;
	}

	.row {
		height: 220%;
	}

	#row2 {
		margin-bottom: 2em;
	}

	article.first-open {
		width: 100% !important;
		height: auto;
		left: 0 !important;
		box-shadow: none;
		border-top: 1px solid;
		border-bottom: 1px solid;
	}

	article.first-open p {
		margin-bottom: .2em;
	}

	footer .address {
		display: none;
	}

	#row2 #col1 {
		border-top: 1px solid;
	}

	article.second-open .text-container .features .wrapper {
		padding: 2% 5%;
	}

	article.second-open .text-container .left {
		width: 100%;
		padding-left: 0;
	}

	article.second-open .text-container .right {
		width: 100%;
		padding-right: 0;
	}

	article.second-open .artist .wrapper {
		padding: 2% 5%;
	}

	.ceramica-porcelanato article.second-open .text-container {
		width: 90%;
	}

	.hierro article.second-open .text-container {
		width: 90%;
	}

	.distribuidores .mapa .pointers {
		position: relative;
	}

	.distribuidores .mapa {
		float: none;
		width: 100%;
		text-align: left;
		padding-right: 0;
		position: relative;
		margin-left: 0;
	}

	.distribuidores .list {
		float: left;
		width: 100%;
		margin-left: 0;
		text-align: center !important;
		margin-top: 1em;
	}

	.distribuidores h2 {
		text-align: center;
	}

	.distribuidores .list ul.lista-madre {
		display: block !important;
	}

	.distribuidores .list ul li {
		margin-bottom: .5em;
		padding-bottom: .5em;
		border-bottom: 1px solid #111;
	}

	.contacto {
		position: absolute;
		max-width: 230px;
		padding: 0 1em;
		font-size: 18px;
		height: 100%;
	}






	/*** Cols Position and Color ***/
	.pinturas article.first-open {
		height: 33.4%;
	}
	.pinturas #row1 article.first-open.termoplastica {
		top: 0;
	}
	/***/
	.pinturas #row1 article.first-open.anticorrosivo {
		top: 33.4%;
	}
	/***/
	.pinturas #row1 article.first-open.sotofondo {
		top: 66.8%;
	}
	/***/
	.pinturas #row2 article.first-open.emulsionada {
		top: 0;
	}
	/***/
	.pinturas #row2 article.first-open.silicone {
		top: 33.4%;
	}
	/***/
	.pinturas #row2 article.first-open.para-canchas {
		top: 66.8%;
	}






	/*** Grids Cols Position and Color ***/
	.revestimientos article.first-open {
		height: 33.4%;
	}
	.revestimientos #row2 {
		height: 147%;
	}
	.revestimientos #row2 .col {
		height: 50%;
	}
	.revestimientos #row2 article.first-open {
		height: 50%;
	}
	.revestimientos #row1 article.first-open.texturizado {
		top: 0;
	}
	/***/
	.revestimientos #row1 article.first-open.frisotex {
		top: 33.4%;
	}
	/***/
	.revestimientos #row1 article.first-open.pasta {
		top: 66.8%;
	}
	/***/
	.revestimientos #row2 article.first-open.cola-blanca {
		top: 0%;
	}
	/***/
	.revestimientos #row2 article.first-open.esgrafiado {
		top: 50%;
		height: auto;
	}





	/*** Grids Cols Position ***/
	.ceramica-porcelanato #row1 {
		height: 140%;
	}
	.ceramica-porcelanato #row1 .col {
		height: 50%;
	}
	.ceramica-porcelanato #row1 article.first-open {
		height: 50%;
	}
	.ceramica-porcelanato #row1 article.first-open.listelos {
		top: 0;
	}
	/***/
	.ceramica-porcelanato #row1 article.first-open.ceramica {
		top: 50%;
	}
	/***/
	.ceramica-porcelanato #row2 {
		height: 70%;
	}
	.ceramica-porcelanato #row2 .col {
		height: 100%;
	}
	.ceramica-porcelanato #row2 article.first-open.porcelanato {
		top: 0%;
		margin-left: 0%;
		height: 100%;
	}





	/*** Grids Cols Position ***/
	.hierro #row1 {
		height: 285%;
	}
	.hierro #row1 .col {
		height: 25%;
	}
	.hierro #row1 article.first-open {
		height: 25%;
	}
	.hierro #row1 article.first-open.mallas {
		top: 0;
	}
	/***/
	.hierro #row1 article.first-open.cabillas {
		top: 25%;
	}
	/***/
	.hierro #row1 article.first-open.pletinas {
		top: 50%;
	}
	/***/
	.hierro #row1 article.first-open.alambrones {
		top: 75%;
	}
	/***/
	.hierro #row2 article.first-open {
		height: 33.4%;
	}
	.hierro #row2 article.first-open.tubos-hierro {
		top: 0%;
	}
	/***/
	.hierro #row2 article.first-open.cerchas {
		top: 33.4%;
	}
	/***/
	.hierro #row2 article.first-open.laminas-hierro {
		top: 66.8%;
	}





	/*** Grids Cols Position ***/
	.morteros #row1 {
		height: 140%;
	}
	.morteros #row1 .col {
		height: 50%;
	}
	.morteros #row1 article.first-open {
		height: 50%;
	}
	.morteros #row1 article.first-open.stucco {
		top: 0;
	}
	/***/
	.morteros #row1 article.first-open.proyectado {
		top: 50%;
	}
	/***/
	.morteros #row2 {
		height: 70%;
	}
	.morteros #row2 .col {
		height: 100%;
	}
	.morteros #row2 article.first-open{
		height: 70%;
	}
	.morteros #row2 article.first-open.pego {
		margin-left: 0;
		top: 0;
		height: 100%;
	}





	/*** Grids Cols Position ***/
	.sanitarias-muebles #row2 {
		height: 140%;
	}
	.sanitarias-muebles #row2 .col {
		height: 50%;
	}
	.sanitarias-muebles #row1 article.first-open {
		height: 50%;
	}
	.sanitarias-muebles #row1 article.first-open.griferia {
		top: 0;
		height: 33.4%;
	}
	/***/
	.sanitarias-muebles #row1 article.first-open.sanitarios {
		top: 33.4%;
		height: 33.4%;
	}
	/***/
	.sanitarias-muebles #row1 article.first-open.lavamanos {
		top: 66.8%;
		height: 33.4%;
	}
	/***/
	.sanitarias-muebles #row2 article.first-open.muebles-cocina {
		top: 0;
		height: 50%;
	}
	/***/
	.sanitarias-muebles #row2 article.first-open.muebles-bano {
		top: 50%;
		height: 50%;
	}






	.two-col {
		-moz-column-count: 1;
		-moz-column-gap: 0em;
		-webkit-column-count: 1;
		-webkit-column-gap: 0em;
	}

	.nosotros .text-container,
	.nosotros .image-container,
	.servicios .text-container,
	.servicios .image-container {
		width: 100% !important;
		float: none !important;
	}

	.nosotros .mision-vision .image-container {
		margin-bottom: 5em;
	}

}