/**
 * Global rules
 */


html {
  height: 100%;
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.4;
}
html, body {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  color: #001D37;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}
body {
  overflow-x: hidden;
  padding-top: 100px;
}
body * {
  box-sizing: border-box;
}
p, h1, h2, h3 {
  position: relative;
}
p {margin-top: 0;}

/**
 * Generic
 */
a {color: inherit;text-decoration: none;transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;border: 0;}
.button, button  {display: inline-block; cursor: pointer; line-height: 1; border-radius: 20px; background: #1465A8; color: white; padding: 0.5em 1em; border: 0; position: relative; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out; font-weight: 700; font-size: 1.1rem;}
.button:hover, button:hover {background: #FBBC31; color: white;}
a:hover, a:active, a:focus {text-decoration: none; color: inherit;}
img {display: inline-block;max-width: 100%; height: auto;}
.container {max-width: 1380px; margin: 0 auto; padding: 0 15px;}
h1, h2 {line-height: 1.1; font-weight: 700; margin: 30px 0 0;font-size:1.5em;}
.main-wrapper {background: url(/img/main-bg.jpg) no-repeat center; background-size: cover; color: white; min-height: calc(100vh - 110px);padding-bottom: 4rem; background-attachment: fixed;}

/**
 * Header
 */
.beatex-one-page-header {height: 100px; -webkit-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.41); -moz-box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.41); box-shadow: 0px 7px 18px 0px rgba(0,0,0,0.41);position: fixed; left: 0; top: 0; width: 100%; background: white; z-index: 100;}
.beatex-one-page-header > .container {display: flex; flex-wrap: wrap; justify-content: space-between; height: 100%;}
.logo-header {display: flex; justify-content: center; flex-direction: column; max-width: calc(100% - 60px);}
.main-menu {position: fixed; left: -300px; transition: all 0.25s ease-in-out; width: 280px; top: 100px; padding: 2rem; background: white;}
.main-menu ul {display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0;}
ol.breadcrumb {list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-style: italic; font-size: 0.95rem;}
ol.breadcrumb li:not(:last-child):after {content: ">"; margin-left: 0.25rem;}
ol.breadcrumb li:last-child {font-weight: 700;}
.main-menu ul li {position: relative; width: 100%;}
.main-menu ul li a:hover {color: #FDBD2E;}
#menu-icon {width: 32px; height: 24px; display: inline-block; position: relative; margin-left: 0.75rem; cursor: pointer;}
#menu-icon:before {content: ""; width: 100%; height: 0.25rem; position: absolute; top: 0; left: 0; background: #001D37; transform: rotate(0); transform-origin: left; transition: all 0.35s ease-in-out; border-radius: 5px;}
#menu-icon:after {content: ""; width: 100%; height: 0.25rem; position: absolute; top: calc(100% - 0.25rem); left: 0; background: #001D37; transform: rotate(0); transform-origin: left; transition: all 0.35s ease-in-out; border-radius: 5px;}
#menu-icon span {width: 100%; height: 0.25rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0; background: #001D37; opacity: 1; transition: all 0.35s ease-in-out; border-radius: 5px;}
#submenu:target {display: none;}
.right-header {display: flex; display: flex; justify-content: center; flex-direction: column;}
#toggle-menu {display: none;}
#toggle-menu:checked + .main-menu {left: 0;}


/**
 * Step
 */
.step-wrapper {text-align: center;}
.step-wrapper > ul {padding: 3rem 0; margin: 0 3rem; display: inline-flex; list-style: none; justify-content: space-between; width: calc(100% - 6rem); max-width: 720px; font-weight: 700; position: relative;}
.step-wrapper > ul:before {content: ""; width: 99%; height: 2px; background: white; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.step-wrapper > ul > li {height: 58px; position: relative; display: flex; justify-content: center; flex-direction: column;}
.step-wrapper > ul > li > p {display: inline-block; margin: 0; width: 24px; height: 24px; background: #FFFFFF; border-radius: 50%; position: static;}
.step-label {position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); opacity: 0.3; font-size: 0.8rem; max-width: 90px;}
.step-wrapper > ul > li p.step-content.step-active {background: #FDBD2E; width: 42px; height: 42px;}
.step-wrapper > ul > li p.step-content.step-active .step-label {opacity: 1;}
.step-number {font-size: 1.85rem;}




/**
 * Page Form 1
 */
section.form-block {width: calc(100% - 30px); max-width: 1125px; padding: 3rem; border-radius: 19px; background: rgba(4, 34, 58, 0.2); backdrop-filter: blur(12px); margin: 1rem auto 2rem;}
.form-block h1 {margin: 0 0 1.5rem; padding: 100px 0 0 0; max-width: 800px; font-size: 1.375rem; position: relative;}
.form-block h1:before {content: ""; left: 0; top: 0; width: 78px; height: 78px; background: url(/img/tools.svg) no-repeat center; background-size: 100%; position: absolute;}
input[type="radio"] {display: none;}
input[type="radio"] + label {font-size: 1.125rem; padding-left: 2.5rem; position: relative; cursor: pointer;}
input[type="radio"] + label:before {content: ""; width: 26px; height: 26px; background: white; border: 3px solid #FDBD2E; position: absolute; left: 0; top: -3px; border-radius: 50%;}
input[type="radio"]:checked + label:after {content: ""; width: 16px; height: 16px; background: #FDBD2E; position: absolute; left: 8px; top: 5px; border-radius: 50%;}
input[type="radio"]:checked + label {font-weight: 700; color: #FDBD2E;}

input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {font-size: 1.125rem; padding-left: 2.5rem; position: relative; cursor: pointer;}
input[type="checkbox"] + label:before {content: ""; width: 26px; height: 26px; background: white; border: 3px solid #FDBD2E; position: absolute; left: 0; top: -3px; border-radius: 0%;}
input[type="checkbox"]:checked + label:after {content: ""; width: 16px; height: 16px; background: #FDBD2E; position: absolute; left: 8px; top: 5px; border-radius: 0%;}
input[type="checkbox"]:checked + label {font-weight: 700; color: #FDBD2E;}

.form-item {margin-bottom: 1.5rem;}
.form-action--neutre {text-align: right; margin-top: 1rem; padding-bottom: 1.5rem;}
.form-action {text-align: right; border-bottom: 2px solid #FDBD2E; margin-top: 1rem; padding-bottom: 1.5rem;}
.form-action button {background: #FDBD2E;}
.form-action button:hover {background: #1465A8;}
.step-content:not(.step-active) .step-label {display: none;}

.space--top{margin-top:5px;}

.form-action--end {text-align: right; margin-top: 1rem; padding-bottom: 1.5rem; margin-right:1rem;}
.form-action--end button {background: #FDBD2E;}
.form-action--end button:hover {background: #1465A8;}

/**
 * Page Form 2
 */
.form-line {display: flex;flex-wrap: wrap; justify-content: space-between;}
.form-line-plus {width: 30px; justify-content: flex-end; display: flex; flex-direction: column; margin-bottom: 0.25rem;}
.form-line-select {width: calc(28% - 1.5rem); max-width:calc(30% - 54px);}

.form-line-qtite input {width: 100%; background: white; height: 40px; border: 0; border-radius: 8px; font-family: 'Montserrat', sans-serif;}

.form-line-text input {width: 100%; background: white; height: 40px; border: 0; border-radius: 8px; font-family: 'Montserrat', sans-serif;}
textarea {background: white; border: 0; border-radius: 8px; font-family: 'Montserrat', sans-serif;}
.form-line-text textarea {width: 100%; background: white; height: 60px; border: 0; border-radius: 8px; font-family: 'Montserrat', sans-serif;}
.form-line-select select {padding: 0.5rem; width: 100%; height: 40px; border: 0; border-radius: 8px; padding: 0.5rem; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; background: white url(/img/arrow.svg) no-repeat calc(100% - 1rem) center;}
.form-line-select select:focus, .form-line-qtite input:focus {outline: none;}
select::-ms-expand {display: none;}
.form-line-plus svg {fill: #FDBD2E; transition: all 0.25s ease-in-out;}
.form-block h2 {font-size: 1.625rem; margin: 0 0 0.5rem 3.2rem; color: #FBBC31;}
.form-line-wrapper {margin-bottom: 2rem;}
.form-block label {display: block; margin-bottom: 0.25rem;}
.beatex-page-form-2 .form-action {margin-top: 2.5rem;}


/**
 * Page Form 4
 */
.page-3-form {display: flex; flex-wrap: wrap;}
.page-3-form-left {width: 100%;}
.page-3-form-right {width: 100%; text-align: center;}
.page-3-form-left h1 {font-size: 2.56rem; position: relative; text-transform: uppercase; color: #FDBD2E; margin-bottom: 1rem;}
.page-3-form-left p {font-size: 1.25rem; max-width: 500px;}
.page-3-form .form-block {width: calc(100% - 30px); max-width: 1125px; padding: 1.5rem 3rem;}
.page-3-form-left p:last-child {padding-bottom: 1.5rem; border-bottom: 2px solid #FDBD2E;}


/**
 * Footer
 */
footer {background: #04223A; color: white;}
.footer-bottom {background: #FBBC31; text-align: center;}
.footer-columns {display: flex; flex-wrap: wrap; gap: 1rem; padding: 2rem 0;}
.footer-columns > div {width: 100%;}
.footer-contact-socials ul {margin: 0; list-style: none; padding: 0; display: flex; gap: 0.5rem;}
.footer-contact {display: flex; flex-wrap: wrap;}
.footer-contact-socials {margin-left: 0.5rem;}
.footer-contact-socials svg {fill: #FBBC31; transition: all 0.25s ease in-out;}
.footer-contact-socials a:hover svg {fill: white;}
.menu ul {list-style: none; padding-left: 2.5rem; margin: 0;}
.menu ul a {text-decoration: underline;}
.menu ul a:hover {color: #FBBC31;}
.nl-wrapper {display: flex;}
.nl-wrapper button {width: 57px; height: 35px;}
.nl-wrapper-input {width: calc(100% - 57px);}
.nl-wrapper-input input {width: calc(100% - 5px); height: 35px; border-radius: 20px; border: 0; padding: 0.5rem;}
.nl-wrapper-input input:focus {outline: none;}
.nl-wrapper-input input::placeholder {opacity: 1; color:#04223A; font-style: italic;}
.footer-bottom .menu ul {padding: 0; display: inline-flex; gap: 0.25rem; padding: 0.75rem;}
.footer-bottom .menu ul a {text-decoration: none; position: relative;}
.footer-bottom .menu ul a:hover {color: #04223A;}
.footer-bottom .menu ul li:not(:last-child) a:after {content: "-"; margin-left: 0.25rem;}
.footer-contact-button {margin-bottom: 1rem;}

@media screen and (min-width: 600px) {
	.form-line-qtite {width: calc(16% - 54px);}
	.form-line-text {width: calc(30% - 54px);}
	.form-line-qtite {width: 90px; margin: 0 0 1.5rem 40px;}
	
	
	
	.step-label {top: calc(100% + 0.75rem); white-space: nowrap; max-width: 200px; font-size: 1rem;}
	section.form-block {margin: 2rem auto;}
	.form-block h1 {font-size: 2rem; padding: 0 0 0 100px; margin: 0 0 3rem;}
	.form-block h1:before {top: 50%; transform: translateY(-50%);}
	.step-wrapper > ul > li p.step-content.step-active {background: #FDBD2E; width: 58px; height: 58px;}
	.step-number {font-size: 2.45rem;}
	input[type="radio"] + label {font-size: 1.625rem;}
	input[type="radio"] + label:before {top: 0;}
	input[type="radio"]:checked + label:after {top: 8px;}
	.page-3-form-left {width: 66%; padding-right: 2rem; margin-top: 3rem;}
	.page-3-form-right {width: 34%;}
	.page-3-form-left p {margin-left: 102px;}
	.page-3-form-left p:last-child {padding-bottom: 3rem;}
	.footer-columns > div {width: calc(50% - 1rem);}
}	


@media screen and (max-width: 599px) {
	form-line-text {width:100%;}
	}


@media screen and (min-width: 890px) {
	.step-content:not(.step-active) .step-label {display: block;}
	.main-wrapper {min-height: calc(100vh - 250px);}
}	
@media screen and (min-width: 990px) {
	.footer-columns > div {width: calc(25% - 1rem);}
}	
@media screen and (min-width: 1200px) {
	.main-menu {display: flex;justify-content: center; flex-direction: column; left: 0; position: static; width: auto; top: 0; position: static; padding: 0;}
	#menu-icon, #toggle-menu {display: none;} 
	.main-menu ul li:not(:last-child):after {content: ""; height: 100%; width: 0.1rem; position: absolute; right: -1rem; top: 0; background: #001B2F; transform: translateX(-100%);}
	.main-menu ul li {width: auto;}
	.footer-column-2, .footer-column-3 {padding-top: 2.8rem;}
}

@media screen and (max-width: 860px) {
	.step-wrapper > ul > li:last-child p.step-content.step-active .step-label {
		width: 110px;
		white-space: inherit;
	}
}
@media screen and (max-width: 800px) {
	.form-line-select {width: calc(100% - 40px); margin: 0 0 1.5rem 40px;}
	.form-line-plus + .form-line-select {margin-left: 0;}
	.form-line-plus {margin-bottom: 1.75rem;}
	/*.form-line-qtite {width: 90px; margin: 0 0 1.5rem 40px;}*/
	section.form-block {padding: 3rem 2rem;}
	.form-block h2 {font-size: 1.25rem; margin: 0 0 0.5rem 2.5rem;}	
}	


/*Jquery UI autocomplete */
.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;   
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
	font-family:Montserrat, sans-serif;
}
/*Scrollbar*/
.ui-autocomplete {
     max-height: 250px;
     overflow-y: auto;
     /* prevent horizontal scrollbar */
     overflow-x: hidden;
 }
 /* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
 * html .ui-autocomplete {
     height: 250px;
 }

.fixed-height {
	padding: 1px;
	max-height: 250px;
	overflow: auto;
}
		
.ui-helper-hidden-accessible{display:none;}