first commit

.gitignore

@@ -0,0 +1,13 @@
+Images/graficas/*
+Images/icons/*
+Images/slider/*
+Images/thumbs/*
+Images/productos/*
+ELearning/
+Mailing/*
+uv
+mails/
+*psd
+*mp4
+*pdf
+*flv

back/generate_hash.php

@@ -0,0 +1,9 @@
+<?php
+$db = new mysqli('especificosba.com.ar', 'especificosba', 'howdoiturnthison', 'mailing');
+#$stmt=$db->prepare('select sha1(concat(id,floor(UNIX_TIMESTAMP()*rand()),mail)) from mails_datos where mail="tatii.oxo@gmail.com"');
+$stmt=$db->prepare('select hash from mails_datos where mail="tatii.oxo@gmail.com"');
+$stmt->bind_result($hash);
+$stmt->execute();
+$stmt->fetch();
+echo $hash;
+?>

back/update.php

@@ -0,0 +1,91 @@
+<?php
+$db = new mysqli('especificosba.com.ar', 'especificosba', 'howdoiturnthison', 'mailing');
+if($db->connect_errno > 0)
+	die('Unable to connect to database [' . $db->connect_error . ']');
+
+if($db->connect_errno > 0){ die('Unable to connect to database [' . $db->connect_error . ']'); }
+
+if ($_SERVER['REQUEST_METHOD']=="POST") {
+	$postdata = file_get_contents("php://input");
+	$request = json_decode($postdata);
+	if(!isset($request)){
+	    http_response_code(401); #Unauthorized
+	    die("no postdata");
+	}
+	
+	
+	if(!$stmt = $db->prepare("UPDATE mails_datos SET nombre=?, apellido=?,prefijo=?,telefono=?,zona=?,provincia=?,pais=?,dia=?,mes=?,infocursos=? where hash=? and mail=?"))
+		die("no pude preparar" . $db->error);
+	if(!$stmt->bind_param('sssssssdddss',
+							$request->nombre,$request->apellido,$request->prefijo,$request->telefono,
+							$request->zona,$request->provincia,$request->pais,
+							$request->dia,$request->mes,$request->infocursos,$request->hash,$request->email))
+	   die("errorbinding"); 
+
+	if (!$result = $stmt->execute())
+	   die("errorejec"); 
+
+	if($db->affected_rows==0){
+	    http_response_code(401);
+		echo json_encode(array("mensaje" => "No se han producido cambios"));
+	} else {
+		echo json_encode(array("mensaje" => "Tus datos han sido enviados, muchas gracias"));
+	}
+	
+
+} elseif ($_SERVER['REQUEST_METHOD']=="PUT") {
+	if(!$stmt = $db->prepare("insert into mails_datos(nombre,apellido,prefijo,telefono,zona,provincia,pais,dia,mes,infocursos,mail) values(?,?,?,?,?,?,?,?,?,?,?)"))
+		die("no pude preparar" . $db->error);
+	parse_str(file_get_contents("php://input"),$arr); //PUT
+	$request=json_decode(key($arr));
+	if(!$stmt->bind_param('sssssssddds',
+							$request->nombre,$request->apellido,$request->prefijo,$request->telefono,
+							$request->zona,$request->provincia,$request->pais,
+							$request->dia,$request->mes,$request->infocursos,$request->email))
+	   die("errorbinding" . $stmt->error); 
+
+	if (!$result = $stmt->execute()){
+		http_response_code(401);
+		echo json_encode(array("mensaje" => "ya estabas en la base"));
+		exit;
+	}
+
+	if($db->affected_rows==0){
+		echo json_encode(array("mensaje" => "no te pude registrar"));
+	} else {
+		echo json_encode(array("mensaje" => "registrado ok"));
+	}
+	
+} elseif ($_SERVER['REQUEST_METHOD']=="GET") {
+	$stmt = $db->prepare("select nombre, apellido,prefijo,telefono,zona,provincia,pais,dia,mes,mail,infocursos,hash from mails_datos where mail=?");
+
+	$hash=$_GET['hash'];
+	$mail=$_GET['mail'];
+
+	$stmt->bind_param('s',$mail);
+	$stmt->execute();
+	$stmt->bind_result($nombre,$apellido,$prefijo,$telefono,$zona,$provincia,$pais,$cumple_dia,$cumple_mes,$mail,$infocursos,$dbhash);
+	if($stmt->fetch()){
+		if($hash==$dbhash) {
+			$out=array("nombre" => $nombre,
+				"apellido" => $apellido,
+				"prefijo" => $prefijo,
+				"telefono" => $telefono,
+				"zona" => $zona,
+				"provincia" => $provincia,
+				"pais" => $pais,
+				"email" => $mail,
+				"infocursos" => $infocursos,
+				"dia" => $cumple_dia,
+				"mes" => $cumple_mes);
+			echo json_encode($out);
+		} else {
+	    	http_response_code(402);
+			echo json_encode(array("mensaje" => "El hash no coincide"));
+		}
+	} else {
+	    http_response_code(401); #Unauthorized
+		echo json_encode(array("mensaje" => "No estas en nuestra base de datos? Registrate!"));
+	}
+}
+$db->close();

css/especificos.css

@@ -0,0 +1,791 @@
+@font-face {
+ font-family: 'Champagne and Limousine';
+ src: url('../Fonts/Champagne&Limousines.ttf');
+ -webkit-font-smoothing: antialiased;
+ font-weight: 700;
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../Fonts/OpenSans.woff") format("woff");
+}
+
+#bgvid {
+	position: absolute;
+	z-index:-1;
+	top: 0px;
+	/*
+	left: 0px;
+	por el offset del padre
+	*/
+	left: -10%;
+	right: 0px;
+	bottom:0px;
+	overflow:hidden;
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: 0% 0%;
+	background-image: none;
+}
+#logo { opacity:0; transition: opacity 0.5s ease-in-out; }
+#tabla-cursos > span {text-align:left !important;}
+html, body
+{
+    margin: 0px auto;
+    font-family: 'Open Sans';    
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke: 0.50px;
+    position: relative;
+	letter-spacing: 0.5px;
+
+}       
+
+/**************CONTACT DIV**************/
+#overlay-contact {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 10;
+    font-variant: normal;
+    font-weight: normal;
+    color: white;
+    font-size: 26px;
+    text-align: center;
+	display: none;
+}
+
+#facebook-link{
+position: fixed;
+top: 20px;
+z-index: 9;
+right: 20px;
+}    
+
+#message{ resize: vertical; overflow:auto; max-height: 200px;}
+
+#basic-grey {
+	position:fixed;
+	top: 50%;
+    left: 50%;
+	transform: translate(-50%, -50%);
+    width: 50%;
+    z-index: 11;
+    background: #465A68;
+    padding: 20px 30px 20px 30px;
+    font-family: 'Open Sans';
+    font-size: 14px;
+    letter-spacing: 2px;
+    color: #BCC9CC ;
+    border:1px solid #DADADA;
+	display: none;
+}
+
+
+#basic-grey label {
+    display: block;
+    margin: 0px 0px 5px;
+}
+#basic-grey label>span {
+    float: left;
+    width: 80px;
+    text-align: right;
+    padding-right: 10px;
+    margin-top: 10px;
+    color: #BCC9CC ;
+    -webkit-text-stroke: 0.50px;
+}
+#basic-grey input[type="text"], #basic-grey input[type="email"], #basic-grey textarea,#basic-grey select{
+    border: 1px solid #DADADA;
+    color: #888;
+    height: 24px;
+    margin-bottom: 16px;
+    margin-right: 6px;
+    margin-top: 2px;
+    outline: 0 none;
+    padding: 3px 3px 3px 5px;
+    width: 85%;
+    font-family: 'Open Sans';
+    font-size: 12px;
+}
+#btnconsulta {
+	position:absolute;
+	right:10px;
+	bottom:10px;
+	display:block; 
+    background: #BCC9CC;
+    border: none;
+    padding: 10px 25px 10px 25px;
+    color: #465A68;
+	cursor:pointer;
+}
+
+#basic-grey textarea{
+    height:100px;
+    letter-spacing: 2px;
+}
+#basic-grey .button:hover {
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+}
+#btnconsulta:disabled { opacity:1 !important; color:grey; background-color:#c0c0c0; cursor:auto !important;}
+
+/******************RESPONSIVE MENU******************/
+
+
+/*************NAVBAR************/
+#top_wrapper
+{
+    background-color: rgba(255,255,255,255);
+    width: 100%;
+    position: fixed;
+    top: 0px;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid ;
+    padding-top: 10px;
+    height: 66px;
+	z-index: 4;
+}
+#navbar
+{
+
+    display: table;
+    width: 90%;
+    margin: 0px auto;
+    background-color:#FFF;
+    padding-bottom: 10px;
+    font-family: 'Open Sans';
+    font-size: 100%;    
+    color: #485260;
+    letter-spacing: 5px;
+
+}
+
+#navlist
+{
+    text-transform: uppercase;
+    text-align:center;
+    height: 55px;
+    width: 70%;
+    padding-bottom: 30px;
+    display: table-row;
+}
+
+#navlist li
+{
+    vertical-align: middle;
+    display: table-cell;
+    text-align: center;
+    width: 0%;
+}
+
+
+
+/*************SECCIONES************/
+.seccion{
+    width: 90%;
+    height: auto;
+    text-align: center;
+    margin: 0px auto;
+    padding-top: 70px;
+   
+}
+
+
+#producto
+{
+    font-family: "Champagne and Limousine";
+    font-size: 16px;
+    color: #7B9299;
+    letter-spacing: 5px;
+    width: 660px;
+}
+
+#protector-slide {transition: opacity 1s; }
+#banner
+{
+    width:100%;
+    margin-top: 77px;
+    transition: opacity 1s;
+}
+.transp { opacity: 0.5; }
+
+#banner p{
+    color: white;
+    -webkit-text-stroke: 0.10px;
+}
+
+#productos_titulo
+{
+    width: auto;
+    height: auto;
+    padding-top: 1px;
+}
+
+#nosotros { position:relative; }
+/*
+#nosotros, #actividades, #distribuidoras, #cursos
+{
+    
+}
+*/
+#principal{
+	font-family: 'Open Sans';
+	font-size: 13pt;
+	color: #465A68;
+	
+}
+
+.titulos{
+	font-family: 'Champagne and Limousine';
+	font-size: 19pt;
+	text-align: center !important;
+	margin: 0px auto 40px;
+	background-color: #7B9299;
+	color: #FFF;
+	width: 30%;
+	padding: 10px 0px;
+}
+
+
+.titulo_curso{
+	font-family:  'Open Sans';
+	font-size: 19px;
+	font-weight: bold;
+	color: #465A68;
+	text-align: center;
+	cursor: pointer;
+    margin-bottom:15px;
+	
+}
+.descripcion_curso{
+
+  margin: 0px auto;
+width: 70%;
+   font-family: 'Open Sans'/*'Raleway', sans-serif*/;
+   font-size: 16px;
+   text-align: justify;
+   /*letter-spacing: 2px;*/
+   color: #465A68;/*#7196A6*/ 
+   font-weight: 300;
+   line-height: 23px;
+  margin-bottom:40px;
+  display: none;
+  
+}
+.descripcion_curso i {
+	text-align: center;
+	font-size: 16pt;
+	text-decoration: underline;
+}
+
+#cursos{
+	width: 100%;
+    height: auto;
+    text-align: center;
+    margin: 0px auto;
+    padding-top: 70px;
+    border-bottom: 1px solid #475A68;
+}
+#cursos h1 span{
+	border: 1px solid;
+	width: 100%;
+}
+#curso{
+	background: url('../Images/back_pattern.png') repeat;
+}
+#tabla-cursos { width: 80%; }
+#tabla-cursos th { width: auto; }
+#productos
+{
+    /*background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ;
+    height: 400px;*/
+    max-height: 100%;
+    width: 90%; 
+    margin: 0px auto;
+    font-family: 'Champagne and Limousine';
+    /*font-size: 200%;*/
+    color: #D8DFE1;
+    text-align: center;
+}
+
+.descripciones{
+width: 90%;
+text-align: center;
+margin-top: 0px;
+margin-bottom: 40px;
+color: #2B4C5F;
+font-family: "Open Sans";
+font-size: 14px;
+display: inline-block;
+ 
+}
+
+
+.descripcion{
+
+text-align: center;
+width: 30%;
+padding: 0px 10px;
+display: inline-table;
+}
+
+/*************TABLAS************/
+
+#capital-tabla, #interior-tabla
+{
+    
+    background: none repeat scroll 0% 0% #FFF;
+    width: 480px;
+    border-collapse: collapse;
+    text-align: center;
+    margin: 20px auto;
+}
+
+thead
+{
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    font-size: 150%;
+    vertical-align: baseline;
+    margin: 0px auto;
+    padding: 0px;
+    outline: 0px none;
+    border: 0px none;
+    background: none repeat scroll 0% 0% transparent;
+}
+
+th
+{
+    font-weight: normal;
+    padding: 10px 30px;
+    color: #475A68;
+    border-bottom: 1px solid;
+	width: 130px;
+}
+tbody, td
+{
+    font-family: 'Open Sans';
+	font-size: 14px;
+    font-weight: normal;
+    padding: 10px;
+	text-align: center;
+    color: #475A68;
+}
+
+tbody tr:nth-child(odd) {
+   background-color: #D8DFE1;
+}
+
+/**************FOOTER**************/
+#ok:hover, #ok:active, #ok
+{
+    background-color:#BCC9CC;
+    text-indent:0px;
+    display:inline-block;
+    color:#475A68;
+    font-size:18px;
+    font-weight:normal;
+    font-style:normal;
+    width:96px;
+    text-align:center;
+    height: 31px;
+}
+#footer-outer
+{
+    background-color: #475A68;
+    font-family: 'Open Sans';
+    font-size: 26px;
+    color: #BCC9CC;
+    width: 100%;
+    height: 250px;
+    
+    
+}
+#footer-inner-left
+{
+
+	font-family: 'Open Sans';
+    padding-top: 30px;
+    padding-left: 30px;
+    width: 40%;
+    float: left;
+    display: inline;
+    text-align: left;
+    font-size: 15px;
+}
+
+#footer-inner-right
+{
+	font-family: 'Open Sans';
+	font-size: 15px;
+    padding-top: 20px;
+    padding-right: 30px;
+    width: 40%;
+    float: right;
+    display:inline;
+    text-align: right;
+}
+#suscribe
+{
+    width : 40%;
+    height: 30px;
+    background-color: #BCC9CC;
+    border: 0px;
+    margin-top: 20px;
+}
+
+#input-footer{
+
+}
+/*************HEADERS STYLE************/
+
+hr
+{
+    color: #465A68;
+    background-color: #465A68;
+    height: 1px;
+}    
+
+h2
+{
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 20px;
+}
+.tabla
+{
+    margin: 50px auto;
+    text-align: center;
+    display:table;
+    border: 1px solid;
+}
+h3
+{
+    display: table-cell;
+    vertical-align: middle;
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    color: #D8DFE1;
+    background: #475A68;
+    width: 200px;
+    height: 50px;
+    text-align: center;
+    margin: 0px auto;
+	text-transform: uppercase;
+	letter-spacing: 2px;
+}
+
+h1 
+{
+    
+   font-weight:normal;
+   width: 100%; 
+   text-align: center; 
+   border-bottom: 1px solid #465A68; 
+   line-height: 0.1em;
+   font-family:  'Champagne and Limousine';
+   margin: 30px auto;  
+   color: #465A68;
+   font-size: 190%;
+   font-style: normal;
+   letter-spacing: 5px;
+} 
+
+h1 span { 
+    background:#fff; 
+    padding:0 10px; 
+
+}
+
+
+h2
+{
+    text-align: center;
+    color : #fff;
+}
+
+h4
+{
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: right;
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    margin: 0 0;
+
+}
+
+h5
+{
+    letter-spacing: 1px;
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: left;
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    margin: 0 0;
+}
+h6{
+	font-family: 'Open Sans';
+font-size: 16px;
+font-weight: normal;
+background-color: #2B4C5F;
+color: #FFF;
+margin-bottom: -30px;
+padding: 10px;
+}
+
+
+p
+{
+   margin: 40px 30px 70px 30px;
+   font-family: 'Open Sans'/*'Raleway', sans-serif*/;
+   font-size: 16px;
+   text-align: center;
+   /*letter-spacing: 2px;*/
+   color: #465A68;/*#7196A6*/ 
+   font-weight: 300;
+   font-weight: 300;
+   line-height: 23px;
+}
+
+a:visited, a:link { color: #465A68; text-decoration:none; }
+.titulos > a:visited, .titulos > a:link { color: white; text-decoration:none; }
+#navbar a:visited, a:link { color: #485260; }
+a:hover { opacity: 0.5; transition: opacity 0.3s ease-in-out; }
+
+li a
+{
+    cursor: pointer;
+    width: 200px;
+    list-style-type: none;
+    margin-bottom: 3px;
+}
+
+li:hover { opacity: 0.5; transition: opacity 0.5s ease-in-out; }
+
+.hidden { display: none;}
+b { font-weight: bold; }
+.center { display:block; margin: 0px auto; text-align:center;}
+.titulin { font-size: 23px; font-weight: bold; margin-bottom: 0px}
+#curso .titulos {max-width:90%; margin:0px auto; color:white;}
+#exit{ width: 90%; height: 30px; margin: 0 auto; cursor: pointer; float: right !important; text-align:right; }
+
+.descripcion-mas { width: 95% !important; }
+@media (max-width: 1100px){
+    #navbar { letter-spacing: 0px!important; }
+	#navlist li { width: auto !important;}
+	#basic-grey { width: 80%; }
+	
+}
+
+
+
+@media screen and (max-width:890px) {
+	#tabla-cursos { width: 100%; }
+	#distribuidoras .tabla { display: none; } 
+	#distribuidoras select { display: block; min-width: 50%; text-align: center; margin: 10px auto; padding:5px; font-size:16px; }
+}
+
+@media (min-width: 791px){
+    #navbar #responsive{ display: none; }
+}
+@media (max-width:790px){
+	#tabla-cursos { width: 100%; }
+    #navbar #navlist{ display:none; }
+
+	#usIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 0px;
+	}
+	
+	#productIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -60px;
+	}
+	
+	#activityIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -120px;
+	}
+	
+	#logoIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -180px;
+	}
+	
+	#coursesIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -240px;
+	}
+	
+	#buyIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -300px;
+	}
+	
+	#contactIcon{
+	    width:60px;
+	    height: 60px;
+	    background:url(../Images/icons/icons.png) 0 -360px;
+	}
+	
+	#footer-outer {
+	    background-color: #475A68;
+	    font-family: 'Open Sans';
+	    font-size: 26px;
+	    color: #BCC9CC;
+	    width: 100%;
+	    height: 300px!important;
+	}
+    #navbar{
+        display: table;
+        width: 70% !important;
+        margin: 0px auto !important;
+        padding-bottom: 10px;
+        font-family: 'Champagne and Limousine'!important;
+        font-size: 120%!important;    
+        color: #485260!important;
+        letter-spacing: 5px!important;
+    }
+    #responsive img{
+        width: 55px;
+        height: auto;
+    }
+    #responsive
+    {
+        text-transform: uppercase;
+        text-align:center;
+        width: 70%;
+        padding-bottom: 30px;
+        display: table-row;
+    }
+
+    #responsive li
+    {
+        vertical-align: middle;
+        display: table-cell;
+        text-align: center;
+        width: 0%;
+    }
+	#top_wrapper{
+		height: 71px!important;
+	}
+
+	#btnconsulta { width: 100%; position:relative; display:block; right:auto; bottom:auto;}
+	#basic-grey input, #basic-grey textarea {width: 100% !important; }
+}
+@media screen and (max-width:670px){
+	#tabla-cursos { width: 100%; }
+	#tabla-cursos .left {width:100%;}
+	#tabla-cursos .right {width:100%;}
+	.seccion{ padding-top: 30px; }
+	#responsive img { width:48px; }
+	#facebook-link{display:none; }
+	p { margin: 0px; }
+	.titulos { width:100%; margin: 0px; padding:5px 0px;}
+	.descripcion { width:100%; }
+	.descripciones { margin-bottom: 0px; }
+	.titulo_curso { max-width: 75%; margin: 10px auto; }
+	#footer-outer { height: auto !important; }
+	#suscribe { width: 70%; }
+	h4 { text-align:left;}
+	#footer-inner-left{ float:none; width:98%; padding: 1%; display:block; }
+	#footer-inner-right{ float:none; width:98%; padding: 1%; display:block; text-align:left;}
+
+
+	#basic-grey{width:90%;margin:0px;padding:0px 5%; height:80%;}
+	#basic-grey input[type="text"], #basic-grey input[type="email"], #basic-grey textarea, #basic-grey select {
+		width:100%;
+	}
+	#basic-grey span{text-align:left !important; }
+
+}
+
+@media screen and (max-width:400px) {
+	 #basic-grey { height:100%; }
+}
+
+#protector-solar{
+    width: 50%;
+    margin: 0px auto;
+    text-align: center;
+    background-color: #324875;
+    padding: 25px;
+    color: white;
+    font-family: Open Sans;
+    font-size: 25px;
+    text-transform: uppercase;
+    font-weight: bold;
+
+}
+
+#protector-solar a, #protector-solar a:link, #protector-solar a:hover, #protector-solar a:visited{
+    color:white;
+}
+
+.max-top-space{
+    margin-top: 100px;
+}
+
+.curso-tabla{
+    border: 0px;
+}
+
+.curso-titulo{
+    text-align: left;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+}
+.clear{
+    clear: both;
+}
+.row{
+    padding: 20px;
+}
+.left{
+    float: left;
+    width: 30%;
+    text-align: left;
+}
+.right{
+    float: right;
+    width: 60%;
+    text-align: left;
+}
+
+.right > p{
+    margin: 10px 0 0 0;
+        text-align: justify;
+}
+
+.curso-subtitulo{
+    text-transform: uppercase;
+    color: rgb(70, 90, 104);
+    font-weight: bold;
+    border-bottom: 1px solid #465A68;
+}
+
+.curso-lista{
+    text-align:left; 
+    list-style-type: none;
+    padding: 5px;
+}
+
+.curso-avales{
+    list-style-type: circle;
+}
+
+.curso-lista > li:hover{
+    opacity: 1;
+};

css/formulario.css

@@ -0,0 +1,90 @@
+.left { float:left ; }
+.right { float: right; }
+@font-face {
+ font-family: 'Champagne and Limousine';
+ src: url('../Fonts/Champagne&Limousines.ttf');
+ -webkit-font-smoothing: antialiased;
+ font-weight: 700;
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../Fonts/OpenSans.woff") format("woff");
+}
+
+#logo { opacity:0; transition: opacity 0.5s ease-in-out; }
+html, body
+{
+    font-family: 'Open Sans';    
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke: 0.50px;
+	letter-spacing: 0.5px;
+
+}       
+
+
+.left{
+	text-align: left!important;
+}
+
+.section{
+	padding: 30px;
+}
+
+.max-top-space{
+    margin-top: 50px;
+}
+
+.promocion {
+    background-image: url("../Images/banner.jpg");
+    background-size: cover;
+    color: #FFF;
+	font-weight:700;
+    padding-bottom: 1rem;
+}
+
+input[type='number'] {
+    -moz-appearance:textfield;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+
+.help{
+	color: rgb(128, 128, 128);
+	font-style: italic;
+}
+
+.mandatory{
+	color: #ED5565
+}
+
+.top-space{
+	margin-top: 10px;
+}
+
+.disclaimer{
+	color: rgb(128, 128, 128);
+	font-size: 80%;
+	font-style: italic;
+	text-align: justify;
+}
+
+.nav-bar{
+	padding: 10px 30px;
+}
+
+.logo{
+	height: 40px;
+}
+
+.productos{
+	width: 100%;
+}
+
+.xl-top-space{
+	margin-top: 30px
+}

css/menu.css

@@ -0,0 +1,423 @@
+@font-face {
+ font-family: 'Champagne and Limousine';
+ src: url('../Fonts/Champagne&Limousines.ttf');
+ -webkit-font-smoothing: antialiased;
+ font-weight: 700;
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../Fonts/OpenSans.woff") format("woff");
+}
+
+html, body
+{
+    margin: 0px auto;
+    font-family: 'Open Sans';    
+    -webkit-font-smoothing: antialiased;
+    -webkit-text-stroke: 0.50px;
+    position: relative;
+
+}       
+
+/**************CONTACT DIV**************/
+#overlay-contact {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 10;
+    font-variant: normal;
+    font-weight: normal;
+    color: white;
+    font-size: 26px;
+    text-align: center;
+	display: none;
+}
+
+#facebook-link{
+position: fixed;
+top: 20px;
+z-index: 99;
+right: 20px;
+}    
+
+#message{ resize: vertical; overflow:auto; max-height: 200px;}
+
+
+
+.basic-grey {
+    width: 50%;
+    position: fixed;
+    left: 50%;
+    margin: 0 0 0 -25%;
+    z-index: 11;
+    background: #465A68;
+    padding: 20px 30px 20px 30px;
+    font-family: 'Open Sans';
+    font-size: 14px;
+    letter-spacing: 2px;
+    color: #BCC9CC ;
+    border:1px solid #DADADA;
+	display: none;
+    -webkit-text-stroke: 0.50px;
+}
+
+
+.basic-grey label {
+    display: block;
+    margin: 0px 0px 5px;
+}
+.basic-grey label>span {
+    float: left;
+    width: 80px;
+    text-align: right;
+    padding-right: 10px;
+    margin-top: 10px;
+    color: #BCC9CC ;
+    -webkit-text-stroke: 0.50px;
+}
+.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea,.basic-grey select{
+    border: 1px solid #DADADA;
+    color: #888;
+    height: 24px;
+    margin-bottom: 16px;
+    margin-right: 6px;
+    margin-top: 2px;
+    outline: 0 none;
+    padding: 3px 3px 3px 5px;
+    width: 85%;
+    font-family: 'Open Sans';
+    font-size: 12px;
+}
+#btnconsulta { float: right; display:block; }
+
+.basic-grey textarea{
+    height:100px;
+    letter-spacing: 2px;
+}
+.basic-grey .button {
+    background: #BCC9CC;
+    border: none;
+    padding: 10px 25px 10px 25px;
+    color: #465A68;
+}
+.basic-grey .button:hover {
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+}
+
+/******************RESPONSIVE MENU******************/
+
+
+
+/*************NAVBAR************/
+#top_wrapper
+{
+    background-color: rgba(255,255,255,255);
+    width: 100%;
+    position: fixed;
+    top: 0px;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid ;
+    padding-top: 10px;
+    height: 66px;
+	z-index: 10;
+}
+#navbar
+{
+
+    display: table;
+    width: 90%;
+    margin: 0px auto;
+    background-color:#FFF;
+    padding-bottom: 10px;
+    font-family: 'Open Sans';
+    font-size: 100%;    
+    color: #485260;
+    letter-spacing: 2px;
+
+}
+
+#navlist
+{
+    text-transform: uppercase;
+    height: 55px;
+    text-align:center;
+    width: 70%;
+    padding-bottom: 30px;
+    display: table-row;
+}
+
+#navlist li
+{
+    vertical-align: middle;
+    display: table-cell;
+    text-align: center;
+    width: 0%;
+}
+
+/*************HEADERS STYLE************/
+
+hr
+{
+    color: #465A68;
+    background-color: #465A68;
+    height: 1px;
+}    
+
+h2
+{
+    font-family: 'Open Sans';
+    font-weight: 300;
+    font-size: 20px;
+}
+.tabla
+{
+    margin: 50px auto;
+    text-align: center;
+    display:table;
+    border: 1px solid;
+}
+h3
+{
+    display: table-cell;
+    vertical-align: middle;
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    color: #D8DFE1;
+    background: #475A68;
+    width: 200px;
+    height: 50px;
+    text-align: center;
+    margin: 0px auto;
+	text-transform: uppercase;
+	letter-spacing: 2px;
+}
+
+h1 
+{
+    
+   font-weight:normal;
+   width: 100%; 
+   text-align: center; 
+   border-bottom: 1px solid #465A68; 
+   line-height: 0.1em;
+   font-family:  'Champagne and Limousine';
+   margin: 30px auto;  
+   color: #465A68;
+   font-size: 190%;
+   font-style: normal;
+   letter-spacing: 5px;
+} 
+
+h1 span { 
+    background:#fff; 
+    padding:0 10px; 
+
+}
+
+
+h2
+{
+    text-align: center;
+    color : #fff;
+}
+
+h4
+{
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: right;
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    margin: 0 0;
+
+}
+
+h5
+{
+    letter-spacing: 1px;
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: left;
+    font-family: 'Champagne and Limousine';
+    font-weight: normal;
+    margin: 0 0;
+}
+h6{
+	font-family: 'Open Sans';
+font-size: 16px;
+font-weight: normal;
+background-color: #2B4C5F;
+color: #FFF;
+margin-bottom: -30px;
+padding: 10px;
+}
+
+a:visited, a:link
+{
+    color: #485260;
+    text-decoration:none;
+}
+a:hover 
+{
+    opacity: 0.5; transition: opacity 0.3s ease-in-out;
+}
+
+li a
+{
+    cursor: pointer;
+    width: 200px;
+    list-style-type: none;
+    margin-bottom: 3px;
+}
+
+li:hover
+{
+   opacity: 0.5;
+   transition: opacity 0.5s ease-in-out;
+}
+
+.hidden { display: none;}
+b { font-weight: bold; }
+.center { display:block; margin: 0px auto; text-align:center;}
+.titulin { font-size: 23px; font-weight: bold;}
+#exit{ width: 90%; height: 30px; margin: 0 auto; cursor: pointer; float: right !important; text-align:right; }
+
+
+/*************SECCIONES************/
+
+#graficas{
+margin: 20px auto;
+}
+
+.seccion{
+    width: 90%;
+    height: auto;
+    text-align: center;
+    margin: 0px auto;
+    padding-top: 70px;
+   
+}
+.titulos{
+	font-family: 'Champagne and Limousine';
+	font-size: 19pt;
+	text-align: center !important;
+	margin: 0px auto 40px;
+	background-color: #7B9299;
+	color: #FFF;
+	width: 50%;
+	}
+.titulos > a:visited{
+color: #FFF;
+}
+	
+/*********GALLERY************/
+
+#gallery{
+width: 60%;
+margin: 0 auto;
+
+}
+.clear{ clear:both;}
+div.img {
+    margin: 15px;
+    padding: 15px;
+    height: auto;
+    width: auto;
+    float: left;
+    text-align: center;
+}	
+
+div.img img {
+    display: inline;
+    margin: 5px;
+
+}
+
+
+div.desc {
+  text-align: center;
+  font-weight: normal;
+  /*width: 120px;*/
+  margin: 5px;
+}
+
+@media screen and  (max-width: 1855px){
+	#gallery{ width: 70%; }
+}
+@media screen and  (max-width: 1867px){
+	#gallery{ width: 80%; }
+}
+@media screen and  (max-width: 1441px){
+	#gallery{ width: 90%; }
+}
+@media (max-width: 1100px){
+    #navbar { letter-spacing: 0px!important; }
+	#navlist li { width: auto !important;}
+	
+}
+@media (min-width: 791px){
+    #navbar #responsive{ display: none; }
+}
+@media (max-width:790px){
+    #navbar #navlist{ display:none; }
+
+#footer-outer
+{
+    background-color: #475A68;
+    font-family: 'Open Sans';
+    font-size: 26px;
+    color: #BCC9CC;
+    width: 100%;
+    height: 300px!important;
+    
+    
+}
+    #navbar{
+        display: table;
+        width: 70% !important;
+        margin: 0px auto !important;
+        padding-bottom: 10px;
+        font-family: 'Champagne and Limousine'!important;
+        font-size: 120%!important;    
+        color: #485260!important;
+        letter-spacing: 2px!important;
+    }
+    #responsive img{
+        width: 55px;
+        height: auto;
+    }
+    #responsive
+    {
+        text-transform: uppercase;
+        text-align:center;
+        width: 70%;
+        padding-bottom: 30px;
+        display: table-row;
+    }
+
+    #responsive li
+    {
+        vertical-align: middle;
+        display: table-cell;
+        text-align: center;
+        width: 0%;
+    }
+	#top_wrapper{
+	height: 70px!important;
+	}
+}
+@media screen and (max-width:820px){
+	div.img {float:none;margin:0;padding:0;width:100%;}
+}
+@media screen and (max-width:490px){
+	#gallery {width:100%;}
+	div.img {float:none;margin:0;padding:0;width:100%;}
+
+}
+

css/normalize.css

@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

css/productos.css

@@ -0,0 +1,221 @@
+@media screen and (max-width: 802px) {
+}
+
+ul, li {
+margin-bottom:1px;
+cursor:pointer;
+}
+@font-face {
+  font-family: 'Champagne and Limousine';
+ src: url('../Fonts/Champagne&Limousines.ttf');
+ -webkit-font-smoothing: antialiased;
+}
+@font-face {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  src: url("../Fonts/OpenSans.woff") format("woff");
+}
+/*************RESPONSIVE*****************/
+
+
+@media (max-height:700px){
+#descripcion_completa {
+width: 45%!important;
+position: fixed;
+left: 50%!important;
+margin: 0px 0px 0px -25%;
+z-index: 11;
+z-index: 11;
+background: url('../Images/wallpaper.jpg') no-repeat center center ; 
+	background-size: cover;
+padding: 10px 20px!important;
+font-family: 'Open Sans';
+font-size: 14px;
+color: #2B4C5F;
+border: 1px solid #2B4C5F;
+display: none;
+top: 10%!important;
+
+}
+}
+
+/*************PAGINAS¨*******************/
+#paginas_wrapper
+{
+	width: 80%;
+	float: left;
+}
+
+
+#paginas_list
+{
+    font-size: 36pt;
+    color: #475A68;
+    margin: 20px auto;
+    width: 60px;
+    text-align: center;
+    position: relative;
+}
+
+#paginas_list li
+{   
+    margin: 0px auto;
+    width: 0%;
+    vertical-align: middle;
+    cursor: pointer;
+    display: table-cell;
+    text-align: center;
+}
+
+#productos_descripcion{
+	border-bottom: 0px solid black;
+	margin-bottom: -100px;
+}
+
+
+#productos_descripcion p{
+margin-top: 50px;
+}
+
+/*************LISTA PRODUCTOS************/
+.producto {width: 32%;float:left;}
+.producto2 { width: 49%; }
+.producto1 { width: 99%; }
+#productosbar
+{
+	float: left;
+    width: 19%;
+    max-width:200px;
+   /* width:230px;
+    height: auto;
+    margin-top: 20px;
+    display: table-cell;
+	z-index: 2;
+	position: absolute;
+*/
+}
+#productosbar > #categorias { width:100%; }
+#categorias { padding-left: 5px; }
+#categorias > li { width: 100%; padding-left: 0px; max-height: 51px;}
+.grande { max-height: 150px !important; }
+.cambiarcat > h3 { letter-spacing:0px; }
+/*
+#categorias
+{
+    width: 200px;
+    margin: 0px auto;
+}*/
+
+#categorias li:hover, .selected
+{
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
+}
+
+#lista_productos
+{
+    margin-left: 50px;
+    float: left;
+    vertical-align: middle;
+    width: 820px;
+    margin-top: 20px;
+}
+
+#productos_wrapper
+{
+    width: 100%;
+    /*text-align: center;*/
+    margin: 70px auto;
+	display: table;
+}
+
+.listaproductos{padding-bottom:10px; width:100%;overflow:hidden;padding-left:15px;}
+.imagen{
+	display: block;
+	text-align: center;
+	width: 25%;
+    margin:0px auto;
+
+}
+
+.texto{ 
+	font-family: 'Open Sans';
+	color: #465A68;
+	display: block; 
+	width: 85%; 
+	font-size: 14px;
+    margin: 0px auto;
+	float: right;
+}
+#texto{
+	font-family:'Open Sans';
+	font-size:14px;
+	float: right;
+	width:60%;
+	background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.85);
+	padding: 30px;
+}
+
+
+#descripcion_completa{
+
+    width: 55%;
+	min-width: 850px;
+    position: fixed;
+    z-index: 11;
+    background: url('../Images/wallpaper.jpg') no-repeat center center ; 
+	background-size: cover;
+    padding: 20px 30px;
+    font-family: 'Open Sans';
+    font-size: 14px;
+    color: #2B4C5F;
+    border: 1px solid #2B4C5F;
+    display: none;
+    top: 20%;
+    -webkit-text-stroke: 0.50px;	
+}
+   
+
+#descripcion_completa > texto{
+	z-index:12;
+}
+
+#flechafwd{z-index:2; top: 50%; position:absolute; right:10px;}
+#flechaatras{z-index: 2; top: 50%; position: absolute; left: 250px;}
+
+.vermas { display: inline; margin: 0px; font-weight: bold; }
+.pagina[num="1"] { display: none; }
+.pagina { height: 760px; }
+.center { display:block; margin: 0px auto; }
+.left {float:left; }
+.imagen-mas { width: 29%; text-align: center; }
+
+/*.descripcion-mas{width: 70%; }*/
+
+#pedorrada { padding: 0px 100px; color: #2B4C63; font-family: "Open Sans"; font-size: 14px; }
+#pedorrada h3 { font-size:16px;
+background: none;
+color: #2B4C63;
+padding-top: 10px;}
+#pedorrada h2{
+text-transform: uppercase;
+border-bottom: 1px solid;
+color: #2B4C63;
+font-family: "Open Sans";
+}
+#pedorrada h1 { 
+background-color: #BCC9CC;
+padding: 10px;
+color: white;
+font-size:20px; 
+line-height: normal; 
+border:none;
+}
+#pedorrada h1, #pedorrada h2, #pedorrada h3 { 
+display: block;  
+width: auto; 
+height: auto; 
+font-family: "Open Sans"; 
+padding-top: 8px;
+}

css/protector.css

@@ -0,0 +1,170 @@
+html, body
+{
+    margin: 0px auto;
+    font-family: 'Open Sans';    
+    position: relative;
+	letter-spacing: 0.5px;
+}       
+
+#protector-slide{
+	position: relative;
+	background: url("Images/protector/slide1-1400.jpg") no-repeat bottom;
+	background-size: cover;
+	height: 700px;
+	width: 100%;
+	margin-top:77px;
+}
+
+
+h1{ text-transform: uppercase; }
+
+.imageIcon{
+	height: 115px;
+	width: 115px;
+	margin: 0px auto;
+	margin-bottom: 25px;
+}
+
+#timeIcon {
+	background:url(../Images/icons/protector.png) 0 0px;
+}
+
+#extendIcon {
+	background:url(../Images/icons/protector.png) 0 -115px;
+}
+
+#waterIcon {
+	background:url(../Images/icons/protector.png) 0 -230px;
+}
+
+#hatIcon {
+	background:url(../Images/icons/protector.png) 0 -345px;
+}
+
+#drinkIcon{
+	background:url(../Images/icons/protector.png) 0 -460px;
+}
+
+#cloudIcon{
+	background:url(../Images/icons/protector.png) 0 -575px;
+}
+
+
+#direccion{
+    width: 50%;
+    display: block;
+    margin: 0px auto 40px;
+    text-align: center;
+}
+
+#app{
+	border: 1px solid #55707F;
+	height: 150px;
+	width: 60%;
+	margin: 0px auto;
+	margin-bottom: 20px;
+	padding: 20px;
+}
+
+#title{
+	margin-top: 15px ;
+	z-index: 3;
+	left: 50%;
+	transform: translate(-50%, 0);
+	position: absolute;
+	color: white;
+	text-shadow: 0 0 0.2em #000;
+
+}
+
+#prod-image{
+	display:block;
+	position:absolute;
+	top:60%;
+	transform: translate(-50%,-50%);
+	left:50%;
+	margin-right:-50%;
+}
+
+#prod-description{
+	width: 55%;
+	height: 185px;
+	right: 50px;
+	position: absolute;
+	background-color: rgba(255,255,255,0.8);
+	padding: 30px;
+}
+
+#space{ clear:both; }
+
+#slide-wrapper{
+	position: absolute;
+	right:0px;
+	bottom: 90px;
+	width:100%;
+}
+
+#slider-bottom{
+	position: absolute;
+	bottom: 30px;
+	width: 100%;
+	margin: 0px auto;
+	text-align: center;
+	font-size: 28px;
+	letter-spacing: 30px;
+	color: white;
+	cursor: pointer;
+}
+
+#prod-title{
+	font-size: 20px;
+	font-variant: small-caps;
+	border-bottom: 1px solid;
+	margin-bottom: 20px;
+}
+#switcher { width:100%; z-index:5;text-align:center;position:absolute;bottom:15px;}
+#switcher div {
+	color:white;
+	margin:0px 10px;
+	max-height:160px;
+	display:inline;
+	z-index:5;
+	cursor:pointer;
+	text-shadow: 0px 0px 2px black;
+}
+#switcher div[id="0"] { color:#3696BF ;}
+.ciudades { text-align:left; width:150px; padding:0px 5px; display:inline-table; }
+
+.pac-container { margin-top: -75px !important; }
+#image-container { width:39%; text-align:center; position:relative;height:700px;}
+@media screen and (min-width:1140px){
+	#prod-description{ bottom: 200px !important; }
+
+}
+@media screen and (max-width:1140px){
+	#prod-description{ bottom: 200px !important; width:50%; height:250px; }
+	#direccion { width:70%; }
+	
+}
+@media screen and (max-width:900px){
+	#prod-description{  width:50%; height:270px; }
+	#direccion { width:90%; }
+
+}
+
+#banner{ margin-top:0px!important;}
+
+#protector-solar{
+	width: 50%;
+	margin: 0px auto;
+	text-align: center;
+	background-color: #324875;
+	height: 60px;
+	padding-top: 19px;
+	color: white;
+	font-family: Open Sans;
+	font-size: 25px;
+	text-transform: uppercase;
+	font-weight: bold;
+
+}

css/skeleton.css

@@ -0,0 +1,418 @@
+/*
+* Skeleton V2.0.4
+* Copyright 2014, Dave Gamache
+* www.getskeleton.com
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/29/2014
+*/
+
+
+/* Table of contents
+––––––––––––––––––––––––––––––––––––––––––––––––––
+- Grid
+- Base Styles
+- Typography
+- Links
+- Buttons
+- Forms
+- Lists
+- Code
+- Tables
+- Spacing
+- Utilities
+- Clearing
+- Media Queries
+*/
+
+
+/* Grid
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 0 20px;
+  box-sizing: border-box; }
+.column,
+.columns {
+  width: 100%;
+  float: left;
+  box-sizing: border-box; }
+
+/* For devices larger than 400px */
+@media (min-width: 400px) {
+  .container {
+    width: 85%;
+    padding: 0; }
+}
+
+/* For devices larger than 550px */
+@media (min-width: 550px) {
+  .container {
+    width: 80%; }
+  .column,
+  .columns {
+    margin-left: 4%; }
+  .column:first-child,
+  .columns:first-child {
+    margin-left: 0; }
+
+  .one.column,
+  .one.columns                    { width: 4.66666666667%; }
+  .two.columns                    { width: 13.3333333333%; }
+  .three.columns                  { width: 22%;            }
+  .four.columns                   { width: 30.6666666667%; }
+  .five.columns                   { width: 39.3333333333%; }
+  .six.columns                    { width: 48%;            }
+  .seven.columns                  { width: 56.6666666667%; }
+  .eight.columns                  { width: 65.3333333333%; }
+  .nine.columns                   { width: 74.0%;          }
+  .ten.columns                    { width: 82.6666666667%; }
+  .eleven.columns                 { width: 91.3333333333%; }
+  .twelve.columns                 { width: 100%; margin-left: 0; }
+
+  .one-third.column               { width: 30.6666666667%; }
+  .two-thirds.column              { width: 65.3333333333%; }
+
+  .one-half.column                { width: 48%; }
+
+  /* Offsets */
+  .offset-by-one.column,
+  .offset-by-one.columns          { margin-left: 8.66666666667%; }
+  .offset-by-two.column,
+  .offset-by-two.columns          { margin-left: 17.3333333333%; }
+  .offset-by-three.column,
+  .offset-by-three.columns        { margin-left: 26%;            }
+  .offset-by-four.column,
+  .offset-by-four.columns         { margin-left: 34.6666666667%; }
+  .offset-by-five.column,
+  .offset-by-five.columns         { margin-left: 43.3333333333%; }
+  .offset-by-six.column,
+  .offset-by-six.columns          { margin-left: 52%;            }
+  .offset-by-seven.column,
+  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
+  .offset-by-eight.column,
+  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
+  .offset-by-nine.column,
+  .offset-by-nine.columns         { margin-left: 78.0%;          }
+  .offset-by-ten.column,
+  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
+  .offset-by-eleven.column,
+  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
+
+  .offset-by-one-third.column,
+  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
+  .offset-by-two-thirds.column,
+  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
+
+  .offset-by-one-half.column,
+  .offset-by-one-half.columns     { margin-left: 52%; }
+
+}
+
+
+/* Base Styles
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/* NOTE
+html is set to 62.5% so that all the REM measurements throughout Skeleton
+are based on 10px sizing. So basically 1.5rem = 15px :) */
+html {
+  font-size: 62.5%; }
+body {
+  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
+  line-height: 1.6;
+  font-weight: 400;
+  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color: #222; }
+
+
+/* Typography
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 2rem;
+  font-weight: 300; }
+h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
+h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
+h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
+h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
+h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }
+
+/* Larger than phablet */
+@media (min-width: 550px) {
+  h1 { font-size: 5.0rem; }
+  h2 { font-size: 4.2rem; }
+  h3 { font-size: 3.6rem; }
+  h4 { font-size: 3.0rem; }
+  h5 { font-size: 2.4rem; }
+  h6 { font-size: 1.5rem; }
+}
+
+p {
+  margin-top: 0; }
+
+
+/* Links
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+a {
+  color: #1EAEDB; }
+a:hover {
+  color: #0FA0CE; }
+
+
+/* Buttons
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  display: inline-block;
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  border: 1px solid #bbb;
+  cursor: pointer;
+  box-sizing: border-box; }
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover,
+.button:focus,
+button:focus,
+input[type="submit"]:focus,
+input[type="reset"]:focus,
+input[type="button"]:focus {
+  color: #333;
+  border-color: #888;
+  outline: 0; }
+.button.button-primary,
+button.button-primary,
+input[type="submit"].button-primary,
+input[type="reset"].button-primary,
+input[type="button"].button-primary {
+  color: #FFF;
+  background-color: #33C3F0;
+  border-color: #33C3F0; }
+.button.button-primary:hover,
+button.button-primary:hover,
+input[type="submit"].button-primary:hover,
+input[type="reset"].button-primary:hover,
+input[type="button"].button-primary:hover,
+.button.button-primary:focus,
+button.button-primary:focus,
+input[type="submit"].button-primary:focus,
+input[type="reset"].button-primary:focus,
+input[type="button"].button-primary:focus {
+  color: #FFF;
+  background-color: #1EAEDB;
+  border-color: #1EAEDB; }
+
+
+/* Forms
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea,
+select {
+  height: 38px;
+  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+  background-color: #fff;
+  border: 1px solid #D1D1D1;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box; }
+/* Removes awkward default styles on some inputs for iOS */
+input[type="email"],
+input[type="number"],
+input[type="search"],
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="password"],
+textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none; }
+textarea {
+  min-height: 65px;
+  padding-top: 6px;
+  padding-bottom: 6px; }
+input[type="email"]:focus,
+input[type="number"]:focus,
+input[type="search"]:focus,
+input[type="text"]:focus,
+input[type="tel"]:focus,
+input[type="url"]:focus,
+input[type="password"]:focus,
+textarea:focus,
+select:focus {
+  border: 1px solid #33C3F0;
+  outline: 0; }
+label,
+legend {
+  display: block;
+  margin-bottom: .5rem;
+  font-weight: 600; }
+fieldset {
+  padding: 0;
+  border-width: 0; }
+input[type="checkbox"],
+input[type="radio"] {
+  display: inline; }
+label > .label-body {
+  display: inline;
+  margin-left: .5rem;
+  font-weight: normal; }
+
+
+/* Lists
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+ul {
+  list-style: circle inside; }
+ol {
+  list-style: decimal inside; }
+ol, ul {
+  padding-left: 0;
+  margin-top: 0; }
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin: 1.5rem 0 1.5rem 3rem;
+  font-size: 90%; }
+li {
+  margin-bottom: 1rem; }
+
+
+/* Code
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+code {
+  padding: .2rem .5rem;
+  margin: 0 .2rem;
+  font-size: 90%;
+  white-space: nowrap;
+  background: #F1F1F1;
+  border: 1px solid #E1E1E1;
+  border-radius: 4px; }
+pre > code {
+  display: block;
+  padding: 1rem 1.5rem;
+  white-space: pre; }
+
+
+/* Tables
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+th,
+td {
+  padding: 12px 15px;
+  text-align: left;
+  border-bottom: 1px solid #E1E1E1; }
+th:first-child,
+td:first-child {
+  padding-left: 0; }
+th:last-child,
+td:last-child {
+  padding-right: 0; }
+
+
+/* Spacing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+button,
+.button {
+  margin-bottom: 1rem; }
+input,
+textarea,
+select,
+fieldset {
+  margin-bottom: 1.5rem; }
+pre,
+blockquote,
+dl,
+figure,
+table,
+p,
+ul,
+ol,
+form {
+  margin-bottom: 2.5rem; }
+
+
+/* Utilities
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+.u-full-width {
+  width: 100%;
+  box-sizing: border-box; }
+.u-max-full-width {
+  max-width: 100%;
+  box-sizing: border-box; }
+.u-pull-right {
+  float: right; }
+.u-pull-left {
+  float: left; }
+
+
+/* Misc
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+hr {
+  margin-top: 3rem;
+  margin-bottom: 3.5rem;
+  border-width: 0;
+  border-top: 1px solid #E1E1E1; }
+
+
+/* Clearing
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+/* Self Clearing Goodness */
+.container:after,
+.row:after,
+.u-cf {
+  content: "";
+  display: table;
+  clear: both; }
+
+
+/* Media Queries
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+/*
+Note: The best way to structure the use of media queries is to create the queries
+near the relevant code. For example, if you wanted to change the styles for buttons
+on small devices, paste the mobile query code up in the buttons section and style it
+there.
+*/
+
+
+/* Larger than mobile */
+@media (min-width: 400px) {}
+
+/* Larger than phablet (also point when grid becomes active) */
+@media (min-width: 550px) {}
+
+/* Larger than tablet */
+@media (min-width: 750px) {}
+
+/* Larger than desktop */
+@media (min-width: 1000px) {}
+
+/* Larger than Desktop HD */
+@media (min-width: 1200px) {}

css/spinner.css

@@ -0,0 +1,119 @@
+/* Absolute Center Spinner */
+.loading {
+  position: fixed;
+  z-index: 999;
+  height: 2em;
+  width: 2em;
+  overflow: show;
+  margin: auto;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+/* Transparent Overlay */
+.loading:before {
+  content: '';
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.3);
+}
+
+/* :not(:required) hides these rules from IE9 and below */
+.loading:not(:required) {
+  /* hide "loading..." text */
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+.loading:not(:required):after {
+  content: '';
+  display: block;
+  font-size: 10px;
+  width: 1em;
+  height: 1em;
+  margin-top: -0.5em;
+  -webkit-animation: spinner 1500ms infinite linear;
+  -moz-animation: spinner 1500ms infinite linear;
+  -ms-animation: spinner 1500ms infinite linear;
+  -o-animation: spinner 1500ms infinite linear;
+  animation: spinner 1500ms infinite linear;
+  border-radius: 0.5em;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
+}
+
+/* Animation */
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

css/themes/bigbox.css

@@ -0,0 +1,123 @@
+html,
+body {
+  min-height: 100%;
+}
+.humane,
+.humane-bigbox {
+  position: fixed;
+  -moz-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-bigbox {
+  font-family: Ubuntu, Verdana, sans-serif;
+  line-height: 40px;
+  font-size: 35px;
+  top: 25%;
+  left: 25%;
+  opacity: 0;
+  width: 50%;
+  min-height: 40px;
+  padding: 30px;
+  text-align: center;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAc0lEQVQokb2RQQ6EMAwDx/7/n80BtIEC3RYhLlXrVLGTAYiBWBIGtkPSP01SfreTVoV5re9Rcee1scwDk9NurbR62sZJcpzy9O+2X5KsXabyPaQFYNuvkqkRviDTp9Vs8opC0TpkHvJtVjeReW/5kEyX1gKeLEKE9peeWAAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000), color-stop(1, rgba(0,0,0,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
+  background: linear-gradient(top, #000 0%, rgba(0,0,0,0.9) 100%) no-repeat;
+  *background-color: #000;
+  color: #fff;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  text-shadow: 0 -1px 1px #ddd;
+  -webkit-box-shadow: 0 15px 15px -15px #000;
+  box-shadow: 0 15px 15px -15px #000;
+  -moz-transform: scale(0.1);
+  -webkit-transform: scale(0.1);
+  -ms-transform: scale(0.1);
+  -o-transform: scale(0.1);
+  transform: scale(0.1);
+}
+.humane p,
+.humane-bigbox p,
+.humane ul,
+.humane-bigbox ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-bigbox ul {
+  list-style: none;
+}
+.humane.humane-bigbox-info,
+.humane-bigbox.humane-bigbox-info {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAQElEQVQokWNgYEj5z8TAwPCfiYGBgQGVIEKMTG2DTYwRVez/IHIaNcUGyBnYgpORel6gpvFEJhBqpxIaG8/AAADsKDq/HhYQ2AAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000064), color-stop(1, rgba(0,0,100,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: linear-gradient(top, #000064 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  *background-color: #030;
+}
+.humane.humane-bigbox-success,
+.humane-bigbox.humane-bigbox-success {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNgSGH4z8TAACEYUAkixMjUNsjEGFHF/g8ip1FVbGCcgS04GannBaoaT1wCwWkvmXbQ2HgGBgYA8Yw6v+m4Kh8AAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #006400), color-stop(1, rgba(0,100,0,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: linear-gradient(top, #006400 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  *background-color: #030;
+}
+.humane.humane-bigbox-error,
+.humane-bigbox.humane-bigbox-error {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWNIYWD4z8QAJRhQCSLEyNQ2uMQYUcX+DyKnUVdsQJyBLTgZqecF6hpPVALBaS+ZdtDYeAYGBgYA9vA6v4OR3MkAAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #640000), color-stop(1, rgba(100,0,0,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: linear-gradient(top, #640000 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  *background-color: #300;
+}
+.humane.humane-animate,
+.humane-bigbox.humane-bigbox-animate {
+  opacity: 1;
+  -moz-transform: scale(1);
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+.humane.humane-animate:hover,
+.humane-bigbox.humane-bigbox-animate:hover {
+  opacity: 0.6;
+  -moz-transform: scale(0.8);
+  -webkit-transform: scale(0.8);
+  -ms-transform: scale(0.8);
+  -o-transform: scale(0.8);
+  transform: scale(0.8);
+}
+.humane.humane-js-animate,
+.humane-bigbox.humane-bigbox-js-animate {
+  opacity: 1;
+  -moz-transform: scale(1);
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+.humane.humane-js-animate:hover,
+.humane-bigbox.humane-bigbox-js-animate:hover {
+  opacity: 0.6;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
+}

css/themes/boldlight.css

@@ -0,0 +1,122 @@
+html,
+body {
+  min-height: 100%;
+}
+.humane,
+.humane-boldlight {
+  position: fixed;
+  -moz-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-boldlight {
+  font-family: Ubuntu, Verdana, sans-serif;
+  font-size: 25px;
+  letter-spacing: -1px;
+  top: 25%;
+  left: 25%;
+  opacity: 0;
+  width: 50%;
+  color: #000;
+  padding: 10px;
+  text-align: center;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACWCAYAAAAfduJyAAAABmJLR0QA/wD/AP+gvaeTAAAAPElEQVQokWP4////Gab///8zQAgGBgYo8e/fP2QxSpSgydJNCYJLRSVoPqeOkgEIYop9TrGbSfcWpW4GAFeF/7lb/oWBAAAAAElFTkSuQmCC');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255,255,255,0.8)), color-stop(1, rgba(150,150,150,0.8))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
+  background: linear-gradient(top, rgba(255,255,255,0.8) 0%, rgba(150,150,150,0.8) 100%) no-repeat;
+  *background-color: #fff;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  text-shadow: 0 -1px 1px rgba(221,221,221,0.4);
+  -webkit-box-shadow: 0 4px 4px -4px #eee;
+  box-shadow: 0 4px 4px -4px #eee;
+  -moz-transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+  -ms-transform: scale(1.1);
+  -o-transform: scale(1.1);
+  transform: scale(1.1);
+}
+.humane p,
+.humane-boldlight p,
+.humane ul,
+.humane-boldlight ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-boldlight ul {
+  list-style: none;
+}
+.humane.humane-boldlight-info,
+.humane-boldlight.humane-boldlight-info {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAR0lEQVQokWNISfn/n4mBgeE/EwMDAwMqQYQYmdoGlxgjI4rY//+Dx2nUFRsQZ2ALTrQQp8QL1DWeqASC014y7aCx8QwMDAwA1aZBIulmpvwAAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6464ff), color-stop(1, rgba(100,100,255,0.8))) no-repeat;
+  background: -moz-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
+  background: -o-linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
+  background: linear-gradient(top, #6464ff 0%, rgba(100,100,255,0.8) 100%) no-repeat;
+  *background-color: #6464ff;
+}
+.humane.humane-boldlight-success,
+.humane-boldlight.humane-boldlight-success {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAGklEQVQokWNI+Z9yhomBgYFhlBglRonhSgAAFX0EItSd0k8AAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #64ff64), color-stop(1, rgba(100,255,100,0.8))) no-repeat;
+  background: -moz-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
+  background: -o-linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
+  background: linear-gradient(top, #64ff64 0%, rgba(100,255,100,0.8) 100%) no-repeat;
+  *background-color: #64ff64;
+}
+.humane.humane-boldlight-error,
+.humane-boldlight.humane-boldlight-error {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAGklEQVQokWP4n5JyhomBgYFhlBglRonhSgAAFhgEIhjGqQkAAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff6464), color-stop(1, rgba(255,100,100,0.8))) no-repeat;
+  background: -moz-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
+  background: -ms-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
+  background: -o-linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
+  background: linear-gradient(top, #ff6464 0%, rgba(255,100,100,0.8) 100%) no-repeat;
+  *background-color: #ff6464;
+}
+.humane.humane-animate,
+.humane-boldlight.humane-boldlight-animate {
+  opacity: 1;
+  -moz-transform: scale(1);
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+.humane.humane-animate:hover,
+.humane-boldlight.humane-boldlight-animate:hover {
+  opacity: 0.4;
+  -moz-transform: scale(1.8);
+  -webkit-transform: scale(1.8);
+  -ms-transform: scale(1.8);
+  -o-transform: scale(1.8);
+  transform: scale(1.8);
+}
+.humane.humane-animate,
+.humane-boldlight.humane-boldlight-js-animate {
+  opacity: 1;
+  -moz-transform: scale(1);
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+.humane.humane-animate:hover,
+.humane-boldlight.humane-boldlight-js-animate:hover {
+  opacity: 0.4;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+}

css/themes/flatty.css

@@ -0,0 +1,94 @@
+html,
+body {
+  min-height: 100%;
+}
+.humane,
+.humane-flatty {
+  position: fixed;
+  -moz-transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-flatty {
+  font-family: Helvetica Neue, Helvetica, san-serif;
+  font-size: 16px;
+  top: 0;
+  left: 30%;
+  opacity: 0;
+  width: 40%;
+  color: #444;
+  padding: 10px;
+  text-align: center;
+  background-color: #fff;
+  -webkit-border-bottom-right-radius: 3px;
+  -webkit-border-bottom-left-radius: 3px;
+  -moz-border-radius-bottomright: 3px;
+  -moz-border-radius-bottomleft: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  -moz-transform: translateY(-100px);
+  -webkit-transform: translateY(-100px);
+  -ms-transform: translateY(-100px);
+  -o-transform: translateY(-100px);
+  transform: translateY(-100px);
+}
+.humane p,
+.humane-flatty p,
+.humane ul,
+.humane-flatty ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-flatty ul {
+  list-style: none;
+}
+.humane.humane-flatty-info,
+.humane-flatty.humane-flatty-info {
+  background-color: #3498db;
+  color: #FFF;
+}
+.humane.humane-flatty-success,
+.humane-flatty.humane-flatty-success {
+  background-color: #18bc9c;
+  color: #FFF;
+}
+.humane.humane-flatty-error,
+.humane-flatty.humane-flatty-error {
+  background-color: #e74c3c;
+  color: #FFF;
+}
+.humane-animate,
+.humane-flatty.humane-flatty-animate {
+  opacity: 1;
+  -moz-transform: translateY(0);
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.humane-animate:hover,
+.humane-flatty.humane-flatty-animate:hover {
+  opacity: 0.7;
+}
+.humane-js-animate,
+.humane-flatty.humane-flatty-js-animate {
+  opacity: 1;
+  -moz-transform: translateY(0);
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.humane-js-animate:hover,
+.humane-flatty.humane-flatty-js-animate:hover {
+  opacity: 0.7;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+}

css/themes/jackedup.css

@@ -0,0 +1,123 @@
+html,
+body {
+  min-height: 100%;
+}
+.humane,
+.humane-jackedup {
+  position: fixed;
+  -moz-transition: all 0.6s ease-in-out;
+  -webkit-transition: all 0.6s ease-in-out;
+  -ms-transition: all 0.6s ease-in-out;
+  -o-transition: all 0.6s ease-in-out;
+  transition: all 0.6s ease-in-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-jackedup {
+  font-family: Helvetica Neue, Helvetica, san-serif;
+  font-size: 18px;
+  letter-spacing: -1px;
+  top: 20px;
+  left: 30%;
+  opacity: 0;
+  width: 40%;
+  color: #333;
+  padding: 10px;
+  text-align: center;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACWCAYAAAAfduJyAAAABmJLR0QA/wD/AP+gvaeTAAAAIklEQVQokWNgYGCQZGJgYGDARTDSQnboGDqsnDt0DKWNLAAkiQFdC+vZNQAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.1)), color-stop(1, rgba(0,0,0,0.2))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%) no-repeat;
+  background: linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%) no-repeat;
+  background-color: #fff;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
+  -moz-transform: translateY(-100px);
+  -webkit-transform: translateY(-100px);
+  -ms-transform: translateY(-100px);
+  -o-transform: translateY(-100px);
+  transform: translateY(-100px);
+}
+.humane p,
+.humane-jackedup p,
+.humane ul,
+.humane-jackedup ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-jackedup ul {
+  list-style: none;
+}
+.humane.humane-jackedup-info,
+.humane-jackedup.humane-jackedup-info {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAR0lEQVQokWNISfn/n4mBgeE/EwMDAwMqQYQYmdoGlxgjI4rY//+Dx2nUFRsQZ2ALTrQQp8QL1DWeqASC014y7aCx8QwMDAwA1aZBIulmpvwAAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.7)), color-stop(1, rgba(0,0,0,0.85))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%) no-repeat;
+  background: linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.85) 100%) no-repeat;
+  background-color: #fff;
+  color: #fff;
+  text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
+}
+.humane.humane-jackedup-success,
+.humane-jackedup.humane-jackedup-success {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAASElEQVQokc2SMQ4AIAgDD9/K/79QVzWaENTownAJbWnA5SqACkA/Aiy59hczrGVC30Q7y57EmNU5NL5zwln50IMsfZMel+UBKtFBQSLWM9wLAAAAAElFTkSuQmCC');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #62c462), color-stop(1, #57a957)) no-repeat;
+  background: -moz-linear-gradient(top, #62c462 0%, #57a957 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #62c462 0%, #57a957 100%) no-repeat;
+  background: -ms-linear-gradient(top, #62c462 0%, #57a957 100%) no-repeat;
+  background: -o-linear-gradient(top, #62c462 0%, #57a957 100%) no-repeat;
+  background: linear-gradient(top, #62c462 0%, #57a957 100%) no-repeat;
+  background-color: #64ff64;
+  color: #fff;
+  text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
+}
+.humane.humane-jackedup-error,
+.humane-jackedup.humane-jackedup-error {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAIAAACmkByiAAAABmJLR0QA/wD/AP+gvaeTAAAAf0lEQVQokY2TOQ7AIAwER/5mivy/yRc2RQDhA0jhghFYO5bhuS+TZMAoIUMEhhH4loGhfu71cenM3DutWMsaeGKjv3zO5N17KLPJ0+fQD8cpv5uVLPo4vnX0PpXj0nuaaeVzdmw+yXG1O96n2p3kozB757Ni1Z5UPsU9SP8AeAG1kHXE+7RlPAAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ee5f5b), color-stop(1, #c43c35)) no-repeat;
+  background: -moz-linear-gradient(top, #ee5f5b 0%, #c43c35 100%) no-repeat;
+  background: -webkit-linear-gradient(top, #ee5f5b 0%, #c43c35 100%) no-repeat;
+  background: -ms-linear-gradient(top, #ee5f5b 0%, #c43c35 100%) no-repeat;
+  background: -o-linear-gradient(top, #ee5f5b 0%, #c43c35 100%) no-repeat;
+  background: linear-gradient(top, #ee5f5b 0%, #c43c35 100%) no-repeat;
+  background-color: #ee5f5b;
+  color: #fff;
+  text-shadow: 0 -1px 1px rgba(0,0,0,0.35);
+}
+.humane-animate,
+.humane-jackedup.humane-jackedup-animate {
+  opacity: 1;
+  -moz-transform: translateY(0);
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.humane-animate:hover,
+.humane-jackedup.humane-jackedup-animate:hover {
+  opacity: 0.7;
+}
+.humane-js-animate,
+.humane-jackedup.humane-jackedup-js-animate {
+  opacity: 1;
+  -moz-transform: translateY(0);
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.humane-js-animate:hover,
+.humane-jackedup.humane-jackedup-js-animate:hover {
+  opacity: 0.7;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
+}

css/themes/libnotify.css

@@ -0,0 +1,115 @@
+html,
+body {
+  min-height: 100%;
+}
+.humane,
+.humane-libnotify {
+  position: fixed;
+  -moz-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -o-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-libnotify {
+  font-family: Ubuntu, Arial, sans-serif;
+  text-align: center;
+  font-size: 15px;
+  top: 10px;
+  right: 10px;
+  opacity: 0;
+  width: 150px;
+  color: #fff;
+  padding: 10px;
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAANElEQVQYlWNgYGB4ysTAwMDAxMjICCUQXDQWAwMDAxMTExMedcRyB6d5CAMQ5hGrjSrmAQBQdgIXlosSTwAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.9)), color-stop(1, rgba(50,50,50,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
+  background: linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
+  *background-color: #000;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-box-shadow: 0 4px 4px -4px #000;
+  box-shadow: 0 4px 4px -4px #000;
+  -moz-transform: translateY(-40px);
+  -webkit-transform: translateY(-40px);
+  -ms-transform: translateY(-40px);
+  -o-transform: translateY(-40px);
+  transform: translateY(-40px);
+}
+.humane p,
+.humane-libnotify p,
+.humane ul,
+.humane-libnotify ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-libnotify ul {
+  list-style: none;
+}
+.humane.humane-libnotify-info,
+.humane-libnotify.humane-libnotify-info {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAAMUlEQVQYlWNgYDB6ysTAwMDAxMDACCcYUFkMDEwMDEwMBNVhkxg65jGhmke6M6hgHgBSdgHnpZwADwAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,50,0.9)), color-stop(1, rgba(0,0,100,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  background: linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
+  *background-color: #030;
+}
+.humane.humane-libnotify-success,
+.humane-libnotify.humane-libnotify-success {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAAMUlEQVQYlWNgMGJ4ysTAwMDAxMAIJxhQWQwMDEwMTKgS2NRhkxg65jGhmke6M6hhHgBS2QHn2LzhygAAAABJRU5ErkJggg==');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,50,0,0.9)), color-stop(1, rgba(0,100,0,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  background: linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
+  *background-color: #030;
+}
+.humane.humane-libnotify-error,
+.humane-libnotify.humane-libnotify-error {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWMwYmB4ysTAwMCATjASFsOmBBvBRJ7x+O0g0wCS7CDTH/RwH7X9MVDuwyaG032D2M2UeIYO7gMAqt8C19Bn7+YAAAAASUVORK5CYII=');
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(50,0,0,0.9)), color-stop(1, rgba(100,0,0,0.9))) no-repeat;
+  background: -moz-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: -webkit-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: -ms-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: -o-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  background: linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
+  *background-color: #300;
+}
+.humane.humane-animate,
+.humane-libnotify.humane-libnotify-animate {
+  opacity: 1;
+  -moz-transform: translateY(0);
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.humane.humane-animate:hover,
+.humane-libnotify.humane-libnotify-animate:hover {
+  opacity: 0.2;
+}
+.humane.humane-animate,
+.humane-libnotify.humane-libnotify-js-animate {
+  opacity: 1;
+  -moz-transform: translateY(0);
+  -webkit-transform: translateY(0);
+  -ms-transform: translateY(0);
+  -o-transform: translateY(0);
+  transform: translateY(0);
+}
+.humane.humane-animate:hover,
+.humane-libnotify.humane-libnotify-js-animate:hover {
+  opacity: 0.2;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+}

css/themes/original.css

@@ -0,0 +1,72 @@
+html,
+body {
+  min-height: 100%;
+}
+.humane,
+.humane-original {
+  position: fixed;
+  -moz-transition: all 0.2s ease-out;
+  -webkit-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+  z-index: 100000;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+.humane,
+.humane-original {
+  font-family: Ubuntu, Verdana, sans-serif;
+  line-height: 40px;
+  font-size: 25px;
+  top: 25%;
+  left: 25%;
+  opacity: 0;
+  width: 50%;
+  min-height: 40px;
+  padding: 10px;
+  text-align: center;
+  background-color: #000;
+  color: #fff;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+}
+.humane p,
+.humane-original p,
+.humane ul,
+.humane-original ul {
+  margin: 0;
+  padding: 0;
+}
+.humane ul,
+.humane-original ul {
+  list-style: none;
+}
+.humane.humane-original-info,
+.humane-original.humane-original-info {
+  background-color: #030;
+}
+.humane.humane-original-success,
+.humane-original.humane-original-success {
+  background-color: #030;
+}
+.humane.humane-original-error,
+.humane-original.humane-original-error {
+  background-color: #300;
+}
+.humane.humane-animate,
+.humane-original.humane-original-animate {
+  opacity: 0.8;
+}
+.humane.humane-animate:hover,
+.humane-original.humane-original-animate:hover {
+  opacity: 0.6;
+}
+.humane.humane-js-animate,
+.humane-original.humane-original-js-animate {
+  opacity: 0.8;
+}
+.humane.humane-js-animate:hover,
+.humane-original.humane-original-js-animate:hover {
+  opacity: 0.6;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
+}

cursos.php

@@ -1,6 +1,23 @@
 <?php
 $CASA_EBA="<span itemprop='location' itemscope itemtype='http://schema.org/Place'><span itemprop='name'>Casa ESPECIFICOS Buenos Aires</span> (<span itemprop='address' itemscope itemtype='http://schema.org/PostalAddress'><span itemprop='addressLocality'>Caballito</span>, <span itemprop='addressRegion'>CABA</span></span>) - Contacto: <span itemprop='telephone'>4982.2892</span></span>";
 $str='[
+		{
+			"nombre": "Asistente en Medicina Estética y Counseling",
+			"informacion": [ "<span itemprop=\"startDate\" content=\"2017-03-17\">Inicio: 17/03/2017</span>", "Dia: Viernes", "Duracion: Dos Cuatrimestres", "Modalidad: Presencial y a distancia", "Horario: 10:00 a 13:00 (GMT -3)"],
+			"avales": [ "ESPECIFCICOS Buenos Aires", "Desarrollo Cosmético SRL","Academia Iberoamericana de Medicina Biológica y Odontoestomatología", "Federación Argentina de Cosmetología y Estética" ],
+			"descripcion": "<p><span>La capacitaci&oacute;n consta de dos m&oacute;dulos intensivos orientados a:</span><br />
+			<span>1- Tratamientos dermatocosmi&aacute;tricos avanzados, relacionados a las pr&aacute;cticas m&eacute;dicas, realizadas en el &aacute;mbito de la Medicina Est&eacute;tica.</span><br />
+			<span>2- El conocimiento pr&aacute;ctico del mundo emocional-cognitivo de quienes nos consultan o hacen parte de nuestro mundo de relaciones.</span><br />
+			<br />
+			<span>Al finalizar la cursada, se podr&aacute;: &nbsp;</span><br />
+			<span>Diagnosticar un determinado inesteticismo facial o corporal, conociendo los tratamientos de elecci&oacute;n, sus l&iacute;mites y escalas terap&eacute;uticas progresivas.</span><br />
+			<span>Conocer los aspectos conductuales y emocionales de las conductas humanas.</span><br />
+			<span>Reconocer a las personalidades &ldquo;problema&rdquo; en las consultas diarias, las estructuras psicol&oacute;gicas de importancia cl&iacute;nica, nociones sobre Adicciones, trastornos de la conducta alimentaria, manejo del stress, lectura de la informaci&oacute;n cient&iacute;fica, y un conocimiento b&aacute;sico sobre aspectos filos&oacute;fico-existenciales del vivir cotidiano.</span>
+			<span>Conocer y articular los protocolos y conocimientos actuales en Medicina Est&eacute;tica no Quir&uacute;rgica, en coordinaci&oacute;n cient&iacute;fica con las pr&aacute;cticas relacionadas dermatocosmiatricas.</span><br />
+			<span>Aplicar t&eacute;cnicas metodol&oacute;gicas avanzadas.</span><br /></p>
+			",
+			"ubicacion": [ "{CASA_EBA}"]
+		},
 		{
 			"nombre": "Cosmetología",
 			"informacion": [ "<span itemprop=\"startDate\" content=\"2017-08-02\">Inicio: 02/08/2017</span>", "Dia: Miércoles", "Duracion: Cuatrimestral", "Modalidad: Presencial", "Horario: 14:00 a 17:00 (GMT -3)"],

index.php

@@ -0,0 +1,246 @@
+<!DOCTYPE html>
+<html amp lang="es">
+<head>
+	<meta charset="utf-8">
+	<link rel="canonical" href="https://especificosba.com.ar" />
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+	<meta name="description" content="Nos ocupamos de tu piel. Desarrollamos, diseñamos y comercializamos una exclusiva línea de productos cosméticos para tratamientos.">
+    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
+    
+    <link type="text/css" rel="Stylesheet" href="/css/especificos.css" />
+	<link rel="icon" type="image/x-icon" href="Images/icons/logo.ico" />
+    <title>Especificos Buenos Aires</title>
+
+	<meta property="og:type" content="business.business">
+	<meta property="og:title" content="Especificos Buenos Aires">
+	<meta property="og:description" content="Nos ocupamos de tu piel. Desarrollamos, diseñamos y comercializamos una exclusiva línea de productos cosméticos para tratamientos.">
+
+</head>
+<body>
+
+<div id="facebook-link"> <a href="https://www.facebook.com/pages/Especificos-Buenos-Aires/326062297573907"><img alt="Facebook" src="Images/fbmini.png" width="30" height="30" alt="facebook"/></a> </div>
+<div id="overlay-contact"></div>
+
+    <div id="basic-grey">
+    <h5 id="exit">X</h5>
+    <h5>Contacto</h5><br>
+    Un equipo de profesionales está a su servicio para responder sus consultas.<br><br>
+    Leopoldo Marechal 914, CABA (C1405BMD), Buenos Aires, Argentina.<br><br>
+    Tel&eacute;fono: +5411 4139-6860/1 +5411 4982-2892.
+    <br><br>
+	<form>
+    <label for="name">Nombre:</label>
+    <input id="name" type="text" name="name" />
+
+    <label for="email">Email :</label>
+    <input id="email" type="email" name="email" />
+
+    <label for="message">Mensaje :</label>
+    <textarea id="message" name="message" ></textarea>
+
+    <input id="btnconsulta" type="button" class="button" value="Enviar" /> 
+	</form>
+    <div id="respuestacontacto"></div>
+</div>
+
+
+<div id="top_wrapper">
+    <div id="navbar">
+        <ul id="navlist">
+            <li><a href="#nosotros">nosotros</a></li>
+            <li><a href="#productos">productos</a></li>
+            <li><a href="#actividades">actividades</a></li>
+            <li><a href="#top_wrapper"><img alt="ESPECIFICOS Buenos Aires" src="Images/icons/logo.png" id="logo" width=50 height=50  /></a></li>
+            <li><a href="#cursos">formación</a></li>
+            <li><a href="#distribuidoras">donde comprar</a></li>
+            <li class="contact"><a href="#footer-outer">contacto</a></li>
+        </ul>
+
+        <ul id="responsive">
+            <li><a href="#nosotros"><div id="usIcon"></div></a></li>
+            <li><a href="#productos"><div id="productIcon"></div></a></li>
+			<li><a href="#actividades"><div id="activityIcon"></div></a></li>
+            <li><a href="#top_wrapper"><div id="logoIcon"></div></a></li>
+			<li><a href="#cursos"><div id="coursesIcon"></div></a></li>
+            <li><a href="#distribuidoras"><div id="buyIcon"></div></a></li>
+            <li><a href="#footer-outer"><div id="contactIcon"></div></a></li>
+        </ul>
+    </div>
+</div>
+    <img alt="banner" id="banner" src="Images/slider/slide1-1920.jpg" width="100%">
+
+
+	<div class="seccion" id="nosotros">
+	    <h1><span>NOSOTROS</span></h1>
+
+		<div id="principal">
+			<div style="text-align: center;">
+			<p class="titulin center">Bienvenidos a ESPECIFICOS Buenos Aires</p><br/>
+			 Excelencia, ciencia y lujo al cuidado de tu piel</div><br/><br>
+			Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias
+			activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar 
+			la belleza y cuidados personalizados de la piel, con base científica.
+		</div>
+		<p>
+	    La línea profesional ESPECIFICOS Buenos Aires, fue creada hace diez años por iniciativa de 
+		un matrimonio de químicos cosméticos, con más de 25 años de experiencia en la industria del 
+		cuidado de la piel. Quienes han unido su pasión por la cosmética y experiencia para desarrollar 
+		y perfeccionar una extensa gama de productos que podrán dar solución a las demandas y expectativas
+		de sus clientas más exigentes.<br/><br/>Tratamientos pensados desde una profesional de la estética 
+		hacia sus colegas, consciente de la problemática a la que cada una de las profesionales se enfrenta
+		cada día. Combinando un enfoque personalizado de tratamientos con métodos no invasivos, basados en 
+		sistemas específicos para cada instancia de la piel.<br/><br/> Tratando y compensando los distintos
+		biotipos cutáneos en cada necesidad en particular, con sistemas de vanguardia, siempre basados en 
+		el profundo estudio de la piel. Hoy, la Metodología Específica, combinando un enfoque personalizado 
+		de tratamientos estéticos, ingredientes puros concentrados, vehículos de alto desarrollo, 
+		protocolos de procedimiento innovadores, como también estrictos controles de calidad internacional,
+		goza de una incuestionable reputación de excelencia.<br/><br/>La ética, el apoyo profesional 
+		constante y la formulación constituyen los valores fundamentales de ESPECIFICOS Buenos Aires. </p>
+	
+    </div>
+
+
+    <div class="seccion" id="productos">
+    <h1><span>PRODUCTOS</span></h1>
+	<p> <b>Cuidado específico para cada tipo de piel </b> <br/>
+	El diagnóstico previo personalizado y seguimiento por una profesional formada en 
+	tratamientos ESPECIFICOS Buenos Aires es nuestra filosofía de excelencia, ética, 
+	seriedad y apoyo constante para un perfecto resultado.<br/><br/>
+	Un producto ESPECIFICOS Buenos Aires responde a cuatro principios fundamentales:</p>
+	
+	<div class="descripciones">
+	
+		<div id="pureza" class="descripcion">
+			<img alt="Pureza" src="Images/icons/pure.png" width=115 height=115><br/><br/>
+			Principios activos seleccionados de máximo grado de pureza.
+		</div>
+		<div id="ciencia" class="descripcion">
+			<img alt="Ciencia" src="Images/icons/cience.png" width=115 height=115><br/><br/>
+			Formulaciones únicas, concebidas en combinación con técnicas de aplicación 
+			sinérgica, que aportan resultados inmediatos y duraderos.
+		</div>
+	</div>
+	<div class="descripciones">
+	
+		<div id="integridad" class="descripcion">
+			<img alt="Integridad" src="Images/icons/integridad.png" width=115 height=115><br/><br/>
+			Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.
+		</div>
+		<div id="control" class="descripcion">
+			<img alt="GMP" src="Images/icons/control.png" width=115 height=115><br/><br/>
+			Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.
+		</div>
+		
+	</div>
+	<a href="productos.php"><div class="titulos">Catálogo de productos</div></a>
+	<br><br>
+	<a href="graficas.php"><div class="titulos">Gráficas</div></a>
+    </div>
+
+    <div class="seccion" id="actividades">
+        <h1><span>ACTIVIDADES</span></h1>
+		<div class="descripciones">
+			<div class="descripcion">
+				<h6>Escenarios Wellness - Primera Jornada</h6><br/><br/>
+				<div class="fecha">
+						22 de Septiembre - 2016<br/>
+						Leopoldo Marechal 914 - Casa Central<br/>
+						CAPITAL FEDERAL - ARGENTINA
+				</div>
+
+			</div>
+			<div class="descripcion">
+				<h6>Escenarios Wellness - Segunda Jornada</h6><br/><br/>
+				<div class="fecha">
+						23 de Septiembre - 2016<br/>
+						Leopoldo Marechal 914 - Casa Central<br/>
+						CAPITAL FEDERAL - ARGENTINA
+
+				</div>
+			</div>
+		</div>
+		<div class="descripciones">
+			<div class="descripcion">
+					<h6>Conceptos de Masoterapia avanzada</h6><br/><br/>
+					<div class="fecha">
+						26 de Septiembre - 2016<br/>
+						Leopoldo Marechal 914 - Casa Central<br/>
+						CAPITAL FEDERAL - ARGENTINA
+					</div>
+			</div>	
+			<!--
+			<div class="descripcion">
+			<h6>Expo Estética</h6><br/><br/>
+				<div class="fecha">
+					6 y 7 de septiembre 2014<br/>
+					Centro Costa Salguero<br/>
+					CAPITAL FEDERAL - ARGENTINA
+				</div>
+			</div>
+			-->
+		</div>
+    </div>
+
+<div id="cursos">
+	<div id="curso">	
+    <h1><span>FORMACIÓN</span></h1>
+<br/><div class="titulos">
+	<a href="http://plataforma.especificosba.com.ar">Ir a la plataforma de estudios </a>
+</div>
+<br/>
+
+	<?php include("cursos.php"); ?>
+<div class="titulos">
+	<a href="http://curso.especificosba.com.ar">Ir a la plataforma 2015</a>
+</div>
+
+<br/>
+
+
+</div>
+</div>
+
+	
+	
+    <div class="seccion" id="distribuidoras">
+        <h1><span>DONDE COMPRAR</span></h1>    
+	<?php
+		include("generar_tabla_distrib.php");
+	?>
+    </div>
+
+    
+
+    <div id="footer-outer" style="text-align:center">
+		<div style="width:100%;">
+        <div id="footer-inner-left">
+          <h5>  MANTENERSE INFORMADO </h5> <br />
+            Para recibir el newsletter de informaciones de ESPECIFICOS Buenos Aires,
+			complete los campos “correo electrónico” y haga clic en “inscribirse”.
+            <br />
+            <div id="input-footer">
+                <input id="suscribe" type="text" /> 
+                <input id="ok" type="submit" value="Inscribirse" />
+                <div id="respuestanewsletter"></div>
+            </div>
+
+        </div>
+        <div id="footer-inner-right">
+           <h4> FACEBOOK </h4> <br />
+		   En esta página encontrará todo tipo de informaciones acerca de 
+		   ESPECIFICOS Buenos Aires, consejos, exclusividades, notas, cursos, 
+		   charlas de capacitación, novedades, eventos.
+			<br/>
+			Para acceder a la página, haga clic aquí.<br/><br/>
+            <a href="https://www.facebook.com/pages/Especificos-Buenos-Aires/326062297573907"><img alt="Facebook" src="Images/fb.png" width=50 height=50></a>
+        </div>
+		<div class="clear"></div>
+		</div>
+		<a href="qr_DC.pdf"><img alt="Data fiscal" src="Images/data-fiscal.jpg" height=30></a>
+    </div>
+	<?php include('piwik.html'); ?>
+    <script type="text/javascript" src="js/anim.js"> </script>
+    <script type="text/javascript" src="js/main.js"> </script>
+	<script type="text/javascript" src="js/rivets.bundled.min.js"></script>
+</body>
+</html>

ip.php

@@ -0,0 +1,4 @@
+<?php
+$host=$_SERVER['REMOTE_ADDR'];
+echo $host;
+?>

js/anim.js

@@ -0,0 +1,62 @@
+// first add raf shim
+// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();
+
+// main function
+function scrollToY(scrollTargetY, speed, easing) {
+    // scrollTargetY: the target scrollY property of the window
+    // speed: time in pixels per second
+    // easing: easing equation to use
+
+    var scrollY = window.scrollY,
+        scrollTargetY = scrollTargetY || 0,
+        speed = speed || 2000,
+        easing = easing || 'easeOutSine',
+        currentTime = 0;
+
+    // min time .1, max time .8 seconds
+    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
+
+    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
+    var PI_D2 = Math.PI / 2,
+        easingEquations = {
+            easeOutSine: function (pos) {
+                return Math.sin(pos * (Math.PI / 2));
+            },
+            easeInOutSine: function (pos) {
+                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
+            },
+            easeInOutQuint: function (pos) {
+                if ((pos /= 0.5) < 1) {
+                    return 0.5 * Math.pow(pos, 5);
+                }
+                return 0.5 * (Math.pow((pos - 2), 5) + 2);
+            }
+        };
+
+    // add animation loop
+    function tick() {
+        currentTime += 1 / 60;
+
+        var p = currentTime / time;
+        var t = easingEquations[easing](p);
+
+        if (p < 1) {
+            requestAnimFrame(tick);
+
+            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
+        } else {
+            window.scrollTo(0, scrollTargetY);
+        }
+    }
+
+    // call it once to get started
+    tick();
+}

js/aplicacion.js

@@ -0,0 +1,75 @@
+function app() {
+		var req = new XMLHttpRequest();
+		var result = document.getElementById("result");
+		var direccion = document.getElementById("direccion");
+		var geo_options = { 
+			enableHighAccuracy: false, 
+			maximumAge        : 0, 
+			timeout           : 5000
+		}
+
+		function doGet(lat,lng){
+			var d = new Date();
+			var time=d.getHours()*100 + d.getMinutes();
+			var params="?lat="+lat+"&long="+lng+"&t="+time;
+			req.open("GET", "https://uv.especificosba.com.ar/back/location.php"+params, true);
+			req.onreadystatechange=function(){
+			if(req.readyState == 4 && req.status == 200)
+				var res=JSON.parse(req.responseText);
+				if(res==undefined) { return; }
+				if(res.errorn==1){
+					result.innerHTML=res.error;
+				} else {
+					result.innerHTML="El indice UV actual en <br/>" +res.provincia + " es " + res.indicet + " ("+ numtolet(res.indicet)  +") <br/>y el m&aacute;ximo esperado para hoy es " + res.indice+ " ("+ numtolet(res.indice)  +")";
+				}
+				resize();
+			}
+			req.send();
+		}
+		function error(e){
+			var cargando=document.getElementById("cargando");
+			cargando.parentNode.removeChild(cargando);
+			initialize();
+			resize();
+		}
+		function numtolet(num){
+			if (num<=2) return "Muy bajo";
+			if (num<=4) return "Bajo";
+			if (num<=6) return "Moderado";
+			if (num<=9) return "Alto";
+			if (num<=14) return "Muy alto";
+			return "Extremo";
+		}
+		var geocoder = null;
+		var markers = new Array();
+		
+		function autocomplete_cb() {
+			direccion = document.getElementById("direccion");
+			geocoder = new google.maps.Geocoder();
+			var address = direccion.value;
+			var callback1 = function(results, status) {
+				result.innerHTML="Cargando...";
+			    if (status == google.maps.GeocoderStatus.OK) {
+			    	   doGet(results[0].geometry.location.lat(),results[0].geometry.location.lng());
+				  }
+			};
+		    geocoder.geocode( { 'address': address}, callback1);
+		}
+		
+		function initialize() {
+			var autocomplete = new google.maps.places.Autocomplete(document.getElementById("direccion"));
+			google.maps.event.addListener(autocomplete, 'place_changed', function() {
+				autocomplete_cb();
+			});
+				
+		}
+		error();
+
+}
+
+function resize(){
+	var html = document.documentElement;
+	var height = Math.max( html.clientHeight, html.offsetHeight );
+}
+window.addEventListener('load', app, false);
+window.addEventListener('resize', resize, false);

mail.py

@@ -0,0 +1,47 @@
+#!/usr/bin/python
+import sys
+import smtplib
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
+from email.header import Header
+from email.utils import formataddr
+
+
+noreply = 'noreply@especificosba.com.ar'
+noreplypass = "wimpywimpywimpy"
+testing = 0
+message = ''
+subject = "Consulta en la pagina"
+
+if len(sys.argv)!=3:
+	print "2 parameter, mail subject (quoted)"
+	sys.exit(1)
+
+def sendmail():
+	global noreply
+	global noreplypass
+	global message
+	msg = MIMEMultipart('alternative')
+	msg['Subject'] = subject
+	msg['From'] = formataddr((str(Header('Consulta en la pagina','utf-8')), receiver))
+	msg['reply-to'] = receiver
+	msg['to'] = "consultas@especificosba.com.ar"#csv str
+	msg.attach(MIMEText(message,'html'))
+	s = smtplib.SMTP('mail.especificosba.com.ar')
+	s.ehlo()
+	s.starttls()
+	s.ehlo
+	s.login(noreply, noreplypass) #12345678
+	try:
+		s.sendmail(noreply, "consultas@especificosba.com.ar", msg.as_string())
+		print("Consulta enviada correctamente")
+	except Exception,e:
+		print("Error al enviar la consulta")
+	finally:
+		s.quit()
+
+receiver = sys.argv[1] #'davidventura27@gmail.com'
+with open('mailtext', 'r') as content_file:
+    message= content_file.read()
+
+sendmail()

mailer.php

@@ -0,0 +1,8 @@
+<?php
+
+function sendmail($title,$to,$body) {
+		$file = fopen("/var/www/eba/mailtext","w");
+		fwrite($file,$body);
+		fclose($file);
+		echo shell_exec("python mail.py $to '$title'");
+}