/* md */

@media (min-width: 992px) and (max-width: 1199px) {
	/* The tile titles' column is about 153px wide here; PREFABRICATED can't wrap */
	.service-section .box-title h3 {
		font-size: 15px;
		letter-spacing: 0.5px;
	}

	.navbar-default .navbar-nav > li {
		margin-left:0;
	}

	.navbar-default .navbar-nav > li a {
		font-size: 14px;
	}

	.services .service {
		padding:5px;
		height: 175px;
	}

	.call-to-action .brand-info {
		padding: 0 35px;
		text-align:center;
		float:none;
	}

	.call-to-action {
	    padding-top: 35px;
	    padding-bottom: 35px;
	}

	.call-to-action h3 {
		margin-bottom: 30px;
	}

	.call-to-action .btn.btn-primary {
		float: none;
	}

	.info-box,
	.info-text .info-label {
	    font-size: 12px;
	}

	.info-box i {
		margin-right: 10px;
		font-size: 30px;
	}
}

/* sm */

@media (min-width: 768px) and (max-width: 991px) {
	.navbar-default .navbar-nav > li > a {
		font-size: 14px;
	}

	.navbar-default li {
		margin-left: 0;
	}

	.info-box {
		margin-right: 15px;
	}

	.home-content h1 {
		font-size:25px;
	}

	.home-content h2 {
		font-size:45px;
	}

	.home-content {
		padding-top: 100px;
		height: auto;
		padding-bottom: 50px;
	}

	.services {
		margin-top: 100px;
	}

	.services .service {
		margin-bottom: 25px;
		min-height: 150px;
	}

	.image-box {
		margin-top: 0;
	}

	.call-to-action .brand-info {
		padding: 0 35px;
		text-align:center;
		float:none;
	}

	.contact-section h3 {
		font-size: 18px;
	}

	.call-to-action {
	    padding-top: 35px;
	    padding-bottom: 35px;
	}

	.call-to-action h3 {
		margin-bottom: 30px;
	}

	.call-to-action .btn.btn-primary {
		float: none;
	}
}

/* xs */

@media (max-width: 767px) {
	/* Tiles stack, so the section is tall and narrow and "cover" shows only a strip down the middle of the photo:
	   send just that strip (a 480px centre crop), at the same sharpness */
	.service-section {
		background-image: url(../images/services/services.jpg);
		background-image: image-set(url(../images/services/services-phone.webp) type("image/webp"), url(../images/services/services.jpg) type("image/jpeg"));
	}

	h1 {
		font-size:24px;
	}

	h2 {
		font-size:20px;
	}

	h3 {
		font-size:16px;
	}

	h4 {
		font-size:15px;
	}

	h5 {
		font-size:13px;
	}

	.section-title {
		margin-bottom: 50px;
	}

	.section-title h1,
	.section-title .section-kicker {
		font-size:15px;
	}

	.section-padding {
		padding-top: 35px;
		padding-bottom: 50px;
	}

	.service-section.section-padding {
		padding-bottom: 50px;
	}

	.info-box {
		margin-bottom:0px;
		float:left;
		font-size: 12px;
	}

	.top-social.float-end {
		float: left !important;
	}

	.info-box i {
		font-size: 28px;
	}

	.info-text .info-label {
		font-size: 12px;
	}

	.navbar-default {
		padding: 10px 0;
		border-top: 0;	/* it divides the menu from the top bar, which is hidden on phones */
	}

	.navbar-brand {
		flex: 1 1 0;
		min-width: 0;
		margin-right: 15px;
	}

	.navbar-default .navbar-nav {
		--bs-nav-link-padding-y: 10px;
	}

	.navbar-default .navbar-nav > li > a {
		line-height: 20px;
		font-size: 13px;
	}

	.navbar-default li:first-child {
		margin-left: 15px;
	}

	.navbar-collapse {
		border-top:0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	.main-menu .navbar-nav {
		margin-top:0;
	}

	.home-content {
		padding-top: 40px;
		height: auto;
		padding-bottom: 50px;
	}

	.home-content h1 {
		font-size:18px;
	}

	.home-content h2 {
		font-size:36px
	}

	.btn.btn-primary {
		padding: 12px 30px;
		font-size: 12px;
	}

	.btn.btn-primary i {
		width:45px;
		line-height:45px;
	}

	.services {
   	 margin-top: 50px;
	}

	.services .service {
		margin-bottom: 20px;
	}

	.box-title h3 {
		font-size:16px;
	}

	.image-box {
		min-width:80px;
	}

	.call-to-action .btn.btn-primary {
		margin-top: 0;
		float: none;
	}

	.call-to-action {
		text-align: center !important;
		padding-top: 15px;
		padding-bottom: 30px;
	}

	.call-to-action h3 {
		margin-bottom: 25px;
		font-size: 24px;
	}

	.footer-social li + li {
		margin-left: 5px;
	}

	.footer-social i {
		font-size:20px;
	}

	.footer-social {
		width:100%;
	}

	.contact-section {
		padding:20px 0;
	}

	.footer-logo {
		padding: 0 20px;
		margin-bottom: 30px;
	}

	.call-to-action .brand-info {
		padding: 0 15px;
		text-align:center;
		float:none;
	}

	.breadcrumb-section {
		padding-top: 20px;
		padding-bottom: 12px;
	}

	.about-us-section.section-padding {
		padding-top: 10px;
	}

	.about-us-section .section-title {
		margin-bottom: 30px;
	}

	.about-us-image {
	    margin-top: 45px;
	}

	.breadcrumb-content h1 {
		text-align: center;
		float: none;
		margin-bottom: 0;
	}

	.breadcrumb {
		float: none;
		justify-content: center;
		--bs-breadcrumb-padding-y: 4px;
		--bs-breadcrumb-margin-bottom: 0;
	}
}

/* XS Portrait */

@media (max-width: 479px) {
	.top-social.float-end,
	.info-box.float-end {
		float:left !important;
	}

	.info-box {
		margin-bottom: 0;
		font-size: 12px;
	}

	.info-box i {
		font-size: 28px;
	}

	.info-text .info-label {
		font-size: 12px;
	}

	.image-box {
		min-width:60px;
	}

	.home-content {
		height: auto;
		padding-bottom: 30px;
	}

	#home-slider {
		padding-bottom: 60px;
	}

	.process-icon,
	.left-content .process-icon,
	.work-process .process-info {
	    float: none;
	    margin-left: 0;
	    text-align: center;
	}

	.services .service {
		padding: 15px 10px;
	}

	.process-icon img {
		display: inline-block;
	}

	.breadcrumb-content h1 {
		text-align: center;
		float: none;
		margin-bottom: 0;
	}

	.breadcrumb {
		float: none;
		justify-content: center;
	}

	.about-section-content {
		text-align: center;
	}
}