.elementor-44 .elementor-element.elementor-element-2990e80{padding:10px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-760230d{padding:0px 0px 10px 0px;}.elementor-44 .elementor-element.elementor-element-12bd3d2:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-12bd3d2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3EEE5;}.elementor-44 .elementor-element.elementor-element-12bd3d2{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:10px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-12bd3d2 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-44 .elementor-element.elementor-element-ab20e66 > .elementor-widget-container{margin:5px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-1accb68:not(.elementor-motion-effects-element-type-background), .elementor-44 .elementor-element.elementor-element-1accb68 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F3EEE5;}.elementor-44 .elementor-element.elementor-element-1accb68{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 10px 0px;}.elementor-44 .elementor-element.elementor-element-1accb68 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-44 .elementor-element.elementor-element-bcb2e8d > .elementor-widget-container{padding:0px 0px 5px 0px;}.elementor-44 .elementor-element.elementor-element-3d16b83{padding:10px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-446298b{padding:0px 0px 10px 0px;}.elementor-44 .elementor-element.elementor-element-2b2eedd img{border-style:solid;border-width:2px 2px 2px 2px;border-color:#D9D0C4;border-radius:13px 13px 13px 13px;}.elementor-44 .elementor-element.elementor-element-7e66309 img{border-style:solid;border-width:2px 2px 2px 2px;border-color:#D9D0C4;border-radius:13px 13px 13px 13px;}.elementor-44 .elementor-element.elementor-element-1c6beec{padding:10px 0px 0px 0px;}.elementor-44 .elementor-element.elementor-element-94b00b6{padding:0px 0px 10px 0px;}/* Start custom CSS for section, class: .elementor-element-760230d *//* ========================================================= COZYLIVINGPICKS PRODUCT SLIDER FULL WIDTH + OVERLAY NAVIGATION ========================================================= */ /* ========================================================= 1. REMOVE ALL SPACE RESERVED FOR ARROWS ========================================================= */ .clpx-slider{ position:relative !important; width:100% !important; margin:0 !important; padding-left:0 !important; padding-right:0 !important; overflow:visible !important; } /* Keep the actual products using the full available width */ .clpx-slider-track{ width:100% !important; margin:0 !important; padding: 2px 0 5px !important; } /* ========================================================= 2. NAVIGATION ARROWS FLOAT THEM OVER THE PRODUCT IMAGES ========================================================= */ .clpx-slider-arrow{ position:absolute !important; z-index:50 !important; /* * Places navigation around the middle of * the product-image area rather than the * middle of the entire tall product card. */ top:28% !important; width:35px !important; height:44px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; color:#35423D !important; background:rgba(252,249,244,.96) !important; border:1px solid #C7BBAE !important; border-radius:8px !important; box-shadow: 0 2px 10px rgba(53,66,61,.12) !important; transform: translateY(-50%) !important; cursor:pointer !important; transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease !important; } /* LEFT ARROW */ .clpx-slider-prev{ left:7px !important; } /* RIGHT ARROW */ .clpx-slider-next{ right:7px !important; } /* SVG */ .clpx-slider-arrow svg{ width:16px !important; height:16px !important; fill:none !important; stroke:currentColor !important; stroke-width:1.9 !important; stroke-linecap:round !important; stroke-linejoin:round !important; } /* HOVER */ .clpx-slider-arrow:hover:not(:disabled){ color:#FFFFFF !important; background:#BA6444 !important; border-color:#BA6444 !important; } /* DISABLED */ .clpx-slider-arrow:disabled{ opacity:.38 !important; cursor:default !important; } /* ========================================================= 3. MOBILE ========================================================= */ @media(max-width:767px){ /* * Plugin originally adds 30px side padding here. * Force it back to zero. */ .clpx-slider{ padding-left:0 !important; padding-right:0 !important; } .clpx-slider-track{ width:100% !important; padding-left:0 !important; padding-right:0 !important; } /* * Slightly smaller arrows over the images. */ .clpx-slider-arrow{ top:27% !important; width:31px !important; height:40px !important; border-radius:7px !important; } .clpx-slider-prev{ left:5px !important; } .clpx-slider-next{ right:5px !important; } .clpx-slider-arrow svg{ width:15px !important; height:15px !important; } } /* ========================================================= 4. VERY SMALL MOBILE ========================================================= */ @media(max-width:380px){ /* * The plugin also adds 27px padding under 380px, * so override that too. */ .clpx-slider{ padding-left:0 !important; padding-right:0 !important; } .clpx-slider-arrow{ width:29px !important; height:38px !important; } .clpx-slider-prev{ left:4px !important; } .clpx-slider-next{ right:4px !important; } }/* End custom CSS */