body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #96a9c9;
    background-color: #0283A1;
    background-color: #63B1C6;
    /* background-color: #C0DEEE; */
    background-color: #001D29;

    color: #fff;

    /* Ensure no horizontal scroll bars */
}


.content_detalle {
    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    font-size: 1.2em;
    /* line-height: 1em; */

}

.content_intro,
.content_guion, .content_mapa_canales,
.content_contacto {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1.2em;
    text-align: justify;

}

.content_mapa_canales {
    text-align: center;
}

.content_mapa_canales img {
    max-width: 600px;
    width: 100%;
    height: auto;
    border: solid 5px #63B1C6;
    border-radius: 2em;

}
.content_mapa_canales a {
    text-decoration: none;
    color: #0283A1;
    transition: 0.5s;
}

.content_mapa_canales a:hover {
    color: #fff;
}

.content_cierre {
    width: 90%;
    margin: 0 auto;
    font-size: 0.9em;
    text-align: center;
    /* line-height: 1em; */
    padding-bottom: 1em;
    padding-top: 1em;
}

.content_cierre strong {
    color: #63B1C6;

}

.content_contacto img {
    width: 60px;
    height: auto;
}

.content_contacto {
    text-align: center;

}

.content_contacto a {
    color: #0283A1;
    transition: 1s;
}

.content_contacto a:hover {
    color: #63B1C6;
}

/* .div_360 {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
  } */

  .detail a {
    text-decoration: none;
    color: #001D29;
    transition: 0.5s;
  }

  .detail a:hover {
    color: #fff;
  }

.div_360,
.div_2d {
    width: 90%;
    max-width: 1280px;
    height: auto;
    margin: 0 auto;
    text-align: center;

}

.intro {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.intro img {
    position: absolute;
    width: 150px;
    height: 150px;
    object-fit: cover;
    transition: transform 1s ease;
    border-radius: 0.3em;
}



h1 {
    font-family: "Poiret One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3.5em;
    line-height: 0.85em;
    margin-block-end: 0.267em;
    color: #63B1C6;
}


h2 {
    font-family: "Poiret One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5em;
    line-height: 0.85em;

}

.lugaes_menu {
    width: 100%;
    max-width: 500px;
    font-size: 1.25em;
    text-align: justify;
    line-height: 1.5em;
}

.google_translate_element {
    width: 150px;
    position: absolute;
    right: 2em !important;
    z-index: 1;
    top: 0.5em;
}

.section {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: 50vh; */
    /* min-height: 70vh; */
    position: relative;
    z-index: 0;
    margin-bottom: 3em;
    margin-top: 3em;
}

.section img {
    /* position: absolute;
    width: 100vw;
    height: 65vh;
    object-fit: cover; */
    /* max-width: 800px;
    max-height: 800px; */
    /* max-width: 100%;
            max-height: 100%; */
    /* opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    border-radius: 0.2em; */
}

.section .content {
    position: relative;
    z-index: 1;
    /* max-width: 1200px; */
    padding: 20px;
    background: #001D29;
    border-radius: 0.2em;
    /* box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); */
    text-align: center;
    width: 100%;
}

.top {
    position: absolute;
    text-align: center;
    height: 100vh;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    /* z-index: 9; */
}

.top h1 {
    z-index: 2;
    text-transform: uppercase;
    font-weight: bold;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    max-width: 1100px;
}

.titulo {
    display: block;

}

.top img {
    width: 90%;
    max-width: 800px;
    z-index: 2;
}

video,
#iframe-youtube-player {
    border: solid 10px #63B1C6;
    border-radius: 2em;
}


/* ////BURGER MENU */

.burger-menu {
    position: fixed;
    top: 20px;
    left: 20px;
    cursor: pointer;
    z-index: 999;

}

.burger-menu div {
    width: 45px;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    transition: 0.4s;
}

.burger-menu.open div:nth-child(1) {
    transform: rotate(-45deg) translate(-9px, 6px);
}

.burger-menu.open div:nth-child(2) {
    opacity: 0;
}

.burger-menu.open div:nth-child(3) {
    transform: rotate(45deg) translate(-8px, -4px);

}

.nav {
    position: fixed;
    z-index: 998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0284a1e5;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-200%);
    font-family: "Poiret One", serif;

}

.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav li {
    margin: 10px 0;
    text-align: center;
}

.nav a {
    color: #fff;
    font-size: 3em;
    text-decoration: none;
    transition: color 0.3s;
}

.nav a:hover {
    color: #001D29;
}

/* ////BURGER MENU */

/* ////MAPA */

.artista {
    /* font-family: "Germania One", system-ui; */
    font-size: 1.2em;
    font-weight: bold;
    padding-bottom: 0.5em;
    color: #0283a1;
}

#map {
    height: 95%;
    width: 97%;
    /* max-width: 1400px; */
    border: solid 10px #5ba5ba;
    border-radius: 2em;
}



.btn_mapa {
    background-color: #001D29;
    color: #fff;
    border-radius: 5px;
    padding: 0.8em;
    width: 100%;
    border-radius: 0.51em;
    cursor: pointer;
    margin-top: 0.2em;
    font-size: 0.8em;
    font-weight: bold;
    transition: 0.5s;
    border: 0;
}

.btn_mapa a:hover {
    background-color: red;
}

.cierre_mapa {
    display: block;
    /* max-width: 95%; */
    /* max-height: 95px; */
    width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    /* padding-top: 3.5%; */
    padding-bottom: 3.5%;
    max-width: 980px;
}

.mapa {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 1384px;
    /* background-color: #0283a1; */
    flex-wrap: nowrap;
    align-items: center;
    /* border-radius: 4em; */

}

/* ////MAPA */



@media only screen and (max-width: 720px) {
    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.65em;
    }
    .nav a {
        font-size: 2em;
    }
    .div_360,
    .div_2d {
        width: 90%;
        height: auto;
    }
    .lugaes_menu{
        width: 80%;
        margin: 0 auto;
    }
    /* .section {
        min-height: 85vh;
    } */

    /* .section img {
        min-height: 85vh;
     } */
    .intro img {
        position: absolute;
        width: 100px;
        height: 100px;

    }

    video,
    #iframe-youtube-player {
        border: solid 5px #63B1C6;
        border-radius: 2em;
    }

}

@media only screen and (max-width: 520px) {
    .intro img {
        width: 60px;
        height: 60px;

    }
    h1 {
        font-size: 1.8em;
    }
    .top h1 {
        font-size: 1.9em;
    }

    .lugaes_menu {
        display: none;
    }

}


.spinner {
    /*     background: url(data:image/png;base64,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) no-repeat center; */
    display: block;
    margin: 5% auto;
    position: absolute;
    width: 159px;
    height: 59px;
    bottom: -59px;
}

@-webkit-keyframes pulse {
    0% {
        opacity: 0;
        background-position: center top;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }

    10% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        -moz-background-size: 20% auto;
        -o-background-size: 20% auto;
        -webkit-background-size: 20% auto;
        background-size: 20% auto;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        background-position: center bottom;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }
}

@-moz-keyframes pulse {
    0% {
        opacity: 0;
        background-position: center top;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }

    10% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        -moz-background-size: 20% auto;
        -o-background-size: 20% auto;
        -webkit-background-size: 20% auto;
        background-size: 20% auto;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        background-position: center bottom;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }
}

@-ms-keyframes pulse {
    0% {
        opacity: 0;
        background-position: center top;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }

    10% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        -moz-background-size: 20% auto;
        -o-background-size: 20% auto;
        -webkit-background-size: 20% auto;
        background-size: 20% auto;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        background-position: center bottom;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }
}

@keyframes pulse {
    0% {
        opacity: 0;
        background-position: center top;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }

    10% {
        opacity: 0;
    }

    50% {
        opacity: 1;
        -moz-background-size: 20% auto;
        -o-background-size: 20% auto;
        -webkit-background-size: 20% auto;
        background-size: 20% auto;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        background-position: center bottom;
        -moz-background-size: 0 auto;
        -o-background-size: 0 auto;
        -webkit-background-size: 0 auto;
        background-size: 0 auto;
    }
}

.scroll-down a {
    display: block;
    opacity: 0;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    line-height: 0;
    font-size: 0;
    color: transparent;
    margin-left: auto;
    margin-right: auto;
    -moz-background-size: 0 auto;
    -o-background-size: 0 auto;
    -webkit-background-size: 0 auto;
    background-size: 0 auto;
    -webkit-animation: pulse 1.5s 0s infinite normal ease forwards;
    -moz-animation: pulse 1.5s 0s infinite normal ease forwards;
    -o-animation: pulse 1.5s 0s infinite normal ease forwards;
    animation: pulse 1.5s 0s infinite normal ease forwards;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
}

.scroll-down a:before,
.scroll-down a:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../img/arrow.svg);
    background-repeat: no-repeat;
    /* background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMzAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiMwMTM0NmIiIGQ9Ik0yMS44NSw3LjE2YzAsMC4zMDktMC4xMTgsMC42MTctMC4zNTMsMC44NTNsLTUuNjgxLDUuNjhjLTAuNDcxLDAuNDcxLTEuMjMzLDAuNDcxLTEuNzA0LDBsLTUuNjgxLTUuNjgNCgkJYy0wLjQ3LTAuNDcxLTAuNDctMS4yMzMsMC0xLjcwNGMwLjQ3MS0wLjQ3LDEuMjM0LTAuNDcsMS43MDQsMGw0LjgyOCw0LjgyOGw0LjgyOC00LjgyOGMwLjQ3Mi0wLjQ3LDEuMjM0LTAuNDcsMS43MDQsMA0KCQlDMjEuNzMxLDYuNTQzLDIxLjg1LDYuODUyLDIxLjg1LDcuMTZ6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==) no-repeat center top; */
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}

.scroll-down a:before {
    -webkit-animation: pulse 1.5s 0.25s infinite normal ease forwards;
    -moz-animation: pulse 1.5s 0.25s infinite normal ease forwards;
    -o-animation: pulse 1.5s 0.25s infinite normal ease forwards;
    animation: pulse 1.5s 0.25s infinite normal ease forwards;
}

.scroll-down a:after {
    -webkit-animation: pulse 1.5s 0.5s infinite normal ease forwards;
    -moz-animation: pulse 1.5s 0.5s infinite normal ease forwards;
    -o-animation: pulse 1.5s 0.5s infinite normal ease forwards;
    animation: pulse 1.5s 0.5s infinite normal ease forwards;
}

@media only screen and (max-width: 520px) {

    .spinner {
        bottom: 30px;

    }

}
