@charset "UTF-8";
/* CSS Document */





* {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

.footer_infos, .footer_item, .about-clients, .about-infos {
font-family: bitcount-grid-single-circle, sans-serif;
    font-weight: 600;
    font-style: normal;
    /* position: fixed; */
    /* margin-left: 10px; */
    /* font-size: 14px; */
    line-height: 100%;
}

a {
    text-decoration: none;
    color: black;
}

@font-face {
 font-family: "marlfield";
 src: url("fonts/MarlfieldTRIAL-BoldCondensed.otf") format("OpenType");
}



.footer_title {
     /* padding-top: 5px; */
    font-family: "marlfield" !important;
    font-size: 35px;
    padding-top: 5px;
}




.infos, .back {
    margin-left: 10px;
}



.main-sub {
position: fixed;
    right: 0;
    /* min-height: calc(var(--vh, 1vh) * 100); */
    width: 100%;
    /* justify-content: space-between; */
    height: calc(88vh - 10px);
    align-items: end;
    text-align: center;
    /* align-items: center; */
    justify-content: center;
    display: flex;
    flex: wr;
    flex-wrap: wrap;
    gap: 10px;
    /* padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px; */

    align-items: right;
    top: 0;
}


#rectangle2 {
       top: calc(88vh - 120px);
    position: absolute;
    width: 110vw !important;
    left: -10px !important;
    padding: 0 !important;
    margin: 0 !important;
}


#rectangle, #rectangle2 {
    width: 100vw;
    height: 10vh;
    background: black;
    z-index: 100;
    position: absolute;
    opacity: 0.9;
  left: 0;
  /*top: 0;
        -webkit-animation: MoveDown 10s linear;*/
}

.pink {
    background-color: pink !important;
}

.moveDown {
        top: calc(78vh - 10px);
          transition: 10s;
}

.moveUp {
        top: 10px;
        transition: 10s;
      /* -webkit-animation: MoveUp 10s linear infinite;*/  
}

@keyframes MoveDown {
  0% {
    top: 10px;
  }
  100% {
    top: calc(78vh - 10px);
  }
}

@keyframes MoveUp {
  0% {
 top: calc(78vh - 10px); 
  }
  100% {
     top: 10px;
  }
}





.image2 {
    padding-left: 5px;
}



.swiper-container {
    position: relative;
     height: calc(100vh - 130px);
    /* height: calc(var(--vh, 1vh) * 100); */
    /* top: 5px; */
    /* width: 100vw; */
    background-color: white;
    /* right: 0; */
    text-align: center;
}

.swiper-wrapper {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);


  position: fixed;
    right: 0;
    /* min-height: calc(var(--vh, 1vh) * 100); */
    width: 100%;
    /* justify-content: space-between; */
    height: calc(88vh - 10px);
   /*  align-items: end;
    text-align: center;
    align-items: center; 
    justify-content: center;
    display: flex;
    flex: wr;
    flex-wrap: wrap;*/
    gap: 10px;
    /* padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px; */

    align-items: right;
    top: 0;
}

.swiper-slide {
    opacity: 1;
}



.about-infos, .about-clients {
opacity: 0;
width: 50%;
text-align: left;
    padding-top: 10px;
}


.about-infos{
padding-left: 5%;
    width: 45%;
    padding-right: 15px;

}
.back {
    display: none;
}

.phone {
    display: none;
}






@media screen and (min-width: 781px) {

.image_phone, .footer2  {
    display: none;
}

.main-container-about {
        position: relative;
    height: calc(88vh - 120px);
    top: 0 !important;
    background-color: white;
}

#footer {
    background-color: white;
    text-align: center;
    position: fixed;
    width: 100vw;
    padding-top: 20px;
    display: flex;
    /* justify-content: space-between; */
    height: 120px;
    z-index: 20;
    bottom: 0 !important;
    align-items: baseline;
    left: 0;
}

.footer_item {
    cursor: pointer;
    z-index: 15;    position: absolute;
}



.footer_sub {
    width: 100vw;
    left: 0;
    position: fixed;
}

.footer-container_phone {

}

.swiper-wrapper {
    flex-direction: row !important;
}

.about-infos, .about-clients {
    background-color: white;
    opacity: 0;
    width: 50%;
    text-align: left;
    overflow: scroll !important;
    padding-top: 10px;padding-bottom: 100px;
   

}


.main-container {
        background-color: white;
        height: calc(100vh - 130px);
}

}

/*------------------------------------------------------- BREAKPOINTS -------------------------------------------------------*/
@media screen and (max-width: 780px) {
html, body {
  overflow-x: hidden;
}
main {
    overflow-x:hidden !important;
    width: 100vw;
    position: absolute;
    left: 0;
    /* bottom: 0; */
    max-width: 100vw !important;
    /* position: fixed;*/

      height: 100vh !important; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100)!important;
}

#footer {
    background-color: white;
    text-align: center;
    position: relative;
    /* margin-bottom: 10px; */
    /* overflow-y: scroll !important; */
    /* margin-top: 5px; */
    /* width: 100vw; */
    overflow: hidden !important;
    /* position: absolute; */
    max-width: 100% !important;
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100)!important;
    display: flex;
    text-align: center;
    flex-direction: column;
    /* justify-content: space-between; */
    /* height: calc(12vh - 10px); */
    bottom: 0;
    /* align-content: end; */
    align-items: flex-end;
    left: 0 !important;
}

.footer2 {
    background-color: white;
    text-align: center;
    position: relative;
    /* margin-bottom: 10px; */
    overflow-y: scroll !important;

    display: flex;
    text-align: center;
    flex-direction: column;
    /* justify-content: space-between; */
    /* height: calc(12vh - 10px); */
    bottom: 0;
    /* align-content: end; */
    align-items: flex-end;
    left: 0 !important;
}

.footer-container_phone2 {
    /* position: absolute; */
    /* bottom: 0 !important; */
    /* height: 100%; */
    width: 100%;
    padding-bottom: 10px;
    /* text-align: center; */
    /* margin-top: auto; */
}

.footer_item {
    cursor: pointer;
    z-index: 15;
    position: absolute;
        display: none;
}
.footer_sub {
    /* width: calc(100vw - 20px); */
    /* left: 0; */
    padding-top: 5px;
    /* padding-left: 10px;
    position: fixed; */
}

.main-container {
    margin-bottom: -8px;
    width: 100vw !important;
    position: relative;
    display: flex;
    text-align: center;
    flex-direction: column;
    bottom: 0;
    /* align-content: end; */
    align-items: center;
    left: 0 !important;
}

.image_phone {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    /* padding-left: 2.5%; */
    /* text-align: center; */
    /* left: 10px; */
    text-align: center;
    /* padding-left: 10px; */
    position: relative;
    bottom: 0;
    /* min-height: calc(88vh - 10px); */
    height: auto;overflow: hidden;
}

.infos-click, .phone, .image, .swiper-slide   {
    display: none !important;
}

.about-clients_phone, .about-infos_phone {
    display: block;
    opacity: 1;
    width: 100%;
    padding-left: 0;
}

.about-clients_phone {
padding-bottom: 10px;
}
#rectangle {
        top: 55% !important;
        -webkit-animation: none;
            position: fixed !important;
}
.footer-container_phone {
position: absolute;
    bottom: 0 !important;
    /* height: 100%; */
    width: 100vw !important;
    margin-bottom: 10px;
    /* text-align: center; */
    /* margin-top: auto;*/
}

.swiper-wrapper {
    flex-direction: column;
}

.swiper-container {
        height: auto;
        width: calc(100vw - 20px) !important;

}

.margin {
        margin-top: 5px;
}

}

/*------------------------------------------------------- TABLETTE -------------------------------------------------------*/

@media screen and (min-width: 781px) and (max-width: 1215px) {


.image {
height: calc(100% - 10px);
    width: auto;
    /* margin-left: 10px; */
    /* position: fixed;*/
}

.image2 {
    display: none !important;
}
}


@media screen and (min-width: 1215px) {

.image {
height: calc(100% - 10px);
    width: auto;
    /* margin-left: 10px; */
    /* position: fixed;*/
}

}