.favoris{
    position:absolute;
    top:0;
    right:16px;
}

.rel{
    position:relative;
}

body {
    background-color: #FAFAFA
}

.heartbox {
    /* position: absolute;
    top: 50%;
    left: 50%; */
    /* transform: translate(-50%, -50%) */
}

.favoris svg {
    cursor: pointer;
    overflow: visible;
    width: 60px;
    /*margin: 20px;*/
    margin-top:-15px;
}

svg #heart {
    transform-origin: center;
    animation: animateHeartOut .3s linear forwards
}

svg #main-circ {
    transform-origin: 29.5px 29.5px
}

.checkbox {
    display: none
}

.checkbox:checked+label svg #heart {
    transform: scale(0.2);
    fill: #E2264D;
    animation: animateHeart .3s linear forwards .25s
}

.checkbox:checked+label svg #main-circ {
    transition: all 2s;
    animation: animateCircle .3s linear forwards;
    opacity: 1
}

.checkbox:checked+label svg #heartgroup1 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup1 #heart1 {
    transform: scale(0) translate(0, -30px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup1 #heart2 {
    transform: scale(0) translate(10px, -50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup2 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup2 #heart1 {
    transform: scale(0) translate(30px, -15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup2 #heart2 {
    transform: scale(0) translate(60px, -15px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup3 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup3 #heart1 {
    transform: scale(0) translate(30px, 0px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup3 #heart2 {
    transform: scale(0) translate(60px, 10px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup4 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup4 #heart1 {
    transform: scale(0) translate(30px, 15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup4 #heart2 {
    transform: scale(0) translate(40px, 50px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup5 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup5 #heart1 {
    transform: scale(0) translate(-10px, 20px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup5 #heart2 {
    transform: scale(0) translate(-60px, 30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup6 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup6 #heart1 {
    transform: scale(0) translate(-30px, 0px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup6 #heart2 {
    transform: scale(0) translate(-60px, -5px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup7 {
    opacity: 1;
    transition: .1s all .3s
}

.checkbox:checked+label svg #heartgroup7 #heart1 {
    transform: scale(0) translate(-30px, -15px);
    transform-origin: 0 0 0;
    transition: .5s transform .3s
}

.checkbox:checked+label svg #heartgroup7 #heart2 {
    transform: scale(0) translate(-55px, -30px);
    transform-origin: 0 0 0;
    transition: 1.5s transform .3s
}

.checkbox:checked+label svg #heartgroup2 {
    opacity: 1;
    transition: .1s opacity .3s
}

.checkbox:checked+label svg #heartgroup3 {
    opacity: 1;
    transition: .1s opacity .3s
}

.checkbox:checked+label svg #heartgroup4 {
    opacity: 1;
    transition: .1s opacity .3s
}

.checkbox:checked+label svg #heartgroup5 {
    opacity: 1;
    transition: .1s opacity .3s
}

.checkbox:checked+label svg #heartgroup6 {
    opacity: 1;
    transition: .1s opacity .3s
}

.checkbox:checked+label svg #heartgroup7 {
    opacity: 1;
    transition: .1s opacity .3s
}

@keyframes animateCircle {
    40% {
        transform: scale(10);
        opacity: 1;
        fill: #DD4688
    }

    55% {
        transform: scale(11);
        opacity: 1;
        fill: #D46ABF
    }

    65% {
        transform: scale(12);
        opacity: 1;
        fill: #CC8EF5
    }

    75% {
        transform: scale(13);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: .5
    }

    85% {
        transform: scale(17);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: .2
    }

    95% {
        transform: scale(18);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: .1
    }

    100% {
        transform: scale(19);
        opacity: 1;
        fill: transparent;
        stroke: #CC8EF5;
        stroke-width: 0
    }
}

@keyframes animateHeart {
    0% {
        transform: scale(0.2)
    }

    40% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes animateHeartOut {
    0% {
        transform: scale(1.4)
    }

    100% {
        transform: scale(1)
    }
}


/*///////////////////////////////bootstrap icons//////////////////*/


#chevron-left-carousel{
    position: absolute;
    left: 3%;
    top: 50%;

}

#chevron-right-carousel{
    position: absolute;
    right: 3%;
    top: 50%;

}