:root {
  --serenity: #2C3333;
  --serenity-second: #395B64;
  --serenity-haut-tableau: #406882;
  --serenity-select-tableau: #2C3333;
  --serenity-background: #406882;
  --serenity-selected: #DC0000;
  --serenity-table-row-selected: #c0ccf0;
}


@media only screen and (max-width: 768px) {
  .header-area .main-nav .logo {
    font-size: 14px;
  }
}

/* 
---------------------------------------------
introduction
---------------------------------------------
*/

#introduction {
  padding: 120px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#introduction .container {
  padding-bottom: 80px;
}

#introduction .section-heading {
  margin-bottom: 10px;
}

#introduction .section-heading h6 {
  color: var(--serenity);
}

#introduction .service-item {
  margin-top: 30px;
}

#introduction .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#introduction .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#introduction a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#introduction .right-text-content {
  margin-top: 40px;
}

#introduction .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#introduction .row {
  margin-left: 0px;
}


#introduction .logo-serenity {
  width: 100%;
}

@media only screen and (max-width: 768px) {
  #introduction .logo-serenity {
    width: 25%;
  }
}


/*
---------------------------------------------
hypothesis
---------------------------------------------
*/

#hypothesis {
  padding: 120px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#hypothesis .container {
  padding-bottom: 80px;
}

#hypothesis .section-heading {
  margin-bottom: 10px;
}

#hypothesis .section-heading h6 {
  color: var(--serenity);
}

#hypothesis .service-item {
  margin-top: 30px;
}

#hypothesis .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#hypothesis .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#hypothesis a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#hypothesis .right-text-content {
  margin-top: 40px;
}

#hypothesis .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#hypothesis .row {
  margin-left: 0px;
}

#hypothesis a {
  align-self: flex-end;
}


/*
---------------------------------------------
Resultats préliminaire
---------------------------------------------
*/

#resultpreliminary {
  padding: 120px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#resultpreliminary .container {
  padding-bottom: 80px;
}

#resultpreliminary .section-heading {
  margin-bottom: 10px;
}

#resultpreliminary .section-heading h6 {
  color: var(--serenity);
}

#resultpreliminary .service-item {
  margin-top: 30px;
}

#resultpreliminary .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#resultpreliminary .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#resultpreliminary a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#resultpreliminary .right-text-content {
  margin-top: 40px;
}

#resultpreliminary .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#resultpreliminary .row {
  margin-left: 0px;
}

#resultpreliminary a {
  align-self: flex-end;
}

#resultpreliminary .col {
  padding-left: 0px;
  padding: 0px;
}

#resultpreliminary .c31 {
  border-color: black;
  border: 1px solid;
  margin-right: 25px;
}

#resultpreliminary .c1 {
  border-color: black;
  border: 1px solid;
}

#resultpreliminary .c7 {
  border-color: black;
  border: 1px solid;
}

#resultpreliminary .c12 {
  border-color: black;
  border: 1px solid;
}

#resultpreliminary .positive {
  color: green;
}

#resultpreliminary .negative {
  color: red;
}

#resultpreliminary h3 {
  text-align: left;
}


/*
---------------------------------------------
All
---------------------------------------------
*/

#all {
  padding: 120px 0px 0px 0px;
  position: relative;
  z-index: 9;
}

#all .container {
  padding-bottom: 80px;
}

#all .section-heading {
  margin-bottom: 10px;
}

#all .section-heading h6 {
  color: var(--serenity);
}

#all .service-item {
  margin-top: 30px;
}

#all .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#all .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#all a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#all .right-text-content {
  margin-top: 40px;
}

#all .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#all .row {
  margin-left: 0px;
}

#all a {
  align-self: flex-end;
}

/*
---------------------------------------------
Conclusion
---------------------------------------------
*/

#conclusion {
  position: relative;
  z-index: 9;
}

#conclusion .container {
  padding-bottom: 80px;
}

#conclusion .section-heading {
  margin-bottom: 10px;
}

#conclusion .section-heading h6 {
  color: var(--serenity);
}

#conclusion .service-item {
  margin-top: 30px;
}

#conclusion .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#conclusion .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#conclusion a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#conclusion .right-text-content {
  margin-top: 40px;
}

#conclusion .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#conclusion .row {
  margin-left: 0px;
}

#conclusion a {
  align-self: flex-end;
}


#conclusion .web {
  display: inline-block;
  text-align: center;
  line-height: 32px;
  font-size: 14xpx;
  background-color: var(--serenity-second);
  border-radius: 50%;
  color: white;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

#conclusion .local {
  background-image: url("/assets/images/contact-info-03.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 70px;
  width: 70px;
  vertical-align: bottom;
}

#conclusion .web:hover {
  background-color: var(--serenity);
  color: #fff;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

#conclusion .fa {
  padding: 20px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
  width: 64px;
}

#conclusion .fa:hover {
  opacity: 0.7;
}


/*
---------------------------------------------
reference
---------------------------------------------
*/

#reference {
  position: relative;
  z-index: 9;
}

#reference .container {
  padding-bottom: 80px;
}

#reference .section-heading {
  margin-bottom: 10px;
}

#reference .section-heading h6 {
  color: var(--serenity);
}

#reference .service-item {
  margin-top: 30px;
}

#reference .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#reference .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#reference a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#reference .right-text-content {
  margin-top: 40px;
}

#reference .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#reference .row {
  margin-left: 0px;
}

#reference a {
  align-self: flex-end;
}

#reference li {
  margin-left: 30px;
  margin: 0;
  list-style: circle;
}


.card-columns {

  column-count: 1;
}

@media only screen and (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}

@media only screen and (min-width: 992px) {
  .card-columns {
    column-count: 3;
  }
}

.Modern-Slider .item h5 {
  margin-bottom: 50px;
  font-size: 24px;
}


a.main-filled-button {
  font-size: 10px;
  padding: 13px 25px;
  background-color: var(--serenity-second);
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

a.main-filled-button:hover {
  color: #fff;
  background-color: var(--serenity);
}


/* conversion */
#conversion {
  position: relative;
  z-index: 9;
}

#conversion .container {
  padding-bottom: 80px;
}

#conversion .section-heading {
  margin-bottom: 10px;
}

#conversion .section-heading h6 {
  color: var(--serenity);
}

#conversion .service-item {
  margin-top: 30px;
}

#conversion .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#conversion .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#conversion a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#conversion .right-text-content {
  margin-top: 40px;
}

#conversion .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#conversion .row {
  margin-left: 0px;
}

#conversion a {
  align-self: flex-end;
}

#conversion h1 {
  text-align: left;
}

/* Succession */
#succession {
  position: relative;
  z-index: 9;
}

#succession .container {
  padding-bottom: 80px;
}

#succession .section-heading {
  margin-bottom: 10px;
}

#succession .section-heading h6 {
  color: var(--serenity);
}

#succession .service-item {
  margin-top: 30px;
}

#succession .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#succession .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#succession a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#succession .right-text-content {
  margin-top: 40px;
}

#succession .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#succession .row {
  margin-left: 0px;
}

#succession a {
  align-self: flex-end;
}

#succession h1 {
  text-align: left;
}

/* Impot */
#impot {
  position: relative;
  z-index: 9;
}

#impot .container {
  padding-bottom: 80px;
}

#impot .section-heading {
  margin-bottom: 10px;
}

#impot .section-heading h6 {
  color: var(--serenity);
}

#impot .service-item {
  margin-top: 30px;
}

#impot .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#impot .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#impot a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#impot .right-text-content {
  margin-top: 40px;
}

#impot .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#impot .row {
  margin-left: 0px;
}

#impot a {
  align-self: flex-end;
}

#impot h1 {
  text-align: left;
}

/* Credit */
#credit {
  position: relative;
  z-index: 9;
}

#credit .container {
  padding-bottom: 80px;
}

#credit .section-heading {
  margin-bottom: 10px;
}

#credit .section-heading h6 {
  color: var(--serenity);
}

#credit .service-item {
  margin-top: 30px;
}

#credit .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#credit .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#credit a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#credit .right-text-content {
  margin-top: 40px;
}

#credit .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#credit .row {
  margin-left: 0px;
}

#credit a {
  align-self: flex-end;
}

#credit h1 {
  text-align: left;
}




/* Epicerie */
#epicerie {
  position: relative;
  z-index: 9;
}

#epicerie .container {
  padding-bottom: 80px;
}

#epicerie .section-heading {
  margin-bottom: 10px;
}

#epicerie .section-heading h6 {
  color: var(--serenity);
}

#epicerie .service-item {
  margin-top: 30px;
}

#epicerie .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#epicerie .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#epicerie a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#epicerie .right-text-content {
  margin-top: 40px;
}

#epicerie .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#epicerie .row {
  margin-left: 0px;
}



/* Ustensile */
#ustensile {
  position: relative;
  z-index: 9;
}

#ustensile .container {
  padding-bottom: 80px;
}

#ustensile .section-heading {
  margin-bottom: 10px;
}

#ustensile .section-heading h6 {
  color: var(--serenity);
}

#ustensile .service-item {
  margin-top: 30px;
}

#ustensile .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#ustensile .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#ustensile a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#ustensile .right-text-content {
  margin-top: 40px;
}

#ustensile .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#ustensile .row {
  margin-left: 0px;
}

#ustensile h1 {
  text-align: left;
}


/* Acote */
#acote {
  position: relative;
  z-index: 9;
}

#acote .container {
  padding-bottom: 80px;
}

#acote .section-heading {
  margin-bottom: 10px;
}

#acote .section-heading h6 {
  color: var(--serenity);
}

#acote .service-item {
  margin-top: 30px;
}

#acote .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#acote .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#acote a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#acote .right-text-content {
  margin-top: 40px;
}

#acote .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#acote .row {
  margin-left: 0px;
}

#acote h1 {
  text-align: left;
}

/* Some positioning and ratios */
.sticky-container {
  max-width: 270px;
  position: relative;
}

.sticky-outer {
  display: flex;
  padding-top: 92.5925926%;
  position: relative;

  width: 100%;
}

.sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: '';
  width: 90%;
  left: 5px;
  height: 75%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-content {
  background: linear-gradient(180deg,
      rgba(187, 235, 255, 1) 0%,
      rgba(187, 235, 255, 1) 12%,
      rgba(170, 220, 241, 1) 75%,
      rgba(195, 229, 244, 1) 100%);
  width: 100%;
  height: 100%;

  display: block;

  justify-content: center;
  align-items: center;
  font-family: 'Kalam', cursive;
  font-size: 1rem;

  clip-path: url(#stickyClip);
}


/* Position the sticky nicely, so it looks better */
.container-inner {
  width: 90%;
  margin: 25px;
  margin-top: 0px;
}

/* Add responsiveness */
@media screen and (max-width: 576px) {
  .sticky-content {
    font-size: 0.9rem;
  }
}

@media screen and (min-width: 576px) {
  .sticky-content {
    font-size: 1rem;
  }
}


@media screen and (min-width: 640px) {
  .sticky-content {
    font-size: 1rem;
  }
}

@media screen and (min-width: 768px) {
  .sticky-content {
    font-size: 0.85rem;
  }
}

@media screen and (min-width: 1024px) {
  .sticky-content {
    font-size: 0.9rem;
  }
}





/* Update h1, h2... for blog only*/
h1 {
  font-size: 24px;
  text-transform: uppercase;
  color: white;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 25px;
}

h2 {
  color: white;
  font-size: 16px;
  text-transform: uppercase;
}

h4 {
  font-size: 1.2rem;
}


#result .row {
  margin-left: 0px;
}



/* Tutorial */
#tutorial {
  position: relative;
  z-index: 9;
}

#tutorial .container {
  padding-bottom: 80px;
}

#tutorial .section-heading {
  margin-bottom: 10px;
}

#tutorial .section-heading h6 {
  color: var(--serenity);
}

#tutorial .service-item {
  margin-top: 30px;
}

#tutorial .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#tutorial .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#tutorial a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#tutorial .right-text-content {
  margin-top: 40px;
}

#tutorial .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#tutorial .row {
  margin-left: 0px;
}

#tutorial h1 {
  text-align: left;
}


iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video_wrapper {
  position: relative;
  padding-bottom: 75%;
  /* Other Aspect ratio	Padding-bottom
  1:1	100%
  16:9	56.25%
  4:3	75%
  3:2	66.66%
  8:5	62.5% 
  */
}



/*
---------------------------------------------
Lookalike
---------------------------------------------
*/

#lookalike {
  position: relative;
  z-index: 9;
}

#lookalike .container {
  padding-bottom: 80px;
}

#lookalike .section-heading {
  margin-bottom: 10px;
}

#lookalike .section-heading h6 {
  color: var(--serenity);
}

#lookalike .service-item {
  margin-top: 30px;
}

#lookalike .service-item img {
  float: left;
  margin-right: 15px;
  width: 46px;
  height: 46px;
}

#lookalike .service-item h4 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  line-height: 46px;
}

#lookalike a.main-button-icon {
  display: inline-block;
  margin-top: 60px;
}

#lookalike .right-text-content {
  margin-top: 40px;
}

#lookalike .right-text-content p {
  font-size: 16px;
  line-height: 27px;
  color: #777;
}

#lookalike .row {
  margin-left: 0px;
}


#lookalike .o-wrapper {
  margin: auto;
  overflow: hidden;
  padding-bottom: 50px;
}

#lookalike .c-slider {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
}

#lookalike .c-slide {
  font-weight: normal;
  margin-right: 20px;
  background: #FFFFFF;
  border-radius: 5px;
  border-left: 10px solid var(--serenity-background);
  padding: 20px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  overflow: hidden;
  min-width: 300px;
}

#lookalike .c-slide--color1 {
  border-color: #FCEDB7;
}

#lookalike .c-slide--color2 {
  border-color: #A3CCB6;
}

#lookalike .c-slide--color3 {
  border-color: #EC7871;
}

#lookalike .c-slide--color4 {
  border-color: var(--serenity-background);
}

#lookalike .c-slide__content {
  width: 100%;
  height: 100%;
  text-align: left;
}

#lookalike .c-slide__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

#lookalike .c-slide__image-wrapper {
  margin: 0;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  height: 0;
  padding-top: 66%;
  position: relative;
}

#lookalike .c-slide__image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  min-height: 100%;
  margin: auto;
  padding: 0;
  transform: translate3d(-50%, -50%, 0);
}

#lookalike .c-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#lookalike .c-drag {
  opacity: 0.2;
}