main#terrains { font-family:'Montserrat', sans-serif; }
main#terrains .ref-section { margin-bottom:30px; }
main#terrains .ref-section > .container { max-width:830px; margin:auto; }
main#terrains .ref-section > .container-fluid { max-width:calc(100% - 180px); /* max-width:1740px !important; */ margin-left:auto; margin-right:auto; }
main#terrains h2 { margin-bottom:30px; color:#0A4850; font-size:1.2vw; line-height:1.3em; }
main#terrains h2 > span { display:block; font-weight:normal !important; font-size:14px; }
main#terrains p { /* margin-top:0; margin-bottom:15px; */ }
main#terrains p.mentions { font-size:11px; line-height:1.2em; }
main#terrains p.mentions a { color:#4c4a4b !important; text-decoration:underline; }

#terrains-header { text-align:center; background:#0a484f; color:#a1d315; background-repeat:no-repeat !important; background-size:cover !important; background-position:center !important; margin-bottom:0 !important; /* background-image:url('<?php echo $fields['header_bg_image']; ?>'); */ }
#terrains-header .container { height:30vw; line-height:30vw; }
#terrains-header h1 { display:inline-block; vertical-align:middle; color:#ffffff; font-weight:normal; line-height:1.4em; font-size:2vw; }
#terrains-header h1 > img { height:10vw; width:auto; margin-top:-5vw; }
#terrains-header h1 > strong { display:block; font-weight:800; font-size:2.4vw; margin-top:-3vw; }

main#terrains #terrains-intro { text-align:center; background:#0A4850; color:#fff; padding-top:40px; padding-bottom:40px; }
main#terrains #terrains-intro h2 { color:#A1D315 !important; margin-bottom:15px; }
main#terrains #terrains-intro > p { font-size:1.3vw; margin-bottom:30px; }
ul.pourquoi-sully { list-style-type:none; padding:0; margin:0; text-align:center; display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr; grid-gap:6%; }
ul.pourquoi-sully > li { color:#fff; text-align:center; }
ul.pourquoi-sully > li img { background:transparent; margin-bottom:15px; }
ul.pourquoi-sully > li p { font-size:1vw; line-height:1.2em; text-align:center; }
ul.pourquoi-sully > li:nth-child(odd) { margin-top:30px; }
.wrapper-slider > ul.wrapper-slider-indicators { display:none; }

main#terrains #terrains-avantages { text-align:center; }
main#terrains #terrains-avantages h3 { max-width:80%; margin:auto; text-align:left; color:#0A4850; font-size:1.2vw; line-height:1.2em; margin-bottom:30px; }
main#terrains #terrains-avantages p:not(.baseline) { max-width:80%; margin:auto; text-align:left; font-size:0.9vw; line-height:1.2em; margin-bottom:30px; text-align:justify; }
main#terrains #terrains-avantages p.baseline { max-width:75%; margin:auto; padding:8px 16px; text-align:left; color:#A1D315; font-size:0.9vw; line-height:1.2em; border-left:solid 2px #0A4850; font-weight:bold; font-style:italic; margin-bottom:30px; }
main#terrains #terrains-avantages .btn-green { background:#0A4850; border-color:#0A4850; }
main#terrains #terrains-avantages .btn-green:hover { border:solid 1px #0A4850; background:#fff !important; color:#0A4850 !important; }
ul.avantages { list-style-type:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr 1fr; grid-gap:5%; margin-bottom:30px; }
ul.avantages > li { position:relative; text-align:center !important; background:#138193; border-radius:10px; height:0; padding:5% 5% 100% 5%; color:#fff; padding-bottom:15%; height:auto; }
ul.avantages > li img { margin-top:10%; }
ul.avantages > li p { max-width:100% !important; margin-top:5% !important; font-size:0.7vw !important; line-height:1.2em; text-align:center !important }
ul.avantages > li p strong { font-size:0.75vw; }
ul.avantages > li span.indice { position:absolute; left:50%; bottom:0; width:2.5vw; height:2.5vw; line-height:2.5vw; text-align:center; margin-left:-1.25vw; font-size:1.2vw; color:#a1d315; background:#fff; border-radius:6px 6px 0 0; } 

main#terrains #terrains-etapes > .container { width:60vw; max-width:950px; margin:0 auto 30px auto; background:#F2F8F8; border-radius:0px; padding:3.125vw; }
main#terrains #terrains-etapes h2 { color:#0A4850; text-align:center; }
div.accordion#etapes h3 { position:relative; padding:2vw 0; text-align:left; color:#096884; font-size:1vw; /* 1.15vw */ }
div.accordion#etapes h3:after { content:" "; position:absolute; top:50%; right:0; width:2vw; height:2vw; margin-top:-1vw; background:transparent url('../images/picto-more.svg') no-repeat; background-size:contain; transition:all 0.3s ease; }
div.accordion#etapes h3.active:after { transform:rotate(180deg); }
div.accordion#etapes h3 > span { color:#A1D315; margin-right:10px; }
div.accordion#etapes p { text-align:justify; margin-bottom:15px; }
div.accordion#etapes > div { font-size:1vw; line-height:1.2em; padding:0 0 3vw 0; }
main#terrains #terrains-etapes p.conclusion { text-align:center; color:#A1D315; margin-top:3vw; }
div.accordion > h3 { cursor:pointer; }
div.accordion > h3:not(.active) { border-bottom:solid 1px #CFDEE0; }
div.accordion > h3.active { color:#A1D315; }
div.accordion > div { transition:all 0.4s ease; max-height:0; padding:0 !important; overflow:hidden; }
div.accordion > div.active { max-height:none; padding:0 0 3vw 0 !important; border-bottom:solid 1px #CFDEE0; } 
div.accordion > div p.note { margin:30px 30px 0px 30px; padding:8px 16px; text-align:left; color:#A1D315; border-left:solid 2px #0A4850; font-weight:bold; font-style:italic; }
		div.accordion#etapes h4 { font-size:1.15vw; color:#096884; margin:0; text-align:center; margin-top:20px; }
		div.accordion#etapes h5 { font-size:1.1vw; color:#A1D315; margin:0 0 15px 0; text-align:center; }
div.accordion#etapes .btn-green { display:inline-block; margin:auto; height:40px; line-height:40px; padding:0 20px; border-radius:20px; border:none; background:#096884; font-weight:bold; color:#fff; text-decoration:none !important; }

.modal-terrain h3 { color:#0C484F; margin-bottom:15px; margin-top:30px; }
.modal-terrain .form-row { display:flex; margin-bottom:15px; }
.modal-terrain .form-row > .form-group { flex:1; margin-right:15px; }
.modal-terrain .form-row > .form-group:last-child { margin-right:0; }
.modal-terrain .form-row > .form-group .form-control { width:100%; font-family:'Montserrat'; font-size:14px; color:#868689; border-bottom:solid 1px #868689; height:34px; }
.modal-terrain .form-row > .form-group textarea.form-control { resize:none; /* height:120px; */ border:solid 1px #868689; height:auto; line-height:1.2em; padding:8px; }
.modal-terrain .form-row > .form-group .form-control::placeholder { font-size:14px; color:#868689; }
.modal-terrain .form-row > .form-group#civilite { max-width:16%; }
.modal-terrain [type="checkbox"] { display:none; }
.modal-terrain [type="checkbox"] + label { position:relative; font-size:11px; color:#707070; line-height:1.2em; padding-left:40px; text-align:left; display:block; }
.modal-terrain [type="checkbox"] + label a { display:block; text-decoration:underline; }
.modal-terrain [type="checkbox"] + label:before { content:" "; position:absolute; left:0px; top:0px; width:30px; height:30px; border:solid 1px #868689; }
.modal-terrain [type="checkbox"]:checked + label:after { content:" "; position:absolute; left:5px; top:5px; width:20px; height:20px; background:#A1D315; }
.modal-terrain .form-row > .form-group#submit { text-align:right; }
.modal-terrain p.mentions { font-size:11px !important; text-align:left !important; color:#707070; line-height:1.2em; letter-spacing:normal !important; }
.SumoSelect { vertical-align:top; }
.SumoSelect > .CaptionCont { width:100%; font-family:'Montserrat'; font-size:14px; color:#868689; border-bottom:solid 1px #868689; border-color:#868689; height:34px; line-height:34px; }
.SumoSelect > .CaptionCont span.placeholder { font-size:14px; color:#868689; }
.form-group { position:relative; }
.form-group .control { position:relative; }
.form-control + label.error {
  display: block;
  font-size: 9px;
  color: red;
  position: absolute;
bottom: -10px; }

.ui-autocomplete { z-index:999999; }

@media all and (min-width: 1921px) { /****** zoom < 100% ******/
		
		/***
			1.2vw = 23px
			1vw = 19px
			0.75vw = 14px
			0.7vw = 13px
		***/
		main#terrains .ref-section > .container-fluid { max-width:1740px !important; }
		#terrains-header .container { height:570px !important; line-height:570px !important; }
		#terrains-header h1 { font-size:36px !important; vertical-align:initial; }
		#terrains-header h1 > strong { font-size:46px !important; }
		main#terrains h2 { font-size:23px !important; }
		ul.pourquoi-sully > li p { font-size:19px !important; }
		ul.avantages > li p { font-size:13px !important; }
		ul.avantages > li p strong { font-size:14px !important; }
		ul.avantages > li span.indice { width:48px !important; height:48px !important; line-height:48px !important; margin-left:-24px !important; font-size:22px !important; }
		main#terrains #terrains-avantages h3 { font-size:23px !important; }
		main#terrains #terrains-avantages p:not(.baseline) { font-size:16px !important; }
		main#terrains #terrains-avantages p.baseline { font-size:16px !important; }
		main#terrains #terrains-etapes > .container { padding:60px !important; }
		div.accordion#etapes h3 { font-size:20px !important; padding:40px 0 !important; }
		div.accordion#etapes h3:after { width:40px !important; height:40px !important; line-height:40px !important; margin-top:-20px !important; }
		div.accordion#etapes > div { font-size:18px !important; }
		div.accordion#etapes > div.active { padding-bottom:60px !important; }
		div.accordion#etapes h4 { font-size:23px !important; }
		div.accordion#etapes h5 { font-size:23px !important; }
		
}

@media all and (max-width: 768px) {
		
		main#terrains h2 { font-size:4.5vw; }
		main#terrains .ref-section > .container { width:100%; max-width:100%; padding-left:6vw; padding-right:6vw; }
		main#terrains .ref-section > .container-fluid { max-width:100%; padding-left:15px; padding-right:15px; }
		
		#terrains-header {  }
		#terrains-header { /* background-image:url('<?php echo $fields['header_bg_image_mob']; ?>'); */ }
		#terrains-header .container { height:86vw; line-height:86vw; }
		#terrains-header h1 { font-size:4vw; margin-top:-10vw; }
		#terrains-header h1 strong { font-size:5vw; }
		
		#terrains-intro { }
		main#terrains #terrains-intro > p { margin-bottom:8vw; }
		main#terrains #terrains-intro .container-fluid > p { font-size:4vw; }
		ul.pourquoi-sully { max-width:50%; overflow:hidden; display:block; margin:0 auto 10vw auto; }
		ul.pourquoi-sully > li { display:none; }
		ul.pourquoi-sully > li:first-child { display:block; }
		ul.pourquoi-sully > li img { margin-bottom:0; }
		ul.pourquoi-sully > li p { font-size:3.5vw; }
		.wrapper-slider { position:relative; width:100vw; margin:auto; padding-bottom:10vw; margin-bottom:10vw; margin-left:-15px; margin-right:-15px; overflow:hidden;  }
		.wrapper-slider > ul.pourquoi-sully { /* position:absolute; left:0; top:0; */ width:400vw; height:100%; max-width:none; font-size:0; transition:all 0.3s ease; margin-bottom:0; text-align:left; }
		.wrapper-slider[data-current="1"] > ul.pourquoi-sully { margin-left:0vw; }
		.wrapper-slider[data-current="2"] > ul.pourquoi-sully { margin-left:-60vw; }
		.wrapper-slider[data-current="3"] > ul.pourquoi-sully { margin-left:-120vw; }
		.wrapper-slider[data-current="4"] > ul.pourquoi-sully { margin-left:-180vw; }
		.wrapper-slider[data-current="5"] > ul.pourquoi-sully { margin-left:-240vw; }
		.wrapper-slider > ul.pourquoi-sully > li { display:inline-block; max-width:50vw; margin-left:5vw; margin-right:5vw; vertical-align:top; }
		.wrapper-slider > ul.pourquoi-sully > li:first-child { margin-left:25vw; }
		.wrapper-slider > ul.pourquoi-sully > li:nth-child(odd) { margin-top:7vw; }
		.wrapper-slider > ul.wrapper-slider-indicators { position:absolute; left:0; right:0; bottom:0; height:10vw; line-height:10vw; }
		.wrapper-slider > ul.wrapper-slider-indicators > li { display:inline-block; vertical-align:middle; width:5vw; height:1.5vw; border-radius:0.75vw; background:#0A383E; }
		.wrapper-slider[data-current="1"] > ul.wrapper-slider-indicators > li:nth-child(1),
		.wrapper-slider[data-current="2"] > ul.wrapper-slider-indicators > li:nth-child(2),
		.wrapper-slider[data-current="3"] > ul.wrapper-slider-indicators > li:nth-child(3),
		.wrapper-slider[data-current="4"] > ul.wrapper-slider-indicators > li:nth-child(4),
		.wrapper-slider[data-current="5"] > ul.wrapper-slider-indicators > li:nth-child(5) { width:15vw; }
		
		
		#terrains-intro .btn-green { width:90%; margin:auto; }
		
		ul.avantages { display:block; }
		ul.avantages > li { display:block; width:100%; padding:5% 5% 16vw 5%; height:auto; margin-bottom:6vw; }
		ul.avantages > li p { font-size:4vw; line-height:1.3em; }
		ul.avantages > li p strong { font-size:4vw; line-height:1.3em; }
		ul.avantages > li span.indice { width:14vw; height:14vw; line-height:14vw; margin-left:-7vw; font-size:5vw; }
		main#terrains #terrains-avantages h3 { max-width:none; font-size:4.5vw; }
		main#terrains #terrains-avantages p:not(.baseline) { max-width:none; font-size:3.5vw !important; }
		main#terrains #terrains-avantages p.baseline { max-width:none; font-size:3.5vw !important; line-height:1.3em; padding:0 0 0 5vw; }
		#terrains-avantages .btn-green { width:100%; margin:auto; }
		
		main#terrains #terrains-etapes > .container { width:auto; max-width:100%; margin-left:2vw; margin-right:2vw; padding:10vw 6vw; }
		div.accordion#etapes h3 { font-size:3.5vw; line-height:1.2em; padding:6vw 10vw 6vw 0; }
		div.accordion#etapes h3:after { width:8vw; height:8vw; margin-top:-4vw; }
		div.accordion#etapes > div { font-size:3.4vw; padding:0 !important; } 
		div.accordion#etapes > div.active { padding:0 0 6vw 0 !important; }
		main#terrains #terrains-etapes p.conclusion { text-align:left; margin-top:5vw; }
		div.accordion#etapes h4 { font-size:3.2vw; }
		div.accordion#etapes h5 { font-size:3vw; }
		
		.modal-terrain .popup-contact { padding-left:15px; padding-right:15px; }
		.modal-terrain .form-row { display:block; }
		.modal-terrain .form-row .form-group { position:relative; display:block; max-width:100% !important; margin:0 0 10px 0; }
		.modal-terrain .form-row .form-group label.error { display:block; width:100%; text-align:right; color:#ff0000; font-size:11px; }
		.modal-terrain .form-row .form-group#optin { margin-bottom:5vw; }
		.modal-terrain .form-row .form-group#submit { margin-bottom:5vw; }
		.modal-terrain .btn-green { width:90%; margin:auto; display:block; }
		.modal-terrain p.mentions { font-size:10px; }
		
}