/* Author: Christian Ross (@christianross) Author URI: http://www.eightninety.com Site: Project 7 - Products for Good */ @font-face { font-family: 'project_7_neueregular'; src: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/project7-neue-webfont.eot?3820385348954179393); src: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/project7-neue-webfont.eot?%23iefix&3820385348954179393) format('embedded-opentype'), url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/project7-neue-webfont.woff?3820385348954179393) format('woff'), url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/project7-neue-webfont.ttf?3820385348954179393) format('truetype'), url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/project7-neue-webfont.svg%23project_7_neueregular?3820385348954179393) format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'printhouseregular'; src: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/printhouse-webfont.eot?3820385348954179393); src: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/printhouse-webfont.eot?%23iefix&3820385348954179393) format('embedded-opentype'), url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/printhouse-webfont.woff?3820385348954179393) format('woff'), url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/printhouse-webfont.ttf?3820385348954179393) format('truetype'), url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/printhouse-webfont.svg%23printhouseregular?3820385348954179393) format('svg'); font-weight: normal; font-style: normal; } /* ---- Reset CSS ---- */ html, body, img { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } html { overflow-x: auto; overflow-y: auto; } body { line-height: 1; } p { margin:0; padding:0; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } em { font-style: italic; } strong { font-weight: bold; } .clear:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; } .clear { display: inline-block; } .clear { display: block; } /* Project 7 - CSS */ p { padding:0; margin:0 0 20px 0; font-size:100%; color:#343434; line-height:1.4em; } h1, h2, h3, h4, h5 { color:#343434; font-weight:400; font-family: 'project_7_neueregular', sans-serif; } h1 { margin: 0 0 1em 0; font-size: 2.8em; line-height:1.4em; color: #36260D; } h2 { margin: 0 0 .1em 0; font-size: 2.0em; line-height:1.9em; color: #36260D; } h3 { margin: 0; font-size: 1.5em; line-height:1.5em; } h4 { margin: 1em 0 .5em; font-size: 1.1em; line-height:1.3em; font-family:'proxima-nova', sans-serif; font-weight: 600; text-transform: uppercase; } /* Layout */ body { margin: 0px; background-color: #FFF; font-family:'proxima-nova', sans-serif; font-size:100%; color:#202020; line-height:1.4em; text-align:left; } #wrap { width: 100%; margin: 0 auto; position: relative; } .container { width: 1020px; margin: 0 auto; position: relative; } #header { height: 150px; } #logo { float: left; width:133px; height: 107px; padding-top: 40px; } #logo img { height: auto; max-width: 110px; } #nav { float: left; width: 600px; margin-left: 20px; padding-top: 70px; } #nav-toggle { display: none; } .header7UP { position: absolute; top: 50px; left: 560px; } .social { float: right; text-align: right; width: 240px; padding-top: 64px; } #slider { position: relative; overflow: hidden; height: 46.66666%; } #slides { position: relative; } #slides img { width: 100%; min-height: 100%; } #thumbs { float: left; } #caption { float: left; position: relative; color: #FFF; } #caption li { display: none; list-style: none outside none; position: absolute; top: 29px; width: 550px; font-family: "proxima-nova-extra-condensed", sans-serif; font-weight: 600; font-size: 26px; } #caption li.active { display: block; } #sliderbanner { background-color: #CA3537; height: 80px; } #causes { width: 860px; margin: 0 auto; padding: 80px 0; } #causes h2 { text-align: center; } .left { width: 44.44444444%; float: left; } .right { width: 44.44444444%; float: right; } #action { background: #EEE; padding: 80px 0; border-bottom: 10px solid #CA3537; width: 100%; margin: 0 auto; } #instagram{ width: 1200px; margin: 0 auto; } #footer { background-color: #B6B51F; border-top: 1px solid #D1D024; height: auto; } #footer .container { width: 1200px; margin: 0 auto; } #fLogo { float: left; width: 125px; margin-left: 110px; padding-top: 80px; } #fNav { float: left; width: 70px; margin-left: 50px; text-align: center; padding-top: 45px; } #fAbout { float: right; width: 350px; padding-top: 100px; margin-right: 90px;] } /* Interior styles */ #content { padding: 80px 0; border-bottom: 10px solid #EEE; } #content .container p, #content .container h1, #content .container h2, #content .container h3 { width: 700px; margin: 0 auto; } #content .container h1 { margin-bottom: .3em;} #content .container p, #content .container li { font-size: 20px; line-height: 1.6em; } #content .container p { padding: 0 0 20px; } #content .container img { padding-bottom: 40px; } #content .container700 { width: 700px; margin: 0 auto; } .mission #content .container700, .7up #content .container700 { width: 700px; margin: 0 auto 30px; font-size: 20px; line-height: 1.6em; } .mission h2 { text-align:center; margin-top:30px !important; padding-bottom:30px; } .mission .p7partnerlinks ul { list-style:none; margin:0 auto; padding:0; max-width:720px; } .mission .p7partnerlinks li { display:inline; float:left; } .causeHope h2, .causeHeal h2, .causeQuench h2, .causeHouse h2, .causeSave h2, .causeTeach h2, .causeFeed h2 { text-align:center; margin-top:30px !important; padding-bottom:30px; } .p7CausePartners { margin:5% auto; } .p7CausePartners h2 { text-align:center; } .p7CausePartners ul { list-style:none; margin:0 auto; max-width:720px; padding:0; text-align: center; } .p7CausePartners li { display: inline; } #content p.padTop40 { margin-top: 40px;} #banner { height: 700px; border-bottom: 80px solid #CA3537; position: relative; } #banner .banner-tagline { color: #fff; font-family: "proxima-nova-extra-condensed", sans-serif; font-size: 28px; padding: 15px 0; } #banner .banner-tagline a { color: #CDD6D8; font-weight: normal; } .banner { height: 700px; border-bottom: 80px solid #FFF; position: relative; } #bannertext { color: #FFFFFF; font-size: 18px; height: 80%; left: 55%; position: absolute; top: 9%; width: 29%; z-index: 10; } #bannertext p { color: #FFFFFF; margin-bottom: 7%; font-family: 'printhouseregular'; } #banner>img { min-height: 100%; max-height: 100%; min-width: 100%; position: relative; } .banner img { max-height: 100%; max-width: 100%; position: relative; } #wufoo-zvtqs1411g9ri5 { margin-top: 80px !important; } /* Lightbox / Videos */ #lightbox { position: fixed; width: 100%; height: 100%; z-index: 1000; display: none; background-color: #295C7B; opacity: .7; filter: alpha(opacity=7); } #videos { height: 495px; left: 130px; position: fixed; top: 130px; width: 880px; z-index: 1001; display: none; } #videos iframe, #video { height: 100%; width: 100%; } #videos .close { color: #FFFFFF; position: absolute; right: 0; top: -25px; } .sliderNav { background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/slider-arrows.png?3820385348954179393) 0 0 no-repeat; height: 75px; position: absolute; top: 50%; margin-top: -37.5px; width:65px; } .sliderNav:hover { opacity: .8; } .sliderNav.prev { left: 0; background-position: 0 0; } .sliderNav.next { right: 0; background-position: -65px 0; } /* links */ a { white-space:normal; } a:link, a:visited, a:active, a:hover { color: #2FB0D2; font-weight: 700; text-decoration:none; } a:hover { color: #2693B0; text-decoration:underline; } #nav a:link, #nav a:active, #nav a:visited, #nav a:hover { padding:0; margin:0 10px 0 0; font-size:27px; color:#121212; font-family: "proxima-nova-extra-condensed", sans-serif; text-transform: uppercase; text-decoration: none; font-weight: 600; } #nav .current a { color: #CA3537; } #nav a:hover { color:#ddd; } #nav .link-7up { position: relative; top: -20px; } #nav .link-7up a { background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/project7-7up.png?3820385348954179393) no-repeat top center; display: inline-block; height: 55px; text-indent: -9999px; width: 77px; } .index h4 a { color: #343434; } .index h4 a:hover { color: #2693B0; } #footer a:link, #footer a:active, #footer a:visited, #footer a:hover { font-family: "proxima-nova-extra-condensed", sans-serif; font-size:1.1em; font-weight:600; color:#000; text-transform: uppercase; } #footer a:hover { color:#ddd; text-decoration:none; } /* Header social */ #header .social ul { margin: 0; padding: 0; list-style: none; } #header .social li { margin: 0; padding: 0 0 0 3px; display: inline-block; } #header a.facebook { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) 0 0 no-repeat; width: 22px; height: 35px; } #header a.facebook:hover { background-position: 0 -35px; } #header a.twitter { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -22px 0 no-repeat; width: 35px; height: 35px; } #header a.twitter:hover { background-position: -22px -35px; } #header a.pinterest { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -57px 0 no-repeat; width: 37px; height: 35px; } #header a.pinterest:hover { background-position: -57px -35px; } #header a.instagram { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -94px 0 no-repeat; width: 35px; height: 35px; } #header a.instagram:hover { background-position: -94px -35px; } #header a.tumblr { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -129px 0 no-repeat; width: 24px; height: 35px; } #header a.tumblr:hover { background-position: -129px -35px; } #header a.youtube { display: inline-block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -153px 0 no-repeat; width: 35px; height: 35px; } #header a.youtube:hover { background-position: -153px -35px; } /* Causes */ #causes ul { margin: 0 0 40px; padding: 0; list-style: none; width: 900px; } #causes li { margin: 0; padding: 0 24px; display: inline-block; } #causes li:first-child { padding-left: 0; } #causes li:last-child { padding-right: 0; } .heal { display: block; width: 73px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) 0 -82px no-repeat; text-indent: -8871px; } .heal:hover { background-position: 0 0; } .save { display: block; width: 73px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) -83px -82px no-repeat; text-indent: -8871px; } .save:hover { background-position: -83px 0; } .house { display: block; width: 73px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) -166px -82px no-repeat; text-indent: -8871px; } .house:hover{ background-position: -166px 0; } .feed { display: block; width: 66px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) -249px -82px no-repeat; text-indent: -8871px; margin-right: -5px; } .feed:hover { background-position: -249px 0; } .quench { display: block; width: 92px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) -320px -82px no-repeat; text-indent: -8871px; } .quench:hover{ background-position: -320px 0; } .teach { display: block; width: 83px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) -422px -82px no-repeat; text-indent: -8871px; } .teach:hover{ background-position: -422px 0; } .hope { display: block; width: 68px; height: 82px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/p7-icons2.png?3820385348954179393) -515px -82px no-repeat; text-indent: -8871px; } .hope:hover { background-position: -515px 0; } /* Action */ #action ul { margin: 0; padding: 0; list-style: none; } #action li { margin: 0; padding: 0; display: inline-block; width: 265px; vertical-align: top; margin-right: 100px; } #action li:last-child { margin-right: 0; } #action ul.action { margin: 0; padding: 0; } #action ul.action li { margin: 0; padding: 0; display: block; } #action ul.social { margin: 0; padding: 20px 0 0 0; list-style: none; float: left; width: auto; } #action ul.social li { margin: 0; padding: 0 3px 0 0; display: inline-block; width: auto; } #action a.facebook { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) 0 -70px no-repeat; width: 22px; height: 35px; } #action a.facebook:hover { background-position: 0 -105px; } #action a.twitter { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -22px -70px no-repeat; width: 35px; height: 35px; } #action a.twitter:hover { background-position: -22px -105px; } #action a.pinterest { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -57px -70px no-repeat; width: 37px; height: 35px; } #action a.pinterest:hover { background-position: -57px -105px; } #action a.instagram { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -94px -70px no-repeat; width: 35px; height: 35px; } #action a.instagram:hover { background-position: -94px -105px; } #action a.tumblr { display: block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -129px -70px no-repeat; width: 24px; height: 35px; } #action a.tumblr:hover { background-position: -129px -105px; } #action a.youtube { display: inline-block; text-indent: -8917px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite.png?3820385348954179393) -153px -70px no-repeat; width: 35px; height: 35px; } #action a.youtube:hover { background-position: -153px -105px; } /* Instagram */ #instagramContainer { overflow: hidden; } .instagram { width: 3600px; position: relative; } .instagram ul { margin: 0; padding: 0; list-style: none; } .instagram li { margin: 0; padding: 0; display: inline-block; float: left; line-height: 0; } .instagram li.small { height: 400px; } .instagram li.small img { height: 400px; width: 400px; } .instagram li.large img { height: 600px; width: 600px; } .instagram img { border: 0; margin: 0; padding: 0; } /* Footer social */ .footer-social { float: left; width: 360px; } .footer-social ul { margin: 0; padding: 0; display: block; width: 360px; } .footer-social li { margin: 0; padding: 0; width: 120px; height: 120px; vertical-align:middle; float: left; } .footer-social li a:hover { border: none; opacity: .8; } .footer-social .facebook { display: inline-block; width: 60px; height: 60px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite-footer.png?3820385348954179393) 0 0 no-repeat; text-indent: -7914px; padding: 30px; } .footer-social .pinterest { display: inline-block; width: 60px; height: 60px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite-footer.png?3820385348954179393) -360px 0 no-repeat; text-indent: -7914px; padding: 30px; } .footer-social .tumblr { display: inline-block; width: 60px; height: 60px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite-footer.png?3820385348954179393) -120px 0 no-repeat; text-indent: -7914px; padding: 30px; } .footer-social .twitter { display: inline-block; width: 60px; height: 60px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite-footer.png?3820385348954179393) -240px 0 no-repeat; text-indent: -7914px; padding: 30px; } .footer-social .instagram { display: inline-block; width: 60px; height: 60px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite-footer.png?3820385348954179393) -480px 0 no-repeat; text-indent: -7914px; padding: 30px; } .footer-social .youtube { display: inline-block; width: 60px; height: 60px; background: url(//cdn.shopify.com/s/files/1/0480/8669/t/2/assets/social-sprite-footer.png?3820385348954179393) -600px 0 no-repeat; text-indent: -7914px; padding: 30px; } /* Lists */ ul { padding:0; margin:0; } li { padding:0; margin:0 0 0 20px; border:0; } #nav ul { margin:auto; padding:0; list-style:none; } #nav li { margin:auto; padding:0; display:inline-block; } #slides ul { margin: 0; list-style: none; } #slides li { margin: 0; padding: 0; position: absolute; top: 0; left: 0; width: 100%; height: 46.66666%; display: none; } #slides li.active { display: block; } #sliderbanner #thumbs ul { margin: 0; list-style: none; } #sliderbanner #thumbs li { border: 4px solid #CCC; display: inline-block; height: 100px; margin: -16px 0 0 10px; padding: 0; width: 100px; } #sliderbanner #thumbs li.active { border-color: #8E2529; } .givingReport img { max-width:100%; height:auto; } .buzz ul.press { list-style: none; margin-top: 50px; } .buzz ul.press li { padding: 0; margin: 0; display: inline-block; width: 45%; float: left; margin-right: 3%; } .buzz ul.press li:nth-child(2n+1) { clear: both; } .contact ul.left, .contact ul.right { list-style: none; } .contact ul.left li, .contact ul.right li { padding: 5px 0 0; margin-left: 0; } #footer ul { list-style:none; } #footer li { display:list-item; padding:0; margin:0; } /* form elements */ input[type="text"], textarea { border-radius:3px !important; border:1px solid #DDD !important; font-family:'proxima-nova', sans-serif; padding:5px !important; } input[type="text"]:focus, textarea:focus { background-color:#EEE !important; padding:5px !important; border-color:#BBB !important; } input [type="image"] { border:none; } /* Shop Styles */ .shop .content .container { margin:80px auto; } .product { float: left; margin: 20px 5px; max-width: 330px; } .product-title, .product-price { font-family: 'project_7_neueregular', sans-serif; font-size: 20px; font-weight: normal; line-height: 1.6em; margin-top: 0; text-align:center; } .product-title a { font-weight:400; } .product-thumb img { max-width: 100%; } .product-form a.continue-shopping, .product-form input[type=submit] { background: #CE313B; border: none; color: #fff; cursor: pointer; font-family:'proxima-nova', sans-serif; font-size: 16px; font-weight: normal; outline: none; margin: 20px 0; padding: 20px 50px; text-transform: uppercase; } .product-form input[type=submit].disabled { background: #eee; } .product-form a.continue-shopping, .product-form input[type=submit].update-btn { font-size: 14px; padding: 10px 20px; } .product-form input[type=submit]:hover { background: #A42830; } .product-form input[type=submit].disabled:hover { background: #eee; } .product-form a.continue-shopping { float: left; } .product-images { width: 48%; } .product-image-details { text-align: center; } .product-image-details small { clear: both; display: block; } .product-images img { float: right; } .product-details { width: 50%; padding-bottom:80px; } .shop h1 { text-align:center; } .container.store { margin-top:4em !important; } .store img { padding-bottom: 0px; margin-bottom:-40px; } .shop .retailLogos { width:100%;margin:60px auto 0;text-align:center; } .shop .retailLogos img { max-width:100%; } .cart { margin: 20px auto; max-width: 700px; } .cart table { width: 100%; } .cart table td { vertical-align: middle; } .cart table td.quantity input { max-width: 30px; } .cart table td.remove a { font-size: 13px; font-weight: normal; } .cart .cart-options { text-align: right; } a.cart-link { color: #CA3537; font-weight: normal; position: absolute; right: 0; text-transform: uppercase; top: 20px; font-size:.85em; } ul.prodNav { text-align: center; } ul.prodNav li { display: inline-block; list-style: outside none none; margin-left: 8px; padding: 0; color:#CCC; } ul.prodNav li::after { content: "|"; margin-left: 12px; } ul.prodNav li:last-child::after { content: none; margin-left: 0; } ul.prodNav a { font-size:1.4em; } .storeLocator { width:100%; margin:60px auto -85px; text-align:center; } .storeLocator iframe { pointer-events: none; } /* .map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; height:600px; } */ /* Cause Pages */ .container-new { background: none repeat scroll 0% 0% rgb(255, 255, 255); padding-top: 70px; width: 940px; margin-top: -220px; } .container-new .causes-icons { list-style: none; width: 720px; margin: 10px auto; } .container-new .causes-icons li { display: inline-block; } .cause-icon { text-align: center; top: -170px; height: 70px; position: relative; } .causes-thumbnails { margin: 80px auto; padding: 0; list-style: none; } .causes-thumbnails li { margin: 0 0 30px; padding: 0; display: inline; float: left; max-width: 430px; } .causes-thumbnails li:nth-child(odd) { margin-right: 50px; margin-left: 20px; } .causes-thumbnails li:last-child { margin-left: 250px; } .causes-thumbnails li a img { max-width: 430px; } .causes-thumbnails li p, .causes-thumbnails h3 { max-width: 100%; text-align: center; } .causes-thumbnails h3 { font-size: 2.1em; line-height: 1.2em; margin: -35px 0 5px !important; } .causes-thumbnails h3 a { font-weight: 400; text-decoration: none; } .causes-thumbnails p { line-height: 1.1em !important; padding-bottom: 5px !important; } .thumbSave a { color: #00853e; } .thumbHeal a { color: #cd053d; } .thumbHouse a { color: #f8981d; } .thumbQuench a { color: #00b1b0; } .thumbTeach a { color: #b9b309; } .thumbHope a { color: #1c3f95; } .thumbFeed a { color: #7b2b83; } .cause h1 { text-align: center; } .cause p { text-align: center; font-size: 1.5em !important; } .jobs .post ul { width: 700px; margin: 0 auto; font-size: 20px; line-height: 1.6em; } .jobs .openPosition { margin-top: 30px; padding-top: 60px; border-top: 1px solid #e3e3e3; } @media screen and (min-width: 1200px) { .product { max-width: 240px;} } @media screen and (max-width: 1200px) { #footer .container { width: 1020px; margin: 0 auto; } #fAbout { float: left; width: 520px; margin: 0 0 0 110px; padding-top: 20px; padding-bottom: 30px; } #fNav { padding-top: 80px; } #fNav ul { width: 340px; text-align: left; } #fNav li { display: inline-block; padding-right: 15px; } #fLogo { padding-top: 45px; } } @media screen and (max-width: 960px) { .container { width: 95%; margin: 0 auto; } .container700 { max-width: 95%; margin: 0 auto; } #nav .link-7up { position: relative; top: 0; } #nav .link-7up a { background: none; display: inline-block; height: auto; text-indent: 0; width: auto; } #content { padding: 40px 0; } #content .container p, #content .container h1, #content .container h2, #content .container h3 { max-width: 95%; margin: 0 auto; } #banner { height: 40%; border-bottom: 80px solid #CA3537; } #banner img { min-height: inherit; max-height: inherit; height: auto; max-width: 100%; position: relative; } .banner { height: 40%; border-bottom: 80px solid #FFF; } .banner img { min-height: inherit; max-height: inherit; height: auto; max-width: 100%; position: relative; } #header .social { display: none; } .header7UP { display: none; } #header #nav { width: 450px; } #slides { position: relative; } #thumbs { display: none; } #slides ul { margin: 0; list-style: none; } #slides li img { height:auto; min-width: 100%; } #slides li.active { display: block; } #sliderbanner #thumbs ul { margin: 0; list-style: none; } #sliderbanner #thumbs li { border: 4px solid #CCC; display: inline-block; height: 100px; margin: -16px 0 0 10px; padding: 0; width: 100px; } #sliderbanner #thumbs li.active { border-color: #8E2529; } .contact #banner { height:auto; } .contact ul.left, .contact ul.right { list-style: none; float: none; width: 100%; } .contact ul.left li, .contact ul.right li { padding: 5px 0 0; margin-left: 0; } #footer { height: auto; } #footer .container { width: 100%; margin: 0 auto; } #footer li { display:inline-block; padding:0; margin:0; } .footer-social { float: none; width: 100%; } .footer-social ul { width: 100%; } .footer-social li { width: 33.333333%; text-align: center; } #fLogo { float: none; width: 90%; padding-top: 25px; margin: 0 auto; text-align: center; } #fNav { float: none; width: 90%; text-align: left; margin: 0 auto; text-align: center; padding-top: 20px; } #fNav ul { width: 100%; text-align: center; } #fNav ul li { padding: 0 .9em; text-align: center; } #footer a:link, #footer a:active, #footer a:visited, #footer a:hover { font-size: 1.4em; } #fAbout { float: none; width: 90%; margin: 0 auto; padding-top: 20px; padding-bottom: 30px; } h1 { margin: 0 0 1em 0; font-size: 2.0em; line-height:1.4em; color: #36260D; } h2 { margin: 0 0 .1em 0; font-size: 1.5em; line-height:1.9em; color: #36260D; } #causes { width: 90%; } #causes ul { width: 90%; text-align: center; } #instagram1 { max-height: 300px; } #instagram2 { display: none; } .instagram img { max-height: 400px; max-width: 400px; } .buzz ul.press { list-style: none; margin-top: 50px; } .buzz ul.press li { padding: 0; margin: 0; display: inline-block; width: 45%; float: left; margin-right: 3%; } .buzz ul.press li:nth-child(2n+1) { clear: both; } .buzz ul.press li img { max-width: 100%; } #bannertext .imgAmerica { display: none; } .causes-thumbnails { margin: 80px auto; padding: 0; list-style: none; } .causes-thumbnails li { margin: 0 auto 30px; padding: 0; display: block; float: none; max-width: 100%; } .causes-thumbnails li:nth-child(odd) { margin-right: 0; margin-left: 0; } .causes-thumbnails li:last-child { margin-left: 0; } .causes-thumbnails li a img { max-width: 100%; } .causes-thumbnails h3 { font-size: 2.1em; line-height: 1.2em; margin: -35px 0 5px !important; } .causes-thumbnails p { font-size:1em !important; } } @media screen and (max-width: 768px) { #action li { margin: 0 auto 50px; width: 90%; display: block; } #banner { height: 40%; border-bottom: 40px solid #CA3537; } .banner { height: 40%; border-bottom: 40px solid #FFF; } .shop .content .container { margin:20px auto; } .product-images { width: 98%; } .product-images img { max-width:100%; } .product-images img { float: none; } .product-details { width: 98%; padding-bottom:80px; } .cause p { text-align: center; font-size: 1.2em !important; } .causes-thumbnails h3 { font-size: 1.7em; line-height: 1.2em; margin: -35px 0 5px !important; } .causes-thumbnails p { font-size:1em !important; } .causes-icons { display:none; } #banner .banner-tagline { display:none; } } @media screen and (max-width: 650px) { #banner, #content { background: #fff; } #header { background: #fff; height: auto; position: relative; } #header #nav-toggle { display: block; float: right; height: 40px; position: absolute; right: 0; top: 65px; width: 40px; } #header #nav-toggle:before { content: 'Menu '; font-size: 16px; position: absolute; right: 50px; top: 2px; } #header #nav-toggle:hover { color: #CE313B; } #header #nav { height: 0; padding: 0; } #header #nav ul { background: #B4B641; left: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: -10; } #header #nav ul li { border-bottom: 1px solid #FFFFFF; display: block; padding: 10px 0; text-align: center; } #header #nav ul li a { color: #fff; display: block; font-size: 16px; } #header #nav ul li a:hover { color: #fff; } /* #header #nav { float: none; width: 90%; margin: 0 auto; text-align: center; padding-top: 20px; } */ #header #logo { float: left; margin: 0 0 0 20px; } .footer-social li { width: 50%; } #causes .left, #causes .right { float: none; width: 100%; } #caption li { width: 500px; } .sliderNav { margin-top: -18.75px; width: 32.5px; height: 37.5px; background-size: 65px 37.5px; } .sliderNav.next { background-position: -32.5px 0; } #sliderbanner { height: 50px; } #caption li { top: 14px; } .mission .p7partnerlinks li { float:none; display:block; } } @media screen and (max-width: 480px) { #caption { float: none; } #caption li { font-size: 17px; width: 90%; top: 8px; line-height: 14px; } } #instafeed > a:nth-child(1) > img, #instafeed > a:nth-child(2) > img, #instafeed > a:nth-child(3) > img, #instafeed > a:nth-child(4) > img { width: 50%; } #instafeed > a > img { display: block; float: left; } #instafeed > a:nth-child(n+5) > img { display: none; } @media screen and (min-width: 768px) { #instafeed > a:nth-child(1) > img, #instafeed > a:nth-child(2) > img, #instafeed > a:nth-child(3) > img, #instafeed > a:nth-child(4) > img, #instafeed > a:nth-child(5) > img, #instafeed > a:nth-child(6) > img { width: 33.3333333%; display: block; } } @media screen and (min-width: 992px) { #instafeed > a:nth-child(1) > img, #instafeed > a:nth-child(2) > img, #instafeed > a:nth-child(3) > img, #instafeed > a:nth-child(4) > img, #instafeed > a:nth-child(5) > img, #instafeed > a:nth-child(6) > img, #instafeed > a:nth-child(7) > img, #instafeed > a:nth-child(8) > img { width: 25%; display: block; } }