/*----------------------------------------*/
/*  INFO
/*----------------------------------------*/

/*  Media Queries:          320px, 480px, 768px, 1024px, 1200px

/*--------------------------------------------------------------------------------*/
/*  SKETCH: DESKTOP
/*--------------------------------------------------------------------------------*/

.sketch-desktop {
    position: relative;
    max-width: 950px;
}

@media (max-width: 768px) {
    #sketch-title,
    #sketch-desktop {
        display: none;
    }
}

/*----------------------------------------*/
/*  IMG
/*----------------------------------------*/

.sketch-image {
    height: auto;
    display: block;
}

/*----------------------------------------*/
/*  BOXES & POINTS
/*----------------------------------------*/

.sketch-box,
.sketch-point {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 2;
    gap: 10px;
    transition: background-color 0.2s ease-in-out;
}
.sketch-box:hover {
    background-color: var(--contentbox-bg-hover);
    border-color: var(--contentbox-border-hover);
}

.sketch-point {
    width: 12px;
    height: 12px;
    background-color: blue;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.sketch-point::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
}
.sketch-point.sonar::after {
  animation: sonarPulse 1s ease-out infinite;
}
@keyframes sonarPulse {
  0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
  100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

.sketch-box {
    background: var(--contentbox-bg);
    padding: 6px 10px;
    border: 1px solid var(--contentbox-border);
    border-radius: 5px;
    font-family: sans-serif;
    font-size: 14px;
    white-space: nowrap;
}

.sketch-title,
.sketch-description {
    text-align: left;
}

.sketch-title {
    font-weight: bold;
    font-size: 16px;
}

.sketch-description {
    margin-top: 3px;
}

.sketch-box-left {
    left: 25px;
    transform: translateX(0);
    text-align: right;
    max-width: 40vw;
}

.sketch-box-right {
    right: 25px;
    transform: translateX(0);
    text-align: left;
    max-width: 40vw;
}

.sketch-box-left > div > img,
.sketch-box-right > div > img {
    max-width: 37px;
}

/*----------------------------------------*/
/*  SVG
/*----------------------------------------*/

.sketch-svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* padding: 0 25px; */
}