/**************************************************************************************** NOTE: This site is using critical path CSS method to help with page speed scores. That means, some CSS that's in this stylesheet is being inlined in the which can be found in parent.master. If you're changing styles you should double check if they need to be changed in the critical CSS as well. ****************************************************************************************/ [class*="fa-"]:before, .buckets ul li h1 strong:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Web Fonts from fontspring.com * * All OpenType features and all extended glyphs have been removed. * Fully installable fonts can be purchased at http://www.fontspring.com * * The fonts included in this stylesheet are subject to the End User License you purchased * from Fontspring. The fonts are protected under domestic and international trademark and * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or * distributing this font software. * * (c) 2010-2014 Fontspring * * The fonts included are copyrighted by the vendor listed below. * * Vendor: Synthview Type Design * License URL: http://www.fontspring.com/fflicense/synthview * */ @font-face { font-family: 'Novecento Wide'; src: url('../fontfiles/Novecentowide-Normal-webfont.eot'); src: url('../fontfiles/Novecentowide-Normal-webfont.eot?#iefix') format('embedded-opentype'), url('../fontfiles/Novecentowide-Normal-webfont.woff') format('woff'), url('../fontfiles/Novecentowide-Normal-webfont.ttf') format('truetype'), url('../fontfiles/Novecentowide-Normal-webfont.svg#NovecentowideNormalRegular') format('svg'); font-weight: normal; font-style: normal; } /** TABLE OF CONTENTS **/ /** 1. General /** 1a. Forms /** 2. Body /** 3. Header /** 4. Navigation /** 4a. Responsive Menu /** 4b. Mobile Nav Panels /** 4c. Main Menu /** 4d. Drop Downs /** 4e. Shopping Nav /** 5. Banner /** 6. Main /** 6a. Newsletter & About /** 6b. Buckets /** 6c. Testimonials /** 6d. Panels /** 6e. Contact /** 7. Footer /** 8. Shopping /** 8a. Catalog /** 8b. Product Page /** 8c. Check Out /** 9. Touchevents /** 10. Image Gallery /** 11. Modal Popups /** 12. Lazy Loading /*********************** 1. General ***********************/ body { background: #fff; color: #202020; font: 1em/1.25 'Helvetica', arial, sans-serif; } p { margin: 0.9375em 0; /*15*/ } a { color: #fb5c55; -webkit-transition: color .2s; transition: color .2s; } a:hover, a:focus { color: #435c69; } h1, h2, h3, h4, h5, h6, .SectionHeader { color: #fc8c87; font: 1.625em/1.2 "Pompiere", 'Helvetica', arial, sans-serif; /*26*/ margin: 0 0 7px; padding: 0; } h1 { font-size: 38px; text-transform: uppercase; color: #ed2856; } h2 { color: #26c7c1; font: 32px "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; /*24*/ letter-spacing: 1px; } .slider h2 { color: #1D5E84; font: 1.6875em "Pompiere", 'Helvetica', arial, sans-serif; /*27*/ line-height: 1.4 !important; } h3 { color: #1D5E84; font-size: 30px; font-family: "Oswald", Arial, sans-serif; font-weight: 700; } .slider h3 { color: #fc8c87; font-size: 1.5625em; /*25*/ line-height: 1.4 !important; } h4 { color: #26c7c1; font-size: 28px; /*22*/ font-family: "Pompiere", "Helvetica", Arial, sans-serif; } h5 { color: #ed2856; font: 24px "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; letter-spacing: 1px; } h6, .SectionHeader { color: #1D5E84; font: 18px "Oswald", arial, sans-serif; /*18*/ font-weight: 700; } @media only screen and (min-width: 1200px) { h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 32px; } h4 { font-size: 32px; } h5 { font-size: 28px; } h6 { font-size: 24px; } } .ht, .bx-controls a { text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; } .SectionHeader { border-bottom: 1px solid #9c9c9c; display: block; margin: .6em 0; } :root * > img { max-width: 100%; } hr { background: url(../images/bg-stripes.gif); border: 0; margin: 20px auto; height: 15px; } .inner { margin: 0 auto; padding: 0 1.25em; /*20*/ max-width: 78.125em; /*1250*/ } [class*="block-"] { float: left; padding: 0 1.25em; /*20*/ } .block-10 { width: 10%; } .block-20 { width: 20%; } .block-25 { width: 25%; } .block-30 { width: 30%; } .block-35 { width: 35%; } .block-40 { width: 40%; } .block-50 { width: 50%; } .block-60 { width: 60%; } .block-65 { width: 65%; } .block-70 { width: 70%; } .block-80 { width: 80%; } .mb-20 { margin-bottom: 20px; } /*** (830px) ***/ @media only screen and (max-width : 51.875em) { .container .block-70 { width: 60%; } .container .block-30 { width: 40%; } } /*** (800px) ***/ @media only screen and (max-width : 50em) { .content > img { display: block; float: none !important; margin: .625em 0 !important; /*10*/ } } /*** (700px) ***/ @media only screen and (max-width : 43.75em) { .container .block-70, .container .block-30 { float: none; margin: 0; width: 100%; } .container .block-70 { margin-bottom: 1.875em; /*30*/ } } /*** (600px) ***/ @media only screen and (max-width : 37.5em) { .content > h1 { font-size: 24px; } .content > h2 { font-size: 22px; } } /* Facebook Messaging */ .mcwidget-embed { width: 50%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 1000px) { .mcwidget-embed { width: 50%; float: right; } } /*** 1a. Forms ***/ input[type="text"], input[type="email"], input[type="password"], textarea, .DropDownList, .item input[type="email"], .item input[type="tel"] { background: #fff; border: 1px solid #ccc; color: #202020; height: 30px; margin-bottom: 5px; padding: 5px; } select { color: #000; } textarea { height: 80px; max-width: 600px; } input[disabled], button[disabled] { opacity: .5; } label, .TableRowLabel { color: #284e5b; font: .875em "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; /*19*/ letter-spacing: 1px; padding-right: 7px; padding-bottom: 5px; } label span { color: #26c7c1 !important; font: 11px "Helvetica", arial, sans-serif; } .actions p { margin: 0 0 .9375em; /*15*/ } .actions input { margin-bottom: .625em; /*10*/ margin-right: .625em; /*10*/ } input[type="submit"], input[type="button"], button, a[title^="View"], .btn { background: #f15579; display: inline-block; margin-bottom: 10px; border: 0; color: #fff; cursor: pointer; font: 19px/1.2 "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; /*19*/ padding: 12px 10px 10px; text-align: center; text-decoration: none; -webkit-transition: background .2s, box-shadow .4s; transition: background .2s, box-shadow .4s; } .btn.btn-cancel { background: #CEE1CE; color: #59120f; margin-left: 5px; } .btn { display: inline-block; } button { line-height: 1.158; } input[type="submit"]:hover, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, button:hover, input[type="submit"]:active, input[type="submit"]:focus, .btn:hover, .btn:focus { background: #f3869f !important; color: #fff !important; } button.ribbon:hover:after { border-color: #26c7c1 !important; border-right-color: transparent !important; right: -24px; } .btn.popup-video { line-height: 1; padding: 12px 12px 12px 55px; font: 700 16px/1 "Oswald", Arial, sans-serif !important; color: #fff; border-radius: 21.5px; } .btn.popup-video:before { content: ''; position: absolute; width: 48px; height: 48px; border-radius: 100%; background: transparent; border: 4px solid #ed2856; left: 0; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .btn.popup-video:after { content: ''; display: block; position: absolute; left: 16px; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 18px solid #fff; } .btn.popup-video:hover:before { border: 4px solid #1D5E84; } @media only screen and (min-width: 900px) { .btn.popup-video { padding: 18px 18px 18px 70px; font: 700 18px/1 "Oswald", Arial, sans-serif !important; border-radius: 27.5px; } .btn.popup-video:before { width: 60px; height: 60px; border: 4px solid #ed2856; } .btn.popup-video:after { content: ''; display: block; position: absolute; left: 20px; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid #fff; } .btn.popup-video:hover:before { border: 4px solid #1D5E84; } } .sticky-sub { position: fixed; bottom: 0; left: 0; width: auto; z-index: 9999; } .sticky-sub a { text-decoration: none; display: block; width: 100%; text-align: center; padding: 8px 10px; color: #fff; background: rgba(237,40,86,0.8); font: 700 16px/1 "Oswald", Arial, sans-serif; } .sticky-sub a:hover, .sticky-hub a:focus { background: rgba(237,40,86,1); } .sticky-sub span { font-size: 24px; } @media only screen and (min-width: 900px) { .sticky-sub { position: fixed; bottom: 0; width: auto; left: auto; right: 100px; z-index: 9999; } .sticky-sub a { width: auto; display: inline-block; background: #ed2856; border-top-left-radius: 10px; border-top-right-radius: 10px; } .sticky-sub a:hover, .sticky-hub a:focus { background: rgba(237,40,86,0.8); } } .mfp-container button:hover { background-color: transparent !important; color: #FFF !important; } .item { margin-bottom: .9375em; } .item input[type="text"], .item input[type="password"], .item input[type="email"], .item input[type="tel"], .item select, .item textarea { width: 100%; } .item label { display: block; } .shorti { display: inline-block; padding-right: .625em; /*10*/ vertical-align: top; width: 49%; } .searchfield { max-width: 600px; } .searchfield input { height: 50px; } .searchfield input[type="text"] { width: 100%; } .searchfield input[type="submit"] { position: absolute; right: 0; top: 0; } .gcLabels { width: 38%; } .gcL1, .gcL2, .gcL3 { text-align: right; } .gcL1 label, .gcL2 label, .gcL3 label { padding-right: 12px; } /*** (600px) ***/ @media only screen and (max-width : 37.5em) { textarea { width: 100%; } .item { margin-bottom: 10px; } .item.nm, .item.nm .check { margin-bottom: 0; } .shorti, .shorti2 { display: block; margin-bottom: 10px; padding-right: 0; width: 100%; } } /*********************** 2. Body ***********************/ .full { min-height: 100%; padding-top: 75px; } .container { background: #fff; margin: 0 auto; padding: 0 1.875em 1.875em; /*30*/ max-width: 78.125em; /*1250*/ z-index: 10; } .interior .content { padding: 20px 30px 0; } /*** (440px) ***/ @media only screen and (max-width : 27.5em) { .interior .content { padding: 0 1.25em; /*20*/ } } /*** (600px) ***/ @media only screen and (max-width : 37.5em) { .container { padding: 0; } } @media only screen and (min-width: 1200px) { .full { padding-top: 140px; } } /*********************** 3. Header ***********************/ header { background: #fff; width: 100%; } .top { background: #ed2856; } .headliner { margin: 0; padding: 8px; text-align: center; color: #fff; font-family: "Oswald", Arial, sans-serif; font-weight: 700; position: fixed; width: 100%; background: #ed2856; z-index: 898; font-size: 14px; top: 42px; } .headliner p { margin: 0; } .socials { text-align: center; } .socials a { display: inline-block; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .socials a:hover, .socials a:focus { opacity: 0.75; } .socials img { max-width: 42px; padding: 5px; display: block; } .logo { max-width: 400px; margin: auto; padding: 20px; } @media only screen and (max-width: 1200px) { nav.shopping ul { text-align: center; z-index: 10; } nav.shopping a:before { font-size: 22px; } } /*********************** 4. Navigation ***********************/ .main-nav, #main-nav ul p, .main-nav ul br, nav p { display: none; } /* 4a. Responsive Menu */ .toggle-menu { background: #26c7c1; color: #284e5b; font: 18px/1 "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; left: 0; letter-spacing: 1px; position: fixed; text-align: left; text-decoration: none; text-transform: uppercase; top: 0; width: 100%; z-index: 900; } .toggle-menu .icon, .toggle-menu .menu-text { display: inline-block; vertical-align: middle; } .toggle-menu p { margin: 0; } .toggle-menu a { color: #284e5b; display: block; padding: 12px 15px; text-decoration: none; } /* Hamburger menu icon */ .toggle-menu .icon, .toggle-menu .icon:after, .toggle-menu .icon:before { background: #284e5b; -webkit-transition: all 0s .3s; transition: all 0s .3s; width: 18px; height: 2px; } .toggle-menu .icon:after, .toggle-menu .icon:before { background: #284e5b; content: ""; position: absolute; left: 0; } .toggle-menu .icon:before { bottom: 5px; -webkit-transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1); transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-menu .icon:after { top: 5px; -webkit-transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1); transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1); } /* When clicked, hamburger icon animates into an X */ .toggle-menu .is-clicked .icon { background: rgba(255, 255, 255, 0); } .toggle-menu .is-clicked .icon:after { background: #fff; top: 0; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-menu .is-clicked .icon:before { background: #fff; bottom: 0; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); } /* 4b. Mobile Nav Panels */ [id$="nav-copy"] { /* Targets any element with an id that ends in "nav-copy", when making any new mobile menu panels using IDs like that will style them all the same */ background: rgba(255,255,255,.95); border-left: 1px solid rgba(0,0,0,.1); font: 1.125em "Oswald","Helvetica Narrow",arial,sans-serif; padding: 45px 0 0; position: fixed; left: 0; overflow-y: auto; top: 0; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(-100%); /* Shift panel offscreen by certain amount of pixels. Always make it a bit greater than the width of the panel */ -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform .4s 0s; transition: transform .4s 0s; width: 280px; height: 100%; z-index: 899; } [id$="nav-copy"] ul li { display: block; } [id$="nav-copy"] ul li a { border-bottom: 1px solid rgba(0,0,0,.1); display: block; padding: 13px 40px 13px 20px; text-decoration: none; } [id$="nav-copy"] ul li a:hover { } [id$="nav-copy"] ul li ul { background: #faf5ee; font-size: 15px; line-height: 1.2; } [id$="nav-copy"] ul li ul li a { padding-left: 25px; } [id$="nav-copy"].open-menu { -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; /* When class is applied, panels shifts to 0px */ -webkit-transition: -webkit-transform .4s 0s; transition: transform .4s 0s; -webkit-overflow-scrolling: touchevents; } .dd-wrap { display: block; width: 100%; } .open-dd { background: #fff3be; border-bottom: 1px solid #fff; cursor: pointer; display: block; position: absolute; right: 0; text-align: center; top: 0; width: 50px; height: 100%; z-index: 10; } /* Icon to indicate there's drop downs to open */ .open-dd::after { content: "\f103"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; left: 0; margin: auto; position: absolute; right: 0; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .open-dd:hover, .open-dd:focus { background: #26c7c1; } .has-sub ul { display: none; } .has-sub span { display: block; } .has-sub > span { height: 100%; } /* 4c. Main Menu */ .main-nav { background: #fff; margin: 0 auto; padding: .625em 1.875em; width: 100%; height: 100%; z-index: 20; } .main-nav ul { margin: 0 auto; text-align: center; } .main-nav ul li { color: #404040; display: inline-block; font: 16px "Oswald", "Helvetica Narrow", arial, sans-serif; margin: 0 2px; } .main-nav ul li a { color: #404040; display: block; height: 100%; line-height: 44px; padding: 0 5px; text-decoration: none; } .main-nav ul li:hover a, .main-nav ul li a:focus { color: #fff; } .main-nav > ul > li { -webkit-transition: all 0.3s; transition: all 0.3s; } .main-nav > ul > li:hover { background: #f15579; } /* 4d. Drop Downs */ /* Drop down menus are made of an element with a max-height initially set to 0 then on hover the number is changed, and transitions make it slide open. */ .main-nav ul > li > ul { background: #eee; left: 0; display: block; line-height: 1.2; margin: 0; max-height: 0; opacity: 0; overflow: hidden; /* This hides any of the element not being used */ padding: 0; pointer-events: none; /* Needed so no one is accidentally hovering over an invisible pixel and opening the menu */ position: absolute; text-align: left; top: auto; -webkit-transition: max-height .2s ease-in-out 0s, opacity .1s ease-in-out 0s; transition: max-height .2s ease-in-out 0s, opacity .1s ease-in-out 0s; width: 200px; z-index: 9999; height: auto !important; } .main-nav ul > li > ul li { border: 0 !important; font: 16px/1 "Lato", 'Helvetica Narrow', 'Arial Narrow', arial, sans-serif !important; height: auto !important; margin: 0; padding: 0; width: 100%; display: inline-block; } .main-nav ul > li > ul li a { color: #284e5b !important; display: block; line-height: normal !important; padding: 10px !important; text-indent: 0 !important; -webkit-transition: none; transition: none; } .main-nav ul > li > ul li a:hover { background: #e3e3e3 !important; } .main-nav ul > li:hover > ul, .main-nav ul > li > a:focus + ul { max-height: 800px; /* This number can be changed if needed */ opacity: 1; pointer-events: visible; /* Need to set this to visible so people can select links in the drop down */ -webkit-transition: max-height .7s ease-in-out 0s; transition: max-height .7s ease-in-out 0s; } @media only screen and (min-width: 1200px) { [id$="nav-copy"], .toggle-menu { display: none; } .main-nav { display: inline-block; text-align: right; } .main-nav ul { text-align: right; } } @media only screen and (min-width: 1400px) { .main-nav ul li { font-size: 20px; margin: 0 5px; } } /* 4e. Shopping Nav */ nav.shopping { background: #ffd94b; color: #1D5E84; width: 50%; position: fixed; top: 0; right: 0; text-align: center; padding: 5px 15px; z-index: 901; } nav.shopping li { display: inline-block; } nav.shopping li a span { color: transparent; font-size: 0; line-height: 0; } nav.shopping a { border-radius: 50px; color: #ed2856; display: inline-block; font-size: 20px; line-height: 1; padding: 6px 8px; } nav.shopping a:hover { background: #fff3be; } .fa-search a:before { content: "\f002"; } .fa-shopping-cart a:before { content: "\f07a"; } .fa-user a:before { content: "\f007"; } .count { margin-left: -8px; } @media only screen and (min-width: 1200px) { header.main { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; border-bottom: 2px dotted #ccc; } .headliner { width: calc(100% - 450px); float: left; padding: 13px 10px 10px 375px; position: relative; background: transparent; z-index: auto; font-size: 16px; top: auto; } .socials { width: 200px; float: left; text-align: right; padding-right: 10px; } .socials img { padding: 6px 5px 5px; } nav.shopping { position: relative; top: auto; left: auto; width: 250px; float: right; padding: 8px 15px; } nav.shopping li { margin: 0 10px; } .bottom { padding: 0 15px; } .logo { width: 350px; display: inline-block; margin-right: -5px; vertical-align: middle; background: #fff; margin-top: -35px; } .main-nav { width: calc(100% - 350px); vertical-align: middle; padding: 0; } } @media only screen and (min-width: 1400px) { .logo { width: 300px; -webkit-transition: width 0.3s; transition: width 0.3s; } .main-nav { width: calc(100% - 300px); -webkit-transition: width 0.3s; transition: width 0.3s; } .full { padding-top: 132px; } header.main.change-it .logo { width: 200px; } header.main.change-it .main-nav { width: calc(100% - 200px); } } @media only screen and (min-width: 1600px) { .logo { width: 440px; } .main-nav { width: calc(100% - 440px); } .full { padding-top: 160px; } } /************************* Banner *************************/ .banner { margin-bottom: 40px; z-index: 8; } .banner > .inner { padding: 0; } .banner li { background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; display: block !important; border-top: 1px solid #b3b3b3; border-bottom: 1px solid #b3b3b3; } .banner .arrow { background: #26c7c1; color: #fff; cursor: pointer; display: block; font-size: 26px; left: 20px; line-height: 1; padding: 6px 12px 8px 8px; position: absolute; text-align: center; top: 20px; z-index: 9; } .banner .arrow.arrow-next { left: auto; padding: 6px 8px 8px 12px; right: 20px; } .banner .arrow:hover, .banner .arrow:focus { background: #1D5E84; } .banner li .text { background-image: url(/Images/marker-banner-blue-3.png); background-size: 200%; background-repeat: no-repeat; padding: 20px; text-align: center; } .banner li .text:before { content:''; width: 100%; height: 100%; display: block; background: url(/Images/stitch-pattern.png); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } .banner li:nth-of-type(2n) .text { background-image: url(/Images/marker-banner-yellow-3.png); background-size: 200%; background-repeat: no-repeat; } .banner li:nth-of-type(3n) .text { background-image: url(/Images/marker-banner-red-3.png); background-size: 200%; background-repeat: no-repeat; } .banner li .text .btn-container { margin-top: 25px; } .banner li .text .btn p { margin: 0; } .banner li .text h2 { color: #333; font-size: 32px; font-family: "Pompiere", "Oswald", sans-serif; text-transform: uppercase; text-shadow: 2px 1px #fff; } .banner li .text h4 { color: #1D5E84; font-family: "Oswald", Arial, sans-serif; font-weight: 700; text-shadow: 2px 1px #fff; font-size: 24px; } .banner li a.img-link { display: block; } @media only screen and (min-width : 900px) { .banner .arrow { top: auto; bottom: 20px; } .banner li .slide-wrap { width: 100%; display: table; } .banner li .image, .banner li .text { width: 50%; display: table-cell; vertical-align: middle; } } @media only screen and (min-width : 1300px) { .banner li .text { padding: 50px; } .banner li .text h2 { font-size: 48px; } } /*********************** 6. Main ***********************/ /* 6a. Newsletter & About */ .big-right { padding: 0 20px; max-width: 1500px; margin: 0 auto 50px; } .big-right .newsletter { max-width: 500px; margin: 0 auto 40px; text-align: center; border: 2px solid #26c7c1; padding: 25px; background: url(/Images/stitch-pattern-blue.png); } .big-right .newsletter h4 { font-family: "Novecento Wide", Arial, sans-serif; text-transform: uppercase; background: url(/Images/red-marker-1.png); background-size: cover; color: #fff; padding: 20px 0; font-weight: normal; text-shadow: 1px 1px #59120f; } .big-right .newsletter h3 { font-family: "Oswald", Arial, sans-serif; font-size: 36px; font-weight: 700; text-transform: uppercase; margin: 0; line-height: 1; } .big-right .about h1 { font-size: 30px; text-transform: none; } .big-right .about h2 { font-size: 24px; } @media only screen and (min-width: 400px) { .big-right .newsletter h4 { font-size: 24px; padding: 30px 0; } } @media only screen and (min-width: 600px) { .big-right .newsletter h4 { font-size: 30px; padding: 48px 0; } .big-right .newsletter h3 { font-size: 75px; } .big-right .newsletter p { font-size: 24px; } } @media only screen and (min-width: 1200px) { .big-right .newsletter { width: 500px; max-width: 100%; float: left; } .big-right .about { width: calc(100% - 500px); padding-left: 50px; float: left; } .big-right .about h1 { font-size: 48px; } .big-right .about p { font-size: 20px; } } /* 6b. Buckets */ .big-left { padding: 0 20px; max-width: 1500px; margin: 0 auto 50px; } .big-left .bucket-grid { max-width: 1000px; margin: 0 auto 40px; } .big-left .bucket-grid a { display: block; width: 100%; height: 100%; } .big-left .bucket-grid a span { position: absolute; display: inline-block; background: rgba(255,255,255,0.75); color: #202020; font-family: "Pompiere", "Oswald", Arial, sans-serif; font-size: 24px; text-transform: uppercase; padding: 10px 10px 5px; -webkit-transition: all 0.3s; transition: all 0.3s; } .big-left .bucket-grid .row:first-child .col:first-child a span { bottom: 0; right: 0; } .big-left .bucket-grid .row:first-child .col:last-child a span { top: 0; left: 0; } .big-left .bucket-grid .row:last-child .col:last-child a span { top: 0; right: 0; } .big-left .bucket-grid .row { width: 100%; clear:both; } .big-left .bucket-grid .row .col { background-size: cover; background-position: center; background-repeat: no-repeat; height: 250px; display: block; } .big-left .bucket-grid .row .col, .big-left .bucket-grid .row .col .block { border: 3px solid #fff; -webkit-transition: border 0.3s; transition: border 0.3s; } .big-left .bucket-grid .row .col:hover, .big-left .bucket-grid .row .col .block:hover { border: 3px solid #26c7c1; } .big-left .bucket-grid .row .col9, .big-left .bucket-grid .row .col3 { width: 50%; float: left; } .big-left .bucket-grid a:hover span { background: #ffd94b; color: #ed2856; } @media only screen and (min-width: 600px) { .big-left .bucket-grid .row .col9 { width: 66.6666%; } .big-left .bucket-grid .row .col3 { width: 33.3333%; } } @media only screen and (min-width: 800px) { .big-left .bucket-grid .row:last-child .col { height: 400px; } .big-left .bucket-grid .row:last-child .col .block { height: 200px; } .big-left .bucket-grid a span { font-size: 30px; } } @media only screen and (min-width: 1200px) { .big-left .testimonials { width: 500px; max-width: 100%; float: left; } .big-left .bucket-grid { width: calc(100% - 500px); padding-right: 50px; float: left; } } /* 6c. Testimonials */ .big-left .testimonials { max-width: 500px; margin: auto; } .big-left .testimonials h4 { font-family: "Novecento Wide", Arial, sans-serif; text-transform: uppercase; background: url(/Images/red-marker-2.png); background-size: cover; color: #fff; padding: 20px 50px; font-weight: normal; text-shadow: 1px 1px #59120f; text-align: center; } .big-left .testimonials .arrow { background: #26c7c1; color: #fff; cursor: pointer; display: block; font-size: 26px; left: 0; line-height: 1; padding: 6px 12px 8px 8px; position: absolute; text-align: center; top: -47px; z-index: 9; } .big-left .testimonials .arrow.arrow-next { left: auto; padding: 6px 8px 8px 12px; right: 0; } .big-left .testimonials .arrow:hover, .big-left .testimonials .arrow:focus { background: #1D5E84; } .big-left .testimonials ul li { margin-top: 20px; } .big-left .testimonials ul li strong { margin-top: 10px; text-align: right; display: block; color: #fb5c55; } .big-left .testimonials .slick-dots { border-top: 1px solid #ccc; bottom: -45px; } .big-left .testimonials .slick-dots li { margin-top: 0; } .big-left .testimonials .slick-dots li button { width: 35px; height: 35px; } .big-left .testimonials .slick-dots li button:before { font-size: 35px; line-height: 35px; width: 35px; height: 35px; } .big-left .testimonials .slick-dots li button:hover { background: transparent !important; } .big-left .testimonials .slick-dots li button:hover:before { color: #26c7c1; } .big-left .testimonials .slick-dots li.slick-active button:before { color: #fb5c55; } @media only screen and (min-width: 600px) { .big-left .testimonials h4 { font-size: 24px; padding: 46px 50px; } .big-left .testimonials ul li { font-size: 24px; } .big-left .testimonials .arrow { top: -100px; } } /* Newsletter Popup */ /* Modal */ .newsletter-popup { max-width: 600px; margin: auto; background: #fff; padding: 25px; color: #202020 !important; font-size: 14px; } @media only screen and (min-width: 800px) { .newsletter-popup { padding: 50px; } } .mfp-container .newsletter-popup button:hover { background: #f3869f !important; color: #fff !important; } /* 6d. Panels */ .close { color: #707070; font-size: .875em; margin-bottom: 1.25em; /*20*/ position: absolute; right: 0; text-decoration: none; top: 0; z-index: 9000; } .panel { margin-top: -300%; overflow-y: auto; overflow-x: hidden; padding: 100px; position: fixed; top: 0; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; min-width: 100%; height: 100%; z-index: 9000; } .panel:target { background-color: #fff; background-color: rgba(255,255,255,.95); margin-top: 0%; } .panel .content { max-width: 685px; width: 100%; margin: auto; } #home:target ~ #header #navigation #link-home, #portfolio:target ~ #header #navigation #link-portfolio, #about:target ~ #header #navigation #link-about, #contact:target ~ #header #navigation #link-contact { background: #000; color: #fff; } #account ul { text-align: left; } #account ul li { display: inline-block; font: 1.125em "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; /*24*/ letter-spacing: 1px; margin: .625em 1.25em .625em 0; /*10 20*/ } #account ul li a { text-decoration: none; } /*** (900px) ***/ @media only screen and (max-width : 56.25em) { .panel { padding: 3.75em; /*60*/ } } /*** (600px) ***/ @media only screen and (max-width : 37.5em) { .panel { padding: 2.5em; /*30*/ } #account ul li { display: block; } } /*** (440px) ***/ @media only screen and (max-width : 27.5em) { .panel { padding: 1.25em; /*20*/ } .close { float: right; position: relative; top: auto; } .interior .panel .content { padding: 0; } } /* 6e. Contact */ .contact-form, .contact-content { float: left; width: 45%; } .contact-form { padding-left: 1.875em; /*30*/ width: 55%; } /*** (900px) ***/ @media only screen and (max-width : 56.25em) { .contact-form, .contact-content { float: none; padding: 0; width: 100%; } .contact-form { margin-top: 3.125em; /*50*/ } } /*********************** 7. Footer ***********************/ footer { background: url(../images/bg-stripes.gif); clear: both; color: #707070; margin-top: 50px; padding: 0; /*30*/ width: 100%; } footer .footer-top { background: #eee; padding: 20px; text-align: center; } footer .footer-top .inner-block { max-width: 800px; margin: auto; } footer .inner { padding: 30px 1.25em; } footer .block-40 { text-align: right; } footer a { color: #fb5c55; } footer a:hover { color: #707070; } footer nav ul li { display: block; font: 1em "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; margin: 0 0 .625em; /*10*/ } footer nav ul li a { color: #707070; text-decoration: none; } footer nav ul li a:hover { color: #de423b; } footer nav.lr ul ul { padding-left: 15px; } footer nav ul li ul li a { color: #fb5c55; } footer nav ul li ul li a:hover { color: #de423b; } @media only screen and (min-width: 800px) { footer .footer-top .text { width: calc(100% - 250px); display: inline-block; vertical-align: middle; margin-right: -5px; text-align: left; } footer .footer-top .btn-container { width: 250px; display: inline-block; vertical-align: middle; text-align: right; } } /*** (1000px) ***/ @media only screen and (max-width : 62.5em) { footer .block-20 { width: 30%; } footer .block-40 { clear: both; float: none; text-align: center; width: 100%; } } /*** (700px) ***/ @media only screen and (max-width : 43.75em) { footer .block-20 { float: none; width: 100%; } footer nav { border-bottom: 1px solid #ccc; margin-bottom: 1.25em; /*20*/ } footer nav > ul { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } footer nav ul li { font-size: .875em; } } /*** (440px) ***/ @media only screen and (max-width : 27.5em) { footer nav > ul { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } /*********************** 8. Shopping ***********************/ .wishlist-entry { border-bottom: 4px double #e2e2e2; } /*** 8a. Catalog ***/ .catalog > .inner { background: url(../images/bg-stripes.gif); padding: 20px 15px; } .catalog ul li { background: #fff; border: 1px solid #EDEDED; font: 14px/1.2 "Lato", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; margin: 0 auto 20px; min-height: 300px; padding: 0; max-width: 350px; width: 100%; } @media only screen and (min-width : 550px) { .catalog ul li { float: left; margin: 0 10px 20px; max-width: none; } } @media only screen and (min-width : 550px) and (max-width : 800px) { .catalog ul li { width: calc(100% / 2 - 12px); } .catalog ul li:nth-of-type(2n + 1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(2n + 2) { margin-right: 0; } } @media only screen and (min-width : 801px) and (max-width : 1200px) { .catalog ul li { width: calc(100% / 3 - 16px); } .catalog ul li:nth-of-type(3n + 1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(3n + 3) { margin-right: 0; } } @media only screen and (min-width : 1201px) { .catalog ul li { width: calc(100% / 4 - 16px); } .catalog ul li:nth-of-type(4n + 1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(4n + 4) { margin-right: 0; } } @media only screen and (min-width : 1500px) { .catalog > .inner { padding: 30px 30px 0; } .catalog ul li { font-size: 16px; } } .pcontent { padding: 0 20px; text-align: left; } .pcontent .inner { min-height: 65px; padding: 0; } .pcontent label { color: #757575; font: italic 1em/1.2 "Lato", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; letter-spacing: 0; } .catalog [class*="block-"] { padding: 0; } .catalog [class*="block-"].info { padding: 0 .625em 0 0; /*10*/ } .catalog button { bottom: 10px; margin: 0; position: absolute; right: -20px; text-align: right; z-index: 0; } .catalog .pimage, .categories .pimage { margin-bottom: .625em; /*10*/ text-align: center; } .catalog .pimage a, .categories .pimage a { display: block; } .prices { margin-bottom: .625em; /*10*/ } .catalog h1, .catalog h6, .related h1, .related h6, .categories h1, .categories h6 { color: #db5650; font: 1.125em/1.2 "Novecento Wide", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; /*18*/ letter-spacing: 1px; text-align: center; } .catalog h6 { font-size: 1em; } .catalog h1 a, .catalog a h1, .catalog h6 a, .catalog a h6, .related h1 a, .related a h1, .related h6 a, .related a h6, .categories h1 a, .categories a h1, .categories h6 a, .categories a h6 { color: #db5650; text-decoration: none; } .catalog h1 a:hover, .catalog a:hover h1, .catalog h6 a:hover, .catalog a:hover h6, .related h1 a:hover, .related a:hover h1, .related h6 a:hover, .related a:hover h6, .categories h1 a:hover, .categories a:hover h1, .categories h6 a:hover, .categories a:hover h6 { color: #435c69; } .tracking { display: block; text-align: center; } .catalog h1 a:hover { color: #284e5b; } .stock { font-size: .875em; margin: .625em 0 1.25em; /*10 20*/ } [id*="_Discount"] { color: #ed2856; font-weight: bold; } .page-sort { margin-bottom: .9375em; /*15*/ padding: 0 1.25em; /*20*/ } .page-sort.bottom { margin-top: .9375em; /*15*/ padding-top: .625em; /*10*/ } .sort-by, .pagination { float: left; margin-bottom: .3125em; /*5*/ } .sort-by { text-align: right; width: 30%; } .pagination { padding-right: 1.25em; /*20*/ width: 70%; } .bottom .pagination { padding-right: 0; width: 100%; } div.pagination label { float: left; padding-top: 4px; } div.pagination a, div.pagination span.current { border: 0; border-radius: 2px; color: #1D5E84; display: inline-block; float: none; font-size: .875em; margin: 0 0 5px; padding: .1875em .5em; /*3 8*/ text-decoration: none; -webkit-transition: background .3s; transition: background .3s; } div.pagination a:hover { background-color: #1D5E84; color: #fff; text-decoration: none; } div.pagination span.current { font-weight: normal; background-color: #1D5E84; color: #fff; } .pcontent button.ribbon:after { display: none; } .pcontent button.ribbon:before { border: 22px solid #f15579; border-left-color: transparent; border-left-width: 22px; bottom: 0; content: ""; display: block; position: absolute; left: -22px; -webkit-transition: border-color .2s, left .3s; transition: border-color .2s, left .3s; width: 1px; z-index: -1; } .pcontent button.ribbon:hover:after { display: none; } .pcontent button.ribbon:hover:before { border-color: #f3869f !important; border-left-color: transparent !important; left: -24px; } /*** (440px) ***/ @media only screen and (max-width : 27.5em) { .catalog [class*="block-"] { float: none; margin-bottom: 5px; position: relative; width: 100%; } .pcontent button { right: -20px; } } /*** 8b. Product Page ***/ .options { margin: 1.25em 0; /*20*/ } .options td { padding-bottom: .625em; /*10*/ } #mainProductDetails { float: right; width: 65%; } #mainProductDetails .actions { text-align: right; } #mainProductImage { float: left; padding: 0 1.25em 0 0; /*20*/ text-align: center; width: 35%; z-index: 909; } #mainProductImage td { vertical-align: top; } .product-header { background: url(../images/bg-stripes.gif); margin-bottom: 1.25em; /*20*/ padding: .625em; /*10*/ text-align: center; } .search-select { margin-bottom: 15px; } .select2-results .select2-highlighted { background: #fc8c87; } /*** (950px) ***/ @media only screen and (max-width : 59.375em) { .sort-by, .pagination { float: none; padding: 0; text-align: left; width: 100%; } } /*** (900px) ***/ @media only screen and (max-width : 56.25em) { #mainProductImage, #mainProductDetails { float: none; margin: 0; padding: 0; width: 100%; } #mainProductImage { max-width: 600px; margin: auto; } } .related ul li, .categories ul li { background: #fff; border: 1px solid #EDEDED; font: 14px/1.2 "Lato", 'Century Gothic', 'Helvetica Narrow', arial, sans-serif; margin: 0 auto 20px; padding: 0 0 10px; max-width: 300px; width: 100%; } .categories ul li { text-align: center; } .related h6, .categories h6 { font-size: 14px; padding: 0 10px; } @media only screen and (min-width : 450px) { .related ul li, .categories ul li { float: left; margin: 0 10px 20px; max-width: none; } } @media only screen and (min-width : 450px) and (max-width : 750px) { .related ul li, .categories ul li { width: calc(100% / 2 - 13px); } .related ul li:nth-of-type(2n + 1), .categories ul li:nth-of-type(2n + 1) { clear: both; margin-left: 0; } .related ul li:nth-of-type(2n + 2), .categories ul li:nth-of-type(2n + 2) { margin-right: 0; } } @media only screen and (min-width : 751px) and (max-width : 950px) { .related ul li, .categories ul li { width: calc(100% / 3 - 17px); } .related ul li:nth-of-type(3n + 1), .categories ul li:nth-of-type(3n + 1) { clear: both; margin-left: 0; } .related li:nth-of-type(3n + 3), .categories li:nth-of-type(3n + 3) { margin-right: 0; } } @media only screen and (min-width : 951px) and (max-width : 1100px) { .related ul li, .categories ul li { width: calc(100% / 4 - 17px); } .related ul li:nth-of-type(4n + 1), .categories ul li:nth-of-type(4n + 1) { clear: both; margin-left: 0; } .related ul li:nth-of-type(4n + 4), .categories ul li:nth-of-type(4n + 4) { margin-right: 0; } } @media only screen and (min-width : 1101px) { .related ul li, .categories ul li { width: calc(100% / 5 - 19px); } .related ul li:nth-of-type(5n + 1), .categories ul li:nth-of-type(5n + 1) { clear: both; margin-left: 0; } .related ul li:nth-of-type(5n + 5), .categories ul li:nth-of-type(5n + 5) { margin-right: 0; } } /*** 8c. Check Out ***/ .cart-footer { margin: 1.25em 0; /*20*/ text-align: right; } .cart-estimates td, .cart-footer > div { padding: 5px; } .total-cost { padding: 0 0 .625em; /*10*/ } .gridview td, .gridview th { border: 0; } .gridview td:nth-child(2n+2), .cart-contents td:nth-child(2n) { background: rgba(0,0,0,.05); } .gridview th { background: #58534c; color: #eaeaea; padding: .625em; /*10*/ } .gridview tr.even, .gridview tr:nth-child(odd) { background: #F3F3F3; } tr.even td { border: 1px solid #fff; } h2.breadcrumbs { color: #e3e3e3; } h2.breadcrumbs strong { color: #f77f76; } h2.breadcrumbs a { text-decoration: none; } /*********************** 9. Touchevents ***********************/ .touchevents .buckets ul li h1 { background: #FC8C87; padding: 15px; top: 0; height: auto; } .touchevents .buckets ul li h1 a strong { display: none; } .touchevents .buckets ul li:nth-child(2) h1 { background: #FFDD58; } .touchevents .buckets ul li:nth-child(3) h1 { background: #9AD0C1; } .touchevents .buckets ul li h1:nth-child(4) { background: #56707B; } .touchevents .buckets ul li h1:before { display: none; } .touchevents .buckets ul li img { opacity: 1; } /*********************** 10. Image Gallery ***********************/ .gallery .notes { font-style: italic; } .gallery .wrapper { background: #CEE1CE; background-image: url(../images/bg-stripes.gif); padding: 10px; } .gallery-slideshow-ul { margin: 0; padding: 0; } .gallery ul { margin: 0; text-align: center; } .gallery ul li { display: inline-block; margin: 4px; overflow: hidden; vertical-align: top; width: 100px; height: 75px; } .gallery .bx-wrapper { background: transparent; border: 0; box-shadow: none; margin: 0 auto; } .gallery .bx-controls { margin-top: 10px; text-align: right; width: 100%; } .gallery-slideshow .bx-controls.bx-has-controls-direction { top: -13px; } .gallery .bx-controls-direction a { display: block; opacity: .5; -webkit-transition: opacity .3s; transition: opacity .3s; width: 32px; height: 32px; margin-top: -5px; z-index: 999; } .gallery .bx-controls-direction a .slide-btn-txt { position: absolute; left: -9999px; } .gallery .bx-controls-direction a.bx-next { margin-left: 10px; right: 0; } .gallery .bx-controls-direction a.bx-prev { margin-left: 0; left: 0; } .gallery .bx-controls-direction a:hover { opacity: 1; } .saturday-snippet { margin-bottom: 30px; } @media only screen and (min-width : 850px) { .saturday-wrapper { margin-bottom: 30px; } .gallery-slideshow { float: right; width: 400px; } .saturday-snippet { float: left; margin-bottom: 0; padding-right: 20px; width: calc(100% - 401px); } .gallery-slideshow .bx-wrapper { margin-bottom: 0; } } @media only screen and (min-width : 1250px) { .gallery-slideshow { width: 600px; } .saturday-snippet { width: calc(100% - 601px); } } /* New default image gallery */ .page-gallery { margin: auto; text-align: center; } .page-gallery img { display: block; } .page-gallery ul { margin: 40px auto; text-align: center; } .page-gallery:not(.masonry) li { margin: 0 5px 10px; width: 100%; -webkit-transition: max-width .1s; transition: max-width .1s; } @media only screen and (min-width : 350px) { .page-gallery:not(.masonry) { text-align: left; } .page-gallery:not(.masonry) li { display: inline-block; vertical-align: top; max-width: calc(100% / 2 - 14px); } } @media only screen and (min-width : 500px) { .page-gallery:not(.masonry) li { max-width: calc(100% / 3 - 14px); } } @media only screen and (min-width : 700px) { .page-gallery:not(.masonry) li { max-width: calc(100% / 4 - 14px); } } @media only screen and (min-width : 900px) { .page-gallery:not(.masonry) li { max-width: calc(100% / 5 - 14px); } } /* Masonry */ .sizer { width: 225px; } .page-gallery.masonry li { margin: 0 0 10px; } /************************ 11. Modal Popups ***********************/ .modal-inner { max-width: 800px; padding: 30px; } [data-modal-close] { background: #fc8c87; box-shadow: none; color: #fff; font-size: 30px; line-height: 27px; width: 30px; height: 30px; } [data-modal-close]:hover, [data-modal-close]:focus { background: #ed2856; } /************************ 12. Lazy Loading ***********************/ .b-lazy { -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0; } .b-lazy.b-loaded { opacity: 1; } .loading { background: url(../Images/loader.gif) no-repeat center center; }