/* MENU MOBILE */



nav.fixed{
    height: 0px;
    background-color: transparent !important;
}

nav.fixed > .menu-nav > .LogoHeader{
    width: 80px;
    margin-top: 0px;
}


nav.fixed .menu-menu-1-container #primary-menu{
    margin-top:50px;
}

nav.fixed > .menu-nav > .menu-menu-principale-container{
    margin-top: 0px !important;
}

nav.fixed > .menu-nav > .navTrigger{
    margin-top: 10px !important;

}


nav.fixed #primary-menu{
    top:inherit !important;

}


.LogoHeader{
  width: 100px;
  float: left;
  margin-top: 20px;
}


.LogoHeader img{
    width: 70px;
    position: relative;
}


nav.fixed .LogoHeader img {
    width: 65px;
    margin-top: 8px;
}


.navTrigger{
  position: inherit !important;
  float: right !important;
  margin-top: 50px !important;
}

.navTrigger > div > svg{
  position: relative;
  top: 10px;
  left: -20px;
  border:2px solid white;
}

.navWhite .navTrigger > div > svg{
  position: relative;
  top: 10px;
  left: -20px;
  border:2px solid #0b3e73;
}


.navTrigger > .active > svg{

  border:0px solid white;
}

.navWhite  .navTrigger > .active > svg{

  border:0px solid white !important;
}

nav.pc {
  padding-left: 30px;
  padding-right: 30px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
 /* background-color: #212b34; */

}

nav.navWhite {

 background-color: white !important;

}

nav.pc .menu-menu-1-container, nav.pc .menu-menu-1-en-container {
  width: calc(100% - 110px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
}
nav.pc .menu-menu-1-container #primary-menu, nav.pc .menu-menu-1-en-container #primary-menu {
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  right: 0;
  top:35px;
}
nav.pc .menu-menu-1-container #primary-menu > li, nav.pc .menu-menu-1-en-container #primary-menu > li {
  display: inline-block;
}
nav.pc .menu-menu-1-container #primary-menu > li > a, nav.pc .menu-menu-1-en-container #primary-menu > li > a {
  display: block;
  padding: 5px 20px;
  font-size: 19px;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
nav.pc .menu-menu-1-container #primary-menu > li > a:after, nav.pc .menu-menu-1-en-container #primary-menu > li > a:after {
  content: " ";
  width: 0px;
  height: 3px;
  background: #3d6fb6;
  display: block;
  animation: line-width-out 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
nav.pc .menu-menu-1-container #primary-menu > li > a:hover, nav.pc .menu-menu-1-en-container #primary-menu > li > a:hover {
  color: #3d6fb6;
  text-decoration: none;
}
nav.pc .menu-menu-1-container #primary-menu > li > a:hover:after, nav.pc .menu-menu-1-en-container #primary-menu > li > a:hover:after {
  animation: line-width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

nav.pc .menu-menu-1-container .menu-item-has-children, nav.pc .menu-menu-1-en-container .menu-item-has-children {
  position: relative;
  cursor: pointer;
}
nav.pc .menu-menu-1-container .menu-item-has-children .sub-menu, nav.pc .menu-menu-1-en-container .menu-item-has-children .sub-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  left: 0;
  transform: scaleY(0);
  padding-left: 0;
}
nav.pc .menu-menu-1-container .menu-item-has-children .sub-menu li, nav.pc .menu-menu-1-en-container .menu-item-has-children .sub-menu li {
  clear: both;
  width: 150%;
}
nav.pc .menu-menu-1-container .menu-item-has-children .sub-menu li a, nav.pc .menu-menu-1-en-container .menu-item-has-children .sub-menu li a {
  background: #0582ca;
  padding: 10px 30px;
  display: block;
  width: 100%;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}
nav.pc .menu-menu-1-container .menu-item-has-children .sub-menu li a:hover, nav.pc .menu-menu-1-en-container .menu-item-has-children .sub-menu li a:hover {
  background: #141a26;
  text-decoration: none;
}
nav.pc .menu-menu-1-container .menu-item-has-children:hover .sub-menu, nav.pc .menu-menu-1-en-container .menu-item-has-children:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  animation: scale-in-ver-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
nav.pc .menu-nav {
  height: 150px;
  position: relative;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
  margin-left: auto;
  margin-right: auto;
}

nav.navWhite .menu-nav {
  height: 100px;

}


nav.pc .menu-nav .logo-nav {
  width: 55px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  position: absolute;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
nav.pc .menu-nav .menu-lang {
  width: 25px;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  position: absolute;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
nav.pc .menu-nav .menu-lang a {
  color: #3d6fb6;
  margin-bottom: 0;
  line-height: 1;
  font-weight: 900;
  font-size: 17px;
}
nav.pc .menu-nav .menu-lang a:hover {
  text-decoration: none;
  color: #141a26;
}
nav.pc .icon-member {
  opacity: 0;
  position: absolute;
  right: 40px;
  color: #3d6fb6;
  font-size: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}

nav.pc.fixed .menu-nav {
  height: 44px;
}
nav.pc.fixed .menu-nav .menu-menu-1-container, nav.pc.fixed .menu-nav .menu-menu-1-en-container {
  height: 44px;
}
nav.pc.fixed .menu-nav .logo-nav {
  width: 25px;
}
nav.mobile {
  transform: translateX(100%);
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
  padding-top: 150px;
  padding-bottom: 90px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1900;
  width: 100%;
  background: white;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  max-height: 100vh;
}
nav.mobile > .menu-menu-principale-container {
    background-color: white !important;
    margin-top: 0px !important; 
    padding-left: 0px !important;
}
nav.mobile > .menu-menu-principale-container > ul > li > ul {
    background-color: white !important;
}
nav.mobile > .menu-menu-principale-container > ul > li{
    list-style: none !important;
}
nav.mobile > .menu-menu-principale-container > ul > li.menu-item-29{
    width: 180px !important;
}
nav.mobile > .menu-menu-principale-container > ul > li > a{

    text-decoration: none !important;
}
nav.mobile > .menu-menu-principale-container > ul > li > ul > li {
    list-style: none !important;

}
nav.mobile > .menu-menu-principale-container > ul > li > ul > li > a {

    text-decoration: none !important;
}

nav.mobile li  {

    width: 300px;
    margin: auto;
    text-align: center;
    list-style: none;
}


.mobile > div ul a{
  color: #0b3e73;
  font-family: paralucent-text, sans-serif !important;
  font-weight: 700 !important;
}


nav.mobile .logo-nav {
  width: 55px;
  margin-left: 60px;
  margin-bottom: 15px;
}
nav.mobile .menu-lang {
  position: absolute;
  top: 30px;
  right: 130px;
}
nav.mobile .menu-menu-1-container .menu, nav.mobile .menu-menu-1-en-container .menu {
  margin-left: 0;
  padding-left: 0;
  min-width: 500px;
}
nav.mobile .menu-menu-1-container .menu > li > a, nav.mobile .menu-menu-1-en-container .menu > li > a {
  cursor: pointer;
  font-size: 140%;
  display: block;
 
  padding-bottom: 30px;
  padding-top: 30px;
  border-bottom: solid 1px rgba(198, 198, 198, 0.5);
}
nav.mobile .menu-menu-1-container .menu > li > a:hover, nav.mobile .menu-menu-1-en-container .menu > li > a:hover {
  text-decoration: none;
    border-bottom: 1px solid #0b3e73;
  font-weight: 800;
  margin-left: 0;
  width: 100%;

}

nav.mobile .menu-menu-1-container .menu .current_page_item > a, nav.mobile .menu-menu-1-container .menu .current-menu-parent > a, nav.mobile .menu-menu-1-en-container .menu .current_page_item > a, nav.mobile .menu-menu-1-en-container .menu .current-menu-parent > a {

  border-bottom: 1px solid #0b3e73;

  font-weight: 800;
  letter-spacing: 1px;
  width: 100%;
}
nav.mobile .menu-menu-1-container .menu .current_page_item > a:before, nav.mobile .menu-menu-1-container .menu .current-menu-parent > a:before, nav.mobile .menu-menu-1-en-container .menu .current_page_item > a:before, nav.mobile .menu-menu-1-en-container .menu .current-menu-parent > a:before {
  content: "";
  /*width: 70px;
  height: 4px;
  background: #fff;*/
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children {
  position: relative;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu {
  opacity: 0;
  transition: all 0.5s ease;
  display: none;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu li, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu li {
  clear: both;
  width: 100%;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu li a, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu li a {
  padding: 15px 30px;
  display: block;
  width: calc(100% - 30px);
  font-size: 1.1rem;
  cursor: pointer;
  border-bottom: solid 1px rgba(198, 198, 198, 0.5);
  margin-left: 30px;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu li a:hover, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu li a:hover {
  background: #141a26;
  text-decoration: none;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu .current_page_item a, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu .current_page_item a {
  padding-left: 40px;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu .current_page_item a:before, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu .current_page_item a:before {
  width: 30px;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children:hover li a, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children:hover li a {
  color: #fff;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children > a:after, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children > a:after {
  content: "юдО";
  font-family: "icomoon";
  position: absolute;
  top: calc(50% - 12px);
  right: 60px;
  transform: rotate(0deg);
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children.opened .sub-menu, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children.opened .sub-menu {
  opacity: 1;
}
nav.mobile .menu-menu-1-container .menu .menu-item-has-children.opened a:after, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children.opened a:after {
  transform: rotate(180deg);
}
nav.mobile.opened {
  transform: translateX(0);
}

.main-navigation #primary-menu li a{
    font-family: Urbanist-SemiBold, sans-serif !important;
    color:#030712 !important;
}




.main-navigation #primary-menu li.current-menu-item a{
  opacity: 0.5;
}


.navTrigger {
  display: none;
  cursor: pointer;
  width: 55px;
  height: 43px;
  margin: auto;
  position: fixed;
  right: 0px;
  top: 30px;
  z-index: 9999;
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
    height: 60px;
    width: 100px;
    padding: 0px 20px;
}

.navWhite .navTrigger{
  top:0px;
}


.navTrigger i {
  background-color: #ef9235;
  border-radius: 2px;
  content: "";
  display: block;
  width: 100%;
  height: 5px;
}
.navTrigger i:nth-child(3) {
  width: 60%;
  float: right;

}
.navTrigger i:nth-child(1) {
  animation: outT 0.8s backwards;
  animation-direction: reverse;
  opacity: 1;
}
.navTrigger i:nth-child(2) {
  margin: 7px 0;
  animation: outM 0.8s backwards;
  animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
  animation: outBtm 0.8s backwards;
  animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
  animation: inT 0.8s forwards;
  opacity: 0;
}
.navTrigger.active i:nth-child(2) {
  animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
  animation: inBtm 0.8s forwards;
}
.navTrigger.fixed {
  top: 12px;
  width: 45px;
  height: 19px;
}
.navTrigger.fixed i {
  height: 3px;
}
.navTrigger.fixed i:nth-child(2) {
  margin: 5px 0;
}
.navTrigger.fixed.active {
  width: 55px;
  height: 43px;
  top: 24px;
}
.navTrigger.fixed.active i {
  height: 5px;
}
.navTrigger.fixed.active i:nth-child(2) {
  margin: 7px 0;
}

@keyframes inM {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes outM {
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}
@keyframes inT {
  0% {
    transform: translateY(0px) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translateY(12px) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translateY(12px) rotate(135deg);
    opacity: 0;
  }
}
@keyframes outT {
  0% {
    opacity: 0;
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(12px) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translateY(12px) rotate(135deg);
    opacity: 0;
  }
}
@keyframes inBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(0deg);
  }
  100% {
    transform: translateY(-12px) rotate(135deg);
  }
}
@keyframes outBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(0deg);
  }
  100% {
    transform: translateY(-12px) rotate(135deg);
  }
}

.LogoHeaderTel{
  display: none !important;
}


.navTrigger .active path{
  stroke: #0b3e73 !important;
}

nav.pc > div > div > ul > li.current_page_item > a{
  color: #ef9235 !important;
}


  .navTrigger {
    display: none;
  }
@media (max-width: 1500px) {


  nav.pc .menu-menu-1-container #primary-menu > li > a, nav.pc .menu-menu-1-en-container #primary-menu > li > a {
    font-size: 15px;
  }
  nav.pc .menu-nav .logo-nav {
    width: 45px;
  }
}
@media (max-width: 1300px) {
  nav.pc .menu-nav > .menu-menu-1-container, nav.pc .menu-nav > .menu-menu-1-en-container {
    display: none;
  }
  nav.pc .menu-nav .menu-lang {
    right: 80px;
  }

  .LogoHeaderTel{
    display: none !important;
  }

  .LogoHeader{
    display: block !important; 
  }

  nav.pc div .menu-menu-principale-container{
    display: none;
  }

  .navTrigger {
    display: block;
  }

  nav.pc .icon-member {
    right: 130px;
  }

}

@media (max-width: 997px) {
    nav.pc .menu-nav{
      width: inherit;
    }

 }

@media (max-width: 767px) {
    nav.pc .menu-nav {
      height: 70px;
    }

    nav.mobile .menu-lang {
      top: 23px;
    }

    .navTrigger {
      top: 20px;
    }
 }

@media (max-width: 575px) {


  nav.pc {
    padding-left: 15px;
  }
  nav.pc .menu-nav {
    height: 50px;
  }
  nav.pc .menu-nav .menu-menu-1-container ul, nav.pc .menu-nav .menu-menu-1-en-container ul {
    height: 60px;
  }
  nav.pc .menu-nav .logo-nav {
    width: 33px;
  }
  nav.pc.fixed .menu-nav {
    height: 40px;
  }

  .navTrigger {
    top: 20px;

  }

  nav.fixed .navTrigger {
    top: 0px;

  }

  .navTrigger i {
    height: 4px;
  }
  .navTrigger.fixed {
    top: 10px;
  }
  .navTrigger.fixed.active {
    top: 10px;
    width: 45px;
  }
  .navTrigger.fixed.active i {
    height: 4px;
  }
  .navTrigger.active {
    top: 10px;
  }

  nav.mobile {
    width: 100%;
 
  }
  nav.mobile .menu-menu-1-container .menu, nav.mobile .menu-menu-1-en-container .menu {
    min-width: 200px;
    width: 100%;
  }
  nav.mobile .menu-menu-1-container .menu li a, nav.mobile .menu-menu-1-en-container .menu li a {
    font-size: 1.2rem;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  nav.mobile .menu-menu-1-container .menu li a:hover, nav.mobile .menu-menu-1-en-container .menu li a:hover {
    padding-right: 30px;
  }
  nav.mobile .menu-lang {
    top: 12px;
    right: 80px;
  }


}

@media (max-width: 450px) {

  nav.mobile .menu-menu-1-container .menu li a, nav.mobile .menu-menu-1-en-container .menu li a {
    font-size: 1rem;
    margin-left: 0px;
  }
  nav.mobile .menu-menu-1-container .menu li a:hover, nav.mobile .menu-menu-1-en-container .menu li a:hover {
    padding-left: 0px;
  }
  nav.mobile .menu-menu-1-container .menu .current_page_item a, nav.mobile .menu-menu-1-container .menu .current-menu-parent a, nav.mobile .menu-menu-1-en-container .menu .current_page_item a, nav.mobile .menu-menu-1-en-container .menu .current-menu-parent a {
    padding-left: 0px;
  }
  nav.mobile .menu-menu-1-container .menu .current_page_item a:before, nav.mobile .menu-menu-1-container .menu .current-menu-parent a:before, nav.mobile .menu-menu-1-en-container .menu .current_page_item a:before, nav.mobile .menu-menu-1-en-container .menu .current-menu-parent a:before {
    width: 45px;
  }
  nav.mobile .menu-menu-1-container .menu .menu-item-has-children .sub-menu li a, nav.mobile .menu-menu-1-en-container .menu .menu-item-has-children .sub-menu li a {
    font-size: 0.9rem;
  }
  nav.mobile .logo-nav {
    width: 40px;
    margin-left: 30px;
  }



}

.Menuactive{
  transform: translateX(0%) !important;
}


/***************FIN MENU*********************/

/*****************DEBUT BTN**********************/

.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    border-radius: 10px;

    background: #030712;
    border: 1px solid #030712;
    border-radius: 100px;
    padding: 25px 55px ;
    color: #fff;
    text-decoration: none;
    transition: 0.5s;
}

.text {
    position: relative;
    z-index: 2;
    font-size: 19px !important;
}

.fill {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    z-index: 1;

    left: 0;
    top: 0;

    scale: 0;
}

.btn:hover {
    color: #030712;
    transition: 0.5s;
}


.btnOutline  {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
    border-radius: 10px;

    background: transparent;
    border: 1px solid #030712;
    border-radius: 100px;
    padding: 25px 55px ;
    color: #030712;
    text-decoration: none;
    transition: 0.5s;
}

.btnOutline:hover {
    color: #fff;
    transition: 0.5s;
}

.fillOutline {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #030712;
    z-index: 1;

    left: 0;
    top: 0;

    scale: 0;
}


.BtnFlecheContour {
    border: 1px solid #030712;
    border-radius: 100px;
    color: #030712;
    font-size: 19px;
    padding: 15px 25px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    overflow: hidden;

    transition: opacity 0.5s;
}


.BtnFlecheContour:hover {
    color: #030712;
    opacity: 0.5;
    transition:0.5s;
}
.BtnFlecheContour svg {
    width: 25px;
    height: 25px;
}

/* Animation au hover */
.BtnFlecheContour:hover svg {
    animation: flecheSlide 0.5s ease;
}

@keyframes flecheSlide {

    /* Position normale */
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    /* Elle part vers la droite */
    45% {
        transform: translateX(25px);
        opacity: 0;
    }

    /* Elle réapparaît à gauche */
    55% {
        transform: translateX(-25px);
        opacity: 0;
    }

    /* Retour à sa place */
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
/*****************FIN BTN**********************/


.row {
    margin-right: 0 !important;
    margin-left:  0 !important;
}

.SectionHeader{
  padding: 200px 0;

}

.SectionHeader h1 span{
  color: #B6BCC6 !important;
}

.DisplayFlex{
  display: flex;
}

.BtnPlacerDroite{
  margin: auto 0 auto auto;
  position: relative;
  bottom: 5px;
}


/**************************/

.BlocEnsembleReal {
    width: 100%;
    position: relative;
}

.BlocReal {
    width: 100%;
    position: relative;
}

.BlocReal a {
    display: block;
    width: 100%;
}

.DivBlocRealChacun {
    height: calc(100vh - 150px);
    width: 100%;

    background-size: 100%;
    background-position: center;
    background-color: #e8e8e8;

    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition:0.5s;
}

.DivBlocRealChacun:after{
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
background: #FFF;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}

.DivBlocRealChacun:hover{
  background-size: 105%;
  transition:0.5s;
}

.BlocInterieurRealChacun{
  z-index: 55;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0px 0 30px 50px ;
}

.TitreBlocReal{
  color: #f9f9f9;
  font-family: Urbanist-Medium, sans-serif !important;
  font-size: 32px !important;
}

.CatRealBloc span{
	font-family: Urbanist-SemiBold, sans-serif !important;
  font-size: 16px !important;
  color: #f9f9f9;
  border: 2px solid #f9f9f9;
  border-radius: 50px;
  margin-right: 3px;
  padding: 8px 12px;
}

.SectionHelp{
  padding: 100px 0;
}

.SectionHelp h2{
  font-size: 64px !important;
}


.BlocNumCoter{
  align-items: flex-start !important;
  display: flex !important;
}

.NumCoter{
  margin-right: 1rem;
  font-size: 64px;
  color: #030712;
  writing-mode: vertical-lr;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-text-stroke: 1px;
  background-clip: text;
  -webkit-text-fill-color: transparent;

}

footer{
  border: 1px solid #e9ecef;
  padding: 100px 0 0 0;
}

.TitreFooter{
  font-size: 64px !important;
  
}
.cta-text{
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
}

.cta-text .line-item {
    font-size: 64px;
    color: #B6BCC6;
}
.cta-text .line {
    height: 1px;
    flex: 1;
    background-color: #e5e7eb;
}

.BasFooter{
  margin-top: 100px;
  background-color: #f8f8f9;
  padding: 20px 0;

}

.TopScroll{
  font-size: 19px !important;
  color: #030712 !important;
  position: relative;
}


.TopScroll:after{
  content: "";
  width: 0%;
  height: 2px;
  background-color: #030712;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: 0.5s;
}

.TopScroll:hover:after{
  width: 100%;
  transition: 0.5s;
}

.TextRight{
  text-align: right;
}

.copyright {
  font-size: 18px !important;
}

a:not(.btn), a:link:not(.btn), a:visited:not(.btn), a:hover:not(.btn), a:active:not(.btn) {
    font-size: 1.2rem;
	font-family: Urbanist-Medium, sans-serif !important;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.4s ease-out 0s;
}

.socials .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0.25rem;
    padding-left: 0;
    color: #030712 !important;
}


.socials .nav-link:after{
  content: "";
  width: 0%;
  height: 2px;
  background-color: #030712;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: 0.5s;
}

.socials .nav-link:hover:after{
  width: 100%;
  transition: 0.5s;
}


.socials .nav-link svg{
    width: 25px;
    height: 25px;
  transform: rotate(-45deg);
}

/* Animation au hover */
.socials .nav-link:hover svg {
    animation: flecheSlide 0.5s ease;
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}





.TitreEffetEcriture {
  color: #b6bcc6 !important;
  white-space: normal;
}

.TitreEffetEcriture .mot {
  display: inline-block;
}

.TitreEffetEcriture .lettre {
  color: #030712;
}

.SectionHeaderApropos{
  padding: 200px 0 150px;
}

.ImgApropos {
  height: 90px;
  border-radius: 50px;
}

.flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    grid-column-gap: 1.5rem;
    max-width: 930px;
}
.flex .line {
    height: 2px;
    flex: 1;
    background-color: #e5e7eb;
}


.TitreApropos{
    display: flex;
    align-items: center;
    grid-column-gap: 1.5rem;
}

.w-60 {
    max-width: 64vw;
}

.SectionExperience{
  background-color: #f8f8f9;
  padding: 150px 0;
}

.SectionExperience .count {
    font-size: 17px !important;
	font-family: Urbanist-SemiBold, sans-serif !important;
}

.SectionExperience h4{
  font-size: 19px !important;
}

.badge {
    background-color: #e8eaed;
    display: inline-flex;
    gap: 0.25em;
    padding: 0.5rem 0.75rem;
    border-radius: 50rem;
    font-size:16px !important;
	  font-family: Urbanist-SemiBold, sans-serif !important;
    color: var(--primary-p-color);
    transition: all cubic-bezier(.645, .045, .355, 1) 0.35s ;
}

.SectionExperience .item .content {
    padding-left: 2vw;
    padding-right: 2vw;
}
.SectionExperience .item {
    border-left: 1px solid #dddddd;
}
.SectionExperience .items .item {
    margin-top: 30px;
}

.TextExperience{
  font-size: 19px !important;
}

.badge:hover {
    opacity: 0.6;
}


.SectionImageParallax {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.SectionImageParallax img {
    position: absolute;
    top: -10%;
    left: 0;

    width: 100%;
    height: 120%;

    object-fit: cover;
    object-position: center;

    will-change: transform;
}

.SectionCompetence{
  padding: 150px 0;
  background-color: #f8f8f9;
}


.SectionCompetence .items .item {
    margin-top: 30px;
}

.TitreCompetence{
  font-size: 64px !important;
}
.TitreCompetence i{
  font-size: 32px !important;
  position: relative;
  bottom: 8px;
  margin-right: 5px;
}
.TitreCompetence i:before{
  color: #8b8d92;
}

.InfoCompetence{
  font-size: 19px !important;
	font-family: Urbanist-SemiBold, sans-serif !important;

}

.TexteCompetence{
  font-size: 19px !important;
}

.competence {
    width: 100%;
}

.competence .title {
    display: block;
    margin-bottom: 12px;
}

.progress {
    position: relative;
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 100px;
}

.progress-bar {
    position: relative;
    width: 0;
    height: 100%;
    background: #030712;
    border-radius: 100px;
}

.progress-value {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    transform: translateX(50%);

    padding: 5px 7px;
    background: #030712;
    color: #fff;

    font-size: 11px;
    line-height: 1;
    border-radius: 4px;

    white-space: nowrap;
}

/* Petite flèche sous le pourcentage */
.progress-value::after {
    content: "";
    position: absolute;

    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #030712;
}

.titleProgresse{
  color: #030712 !important;
  font-size: 17px !important;
	font-family: Urbanist-SemiBold, sans-serif !important;

  display: block;
}

.SectionFaq{
  padding: 150px 0;
}

.SectionFaq h2{
  text-align: center;
}

.BlocImageReal {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}



/* IMAGE */
.BlocImageReal img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transform: scale(1);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* HOVER */
.BlocImageReal:hover img {
    transform: scale(1.08);
}

.ContentReal h2{
  font-size: 32px !important;
}

.BtnReal{
	font-family: Urbanist-SemiBold, sans-serif !important;

  color: #353941 !important;
  font-size: 19px !important;
  position: relative;

}
.BtnReal:after{
  content: "";
  width: 50px;
  height: 2px;
  background-color: #353941 !important;
  position: absolute;
  right: -58px;
  top: 12px;
  transition: 0.5s;
}

.BtnReal:hover:after{
  width: 70px;
  right: -78px;
  transition: 0.5s;
}

.SectionHeaderRealisation{
  padding: 200px 0 150px;
}

.BlocTitreReeal h1{
  font-size: 64px !important;
}
.BlocTitreReeal p{
  font-size: 19px !important;
	font-family: Urbanist-Regular, sans-serif !important;

}

.BlocTitreReeal  .DateReal{
  font-family: Urbanist-Medium, sans-serif !important;

}

.PetitTitreReal{
  font-size: 19px !important;
  font-family: Urbanist-SemiBold, sans-serif !important;

}

.ContentRealInfo p{
  font-size: 19px !important;
}

.TexteRealInfo{
  font-size: 19px !important;
}




.LienVoirSite {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0;
    color: #030712 !important;
    display: inline-block;
}


.LienVoirSite:after{
  content: "";
  width: 0%;
  height: 2px;
  background-color: #030712;
  position: absolute;
  bottom: -5px;
  left: 0;
  transition: 0.5s;
}

.LienVoirSite:hover:after{
  width: 100%;
  transition: 0.5s;
}


.LienVoirSite svg{
    width: 25px;
    height: 25px;
}

.LienVoirSite:hover svg {
    animation: flecheSlide 0.5s ease;
}

.ImageRealWrapper {
    width: 100%;
    overflow: hidden;
}

.ImageRealEffet {
    width: 100%;
    display: block;

}

.BlocImageRealMobile{
  aspect-ratio: 407 / 550;
}

.BlocImageRealOrdi{
  aspect-ratio: 840 / 550;
}


.SectionRealisation{
  padding: 0 0 100px;
}


.SectionContact{
  padding: 150px 0;
  background-color: #f8f8f9;
}

.BlocBlancheInfoContact{
  background-color: #fff;
  border-radius: 30px;
  padding: 50px;
}

.LienContactCourriel{
  display: inline-block;
  color: #030712 !important;
  opacity: 1;
  transition: 0.5s;
}
.LienContactCourriel:hover{
  opacity: 0.5;
  transition: 0.5s;
}

.LienContactCourriel svg{
  width: 20px;
  margin-right: 10px;
  position: relative;
  bottom: 2px;
}

.BlocBlancheFormContact{
  background-color: #fff;
  border-radius: 30px;
  padding: 50px;
}

.InputForm {
  width: 100% !important;
  background-color: transparent !important;
  border: 0px !important;
  border-bottom: 1px solid #dddddd !important;
  padding:16px 12px !important;
  font-size: 19px !important;
	font-family: Urbanist-Regular, sans-serif !important;
  color: #212529 !important;
}

.InputForm:placeholder{
  font-size: 19px !important;
	font-family: Urbanist-Regular, sans-serif !important;
  color: #212529 !important;
}
.InputForm::placeholder{
  font-size: 19px !important;
	font-family: Urbanist-Regular, sans-serif !important;
  color: #212529 !important;
}

.SpanInteret{
  font-size: 17.5px !important;
	font-family: Urbanist-Medium, sans-serif !important;
  padding-left: 12px;
  margin-top: 30px;
  display: block;
}


.ClassBoutonRadio {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-left: 12px;
}


/* Enlève les marges CF7 */
.ClassBoutonRadio .wpcf7-list-item {
    margin: 0;
}


/* On cache le vrai radio */
.ClassBoutonRadio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* Le texte devient le bouton */
.ClassBoutonRadio .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 24px;

    border: 1px solid #000;
    border-radius: 50px;

    background: transparent;
    color: #000;
    font-size: 16px !important;

    cursor: pointer;

    transition: background 0.3s ease,
                color 0.3s ease;
}


/* Quand le radio est sélectionné */
.ClassBoutonRadio input[type="radio"]:checked
+ .wpcf7-list-item-label {
    background: #000;
    color: #fff;
}


/* Hover */
.ClassBoutonRadio label:hover .wpcf7-list-item-label {
    background: #000;
    color: #fff;
}


.BtnForm {
  font-size: 19px !important;
  color: white !important;
  border: 1px solid #030712 !important;
  background-color: #030712 !important;
  padding: 20px 32px !important;
  border-radius: 100px;
  margin-top: 30px;
  transition: 0.5s;
}

.BtnForm:hover {
  font-size: 19px !important;
  color: #030712 !important;
  background-color: transparent !important;
  transition: 0.5s;
}

nav.fixed .navTrigger{
  display: block !important;
}

.page-transition {
    position: fixed;
    inset: 0;
    background: #030712;
    z-index: 99999;
    pointer-events: none;
}

.page-transition__svg {
    position: absolute;
    top: 99%;
    left: 0;
    width: 100%;
    height: 400px;
    display: block;
    overflow: visible;
}

.page-transition__path {
    fill: #030712;
}

.loader-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: flex;

    font-size: clamp(22px, 3vw, 40px);
    font-weight: 600;
    letter-spacing: 2px;

    z-index: 2;
}

.loader-text span {
    color: #333;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
  position: absolute;
  left: -9999px;
}

.menuBurger-icon:checked + label,
.menuBurger-icon:not(:checked) + label{
  position: fixed;
  top: 63px;
  right: 75px;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}
.menuBurger-icon:checked + label:before,
.menuBurger-icon:not(:checked) + label:before{
  position: absolute;
  content: '';
  display: block;
  width: 30px;
  height: 20px;
  z-index: 20;
  top: 0;
  left: 0;
  border-top: 2px solid #ececee;
  border-bottom: 2px solid #ececee;
  transition: border-width 100ms 1500ms ease, 
              top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
              height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), 
              background-color 200ms ease,
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menuBurger-icon:checked + label:after,
.menuBurger-icon:not(:checked) + label:after{
  position: absolute;
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  z-index: 20;
  top: 10px;
  right: 4px;
  background-color: #ececee;
  margin-top: -1px;
  transition: width 100ms 1750ms ease, 
              right 100ms 1750ms ease,
              margin-top 100ms ease, 
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menuBurger-icon:checked + label:before{
  top: 10px;
  transform: rotate(45deg);
  height: 2px;
  background-color: #ececee;
  border-width: 0;
  transition: border-width 100ms 340ms ease, 
              top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
              height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), 
              background-color 200ms 500ms ease,
              transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}
.menuBurger-icon:checked + label:after{
  width: 30px;
  margin-top: 0;
  right: 0;
  transform: rotate(-45deg);
  transition: width 100ms ease,
              right 100ms ease,  
              margin-top 100ms 500ms ease, 
              transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navBurger{
  position: fixed;
  top: 33px;
  right: 50px;
  display: block;
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  z-index: 9;
  overflow: hidden;
  box-shadow: 0 8px 30px 0 rgba(0,0,0,0.3);
  background-color: #030712;
  animation: border-transform 7s linear infinite;
  transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 1100ms ease,
              width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
              height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
  14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
  28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
  42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
  56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
  70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
  84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}

.menuBurger-icon:checked ~ .navBurger {
  animation-play-state: paused;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 200%;
  height: 200%;
  transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),  
              right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 250ms 700ms ease,
              width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
              height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}

.navBurger ul{
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 6;
  text-align: center;
  transform: translateY(-50%);
  list-style: none;
}
.navBurger ul li{
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  list-style: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 250ms linear;
}
.navBurger ul li:nth-child(1){
  transition-delay: 200ms;
}
.navBurger ul li:nth-child(2){
  transition-delay: 150ms;
}
.navBurger ul li:nth-child(3){
  transition-delay: 100ms;
}
.navBurger ul li:nth-child(4){
  transition-delay: 50ms;
}
nav .navBurger ul li a{
    font-family: Urbanist-SemiBold, sans-serif !important;
  font-size: 65px  !important;
  line-height: 1.2;
  display: inline-block;
  position: relative;
  color: #ececee;
  transition: all 250ms linear;
}
.navBurger ul li a:hover{
  text-decoration: none;
  color: #ececee;
}
.navBurger ul li a:after{
  display: block;
  position: absolute;
  top: 50%;
  content: '';
  height: 2vh;
  margin-top: -1vh;
  width: 0;
  left: 0;
  background-color: #030712;
  
  transition: width 250ms linear;
}
.navBurger ul li a:hover:after{
  width: 100%;
}


.menuBurger-icon:checked ~ .navBurger  ul li {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease,
              transform 250ms ease;
}
.menuBurger-icon:checked ~ .navBurger ul li:nth-child(1){
  transition-delay: 1400ms;
}
.menuBurger-icon:checked ~ .navBurger ul li:nth-child(2){
  transition-delay: 1480ms;
}
.menuBurger-icon:checked ~ .navBurger ul li:nth-child(3){
  transition-delay: 1560ms;
}
.menuBurger-icon:checked ~ .navBurger ul li:nth-child(4){
  transition-delay: 1640ms;
}

.navBurger{
    visibility:hidden;
    opacity:0;
    transform: scale(0.5);
    transition:0.5s;
}

.menuBurger-icon + label{
    visibility:hidden;
    opacity:0;
    transform: scale(0.5);
    transition:0.5s;
}



.fixedMenuCollant{
    visibility:visible;
    opacity:1;
    transform: scale(1);
    transition:0.5s;
}

.fixedMenuCollantLabel + label{
    visibility:visible;
    opacity:1;
    transform: scale(1);
    transition:0.5s;
}

nav.fixed .LogoHeader, nav.fixed .LogoHeaderTel{
    visibility:hidden;
    opacity:0;
    transform: scale(0.5);
    transition:0.5s;
}

nav.fixed .main-navigation{
    visibility:hidden;
    opacity:0;
    transition:0.5s;
}


.grecaptcha-badge{
  visibility: hidden !important;
}

































@media only screen and (max-width: 1660px) {


}


@media only screen and (max-width: 1560px) {


        
    .TelHeaderTop {
        left: 200px;
    }
        
    
}


@media only screen and (max-width: 1300px) {


  .navBurger{
    visibility:visible;
    opacity:1;
    transform: scale(1);
    transition:0.5s;
  }

  .menuBurger-icon + label{
    visibility:visible;
    opacity:1;
    transform: scale(1);
    transition:0.5s;
  }  
      
}


@media only screen and (max-width: 1200px) {


  .cta-text .line {
      flex: none;
      width: 1px;
      height: clamp(2.5rem, 2.072rem + 2.14vw, 4rem);
  }
  .cta-text {
      flex-direction: column;
  }
}



@media only screen and (max-width: 991px) {

  
  .BtnPlacerDroite {
      margin: 20px 0 0 0;
      position: relative;
      bottom: 0px;
  }

  .DivBlocRealChacun {
      height: auto;
      aspect-ratio: 840 / 550;
  }

  .SectionHelp h2 {
      font-size: 40px !important;
  }

  .TitreFooter {
    font-size: 40px !important;
  }
  .cta-text .line-item {
      font-size: 40px;
  }


  .TextRight {
      text-align: center;
  }

  .copyrightCenter{
      text-align: center;
  }

  .w-50 {
      width: 100% !important;
  }

  .BlocTitreReeal h1 {
      font-size: 40px !important;
  }



}



@media only screen and (max-width: 600px) {


    /* =========================================
       BULLE DU MENU
    ========================================= */

    .navBurger {
        top: 20px;
        right: 30px;
        width: 60px;
        height: 60px;
    }


    /* =========================================
       ZONE CLIQUABLE DU BURGER
    ========================================= */

    .menuBurger-icon:checked + label,
    .menuBurger-icon:not(:checked) + label {
        top: 41px;
        right: 50px;

        width: 20px;
        height: 20px;
    }


    /* =========================================
       LIGNES HAUT + BAS
    ========================================= */

    .menuBurger-icon:checked + label:before,
    .menuBurger-icon:not(:checked) + label:before {
        width: 20px;
        height: 14px;

        top: 0;
        left: 0;

        border-top-width: 2px;
        border-bottom-width: 2px;
    }


    /* =========================================
       LIGNE DU MILIEU
    ========================================= */

    .menuBurger-icon:checked + label:after,
    .menuBurger-icon:not(:checked) + label:after {
        width: 14px;
        height: 2px;

        top: 7px;
        right: 3px;
    }


    /* =========================================
       BURGER OUVERT → PREMIÈRE LIGNE DU X
    ========================================= */

    .menuBurger-icon:checked + label:before {
        top: 7px;

        width: 20px;
        height: 2px;

        transform: rotate(45deg);

        border-width: 0;
    }


    /* =========================================
       BURGER OUVERT → DEUXIÈME LIGNE DU X
    ========================================= */

    .menuBurger-icon:checked + label:after {
        top: 7px;
        right: 0;

        width: 20px;
        height: 2px;

        margin-top: 0;

        transform: rotate(-45deg);
    }


    /* =========================================
       MENU OUVERT
    ========================================= */

    .menuBurger-icon:checked ~ .navBurger {
        top: 50%;
        right: 50%;

        width: 250%;
        height: 250%;

        transform: translate(50%, -50%);
    }


    /* =========================================
       LIENS
    ========================================= */

    nav .navBurger ul li a {
        font-size: 42px !important;
        line-height: 1.2;
    }

    .navBurger ul li {
        margin: 8px 0;
    }


  .w-60 {
    max-width: 100%;
  }

  .SectionHeaderApropos {
    padding: 200px 0 100px;
  }

  .SectionExperience {
      padding: 100px 0;
  }

  .SectionImageParallax {
      height: 400px;
  }

  .SectionCompetence {
      padding: 100px 0;
  }

  .SectionFaq {
      padding: 100px 0;
  }

  .SectionHeaderRealisation {
      padding: 200px 0 100px;
  }

  .SectionContact {
      padding: 100px 0;
  }

  .BlocBlancheInfoContact {
      border-radius: 20px;
      padding: 20px;
  }
  .BlocBlancheFormContact {
      border-radius: 20px;
      padding: 20px;
  }


}