body, html{
  margin:0px !important;
  padding:0px !important;
  max-width: 100vw !important;
  clear: both !important;
}
  
  .content {
    font-family: "Montserrat", sans-serif;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
  }
  
  .content .box {
    background-color: transparent;
    border-radius: 3px;
    color: #fff;
    width: 800px;
    height: 550px;
    transform-style: preserve-3d;
    perspective: 2000px;
    transition: 0.4s;
    text-align: center;
  }
  .content .box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border-top: 20px solid #ED5565;
    border-left: 20px solid #ED5565;
    box-sizing: border-box;
  }
  .content .box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-bottom: 20px solid #ED5565;
    border-right: 20px solid #ED5565;
    box-sizing: border-box;
  }
  .content .box .fas {
    font-size: 25px;
    height: 50px;
    width: 50px;
    line-height: 50px !important;
    background-color: #ED5565;
    color: #ffffff;
  }
  .content .box .fa2 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
  .content .box .text {
    position: absolute;
    top: 30px;
    left: -30px;
    width: calc(100% + 60px);
    height: calc(100% - 60px);
    background-color: #2C3A47;
    border-radius: 3px;
    transition: 0.4s;
  }
  .content .box .text .fa1 {
    position: absolute;
    top: 0;
    left: 0;
  }
  .content .box .text div {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
    padding: 30px 60px;
    line-height: 1.5;
    box-sizing: border-box;
  }
  .content .box .text div h3 {
    font-family: kaushan script;  
    font-size: 40px;
    margin-bottom: 5px;
  }
  .content .box .text div p {
    font-size: 22px;
  }
  .content .box:hover {
    transform:  rotateY(-20deg) skewY(3deg);
  }
  .content .box:hover .text {
    transform: rotateY(20deg) skewY(-3deg);
  }


  /*#############################
             Services
   ############################*/
  
   .services i {
    opacity: 0;
    font-size: 18px;
    color: #fff;
    will-change: transform;
    -webkit-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  
  .services h2 {
    pointer-events: none;
  }
  .service1{
    display: inline-block;
  }
  .service2{
    display: inline-block;
    vertical-align: top;
  }
  
  .services .container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .services .container .card {
    position: relative;
    width: 500px;
    height: 200px;
    background-color: #fff;
    overflow: hidden;
  }
  .services .container .card:before {
    content: "";
    z-index: 99;
    position: absolute;
    top: -10px;
    left: 32px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #e6e5e1;
  }
  .services .container .card:after {
    content: "";
    z-index: 99;
    position: absolute;
    bottom: -10px;
    left: 32px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #e6e5e1;
  }
  .services .container .card ul {
    z-index: 99;
    position: absolute;
    left: 39px;
    top: 5px;
    list-style-type: none;
  }
  .services .container .card ul li {
    width: 2px;
    height: 2px;
    border-radius: 2px;
    margin: 6px 0;
    background-color: #e6e5e1;
  }
  .services .container .card h2 {
    z-index: 99;
    font-family: "Poppins", sans-serif;
    position: absolute;
    bottom: 0;
    right: 130px;
    font-size: 40px;
    font-weight: 700;
    color: #fff;
  }
  .services .container .card .fa-arrow-right {
    z-index: 100;
    position: absolute;
    right: 75px;
    bottom: 25px;
    font-size: 40px;
    cursor: pointer;
  }
  .services .container .card p {
    z-index: 99;
    position: absolute;
    top: 5px;
    right: 50px;
    color: #333;
    opacity: 0.7;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    writing-mode: vertical-lr;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .services .container .card .pic {
    z-index: 98;
    width: 400px;
    height: 200px;
    background-color: #eba0a7;
    background-size: 100% 100%;
  }
  .services .container .card .social {
    z-index: 98;
    position: absolute;
    left: 60px;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 180px;
    height: 64px;
    border-radius: 80px;
  }
  .services .container .card .social i:nth-of-type(1) {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }
  .services .container .card .social i:nth-of-type(2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }
  .services .container .card .social i:nth-of-type(3) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }
  .services .container .card .social i:nth-of-type(4) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
  }
  .services .container .card:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .services .container .card .button {
    z-index: 98;
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    background-color: #da4d1d;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    mix-blend-mode: hard-light;
  }
  .services .container .card .button i {
    font-size: 3rem;
  }
  .services .container .card:hover .button {
    transform: scale(16.5);
  }
  .services .container .card:hover p {
    color: #fff;
  }
  .services .container .card:hover .pic {
    filter: grayscale(0);
  }
  .services .container .card2 .button {
    background-color: #2b26c3;
  }
  .services .container .card3 .button {
    background-color: #ED5565;
  }
  .services .container .card4 .button {
    background-color: #57df52;
  }
  .services .container .card5 .button {
    background-color: #7120b4;
  }

/*##########################
        Buble section
##########################*/

.section-bubble, .section-bubble_type-b, .section-bubble_type-a, .section-bubble5, .section-bubble4, .section-bubble3, .section-bubble2, .section-bubble1 {
  margin-bottom: 20vw;
  position: relative;
}
.section-bubble:after, .section-bubble_type-b:after, .section-bubble_type-a:after, .section-bubble5:after, .section-bubble4:after, .section-bubble3:after, .section-bubble2:after, .section-bubble1:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20vw;
  background: url("") linear-gradient(90deg,#fb9d4073, #62bf4362);
  background-size: 100%;
  transform: translate(0, 100%);
}

.section-bubble1 {
  background-color: /*#fb9d40*/ #89ce72;
}
.section-bubble1:after {
  background-color: #FFD2B0;
  background-image: url("data:image/svg+xml, %3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20fill%3D%22%2389ce72%22%20viewBox%3D'0%200%201185%20248'%3E%20%20%0A%20%20%20%20%3Ccircle%20cx%3D'76'%20cy%3D'121.1'%20r%3D'20'%20class%3D'a'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'870'%20cy%3D'201.1'%20r%3D'11'%20class%3D'a'%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D'814.5'%20cy%3D'165.6'%20r%3D'24.5'%20class%3D'a'%2F%3E%0A%20%20%20%20%3Cpath%20d%3D'M0%200v17.7c22.7%2014.8%2053%2031.9%2090.7%2051.5%20150.8%2078%20322%20116.6%20424.8%2069.3%20102.9-47.4%20138-69.3%20210.8-69.3s118.3%2048.6%20219.5%2038.3%2076.3-59.3%20188.7-59.3c18.9%200%2035.5%202.6%2050.5%206.8V0H0z'%20class%3D'a'%2F%3E%0A%3C%2Fsvg%3E");
}

.section-bubble2 {
  background-color: #FFD2B0;
}
.section-bubble2:after {
  background-color: #384364;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%23FFD2B0'/></svg>");
}

.section-bubble3 {
  background-color: #384364;
}
.section-bubble3:after {
  background-color: #cccccc;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23384364' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}
.section-bubble3 h1 {
  color: white;
}
.section-bubble3 p {
  color: white;
  opacity: 0.8;
}

.section-bubble4 {
  background-color: #cccccc;
}
.section-bubble4:after {
  background-color: #f4b85f;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='%23cccccc'/></svg>");
}

.section-bubble5 {
  background-color: #f4b85f;
}
.section-bubble5:after {
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' style='fill: %23f4b85f' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");}

.section-bubble_type-a:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='red' viewBox='0 0 1185 248'><circle cx='76' cy='121.1' r='20' class='a'/><circle cx='870' cy='201.1' r='11' class='a'/><circle cx='814.5' cy='165.6' r='24.5' class='a'/><path d='M0 0v17.7c22.7 14.8 53 31.9 90.7 51.5 150.8 78 322 116.6 424.8 69.3 102.9-47.4 138-69.3 210.8-69.3s118.3 48.6 219.5 38.3 76.3-59.3 188.7-59.3c18.9 0 35.5 2.6 50.5 6.8V0H0z' class='a'/></svg>");
}

.section-bubble_type-b:after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1185 248'><path d='M50.5 199.8c112.4 0 87.5-49 188.7-59.3s146.7 38.3 219.5 38.3 107.9-21.9 210.8-69.3c102.8-47.3 274-8.7 424.8 69.3 37.7 19.5 68 36.7 90.7 51.5V0H0v193C15 197.2 31.6 199.8 50.5 199.8zM1109 106.9c11 0 20 9 20 20 0 11-9 20-20 20s-20-9-20-20C1089 115.9 1098 106.9 1109 106.9zM370.5 57.9c13.5 0 24.5 11 24.5 24.5 0 13.5-11 24.5-24.5 24.5S346 95.9 346 82.4C346 68.9 357 57.9 370.5 57.9zM315 35.9c6.1 0 11 4.9 11 11s-4.9 11-11 11 -11-4.9-11-11S308.9 35.9 315 35.9z' fill='red'/></svg>");
}


/*********** Adresse ***********
*******************************/

/*** FONTS ***/
@import url(https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:400,400i,700,700i);
/* box-shadow */
ol.gradient-list > li::before, ol.gradient-list > li {
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0, 0, 0, 0.05), 0 0.5rem 1.125rem rgba(75, 0, 0, 0.05);
}

/*** STYLE ***/

.adresse-list {
  display: block;
  margin: 0 3%;
  max-width: 40rem;
  padding: 1rem;
}

ol.gradient-list {
  list-style: none;
  margin: 1.75rem 0;
  padding-left: 1rem;
}
ol.gradient-list > li {
  background: white;
  border-radius: 0 0.5rem 0.5rem 0.5rem;
  margin-top: 1rem;
  min-height: 3rem;
  padding: 1rem 1rem 1rem 3rem;
  position: relative;
}
ol.gradient-list > li::before, ol.gradient-list > li::after {
  content: "";
  height: 3rem;
  left: -1rem;
  overflow: hidden;
  position: absolute;
  top: -1rem;
  width: 3rem;
}
ol.gradient-list > li::before {
  align-items: flex-end;
  content: attr(data-content);
  color: #1d1f20;
  display: flex;
  font: 900 1.5em/1 "Montserrat";
  justify-content: flex-end;
  padding: 0.125em 0.25em;
  z-index: 1;
}
ol.gradient-list > li:nth-child(10n+1):before {
  background: #f2a4b7;
  border-radius: 100%;
}
ol.gradient-list > li:nth-child(10n+2):before {
  background: #f2a4b7;
  border-radius: 0rem 0rem 0 0rem;
}
ol.gradient-list > li:nth-child(10n+3):before {
  background: #ff82b4;
  border-radius: 0rem 0rem 0 0rem;
}
ol.gradient-list > li:nth-child(10n+4):before {
  background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%);
}
ol.gradient-list > li:nth-child(10n+5):before {
  background: linear-gradient(135deg, #a2ed56 0%, #fddc32 100%);
}
ol.gradient-list > li:nth-child(10n+6):before {
  background: linear-gradient(135deg, rgba(162, 237, 86, 0.8) 0%, rgba(253, 220, 50, 0.8) 100%);
}
ol.gradient-list > li:nth-child(10n+7):before {
  background: linear-gradient(135deg, rgba(162, 237, 86, 0.6) 0%, rgba(253, 220, 50, 0.6) 100%);
}
ol.gradient-list > li:nth-child(10n+8):before {
  background: linear-gradient(135deg, rgba(162, 237, 86, 0.4) 0%, rgba(253, 220, 50, 0.4) 100%);
}
ol.gradient-list > li:nth-child(10n+9):before {
  background: linear-gradient(135deg, rgba(162, 237, 86, 0.2) 0%, rgba(253, 220, 50, 0.2) 100%);
}
ol.gradient-list > li:nth-child(10n+10):before {
  background: linear-gradient(135deg, rgba(162, 237, 86, 0) 0%, rgba(253, 220, 50, 0) 100%);
}
ol.gradient-list > li + li {
  margin-top: 2rem;
}


/*##########################################
            section-title
##########################################*/
.section-title-text {
  font-size: 50px;
  background: 50% 100%/50% 50% no-repeat radial-gradient(ellipse at bottom, #ED5565, transparent, transparent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
          animation: reveal 3000ms ease-in-out forwards 200ms, glow 2500ms linear infinite 2000ms;
}
@-webkit-keyframes reveal {
  80% {
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@keyframes reveal {
  80% {
    letter-spacing: 8px;
  }
  100% {
    background-size: 300% 300%;
  }
}
@-webkit-keyframes glow {
  40% {
    text-shadow: 0 0 8px #f1091c;
  }
}
@keyframes glow {
  40% {
    text-shadow: 0 0 8px #eb808d;
  }
}