/* reset */
html, body, div, span, object, iframe,
h1, h2, h2, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
section4, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
	overflow-x: hidden;
    overflow-y: hidden;
}

article,aside,details,figcaption,figure,
section4,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul, ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
 a,a:visited,a:link,a:hover,a:active {
    text-decoration:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

em{
	font-style:normal;
}	

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* #reset */

/* global settings */

html, body {
    margin:0;
    padding:0;
    height:100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size:62.5%; 
	line-height: 0;
	color:#fff;
	overflow-x: hidden;	
	overflow-y: scroll;
}

img,
video, 
object {
	width:100%;
}

img,
video {
	height:auto;
}

object{
	height:100%;
}

a,
a:hover {
	text-decoration:none;
}

p,
h2,
h2,
h4 {
	padding:0;
}

p {
	font-size:1.6em;
	margin:0 0 2em 0;
}

h2 {
	font-size:2.4em;
	line-height:1em;
}

input:focus {
	outline: 0;
} 

a:focus {
	outline: 0;
}


/* Reset HTML5 Search Input in Webkit */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  -webkit-appearance:none;
}
input[type=search] {
  -webkit-appearance:textfield;
  -webkit-box-sizing:content-box;
 }

/* global transition time */
h2,p,a,ul,li	{
		transition:position 0.5s ease-in-out;
	  	-webkit-transition:position 0.5s ease-in-out;
	  	-moz-transition:position 0.5s ease-in-out;
	  	-ms-transition:position 0.5s ease-in-out;
}

#main-wrapper,
nav,
section:not(#section5),
article,
aside,
.center {
   position:relative;
}

.center{
	width:110em;
	margin:auto;

}

#main-wrapper,
section {
   min-height:100%;
}

 
#main-wrapper,
header,
section,
article, 
aside,
section4 {
	width:100%;
	line-height:2.4em;
}


article .center {
	text-align:center;
}


section,  
section4 {
	overflow:hidden;
}

section4 {
	position:absolute;
	left:0;
	bottom:0;
}

::selection {
  background: #ff781d;
  color:#fff;
}
::-moz-selection {
  background: #ff781d;
  color:#fff;
}

/* preloader */

#preloader {
    position: fixed;
    top:0; left:0;
    right:0; bottom:0;
    background: #fff;
    z-index: 999;
}
#loader{
    width: 30em;
    height: 30em;
    background: url(../images/load.gif) center center no-repeat;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}


/* font primary */

p,li,a{font-family: 'Raleway', sans-serif;}



/* header */

header{
	background:#fff;
	height:8em;
}

header h1 a span{
	display:none;
}


/* ----------- logo ---------------*/

header h1 a{
	width: 28em;
    height: 7em;
	position:absolute;
	margin:0.5em 0 0 8em;
	background:url(../images/logo.jpg) center center no-repeat;
	background-size:cover;	
}

/* ----------- nav ---------------*/

nav#menu{
	float:right;
	margin:3em 8em 0 0;
}

nav#menu,nav#menu ul,nav#menu ul li,nav#menu ul li a{
	position:relative;
	display:block;
}

nav#menu ul li{
	position:relative;
	float:left;
	margin:0 .6em 0 .6em;
}

nav#menu ul li a{
	padding:.2em .8em .2em .8em;
	text-transform:uppercase;
	font-size:1.6em;
	font-weight:300;
	color:#ff6400;
}

nav#menu ul li:last-child a {
    display: block;
    background: transparent url("../images/social.png") no-repeat scroll center top / cover;
    height: 1.5em;
    width: 1.5em;
    padding: 0;
}

nav#menu ul li:last-child:after {
	border-bottom:0;
	
}

	nav#menu ul li:after{
		content:"";
		border-bottom:1px solid #ff6400;
		position:absolute;
		display:block;
		width:0;
	}
	nav#menu ul li:hover:after{
		width:100%;
		transition: width .5s;
		-webkit-transition: width .5s;
		-moz-transition: width .5s;
		-ms-transition: width .5s;
	}
	
a.pull {
    position: absolute;
    width: 3em;
    height: 3em;
    right: 6em;
	top: 3em;
    display: none;
    background: url(../images/menu.png) center center no-repeat;
    overflow: hidden;
}	


/* ----------- slider ---------------*/
	
.my-slider,.my-slider ul,.my-slider ul li,.my-slider ul li span{
	display:block;
	height:48em;
}

	.my-slider ul li:first-child span{
		background:url(../images/slide01.jpg) center 20% no-repeat;
		background-size:cover;
	}
	.my-slider ul li:nth-child(2) span{
		background:url(../images/slide02.jpg) center 32% no-repeat;
		background-size:cover;
	}
	.my-slider ul li:last-child span{
		background:url(../images/slide03.jpg) center 30% no-repeat;
		background-size:cover;
	}

.my-slider ul li p {
    z-index: 900;
    position: relative;
    top: -4em;
    line-height: 1.4em;
    text-align: right;
    font-size: 2em;
    background: rgba(255, 100, 0,0.7);
    padding: 0.5em 4em;
    left: 34%;
    width: 56%;
	border-radius: 15px 15px 0 0;
}

.my-slider ul li:nth-child(1n) p {
    background: rgba(255, 100, 0,0.7);
}

.my-slider ul li:nth-child(2n) p {
    background: rgba(103, 88, 153,0.7);
}

.my-slider ul li:nth-child(3n) p {
    background: rgba(33, 164, 233,0.7);
}

.my-slider ul li p em{
		font-size:2em;
		font-weight:600;
		line-height: .8em;
}	
	
.unslider ol{
	display:none;
}


/* ----------- section2 ---------------*/

#section2{
	background: #fff;
	padding-bottom:6em;
}

#section2 h2{
	display:none;
}

.section2-container{
	width:80%;
	margin:0 auto;
	margin-top:8em;
}

.section2-container ul{
	width:100%;
}

.section2-container>ul>li{
	width:30%;
	position:relative;
	margin-left:5%;
	float:left;
}
	.section2-container>ul>li:first-child{
		margin-left:0;
	}

.section2-container ,.section2-container ul,.section2-container ul li{
	position:relative;
}

	
	
	.section2-container>ul>li>ul>li p{
		text-align:center;
		font-size:1.4em;
		line-height: 1.4em;
		color: #777;
	}
	.section2-container>ul>li>ul>li p em {
		font-size: 1.4em;
		text-transform: capitalize;
		margin-bottom: 2em!important;
		position: relative;
		display: block;
		height: 0;
		color: #fe6500;
		line-height:1.2em;
	}
	
/* ----------- container gallery ---------------*/
	
.container-gallery{
	position:relative;
	width:90%;
	margin:0 0 5em 5%;
	padding-bottom:.5em;
	height: auto;
    overflow: hidden;
}

.container-gallery ul{
	display:block;
	position:relative;
	width:100%;
	margin:0 auto;
	height:24em;
}

.container-gallery ul li{
	display:block;
	position:relative;
	overflow:hidden;
	float:left;
	height:24em;

}

.container-gallery a{
	display:block;
	position:relative;
	float:left;
	height:24em;
	width:100%;
	background:#eee;
	-webkit-box-shadow:inset 0px 0px 0px 2px #eaeaea;
    -moz-box-shadow:inset 0px 0px 0px 2px #eaeaea;
    box-shadow:inset 0px 0px 0px 2px #eaeaea;
	border-radius:5px;
	overflow:hidden;
}

.gallery1{
	width:33.3%;
}
.gallery12{
	width:16.65%;
}
.gallery1,.gallery12{
	-webkit-transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
	-moz-transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
	-ms-transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
    transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
}	

	.container-gallery>ul>li:first-child  a{
		background:url(../images/popa0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(2)  a{
		background:url(../images/popb0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(3)  a{
		background:url(../images/popc0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(4)  a{
		background:url(../images/popd0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(5)  a{
		background:url(../images/pope0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(6)  a{
		background:url(../images/popf0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(7)  a{
		background:url(../images/popg0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(8)  a{
		background:url(../images/poph0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(9)  a{
		background:url(../images/popi0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(10)  a{
		background:url(../images/popj0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(11)  a{
		background:url(../images/popk0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(12)  a{
		background:url(../images/popl0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(13)  a{
		background:url(../images/popm0.jpg) center center no-repeat;
		background-size:cover;
	}
	.container-gallery>ul>li:nth-child(14)  a{
		background:url(../images/popn0.jpg) center center no-repeat;
		background-size:cover;
	}
	

.container-gallery>ul>li>a>span{
		background:rgba(0,0,0,0);
		display:block;
		height:100%;
		width:100%;
		position:absolute;
		transition:.3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
	}
	
.container-gallery>ul>li>a:hover>span{
		background:rgba(0,0,0,.4);
	}
.container-gallery>ul>li:hover>p{
		top: 13em;
	}
.container-gallery>ul>li>a:hover>em{
		opacity:1;
	}	

.container-gallery>ul>li p{
		position: absolute;
		font-size: 2em;
		color: #ff6400;
		background: #fff;
		padding: .3em 2em;
		text-transform:capitalize;
		top: 10.2em;
		font-weight: 400;
		transition: .3s;
		-webkit-transition: .3s;
		-moz-transition: .3s;
		-ms-transition: .3s;
	}

.container-gallery>ul>li>a>em{
		background:url(../images/search.png) center center no-repeat;
		display:block;
		height:3em;
		width:3em;
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-1.5em;
		margin-top:-1.5em;
		opacity:0;
	}	
	
	
	

/* ----------- section4 ---------------*/

#section4{
	background:#eaeaea;
}

#section4 h2 {
    text-align: center;
    padding: 1em 0 1em 0;
    text-transform: capitalize;
    font-size: 2.8em;
    font-weight: 600;
    color: #fff;
    background: #887fb2;
}

#section4>span{
	position:realative;
	margin:0 auto;
	margin-bottom:5em;
	display:block;
	width: 12em;
    height: .6em;
    background: #ff6600;
}


.section4-container{
	width:70%;
	margin:0 auto;
}

.section4-container ul{
	width:100%;
}

.section4-container>ul>li{
	width:30%;
	position:relative;
	margin:0 1.6% 5em 1.6%;
	float:left;
	transition:.5s;
	-webkit-transition-delay:width .5s;
	-moz-transition-delay:width .5s;
	-ms-transition-delay:width .5s;
}

.section4-container>ul>li>ul{
	width:100%;
	height:35em;
	position:relative;
	top:0;
	background:#fff;
	transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -ms-transition: 0.2s ease-in-out;
	border-radius:3px;
	overflow:hidden;
}	

.section4-container ,.section4-container ul,.section4-container ul li{
	position:relative;
}

	.section4-container>ul>li>ul>li:first-child{
		display:block;
		height:25em;
		width:100%;
		margin:0 auto;
		margin-bottom:1em;
		border-bottom: 5px solid #6affa9;
	}
	
	.section4-container>ul>li>ul:hover{
		top: -1em;
		-webkit-box-shadow: 0px 26px 24px 0px rgba(0,0,0,0.45);
		-moz-box-shadow: 0px 26px 24px 0px rgba(0,0,0,0.45);
		box-shadow: 0px 26px 24px 0px rgba(0,0,0,0.45);
		cursor:pointer;
	}
	
	.section4-container>ul>li>ul>li p{
		font-size: 1.4em;
		font-weight: 300;
		font-family: Helvetica, Arial,sans-serif;
		color: #777;
		text-align:center;
	}
	.section4-container>ul>li>ul>li p em{
		line-height: 1.5em;
		font-size: 1.3em;
		font-weight: 600;
		font-family: Helvetica, Arial,sans-serif;
		color: #333;
		text-transform:capitalize;
	}
	


	
	
/* ----------- pop up ---------------*/

article#popup{
	width: 110em;
    height: 52em;
    background: #d8d8d8;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -55em;
    margin-top: -22em;
    border-radius: .5em;
    border: #fff 8px solid;
	-ms-transform: scale(0);
	-moz-transform: scale(0); 
    -webkit-transform: scale(0);
    transform: scale(0);
	-webkit-transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
	-moz-transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
	-ms-transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
    transition:.3s cubic-bezier(0.51, 0.2, 0.21, 0.86);
}

article#popup .my-slider{
    height: 52em!important;
}

article#popup>ul{
	width: 110em;
    height: 52em;
    display:block;
}

article#popup span{
	background:url(../images/close.png) center center no-repeat;
	display:block;
	width:2em;
	height:2em;
	position:absolute;
	top:1em;
	right:1em;
	cursor:pointer;
	z-index:999;
}

	
	
/* ----------- section 5 ---------------*/	

#section5{
	z-index:0;
}
	
#section5 h2{
	text-align:center;
	padding:2em;
	text-transform:capitalize;
	background: #50b9f0;
}	
	
.form-container{
	width:70%;
	position:relative;
	margin:0 auto;
	padding: 6em 0 8em 0;	
}	

.form-col-l,.form-col-r{
	width:40%;
	position:relative;
	float:left;
	margin-bottom: 6em;
}

input[type=text], input[type=url], input[type=tel], input[type=number], input[type=email], textarea {
    height: 40px;
    display: block;
    background: #ffffff;
    font-size: 16px;
    padding-left: 6px;
    border-radius: 0;
}
	
input[type="text"], input[type="password"], input[type="email"], #contact textarea, #contact select {
    margin-bottom: 20px;
    width: 100%;
    border: 1px #ccc solid;
}

textarea {
    padding-top: 9px;
    overflow: auto;
    vertical-align: top;
    resize: none;
	width: 99.7%;
}

.submit {
    text-transform: uppercase;
    letter-spacing: 2px;
    height: 60px;
    display: inline-block;
    padding: 15px 30px;
    width: 100%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	margin-top:2em;
}

.form-col-r{
	color:#444;
	text-align:left;
	margin-left: 10%;
}

#section5 h3 {
    color: #405FB9;
    padding: 0;
	font-size:2em;
    margin-bottom: 6px;
}

/* ----------- section 6 ---------------*/

/* ----------- section 7---------------*/		

#section7 {
    background: #0078b1;
}	

#section7 p{
   color:#ccc;
   font-weight:600;
   padding:2em;
   text-align:center;
}

#section7 p a{
   color:#fff;
}	
	
	
/* ----------- media query ---------------*/
	
	

/* ----------- 1366 ---------------*/
	
@media only screen and (max-width:1366px){
	
.unslider-arrow.prev {
    left: 12em!important;
}
.unslider-arrow.next {
    right: 12em!important;
}
.my-slider ul li p {
    left: 16em;
}

}


/* ----------- 1280 min ---------------*/
	
@media only screen and (min-width:1279px){
	
nav#menu ul li a{
	border: 1px solid #dadada;
}
}

/* ----------- 1280 ---------------*/


@media only screen and (max-width:1280px){
	
.section2-container {
    width: 76%;
}

nav#menu {
    float: left;
    margin: 10em 0 0 3em;
}

nav ul li {
    clear: both;
    font-size: 2.1em;
    margin-bottom: .6em;
    font-weight: 300;
    border-bottom: 1px #ccc solid;
	}
	nav ul {
    margin: 2em 0 5em 0;
    height: 20em;
    width: 87%;
	}
	nav#menu ul li:after{
		display:none;
	}
	nav#menu ul li:last-child a {
    height: 1em;
    width: 1em;
	}
	nav#menu ul li:last-child a {
	margin: .5em .6em .5em .8em;
	}
	

}


/* ----------- 1200 ---------------*/


@media only screen and (max-width:1200px){
	
.section2-container {
    width: 76%;
}

.section4-container {
    width: 80%;
}
.gallery1{
	width:50%;
}
.gallery12{
	width:50%;
}

article#popup{
	width: 80em;
    height: 62em;
    background: #d8d8d8;
    position: fixed;
    z-index: 999;
    top: 35%;
    left: 64%;
}


}



/* ----------- 960 ---------------*/


@media only screen and (max-width:960px){
	
.unslider-arrow.prev {
    left: 6m!important;
}
.unslider-arrow.next {
    right: 6em!important;
}
.my-slider ul li p {
    left: 12em;
}
.section2-container>ul>li {
    width: 100%;
	margin-left:0;
}

.section2-container>ul>li>ul>li:first-child{
	float:left;
}

.section2-container ul {
    width: 100%;
    margin: 0 auto;
	padding-bottom: 7em;
}
.section2-container>ul>li>ul>li:last-child {
    float: left;
    width: 70%;
    margin-left: 3em;
}
.section2-container>ul>li>ul>li p {
    text-align: left;
}
.section2-container>ul>li>ul>li p em {
    margin-bottom: 2em!important;
}

.gallery1{
	width:100%;
}
.gallery12{
	width:100%;
}
article#popup{
	width: 90%;
    height: 62em;
	left:5%;
	margin-left: 0;
}

}	


/* ----------- 768 ---------------*/


@media only screen and (max-width:768px){
	
.unslider-arrow.prev {
   display:none;
}
.unslider-arrow.next {
   display:none;
}
.my-slider ul li p{
    margin-top: 9em;
	font-size: 2em;
	left:4em;
}
.my-slider ul li p em {
    font-size: 4em;
}
.my-slider ul li:first-child span {
    background: url(../images/slide01_resp.jpg) 76% 20% no-repeat;
    background-size: cover;
}
.section2-container {
    width: 88%;
}
.section2-container>ul>li>ul>li:last-child {
    width: 52%;
}
.section4-container {
    width: 100%;
}
.right-col .nd-container {
    background: url(../images/nosotros01_resp.jpg) center center no-repeat;
}
.section4-container>ul>li:first-child>ul>li:first-child {
    background: url(../images/prod01_resp.jpg) center center no-repeat;
    background-size: cover;
}
.section4-container>ul>li:nth-child(2)>ul>li:first-child {
    background: url(../images/prod02_resp.jpg) center center no-repeat;
    background-size: cover;
}
.section4-container>ul>li:last-child>ul>li:first-child {
    background: url(../images/prod03_resp.jpg) center center no-repeat;
    background-size: cover;
}




/* ----------- 640 ---------------*/

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


.filter ul li a {
    margin-left: 0.4em;
    font-size: 1.4em;
}
.section4-container>ul>li {
    width: 94%;
    margin: 0 3% 5em 3%;
}
.form-container {
    width: 94%;
}
article#popup{
	width: 94%;
    height: 40em;
	left:3%;
	top:30%;
	margin-left: 0;
}

}





/* ----------- 480 ---------------*/



@media only screen and (max-width:480px){
	
header h1 a {
    width: 21em;
    height: 5em;
    margin: 2.5em 0 0 3em;
}	

.my-slider ul li p {
    font-size: 2em;
    margin-top: 5em;
    left: 2em;
}

.my-slider ul li p em {
    font-size: 3em;
}

.my-slider{
    height: 40em;
}
.section2-container>ul>li>ul>li p em {
    font-size: 1em;
    font-weight: 600;
    padding-bottom: 1em;
}
.filter ul li {
    line-height: 4em;
}
.form-col-l, .form-col-r {
    width: 90%;
}

}


/* ----------- 320 ---------------*/


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

header h1 a {
    width: 10em;
	background: url(../images/logo.jpg) left center no-repeat;
    background-size: cover;
}

.my-slider ul li p {
    font-size: 1.5em;
    margin-top: 1em;
    left: 1.2em;
}

.section2-container>ul>li>ul>li:first-child {
    float: none;
}
.section2-container>ul>li>ul>li:last-child {
    width: 100%;
	margin:0 auto;
}

.section2-container>ul>li>ul>li p {
    text-align: center;
}


}