/* this is what I changed @media screen and (max-width: 481px) { .homeBoxRow {display: block; margin-top: 20px} */ .main_box{ width:auto} .homeCategories { list-style:none} .homeProductIMG {margin:0 0 5px; width:80%;} .dropshadow { border:1px solid #DDD; /*-webkit-box-shadow: -2px 2px 6px 0px rgba(182,182,184,1); -moz-box-shadow: -2px 2px 6px 0px rgba(182,182,184,1); box-shadow: -2px 2px 6px 0px rgba(182,182,184,1); */} /* .homeBox1 {width:300px; height:300px; padding:7px;float:left;margin-right:7px; margin-left:27px; margin-top:30px; background-color:#fff; position:relative} .homeBox2 {width:300px; height:300px; padding:7px;float:left;margin-right:8px; margin-top:30px; background-color:#fff; position:relative} .homeBox3 {width:300px; height:300px; padding:7px;float:left; margin-top:30px; background-color:#fff; position:relative} */ .homeBoxRow {display:flex; justify-content:center;margin-top: /*30px*/ 8px;} .homeBox1 {clear:both;} .homeBox2 {margin: 0px 10px;} .homeBox { display:inline-block; max-width: 500px;flex: 0 1 500px;background-color:#fff; padding:5px 5px 0;} .homeProductRow {display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-flow: row wrap;-ms-flex-flow: row wrap;flex-flow: row wrap;} .homeCategoryLogos a { display: inline-block; margin: 12px 5px; text-decoration: none; width: 110px; height: 110px; background: url('https://images.usoutdoor.com/site/home-page-nav-boxes.jpg') no-repeat 0 0; /*opacity: .5;*/ filter: alpha(opacity=50); -webkit-transition: opacity .125s linear; -o-transition: opacity .125s linear; transition: opacity .125s linear; } .homeAuthorizedBrands a { display: inline-block; margin: 12px 5px; text-decoration: none; width: 90px; height: 90px; background: url('https://images.usoutdoor.com/site/authorizedDealerSprite.png') no-repeat 0 0; opacity: .5; filter: alpha(opacity=50); -webkit-transition: opacity .125s linear; -o-transition: opacity .125s linear; transition: opacity .125s linear; } .homeBox1Gradient {position: absolute; top: 260px; left: 1%; border: 0; height:30px; padding:18px 0 0 8px; background-color: white; z-index: 100; font-style: sans-serif; color: #45636e; text-decoration: none; font-weight: bold; font-size: 1.25em; width: 300px;text-align:center;} .homeBox2Gradient {position: absolute; top: 238px; left: 7px; border: 0; height:51px; padding:18px 8px 0 0; text-align:center; background-color: white; z-index: 100; font-style: sans-serif; color: #45636e; text-decoration: none; font-size: 1.25em; width: 291px;} .promoGradient { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,0.65+54 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.01) 1%, rgba(0,0,0,0.65) 54%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.65) 54%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.01) 1%,rgba(0,0,0,0.65) 54%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .promoGradient a {color:#FFF} .homeBox3Gradient {position: absolute; top: 220px; left: 1%; border: 0; height:75px; padding: 8px; background-color: white; z-index: 80; font-style: sans-serif; color: #45636e; text-decoration: none; font-weight: bold; font-size: 1.15em; width: 293px;background:rgb(255,255,255);background:rgba(255,255,255,0.8); -ms-filter:alpha(opacity=80); filter:alpha(opacity=80)} .homeBox4-5 {float:left; width:461px; padding:7px; height:250px; background-color:#fff; margin-top:8px;} .homeBox4Margin {margin-right:8px; margin-left:27px;} .homeBox4-5Products {float:left; width:150px; height:200px; text-align:center; font-size:12px} .homeBox4-5ProductMargin {margin-right:5px} .homeBox4-5Title {width:100%; text-align:center; font-size:35px} .homeDOTDicon {float:left; width:104px} .homeDOTDtitle {width:100%; text-align:center; margin-top:20px} .homeCategoryBox {width:943px; padding:7px; margin-left:27px; background-color:#fff;margin-top:8px;} .homeCategoryBoxTitle {width:100%; text-align:center; font-size:16px; margin-bottom:12px} .homeCategoryBoxCell {float:left; width:195px; padding:0 20px; text-align:center; font-size:18px} .homeCategoryBoxBottomTitle {width:100%; text-align:center; font-size:35px; margin-top:14px} .homeBrandsBanner {margin-top:8px; margin-left:27px} .homeProductsContainer {width:100%; padding:7px; background-color:#fff; margin-top:8px; } .homeProduct {width:calc(25% - 3px); float:left; text-align:center;padding: 6px;} .homeProductText {width:85%; text-align:center; font-size:17px; margin:0 auto; min-height: 46px; margin-top:15px;} .homeProductPrice {margin-top:5px; min-height: auto} .homeProductDivider {width:1px; background-color:#E6E4E4;float:left; height:457px;} .homeBox4 {width:300px; height:300px; padding:7px;float:left;margin-right:7px; margin-left:27px; background-color:#fff; position:relative; margin-top:8px;} .homeBox5 {width:300px; height:300px; padding:7px;float:left;margin-right:8px; background-color:#fff; position:relative; margin-top:8px;} .homeBox6 {width:300px; height:300px; padding:7px;float:left; background-color:#fff; position:relative; margin-top:8px;} .homeAboutContainer {width:944px;margin-left:27px; background-color:#FFF;padding:7px; margin-top:8px} .homeAboutButton {text-align:center; width:100%; font-size:13px; cursor:pointer} .homeAboutContent {font-size:13px; line-height:17px; padding:7px 10px; display:none} .homeBottomTout {width: 958px;margin-left: 27px;} div.promoBoxes img {border:none} .promoBoxes {padding:7px; line-height:0} #slideshow {background:none; background-color:#fff; width:957px; margin:0 0 0 27px} .viewProduct{ padding: 7px 16px 8px; width: 94px; font-size: 12px; white-space: nowrap; text-align: center; color: #104967; background-color: #daedf3; letter-spacing: 1px;} .newArrivalsTitle{font-size:24px; color:#09334d;padding:5px 0px 5px 18px; margin-bottom: 23px} a.arcteryx{width:90px; background-position: 0 0;} a.billabong{width:90px; background-position: -109px 0;} a.burton{width:90px; background-position: -218px 0;} a.dakine{width:90px; background-position: -327px 0;} a.k2{width:90px; background-position: -436px 0;} a.marmot{width:90px; background-position: -545px 0;} a.mthardwear{width:90px; background-position: -654px 0;} a.msr{width:90px; background-position: -763px 0;} a.tnf{width:90px; background-position: -871px 0;} a.oakley{width:90px; background-position: 0 -105px;} a.patagonia{width:90px; background-position: -109px -105px;} a.prana{width:90px; background-position: -218px -105px;} a.salomon{width:90px; background-position: -327px -105px;} a.smith{width:90px; background-position: -436px -105px;} a.vans{width:90px; background-position: -545px -105px;} a.volcom{width:90px; background-position: -654px -105px;} a.xcel{width:90px; background-position: -763px -105px;} a.sixEightSix{width:90px; background-position: -871px -105px;} a.arcteryx:hover {background: transparent url(/images/site/authorizedDealerSprite.png) 0 -206px no-repeat;} a.billabong:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -109px -206px no-repeat;} a.burton:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -218px -206px no-repeat;} a.dakine:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -327px -206px no-repeat;} a.k2:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -436px -206px no-repeat;} a.marmot:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -545px -206px no-repeat;} a.mthardwear:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -654px -206px no-repeat;} a.msr:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -763px -206px no-repeat;} a.tnf:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -872px -206px no-repeat;} a.oakley:hover {background: transparent url(/images/site/authorizedDealerSprite.png) 0 -311px no-repeat;} a.patagonia:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -109px -311px no-repeat;} a.prana:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -218px -311px no-repeat;} a.salomon:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -327px -311px no-repeat;} a.smith:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -436px -311px no-repeat;} a.vans:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -545px -311px no-repeat;} a.volcom:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -654px -311px no-repeat;} a.xcel:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -764px -312px no-repeat;} a.sixEightSix:hover {background: transparent url(/images/site/authorizedDealerSprite.png) -872px -311px no-repeat;} /* ul.shopByCategory { height:224px; width:962px; margin-bottom:25px; margin-top: 6px; background: url("/images/site/home-page-nav-boxes.jpg") no-repeat; position: relative; } ul.shopByCategory li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} ul.shopByCategory li, ul.shopByCategory a {height: 110px; display: block;} ul.shopByCategory li.mensJackets{left:0; width:110px;} ul.shopByCategory li.womensJackets{left:121px; width:110px;} ul.shopByCategory li.kidsJackets{left:243px; width:110px;} ul.shopByCategory li.footwear{left:365px; width:110px;} ul.shopByCategory li.backpacks{left:486px; width:110px;} ul.shopByCategory li.camping{left:608px; width:110px;} ul.shopByCategory li.climbing{left:730px; width:110px;} ul.shopByCategory li.surf{left:852px; width:110px;} ul.shopByCategory li.mensClothing{left:0; top:115px; width:110px;} ul.shopByCategory li.womensClothing{left:121px; top:115px; width:110px;} ul.shopByCategory li.kidsClothing{left:243px; top:115px; width:110px;} ul.shopByCategory li.snowboards{left:365px; top:115px; width:110px;} ul.shopByCategory li.skis{left:486px; top:115px; width:110px;} ul.shopByCategory li.travel{left:608px; top:115px; width:110px;} ul.shopByCategory li.goggles{left:730px; top:115px; width:110px;} ul.shopByCategory li.helmets{left:852px; top:115px; width:110px;} ul.shopByCategory li.mensJackets a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) 0 -229px no-repeat;} ul.shopByCategory li.womensJackets a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -121px -229px no-repeat;} ul.shopByCategory li.kidsJackets a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -243px -229px no-repeat;} ul.shopByCategory li.footwear a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -365px -229px no-repeat;} ul.shopByCategory li.backpacks a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -486px -229px no-repeat;} ul.shopByCategory li.camping a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -608px -229px no-repeat;} ul.shopByCategory li.climbing a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -730px -229px no-repeat;} ul.shopByCategory li.surf a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -852px -229px no-repeat;} ul.shopByCategory li.mensClothing a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) 0 -344px no-repeat;} ul.shopByCategory li.womensClothing a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -121px -344px no-repeat;} ul.shopByCategory li.kidsClothing a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -243px -344px no-repeat;} ul.shopByCategory li.snowboards a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -365px -344px no-repeat;} ul.shopByCategory li.skis a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -486px -344px no-repeat;} ul.shopByCategory li.travel a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -608px -344px no-repeat;} ul.shopByCategory li.goggles a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -730px -344px no-repeat;} ul.shopByCategory li.helmets a:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -852px -344px no-repeat;} */ a.mensJackets{left:0;width:110px; background-position: 0 0; } a.womensJackets{width:110px; background-position: -121px 0; } a.kidsJackets{width:110px; background-position: -243px 0;} a.footwear{width:110px; background-position: -365px 0;} a.backpacks{width:110px; background-position: -486px 0;} a.camping{left:608px; width:110px; background-position: -608px 0;} a.climbing{left:730px; width:110px; background-position: -730px 0;} a.surf{left:852px; width:110px; background-position: -852px 0;} a.mensClothing{left:0; top:115px; width:110px; background-position: 0 -115px;} a.womensClothing{left:121px; top:115px; width:110px; background-position: -121px -115px;} a.kidsClothing{left:243px; top:115px; width:110px; background-position: -243px -115px;} a.snowboards{left:365px; top:115px; width:110px; background-position: -365px -115px;} a.skis{left:486px; top:115px; width:110px; background-position: -486px -115px;} a.travel{left:608px; top:115px; width:110px; background-position: -608px -115px;} a.goggles{left:730px; top:115px; width:110px; background-position: -730px -115px;} a.helmets{left:852px; top:115px; width:110px; background-position: -852px -115px;} a.mensJackets:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) 0 -229px no-repeat;} a.womensJackets:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -121px -229px no-repeat;} a.kidsJackets:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -243px -229px no-repeat;} a.footwear:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -365px -229px no-repeat;} a.backpacks:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -486px -229px no-repeat;} a.camping:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -608px -229px no-repeat;} a.climbing:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -730px -229px no-repeat;} a.surf:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -852px -229px no-repeat;} a.mensClothing:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) 0 -344px no-repeat;} a.womensClothing:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -121px -344px no-repeat;} a.kidsClothing:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -243px -344px no-repeat;} a.snowboards:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -365px -344px no-repeat;} a.skis:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -486px -344px no-repeat;} a.travel:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -608px -344px no-repeat;} a.goggles:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -730px -344px no-repeat;} a.helmets:hover {background: transparent url(/images/site/home-page-nav-boxes.jpg) -852px -344px no-repeat;} .twelveDaysWidth33 {width: calc(33% - 3px)} .twelveDaysWidth50 {width: calc(50% - 3px)} .twelveText1 {color: rgb(16, 73, 103);font-size: 21px;margin-top: 0px;} @media screen and (max-width: 481px) { .homeBoxRow {display: block; margin-top: 20px;padding: 0 23px;} .homeBox {display: block; max-width: 100%; margin-top: 10px} .homeBox2 {margin: 10px 0 0;} } @media screen and (max-width: 1199px) { .twelveText1 {margin-top: 80px;} .twelveDaysCount { margin-top: 0;padding-left: 0;} .twelveDaysCount3 {margin-top: 80px;} } @media screen and (max-width: 768px) { .homeProduct {width:49.5%;} #homeProductDivider2 {display: none;} .twelveBox {padding-top: 15px;border-top: 1px solid #E6E4E4;} }