html, body, .grid-container { height: 100%; margin: 0; font-family: "Montserrat", Helvetica, Arial, sans-serif; font-size: inherit;}
h1{font-size:2.5em; line-height:normal;}
h2{font-size:2em; line-height:normal;}
h3{font-size:1.7em; line-height:normal;}
h4{font-size: 1.5em; line-height:normal;}
p{font-size:1.3em; line-height: 1.3em; /*margin: 0 0 20px 0;*/}
a{color: inherit; transition: all 0.3s ease;}
.component h2, .component h3{color:#184e66;} .component h4{color:#16697a;}
.fa-2x {
  font-size: 1.3em !important;
  line-height: 0.7 !important;
}
a:hover, a:focus { text-decoration-line: none; outline: none;opacity:0.9; transition: all 0.3s ease;}
img{height: auto;max-width: 100%;vertical-align: middle;}
.inputbox {border: none !important; box-shadow: none !important;}
.acysubbuttons input.btn.btn-primary.button.subbutton {background: #f10384; border: 0; text-shadow: none;}
.acysubbuttons input.btn.btn-primary.button.subbutton, div.archive button.btn.btn-primary {background: #f10384; border: 0; text-shadow: none;} 
.acysubbuttons input.btn.btn-primary.button.subbutton:hover, div.archive button.btn.btn-primary:hover{opacity: 0.8;}
.grid-container {
  display: grid;
  grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap:;
  grid-template-areas:  "header header header header" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" ". une une ." ". component component ." ".actus actus." "important important important important" "bloc2 bloc2 bloc2 bloc2" ". le-gol le-gol ." "acces acces acces acces" "services services services services" "bloc1 bloc1 bloc1 bloc1" "infos infos infos infos" "e-serv e-serv e-serv e-serv" ". bloc bloc ." "bloc3 bloc3 bloc3 bloc3" "footer footer footer footer";
}


.important{grid-area: important; display: block;}
  
.header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "logo menu menu";
  grid-area: header;
  background:#184e66;
  padding: 10px 0 0 0;
}
.sprocket-lists-portrait {
  position: relative;
}

.sprocket-lists-portrait-container {
  overflow: hidden;
  padding: 0 !important;
}
.sprocket-lists-portrait ul {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
.sprocket-lists-portrait-container li {
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid #D3D3D3;
  clear: both;
  overflow: hidden;
  cursor: pointer;
}
.portrait-image {
  display: inline-block;
    margin: 0 10px 0 0;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
    float: left;
    width: 15%;
}

.sprocket-lists-portrait-item {
  display: block;
  position: relative;
}

.sprocket-lists-portrait-title {
  display: block;
    position: relative;
    font-size: 1.2em !important;
    line-height: 1.2em !important;
    margin: 15px 0;
  font-size: 1.3em !important;
  font-weight: 600;
  color: #184e66;
}

/* .active .portrait-image {  width: 30%;} */

.logo { grid-area:logo; display:flex; padding: 10px 0 0 20px;  }
.logo h1, .logo h2 {color:#ffffff;}
.fbh a{right: 0px;position:absolute;z-index:3000;padding:1%;}

.fbh a img{width:40px;height:40px;
  -webkit-transform: scale(1);transform: scale(1);-webkit-transition: .1s ease-in-out;transition: .1s ease-in-out;}
.fbh a img:hover {-webkit-transform: scale(1.1); transform: scale(1.1);}
.menu { grid-area: menu;}
/**********************************************************************/
#frame.outline {
    display: grid;
    width: 100%;
    color: #1c6680;
}
#frame.outline h1, #frame.outline p {
    font-size: 3em;
    font-weight: 800;
}
.hob_banner p {font-weight:inherit;}
/*******SERVICES**********************/
.blog h2, h3.card-header {font-size: 3em;color: #f10384;}
.blog .cat-children h3 {font-size: 1.5em; color:#184e66; font-weight: 700;}
.blog div.cat-children {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px 10px;
 	padding: 0 0 50px 0;
}
.blog div.category-desc.clearfix{margin: 0 0 50px;}

.blog div.cat-children img {
    /*** max-width: 200px !important; ***/
    transform: none !important;
    opacity: 1;
}
.blog div.cat-children div {
    padding: 0 5%;
    background: #f4f5f5;
    border-radius: 10px;
    border: 1px solid #eee;
}
.blog .category-desc {
	width: 100% !important;
	background: none !important;
	padding: 0 !important;
    border:0px !important;
}
div.blog div.cat-children div.com-content-category-blog__child h3.page-header.item-title a.btn.btn-sm.float-end {display: none;}
/*************.blog img {width: 100%;}*******************/

.blog .collapse.fade, .blog a.btn.btn-mini.pull-right {display: none;}
div.leading-0 div.system-unpublished figure.pull-left.item-image {
  width: -moz-available;
  max-height: 550px;
  height: auto;
}
div.leading-0 div.system-unpublished figure.pull-left.item-image a img {width: 100%;}

.blog div.cat-children div .puces li, ul.category-modulepuces.mod-list li {
  font-size: initial;
  font-weight: 500;
  padding: 3%;
}
.blog div.cat-children div ul.puces li::marker, ul.category-modulepuces.mod-list li::marker {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
	color: #184e66;
  	font-size: inherit;
}
dd {font-size: 0.9em; margin-left:0;}
.contact-address dd {line-height:2em;}
.icon-calendar {display:none;}
.contact dl.contact-address.dl-horizontal dd {font-size: inherit;font-weight: 500;}
.contact span.contact-telephone{font-weight: bold;}


/************************************************************************/
ul#sigFreeId22c09cfb03 .fancybox-gallery, ul#sigFreeId22c09cfb03 .fancybox-gallery img.sigFreeImg{
height:244px !important}
}
/******************TABLEAU************************************************/
div.moduletable.pv table.easyfolderlisting.pv tbody tr td{padding:10px !important;}
.easyfolderlisting tbody tr {display:block; padding: 10px;}
table, thead, tbody, th, td, tr {padding: 10px 0; word-wrap: anywhere;}
/*** table tbody tr td p {font-size:inherit}****/

/******************TABLEAUFIN************************************************/
.items-leading div.blog-item{ position: relative;}
.items-leading div.blog-item div.item-content h2.item-title{
	position: absolute;
	font-size: 3em;
	margin: 30% 7%;
	color: white;
}
.items-leading div.blog-item figure.pull-left.item-image{
	max-width: 100%;
	width: -moz-available;
	margin: auto;
	overflow: hidden;
	height: 30vw;
  	position: relative;
	background: linear-gradient(to top, rgba(22, 49, 62, 0.56) 8%,rgba(0,0,0,0) 85%);
  	width: -webkit-fill-available;
}
.items-leading div.blog-item figure.pull-left.item-image a img{
	width: 100%;
	z-index: -1;
	position: relative;}

	.items-leading dl.article-info.text-muted {display: none;}


.une { grid-area: une;}
.une .sprocket-accordion-arrow.arrow-up {border-bottom:0;margin-bottom: 0;}
.sprocket-accordion-content {
    color: #fff;
    padding: 20% 45% 5% 13%;
    position: relative;
    z-index: 2;
}
.sprocket-accordion-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(22, 49, 62, 0.56) 7%,rgba(0,0,0,0) 85%);
    height: 100%;
}
.sprocket-accordion-title {font-size:3em; font-weight: 800;}
.sprocket-accordion-desc > span {font-size: 1em; line-height: 1.3em;}
.sprocket-accordion-content .readon {background: rgb(241, 3, 132); font-weight: 700; color:#fff;}
/*.custom-shape{position: relative;	left: 0;width: 100%;overflow: hidden;line-height: 0;z-index: 1;top: -105px;}*/
.shape-divider svg {
    position: relative;
    display: none;
    width: calc(100% + 1.3px);
    height: 296px;
}
.custom-shape-divider-bottom-1596448457 .shape-fill { fill: #FFFFFF;}
/*****************************************************************************/
.breadcrumbs { grid-area: breadcrumbs; font-size: 0.8em;}
ul.breadcrumb {background: none !important;}
.actus { grid-area: actus; }
.le-gol { grid-area: le-gol; width: 100%;}
.custom-npnru-contact {padding: 5% 0 0 0;color: #fff;background: #16697a;}
.component { grid-area: component;}
.component div.blog {padding-bottom: 3%;}
.bloc { grid-area: bloc; width:100%;}
.customcovid {padding: 0 20px;}
.component div.item-page {width: 80%; margin: auto; padding: 60px 0 70px 0;}
div.search,div.contact {margin: 80px 0;}
.pager {margin:50px 0 20px 0;}
.com-content-article.item-page div.page-header { color: #184e66;}
.com-content-article.item-page figure.none.item-image img { width: 100%;}
div.com-content-article.item-page figure.none.item-image { margin: 0 0 60px 0;}
div.fastsocialshare-align-left { margin-top: 70px;}
/**********************bouttons********************************/
#button {
  display: inline-block;
  background-color: #F10384;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
 font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f106";
  font-style: normal;
  font-size: 3em;
  line-height: 50px;
  color: #fff;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
/***************************************/
.bta{
display: inline-block;
background: #e2c08a;
margin-bottom: 10px;
padding: 10px 15px;
border-radius: 20px;
width: max-content;
color: #2d6479;
font-weight: 500;
}
.bta:hover {
   opacity: 0.8;
}
.btns2 {
    position: relative;
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    text-decoration: none;
	color: #fff;
	background: #f10384;
	padding: 1em;
	border-radius: 15px;
	font-size: 0.8em;
	font-weight: 700;
    transition: all 0.2s;
}
.btns2 span {
    position: relative;
    right: 0;
    transition: right 0.3s ease;
    padding-right: 60px;
    padding-left: 5px;
}
.btns2 .icon {
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    display: inline-block;
    line-height: 40px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;text-align: center;width: 60px;
	font-size: 40px;
}
.btns2:hover span {
    right: 100%;
	color:#fff;
	transform: translateY(-3px);
}
.btns2:hover .icon {
    width: 100%;
    font-size: 40px;
    border-left: 0;
	color:#fff;
}
.btns2:active {
    transform: translateY(1px);
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
}
/**********************article********************************/
.component div.blog div.leading-0 div.pull-left.item-image {
    margin-bottom: 20px;
    overflow: hidden;
    width: 100%;
    max-height: 450px;
}
.component .item-page p a, .component .item-page li a {color: #f10384; text-decoration: underline; word-break: break-all;}
.category-name a:hover, li a.pathway:hover {color: #999;}
li a.pathway, .category-name a, .blog li a{color: #184e66;}

.component div.blog div.items-more {display: none;}
.item-content dd.category-name span.icon-folder-open.icon-fw, .item-content dd.published span.icon-calendar.icon-fw{display: none;}
dl.article-info.text-muted {display:block;}

.actus .nspArt h4.nspHeader {font-size: 1.3em; font-weight: 600; color:#184e66;}
.actus .nspArt .nspInfo {color:#999999; margin: 10px 0; font-weight: 400;}
.nspArt .nspInfo a {color: #184e66;display : block;}
blockquote p {font-size: 1.5em; font-weight: 600;font-style: italic;}
blockquote { border-left: 5px solid #f10384;}

div.blog div.leading-0 div.page-header h2 {text-align: center; font-size: 2em;}
.blog .items-row.cols-3 h2{font-size: 1.3em; font-weight:600;color:#184e66;}
.blog div.leading-0 dl.article-info.muted{text-align: center;}
.item-page div.page-header h2{font-size:3em; color:#184e66;}
.joomla_add_this {margin: 20px 0;}

.component .item-page div ul li, .customservices ul li, ol li{
    font-size: 1.3em !important;
    line-height: 1.5em;
    padding-left: 12px;
    margin:10px 0px;
}
.customservices ul li::marker{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f14a";
	font-size: x-large;
	color:#ffffff;
	text-rendering: optimizeLegibility;
}
ul.mod-articlescategory.category-module.mod-list li {
  line-height: 20px;
  font-size: initial;
  font-weight: 500;
  padding: 3%;
}
/***
ul li::marker {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f054";
color: #184e66;
font-size: inherit;
}***/

ul.valid li::marker {content: "\f14a";color:#5f82a0;}
ul.calendar li::marker {content: "\f073";color:#5f82a0;}

li.sigFreeThumb {
    margin: 0 1px 1px 0 !important;
    padding: 0 !important;
	list-style:none !important;
}
/******************************/
.blog .item-image {overflow: hidden; height: 14vw; margin-bottom: 20px; width: -moz-available;}
.nspArt .nspImageWrapper {overflow: hidden; background:#184e66; max-height: 12vw;}
.nspArt img.nspImage:hover, .blog img:hover {
    background: #fff;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    overflow: hidden;
	opacity:0.7;
}
.nspArt img.nspImage, .blog img {
    max-width: 100%;
  	width: -moz-available;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
/********************************************************/
.acces {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr ;
  gap: 1px 1px;
  grid-template-areas: ". acces-titre acces-titre acces-titre. " ". acces-1 acces-2 acces-3 ." ". acces-4 acces-5 acces-6 .";
  grid-area: acces;
  padding: 5% 0 5% 0;
  background:#184e66;
  color:#ffffff;
  text-align: center;
}
.acces-titre { grid-area: acces-titre; color:#e2c08a; text-align: center;}
.acces-titre h1, .agenda h2 {font-size:3em;}
.acces h4 {
    color: #fff !important;
    font-size: 1em;
    font-weight: 500;
}
.btns{
  margin : 0 auto;
  color:#fff;
  box-shadow: 0 0 0 4px #fff;
  background:#fff;
  border-radius: 50%;
  padding: 15px;
  width: 3em;
  height : 3em;
  background-color:transparent;
  -webkit-transition: all 0.5s 0s ease;
	-moz-transition: all 0.5s 0s ease;
	-o-transition: all 0.5s 0s ease;
  transition: all 0.5s 0s ease;
}
.btns:hover {
    box-shadow: 0 0 0 0;
    background: #fff;
    color:#184e66;
    -webkit-transition: all 0.5s 0s ease;
-moz-transition: all 0.5s 0s ease;
-o-transition: all 0.5s 0s ease;
transition: all 0.5s 0s ease;
}

#a-1 ul{
  	width: 100%;
	height: auto;
	top: 30%;
	margin-top: -49px !important;
	position: absolute;
	-webkit-columns: 3 160px;
	-moz-columns: 3 160px;
	columns: 3 160px;
	-webkit-column-rule: 1px dotted rgba(85,103,142,0.3);
	-moz-column-rule: 1px dotted rgba(85,103,142,0.3);
	column-rule: 1px dotted rgba(85,103,142,0.3);
}
#a-1 li {
	display:;
    margin: 0 0 30px 0;
	padding: 0 0 20px;
    border-bottom: 1px solid rgba(85,103,142,0.3);
}

#a-1 a:hover {color:#bdcbea !important;}

.ci::before, .pass::before, .uni::before, .child::before, .home::before, .vote::before, .people::before, .deces::before, .online::before  {
    font-family: "Font Awesome 5 Free";
    font-size: 2em !important;
    display: grid;
    margin: 0 0 20px 0;
	font-weight: 900;
}
#a-1 li a {font-size: 1.3em !important;}
.ci::before {content: "\f2bb";}
.pass::before {content: "\f5ab";}
.uni::before {content: "\f70b";}
.child::before {content: "\f77d";}
.home::before {content: "\f015";}
.vote::before {content: "\f756";}
.people::before {content: "\f4ff";}
.deces::before {content: "\f684";}
.online::before {content: "\f14d";}

.acces-1 { grid-area: acces-1; margin: 0 auto; padding: 0 0 30px 0;}
.acces-2 { grid-area: acces-2; margin: 0 auto;}
.acces-3 { grid-area: acces-3; margin: 0 auto;}
.acces-4 { grid-area: acces-4; margin: 0 auto;}
.acces-5 { grid-area: acces-5; margin: 0 auto;}
.acces-6 { grid-area: acces-6; margin: 0 auto;}

.infos{grid-area: infos;display: grid;padding: 5%;}
.infos h1::before {
    content: attr(data-text);
    color: #224e7d;
    font-style: initial;
    padding: 0 10px;
}
.e-serv {grid-area: e-serv;
	display: grid;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height:;
    background-image: url('/templates/saint-louis-20/images/demarches-ligne.jpg');
	background-color: coral;
    justify-content: center;
    align-items: center;
    color: #fff;
	font-weight: 500;
	padding: 5%;
}
.customservices {padding: 0 41% 5% 0%;}
.customservices ul li p {font-size: inherit;}

.e-serv h1::before {
    content: attr(data-text);
    color: #fff;
    font-style: initial;
}
.services {
    grid-area: services;
    display:block;
    grid-template-columns: 2fr 1fr;
    padding:;
    grid-template-rows: 1fr;
    gap: 20%;
  	background:#f9f9f9;
}
.module.info-c h3 {font-size: 3em;line-height: initial;margin: 28px 0;color:#184e66;}
.services h2::before {content: attr(data-text); color:#184e66;}
.services ul.sprocket-lists-portrait-container {margin:5% 0 0 0;}
.sprocket-lists-portrait-title {font-size: 1.3em !important;font-weight:600; color:#184e66;}
.portrait-text {font-size: 1em !important;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 0px 0 5px 0 !important;
}
.sprocket-lists-portrait-nav {padding:0px;}
.sprocket-lists-portrait-item a {
    color: #f10384;
    font-weight: 700;
    font-size: 1em;
    line-height: 3em;
}
.module.covid {margin: auto;}
.bloc1 { grid-area: bloc1;
	display: flex;
	background-attachment: fixed;
  	background-position-y:center;
	background-repeat: no-repeat;
	background-size:cover;
	background-image: url('/templates/saint-louis-20/images/ppe.jpg');
	/*justify-content: center;*/
	align-items: center;
	color: #fff;
    padding: 10% 3%;
	position:relative;
}
.bloc1::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: linear-gradient(120deg, #eaee44, #33d0ff);*/
    opacity: .7;
    position: absolute;
    z-index: 1;
    opacity: 0.6;
	mix-blend-mode: hard-light;
}
.bloc1 > * {
    z-index: 100;
}

.bloc1 h1 {
    font-size: 4em;
    font-family: "Fredoka One",Helvetica,Arial,sans-serif;
    font-weight: normal;
	text-align:center;
  	text-shadow: 2px 2px 0px rgb(255, 255, 255);
	color: #f10384;
	margin: 0 0 5% 0;
	line-height: 0em;
}
.bloc2 { grid-area: bloc2;
      display: grid;
      grid-template-columns: 0.5fr 1fr 1fr 0.5fr;
      grid-template-rows: 1fr;
      gap: 1px 1px;
      grid-template-areas: ". agenda agenda .";
      padding: 3% 3%;
  	  background-color:#eeeeee;
		/* background-position: top;
		background-image: url('/templates/saint-louis-20/images/Sun-Tornado.svg');
		align-items: center;
		background-attachment: fixed;
		background-size: cover; */
}
.agenda { grid-area: agenda; width: 100%;}
div.une div#nsp-nsp-306.nspMain.agenda.activated { margin-bottom: 40px;}

	.agenda .nspCol3 {width: 32.33333%;}
	.agenda .nspArts .nspImageWrapper{
	overflow: hidden;
	max-height: fit-content;
	width: 100%;
	}
	.agenda .nspArt h4.nspHeader {
    font-size: 1.3em;
	font-weight: 600;
    text-align: center;
    line-height: normal;
	position: relative;
    padding: 20px;
    width:auto;
	}
	.agenda .nspArt.nspCol3 {
		background: rgb(24, 78, 102);
		margin: 3% 0 0 1%;}
	.agenda a {color: #fff;}
	.agenda .nspArt .nspInfo {
    font-size: 1.8em;
	line-height: 1em;
    font-weight: 800;
    background: #f10384;
    padding: 2%;
	position: absolute;
	color: #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: 2% 0 0 1%;
	}
	.agenda .nspInfo2{
    font-size: 1em !important;
    font-weight: 400 !important;
	background: none !important;
	position: relative !important;
	width: 100% !important;
	padding: 0 !important;
	height: auto !important;
	margin: 0 !important;
	}
	.agenda .nspArt .nspInfo a {color: #e2c08a;}
	
.bloc3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "newsletter newsletter mairie mairie";
  grid-area: bloc3;
  text-align: center;
  background: #eeeeee;
}
.newsletter { grid-area: newsletter;
		border-right: 1px solid rgba(255, 255, 255, 0.2);
		margin: 10% 3%;
 }
 table.acymailing_form {width: 40%;}

.mairie { grid-area: mairie; text-align:center; color:#194f66; padding:10% 0;}

.social-img{
	position: absolute;
	width: 400px;
	overflow: hidden;
	margin: 0;
}
.social-img img{display: block;	width: 100%;}
.footer { grid-area: footer; background:#194f66; color:#e2c08a;text-align:center;}
.footer .custom #setting { display:inline-block !important; position:relative !important;}
#copyright{margin:10px 0;}

div#maximenuck213.maximenuckh.ltr ul.maximenuck {background: none !important; margin: 20px 0;}
div#maximenuck213.maximenuckh ul.maximenuck li.maximenuck.level1{padding: 0 10px;}
div#maximenuck213.maximenuckh ul.maximenuck li.maximenuck.last.level1 {
    border-right: 0px !important;}
div#maximenuck213 ul.maximenuck li.maximenuck.level1:hover, div#maximenuck213 ul.maximenuck li.maximenuck.active
{background:none;}
div#maximenuck213.maximenuckh.ltr ul.maximenuck li.maximenuck a.maximenuck{padding: 0px 15px;}
/**************************************************/
div.fullNavOverlay{z-index:10000 !important;}
.fullNavbOverlayb{z-index:10000 !important;}
.fullNavbOverlayb div#acces-2{
	display:flex;
	justify-content: center;
	align-items : center;
	min-height:100vh;
	color: #fff;
}
.fullNavOverlay div#a-1{
	display:grid;
	justify-content: center;
	align-items : center;
	min-height:100vh;
}
/**************************************************/
div#rl_modals_wrapper div.page-header, .search.box .element-invisible {display: none;}
div#rl_modals_loaded_content div.joomla_add_this {display: none;}
.modal.fade.show {
  opacity : 1;
  display : block;
  top: 25%;
width: 70%;
left: 10%;
}

.modal-backdrop.fade.show {
  opacity: .5;
  visibility: visible;
}
.search.box div.modal-footer {
  border-top: 0px;
  background-color: transparent;
}
.search.box form {
  text-align: center;
  margin: auto;
  top: 0px;
  bottom: 0px;
  height: 50%;
  width: 60%;
  background-color: white;
  padding: 10px;
  position: relative;
}
.search.box form.form-inline .inputbox {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  width: 96%;
  font-size: 3.5em;
  height: auto;
  	-webkit-appearance: none;
	-moz-appearance: none;
  appearance: none;
  	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
  border-radius: 0px !important;
  border: 0px;
  border-bottom: 4px solid !important;
  background: transparent;
  color: #197599;
  box-shadow: none;
}
.search.box .form-inline button {
    background: none !important;
    border: 0;
    box-shadow: none;
    text-shadow: none;
    position: absolute;
  right: 0;
  top: 20px;
}
.search.box .form-inline button::after {
    display: block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f002";
    font-size: 3em;
    margin: 0 0 40px 0;
    color: #197599;
	-webkit-transition: all 0.5s 0s ease;
	-moz-transition: all 0.5s 0s ease;
	-o-transition: all 0.5s 0s ease;
	transition: all 0.5s 0s ease;}
.search.box button:hover::after {opacity:0.7;}
#rl_modals.no_title.complete{position: fixed !important;}

div.search form#searchForm div.btn-group.pull-left {display: block;}	
div.search form#searchForm input#search-searchword.inputbox {background: #eee;}
#osmap-li-uid-menuitem-133, #osmap-li-uid-joomla-article-1956 {display: none;}
div#archive-items div.row1, div#archive-items div.row0 {border-bottom: 2px #999 solid;}
div#archive-items div.page-header h2{font-size:1.3em;}
.gkTabsWrap.vertical ol li.active, .gkTabsWrap.horizontal ol li.active, .gkTabsWrap.vertical ol li:hover.active, .gkTabsWrap.horizontal ol li:hover.active {
    color: #fff; box-shadow: none;background: #184e66;border: 0;
}
.customlogos-up{padding:0 30px;}

@media all and (max-width:1500px) {
  .grid-container {
  display: grid;
  grid-template-columns: 0.2fr 1fr 1fr 0.2fr; 
  grid-template-areas: "header header header header"  "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "une une une une" ". component component ." "actus actus actus actus" "important important important important" "bloc2 bloc2 bloc2 bloc2" ". le-gol le-gol ." "acces acces acces acces" "services services services services" "bloc1 bloc1 bloc1 bloc1" "infos infos infos infos" "e-serv e-serv e-serv e-serv" ". bloc bloc ." "bloc3 bloc3 bloc3 bloc3" "footer footer footer footer";
    }
	.sprocket-accordion-content {
    color: #fff;
    padding: 15% 20% 10% 13%;
    position: relative;
    z-index: 2;
	}
  .actus {margin: 0 2%;}
	.bloc2 { grid-area: bloc2;display: grid;grid-template-columns: 0fr 1fr 1fr 0fr;}
  .e-serv, .bloc1 {background-attachment: inherit; background-size: cover;}
  .infos { background-image: url('/templates/saint-louis-20/images/Covid-19-2.jpg'); background-size: contain;}
  .nspArt .nspImageWrapper { max-height: 15vw;}
    .mod-banners__item.banneritem { height: 45vw;}
  	.sprocket-accordion-content { padding: 15% 20% 10% 13%; }
  
    .items-leading div.blog-item div.item-content h2.item-title {font-size: 2em;margin: 30% 5%;}
	.items-leading div.blog-item figure.pull-left.item-image{height: 40vw;}
  
}

@media (max-width:1300px) {
    .blog div.cat-children {display: grid;grid-template-columns: 1fr 1fr;gap: 10px 10px;}
  	.services {gap:7%;} .acces {grid-template-columns: 0.3fr 1fr 1fr 1fr 0.3fr;}
   .fbh a {right:25%;}
  .mod-banners__item.banneritem .content {padding: 20% 30% 5% 13%;}
  div.modal-footer, input#mod-search-searchword181.inputbox.search-query.input-medium { display:none !important;}
  
}

@media (max-width: 900px) {
.services { display: block;}
  .actus .nspArt h4.nspHeader {font-size: 1em;}
  .mod-banners__item.banneritem .content {  padding: 20% 10% 0% 13%;}
  div.com-content-article.item-page div.page-header h1 { font-size: 2em;}
  .breadcrumbs { font-size: 0.7em;}
  
}
@media (max-width: 800px) {
  	body {font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
	.logo h1 {font-size: 1.5em; font-weight: 600;}	
	.logo h4{display: none;}
	 table.acymailing_form {width: 55%;}	 
	.item-page div.page-header h2{font-size:2.5em;}
    .acces { grid-template-columns: 0.2fr 1fr 1fr 1fr 0.2fr;}
  	.bloc1{background-position: -200px 0px;}
	.bloc2 { grid-area: bloc2;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr;
      gap: 1px 1px;
      grid-template-areas: "agenda agenda agenda agenda";
      padding: 3% 3%;
}
  .bloc3 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "newsletter newsletter newsletter newsletter" "mairie mairie mairie mairie";}
.component {width:100%;}
.component div.item-page {width: auto;}
.actus {margin: 0px;}
.actus .nspArt h4.nspHeader, .agenda .nspArt h4.nspHeader, .blog .items-row.cols-3 h2 {font-size:1em}
.agenda .nspArt h4.nspHeader{ font-size: 1em;  padding: 10px;}
.nspArt {padding: 10px !important;}
.blog .span4 dd {font-size: 80%; margin-left: 10px;}
	.nspArts,
	.nspLinksWrap {padding: 0px;}	
	.sprocket-lists-portrait-title, .portrait-text {
	font-size: 1.3em !important;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin: 0px 0 5px 0 !important;
	}
   .portrait-text {
    font-size: 1em !important;
    }
  	.services ul.sprocket-lists-portrait-container {margin:5%;}	
	.services {grid-area: services; display: block;}
  	.services h2 {padding-bottom: 5% !important;}
	.customservices {padding: 0 20% 10% 0%;}	
	.agenda .nspArt .nspInfo { font-size: 1.3em;line-height: normal}
  	.mairie {font-size: initial;}
  	.mairie img {max-width: 60%;}
  
    .mod-banners__item.banneritem { height: auto;}
  
    .sprocket-accordion-title { font-size: 2em; }
  
  	div.mod-banners__item.banneritem div.content p { display: none;}
  
    .mod-banners__item.banneritem .content {
    color: #fff;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    padding: 20% 10% 3% 13%;
    background: linear-gradient(to top, rgba(22, 49, 62, 0.56) 8%,rgba(0,0,0,0) 85%);
  }
  
  	.items-leading div.blog-item div.item-content h2.item-title { font-size: 1.3em; margin: 40% 5%;}
	.items-leading div.blog-item figure.pull-left.item-image {height: auto;}
  
}

@media all and (max-width:640px) {
  
  	div#maximenuck213.maximenuckh ul.maximenuck li.maximenuck.level1 {padding: 0 10px; border-right: 0px solid !important;}
	
	.gkNspPM-GridNews figcaption > div {padding: 0px;}
	.gkNspPM-GridNews figure a { max-height: 15em;	}
	.gkNspPM-GridNews figcaption p {display: none !important;}
  	.gkNspPM-GridNews h3 {font-size: 1.7em;font-weight: 600;}
	.customservices {padding: 10%;}
	.acces-titre h1, .actus h2, .agenda h2, .module.info-c h3 {font-size:2em !important;}
	.blog div.cat-children img {max-width: 100% !important;}
	.blog h2 {font-size:initial !important;}
  	.blog h2 span.subheading-category {font-size: xx-large;}
    .nspArt .nspImageWrapper, .blog .item-image { max-height: fit-content;}
}

@media all and (max-width:600px) {
  .grid-container {
  display: grid;
  grid-template-columns: 0.2fr 1fr 1fr 0.2fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-areas: "header header header header" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "une une une une" ". component component ." "actus actus actus actus" "important important important important" "bloc2 bloc2 bloc2 bloc2" "le-gol le-gol le-gol le-gol" "acces acces acces acces" "services services services services" "bloc1 bloc1 bloc1 bloc1" "infos infos infos infos" "e-serv e-serv e-serv e-serv" "bloc bloc bloc bloc" "bloc3 bloc3 bloc3 bloc3" "footer footer footer footer";
    } 
  .custom-shape {top: -57px;}
  .custom-shape svg, .acces svg{height: 35px !important;} 
  .infos {padding: 51px 20px; background-size: cover;}
.acces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 1px 1px;
  grid-template-areas: "acces-titre acces-titre" "acces-1 acces-2" "acces-3 acces-4" "acces-5 acces-6";
  grid-area: acces;
  }
  .agenda .nspArtPage { display: block;}
  .agenda .nspArt h4.nspHeader { width: auto;}
#a-1 li a {
    font-size: 1em !important;
  }
  .social-img{width: 100%; opacity:0.5;} 
  .newsletter {border-right: 0px solid;}	
  .actus .nspArt.nspCol3{width:33.333333%; padding:0 5px 0 5px !important;}
  .actus div.nspArt.nspCol3:nth-child(n+4){display: none;}  
  .component div.blog {padding: 3%;}  
  .sprocket-accordion-content {
    color: #fff;
    padding: 20% 10% 3% 13%;
    position: relative;
    z-index: 2;
	}
	.mairie {
		margin: 0 10%;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		padding: 8% 0 0 0;
	}
	.bloc1 {height: auto;padding: 10% 2%;}
	.bloc1 h1 {font-size: 3em;}
	.agenda .nspArt.nspCol3 {
    width: 100%;
	}
	.agenda .nspArts .nspImageWrapper {
    overflow: hidden;
    max-height: 30vw;
    width: 100%;
	}
	.blog div.cat-children {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 10px;
	}
}
@media all and (max-width:450px) {	
  .grid-container {display: grid;
  grid-template-columns: 0.2fr 1fr 1fr 0.2fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 1px;  
  grid-template-areas: "header header header header" "breadcrumbs breadcrumbs breadcrumbs breadcrumbs" "une une une une" "component component component component" " actus actus actus actus" "important important important important" "bloc2 bloc2 bloc2 bloc2" "le-gol le-gol le-gol le-gol" "acces acces acces acces" "services services services services" "bloc1 bloc1 bloc1 bloc1" "infos infos infos infos" "e-serv e-serv e-serv e-serv" "bloc bloc bloc bloc" "bloc3 bloc3 bloc3 bloc3" "footer footer footer footer";
    }
  .logo a img{max-width:24vh;}
	.component {
		grid-area: component;
		/* padding: 10px 0 50px 0; */
		grid-template-columns: 0.96fr;}
	.component .item-page, .component div.search, div.component div.contact, .component div.archive {padding: 0 4% !important;}	
  .sprocket-accordion-title {font-size: 2em; line-height:normal;}
  .sprocket-accordion-desc > span {display: none;}  
  .item-page div.page-header h2{font-size:2em;}
  .actus .nspArt.nspCol3, .row-fluid .span4{width:100%; margin: 5px !important; border-bottom: 1px solid #eee; padding: 0 !important;}
  .actus .nspArt h4.nspHeader {margin: 24px 0;}
  .actus .nspArt .nspInfo, .actus .nspArt .fnone {font-size: 80%; clear: both; width: 55%; position: absolute; right: 0; margin:auto;}
  .page-header {padding-bottom: 0px;margin: 20px 0px;}
  .breadcrumb {padding: 0px 15px;margin: 0 0 0px;}
  .actus .nspArt .nspImageWrapper {display: block;width:40%;margin: 0 0 10px 0 !important;}
  .span4 .pull-left.item-image{
		display: block;
		position: relative;
		width:40%;
	}
  .blog .item-image { height: auto;}
	.span4 .page-header {
    width: 57%;
    float: right;
    font-size: 0.8em;
    margin:5px 0;
	border-bottom: 0px;
	}
	.span4  dl.article-info.muted{
	width: 60%;
    display: flex;
	float: right;
	font-size: 0.9em;
	margin: 0;
	}
	.span4 div.page-header h2{margin:0px;}	
	div.blog div.items-row.cols-3 h2 {font-size:initial;}
	.actus .nspArt.nspCol3 h4.nspHeader.tleft.fnone.has-image a, div.blog div.items-row.cols-3 h2{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 18px;
	max-height: 35px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 300px;
	font-weight: 600;
	}
 	dl {margin-bottom: 0px;}
	dl.article-info.text-muted{ display: flex;}
  	.acces-titre h1 {font-size: 2em !important; margin: 20px 20px 0 20px;}
	.services {background-size: 30vw;}
	.services h2 {font-size: 1.5em !important;}
  	.infos h1{font-size: 2em !important;}
	.e-serv h1{padding: 0 0 3% 10% !important; font-size: 2.5em !important;}
	.customservices h2 {font-size: 1.5em; font-weight: 500;}
	.customservices h3 {font-size: 1.3em; font-weight: 500;}
	.customservices ul li {font-size: 1em !important;}
	.bloc1 h1 {font-size: 2em;}
	.btns2 span {font-size: 0.7em;}
	.btns2 .icon {font-size: 28px;}
  	.btns2:hover .icon {font-size: 28px;}
	.agenda .nspArt .nspInfo {padding: 3%;}
  	.form-horizontal .control-label {float: none; width: auto; padding-top: 5px; text-align: center;}
    .form-horizontal .controls {margin-left: auto; text-align: center;}
  	ul.sigFreeClassic li.sigFreeThumb a.sigFreeLink {width: 150px !important;}
}