@charset "utf-8";
@import "reset.css";
@import "fonts/stylesheet.css";

body { margin: 0 auto; font-family: "Arial Bold","Arial",serif; font-size: 13px; color: black; background-color: #F9EFEA; -webkit-font-smoothing: antialiased; }

/* links  */ 

a { color: white; -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; }
a:hover { color: #F16643;  -webkit-transition: all 0.2s ease; }

.link_blue { color: #194B8B; }
.link_orange, .clr_orange { color: #F16643; }
.link_red, .clr_red  { color: #E8001E; }
.link_lightblue, .clr_lightblue  { color: #0087C7; }

.link_orange:hover { color: black; }

/* texto y colores  */ 

p { line-height: 20px; margin-bottom: 20px; }
h1 { font-size: 25px; margin-bottom: 20px; font-family: 'Baskerville'; font-weight: bold; }
h2 { font-size: 20px; margin-bottom: 20px; font-family: 'Baskerville'; font-weight: bold; }

/* gral  */ 

.pre-load-web { width:100%; height: 100%; width: 100vw; height: 100vh; position:absolute; position:fixed; background-color: #FFF; left:0; top:0; z-index:100000 }
.pre-load-web .imagen-load { left:50%; margin-left: -75px; position:absolute; top: 50%; margin-top: -75px; }

.main { position: absolute; width: 100%; height: 100%; background-image: url('imgs/bg.jpg'); background-repeat: no-repeat; background-position: right top; background-size: auto 100%;  }
.cont { position: relative; margin: 0 auto; }

.logo { position: relative; float: left; width: 100%; padding: 20px; padding-left: 40px; padding-bottom:0; }
.menu { position: absolute; right: 40px; top: 50px; z-index: 2000; color: black; }
.nav { position: fixed; top: 0; right: -1200px; width: 700px; background-color: black; padding-top: 56px; padding-bottom: 28px; padding-left: 15px; z-index: 1000; }
.nav li { display: inline-block; margin-left: 40px; }
.select_menu { color: white; }
.nomargin { margin: 0; }
.center { text-align: center; }
.alto { height: 450px; }
.shadow { box-shadow: 6px 6px 10px rgba(0,0,0,0.3); }

.achica { transform: scale(0); transition: all 0.3s; }
.agranda { transform: scale(1); }
.agranda2 { transform: scale(0.8); }

.contacto { position: fixed; bottom: -180px; width: 100%; padding: 30px 0; background-color: black; color: white; z-index: 2000; }
.footer_col { float: left; margin-right: 50px; }

.social { position: absolute; right: 40px; margin-top: -5px; }
.social li { display: inline-block; margin-left: 10px; }
.social li a { display: inline-block; background-color: white; color: black; width: 30px; height: 30px; border-radius: 50%; text-align: center; padding-top: 8px; }
.social li a:hover { background-color: #F16643; }

/* home  */ 

#home { margin-left: -25px; margin-top: -20px; }
.item_home { position: relative; display: inline-block; vertical-align: top; margin: 0 -15px; transform: scale(0.9); }
.item_home1:hover, .item_home2:hover, .item_home3:hover, .item_home4:hover { transform: scale(1.1); }

.avisos { position: absolute; right: 40px; top: 405px; display: none; }
.avisos2 { position: absolute; bottom: 0px; left: -10px; z-index: 1200; display: none; }
.avisos3 { position: absolute; bottom: 0; left: 80px;  z-index: 1200; display: none; }
.avisos5 { position: absolute; top: 0; right:120px; z-index: 1200; display: none; }

/* nosotros  */ 

.col1 { float: left; width: 125px; text-align: center; opacity: 0; padding-left: 30px; }
.col2 { position: relative; float: left; width: 420px; margin-right: 30px; opacity: 0; padding-top: 20px; }
.col3 { float: left; width: 450px; text-align: right; overflow: hidden; opacity: 0; }

/* productos  */ 

.col4 { position: relative; float: left; text-align: right; padding-right: 30px; width: 380px; }
.aviso3 { position: absolute; bottom: 20px; }
.col5 { position: relative; float: left; width: 269px; opacity: 0; }

.menu_productos { position: absolute; bottom: 10px; }
.menu_productos li { display: inline-block; margin-left: 10px; }
.menu_productos li a img { height: 150px; }

.item_chico1 { transition: all 0.3s;  }
.item_chico1:hover {  transform: scale(1.2); }


.tabla { position: relative; position: absolute; right: 40px; top: 130px; width: 400px; height: 500px; z-index: 2000; background-color: white; border-radius: 20px; background-repeat: repeat-x; display: none; }
.beneficios { position: relative; position: absolute; right: 40px; top: 130px; width: 880px; width: 68vw; height: 500px; padding: 60px; z-index: 2000; background-color: white; border-radius: 20px; background-image: linear-gradient(to bottom, #DDDDDD 0%, #FFFFFF 10%);  display: none; }
.beneficios_col { float: left; width: 50%; }

.close { position: absolute; top: 30px; right: 30px; color: black; }

.simobile { display: none; }


@media ( max-width: 900px) {
	
	.nomobile { display: none; }
	.simobile { display: block; }

	body { font-size: 11px; }
	p { line-height: 13px; }
	.main { text-align: center; min-width: 300px; }
	.cont { width: 100%; padding: 20px; }
	.logo { padding: 0;  }
	.logo img { margin:0; width: 120px; }
	h1 { font-size: 20px; margin-bottom: 10px; }
	h2 { font-size: 18px; margin-bottom: 10px; }
	.menu { top: 40px; right: 20px; }
	.nav { width: 160px; height: 100%; background-color: black; padding: 20px; padding-top: 80px; text-align: right; }
	.nav li { margin: 0; width: 100%; margin-bottom: 10px; }
	
	.contacto { padding: 10px 0; }
	.footer_col { width: 100%; margin: 0; float: left; padding-bottom: 10px; }
	.social { position: static; right: auto; margin: 0; display: inline-block; width: 100%; margin-top: 5px; }	
	.social li { margin: 0 5px; }

	/* home  */ 

	#home { margin: 0; margin-bottom: 40px; margin-top: 100px; width: 100%; text-align: center; }
	.item_home { margin: 10px 0; }
	.item_home1, .item_home2, .item_home3, .item_home4 { height: 40vw; }
	.avisos { right: auto; bottom: auto; top: auto; display: none; margin-top: -30px; left: 50%; margin-left: -63px; padding-bottom: 30px;  }
	.avisos2, .avisos3, .avisos5 { top: -10px; margin-left: -10px; width: 50px; }
	
	/* nosotros  */ 
	
	.col1 { display: none; }
	.col2 { width: 100%; margin: 0; }	
	.col3 { width: 100%; }	
	.col3 img { width: 100%; }
	
	/* productos  */ 
	
	.alto { height: auto; }
	.col4 { width: 100%; padding: 0; width: 100%; text-align: center; }
	.elegido { height: 250px; }
	.aviso3 { position: static; bottom: auto; display: inline-block; width: 100%; width: auto; text-align: center; }
	.col5 { width: 100%; margin-top: 20px; }
	
	.menu_productos { position: static; bottom: auto; margin-bottom: 20px; }
	.menu_productos li { margin: 0 5px; }
	.menu_productos li a img { height: 100px; }
	
	.beneficios, .tabla { right: 5%; margin: 0; width: 90%; top: 20px; height: auto; position: fixed; }
	.beneficios_col { width: 100%; }
	.ancho { width: 100%; margin-top: 10px; }
	.tabla img { width: 100%; }
	.beneficios { padding: 20px; font-size: 10px; }

	.close { top: 24px; right: 24px; }

}