/*
Theme Name: Nailed It Fencing
Author: Brandon Harper
Author URI: https://brandonharper.me
Description: Template Theme for Nailed It Fencing and Exteriors
Version: 1.0.0
Text Domain: Nailed It Fencing
*/

/*ADD CUSTOM FONT TO USE ON WEBSITE*/
@font-face {
    font-family: 'Cocogoose Compressed';
    src: url('/wp-content/themes/naileditexteriors/assets/fonts/Cocogoose-Condensed/Cocogoose-Condensed-Light-trial.ttf') format('truetype');
/*	unicode-range: U+0030-0039, U+0021;*/
/*    font-weight: bold;*/
    font-style: normal;
    font-display: swap;
}

/* COLOR PALLET */
/*
Red: #ed0a03
Blue: #002e4f
Black: #000000
White: #ffffff
*/

:root {
    --nailed-it-red: #d42e27;
    --nailed-it-blue: #163259;
	--nailed-it-green: #008000;
}

.has-nailed-it-red-color{
	color: #d42e27;
}
.has-nailed-it-blue-color{
	color: #163259;
}
.has-nailed-it-green-color{
	color: #008000;
}
.has-black-color{
	color: #000000;
}
.has-white-color{
	color: #ffffff;
}

.has-nailed-it-red-background-color{
	background-color: #d42e27;
}
.has-nailed-it-blue-background-color{
	background-color: #163259;
}
.has-nailed-it-green-background-color{
	background-color: #008000;
}
.has-black-background-color{
	background-color: #000000;
}
.has-white-background-color{
	background-color: #ffffff;
}
@viewport{
    zoom: 1.0;
    width: device-width;
}

/* CSS RESET */
/*html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*# sourceMappingURL=normalize.min.css.map */

/* Box Sizing
--------------------------------------------- */

html {
	display: block;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* Float Clearing
--------------------------------------------- */

.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.widget::before,
.wrap::before {
	content: " ";
	display: table;
}

.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.widget::after,
.wrap::after {
	clear: both;
	content: " ";
	display: table;
}
.clearfix {
	clear:both;
}
.sticky{
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	left: 0;
}
.hide{
	display: none;
}
.show{
	display: block;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes pulseLarge {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.50, 1.50, 1.50);
transform: scale3d(1.50, 1.50, 1.50);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulseLarge {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.50, 1.50, 1.50);
transform: scale3d(1.50, 1.50, 1.50);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
/*visibility: visible;*/
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}


body{
	display: block;
	font-family: sans-serif;
	font-style: normal;
	font-weight: 400;
/*TEXT IS SETUP TO SCALE FROM 2,560 PX DOWN TO MOBILE SCREEN OF 320PX*/
	font-size: calc(14px + ((16 - 14) * ((100vw - 320px) / (2560 - 320))));
	line-height: 1.25;
/*	color: #747474;*/
	margin: 0;
	max-width: 100vw;
}
p{
/*	font-size: 1.1vw;*/
	line-height: 1.25;
	margin: 0 0 20px 0;
	padding: 0;
}
.justify{
	text-align: justify;
}
H1{
/*	font-size: calc(24px + ((36 - 24) * ((100vw - 320px) / (2560 - 320))));*/
	font-size: 2.5vw;
	font-style: normal;
	font-weight: 400;
	color: var(--nailed-it-blue);
}
H2{
/*	font-size: calc(18px + ((28 - 18) * ((100vw - 320px) / (2560 - 320))));*/
	font-size: 2.5vw;
	font-style: normal;
	font-weight: 400;
	color: var(--nailed-it-blue);
}
H3{
/*	font-size: calc(16px + ((20 - 16) * ((100vw - 320px) / (2560 - 320))));*/
	text-transform: uppercase;
	font-size: 2vw;
	font-style: normal;
	font-weight: 400;
	color: var(--nailed-it-blue);
}
H4{
/*	font-size: calc(16px + ((18 - 16) * ((100vw - 320px) / (2560 - 320))));*/
	font-size: 1.5vw;
	font-style: normal;
	font-weight: 400;
	color: var(--nailed-it-blue);
}
H5{
/*	font-size: calc(14px + ((16 - 14) * ((100vw - 320px) / (2560 - 320))));*/
	font-size: 1.25vw;
	font-style: normal;
	font-weight: 400;
	color: var(--nailed-it-blue);
}

/*SET DEFAULT STYLING FOR SITE LINKS*/
a {
	color: var(--nailed-it-red);
	text-decoration: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
a:focus,
a:hover {
	color: var(--nailed-it-blue);
	transition-duration: .2s;
	text-decoration: none;
}
.has-white-links a {
	color: white;
	text-decoration: none;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}
.has-white-links a:focus,
.has-white-links a:hover {
	color: var(--nailed-it-blue);
	transition-duration: .2s;
	text-decoration: none;
}
/*SET DEFAULT STYLING FOR SITE BUTTONS AND FORM SUBMIT BUTTONS*/
form {
	color: var(--nailed-it-blue);
}
form h3 {
	color: var(--nailed-it-red);
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	transition: all 0.2s ease-in-out;
	border: white;
	background-color: var(--nailed-it-blue) !important;
	color: white !important;
	padding: 10px 20px;
	cursor: pointer !important;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover {
	background-color: var(--nailed-it-red) !important;
	color: white !important;
}

/*SET DEFAULT SIZES AND SETTINGS FOR SITE CONTAINER AND MAIN ELEMENT*/
.site-container {
	position: relative;
	display: block;
	height: auto;
/*	width: 100vw;*/
	max-width: 2560px;
	margin: 0 auto;
}
#main{
	margin-top: -100px;
	position: relative;
	display: block;
	width: 100%;
	height: auto;
/*	margin: 140px auto 0 auto;*/
/*	margin: 0 auto;*/
}

/************************ HEADERS *************************/

/* SET DEFAULT SIZES AND SETTINGS FOR HEADERS */
#site-header{
/*	position: relative;*/
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	height: auto;
	width: 100%;
	max-width: 100vw;
	z-index: 5000;
	display: block;
	margin: 0 auto;
    transition: top 0.4s ease-in-out;
}
#contact-header {
	position: relative;
	color: white;
	vertical-align: middle;
	width: 100%;
	background-color: var(--nailed-it-red);
	height: 40px;
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	padding: 10px 20px;
}
#main-header {
/*	border-bottom: 1px solid var(--nailed-it-red);*/
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	vertical-align: middle;
	padding: 10px 20px;
	margin: 0 auto;
	width: 100%;
	max-width: 100vw;
/*	background-color: white;*/
	height: 100px;
	align-items: center;
}
.header {

}
.site-logo{

}

/************************ NAVIGATION MENUS *************************/

/*SECONDARY/TOP NAVIGATION HEADER*/
#social-header-widget-1 {
	height: 100%;
	width: 100%;
/*	width: 60%;*/
/*	padding: 0 0 0 20px;*/
}
#social-header-widget-2{
/*	display: inline;*/
/*	width: 40%;*/
}
#social-header-widget-1 p{
	font-size: calc(14px + ((16 - 14) * ((100vw - 320px) / (2560 - 320))));
	margin-bottom: 0 !important;
}
#social-header-widget-2 a{
	font-size: calc(18px + ((22 - 18) * ((100vw - 320px) / (2560 - 320))));
}
#menu-social-menu {
/*	padding: 0 20px 0 0;*/
	margin: 0;
	width: 100%;
	list-style-type: none;
	display: flex;
	justify-content: right;
/*	font-size: 18px;*/
}
#menu-social-menu li {
	display: inline;
	padding: 0 10px;
}
#menu-social-menu li a{
	color: white;
}
#menu-social-menu li a:hover{
	color: var(--nailed-it-blue);
}

/*MAIN NAVIGATION HEADER*/
#header-widget-1{
/*	padding: 0 0 0 15px;*/
}
#header-logo img{
	height: 100px !important;
	width: auto;
}
#header-widget-1 figure {
	margin: 20px 0 10px 0;
}
#header-widget-2 {
	padding: 0;
	margin: 0 auto;
	width: 100%;
	list-style-type: none;
	display: flex;
	justify-content: right;
	align-self: middle;
}
#menu-main-navigation{
	margin: 0;
}
#menu-main-navigation li {
	border-radius: 10px;
/*	background-color: var(--nailed-it-red);*/
	display: inline-block;
	padding: 10px 20px 10px 20px;
 	transition-duration: 0.5s;
	margin: 0 5px;
}
#menu-main-navigation li:hover{
/*	background-color: var(--nailed-it-blue) !important;*/
/*	background-color: rgba(255, 255, 255, .5);*/
}
#menu-main-navigation li a{
	color: var(--nailed-it-blue);
	text-decoration: none;
	font-weight: 400;
	font-size: calc(14px + ((18 - 14) * ((100vw - 320px) / (2560 - 320))));
/*	font-size: 16px;*/
/*	line-height: 16px;*/
}
#menu-main-navigation li a:hover{
/*	color: var(--nailed-it-blue) !important;*/
/*	background-color: var(--nailed-it-blue) !important;*/
	transition-duration: .2s;
	cursor: pointer;
}
#menu-main-navigation li a:active{
/*	background-color: var(--nailed-it-blue) !important;*/
/*	color: var(--nailed-it-blue) !important;*/
}
#menu-main-navigation li ul li{
	border-radius: 0;
	border-left: 1px solid white;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
/*
	border-left: 1px solid #780032;
	border-right: 1px solid #780032;
*/
	background-color: #919395;
  	clear: both;
 	width: auto;
}

#menu-main-navigation li ul {
  	visibility: hidden;
  	opacity: 0;
 	position: absolute;
  	transition: all 0.5s ease;
  	margin-top: .7rem;
	margin-left: -1rem;
/*  	left: 0;*/
/*  	display: none;*/
  	display: flex;
	flex-direction: column;
	padding: 0 !important;
}

#menu-main-navigation li:hover > ul,
#menu-main-navigation li ul:hover {
  	visibility: visible;
  	opacity: 1;
}

#menu-main-navigation li ul li a:hover, #menu-main-navigation li ul li a:active{
	color: #780032 !important;
	transition-duration: .2s;
	cursor: pointer;
}
.residential-fences-menu-item a{
	background-color: rgba(255, 255, 255 .8) !important;
}

/*MOBILE NAVIGATION HEADER*/

#hamburger{
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 30px;
	height: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.hamburger-icon {
	width: 100%;
	height: 3px;
	background-color: var(--nailed-it-red);
/*	z-index: 3;*/
}
.hamburger:hover .hamburger-icon{
/*	background-color: #919395;*/
}

.hamburger:hover .hamburger-icon:nth-of-type(2){
/*
	width: 75%;
	animation: lineAnimation75 1s infinite;
*/
}
.hamburger:hover .hamburger-icon:nth-of-type(3){
/*
	width: 50%;
	animation: lineAnimation50 1s infinite;
*/
}
@keyframes lineAnimation75 {
0%, 100% {
	width: 100%;
}
50% {
	width: 75%;
}
}
@keyframes lineAnimation50 {
  0%, 100% {
    width: 100%;
  }
	50% {
		width: 50%
	}
}
.nav-bar{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
}
@keyframes spinclosebutton {
	from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
#close{
	position: relative;
	cursor: pointer;
	color: white;
	text-align: right;
	font-size: 3em;
	font-weight: 100;
	padding: 10px 10px 0 0;
	
/*	z-index: 999;*/
}
#close:hover {
/* 	transition: all 0.4s linear;*/
	opacity: .5;
/*	animation: spinclosebutton 1s forwards;*/
}
.close img{
	width: 20px;
	height: 20px;
}
.mobile-navigation-container{
	display: none;
	position: relative;
}
.mobile-navigation{
	position: fixed;
	top: 0;
	right: -100vw;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to right, rgba(158, 11, 15, .7), rgba(158, 11, 15, .9));
/*
	border-left: 1px solid white;
	box-shadow: -15px 0px 15px 0px rgb(0 0 0 / 0.4);
*/
	opacity: 0;
	padding: 1%;
/*
	padding-right: 80px;
	padding-top: 50px;
*/
}
.animate-nav-menu-open{
	animation: animateNavMenuOpen 1s;
	animation-fill-mode: forwards;
}
.animate-nav-menu-close{
	animation: animateNavMenuClosed 1s;
	animation-fill-mode: forwards;
}
@keyframes animateNavMenuOpen {
 0% {
    right: -100vw;
	 opacity: 0;
  }
100% {
	right: 0;
	opacity: 1;
	}
}
@keyframes animateNavMenuClosed {
 0% {
    right: 0;
	 opacity: 1;
  }
100% {
	right: -100vw;
	opacity: 0;
	}
}
#menu-mobile-menu{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	gap: 4% 4%;
	padding: 10px;
/*
	text-align: right;
	text-align: -webkit-right;
*/
	list-style: none;
	position: relative;
	margin: 0 !important;
}
#menu-mobile-menu li {
/*	position: relative;*/

/*	display: inline-block;*/
	text-align: right;
/*	border: 1px solid white;*/
	font-weight: 400;
	font-size: calc(16px + ((20 - 16) * ((100vw - 320px) / (2560 - 320))));
/*	margin: 15px 0;*/
/*	width: fit-content;*/
}
#menu-mobile-menu li a{
/*	position: relative;*/
/*	display: block;*/
/*	border: 2px solid rgba(237, 160, 7, 0);*/
/*	border-radius: 20px;*/
	cursor: pointer;
/*	padding: 10px 30px;*/
	color: white;
	text-decoration: none;
}
.nav-item{
	margin: 0 0 4% 0;
	border: 1px solid white;
	flex: 1 1 48%;
	position: relative;
/*	color: var(--nailed-it-red);*/
	height: 80px;
	width: 100%;
	border-radius: 15px;
	background-color: rgba(255,255,255,0.3);
    background-blend-mode:difference;
	background-repeat: no-repeat;
	background-size: cover;
}
.nav-item a{
	text-shadow:2px 2px 5px var(--nailed-it-red);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white !important;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	
}
.home-nav-item {
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2024/07/Residential-Fences-scaled.jpeg');
	background-position: left center;
}
.vinyl-fence-nav-item{
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2022/11/Photo-Aug-05-5-19-18-PM-scaled.jpg');
	background-position: left 13%;
}
.wood-fence-nav-item{
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2024/07/Decorative-Wood-Fence.jpg');
	background-position: left 40%;
}
.aluminum-fence-nav-item{
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2024/07/Sierra-Aluminum-Fence.webp');
	background-position: left 13%;
}
.chainlink-fence-nav-item{
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2022/11/Photo-May-07-12-35-40-PM-4.jpg');
	background-position: left 90%;
}
.pool-fence-nav-item{
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2022/11/Commercial-Aluminum-5.jpg');
	background-position: left 80%;
}
.freequote-nav-item{
	background-image: url('https://naileditexteriors.com/wp-content/uploads/2024/07/AdobeStock_503484355-scaled.jpeg');
	background-position: left 30%;
}


/************************ CUSTOM BUTTONS *************************/
.button-blue a{
	border: 1px solid white;
	border-radius: 5px;
	background-color: var(--nailed-it-blue);
	color: white !important;
	padding: 10px 30px;
}
.button-blue a:hover{
	background-color: rgb(1, 44, 61, .5);
}
.button-red a{
	border: 1px solid white;
	border-radius: 5px;
	background-color: var(--nailed-it-red);
	color: white !important;
	padding: 10px 30px;
}
.button-red a:hover{
	background-color: rgb(158, 11, 15, .5);
}



/************************ CUSTOM SITE CSS *************************/

.drop-shadow{
	box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.3);
}

/*CSS for custom Accordion script*/
.accordion-title::before{
/*content: "\f139";*/
}
.pointer {
	cursor: pointer;
}
.open {
	display: block;
}
.closed {
	display: none;
}
/*END CSS for custom Accordion script*/

.item-number-header{
	border-radius: 10px;
}
.item-number-header h3{
	color: white !important;
}
.item-number-header-l{
	
}
.item-number-header-r .col2 .gb-block-layout-column-inner{
	justify-items: flex-end;
}
.item-number-l{
	align-content: center;
	color: var(--nailed-it-green);
	font-size: 5vw;
	font-weight: 600;
	background-color: white;
	padding: 20px;
	margin: 0;
	width: 150px;
	height: 150px;
	border-radius: 0 50% 50% 0;
}
.item-number-r{
	align-content: center;
	color: var(--nailed-it-green);
	font-size: 5vw;
	font-weight: 600;
	background-color: white;
	padding: 20px;
	margin: 0;
	width: 150px;
	height: 150px;
	border-radius: 50% 0 0 50%;
}
.cover-image{
	position: relative;
}
.cover-info-container{
	padding: 2%;
	width: 35vw;
	position: absolute;
	background-color: rgba(255, 255, 255, .7);
	bottom: 50px;
	right: 50px;
}


/*CSS FOR HOME PAGE*/

.nav-up {
/*    top: -160px !important;*/
}
.homepage-slider-container{
	position: relative;
/*	height: calc(90vh - 160px);*/
/*	height: auto;*/
	max-height: calc(100vh - 145px);
	overflow: hidden;
}
.homepage-slider-container > div{
/*	height: auto;*/
}
.homepage-header-info{
	height: 100%;
}
.homepage-header-info > div{
	height: 100%;
}
.homepage-header-slider{
	height: 100%;
	position: relative;
}
.homepage-header-slider > div{
	height: 100%;
	position: relative;
}
.slides {
	position: absolute !important;
	height: 100%;
	top: 00px;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	opacity: 0;
/*	display: none;*/
}
.slider-info-container{
	box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
	padding: 30px 50px 50px 50px;
	background-color: rgba(255, 255, 255, .7);
	position: absolute;
	bottom: 10vh;
	left: 5vw;
}
.slider-CTA-button a{
	text-decoration: none;
	cursor: pointer;
	font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (2560 - 320))) !important;
	padding: 10px 20px;
	background-color: #346594;
	color: white;
	border: 1px solid #346594;
}
.slider-CTA-button a:hover{
	background-color: white;
	color: #346594;
	border: 1px solid white;
}
.slider-text{
	font-size: calc(20px + (36 - 20) * ((100vw - 300px) / (2560 - 320)));
	line-height: 1;
	margin-bottom: 20px;
  background-image: linear-gradient(90deg, #660000 0%, rgba(102, 0, 0, .4) 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #660000 !important;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.slides {
	animation: autoplay 36000ms linear normal infinite running !important;
}
.slides .slider-text {
	animation: textclip 6000ms linear reverse infinite running !important;
}
.slides img {
	animation: zoomOut 6000ms ease-out alternate infinite running !important;
}

.slides:hover .slides{animation-play-state: paused !important; }

.slides:nth-of-type(1) { animation-delay: 0ms !important; }
.slides:nth-of-type(2) { animation-delay: 6000ms !important; }
.slides:nth-of-type(3) { animation-delay: 12000ms !important; }
.slides:nth-of-type(4) { animation-delay: 18000ms !important; }
.slides:nth-of-type(5) { animation-delay: 24000ms !important; }
.slides:nth-of-type(6) { animation-delay: 30000ms !important; }

.slides:nth-of-type(1) .slider-text { animation-delay: 0ms !important; }
.slides:nth-of-type(2) .slider-text { animation-delay: 6000ms !important; }
.slides:nth-of-type(3) .slider-text { animation-delay: 12000ms !important; }
.slides:nth-of-type(4) .slider-text { animation-delay: 18000ms !important; }
.slides:nth-of-type(5) .slider-text { animation-delay: 24000ms !important; }
.slides:nth-of-type(6) .slider-text { animation-delay: 30000ms !important; }

.slides:nth-of-type(1) picture img { animation-delay: 0ms !important; }
.slides:nth-of-type(2) picture img { animation-delay: 6000ms !important; }
.slides:nth-of-type(3) picture img { animation-delay: 12000ms !important; }
.slides:nth-of-type(4) picture img { animation-delay: 18000ms !important; }
.slides:nth-of-type(5) picture img { animation-delay: 24000ms !important; }
.slides:nth-of-type(6) picture img { animation-delay: 30000ms !important; }


@keyframes autoplay {
  0% {opacity: 0.0; z-index: 99;}
  4% {opacity: 1.0}
  33.33% {opacity: 1.0}
  37.33% {opacity: 0.0}
  100% {opacity: 0.0; z-index: 0;}
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
@keyframes transitionDown {
	0% {
		object-position: bottom left;
	}
	100% {
		object-position: top right;
	}
}
@-webkit-keyframes transitionDown {
	0% {
		object-position: bottom left;
	}
	100% {
		object-position: top right;
	}
}
@keyframes zoomIn {
	0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
	}
	100% {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
transform: scale3d(1.25, 1.25, 1.25);
	}
}
@-webkit-keyframes zoomIn {
	0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
	}
	100% {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
transform: scale3d(1.25, 1.25, 1.25);
	}
}
@keyframes zoomOut {
	from {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
transform: scale3d(1.25, 1.25, 1.25);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@-webkit-keyframes zoomOut {
	from {
-webkit-transform: scale3d(1.25, 1.25, 1.25);
transform: scale3d(1.25, 1.25, 1.25);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}

/* END CSS FOR HOME PAGE */


/* CSS FOR ONLINE QUOTE PAGE */

.gfield_checkbox {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start !important;
}
.gfield_checkbox > div {
	flex: 1 1 auto !important;
}
.quote-info-column > div{
	height: 100%;
}

/* END CSS FOR ONLINE QUOTE PAGE */
.landing-page-content{
	border-radius: 20px;
	background-color: rgba(255,255,255,.7);
}
.landing-page-content h1{
	
}
.landing-page-eyebrow{
	font-size: 14px !important;
	margin: 0 !important;
}
.landing-page-headline{
	font-size: 36px !important;
	font-weight: 700 !important;
	margin-top: 5px !important;
}
.landing-page-subheadline{
	font-weight: 500 !important;
	font-size: 22px !important;
}
.landing-page-intro-text{
	font-size: 16px !important;
}
.landing-page-benefit::before{
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	content: "\f14a";
	margin: 0 10px 0 0;
	font-size: 24px;
	color: #008000;
}
.landing-page-benefit{
	margin: 5px 0 !important;
}
.landing-page-friction-remover{
	
}
.landing-page-content .wp-block-image{
	margin: 0 !important;
}
.quote-button a{
	font-weight: 600 !important;
	border-radius: 10px;
	border: 2px solid white;
	width: fit-content;
	cursor: pointer;
	padding: 10px 25px;
	margin: 30px 0 5px 0;
	background-color: var(--nailed-it-red);
	color: white !important;
}
.quote-button a:hover{
	transition-duration: 0.5s !important;
	background-color: rgba(255, 255, 255, 1);
	color: var(--nailed-it-red) !important;
	border: 2px solid var(--nailed-it-red);
}
.call-button{
	cursor: pointer;
	padding: 10px 25px;
	border-radius: 10px;
	background-color: var(--nailed-it-blue);
	color: white;
}
.call-button a{
	color: white !important;
}
.call-button a:hover{transition-duration: 0.5s;
	background-color: rgba(255, 255, 255, .5);
	color: var(--nailed-it-blue) !important;
}
	#page-header{
		min-height:100vh;
		align-items: center;
		background-size: cover;
		background-position: top;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
/*		min-height: 430px;*/
		overflow: hidden;
		overflow: clip;
		padding: 1em;
		position: relative;
	}
	#page-header img{
		border: none;
		bottom: 0;
		box-shadow: none;
		height: 100%;
		left: 0;
		margin: 0;
		max-height: none;
		max-width: none;
		object-fit: cover;
		object-position: center;
		outline: none;
		padding: 0;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}
	.page-header-info-container {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		padding: 2% 4% 4% 4%;
		width: 50vw;
/*		height: 40%;*/
		position: absolute;
		background-color: rgba(255, 255, 255, .9);
		top: 20vh;
		right: 50px;
	}
	.header-title{
		color: var(--nailed-it-red);
	}
	.header-intro{
		color: var(--nailed-it-blue);
		font-size: 16px;
		line-height: 1.4;
	}
	#product-categories{
		background-color: var(--nailed-it-blue);
		border-radius: 25px;
		padding: 20px 40px 40px 40px;
/*		margin: 50px 50px;*/
	}
	#products-container{
		background-color: var(--nailed-it-red);
		border-radius: 25px;
		padding: 20px 40px 40px 40px;
		margin: 2.5% 5%;
	}
	.products-header{
		color: white;
		padding: 10px;
		font-size: 24px;
	}
	#products{
		position: relative;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
	}
	.products-viewport{
		background-color: none;
		z-index: 2;
		position: relative;
		width: 80vw;
		height: 310px;
		overflow: hidden;
	}
	#products-slider{
		z-index: 1;
		position: absolute;
		display: flex;
		flex-flow: row nowrap;
/*		gap: 1vw;*/
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	.nav-arrows{
		color: white;
		cursor: pointer;
		font-size: 48px;
	}
	.nav-arrows a{
		color: white;
	}
	.nav-arrows a:hover{
		color: rgba(255, 255, 255,.5);
	}
	.left-nav{
		justify-self: center;
		align-self: center;
		margin: 0 20px 0 0;
	}
	.right-nav{
		justify-self: center;
		align-self: center;
		margin: 0 0 0 20px;
	}
	#product-category-tile-container{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		gap: 20px;
	}
	#product-tile-container{
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		gap: 20px;
	}
	.product-category-title{
		text-align: center;
		color: white;
		text-transform: uppercase;
	}
	.category-tile{
		flex: 0 1 18%;
		overflow: hidden;
		border-radius: 25px;
/*		box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, .3);*/
		position: relative;
		text-align: center;
/*		max-width: 400px;*/
/*		flex-basis: 400px;*/
		border: 1px solid white;
	}
	.product-tile{
		margin: 0 5px;
		overflow: hidden;
		border-radius: 25px;
/*		box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, .3);*/
		position: relative;
		text-align: center;
		width: 20vw;
		max-width: 300px;
/*		flex-basis: 300px;*/
		border: 1px solid white;
	}
	.category-header{
		font-size: 18px !important;
		z-index: 9;
		margin: 0;
		text-transform: uppercase;
		padding: 10px 20px;
		background-color: rgba(255, 255, 255, .8);
		color: var(--nailed-it-red);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.category-tile-image {
		display: block;
		position: relative;
/*		max-width: 400px;*/
		width: 100%;
		height: auto;
	}
	.category-tile-image img{
		display: block;
		width: 100%;
		height: auto;
	}
	.instructions{
		text-align: right;
		margin: 0;
		padding: 20px 0 0 0;
		color: white;
		font-size: 18px;
	}
.reasons-text p{
	font-size: 22px;
	
}
	.product-header{
		font-size: 14px;
		z-index: 9;
		margin: 0;
/*		text-transform: uppercase;*/
		padding: 10px 20px;
		background-color: rgba(255, 255, 255, .8);
		color: var(--nailed-it-red);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.product-tile-image{
/*		max-height: 250px;*/
		width: 100%;
	}
	.center-con {
		display: flex;
		height: auto;
		align-items: center;
		justify-content: center;
	}
	.round {
		position: absolute;
/*		border: 2px solid #fff;*/
		width: 40px;
		height: 40px;
/*		border-radius: 100%;*/
	}
	#cta{
		width:100%; cursor: pointer; position: absolute;
	}
	#cta .arrow{left: 30%;}
	.arrow {position: absolute; bottom: 0;  margin-left:0px; width: 12px; height: 12px; background-size: contain; top:15px;}
	.segunda{margin-left: 8px;}
	.next-arrow {
		background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHN0eWxlPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+PHBhdGggY2xhc3M9InN0MCIgZD0iTTMxOS4xIDIxN2MyMC4yIDIwLjIgMTkuOSA1My4yLS42IDczLjdzLTUzLjUgMjAuOC03My43LjZsLTE5MC0xOTBjLTIwLjEtMjAuMi0xOS44LTUzLjIuNy03My43UzEwOSA2LjggMTI5LjEgMjdsMTkwIDE5MHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzE5LjEgMjkwLjVjMjAuMi0yMC4yIDE5LjktNTMuMi0uNi03My43cy01My41LTIwLjgtNzMuNy0uNmwtMTkwIDE5MGMtMjAuMiAyMC4yLTE5LjkgNTMuMi42IDczLjdzNTMuNSAyMC44IDczLjcuNmwxOTAtMTkweiIvPjwvc3ZnPg==);
	}
	@keyframes bounceAlpha {
	  0% {opacity: 1; transform: translateX(0px) scale(1);}
	  25%{opacity: 0; transform:translateX(10px) scale(0.9);}
	  26%{opacity: 0; transform:translateX(-10px) scale(0.9);}
	  55% {opacity: 1; transform: translateX(0px) scale(1);}
	}
	.bounceAlpha {
		animation-name: bounceAlpha;
		animation-duration:1.4s;
		animation-iteration-count:infinite;
		animation-timing-function:linear;
	}
	.arrow.primera.bounceAlpha {
		animation-name: bounceAlpha;
		animation-duration:1.4s;
		animation-delay:0.2s;
		animation-iteration-count:infinite;
		animation-timing-function:linear;
	}
	.round .arrow{
		animation-name: bounceAlpha;
		animation-duration:1.4s;
		animation-iteration-count:infinite;
		animation-timing-function:linear;
	}
	.round .arrow.primera{
		animation-name: bounceAlpha;
		animation-duration:1.4s;
		animation-delay:0.2s;
		animation-iteration-count:infinite;
		animation-timing-function:linear;
	}
	.cta-button-container{
/*
		position: absolute;
		right: 5%;
		bottom: 10%;
*/
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
		align-content: center;
		align-items: center;
		gap: 10px;
	}
	.header-link{
/*
		position: absolute;
		right: 5%;
		bottom: 10%;
*/
	}
	.cta-button{
		cursor: pointer;
		width: auto;
/*
		color: white;
		background-color: var(--nailed-it-blue);
*/
		padding: 10px 25px;
/*		border: 1px solid white;*/
		border-radius: 10px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		gap: 25px;
	}
	.cta-button:hover{
/*		background-color: var(--nailed-it-red);*/
	}
	.view-products-button{
		color: white;
		background-color: var(--nailed-it-red);
		border: 1px solid white;
	}
	.view-products-button:hover{
		background-color: rgba(158, 11, 15, .8);
	}
	.get-quote-button{
		color: white;
		background-color: var(--nailed-it-blue);
		border: 1px solid white;
	}
	.get-quote-button:hover{
		background-color: rgba(0, 46, 79, .8);
	}
	.product-body-cta-button{
		align-self: center;
		color: white;
		background-color: var(--nailed-it-blue);
		border: 1px solid white;
	}
	.product-body-cta-button:hover{
		background-color: var(--nailed-it-red);
	}
	#product-body-columns{
/*		background:linear-gradient(0deg, rgba(0, 46, 79, 0.3), rgba(0, 46, 79, 0.3)), url('https://naileditexteriors.com/wp-content/uploads/2024/07/Treated-Pine-Picket-Fence.jpg');*/
/*
		background-position: top center; 
		background-repeat: no-repeat;
		background-size: cover; 
		background-color: rgba(255, 255, 255, .4);
*/
		padding: 2.5% 10%;
		display: grid;
		grid-template-columns: 20% 1fr;
		grid-template-rows: auto;
		grid-template-areas: "col1 col2";
		column-gap: 5%;
	}
	#product-body{
		grid-area: col2;
		font-size: 16px;
		line-height: 1.5;
		color: var(--nailed-it-blue);
/*		padding: 20px 20%;*/
	}
	#product-body h2{
		color: var(--nailed-it-red);
	}
	#product-body-graphics{
		grid-area: col1;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-content: center;
		align-self: center;
		gap: 50px;
	}
	#bbb-seal{
		align-self: center;
	}
	#product-body-cta{
		background:linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://naileditexteriors.com/wp-content/uploads/2024/07/AdobeStock_503484355-scaled.jpeg');
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover;
/*		text-align: center;*/
		color: var(--nailed-it-red);
		padding: 20px 30px;
		width: 100%;
		border: 1px solid var(--nailed-it-red);
		border-radius: 15px;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-content: flex-start;
		align-items: flex-start;
		gap: 20px;
	}
	#product-body-cta-body{
		font-size: 16px;
	}
	#product-benefits-columns{
/*		background-image: url('https://naileditexteriors.com/wp-content/uploads/2024/07/Treated-Pine-Picket-Fence.jpg');*/
		background:linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(0, 46, 79, 0.8)), url('https://naileditexteriors.com/wp-content/uploads/2022/11/Photo-Jul-26-11-43-15-AM-scaled.jpg');
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover; 
/*		background-color: rgba(255, 255, 255, .9);*/
		padding: 5% 10%;
		display: grid;
		grid-template-columns: 40% 60%;
		grid-template-rows: auto;
		grid-template-areas: "col1 col2";
		column-gap: 5%;
	}
	#product-benefits{
		padding: 5% 10%;
		background-color: rgba(255, 255, 255, .9);
		color: var(--nailed-it-blue);
		grid-area: col2;
		font-size: 16px;
		line-height: 1.5;
	}
	#product-benefits h2{
		color: var(--nailed-it-red);
	}
	#cta-container{
		border: 1px solid var(--nailed-it-red);
		border-radius: 15px;
		background:linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('https://naileditexteriors.com/wp-content/uploads/2024/07/AdobeStock_503484355-scaled.jpeg');
		background-position: 50% 30%; 
		background-repeat: no-repeat;
		background-size: cover;
		margin: 2.5% 5%;
		padding: 2% 2.5%;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		align-content: center;
		align-items: center;
		gap: 20px;
/*
		display: grid;
		grid-template-columns: 1fr 40%;
		grid-template-rows: auto;
		grid-template-areas: "ctacol1 ctacol2";
		column-gap: 20px;
*/
/*		height: 300px;*/
	}
	#cta-form{
/*		padding: 2% 10%;*/
		
		grid-area: ctacol1;
	}
	#cta-body{
/*		padding: 2% 10%;*/
		font-size: 22px;
		font-weight: 500;
		line-height: 1.3;
		color: var(--nailed-it-red);
		align-self: center;
		grid-area: ctacol2;
	}
	#gform_page_2_1{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-content: center;
		align-items: center;
	}
	#gform_page_2_1 .gform_page_footer{
		padding-left: 20px;
	}
	#gform_page_2_1 input{
		margin-bottom: 0 !important;
	}
	#faq-columns-container h2 {
    color: var(--nailed-it-red);
}
	#product-benefits-graphic, .product-benefits-graphic{
		background: url('https://naileditexteriors.com/wp-content/uploads/2024/07/Installing-Fence-scaled.jpg');
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover; 
		align-self: center;
		width: 500px;
		height: 500px;
		border: 1px solid var(--nailed-it-red);
		border-radius: 50%;
		grid-area: col1;
		overflow: hidden;
	}
	#product-benefits-graphic img, .product-benefits-graphic img{
/*
		object-position: top;
		object-fit: cover;
*/
/*		max-height: 500px;*/
/*		width: 100%;*/
	}
	#faq-columns-container{
		z-index: 0;
		background: url('https://naileditexteriors.com/wp-content/uploads/2024/07/FAQ-Background.png');
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover; 
/*		background-color: var(--nailed-it-red);*/
		padding: 5% 10%;
/*		margin: 10% 0;*/
	}
	#faq-columns{
/*		padding: 5% 10%;*/
		z-index: 1;
/*		height: 500px;*/
/*		background: url('https://naileditexteriors.com/wp-content/uploads/2024/07/FAQ-Background.png');*/
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover; 
		display: grid;
		grid-template-columns: 1fr 50%;
		grid-template-rows: auto;
		grid-template-areas: 'col1 col2';
		column-gap: 5%;
	}
	.q, .a{
		font-size: 28px;
/*		font-weight: 700;*/
	}
	.a{
		color: var(--nailed-it-red);
	}
	.ui-icon, .ui-widget-content .ui-icon {
		background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png);
	}
	.ui-state-active .ui-icon, .ui-button:active .ui-icon {
		background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png);
	}
	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
		border: 1px solid #c5c5c5;
		background: var(--nailed-it-blue);
/*		font-weight: normal;*/
/*		color: #ffffff;*/
	}
	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid #c5c5c5;
    background: var(--nailed-it-red);
    color: white;
}

/************************ FOOTERS *************************/

.mobile-quote-button{
	display: none;
}
#site-footer {
	background-color: var(--nailed-it-blue);
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-evenly;
	align-content: center;
	align-items: center;
	height: auto;
	padding: 20px;
/*	border-top: 15px solid var(--nailed-it-blue);*/
}
#footer-widget-1{
	align-self: center;
	text-align: left;
	width: 100%;
/*	background-color: white;*/
	height: auto;
/*	padding: 50px 0 30px 0;*/
}
#footer-widget-1 p, #footer-widget-1 h4{
	margin: 0 !important;
}
#footer-widget-2{
	color: white;
	align-self: center;
	text-align: left;
	width: 100%;
/*	background-color: #ed0a03;*/
	height: auto;
/*	padding: 20px 0 0 0;*/
}
.footer-widget p {
	padding: 5px 0;
}
#footer-widget-2 ul {
/*	text-align: left;*/
	color: white;
/*	list-style: none;*/
	vertical-align: middle;
	width: 100%;
/*	background-color: #a3cd39;*/
/*
	display: inline-flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
*/
	margin: 10px 0 20px 20px !important;
	padding: 0 !important;
}
#footer-widget-2 a{
	color: white;
}
#footer-widget-2 a:hover{
	color: var(--nailed-it-red);
}
#footer-widget-2 ul li {
/*
	display: inline;
	padding: 0 15px;
	font-size: 22px;
*/
}
#footer-widget-2 .menu-social-menu-container ul li a{
	color: white;
}
#footer-widget-2 .menu-social-menu-container ul li a:hover{
	color: var(--nailed-it-red);
}
#footer-widget-2 h3{
	color: #ffffff;
	margin: 0 0 5px 0;
	font-size: 14px;
	font-weight: 400;
}
/************************ MEDIA QUERIES *************************/
@media only screen and (max-width: 1180px) {

}
@media only screen and (max-width: 820px) {

}
@media only screen and (max-width: 480px) {
	#main-header.shrink{
		transition: height 500ms, background 500ms;
		height: 40px;
	}
	#hamburger.shrink{
		transition: height 500ms, background 500ms;
		bottom: unset;
		top: 10px;
		right: 10px;
	}
	#header-widget-1.shrink figure{
		height: 30px;
		transition: height 500ms, background 500ms;
		margin: 5px 0;
	}
	#header-widget-1.shrink img{
		height: 30px;
		transition: height 500ms, background 500ms;
		width: auto;
	}
	#header-widget-2{
		display: none;
	}
	.mobile-navigation-container{
		position: unset;
		display: block;
	}
	#contact-header{
		height: 50px;
		padding: 10px 10px;
	}
	#main{
/*		margin: 160px auto 0 auto;*/
		margin: 0 auto;
	}
	.company-benefits-columns{
/*		margin-bottom: 40% !important;*/
	}
	.homepage-slider-container{
		max-height: none;
		overflow: visible;
/*		height: 430px;*/
	}
	.homepage-header-info{
		grid-area: col2 !important;
	}
	.homepage-header-slider{
		height: 430px;
		grid-area: col1 !important;
	}
	.cover-info-container{
		background-color: rgba(255, 255, 255, .6);
		width: 100%;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.homepage-slider-button-container > div{
		column-gap: 1em;
		grid-template-columns: 100% !important;
		grid-template-areas: 	"col1" 
								"col2" !important;
		grid-row-gap: 10px;
	}
	#site-footer{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-areas: 	"logo"
								"services";
	}
	.mobile-quote-button{
		z-index: 999999;
		text-align: center;
		display: block;
		position: fixed;
		left: 0;
		bottom: 20px;
		right: 0;
		width: 100%;
		height: auto;
/*		padding: 10px 20px;*/
	}
	.mobile-quote-button a{
		border: 1px solid white;
		border-radius: 10px;
		padding: 10px 60px;
		background-color: var(--nailed-it-red);
		color: white;
		font-weight: 800;
		font-size: 18px;
	}
	.mobile-quote-button a:hover{
		border: 1px solid var(--nailed-it-red);
		background-color: white;
		color: var(--nailed-it-red);
	}
	#page-header{
		min-height: none;
		height: calc(100vh - 140px);
		align-items: flex-start;
	}
	.page-header-info-container{
		background-color: rgba(255, 255, 255, .8);
		flex-flow: column nowrap;
		position: relative;
/*		margin: 5%;*/
		bottom: unset;
		top: unset;
		right: unset;
		left: unset;
		width: auto;
		height: auto;
	}
	#page-header img{
/*
		object-fit: cover;
		object-position: center;
*/
	}
	.header-intro{
		font-size: 14px;
	}
	.cta-button-container{
		position: relative;
/*
		right: 5%;
		left: 5%;
		bottom: 5%;
*/
	}
	#product-categories{
		position: relative;
		margin: 2.5% 5%;
		padding: 10px 10px;
	}
	.product-category-title{
		margin-top: 0;
		text-align: center;
	}
	.category-tile{
		position: relative;
		max-width: 100%;
	}
	.category-tile-image img{
		max-width: 100%;
	}
	.instructions{
		text-align: center;
		font-size: 14px;
	}
	#product-body-columns{
		padding: 5%;
		grid-template-columns: 100%;
		grid-template-areas: 	"col1"
								"col2";
	}
	#product-body-graphics{
		gap: 5px;
	}
	#product-body{
		margin: 20px 0 0 0;
	}
	#google-rankings{
		text-align: center;
	}
	.product-body-cta-link{
		width: 100%;
	}
	#products-container{
		border-radius: 0;
		margin: 2.5% 0;
		padding: 2% 2.5% 5% 2.5%;
	}
	.products-header{
		font-size: 18px;
	}
	.nav-arrows{
		font-size: 28px;
	}
	.left-nav {
		margin: 0 5px 0 0;
	}
	.right-nav {
		margin: 0 0 0 5px;
	}
	#product-tile-container{
		justify-content: flex-start;
	}
	.product-tile{
		width: 76vw;
		max-width: none;
	}
	.product-tile img{
		width: 100vw !important;
	}
	#cta-body{
		font-size: 16px;
		text-align: center;
	}
	#gform_page_2_1 {
		flex-flow: column nowrap;
		justify-content: space-between;
		align-content: center;
		align-items: center;
	}
	#product-body p{
		text-align: justify;
	}
	#product-benefits-columns{
		gap: 25px;
		padding: 2.5% 5%;
		grid-template-columns: 100%;
		grid-template-areas: 	"col2"
								"col1";
	}
	#product-benefits{
		width: 100%;
		padding: 2.5% 5%;
	}
	#product-benefits-graphic, .product-benefits-graphic{
		justify-self: center;
		max-width: 300px;
		max-height: 300px;
	}
	.homepage-slider-container .gb-layout-column-wrap {
        grid-template-areas:
        "col1"
        "col2" !important;
		grid-row-gap: 10px;
    }
	.company-benefits-columns .gb-layout-column-wrap {
        grid-template-areas:
        "col2"
        "col1" !important;
		grid-row-gap: 10px;
    }
	#product-benefits blockquote{
		margin: 0;
	}
	#faq-columns-container{
		padding: 2.5% 5%;
	}
	#faq-columns{
		grid-template-columns: 100%;
		grid-template-areas: 	"col1"
								"col2";
	}
	
	
	
	
	
	
	
	
	
	#footer-widget-1{
		grid-area: logo;
	}
	footer-widget-1{
		grid-area: services;
	}
	.footer-info-container > div{
		gap: 1em;
		grid-template-columns: 1fr 1fr !important;
  		grid-template-areas: "col1 col2" !important;
	}
	#footer-widget-1 p{
		padding: 5px 0;
	}
	#footer-widget-2 {
/*		text-align: center;*/
	}
}