* {
box-sizing: border-box;
font-family: "Monserrat", sans-serif;
font-size: 15px;
line-height: 1;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin-right: 1%;
}
section {
flex: 5;
}
article {
flex: 1;	
}
h2 {
margin: 30px 0;
color: darkblue;
}
a {
text-decoration: none;
padding-right: 10px;
color: black;
}
ul {
margin: 2%;
padding: 0;
list-style-type: none;
color: grey;	
}
.belle {
font-family: "Satisfy", cursive;
font-weight: 400;
font-style: normal;
}
.belsize {
font-size: 12px;	
}
.blocfete {
display: flex;
flex-direction: column;
height: auto;
align-items: center;
justify-content: center;
text-align: center;
}
.mySlide {
display: none;
}
.slideshow-fete {
max-width: 500px;
margin: 5px 40%;
}
.bloc {
display: flex;
flex-direction: column;
height: auto;
align-items: center;
justify-content: center;
margin-top: 60px;
text-align: center;
}
.mySlides {
display: none;
}
.slideshow-container {
max-width: 500px;
position: relative;
margin: 40px 40%;
}
.texte {
position: absolute;
top: -80px;
border: 1px groove gold;
border-radius: 20px;
background-color: black;
color: gold;
font-size: 1.5em;
padding: 2px;
text-align: center;	
}
.dot {
display: inline-block;
height: 6px;
width: 6px;
margin: 20px 2px;
background-color: lemonchiffon;
border-radius: 50%;
transition: background-color 0.6s ease;
}
.active {
background-color: gold;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
0% {opacity: .3}
33% {opacity: .6}
66% {opacity: .9}
100% {opacity: 1}
}
@keyframes fade {
0% {opacity: .3}
33% {opacity: .6}
66% {opacity: .9}
100% {opacity: 1}
}
.content-wrapper {
display: flex;
width: auto;
height: 100px;
margin: 0 auto;
padding: 30px 0;
text-shadow: 1px 1px gold;
}
header nav { 
flex: 3;
justify-content: flex-start;
text-align: center;
}
header nav a {
text-align: center;
margin: 0.1%;
padding: 1px;
text-decoration: none;
border-bottom: 1px solid gold;
}
header nav a:hover {
border-bottom: none;
}
i {
padding: 0 5px;
}
.link-icons {
flex: 1;
justify-content: flex-end;
padding: 0 10px;
text-shadow: 2px 2px gold;
}
.link-icons:hover {
text-shadow: 1px 1px transparent;	
}
.panier {
color: rgb(158, 142, 21);
background-color: #fff;
font-size: 2em;
}
.centre {
text-align: center;
}
.espace {
margin-top: 50px;
}
.adroite {
text-align: right;
padding-right: 15%;	
}
.bdroite {
text-align: right;	
margin-right: 5%;
margin-top: 40px;		
}
.droite {
float: right;
}
.tdroite {
text-align: right;
padding-right: 5%;	
}
.souligne {
text-decoration: underline;
}
.featured {
display: flex;
flex-direction: column;
height: auto;
background: url('imgs/brocante.jpg') no-repeat center;
align-items: center;
justify-content: center;
text-align: center;
}
.featured h1 {
display: inline-block;
border: 4px groove gold;
background-color: black;
font-size: 68px;
color: gold;
}
.penche {
font-family: "Parisienne";
font-weight: 400;
font-style: normal;	
}
/*.featured p {
color: green;	
}*/
.recentlyadded {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;	
}
.produits {
margin: 0 auto;	
align-items: center;
}
.photo {
width: 80px;
height: 80px;
}
.middle {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, 50%);
text-align: center;
}
.recentlytable {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;	
}
table {
flex: 1;
border-collapse: separate;
margin: 1em;
}
th, td {
height: 50px;
}
.decald {
border-top: 1px solid grey;
}
.total {
text-align: right;
font-size: 1.5em;
border: 2px solid gold;
border-radius: 5px;	
padding: 10px;
background-color: snow;
}
.space {
margin-left: 25px;
color: pink;
cursor: pointer;
}
.gros {
font-size: 1.5em;
}
.grosfp {
font-size: 1em;
}
.grosfpi {
margin: 20px;
}
.dispo {
max-width: 650px;
margin: 2%;
padding: 12% 5% 12% 10%;
background: url('imgs/b.png') no-repeat center / cover;
border: 5px groove gold;
border-radius: 10px;
box-shadow: 2px 2px 10px gold;
}
.colo {
color: gold;
}
.colori {
color: red;
}
.colog {
color: green;
}
.blocpage {
margin-left: 95%;
}
.pagin {
margin: 10px;
}
.page {
margin: 0;
padding: 5px;
border: 1px solid black;
background-color: #FFFFE0;
text-align: center;
font-size: .6em;
}
.mini {
width: 30px;
height: 30px;
border: 1px solid beige;
border-radius: 50%;
}
input[type="number"] {
padding: 5px;
border: 1px solid grey;
border-radius: 3px;
background-color: lightgrey;
font-size: 2em;
cursor: pointer;	
}
input[type="number"]:hover {
padding: 5px;
border: 1px solid grey;
border-radius: 3px;
background-color: white;	
}
input[type="submit"].btn {
width: 200px;
height: 35px;
margin : 10px;
padding: 2px;
border: 2px solid gold;
border-radius: 3px;
background-color: black;
color: white;
font-size: 1em;
cursor: pointer;
}
input[type="submit"]:hover.btn {
padding: 5px;
border: 2px solid black;
border-radius: 3px;
background-color: gold;
color: black;
}
.container {
display: flex;
flex-direction: column;
}
.carte {
flex: 1;
max-width: 330px;
height: 530px;
margin: 40px auto;
background-color: #f1f1f1;
display: grid;
grid-template: repeat(2, 165px) 50px 100px 50px / repeat(3, 110px);
border-radius: 5px;
}
.divImg {
grid-area: 1 / 1 / 3/ 4;
background-size: cover;
background-position: 50% 50%;
filter: brightness(90%);
box-shadow: 0px 10px 40px rgba(0,0,0,.5);
}
.titre {
grid-area: 3 / 1 / 4 / 4;
padding: 2px;
font-size: 2em;
font-weight: 600;
text-align: center;
}
.trait {
opacity: 0.5;
}
.icone {
margin-right: 4px;
color: gold;
text-shadow: 2px 2px black;
padding: 8px;
border: 2px solid transparent;
border-radius: 50%;
}
.tab {
display: flex;
justify-content: center;
align-items: center;
margin-top: 0;
}
.gras {
font-weight: 600;
}
.peti {
font-size: 10px;
}
.screensize {
font-size: 9px;
}
.lier {
text-decoration: none;
color: black;
}
.prix {
position: relative;
height: 200px;
background: url('imgs/prix.jpg') no-repeat;
z-index: -1;
}
.la {
position: absolute;
top: 50px;
left: 24px;
font-size: 2em;
}
.btnSection {
grid-area: 5 / 1 / 7 / 4;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border: 2px solid #faa22c;
border-radius: 3px;
background-color: black;
padding: 2px;
box-shadow: 0px 5px 10px 0px rgba(250,162,44,.5);
transition: 1s all ease;
}
.btnSection a {
display: block;
text-decoration: none;
color: gold;
}
.btnSection a::before {
content:"";
background-color: gold;
color: black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 100%;
width: 0;
z-index: -1;
transition: all 0.6s ease;
}
.btnSection a:hover::before {
width: 100%;
content: "🔒 Ajouter au Panier";
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
z-index: 1;
}
summary {
max-width: 99%;
margin : 20px;
padding: 10px;
list-style: none;
border: 1px solid gold;
border-radius: 5px;
background-color: lightyellow;
}
summary img {
margin-right: 15px;
margin-bottom: -15px;
}
.cadre {
margin: 3%;
padding: 1% 2%;
text-shadow: 1px 1px white;
}
.retour {
width: 180px;
height: 35px;
margin: 0 auto;
padding: 2px;
background-image: linear-gradient(gold, white, gold 60px);
border: 1px solid gold;
border-radius: 10px;
font-family: Roboto;
font-size: 10px;
cursor: pointer;
}
.pointe {
box-shadow: 10px 10px 0px black;
transform: skew(15deg);
transition: 0.2s;	
}
.pointe:hover {
padding-left: 80px;
box-shadow: 10px 10px 0px khaki;
}
span.arrow {
margin-right: 25px;
position: relative;
}
span.arrow i {
transform: skew(-15deg);
transition: 0.2s;
animation: color 2s linear infinite;
}
@keyframes color {

0% { color:  black;}
50% { color: white; }
100% { color: black; }

}
span.arrow i:nth-child(1) {
position: absolute;
right: 0;
top: 5px;
animation-delay: 0.5s;
}
span.arrow i:nth-child(2) {
position: absolute;
right: 0;
top: 5px;
animation-delay: 1s;
}
span.arrow i:nth-child(3) {
position: absolute;
right: 0;
top: 5px;
animation-delay: 1.5s;
}
.pointe:hover i:nth-child(2) {
right: 20px;
}
.pointe:hover i:nth-child(3) {
right: 40px;
}
.bandeau {
margin: 0 5%;
width: 90%;
background-image: linear-gradient(gold, yellow, gold 180px);
border: 1px groove gold;
border-radius: 4px;
color: white;
font-size: 1em;
text-shadow: 1px 1px grey;
}
.bande {
color: khaki;
font-size: 1em;	
}
.blocmd {
max-width:650px;
margin-left:5%;	
}
.blocinq {
padding: 10px;
border: 2px dotted green;
border-radius: 20px;
font-size: 10px;
color: green;
}
.visu {
margin: 2px 5%;
padding: 2%;	
}
.renseigne {
background-color: #FAFAD2;
}
.ecart {
margin-bottom: 0;	
}
.input-icone {
width: 100%;	
height: 35px;
border: 2px solid grey;
border-radius: 4px;
margin: 8px 0;
padding: 8px;
outline: none;
}
.icone1 {
max-width: 700px;	
}
.icone2 {
max-width: 150px;	
}
.precis {
max-width : 1900px;
height: auto;
margin: 2%;
padding: 4%;
background: url('imgs/bgchq.jpg') no-repeat center / cover;
text-align: justify;
}
.clt {
margin: 0 30px;
padding: 4%;	
}
.lumier {
margin : 20px;
padding: 10px;
border: 1px solid gold;
border-radius: 5px;
background-color: lightyellow;
}
.containerpay {
padding: 20px;
}
.panel {
position: relative;
width: 350px;
margin: 0 auto;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
border-color: #ddd;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel > .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
color: #333;
font-weight: 600;
}
.overlay {
position: absolute;
left: 0; 
top: 0; 
right: 0; 
bottom: 0;
z-index: 9999;
background-color: rgba(255,255,255,0.8);
}
.overlay-content {
position: absolute;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
top: 50%;
left: 0;
right: 0;
text-align: center;
color: #555;
}
.hidden {
display: none;
}
.panel-body {
padding: 15px;
}
#paymentResponse{
font-size: 17px;
border: 1px dashed;
padding: 10px;
color: #EA4335;
margin-top: 0;
margin-bottom: 10px;
}
.status {
padding: 15px;
color: #000;
background-color: #f1f1f1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
margin-bottom: 20px;
}
.status h1 {
font-size: 1.8em;
}
.status h4 {
font-size: 1.3em;
margin-bottom: 0;
}
.status p {
font-size: 1em;
margin-bottom: 0;
margin-top: 8px;
}
.success {
color: #34A853;
}
.containimg {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding-top: 150px;
}
.marginput {
margin-top: 3px;
font-family: "Satisfy", cursive;
}
.bginput:hover {
background-color: rgb(212,197,132);
}
.textasize {
width: 170px;
height: 40px;
border: 2px solid grey;
border-radius: 3px;
font-family: "Satisfy", cursive;
}
footer {
display: flex;
justify-content: space-around;
margin-top: 5%;
background-image: linear-gradient(lightgrey, black 60px);
color: gold;
}
footer h4 {
font-family: "Satisfy", cursive;
font-size: 12px;
text-align: justify;	
}
footer a {
color: gold;
font-family: "Satisfy", cursive;
font-size: 12px;
}
.childone {
flex: 2;
align-items: center;
margin: 1%;
}
.childtwo {
flex: 1;
align-items: center;
margin: 1% 5%; 
}
.ecart {
width: 5%;
margin-right: 2px;
}
.cgv {
text-align: justify;
}
fieldset {
margin: 4%;
padding: 2%;
border: 2px groove gold;
border-radius: 20px;
}
.visua {
margin: 2px 2%;
padding: 5%;	
}
.taille {
max-width: 50%;
}
.imagirl {
margin: 30px 5%;
max-width: 80%;
}
.stripe-button {
white-space: nowrap;
display: inline-block;
padding: 0.7em 1.5em;
text-decoration: none !important;
outline: none !important;
line-height: 1;
border-style: solid;
box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,0.7) !important;
text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3) !important;
transition-duration: .3s;
-moz-transition-duration: .3s;
-webkit-transition-duration: .3s;
-o-transition-duration: .3s;
-khtml-transition-duration: .3s;
outline: none;
cursor: pointer;
border-radius: 2px;
}

.stripe-button, .stripe-button:visited {
background-color: gold;
border-color: #298439;
/*font-size: 18px;*/
font-weight: bold;
border-width: 1px;
}
.stripe-button:hover {
background-color: black;
color: gold;	
}
button:hover, button:active, button:focus {
filter: contrast(115%);
}
button:disabled {
opacity: 0.5;
cursor: default;
}
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
color: #ffffff;
font-size: 22px;
text-indent: -99999px;
margin: 0px auto;
position: relative;
width: 20px;
height: 20px;
box-shadow: inset 0 0 0 2px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.spinner:before,
.spinner:after {
position: absolute;
content: "";
}
.spinner:before {
 width: 10.4px;
 height: 20.4px;
 background: #30d14d;
 border-radius: 20.4px 0 0 20.4px;
 top: -0.2px;
 left: -0.2px;
 -webkit-transform-origin: 10.4px 10.2px;
 transform-origin: 10.4px 10.2px;
 -webkit-animation: loading 2s infinite ease 1.5s;
 animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
 width: 10.4px;
 height: 10.2px;
 background: gold;
 border-radius: 0 10.2px 10.2px 0;
 top: -0.1px;
 left: 10.2px;
 -webkit-transform-origin: 0px 10.2px;
 transform-origin: 0px 10.2px;
 -webkit-animation: loading 2s infinite ease;
 animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.imasucces {
max-width: 30%;
max-height: 30%;
border: 2px solid rgb(241, 241, 241);
border-radius: 50%;
}
/* fin Stripe */

@media screen and (min-width: 500px) {

.cadre {
margin: 6%;
padding: 1% 4%;
}

}

@media screen and (min-width: 1000px) {

* {
font-size: 16px;
line-height: 1.6;	
}
.featured {
height: 1000px;
}
.dispo {
max-width: 1200px;	
padding: 20% 10%;
background: url('imgs/b.png') no-repeat center / cover;
}
.cadre {
padding: 1%;
text-shadow: none;
}
.adroite {
padding-right: 35%;
}
input[type="submit"].btn {
width: 300px;
height: 60px;
margin: 0;
padding: 5px;
font-size: 1.5em;
}
.marginput {
margin-top: 10px;
}
.textasize {
width: 200px;
height: 100px;
}
.screensize {
font-size: 15px;
}
footer h4{
font-size: 20px;
}
footer a {
font-size: 20px;
}
.ecart {
width: 10%;
margin-right: 15px;
}
.la {
top: 35px;
left: 24px;
}
.visua {
margin: 2px 20%;
padding: 5%;	
}
.imagirl {
max-width: 60%;
margin: 40px 20%;
}

}


@media screen and (min-width: 1100px) {

.recentlytable {
justify-content: space-between;
}
.grosfp {
font-size: 2em;
}
.grosfpi {
/*max-width: 30%;*/
font-size: 1.3em;
}
.content-wrapper {
height: 250px;
}
header nav {
flex: 3;
justify-content: center;
}
header nav a {
padding: 40px;
}
.belsize {
font-size: 20px;	
}
.gros {
font-size: 2.5em;	
}
.centered{
padding-top: 300px;
}
.marginput {
margin-top: 30px;
}
.textasize {
width: 400px;
height: 300px;
}
.taille {
max-width: 100%;
}
.imagirl {
max-width: 50%;
margin: 50px 25%;
}
.photo {
width: 150px;
height: 150px;
}
.dot {
height: 15px;
width: 15px;
}
summary {
max-width: 50%;
}

}


@media screen and (min-width: 1400px) {

.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
.carte {
margin: 50px;
}
.bandeau {
margin: 0 20%;
max-width: 50%;
font-size: 2em;
}
.bande {
font-size: 1em;	
}
footer h4{
font-size: 30px;
}
footer a {
font-size: 30px;
}
.photo {
width: 200px;
height: 200px;
}

}