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, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* Blog Styling */ .blogContainer { clear: both; text-align: center; } .blogReadMore { clear: both; } .blogDiv { display: inline-block; width: calc(100% / 3.5); margin: 50px 20px; text-align: left; } @media screen and (max-width: 1150px) { .blogDiv { width: calc(100% / 2.5); } } @media screen and (max-width: 800px) { .blogDiv { width: 100%; } } .blogReadMore a { display: inline-block; padding: 18px 30px; border-radius: 5px; background: #27c3f3; text-transform: uppercase; font-weight: bold; text-decoration: none; color: #ffffff; cursor: pointer; border: 0; -webkit-box-shadow: 0; box-shadow: 0; font-weight: 400; letter-spacing: .03em; line-height: 1em; font-family: "Open Sans", sans-serif; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .blogReadMore a:hover { background: #043D5C; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .leftBlogBody { width: 55%; float: left; } @media screen and (max-width: 1000px) { .leftBlogBody { width: 100%; } } .rightBlogBody { width: 40%; float: right; } @media screen and (max-width: 1000px) { .rightBlogBody { width: 100%; margin-bottom: 50px; } } .rightBlogBody img { max-width: 100%; height: auto; } .newsletterDiv { background: #27c3f3; text-align: center; padding: 20px 0; } .newsletterDiv a { background: #FFF; color: #27c3f3; display: inline-block; vertical-align: middle; width: 250px; text-align: center; text-decoration: none; border: 2px solid #b7b7b7; padding: 25px 0; border-radius: 5px; font-family: "League Gothic", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 26px; color: #000000; line-height: 1em; margin: 5px 10px 5px 0; } .newsletterDiv a:hover { background: #000; color: #FFF; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .ImageGalleryImage { margin: 15px 0; } @media screen and (max-width: 720px) { .versa-logo-mobile { top: 235px !important; } } .footerSocials { text-align: left; } @media screen and (max-width: 700px) { .footerSocials { text-align: center; } } .footerSocials a { display: inline-block; margin: 5px; } .alertBanner { background: #27c3f3; text-align: center; font-weight: bold; padding: 20px 0; } .alertBanner p { margin: 0; padding: 0; font-weight: bold; } @media screen and (max-width: 720px) { .alertBanner { line-height: 2em; } } .alertBanner a { color: #FFF; } .alertBanner .releaseBtn { background: #FFF; margin-left: 20px; border-radius: 3px; color: #27c3f3; padding: 5px 15px; text-decoration: none; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } @media screen and (max-width: 720px) { .alertBanner .releaseBtn { clear: both; display: block; max-width: 300px; margin: 0 auto; } } .alertBanner .releaseBtn:hover { opacity: 0.6; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } /* Colors */ /*$mont:'Montserrat', Arial, Helvetica, sans-serif;*/ /* Basic Styles */ main { overflow-x: hidden; } html, body { max-width: 2000px; margin: 0 auto; font-family: "Open Sans", sans-serif; } h1 { font-size: 33px; font-family: "League Gothic", Arial, Helvetica, sans-serif; font-style: normal; font-weight: normal; letter-spacing: .04em; } @media screen and (max-width: 640px) { h1 { font-size: 28px; } } h2 { font-size: 22px; letter-spacing: .04em; font-weight: 600; margin-top: 30px; margin-bottom: 10px; } h2.league { font-family: "League Gothic", Arial, Helvetica, sans-serif; font-size: 33px; letter-spacing: .04em; font-weight: normal; margin-top: 0; } @media screen and (max-width: 640px) { h2.league { font-size: 28px; } } h2.less-margin { margin-top: 0; } @media screen and (max-width: 640px) { h2 { font-size: 20px; } } h3 { font-size: 24px; font-weight: 400; } @media screen and (max-width: 640px) { h3 { font-size: 20px; } } h4 { font-size: 20px; font-weight: 400; } h5 { font-size: 16px; font-weight: 400; font-style: italic; margin-top: 20px; } p { line-height: 2em; margin: 20px 0; font-size: 15px; letter-spacing: .02em; font-weight: 400; } @media screen and (max-width: 640px) { p { line-height: 1.75em; } } ul, ol { margin: 20px; line-height: 2em; } ul.no-bullets, ol.no-bullets { list-style: none; margin: 20px 0; } ul.no-bullets a, ol.no-bullets a { color: #48484e; } ul.no-bullets a:hover, ul.no-bullets a:focus, ol.no-bullets a:hover, ol.no-bullets a:focus { color: #27c3f3; } @media screen and (max-width: 640px) { ul, ol { line-height: 1.75em; } } a:not([class]) { color: #000000; font-weight: bold; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; text-underline-offset: 2px; text-decoration-thickness: 2px; } a:not([class]):hover, a:not([class]):focus { color: #0b97c3; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } .teal { color: #27c3f3; } /* Content Container Class */ .content-container { width: 90%; margin: 0 auto; position: relative; } /* Clear Floats */ .clear { clear: both; } /* JavaScript Error */ .noScriptMessage { display: none; } /* Image Styles */ .pull-right { display: block; float: right; margin: 20px 0px 20px 20px; } @media screen and (max-width: 560px) { .pull-right { width: 100%; clear: both; } } .pull-left { display: block; float: left; margin: 20px 20px 20px 0px; } @media screen and (max-width: 560px) { .pull-left { width: 100%; clear: both; } } img.centered { display: block; margin: 20px auto; } @media screen and (max-width: 560px) { img.centered { width: 100%; clear: both; } } /* Button Styles */ button.btn-prime, .btn-prime { display: inline-block; padding: 18px 30px; border-radius: 5px; /*background: $teal;*/ background: #b3b3b3; text-transform: uppercase; font-weight: bold; text-decoration: none; color: #ffffff; cursor: pointer; border: 0; -webkit-box-shadow: 0; box-shadow: 0; font-weight: 400; letter-spacing: .03em; line-height: 1em; font-family: "Open Sans", sans-serif; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } button.btn-prime.btn-newsletter-new, .btn-prime.btn-newsletter-new { background: #FFF; color: #000; } button.btn-prime.btn-newsletter-new:hover, .btn-prime.btn-newsletter-new:hover { background: #27c3f3; color: #FFF; } @media screen and (max-width: 680px) { button.btn-prime.btn-newsletter-new, .btn-prime.btn-newsletter-new { clear: both; margin-top: 10px; } } button.btn-prime span, .btn-prime span { text-decoration: underline; } button.btn-prime:hover, button.btn-prime:focus, .btn-prime:hover, .btn-prime:focus { background: #0b97c3; color: #ffffff; outline: none; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } button.btn-prime.lime, .btn-prime.lime { background: #13baed; color: #0d131a; } button.btn-prime.lime:hover, button.btn-prime.lime:focus, .btn-prime.lime:hover, .btn-prime.lime:focus { background: #0d83a7; } button.btn-prime.shop, .btn-prime.shop { color: #ffffff; } button.btn-prime.watermark, .btn-prime.watermark { /*background-image: url('/Content/images/button-watermark.png');*/ background-repeat: no-repeat; background-color: #b3b3b3; } button.btn-prime.watermark:hover, .btn-prime.watermark:hover { background: #000; } /* Leader */ #leader { background: #05b6b5; background: -webkit-linear-gradient(291deg, #27c3f3 0%, #057091 65%, #033453 100%); background: -o-linear-gradient(291deg, #27c3f3 0%, #057091 65%, #033453 100%); background: linear-gradient(159deg, #27c3f3 0%, #057091 65%, #033453 100%); color: #ffffff; text-align: center; font-weight: 400; padding: 5px; font-size: 15px; } #leader .main-text { display: inline-block; vertical-align: middle; } #leader .main-text span { text-decoration: underline; } #leader .main-text a { color: #ffffff; text-decoration: none; } #leader .main-text a:hover, #leader .main-text a:focus { color: #13baed; } @media screen and (max-width: 700px) { #leader .main-text a.desktop-quote { display: none; } } #leader .main-text a.mobile-quote { display: none; } @media screen and (max-width: 700px) { #leader .main-text a.mobile-quote { display: block; } } #leader .phone { display: inline-block; vertical-align: middle; margin-left: 40px; } #leader .phone a { color: #ffffff; text-decoration: none; } #leader .phone a:hover, #leader .phone a:focus { color: #13baed; } #leader .phone a svg { display: inline-block; font-size: 14px; margin-bottom: -2px; } @media screen and (max-width: 400px) { #leader .phone { margin-left: 10px; } } @media screen and (max-width: 400px) { #leader { font-size: 13px; } } /* Header */ .menu-toggle { position: absolute; visibility: hidden; } .menu-toggle:checked ~ .nav-list { max-height: 2000px; } .menu-toggle:checked ~ .menu-label #nav-toggle .menuX { background: transparent; } .menu-toggle:checked ~ .menu-label #nav-toggle .menuX::before { top: 0; -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform: rotate(45deg); } .menu-toggle:checked ~ .menu-label #nav-toggle .menuX::after { top: 10px; -ms-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); } header { background-color: #f6f6f6; height: 75px; position: relative; z-index: 9999; /* Mobile Hamburger Menu */ } @media screen and (max-width: 1500px) { header .content-container { width: 95%; } } @media screen and (max-width: 1000px) { header .content-container { width: 100%; padding: 0 5%; } } header .logo { display: inline-block; vertical-align: middle; margin-block: 7px; } header .logo a { display: inline-block; height: 57px; } header .logo img { display: inline-block; max-width: 100%; max-height: 100%; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } @media screen and (max-width: 640px) { header .logo img { display: none; } } header .logo img:hover, header .logo img:focus { -webkit-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } header .logo img.versa-logo-mobile { display: none; } @media screen and (max-width: 640px) { header .logo img.versa-logo-mobile { display: block; padding: 5px 0; height: 100% !important; } } @media screen and (max-width: 450px) { header .logo { width: 260px; height: 75px; margin: 0; padding-block: 5px; } } header nav { float: none; text-align: right; display: inline-block; width: calc(100% - 215px); vertical-align: middle; } header nav ul.nav-list li { position: relative; float: none; display: inline-block; } header nav ul.nav-list li a { padding: 29px 25px; font-weight: 300; color: #0d131a; text-decoration: none; font-size: 15px; } header nav ul.nav-list li a:hover, header nav ul.nav-list li a:focus { color: #27c3f3; } @media screen and (max-width: 1000px) { header nav ul.nav-list li a:hover, header nav ul.nav-list li a:focus { color: #13baed; } } header nav ul.nav-list li a.no-link:hover, header nav ul.nav-list li a.no-link:focus { color: #0d131a; } @media screen and (max-width: 1000px) { header nav ul.nav-list li a.no-link:hover, header nav ul.nav-list li a.no-link:focus { color: #ffffff; } } @media screen and (max-width: 1250px) { header nav ul.nav-list li a { padding: 29px 20px; } } @media screen and (max-width: 1150px) { header nav ul.nav-list li a { font-size: 13px; padding: 32px 20px; } } @media screen and (max-width: 1100px) { header nav ul.nav-list li a { padding: 32px 15px; } } @media screen and (max-width: 1030px) { header nav ul.nav-list li a { padding: 32px 12px; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li a { color: #ffffff; font-size: 18px; display: block; padding: 5px 30px; border-bottom: 1px solid #48484e; } } header nav ul.nav-list li.dropdown:after { display: block; position: absolute; content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #0d131a; right: 5px; bottom: 45%; } @media screen and (max-width: 1250px) { header nav ul.nav-list li.dropdown:after { right: 0; bottom: 42%; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li.dropdown:after { display: none; } } header nav ul.nav-list li.dropdown:hover:after, header nav ul.nav-list li.dropdown:focus:after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #0d131a; border-top: 0; } header nav ul.nav-list li .dropdown-menu { display: block; position: absolute; top: 54px; max-height: 0; overflow: hidden; margin: 0; text-align: left; -webkit-transition: max-height .2s; -o-transition: max-height .2s; transition: max-height .2s; background: rgba(13, 19, 26, 0.9); width: 240px; } header nav ul.nav-list li .dropdown-menu .single-list { margin: 20px 10px; } header nav ul.nav-list li .dropdown-menu.double-list { width: 525px; } header nav ul.nav-list li .dropdown-menu.double-list.small { width: 350px; } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list.small { width: 100%; } } header nav ul.nav-list li .dropdown-menu.double-list .dual-list { display: block; float: left; margin: 20px 10px; } header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading { color: #b7b7b7; font-weight: 300; display: block; } header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a { color: #b7b7b7; padding: 10px 20px; } header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a:hover, header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a:focus { color: #13baed; } header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a.no-link:hover, header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a.no-link:focus { color: #b7b7b7; } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a.no-link:hover, header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a.no-link:focus { color: #f6f6f6; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading a { font-size: 16px; padding: 5px 30px; color: #f6f6f6; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list .dual-list .list-heading { background-color: #606069; } } header nav ul.nav-list li .dropdown-menu.double-list .dual-list:nth-child(2) { border-left: 1px solid #48484e; } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list .dual-list:nth-child(2) { border-left: 0; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list .dual-list { float: none; margin: 0; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu.double-list { width: 100%; } } header nav ul.nav-list li .dropdown-menu ul { margin: 0px; padding: 0; } header nav ul.nav-list li .dropdown-menu ul li { list-style: none; margin: 0; display: block; line-height: 1em; } header nav ul.nav-list li .dropdown-menu ul li a { display: block; padding: 10px 20px; color: #ffffff; } header nav ul.nav-list li .dropdown-menu ul li a:hover, header nav ul.nav-list li .dropdown-menu ul li a:focus { color: #13baed; } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu ul li a { font-size: 14px; background: #48484e; padding: 10px 30px; border-bottom: 1px solid #606069; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .dropdown-menu { width: 100%; } header nav ul.nav-list li .dropdown-menu .single-list { margin: 0; } } header nav ul.nav-list li:hover .dropdown-menu, header nav ul.nav-list li:focus .dropdown-menu { max-height: 2000px; z-index: 999; -webkit-transition: max-height .8s; -o-transition: max-height .8s; transition: max-height .8s; border-bottom: 5px solid #13baed; } @media screen and (max-width: 1000px) { header nav ul.nav-list li:hover .dropdown-menu, header nav ul.nav-list li:focus .dropdown-menu { max-height: 0; border-bottom: 0; } } header nav ul.nav-list li .nav-toggle { display: none; } @media screen and (max-width: 1000px) { header nav ul.nav-list li .nav-toggle { display: block; position: absolute; left: -200vw; visibility: hidden; } } header nav ul.nav-list li .nav-toggle ~ label { display: none; } @media screen and (max-width: 1000px) { header nav ul.nav-list li .nav-toggle ~ label { display: block; width: 55px; height: 42px; background: #27c3f3; position: absolute; right: 0; top: 0; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; cursor: pointer; } header nav ul.nav-list li .nav-toggle ~ label span { display: block; width: 20px; border-top: 10px solid #ffffff; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .nav-toggle ~ .dropdown-menu { position: relative; max-height: 0px; overflow: hidden; top: 0; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .nav-toggle:checked ~ label { background: #13baed; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } header nav ul.nav-list li .nav-toggle:checked ~ label span { border-top: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #ffffff; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li .nav-toggle:checked ~ .dropdown-menu { max-height: 2000px; } } @media screen and (max-width: 1000px) { header nav ul.nav-list li { display: block; width: 100%; } } @media screen and (max-width: 1000px) { header nav ul.nav-list { position: absolute; margin: 0; max-height: 0px; overflow: hidden; top: 75px; right: 0; background: rgba(13, 19, 26, 0.9); width: 50%; -webkit-transition: max-height ease .3s; -o-transition: max-height ease .3s; transition: max-height ease .3s; } header nav ul.nav-list.clicked { max-height: 2000px; -webkit-transition: max-height ease .3s; -o-transition: max-height ease .3s; transition: max-height ease .3s; } } @media screen and (max-width: 750px) { header nav ul.nav-list { width: 100%; } } @media screen and (max-width: 1000px) { header nav { text-align: left; } } header #menuTL { display: none; height: 50px; position: absolute; right: 5%; margin-top: 5px; top: 10px; width: 40px; z-index: 4; left: auto; } header #menuTL #nav-toggle { float: right; width: 100%; cursor: pointer; } header #menuTL #nav-toggle .contain { display: block; height: 50px; position: relative; background: transparent; } header #menuTL .menuX { width: 100%; left: 0; border-radius: 0; background-color: #13baed; margin-top: 4px; } header #menuTL .menuX:before { left: 0; border-radius: 0; width: 100%; background-color: #13baed; top: -12px; } header #menuTL .menuX:after { left: 0; border-radius: 0; width: 100%; background-color: #13baed; top: 12px; } @media only screen and (max-width: 1000px) { header #menuTL { display: block; } } header #menuTL.clicked #nav-toggle .contain { background: transparent; } header #menuTL.clicked .menuX:before, header #menuTL.clicked .menuX:after { background-color: #13baed; } .versa-logo { position: absolute; top: 0px; width: 200px; right: 710px; } @media screen and (max-width: 1500px) { .versa-logo { right: 680px; } } @media screen and (max-width: 1250px) { .versa-logo { width: 170px; right: 625px; top: 4px; } } @media screen and (max-width: 1150px) { .versa-logo { width: 160px; right: 570px; top: 7px; } } @media screen and (max-width: 1100px) { .versa-logo { width: 150px; right: 520px; top: 10px; } } @media screen and (max-width: 1030px) { .versa-logo { right: 500px; } } @media screen and (max-width: 1000px) { .versa-logo { right: 110px; } } @media screen and (max-width: 620px) { .versa-logo { right: 80px; } } @media screen and (max-width: 570px) { .versa-logo { display: none; } } /* Banner */ #banner { height: 795px; position: relative; overflow: hidden; background-image: url("/Content/images/banner-video-poster-2.jpg"); background-position: center center; background-repeat: no-repeat; } #banner .banner-inner { position: relative; width: 100%; height: 100%; background-image: url("/Content/images/angled-graphic.png"); background-repeat: no-repeat; z-index: 999; } #banner .banner-inner .gradient-overlay { position: relative; width: 100%; height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+7,0+7,0+35,1+96,1+100 */ background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 35%, black 96%, black 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 35%, black 96%, black 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(7%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0)), color-stop(96%, black), to(black)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 35%, black 96%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 35%, black 96%, black 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0); /* IE6-9 */ } @media screen and (max-width: 1000px) { #banner .banner-inner .gradient-overlay { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.5) 35%, black 96%, black 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.5) 35%, black 96%, black 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(7%, rgba(0, 0, 0, 0)), color-stop(35%, rgba(0, 0, 0, 0.5)), color-stop(96%, black), to(black)); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.5) 35%, black 96%, black 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.5) 35%, black 96%, black 100%); } } #banner .banner-inner .banner-text { padding-top: 17%; } #banner .banner-inner .banner-text .heading { font-size: 72px; font-family: "League Gothic", Arial, Helvetica, sans-serif; font-style: italic; line-height: 1em; color: #ffffff; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 30px; text-shadow: 0px 0px 8px #000000; } #banner .banner-inner .banner-text .heading .sub-heading { display: block; font-size: 54px; line-height: 1em; } @media screen and (max-width: 1250px) { #banner .banner-inner .banner-text .heading .sub-heading { font-size: 48px; } } @media screen and (max-width: 650px) { #banner .banner-inner .banner-text .heading .sub-heading { font-size: 36px; } } @media screen and (max-width: 1250px) { #banner .banner-inner .banner-text .heading { font-size: 63px; } } @media screen and (max-width: 650px) { #banner .banner-inner .banner-text .heading { font-size: 47px; } } @media screen and (max-width: 570px) { #banner .banner-inner .banner-text .heading { padding-top: 20px; } } @media screen and (max-width: 450px) { #banner .banner-inner .banner-text .heading { padding-top: 40px; } } @media screen and (max-width: 1350px) { #banner .banner-inner .banner-text { padding-top: 14%; } } @media screen and (max-width: 1000px) { #banner .banner-inner .banner-text { text-align: center; padding-top: 100px; padding-bottom: 75px; } } @media screen and (max-width: 650px) { #banner .banner-inner .banner-text { padding-top: 75px; } } @media screen and (max-width: 450px) { #banner .banner-inner .banner-text { padding-top: 50px; padding-bottom: 50px; } } @media screen and (max-width: 1600px) { #banner .banner-inner { background-position: -150px 0; } } @media screen and (max-width: 1000px) { #banner .banner-inner { background-image: none; } } #banner video { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 1250px) { #banner video { height: 600px; } } @media screen and (max-width: 1150px) { #banner video { left: 0; -webkit-transform: none; -ms-transform: none; transform: none; } } @media screen and (max-width: 1000px) { #banner video { display: none; } } @media screen and (max-width: 1600px) { #banner { height: 700px; } } @media screen and (max-width: 1350px) { #banner { height: 650px; } } @media screen and (max-width: 1250px) { #banner { height: 600px; } } @media screen and (max-width: 1000px) { #banner { background-image: url("/Content/images/banner-bg-1000-2.jpg"); height: auto; background-position: bottom center; background-size: cover; } } @media screen and (max-width: 640px) { #banner { background-image: url("/Content/images/banner-bg-640-2.jpg"); } } /* Visual Navigation for the HP and IP Banners */ .visual-nav { position: absolute; bottom: 30px; left: 0; width: 100%; color: #ffffff; text-align: center; } .visual-nav .content-container { width: 95%; } .visual-nav .feature-box { display: inline-block; vertical-align: middle; /*width: 19%;*/ width: 24%; text-align: center; position: relative; z-index: 2; } .visual-nav .feature-box a { display: block; text-decoration: none; color: #ffffff; } .visual-nav .feature-box a img { display: inline-block; vertical-align: middle; margin-right: 10px; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } @media screen and (max-width: 1800px) { .visual-nav .feature-box a img { margin-right: 5px; width: 60px; } } @media screen and (max-width: 1450px) { .visual-nav .feature-box a img { display: block; margin: 0 auto 5px; } } @media screen and (max-width: 1000px) { .visual-nav .feature-box a img { display: inline-block; margin-right: 50px; } } @media screen and (max-width: 640px) { .visual-nav .feature-box a img { margin-right: 30px; } } @media screen and (max-width: 450px) { .visual-nav .feature-box a img { margin-right: 0; } } .visual-nav .feature-box a .text { display: inline-block; vertical-align: middle; } .visual-nav .feature-box a .text .heading { display: block; font-family: "League Gothic", Arial, Helvetica, sans-serif; font-size: 36px; text-transform: uppercase; letter-spacing: .05em; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } @media screen and (max-width: 1950px) { .visual-nav .feature-box a .text .heading { font-size: 32px; } } @media screen and (max-width: 1600px) { .visual-nav .feature-box a .text .heading { font-size: 28px; } } @media screen and (max-width: 1450px) { .visual-nav .feature-box a .text .heading { font-size: 32px; } } @media screen and (max-width: 1250px) { .visual-nav .feature-box a .text .heading { font-size: 28px; } } @media screen and (max-width: 1100px) { .visual-nav .feature-box a .text .heading { font-size: 25px; } } @media screen and (max-width: 1000px) { .visual-nav .feature-box a .text .heading { display: inline-block; vertical-align: middle; font-size: 28px; text-shadow: 0px 0px 5px #000000; } } @media screen and (max-width: 640px) { .visual-nav .feature-box a .text .heading { font-size: 24px; } } .visual-nav .feature-box a .text .sub-heading { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; } @media screen and (max-width: 1950px) { .visual-nav .feature-box a .text .sub-heading { font-size: 14px; } } @media screen and (max-width: 1100px) { .visual-nav .feature-box a .text .sub-heading { font-size: 12px; } } @media screen and (max-width: 1000px) { .visual-nav .feature-box a .text .sub-heading { font-size: 15px; width: auto; display: inline-block; margin-left: 10px; text-shadow: 0px 0px 5px #000000; } } @media screen and (max-width: 640px) { .visual-nav .feature-box a .text .sub-heading { font-size: 12px; display: block; margin-left: 0; } } @media screen and (max-width: 1450px) { .visual-nav .feature-box a .text { display: block; } } @media screen and (max-width: 1000px) { .visual-nav .feature-box a .text { display: inline-block; } } @media screen and (max-width: 640px) { .visual-nav .feature-box a .text { text-align: center; width: 200px; } } .visual-nav .feature-box a:hover, .visual-nav .feature-box a:focus { color: #b7b7b7; } .visual-nav .feature-box a:hover .heading, .visual-nav .feature-box a:focus .heading { color: #13baed; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } .visual-nav .feature-box a:hover img, .visual-nav .feature-box a:focus img { -webkit-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } @media screen and (max-width: 1000px) { .visual-nav .feature-box { width: 100%; text-align: left; display: block; margin-top: 10px; } .visual-nav .feature-box:after { content: ""; width: 25px; height: 40px; display: block; background-image: url("/Content/images/green-arrow.png"); background-repeat: no-repeat; background-position: center center; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media screen and (max-width: 1000px) { .visual-nav { position: relative; left: auto; bottom: auto; padding-bottom: 50px; width: 550px; margin: 0 auto; } } @media screen and (max-width: 640px) { .visual-nav { width: 400px; } } @media screen and (max-width: 450px) { .visual-nav { width: 300px; } } /* Main */ #HomePage main, .P--MetalStockDistributorQuote main { padding: 0; } main { padding: 50px 0; /* Special Content Buttons */ } main .content-feature { background-repeat: no-repeat; background-size: cover; background-position: center center; } main .content-feature .content { display: block; width: 60%; padding: 50px 0 50px 0; } @media screen and (max-width: 1450px) { main .content-feature .content { width: 50%; } } @media screen and (max-width: 1200px) { main .content-feature .content { width: 100%; padding: 30px 0; } } main .content-feature .image { display: block; width: 40%; } main .content-feature .image img { display: block; max-width: 100%; } @media screen and (max-width: 1450px) { main .content-feature .image { width: 50%; } } @media screen and (max-width: 1200px) { main .content-feature .image { display: none; } } main .content-feature .left { float: left; } main .content-feature .left.image { margin-left: -50px; margin-top: 50px; } main .content-feature .right { float: right; } main .content-feature .right.content { padding-right: 5%; padding-bottom: 50px; } @media screen and (max-width: 1200px) { main .content-feature .right.content { padding: 30px 5%; } } main .content-feature.grey-feature { background-image: url("/Content/images/grey-feature-bg.jpg"); color: #ffffff; } main .content-feature.grey-feature a { color: #26C0F0; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } main .content-feature.grey-feature a:hover { color: #FFF; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } main .content-feature.grey-feature a.btn-prime { color: #000; } main .content-feature.grey-feature h1, main .content-feature.grey-feature h2 { color: #ffffff; } main .content-feature.grey-feature h2 { font-weight: 300; } main .content-feature.grey-feature .image { position: absolute; float: none; bottom: 0; right: 0; } @media screen and (max-width: 1000px) { main .content-feature.grey-feature { background-image: url("/Content/images/grey-feature-bg-1000.jpg"); } } main .content-feature.white-feature { background-image: url("/Content/images/white-feature-bg-new.jpg"); } @media screen and (max-width: 1450px) { main .content-feature.white-feature .image { margin-top: 150px; } } @media screen and (max-width: 1000px) { main .content-feature.white-feature { background-image: url("/Content/images/white-feature-bg-1000.jpg"); } } main #type-feature { height: 650px; position: relative; background-color: #0d131a; overflow: hidden; } @media screen and (max-width: 1250px) { main #type-feature { height: 500px; } } main #type-feature .tab-links, main #type-feature .mobile-tab-links { display: block; float: left; width: 325px; height: 100%; position: relative; z-index: 999; } main #type-feature .tab-links .tab, main #type-feature .mobile-tab-links .tab { width: 100%; height: calc(100%/3); background-color: #0d131a; border-bottom: 1px solid #48484e; color: #ffffff; position: relative; padding-left: 70px; padding-top: 30px; cursor: pointer; } @media screen and (max-width: 1300px) { main #type-feature .tab-links .tab, main #type-feature .mobile-tab-links .tab { padding-left: 60px; } } main #type-feature .tab-links .tab .tab-heading, main #type-feature .mobile-tab-links .tab .tab-heading { font-family: "League Gothic", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 30px; letter-spacing: .05em; padding-top: 48px; } @media screen and (max-width: 1250px) { main #type-feature .tab-links .tab .tab-heading, main #type-feature .mobile-tab-links .tab .tab-heading { padding-top: 36px; font-size: 25px; line-height: 28px; } } main #type-feature .tab-links .tab .sub-heading, main #type-feature .mobile-tab-links .tab .sub-heading { color: #b7b7b7; font-weight: 300; letter-spacing: .05em; } main #type-feature .tab-links .tab:after, main #type-feature .mobile-tab-links .tab:after { content: ""; display: block; width: 20px; height: 30px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-image: url("/Content/images/green-arrow.png"); background-repeat: no-repeat; background-position: center center; } main #type-feature .tab-links .tab.current, main #type-feature .mobile-tab-links .tab.current { background-color: #13baed; color: #0d131a; } main #type-feature .tab-links .tab.current .sub-heading, main #type-feature .mobile-tab-links .tab.current .sub-heading { color: #0d131a; font-weight: 400; } @media screen and (max-width: 750px) { main #type-feature .tab-links .tab.current .sub-heading, main #type-feature .mobile-tab-links .tab.current .sub-heading { color: #b7b7b7; font-weight: 300; } } main #type-feature .tab-links .tab.current:after, main #type-feature .mobile-tab-links .tab.current:after { background-image: url("/Content/images/dkblue-arrow.png"); } @media screen and (max-width: 750px) { main #type-feature .tab-links .tab.current:after, main #type-feature .mobile-tab-links .tab.current:after { background-image: url("/Content/images/green-arrow.png"); } } main #type-feature .tab-links .tab.current.V-1A, main #type-feature .mobile-tab-links .tab.current.V-1A { background-color: #c75465; } main #type-feature .tab-links .tab.current.V-2, main #type-feature .mobile-tab-links .tab.current.V-2 { background-color: #1fc5a8; } main #type-feature .tab-links .tab.current.V-3, main #type-feature .mobile-tab-links .tab.current.V-3 { background-color: #f7df3b; } main #type-feature .tab-links .tab.current.V-4, main #type-feature .mobile-tab-links .tab.current.V-4 { background-color: #4ba9e8; } main #type-feature .tab-links .tab.current.V-5, main #type-feature .mobile-tab-links .tab.current.V-5 { background-color: #b74dde; } main #type-feature .tab-links .tab.current.V-6, main #type-feature .mobile-tab-links .tab.current.V-6 { background-color: #e28b37; } @media screen and (max-width: 750px) { main #type-feature .tab-links .tab.current, main #type-feature .mobile-tab-links .tab.current { background-color: #0d131a; } } main #type-feature .tab-links .tab.V-1A:hover, main #type-feature .tab-links .tab.V-1A:focus, main #type-feature .mobile-tab-links .tab.V-1A:hover, main #type-feature .mobile-tab-links .tab.V-1A:focus { background-color: #c75465; } main #type-feature .tab-links .tab.V-2:hover, main #type-feature .tab-links .tab.V-2:focus, main #type-feature .mobile-tab-links .tab.V-2:hover, main #type-feature .mobile-tab-links .tab.V-2:focus { background-color: #1fc5a8; } main #type-feature .tab-links .tab.V-3:hover, main #type-feature .tab-links .tab.V-3:focus, main #type-feature .mobile-tab-links .tab.V-3:hover, main #type-feature .mobile-tab-links .tab.V-3:focus { background-color: #f7df3b; } main #type-feature .tab-links .tab.V-4:hover, main #type-feature .tab-links .tab.V-4:focus, main #type-feature .mobile-tab-links .tab.V-4:hover, main #type-feature .mobile-tab-links .tab.V-4:focus { background-color: #4ba9e8; } main #type-feature .tab-links .tab.V-5:hover, main #type-feature .tab-links .tab.V-5:focus, main #type-feature .mobile-tab-links .tab.V-5:hover, main #type-feature .mobile-tab-links .tab.V-5:focus { background-color: #b74dde; } main #type-feature .tab-links .tab.V-6:hover, main #type-feature .tab-links .tab.V-6:focus, main #type-feature .mobile-tab-links .tab.V-6:hover, main #type-feature .mobile-tab-links .tab.V-6:focus { background-color: #e28b37; } main #type-feature .tab-links .tab:hover, main #type-feature .tab-links .tab:focus, main #type-feature .mobile-tab-links .tab:hover, main #type-feature .mobile-tab-links .tab:focus { background-color: #13baed; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main #type-feature .tab-links .tab:hover a, main #type-feature .tab-links .tab:focus a, main #type-feature .mobile-tab-links .tab:hover a, main #type-feature .mobile-tab-links .tab:focus a { color: #0d131a; } main #type-feature .tab-links .tab:hover .tab-heading, main #type-feature .tab-links .tab:focus .tab-heading, main #type-feature .mobile-tab-links .tab:hover .tab-heading, main #type-feature .mobile-tab-links .tab:focus .tab-heading { color: #0d131a; } main #type-feature .tab-links .tab:hover .sub-heading, main #type-feature .tab-links .tab:focus .sub-heading, main #type-feature .mobile-tab-links .tab:hover .sub-heading, main #type-feature .mobile-tab-links .tab:focus .sub-heading { color: #0d131a; font-weight: 400; } main #type-feature .tab-links .tab:hover:after, main #type-feature .tab-links .tab:focus:after, main #type-feature .mobile-tab-links .tab:hover:after, main #type-feature .mobile-tab-links .tab:focus:after { background-image: url("/Content/images/dkblue-arrow.png"); } @media screen and (max-width: 750px) { main #type-feature .tab-links { display: none; } } main #type-feature .mobile-tab-links { display: none; } @media screen and (max-width: 750px) { main #type-feature .mobile-tab-links { display: block; width: 100%; } main #type-feature .mobile-tab-links .tab.current a { color: #000000; } main #type-feature .mobile-tab-links .tab.current a .sub-heading { color: #000000; } main #type-feature .mobile-tab-links a { text-decoration: none; color: #ffffff; } } @media screen and (max-width: 640px) { main #type-feature .mobile-tab-links { text-align: center; } main #type-feature .mobile-tab-links .tab { padding-left: 0; } } main #type-feature .tab-content { display: block; position: absolute; top: 0; left: -100%; width: calc(100% - 325px); height: 100%; -webkit-transition: left ease 1s; -o-transition: left ease 1s; transition: left ease 1s; background-repeat: no-repeat; background-size: cover; background-position: center center; } main #type-feature .tab-content .content-inner { width: 700px; height: 100%; background-image: url("/Content/images/type-feature-angle.png"); background-repeat: no-repeat; background-size: 100% 100%; background-position: bottom left; padding: 20px; color: #ffffff; left: -100%; top: 0; position: absolute; -webkit-transition: left ease .5s; -o-transition: left ease .5s; transition: left ease .5s; } main #type-feature .tab-content .content-inner .feature-text { text-align: center; width: 300px; margin: 25% 0 0 5%; } main #type-feature .tab-content .content-inner .feature-text .heading { font-family: "League Gothic", Arial, Helvetica, sans-serif; font-size: 30px; text-transform: uppercase; letter-spacing: .05em; } main #type-feature .tab-content .content-inner .feature-text a.btn-prime { font-weight: 600; } main #type-feature .tab-content .content-inner .feature-text p { font-weight: 300; } @media screen and (max-width: 1250px) { main #type-feature .tab-content .content-inner .feature-text { margin-top: 15%; } } @media screen and (max-width: 1000px) { main #type-feature .tab-content .content-inner .feature-text { margin: 15% auto 0; width: 60%; } } @media screen and (max-width: 850px) { main #type-feature .tab-content .content-inner .feature-text { width: 80%; } } @media screen and (max-width: 1250px) { main #type-feature .tab-content .content-inner { background-position: top left; background-size: auto; } } @media screen and (max-width: 1000px) { main #type-feature .tab-content .content-inner { width: 100%; background-image: none; background: rgba(35, 39, 42, 0.85); } } main #type-feature .tab-content.V-1A .btn-prime { background: #c75465; } main #type-feature .tab-content.V-1A .btn-prime:hover, main #type-feature .tab-content.V-1A .btn-prime:focus { background: #9c3342; } main #type-feature .tab-content.V-2 .btn-prime { background: #1fc5a8; } main #type-feature .tab-content.V-2 .btn-prime:hover, main #type-feature .tab-content.V-2 .btn-prime:focus { background: #158370; } main #type-feature .tab-content.V-3 .btn-prime { background: #f7df3b; } main #type-feature .tab-content.V-3 .btn-prime:hover, main #type-feature .tab-content.V-3 .btn-prime:focus { background: #c4ac08; } main #type-feature .tab-content.V-4 .btn-prime { background: #4ba9e8; } main #type-feature .tab-content.V-4 .btn-prime:hover, main #type-feature .tab-content.V-4 .btn-prime:focus { background: #1a85cc; } main #type-feature .tab-content.V-5 .btn-prime { background: #b74dde; } main #type-feature .tab-content.V-5 .btn-prime:hover, main #type-feature .tab-content.V-5 .btn-prime:focus { background: #9323bc; } main #type-feature .tab-content.V-6 .btn-prime { background: #e28b37; } main #type-feature .tab-content.V-6 .btn-prime:hover, main #type-feature .tab-content.V-6 .btn-prime:focus { background: #b3651a; } main #type-feature .tab-content.current { left: 325px; -webkit-transition: left ease 1s; -o-transition: left ease 1s; transition: left ease 1s; } main #type-feature .tab-content.current .content-inner { left: 0; -webkit-transition: left ease .5s; -o-transition: left ease .5s; transition: left ease .5s; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } @media screen and (max-width: 750px) { main #type-feature .tab-content { display: none; } } main .content-image-feature { display: table; } main .content-image-feature .content { display: table-cell; width: 70%; padding: 60px 50px 20px 5%; vertical-align: top; } main .content-image-feature .content h2:first-child { margin-top: 0; } @media screen and (max-width: 1250px) { main .content-image-feature .content { width: 75%; } } @media screen and (max-width: 1200px) { main .content-image-feature .content { width: 100%; display: block; padding-bottom: 0; padding: 30px 5%; } } main .content-image-feature .image { display: table-cell; width: 30%; vertical-align: top; background-size: cover; background-position: center center; } @media screen and (max-width: 1250px) { main .content-image-feature .image { width: 25%; } } @media screen and (max-width: 1200px) { main .content-image-feature .image { display: none; } } @media screen and (max-width: 1200px) { main .content-image-feature { display: block; } } main .cast-iron-btns p { display: inline-block; vertical-align: middle; } main .cast-iron-btns a { display: inline-block; vertical-align: middle; width: 250px; text-align: center; text-decoration: none; border: 2px solid #b7b7b7; padding: 5px 0; border-radius: 5px; font-family: "League Gothic", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 26px; color: #000000; line-height: 1em; margin: 5px 10px 5px 0; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main .cast-iron-btns a:before { display: block; content: "Cast Iron"; font-family: "Open Sans", sans-serif; text-transform: none; font-size: 18px; } @media screen and (max-width: 500px) { main .cast-iron-btns a:before { font-size: 14px; } } main .cast-iron-btns a:hover, main .cast-iron-btns a:focus { background-image: url("/Content/images/cast-iron-texture.png"); background-repeat: no-repeat; background-position: center center; color: #ffffff; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main .cast-iron-btns a.btn-prime { border: none; padding: 18px 30px; font-family: "Open Sans", sans-serif; font-size: 16px; color: #ffffff; } main .cast-iron-btns a.btn-prime:before { display: none; } main .cast-iron-btns a.btn-prime:hover, main .cast-iron-btns a.btn-prime:focus { background: #0b97c3; } @media screen and (max-width: 1300px) { main .cast-iron-btns a { width: 225px; } } @media screen and (max-width: 850px) { main .cast-iron-btns a { margin: 5px 0 5px 0; } } @media screen and (max-width: 750px) { main .cast-iron-btns a { width: 49%; } } @media screen and (max-width: 500px) { main .cast-iron-btns a { font-size: 20px; } } main .bronze-btns p { display: inline-block; vertical-align: middle; } main .bronze-btns a { display: inline-block; vertical-align: middle; width: 250px; text-align: center; text-decoration: none; border: 2px solid #b7b7b7; padding: 5px 0; border-radius: 5px; font-family: "League Gothic", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 26px; color: #000000; line-height: 1em; margin: 5px 10px 5px 0; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main .bronze-btns a:before { display: block; content: "Bronze"; font-family: "Open Sans", sans-serif; text-transform: none; font-size: 18px; } @media screen and (max-width: 500px) { main .bronze-btns a:before { font-size: 14px; } } main .bronze-btns a:hover, main .bronze-btns a:focus { background-image: url("/Content/images/bronze-texture.png"); background-repeat: no-repeat; background-position: center center; color: #ffffff; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main .bronze-btns a.btn-prime { border: none; padding: 18px 30px; font-family: "Open Sans", sans-serif; font-size: 16px; color: #ffffff; width: auto; } main .bronze-btns a.btn-prime:before { display: none; } main .bronze-btns a.btn-prime:hover, main .bronze-btns a.btn-prime:focus { background: #0b97c3; } @media screen and (max-width: 750px) { main .bronze-btns a.btn-prime { width: 49%; } } @media screen and (max-width: 640px) { main .bronze-btns a.btn-prime { width: auto; } } @media screen and (max-width: 1300px) { main .bronze-btns a { width: 225px; } } @media screen and (max-width: 850px) { main .bronze-btns a { margin: 5px 0 5px 0; } } @media screen and (max-width: 750px) { main .bronze-btns a { width: 49%; } } @media screen and (max-width: 500px) { main .bronze-btns a { font-size: 20px; } } main .bronze-feature { margin-top: 50px; } main .bronze-feature .feature-box { display: block; float: left; width: 25%; text-align: center; overflow: hidden; position: relative; } main .bronze-feature .feature-box .box-content { position: absolute; z-index: 99; width: 100%; height: 110px; bottom: 0; color: #ffffff; padding: 0 50px; -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main .bronze-feature .feature-box .box-content .heading { font-family: "League Gothic", Arial, Helvetica, sans-serif; text-transform: uppercase; letter-spacing: .05em; font-size: 35px; text-shadow: 0px 0px 5px #000000; } @media screen and (max-width: 1500px) { main .bronze-feature .feature-box .box-content .heading { font-size: 30px; } } main .bronze-feature .feature-box .box-content .sub-heading { letter-spacing: .02em; text-shadow: 0px 0px 5px #000000; } main .bronze-feature .feature-box .box-content img { margin: 5px auto; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } main .bronze-feature .feature-box .box-content p { font-weight: 300; line-height: 1.7em; } @media screen and (max-width: 1500px) { main .bronze-feature .feature-box .box-content p { line-height: 1.3em; } } @media screen and (max-width: 1350px) { main .bronze-feature .feature-box .box-content p { display: none; } } @media screen and (max-width: 950px) { main .bronze-feature .feature-box .box-content p { display: block; } } @media screen and (max-width: 750px) { main .bronze-feature .feature-box .box-content p { display: none; } } main .bronze-feature .feature-box .box-content a { color: #13baed; text-transform: uppercase; font-weight: 400; margin-top: 20px; display: block; } main .bronze-feature .feature-box .box-content a:hover, main .bronze-feature .feature-box .box-content a:focus { color: #0d83a7; outline: none; } @media screen and (max-width: 1700px) { main .bronze-feature .feature-box .box-content { padding: 0 30px; } } @media screen and (max-width: 1500px) { main .bronze-feature .feature-box .box-content { height: 100px; } } main .bronze-feature .feature-box:hover .box-content, main .bronze-feature .feature-box:focus .box-content { height: 100%; padding: 50px; background: rgba(35, 39, 42, 0.8); -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } main .bronze-feature .feature-box:hover .box-content img, main .bronze-feature .feature-box:focus .box-content img { display: none; } @media screen and (max-width: 1700px) { main .bronze-feature .feature-box:hover .box-content, main .bronze-feature .feature-box:focus .box-content { padding: 20px 30px; } } @media screen and (max-width: 1350px) { main .bronze-feature .feature-box:hover .box-content .heading, main .bronze-feature .feature-box:focus .box-content .heading { margin-top: 30px; } } @media screen and (max-width: 950px) { main .bronze-feature .feature-box { width: 50%; } } @media screen and (max-width: 450px) { main .bronze-feature .feature-box { width: 100%; float: none; height: 200px; } } @media screen and (max-width: 640px) { main .bronze-feature { margin-top: 0; } } main .below-feature { padding-bottom: 50px; } /* Bottom Content */ .bottom-content { padding: 70px 0; } @media screen and (max-width: 1100px) { .bottom-content { padding: 50px 0; } } .bottom-content.dark { background-color: #23272a; color: #ffffff; } .bottom-content.dark a { color: #26C0F0; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .bottom-content.dark a:hover { color: #FFF; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .bottom-content.dark a.btn-prime { color: #000; } .bottom-content.dark p { font-weight: 300; } .bottom-content.dark h2 { font-weight: 400; } .bottom-content.dark h2, .bottom-content.dark h3, .bottom-content.dark h4, .bottom-content.dark h5 { color: #ffffff; } .bottom-content.dark ul a { color: #ffffff; } .bottom-content.dark ul a:hover, .bottom-content.dark ul a:focus { color: #27c3f3; } .bottom-content.bg-image { background-image: url("/Content/images/machining-bg2.jpg"); background-position: bottom right; background-repeat: no-repeat; } .bottom-content.bg-image .content-inner { width: 60%; } @media screen and (max-width: 1500px) { .bottom-content.bg-image .content-inner.top { width: 80%; } } @media screen and (max-width: 1250px) { .bottom-content.bg-image .content-inner.top { width: 100%; } } @media screen and (max-width: 1250px) { .bottom-content.bg-image .content-inner { width: 70%; } } @media screen and (max-width: 1100px) { .bottom-content.bg-image .content-inner { width: 100%; } } .bottom-content.bg-image .content-inner .show_hide { display: none; } @media screen and (max-width: 950px) { .bottom-content.bg-image .content-inner .show_hide { display: block; cursor: pointer; color: #13baed; text-decoration: underline; } .bottom-content.bg-image .content-inner .show_hide:after { content: ''; display: inline-block; margin-left: 5px; border-top: 8px solid #ffffff; vertical-align: middle; border-right: 5px solid transparent; border-left: 5px solid transparent; } .bottom-content.bg-image .content-inner .show_hide.show:after { border-top: 0px; border-bottom: 8px solid #ffffff; vertical-align: middle; border-right: 5px solid transparent; border-left: 5px solid transparent; } } @media screen and (max-width: 950px) { .bottom-content.bg-image .content-inner .more { max-height: 0px; overflow: hidden; -webkit-transition: max-height ease .3s; -o-transition: max-height ease .3s; transition: max-height ease .3s; } .bottom-content.bg-image .content-inner .more.show { max-height: 1500px; -webkit-transition: max-height ease .5s; -o-transition: max-height ease .5s; transition: max-height ease .5s; } } @media screen and (max-width: 1500px) { .bottom-content.bg-image { background-position: 130% 100%; } } @media screen and (max-width: 1350px) { .bottom-content.bg-image { background-position: 150% 100%; } } @media screen and (max-width: 1250px) { .bottom-content.bg-image { background-position: 500px 50px; } } @media screen and (max-width: 1150px) { .bottom-content.bg-image { background-position: 400px 100px; } } @media screen and (max-width: 1100px) { .bottom-content.bg-image { background-image: url("/Content/images/machining-bg2-1000.jpg"); background-position: bottom right; } } /* Footer */ footer { background: #f6f6f6; color: #0d131a; padding: 50px 0; } footer .brand { display: block; float: left; width: 30%; } footer .brand .logo { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } footer .brand .logo:hover, footer .brand .logo:focus { -webkit-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); -webkit-transition: all ease .3s; -o-transition: all ease .3s; transition: all ease .3s; } @media screen and (max-width: 700px) { footer .brand .logo { margin: auto; width: 432px; } } footer .brand .address { display: block; margin: 15px 0; } footer .brand .address svg { color: #27c3f3; display: inline-block; vertical-align: middle; font-size: 18px; } footer .brand .address .address-inner { display: inline-block; vertical-align: middle; } @media screen and (max-width: 350px) { footer .brand .address .address-inner a { font-size: 12px; } } @media screen and (max-width: 1450px) { footer .brand .address .address-inner { font-size: 15px; } } footer .brand .phone-numbers { margin: 15px 0; } footer .brand .phone-numbers svg, footer .brand .phone-numbers img { color: #27c3f3; display: inline-block; vertical-align: middle; } footer .brand .phone-numbers img { padding-right: 5px; } footer .brand .phone-numbers a { display: inline-block; margin-right: 10px; } footer .brand .phone-numbers a.first { padding-right: 15px; border-right: 1px solid #b7b7b7; } @media screen and (max-width: 350px) { footer .brand .phone-numbers a { font-size: 12px; } } footer .brand .copyright { margin: 20px 0; color: #aaaaaa; font-size: 13px; line-height: 1.1em; } footer .brand .copyright span { display: block; } @media screen and (max-width: 1650px) { footer .brand { width: 25%; } } @media screen and (max-width: 1300px) { footer .brand { width: 40%; padding-right: 50px; } } @media screen and (max-width: 970px) { footer .brand { float: none; width: 550px; margin: 0 auto; } } @media screen and (max-width: 700px) { footer .brand { width: 100%; text-align: center; padding-right: 0; } } footer .footer-nav { display: block; float: left; width: 70%; text-align: right; } footer .footer-nav .footer-box { display: inline-block; vertical-align: top; width: 23%; text-align: left; padding-right: 20px; position: relative; } footer .footer-nav .footer-box .link-heading { font-weight: 600; letter-spacing: .05em; } @media screen and (max-width: 640px) { footer .footer-nav .footer-box .link-heading { margin-top: 20px; } } footer .footer-nav .footer-box .box-inner { margin-bottom: 20px; position: relative; } @media screen and (max-width: 640px) { footer .footer-nav .footer-box .box-inner { margin-bottom: 10px; } } footer .footer-nav .footer-box ul { margin: 0; list-style: none; } footer .footer-nav .footer-box ul li { line-height: 1em; margin: 10px 0; } footer .footer-nav .footer-box ul li a { font-size: 14px; font-weight: normal !important; } footer .footer-nav .footer-box .footer-toggle { display: none; } @media screen and (max-width: 640px) { footer .footer-nav .footer-box .footer-toggle { display: block; position: absolute; visibility: hidden; left: -200vw; } } footer .footer-nav .footer-box .footer-toggle ~ label { display: none; } @media screen and (max-width: 640px) { footer .footer-nav .footer-box .footer-toggle ~ label { display: block; position: absolute; width: 50px; height: 25px; top: 0; right: 5%; cursor: pointer; } footer .footer-nav .footer-box .footer-toggle ~ label span { display: block; width: 10px; border-top: 10px solid #13baed; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media screen and (max-width: 350px) { footer .footer-nav .footer-box .footer-toggle ~ label { right: 1%; } } @media screen and (max-width: 640px) { footer .footer-nav .footer-box .footer-toggle ~ ul { max-height: 0; overflow: hidden; -webkit-transition: max-height ease .3s; -o-transition: max-height ease .3s; transition: max-height ease .3s; } } @media screen and (max-width: 640px) { footer .footer-nav .footer-box .footer-toggle:checked ~ ul { max-height: 500px; -webkit-transition: max-height ease .3s; -o-transition: max-height ease .3s; transition: max-height ease .3s; } footer .footer-nav .footer-box .footer-toggle:checked ~ label span { border-top: 0; border-bottom: 10px solid #13baed; border-left: 10px solid transparent; border-right: 10px solid transparent; } } @media screen and (max-width: 1300px) { footer .footer-nav .footer-box { width: 32%; } footer .footer-nav .footer-box:last-child { width: 100%; padding-right: 0; padding-left: 20px; } footer .footer-nav .footer-box:last-child .box-inner { display: inline-block; width: 32%; vertical-align: top; padding-right: 20px; margin-right: 5px; } } @media screen and (max-width: 1200px) { footer .footer-nav .footer-box:last-child .box-inner { margin-right: 0; } } @media screen and (max-width: 1150px) { footer .footer-nav .footer-box { width: 50%; display: block; float: left; } footer .footer-nav .footer-box:last-child { width: 50%; display: block; float: left; padding-left: 0; margin-top: 20px; } footer .footer-nav .footer-box:last-child .box-inner { width: 100%; display: block; padding: 0; } } @media screen and (max-width: 1000px) { footer .footer-nav .footer-box { width: 30%; } footer .footer-nav .footer-box:last-child { width: 30%; } } @media screen and (max-width: 970px) { footer .footer-nav .footer-box { width: 50%; } footer .footer-nav .footer-box:last-child { width: 50%; } } @media screen and (max-width: 640px) { footer .footer-nav .footer-box { width: 100%; float: none; text-align: center; padding-right: 0; margin-bottom: 15px; } footer .footer-nav .footer-box:last-child { width: 100%; margin-top: 0; } } @media screen and (max-width: 1650px) { footer .footer-nav { width: 75%; } } @media screen and (max-width: 1300px) { footer .footer-nav { width: 60%; } } @media screen and (max-width: 1000px) { footer .footer-nav { width: 100%; float: none; margin: 20px auto; } } @media screen and (max-width: 970px) { footer .footer-nav { width: 550px; } } @media screen and (max-width: 700px) { footer .footer-nav { width: 100%; text-align: center; } } footer a { color: #0d131a; text-decoration: none; } footer a:hover, footer a:focus { color: #27c3f3; } @media screen and (max-width: 1450px) { footer a { font-size: 14px; } } footer a.no-link:hover, footer a.no-link:focus { color: #0d131a; } @media screen and (max-width: 640px) { footer { padding: 30px 0; } } /* Error Page Styles */ .P--Error main { min-height: 500px; padding: 50px 0; } .P--Error main hr { background-color: #13baed; border: 0; height: 2px; } /* Content Grid */ img { display: block; max-width: 100%; height: auto !important; } .clear { clear: both; } .col-full, .col-half, .col-third, .col-twoThird, .col-four, .col-threeFourth, .col-five, .col-twoFifth, .col-threeFifth, .col-fourFifth, .col-six { float: left; padding-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; } .col-full ul, .col-half ul, .col-third ul, .col-twoThird ul, .col-four ul, .col-threeFourth ul, .col-five ul, .col-twoFifth ul, .col-threeFifth ul, .col-fourFifth ul, .col-six ul { margin-top: 0; margin-bottom: 0; } .padding-right { padding-right: 10px; } .padding-left { padding-left: 10px; } .col-half { width: 50%; } .col-two { -webkit-column-count: 2; column-count: 2; gap: 20px; max-width: 600px; } .col-third { width: 33.33333%; } @media screen and (max-width: 1000px) { .col-third { width: 50%; } } @media screen and (max-width: 640px) { .col-third { width: 100%; float: none; } } .col-four { width: 25%; } @media screen and (max-width: 1000px) { .col-four { width: 50%; } } @media screen and (max-width: 640px) { .col-four { width: 100%; float: none; } } .col-five { width: 20%; } .col-six { width: 16.66666667%; } .col-twoFifth { width: 40%; } .col-threeFifth { width: 60%; } .col-twoThird { width: 66.66666%; } .col-threeFourth { width: 75%; } .col-fourFifth { width: 80%; } @media screen and (max-width: 640px) { .mobileHide { display: none !important; } .mobileWidth100 { width: 100% !important; } .mobileWidth66 { width: 66.6666% !important; } .mobileWidth50 { width: 50% !important; } .mobileWidth33 { width: 33.3333% !important; } .mobileWidth25 { width: 25% !important; } .mobileWidth16 { width: 16.6666% !important; } .mobilePhotoLimit { overflow: hidden; } .desktopPhotoLimit:not(.mobilePhotoLimit), .tabletPhotoLimit:not(.mobilePhotoLimit) { height: 100% !important; } .mobileNoTranslateY { -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; } } #HomePage .content-container .col-four { width: 18%; } @media screen and (max-width: 1200px) { #HomePage .content-container .col-four { width: 25%; } } @media screen and (max-width: 800px) { #HomePage .content-container .col-four { width: 50%; } } @media screen and (max-width: 640px) { #HomePage .content-container .col-four { width: 100%; } } .metal-type-nav { clear: both; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 20px 0; } .metal-type-nav .cell-type { display: inline-block; width: 25%; padding: 20px; text-align: center; background-size: cover; background-position: center center; } .metal-type-nav .cell-type:nth-of-type(1) { background-image: url("/Content/images/backgrounds/NavCastIron.jpg"); } .metal-type-nav .cell-type:nth-of-type(2) { background-image: url("/Content/images/backgrounds/NavCastIronGrades.jpg"); } .metal-type-nav .cell-type:nth-of-type(3) { background-image: url("/Content/images/backgrounds/NavBronze.jpg"); } .metal-type-nav .cell-type:nth-of-type(4) { background-image: url("/Content/images/backgrounds/NavBronzeGrades.jpg"); } .metal-type-nav .cell-type a { color: #ffffff; } .metal-type-nav .cell-type h2 { font-size: 35px; letter-spacing: 0.8px; font-family: "League Gothic", Arial, Helvetica, sans-serif; color: #ffffff; margin-bottom: 20px; } .metal-type-nav .cell-type ul { margin: 10px 0 0; list-style: none; } .metal-type-nav .cell-type ul li { padding: 0; margin: 10px 0; } @media screen and (max-width: 1200px) { .metal-type-nav .cell-type { width: 50%; } } @media screen and (max-widtH: 640px) { .metal-type-nav .cell-type { width: 100%; border-top: 10px solid #ffffff; } } .location-breadcrumbs { padding: 20px 0; border-bottom: solid 1px #b7b7b7; } .location-breadcrumbs .grey { color: #b7b7b7; vertical-align: middle; } .location-breadcrumbs a { color: #000000; text-decoration: none; vertical-align: middle; } .location-breadcrumbs a:hover { color: #27c3f3; } .location-upper { display: table; width: 100%; } .location-upper .cell { display: table-cell; width: calc(100% - 580px); padding-right: 40px; vertical-align: top; } .location-upper .cell.image-cell { width: 580px; background-size: cover; background-position: center center; padding-right: 0; } @media screen and (max-width: 1300px) { .location-upper .cell { width: calc(100% - 490px); } .location-upper .cell.image-cell { width: 490px; } } @media screen and (max-width: 1200px) { .location-upper .cell { width: 100%; display: block; padding-right: 0; } .location-upper .cell.image-cell { text-align: center; margin: 0 auto; width: 100%; } .location-upper .cell.image-cell img { margin: 20px auto 0; } } .logo-container { margin-top: 40px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[8]; grid-template-columns: repeat(8, 1fr); grid-gap: 60px; grid-gap: clamp(30px, 3.125vw, 60px); place-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1000px) { .logo-container { -ms-grid-columns: 1fr clamp 1fr clamp 1fr clamp 1fr clamp 1fr clamp 1fr clamp 1fr clamp 1fr; grid-template-columns: repeat(8, 1fr); -ms-grid-rows: auto clamp auto; grid-template-areas: "a a b b c c d d" ". e e f f g g ."; } } .logo-container img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; } @media screen and (max-width: 1000px) { .logo-container img:nth-of-type(1) { grid-area: a; } .logo-container img:nth-of-type(2) { grid-area: b; } .logo-container img:nth-of-type(3) { grid-area: c; } .logo-container img:nth-of-type(4) { grid-area: d; } .logo-container img:nth-of-type(5) { grid-area: e; } .logo-container img:nth-of-type(6) { grid-area: f; } .logo-container img:nth-of-type(7) { grid-area: g; } } @media screen and (max-width: 1000px) { .logo-container img:nth-of-type(1) { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; } .logo-container img:nth-of-type(2) { -ms-grid-row: 1; -ms-grid-column: 5; -ms-grid-column-span: 3; } .logo-container img:nth-of-type(3) { -ms-grid-row: 1; -ms-grid-column: 9; -ms-grid-column-span: 3; } .logo-container img:nth-of-type(4) { -ms-grid-row: 1; -ms-grid-column: 13; -ms-grid-column-span: 3; } .logo-container img:nth-of-type(5) { -ms-grid-row: 3; -ms-grid-column: 3; -ms-grid-column-span: 3; } .logo-container img:nth-of-type(6) { -ms-grid-row: 3; -ms-grid-column: 7; -ms-grid-column-span: 3; } .logo-container img:nth-of-type(7) { -ms-grid-row: 3; -ms-grid-column: 11; -ms-grid-column-span: 3; } } .law-logo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin-left: -60px; } @media screen and (max-width: 1300px) { .law-logo { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: -150px; } } @media screen and (max-width: 1150px) { .law-logo { margin-top: unset; } } @media screen and (max-width: 640px) { .law-logo { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: unset; } } .law-logo img { max-width: 200px; } @media screen and (max-width: 1300px) { .law-logo img { margin-right: 40px; } } @media screen and (max-width: 1150px) { .law-logo img { margin-right: 80px; } } @media screen and (max-width: 970px) { .law-logo img { margin-right: 100px; } } @media screen and (max-width: 640px) { .law-logo img { margin-right: unset; } } .tab-panel.precise-split { margin-top: -20px; margin-bottom: 20px; border-bottom: 2px solid #033453; } .tab-panel.precise-split .containtab { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px 70px; } @media only screen and (max-width: 1000px) { .tab-panel.precise-split .containtab { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .tab-panel.precise-split .containtab .tab-img { float: none; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 50%; } @media only screen and (max-width: 1000px) { .tab-panel.precise-split .containtab .tab-img { width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .tab-panel.precise-split .containtab .tab-text { width: 50%; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } @media only screen and (max-width: 1000px) { .tab-panel.precise-split .containtab .tab-text { width: 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } .tab-panel.precise-split .containtab .tab-text .btn-prime { color: #ffffff; } .CNC-metals #contentImg { float: right; max-width: 350px; margin: 20px; } @media only screen and (max-width: 800px) { .CNC-metals #contentImg { float: none; margin: 20px 0; } } .map-container { background: #f6f6f6; display: -ms-grid; display: grid; -ms-grid-columns: 610px 1fr; grid-template-columns: 610px 1fr; gap: 100px; padding: 60px 5%; } @media only screen and (max-width: 1600px) { .map-container { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 80px; } } @media only screen and (max-width: 1000px) { .map-container { -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 40px; } } .map-container img { width: 100%; height: auto; max-width: 860px; margin-inline: auto; } .map-container .map-list { list-style-type: none; -webkit-column-count: 2; column-count: 2; padding: 0; margin: 40px 0 0; } .map-container .map-list li { font-family: "League Gothic", Arial, Helvetica, sans-serif; font-size: clamp(24px, 2.5vw, 35px); margin-bottom: clamp(5px, 1.5vw, 25px); } .gray-section { padding: 60px 5%; background: #f6f6f6; } .gray-section h2 { font-family: "League Gothic", Arial, Helvetica, sans-serif; font-size: clamp(28px, 2.5vw, 35px); margin-bottom: 30px; } .gray-section p { margin-bottom: 30px; } .gray-section p:last-of-type { margin-bottom: 0; } .gray-section .types { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; margin-block: 40px; gap: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 1000px) { .gray-section .types { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px 60px; } } .gray-section .types > div { position: relative; } .gray-section .bronze-feature { clear: both; margin-bottom: 30px; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); } @media only screen and (max-width: 1800px) { .gray-section .bronze-feature { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } } @media only screen and (max-width: 1050px) { .gray-section .bronze-feature { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } } @media only screen and (max-width: 700px) { .gray-section .bronze-feature { -ms-grid-columns: 100%; grid-template-columns: 100%; } } .gray-section .bronze-feature .feature-box { width: 100%; float: none; } .gray-section .bronze-feature .feature-box .bg-img { max-width: 103%; margin-left: -1px; width: 103%; } .white-section { padding: 60px 5%; } .white-section .center { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .white-section .icon-list { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; margin: 40px 0 60px; grid-row-gap: 80px; grid-column-gap: 100px; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style-type: none; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (max-width: 1000px) { .white-section .icon-list { grid-row-gap: 60px; grid-column-gap: 60px; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } } @media only screen and (max-width: 500px) { .white-section .icon-list { grid-row-gap: 30px; grid-column-gap: 30px; } } .white-section .icon-list li { width: 250px; text-align: center; } @media only screen and (max-width: 1000px) { .white-section .icon-list li { width: 200px; } } @media only screen and (max-width: 500px) { .white-section .icon-list li { width: 100px; } } .white-section .icon-list li a { display: -ms-grid; display: grid; -ms-grid-rows: 175px 1fr; grid-template-rows: 175px 1fr; gap: 10px; color: #000000; } @media only screen and (max-width: 1000px) { .white-section .icon-list li a { -ms-grid-rows: 150px 1fr; grid-template-rows: 150px 1fr; } } @media only screen and (max-width: 500px) { .white-section .icon-list li a { -ms-grid-rows: 100px 1fr; grid-template-rows: 100px 1fr; } } .white-section .icon-list li a img { max-width: 100%; display: block; height: auto; width: auto; max-height: 100%; margin-inline: auto; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; } .white-section .icon-list li a:hover img, .white-section .icon-list li a:focus img, .white-section .icon-list li a:active img { -webkit-filter: brightness(0); filter: brightness(0); } .main-split { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } @media only screen and (max-width: 1400px) { .main-split { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .main-split .right { position: relative; height: 100%; width: 100%; } @media only screen and (max-width: 1400px) { .main-split .right { aspect-ratio: 5/2; } } .main-split .right img { position: absolute; height: 100% !important; width: 100%; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; } .main-split .left { padding: 60px 5%; } .main-split .left .choose-versa { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 40px 0; list-style-type: none; } @media only screen and (max-width: 800px) { .main-split .left .choose-versa { display: -ms-grid; display: grid; grid-row-gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .main-split .left .choose-versa li { padding-left: 100px; font-size: 26px; width: auto; position: relative; display: inline-block; color: #27c3f3; font-family: "League Gothic", Arial, Helvetica, sans-serif; } @media only screen and (max-width: 1650px) { .main-split .left .choose-versa li { text-align: center; padding-left: 0; padding-top: 80px; } } @media only screen and (max-width: 1400px) { .main-split .left .choose-versa li { padding-left: 100px; text-align: left; padding-top: 0; } } .main-split .left .choose-versa li span { font-size: 32px; padding-bottom: 0; display: block; color: #000000; text-transform: uppercase; } .main-split .left .choose-versa li:before { width: 100px; height: 80px; content: ''; background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); left: 0px; background-position: center; } @media only screen and (max-width: 1650px) { .main-split .left .choose-versa li:before { top: 0; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; } } @media only screen and (max-width: 1400px) { .main-split .left .choose-versa li:before { top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); left: 0px; } } .main-split .left .choose-versa li.bulk:before { background-image: url("/Content/images/Secondary/bulkpricing-b.png"); } .main-split .left .choose-versa li.flex:before { background-image: url("/Content/images/Secondary/flexsupply-b.png"); } .main-split .left .choose-versa li.nation:before { background-image: url("/Content/images/Secondary/nationwideshipping-b.png"); } #DuctileIronBodyID main, #GrayIronBodyID main { padding-block: 0; } #HoustonTxBodyID .metal-type-nav { display: none; } /* Popup Styles added */ #popup-container { background-color: rgba(0, 0, 0, 0.8); position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100vw; height: 100vh; z-index: 99998; cursor: pointer; } #popup-content { background: #fff; background-size: cover; width: 600px; max-width: 95%; position: fixed; padding: 20px; display: block; color: #000; z-index: 9999; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #popup-content .popup-content img { max-width: 100%; } #popup-content .popup-content { padding: 10px 30px; line-height: 1.5; } #popup-content .popup-content p { font-size: 16px; } #popup-content .popup-content ul { padding: 10px 20px; font-size: 15px; } @media screen and (max-width: 640px) { #popup-content .popup-content p, #popup-content .popup-content ul { font-size: 14px; } } #popup-content .btn-wrapper { text-align: center; } #popup-content .btn-wrapper .btn_close { cursor: pointer; display: block; max-width: 300px; margin: auto; margin-bottom: 1.5em; } .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 99999; } .popup-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 8px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); text-align: center; } .popup-content h3 { margin: 0; font-size: 30px; font-family: "League Gothic", Arial, Helvetica, sans-serif; } .popup-content p { margin: 5px 0 25px; line-height: 1.35em; } .popup-content p strong { font-weight: bold; color: #000; } .popup-content img { margin: 0 auto; float: none; display: inline-block; } .popup-content a.btn_close.btn-prime.watermark { background: #324971; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .popup-content a.btn_close.btn-prime.watermark:hover { background: #000; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .close { position: absolute; top: 10px; right: 10px; font-size: 20px; cursor: pointer; } .red-top-banner { background-color: #BD2128; padding-block: 15px; padding-inline: clamp(20px, 5vw, 100px); text-align: center; } .red-top-banner:has(.rotate-promo-banner) { padding-inline: 0; } .red-top-banner p { margin: 0; } .red-top-banner .rotate-promo-banner { overflow: hidden; padding-block: 8px; position: relative; white-space: nowrap; padding-inline: clamp(20px, 5vw, 100px); } .red-top-banner .rotate-promo-banner .marquee-inner { position: absolute; white-space: nowrap; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; } .red-top-banner .rotate-promo-banner .promo { display: inline-block; color: white; margin-right: 60px; } .red-top-banner .rotate-promo-banner .promo span { font-weight: bold; position: relative; } .red-top-banner .rotate-promo-banner .promo span::before { content: ""; position: absolute; display: inline-block; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: -20px; width: 17px; height: 17px; background-image: url("/Content/images/starsvg1.png"); background-repeat: no-repeat; background-size: contain; margin-left: 5px; } .red-top-banner .rotate-promo-banner .promo a { color: white; }