/* Responsive styles for Roof Maxx - Jon @ Graydian - 2025-12-08 */


/* Small Desktop */
@media only screen and (min-width: 992px) and (max-width: 1399px) {

	
}


@media only screen and (min-width: 992px) and (max-width: 1299px) {

	
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

	#main-nav .container {
		max-width: 100%;
	}
	
}


/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	#main-nav .mobile-toggle {
		display: flex;
	}
	
	.call-now-mobile-wrapper {
		display: block;
	}
	
	#main-nav .phone-numbers {
		display: none;
	}
	
	#main-nav .get-a-quote {
		display: none;
	}
	
	nav.main-nav-menu .container {
		display: none;
	}
	
	#home-hero h1 {
		margin-top: 30px;
	}
	
	#home-hero-bottom-01 {
		display: none;
	}
	
	#home-hero-bottom-02 h2 {
		font-family: 'Source Sans 3', sans-serif;
		font-weight: 900;
		font-size: 30px;
		text-transform: uppercase;
	}
	
	#home-quote .col-reviews {
		margin-top: 60px;
	}
	
	#home-how-it-works .container {
		max-width: 100%;
	}
	
	#home-dealer .col-about {
		margin-bottom: 30px;
	}
	
	#home-dealer .col-local img.dealer-photo {
		margin-bottom: 15px;
	}
	
	#home-environment .env-item {
		margin-bottom: 8px;
	}
	
	#home-environment .row-content img {
		width: 200px;
		height: auto;
		margin-bottom: 15px;
	}
	
	#home-warranty img {
		width: 40%;
		max-width: 40%;
		height: auto;
		display: block;
		margin: 0 auto 15px;
	}
	
	#home-conclusion .col-info {
		margin-bottom: 30px;
	}
	
	
	
	#quote-hero {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
		background: transparent;
	}
	
	#quote-hero .col-info h1 {
		font-size: 28px;
	}
	
	#quote-hero .form-wrapper {
		padding: 15px 15px 20px 15px;
		margin-bottom: 30px;
	}

	#quote-dealer .col-imgs .imgs {
		flex-wrap: wrap;
	}
	
	#quote-dealer .col-imgs .imgs img {
		width: 100%;
	}
	
	#quote-dealer .col-imgs .imgs img.five-year-warranty,
	#quote-dealer .col-imgs .imgs img.rated-roofer {
		display: none;
	}
	
	#quote-dealer .col-about {
		margin-bottom: 30px;
	}
	
	#quote-reviews h2 {
		font-size: 28px;
	}
	
	
	
	#city-hero {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
		background: #eee;
	}
	
	#city-hero .col-info {
		text-align: center;
		margin-bottom: 30px;
	}
	
	#city-hero .form-wrapper {
		margin-bottom: 30px;
	}
	
	#city-hero .form-wrapper.form-wrapper-city .gform_wrapper .gfield--type-html .form-title {
		font-size: 32px;
		margin-bottom: 15px;
	}
	
	#city-hero .form-wrapper.form-wrapper-city .gform_wrapper .gfield--type-html p {
		line-height: 1.2;
	}
	
	#city-what-is-roof-maxx .env-item {
		margin-bottom: 10px;
	}
	
	#city-dealer .col-imgs .imgs {
		flex-wrap: wrap;
	}
	
	#city-dealer .col-imgs img {
		height: 190px;
		width: 100%;
		margin-bottom: 30px;
	}
	
	#city-dealer .col-imgs img.rated-roofer {
		height: 150px;
		width: 100%;
		margin-bottom: 30px;
	}
	
	#city-dealer .col-about {
		margin-bottom: 30px;
	}
	
	#city-proudly-serving {
		font-size: 28px;
		line-height: 1.3;
	}
	
	#city-proudly-serving p {
		margin-bottom: 15px;
	}
	
	#city-proudly-serving p:last-of-type {
		margin-bottom: 0;
	}
	
	#city-reviews h2 {
		font-size: 28px;
	}
	
	#hiw-science h2 {
		margin-bottom: 0;
	}
	
	#hiw-science .col {
		padding-top: 90px;
	}
	
	
	
	
	footer.site-footer .container-footer-01 {
		flex-direction: column;
		align-items: center;
		row-gap: 30px;
	}
	
	footer.site-footer .container-footer-04 {
		text-align: center;
	}
	
	footer.site-footer .container-footer-04 .col-usda img {
		width: 160px;
		height: 80px;
		display: block;
		margin: 30px auto;
	}

}

/* Smartphone */
@media only screen and (min-width: 1px) and (max-width: 767px) {
	
	#main-nav .mobile-toggle {
		display: flex;
	}
	
	.call-now-mobile-wrapper {
		display: block;
	}
	
	#main-nav a.navbar-brand {
		width: 215px;
		height: auto;
	}
	
	#main-nav .phone-numbers {
		display: none;
	}
	
	#main-nav .get-a-quote {
		display: none;
	}
	
	nav.main-nav-menu .container {
		display: none;
	}
	
	.container-fluid-custom-header-image img {
		height: 200px;
	}
	
	.entry-header-custom-image {
		margin-top: -65px;
	}
	
	.entry-header-custom-image .entry-title {
		font-size: 24px;
	}
	
	#home-hero .how-it-works {
		display: none;
	}
	
	#home-hero {
		text-align: center;
		padding: 15px 0;
	}
	
	#home-hero h1 {
		margin-top: 5px;
		margin-bottom: 10px;
	}
	
	#home-hero h1 .line-01 {
		font-size: 22px;
		margin-bottom: 5px;
	}
	
	#home-hero h1 .line-02 {
		font-size: 14px;
	}
	
	#home-hero h2 {
		font-size: 15px;
		margin-bottom: 10px;
		padding-right: 0;
	}
	
	#home-hero .free-quote a.btn {
		font-size: 22px;
		display: block;
		width: 100%;
	}
	
	#home-hero-bottom-01 {
		display: none;
	}
	
	#home-hero-bottom-02 {
		padding: 10px 0;
	}
	
	#home-hero-bottom-02 h2 {
		font-family: 'Source Sans 3', sans-serif;
		font-weight: 900;
		font-size: 18px;
		text-transform: uppercase;
	}
	
	#home-quote {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	#home-quote .col-quote-form {
		display: none;
	}
	
	#home-social {
		padding-top: 5px;
	}
	
	#home-social span {
		display: block;
		width: 100%;
		margin-right: 0;
	}
	
	#home-social a {
		margin: 0 10px;
	}
	
	#home-how-it-works {
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 0;
		padding-right: 0;
	}
	
	#home-how-it-works h2 {
		font-size: 28px;
		margin-bottom: 20px;
	}
	
	#home-how-it-works .row-steps .col-step img {
		width: 75%;
		max-width: 75%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	#home-how-it-works .row-steps .col-step .step {
		font-size: 28px;
		width: 48px;
		height: 48px;
		line-height: 48px;
		margin-top: -24px;
		margin-bottom: 10px;
	}
	
	#home-how-it-works .row-steps .col-step p {
		font-size: 16px;
		margin-bottom: 30px;
	}
	
	#home-how-it-works .row-process {
		padding-top: 30px;
		background: #e3e3e3;
		background: linear-gradient(180deg,rgba(227, 227, 227, 1) 0%, rgba(255, 255, 255, 0) 100%);
	}
	
	#home-how-it-works .row-read-more hr {
		margin: 1rem 0 2rem;
	}
	
	#home-how-it-works .row-read-more h3 {
		font-size: 20px;
	}
	
	#home-savings {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	#home-savings .container {
		padding-left: 0;
		padding-right: 0;
	}
	
	#home-savings h2 {
		font-size: 26px;
	}
	
	#home-savings .row-savings-chart h3 {
		padding-top: 15px;
		margin-bottom: 30px;
		font-size: 14px;
	}
	
	#home-savings .row-savings-chart .chart-item h4 {
		font-size: 16px;
	}
	
	#home-savings .row-savings-chart .chart-item p {
		font-size: 13px;
	}
	
	#home-savings .row-savings-chart .col-middle span.vs {
		font-size: 24px;
		top: 0px;
	}
	
	#home-savings .row-conclusion h3 {
		font-size: 20px;
	}
	
	#home-reviews {
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	#home-reviews .container {
		padding-left: 0;
		padding-right: 0;
	}
	
	#home-reviews h2 {
		font-size: 31px;
		line-height: 1.1;
	}
	
	#home-call-us {
		font-size: 16px;
		font-weight: bold;
	}
	
	#home-call-us .container {
		padding-left: 0;
		padding-right: 0;
	}
	
	#home-call-us i.fa-solid {
		display: none;
	}
	
	#home-call-us span.rm-orange {
		display: block;
		width: 100%;
	}
	
	#home-dealer .col-about {
		margin-bottom: 30px;
	}
	
	#home-dealer .col-about a.btn {
		display: block;
		width: 100%;
	}
	
	#home-dealer .col-about h2 {
		font-size: 28px;
		text-align: center;
	}
	
	#home-dealer .col-local {
		text-align: center;
	}
	
	#home-dealer .col-local img.dealer-photo {
		margin-bottom: 15px;
	}
	
	#home-dealer .row-cities {
		text-align: center;
		font-size: 18px;
	}
	
	#home-dealer .row-cities ul {
		list-style: none;
		padding-left: 0;
		font-size: 18px;
	}
	
	#home-faqs h2 {
		font-size: 28px;
	}
	
	#home-faqs h3 {
		font-size: 28px;
		line-height: 1.1;
	}
	
	#home-faqs a.btn {
		display: block;
		width: 100%;
	}
	
	#home-faqs .accordion {
		margin-top: 30px;
	}
	
	#home-before-after h2 {
		font-size: 28px;
	}
	
	#home-environment h2 {
		font-size: 28px;
	}
	
	#home-environment .intro {
		font-size: 16px;
		line-height: 1.2;
	}
	
	#home-environment .env-item {
		margin-bottom: 8px;
	}
	
	#home-environment .row-content h3 {
		font-size: 28px;
		line-height: 1.1;
	}
	
	#home-environment .row-content img {
		max-width: 170px;
		height: auto;
		margin-bottom: 20px;
	}
	
	#home-environment .row-content a.btn {
		display: block;
		width: 100%;
	}
	
	#home-warranty {
		padding-top: 15px;
		padding-bottom: 15px;
		line-height: 1.2;
		font-size: 16px;
	}
	
	#home-warranty img {
		max-width: 75%;
		height: auto;
		display: block;
		margin: 0 auto 15px;
	}
	
	#home-warranty h2 {
		font-size: 28px;
		text-align: center;
		margin-bottom: 15px;
	}
	
	#home-warranty a.btn {
		display: block;
		width: 100%;
	}
	
	#home-financing {
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: 18px;
	}
	
	#home-financing h2 {
		font-size: 24px;
		margin-bottom: 10px;
	}
	
	#home-conclusion {
		padding-top: 20px;
		padding-bottom: 20px;
		text-align: center;
	}
	
	#home-conclusion .container {
		padding-left: 0;
		padding-right: 0;
	}
	
	#home-conclusion h2 {
		font-size: 28px;
		text-align: center;
	}
	
	#home-conclusion img.map {
		max-width: 75%;
		height: auto;
		display: block;
		margin: 0 auto 30px;
	}
	
	#home-conclusion .form-wrapper {
		text-align: left;
		padding: 15px 15px 15px 15px;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	#main .form-wrapper.form-wrapper-bottom .gform_wrapper .form-title {
		font-size: 32px;
		text-align: center;
		margin-bottom: 10px;
	}
	
	#main .form-wrapper.form-wrapper-bottom .gform_wrapper .gfield--type-html p {
		font-size: 16px;
		text-align: center;
		margin-bottom: 10px;
	}
	
	
	
	
	#quote-hero {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
		background: transparent;
	}
	
	#quote-hero .col-info {
		text-align: center;
	}
	
	#quote-hero .col-info h1 {
		font-size: 28px;
	}
	
	#quote-hero .form-wrapper {
		padding: 15px 15px 20px 15px;
		margin-bottom: 30px;
	}
	
	#quote-hero .form-wrapper.form-wrapper-quote .gform_wrapper .gfield--type-html .form-title {
		font-size: 32px;
	}
	
	#quote-hero .col-info .row-steps .col-step h3 {
		padding-left: 0;
		padding-right: 0;
		font-size: 12px;
	}
	
	#quote-hero .col-info .row-steps .col-step h3:after {
		content: '';
	}
	
	#quote-hero .col-info img.map {
		width: 60%;
		height: auto;
		display: block;
		margin: 0 auto 20px;
	}
	
	#quote-dealer .col-imgs .imgs {
		flex-wrap: wrap;
	}
	
	#quote-dealer .col-imgs .imgs img.five-year-warranty,
	#quote-dealer .col-imgs .imgs img.rated-roofer {
		display: none;
	}
	
	#quote-dealer .col-about {
		margin-bottom: 30px;
	}
	
	#quote-dealer .row-cities {
		text-align: center;
	}
	
	#quote-dealer .row-cities ul {
		list-style: none;
		padding-left: 0;
	}
	
	
	#quote-reviews {
		padding-left: 0;
		padding-right: 0;
	}
	
	#quote-reviews h2 {
		font-size: 28px;
	}
	
	
	
	#city-hero {
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 0;
		padding-right: 0;
		background: #eee;
	}
	
	#city-hero .col-info {
		text-align: center;
		margin-bottom: 30px;
	}
	
	#city-hero .col-info h1 {
		font-size: 28px;
	}
	
	#city-hero .form-wrapper {
		padding: 15px 15px 20px 15px;
		margin-bottom: 30px;
	}
	
	#city-hero .form-wrapper.form-wrapper-city .gform_wrapper .gfield--type-html .form-title {
		font-size: 32px;
		margin-bottom: 15px;
	}
	
	#city-hero .form-wrapper.form-wrapper-city .gform_wrapper .gfield--type-html p {
		line-height: 1.2;
	}
	
	#city-hero .col-info .row-steps .col-step h3 {
		padding-left: 0;
		padding-right: 0;
		font-size: 12px;
	}
	
	#city-hero .col-info .row-steps .col-step h3:after {
		content: '';
	}
	
	#city-hero .col-info .google-map {
		display: none;
	}
	
	#city-what-is-roof-maxx .env-item {
		margin-bottom: 10px;
	}
	
	#city-dealer .col-imgs .imgs {
		flex-wrap: wrap;
	}
	
	#city-dealer .col-imgs .imgs img.five-year-warranty,
	#city-dealer .col-imgs .imgs img.rated-roofer {
		display: none;
	}
	
	#city-dealer .col-about {
		margin-bottom: 30px;
	}
	
	#city-proudly-serving {
		font-size: 22px;
		line-height: 1.3;
	}
	
	#city-proudly-serving p {
		margin-bottom: 15px;
	}
	
	#city-proudly-serving p:last-of-type {
		margin-bottom: 0;
	}
	
	#city-reviews h2 {
		font-size: 28px;
	}
	
	.wrapper-areas-we-serve .container-fluid-areas-we-serve {
		height: 230px;
	}
	
	.wrapper-areas-we-serve .container-header {
		margin-top: -45px;
	}
	
	.wrapper-areas-we-serve #main .container .row-cities {
		text-align: center;
	}
	
	.wrapper-areas-we-serve #main .container ul {
		list-style: none;
		padding-left: 0;
		text-align: center;
	}
	
	

	.wrapper.wrapper-contact-us-page .container-fluid-contact-us-page {
		padding-left: 0;
		padding-right: 0;
	}
	
	#contact-us {
		padding-left: 0;
		padding-right: 0;
	}
	
	#contact-us .col-info h1 {
		font-size: 28px;
		line-height: 1.2;
	}
	
	#contact-us .col-info img.map {
		display: block;
		margin: 0 auto 15px;
		width: 275px;
		max-width: 65%;
		height: auto;
	}
	
	#contact-us .col-info a {
		font-size: unset;
	}
	
	#contact-us .form-wrapper {
		padding: 15px;
		margin-top: 30px;
	}
	
	#contact-us .form-wrapper.form-wrapper-contact .gform_wrapper .gfield--type-html .form-title {
		margin-bottom: 10px;
	}
	
	#contact-us .form-wrapper.form-wrapper-contact .gform_wrapper .gfield--type-html p {
		margin-bottom: 10px;
		font-size: 16px;
	}
	
	
	#right-sidebar {
		margin-top: 30px;
	}
	
	#hiw-hero {
		padding-left: 0;
		padding-right: 0;
	}
	
	#hiw-science {
		padding-left: 0;
		padding-right: 0;
	}
	
	#hiw-science h2 {
		margin-bottom: 0;
	}
	
	#hiw-science .col {
		padding-top: 90px;
	}
	
	#hiw-science .card .card-body h3 {
		font-size: 28px;
	}
	
	
	#faq .faq-nav-wrapper {
		margin-bottom: 30px;
	}
	

	
	
	
	
	#wrapper-footer {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	footer.site-footer .container-footer-01,
	footer.site-footer .container-footer-03 {
		padding: 20px 15px;
	}
	
	footer.site-footer .container-footer-02 {
		padding: 20px 0;
	}
	
	footer.site-footer .container-footer-04 {
		padding: 20px 15px 0 15px;
		text-align: center;
	}
	
	footer.site-footer .container-footer-01 {
		flex-direction: column;
		text-align: center;
		align-items: center;
		row-gap: 30px;
	}
	
	footer.site-footer .container-footer-01 .phone-numbers .col-location {
		border: 0;
		margin-bottom: 10px;
	}
	
	
	footer.site-footer .container-footer-02 ul.footer-nav {
		flex-direction: column;
		align-items: left;
		flex-wrap: nowrap;
		text-align: left;
	}
	
	footer.site-footer .container-footer-02 ul.footer-nav > li.menu-item {
		display: block;
		width: 100%;
		padding: 0;
		line-height: 1;
		border-right: 0;
		margin-bottom: 8px;
	}
	
	footer.site-footer .container-footer-02 ul.footer-nav > li.menu-item:last-of-type {
		margin-bottom: 0;
	}
	
	footer.site-footer .container-footer-02 ul.footer-nav> li.menu-item:first-of-type {
		padding-left: unset;
	}
	
	footer.site-footer .container-footer-02 ul.footer-nav > li.menu-item > a.nav-link {
		display: block;
		width: 100%;
		padding: 12px 16px 12px 12px;
		background-color: #222;
		position: relative;
		border-radius: 6px;
	}
	
	footer.site-footer .container-footer-02 ul.footer-nav > li.menu-item > a.nav-link:hover,
	footer.site-footer .container-footer-02 ul.footer-nav > li.menu-item > a.nav-link:active {
		background-color: #333;
	}
	
	footer.site-footer .container-footer-02 ul.footer-nav > li.menu-item > a.nav-link:after {
		position: absolute;
		right: 12px;
		font-family: 'Font Awesome 6 Free', fontawesome;
		content: '\f105';
	}
	
	
	
	footer.site-footer .container-footer-03 ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 20px;
	}
	
	footer.site-footer .container-footer-04 .col-usda img {
		width: 160px;
		height: 80px;
		display: block;
		margin: 30px auto;
	}
	

}

















