#loadOverlay { display: none; } .cssLoading * { transition: none !important; } .alertify .ajs-dialog { top: 50%; transform: translateY(-50%); margin: auto; } /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * { margin: 0; padding: 0; } /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body { height: 100%; } #wrap { min-height: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; } #main, #main:empty ~ noscript { isolation: isolate; min-height: 100%; padding-bottom: 100px; } /* must be same height as the footer */ footer { position: relative; margin-top: -100px; /* negative value of footer height */ height: 100px; font-size: 15px; clear: both; } footer .inner { padding-bottom: 10px; } footer .row { height: 90px; } /* Opera Fix */ body::before { /* thanks to Maleika (Kohoutec) */ content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /* thank you Erik J - negate effect of float */ } /* IMPORTANT You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher. */ /* Theme Name: MeatKing Version: 1.14.20 Author: ThemeWagon Tiny bug when width <780px, there an horizontal scrollbar TABLE OF CONTENTS 01 - General and Typography 02 - Header 03 - Navigation 04 - Parallax 05 - What/How 06 - Form 07 - Footer 08 - Responsive styles 09 - Ribbon 10 - Modal 11 - Readability 12 - Widgets 13 - Tooltip */ /* ========================================================================== 01. General and Typography ========================================================================== */ @font-face { font-family: kreon; src: url(/fonts/Kreon-VariableFont_wght.ttf?24b9456f88467b6c8f1b9abd8448d45f) format("truetype"); } html { font-size: 14px; } body { font-family: kreon, serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } img { max-height: 100%; max-width: 100%; } .light-wrapper section { position: relative; padding: 0; background: #f0a830; color: #fff; text-align: center; } .light-wrapper section::before, .light-wrapper section::after, .dark-wrapper section::before, .dark-wrapper section::after { position: absolute; content: ""; } @-moz-document url-prefix() { fieldset { display: table-cell; } } /* Separators Styles */ .ss-style-top::before { left: 0; width: 100%; height: 30px; background-size: 25px 100%; top: 0; background-image: linear-gradient(315deg, #fff 50%, transparent 50%), linear-gradient(45deg, #fff 50%, transparent 50%); margin-top: -30px; z-index: 1; } .ss-style-bottom::before { left: 0; width: 100%; height: 30px; background-size: 25px 100%; top: 0; background-image: linear-gradient(583deg, #fff 50%, transparent 50%), linear-gradient(136deg, #fff 50%, transparent 50%); margin-top: 0; z-index: 1; } #main .light-wrapper:last-of-type .ss-style-bottom { display: none; } [v-cloak] { display: none; } .v-rcloak { display: none; } [v-cloak] ~ .v-rcloak { display: block; } a.link { cursor: pointer; } /* ========================================================================== 03. Navigation ========================================================================== */ #menu { background: rgba(33, 45, 57, 0.8); margin-bottom: 0; } nav#navbar { width: 100%; display: flex; } .navbar-brand h2 { margin-top: 0; font-weight: bold; color: white; } .navbar-brand { padding-top: 8px; padding-bottom: 0; } .navbar .navbar-nav > li > a { transition: all 0.4s; color: white; font-weight: bold; padding: 15px; line-height: 20px; display: block; } .navbar .navbar-nav > li > a:hover, .narbar .navbar-nav > .active > a { background: #a00; color: white; text-shadow: none; } .nav.navbar-nav-left { display: inline-flex; justify-content: flex-end; flex: 1; margin-right: 60px; } .nav.navbar-nav-right { display: inline-flex; justify-content: flex-start; flex: 1; margin-left: 60px; } #logo { position: absolute; display: block !important; width: 110px; left: 50%; margin-left: calc(-55px - 0.5rem); /* Don't forget half the padding of .navbar */ background: #212d39; border-radius: 0 0 100% 100%; padding: 12px; top: 0; background-image: url(/images/logo.webp?d55daf5d9c3e68b4c7bdbde22567185b); background-size: 86px; background-repeat: no-repeat; background-position: center center; height: 110px; } body.nowebp #logo { background-image: url(/images/logo.png?8b5c397831e0659fd4032153029b9533); } #logo a { width: 100%; height: 100%; display: inline-block; } /* ========================================================================== 06. Content ========================================================================== */ #content { padding-top: 140px; padding-bottom: 60px; } /* ========================================================================== 07. Footer ========================================================================== */ .dark-wrapper { background: #b50119; color: white; font-weight: bold; } .dark-wrapper .ss-style-top::before { background-image: linear-gradient(315deg, #b50119 50%, transparent 50%), linear-gradient(45deg, #b50119 50%, transparent 50%); } .themeBy { color: #a00; background: white; } footer .row { display: flex; } /* ========================================================================== 08. Responsive styles ========================================================================== */ @media (max-width: 767px) { .navbar { min-height: 30px; } #logo { transition: all 0.3s ease; } body.scrolled #logo { width: 60px; margin-left: -30px; } .navbar-nav > li.btn-group { margin: 0 10px; } } @media (min-width: 768px) { html .navbar-nav { float: none !important; width: 100%; text-align: center; margin-left: -16px; } html:lang(en) .navbar-nav { margin-left: 13px; } .navbar-nav > li { display: inline-block; float: none; } .navbar-nav > li.btn-group { margin: 0 15px; } } /* ========================================================================== 09. Ribbon ========================================================================== */ #ribbon { display: none; } @media screen and (min-width: 768px) { #ribbon { position: fixed; display: block; top: -30px; right: 0; width: 105px; overflow: visible; height: 135px; z-index: 9999; } #ribbon a { background: #a00; color: #fff; text-decoration: none; font-family: arial, sans-serif; text-align: center; font-weight: bold; padding: 5px 40px; line-height: 20px; transition: background 0.5s, color 0.5s; width: 200px; position: absolute; top: 55px; right: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8); } #ribbon a:hover { background: #c00; color: #fff; } #ribbon a::before, #ribbon a::after { content: ""; width: 100%; display: block; position: absolute; top: 1px; left: 0; height: 1px; background: #fff; } #ribbon a::after { bottom: 1px; top: auto; } } /* ========================================================================== 10. Modal ========================================================================== */ .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 500px; margin: 0 auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header h3 { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } /* * The following styles are auto-applied to elements with * transition="modal" when their visibility is toggled * by Vue.js. * * You can easily play with the modal transition by editing * these styles. */ .modal-enter { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter .modal-container, .modal-leave-active .modal-container { transform: scale(1.1); } /* ========================================================================== 11. Readability ========================================================================== */ .btn-outline-success { color: #2c642c; border-color: #2c642c; } .btn-success, .btn-outline-success:not([disabled]):hover { background-color: #2c642c; border-color: #2c642c; } .btn-outline-danger { color: #a82824; border-color: #a82824; } .btn-danger, .btn-outline-danger:not([disabled]):hover { background-color: #a82824; border-color: #a82824; } .btn-outline-warning { color: #9c5a05; border-color: #9c5a05; } .btn-warning, .btn-outline-warning:not([disabled]):hover { background-color: #9c5a05; border-color: #9c5a05; color: #fff; } .btn-primary, .btn-outline-primary:not([disabled]):hover { background-color: #275c8b; border-color: #275c8b; } .btn[disabled] { opacity: 0.35; } .table-hover tbody tr:focus-within { color: #212529; background-color: rgba(0, 0, 0, 0.175); } /* ========================================================================== 12. Widgets ========================================================================== */ .card-title { font-weight: bold; text-transform: uppercase; } @font-face { font-family: Cookie; src: url(/fonts/Cookie-Regular.ttf?561be922e1551bfac194b0f364837e41) format("truetype"); } .bmc-button { height: 60px; display: inline-flex; align-items: center; color: #ffffff; background-color: #DD6F36; border-radius: 12px; border: 1px solid transparent; padding: 0 24px 0 57px; font-size: 22px; letter-spacing: 0.6px; box-shadow: 0px 1px 2px rgba(190, 190, 190, 0.5); -webkit-box-shadow: 0px 1px 2px 2px rgba(190, 190, 190, 0.5); font-family: "Cookie", cursive; box-sizing: border-box; transition: 0.3s all linear; background-image: "../images/BMC Logo - Black.png"; background-image: -webkit-image-set("/images/BMC Logo - Black.webp?37e6b6e3b2212d971f9ff3b3cefb821a", "/images/BMC Logo - Black.png?9735372c55c8679a091ccac657b06bd9"); background-image: image-set("/images/BMC Logo - Black.webp?37e6b6e3b2212d971f9ff3b3cefb821a", "/images/BMC Logo - Black.png?9735372c55c8679a091ccac657b06bd9"); background-size: 25px 33px; background-repeat: no-repeat; background-position: 24px; } /** Wasted **/ @font-face { font-family: "GTA"; src: url(/fonts/pricedownbl.ttf?e2f4d74b6713c71676ed9edb5c89d1a8) format("truetype"); } .wasted { font-family: "GTA"; color: red; position: absolute; width: 100%; background-color: grey; z-index: 10; text-align: center; top: 50%; transform: translate(0, -50%); height: 2em; font-size: 44px; line-height: 2em; -webkit-clip-path: polygon(0% 15%, 100% 0, 100% 100%, 0 85%); clip-path: polygon(0% 15%, 100% 0, 100% 100%, 0 85%); opacity: 0.9; } /** Polaroid **/ .polaroid-wrapper { width: 100%; padding: 0 2rem; text-align: center; } .polaroid { position: relative; background: #fff; padding: 1rem; box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.2); background-image: url(/images/404-1.webp?9bd8a21d35069e87e04939622fc00902); background-origin: content-box; background-size: cover; background-repeat: no-repeat; background-position: center center; height: 19vw; } body.nowebp .polaroid { background-image: url(/images/404-1.jpg?378cd76b4f14843f04c66063787cc55f); } .polaroid .caption { font-size: 1.8rem; text-align: center; line-height: 2em; min-height: 2em; } .polaroid-wrapper .item { width: 30%; display: inline-block; } .polaroid-wrapper .item .polaroid:before { content: ""; position: absolute; z-index: -1; transition: all 0.35s; } .polaroid-wrapper .item:nth-of-type(4n+1) { transform: scale(0.8, 0.8) rotate(5deg); transition: all 0.35s; } .polaroid-wrapper .item:nth-of-type(4n+1) .polaroid:before { transform: rotate(6deg); height: 20%; width: 47%; bottom: 30px; right: 12px; box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4); } .polaroid-wrapper .item:nth-of-type(4n+2) { transform: scale(0.8, 0.8) rotate(-5deg); transition: all 0.35s; } .polaroid-wrapper .item:nth-of-type(4n+2) .polaroid:before { transform: rotate(-6deg); height: 20%; width: 47%; bottom: 30px; left: 12px; box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.4); } .polaroid-wrapper .item:nth-of-type(4n+4) { transform: scale(0.8, 0.8) rotate(3deg); transition: all 0.35s; } .polaroid-wrapper .item:nth-of-type(4n+4) .polaroid:before { transform: rotate(4deg); height: 20%; width: 47%; bottom: 30px; right: 12px; box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3); } .polaroid-wrapper .item:nth-of-type(4n+3) { transform: scale(0.8, 0.8) rotate(-3deg); transition: all 0.35s; } .polaroid-wrapper .item:nth-of-type(4n+3) .polaroid:before { transform: rotate(-4deg); height: 20%; width: 47%; bottom: 30px; left: 12px; box-shadow: 0 2.1rem 2rem rgba(0, 0, 0, 0.3); } .polaroid-wrapper .item:hover { filter: none; transform: scale(1, 1) rotate(0deg) !important; transition: all 0.35s; filter: grayscale(100%); } .polaroid-wrapper .item:hover .polaroid:before { content: ""; position: absolute; z-index: -1; transform: rotate(0deg); height: 90%; width: 90%; bottom: 0%; right: 5%; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); transition: all 0.35s; } /*.polaroid-wrapper .item:hover .polaroid { filter: grayscale(100%); }*/ .polaroid-wrapper .item .wasted { display: none; width: calc(100% - 2rem); margin-left: 1rem; color: black; } .polaroid-wrapper .item:hover .wasted { display: block; } /** **/ .error-content { margin-top: 30px; } .section-title { font-size: 36px; line-height: 40px; text-transform: uppercase; margin-bottom: 15px; font-weight: 600; } .lead { font-size: 17px; line-height: 24px; font-weight: normal; text-transform: uppercase; color: #2e2e2e; position: relative; margin-bottom: 44px; } .lead::after { position: absolute; content: " "; background: #ed0121; width: 80px; height: 3px; bottom: -22px; left: 50%; margin-left: -40px; } /* ========================================================================== 02. Header ========================================================================== */ #header { background-image: url(/images/gifts-1.webp?22001d161c1719690a572fd0f9f2c7c3); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; position: relative; } body.nowebp #header { background-image: url(/images/gifts-1.jpg?96982ade072d2e74280c065031604ac8); } #header .center { position: relative; z-index: 1; color: white; padding: 70px 0; } #header .bottom { color: white; } #header .center .slogan { font-size: 26px; text-transform: uppercase; } #header .banner h1 { font-size: 100px; color: white; text-transform: uppercase; font-weight: bold; display: inline-block; background: #a00; padding: 0 18px; } #header .subtitle h4 { display: inline-block; background: white; color: #a00; font-size: 38px; padding: 0 15px; } #header .bottom { text-align: center; width: 100%; position: absolute; bottom: 30px; } #header .bottom a { font-size: 36px; color: whitesmoke; position: relative; top: -5px; } .bg-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(44, 33, 5, 0.2); z-index: 0; } /* ========================================================================== 04. Parallax ========================================================================== */ .parallax { background: url(/images/gifts-2.webp?e80243789805d1ea7d1d26523367527e) fixed no-repeat center center; background-size: cover; position: relative; color: #fff; } body.nowebp .parallax { background-image: url(/images/gifts-2.jpg?c292d7be15f962a3277d874665b28121); } .parallax .inner { padding-top: 130px; padding-bottom: 130px; } .parallax.parallax2 { background-image: url(/images/gifts-3.webp?5f3fe5a48f2257d8536ac7bc3ce63e30); } body.nowebp .parallax.parallax2 { background-image: url(/images/gifts-3.jpg?29e54931f9dd9830a68a8ee6d63e3125); } /* ========================================================================== 05. What/How ========================================================================== */ .light-wrapper { background: #fbfbfb; } .light-wrapper .inner { padding-top: 50px; padding-bottom: 50px; } .section-title { font-size: 36px; line-height: 40px; text-transform: uppercase; margin-bottom: 15px; font-weight: 600; } .main.lead { margin-bottom: 80px; } .lead { font-size: 17px; line-height: 24px; font-weight: normal; text-transform: uppercase; margin-bottom: 15px; color: #2e2e2e; position: relative; } .lead::after { position: absolute; content: " "; background: #a00; width: 80px; height: 3px; bottom: -22px; left: 50%; margin-left: -40px; } .media { min-height: 128px; } .media-icon-left { background-position-x: left; padding-left: 128px; } .media-icon-right { background-position-x: right; padding-right: 128px; } .media-calendar-icon { background-image: url(/images/calendar-icon.png?d861f75478deb063e55b116ad32f378a); background-image: -webkit-image-set(url(/images/calendar-icon.webp?f5673d04202f946c83ebe495b1f78a4a), url(/images/calendar-icon.png?d861f75478deb063e55b116ad32f378a)); background-image: image-set(url(/images/calendar-icon.webp?f5673d04202f946c83ebe495b1f78a4a), url(/images/calendar-icon.png?d861f75478deb063e55b116ad32f378a)); background-repeat: no-repeat; } .media-user-icon { background-image: url(/images/user-icon.png?4e8bdc10cc69ce779ff4d29a65a9c25a); background-image: -webkit-image-set(url(/images/user-icon.webp?2f2297230c6fbf2cd887893ed71a1dd7), url(/images/user-icon.png?4e8bdc10cc69ce779ff4d29a65a9c25a)); background-image: image-set(url(/images/user-icon.webp?2f2297230c6fbf2cd887893ed71a1dd7), url(/images/user-icon.png?4e8bdc10cc69ce779ff4d29a65a9c25a)); background-repeat: no-repeat; } .media-paper-icon { background-image: url(/images/paper-icon.png?2a5d292a8b496cdf648a42a0b4e5a344); background-image: -webkit-image-set(url(/images/paper-icon.webp?3749f36e12f3f4f483febcbbcae73883), url(/images/paper-icon.png?2a5d292a8b496cdf648a42a0b4e5a344)); background-image: image-set(url(/images/paper-icon.webp?3749f36e12f3f4f483febcbbcae73883), url(/images/paper-icon.png?2a5d292a8b496cdf648a42a0b4e5a344)); background-repeat: no-repeat; } .media-mail-icon { background-image: url(/images/mail-icon.png?e1ef80463064c32bda056170d847c094); background-image: -webkit-image-set(url(/images/mail-icon.webp?bcf82e3e2643068793d3e229b5b73201), url(/images/mail-icon.png?e1ef80463064c32bda056170d847c094)); background-image: image-set(url(/images/mail-icon.webp?bcf82e3e2643068793d3e229b5b73201), url(/images/mail-icon.png?e1ef80463064c32bda056170d847c094)); background-repeat: no-repeat; } .media-clock-icon { background-image: url(/images/clock-icon.png?0c4c7fe9aa7d01fd40a1b452d9e0b08a); background-image: -webkit-image-set(url(/images/clock-icon.webp?15539e088777867747c408d5b7e382de), url(/images/clock-icon.png?0c4c7fe9aa7d01fd40a1b452d9e0b08a)); background-image: image-set(url(/images/clock-icon.webp?15539e088777867747c408d5b7e382de), url(/images/clock-icon.png?0c4c7fe9aa7d01fd40a1b452d9e0b08a)); background-repeat: no-repeat; } .media-body { width: auto; text-align: left; margin: auto; } .media-heading { font-weight: bold; } div.card-body { font-style: italic; } div.card-body::first-line { font-weight: bold; font-style: normal; text-transform: uppercase; }