main#parrainage .ref-section { margin-bottom:30px; }
main#parrainage .ref-section > .container { max-width:830px; margin:auto; }
main#parrainage h2 { margin-bottom:30px; color:#096884; font-size:1.2vw; line-height:1.3em; }
main#parrainage h2 > span { display:block; font-weight:normal !important; font-size:14px; }
main#parrainage p { margin-top:0; margin-bottom:15px; }
main#parrainage p.mentions { font-size:11px; line-height:1.2em; text-align:justify; }
main#parrainage p.mentions a { color:#4c4a4b !important; text-decoration:underline; }

#parrainage-header { text-align:center; background:#0a484f; color:#a1d315; background-repeat:no-repeat !important; background-size:cover !important; background-position:center !important; }
#parrainage-header .container { height:30vw; line-height:30vw; }
#parrainage-header h1 { display:inline-block; vertical-align:middle; color:#a1d315; font-weight:normal; line-height:1.4em; font-size:2vw; }
#parrainage-header h1 > img { height:10vw; width:auto; margin-top:-5vw; }
#parrainage-header h1 > strong { display:block; font-weight:800; font-size:2.4vw; margin-top:-3vw; }

#parrainage-intro { text-align:center; }
#parrainage-video { text-align:center; }
#parrainage-offres { text-align:center; }
ul.offres { display:block; list-style-type:none; border:solid 1px #a1d315; margin-bottom:15px; }
ul.offres > li { display:flex; }
ul.offres > li > div { flex:1; text-align:center; font-weight:bold; height:60px; line-height:60px; }
ul.offres > li > div:nth-child(1) { background:#008193; color:#ffffff; border-bottom:solid 1px #a1d315; }
ul.offres > li > div:nth-child(2) { color:#008193; border-bottom:solid 1px #a1d315; }
ul.offres > li:last-child > div { border:none; }
div.offres-filleuls { display:grid; grid-template-columns: 1fr 1fr 1fr; border:solid 1px #a1d315; margin-bottom:15px; overflow:hidden; }
div.offres-filleuls > div:not(.illustration) { height:4.9vw; line-height:4.9vw; text-align:center; font-weight:bold; font-size:0.9vw; }
div.offres-filleuls > div.illustration { grid-row:span 3; background:#eee; background-repeat:no-repeat !important; background-size:cover !important; background-position:center !important; }
div.offres-filleuls > div.key { position:relative; background:#096884; color:#ffffff; border-bottom:solid 1px #a1d315; background:transparent url('../images/parrainage-offres-fleche.png') no-repeat; background-position:right center; }
div.offres-filleuls > div.key:before { /* content:" "; position:absolute; top:0px; right:0px; width:4.5vw; height:4.5vw; background:#096884; transform:rotate(45deg); margin-right:-2.25vw; z-index:-1; */ }
div.offres-filleuls > div.val { color:#096884; border-bottom:solid 1px #a1d315; }
div.offres-filleuls > div:nth-child(6) { border:none; }
div.offres-filleuls > div:nth-child(7) { border:none; }

#parrainage-etapes { text-align:center; background:#0a484f; color:#fff; padding-top:30px; }
#parrainage-etapes h2 { color:#fff !important; }
ul.etapes { position:relative; max-width:90%; list-style-type:none; margin:0 auto; padding:0; display:flex; z-index:1; }
ul.etapes:before { content:" "; position:absolute; left:11.5vw; right:11.5vw; top:calc(5.3vw + 5px); width:auto; height:2px; background:#a1d315; z-index:-1; }
ul.etapes > li { flex:1; position:relative; }
ul.etapes > li > strong { display:block; margin-bottom:5px; }
ul.etapes > li > p { /* max-width:80%; */ margin:auto; font-size:0.8vw; line-height:1.3em; }
ul.etapes > li > span.bullet { display:block; width:1vw; height:1vw; border-radius:50%; background:#fff; border:solid 2px #a1d315; margin:0 auto 5px auto; }
ul.etapes > li > img { height:4.8vw; width:auto; }

main#parrainage form { display:grid; grid-template-columns:1fr 1fr; column-gap:10px; row-gap:10px; grid-column-gap:10px; grid-row-gap:10px; }
main#parrainage .form-group { margin:0; }
main#parrainage .control-label { }
main#parrainage .control { }
main#parrainage .form-control { width:100%; height:40px; line-height:40px; padding:0 12px; background:#F2F6FA; border:none; border-radius:5px; box-shadow:none !important; outline:none !important; font-size:14px; color:#000000; font-family:'Montserrat', sans-serif; }
main#parrainage .form-control::placeholder { font-size:14px; color:#707070; }
main#parrainage .form-group#nom,
main#parrainage .form-group#email { /* max-width:48%; margin-right:1%; */ }
main#parrainage .form-group#prenom,
main#parrainage .form-group#telephone { /* max-width:48%; margin-left:1%; */ }
main#parrainage .form-group#civilite,
main#parrainage .form-group#lieu { grid-column:span 2; }
main#parrainage .form-group#civilite .control { max-width:200px; }
main#parrainage .form-group.optin { grid-column:span 2; text-align:left; margin-bottom:10px; }
main#parrainage .form-group.optin [type="checkbox"] { display:none; }
main#parrainage .form-group.optin [type="checkbox"] + label { display:inline-block; position:relative; padding-left:60px; font-size:14px; line-height:1.2em; padding-top:4px; }
main#parrainage .form-group.optin [type="checkbox"] + label:before { content:" "; position:absolute; left:0px; top:0px; width:40px; height:40px; border:solid 1px #008193; border-radius:4px; }
main#parrainage .form-group.optin [type="checkbox"]:checked + label:after { content:" "; position:absolute; left:4px; top:4px; width:32px; height:32px; background:#a1d315; }
main#parrainage .form-group.error .form-control { border:solid 1px #ff0000; }
.SumoSelect > .CaptionCont { height:40px; line-height:40px; border-radius:5px !important; background:#F2F6FA; padding:0 12px; border:none; font-size:14px; text-align:left; color:#707070; margin-bottom:0 !important; }
.SumoSelect.open > .optWrapper { top:40px; }
.SumoSelect.open > .optWrapper ul.options > li { font-size:14px; text-align:left; }
.SumoSelect.open > .optWrapper ul.options > li:first-child { display:none; }
main#parrainage button.loading { background:#ccc; pointer-events:none; border-color:transparent; }

.error-message { text-align:center; color:#ff0000 !important; margin-top:20px; }
main#parrainage form .error-message { grid-column:span 2; color:#ff0000; text-align:center; }
.form-group.optin.error [type="checkbox"] + label:before { border:solid 1px #ff0000 !important; }
.form-group.error .SumoSelect > .CaptionCont { border:solid 1px #ff0000 !important; }

#parrainage-auth { text-align:center; }
#parrainage-auth form { margin-bottom:30px; }
#parrainage-auth form h2 { grid-column:span 2; margin-top:30px; margin-bottom:10px; }
#parrainage-auth form .form-group#achat { grid-column:span 2; text-align:left; }
#parrainage-auth #achat { display:none; }
#parrainage-auth #achat.active { display:block; }

#parrainage-filleuls { text-align:center; }
#parrainage-filleuls .container { display:none; }
#parrainage-filleuls.loading { }
#parrainage-filleuls.active #contacts-liste { display:block; }
#nouveau-filleul { display:none; }
#nouveau-filleul.active { display:block; }
#parrainage-filleuls form { margin-bottom:30px; }
#parrainage-filleuls form h2 { grid-column:span 2; margin-top:30px; margin-bottom:10px; }
#parrainage-filleuls .container#nouveau-filleul { padding-top:30px; padding-bottom:30px; border-top:solid 1px #a1d315; }
#parrainage-filleuls hr { grid-column:span 2; border-top:solid 1px #a1d315; width:auto; margin:30px -20px; }
#parrainage-filleuls p.mentions { text-align:left; margin-top:30px; color:#ACACAC; font-size:0.7vw; line-height:1.2em; }
#parrainage-filleuls .form-group#residence { grid-column:span 2; }
#contacts-liste { margin-left:-20px; margin-right:-20px; }
div.contact { padding:30px 0; border-top:solid 1px #a1d315; margin-left:-20px; margin-right:-20px; transition:all 0.4s ease; opacity:0; transform:translateX(100%); }
div.contact.active { opacity:1; transform:translateX(0); }
div.contact ul { background:#F2F6FA; border-radius:8px; list-style-type:none; margin:0; padding:20px; display:grid; grid-template-columns:1fr 1fr; column-gap:10px; row-gap:10px; grid-column-gap:10px; grid-row-gap:10px; }
div.contact ul > li { height:40px; line-height:40px; padding:0 12px; background:#ffffff; border-radius:5px; text-align:left; }
div.contact ul > li.lieu { grid-column:span 2; }

#confirmation { text-align:center; padding:20px; transition:all 0.4s ease; /* transform:translateY(100%); opacity:0; */ display:none; }
#confirmation.active { /* transform:translateY(0); opacity:1; */ display:block; }
#confirmation img { margin-bottom:10px; }
#confirmation h2 { text-transform:uppercase; margin:0 0 10px 0 !important; font-size:1.6vw !important; }
#confirmation p { line-height:1.2em; font-size:14px; margin:0 0 10px 0; }

.ui-autocomplete { max-width:100%; list-style-type:none; background:#fff; padding-top:3px; }
.ui-autocomplete .ui-menu-item { height:30px; line-height:30px; padding:0 12px; background:#f6f6f6; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; border-radius:4px; margin-bottom:3px; }
.ui-autocomplete .ui-menu-item:hover { background:#F2F6FA; cursor:pointer; }

a[data-action="nouveau-filleul"] { height:40px; line-height:40px; padding:0 20px; text-transform:uppercase; text-decoration:none !important; background:#F2F6FA; border-radius:20px; color:#096884; font-weight:500; margin-bottom:30px; }
a[data-action="nouveau-filleul"] > span.icon { display:inline-block; vertical-align:middle; width:20px; height:20px; line-height:20px; border-radius:10px; border:solid 1px #096884; padding:0; text-align:center; margin-right:10px; }
a[data-action="nouveau-filleul"] { display:none; }
a[data-action="nouveau-filleul"].active { display:inline-block; }

.form-filleul h2 { position:relative; line-height:30px !important; }
a[data-action="annuler-filleul"] { position:absolute; top:0; right:0; height:30px; line-height:30px; width:30px; text-align:center; padding:0; text-transform:uppercase; text-decoration:none !important; border:solid 1px #096884; border-radius:20px; color:#096884; font-weight:500; background:url('../img/croix-copy.svg') top center no-repeat !important; }

.form-filleul { transition:all 0.4s ease; }
#form-filleul2 { height:0; opacity:0; overflow:hidden; padding-top:30px; border-top:solid 1px #a1d315; }
#form-filleul3 { height:0; opacity:0; overflow:hidden; padding-top:30px; border-top:solid 1px #a1d315; }
.form-filleul:not(.active) { margin:0 !important; padding:0 !important; }
.form-filleul.active { height:auto !important; opacity:1 !important; }
.form-filleul > hr { margin:0 !important; }

.form-filleuls { padding-top:30px; border-top:solid 1px #a1d315; }

@media all and (min-width: 769px) {
	
		.mobile { display:none !important; }
		
}

@media all and (max-width: 768px) {
	
		.desktop { display:none !important; }

		main#parrainage .ref-section { margin-bottom:5vw; }
		main#parrainage .container { padding-left:15px; padding-right:15px; }
		main#parrainage h2 { font-size:4.2vw; margin-bottom:8vw; }
		main#parrainage p { font-size:3.6vw; color:#4C4A4B; }
		
		#parrainage-header .container { height:0; padding-bottom:55%; }
		#parrainage-header h1 { font-size:5vw; margin-top:10vw; }
		#parrainage-header h1 > img { height:30vw; }
		#parrainage-header h1 > strong { font-size:6vw; margin-top:-7vw; }
		
		#parrainage-intro h2 { max-width:83%; margin-left:auto; margin-right:auto; }
		#parrainage-intro h2 br { display:none; }
		#parrainage-intro p { max-width:83%; margin-left:auto; margin-right:auto; }
		
		#parrainage-video video { height:60vw; }
		
		div.offres-filleuls > div:not(.illustration) { height:12vw; line-height:12vw; font-size:14px; }
		div.offres-filleuls > div.key:before { width:12vw; height:12vw; margin-left:-6vw; }
		
		#parrainage-etapes { padding-top:10vw; padding-bottom:10vw; }
		ul.etapes { flex-direction:column; }
		ul.etapes > li { position:relative; flex:1; display:flex; margin-bottom:10vw; }
		ul.etapes > li > img { width:18vw; height:auto; margin-left:5vw; }
		ul.etapes > li > p { color:#fff !important; flex:1; text-align:left; padding-left:15px; font-size:3.2vw !important; max-width:67%; align-self:center; margin-bottom:0 !important; }
		ul.etapes > li > p br { /* display:none; */ }
		ul.etapes > li:nth-child(2) > p br { display:none; }
		ul.etapes > li > p strong { display:block; }
		ul.etapes > li > strong { display:none; }
		ul.etapes > li > span.bullet { position:absolute; left:12.5vw; bottom:-5vw; width:3vw; height:3vw; }
		ul.etapes:before { left:14vw; bottom:0; width:1px; height:auto; display:none; }
		ul.etapes > li:before { content:" "; position:absolute; left:14vw; bottom:-7vw; width:2px; height:4vw; background:#a1d315; }
		ul.etapes > li:last-child:before { display:none; }
		
		main#parrainage form { display:block; }
		main#parrainage .form-group { margin-bottom:3vw; }
		main#parrainage .form-group.optin [type="checkbox"] + label { font-size:3vw; padding-left:14vw; padding-top:0; }
		main#parrainage .form-group.optin [type="checkbox"] + label:before { width:10vw; height:10vw; }
		main#parrainage .form-group.optin [type="checkbox"]:checked + label:after { left:1vw; top:1vw; width:8vw; height:8vw; }
		
		#parrainage-filleuls hr { margin:8vw 0; }
		#nouveau-filleul h2 { max-width:80%; margin-left:auto; margin-right:auto; }
		#confirmation img { width:25vw; height:auto; }
		#confirmation h2 { font-size:5vw !important; }
		
}