test1

Especificos.css

@@ -1,32 +1,164 @@
-@font-face {
+@font-face{
     font-family: 'Analogue Reduced 45 Light';
     src: url('http://www.fontsaddict.com/fontface/essencesans-regular.ttf');
 }
 @font-face {
   font-family: 'Champagne and Limousine';
  src: url('http://www.fontsaddict.com/fontface/champagne-limousines.ttf');
+ -webkit-font-smoothing: antialiased;
 }
 
+@font-face {
+	font-family: 'Raleway';
+	src: url('/Fonts/Raleway-Regular.ttf');
+}
 html, body
 {
     margin: 0px auto;
-    font-family: 'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
+    font-family: 'Raleway'sans-serif;    
+/*font-family: 'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
+    */-webkit-font-smoothing: antialiased;
+    -webkit-text-stroke: 0.50px;
+    position: relative;
+
+}       
+#overlay-contact {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 10;
+    margin-top: -30px; 
+}
+
+#exit{
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    cursor: pointer;
+    float: right;
+}
+#mensaje{ resize:both; overflow:auto;}
+
+
+/* Basic Grey */
+.basic-grey {
+    width: 50%;
+    position: fixed;
+    left: 50%;
+    margin: 0 0 0 -25%;
+    /*position: fixed;
+    width: 650px;
+    margin-right: auto;
+    margin-left: auto;*/
+    z-index: 11;
+    background: #465A68;
+    padding: 20px 30px 20px 30px;
+    font-family: 'Champagne and Limousine';
+    font-size: 12px;
+    letter-spacing: 2px;
+    color: #BCC9CC ;
+    border:1px solid #DADADA;
+    -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: 70%;
+    font-family: 'Champagne and Limousine';
+    font-size: 12px;
+    /*font: normal 12px/12px Georgia, "Times New Roman", Times, serif;*/
 }
 
+.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;
+}
+
+@media(min-width: 801px){
+    #navbar #responsive{ display: none; }
+}
+@media(max-width:800px){
+    #navbar #navlist{ display:none; }
+
+
+    #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: 100%;
+        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%;
+    }
+}
+
+/*************NAVBAR************/
 #top_wrapper
 {
-    background-color: #fff;
+    background-color: rgba(255,255,255,255);
     width: 100%;
-    height: 65px;
     position: fixed;
     top: 0px;
     box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
     border-bottom: 2px solid ;
-    padding-top: 20px;
+    padding-top: 10px;
+    height: 65px;
 }
-
-/*************NAVBAR************/
 #navbar
 {
 
@@ -39,6 +171,7 @@ html, body
     font-size: 100%;    
 	color: #485260;
     letter-spacing: 5px;
+
 }
 
 #navlist
@@ -55,27 +188,35 @@ html, body
     vertical-align: middle;
     display: table-cell;
     text-align: center;
+    width: 0%;
 }
 
+
+/*************PAGINAS¨*******************/
 #paginas_wrapper
 {
+    height: 500px;
     float: left;
 }
 
-/*************PAGINAS¨*******************/
+.pagina{ height: 470px; }
 
 #paginas_list
 {
-    margin: 0px auto;
+    font-size: 36pt;
+    color: #475A68;
+    margin: 20px auto;
     width: 60px;
     text-align: center;
+    position: relative;
 }
 
 #paginas_list li
 {   
     margin: 0px auto;
-    width: 20px;
+    width: 0%;
     vertical-align: middle;
+    cursor: pointer;
     display: table-cell;
     text-align: center;
 }
@@ -97,21 +238,18 @@ html, body
     margin: 0px auto;
 }
 
-/*************SECCIONES************/
-
-#producto
+#categorias li:hover
 {
-    font-family: "Champagne and Limousine";
-    font-size: 16px;
-    color: #7B9299;
-    letter-spacing: 5px;
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out;
 }
+
 #lista_productos
 {
     margin-left: 50px;
-    display: inline-block;
+    float: left;
     vertical-align: middle;
-    width: 700px;
+    width: 820px;
     margin-top: 20px;
 }
 #productos_wrapper
@@ -120,20 +258,30 @@ html, body
     /*text-align: center;*/
     margin: 70px auto;
 }
+
+/*************SECCIONES************/
+
+#producto
+{
+    font-family: "Champagne and Limousine";
+    font-size: 16px;
+    color: #7B9299;
+    letter-spacing: 5px;
+    width: 660px;
+}
+
 #banner
 {
     background: url('Images/banner.jpg') no-repeat scroll center bottom / cover  #485260 ; 
-    /*background-size: 100% 100%;
-    background-repeat: no-repeat;*/
-    width: 90%;
-    height: 400px;
+    width: 100%;
+    height: 90%;
     max-height: 100%;
     text-align: center;
-    margin: 87px auto;    
+    margin:30px auto;    
     font-family: 'Champagne and Limousine';
     font-size: 300%;
     color: White;
-    padding-top: 30px;
+    padding-top: 100px;
 }
 
 #productos_titulo
@@ -143,28 +291,27 @@ html, body
     padding-top: 1px;
 }
 
-#nosotros, #actividades, #productos, #distribuidoras, #cursos
+#nosotros, #actividades, #distribuidoras, #cursos
 {
 	width: 90%;
 	height: auto;
 	text-align: center;
 	margin: 70px auto;
-	
+	border-bottom: 2px solid #475A68;
 }
 
+
 #productos
 {
     background: url('Images/productos.jpg') no-repeat scroll center bottom / cover #485260 ;
-    /*background-size: 100% 100%;
-    background-repeat: no-repeat;*/
     height: 400px;
     max-height: 100%;
     width: 90%; 
-   /* padding-top: 5em;*/
     margin: 100px auto;
     font-family: 'Champagne and Limousine';
     font-size: 200%;
     color: #D8DFE1;
+    text-align: center;
 }
 
 /*************TABLAS************/
@@ -207,32 +354,19 @@ tbody, td
     color: #475A68;
 }
 
+/**************FOOTER**************/
 #ok:hover, #ok:active, #ok
 {
-    	background-color:#BCC9CC;
-	-webkit-border-top-left-radius:0px;
-	-moz-border-radius-topleft:0px;
-	border-top-left-radius:0px;
-	-webkit-border-top-right-radius:0px;
-	-moz-border-radius-topright:0px;
-	border-top-right-radius:0px;
-	-webkit-border-bottom-right-radius:0px;
-	-moz-border-radius-bottomright:0px;
-	border-bottom-right-radius:0px;
-	-webkit-border-bottom-left-radius:0px;
-	-moz-border-radius-bottomleft:0px;
-	border-bottom-left-radius:0px;
-	text-indent:0px;
-	display:inline-block;
-	color:#475A68;
-	font-size:18px;
-	font-weight:normal;
-	font-style:normal;
-	height:30px;
-	line-height:30px;
-	width:56px;
-	text-decoration:none;
-	text-align:center;
+    background-color:#BCC9CC;
+    text-indent:0px;
+    display:inline-block;
+    color:#475A68;
+    font-size:18px;
+    font-weight:normal;
+    font-style:normal;
+    width:56px;
+    text-align:center;
+    height: 31px;
 }
 #footer-outer
 {
@@ -276,13 +410,16 @@ tbody, td
     margin-top: 20px;
 }
 
+#input-footer{
+
+}
 /*************HEADERS STYLE************/
 
 hr
 {
     color: #465A68;
     background-color: #465A68;
-    height: 2px;
+    height: 1px;
 }    
 
 h2
@@ -311,6 +448,7 @@ h3
     text-align: center;
     margin: 0px auto;
 }
+
 h1 
 {
     
@@ -319,8 +457,7 @@ h1
    text-align: center; 
    border-bottom: 2px solid #465A68; 
    line-height: 0.1em;
-   /*font-family:'Franklin Gothic Book','Helvetica Neue',Helvetica,Arial,sans-serif;
- */  font-family:  'Champagne and Limousine';
+   font-family:  'Champagne and Limousine';
    margin: 30px auto;  
    color: #465A68;
    font-size: 190%;
@@ -342,7 +479,7 @@ h2
 
 h4
 {
-    font-size: 35px;
+    font-size: 25px;
     font-weight: normal;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
@@ -353,20 +490,23 @@ h4
 
 h5
 {
-    font-size: 50px;
-    color:White;
-    text-align: center;
+    font-size: 30px;
+    color:#BCC9CC;
+    text-align: left;
     font-family: 'Champagne and Limousine';
-  
+    font-weight: normal;
+    margin: 0 0;
 }
 p
 {
    margin: 70px 30px 70px 30px;
-   font-family: 'Champagne and Limousine';
-   font-size: 24px;
+   font-family: 'Raleway', sans-serif;
+   font-size: 16px;
    text-align: center;
    letter-spacing: 3px;
    color: #7196A6;
+   font-weight: 300;
+   line-height: 23px;
 }
 
 a:link
@@ -374,14 +514,15 @@ a:link
     color: #485260;
     text-decoration:none;
 }
-a:hover
+a:hover, 
 {
-    color: #7196A6;
+    opacity: 0.5; transition: opacity 0.3s ease-in-out;
+    /*color: #7196A6;
     text-decoration: none;
     opacity: 0.5;
 	filter: alpha(opacity=100);
  	-webkit-transition: opacity 2s linear;
-	
+	*/
 }
 
 ul, li
@@ -391,4 +532,118 @@ ul, li
     margin-bottom: 3px;
 }
 
-.hidden { display: none;}
+li:hover
+{
+   opacity: 0.5;
+   transition: opacity 0.5s ease-in-out;
+}
+
+.hidden { display: none;}
+
+
+/********************SLIDES********************/
+
+@import url(http://fonts.googleapis.com/css?family=Varela+Round);
+
+.slides {
+    float: left;
+    padding: 0;
+    width: 900px;
+    height: 600px;
+    display: block;
+    margin: -51px auto;
+    position: relative;
+}
+
+.slides * {
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+.slides input { display: none; }
+
+.slide-container { display: block; }
+
+.slide {
+    top: 0; 
+    opacity: 0;
+    width: 900px;
+    height: 500px;
+    display: block;
+    position: absolute;
+
+    transform: scale(0);
+
+    transition: all .7s ease-in-out;
+}
+
+.slide img {
+    width: 100%;
+    height: 100%;
+}
+
+.nav label 
+{
+    height: 120px;
+
+    z-index: 9;
+    cursor: pointer;
+    color: #475A68;
+    font-size: 80pt;
+    text-align: center;
+    font-family: "Varela Round", sans-serif;
+    margin: auto auto;
+    margin-top: 170px;
+
+}
+
+.slide:hover + .nav label { opacity: 0.5; }
+
+.nav label:hover { opacity: 0.2; transition: opacity 1s ease-in-out;}
+
+/*.nav .next { right: 0; }*/
+
+input:checked + .slide-container  .slide {
+    opacity: 1;
+
+    transition: opacity 1s ease-in-out;
+}
+
+input:checked + .slide-container .nav label { display: block; }
+
+.nav-dots {
+    width: 100%;
+    bottom: 9px;
+    height: 11px;
+    display: inline-block;
+    position: absolute;
+    text-align: center;
+}
+
+.nav-dots .nav-dot {
+    top: -5px;
+    width: 11px;
+    height: 11px;
+    margin: 0 4px;
+    position: relative;
+    border-radius: 100%;
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.nav-dots .nav-dot:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.8);
+
+input#img-1:checked ~ .nav-dots label#img-dot-1,
+input#img-2:checked ~ .nav-dots label#img-dot-2,
+input#img-3:checked ~ .nav-dots label#img-dot-3,
+input#img-4:checked ~ .nav-dots label#img-dot-4,
+input#img-5:checked ~ .nav-dots label#img-dot-5,
+input#img-6:checked ~ .nav-dots label#img-dot-6 {
+    background: rgba(0, 0, 0, 0.8);
+}