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

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

html, body { overflow-x: hidden; }
body { font-family: Poppins, sans-serif; font-size: 1.125rem; font-weight: 400 !important; color: #4d4d4d; }
strong, b, .font-weight-bold { font-weight: 700; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 700; margin-bottom: 1.5rem; }
/* default font 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; }
*/
a { color: #272262; color: #4d4d4d; font-weight: 700; }
a:visited { color: #a0a0a0; color: #4d4d4d; }
a:hover, a:focus, a:active { color: #d93649; text-decoration: none; }
#breadcrumbs { font-size: 70%; }
.container { max-width: 960px; }
:where(.wp-block-columns.is-layout-flex) { gap: 1em; }
.wp-container-4 { gap: 0 !important; }
.font-weight-light { font-weight: 300; }
:not(#header-block-1) .btn { padding: 0.375rem 3rem; font-size: 1.125rem; border-radius: 0; }
#header-block-1 .btn, #main-navbar .btn { padding: 0.375rem 0.75rem; }
.order-sm-first, .order-sm-last { padding-right: 10% !important; padding-left: 10% !important; }
.form-control { font-size: 0.875rem; }
.wp-block-quote { margin: 0 0 1.25rem; padding: 0.625rem 1.25rem; border-left: 0.375rem solid #ccc; } 
.wp-block-quote .fa-star { color: #ffb900; } 

.columns-2 { display: grid; grid-template-columns: 40% 60%; }

/* full width */
.full-width { position: relative; }
.full-width:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: -75rem; z-index: -1; }
.breakout { margin-right: 0; margin-left: calc((100vw - 100%) / -2); width: calc(100vw - 9px); }

/* colors */
.text-blue    { color: #272262; } .bg-blue    { color: #fff; background-color: #272262; } .border-blue    { border-color: #272262 !important; } .full-width.bg-blue:before    { border-left: 99rem solid #272262; box-shadow: 99rem 0 0 #272262; }
.text-lt-blue { color: #e0f0f7; } .bg-lt-blue { color: #4d4d4d; background-color: #e0f0f7; } .border-lt-blue { border-color: #e0f0f7 !important; } .full-width.bg-lt-blue:before { border-left: 99rem solid #e0f0f7; box-shadow: 99rem 0 0 #e0f0f7; }
.text-gray    { color: #e3e9e9; } .bg-gray    { color: #4d4d4d; background-color: #e3e9e9; } .border-gray    { border-color: #e3e9e9 !important; } .full-width.bg-gray:before    { border-left: 99rem solid #e3e9e9; box-shadow: 99rem 0 0 #e3e9e9; }
.text-red, .widget h4 { color: #d93649 !important; } .bg-red     { color: #fff; background-color: #d93649; } .border-red     { border-color: #d93649 !important; } .full-width.bg-red:before     { border-left: 99rem solid #d93649; box-shadow: 99rem 0 0 #d93649; }
.text-orange  { color: #f5a531; } .bg-orange  { color: #4d4d4d; background-color: #f5a531; } .border-orange  { border-color: #f5a531 !important; } .full-width.bg-orange:before  { border-left: 99rem solid #f5a531; box-shadow: 99rem 0 0 #f5a531; }
.text-yellow  { color: #fcfad6; } .bg-yellow  { color: #4d4d4d; background-color: #fcfad6; } .border-yellow  { border-color: #fcfad6 !important; } .full-width.bg-yellow:before  { border-left: 99rem solid #fcfad6; box-shadow: 99rem 0 0 #fcfad6; }
.text-white   { color: #fff; } .bg-white   { color: #4d4d4d; background-color: #fff; } .border-white   { border-color: #fff !important; } .full-width.bg-white:before   { border-left: 99rem solid #fff; box-shadow: 99rem 0 0 #fff; }

.wp-block-button.btn { padding: 0; }
.wp-block-button__link { border-radius: 0.25rem; }
.btn-blue    { color: #fff !important; background-color: #272262; border-color: #272262; } .btn-outline-blue    { color: #272262 !important; background-color: transparent; background-image: none; border-color: #272262; } .btn-outline-blue:hover    { color: #fff !important; background-color: #272262; background-image: none; border-color: #272262; }
.btn-lt-blue { color: #4d4d4d !important; background-color: #e0f0f7; border-color: #e0f0f7; } .btn-outline-lt-blue { color: #e0f0f7 !important; background-color: transparent; background-image: none; border-color: #e0f0f7; } .btn-outline-lt-blue:hover { color: #4d4d4d !important; background-color: #e0f0f7; background-image: none; border-color: #e0f0f7; }
.btn-gray    { color: #4d4d4d !important; background-color: #e9e9e9; border-color: #e9e9e9; } .btn-outline-gray    { color: #e9e9e9 !important; background-color: transparent; background-image: none; border-color: #e9e9e9; } .btn-outline-gray:hover    { color: #4d4d4d !important; background-color: #e9e9e9; background-image: none; border-color: #e9e9e9; }
:not(.wp-block-button).btn-red, .wp-block-button.btn-red .wp-block-button__link { color: #fff !important; background-color: #d93649; border-color: #d93649; } .btn-outline-red     { color: #d93649 !important; background-color: transparent; background-image: none; border-color: #d93649; } .btn-outline-red:hover     { color: #4d4d4d !important; background-color: #d93649; background-image: none; border-color: #d93649; }
.btn-orange  { color: #4d4d4d !important; background-color: #f5a531; border-color: #f5a531; } .btn-outline-orange  { color: #f5a531 !important; background-color: transparent; background-image: none; border-color: #f5a531; } .btn-outline-orange:hover  { color: #4d4d4d !important; background-color: #f5a531; background-image: none; border-color: #f5a531; }
.btn-yellow  { color: #4d4d4d !important; background-color: #fcfad6; border-color: #fcfad6; } .btn-outline-yellow  { color: #fcfad6 !important; background-color: transparent; background-image: none; border-color: #fcfad6; } .btn-outline-yellow:hover  { color: #fff !important; background-color: #fcfad6; background-image: none; border-color: #fcfad6; }
.btn-white   { color: #4d4d4d !important; background-color: #fff; border-color: #fff; } .btn-outline-white   { color: #fff !important; background-color: transparent; background-image: none; border-color: #fff; } .btn-outline-white:not(.btn-jwbs):hover   { color: #4d4d4d !important; background-color: #fff; background-image: none; border-color: #fff; }

/* header */
#header-block-1, #header-block-2, #header-block-3 { text-align: center !important; }
#header-block-1 { display: none; }
#header-block-1 .btn { font-size: 1rem; }
#header-block-2 img { max-width: 80%; }
#header-block-3 { font-size: 1rem; }
header.scrolling .mt-sm-n5 { max-height: 75px; }
header.scrolling p.font-weight-reg { margin-bottom: 5px; }
header.scrolling p.h2 { font-size: 1.5rem; margin-bottom: 5px; }

#sidebar-default h4, #sidebar-default .h4 { font-size: 1.375rem; }
#sidebar-default { font-size: 1rem; }

/* main nav */
.navbar-light .navbar-toggler { padding: 0 0.5rem; border: 1px solid #fff; }
.navbar-light .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(255,255,255,1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important; }
.navbar .btn-sm { font-size: 1rem; }
.navbar .btn.btn-sm { padding: 0.25rem 0.5rem !important; font-size: 0.75rem !important; }
.navbar-collapse { justify-content: flex-end; }
#search-form-container { right: 20px; top: 25px; min-width: 250px; }
#mega-menu-wrap-primary .mega-menu-toggle+#mega-menu-primary { padding: 1rem; }
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > .mega-menu-link { font-weight: bold !important; }
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { font-size: 18px !important; }
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > .mega-menu-link { padding: 0 10px !important; }
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator { display: none; }
#mega-menu-wrap-primary #mega-menu-primary .mega-sub-menu > li.mega-menu-item > .mega-menu-link { padding-left: 4em !important; }
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu { left: -0.625rem !important; }
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu { padding-bottom: 8px; }
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { padding: 0 0.5rem 0 1.5rem !important; }
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator { float: none; }
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner:before, #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner:after { background-color: #fff; }
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { top: 45px; }
.mega-menu-item .search-form { padding: 0 10px; }
.mega-menu-item .search-form .input-group > .form-control { flex: none; width: auto; max-width: none; }

/* carousel*/
.carousel-caption { right: 37.5%; left: 7.5%; }
.carousel-caption .h1 { padding: 1.5rem; font-size: 1rem; line-height: 1.5; text-align: left; color: #fff; background-color: rgba(49, 55, 55, 0.88); }

#content { margin-top: 3rem; }

.home h2.h1 { padding-top: 1rem; font-size: 1.75rem; }
.home .wp-container-8 { gap: 0; }
.info_grid_item { align-items: center; }
#service-area { display: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #c6cacb url('/wp-content/uploads/garage-door-service-area-map.jpg') no-repeat center; background-size: cover; }
#service-area.full-width:before  { border-left: 99rem solid #c6cacb; box-shadow: 99rem 0 0 #c6cacb; }

/* newsfeed */
#news-feed article a { font-weight: 400; }

#logos img { width: auto !important; height: 50px; }
.brands-we-serve .wp-block-group__inner-container { padding-right: 10%; padding-left: 10%; }
.brands-we-serve .wp-block-image { display: flex; align-items:center; margin-bottom: 1rem; padding: 1rem; min-height: 10rem; background-color: #fff; }

/*contact us */
#contact-us-request, #contact-us-request > div:last-child { position: relative; }
#contact-us-request > div:last-child .bg { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #4d4d4d; z-index: -1; }
#contact-us-request .wp-block-column { padding-right: 10%; padding-left: 10%; }
#contact-us-request .wp-block-column:last-child { color: #fff; }
#contact-us-request .wpcf7-list-item { margin: 0; width: 100%; }

/* review pages */
#rating-numbers, #rating-stars { unicode-bidi: bidi-override; direction: rtl; text-align: center; }
#rating-stars { margin-bottom: 2em; }
#rating-stars a { color: #000; }
#rating-numbers span, #rating-stars span { display: inline-block; position: relative; width: 1.1em; font-size: 27px; }
#rating-numbers span { padding: 0; width: 1.66em; font-size: 18px; line-height: 2; }
#rating-stars span:hover, #rating-stars span:hover a, #rating-stars span:hover ~ span, #rating-stars span:hover ~ span a { color: transparent; }
#rating-stars span:hover:before, #rating-stars span:hover ~ span:before { content: "\2605"; position: absolute; left: 0; color: gold; }
#review-btns .wp-block-button { display: inline-block !important; }

/* blog archive */
.blog #content article img { width: 100%; max-width: 150px; }
.blog article { margin-bottom: 0.5rem; padding-top: 1px; }
.blog article.border-bottom { padding-bottom: 1em; border-bottom-color: #272262 !important; }
.blog article.border-bottom:last-child { border-bottom: 0 none !important; }
.blog .widget_recent_entries ul { margin-left: 0; padding-left: 0; list-style: none; }
.blog .wp-block-categories-list { padding-left: 1.25em; }
.blog .widget_recent_entries ul li, .blog .wp-block-categories-list li { margin-bottom: 1em; }

/* upper footer */
#upper-footer .list-unstyled { columns: 2; width: 100%; }
#block-6 .fa-lg { font-size: 1.6em; }
#block-5 .svg-inline--fa.fa-w-16 { width: 1.2em; height: 1.2em; }

#inner-footer.full-width, #inner-footer.full-width a { color: #fff !important; }
#inner-footer.full-width { background-color: #313737; }
#inner-footer.full-width:before  { border-left: 99rem solid #313737; box-shadow: 99rem 0 0 #313737; }
#inner-footer #block-19 img { margin-left: -12px; }
#inner-footer .wpcf7 { width: 100%; }
/* attribution */
p.attribution { font-size: 80%; }

/* media queries */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 576px) {
	#header-block-2 { margin-top: 40px; }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	h1, .h1 { font-size: 2.375rem; line-height: 1.5; }
	h2, .h2 { font-size: 2.125rem; line-height: 1.5; }
	h3, .h3 { font-size: 1.625rem; line-height: 1.5; }
	h4, .h4 { font-size: 1.5rem; line-height: 1.5; }
	h5, .h5 { font-size: 1.25rem; line-height: 1.5; }
	.w-sm-75 { width: 75% !important; }
	.w-sm-auto { width: auto !important; }
  .bg-md-gray { color: #4d4d4d; background-color: #e3e9e9; }
	#header-block-1, #header-block-3 { text-align: right !important; }
	#header-block-2 { text-align: left !important; margin-top: 0;}
	.navbar .btn.btn-sm { padding: 0.375rem 3rem; }
	header.scrolling .mt-sm-n5 { max-height: 125px; }
	#mega-menu-wrap-primary .mega-menu-toggle+#mega-menu-primary { padding: 0; }
	#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary { top: 0; }
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > .mega-menu-link { padding: 0 2em !important; }
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { font-size: 16px !important; font-weight: normal !important; }
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { padding: 0.25rem 0.625rem 0.25rem 1.125rem !important; }
	.carousel-caption { right: 42.5%; }
	.carousel-caption .h1 { padding: 3rem; font-size: 2.5rem; line-height: 1.75; }
	.wp-container-4 { gap: 2em !important; }
	#service-area { display: block; }
	.home .wp-container-8 { gap: 2em; }
	.brands-we-serve .wp-block-group__inner-container { padding: 0; }
	#contact-us-request > .bg { position: absolute; top: 0; right: 0; left: 50%; bottom: 0; background-color: #4d4d4d; z-index: -1; }
	#contact-us-request .wpcf7-list-item { width: 50%; }
	#upper-footer .list-unstyled { columns: 3; margin: 0 auto; width: 50%; }
	p.attribution { text-align: left; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.w-md-50 { width: 50% !important; }
	.bg-md-jwbs { background-color: #f5a531; }
	header.fixed-top > .container { max-width: 80%; }
	#header-block-1 { display: block; }
	#header-block-2 img { max-width: 100%; }
	#header-block-3 { font-size: 1.125rem; }
	.navbar-light > .container { max-width: 92.5%; }
	.navbar .btn-sm { font-size: 0.875rem; }
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item > .mega-menu-link { font-size: 16px !important; }
	#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > .mega-menu-link { padding: 0 0.375rem !important; }
	#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator { float: right; }
  #search-form-container { display: none; }
	.carousel-caption { right: 49%; left: 12%; }
}

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

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