/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	margin: 0;
	padding: 0;
    text-decoration: none;
}

html {
	overflow-x: hidden; 
	color-scheme: dark light;
}

::before,
::after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}



body {

	overflow-x: hidden;	
	font-family: 'Montserrat', 'Roboto', 'Poppins', Sans-Serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
    color: #000;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
    background-color: var(--off-white);
    --main-color:#ff9900;
    --off-white: #f9f9f9;
    --font-color: #edbc0e;
    --font-green: #27e809;
    --darker-green:#68b0a5;
    --blue: #0385c5;
    --border: #5f5f5f;
    --margin-one: 2vw;
    --margin-two: 4vw;
    --margin-three: 10vw;
    --padding-one: 2vw;
    --padding-two: 4vw;
    --paddiing-three: 10vw;
    --box-shadow: 5px 5px 10px var(--border);
    position: relative;
}

.core {							
        min-height: 100dvh;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: auto 1fr auto;
        grid-template-rows: auto 1fr auto; 
        -ms-grid-columns: minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);

    }

.core > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;

    }

.core > *:nth-child(2) {
	-ms-grid-row: 2;
	-ms-grid-column: 1;

    }

.core > *:nth-child(3) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;

    }

nav ul {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3vw;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    margin-right: 6vw;
	padding: 1vw;
	margin-bottom: 10px;
	font-size: 1rem;
	color: #0b0000;
	text-transform: uppercase;
	font-family: sans-serif;
	cursor: pointer;
}



nav ul > li:hover {
	background-color: #2d6ddb;
	color: #fff;
	border-radius: 4px;
	outline: 5px solid #2d6ddb;

}

nav ul li a {
    color: #000;
}

nav ul li a:hover {
    color: #fff;
}

nav ul li:nth-child(1) {
    margin-right: auto;

}

.nav-links li:nth-child(4) {
		display: none;
	}
	

nav ul li {
	display: flex;
	align-items: center;
	position: relative;
}

#services-dropdown {
	display: none;
	position: absolute;
	background-color: var(--main-color);
	min-width: 20vw;
	-webkit-box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	z-index: 10;
	border: 2px solid #2d6ddb;
	border-radius: 5px;
	top: 4vw;
	left: 0;
	cursor: pointer;
	
}



nav ul li ul li {
	 margin: .5rem .5rem;
}

nav ul li ul li:last-child {
	margin-bottom: 0;
}

nav #extensible:hover #services-dropdown {
	display: block;
	
}

nav #extensible #services-dropdown:hover {
	display: block;
	
}

nav #extensible:hover #services-dropdown li:hover {
	background-color: #2d6ddb;
	color: #fff;
	
}

.nav-links {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;	   
		-webkit-box-pack: space-evenly;	   
		    -ms-flex-pack: space-evenly;	   
		        justify-content: space-evenly;
		margin-right: 2vw;
        font-size: 1vw;    
	}


.burger {
		display: none;
		cursor: pointer;		
		
	}

	.burger div {
		width: 25px;
		height: 3px;
		background-color: #DDD;
		margin: 5px;
	}


.nav-active {
		
		opacity: 1;
	}
	
	@-webkit-keyframes navLinkFade{
		from{
			opacity: 0.5;
			-webkit-transform: translateX(50px);
			        transform: translateX(50px);
		}
		to{
			opacity: 1;
			-webkit-transform: translateX(0px);
			        transform: translateX(0px);
		}
	
	
	}
	
	@keyframes navLinkFade{
		from{
			opacity: 0.5;
			-webkit-transform: translateX(50px);
			        transform: translateX(50px);
		}
		to{
			opacity: 1;
			-webkit-transform: translateX(0px);
			        transform: translateX(0px);
		}
	
	
	}
	
		
	
	
	.toggle .line1{
		-webkit-transform: rotate(-45deg) translate(-5px,6px);
		    -ms-transform: rotate(-45deg) translate(-5px,6px);
		        transform: rotate(-45deg) translate(-5px,6px);
		
		}
	
	.toggle .line2{
		opacity:0;
	}
	
	.toggle .line3{
		-webkit-transform: rotate(45deg) translate(-5px,-6px);
		    -ms-transform: rotate(45deg) translate(-5px,-6px);
		        transform: rotate(45deg) translate(-5px,-6px);
	}
/*-----------------------------------------------------------------------------------------------------------------*/

#hero {
    background-image: url("../images/character-handyman-working-on-house-990x400.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    
} 

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.5);
    padding: 1.5rem 2rem;
    border-radius: 12px;
    position: absolute;
    
}



.social-proof-initial {
margin-top: 4vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;


}

.social-proof-initial a{
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-decoration: none;
    padding: 1vw;
    border-radius: 10px;
    line-height: 1.4rem;

}

.social-proof-initial a::before {
    content: url(../images/5-star.png);
    position: absolute;
    top: -1.5vw;
    
}

#upper-intro {
    color: yellow;
    background-color: #5f5f5f;
    margin-bottom: 2vw;
    padding: 1vw;
    border-radius: 5px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}



#inner-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#inner-hero a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}


#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#hero::before {
    content: "";
    font-size: 1.5rem;
    position: absolute;
    top: 16vw;
    color:#fff;

}


#bringup {
    display: none;
}




#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#fencing-posts {
   background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
    background-repeat: repeat-x;
   
    
}#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

 #first-title h2 {
    font-size: 3.5vw;
    text-align: center;
 }   

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: 2vw;
        padding: 5vw;
        text-align: center;
    }

    #second-fencing-container h2 span {
        line-height: 3vw;
        font-size: 2vw;
        text-align: center;
        color: #f00;
        
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }


    #gen-firsthtwo {
        position: relative;
    }

    #gen-firsthtwo::before {
        content: url(../images/paint-drop-yellow-1.png);
        position: absolute;
        left: 4vw;
        top: 20vw;
    }

    #gen-firsthtwo::after {
        content: url(../images/paint-drop-yellow-2.png);
        position: absolute;
        right: 6vw;
        top: 80vw;
    }

    #gen-first-par::before {
        content:url(../images/tools-lined-up-sm.png);
        position: absolute;
        z-index: -1;
        isolation: isolate;
        top: -20vw;
        left: 12vw;
        opacity: .2;
        -webkit-transform: rotate(-25deg);
            -ms-transform: rotate(-25deg);
                transform: rotate(-25deg);
    }

    #gen-first-par {
        margin-top: var(--margin-one);
        position: relative;
    }

    #gen-first-par::before {
        content:url(../images/tools-lined-up-sm.png);
        position: absolute;
        z-index: -1;
        isolation: isolate;
        top: -10vw;
        left: 35vw;
        opacity: .2;
        -webkit-transform: rotate(-25deg) scale(2);
            -ms-transform: rotate(-25deg) scale(2);
                transform: rotate(-25deg) scale(2);
    }


    #gen-first-par p {
        font-size: 1.5rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 30vw;
    }

     .gen-divs {
        width: 30vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        margin-top: -6vw;
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 1vw;
    }

   

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: 60vw;
        margin: 8vw auto;
        position: relative;
    }

    #spacer2::before {
        content: url(/images/paint-splatter-yellow.png);
        position: absolute;
        z-index: -1;
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        isolation: isolate;
    }

    #spacer2 h2 {
        
        padding-right: 10vw;
        font-size: 1.2rem;
        line-height: 2rem;
        
    }

    #spacer2 p:nth-child(1) {
        line-height: 2rem;
        font-size: 1.2vw;
    }

    

    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
        color: #f00;
        font-size: 2rem;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

     #currency-cue p {
        font-size: 2rem;
        text-align: center;
     }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: 90vw;
        height: 40vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin: 0 auto;
        
    }

   




#list-one, #list-two {
    border-radius: 5px;
}

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 40vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40vw;
}

   

#list-of-services #list-one ul {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: ul;
    margin-left: 5vw;
}

#list-of-services #list-two ul {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: ul;
    margin-left: 10vw;
}

#list-of-services #list-one ul li a {
	color: inherit;
}

#list-of-services #list-two ul li a {
	color: inherit;
}	


#list-of-services #list-two img {
    margin-right: -2vw;
}

#list-of-services #list-one img {
    margin-right: -2vw;
}

.two-lists img {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    grid-area: img;
    
}

.two-lists h3 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-area: h3;
    padding-bottom: 2rem;
    color: #f00;
}

.two-lists #list-two ul {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: 10vw;
    
}

#list-two img {
    
    margin-right: 10vw;
    
}

.two-lists img {
        -webkit-transform: scale(.5);
            -ms-transform: scale(.5);
                transform: scale(.5);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 2vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 1rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.4vw;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
    font-size: 1.2rem;
}



#site-type {
    margin-bottom: 5vw;
    width: 100vw;
}

#site-type h2 {
    color: var(--main-color);
    text-align: center;
    font-size: 3vw;
}

#genie {
    width: 18vw;
    height: 27vw;
    background-image: url(../images/genie20-man-on.png);
    background-position: center;
    background-size: cover;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li {
    list-style: none;
    line-height: 4vw;
    font-size: 1.2vw;
    position: relative;
}

#city-envelope ul li::before {
    content: "";
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--main-color);
    border-top: 2px solid var(--main-color);
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    position: absolute;
    top: 1vw;
    left: -3vw;
}

#city-envelope ul li a {
    color: #000;
    font-size: 1.5vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 40vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
    position: relative;
}

#fenc-divfour blockquote p::before {
    content: open-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    left: 1vw;
    top: 50vw;
}

#fenc-divfour blockquote p::after {
    content: close-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    right: 5vw;
    bottom: -15vw;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    width: 30%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    background-color: #fff;
    
}



#fenc-divfour blockquote p::before {
    content: open-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    left: -4vw;
    top: 5vw;
}

#fenc-divfour blockquote p::after {
    content: close-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    right: -4vw;
    bottom: -10vw;
}

.fenc-divs p {
    padding: 0 4vw;
    font-size: 1.6vw;
}

.fenc-divs img {
    width: 80px;
    height: 80px;
    padding-top: 10px;
    
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
  }

input[type="text"],
  input[type="email"],
  textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 1.5;
  }

  textarea {
    resize: vertical;
  }

button[type="submit"] {
    width: 100%;
    background: #ff9900;
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
  }

  button[type="submit"]:hover {
    background-color: #e88e00;
  }

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}


#faq h2 {
	font-size: 2.5vw;
	text-align: center;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 0, 0, .8);
}

#faq p {
	font-size: 1.5vw;
	text-align: center;
	color: #0b0000;
	
	margin-top: 3vh;
}

#faqs {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
	-ms-grid-rows: 8fr;
	grid-template-rows: 8fr;
	
	width: 90vw;
	height: auto;
	background-color: #ffffff;
	margin: 5vw auto;
	gap: 10px;
	
	font-size: 1rem;
	/* padding: 1vw; */
	margin-bottom: 6vh;
	margin-top: 5vh;
	padding-bottom: 5vh;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#faqs > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

.faq-items {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 3fr 1fr;
	grid-template-columns: 3fr 1fr;
	-ms-grid-rows: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	width: 100%;
	height: 60px; /* need to adjust this to fit the text */
	-webkit-transition: height 0.9s ease-in-out;
	-o-transition: height 0.9s ease-in-out;
	transition: height 0.9s ease-in-out;
	padding: 10px;
	/* gap: 10px; */
	    grid-template-areas: "faqtitle expandButton" 
						"faqtext faqtext";
	/* justify-items: left; */
	background-color: rgb(40, 139, 214);
	border-radius: 1vw;
	color: #ffffff;
	cursor:context-menu;
	-webkit-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;

}



.faq-question {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	display: -ms-grid;
	display: grid;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: start;
	-ms-grid-column-align: left;
	    justify-self: left;
	grid-area: faqtitle;
	font-size: 1.5rem;
	/* font-weight: 600; */
	text-align: left;
	color: #ffffff;
	
}

.faq-items h2 {
    font-size: 1.5vw;
}

.faq-items p {
    font-size: 1.5vw;
}

.faq-items button {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
	-ms-grid-column-align: end;
	    justify-self: end;
	grid-area: expandButton;
	display: -ms-grid;
	display: grid;
	/* justify-content: end; */
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* margin-right: 10px; */
	-webkit-box-shadow: none;
	        box-shadow: none;
	background-color: #ffffff;
	color: #2be40e;
	font-size: 1.5rem;
}



.expandHide {
	max-height: 0;
	overflow: hidden;
	/* transition: max-height 0.5s ease; */
	-webkit-transition: max-height 0.6s cubic-bezier(1, 1.5, 0.5, 1.5);
	-o-transition: max-height 0.6s cubic-bezier(1, 1.5, 0.5, 1.5);
	transition: max-height 0.6s cubic-bezier(1, 1.5, 0.5, 1.5);
  }

#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 20vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);

}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: right;
}

#footer #other-stuff ul li {
    text-align: center;
}

#footer #other-stuff img {
    margin-left: 5vw;
    -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
            transform: scale(.6);
}

#footer #assets img {
   margin-left: 2vw;
   -webkit-transform: scale(.6);
       -ms-transform: scale(.6);
           transform: scale(.6);
}


#fold-container {
	margin: 5vw auto;
	margin-bottom: 10vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 40vw;
	height: 25vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1rem;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 1.5rem;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 2.5rem;
}

#fold1 {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
	grid-area: fold1;
	background-color: aqua;
	width: 190%;
	height: 120%;
	-webkit-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	    -ms-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	        transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}
	

#fold2 {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 90%;
	height: 100%;
	-webkit-transform: translateX(8%);
	    -ms-transform: translateX(8%);
	        transform: translateX(8%);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-20vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-20vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-20vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	        transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-30vw) translateY(-18vw) rotate(-10deg);
	    -ms-transform: translateX(-30vw) translateY(-18vw) rotate(-10deg);
	        transform: translateX(-30vw) translateY(-18vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(10vw) translateY(-15vw) rotate(10deg);
	    -ms-transform: translateX(10vw) translateY(-15vw) rotate(10deg);
	        transform: translateX(10vw) translateY(-15vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#plea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20vw;
    margin-bottom: 10vw;
    
}

#bottom-plea  {
    font-size: 1.5vw;
    padding: 1.5vw;
    color: #000;
    background-color: var(--font-green);
    border: none;
    border-radius: 1vw;
    min-width: 40vw;
}

#bottom-plea a {
    color: #000;
}

/*-------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1440px) {

#hero {
    background-image: url("../images/character-handyman-working-on-house-1980X700.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
} 

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.5);
    padding: 1.5rem 2rem;
    border-radius: 12px;
}

#inner-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#inner-hero a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background:var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}


#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}







#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
   
    
}#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

    

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: 2vw;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par p {
        font-size: 1.6vw;
        padding: var(--padding-two);
    }

    

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 30vw;
    }

     .gen-divs {
        width: 30vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        margin-top: -6vw;
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 1vw;
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
        position: relative;
    }

    #spacer2::before {
        content: url(/images/paint-splatter-yellow.png);
        position: absolute;
        z-index: -1;
        -webkit-transform: scale(1.5);
            -ms-transform: scale(1.5);
                transform: scale(1.5);
        isolation: isolate;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 2.2vw;
        text-align: center;
        
    }

    spacer2 p {
        font-size: 1.3vw;
    }

    #spacer2 p:nth-child(1) {
        font-size: 1.6vw;
    }

    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: 90vw;
        height: 40vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin: 0 auto;
    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 40vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40vw;
}

   

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: 5vw;
}

#list-of-services #list-two ul {
    grid-area: ul;
    margin-left: 10vw;
}

#list-of-services #list-two img {
    margin-right: -2vw;
}

#list-of-services #list-one img {
    margin-right: -2vw;
}

.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: 10vw;
    
}

#list-two img {
    
    margin-right: 10vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 2vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li {
    list-style: none;
    line-height: 4vw;
    font-size: 1.2vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 40vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    width: 30%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
}

.fenc-divs p {
    padding: 0 4vw;
    font-size: 1.6vw;
}

.fenc-divs img {
    width: 80px;
    height: 80px;
    padding-top: 10px;
    
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}

#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 30vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    padding-top: 12vw;
}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: right;
}

#footer #other-stuff ul li {
    text-align: center;
}

#footer #other-stuff img {
    margin-left: 7vw;
}

#footer #assets img {
   margin-left: 4vw;
   -webkit-transform: scale(.6);
       -ms-transform: scale(.6);
           transform: scale(.6);
}



#fold-container {
	margin: 5vw auto;
	margin-bottom: 25vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 40vw;
	height: 25vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 1.3vw;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 1.5rem;
}

#fold1 {
	grid-area: fold1;
	background-color: aqua;
	width: 150%;
	height: 100%;
	-webkit-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	    -ms-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	        transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}
	

#fold2 {
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 110%;
	height: 110%;
	-webkit-transform: translateX(8%) translateY(5vw);
	    -ms-transform: translateX(8%) translateY(5vw);
	        transform: translateX(8%) translateY(5vw);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-10vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-10vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-10vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	        transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(-10deg);
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(-10deg);
	        transform: translateX(-30vw) translateY(-8vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(10vw) translateY(-8vw) rotate(10deg);
	    -ms-transform: translateX(10vw) translateY(-8vw) rotate(10deg);
	        transform: translateX(10vw) translateY(-8vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}





}

@media screen and (max-width: 1440px) {

#fold1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
	
}

#fold2 {
-ms-grid-row: 1;
-ms-grid-column: 3;
	
}

#fold3 {
-ms-grid-row: 3;
-ms-grid-column: 1;
	
}

#fold4 {
-ms-grid-row: 3;
-ms-grid-column: 3;
	
}

#fold5 {
-ms-grid-row: 3;
-ms-grid-column: 3;
	
}





}

@media screen and (max-width: 1440px) {

    #list-of-services #list-one ul {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}

    .two-lists img {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 3;
}

    .two-lists h3 {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}





}

/*------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1366px) {
	
	#hero {
    background-image: url("../images/hero-mobile-size.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
}

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.3);
    padding: .5rem 1rem;
    border-radius: 12px;
}

#inner-hero h1 {
    font-size: .6rem;
    margin-bottom: 1rem;
}

#inner-hero a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #ff9900;
    color: #fff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}

.social-proof-initial {
margin-top: 4vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;


}

.social-proof-initial a{
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-decoration: none;
    padding: 1vw;
    border-radius: 10px;

}

.social-proof-initial a::before {
    content: url(../images/5-star.png);
    position: absolute;
    top: -1.5vw;
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    
}

#upper-intro {
    color: yellow;
    background-color: #5f5f5f;
    margin-bottom: 2vw;
    padding: 1vw;
    border-radius: 5px;
}

#inner-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

#inner-hero a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #07e80b;
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}


#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#gen-first-par p {
    font-size: 3.5vw;
}

#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
   
    
}#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

    

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: 2vw;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par p {
        font-size: 1rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 50vw;
    }

     .gen-divs {
        width: 30vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        margin-top: -8vw;
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 1.4vw;
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 2.5vw;
        
    }

    #spacer2 p {
        font-size: 2vw;
    }

    #spacer2 p:nth-child(1) {
        font-size: 1.8vw;
    }


    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: 90vw;
        height: 40vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin: 0 auto;
    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 40vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40vw;
}

   

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: 5vw;
}

#list-of-services #list-two ul {
    grid-area: ul;
    margin-left: 10vw;
}

#list-of-services #list-two img {
    margin-right: -2vw;
}

#list-of-services #list-one img {
    margin-right: -2vw;
}

.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: 10vw;
    
}

#list-two img {
    
    margin-right: 10vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 2vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li {
    list-style: none;
    line-height: 4vw;
    font-size: 1.2vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 40vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    width: 30%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
}

.fenc-divs p {
    padding: 0 4vw;
    font-size: 1.6vw;
}

.fenc-divs img {
    width: 80px;
    height: 80px;
    padding-top: 10px;
    
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}

#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 40vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    padding-top: 6vw;
}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 8vw;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: right;
}

#footer #other-stuff ul li {
    text-align: center;
}
	
#other-stuff {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

#fold-container {
	margin: 5vw auto;
	margin-bottom: 25vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 40vw;
	height: 25vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 1.3vw;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 1.5rem;
}

#fold1 {
	grid-area: fold1;
	background-color: aqua;
	width: 150%;
	height: 100%;
	-webkit-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	    -ms-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	        transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}
	

#fold2 {
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 110%;
	height: 110%;
	-webkit-transform: translateX(8%) translateY(5vw);
	    -ms-transform: translateX(8%) translateY(5vw);
	        transform: translateX(8%) translateY(5vw);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-10vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-10vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-10vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	        transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(-10deg);
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(-10deg);
	        transform: translateX(-30vw) translateY(-8vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(10vw) translateY(-8vw) rotate(10deg);
	    -ms-transform: translateX(10vw) translateY(-8vw) rotate(10deg);
	        transform: translateX(10vw) translateY(-8vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}


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

#fold1 {
		-ms-grid-row: 1;
		-ms-grid-column: 1;
	
}

#fold2 {
		-ms-grid-row: 1;
		-ms-grid-column: 3;
	
}

#fold3 {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
	
}

#fold4 {
		-ms-grid-row: 3;
		-ms-grid-column: 3;
	
}

#fold5 {
		-ms-grid-row: 3;
		-ms-grid-column: 3;
	
}


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

    #list-of-services #list-one ul {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
}

    .two-lists img {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		-ms-grid-column: 3;
}

    .two-lists h3 {
		-ms-grid-row: 3;
		-ms-grid-column: 1;
		-ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
		-ms-grid-row: 1;
		-ms-grid-row-span: 2;
		-ms-grid-column: 1;
		-ms-grid-column-span: 2;
}


}

/*----------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 1024px) {
    
    #hero {
    background-image: url("../images/hero-mobile-size.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
}

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.3);
    padding: .5rem 1rem;
    border-radius: 12px;
}

#inner-hero h1 {
    font-size: .6rem;
    margin-bottom: 1rem;
}

#inner-hero h2 {
    font-size: .8rem;
}

#inner-hero a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}



#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
   
    
}#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

    

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: 2vw;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par p {
        font-size: 1rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 65vw;
    }

     .gen-divs {
        width: 30vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
        margin-top: -8vw;
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 1.5vw;
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 3.2vw;
        
    }

    #spacer2 p:nth-child(1) {
        font-size: 2vw;
    }

    #spacer2 p {
        font-size: 2vw;
    }

    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        width: 90vw;
        height: 40vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        margin: 0 auto;
    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 40vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40vw;
}

   

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: 5vw;
}

#list-of-services #list-two ul {
    grid-area: ul;
    margin-left: 10vw;
}

#list-of-services #list-two img {
    margin-right: -2vw;
}

#list-of-services #list-one img {
    margin-right: -2vw;
}

.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: 10vw;
    
}

#list-two img {
    
    margin-right: 10vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li a{
    list-style: none;
    line-height: 4vw;
    font-size: 2vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    height: 40vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
    position: relative;
}

#fenc-divfour blockquote p::before {
    content: open-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    left: -4vw;
    top: 1vw;
}

#fenc-divfour blockquote p::after {
    content: close-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    right: 5vw;
    bottom: -15vw;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    width: 30%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
}

.fenc-divs p {
    padding: 0 4vw;
}

.fenc-divs img {
    width: 80px;
    height: 80px;
    padding-top: 10px;
    
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 80vw;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    font-size: 1.3rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
    font-size: 1.5rem;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
    font-size: 1.5rem;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
    font-size: 1.5rem;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
    font-size: 1.5rem;
}

#faq h2 {
	font-size: 3.5vw;
	text-align: center;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 0, 0, .8);
}

#faq p {
	font-size: 1.5vw;
	text-align: center;
	color: #0b0000;
	
	margin-top: 3vh;
}

.faq-items h2 {
    font-size: 2vw;
}

.faq-items p {
    font-size: 1.8vw;
}


#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 40vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    padding-top: 5vw;
}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 5vw;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: left;
}

#footer #other-stuff ul li {
    text-align: center;
}
#footer #other-stuff ul img:nth-child(1) {
    -webkit-transform: scale(.6);
        -ms-transform: scale(.6);
            transform: scale(.6);
    
}

#footer #other-stuff {
    position: relative;
    width: 15vw;
    height: 6vw;
    background-image: url(..images/license-sm.png);
    background-size: cover;
    
}

#footer #assets img {
   margin-left: 2vw;
   -webkit-transform: scale(.9);
       -ms-transform: scale(.9);
           transform: scale(.9);
}

#other-stuff {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

#fold-container {
	margin: 5vw auto;
	margin-bottom: 35vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 60vw;
	height: 30vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 1.2vw;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 1.5rem;
}

#fold1 {
	grid-area: fold1;
	background-color: aqua;
	width: 150%;
	height: 100%;
	-webkit-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	    -ms-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	        transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}


	

#fold2 {
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 110%;
	height: 90%;
	-webkit-transform: translateX(8%) translateY(-5vw);
	    -ms-transform: translateX(8%) translateY(-5vw);
	        transform: translateX(8%) translateY(-5vw);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-15vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-15vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-15vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	        transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-40vw) translateY(-12vw) rotate(-10deg);
	    -ms-transform: translateX(-40vw) translateY(-12vw) rotate(-10deg);
	        transform: translateX(-40vw) translateY(-12vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(6vw) translateY(-12vw) rotate(10deg);
	    -ms-transform: translateX(6vw) translateY(-12vw) rotate(10deg);
	        transform: translateX(6vw) translateY(-12vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#plea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10vw;
    margin-bottom: 10vw;
    
}

#bottom-plea  {
    font-size: 3vw;
    padding: 2vw;
    color: #000;
    background-color: var(--font-green);
    border: none;
    border-radius: 3vw;
    min-width: 80vw;
}


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

#fold1 {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
	
}

#fold2 {
        -ms-grid-row: 1;
        -ms-grid-column: 3;
	
}

#fold3 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
	
}

#fold4 {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
	
}

#fold5 {
        -ms-grid-row: 3;
        -ms-grid-column: 3;
	
}


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

    #list-of-services #list-one ul {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
}

    .two-lists img {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 3;
}

    .two-lists h3 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
}


}

/*------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 834px) {

 #hero {
    background-image: url("../images/hero-mobile-size.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
}

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.3);
    padding: .5rem 1rem;
    border-radius: 12px;
}



#inner-hero a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}

.social-proof-initial {
margin-top: 2vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;


}

.social-proof-initial a{
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-decoration: none;
    font-size: .8rem;
    padding: 1vw;
    border-radius: 10px;

}

.social-proof-initial a::before {
    content: url(../images/5-star.png);
    position: absolute;
    top: -2.5vw;
    
}

#upper-intro {
    color: yellow;
    background-color: #5f5f5f;
    font-size: .6rem;
    margin-bottom: 1vw;
    padding: 1vw;
    border-radius: 5px;
}

#inner-hero h1 {
    font-size: 1.3rem;
    margin-bottom: .5rem;
}




#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}



#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
  
    
}

#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

    

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: .9rem;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par p {
        font-size: 1rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 200vw;
    }

     .gen-divs {
        width: 80vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 2vw;
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 1.2rem;
        
    }

    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100vw;
        height: 100vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;

    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 90vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40vw;
}

   

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: -5vw; 
}

#list-of-services #list-two ul {
    grid-area: ul;
    
}



.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: 10vw;
    
}

#list-two img {
    
    margin-right: 10vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 2.5vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li a{
    list-style: none;
    line-height: 4vw;
    font-size: 2.3vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 130vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 30%;
    width: 100%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
}

.fenc-divs p {
    padding: 0 4vw;
    font-size: 2.5vw;
}

.fenc-divs img {
    width: 80px;
    height: 80px;
    padding-top: 10px;
    
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 80vw;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}

#footer {
    padding-top: 3vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 40vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);

}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 4vw;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: right;
}

#footer #other-stuff ul li {
    text-align: center;
}

#other-stuff {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

#fold-container {
	margin: 5vw auto;
	margin-bottom: 35vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 60vw;
	height: 30vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 1.7vw;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 1.7vw;
}

#fold1 {
	grid-area: fold1;
	background-color: aqua;
	width: 150%;
	height: 110%;
	-webkit-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	    -ms-transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	        transform: translateX(1vw) translateY(-4vw) rotate(2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}


	

#fold2 {
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 110%;
	height: 90%;
	-webkit-transform: translateX(8%) translateY(-5vw);
	    -ms-transform: translateX(8%) translateY(-5vw);
	        transform: translateX(8%) translateY(-5vw);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-15vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-15vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-15vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	        transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-40vw) translateY(-12vw) rotate(-10deg);
	    -ms-transform: translateX(-40vw) translateY(-12vw) rotate(-10deg);
	        transform: translateX(-40vw) translateY(-12vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(6vw) translateY(-12vw) rotate(10deg);
	    -ms-transform: translateX(6vw) translateY(-12vw) rotate(10deg);
	        transform: translateX(6vw) translateY(-12vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(0vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}


}

@media screen and (max-width: 834px) {

#fold1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
	
}

#fold2 {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
	
}

#fold3 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
	
}

#fold4 {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
	
}

#fold5 {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
	
}


}

@media screen and (max-width: 834px) {

    #list-of-services #list-one ul {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

    .two-lists img {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
}

    .two-lists h3 {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}


}

/*---------------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 768px) {
     #hero {
    background-image: url("../images/hero-mobile-size-sm.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
}
	.nav-links {
		position: absolute;
		right: 8vw; 
		height: 50vh;
		top: 8vh;   
		background-color: rgba(32, 41, 58, 0.99);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;			
		width: 83%;
		
		opacity: 0;
		-webkit-transition: opacity 0.7s ease-in;
		-o-transition: opacity 0.7s ease-in;
		transition: opacity 0.7s ease-in;
		z-index: -10; 
		border-radius: 30px;
		font-size: 2vw;
	}
	
	
	.nav-links li:nth-child(1) {
		display: none;
	}
	
	.nav-links li, .nav-links li a {
		color: #fff;
        font-size: 1.5rem;
	}
	
	.nav-links li:nth-child(3) {
		display: none;
	}
	
	
	
	.nav-links li {
		opacity: 0.1;
		
	}
	
	.burger {
		display: block;
		top: 5vw;
		right: 8vw;
		position: fixed;  
		z-index: 20;	 
		background-color: #ff0000;
		border-radius: 20%;
	}
	
	.nav-active {
		
		opacity: 1;
		position: fixed;
		z-index: 20; 
	}
	


	@-webkit-keyframes navLinkFade{
		from{
			opacity: 0.5;
			-webkit-transform: translateX(50px);
			        transform: translateX(50px);
		}
		to{
			opacity: 1;
			-webkit-transform: translateX(0px);
			        transform: translateX(0px);
		}
	
	
	}
	


	@keyframes navLinkFade{
		from{
			opacity: 0.5;
			-webkit-transform: translateX(50px);
			        transform: translateX(50px);
		}
		to{
			opacity: 1;
			-webkit-transform: translateX(0px);
			        transform: translateX(0px);
		}
	
	
	}
	
		
	
	
	.toggle .line1{
		-webkit-transform: rotate(-45deg) translate(-5px,6px);
		    -ms-transform: rotate(-45deg) translate(-5px,6px);
		        transform: rotate(-45deg) translate(-5px,6px);
		
		}
	
	.toggle .line2{
		opacity:0;
	}
	
	.toggle .line3{
		-webkit-transform: rotate(45deg) translate(-5px,-6px);
		    -ms-transform: rotate(45deg) translate(-5px,-6px);
		        transform: rotate(45deg) translate(-5px,-6px);
	}
	

     #hero {
    background-image: url("../images/hero-mobile-size-sm.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
} 

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.3);
    padding: .5rem 1rem;
    border-radius: 12px;
}

#inner-hero h1 {
    font-size: .6rem;
    margin-bottom: 1rem;
}

#inner-hero a {
    display: block;
    padding: 0.75rem 1.5rem;
    background: var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}

.social-proof-initial {
margin-top: 2vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;


}

.social-proof-initial a{
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-decoration: none;
    font-size: .8rem;
    padding: 1vw;
    border-radius: 10px;

}

.social-proof-initial a::before {
    content: url(../images/5-star-sm.png);
    position: absolute;
    top: -1.5vw;
    
}

.bring-up {
      position: absolute;
      top: 35vw;
      width: 100vw;
      z-index: 8888;
      -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.3);
              box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

#bringup {
    display: none;
    background-color: var(--font-green);
    color: #fff;
    padding: 2vw;
    border-radius: 5vw;
    font-size: 4vw;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto;
}



#upper-intro {
    color: yellow;
    background-color: #5f5f5f;
    font-size: .6rem;
    margin-top: 2vw;
    margin-bottom: 2vw;
    padding: 1vw;
    border-radius: 5px;
}

#inner-hero h1 {
    font-size: 1rem;
    margin-bottom: .5rem;
}


#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
   
    
}#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

 #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: .9rem;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par p {
        font-size: 1rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 260vw;
    }

     .gen-divs {
        width: 80vw;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.4);
            -ms-transform: scale(.4);
                transform: scale(.4);
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 1.2rem;
        
    }
    #spacer2 p:nth-child(1) {
        font-size: 2.8vw;
    }

    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100vw;
        height: 100vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;

    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 90vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40vw;
}

   

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: -5vw; 
}

#list-of-services #list-two ul {
    grid-area: ul;
    
}



.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: 10vw;
    
}

#list-two img {
    
    margin-right: 10vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 2.5vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}


#city-envelope ul li::before {
    content: "";
    width: 10px;
    height:10px;
    border-right: 2px solid var(--main-color);
    border-top: 2px solid var(--main-color);
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    position: absolute;
    top: 1vw;
    left: -4vw;
}


#city-envelope ul li a {
    list-style: none;
    line-height: 4vw;
    font-size: 2.2vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 130vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 30%;
    width: 100%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
}

.fenc-divs p {
    padding: 0 4vw;
    font-size: 2.5vw;
}

.fenc-divs img {
    width: 60px;
    height: 60px;
    padding-top: 5px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}

#faq p {
	font-size: 2.5vw;
	text-align: center;
	color: #0b0000;
	
	margin-top: 3vh;
}

.faq-items h2 {
    font-size: 2.5vw;
}

.faq-items p {
    font-size: 2.2vw;
}

#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 50vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);

}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 4vw;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: right;
}

#footer #other-stuff ul li {
    text-align: center;
}

#footer #assets img {
   margin-left: 2vw;
   -webkit-transform: scale(1.1);
       -ms-transform: scale(1.1);
           transform: scale(1.1);
}

#other-stuff {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

#fold-container {
	margin: 5vw auto;
	margin-bottom: 35vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 55vw;
	height: 30vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 1.7vw;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 1.7vw;
}

#fold1 {
	grid-area: fold1;
	background-color: aqua;
	width: 150%;
	height: 110%;
	-webkit-transform: translateX(-16vw) translateY(-4vw) rotate(2deg);
	    -ms-transform: translateX(-16vw) translateY(-4vw) rotate(2deg);
	        transform: translateX(-16vw) translateY(-4vw) rotate(2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(0) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}


	

#fold2 {
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 110%;
	height: 90%;
	-webkit-transform: translateX(-8vw) translateY(-10vw);
	    -ms-transform: translateX(-8vw) translateY(-10vw);
	        transform: translateX(-8vw) translateY(-10vw);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(0) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-25vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-25vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-25vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	        transform: translateX(0) translateY(-8vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-42vw) translateY(-12vw) rotate(-10deg);
	    -ms-transform: translateX(-42vw) translateY(-12vw) rotate(-10deg);
	        transform: translateX(-42vw) translateY(-12vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-30vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(-8vw) translateY(-12vw) rotate(10deg);
	    -ms-transform: translateX(-8vw) translateY(-12vw) rotate(10deg);
	        transform: translateX(-8vw) translateY(-12vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(-4vw) translateY(-8vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-4vw) translateY(-8vw) rotate(0) scale(1.4);
	
	        transform: translateX(-4vw) translateY(-8vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#plea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10vw;
    margin-bottom: 10vw;
    
}

#bottom-plea  {
    font-size: 4.5vw;
    padding: 2vw;
    color: #000;
    background-color: var(--font-green);
    border: none;
    border-radius: 3vw;
    min-width: 80vw;
}

#bottom-plea a {
    color: #000;
}

#bottom-plea  {
    font-size: 2.5vw;
    padding: 2vw;
    color: #000;
    background-color: var(--font-green);
    border: none;
    border-radius: 3vw;
    min-width: 80vw;
}

}



@media screen and (max-width: 768px) {

#fold1 {
          -ms-grid-row: 1;
          -ms-grid-column: 1;
	
}

#fold2 {
          -ms-grid-row: 1;
          -ms-grid-column: 3;
	
}

#fold3 {
          -ms-grid-row: 3;
          -ms-grid-column: 1;
	
}

#fold4 {
          -ms-grid-row: 3;
          -ms-grid-column: 3;
	
}

#fold5 {
          -ms-grid-row: 3;
          -ms-grid-column: 3;
	
}

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

    #list-of-services #list-one ul {
          -ms-grid-row: 1;
          -ms-grid-row-span: 2;
          -ms-grid-column: 1;
          -ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
          -ms-grid-row: 1;
          -ms-grid-row-span: 2;
          -ms-grid-column: 1;
          -ms-grid-column-span: 2;
}

    .two-lists img {
          -ms-grid-row: 1;
          -ms-grid-row-span: 2;
          -ms-grid-column: 3;
}

    .two-lists h3 {
          -ms-grid-row: 3;
          -ms-grid-column: 1;
          -ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
          -ms-grid-row: 1;
          -ms-grid-row-span: 2;
          -ms-grid-column: 1;
          -ms-grid-column-span: 2;
}

}

/*-------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 600px) {
    #hero {
    background-image: url("../images/hero-mobile-size-sm.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
} 

#hero h1 {
    text-transform: uppercase;

    font-size: 2.5em;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.3);
    padding: .5rem 1rem;
    border-radius: 12px;
}

#inner-hero h1 {
    font-size: .6rem;
    margin-bottom: 1rem;
}

#inner-hero a {
    display: block;
    padding: 0.75rem 1.5rem;
    background: var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}

.social-proof-initial {
margin-top: 4vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;


}

.social-proof-initial a{
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-decoration: none;
    font-size: 1rem;
    padding: 1vw;
    border-radius: 5px;

}

.social-proof-initial a::before {
    content: url(../images/5-star-sm.png);
    position: absolute;
    top: -2.5vw;
    
}

#upper-intro {
    color: yellow;
    background-color: #5f5f5f;
    font-size: .6rem;
    margin-top: 2vw;
    margin-bottom: 2vw;
    padding: 1vw;
    border-radius: 5px;
}

#inner-hero h1 {
    font-size: .8rem;
    margin-bottom: .5rem;
}

#upper-intro h2 {
    font-size: .8rem;
}

#contact {
    background: #f9f9f9;
    padding: 3rem 1rem;

}

#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
   
    
}#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

    

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    
    #second-fencing-container h2 {
        font-size: .9rem;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

        #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par p {
        font-size: 1rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 450vw;
    }

     .gen-divs {
        width: 80vw;
        height: 30%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
    }

    .gen-divs img {
        -webkit-transform: scale(.5);
            -ms-transform: scale(.5);
                transform: scale(.5);
        margin-top: -8vw;
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 3vw;
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 1.2rem;
        
    }

    #spacer2 p:nth-child(1) {
        font-size: 3vw;
    }

    .colorfull-p {
        border: 2px solid var(--blue);
        margin: 0 auto;
        font-size: 1.5rem;
        padding: 4px;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #currency-cue p {
        font-size: 1.5rem;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100vw;
        height: 100vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;

    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 90vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 40%;
}

   

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: 15vw;
}

#list-of-services #list-two ul {
    grid-area: ul;
    margin-left: 20vw;
}



.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: -10vw;
    
}

#list-two img {
    
    margin-right: -15vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 3vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li a{
    list-style: none;
    line-height: 4vw;
    font-size: 3vw;
}
#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 150vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 30%;
    width: 100%;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
}

.fenc-divs p {
    padding: 0 4vw;
    font-size: 3vw;
}

.fenc-divs img {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}

#faq p {
	font-size: 3vw;
	text-align: center;
	color: #0b0000;
	
	margin-top: 3vh;
}

.faq-items h2 {
    font-size: 3vw;
}

.faq-items p {
    font-size: 3vw;
}

#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 50vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);

}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 1vw;
}

#social-nets img {
    width: 50px;
}

#footer ul li {
    font-size: 1rem;
}

#footer a {
    color: #fff;
}

#footer #other-stuff ul li img {
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
}

#footer #assets ul li {
    text-align: right;
}

#footer #other-stuff ul li {
    text-align: center;
}

#other-stuff {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

#plea {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50vw;
    margin-bottom: 10vw;
    
}

#bottom-plea  {
    font-size: 3vw;
    padding: 2vw;
    color: #000;
    background-color: var(--font-green);
    border: none;
    border-radius: 3vw;
    min-width: 80vw;
}

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

    #list-of-services #list-one ul {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
}

    .two-lists img {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 3;
}

    .two-lists h3 {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
        -ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
        -ms-grid-row: 1;
        -ms-grid-row-span: 2;
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
}



}

/*--------------------------------------------------------------------------------------------------------*/


@media screen and (max-width: 480px) {

body {
    height: auto;
}

#hero {
    background-image: url("../images/hero-mobile-size-sm.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    
} 

#hero h1 {
    text-transform: uppercase;

    font-size: .8rem;
}

#inner-hero {
    
    text-align: center; color: white;
    background: rgba(0,0,0,0.3);
    padding: .5rem 1rem;
    border-radius: 12px;
}



#inner-hero a {
    display: block;
    padding: 1rem 1.5rem;
    background: var(--font-green);
    color: #000;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;

}


.social-proof-initial {
margin-top: 6vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
position: relative;


}

.social-proof-initial a{
    color: #fff;
    background-color: rgba(0,0,0,.5);
    text-decoration: none;
    font-size: 1rem;
    padding: 2vw;
    border-radius: 10px;

}

.social-proof-initial a::before {
    content: url(../images/5-star-sm.png);
    position: absolute;
    top: -2vw;
    
}

#upper-intro {
    color: yellow;
    background-color: #5f5f5f;
    font-size: .6rem;
    margin-top: 4vw;
    margin-bottom: 2vw;
    padding: 1vw;
    border-radius: 5px;
}

#inner-hero h1 {
    font-size: .6rem;
    margin-bottom: .5rem;
    
}

#inner-hero a {
    font-size: .9rem;
    padding: .9vw;
}

#contact {
    background-color: #fffae6;
      padding: 20px;
      border: 2px solid #f90;
      position: relative;
      -webkit-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      transition: all 0.4s ease;
      z-index: 1;
}

.bring-up {
      position: absolute;
      top: -200vw;
      width: 100vw;
      z-index: 8888;
      -webkit-box-shadow: 0 4px 20px rgba(0,0,0,0.3);
              box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }







#fencing-posts {
    width: 400vw;
    background-color: transparent;
   height: 10vw;
   width: 100vw;
    background-image: url(../images/fencing-medium-file.png);
    background-size: contain;
   
    
}

#first-title {
    display: block;
}

 #first-title h1 {
        text-align: center;
        color: var(--blue);
        font-size: 1.3rem;
        margin-top: 3vw;
    }

    

    #second-fencing-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        
        
    }
    
    #second-fencing-container h2 {
        font-size: .9rem;
        padding: 5vw;
    }

    #second-fencing-container h2 span {
        line-height: 3rem;
        font-size: 1.2rem;
        text-align: center;
        
    }

    #license {
        display: none;
        text-align: center;
        background-image: url(../images/license-sm.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #gen-first-par {
        margin-top: var(--margin-three);
    }

    #gen-first-par::before {
        content:url(../images/tools-lined-up-sm.png);
        position: absolute;
        z-index: -1;
        isolation: isolate;
        top: -20vw;
        left: 12vw;
        opacity: .2;
        -webkit-transform: rotate(-25deg);
            -ms-transform: rotate(-25deg);
                transform: rotate(-25deg);
    }


    #gen-first-par p {
        font-size: 1rem;
        padding: var(--padding-two);
    }

    #gen-divs {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        height: 450vw;
        
    }

    .gen-divs {
        width: 80vw;
        height: 32%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: 2vw;
        margin: 0 auto;
        border: 1px solid var(--border);
        -webkit-box-shadow: 0 0 20px #5f5f5f;
                box-shadow: 0 0 20px #5f5f5f;
        background-color: #fff;
    }

    .gen-divs img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
        margin-bottom: -6vw;
    }

    .gen-divs h3 {
        font-size: 1.5rem;
        line-height: 1.3rem;
        padding-bottom: 2rem;
        
    }

    .gen-divs p {
        font-size: 3.5vw;
    }

    #spacer2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 80vw;
        margin: 10vw auto;
    }
    #spacer2 p:nth-child(1) {
        font-size: 3.2vw;
    }

    #spacer2 h2 {
        
        margin-bottom: 10vw;
        font-size: 1.2rem;
        
    }

    .colorfull-p {
        border: 2px solid var(--blue);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 auto;
    }

    #currency-cue {
        width: 80vw;
        margin: 5vw auto;
    }

    #list-of-services {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        width: 100vw;
        height: 200vw;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        
    }

    .two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 1fr;
    grid-template-columns: 2fr 1fr;
    -ms-grid-rows: 2fr 1fr;
    grid-template-rows: 2fr 1fr;
        grid-template-areas: "ul ul img"
                            "ul ul img"
                            "h3 h3 h3";
    width: 90vw;
    margin: 0 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    justify-items: center;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    height: 80vw;
    background-color: #fff;
}

#list-of-services #list-one ul {
    grid-area: ul;
    margin-left: 15vw;
}

#list-of-services #list-two ul {
    grid-area: ul;
    margin-left: 20vw;
}



.two-lists img {
    grid-area: img;
    
}

.two-lists h3 {
    grid-area: h3;
    padding-bottom: 2rem;
}

.two-lists #list-two ul {
    grid-area: ul;
}

#list-one img {
    -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
            transform: scale(.5);
    margin-right: -10vw;
    
}

#list-two img {
    
    margin-right: -15vw;
    
}

.two-lists img {
        -webkit-transform: scale(.3);
            -ms-transform: scale(.3);
                transform: scale(.3);
}

#list-one ul li, #list-two ul li {
    list-style: none;
    font-size: 4vw;
}

#list-one ul {
    padding-left: 2rem;
}

#list-two ul {
    padding-left: 2rem;
}

#list-of-cities {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#locality-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: 10vw auto;
    width: 90vw;
}

#locality-intro #intro-inner-one h2 {
    font-size: 1.2rem;
    text-align: center;
}

#locality-intro #intro-inner-one ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    line-height: 4rem;
}


#locality-intro #intro-inner-one ul li {
    list-style: none;
}

#city-envelope {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
    position: relative;
}

#city-envelope ul li {
    list-style: none;
    line-height: 4vw;
    font-size: 1.2vw;
}

#cust-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100vw;
    height: 450vw;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    width: 90vw;
    margin: 5vw auto;
    
}

.fenc-divs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 140vw;
    width: 90%;
    margin: 0 auto;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);
    background-color: #fff;
    position: relative;
}

#fenc-divfive blockquote p::before {
    content: open-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    left: 1vw;
    top: 50vw;
}

#fenc-divfive blockquote p::after {
    content: close-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    right: 5vw;
    bottom: -15vw;
}

#fenc-divsix blockquote p::before {
    content: open-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    left: 1vw;
    top: 50vw;
}

#fenc-divsix blockquote p::after {
    content: close-quote;
    position: absolute;
    font-size: 15rem;
    color: rgba(249, 213, 6, .5);
    right: 5vw;
    bottom: -15vw;
}


.fenc-divs p {
    padding: 0 4vw;
    font-size: 5vw;
    
}

.fenc-divs img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.fenc-divs span {
    text-align: right;
    padding-right: 5vw;
    padding-bottom: 5vw;
    color: #f00;
}

#form-box {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    -webkit-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

#contact #form-box h2 {
    text-align: center;
    margin-bottom: 1.5rem;
}

#contact #form-box #name {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #email {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #phone {
    width:100%;
    padding:0.75rem;
    margin-bottom:1rem;
    border:1px solid #ccc;
    border-radius:5px;
}

#contact #form-box #message {
    width:100%;
    padding:0.75rem;
    border:1px solid #ccc;
    border-radius:5px;
    margin-bottom:1.5rem;
}

.faq-items h2 {
    font-size: 3.5vw;
}

.faq-items p {
    font-size: 3.5vw;
}

#fold-container {
	margin: 20vw auto;
    margin-bottom: 80vw;
	width: 100vw;
	height: 25vw;

}

#portfolio {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2vw 1fr;
	grid-template-columns: repeat(2, 1fr);
	-ms-grid-rows: 1fr 2vw 1fr;
	grid-template-rows: repeat(2, 1fr);
	    grid-template-areas: "fold1 fold2"
						"fold3 fold4";
	gap: 2vw;
	width: 50vw;
	height: 30vw;
	background-color: #bca108;
	border-radius: 1vw;
	padding: 2vw;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	position: relative;
	-webkit-transform: rotate(2deg);
	    -ms-transform: rotate(2deg);
	        transform: rotate(2deg);
	margin: 8vw auto;
	-webkit-transition: -webkit-transform 1s ease-in-out;
	transition: -webkit-transform 1s ease-in-out;
	-o-transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out;
	transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out;
	
}


#portfolio::before {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	/* background-color: rgb(183, 174, 7); */
	background-image: url(../images/cardual2.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 18vh;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 6;
	border-radius: 1vw;
	outline: 2px dashed rgb(198, 194, 194);
	outline-offset: -10px;
	margin: 8vw auto;
	
	
}

#portfolio:hover {
	-webkit-transform: scale(.8);
	    -ms-transform: scale(.8);
	        transform: scale(.8);
	

}

#portfolio h2 {
	padding-top: 20px;
	color:#fff;
	font-size: 2rem;
	text-align: center;
	
}

#portfolio ul li {
	font-size: 3vw;
	list-style: none;
	padding-left: 20px;
	color: #fff;
	mix-blend-mode:difference;
}

#portfolio #fold1 ul li {
	font-size: 3vw;
}

#fold1 {
	grid-area: fold1;
	background-color: aqua;
	width: 150%;
	height: 110%;
	-webkit-transform: translateX(-30vw) translateY(-4vw) rotate(-12deg);
	    -ms-transform: translateX(-30vw) translateY(-4vw) rotate(-12deg);
	        transform: translateX(-30vw) translateY(-4vw) rotate(-12deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold1:hover {
	
	-webkit-transform: translateX(-12vw) translateY(-4vw) rotate(0) scale(1.2);
	
	    -ms-transform: translateX(-12vw) translateY(-4vw) rotate(0) scale(1.2);
	
	        transform: translateX(-12vw) translateY(-4vw) rotate(0) scale(1.2);
	
	z-index: 10;
}


	

#fold2 {
	grid-area: fold2;
	background-color: rgb(0, 255, 8);
	width: 110%;
	height: 90%;
	-webkit-transform: translateX(-35vw) translateY(-15vw);
	    -ms-transform: translateX(-35vw) translateY(-15vw);
	        transform: translateX(-35vw) translateY(-15vw);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

#fold2:hover {
	
	-webkit-transform: translateX(-45vw) translateY(-2vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-45vw) translateY(-2vw) rotate(0) scale(1.4);
	
	        transform: translateX(-45vw) translateY(-2vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold3 {
	grid-area: fold3;
	background-color: red;
	width: 140%;
	height: 110%;
	-webkit-transform: translateX(.5vw) translateY(-40vw) rotate(-2deg);
	    -ms-transform: translateX(.5vw) translateY(-40vw) rotate(-2deg);
	        transform: translateX(.5vw) translateY(-40vw) rotate(-2deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#fold3:hover {
	
	-webkit-transform: translateX(-15) translateY(-25vw) rotate(0) scale(1.3);
	
	    -ms-transform: translateX(-15) translateY(-25vw) rotate(0) scale(1.3);
	
	        transform: translateX(-15) translateY(-25vw) rotate(0) scale(1.3);
	
	z-index: 10;
}

#fold4 {
	grid-area: fold4;
	background-color: rgb(6, 28, 231);
	width: 120%;
	height: 120%;
	-webkit-transform: translateX(-75vw) translateY(-22vw) rotate(-10deg);
	    -ms-transform: translateX(-75vw) translateY(-22vw) rotate(-10deg);
	        transform: translateX(-75vw) translateY(-22vw) rotate(-10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold4:hover {
	
	-webkit-transform: translateX(-60vw) translateY(-25vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-60vw) translateY(-25vw) rotate(0) scale(1.4);
	
	        transform: translateX(-60vw) translateY(-25vw) rotate(0) scale(1.4);
	
	z-index: 10;
}

#fold5 {
	grid-area: fold4;
	background-color: rgb(229, 240, 79);
	width: 120%;
	height: 100%;
	-webkit-transform: translateX(-28vw) translateY(-22vw) rotate(10deg);
	    -ms-transform: translateX(-28vw) translateY(-22vw) rotate(10deg);
	        transform: translateX(-28vw) translateY(-22vw) rotate(10deg);
	border-radius: 1vw;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	
}

#fold5:hover {
	
	-webkit-transform: translateX(-58vw) translateY(-28vw) rotate(0) scale(1.4);
	
	    -ms-transform: translateX(-58vw) translateY(-28vw) rotate(0) scale(1.4);
	
	        transform: translateX(-58vw) translateY(-28vw) rotate(0) scale(1.4);
	
	z-index: 10;
}


#footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100vw;
    height: 35vw;
    background-color: #000;
    color: #fff;
    border: 2px solid var(--border);
    -webkit-box-shadow: 0 0 20px var(--border);
            box-shadow: 0 0 20px var(--border);

}

main {
    height: auto;
}

#footer {
    position: relative;
}

.movefootup {
    position: absolute;
    top: -130vw;
    z-index: 9999;
}

#footer ul li {
    list-style: none;
    line-height: 1.8rem;
}

#social-nets {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-left: 1vw;
}

#social-nets img {
    width: 30px;
}

#footer ul li {
    font-size: .7rem;
}

#footer a {
    color: #fff;
}

#other-stuff {
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
}

#other-stuff img {
    width: 90px;
    
    
    
}

#footer #assets ul li {
    text-align: left;
}

#footer #other-stuff ul li {
    text-align: center;
}
    
#footer #assets img {
   
   -webkit-transform: scale(1.2);
   
       -ms-transform: scale(1.2);
   
           transform: scale(1.2);
}  


}

@media screen and (max-width: 480px) {

#fold1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
	
}

#fold2 {
-ms-grid-row: 1;
-ms-grid-column: 3;
	
}

#fold3 {
-ms-grid-row: 3;
-ms-grid-column: 1;
	
}

#fold4 {
-ms-grid-row: 3;
-ms-grid-column: 3;
	
}

#fold5 {
-ms-grid-row: 3;
-ms-grid-column: 3;
	
}  


}

@media screen and (max-width: 480px) {

    #list-of-services #list-one ul {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}

    #list-of-services #list-two ul {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}

    .two-lists img {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 3;
}

    .two-lists h3 {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
}

    .two-lists #list-two ul {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
}  


}