/* ============================ */
/* MKTV TOOLBOX STYLE */
/* ============================ */

/* ============= */
/* PREREQUESITES */
/* ============= */


html { font-size: 62.5% };

/*
COS WEBSITE
*/

/* ========= */
/* GUIDELINES */
/* ========= */
/*

vw :  BIG ELEMENTS / SECTIONS / IMAGES
rem : FONTS / MARGINS / PADDING
px :  SMALL ELEMENTS / BURGER MENU / BEFORE / AFTER

*/

/* =================================== */

/*

INDEX
1. RESET
2. HUBL VARIABLES
3. GENERAL STYLE
4. UTILITY CLASSES TO USE IN THE TEMPLATE BUILDER
5. CTA STYLE
6. GETTING THE HANDLE ON THE DISPLAY OF THE MENU IN THE HEADER
7. WRAPPER DECLARATION
8. HEADER
9. LP HEADER
10. FOOTER STYLE
11. LANGUAGE SWITCHER STYLE
12. BLOG LANGUAGE SWITCHER
13. MOBILE BURGER STYLE
14. FORM
15. RESPONSIVE

*/

/* ======== 

1. RESET 
Never add CSS before this part, this is the reset of the browser.

/* ======== */

div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, centerdl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote,q{quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}body .row-fluid [class*="span"] {min-height: 0;}

/* ============== 

2. HUBL VARIABLES 
This is the most important part of the system. All font sizes, weights, line heights, colors and background must be added in the variables below (if not enough, please copy and rename your new variable). The more you respect the system, the less you have to customize it.

each variable will be written this way :

name of the variable = CSS Value 

then, in the CSS part after the variables :

body{

}

============== */

/* 
FONTS
*/







/* FONT SIZE (rem) - DESKTOP */




 /* 18px EQUIVALENT -> FOR EXAMPLE BUT PUT YOUR OWN FONT SIZE RELATIVE TO YOU PROJECT */ 




/* FONT SIZE (rem) - TABLET */









/* FONT SIZE (rem) - MOBILE */









/* LINE HEIGHTS (rem) - DESKTOP */









/* LINE HEIGHTS (rem) - TABLETS */









/* LINE HEIGHTS (rem) - SMARTPHONES */









/* FONT WEIGHTS */





/* FONT ALIGNMENTS */





/* BACKGROUND COLORS */






/* FONT COLORS */







/* WRAPPER SIZES */




/* ASSIGNMENT TO CLASSES - TEXT ALIGNMENT */
.text-align-center{
   text-align: center; 
}
.text-align-left{
   text-align: left; 
}
.text-align-right{
   text-align: right; 
}
.text-align-justify{
   text-align: justify; 
}

/* ASSIGNMENT TO CLASSES - FONT WEIGHT */
.font-weight-light{ 
  font-weight:300;
}
.font-weight-regular{
  font-weight:400;
}
.font-weight-semibold{
  font-weight:600;
}
.font-weight-bold{
  font-weight:700;
}

/* ASSIGNMENT TO CLASSES - BACKGROUND COLOR */
.primary-bg {
  background: #FFA900; 
}

.secondary-bg {
  background: #E23067; 
}

.tertiary-bg {
  background: #242527; 
}

.white-bg {
  background: #ffffff; 
}

.black-bg {
  background: #000000;
}

/* ASSIGNMENT TO CLASSES - FONT COLOR */
.primary-color{
  color: #525F66;
}

.secondary-color{
  color: #2E3133;
}

.tertiary-color{
  color: #E23067;
}

.quaternary-color{
  color: #242527;
}

.white-color{
  color: #ffffff;
}

.black-color{
  color: #000000;
}

/* ASSIGNMENT TO CLASSES - BACKGROUND COLOR - WHITE FONTS */

.primary-bg h1,
.primary-bg h2,
.primary-bg h3,
.primary-bg h4, 
.primary-bg p, 
.primary-bg ul li, 
.secondary-bg h1,
.secondary-bg h2,
.secondary-bg h3,
.secondary-bg h4,
.secondary-bg p,
.secondary-bg ul li,
.black-bg h1,
.black-bg h2,
.black-bg h3,
.black-bg h4,
.black-bg p,
.black-bg ul li {
  color: #ffffff;
}

/* ================
3. GENERAL STYLE
All the basic CSS rules of the project should stand here.

/* ================ */

*{
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  outline: 0;
}

html{
  font-size: 62.5%; /* 1rem = 10px */ 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}

body{
  font-size: 1.6rem;
  font-weight:400;
  line-height: 3.5rem;
  font-family: proxima-nova, Helvetica, Arial, sans-serif;
  color: #000000;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.open{
  overflow-y: hidden;
}

h1, .title_mobile {
  font-size: 3rem;
  font-weight:300;
  line-height: 5rem;
  color: #E23067;
}


h2{
  font-size: 2.5rem;
  line-height: 4.2rem;
  color: #525F66;
  font-weight:300;
}

h3{
  font-size: 2rem;
  line-height: 2.4rem;
}

h4{
  font-size: 2.4rem;
  line-height: 3.4rem;
}

p{
  font-size: 1.6rem;
  font-weight:300;
  line-height: 3.5rem;
  color: #525F66;
}

ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

ul li {
  position: relative;
  font-weight:300;
  color: #525F66;
}

a, button{
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

/* BECAUSE IMAGES ARE PUT IN SPAN WITH NO HEIGHT IN HUBSPOT */
span.hs_cos_wrapper_type_linked_image{
  display: block; 
}

a{
  display: inline-block;
  line-height: 1;
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

img{
  max-width: 100%;
  height: auto;
}

b, strong {
  font-weight:700;
}

/* ================================================= */
/* 4. UTILITY CLASSES TO USE IN THE TEMPLATE BUILDER */
/* ================================================= */

.text-transform-lowercase{
  text-transform: lowercase;
}

.text-transform-capitalize{
  text-transform: capitalize;
}

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

/* FOR IMAGES & IMAGE CONTAINERS */
.no-line-height{
  line-height: 0;
}

/* DISPLAYS */
.container-fluid .row-fluid .d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container-fluid .row-fluid .flex-row {
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row;
  flex-flow:row;
}

.container-fluid .row-fluid .flex-row-wrap {
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-flow:row wrap;
  flex-flow:row wrap;
}

.container-fluid .row-fluid .flex-column {
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-flow:column;
  flex-flow:column;
}

.container-fluid .row-fluid .flex-column-wrap {
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-flow:column wrap;
  flex-flow:column wrap;
}

.container-fluid .row-fluid .align-items-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.container-fluid .row-fluid .align-items-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.container-fluid .row-fluid .align-items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.container-fluid .row-fluid .justify-content-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.container-fluid .row-fluid .justify-content-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.container-fluid .row-fluid .justify-content-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.container-fluid .row-fluid .justify-content-space-between {
  -webkit-box-pack: center;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}

.overflow-hidden{
  overflow:hidden;
}

.overflow-visible{
  overflow: visible;
}

/* PADDINGDS & MARGINS 
If you have to use more than the 10 value, you're code is wrong. ;)
*/

/* PADDINGS */
/* PADDING TOP */
.pt-1{padding-top:1rem;}
.pt-2{padding-top:2rem;}
.pt-3{padding-top:3rem;}
.pt-4{padding-top:4rem;}
.pt-5{padding-top:5rem;}
.pt-6{padding-top:6rem;}
.pt-7{padding-top:7rem;}
.pt-8{padding-top:8rem;}
.pt-9{padding-top:9rem;}
.pt-10{padding-top:10rem;}

/* PADDING BOTTOM */
.pb-1{padding-bottom:1rem;}
.pb-2{padding-bottom:2rem;}
.pb-3{padding-bottom:3rem;}
.pb-4{padding-bottom:4rem;}
.pb-5{padding-bottom:5rem;}
.pb-6{padding-bottom:6rem;}
.pb-7{padding-bottom:7rem;}
.pb-8{padding-bottom:8rem;}
.pb-9{padding-bottom:9rem;}
.pb-10{padding-bottom:10rem;}

/* PADDING LEFT */
.pl-1{padding-left:1rem;}
.pl-2{padding-left:2rem;}
.pl-3{padding-left:3rem;}
.pl-4{padding-left:4rem;}
.pl-5{padding-left:5rem;}
.pl-6{padding-left:6rem;}
.pl-7{padding-left:7rem;}
.pl-8{padding-left:8rem;}
.pl-9{padding-left:9rem;}
.pl-10{padding-left:10rem;}

/* PADDING RIGHT */
.pr-1{padding-right:1rem;}
.pr-2{padding-right:2rem;}
.pr-3{padding-right:3rem;}
.pr-4{padding-right:4rem;}
.pr-5{padding-right:5rem;}
.pr-6{padding-right:6rem;}
.pr-7{padding-right:7rem;}
.pr-8{padding-right:8rem;}
.pr-9{padding-right:9rem;}
.pr-10{padding-right:10rem;}

/* MARGINS */

/* MARGIN TOP */
.mt-0{margin-top:0;}
.mt-05{margin-top:.5rem;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}
.mt-5{margin-top:5rem;}
.mt-6{margin-top:6rem;}
.mt-7{margin-top:7rem;}
.mt-8{margin-top:8rem;}
.mt-9{margin-top:9rem;}
.mt-10{margin-top:10rem;}

/* MARGIN BOTTOM */
.mb-0{margin-bottom:0;}
.mb-05{margin-bottom:.5rem;}
.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}
.mb-5{margin-bottom:5rem;}
.mb-6{margin-bottom:6rem;}
.mb-7{margin-bottom:7rem;}
.mb-8{margin-bottom:8rem;}
.mb-9{margin-bottom:9rem;}
.mb-10{margin-bottom:10rem;}

/* MARGIN LEFT */
.ml-05{margin-left:.5rem;}
.ml-1{margin-left:1rem;}
.ml-2{margin-left:2rem;}
.ml-3{margin-left:3rem;}
.ml-4{margin-left:4rem;}
.ml-5{margin-left:5rem;}
.ml-6{margin-left:6rem;}
.ml-7{margin-left:7rem;}
.ml-8{margin-left:8rem;}
.ml-9{margin-left:9rem;}
.ml-10{margin-left:10rem;}

/* MARGIN RIGHT */
.mr-05{margin-left:.5rem;}
.mr-1{margin-right:1rem;}
.mr-2{margin-right:2rem;}
.mr-3{margin-right:3rem;}
.mr-4{margin-right:4rem;}
.mr-5{margin-right:5rem;}
.mr-6{margin-right:6rem;}
.mr-7{margin-right:7rem;}
.mr-8{margin-right:8rem;}
.mr-9{margin-right:9rem;}
.mr-10{margin-right:10rem;}

/* ============ */
/* 5. CTA STYLE */
/* ============ */
/* USE CTA IN SIMPLE PLAIN TEXT & MAKE HERE THE STYLE */

.cta_button,
.input[type='submit'],
.hs-button.primary.large{
  line-height: 3.5rem;
  font-size: 1.6rem;
  background: #FFA900; 
  border-radius:60px;
  font-weight:600;
  color: #ffffff;
  padding: .3rem 1.8rem;
  -webkit-transition: -webkit-box-shadow .3s ease-in-out !important;
  transition: -webkit-box-shadow .3s ease-in-out !important;
  -o-transition: box-shadow .3s ease-in-out !important;
  transition: box-shadow .3s ease-in-out !important;
  transition: box-shadow .3s ease-in-out,
    -webkit-box-shadow .3s ease-in-out !important;
  text-transform: uppercase;
  white-space:nowrap;
  
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.cta_button:hover, .cta_button:focus,
.input[type='submit']:hover, .input[type='submit']:focus,
.hs-button.primary.large:hover, .hs-button.primary.large:focus{
  background: #FFA900; 
}

.secondary-cta_button,
.secondary-cta_button .input[type='submit'],
.secondary-cta_button .hs-button.primary.large{
  background: #ffffff; 
  color: #E23067;
  border:1px solid #E23067;
}

.secondary-cta_button:hover, .secondary-cta_button:focus,
.secondary-cta_button .input[type='submit']:hover, .secondary-cta_button .input[type='submit']:focus,
.secondary-cta_button .hs-button.primary.large:hover, .secondary-cta_button .hs-button.primary.large:focus{
  color: #ffffff;
  background: #E23067; 
}

.tertiary-cta_button,
.tertiary-cta_button .input[type='submit'],
.tertiary-cta_button .hs-button.primary.large{
  background: #ffffff; 
  color: #242527;
  font-size: 1.6rem;
  border:1px solid #242527;
}

.tertiary-cta_button:hover, .tertiary-cta_button:focus,
.tertiary-cta_button .input[type='submit']:hover, .tertiary-cta_button .input[type='submit']:focus,
.tertiary-cta_button .hs-button.primary.large:hover, .tertiary-cta_button .hs-button.primary.large:focus{
  color: #ffffff;
  background: #242527; 
}

.quaternary-cta_button,
.quaternary-cta_button .input[type='submit'],
.quaternary-cta_button .hs-button.primary.large{
  color: #ffffff;
  font-size: 1.6rem;
  background-color:transparent;
  border:1px solid #ffffff;
}

.quaternary-cta_button:hover, .quaternary-cta_button:focus,
.quaternary-cta_button .input[type='submit']:hover, .quaternary-cta_button .input[type='submit']:focus,
.quaternary-cta_button .hs-button.primary.large:hover, .quaternary-cta_button .hs-button.primary.large:focus{
  background: #ffffff; 
  color:#FFA900;
}
.cta_image .cta_button,
.cta_image .input[type='submit'],
.cta_image .hs-button.primary.large{
  background-color:transparent;
  border:none;
}

.cta_image .cta_button:hover, .cta_image .cta_button:focus,
.cta_image .input[type='submit']:hover, .cta_image .input[type='submit']:focus,
.cta_image .hs-button.primary.large:hover, .cta_image .hs-button.primary.large:focus{
  background-color:transparent;
  border:none;
}

/* ============================================================== */
/* 6. GETTING THE HANDLE ON THE DISPLAY OF THE MENU IN THE HEADER */
/* ============================================================== */
.header-container-wrapper .row-fluid:before, 
.header-container-wrapper .row-fluid:after{
  display: none;
}

/* ====================== */
/* 7. WRAPPER DECLARATION */
/* ====================== */
/* WITH THIS DECLARATION NO !important NEEDED */
.container-fluid .row-fluid .wrapper{
  margin: 0 auto;
  float: none;
  padding-left:8rem;
  padding-right:8rem;
  max-width: 1609px;
}

/* ========= */
/* 8. HEADER */
/* ========= */

#header {
  box-shadow: 0 1px 2px rgba(82,95,102,.08);
  padding: 0 4vw 0 4vw;
  position: fixed;
  width: 100%;
  background: #ffffff;
  z-index: 2;
}
#header .top-menu .hs-menu-wrapper > ul,
#header .main-menu .hs-menu-wrapper > ul{
  display:flex;
}
#header .main-menu .hs-menu-wrapper > ul > li.active:not(.hs-item-has-children)::before{
  content:'';
  position:absolute;
  left:calc(50% - 4.5px);
  bottom:-6px;
  background:#FFA900;
  width:9px;
  height:9px;
  border-radius:50%;
  transform:scale(1);
  transform-origin:center;
  transition:transform 300ms ease-in-out;
}
#header .main-menu .hs-menu-wrapper > ul > li:not(.hs-item-has-children)::before{
  content:'';
  position:absolute;
  left:calc(50% - 4.5px);
  bottom:-6px;
  background:#FFA900;
  width:9px;
  height:9px;
  border-radius:50%;
  transform:scale(0);
  transform-origin:center;
  transition:transform 300ms ease-in-out;
}
#header .main-menu .hs-menu-wrapper > ul > li:not(.hs-item-has-children):hover::before,
#header .main-menu .hs-menu-wrapper > ul > li:not(.hs-item-has-children):focus::before,
#header .main-menu .hs-menu-wrapper > ul > li:not(.hs-item-has-children):active::before{
  transform:scale(1);
}
#header .top-menu .hs-menu-wrapper > ul{
  justify-content:flex-end;
}
#header .top-menu ul > li > a,
#header .main-menu ul > li > a,
#header-mobile .top-menu ul > li > a,
#header-mobile .main-menu ul > li > a{
  position:relative;
  font-weight:300;
  color: #2E3133;
  font-size: 1.2rem;
  white-space:nowrap;
}
#header .top-menu ul > li > a,
#header .main-menu ul > li > a{
  padding-right: 1vw;
  padding-left: 1vw;
}
#header-mobile .top-menu ul > li > a,
#header-mobile .main-menu ul > li > a{
  padding-right: 15px;
  padding-left: 15px;
  margin-bottom:2rem;
}
#header .top-menu ul > li > a:hover,
#header .main-menu ul > li > a:hover,
#header-mobile .top-menu ul > li > a:hover,
#header-mobile .main-menu ul > li > a:hover,
#header .top-menu ul > li > a:focus,
#header .main-menu ul > li > a:focus,
#header-mobile .top-menu ul > li > a:focus,
#header-mobile .main-menu ul > li > a:focus,
#header .top-menu ul > li > a:active,
#header .main-menu ul > li > a:active,
#header-mobile .top-menu ul > li > a:active,
#header-mobile .main-menu ul > li > a:active{
  color:#E23067
}
#header .top-menu ul > li.active > a,
#header .main-menu ul > li.active > a{
  color:#E23067
}
#header .top-menu .hs-menu-children-wrapper,
#header .main-menu .hs-menu-children-wrapper{
  position:absolute;
  top:35px;
  left:0;
  background:#ffffff;
  padding:0 2rem;
  box-shadow: 0 3px 20px rgba(153,0,77,.08);
  opacity:0;
  visibility:hidden;
  min-width: 130px;
  z-index:2;
}
#header-mobile .top-menu .hs-menu-children-wrapper,
#header-mobile .main-menu .hs-menu-children-wrapper{
  display:none;
}
#header .top-menu li.hs-item-has-children:hover .hs-menu-children-wrapper,
#header .main-menu li.hs-item-has-children:hover .hs-menu-children-wrapper{
  opacity:1;
  visibility:visible;
}
#header .top-menu li.hs-item-has-children > a::after,
#header .main-menu li.hs-item-has-children > a::after,
#header-mobile .top-menu li.hs-item-has-children > a::after,
#header-mobile .main-menu li.hs-item-has-children > a::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:6px;
  height:6px;
  border-right:#525F66 1px solid;
  border-bottom:#525F66 1px solid;
  transform:rotate(45deg);
  transform-origin: 4px 6px;
  transition:transform 300ms ease-in-out;
}
#header .top-menu li.hs-item-has-children:hover > a::after,
#header .main-menu li.hs-item-has-children:hover > a::after{
  transform:rotate(-135deg);
  border-right-color:#E23067;
  border-bottom-color:#E23067;
}
#header .main-menu .hs-menu-wrapper > ul > li:not(:last-child),
#header .top-menu .hs-menu-wrapper > ul > li:not(:last-child){
  margin-right:1vw;
}
#header .cta-button-first,
#header .cta-button-second {
  margin-left:1vw;
}
#header-mobile {
  display:none;
}
#header-mobile > div {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(82,95,102,.08);
  position: fixed;
  z-index: 999;
  width: 100%;
}
#header-mobile .burger{
  position:relative;
  display:inline-block;
  padding-top:30px;
  width: 55px;
  text-align: right;
  cursor:pointer;
}
#header-mobile .cta-button-second{
  margin-right:2vw;
  margin-left:4vw;
}
#header-mobile .burger p{
  font-size:1.4rem;
}
#header-mobile .burger p::before{
  content:'';
  position:absolute;
  background:#707070;
  height:1px;
  width:40px;
  top:16px;
  right:0;
  transition:300ms all ease-in-out;
}
#header-mobile .burger p::after{
  content:'';
  position:absolute;
  background:#707070;
  height:1px;
  width:27px;
  top:26px;
  right:0;
  transition:300ms all ease-in-out;
}
#header-mobile .burger p.open::before{
  height:1px;
  width:40px;
  top:15px;
  transform: rotate(-45deg)translate(-4px,-4px);
}
#header-mobile .burger p.open::after{
  height:1px;
  width:40px;
  top:15px;
  transform: rotate(45deg)translate(-4px,4px);
}
#header-mobile .header-mobile-menu {
  background: #ffffff;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  right: -100%;
  padding-top:12rem;
  transition: 300ms right ease-in-out;
}
#header-mobile .header-mobile-menu.open{
  right:0;
  overflow-y: scroll;
}
/*********************************/
/* Language Switcher */
#header .top-menu .globe_class,
#header-mobile .top-menu .globe_class{
	background-image:none !important;
  width:100% !important;
  height:auto !important;
}
#header .top-menu p.lang_switcher_active{
  margin:0;
  font-size:1.2rem;
  padding-right: 1vw;
  padding-left: 1vw;
  text-transform:uppercase;
  cursor:pointer;
}
#header-mobile .top-menu p.lang_switcher_active{
  margin:0 0 1rem 0;
  font-size:1.2rem;
  padding-right: 15px;
  padding-left: 15px;
  text-transform:uppercase;
  cursor:pointer;
}
#header .top-menu .globe_class ul{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  background:#fff;
  box-shadow: 0 3px 20px rgba(153,0,77,.08);
  opacity:0;
  visibility:hidden;
}
#header-mobile .top-menu .globe_class ul{
  overflow: hidden;
  max-height: 0;
  transition:max-height 400ms ease-in-out;
}
#header-mobile .top-menu .globe_class ul.menu-mobile-open{
  max-height: 100px;
}
#header .top-menu .lang_switcher_class:hover .globe_class ul{
  opacity:1;
  visibility:visible;
}
#header .top-menu .lang_switcher_class .globe_class ul > li:first-of-type,
#header-mobile .top-menu .lang_switcher_class .globe_class ul > li:first-of-type{
  display:none;
}
#header .top-menu .globe_class ul >li > a{
  text-transform:uppercase;
}
#header .top-menu .lang_switcher_active::after{
  content:'';
  position:absolute;
  top:50%;
  right:0;
  width:6px;
  height:6px;
  border-right:#525F66 1px solid;
  border-bottom:#525F66 1px solid;
  transform:rotate(45deg)translateY(-50%);
  transform-origin: 4px 3px;
  transition:transform 300ms ease-in-out;
}
#header .top-menu .lang_switcher_class:hover .lang_switcher_active::after{
  transform:rotate(-135deg);
  border-right-color:#E23067;
  border-bottom-color:#E23067;
}

#header-mobile .top-menu .lang_switcher_class::after{
  content:'';
  position:absolute;
  top:10px;
  right:0;
  width:6px;
  height:6px;
  border-right:#525F66 1px solid;
  border-bottom:#525F66 1px solid;
  transform:rotate(45deg);
  transform-origin: 4px 3px;
  transition:transform 300ms ease-in-out;
}
/* End Language Switcher */
/*********************************/



/* ============ */
/* 9. LP HEADER */
/* ============ */




/* ============ */
/* 10. FOOTER   */
/* ============ */
#footer {
  background: #781937;
  background: -moz-linear-gradient(45deg,  #781937 0%, #e23067 100%);
  background: -webkit-linear-gradient(45deg,  #781937 0%,#e23067 100%);
  background: linear-gradient(45deg,  #781937 0%,#e23067 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#781937', endColorstr='#e23067',GradientType=1 );
  margin-top:25rem;
}
#footer .menu-footer ul li a{
  color: #ffffff;
  font-size: 1.2rem;
  font-weight:300;
}
#footer .menu-footer ul{
  white-space:nowrap;
}
#footer .menu-footer ul li:not(:last-child) a{
  margin-bottom:2rem;
}
#footer .logo-customer-mobile{
  display:none;
}
#footer .social-network p{
  font-size: 1.6rem;
  font-weight:300;
  white-space:nowrap;
}
#footer .main-footer > div {
  position:relative;
}
#footer .main-footer > div:not(:last-child)::after{
  content:'';
  position:absolute;
  right:0;
  top:50%;
  background:rgba(255,255,255,.35);
  width:1px;
  height:160px;
  transform:translateY(-50%);  
}
#footer .main-footer {
  max-width:960px;
  margin-right:auto;
  margin-left:auto;
}
#footer .main-footer .logo img{
  max-width:188px;
}
#footer .main-footer .logo {
  flex:0 0 250px;
  text-align:center;
  padding-right: 3vw;
}
#footer .main-footer .menu-footer {
  flex:0 0 460px;
  justify-content: space-evenly;
}
#footer .main-footer .social-network {
  flex:0 0 250px;
  padding-left: 3vw;
}
#footer .copyright p,
#footer .copyright a {
  margin:0;
  color: #ffffff;
}
#footer .social-network-pictos a{
  margin-right:2rem;
}
#footer .logo-customer img,
#footer .logo-customer-mobile img{
  width:auto;
}


/* =============== */
/* 10. LP FOOTER   */
/* =============== */




/* ========================== */
/* 11. LANGUAGE SWITCHER STYLE */
/* ========================== */




/* ======================= */
/* 13. MOBILE BURGER STYLE */
/* ======================= */

/* ======== */
/* 14. FORM */
/* ======== */

#contact{
  max-width:1183px;
  margin-left:auto;
  margin-right:auto;
}
#contact input[type="text"],
#contact input[type="password"], 
#contact input[type="datetime"], 
#contact input[type="datetime-local"], 
#contact input[type="date"], 
#contact input[type="month"], 
#contact input[type="time"], 
#contact input[type="week"], 
#contact input[type="number"], 
#contact input[type="email"], 
#contact input[type="url"], 
#contact input[type="search"], 
#contact input[type="tel"], 
#contact input[type="color"],
#contact input[type="file"],
#contact textarea,
#contact select {
  font-family: proxima-nova, Helvetica, Arial, sans-serif;
  width: 100%;
  color: rgba(93,112,128,0.75);
  font-size:1.8rem;
  font-weight:300;
  background-color: #ffffff;
  border:0;
  border-radius:0;
  border-bottom: #7A919D 1px solid;  
  padding: 1rem 1.5rem 1rem 0;
}
#contact select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#contact textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: #7A919D 1px solid;
  padding: 2rem;
}
#contact .hs-fieldtype-select .input{
  position:relative;
}
#contact .hs-fieldtype-select .input::after{
  content:'';
  position:absolute;
  right: 1.6rem;
  top: 1.6rem;
  border-left:2px solid rgba(93,112,128,0.75);
  border-bottom:2px solid rgba(93,112,128,0.75);
  width:.8rem;
  height:.8rem;
  transform:rotate(-45deg);
}
#contact textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height:187px;
}
::-webkit-input-placeholder {
  color: rgba(93,112,128,0.75);
  font-size:1.8rem;
  opacity: 1;
}
:-moz-placeholder {
  color: rgba(93,112,128,0.75);
  font-size:1.8rem;
  opacity: 1;
}
::-moz-placeholder {
  color: rgba(93,112,128,0.75);
  font-size:1.8rem;
  opacity: 1;
}
:-ms-input-placeholder {
  color: rgba(93,112,128,0.75);
  font-size:1.8rem;
  opacity: 1;
}
#contact form.hs-form fieldset {
  max-width: none;
}
#contact form.hs-form .hs-form-field {
  padding-top:4rem;
  padding-bottom:4rem;
}
#contact form.hs-form .hs-form-field > label > span{
  display:none;
}
#contact form.hs-form fieldset .hs-form-field {
  padding-right:5.885416666666667vw;
  padding-left:5.885416666666667vw;
}
#contact form.hs-form fieldset[class*="form-columns"] .input {
  margin-right: 0;
}
#contact form.hs-form fieldset[class*="form-columns"] .hs-input {
  width: 100%;  
}
#contact form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] {
  width: auto;
  margin-right: 1rem;
}
#contact form.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 33.33%;
}
#contact .hs-form-required {
  display:none;
}
#contact ul.hs-error-msgs{
  padding-left:0;
  margin:0;
}
#contact ul.hs-error-msgs li{
  font-size: 1.2rem;
  color: red;
}
#contact form.hs-form .hs-form-field ul.inputs-list li {
  list-style:none;
}
#contact .hs_submit{
  text-align:right;
  padding: 0 5.885416666666667vw 0 5.885416666666667vw;
}
#contact .legal-consent-container{
  padding:0 10px;
  margin-bottom:2.5rem;
}
#contact .legal-consent-container p,
#contact .legal-consent-container{
  font-size:1.2rem;
  line-height:1.8rem;
  color: #95A0AB;
}
#contact .legal-consent-container a{
  color: #95A0AB;
}
#contact .legal-consent-container .hs-fieldtype-booleancheckbox {
  margin-bottom:0 !important;
  padding:0 !important;
}
#contact .legal-consent-container .hs-fieldtype-booleancheckbox ul.inputs-list{
  padding-left:0;
  margin:0;
}
#contact .submitted-message {
  text-align: center;
  color:#525F66;
  font-size: 2rem;
}


/* ======== */
/* 14. CUSTOM CSS GOES HERE */
/* ======== */
.home #text-image-module {
  padding-top:26rem;
  padding-bottom:16rem;
}
.home #logos{
  padding-top:2rem;
  padding-bottom:4rem;
}
.home #why{
  padding-bottom:8rem;
}
.home #avantages{
  padding-top:8rem;
  padding-bottom:8rem;
}
.home #avantages h2{
  display:none;
}
.home #solutions{
  padding-bottom:16rem;
}
.home #technology{
  padding-bottom:8rem;
}
.home #ressources{
  padding-top:8rem;
  padding-bottom:8rem;
}
.home #contact{
  padding-top:8rem;
}
.quiSommesNous h2 {
  font-size:3rem;
}
.quiSommesNous #text-image-module {
  padding-top:26rem;
  padding-bottom:16rem;
}
.quiSommesNous #text-image-card-module {
  padding-top:8rem;
  padding-bottom:16rem;
  padding-right:8rem;
  padding-left:8rem;
}
.quiSommesNous #history {
  padding-bottom:8rem;
}
.quiSommesNous #equipes {
  padding-top:8rem;
}
.nosSolutions #text-image-module {
  padding-top:20rem;
  padding-bottom:6rem;
}
.nosSolutions #text-image-card-module {
  padding-top:8rem;
  padding-bottom:16rem;
  padding-right:8rem;
  padding-left:8rem;
}
.nosSolutions #image-text-card-module {
  padding-top:8rem;
  padding-bottom:16rem;
  padding-right:8rem;
  padding-left:8rem;
}
.nosOffres #offers {
  padding-top:20rem;
}
.commentCaMarche #text-image-module-ccm {
  padding-top:26rem;
  padding-bottom:16rem;
}
.commentCaMarche #solutions .header-image {
  display:none !important;
}
.commentCaMarche #solutions .solution-noSlide::before {
  content:none !important;
}
.commentCaMarche #solutions .solutions-container h2{
  padding-bottom:5rem;
}
.commentCaMarche #history h2,
.commentCaMarche #image-text-module h2,
.commentCaMarche #avantages h2{
  color:#2E3133;
}
.commentCaMarche #history,
.commentCaMarche #solutions,
.commentCaMarche #avantages{
  padding-bottom:26rem;
}
.contact #image-form-module {
  padding-top:16rem;
}


/** lazy loading **/
img.lazy {
    display: inline;
    border: 0;
    opacity: 0;
}
img:not(.initial) {
    transition-property: opacity;
    transition-duration: 0.3s;
    transition-timing-function: linear;
}
img.initial,
img.loaded,
img.error {
    opacity: 1;
}
img:not([src]) {
    visibility: hidden;
}

/* ============== 

15. RESPONSIVE 
In general, You can use the desktop display until 992px (except some 1280px design that can cause troubles), then tablet. In tablet mode, you can add a 768 breakpoint if the display must be optimized. You can also do the same for 480px and 320px. Use a minimum of breakpoint and each one must be justified. 

============== */

@media (max-width: 1280px) {
  #header {
    padding: 0 2vw 0 2vw;
  }
  #header .top-menu ul li a, #header .main-menu ul li a{
    font-size: 1rem;
  }
  .cta_button, .input[type="submit"], .hs-button.primary.large {
    font-size: 1.6rem;
    /*padding: 0 1.5rem;*/
  }
  #header .top-menu li.hs-item-has-children > a::after,
  #header .main-menu li.hs-item-has-children > a::after{
    width:4px;
    height:4px;
    transform-origin: 3px 4px;
  } 
  #header .top-menu .hs-menu-wrapper > ul > li:not(.hs-item-has-children)::before,
  #header .main-menu .hs-menu-wrapper > ul > li:not(.hs-item-has-children)::before{
    width:6px;
    height:6px;
    bottom:0;
  }
  #footer .main-footer .logo img{
    max-width:128px;
  }
  #footer .main-footer {
    max-width:100%;
  }
  #footer .main-footer .menu-footer {
    flex:0 0 50%;
  }
  #footer .main-footer .social-network{
    flex: 0 0 25%;
  }
  #footer .main-footer .logo {
    flex: 0 0 25%;
  }
  #footer .social-network p {
    font-size: 1.4rem;
  }
  .commentCaMarche #history,
  .commentCaMarche #solutions,
  .commentCaMarche #avantages{
    padding-bottom:18rem;
  }
  .commentCaMarche .step-number img{
   max-width:163px;
  }
}

@media (max-width: 992px) {
  .container-fluid .row-fluid .wrapper{
    max-width: 80vw;
    padding-left:0;
    padding-right:0;
  }  

  h1, .title_mobile {
    font-size: 3rem;
    line-height: 4rem;
  }


  h2{
    font-size: 2.5rem;
    line-height: 3.2rem;
  }

  h3{
    font-size: 2rem;
    line-height: 2.8rem;
  }

  h4{
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  p, ul li{
    font-size: 1.6rem;
    line-height: 3.5rem;
  }
  #header-mobile {
    display:block;
  }
  #header {
    display:none;
  }
  #footer{
    background: #781937;
    background: -moz-linear-gradient(top,  #781937 0%, #e23067 100%);
    background: -webkit-linear-gradient(top,  #781937 0%,#e23067 100%);
    background: linear-gradient(to bottom,  #781937 0%,#e23067 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#781937', endColorstr='#e23067',GradientType=0 );
    margin-top:12rem;
  }
  #footer .main-footer > div:not(:last-child)::after{
    content:none; 
  }
  #footer .main-footer{
    flex-direction:column;
  }
  #footer .menu-footer{
    flex-direction:row;
  }
  #footer .menu-footer ul{
    display:flex;
    flex-direction:column;
    align-items: flex-start;
  }
  #footer .menu-footer ul li a{
    margin-right:1rem;
    margin-left:1rem
  }
  #footer .menu-footer{
    padding-top:3rem;
    padding-bottom:1rem;
  }
  #footer .social-network{
    padding-top:3rem;
  }
  #footer .logo{
    padding-bottom:3rem;
  }
  #footer .menu-footer ul li a{
    margin-bottom:2rem;
  }
  #footer .logo-customer{
    display:none;
  }
  #footer .logo-customer-mobile{
    display:flex;
  }
  #footer .social-network p {
    text-align:center;
  }
  #footer .social-network-pictos{
    justify-content:center;
  }
  #footer .social-network-pictos a{
    margin-right:1rem;
    margin-left:1rem
  }
  #footer .main-footer .logo {
    padding-right: 0;
  }
  #footer .main-footer .social-network {
    padding-left: 0;
  }
  #footer .logo{
    text-align:center;
  }
  .home #text-image-module {
    padding-top:14rem;
    padding-bottom:4rem;
  }
  .home #why{
    padding-bottom:4rem;
  }
  .home #avantages{
    padding-top:4rem;
    padding-bottom:4rem;
  }
  .home #solutions{
    padding-bottom:8rem;
  }
  .home #technology{
    padding-bottom:4rem;
  }
  .home #ressources{
    padding-top:4rem;
    padding-bottom:4rem;
  }
  .home #contact{
    padding-top:4rem;
  }
  .quiSommesNous #text-image-module {
    padding-top:14rem;
    padding-bottom:4rem;
  }
  .quiSommesNous #text-image-card-module {
    padding-top:4rem;
    padding-bottom:8rem;
    padding-right:2rem;
    padding-left:2rem;
  }
  .quiSommesNous #history {
    padding-bottom:4rem;
  }
  .quiSommesNous #equipes {
    padding-top:4rem;
  }
  .nosSolutions #text-image-module {
    padding-top:14rem;
    padding-bottom:4rem;
  }
  .nosSolutions #text-image-card-module {
    padding-top:4rem;
    padding-bottom:8rem;
    padding-right:2rem;
    padding-left:2rem;
  }
  .nosSolutions #image-text-card-module {
    padding-top:4rem;
    padding-bottom:4rem;
    padding-right:2rem;
    padding-left:2rem;
  }
  .commentCaMarche #text-image-module-ccm {
    padding-top:14rem;
    padding-bottom:4rem;
  }
  .commentCaMarche #history,
  .commentCaMarche #solutions,
  .commentCaMarche #avantages{
    padding-bottom:12rem;
  }
  .commentCaMarche .step-number img{
   max-width:123px;
  }

}

@media (max-width: 768px) { 
  #contact {
    padding-top:0;
  }
  #contact form.hs-form .hs-form-field {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  #footer{
    margin-top:6rem;
  } 
  body .row-fluid [class*="span"].span1,
  body .row-fluid [class*="span"].span2,
  body .row-fluid [class*="span"].span3,
  body .row-fluid [class*="span"].span4,
  body .row-fluid [class*="span"].span5,
  body .row-fluid [class*="span"].span6,
  body .row-fluid [class*="span"].span7,
  body .row-fluid [class*="span"].span8,
  body .row-fluid [class*="span"].span9, 
  body .row-fluid [class*="span"].span10, 
  body .row-fluid [class*="span"].span11, 
  body .row-fluid [class*="span"].span12 {
    width: 100%;
  }
  .home #text-image-module {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .home #logos{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .home #why{
    padding-bottom:2rem;
  }
  .home #avantages{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .home #solutions{
    padding-bottom:2rem;
  }
  .home #technology{
    padding-bottom:2rem;
  }
  .home #ressources{
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .home #contact{
    padding-top:2rem;
  }
  .quiSommesNous #text-image-module {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .quiSommesNous #text-image-card-module {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .quiSommesNous #history {
    padding-bottom:2rem;
  }
  .quiSommesNous #equipes {
    padding-top:2rem;
  }
  .nosSolutions #text-image-module {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .nosSolutions #text-image-card-module {
    padding-top:0;
    padding-bottom:0;
  }
  .nosSolutions #image-text-card-module {
    padding-top:0;
    padding-bottom:0;
  }
  .nosOffres #offers {
    padding-top: 12rem;
  }
  .commentCaMarche #text-image-module-ccm {
    padding-top:2rem;
    padding-bottom:2rem;
  }
  .commentCaMarche #history,
  .commentCaMarche #solutions,
  .commentCaMarche #avantages{
    padding-bottom:6rem;
  }
  .commentCaMarche .step-number img{
   max-width:93px;
  }
}

@media (max-width: 640px) {
  .container-fluid .row-fluid .wrapper{
    max-width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  h1, .title_mobile {
    font-size: 2.5rem;
    line-height: 4rem;
  }


  h2{
    font-size: 2.5rem;
    line-height: 3.2rem;
  }

  h3{
    font-size: 2rem;
    line-height: 2.8rem;
  }

  h4{
    font-size: 1.8rem;
    line-height: 2.4rem;
  }

  p, ul li{
    font-size: 1.6rem;
    line-height: 2.8rem;
  }
}