/***************************************************************/
/*Esilo general*/ 
/***************************************************************/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
    text-decoration: none;
}

*, *::before, *::after {
    box-sizing: inherit;
}

html {
    font-size: 1em;
    line-height: 1.4;
    scroll-behavior: smooth;  /*Hacer el scrolling suave*/
}

body {
    background-color: #F2F1F7; /*Ghost White*/
}


/* Cambiar la conversión de rem (1rem = 16px)
a 1rem = 10px
*/
/*
html {
    font-size: 62.5%;
}
*/

/***************************************************************/
/*Esilo para hero y header Menú */
/***************************************************************/
header.contenedorMNYY {
    /*max-width: 1100px;*/
    margin: 0 auto;
    z-index: 500; /*Establecer el stack order de header menú, siempre encima de los demás.*/
}


section.imagenBannerMNYY {
    width: 100%;
    height: 100vh;   /*height de image es 100% de Viewport*/
}

header.headerMNYY {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(206, 195, 223, 0.3);  /*Languid Lavender Barra Top menú*/
    position: fixed;
    
}

nav.redesSocialesMNYY {
    text-align: center;
}

nav.redesSocialesMNYY a {
    color: #2b0548;
    font-size: 2rem;
    margin-right: 0.5rem;
}

nav.redesSocialesMNYY a:last-child {
    margin-right: 0;
}

nav.redesSocialesMNYY a:hover {
    color: #F2F1F7; /*Ghost White*/
}

nav.redesSocialesMNYY {
    flex-basis: calc(20% - 1rem);
}

nav.navegacionMNYY {
    flex-basis: calc(60% - 1rem);
    text-align: left;
}

nav.navegacionMNYY a {
    color: #2b0548;
    margin-right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Baloo Da 2', cursive;
}

nav.navegacionMNYY a:last-child {
    margin-right: 0;
}

/* Menú Hover efecto especial */
nav.navegacionMNYY a {
    position: relative;
}

nav.navegacionMNYY a::before {
    content: attr(data-content);
    position: absolute;
    top: 0.2rem;
    left: 0;
    color: #F2F1F7; /*Ghost White*/
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease-in-out;
}

nav.navegacionMNYY a:hover::before {
    width: 100%;
}

/* End-Menú Hover efecto especial */


div.logoMNYY {
    flex-basis: calc(20% - 1rem);
    text-align: center;
    padding: 0.5rem 0;
}


div.logoMNYY img {
    width: 100%;
    height: auto;
    max-width: 10rem;

}

div.imagen-ContenedorMNYY {
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.8);*/
}

div.imagen-ContenedorMNYY img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/***************************************************************/
/*Esilo para banner*/
/***************************************************************/
section.imagenBannerMNYY {
    position: relative;
}

div.bannerMNYY {
    position: absolute;
    top: 33%;
    left: 15%;
}

div.bannerMNYY h1 {
    font-family: 'Baloo Da 2', cursive;   /*https://fonts.google.com/specimen/Baloo+Da+2*/
    font-size: 6rem;
    font-weight: 300;
    color: #F2F1F7; /*Ghost White*/
    width: 70%; /*Hacer un salto de línea*/
    line-height: 5rem;
    letter-spacing: 0.2rem;
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
}

div.bannerMNYY p {
    font-family: 'Josefin Slab', serif; /*https://fonts.google.com/specimen/Josefin+Slab*/
    font-size: 3rem;
    color: #F2F1F7; /*Ghost White*/
    width: 85%; /*Hacer un salto de línea*/
    letter-spacing: 0.05rem;
    line-height: 3rem;
    text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

div.bannerMNYY button {
    width: 15rem;
    height: 4rem;
    background-color: #a091b7;
    border: none;
    font-family: 'Mulish', sans-serif; /*https://fonts.google.com/specimen/Mulish*/
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #F2F1F7; /*Ghost White*/
    text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

div.bannerMNYY button:hover {
    background-color: #F2F1F7; /*Ghost White*/
    color: #a091b7;
    text-shadow: none;
}


/***************************************************************/
/*Hero imagen animación*/
/***************************************************************/

div.imagen-ContenedorMNYY img {
    animation-name: escala;
    animation-duration: 5s;
}


@keyframes escala {
    0% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }

}

div.imagen-ContenedorMNYY {
    overflow: hidden; /* Para esconder el scroll cuando se realiza la animación de hero slider */
}

/***************************************************************/
/*Banner animación*/
/***************************************************************/


section.imagenBannerMNYY {
    perspective: 75rem;   /*Crear un entorno 3D*/
}


div.bannerMNYY h1 {
    opacity: 0;
    animation-name: bannerMover;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; /*Para que el último movimiento de la animación se mantenga */

}

div.bannerMNYY p {
    opacity: 0;
    animation-name: bannerMover;
    animation-duration: 1.5s;
    animation-delay: 0.7s;
    animation-fill-mode: forwards; /*Para que el último movimiento de la animación se mantenga */
}

div.bannerMNYY button {
    opacity: 0;
    animation-name: bannerMover;
    animation-duration: 1.5s;
    animation-delay: 0.9s;
    animation-fill-mode: forwards; /*Para que el último movimiento de la animación se mantenga */
}


@keyframes bannerMover {
    0% {
        transform: translateY(40rem) rotateY(-40deg);
    }

    100% {
        transform: translateY(0) rotateY(0);
        opacity: 1;
    }
}

section.imagenBannerMNYY {
    overflow: hidden; /* Para esconder el scroll cuando se realiza la animación de Banner */
}


/***************************************************************/
/*Estilo Sección de obras de arte*/
/***************************************************************/

div.tituloMNYY {
    display: flex; /*Usar flexbox para centrar los elementos de tituloMNYY horizontal y verticalmente*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}

h1.tituloTextoMNYY {
    font-family: 'Mulish', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    text-align: center;
    color: #2b0548;
    margin-bottom: 3rem;
}

div.subrayadoMNYY {
    width: 10rem;
    height: 0.2rem;
    background-color: #a091b7;
}


section.obrasInicioMNYY {
    display: flex;       /*Usar flexbox para centrar los elementos de sección obrasInicioMNYY horizontal y verticalmente*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10rem 5rem 0 5rem;

}

div.obras-ContenedorMNYY {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; /*Distribuir los elementos de manera uniforme.Los elementos tienen el mismo espacio a su alrededor (horizontalmente). */
    margin-top: 1rem;
    /*width: 100%;*/
}

/*Obras en Inicio - Flex box*/
div.obras-ContenedorFlex {
    width: 100%;
}

/*Página Obras - Grid*/
div.obras-ContenedorGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    justify-content: center;

}

/*END Página Obras - Grid*/

div.obrasFichasMNYY {
    width: 25rem;   
    height: 18rem;
    box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
    border-radius: 0.3rem;
}

div.obras-ImagenConMNYY {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
}

div.obras-ImagenConMNYY img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3rem;
}

/* Estilo para obras-InfoMNYY */
div.obrasFichasMNYY {
    position: relative;
}

div.obras-InfoMNYY {
    position: absolute;
    bottom: 1rem;
    padding: 1rem;
    text-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
}



div.obras-InfoMNYY h2 {
    font-family: 'Baloo Da 2', cursive;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: #F2F1F7; /*Ghost White*/
}

div.obras-InfoMNYY h3 {
    font-family: 'Mulish', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #b4dadb;
    margin-bottom: 0.5rem;
}

div.obras-InfoMNYY p {
    font-family: 'Baloo Da 2', cursive;
    font-size: 1rem;
    line-height: 1.2rem;
    font-weight: 300;
    color: #F2F1F7; /*Ghost White*/
    /*width: 80%;*/
    margin-bottom: 1rem;

}

div.obras-InfoMNYY button {
    width: 6rem;
    height: 2rem;
    background-color: #a091b7;
    border: none;
    font-family: 'Baloo Da 2', cursive;
    font-size: 1rem;
    line-height: 1.1rem;
    color: #F2F1F7; /*Ghost White*/
    border-radius: 0.3rem;
    box-shadow: 0 0.1rem 0.8rem rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

div.obras-InfoMNYY button:hover {
    background-color: #cec3df;

}

/* Efecto especial para obrasFichasMNYY */
div.obras-InfoMNYY {
    bottom: 0;        /*Esconder obras-InfoMNYY*/
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

div.obrasFichasMNYY:hover div.obras-InfoMNYY {
    bottom: 1rem;
    opacity: 1;
    visibility: visible;

}

/*Cuando hacer hover, se Añade un filtro oscuro */

div.obras-ImagenConMNYY {
    background-color: #262626;  
}

div.obras-ImagenConMNYY img {
    opacity: 1;
}


div.obras-ImagenConMNYY img {
    transition: opacity 0.3s;
}

div.obrasFichasMNYY:hover div.obras-ImagenConMNYY img {
    opacity: 0.5;
}

/* Botón Más Obras + Más Artistas */
div.boton01MNYY {
    margin-top: 7rem;
}

div.boton01MNYY button {
    width: 15rem;
    height: 4rem;
    background-color: #a091b7;
    border: none;
    font-family: 'Mulish', sans-serif; /*https://fonts.google.com/specimen/Mulish*/
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #F2F1F7; /*Ghost White*/
    text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

div.boton01MNYY button:hover {
    background-color: #cec3df;

}

/***************************************************************/
/*Estilo Sección de Presentación*/
/***************************************************************/

div.tituloPresMNYY {
    display: flex; /*Usar flexbox para centrar los elementos de tituloPresMNYY horizontal y verticalmente*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}

h1.tituloTextoPresMNYY {
    font-family: 'Mulish', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    text-align: center;
    color: #2b0548;
    margin-bottom: 3rem;
}

div.subrayadoPresMNYY {
    width: 10rem;
    height: 0.2rem;
    background-color: #a091b7;
}

section.presentacionMNYY {
    padding: 10rem 0rem 0 0rem;  /*Hay que ajustar*/
    width: 100%;

}


div.imagenFondo {
    margin-top: 1rem;
    width: 100%;
    height: 80vh;
    background-image: url(../view-imagen/smallcimaentrenubes-lluisalbert.jpg); /*Hay que poner .. dos puntos para volver a un nivel*/
    position: relative;
    /*Efecto parallax scrolling */
    background-size: cover;
    background-position: 50% 5%;
    background-attachment: fixed;
    background-repeat: no-repeat;

}

div.textoPresentacion {
    position: absolute;
    top: 20%;
    left: 5%; 
    background-color: rgba(43, 5, 72, 0.3);
    width: 60%;
    padding: 1.5rem;
    border-radius: 0.3rem;

}

div.textoPresentacion h1 {
    font-family: 'Baloo Da 2', cursive;
    font-size: 3rem;
    font-weight: 300;
    color: #F2F1F7; /*Ghost White*/
    line-height: 3rem;
    letter-spacing: 0.1rem;

}

div.textoPresentacion p {
    font-family: 'Mulish', sans-serif; 
    text-align: justify;
    font-size: 1.5rem;
    color: #F2F1F7; /*Ghost White*/
    /*width: 60%; /*Hacer un salto de línea*/
    letter-spacing: 0.03rem;
    line-height: 2rem;
    margin-top: 1rem;
}

/***************************************************************/
/*Estilo Sección de Artistas*/
/***************************************************************/
div.tituloArtistaMNYY {
    display: flex; /*Usar flexbox para centrar los elementos de tituloArtistaMNYY horizontal y verticalmente*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}

h1.tituloTextoArtistaMNYY {
    font-family: 'Mulish', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    text-align: center;
    color: #2b0548;
    margin-bottom: 3rem;
}

div.subrayadoArtistaMNYY {
    width: 10rem;
    height: 0.2rem;
    background-color: #a091b7;
}

section.artistasMNYY {
    margin-top: 0rem;
    padding: 10rem 0rem 0rem 0rem;  /*Hay que ajustar*/
    display: flex; /*Usar flexbox para centrar los elementos de sección artistasMNYY horizontal y verticalmente*/
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

div.artistas-ContenedorMNYY {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly; /*Distribuir los elementos de manera uniforme.Los elementos tienen el mismo espacio a su alrededor (horizontalmente). */
    margin-top: 1rem;
    /*width: 100%;*/
}

/*Artistas en Inicio - Flex box*/
div.artistas-ContenedorFlex {
    width: 100%;
}

/*Página Artistas - Grid*/
div.artistas-ContenedorGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 6rem;
    grid-row-gap: 4rem;
    justify-content: center;

}

/*END Página Artistas - Grid*/


div.artistasFichasMNYY {
    width: 20rem;   
    height: 25rem;  
    /*box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.4);
    border-radius: 0.3rem;*/

}

div.artistas-ImagenConMNYY {
    width: 100%;
    height: 100%;
    border-radius: 0.3rem;
}

div.artistas-ImagenConMNYY img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.3rem;
}


/* Estilo para artistas-InfoMNYY */
div.artistas-InfoMNYY h2 {
    font-family: 'Baloo Da 2', cursive;
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: 300;
    color: #F2F1F7; /*Ghost White*/
    font-weight: 400;

}

/* Efecto para artistas-InfoMNYY */
div.artistasFichasMNYY {
    position: relative;
    overflow: hidden;


}

div.artistas-InfoMNYY {
    position: absolute;
    bottom: 0rem;
    padding: 1rem;
    width: 100%;
    background-color: rgba(160, 145, 183, 0.7);
    text-transform: uppercase;

}

/*Agregar un filtro usando filter*/
div.artistasFichasMNYY img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
}

div.artistasFichasMNYY:hover img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

div.artistasFichasMNYY:hover div.artistas-InfoMNYY {
    bottom: -5rem;
    opacity: 0;
}

div.artistas-InfoMNYY {
    transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
}

/***************************************************************/
/*Estilo Sección de Contacto*/
/***************************************************************/

div.tituloContactoMNYY {
    display: flex; /*Usar flexbox para centrar los elementos de tituloContactoMNYY horizontal y verticalmente*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}

h1.tituloTextoContactoMNYY {
    font-family: 'Mulish', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    text-align: center;
    color: #2b0548;
    margin-bottom: 3rem;
}

div.subrayadoContactoMNYY {
    width: 10rem;
    height: 0.2rem;
    background-color: #a091b7;
}

section.contactoMNYY {
    margin-top: 0rem;
    padding: 10rem 0rem 0rem 0rem;  /*Hay que ajustar*/
   
}


/*Estilo Formulario de la sección contacto*/

div.contacto-ContenedorMNYY {
    margin-top: 1rem;
    width: 100%;
    height: 80vh;
    background-image: url(../view-imagen/valle-con-nubes-lluisalbert.jpg); /*Hay que poner .. */   /*Hay que cambiar de imagen .. */ 
    background-size: cover;
    background-position: center;  /*50% 50% */ 
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;  /*Usar flexbox para centrar los elementos de contacto-ContenedorMNYY vertcialmente*/

    justify-content: flex-end; /*Situar los elementos de contacto-ContenedorMNYY en el lado derecho*/

}


div.conatctoFormMNYY {
    margin-right: 5%;
    width: 40%;
    /*height: 30rem;*/
    background-color: rgba(206, 195, 223, 0.5);
    box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.5);
    padding: 2rem 2rem 6rem 2rem;
}

h1.contactoTituloMNYY {
    font-family: 'Baloo Da 2', cursive;
    font-size: 2rem;
    font-weight: 300;
    color: #2b0548;
    margin-bottom: 3rem;
    text-align: center;
}

div.conatctoFormMNYY form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;  /*Usar flexbox para centrar los elementos de conatctoFormMNYY vertcialmente*/

}

input.campoInput, textarea.campoInput {
    width: 28rem;
    background-color: transparent;
    border: none;
    border-bottom: 0.15rem dashed #2d1048;
    margin: 1.8rem 0;
    padding: 0.5rem 0.5rem 0.5rem 0;
    font-family: 'Mulish', sans-serif;
    font-size: 1rem;
    color: #470877;
}

div.grupoInputForm input {
    height: 1rem;
}

div.grupoInputForm textarea {
    max-height: 4.3rem;
    max-width: 28rem;
}

div.grupoInputForm {
    position: relative;
}

div.grupoInputForm label {
    position: absolute;
    left: 0;
    font-family: 'Baloo Da 2', cursive;
    font-size: 1.5rem;
    color: #39075f;
    text-transform: uppercase;
    pointer-events: none;  /*No se puede focus los labels*/
}

label.inputLabel {
    bottom: 3.2rem;

}

label.textMensageForm {
    bottom: 5rem;
}

/*Efecto Formulario*/
.campoInput:focus {
    border-bottom-style: solid;
}

.campoInput:focus ~ label {   /*hermanos generales*/
    transform: translateY(-1.8rem);
    font-size: 1rem;
}

div.grupoInputForm label {
    transition: all 0.3s;
}

/*Estilo botón de Formulario*/
input.submitBotonMNYY {
    width: 28rem;
    height: 3.2rem;
    background-color: #a091b7;
    border: none;
    font-family: 'Mulish', sans-serif; /*https://fonts.google.com/specimen/Mulish*/
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #F2F1F7; /*Ghost White*/
    text-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-top: 1.25rem;
}

input.submitBotonMNYY:hover {
    background-color: #cec3df;
}

/***************************************************************/
/*Estilo Sección de Footer*/
/***************************************************************/
section.footerMNYY {
    width: 100%;
    height: 10rem;
    background-color: #a091b7;
    display: flex;
    justify-content: center;
    align-items: center; /*Usar flexbox para centrar los elementos de footerMNYY horizontal y verticalmente*/
}

div.footerContenidoMNYY {
    width: 60%;
    display: flex;
    justify-content: space-between; /*Usar flexbox para ubicar derechosAutorMNYY y listadoRedesSociales en 2 partes*/
}

p.derechosAutorMNYY {
    font-family: 'Baloo Da 2', cursive;
    font-size: 1.2rem;
    color: #F2F1F7; /*Ghost White*/

}

div.listadoRedesSociales a {
    margin: 0 0.6rem;

}

div.listadoRedesSociales i {
    font-size: 1.6rem;
    color: #2b0548;
}

div.listadoRedesSociales i:hover {
    color: #F2F1F7; /*Ghost White*/
}

/***************************************************************/
/*Estilo Botón de scroll*/
/***************************************************************/

a.botonScrollMNYY {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    width: 2.8rem;
    height: 2.8rem;
    background-color: #b4dadb;
    font-size: 1.25rem;
    color: #2b0548;
    box-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.2);
    border-radius: 0.18rem;
}

a.botonScrollMNYY:hover {
    background-color: #71acb0;
    color: #F2F1F7; /*Ghost White*/
}

/***************************************************************/
/*Estilo Menú que cambia de color según height de ventana*/
/***************************************************************/
header.headerMNYY {
    background-color: rgba(206, 195, 223, 0.3);  /*Languid Lavender Barra Top menú*/
    transition: background-color 1s ease-in-out;
    -webkit-transition: background-color 1s ease-in-out;
    
}

.menuColorCambiar {
    background-color: #a091b7 !important;
    transition: background-color 1s ease-in-out;
    -webkit-transition: background-color 1s ease-in-out;
}


/***************************************************************/
/*Estilo Menú hamburguesa*/
/***************************************************************/

div.menuHamburguesaMNYY {
    width: 2rem;
    height: 2rem;
    /*background-color: red;*/ /*Para testear*/
    margin-right: 3.13rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /*Distribuir los elementos de manera uniforme. */
    cursor: pointer;
    transition: margin-right 1.2s;
    display: none;  /*Esconder Menú Hamburguesa por defecto*/
}

/*Efecto de Menú hamburguesa que mueve con la barra lateral vía JavaScript toggle()*/
.cambiarBarraLateral div.menuHamburguesaMNYY {
    margin-right: 26.63rem;
}


div.lineaHam {
    width: 100%;
    height: 0.2rem;
    background-color: #2b0548;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);

}

div.menuHamburguesaMNYY:hover div.lineaHam {
    background-color: #F2F1F7; /*Ghost White*/
}

/***************************************************************/
/*Estilo Barra lateral de Menú hamburguesa*/
/***************************************************************/
section.barraLateralMNYY {
    width: 25rem;
    height: 100vh; /*height de la barra lateral es 100% de Viewport*/
    position: fixed;
    top: 0;
    right: -25rem;  /*Esconder la barra lateral por defecto*/
    background-color: #F2F1F7; /*Ghost White*/
    z-index: 600; /*Establecer el stack order de la barra lateral de Menú hamburguesa, siempre encima de los demás.*/
    transition: right 0.8s;
}

/*Efecto de la barra lateral con JavaScript toggle()*/
.cambiarBarraLateral section.barraLateralMNYY {
    right: 0;
}


ul.barraMenu {
    position: absolute; /*.barraLateralMNYY tiene position: fixed; es un elemento posicionado*/
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); /*Para mover los elementos de barraMenu desde su posición actual */
}

li.barraMenu-item {
    text-align: center;
    margin-bottom: 1.2rem;

}

ul.barraMenu li:last-child {
    margin-bottom: 0;
}



a.barraMenu-enlace {
    font-family: 'Baloo Da 2', cursive;
    font-size: 2rem;
    color: #2b0548;
    font-weight: bold;
    text-transform: uppercase;
}

div.barraRedesSociales {
    position: absolute;
    bottom: 2.5rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

div.barraRedesSociales i {
    font-size: 2.5rem;
    margin: 1rem;
    color: #2b0548;
}

div.barraRedesSociales i:hover {
    color: #a091b7;
}

/* Menú Hover efecto especial para Menú hamburguesa */
a.barraMenu-enlace {
    position: relative;
}

a.barraMenu-enlace::before {
    content: attr(data-content);
    position: absolute;
    top: 0.3rem;
    left: 0;
    color: #a091b7;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease-in-out;
}

a.barraMenu-enlace:hover::before {
    width: 100%;
}

/* End-Menú Hover efecto especial para Menú hamburguesa */

/***************************************************************/
/*Diseño Responsivo*/
/***************************************************************/
/* screen < 1500px*/
@media only screen and (max-width: 1500px) {
    
/*Estilo Sección de obras de arte*/
    div.obrasFichasMNYY {
        width: 21.25rem;
        height: 15.3rem;
    }

/*Estilo Sección de Contacto*/

    div.conatctoFormMNYY {
        padding: 1rem 1rem 3rem 1rem;
    }
    
    h1.contactoTituloMNYY {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    input.campoInput, textarea.campoInput {
        width: 14rem;
        border-bottom: 0.07rem dashed #2d1048;
        margin: 0.9rem 0;
        padding: 0.25rem 0.25rem 0.25rem 0;
        font-size: 0.8rem;
    }
    
    div.grupoInputForm input {
        height: 0.5rem;
    }
    
    div.grupoInputForm textarea {
        max-height: 2.15rem;
        max-width: 14rem;
    }
    
    div.grupoInputForm label {
        font-size: 0.9rem;
    }
    
    label.inputLabel {
        bottom: 1.7rem;
    
    }
    
    label.textMensageForm {
        bottom: 3.2rem;
    }
    
    .campoInput:focus ~ label {   /*hermanos generales*/
        transform: translateY(-0.9rem);
        font-size: 0.5rem;
    }
       
/*Estilo botón de Formulario*/
    input.submitBotonMNYY {
        width: 14rem;
        height: 1.6rem;
        font-size: 0.65rem;
        margin-top: 0.62rem;
    }

/*Estilo Sección de Footer*/
    div.footerContenidoMNYY {
        width: 80%;
    }   
}

/* screen < 1400px*/
@media only screen and (max-width: 1400px) {

/*Esilo para banner*/
    div.bannerMNYY h1 {
    font-size: 3.75rem;
    line-height: 4.37rem;
    }

    div.bannerMNYY p {
        font-size: 1.87rem;
    }

    div.bannerMNYY button {
        width: 12.5rem;
        height: 3.12rem;
        font-size: 1rem;
    }
}

/* screen < 1300px*/
@media only screen and (max-width: 1300px) {

/*Estilo Sección de obras de arte*/
    h1.tituloTextoMNYY {
        font-size: 2.8rem;
    }

    div.subrayadoMNYY {
        width: 8rem;
    }

    div.obras-ContenedorMNYY {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2.5rem;

    }

    div.obrasFichasMNYY {
        margin-bottom: 5rem;
    }

    div.obrasFichasMNYY {
        width: 30rem;  
        height: 21.6rem;
    }

/* Botón Más Obras + Más Artistas */
    div.boton01MNYY {
        margin-top: 3rem;
    }

/*Estilo Sección de Presentación*/
    h1.tituloTextoPresMNYY {
        font-size: 2.8rem;
    }

    div.subrayadoPresMNYY {
        width: 8rem;

    }

    div.textoPresentacion h1 {
        font-size: 2.4rem;
        line-height: 2.4rem;
        letter-spacing: 0.1rem;
    }

    div.textoPresentacion p {
        font-size: 1.2rem;
        line-height: 1.6rem;
        margin-top: 0.8rem;
    }

/*Estilo Sección de Artistas*/
    h1.tituloTextoArtistaMNYY {
        font-size: 2.8rem;
    }

    div.subrayadoArtistaMNYY {
        width: 8rem;
    }

    div.obras-ContenedorMNYY {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2.5rem;

    }

    div.artistas-ContenedorMNYY {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2.5rem;
    }

    div.artistasFichasMNYY { 
        margin-bottom: 5rem;
    
    }

/*Estilo Sección de Contacto*/
    h1.tituloTextoContactoMNYY {
        font-size: 2.8rem;
    }

    div.subrayadoContactoMNYY {
        width: 8rem;

    }

/*Estilo Sección de Footer*/
    div.footerContenidoMNYY {
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

    }

    p.derechosAutorMNYY {
        order: 1;
        font-size: 1rem;
        margin-top: 1rem;

    }


}

/* screen < 1000px*/
@media only screen and (max-width: 1000px) {

/*Menú hamburguesa*/
    nav.navegacionMNYY {
        display: none;
    }

    nav.redesSocialesMNYY {
        display: none;
    }

    div.menuHamburguesaMNYY {
        display: flex;
    }

    div.logoMNYY {
        margin-left: 2rem;
    }

/*Esilo para banner*/
    div.bannerMNYY h1 {
        font-size: 3.12rem;
        line-height: 3.75rem;
        }

    div.bannerMNYY p {
        font-size: 1.56rem;
        line-height: 2rem;
    }

    div.bannerMNYY button {
        width: 11.25rem;
        height: 2.5rem;
        font-size: 0.93rem;
    }
 
}

/* screen < 700px*/
@media only screen and (max-width: 700px) {

/*Menú hamburguesa*/
a.barraMenu-enlace {
    font-size: 1.6rem;

}


div.barraRedesSociales i {
    font-size: 2rem;
    margin: 0.8rem;

}

section.barraLateralMNYY {
    width: 15rem;
    right: -15rem;  /*Esconder la barra lateral por defecto*/
}

/*Efecto de Menú hamburguesa que mueve con la barra lateral vía JavaScript toggle()*/
.cambiarBarraLateral div.menuHamburguesaMNYY {
    margin-right: 16rem;
}


/*Esilo para banner*/
    div.bannerMNYY h1 {
        font-size: 2.5rem;
        line-height: 3.12rem;
        }

    div.bannerMNYY p {
        font-size: 1.25rem;
        line-height: 1.6rem;
    }

/*Estilo Sección de obras de arte*/
    h1.tituloTextoMNYY {
        font-size: 2.24rem;
    }

    div.subrayadoMNYY {
        width: 6.4rem;
    }

    div.obrasFichasMNYY {
        width: 25rem;     
        height: 18rem;    
    }

/*Estilo Sección de Presentación*/
    h1.tituloTextoPresMNYY {
        font-size: 2.24rem;
    }

    div.subrayadoPresMNYY {
        width: 6.4rem;

    }

    div.textoPresentacion h1 {
        font-size: 1.92rem;
        line-height: 1.92rem;
        letter-spacing: 0.08rem;
    }

    div.textoPresentacion p {
        font-size: 0.96rem;
        line-height: 1.28rem;
        margin-top: 0.64rem;
    }

/*Estilo Sección de Artistas*/
    h1.tituloTextoArtistaMNYY {
        font-size: 2.24rem;
    }

    div.subrayadoArtistaMNYY {
        width: 6.4rem;
    }

/*Estilo Sección de Contacto*/
    h1.tituloTextoContactoMNYY {
        font-size: 2.24rem;
    }

    div.subrayadoContactoMNYY {
        width: 6.4rem;

    }

    div.conatctoFormMNYY {
        width: 60%;
    }

}

/* screen < 500px*/
@media only screen and (max-width: 500px) {
    html {
        font-size: 55%;
    }

/*Estilo Sección de Contacto*/
    label.inputLabel {
        bottom: 1.6rem;
    
    }
    
    label.textMensageForm {
        bottom: 2.9rem;
    }

}

/***************************************************************/
/*Php Notificaciones Estilo*/
/***************************************************************/
div.phpResult01 {
    display: flex; /*Usar flexbox para centrar los elementos de phpResult01 horizontal y verticalmente*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5rem;
}

div.phpResult01 p {
    font-family: 'Mulish', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    text-align: center;
    color: #2b0548;
    margin-bottom: 3rem;
}

/***************************************************************/
/*Arrgelo Alert2*/
/***************************************************************/
.swal2-popup {
    font-size: 1.6rem !important;
}