/********************************************* SECCION GENERAL ****************************************/

*{margin:0; padding: 0;  font-size: 16px;font-family: "aleobold"; }
body{width:100%; min-width: 480px; height: 2880px; background-color: rgba(222,222,222,1); margin: auto 0;}

/********************************************* CONTENEDOR PRINCIPAL ****************************************/
.container{width: 100%; min-width: 480px; overflow: hidden; height:100%;  position: relative; margin:0; padding:0; background-color: rgba(222,222,222,1);  }


/********************************************* SECCION HEADER ****************************************/
#Leoencabezado{width: 100%;  height: 140px; min-width: 480px; background-color: rgba(0,0,0,.9); position: fixed; top:0; left: 0; z-index: 60; box-shadow: -1px 4px 6px 0px rgba(0,0,0,0.56);}

.logo{width: 180px; height: 120px; position: absolute; left: 10%; top: 10px; }
.logo img{width: 100%; height: 100%;}



#Leomenu{width: 50%; height: 50px; position: absolute; top: 45px; right: 10%;}
#Leomenu ul{list-style: none; width: 100%; height: 100%;}
#Leomenu ul li{ float: right; margin-right: 50px; border-left:1px solid rgba(233,19,236,.6); }
#Leomenu ul li a{display: inline-block;  padding: 10px; font-size: 1.1em; text-decoration: none; color: rgba(233,19,236,1);}
#Leomenu ul li a:hover{color: rgba(233,19,236,.5); }
#Leomenu ul li:hover{border-left:1px solid rgba(233,19,236,.3);}
#Leomenu ul li:active{border-left:1px solid rgba(233,19,236,1);}

.activo{}

.btn-menu-responsive{display: none;}


/********************************************* SECCION VISTAS ****************************************/
.vista1{width: 100%; height: 5px;  min-width: 480px; background-color: rgba(0,0,0,.8); position: fixed; top:5px; left: 0; z-index:30; }
.vista2{width: 100%;  height: 10px; min-width: 480px; position: relative; background-color: rgba(0,0,0,.8); top:-10px; border-bottom: 1px solid rgba(0,0,0,.5);}


/********************************************* SECCION SLIDER ****************************************/
.over{position: absolute; top:0; left: 0; width: 100%; height: 600px; min-width: 480px; background:url(../img/overlay222.png) repeat; z-index: 20}
/*.slideshow_intro, .slideshow_intro:after{position: relative; width: 96%; height: 600px; overflow: hidden; z-index: 10; left: 2% }*/
.slideshow_intro, .slideshow_intro:after{position: relative; width: 100%; height: 600px; overflow: hidden; z-index: 10; left: 0% }

.slideshow_intro li span{width: 100%; height: 100%; position: absolute; top:0; left: 0; background-size: cover; background-position: 50% 50%; background-repeat: none;opacity: 0; z-index: 0;-webkit-backface-visibility: hidden;-webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s;}

.slideshow_intro li:nth-child(1) span {background-image: url(../img/portada.jpg);} 
.slideshow_intro li:nth-child(2) span {background-image: url(../img/portada2.jpg);-webkit-animation-delay: 6s;-moz-animation-delay: 6s;-o-animation-delay: 6s;-ms-animation-delay: 6s;animation-delay: 6s;}
.slideshow_intro li:nth-child(3) span {background-image: url(../img/portada3.jpg);-webkit-animation-delay: 12s;-moz-animation-delay: 12s;-o-animation-delay: 12s;-ms-animation-delay: 12s;animation-delay: 12s;}
.slideshow_intro li:nth-child(4) span {background-image: url(../img/portada.jpg);-webkit-animation-delay: 18s;-moz-animation-delay: 18s;-o-animation-delay: 18s;-ms-animation-delay: 18s;animation-delay: 18s;}
.slideshow_intro li:nth-child(5) span {background-image: url(../img/portada2.jpg);-webkit-animation-delay: 24s;-moz-animation-delay: 24s;-o-animation-delay: 24s;-ms-animation-delay: 24s;animation-delay: 24s;}
.slideshow_intro li:nth-child(6) span {background-image: url(../img/portada3.jpg);-webkit-animation-delay: 30s;-moz-animation-delay: 30s;-o-animation-delay: 30s;-ms-animation-delay: 30s;animation-delay: 30s;}


/********************************************* SECCION PRINCIPAL ****************************************/
.Leosecciones {width: 100%;  height:450px; position: absolute; top:400px; left: 0;  z-index: 50; overflow: hidden; }

#home,  #Video{width: 80%; height:450px; position: absolute; top:0px; left: -100%; background-color: rgba(0,0,0,.9); z-index: 50; border-radius: 5px; box-shadow:  0px 0px 11px 0px rgba(52,55,61,1); overflow: hidden; }






/********************************************* SECCION CONTACTO **************************************/
.formulario {width: 550px; height: 90%; position: absolute; top:5%; left: 100px; }
#secFormulario{width: 100%; height: 100%; position: absolute; top:0; left: 0; margin:0; padding:0; }
#secFormulario h1 {color:rgba(255,255,255,.7); font-family: "aleobold"; margin-left: 5%;}
#form{width: 90%; height: 80%; left: 5%; position: absolute; top:70px;}
#form ul{list-style: none}
#form ul li{margin-bottom: 5px;}
#form input, textarea {background-color: rgba(0,0,0,.4); border-radius: 3px; height: 35px; border: 1px solid rgba(162,167,180,.6); font-size: .8em; padding: 5px; color:rgba(255,255,255,1); font-family:"aleoregular";  -webkit-transition:width .5s;}
#form textarea{height: 180px; width: 80%}
#form input{width: 40%}


#form input:hover{width: 45%;border: 1px solid rgba(162,167,180,.6); }
#form textarea:hover{width: 85%;border: 1px solid rgba(162,167,180,.6); }

#form input:focus{width: 45%;border: 1px solid rgba(162,167,180,.8);   outline: none;box-shadow:0 2px 3px 0 rgba(0,0,0,.1) inset,0 2px 7px 0 rgba(0,0,0,.2);}
#form textarea:focus{width: 85%;border: 1px solid rgba(162,167,180,.8);  outline: none;box-shadow:0 2px 3px 0 rgba(0,0,0,.1) inset,0 2px 7px 0 rgba(0,0,0,.2);}

#form input:active{width: 45%;border: 1px solid rgba(162,167,180,.6);outline: none;box-shadow:0 2px 3px 0 rgba(0,0,0,.1) inset,0 2px 7px 0 rgba(0,0,0,.2);}
#form textarea:active{width: 85%;border: 1px solid rgba(162,167,180,.6); outline: none; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset, 0 2px 7px 0 rgba(0,0,0,.2); }

#btnEnviar{background-color: rgba(0,0,0,.4); border: none; box-shadow: 0px 0px 3px 0px rgba(162,167,180,0.7); -webkit-transition:background-color .5s; }
#btnEnviar:hover{background-color: rgba(0,0,0,.4);box-shadow: 0px 0px 3px 0px rgba(0,0,0,.4); }
#btnEnviar:active{ border: none; outline: none;box-shadow: 0px 0px 3px 0px rgba(162,167,180,0.7); }


.ubicacion{width: 550px; height: 90%; position: absolute; top:5%;  right: 100px; }
.ubicacion h1{color:rgba(255,255,255,.7); font-family: "aleobold";  }
.mapa{width: 100%; height: 250px; position: absolute; top:80px; border: 1px solid rgba(0,0,0,.4); box-shadow: 0px 0px 3px 0px rgba(0,0,0,.4); border-radius: 4px;}
#map{width: 100%; height: 100%;border: 1px solid rgba(162,167,180,.8); border-radius: 4px;}
#direccion{width: 250px; font-family: "aleoregular"; font-size: .9em; color:rgba(255,255,255,1); text-align: justify; position: absolute; bottom: 30px;}
.infocontacto{width: 300px; position: absolute; top: 180px; left:200px;  }
.infocontacto p{font-size: .9em; color:rgba(255,255,255,1); font-family: "aleobold"; padding: 0px; margin: 4px;}

.ubicacion img {width: 180px; height: 180px; border-radius: 6px;}
.ubicacion span{position: absolute; top: 330px; left: 0; text-align: justify; font-size: .9em; color:rgba(255,255,255,1); font-family: "aleobold"; padding: 0px; margin: 4px;}
.infocontacto p i {color: green; padding: 5px; font-size: 1.4em; font-weight: bold}

.ubicacion .imgVdaMito{width: 550px; height: 280px; border-radius: 6px;}

/********************************************* SECCION HOROSCOPOS **************************************/

.LeoHoroscopos{width: 80%; height:500px; min-width: 480px; position: absolute; top:930px; left: 10%; }


.contSignos, .contSignos2{width: 90%; height: 200px; position: relative; left: 5%;}
.contSignos2 {top:50px; }
.Signos{width: 15%; height: 200px; margin-right: 20px; position: absolute; top:0px;  border-radius: 6px;  box-shadow: 0px 0px 3px 0px rgba(233,19,236,.4); }
.Signos span a{position: absolute; display: inline-block; width: 100%; height: 40px;  bottom: 20px; text-align: center; color: rgba(62,62,62,1); font-family: "alex_brushregular"; font-size: 2em; font-weight: bold; cursor: pointer; text-decoration: none; z-index: 10; background: rgba(233,19,236,.5);}
.Signos span a:hover{color:rgba(62,62,62,.8);}
#logoSigno{width: 90%; height: 94%; position: absolute; top: 5%; left: 3%; }
#Signo1:last-child{margin-right: 0;}

#Signo1{left: 0}
#Signo2{left: 17%;}
#Signo3{left: 34%}
#Signo4{left: 51%}
#Signo5{left: 68%}
#Signo6{left: 85%}

.logoSigno{position: absolute; width: 60px; height: 60px; border: 1px solid  rgba(233,19,236,1); border-radius: 5px; top: 10px; left: 10px; text-align: center;}
.logoSigno img{width: 90%; height: 90%; padding: 5px; }

.Signos img {opacity: .3}
.logoSigno img{opacity: 1}

/********************************************* SECCION RECETAS **************************************/

.leoRecetas{width: 100%; height: 400px; min-width:480px; background: rgba(233,19,236,.9); position: absolute; top: 2000px;  box-shadow: 0px 0px 10px 0px rgba(0,0,0,.4);  background-image: url("../img/cosmo2.png"); background-size: 1900px 1080px; background-attachment: fixed;}
.contRecetas{width: 90%; height: 400px; position: absolute; left: 5%; top:0; }
.mariposa, .mariposa2{position: absolute; bottom: 40px; left: 50px;}
.mariposa2{display: none; bottom: 30px; left: 60px}
.receta1, .receta2, .receta3, .receta4{width: 450px; height: 80px;  position: absolute; left: 15%; top: 30px; text-align: center;}
.receta1 img{width: 80; height: 80px;  position: absolute; left: 0px; top: 0px;padding-right: 30px}
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 30px}
.receta1 span a, .receta2 span a, .receta3 span a, .receta4 span a{ color: rgba(255,255,255,1); font-size: 2.5em; font-family: "alex_brushregular"; display: inline-block; padding: 10px;  text-shadow: 3px 3px 20px rgba(255, 255, 255, 1); }
.receta2{left:30%; top: 160px;}
.receta3{left: 70%; top: 90px;}
.receta4{left: 50%; top: 280px;}


  
/********************************************* SECCION Sueños **************************************/
.leoSuenos{width: 100%; height: 180px; min-width:480px; position: absolute; top: 2480px; text-align: center;}
.contleosuenos{width: 80%;height: 180px; position: absolute; top:0; left: 10%;  border-bottom: 2px solid rgba(233,19,236,1)}
.leoSuenos span, .leoSuenos p{font-family: "alex_brushregular";  font-size: 2.8em; font-weight: bold; text-shadow: 2px 2px 12px rgba(104, 104, 104, 1); }
.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{display: block; border: 1px solid rgba(233,19,236,.6); width: 250px; padding: 8px; border-radius: 5px; position: absolute; left: 66%; color: rgba(0,0,0,1); font-family: "aleobold"; text-decoration: none; webkit-transition: background 1s; webkit-transition: color 1s;}
.leoSuenos a:hover{background: rgba(233,19,236,.6); color: rgba(255,255,255,1)}




/********************************************* SECCION Video **************************************/

.Video, .Video2, .Video3{width: 330px; height: 210px;  position: absolute; border-radius: 5px; background: rgba(233,19,236,.8); top:50px; left: 50px}
.video a, .video2 a, .video3 a {display: block; width: 320px; height: 200px; position: absolute; top:5px; left: 5px}
.imgVideo {width: 320px; height: 200px; position: absolute; top:5px; left: 5px; border-radius: 5px; }
.btnPlay{position: absolute;z-index: 10; width: 60px; height: 40px; opacity: .8; bottom: 10px; right: 10px;}
.Video span, .Video2 span, .Video3 span {display: inline-block; position: absolute;top: 220px; color: rgba(222,222,222,1); font-family: "aleoregular"; font-size: 1em}
.Video2 {left: 440px}
.Video3 {left: 830px;}




/********************************************* SECCION FOOTER ****************************************/
#Leofooter{ width: 80%; height: 50px; min-width:480px; position: absolute; top:2680px; left: 10%; background-color: rgba(0,0,0,1); border-radius: 5px; }
#Leofooter span{font-family: "aleobold"; font-size: .7em; color:rgba(246,246,246,1); display: inline-block; padding: 20px;}

.iconsocials{width: 300px; height: 100%; position: absolute; top: 0; right: 20px;}
.iconcircle{ width: 30px; height: 30px; margin-top:10px; margin-right:15px; border-radius: 50%; float: right; background: rgba(0,0,0,.2); text-align: center; box-shadow: 0px 0px 1px 1px rgba(0,0,0,.5); -webkit-transition: background .5s;}
.iconcircle a {display: block; padding: 5px; color:rgba(246,246,246,1); font-size: .9em;}
.iconcircle:hover{background: rgba(143,150,166,1); box-shadow: 0px 0px 2px 2px rgba(143,150,166,.5) }


/********************************************* SECCION INFO HOROSCOPOS ****************************************/
.txtHoroscopo{width: 60%; height:450px;  position: absolute; top: 930px; left: 30%;font-family: "aleobold";}
.txtHoroscopo h2{color: rgba(233,19,236,.6); font-family: "aleobold"; font-weight: bold;}
.txt1, .txt2, .txt3{position: absolute;}
.txt1 p{ text-align: justify;}
.txt1 span{display: inline-block; color: rgba(233,19,236,1); font-weight: bold; font-size: .9em; padding-right: 5px;text-align: justify;}
.txt1 p{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em; text-align: justify;}


.txt2{left: 0; top: 150px;width: 100%; border-top: 2px solid rgba(233,19,236,1);  text-align: justify;}
.txt2 p{color: rgba(80,80,80,1); font-size: 1.2em; padding-top: 10px;}

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}




/********************************************* SECCION VIDEO RECETAS, HOROSCOPOS ****************************************/
.videoLeo{width: 90%; height: 80%; position: absolute; left: 0%; top: 10%}


/***********************  SECCION FONTS EXTERNAS    ****************/
@font-face {
    font-family: 'aleobold';
    src: url('../fonts/aleo-bold-webfont.eot');
    src: url('../fonts/aleo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aleo-bold-webfont.woff2') format('woff2'),
         url('../fonts/aleo-bold-webfont.woff') format('woff'),
         url('../fonts/aleo-bold-webfont.ttf') format('truetype'),
         url('../fonts/aleo-bold-webfont.svg#aleobold') format('svg');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'aleoregular';
    src: url('../fonts/aleo-regular-webfont.eot');
    src: url('../fonts/aleo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aleo-regular-webfont.woff2') format('woff2'),
         url('../fonts/aleo-regular-webfont.woff') format('woff'),
         url('../fonts/aleo-regular-webfont.ttf') format('truetype'),
         url('../fonts/aleo-regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'alex_brushregular';
    src: url('../fonts/alexbrush-regular-webfont.eot');
    src: url('../fonts/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/alexbrush-regular-webfont.woff2') format('woff2'),
         url('../fonts/alexbrush-regular-webfont.woff') format('woff'),
         url('../fonts/alexbrush-regular-webfont.ttf') format('truetype'),
         url('../fonts/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/********************************************* SECCION ANIMACIONES ****************************************/

@-webkit-keyframes imageAnimation { 
   0%   {opacity: 0;-webkit-animation-timing-function: ease-in;}
    8%   {opacity: 1;-webkit-transform: scale(1.05);-webkit-animation-timing-function: ease-out;}
    17%  {opacity: 1;-webkit-transform: scale(1.1);}
    22%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-20%);}
    25%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-100%);}
    100% { opacity: 0 }}

@-moz-keyframes imageAnimation { 
   0%   {opacity: 0;-webkit-animation-timing-function: ease-in;}
    8%   {opacity: 1;-webkit-transform: scale(1.05);-webkit-animation-timing-function: ease-out;}
    17%  {opacity: 1;-webkit-transform: scale(1.1);}
    22%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-20%);}
    25%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-100%);}
    100% { opacity: 0 }}

@-o-keyframes imageAnimation { 
   0%   {opacity: 0;-webkit-animation-timing-function: ease-in;}
    8%   {opacity: 1;-webkit-transform: scale(1.05);-webkit-animation-timing-function: ease-out;}
    17%  {opacity: 1;-webkit-transform: scale(1.1);}
    22%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-20%);}
    25%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-100%);}
    100% { opacity: 0 }}

@-ms-keyframes imageAnimation { 
   0%   {opacity: 0;-webkit-animation-timing-function: ease-in;}
    8%   {opacity: 1;-webkit-transform: scale(1.05);-webkit-animation-timing-function: ease-out;}
    17%  {opacity: 1;-webkit-transform: scale(1.1);}
    22%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-20%);}
    25%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-100%);}
    100% { opacity: 0 }}

 @keyframes imageAnimation { 
   0%   {opacity: 0;-webkit-animation-timing-function: ease-in;}
    8%   {opacity: 1;-webkit-transform: scale(1.05);-webkit-animation-timing-function: ease-out;}
    17%  {opacity: 1;-webkit-transform: scale(1.1);}
    22%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-20%);}
    25%  {opacity: 0;-webkit-transform: scale(1.1) translateX(-100%);}
    100% { opacity: 0 }}




/********************************************* SECCION RESPONSIVE ****************************************/
@media only screen and  (max-width:480px){
#Leoencabezado{position: relative;}

body{ height: 4280px;}

.logo{left: 2%; top: 10px; }


#Leomenu{display:none; width: 100%; position: relative; top: 140px; left: 0; right: 0; z-index: 60}
#Leomenu ul {width: 100%; float: none; margin: 0; padding: 0;position: relative; z-index: 60}
#Leomenu ul li {position:relative; display: block; width: 100%; height: 40px; background-color: rgba(0,0,0,.6); margin: 1px 0; padding: 8px; }
#Leomenu ul li:last-child {padding: 5px 0 0 5px; }
#Leomenu ul li a {font-size: .9em; padding: 0; padding-left: 15px; }

.btn-menu-responsive{display: block; float: right; width: 50px; height: 50px; border: 1px solid rgba(233,19,236,.6); background-color:rgba(0,0,0,.5); border-radius: 6px; margin: 15px 20px 0 0; text-align: center; color: rgba(233,19,236,.6); position: absolute; right: 35%; top:30px;  box-shadow: 0px 0px 1px 1px rgba(0,0,0,.5); -webkit-transition: background-color .5s;}
.btn-menu-responsive i{display: block; padding: 15px; font-size: 1.2em;}
.btn-menu-responsive:hover{background: rgba(236,19,236,.6); box-shadow: 0px 0px 2px 2px rgba(143,150,166,.5); cursor: pointer; border: 1px solid rgb(246,246,246); color: rgba(255,255,255,1);}

.slideshow_intro li:nth-child(1) span {background-image: url(../img/portadaphone.png);} 
.slideshow_intro li:nth-child(2) span {background-image: url(../img/portadaphone2.png);}
.slideshow_intro li:nth-child(3) span {background-image: url(../img/portadaphone3.png);}
.slideshow_intro li:nth-child(4) span {background-image: url(../img/portadaphone.png);}
.slideshow_intro li:nth-child(5) span {background-image: url(../img/portadaphone2.png);}
.slideshow_intro li:nth-child(6) span {background-image: url(../img/portadaphone3.png);}


.Leosecciones { top:480px; height: 960px;}
#home,  #Video{height:960px; }


.formulario {width: 400px; height: 450px; top:10px; left: 10px; }
#secFormulario h1 { font-size: 1.5em}
#form{width: 90%; height: 80%; left: 5%; position: absolute; top:70px;}
#form input{width: 60%}
#form input:hover{width: 60%;}


.ubicacion{width: 400px; height: 450px; top:470px;  left: 30px; }
.ubicacion h1{font-size: 1.4em }

.infocontacto{top: 230px; left:20px;  }
.infocontacto p{font-size: .9em; color:rgba(255,255,255,1); font-family: "aleobold"; padding: 0px; margin: 4px;}

.ubicacion img {width: 150px; height: 150px; margin-left: 70px}
.ubicacion span{ left: 10px; font-size: .9em; width: 300px}
.ubicacion .imgVdaMito{width: 330px; height: 280px;  border-radius: 6px; position: relative; left: -70px}


.Video, .Video2, .Video3{top:20px; left: 20px}
.Video2 {top: 300px; left: 20px}
.Video3 {top: 580px; left: 20px;}


.LeoHoroscopos{height:1300px;  top:1500px; left: 0px; }
.contSignos, .contSignos2{height: 650px; }
.contSignos2 {top:50px; }
.Signos{width: 200px; height: 200px; }

#Signo1{left: 0; margin-right: 40px;}
#Signo2{left: 210px}
#Signo3{left: 0; top:215px;}
#Signo4{left: 210px; top:215px;}
#Signo5{left: 0; top:430px;}
#Signo6{left: 210px; top:430px;}


.leoRecetas{top: 3520px; }
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 0px}
.receta1 span a, .receta2 span a, .receta3 span a, .receta4 span a{  font-size: 2em; }
.receta1{left: 60px; top: 30px;}
.receta2{left:0; top: 120px;}
.receta3{left: 0; top: 210px;}
.receta4{left: 0; top: 300px;}


.leoSuenos{top: 3950px; text-align: center;}
.contleosuenos{width: 100%; height: 180px;  top:0; left: 0%; }
.leoSuenos span, .leoSuenos p{font-size: 2.4em; }
.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{left: 25%; }



#Leofooter{ top:4150px; width: 100%; left: 0%; }


.txtHoroscopo{width: 80%; top: 1700px; left: 5%; height: 900px;}
.txtHoroscopo h2{padding-bottom: 15px;}


.txt2{position:absolute; top:250px;}
.txt2 p{ padding-top: 50px; }

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}

.videoLeo{width: 90%; height: 80%; position: absolute; left: 0%; top: 10%}

}




@media only screen and (min-width:481px) and (max-width:646px){


body{ height: 3950px;}


.logo{left: 10%; top: 10px; }

#Leomenu{display:none; width: 100%; position: relative; top: 140px; left: 0; right: 0; z-index: 60}
#Leomenu ul {width: 100%; float: none; margin: 0; padding: 0;position: relative; z-index: 60}
#Leomenu ul li {position:relative; display: block; width: 100%; height: 40px; background-color: rgba(0,0,0,.6); margin: 1px 0; padding: 8px; }
#Leomenu ul li:last-child {padding: 5px 0 0 5px; }
#Leomenu ul li a {font-size: .9em; padding: 0; padding-left: 15px; }


.slideshow_intro li:nth-child(1) span {background-image: url(../img/portadaphone.png);} 
.slideshow_intro li:nth-child(2) span {background-image: url(../img/portadaphone2.png);}
.slideshow_intro li:nth-child(3) span {background-image: url(../img/portadaphone3.png);}
.slideshow_intro li:nth-child(4) span {background-image: url(../img/portadaphone.png);}
.slideshow_intro li:nth-child(5) span {background-image: url(../img/portadaphone2.png);}
.slideshow_intro li:nth-child(6) span {background-image: url(../img/portadaphone3.png);}


.Leosecciones { top:480px; height: 960px;}
#home,  #Video{height:960px; }


.formulario {width: 400px; height: 450px; top:10px; left: 10%; }
#secFormulario h1 { font-size: 1.5em}
#form{width: 90%; height: 80%; left: 5%; position: absolute; top:70px;}
#form input{width: 60%}
#form textarea{width: 90%}




#form input:hover{width: 65%;}
#form textarea:hover{width: 95%;}

#form input:focus{width: 60%;}
#form textarea:focus{width: 90%;}

#form input:active{width: 60%;}
#form textarea:active{width: 90%; }



.ubicacion{width: 400px; height: 450px; top:470px;  left: 14%; }
.ubicacion h1{font-size: 1.4em }

.infocontacto{top: 230px; left:20px;}
.infocontacto p{font-size: .9em; color:rgba(255,255,255,1); font-family: "aleobold"; padding: 0px; margin: 4px;}

.ubicacion img {width: 150px; height: 150px; margin-left: 70px}
.ubicacion span{ left: 10px; font-size: .9em; width: 330px}

.ubicacion .imgVdaMito{width: 400px; height: 280px;  border-radius: 6px; position: relative; left: -90px}

.Video, .Video2, .Video3{top:20px; left: 15%}
.Video2 {top: 300px; left: 15%}
.Video3 {top: 580px; left: 15%}


.LeoHoroscopos{height:1300px;  top:1500px; left: 10%;  }
.contSignos, .contSignos2{height: 650px; }
.contSignos2 {top:50px; }
.Signos{width: 200px; height: 200px; }

#Signo1{left: 3%; margin-right: 40px;}
#Signo2{left: 53%}
#Signo3{left: 3%; top:215px;}
#Signo4{left: 53%; top:215px;}
#Signo5{left: 3%; top:430px;}
#Signo6{left: 53%; top:430px;}


.leoRecetas{top: 3220px; }
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 0px}
.receta1 span a, .receta2 span a, .receta3 span a, .receta4 span a{  font-size: 2em; }
.receta1{left: 20%; top: 30px;}
.receta2{left:7%; top: 120px;}
.receta3{left:7%; top: 210px;}
.receta4{left: 7%; top: 300px;}


.leoSuenos{top: 3650px; text-align: center;}
.contleosuenos{width: 100%; height: 180px;  top:0; left: 0%; }
.leoSuenos span, .leoSuenos p{font-size: 2.3em; }
.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{left: 30%; }



#Leofooter{ top:3850px; width: 100%; left: 0%; }


.btn-menu-responsive{display: block; float: right; width: 50px; height: 50px; border: 1px solid rgba(233,19,236,.6); background-color:rgba(0,0,0,.5); border-radius: 6px; margin: 15px 20px 0 0; text-align: center; color: rgba(233,19,236,.6); position: absolute; right: 15%; top:30px;  box-shadow: 0px 0px 1px 1px rgba(0,0,0,.5); -webkit-transition: background-color .5s;}
.btn-menu-responsive i{display: block; padding: 15px; font-size: 1.2em;}
.btn-menu-responsive:hover{background: rgba(236,19,236,.6); box-shadow: 0px 0px 2px 2px rgba(143,150,166,.5); cursor: pointer; border: 1px solid rgb(246,246,246); color: rgba(255,255,255,1);}

.txtHoroscopo{width: 80%; top: 1750px; left: 10%; height: 800px;}
.txtHoroscopo h2{padding-bottom: 15px;}


.txt2 p{ padding-top: 50px;}

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}

.txt2{position: absolute; top: 250px;}
.videoLeo{width: 90%; height: 80%; position: absolute; left: 5%; top: 10%}
}


@media only screen and (min-width:647px) and (max-width:800px){


body{ height: 3950px; }

#Leomenu{display:none; width: 100%; position: relative; top: 140px; left: 0; right: 0; z-index: 60;}
#Leomenu ul {width: 100%; float: none; margin: 0; padding: 0;position: relative; z-index: 60}
#Leomenu ul li {position:relative; display: block; width: 100%; height: 40px; background-color: rgba(0,0,0,.6); margin: 1px 0; padding: 8px; }
#Leomenu ul li:last-child {padding: 5px 0 0 5px; }
#Leomenu ul li a {font-size: .9em; padding: 0; padding-left: 15px; }


.slideshow_intro li:nth-child(1) span {background-image: url(../img/portadaphone.png);} 
.slideshow_intro li:nth-child(2) span {background-image: url(../img/portadaphone2.png);}
.slideshow_intro li:nth-child(3) span {background-image: url(../img/portadaphone3.png);}
.slideshow_intro li:nth-child(4) span {background-image: url(../img/portadaphone.png);}
.slideshow_intro li:nth-child(5) span {background-image: url(../img/portadaphone2.png);}
.slideshow_intro li:nth-child(6) span {background-image: url(../img/portadaphone3.png);}



.btn-menu-responsive{display: block; float: right; width: 50px; height: 50px; border: 1px solid rgba(233,19,236,.6); background-color:rgba(0,0,0,.5); border-radius: 6px; margin: 15px 20px 0 0; text-align: center; color: rgba(233,19,236,.6); position: absolute; right: 15%; top:30px;  box-shadow: 0px 0px 1px 1px rgba(0,0,0,.5); -webkit-transition: background-color .5s;}
.btn-menu-responsive i{display: block; padding: 15px; font-size: 1.2em;}
.btn-menu-responsive:hover{background: rgba(236,19,236,.6); box-shadow: 0px 0px 2px 2px rgba(143,150,166,.5); cursor: pointer; border: 1px solid rgb(246,246,246); color: rgba(255,255,255,1);}


.Leosecciones { top:480px; height: 960px;}
#home,  #Video{height:960px; }


.formulario {width: 400px; height: 450px; top:10px; left: 10%; }
#secFormulario h1 { font-size: 1.6em}
#form{width: 90%; height: 80%; left: 5%; position: absolute; top:70px;}
#form input{width: 60%}
#form textarea{width: 90%}




#form input:hover{width: 65%;}
#form textarea:hover{width: 95%;}

#form input:focus{width: 60%;}
#form textarea:focus{width: 90%;}

#form input:active{width: 60%;}
#form textarea:active{width: 90%; }



.ubicacion{width: 400px; height: 450px; top:470px;  left: 14%; }
.ubicacion h1{font-size: 1.6em }

.infocontacto{top: 230px; left:10px;}
.infocontacto p{font-size: 1em; color:rgba(255,255,255,1); font-family: "aleobold"; padding: 0px; margin: 4px;}

.ubicacion img {width: 150px; height: 150px; margin-left: 30%}
.ubicacion span{ left: 10px; font-size: 1em; width: 400px}

.ubicacion .imgVdaMito{width: 350px; height: 280px;  border-radius: 6px; position: relative; left: -90px}

.Video, .Video2, .Video3{top:20px; left: 15%}
.Video2 {top: 300px; left: 15%}
.Video3 {top: 580px; left: 15%}



.LeoHoroscopos{height:1300px;  top:1500px; left: 10%;  }
.contSignos, .contSignos2{height: 650px; }
.contSignos2 {top:50px; }
.Signos{width: 200px; height: 200px; }

#Signo1{left: 5%; margin-right: 40px;}
#Signo2{left: 56%}
#Signo3{left: 6%; top:215px;}
#Signo4{left: 56%; top:215px;}
#Signo5{left: 6%; top:430px;}
#Signo6{left: 56%; top:430px;}


.leoRecetas{top: 3220px; }
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 0px}
.receta1 span a, .receta2 span a, .receta3 span a, .receta4 span a{  font-size: 2em; }
.receta1{left: 25%; top: 30px;}
.receta2{left:14%; top: 120px;}
.receta3{left:14%; top: 210px;}
.receta4{left: 14%; top: 300px;}


.leoSuenos{top: 3650px; text-align: center;}
.contleosuenos{width: 90%; height: 180px;  top:0; left: 5%; }
.leoSuenos span, .leoSuenos p{font-size: 2.3em; }
.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{left: 34%; }



#Leofooter{ top:3850px; width: 90%; left: 5%; }


.txtHoroscopo{width: 80%; top: 1750px; left: 10%; height: 800px;}
.txtHoroscopo h2{padding-bottom: 15px;}


.txt2 p{ padding-top: 50px;}

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}


.txt2{position: absolute; top: 220px;}
.videoLeo{width: 100%; height: 80%; position: absolute; left: 10%; top: 10%}


}



@media only screen and (min-width:801px) and (max-width:1024px){


body{ height: 3780px;}

#Leomenu{display:none; width: 100%; position: relative; top: 140px; left: 0; right: 0; z-index: 60}
#Leomenu ul {width: 100%; float: none; margin: 0; padding: 0;position: relative; z-index: 60}
#Leomenu ul li {position:relative; display: block; width: 100%; height: 40px; background-color: rgba(0,0,0,.6); margin: 1px 0; padding: 8px; }
#Leomenu ul li:last-child {padding: 5px 0 0 5px; }
#Leomenu ul li a {font-size: .9em; padding: 0; padding-left: 15px; }

.btn-menu-responsive{display: block; float: right; width: 50px; height: 50px; border: 1px solid rgba(233,19,236,.6); background-color:rgba(0,0,0,.5); border-radius: 6px; margin: 15px 20px 0 0; text-align: center; color: rgba(233,19,236,.6); position: absolute; right: 10%; top:30px;  box-shadow: 0px 0px 1px 1px rgba(0,0,0,.5); -webkit-transition: background-color .5s;}
.btn-menu-responsive i{display: block; padding: 15px; font-size: 1.2em;}
.btn-menu-responsive:hover{background: rgba(236,19,236,.6); box-shadow: 0px 0px 2px 2px rgba(143,150,166,.5); cursor: pointer; border: 1px solid rgb(246,246,246); color: rgba(255,255,255,1);}

.Leosecciones { top:480px; height: 960px;}
#home,  #Video{height:960px; }


.ubicacion{top:490px;  left: 15%; }
.ubicacion span{font-size: 1.2em; top: 305px; }
.Video, .Video2, .Video3{top:50px; left: 30%}
.Video2 {top: 350px; left: 30%}
.Video3 {top: 630px; left: 30%}



.LeoHoroscopos{height:1300px;  top:1500px; left: 10%;  }
.contSignos, .contSignos2{height: 650px; }
.contSignos2 {top: -190px; }
.Signos{width: 200px; height: 200px; }

#Signo1{left: 3%; margin-right: 40px;}
#Signo2{left: 36%}
#Signo3{left: 69%; }
#Signo4{left: 3%; top:230px;}
#Signo5{left: 36%; top:230px;}
#Signo6{left: 69%; top:230px;}


.leoRecetas{top: 3000px; }
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 0px}
.receta1 span a, .receta2 span a, .receta3 span a, .receta4 span a{  font-size: 2em; }
.receta1{left: 5%; top: 30px;}
.receta2{left:50%; top: 120px;}
.receta3{left:14%; top: 210px;}
.receta4{left: 50%; top: 300px;}


.leoSuenos{top: 3500px; text-align: center;}
.contleosuenos{width: 80%; height: 180px;  top:0; left: 10%; }
.leoSuenos span, .leoSuenos p{font-size: 2.3em; }
.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{left: 34%; }



#Leofooter{ top:3700px; width: 80%; left: 10%; }


.txtHoroscopo{width: 80%; top: 1750px; left: 10%; height: 650px;}
.txtHoroscopo h2{padding-bottom: 15px;}


.txt2 p{ padding-top: 50px;}

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}

.txt2{position: absolute; top: 220px;}
.videoLeo{width: 100%; height: 400px; position: absolute; left: 0%; top: 0%}


}



@media only screen and (min-width:1025px) and (max-width:1200px){

body{ height: 3780px;}


#Leomenu{width: 100%; right: 0%; }


.Leosecciones { top:480px; height: 960px;}
#home,  #Video{height:960px; }


.ubicacion{top:490px;  left: 15%; }
.ubicacion span{font-size: 1.2em; }
.Video, .Video2, .Video3{top:50px; left: 30%}
.Video2 {top: 350px; left: 30%}
.Video3 {top: 630px; left: 30%}


.LeoHoroscopos{height:1300px;  top:1500px; left: 10%;  }
.contSignos, .contSignos2{height: 650px; }
.contSignos2 {top: -190px; }
.Signos{width: 200px; height: 200px; }

#Signo1{left: 3%; margin-right: 40px;}
#Signo2{left: 36%}
#Signo3{left: 69%; }
#Signo4{left: 3%; top:230px;}
#Signo5{left: 36%; top:230px;}
#Signo6{left: 69%; top:230px;}


.leoRecetas{top: 3000px; }
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 0px}
.receta1 span a, .receta2 span a, .receta3 span a, .receta4 span a{   }
.receta1{left: 5%; top: 30px;}
.receta2{left:50%; top: 120px;}
.receta3{left:14%; top: 210px;}
.receta4{left: 50%; top: 300px;}


.leoSuenos{top: 3500px; text-align: center;}
.contleosuenos{width: 80%; height: 180px;  top:0; left: 10%; }

.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{left: 40%; }



#Leofooter{ top:3700px; width: 80%; left: 10%; }


.txtHoroscopo{width: 80%; top: 1750px; left: 10%; height: 650px;}
.txtHoroscopo h2{padding-bottom: 15px;}

.txt2 p{ padding-top: 50px;}

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}


.txt2{position: absolute; top: 220px;}
.videoLeo{width: 100%; height: 400px; position: absolute; left: 15%; top: 0%}



}



@media only screen and (min-width:1201px) and (max-width:1366px){

body{ height: 3680px;}

#Leomenu{width: 100%; right: 0%; }

.Leosecciones { top:480px; height: 960px;}
#home,  #Video{height:960px; }

.formulario{left: 12%;}
.ubicacion{top:490px;  left: 15%; }
.ubicacion span{font-size: 1.2em; width: 700px; }
.Video, .Video2, .Video3{top:50px; left: 30%}
.Video2 {top: 350px; left: 30%}
.Video3 {top: 630px; left: 30%}

.LeoHoroscopos{height:1300px;  top:1500px; left: 10%;  }
.contSignos, .contSignos2{height: 650px; }
.contSignos2 {top: -190px; }
.Signos{width: 200px; height: 200px; }

#Signo1{left: 3%; margin-right: 40px;}
#Signo2{left: 36%}
#Signo3{left: 69%; }
#Signo4{left: 3%; top:230px;}
#Signo5{left: 36%; top:230px;}
#Signo6{left: 69%; top:230px;}


.leoRecetas{top: 2900px; }
.receta1 span, .receta2 span, .receta3 span, .receta4 span{margin-left: 0px}
.receta1{left: 5%; top: 30px;}
.receta2{left:50%; top: 120px;}
.receta3{left:14%; top: 210px;}
.receta4{left: 50%; top: 300px;}


.leoSuenos{top: 3400px; text-align: center;}
.contleosuenos{width: 80%; height: 180px;  top:0; left: 10%; }

.leoSuenos p{display: inline-block; color: rgba(233,19,236,1)}
.leoSuenos a{left: 40%; }



#Leofooter{ top:3600px; width: 80%; left: 10%; }

.txtHoroscopo{width: 80%; top: 1750px; left: 10%; height: 650px;}
.txtHoroscopo h2{padding-bottom: 15px;}

.txt2 p{ padding-top: 50px;}

.txt3{bottom: 0px; left: 0px}
.txt3 p{display: inline;}
.txt3 span{color: rgba(80,80,80,1); font-weight: bold; font-size: .9em;padding-right: 5px;}
.txt3 p{color: rgba(233,19,236,1); font-weight: bold; font-size: .9em;}

.txt2{position: absolute; top: 220px;}
.videoLeo{width: 100%; height: 400px; position: absolute; left: 15%; top: 0%}

}