/*
Theme Name: Biesheim - Site officiel de la ville de Biesheim, Haut-Rhin
Theme URI: https://www.biesheim.fr
Author: Mars Rouge
Author URI: https://www.marsrouge.com/
Version: 1.0
*/

@CHARSET "UTF-8";
	
* {box-sizing:border-box; padding:0;  margin:0; -webkit-backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; outline:none;}
:root {
	--noir:#000000;
	--gris:#cccccc;
	--bleu:#464a79;
	--vert:#6bd166;
	--blanc:#ffffff;
	--menu:120px;
	--stuff:140px;
	--menu-btn:290px;
	--lit-pad:20px;
	--med-pad:90px;
	--int-pad:40px;
	--big-pad:40px;
	} 

body {font-family: 'Source Sans Pro', sans-serif; font-size:1rem; color:var(--noir); line-height: 1.5; font-weight:inherit; overflow-x: hidden; webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {padding: 0; margin: 0;}

h1, h2, h3 {;}
h1, .title--h1 h2, .title--h1 h3 {font-size: 2rem; margin-bottom:50px; font-weight:900; line-height: 1.1;}
h2, .home--agenda-content h3, .home--mag p, .liste-stuff--marche h3 {line-height: 1.3; margin-bottom:3rem; font-weight:400;}
h2, .introduction, .search--input, .home--agenda-content h3, .home--mag p, .liste-stuff--marche h3, .cd-h-timeline__event-description.subtitle {font-size:1.3rem;}
h3 {font-size:1.5rem; margin-bottom:2rem;}

.cookiesdirective {display:none!important;}

a {color:var(--noir); outline:none; webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; text-decoration:none;}
a:focus, a:active {outline: none;}
a:link, a:visited, a:hover, a:active, a:focus, button {outline:0;}
:focus, :hover {-webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
li.current_page_item a:before {width:100%;}

p {display:block;}
li {list-style-type:none;}
sup {font-size: 70%; line-height: 0; position: relative; margin-left:.2rem;}
strong {font-weight:700;}

.small {font-weight:600; display:block; margin-bottom:1rem; font-size:1rem;}
.bleu {color:var(--bleu);}
.bg--bleu {background: var(--bleu);}
.vert {color:var(--vert);}
.center {text-align:center;}
.right {text-align:right;}
.sticky {position: -webkit-sticky; position: sticky; top:6rem;}
.hidden {overflow:hidden; pointer-events:none;}
.underline a {color:var(--noir); text-decoration: none; background-image: linear-gradient(var(--vert), var(--vert)); background-position: bottom left; background-repeat: no-repeat; 
background-size: 100% 2px; webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; -o-transition: all .2s; -ms-transition: all .2s; padding: .2rem 0;}
.underline a:hover {color:var(--noir); background-size: 100% 40%;}
.displayn {display:none!important;}
.displayb {display:block!important;}
.displayi {display:inline-block!important;}
.mobile {display:none;}
.grecaptcha-badge{display:none;}
.error {margin-top: var(--med-pad); max-width:100%;}

.title--h1 span {color:var(--vert);}
.breadcrumb, .alerte {display:none;}


/* COULEURS */

.st1 {fill:var(--vert);}
.st2 {fill:var(--bleu);}


/* GENERAL */

.grid {display:grid;}
.col-1-2 {grid-template-columns: 1fr;}
.col-1-3 {grid-template-columns: 1fr;}
.col-1-4 {grid-template-columns: 1fr 2fr;}
.col-2 {grid-template-columns: 1fr;}
.col-2-1 {grid-template-columns: 2fr 1fr;}
.col-3 {grid-template-columns: 1fr 1fr 1fr;}
.col-3-2 {grid-template-columns: 3fr 2fr;}
.col-3-4 {grid-template-columns: 3fr 4fr;}
.col-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.col-4-1 {grid-template-columns: 4fr 1fr;}
.col-4-3 {grid-template-columns: 4fr 3fr;}
.col-5 {grid-template-columns:repeat(5, 1fr);}
.col-6 {grid-template-columns:repeat(6, 1fr);}

.btn {display:none;}
.btn--quicklinks, .quicklinks  {display:none;}
.share {display:none;}

.st-content .liste-stuff li:first-child {margin-top:3rem;}
.liste-stuff li {border-bottom: 1px solid rgba(0,0,0,.1)!important; border-left:1px solid rgba(0,0,0,.1)!important; border-right: 1px solid rgba(0,0,0,.1)!important; margin-left:0!important;}
ul.liste-stuff li:nth-child(1) a, .wrapper-sides ul.liste-stuff > li:nth-child(2) {border-top:1px solid rgba(0,0,0,.1)!important;}
.st-accordion .liste-stuff li {margin-bottom:0!important;}
.liste-stuff li:before {content:none!important;}
.liste-stuff a, .st-content--img-legende {padding:2rem 0!important; font-size:.8rem; text-transform:uppercase; font-weight: 700; letter-spacing: .03rem; display:block; position:relative; width: 100%; height:auto!important; background-image:none!important;}
.liste-stuff a:before {content:''; background:rgba(0,0,0,.1); position:absolute; width:0%; height:100%; bottom:0; left:0; transition:.5s;}
.liste-stuff a:hover::before {width:100%;}
.liste-stuff span {margin-left:80px; transition:.3s;}
.liste-stuff a:hover span {margin-left:100px;}
.wrapper-sides .liste-stuff li:last-child {margin-bottom:var(--big-pad);}
.article--wrapper .liste-stuff li:first-child, .content--med .liste-stuff li:first-child {margin-top:var(--med-pad);}

.liste-stuff--icon {width:40px; height:40px; display:inline-block;
position: absolute; top: 50%; transform: translateY(-50%);}
.liste-stuff--doc .liste-stuff--icon {background:url('http://www.biesheim.marsrouge/wp-content/themes/biesheim/assets/img/layout/icon-liste-doc.svg');}
.liste-stuff--link .liste-stuff--icon {background:url('http://www.biesheim.marsrouge/wp-content/themes/biesheim/assets/img/layout/icon-liste-link.svg');}
ul.liste-stuff--link > li a span:nth-child(1) {color: var(--vert);}
ul.liste-stuff--link > li a span:nth-child(2) {margin-left:0; }
.liste-stuff .grid {grid-gap:2rem; width:70%;}
.liste-stuff .grid.col-1-4 {width:100%;}
ul.liste-stuff--link > li a:hover span:nth-child(2) {margin-left:20px;}

.liste-stuff > li > a > h3 {text-transform:none!important; letter-spacing:0!important; margin-bottom:1rem; margin-left:80px; transition:.2s;}
.liste-stuff > li > a:hover > h3 {margin-left:100px;}
.liste-stuff--marche > li a span {margin-left:0!important; color:var(--vert);}
.liste-stuff--marche > li a:hover span {color:var(--noir);}
.liste-stuff--marche > li a span:nth-child(1) {margin-left:80px!important;}
.liste-stuff--marche > li a:hover span:nth-child(1) {margin-left:100px!important;}
.liste-stuff--marche > li a:hover span {margin-left:20px!important;}

.page--thumb {height:200px;}
.page--thumb-img {margin-top:-1rem; height:200px; width:100%; opacity:.8; background-size: cover; background-position:center;}
.wrapper--introduction .page--thumb {padding:0 0 var(--med-pad) 0;}


/* FORM */

input {border-radius:0; -webkit-appearance: none;}
textarea {resize: none;}
.input {position: relative; z-index: 1; display: inline-block; width:100%; vertical-align: top; color:var(--noir); margin-bottom:3rem;}
.input__field {position: relative; display: block; float: right; padding: 0.8em; width: 60%; border: none; border-radius: 0; background: transparent; color: #aaa; font-weight: 400; font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none;}
.input__field:focus, input:focus {outline: none!important;}
.input__label {display: inline-block; float: right; padding: 0 1em; color:var(--noir); font-size: 70.25%; 
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {position: relative; display: block; padding: 1.5em 0; width: 100%;}
.input__field--fx {width: 100%; background: transparent; padding: 1.5rem 0; color:var(--noir); font-weight: inherit; font-size: inherit; font-family: inherit;}
.input__label--fx {width: 100%; position: absolute; text-align: left; font-size: inherit; padding:1rem 0; pointer-events: none;}

.input__label--fx::after {content: ''; position: absolute; width: 100%; height: 3px; background:var(--noir); left: 0; top: 100%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s;}
.input__label-content--fx {padding: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: -webkit-transform 0.3s, color 0.3s; transition: transform 0.3s, color 0.3s;}
.input__field--fx:focus + .input__label--fx::after, .input--filled .input__label--fx::after {background:var(--vert);}
.input__field--fx:focus + .input__label--fx .input__label-content--fx,
.input--filled .input__label--fx .input__label-content--fx {color:var(--vert); -webkit-transform: translate3d(0, -2rem, 0) scale3d(.7, .7, 1); transform: translate3d(0, -2rem, 0) scale3d(.7, .7, 1);}

.textarea__label--fx {width: 100%; position: absolute; text-align: left; font-size: inherit; padding:1rem 0; pointer-events: none;}
.textarea__label--fx::after {content: ''; position: absolute; width: 100%; height: 3px; background:var(--noir); left: 0; top: 10rem; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s;}
.textarea__field--fx {width: 100%; background: transparent; padding: 1.5rem 0; height: 10rem;color:var(--noir); font-weight: inherit; font-size: inherit; font-family: inherit;}
.textarea__field--fx:focus + .textarea__label--fx::after, .input--filled .input__label--fx::after {background:var(--vert);}
.textarea__field--fx:focus + .textarea__label--fx .input__label-content--fx,
.input--filled .textarea__label--fx .input__label-content--fx {color:var(--vert); -webkit-transform: translate3d(0, -2rem, 0) scale3d(.7, .7, 1); transform: translate3d(0, -2rem, 0) scale3d(.7, .7, 1);}

input::placeholder {color:white;}
::-webkit-input-placeholder {opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s;}
:-moz-placeholder {opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s;}
::-moz-placeholder {opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s;}
:-ms-input-placeholder {opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s;}
::placeholder {opacity: 1; transition: opacity .5s;}

*:focus::-webkit-input-placeholder {opacity: 0;}
*:focus:-moz-placeholder {opacity: 0;}
*:focus::-moz-placeholder {opacity: 0;}
*:focus:-ms-input-placeholder {opacity: 0;}
*:focus::placeholder {opacity: 0;}


/* HOMEPAGE - LETTERS */

.letter {position:absolute; width:25vw; pointer-events:none; opacity:0;}
.letter-fx {stroke-dasharray:250; stroke-dashoffset:0; opacity:1; -webkit-animation: dash 3s linear forwards; animation: dash 3s linear forwards; -moz-animation: dash 3s linear forwards;}
@-webkit-keyframes dash { from {stroke-dashoffset:250;} to {stroke-dashoffset:0;}}
@keyframes dash { from {stroke-dashoffset:250;} to {stroke-dashoffset:0;}}
.letter svg {fill:transparent; stroke-width:.1; stroke-miterlimit:.1; stroke:var(--vert); }
.letter-b {left:-60px; top:15vh;}
.letter-i {top: 50vh; z-index: 1; right: 35vw; mix-blend-mode: multiply;}
.letter-e {bottom:30vh; right:100px;}
.letter-s {top: -10vh; left: -100px; mix-blend-mode: color-burn;}
.letter-h {bottom: 25vh; right: -100px; mix-blend-mode: color-burn;}
.letter-ee {left: 10vw; top:60vh;}
.letter-ii {top: 20vh; z-index: 1; right: 10vw; mix-blend-mode: multiply;}
.letter-m {top: 80vh; z-index: 1; left: -50px; mix-blend-mode: color-burn;  width:30vw;}


/* HOMEPAGE - SLIDER */

.slider {padding-right:var(--med-pad); height:calc(100vh - var(--menu)); text-align:center; position:relative;}
.slider--title-h1 h1, .home--search input {font-size: 1.7rem;}
.slider--title-h1 {width:calc(100% - var(--med-pad)); position:relative;}
.slider--title-h1 h1 {font-weight:400; position:absolute; top:14vh; text-align:center; z-index:1; color:var(--blanc); margin-bottom:0; transform: translateX(50%); right: 50%;}
.slideshow {background:var(--bleu);}
.slideshow .slick-slide {margin: 0!important;}
.slider--slide {height:calc(100vh - var(--menu)); width: 100%; position:relative; overflow:hidden;}
.slider--img {height:100%; width:100%; position:relative; background-size: cover; background-position: 50% 50%; opacity:.4; transform:scale(1.3); transition:.5s;}
.slide--title, .slide--title-word {font-weight:700; text-transform:uppercase; font-size:7rem; margin-bottom:0; z-index:1; color:var(--blanc);}
.slide--title {position:absolute; text-align:left; width:calc(100% - 27vw); top:16vh; margin-left:27vw;}
.slide--title-word {position:absolute; top:27vh; margin-right:27vw; text-align:right; width:calc(100% - 27vw); opacity:0; transition:.4s; transform:translateY(3rem);}

.slider--slide.slick-current .slider--img {transform:scale(1);}
.slider--slide.slick-current .slide--title-word {transform:translateY(0); opacity:1;}

.menu--rapide {position:absolute; bottom:0; width:calc(100% - var(--med-pad)); height:9vw; z-index:2;}
.menu--rapide-wrapper {width:54vw; margin:auto; position:relative; background: var(--bleu);}

.menu--rapide span {line-height:1.3; margin-top:1rem; font-size: .8rem; text-transform: uppercase; font-weight: 700; letter-spacing: .03rem; transition:.5s; transform-style: preserve-3d;}
.menu--rapide svg {width:70%; margin-bottom:.5rem; transition:.5s; transform-style: preserve-3d;}

.menu--rapide-link {background:var(--bleu); text-align:center; color:var(--blanc); height:9vw; width:9vw; margin:0; fill:var(--blanc); padding:1.5rem 2rem 0 2rem; position:relative; transition:.4s; transform-style: preserve-3d;}
.menu--rapide-link:before {content:''; position:absolute; height:0; width:100%; right:0; bottom:0; background:var(--vert); transition:.3s; z-index:-1;}
.menu--rapide-link:hover::before {height:100%;}

.home--search {position:absolute; width:calc(100% - var(--med-pad)); bottom:31vh;}
.home--search-wrapper {width:30vw; margin:auto; position:relative;}
.home--search input {width:100%; background: transparent; padding: 1.5rem 0; color:var(--blanc); font-weight: inherit; font-family: inherit; border:0; border-bottom:3px solid var(--blanc); transition:.3s;}
.home--search input:focus, .home--search input:active {border-bottom:3px solid var(--vert); outline:none;}
.home--search button {border:0; position:absolute; top:1.5rem; right:0; background:transparent; margin:0; padding:0; cursor:pointer; width:37px; height:37px; transition:.3s; transform:scale(.9); transform-style: preserve-3d;}
.home--search svg {fill:var(--blanc); width:100%;}
.home--search button:hover {transform:scale(1.1);}

.bloc--w-bd {position:absolute; height:9vw; background:var(--blanc); right:0; bottom:0; width:50vw; z-index:1;}


/* HOMEPAGE - OTHERS STUFF */

.home--wrapper--galerie .btn--wrapper, .home--agenda .btn--wrapper {padding-top:var(--med-pad);}

.home--title span {display:block; line-height: .9;}
.item .small span {margin:0 1rem;}
.home--actu.liste {grid-gap: var(--int-pad);}

.home--agenda {padding-left:var(--big-pad); width:40vw; position: relative;}
.home--agenda-slide {overflow:hidden; border: 3px solid var(--bleu);}
.home--agenda-slide .slick-slide {margin:0!important;}
.home--agenda-item {width:100%;}

.home--agenda-slide.bg--bleu {background:linear-gradient(to bottom, var(--blanc) 250px, var(--bleu) 250px);}
.home--agenda .galerie--nav {right: 2rem; left:auto; margin-top:0; top: 5.5rem;}
.home--agenda .galerie--nav svg {display:block!important;}
.home--agenda-content {color:var(--blanc);}
.home--agenda-content .home--agenda-img-wrap {overflow:hidden; background:var(--bleu); height:330px; width:calc(100% - 4rem); margin-right:4rem; margin-top: -4rem;}
.home--agenda-content .home--agenda-img {width:100%; height:100%; background-size: cover; background-position: 50% 0%; will-change: transform; transition: .5s; backface-visibility: hidden; transform:scale(1.1);}
.home--agenda-date {color:var(--noir); transition:0; transform:none!important;}
.home--agenda-content .small {margin-bottom:0; padding: 3rem 0 7rem 4rem; transform:translateY(-1rem); opacity:0; transition:.4s;}
.home--agenda-wrapper {padding:3rem 3rem 3rem 4rem;}
.home--agenda-wrapper h3 {margin-bottom:2rem; transform:translateY(-1rem); opacity:0; transition:.5s;}
.home--agenda-wrapper p, .home--agenda-wrapper ul {margin-bottom:2rem; transform:translateY(1rem); opacity:0; transition:.4s;}  
.home--agenda-wrapper a, .home--agenda-wrapper a:hover, .home--agenda-wrapper a:focus {color:var(--blanc);}
.home--agenda-wrapper ul {margin-top:2rem; font-size:.9rem;}
.home--agenda-wrapper li {margin-bottom:.5rem!important; border-bottom:0; margin-left:1.5rem; overflow:inherit; position:relative;}
.home--agenda-wrapper li::before {top:.55rem!important;}
.home--agenda-wrapper {font-size:1rem;} 
.home--agenda-wrapper .btn--wrapper {padding-top:0!important;}
.home--agenda-wrapper .btn {margin-top:3rem;}

.home--agenda-content.slick-current h3, .home--agenda-content.slick-current p, .home--agenda-content.slick-current ul, .home--agenda-content.slick-current .btn, .home--agenda-content.slick-current .small {transform:translateY(0); opacity:1;}
.home--agenda-content.slick-current .home--agenda-img {transform:scale(1);}

.home--wrapper--galerie {padding-top:var(--med-pad);}
.home--wrapper--galerie .galerie--nav {left: calc(30vw - 87px);}
.home--slide-culture .item {width:40vw;}
.home--slide-culture .slick-slide img {width:auto;}

.home--biesheim {background-size: cover; background-position: 50% 0%;}
.home--biesheim .title--h1 h2 {color:var(--blanc); width: 75%; text-align:left;}

.home--mag {padding:calc(var(--big-pad) + var(--big-pad)) 0 var(--big-pad) 0; position:relative;}
.home--mag img {width:100%;}
.home--mag.grid {grid-gap:var(--med-pad);}
.home--mag .title--h1 h2 {background: var(--blanc); padding: 0 0 var(--med-pad) var(--med-pad); text-align: left; margin-top: -8rem; margin-left: -40%; margin-bottom:0;}
.home--mag p {margin-bottom:0; margin-top:-10px;}
.home--mag .btn--wrapper {margin-top: var(--med-pad);}


/* CONTAINER */

.container {width:100%;}
.content, .content--home {padding-top:0;}
.content {animation: 1.2s .5s ease bar;}
@-webkit-keyframes bar {0% {margin-top:100vh; opacity:0;} 100% {margin-top:0vh; opacity:1;}}

.wrapper {padding:50px 0;}
.wrapper-bot-top-med {padding:var(--med-pad) 0;}
.wrapper-bot-top-big {padding:var(--big-pad) 0;}
.wrapper-top-med {padding:var(--med-pad) 0 0 0;}
.wrapper-bot-med {padding:0 0 var(--med-pad) 0;}
.wrapper-no-top {padding:0 0 50px 0;}
.wrapper-no-bot {padding:var(--big-pad) 0 0 0;}
.wrapper-no-top-no-bot {padding:0 0;}
.wrapper-right {padding-right:0;}
.wrapper-big-right {padding-right:0;}
.wrapper-med {padding:var(--med-pad) 0;}
.wrapper-right {padding-right:0;}
.wrapper-big {padding:var(--big-pad) 0;}
.wrapper-med-solo-top {padding-top:var(--med-pad)!important;}
.wrapper-big-solo-top {padding-top:var(--big-pad); position:relative;}
.wrapper-sides {padding:0 var(--big-pad);}
.wrapper-introduction {padding:50px 50px 0 50px; text-align:center;}
.wrapper-introduction .title--h1 {text-align:center; padding: 0;}
.title--h1 h1 {display:inline-block;}

.introduction {line-height:1.5; width:100%; margin:0 auto;}
.contact--form .introduction {width:100%;}

.content--med {width:70vw;}


/* MENU*/

.headroom {display:none;}

.menu--wrapper-btn {position:absolute; right:0; top:0; height: 100%; width:290px; background:var(--blanc); border-bottom:1px solid rgba(0,0,0,.1); z-index:20;}
.nav--close {position:absolute; top:0; right:0; width:290px; height:120px; display:block; opacity:0; background:var(--blanc); padding: 0 var(--med-pad) 0 var(--lit-pad); cursor:pointer; border-bottom:1px solid rgba(0,0,0,.1);}

.menu--search {position:absolute; right:0; top:0; height: 100%; width:130px; padding:0 var(--lit-pad) 0 var(--lit-pad); line-height:var(--menu); border-right:1px solid rgba(0,0,0,.1); border-left:1px solid rgba(0,0,0,.1); height:100%; position:absolute; cursor:pointer;}
.menu--search svg {width: 40px; top: 50%; left:50%; transform: translate(-50%,-50%); position: absolute; fill: var(--bleu);}
.menu--btn span, .nav-close span, .menu--icon, .menu--search, .menu--btn, .nav-close {display:inline-block;}
.menu--btn span, .nav--close span {font-size:1.2rem; font-weight:600; bottom: 53px; margin-right: 15px; position:relative;}
.menu--btn {position:relative; overflow:hidden; cursor: pointer; width:100%; height:100%; padding:0 var(--med-pad) 0 var(--lit-pad);}
.menu--btn:before, .nav--close:before, .menu--search:before, .menu--stuff-item:before, .menu--stuff-item:before, .menu--stuff-item-follow:before, .mobile--stuff a:before {content:''; position:absolute; left:0; bottom:0; background:rgba(0,0,0,.1); width:100%; height:0%; transition:.2s;}
.menu--stuff .menu--stuff-item:before {z-index:-1;}
.menu--btn:hover::before, .nav--close:hover::before, .menu--search:hover::before, .menu--stuff-item:hover::before, .menu--stuff-item-follow:hover::before, .mobile--stuff a:hover::before {height:100%;}

.menu--icon {transition: all 0.17s; width:50px; height:100%; position: relative; top: 50%; transform: translateY(-50%);}
.menu_part {width: 19px; height: 3px; position: absolute; background:var(--vert); right: 0; margin: auto; left: 0; transition: all 0.17s cubic-bezier(0.5, 0, 0.1, 0.8);}
.menu_part:nth-of-type(1) {top: calc(50% - ((8px)) + -6px); width: 100%;}
.menu_part:nth-of-type(2) {top: calc(50% - ((8px)) + 7px); width: calc(100% - 10px); right:10px;}
.menu_part:nth-of-type(3) {top: calc(50% - ((8px)) + 20px); width: calc(100% - 25px); left:25px;}
.menu--btn:hover .menu_part:nth-of-type(2) {width:100%; right: 0;}
.menu--btn:hover .menu_part:nth-of-type(3) {width:100%; left: 0;}
.menu-part-1 {transform: rotate(45deg)!important; width: 90% !important; right:10px; top:50%!important;}
.menu-part-2 {transform: rotate(-45deg)!important; width: 90% !important; top:50%!important;}

.zindex {z-index:50!important;}
.menu {position: fixed; right: 0; top:0; height:100vh; width: 100%; z-index:50;}
.js .menu, .menu__inner, .menu--stuff {pointer-events: none!important;}
.js .menu--open, .js .menu--open .menu li, .js .menu--open .menu--inner {pointer-events: visible!important;}
.menu__inner {position: absolute; top:0; left:0; width:100%; height:100%; list-style-type: none; overflow: hidden; background:var(--blanc)}
.menu__item {padding: 0.15em;}
.js .menu__item {transform: translate3d(13em,0,0); transition: transform 0s 0.4s;}
.menu--open .nav--close {opacity:1; transform:translateX(0px);}
.menu--open .menu__item {opacity: 1; transform: translate3d(0,0,0); transition: opacity 0.4s 0.135s, transform 0.4s 0.135s cubic-bezier(0.645, 0.045, 0.355, 1);}
.menu--open .menu__item:nth-child(3) {transition-delay: 0.135s;}
.menu--open .menu__item:nth-child(2) {transition-delay: 0.165s;}
.menu--open .menu__item:nth-child(1) {transition-delay: 0.195s;}
.nav--close-ef {transition:.3s; transform:translateX(-20px);}

.menu--content {padding:0 var(--big-pad); margin-top:var(--big-pad);}
.menu--content a {position:relative;}
.menu--content li:first-child a:before {content:none;}
.menu--content a:before {content:''; position:absolute; background:var(--vert); height:40%; width:0; bottom:0; left:0; transition:.3s; z-index:-1;}
.menu--content a:hover::before {width:100%;}
.menu li {font-size:1.3rem; margin-bottom: .3vw;}
.menu li:first-child a {font-size:3rem; font-weight:900; color:var(--vert);}
.menu .underline li:first-child a {background-size:100% 0px!important;}

.menu--stuff {border-top:1px solid rgba(0,0,0,.1); width:100%; position:absolute; bottom:0; left:0; height:var(--stuff); line-height:var(--stuff); transition:.5s; transform:translateY(120px); transition-delay: 0.195s;}
.menu--stuff-item {border-left:1px solid rgba(0,0,0,.1); display:inline-block; position:relative; float:right; height:var(--stuff);}
.menu--open .menu--stuff {transform:translateY(0px); pointer-events:auto!important;}
.menu--stuff-item-follow {width:var(--stuff); text-align:center;}
.menu--stuff-item-nl {z-index:1; padding:0 var(--lit-pad);}
.menu--stuff-item svg {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.menu--stuff-item-nl .input {width:300px; vertical-align: middle; margin-bottom:0;}
.menu--stuff-item-nl .input__label--fx {padding: 1.5rem 0; height: 65px;}
.menu--stuff-item-nl .input__label-content--fx {margin-top: -60px;}
.menu--stuff-item-nl .input__field--fx:focus + .input__label--fx .input__label-content--fx,
.menu--stuff-item-nl .input--filled .input__label--fx .input__label-content--fx {color:var(--vert); -webkit-transform: translate3d(0, -1rem, 0) scale3d(.7, .7, 1); transform: translate3d(0, -1rem, 0) scale3d(.7, .7, 1);}

.menu--stuff-item .btn {display:inline; margin-left:2rem; cursor:pointer;}
.menu--stuff-item .btn:hover {background:var(--bleu);}
.menu--stuff-item .btn:before {content:none;}
.menu--stuff-item .btn--wrapper {display:inline-block;}

.menu--hidden {overflow:hidden;} 


/* MENU -- RECHERCHE */

.search {margin-left:320px; width: calc(100% - 610px); height:var(--menu); position: fixed; top: 0; left: 0; z-index: 110;}
.js .search {pointer-events: none;}
.js .search--open {pointer-events: visible;}

.search--inner {position: absolute; width:100%; height: 100%; min-height:var(--menu); top: 0; left: 0; color:var(--blanc); background: var(--vert);}
.search--input, .search--action, .search--close {display:inline-block; position:relative;}
.search--action, .search--close {height: 100%; width:130px; line-height:var(--menu); position:absolute; right:0; border-left:1px solid #55c44f!important; text-align:center; cursor:pointer;}
.search--action:before, .search--close:before {content:''; position:absolute; left:0; bottom:0; background:#55c44f; width:100%; height:0%; transition:.2s;}
.search--action:hover::before, .search--close:hover::before {height:100%;}
.search--action {right:130px;}
.search--inner button {border: 0; background: transparent;}
.search--action svg {position:absolute; top:50%; left:50%; width: 40px; line-height:var(--menu); transform: translate(-50%,-50%); fill: var(--blanc);}
.search--close .menu-part-1, .search--close .menu-part-2 {background:var(--blanc);}

.search--input {width:calc(100% - 260px); padding:0 0 0 var(--lit-pad); margin:0; height:100%; border:0; color:var(--blanc); background:transparent;}
.search--input:hover, .search--input:focus {border:0!important;}


/* MENU - MODAL */

.modal {display:none;}
.modal--open {pointer-events: visible;}
.modal__inner {color: var(--noir); background: var(--blanc); position: relative;}
.modal__overlay {z-index:10; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background: rgba(38,50,108,.9); opacity: 0; pointer-events: none; transition: opacity 0.4s;}
.modal--open + .modal__overlay {pointer-events: visible; opacity: 1;}
.modal h3 {line-height: 1; padding: 2.5em; margin-bottom:0;}
.modal .btn--modal-close {padding:1rem; top:-10px; right:-40px; transition:.3s; height: 80px; width: 80px; background:var(--vert); border-radius:50%; position:absolute; text-align:center; cursor:pointer; opacity:0;}
.modal .menu_part {background: var(--blanc);}
.modal .menu--icon {width:40px;}
.modal--open .btn--modal-close {opacity:1; top:-40px;}
.btn--modal-close-ef {transition-delay:.6s!important;}
.modal--open .btn--modal-close:hover {background:var(--bleu); transform:rotate(90deg);}
.modal__share {border-top: 1px solid rgba(0,0,0,.1);}
.modal__share .menu--stuff-item {float:none; width:100%;}
.modal__share span {opacity:0; color:var(--bleu); font-size: .8rem; position:absolute; width:100%; left:0; bottom:1.5rem; transition:.3s;}
.modal__share .menu--stuff-item:hover span {opacity:1; bottom:1rem;}


/* LISTE BLOCS */

.page--list, .liste.wrapper {display:none;}
.item {position:relative;}
.item h2 {transition:.3s;}
.item--img-wrap {--aspect-ratio: 1000/800; overflow: hidden; width: 100%; padding-bottom: calc(100% / (var(--aspect-ratio))); position:relative; background:var(--bleu);}
.item--img {width:100%; height:100%; background-size: cover; background-position: 50% 0%; will-change: transform; position:absolute; transition: .6s; opacity:.8; backface-visibility: hidden;}
.item--content {bottom:0; background:var(--blanc); padding:50px 0; position:relative; width:100%;}
.item--link {margin:0; display:inline-block; line-height:1; overflow: hidden;}
.item--icon img {transform: translateX(-1rem); transition: .3s;}
.item:hover .item--icon img {transform:translateX(0rem);}
.item:hover h2 {color:var(--vert);}
.item:hover .item--img {transform:scale(1.05); opacity:1;}
.item .small {color:var(--vert); margin-bottom:.5rem;}
.page--list .item {display:none;}
.page--list .item:nth-child(1), .page--list .item:nth-child(2) {display:block;}


/* ARTICLE */

.article--thumb {display:none;}
.article--wrapper {padding:var(--int-pad) 0 0 var(--big-pad); background:var(--blanc); position:relative;}
.article--wrapper .wrapper-introduction {padding:initial; text-align: left; margin-right:0;}
.article--wrapper .title--h1 {text-align: left; font-weight:700; font-size: 2rem; padding:0;}
.article--wrapper .introduction {width:100%; margin: initial; margin-bottom:var(--med-pad);}
.article--wrapper .st-accordion {margin-top:var(--med-pad);} 

.article .share {right:70px; top: -40px;}
.wrapper-introduction .share {right:var(--med-pad);}

.submenu {display:none;}

.article--container h2, .contact h2, .cd-h-timeline__event-title {font-weight:700; margin-bottom:2rem; margin-top:4rem; color:var(--vert);}
.article--container h3 {margin-bottom:1rem;}
.article--container ul {margin-bottom:3rem; margin-left:3rem;}
.article--container.btn--wrapper .btn {margin:0 1rem;}
.article--container.btn--wrapper .btn:first-child {margin-top:var(--med-pad);}


/* CONTENU CONSEIL MUNICIPAL */

.maire .col-2:nth-child(2) {border:0;}.maire .maire--content {padding-top:50px;}
.maire .st-accordion {margin-top:0; border-top:0; border-bottom:0; margin-left:0; margin-right:0; width:100%;}
.maire .small {color: var(--vert); margin-bottom:.5rem;}
.maire .st-accordion ul li ul {border-left: 5px solid var(--vert); padding-left: 1rem;}
.maire .st-accordion ul li {border-bottom:0;}
.maire .st-accordion ul li ul li {border-bottom:0;}
.maire .st-accordion ul li:first-child {border-top:0;}
.maire .maire--content p  {margin-bottom:2rem;}
.maire .maire--content h2 {font-size:3rem; font-weight:700;}
.maire--thumb-img {width:100%; height:400px; background-size: auto; padding: 0 !important; background-size: cover; background-position: 50%;}
.maire--signature {text-align:right;}
.maire--signature img {width:200px;}

.adjoint.item {margin-bottom:50px;}
.adjoint .item--img-wrap {--aspect-ratio: 1000/700;} 
.adjoint .item--img {background-size: auto; background-size: cover; opacity:1; background-position: 50% 20%;}
.adjoint .item--content {position: relative;}
.adjoint .small {margin-bottom:.5rem; position: initial;}
.adjoint .description {margin-bottom:2rem;}
.adjoint h2 {margin-bottom:2rem;}
.adjoint p {margin-bottom:2rem;}


/* CONTENU - SERVICES MUNICIPAUX */

.services--membres {padding-top:3rem;}
.services--membres.grid {grid-gap:3rem;}
.services--membres .st-content--img-legende {padding:1rem 0 0 0!important;}


/* CONTENU AGENDA + PAGE INFOS ET ACCORDEONS */

.st-accordion--img .small {margin-bottom: .5rem; color:var(--vert);}
.st-accordion--img .grid {grid-gap:var(--med-pad);}
.st-accordion--img .article--container.btn--wrapper .btn:first-child, .adjoint .article--container.btn--wrapper .btn:first-child {margin-top:3rem;}
img.st-content--img {width:50%;}
.st-content--img-legende {text-align: left;}
.agenda ul li:nth-child(1), .agenda ul li:nth-child(2) {display:none;}
.agenda ul li ul li:nth-child(1), .agenda ul li ul li:nth-child(2) {display:block;}

.liste--logos {text-align:center; margin-top:2rem!important;}
.liste--logos li {display:inline-block; margin:1.5rem!important; border:0!important; height: 70px;}
.liste--logos li a {padding:0!important;}
.liste--logos img {opacity:.7; transition:.3s;}
.liste--logos li:hover img {opacity:1;}

/* CONTENU NOUS JOINDRE */

.contact h2 {margin-top:2rem;}
.contact h3 {margin-bottom:1rem;}
ul.contact--list, .contact .btn--wrapper {margin-bottom:3rem;}
.contact .btn--wrapper {margin-top:3rem;}
.contact--list li:before {content:none!important;}
.article--container.contact--list li {margin-left: 0!important;}


/* FOOTER - RESTONS CONNECTES */

.rc {width:100%;}
.rc--content {border:3px solid var(--bleu);}
.rc--img {width:100%; height:calc(100% - var(--med-pad) - var(--int-pad)); bottom:var(--med-pad); position:absolute; background:url('http://www.biesheim.marsrouge/wp-content/themes/biesheim/assets/img/layout/footer-image.jpg'); padding:0!important; background-size: cover; background-position: 0% 100%;}

.rc--content-img, .newsletter {padding:0 var(--med-pad) var(--med-pad) var(--med-pad);}
.rc--content-img {position:relative;}
.rc .col-3-4 .small {height:var(--int-pad); line-height:var(--int-pad); margin-bottom:0;}
.rc .col-3-4 .newsletter {padding-top:var(--int-pad); padding-left:calc(var(--med-pad) + var(--med-pad)); color:var(--blanc); margin-top:-1px;}
.newsletter .input {margin: 2rem 0 3rem 0;}
.newsletter .input__label--fx::after {background: var(--blanc);}
.newsletter .input__field--fx, .newsletter .input__label {color:var(--blanc);}
.newsletter .btn {cursor:pointer;}

.rc .col-3 {border-top:3px solid var(--bleu);}
.rc .col-3 div, .rc .col-3 .rc--link {padding:var(--med-pad);}
.rc .col-3 .rc--link:nth-child(1), .rc .col-3 .rc--link:nth-child(2) {border-right:3px solid var(--bleu);}
.rc .col-3 .rc--link {position:relative;}
.rc .col-3 .rc--link:before {content:''; background:var(--bleu); position:absolute; left:0; bottom:0; height:0; width:100%; transition:.3s;}
.rc .col-3 .rc--link:hover {color:var(--blanc);}
.rc .col-3 .rc--link:hover::before {height:100%;}
.rc .col-3 .rc--link .small, .rc .col-3 .rc--link .introduction {position:relative;}

.rc .col-6 {padding:0!important;}
.rc .col-6 a {display:inline-block; text-align:center;}
.rc .col-6 a:hover {transform:scale(1.3);}
.rc .col-6 svg, .menu--stuff-item svg {width:30px; height:30px; fill:var(--bleu); transition:.2s;}


/* FOOTER - COPYRIGHT */

.footer {display:none;}


/* BLOCK REVEALER */

.block-revealer__element {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; pointer-events: none; opacity: 0;}


/* ACCORDEONS + INTRO + PARAGRAPHES */

.wrapper-acc .title--h1 h3 {font-size:4rem;}
.wrapper-acc .introduction {font-size:inherit;}

 
/* ACCORDEONS - GLOBAL */

.st-accordion {width:100%; margin-top:var(--int-pad);}
.st-accordion h2 {line-height: 1.4; position: absolute; transform: translateY(-50%); width:85%; top: 50%; transition:.2s; color:var(--vert);}
.adjoint h4, .st-accordion h4 {font-size:1.2rem; margin:2rem 0;}

.st-open {top:0;}
.st-accordion ul li {border-bottom:1px solid rgba(0,0,0,.1); overflow: hidden; position:relative;}
.st-accordion ul li h2, .st-accordion ul li h2 a {margin-left:0px; transition:.3s; color:var(--vert);}
.st-accordion ul li:hover h2 {margin-left:1vw;}
.st-accordion ul li.st-open h2 {margin-left:0!important;}

.st-accordion ul li:first-child {border-top: 1px solid rgba(0,0,0,.1);}
.st-accordion ul li:hover h2, .st-accordion ul li.st-open h2, .st-accordion--link:hover h2 {color:var(--vert);}
.st-accordion ul li > a, .st-accordion--link {height:100px; color:var(--vert); padding:0 var(--lit-pad); display: block; position: relative; outline:none;}
.st-accordion ul li .st-content a:after {content:''!important;}
.st-content h3 {margin-bottom:1rem;}
.st-accordion ul li p {margin-bottom:2rem;}

.st-accordion ul li > a .st-arrow {display:none;}

.st-accordion ul li.st-open > a {color:var(--vert);}
.st-accordion ul li.st-open > a .st-arrow {margin-top:-1rem; -webkit-transform:rotate(180deg)!important; -moz-transform:rotate(180deg)!important; transform:rotate(180deg)!important; right:var(--lit-pad); opacity:1;}
.st-accordion ul li.st-open > a .st-arrow .st0 {display:none;}
.st-accordion ul li.st-open > a .st-arrow .st1 {fill:var(--vert);}
.st-content {padding: 0 var(--big-pad) var(--lit-pad) var(--lit-pad); display:block!important;}

.st-accordion ul li ul li, .article--container li, .adjoint li {margin-bottom:1rem!important; border-bottom:0; margin-left:1.5rem; overflow:inherit; position:relative;}
.st-accordion ul li ul li:before, .article--container li:before, .adjoint li:before, .home--agenda-wrapper li:before {content:''; width:8px; height:8px; margin-left:-1.5rem; background:var(--vert); border-radius:50%; position:absolute; top: .7rem;}
.st-accordion ul li ul li:last-child, .article--container li:last-child, .adjoint li:last-child {margin-bottom:0!important;}
.st-accordion ul li ul li:first-child, .article--container li:first-child {border-top:0;}
.st-accordion ul li ul li a, .article--container li a {height:auto; padding:inherit; display:inline-block; transition:.3s;}

.st-content .table, .article--container ul, .st-content--ul ul {width:100%; border-left:5px solid var(--vert); padding-left:1rem;}
.st-content .table td:nth-child(1) {color: var(--vert); width: 25%;}
.st-content .table tr:first-child td {padding: 0 0 .9rem 0;}
.st-content .table tr:last-child td {padding: .9rem 0 0 0;}
.st-content .table td {vertical-align: top; padding: .9rem 0;}
.st-content .table td p {margin-bottom:.5rem;}

.repeater--list strong {display:block; margin-bottom:.7rem;}
.repeater--list ul:nth-child(2) {margin-bottom:.9rem;}

ul.liste-stuff {border-left: 0!important; padding-left: 0!important; margin-bottom: 0; margin-left: 0;}
ul.liste-stuff li {margin-bottom:0!important;}


/* ACCORDEONS - LISTE */

#st-accordion-liste.st-accordion h2 {padding-left:200px;}
#st-accordion-liste.st-accordion ul li > a {height: 220px; padding: 0 var(--lit-pad) 0 0;}
#st-accordion-liste.st-accordion ul li ul, .adjoint ul {border-left: 5px solid var(--vert); padding-left: 1rem;}
#st-accordion-liste.st-accordion ul li:hover h2, #st-accordion-menu.st-accordion ul li.st-open h2 {color:var(--vert);}
#st-accordion-liste.st-accordion ul li:hover .thumb {width:170px;}
#st-accordion-liste.st-accordion ul li.st-open .thumb, #st-accordion-liste.st-accordion ul li.st-open:hover .thumb {width:150px;}
#st-accordion-liste.st-accordion .small {margin-bottom:.5rem; color:var(--vert);}
#st-accordion-liste.st-accordion .thumb {width:150px; height:150px; position:absolute; background-size: cover; background-position: center; top: 50%; transform: translateY(-50%); transition:.3s; transform-style: preserve-3d;}
#st-accordion-liste.st-accordion .st-content {padding:0 0 var(--lit-pad) 0; display:block!important;} 


/* ACCORDEONS - MENU */



/* GALERIE PHOTOS */

.galerie, .galerie--nav, .galerie-mobile {display:none;}


/* TIMELINE */

.cd-h-timeline {opacity: 0; transition: opacity 0.2s;}
.cd-h-timeline--loaded {opacity: 1;}
.cd-h-timeline__container {position: relative; height: 100px; max-width: 100%;}
.cd-h-timeline__dates {position: relative; height: 100%; margin: 0 50px; overflow: hidden;}
.cd-h-timeline__dates::after, .js .cd-h-timeline__dates::before {content: ''; position: absolute; z-index: 2; top: 0; height: 100%; width: 20px;}
.cd-h-timeline__dates::before {left: 0; background: linear-gradient(to right, #fff, 1);}
.cd-h-timeline__dates::after {right: 0; background: linear-gradient(to left, #fff, 1);}
.cd-h-timeline__line {position: absolute; z-index: 1; left: 0; top: 49px; height: 3px; background-color: rgba(0,0,0,.1); transition: transform 0.4s;}
.cd-h-timeline__filling-line {position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; background-color: var(--vert); transform: scaleX(0); transform-origin: left center; transition: transform 0.3s;}
.cd-h-timeline__date {position: absolute; bottom:-17px; z-index: 2; text-align: center; padding-bottom: 1.8rem; color:rgba(0,0,0,.1); user-select: none; text-decoration: none;}
.cd-h-timeline__date::after {content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -11px; height: 20px; width: 20px; border-radius: 50%; border: 3px solid rgba(0,0,0,.1); background-color: #fff; transition: background-color .3s, border-color .3s;}
.cd-h-timeline__date:hover::after {background-color: var(--vert); border-color: var(--vert);}
.cd-h-timeline__date--selected {pointer-events: none; color:var(--vert);}
.cd-h-timeline__date--selected::after {background-color: var(--vert); border-color: var(--vert);}
.cd-h-timeline__date--older-event::after {border-color: var(--vert);}

.cd-h-timeline__navigation {position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); height: 50px; width: 50px; border:3px solid rgba(0,0,0,.1); border-radius:50%; transition: border-color 0.3s;}
.cd-h-timeline__navigation svg {fill:var(--vert); margin: 15px;}
.cd-h-timeline__navigation:hover {border-color: var(--vert);}
.cd-h-timeline__navigation--prev {left: 0; transform: translateY(-50%);}
.cd-h-timeline__navigation--next {right: 0;}
.cd-h-timeline__navigation--inactive {cursor:default;}
.cd-h-timeline__navigation--inactive svg {fill:#fff;}
.cd-h-timeline__navigation--inactive:hover {border-color: #e9ecf2;}
.cd-h-timeline__events {position: relative; width: 100%; transition: height 0.4s;}
.cd-h-timeline__event {position: absolute; z-index: 1; width: 100%; left: 0; top: 0; transform: translateX(-100%); opacity: 0; animation-duration: 0.4s; animation-timing-function: ease-in-out;}
.cd-h-timeline__event--selected {position: relative; z-index: 2; opacity: 1; transform: translateX(0);}
.cd-h-timeline__event--enter-right, .js .cd-h-timeline__event--leave-right {animation-name: cd-enter-right;}
.cd-h-timeline__event--enter-left, .js .cd-h-timeline__event--leave-left {animation-name: cd-enter-left;}
.cd-h-timeline__event--leave-right, .js .cd-h-timeline__event--leave-left {animation-direction: reverse;}
.cd-h-timeline__event-content {width: 100%;}
.cd-h-timeline__event-description.subtitle {margin:2rem 4rem 0 4rem;}
.cd-h-timeline__event-title {font-size: 4rem; margin-top: 2rem; margin-bottom: 0; line-height: 1.2;}

.timeline--presentation {width:100%;}
.timeline--jumelage {width:820px;}