/** 
 * Responsive.css for template fluorspar
 *
 * @Generated by Zenofobe Visual Stylesheet on:- 24/09/20  at:- 12:28:11
 * @copyright Copyright 2003-2007 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * Added by rbarbour (ZCAdditions.com), Responsive DIY Template Default for 1.5.x (65)
 */
/* MOBILE PORTRAIT */
    @media (max-width:549px){
        #colonneG { width: 100%;}
        #colonneD { width: 100%;}
        
        
        
        
        
        /* LE MENU */
        .menu {
            width: 12.5%;
            height: 0px;
            border-radius: 10px;
            margin-top: 15px;
            margin-bottom: 30px;
            font-size: 0.8em;
            /*display:flex;*/
        }
        
        
         h1{text-align:center;font-size:25px; }       
        
    #titre{
        height: 100px;
        display: inline-block;
        box-sizing: border-box;
    }
    #image_titre{
        width: 100px;
        height: 100px;
        display: inline-block;
        box-sizing: border-box;
    }
    .position_logo{ 
        position: relative; 
        top: -148px;
        right: 180px;
    }
    
    #titre img{
        width:100%;
    }
        
        .centrage
        {
            padding-top:0em;
        }
        
        .article {
            margin-left: 0;
            margin-right: 0;
        }
        .article .quote {
            margin-right: 1em;
            margin-left: 1em;
        }
        .article .quote-titre {
            margin-left: 0.5em;
        }
        
        div.menu:hover { background:rgba(0,0,0,0);}
        .colonne_2 {grid-template-columns: auto;}
        .circle { width: 80%;  padding-right: 10px;  padding-left: 10px; margin-right:10px; margin-left: 10px;}


        .cartTotalValue,.cartRemoveItemDisplay {margin-top:15px}
        .cartTotalDisplayTitle {padding-top:15px}
        .cartUnitDisplay, .cartUnitDisplayTitle {margin-top:10px}
        #cartContentsDisplay.Main img {width:40%}
        div.cartUnitDisplay {margin-right:65px}
        
        img.listingProductImage{/*width:60%;*/}
        #productDetailsList {width:80%;margin:10px auto}
        #shippingEstimatorContent table {width:98%;margin:10px auto}
        #shippingEstimatorContent {padding:10px 5px}  
        
        #cartAdd  {width:auto;margin:0 auto;}
        .button_in_cart {width:80%}
        #cartSubTotal {float:none;padding:0;margin:0;text-align:center}
        
        #cartContentsDisplay.Main tr td,#cartContentsDisplay.Main tr td.cartUnit,#cartContentsDisplay.Main tr td.cartQuantity {display:block;overflow:hidden;width:99%!important;margin:0;padding:0}
        span.cartImage,span.cartProdTitle  {float:none;width:100% !important;margin:0 auto;text-align:center}
        span.cartProdTitle {margin-bottom:5px}
        
        span.cartImage {margin-top:10px}
        
        #tellAFriendDefault legend{max-width:100%}
        #shoppingCartDefault div.buttonRow {float:none;width:75%;margin:20px auto}
        .button_checkout,.button_continue_shopping  {text-align:center;width:85%}
        .buttonRow input[type=submit]{width:100%;margin:20px auto;text-align:center;display:block;}
        #checkoutSuccessLogoff .buttonRow {width:100%;text-align:center}
        .centerColumn input[type="email"],input[type="tel"],.centerColumn input[type="text"],.centerColumn select,.centerColumn input[type="password"] {width:87%}
        .centerColumn label {width:87%;text-align:left}
        .cartQuantityInput input[type=text] {width:50px}
        #gridSorter {margin-top:10px}
        
        .footer-news{
               display: block;
               justify-content: center;
               padding-bottom:2em;
               }
    
    .colonne_2 { /* aligner deux éléments*/
        display: block  !important;
        /*margin-bottom: 40px;*/
        gap:10px;
        width: 100%;
    }
    
        .colonne4 { /*aligner 4 éléments*/
        display: block;
                gap: 10px 2em;
        text-align: center;
        padding-top:2em;
        padding-bottom:2em;
    }
    
           .colonne_livre { /* aligner deux éléments*/
        display: block;
        /*margin-bottom: 40px;*/
        gap:10px;
        width: 100%;
        }
        
                .colonne3{
        display: inline;
        margin-bottom: 40px;
        text-align:center;
        gap:10px;
        width: 100%;}

        
        
        .circle_textone{
            display:block;
            padding-top: 20px;
            font-family: 'Cinzel';
            font-size:20px;
        }
        
        	    .saga img {
            width: 50%;
		}
		
		
		.grid-1 {
                  display: grid;
                  grid-template-columns: repeat(2, 1fr);
                
                  grid-template-areas:    "t        t   "
                                          "d12      d4  "
                                          "d9       d18 "
                                          "d23      d20 "
                                          "d2       d14 "
                                          "d5       d22 "
                                          "d1       d7  "
                                          "d10      d11 "
                                          "d13      d3  "
                                          "d6       d17 "
                                          "d19       d15"
                                          "d8       d21"
                                          "d16      d24";
                }
                
                .reels{
                display: inline;
                 text-align:center;
                }
                
                  .logos img{
                        width:10%;
                    }
                    
                          .autourduroman {  display: inline;
                margin-left: 10;
                }
                
                .gauche { width:75%; }
                
                .milieu { width:75%; }
                
                .droite { width:75%; }
                
                .image-autourduroman{
                  display: block;
                  width: 50%;
                }
                .image-autourduroman .image {
                  position: relative;
                  padding-bottom: 100%;
                  margin-bottom: 10px;
                }
                .image-autourduroman .image img {
                  height: 100%;
                  width: 100%;
                  object-fit: cover;
                  left: 0;
                  position: absolute;
                  top: 0;
                }
                
                .overlay-image {
                	position: relative;
                	width: 100%;
                	margin-bottom: 5px;
                }
                
                .titre1 {
                position:absolute;
                top:10%;
                width:100%;
                margin-left:none;
                }
                
               .titre2 {
                position:absolute;
                top:10%;
                margin-left:none;
                }
                
                 .titre3 {
                position:absolute;
                top:10%;
                margin-left:none;
                }
                
                .titre4 {
                position:absolute;
                top:10%;
                margin-left:none;
                }
                
                .image-autourduroman .image {
                  position: relative;
                  padding-bottom: 100%;
                }
                
                
                    .colonne{
                        width: 100%;
                    }
    
    
}






/* MOBILE LANDSCAPE */
@media (max-width:767px){
    .masquer {display: block !important;}
    .afficher{ display: none !important;}
    .centrer { display: block; }
    span.bulle{width:auto;}
    .bulle :hover span {width:auto;}
    
        #logo {margin-right:0}
        #tagline h1{text-align:center;font-size:40px; }
        .floatingBox {width:100%}
        #footerImages {display:block}
        #social-media, #footer-payments {float:none;display:block;width:95%;margin:0 auto}
        
        .onerow-fluid{width:100%;} 
        .onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
        
        #taglineWrapper, #logo {clear:both;width:100%;text-align:center}
        #logo {width:80%; max-width:180px;margin:0px auto;float:none}
        #logoContainer {padding:10px 0}
        
        #checkoutPayment,#checkoutConfirmDefault,#checkoutShipping {overflow:hidden}
        
        #header-lan-curr {margin:0;padding:0;width:100%;margin-bottom:5px}
        div#navMainWrapper,div#dropMenu,div#mega-wrapper   {display:none}
        
        #footer-payments {width:90%;float:none;margin:0 auto}
        #footer-payments img {display:block; margin: 0 auto}
        div.footerColumn {float:none;width:75%;margin:0 auto}
        div.footerMenu {border:none;margin:20px auto;min-height:initial}
        #customSuppNav .fa-ul {width:42px;margin:0 auto}
        
        #leftProductWrapper {width:100%}
        #rightProductWrapper{width:100%}
        
        #productMainImage {text-align:center;width:80%;float:none;margin:0 auto;}
        #productAdditionalImages {justify-content:center}
        #productImage {display:inline-block;margin:0 auto;clear:both;}
        
        #navSupp {background-color:transparent}
        #navSupp ul {display:block}
        
         img.listingProductImage {/*width:30%*/}
        .productListing-data img.listingProductImage{width:80%;margin:5px auto}
        
        div#navMain, div#navMain ul {float:none;text-align:center;padding:0;margin:0;width:100%!important;}
        
        #headerWrapper,div#logoWrapper {height:auto;}
        div.centerBoxContentsProducts.centeredContent, div.centerBoxContentsNew.centeredContent, div.categoryListBoxContents.centeredContent, div.centerBoxContentsAlsoPurch.centeredContent, div.centerBoxContentsFeatured.centeredContent, div.centerBoxContentsSpecials.centeredContent, div.specialsListBoxContents, div.categoryListBoxContents {float:none;width:97%!important;height:auto;margin:0 auto}
        .centerBoxContentsNew .productBox, .centerBoxContentsFeatured .productBox, .centerBoxContentsSpecial .productBox {margin-bottom:20px}
        div#logo IMG {clear:both;}
        .centerColumn{padding:0 0.5em 2.0em 0.5em;}
        
        .leftBoxContainer, .rightBoxContainer {margin:0.5em;}
        
        .centerColumn input[type="email"],.centerColumn input[type="text"],.centerColumn select,.centerColumn input[type="password"] {width:55%;height:30px}
        #cartAdd  input[type="text"] {width:60px}
        
        .centerColumn label {width:35%;line-height:26px}
        #viewControl select, #productAttributes label, #productAttributes input {width:auto}
        
        #productListing input[type="text"] {width:50px}
        
        div#advSearchDefault.centerColumn fieldset {clear:both;float:none;width:95%;}
        
        div#checkoutBillto, div#checkoutShipto,div#accountLinksWrapper {clear:both;float:none;width:95%}
        
        th#thcol1,th#thcol3,td#tdcol1,td#tdcol3,.minWidthHide {display:none;visibility:hidden;}
        .minWidthShow {display:block;visibility:visible;}
        
        /* SHOPPING CART */
        table.Main td.cartQuantity {padding-top:0}
        .minUnits {display:inline-block;text-align:center;width:auto}
        .fixedQuantity {text-align:left;width:100%;float:none;margin:10px 90px 0px 10px;padding:0}
        .cartProductDisplay {max-width:none}
        span.cartImage,span.cartProdTitle {width:47%!important;text-align:center;font-weight:bold} 
        span.cartProdTitle {float:right;font-size:1.1em;line-height:1.1em} 
        .rowOdd .cartProdTitle {color:rgb(0,0,0);}
        .rowOdd .cartProdTitle:hover {color:rgb(255,0,0);}
        .rowEven .cartQuantityTitle,.rowEven .cartTotalDisplayTitle,.rowEven .cartUnitDisplayTitle {color:rgb(58,58,58);}
        .rowOdd .cartQuantityTitle,.rowOdd .cartTotalDisplayTitle,.rowOdd .cartUnitDisplayTitle {color:rgb(0,0,255);}
        .cartProductDisplay {text-align:left;padding:5px;}
        .cartProductDisplay ul {text-align:left;padding:0px;margin:0;}
        div.buttonRow {margin:5px}
        .cartRemoveItemDisplay img {width:65%!important}
        /*.cartRemoveItemDisplay input[type=checkbox] {visibility:hidden}*/
        .cartRemoveItemDisplay input[type=checkbox] {  transform: scale(1.5);position:relative;top:5px}
        /*#shoppingCartDefault .buttonRow .faUpdate,#shoppingCartDefault .buttonRow input[type="image"]  {display:none}*/ /* Hide update button */
        #cartContentsDisplay.Main tr td {font-size:1.2em;display:block;overflow:hidden;width:99%!important}
        #cartContentsDisplay.Main tr.tableHeading {display:none}
        #cartContentsDisplay.Main img {width:80%;margin:0;padding:0px}
        .cartUnitDisplay {float:right;padding:0px 20px 0px 0px}
        #cartContentsDisplay.Main tr td.cartUnit {width:45% !important;float:left;padding-top:25px}
        #cartContentsDisplay.Main tr td.cartQuantity {width:55% !important;float:right}
        #cartSubTotal {padding:20px 3.6em 40px 0px;font-size:1.3em}
        .cartTotalDisplayTitle, .cartUnitDisplayTitle {display:inline;float:right;text-align:right;padding:0px 15px 0px 0px}
        .cartQuantityTitle {display:inline;float:right;text-align:right;padding:0px 5px 0px 0px;margin:20px 10px 0px 0px}
        .cartQuantityUpdate {float:right;padding:10px 30px 0px 0px}
        #buttonUpdateAll input[type=image] {width:150%}
        #buttonUpdateAll  {margin:20px 40px 20px 0px}
        .cartQuantityInput {float:right;height:50px}
        .cartQuantityInput input[type=text] {width:50px;height:40px;margin-right:10px;margin-top:2px}
        #productListing input[type="text"] {width:50px}
        div.cartQuantityUpdate {margin-right:10px}
        .cartQuantityUpdate input[type=image] {width:150%;margin-top:5px}
        .cartTotalValue {margin:0px 10px 0px 0px}
        .cartTotalDisplayTitle {margin:0px 0px 0px 0px!important}
        .faUpdateButton {padding-top:12px}
        .deleteIcon {padding:0;float:left}
        .faUpdateButton i, .deleteIcon i {font-size:35px}
        
        /* Easy Tabs - Set to accordion style */
        ul.resp-tabs-list {display: none;}
        h2.resp-accordion {display: block;}
        .resp-vtabs .resp-tab-content {border: 1px solid #dbdbce;}
        .resp-vtabs .resp-tabs-container {border: none;float: none;width: 100%;min-height: initial;clear: none;}
        .resp-accordion-closed {display:none !important;}
        .resp-vtabs .resp-tab-content:last-child {border-bottom: 1px solid #dbdbce !important;}
        /* End of Easy Tabs */
        
        /* Slimmenu */
        ul.slimmenu {float:none;width:100%}
        #menuContainer {float:none;border:none;box-shadow:none;display:block;margin:0;width:100%;height:50px}
        .menuImage{display:inline}
        .slimmenu .level2,.slimmenu .level3,.slimmenu .level4 {box-shadow:none;}
        .slimmenu .level1  {border:none;border-right:none}
        .slimmenu {font-size:20px}
        ul.slimmenu .level1 a,ul.slimmenu .level2 a {line-height:16px;padding:10px 5px;}
        ul.slimmenu .level1 a,ul.slimmenu .level2 a {padding:10px 5px;}
        ul.slimmenu ul.level2 li  {width:100%;}
        ul.slimmenu li .sub-toggle{width:100%}
        /* End of Slimmenu */

}


/* TABLET PORTRAIT */
    @media (min-width:798px) and (max-width:979px){
        /* LE MENU */
        .menu {
            width: 60px;
            height: 40px;
            border-radius: 10px;
            margin-top: 15px;
            margin-bottom: 30px;
             /*display:block;*/
        }
        #footerInformation {border:none}
        div.footerColumn {width:33%}
        .cat_image {margin:6px}
        .onerow-fluid>[class*="col"]{float:none;display:block;width:auto;margin:0;}
        .minWidthHide {display:none;visibility:hidden;}
        .minWidthShow {display:block;visibility:visible;}
        #navMainWrapper{margin:0px}
        .mega-menu .categories-li .dropdown_expand {width:98%}
    
    }

@media (max-width:979px){}

/* TABLET LANDSCAPE */
@media (min-width:980px) and (max-width:1199px)
{
#orderhistoryContent .hist_list a {width:72%}
#cartBoxListWrapper a {width:66%}

.cat_image {margin:6px}
.mega-menu .categories-li .dropdown_expand {width:98%}
}

/* DESKTOP */
@media (min-width:1500px){

}


@media (min-width:1500px){
.onerow-fluid{width:1500px;}
}