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

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

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



body {

	overflow-x: hidden;	
	font-family: 'Poppins', Sans-Serif;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	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: #437797;
}

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

    } 

nav ul {
    list-style: none;
    display: flex;
    gap: 3vw;
    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;

}

#services-dropdown {
	display: none;
	position: absolute;
	background-color: var(--main-color);
	min-width: 20vw;
	box-shadow: 0 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	border: 2px solid #2d6ddb;
	
	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;
	
}



#hero {
    background-image: url("../images/character-handyman-working-on-house-1980X700.png");
    background-size: cover;
    height: 40vw;
    width: 100vw;
    display: flex;
    align-items: 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: #ff9900;
    color: #fff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}


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

}

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

#second-fencing-container {
    height: 40vw;
    width: 100vw;
    background-color: var(--main-color);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, 1fr) 12vw;
    color: #fff;
    position: relative;
}

#second-fencing-container::before {
    content: url(../images/green-plant.png);
    position: absolute;
    transform: rotate(-20deg) scale(.6);
    
    left: 30px;
}

#fenc-firsthtwo {
    grid-column: 3 / 6;
    grid-row: 2 / 4;
}

#fenc-first-par {
    grid-column: 7 / 11;
    grid-row: 2 / 4;
}

#fenc-first-par p {
    font-size: 1.4rem;
}

.colorfull-p {
    color:var(--blue);
    font-weight: bold;
    font-size: 2rem;
    border:2px solid var(--blue);
    padding: 4px;
    border-radius: 4px;
}

#fenc-secondhtwo {
    grid-column: 3 / 11;
    grid-row: 4 / 5;
    text-align: center;
}

#fenc-divs {
    grid-column: 2 / 12;
    grid-row: 5 / 6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2vw;
    grid-template-rows: 1fr;
    width: 90%;
    height: 25vw;
    margin: 0 auto;
    margin-top: -2vw;
    z-index: 2;
   
    
}

.fenc-divs {
    background-color: #fff;
    color: var(--main-color);
    padding: 1vw;
    box-shadow: 5px 5px 5px #ad9d9d;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
}

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

.fenc-divs h3 {
    line-height: 4rem;
}

#rounded-insert {
    min-height: 15vw;
    background-color: var(--main-color);
    margin-top: -12vw;
    width: 100%;
	padding-bottom: 2vw;
   	clip-path: ellipse(75% 50% at 50% 50%);
}


#spacer2 {
    margin: 0 auto;
    margin-top: 15vw;
    margin-bottom: 6vw;
    min-height: 6vw;
    background-color: var(--off-white);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 4vw;
    width: 80vw;
    color: var(--main-color);
}

#spacer2 h2 {
    text-align: right;
    margin-right: 15vw;
}

#spacer2 p {
    padding-right: 4vw;
    font-size: 1.4rem;
}

#rect {
    height: 8vw;
    width: 100vw;
    background-color: var(--main-color);
    margin-bottom: -6vw;
}

#currency-cue {
    display: grid;
     grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-gap: 4vw;
    width: 100vw;
    justify-content: center;
    align-items: center;
    height: 60vh;
    background-color: var(--main-color);
    clip-path: ellipse(75% 50% at 50% 50%);
    position: relative;
    
}

#currency-cue::before {
    content: url(../images/green-plant.png);
    position: absolute;
    transform: rotate(20deg) scale(.6);
    right: 5vw;
    top: -2vw;
}

#currency-cue p {
    padding-right: 15vw;
    color: #fff;
    font-size: 1.4rem;
}

#threedimg {
     
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: translateX(150%);
}

#threedimg span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/pineapple-and-juice.png);
background-size: cover;
transition: 0.5s;
z-index: calc(1 + var(--i));
transform: rotate(-30deg) skew(25deg) translateX(calc(1.5px * var(--i))) translateY(calc(-1.5px * var(--i)));
box-shadow: -5px 5px 0 rgba(0,0,0,0.05);
}

    
#threedimg:hover span:last-child {
box-shadow: -50px 50px 0 rgba(0,0,0, 0.5);

}

#list-of-services {
    margin: 0 auto;
    margin-top: 6vw;
    width: 100vw;
    height: 30vw;
    background-color: var(--main-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    gap: 2vw;


}



.two-lists {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 3fr 1fr;


}

#list-one-ul {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

#list-two-ul {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    
}

#list-one img, #list-two img {
    grid-column: 2 / 5;
    grid-row: 1 / 2;
}

#list-one img {
    width: 10vw;
    align-self: center;
    justify-self: center;
    border-radius: 5px;
    box-shadow: 4px 4px 4px #437797   ;
}

#list-two img {
    width: 5vw;
    align-self: center;
    justify-self: center;
    border-radius: 5px;
    box-shadow: 4px 4px 4px #437797   ;
}

#list-one h3, #list-two h3 {
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

#list-of-services ul, h3 {
    list-style: none;
    font-size: 1.4rem;
    color: var(--main-color);
    line-height: 1.8rem;
    padding-left: 3vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

#list-of-services ul li {
    position: relative;

}

#list-of-services ul li::before {
    content: "";
    width: 20px;
    height: 10px;
    border-left: 3px solid var(--main-color);
    border-bottom: 3px solid var(--main-color);
    position: absolute;
    transform: rotate(-45deg);
    left: -2vw;
    top: 5px;
    padding-right: 10px;
}

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



.two-lists {
    background-color: #fff;
    width: 60%;
    
}

.two-lists .colorfull-h3 {
    color: var(--darker-green);
}


#list-of-cities {
    width: 100vw;
    height: 60vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(7, 1fr);
    grid-template-areas: "city-intro city-intro"
    "cities-one cities-two";

    gap: 4vw;
    background-color: var(--main-color);
    margin-top: 1vw;

}

#locality-intro {
    grid-template-columns: 1 / 3;
    grid-template-rows: 1 / 4;
    grid-area: city-intro;
    min-height: 30vw;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4vw;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    background-color: var(--off-white);
    

}

#locality-intro #intro-inner-one {
    grid-template-columns: 1 / span 1;
    grid-template-rows: 1 / span 1;
    padding-left: 10vw;
}

#locality-intro h2 {
    margin-bottom: 1vw;
}

#locality-intro ul {

}

#locality-intro ul li {
    
    list-style: none;
    line-height: 1.5rem;
}

#intro-inner-two {
    grid-template-columns: 2 / span 2;
    grid-template-rows: 1 / span 1;
}

#intro-inner-two img {
    border-radius: 10px;
}

#cities-one {
    grid-template-columns: 1 / 2;
    grid-template-rows: 5 / 6;
    grid-area: cities-one;
    background-color: #fff;
    margin-left: 4vw;
    border-radius: 5px;
}

#cities-two {
    grid-template-columns: 2 / 3;
    grid-template-rows: 5 / 6;
    grid-area: cities-two;
    background-color: #fff;
    margin-right: 4vw;
}

#cities-one, #cities-two {
    display: flex;
    align-items: center;
    justify-content: center;
}

#cities-one a, #cities-two a {
    color: var(--main-color);
}

#cities-one ul li, #cities-two ul li {
    list-style: none;
    line-height: 2rem;
    font-size: 1.5rem;
    font-family: ;
}

#cust-divs {
    grid-column: 2 / 12;
    grid-row: 5 / 6;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2vw;
    grid-template-rows: 1fr;
    width: 90%;
    height: 25vw;
    margin: 0 auto;
    margin-top: -6vw;
    z-index: 2;
    
    
}

.fenc-divs {
    position: relative;
    font-size: 1.3rem;
}

#cust-divs .cust-name {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    text-align: right;
    padding-top: 5vw;

}


#form-box {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 6vw;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    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: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100vw;
    height: 15vw;
    background-color: #000;
    color: #fff;

}

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

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

#footer a {
    color: #fff;
} */

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

/*
* 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; /* avoiding horizontal scroll bar */
	color-scheme: dark light;
}

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



body {
/*	border: 10px blue solid;  use it to troubleshoot fails */
	overflow-x: hidden;	/* avoiding horizontal scroll bar */
	font-family: 'Poppins', Sans-Serif;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	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: #437797;
}

.core {							/*core is the outer most container, just inside the body*/
        min-height: 100dvh;
        display: -ms-grid;
        display: grid;
        -ms-grid-rows: auto 1fr auto;
        grid-template-rows: auto 1fr auto; /* header main footer */
        -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;
	/* mix-blend-mode: darken; */
	border-radius: 4px;
	/* padding: 4px; */
	/* margin-bottom: -8px; */
	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;

}

#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: 1;
	border: 2px solid #2d6ddb;
	/* margin-top: .5rem; */
	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;
	/* mix-blend-mode: darken; */
}



#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 {
    /* position: absolute; */
    /* top: 50%;
    left: 50%; */
    /* transform: translate(-50%, -50%); */
    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: #ff9900;
    color: #fff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;

}


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

}

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

#second-fencing-container {
    height: 40vw;
    width: 100vw;
    background-color: var(--main-color);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[12];
    grid-template-columns: repeat(12, 1fr);
    -ms-grid-rows: (1fr)[4] 12vw;
    grid-template-rows: repeat(4, 1fr) 12vw;
    color: #fff;
    position: relative;
}

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

#second-fencing-container > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}

#second-fencing-container > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}

#second-fencing-container > *:nth-child(4) {
	-ms-grid-row: 1;
	-ms-grid-column: 4;
}

#second-fencing-container > *:nth-child(5) {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
}

#second-fencing-container > *:nth-child(6) {
	-ms-grid-row: 1;
	-ms-grid-column: 6;
}

#second-fencing-container > *:nth-child(7) {
	-ms-grid-row: 1;
	-ms-grid-column: 7;
}

#second-fencing-container > *:nth-child(8) {
	-ms-grid-row: 1;
	-ms-grid-column: 8;
}

#second-fencing-container > *:nth-child(9) {
	-ms-grid-row: 1;
	-ms-grid-column: 9;
}

#second-fencing-container > *:nth-child(10) {
	-ms-grid-row: 1;
	-ms-grid-column: 10;
}

#second-fencing-container > *:nth-child(11) {
	-ms-grid-row: 1;
	-ms-grid-column: 11;
}

#second-fencing-container > *:nth-child(12) {
	-ms-grid-row: 1;
	-ms-grid-column: 12;
}

#second-fencing-container > *:nth-child(13) {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
}

#second-fencing-container > *:nth-child(14) {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
}

#second-fencing-container > *:nth-child(15) {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
}

#second-fencing-container > *:nth-child(16) {
	-ms-grid-row: 2;
	-ms-grid-column: 4;
}

#second-fencing-container > *:nth-child(17) {
	-ms-grid-row: 2;
	-ms-grid-column: 5;
}

#second-fencing-container > *:nth-child(18) {
	-ms-grid-row: 2;
	-ms-grid-column: 6;
}

#second-fencing-container > *:nth-child(19) {
	-ms-grid-row: 2;
	-ms-grid-column: 7;
}

#second-fencing-container > *:nth-child(20) {
	-ms-grid-row: 2;
	-ms-grid-column: 8;
}

#second-fencing-container > *:nth-child(21) {
	-ms-grid-row: 2;
	-ms-grid-column: 9;
}

#second-fencing-container > *:nth-child(22) {
	-ms-grid-row: 2;
	-ms-grid-column: 10;
}

#second-fencing-container > *:nth-child(23) {
	-ms-grid-row: 2;
	-ms-grid-column: 11;
}

#second-fencing-container > *:nth-child(24) {
	-ms-grid-row: 2;
	-ms-grid-column: 12;
}

#second-fencing-container > *:nth-child(25) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#second-fencing-container > *:nth-child(26) {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
}

#second-fencing-container > *:nth-child(27) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

#second-fencing-container > *:nth-child(28) {
	-ms-grid-row: 3;
	-ms-grid-column: 4;
}

#second-fencing-container > *:nth-child(29) {
	-ms-grid-row: 3;
	-ms-grid-column: 5;
}

#second-fencing-container > *:nth-child(30) {
	-ms-grid-row: 3;
	-ms-grid-column: 6;
}

#second-fencing-container > *:nth-child(31) {
	-ms-grid-row: 3;
	-ms-grid-column: 7;
}

#second-fencing-container > *:nth-child(32) {
	-ms-grid-row: 3;
	-ms-grid-column: 8;
}

#second-fencing-container > *:nth-child(33) {
	-ms-grid-row: 3;
	-ms-grid-column: 9;
}

#second-fencing-container > *:nth-child(34) {
	-ms-grid-row: 3;
	-ms-grid-column: 10;
}

#second-fencing-container > *:nth-child(35) {
	-ms-grid-row: 3;
	-ms-grid-column: 11;
}

#second-fencing-container > *:nth-child(36) {
	-ms-grid-row: 3;
	-ms-grid-column: 12;
}

#second-fencing-container > *:nth-child(37) {
	-ms-grid-row: 4;
	-ms-grid-column: 1;
}

#second-fencing-container > *:nth-child(38) {
	-ms-grid-row: 4;
	-ms-grid-column: 2;
}

#second-fencing-container > *:nth-child(39) {
	-ms-grid-row: 4;
	-ms-grid-column: 3;
}

#second-fencing-container > *:nth-child(40) {
	-ms-grid-row: 4;
	-ms-grid-column: 4;
}

#second-fencing-container > *:nth-child(41) {
	-ms-grid-row: 4;
	-ms-grid-column: 5;
}

#second-fencing-container > *:nth-child(42) {
	-ms-grid-row: 4;
	-ms-grid-column: 6;
}

#second-fencing-container > *:nth-child(43) {
	-ms-grid-row: 4;
	-ms-grid-column: 7;
}

#second-fencing-container > *:nth-child(44) {
	-ms-grid-row: 4;
	-ms-grid-column: 8;
}

#second-fencing-container > *:nth-child(45) {
	-ms-grid-row: 4;
	-ms-grid-column: 9;
}

#second-fencing-container > *:nth-child(46) {
	-ms-grid-row: 4;
	-ms-grid-column: 10;
}

#second-fencing-container > *:nth-child(47) {
	-ms-grid-row: 4;
	-ms-grid-column: 11;
}

#second-fencing-container > *:nth-child(48) {
	-ms-grid-row: 4;
	-ms-grid-column: 12;
}

#second-fencing-container > *:nth-child(49) {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
}

#second-fencing-container > *:nth-child(50) {
	-ms-grid-row: 5;
	-ms-grid-column: 2;
}

#second-fencing-container > *:nth-child(51) {
	-ms-grid-row: 5;
	-ms-grid-column: 3;
}

#second-fencing-container > *:nth-child(52) {
	-ms-grid-row: 5;
	-ms-grid-column: 4;
}

#second-fencing-container > *:nth-child(53) {
	-ms-grid-row: 5;
	-ms-grid-column: 5;
}

#second-fencing-container > *:nth-child(54) {
	-ms-grid-row: 5;
	-ms-grid-column: 6;
}

#second-fencing-container > *:nth-child(55) {
	-ms-grid-row: 5;
	-ms-grid-column: 7;
}

#second-fencing-container > *:nth-child(56) {
	-ms-grid-row: 5;
	-ms-grid-column: 8;
}

#second-fencing-container > *:nth-child(57) {
	-ms-grid-row: 5;
	-ms-grid-column: 9;
}

#second-fencing-container > *:nth-child(58) {
	-ms-grid-row: 5;
	-ms-grid-column: 10;
}

#second-fencing-container > *:nth-child(59) {
	-ms-grid-row: 5;
	-ms-grid-column: 11;
}

#second-fencing-container > *:nth-child(60) {
	-ms-grid-row: 5;
	-ms-grid-column: 12;
}

#second-fencing-container::before {
    content: url(../images/green-plant.png);
    position: absolute;
    -webkit-transform: rotate(-20deg) scale(.6);
        -ms-transform: rotate(-20deg) scale(.6);
            transform: rotate(-20deg) scale(.6);
    
    left: 30px;
}

#fenc-firsthtwo {
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-column: 3 / 6;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / 4;
}

#fenc-first-par {
    -ms-grid-column: 7;
    -ms-grid-column-span: 4;
    grid-column: 7 / 11;
    -ms-grid-row: 2;
    -ms-grid-row-span: 2;
    grid-row: 2 / 4;
}

#fenc-first-par p {
    font-size: 1.4rem;
}

.colorfull-p {
    color:var(--blue);
    font-weight: bold;
    font-size: 2rem;
    border:2px solid var(--blue);
    padding: 4px;
    border-radius: 4px;
}

#fenc-secondhtwo {
    -ms-grid-column: 3;
    -ms-grid-column-span: 8;
    grid-column: 3 / 11;
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    grid-row: 4 / 5;
    text-align: center;
}

#fenc-divs {
    -ms-grid-column: 2;
    -ms-grid-column-span: 10;
    grid-column: 2 / 12;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / 6;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2vw 1fr 2vw 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2vw;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    width: 90%;
    height: 25vw;
    margin: 0 auto;
    margin-top: -2vw;
    z-index: 2;
   
    
}

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

#fenc-divs > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
   
    
}

#fenc-divs > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
   
    
}

.fenc-divs {
    background-color: #fff;
    color: var(--main-color);
    padding: 1vw;
    -webkit-box-shadow: 5px 5px 5px #ad9d9d;
            box-shadow: 5px 5px 5px #ad9d9d;
    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-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-radius: 5px;
}

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

.fenc-divs h3 {
    line-height: 4rem;
}

#rounded-insert {
    min-height: 15vw;
    background-color: var(--main-color);
    margin-top: -12vw;
    width: 100%;
	padding-bottom: 2vw;
   	-webkit-clip-path: ellipse(75% 50% at 50% 50%);
   	        clip-path: ellipse(75% 50% at 50% 50%);
}


#spacer2 {
    margin: 0 auto;
    margin-top: 15vw;
    margin-bottom: 6vw;
    min-height: 6vw;
    background-color: var(--off-white);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4vw 1fr;
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    grid-gap: 4vw;
    width: 80vw;
    color: var(--main-color);
}


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


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

#spacer2 h2 {
    text-align: right;
    margin-right: 15vw;
}

#spacer2 p {
    padding-right: 4vw;
    font-size: 1.4rem;
}

#rect {
    height: 8vw;
    width: 100vw;
    background-color: var(--main-color);
    margin-bottom: -6vw;
}

#currency-cue {
    display: -ms-grid;
    display: grid;
     -ms-grid-columns: 1fr 4vw 1fr;
     grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    grid-gap: 4vw;
    width: 100vw;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 60vh;
    background-color: var(--main-color);
    -webkit-clip-path: ellipse(75% 50% at 50% 50%);
            clip-path: ellipse(75% 50% at 50% 50%);
    position: relative;
    
}

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

#currency-cue > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
    
}

#currency-cue::before {
    content: url(../images/green-plant.png);
    position: absolute;
    -webkit-transform: rotate(20deg) scale(.6);
        -ms-transform: rotate(20deg) scale(.6);
            transform: rotate(20deg) scale(.6);
    right: 5vw;
    top: -2vw;
}

#currency-cue p {
    padding-right: 15vw;
    color: #fff;
    font-size: 1.4rem;
}

#threedimg {
     
    position: relative;
    width: 300px;
    height: 300px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform: translateX(150%);
        -ms-transform: translateX(150%);
            transform: translateX(150%);
}

#threedimg span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(/images/pineapple-and-juice.png);
background-size: cover;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
z-index: calc(1 + var(--i));
-webkit-transform: rotate(-30deg) skew(25deg) translateX(calc(1.5px * var(--i))) translateY(calc(-1.5px * var(--i)));
    -ms-transform: rotate(-30deg) skew(25deg) translateX(calc(1.5px * var(--i))) translateY(calc(-1.5px * var(--i)));
        transform: rotate(-30deg) skew(25deg) translateX(calc(1.5px * var(--i))) translateY(calc(-1.5px * var(--i)));
-webkit-box-shadow: -5px 5px 0 rgba(0,0,0,0.05);
        box-shadow: -5px 5px 0 rgba(0,0,0,0.05);
}

    
#threedimg:hover span:last-child {
-webkit-box-shadow: -50px 50px 0 rgba(0,0,0, 0.5);
        box-shadow: -50px 50px 0 rgba(0,0,0, 0.5);

}

#list-of-services {
    margin: 0 auto;
    margin-top: 6vw;
    width: 100vw;
    height: 30vw;
    background-color: var(--main-color);
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2vw 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-items: center;
    gap: 2vw;


}

#list-of-services > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;


}

#list-of-services > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;


}



.two-lists {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 3fr;
    grid-template-columns: 1fr 3fr;
    -ms-grid-rows: 3fr 1fr;
    grid-template-rows: 3fr 1fr;


}



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


}



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


}



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


}



.two-lists > *:nth-child(4) {
	-ms-grid-row: 2;
	-ms-grid-column: 2;


}

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

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

#list-one img, #list-two img {
    -ms-grid-column: 2;
    -ms-grid-column-span: 3;
    grid-column: 2 / 5;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
}

#list-one img {
    width: 10vw;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-grid-column-align: center;
        justify-self: center;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 4px #437797   ;
            box-shadow: 4px 4px 4px #437797   ;
}

#list-two img {
    width: 5vw;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    -ms-grid-column-align: center;
        justify-self: center;
    border-radius: 5px;
    -webkit-box-shadow: 4px 4px 4px #437797   ;
            box-shadow: 4px 4px 4px #437797   ;
}

#list-one h3, #list-two h3 {
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
    grid-column: 1 / 5;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2 / 3;
}

#list-of-services ul, h3 {
    list-style: none;
    font-size: 1.4rem;
    color: var(--main-color);
    line-height: 1.8rem;
    padding-left: 3vw;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

#list-of-services ul li {
    position: relative;

}

#list-of-services ul li::before {
    content: "";
    width: 20px;
    height: 10px;
    border-left: 3px solid var(--main-color);
    border-bottom: 3px solid var(--main-color);
    position: absolute;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    left: -2vw;
    top: 5px;
    padding-right: 10px;
}

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



.two-lists {
    background-color: #fff;
    width: 60%;
    
}

.two-lists .colorfull-h3 {
    color: var(--darker-green);
}


#list-of-cities {
    width: 100vw;
    height: 60vw;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4vw 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: 1fr 4vw 1fr 4vw 1fr 4vw 1fr 4vw 1fr 4vw 1fr 4vw 1fr;
    grid-template-rows: repeat(7, 1fr);
        grid-template-areas: "city-intro city-intro"
    "cities-one cities-two";

    gap: 4vw;
    background-color: var(--main-color);
    margin-top: 1vw;

}

#locality-intro {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-columns: 1 / 3;
    grid-template-columns: 1 / 3;
    -ms-grid-rows: 1 / 4;
    grid-template-rows: 1 / 4;
    grid-area: city-intro;
    min-height: 30vw;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4vw 2fr;
    grid-template-columns: 1fr 2fr;
    gap: 4vw;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-items: center;
    background-color: var(--off-white);
    

}

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

}

#locality-intro > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
    

}

#locality-intro > *:nth-child(3) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
    

}

#locality-intro > *:nth-child(4) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
    

}

#locality-intro > *:nth-child(5) {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
    

}

#locality-intro > *:nth-child(6) {
	-ms-grid-row: 5;
	-ms-grid-column: 3;
    

}

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

}

#locality-intro > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
    

}

#locality-intro > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
    

}

#locality-intro > *:nth-child(4) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
    

}

#locality-intro > *:nth-child(5) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
    

}

#locality-intro > *:nth-child(6) {
	-ms-grid-row: 3;
	-ms-grid-column: 5;
    

}

#locality-intro > *:nth-child(7) {
	-ms-grid-row: 5;
	-ms-grid-column: 1;
    

}

#locality-intro > *:nth-child(8) {
	-ms-grid-row: 5;
	-ms-grid-column: 3;
    

}

#locality-intro > *:nth-child(9) {
	-ms-grid-row: 5;
	-ms-grid-column: 5;
    

}

#locality-intro #intro-inner-one {
    -ms-grid-columns: 1 / span 1;
    grid-template-columns: 1 / span 1;
    -ms-grid-rows: 1 / span 1;
    grid-template-rows: 1 / span 1;
    padding-left: 10vw;
}

#locality-intro #intro-inner-one > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}

#locality-intro #intro-inner-one > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}

#locality-intro #intro-inner-one > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}

#locality-intro #intro-inner-one > *:nth-child(4) {
	-ms-grid-row: 1;
	-ms-grid-column: 4;
}

#locality-intro #intro-inner-one > *:nth-child(5) {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
}

#locality-intro #intro-inner-one > *:nth-child(6) {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
}

#locality-intro #intro-inner-one > *:nth-child(7) {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
}

#locality-intro #intro-inner-one > *:nth-child(8) {
	-ms-grid-row: 2;
	-ms-grid-column: 4;
}

#locality-intro #intro-inner-one > *:nth-child(9) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#locality-intro #intro-inner-one > *:nth-child(10) {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
}

#locality-intro #intro-inner-one > *:nth-child(11) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

#locality-intro #intro-inner-one > *:nth-child(12) {
	-ms-grid-row: 3;
	-ms-grid-column: 4;
}

#locality-intro #intro-inner-one > *:nth-child(13) {
	-ms-grid-row: 4;
	-ms-grid-column: 1;
}

#locality-intro #intro-inner-one > *:nth-child(14) {
	-ms-grid-row: 4;
	-ms-grid-column: 2;
}

#locality-intro #intro-inner-one > *:nth-child(15) {
	-ms-grid-row: 4;
	-ms-grid-column: 3;
}

#locality-intro #intro-inner-one > *:nth-child(16) {
	-ms-grid-row: 4;
	-ms-grid-column: 4;
}

#locality-intro h2 {
    margin-bottom: 1vw;
}

#locality-intro ul {

}

#locality-intro ul li {
    
    list-style: none;
    line-height: 1.5rem;
}

#intro-inner-two {
    -ms-grid-columns: 2 / span 2;
    grid-template-columns: 2 / span 2;
    -ms-grid-rows: 1 / span 1;
    grid-template-rows: 1 / span 1;
}

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

#intro-inner-two > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}

#intro-inner-two > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}

#intro-inner-two > *:nth-child(4) {
	-ms-grid-row: 1;
	-ms-grid-column: 4;
}

#intro-inner-two > *:nth-child(5) {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
}

#intro-inner-two > *:nth-child(6) {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
}

#intro-inner-two > *:nth-child(7) {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
}

#intro-inner-two > *:nth-child(8) {
	-ms-grid-row: 2;
	-ms-grid-column: 4;
}

#intro-inner-two > *:nth-child(9) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#intro-inner-two > *:nth-child(10) {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
}

#intro-inner-two > *:nth-child(11) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

#intro-inner-two > *:nth-child(12) {
	-ms-grid-row: 3;
	-ms-grid-column: 4;
}

#intro-inner-two > *:nth-child(13) {
	-ms-grid-row: 4;
	-ms-grid-column: 1;
}

#intro-inner-two > *:nth-child(14) {
	-ms-grid-row: 4;
	-ms-grid-column: 2;
}

#intro-inner-two > *:nth-child(15) {
	-ms-grid-row: 4;
	-ms-grid-column: 3;
}

#intro-inner-two > *:nth-child(16) {
	-ms-grid-row: 4;
	-ms-grid-column: 4;
}

#intro-inner-two img {
    border-radius: 10px;
}

#cities-one {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-columns: 1 / 2;
    grid-template-columns: 1 / 2;
    -ms-grid-rows: 5 / 6;
    grid-template-rows: 5 / 6;
    grid-area: cities-one;
    background-color: #fff;
    margin-left: 4vw;
    border-radius: 5px;
}

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

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

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

#cities-one > *:nth-child(4) {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
}

#cities-one > *:nth-child(5) {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
}

#cities-one > *:nth-child(6) {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
}

#cities-one > *:nth-child(7) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#cities-one > *:nth-child(8) {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
}

#cities-one > *:nth-child(9) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

#cities-two {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-columns: 2 / 3;
    grid-template-columns: 2 / 3;
    -ms-grid-rows: 5 / 6;
    grid-template-rows: 5 / 6;
    grid-area: cities-two;
    background-color: #fff;
    margin-right: 4vw;
}

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

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

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

#cities-two > *:nth-child(4) {
	-ms-grid-row: 2;
	-ms-grid-column: 1;
}

#cities-two > *:nth-child(5) {
	-ms-grid-row: 2;
	-ms-grid-column: 2;
}

#cities-two > *:nth-child(6) {
	-ms-grid-row: 2;
	-ms-grid-column: 3;
}

#cities-two > *:nth-child(7) {
	-ms-grid-row: 3;
	-ms-grid-column: 1;
}

#cities-two > *:nth-child(8) {
	-ms-grid-row: 3;
	-ms-grid-column: 2;
}

#cities-two > *:nth-child(9) {
	-ms-grid-row: 3;
	-ms-grid-column: 3;
}

#cities-one, #cities-two {
    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;
}

#cities-one a, #cities-two a {
    color: var(--main-color);
}

#cities-one ul li, #cities-two ul li {
    list-style: none;
    line-height: 2rem;
    font-size: 1.5rem;
    font-family: ;
}

#cust-divs {
    -ms-grid-column: 2;
    -ms-grid-column-span: 10;
    grid-column: 2 / 12;
    -ms-grid-row: 5;
    -ms-grid-row-span: 1;
    grid-row: 5 / 6;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2vw 1fr 2vw 1fr;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2vw;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
    width: 90%;
    height: 25vw;
    margin: 0 auto;
    margin-top: -6vw;
    z-index: 2;
    
    
}

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

#cust-divs > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
    
    
}

#cust-divs > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 5;
    
    
}

.fenc-divs {
    position: relative;
    font-size: 1.3rem;
}

#cust-divs .cust-name {
    position: absolute;
    bottom: 2vw;
    right: 3vw;
    text-align: right;
    padding-top: 5vw;

}


#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: 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: 15vw;
    background-color: #000;
    color: #fff;

}

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

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

#footer a {
    color: #fff;
}