/*
	Theme Name: Mairie de la Suze
	Description: Site de la Mairie de la Suze sur Sarthe
	Version: 1.0
	Author: BABAWEB
	Author URI: http://www.babaweb.fr/
*/

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,900');

/* CSS RESET */
* { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; list-style: none; text-decoration: none; color: inherit; outline: none;}
input, button, select, textarea { border: 0; background: transparent; appearance: none;}
img{vertical-align:middle;}
a>button { cursor: pointer;}

/* BASIC WP STYLES */
.alignleft, img.alignleft { float: left; margin-right: 20px; margin-bottom: 10px;max-width: 100%;}
.alignright, img.alignright { display: block; float: right; margin-left: 20px; margin-bottom: 10px;max-width: 100%;}
.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto;max-width: 100%;}
.wp-caption a{border:none;}
.wp-caption p{margin:0;padding:10px 20px;background:rgba(0,0,0,0.1);margin-bottom:25px;}
.wp-caption p:last-child{margin-bottom:25px;}

html { color: #3b3c4b; font-family: 'Roboto', sans-serif;}
body { animation: fade-in forwards 1s;}
body.unload { animation: fade-out forwards 1s;}

@keyframes fade-in {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

@keyframes fade-out {
	0% { opacity: 1;}
	100% { opacity: 0;}
}

main h1, #main-title h1 { font-weight: 700; font-size: 40px; text-align: left; text-transform: uppercase; line-height: 1;}
main h2 { font-weight: 700; font-size: 20px; text-align: left; text-transform: uppercase; margin-bottom: 25px;}
main h3 { font-weight: 400; font-size: 20px; text-transform: none; margin-bottom: 25px;}
main p { font-weight: 400; font-size: 14px; line-height: 22px; text-align: justify; margin: 25px 0;}
main p:first-child { margin-top: 0;}
main p:last-child { margin-bottom: 0;}
main ul:not([id]), main ol { padding-left: 20px; font-size: 14px; line-height: 22px; margin: 25px 0;}
main ul:not([id]) li { position: relative;}
main ul:not([id]) li::before { content: '\e803'; display: block; width: 20px; line-height: 22px; text-align: left; font-size: 16px; font-family: 'lasuze'; position: absolute; left: -20px;}
main ul:not([id]) li ul, main ol li ol { padding-left: 40px;}


main a { transition: .2s ease-out;}

main strong { font-weight: 700;}
main em { font-style: italic;}

main img { height: auto;}
main img.size-thumbnail { width: calc(100% / 3);}
main img.size-medium { width: calc((100% / 3) * 2);}
main img.size-full { width: 100%;}

main hr{clear:both;}

h3 { font-weight: 500; font-size: 18px; text-transform: uppercase;}
p { text-align: justify; font-size: 14px; line-height: 22px;}

hr { clear: both;}

/* Slick */
.slick-list, .slick-track { height: 100%;}
/* Colonnes */
.col-container { display: table; width: 100%; table-layout: fixed; position: relative;}
.col { display: table-cell;}
.col-25 { width: 25%;}
.col-20 { width: 20%;}
.col-33 { width: calc(100% / 3);}
.col-40 { width: 40%;}
.col-60 { width: 60%;}

.loader::before { content: '\e830'; display: block; width: 40px; height: 40px; position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); border-radius: 100%; background-color: #3b85d1; font-family: 'lasuze', sans-serif; line-height: 40px; padding: 0 10.5px; text-align: center; font-size: 20px; color: #fff; animation: load infinite 1s; box-sizing: border-box; transition: .25s ease-out;}

/* Titres */
.title-bar { display: block; width: 100%; height: 60px; padding: 0 30px; text-transform: uppercase; text-align: left; position: relative;}
.title-bar h3 { display: block; width: 100%; position: relative; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}


/* Header */
header { display: block; width: 100%; height: 100px; background-color: #fff;}
header>* { display: block; height: 100px; float: left;}

header #logo { width: 140px; padding: 20px 25px;}
header #logo img { width: 100%;}

header #hamburger { display: none;}

header nav { width: calc(100% - 460px);}
header nav>ul { display: block; width: 100%; height: 100%; max-width: 1200px; margin: auto;}
header nav>ul>li { display: block; width: calc((100% - 1px) / 6); height: 100%; float: left; position: relative;}
header nav>ul>li>a, header nav>ul>li>span { border-bottom-width: 2px; border-style: solid; border-color: transparent;}
header nav a, header nav span { display: block; width: 100%; height: 100%; transition: .2s ease-out;}
header nav button { display: block; width: 100%; height: 100%; text-transform: uppercase; font-size: 12px; font-weight: 900; text-align: center; padding: 2px 10px;}
header nav>ul>li>ul { display: block; width: 0; position: absolute; top: 100%; left: 0; background-color: #3b3c4b; z-index: 1; color: #fff; opacity: 0; overflow: hidden; transition: opacity .2s ease-out, width 1ms linear .2s;}
header nav>ul>li>ul>li { display: block; width: 100%; position: relative;}
header nav>ul>li>ul>li button { min-height: 40px;}

header nav>ul>li:hover>a, header nav>ul>li>a.active, header nav>ul>li:hover>span, header nav>ul>li>span.active { background-color: #f3f3f3; border-color: inherit;}
header nav>ul>li:hover>ul { width: 100%; opacity: 1; transition: opacity .2s ease-out;}
header nav>ul>li>ul>li:hover>a, header nav>ul>li>ul>li>a.active { background-color: #2a2a35;}

header form#search { width: 320px; padding: 35px 40px; background-color: #f95d43;}
header form#search label { display: block; width: 100%; height: 100%; border-bottom: 1px solid #de533c; position: relative;}
header form#search label::before { display: block; width: 30px; height: 30px; margin: 0; position: absolute; top: 0; right: 0; line-height: 30px; text-align: center; color: #fff;}
header form#search input { display: block; height: 100%; float: left; background-color: transparent; color: #fff;}
header form#search input[type=text] { width: calc(100% - 30px); text-align: right; padding-right: 5px;}
header form#search input[type=submit] { width: 30px; text-align: center; position: relative; z-index: 1; cursor: pointer;}

#top { display: block; width: 100%; height: 450px; position: relative;}
#top #slider { display: block; width: 100%; height: 100%; opacity: 0; transition: .25s ease-out;}
.loaded #top::before { opacity: 0;}
.loaded #top #slider{ opacity: 1;}
#top #slider .item { display: block; width: 100%; height: 100%; position: relative; overflow: hidden;}
#top #slider .item .img { display: block; width: calc(100vw + 50px); height: calc(100% + 50px); position: absolute; top: -25px; right: -25px; background-position: center; background-size: cover;}
#top #slider .item .blur { display: block; width: 320px; height: 100%; position: absolute; top: 0; right: 0; overflow: hidden;}
#top #slider .item .blur::before, #top #slider .item .blur::after { content: ''; display: block; width: calc(100vw + 50px); height: calc(100% + 50px); position: absolute; top: -25px; right: -25px;}
#top #slider .item .blur::before { filter: blur(10px); background-image: inherit; background-size: cover; background-position: center;}
#top #slider .item .blur::after { background-color: #3b3c4b; opacity: .2;}

#top .nav { display: block; height: 50px; position: absolute; bottom: 0; left: 0; padding-right: 100px;}
#top .nav .slick-dots { display: inline-block; height: 100%; padding: 0 20px; background-color: #f8f8f8;}
#top .nav .slick-dots li { display: inline-block; width: 10px; height: 10px; border-radius: 100%; border: 2px solid #3b3c4b; margin: 20px 10px; transition: 0.2s ease-out; position: relative;}
#top .nav .slick-dots li button { display: block; width: 20px; height: 20px; position: absolute; top: -7px; left: -7px; font-size: 1px; opacity: 0; cursor: pointer;}
#top .nav .slick-dots li:hover, #top .nav .slick-dots li.slick-active { background-color: #f95d43; border: 2px solid #f95d43;}
#top .nav .slick-prev, #top .nav .slick-next { display: block; width: 50px; height: 100%; position: absolute; bottom: 0; cursor: pointer;}
#top .nav .slick-prev { right: 50px; background-color: #fff; color: #3b3c4b;}
#top .nav .slick-next { right: 0; background-color: #3b3c4b; color: #fff;}

#top #top-links { display: block; width: 300px; position: absolute; top: 50%; right: 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff;}
#top #top-links li { display: block; width: 100%; height: 60px; margin-bottom: 1px;}
#top #top-links a { display: block; width: 100%; height: 100%;}
#top #top-links button { display: block; width: 100%; height: 100%; padding-left: 60px; position: relative; cursor: pointer; font-size: 14px;}
#top #top-links button::before { display: block; width: 60px; height: 60px; position: absolute; top: 0; left: 0; font-size: 30px; line-height: 60px; text-align: center; margin: 0; z-index: 1;}
#top #top-links button::after { content: ''; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 60px; transition: .2s ease-out;}
#top #top-links button span { position: relative; z-index: 1;}
#top #top-links button:hover::after { width: calc(100% - 60px);}

#top #top-links .icon-meeting { background-color: #3b85d1;}
#top #top-links .icon-meeting::before, #top #top-links .icon-meeting::after { background-color: #469ff9;}
#top #top-links .icon-agenda { background-color: #52b545;}
#top #top-links .icon-agenda::before, #top #top-links .icon-agenda::after { background-color: #5ac64b;}
#top #top-links .icon-folder { background-color: #db8129;}
#top #top-links .icon-folder::before, #top #top-links .icon-folder::after { background-color: #ff9630;}
#top #top-links .icon-list { background-color: #13c7c5;}
#top #top-links .icon-list::before, #top #top-links .icon-list::after { background-color: #15e0de;}
#top #top-links .icon-users { background-color: #ba47bc;}
#top #top-links .icon-users::before, #top #top-links .icon-users::after { background-color: #de55e0;}
#top #top-links .icon-mail { background-color: #f7ad00;}
#top #top-links .icon-mail::before, #top #top-links .icon-mail::after { background-color: #f8bd2e;}
#top #top-links .icon-warning { background-color: #ea573f;}
#top #top-links .icon-warning::before, #top #top-links .icon-warning::after { background-color: #f95d43;}
#top #top-links .icon-newspaper-1 { background-color: #3B85D1;}
#top #top-links .icon-newspaper-1::before, #top #top-links .icon-newspaper-1::after { background-color: #469ff9;}

/* Footer */
footer { display: block; width: 100%; color: #fff; clear: both;}
footer>section { width: 100%; overflow: hidden;}
footer>section:not(:last-child) { border-bottom: 1px solid #4d4e62;}

footer #footer-infos { display: table; table-layout: fixed; background-color: #f95d43; font-size: 14px;}
footer #footer-infos .col { vertical-align: middle; padding: 20px 10px;}
footer #footer-infos p { text-align: center;}

footer #footer-links { height: 100px; background-color: #3b3c4b; font-size: 14px; text-transform: uppercase;}
footer #footer-links>* { float: left;}
footer #footer-links #footer-logo { display: block; width: 140px; height: 100%; float: left; padding: 20px 25px;}
footer #footer-links #footer-logo img { width: 100%;}
footer #footer-links ul { display: block; width: calc(100% - 460px); height: 100%;}
footer #footer-links ul li { display: block; width: calc(100% / 5); position: relative; top: 50%; float: left; text-align: center; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
footer #footer-links #footer-extern { display: block; width: 320px;}
footer #footer-links #footer-extern span:first-child { display: none;}
footer #footer-links #footer-extern span:last-child { margin: 0 25px; line-height: 100px; color: #f95d43;}
footer #footer-links #footer-extern span a { color: #fff;}

footer #footer-sitemap { display: table; table-layout: fixed; background-color: #2a2a35; font-size: 12px;}
footer #footer-sitemap .col { vertical-align: top; padding: 60px 30px;}
footer #footer-sitemap .col:not(:last-child) { border-right: 1px solid #4d4e62;}
footer #footer-sitemap h4 { text-transform: uppercase; margin-bottom: 30px; font-weight: 500;}
footer #footer-sitemap ul { padding-left: 20px;}
footer #footer-sitemap ul li { position: relative;}
footer #footer-sitemap ul li:not(:last-child) { margin-bottom: 10px;}
footer #footer-sitemap ul li a { color: #fff;}
footer #footer-sitemap ul li::before { content: '\e803'; display: block; width: 20px; text-align: left; font-size: 16px; font-family: 'lasuze'; position: absolute; left: -20px;}

/* Content */
#wrapper { display: block; width: 100%; position: relative;}

/* Home */
/* Poll */
#poll { background-color: #f8f8f8;}
#poll>* { display: table-cell; vertical-align: middle;}
#poll>.col-40 { border-width: 40px 20px 40px 40px; border-style: solid; border-color: #f8f8f8; background-color: #fff; position: relative;}
#poll>.col-60 { padding: 40px 40px 40px 20px;}

#facebook-link { display: block; text-align: center;}
#share{clear:both;width:100%;margin:25px 0;}
.share_fb {padding:10px 20px;background:#3b5998;text-transform:uppercase;font-weight:600;font-size:13px;float:left;border:none;color:#fff;margin-right:20px;}
.share_twitter {padding:10px 20px;background:#55acee;text-transform:uppercase;font-weight:600;font-size:13px;float:left;margin-right:20px;border:none;color:#fff;}
.share_view {padding:10px 20px;background:#3b3c4b;font-size:12px;float:left;border:none;color:#fff;}


#poll-form { display: block; width: 100%; background-color: #fff; position: relative;}
#poll-form .title-bar { background-color: #469ff9; color: #fff;}
#poll-form .col-container>* { display: table-cell; padding: 30px; vertical-align: top;}
#poll-form .col-60>p:last-child { margin-top: 20px; text-align: center;}
#poll-form .col-60 li:not(:last-child) { margin-bottom: 10px;}
#poll-form .col-60 .pollbar { margin-top: 5px;}
#poll-form form input[type=radio] { display: none;}
#poll-form form label { display: block; width: 100%; margin-bottom: 15px; padding-left: 25px; position: relative; cursor: pointer; font-size: 14px; line-height: 22px;}
#poll-form form label::before { content: ''; display: block; width: 10px; height: 10px; position: absolute; top: 3px; left: 0; border-radius: 100%; border: 2px solid #3b3c4b; background: transparent; transition: .2s ease-out;}
#poll-form form input:checked + label::before { background-color: #3b3c4b;}
#poll-form form input[type=submit], #poll-form form input[type=button] { display: block; width: 100%; height: 40px; margin-top: 20px; background-color: transparent; border: 2px solid #469ff9; font-style: italic; font-weight: 700; font-size: 12px; cursor: pointer; transition: .2s ease-out; color: #3b3c4b; text-transform: uppercase;}
#poll-form form input[type=submit]:hover, #poll-form form input[type=button]:hover { background-color: #469ff9; color: #fff;}

#poll-form .overlay { width: 0; height: calc(100% - 60px); overflow: hidden; text-align: center; font-size: 14px; position: absolute; top: 60px; bottom: 0; left: 0; right: 0; background-color: #fff; opacity: 0; transition: opacity .3s ease-out;}
#poll-form.sending .overlay { width: 100%; opacity: 1;}
#poll-form .overlay .col-container { height: 100%;}
#poll-form .overlay .col-container .col { vertical-align: middle;}
#poll-form .overlay .recap { height: 0; overflow: hidden; opacity: 0; transition: .4s ease-out .4s;}
#poll-form .overlay p { text-align: center; font-size: 16px; font-weight: 700; margin-bottom: 15px;}
#poll-form .overlay .recap>span { border-top: 1px solid #3b3c4b; padding: 5px 10px;}
#poll-form .overlay .result { font-weight: 700; color: #469ff9;}
#poll-form .overlay .loader { display: block; width: 40px; height: 40px; border-radius: 100%; margin: auto; position: relative;}
#poll-form .overlay .loader .finish { display: block; width: 40px; height: 40px; border-radius: 100%; position: absolute; top: 0; left: 0; background-color: #469ff9; color: #fff; line-height: 40px; font-size: 18px; transform-origin: center; transform: scale(0); opacity: 0; transition: .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#poll-form.sent .overlay .loader .finish { transform: scale(1); opacity: 1;}
#poll-form.sent .recap { height: 70px; opacity: 1;}

@keyframes load {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* Feeds */
.feed { height: 400px; color: #fff;}
.feed-title { display: block; width: 100%; height: 70px; padding: 0 30px; position: relative;}
.feed-title h3 { display: block; width: calc(100% - 200px); float: left; position: relative; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.feed-title a { display: block; width: 200px; height: 40px; float: right; margin: 15px 0;}
.feed-title a button { display: block; width: 100%; height: 100%; text-align: center; border: 2px solid #fff; border-radius: 2px; transition: .2s ease-out; font-style: italic; font-weight: 700; font-size: 14px;}
.feed-title a button:hover { background-color: #fff;}
.feed-title::after { content: ''; display: block; width: calc(100% - 30px); height: 1px; position: absolute; bottom: 0; left: 15px;}

.feed-list li a { display: block; width: 100%; padding: 15px 80px 15px 30px; position: relative; transition: .2s ease-out;}
.feed-list li a::before { display: block; width: 50px; height: 50px; position: absolute; top: calc(50% - 25px); right: 30px; margin: 0; line-height: 50px; text-align: center; transition: .2s ease-out;}
.feed-list li a::after { content: ''; display: block; width: 20px; height: 100%; position: absolute; top: 0; transition: .2s ease-out; z-index: 1;}
.left .feed-list li a::after { left: calc(100% - 20px);}
.left .feed-list li a:hover::after, .left .feed-list li.active a::after { left: 100%;}
.right .feed-list li a::after { right: calc(100% - 20px);}
.right .feed-list li a:hover::after, .right .feed-list li.active a::after { right: 100%;}

.feed-list li .date { width: 100px; min-height: 80px; padding-right: 15px; text-align: right; font-size: 12px; font-weight: 700; float: left;}
.feed-list li .date span { display: block; margin-bottom: 7px;}

.feed-list li .details { width: calc(100% - 100px); min-height: 80px; padding-left: 15px; border-left-width: 1px; border-left-style: solid; transition: .2s ease-out; float: left;}
.feed-list li .details h5 { font-size: 16px; font-weight: 800;text-transform:uppercase;}

#news>*, #events>* { display: table-cell; vertical-align: top; position: relative;}
#news>.img, #events>.img { background-size: contain; background-position: center; opacity: 0; transition: .25s ease-out;background-repeat:no-repeat;}
.loaded #news>.img, .loaded #events>.img { opacity: 1;}

#news::before { left: auto; right: calc(30% - 20px);}
#events::before { left: calc(30% - 20px);}

#news .feed { background-color: #3b3c4b;}
#news .feed .feed-title::after { background-color: #505266;}
#news .feed-list li a::before { color: #505266;}
#news .feed-list li a::after { background-color: #3b3c4b;}
#news .feed-list li .details { border-color: #3b3c4b;}
#news .feed-list li .details p { color: #d6d6d6;}

#news .feed-title a button:hover { color: #3b3c4b;}

#news .feed-list li a:hover, #news .feed-list li.active a { background-color: #505266;}
#news .feed-list li a:hover::after, #news .feed-list li.active a::after { background-color: #505266;}
#news .feed-list li a:hover .details, #news .feed-list li.active .details { border-color: #469ff9;}
#news .feed-list li a:hover::before, #news .feed-list li.active a::before { color: #469ff9;}

#events .feed { background-color: #f95d43;}
#events .feed .feed-title::after { background-color: #ea573f;}
#events .feed-list li a::before { color: #ea573f;}
#events .feed-list li a::after { background-color: #f95d43;}
#events .feed-list li .details { border-color: #3b3c4b;}
#events .feed-list li .details p { color: #f9d3cb;}

#events .feed-title a button:hover { color: #f95d43;}

#events .feed-list li a:hover, #events .feed-list li.active a { background-color: #ea573f;}
#events .feed-list li a:hover::after, #events .feed-list li.active a::after { background-color: #ea573f;}
#events .feed-list li a:hover .details, #events .feed-list li.active .details { border-color: #ff7f7f;}
#events .feed-list li a:hover::before, #events .feed-list li.active a::before { color: #ff7f7f;}
#events .feed-list li a:hover .details p, #events .feed-list li.active a .details p { color: #fff;}
#events .feed-list li .tags { color: #f9d3cb; }

/* gallery */
#gallery { background-color: #f8f8f8; padding: 40px 40px 0 40px; overflow: hidden; clear: both;}
#gallery.full { padding: 0;}
#gallery.full .img { width: 20%;}
#gallery.full .img { width: 20%; margin-right: 0;}
#gallery .img { width: calc((100% - 160px) / 5); background-size: cover; background-position: center; background-repeat: no-repeat; float: left; margin: 0 40px 40px 0;}
#gallery .img::before { content: ''; display: block; width: 100%; padding-top: 100%;}
#gallery .img:nth-child(5n+5) { margin-right: 0;}


/* maps */
#maps { display: block; width: 100%; height: 450px; position: relative; clear: both; }
#map { display: block; width: 100%; height: 100%;}
#cont_a379b0229a6366fedbc3df4155a67458 { position: absolute; bottom: 40px; right: 40px;}
#maps .infos { background-color: #3b3c4b; padding: 20px; text-align: center; margin-top: 40px; color: #fff; }
#maps .infos p { text-align: center; margin-top: 10px; color: #dadada; }

/* pages */
main { display: block; width: calc(100% - 640px); margin: auto; position: relative; z-index: 1; float: left;}
main.full { width: calc(100% - 320px);}
main article { display: block; width: 100%; max-width: 1000px; margin: auto; padding: 40px; position: relative; z-index: 1; background-color: #f8f8f8; overflow: hidden;}

#main-title { display: block; width: calc(100% - 640px); padding: 40px; position: absolute; bottom: 100%; left: 50%; background-color: #3b3c4b; color: #fff; overflow: hidden; z-index: 1;}
#main-title:not(.full) { max-width: 1000px; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
#main-title.full { width: calc(100% - 320px); left: 0;}
#main-title::after { content: ''; display: block; width: calc(100% - 80px); max-width: 100px; height: 2px; position: absolute; bottom: 0; left: 40px;}

#main-title .tags { margin: 0; float: left;}
#main-title .date { float: right; font-weight: 500; font-style: italic; font-size: 18px;}
#main-title .date::before { font-size: 22px; margin-right: 10px;}

#left-col { display: block; width: 320px; float: left; min-height: 1px;}

aside#nav { display: block; width: 320px; float: right; font-weight: 700; position: relative; z-index: 10;}
aside#nav.filters { display: none;}
aside#nav.filters.active { display: block;}
aside#nav h2 { display: block; width: 100%; height: 90px;}
aside#nav h2 button { display: block; width: 100%; height: 100%; text-transform: uppercase; font-size: 16px;}
aside#nav ul:not(#filters) { display: block; width: 100%;}
aside#nav ul:not(#filters) li { display: block; height: 50px; margin-bottom: 2px; background-color: #3b3c4b; color: #fff;}
aside#nav ul li a, aside#nav ul li button { display: block; width: 100%; height: 100%; position: relative; transition: .2s ease-out;}
aside#nav ul li button { font-size: 14px; text-transform: uppercase;}
aside#nav ul:not(#filters) li button::before { content: ''; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-top-width: 25px; border-right-width: 15px; border-bottom-width: 25px; border-left-width: 15px; position: absolute; top: 0; right: 100%; transition: .2s ease-out;}

/* Actualités */
.bloc-container { display: block; width: 100%; padding: 40px 20px 20px 40px; overflow: hidden;}
.bloc-container .col-33 { display: block; width: calc((100% - 1px) / 3); height: 350px; padding: 0 20px 20px 0; float: left; transition: width .3s ease-out, height .3s ease-out, padding .3s ease-out, opacity .2s ease-out .3s;}
.bloc-container .col-33.hidden { opacity: 0; width: 0; height: 0; padding: 0; transition: opacity .2s ease-out, width .3s ease-out .2s, padding .3s ease-out .2s, height .3s ease-out .2s;}
.bloc-container .col-33 .txt { display: block; width: 100%; height: 50%; padding: 40px 30px; color: #fff; position: relative; background-color: #3b3c4b;}
.bloc-container .col-33 .txt>* { display: block; width: 100%; }
.bloc-container .col-33 .txt h4 { font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-transform: uppercase; text-overflow: ellipsis; margin-bottom: 15px;}
.bloc-container .col-33 .txt .tags { text-transform: uppercase; color: #fff; font-weight: 700; font-size: 14px;}
.bloc-container .col-33 .txt i { display: block; width: 0; height: 0; position: absolute; top: 0; right: 0; border-width: 40px; border-style: solid; border-color: transparent; border-top-color: #32323f; border-right-color: #32323f; transition: .2s ease-out;}
.bloc-container .col-33 .txt i::before { display: block; width: 20px; height: 20px; margin: 0; position: absolute; top: -25px; right: -25px; font-size: 22px;}

.bloc-container .col-33 .img { display: block; width: 100%; height: 50%; background-size: cover; background-position: center; background-color: #3b3c4b;}

.bloc-container .col-33:nth-child(3n+3) { margin-right: 0;}

#load-more { display: block; width: calc(100% - 80px); height: 50px; margin: 0 40px 40px 40px; text-transform: uppercase; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; position: relative;}
#load-more::before { content: ''; display: block; width: 9px; height: 9px; border-radius: 100%; border: 8px solid #fff; animation: load 1s ease-out infinite; opacity: 0; position: absolute; top: calc(50% - 12.5px); left: calc(50% - 12.5px);}
#load-more.loading span { opacity: 0;}
#load-more.loading::before { opacity: 1;}

#filters li { display: block; width: 100%; height: 61px; border-bottom: 1px solid #e8e8e8;}
#filters input { display: none;}
#filters label { display: block; width: 100%; height: 100%; padding: 0 20px 0 60px; position: relative; cursor: pointer; line-height: 60px;}
#filters label::before, #filters label::after { content: ''; display: block; width: 10px; height: 10px; position: absolute;}
#filters label::before { top: calc(50% - 6px); left: 40px; border: 1px solid #3b3c4b;}
#filters label::after { top: calc(50% - 5px); left: 41px; background-color: #3b3c4b; -moz-transform: scale(0); -webkit-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); opacity: 0; transition: .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#filters input:checked + label::after { -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1;}

/* Singles */
#back { display: block; width: 300px; height: 50px; margin-top: 50px; background-color: #3b3c4b; color: #fff;}
#back button { display: block; width: 100%; height: 100%; padding-left: 50px; position: relative;}
#back button span { position: relative; z-index: 1;}
#back button::before { display: block; width: 50px; height: 50px; margin: 0; position: absolute; top: 0; left: 0; line-height: 50px; text-align: center; background-color: #505266;}
#back button::after { content: ''; display: block; width: 0; height: 100%; position: absolute; top: 0; left: 50px;; line-height: 50px; background-color: #505266; transition: .2s ease-out;}
#back button:hover::after { width: calc(100% - 50px);}

/* Agenda */
#style-choice { display: block; height: 40px; position: absolute; top: 40px; right: 40px;}
#style-choice button { display: block; height: 40px; position: relative; margin: 0; padding: 0; line-height: 40px; float: left; font-size: 12px; cursor: pointer; overflow: hidden;}
#style-choice button span { display: inline-block; white-space: nowrap; opacity: 1; width: 125px; overflow: hidden; padding-right: 10px; transition: .15s ease-out;}
#style-choice button:nth-child(2) span { width: 95px;}
#style-choice button.active span { width: 0; padding-right: 0; opacity: 0;}
#style-choice button::before { width: 40px; height: 40px; line-height: 40px; margin: 0; font-size: 25px; float: left;}
#style-choice button::after { content: ''; display: block; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; transition: .15s ease-out;}

#calendar, #list { display: none;}
#calendar.active, #list.active { display: block;}
#calendar { width: 100%; padding: 40px 40px 80px 40px;}
#calendar .fc-event, #calendar .fc-event-dot, #calendar .fc-state-active { color: #fff;}

main .container { padding: 40px 40px 0 40px;}

/* Contact */
form p { margin: 0; }
form h2, form h3 { margin-bottom:20px; }
form h3 { padding-bottom:15px; border-bottom: 1px solid #d8d8d8; color:#469ff9; }
form h5 { clear: both; margin-bottom: 5px; }
form hr.bigmarge { height:20px; border: none; color: #929292; }
form label:not(.col-50) { clear: both; float: left; color: #929292; }
form label { display: block; width: 100%; margin-bottom: 20px;}
form label.col-50 { width: calc((100% - 20px) / 2); margin-right: 20px; float: left;}
form label.col-50:nth-of-type(2n+2) { margin-right: 0;}
form label.nobottom { margin-bottom: 5px; }
form div.col-50 { width: calc((100% - 20px) / 2); margin-right: 20px; float: left;}
form div.col-50.col-right { margin-right: 0;}
form div.nobottom { margin-bottom: 5px; }
form .wpcf7-radio label { margin-bottom: 0; cursor: pointer; }
form .wpcf7-radio span { margin: 0 10px 0 0; }
form .wpcf7-radio input[type=radio] { margin-right: 5px; cursor: pointer; }
form span.wpcf7-list-item-label::before, span.wpcf7-list-item-label::after { display: none; }
form span.wpcf7-form-control-wrap { margin-bottom: 5px; display: block; }
form span.sousinput { padding-left: 15px; font-style: italic; }
form span.sousinput span { font-weight: bold; }

form input:not([type=checkbox]):not([type=radio]):not([type=submit]), form select { display: block; width: 100%; height: 50px; padding: 0 15px;}
form input:not([type=checkbox]):not([type=radio]):not([type=submit]), form select, form textarea { background-color: rgba(0,0,0,.1); color: #3b3c4b; font-size: 14px;}
form textarea { display: block; width: 100%; padding: 15px; resize: none; }
form div.col-50 textarea { height:120px; }
form input[type=submit] { display: block; width: 100%; height: 50px; color: #fff; cursor: pointer; text-transform: uppercase; font-size: 12px; font-weight: 700;}
form input[type="checkbox"] { height: 20px; width: 20px; vertical-align: middle; margin-right: 10px; appearance: auto; }

div.wpcf7 form .ajax-loader { display: block; margin: 5px auto;}
form div.wpcf7-validation-errors { display: block; width: 100%; height: auto; padding: 15px; border: 0; background-color: #fff; margin: 0;}

/* Associations */
ul#accordion { display: block; width: 100%;}
ul#accordion>li { display: block; width: 100%; margin-bottom: 5px;}
ul#accordion>li>button { display: block; width: 100%; height: 50px; padding: 0 50px 0 15px; position: relative; text-align: left; background-color: #3b3c4b; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;}
ul#accordion>li>button::before, ul#accordion>li>button::after { display: block; width: 50px; height: 50px; margin: 0; position: absolute; top: 0; right: 0; line-height: 50px; text-align: center;}
ul#accordion>li>button::after { content: '';}
ul#accordion>li>button::before { z-index: 1; transition: .2s ease-out;}
ul#accordion>li>div { display: block; width: 100%; height: 0; margin: 0; padding: 0 15px; overflow: hidden; transition: .4s ease-out; opacity: 0; background-color: #fff;}

ul#accordion>li.active>div { opacity: 1; height: auto;}
ul#accordion>li.active>button::before { -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg);}

/* Élus */
#elus { display: block; width: 100%; overflow: hidden;}
.elu { display: block; width: calc((100% - 30px) / 4); float: left; margin: 0 10px 10px 0;}
.elu:nth-of-type(4n+4) { margin-right: 0;}
.elu:nth-of-type(4n+5) { clear: left;}
.elu .img { display: block; width: 100%; background-size: cover; background-position: center;}
.elu .img::before { content: ''; display: block; width: 100%; padding-top: 130%;}
.elu .txt { display: block; width: 100%; padding: 10px; background-color: #fff;}
.elu .txt h3 { font-size: 14px; font-weight: 500;}
.elu .txt span { font-size: 10px;}

/* Arrêtés */
.bylaw-filter-container {
	max-width: 1000px;
	margin: 60px auto;
	padding: 10px;
	padding-left: 60px;
	padding-right: 0px;
	display: flex;
	gap: 30px;
	background: #f7f7f7;
}

.bylaw-filter-reset {
    font-size: 0.875em;
    padding: 10px;
	  margin: -10px 0;
    text-transform: uppercase;
    border: 1px solid #3b3c4b;
	width: 100%;
}

.bylaw-filter-reset:hover{
    cursor: pointer;
    background: white;
}

.bylaw-filter-reset:active{
    background: #3b3c4b;
    color: white;
}

form select.bylaw-filter-input:hover{
    cursor: pointer;
}

form.bylaw-filter-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"])::placeholder{
	opacity: 1;
}

form.bylaw-filter-container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), form.bylaw-filter-container select{
	padding: 0;
	background: transparent;
	border-bottom: 1px solid #3b3c4b;
	vertical-align: top;
    font-size: 0.75em;
}

.bylaw-filter-input{
    width: 100%;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bylaw-filter-input:before{
    font-family: 'lasuze';
    content:'\e80c';
    position: absolute;
    background: #f7f7f7;
	z-index: 1;
	padding-left: 2px;
}

.bylaw-list {
	width: calc(100% + 480px);
	margin: 0 -240px;
	
	display: flex;
	flex-wrap: wrap;
	gap: 30px;

    margin-bottom: 120px;
}
main .bylaw {
	background: #F7F7F7;
	border: 1px solid #F7F7F7;
	width: calc(50% - 15px);
	padding: 15px 20px 15px 40px;
	transition: border padding 0.15s;
	display: flex;
}

.bylaw-desc p{
	margin: 0;
    color: #3b3c4b;
    font-family: 'roboto';
}
.bylaw-title {
	font-size: 1.25em;
    font-weight: 700;
	text-transform: uppercase;
	text-align: left;
    line-height: 1.2;
	width: 100%;
	max-width: 600px;
	padding-right: 1em;
}
.bylaw-date {
	margin: 0px;
    font-weight: 400;
}
.bylaw-link-container {
	margin-left: auto;
	flex: 0 0 auto;
}
.bylaw-link {
	background: transparent;
	padding: 20px 15px;
	border-bottom: 0;
	display: inline-block;

    color: #3b3c4b;
    text-transform: uppercase;
    
    font-size: 0.875em;
    font-family: 'roboto';
    font-weight: 700;
	
	transition: 0.15s;
}

.icon-bylaw-link {
	margin-left: 5px;
}

.icon-bylaw-link:before {
    content: '\f02e';
    font-family: 'lasuze';
	font-size: 0.9em;
}

.bylaw-more-container{
	text-align: center;
    margin-top: -60px;
	margin-bottom: 120px;
}
.bylaw:hover{
    border: 1px solid #3b3c4b;
}

.bylaw:hover .bylaw-link {
	background: #3b3c4b;
    color: white;
}

.bylaw-more-btn{
	padding: 20px 40px;
	border: 1px solid #3b3c4b;
	
	font-size: 0.875em;
    font-family: 'roboto';
    font-weight: 700;
	text-transform: uppercase;
    color: #3b3c4b;

    transition: 0.15s;
}

.bylaw-more-btn:hover{
    color: white;
    background: #3b3c4b;
    cursor: pointer;
}

.no-bylaw{
    display: inline-block;
    margin: auto;
}

/* Overlay */
#overlay { display: block; width: 0; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background-color: rgba(0,0,0,0.85); opacity: 0; overflow: hidden; transition: opacity .3s ease-out, width 1ms linear .3s;}
#overlay.opened { width: 100%; opacity: 1; transition: opacity .3s ease-out;}
#overlay .content { display: block; width: calc(100% - 80px); min-height: calc(100% - 80px); position: relative; top: 100px; margin: 40px; padding: 40px; border-radius: 2px; background-color: #fff; transition: top .3s ease-out .1s;}
#overlay.opened .content { top: 0;}
#overlay .content .close { display: block; width: 40px; height: 40px; position: absolute; top: -20px; right: -20px; background-color: #e7e7e7; border-radius: 2px; cursor: pointer;}

@media screen and (max-width:1350px) {
    main.agendapage #calendar .fc-toolbar .fc-left { float: inherit; display: table; margin: 0 auto 10px auto; }
    main.agendapage #calendar .fc-toolbar .fc-right { float: inherit; display: table; margin: 0 auto 10px auto; }
    main.agendapage #calendar .fc-toolbar .fc-center { display: table; margin: 0 auto 10px auto;  }
}

#page-404 { display: block; width: calc(100% - 320px); position: absolute; top: 50%; left: 0; -moz-transform: translateY(50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 60px; color: #fff;}
#page-404::before { content: ''; display: block; width: 100%; height: 450px; position: absolute; top: calc(50% - 275px); left: 0; background-color: rgba(0,0,0,.6); z-index: -1;}
#page-404 h1 { font-size: 70px; text-transform: uppercase; font-weight: 700; line-height: 1; margin-bottom: 20px;}
#page-404 p { font-size: 25px; font-weight: 700; text-align: left;}
#page-404 a { color: #f95d43;}
#page-404 a:hover { text-decoration: underline;}

/* Google recaptcha */
button.g-recaptcha {
	display: block;
	width: 100%;
	height: 50px;
	color: #fff;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	background-color: #dd9933;
}

.grecaptcha-badge{
	visibility: collapse !important;
}

/* POPUP */
.popup {
    display: flex;
    width: 100%;
    height:100vh;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;

    margin:0;

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background-color: #0000008c;
}

.popup-body {
    display: block;
    width: 100%;
    max-width:750px;

    padding: 30px;
    border: 2px solid #1690c9;
    margin: auto;

    background-color: #ffffff;

    text-align: center;
    color: #f95d43;
}

.popup-close {
    display: block;
    width: 30px;
    height: 30px;

    position: relative;

    border: 0;
    margin:-10px -10px 15px auto;

    background-color: transparent;

    cursor: pointer;
}

.popup-close::before,
.popup-close::after {
    display: block;

    position: absolute;
    top: 50%;
    left: 50%;

    background-color: #000;

    content: '';

    transform: translate(-50%, -50%) rotate(45deg);
}

.popup-close::before {
    width: 40px;
    height: 2px;
}

.popup-close::after {
    width: 2px;
    height: 40px;
}

.popup-title {
    display: block;
    width: 100%;

    text-transform: uppercase;
    font-weight: 700;
    font-size: 30px;
}

.popup-text {
    display: block;
    width: 100%;

    margin: 30px 0;

    font-size: 20px;
    line-height: 30px;
    
    text-align: center;
}

.popup-button {
    display: inline-flex;
    max-width: 100%;

    padding: 10px;
    margin: 10px;
    
    border: 2px solid rgba(0,0,0,.15);

    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    background-color: #e42338;

    text-transform: uppercase;
    color: #fff;
}

.popup-button:hover {
    border: 2px solid #ff939e;
}

.popup-button img {
    width: 30px;
}