@charset "UTF-8";

/* CSS Document */
/**************************/
/* Généralités				  */
/**************************/

body {
    margin:0;
    padding:0;
    font-family:'Montserrat', sans-serif;
    color:#555;
    text-align:left;
    background-image: url("/img/jeremy-bishop-1braZySlEKA-unsplash-2.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
    background-attachment: fixed;
}
a {
    color:rgb(0,69,107);
    text-decoration: underline;
}
a.btn {
    text-decoration: none;
}
.btn-top {
    background-color:rgb(0,69,107) !important;
    color:white;
}
.btn-fishing {
    background-color:rgb(177,157,94) !important;
    color:white;
}
.maincontainer {
    min-height: 70vh;
}
th, td {
    font-family:'Montserrat', sans-serif;
    text-align:left;
}
a img {
    text-decoration:none;
    border:none;
}
.img-full{
    width: 100%;
}
.rotate-text {
    position: absolute;
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
    /* background: pink; */
    /* border: 1px solid red; */
    height: 50%;
    width: 50%;
    padding: 12px;
  }
.rotate {
    animation: rotation 2s infinite linear;
}
.white-frame{
    box-sizing: content-box;
    margin-top:0;
    margin-bottom: 24px;
    padding:1px 13px;
    outline: 16px solid rgba(0,0,0,0.5);
    background-color: rgba(255, 255, 255, 0.95);
}
#mainTitle {
    background: linear-gradient(90deg, rgba(0,0,0,0.75) 10%, rgba(0,0,0,0.2) 90%);
    margin:-8px 0 1px 0;
    padding:16px 24px 10px 24px ;
    font-family:'Roboto Condensed';
    font-weight: light;
    font-size: 1.2em;
    z-index: 200;
    position: relative;
    color:#bbb;

}
h2#mainTitle > * {
    margin: 0 10px 0 0;
}
h2#mainTitle a {
    color:white;
    text-decoration: none;
    font-weight: light;
    padding: 6px ;
    border-radius: 8px;
}
h2#mainTitle a:hover {
    background-color:white;
    color:rgb(0,69,107);
}
#intro h2 {
    font-size: 3em;
    font-family:"Roboto Condensed", Arial, Helvetica, sans-serif;
    background: linear-gradient(90deg, rgba(0,69,107,0.9) 10%, rgba(0,0,0,0.9) 80%);
    color: white;
    margin: 0;
    padding: 16px;
    text-align: left;
    z-index: 20;
    border: 10px solid rgba(0,0,0,0.5);
    border-width: 0 0 0 32px;
}
#intro article {
    font-size: 1.1em;
    background-color: rgba(255,255,255,.80);
    padding: 2px 32px;
    min-height: 132px;
}
#intro .date_maj {
    font-style: italic;
    color: #999;
    font-size: 0.8em;
}
.bg-top {
    background-color: rgb(0,69,107);
}
.bg-top .bg-opacity-75 {
    background-color: rgba(0,69,107,0.75);
}
.bg-top .bg-opacity-50 {
    background-color: rgba(0,69,107,0.5);
}
.bg-top .bg-opacity-25 {
    background-color: rgba(0,69,107,0.25);
}

.calendate {
   z-index:30;
   padding:5px 0 0 0;
   width:48px;
   box-shadow: 1px 5px 5px rgba(0,0,0,0.1);
   background-color:white;
   border:1px solid #333;
   color:#333;
   border-radius:8px;
   text-align: center;
   
}
.calendate .month{ background-color:#CC3300; color:white; display:block ; border-radius:0 0 6px 6px;}

@keyframes rotation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

#content {
    font-size:1.2em
}

a:hover {
    color:#0098AF;
    text-decoration:none;
}

hr.separation {
    clear:both;
    visibility:hidden;
    font-size:1px; height:1px; margin:0; padding:0;
}

h1, h2, h3, h4 {
    font-family: 'Roboto Slab', serif;
    font-weight:normal;
}

p {
    margin:1em 0;
}

.reserve {
    color:#FFFFFF;
}

.illustration {
    float:left;
    margin:0 10px 10px 0;
}

big { font-size:2em}

.lettrine {
    float:left;
    margin:10px;
}

.prix {
    font-size:1.3em
}

.nom_article {
    font-size:1.2em
}

.prix_barre {
    text-decoration:line-through;
    white-space:nowrap;
    color:#CC0000;
    font-size:0.8em
}

.nouveau_prix {/* color:#FF6600;*/
    white-space:nowrap;
    color:#FF0000;
    background-color:#FFFF00;
    padding:2px;
}
.alert {
    border-radius : 0;
}

.photo img {
    margin:0;
    padding:0;
}
.photo strong {
    position:absolute;
    display:block;
    left: 16px;
    top: 16px;
    background-color:rgba(0,0,0,0.50);
    color:white;
    padding:12px;
    z-index:100;
}

.marker {
    background-color: yellow;
    
}

/**************************/
/* Layout			  */
/**************************/

h2 {
    margin: 1em 0 0.8em 0;
    padding:0;
    font-size:2em;
}

h3 {
    margin:1em 0 0.6em 0;
    font-size:1.66em
}

h4 {
    margin:1em 0 0.6em 0;
    font-size:1.4em
}
h5 {
    margin:1 0 0.6em 0;
    font-size:1.2em
}

.warning-big {
    background:#BB3632;
    padding:4px;
    color:white;
    text-decoration:none;
    font-size:1.2em;
    border:3px double white;
}

a.warning-big:link {
    background:#BB3632;
    padding:4px;
    color:white;
    text-decoration:none;
    font-size:1.2em;
    border:3px double white;
}    /* lien non-visité */

a.warning-big:visited {
    background:#BB3632;
    padding:4px;
    color:white;
}   /* lien visité   */
a.warning-big:hover {
    background-color:#FF6600;
    padding:4px;
    color:white;
} /* lien survolé     */

a.warning-big:active {
    background:#0033CC;
    padding:4px;
    color:white;
}   /* lien activé    */

.au-panier {
    background:#0098AF;
    padding:4px;
    color:white;
    text-decoration:none;
    font-size:1.2em;
    border:3px double white;
}

.au-panier:link {
    background:#BB3632;
    padding:4px;
    color:white;
    text-decoration:none;
    font-size:1.2em;
    border:3px double white;
}    /* lien non-visité */

.au-panier:visited {
    background:#BB3632;
    padding:4px;
    color:white;
}   /* lien visité   */

.au-panier:hover {
    background-color:#FF6600;
    padding:4px;
    color:white;
} /* lien survolé     */

.au-panier:active {
    background:#0033CC;
    padding:4px;
    color:white;
}   /* lien activé    */

.continu-big, a.continu-big {
    background:#FF9900;
    padding:5px;
    color:white;
    text-decoration:none;
}

a:hover.continu-big {
    text-decoration:underline;
    color:white;
}
.icone_stock img {
	width: 75px;
}

table#caddie {
    border-collapse:collapse;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
}

table#caddie th {
    border-collapse:collapse;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}

table#caddie td {
    border-collapse:collapse;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}

#offer-box {
    background-color:rgba(189,20,20,0.9);
 }
 #offer-box .container{
    position:relative;
 }
#offer-close-btn {
    position:absolute; top:0; right:0; background-color:black; color:white; padding:4px
}
#offer-box img {
    position:relative; top:0px; left:0px; border:1px solid white; margin: 8px; max-width:100%;
}


#footer {
    color:#666;
    font-size:0.8em;
    padding:0;
    background: rgba(50, 60, 70, 0.8);
}
#footer .container {
    background: rgba(50, 60, 70, 0.8);
}
#footer p {
    padding:10px;
    margin:10px;
    color:white;
}
#footer a {
    color:white;
}
#navbottom {
    padding:0;
    margin:0 -15px;
    background: rgba(50, 60, 70, 0.8);
}
#navbottom ol{
    list-style:none;
    padding:24px 16px;
    margin:0 0 1px 0;
}
#navbottom  li{
    list-style:none;
    padding:0;
    margin:0 0 0 1px;
    display:inline-block;
}
#navbottom a {
    background-color:#222;
    padding:8px;
    margin:0;
    color:white;
    text-decoration:none;
}
#navbottom a:hover {
    background-color:#000;
}
#navgroup {
    padding:16px;
    margin:0 -15px;
    background-color:rgba(255,255,255,0.10)
}
#navgroup div {
    padding:0;
    margin: 0; 
}
#navgroup div > div {
    padding:0;
    margin:0; 
    display:inline-block;
    text-align:center;
    vertical-align:central;
}
#navgroup a{
    display:block;
    padding:8px 6px;
    margin:0; 
    background-color:rgba(255,255,255,0.80);
    min-height:80px;
}
#navgroup a:hover{
    background-color:white
}



.ombrage {
    border: 5px solid #fff;
    -moz-box-shadow: 8px 8px 12px #aaa;
    -webkit-box-shadow: 8px 8px 12px #aaa;
    box-shadow: 8px 8px 12px #555;
}

strong.lettrine {
    float: left;
    margin:0 10px 5px 0;
    font-size:2em;
    border:1px solid #999;
    color:#666;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding:0.1em 0.3em;
    background:#EEE;
}

#suggest_update_list form input[type="submit"]{
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
#suggest_update_list li{
    list-style: none;
}
#suggest_close{
    color:red; 
    opacity: 0.7;
    margin-left:-15px;
    padding-right:10px;
    cursor: pointer;
}
/* Disponibilité */

.dispo_green, .dispo_green2, .dispo_orange, .dispo_red, .dispo_black,.dispo_blue { font-size:3em; padding:0; margin:0}
.dispo_green { color:#339900; }
.dispo_green2 { color:#890 }
.dispo_orange { color:#CC6600 !important; }
.dispo_red { color:#900 !important;}
.dispo_black { color:#000 !important;}
.dispo_blue { color:#0098AF !important; }

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    header#intro {
        position: relative;
        min-height: 600px;
    }
    #intro > img {
    
    }
    #intro > div {
        position: absolute;
        bottom:10px;
        left: 0;
        right: 0;
    }
}