modificacion folleto, se agregan graficas para descargar

css/especificos.css

@@ -576,6 +576,7 @@ p
    /*letter-spacing: 2px;*/
    color: #465A68;/*#7196A6*/ 
    font-weight: 300;
+   font-weight: 300;
    line-height: 23px;
 }
 

css/menu.css

@@ -0,0 +1,417 @@
+@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******************/
+
+@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: 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: 70px!important;
+	}
+}
+
+/*************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;
+    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;
+}
+
+
+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;
+   line-height: 23px;
+}
+
+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, a:visited, a:link{
+color: #FFF;
+}
+	
+/*********GALLERY************/
+
+#gallery{
+width: 60%;
+margin: 0 auto;
+
+}
+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;
+}
+
+
+

graficas.php

@@ -0,0 +1,130 @@
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link type="text/css" rel="Stylesheet" href="css/menu.css"/>
+<title> Especificos Buenos Aires</title>
+</head/
+
+<body>
+<div id="facebook-link">
+	<a href="https://www.facebook.com/EspecificosBuenosAires"><img src="Images/fbmini.png" /></a>
+</div>
+<div id="overlay-contact">
+</div>
+
+    <div class="basic-grey">
+    <h5 id="exit">X</h5>
+    <form action="" method="post" class="STYLE-NAME">
+    <h5>Contacto</h5><br>
+    Un equipo de profesionales está a su servicio para responder sus consultas.<br><br>
+    Av. Rivadavia 5427 3F, CABA (1424), Buenos Aires, Argentina.<br><br>
+    Tel&eacute;fono: +5411 4139-6860/1 +5411 4904-0289.
+    <br><br>
+    <label>
+
+        <span>Nombre :</span>
+        <input id="name" type="text" name="name" />
+    </label>
+    <br>
+    <label>
+        <span>Email :</span>
+        <input id="email" type="email" name="email" />
+    </label>
+    <br>
+    <label>
+        <span>Mensaje :</span>
+        <textarea id="message" name="message" ></textarea>
+    </label>
+    <br> 
+    <label>
+        <span>&nbsp;</span> 
+        <input id="btnconsulta" type="button" class="button" value="Enviar" /> 
+    </label>    
+    <div id="respuestacontacto"></div>
+    </form>
+</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 src="Images/icons/logo.png" id="logo" style="width: 51px; height: 50px;" /></a></li>
+            <li><a href="#cursos">cursos</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"><img src="Images/icons/Us.png" /></a></li>
+            <li><a href="#productos"><img src="Images/icons/productos.png" /></a></li>
+			<li><a href="#actividades"><img src="Images/icons/actividades.png"  /></a></li>
+            <li><a href="#top_wrapper"><img src="Images/icons/logo.png" /></a></li>
+			<li><a href="#cursos"><img src="Images/icons/cursos.png" /></a></li>
+            <li><a href="#distribuidoras"><img src="Images/icons/dondecomprar.png" /></a></li>
+            <li><a href="#contacto"><img src="Images/icons/contacto.png" class="contact"  /></a></li>
+        </ul>
+    </div>
+</div>
+
+<div id="graficas" class="seccion">
+	<h1><span>GRAFICAS PARA DESCARGAR</h1></span>
+	
+</div>
+
+<div id="gallery">
+	<div class="fila">
+		<div class="img">
+			<a target="_blank" href="Images/graficas/Hombres2014.jpg"><img src="Images/graficas/Hombres2014-thumb.jpg" width="300" height="420"></a>
+			<div class="desc">
+				<div class="titulos">
+					<a href="Images/graficas/Hombres2014.jpg">DESCARGAR</a>
+				</div>
+			</div>
+		</div>
+		<div class="img">
+			<a target="_blank" href="Images/graficas/peelingVertical.jpg"><img src="Images/graficas/peelingVertical-thumb.jpg"  width="300" height="420"></a>
+			<div class="desc">
+				<div class="titulos">
+					<a href="Images/graficas/peelingVertical.jpg">DESCARGAR</a>
+				</div>
+			</div>
+		</div>
+		<div class="img">
+			<a target="_blank" href="Images/graficas/productos.jpg"><img src="Images/graficas/productos-thumb.jpg"  width="300" height="420"></a>
+			<div class="desc">
+				<div class="titulos">
+					<a href="Images/graficas/productos.jpg">DESCARGAR</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="fila">
+		<div class="img">
+			<a target="_blank" href="Images/graficas/productos+chica.jpg"><img src="Images/graficas/productos+chica-thumb.jpg"  width="300" height="420"></a>
+			<div class="desc">
+				<div class="titulos">
+					<a href="Images/graficas/productos+chica.jpg">DESCARGAR</a>
+				</div>
+			</div>
+		</div>
+		<div class="img">
+			<a target="_blank" href="Images/graficas/RepairEyeContour.jpg"><img src="Images/graficas/RepairEyeContour-thumb.jpg"  width="300" height="420"></a>
+			<div class="desc">
+				<div class="titulos">
+					<a href="Images/graficas/RepairEyeContour.jpg">DESCARGAR</a>
+				</div>
+			</div>
+		</div>
+		<div class="img">
+			<a target="_blank" href="Images/graficas/Monodosis2014.jpg"><img src="Images/graficas/Monodosis2014-thumb.jpg"  width="300" height="420"></a>
+			<div class="desc">
+				<div class="titulos">
+					<a href="Images/graficas/Monodosis2014.jpg">DESCARGAR</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</body>

index.php

@@ -210,6 +210,8 @@
 		
 	</div>
 	<a href="productos.php"><div class="titulos">Ir al catálogo de productos</div></a>
+	<br><br>
+	<a href="graficas.php"><div class="titulos">Ir a Gráficas</div></a>
     </div>
 
     <div class="seccion" id="actividades">