/* ==========================
   EVISUN STUDIO
   VITRINA v1.1
========================== */

*{
    box-sizing: border-box;
}

html,
body{
    margin: 0;
    padding: 0;
}

body{
    background: #f6f1ea;
    font-family: Arial, Helvetica, sans-serif;
}


/* ==========================
   VITRINA
========================== */

.showcase{
    width: 100%;
    margin: 0;
    padding: 0;
}

.showcase-image{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.showcase-image > img{
    display: block;
    width: 100%;
    height: auto;
}


/* ==========================
   ΠΡΟΪΟΝ
========================== */

.product{
    position: absolute;

    display: block;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}


/* First Bloom
   Πρώτο ράφι - Ανθοδέσμες
*/

.first-bloom{
    left: 39.5%;
    top: 37.5%;

    width: 7%;

    z-index: 10;
}
/* Ανθοδέσμη Επετείου - δεύτερο ράφι */

.anniversary{
    left: 40%;
    top: 46%;
    width: 6%;
    z-index: 10;
}

.anniversary img{
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* Φωτογραφία προϊόντος */

.first-bloom img{
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

/* ==========================
   FIRST BLOOM - HOVER
========================== */

.first-bloom:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}

.first-bloom:hover img{
    transform: none;
}/* ΠΡΩΤΗ ΑΝΘΟΔΕΣΜΗ */
.first-bouquet{
    display: block;
    left: 40%;
    top: 57.5%;
    width: 5.5%;
    z-index: 10;
    }
    /* ΤΟΥΡΤΑ ΧΡΙΣΤΙΝΑΣ */

.christina-cake{
    display: block;
    left: 59%;
    top: 36%;
    width: 6%;
    z-index: 10;
    animation: floatCake 3s ease-in-out infinite;
}
.christina-cake img{
    width: 100%;
    height: auto;
    display: block;
}
    .first-bouquet img{
    width: 100%;
    height: auto;
    display: block;
    }
    /* HOVER - ΑΝΘΟΔΕΣΜΗ ΕΠΕΤΕΙΟΥ */

.anniversary:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}


/* HOVER - ΠΡΩΤΗ ΑΝΘΟΔΕΣΜΗ */

.first-bouquet:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}
/* ΑΝΘΟΔΕΣΜΗ ΜΕ ΑΡΚΟΥΔΑΚΙ */

.teddy-bouquet{
    display: block;
    position: absolute;
    left: 79%;
    top: 35.3%;
    width: 5%;
    z-index: 10;
}

.teddy-bouquet img{
    display: block;
    width: 100%;
    height: auto;
}


/* ==========================
   ΚΙΝΗΣΗ ΤΟΥΡΤΑΣ
========================== */

@keyframes floatCake{
    0%, 100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-12px);
    }
}
/* ==========================
   ΚΙΝΗΣΗ ΑΡΚΟΥΔΑΚΙΟΥ
========================== */

@keyframes teddySway{
    0%, 100%{
        transform: translateX(0);
    }

    50%{
        transform: translateX(8px);
    }
}

.teddy-bouquet{
    animation: teddySway 3s ease-in-out infinite;
}
/* ΑΝΘΟΔΕΣΜΗ ΡΟΖ & ΜΠΕΖ */

.dec02{
    display: block;
    position: absolute;
    left: 78%;
    top: 49%;
    width: 8%;
    z-index: 10;
}

.dec02 img{
    display: block;
    width: 100%;
    height: auto;
}
/* HOVER - ΑΝΘΟΔΕΣΜΗ ΡΟΖ & ΜΠΕΖ */

.dec02:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}
/* Ο ΚΗΠΟΣ ΤΗΣ ΠΕΠΗΣ */

.basket01{
    display: block;
    position: absolute;
    left: 88%;
    top: 35%;
    width: 8%;
    z-index: 10;
}
.basket01 img{
    display: block;
    width: 100%;
    height: auto;
    }
    .glass01{
    left: 49%;
    top: 37%;
    width: 7%;
    z-index: 10;
}

.glass01 img{
    display: block;
    width: 100%;
    height: auto;
}
.glass02{
    left: 49%;
    top: 46%;
    width: 6.5%;
    z-index: 10;
}

.glass02 img{
    display: block;
    width: 100%;
    height: auto;
}
.cake02{
    left: 59%;
    top: 47%;
    width: 5%;
    z-index: 10;
}

.cake02 img{
    display: block;
    width: 100%;
    height: auto;
}
.glass01:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}

.glass02:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}

.cake02:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}
.basket01:hover{
    transform: translateY(-5px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.30));
    cursor: pointer;
}