/* Theme Name: Hugg and Hall Bobcat Dealer Site 2024 Author: Sharp Hue Version: 2024 */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); /* INDEX - Defaults - Sections - Buttons - Button Group - Links - List Items - Table - Form - Field Group - Grid - Widths - Flex - Fonts - Positioning - Spacing - Padding - Margin - Color - Border - Cards - Modal - Alerts - Tool Tip */ /*Defaults*/ * { box-sizing: border-box; padding: 0; margin: 0; outline: none; } html, body { background-color: white; min-width: 320px; } img { max-width: 100%; height: auto !important; } button { background: none; border: none; cursor: pointer;} .pointer { cursor: pointer; } /*Sections*/ .wrapper { background-color: none; } .container { padding: 30px; max-width: 1400px; margin: 0 auto; } .content { height: calc(100vh + -111px); } /* Buttons */ .btn { font-size: 18px; font-weight: 700; padding: 10px 30px; border-radius: 5px; background-color: #FF3600; color: #fff !important; cursor: pointer; border: none; text-decoration: none; } .btn:hover {background:#c92b00; transition: ease-in-out .2s} .btn.inline { display: inline-block; } .btn.block { display: block; width: 100%; } .btn [type="checkbox"], .btn [type="radio"] { vertical-align: middle; } .btn.outline {border: 3px solid #FF3600; color: #FF3600; background: none; padding: 7px 30px; } .btn.outline:hover {background: #c92b00; color: #fff;} .btn.white { color: #FF3600 !important; background-color: #FFF; } .btn.skinny { padding: 10px 17px; } .btn i { margin-right: 4px; } .btn.forward { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 0; } .btn.back { display: flex; justify-content: center; align-items: center; width: initial; } .btn-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20px; font-size: 18px; line-height: 21px; border-radius: 0; height: initial; box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.202);z-index:2;} .btn.left-icon i {padding-right: 10px;} .btn.right-icon i {padding-left: 10px;} .btn.bg-none {background: none; color: #1076F4;} .btn.bg-none:hover {color:#c92b00; transition: ease-in-out .2s; background-color: #e4effd !important;} .btn.black {background:#333;} .sm-btn { font-size: 13px; font-weight: 600; padding: 6px 20px; border-radius: 5px; background-color: #1076F4; color: #fff; cursor: pointer; border: none; text-decoration: none; } .sm-btn:hover { background: #c92b00; transition: ease-in-out .2s} .sm-btn.outline { border: 2px solid #FF3600; color: #FF3600; background: none; padding: 4px 20px; } .sm-btn.outline:hover { background: #c92b00; color: #fff; } .sm-btn.bg-none { background: none; color: #FF3600; } .sm-btn.bg-none:hover { color:#c92b00; transition: ease-in-out .2s; background-color: #e4effd !important;} .btn.disabled { background-color: #dedede; color: #7d7d7d; } .btn.pill { border-radius: 32px; } .sm-btn.pill { border-radius: 22px !important; } .btn-group { display: flex; justify-content: center; border-radius: 5px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.078); text-align: center;} .btn-group > * { flex-grow: 1; border-radius: 0; border: 1px solid #E2E6EA; } .btn-group > *:first-child, .btn-group > *:first-child > span { border-radius: 5px 0 0 5px; } .btn-group > *:last-child, .btn-group > *:last-child > span { border-radius: 0 5px 5px 0; border-right: none; } .btn-group *:checked + label, .btn-group *:checked + span, .btn-group > *:hover, .btn-group > *.active { background: none; color: #1076F4; } .btn-group *:checked + span { background-color: #1076f6; color: #fff; } /* Links */ .lnk, .lnk:visited { display: inline-block; text-decoration: none;} .lnk:hover { text-decoration: underline; } .lnk.underline { text-decoration: underline; } /* List Items */ .list-item { display: block; padding: 10px; border-bottom: 1px solid #ccc; } .list-item:last-child { border-bottom: none; } /* Table */ .table { font-size: 14px; width: 100%; border-collapse: collapse; } .table.striped-odd tr:nth-child(odd), .table.striped-even tr:nth-child(even) { background: #fff; } .table th, .table td { padding: 15px 5px 15px 10px; border-bottom: 1px solid rgb(224, 224, 224); text-align: center;} .table tr:last-child td{ border-bottom: none; } .table > * td, .table > * tr { text-align: left !important; } .table.less-padding td { padding: 5px 10px 5px 0; } .table th.text-right, .table td.text-right { padding: 15px 10px 15px 5px; } .table.bordered td { border: 1px solid #E2E6EA;} .table.bordered-first-col td { border: none; } .table.bordered-first-col td:first-child { border-right: 1px solid #E2E6EA; } .table.top > * { vertical-align:top; } @media (max-width: 700px) { .table th { display: none; } .table tr, .table td { border: none; display: block; width: 100%; background-color: white; text-align: right; border:1px solid rgb(201, 199, 199) } .table tr { margin-bottom: 30px; } .table td::before { content: attr(data-label); position: absolute; left:0; padding-left: 40px;} .table tr td { text-align: right !important; padding-left: 50%; padding-right: 10px;} } /* Form */ .field { position: relative; display: block;} .field .item { padding: 0 15px; height: 40px; width: 100%; background-color: #fff; border: 1px solid #c5cad0; border-radius: 5px; position: relative; text-align: left; font-size: 16px; font-weight: 400; font-family: 'Montserrat', sans-serif; } .field .disabled { background: #eee; } .field select.item.box, .field button.item.box { cursor: pointer; font-weight: 600; color: #1076f6; border: 1px solid #E2E6EA; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15); } .field textarea.item { min-height: 120px; padding: 15px; height: auto; min-width: 100%; max-width: 100%; } .field.dropdown select { -moz-appearance: none; -webkit-appearance: none; appearance: none; } .field.dropdown:after { right: 16px; top: 16px; border-top: 8px solid #1076f6; border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; display: inline-block; position: absolute; height: 0; width: 0; } .field [class*="fa-"] { font-size: 18px; padding: 0 10px; color: #1076f6; } .field .icon { z-index: 2; position: absolute; left: 5px; top: 56%; transform: translate(0%, -50%); } .field .icon:last-child { left: auto; right: 5px; } .field .item:focus { border-color: #888; } .field .text-anger span, .field .error span { display: block; padding: 5px 0; color: #FF0000; } .check, .radio { padding: 5px 0; display: flex; align-items: center; gap: 10px; cursor: pointer; } .check input, .radio input { width: 16px; height: 16px; } .check:hover input, .radio:hover input { border-color: #000; } .check.large input { width: 25px; height: 25px } .check.box { display: flex; justify-content: flex-start; align-items: center; gap: 10px; border: 1px solid; border-radius: 5px; padding: 10px; border-color: #D3D3D3; } .check.box > label { cursor: pointer; } .field-validation-error { display:inline-block; padding-top:5px; color:#FF0000; } .field.group { display: flex; padding-bottom: 30px;} .field.group i { color: white;} .field.group .btn { padding: 10px 20px; margin-bottom: 0; border-radius: 0 !important;} .field.group input { padding-left: 8px; border-radius: 5px;} .field.group select { padding-left: 5px;} .field.group > * { width: 100%; } .field.group > *:not(:first-child), .field.group > *:not(:last-child) { border-radius: 0 !important; border: none; border: 1px solid #6c6c6c;} .field.group > *:first-child { border-radius: 5px 0 0 5px !important; } .field.group > *:last-child { border-radius: 0 5px 5px 0 !important; } /* Grid */ .grid { display: grid; } .grid.col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid.col-1 { grid-template-columns: 1fr; } .grid.col-2 { grid-template-columns: 1fr 1fr; } .grid.col-3 { grid-template-columns: 1fr 1fr 1fr; } .grid.col-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } .grid.col-5 { grid-template-columns: repeat( 5, 1fr ); } .grid.col-6 { grid-template-columns: repeat( 6, 1fr ); } .grid.col-7 { grid-template-columns: repeat( 7, 1fr ); } .grid.col-8 { grid-template-columns: repeat( 8, 1fr ); } .grid.col-9 { grid-template-columns: repeat( 9, 1fr ); } .grid.row-1 { grid-template-rows: 1fr;} .grid.row-2 { grid-template-rows: 1fr 1fr; } .grid.row-3 { grid-template-rows: 1fr 1fr 1fr; } .grid.row-4 { grid-template-rows: 1fr 1fr 1fr 1fr; } .grid.row-5 { grid-template-rows: repeat( 5, 1fr ) } .grid.row-6 { grid-template-rows: repeat( 6, 1fr ) } .grid.row-7 { grid-template-rows: repeat( 7, 1fr ) } .grid.row-8 { grid-template-rows: repeat( 8, 1fr ) } .grid.row-9 { grid-template-rows: repeat( 9, 1fr ) } .grid.center, .grid > *.center { justify-content: center; align-items: center;} .grid.center-v { align-items: center;} .grid.center-h { justify-content: center;} /* Widths */ .w-100 { width: 100% !important; } .w-75 { width: 75% !important; } .w-50 { width: 50% !important; } .w-55 { width: 55% !important; } .w-60 { width: 60%; } .w-70 {width: 70%;} .w-35 { width: 35% !important; } .w-333 { width: 33.333333333% !important; } .w-25 { width: 25% !important; } .w-25-40 { width: calc(25% - 30px); } .w-initial { width: initial !important; } .max-w-1000 { max-width: 1000px; } .max-w-600 { max-width: 600px; } .max-w-400 { max-width: 400px; } @media (max-width: 1000px) { .w-100-md { width: 100% !important; } .w-50-md { width: 50% !important; } .w-333-md { width: 33.333333333% !important; } .w-25-md { width: 25% !important; } } @media (max-width: 800px) { .wrap-800 { flex-wrap: wrap;} .w-100-smd { width: 100% !important;} .w-50-smd { width: 50% !important;} .w-333-smd { width: 33.333333% !important;} .w-25-smd { width: 25% !important;} } @media (max-width: 600px) { .w-100-sm { width: 100% !important; } .w-50-sm { width: 50% !important; } .w-333-sm { width: 33.333333333% !important; } .w-25-sm { width: 25% !important; } } @media (max-width: 400px) { .w-100-xs { width: 100% !important; } .w-50-xs { width: 50% !important; } .w-333-xs { width: 33.333333333% !important; } .w-25-xs { width: 25% !important; } } /* Flex */ .flex { display: flex; } .flex.start { justify-content:flex-start; } .flex.end { justify-content: flex-end; } .flex.center { justify-content: center; align-items: center; } .flex.center-h { justify-content: center; } .flex.center-v { align-items: center; } .flex.align-end { align-items: end; } .flex.between { justify-content: space-between; } .flex.evenly { justify-content: space-evenly; } .flex.stretch { align-items: stretch; } .flex.start { align-items: start; } .flex.wrap { flex-wrap: wrap; } .flex.nowrap { flex-wrap: nowrap; } .flex.row { flex-direction:row; } .flex.column { flex-direction: column; } .flex.gap-5 { gap: 5px; } .flex.gap-10 { gap: 10px; } .flex.gap-15 { gap: 15px; } .flex.gap-20 { gap: 20px; } .flex.gap-30 { gap: 30px; } .flex.gap-40 { gap:40px; } .flex.gap-50 { gap:50px; } .flex.basis-auto { flex-basis: auto; } .flex.basis-100 > *, .flex >.basis-100 { flex-basis: 100%; } .flex.grow > *, .flex >.grow { flex-grow: 1; } .flex >.nogrow { flex-grow: 0;} .flex.shrink-0 > *, .flex >.shrink-0 { flex-shrink: 0; } .flex.gap-20 > .w-50 { width:calc(50% - 20px) !important; } .flex.gap-20 > .w-333 { width:calc(33.3333333% - 20px) !important; } .align-self-start { align-self: flex-start;} @media ( max-width: 1200px ) { .flex.wrap-1200 {flex-wrap: wrap; } } @media ( max-width: 1000px ){ .flex.wrap-1000 { flex-wrap: wrap; } } /* Display */ .inline {display: inline-block;} /* Fonts */ body { font-size: 16px; font-family: 'Roboto', sans-serif; } button { font-family: 'Roboto', sans-serif;} input, select, textarea { font-size: 16px; font-family: 'Roboto', sans-serif; } h1 { font-size: 45px; line-height: 55px; font-weight: 700; } h2 { font-size: 35px; line-height: 1.2; font-weight: 700; } h3 { font-size: 30px; line-height: 1.2; font-weight: 700; } h4, h5, h6 { font-size: 25px; line-height: 1.2; font-weight: 700; } p, div, span, li { line-height: 1.5; } h1, h2, h3, h4, h5 { color: #000; } p a { color: #1076F4; text-decoration: none; } p a:hover { text-decoration: underline; } .fs-0 { font-size: 0px; } .fs-13 { font-size: 13px; } .fs-14 { font-size: 14px; } .fs-15 { font-size: 15px; } .fs-18 { font-size: 18px; line-height: 24px; } .fs-20 { font-size: 20px; } .fs-22 { font-size: 22px; line-height: 32px; } .fs-24 { font-size: 24px; } .fs-25 { font-size: 25px; } .fs-26 { font-size: 26px; } .fs-30 { font-size: 30px; line-height: 55px; } .fs-35 { font-size: 35px !important; } .fs-45 { font-size: 45px; line-height: 59px; } .fs-50 { font-size: 50px !important; } .fs-60 { font-size: 60px; line-height: 70px; } .fw-300 { font-weight: 300 !important; } .fw-400 { font-weight: 400 !important; } .fw-500 { font-weight: 500 !important; } .fw-600 { font-weight: 600 !important; } .fw-700 { font-weight: 700; } .ul > li { list-style: none; padding-left: 20px; } .ul > li:before { content: "\2022"; width: 20px; font-size: 50px; position: absolute; transform: translate(-100%, -12%); color: #002855; } .ls-none { list-style: none;} .no-dec { text-decoration: none;} .bold { font-weight: bold; } .italic { font-style: italic; } .nowrap { white-space: nowrap; } .uppercase { text-transform:uppercase; } .sup { vertical-align: super; } sup::after { font-size: 25px; content: attr(data-text); font-weight: 700;} sup {font-size: 0.5em;} /* Positioning */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .cover { top:0; right:0; bottom:0; left:0; } .top-0 { top: 0; } .bot-0 { bottom: 0; } .left-0 { left: 0; } .right-0 { right: 0; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .pull-left { margin-right: auto; } .pull-right { margin-left: auto; } .float-left { float: left; } .float-right { float: right; } .clear-floats { clear: both; } .h-100 { height: 100% !important; } /* Displays */ .d-hidden { display: none; } .d-inline { display: inline;} .d-inline-b { display: inline-block; } .d-inline-b-imp { display: inline-block !important; } .d-block { display: block; } .d-table { display: table; } .d-none { display: none; } /* Spacing */ hr { margin-bottom: 20px; width: 100%; border: none; border-top: 1px solid #d5dbe0; } .btn, .sm-btn, .btn-disabled, .sm-pill .btn-group, .field, .form-item, .table, .alert, .h1, .h2, .h3, .h4, .h5, .h6, p { margin-bottom: 20px; } /* Padding */ .p-0 { padding: 0 !important; } .p-5 { padding: 5px !important;} .p-10 { padding: 10px !important;} .p-20 { padding: 20px !important; } .p-30 { padding: 30px !important; } .pt-0 { padding-top: 0 !important; } .pt-10 { padding-top: 10px !important; } .pt-20 { padding-top: 20px !important; } .pt-30 { padding-top: 30px !important; } .pt-40 { padding-top: 40px !important; } .pt-50 { padding-top: 50px !important; } .pt-80 { padding-top: 80px !important; } .pt-5-perc {padding-top: 5% !important;} .pt-10-perc {padding-top: 10% !important;} .pr-0 { padding-right: 0 !important; } .pr-10 { padding-right: 10px !important; } .pr-20 { padding-right: 20px !important; } .pr-30 { padding-right: 30px !important; } .pr-40 { padding-right: 40px !important; } .pr-50 { padding-right: 50px !important; } .pb-0 { padding-bottom: 0 !important; } .pb-10 { padding-bottom: 10px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-30 { padding-bottom: 30px !important; } .pb-40 { padding-bottom: 40px !important; } .pb-50 { padding-bottom: 50px !important; } .pl-0 { padding-left: 0 !important; } .pl-10 { padding-left: 10px !important; } .pl-20 { padding-left: 20px !important; } .pl-30 { padding-left: 30px !important; } .pl-40 { padding-left: 40px !important; } .pl-50 { padding-left: 50px !important; } @media ( max-width: 1050px ) { .p-20-md { padding: 20px !important; } } /* Margin */ .m-auto { margin: auto !important; } .m-0 { margin: 0 !important; } .m-5 { margin: 5px!important; } .m-10 { margin: 10px !important; } .m-20 { margin: 20px !important; } .m-30 { margin: 30px !important; } .mt-0 { margin-top: 0 !important; } .mt-5 { margin-top: 5px !important; } .mt-auto { margin-top: auto !important; } .mt-10 { margin-top: 10px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } .mt-50 { margin-top: 50px !important; } .mt-100 { margin-top: 100px !important; } .mr-auto { margin-right: auto !important; } .mr-0 { margin-right: 0 !important; } .mr-5 { margin-right: 5px !important; } .mr-7 { margin-right: 7px; } .mr-10 { margin-right: 10px !important; } .mr-20 { margin-right: 20px !important; } .mr-30 { margin-right: 30px !important; } .mr-40 { margin-right: 40px !important; } .mb-0 { margin-bottom: 0px !important; } .mb-5 { margin-bottom: 5px !important; } .mb-10 { margin-bottom: 10px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important;} .mb-90 { margin-bottom: 90px; } .mb-5-perc { margin-bottom: 5%; } .mb-10-perc { margin-bottom: 10%; } .ml-auto { margin-left: auto !important; } .ml-0 { margin-left: 0 !important; } .ml-5 { margin-left: 5px !important; } .ml-10 { margin-left: 10px !important; } .ml-20 { margin-left: 20px !important; } .ml-30 { margin-left: 30px !important; } .ml-40 { margin-left: 40px !important; } .ml-50 { margin-left: 50px !important; } @media ( max-width: 720px ) { .mb-45-md { margin-bottom: 45px !important; } } /* Colors */ .text-light-grey { color:#c2c0c0 !important; } .text-grey { color: #7A7C7F !important; } .text-black { color: #000 !important; } .text-white { color: #FFF !important; } .text-dark-grey { color: rgb(35, 35, 35) !important; } .text-red { color: #FF3600 !important; } .text-blue { color: #0168FA !important;} .bg-light-grey { background-color:#f9f9f9 !important; } .bg-grey { background-color: #7A7C7F !important; } .bg-white { background-color: #FFF !important; } .bg-black { background-color: #000 !important; } .bg-blue { background-color:#1076F4 !important; } .bg-none {background: none !important;} .bg-orange { background-color:#FF3600 ;} .bg-dgrey { background-color: #333333;} /* Border */ .br-0 { border-radius: 0 !important; } .br-5 { border-radius: 5px !important; } .br-8 { border-radius: 8px !important; } .b-circle { border-radius: 100% !important; } .b-0 { border-width: 0 !important; } .b-1 { border-width: 1px solid !important; } .b-2 { border-width: 2px solid !important; } .bb-1 { border-bottom: 1px solid !important;} .bb-2 { border-bottom: 2px !important;} .bc-green { border-color: #54C258 !important; } .bc-red { border-color: #D02020 !important; } .bc-blue { border-color: #1076f6 !important; } .bc-grey { border-color: #AAA !important; } .bc-light-grey { border-color: #D3D3D3 !important; } .b1 { border: 1px solid grey} /*Cards*/ /* .card { margin:0 10px; padding: 20px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.161); border-radius: 5px; border: 1px solid #E2E6EA; margin-bottom:30px; background: #fff; } */ .card.used-equipment a { margin-bottom: 45px; } .card.used-equipment img { width: 300px; height: 230px !important; object-fit: cover;} .card.used-equipment p { margin-bottom: 9px !important;} .card.equipment { box-shadow: 0px 4px 10px #0000004D; } .card.equipment img { width: 300px; height: 230px !important; object-fit: cover; } .card.new-equipment { box-shadow: 0px 4px 10px #0000004D; width: calc(25% - 30px); } .card.new-equipment img { width: 100%; height: 230px !important; object-fit: cover;} .card > .card-info { padding-left: 27px; min-height: 147px; } .card > .card-info h3 { font-size: 24px; font-weight: 700; color:white; } .card > .card-info p { font-size: 18px; color:white;} .card > .card-info a { font-size: 18px; font-weight: 700; text-decoration: none; color: #FF3600; } #product-page .card .card-info h2 {margin: 0;} .used .card .card-info h2, #equipment-search .card .card-info h2, #product-page .card .card-info h2 {font-size: 16px !important; color: #fff; font-weight: 500; text-align: left !important; margin-bottom: 5px;} @media(max-width:1100px){ .card.new-equipment {width: calc(33.333% - 27px);} } @media(max-width:850px){ .card.new-equipment {width: calc(50% - 20px);} } @media(max-width:600px){ .card.new-equipment {width: 100%;} .card.new-equipment img {height: 300px;} } @media ( max-width: 450px ) { .card.used-equipment img { width: 325px; height: 230px;} } /* Alerts */ .alert { padding: 15px; border-radius: 8px; border: 1px solid #999; color: #999; font-weight: 600; position:relative;} .alert i {padding-right: 10px;} .alert .fa-xmark {position: absolute; right: 0; padding-right: 20px; top: 20px; cursor: pointer;} .alert.red { border-color: #de0000; color: #de0000; background: #ffcfcf; } .alert.yellow { border-color: #d18100; color: #d18100; background: #fff2d2; } .alert.blue { border-color: #1354BC; color: #1354BC; background: #d2efff; } .alert.green { border-color: #155724; color:#155724; background: #d4edda;} /* Modal */ .modal { display: none; overflow: auto; z-index: 99999; background: rgba(0,0,0,0.7); } .modal.show { display: block; } .modal .frame { overflow: auto; max-height: 80vh; margin:0 auto; padding: 20px; border-radius: 8px; background: #fff; width:80%; box-shadow: 0px 0px 45px rgba(0, 0, 0, 0.161);} .modal .frame.med { width: 400px;} .modal .frame.center { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); } .modal .fa-xmark { color: #aaa; position: absolute; right: 15px; top: 10px; font-size: 28px; font-weight: bold; cursor:pointer; } .modal .fa-xmark:hover { color: black;text-decoration: none;cursor: pointer; } /* Tooltip */ .tooltip { left: 50%; bottom: 100%; transform: translate(-50%, 0%); padding: 10px; position: absolute; display: none; border-radius: 5px; background: #555; box-shadow: 0px 0px 45px rgba(0, 0, 0, 0.161); color:white } .tooltip.left { top: 50%; right: 100%; left: auto; bottom: auto; transform: translate(0%, -50%); } .tooltip.right { top: 50%; left: 100%; bottom: auto; transform: translate(0%, -50%); } .tooltip.bottom { top: 100%; left: 50%; bottom: auto; transform: translate(-50%, 0%); } .tooltip-holder { position: relative;cursor:pointer; } .tooltip-holder:hover .tooltip { display: inline-block; } .tooltip:after { left: 50%; top: 100%; margin: 0 0 0 -10px; border-top: 10px solid #555; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; display: inline-block; position: absolute; height: 0; width: 0; } .tooltip.left:after { left: 100%; top: 50%; margin: -10px 0 0 0; border-left: 10px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tooltip.right:after { left: auto; right: 100%; top: 50%; margin: -10px 0 0 0; border-left: none; border-right: 10px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tooltip.bottom:after { top: auto; left: 50%; bottom: 100%; margin: 0 0 0 -10px; border-top: none; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; content: ""; display: inline-block; position: absolute; height: 0; width: 0; } /* Menus */ .nav-menu { display: block; position: fixed; top:0; left:100%; margin-left: auto; width:100%; max-width: 375px; min-height:100vh; background-color: #fffffffb; z-index: 99999; transition:250ms; } .nav-menu.mobile a { display: block; padding: 10px 30px; color:black; text-decoration: none; font-weight: 400; font-size: 20px; } .nav-menu.mobile p { font-size:18px;} .nav-menu.mobile h4 {margin-top: 40px; font-size: 22px; margin-bottom: 10px;} .nav-menu.mobile p b {font-size:20px;} .nav-menu.mobile a:hover { font-weight: 700; } .nav-menu.mobile .btn { max-width: 315px; width: 100%; } .nav-menu.mobile .close { position: relative; height:50px; } [showing-menu="mobile"] .nav-menu.mobile .close .hamburger { position: fixed; } [showing-menu="mobile"] .main-nav .overlay {position: fixed; top:0; right:0; bottom:0; left:0; background-color: rgba(0,0,0,.6); z-index: 1000;} .nav-menu.side { display: none; width: 375px; padding-top:0; z-index:1000000} .nav-menu.side a { font-weight: 400;} [showing-menu="equipment"] .nav-menu.equipment { display: block; right: 375px; } [showing-menu="dealers"] .nav-menu.dealers { display: block; right: 375px; } .nav-menu.side .overlay { position: fixed; top:0; right:0; bottom:0; left:0; background-color: rgba(0,0,0,.6); } .nav-menu.side .frame { position: relative; background-color: #fffffffb; padding:30px; min-height: 100vh; } .nav-menu.side .frame a { text-decoration: none; color: black; font-size: 20px; line-height: 40px; display:block; margin-bottom: 30px;} .nav-menu.side .frame input::placeholder { color:#aeaeae; font-size: 18px;} .nav-menu.side .frame input { border: 1px solid #bfbfbf !important; padding: 12px; border-radius: 5px; background-color: white;} .nav-menu.side .frame a:hover { font-weight: 700 !important;} .nav-menu.side .back { display:none; } .nav-menu.side form [type="submit"] {background: #ff3600; border: none; padding: 10px 30px !important;} .nav-menu.dealers h3 {font-size: 22px; color: #ff3600; } .nav-menu.dealers .btn {line-height: 0 !important; font-size: 18px !important; font-weight: bold; margin-top: 20px; padding: 15px;} .nav-menu.side.dealers .frame nav .contact {display: flex; align-items: baseline; gap: 15px; justify-content: flex-start;} .nav-menu.side.dealers .frame nav h3 {margin-bottom: 30px;} .nav-menu.side.dealers .frame nav .contact i {color: #FF3600; font-size: 20px; width: 30px; text-align: center;} .nav-menu.side.dealers .frame nav .contact a, .nav-menu.side.dealers .frame nav .contact p {font-size: 18px; line-height: 1.5;} .nav-menu.side.dealers .frame nav .contact a:hover {font-weight: inherit !important;} .nav-menu.side.dealers .frame nav .btn {margin-bottom: 0px; margin-top: 10px;} .nav-menu.side.dealers .frame nav .contact a, .nav-menu.side.dealers .frame nav .contact p {margin-bottom: 10px;} @media ( max-width: 1100px ) { [showing-menu="mobile"] .nav-menu.mobile { right: 0; } .nav-menu.side .back { display:inline-block; } } /*Hamburger Icon*/ .mobile-holder {display: none;} .hamburger { width: 22px; position: absolute; z-index: 99999; top:35px; right: 23px; margin:0 !important; } .sticky-header .hamburger { top:30px; } .hamburger .bar, .hamburger::before, .hamburger::after { content:''; display:block; cursor: pointer; height: 3px; margin: 6px 0; transition:250ms; background-color: black; } .home .hamburger .bar, .home .hamburger::before, .home .hamburger::after { background-color: white !important; } .sticky-header.home .hamburger .bar, .sticky-header.home .hamburger::after, .sticky-header.home .hamburger::before { background-color:black !important;} @media ( max-width: 1100px ) { .mobile-holder { display: block !important;} [showing-menu="mobile"] .hamburger .bar { opacity: 0; } [showing-menu="mobile"] .hamburger::before { transform: rotate(-45deg) translate(-4px, 3px); background-color: black !important; } [showing-menu="mobile"] .hamburger::after { transform:rotate(45deg) translate(-9.5px, -9px); background-color: black !important; } [showing-menu="mobile"].home .hamburger::after, [showing-menu="mobile"].home .hamburger::before { background-color: black !important;} } /* Header */ #header { z-index: 999; top:0; background-color: white; transition: all 500ms ease-out; box-shadow: 0px 3px 6px #0000001A;} .home #header {box-shadow: none;} #header.shadow { box-shadow: 0px 3px 6px #0000001A; } #header .lnk { color: black; } #header a { font-size: 18px; font-weight: 600; color: black; text-decoration: none;} #header #menu-header {list-style: none; width: 100%; display: flex; align-items: center; gap: 20px; justify-content: space-between;} #header #menu-header .btn {margin: 0px;} .home #header { background-color: transparent;} .home #header img.black {display: none;} .home #header a { color: white; } .home.sticky-header #header a { color: #000; } #header .contact a {color: #fff !important;} #header .container {padding: 15px 30px; gap: 20px;} /* .sticky-header { padding-top:133px; } */ .sticky-header #header { background-color: white; position: fixed; top:0; width:100%; box-shadow: 0px 3px 6px #0000001A; transition: background-color 500ms;} .sticky-header #header .container { padding:15px 30px 15px 30px;} .sticky-header #header .lnk { color: black !important;} .sticky-header.home { padding-top:0px;} .sticky-header.home #header img {display: none;} .sticky-header.home #header img.black {display: block;} .nav-menu.mobile #menu-mobile-menu li {list-style: none;} #header .w-30 img {width: 100%; max-width: 270px;} #header .nav.w-70 {max-width: 650px;} #header .dealer-btn { font-weight: bold; font-size: 20px; white-space: nowrap; cursor: pointer;} .home #header .dealer-btn {color: #fff;} .sticky-header #header .dealer-btn, .sticky-header #header .dealer-btn i, #header .dealer-btn {color: #FF3600;} @media ( max-width: 1100px ) { #header .nav, #header .dealer-btn, #header a.contact { display: none; } } /* Footer */ #footer .container { min-height: 300px; color: white; flex-wrap: nowrap;} #footer .copyright { max-width: 1400px; margin: 0 auto; padding: 20px 0; color: white;} #footer .copyright span { font-size: 14px; line-height: 10px;} #footer .container p { font-size: 18px;} #footer ul { list-style: none; } #footer ul li { font-size: 18px; margin-bottom:0; font-weight: 500;} #footer ul li a { color:#fff; text-decoration: none; } #footer ul li:first-child { font-size: 20px;} #footer ul:last-child > li { font-size: 20px;} #footer ul li .sub-menu li a {font-size: 18px; font-weight: 400;} #footer #menu-footer > li {display: inline-block; float: left; width: 50%;} #footer .sub-menu li {width: 100%;} #footer .contact .flex {line-height: 0;} #footer .contact .flex i {font-size: 20px;} #footer .social-icons i {color: #fff; margin-right: 10px; font-size: 30px;} #footer .logo img {width: 100%;} #footer .last-column {max-width: 310px; text-align: right;} #footer .last-column .btn {max-width: 160px;} #footer .footer-nav {display: flex; max-width: 350px; justify-content: space-between; width: 100%; gap: 20px;} @media(max-width: 950px){ #footer .container {flex-wrap: wrap;} #footer .last-column {text-align: left;} } @media(max-width: 850px){ #footer .logo, #footer .contact, #footer ul {width: calc(50% - 10px);} } @media(max-width: 740px){ #footer .last-column, #footer .footer-nav {max-width: inherit;} } @media ( max-width: 720px ) { #footer .btn { margin-bottom: 35px; } #footer ul { margin-bottom: 20px; } } @media(max-width: 500px){ #footer .logo, #footer .contact, #footer ul {width: 100%;} #footer .logo .btn {display: inline-block; text-align: center; width: 100%;} #footer .contact .flex {justify-content: center;} #footer {text-align: center;} #footer .footer-nav {flex-wrap: wrap;} #footer .last-column .btn {max-width: none;} #footer .social-icons {text-align: center;} #footer .copyright {text-align: center;} } @media ( max-width: 450px ) { #footer .copyright { padding: 30px 0; } } /* bobcat-home */ #bobcat-hero {min-height: 700px; padding-top: 120px } #bobcat-hero h2 { color:#fff; font-size: 60px; font-weight: 700; } #bobcat-hero p { color: #fff; font-size: 22px; } #bobcat-home .bobcat-hero h2 { color: white; font-size: 60px; font-weight: 700; } #bobcat-home .bobcat-hero p { color: white; font-size: 22px; } #bobcat-home .offerings {margin-top: 5%;} #bobcat-home .offerings h2 { text-align: center; font-size: 45px; } #bobcat-home .offerings .ctas a { position: relative; max-width:413px; color:#fff; font-size: 30px; font-weight: bold; text-decoration: none; text-transform: uppercase; } #bobcat-home .offerings .ctas a img { min-height: 310px; max-width: 413px; object-fit: cover; width: 100%; } #bobcat-home .offerings .ctas a:after { z-index: 1; content:""; display:block; position: absolute; top:0; right:0; bottom:11px; left:0; background: linear-gradient(transparent,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.127), rgba(0, 0, 0, 0.742)); } #bobcat-home .offerings .ctas a span { z-index: 2; position: absolute; bottom:24px; left: 27px; } #bobcat-home .offerings .ctas a span i { display: inline-block; margin-left: 5px; } #bobcat-home .offerings .btn {font-size: 18px; text-align: center; display: inline-block;} #bobcat-home .offerings p {text-align: center;} #bobcat-home .hero-2 { background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('/wp-content/uploads/2024/04/bobcat-generator.webp') no-repeat; background-size:cover; background-position: center center; min-height: 500px;} #bobcat-home .hero-2 div { min-height: 260px;} #bobcat-home .hero-2 div h2, #bobcat-home .hero-2 div p { max-width: 700px; color: white; } #bobcat-home .hero-2 div h2 { font-size: 45px; font-weight: 700; } #bobcat-home .hero-2 div p { font-size: 22px; } #bobcat-home .used h2 { font-size: 45px; text-align: center; } #bobcat-home .financing { max-width: 1020px; margin: 0 auto;} #bobcat-home .financing .circle-crop-pic {background: url('images/bobcat-sm-tractor.jpg')no-repeat center; background-size: cover; min-height:230px; min-width:230px; border-radius: 50%; margin-right: 40px;} #bobcat-home .financing h2 { font-size: 45px; } #bobcat-home .financing p { font-size: 22px; } #bobcat-home .title-section { min-height: 440px; } #bobcat-home .title-section .img-container {background: url("/wp-content/uploads/2024/04/bobcat-e48-jackhammer.webp") no-repeat center center; background-size: cover; min-height: 440px;} #bobcat-home .title-section .title-info { max-width: 650px; margin: 0 50px; } #bobcat-home .title-section .title-info h1, #bobcat-home .title-section .title-info h2, #bobcat-home .title-section .title-info p { color: white; } #bobcat-home .title-section .title-info h1 { font-size: 45px; } #bobcat-home .title-section .title-info h2 { font-size: 30px; } #bobcat-home .title-section .title-info p { font-size: 22px; } #bobcat-home .about-h1 span {font-size: 30px; font-weight: 400; display: inline-block; line-height: 40px; margin-top: 10px;} @media ( max-width: 1200px ){ #bobcat-home .financing .circle-crop-pic { margin: 0px 0px 20px 0px; } #bobcat-home .offerings a img {max-width: 310px; min-height: 230px;} } @media ( max-width: 1100px ) { #bobcat-hero h2 {font-size: 45px;} #bobcat-home .offerings a img {max-width: 240px; min-height: 180px;} #bobcat-home .used.container {max-width: 1000px;} #bobcat-hero {min-height: 600px;} } @media ( max-width: 1050px ) { #bobcat-home .financing { padding: 30px; } #bobcat-home .about-h1 span {font-size: 27px;} #bobcat-home .hero-2 .w-50 {width: 100% !important;} #bobcat-home .offerings h2, #bobcat-home .hero-2 div h2, #bobcat-home .used h2, #bobcat-home .financing h2, #bobcat-home .financing h2, #bobcat-home .title-section .title-info h1 {font-size: 40px;} } @media ( max-width: 1000px ) { #bobcat-home .title-section .title-info { margin: 30px auto; padding: 0 20px; text-align: center;} } @media ( max-width: 880px ) { #bobcat-home .offerings a img {max-width: 400px; min-height: 230px;} } @media ( max-width: 800px ) { #bobcat-home .financing {text-align: center;} #bobcat-home .financing .w-70 {width: 100%;} } @media ( max-width: 770px ) { #bobcat-home .title-section .img-container {min-height: 60vw;} #bobcat-hero { margin-bottom: 40px;} } @media ( max-width: 720px ) { #bobcat-home .offerings.container { margin-bottom: 40px; } #bobcat-home .offerings h2 { margin-bottom: 20px !important; } #bobcat-home .offerings div { gap: 20px;} #bobcat-home .hero-2 { min-height: 450px !important; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.631)), url('/wp-content/uploads/2024/04/bobcat-generator.webp') no-repeat center center; background-size: cover; margin-bottom: 40px !important; } #bobcat-home .container.used { padding: 20px; } #bobcat-home .title-section h2 { font-size: 24px !important; line-height: 28px !important; margin-top: 20px;} } @media ( max-width: 500px ) { #bobcat-home #bobcat-hero h2 {font-size: 40px;} } @media ( max-width: 450px ) { #bobcat-hero {min-height: 550px;} #bobcat-hero .container { padding: 15px;} #bobcat-hero h2 { font-size: 30px; line-height: 37px; margin-bottom:10px; } #bobcat-hero p { font-size: 18px; line-height: 22px; } #bobcat-home #bobcat-hero h2 {line-height: 1.2;} #bobcat-home .offerings a img, #bobcat-home .offerings a { max-width: 370px; } #bobcat-home .offerings { justify-content: center !important; } #bobcat-home .used { padding: 10px !important;} #bobcat-home .used div { gap:20px !important;} #bobcat-home .title-section .title-info h1 { font-size: 36px !important; line-height: 38px !important; } #bobcat-home .offerings h2, #bobcat-home .hero-2 div h2, #bobcat-home .used h2, #bobcat-home .financing h2, #bobcat-home .financing h2, #bobcat-home .title-section .title-info h1 {font-size: 32px;} #bobcat-home .hero-2 div p, #bobcat-home .financing p, #bobcat-home .title-section .title-info p {font-size: 19px;} #bobcat-home .about-h1 span {font-size: 23px;} #bobcat-home .financing .w-70 {width: 100%; text-align: center;} } /* equipment search */ #equipment-search .hero-generator { background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url('images/hero-gen-trim.jpg') no-repeat; background-position: center center; background-size: cover; min-height: 280px; margin-bottom: 70px; margin-top: 90px; } #equipment-search .hero-generator h2 { text-transform: capitalize; font-size:50px; line-height: 70px; font-weight: 700; color: white; } #equipment-search .search { max-width: 40%; min-width: 27%; } #equipment-search .search input::placeholder { color:#D5D5D5;} #equipment-search .search input { border: 1px solid #D5D5D5 !important; } #equipment-search .search button { max-width: 45px;} #equipment-search .search form [type="search"] {max-width: 300px; border-radius: 5px 0 0 5px;} #equipment-search .search form .btn {background: #FF3600; min-height: 37.5px; border-radius: 0 5px 5px 0 !important; position: relative; right: 4px; vertical-align: bottom;} #equipment-search .search form .btn i {padding: 0;} #equipment-search .navigation.pagination h2 {font-size: 20px; line-height: 30px;} #equipment-search .navigation.pagination .nav-links a {color:#FF3600; } #equipment-search .search-count {font-size: 20px;} #equipment-search .search-count span {color:#FF3600; font-weight: 600;} #equipment-search .equipment-sorting {width: 60%;} #equipment-search .equipment-sorting select {border-radius: 5px; margin-bottom: 5px;} #equipment-search .equipment-sorting form [type="submit"] {background: #ff3600; padding: 12px 30px !important; border-radius: 5px; margin-bottom: 0;} #equipment-search .equipment-sorting .clear-btn {background: #000; padding: 8px 13px; margin-left: 5px;} #equipment-search .equipment-sorting .clear-btn i {color: #fff; padding: 0; padding-right: 5px;} #equipment-search .counter {text-align: center; margin-bottom: 5%; } #equipment-search .counter h2 {color: #ff3600;} @media ( max-width: 1200px ) { #equipment-search .equipment-sorting select {border-radius: 5px; margin-bottom: 5px; width: 49%;} } @media ( max-width: 1000px ) { #equipment-search .hero-generator { margin-bottom: 0px; } #equipment-search .new-eq-fg .search { max-width:100%; padding-bottom: 5px !important; } #equipment-search .new-eq-fg .field.flex { gap:20px; } } @media(max-width: 770px) { #equipment-search .search form { display: flex; flex-wrap: nowrap;} #equipment-search .equipment-sorting select {border-radius: 5px; margin-bottom: 5px; width: 100%;} #equipment-search .search form .btn {right: 0;} #equipment-search .equipment-sorting select {width: 100%;} #equipment-search .search form [type="search"] {max-width: none;} } @media ( max-width: 600px ) { #equipment-search .hero-generator h2 {font-size: 35px;} } /* product pages */ #product-page {margin-top: 90px;} #product-page h2 {font-size: 35px; font-weight: 700; margin: 36px 0 50px 0; } #product-page .title { font-size: 50px; font-weight: 700; margin-bottom: 10px;} #product-page .details .btn {padding: 10px 15px;} #product-page .breadcrumb { font-size:24px; font-weight: 700; color:#FF3600; } #product-page .gallery {display: flex; gap: 10px;} #product-page .gallery img { height: 125px !important; min-width: 200px !important; object-fit: cover; } #product-page .product-details { background-color: #F1F1F1; width:100%; } #product-page .product-details .label { font-weight: 500;} /* #product-page .product-details tr { margin-bottom: 10px !important} */ #product-page .product-details table {width: 100%;} #product-page .product-details table td {width: 50%; padding-bottom: 5px; font-size: 18px;} #product-page .product-details table .additional-info {vertical-align: top;} #product-page .thumbnail.video { background: linear-gradient(rgba(255, 55, 0, 0.6),rgb(255, 54, 0,.6)),url(images/bobcat-e26-digging.jpg) no-repeat center center; background-size: cover; height:125px; } #product-page .learn-more p { color: white; font-size: 20px; font-weight: 700; } #product-page .learn-more a { color: white; text-decoration: none; font-weight: 500; } #product-page p .trademark { font-size: 8px; top: -8px; } #product-page .alert p { text-align: center; color:white; } #product-page .equipment-main-photo {max-width: 670px; max-height: 420px; object-fit: contain; width: 100%;} #product-page .slider-for .slick-slide img {max-height: 600px; margin: 0px auto;} #product-page .slider-nav {cursor: pointer;} #product-page .slider-nav.thumbnails {margin-top: 20px;} #product-page .slider-nav.thumbnails .slick-track {display: flex; gap: 10px; justify-content: space-between;} #product-page .slider-nav.thumbnails .slick-prev:before, .slick-next:before {color: #000 !important;} #product-page .slider-nav.thumbnails .slick-track .slick-slide.slick-current {opacity: 100%;} #product-page .slider-nav.thumbnails .slick-track .slick-slide {opacity: 50%;} #product-page .breadcrumb-banner {background: #ff3600; margin-bottom: 3%;} #product-page .breadcrumb-banner .container {padding: 25px 30px;} #product-page .breadcrumb-banner i {padding: 0 10px;} @media ( max-width: 1000px ) { #product-page .equipment-gallery {width: 100% !important; margin: 0 auto; } #product-page .details { width: 100% !important; margin-bottom: 30px; padding-left: 0 !important;} } @media ( max-width: 800px ){ #product-page .thumbnails img:first-of-type { display: none; } #product-page .alert a { display:block; margin-top: 10px; max-width: 180px; } } @media ( max-width: 630px ) { #product-page .thumbnails .thumbnail { display: none; } #product-page .thumbnails { justify-content: center; gap:20px;} } /* Inner Page */ #default-page .container {max-width: inherit; padding: 0;} #default-page #content {margin-top: 90px;} #default-page #content p a, #default-page #content li a {color: #ff3600; font-weight: 600;} #inner-page {margin: 5% 0 7%;} #inner-page .content-btn a { font-size: 18px; font-weight: 700; padding: 10px 30px; border-radius: 5px; background-color: #FF3600; color: #fff !important; cursor: pointer; border: none; text-decoration: none; } #inner-page .orange-text h2, #inner-page .orange-text h3, #inner-page .orange-text h4 {color: #FF3600;} #inner-page .content-btn.blk a {background: #000;} #inner-page .text-section {margin-bottom: 7%;} #inner-page .contact-info p {margin-bottom: 0;} #inner-page .colored-box {color: #fff; background: #333; padding: 8% 4%;} #inner-page .colored-box h3, #inner-page .colored-box h2 {color: #fff;} #inner-page .colored-box h2 {font-size: 35px; line-height: 1.2;} #inner-page .colored-box.orange {background: #FF3600;} #inner-page .contact-banner {background: #333; padding: 30px 0 15px;} #inner-page .contact-banner h3 {color: #fff;} #inner-page p a {color: #FF3600;} #inner-page h2 a {text-decoration: none; color: #000;} #inner-page .promotions-content.vc_tta-color-grey.vc_tta-style-classic.vc_tta-tabs .vc_tta-panels .vc_tta-panel-body {background: #fff; border: none;} #inner-page .promotions-content .vc_tta-tab a {background: #333; color: #fff !important; font-weight: inherit !important;} #inner-page .promotions-content .vc_tta-tab.vc_active a {background: #FF3600;} /* About */ #inner-page .about-ctas h3 a {color: #FF3600; text-decoration: none; font-size: 25px; line-height: 35px;} #inner-page .about-ctas p {padding-bottom: 0px;} @media(max-width: 770px){ #inner-page .reverse {display: reverse; flex-direction: column-reverse;} #inner-page h2 {font-size: 35px; line-height: 45px;} #inner-page h3 {font-size: 30px; line-height: 40px;} #inner-page .about-ctas {border-top: 1px #ededed solid; padding-top: 13%; text-align: center;} #inner-page .about-ctas .vc_col-sm-4 {margin-bottom: 7%;} #inner-page .contact-form-section .rep-contacts {text-align: center; background: #ededed; padding: 30px 20px; border-radius: 10px; margin-bottom: 11%;} } @media(max-width: 600px){ #content .entry-header.has-featured-image h1 {font-size: 35px;} } /* Forms */ .frm_style_formidable-style .frm_fields_container label, .frm_style_formidable-style .frm_fields_container input, .frm_style_formidable-style .frm_fields_container .frm_submit {font-family: 'Roboto', sans-serif;} .frm_style_formidable-style .frm_fields_container label, .frm_style_formidable-style .frm_fields_container .frm_primary_label {color: #000;} .frm_style_formidable-style .frm_fields_container .frm_submit input {font-weight: 600; border: none; background: #FF3600; color: #fff; padding: 10px 25px !important;} .frm_style_formidable-style .frm_section_heading {margin-bottom: 5%; } #content .frm_style_formidable-style .frm_section_heading h3 {font-size: 27px; line-height: 37px; margin-bottom: 15px;} .frm_style_formidable-style .frm_fields_container input, .frm_style_formidable-style .frm_fields_container textarea, .frm_style_formidable-style .frm_fields_container select {border-radius: 5px;} /* Locations */ #locations p {font-size: 18px;} #locations .banner {margin-top: 90px; } #locations .banner .container {padding: 120px 20px; text-align: center;} #locations .banner .overlay {background: rgba(0,0,0,0.5);} #locations .banner h1 {color: #fff;} #locations .intro-section {text-align: center; margin: 5% 0; } #locations .intro-section h2 {font-size: 45px; margin-bottom: 15px;} #locations .intro-section .disclaimer {color: #FF3600; font-weight: bold;} #locations .intro-section .disclaimer i {padding-right: 10px;} #locations .location-cards {display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 5%;} #locations .location-cards .card {width: calc(50% - 20px); display: flex; } #locations .location-cards .card .location-details {background: #000; padding: 40px 20px; width: 75%;} #locations .location-cards .card .location-thumbnail {width: 25%;} #locations .location-cards .card .location-details h2 {font-size: 30px;} #locations .location-cards .card .location-details h2, #locations .location-cards .card .location-details .number, #locations .location-cards .card .location-details p {color: #fff;} #locations .location-cards .card .location-details .number {text-decoration: none; font-size: 18px;} #locations .location-cards .card .ctas {margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap;} #locations .location-cards .card .ctas .btn {margin-bottom: 0;} #locations .location-cards .card .ctas .selected {background: #ddffe6; color: #009d5b !important;} #locations .used .main-heading {font-size: 45px;} #locations .content-section {display: flex; align-items: center; justify-content: center; gap: 40px;} #locations .content-section h2 {font-size: 45px; margin-bottom: 15px;} #locations .contact-info {background: #333;} #locations .contact-info .container {display: flex; align-items: center; max-width: 1300px; justify-content: space-between;} #locations .contact-info .container .column {width: 25%; display: flex; align-items: center; gap: 20px;} #locations .contact-info .container .column p, #locations .contact-info .container .btn {margin-bottom: 0;} #locations .contact-info .container .column i {padding-right: 15px;} #locations .contact-info .container .column p, #locations .contact-info .container .column i {color: #fff;} #locations .contact-info .phone a {text-decoration: none; color: #fff; font-size: 18px;} #locations .dealer-info {display: flex; background: #FF3600; align-items: center;} #locations .dealer-info .salesmen-section {max-width: 600px; margin: 0 auto; padding: 30px; width: 40%;} #locations .dealer-info .salesmen-section h2 {margin-bottom: 15px;} #locations .dealer-info .salesmen-section p {margin-bottom: 5px;} #locations .dealer-info .salesmen-section p a {text-decoration: underline;} #locations .dealer-info .salesmen-section .salesman {margin-top: 25px;} #locations .dealer-info .map-embed {width: 60%; line-height: 0;} #locations .dealer-info .map-embed iframe {width: 100% !important; height: 52vw !important;} #locations .content-section, #locations .dealer-info {margin-bottom: 7%;} @media(max-width: 1200px){ #locations .location-cards .card {flex-wrap: wrap; flex-direction: column;} #locations .location-cards .card .location-details, #locations .location-cards .card .location-thumbnail {width: 100%;} #locations .location-cards .card .location-thumbnail {width: 100%; max-height: 250px; height: 60vw;} #locations .location-cards .card .location-details h3 {font-size: 30px;} } @media(max-width: 1014px) { #locations .location-cards .card .ctas .btn {width: 100%; text-align: center;} } @media(max-width: 1000px){ #locations .contact-info .container .column {gap: 10px;} #locations .dealer-info {flex-wrap: wrap;} #locations .dealer-info .salesmen-section, #locations .dealer-info .map-embed {width: 100%;} #locations .dealer-info .salesmen-section {text-align: center;} #locations .content-section h2, #locations .used .main-heading {font-size: 35px;} } @media(max-width: 770px){ #locations .contact-info .container {flex-wrap: wrap; justify-content: center; gap: 15px;} #locations .contact-info .container .column {width: 100%; justify-content: center;} #locations .content-section {flex-wrap: wrap;} #locations .content-section .col-50 {width: 100%; text-align: center;} #locations .content-section:first-child {flex-direction: column-reverse;} } @media(max-width: 725px){ #locations .location-cards .card {width: 100%; } #locations .banner h1 {font-size: 35px; line-height: 1.2;} #locations .banner .container {padding: 80px 20px;} } /* Error 404 */ #error404 {background: url(/wp-content/uploads/2024/03/bobcat-e48-digging-s6c6920-19p1-fc.webp) no-repeat center center; background-size: cover !important;} #error404 .overlay {background: rgba(0,0,0,0.7);} #error404 .container {max-width: 1000px; width: 100%; padding: 220px 30px; margin: 0 auto;} #error404 .cards {display: flex; gap: 40px; justify-content: space-between; width: 100%; margin-top: 5%; flex-wrap: wrap;} #error404 .cards .col-333 {background: #fff; border-radius: 10px; padding: 20px; text-align: center; width: calc(33.333% - 28px);} #error404 .cards .col-333 h3 {font-size: 22px; margin-bottom: 15px;} #error404 .cards .col-333 .btn {width: 100%; margin-bottom: 0; display: inline-block;} #error404 h2 {font-size: 28px; margin: 15px 0 20px;} #error404 h1 {font-size: 70px;} #error404 .top-half {text-align: center;} #error404 .top-half .btn {font-size: 22px;} #error404 .cards .col-333 i {font-size: 30px; background: #FF3600; width: 70px; height: 70px; border-radius: 70px; line-height: 70px; margin-bottom: 15px; color: #fff;} @media(max-width: 825px){ #error404 .cards .col-333 {width: 100%; max-width: 400px; margin:0 auto;} } @media(max-width: 450px){ #error404 h1 {font-size: 50px;} #error404 h2 {font-size: 22px;} }