.formSL h1 {
display: block;
margin-block-start: .83em;
margin-block-end: .83em;
margin-inline-start: 0;
margin-inline-end: 0;
font-weight: 400;
text-align: center;
font-size: var(--e-global-typography-primary-font-size);
line-height: var(--e-global-typography-primary-line-height);
text-transform: none;
margin-top: 75px;
background: url(//www.lafermiere.com/wp-content/uploads/2022/01/filet-jaune-2.svg);
background-position: bottom;
background-size: 60% 8px;
background-repeat: no-repeat;
padding-bottom: 20px;
}
.formSL {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
flex-direction: column;
background: #fff;
font-size: 18px;
color: #78a0d4;
text-transform: uppercase;
position: relative;
margin-top: -490px;
font-family: 'Thistails Sans';
}
.formSL form {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
padding-bottom: 30px;
font-weight: 400;
font-size: 22px;
font-family: 'Report';
text-transform: none;
}
.formSL form img, .formSL form svg {
max-width: 75px;
}
.searchProduct {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
background: #fff;
padding: 35px;
border-radius: 10px;
border: 4px solid #78A0D5;
margin-top: 25px;
}
.searchProduct select {
padding: 12px 0px;
font-size: 16px;
color: #78A0D5;
font-weight: 400;
max-width: 60%;
border: 1px solid;
}
.searchProduct select option {
text-transform: lowercase;
}
.searchAdress {
margin-top: 35px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
font-size: 18px;
}
.searchAdress div {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
margin: 5px;
flex-direction: column;
padding: 35px;
width: 300px;
height: 200px;
border-radius: 10px;
border: 4px solid #78A0D5;
}
.box input {
padding: 5px 15px!important;
color: #78A0D5!important;
font-weight: 400;
font-size: 16px;
margin-top: 15px;
}
.btn-submit {
font-size: 18px;
margin-top: 35px;
background: #78A0D5;
border: 1px solid #78A0D5;
padding: 10px 100px;
color: #fff;
}
.btn-submit:focus {
outline: none;
border: none;
}
#map {
height: 60vh;
width: 60%;
overflow: hidden;
padding: 10px;
position: sticky!important;
margin: auto;
top: 0;
}
form [type=button]:not(:disabled){
cursor: pointer;
background: #78A0D5;
border: 0;
border-radius: 0;
}
.formSL button {
border: 0!important;
border-radius: 0!important;
}
.formSL button:focus {
cursor: pointer;
background: #78A0D5;
border: 0;
border-radius: 0;
outline: none;
}
#results::-webkit-scrollbar {
width: 4px;
background: #fff;
}
#results::-webkit-scrollbar-thumb {
background: #feec96;
}
.labl {
text-align: center;
}
.labl input[type=radio] {
visibility: hidden;
margin: 10px auto
}
.labl.active {
border: 4px dashed #78A0D5;
}
.loader {
position: fixed;
display: flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100vw!important;
height: 100vh;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
z-index: 99;
background-color: #78A0D5;
opacity: 70%
}
ul {
list-style-type: none
}
li {
list-style-type: none
}
#results {
display: flex;
flex-direction: column;
align-items: center;
min-width: 35vw;
max-height: 60vh;
overflow: auto;
}
.panelTitle {
margin-top: 25px;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
font-family: 'Report';
text-transform: none!important;
}
.panelTitle span:nth-of-type(1){
font-size: 18px;
}
.panelTitle span:nth-of-type(2){
font-size: 22px;
font-weight: 600;
margin-top: 20px;
}
.listeMagasin {
font-size: 16px;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
background: #d9dceb;
text-align: center;
width: 100%;
}
.infoMap {
display: flex;
flex-direction: column;
align-items: center;
font-family: 'Report';
font-size: 18px;
text-transform: none; 
}
.infoMap a {
margin-top: 15px;
color: #fff;
background: #78A0D5;
padding: 5px 25px;
border-radius: 10px;
}
.listeMagasin ul {
padding: 0;
padding: 0;
margin-top: 25px;
display: flex;
flex-direction: column;
}
.listeMagasin p {
margin-top: 25px;
}
.loader {
width: 60px
}
.loader-wheel {
animation: spin 1s infinite linear;
border: 2px solid rgba(30, 30, 30, .5);
border-left: 4px solid #000;
border-radius: 50%;
height: 50px;
margin-bottom: 10px;
width: 50px
}
.loader-text {
color: #000;
font-family: arial, sans-serif
}
.loader-text:after {
content: 'Chargement';
animation: load 2s linear infinite
}
@keyframes spin {
0% {
transform: rotate(0)
}
100% {
transform: rotate(360deg)
}
}
@keyframes load {
0% {
content: 'Chargement'
}
33% {
content: 'Chargement.'
}
67% {
content: 'Chargement..'
}
100% {
content: 'Chargement...'
}
}
.listeimg {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
padding: 10px;
flex-wrap: nowrap;
text-align: left;
}
.listeimg img {
max-width: 75px;
max-height: 75px;
padding-left: 15px;
padding-right: 15px;
}
.accordion {
background-color: #78A0D5;
color: #fff;
cursor: pointer;
padding: 18px;
text-align: left;
border: none;
outline: none;
width: 100%;
transition: 0.4s;
display: flex;
font-size: 18px;
max-width: 100vw;
justify-content: center;
align-items: center;
} .activated,
.accordion:hover {
background-color: #78A0D5;
color: #ffffff;
border: 0;
border-radius: 0;
} .panel {
background-color: white;
display: none;
}
.accordion:after {
content: '+'; font-size: 18px;
float: right;
margin-left: 5px;
}
.activated:after {
content: "-"; }
.column2 {
display: none;
max-height: 60vh;
overflow: hidden;
margin-top: 35px;
width: 90vw;
margin-bottom: 100px;
}
@media screen and (max-width: 768px) {
.searchAdress {
margin-top: 35px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
flex-direction: column;
}
.column2 {
display: flex;
margin-top: 35px;
width: auto;
flex-direction: column;
max-height: none;
}
#map {
height: 60vh;
width: auto;
overflow: hidden;
padding: 10px;
position: sticky!important;
margin: 15px;
direction: ltr; }
.searchProduct {
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
background: #fff;
padding: 35px;
width: 80vw;
text-align: center;
}
.searchProduct select {
padding: 12px 0px;
width: inherit;
}
.searchAdress div {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
padding: 50px;
margin: 5px;
flex-direction: column;
background: #fff;
padding: 35px;
width: 70vw;
height: unset;
text-align: center;
}
.formSL h2 {
font-size: var(--e-global-typography-primary-font-size);
line-height: var(--e-global-typography-primary-line-height);
}
.accordion {
background-color: #78A0D5;
color: #fff;
cursor: pointer;
padding: 18px;
text-align: left;
border: none;
width: 100vw;
outline: none;
transition: 0.4s;
display: flex;
font-size: 3vw;
max-width: 100vw;
justify-content: center;
align-items: center;
}
}