@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,700);


html {
	height: 100%;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
	font-size: 16px; font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #1e1e1e;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased; height:100%; margin:0; background:#000 url(../img/fondo.jpg) no-repeat top; background-size:cover 
}
h1, h2, h3, h4, h5, h6, p, ul {
	padding: 0;
	margin: 0;
}

h1 { font-weight:200; text-align:center; margin:30px 0;
   color:#c18b1e;
   background: url(../img/bgDorado.jpg);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;}
h2 { font-size:14px; font-weight:300}
h3 {
   color:#c18b1e;
   background: url(../img/bgDorado.jpg); font-weight:400;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;}

ul, li {
	list-style: none;
}
p {
	font-size: 16px;
	color: #5b5b5b;
	line-height: 24px;
}
a,button {
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
a:hover {
	text-decoration: none;
}
.clear {
	clear: both;
}
.autoClearer:before,
.autoClearer:after {
    content: " ";
    display: table;
}
.autoClearer:after {
    clear: both;
}
input[type="radio"],
input[type="checkbox"] {

}
input[type="text"],
input[type="password"],
input[type="email"] {
}

.error{background-color: #a21f11; color: white; font-weight: bold;  padding: 6px 12px; position: absolute !important; left:2px; top:32px; border-radius:0px !important;   text-align:left;width:198px;}


.wrapper {  margin:0 auto;  width: 100%; position:relative; max-width:1024px }
iframe { border:none}
.content-medium { position:relative; display:block; margin:0 auto}

img { max-width:100%}

.negativo { margin-top:-260px; padding-top:260px; background:#FFF;}
.negativo .swiper-container { width: 100%;  height: auto; border:none  }
.izquierda { position:relative; float:left;  font-size:20px; padding:0 20px !important; width:50%; margin:50px 0}
.izquierda img { width:100%}
.derecha { position:relative; float:left;  font-size:20px; padding:0 20px 0 40px !important; width:50%;background:url(../img/separador.jpg) no-repeat left; margin:50px 0px;}
.derecha img { width:100%}
video { width:100%}

.cosmetica { padding-top:30px}
.cosmetica .content-medium div.col-md-6{ padding:35px ; position:relative; float:left}
.cosmetica img.titulo { position:absolute; bottom:-20px; left:0px; z-index:999; width:100%; padding:0 14px}
.cosmetica span { position:relative; float:left; border-top-right-radius:10px; border-top-left-radius:10px; overflow:hidden}
.cosmetica span p{ position:absolute; top:0px; left:0px; bottom:0px; right:0px; background:rgba(255,255,255,0.8); text-align:center; color:#333; font-size:18px; font-weight:600; padding:50px 30px; opacity:0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease; z-index:99}
.cosmetica span:hover p { opacity:1}
.cosmetica span img{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;}
.cosmetica span:hover img{transform: scale(1.4);}

.col-md-12 { padding:0px 0px !important}

.social { position:absolute; right:80px; bottom:0px}
.social li { position:relative; display:inline-block; margin-left:20px}
.social a { width:32px; height:32px; display:block; text-indent:-9999px; background-size:cover !important;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;}
.social a:hover { opacity:0.7}
a.mail { background:url(../img/mail.png);}
a.facebook { background:url(../img/facebook.png);}
a.instagram { background:url(../img/instagram.png);}
a.youtube { background:url(../img/youtube.png);}

.conocenos .content-medium  { background:#FFF; margin-top:30px; position:relative; display:block; float:left}
.conocenos h1 { color:#000; font-weight:900; font-size:36px; margin-bottom:0px}
.conocenos h1 img{ width:100px; margin-bottom:10px}
.conocenos h2 { color:#000; font-weight:900; font-size:24px; text-align:center; margin-top:6px}
.conocenos p { color:#000;  font-size:20px; text-align:center; margin-top:6px; width:100%; padding:0 22%; line-height:30px}
.conocenos h3 { color:#000; font-weight:400; font-size:36px; text-align:center; margin-top:6px}
.marginTop { margin-top:-110px}
.marginBottom { margin-bottom:-80px}

.dorado { text-align:center;
   color:#c18b1e;
   background: url(../img/bgDorado.jpg); font-weight:400;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; font-size:18px;margin: 30px 0 110px;}

.newsletter { background:url(../img/bgDorado.jpg); position:relative; float:left; padding:8px; border-radius:10px;margin-bottom:30px; width:100%;}
.newsletterContent { background:#f5f5f5; position:relative; float:left; text-align:center;  padding:20px 12px 70px 12px; width:100%;  border-radius:8px;}	
.newsletter h1 { color:#000; font-weight:900; margin:0px 0 6px 0; background:none;
   -webkit-text-fill-color: black;}
.newsletter p { color:#000; font-weight:600; font-size:18px; font-style:italic; width:70%; margin:0 auto 10px auto}
.newsletter input { width:100%; margin:10px 0; background:#f5f5f5}
.newsletter button { background:url(../img/btnSubscribite.jpg); text-indent:-9999px; width:170px; height:36px; border:none; margin:0 auto; background-size:cover }
button:hover { opacity:0.7}
input, textarea {
    border: 2px solid transparent;
    padding: 6px;
    -webkit-border-image: url(../img/bgDorado.jpg) 1 round; /* Safari 3.1-5 */
    -o-border-image: url(../img/bgDorado.jpg) 1 round; /* Opera 11-12.1 */
    border-image: url(../img/bgDorado.jpg) 1 round;}
.formulario p{ color:#FFF !important}
.formulario form { margin-top:40px; width:100%; position:relative; float:left}
.formulario form div{ margin-top:30px; width:50%; position:relative; float:left}
.formulario form div input{ width:90%;}
.formulario form div textarea{ width:95%; height:170px}
.formulario label{
   color:#c18b1e;
   background: url(../img/bgDorado.jpg); font-weight:400;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; font-size:18px; }
   .formulario input, textarea { background:#111111; color:#FFF !important;margin-top: 6px;}
   .formulario button { background:url(../img/btnEnviar.jpg); text-indent:-9999px; width:140px; height:29px; border:none; float:left;  background-size:cover }

@media (min-width: 1400px) {
  .wrapper {
    width: 1400px;
  }
}
.content-mini,
.content-medium,
.content-large {
	width: auto;
	margin: 0 auto;
}
@media (min-width: 1226px) {
.content-medium,
.content-large {
	width: 1040px;
	}
}
@media (min-width: 614px) {
	.content-mini {
		width: 614px;
	}
}
/************** MENU *****************/

.fotos a { width:19.8%; margin:0.1%; position:relative; float:left; overflow:hidden; height:150px}
.fotos a img { h margin:-30px 0 0 -20%; width:140%}

header {width: 100%;display: block;	-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;	-ms-transition: all 0.2s ease;	-o-transition: all 0.2s ease;	transition: all 0.2s ease; padding:0px; text-align:center; position:relative; float:left ; padding-top:20px; z-index:9999}
.styk header {	position: fixed;	z-index: 6999; top:30px}
.styk.open header {	background: rgba(255,255,255,1); border-bottom:#e7e7e7 1px solid; top:0px}
header.open {position: fixed;	top: 0px;	z-index: 99;	background:#fff;	padding: 10px 0;}

.top { position:fixed; bottom:10px; right:10px; width:40px; height:40px; display:block; z-index:6999;  opacity:0; background:#323232;-webkit-transition: all 0.3s ease;	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease; transition: all 0.3s ease;font-family: fontawesome; color:#FFF; font-size:18px; text-align:center; padding-top:10px; border-radius:200px; z-index:99999}
.top:hover {opacity:1; }
.top.menu-active { color:#fff !important}
.display { opacity:0.7}

header .logo {	 max-width:369px; position:relative; margin:0px auto; display:block;}
header .logo img{  max-width:567px;width:100%;-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;}
.styk.open .logo img{ max-width:290px; margin-top:-9px}
.styk.open .logo { margin:20px 0}

.styk.open header .menu-nav { background:none; margin-top:-60px}
.styk.open header .menu-nav .menu {}
.menu-nav { position:relative; float:left; width:100%;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease; margin-top:10px
}
.menu-nav .menu { margin:20px auto 0 auto; position:relative}
.menu-nav .menu li {	display: inline-block; position:relative;}
.menu-active{ background-position:bottom !important} 

.menu a { text-indent:-9999px; height:35px; position:relative;  width:100%;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	-ms-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease; display:block; background-position:top}
.menu li a:hover { background-position:bottom} 
.menu a.link1 { background:url(../img/btn1.png);  width:218px }
.menu a.link2 { background:url(../img/btn2.png);  width:184px }
.menu a.link3 { background:url(../img/btn3.png);  width:148px }
.menu a.link4 { background:url(../img/btn4.png);  width:183px }
.menu a.link5 { background:url(../img/btn5.png);  width:136px }


/**** styky ****/
.stiky {
	background: rgba(255,255,255,1);
	width: 100%;
	height: 0;
	overflow: hidden;
	position: fixed;
	opacity: 0.5;
	top: 0;
	z-index: 99;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.stiky.open {
	opacity: 1;
	height: 30px;
}


/****************** HOME ******************/
.diapo {clear: both; position:relative; float:left; width:100%;}

.slider-home {	display: block;	padding: 40px 0 0 0;	position: relative; z-index:99}
.swiper-container { width: 100%; max-width:1040px;  border:#f1c434 2px solid }
.swiper-slide {    text-align: center; display: -webkit-box;  height:100%;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center; 
    }
	
.slide1 {background:url(../img/slider/1.jpg) no-repeat; background-size:cover}
.slide2 {background:url(../img/slider/2.jpg) no-repeat; background-size:cover}
.slide3 {background:url(../img/slider/3.jpg) no-repeat; background-size:cover}

.swiper-slide h1{  font-weight:100;  text-transform:uppercase; font-size:60px; letter-spacing:3px; color:#FFF;}
.swiper-slide p{  font-size:30px; line-height:35px;  font-weight:100; color:#FFF; width:70%; margin:0 auto 50px auto; }
.swiper-slide a{  font-size:20px; background:#FFF; color:#5f5f61;  padding:12px 36px; }
.swiper-slide a:hover{  background:#5f5f61; color:#fff;}




/************************ G E N E R I C O S *****************************/

*:focus, a:focus {
    outline: none;
}

footer {display: block;	padding: 84px 0 34px 0; font-size:14px; font-style:italic; color:#7d7d7d; text-align:center; position:relative; float:left; width:100%; }

/**************************** RESPONSIVE ***************************/


@media (max-width: 1023px) {

section { padding:0 20px}
	.hamburger {
		position:fixed; height:60px;
		top:0px; right:0px;
		margin:0;
		padding:0;
		cursor:pointer;
		z-index:999999;
		display:block; width:64px; background:rgba(0,0,0,0.6);
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.hamburger.open {
		
	}
	.hamburger .hamburger-inner {
		position:absolute; right:20px; top:22px;
		height:21px;
		width:24px;
		display:block;
		margin:0;
		padding:0
	}
	.hamburger .bar {
		width:24px;
		height:4px;
		background:#fce688;
		position:absolute;
		top:0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-ms-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.stk .hamburger .bar {
		background: #fce688;
	}
	.hamburger .bar.bar2, .hamburger .bar.bar3 {
		top:7px;
		transform: matrix(0.99999, 0, 0, 0.99999, 0, 0);
	}
	.hamburger .bar.bar4 {
		top:14px
	}
	.hamburger.open .bar1, .hamburger.open .bar4 {
		opacity: 0;
	}
	.hamburger.open .bar2 {
		height:4px;
		transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0);
	}
	.hamburger.open .bar3 {
		height:4px;
		transform: matrix(0.7071, -0.7071, 0.7071, 0.7071, 0, 0);
	}
	header {overflow: visible;}
	header .logo {	float: none; text-align:center	}
	header .logo img {	display: block; padding:0 20%}
	
	.menu-nav {
	    background: #000 none repeat scroll 0 0;
	    display: block;
	    float: none;
	    margin: 0;
	    position: fixed;
	    top: 0px; width:100%;
	    left: 0;
	    right: 0;
	    z-index: 999999;
	    overflow: hidden;
	    max-height: 0;
	    -webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease; padding-bottom:0px
	}
	
	.menu a { margin:0 auto}
	.styk.open header .menu-nav { margin:0px !important}
	.menu-nav.open {  max-height:500px}
	.menu-nav .menu {
		text-align: center;
	}
	.menu-nav .menu li {
	    display: block; width:100%; position:relative; float:left; text-align:center;
	    margin: 6px 0;
	}
	
.top { display:none}
.prlx { margin-top:60px}

}

@media (max-width: 768px) {
.negativo { margin-top:0px; padding-top:10px}

.izquierda { margin:10px 0}
.derecha {background:none; margin:10px 0}
.cosmetica .content-medium div { padding:0px 0 0px 0; margin-bottom:30px}


.social { position:absolute; left:10px; bottom:-10px}
.social li { position:relative; display:block; clear:both;  margin-left:0px; margin-top:4px}

.cosmetica img.titulo { padding:0px 0px}
.cosmetica span { margin:0 16px}

.marginTop { margin-top:0px}
.marginBottom { margin-bottom:0px}
.conocenos .content-medium { margin-top:0px; padding-bottom:30px}



.newsletter {padding:8px !important; }
.newsletterContent { padding:20px 12px 20px 12px !important; margin-bottom:0px !important }	
.formulario form { margin-top:20px; width:100%; position:relative; float:left}
.formulario form div{ margin-top:0px; width:100%;}
.formulario form div input{ width:100%;}
.formulario form div textarea{ width:100%;}
}



@media (max-width: 560px) {
.slider-home { padding-top:20px}
}