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

:root {
    --image-slider-width: min(80vw, 768px);
    --image-slider-handle-width: 50px;
}

.title{
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 160px;
    font-weight: 700;
    color: #01A560;
}

#place{
    text-align: center;
    font-size: 14px;
    color: #91692A;
    letter-spacing: 2px;
    margin: 20px 0 0 0;
    font-weight: bolder;
}

#image-slider,
#image-slider1,
#image-slider2,
#image-slider3,
#image-slider4,
#image-slider5,
#image-slider6,
#image-slider7,
#image-slider8,
#image-slider9,
#image-slider10,
#image-slider11,
#image-slider12,
#image-slider13,
#image-slider14 {
    position: relative;
    /* width: var(--image-slider-width); */
    width: 400px;
    height: 300px;
    overflow: hidden;
    border-radius: 1em;
    box-shadow: -4px 5px 10px 1px gray;
    cursor: col-resize;
}

#image-slider img,
#image-slider1 img,
#image-slider2 img,
#image-slider3 img,
#image-slider4 img,
#image-slider5 img,
#image-slider6 img,
#image-slider7 img,
#image-slider8 img,
#image-slider9 img,
#image-slider10 img,
#image-slider11 img,
#image-slider12 img,
#image-slider13 img,
#image-slider14 img {
    display: block;
    /* width: var(--image-slider-width); */
    width: 400px;
    /* height: auto; */
    max-height: 80vh;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}

#image-slider .img-wrapper,
#image-slider1 .img-wrapper1,
#image-slider2 .img-wrapper2,
#image-slider3 .img-wrapper3,
#image-slider4 .img-wrapper4,
#image-slider5 .img-wrapper5,
#image-slider6 .img-wrapper6,
#image-slider7 .img-wrapper7,
#image-slider8 .img-wrapper8,
#image-slider9 .img-wrapper9,
#image-slider10 .img-wrapper10,
#image-slider11 .img-wrapper11,
#image-slider12 .img-wrapper12,
#image-slider13 .img-wrapper13,
#image-slider14 .img-wrapper14 {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
    z-index: 1;
}

#image-slider .img-wrapper img,
#image-slider1 .img-wrapper1 img,
#image-slider2 .img-wrapper2 img,
#image-slider3 .img-wrapper3 img,
#image-slider4 .img-wrapper4 img,
#image-slider5 .img-wrapper5 img,
#image-slider6 .img-wrapper6 img,
#image-slider7 .img-wrapper7 img,
#image-slider8 .img-wrapper8 img,
#image-slider9 .img-wrapper9 img,
#image-slider10 .img-wrapper10 img,
#image-slider11 .img-wrapper11 img,
#image-slider12 .img-wrapper12 img,
#image-slider13 .img-wrapper13 img,
#image-slider14 .img-wrapper14 img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    /* filter: grayscale(100%); */
    transform: scale(1.2);
}

#image-slider .handle,
#image-slider1 .handle1,
#image-slider2 .handle2,
#image-slider3 .handle3,
#image-slider4 .handle4,
#image-slider5 .handle5,
#image-slider6 .handle6,
#image-slider7 .handle7,
#image-slider8 .handle8,
#image-slider9 .handle9,
#image-slider10 .handle10,
#image-slider11 .handle11,
#image-slider12 .handle12,
#image-slider13 .handle13,
#image-slider14 .handle14 {
    border: 0px solid red;
    position: absolute;
    top: 0;
    left: calc(50% - var(--image-slider-handle-width)/2);
    width: var(--image-slider-handle-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    z-index: 2;
}

#image-slider .handle-circle,
#image-slider1 .handle-circle,
#image-slider2 .handle-circle,
#image-slider3 .handle-circle,
#image-slider4 .handle-circle,
#image-slider5 .handle-circle,
#image-slider6 .handle-circle,
#image-slider7 .handle-circle,
#image-slider8 .handle-circle,
#image-slider9 .handle-circle,
#image-slider10 .handle-circle,
#image-slider11 .handle-circle,
#image-slider12 .handle-circle,
#image-slider13 .handle-circle,
#image-slider14 .handle-circle {
    width: var(--image-slider-handle-width);
    height: var(--image-slider-handle-width);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#image-slider .handle-line,
#image-slider1 .handle-line,
#image-slider2 .handle-line,
#image-slider3 .handle-line,
#image-slider4 .handle-line,
#image-slider5 .handle-line,
#image-slider6 .handle-line,
#image-slider7 .handle-line,
#image-slider8 .handle-line,
#image-slider9 .handle-line,
#image-slider10 .handle-line,
#image-slider11 .handle-line,
#image-slider12 .handle-line,
#image-slider13 .handle-line,
#image-slider14 .handle-line {
    width: 2px;
    flex-grow: 1;
    background: white;
}

@media (max-width: 768px) {
    :root {
        --image-slider-width: 90vw;
    }
}


/*== start of code for tooltips ==*/
.tool {
    cursor: help;
    position: relative;
    text-align: center;
} 
/*== common styles for both parts of tool tip ==*/
.tool::before,
.tool::after {
    left: 50%;
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tool:hover::before,
.tool:focus::before,
.tool:hover::after,
.tool:focus::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    z-index: 100; 
}


/*== pointer tip ==*/
.tool::before {
    border-style: solid;
    border-width: 1em 0.75em 0 0.75em;
    border-color: #3E474F transparent transparent transparent;
    bottom: 100%;
    content: "";
    margin-left: -0.5em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
    transform:  scale(.6) translateY(-90%);
} 

.tool:hover::before,
.tool:focus::before {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
}


/*== speech bubble ==*/
.tool::after {
    background: #01A560;
    border-radius: .25em;
    bottom: 107%;
    color: #EDEFF0;
    content: attr(data-tip);
    margin-left: -8.75em;
    padding: 1em;
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    transform:  scale(.6) translateY(50%);  
    width: 17.5em;
}

.tool:hover::after,
.tool:focus::after  {
    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
}