/* stylesheet show and hide header */

#header-container {background-color: var(--color-white);}
.display-flex {display: flex;}
.display-row-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.display-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center!important; 
}
.flex-grow-2 {flex-grow: 2;}
#header-container {
  text-align:center;
	width:100%;
  transition: all 1s ease;
	position:fixed;
	top:0;
  z-index: 100;
}
/* #header-container.hide-announcement {top:-107px;} */ /* à commenter quand plus besoin de la barre d'annonce */
#header-container.hide-header {top:-39px;} /* -39px sans barre d'annonce */ /* -94px avec barre d'annonce */
.logo-matooma {width: 220px!important;}
#top-header * a {transition: .4s all ease;}
#top-header,
#bottom-header {padding: 0!important;}
.background-color-transparent {
  background-color: transparent!important;
}
#header-container.active {
  background-color: var(--color-white)!important;
  background-color: rgba(255, 255, 255)!important;
}
#bottom-header.active {border-bottom: 1px solid #dcdce385;}
/* .wrapper {
	padding:0 15px 15px;
	box-sizing: border-box;
	text-align:left;
	width:700px;
	margin:200px auto 0!important;
} */
/* -- Button */
.cta-get-rates {margin: 12px;}
.cta-get-rates, .cta-mobile {
  white-space: nowrap;
  color: var(--color-white);
  background-color: rgb(200,3,46);
  background: linear-gradient(66deg, rgba(200,3,46,1) 0%, rgba(239,45,86,1) 100%);
  border: none!important;
  border-radius: 7px; /* 50px */
  padding: 12px 20px!important;
  transform: perspective(1px) translateZ(0);
  -webkit-transform: perspective(1px) translateZ(0);
  -moz-transform: perspective(1px) translateZ(0);
  -o-transform: perspective(1px) translateZ(0);
  /* box-shadow: 0px 0px 0px 0px rgba(0,49,62,0.27); */
  box-shadow: 0px 0px 0px rgba(219,24,66,0.12);
  -webkit-box-shadow: 0px 0px 0px rgba(219,24,66,0.12);
  -moz-box-shadow: 0px 0px 0px rgba(219,24,66,0.12);

  transition-duration: 0.25s;
  transition-property: box-shadow, transform;
}
.cta-mobile {display: none;}
.cta-get-rates:hover,
.cta-mobile:hover,
.cta-get-rates:focus,
.cta-mobile:focus {
  border-color: none!important;
  box-shadow: 0px 5px 0px rgba(219,24,66,0.12);
  -webkit-box-shadow: 0px 5px 0px rgba(219,24,66,0.12);
  -moz-box-shadow: 0px 5px 0px rgba(219,24,66,0.12);
  transform: scale(1.01);
  -webkit-transform: scale(1.01);
  -moz-transform: scale(1.01);
  -o-transform: scale(1.01);
}
.cta-get-rates:active,
.cta-mobile:active {
  background-color: rgba(200,3,46,0.5);
  border-color: none!important;
}
.cta-call {
  display: none;
  white-space: nowrap;
  color: var(--color-red-opacity);
  border: 1px solid var(--color-red-opacity);
  border-radius: 7px; /* 50px */
  padding: 12px 20px!important;
  transform: perspective(1px) translateZ(0);
  -webkit-transform: perspective(1px) translateZ(0);
  -moz-transform: perspective(1px) translateZ(0);
  -o-transform: perspective(1px) translateZ(0);
  box-shadow: 0px 0px 0px rgba(219,24,66,0.12);
  -webkit-box-shadow: 0px 0px 0px rgba(219,24,66,0.12);
  -moz-box-shadow: 0px 0px 0px rgba(219,24,66,0.12);
  transition-duration: 0.25s;
  transition-property: box-shadow, transform;
}
.cta-call:hover,
.cta-call:focus {
  border: 1px solid var(--color-red);
  box-shadow: 0px 5px 0px rgba(219,24,66,0.12);
  -webkit-box-shadow: 0px 5px 0px rgba(219,24,66,0.12);
  -moz-box-shadow: 0px 5px 0px rgba(219,24,66,0.12);
  transform: scale(1.01);
  -webkit-transform: scale(1.01);
  -moz-transform: scale(1.01);
  -o-transform: scale(1.01);
}
.cta-call:active {
  border: 1px solid var(--color-red);
}
/* -- Menu burger */
.nav-links > li:nth-child(5) > div {position: relative;}
.language-switcher-mobile {display: none;}
#menu-btn {
  width: 25px;
  height: 20px;
  position: relative;
  display: none;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#menu-btn span {
  height: 3px;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  background: var(--color-blue-dark);
  border-radius: 9px;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#menu-btn span:nth-child(1) {top: 0px;}
#menu-btn span:nth-child(2),#menu-btn span:nth-child(3) {top: 8px;}
#menu-btn span:nth-child(4) {top: 16px;}
#menu-btn.open span:nth-child(1) {
  width: 0%;
  top: 18px;
  left: 50%;
}
#menu-btn.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #8e9fb3;
}
#menu-btn.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #8e9fb3;
}
#menu-btn.open span:nth-child(4) {
  width: 0%;
  top: 18px;
  left: 50%;
}
.tel:hover,
div.hs_cos_wrapper:nth-child(3) > a:nth-child(1):hover {color: var(--color-blue-dark);}

/* */
/* After after Tablet styles */
@media (max-width: 1300px) and (min-width: 1200px) {
  .logo-matooma {width: 180px;}
  #top-header {height: 40px;}
  #container-bottom-header {top: 45px;}
  #top-header > div {padding: 0 .5em;}
  #bottom-header {padding: .5em .5em;}
  .help-padding {padding: .5em;}
  /*.language-switcher-mobile {display: flex;} */
}

/* After Tablet styles */
@media (max-width: 1200px) and (min-width: 990px) {
  /* #header-container.hide-header,
  #header-container.hide-announcement {top: 0;} */ /* à commenter quand plus besoin de la barre d'annonce */
  .logo-matooma {width: 180px;}
  /* #top-header > div {padding: 0 .5rem;} */
  #bottom-header {padding: .5rem .5rem;}
  #top-header {height: 40px;}
  #container-bottom-header {top: 45px;}
  .help-padding {padding: .5em;}
  .cta-get-rates {margin: 7px;}
}

@media (max-width: 1024px) and (min-width: 990px) {
  #header-container.hide-header /*,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  .logo-matooma {width: 180px;}
  #top-header, #bottom-header {padding: .5em .5em;}
  .help-padding {padding: .5em;}
  .cta-get-rates {
    margin: 0 7.2px!important;
    padding: 10px 15px!important;
  }
}

/* Tablet styles */
@media (max-width: 990px) and (min-width: 767px) {
  #header-container.hide-header /*,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  .logo-matooma {width: 200px!important;}
  #top-header {display: none;}
  #top-header {padding: .4em .5em!important;}
  #bottom-header {padding: 0!important;}
  .help-padding {padding: 0;}
  #container-bottom-header {
    position: relative;
    z-index: 1000;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    width: 100%;
    transform: inherit!important;
    top: 0;
  }
  #bottom-header {
    width: 100%;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    transition: background-color 0.15s linear;
    -webkit-transition: -webkit-background-color 0.15s linear;
  }
  #bottom-header > div:nth-child(1) {
    flex-grow: 1;
    justify-content: flex-start;
  }
  #bottom-header.active {
    border-bottom: 1px solid #dcdce385;
    background-color: var(--color-white)!important;
  }
  #menu-btn {
    display: flex;
    cursor: pointer;
    transition: all 0.7s ease;
    -webkit-transition: -webkit-all 0.7s ease;
    margin-right: 1.5rem!important;
  }
  #nav-container {justify-content: flex-end;}
  #nav-container #menu-item {
    width: 90%;
    display: none;
    position: absolute;
    top: 85%;
    z-index: 10;
  }
  #nav-container.open #menu-item {
    display: block;
    height: 89vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: baseline;
    background-color: var(--color-white);
    padding: 3em;
    border-radius: 21px 21px 21px 21px;
    -webkit-border-radius: 21px 21px 21px 21px;
    -moz-border-radius: 21px 21px 21px 21px;
    border: 1px solid rgba(0,48,61,0.07);
    box-shadow: 20px 23px 0px -1px rgba(0,46,59,0.04);
    -webkit-box-shadow: 20px 23px 0px -1px rgba(0,46,59,0.04); 
    -moz-box-shadow: 20px 23px 0px -1px rgba(0,46,59,0.04);
    z-index: 5;
  }
  .nav-links > li:nth-child(1) {
    order: 1;
    padding: .8em .8em .8em 0;
  }
  .nav-links li:nth-child(4),
  .nav-links li:nth-child(5),
  .nav-links li:nth-child(5) > div,
  .nav-links li:nth-child(6) {width: 100%;}
  .nav-links li:nth-child(2) {
    order: 6;
    flex-grow: inherit;
  }
  .nav-links li:nth-child(4) {order: 2;}
  .nav-links li:nth-child(5) {order: 4;}
  .nav-links > li:nth-child(6) {
    order: 3;
    margin: 1em 0;
  }
  .nav-links > li:nth-child(3) {order: 5;}
  .nav-links > li:nth-child(3) > div {position: initial;}
  #menu-item {
    width: 100%;
    display: flex;
  }
  .cta-get-rates, .cta-mobile {padding: 12px 15px!important;}
  .cta-get-rates {display: none;}
  .cta-mobile {
    width: 100%;
    display: block;
    margin: .5em 0 1em 0;
    padding: 15px 20px!important;
  }
  .cta-call, .login, .help {display: block;}
  .login img {display: inline-flex;}
  .language-switcher-mobile {display: flex;}
}

/* Mobile tiny styles */
@media (max-width: 300px) {
  #header-container.hide-header /*,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  .logo-matooma {max-width: 100%!important;}
  #menu-btn {
    height: 14px!important;
    width: 20px!important;
    margin: 0 1rem 0 0!important;
  }
  #menu-btn span:nth-child(2), #menu-btn span:nth-child(3) {top: 6px!important;}
  #menu-btn span:nth-child(4) {top: 12px!important;}
  .nav-lang {flex-direction: column;}
  .drop-down-lang {flex-direction: column;}
  .container-options-lang > ul {flex-direction: column!important;}
  .cta-call {margin: .5em 1em .5em .5em;}
  .language-switcher-mobile {display: flex;}
}
@media (max-width: 560px) {
  #header-container.hide-header /*,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  .logo-matooma {width: 100%!important; min-width: 100%!important;}
  #top-header, #bottom-header {padding: 0!important;}
  .cta-call {padding: 8px 10px!important;}
  .label-lang > a {padding: .5em!important;}
  .option-lang > a {padding: .5em!important;}
  .language-switcher-mobile {display: flex;}
}
/* Mobile styles */
@media (max-width: 767px) {
  #header-container.hide-header /*,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  .logo-matooma {
    max-width: 180px;
    min-width: 90px!important;
    margin-left: 0;
  }
  #top-header {display: none;}
  .help-padding {padding: 0;}
  #container-bottom-header {
    position: relative;
    z-index: 1000;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    width: 100%;
    transform: inherit!important;
    top: 0;
  }
  #bottom-header {
    width: 100%;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
    z-index: 5;
    transition: background-color 0.15s linear;
    -webkit-transition: -webkit-background-color 0.15s linear;
  }
  #bottom-header > div:nth-child(1) {
    flex-grow: 1;
    justify-content: flex-start;
  }
  #bottom-header.active {
    border-bottom: 1px solid #dcdce385;
    background-color: var(--color-white)!important;
  }
  #menu-btn {
    height: 20px;
    width: 25px;
    display: flex;
    cursor: pointer;
    transition: all 0.7s ease;
    -webkit-transition: -webkit-all 0.7s ease;
    margin: .7rem 1.7rem .7rem .7rem;
  }
  #menu-btn span {height: 2px;}
  #menu-btn span:nth-child(2), #menu-btn span:nth-child(3) {top: 8px;}
  #menu-btn span:nth-child(4) {top: 16px;}
  #nav-container {justify-content: flex-end;}
  #nav-container #menu-item{
    width: 100%;
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 10;
    height: 89vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  #nav-container.open #menu-item {display: block;}
  #nav-container.open #bottom-header {background-color: var(--color-white);}
  .nav-links {
    width: auto;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: baseline;
    background-color: var(--color-white);
    padding: .5em;
    z-index: 5;
    border-radius: 40%/2%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .nav-links > li:nth-child(1) {
    order: 1;
    padding: .8em .8em .8em 0;
  }
  .nav-links li:nth-child(4),
  .nav-links li:nth-child(5),
  .nav-links li:nth-child(5) > div,
  .nav-links li:nth-child(6) {width: 100%;}
  .nav-links li:nth-child(2) {
    order: 6;
    flex-grow: inherit;
  }
  .nav-links li:nth-child(4) {order: 2;}
  .nav-links li:nth-child(5) {order: 4;}
  .nav-links > li:nth-child(6) {
    order: 3;
    margin: 1em 0;
  }
  .nav-links > li:nth-child(3) {order: 5;}
  .nav-links > li:nth-child(3) > div {position: initial;}
  #menu-item {
    width: 100%;
    display: flex;
  }
  .cta-main-red-variant-starterkit,
  .cta-get-rates {display: none;} /* ajout cta-main-red-variant */
  .cta-mobile {
    width: 100%;
    display: block;
    font-size: 16px;
    margin: .5em 0 1em 0;
    padding: 15px 20px!important;
  }
  .cta-get-rates {padding: 12px 15px;}
  .cta-call {padding: 9px 14px!important;}
  .cta-call, .login, .help {display: block;}
  .login img {display: inline-flex;}
  .language-switcher-mobile {display: flex;}
}
/* essaie tablette ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape) {
  /* #header-container.hide-header,
  #header-container.hide-announcement {top: 0;} */ /* à commenter quand plus besoin de la barre d'annonce */
  #top-header {display: none;}
  #top-header {padding: .4em .5em!important;}
  #bottom-header {padding: 0!important;}
  .help-padding {padding: 0;}
  #bottom-header {background-color: var(--color-white);}
  #container-bottom-header {
    position: relative;
    z-index: 1000;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    width: 100%;
    transform: inherit!important;
    top: 0;
  }
  #bottom-header {
    width: 100%;
    justify-content: space-between;
    align-items: cen
    z-index: 5;
    transition: background-color 0.15s linear;
    -webkit-transition: -webkit-background-color 0.15s linear;
  }
  #bottom-header > div:nth-child(1) {
    flex-grow: 1;
    justify-content: flex-start;
  }
  #bottom-header.active {
    border-bottom: 1px solid #dcdce385;
    background-color: var(--color-white)!important;
  }
  #menu-btn {
    display: flex;
    cursor: pointer;
    transition: all 0.7s ease;
    -webkit-transition: -webkit-all 0.7s ease;
    margin-right: 1.5rem!important;
  }
  #nav-container {justify-content: flex-end;}
  #nav-container #menu-item {
    width: 90%;
    display: none;
    position: absolute;
    top: 85%;
    z-index: 10;
  }
  #nav-container.open #menu-item {
    display: block;
    height: 89vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: baseline;
    background-color: var(--color-white);
    padding: 3em;
    border-radius: 21px 21px 21px 21px;
    -webkit-border-radius: 21px 21px 21px 21px;
    -moz-border-radius: 21px 21px 21px 21px;
    border: 1px solid rgba(0,48,61,0.07);
    box-shadow: 20px 23px 0px -1px rgba(0,46,59,0.04);
    -webkit-box-shadow: 20px 23px 0px -1px rgba(0,46,59,0.04); 
    -moz-box-shadow: 20px 23px 0px -1px rgba(0,46,59,0.04);
    z-index: 5;
  }
  .nav-links > li:nth-child(1) {
    order: 1;
    padding: .8em .8em .8em 0;
  }
  .nav-links li:nth-child(4),
  .nav-links li:nth-child(5),
  .nav-links li:nth-child(5) > div,
  .nav-links li:nth-child(6) {width: 100%;}
  .nav-links li:nth-child(2) {
    order: 6;
    flex-grow: inherit;
  }
  .nav-links li:nth-child(4) {order: 2;}
  .nav-links li:nth-child(5) {order: 4;}
  .nav-links > li:nth-child(6) {
    order: 3;
    margin: 1em 0;
  }
  .nav-links > li:nth-child(3) {order: 5;}
  .nav-links > li:nth-child(3) > div {position: initial;}
  #menu-item {
    width: 100%;
    display: flex;
  }
  .cta-get-rates, .cta-mobile {padding: 12px 15px!important;}
  .cta-main-red-variant, .cta-get-rates {display: none;} /* ajout cta-main-red-variant */
  .cta-mobile {
    width: 100%;
    display: block;
    margin: .5em 0 1em 0;
    padding: 15px 20px!important;
  }
  .cta-call, .login, .help {display: block;}
  .login img {display: inline-flex;}
  .language-switcher-mobile {display: flex;}
}

@media (max-width: 990px) and (min-width: 767px) and (orientation: landscape) {
  #header-container.hide-header /*,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  #nav-container #menu-item {
    height: 95vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  #header-container.hide-header /* ,
  #header-container.hide-announcement */ {top: 0;} /* à commenter quand plus besoin de la barre d'annonce */
  #nav-container #menu-item {
    height: 75vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    border-radius: 40%/2%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}