/* 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; -webkit-print-color-adjust: exact;}
:focus {outline: 0;}
ol, ul {list-style: none;}
a {text-decoration: none;}
html {height: 100%;}
/* Hidden ----------------------------------------------------------------------------------------------------------------------------------------- */
#screen-reader, #header-contact, h1 a span, #main-navigation, #dropdown-menus, #mobile-navigation, #inside-hero, #career-actions, #apply-now-overlay, #print-share, #other-projects, #brand-callout, #pinterest-feed, #instagram-feed, #email-signup, footer, #site-search, .buy-now-overlay, .what-you-need ul li .button, .finished-product nav {display: none !important;}
/* 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;}
/* @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;
}
/* Logo ------------------------------------------------------------------------------------------------------------------------------------------- */
h1 {max-width: 250px; margin: 0 auto 25px auto; padding: 25px 0 0 0; position: relative;}
h1 a {width: 100%; margin: 0; position: relative; display: block;}
h1 a span {position: absolute; left: -99999px; top: -99999px;}
h1 a img {max-width: 250px; width: 100%; height: auto;}
/* 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 {font-size: 33px; line-height: 38px; color: #c72027; text-transform: uppercase; 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: 900px; margin: 0 auto 10px auto; position: relative; clear: both;}
.other-materials ul li {margin: 0 auto 5px auto; font-size: 24px; line-height: 32px; letter-spacing: 1px; color: #959595; text-align: center; position: relative; font-family: futura_ltregular, Helvetica, sans-serif;}
/* 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 ----- */
/* 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;}
/* 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;}