// FONTS @import url('https://fonts.googleapis.com/css?family=Gothic+A1:400,300,200|Open+Sans:300,400,700,900|Overpass:200,300,400,600i,700,900i|Work+Sans'); $gothic: Gothic A1, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $op: Overpass, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $worksans: Work Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; $opensans: Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default; // COLORS $red: #962833; $yellow: #dba430; $p-color: #686868; $white: #ffffff; $black: #000000; $blue: #023AC1; // GLOBAL STYLES body,h1,h2,h3,h4,h5{ font-family: $op; } h1,h2,h3,h4,h5{ color: $red; font-weight: 900; } p{ font-family: $opensans; font-weight: 500; font-size: 13pt; line-height: 1.5; color: $p-color; } a{ color: lighten($red, 20%); } a:hover{ text-decoration: none; color: lighten($red, 15%); } .content{ padding: 80px 0; h1,h2,h3,h4,h5{ color: $black; line-height: inherit; } h1{ color: $black; font-weight: 900 !important; font-size: 40pt; font-family: $opensans; line-height: 1.3; } p{ font-size: 13pt; color: $p-color; line-height: 1.6; margin-bottom: 1.5rem; font-family: $worksans; } p.lead{ font-size: 20pt; font-weight: 500; } p.sub-head { font-family: $gothic; font-style: italic; font-weight: 300; color: $black; font-size: 22pt; } .line{ position: relative; display: inline-block; margin-bottom: 50px; } .line:after{ position: absolute; content:''; bottom: -10px; left: 0; width: 17%; height: 5px; background-color: $red; } li{ margin-top: 5px; line-height: 18pt; font-family: $opensans; font-weight: 400; font-size: 13pt; line-height: 20pt; color: $p-color; } .blue-grid {height: 32px;} .blue-grid-sm {height: 24px;} } .bg-dark{ background-color: $red !important; } .btn-primary{ background: $red; border: none; } .btn-primary:hover{ background: $yellow; } // ********* CUSTOM STYELS *********************************************************************************************************************************************** /* CSS used here will be applied after bootstrap.css */ .navbar{ background: rgb(255,255,255); background: linear-gradient(107deg, rgba(255,255,255,1) 38%, rgba(150,40,51,1) 38.05%); padding: 20px 0; @media (max-width: 991.98px) { background: $white !important; padding: 20px; border-bottom: 1px solid $red; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { background: rgb(255,255,255); background: linear-gradient(107deg, rgba(255,255,255,1) 25%, rgba(150,40,51,1) 25.05%); padding: 20px 0; } // Additional Breakpoint 1200 to 1400 @media (min-width: 1200px) and (max-width: 1439.98px) { background: linear-gradient(107deg, rgba(255,255,255,1) 33%, rgba(150,40,51,1) 33.05%); } // Additional Breakpoint 1400 to 1900 @media (min-width: 1440px) and (max-width: 1919.98px) { background: linear-gradient(107deg, rgba(255,255,255,1) 35%, rgba(150,40,51,1) 35.05%); } @media only screen and (min-width: 2560px) { background: linear-gradient(107deg, rgba(255,255,255,1) 41%, rgba(150,40,51,1) 41.05%); } .navbar-brand{ img{ @media (max-width: 767.98px) { width: 150px; } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { width: 200px; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { width: 150px; } } } .navbar-toggler{ color: $red !important; border-color: $red; padding: 5px 8px; padding-top: 7px; } .navbar-nav{ margin-left: 70px; @media (max-width: 991.98px) { margin-left: 0; margin-right: 0; width: 100%; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { margin-left: 100px; } .nav-item{ margin-right: 55px; @media (max-width: 991.98px) {margin-right: 0px;} @media (min-width: 992px) and (max-width: 1199.98px) {margin-right: 40px;} } .nav-item:last-child{ margin-right: 0; } .active{ position: relative; display: inline-block; } .active:after{ content: ''; position: absolute; //bottom: -8px; bottom: 0; width: 100%; height: 7px; background-color: $yellow; // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { bottom: 0px; height: 5px; width: 100%; } } .nav-link{ font-weight: 400; font-size: 17pt; line-height: 50pt; text-transform: uppercase; color: $white !important; padding: 0; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { color: $red !important; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { color: $red !important; line-height: 40pt; } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { color: $red !important; line-height: 40pt; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { font-size: 14pt; } } .nav-link:hover{ color: $yellow !important; } } } .blue { background: rgb(255,255,255); background: linear-gradient(107deg, rgba(255,255,255,1) 38%, rgba(2, 58, 193,1) 38.05%); @media (min-width: 992px) and (max-width: 1199.98px) { background: rgb(255,255,255); background: linear-gradient(107deg, rgba(255,255,255,1) 25%, rgba(2, 58, 193,1) 25.05%); padding: 20px 0; } @media (min-width: 1200px) and (max-width: 1439.98px) { background: linear-gradient(107deg, rgba(255,255,255,1) 33%, rgba(2, 58, 193,1) 33.05%); } @media (min-width: 1440px) and (max-width: 1919.98px) { background: linear-gradient(107deg, rgba(255,255,255,1) 35%, rgba(2, 58, 193,1) 35.05%); } @media only screen and (min-width: 2560px) { background: linear-gradient(107deg, rgba(255,255,255,1) 41%, rgba(2, 58, 193,1) 41.05%); } } // Carousel .carousel{ margin-top: 140px; // Small devices (landscape phones, less than 768px) @media (max-width: 575.98px) { margin-top: 100px; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { margin-top: 100px; } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { margin-top: 115px; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { margin-top: 105px; } .carousel-caption{ right: -200px; bottom: 80px; .caption-block{ display: inline-block; border: solid 10pt $white; background-color: transparent; width: 450px; height: 220px; border-right: 0; position: relative; .right-bar{ position: absolute; right: 0; border-top: solid 20pt $white; border-bottom: solid 65pt $white; width: 12px; height: 200px; } h1{ font-weight: 900; font-style: italic; line-height: 40pt; font-size: 45pt; color: $white; padding-top: 50px; padding-left: 75px; width: 500px; display: block; } .yellow{ color: #f5e20e !important; } } } @media (min-width: 992px) { .carousel-caption{ right: -115px; bottom: 30px; .caption-block{ display: inline-block; border: solid 8pt $white; background-color: transparent; width: 285px; height: 170px; border-right: 0; position: relative; .right-bar{ position: absolute; right: 0; border-top: solid 18pt $white; border-bottom: solid 45pt $white; width: 10px; height: 150px; } h1{ font-weight: 900; font-style: italic; line-height: 35pt; font-size: 30pt; color: $white; padding-top: 40px; padding-left: 30px; width: 400px; display: block; } .yellow{ color: #f5e20e !important; } } } } @media (min-width: 1200px) { .carousel-caption{ right: -150px; bottom: 35px; .caption-block{ display: inline-block; border: solid 10pt $white; background-color: transparent; width: 380px; height: 220px; border-right: 0; position: relative; .right-bar{ position: absolute; right: 0; border-top: solid 20pt $white; border-bottom: solid 65pt $white; width: 12px; height: 200px; } h1{ font-weight: 900; font-style: italic; line-height: 40pt; font-size: 42pt; color: $white; padding-top: 50px; padding-left: 30px; width: 450px; display: block; } .yellow{ color: #f5e20e !important; } } } } @media (min-width: 1540px) { .carousel-caption{ right: -200px; bottom: 80px; .caption-block{ display: inline-block; border: solid 10pt $white; background-color: transparent; width: 450px; height: 220px; border-right: 0; position: relative; .right-bar{ position: absolute; right: 0; border-top: solid 20pt $white; border-bottom: solid 65pt $white; width: 12px; height: 200px; } h1{ font-weight: 900; font-style: italic; line-height: 40pt; font-size: 45pt; color: $white; padding-top: 50px; padding-left: 75px; width: 500px; display: block; } .yellow{ color: #f5e20e !important; } } } } .carousel-indicators{ li{ border-radius: 20px; background-color: $white; } .active{ background-color: #f5e20e; } } } // FEATURED .featured{ padding: 80px 0; background: url('../images/bg-featured.jpg') no-repeat top center; height: 790px; position: relative; background-size: auto 100%; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { padding-top: 50px; height: 500px; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { height: auto; position: static !important; } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { height: 700px; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { padding: 70px 0; height: 650px; } .caption{ font-size: 30pt; line-height: 35pt; font-weight: 200; font-family: $op; color: $white; text-shadow: 0px 4px 3px rgba($black, 0.5); // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { font-size: 22pt; line-height: 27pt; } strong{ font-weight: 600; } } .feature-logo { padding-top: 15px; width: 221px; @media (min-width: 576px) {width: 302px;} } .featured-block-group{ position: relative; top: 120px; @media (max-width: 575.98px) { top: 55px; } @media (min-width: 576px) and (max-width: 767.98px) { top: 65px; } @media (min-width: 768px) and (max-width: 991.98px) { top: 75px; } @media (min-width: 992px) and (max-width: 1199.98px) { width: auto; top: 52px; } a{ transition: 0.2s; } a:hover{ h1{ letter-spacing: 2pt; color: $white; background-color: $red; transition: 0.2s; text-shadow: 0px 5px 5px rgba($black, 0.5); } } .featured-block{ box-shadow: 0px 15px 15px rgba($black, 0.3); width: 100%; height: 305px; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { box-shadow: 0px 5px 10px rgba($black, 0.3); height: auto; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { height: auto; } @media (min-width: 768px) and (max-width: 991.98px) { height: auto; } // Small devices (landscape phones, less than 768px) @media (min-width: 992px) and (max-width: 1199.98px) { height: 265px; } h1{ display: block; background-color: $white; font-weight: 300; font-size: 24pt; text-align: center; padding: 15px; transition: 0.2s; @media (min-width: 576px) and (max-width: 767.98px) {font-size: 20pt;} } .list-block{ padding: 25px 35px; background-color: $white; height: 305px; @media (max-width: 991.98px) {height: auto;} // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { padding: 15px 20px; height: 265px; } ul{ padding: 0; margin: 0; h3{ background: none; font-style: italic; color: $black; letter-spacing: 1pt; @media (max-width: 767.98px) {font-size: 1.5rem;} @media (min-width: 992px) and (max-width: 1199.98px) {font-size: 1.15rem;} } li{ background: url('../images/bullet-featured-list.jpg') left no-repeat; list-style: none; font-family: $op; font-style: italic; padding-left: 40px; a{ color: #0070bb; font-size: 15pt; font-weight: 600; display: block; line-height: 23pt; transition: 0.2s; // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { font-size: 14pt; line-height: 23pt; } } a:hover{ color: $red; padding-left: 5px; transition: 0.2s; } } } } } } } // WELCOME .welcome{ padding: 140px 0 50px; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { padding: 850px 0 50px 0; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { padding: 50px 0; } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { padding: 400px 0 50px; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { padding: 160px 0 50px; } h1{ font-family: $gothic; font-style: italic; font-weight: 300; color: $black; font-size: 26pt; } h1.normal{ font-style: inherit; font-weight: 400; } p{ font-family: $worksans; color: lighten($black, 10%); font-size: 16pt; } .line{ position: relative; display: inline-block; margin-bottom: 50px; } .line:after{ position: absolute; content:''; bottom: -20px; left: 0; width: 17%; height: 5px; background-color: $red; } .img-welcome{ box-shadow: 20px 20px 0px #4d8ac9; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { box-shadow: 5px 5px 0px #4d8ac9; } } h2.phone{ // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { font-size: 25pt; } } } .toll-phone { background-color: #0070bb; padding: 40px 0; h1 { font-weight: 200; font-size: 2.75rem; @media (max-width: 575.98px) {font-size: 2rem;} } } // TRUCK SIZES .truck-size{ padding: 50px 0; background-color: $black; color: $white !important; font-family: $gothic; font-style: italic; h1{ color: $white !important; font-weight: 300 !important; font-size: 29pt; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { font-size: 20pt; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { font-size: 24pt; } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { font-size: 30pt; } } .line{ position: relative; display: inline-block; margin-bottom: 70px; } .line:after{ position: absolute; content:''; bottom: -20px; left: 0; right: 0; width: 10%; margin: 0 auto; height: 5px; background-color: $white; } ul{ margin-top: 20px; margin: 0 auto; display: block; li{ font-weight: 400; font-style: normal; margin-right: 90px; font-size: 24pt; display: inline-block; line-height: 2; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { font-size: 15.5pt; margin-right: 40px; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { font-size: 18pt; } @media (min-width: 768px) and (max-width: 991.98px) {font-size: 20pt;} @media (min-width: 992px) and (max-width: 1199.98px) {font-size: 22pt;} } } .fa-circle { font-size: 10px; position: relative; top: -8px; margin-right: 4px; @media (max-width: 575.98px) {font-size: 6px; top: -5px;} @media (min-width: 576px) and (max-width: 767.98px) {font-size: 8px; top: -5px;} } } // FOOTER footer{ padding: 70px 0 80px; background: url('../images/bg-footer.jpg') no-repeat top center; background-size: auto 100%; // Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { background-repeat: repeat-y; } // Small devices (landscape phones, less than 768px) @media (min-width: 576px) and (max-width: 767.98px) { background-repeat: repeat-y; } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { background-repeat: repeat-y; } h5{ font-family: $opensans !important; font-weight: 600; } .line{ position: relative; display: block; margin-bottom: 35px; } .line:after{ position: absolute; content:''; bottom: -15px; left: 0; width: 80%; height: 1px; background-color: $white; } h5,address,p{ color: $white; } p.about{ font-family: $worksans; font-weight: 200; font-size: 13pt; } address{ font-weight: 400; font-family: $opensans !important; font-size: 13pt; // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { font-size: 11pt; } .title{ font-size: 14pt; font-weight: 600; } a {color: #dba430;} } nav{ a{ display: block; color: $white; font-weight: 300; padding-bottom: 5px; } a:hover{ color: rgba($white, 0.7); } } .copyright { a {color: $white;} } } .map{ margin-bottom: -10px; }