.section-parallax {
    overflow: hidden;
    width: 100%;
    height: 100vh;
    min-height: 360px;
    position: relative;
}

.section-parallax #scene {
    height: 100%;

    /*pointer-events: auto !important;*/
}

.section-parallax #scene .layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.section-parallax #scene .layer img{
    position: absolute;
    pointer-events: auto;
    transition: all .3s ease-in;
}

.section-parallax #scene .layer img.hover:hover {
    cursor: crosshair;
    -webkit-filter: drop-shadow(3px 3px 0 yellow)
    drop-shadow(-3px -3px 0 yellow);
drop-shadow(-3px 3px 0 yellow);
drop-shadow(3px -3px 0 yellow);
    filter: drop-shadow(3px 3px 0 yellow)
    drop-shadow(-3px -3px 0 yellow);
drop-shadow(-3px 3px 0 yellow);
drop-shadow(3px -3px 0 yellow);
}

.layer-1 {
    position: absolute;
    height: 110%;
    width: 110%;
    background-position: center center;
    background-repeat: no-repeat;
    bottom: -4%;
    left: -4%;
    background-size: cover;
}

.layer-2 {
    position: absolute;
    height: 110%;
    width: 110%;
    background-position: center center;
    background-repeat: no-repeat;
    bottom: -4%;
    left: -4%;
    background-size: cover;
}

.layer-3 {
    position: absolute;
    height: 100%;
    width: 110%;
    background-position: top right;
    background-repeat: no-repeat;
    top: 0%;
    right: -4%;
    background-size: cover;
}

.layer-4 {
    position: absolute;
    height: 106%;
    width: 106%;
    background-position: center bottom;
    background-repeat: no-repeat;
    bottom: -3%;
    left: -3%;
    background-size: 100%;

    /*pointer-events: none;*/
}

.layer-5 {
    /*Jaguar*/
    width: 400px;
    height: auto;
    top: 20%;
    left: -2%;
}

.layer-6 {
    /*Arbol*/
    width: auto;
    height: 700px;
    bottom: 0;
    left: -120px;
}
.layer-7 {
    /*Capibara*/
    width: 150px;
    height: auto;
    top: 58%;
    left: 55%;
}
.layer-8 {
    /*Sabila*/
    width: 300px;
    height: auto;
    bottom: 2%;
    left: -1%;
}
.layer-9 {
    /*Turista*/
    width: 200px;
    height: auto;
    bottom: 0%;
    left: 15%;
}
.layer-10 {
    /*Cazador*/
    width: 200px;
    height: auto;
    top: 32%;
    right: 5%;
    transform: rotate(-8deg);
}
.layer-11 {
    /*Jaguares*/
    width: 400px;
    height: auto;
    bottom: 1%;
    right: 5%;
}
.layer-12 {
    /*Parabas*/
    width: 200px;
    height: auto;
    top: 10%;
    left: 25%;
}

.content-modals {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: transparent;
    /*z-index: 99*/

    pointer-events: none;
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto;
    }
}
.modal-backdrop.show {
    opacity: .55; /*.35*/
}
/*.section-clickandpoint .modal-content {*/
.modal-content {
    width: 600px;
    height: 600px;
    border-radius: 50%;
}
#modalItems.modal .close {
    position: absolute;
    top: 40px;
    right: 14px;
    opacity: 1;
    color: #fff;
    text-shadow: unset;
    font-size: 35px;
}
.modal-content {
    background-color: transparent;
}
.modal-content .modal-body::before {
    content: "";
    background-image: url("../img/jaguar_info.png");
    position: absolute;
    top: 55px;
    right: -210px;
    width: 300px;
    height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
}
.modal-content::before {
    content: "";
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 600px;
    background-color: #fff;
    border-radius: 50%;
    z-index: -1;
}
.modal-body .box-content-circle {
    padding: 60px;
    text-align: center;
}
.modal-body .box-content-circle img {
    height: 170px;
    margin-bottom: 30px;
}
.modal-body .box-content-circle h3 {
    font-family: RifficFree, sans-serif;
    font-size: 1.75rem;
    line-height: 1.2;
    color: #333;
    letter-spacing: .025em;
    margin-bottom: 20px;
}
.modal-body .box-content-circle .slide-descr {
    font-family: Montserrat, sans-serif;
    font-size: 1rem;
    line-height: 1.4;
}
.btn-modal {
    position: absolute;
    pointer-events: auto;
}

.btn-modal.item-jaguar1 {
    top: 25%;
    left: 5%;
}
.btn-modal.item-jaguar2 {
    top: 28%;
    left: 9%;
}
.btn-modal.item-arbol {
    top: 45%;
    left: 14%;
}
.btn-modal.item-habitat {
    top: 25%;
    left: 50%;
}
.btn-modal.item-capibara {
    top: 55%;
    left: 58%;
}
.btn-modal.item-jaguares{
    bottom: 20%;
    right: 25%;
}
.btn-modal.item-cazador{
    top: 33%;
    right: 13%;
}

@media (max-width: 767.98px) {
    .modal-content .modal-body::before {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .layer-5 {
        /*Jaguar*/
        width: 280px;
        height: auto;
        top: 22%;
        left: -3%;
    }
    .layer-6 {
        /*Arbol*/
        width: auto;
        height: 650px;
        bottom: -20px;
        left: -180px;
    }
    .layer-7 {
        /*Capibara*/
        width: 120px;
        height: auto;
        top: 58%;
        left: 50%;
    }
    .layer-8 {
        /*Sabila*/
        display: none;
    }
    .layer-9 {
        /*Turista*/
        width: 150px;
        height: auto;
        bottom: 4%;
        left: -5%;
    }
    .layer-10 {
        /*Cazador*/
        width: 160px;
        height: auto;
        top: 35%;
        right: 0%;
    }
    .layer-11 {
        /*Jaguares*/
        width: 305px;
        height: auto;
        bottom: 15%;
        right: -34%;
    }
    .layer-12 {
        /*Parabas*/
        width: 120px;
    }



    .btn-modal.item-jaguar1 {
        top: 24%;
        left: 8%;
    }
    .btn-modal.item-jaguar2 {
        top: 26%;
        left: 20%;
    }
    .btn-modal.item-arbol {
        top: 38%;
        left: 32%;
    }
    .btn-modal.item-habitat {
        top: 25%;
        left: 50%;
    }
    .btn-modal.item-capibara {
        top: 58%;
        left: 58%;
    }
    .btn-modal.item-jaguares{
        bottom: 28%;
        right: 6%;
    }
    .btn-modal.item-cazador{
        top: 38%;
        right: 14%;
    }
}



.btn-point-modal {
    box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    animation: pulse-white 2s 4ms infinite;
}

@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
    }
}
@keyframes pulse-white {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}