html,
    body {
        height: 100%;
        margin: 0;
    }
    
    .content {
        min-height: 100%;
    }
    
    .content-inside {
        padding-bottom: 50px;
    }
    
    .footer {
        color:#ffffff;
        height: 60px;
        margin-top: -50px;
        background-color: #293d6a;  background-image:url('../img/topx.jpg');  background-position:0 0px; background-repeat: no-repeat;
    }



@font-face {
  font-family: 'social';
  src:  url('../fonts/social.eot?lou6f1');
  src:  url('../fonts/social.eot?lou6f1#iefix') format('embedded-opentype'),
    url('../fonts/social.ttf?lou6f1') format('truetype'),
    url('../fonts/social.woff?lou6f1') format('woff'),
    url('../fonts/social.svg?lou6f1#social') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="social-"], [class*=" social-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'social' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.social-facebook2:before {
  content: "\ea91";
}
.social-twitter:before {
  content: "\ea96";
}


.social-facebook2 {
 color:#293d6a;
}
.social-twitter {
  color:#293d6a;
}


.social-facebook2:hover {
 color:#5971a5;
}
.social-twitter:hover {
  color:#5971a5;
}



    
    @font-face {
        font-family: 'codeh';
        src: url('../fonts/codeh.eot?kbcva9');
        src: url('../fonts/codeh.eot?kbcva9#iefix') format('embedded-opentype'), url('../fonts/codeh.ttf?kbcva9') format('truetype'), url('../fonts/codeh.woff?kbcva9') format('woff'), url('../fonts/codeh.svg?kbcva9#codeh') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    
    [class^="codeh-"],
    [class*=" codeh-"] {
        /* use !important to prevent issues with browser extensions that change fonts */
        font-family: 'codeh' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .codeh-codeh:before {
        font-size: 20px;
        content: "\e900";
    }
    
    @font-face {
        font-family: 'arialregular';
        src: url('../fonts/arial-webfont.woff2') format('woff2'), url('../fonts/arial-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'arialbold';
        src: url('../fonts/arialBold.woff2') format('woff2'), url('../fonts/arialBold.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'times';
        src: url('../fonts/times.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'icomoon';
        src: url('../fonts/icomoon.eot?qx1hzs');
        src: url('../fonts/icomoon.eot?qx1hzs#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?qx1hzs') format('truetype'), url('../fonts/icomoon.woff?qx1hzs') format('woff'), url('../fonts/icomoon.svg?qx1hzs#icomoon') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: block;
    }
    
    [class^="icon-"],
    [class*=" icon-"] {
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        color: #8dc63f;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .icon-shopping-cart:before {
        content: "\e901";
    }
    
    .icon-headphones:before {
        content: "\e900";
    }
    
    .icon-bin:before {
        content: "\e9ac";
        color: #a7a7a7;
    }
    
    .icon-bin:hover:before {
        color: #ea375c;
        cursor: pointer;
    }
    
    .inputa {
        margin-bottom: 10px;
        width: 100%;
    }
    
    #pano {
      
        max-width: 1200px;
        position: absolute;
        min-height: 500px;
        background-color: #ffffff;
        text-align: center;
        border-style: solid;
        border-color:#ea375c;
        z-index: 999;
        margin-top: 10px;
        padding-bottom: 20px;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    
    div:focus,
    input:focus,
    textarea:focus {
        outline: none;
    }
    
    .mail_input {
        font-size: 18px;
        letter-spacing: 1px;
        padding: 8px;
        width: 300px;
        display: block;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    
    .pass_input {
        font-size: 18px;
        letter-spacing: 1px;
        padding: 8px;
        width: 300px;
        display: block;
        margin: 0 auto;
        margin-bottom: 15px;
    }
    
    bouton_blanc {
        font-family: arialbold;
        font-size: 20px;
        color: #ea375c;
        border-style: solid;
        display: block;
        margin: 0 auto;
        width: 300px;
        padding: 10px;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        border-color: #cccccc;
        border-width: 2px;
        margin-bottom: 20px;
    }
    
    bouton_blanc:hover {
        color: #000000;
    }
    
    bouton_rose {
        font-family: arialbold;
        font-size: 20px;
        color: #ffffff;
        border-style: solid;
        background-color: #ea375c;
        width: 300px;
        padding: 10px;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        border-color: #ffffff;
        border-width: 2px;
        display: block;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    
    bouton_rose:hover {
        background-color: #000000;
    }
    
    message_de_pano {
        color: red;
        margin-bottom: 15px;
        display: block;
        margin-bottom: 20px;
    }
    
    pano_closer {
        position: absolute;
        right: 0px;
        font-size: 25px;
        font-family: arial;
        cursor: pointer;
        background-color: #d8d8d8;
        opacity: .5;
        width: 30px;
        height: 30px;
        color: #ffffff;
        border-bottom-left-radius: 3px;
    }
    
    pano_closer::after {
        content: "X";
    }
    
    pano_closer:hover {
        color: #000000;
    }
    
    pano_titre {
        text-align: center;
        font-size: 30px;
        font-family: arial;
        margin-top: 40px;
        letter-spacing: 1px;
        color: #818181;
        margin-bottom: 40px;
        display: block;
    }
    
    bouton_pano_label_gauche {
        font-family: times;
        float: left;
        margin-left: 90px;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 20px;
    }
    
    bouton_pano_label_gauche:hover {
        font-weight: bold;
    }
    
    bouton_pano_label_droit {
        font-family: times;
        float: right;
        margin-right: 90px;
        font-size: 14px;
        cursor: pointer;
        margin-bottom: 20px;
    }
    
    bouton_pano_label_droit:hover {
        font-weight: bold;
    }
    
    bouton_pano_label_centre {
        font-family: times;
        font-size: 14px;
        cursor: pointer;
        display: inline-block;
        margin-bottom: 20px;
    }
    
    bouton_pano_label_centre:hover {
        font-weight: bold;
    }
    
    label_centre {
        font-family: times;
        font-size: 14px;
        margin-bottom: 20px;
        display: block;
    }
    
    .btnpaiment {
        cursor: pointer;
        border-style: solid;
        border-width: 2px;
        width: 200px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        font-family: arialbold;
        font-size: 12px;
        letter-spacing: 2px;
        color: #505050;
        font-weight: bold;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        transition: all .2s ease-in-out;
        color: #ffffff;
        background-color: #ea375c;
        margin-bottom: 15px;
    }
    
    .btnback {
        cursor: pointer;
        border-style: solid;
        border-width: 2px;
        width: 200px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        font-family: arialbold;
        font-size: 12px;
        letter-spacing: 2px;
        color: #505050;
        font-weight: bold;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        transition: all .2s ease-in-out;
        color: #ffffff;
        background-color: #91dd7b;
        border-color: #ffffff;
        margin-bottom: 15px;
    }
    
    .btnpaiment:hover {
        border-color: #cbcbcb;
        color: #ea375c;
        background-color: #ffffff;
    }
    
    .btnback:hover {
        border-color: #ffffff;
        background-color: #7dce65;
    }
    
    .Prod {
        margin: 10px;
        display: none;
        text-align: center;
        vertical-align:top;
    }
    
    .ProdTour {
        border-style: solid;
        border-width: 1px;
        border-color: #e6e6e6;
        width: 280px;
        height: 280px;
    }
    
    .ProdImg {
        cursor: pointer;
        width: 200px;
        height: 200px;
        margin-top: calc( 50% - 100px);
        margin-left: calc( 50% - 142x);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        transition: all .15s ease-in-out;
    }
    
    .ProdImg:hover {
        transform: scale(1.1);
    }
    
    .ProdTitre {
        margin-top: 15px;
        margin-bottom: 7px;
        text-align: center;
        font-family: arialbold;
        color: #355a95;
        font-weight: bold;
        font-size: 15px;

        border-radius:5px;
        line-height:22px;
        width:280px;
    }
    


    
    .ProdTitrePRO {
        margin-top: 15px;
        margin-bottom: 7px;
        text-align: center;
        font-family: arialbold;
        color: #161f62;
        font-weight: bold;
        font-size: 15px;

        border-radius:5px;
        line-height:36px;
        width:280px;
    }
    














    .ProdPrix {
        text-align: center;
        font-family: arialbold;
        font-weight: bold;
        font-size: 18px;
        color: #339b33;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

     .ProdPrixX {
        text-align: center;
        font-family: arialbold;
        font-weight: bold;
        font-size: 18px;
        color: #395171;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }   

    .btnaddCart {
        cursor: pointer;
        border-style: solid;
        border-color: #cbcbcb;
        border-width: 2px;
        width: 200px;
        height: 40px;
        display: inline-block;
        line-height: 40px;
        font-family: arialbold;
        font-size: 12px;
        letter-spacing: 2px;
        color: #505050;
        font-weight: bold;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        transition: all .2s ease-in-out;
    }
    
    .btnaddCart:hover {
        background-color: #ea375c;
        color: #ffffff;
        border-color: #ffffff;
    }
    
    .imgHearticon {
        cursor: pointer;
        width: 20px;
        height: 20px;
        opacity: .45;
        position: absolute;
        margin-left: 107px;
        margin-top: 13px;
        z-index: 99999;
        display: none;
    }
    
    .imgHearticon:hover {
        opacity: 1;
    }
    
    #produits {
        width: calc( 100vw - 650px);
    }
    
    @media only screen and (min-width: 650px) {
        @media only screen and (max-width: 1100px) {
            #produits {
                width: 605px;
            }
        }
    }
    
    @media only screen and (max-width: 650px) {
        #produits {
            width: 305px;
        }
    }
    
    #viderpanier:hover {
        color: #ea375c;
    }
    
    .btnaddCartX {
        cursor: pointer;
        border-style: solid;
        background-color: #57af2f;
        color: #ffffff;
        width: 200px;
        height: 39px;
        display: inline-block;
        line-height: 40px;
        font-family: arialbold;
        font-size: 12px;
        letter-spacing: 2px;
        font-weight: bold;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        text-align: center;
    }
    
    .btnaddCartX:hover {
        background-color: #1d1d1d;
        color: #ffffff;
    }
    
    .catname:hover {
        color: #237b2d;
    }
    
.icoflo{
position:absolute; 
    margin-left:-40px; 
    margin-top:21px; 
    display:none;    
}

    .imgflower {
        display: none;
        position: absolute;
        margin-left: -170px;
        content: url(../img/po.png);

        margin-top:.px;
    }
    
    .btnfilter {
        background-color: #91dd7b;
        border: none;
        color: white;
        padding: 5px 7px;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        margin-top: -5px;
        cursor: pointer;
        font-weight: bold;
        letter-spacing: 1px;
    }
    
    .catname {
        text-align: left;
        margin-bottom: 6px;
        font-family: Times;
        letter-spacing: 1px;
        padding-left: 5px;
        font-size: 15px;
        cursor: pointer;
        transition: all .1s ease-in-out;
        border-bottom-style: solid;
        border-width: 1px;
    
        padding-bottom: 12px;
        display: none;
        text-decoration: none;
        color: #61bc4b;
        font-weight: bold;

    }


     #btn_inscript {
             display:inline-table;
            }
     #btn_connex {
            display:inline-table;
            }

    #btn_deconnex {
            display:inline-table;
            }

     





  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 1550px) {
            .social-twitter {
                display:none;
            }
            .social-facebook2 {
                display:none;
            }
        }
    }



  @media only screen and (min-width: 0px) {
        @media only screen and (max-width:1350px) {
            #btn_inscript {
                display:none;
            }
          
        }
    }




  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 1170px) {
            #btn_connex {
                display:none;
            }
          
        }
    }


   #btn_langue {
                display:inline-table;
            }

  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 845px) {
            #btn_langue {
                display:none;
            }
          
        }
    }



















  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 1140px) {
            #phonotop {
                display:none;
            }
          
        }
    }

 #topbtnapropos {
            display:inline-table;
            }

 #topbtnpromo {
            display:inline-table;
            }
 #topbtncontact {
            display:inline-table;
            }
 #topbtnproducts {
            display:inline-table;
            }


  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 1200px) {
            #topbtnapropos {
                display:none;
            }
          
        }
    }

  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 975px) {
            #topbtnpromo {
                display:none;
            }
          
        }
    }

  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 750px) {
            #topbtncontact {
                display:none;
                
            }
                      #topbtnproducts {
                display:none;
                
            }
        }
    }



 #cartContainer {
                right:181px;
                
            }

  @media only screen and (min-width: 0px) {
        @media only screen and (max-width: 1550px) {
            #cartContainer {
                right:35px;
                
            }
        }
    }