/*
Reglas para trabajar con CSS
1) Primero se definen los estilos para ETIQUETAS html. por ejemplo : header, footer, div, a, p, etc.
2) Despues se definen los estilos para IDENTIFICADORES (id), los id's son elementos unicos en el html,
en el css se declaran con el simbolo de # ejemplo: #nombre-id{ estilos } y en el html se llaman
mediante el atributo id ejemplo :
3) Al fnal se definen los estilos para las CLASES (class), las clases son elementos que se pueden
repetir 'n' veces en el html, en el css se declaran con el simbolo de . ejemplo : .nombre-clase{ estilos }
y en el html se llaman mediante el atributo class, ejemplo :
4) Todos los estilos se ordenan conforme van apareciendo en la disposicion del html, teniendo en cuenta
la prioridad anterior, es decir, primero ETIQUETAS, luego IDENTIFICADORES y al final las CLASES
5) Los atributos se declaran de la siguiente forma : { atributo:valor1; atributo:valor2; ...atributoN:valorN; }
6) Todos los atributos se ordenan alfabeticamente, por ejemplo si tengo width, color, display
entonces el orden seria primero color, luego display y al final width
7) Si tenemos estilos para el comodin *, o para las etiquetas html y/o body, estos estilos son los
primeros en definirse.
8) En el body debemos declarar un tamaņo de fuente global.
9) Si tenemos estilos para resetear elementos html, estos iran antes de cualquier estilo.
*/
/* reseteo universal */
* {
border: 0;
margin: 0;
padding: 0;
}
@font-face {
font-family: "Chalet";
src: url("../fonts/Chalet.eot");
src: url("../fonts/Chalet.eot?#iefix") format("embedded-opentype"),
url("../fonts/Chalet.woff") format("woff"),
url("../fonts/Chalet.ttf") format("truetype"),
url("../fonts/Chalet.svg#Chalet") format("svg");
font-weight: normal;
/*
font-style: normal;
*/
}
@font-face {
font-family: "Pecita";
src: url("../fonts/Pecita.eot");
src: url("../fonts/Pecita.eot?#iefix") format("embedded-opentype"),
url("../fonts/Pecita.woff") format("woff"),
url("../fonts/Pecita.ttf") format("truetype"),
url("../fonts/Pecita.svg#Chalet") format("svg");
font-weight: normal;
/*
font-style: normal;
*/
}
/* 16px = 12pt = 100% = 1em */
body {
/*
*/
}
section#titcontenedor {
/*
background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
background: -moz-linear-gradient(top, #34466D, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
background: -webkit-gradient(linear, left top, left bottom, from(#3686BE), to(#ffffff));
background: -moz-linear-gradient(top, #3686BE, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
background: #424242;
background: #34466D;
background: #3686BE;
background: linear-gradient(to right, #34466D, #fff, #212121);
background: linear-gradient(to right, #424242, #fff, #424242);
background: linear-gradient(to right, #34466D, #fff, #34466D);
min-height: 100px;
margin: 0px 5px 350px 5px;
background: linear-gradient(to right, #34466D, #fff, #34466D);
background: linear-gradient(to right, #cb1d3e, #fff, #cb1d3e);
background: linear-gradient(to right, #cb1d3e, #cb1d3e, #cb1d3e);
background: -webkit-gradient(linear, left top, left bottom, from(#06248d), to(#ffffff));
background: -moz-linear-gradient(top, #06248d, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#06248d', endColorstr='#ffffff');
position: fixed;
*/
background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
background: -moz-linear-gradient(top, #000030, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
border-radius: 0px;
margin: 0px 5px 5px 5px;
width: 100%; /* ancho del headar (titulo) */
height: 150px;
position: fixed;
z-index: 10; /* recien lo use el 2015/10/06. por q' la galeria cuando roleaba se iva encima del titulo */
}
section#principal {
/*
text-align: center;
padding: 16px 32px -10px 32px;
*/
display:block;
margin: 0px 0px 0px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro1_tit, article#cuadro2_tit, article#cuadro3_tit {
/*
border-radius: 8px;
min-height: 300px;
min-height: 220px;
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 100%;
margin: 0px;
min-height: 110px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro1_tit {
/*
padding: 4px 4px 4px 20px;
background-color: #AB2525;
*/
margin: 0px 0px 10px 0px;
width: 8%;
}
article#cuadro2_tit {
/*
padding: 4px 4px 4px 20px;
background-color: #4B6AA9;
*/
margin: 0px 0px 10px 0px;
min-height: 140px;
width: 39.5%;
}
article#cuadro3_tit {
/*
padding: 4px 4px 4px 20px;
background-color: #C9471C;
*/
margin: -7px 0px 10px 0px;
min-height: 80px;
width: 51.5%;
}
#wlogo {
/*
opacity: 1;
margin: 5px 0px 10px 5px;
height: 80px;
border-radius: 8px 8px 8px 8px;
*/
border-radius: 8px;
margin: 5px 0px 10px 4px;
width: 89%; /* ancho del logo (titulo) */
height: 80px;
filter: alpha(opacity=10);
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#wlogo:hover {
/*
opacity: 0.7;
border-radius: 0.5em 0.5em 7.5em 0.5em;
*/
border-radius: 8px 8px 120px 8px;
width: 160%; /* ancho del logo (titulo) */
filter: alpha(opacity=7);
-ms-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.titulo_principal {
/*
Salon de Belleza Leticia Prado
margin: 59px 10px 10px 44px;
font-family: Georgia, "Times New Roman", Times, serif;
*/
color: #fff;
font-size: 32px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
margin: 29px 10px 10px -97px;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
.sub_titulo {
/*
Autoridad en Belleza
margin: 18px 16px 21px -70px;
margin: 18px 16px 21px -93px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #b20808;
*/
color: #000;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 10px 16px 21px -93px;
padding: 0px 5px 5px 5px;
text-align: center;
/* trabajar el reflejo del sub-titulo.
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
ul.demo1{ /* initial CSS for demo 1 (before it's animated) */
/*
margin: -16px 0px 0px 180px;
margin: -15px 0px 0px 176px;
margin: -15px 0px 0px 195px;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
list-style:none; /* le quito los puntos al li */
color: #fff;
font-size: 12px;
margin: 13px 0px 0px 195px;
}
section#secundario {
/*
*/
display:block;
margin: 0px 0px 10px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro11_menu, article#cuadro12_menu {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 46%;
margin: 0px;
height: 60px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro11_menu {
/*
padding: 4px 4px 4px 20px;
background-color: #AB2525;
width: 48%;
width: 38%;
*/
height: 5px;
margin: -8px 0px 0px 0px;
width: 36%;
}
article#cuadro12_menu {
/*
padding: 4px 4px 4px 20px;
margin: -70px 0px 0px 0px;
background-color: #4B6AA9;
width: 61%;
*/
margin: -77px 0px 0px 0px;
width: 63%;
}
.art-menu {
/*
menu
margin: -1px 0px 10px 13px;
margin: -1px 0px 10px 5px;
margin: -1px 0px 10px 13px;
*/
margin: -1px 0px 10px 50px;
}
/*
manejo de Responsive Web Design (media cuery 1)
@media screen and (min-width: 921px) and (max-width: 1080px) {
@media screen and (min-width: 921px) and (max-width: 924px) {
*/
@media screen and (max-width: 1024px) { /* Negro */
section#titcontenedor {
/*
background: linear-gradient(to right, #34466D, #fff, #34466D);
background: #cb1d3e;
background: -webkit-gradient(linear, left top, left bottom, from(#06248d), to(#ffffff));
background: -moz-linear-gradient(top, #06248d, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#06248d', endColorstr='#ffffff');
*/
background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
background: -moz-linear-gradient(top, #000030, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
border-radius: 0px;
margin: 0px 5px 5px 5px;
width: 100%; /* ancho del headar (titulo) */
height: 150px;
}
section#principal {
/*
*/
display:block;
margin: 0px 0px 0px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro1_tit, article#cuadro2_tit, article#cuadro3_tit {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 100%;
margin: 0px;
min-height: 110px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro1_tit {
/*
background-color: #AB2525;
*/
margin: 0px 0px 10px 0px;
width: 9%;
}
article#cuadro2_tit {
/*
background-color: #4B6AA9;
width: 26%;
*/
margin: 0px 0px 10px 0px;
min-height: 140px;
width: 46%;
}
article#cuadro3_tit {
/*
background-color: #C9471C;
width: 63%;
*/
margin: 0px 0px 10px 0px;
min-height: 80px;
width: 43%;
}
#wlogo {
/*
*/
margin: 5px 0px 10px 4px;
width: 85%; /* ancho del logo (titulo) */
height: 80px;
}
.titulo_principal {
/*
Salon de Belleza Leticia Prado
font-family: Georgia, "Times New Roman", Times, serif;
margin: 10px 10px 10px 24px;
margin: 10px 10px 10px 14px;
color: #000;
*/
color: #fff;
font-size: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
margin: 10px 10px 10px -70px;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
.sub_titulo {
/*
Autoridad en Belleza
text-align:center;
margin: 0px 16px 21px 35px;
margin: 0px 16px 21px 25px;
color: #b20808;
*/
color: #000;
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0px 16px 21px -55px;
padding: 0px 5px 5px 5px;
/* trabajar el reflejo del sub-titulo.
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
ul.demo1{ /* initial CSS for demo 1 (before it's animated) */
/*
margin: -15px 0px 0px 266px;
margin: -30px 0px 0px 66px;
margin: -15px 0px 0px 66px;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
list-style:none; /* le quito los puntos al li */
color: #fff;
font-size: 12px;
margin: 15px 0px 0px 66px;
}
section#secundario {
/*
*/
display:block;
margin: 0px 0px 10px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro11_menu, article#cuadro12_menu {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 46%;
margin: 0px;
height: 60px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro11_menu {
/*
background-color: #AB2525;
width: 35%;
*/
height: 5px;
margin: -8px 0px 0px 0px;
width: 15%;
}
article#cuadro12_menu {
/*
margin: -70px 0px 0px 0px;
background-color: #fff;
width: 64%;
*/
margin: -66px 0px 0px 5px;
width: 84%;
}
.art-menu {
/*
menu
margin: -10px 0px 10px 46px;
*/
margin: -10px 0px 10px 100px;
}
}
/* manejo de Responsive Web Design (media cuery 2)... Importante el nombre es HEADAR no HEADER */
@media screen and (max-width: 768px) { /* Rojo */
section#titcontenedor {
/*
margin: 0px 5px 350px 5px;
margin: 0px 5px 5px 5px;
background: linear-gradient(to right, #34466D, #fff, #34466D);
background: #cb1d3e;
*/
background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
background: -moz-linear-gradient(top, #000030, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
border-radius: 0px;
margin: -10px 5px 5px 5px;
width: 100%; /* ancho del headar (titulo) */
min-height: 100px;
}
section#principal {
/*
*/
display:block;
margin: 0px 0px 0px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro1_tit, article#cuadro2_tit, article#cuadro3_tit {
/*
background-color: #fff;
min-height: 110px;
*/
border-radius: 0px;
display: inline-block;
width: 100%;
margin: 0px;
min-height: 110px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro1_tit {
/*
min-height: 80px;
background-color: #AB2525;
*/
margin: 0px 0px 10px 0px;
height: 80px;
width: 9%;
}
article#cuadro2_tit {
/*
min-height: 80px;
width: 36%;
background-color: #4B6AA9;
*/
margin: 0px 0px 10px 0px;
height: 80px;
width: 34%;
}
article#cuadro3_tit {
/*
min-height: 80px;
width: 53%;
background-color: #C9471C;
*/
margin: 0px 0px 10px 0px;
height: 80px;
width: 55%;
}
#wlogo {
/*
margin: 5px 0px 10px 4px;
*/
margin: 15px 0px 10px 4px;
width: 85%; /* ancho del logo (titulo) */
height: 60px;
}
.titulo_principal {
/*
Salon de Belleza Leticia Prado
font-size: 26px;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 3px 10px 10px 4px;
margin: 13px 10px 10px 4px;
color: #FF0000;
*/
color: #fff;
font-size: 24px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
margin: 18px 10px 10px 4px;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
.sub_titulo {
/*
Autoridad en Belleza
text-align:center;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 18px 16px 21px 20px;
margin: 5px 16px 21px 20px;
color: #b20808;
*/
color: #000;
font-size: 13px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 10px 16px 21px 20px;
padding: 0px 5px 5px 5px;
/* trabajar el reflejo del sub-titulo.
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
ul.demo1{ /* initial CSS for demo 1 (before it's animated) */
/*
margin: 10px 0px 0px 50px;
margin: 10px 0px 0px 0px;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
list-style:none; /* le quito los puntos al li */
color: #fff;
font-size: 12px;
margin: 10px 0px 10px 0px;
}
section#secundario {
/*
*/
display:block;
margin: 0px 0px 10px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro11_menu, article#cuadro12_menu {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 46%;
margin: 0px;
height: 60px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro11_menu {
/*
background-color: #AB2525;
*/
height: 5px;
margin: -8px 0px 0px 0px;
width: 1%;
}
article#cuadro12_menu {
/*
margin: -70px 0px 0px 0px;
margin: -66px 0px 0px 5px;
background-color: #212121;
*/
margin: -10px 0px 0px 5px;
width: 92%;
}
.art-menu {
/*
menu
margin: -10px 0px 10px 46px;
*/
margin: -20px 0px 10px 5px;
}
}
/* manejo de Responsive Web Design (media cuery 3) */
@media screen and (max-width: 640px) { /* Celeste */
section#titcontenedor {
/*
margin: 0px 5px 350px 5px;
margin: 0px 5px 5px 5px;
background: linear-gradient(to right, #3686BE, #fff, #3686BE);
background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
background: -moz-linear-gradient(top, #34466D, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34466D', endColorstr='#ffffff');
background: #cb1d3e;
*/
background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
background: -moz-linear-gradient(top, #000030, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
border-radius: 0px;
margin: -10px 5px 5px 5px;
width: 100%; /* ancho del headar (titulo) */
height: 100px;
}
section#principal {
/*
*/
display:block;
margin: 0px 0px 0px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro1_tit, article#cuadro2_tit, article#cuadro3_tit {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 100%;
margin: 0px;
min-height: 110px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro1_tit {
/*
background-color: #AB2525;
*/
margin: 0px 0px 10px 0px;
min-height: 60px;
width: 9%;
}
article#cuadro2_tit {
/*
width: 26%;
margin: 0px 0px 10px 0px;
background-color: #4B6AA9;
*/
margin: 0px 0px 20px 0px;
min-height: 60px;
width: 36%;
}
article#cuadro3_tit {
/*
width: 63%;
background-color: #C9471C;
*/
margin: 0px 0px 10px 0px;
min-height: 60px;
width: 53%;
}
#wlogo {
/*
margin: 5px 0px 10px 4px;
*/
margin: 15px 0px 10px 4px;
width: 85%; /* ancho del logo (titulo) */
height: 40px;
}
.titulo_principal {
/*
Salon de Belleza Leticia Prado
margin: 59px 10px 10px 44px;
margin: 10px 10px 10px 6px;
font-size: 26px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #0056B2;
*/
color: #fff;
font-size: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
margin: 20px 10px 10px 6px;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
.sub_titulo {
/*
Autoridad en Belleza
text-align:center;
margin: 18px 16px 21px 20px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #b20808;
*/
color: #000;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 10px 16px 21px 10px;
padding: 0px 5px 5px 5px;
/* trabajar el reflejo del sub-titulo.
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
ul.demo1{ /* initial CSS for demo 1 (before it's animated) */
/*
margin: -25px 0px 0px 30px;
margin: -15px 0px 0px 100px;
margin: -5px 0px 0px 40px;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
list-style:none; /* le quito los puntos al li */
color: #fff;
font-size: 12px;
margin: 15px 0px 0px 0px;
}
section#secundario {
/*
*/
display:block;
margin: 0px 0px 10px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro11_menu, article#cuadro12_menu {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 46%;
margin: 0px;
height: 50px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro11_menu {
/*
background-color: #AB2525;
*/
height: 5px;
margin: -8px 0px 0px 0px;
width: 0.5%;
}
article#cuadro12_menu {
/*
margin: -70px 0px 0px 0px;
margin: -66px 0px 0px 5px;
background-color: #212121;
*/
margin: -28px 0px 0px 0px;
width: 97%;
}
.art-menu {
/*
menu
*/
margin: -10px 0px 10px 18px;
}
}
/* manejo de Responsive Web Design (media cuery 4) */
@media screen and (max-width: 480px) { /* Plomo */
section#titcontenedor {
/*
margin: 0px 5px 350px 5px;
margin: 0px 5px 5px 5px;
background: linear-gradient(to right, #3686BE, #fff, #3686BE);
background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
background: -moz-linear-gradient(top, #34466D, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34466D', endColorstr='#ffffff');
background: #cb1d3e;
height: 180px;
*/
background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
background: -moz-linear-gradient(top, #000030, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
border-radius: 0px;
margin: -10px 5px 5px 5px;
width: 100%; /* ancho del headar (titulo) */
height: 120px;
}
section#principal {
/*
*/
display:block;
margin: 0px 0px 0px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro1_tit, article#cuadro2_tit, article#cuadro3_tit {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 100%;
margin: 0px;
min-height: 110px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro1_tit {
/*
background-color: #AB2525;
*/
margin: 0px 0px 10px 0px;
min-height: 60px;
width: 9%;
}
article#cuadro2_tit {
/*
background-color: #4B6AA9;
*/
margin: 0px 0px 20px 0px;
min-height: 60px;
width: 34%;
}
article#cuadro3_tit {
/*
background-color: #C9471C;
*/
margin: 0px 0px 10px 0px;
min-height: 60px;
width: 55%;
}
#wlogo {
/*
margin: 5px 0px 10px 4px;
*/
margin: 15px 0px 10px 4px;
width: 85%; /* ancho del logo (titulo) */
height: 40px;
}
.titulo_principal {
/*
Salon de Belleza Leticia Prado
margin: 59px 10px 10px 44px;
margin: 8px 10px 10px 4px;
font-size: 26px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #424242;
margin: 15px 10px 10px 4px;
*/
color: #fff;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
margin: 15px 10px 10px -4px;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
.sub_titulo {
/*
Autoridad en Belleza
text-align:center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #b20808;
margin: 5px 16px 0px 4px;
*/
color: #000;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 5px 16px 0px -10px;
padding: 0px 5px 5px 5px;
/* trabajar el reflejo del sub-titulo.
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
ul.demo1{ /* initial CSS for demo 1 (before it's animated) */
/*
margin: -25px 0px 0px 2px;
margin: -10px 0px 0px 2px;
margin: 20px 0px 0px -45px;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
list-style:none; /* le quito los puntos al li */
color: #fff;
font-size: 10px;
margin: 20px 0px 0px -35px;
}
section#secundario {
/*
*/
display:block;
margin: 0px 0px 10px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro11_menu, article#cuadro12_menu {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 46%;
margin: 0px;
height: 50px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro11_menu {
/*
background-color: #AB2525;
*/
height: 5px;
margin: -8px 0px 0px 0px;
width: 0.5%;
}
article#cuadro12_menu {
/*
margin: -70px 0px 0px 0px;
margin: -66px 0px 0px 5px;
background-color: #212121;
*/
height: 250px;
margin: -28px 0px 0px 0px;
width: 97%;
}
.art-menu {
/*
menu
*/
margin: -10px 0px 10px 18px;
}
}
/* manejo de Responsive Web Design (media cuery 5) */
@media screen and (max-width: 320px) { /* Blanco */
section#titcontenedor {
/*
margin: 20px 5px 5px 5px;
background: linear-gradient(to right, #3686BE, #fff, #3686BE);
background: -webkit-gradient(linear, left top, left bottom, from(#34466D), to(#ffffff));
background: -moz-linear-gradient(top, #34466D, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#34466D', endColorstr='#ffffff');
background: #cb1d3e;
height: 236px;
*/
background: -webkit-gradient(linear, left top, left bottom, from(#000030), to(#ffffff));
background: -moz-linear-gradient(top, #000030, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000030', endColorstr='#ffffff');
border-radius: 0px;
margin: 0px 5px 5px 5px;
width: 100%; /* ancho del headar (titulo) */
height: 150px;
}
section#principal {
/*
*/
display:block;
margin: 0px 0px 0px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro1_tit, article#cuadro2_tit, article#cuadro3_tit {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 100%;
margin: 0px;
min-height: 110px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro1_tit {
/*
background-color: #AB2525;
*/
margin: 0px 0px 10px 0px;
min-height: 35px;
width: 12%;
}
article#cuadro2_tit {
/*
background-color: #4B6AA9;
*/
margin: 0px 0px 10px 0px;
min-height: 35px;
width: 86%;
}
article#cuadro3_tit {
/*
background-color: #C9471C;
*/
margin: -10px 0px 10px 0px;
min-height: 70px;
width: 99%;
}
#wlogo {
/*
height: 80px;
*/
margin: 5px 0px 0px 4px;
width: 130%; /* ancho del logo (titulo) */
height: 40px;
}
.titulo_principal {
/*
Salon de Belleza Leticia Prado
margin: 59px 10px 10px 44px;
font-size: 26px;
font-family: Georgia, "Times New Roman", Times, serif;
*/
color: #fff;
font-size: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
margin: 10px 10px 0px 4px;
text-align:center;
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
.sub_titulo {
/*
Autoridad en Belleza
text-align:center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #b20808;
color: #fff;
*/
color: #000;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 8px 16px 0px 20px;
padding: 0px 5px 5px 5px;
/* trabajar el reflejo del sub-titulo.
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
-webkit-box-reflect: below 5px
-webkit-gradient(linear, left top, left bottom,
from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px;
background: -webkit-gradient(linear, left top, left bottom,
from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));
}
ul.demo1{ /* initial CSS for demo 1 (before it's animated) */
/*
color: #fff;
margin: -30px 0px 0px 20px;
*/
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
list-style:none; /* le quito los puntos al li */
color: #000;
font-size: 11px;
margin: 0px 0px 0px 5px;
}
section#secundario {
/*
*/
display:block;
margin: 0px 0px 10px 0px;
width: 100%; /* ancho del header (titulo) */
min-height: 100px;
}
article#cuadro11_menu, article#cuadro12_menu {
/*
background-color: #fff;
*/
border-radius: 0px;
display: inline-block;
width: 46%;
margin: 0px;
height: 50px;
opacity: 1;
vertical-align: top;
/* vertical-align: middle; */ /* en medio del bloque */
/* regresa a su sitio easy (lentamente) */
-ms-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
article#cuadro11_menu {
/*
background-color: #AB2525;
*/
height: 5px;
margin: -8px 0px 0px 0px;
width: 0.5%;
}
article#cuadro12_menu {
/*
margin: -70px 0px 0px 0px;
margin: -66px 0px 0px 5px;
background-color: #212121;
*/
height: 250px;
margin: -10px 0px 0px -15px;
width: 102%;
}
.art-menu {
/*
menu
*/
margin: -10px 0px 10px 10px;
}
}