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


html, body { overflow-x: hidden; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, strong { font-weight: 700; }
h1, .h1 { font-size: 2rem }
h2, .h2 { font-size: 1.5rem }
h3, .h3 { font-size: 1.375rem }
h4, .h4 { font-size: 1.25rem }
h5, .h5 { font-size: 1.125rem }
:not(.wp-block-button).btn, .wp-block-button.btn .wp-block-button__link { padding: 0.25rem 1.125rem; font-weight: bold; }
.btn:hover a { text-decoration: none; }
.alignwide { margin-left: -15rem; margin-right: -15rem; }
.wp-block-image.alignwide { max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignfull > img, .alignfull .wp-block-image img { width: 100vw; }

.bg-gray { background-color: #e1e1e1 !important; }
.bg-light-blue { background-color: #e9fdfe; }
.bg-gold { background-color: #febf57; }
.bg-light-gold { background-color: rgba(254, 191, 87, 0.25); }

/* forms */
.form-control { background-color: #f3f3f3; border: 0 none; border-radius: 0; }
.wpcf7-radio span.wpcf7-list-item { margin: 0 1em 0 0; }
.wpcf7-radio span.wpcf7-list-item.last { margin: 0; }

#header-block-1 { text-align: center !important; }
#header-block-1 > div > div { margin-right: auto !important; }
#header-block-2 { text-align: center !important; }
#header-block-2 img { max-width: 75%; }
#header-block-3 .btn-jwbs { font-size: 1rem; }
#header-block-4 .btn-link.btn-lg { padding: 0.125rem 0; font-size: 1.375rem; }

.bg-jwbs { background-color: transparent !important; }
.navbar-brand { max-width: 80%; }
.navbar-light .navbar-nav .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .nav-link.show { font-weight: 700; color: #212529; }

/* home */
.carousel-caption { display: none; }
.carousel-caption h1, .home .bg-gold.h1 { font-size: 1.75rem; }
.carousel-caption .btn { margin-top: 1.5rem; text-transform: uppercase; border-radius: 0; }
.home .logos ul { margin: 0 auto; }
.home .wp-block-columns.container .wp-block-group { background-color: #fff; border: 2px solid #febf57; }
.home .wp-block-columns.container .wp-block-group__inner-container { display: flex; flex-basis: 100%; flex-direction: column; align-items: start; }
.home .wp-block-columns.container .wp-block-group .wp-block-button__link { padding: 0.25rem 1.25rem; background-color: #acacac; }
.home .wp-block-columns.container .wp-block-group .wp-block-button__link:hover { color: #fff; background-color: #febf57; }
.home .concrete-calculator * { line-height: 1; }
.home .concrete-calculator .h1 { font-size: 2.75rem; }
.home .concrete-calculator .h1, .home .concrete-calculator .h3 { color: #fff; }
.wp-block-column.d-flex > .wp-block-group.d-flex { flex-basis: 100%; }
.home form .form-fields { width: 100%; }
.home form .wpcf7-form-control-wrap { font-size: 90%; }
.home form .wpcf7-submit { margin-right: -1.25rem; }

/* concrete calculator */
/* #calculator * { border: 0 none; border-radius: 0; } */
#calculator .control-title span { display: inline-block; width: 49%; }
#calculator .control-title .yards { font-size: 1.25rem; }
#calculator .field-wrap { display: inline-block; margin: 0.5rem 0; width: 49%; }
#calculator input { display: inline-block; width: 58%; }
#calculator input, #calculator select { padding: 0.25rem 0.5rem; height: 2rem; border: 0 none; }
#calculator select { font-weight: bold; width: 6.375rem; background-color: #febf57; /* -moz-appearance: none; -webkit-appearance: none; appearance: none; */ }
/* #calculator .select-wrapper:after { position: absolute; top: 25%; right: 10px; content: '\f107'; font-family: 'Font Awesome 5 Free'; z-index: 5; } */
#calculator #calc_total { background-color: transparent !important; }
#calculator .field-wrap.heading.calc-select { width: 43.5%; }
#calculator #calc_select { font-weight: normal; }
#calculator input, #calculator #calc_select { background-color: #f3f3f3; }
#calculator .field-wrap.heading input, #calculator .field-wrap.heading .select-wrapper, #calculator .field-wrap.heading .select-wrapper select { width: 100%; }
#calculator .select-wrapper { position: relative; display: inline-block; width: 39%; }

p.alignfull.bg-gold.h1 a { color: #000; }
body > footer a, body > footer a:hover { color: #212529; }
body > footer a[href^='tel'], body > footer a[href^='tel']:hover { color: #febf57; }
#custom_html-2 { text-align: center; }
#custom_html-2 img { margin-bottom: 1rem; max-width: 200px; }
#custom_html-4 { line-height: 2; }


/* media queries */
/* Extra Small Devices, Phones */
@media only screen and (min-width : 576px) {
	#header-block-1 { text-align: right !important; }
	#header-block-1 > div > div { margin-right: 0 !important; }
	#header-block-2 { text-align: left !important; }
	#header-block-2 img { max-width: 100%; }
	#custom_html-2 { text-align: left; }
	#custom_html-2 img { max-width: 260px; }
	/* bootstrap default head 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 }
	*/
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	:not(.wp-block-button).btn, .wp-block-button.btn .wp-block-button__link { padding: 0.25rem 2.25rem; }
  #header-block-3 .btn-jwbs { font-size: 1.5rem; }
  #header-block-4 .btn-link.btn-lg { font-size: 1.875rem; }
	.carousel-caption { display: flex; right: 10%; left: 10%; }
	.carousel-caption h1, .home .bg-gold.h1 { font-size: 2rem; }
	#custom_html-3 { text-align: center; }
	#custom_html-3 iframe { margin: 0 auto; }
	#custom_html-4 { line-height: 1.5; }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.bg-jwbs { background-color: #febf57 !important; }
	.carousel-caption { right: 15%; left: 15%; }
	.carousel-caption h1, .home .bg-gold.h1 { font-size: 2.5rem; }
	.carousel-caption .btn { margin-top: 3rem; }
	.home .concrete-calculator .h1 { font-size: 3rem; }
  .home form .form-fields { width: 82%; }
}

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

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