body{
    animation: smooth 3s ;
}

@keyframes smooth{
    from{
        opacity: 0%;
    }
    to{
        opacity: 100%;
    }
}

*{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.alert{
    display:none;
}

.info-bar-bottom{
    display: flex;
    position: absolute !important;
    flex-direction: column;
    bottom: -100%;
    left: 0%;
    width: 100%;
    height: 40vh;
    background: #111111a4;
    z-index: 100;
    transition: .5s ease;
    backdrop-filter: blur(5px);
    h1{
        color: #fff;
        text-shadow: 2px 2px 2px #222;
        margin-bottom: .4vh;
        margin-left: 2vw;
        margin-top: -3vh;
        font-size: 3vw;
    }
    p{
        color: #fff;
        text-shadow: 2px 2px 2px #222;
        font-weight:600;
        margin-top: 0vh;
        margin-left: 2vw;
        font-size: 1.5vw;
    }
    .botones{
        display: flex;
        position: relative;
        justify-content: right;
        margin-right: 2vw;
        margin-top: 1vh;
    }
    .boton{
        background:#fff;
        padding:.3vw;
        padding-left: .7vw;
        padding-right: .7vw;
        justify-content: center;
        align-items: center;
        align-content: center;
        text-align: center;
        border-radius: 2vw;
        margin-right: .3vw;
        margin-top: 1vh;
        font-size: 1.5vw;
        cursor: pointer;
        transition: .3s ;
    }
    .boton:hover{
        transform: scale(1.05) rotate(360deg);
    }
    .carrousel{
        display: none;
        flex-direction: row;
        position: relative;
        margin-top: -2vh;
        margin-left: 2vw;
        margin-right: 2vw;
        .item{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-end;
            border-radius: 2vw;
            margin-right: 1vw;
            width: 16vw;
            height: 20vh;
            background: #fff;
            overflow: hidden;
            cursor: pointer;
            transition: .3s ease;
            box-shadow: 2px 2px 2px 2px #33333364;
            .description_info{
                display: none;
            }
            img{
                position: absolute;
                width: 100%;
                height: 100%;
                filter: brightness(0.8);
            }
            span{
                display: flex;
                position: relative;
                width: 90%;
                margin-left: 1.5vw;
                margin-bottom: 0vh;
                font-weight: 1000;
                color: #fff;
                font-size: 1.2vw;
                text-shadow: 2px 2px 2px #000;
            }
            p{
                display: flex;
                position: relative;
                width: 90%;
                bottom: -9%;
                left: 0%;
                margin-left: 1.5vw;
                margin-top: -2vh;
                margin-bottom: 2vh;
                font-weight: 500;
                color: #fff;
                font-size: 1vw;
                text-shadow: 2px 2px 2px #000;
            }
        }
        .item:hover{
            transform: scale(1.02);
            box-shadow: 2px 2px 2px 2px #77777764;
            filter: brightness(1.3);
        }
    }
}

/** Barra de navegación*/
.bar{
    display: flex; 
    position: absolute; 
    border-radius: 0vw; 
    max-width: 50%; 
    max-height: 100%;
    width: 0%;
    height: 100%;
    top: 0%; 
    left: 4%; 
    z-index: 99; 
    background: #fff;
    box-shadow: 2px 2px 2px #eee;
    overflow: hidden;
    transition: .5s ease;
    .top-contenido{
        display: inline-flex;
        flex-direction: column;
        margin: 0vw;
        margin-top: 0vh;
        margin-left: 1vw;
        margin-bottom: 0vh;
        width: 100%;
        height: fit-content;
        max-height: 15vw;
        background: #fff;
        .item{
            background: rgb(6, 115, 203);
            color: #fff;
            width: 25%;
        }
        .bottom-contenido{
            display: inline-flex;
            margin-top: .5vh;
            width: 100%;
            height: 100%;
            z-index: 100;
            .item{
                overflow: hidden;
                background: lightblue;
                color: rgb(6, 115, 203);
                padding-top: .1vw;
                padding-bottom: .1vw;
                font-weight: 1000;
            }
        }
    }
    .contacts{
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 2%;
        top: 25%;
        padding: .4vh !important;
        border-radius: 1vh;
        background: #f7f7f7;
        .items{
            display: flex;
            background: #eee;
            width: 4vw;
            height: 4vw;
            border-radius: .6vw;
            transition: .5s ease;
            cursor: pointer;
            z-index: 20;
            justify-content: center;
            align-items: center;
            align-content: center;
            font-size: 2vw;
            margin-top: 1vw;
            margin-top: .5vw;
            margin-bottom: .5vw;
            a{
                color: rgb(1, 107, 193) !important;
                text-decoration:none;
            }
        }
        .items:hover{
            box-shadow: #888 2px 2px 2px;
        }
    }
    .img-contenido{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        border-top: .2vw #ddd solid;
        animation: disappear .3s;
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
            max-width: 45%;
            max-height: 90%;
            aspect-ratio: 9/16;
            margin-left: 30%;
        }
        .bottom-contenido{
            height: fit-content;
            left: 0%;
            margin: 0px;
            .item{
                width: 9vw;
            }
        }
    }
    .contenido{
        display: flex;
        position: absolute;
        flex-direction: column;
        width: 100%;
        height: 100%;
        overflow: hidden;
        left: 0%;
        top: 10%;
        justify-content: center;
        align-items: center;
        align-content: center;
        overflow: hidden;
    }

/** Botones de la Barra de navegación*/
.button{
    span{
        display: none;
    }
    display: flex;
    cursor: pointer;
    width: 8%; 
    height: 8%; 
    background: none;
    position: absolute; 
    transition: .3s ease;
    justify-content: center;
    align-items: center;
    align-content: center;
    .pegman{
        display: none;
        object-fit: cover;
        transform-origin: center bottom;
        transform: translate(0,-40%);
        margin: 0px;
        width: 2vw !important;
        height: 8vh !important;
        max-width: 1.5vw !important;
        max-height: 8vh !important;
        z-index: 1;
    }
}
.button:hover{
    background: #ffff007c ;
}

    .cerrar_bar{
        display: flex;
        position: relative;
        margin-top: .6vh;
        margin-left: 1vw;
        margin-bottom: .3vh;
        padding-left: 1%;
        padding-right: 1%;
        height: fit-content;
        width: fit-content;
        border-radius: 100%;
        background: #fff;
        border: .1vw solid #eee;
        cursor: pointer;
        font-size: 2.5vw;
        z-index: 10;
        i{
            margin: .5vw;
            margin-left: .6vw;
            margin-right: .6vw;
        }
    }
    .item{
        width: 5vw;
        height: 4vh;
        margin: .05vw;
        justify-content: center;
        align-items: center;
        align-content: center;
        color: #fff;
        background: #333;
        box-shadow: 2px 2px #999;
        text-align: center;
        cursor: pointer;
        transition: .2s ease;
        font-weight: bold;
    }
    .item:hover{
        transform: scale(1.03);
    }
}

/** Barra de Información Superior*/
.info-bar{
    display: flex;
    flex-direction: column;
    position: absolute;
    background: #111111a4;
    right: -25%;
    top: 2%;
    width: 20vw;
    padding: .5vw;
    min-height: 9vh;
    max-height: fit-content;
    z-index: 100;
    color: #fff;
    border-radius: .5vw;
    animation: appear-right 1s forwards;
    overflow: hidden;
    backdrop-filter: blur(5px);
    h2{
        display: flex;
        position: relative;
        width: 80%;
        line-height: 1;
        font-weight: 1000;
        text-align: left;
        justify-content: flex-start;
        font-size: 1.2vw;
        margin-top: 2vh;
        margin-bottom: 1vh;
    }
    span{
        margin-top: 0vh;
        width: 85%;
        display: flex;
        position: relative;
    }
    .content{
        display: flex;
        position: relative;
        flex-direction: column;
        left: 0%;
        top: 0%;
        height: fit-content;
    }
    .cerrar_info_bar{
        display: flex;
        position: absolute;
        justify-content: center;
        right: 0%;
        top: 0%;
        align-items: center;
        margin-right: 1vw;
        font-size: 1.3vw;
        cursor: pointer;
        height: 100%;
        padding-left: .5vw;
        padding-right: .5vw;
        overflow: hidden;
        transition: .5s ease;
    }
    .expand_info_bar{
        display: flex;
        position: absolute;
        justify-content: center;
        right: 9%;
        top: 0%;
        align-items: center;
        margin-right: 1vw;
        font-size: 1.3vw;
        cursor: pointer;
        height: 100%;
        padding-left: .5vw;
        padding-right: .5vw;
        overflow: hidden;
        transition: .5s ease;
    }
    .expand_info_bar:hover, .cerrar_info_bar:hover{
        background: #000;
    }
}

@keyframes appear-right{
    from{
        right: -20%;
    }
    to{
        right: 2%;
    }
}

.opener{
    display: flex;
    flex-direction: column;
    position: absolute;
    max-width: 4vw;
    max-height: 100;
    width: 100%;
    height: 100%;
    left: 0% !important;
    top: 0% !important;
    background: #fff;
    z-index: 99; 
    transition: .5s ease;
    animation: appear-left 1s forwards;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    font-weight: 1000;
    font-size: 2.5vw;
    border-radius: 0vw;
    opacity: 40%;
    backdrop-filter: blur(2px);
    overflow: hidden;
    .items{
        cursor: pointer;
        display: flex;
        position: relative;
        margin-top: 20%;
        margin-bottom: 30%;
        width: 100%;
        transition: .3s ease;
        cursor: pointer;
        z-index: 20;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-size: 2vw;
        text-align: center;
        padding: 1vh;
        a{
            text-decoration:none !important;
            width: 100%;
        }
        i{
            color: #000;
        }
    }
    .items:hover{
        background: #eee;
    }
    }

.opener:hover{
    opacity: 100%;
}

@keyframes appear-left{
to{
    left: 2%;
    top: 2%;
}
}

@keyframes disappear-left{
    to{
        left: -30%;
    }
    }

@keyframes disappear-right{
    from{
        right: 2%;
        top: 2%;
    }
    to{
        right: -30%;
    }
}

    .img-contenido.img-planta-alta{
    display: none;
}

.img-contenido.img-seccion-taller{
    display: none;
    animation: .3s move-left;
}

@keyframes disappear{
    from{
        width: 0%;
        height:0%;
    }
    to{
        width: 100%;
        height: 100%;
    }
}

@keyframes move-left{
    from{
        margin-left:-100%;
    }
    to{
        margin-left:0%;
    }
}

    /**Barra de Información detallada*/
.info-screen{
    display: none;
    position: absolute;
    flex-direction: column;
    width: 50%;
    height: 90%;
    right: 25%;
    top: 5%;
    align-items: center;
    border-radius: 1vw;
    background-color: #111111a4;
    z-index: 1000000 !important;
    .cerrar_info_screen{
        position: absolute;
        top: 2%;
        right: 3%;
        font-size: 2vw;
        color: #fff;
        cursor: pointer;
        border-radius: 100%;
        padding-left: .5vw;
        padding-right: .5vw;
        transition: .3s ease;
    }
    .cerrar_info_screen:hover{
        background: #666;
    }
    #titulo{
        margin-top: 5vh;
        position: relative;
        font-size: 2vw;
        color: #fff;
        font-weight: 1000;
    }
    #subtitulo{
        margin-bottom: 1vh;
        position: relative;
        font-size: 1.5vw;
        color: #fff;
        font-weight: 500;
    }
    #descripcion_item{
        width: 93%;
        text-align: justify;
        margin-top: 5vh;
        color: #fff;
        font-size: 1.2vw;
        font-weight: 600;
        overflow-y: scroll !important;
        min-height: 13vh;
        max-height: 38%;
        padding-right: 2%;
    }
    #descripcion_item::-webkit-scrollbar{
        width: .8vw;
        background: #66666688;
        display: flex;
    }
    #descripcion_item::-webkit-scrollbar-thumb{
        width: 1vw;
        color: #000;
        background: #111;
        display: flex;
    }
    img{
        position: relative;
        max-width:80%;
        max-height: 60%;
    }
}


@media (max-width:650px){
    .alert{
        display:flex;
        width: 100%;
        height:100%;
        position: absolute;
        justify-content: center;
        align-items: center;
        align-content: center;
        margin: 0px;
        top: 0%;
        left: 0%;
        background: #ffffff43;
        backdrop-filter: blur(2px);
        z-index: 150;
    }
    .rotate_phone{
        display: flex;
        flex-direction: column;
        background: #333333b8;
        width: 90%;
        height: fit-content;
        padding: 1.5vh;
        border-radius: 1vh;
        justify-content: center;
        align-items: center;
        align-content: center;
        h1{
            color: #eee;
            text-align: center;
        }
        i{
            text-align: center;
            font-size: 7rem;
            color: #eee;
            animation: rotation 2.5s infinite;
            display: flex;
            position: relative;
            transition: 1s;
            transform: rotate(0deg);
        }
        }
    }

    @keyframes rotation{
        to{
            transform: rotate(-90deg);
        }
    }

@media (max-width:1100px){
    @media (max-height:768px){
        .alert{
            display:none;
        }
        body{
            overflow: hidden;
        }
        .opener{
            border-radius: 0px;
            max-width: 10%;
            max-height: 100%;
            i{
                font-size: 4vw;
            }
        }

        .bar{
            max-width: 60%;
            max-height: 100%;
            border-radius: 1vh;
            left: 0%;

            .cerrar_bar{
                font-size: 4vw;
                justify-content: center;
                align-items: center;
                align-content: center;
                margin-top: 1vh;
                width: 10vw;
                height: 14vh;
                border-radius: .5vh;
            }
            .contacts{
                top: 20%;
                left: 2%;
                background: #e5e5e5;
                height: fit-content;
                padding: .5vh;
                .items{
                    a{
                        color: rgb(1, 107, 193) !important;
                        text-decoration:none;
                    }
                    font-size: 9vh;
                    width: 8vw;
                    height: 16vh;
                    background: lightblue;
                }
            }
            .top-contenido{
                width: 100%;
                justify-content: flex-start;
                margin-top: 0vh;
                .item{
                    margin-left: 1vw;
                    width: 30%;
                    height:20%;
                }
            }
            .bottom-contenido{
                margin-top: 0px !important;
                top: 0% !important;
                margin-left: 1vw;
                .item{
                    margin-left: 0px !important;
                    font-size: 100%;
                    width: 30%;
                    height:25%;
                }
            }
        }

        /**Barra de Información detallada*/
        .info-screen{
            display: none;
            position: absolute;
            flex-direction: column;
            width: 50%;
            height: 100%;
            right: 25%;
            top: 0%;
            align-items: center;
            border-radius: 1vw;
            background-color: #111111a4;
            z-index: 1000000 !important;
            .cerrar_info_screen{
                position: absolute;
                top: 2%;
                right: 3%;
                font-size: 2vw;
                color: #fff;
                cursor: pointer;
                border-radius: 100%;
                padding-left: .5vw;
                padding-right: .5vw;
                transition: .3s ease;
            }
            .cerrar_info_screen:hover{
                background: #666;
            }
            #titulo{
                margin-top: 5vh;
                position: relative;
                font-size: 2vw;
                color: #fff;
                font-weight: 1000;
            }
            #subtitulo{
                margin-bottom: 1vh;
                position: relative;
                font-size: 1.5vw;
                color: #fff;
                font-weight: 500;
            }
            #descripcion_item{
                width: 93%;
                text-align: justify;
                margin-top: 5vh;
                color: #fff;
                font-size: 1.2vw;
                font-weight: 600;
                overflow-y: scroll !important;
                min-height: 13vh;
                max-height: 50%;
                padding-right: 2%;
            }
            #descripcion_item::-webkit-scrollbar{
                width: .8vw;
                background: #66666688;
                display: flex;
            }
            #descripcion_item::-webkit-scrollbar-thumb{
                width: 1vw;
                color: #000;
                background: #111;
                display: flex;
            }
            img{
                position: relative;
                max-width:80%;
                max-height: 60%;
            }
        }
        .info-bar{
            width: 30vw;
            max-width: 40vw;
            .cerrar_info_bar{
                text-align: center;
                justify-content: center;
                align-items: center;
                align-content: center;
                width: 3vw;
                i{
                    font-size: 3vw;
                    margin: 0px;
                }
            }
            .expand_info_bar{
                text-align: center;
                justify-content: center;
                align-items: center;
                align-content: center;
                width: 3vw;
                right: 15% !important;
                i{
                    font-size: 3vw;
                    margin: 0px;
                }
            }
            h2{
                font-size: 4vh !important;
                width: 70% !important;
            }
            span{
                font-size: 3vh;
                width: 80%;
            }
        }
        .info-bar-bottom{
            height: 50vh;
            .cerrar_bottom_bar.boton{
                font-size: 3vw !important;
                width: 3vw;
            }
            h1{
                margin-top: -8vh;
            }
            p{
                margin-bottom: 5vh;
            }
        }
    .carrousel{
        width: 95%;
        overflow-x: scroll;
        .item{
            max-width: 30vw;
            min-width: 30vw;
            width: 100% !important;
            min-height: 30vh;
            span{
                font-size: 2vw !important;
            }
            p{
                font-size: 2vw !important;
                margin-bottom: 3vh !important;
            }
        }
    }
    }
}