/* PRELOAD */
body {
  overflow: hidden;
}

/* FORM VALIDATION */
.w-form-done {
    display: block;
    padding: 20px;
    text-align: center;
    background-color: #cddc9d;
    margin-top: 20px;
}

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999999;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}


.error {color:red;}
.fixed-btn-footer--text {
  white-space: nowrap;

}

.bg--button:before {
    content: '';
    position: absolute;
    content: url(../images/bottom-button-fixed-before.svg);
    z-index: 9999;
    bottom: -8px;
    left: 0px;
    background: transparent;
    left: 0;
    top: auto;
    height: 78px;
    width: 100px;
    transform: translateX(-90%);
}

.bg--button:after {
    position: absolute;
    content: url(../images/bottom-button-fixed-before.svg);
    z-index: 9999;
    bottom: -8px;
    left: auto;
    /* background: transparent; */
    right: 0;
    top: auto;
    height: 78px;
    width: 100px;
    transform: translateX(90%) scale(-1,1);
}

.price-list--item {
    align-items: flex-start;
}
@media (max-width: 500px) {
.bloc--anim {
    -webkit-transform: translate(-50%, 43px) scale(0.5);
    transform: translate(-50%, 43px) scale(0.5);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
}

@media (min-width: 769px) and (max-width: 1024px) {

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

  .bigfont {font-size: 227px;}
  .white.enbref {padding-bottom: 100px;}
  .hero--content {max-width: 55vw}
  .hero--product {
    position: absolute;
    right: 0px;
    bottom: 32px;
    z-index: 12;
    width: 30vh;
    -webkit-transform: translate(-100%, 0%);
    -ms-transform: translate(-100%, 0%);
    transform: translate(-25%, 0%);
}

.bloc--anim {
    opacity: 1;
    -webkit-transform: translate(-50%, 43px) scale(0.5);
    transform: scale(0.6) translate3d(-12%, -11%, 0px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

}

@media (min-width: 991px) and (max-width: 1252px) {
.hero--content {
    margin-left: calc(-50% + 40px);
}
}

@media (min-width: 1200px) {
  .left-col {margin-left: -25px}
  .right-col {margin-left: 0px}
}

@media (max-width: 1500px) {
.floating-smartbip, .floating-sb-black {display: none}
}

@media (max-width: 991px) {
.bg--button:before {
    bottom: -10px;
}
.bg--button:after {
    bottom: -10px;
}
#modal span {
    right: 20px !important;
    top: 20px !important;
    transform: translate(0,0) !important;
}
}


@media (max-width: 479px) {

  .item {text-align: center;}
  .carousel img {max-height: 50vh}

.partners {
  white-space: nowrap;
}


.bg--button:before {
    content: '';
    position: absolute;
    content: url(../images/bottom-button-fixed-before.svg);
    z-index: 9999;
    bottom: -16px;
    left: 0px;
    background: transparent;
    left: 0;
    top: auto;
    height: 78px;
    width: 89px;
    transform: translateX(-90%);
}
.bg--button:after {
    position: absolute;
    content: url(../images/bottom-button-fixed-before.svg);
    z-index: 9999;
    bottom: -16px;
    left: auto;
    /* background: transparent; */
    right: 0;
    top: auto;
    height: 78px;
    width: 89px;
    transform: translateX(90%) scale(-1,1);
}
}

.tab--item.w--current {
    width: 50%;
    height: 78px;
    padding-right: 10px;
    padding-left: 10px;
    clear: none;
    background-color: #bb5a9e;
    background-image: none;
    background-position: 50% 0px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 0 #bb5a9e;
    color: #fff;
    font-size: 23px;
}

a.tab--item.w-inline-block.w-tab-link.w--current:after {
    position: absolute;
    content: url(../images/small_triangle.svg);
    z-index: 9999;
    bottom: -13px;
    left: 0px;
    background: transparent;
    right: -7px;
    top: auto;
    height: 18px;
}

a.tab--item.w-inline-block.w-tab-link:after {
    position: absolute;
    content: '';
    z-index: 9999;
    bottom: 0;
    left: 0;
    background: #e8c7de;
    right: 0;
    top: auto;
    height: 2px;
    width: 100%;
}




  .blob--video {pointer-events:none}

  .coverimg, .hero-page--bg {object-fit:cover}
  .hero--slides {
    width: 100vw;
    height: 100vh !important;
}
  .hero--slide {
    width: 100vw !important;
    height: 75vh;
}
.hero--img img {
    transform: scale3D(1.05,1.05,1.05);
    transition: All 400ms ease;
}
  .lSSlideWrapper .lSFade > *.active {
    z-index: unset !important;
}
  .active .hero--img img {transform:scale3D(1,1,1); transition :All 400ms ease}
  .hero--title {opacity:0; transform:translateY(-20px); transition :All 400ms ease}
  .hero--paragraph {opacity:0; transform:translateX(-20px); transition :All 400ms ease}
  .active .hero--title, .active .hero--paragraph {opacity:1; transform:translate(0,0)}
  /*.smartbip--anim--device {transform:translateY(-100%); opacity:0; transition : opacity 1000ms ease-in-out, transform 500ms ease-in-out;}*/
  .smartbip--anim--device.showdevice {transform:translateY(0); opacity:1}
  /* Buttom ANIMATION */
@keyframes purpleboxshadow {
    0% { box-shadow: 0 0 0 0px #bb5a9e; }
   50% { box-shadow: 0 0 0 10px #bb5a9e; }
  85% { box-shadow: 0 0 0 7px #bb5a9e; }
    100% { box-shadow: 0 0 0 10px #bb5a9e; }
}
@-webkit-keyframes purpleboxshadow {
    0% { box-shadow: 0 0 0 0px #bb5a9e; }
   50% { box-shadow: 0 0 0 10px #bb5a9e; }
  85% { box-shadow: 0 0 0 7px #bb5a9e; }
    100% { box-shadow: 0 0 0 10px #bb5a9e; }
}
@keyframes whiteboxshadow {
    0% { box-shadow: 0 0 0 10px white; }
    50% { box-shadow: 0 0 0 3px white; }
  	85% { box-shadow: 0 0 0 12px white; }
    100% { box-shadow: 0 0 0 10px white; }
}
@-webkit-keyframes whiteboxshadow {
    0% { box-shadow: 0 0 0 10px white; }
    50% { box-shadow: 0 0 0 3px white; }
  	85% { box-shadow: 0 0 0 12px white; }
    100% { box-shadow: 0 0 0 10px white; }
}
[animate="whiteboxshadow"]:hover {
    -webkit-animation: whiteboxshadow 0.4s ease-in-out ;
    animation: whiteboxshadow 0.4s ease-in-out ;
}
  [animate="purpleboxshadow"]:hover {
    -webkit-animation: purpleboxshadow 0.4s ease-in-out ;
    animation: purpleboxshadow 0.4s ease-in-out ;
}

#map-point path {fill:grey; transition : All 100ms ease-in-out; stroke:transparent; stroke-width: 2; z-index:2; position:relative}
#map-point path:hover {fill:red; stroke:red; stroke-width: 7 ;z-index:9999999; position:absolute}

.hello {fill:yellow;}
.map svg {width:500px; max-width: 100%}
  .w-webflow-badge {display:none !important}
main.main {
    overflow-x: hidden;
}
#vidLinks a {
  transition: .4s;
  margin: 4px;
}
#vidLinks a:hover {
  transform: scale(.95);
}
#modal {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  z-index: 10000;
  height: 100%;
  background: #bb5a9eba;
  display: none;
}
#modal span {
    color: white;
    position: absolute;
    z-index: 20;
    right: 50%;
    top: 50%;
    font-size: 3em;
    cursor: pointer;
    transform: translate(395px,-245px);
}
#vidSizer {
  position: relative;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 700px;
  width: 95%;
}
#vidHolder {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}
#mainVid {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
}
  svg.videoblob {
  width:100%;
}
svg.videoblob path{
  d:path('M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z');
  animation: morph 5s infinite cubic-bezier(0.700, 0, 0.470, 1), rotateblot 15s infinite ease;
  transform-origin:center center
}

.redpoint {
    animation: mappoint 0.5s;
}

#map-point .st0 {
    fill: #666666;
    stroke: transparent;
    stroke-width: 10px;
}


@keyframes mappoint {
  0%{
    fill: #666666;
    stroke: transparent;
        stroke-width: 8px;
        animation-timing-function: ease-in;


  }
  50%{
    fill: #ff0000;
    stroke: #ff0000;
        stroke-width: 8px;
        animation-timing-function: ease-out;
  }
  100%{
    fill: #666666;
    stroke: transparent;
        stroke-width: 8px;
  }
}

@keyframes morph {
  0%, 100%{
    d:path('M137.02,30.76c17.9,0,36,5.54,41.56,11.61s10.21,12.74,11.73,28.31c1.52,15.57,1.82,20.63,4.04,29.73c2.22,9.1,6.94,37.38,4.92,51.67s-13.48,61.62-65.26,61.62S71.71,165.3,73,141.98s6.69-42.88,14.37-61.62S112.25,30.76,137.02,30.76z');
    -webkit-transform: rotateZ(-00deg);
  }
  50%{
    d:path('M137.02,30.76c17.9,0,30.81,8.2,36.37,14.27s21.13,9.24,22.65,24.81c1.52,15.57-7.07,34.05-4.85,43.15c2.22,9.1,10.83,43.42,8.81,57.71s-15.82,35.6-67.6,35.6s-46.05-44.1-44.76-67.42s-11.46-49.75-3.78-68.49S112.25,30.76,137.02,30.76z');
  }
}
@-webkit-keyframes rotateblot {
  0% {
    -webkit-transform: rotate(0deg) scale(1);
  }
50% { 
    -webkit-transform: rotate(30deg) scale(1);
  }  
  0% {
    -webkit-transform: rotate(0deg) scale(1);
  }
}
  .fixme {position:fixed;top:0;width:100%;height:100px; background:white}
.smoothcrollreverse {animation: smoothScrollreverse 300ms ease-in;}
header.header.fixme {position: fixed; animation: smoothScroll 1000ms ease-in-out;}
main.main.fixme2 {padding-top: 100px}
.logo img, .menu--item, .header .logo {transition:all 200ms ease-in-out}
.fix .logo img {height: 80px;width: auto;}
.fix .logo {margin:10px}
.fix .menu--item {color:#bb5a9e}
  .paypal--bloc * {cursor:not-allowed; pointer-events:none}
  .showfield {opacity:1; transform:translate(0,0); pointer-events: auto!important;}
  .showfield * {cursor:auto; pointer-events: auto!important;}
  .plustard--wrapper .date-field, .plustard--wrapper .hoaire, .bgmodal.hide--bgmodal, .modal.hide--modal {pointer-events: none;}
  .modal.hide--modal{display: none;}
  .bgmodal, .modal {pointer-events: auto;}
  .noscroll {overflow:hidden}
  .radio-field label {    cursor: default;}
  .paypal-select {
    height: 53px;
    margin-left: 20px;
    border-radius: 5px;
    color: #666;
    font-size: 23px;
    padding:0 20px;
        width: 275px;
}
.paypal-bloc--content {
    display: flex;
    align-items: center;
      margin-bottom:20px
}
  .paypal--bloc input[type="image"] {
    height: 53px;
    cursor:pointer !important;
        float: right;
}
  .component--modal {display:block !important}
@media (max-width: 479px) {
  .hero--slide {height: 90vh;}
}


.col--feature--content {
    width: 100% !important;
}


.date-field, .hoaire {opacity: 1; transform: none; pointer-events: auto !important}
.modal {max-height: 95%;}