/* ----- ----- CSS RESET SHEET ----- ----- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ----- ----- FIN DEL CSS RESET SHEET ----- ----- */


/* ----- Declaramos font a usrar en la página web ----- */
@font-face {
    font-family: Heckney;
    src: url(../fonts/Heckney-40Regular.ttf);
}

/* ----- BODY ----- */
body {
    font-family: Heckney, sans-serif;
}

/* ----- CABECERA ----- */
.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
}

#cabeceraPagina {
    width: 96%;
    padding: 0% 2%;
    height: 70px;
}

.scrolled {
    background-color: /*rgb(183, 10, 106)*/rgb(111, 52, 134);
}

#cabeceraPagina {
    width: 96%;
    padding: 0% 2%;
    height: 70px;
}
#cabeceraPagina>div {
    padding-top: 5px;
    display: inline-block;
}

#mainLogo {
    float: left;
}

#barraNavegacion {
    float: right;
    height: 60px;
}

#navBarBox {
    margin-top: 19px;  /* Para centrar verticalmente el menu de navegación*/
}

/* ----- TITULO ----- */
.mainTitle {
    font-size: 48px;
    text-align: center;
    color: rgb(111, 52, 134);
    display: none;
}

/* ----- BARRA DE NAVEGACIÓN ----- */
/*#phoneNavBar*/.burgerMenu {
    display: none;
}

.mainNavBar {
    text-align: center;
    color: yellow;
    width: 100%;
    /*background-color: aqua;*/
}

/*nav > div {
    border: 1px solid blue;
    width: 100%;
}*/

 nav li {
    position: relative;
    display: inline-block;
    height: 18px;
    margin: 0px;
    padding: 2px 0px;
    font-size: 1.2rem;
 }

 li > ul {
    list-style: none;
    display: none;
    position: absolute;
    top: 19px;
    z-index: 1000;
    background-color: /*rgb(183, 10, 106)*/rgb(111, 52, 134);
    box-shadow: 3px 3px 5px rgba(100, 100, 100, 0.7);
    border-radius: 0px 0px 10px 10px;
 }

 .mainMenu >ul> li > ul {
    width: 220%;
 }

.mainMenu >ul> li > ul > li {
    padding-top: 2px;
    width: 100%;
 }

nav a {
    text-decoration: none;
    /* border-left: 2px solid yellow;
    border-right: 2px solid yellow; */
    color: white;
    margin: 3px 7px;
}

nav li:hover {
    background-color: /*rgb(111, 52, 134)*/rgb(183, 10, 106);
}

nav li:hover ul {
    display: block;
}

/* nav a:first-child {
    border-left-width: 4px;
}

nav a:last-child {
    border-right-width: 4px;
} */

.relleno {
    height: 70px;
}

#cuerpo {
    padding-top: 70px;  /* Espacio reservado a la barra principal */
}

/* ----- BANDERAS -----*/
#seleccionLengua {
    float: right;
    width: 72px;
    height: 60px;
}

.cajaBandera {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 22px;
    margin-left: 4px;
}

#banderaES {
    background-image: url(/imagenes/icono_es.png);
    background-size: cover;
}

#banderaIT {
    background-image: url(/imagenes/icono_it.png);
    background-size: cover;
}

#banderaEN {
    background-image: url(/imagenes/icono_en.png);
    background-size: cover;
}

.cajaBandera a {
    display: block;
    width: 16px;
    height: 16px;
}


/* ----- CAJA PRINCIPAL ----- */
.mainBox {
    text-align: center;
    width: 100%;
    /*height: 500px;*/
}

#cuerpo {
    width: 100%;
    height: 100%;
    /*background: -moz-linear-gradient(top, rgb(111, 52, 134), #FFFFFF);*/
    background-image: url(/imagenes/Foto_Quantum_Splendor_3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: right;
}

/* ----- SECCIÓN PRINCIPAL ----- */
.mainSection {
    float: left;
    width: 80%;
    margin-top: 5px;
}

.article {
    padding: 5px;
}

/* ----- BARRA LATERAL ----- */
aside {
    float: left;
    width: 20%;
    background-color: rgba(221,221,221,0.4);
    border-radius: 10px;
}

.lateralsection {
    padding: 5px;
}

/* ----- SECCIONES ----- */
.fotoConTexto {
    font-size: 1.4em;
    /*background-image: url(/imagenes/Foto_Quantum_Splendor_6.jpg);
    background-position: top center;*/
    background-color: #240856;
    height: fit-content;
    padding: 20px 0px;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 3px #999999;
}

/*#fotoConTexto1 {
    background-position-y: -635px;
    background-position-x: -750px;
}
#fotoConTexto2 {
    background-position-y: -800px;
}

#fotoConTexto3 {
    background-position-y: -1300px;
}*/

.seccionTF, .seccionFT {
    background-color: white;
    padding: 10px 0px;
}

.subseccionTexto {
    float: left;
    width: 60%;
    padding: 0px 4%;
    box-sizing: border-box;
    font-size: 1.2em;
    line-height: 150%;
}

.seccionTF .subseccionTexto {
    padding-left: 6%;
}

.seccionFT .subseccionTexto {
    padding-right: 6%;
}

.seccionTitulo {
    font-weight: bold;
    font-size: 1.4em;
}

.parrafo {
    text-align: left;
    /*padding-top: 10px;*/
}

.subseccionFoto {
    float: left;
    width: 40%;
    padding: 0px 10px;
    box-sizing: border-box;
    height: /*350*/550px;
}

#foto1 {
    background-image: url(/imagenes/Foto_Quantum_Splendor_5.jpg);
    background-size: cover;
    background-position: top center;
    /*height: 400px;*/
}

#foto2 {
    background-image: url(/imagenes/3d-render-medical-background-with-vitruvian-style-male-figure.jpg);
    background-size: cover;
    background-position: top center;
}

#foto3 {
    background-image: url(/imagenes/numerology-concept-composition.jpg);
    background-size: cover;
    background-position: top center;
}

#foto4 {
    background-image: url(/imagenes/registros_main.jpg);
    background-size: cover;
    background-position: top center;
}

.resetFloat {
    clear: both;
    padding: 5px;
}

.saberMas, .pideCita {
    padding: 2px 0px;
    display: inline-block;
}

.seudoBoton {
    display: inline-block;
    width: fit-content;
    text-align: left;
    padding: 5px;
    color: white;
}

.seudoBoton a {
    text-decoration: none;
    color: white;
}

/*#saberMas2 .seudoBoton {
    float: right;
}*/

#saberMas2 .resetFloat {
    padding: 0px;
}

#saberMas1a, #saberMas3a {
    display: none;
    padding: 5px;
}

.saberMas>.seudoBoton {
    background-color: rgb(183, 10, 106);
    border: 1px solid rgb(183, 10, 106);
    border-radius: 10px;
}

.pideCita>.seudoBoton {
    background-color: rgb(111, 52, 134);
    border: 1px solid rgb(111, 52, 134);
    border-radius: 10px;
}

#endMainBox {
    clear: both;
}

/* ----- SECCIÓN 0 ----- */
#seccion0 {
    padding: 5px 0px 35px 0px;
}

#seccion0>p {
    color: white;
    font-size: 30px;
    font-weight: 900;
    padding: 15px 0px;
}

#seccion0 .textoNormal {
    font-size: 20px;
    padding-left: 3%;
    padding-right: 3%;
    line-height: 135%;
}

/* ----- SECCIÓN DE ENLACES ----- */

#tituloAyuda {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 20px 0px;
}

.seccionesAyuda {
    margin: 1%;
    display: inline-block;
    box-sizing: border-box;
    width: 22%;
    height: 300px;
    min-width: 150px;
    max-width: 300px;
    font-size: 1.4rem;
    text-align: center;
    align-content: center;
    vertical-align: middle;
    /*border: 1PX dashed GREY;*/
    
}

.seccionesAyuda {
    text-decoration: none;
    color: white;
    font-weight: 700;
    text-shadow: 3px 3px 3px #999999;
}

#seccionAyuda1 {
    background-image: url(/imagenes/f1-f608cfec-34e7-4e63-b5c0-8d249734ca9b.png);
    background-position: center center;
    background-size: cover;
}

#seccionAyuda2 {
    background-image: url(/imagenes/f2-e4b8bf08-86d1-4741-a608-5609cad17295.png);
    background-position: center center;
    background-size: cover;
}

#seccionAyuda3 {
    background-image: url(/imagenes/f3-19fd5520-6b9f-4b26-b990-d398ea24bab7.png);
    background-position: center center;
    background-size: cover;
}

#seccionAyuda4 {
    background-image: url(/imagenes/f4-18eb3e7f-1af9-4160-ae1f-1ad1f908abe2.png);
    background-position: center center;
    background-size: cover;
}

/* ----- SECCIÓN SUBSCRIPCIÓN -----*/

#subscripcion {
    padding: 20px 0px;
}

.cajaFormulario {
    margin: 20px 25% 0px 25%;
    padding: 40px 0px;
    font-size: 1.2rem;
    text-align: center;
    border: 5px solid rgb(183, 10, 106);
    border-radius: 10px;
}

#cuerpoFormulario {
    padding: 10px;
}

/* ----- PASE DE TESTIMONIOS ----- */

.cajaTestimonio {
    padding: 40px 0px;
    font-size: 1.2rem;
    text-align: center;
    align-content: center;
}

#cuerpoTestimonio {
    padding-top: 20px;
    margin: 20px 25% 20px 25%;
    background-image: url(/imagenes/Foto_Quantum_Splendor_6.jpg);
    background-position: bottom right;
    color: white;
}

#cuerpoTestimonio p {
    padding: 10px 10%;
}

#cuerpoTestimonio i {
    font-style: italic;
    color: #999999;
}

#cuerpoTestimonio>div {
    display: inline-block;
    text-align: left;
    /*border: 1px dotted #AAAAAA;*/
}

#cuerpoTestimonio>div {
    display: none;
    /*animation: testimonio2 25s ease 5s;*/
}

#cuerpoTestimonio>div:nth-child(1) {
    display: inline-block;
    /*animation: testimonio1 25s ease 5s infinite;*/
}

/*#cuerpoTestimonio>div:nth-child(3) {
    display: none;
}

#cuerpoTestimonio>div:nth-child(4) {
    display: none;
}

#cuerpoTestimonio>div:nth-child(5) {
    display: none;
}

#cuerpoTestimonio>div:nth-child(6) {
    display: none;
}*/

/* ----- Definición de animaciones del pase de testimonios ----- */
/*@keyframes testimonio1 {
    0% {display: inline-block;background-color: #444444;}
    20% {display: none;background-color: aqua;}
    100% {display: inline-block;background-color: white;}
}
@keyframes testimonio2 {
    0% {display: none;}
    20% {display: inline-block;}
    40% {display: none;}
}
@keyframes testimonio3 {
    0% {display: none;}
    40% {display: inline-block;}
    60% {display: none;}
}
@keyframes testimonio4 {
    0% {display: none;}
    60% {display: inline-block;}
    80% {display: none;}
}
@keyframes testimonio5 {
    0% {display: none;}
    80% {display: inline-block;}
    100% {display: none;}
}*/

/* ----- PIE DE PÁGINA -----*/

footer {
    background-color: rgb(111, 52, 134);
    color: #BBBBBB;
}

#footerIzq {
    box-sizing: border-box;
    padding: 2%;
    width: 50%;
    float: left;
}

#footerIzq>div {
    padding-bottom: 10px;
}

#footerDx {
    box-sizing: border-box;
    padding: 2%;
    width: 50%;
    float: left;
}

#redInstagram, #redWhatsApp{
    vertical-align: top;
}

.logoRed {
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 5px;
}

.textoRed {
    display: inline-block;
    height: 50px;
    vertical-align: middle;
}

#instagram, #whatsApp{
    text-decoration: none;
    color: white;
}

.mainFooter {
    clear: both;
    text-align: center;
    color: #DDDDDD;
    font-size: 12px;
}


/* ----- MEDIA ----- */

@media (max-width: 825px) {
    .mainTitle {
        font-size: 36px;
    }
    
    #desktopNavBar, .mainMenu {
        display: none;
        background-color: /*rgb(183, 10, 106)*/rgb(111, 52, 134);
        position: relative;
    }

    .mainMenu>ul {
        position: absolute;
        left: -80px;
        background-color: rgb(111, 52, 134);
    }

    nav li {
        display: block;
        width: 200px;
    }

    li > ul {
        position: absolute;
        top: 0px;
        /*left: 180px;*/
        left: -190px;
        /*border-radius: 0px 10px 10px 00px;*/
        border-radius: 10px 0px 0px 10px;
     }

     .mainMenu >ul> li > ul {
        width: 95%;
     }

     nav li > ul > li {
        width: 90px;
     }

    .burgerMenu {
        padding: 4px 7px 3px 7px;
    }

    #phoneNavBar img {
        width: 32px;
    }

    /*#phoneNavBar*/ .burgerMenu {
        display: block;
        /*text-align: left;*/
        text-align: right;
    }

    .subseccionTexto, .subseccionFoto{
        float: none;
        width: 100%;
        padding: 0px 6%;
    }

    .subseccionFoto {
        width: 88%;
        margin: 0px 6%;
    }

    #saberMas1, #saberMas3 {
        display: none;
    }

    #saberMas1a, #saberMas3a {
        display: block;
    }

    /* nav #navBarBox:hover .mainMenu {
        display: block;
        z-index: 500;
    } */

    .seccionesAyuda {
        width: 70%;
    }

    .cajaFormulario, #cuerpoTestimonio {
        margin: 20px 15% 20px 15%;
    }

}