@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200');

body{
  margin: 0px;
  background-color:white;
}

/* partie gauche */
.entreprise{
  width: 40%;
  height: 200px;
  background-color:white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  box-shadow: 0 10px 25px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) ;

}
.bloc{
  height: 200px;
  width: 100%;
  margin-bottom : 100px;
  display : flex;
  justify-content: space-between;

}
.deuxieme{
  width :40%;
  height:200px;
}


.premier{
  font-family: kayak-sans, sans-serif;
  font-size:18px;
  text-align:center;
  height:50px;
  display: table;
  color:green;
}


.image{
  width: 200px;
  height: 100px;
  background-color:whitesmoke ;
}

.image.is-4by3 {
  width: auto !important;
}

.test1{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 200px;
  background-color: rgb(248, 244, 244);
  border-radius: 20px;
  position: absolute;
  margin-left: 40px;
  left: 0px;
  transition: left 2s, transform 1s;
  white-space: nowrap;

}

.entreprise:hover .test1{
  left: 15%;
  transform: translateX(100.9%);
}


/*partie droite*/




.test2{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  height: 200px;
  background-color: rgb(248, 244, 244);
  border-radius: 20px;
  position: absolute;
  transition: left 2s, transform 1s;
  white-space: nowrap;

}

.entreprise:hover .test2{
  left: 15%;
  transform: translateX(-34%);
}
.premier1{
  font-family: kayak-sans, sans-serif;
  font-size:19px;
  text-align:center;
  height:50px;
  display: table;
  color:black;
}

/* Boutons personnalisés */
.custom-button {
  font-family: kayak-sans, sans-serif;
  font-size: 15px;
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 1px solid #dbdbdb;
  margin: 20px 20px 20px 20px;
  color: #363636;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius:4px;
}

#custom-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#custom-button a {
  position: relative;
  transition: all .45s ease-Out;
  color: #4a4a4a;
}

#circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #BFC0C0;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}

#custom-button:hover #circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
  background-color: var(--main-green);
}

#custom-button:hover a {
  color: var(--main-light-grey);
}

.card:hover {
  box-shadow: 0 0.5em 1em -0.125em rgba(15,15,15,.3), 0 0 0 1px rgba(10,10,10,.04)
}

#cloud_background {
  background-image: url('https://static.pexels.com/photos/414171/pexels-photo-414171.jpeg');
  background-size:cover;
  -webkit-animation: slidein 100s;
  animation: slidein 100s;

  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

@-webkit-keyframes slidein {
  from {background-position: top; background-size:3000px; }
  to {background-position: -100px 0px;background-size:2750px;}
}

@keyframes slidein {
  from {background-position: top;background-size:3000px; }
  to {background-position: -100px 0px;background-size:2750px;}

}