/*=======================================
=            Frontend Styles            =
========================================*/

.infobleu {
	background: #46a985;
	position: fixed;
	top: 30vh;
	right: 0;
  height: 15em;
	color: white;
  z-index: 9;
	transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  display: flex;
  text-align: center;
  overflow-x: hidden!important;
  opacity:0;
  transition: .3s opacity;
}
#infotop {
  width: 40px;
}
#infotop img {
  width: 19px;
}

.opacity {
  opacity: 1!important;
  transition: .3s opacity;
}
.infotoggle {

  max-width: 0!important;
  width: 0;    
  transition: all 0.5s cubic-bezier(0, 1, 0, 1);
  overflow: hidden;
}
  #blue-owl-laptop {
    width:20em;
    max-width: 25em;
  }


.infobleu p, .infobleu a {
	color:white;
}
.infobleu p {
	margin-top: 1em;
}
.infobleu a {
	float: right;
	font-weight: 700;
}
.infobleu .bubble{
	   display: inline-block;
    background: white;
    width: .8em;
    height: .8em;
    border-radius: 50%;
    margin-top: 10px;
}
#blue-owl-laptop {
  display: flex;
align-items: center;
}
#infotop {
	text-transform: uppercase;
  writing-mode: sideways-lr;
  cursor: pointer;
  padding: 15px 5px;
}

.infobleu .roll-up {
  padding: 1em;
  text-align: left;
  line-height: 1em;
  border-left: 1px solid white;
}

#infotop .roll-up p {
  font-size: .9em;
}

/* load animation */
.loaded {
	animation: push 0.3s linear 1;
	opacity: 1!important;
}
@keyframes push{
  0%  {
  	transform: scale(0);
  	opacity:0;
  }
  50%  {
  	transform: scale(0.8);
  	opacity: 1;
  }
  100%  {transform: scale(1);} 

}

.infobleu .titre {
	font-weight: 700;
	line-height: 1.2em;
  font-size: 1.2em;
  height: 100%;
}
.infobleu .savoir_plus{
  text-decoration: underline;
  margin-top: 15px;
}

#infotop .titre {
  display: flex;
  align-items: center;
  justify-content: center;
}
.infobleu .owl-dots {
  display:none;
}
#blue-owl-laptop, #blue-owl-mobile {

    overflow: hidden;
    transition: all 0.5s cubic-bezier(0, 1, 0, 1);
}
.infotoggle {
  right:0!important;

    
  transition: all 0.5s cubic-bezier(0, 1, 0, 1);
}
#infotop-laptop, #infotop-mobile {
	cursor: pointer;
}
#infotop-mobile {
	padding-bottom: .8em;
}

.infobox {
	padding: 1em;
	border-radius: 25px;

}
.infobleu .owl-item p {
	text-align: left;
  margin: 0;
}

@media screen and (max-width: 600px) {
  .infobleu {
    display: none!important;
  }
}