/* jwbs (color) class, and default styling */
@import url("../includes/assets/default.css");
@import url("jwbs.css");

html, body { overflow-x: hidden; }
/* default heading sizes
h1, .h1 { font-size: 2.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.75rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
*/
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1.125rem; }
.lead { font-weight: 400; }
.btn { padding: 0.375rem 1.5rem; border-radius: 0; }
.btn-red { color: #fff; background-color: #cf152d; text-transform: uppercase; }

/* full width */
.full-width { position: relative; }
.full-width:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: -75rem; z-index: -1; }
.full-width.bg-jwbs:before { border-left: 99rem solid #1591cf; box-shadow: 99rem 0 0 #1591cf; }
.full-width-bg { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* colors */
.text-red { color: #cf152d !important; } .bg-red { color: #fff; background-color: #cf152d; } .border-red { border-color: #cf152d !important; } .full-width.bg-red:before { border-left: 99rem solid #cf152d; box-shadow: 99rem 0 0 #cf152d; }
.text-lt-grey { color: #ebebeb !important; } .bg-lt-grey { background-color: #ebebeb; } .border-lt-grey { border-color: #ebebeb !important; } .full-width.bg-lt-grey:before { border-left: 99rem solid #ebebeb; box-shadow: 99rem 0 0 #ebebeb; }

.btn-red { color: #fff !important; background-color: #cf152d; border-color: #cf152d; } .btn-outline-red { color: #cf152d !important; background-color: transparent; background-image: none; border-color: #cf152d; } .btn-outline-red:hover { color: #fff !important; background-color: #cf152d; background-image: none; border-color: #cf152d; }

body > header { line-height: 1.25; }
body > header .lead { font-weight: 500; }

#header-block-1 { text-align: center !important; }
#header-block-1 img { max-width: 144px; }

.navbar { position: absolute; padding: 0; top: 8px; right: 15px; }
#main-navbar { margin-left: 1rem; }
#main-navbar .nav-item, #main-navbar .nav-item:last-of-type { padding: 0.125rem 0; border-bottom: 4px solid transparent; }
#main-navbar .nav-item:hover, #main-navbar .nav-item.current-menu-item { border-bottom-color: transparent; }
#main-navbar .nav-item a { padding: 0 1.5rem !important; color: #212529; border-right: 0 none; }
#main-navbar .nav-item:last-of-type a { border-right: 0 none; }
#mega-menu-primary { top: 86px !important; }
.navbar-toggler { border: 1px solid #cf152d; }
.navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 20 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(207,21,45,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>"); }
.navbar-toggler:focus { outline: none; }

.carousel-caption .h1 { font-size: 2rem; }

/* home */
.carousel-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.25); z-index: 5; }
.home .carousel-overlay { background-color: transparent; }
.home .carousel-caption { position: relative; padding: 20px 15px; left: 0; right: 0; text-align: left; }
.home .carousel-caption .h1 { font-size: 1.5rem; font-weight: 700; color: #cf152d; }
.home .carousel-caption p { text-align: center; }
.home .carousel-caption .btn-jwbs { margin: 1rem auto 0 auto; padding: 0.75rem 1.5rem; font-size: 1.25rem; color: #4c4c4c !important; background-color: transparent !important; border-color: #4c4c4c; border-radius: 0; text-transform: uppercase; }
#learn-more { padding: 1.5rem 0; height: auto; background: url('/wp-content/uploads/2022/04/learn-more-bg.jpg') no-repeat 50% 75%; background-size: cover; }
#learn-more .company { margin: 1.5rem; padding: 1.5rem; background-color: #fff; text-align: center; box-shadow: 0 0 1rem 0.75rem rgba(255, 255, 255, 0.5); }
#learn-more .company figure { display: flex; align-items: center; height: 135px; }
#learn-more .company .btn { color: #fff; background-color: #cf152d; text-transform: uppercase; }

/* truck and trailer repair */
#services h4, #services p { width: 100%; }
#services .wp-block-group__inner-container { display: flex; flex-wrap: wrap; }
#services .wp-block-group { margin: 0 0 2em; width: 100%; background: #fff; }
#services .wp-block-group:nth-child(3n-0) { margin-right: 0; }
#services .svg-inline--fa { color: #5b5b5b; }
#services h4 { height: 3.75rem; }
#services .description { height: 9.375rem; }

body > footer { background-color: #f3f3f3; }
body > footer a, body > footer a:hover { color: #212529; }
body > footer .menu { margin: 0; padding: 0; list-style: none; }
body > footer .widget_block.widget_media_image { text-align: center; }
body > footer .wp-block-image img { max-width: 158px; }
#block-8, #block-10, #block-11 { display: none; }

/* media queries */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 576px) {
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	#header-block-1 { text-align: left !important; }
	#header-block-1 img { max-width: 246px; }
	.navbar { position: relative; margin-bottom: 1rem; padding: 0.5rem 1rem; }
	#main-navbar .nav-item:hover, #main-navbar .nav-item.current-menu-item { border-bottom-color: #cf152d; }
	#main-navbar .nav-item a { border-right: 1px solid #212529; }
	#mega-menu-primary { top: 0 !important; }
	.home .carousel-caption { position: absolute; padding: 20px 0; left: 21%; right: 49%; }
	.carousel-caption .h1, .home .carousel-caption .h1 { font-size: 2.5rem; }
	.home .carousel-caption p { text-align: left; }
	.home .carousel-caption .btn-jwbs { margin: 2.5rem 0 0 4.5rem; }
	#learn-more { padding-bottom: 0; height: 90vh; }
	#services .wp-block-group { margin: 0 2em 2em 0; width: calc(33.33% - 1.4em); }
	body > footer .wp-block-image img { max-width: 75%; }
	#block-8, #block-10, #block-11 { display: block; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
}