/*
	Theme Name: Malicorne
	Description: Thème du site de la Mairie de Malicorne
	Version: 1.0
	Author: BABAWEB
	Author URI: http://www.babaweb.fr/
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Oswald|Roboto:300,400,700');

/* CSS Reset */
* { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; list-style: none; text-decoration: none; color: inherit; outline: none; text-align: inherit; text-transform: inherit;}
input, button, select, textarea { border: 0; background: transparent; -webkit-appearance: none; -moz-appearance: none;}
a, button { cursor: pointer; overflow: visible;}

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

/* Wordpress Styling */
.alignleft, img.alignleft { float: left; margin: 0 20px 20px 0;}
.alignright, img.alignright { float: right; margin: 0 0 20px 20px;}
.aligncenter, img.aligncenter { clear: both; display: block; margin: 0 auto;}
body { font-family: "Roboto", sans-serif; font-size: 13px; line-height: 1.7;font-weight:400; background-image: url(img/background.jpg); background-repeat: repeat; 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 { }
main h1 { }
main h2 { font-family: 'Oswald', sans-serif; font-size: 20px; color: #e99633; text-transform: uppercase;}
main h3 { font-size: 20px;}
main h4 { font-size: 18px;}
main h5 { font-size: 16px; margin:15px 0; }
main p { text-align: justify; margin: 25px 0;}
main p:first-child { margin-top: 0;}
main p:last-child { margin-bottom: 0;}
main a { color: #3662a4; transition: .25s ease-out; }
main a:hover { text-decoration: underline;}
strong, b { font-weight: 700;}
main em, main i { font-style: italic;}
main ul, main ol { padding: 0 0 0 55px; margin: 25px 0;}
main ul li { position: relative; margin-bottom: 10px;}
main ul li::before { content: ''; display: block; width: 8px; height: 2px; position: absolute; top: 6px; left: -16px; border-style: solid; border-color: #e99633; border-width: 1px 0;}
main ol li { list-style: ; }
main hr { clear: both; margin: 30px 0; display: block; height: 1px; background-color: #e4e4e4; }

/* Slick */
.slick-list, .slick-track { height: 100%;}

.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: 'icons', 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;}

.col-container { display: table; width: 100%; table-layout: fixed; position: relative;}
.col, .col-container>* { 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%;}

/* Header */
header { display: block; width: 100%; height: 125px; position: relative; background-color: #fff; z-index: 1000;}

#logo { display: block; width: 350px; position: absolute; top: 0; left: calc(50% - 175px); padding: 40px 25px 10px 25px;}
#logo::before { content: ''; display: block; width: 150%; position: absolute; bottom: 0; left: -25%; padding-top: 100%; border-radius: 100%; background-color: #fff;}
#logo img { width: 100%; position: relative; z-index: 1;}

#search { display: block; width: 300px; height: 100%; float: left; background-color: rgba(115,107,100,.2); padding: 47.5px 0; text-align: center;}
#search input, #search button { height: 30px;}
#search button { width: 30px;}
header nav { display: block; width: calc(100% - 600px); position: relative; float: left; text-align: center; z-index: 1; font-size: 14px; text-transform: uppercase; color: #3460a2; line-height: 125px;}
header nav>ul { display: inline-block; line-height: normal;}
header nav>ul>li { display: inline-block; position: relative;}
header nav>ul>li>a { position: relative; z-index: 1; padding: 5px 25px;}
header nav>ul>li::before { content: ''; display: block; width: calc(100% - 20px); height: 4px; position: absolute; top: calc(100% + 25px); left: 10px; background-color: #3460a2; opacity: 0; -moz-transform: scaleX(0.8); -webkit-transform: scaleX(0.8); -o-transform: scaleX(0.8); -ms-transform: scaleX(0.8); transform: scaleX(0.8); transition: .2s ease-out;}
header nav>ul>li:hover::before, header nav>ul>li.active::before { opacity: 1; -moz-transform: scaleX(1); -webkit-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);}
header nav>ul>li:nth-child(odd)::after { content: '/'; position: absolute; right: -2px; top: 0;}
header nav>ul>li:nth-child(2) { margin-right: 350px;}
header nav>ul>li>ul { display: block; width: 100%; min-width: 150px; position: absolute; top: calc(100% + 44px); left: -6000px; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: #fff; opacity: 0; transition: opacity .2s ease-out, top .2s ease-out, left 1ms linear .2s;}
header nav>ul>li:hover>ul { top: calc(100% + 29px); left: 50%; opacity: 1; transition: opacity .2s ease-out, top .2s ease-out;}
header nav>ul>li>ul::before { content: ''; display: block; width: 100%; height: 44px; position: absolute; bottom: 100%; left: 0;}
header nav>ul>li>ul>li { display: block; width: 100%; height: 40px; background-color: rgba(115,107,100,.2);}
header nav>ul>li>ul>li:not(:first-child) { border-top: 1px solid #3460a2;}
header nav>ul>li>ul>li>a { display: block; width: 100%; height: 100%;}
header nav>ul>li>ul>li>a>button { width: 100%; height: 100%; text-align: center; padding: 5px 10px; line-height: 1; transition: .2s ease-out;}
header nav>ul>li>ul>li>a>button:hover { background-color: rgba(0,0,0,.2);}

header .logo-patner {
    height: 50px;
    position: absolute;
    right: 120px;
    top: 50%;
    transform: translateY(-50%);
}
header .logo-patner img {
    height: 50px;
    width: auto;
}

#facebook { display: block; width: 30px; height: 30px; position: absolute; top: calc(50% - 15px); right: 40px;}
#facebook button { width: 100%; height: 100%; border-radius: 100%; border: 1px solid #3460a2; color: #3460a2; text-align: center; transition: .2s ease-out;}
#facebook button:hover { background-color: #3460a2; color: #fff;}

@media screen and (max-width: 1540px) {
	header nav>ul>li>a { position: relative; z-index: 1; padding: 5px 10px;}
	header nav>ul>li:nth-child(2) { margin-right: 220px;}
	#logo { width: 250px; left: calc(50% - 125px);}
}

/* Footer */
footer { color: #fff;}
#footer-top>* { vertical-align: top; padding: 30px 20px; background-repeat: no-repeat;}
#footer-top h3 { font-weight: 700;}
#footer-top>*:first-child { padding-left: 40px; background-image: url(img/lieu.png); background-position: 20px 20px;}
#footer-top>*:nth-child(2) { background-image: url(img/horaires.png); background-position: 0 20px;}
#footer-top>*:last-child { padding-right: 40px; text-align: right; }
#footer-bottom { display: block; width: 100%; height: 50px; background-color: rgba(0,0,0,.3); line-height: 50px; text-transform: uppercase; font-size: 12px;}
#footer-bottom ul { display: block; width: 60%; padding: 0 40px; float: left;}
#footer-bottom ul li { display: inline-block;}
#footer-bottom a:hover, #footer-bottom span:last-child a:hover { color: #f95d43;}
#footer-bottom ul li:not(:last-child) { margin-right: 40px;}
#footer-bottom span:last-child { float: right; margin-right: 40px; color: #f95d43;}
#footer-bottom span:last-child a { color: #fff;}

/* Content */
#top { display: block; width: 100%; height: 510px; position: relative; overflow: hidden;}
#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: 100%; height: 100%; position: absolute; top: 0; right: 0; background-position: center; background-size: cover;}

#top .nav { display: block; height: 50px; position: absolute; bottom: 0; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); color: #fff;}
#top .nav .slick-dots { display: inline-block; height: 100%; padding: 0 20px;}
#top .nav .slick-dots li { display: inline-block; width: 10px; height: 10px; border-radius: 100%; border: 2px solid #fff; 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: #fff;}
#top .nav .slick-prev, #top .nav .slick-next { display: block; width: 50px; height: 100%; font-size: 25px; text-align: center; cursor: pointer;}
#top .nav .slick-prev { float: left;}
#top .nav .slick-next { float: right;}

#top #top-links { display: block; width: 300px; position: absolute; top: 1px; left: 0; font-family: 'Oswald', sans-serif; text-transform: uppercase; color: #3460a2;}
#top #top-links li { display: block; width: 100%; height: 60px; position: relative; margin-bottom: 1px;}
#top #top-links li button.active::before { content: 'X'; font-family: sans-serif;}
#top #top-links li .txt { display: none; width: 300px; max-height: 487px; position: absolute; bottom: 0; left: calc(100% + 1px); background-color: rgba(255,0,0,.7); color: #fff; padding: 20px; text-transform: none; font-weight: normal; font-family: 'Roboto', sans-serif;}
#top #top-links li button.active + .txt { display: block;}
#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; background-color: rgba(255,255,255,.9);}
#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: 7px; height: 100%; position: absolute; top: 0; right: 0;}
#top #top-links button span { position: relative; z-index: 1;}

#top #top-links .icon-alert { background-color: rgba(255,0,0,.7); color: #fff;}
.icon-reunion::after { background-color: #569ef9;}
.icon-urbanisme::after { background-color: #28a215;}
.icon-comptes::after { background-color: #6cc54a;}
.icon-camping::after { background-color: #e99633;}
.icon-bulletins::after { background-color: #7be0de;}
.icon-cantine::after { background-color: #de55e0;}
.icon-newsletter::after { background-color: #efbd2f;}
.icon-avis::after { background-color: #e15d44;}
.icon-alert::after { background-color: #fff;}

/* Feeds */
.feed { height: 400px; position: relative;}
.feed-title { display: block; width: 100%; height: 80px; padding: 0 40px; 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%); text-transform: uppercase; font-weight: 700; font-size: 24px;}
.feed-title a { display: block; width: 200px; height: 40px; float: right; margin: 20px 0;}
.feed-title a button { display: block; width: 100%; height: 100%; border: 1px solid transparent; text-align: center; transition: .2s ease-out; font-size: 14px;}
.feed-title a button:hover { border: 1px solid #fff;}

.feed-list { margin: 15px 0; padding: 0;}
.feed-list li a { display: block; width: 100%; padding: 15px 40px; position: relative; overflow: hidden; transition: .2s ease-out;}
.feed-list li a::before { content: ''; display: block; width: calc(100% - 40px); height: 100%; position: absolute; top: 0; opacity: 0; transition: .2s ease-out;}
.feed-list li:hover a::before, .feed-list li.active a::before { opacity: 1;}
.feed-list li a svg { width: 40px; height: 100%; position: absolute; top: 0; opacity: 0; transition: .2s ease-out;}
.feed-list li.active a svg, .feed-list li:hover a svg { opacity: 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; position: relative; padding-right: 15px; text-align: right; font-size: 12px; font-weight: 700; float: left;}
.feed-list li .date::after { content: ''; display: block; width: 1px; height: calc(100% + 30px); position: absolute; top: -15px; left: 100%;}
.feed-list li .date span { display: block; margin-bottom: 7px;}

.feed-list li .details { width: calc(100% - 100px); min-height: 80px; position: relative; padding-left: 15px; 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;}
.feed + .img { background-size: contain; background-position: center;background-repeat: no-repeat; opacity: 0; transition: .25s ease-out; background-color: #fff;}
.loaded #news>.img, .loaded #events>.img { opacity: 1;}

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

#news .feed { background-color: #9abcef; color: #3460a2;}
#news .feed-title { background-color: #3460a2; color: #fff;}
#news .feed-list li .date::after { background-color: #3460a2;}
#news .feed-list li:hover a, #news .feed-list li.active a { color: #fff;}
#news .feed-list li a::before { left: 0; background-color: #3460a2;}
#news svg { left: calc(100% - 40px);}
#news polygon { fill: #3460a2;}

#events .feed { background-color: #a9e985; color: #59ad2b;}
#events .feed-title { background-color: #59ad2b; color: #fff;}
#events .feed-list li .date::after { background-color: #59ad2b;}
#events .feed-list li:hover a, #events .feed-list li.active a { color: #fff;}
#events .feed-list li a::before { right: 0; background-color: #59ad2b;}
#events svg { left: 0;}
#events polygon { fill: #59ad2b;}
#events .tags { color: #597549; }

/* gallery */
#gallery { padding: 40px 0 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) / 8); 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%;}

/* Pages */
#wrapper { display: block; width: 100%; position: relative; overflow: hidden; background-color: #ffffff;}
#left-col { display: block; width: 300px; float: left; min-height: 1px; color: rgba(0,0,0,.7); background-color: #e6e6e6;}
#right-col { display: block; width: 300px; position: relative; z-index: 10; float: right;}
main { display: block; width: calc(100% - 600px); margin: auto; position: relative; z-index: 1; float: left;}
main.full { width: calc(100% - 300px);}
main article { display: block; width: 100%; max-width: 1000px; margin: auto; padding: 40px; position: relative; z-index: 1; overflow: hidden;}
main article iframe { width: 100%; }

#title { padding: 40px; background-image: url(img/background.jpg); color: #fff;}
#title .date { display: block; text-align: right; margin-top: 20px;}
#back { display: block; width: 100%;}
#back button { width: 100%; padding: 40px; background-image: url(img/background.jpg); color: #fff; text-align: center;}
#title h1 { font-family: 'Oswald', sans-serif; font-size: 35px; text-transform: uppercase;}

#left-col h3 { padding: 0 40px; margin: 25px 0;}

nav#left-col ul button { width: 100%; height: 40px; padding: 5px 20px 5px 40px; border-bottom: 1px solid #b1b1b1; text-transform: uppercase; font-weight: 700; font-size: 12px; transition: .2s ease-out;}
nav#left-col ul button:hover, nav#left-col ul button.active { background-color: #3460a2; color: #fff;}

.bloc-container { padding: 40px;}

#filters li { display: block; width: 100%; height: 31px; border-bottom: 1px solid #b1b1b1;}
#filters input { display: none;}
#filters label { display: block; width: 100%; height: 100%; padding: 0 20px 0 60px; position: relative; cursor: pointer; line-height: 30px;}
#filters label::before, #filters label::after { content: ''; display: block; width: 10px; height: 10px; position: absolute; border-radius: 100%;}
#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;}
/* 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 60px 40px 30px; color: #fff; position: relative; background-color: #345c98; transition: .2s ease-out;}
.bloc-container .col-33 .txt::before { display: block; width: 40px; height: 40px; position: absolute; top: calc(50% - 20px); right: 0; margin: 0; font-size: 25px; line-height: 40px; text-align: center; color: #48576f; z-index: 1; transition: .2s ease-out;}
.bloc-container .col-33 .txt::after { content: ''; display: block; width: 40px; height: 100%; position: absolute; top: 0; right: 0; background-color: #1a2d4b; transition: .2s ease-out;}
.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-overflow: ellipsis; margin-bottom: 10px;}
.bloc-container .col-33 .img { display: block; width: 100%; height: 50%; background-size: cover; background-position: center; background-color: #345c98; transition: .2s ease-out;}
.bloc-container .col-33:hover .txt, .bloc-container .col-33:hover .img { background-color: #477ec4;}
.bloc-container .col-33:hover .txt::before { color: #fff;}
.bloc-container .col-33:hover .txt::after { background-color: #7aaaf0;}

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

.bloc-container.events a:hover { text-decoration: none; }
.bloc-container.events .col-33 .txt, .bloc-container.events .col-33 .img { background-color: #cb740d;}
.bloc-container.events .col-33:hover .txt, .bloc-container.events .col-33:hover .img { background-color: #e99633;}
.bloc-container .col-33 .txt .tags { color: #000;}

nav#left-col.events ul button:hover, nav#left-col.events ul button.active { background-color: #e99633;}

#map { display: block; width: 100%; height: 650px; clear: both;}

/* 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], form button.g-recaptcha { text-align:center;background-image: url(img/bg-footer.png);display: block; width: 100%; height: 50px; color: #fff; cursor: pointer; text-transform: uppercase; font-size: 12px; font-weight: 700;}

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;}wpcf7-form [type=submit] { width: 100%; height: 50px; background-color: #e99633; color: #fff; text-align: center; text-transform: uppercase;}

/* Associations */
ul#accordion { display: block; width: 100%; padding: 0;}
ul#accordion>li { display: block; width: 100%; margin-bottom: 5px;}
ul#accordion>li::before { content: none;}
ul#accordion>li>button { display: block; width: 100%; height: 50px; padding: 0 50px 0 15px; position: relative; text-align: center; background-color: #e99633; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: .2s ease-out;}
ul#accordion>li.active>button { background-color: #fbead6; color: #e99633;}
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;}
#elus h2 { margin-bottom: 22px; }
.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: 16px; font-weight: 500;}
.elu .txt div { font-size: 12px; }
.elu .txt span { font-weight: bold; }

.meteo { 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%);}

a.bulletinarchive { display: block; margin-top: 80px; width: 200px; margin: 80px auto 20px; text-align: center; height: 40px; line-height: 40px; text-transform: uppercase; font-size: 12px; font-weight: bold; background-color: #3662a4; color: #fff;   border-radius: 5px; }
a.bulletinarchive:hover { text-decoration:none; background-color: #2b4d7f; }

.img-magnifier-container {
	position: relative;
}

.img-magnifier-glass {
	position: absolute;
	z-index: 1;
	border: 3px solid #000;
	border-radius: 50%;
	cursor: none;
	/*Set the size of the magnifier glass:*/
	width: 400px;
	height: 400px;
}

.lightbox {
	display: flex;
	width: 100%;
	height: 100vh;

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

	padding: 90px 90px 40px 90px;

	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	background-color: rgba(0,0,0,.8);

	color: #FFF;

	opacity: 0;
	overflow: hidden;
	transition: opacity .5s ease, left .1ms linear .5s;
}

.lightbox--opened {
	left: 0;
	opacity: 1;
	transition: opacity .5s ease;
}

.lightbox-close {
	display: flex;
	width: 50px;
	height: 50px;

	position: absolute;
	top: 40px;
	right: 40px;
	z-index: 1;

	border: 1px solid;

	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.lightbox-close::before,
.lightbox-close::after {
	display: block;
	width: 20px;
	height: 0;

	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 10px);

	border: 1px solid;
	border-radius: 2px;

	content: '';
}

.lightbox-close::before {
	transform: rotate(-45deg);
}

.lightbox-close::after {
	transform: rotate(45deg);
}

.lightbox-zoom {
	display: block;
	width: 100%;

	flex: 1 1 auto;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	cursor: zoom-in;
}

.lightbox-tips {
	display: block;
	max-width: 100%;

	position: relative;
	z-index: 1;

	padding: 15px 30px;
	margin: 30px 0 0 0;

	background-color: rgba(0,0,0,.588);

	text-align: center;
}