@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
body {
    font-family: 'Ubuntu', sans-serif;
}

.container {max-width: 1400px;}

.bg-green {background-color:#b90c2d !important; border-color: #b90c2d;}
.bg-red, .btn-danger{background-color:#C51E2D !important; border-color: #C51E2D;}
.bg-red-transparent {background-color: #C51E2D96 !important;}
.bg-black{background-color:black !important}
.bg-black-transparent {background-color: #00000091 !important;}

.btn-primary {color: #fff;background-color: #b90c2d;border-color: #b90c2d;}
.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle{background-color: #b90c2d;border-color: #b90c2d;}
.btn-primary.focus, .btn-primary:focus{box-shadow:none;}

.card{background-color:transparent}
.card-title{}
.lien-index:hover .card-title{}

.caveat{font-family: 'Caveat', cursive;}
#cadre_panier {position: sticky;position: -webkit-sticky;top: 0;}
#cadre_panier .card-body {overflow-y: scroll;max-height: 60vh;}

.cursor{cursor:pointer;}
.dropdown{position: static;}
.megamenu {position: static;}

.dropdown-menu{background-size: cover;border: none !important}
.dropdown-item {}
.dropdown-item:focus, .dropdown-item:hover{color: #b90c2d;background-color: transparent;}

h1{}

.indexcard {border: 3px solid white;}
.indexcard:hover {margin-top: -20px;margin-bottom: 20px;transition: margin 0.5s;border: 3px solid black;}

.fs12{font-size:1.2rem}
.fs15{font-size:1.5rem}
.fs18{font-size:1.8rem}
.fs20{font-size:2rem}
.fs25{font-size:2.5rem}
.fs28{font-size:2.8rem}
.fs30{font-size:3rem}

a, a:hover, .text-red{}

.menutop-right{position: absolute;top: 0;right: 0;text-align: right;}
.menutop-left{position: absolute;top: 0;left: 0;text-align: left;}


.modal-dialog{max-width:700px;}

.nav-link{padding-left: 2rem;font-weight:400;text-align:left}

.navbar-dark .navbar-nav .nav-link{}
.navbar-expand-lg .navbar-nav .dropdown-menu{}
.navbar-toggler{position: fixed;right: 10px;top: 10px;z-index:1060;color:white;}
.navbar-light .navbar-nav .nav-link {color: white;}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #d7d7d7;}

.front { position: relative; opacity: 0; transition-property: opacity; transition-duration: 0.5s; }
.front:hover { opacity: 1; }
.back { position: absolute;opacity: 0.5;-webkit-filter: grayscale(100%);  filter: grayscale(100%); }

.image_produit, .image_produit img {
    height: 180px;
    max-width: 100%;
    width: auto;
}

@media screen and (max-width:700px){
    .container{max-width:700px;}
    #header {position:sticky !important; top:0;z-index:1060}
    .image-produit{max-height:200px;width:auto;}
    .fs15{font-size:1.1rem}
    .fs28{font-size:1.8rem}
    .img1index, .img2index, .img3index, .img4index{position: absolute;bottom: 10px;top:initial;left:initial; right:initial;width:100%;text-align:center}
}