body {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
overflow-x: hidden;	
position: relative;
font-family: "Poppins", sans-serif;
}

::-webkit-scrollbar {
	width: 0;
	
}


body p {

	padding: 1vw;

}



body > h1 {
	display: flex;
	justify-content: center;
	
}

.smltitle {
    font-size: medium;
    color: #F00;

}

.titlemain {
    font-size: x-large;
    color: rgb(38, 42, 44);
    font-family: sans-serif;
}

.pcontent {
    font-size: 1vw;
    color: rgb(38, 42, 44);
    font-family: sans-serif;
}

.extinvite {
    font-size: smaller;
    color: rgb(38, 42, 44);  


}

.active-page {
	color: #929292;
	
}

#buildbreake {
    display: grid;
    grid-template: auto /  20% 30% 5% 25% 20%;
    grid-template-areas: ". caplefter . servicedesctwo .";

}

#caplefter {
    grid-area: caplefter;
    background-image: url(../images/electrician-tools-lg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: 25vw;


}

#servicedesctwo {
    grid-area: servicedesctwo;
    min-height: 30vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#servicedesctwo p {
    padding: 0;

}

#build-electrical {
    display: grid;
    grid-template: auto / auto 20% 20% 20% 20% auto;
    grid-template-areas: "tc tc tc tc tc tc"
    ". build1 build2 build3 build4 .";
    gap: 4%;
    min-height: 20vw;
    margin-bottom: 5vw;
    
}

.title-intro-text {
    grid-area: tc;
    text-align: center;
    font-size: 2vw;
    font-family: sans-serif;
}

.title-intro-text h1 a{
	text-decoration: none;
	color: #000;
}

#title-clue::before {
    content:"COMMERCIAL / RESIDENTIAL";
    position: absolute;
    margin-top: -15px;
    font-size: small;
    color: #F00;

}

#title-clue::after {
    content:"Los Angeles";
    position: absolute;
    margin-top: 5vw;
    margin-left: -8vw;
    font-size: .8vw;
    padding: 8px;
    color: #FFF;
    background-color: #1f3855;
}


.secparts {
    background-color: #1a2537;
    width: 100%;
    border-radius: 10px;

}

.secparts {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 10px 10px gray;
}

.centeredli {
    text-align: center;
    
    
}



.secparts ul li {
    list-style: none;
    color: #FFF;
    line-height: 2em;
    margin-left: -3vw;
    font-size: large;
}

.secparts ul li:nth-child(1) {
    color: #F00;
}    

.secparts ul li a {
    text-decoration: none;
    color: #FFF;
}

.secparts ul li a:hover {
    color: #F00;

}

#build1 {
    grid-area: build1;
    
}

#build2 {
    grid-area: build2;
    
}


#build3 {
    grid-area: build3;
    
}

#build4 {
    grid-area: build4;
    
}



.wrapper  {
	display: flex;
	flex-flow: column nowrap;
	}


.top-banner {
	width: 80%;
}

.top-banner ul {
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	
	


}

.top-banner ul li {
	list-style: none;
	font-size: 1.1rem;
	font-family: sans-serif;
	padding-left: 8px;
}

.top-banner ul li img {
	height: 1.5vw;
}

header {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	background-color: #000;
	width: 100%;
	z-index: 999;
	height: 3.5vw;
	box-sizing: border-box;
}


header img {
	height: 2.5vw;
	margin-left: 5vw;

}

header .logo {
display: flex;
align-items: center;
justify-items: center;
justify-content: center;
}

header ul li {
	display: flex;	   
	justify-content: space-around;
	margin-right: 4vw;
	align-items: center;
	
}

header ul img {
	
	//margin-right: 5vw;
	//margin-left: 5vw;
	//height: 2.5vw;
	
}

#top-container {
	display: none;   
	grid-template-columns: 40vw 60vw;    								
	grid-template-rows: 20vw 20vw;
	background-image:  url(../images/image-three-600.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	grid-template-areas: "logo nav"
						"intro ." ;
	margin-bottom: -1vw;              							
	box-shadow: 0 20px 25px rgba(0,0,0,0.6);
	
}



nav    {
		display:  grid;  
	grid-template-rows: 20vw 20vw;
	background:  url(../images/electrical-systems-integration.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
	grid-template-areas: "logo navo"
						"intro ." ;
	margin-bottom: -1vw;              							
	box-shadow: 0 20px 25px rgba(0,0,0,0.6);
		
	animation-name: navLinkFade;
	
	}

	

	
	

	.nav-links {
		display: flex;	   
		justify-content: space-evenly;
		margin-right: 2vw;
		
		
	}
	
	.nav-links a{
		color: #DDD;
		text-decoration: none;
		letter-spacing: 3px;
		font-weight: bold;
		font-size: 12px;
	}

	.nav-links li {
		list-style: none;
	
	}

	.nav-links .active-page a{
		color: #ff0000;
	}

	.sub-menu-1 {
		display: none;

	}


	header ul li a:visited{
		color: #0000FF;
		
		
	}


	header ul li a:hover {
		color: red;
		
		
	}

	header ul li a:active {
		color: #00FF92;
		
	}

	header ul li a:focus {
		color: #ff0000;
		
	}

	header ul li:hover .sub-menu-1 {
		display: block;
		position: absolute;
                background: #000;
                margin-top: 350px;
                margin-left: 5px;
				

	}
	
	header ul li:hover .sub-menu-1 ul {
		width: 10vw;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center; /*justify-items*/
		padding-right: 10px  ;
		margin-right: 20px;
		margin-top: -5px;
		
	}

	header ul li .sub-menu-1 a {
		
		padding: 8px;
		padding-left: 10px;
		padding-right: 10px;
		
	}
	
	
	header ul li .sub-menu-1 ul li:nth-child(1) {
		padding-top: 5px;
		margin-top: 10px;
	}

	header ul li .sub-menu-1 ul li:nth-child(10){
		padding-bottom: 5px;
		margin-bottom: 10px;
	}

	header ul li .sub-menu-1 ul li {
		font-family: sans-serif;
		text-transform: uppercase;
		
	}

	header ul li .sub-menu-1 ul li:hover {
		border: solid 1px #F00;

	}

	.burger {
		display: none;
		cursor: pointer;		
		grid-area: navo;
	}

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





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





.quote-cta {
	position: absolute;
}







.logo {
	display: grid;
	grid-area: logo;
	align-items: start;
	justify-items: left;
	margin-left: 20vw;
	margin-top: 5vw;
}


.logo img {
	
	margin-top: 0;
	margin-left: -12vw;
}


.logo p {
	justify-self: center;			 
	align-self: center;				
	color: red;
	font-size: 3rem;
}


#top-verb {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: -1vw;
	margin-top: 2vw;
	flex-direction: column;
	position: relative;
	
}

#top-verb h1 {
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-size: 3vw;
}

#top-verb h1::after {
	content:"Commercial and Residential";
	font-weight: bold;
	font-size: 1vw;
	font-family: Dosis, sans-serif;
	color: #F00;
	position: absolute;
	margin-left: -6vw;
	margin-top: -3vw;
}

#top-verb h1::before {
	content:"The Electrician you need, on call 24/7";
	font-weight: bold;
	font-size: 1vw;
	font-family: Dosis, sans-serif;
	color: #F00;
	position: absolute;
	margin-left: -4vw;
	margin-top: -2vw;
}

#top-verbs {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: -1vw;
	margin-top: 2vw;
	flex-direction: column;
	text-align: center;
	
}

#top-verbs h1 {
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-size: 3vw;
}

#topcall {
	display: none;
	
	}

#toptext {
	display: none;
}


.homepage-intro {
	width: 70%;
	font-size: 1.5vw;
	padding: 2vw;
	color: #fff;
	background-image: url(../images/concreto8.jpg);
	background-attachment: fixed;
	margin: 4vw auto;
	
}


.card {
		
		
		visibility: hidden;
		
		opacity: 0;
		-webkit-transition: 2000ms;
		-o-transition: 2000ms;
		transition: 2000ms;
		position: absolute;
	}
	
	.card.show {
		-webkit-transform: translateY(5vw);
		-ms-transform: translateY(5vw);
		transform: translateY(5vw);
		visibility: visible;
		opacity: 1;
	
	}

.circle {
		
		visibility: hidden;
		-webkit-transform: translateY(5vw);
		-ms-transform: translateY(5vw);
		transform: translateY(5vw);
		opacity: 0;
		-webkit-transition: 2000ms;
		-o-transition: 2000ms;
		transition: 2000ms;
		
		
	}
	
	.circle.show {
		visibility: visible;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	
	}

    .rightchild {
		
		
		visibility: hidden;
		-webkit-transform: translateY(25px);
		-ms-transform: translateY(25px);
		transform: translateY(25px);
		opacity: 0;
		-webkit-transition: 2000ms;
		-o-transition: 2000ms;
		transition: 2000ms;
		
	}
	
	.rightchild.show {
		
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		visibility: visible;
		opacity: 1;
	
	}

.leftchild {
		
		visibility: visible;
		-webkit-transform: translateY(-200px);
		-ms-transform: translateY(-200px);
		transform: translateY(-200px);
		opacity: 0;
		-webkit-transition: 2000ms;
		-o-transition: 2000ms;
		transition: 2000ms;
		
		
	}
	
	.leftchild.show {
		visibility: visible;
		
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
		
	}

	.pad {
		
		
		visibility: hidden;
		
		opacity: 0;
		-webkit-transition: 2000ms;
		-o-transition: 2000ms;
		transition: 2000ms;
		position: absolute;
	}
	
	.pad.show {
		
		visibility: visible;
		opacity: 1;
	
	}

	
	.act {
		
		
		-webkit-transform: translateY(100px) rotateY(-90deg);
		-ms-transform: translateY(100px) rotateY(-90deg);
		transform: translateY(100px) rotateY(-90deg);/* rotate(-720deg) scale(.1);*/
		visibility: visible;
		opacity: 0;
		-webkit-transition: 800ms;
		-o-transition: 800ms;
		transition: 800ms;
		
	}
	
	.act2 {
		
		-webkit-transform: translateY(210px);
		-ms-transform: translateY(210px);
		transform: translateY(210px);/* rotate(-720deg) scale(.1);*/
		visibility: visible;
		opacity: 0;
		-webkit-transition: 900ms;
		-o-transition: 900ms;
		transition: 900ms;
		
	}
	
	.act3{
		
		
		-webkit-transform: translateY(200px) rotateY(90deg);
		-ms-transform: translateY(200px) rotateY(90deg);
		transform: translateY(200px) rotateY(90deg);/* rotate(-720deg) scale(.1);*/
		visibility: visible;
		opacity: 0;
		-webkit-transition: 1000ms;
		-o-transition: 1000ms;
		transition: 1000ms;
	
	}
	
	.act.show {
		
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);/*rotate(0deg) scale(1);*/
		opacity: 1;
		
	}
	
	.act2.show {
		
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);/*rotate(0deg) scale(1);*/
		opacity: 1;
		
	}
	
	.act3.show {
		
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);/*rotate(0deg) scale(1);*/
		opacity: 1;
	
	}
	
	
	
	.move{
	
	-webkit-transform: translateX(-150px);
	-ms-transform: translateX(-150px);	
	transform: translateX(-150px);
	opacity: 0;
	-webkit-transition: 1000ms;
	-o-transition: 1000ms;
	transition: 1000ms;
		
	}
	
	.move.show {
		
		-webkit-transform: translate(0);
		-ms-transform: translate(0);
		transform: translate(0);
		opacity: 1;
	
	}
	

.accentcomm {
    color: #fff;
    font-size: medium;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    background-color: #1F3855;
    padding: 10px;
    border-radius: 3px;
    

}


.company-intro {
	grid-area: intro;
	align-self: start;
	justify-self: start;
	margin-left: 2vw;
	margin-top: -2vw;
}

.company-intro img {
	display: inline;


}

.company-intro a {
	text-decoration: none;
	
}

.company-intro p {
	color: #36a7ca;
	font-size: 4vw;
	font-weight: bolder;
	margin-left: 25vw;  
	background-color: #ff0000;
	margin-top: -5.6vw;
	font-family: Montserrat, courier, sans-serif;
	width: 4vw;
}


.company-intro p::before {
	content: " ";
	display: inline-block;  
	width: 23.5vw;
	height: 14.4vw;
	border: solid 0.02em red;
	position: absolute; 
	


}

.quote-request-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: space-around;
	margin-top: 4vw;
	
}

.quote-request-link  a:nth-child(1) {
	text-decoration: none;
	padding: 2vw;
	font-size: 2vw;
	background-color: #00446E;
	color: #fff;
	border-radius: 1vw;
	margin-bottom: 2vw;
}


.quote-request-link img {
	transform: scale(.5);
	
}

#comp-grid {
	display: grid;
	grid-template-columns: 5vw 70vw 5vw;
	grid-template-rows: auto;
	place-content: center;
	margin-bottom: -1vw;
	
}

#start-arrows {
	grid-column: 1/2;
	grid-row: 1/1;
	display: grid;
	height: 100%;  
	align-content: center;
	justify-content: flex-end;
	transform: scale(.5);
}

#comp-statement {
	grid-column: 2/3;
	grid-row: 1/1;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	background-color: rgba(18, 29, 49, .9);
	box-shadow: 0 15px 15px rgba(0,0,0,0.6);
	margin-bottom: 4vw;
	
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2vw;
	border-radius: 5px;
	height: fit-content;
	
}

#comp-statement h1 {
	font-family: Quicksand, Montserrat, courier, sans-serif;
	font-size: 1.5vw;
	text-align: center;
	color: #ffffff;

}


#comp-statement p {
	font-family: Quicksand, Montserrat, courier, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	padding-left: 2vw;
	padding-right: 2vw;
	font-size: 1vw;
}


#endline {
	font-family: Quicksand, Montserrat, courier, sans-serif;
	font-weight: bold;
	text-align: center;

}



#comp-statement p:nth-child(3) {
	text-transform: uppercase;
	color: #1a2537;
	font-size: 2rem;
}


#end-arrows {
	grid-column: 3/4;
	grid-row: 1/1;
	display: grid;
	height: 100%;
	align-content: center;
	transform: scale(.5);
}



.container {
	display: grid;
	display: -ms-grid;
	-ms-grid-rows: 20vw 20vw;
	grid-template-rows: 20vw;
	grid-template-columns: 10vw 10vw 10vw 10vw 10vw;
	gap: 4vw;
	height: 20vw;
	place-content: center;
	align-items: center;
	background-image: url(../images/concreto8.jpg);
	margin-top: 4vw;
	background-attachment: fixed;
}



.item {
		
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
        height: 15vw;
		background-color: rgba(32, 41, 58, 0.6);
		cursor: pointer;
}

.container .item p {
	padding: 10px;
	font-size: 1.3vw;
	font-family: Quicksand, Montserrat, courier, sans-serif;
	text-transform: uppercase;
	cursor: pointer;
}

.item img {
	cursor: pointer;
}

.container .item p a {
	cursor: pointer;
}

.container a {
		text-decoration: none;
		color: black;
		cursor: help;
		color: #fff;
}


.child-1  {
	display: flex;
	flex-flow: column wrap;
	
	
	
}

.child-1 img {
	height: 6vw;

}

.child-2 {
	display: flex;
	flex-flow: column wrap;  
	

}

.child-2 img {
	height: 6vw;

}


.child-3 {
	display: flex;
	flex-flow: column wrap;


}


.child-3 img {
	height: 5.5vw;
	margin-top: 10px;
}

.child-4 {
	display: flex;
	flex-flow: column wrap;


}
.child-4 img {
	height: 6vw;

}

.child-5 {
	display: flex;
	flex-flow: column wrap;


}
.child-5 img {
	height: 6vw;

}

#introverbiage {
	display: grid;
    grid-template-columns: 10% 40% 40% 10%;
    grid-template-areas: "introverbtop introverbtop introverbtop introverbtop"
    ". introv1l introv1r ."
    ". introv2l introv2r ."
    ". introverbbottom introverbbottom .";
	grid-gap: 2vw;
	
	width: 100%;
}

#introverbtop {
    grid-area: introverbtop;
    
}

#introverbtop h1 {
    color: rgb(32,41,58);
    text-transform: uppercase;
	text-align: center;
	font-family: Quicksand, Montserrat, courier, sans-serif;
    font-size: 2vw;
	padding-top: 2vw;
}

#introverbtop h1::before {
    content:"Los Angeles";
    position: absolute;
    margin-top: -1vw;
    font-size: 1vw;
    color: #F00;
    

}

#introverbtop h1::after {
    content:"CALIFORNIA";
    position: absolute;
    margin-top: 2vw;
    margin-left: -110px;
    font-size: 1vw;
    color: #F00;
    

}

#introverbpic1l {
    grid-area: introv1l;
    /* background-image: url(../images/office-with-telecom-integration.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: contain;
    min-height: 25vw; */
	place-self: center;
}

#introverb1r {
    grid-area: introv1r;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
}

#introverb1r p {
    color: #FFF;
    background-color: rgb(32, 41, 58);
    width: 90%;
    border-radius: 10px;
    box-shadow: 10px 10px 10px gray;
    font-size: 1.2em;
}

#introv1stp::before {
    content:"REPEAT BUSINESS EARNED, NOT GRANTED";
    position: absolute;
    margin-top: -3vw;
    font-size: 1vw;
    color: #F00;
    font-weight: bold;
}

#introv2ndp::before {
    content:"PERFORMANCE BASED CONTRACTING";
    position: absolute;
    margin-top: -3vw;
    font-size: 1vw;
    color: #F00;
    font-weight: bold;
}

#introverb3rdp::before {
    content:"PROACTIVE MAINTENANCE";
    position: absolute;
    margin-top: -3vw;
    font-size: 1vw;
    color: #F00;
    font-weight: bold;
}

#introverb4thp::before {
    content:"RESPONSIVE BUSINESS ETHICS";
    position: absolute;
    margin-top: -3vw;
    font-size: 1vw;
    color: #F00;
    font-weight: bold;
}

#introverbpic2r {
    grid-area: introv2r;
    /* background-image: url(../images/electrical-lighting-control-relays.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: contain;
    min-height: 25vw; */
	place-self: center;
}

#introverb2l {
    grid-area: introv2l;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2vw;
}

#introverb2l p {
    color: #FFF;
    background-color: rgb(32, 41, 58);
    width: 90%;
    border-radius: 10px;
    box-shadow: 10px 10px 10px gray;
	font-size: 1.2em;
}

#introverbbottom {
    grid-area: introverbbottom;
   /* background-color: rgb(32,41,58);
    border-radius: 10px;
    box-shadow: 10px 10px 10px gray; */
}

#introverbbottom p {
    font-size: 1.8vw;
    color: #2E79F4;
    font-family: Quicksand, Montserrat, courier, sans-serif;
    text-align: center;
}


#verbcycle {
	display: grid;
	grid-template-columns: 10% 40% 40% 10%;
	width: 100%;
	grid-template-areas: ". buildstate buildcy .";
	margin: auto;
	margin-top: 4vw;
	position: relative;
	background-color: #ffffff;
	border-top: solid 2px #8CE4E5;
	border-bottom: solid 2px #8CE4E5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%234c7deb' fill-opacity='0.05' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

#elect-verbiage {
	margin-top: 5vw;
	margin-bottom: 5vw;
	background-image: url(../images/concreto8.jpg);
	background-size: 100% 150%;
	background-size: cover;
	background-attachment: fixed;
	background-color: rgba(255, 255, 255, 0.6);
	
}

#electrician-verbiage {
	display: grid;
	grid-template-areas:'epl eir'
						'eil epr';
	width: 90%;
	margin: 0 auto;
	gap: 2%;
	place-content: center;
	padding: 5%;
}

#epl {
	grid-area: epl;
	background-color: rgba(32, 41, 58, 0.6);
	color: #FFFFFF;
	border-radius: 2vw;
	padding: 2vw;

	place-self: center;
}

#eir {
	grid-area: eir;
	place-self: center;
}

#epr {
	grid-area: epr;
	background-color: rgba(32, 41, 58, 0.6);
	color: #FFFFFF;
	border-radius: 2vw;
	padding: 2vw;
	place-self: center;
}

#eil {
	grid-area: eil;
	place-self: center;
}

#electrician-verbiage img  {
	width: 80%;
	
}

.elect-p  {
	font-size: 1.2em;
	
}

#buildstatement {
	grid-area: buildstate;
	display: grid;
	align-content: center;
    
}

#buildstatement h1 {
	text-transform: uppercase;
	text-align: center;
	font-family: Quicksand, Montserrat, courier, sans-serif;
    font-size: 2vw;
	color: #2E79F4;
	
}





#buildcycle {
	grid-area: buildcy;
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-template-rows: 8vw 8vw 1vw 5vw;
	grid-template-areas: ". bc1 ." "bc6 bc2 bc3" ". bc2 ." "bc5 bc2 bc4";
	margin: auto;
}

#buildcycle h1 {
	text-transform: uppercase;
	text-align: center;
	font-family: Quicksand, Montserrat, courier, sans-serif;
    font-size: 1.5vw;
	color: #FF0000;
}

#bc1 {
	grid-area: bc1;
	display: grid;
	align-content: end;
}

#bc2 {
	grid-area: bc2;
	background-image: url(../images/building-lifecycle-stages.png);
	background-size: contain;
	background-repeat: no-repeat;
}

#bc3 {
	grid-area: bc3;
	display: grid;
	align-content: center;
	justify-content: left;
}

#bc4 {
	grid-area: bc4;
	display: grid;
	justify-content: left;
	margin-left: -2vw;
}

#bc5 {
	grid-area: bc5;
	display: grid;
	justify-content: right;
	margin-right: -3vw;
}

#bc6 {
	grid-area: bc6;
	display: grid;
	align-content: center;
	justify-content: right;
	
}


#intermedio {							
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;   
	background:  url(../images/metal-blue2.png);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2vw auto;
	width: 94%;
	min-height: 35vw;
	margin-top: 3vw;
	align-content: center;   
	margin-bottom: 3vw;
	box-shadow: 0 20px 25px rgba(0,0,0,0.6);
	border-radius: 20px;
}


.center-contents  {
	display: grid;   

}

#intermedio h1  {			
	font-size: 1.5vw;
	color: #fff;
	text-align: right;
	margin-right: 2vw;
	margin-top: 3vw;
}

#intermedio p {				

	color: #fff;
	text-align: right;
	font-size: 1.2vw;
}

#intermedio img {				
	width: 15vw;
	align-self: center;
	margin-left: 5vw;
}


#re-review {
	display: grid;
	grid-template-columns: 25% 25% 25%;
	grid-template-rows: 35vw;
	align-items: center;   
	place-content: center;  
	gap: 4vw;
	height: 45vw;
	
	
	background-image: url(../images/whitewallstripe6.jpg);
	background-size: cover;
	background-repeat: norepeat;
}

.re-review  {
	background-color: rgba(32, 41, 58, 0.6);
	border-radius: .5vw;
	height: 42vw;
	display: flex;					
	align-items: center;			
	justify-content: center;		
	position: relative;				
	flex-direction: column;			
	box-shadow: 0 20px 25px rgba(0,0,0,0.6);

}

.re-review  p  {
	color: #fff;
	font-size: 1vw;

}




blockquote p::before {
	content: open-quote;
	font-weight: bold;
	font-size: 5vw;
	color: rgb(244, 185, 57);
	position: absolute;
	margin-left: -2.5vw;
	margin-top: -1.5vw;

}

blockquote p::after {
	content: close-quote;
	font-weight: bold;
	font-size: 5vw;
	color: rgb(244, 185, 57);
	position: absolute;
	margin-left: 1vw;
	

}

.client-one   span {
	
	color: #ffffff;
}



.client-one {
	padding-top: 3.1vw;   
}



#re-retwo {


}

.client-two {
	padding-top: 9vw;    

}

#re-rethree {
	
}

.client-three {



}

.re-client {
	font-size: 1vw;
	text-align: right;
	margin-top: -4vw;       
	
}






#client_base {
	
	display: grid;
	grid-template-columns: repeat(6, 10vw) ;    								
	grid-template-rows: 10vw;
	gap: 1vw 1vw;
	align-content: center;
	justify-content: space-around;
	background-size: 100% 100%;
	width: 100%;
	height: 5vw;
	background-color: #FFFFFF;
	background-image: url(../images/fff.png);
}


#client1 {
	background-image: url(../images/ref1smlxprnt.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client2 {
	background-image: url(../images/ref2smlxprnt.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client3 {
	background-image: url(../images/ref3smlxprnt.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client4 {
	background-image: url(../images/ref4smlxprnt.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client5 {
	background-image: url(../images/ref14smlxprnt.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client6 {
	background-image: url(../images/ref10smlxprnt.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}






#capable {
	
	display: none;
	grid-template-columns: 35% 40% 20%;    								
	grid-template-rows: auto;
	gap: 1vw 1vw;
	justify-content: space-around;
	background-size: 100% 100%;
	width: 100%;
	margin-bottom: 1vw;             							
	background-color: #FFFFFF;
	background-image: url(../images/fff.png);
	margin-top: -1vw;
    
}

#capleft {
	background-image: url(../images/electrician-tools-lg.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: 30vw;
    
}



#capcenter  {
	display: grid;
	grid-template-columns: 20.5vw 18vw;    								
	grid-template-rows: 1vw 6vw 6vw 6vw 6vw 1vw;
	gap: 1vw 1vw;
	align-content: space-around;
	
	background-size: 45vw;
	background-position: center;
	background-repeat: no-repeat;
	grid-template-areas: ". ."
						" svcdesc data"
						"svcdesc video"
						"svcdesc audio"
						"svcdesc electrical"
						". .";
	font-family: sans-serif;
	color: #048ee1;
	background-color: #FFFFFF;
	background-image: url(../images/fff.png);
}


#servicedesc {
	grid-area: svcdesc;
	
}


#capcenter h1  {
	color: #048EE1;
	font-size: 1.8vw;
	font-stretch: extra-condensed;
}

#servicedesc h1 {
	font-size: 1.8vw;
	text-transform: uppercase;
}

#servicedesc p {
	font-size: .8vw;

}


#shorttext  {

	letter-spacing: -5px;

}

#datatitle {
	grid-area: datatit;
	align-self: end;

}

#data {
	grid-area: data;
	background-image: url(../images/datapic.png);
	border-radius: 0 50%;
	align-self: start;
	background-repeat: no-repeat;
	background-size: cover;
}

#videotitle {
	grid-area: videotit;
	align-self: end;
}



#video {
	grid-area: video;
	background-image: url(../images/videopic.png);
	border-radius: 50% 0;
	align-self: start;
	background-repeat: no-repeat;
	background-size: cover;
}


#capserv {
	grid-area: capserv;
	

}

#audiotitle {
	grid-area: audiotit;
	align-self: end;
}

#audio {
	grid-area: audio;
	background-image: url(../images/audiopic2.png);
	border-radius: 0 50%;
	align-self: start;
	background-repeat: no-repeat;
	background-size: cover;
}

#electricaltitle {
	grid-area: electricaltit;
	align-self: end;

}


#electrical {
	grid-area: electrical;
	background-image: url(../images/electricalpic.png);
	border-radius: 50% 0;
	align-self: start;
	background-repeat: no-repeat;
	background-size: cover;
}



#capcenter ul {
	list-style: none;
}

#capcenter ul li{
	margin-left: 1vw;
	color: #ffffff;
	text-transform: capitalize;
}

.pointsix {
	font-size: .7vw;
	

}

.pointsix ul li {
	list-style: none;
	

}

.pointsix a {
	text-decoration: none;
	color: #FFF;
	
}


.blackfont {
	color: initial;

}



#capright {
	background-image: url(../images/phonenow5.png);
	background-size: 20vw;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	
}



#client_base_dos {
	
	display: grid;
	grid-template-columns: repeat(6, 10vw) ;    								
	grid-template-rows: 10vw;
	gap: 1vw 1vw;
	align-content: center;
	justify-content: space-around;
	background-size: 100% 100%;
	width: 100%;
	height: 6vw;
	background-color: #FFFFFF;

}


#client7 {
	background-image: url(../images/ref9sml.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client8 {
	background-image: url(../images/ref6sml.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client9 {
	background-image: url(../images/ref11sml.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client10 {
	background-image: url(../images/ref12sml.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client11 {
	background-image: url(../images/ref17sml.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#client12 {
	background-image: url(../images/ref15sml.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}




#metallic1 {
	display: grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: 10vw 20vw 6vw;
	place-content: space-around;
	grid-template-areas:
		"top top"
		"left right"
		"bottom bottom";
	background-color: #505050;
	background-image: url(../images/whitewallstripe7.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	
	
}


#metallic-top  {
	grid-area: top;
	

}

#metallic-left  {
	grid-area: left; 
	display: grid;
	grid-template-columns: 10vw 10vw 10vw 10vw;
	grid-template-rows: 2vw 8vw 8vw;
	gap: 2vw 2vw;
	grid-template-areas:
		"title title title title"
		"comm ent inst gov"
		"ind heal host ret";
	
	place-content: center;
}


.left-bckgnd {
	background-color: rgba(32, 41, 58, 0.6);
	borde-radius: 5px;
}

#title {
	grid-area: title;

}

#metallic-left h1 {
	text-transform: uppercase;
	font-size: 1.8vw;
	font-family: sans-serif;
	text-align: center;
	color: rgba(32, 41, 58, 0.6);
	line-height: 1.5vw;
	font-stretch: ultra-condensed;
}

#metallic-left p {
	font-family: sans-serif;
	text-align: center;
	color: #f0f8ff;
	font-size: 1.5vw;
	font-stretch: extra-condensed;
}


#commercial {
	grid-area: comm;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "commicon" "commtext";
	justify-items: center;
}

#commicon {
	grid-area: commicon;

}

#commicon img {
	width: 2.5vw;
	margin-top: 2.5vw;

}

#commtext {
	grid-area: commtext;
	margin-bottom: 1.5vw;

}



#enterprise {
	grid-area: ent;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "entericon" "entertext";
	justify-items: center;
}

#entericon {
	grid-area: entericon;

}

#entericon img {
	width: 2vw;
	margin-top: 2.5vw;

}

#entertext {
	grid-area: entertext;
	margin-bottom: 1.5vw;

}



#institutional {
	grid-area: inst;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "insticon" "insttext";
	justify-items: center;
}

#insticon {
	grid-area: insticon;

}

#insticon img {
	width: 2vw;
	margin-top: 2.5vw;

}

#insttext {
	grid-area: insttext;
	margin-bottom: 1.5vw;

}





#governmental {
	grid-area: gov;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "govicon" "govtext";
	justify-items: center;
}

#govicon {
	grid-area: govicon;

}

#govicon img {
	width: 3vw;
	margin-top: 2vw;

}

#govtext {
	grid-area: govtext;
	margin-bottom: 1.5vw;

}





#industrial {
	grid-area: ind;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "indicon" "indtext";
	justify-items: center;
}

#indicon {
	grid-area: indicon;

}

#indicon img {
	width: 3vw;
	margin-top: 1.9vw;

}

#indtext {
	grid-area: indtext;
	margin-bottom: 1.5vw;

}



#healthcare {
	grid-area: heal;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "healicon" "healtext";
	justify-items: center;
}

#healicon {
	grid-area: healicon;

}

#healicon img {
	width: 2.5vw;
	margin-top: 2.5vw;

}

#healtext {
	grid-area: healtext;
	margin-bottom: 1.5vw;

}




#hospitality {
	grid-area: host;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "hosticon" "hosttext";
	justify-items: center;
}

#hosticon {
	grid-area: hosticon;

}

#hosticon img {
	width: 2.6vw;
	margin-top: 2.4vw;

}

#hosttext {
	grid-area: hosttext;
	margin-bottom: 1.5vw;

}



#retail {
	grid-area: ret;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "reticon" "rettext";
	justify-items: center;
}

#reticon {
	grid-area: reticon;

}

#reticon img {
	width: 2.5vw;
	margin-top: 2.2vw;

}

#rettext {
	grid-area: rettext;
	margin-bottom: 1.5vw;

}



#finance{
	grid-area: fin;
	display: none;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "finicon" "fintext";
	justify-items: center;
}

#finicon {
	grid-area: finicon;

}

#finicon img {
	width: 2.5vw;
	margin-top: 2.2vw;

}

#fintext {
	grid-area: fintext;
	margin-bottom: 1.5vw;

}





#metallic-right {
	grid-area: right;
	display: flex;
	justify-content: center;
	align-content: center;

}

#metallic-right img {
	width: 30vw;

}

#metallic-bottom {
	grid-area: bottom;
	


}



#portfolio {
	display: grid;
	grid-template-columns: repeat(6, 1fr) ;    								
	grid-template-rows: 10vw 10vw;
	gap: 1vw 1vw;
	align-items: space-around;
	justify-content: space-around;
	background:  url(../images/metal-cut2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	
	margin-top: 20vw;
	margin-bottom: 3vw;              							
	
}

#port1 {
	background-image: url(../images/ref1sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	
	
}

#port2 {
	background-image: url(../images/ref2sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
	
}

#port3 {
	background-image: url(../images/ref15sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port4 {
	background-image: url(../images/ref4sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}


#port5 {
	background-image: url(../images/ref5sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port6 {
	background-image: url(../images/ref6sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port7 {
	background-image: url(../images/ref7sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port8 {
	background-image: url(../images/ref14sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port9 {
	background-image: url(../images/ref9sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port10 {
	background-image: url(../images/ref10sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port11 {
	background-image: url(../images/ref13sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port12 {
	background-image: url(../images/ref14sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port13 {
	background-image: url(../images/ref11sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port14 {
	background-image: url(../images/ref8sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port15 {
	background-image: url(../images/ref3sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

#port16 {
	background-image: url(../images/ref1sml.png);
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}


#inter-laced {
	display: grid;
	grid-template-columns: 40% 40%;
	grid-template-rows: 35vw;
	align-items: center;  
	justify-content: center;  
	gap: 4vw;
	margin-bottom: 4vw;
	 
	margin-left: auto;
	margin-right: auto;
}

.laced-one {


}

.leftlace {
	background-color: #2e79f4;
	clip-path: polygon(0 0, 100% 0, 100% 42%, 70% 42%, 70% 75%, 100% 75%, 100% 100%, 0 100%);
	height: 35vw;
	margin-right: -20vw;
}

.rightlace {
	margin-left: 2vw;

}

#lastshow {							
	display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: auto;   
	background:  url(../images/hdalacarte_composite_new.png);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2vw auto;
	width: 94vw;
	min-height: 34.5vw;
	margin-top: 2.5vw;
	align-content: center;  
	margin-bottom: 2.5vw;
	box-shadow: 0 20px 25px rgba(0,0,0,0.6);
	border-radius: 20px;
	background-color: #FFFFFF;
}


.center-contents  {
	display: grid;    

}

#lastshow h1  {			
	font-size: 1.5vw;
	color: #fff;
	text-align: right;
	margin-right: 2vw;
	margin-top: 5rem;
}

#lastshow p {				

	color: #fff;
	text-align: right;
	font-size: 1.2vw;
}

#lastshow img {				
	width: 15vw;
	height: 15vw;
	align-self: center;
	margin-left: 5vw;
}







#redpiece  {
		display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: 15vw;   
	background:  url(../images/red-bar.png);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2vw 0 auto;
	width: 100%;
	min-height: 15vw;

}



#whitepiece  {
		display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: 15vw;   
	background: color: #ffffff;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2vw 0 auto;
	width: 100%;
	min-height: 15vw;

}


#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: grid;
	grid-template-columns: 1fr;
	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;
	transition: all 0.5s ease-in-out;
}

.faq-items {
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: 1fr 1fr;
	width: 100%;
	height: 60px; /* need to adjust this to fit the text */
	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;
	transition: all 3s ease-in-out;

}



.faq-question {
	display: grid;
	align-items: start;
	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 {
	justify-self: end;
	grid-area: expandButton;
	display: grid;
	/* justify-content: end; */
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	/* margin-right: 10px; */
	box-shadow: none;
	background-color: #ffffff;
	color: #2be40e;
	font-size: 1.5rem;
}



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



#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: grid;
	grid-template-columns: 10% 15% 45% 10% 10%;
	grid-template-rows: 2ovw 5vw 5vw;   
	background:  url(../images/footer2.png);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 4vw 0 auto;
	width: 100%;
	clip-path: ellipse(180% 100% at 90% 100%);
	min-height: 35vw;
	align-content: center;  
	grid-template-areas: "me me linksto social social"
						". gesture gesture gesture ." ". . copyright . .";
	place-content: center;
	
}





#me {
	grid-area: me;
	display: flex;
	
	align-items: center;
	justify-content: center;
	
}


#me p {
	color: #ffffff;
	font-size: 1.5vw;
	font-family: sans-serif ;

}


#me img {
	display: block;
	width: 6vw;
	height: 8vw;
	margin-left: -2vw;

}

#scrolltop:hover {
	transform: translateY(-15px);
	
}

#me img #scrolltop {
	display: none;
	
}

#links  {
	grid-area: linksto;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 12vw 6vw 4vw;
	grid-template-areas: "linkstop"
						 "navbot"
						 "gesture";

}


#linkstop {
	grid-area: linkstop;

}

#navbot {
	grid-area: navbot;
	place-self: center;
	margin-left: -6vw;
}

#navbot ul li {
	display: inline;
	margin-left: 20px;				
	color: #ffffff;
	font-size: 1vw

}

#gesture 	{
	grid-area: gesture;
	
	
}

#gesture p {
	color: #FFF;
	font-size: 1.2vw;
	text-align: center;
	font-family: sans-serif;
	line-height: 1.6vw;
}




#linkstop  {
	display: flex;
	flex-direction: column;
	color: #ffffff;
	
}


#linkstop p {
	font-size: 1.2vw;


}

#linkstop h1 {
	text-align: center;
	font-family: sans-serif;
	font-size: 2.8vw;
	line-height: ;
	letter-spacing: -.05em;
	font-weight: lighter;
}

#linkstop ul li{
	display: inline;
	list-style: none;
	position: relative;
	font-size: 1vw;
}


#linkstop ul li::before {
	content: " ";
	display: inline-block; 
	margin-left: 5vw; 
	margin-right: 0.5vw;  
	width: 0.4vw; 
  height: 1vw;
  border: solid #ff0000; 
  border-width: 0 0.4em 0.4em 0;
  -webkit-transform: rotate(45deg); // tilts the shape
  -moz-transform: rotate(45deg);               
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#linkstop ul li::after {
  content: " ";        
  display: inline-block;
  width: 1em;
	height: 1em;
	border: solid 0.1em yellow; 
   left: 4.5vw;   
  top: -0.3em;
   position: absolute;
  z-index: -1;
}  

#navbot  {
	color: #ffffff;
	


}


#navbot a {
	text-decoration: none;
	color: #ffffff;
	
}

#navbot ul  {
	list-style: none;


}

#social  {
	grid-area: social;
	display: flex;
	flex-direction: column;
	margin-left: 3vw;
	margin-top: 9vw;
}

#sociallinks  ul li {
	display: inline;
	list-style: none;


}

#sociallinks ul li img {
	height: 2vw;
	
	
}


#caloc img{
	width: 10vw;
	margin-left: 2vw;


}


#copy  {
	grid-area: copyright;
	text-align: center;
	color: #ffffff;
	font-size: 1vw;
}






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

.gallery {
	width: 100%;
	text-align: center;
	background-color: #1f3855;               
	padding-top: 3vw;   
	height: 35vw;
	clip-path: ellipse(180% 100% at 90% 100%);  
	margin-top: 4vw;
		
	
	}

.gallery img
	{
	width: 16%;
	padding: 5px;

	transition: 1s;
	
	}
	
.gallery img:hover
	{
	filter: grayscale(0); 
	transform: scale(1.1);	
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	}

.gallery h1 {
	font-family: sans-serif;
	
}


#explain {
	display: grid;
	grid-template-columns: 45% 4% 38%;
	grid-template-rows: 10vw 15vw 10vw 4vw 20vw;
	grid-template-areas: ". . ." "gr21 . all21" "gr21 . blu" ". . ." "all22 gr22 gr22";
	/*background-image: url(../images/walltexture9.png); */
	background-repeat: no-repeat;
	background-size: cover;
	place-content: center;
	clip-path: ellipse(180% 100% at 90% 100%);
	margin-top: -10vw;
	background-color: #ffffff;
}


#grph21 {
	grid-area: gr21;
	background-image: url(../images/offimg21.png);
	box-shadow:  0 20px 50px rgba(0,0,0,0.6);
	background-repeat: no-repeat;
	background-size: cover;
}

#allabout21 {
	grid-area: all21;
	
	
}

.text21 h1 {
	font-size: 2.8vw;
	font-weight: bold;
	line-height: .4em;
	font-family: sans-serif;
}

.text21 h2 {
	font-size: 2vw;
	font-weight: bold;
	line-height: .6vw;
	font-family: sans-serif;
}

.text21 p {
	font-size: 1.2vw;
	line-height: .4em;
	font-family: sans-serif;
}

.text21 ul li {
	margin-top: -1vw; 
	
}


#bluebox1 {
	background-color: #1f3855;
	grid-area: blu;
	margin-left: 2vw;
	width: 30vw;
	margin-top: 1vw;
	border-radius: 5px;
	text-transform: uppercase;
	font-family: sans-serif;
}

#bluebox1 p {
	color: #FFF;
	font-size: 2vw;
	text-align: center;
	padding: 0;
}


#allabout22 {
	grid-area: all22;
	justify-self: end;
	margin-right: 3vw;
	
}

#grph22 {
	grid-area: gr22;
	background-image: url(../images/offimg22.png);
	box-shadow:  0 20px 50px rgba(0,0,0,0.6);
	background-repeat: no-repeat;
	background-size: cover;
}






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

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

	header ul li:hover .sub-menu-1 {
		display: block;
		position: absolute;
                background: #000;
                margin-top: 350px;
                margin-left: 5px;
				

	}

	header ul li:hover .sub-menu-1 ul {
		width: 18vw;
		margin-left: 1vw;
	}

	.top-banner ul li {
		list-style: none;
		font-size: 2vw;
		font-family: sans-serif;
	
	}	

	.top-banner img {
		display: none;

	}

	.nav-links {
		width: 90%;
		
	}
	
	header img {
		height: 2.5vw;
		width: auto;
		margin-left: 5vw;
	
	}
	

.logo {
  display: grid;
  grid-area: logo;
  align-items: start;
  justify-items: left;
  margin-left: 15vw;
  margin-top: 5vw;
}

.logo img {
  margin-top: 0;
  margin-left: -10vw;
  width: 10vw;
}
	
#partners {
	margin-top: 8vw;
	
}

#top-verb h1::after {
	content: "Commercial and Residential";
	font-weight: bold;
	font-size: 1.5vw;
	color: #F00;
	position: absolute;
	top: 9vw;
	
}


#introverbiage {
	
        display: grid;
        grid-template-columns: 5% 40% 40% 5%;
        grid-template-areas: "introverbtop introverbtop introverbtop introverbtop"
        ". introv1l introv1r ."
        ". introv2l introv2r ."
        ". introverbbottom introverbbottom .";
        gap: 2vw;
        margin: auto;
        width: 100%;
    
    
}

#introverbiage h1 {
	
	font-size: 3vw;
	padding: 4vw;
	
}

#introverbiage p {
	
	font-size: 1.8vw;
	padding: 1vw;
	
}

#introverbpic1l {
    grid-area: introv1l;
    background-image: url(../images/office-with-telecom-integration.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: 40vw;
    min-height: 25vw;
	margin-bottom: 3vw;
}

#introverbpic2r {
    grid-area: introv2r;
    background-image: url(../images/electrical-lighting-control-relays.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: 40vw;
    min-height: 25vw;
}

#introverbtop h1::after {
    content:"CALIFORNIA";
    position: absolute;
    margin-top: 3.5vw;
    margin-left: -90px;
    font-size: 2.5vw;
    color: #F00;
    font-weight: bold;

}

#introverbtop h1::before {
    content:"Los Angeles";
    position: absolute;
    margin-top: -2.5vw;
    font-size: 2.5vw;
    color: #F00;
    

}

.pcontent {
    font-size: 1.8vw;
    color: rgb(38, 42, 44);
    font-family: sans-serif;
}

#buildbreake {
    display: grid;
    grid-template: auto / 10% 35% 10% 35% 10%;
      grid-template-areas: none;
    grid-template-areas:
    ". caplefter . servicedesctwo .";
  }

  #caplefter {
    grid-area: caplefter;
    background-image: url(../images/electrician-tools-sm.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-size: 35vw;


} 



.secparts ul li {
	list-style: none;
	color: #FFF;
	line-height: 2em;
	margin-left: -4vw;
	font-size: 1.8vw;
}

.title-intro-text {
	grid-area: tc;
	text-align: center;
	font-size: 3vw;
	font-family: sans-serif;
}

#title-clue::after {
	content: "Los Angeles";
	position: absolute;
	margin-top: 6vw;
	margin-left: -10vw;
	font-size: 1.2vw;
	padding: 6px;
	color: #FFF;
	background-color: #1f3855;
}

#title-clue::before {
	content: "COMMERCIAL / RESIDENTIAL";
	position: absolute;
	margin-top: -1vw;
	font-size: 1.2vw;
	color: #F00;
}

#comp-statement p {
	font-family: Quicksand, Montserrat, courier, sans-serif;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	padding-left: 2vw;
	padding-right: 2vw;
	font-size: 1.8vw;
}

#top-verb h1::before {
	content: "The Electrician you need, on call 24/7";
	font-weight: bold;
	font-size: 1.5vw;
	font-family: Dosis, sans-serif;
	color: #F00;
	position: absolute;
	margin-left: -4vw;
	margin-top: -2vw;
}


#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;
}





}




@media screen and (max-width: 768px) {
	
	#electrician-verbiage {
		display: grid;
		grid-template-areas:'epl' 'eir'
							'eil' 'epr';
		width: 90%;
		margin: 0 auto;
		gap: 2%;
		place-content: center;
	}

	.elect-p  {
		font-size: 3vw;
		
	}
	
	
	.homepage-intro {
		margin: 4w auto;
		width: 96%;
		border-radius: 5px;
		font-size: 3vw;
		padding: 2vw;
	}
	
	#top-verb h1::after {
	content: "Commercial and Residential";
	font-weight: bold;
	font-size: 1.5vw;
	color: #F00;
	position: absolute;
	top: 12vw;
	
}


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

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





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

body {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	overflow-x: hidden;
	position: relative;
}



header img{
	display: none;

}

header {
	height: 0;
	width:0;
}

.servlist {
	display: none;

}

.top-banner {
	display: none;

}

nav {
	background:  url(../images/electrical-systems-integration.jpg);
	background-size: cover;
}
.nav-links {
		position: absolute;
		right: 2vw; 
		height: 50vh;
		top: 8vh;   
		background-color: rgba(32, 41, 58, 0.99);
		display: flex;
		flex-direction: column;
		align-items: center;			
		width: 83%;
		
		opacity: 0;
		transition: opacity 0.7s ease-in;
		z-index: -10; 
		border-radius: 30px;
		
	}
	
	
	
	.nav-links li {
		opacity: 0.1;
		
	}
	
	.burger {
		display: block;
		grid-area: navo;
		justify-self: end;
		margin-right: 10vw;
		margin-top: 6vw;
		position: fixed;  
		z-index: 20;	 
		background-color: #ff0000;
		border-radius: 20%;
	}
	
	.nav-active {
		
		opacity: 1;
		position: fixed;
		z-index: 20; 
	}
	


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





	
	

	
.logo img  {
	width: 15vw;
}
	

.nav ul li {
	margin-left: 1vw;
	font-size: 2.2vw;
	
	
} 


#top-verb h1::after {
	content: "Commercial and Residential";
	font-weight: bold;
	font-size: 3vw;
	color: #F00;
	position: absolute;
	margin-left: 60vw;
	margin-top: 12vw;
}


#start-arrows  img {
	display: none;
	
}
	
 #end-arrows img {
		display: none;
		
	}

#comp-grid {
	display: flex;
	grid-template-columns: 90vw;
	grid-template-rows: 50vw;
}
	
#comp-statement {
	grid-column: 1/3;
	box-shadow: 0 3px 4px rgba(0,0,0,0.6);	
	margin-right: 1vw;
	margin-left: 1vw;
	}
	
#start-arrows {
	display: none;
	
}	


#end-arrows {
	display: none;
	
}	


#comp-statement h1 {
	font-size: 3.5vw;
	
}

#comp-statement p {
	font-size: 3vw;
	
	
}

.container {
	display: grid;
	display: -ms-grid;
	-ms-grid-rows: 20vw 20vw;
	grid-template-rows: 20vw;
	grid-template-columns: 14vw 14vw 14vw 14vw 14vw;
	gap: 3vw;
	height: 25vw;
	place-content: center;
	align-items: center;
	background-image: url(../images/concreto8.jpg);
}




.child-1 img {
	height: 8vw;
	
	
}

.child-2 img{
	height: 7vw;
	
}

.child-3 img {
	height: 7vw;
	margin-top: 1px;
	
}

.child-4 img {
	height: 7vw;
	
	
}

.child-5 img {
	height: 7vw;
	margin-top: 1px;
}

.item {
		
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20vw;
    background-color: rgba(32, 41, 58, 0.6);
    
}

.item p {
	padding: 0;
	font-size: 2vw;
}

#introv1stp::before {
    content:"REPEAT BUSINESS EARNED, NOT GRANTED";
    position: absolute;
    margin-top: -5vw;
    font-size: 2vw;
    color: #F00;
    font-weight: bold;
}

#introv2ndp::before {
	content: "PERFORMANCE BASED CONTRACTING";
	position: absolute;
	margin-top: -5vw;
	font-size: 2vw;
	color: #F00;
	font-weight: bold;
}

#verbcycle {
	display: grid;
	grid-template-columns: 100%;
	width: 100%;
	grid-template-areas: "buildstate"" buildcy";
	margin: auto;
	margin-top: 4vw;
	position: relative;
    height: 60vw;
}

#introverb2l {
	grid-area: introv2l;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2vw;
	margin-top: 3vw;
}

#introverb3rdp::before {
	content: "PROACTIVE FACILITY MAINTENANCE";
	position: absolute;
	margin-top: -5vw;
	font-size: 2vw;
	color: #F00;
	font-weight: bold;
}

#introverb4thp::before {
	content: "RESPONSIVE BUSINESS ETHICS";
	position: absolute;
	margin-top: -5vw;
	font-size: 2vw;
	color: #F00;
	font-weight: bold;
}

#buildstatement {
	grid-area: buildstate;
	display: grid;
	align-content: center;
	width: 100%;
}

#buildstatement h1 {
	text-transform: uppercase;
	text-align: center;
	font-family: Quicksand, Montserrat, courier, sans-serif;
	font-size: 3vw;
	color: #2E79F4;
}

#introverbiage {
	display: grid;
	grid-template-columns: 90%;
	grid-template-areas: "introverbtop" "introv1l" "introv1r" "introverbbottom" "introv2l" "introv2r" ;
	gap: 2vw;
	margin: auto;
	width: 100%;
	justify-content: center;
}

/*#introverbiage h1{
	
	font-size: 3.3vw;
}*/

#introverbiage svg {
    z-index: -1;

}


#introverbiage p {
	
	font-size: 3vw;
}

#buildcycle {
	grid-area: buildcy;
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-template-rows: 8vw 10vw 4vw 10vw;
	grid-template-areas: ". bc1 ." "bc6 bc2 bc3" ". bc2 ." "bc5 bc2 bc4";
	margin: auto;
	width: 100%;
	justify-content: center;
}

#buildcycle h1 {
	text-transform: uppercase;
	text-align: center;
	font-family: Quicksand, Montserrat, courier, sans-serif;
	font-size: 2.5vw;
	color: #FF0000;
}


#bc2 {
	grid-area: bc2;
	background-image: url(../images/build360.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: 4vw;
}

#top-verb {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto;
	grid-template-areas: "toph1 toph1"
				"topcall toptext";
	margin-bottom: 10vw;
    justify-items: center;			
}

#top-verb h1 {
	display: grid;
	grid-area:toph1;
	margin-bottom: 10vw;
	margin-top: 10vw;
	font-size: 5vw;
}

#top-verb h1::before {
	content: "The Electrician you need, on call 24/7";
	font-weight: bold;
	font-size: 3vw;
	font-family: Dosis, sans-serif;
	color: #F00;
	position: absolute;
	margin-left: 2vw;
	margin-top: -5vw;
}

#topcall {
	/*display: flex; */
	border: red solid 2px;
	padding: 15px; 
	grid-area: topcall;
	display: grid;
	cursor: pointer;
	margin-left: 10vw;
	text-align: center;
    height: 10vw;
    width: 10vw;
    border-radius: 50%;
    align-content: center;
	}

#toptext {
	border: red solid 2px;
	padding: 15px;
	display: grid;
	grid-area: toptext;
	cursor: pointer;
	margin-right: 10vw;
	text-align: center;
    height: 10vw;
    width: 10vw;
    border-radius: 50%;
    align-content: center;
}

#topcall a {
	text-decoration: none;
	text-transform: uppercase;
	color: #1F3855;
	font-family: Montserrat, sans-serif;
	font-weight: bold;
}

#toptext a {
	text-decoration: none;
	text-transform: uppercase;
	color: #1F3855;
	font-family: Montserrat, sans-serif;
	font-weight: bold;
}


#intermedio {
	grid-template-columns: 60% 40%;
	grid-template-rows: auto;
	width: 95%;
	border-radius: 5px;
	box-shadow: 0 3px 4px rgba(0,0,0,0.6);
	
}

#intermedio h1 {
	font-size: 2.5vw;
	
	
}
	
#intermedio p {
	font-size: 2.2vw;
	
}

#intermedio img {
	margin-left: 9vw;
	width: 20vw;
}



#re-review {
	
	grid-template-columns: 100% 0 0;
	grid-template-rows: 80vw;
	height: auto;
}

.re-review {
	border-radius: 5px;
	height: 65vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
	margin-left: 8vw;
	
	
}

blockquote p::after {
	content: close-quote;
	font-weight: bold;
	font-size: 10vw;
	color: rgb(244, 185, 57);
	position: absolute;
	margin-left: 1vw;
}


blockquote p::before {
	content: open-quote;
	font-weight: bold;
	font-size: 10vw;
	color: rgb(244, 185, 57);
	position: absolute;
	margin-left: -6.5vw;
	margin-top: -1.5vw;
}

#re-reone  p {
	font-size: 3vw;
	margin-left: 4vw;
	
}

#re-reone span {
	font-size: 2.5vw;
	
}


#re-retwo p {
	display: none;
	
	
}

#re-rethree {
	display: none;
	
}

#re-client {
	margin-top: -5vw;
	
}




#client_base 	{
	display: grid;
	grid-template-columns: repeat(3, 20vw);
	grid-template-rows: 15vw 15vw;
	height: auto;

}

.title-intro-text {
	grid-area: tc;
	text-align: center;
	font-size: 5vw;
	font-family: sans-serif;
}

#title-clue::after {
	content: "Los Angeles";
	position: absolute;
	margin-top: 10vw;
	margin-left: -15vw;
	font-size: 2vw;
	padding: 4px;
	color: #FFF;
	background-color: #1f3855;
}

#title-clue::before {
	content: "COMMERCIAL / RESIDENTIAL";
	position: absolute;
	margin-top: -1vw;
	font-size: 2vw;
	color: #F00;
}


#capable {
	display: none;
	flex-direction: column;
	gap: 1vw 1vw;
	background-size: 100% 100%;
	margin-top: 2vw;
	margin-bottom: -1vw;
	
}

#capleft {
	background-image: url(../images/electrician-tools-sm.jpg);
	min-width: 50vw;
	min-height: 80vw;
	background-size: 200%;
}

#capcenter {
	display: flex;
	flex-direction: column;
	background-size: 45vw;
	background-position: center;
	background-repeat: no-repeat;
	
}

#servicedesc h1 {
	font-size: 3.5vw;
	text-align: center;
	
	
}

#capcenter {
	font-stretch: condensed;
}


#servicedesc p {
	font-size: 3.5vw;
	padding: 0 6vw 2vw 6vw;
	
	
	
}

#shorttext {
	letter-spacing: -.6vw;
	
	
}


#data {
	min-width: 90vw;
	min-height: 45vw;
	align-self: center;
	
}

#capcenter ul {
	margin-top: 8vw;
	
	
}


.secparts ul li {
	list-style: none;
	color: #FFF;
	line-height: 2em;
	margin-left: -4vw;
	font-size: 4vw;
}


.pointsix {
	font-size: 3vw;
	margin-top: 2vw;
}

#capcenter ul li {
	margin-left: 10vw;
	margin-top: 1vw;
}


#video {
	min-width: 90vw;
	min-height: 45vw;
	align-self: center;
	position: relative;
}

#video::before {

content: url("../images/viicon.jpg");
	display: inline-block;  
	position: absolute;
	top: 16vw;
	left: 3vw;
}


#data {
	min-width: 90vw;
	min-height: 45vw;
	align-self: center;
	position: relative;
}

#data::before {

content: url("../images/daicon.jpg");
	display: inline-block;  
	position: absolute;
	top: 12vw;
	left: 3vw;
}



#audio {
	min-width: 90vw;
	min-height: 45vw;
	align-self: center;
	position: relative;
}

#audio::before {

content: url("../images/auicon.jpg");
	display: inline-block;  
	position: absolute;
	top: 12vw;
	left: 3vw;
}


#electrical {
	min-width: 90vw;
	min-height: 45vw;
	align-self: center;
	background-position-x: -2vw;
	position: relative;
}

#electrical::before {

content: url("../images/elicon.jpg");
	display: inline-block;  
	position: absolute;
	top: 16vw;
	left: 3vw;
}



#data:hover {
	text-align: left;
	margin-left: -24vw;
	margin-top: 0;
	font-size: 5vw;
	border-radius: 0;
	width: 20vw;
	height: 40vh;
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
		
}

#video:hover {
	text-align: left;
	margin-left: -24vw;
	margin-top: 0;
	font-size: 5vw;
	border-radius: 0;
	width: 20vw;
	height: 40vh;
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
		
}

#audio:hover {
	text-align: left;
	margin-left: -24vw;
	margin-top: 0;
	font-size: 5vw;
	border-radius: 0;
	width: 20vw;
	height: 40vh;
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
		
}


#electrical:hover {
	text-align: left;
	margin-left: -24vw;
	margin-top: 0;
	font-size: 5vw;
	border-radius: 0;
	width: 20%;
	height: 40vh;
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
		
}


#capright {
	background-image: url(../images/phonenow6.png);
	min-width: 50vw;
	min-height: 110vw;
	background-size: 100%;
}





#client_base_dos {
	display: grid;
	grid-template-columns: repeat(3, 20vw);
	grid-template-rows: 15vw 15vw;
	height: auto;
	
}

#build-electrical {
	display: grid;
	grid-template: auto / 90%;
	grid-template-areas: "tc" "build1" "build2" "build3" "build4";
	gap: 2%;
	min-height: 20vw;
	margin-bottom: 35vw;
    justify-content: center;
}

.secparts {
	background-color: #1a2537;
	width: 100%;
	border-radius: 10px;
	height: 80vw;
}


#metallic1 {
	grid-template-columns: 100%;
	grid-template-rows: 5vw 70vw 50vw 3vw;
	grid-template-areas: "top" "left" "right" "bottom";
	
	
}

#metallic-left {
	grid-template-columns: 30vw 30vw 30vw;
	grid-template-rows: 8vw 20vw 20vw 20vw;
	grid-template-areas: "title title title" "comm ent inst"
	"gov ind heal" "host ret fin";
}

#metallic-left h1 {
	font-size: 3.5vw;
	line-height: 4vw;
	
}

#metallic-left p {
	font-size: 4vw;
	margin-top: 5vw;
}

#commicon img {
	width: 6vw;
	margin-top: 1.5vw;
	
}

#commercial, #enterprise, #institutional, #governmental, #industrial, #healthcare, #hospitality, #retail  #finance{
	border-radius: 5px;
	
}

#commercial img, #enterprise img , #institutional img , #governmental img, #industrial img, #healthcare img, #hospitality img, #retail  img, finance img {
	width: 6vw;
	margin-top: 1.5vw;
	
}

#metallic-right {
	margin-left: 1vw;
	margin-top: 4vw;
}

#metallic-right img {
	width: 95vw;
	
}

#finance{
	grid-area: fin;
	display: grid;
	place-content: center;
	border-radius:.2vw;
	box-shadow: 0 5px 8px rgba(0,0,0,0.4);
	
	grid-template-columns: 100%;
	grid-template-rows: 2.5vw;
	grid-template-areas: "finicon" "fintext";
	justify-items: center;
}

#finicon {
	grid-area: finicon;

}

#finicon img {
	width: 6vw;
	margin-top: 1.5vw;

}

#fintext {
	grid-area: fintext;
	margin-bottom: 1.5vw;

}

#lastshow {							
	display: grid;
	grid-template-columns: 100vw;
	grid-template-rows: auto;   
	background:  url(../images/synergy-hdalacarte.png);
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2vw auto;
	width: 94vw;
	min-height: 34.5vw;
	margin-top: 2.5vw;
	align-content: center;  
	margin-bottom: 2.5vw;
	box-shadow: 0 3px 4px rgba(0,0,0,0.6);
	border-radius: 20px;
	background-color: #FFFFFF;
}

.faq-items {
	display: grid;
	grid-template-columns: 3fr 1fr;
	grid-template-rows: 1fr 1fr;
	width: 100%;
	height: 80px; /* need to adjust this to fit the text */
	transition: height 0.9s ease-in-out;
	padding: 5px;
	padding-bottom: 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;
	transition: all 3s ease-in-out;

}

#faq h2 {
	
	font-size: 5vw;
}

#faq p {
	font-size: 4vw;
	
}

.faq-items h2 {
    font-size: 6.5vw;
	padding-bottom: 2vw;

}

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


#footer {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 25vw 20vw 20vw 8vw 5vw;
	grid-template-areas: "linksto" "social" "me" "gesture" "copyright";
	margin-top: 4vw;	
}


#gesture p {
	color: #FFF;
	font-size: 2vw;
	text-align: center;
	font-family: sans-serif;
	line-height: 1.2em;
}

.gallery {
	width: 100%;
	text-align: center;
	background-color: #1f3855;               
	padding-top: 3vw;   
	clip-path: ellipse(240% 100% at 90% 100%);	
}	
	

.gallery img
	{
	width: 45%;
	padding: 5px;
	transition: 1s;
	
	}
	
.gallery h1 {
	font-family: sans-serif;
	font-size: 2.5vw;
	margin-bottom: 4vw;
	color: #FFF;
	text-align: center;
}



#links  {
	grid-area: linksto;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 15vw 8vw 8vw;
	grid-template-areas: "linkstop"
						 "navbot"
						 "gesture";

}



#linkstop h1 {
	margin-top: 5vw;
	
	
}

#linkstop ul {
	margin-top: -1vw;
	margin-left: 18vw;
	
	
}

#linkstop ul li {
	font-size: 2vw;
	
}



#navbot {
	margin-left: -14vw;
	
}

#navbot ul li {
	margin-left: 6vw;
	font-size: 2vw;
	
	
}

#social {
	grid-area: social;
	display: flex;
	flex-direction: row-reverse;
	margin-top: 0;
	place-self: center;
	

}

#social  ul {
	margin-left: -8vw;
	
	
}

#sociallinks ul li  {
	margin-left: 5vw;
	
	
}

#sociallinks ul li img {
	height: 6vw;
	
}

#caloc  img {
	margin-left: -4vw;
	width: 30vw;
	
	
}

#me {
	grid-area: me;
	display: flex;
	justify-content: space-evenly;
		
}

#me img {
	width: 12vw;
	height: 16vw;

}

#me p {
	margin-left: 2vw;
	font-size: 2.5vw;
}

#linkstop ul li::after {
	left: 4vw;
	top: -.2vw;
}


.quote-request-link  a:nth-child(1) {
	text-decoration: none;
	padding: 2vw;
	font-size: 4vw;
	background-color: #00446E;
	color: #fff;
	border-radius: 1vw;
	margin-bottom: 4vw;
	width: 40vw;
	text-align: center;
}

.quote-request-link img {
	transform: scale(.4);
	
}



}