/** ----------------------------------------------------------------------------
 *                         Todos los derechos Reservados
 *                               Softipal S.A.S 2020
 *  ----------------------------------------------------------------------------
 *  Nombre:       touristView.css
 *  Ruta:         /public/css/tourist/
 *  Descripción:  Estilos Generales para la página de turista
 *  Fecha:        27/01/2020
 *  Autor:        Alejadnro González Flórez
 *  Versión:      1.0
 *  OD:           22489479
 *  ----------------------------------------------------------------------------
 *	 			Histórico de cambios
 *  ----------------------------------------------------------------------------
 *	Fecha          OD        Autor        Descripción
 *  ----------------------------------------------------------------------------
 *     27/01/2020   22489479   AlejoFlorez0   Creación de cabecera de documentacion
 *  ----------------------------------------------------------------------------
 */

 /* Colocar color y tamaño al scroll de la 
    descripcion del sitio turistico
 */
html {
  --thumbBG: #90A4AE;
}
#iTP_text::-webkit-scrollbar {
  width: 5px;
}
#iTP_text {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
#iTP_text::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
#iTP_text::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

#scb_touristMap
{
    position: relative;
    height: 850px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/recursos/tourist/map.jpg);
}

.icon
{
    position: absolute;    
    cursor: pointer;
}

.icon-image
{
    position: relative;
    /* left: 38%; */
    width: 1.8em;
    height: 1.7em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/icons/ICONOS-57.png);
} 

.icon-image:hover
{
    position: relative;
    /* left: 38%; */
    width: 1.9em;
    height: 1.8em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/icons/ICONOS-57.png);
}

.icon-image:hover .tourist_icon_text
{
    display:block; 
    width: max-content;
    top: 1.8em;
    position:relative; 
} 

.tourist_icon_text
{
    
    font-size: 1em;
    background-color:#67adf3b8; 
    display:none;
}

.icon p
{
    color: white;
    width: 100%;
    text-align: center;
    font-family: Montserrat-Medium;
}

.tourist-info-container {
    min-height: 250px;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
    color: #001341;
}
.tourist-info-container img {
    max-width: 220px;
    max-height: 220px;
    margin: 0 auto 1em auto;
    display: block;
}

#tM_title
{
    /* position: absolute; */
    z-index: 8;
    /* top: 7%; */
    /* left: 17%; */
    width: 100%;
    color: #001341;
    font-size: 2em;
    line-height: 42px;
    text-align: center;
    text-transform: uppercase;
    font-family: Montserrat-Light;
}

#tM_title>span
{
    font-size: 14px;
}

.txt-mobile{
    display: none;
}


#tM_title>p>strong
{
    font-family: Montserrat-Bold;
}

#tM_title>p>span
{
    color: #FFBA00;
    font-family: Montserrat-Bold;
}

#scb_infoTourist
{
    height: 37vw;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/containers/contenedor6.png);
}

#iT_infoTourismPoint
{
    margin-top: 7rem;
    justify-content: center;
    align-items: center;
}

#iTP_image
{
    min-height: 100%;
}

#iTP_image>label
{
    width: 90%;
    color: white;
    font-size: 30px;
    line-height: 34px;
    font-family: Montserrat-Regular;
}

#iTP_image>label>strong
{
    color: #FFBA00;
    font-family: Montserrat-Bold;
}

#iTP_image>div
{
    position: absolute;
    z-index: 2;
    top: 36%;
    left: 18%;
    width: 13%;
    height: 13%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(../../images/icons/icono-0.png);
}

#iTP_image>img
{
    width: 22em;
}

#iTP_text
{
    position: relative;
    color: white;
    font-size: 15px;
    font-family: Montserrat-Light;
    overflow-y: scroll !important;
    height: 25vw;
}


#nav-turisticRoute-tab.active,
#nav-interesetSite-tab.active
{
    color: #FFBA00;
}

#nav-turisticRoute-tab:hover,
#nav-interesetSite-tab:hover
{
    color: #FFBA00;
}

@media (max-width: 981px) {

    #iTP_text{
        height: 60vw;
    }

    #scb_touristMap {
        background-size: 120% 100%;
        width: 1200px;
        scroll-snap-align:end;
    }
    .scrollaxisX{
        overflow: auto!important;
    }
    #scb_infoTour{
        height: 50vw;
    }
    #scb_infoTourist
    {
        height: 90vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(../../images/containers/contenedor6.png);
    }

}


@media (max-width: 700px)
{

    .txt-desktop{
        display: none;
    }

    .txt-mobile{
        display: block;
    }
    
    .icon-image
    {
        position: relative;
        width: 24vw;
        height: 5vw;
        background-size: 20% 100%;
        background-repeat: no-repeat;
        background-image: url(../../images/icons/ICONOS-57.png);
    }


    #scb_infoTourist
    {
        height: 200vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-image: url(../../images/containers/contenedor6.png);
    }
    #iTP_text{
        width: 80%;
        margin-top: 3rem;
        height: 70vw;
    }
    #iTP_image>img{
        width: 70%;
        margin: 0 auto;
        display: block;
    }
    #iTP_image>label{
        width: 100%;
    }

    /* #scb_touristMap
    {
        height: 100vw;
    } */

}

@media screen and (min-width: 1600px)
{
    #scb_touristMap
    {
        height: 1200px;
    }
}