/* Theme Name: Arrow Fastener Version: 1.0 Theme URI: http://www.arrowfastener.com Description: This WordPress theme designed and developed by swb&r / Peer Pressure Creative is for use by Arrow Fastener only. Author: swb&r / Peer Pressure Creative Author URI: http://www.swbrinc.com */ /* All Mighty Reset */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, strike, sub, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;} * {margin: 0;} :focus {outline: 0;} ol, ul {list-style: none;} a {text-decoration: none;} html {height: 100%;} /* Wrap ------------------------------------------------------------------------------------------------------------------------------------------- */ .wrap {width: 95%; max-width: 1000px; margin: 0 auto; position: relative;} /* Clear Fix -------------------------------------------------------------------------------------------------------------------------------------- */ .clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;} * html .clearfix {zoom: 1;} /* IE6 */ *:first-child+html .clearfix{zoom: 1;} /* IE7 */ .clear {clear: both;} /* Body ------------------------------------------------------------------------------------------------------------------------------------------- */ body {background-color: #fff; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} body.no-scroll {overflow: hidden;} body.no-height {height: auto;} /* Selection Color -------------------------------------------------------------------------------------------------------------------------------- */ body ::selection {background: #c72027; color: #fff;} body ::-moz-selection {background: #c72027; color: #fff;} /* Screen Reader ---------------------------------------------------------------------------------------------------------------------------------- */ #screen-reader {position: absolute; left: -99999px; top: -99999px;} /* Blur ------------------------------------------------------------------------------------------------------------------------------------------- */ .blur {-webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);} /* Centered --------------------------------------------------------------------------------------------------------------------------------------- */ .centered {margin: 0 auto; text-align: center; display: block;} .vert-center{position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} /* Padding ---------------------------------------------------------------------------------------------------------------------------------------- */ /* Top ----- */ .padding-top {padding-top: 100px !important;} /* Bottom ----- */ .padding-top {padding-bottom: 80px !important;} /* @font-face ------------------------------------------------------------------------------------------------------------------------------------- */ /* Futura -------------------------------------------------------------- */ @font-face { font-family: 'futura_ltregular'; src: url('fonts/futura/lt-regular/futuralt-webfont.eot'); src: url('fonts/futura/lt-regular/futuralt-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/futura/lt-regular/futuralt-webfont.woff2') format('woff2'), url('fonts/futura/lt-regular/futuralt-webfont.woff') format('woff'), url('fonts/futura/lt-regular/futuralt-webfont.ttf') format('truetype'), url('fonts/futura/lt-regular/futuralt-webfont.svg#futura_ltregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'futura_ltbold'; src: url('fonts/futura/lt-bold/futura-lt-bold-webfont.eot'); src: url('fonts/futura/lt-bold/futura-lt-bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/futura/lt-bold/futura-lt-bold-webfont.woff2') format('woff2'), url('fonts/futura/lt-bold/futura-lt-bold-webfont.woff') format('woff'), url('fonts/futura/lt-bold/futura-lt-bold-webfont.ttf') format('truetype'), url('fonts/futura/lt-bold/futura-lt-bold-webfont.svg#futura_ltbold') format('svg'); font-weight: normal; font-style: normal; } /* Serifa -------------------------------------------------------------- */ @font-face { font-family: 'serifaroman'; src: url('fonts/serifa/55-roman/serifa_55_roman-webfont.eot'); src: url('fonts/serifa/55-roman/serifa_55_roman-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/serifa/55-roman/serifa_55_roman-webfont.woff2') format('woff2'), url('fonts/serifa/55-roman/serifa_55_roman-webfont.woff') format('woff'), url('fonts/serifa/55-roman/serifa_55_roman-webfont.ttf') format('truetype'), url('fonts/serifa/55-roman/serifa_55_roman-webfont.svg#serifaroman') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'serifa_btbold'; src: url('fonts/serifa/bold/serifab-webfont.eot'); src: url('fonts/serifa/bold/serifab-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/serifa/bold/serifab-webfont.woff2') format('woff2'), url('fonts/serifa/bold/serifab-webfont.woff') format('woff'), url('fonts/serifa/bold/serifab-webfont.ttf') format('truetype'), url('fonts/serifa/bold/serifab-webfont.svg#serifa_btbold') format('svg'); font-weight: normal; font-style: normal; } /* font-family: futura_ltregular, Helvetica, sans-serif; */ /* font-family: futura_ltbold, Helvetica, sans-serif; */ /* font-family: serifa_btbold, Times, serif; */ /* font-family: serifaroman, Times, serif; */ /* Header ----------------------------------------------------------------------------------------------------------------------------------------- */ #main {background-color: #fff; width: 100%; padding: 30px 0 22px 0; position: fixed; top: 0; left: 0; z-index: 2500; overflow: hidden; /*-moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;*/} /* Before / After ----- */ #main:before {content: ''; background-color: #c72027; width: 50%; height: 10px; position: absolute; bottom: 0; left: 0; z-index: 0;} #main:after {content: ''; background-color: #76241f; width: 55%; height: 10px; position: absolute; bottom: 0; right: calc(-5% + 5px); -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg); z-index: 2;} /* Active ---------- */ #main.active {padding: 20px 0 30px 0;} /* Logo ----- */ #main.active h1 {width: 100%; max-width: 145px; margin: 0; position: absolute; top: 0; left: 0;} /* Header Contact ------------------------------------------------------ */ #header-contact {position: relative; float: left; font-family: serifa_btbold, Times, serif;} #header-contact h2 {font-size: 14px; line-height: 17px; color: #666;} #header-contact h2 a{color: #666;} #header-contact p {font-size: 12px; line-height: 15px; color: #96999b;} #header-contact p a {color: #96999b;} /* Header Contact ----- */ #main.active #header-contact {display: none;} /* Header Search ------------------------------------------------------- */ #search-trigger {margin: 0 0 0 0; font-size: 18px; line-height: 23px; color: #ca2129; position: relative; float: right;} #main.active #search-trigger {display: none;} /* Navigation ---------------------------------------------------------- */ #main.active #main-navigation {width: 85%; margin: 0; padding: 3px 0 0 0; text-align: right; float: right;} #main.active #main-navigation ul li {margin: 0 5% 0 0;} #main.active #main-navigation ul li:last-child {margin-right: 0;} #main.active #main-navigation ul li#scrolled-search-trigger {display: inline-block !important;} /* Media Queries for Header ---------- */ @media only screen and (max-width: 850px) { /* Navigation ----- */ #main.active #main-navigation ul li {margin: 0 3% 0 0;} } @media only screen and (max-width: 750px) { /* Navigation ----- */ #main.active #main-navigation ul li {margin: 0 2% 0 0;} } @media only screen and (max-width: 700px) { /* Navigation ----- */ #main.active #main-navigation ul li {margin: 0 1% 0 0;} } @media only screen and (max-width: 670px) { /* Navigation ----- */ #main.active #main-navigation ul li {margin: 0 .2% 0 0;} #main.active #main-navigation ul li a {font-size: 13px; line-height: 16px;} } @media only screen and (max-width: 600px) { #main {padding: 12px 0 12px 0 !important;} /* Header Contact ---------- */ #header-contact {display: none;} /* Header Search ---------- */ #search-trigger {display: none;} } /* Logo ------------------------------------------------------------------------------------------------------------------------------------------- */ h1 {width: 100%; max-width: 227px; margin: 0 auto 0 auto; padding: 0; position: relative; display: block; float: none;} h1 a {width: 100%; margin: 0; position: relative; display: block;} h1 a span {position: absolute; left: -99999px; top: -99999px;} h1 a img {max-width: 227px; width: 100%; height: auto;} h1 a svg {max-width: 227px; width: 100%; display: block;} /* Media Queries for Logo ---------- */ @media only screen and (max-width: 600px) { h1 {width: 100% !important; max-width: 175px; margin: 0; position: relative !important; float: left;} } /* Main Navigation -------------------------------------------------------------------------------------------------------------------------------- */ #main-navigation {margin: 0 0 0 0; padding: 30px 0 0 0; text-align: center; position: relative;} #main-navigation ul {} #main-navigation ul li {margin: 0 3.15%; display: inline-block;} #main-navigation ul li a {font-size: 14px; line-height: 16px; color: #666; text-transform: uppercase; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: futura_ltbold, Helvetica, sans-serif;} /* Search */ #main-navigation ul li#scrolled-search-trigger {display: none;} /* Hover */ #main-navigation ul li a:hover {color: #c72027;} /* Here */ #main-navigation ul li.current_page_item a, #main-navigation ul li.current-menu-item a, #main-navigation ul li.current_page_parent a, #main-navigation ul li.current-page-ancestor a, #main-navigation ul li.active a {color: #c72027;} /* Media Queries for Main Navigation ---------- */ @media only screen and (max-width: 750px) { #main-navigation ul li {margin: 0 2.05%;} } @media only screen and (max-width: 600px) { #main-navigation {display: none;} } /* Dropdown Menus --------------------------------------------------------------------------------------------------------------------------------- */ #dropdown-menus {background-color: rgba(118,37,31,.95); width: 100%; position: fixed; top: 150px; left: 0; right: 0; z-index: 2450; display: none;} #dropdown-menus.active {top: 71px;} #dropdown-menus ul {padding: 0;} #dropdown-menus ul li {width: calc(17.6666667% - 2px); padding: 10px 0; border-right: 2px solid #c72027; text-align: center; float: left;} #dropdown-menus ul li:last-of-type {border: none;} #dropdown-menus ul li a {font-size: 24px; line-height: 29px; color: #fff; text-transform: uppercase; letter-spacing: 0px; font-family: futura_ltbold, Helvetica, sans-serif;} #dropdown-menus ul li.cat-item-25 {width: calc(47% - 2px);} /* Page Menu */ #dropdown-menus .page-menu ul {padding: 0; text-align: center;} #dropdown-menus .page-menu ul li {width: auto; margin: 0 2%; padding: 10px 0 8px 0; border-right: none; text-align: center; display: inline-block; float: none;} #dropdown-menus .page-menu ul li a {font-size: 14px; line-height: 19px; color: #fff; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid transparent; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: futura_ltregular, Helvetica, sans-serif;} #dropdown-menus #awesome-menu {padding: 10px 0;} #dropdown-menus #awesome-menu .page-menu ul li {margin: 0 2%;} #dropdown-menus #awesome-menu .page-menu ul li a {border: none !important;} #dropdown-menus #awesome-menu .page-menu ul li a i img {max-width: 25px; width: 100%; height: auto;} #dropdown-menus .page-menu ul li.social-link {font-size: 9px !important; line-height: 9px !important;} #dropdown-menus .page-menu ul li.social-link a {font-size: 9px !important; line-height: 9px !important; border: none !important;} #dropdown-menus .page-menu ul li.social-link a i {font-size: 40px; line-height: 40px; display: block;} #dropdown-menus .page-menu ul li.stacked {font-size: 10px !important; line-height: 9px !important;} #dropdown-menus .page-menu ul li.stacked a {font-size: 10px !important; line-height: 9px !important;} #dropdown-menus .page-menu ul li.stacked a i {margin: 0 0 3px 0; font-size: 35px; line-height: 35px; display: block;} /* Hover */ #dropdown-menus .page-menu ul li a:hover {border-bottom: 1px solid #fff;} /* Menu Group ---------- */ .menu-group {position: relative; display: none;} /* Centered Navigation ----- */ #dropdown-menus nav.centered {text-align: center;} #dropdown-menus nav.centered ul {text-align: center;} #dropdown-menus nav.centered ul li {text-align: center; vertical-align: top; display: inline-block; float: none !important;} #dropdown-menus nav.centered ul li .category-title {margin: 0 auto 10px auto; display: block; clear: both;} /* Menu Icon ----- */ #dropdown-menus nav.centered ul li .menu-icon {width: 85%; max-width: 100px; height: 60px; margin: 0 auto; display: block; clear: both; overflow: hidden;} #dropdown-menus nav.centered ul li .menu-icon img {max-width: 100%; width: auto; height: auto;} /* Staple Category */ #dropdown-menus nav.centered ul li.cat-item-69 .menu-icon img {max-width: 50px;} /* Children ----- */ #dropdown-menus ul li .children {width: 100%; clear: both;} #dropdown-menus ul li .children li {width: 100%; padding: 16px 0 5px 0; border: none; display: inline-block;} #dropdown-menus ul li .children li a {font-size: 12px; line-height: 16px; letter-spacing: 0; font-family: futura_ltregular, Helvetica, sans-serif;} /* Taxonomy Image ----- */ #dropdown-menus ul li .children li a .tool-image {width: 85%; height: 100%; max-height: 135px; margin: 0 auto 15px auto; display: block; clear: both; overflow: hidden;} #dropdown-menus ul li .children li a .tool-image img {max-width: 100%; width: 100%; height: auto;} /* Staple Menu Styles ----- */ #dropdown-menus ul li.cat-item-25 .children li {width: 33.3333333%;} /* Media Queries for Mobile Navigation ---------- */ @media only screen and (max-width: 600px) { #dropdown-menus {display: none !important;} } /* Mobile Navigation ------------------------------------------------------------------------------------------------------------------------------ */ #mobile-navigation {background-color: rgba(199,32,39,.95); width: 100%; height: 100%; margin: 0 auto; padding: 24px 0 20px 0; position: fixed; top: 63px; left: 0; text-align: center; -webkit-box-shadow: 0 1px 5px 2px rgba(31,31,30,.30); box-shadow: 0 1px 5px 2px rgba(31,31,30,.30); z-index: 2450; display: none;} #mobile-navigation ul {width: 92%; margin: 0 auto; padding: 0; text-align: right; clear: both;} #mobile-navigation ul li {margin: 0 0 7px 0; position: relative; display: block;} #mobile-navigation ul li.dropdown a {padding-right: 27px;} #mobile-navigation ul li.dropdown a:after {content: '\f078'; font-size: 20px; line-height: 30px; color: #fff; position: absolute; top: 5px; right: 0; font-family:'FontAwesome';} #mobile-navigation ul li.dropdown a.open:after {content: '\f077'; font-size: 20px; line-height: 30px; color: #fff; position: absolute; top: 5px; right: 0; font-family:'FontAwesome';} #mobile-navigation ul li a {padding: 7px 0; font-size: 24px; line-height: 30px; color: #fff; text-transform: uppercase; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: futura_ltbold, Helvetica, sans-serif;} /* Sub Menus ---------- */ #mobile-navigation ul li .sub-menu {width: 100%;} #mobile-navigation ul li .sub-menu li {} /* Sub Menu with Dropdown */ #mobile-navigation ul li .sub-menu li.dropdown a {padding-right: 20px !important;} #mobile-navigation ul li .sub-menu li.dropdown a:after {content: '\f078'; font-size: 14px; line-height: 19px; color: #fff; position: absolute; top: 3px; right: 0; font-family:'FontAwesome';} #mobile-navigation ul li .sub-menu li.dropdown a.open:after {content: '\f077'; font-size: 14px; line-height: 19px; color: #fff; position: absolute; top: 3px; right: 0; font-family:'FontAwesome';} #mobile-navigation ul li .sub-menu li a {padding: 4px 0 !important; font-size: 14px; line-height: 19px;} #mobile-navigation ul li .sub-menu li a:after {content: none;} #mobile-navigation ul li .sub-menu li.dropdown .sub-menu {margin: 0 0 20px 0;} #mobile-navigation ul li .sub-menu li.dropdown .sub-menu a {padding-right: 0 !important; color: #fff; font-family: futura_ltregular, Helvetica, sans-serif;} #mobile-navigation ul li .sub-menu li.dropdown .sub-menu a:after {content: none;} /* Hover */ #mobile-navigation ul li a:hover {color: #fff;} /* Here */ #mobile-navigation ul li.current_page_item a, #mobile-navigation ul li.current-page-ancestor a {color: #fff;} /* Mobile Navigation Trigger ------------------------------------------- */ #mobile-nav-trigger {width: 35px; margin: 0 5px 0 0; padding: 0; text-align: center; position: relative; float: right; display: none;} /* Hamburger ---------- */ #hamburger {width: 35px; height: 45px; margin: 0; position: absolute; top: 5px; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;} #hamburger span {background: #76241f; width: 100%; height: 4px; position: absolute; left: 0; display: block; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} #hamburger span:nth-child(1) {top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;} #hamburger span:nth-child(2) {top: 9px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;} #hamburger span:nth-child(3) {top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;} #hamburger.open span:nth-child(1) {top: -3px; left: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0;} #hamburger.open span:nth-child(2) {width: 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -4px; left: 5px;} #hamburger.open span:nth-child(3) {width: 100%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 21px; left: 5px;} /* Media Queries for Mobile Navigation ---------- */ @media only screen and (min-width: 601px) { #mobile-navigation {display: none !important;} } @media only screen and (max-width: 600px) { #mobile-nav-trigger {display: block;} } /* Search ----------------------------------------------------------------------------------------------------------------------------------------- */ #site-search {background-color: #fff; width: 90%; max-width: 550px; margin: 0 auto; padding: 25px 29px; display: none; cursor: auto; overflow: hidden;} /* Results Container ----- */ #results-container {} /* Close ----- */ #site-search .close-overlay {margin: 0; font-size: 30px; line-height: 30px; color: #c82127; float: right; clear: both; font-family: serifa_btbold, Times, serif;} /* Search Results ----- */ #search-results {width: 90%; margin: 0 auto; padding: 50px 0 20px 0; position: relative;} #search-results h2 {padding: 0 0 15px 0; font-size: 39px; line-height: 45px; color: #c82127; text-align: center; text-transform: uppercase; border-bottom: 4px solid #c82127; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #search-results p.centered {margin: 0 0 25px 0; color: #707070;} #results-loop {position: relative;} /* Search Form ----- */ #searchform {margin: 0 auto; padding: 30px 0 15px 0; display: block; text-align: center;} #search-input {width: 80%; height: 35px; margin: 0 auto; padding: 4px 2%; font-size: 18px; line-height: 23px; color: #c0c0c0; letter-spacing: 2px; border: none; border: 1px solid #c0c0c0; position: relative; -webkit-appearance: none; border-radius: 0; clear: both; font-family: serifa_btbold, Times, serif;} /* Hover */ #search-input:hover {color: #7d7d7d; border: 1px solid #7d7d7d;} /* Focus */ #search-input:focus {color: #7d7d7d; border: 1px solid #7d7d7d;} #search-input::-webkit-input-placeholder {color: #c0c0c0;} #search-input::-moz-placeholder {color: #c0c0c0;} #search-input:-ms-input-placeholder {color: #c0c0c0;} #search-input:-moz-placeholder {color: #c0c0c0;} /* Results For --- */ #results-for {margin: 0 0 30px 0; padding: 0; font-size: 17px; line-height: 19px; color: #000; text-align: center; display: block; font-family: serifa_btbold, Times, serif;} #results-for span {text-transform: none;} /* No Results --- */ #no-search-results {padding: 20px 0 0 0; text-align: center; display: block;} #no-search-results h3 {margin: 0 0 5px 0; font-size: 20px; line-height: 25px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #no-search-results p {margin: 0 0 10px 0; font-size: 16px; line-height: 19px; color: #000; text-align: center; font-family: serifaroman, Times, serif;} #no-search-results p a {color: #c72027;} /* Search WP Live Search --- */ .searchwp-live-search-results { box-sizing: border-box; -moz-box-sizing: border-box; background: none !important; -webkit-box-shadow: none !important; box-shadow: none !important;; border-radius:3px; width: 100% !important; min-height: 0 !important; max-height: none !important; position: relative !important; top: auto !important; left: auto !important; } .searchwp-live-search-result p {margin: inherit !important; padding: inherit !important; font-size: inherit !important; border: none !important;} .searchwp-live-search-result a {display: block; white-space: normal !important; overflow: visible !important; text-overflow: ellipsis;} /* Loading Spinner */ .spinner {background: url(images/arrow-search-loading.gif) no-repeat; width: 205px !important; height: 31px !important; margin: 20px auto 0 auto !important; top: auto !important; left: auto !important; position: relative !important; display: block;} /* Search Results Tabs ----- */ #search-results nav {width: 100%; padding: 20px 0; position: relative; display: block; clear: both;} #search-results nav:before {content: ''; background-color: #c0c0c0; width: 50%; height: 1px; position: absolute; bottom: 20px; left: -50%;} #search-results nav:after {content: ''; background-color: #c0c0c0; width: 50%; height: 1px; position: absolute; bottom: 20px; right: -50%;} #search-results nav ul {text-align: center;} #search-results nav ul li {display: block;} #search-results nav ul li a {background-color: #dcdcdc; width: calc(50% - 2px); padding: 20px 0 15px 0; font-size: 25px; line-height: 20px; color: #6e6e6e; border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid #c0c0c0; border-left: 1px solid transparent; text-transform: uppercase; position: relative; display: block; float: left; font-family: futura_ltbold, Helvetica, sans-serif;} #search-results nav ul li a:before {content: ''; background-color: #fff; width: calc(100% + 2px); height: 5px; position: absolute; top: -1px; left: -1px;} /* Active */ #search-results nav ul li.active a {background-color: #fff; color: #c72027; border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: 1px solid #fff; border-left: 1px solid #c0c0c0;} #search-results nav ul li.active a:before {content: none;} /* Tool Search Results ----- */ #tool-search-results {padding: 10px 0 0 0; text-align: center;} #tool-search-results article {width: 48%; max-width: 225px; margin: 0 1% 30px 1%; text-align: center; position: relative; display: inline-block; vertical-align: top;} #tool-search-results article:nth-of-type(odd) {clear: both;} #tool-search-results article .tool-image-link {width: 100%; margin: 0 auto; position: relative;} #tool-search-results article .tool-image-link img {max-width: 95%; width: 100%; height: auto;} #tool-search-results article h3 a {margin: 0 0 2px 0; font-size: 36px; line-height: 41px; color: #c72027; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-search-results article h3 a sup {font-size: 13px; line-height: 20px; text-transform: none; position: relative; vertical-align: top;} #tool-search-results article p {width: 85%; margin: 0 auto 7px auto; font-size: 14px; line-height: 21px; color: #000; font-family: serifaroman, Times, serif;} #tool-search-results article .rating {margin: 0 0 18px 0; position: relative; display: block; clear: both;} #tool-search-results article .button {width: 130px; margin: 0 auto 10px auto; padding: 5px 10px; font-size: 15px; line-height: 20px; display: block; float: none; clear: both;} /* Fastener Search Results ----- */ #fastener-search-results {padding: 10px 0 0 0; text-align: center;} /* Product Loop ----- */ .type-product {width: 29.032258%; max-width: 180px; margin: 0 6.45% 75px 0 !important; text-align: center; position: relative; float: left;} /* Every 3rd Post */ .type-product:nth-of-type(3n+3) {margin-right: 0 !important;} /* Every 4th Post */ .type-product:nth-of-type(3n+4) {clear: both;} .type-product .product-image {width: 100%; margin: 0 auto 5px auto;} .type-product .product-image img {max-width: 99%; width: 99%; height: auto; border: 2px solid #f4f4f4;} .type-product h3 {font-size: 16px; line-height: 17px !important; color: #26525f;} .type-product h3 a {font-size: 16px; line-height: 17px !important; color: #26525f; text-transform: uppercase;} .type-product p {margin: 0 0 15px 0; font-size: 15px !important; line-height: 20px !important; color: #707070;} .type-product .view-product {background-color: #e05514; margin: 0 0 10px 0 !important; padding: 5px 10%; font-size: 15px; line-height: 20px; color: #fff; text-align: center; text-transform: uppercase; letter-spacing: 2px; display: block; clear: both;} /* Search Instructions ----- */ #search-instructions {padding: 30px 0 0 0;} #search-instructions h3 {margin: 0 0 5px 0; font-size: 39px; line-height: 45px; color: #c82127; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #search-instructions p {font-size: 15px; line-height: 19px; color: #c82127; text-align: center; letter-spacing: 1px; font-family: serifa_btbold, Times, serif;} /* Media Queries for Search */ @media only screen and (max-width: 800px) { /* Results Container ----- */ #results-container {width: 95%; max-width: none; margin: 60px auto 50px auto; padding: 0 0 20px 0;} /* Search Form ----- */ #search-input {width: 85%; max-width: 470px;} } @media only screen and (max-width: 650px) { /* Product Results ----- */ #product-search-results li {width: 45%; max-width: none;} #product-search-results li:nth-of-type(even) {margin: 0 .1% 50px 0 !important; float: right;} #product-search-results li:nth-of-type(odd) {clear: both;} #product-search-results .type-product:nth-of-type(3n+4) {clear: none !important;} } @media only screen and (max-width: 425px) { /* Product Results ----- */ #product-search-results li {width: 100%; max-width: none; margin: 0 auto 50px auto !important; clear: both !important;} #product-search-results li:nth-of-type(even) {margin: 0 auto 50px auto !important; float: none;} #product-search-results li:nth-of-type(odd) {clear: both;} #product-search-results .type-product:nth-of-type(3n+4) {clear: none !important;} } /* Home Intro ------------------------------------------------------------------------------------------------------------------------------------- */ #home-intro {width: 100%; margin: 150px 0 0 0; position: relative; overflow: hidden;} #home-intro.active {margin: 72px 0 0 0;} /* Home Intro Hero ----------------------------------------------------- */ #home-intro-hero {width: 100%; height: 60vh; min-height: 630px; max-height: 700px; padding: 10px 0 5px 0; position: relative; z-index: 0;} #home-intro-hero .wrap {height: 100%;} #home-intro-hero:after {content: ''; width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; z-index: -1; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,2d2d2d+100&0+0,0.35+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(45,45,45,0.35) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#592d2d2d',GradientType=0 ); /* IE6-9 */ } /* Home Intro Hero Image ---------- */ #home-intro-hero .wrap .scrollmagic-pin-spacer {z-index: 100;} #home-intro-hero-image {position: absolute; top: 125px; left: 3%; /* position: absolute; left: 3%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); */ z-index: 100 !important;} #home-intro-hero-image img {max-width: 100%; width: 489px; height: auto;} /* Home Intro Hero Copy ---------- */ #home-intro-hero-copy {width: 45%; text-align: center; position: absolute; right: 3%; z-index: 1;} #home-intro-hero-copy h2 {margin: 0 0 30px 0; font-size: 73px; line-height: 73px; color: #fff; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #home-intro-hero-copy h2 small {font-size: 25px; line-height: 25px; display: block;} #home-intro-hero-copy h2 span {position: relative; display: block;} #home-intro-hero-copy h2 sup {margin: 0 0 7px 0; font-size: 18px; line-height: 20px; text-transform: none; position: absolute; top: 0px;} #home-intro-hero-copy p {width: 90%; margin: 0 auto 20px auto; padding: 15px 0 0 0; font-size: 18px; line-height: 24px; color: #fff; font-family: serifa_btbold, Times, serif;} #home-intro-hero-copy .button {padding: 4px 5%; font-size: 16px; line-height: 21px;} /* Home USA Built ------------------------------------------------------ */ #home-usa-built {width: 100%; height: 560px; display: block; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9ed3dd+0,9ed3dd+65,a2d4de+72,acd9e2+77,b8dee6+81,edf7f9+91,fafdfd+95,ffffff+100 */ background: rgb(158,211,221); /* Old browsers */ background: -moz-linear-gradient(top, rgba(158,211,221,1) 0%, rgba(158,211,221,1) 65%, rgba(162,212,222,1) 72%, rgba(172,217,226,1) 77%, rgba(184,222,230,1) 81%, rgba(237,247,249,1) 91%, rgba(250,253,253,1) 95%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(158,211,221,1) 0%,rgba(158,211,221,1) 65%,rgba(162,212,222,1) 72%,rgba(172,217,226,1) 77%,rgba(184,222,230,1) 81%,rgba(237,247,249,1) 91%,rgba(250,253,253,1) 95%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(158,211,221,1) 0%,rgba(158,211,221,1) 65%,rgba(162,212,222,1) 72%,rgba(172,217,226,1) 77%,rgba(184,222,230,1) 81%,rgba(237,247,249,1) 91%,rgba(250,253,253,1) 95%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ed3dd', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ } /* Image ---------- */ #home-usa-built-image {background: url(images/usa-built.png) center center no-repeat; width: 100%; height: 100%; margin: 0 auto; display: block;} /* Home How it all comes together -------------------------------------- */ #home-come-together {width: 100%; height: 938px; position: relative; display: block; overflow: hidden;} #home-come-together .wrap {height: 100%;} #home-come-together-image {background: url(/wp-content/themes/arrow/images/how-it-comes-together.jpg) center center no-repeat; width: 100%; height: 100%; margin: 0 auto; position: absolute; top: 0; left: 0; display: block; z-index: 0; opacity: 0; z-index: -10;} #home-come-together .section-copy {position: absolute; top: 130px; right: -1585px; z-index: 0; opacity: 0;} #home-come-together .section-copy span {display: block;} #home-come-together .section-copy h2 {margin: 0 0 30px 0; font-size: 143px; line-height: 133px; color: #c72027; text-transform: uppercase; text-align: center; font-family: futura_ltbold, Helvetica, sans-serif;} #home-come-together .section-copy .arrow-chevron {max-width: 190px; width: 100%; margin: 0 auto 0 auto; left: 13px; display: block;} #home-come-together #dude {position: absolute; bottom: -600px; left: 195px; z-index: -1;} #home-come-together #dude-catch {position: absolute; bottom: -20px; left: 175px; z-index: -1; display: none;} /* Media Queries for Home Intro ---------- */ @media only screen and (max-width: 1050px) { /* Image ---------- */ #home-usa-built-image {background-position: 26px center;} } @media only screen and (max-width: 950px) { /* Home Intro Hero ----------------------------------------------------- */ #home-intro-hero {height: 100vh; min-height: 775px; max-height: none; padding: 10px 0 15px 0;} /* Home Intro Hero Image ---------- */ #home-intro-hero-image {width: auto; max-width: 489px; margin: 0 auto; position: absolute; top: 0; left: calc(50% - 244.5px); z-index: 100 !important;} #home-intro-hero-image img {max-width: 489px !important; width: 100% !important; height: auto;} /* Home Intro Hero Copy ---------- */ #home-intro-hero-copy {width: 100%; margin: 230px auto 0 auto; position: relative; right: auto; float: left; clear: both; z-index: 1 !important;} #home-intro-hero-copy h2 {margin: 0 0 30px 0; font-size: 73px; line-height: 73px;} #home-intro-hero-copy h2 small {font-size: 25px; line-height: 25px; display: block;} #home-intro-hero-copy h2 span {display: block;} #home-intro-hero-copy p {width: 75%; margin: 0 auto 20px auto; padding: 15px 0 0 0; font-size: 13px; line-height: 18px;} #home-intro-hero-copy .button {padding: 4px 5%; font-size: 16px; line-height: 21px;} /* Home USA Built ------------------------------------------------------ */ #home-usa-built {height: 1026px;} #home-usa-built-image {background: url(images/usa-built-mobile.png) center top no-repeat; width: 100%; height: 100%; margin: 0 auto; display: block;} /* Home How it all comes together -------------------------------------- */ #home-come-together {height: 949px;} #home-come-together-image {background: url(/wp-content/themes/arrow/images/how-it-comes-together-mobile-b.png) center center no-repeat;} #home-come-together .section-copy {width: 315px; text-align: center; top: 0; left: calc(50% - 157.5px); right: -1500px; z-index: -1;} #home-come-together .section-copy h2 {margin: 0 0 20px 0; font-size: 110px; line-height: 105px;} #home-come-together .section-copy h2 span:nth-of-type(2) {font-size: 100px !important; line-height: 90px !important;} #home-come-together .section-copy h2 span:nth-of-type(3) {font-size: 80px !important; line-height: 83px !important;} #home-come-together .section-copy h2 span:nth-of-type(4) {font-size: 55px !important; line-height: 57px !important;} #home-come-together .section-copy .arrow-chevron {max-width: 100px; width: 100%; margin: 0 auto 0 auto; left: 13px; display: block;} #home-come-together #dude {max-width: 360px; bottom: -600px; left: calc(50% - 180px);} #home-come-together #dude-catch {max-width: 323px; bottom: -20px; left: calc(50% - 161.5px);} } @media only screen and (max-width: 600px) { #home-intro {margin: 63px 0 0 0 !important;} } @media only screen and (max-width: 500px) { /* Home Intro Hero Image ---------- */ #home-intro-hero-image {max-width: 350px; left: calc(50% - 175px);} #home-intro-hero-image img {max-width: 350px !important;} /* Home Intro Hero Copy ---------- */ #home-intro-hero-copy {margin: 150px auto 0 auto;} #home-intro-hero-copy h2 {font-size: 60px; line-height: 60px;} #home-intro-hero-copy h2 span {font-size: 85px !important;} } @media only screen and (max-width: 400px) { #home-intro-hero-copy h2 {font-size: 48px; line-height: 48px;} #home-intro-hero-copy h2 span {font-size: 80px !important;} } /* Inside Hero ------------------------------------------------------------------------------------------------------------------------------------ */ #inside-hero {width: 100%; height: 60vh; min-height: 420px; margin: 150px 0 0 0; padding: 10px 0 5px 0; position: relative; overflow: hidden; clear: both;} #inside-hero.active {margin: 72px 0 0 0;} #inside-hero.no-nav {height: 68.5vh; min-height: 420px; margin: 133px 0 0 0;} #inside-hero.shorter {height: 30vh; min-height: 325px;} #inside-hero.fastener-inside{height: 522px !important; padding: 0;} #inside-hero.tool-inside {height: auto; min-height: 0; margin-bottom: 40px;} #inside-hero.selector-navigation {background-color: rgba(118,37,31,.95); height: auto; min-height: 0; margin-bottom: 40px; padding: 0; overflow: visible;} #inside-hero.selector-navigation:after {content: none;} #inside-hero .wrap {height: 100%;} #inside-hero:after {content: ''; width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; z-index: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,2d2d2d+100&0+0,0.35+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(45,45,45,0.35) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#592d2d2d',GradientType=0 ); /* IE6-9 */ } #inside-hero.tool-inside:after {content: none;} /* Inside Hero Copy ---------------------------------------------------- */ #inside-hero-content {background-color: rgba(200,33,39,.90); width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #inside-hero-content.disable-overlay {background-color: rgba(200,33,39,0);} #inside-hero.grey #inside-hero-content {background-color: rgba(151,153,155,.80);} #inside-hero-copy {width: 95%; max-width: 1000px; margin: 0 auto;} #inside-hero-copy h2 {margin: 0 0 20px 0; font-size: 60px; line-height: 70px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-hero-copy h3 {margin: 0 0 15px 0; font-size: 24px; line-height: 30px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-hero-copy .button {width: 65%; max-width: 360px; margin: 15px auto 15px auto;} #inside-hero-copy .button.solid.buy-now {margin: 15px auto 25px auto !important;} /* Inside Hero Image ---------- */ #inside-hero-image {/*position: absolute; top: 125px; left: 3%;*/ height: 100%; margin: 0 0 0 3%; position: relative; float: left; display: block; z-index: 100 !important;} #inside-hero-image img {max-width: 100%; width: 489px; height: auto;} /* Inside Hero Copy ---------- */ #inside-hero-copy.right {width: 45%; text-align: center; position: absolute; right: 3%; z-index: 1;} #inside-hero-copy.right h2 {margin: 0 0 30px 0; font-size: 73px; line-height: 73px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-hero-copy.right h2 small{font-size: 25px; line-height: 25px; display: block;} #inside-hero-copy.right h2 span {display: block;} #inside-hero-copy.right p {width: 75%; margin: 0 auto; padding: 15px 0 0 0; font-size: 13px; line-height: 18px; color: #cccccc; font-family: serifa_btbold, Times, serif;} /* Staple Puller ---------- */ #inside-hero-copy.staple-puller {width: 95%; max-width: 1000px; margin: 0 auto; position: relative; text-align: left;} #inside-hero-copy.staple-puller span{display: block;} #inside-hero-copy.staple-puller h2 {margin: 0 0 5px 0; font-size: 60px; line-height: 70px; color: #fff; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif; z-index: 10;} #inside-hero-copy.staple-puller h3 {margin: 0 0 15px 0; font-size: 24px; line-height: 30px; color: #fff; text-transform: none; position: relative; font-family: futura_ltbold, Helvetica, sans-serif; z-index: 10;} #inside-hero-copy.staple-puller #hero-message {margin: 0 0 0 25%; float: left;} #inside-hero-copy.staple-puller img {margin: 40px 0 0 -50px; z-index: 0;} /* Inside Hero Tool Inside Copy ---------------------------------------- */ #inside-hero.tool-inside #inside-hero-content {background-color: #fff; width: 100%; height: 100%; padding: 0 0 30px 0; position: relative; top: auto; right: auto; bottom: auto; left: auto;} #inside-hero.tool-inside #inside-hero-content:after {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); visibility: visible;} #inside-hero.tool-inside #inside-hero-copy {width: 95%; max-width: 1000px; margin: 0 auto;} #inside-hero.tool-inside #inside-hero-copy h2 {margin: 0 0 7px 0; font-size: 112px; line-height: 112px; color: #c82127; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-hero.tool-inside #inside-hero-copy h2 sup {margin: 0 0 7px 0; font-size: 18px; line-height: 20px; text-transform: none; position: absolute; top: 10px;} #inside-hero.tool-inside #inside-hero-copy h3 {width: 70%; margin: 0 auto 7px auto; font-size: 36px; line-height: 42px; color: #c82127; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-hero.tool-inside #inside-hero-copy p {width: 85%; max-width: 650px; margin: 0 auto 20px auto; font-size: 18px; line-height: 24px; color: #76241f; font-family: serifa_btbold, Times, serif;} #inside-hero.tool-inside #inside-hero-copy #tool-ideal-for {padding: 0 0 0px 0; position: relative; clear: both;} #inside-hero.tool-inside #inside-hero-copy #tool-ideal-for h4 {margin: 0 auto 0px auto; font-size: 22px; line-height: 27px; color: #c82127; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-hero.tool-inside #inside-hero-copy .rating {width: 300px; margin: 0 auto 15px auto; text-align: center !important; clear: both;} #inside-hero.tool-inside #inside-hero-copy .button {width: 65%; max-width: 195px; margin: 15px 2.5% 15px 2.5%; padding: 7px 0; text-align: center; display: inline-block; overflow: visible;} #inside-hero.tool-inside #inside-hero-copy .button img {width: 18px; height: auto; margin: 0 auto; top: 40%; border-radius: 0;} #inside-hero.tool-inside #inside-hero-copy .button.circle span {width: 100px; margin: 0 auto 0 -50px; padding: 0; font-size: 14px; line-height: 17px; color: #dd1a32; text-align: center; position: absolute; bottom: -25px; left: 50%; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; clear: both;} /* Hover */ #inside-hero.tool-inside #inside-hero-copy .button:hover span {color: #6a0020;} /* Tool Inside Image ---------- */ #inside-hero.tool-inside #inside-hero-copy #tool-inside-image {width: 90%; max-width: 500px; height: auto; margin: 0 auto; display: block;} /* Fastener Icon ---------- */ #inside-hero #header-icon {padding: 5px 0 0 0; display: block; clear: both;} #inside-hero #header-icon img {width: 100%; max-width: 250px; height: auto; margin: 0 auto; display: block;} #inside-hero #header-icon.small img {width: 100%; max-width: 80px; height: auto; margin: 0 auto; display: block;} /* Media Queries for Inside Hero ---------- */ @media only screen and (max-width: 850px) { #inside-hero-copy.staple-puller #hero-message {margin: 0 0 0 15%;} } @media only screen and (max-width: 800px) { /* Inside Hero Copy ---------------------------------------------------- */ /*#inside-hero-copy h2 {font-size: 85px !important; line-height: 95px !important;} #inside-hero-copy h3 {font-size: 20px !important; line-height: 26px !important;}*/ } @media only screen and (max-width: 750px) { #inside-hero-copy.staple-puller #hero-message {margin: 0 0 0 0;} } @media only screen and (max-width: 650px) { /* Staple Puller ---------- */ #inside-hero-copy.staple-puller h2 span:nth-child(1) {font-size: 112px !important; line-height: 90px !important;} #inside-hero-copy.staple-puller h2 span:nth-child(2) {font-size: 72px !important; line-height: 60px !important;} #inside-hero-copy.staple-puller h2 span:nth-child(3) {font-size: 69px !important; line-height: 56px !important;} #inside-hero-copy.staple-puller h3 {font-size: 20px; line-height: 25px;} #inside-hero-copy.staple-puller img {max-width: 50%; width: auto; height: auto; margin: 20px 0 0 -60px;} } @media only screen and (max-width: 600px) { #inside-hero {margin: 63px 0 0 0 !important;} #inside-hero.shorter {height: 25vh; min-height: 225px;} #inside-hero.selector-navigation {background-color: #fff; margin-bottom: 0 !important;} /* Inside Hero Copy ---------------------------------------------------- */ #inside-hero-copy h2 {font-size: 65px !important; line-height: 70px !important;} #inside-hero-copy h2 span {font-size: 65px !important; line-height: 65px !important;} #inside-hero-copy h3 {font-size: 18px !important; line-height: 24px !important;} #inside-hero.tool-inside #inside-hero-copy h2 {font-size: 80px !important; line-height: 80px !important;} #inside-hero.tool-inside #inside-hero-copy .button {margin: 15px 4.5% 25px 4.5%;} /* Fastener Icon ---------- */ #inside-hero #header-icon img {max-width: 150px;} #inside-hero #header-icon.small img {max-width: 75px;} } @media only screen and (max-width: 550px) { #inside-hero-copy h2 {font-size: 39px !important; line-height: 45px !important;} #inside-hero.tool-inside #inside-hero-copy .button.circle {margin: 15px 3.5% 25px 3.5%;} } @media only screen and (max-width: 500px) { #inside-hero-copy.staple-puller {text-align: center;} /* Staple Puller ---------- */ #inside-hero-copy.staple-puller h2 span:nth-child(1) {font-size: 90px !important; line-height: 75px !important;} #inside-hero-copy.staple-puller h2 span:nth-child(2) {font-size: 58px !important; line-height: 45px !important;} #inside-hero-copy.staple-puller h2 span:nth-child(3) {font-size: 56px !important; line-height: 50px !important;} #inside-hero-copy.staple-puller h3 {margin: 0 0 5px 0 !important; font-size: 18px !important; line-height: 20px !important;} #inside-hero-copy.staple-puller #hero-message {margin: 0 auto; float: none; clear: both;} #inside-hero-copy.staple-puller img {max-width: 155px; width: 90%; margin: 0 auto;} #inside-hero.tool-inside #inside-hero-copy .button.circle span {font-size: 13px;} } @media only screen and (max-width: 450px) { #inside-hero.tool-inside #inside-hero-copy .button {margin: 15px 3.5% 25px 3.5%;} } @media only screen and (max-width: 400px) { /* Inside Hero Copy ---------------------------------------------------- */ #inside-hero.tool-inside #inside-hero-copy h2 {font-size: 59px !important; line-height: 65px !important;} #inside-hero-copy h3 {font-size: 20px !important; line-height: 25px !important;} } /* Breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------ */ #breadcrumbs {width: 95%; max-width: 620px; margin: 0 auto 0px auto; padding: 5px 0 0 0; font-size: 13px; line-height: 18px; color: #bcbec0; text-transform: uppercase; position: relative; clear: both; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #breadcrumbs a {color: #bcbec0; border-bottom: 1px solid transparent; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #breadcrumbs a:hover{border-bottom: 1px solid #7a7a7a;} /* Breadcrumbs / Tool Results --------------------------------------------------------------------------------------------------------------------- */ #crumbs-results {margin: 55px auto 30px auto; padding: 10px 0 0 0; border-top: 5px solid #742521; position: relative; clear: both;} #crumbs-results #breadcrumbs {width: 60%; max-width: none; margin: 0 0 0 2%; float: left;} /* Query Results ------------------------------------------------------- */ #query-results {width: 30%; margin: 0 2% 0 0; padding: 5px 0 0 0; font-size: 13px; line-height: 18px; color: #bcbec0; text-align: right; text-transform: uppercase; position: relative; float: right; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Media Queries for Breadcrumbs / Tool Results ---------- */ @media only screen and (max-width: 600px) { #crumbs-results {margin: 5px auto 10px auto; border-top: none;} } @media only screen and (max-width: 550px) { #crumbs-results #breadcrumbs {width: 100%; margin: 0 0 0 2%; float: none; clear: both;} #query-results {width: 100%; margin: 0 0 0 2%; padding: 15px 0 0 0; text-align: left; float: none; clear: both;} } /* Tool Category Description ---------------------------------------------------------------------------------------------------------------------- */ #category-description {width: 85%; max-width: 865px; margin: 0 auto; position: relative; clear: both;} #category-description h3 {margin: 0 0 2px 0; font-size: 25px; line-height: 30px; color: #c72027; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #category-description p {margin: 0 0 7px 0; font-size: 14px; line-height: 21px; color: #666666; font-family: serifaroman, Times, serif;} /* Tools ------------------------------------------------------------------------------------------------------------------------------------------ */ #tool-archive {margin: 0 0 80px 0; clear: both;} #tool-archive.warranty-page {margin: 0;} #tool-archive .heading {max-width: 900px; margin: 0 auto 17px auto; padding: 50px 0 25px 0; font-size: 60px; line-height: 65px; color: #c82127; text-align: center; text-transform: uppercase; display: block; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-archive .heading:after {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); visibility: visible;} /* Tool Category Selector ---------------------------------------------- */ #tool-category-selector {margin: 0 0 0 0; padding: 10px 0 10px 0; position: relative; clear: both;} #tool-category-selector.children-visible {padding: 0 0 45px 0;} #tool-category-selector ul {} #tool-category-selector ul li {width: calc(17.6666667% - 2px); padding: 10px 0 15px 0; border-right: 2px solid #b38886; text-align: center; position: relative; float: left;} #tool-category-selector ul li:last-of-type {border: none;} #tool-category-selector ul li a {font-size: 24px; line-height: 29px; /*color: #c82127;*/ color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-category-selector ul li.cat-item-25 {width: calc(47% - 2px);} /* Children ---------- */ #tool-category-selector ul li .children {width: 100%; clear: both;} #tool-category-selector ul li .children li {width: 100%; padding: 16px 0 5px 0; border: none; display: inline-block;} #tool-category-selector ul li .children li a {font-size: 13px; line-height: 17px; color: #fff; display: block; font-family: futura_ltregular, Helvetica, sans-serif;} #tool-category-selector ul li .children li a .child-title {padding: 4px 6px; display: inline-block;} /* Taxonomy Image ----- */ #tool-category-selector ul li .children li a .tool-image {width: 85%; height: 100%; max-height: 135px; margin: 0 auto 15px auto; display: block; clear: both; overflow: hidden;} #tool-category-selector ul li .children li a .tool-image img {max-width: 100%; width: 100%; height: auto;} /* Staple Menu Styles ----- */ #tool-category-selector ul li.cat-item-25 .children li {width: 33.3333333%;} /* Staple Gun Sub Categories ----- */ #tool-category-selector ul li.cat-item-29 .children {width: 500%; position: absolute; bottom: -70px; left: 10%; display: none;} #tool-category-selector ul li.cat-item-29.current-cat .children, #tool-category-selector ul li.cat-item-29.current-cat-parent .children {display: block;} #tool-category-selector ul li.cat-item-29 .children li {width: auto !important; margin: 0 2% 0 0;} #tool-category-selector ul li.cat-item-29 .children li a {padding: 4px 6px; color: #742521; display: inline-block;} /* Nail Gun Sub Categories ----- */ #tool-category-selector ul li.cat-item-32 .children {width: 300%; position: absolute; bottom: -70px; left: 10%; display: none;} #tool-category-selector ul li.cat-item-32.current-cat .children, #tool-category-selector ul li.cat-item-32.current-cat-parent .children {display: block;} #tool-category-selector ul li.cat-item-32 .children li {width: auto !important; margin: 0 4% 0 0;} #tool-category-selector ul li.cat-item-32 .children li a {padding: 4px 6px; color: #742521; display: inline-block;} /* Hover ----- */ #tool-category-selector ul li .children li a:hover .child-title {background-color: #fff; color: #742521;} #tool-category-selector ul li .children li .children li a:hover {background-color: #742521; color: #fff;} /* Here ----- */ #tool-category-selector ul li .children li.current-cat a .child-title, #tool-category-selector ul li .children li.current-cat-parent a .child-title {background-color: #fff; color: #742521;} #tool-category-selector ul li .children li .children li.current-cat a {background-color: #742521; color: #fff;} /* Tools Filter -------------------------------------------------------- */ #tool-filter {padding: 15px 0 0 0; position: relative;} #tool-filter ul {text-align: center;} #tool-filter ul li {margin: 0 2.75%; display: inline-block;} #tool-filter ul li a {padding: 2px 10px; font-size: 24px; line-height: 29px; color: #c82127; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Hover */ #tool-filter ul li a:hover {background-color: #c82127; color: #fff;} /* Here */ #tool-filter ul li.active a {background-color: #c82127; color: #fff;} /* Tools Listing ------------------------------------------------------- */ #tools {margin: 0 0 0 0; padding: 40px 0 0 0; /*border-top: 15px solid #c82127;*/ position: relative; clear: both;} #tools.warranty-page {border-top: none;} #tools li {width: 33.3333333%; min-height: 415px; margin: 0 0 50px 0; text-align: center; position: relative; float: left;} #tools li:nth-child(3n+1) {clear: both;} #tools li a {} #tools li h3 a {margin: 0 0 2px 0; font-size: 36px; line-height: 41px; color: #c72027; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #tools li h3 a sup {font-size: 13px; line-height: 20px; text-transform: none; position: absolute; top: 2px;} #tools.warranty-page li h3 a {margin: 0 0 15px 0;} #tools li p {width: 75%; margin: 0 auto 7px auto; font-size: 14px; line-height: 21px; color: #000; font-family: serifaroman, Times, serif;} /* Rating ---------- */ #tools li .rating {margin: 0 0 18px 0; position: relative; display: block; clear: both;} /* Buttons ---------- */ #tools li .button {width: 130px; margin: 0 auto 10px auto; padding: 5px 10px; font-size: 15px; line-height: 20px; display: block; float: none; clear: both;} #tools.warranty-page li .button {width: 150px;} /* Images ---------- */ .tool-image-link {width: 85%; margin: 0 auto 3px auto; position: relative; display: block;} .tool-image-link img {max-width: 100%; width: 100%; height: auto;} /* No Tools ---------- */ #no-tools {margin: 0 0 2px 0; font-size: 36px; line-height: 41px; color: #c72027; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} /* Buy Now Overlay ----------------------------------------------------- */ .buy-now-overlay {background-color: #fff; width: 90%; max-width: 550px; margin: 0 auto; padding: 25px 29px; display: none; cursor: auto;} .lb_overlay {cursor: pointer;} .buy-now-overlay .close-overlay {margin: 0 0 0 0; font-size: 30px; line-height: 30px; color: #c82127; float: right; clear: both; font-family: serifa_btbold, Times, serif;} .buy-now-overlay .fa-shopping-cart {margin: 0 auto 10px auto; font-size: 60px; line-height: 60px; color: #c82127; text-align: center; display: block;} .buy-now-overlay h2 {padding: 0 0 15px 0; font-size: 30px; line-height: 35px; color: #c82127; text-align: center; border-bottom: 4px solid #c82127; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} /* Retailer List ---------- */ .buy-now-overlay ul {padding: 30px 0 0 0; clear: both;} .buy-now-overlay ul li {width: 31.3333333%; margin: 0 1% 60px 1%; padding: 0; text-align: center; position: relative; float: left;} .buy-now-overlay ul li:nth-of-type(3n+1) {clear: both;} .buy-now-overlay ul li a {} /* Retailer Image ----- */ .buy-now-overlay ul li .retailer-logo {height: 60px; margin: 0 0 3px 0; display: block;} .buy-now-overlay ul li .retailer-logo img {max-width: 70%; width: auto; height: auto; max-height: 100%; margin: 0 auto;} .buy-now-overlay ul li h3 {text-indent: -99999px; position: absolute;} .buy-now-overlay ul li h4 {font-size: 8px; line-height: 12px; color: #97999b; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Media Queries for Tools ---------- */ @media only screen and (max-width: 900px) { /* Staple Gun Sub Categories ----- */ #tool-category-selector ul li.cat-item-29 .children {width: 500%; position: absolute; bottom: -80px;} #tool-category-selector ul li.cat-item-29 .children li {margin: 0 2% 0 0;} } @media only screen and (max-width: 800px) { /* Staple Gun Sub Categories ----- */ #tool-category-selector ul li.cat-item-29 .children {width: 500%; position: absolute; bottom: -85px; left: 10%;} #tool-category-selector ul li.cat-item-29 .children li {margin: 0 2% 0 0;} } @media only screen and (max-width: 650px) { /* Tools Listing ------------------------------------------------------- */ #tools li {width: 50%;} #tools li:nth-child(3n+1) {clear: none;} #tools li:nth-child(odd) {clear: both;} } @media only screen and (max-width: 600px) { /* Tool Category Selector ---------------------------------------------- */ #tool-category-selector {display: none;} } @media only screen and (max-width: 500px) { /* Tools Listing ------------------------------------------------------- */ #tools li {width: 100%; clear: both;} /* Tools Filter -------------------------------------------------------- */ #tool-filter {padding: 5px 0 0 0;} #tool-filter ul li {width: 46%; margin: 0 2% 20px 2%; display: block; float: left;} #tool-filter ul li a {display: block;} } /* Compare Track ---------------------------------------------------------------------------------------------------------------------------------- */ #compare-track {position: relative;} /* Tool Consumables ------------------------------------------------------------------------------------------------------------------------------- */ #tool-consumables {background-color: #fff; width: 100% !important; margin: 0 auto 55px auto; position: relative; clear: both; z-index: 5;} /* Staple Header ----- */ #tool-consumables h2 {background-color: #00aeef; max-width: calc(685px - 3%); margin: 0 auto 17px auto; padding: 12px 170px 12px 3%; font-size: 32px; line-height: 37px; color: #fff; text-align: center; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-consumables h2.centered {max-width: calc(855px - 3%); padding: 12px 3% 12px 3%;} #tool-consumables h2.left-align {text-align: left;} #tool-consumables h2 sup {font-size: 12px; vertical-align: super; position: relative; top: -5px;} #tool-consumables h2::selection {background: #00a3e0; color: #fff;} #tool-consumables h2::-moz-selection {background: #00a3e0; color: #fff;} #tool-consumables h2 sup::selection {background: #00a3e0; color: #fff;} #tool-consumables h2 sup::-moz-selection {background: #00a3e0; color: #fff;} #tool-consumables h2 .button {margin: 0; padding: 2px 4%; font-size: 18px; line-height: 23px; position: absolute; top: 49.5%; right: 3%; display: inline-block !important;} /* Glue Header ----- */ #tool-consumables.glue h2 {background-color: #cf8a20;} #tool-consumables.glue h2::selection {background: #bb7d1e; color: #fff;} #tool-consumables.glue h2::-moz-selection {background: #bb7d1e; color: #fff;} #tool-consumables.glue h2 sup::selection {background: #bb7d1e; color: #fff;} #tool-consumables.glue h2 sup::-moz-selection {background: #bb7d1e; color: #fff;} /* Staple Consumable List ----- */ #tool-consumables #staple-consumables {max-width: 855px; margin: 0 auto; padding: 10px 0 0 0; text-align: center;} #tool-consumables #staple-consumables li {width: 16.1666667%; padding: 15px 0 15px 0; text-align: center; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block;} #tool-consumables #staple-consumables li a {width: 100%; height: 100%; display: block;} #tool-consumables #staple-consumables li a img {width: 100%; max-width: 76px; height: auto;} #fastener-sizes #staple-consumables li a img {width: 100%; max-width: 76px; height: auto;} /* Hover */ #tool-consumables #staple-consumables li:hover {background-color: #e6e8e9;} /* Consumable Size ----- */ #tool-consumables ul#staple-consumables li .consumable-size {font-size: 16px; line-height: 21px; color: #000; text-align: center; letter-spacing: -1px; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-consumables ul#staple-consumables li .consumable-size span{letter-spacing: 0; display: block;} /* Consumable ID ----- */ #tool-consumables ul#staple-consumables li .consumable-id {width: auto; padding: 2px 8px; font-size: 16px; line-height: 21px; color: #c72027; border: 3px solid #c72027; text-align: center; display: inline-block; font-family: futura_ltbold, Helvetica, sans-serif;} /* Staple + Nail Callout ---------- */ #staple-nail-callout {margin: 0 auto 25px auto; position: relative; clear: both;} #staple-nail-callout h2 {background-color: #727430; max-width: calc(855px - 3% - 170px); margin: 0 auto 17px auto; padding: 12px 170px 12px 3%; font-size: 32px; line-height: 37px; color: #fff; text-align: left; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #staple-nail-callout h2 sup {font-size: 12px; vertical-align: super; position: relative; top: -5px;} #staple-nail-callout h2::selection {background: #67692e; color: #fff;} #staple-nail-callout h2::-moz-selection {background: #67692e; color: #fff;} #staple-nail-callout h2 sup::selection {background: #67692e; color: #fff;} #staple-nail-callout h2 sup::-moz-selection {background: #67692e; color: #fff;} #staple-nail-callout h2 .button {margin: 0; padding: 2px 4%; font-size: 18px; line-height: 23px; position: absolute; top: 49.5%; right: 3%; display: inline-block !important;} /* Media Queries for Tool Consumables ---------- */ @media only screen and (max-width: 750px) { /* Staple Consumable List ----- */ #tool-consumables #staple-consumables li {width: 16.1666667%; margin: 0 1% 20px 1%;} /* Consumable Size ----- */ #tool-consumables ul#staple-consumables li .consumable-size {font-size: 16px; line-height: 21px;} /* Consumable ID ----- */ #tool-consumables ul#staple-consumables li .consumable-id {font-size: 15px;} } @media only screen and (max-width: 550px) { /* Consumable Size ----- */ #tool-consumables ul#staple-consumables li .consumable-size {font-size: 15px; line-height: 20px;} /* Consumable ID ----- */ #tool-consumables ul#staple-consumables li .consumable-id {font-size: 14px;} } @media only screen and (max-width: 450px) { /* Consumable Size ----- */ #tool-consumables ul#staple-consumables li .consumable-size {font-size: 13px; line-height: 18px;} /* Consumable ID ----- */ #tool-consumables ul#staple-consumables li .consumable-id {font-size: 12px;} } /* Staple Selection ------------------------------------------------------------------------------------------------------------------------------- */ #staple-selection {margin: 0 auto 100px auto; padding: 55px 0 0 0; position: relative; clear: both;} #staple-selection:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); visibility: visible;} #staple-selection h2 {margin: 0 0 55px 0; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Base Material ------------------------------------------------------- */ #base-material {margin: 0 0 120px 0; position: relative; clear: both;} #base-material h3 {margin: 0 0 27px 0; font-size: 42px; color: #878b8f; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Base Material Range ---------- */ #base-material-range {background-color: #c72027; width: 100%; max-width: 800px; height: 8px; margin: 0 auto; position: relative; display: block; clear: both;} #base-material-range:before {content: ''; width: 0; height: 0; position: absolute; top: -16px; left: -10px; border-style: solid; border-width: 20px 36px 20px 0; border-color: transparent #c72027 transparent transparent; z-index: 0;} #base-material-range:after {content: ''; width: 0; height: 0; position: absolute; top: -16px; right: -10px; border-style: solid; border-width: 20px 0 20px 36px; border-color: transparent transparent transparent #c72027; z-index: 0;} /* Label ----- */ #base-material-range .label {margin: 12px 0 0 35px; position: relative; float: left; z-index: 1;} #base-material-range .label.right {margin: 12px 35px 0 0; text-align: right; float: right;} #base-material-range .label h4 {font-size: 25px; line-height: 28px; color: #878b8f; text-transform: uppercase; font-family: serifa_btbold, Times, serif;} #base-material-range .label.right h4{font-family: serifaroman, Times, serif;} #base-material-range .label h5 {font-size: 23px; line-height: 25px; color: #80223e; font-family: serifaroman, Times, serif;} /* Fastened Material --------------------------------------------------- */ #fastened-material {position: relative; clear: both;} #fastened-material h3 {margin: 0 0 27px 0; font-size: 42px; color: #878b8f; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #fastened-material #thickness-range {width: 100%; max-width: 800px; height: 78px; margin: 0 auto 14px auto; position: relative; overflow: hidden;} #fastened-material #thickness-range:after {content: ''; width: 0; height: 0; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 0px 78px 1000px; border-color: transparent transparent #c72027 transparent; z-index: 0;} /* Start ----- */ #fastened-material #thickness-range .start {background-color: #fff; margin: 5px 10px 0 0; padding: 50px 5px 0 0; font-size: 31px; line-height: 31px; color: #c72027; text-transform: uppercase; letter-spacing: 1px; display: block; position: absolute; left: 0; bottom: -4px; z-index: 1; float: left; font-family: serifaroman, Times, serif;} /* End ----- */ #fastened-material #thickness-range .end {margin: 5px 10px 0 0; font-size: 53px; line-height: 78px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: block; position: relative; z-index: 1; float: right; font-family: serifa_btbold, Times, serif;} /* Labels ----- */ #thickness-labels {max-width: 800px; margin: 0 auto;} #thickness-labels h4 {font-size: 23px; line-height: 25px; color: #80223e; position: relative; font-family: serifaroman, Times, serif;} .thin-label {float: left;} .thick-label {float: right;} /* Media Queries for Staple Selection ---------- */ @media only screen and (max-width: 600px) { #base-material h3 {margin: 0 0 95px 0;} /* Base Material Range ---------- */ #base-material-range {width: 100%; max-width: 8px; height: 225px; margin: 0 auto;} #base-material-range:before {top: -20px right: auto;; left: calc(50% - 20px); border-width: 0 20px 36px 20px; border-color: transparent transparent #c72027 transparent;} #base-material-range:after {top: auto; right: auto; bottom: -20px; left: calc(50% - 20px); border-width: 36px 20px 0 20px; border-color: #c72027 transparent transparent transparent;} /* Label ----- */ #base-material-range .label {width: 300px; margin: 0; text-align: center; position: absolute; top: -80px; left: calc(-50% - 142px); float: none;} #base-material-range .label.right {margin: 0; top: auto; bottom: -80px; text-align: center; float: none;} /* Fastened Material --------------------------------------------------- */ #fastened-material h3 {margin: 0 0 27px 0; font-size: 42px;} #fastened-material #thickness-range {width: 100px; max-width: 200px; height: 1000px; max-height: 600px; margin: 0 auto 14px auto;} #fastened-material #thickness-range:after {content: ''; top: 0; right: 0; border-width: 0 100px 600px 100px; border-color: transparent transparent #c72027 transparent;} /* Start ----- */ #fastened-material #thickness-range .start {margin: 0 auto 0 auto; padding: 5px 0 0 0; font-size: 31px; line-height: 31px; display: block; position: absolute; top: 0; left: 0; bottom: auto; float: none;} /* End ----- */ #fastened-material #thickness-range .end {margin: 5px 10px 0 0; font-size: 30px; line-height: 30px; position: absolute; bottom: -6px; float: none;} /* Labels ----- */ #thickness-labels {max-width: 300px;} #thickness-labels h4 {font-size: 20px; line-height: 25px;} .thin-label {background-color: #fff; padding: 5px 0; text-align: center; position: absolute; top: -580px; left: calc(50% - 150px); float: none;} .thick-label {background-color: #fff; padding: 5px 0; text-align: center; position: absolute; top: -50px; left: calc(50% - 150px); float: none;} } /* Pro Tip ---------------------------------------------------------------------------------------------------------------------------------------- */ #pro-tip {background-color: #e7e7e8; margin: 0 auto 25px auto; padding: 50px 0 30px 0; position: relative; clear: both;} #pro-tip h2.pro-tip-heading {margin: 0 0 33px 0; font-size: 45px; line-height: 50px; color: #c82127; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-family: futura_ltbold, Helvetica, sans-serif;} #pro-tip h2.pro-tip-heading small {font-size: 35px; line-height: 50px;} #pro-tip h2 {margin: 0 0 5px 0; font-size: 35px; line-height: 40px; color: #6d0020; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #pro-tip h3 {margin: 0 0 25px 0; font-size: 24px; line-height: 30px; color: #c82127; text-align: center; letter-spacing: 1px; font-family: serifa_btbold, Times, serif;} #pro-tip h3.skinny {max-width: 625px; margin: 0 auto 25px auto;} #pro-tip h3 span {color: #6d0020;} #pro-tip h4 {margin: 0 0 25px 0; font-size: 24px; line-height: 28px; color: #878b8f; text-align: center; font-family: serifaroman, Times, serif;} #pro-tip ul {margin: 0 0 18px 0; text-align: center; clear: both;} #pro-tip ul li {width: 32.3333333%; text-align: center; position: relative; display: inline-block;} #pro-tip ul li h3 {font-size: 18px; line-height: 23px; color: #878b8f; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #pro-tip ul li img {max-width: 100%; width: auto; height: auto;} /* Wide ----- */ #pro-tip ul.wide {margin: 0 auto 18px auto; text-align: center; clear: both;} #pro-tip ul.wide li {width: 100%; margin: 0 auto 40px auto; text-align: center; position: relative; display: block; clear: both;} #pro-tip ul.wide.rivet li:last-child {right: -2.1%;} #pro-tip ul.wide li img {max-width: 650px; width: 95%; height: auto; margin: 0 auto;} /* Media Queries for Pro Tip ---------- */ @media only screen and (max-width: 750px) { #pro-tip ul li {width: 100%; margin: 0 auto 10px auto; display: block; clear: both;} #pro-tip ul.wide.rivet li:last-child {right: -3%;} } @media only screen and (max-width: 550px) { #pro-tip h2.pro-tip-heading {font-size: 35px; line-height: 40px;} #pro-tip h2.pro-tip-heading small {font-size: 25px; line-height: 40px;} } @media only screen and (max-width: 450px) { #pro-tip h3 {font-size: 20px; line-height: 25px;} #pro-tip h3 br {display: none;} #pro-tip h4 {font-size: 20px; line-height: 25px;} #pro-tip h4 br {display: none;} } @media only screen and (max-width: 400px) { #pro-tip h2.pro-tip-heading {font-size: 28px; line-height: 33px;} #pro-tip h2.pro-tip-heading small {font-size: 18px; line-height: 40px;} } /* Corrosion Resistance --------------------------------------------------------------------------------------------------------------------------- */ #corrosion-resistance {margin: 0 auto 100px auto; padding: 55px 0 0 0; position: relative; clear: both;} #corrosion-resistance h2 {margin: 0 0 55px 0; font-size: 48px; line-height: 53px; color: #878b8f; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Corrosion Resistance Scale ------------------------------------------ */ #corrosion-resistance-scale {margin: 0 0 110px 0; position: relative; clear: both;} /* Corrosion Resistance Range ---------- */ #corrosion-resistance-range {background-color: #c72027; width: 100%; max-width: 800px; height: 8px; margin: 0 auto; position: relative; display: block;} #corrosion-resistance-range:before {content: ''; width: 0; height: 0; position: absolute; top: -16px; left: -10px; border-style: solid; border-width: 20px 36px 20px 0; border-color: transparent #c72027 transparent transparent; z-index: 0;} #corrosion-resistance-range:after {content: ''; width: 0; height: 0; position: absolute; top: -16px; right: -10px; border-style: solid; border-width: 20px 0 20px 36px; border-color: transparent transparent transparent #c72027; z-index: 0;} /* Label ----- */ #corrosion-resistance-range .label {z-index: 1;} #corrosion-resistance-range .label.left {position: absolute; top: -32px; left: 35px;} #corrosion-resistance-range .label.right {position: absolute; text-align: right; top: -32px; right: 35px;} #corrosion-resistance-range .label.center {margin: 0 auto 0 auto; text-align: center; position: relative; top: -31px; display: block;} #corrosion-resistance-range .label h4 {margin: 0 0 15px 0; font-size: 28px; line-height: 28px; color: #6d0020; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #corrosion-resistance-range .label h5 {font-size: 25px; line-height: 28px; color: #878b8f; text-transform: uppercase; font-family: serifa_btbold, Times, serif;} /* Media Queries for Corrosion Resistance ---------- */ @media only screen and (max-width: 600px) { #corrosion-resistance h2 {margin: 0 0 105px 0;} /* Corrosion Resistance Range ---------- */ #corrosion-resistance-range {width: 100%; max-width: 8px; height: 225px; margin: 0 auto;} #corrosion-resistance-range:before {top: -20px right: auto;; left: calc(50% - 20px); border-width: 0 20px 36px 20px; border-color: transparent transparent #c72027 transparent;} #corrosion-resistance-range:after {top: auto; right: auto; bottom: -20px; left: calc(50% - 20px); border-width: 36px 20px 0 20px; border-color: #c72027 transparent transparent transparent;} /* Label ----- */ #corrosion-resistance-range .label {width: 300px; margin: 0; text-align: center; position: absolute !important;} #corrosion-resistance-range .label.left {top: -80px; left: calc(-50% - 142px);} #corrosion-resistance-range .label.right {top: auto; bottom: -105px; right: auto; left: calc(-50% - 142px); text-align: center;} #corrosion-resistance-range .label.center {padding: 5px 0; position: absolute; left: calc(-50% - 142px); top: 28%;} #corrosion-resistance-range .label.center h5 {background-color: #fff;} #corrosion-resistance-range .label h4 {margin: 0 0 0px 0; font-size: 28px;} } @media only screen and (max-width: 350px) { #corrosion-resistance h2 {font-size: 45px; line-height: 50px;} } /* Choose Length ---------------------------------------------------------------------------------------------------------------------------------- */ #choose-length {margin: 0 auto 200px auto; padding: 10px 0 0 0; position: relative; clear: both;} #choose-length h2 {margin: 0 0 55px 0; font-size: 48px; line-height: 53px; color: #878b8f; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Choose Length Scale ------------------------------------------ */ #choose-length-scale {margin: 0 0 110px 0; position: relative; clear: both;} /* Choose Length Range ---------- */ #choose-length-range {background-color: #c72027; width: 100%; max-width: 800px; height: 8px; margin: 0 auto; position: relative; display: block;} #choose-length-range:before {content: ''; width: 0; height: 0; position: absolute; top: -16px; left: -10px; border-style: solid; border-width: 20px 36px 20px 0; border-color: transparent #c72027 transparent transparent; z-index: 0;} #choose-length-range:after {content: ''; width: 0; height: 0; position: absolute; top: -16px; right: -10px; border-style: solid; border-width: 20px 0 20px 36px; border-color: transparent transparent transparent #c72027; z-index: 0;} /* Label ----- */ #choose-length-range .label {text-align: center !important; z-index: 1;} #choose-length-range .label.left {position: absolute; top: -32px; left: 45px;} #choose-length-range .label.right {position: absolute; text-align: right; top: -32px; right: 45px;} #choose-length-range .label.center {margin: 0 auto 0 auto; text-align: center; position: relative; top: -31px; display: block;} #choose-length-range .label h4 {margin: 0 0 25px 0; font-size: 25px; line-height: 25px; color: #878b8f; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #choose-length-range .label h5 {font-size: 18px; line-height: 20px; text-align: center; color: #878b8f; position: relative; display: block; font-family: serifa_btbold, Times, serif;} #choose-length-range .label h5 span {display: block; clear: both;} #choose-length-range .label h5 img {max-width: 117px; width: 100%; height: 44px; padding: 8px 0 4px 0; position: relative; display: inline-block;} /* Media Queries for Choose Length ---------- */ @media only screen and (max-width: 600px) { #choose-length {margin: 0 auto 250px auto; padding: 10px 0 0 0;} #choose-length h2 {margin: 0 0 225px 0;} /* Corrosion Resistance Range ---------- */ #choose-length-range {width: 100%; max-width: 8px; height: 525px; margin: 0 auto;} #choose-length-range:before {top: -20px right: auto;; left: calc(50% - 20px); border-width: 0 20px 36px 20px; border-color: transparent transparent #c72027 transparent;} #choose-length-range:after {top: auto; right: auto; bottom: -20px; left: calc(50% - 20px); border-width: 36px 20px 0 20px; border-color: #c72027 transparent transparent transparent;} /* Label ----- */ #choose-length-range .label {width: 300px; margin: 0; text-align: center; position: absolute !important;} #choose-length-range .label.left {top: -200px; left: calc(-50% - 142px);} #choose-length-range .label.right {top: auto; bottom: -200px; right: auto; left: calc(-50% - 142px); text-align: center;} #choose-length-range .label.center {background-color: #fff; padding: 8px 0; position: absolute; left: calc(-50% - 142px); top: 28%;} #choose-length-range .label h4 {margin: 0 0 0px 0; font-size: 28px;} } /* Holding Strength ------------------------------------------------------------------------------------------------------------------------------- */ #holding-strength {margin: 0 auto 100px auto; padding: 55px 0 0 0; position: relative; clear: both;} #holding-strength h2 {margin: 0 0 55px 0; font-size: 48px; line-height: 53px; color: #878b8f; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Holding Strength Scale ------------------------------------------ */ #holding-strength-scale {margin: 0 0 110px 0; position: relative; clear: both;} /* Holding Strength Range ---------- */ #holding-strength-range {background-color: #c72027; width: 100%; max-width: 800px; height: 8px; margin: 0 auto; position: relative; display: block;} #holding-strength-range:before {content: ''; width: 0; height: 0; position: absolute; top: -16px; left: -10px; border-style: solid; border-width: 20px 36px 20px 0; border-color: transparent #c72027 transparent transparent; z-index: 0;} #holding-strength-range:after {content: ''; width: 0; height: 0; position: absolute; top: -16px; right: -10px; border-style: solid; border-width: 20px 0 20px 36px; border-color: transparent transparent transparent #c72027; z-index: 0;} /* Label ----- */ #holding-strength-range .label {z-index: 1;} #holding-strength-range .label.left {position: absolute; top: -32px; left: 35px;} #holding-strength-range .label.right {position: absolute; text-align: right; top: -32px; right: 35px;} #holding-strength-range .label.center {margin: 0 auto 0 auto; text-align: center; position: relative; top: -31px; display: block;} #holding-strength-range .label h4 {margin: 0 0 15px 0; font-size: 28px; line-height: 28px; color: #6d0020; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #holding-strength-range .label h5 {font-size: 25px; line-height: 28px; color: #878b8f; text-transform: uppercase; font-family: serifa_btbold, Times, serif;} /* Media Queries for Holding Strength ---------- */ @media only screen and (max-width: 600px) { #holding-strength {margin: 0 auto 130px auto;} #holding-strength h2 {margin: 0 0 105px 0;} /* Corrosion Resistance Range ---------- */ #holding-strength-range {width: 100%; max-width: 8px; height: 225px; margin: 0 auto;} #holding-strength-range:before {top: -20px right: auto;; left: calc(50% - 20px); border-width: 0 20px 36px 20px; border-color: transparent transparent #c72027 transparent;} #holding-strength-range:after {top: auto; right: auto; bottom: -20px; left: calc(50% - 20px); border-width: 36px 20px 0 20px; border-color: #c72027 transparent transparent transparent;} /* Label ----- */ #holding-strength-range .label {width: 300px; margin: 0; text-align: center; position: absolute !important;} #holding-strength-range .label.left {top: -80px; left: calc(-50% - 142px);} #holding-strength-range .label.right {top: auto; bottom: -105px; right: auto; left: calc(-50% - 142px); text-align: center;} #holding-strength-range .label.center {background-color: #fff; padding: 5px 0; position: absolute; left: calc(-50% - 142px); top: 28%;} #holding-strength-range .label h4 {margin: 0 0 0px 0; font-size: 28px;} } /* Rivets Graphic --------------------------------------------------------------------------------------------------------------------------------- */ #rivets-graphic {margin: 0 0 48px 0; padding-top: 38px; text-align: center; position: relative; clear: both;} #rivets-graphic:before {content: ''; background-color: #ca2129; width: 95%; max-width: 845px; height: 3px; margin: 0 auto; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #rivets-graphic img {max-width: 255px; width: 100%; height: auto;} /* Recomended Projects ---------------------------------------------------------------------------------------------------------------------------- */ #tool-recommended-projects {margin: 0 auto 60px auto; position: relative; clear: both;} #tool-recommended-projects h2 {background-color: #76251f; max-width: 855px; margin: 0 auto 20px auto; padding: 12px 0; font-size: 32px; line-height: 37px; color: #fff; text-align: center; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-recommended-projects h2 sup {font-size: 12px; vertical-align: super; position: relative; top: -5px;} #tool-recommended-projects h2::selection {background: #68211c; color: #fff;} #tool-recommended-projects h2::-moz-selection {background: #68211c; color: #fff;} #tool-recommended-projects h2 sup::selection {background: #68211c; color: #fff;} #tool-recommended-projects h2 sup::-moz-selection {background: #68211c; color: #fff;} /* Articles ---------- */ #tool-recommended-projects ul {max-width: 855px; margin: 0 auto 0 auto; padding: 0;} #tool-recommended-projects ul li {width: calc(33.3333333% - 2%); height: 275px; margin: 0 3% 0 0; text-align: center; position: relative; float: left;} #tool-recommended-projects ul li:after {content: ''; width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; z-index: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,2d2d2d+100&0+0,0.35+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(45,45,45,0.35) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#592d2d2d',GradientType=0 ); /* IE6-9 */ } #tool-recommended-projects ul li:nth-of-type(3n + 1) {clear: both;} #tool-recommended-projects ul li:nth-of-type(3) {margin-right: 0;} #tool-recommended-projects ul li a {background-color: rgba(200,33,39,.90); width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block;} #tool-recommended-projects ul li a .button.outlined {padding: 3px 7%; font-size: 14px; line-height: 19px; border: 2px solid #fff;} #tool-recommended-projects ul li a .article-meta {width: 94%; height: auto; padding: 0 3%; position: relative; display: block; z-index: 5;} #tool-recommended-projects ul li a .article-meta h3 {margin: 0 0 20px 0; font-size: 28px; line-height: 33px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Reviews ---------------------------------------------------------------------------------------------------------------------------------------- */ #reviews {margin: 0 auto 60px auto; padding: 55px 0 0 0; position: relative; clear: both;} #reviews h2 {margin: 0 0 35px 0; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /*#reviews img {max-width: 787px; width: 100%; height: auto; margin: 0 auto 55px auto; display: block;}*/ #reviews .button {max-width: 275px; margin: 0 auto 0 auto; padding: 7px 0; display: block;} /* Media Queries for Reviews ---------- */ @media only screen and (max-width: 400px) { #reviews h2 {margin: 0 0 35px 0; font-size: 40px; line-height: 45px;} } /* Bazaarvoice Ratings ---------------------------------------------------------------------------------------------------------------------------- */ .BVRRRatingsHistogramButton, .BVRRRatingSummaryLinks, .BVRRRatingSummaryLinkWriteFirst {display: none !important;} /* Rating Overview Stars ---------- */ #BVRRSummaryContainer .BVRROverallRatingContainer {margin: 0 auto !important; padding: 0 !important; float: none !important;} #BVRRSummaryContainer .BVRROverallRatingContainer .BVRRRatingContainerStar {margin: 0 auto !important; padding: 0 !important; float: none !important;} .BVRRRatingNormalImage {margin: 0 auto !important; padding: 0 !important; float: none !important;} .BVRRRatingSummaryLink.BVRRRatingSummaryNoReviewsWriteImageLink {margin: 0 auto !important; padding: 0 !important; float: none !important;} /* Summary Container ---------- */ #BVRRSecondarySummaryContainer {width: 90%; margin: 0 auto;} /* Review Container ---------- */ #BVRRContainer {width: 90%; margin: 0 auto;} /* Review Submission Container */ #BVSubmissionContainer {text-align: left !important;} /* Related Tools ---------------------------------------------------------------------------------------------------------------------------------- */ #related-tools {margin: 0 auto 85px auto; padding: 60px 0 0 0; position: relative; clear: both;} #related-tools:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); visibility: visible;} #related-tools h2 {margin: 0 0 35px 0; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Tools Listing ----- */ #related-tools ul {margin: 0 0 0 0; padding: 0; position: relative; clear: both;} #related-tools ul li {width: 33.3333333%; margin: 0 0 0 0; text-align: center; position: relative; float: left;} #related-tools ul li:nth-child(3n+1) {clear: both;} #related-tools ul li a {} #related-tools ul li h3 a {margin: 0 0 2px 0; font-size: 36px; line-height: 41px; color: #c72027; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #related-tools ul li h3 a sup {font-size: 13px; line-height: 20px; text-transform: none; position: absolute; top: 2px;} #related-tools ul li p {width: 75%; margin: 0 auto 7px auto; font-size: 14px; line-height: 21px; color: #000; font-family: serifaroman, Times, serif;} /* Rating ---------- */ #related-tools ul li .rating {margin: 0 0 18px 0; position: relative; display: block; clear: both;} /* Buttons ---------- */ #related-tools ul li .button {width: 130px; margin: 0 auto 10px auto; padding: 5px 10px; font-size: 15px; line-height: 20px; display: block; float: none; clear: both;} /* Images ---------- */ #related-tools ul li .tool-image-link {width: 85%; margin: 0 auto 3px auto; position: relative; display: block;} #related-tools ul li .tool-image-link img {max-width: 100%; width: 100%; height: auto;} /* Media Queries for Related Tools ---------- */ @media only screen and (max-width: 600px) { /* Tools Listing ----- */ #related-tools ul li {width: 90%; max-width: 400px; margin: 0 auto 35px auto; float: none; clear: both;} } /* Fasteners -------------------------------------------------------------------------------------------------------------------------------------- */ #pick-rivet-chart {width: 100%; height: 60vh; min-height: 700px; margin: 10px 0 0 0; padding: 10px 0 5px 0; position: relative; clear: both;} #pick-rivet-chart .wrap {height: 100%;} /* Rivet Chart Copy ---------- */ #rivet-chart-copy {width: 95%; max-width: 1000px; margin: 0 auto;} #rivet-chart-copy h2 {margin: 0 0 30px 0; font-size: 60px; line-height: 70px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #rivet-chart-copy .button {width: 85%; max-width: 250px; margin: 0 auto;} /* Rivet Header ---------- */ #inside-hero-copy.rivet h2 {margin: 0 auto 30px auto;} #rivet-job-chart {width: 100%; margin: 0 auto; position: relative; display: block;} #rivet-chart-copy #rivet-job-chart {width: 100%; margin: 0 auto 50px auto; position: relative; display: block;} #rivet-job-chart:after {content: ''; background-color: #fff; width: 5px; height: 300px; position: absolute; top: 0; left: calc(50% - 5px); visibility: visible;} #rivet-job-chart li {padding: 48px 0; clear: both;} /* Rivet Jobs ----- */ .rivet-jobs {width: calc(50% - 35px); padding: 0 35px 0 0; font-size: 19px; line-height: 24px; color: #fff; text-transform: uppercase; text-align: right; position: relative; display: block; float: left; font-family: futura_ltbold, Helvetica, sans-serif;} /* Rivet Job Answer ----- */ .rivet-job-answer {width: calc(50% - 20px); padding: 0 0 0 20px; font-size: 19px; line-height: 24px; color: #fff; text-transform: uppercase; text-align: left; position: relative; float: right; font-family: futura_ltbold, Helvetica, sans-serif;} .rivet-job-answer .job-answer-size {width: 145px; padding: 0; text-align: right; position: relative; left: 0; display: inline-block;} .rivet-job-answer .job-answer-image {width: 90%; max-width: 140px; position: absolute; top: -12px; left: 185px; display: inline-block;} #rivet-job-chart li:nth-child(2) .rivet-job-answer .job-answer-image {width: 90%; max-width: 160px; top: -14px;} #rivet-job-chart li:nth-child(3) .rivet-job-answer .job-answer-image {width: 90%; max-width: 170px; top: -17px;} /* Fasteners Intro ----------------------------------------------------- */ #fastener-intro {margin: 0 auto 60px auto; padding: 40px 0 0 0; position: relative; clear: both;} #fastener-intro h2 {max-width: 890px; margin: 0 auto 15px auto; font-size: 60px; line-height: 65px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-intro p {max-width: 670px; margin: 0 auto 10px auto; font-size: 18px; line-height: 23px; color: #636466; text-align: center; display: block; clear: both; font-family: serifaroman, Times, serif;} /* Fasteners Jump Navigation ---------- */ #fastener-jump {padding: 30px 0 0 0; text-align: center; position: relative; display: block; clear: both;} #fastener-jump ul {text-align: center;} #fastener-jump ul li {background: url(images/fastener-wood-bg.jpg) no-repeat; background-size: cover; width: 145px; height: 145px; margin: 0 1%; position: relative; vertical-align: top; display: inline-block;} #fastener-jump.rivet ul li {background: url(images/fastener-metal-bg.jpg) no-repeat; background-size: cover;} #fastener-jump ul li a {height: 100%; display: block;} #fastener-jump ul li a h3 {font-size: 47px; line-height: 47px; color: #fff; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-jump ul li a h3 sup {font-size: 13px; line-height: 20px; text-transform: none; position: relative; top: 0; vertical-align: top;} #fastener-jump.small ul li a h3 {font-size: 30px; line-height: 35px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-jump.rivet ul li a h3 {font-size: 40px; line-height: 45px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-jump.rivet ul li a h3 span{height: auto !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block; clear: both !important;} #fastener-jump.rivet ul li a h3 .mm {margin: 0 0 2px 0; font-size: 20px; line-height: 25px; text-transform: none;} #fastener-jump.rivet ul li a h3 .diameter {font-size: 26px; line-height: 31px; text-transform: none;} #fastener-jump ul li a span {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block;} /* Fasteners Archive --------------------------------------------------- */ #fastener-archive {position: relative; clear: both;} #fasteners {position: relative; clear: both;} #fasteners article {background: url(images/fastener-wood-bg.jpg) no-repeat; background-size: cover; min-height: 420px; margin: 0 0 5px 0; padding: 40px 0; position: relative; clear: both;} #fasteners.rivets article {background: url(images/fastener-metal-bg.jpg) no-repeat; background-size: cover;} #fasteners article:last-child {margin: 0;} #fasteners article .block-cover-overlay {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 1;} #fasteners article .wrap {width: 95%; height: calc(100% - 80px); margin: 0 auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 5;} /* Fastener Image ---------- */ #fasteners article .fastener-image {width: 45%; text-align: right; position: relative; top: 25px; left: 0; float: left; z-index: 5;} #fasteners article .fastener-image img {max-width: 100%; width: auto; height: auto;} #fasteners.rivets article .rivet-image img {max-width: 100%; width: auto; height: 100px; margin: 55px 0 0 0;} /* Fastener Information ---------- */ #fasteners article .fastener-info {width: 50%; margin: 0 0 25px 0; padding: 15px 0 0 0; position: relative; float: right; z-index: 5;} #fasteners.rivets article .fastener-info {width: calc(50% - 45px); padding: 15px 0 0 45px;} #fasteners article .fastener-info h3 {margin: 0 0 8px 0; font-size: 46px; line-height: 51px; color: #fff; text-transform: uppercase; position: relative; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fasteners article .fastener-info h3 sup{font-size: 15px; line-height: 20px; text-transform: none; position: absolute; top: 3px;} #fasteners article .fastener-info h4 {margin: 0 0 2px 0; font-size: 13px; line-height: 14px; color: #fff; text-transform: uppercase; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fasteners article .fastener-info p {margin: 0 0 10px 0; font-size: 15px; line-height: 19px; color: #fff; display: block; clear: both; font-family: serifaroman, Times, serif;} #fasteners article .fastener-info ul {margin: 0 0 15px 0; position: relative; display: block; clear: both;} #fasteners article .fastener-info ul li {margin: 0 7px 2px 0; font-size: 13px; line-height: 14px; color: #fff; text-transform: uppercase; position: relative; display: inline-block; font-family: futura_ltregular, Helvetica, sans-serif;} #fasteners article .fastener-info ul li:after {content: ','; position: absolute; right: -3px; bottom: 0;} #fasteners article .fastener-info ul li:last-child:after {content: none;} #fasteners article .fastener-info ul li a {color: #fff; border-bottom: 1px solid transparent; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #fasteners article .fastener-info ul li a:hover {border-bottom: 1px solid #fff;} #fasteners article .fastener-info .fastener-read-more {background: url(images/arrow-chevron.svg) 100% 8px no-repeat; background-size: 18px 18px; padding: 0 25px 0 0; font-size: 25px; line-height: 30px; color: #fff; text-transform: uppercase; position: relative; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fasteners article .fastener-info .button {padding: 3px 10%;} /* Rivet Information ----- */ #fasteners.rivets article .rivet-info {width: calc(50% - 5px); height: 100%; min-height: 395px; text-align: center; border-right: 5px solid #fff; position: absolute; display: block; float: left; z-index: 5;} #fasteners.rivets article .rivet-info h3 {margin: 0 0 5px 0; font-size: 100px; line-height: 110px; color: #fff; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fasteners.rivets article .rivet-info h4 {margin: 0 0 10px 0; font-size: 36px; line-height: 41px; color: #fff; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fasteners.rivets article .rivet-info h5 {margin: 0 0 8px 0; font-size: 36px; line-height: 41px; color: #fff; text-transform: uppercase; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fasteners.rivets article .rivet-info h6 {font-size: 24px; line-height: 29px; color: #fff; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} /* Fastener Made In USA ---------- */ #fasteners article .fastener-usa {margin: 0 3% 0 0; position: absolute; bottom: 0; right: 0; display: block; float: right; clear: both; z-index: 5;} /* Fastener Inside Hero ------------------------------------------------ */ #inside-fastener {position: relative; clear: both;} #inside-fastener article {background: url(images/fastener-wood-bg.jpg) no-repeat; background-size: cover; height: calc(100% - 80px) !important; min-height: 420px; margin: 0; padding: 40px 0; position: relative; display: block; clear: both;} #inside-fastener article:last-child {margin: 0;} #inside-fastener article .block-cover-overlay {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 1;} #inside-fastener article .wrap {width: 95%; height: calc(100% - 80px); margin: 0 auto; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 5;} /* Fastener Image ---------- */ #inside-fastener article .fastener-image {width: 45%; text-align: right; position: relative; top: 0; left: 0; float: left; z-index: 5;} #inside-fastener article .fastener-image img {max-width: 100%; width: auto; height: auto;} /* Fastener Information ---------- */ #inside-fastener article .fastener-info {width: 50%; margin: 0 0 25px 0; padding: 15px 0 0 0; position: relative; float: right; z-index: 5;} #inside-fastener article .fastener-info h3 {margin: 0 0 8px 0; font-size: 46px; line-height: 51px; color: #fff; text-transform: uppercase; position: relative; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-fastener article .fastener-info h3 sup {font-size: 15px; line-height: 20px; text-transform: none; position: absolute; top: 3px;} #inside-fastener article .fastener-info h4 {margin: 0 0 2px 0; font-size: 13px; line-height: 14px; color: #fff; text-transform: uppercase; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #inside-fastener article .fastener-info p {width: 80%; margin: 0 0 10px 0; font-size: 15px; line-height: 19px; color: #fff; display: block; clear: both; font-family: serifaroman, Times, serif;} #inside-fastener article .fastener-info ul {margin: 0 0 15px 0; position: relative; display: block; clear: both;} #inside-fastener article .fastener-info ul li {margin: 0 7px 2px 0; font-size: 13px; line-height: 14px; color: #fff; text-transform: uppercase; position: relative; display: inline-block; font-family: futura_ltregular, Helvetica, sans-serif;} #inside-fastener article .fastener-info ul li:after {content: ','; position: absolute; right: -3px; bottom: 0;} #inside-fastener article .fastener-info ul li:last-child:after {content: none;} #inside-fastener article .fastener-info ul li a {color: #fff; border-bottom: 1px solid transparent; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #inside-fastener article .fastener-info ul li a:hover {border-bottom: 1px solid #fff;} #inside-fastener article .fastener-info .fastener-read-more {background: url(images/arrow-chevron.svg) 100% 8px no-repeat; background-size: 18px 18px; padding: 0 25px 0 0; font-size: 25px; line-height: 30px; color: #fff; text-transform: uppercase; position: relative; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} /* Fastener Made In USA ---------- */ #inside-fastener article .fastener-usa {margin: 0 3% 0 0; position: absolute; bottom: 0; right: 0; display: block; float: right; clear: both; z-index: 5;} /* Fastener Sizes ------------------------------------------------------ */ #fastener-sizes {background-color: #fff; width: 100% !important; margin: 0 auto 60px auto !important; padding: 40px 0 0 0; position: relative; left: 0 !important; clear: both; z-index: 10;} #fastener-sizes h2 {max-width: 890px; margin: 0 auto 15px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-sizes p {max-width: 875px; margin: 0 auto 10px auto; font-size: 18px; line-height: 23px; color: #acacac; text-align: center; display: block; clear: both; font-family: serifaroman, Times, serif;} /* Consumable List ----- */ #fastener-sizes ul {max-width: 855px; margin: 0 auto; text-align: center;} #fastener-sizes ul li {width: 16.1666667%; padding: 15px 0 15px 0; text-align: center; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block;} #fastener-sizes ul li a {width: 100%; height: 100%; display: block;} /* Hover */ #fastener-sizes ul li:hover {background-color: #e6e8e9;} /* Consumable Size ----- */ #fastener-sizes ul li .consumable-size {font-size: 16px; line-height: 21px; color: #000; text-align: center; letter-spacing: -1px; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-sizes ul li .consumable-size span {letter-spacing: 0; display: block;} /* Consumable ID ----- */ #fastener-sizes ul li .consumable-id {width: auto; padding: 2px 8px; font-size: 16px; line-height: 21px; color: #c72027; border: 3px solid #c72027; text-align: center; display: inline-block; font-family: futura_ltbold, Helvetica, sans-serif;} /* Media Queries for Fasteners ---------- */ @media only screen and (max-width: 900px) { /* Fasteners Jump Navigation ---------- */ #fastener-jump ul li {width: 115px; height: 115px; margin: 0 .5% 10px .5%;} #fastener-jump ul li a h3 {font-size: 40px; line-height: 40px;} #fastener-jump.small ul li a h3 {font-size: 25px; line-height: 30px;} #fastener-jump.rivet ul li a h3 {font-size: 26px; line-height: 31px;} #fastener-jump.rivet ul li a h3 .mm {margin: 0 0 2px 0; font-size: 20px; line-height: 25px;} #fastener-jump.rivet ul li a h3 .diameter {font-size: 18px; line-height: 23px;} } @media only screen and (max-width: 800px) { /* Fasteners Archive --------------------------------------------------- */ #fasteners article .wrap {width: 95%; height: calc(100% - 80px); margin: 0 auto; position: relative; left: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);} /* Fastener Image ---------- */ #fasteners article .fastener-image {width: 95%; margin: 0 auto; text-align: center; top: 0; left: auto; float: none; clear: both;} #fasteners article .fastener-image img {max-width: 100%; width: auto; height: auto;} #fasteners.rivets article .rivet-image img {max-width: 100%; width: auto; height: 100px; margin: 15px 0 0 0;} /* Fastener Information ---------- */ #fasteners article .fastener-info {width: 90%; max-width: 570px; margin: 0 auto 25px auto; padding: 15px 0 0 0; float: none; clear: both;} #fasteners.rivets article .fastener-info {width: 100%; padding: 15px 0 0 0; text-align: center;} /* Rivet Information ----- */ #fasteners.rivets article .rivet-info {width: 100%; height: auto; min-height: 0; padding: 0 0 25px 0; border-right: none; border-bottom: 5px solid #fff; position: relative; float: none; clear: both;} #fasteners.rivets article .rivet-info .vert-center {top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} #fasteners.rivets article .rivet-info h3 {margin: 0 0 5px 0; font-size: 80px; line-height: 90px;} #fasteners.rivets article .rivet-info h4 {margin: 0 0 10px 0; font-size: 26px; line-height: 31px;} #fasteners.rivets article .rivet-info h5 {margin: 0 0 8px 0; font-size: 26px; line-height: 31px;} #fasteners.rivets article .rivet-info h6 {font-size: 24px; line-height: 29px;} /* Fastener Made In USA ---------- */ #fasteners article .fastener-usa {max-width: 90px; margin: 0 auto; position: relative; bottom: 0; right: auto; display: block; float: none; clear: both;} /* Fastener Inside Hero ------------------------------------------------ */ #inside-hero.fastener-inside {height: auto !important;} #inside-fastener {position: relative; clear: both;} #inside-fastener article {height: calc(100% - 80px) !important; min-height: 420px; margin: 0; padding: 40px 0;} #inside-fastener article .wrap {width: 95%; height: calc(100% - 80px); margin: 0 auto; position: relative; left: auto; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);} /* Fastener Image ---------- */ #inside-fastener article .fastener-image {width: 95%; margin: 0 auto; text-align: center; top: 0; left: auto; float: none; clear: both;} #inside-fastener article .fastener-image img {max-width: 100%; width: auto; height: auto;} /* Fastener Information ---------- */ #inside-fastener article .fastener-info {width: 90%; max-width: 570px; margin: 0 auto 25px auto; padding: 15px 0 0 0; float: none; clear: both;} #inside-fastener article .fastener-info p {width: 100%;} /* Fastener Made In USA ---------- */ #inside-fastener article .fastener-usa {max-width: 90px; margin: 0 auto; position: relative; bottom: 0; right: auto; display: block; float: none; clear: both;} } @media only screen and (max-width: 750px) { /* Staple Consumable List ----- */ #fastener-sizes ul li {width: 16.1666667%; margin: 0 1% 20px 1%;} /* Consumable Size ----- */ #fastener-sizes ul li .consumable-size {font-size: 16px; line-height: 21px;} /* Consumable ID ----- */ #fastener-sizes ul li .consumable-id {font-size: 15px;} /* Rivet Header ---------- */ #inside-hero-copy.rivet h2 {margin: 0 auto 5px auto;} #inside-hero-copy.rivet h2 span {font-size: 30px !important; line-height: 35px !important;} #rivet-job-chart {width: 100%; margin: 0 auto; position: relative; display: block;} #rivet-chart-copy #rivet-job-chart {width: 100%; margin: 0 auto 50px auto; position: relative; display: block;} #rivet-job-chart:after {content: none;} #rivet-job-chart li {padding: 10px 0;} /* Rivet Jobs ----- */ .rivet-jobs {width: 100%; padding: 0; font-size: 15px; text-align: center; float: none; clear: both;} /* Rivet Job Answer ----- */ .rivet-job-answer {width: 100%; margin: 0 0 20px 0; padding: 0; text-align: center; float: none; clear: both;} .rivet-job-answer .job-answer-size {width: 145px; padding: 0; text-align: right; position: relative; left: 0;} .rivet-job-answer .job-answer-image {width: 80%; max-width: 90px; position: relative; top: 12px; left: 0;} #rivet-job-chart li:nth-child(2) .rivet-job-answer .job-answer-image {width: 80%; max-width: 110px; top: 14px;} #rivet-job-chart li:nth-child(3) .rivet-job-answer .job-answer-image {width: 80%; max-width: 120px; top: 16px;} } @media only screen and (max-width: 700px) { /* Fasteners Jump Navigation ---------- */ #fastener-jump ul li {width: 95px; height: 95px; margin: 0 .5% 10px .5%;} #fastener-jump ul li a h3 {font-size: 30px; line-height: 30px;} #fastener-jump.small ul li a h3 {font-size: 17px; line-height: 22px;} #fastener-jump.rivet ul li a h3 {font-size: 20px; line-height: 25px;} #fastener-jump.rivet ul li a h3 .mm {margin: 0 0 2px 0; font-size: 15px; line-height: 20px;} #fastener-jump.rivet ul li a h3 .diameter {font-size: 15px; line-height: 20px;} } @media only screen and (max-width: 550px) { /* Consumable Size ----- */ #fastener-sizes ul li .consumable-size {font-size: 15px; line-height: 20px;} /* Consumable ID ----- */ #fastener-sizes ul li .consumable-id {font-size: 14px;} } @media only screen and (max-width: 450px) { /* Consumable Size ----- */ #fastener-sizes ul li .consumable-size {font-size: 13px; line-height: 18px;} /* Consumable ID ----- */ #fastener-sizes ul li .consumable-id {font-size: 12px;} } /* Fastener Selection Chart ----------------------------------------------------------------------------------------------------------------------- */ #fastener-selection-chart {margin: 0 auto 10px auto; padding: 0px 0 0 0; position: relative; clear: both;} #fastener-selection-chart:not(.no-outline) h2 {background-color: #00aeef; max-width: 845px; margin: 0 auto 50px auto; padding: 12px 0; font-size: 48px; line-height: 52px; color: #fff; text-align: center; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-selection-chart:not(.no-outline) h2 sup {font-size: 15px; line-height: 20px; text-transform: none; position: absolute; top: 13px;} #fastener-selection-chart:not(.no-outline) h2::selection {background: #00a3e0; color: #fff;} #fastener-selection-chart:not(.no-outline) h2::-moz-selection {background: #00a3e0; color: #fff;} #fastener-selection-chart:not(.no-outline) h2 sup::selection {background: #00a3e0; color: #fff;} #fastener-selection-chart:not(.no-outline) h2 sup::-moz-selection {background: #00a3e0; color: #fff;} #fastener-selection-chart.no-outline h2 {background: none; max-width: 845px; margin: 0 auto 27px auto; padding: 0 0 25px 0; font-size: 60px; line-height: 65px; color: #ca2129; text-align: center; border-bottom: 3px solid #ca2129; text-transform: uppercase; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-selection-chart.no-outline h2 sup {font-size: 15px; line-height: 20px; text-transform: none; position: absolute; top: 13px;} /* Table Intro --------------------------------------------------------- */ .table-intro {margin: 0 0 30px 0; padding: 25px 0 0 0; text-align: center; display: block; clear: both;} .table-intro:first-of-type {padding: 0;} .table-intro h3 {margin: 0 0 5px 0; font-size: 29px; line-height: 34px; color: #ca2129; text-transform: uppercase; position: relative; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} .table-intro h3 sup {font-size: 13px; line-height: 20px; text-transform: none; position: relative; top: 0px; vertical-align: top;} .table-intro nav {max-width: 600px; margin: 0 auto; display: block; clear: both;} .table-intro nav h4 {font-size: 18px; line-height: 23px; color: #ca2129; display: inline-block; font-family: serifa_btbold, Times, serif;} .table-intro nav ul {position: relative; display: inline-block;} .table-intro nav ul li {margin: 0 8px 0 0; position: relative; display: inline-block; font-family: serifa_btbold, Times, serif;} .table-intro nav ul li a {font-size: 18px; line-height: 23px; color: #ca2129; position: relative; display: block;} .table-intro nav ul li a:after {content: ','; position: absolute; bottom: -1px; right: -5px;} .table-intro nav ul li:last-child a:after {content: none;} /* Table --------------------------------------------------------------- */ #fastener-selection-chart table {width: 95%; margin: 0 auto 25px auto; border-bottom: 1px solid #a5a7a8; table-layout: fixed; position: relative; clear: both;} /* Table Head ---------- */ #fastener-selection-chart table thead {text-align: center;} #fastener-selection-chart table thead th {padding: 5px 0; color: #ca2129; text-transform: uppercase; vertical-align: bottom; font-family: futura_ltbold, Helvetica, sans-serif;} /* Fastener Group ----- */ #fastener-selection-chart table thead th.fastener-group {width: 15%; /*font-size: 30px; line-height: 35px;*/ text-align: left;} /* Fastener Size ----- */ #fastener-selection-chart table thead th.fastener-size {width: 25%;} /* Fastener Material ----- */ #fastener-selection-chart table thead th.fastener-material {width: 30%;} /* Fastener Pack Size ----- */ #fastener-selection-chart table thead th.fastener-pack-size {width: 12%;} /* Fastener Buy ----- */ #fastener-selection-chart table thead th.fastener-buy {width: 18%;} /* Four Cell ---------- */ #fastener-selection-chart table.four-cell thead th {} /* Fastener Group ----- */ #fastener-selection-chart table.four-cell thead th.fastener-group {width: 15%;} /* Fastener Size ----- */ #fastener-selection-chart table.four-cell thead th.fastener-size {width: 56%;} /* Fastener Pack Size ----- */ #fastener-selection-chart table.four-cell thead th.fastener-pack-size {width: 11%;} /* Fastener Buy ----- */ #fastener-selection-chart table.four-cell thead th.fastener-buy {width: 18%;} /* Six Cell ---------- */ #fastener-selection-chart table.six-cell thead th {} /* Fastener Group ----- */ #fastener-selection-chart table.six-cell thead th.fastener-group {width: 17%;} /* Fastener Size ----- */ #fastener-selection-chart table.six-cell thead th.fastener-size {width: 15%;} /* Fastener Type ----- */ #fastener-selection-chart table thead th.fastener-type {width: 17%;} /* Fastener Pack Size ----- */ #fastener-selection-chart table.six-cell thead th.fastener-pack-size {width: 9%;} /* Fastener Pack Size ----- */ #fastener-selection-chart table.six-cell thead th.fastener-nail-guns {width: 24%;} /* Fastener Buy ----- */ #fastener-selection-chart table.six-cell thead th.fastener-buy {width: 18%;} /* Rivet Six Cell ---------- */ #fastener-selection-chart table.rivet.six-cell thead th {} /* Fastener Group ----- */ #fastener-selection-chart table.rivet.six-cell thead th.fastener-group {width: 18%;} /* Fastener Diameter ----- */ #fastener-selection-chart table.rivet.six-cell thead th.fastener-diameter {width: 16%;} /* Fastener Pack Size ----- */ #fastener-selection-chart table.rivet.six-cell thead th.fastener-length-grip{width: 16%;} /* Fastener Type ----- */ #fastener-selection-chart table.rivet.six-cell thead th.fastener-type {width: 21%;} /* Fastener Pack Size ----- */ #fastener-selection-chart table.rivet.six-cell thead th.fastener-pack-size {width: 11%;} /* Fastener Buy ----- */ #fastener-selection-chart table.rivet.six-cell thead th.fastener-buy {width: 18%;} /* Table Body ---------- */ #fastener-selection-chart table tbody {text-align: center;} #fastener-selection-chart table tbody tr {} #fastener-selection-chart table tbody td {padding: 8px .25%; font-size: 17px; line-height: 19px; color: #040707; border-top: 1px solid #a5a7a8; border-right: 1px solid #a5a7a8; vertical-align: middle; font-family: serifa_btbold, Times, serif;} #fastener-selection-chart table tbody td a {font-size: 22px; line-height: 22px; color: #ca2129;} #fastener-selection-chart table tbody td:last-child {border-right: none;} /* Fastener Name ----- */ #fastener-selection-chart table tbody td.fastener-name {color: #ca2129; text-transform: uppercase; text-align: left; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #fastener-selection-chart table tbody td.fastener-name sup {font-size: 10px; line-height: 15px; text-transform: none; position: relative; top: 0; vertical-align: top;} #fastener-selection-chart table tbody td.nail-gun-list a {margin: 0 7px 0 0; font-size: 16px; color: #040707; position: relative; display: inline-block;} #fastener-selection-chart table tbody td.nail-gun-list a:last-child {margin: 0;} #fastener-selection-chart table tbody td.nail-gun-list a:after {content: ','; position: absolute; bottom: -1px; right: -4px;} #fastener-selection-chart table tbody td.nail-gun-list a:last-child:after {content: none;} /* Buy Now ----- */ .fastener-buy-now .buy-now {width: auto; padding: 2px 7px; font-size: 16px !important; line-height: 21px !important; border: 2px solid #ca2129; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover */ .fastener-buy-now .buy-now:hover {background-color: #ca2129; color: #fff !important;} /* Stackable Table ----------------------------------------------------- */ .stacktable {width: 100%; border-spacing: 0; border-collapse: separate;} .st-head-row {padding: 25px 0 5px 0; font-size: 22px; line-height: 27px; color: #ca2129; text-transform: uppercase; text-align: center; border-top: 1px solid #a5a7a8; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} tr:nth-of-type(2) .st-head-row {padding-top: 0; border-top: none !important;} .st-head-row.st-head-row-main {border: none !important; display: none;} .st-key {width: 50%; padding-right: 10px !important; color: #ca2129 !important; text-align: right; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif !important;} .st-val {width: 50%; padding: 8px 1% !important;} .stacktable.large-only {display: table;} .stacktable.small-only {display: none;} /* Media Queries for Table ---------- */ @media only screen and (max-width: 700px) { .stacktable.large-only {display: none;} .stacktable.small-only {display: table;} } /* Projects --------------------------------------------------------------------------------------------------------------------------------------- */ /* Most Recent Project Hero -------------------------------------------- */ #most-recent-project {background-color: rgba(200,33,39,.90); width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #most-recent-project-copy {width: 45%; float: left; word-wrap: break-word; /*-ms-word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;*/} #most-recent-project-copy.wide {width: 100%; float: none;} #most-recent-project h2 {font-size: 60px; line-height: 70px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #most-recent-project h3 {margin: 0 0 50px 0; font-size: 60px; line-height: 70px; color: #fff; text-transform: uppercase; font-family: futura_ltregular, Helvetica, sans-serif;} #most-recent-project:hover .button.outlined {background-color: #fff; color: #bf2026;} #recent-project-image {width: 50%; text-align: left; float: right;} #recent-project-image img {max-width: 100%; width: auto; max-height: 460px; height: auto; top: 0;} /* Projects Listing ---------------------------------------------------- */ #projects {width: 100%; margin: 0 0 55px 0; padding: 40px 0 87px 0; position: relative;} #projects:after {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); visibility: visible;} #projects h2 {margin: 0 auto 25px auto; padding: 0 0 40px 0; font-size: 60px; line-height: 65px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #projects h2:after {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} /* Articles ---------- */ #projects ul {width: 88%; margin: 0 auto 45px auto; padding: 0 0 0 0;} #projects ul li {width: calc(33.3333333% - 2%); margin: 0 1% 40px 1%; position: relative; display: block; float: left;} #projects ul li:nth-of-type(3n + 1) {clear: both;} #projects ul li a {display: block;} #projects ul li a .button.outlined {padding: 3px 8%; font-size: 14px; line-height: 19px; color: #c72027; border: 2px solid #c72027;} /* Article Image ----- */ #projects ul li .article-image {width: 100%; height: 275px;} /* Article Meta ----- */ #projects ul li a .article-meta {padding: 15px 0 0 0; position: relative; display: block;} #projects ul li a .article-meta h3 {margin: 0 0 10px 0; font-size: 28px; line-height: 32px; color: #c72027; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #projects ul li a .article-meta h3 span {margin: 0 0 2px 0; font-size: 18px; line-height: 23px; display: block; font-family: futura_ltregular, Helvetica, sans-serif;} /* Hover */ #projects ul li a:hover .button.outlined {background-color: #bf2026; color: #fff;} /* More Projects ----- */ #projects .more-projects {background-color: #dd1a32; width: 50%; max-width: 315px; margin: 0 auto; padding: 7px 5px; font-size: 22px; line-height: 27px; color: #fff; text-transform: uppercase; text-align: center; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #projects .more-projects:hover {background-color: #76241f;} /* Media Queries for Projects ---------- */ @media only screen and (max-width: 800px) { #projects ul li {width: calc(50% - 2%);} #projects ul li:nth-of-type(3n + 1) {clear: none;} #projects ul li:nth-of-type(odd) {clear: both;} } @media only screen and (max-width: 600px) { /* Most Recent Project Hero -------------------------------------------- */ #most-recent-project h2 {font-size: 45px; line-height: 55px;} #most-recent-project h3 {font-size: 45px; line-height: 55px;} #projects ul li {width: 100%; margin: 0 auto 40px auto; text-align: center;} } @media only screen and (max-width: 500px) { /* Most Recent Project Hero -------------------------------------------- */ #most-recent-project h2 {font-size: 35px; line-height: 45px;} #most-recent-project h3 {margin: 0 0 40px 0; font-size: 35px; line-height: 45px;} } @media only screen and (max-width: 450px) { /* Most Recent Project Hero -------------------------------------------- */ #most-recent-project-copy {width: 100%; margin: 0 auto 35px auto; float: none; top: 20px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); clear: both;} #most-recent-project h2 {font-size: 35px; line-height: 45px;} #most-recent-project h3 {margin: 0 0 40px 0; font-size: 35px; line-height: 45px;} #recent-project-image {width: 100%; margin: 0 auto; text-align: center; float: none; top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); clear: both;} #recent-project-image img {max-width: 75%; max-height: 300px;} } /* Inside Project --------------------------------------------------------------------------------------------------------------------------------- */ /* Getting Started ---------- */ .getting-started {width: 100%; padding: 40px 0 25px 0; text-align: center; position: relative;} .getting-started h2 {margin: 0 auto 10px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} .getting-started p {max-width: 900px; margin: 0 auto 20px auto; font-size: 24px; line-height: 32px; letter-spacing: 1px; color: #959595; text-align: center; position: relative; font-family: serifaroman, Times, serif;} /* What You Need ---------- */ .what-you-need {width: 100%; padding: 45px 0 50px 0; text-align: center; position: relative;} .what-you-need:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .what-you-need h2 {margin: 0 auto 25px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} .what-you-need p {margin: 0 auto 20px auto; font-size: 24px; line-height: 32px; letter-spacing: 1px; color: #959595; text-align: center; position: relative; font-family: serifaroman, Times, serif;} .what-you-need ul {position: relative;} .what-you-need ul li {width: 24%; margin: 0 0; padding: 0; vertical-align: top; position: relative; display: inline-block;} .what-you-need ul li a {} .what-you-need ul li img {max-width: 100%; width: 100%; height: auto;} .what-you-need ul li h3 a {margin: 0 0 3px 0; font-size: 33px; line-height: 38px; color: #c72027; text-transform: uppercase; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} .what-you-need ul li h3 a sup {padding-top: 5px; font-size: 10px; line-height: 10px; vertical-align: top; position: relative; display: inline-block;} .what-you-need ul li h3.fastener a {font-size: 18px; line-height: 23px;} .what-you-need ul li h4 a {margin: 0 0 12px 0; font-size: 14px; line-height: 19px; color: #000; display: block; font-family: serifaroman, Times, serif;} .what-you-need ul li h4 a sup {padding-top: 1px; font-size: 9px; line-height: 9px; vertical-align: top; position: relative; display: inline-block;} .what-you-need ul li .button {/*padding: 5px 13px; font-size: 13px !important; line-height: 19px;*/ width: 130px; margin: 0 auto 10px auto; padding: 5px 10px; font-size: 15px; line-height: 20px; display: block; float: none; clear: both;} /* Other Materials ---------- */ .other-materials {width: 100%; padding: 40px 0 25px 0; text-align: center; position: relative;} .other-materials:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .other-materials h2 {margin: 0 auto 20px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} .other-materials ul {max-width: 455px; margin: 0 auto 10px auto; position: relative; clear: both;} .other-materials ul li {margin: 0 auto 5px auto; padding: 0 0 0 28px; font-size: 24px; line-height: 32px; letter-spacing: 1px; color: #959595; text-align: left; text-indent: -13px; position: relative; font-family: futura_ltregular, Helvetica, sans-serif;} .other-materials ul li i {font-size: 19px;} /* Video ---------- */ .project-video {width: 100%; max-width: 948px; margin: 0 auto; padding: 43px 0 20px 0; text-align: center; position: relative;} .project-video:before {content: ''; background-color: #c72027; width: 100%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} .video-container {height: 0; margin: 0 auto; padding-top: 25px; padding-bottom: 56.25%; position: relative;} .video-container iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;} /* Steps ---------- */ .step {width: 100%; padding: 45px 0 40px 0; text-align: center; position: relative;} /* No Content ----- */ .step.no-content {padding: 0 0 40px 0;} .step.no-content-previous {padding-bottom: 0;} /* No Title ----- */ .step.no-title {padding: 0 0 50px 0;} .step.no-title-previous {padding-bottom: 0;} .step h2 {width: 85%; max-width: 730px; margin: 0 auto 25px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; z-index: 1; font-family: futura_ltbold, Helvetica, sans-serif;} .step h2 span {background-color: #fff; max-width: 65%; margin: 0 auto; padding: 0 20px; display: inline-block; z-index: 1;} .step h2:before {content: ''; background-color: #76241f; width: 45%; height: 4px; border-radius: 50px 0 0 50px; position: absolute; top: calc(50% - 3px); left: 0; z-index: -1;} .step h2:after {content: ''; background-color: #76241f; width: 45%; height: 4px; border-radius: 0 50px 50px 0; position: absolute; top: calc(50% - 3px); right: 0; z-index: -1;} .step p {width: 95%; max-width: 900px; margin: 0 auto 20px auto; font-size: 24px; line-height: 32px; letter-spacing: 1px; color: #959595; text-align: center; position: relative; font-family: futura_ltregular, Helvetica, sans-serif;} /* Gallery ---------- */ /* Full Width ---------------------------------------------------------- */ /* Full Width (Portrait Image) ---------- */ .full-width.portrait {width: 95%; max-width: 450px; height: 0; margin: 0 auto 2.4% auto; padding-top: 2.4%; padding-bottom: 56.25%; position: relative; display: block; clear: both;} .full-width.portrait a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Full Width (Landscape Image) ---------- */ .full-width {width: 95%; height: 0; margin: 0 auto 2.4% auto; padding-top: 2.4%; padding-bottom: 56.25%; position: relative; display: block; clear: both;} .full-width a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 2 Images ------------------------------------------------------------ */ /* Equal Size ---------- */ .two-images {width: 95%; margin: 0 auto; position: relative; display: block; clear: both;} .two-images li {width: 48.9%; height: 0; margin: 0 0 2.4% 0; padding-top: 0px; padding-bottom: 56.25%; position: relative; display: block; overflow: hidden; float: left;} .two-images li:nth-child(even) {float: right;} .two-images li a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Vertical Left ---------- */ .two-images.vertical-left {position: relative; display: block; clear: both;} .two-images.vertical-left li {width: 35%; height: 0; margin: 0 0 2.4% 0; padding-top: 0px; padding-bottom: 56.25%; position: relative; display: block; overflow: hidden; float: left;} .two-images.vertical-left li:nth-child(even) {width: 62.9%; float: right;} .two-images.vertical-left li a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Vertical Right ---------- */ .two-images.vertical-right {position: relative; display: block; clear: both;} .two-images.vertical-right li {width: 62.9%; height: 0; margin: 0 0 2.4% 0; padding-top: 0px; padding-bottom: 56.25%; position: relative; display: block; overflow: hidden; float: left;} .two-images.vertical-right li:nth-child(even) {width: 35%; float: right;} .two-images.vertical-right li a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 3 Images ------------------------------------------------------------ */ .three-images {width: 95%; margin: 0 auto; position: relative; display: block; clear: both;} /* Large Left ---------- */ .three-images.large-left li {width: 48.9%; height: 0; margin: 0 0 2.4% 0; padding-top: 0px; padding-bottom: 28.125%; position: relative; display: block; overflow: hidden; float: right;} .three-images.large-left li:first-of-type {padding-top: 2.4%; padding-bottom: 56.25%; float: left;} .three-images.large-left li a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Large Right ---------- */ .three-images.large-right li {width: 48.9%; height: 0; margin: 0 0 2.4% 0; padding-top: 0px; padding-bottom: 28.125%; position: relative; display: block; overflow: hidden; float: left;} .three-images.large-right li:first-of-type {padding-top: 2.4%; padding-bottom: 56.25%; float: right;} .three-images.large-right li a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Gallery ----- */ /* .step ul {width: 95%; margin: 0 auto; text-align: center; position: relative;} .step ul li {width: 31%; margin: 0 1% 15px 1%; position: relative; text-align: center; display: inline-block; overflow: hidden;} .step ul li a {width: 100%; height: 100%; padding-top: 100%; position: relative; display: block;} .step ul li a img {max-width: 90%; width: 90%; height: auto;} */ /* Finished Product ---------- */ .finished-product {width: 100%; padding: 45px 0 50px 0; text-align: center; position: relative;} .finished-product .wrap {z-index: 1;} .finished-product-content {background-color: rgba(200,33,39,.90); width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;} .finished-product h2 {width: 85%; max-width: 730px; margin: 0 auto 25px auto; font-size: 60px; line-height: 70px; color: #fff; text-align: center; text-transform: uppercase; position: relative; z-index: 1; font-family: futura_ltbold, Helvetica, sans-serif;} .finished-product p {width: 75%; margin: 0 auto 20px auto; font-size: 24px; line-height: 30px; color: #fff; text-align: center; position: relative; font-family: futura_ltregular, Helvetica, sans-serif;} /* Share ----- */ .finished-product nav {margin: 0 auto; padding: 40px 0 0 0; clear: both;} .finished-product nav h4 {width: 43%; font-size: 24px; line-height: 40px; color: #fff; text-align: right; float: left; font-family: futura_ltbold, Helvetica, sans-serif;} .finished-product nav ul {width: 55%; text-align: left; float: right;} .finished-product nav ul li {margin: 0 1% 0 0; text-align: center !important; display: inline-block;} .finished-product nav ul li a {font-size: 35px; line-height: 40px; color: #fff;} /* Gallery ----- */ /* .finished-product ul {width: 95%; margin: 0 auto; text-align: center; position: relative;} .finished-product ul li {width: 31%; margin: 0 1% 15px 1%; position: relative; text-align: center; display: inline-block; overflow: hidden;} .finished-product ul li a {width: 100%; height: 100%; padding-top: 100%; display: block;} .finished-product ul li a img {max-width: 90%; width: 90%; height: auto;} */ /* Print / Share ----- */ #print-share {width: 100%; padding: 45px 0 50px 0; text-align: center; position: relative; clear: both;} #print-share:after {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); visibility: visible;} #print-share nav {margin: 0 auto; padding: 70px 0 0 0; clear: both;} #print-share nav h4 {width: 49%; font-size: 24px; line-height: 40px; color: #c72027; text-align: right; float: left; font-family: futura_ltbold, Helvetica, sans-serif;} #print-share nav ul {width: 49%; text-align: left; float: right;} #print-share nav ul li {margin: 0 1% 0 0; text-align: center !important; display: inline-block;} #print-share nav ul li a {font-size: 35px; line-height: 40px; color: #c72027;} /* Other Products ---------- */ #other-projects {padding: 40px 0 30px 0; text-align: center; position: relative;} /* Previous / Next ----- */ #prev-next {width: 100%; margin: 0 0 41px 0; font-size: 34px; line-height: 39px; color: #c72027; position: relative; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} #prev-project {padding: 0 0 0 55px; position: absolute; top: 0; left: 0; z-index: 1;} #next-project {padding: 0 55px 0 0; position: absolute; top: 0; right: 0; z-index: 1;} #prev-next a {color: #c72027;} #prev-project a:before {content: ''; background: url(images/left-arrow.png) center center no-repeat; background-size: contain; width: 46px; height: 72px; position: absolute; top: -15px; left: -5%;} #next-project a:after {content: ''; background: url(images/right-arrow.png) center center no-repeat; background-size: contain; width: 46px; height: 72px; position: absolute; top: -15px; right: -5%;} /* Project Number ----- */ #project-number {margin: 0 auto; font-size: 34px; line-height: 39px; color: #c72027; text-align: center; position: relative; display: block; z-index: 0; font-family: futura_ltbold, Helvetica, sans-serif;} /* Articles ---------- */ #other-project-posts ul {width: 95%; max-width: 870px; margin: 0 auto 45px auto; padding: 25px 0 0 0; text-align: center;} #other-project-posts ul li {width: 30.5%; margin: 0 1% 20px 1%; text-align: left; display: inline-block; position: relative; vertical-align: top;} #other-project-posts ul li:nth-of-type(3n + 1) {clear: both;} #other-project-posts ul li a {display: block;} #other-project-posts ul li a .button.outlined {padding: 3px 8%; font-size: 14px; line-height: 19px; color: #c72027; border: 2px solid #c72027;} /* Article Image ----- */ #other-project-posts ul li a .article-image {width: 100%; height: 275px;} /* Article Meta ----- */ #other-project-posts ul li a .article-meta {padding: 15px 0 0 0; position: relative; display: block;} #other-project-posts ul li a .article-meta h3 {margin: 0 0 10px 0; font-size: 28px; line-height: 32px; color: #c72027; text-transform: uppercase; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #other-project-posts ul li a .article-meta h3 span {margin: 0 0 2px 0; font-size: 18px; line-height: 23px; display: block; font-family: futura_ltregular, Helvetica, sans-serif;} /* Hover */ #other-project-posts ul li a:hover .button.outlined {background-color: #bf2026; color: #fff;} /* Suggested Products ---------- */ #project-suggested-products {width: 100%; padding: 40px 0 30px 0; text-align: center; position: relative;} #project-suggested-products.border-top:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #project-suggested-products h2 {margin: 0 auto 25px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #project-suggested-products p {max-width: 900px; margin: 0 auto 20px auto; font-size: 24px; line-height: 30px; color: #959595; text-align: center; position: relative; font-family: serifaroman, Times, serif;} #project-suggested-products ul {text-align: center; position: relative;} #project-suggested-products ul li {width: 30.3333333%; margin: 0 1% 25px 1%; position: relative; text-align: center; display: inline-block; vertical-align: top; overflow: hidden;} #project-suggested-products ul li:nth-of-type(3n+1) {clear: both;} #project-suggested-products ul li a {width: 100%; height: 100%;} #project-suggested-products ul li a h3 {margin: 0 0 5px 0; font-size: 36px; line-height: 41px; color: #c72027; font-family: futura_ltbold, Helvetica, sans-serif;} #project-suggested-products ul li a p {font-size: 15px; line-height: 19px; color: #6a0020; font-family: serifa_btbold, Times, serif;} /* Product Image ---------- */ #project-suggested-products ul li a .suggested-product-image {width: 100%; height: 100%; margin: 0 0 5px 0; padding-top: 100%; position: relative; display: block;} /* Media Queries for Inside Project ---------- */ @media only screen and (max-width: 800px) { /* Previous / Next ----- */ #prev-next {width: 100%; margin: 0 0 70px 0; padding: 70px 0 0 0; font-size: 28px; line-height: 33px;} #prev-project {padding: 0 0 0 35px; top: 70px;} #next-project {padding: 0 35px 0 0; top: 70px;} #prev-project a:before {width: 30px; height: 47px; top: -6px; left: 0;} #next-project a:after {width: 30px; height: 47px; top: -6px; right: 0;} /* Project Number ----- */ #project-number {margin: -70px auto 0 auto; font-size: 28px; line-height: 33px; text-align: center; position: relative; display: block;} #other-project-posts ul li {width: 100%; margin: 0 auto 40px auto; text-align: center;} } @media only screen and (max-width: 700px) { /* What You Need ---------- */ .what-you-need ul li {width: 49%; margin: 0 0 50px 0;} } @media only screen and (max-width: 550px) { .finished-product nav h4 {width: 100%; margin: 0 auto 10px auto; text-align: center; float: none; clear: both;} .finished-product nav ul {width: 100%; text-align: center; float: none; clear: both;} .finished-product nav ul li {margin: 0 1% 0 1%;} /* Print / Share ----- */ #print-share nav h4 {width: 100%; margin: 0 auto 10px auto; text-align: center; float: none; clear: both;} #print-share nav ul {width: 100%; text-align: center; float: none; clear: both;} #print-share nav ul li {margin: 0 1% 0 1%;} } @media only screen and (max-width: 400px) { /* Previous / Next ----- */ #prev-project {font-size: 25px;} #next-project {font-size: 25px;} } @media only screen and (max-width: 360px) { /* Finished Product ---------- */ .finished-product h2 {font-size: 50px; line-height: 60px;} } /* Choose Arrow ----------------------------------------------------------------------------------------------------------------------------------- */ #choose-arrow {width: 100%; padding: 40px 0 50px 0; text-align: center; position: relative;} #choose-arrow h2 {width: 100%; max-width: 545px; margin: 0 auto 35px auto; padding: 0 0 30px 0; font-size: 73px; line-height: 73px; color: #fff; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #choose-arrow h2:after {content: ''; background-color: #fff; width: 100%; height: 4px; border-radius: 15px; position: absolute; bottom: 0; left: 0;} #choose-arrow h2 small {font-size: 43px; line-height: 45px; display: block;} #choose-arrow h2 span {display: block;} #choose-arrow img {max-width: 95%; width: auto; height: auto; margin: 0 auto;} /* Articles ---------- */ #choose-arrow article {max-width: 500px; margin: 0 auto 40px auto; position: relative;} #choose-arrow article h3 {margin: 0 0 5px 0; font-size: 28px; line-height: 33px; color: #fff; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #choose-arrow article p {font-size: 20px; line-height: 26px; color: #fff; font-family: serifa_btbold, Times, serif;} /* Media Queries for Choose Arrow ---------- */ @media only screen and (max-width: 450px) { #choose-arrow h2 {font-size: 63px !important; line-height: 63px !important;} #choose-arrow h2 span:nth-of-type(2) {font-size: 38px !important; line-height: 38px !important;} #choose-arrow h2 span:nth-child(3) {font-size: 75px !important; line-height: 75px !important;} #choose-arrow h2 span:nth-child(4) {font-size: 75px !important; line-height: 75px !important;} /* Articles ---------- */ #choose-arrow article h3 {font-size: 22px; line-height: 27px;} #choose-arrow article p {font-size: 14px; line-height: 19px;} } @media only screen and (max-width: 350px) { #choose-arrow h2 {font-size: 55px !important; line-height: 55px !important;} #choose-arrow h2 span:nth-of-type(2) {font-size: 32px !important; line-height: 32px !important;} #choose-arrow h2 span:nth-child(3) {font-size: 65px !important; line-height: 65px !important;} #choose-arrow h2 span:nth-child(4) {font-size: 65px !important; line-height: 65px !important;} } /* Tool Selection Guide --------------------------------------------------------------------------------------------------------------------------- */ #tool-selection-guide {width: 100%; padding: 40px 0 50px 0; position: relative;} #tool-selection-guide.border-top:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #tool-selection-guide h2 {width: 100%; max-width: 545px; margin: 0 auto 35px auto; padding: 0 0 30px 0; font-size: 122px; line-height: 122px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #tool-selection-guide h2 small {font-size: 40px; line-height: 45px; display: block;} /* Tool Links ---------- */ #tool-selection-guide ul {margin: 0 0 10px 0; text-align: center; position: relative;} #tool-selection-guide ul li {width: 18%; max-width: 175px; margin: 0 3.5% 25px 3.5%; text-align: center; display: inline-block;} #tool-selection-guide ul li:first-of-type {margin-left: 0;} #tool-selection-guide ul li:last-of-type {margin-right: 0;} #tool-selection-guide ul li a {width: 175px; margin: 0 auto; display: block;} #tool-selection-guide ul li h3 {margin: 0 auto 5px auto; font-size: 45px; line-height: 50px; color: #c72027; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Image ----- */ .guide-link-image {width: 100%; height: 175px; margin: 0 0 5px 0; position: relative; display: block; overflow: hidden;} .guide-link-image img {max-width: 175px; width: 100%; height: auto;} /* Media Queries for Tool Selection Guide ---------- */ @media only screen and (max-width: 800px) { #tool-selection-guide ul li {width: 47%; max-width: 100%; margin: 0 1% 45px 1%;} #tool-selection-guide ul li:nth-of-type(odd) {clear: both;} #tool-selection-guide ul li:first-of-type {margin-left: 1%;} #tool-selection-guide ul li:last-of-type {margin-right: 1%;} } @media only screen and (max-width: 450px) { #tool-selection-guide h2 {margin: 0 auto 35px auto; font-size: 90px; line-height: 90px;} #tool-selection-guide h2 small {font-size: 32px; line-height: 37px;} #tool-selection-guide ul li {width: 100%; margin: 0 auto 45px auto; clear: both;} #tool-selection-guide ul li:first-of-type {margin-left: auto;} #tool-selection-guide ul li:last-of-type {margin-right: auto;} } /* Projects Introduction -------------------------------------------------------------------------------------------------------------------------- */ #projects-introduction {width: 100%; padding: 40px 0 30px 0; position: relative;} /* Image ---------- */ #project-image {width: 45%; height: auto; margin: 0 0 0 3%; padding: 15px 0 0 0; text-align: center; position: relative; display: block; float: left;} #project-image img {max-width: 500px; width: 100%; height: auto;} /* Copy ---------- */ #project-copy {width: 45%; margin: 0 3% 15px 0; text-align: center; position: relative; float: right;} #project-copy h2 {margin: 0 auto 5px auto; padding: 0; font-size: 66px; line-height: 71px; color: #fff; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #project-copy p {width: 85%; margin: 0 auto; padding: 15px 0 0 0; font-size: 13px; line-height: 18px; color: #cccccc; font-family: serifa_btbold, Times, serif;} #project-copy .button {margin: 0 auto 40px auto;} /* See More Projects ---------- */ /*#see-more-projects {background-color: #fff; width: 35%; padding: 10px 0; font-size: 24px; line-height: 29px; color: #c72027; text-align: center; text-transform: uppercase; border: 3px solid transparent; position: absolute; bottom: -33px; right: 9%; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: serifa_btbold, Times, serif;}*/ #see-more-projects {background-color: #fff; width: 80%; margin: 0 auto; padding: 10px 0; font-size: 24px; line-height: 29px; color: #c72027; text-align: center; text-transform: uppercase; border: 3px solid transparent; position: relative; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: serifa_btbold, Times, serif;} #see-more-projects:hover {background: none; border: 3px solid #fff; color: #fff;} /* Media Queries for Projects Introduction ---------- */ @media only screen and (max-width: 780px) { /* Image ---------- */ #project-image {width: 90%; margin: 0 auto 20px auto; padding: 15px 0 0 0; float: none; clear: both;} /* Copy ---------- */ #project-copy {width: 95%; margin: 0 auto 15px auto; float: none; clear: both;} } @media only screen and (max-width: 600px) { /* Copy ---------- */ #project-copy h2 {font-size: 55px; line-height: 61px;} } @media only screen and (max-width: 500px) { /* Copy ---------- */ #project-copy h2 {font-size: 45px; line-height: 51px;} } @media only screen and (max-width: 400px) { /* Copy ---------- */ #project-copy h2 {font-size: 35px; line-height: 41px;} } /* Retailers -------------------------------------------------------------------------------------------------------------------------------------- */ #retailers {width: 100%; padding: 70px 0 28px 0; position: relative;} /* Retailer List ---------- */ #retailers ul {clear: both;} #retailers ul li {width: 18%; margin: 0 1% 60px 1%; text-align: center; position: relative; float: left;} #retailers ul li:nth-of-type(5n+1) {clear: both;} #retailers ul li a {} /* Retailer Image ----- */ #retailers ul li .retailer-logo {height: 75px; margin: 0 0 3px 0; display: block;} #retailers ul li .retailer-logo img {max-width: 100%; width: auto; height: auto; max-height: 100%; margin: 0 auto;} #retailers ul li h3 {text-indent: -99999px; position: absolute;} #retailers ul li h4 {font-size: 8px; line-height: 12px; color: #97999b; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Media Queries for Retailers ---------- */ @media only screen and (max-width: 800px) { #retailers ul li {width: 23%; margin: 0 1% 60px 1%;} #retailers ul li:nth-of-type(5n+1) {clear: none;} #retailers ul li:nth-of-type(4n+1) {clear: both;} } @media only screen and (max-width: 650px) { #retailers ul li {width: 29.3333333%; margin: 0 2% 60px 2%;} #retailers ul li:nth-of-type(4n+1) {clear: none;} #retailers ul li:nth-of-type(3n+1) {clear: both;} } @media only screen and (max-width: 500px) { #retailers ul li {width: 46%; margin: 0 2% 60px 2%;} #retailers ul li:nth-of-type(3n+1) {clear: none;} #retailers ul li:nth-of-type(2n+1) {clear: both;} } /* Careers ---------------------------------------------------------------------------------------------------------------------------------------- */ /* Career Listing ------------------------------------------------------ */ #career-listing {width: 100%; margin: 48px auto 0 auto; padding: 60px 0 28px 0; position: relative; clear: both;} #career-listing.border-top:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} /* Articles ------------------------------------------------------------ */ #career-listing article {margin: 0 0 90px 0; position: relative; display: block;} #career-listing article h3 {margin: 0 0 30px 0; font-size: 42px; line-height: 47px; color: #c82127; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #career-listing article h3 a {color: #c82127;} /* Listing Detail ---------- */ .listing-detail {margin: 0 0 27px 0;} .listing-detail h4 {margin: 0 0 5px 0; font-size: 17px; line-height: 22px; color: #c82127; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Listing Detail ---------- */ .job-description {margin: 0 0 25px 0;} .job-description h3 {margin: 0 0 5px 0 !important; font-size: 17px !important; line-height: 22px !important; color: #690923 !important; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} .job-description ul {margin: 0 0 40px 0;} .job-description ul li {margin: 0 0 5px 0; font-size: 17px; line-height: 22px; color: #666666; font-family: futura_ltbold, Helvetica, sans-serif;} .job-description ul li span {padding: 0 5px 0 0; color: #c82127; display: inline-block;} /* Media Queries for Careers ---------- */ @media only screen and (max-width: 400px) { #career-listing article h3 {margin: 0 0 30px 0; font-size: 35px; line-height: 40px;} } /* Career Inside Page ----------------------------------------------------------------------------------------------------------------------------- */ #career-details {margin: 0 auto 62px auto; padding: 55px 0 0 0; position: relative;} #career-details h3 {margin: 0 0 50px 0; font-size: 58px; line-height: 63px; color: #c82127; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Listing Detail ---------- */ #listing-detail {margin: 0 0 27px 0;} #listing-detail h3 {margin: 0 0 30px 0; font-size: 42px; line-height: 47px; color: #c82127; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #listing-detail h4 {margin: 0 0 5px 0; font-size: 17px; line-height: 22px; color: #c82127; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} /* Listing Detail ---------- */ #job-description {margin: 0 0 25px 0;} #job-description h3 {margin: 0 0 5px 0 !important; font-size: 17px !important; line-height: 22px !important; color: #690923 !important; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #job-description ul {margin: 0 0 40px 0;} #job-description ul li {margin: 0 0 5px 0; font-size: 17px; line-height: 22px; color: #666666; font-family: futura_ltbold, Helvetica, sans-serif;} #job-description ul li span {padding: 0 5px 0 0; color: #c82127; display: inline-block;} /* Scope of Work ---------- */ #scope-of-work {max-width: 830px; margin: 0 auto 30px auto; text-align: left; position: relative;} #scope-of-work h3 {margin: 0 0 8px 0 !important; font-size: 17px !important; line-height: 22px !important; color: #c82127 !important; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #scope-of-work p {margin: 0 0 25px 0; font-size: 17px; line-height: 30px; color: #666666; font-family: serifaroman, Times, serif;} /* Key Responsibilities ---------- */ #key-responsibilities {max-width: 830px; margin: 0 auto 30px auto; text-align: left; position: relative;} #key-responsibilities h3 {margin: 0 0 10px 0 !important; font-size: 17px !important; line-height: 22px !important; color: #c82127 !important; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #key-responsibilities h4 {margin: 0 0 8px 0 !important; font-size: 17px !important; line-height: 22px !important; color: #690923 !important; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #key-responsibilities ul {margin: 0 0 40px 0; padding: 0 0 0 15px; clear: both;} #key-responsibilities ul li {margin: 0 0 8px 0; font-size: 17px; line-height: 30px; color: #666666; position: relative; font-family: serifaroman, Times, serif;} #key-responsibilities ul li:before {content: ''; background-color: #c82127; width: 3px; height: 3px; border-radius: 50%; position: absolute; top: 14px; left: -15px;} /* Career Actions ---------- */ #career-actions {margin: 0 auto 75px auto; text-align: center; position: relative;} #career-actions .button {margin: 0 auto 10px auto; max-width: 175px; display: block; clear: both;} /* Apply Now Overlay ---------- */ #apply-now-overlay {background-color: #fff; width: 90%; max-width: 550px; margin: 0 auto; padding: 25px 29px; display: none; cursor: auto;} #apply-now-overlay .close-overlay {margin: 0 0 0 0; font-size: 30px; line-height: 30px; color: #c82127; float: right; clear: both; font-family: serifa_btbold, Times, serif;} #apply-now-overlay h2 {margin: 0 0 30px 0; padding: 0 0 15px 0; font-size: 30px; line-height: 35px; color: #c82127; text-align: center; text-transform: uppercase; border-bottom: 4px solid #c82127; display: block; clear: both; font-family: futura_ltbold, Helvetica, sans-serif;} /* Apply Form ---------- */ #apply-now-overlay .gform_wrapper {width: 95% !important; margin: 0 auto !important; font-weight: normal !important;} /* Labels ----- */ #apply-now-overlay .gfield_label {margin-bottom: 0 !important; font-size: 16px !important; line-height: 21px !important; color: #690923 !important; text-transform: uppercase; font-weight: normal !important; font-family: futura_ltbold, Helvetica, sans-serif;} #apply-now-overlay .show-label .gfield_label {display: block;} #apply-now-overlay .gfield_description {font-family: serifaroman, Times, serif;} /* Fields ----- */ #apply-now-overlay .gfield {padding-right: 0 !important;} /* Input ----- */ #apply-now-overlay .gfield input[type="text"],#apply-now-overlay .gfield input[type="email"],#apply-now-overlay .gfield input[type="tel"],#apply-now-overlay .gfield input[type="password"],#apply-now-overlay .gfield input[type="url"] {width: 100%; margin: 0 auto 15px auto !important; padding: 7px 5px !important; font-size: 22px; line-height: 27px; color: #c5c5c5; border: none; border: 1px solid #d7d7da; position: relative; -webkit-appearance: none; border-radius: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: serifa_btbold, Times, serif;} /* Hover */ #apply-now-overlay .gfield input[type="text"]:hover,#apply-now-overlay .gfield input[type="email"]:hover,#apply-now-overlay .gfield input[type="tel"]:hover,#apply-now-overlay .gfield input[type="password"]:hover,#apply-now-overlay .gfield input[type="url"]:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ #apply-now-overlay .gfield input[type="text"]:active,#apply-now-overlay .gfield input[type="email"]:active,#apply-now-overlay .gfield input[type="tel"]:active,#apply-now-overlay .gfield input[type="password"]:active,#apply-now-overlay .gfield input[type="url"]:active{color: #707070; border: 1px solid #6a6a6a;} /* Focus */ #apply-now-overlay .gfield input[type="text"]:focus,#apply-now-overlay .gfield input[type="email"]:focus,#apply-now-overlay .gfield input[type="tel"]:focus,#apply-now-overlay .gfield input[type="password"]:focus,#apply-now-overlay .gfield input[type="url"]:focus {color: #707070; border: 1px solid #6a6a6a;} /* Error */ #apply-now-overlay .gfield_error input[type="text"],#apply-now-overlay .gfield_error input[type="email"],#apply-now-overlay .gfield_error input[type="tel"],#apply-now-overlay .gfield_error input[type="password"],#apply-now-overlay .gfield_error input[type="url"] {border: 1px dotted #7f0303;} /* File Upload Fields ----- */ #apply-now-overlay .file-upload {margin-bottom: 40px;} #apply-now-overlay .gform_wrapper .gform_fileupload_multifile .gform_drop_area {margin-bottom: 5px !important;} #apply-now-overlay .gform_fileupload_multifile {font-family: serifaroman, Times, serif;} #apply-now-overlay .screen-reader-text {font-family: serifaroman, Times, serif;} /* Form Footer ----- */ #apply-now-overlay .gform_footer {text-align: center;} /* Buttons ----- */ #apply-now-overlay .gform_wrapper .button {background-color: #dd1a32; width: auto; height: auto; margin: 0 auto !important; padding: 7px 5%; font-size: 22px; line-height: 27px; color: #fff; text-align: center; text-transform: uppercase; border: none; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block; cursor: pointer; z-index: 1; font-family: futura_ltbold, Helvetica, sans-serif;} /* Hover ----- */ #apply-now-overlay .gform_wrapper .button:hover {background-color: #6a0020;} /* Brand Sections --------------------------------------------------------------------------------------------------------------------------------- */ #brand-sections {width: 100%; margin: 150px 0 0 0; position: relative; clear: both;} #brand-sections.active {margin: 75px 0 0 0;} /* Brand Section ------------------------------------------------------- */ .brand-section {width: 100%; height: 60vh; min-height: 500px; padding: 0; text-align: center; position: relative;} .brand-section .wrap {height: 100%; display: block;} .brand-section:nth-child(even) {height: 20vh; min-height: 400px;} /* Bottom Gradient on Odd sections */ .brand-section:nth-child(odd):after {content: ''; width: 100%; height: 70px; position: absolute; bottom: 0; left: 0; z-index: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,2d2d2d+100&0+0,0.35+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(45,45,45,0.35) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(45,45,45,0.35) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#592d2d2d',GradientType=0 ); /* IE6-9 */ } /* Image Overlay ---------- */ .brand-section:before {content: ''; background-color: rgba(200,33,39,.90); width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .brand-section:nth-child(even):before {background-color: rgba(255,255,255,.80);} /* Brand Section Copy ---------- */ .brand-section h2 {margin: 0 auto 30px auto; padding: 0; font-size: 36px; line-height: 41px; color: #fff; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} .brand-section p {max-width: 750px; margin: 0 auto; font-size: 24px; line-height: 30px; color: #fff; font-family: serifaroman, Times, serif;} /* Even Sections ----- */ .brand-section:nth-child(even) h2 {color: #c72027;} .brand-section:nth-child(even) p {color: #c72027;} /* Media Queries for Brand Sections ---------- */ @media only screen and (max-width: 600px) { #brand-sections {margin: 67px 0 0 0;} /* Brand Section Copy ---------- */ .brand-section h2 {margin: 0 auto 20px auto; font-size: 30px; line-height: 35px;} .brand-section p {font-size: 20px; line-height: 26px;} } @media only screen and (max-width: 600px) { /* Brand Section Copy ---------- */ .brand-section h2 {margin: 0 auto 15px auto; font-size: 28px; line-height: 33px;} .brand-section p {font-size: 17px; line-height: 23px;} } /* Videos ----------------------------------------------------------------------------------------------------------------------------------------- */ #video-listing {margin: 0 auto 40px auto; padding: 30px 0 0 0; position: relative;} #video-listing li {width: 49%; margin: 0 0 45px 0; position: relative; display: block; float: left;} #video-listing li:nth-child(even) {float: right;} #video-listing li:nth-child(odd) {clear: both;} #video-listing li a {display: block; position: relative;} /* Video Intro ---------- */ #video-listing li a .video-intro {width: 100%; height: 250px; margin: 0 auto; padding: 0; text-align: center; position: relative; display: block; z-index: 2;} #video-listing li a .video-intro:after {content: ''; background-color: rgba(200,33,39,.80); width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: block; opacity: 0; z-index: 0;} #video-listing li a .video-intro .vert-center {position: relative; z-index: 5;} #video-listing li a .video-intro i {font-size: 28px; line-height: 52px; color: #fff; display: inline-block; position: relative; clear: both; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; z-index: 5;} #video-listing li a .video-intro i:after {content: ''; width: 48px; height: 48px; border: 3px solid #fff; border-radius: 50%; position: absolute; top: 0; left: -19px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; z-index: -1;} /* Video Info ---------- */ #video-listing li a .video-info {margin: 0; padding: 15px 0 0 0; clear: both;} #video-listing li a .video-info h3 {padding: 0 0 15px 0; font-size: 22px; line-height: 27px; color: #c72027; text-transform: uppercase; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #video-listing li a .video-info h3:after {content: ''; background-color: #c72027; width: 100%; height: 4px; position: absolute; bottom: 0; left: 0;} #video-listing li a .video-info h3 span {font-size: 16px; line-height: 21px; display: block; clear: both; font-family: futura_ltregular, Helvetica, sans-serif;} /* Hover ----- */ #video-listing li a:hover .video-intro:after {opacity: 1;} #video-listing li a:hover .video-intro i {color: rgba(200,33,39,.80);} #video-listing li a:hover .video-intro i:after {background-color: #fff;} /* Media Queries for Videos ---------- */ @media only screen and (max-width: 700px) { #video-listing li {width: 100%; margin: 0 0 30px 0; float: none; clear: both;} #video-listing li:nth-child(even) {float: none;} } /* Page Copy -------------------------------------------------------------------------------------------------------------------------------------- */ #page-copy {max-width: 800px; margin: 0 auto; padding: 50px 0 0 0; text-align: center; position: relative;} #page-copy.no-hero {margin: 150px auto 0 auto;} #page-copy.no-hero.active {margin: 75px auto 0 auto;} #page-copy h3 {margin: 0 0 30px 0; font-size: 60px; line-height: 65px; color: #c72027; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #page-copy h4 {margin: 0 0 30px 0; font-size: 55px; line-height: 60px; color: #c72027; text-transform: uppercase; font-family: futura_ltbold, Helvetica, sans-serif;} #page-copy h5 {margin: 0 0 30px 0; font-size: 24px; line-height: 30px; color: #666666; font-family: serifa_btbold, Times, serif;} #page-copy h6 {margin: 0 0 30px 0; font-size: 20px; line-height: 26px; color: #666666; font-family: serifa_btbold, Times, serif;} #page-copy p {margin: 0 0 30px 0; font-size: 17px; line-height: 30px; color: #666666; font-family: serifaroman, Times, serif;} #page-copy p a {text-decoration: underline;} #page-copy a {color: #c72027;} #page-copy ul {padding: 0 0 0 20px; list-style: disc;} #page-copy ul li {margin: 0 0 15px 0 !important; font-size: 17px; line-height: 25px; color: #666666; font-family: serifaroman, Times, serif;} #page-copy ol {padding: 0 0 0 20px; list-style: decimal;} #page-copy ol li {margin: 0 0 25px 0 !important; font-size: 17px; line-height: 25px; color: #666666; font-family: serifaroman, Times, serif;} #page-copy hr {background-color: #c72027; width: 95%; max-width: 900px; height: 4px; margin: 55px 0 55px 0; border-radius: 15px; position: relative; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: block;} #page-copy img {max-width: 100%; height: auto;} #page-copy #pdf-wrap{height: 0; margin: 0 auto 25px auto; padding-top: 0; padding-bottom: 129.4%; position: relative; clear: both;} #page-copy object, #page-copy iframe {width: 100%; height: 100%; margin: 0 0 25px 0; border: none; position: absolute; display: block;} /* Media Queries for Page Copy ---------- */ @media only screen and (max-width: 700px) { #page-copy h3 {margin: 0 0 30px 0; font-size: 50px; line-height: 55px;} #page-copy h4 {margin: 0 0 30px 0; font-size: 45px; line-height: 50px;} } @media only screen and (max-width: 600px) { #page-copy.no-hero {margin: 50px auto 0 auto;} #page-copy h3 {margin: 0 0 30px 0; font-size: 40px; line-height: 45px;} #page-copy h4 {margin: 0 0 30px 0; font-size: 35px; line-height: 40px;} } @media only screen and (max-width: 500px) { #page-copy h3 {margin: 0 0 30px 0; font-size: 35px; line-height: 40px;} #page-copy h4 {margin: 0 0 30px 0; font-size: 30px; line-height: 35px;} } /* PDF Attachment Page ---------------------------------------------------------------------------------------------------------------------------- */ #page-copy .pdf-actions {margin: 0 auto 25px auto; clear: both;} #page-copy .pdf-actions.bottom {margin: 0 0 50px 0;} #page-copy .pdf-actions ul {padding: 0 !important; list-style: none;} #page-copy .pdf-actions ul li {width: 45%; margin: 0 !important; display: inline-block;} #page-copy .pdf-actions ul li a {color: #fff !important;} /* Media Queries for PDF Attachment Page ---------- */ @media only screen and (max-width: 750px) { #page-copy .pdf-actions ul li a {font-size: 18px;} } @media only screen and (max-width: 610px) { #page-copy .pdf-actions ul li {width: 90%; margin: 0 auto 10px auto !important; display: block; clear: both;} #page-copy .pdf-actions ul li a {display: block;} } /* Instagram Feed --------------------------------------------------------------------------------------------------------------------------------- */ #instagram-feed {width: 100%; padding: 60px 0 50px 0; position: relative;} #instagram-feed.border-top:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #instagram-feed h2 {margin: 0 auto 25px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #instagram-feed h3 {margin: 0 auto 35px auto; font-size: 32px; line-height: 37px; color: #c72027; text-align: center; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #instagram-feed h3 a {color: #c72027;} /* Feed ---------- */ #instagram-feed ul:not(.slick-dots) {width: 80%; margin: 0 auto 40px auto; padding: 10px 0 0 0; position: relative; clear: both;} #instagram-feed ul:not(.slick-dots) li {margin: 0 0% 15px 0%; width: 235px; height: 235px; display: block; overflow: hidden; float: left;} #instagram-feed ul:not(.slick-dots) li a {width: 94%; height: 100%; margin: 0 auto; display: block;} /* Image ----- */ #instagram-feed ul:not(.slick-dots) li a img {max-width: 100%; width: 100%; height: auto; margin: 0 auto;} /* Slick Dots ---------- */ #instagram-feed ul.slick-dots {width: 80%; margin: 0 auto 0 auto; padding: 10px 0 0 0; position: relative; clear: both;} #instagram-feed ul.slick-dots li {margin: 0 0 15px 0%; width: auto !important; height: auto !important; display: inline-block; float: none;} #instagram-feed ul.slick-dots li button {display: block;} /* Follow Button ----- */ #instagram-feed .follow-button {background-color: #dd1a32; width: 90%; max-width: 315px; margin: 0 auto; padding: 7px 5px; font-size: 22px; line-height: 27px; color: #fff; text-transform: uppercase; text-align: center; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #instagram-feed .follow-button:hover {background-color: #76241f;} /* Media Queries for Instagram Feed ---------- */ @media only screen and (max-width: 650px) { /* Feed ---------- */ #instagram-feed ul:not(.slick-dots) {width: 100%;} #instagram-feed ul:not(.slick-dots) li {margin: 0 0 18px 0;} } @media only screen and (max-width: 530px) { /* Feed ---------- */ #instagram-feed ul:not(.slick-dots) li {margin: 0 0 15px 0; width: 200px; height: 200px;} } @media only screen and (max-width: 450px) { #instagram-feed h2 {font-size: 40px; line-height: 45px;} #instagram-feed h3 {font-size: 28px; line-height: 33px;} /* Feed ---------- */ #instagram-feed ul:not(.slick-dots) li {margin: 0 0 10px 0; width: 175px; height: 175px;} } @media only screen and (max-width: 400px) { /* Feed ---------- */ #instagram-feed ul:not(.slick-dots) li {margin: 0 0 5px 0; width: 150px; height: 150px;} } /* Brand Callout ---------------------------------------------------------------------------------------------------------------------------------- */ #brand-callout {width: 100%; padding: 63px 0 54px 0; position: relative;} #brand-callout.link {padding: 0;} #brand-callout h3 {width: 70%; margin: 0 auto 25px auto; font-size: 36px; line-height: 41px; color: #fff; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} #brand-callout p {width: 78%; margin: 0 auto 20px auto; font-size: 24px; line-height: 29px; color: #fff; text-align: center; position: relative; font-family: serifa_btbold, Times, serif;} #brand-callout a {width: 100%; height: 100%; padding: 63px 0 54px 0; position: relative; display: block;} /* Media Queries for Brand Callout ---------- */ @media only screen and (max-width: 600px) { #brand-callout h3 {width: 80%; margin: 0 auto 25px auto; font-size: 30px; line-height: 35px;} #brand-callout p {width: 90%; margin: 0 auto 20px auto; font-size: 18px; line-height: 23px;} #brand-callout p br {display: none;} } @media only screen and (max-width: 450px) { #brand-callout h3 {width: 80%; margin: 0 auto 25px auto; font-size: 25px; line-height: 30px;} #brand-callout p {width: 90%; margin: 0 auto 20px auto; font-size: 16px; line-height: 21px;} } /* Advertisement ---------------------------------------------------------------------------------------------------------------------------------- */ #advertisement {width: 100%; padding: 25px 0 50px 0; text-align: center; position: relative;} #advertisement img {max-width: 100%; width: auto; height: auto;} /* Pinterest Feed --------------------------------------------------------------------------------------------------------------------------------- */ #pinterest-feed {width: 100%; padding: 30px 0 120px 0; position: relative;} #pinterest-feed.border-top {padding: 100px 0 120px 0;} #pinterest-feed.border-top:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #pinterest-feed h2 {margin: 0 auto 40px auto; font-size: 48px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} /* Feed ---------- */ #pinterest-feed nav {background-color: #e9e9e9; margin: 0 auto 40px auto; padding: 10px 0; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; position: relative; clear: both;} #pinterest-feed ul {} #pinterest-feed ul li {width: 19%; margin: 0 .5%; display: block; float: left;} #pinterest-feed ul li a {} #pinterest-feed ul li > span {max-width: 100% !important; width: 100% !important;} /* Follow Button ----- */ #pinterest-feed .follow-button {background-color: #dd1a32; width: 90%; max-width: 315px; margin: 0 auto; padding: 7px 5px; font-size: 22px; line-height: 27px; color: #fff; text-transform: uppercase; text-align: center; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #pinterest-feed .follow-button:hover {background-color: #76241f;} /* Media Queries for Pinterest ---------- */ @media only screen and (max-width: 850px) { /* Feed ---------- */ #pinterest-feed ul li {width: 48%; margin: 0 1% 10px 1%; display: block; float: left;} #pinterest-feed ul li:last-of-type {width: 98%; margin: 0 auto 10px auto; display: block; float: none; clear: both;} } @media only screen and (max-width: 450px) { #pinterest-feed h2 {font-size: 40px; line-height: 45px;} /* Feed ---------- */ #pinterest-feed ul li {width: 100%; margin: 0 0 10px 0; display: block; float: none; clear: both;} #pinterest-feed ul li:last-of-type {width: 100%; margin: 0 0 10px 0; display: block; float: none; clear: both;} } /* Email Signup ----------------------------------------------------------------------------------------------------------------------------------- */ #email-signup {width: 100%; padding: 105px 0 160px 0; position: relative;} #email-signup.border-top:before {content: ''; background-color: #c72027; width: 95%; max-width: 900px; height: 4px; border-radius: 15px; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);} #email-signup h2 {margin: 0 auto 20px auto; font-size: 49px; line-height: 53px; color: #c72027; text-align: center; text-transform: uppercase; position: relative; font-family: futura_ltbold, Helvetica, sans-serif;} /* Form --- */ #gform_wrapper_1 {width: 95%; max-width: 410px; margin: 0 auto !important; padding: 0 !important; clear: both;} #gform_wrapper_1 .gform_body {width: calc(98% - 39px) !important; margin: 0 1% 0 0 !important; padding: 0 !important; position: relative; float: left; clear: none;} #gform_wrapper_1 .gform_body ul li {margin-bottom: 0 !important;} #gform_wrapper_1 .gform_footer {width: 39px !important; margin: 0 !important; padding: 0 !important; position: relative; float: right; clear: none;} /* Label */ #gform_wrapper_1 .gfield_label {display: none;} /* Input */ #gform_wrapper_1 #input_1_1 {width: 100% !important; height: 35px !important; margin: 0 !important; padding: 7px 0 7px 0 !important; font-size: 18px !important; line-height: 23px !important; color: #c72027 !important; border: none !important; position: relative !important; float: right; -webkit-appearance: none !important; border-radius: 0 !important; font-family: serifa_btbold, Times, serif !important;} #gform_wrapper_1 #field_1_1 {height: 38px !important; display: block !important;} #gform_wrapper_1 #field_1_1:after{content: ''; background-color: #c72027; width: 100%; height: 5px; border-radius: 15px; position: absolute; bottom: 0; left: 0;} /* Submit */ #gform_submit_button_1 {background: url(images/arrow-chevron-red.svg) center center no-repeat; width: 39px !important; height: 39px !important; margin: 0; padding: 0 !important; font-size: 13px !important; color: #fff; text-transform: uppercase; text-align: center; border: none !important; outline: none; cursor: pointer; text-indent: -99999px; -webkit-appearance: none; border-radius: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: block !important;} /* Validation Error ---------- */ #gform_wrapper_1 .validation_error {display: none;} #field_1_1.gfield_error {background: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important;} /* Field Error ---------- */ #field_1_1.gfield_error #input_1_1 {background-color: #c72027 !important; color: #fff !important; border: none !important;} #field_1_1 .validation_message {margin: 0 0 0 0 !important; padding: 0 !important; font-size: 15px !important; color: #ef5151 !important; font-weight: normal !important; font-family: serifa_btbold, Times, serif !important;} /* Placeholder ---------- */ #field_1_1.gfield_error #input_1_1::-webkit-input-placeholder {color: #fff; opacity: .65;} #field_1_1.gfield_error #input_1_1:-moz-placeholder {color: #fff; opacity: .65;} #field_1_1.gfield_error #input_1_1::-moz-placeholder {color: #fff; opacity: .65;} #field_1_1.gfield_error #input_1_1:-ms-input-placeholder {color: #fff; opacity: .65;} #gform_wrapper_1 .top_label .gfield_description.validation_message, .gform_wrapper .gfield_description.validation_message {padding: 6px 0 0 0 !important;} #field_1_1.gfield.gfield_error.gfield_contains_required {margin: 0 !important; padding: 0 !important;} #field_1_1.gfield.gfield_error.gfield_contains_required div.ginput_container {margin: 0 !important;} #gform_wrapper_1 .top_label .gfield_error .ginput_container {max-width: none !important;} #gform_wrapper_1 label.gfield_label + div.ginput_container {margin: 0 !important;} /* Loading Spinner */ #gform_ajax_spinner_1 {background-color: #fff; padding: 10px 15px; position: absolute !important; top: -5px !important; left: -5px !important; z-index: 100;} /* Confirmation Message */ #gform_confirmation_message_1 {background-color: #dff0d8 !important; margin: 0 !important; padding: 15px 0 !important; font-size: 16px !important; line-height: 21px !important; color: #3c763d !important; text-align: center !important; border: 1px solid #d6e9c6 !important; display: block !important; position: relative !important; font-family: serifa_btbold, Times, serif !important;} /* Placeholder Copy ---------- */ ::-webkit-input-placeholder {color: #c72027; opacity: .45;} :-moz-placeholder {color: #c72027; opacity: .45;} ::-moz-placeholder {color: #c72027; opacity: .45;} :-ms-input-placeholder {color: #c72027; opacity: .45;} /* Media Queries for Email Signup ---------- */ @media only screen and (max-width: 500px) { #email-signup h2 {font-size: 40px; line-height: 46px;} } @media only screen and (max-width: 400px) { #email-signup h2 {font-size: 32px; line-height: 38px;} } /* Footer ----------------------------------------------------------------------------------------------------------------------------------------- */ footer {width: 100%; padding: 40px 0 25px 0; display: block; position: relative; overflow: hidden; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaebeb+0,eaebeb+24,e3e4e4+39,d8d9d9+55,d5d6d6+56,cdcece+68,cacbcb+70,bfc0c0+84,b3b4b4+96,b1b1b1+99,acacac+99,bababa+100 */ background: rgb(234,235,235); /* Old browsers */ background: -moz-linear-gradient(top, rgba(234,235,235,1) 0%, rgba(234,235,235,1) 24%, rgba(227,228,228,1) 39%, rgba(216,217,217,1) 55%, rgba(213,214,214,1) 56%, rgba(205,206,206,1) 68%, rgba(202,203,203,1) 70%, rgba(191,192,192,1) 84%, rgba(179,180,180,1) 96%, rgba(177,177,177,1) 99%, rgba(172,172,172,1) 99%, rgba(186,186,186,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(234,235,235,1) 0%,rgba(234,235,235,1) 24%,rgba(227,228,228,1) 39%,rgba(216,217,217,1) 55%,rgba(213,214,214,1) 56%,rgba(205,206,206,1) 68%,rgba(202,203,203,1) 70%,rgba(191,192,192,1) 84%,rgba(179,180,180,1) 96%,rgba(177,177,177,1) 99%,rgba(172,172,172,1) 99%,rgba(186,186,186,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(234,235,235,1) 0%,rgba(234,235,235,1) 24%,rgba(227,228,228,1) 39%,rgba(216,217,217,1) 55%,rgba(213,214,214,1) 56%,rgba(205,206,206,1) 68%,rgba(202,203,203,1) 70%,rgba(191,192,192,1) 84%,rgba(179,180,180,1) 96%,rgba(177,177,177,1) 99%,rgba(172,172,172,1) 99%,rgba(186,186,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaebeb', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */ } /* Before / After ----- */ footer:before {content: ''; background-color: #c72027; width: 50%; height: 10px; position: absolute; top: 0; left: 0; z-index: 0;} footer:after {content: ''; background-color: #76241f; width: 55%; height: 10px; position: absolute; top: 0; right: calc(-5% + 5px); -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg); z-index: 2;} /* Social Media Navigation --------------------------------------------- */ #footer-social {margin: 0 auto 40px auto; text-align: center;} #footer-social ul {margin: 0 auto;} #footer-social ul li {margin: 0 1%; display: inline-block;} #footer-social ul li a {font-size: 25px; line-height: 25px; color: #ca2129;} /* Footer Site Navigation ---------------------------------------------- */ #footer-navigation {margin: 0 auto 35px auto; text-align: center;} #footer-navigation ul {margin: 0 auto 25px auto;} #footer-navigation ul li {margin: 0 1% 0 0; padding: 0 1% 0 0; line-height: 15px; border-right: 2px solid #ca2129; display: inline-block;} #footer-navigation ul li:last-of-type {border: none;} #footer-navigation ul li a {font-size: 13px; line-height: 15px; color: #333; border-bottom: 2px solid transparent; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: futura_ltbold, Helvetica, sans-serif;} #footer-navigation ul li a:hover {border-bottom: 2px solid #333;} /* Active ----- */ #footer-navigation ul li.active a {border-bottom: 2px solid #333;} /* Here ----- */ #footer-navigation ul li.current_page_parent a, #footer-navigation ul li.current_page_item a {border-bottom: 2px solid #333;} /* Footer Logo --------------------------------------------------------- */ #footer-logo {width: 180px; margin: 0 auto 18px auto; text-align: center; position: relative; display: block;} /* Copyright ----------------------------------------------------------- */ #copyright {margin: 0 auto; font-size: 13px; line-height: 15px; color: #333; text-align: center; position: relative; display: block; font-family: serifa_btbold, Times, serif;} /* Media Queries for Footer ---------- */ @media only screen and (max-width: 700px) { /* Footer Site Navigation ---------------------------------------------- */ #footer-navigation ul li {margin: 0 0 12px 0; padding: 0; border-right: none; display: block; clear: both;} } /* Button ----------------------------------------------------------------------------------------------------------------------------------------- */ .button {width: 85%; height: 38px; margin: 0 auto; padding: 0; color: #fff; text-align: center; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: block; z-index: 1;} /* Before / After ---------- */ /* White Chevron */ .button.white:before {content: ''; background-color: #76241f; width: 49%; height: 7px; border-radius: 50px 0 0 50px; position: absolute; top: calc(50% - 3px); left: 0; z-index: 0;} .button.white:after {content: ''; background-color: #76241f; width: 49%; height: 7px; border-radius: 0 50px 50px 0; position: absolute; top: calc(50% - 3px); right: 0; z-index: 0;} /* Red Chevron */ .button.red:before {content: ''; background-color: #c72027; width: 49%; height: 7px; border-radius: 50px 0 0 50px; position: absolute; top: calc(50% - 3px); left: 0; z-index: 0;} .button.red:after {content: ''; background-color: #c72027; width: 49%; height: 7px; border-radius: 0 50px 50px 0; position: absolute; top: calc(50% - 3px); right: 0; z-index: 0;} /* Image ---------- */ .button img {width: 38px; height: 38px; border-radius: 50%; position: relative; z-index: 1;} .button.cart img {width: 65px; height: 65px; margin: -15px 0 0 0; border-radius: 0;} /* White Chevron */ .button.white img {background-color: #bd2227; -webkit-box-shadow: 0 0 10px 10px rgba(188,33,37,.75); box-shadow: 0 0 10px 10px rgba(188,33,37,.75);} /* Red Chevron */ .button.red img {background-color: #fff; -webkit-box-shadow: 0 0 10px 10px rgba(255,255,255,.75); box-shadow: 0 0 10px 10px rgba(255,255,255,.75);} /* Small ---------- */ .button.small:before {content: ''; height: 4px; top: calc(50% - 8px);} .button.small:after {content: ''; height: 4px; top: calc(50% - 8px);} .button.small img {width: 25px; height: 25px;} /* Cart ----- */ .button.cart {margin: 20px auto 25px auto !important;} /* Outlined Button -------------------------------------------------------------------------------------------------------------------------------- */ .button.outlined {width: auto; height: auto; margin: 0 auto; padding: 8px 5%; font-size: 22px; line-height: 27px; color: #fff; text-align: center; text-transform: uppercase; border: 4px solid #fff; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block; z-index: 1; cursor: pointer; font-family: futura_ltbold, Helvetica, sans-serif;} /* Hover ---------- */ .button.outlined:hover {background-color: #fff; color: #bf2026;} /* Solid Button ----------------------------------------------------------------------------------------------------------------------------------- */ .button.solid {background-color: #dd1a32; width: auto; height: auto; margin: 0 auto; padding: 7px 5%; font-size: 22px; line-height: 27px; color: #fff; text-align: center; text-transform: uppercase; border: none; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block; z-index: 1; cursor: pointer; font-family: futura_ltbold, Helvetica, sans-serif;} .button.solid.padding {padding: 12px 5%;} /* Hover ---------- */ .button.solid:hover {background-color: #6a0020;} /* Circle Button ---------------------------------------------------------------------------------------------------------------------------------- */ .button.circle {background-color: #dd1a32; width: 50px !important; height: 50px !important; margin: 0 auto; padding: 0 !important; font-size: 22px; line-height: 49px; color: #fff; text-align: center; text-transform: uppercase; border: none; border-radius: 50%; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block; z-index: 1; cursor: pointer; overflow: hidden; font-family: futura_ltbold, Helvetica, sans-serif;} /* Hover ---------- */ .button.circle:hover {background-color: #6a0020;} /* Forms ------------------------------------------------------------------------------------------------------------------------------------------ */ .gform_body ul {margin: 0 !important; padding: 0 !important;} .gform_body ul li {margin: 0 0 25px 0 !important;} .gfield {margin-top: 0 !important; padding-left: 0 !important;} /* Labels ----- */ .gfield_label {margin-bottom: 0 !important; font-size: 16px !important; line-height: 21px !important; color: #690923 !important; text-transform: uppercase; font-weight: normal !important; font-family: futura_ltbold, Helvetica, sans-serif;} .gfield_description {padding: 0 !important; font-family: serifaroman, Times, serif;} /* Fields ----- */ .gfield {padding-right: 0 !important;} /* AJAX loading image ----- */ .gform_footer {position: relative;} .gform_ajax_spinner {position: relative !important; top: 9px !important; right: 0px !important; z-index: 100;} /* Password Strength ----- */ .gfield_password_strength {color: #707070;} /* Input ----- */ .gfield input[type="text"], .gfield input[type="email"], .gfield input[type="tel"], .gfield input[type="password"], .gfield input[type="url"] {width: calc(100% - 16px) !important; margin: 0 auto 5px auto !important; padding: 7px 8px !important; font-size: 22px; line-height: 27px; color: #c5c5c5; border: none; border: 1px solid #d7d7da; position: relative; -webkit-appearance: none; border-radius: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: serifa_btbold, Times, serif;} /* Hover */ .gfield input[type="text"]:hover, .gfield input[type="email"]:hover, .gfield input[type="tel"]:hover, .gfield input[type="password"]:hover, .gfield input[type="url"]:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ .gfield input[type="text"]:active, .gfield input[type="email"]:active, .gfield input[type="tel"]:active, .gfield input[type="password"]:active, .gfield input[type="url"]:active{color: #707070; border: 1px solid #6a6a6a;} /* Focus */ .gfield input[type="text"]:focus, .gfield input[type="email"]:focus, .gfield input[type="tel"]:focus, .gfield input[type="password"]:focus, .gfield input[type="url"]:focus {color: #707070; border: 1px solid #6a6a6a;} /* Error */ .gfield_error input[type="text"], .gfield_error input[type="email"], .gfield_error input[type="tel"], .gfield_error input[type="password"], .gfield_error input[type="url"] {border: 1px dotted #7f0303;} /* Textarea ----- */ .gfield textarea {min-width: calc(100% - 16px); max-width: calc(100% - 16px); min-height: 100px; margin: 0; padding: 7px 8px !important; font-size: 16px; line-height: 20px; color: #c5c5c5; border: none; border: 1px solid #d7d7da; position: relative; -webkit-appearance: none; border-radius: 0; position: relative; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover */ .gfield textarea:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ .gfield textarea:active {color: #707070; border: 1px solid #6a6a6a;} /* Focus */ .gfield textarea:focus {color: #707070; border: 1px solid #6a6a6a !important;} /* Error */ .gfield_error textarea {border: 1px dashed #7f0303 !important;} /* Select ----- */ .gfield select {background: url(images/dropdown-arrow.png) right center no-repeat #fff; width: calc(100% - 16px) !important; margin: 0 0 5px 0 !important; padding: 7px 8px !important; font-size: 22px; line-height: 27px; color: #707070; border: 0; border-radius: 0; border: 1px solid #d7d7da; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-family: serifa_btbold, Times, serif;} /* File Upload Fields ----- */ .file-upload {margin-bottom: 40px;} .gform_wrapper .gform_fileupload_multifile .gform_drop_area {margin-bottom: 5px !important;} .gform_fileupload_multifile {font-family: serifaroman, Times, serif;} .screen-reader-text {font-family: serifaroman, Times, serif;} /* Submit Button ----- */ .gform_button.button {background-color: #dd1a32; width: auto !important; height: auto; margin: 0 auto !important; padding: 7px 5%; font-size: 22px; line-height: 27px; color: #fff; text-align: center; text-transform: uppercase; border: none; border-radius: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: inline-block; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; z-index: 1; font-family: futura_ltbold, Helvetica, sans-serif;} /* Hover ----- */ .gform_button.button:hover {background-color: #6a0020;} /* Success Message ----- */ .gform_confirmation_message {background-color: #dff0d8 !important; margin: 0 auto 20px auto; padding: 15px 3% 15px 3% !important; border: 1px solid #d6e9c6; font-size: 15px !important; line-height: 20px !important; color: #3c763d; font-weight: normal !important; text-align: center; position: relative; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} #gform_confirmation_message_4 {background: none !important; margin: 0 auto 30px auto !important; padding: 0 !important; border: none !important; font-size: 24px !important; line-height: 36px !important; color: #666666 !important; font-family: serifa_btbold, Times, serif !important;} #gform_confirmation_message_4 h5 {margin: 0 auto 30px auto !important; font-size: 24px !important; line-height: 36px !important; color: #c72027 !important; font-family: serifa_btbold, Times, serif !important;} #gform_confirmation_message_4 p {margin: 0 auto 30px auto !important; font-size: 17px !important; line-height: 30px !important; color: #666666 !important; font-family: serifaroman, Times, serif !important;} /* Error Message ----- */ .gform_error_message, .validation_error {background-color: #f2dede !important; margin: 0 auto 20px auto !important; padding: 15px 3% 15px 3% !important; margin-bottom: 20px !important; border: 1px solid #ebccd1 !important; font-size: 15px !important; line-height: 20px !important; color: #a94442 !important; font-weight: normal !important; text-align: center; position: relative !important; display: block; font-family: futura_ltbold, Helvetica, sans-serif;} /* Slider --------------------------------------------------------------------------------------------------------------------------------- */ .slick-slider {position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; } .slick-list {position: relative; overflow: hidden; display: block; margin: 0; padding: 0;} .slick-list:focus {outline: none;} .slick-loading .slick-list {background: white url(images/ajax-loader.gif) center center no-repeat;} .slick-list.dragging {cursor: pointer; cursor: hand;} .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .slick-track {position: relative; left: 0; top: 0; display: block; zoom: 1;} .slick-track:before, .slick-track:after {content: ""; display: table;} .slick-track:after {clear: both;} .slick-loading .slick-track {visibility: hidden;} .slick-slide {float: left; height: 100%; min-height: 1px; display: none;} .slick-slide img {display: block;} .slick-slide.slick-loading img {display: none;} .slick-slide.dragging img {pointer-events: none;} .slick-initialized .slick-slide {display: block;} .slick-loading .slick-slide {visibility: hidden;} .slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;} /* Arrows */ .slick-prev, .slick-next {position: absolute; display: block; width: 46px; height: 72px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 43%; padding: 0; border: none; outline: none;} .slick-prev:focus, .slick-next:focus {outline: none;} .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {opacity: 0.25;} .slick-prev.slick-disabled, .slick-next.slick-disabled {opacity: 0.25;} .slick-prev:before, .slick-next:before {font-family: "slick"; font-size: 25px; line-height: 1; color: black; opacity: 0.85; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .slick-prev {left: -10%; background: url(images/left-arrow.png) center center no-repeat; width: 46px; height: 72px;} .slick-prev:before {content: '';} .slick-next {right: -10%; background: url(images/right-arrow.png) center center no-repeat; width: 46px; height: 72px;} .slick-next:before {content: '';} /* Dots */ .slick-slider {margin-bottom: -30px;} .slick-dots {list-style: none; display: block; text-align: center; padding: 0px; width: 100%;} .slick-dots li {position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px 1px !important; padding: 0px; cursor: pointer;} .slick-dots li button {border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none;} .slick-dots li button:focus {outline: none;} .slick-dots li button:before {position: absolute; top: 0; left: 0; content: "\2022"; width: 22px; height: 22px; font-family: "slick"; font-size: 22px; line-height: 22px; text-align: center; color: #c72027; opacity: .25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} .slick-dots li:hover button:before {opacity: .45;} .slick-dots li.slick-active button:before {opacity: 1; color: #c72027;} /* Columns ---------------------------------------------------------------------------------------------------------------------------------------- */ .padded_column {margin: 20px 0 20px 0;} .full_width, .one_half, .one_third, .two_third, .one_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth {margin: 5px 0; float: left;} .full_width img, .one_half img, .one_third img, .two_third img, .one_fourth img, .three_fourth img, .one_fifth img, .two_fifth img, .three_fifth img, .four_fifth img, .one_sixth img {max-width: 100%; width: auto; height: auto; margin: 10px 0;} .clear_column {clear: both; display: block; font-size: 0; height: 0; line-height: 0; width: 100%; overflow: hidden;} .one_half {width: 46%; margin-right: 4%;} .one_third {width: 32%; margin-right: 1.3%;} .two_third {width: 65%; margin-right: 1.6%;} .one_fourth {width: 23%; margin-right: 2%;} .three_fourth {width: 72%; margin-right: 3%;} .one_fifth {width: 19%; margin-right: 1%;} .two_fifth {width: 38%; margin-right: 2%;} .three_fifth {width: 57%; margin-right: 3%;} .four_fifth {width: 76%; margin-right: 3%;} .one_sixth {width: 16%; margin-right: 0.6%;} .last_column {margin-right: 0; float: right;} /* Media Queries for Columns */ @media only screen and (max-width: 600px) { .full_width, .one_half, .one_third, .two_third, .one_fourth, .three_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth {width: 99%; margin: 10px auto; float: none; clear: both;} } /* Fancybox --------------------------------------------------------------------------------------------------------------------------------------- */ /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ .fancybox-wrap, .fancybox-skin, .fancybox-outer, .fancybox-inner, .fancybox-image, .fancybox-wrap iframe, .fancybox-wrap object, .fancybox-nav, .fancybox-nav span, .fancybox-tmp {padding: 0; margin: 0; border: 0; outline: none; vertical-align: top;} .fancybox-wrap {position: absolute; top: 0; left: 0; z-index: 8020;} .fancybox-skin {padding: 0 !important; position: relative; background: none; color: #444; text-shadow: none;} .fancybox-opened {z-index: 99999;} .fancybox-opened .fancybox-skin {-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);} .fancybox-outer, .fancybox-inner {position: relative;} .fancybox-inner {overflow: hidden;} .fancybox-type-iframe .fancybox-inner {-webkit-overflow-scrolling: touch;} .fancybox-error {color: #444; font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; margin: 0; padding: 15px; white-space: nowrap;} .fancybox-image, .fancybox-iframe {display: block; width: 100%; height: 100%;} .fancybox-image {max-width: 100%; max-height: 100%;} #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {background-image: url("images/fancybox/fancybox_sprite.png");} #fancybox-loading {position: fixed; top: 50%; left: 50%; margin-top: -22px; margin-left: -22px; background-position: 0 -108px; opacity: 0.8; cursor: pointer; z-index: 8060;} #fancybox-loading div {width: 44px; height: 44px; background: url("images/fancybox/fancybox_loading.gif") center center no-repeat;} .fancybox-close {position: absolute; top: -18px; right: -18px; width: 36px; height: 36px; cursor: pointer; z-index: 8040;} .fancybox-nav {position: absolute; top: 0; width: 40%; height: 100%; cursor: pointer; text-decoration: none; background: transparent url("images/fancybox/blank.gif"); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040;} .fancybox-prev {left: 0;} .fancybox-next {right: 0;} .fancybox-nav span {position: absolute; top: 50%; width: 36px; height: 34px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden;} .fancybox-prev span {left: 10px; background-position: 0 -36px;} .fancybox-next span {right: 10px; background-position: 0 -72px;} .fancybox-nav:hover span {visibility: visible;} .fancybox-tmp {position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important;} /* Overlay helper */ .fancybox-lock {overflow: hidden !important; width: auto;} .fancybox-lock body {overflow: hidden !important;} .fancybox-lock-test {overflow-y: hidden !important;} .fancybox-overlay {position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 9810; background: url("images/fancybox/fancybox_overlay.png");} .fancybox-overlay-fixed {position: fixed; bottom: 0; right: 0;} .fancybox-lock .fancybox-overlay {overflow: auto; overflow-y: scroll;} /* Title helper */ .fancybox-title {visibility: hidden; font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; position: relative; text-shadow: none; z-index: 8050;} .fancybox-opened .fancybox-title {visibility: visible;} .fancybox-title-float-wrap {position: absolute; bottom: 0; right: 50%; margin-bottom: -35px; z-index: 8050; text-align: center;} .fancybox-title-float-wrap .child {display: inline-block; margin-right: -100%; padding: 2px 20px; background: transparent; /* Fallback for web browsers that doesn't support RGBa */ background: rgba(0, 0, 0, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; text-shadow: 0 1px 2px #222; color: #FFF; font-weight: bold; line-height: 24px; white-space: nowrap;} .fancybox-title-outside-wrap {position: relative; margin-top: 10px; color: #fff;} .fancybox-title-inside-wrap {padding-top: 10px;} .fancybox-title-over-wrap {position: absolute; bottom: 0; left: 0; color: #fff; padding: 10px; background: #000; background: rgba(0, 0, 0, .8);} /*Retina graphics!*/ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){ #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {background-image: url("images/fancybox/fancybox_sprite@2x.png"); background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/} #fancybox-loading div {background-image: url("images/fancybox/fancybox_loading@2x.gif"); background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/} } /* Fancybox Thumbnails */ #fancybox-thumbs {position: fixed; left: 0; width: 100%; overflow: hidden; z-index: 9820;} #fancybox-thumbs.bottom {bottom: 2px;} #fancybox-thumbs.top {top: 2px;} #fancybox-thumbs ul {position: relative; list-style: none; margin: 0; padding: 0;} #fancybox-thumbs ul li {float: left; padding: 1px; opacity: 0.5;} #fancybox-thumbs ul li.active {opacity: 0.75; padding: 0; border: 1px solid #fff;} #fancybox-thumbs ul li:hover {opacity: 1;} #fancybox-thumbs ul li a {display: block; position: relative; overflow: hidden; border: 1px solid #222; background: #111; outline: none;} #fancybox-thumbs ul li img {display: block; position: relative; border: 0; padding: 0; max-width: none;} .pdfWrapView { clear: both; height: 60vh; margin: 150px 0 0; min-height: 1240px; overflow: hidden; padding: 10px 0 5px; position: relative; width: 100%; } #page-copy .pdfTitleWrap h3 { color: #76241F; font-family: futura_ltbold,Helvetica,sans-serif; font-size: 25px; line-height: 23px; margin: 0 0 10px; text-transform: uppercase; text-align:center; } #page-copy .pdfTitleWrap h3 span { color:#999; text-transform:lowercase; } .pdf-ctas { } .pdf-ctas > a { display: inline-block; height: 36px; line-height: 36px; min-width: 190px; margin: 10px; padding: 0 1.25em; background: #C82127; border: 1px solid #055204; color: #fff !important; font-size: 18px; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 3px; text-shadow: 0 2px 2px #055204; -webkit-transition: all 0.165s ease; -moz-transition: all 0.165s ease; -ms-transition: all 0.165s ease; -o-transition: all 0.165s ease; transition: all 0.165s ease; font-family:futura_ltbold,Helvetica,sans-serif; } .pdf-ctas > a:hover { background: #76241F; -webkit-transition: all 0.165s ease; -moz-transition: all 0.165s ease; -ms-transition: all 0.165s ease; -o-transition: all 0.165s ease; transition: all 0.165s ease; } .pdf-ctas #btn_rfq { } .pdf-ctas #btn_dl_pdf { } .pdf-iframe { position: relative; padding-bottom: 129.4%; /* 8.5:11 */ padding-top: 0px; height: 0; } .pdf-iframe iframe, .pdf-iframe object { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .pdf-iframe .resp { display: none; } @media only screen and (max-width: 1199px) { .pdf-iframe .default { display: none !important; } .pdf-iframe .resp { display: block !important; } } @media only screen and (max-width:599px) { .pdfWrapView { height: auto; margin: 10% 0 0; min-height: 100%; } }