@font-face {
    font-family: 'fontLight';
    src: url('./Avenir-Book.ttf');
}

@font-face {
    font-family: 'fontBold';
    src: url('./Avenir-Black.ttf');
}

* {
    font-family: 'fontLight';
}

body {
    background-color: #fff;
}

.preload {
    display: none;
}

.menu {
    width: 50px;
    height: 60px;
    background: url("../assets/Menu.svg") no-repeat;
    background-size: 40px;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.menu:hover,
.menu:active {
    width: 50px;
    height: 60px;
    background: url("../assets/Menu-hover.svg") no-repeat;
    background-size: 40px;
}

#menu-demo {
    width: 100%;
    z-index: 1001;
}

#info-demo {
    width: 100%;
    z-index: 1001;
}

#info-demo li {
    border-bottom: 1px solid #f4f4f4;
    clear: both;
}

.info {
    width: 50px;
    height: 60px;
    background: url("../assets/info.svg") no-repeat;
    background-size: 40px;
    margin-top: 20px;
    margin-right: 10px;
    float: right;
}

.info:hover,
.info:active {
    width: 50px;
    height: 60px;
    background: url("../assets/info-hover.svg") no-repeat;
    background-size: 40px;
}

.back {
    width: 50px;
    height: 60px;
    background: url("../assets/back.svg") no-repeat;
    background-size: 40px;
    margin-top: 20px;
    margin-left: 20px;
}

.back:hover,
.back:active {
    width: 50px;
    height: 60px;
    background: url("../assets/back_hover.svg") no-repeat;
    background-size: 40px;
}

.shop {
    width: 200px;
    height: 60px;
    background: url("../assets/shop.svg") no-repeat;
    background-size: 100%;
    margin-top: 20px;
    margin-right: 20px;
}

.shop:hover,
.shop:active {
    width: 200px;
    height: 60px;
    background: url("../assets/shop-hover.svg") no-repeat;
    background-size: 100%;
}

/******************************** solo para la sirenita **************************************/

.mermaid{
    width: 200px;
    height: 60px;
    background: url("../assets/btn_cominsoon.svg") no-repeat ;
    background-size: 100%;
    margin-top: 20px;
    margin-right: 20px;
}

.mermaid:hover, .mermaid:active{
    width: 200px;
    height: 60px;
    background: url("../assets/btn_cominsoon_hover.svg") no-repeat ;
    background-size: 100%;
}
/******************************** solo para la sirenita **************************************/

.storyIcon {
    width: 60px;
    height: 60px;
    /* background: url("../assets/Icon.svg") no-repeat; */
    background-size: 60px !important;
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
}

.modalIcon {
    width: 50px;
    height: 60px;
    background: url("../assets/cel.svg") no-repeat;
    background-size: 50px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
    margin-top: 10px;
}

.modalIcon2 {
    width: 40px;
    height: 60px;
    background: url("../assets/mano.svg") no-repeat;
    background-size: 40px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
    margin-top: 10px;
}

.modalIcon3 {
    width: 40px;
    height: 60px;
    background: url("../assets/AR.svg") no-repeat;
    background-size: 40px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
    margin-top: 10px;
}

.modalARIcon {
    width: 50px;
    height: 60px;
    background: url("../assets/explorar.svg") no-repeat;
    background-size: 50px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
    margin-top: 10px;
}

.modalARIcon2 {
    width: 40px;
    height: 60px;
    background: url("../assets/rotar.svg") no-repeat;
    background-size: 40px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
    margin-top: 10px;
}

.modalARIcon3 {
    width: 40px;
    height: 60px;
    background: url("../assets/agrandar.svg") no-repeat;
    background-size: 40px;
    vertical-align: middle;
    word-break: break-all;
    display: inline-block;
    margin-top: 10px;
}

.modalHeader {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'fontBold';
}

.ar-footer {
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 30px;
    font-family: 'fontBold';
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
}

.ar-footer-button {
    font-family: 'fontBold';
    padding: 8px 15px;
    background-color: #c4a36c;
    border-radius: 20px;
    width: 130px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 25px;
    pointer-events: visible;
}

.ar-footer-legal {
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    margin-bottom: 0px;
    height: 50px;
    width: 750px;
    border-top: 1px solid var(--txt-main-color);
    padding-top: 5px;
    padding-left: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ar-footer-legal a {

    margin-right: 30px;
    pointer-events: visible;
    color: var(--txt-main-color);
    text-decoration: underline;
}

.ar-footer-button:hover,
.ar-footer-button:active {
    background-color: #4a3a1e;
}

.footer {
    display: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

.footer-content {
    float: left;
}

.footer-contentRight {
    float: right;
}

.modal-footer a {
    font-family: 'fontLight' !important;
}

.modalText {
    margin: 0px 10px;
    word-wrap: break-word;
}

.modalHeader2 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: 'fontBold';
}

.cerrarMenu {
    margin-top: 15px;
    margin-left: 15px;
    color: #C4A36C;
    position: absolute;
    left: 0;
}

.cerrarInfo {
    float: right;
    margin-top: 15px;
    margin-right: 40px;
    color: #C4A36C;
}

.storyText {
    font-family: 'fontBold';
    word-wrap: break-word;
    width: 100px;
    font-size: 10px;
    margin-top: 10px;
    line-height: 10px;
    padding: 0 12px;/*ojo con este valor*/
}

#menu-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.btn-flat:focus {
    background-color: white !important;
}

.storyIcon:hover,
.storyIcon:active {
    width: 60px;
    height: 60px;
    /* background: url("../assets/Icon-hover.svg") no-repeat; */
    background-size: 60px !important;
}

#modal-instructions-button {
    border-radius: 10px;
    background-color: #C4A36C;
}

#modal-instructions {
    border-radius: 10px;
    transform: translateY(50%) !important;
    /* width: 35% !important ;
    height: 45% !important ;  */
}

#modalAR-instructions {
    border-radius: 10px;
    transform: translateY(50%) !important;
    /* width: 35% !important ;
    height: 45% !important ;  */
}

#modal-instructions2 {
    border-radius: 10px;
}

#modal-instructions3 {
    border-radius: 10px;
}

.storyHeader {
    margin-top: 0px;
}

#icons {
    text-align: center;
}

.nav-wrapper {
    z-index: 1000;
    position: absolute;
    width: 100%;
    display: none;
}

.infoText {
    font-family: 'fontBold';
    font-size: 83% !important;
    color: #C4A36C !important;
}

.infoTitle {
    margin-top: 3px;
    clear: none !important;
    margin-top: 25px;
}

.menuCloseBtn {
    width: 25px;
    position: absolute;
}

.infoArrow {
    width: 20px;
    float: left;
    margin: 15px;
}

.menuContainer {
    margin-top: 40px;
}

.dialogDots {
    float: left;
    margin: 13px 0px;
    width: calc(100% - 100px);
    position: relative;
}

.dialogDots .dialogDotsContent {
    width: 100%;
    display: flex;
    position: absolute;
    margin: 0 auto;
    justify-content: center;
}

.activeDot {
    height: 7px;
    width: 7px;
    background-color: #000;
    border: 1px solid #000;
    margin: 5px;
    border-radius: 25px;
}

.notActiveDot {
    height: 7px;
    width: 7px;
    background-color: #d0d0d0;
    border: 1px solid #d0d0d0;
    margin: 5px;
    border-radius: 25px;
}

.modal-sm {
    max-width: 300px;
}

ul li {
    overflow-wrap: break-word;
    white-space: normal;
}

.modal .modal-content {
    padding: 14px !important;
}

.modal-skip {
    float: left;
    width: 50px;
    padding: 0;
}

.modal-next {
    float: right;
    width: 50px;
    padding: 0;
}

.prompt-box-8w p {
    word-break: break-word !important;
}

#frozen .storyIcon {
    background: url("../assets/icons/Frozen.png") no-repeat;
}

#frozen .storyIcon:hover,
#frozen .storyIcon:active {
    background: url("../assets/icons/Frozen_Hover.png") no-repeat;
}

#aladdin .storyIcon {
    background: url("../assets/icons/Aladdin.png") no-repeat;
}

#aladdin .storyIcon:hover,
#aladdin .storyIcon:active {
    background: url("../assets/icons/Aladdin_Hover.png") no-repeat;
}

#tangled .storyIcon {
    background: url("../assets/icons/Tangled.png") no-repeat;
}

#tangled .storyIcon:hover,
#tangled .storyIcon:active {
    background: url("../assets/icons/Tangled_Hover.png") no-repeat;
}

#mulan .storyIcon {
    background: url("../assets/icons/Mulan.png") no-repeat;
}

#mulan .storyIcon:hover,
#mulan .storyIcon:active {
    background: url("../assets/icons/Mulan_Hover.png") no-repeat;
}

#sleepy .storyIcon {
    background: url("../assets/icons/Sleepy.png") no-repeat;
}

#sleepy .storyIcon:hover,
#sleepy .storyIcon:active {
    background: url("../assets/icons/Sleepy_Hover.png") no-repeat;
}

#cinderella .storyIcon {
    background: url("../assets/icons/Cinderella.png") no-repeat;
}

#cinderella .storyIcon:hover,
#cinderella .storyIcon:active {
    background: url("../assets/icons/Cinderella_Hover.png") no-repeat;
}

#brave .storyIcon {
    background: url("../assets/icons/Brave.png") no-repeat;
}
#brave-soon .storyIcon {
    background: url("../assets/icons/Brave.png") no-repeat;
}

#brave .storyIcon:hover,
#brave .storyIcon:active {
    background: url("../assets/icons/Brave_Hover.png") no-repeat;
}

#mermaid .storyIcon {
    background: url("../assets/icons/Mermaid.png") no-repeat;
}

#mermaid .storyIcon:hover,
#mermaid .storyIcon:active {
    background: url("../assets/icons/Mermaid_Hover-1.png") no-repeat;
}

#beauty .storyIcon {
    background: url("../assets/icons/Beaty.png") no-repeat;
}

#beauty-soon .storyIcon {
    background: url("../assets/icons/Beaty_hover.png") no-repeat;
}

#beauty .storyIcon:hover,
#beauty .storyIcon:active {
    background: url("../assets/icons/Beaty_hover.png") no-repeat;
}

#snow .storyIcon {
    background: url("../assets/icons/Snow.png") no-repeat;
}

#snow .storyIcon:hover,
#snow .storyIcon:active {
    background: url("../assets/icons/Snow_Hover.png") no-repeat;
}
#snow-text{
    padding: 0 7px;
}