/********************** responsive design **********************/
@media (min-width: 320px) and (max-width: 480px) {
	div.lazy-agence-img-line {
		display: grid !important;
		justify-content: center;
    	line-height: 20px;
	}
	
	
	.paragraph {
		padding: 20px !important;
	}
	
	.flex-inline-search form {
		width: 100% !important;
	}
	
	.flex-inline-search form .btn-trouver {
		font-size: 0px;
		border-radius: 100%;
		height: 50px;
		width: 50px;
		position: relative;
		top: -4px;
	}
	.flex-inline-search form .btn-trouver i {
		display: none;
	}
  
	.flex-inline-search form .btn-trouver::before {
		content: "\f002";
		font: var(--fa-font-solid);
		font-size: 1.5rem;
		position: relative;
	}
	
	.list-agence {
		width: 75% !important;
	}
	
	.bloc-main-2 {
		display: block !important;
	}
	
	.page-id-47 #div-recherche, .page-id-47 #div-recherche-not-found {
		width: 350px !important;
	}
	
	.btn-regroupcredit.en-ligne a, .btn-credimmo.en-ligne a, .btn-assupret.en-ligne a, .btn-calculpret.en-ligne a, .btn-comparecredit.en-ligne a, .btn-barotaux.en-ligne a, .btn-estimebudimmo.en-ligne a {
		width: 350px !important;
	}
	
	/** Agence N2 **/ 
	.container-map-info {
		display: block !important;
	}
	
	.infoline {
		width: 100% !important;
	}
	
	#agence-modal {
		height: 80% !important;
	}
	
	#agence-modal .inline > a {
		margin: auto 5px auto 3px !important;
	}
	
	.map-agence {
		margin: auto !important;
		height: 200px !important;
		width: 100% !important; 
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	
	/** taux **/
	
	main div#modal div.modal-taux {
		height: auto !important;
	}
	
	.modal-taux {
		display: grid !important;
		padding: 0px !important;
	}
	
	#tagTauxBarometreImmo p.modal-taux-title {
		text-align: center !important;
		display: block !important; 
	}
	
	div.taux {
		margin: auto !important;
	}
	
	.container-box  {
		margin-top: 7rem !important ;
	}
  
}

/**********************Fin responsive design **********************/

/* css */
.space-between {
  margin: 0px 5px 0px 5px;
	font-family: "Gilroy bold";
}

.space-between a {
	text-decoration: none;
	transition: all 200ms ease-out;
}

.space-between a:hover {
	text-decoration: none;
	color: var(--blue) !important;
}

.list-agence {
transition: all 200ms ease-out;
}


.list-agence ul li:hover{
	font-size: 16px !important;
    font-family: "Gilroy bold";
}

.list-agence::before{
	background-image:none !important;
}

.btn-trouver{
	color: black;
    width: 150px;
    height: 42px;
    background: #FFC859;
    font-weight: bold;
}

.radius-8px{
	border-radius: 8px;
}

.paragraph {
	width: auto;
    padding: 80px;
}

.container-agence-search,
.container-agence {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.container-agence-search {
	margin-top: -110px;
}
 
.container-box {
	text-align: center;
	border-radius: 15px;
	width: 100%;
	box-shadow: var(--shadow-elevation-high);
	background-color: white;
	padding: 2em;
	box-sizing: border-box;
	margin-bottom: 2em;
}

.flex-inline {
  display: flex;
  flex-direction: row;
  line-height: 2em;
  justify-content: space-evenly;
  padding-left: 20%;
  padding-right: 20%;
}

/* .flex-inline-search {
  display: flex;
  flex-direction: row;
  justify-content: center;
} */

.map {
  top: 0;
  text-align: center;
  box-shadow: 0em red;
  border-radius: 15px;
  width: 100%;
  height: 700px;
  margin-bottom: 70px;
	z-index: 1;
}

.spacer {
  height: 30px;
}

.cta-agence {
  text-align: center;
  font-family: "Gilroy bold";
font-size: 25px;
}

.title-agence {
  text-align: center;
}

.list-agence ul li:hover {
	font-weight: bolder;
	font-size: 20px;
} 

.list-agence ul li a{
	text-decoration: none;
	margin-right: 4%;
}

.list-agence ul li:before {
	background: none;
}

.list-agence ul {
	width: 100%;
}

.list-agence {
	column-width: 15em;
	column-rule: 1px solid rgb(255, 255, 255);
	padding-top: 1%;
	width: 65%;
	padding: 50px;
}

.container-box-agence {
  box-shadow:var(--shadow-elevation-high);
  border-radius: 15px;
  width: 85%;
	padding: 25px;
	background-color: white;
}

/* .flex-inline {
  display: flex;
  flex-direction: row;
   justify-content: space-around; 
  line-height: 2em;
  justify-content: space-evenly;
  padding-left: 5%;
  padding-right: 5%;
  background: rgb(233, 232, 232);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
} */


.vl {
  border-left: 1px solid green;
  height: auto;
}

.infoline {
  width: 35%;
  height: 300px;
  border-top-left-radius: 15px;
}

.map-agence {
  width: 65%;
  height: 300px;
  border-top-right-radius: 15px;
  z-index: 1;
}

.container-map-info {
  display: flex;
  justify-content: center;
}

.inline {
  display: flex;
  justify-content: center;
}

.inline > a {
  color: black;
  text-align: center;
  margin: auto;
  margin: auto auto auto 35px;
}

div.info-inline {
  line-height: 1.2em !important;
}

.inline div,
.inline p {
  width: 200%;
  line-height: 4em;
}

.savoir-agence {
  display: block;
  width: 80%;
  padding-top: 16px;
  padding-bottom: 16px;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 14px 32px 0 rgb(73 73 121 / 8%);
  background-color: white;
  text-align: center;
  text-decoration: none;
  color: var(--blue);
  border: 1px solid var(--blue);
}

a.savoir-agence {
	color: var(--blue) !important;
	font-family: 'Gilroy bold';
}

.modal-taux {
  background-color: aquamarine;
  max-width: 375px;
/*   padding: 10px; */
  border-radius: 8px;
  margin: 1.72rem;
  display: flex;
}

.suivant {
  grid-column: 12 / 13;
  padding: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 14px 32px 0 rgb(73 73 121 / 8%);
  border: solid 2px var(--ui_97);
  position: relative;
  background: var(--ui_95);
}

.precedent {
  grid-column: 12 / 13;
  padding: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 14px 32px 0 rgb(73 73 121 / 8%);
  border: solid 2px var(--ui_97);
  position: relative;
  background: var(--ui_95);
}

.tableau-taux {
  display: flex;
  line-height: 0.8em;
}

.taux-annee {
  border: 1px solid black;
  border-radius: 15px;
  width: fit-content;
  padding: 4px;
  margin-left: 30%;
}

.taux-value {
  font-size: 30px;
  font-weight: bold;
  color: rgb(57, 111, 251);
  margin: 0px 0px 5px 0px!important;
}

.taux {
  text-align: center;
  width: max-content;
  position: relative;
/*   top: -20px; */
  padding: 5px;
  margin: 0px 0px 5px 0px !important;
}

.modal-taux-title {
  text-align: -webkit-center;
/*   margin: auto; */
}

.is-day {
  color: rgb(57, 111, 251);
  font-weight: bold;
}

/* fin css */

.savoir {
  display: block;
  width: 80%;
  padding-top: 16px;
  padding-bottom: 16px;
  font-family: Gilroy regular;
  margin: auto;
  border-radius: 8px;
  box-shadow: 0 14px 32px 0 rgb(73 73 121 / 8%);
  background-color: #ffc859;
  color: black !important;
  text-align: center;
  text-decoration: none;
}

div.leaflet-popup-content {
  text-align: center;
}

.leaflet-popup-content {
  line-height: 1 !important;
}

/* affichage immo */

.flex-inline-date{
	display: flex;
    flex-direction: row;
    line-height: 2em;
    justify-content: space-evenly;
    padding-left: 5%;
    padding-right: 5%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: #f9f3f3;
}

.flex-inline {
  display: flex;
  flex-direction: row;
  /* justify-content: space-around; */
  line-height: 2em;
  justify-content: space-evenly;
  padding-left: 5%;
  padding-right: 5%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
	margin-bottom: 15px;
}

.flex-inline-search {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 30px;
}

.vl {
  border-left: 1px solid green;
  height: auto;
}

.infoline {
  width: 45%;
  border-top-left-radius: 15px;
}

.container-map-info {
  display: flex;
  justify-content: center;
}

.inline {
  display: flex;
  justify-content: center;
}


#agence-modal {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
	font-size: 18px;
}

#agence-modal .inline a {
  text-decoration: none;
  font-family: 'Gilroy bold';
  transition: all 200ms ease-out;
}

#agence-modal .inline a:hover {
  color: var(--blue);
}

#agence-modal .inline a img {
  max-width: fit-content !important;
}

#agence-modal .inline div, #agence-modal .inline p {
	width: 200%;
	line-height: 4em;
  text-align: left;
}

#agence-modal .inline > a {
	color: var(--paracolor);
	margin: auto;
	margin: auto 15px auto 35px;
}

#agence-modal .savoir-agence {
  display: flex;
	align-content: center;
	align-items: center;
	justify-content: space-around;
	font-size: 20px;
	padding: 16px 10%;
	box-sizing: border-box;
  margin: 0 0 0 35px;
  transition: all 200ms ease-out;
}

#agence-modal .savoir-agence:hover {
  background-color: var(--blue);
  color: var(--white) !important;
}