.Grid2Container{ overflow: hidden; } .Grid2ItemsWrapper { white-space: nowrap; width: -moz-calc(100% + 20px); width: -webkit-calc(100% + 20px); width: calc(100% + 20px); overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .HomepageHeroBanner .Grid2ItemsWrapper, .mobile-product-zoom-img .Grid2ItemsWrapper { -webkit-scroll-snap-points-x: repeat(calc(100% - 20px)); -webkit-scroll-snap-type: mandatory; -webkit-scroll-snap-destination: 0% 100%; -webkit-scroll-snap-align: left; scroll-snap-points-x: repeat(calc(100% - 20px)); scroll-snap-type: mandatory; scroll-snap-destination: 0% 100%; scroll-snap-align: left; } .mobile-product-zoom-img .MobileImageWrapper .DynamicGrid2ImageScroller  .HorizontalGrid2Control  { display: none; } .Grid2ItemsWrapper > * { white-space: normal; vertical-align: top; } .TestProductGridWrapper{ width: 50%; border: 2px dashed; } .GridFloatClear{ clear: both; display: inline-block; } .Grid2Container { position: relative; } .Grid2Container .ProductExtendedName{ display: inline; } .MediumDetailGridTemplate .BadgingContainer { padding-left: 4px; } .LargeDetailGridTemplate .BadgingContainer { padding-left: 2px; } .SpOverlay, .MediumDetailGridTemplate .SpOverlay, .ItemImage .SpOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/special_offer_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .BoOverlay, .MediumDetailGridTemplate .BoOverlay, .ItemImage .BoOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/bonus_item_grid_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .BesOverlay, .MediumDetailGridTemplate .BesOverlay, .ItemImage .BesOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/best_seller_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .BosOverlay, .MediumDetailGridTemplate .BosOverlay, .ItemImage .BosOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/bonus_item_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .BmsOverlay, .MediumDetailGridTemplate .BmsOverlay, .ItemImage .BmsOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/buy_more_save_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .ExcOverlay, .MediumDetailGridTemplate .ExcOverlay, .ItemImage .ExcOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/exclusive_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .FpfOverlay, .MediumDetailGridTemplate .FpfOverlay, .ItemImage .FpfOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/5_pack_fever_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .FrsOverlay, .MediumDetailGridTemplate .FrsOverlay, .ItemImage .FrsOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/free_shipping_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .NewOverlay, .MediumDetailGridTemplate .NewOverlay, .ItemImage .NewOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/new_item_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .TopOverlay, .MediumDetailGridTemplate .TopOverlay, .ItemImage .TopOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/top_rated_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .WewOverlay, .MediumDetailGridTemplate .WewOverlay, .ItemImage .WewOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/weekend_warrior_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .WlsOverlay, .MediumDetailGridTemplate .WlsOverlay, .ItemImage .WlsOverlay{ position: absolute; background-image: url('https://assets.thompsoncigar.com/assets/images/cms/overlays/weekly_special_badge.svg'); background-size: 100%; width: 65px; height: 65px; background-repeat: no-repeat; } .MediumDetailGridTemplate{ width: 165px; display: inline-block; padding: 5px; text-align: center; position: relative; } .MediumDetailGridTemplate .QuickLookControlsContainer{ text-align: left; cursor: pointer; } .MediumDetailGridTemplate .ProductTitleContainer{ padding-top: 3px; } .MediumDetailGridTemplate .ProductTitle{ font-weight: bold; } .MediumDetailGridTemplate a{ text-decoration: none; } .MediumDetailGridTemplate .CompareOption { padding-left:30px; padding-right:30px; } .MediumDetailGridTemplate .PowerReviewsContainer { padding-left:1px; } .AddToCartShopNowButton { width: 120px; text-align: center; margin: auto; } .Grid2Container { position: relative; } .HorizontalGrid2Control{ position: absolute; width: 30px; top: 0; } .HorizontalGrid2Control.GridControlLeft { left: 0; } .HorizontalGrid2Control.GridControlRight { right: 0; } .HorizontalScrollButtonPlaceHolderLeft, .HorizontalScrollButtonPlaceHolderRight { display: inline-block; } .HorizontalGridButton { background-color: #BBB; width: 30px; height: 45px; top: 50%; position: absolute; margin-top: -22.5px; background-color: #BBB; opacity: 0.65; cursor: pointer; } .HorizontalGridButtonIcon { top: 50%; position: absolute; margin-top: -12px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; cursor: pointer; } .HorizontalGridButtonIconRight { border-left: 18px solid #888; margin-left: 10px; } .HorizontalGridButtonIconLeft { border-right: 18px solid #888; margin-right: 10px; } .HorizontalGridButtonRight { border-radius: 8px 0px 0px 8px; } .HorizontalGridButtonLeft { border-radius: 0px 8px 8px 0px; } .HorizontalGrid2Control.GridControlLeft { background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1)); } .HorizontalGrid2Control.GridControlRight { background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); } .VerticalGrid2Control{ position: absolute; height: 30px; } .VerticalGrid2Control.GridControlTop { top: 0; } .VerticalGrid2Control.GridControlBottom { bottom: 0; } .VerticalScrollButtonPlaceHolderTop, .VerticalScrollButtonPlaceHolderBottom { display: inline-block; } .VerticalGridButton { background-color: #BBB; width: 45px; height: 30px; left: 50%; position: absolute; margin-left: -22.5px; background-color: #BBB; opacity: 0.65; cursor: pointer; } .VerticalGridButtonIcon { left: 50%; position: absolute; margin-left: -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; cursor: pointer; } .VerticalGridButtonIconBottom { border-top: 18px solid #888; margin-top: 10px; } .VerticalGridButtonIconTop { border-bottom: 18px solid #888; margin-bottom: 10px; } .VerticalGridButtonTop { border-radius: 0px 0px 8px 8px; } .VerticalGridButtonBottom { border-radius: 8px 8px 0px 0px; } .VerticalGrid2Control.GridControlTop { background: linear-gradient(to top, rgba(0,0,0,0), rgba(255,255,255,1)); } .VerticalGrid2Control.GridControlBottom { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(255,255,255,1)); } .GridProductUpsell{ width: 712px; } .WishListCrosssell .GridProductUpsell{ width: 100%; } .MiniCartModalContainer .GridProductUpsell{ width: 100%; } .SingleProductGrid .MediumDetailGridTemplate{ width: 170px; } #SpecialOfferItems .HorizontalScrollButtonPlaceHolderLeft { display: none; } .SpecialOfferGridLarge .HorizontalScrollButtonPlaceHolderLeft, .SpecialOfferGridLarge .HorizontalScrollButtonPlaceHolderRight { display: none; } .mobile .SpecialOfferGridLarge .HorizontalScrollButtonPlaceHolderRight { display: inline-block; } #SpecialOfferItems .HorizontalScrollButtonPlaceHolderRight{ width: 20px !important; } #SpecialOfferItems .HorizontalGrid2Control.GridControlRight, #SpecialOfferItems .HorizontalGrid2Control.GridControlLeft { background: transparent; } .SpecialOfferGrid2 { border-style: solid; border-color: #c5c5c5; border-width: 1px; } .SpecialOfferGrid2.SpecialOfferGridLarge{ border: none; } .SpecialOfferGrid2 div.SpecialOfferContainer{ display: inline-block; width: -moz-calc(100% - 20px); width: -webkit-calc(100% - 20px); width: calc(100% - 20px); } .SpecialOfferLargeContainer { display: inline-block; } .SpecialOfferLargeContainer .ImageContainer { display: inline-block; float: left; } .SpecialOfferLargeContainer .SpecialOfferSmallGridTemplateRightWrapper { display: inline-block; width: 50%; } .SpecialOfferLargeContainer .ProductAddToCart{ float: right; width: 175px; } grid2SliderElement{ display: none; } grid2SliderElement:first-of-type{ display: inline-block; } .HomepageHeroBanner { max-width: 780px; float: left; padding-top: 8px; } .Grid2StaticElement{ display: inline-block; } .DynamicGrid2ImageScroller .HorizontalGrid2Control { display: none; } .DynamicGrid2ImageScroller .HorizontalScrollButtonPlaceHolderLeft { display: none; } .DynamicGrid2ImageScroller .HorizontalScrollButtonPlaceHolderRight { width: 20px !important; } .Grid2InlineControlsWrapper{ position : absolute; left: 50%; background-color(rgba(55,55,55,0.8)); bottom: 5%; padding: 0 5px; background-color: rgba(185, 185, 185, 0.6); transform: translateX(-50%); border-radius: 10px; font-size: 16px !important; } .Grid2InlineControlElement{ display: inline-block; margin: 0 5px; height: 10px; width: 10px; border-radius: 5px; box-shadow: none; animation: POP-OFF; animation-fill-mode: forwards; animation-duration: 600ms; transition-origin: 50%; } .Grid2InlineControlElementActive{ animation: POP-ICON; animation-fill-mode: forwards; animation-duration: 300ms; transition-origin: 50%; } @keyframes POP-ICON { 0%   { height: 10px; width: 10px; border-radius: 10px; background-color: #CCC; margin: 0 5px; } 25%   { height: 8px; width: 8px; border-radius: 8px; transform: translateY(-1px); margin: 0 6px; } 75%   { height: 14px; width: 14px; border-radius: 14px; transform: translateY(2px); margin: 0 3px; } 100% { height: 10px; width: 10px; border-radius: 10px; transform: translateY(0px); background-color: #3c5a71; margin: 0 5px; } } @keyframes POP-OFF { 0%   { background-color: #222; } 100% { background-color: #CCC; } } .ProductExtendedNameWrapper{ display: inline; } div.ProductExtendedNameWrapper .icon-tags{ display:none; } .Grid2ItemsWrapper.GridIndicateHorizontalLeft { animation-duration: 250ms; animation-name: GRID-INDICATE-HORIZONTAL-LEFT; } .Grid2ItemsWrapper.GridIndicateHorizontalRight { animation-duration: 250ms; animation-name: GRID-INDICATE-HORIZONTAL-RIGHT; } .Grid2ItemsWrapper.GridIndicateVerticalTop { animation-duration: 250ms; animation-name: GRID-INDICATE-VERTICAL-TOP; } .Grid2ItemsWrapper.GridIndicateVerticalBottom { animation-duration: 250ms; animation-name: GRID-INDICATE-VERTICAL-BOTTOM; } @keyframes GRID-INDICATE-HORIZONTAL-LEFT { 0% { transform: translateX(0px); } 50% { transform: translateX(15px); } 100% { transform: translateX(0px); } } @keyframes GRID-INDICATE-HORIZONTAL-RIGHT { 0% { transform: translateX(0px); } 50% { transform: translateX(-15px); } 100% { transform: translateX(0px); } } @keyframes GRID-INDICATE-VERTICAL-TOP { 0% { transform: translateY(0px); } 50% { transform: translateY(15px); } 100% { transform: translateY(0px); } } @keyframes GRID-INDICATE-VERTICAL-BOTTOM { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }