@charset "UTF-8";

.main-panel > .navbar {
  margin-bottom: 0;
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.main-panel > .navbar .giro-container {
  display: none;
}

.main-panel > .navbar .giro-container .mobile_giro {
  height: 148px;
  display: flex;
  align-items: center;
  background: #483142;
  padding: 0 15px;
}

.main-panel > .navbar .giro-container .mobile_giro .navbar-toggler {
  background-color: #99cb3c;
  position: relative;
}

.main-panel > .static {
  background-color: #FFF;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.main-panel > .content {
  margin-top: 70px;
  padding: 30px 15px;
  min-height: calc(100vh - 123px);
}

.main-panel .footer_giro .footer-top {
  height: 9px;
  border-bottom: 1px solid white;
  background-color: #CCCCCC;
}

.main-panel .footer_giro .footer-container {
  padding: 15px;
  background-color: #999999;
}

.main-panel .footer_giro .footer-container .copyright p {
  color: white;
  font-size: 12px;
  font-weight: normal;
  margin: 0;
}

.main-panel .footer_giro .footer-container .footer_giro_link {
  color: white;
  font-size: 10px;
  font-weight: normal;
}

.main-panel .footer_giro .footer-bottom.is-giro {
  background-color: #9bcc37;
  height: 9px;
  border-top: 1px solid white;
}

.sidebar-logo {
  width: 90px;
  height: auto;
}

.auth-buttons {
  margin-left: 25px;
}

.nav-link {
  width: 100%;
}

.btn-primary {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.card.bg-primary {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.card .card-header-primary .card-icon {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.card .card-header-primary .card-text {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.card .card-header-primary:not(.card-header-icon):not(.card-header-text) {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.card.card-rotate.bg-primary .back {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.card.card-rotate.bg-primary .front {
  background-color: #fe0070 !important;
  border-color: #fe0070 !important;
  background: linear-gradient(60deg, #fe0070, #fe0070) !important;
}

.btn.btn-primary.btn-link {
  background: #fff !important;
  background-color: #fff !important;
  color: #fe0070 !important;
}

.sidebar[data-color=mypharm-green] li.active > a {
  background-color: #fe0070;
}

.bootstrap-select .dropdown-item.active {
  background: #fe0070 !important;
  color: black;
}

.bootstrap-select .btn.dropdown-toggle.select-with-transition {
  background-image: linear-gradient(0deg, #fe0070 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0) !important;
}

.dropdown-menu .dropdown-item:focus {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
  background-color: #fe0070 !important;
  color: black;
}

.dropdown-menu .dropdown-item:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
  background-color: #fe0070 !important;
  color: black;
}

.dropdown-menu a:active {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
  background-color: #fe0070 !important;
  color: black;
}

.dropdown-menu a:focus {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
  background-color: #fe0070 !important;
  color: black;
}

.dropdown-menu a:hover {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
  background-color: #fe0070 !important;
  color: black;
}

.form-control {
  background-image: linear-gradient(0deg, #fe0070 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
  background-image: linear-gradient(0deg, #fe0070 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0) !important;
}

.is-focused .form-control {
  background-image: linear-gradient(0deg, #fe0070 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0);
  background-image: linear-gradient(0deg, #fe0070 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #d2d2d2 1px, rgba(209, 209, 209, 0) 0) !important;
}

.card-collapse .card-header a:active {
  color: #fe0070;
}

.card-collapse .card-header a:hover {
  color: #fe0070;
}

.card-collapse .card-header a[aria-expanded=true] {
  color: #fe0070;
}

.checkbrand:focus {
  border-color: #fe0070;
  outline: 2px solid #fe0070;
  border-radius: 5px;
}

.btn-focused:focus {
  border-color: #fe0070;
  outline: 2px solid #fe0070;
  border-radius: 5px;
}

.btn.btn-primary:focus {
  box-shadow: 0 1px 27px 1px #fe0070, 0 4px 59px 0 rgba(0, 0, 0, 0.12), 0 28px 26px -5px rgba(156, 39, 176, 0.2);
}

.sort-link.active {
  color: #fe0070 !important;
}

.form-check .form-check-input:checked + .form-check-sign .check {
  background: #fe0070 !important;
}

.form-check .form-check-input:checked ~ .circle {
  border-color: #fe0070 !important;
}

.form-check .form-check-label .circle .check {
  background-color: #fe0070 !important;
}

a {
  color: #fe0070;
}

a:visited {
  color: #fe0070;
}

.bootstrap-datetimepicker-widget table td.today > div:before {
  content: "";
  display: inline-block;
  border: 0 0 5px 5px solid transparent;
  border-bottom-color: #fe0070 !important;
  position: absolute;
  bottom: 4px;
  right: 4px;
}

.bootstrap-datetimepicker-widget table td.active > div {
  background-color: #fe0070 !important;
  color: #fff;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}

.bootstrap-datetimepicker-widget table td.active:hover > div {
  background-color: #fe0070 !important;
  color: #fff;
  box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4);
}

.bootstrap-datetimepicker-widget table td span.active {
  background-color: #fe0070 !important;
  color: #fff;
}

.pagination > .page-item.active > a {
  background-color: #fe0070;
  border-color: #fe0070;
  color: #fff;
}

.pagination > .page-item.active > a:focus {
  background-color: #fe0070;
  border-color: #fe0070;
  color: #fff;
}

.pagination > .page-item.active > a:hover {
  background-color: #fe0070;
  border-color: #fe0070;
  color: #fff;
}

.pagination > .page-item.active > span {
  background-color: #fe0070;
  border-color: #fe0070;
  color: #fff;
}

.pagination > .page-item.active > span:focus {
  background-color: #fe0070;
  border-color: #fe0070;
  color: #fff;
}

.pagination > .page-item.active > span:hover {
  background-color: #fe0070;
  border-color: #fe0070;
  color: #fff;
}

.badge.badge-info {
  background-color: #b83981;
}

.navbar {
  color: #fff;
}

.select2-container {
  width: 100% !important;
}

.togglebutton label input[type=checkbox]:checked + .toggle {
  background-color: #fe0070 !important;
}

.togglebutton label input[type=checkbox]:checked + .toggle:after {
  border-color: #fe0070 !important;
}

.overflow {
  height: 400px;
  overflow: auto;
}

.map-container {
  width: 1000px;
  height: 500px;
  border: 1px solid;
  padding: 0;
  margin-right: 0 !important;
}

.pharmacies-lication-list .card-body {
  height: 400px;
  overflow: auto;
}

.pharmacies-lication-list .search-block {
  margin-left: -15px;
}

.pharmacies-lication-list .search-block .label {
  width: 60%;
}

.pharmacies-lication-list .pharmacy-location-block {
  border: 1px solid #eee;
  border-radius: 0.25rem;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
}

.pharmacies-lication-list .pharmacy-location-block img {
  margin-top: 8px;
}

.pharmacies-lication-list .pharmacy-location-block p.pharmacy-name {
  margin-top: 18px;
  font-weight: bold;
  color: #777777;
}

.pharmacy-info-modal .info-row {
  border-bottom: #EFEFEF 2px solid;
}

.pharmacy-info-modal .info-row p {
  margin-bottom: 0;
}

.expertises {
  display: inline-block;
  padding: 3px;
  width: 105px;
}

.expertises .expert-img {
  width: 85px;
  height: 65px;
  margin: 4px;
}

.expertises h6.description {
  font-size: 9px;
  margin-right: -20%;
}

.business-hours .day {
  margin-bottom: 10px !important;
}

.business-hours .first-day {
  margin-top: 10px !important;
}

.store-info-field {
  line-height: 35px;
}

.business-hours-container {
  margin-top: 30px;
}

.business-hours-container .icon-image {
  width: 20px;
  padding-top: 6px;
}

.business-hours-container .operationTime .mini-time {
  width: 40px;
  padding: 3px;
  font-size: 12px;
  font-weight: normal;
  margin-left: 4px;
}

.colorBoxDisabled {
  cursor: pointer;
  height: 45px;
  border: 2px solid #888;
  border-radius: 4px;
}

.colorBoxDisabled.workingDay {
  border: 2px solid #ca0359;
  background-color: #fe0070;
}

.colorBoxDisabled.dayOff {
  border: 2px solid #979496;
  background-color: #c4c0c2;
}

.text-pink {
  color: #fe0070;
}

.carte-membre .card {
  border: none;
  border-radius: 0;
  background-color: #F2F2F2;
  box-shadow: none;
}

.carte-membre ul {
  list-style: none;
}

.carte-membre ul li {
  color: #949599;
}

.carte-membre ul li::before {
  content: "•";
  color: #fe0070;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.carte-membre .card-img-overlay {
  padding: 0;
}

.carte-membre .titre-page-carte span {
  bottom: 24px;
  left: 20px;
  font-weight: bold !important;
}

.carte-membre .titre-page-carte h5 {
  padding-top: 50px;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
}

.carte-membre .list-3 {
  max-width: 50%;
}

.carte-membre .second-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: right;
  position: relative;
  bottom: 18%;
  padding-left: 200px;
}

.carte-membre .puisjeavoir-page-carte .text-right.offset-lg-3.col-md-9.text-gray {
  position: relative;
  top: 35px;
}

.carte-membre .text-pink.pink-btn {
  position: absolute;
  bottom: 20px;
}

.carte-membre .section-5 .parrainage-page-carte p.card-text {
  position: relative;
  top: 35px;
}

body {
  background-color: #FFF;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#home_scroll_hack {
  height: 100vh !important;
}

#landing {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FC3;
  z-index: 10;
}

#landing #bandeauLeft {
  position: absolute;
  top: 27px;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-image: url(/images/static/mypharm/home/bandeauLeft.png);
  background-position: top left;
  background-size: 50% auto;
  background-repeat: no-repeat;
}

#landing #bandeauRight {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-image: url(/images/static/mypharm/home/bandeauRight.png);
  background-position: bottom right;
  background-size: 64% auto;
  background-repeat: no-repeat;
}

#landing #arrow {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5%;
  z-index: 3;
  background-image: url(/images/static/mypharm/home/arrow_pink.gif);
  background-position: center center;
  background-size: auto 80%;
  background-repeat: no-repeat;
  background-color: #FFF;
}

#landing #handscard {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url(/images/static/mypharm/home/HANDSCARD.jpg);
  background-position: center center;
  background-size: 140% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#landing #landing-footer {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 0;
  background-color: #FFF;
}

.static-content {
  font-family: "Roboto Condensed", sans-serif;
}

.home .card {
  border: none;
  border-radius: 0;
  background-color: #F2F2F2;
  box-shadow: none;
}

.home ul {
  list-style: none;
}

.home ul li {
  color: #949599;
}

.home ul li::before {
  content: "•";
  color: #fe0070;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.home .bb {
  border-bottom: 4px solid #ff0071;
}

.home .absolute {
  position: absolute;
}

.home .uppercase {
  text-transform: uppercase;
  text-transform: uppercase;
}

.home .font26 {
  font-size: 26px;
}

.home .pink {
  color: #fe0070;
}

.home .futura-bt-bold {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
}

.home .font22 {
  font-size: 22px;
}

.home .white {
  color: #FFFFFF;
}

.home .font17 {
  font-size: 17px;
}

.home .home-gray {
  color: #757575;
}

.home img {
  width: 100%;
  height: auto;
}

.home .section-1 div.title {
  left: 40px;
  top: 110px;
}

.home .section-1 span {
  font-weight: bold;
}

.home .section-last .row {
  margin: 30px 0 50px 0;
}

.home .section-last .row div img {
  width: inherit;
}

.home .section-last .img-link img {
  max-width: 250px;
}

.carte-membre-page {
  text-transform: uppercase;
  font-weight: bold;
}

.carte-membre-page input[type=submit] {
  color: white;
  text-align: center;
  -o-box-shadow: 0px 2px 2px 0px #656565;
  box-shadow: 0px 2px 2px 0px #656565;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=2);
  background: #fe0070;
  border: 0;
  min-height: 22px;
  padding: 2px 18px 0px;
}

.carte-membre-page input[type=button] {
  color: white;
  text-align: center;
  -o-box-shadow: 0px 2px 2px 0px #656565;
  box-shadow: 0px 2px 2px 0px #656565;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=2);
  background: #fe0070;
  border: 0;
  min-height: 22px;
  padding: 2px 18px 0px;
}

.carte-membre-page button {
  color: white;
  text-align: center;
  -o-box-shadow: 0px 2px 2px 0px #656565;
  box-shadow: 0px 2px 2px 0px #656565;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=180, Strength=2);
  background: #fe0070;
  border: 0;
  min-height: 22px;
  padding: 2px 18px 0px;
}

.carte-membre-page .card {
  border: none;
  border-radius: 0;
  background-color: #F2F2F2;
  box-shadow: none;
}

.carte-membre-page ul {
  list-style: none;
}

.carte-membre-page ul li {
  color: #949599;
}

.carte-membre-page ul li::before {
  content: "•";
  color: #fe0070;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.carte-membre-page .bb {
  border-bottom: 4px solid #ff0071;
}

.carte-membre-page .absolute {
  position: absolute;
}

.carte-membre-page .uppercase {
  text-transform: uppercase;
  text-transform: uppercase;
}

.carte-membre-page .font26 {
  font-size: 26px;
}

.carte-membre-page .pink {
  color: #fe0070;
}

.carte-membre-page .futura-bt-bold {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
}

.carte-membre-page .font22 {
  font-size: 22px;
}

.carte-membre-page .white {
  color: #FFFFFF;
}

.carte-membre-page .font17 {
  font-size: 17px;
}

.carte-membre-page .home-gray {
  color: #757575;
}

.carte-membre-page img {
  width: 100%;
  height: auto;
}

.carte-membre-page .font35 {
  font-size: 35px;
}

.carte-membre-page .font19 {
  font-size: 19px;
}

.carte-membre-page li {
  line-height: 20px;
}

.carte-membre-page .cms-gray {
  color: #949599;
}

.carte-membre-page .relative {
  position: relative;
}

.carte-membre-page user agent stylesheet li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.carte-membre-page user agent stylesheet ul {
  list-style-type: disc;
}

.carte-membre-page .font16 {
  font-size: 16px;
}

.carte-membre-page .section-2 ul {
  padding: 0 0 0 20px;
  margin: 10px 0;
}

.static-navbar {
  border-top: solid 1px #FFF;
}

.static-navbar .home {
  display: flex;
  align-items: center;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 1rem;
}

.static-navbar .home .mypharm {
  background: url(/images/home_link.png) -90px 34px;
  width: 45px;
  height: 35px;
  display: block;
}

.static-navbar .home .mypharm:hover {
  background-position: 90px 34px;
}

.static-navbar .home .giro {
  background: url(/images/home_link_giro.png);
  width: 25px;
  height: 34px;
  display: block;
}

.static-navbar .home .giro:hover {
  background-position: 75px 34px;
}

.static-navbar .navbar {
  background-color: #949598 !important;
  box-shadow: none;
  border-radius: unset;
  margin-bottom: 0px;
}

.static-navbar .navbar ul li.active > .nav-link {
  color: #fe0070 !important;
  background-position: 90px 35px;
}

.static-navbar .navbar ul li .nav-link {
  color: #fff;
}

.static-navbar .navbar ul li .nav-link:hover {
  color: #fe0070;
}

.font19 {
  font-size: 19px;
}

.pink {
  color: #fe0070;
}

.white {
  color: #FFFFFF;
}

.margin-top {
  margin-top: 20px;
}

.bonus-card input[type=button] {
  color: rgb(255, 255, 255);
  text-align: center;
  -o-box-shadow: 0px 2px 2px 0px #656565;
  box-shadow: 0px 2px 2px 0px #656565;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565,Direction=180,Strength=2);
  background: #fe0070;
  border: 0;
  min-height: 22px;
  padding: 2px 18px 0px;
}

button {
  color: rgb(255, 255, 255);
  text-align: center;
  -o-box-shadow: 0px 2px 2px 0px #656565;
  box-shadow: 0px 2px 2px 0px #656565;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565,Direction=180,Strength=2);
  background: #fe0070;
  border: 0;
  min-height: 22px;
  padding: 2px 18px 0px;
}

.container-ma-carte ul {
  padding: 0 0 0 20px;
  margin: 10px 0;
}

.font16 {
  font-size: 16px;
}

.font10 {
  font-size: 10px;
}

.cms-gray {
  color: #949599;
  text-transform: uppercase;
}

.contact .social .fb-contact {
  background: url(/images/contact/fb-contact.png);
  background-position: 0px 0px;
  width: 85px;
  height: 85px;
  background-repeat: no-repeat;
}

.contact .social .fb-contact:hover {
  background-position: -85px 0px;
}

.contact .social .twitter-contact {
  background: url(/images/contact/twitter-contact.png);
  background-position: 0px 0px;
  width: 85px;
  height: 85px;
  background-repeat: no-repeat;
}

.contact .social .twitter-contact:hover {
  background-position: -85px 0px;
}

.avantages .card {
  border: none;
  background-color: #F2F2F2;
  box-shadow: none;
  border-radius: 0;
}

.avantages .btn {
  border-radius: 0;
}

.avantages .form-control {
  border-radius: 0;
}

.avantages .dark-gray {
  color: #6c6e71;
}

.avantages .titre-page-avantages h3 {
  font-size: 35px;
  line-height: 35px;
  margin-top: 50px;
}

.avantages span {
  margin-top: 10px;
}

.avantages .card-title.pink-title {
  font-size: 19px;
  font-weight: bold;
  color: #fe0070;
  top: 30px;
  left: 43px;
}

.avantages .etape1-1-page-avantages .card-body p:first-of-type {
  bottom: 15px;
}

.avantages .etape1-1-page-avantages .card-body p:nth-child(2) {
  bottom: 7px;
  right: 10px;
}

.avantages .etape1-1-page-avantages .card-body p:last-of-type {
  right: 10px;
}

.avantages .etape1-2-page-avantages .card-body p {
  font-size: 15px;
}

.avantages .etape1-2-page-avantages .card-body p:first-of-type {
  bottom: 15px;
  left: 5px;
}

.avantages .etape1-2-page-avantages .card-body p:last-of-type {
  top: 30px;
}

.avantages .etape1-2-page-avantages .card-footer {
  font-size: 12px;
  color: #949599;
  left: 50px;
  top: 55px;
}

.avantages .etape1-4-page-avantages h5 {
  font-size: 17px;
  color: #949599;
}

.avantages .etape1-4-page-avantages #pour-chaque-center {
  left: 135px;
  top: 40px;
}

.avantages .etape1-4-page-avantages span {
  font-size: 12px;
  color: #949599;
}

.avantages .bonus-card h5 {
  color: #949599;
}

.avantages .etape2-page-avantages h5 {
  left: 22px;
  top: 113px;
}

.avantages .etape2-3-page-avantages small {
  font-size: 12px;
  left: 50px;
  bottom: 20px;
}

.avantages .fin-page-avantages span {
  margin-top: 1px;
  font-size: 12px;
  color: #949599;
  bottom: 4px;
  left: 25px;
  line-height: 1.7;
}

.avantages .card-text {
  font-size: 17px;
  color: #949599;
}

.avantages .card-title {
  font-size: 17px;
  color: #949599;
}

.avantages .card-text.chacun {
  bottom: 15px;
}

.avantages .card-title.chacun {
  bottom: 15px;
}

.avantages .plus-card .position-absolute {
  top: 10px;
}

.avantages #img-girl {
  width: 276px;
  bottom: 60px;
  right: -15px;
}

#header-container-giro {
  width: 312px;
  float: right;
  position: relative;
}

#sign-giro {
  width: 304px;
  height: 148px;
  float: right;
  background-repeat: no-repeat;
  background-position: 0 0;
  margin-top: -10px;
  margin-bottom: -10px;
  margin-right: -15px;
}

#cross-giro {
  width: 56px;
  height: 38px;
  background-repeat: no-repeat;
  background-position: 0 0;
  position: absolute;
  left: 30px;
  top: 15px;
}

@media (min-width: 991px) {
  .sidebar-mini .sidebar:hover {
    width: 290px;
  }

  .sidebar-mini .sidebar:hover .sidebar-wrapper {
    width: 275px;
  }
}

@media only screen and (max-width: 525px) {
  .mobile-table-hide {
    display: none !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 736px) {
  .main-panel > .static {
    padding: 0;
    margin: 0;
  }

  .main-panel > .content {
    padding: 0 !important;
    margin: 0 !important;
  }

  .container-fluid {
    margin: 0 !important;
    padding: 0 !important;
  }

  .container {
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 991px) {
  #home_scroll_hack {
    display: none;
  }

  #landing {
    display: none;
  }

  .giro-container {
    display: flex !important;
    margin: -10px -15px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .home .section-1 div.title {
    left: 8px !important;
    top: 60px !important;
  }

  .home .section-1 div.title span {
    font-size: 21px;
  }

  .home .section-1 .subtitle {
    left: 185px !important;
    bottom: 106px !important;
  }

  .home .section-1 span {
    font-weight: bold;
  }

  .home .section-2 .text {
    bottom: 84px !important;
    left: 38px !important;
    width: 350px !important;
    line-height: normal;
  }

  .home .section-2 .text span {
    font-size: 14px;
  }

  .home .section-3 .text {
    top: 51px !important;
    left: 40px !important;
    width: 312px !important;
  }

  .home .section-3 .text span {
    font-size: 13px;
  }

  .home .section-4 .text {
    top: 48px !important;
    left: 18px !important;
    width: 262px !important;
  }

  .home .section-4 span {
    font-size: 14px;
  }

  .home .section-5 .text {
    top: 53px !important;
    left: 32px !important;
    width: 322px !important;
    line-height: 21px;
  }

  .home .section-5 .text span {
    font-size: 14px;
  }

  .home .section-6 .text {
    bottom: 81px !important;
    left: 48px !important;
    width: 340px !important;
    line-height: 15px;
  }

  .home .section-6 .text span {
    font-size: 14px;
  }

  .home .section-last .row {
    margin: 30px 0 20px 0 !important;
  }

  .home .section-last .row div img {
    width: inherit;
  }

  .home .section-last .img-link {
    display: contents;
  }

  .home .section-last .img-link img {
    max-width: 215px !important;
    margin-left: 10px;
  }

  .carte-membre-page .section-1 .title {
    left: 290px !important;
    top: 0px !important;
  }

  .carte-membre-page .section-1 .subtitle {
    left: 4px !important;
    bottom: 15px !important;
  }

  .carte-membre-page .section-1 .subtitle .font19 {
    font-size: 16px;
  }

  .carte-membre-page .section-2 .text {
    left: 3px !important;
    top: 0px !important;
    width: 562px !important;
  }

  .carte-membre-page .section-2 .text .font19 {
    font-size: 16px;
  }

  .carte-membre-page .section-2 .text .font16 {
    font-size: 13px;
  }

  .carte-membre-page .section-3 .text {
    left: 6px !important;
    top: 9px !important;
  }

  .carte-membre-page .section-3 .text .font19 {
    font-size: 16px;
  }

  .carte-membre-page .section-3 .text .font16 {
    font-size: 13px;
  }

  .carte-membre-page .section-4 .font19 {
    font-size: 16px;
  }

  .carte-membre-page .section-4 .font16 {
    font-size: 13px;
  }

  .carte-membre-page .section-4 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-4 .title {
    left: 4px !important;
    top: -17px !important;
  }

  .carte-membre-page .section-4 .text {
    left: 10px !important;
    top: 189px !important;
    bottom: 0 !important;
    width: 361px !important;
  }

  .carte-membre-page .section-5 .font19 {
    font-size: 16px;
  }

  .carte-membre-page .section-5 .font16 {
    font-size: 13px;
  }

  .carte-membre-page .section-5 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-5 .title {
    right: 7px !important;
    top: -18px !important;
  }

  .carte-membre-page .section-5 .subtitle {
    right: 0px !important;
    top: 64px !important;
    width: 519px !important;
  }

  .carte-membre-page .section-5 .text {
    right: 0 !important;
    bottom: 82px !important;
    width: 521px !important;
  }

  .carte-membre-page .section-6 .font19 {
    font-size: 16px;
  }

  .carte-membre-page .section-6 .font16 {
    font-size: 13px;
  }

  .carte-membre-page .section-6 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-6 .title {
    top: -20px !important;
  }

  .carte-membre-page .section-6 .text {
    top: 55px !important;
    width: 659px !important;
  }

  .carte-membre span {
    font-size: 13px;
    line-height: 1.3;
    bottom: 15px;
  }

  .carte-membre .titre-page-carte h5 {
    padding-top: 35px;
    font-weight: 500;
    font-size: 25px;
    line-height: 1.2;
  }

  .carte-membre .titre-page-carte span {
    bottom: 18px;
  }

  .carte-membre ul li {
    font-size: 13px;
    line-height: 1.3;
  }

  .carte-membre .card-body {
    padding: 0;
  }

  .carte-membre .card-body span.mt-auto {
    margin-top: 50px !important;
    padding-left: 150px;
  }

  .carte-membre .card-body span.mt-auto:last-child {
    margin-top: 230px !important;
  }

  .carte-membre .section-3 .card-img-overlay {
    padding: 15px;
  }

  .carte-membre .section-3 ul {
    width: 50%;
    margin-top: 180px !important;
  }

  .carte-membre .section-5 p {
    font-size: 12px;
    line-height: 1.3;
    padding-top: 30px;
  }

  .carte-membre .section-6 .card.my-0 .card-body .col:last-child {
    position: absolute;
    top: 200px;
  }
}

@media screen and (min-width: 414px) and (max-width: 736px) {
  .home .section-1 div.title {
    left: 11px !important;
    top: 17px !important;
  }

  .home .section-1 div.title span {
    font-size: 12px;
  }

  .home .section-1 .subtitle {
    left: 107px !important;
    bottom: 59px !important;
  }

  .home .section-1 .subtitle span {
    font-size: 15px;
  }

  .home .section-1 span {
    font-weight: bold;
  }

  .home .section-2 .text {
    bottom: 49px !important;
    left: 18px !important;
    width: 228px !important;
    line-height: 11px;
  }

  .home .section-2 .text span {
    font-size: 10px;
  }

  .home .section-3 .text {
    top: 31px !important;
    left: 19px !important;
    width: 198px !important;
    line-height: 9px;
  }

  .home .section-3 .text span {
    font-size: 10px;
  }

  .home .section-4 .text {
    top: 31px !important;
    left: 15px !important;
    width: 164px !important;
    line-height: 12px;
  }

  .home .section-4 span {
    font-size: 10px;
  }

  .home .section-5 .text {
    top: 31px !important;
    left: 13px !important;
    width: 212px !important;
    line-height: 12px;
  }

  .home .section-5 .text span {
    font-size: 9px;
  }

  .home .section-6 .text {
    bottom: 42px !important;
    left: 24px !important;
    width: 241px !important;
    line-height: 15px;
  }

  .home .section-6 .text span {
    font-size: 10px;
  }

  .home .section-last .row {
    margin: 30px 0 20px 0 !important;
  }

  .home .section-last .row div img {
    width: inherit;
  }

  .home .section-last .img-link {
    display: contents;
  }

  .home .section-last .img-link img {
    max-width: 125px !important;
    margin-left: 10px;
  }

  .carte-membre-page .section-1 .title {
    left: 170px !important;
    top: -20px !important;
  }

  .carte-membre-page .section-1 .title .font35 {
    line-height: 27px !important;
    font-size: 23px !important;
  }

  .carte-membre-page .section-1 .subtitle {
    left: 4px !important;
    width: 222px;
    line-height: 10px;
    bottom: 6px !important;
  }

  .carte-membre-page .section-1 .subtitle .font19 {
    font-size: 13px;
  }

  .carte-membre-page .section-2 .text {
    left: 3px !important;
    top: -10px !important;
    width: 320px !important;
  }

  .carte-membre-page .section-2 .text .font16 {
    font-size: 9px;
    line-height: 13px;
  }

  .carte-membre-page .section-2 .text .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-2 .text ul {
    margin: 0 !important;
  }

  .carte-membre-page .section-3 .text {
    left: 3px !important;
    top: -10px !important;
    width: 320px !important;
  }

  .carte-membre-page .section-3 .text .font16 {
    font-size: 9px;
    line-height: 13px;
  }

  .carte-membre-page .section-3 .text .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-3 .text ul {
    margin: 0 !important;
  }

  .carte-membre-page .section-4 .font19 {
    font-size: 13px;
  }

  .carte-membre-page .section-4 .font16 {
    font-size: 10px;
  }

  .carte-membre-page .section-4 .font10 {
    font-size: 6px;
  }

  .carte-membre-page .section-4 .title {
    left: 4px !important;
    top: -31px !important;
    line-height: 13px;
    width: 200px;
  }

  .carte-membre-page .section-4 .text {
    left: -23px !important;
    top: 104px !important;
    bottom: 0 !important;
    width: 260px !important;
    line-height: 8px;
  }

  .carte-membre-page .section-5 .font19 {
    font-size: 13px;
  }

  .carte-membre-page .section-5 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-5 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-5 .title {
    right: 12px !important;
    top: -30px !important;
    width: 232px;
    line-height: 12px;
  }

  .carte-membre-page .section-5 .subtitle {
    right: 0px !important;
    top: 35px !important;
    width: 316px !important;
    line-height: 12px;
  }

  .carte-membre-page .section-5 .text {
    right: 0 !important;
    bottom: 46px !important;
    width: 325px !important;
    line-height: 12px;
  }

  .carte-membre-page .section-6 .font19 {
    font-size: 13px;
  }

  .carte-membre-page .section-6 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-6 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-6 .title {
    width: 167px;
    line-height: 11px;
    top: -29px !important;
    left: 12px !important;
  }

  .carte-membre-page .section-6 .text {
    top: 30px !important;
    width: 395px !important;
    line-height: 12px;
    left: 8px !important;
  }

  .carte-membre-page .section-7 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-7 .absolute {
    left: 0;
    right: 0;
    margin: auto;
    width: 349px !important;
    text-align: center;
    line-height: 16px !important;
  }
}

@media screen and (min-width: 375px) and (max-width: 667px) {
  .home .section-1 div.title {
    left: 1px !important;
    top: 13px !important;
  }

  .home .section-1 div.title span {
    font-size: 12px;
  }

  .home .section-1 .subtitle {
    left: 92px !important;
    bottom: 52px !important;
  }

  .home .section-1 .subtitle span {
    font-size: 15px;
  }

  .home .section-1 span {
    font-weight: bold;
  }

  .home .section-2 .text {
    bottom: 44px !important;
    left: 16px !important;
    width: 206px !important;
    line-height: 10px;
  }

  .home .section-2 .text span {
    font-size: 9px;
  }

  .home .section-3 .text {
    top: 26px !important;
    left: 27px !important;
    width: 164px !important;
    line-height: 8px;
  }

  .home .section-3 .text span {
    font-size: 9px;
  }

  .home .section-4 .text {
    top: 26px !important;
    left: 16px !important;
    width: 145px !important;
    line-height: 12px;
  }

  .home .section-4 span {
    font-size: 9px;
  }

  .home .section-5 .text {
    top: 29px !important;
    left: 19px !important;
    width: 190px !important;
    line-height: 10px;
    line-height: 10px;
  }

  .home .section-5 .text span {
    font-size: 9px;
  }

  .home .section-6 .text {
    bottom: 42px !important;
    left: 22px !important;
    width: 218px !important;
    line-height: 11px;
  }

  .home .section-6 .text span {
    font-size: 9px;
  }

  .home .section-last .row {
    margin: 30px 0 20px 0 !important;
  }

  .home .section-last .row div img {
    width: inherit;
  }

  .home .section-last .img-link {
    display: contents;
  }

  .home .section-last .img-link img {
    max-width: 110px !important;
    margin-left: 10px;
  }
}

@media screen and (min-width: 320px) and (max-width: 374px) {
  .home .section-1 div.title {
    left: 1px !important;
    top: 3px !important;
    left: 1px !important;
    top: 3px !important;
  }

  .home .section-1 div.title span {
    font-size: 10px;
    font-size: 10px;
  }

  .home .section-1 .subtitle {
    left: 82px !important;
    bottom: 44px !important;
    left: 82px !important;
    bottom: 44px !important;
  }

  .home .section-1 .subtitle span {
    font-size: 12px;
    font-size: 12px;
  }

  .home .section-1 span {
    font-weight: bold;
    font-weight: bold;
  }

  .home .section-2 .text {
    bottom: 27px !important;
    left: 16px !important;
    width: 180px !important;
    line-height: 8px;
    bottom: 27px !important;
    left: 16px !important;
    width: 180px !important;
    line-height: 8px;
  }

  .home .section-2 .text span {
    font-size: 9px;
    font-size: 9px;
  }

  .home .section-3 .text {
    top: 20px !important;
    left: 20px !important;
    width: 141px !important;
    line-height: 8px;
    top: 20px !important;
    left: 20px !important;
    width: 141px !important;
    line-height: 8px;
  }

  .home .section-3 .text span {
    font-size: 9px;
    font-size: 9px;
  }

  .home .section-4 .text {
    top: 25px !important;
    left: 11px !important;
    width: 141px !important;
    line-height: 8px;
    top: 25px !important;
    left: 11px !important;
    width: 141px !important;
    line-height: 8px;
  }

  .home .section-4 span {
    font-size: 9px;
    font-size: 9px;
  }

  .home .section-5 .text {
    top: 22px !important;
    left: 18px !important;
    width: 188px !important;
    line-height: 10px;
    top: 22px !important;
    left: 18px !important;
    width: 188px !important;
    line-height: 10px;
  }

  .home .section-5 .text span {
    font-size: 9px;
    font-size: 9px;
  }

  .home .section-6 .text {
    bottom: 33px !important;
    left: 16px !important;
    width: 218px !important;
    line-height: 11px;
    bottom: 33px !important;
    left: 16px !important;
    width: 218px !important;
    line-height: 11px;
  }

  .home .section-6 .text span {
    font-size: 9px;
    font-size: 9px;
  }

  .home .section-last .row {
    margin: 30px 0 20px 0 !important;
    margin: 30px 0 20px 0 !important;
  }

  .home .section-last .row div img {
    width: inherit;
    width: inherit;
  }

  .home .section-last .img-link {
    display: contents;
    display: contents;
  }

  .home .section-last .img-link img {
    max-width: 93px !important;
    margin-left: 10px;
    max-width: 93px !important;
    margin-left: 10px;
  }
}

@media screen and (min-width: 991px) {
  .carte-membre-page .title {
    margin-top: 0px;
    margin-bottom: 0px;
    min-height: 0px;
  }
}

@media screen and (min-width: 350px) and (max-width: 414px) {
  .carte-membre-page .row img {
    margin-top: 35px !important;
  }

  .carte-membre-page .section-1 .title {
    left: 153px !important;
    top: 12px !important;
  }

  .carte-membre-page .section-1 .title .font35 {
    line-height: 27px !important;
    font-size: 21px !important;
  }

  .carte-membre-page .section-1 .subtitle {
    left: -3px !important;
    width: 222px;
    line-height: 10px;
    bottom: 4px !important;
  }

  .carte-membre-page .section-1 .subtitle .font19 {
    font-size: 12px;
  }

  .carte-membre-page .section-2 .text {
    left: 3px !important;
    top: -3px !important;
    width: 318px !important;
  }

  .carte-membre-page .section-2 .text .font16 {
    font-size: 9px;
    line-height: 13px;
  }

  .carte-membre-page .section-2 .text .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-2 .text ul {
    margin: 0 !important;
  }

  .carte-membre-page .section-3 .text {
    left: 3px !important;
    top: -10px !important;
    width: 320px !important;
  }

  .carte-membre-page .section-3 .text .font16 {
    font-size: 9px;
    line-height: 13px;
  }

  .carte-membre-page .section-3 .text .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-3 .text ul {
    margin: 0 !important;
  }

  .carte-membre-page .section-4 img {
    margin-bottom: 70px !important;
  }

  .carte-membre-page .section-4 .font19 {
    font-size: 13px;
  }

  .carte-membre-page .section-4 .font16 {
    font-size: 10px;
  }

  .carte-membre-page .section-4 .font10 {
    font-size: 6px;
  }

  .carte-membre-page .section-4 .title {
    left: 18px !important;
    top: 5px !important;
    line-height: 11px;
    width: 155px;
  }

  .carte-membre-page .section-4 .text {
    left: -23px !important;
    top: 145px !important;
    bottom: 0 !important;
    width: 240px !important;
    line-height: 5px;
  }

  .carte-membre-page .section-4 .text .font10 {
    font-size: 7px;
  }

  .carte-membre-page .section-4 .text ul {
    margin-bottom: 0px;
  }

  .carte-membre-page .section-5 .font19 {
    font-size: 12px;
  }

  .carte-membre-page .section-5 .font16 {
    font-size: 10px;
  }

  .carte-membre-page .section-5 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-5 .title {
    right: 12px !important;
    top: 5px !important;
    width: 224px;
    line-height: 11px;
  }

  .carte-membre-page .section-5 .subtitle {
    right: 0px !important;
    top: 60px !important;
    width: 260px !important;
    line-height: 12px;
  }

  .carte-membre-page .section-5 .text {
    right: -5px !important;
    bottom: 32px !important;
    width: 284px !important;
    line-height: 11px;
  }

  .carte-membre-page .section-6 img {
    margin-top: 50px !important;
  }

  .carte-membre-page .section-6 .font19 {
    font-size: 12px;
  }

  .carte-membre-page .section-6 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-6 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-6 .title {
    width: 167px;
    line-height: 11px;
    top: 20px !important;
    left: 12px !important;
  }

  .carte-membre-page .section-6 .text {
    top: 77px !important;
    width: 350px !important;
    line-height: 10px;
    left: 8px !important;
  }

  .carte-membre-page .section-7 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-7 .absolute {
    left: 0;
    right: 0;
    margin: auto;
    width: 349px !important;
    text-align: center;
    line-height: 16px !important;
  }
}

@media screen and (min-width: 320px) and (max-width: 349px) {
  .carte-membre-page .row img {
    margin-top: 35px !important;
  }

  .carte-membre-page .section-1 .title {
    left: 129px !important;
    top: 9px !important;
  }

  .carte-membre-page .section-1 .title .font35 {
    line-height: 23px !important;
    font-size: 19px !important;
  }

  .carte-membre-page .section-1 .subtitle {
    left: -3px !important;
    width: 197px;
    line-height: 9px;
    bottom: 3px !important;
  }

  .carte-membre-page .section-1 .subtitle .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-2 img {
    margin-top: 85px !important;
  }

  .carte-membre-page .section-2 .text {
    left: 3px !important;
    top: -3px !important;
    width: 318px !important;
  }

  .carte-membre-page .section-2 .text .font16 {
    font-size: 9px;
    line-height: 13px;
  }

  .carte-membre-page .section-2 .text .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-2 .text ul {
    margin: 0 !important;
  }

  .carte-membre-page .section-3 .text {
    left: 3px !important;
    top: -10px !important;
    width: 320px !important;
  }

  .carte-membre-page .section-3 .text .font16 {
    font-size: 9px;
    line-height: 13px;
  }

  .carte-membre-page .section-3 .text .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-3 .text ul {
    margin: 0 !important;
  }

  .carte-membre-page .section-4 img {
    margin-bottom: 95px !important;
  }

  .carte-membre-page .section-4 .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-4 .font16 {
    font-size: 10px;
  }

  .carte-membre-page .section-4 .font10 {
    font-size: 6px;
  }

  .carte-membre-page .section-4 .title {
    left: 10px !important;
    top: 5px !important;
    line-height: 9px;
    width: 155px;
  }

  .carte-membre-page .section-4 .text {
    left: -23px !important;
    top: 155px !important;
    bottom: 0 !important;
    width: 240px !important;
    line-height: 5px;
  }

  .carte-membre-page .section-4 .text .font10 {
    font-size: 7px;
  }

  .carte-membre-page .section-4 .text ul {
    margin-bottom: 0px;
  }

  .carte-membre-page .section-5 .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-5 .font16 {
    font-size: 9px;
  }

  .carte-membre-page .section-5 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-5 .title {
    right: -2px !important;
    top: 5px !important;
    width: 196px;
    line-height: 9px;
  }

  .carte-membre-page .section-5 .subtitle {
    right: 0px !important;
    top: 60px !important;
    width: 240px !important;
    line-height: 12px;
  }

  .carte-membre-page .section-5 .text {
    right: -5px !important;
    bottom: 32px !important;
    width: 240px !important;
    line-height: 8px;
  }

  .carte-membre-page .section-5 .text .font16 {
    font-size: 8px;
  }

  .carte-membre-page .section-6 img {
    margin-top: 50px !important;
  }

  .carte-membre-page .section-6 .font19 {
    font-size: 11px;
  }

  .carte-membre-page .section-6 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-6 .font10 {
    font-size: 9px;
  }

  .carte-membre-page .section-6 .title {
    width: 136px;
    line-height: 9px;
    top: 20px !important;
    left: 12px !important;
  }

  .carte-membre-page .section-6 .text {
    top: 76px !important;
    width: 329px !important;
    line-height: 9px;
    left: 8px !important;
  }

  .carte-membre-page .section-6 .text .font16 {
    font-size: 9px;
  }

  .carte-membre-page .section-7 .font16 {
    font-size: 11px;
  }

  .carte-membre-page .section-7 .absolute {
    left: 0;
    right: 0;
    margin: auto;
    width: 349px !important;
    text-align: center;
    line-height: 16px !important;
  }
}

@media screen and (min-width: 411px) and (max-width: 430px) {
  .carte-membre-page .section-1 .title {
    left: 169px !important;
    top: 12px !important;
  }
}

@media screen and (max-width: 1200px) {
  .carte-membre span {
    font-size: 16px;
  }
}

@media screen and (max-width: 968px) {
  .font16 .cms-gray {
    font-size: 12px;
  }
}

@media screen and (max-width: 915px) {
  .mmt {
    margin-top: 50px;
  }
}

@media screen and (max-width: 850px) {
  .mmb {
    margin-bottom: 70px;
  }

  .font16 {
    font-size: 11px !important;
  }
}

@media screen and (min-width: 426px) and (max-width: 767px) {
  .container.carte-membre {
    max-width: 365px;
  }

  .carte-membre .second-row {
    padding-left: 0;
  }

  .carte-membre span {
    line-height: 1.3;
    padding-left: 5px;
    font-size: 9px;
  }

  .carte-membre p {
    line-height: 1.3;
    padding-left: 5px;
    font-size: 9px;
  }

  .carte-membre .section-3 .card .card-body {
    padding: 0;
  }

  .carte-membre .section-3 .mt-auto {
    margin-top: 30px !important;
    padding-top: 120px;
    padding-left: 20px;
  }

  .carte-membre .section-3 .card-img {
    position: absolute;
    top: 0;
  }

  .carte-membre ul li {
    line-height: 1.3;
    font-size: 10px;
  }

  .carte-membre .card .card-title {
    margin-bottom: 0px;
    font-size: 12px;
  }

  .carte-membre .card.my-0 {
    display: flex;
    flex-direction: column-reverse;
  }

  .carte-membre .card.my-0 .img-block {
    position: relative;
    bottom: 30px;
  }

  .carte-membre .card.my-0 .card-img-overlay {
    padding: 0;
    position: relative;
  }

  .carte-membre .card.my-0 .card-img-overlay .card-title {
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .carte-membre .header-img .card-img {
    position: absolute;
    top: 0;
  }

  .carte-membre .col-9.pl-0 {
    max-width: 80%;
    padding-right: 0;
  }

  .carte-membre .section-5 .card.my-0 .card-body {
    padding: 0;
  }

  .carte-membre .section-5 .card.my-0 .card-body p {
    padding-top: 150px;
  }

  .carte-membre .section-5 .card-img {
    position: absolute;
    top: 0px;
  }

  .carte-membre .section-6 .text-pink.pink-btn {
    position: absolute;
    bottom: 0;
  }

  .carte-membre .section-6 a {
    font-size: 10px;
  }
}

@media screen and (max-width: 768px) {
  .tmt {
    bottom: 80px !important;
  }

  .tmd {
    top: 52px !important;
  }

  .avantages .titre-page-avantages h3 {
    font-size: 22px;
    line-height: 27px;
    margin-top: 37px;
  }

  .avantages .card-title.pink-title {
    font-size: 15px;
    top: 25px;
  }

  .avantages .card-text {
    font-size: 0.9em;
    line-height: 1.5;
  }

  .avantages .card-title {
    font-size: 0.9em;
    line-height: 1.5;
  }

  .avantages .etape2-page-avantages h5 {
    left: 22px;
    top: 91px;
  }

  .avantages .plus-card .position-absolute {
    top: 18px;
  }

  .avantages .fin-page-avantages span {
    font-size: 0.65em;
    line-height: 1.5;
  }

  .avantages .etape1-2-page-avantages .card-body p {
    font-size: 0.9em;
    line-height: 1.5;
  }

  .avantages .etape1-2-page-avantages .card-body p:first-of-type {
    bottom: 15px;
    left: 5px;
  }

  .avantages .etape1-2-page-avantages .card-body p:last-of-type {
    top: 15px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    left: 37px;
    top: 27px;
  }

  .avantages .etape1-4-page-avantages #pour-chaque-center {
    left: -75px;
    top: 33px;
  }

  .avantages .etape1-4-page-avantages span {
    right: -173px;
    top: 5px;
    font-size: 9px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 10.5px;
    left: 45px;
    bottom: 15px;
  }

  .avantages #img-girl {
    width: 201px;
    bottom: 47px;
    right: 0px;
  }
}

@media screen and (max-width: 767px) {
  .footer_giro .footer-container .footer_giro_link {
    display: none;
  }

  .footer_giro .footer-container .copyright p {
    margin: 20px 0 0 0 !important;
  }
}

@media screen and (max-width: 688px) {
  .ltmb {
    top: 48px !important;
  }
}

@media screen and (max-width: 680px) {
  .mmb {
    margin-bottom: 120px;
  }
}

@media screen and (max-width: 675px) {
  .logo_admin_giro a img {
    height: 50px;
  }
}

@media screen and (max-width: 660px) {
  .cpt {
    top: 7px !important;
  }

  .cpt_first {
    bottom: 10px !important;
  }
}

@media screen and (max-width: 600px) {
  .mmt {
    margin-top: 100px;
  }

  .font16 {
    font-size: 10px !important;
  }
}

@media screen and (max-width: 554px) {
  .tmt {
    bottom: 63px !important;
    line-height: 15px;
  }

  .tmd {
    top: 38px !important;
    line-height: 15px;
  }

  .ltmb {
    top: 40px !important;
    line-height: 12px;
  }
}

@media screen and (max-width: 500px) {
  .mmt {
    margin-top: 170px;
  }
}

@media screen and (max-width: 480px) {
  .font16 {
    font-size: 8px !important;
  }

  .tmt {
    bottom: 51px !important;
    line-height: 12px;
  }

  .tmd {
    top: 35px !important;
    line-height: 9px;
  }

  .ltmb {
    top: 31px !important;
    line-height: 10px;
  }
}

@media screen and (max-width: 440px) {
  .cpt {
    top: 0 !important;
  }

  .cpt_first {
    bottom: 6px !important;
  }

  .font16 .cms-gray {
    font-size: 9px;
  }

  .font10 {
    font-size: 8px;
  }

  .font19 {
    font-size: 15px;
  }

  .bpt {
    bottom: 5px !important;
  }
}

@media screen and (max-width: 390px) {
  .tmt {
    bottom: 46px !important;
    line-height: 10px;
  }

  .tmd {
    top: 29px !important;
    line-height: 9px;
  }

  .ltmb {
    top: 27px !important;
    line-height: 9px;
  }
}

@media screen and (min-width: 320px) and (max-width: 425px) {
  .container.carte-membre {
    padding: 0;
  }

  .second-row {
    padding-left: 0;
  }

  .carte-membre .section-3 .card .card-body {
    padding: 0;
  }

  .carte-membre .section-3 .mt-auto {
    margin-top: 30px !important;
    padding-top: 120px;
    padding-left: 20px;
  }

  .carte-membre .section-3 .card-img {
    position: absolute;
    top: 0;
  }

  .carte-membre span {
    padding-left: 5px;
    font-size: 9px;
  }

  .carte-membre p {
    padding-left: 5px;
    font-size: 9px;
  }

  .carte-membre ul li {
    line-height: 1.3;
    font-size: 10px;
  }

  .carte-membre .card .card-title {
    margin-bottom: 0px;
    font-size: 12px;
  }

  .carte-membre .card.my-0 {
    display: flex;
    flex-direction: column-reverse;
  }

  .carte-membre .card.my-0 .img-block {
    position: relative;
    bottom: 30px;
  }

  .carte-membre .card.my-0 .card-img-overlay {
    padding: 0;
    position: relative;
  }

  .carte-membre .card.my-0 .card-img-overlay .card-title {
    padding-top: 15px;
    padding-bottom: 20px;
  }

  .carte-membre .header-img .card-img {
    position: absolute;
    top: 0;
  }

  .carte-membre .col-9.pl-0 {
    max-width: 80%;
    padding-right: 0;
  }

  .carte-membre .section-5 .card.my-0 .card-body {
    padding: 0;
  }

  .carte-membre .section-5 .card.my-0 .card-body p {
    padding-top: 150px;
  }

  .carte-membre .section-5 .card-img {
    position: absolute;
    top: 0px;
  }

  .carte-membre .section-6 .card-img {
    position: absolute;
    bottom: 0px;
  }

  .carte-membre .section-6 .card-body .col:first-child {
    padding-bottom: 100px;
  }

  .carte-membre .section-6 .card-body .col:last-child {
    position: relative;
    top: 13px;
  }

  .carte-membre .section-6 .card-body .col:last-child a {
    font-size: 10px;
  }
}

@media screen and (max-width: 980px) {
  .main-panel > .content.static {
    padding-left: 0;
    padding-right: 0;
  }

  .main-panel > .content.static .container-fluid.fluid-wrapper {
    padding-left: 0;
    padding-right: 0;
  }

  .main-panel > .content.static .container-fluid.fluid-wrapper .avantages {
    padding-left: 0;
    padding-right: 0;
  }

  .main-panel > .content.static .container-fluid.fluid-wrapper .avantages .content-column .row {
    margin-left: 0;
    margin-right: 0;
  }

  .avantages #img-girl {
    width: 250px;
    bottom: 60px;
    right: 0px;
  }
}

@media screen and (max-width: 992px) {
  .avantages .etape1-2-page-avantages .card-body p:first-of-type {
    bottom: 15px;
    left: 5px;
  }

  .avantages .etape1-2-page-avantages .card-body p:last-of-type {
    top: 22px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 12px;
    left: 50px;
    top: 40px;
  }

  .avantages .etape1-4-page-avantages #pour-chaque-center {
    left: 129px;
    top: 40px;
  }

  .avantages .fin-page-avantages span {
    margin-top: 0;
    font-size: 11.5px;
    bottom: 4px;
    left: 15px;
    line-height: 1.5;
  }

  .avantages #img-girl {
    width: 250px;
    bottom: 60px;
    right: -15px;
  }
}

@media screen and (max-width: 900px) {
  .avantages .titre-page-avantages h3 {
    font-size: 30px;
    line-height: 35px;
    margin-top: 50px;
  }

  .avantages .card-title.pink-title {
    font-size: 17px;
    top: 23px;
  }

  .avantages .card-text {
    font-size: 15px;
    line-height: 1.7;
  }

  .avantages .card-title {
    font-size: 15px;
    line-height: 1.7;
  }

  .avantages .card-text.chacun {
    bottom: 15px;
  }

  .avantages .card-title.chacun {
    bottom: 15px;
  }

  .avantages .etape1-1-page-avantages .card-body p:first-of-type {
    bottom: 15px;
    padding-left: 0;
  }

  .avantages .etape1-1-page-avantages .card-body p:nth-child(2) {
    bottom: 2px;
    right: 0;
    padding-right: 4px;
  }

  .avantages .etape1-1-page-avantages .card-body p:last-of-type {
    right: 0;
    padding-right: 0;
    bottom: 10px;
  }

  .avantages .plus-card .position-absolute {
    top: 10px;
  }

  .avantages .fin-page-avantages span {
    font-size: 0.8em;
    line-height: 1.6;
  }

  .avantages .etape1-2-page-avantages .card-body p:last-of-type {
    top: 12px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 12px;
    left: 50px;
    top: 27px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 11px;
    left: 50px;
    bottom: 20px;
  }

  .avantages #img-girl {
    width: 237px;
    bottom: 60px;
    right: 0px;
  }
}

@media screen and (max-width: 852px) {
  .avantages .titre-page-avantages h3 {
    font-size: 25px;
    line-height: 35px;
    margin-top: 45px;
  }

  .avantages .card-text {
    font-size: 14px;
  }

  .avantages .card-title {
    font-size: 14px;
  }

  .avantages .fin-page-avantages span {
    font-size: 0.75em;
    line-height: 1.6;
  }

  .avantages #img-girl {
    width: 229px;
    bottom: 50px;
    right: 0px;
  }
}

@media screen and (max-width: 797px) {
  .avantages .card-title.pink-title {
    font-size: 16px;
    top: 25px;
  }

  .avantages .titre-page-avantages h3 {
    font-size: 24px;
    line-height: 35px;
    margin-top: 35px;
  }

  .avantages .fin-page-avantages span {
    font-size: 0.7em;
    line-height: 1.6;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 11px;
    top: -15px;
  }

  .avantages #img-girl {
    width: 213px;
    bottom: 48px;
    right: 0px;
  }
}

@media screen and (max-width: 720px) {
  .avantages .titre-page-avantages h3 {
    font-size: 20px;
    line-height: 24px;
    margin-top: 35px;
  }

  .avantages .card-title.pink-title {
    font-size: 14px;
    top: 22px;
  }

  .avantages .fin-page-avantages span {
    font-size: 0.6em;
    line-height: 1.4;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 10px;
    top: 13px;
  }

  .avantages .etape1-4-page-avantages #pour-chaque-center {
    left: -69px;
    top: 33px;
  }

  .avantages .etape1-4-page-avantages span {
    right: -160px;
    top: 5px;
    font-size: 9px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 10.5px;
    left: 15px;
    bottom: 15px;
  }

  .avantages #img-girl {
    width: 187px;
    bottom: 44px;
    right: 0px;
  }
}

@media screen and (max-width: 653px) {
  .avantages .titre-page-avantages h3 {
    font-size: 18px;
    line-height: 24px;
    margin-top: 30px;
  }

  .avantages .card-title.pink-title {
    font-size: 12px;
    top: 22px;
    left: 33px;
  }

  .avantages .plus-card .position-absolute {
    top: 10px;
    left: 5px;
  }

  .avantages .card-text {
    font-size: 0.8em;
    line-height: 1.5;
  }

  .avantages .card-title {
    font-size: 0.8em;
    line-height: 1.5;
  }

  .avantages .etape1-2-page-avantages .card-body p:last-of-type {
    top: -4px;
    line-height: 1.2;
    left: 14px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 9px;
    top: 1px;
    left: 28px;
  }

  .avantages .fin-page-avantages span {
    font-size: 0.58em;
    bottom: 7px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 9px;
    left: 19px;
    bottom: 9px;
  }

  .avantages #img-girl {
    width: 167px;
    bottom: 40px;
    right: 0px;
  }
}

@media screen and (max-width: 625px) {
  .avantages .titre-page-avantages h3 {
    line-height: 20px;
  }

  .avantages .plus-card .position-absolute {
    top: 10px;
    left: 5px;
  }

  .avantages .fin-page-avantages span {
    left: 5px;
    font-size: 0.53em;
    bottom: 7px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 8px;
    left: 19px;
    bottom: 9px;
  }

  .avantages #img-girl {
    width: 160px;
    bottom: 36px;
  }
}

@media screen and (max-width: 576px) {
  .avantages .titre-page-avantages h3 {
    font-size: 18px;
    line-height: 20px;
    margin-top: 30px;
  }

  .avantages .card-title.pink-title {
    font-size: 11px;
    top: 20px;
  }

  .avantages .etape2-page-avantages h5 {
    left: 10px;
    top: 63px;
  }

  .avantages .plus-card .position-absolute {
    top: 5px;
    left: 5px;
  }

  .avantages .fin-page-avantages span {
    left: 5px;
    font-size: 0.5em;
    bottom: 7px;
  }

  .avantages .etape1-2-page-avantages .card-body p {
    font-size: 0.75em;
  }

  .avantages .etape1-2-page-avantages .card-body p:first-of-type {
    bottom: 20px;
    left: 0px;
  }

  .avantages .etape1-2-page-avantages .card-body p:last-of-type {
    top: -10px;
    left: 20px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 8.5px;
    left: 12px;
    top: -9px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 8px;
    left: 20px;
    bottom: 5px;
  }

  .avantages .etape1-1-page-avantages .card-body p {
    font-size: 0.75em;
  }

  .avantages .etape1-1-page-avantages .card-body p:first-of-type {
    right: 8px;
    top: 0px;
  }

  .avantages .etape1-1-page-avantages .card-body p:nth-child(2) {
    bottom: 2px;
    right: 0;
    padding-right: 4px;
  }

  .avantages .etape1-1-page-avantages .card-body p:last-of-type {
    left: 5px;
    padding-right: 0;
    top: 5px;
  }

  .avantages .etape1-4-page-avantages #pour-chaque-center {
    left: -52px;
    top: 33px;
  }

  .avantages .etape1-4-page-avantages span {
    right: -127px;
    top: 11px;
    font-size: 7.5px;
  }

  .avantages #img-girl {
    width: 151px;
    bottom: 35px;
  }
}

@media screen and (max-width: 562px) {
  .giro-container #header-container-giro {
    width: 250px;
    float: right;
    position: relative;
  }

  .giro-container #header-container-giro #sign-giro {
    margin-right: -55px;
  }
}

@media screen and (max-width: 555px) {
  .avantages .plus-card .position-absolute {
    line-height: 1.2;
    top: 11px;
    left: 3px;
  }

  .avantages .fin-page-avantages span {
    left: 5px;
    font-size: 0.45em;
    bottom: 7px;
  }

  .avantages #img-girl {
    width: 144px;
    bottom: 33px;
  }
}

@media screen and (max-width: 532px) {
  .avantages .titre-page-avantages h3 {
    font-size: 16px;
    line-height: 18px;
    margin-top: 25px;
  }

  .avantages .card-title.pink-title {
    font-size: 10px;
    top: 18px;
  }

  .avantages .plus-card .position-absolute {
    line-height: 1.2;
    top: 10px;
    left: 0;
  }

  .avantages .fin-page-avantages span {
    left: 5px;
    font-size: 0.45em;
    bottom: 7px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 7.5px;
    top: -19px;
    left: 16px;
  }

  .avantages .card-text {
    font-size: 0.7em;
    line-height: 1.2;
  }

  .avantages .card-title {
    font-size: 0.7em;
    line-height: 1.2;
  }

  .avantages .etape1-4-page-avantages span {
    right: -113px;
    top: 13px;
    font-size: 7px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 7px;
    left: 17px;
    bottom: 5px;
  }

  .avantages #img-girl {
    width: 139px;
    bottom: 32px;
  }
}

@media screen and (max-width: 490px) {
  .avantages .titre-page-avantages h3 {
    font-size: 15px;
    line-height: 18px;
    margin-top: 20px;
  }

  .avantages .plus-card .position-absolute {
    line-height: 1.2;
    top: 10px;
    font-size: 0.9em;
  }

  .avantages .fin-page-avantages span {
    left: 3px;
    font-size: 5.8px;
    bottom: 10px;
  }

  .avantages #img-girl {
    width: 128px;
    bottom: 31px;
  }
}

@media screen and (max-width: 485px) {
  .giro-container #header-container-giro {
    width: 160px;
    float: right;
    position: relative;
  }

  .giro-container #header-container-giro #sign-giro {
    width: 235px;
    height: 114px;
    background-size: contain !important;
  }

  .giro-container #header-container-giro #cross-giro {
    width: 51px;
    height: 24px;
    left: -2px;
    top: 3px;
    background-size: contain !important;
  }

  .giro-container .mobile_giro {
    height: 114px !important;
  }
}

@media screen and (max-width: 467px) {
  .avantages .titre-page-avantages h3 {
    font-size: 14px;
    line-height: 15px;
    margin-top: 17px;
  }

  .avantages .card-title.pink-title {
    font-size: 9px;
    top: 16px;
    left: 25px;
  }

  .avantages .plus-card .position-absolute {
    line-height: 1.2;
    top: 8px;
    left: -5px;
  }

  .avantages .fin-page-avantages span {
    left: 2px;
    font-size: 5.2px;
    bottom: 10px;
  }

  .avantages #img-girl {
    width: 128px;
    bottom: 31px;
  }
}

@media screen and (max-width: 414px) {
  .avantages .titre-page-avantages h3 {
    font-size: 13px;
    line-height: 15px;
    margin-top: 12px;
  }

  .avantages .plus-card .position-absolute {
    top: 5px;
    left: -5px;
    font-size: 0.85em;
  }

  .avantages .card-text {
    font-size: 0.58em;
    line-height: 1.2;
  }

  .avantages .card-title {
    font-size: 0.58em;
    line-height: 1.2;
  }

  .avantages .card-title.pink-title {
    font-size: 9px;
    top: 14px;
    left: 18px;
  }

  .avantages .etape2-page-avantages h5 {
    left: 0px;
    top: 40px;
  }

  .avantages .fin-page-avantages span {
    left: 1px;
    font-size: 4.6px;
    bottom: 10px;
  }

  .avantages .etape1-1-page-avantages .card-body p {
    font-size: 0.58em;
  }

  .avantages .etape1-1-page-avantages .card-body p:first-of-type {
    right: 18px;
    top: 4px;
  }

  .avantages .etape1-1-page-avantages .card-body p:nth-child(2) {
    left: 20px;
    top: 4px;
  }

  .avantages .etape1-1-page-avantages .card-body p:last-of-type {
    left: 28px;
    top: 14px;
  }

  .avantages .etape1-2-page-avantages .card-body p {
    font-size: 0.58em;
  }

  .avantages .etape1-2-page-avantages .card-body p:first-of-type {
    bottom: 25px;
    left: -15px;
  }

  .avantages .etape1-2-page-avantages .card-body p:last-of-type {
    left: 25px;
    top: -26px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 6px;
    left: 4px;
    top: -28px;
  }

  .avantages .etape1-3-page-avantages p {
    left: 0px;
  }

  .avantages .etape1-4-page-avantages p {
    right: 10px;
    bottom: 3px;
  }

  .avantages .etape1-4-page-avantages #pour-chaque-center {
    left: -38px;
    top: 25px;
  }

  .avantages .etape1-4-page-avantages span {
    right: -83px;
    top: 16px;
    font-size: 5px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 6px;
    left: 0px;
    bottom: 0;
  }

  .avantages #img-girl {
    width: 107px;
    bottom: 26px;
  }
}

@media screen and (max-width: 396px) {
  .giro-container #header-container-giro {
    width: 120px;
    float: right;
    position: relative;
  }

  .giro-container #header-container-giro #sign-giro {
    width: 185px;
    height: 89px;
    background-size: contain !important;
  }

  .giro-container #header-container-giro #cross-giro {
    width: 51px;
    height: 24px;
    left: -6px;
    top: -2px;
    background-size: contain !important;
  }

  .giro-container .mobile_giro {
    height: 89px !important;
  }

  .logo_admin_giro a img {
    height: 40px;
  }
}

@media screen and (max-width: 375px) {
  .avantages .titre-page-avantages h3 {
    font-size: 12px;
    line-height: 13px;
    margin-top: 12px;
  }

  .avantages .card-title.pink-title {
    font-size: 8px;
    top: 12px;
    left: 18px;
  }

  .avantages .plus-card .position-absolute {
    left: -5px;
    font-size: 0.8em;
  }

  .avantages .fin-page-avantages span {
    left: 0;
    font-size: 4.6px;
    bottom: 11px;
  }

  .avantages .etape1-2-page-avantages p {
    font-size: 0.5em;
    line-height: 1.2;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 5.2px;
    top: -39px;
    left: 5px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 5.3px;
    left: 0px;
    top: 4px;
  }

  .avantages .etape1-1-page-avantages .card-body p {
    font-size: 0.5em;
  }

  .avantages .etape1-4-page-avantages span {
    right: -70px;
    top: 19px;
    font-size: 5px;
  }

  .avantages #img-girl {
    width: 97px;
    bottom: 23px;
  }
}

@media screen and (max-width: 320px) {
  .avantages .titre-page-avantages h3 {
    font-size: 12px;
    line-height: 10px;
    margin-top: 10px;
  }

  .avantages .card-title.pink-title {
    font-size: 7px;
    left: 15px;
    top: 10px;
  }

  .avantages .plus-card .position-absolute {
    top: 4px;
    left: -5px;
    font-size: 7px;
  }

  .avantages .fin-page-avantages span {
    left: -3px;
    font-size: 3.8px;
    bottom: 12px;
  }

  .avantages .etape1-2-page-avantages p {
    font-size: 5.7px;
  }

  .avantages .etape1-2-page-avantages p:first-of-type {
    bottom: 31px;
    left: -25px;
  }

  .avantages .etape1-2-page-avantages p:last-of-type {
    left: 36px;
    top: -34px;
  }

  .avantages .etape1-2-page-avantages .card-footer {
    font-size: 4.5px;
    top: -42px;
    left: -6px;
  }

  .avantages .etape2-3-page-avantages small {
    font-size: 4.5px;
    left: 0px;
    top: 5px;
  }

  .avantages .etape1-1-page-avantages .card-body p {
    font-size: 5.7px;
  }

  .avantages .etape1-1-page-avantages .card-body p:last-of-type {
    top: 17px;
  }

  .avantages .etape1-3-page-avantages p {
    bottom: 14px;
  }

  .avantages .etape2-page-avantages h5 {
    left: 0px;
    top: 29px;
  }

  .avantages .etape1-4-page-avantages p {
    right: 12px;
    bottom: 14px;
  }

  .avantages .etape1-4-page-avantages #pour-chaque-center {
    left: -28px;
    top: 19px;
  }

  .avantages .etape1-4-page-avantages span {
    right: -57px;
    top: 21px;
    font-size: 4px;
  }

  .avantages #img-girl {
    width: 82px;
    bottom: 21px;
  }
}