/*=====HOME CSS=====
========2017=======*/

/*===BUBLES HOME===*/

.bubbles-size {
    height: 380px;
    z-index: 999;
}
.bubbles-container {
    width: 100%;
    overflow: hidden;
    position: absolute;
    height: 100%;
}
/* GPU OPTIMISATION DONT REMOVE THIS */
.gpu,
.gpu * {
    backface-visibility: hidden;
    perspective: 1000;
}
.bubble {
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: center;
    opacity: 0;
}
.bubble:hover {
    z-index: 9999;
}
.bubble:hover .header::before {
    filter: blur(3px);
    transition: 0.2s ease-in;
}
.bubble:hover:after {
    opacity: 1;
    transform: translateY(0px);
    transition: all 0.4s;
}
.bubble img {
    width: 150px;
    border-radius: 50%;
    box-shadow: 0px 2px 15px 0px #bbbbbb;
}
.blog-bubble:after {
    content:"Créer mon blog";
}
.e-commerce-bubble:after {
    content:"Ouvrir ma boutique";
}
.entreprise-bubble:after {
    content:"Mon entreprise sur le web";
}
.photo-bubble:after {
    content:"Exposer mes photos";
}
.event-bubble:after {
    content:"Créer l'événement";
}
.voyages-bubble:after {
    content:"Raconter mes voyages";
}
.artiste-bubble:after {
    content:"Créer un site d'artiste";
}
.restaurant-bubble:after {
    content:"Créer le site de mon restaurant";
}

.bubble:after {
    transform: translateY(-10px);
    position: relative;
    opacity: 0;
    bottom: 0;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    text-align: center;
    border: 1px solid #dbdbdb;
    padding: 5px 15px;
    border-radius: 38px;
    font-family: "Product Sans", sans-serif;
    transition: opacity 0.4s;
    font-weight: 400;
    color: #5a5a5a;
    transition: all 0.15s;
}
.mini-bubbles {
    opacity: 0;
    position: absolute;
}
.mini-bubbles img {
    border-radius: 100%;
}
.orange-shadow {
    box-shadow: 0 0 20px 0 #ffb775;
}
.blue-shadow {
    box-shadow: 0 0 20px 0 #759fff;
}
.green-shadow {
    box-shadow: 0 0 20px 0 #5edb5e;
}
.yellow-shadow {
    box-shadow: 0 0 20px 0 #ffdf75;
}

.op-first {
    animation: opUp 1.7s 0.1s ease-in-out forwards;
}
.op-second {
    animation: opUp 2s 0.4s ease-in-out forwards;
}
.op-third {
    animation: opUp 1.5s 1s ease-in-out forwards;
}
@keyframes opUp {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*-----------*/

/*===DYNAMIQUE ROW===*/

.dynamique-bloc {
    height: 600px;
}

.dynamique-bloc img {
    position: absolute;
}
    
.dyn-module {
    box-shadow: 0px 0px 7px 0px #d2d2d2;
    transform: scale(0);
    opacity: 0;
}
    
.dyn-bubble {
    opacity: 0;
}
    
.z-0 {
    z-index: 10;
}
    
.z-1 {
    z-index: 50;
}
    
.dynamique-bloc #module-agenda {
    width: 246px;
    top: 50%;
    left: 60%;
}
    
.dynamique-bloc #module-blog {
    width: 320px;
    top: 10px;
    left: 70%;
}
    
.dynamique-bloc #module-boutique {
    width: 330px;
    left: 10%;
}
    
.radius-border {
    border-radius: 50%;
}
    
.dynamique-bloc #green-bubble {
    left: 40%;
    z-index: 10;
    top: 70%;
}
    
.dynamique-bloc #orange-bubble {
    top: 55%;
    left: 5%;
}
    
.dynamique-bloc #blue-bubble {
    left: 45%;
}
    
.dynamique-bloc #yellow-bubble {
    left: 105%;
    top: 20%;
}
    
.dynamique-bloc #bg-dynamique {
    left: 30%;
    top: 20%;
    z-index: 5;
    opacity: 0.5;
    width: 600px;
} 

@keyframes scaleUp {   
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
    
@keyframes scaleUpBubble {    
0% {
opacity: 0;
transform: scale(0) translateY(-10px);
}  
100% {
opacity: 1;
transform: scale(1) translateY(-10px);
}
}

@keyframes FromUpToBelow {
0% {
transform: translateY(-10px);
}
25% {
transform: translateY(10px);
}
50% {
transform: translateY(-10px);
}
75% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}