/* Distancia do topo 1874px */

section#collabs {
    /* LINK */
    z-index: 0;
}

section#collabs .collabs-background {
    position: absolute;
    width: 100%;
    height: 100%;

    opacity: 0.3;
    z-index: 0;
}

section#collabs .collabs-background img {
    width: 100%;
    height: 100%;

    -o-object-fit: cover;
    object-fit: cover;
}


section#collabs .container {
    max-width: 100%;
    height: 100%;

    position: relative;

    padding: 0;
}

section#collabs .container .hidden  {
    width: 100%;
    height: 100%;

    overflow: hidden;
    position: relative;
}

.parallax-image {
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;

    -webkit-filter: drop-shadow(-8px 12px 8px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(-8px 12px 8px rgba(0, 0, 0, 0.4));

    overflow: hidden;
    border-radius: 50%;
}

.parallax-image:hover {
    z-index: 5 !important;
}

/* Resultado do posicionamento inicial 
(as linhas são a borda da section)
----1--2----
   3   4
     5 6
--7---------     
*/
/*Os valores de min width são 5% menores do que o tamanho que ta no figma  */

.parallax-image .foreground { 
    padding: 70px 15px;
}

.parallax-image#image_1 { width: 24.5%; min-width: 321px; /* height: 43.7%; */ top: calc(-12.0% + 532px) ; left: 20%  ; z-index: 3; }
.parallax-image#image_2 { width: 30.0%; min-width: 423px; /* height: 57.5%; */ top: calc(-26.6% + 1031px); left: 51%  ; z-index: 3; }
.parallax-image#image_3 { width: 31.5%; min-width: 445px; /* height: 52.4%; */ top: calc(20.7% + 1264px) ; left: 5.2% ; z-index: 2; }
.parallax-image#image_4 { width: 30.0%; min-width: 423px; /* height: 53.3%; */ top: calc(17.9% + 773px) ; left: 58.8%; z-index: 2; }
.parallax-image#image_5 { width: 22.7%; min-width: 320px; /* height: 43.7%; */ top: calc(66.9% + 988px) ; left: 35.2%; z-index: 1; }
.parallax-image#image_6 { width: 24.5%; min-width: 346px; /* height: 40.4%; */ top: calc(82.3% + 1375px) ; left: 64.5%; z-index: 1; }
.parallax-image#image_7 { width: 31.4%; min-width: 443px; /* height: 52.4%; */ top: calc(95.3% + 1891px) ; left: -1.0%; z-index: 0; }

.parallax-image img {
    width: 100%;
    height: auto;
}


@media only screen and (max-width: 1366px){
    .parallax-image#image_1 { top: calc(-12.0% + 357px);  }
    .parallax-image#image_2 { top: calc(-26.6% + 690px);  }
    .parallax-image#image_3 { top: calc(20.7% + 845px) ;  }
    .parallax-image#image_4 { top: calc(17.9% + 516px);   }
    .parallax-image#image_5 { top: calc(66.9% + 652px);   }
    .parallax-image#image_6 { top: calc(82.3% + 910px);   }
    .parallax-image#image_7 { top: calc(95.3% + 1267px);  }

}

@media only screen and (max-width: 1130px){
    section#collabs {
        height: 100vh;
        min-height: 800px;
    }

    .parallax-image .foreground { 
        padding: 45px 15px;
    }

    .parallax-image#image_1 { width: 48.0%; min-width: 0px; max-width: 281.6px; top: calc(00.5% + 166px ); left: 20% ; z-index: 2;}
    .parallax-image#image_2 { width: 41.9%; min-width: 0px; max-width: 246.1px; top: calc(12.0% + 526px ); left: 56% ; z-index: 2;}
    .parallax-image#image_3 { width: 58.2%; min-width: 0px; max-width: 341.6px; top: calc(60.1% + 648px); left: 0.1%; z-index: 1;}
    .parallax-image#image_4 { width: 52.1%; min-width: 0px; max-width: 306.0px; top: calc(27.0% + 501px ); left: 7.0%; z-index: 2;}
    .parallax-image#image_5 { width: 57.4%; min-width: 0px; max-width: 336.9px; top: calc(70.4% + 306px ); left: 40.2%; z-index: 0;}
    .parallax-image#image_6 { width: 51.3%; min-width: 0px; max-width: 301.3px; top: calc(39.1% + 867px); left: auto; right: 0.0%; z-index: 2;}
    .parallax-image#image_7 { width: 53.5%; min-width: 0px; max-width: 313.6px; top: calc(99.3% + 668px); left: 6.0%; z-index: 1;}
}