html, body {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	
}

body p {

	padding: 1vw;

}


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

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



#top-container {
	display: none;   
	grid-template-columns: 40vw 60vw;    								
	grid-template-rows: 20vw 20vw;
	background:  url(../images/image-three.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: 17.5vw;
	grid-template-columns: 30vw 20vw auto;
	background:  url(../images/image-three.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	grid-template-areas: "logo intro navo";
	margin-bottom: -1vw;              							
	box-shadow: 0 20px 25px rgba(0,0,0,0.6);
	animation-name: navLinkFade;
	}

	

	#navo {
		grid-area: navo;
		
	}
	

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


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

	.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);
	}


.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;			 respond */
	align-self: center;				respond */
	color: red;
	font-size: 3rem;
}




#sellmore {
	display: grid;
	grid-template-columns: 28% 28% 28%;
	grid-template-rows: 15vw 45vw;
	grid-template-areas: "thetitle20 thetitle20 thetitle20" "choiceone choicetwo choicethree";
	place-content: center;
	width: 100%
	margin: auto;
	margin-top: 5vw;
	gap: 2vw;
}


#thetitle20 {
	grid-area: thetitle20;
	
}

#choiceone {
	grid-area: choiceone;
	
}

#choicetwo {
	grid-area: choicetwo;
	
}

#choicethree {
	grid-area: choicethree;
	
}

#thetitle20 h1 {
	font-size: 2.5vw;
	font-family: sans-serif;
	text-align: center;
		
}

#thetitle20 p {
	font-size: 1.5vw;
	font-family: sans-serif;
	
}

.choicesbox {
	border: 2px solid #1F3855;
	border-radius: 5px;
	box-shadow:  0 20px 30px rgba(0,0,0,0.6);
	display: grid;
	background-color: #FFF;
	grid-template-columns: 100%;
	grid-template-rows: 10vw 2vw;
	place-items: center;
	position: relative;
}

.choicesbox img {
	width: 8vw;
	border: 2px solid #2a8bf2;
}

.choicesbox ul {
	
}


#choiceone:hover {
	transform: scale(1.3);	
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
		
}

#choicetwo:hover {
	transform: scale(1);	
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
	
}
	
#choicethree:hover {
	transform: scale(1.3);	
	-webkit-transform: scale(1.1);	
	-moz-transform: scale(1.3);
	-o-transform: scale(1.1);
	z-index: 4;
	
}

#choiceone h1::before {
	content: "Most walls";
	font-weight: bold;
	font-size: 1vw;
	color: #F00;
	position: absolute;
	margin-left: 1vw;
	margin-top: -.5vw;
}

#choicetwo h1::before {
	content: "Interior drywall";
	font-weight: bold;
	font-size: 1vw;
	color: #F00;
	position: absolute;
	margin-left: 1vw;
	margin-top: -.5vw;
}

#choicethree h1::before {
	content: "Above drywall-clad";
	font-weight: bold;
	font-size: 1vw;
	color: #F00;
	position: absolute;
	margin-left: 1vw;
	margin-top: -.5vw;
}




.choicesbox h1::after{
	content: "Installation";
	font-weight: bold;
	font-size: 1vw;
	color: #1B6AE6;
	position: absolute;
	margin-left: -3vw;
	margin-top: 2.8vw;
}



.choicesbox ul li {
	font-size: 1.3vw;
	font-family: sans-serif;
	color: #1F3855;
}

.choicesbox ul li::marker {
	color: #1B6AE6;
	
}

.choicesbox h1 {
	color: #1F3855;
	font-family: sans-serif;
	font-size: 3vw;
}

.choicesbox span::after {
	content: "and up";
	font-weight: bold;
	font-size: 1vw;
	color: #F00;
	position: absolute;
	
}

.choicesbox p {
	font-family: sans-serif;
	color: #1F3855;
	font-size: 1vw;
}

.choicesbox span {
	color: #1B6AE6;
	font-size: 3vw;
}



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

.company-intro img {
	display: inline;


}

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

.company-intro p {
	color: #36a7ca;
	font-size: 4vw;
	font-weight: bolder;
	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; 
	


}







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

}

#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: .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;   
	margin-top: 4vw;
	clip-path: ellipse(180% 100% at 90% 100%);	
	
	}

.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;
	font-size: 2.5vw;
	margin-bottom: 2vw;
	color: #FFF;
	text-align: center;
}


#explain {
	display: grid;
	grid-template-columns: 45% 4% 38%;
	grid-template-rows: 1vw 15vw 10vw 4vw 20vw;
	grid-template-areas: ". . ." "gr21 . all21" "gr21 . blu" ". . ." "all22 gr22 gr22";
	background-repeat: no-repeat;
	background-size: cover;
	place-content: center;
	margin-top: -1vw;
	background-color: #ffffff;
}


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

#allabout21 {
	grid-area: all21;
	
	
}

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


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

.text21 h2 {
	font-size: 1.3vw;
	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/offimg26.png);
	box-shadow:  0 20px 50px rgba(0,0,0,0.6);
	background-repeat: no-repeat;
	background-size: cover;
}

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




#fillelli  img{
	width: 100vw;
	
}



#electricbottom {
	display: grid;
	grid-template-columns: 45% 45%;
	grid-template-rows: auto;
	grid-template-areas: "electbottitle electbottitle"  "electbotleft electbotright" "electclosingarg electclosingarg";
	place-content: center;
	margin-top: 6vw;
	gap: 5vw;
}

#electbottitle h1 {
	text-align: center;
	font-family: sans-serif;
}

#electbotttom  h1 {
	font-family: sans-serif;
	
}


#electbottom p {
	
	
}

#electbottitle {
	grid-area: electbottitle;
	
}

#electbotleft {
	grid-area: electbotleft;
	place-content: center;
	place-self: center;
}

#electbotright {
	grid-area: electbotright;
	place-itself: center;
	place-content: center;
	background-image: url(../images/metal-broken10.png);
background-position: center;
background-repeat: no-repeat;
background-color: #FFFFFF;
background-size: 30vw;
	
}

#electbotleft ul  {
	font-family: sans-serif;
	font-size: 1.2vw;
	color: #1f3855;
}

#electclosingarg {
	grid-area: electclosingarg;
	place-content: center;
	place-self: center;
	
}

#electclosingarg ul {
	font-family: sans-serif;
	font-size: 1.2vw;
	color: #1f3855;
	
}
 #electclosingarg h1{
	text-align: center;
	font-family: sans-serif
	 
 }


#partners {
	display: grid;
	grid-template-columns: repeat(5, 12vw);
	grid-template-rows: auto;
	margin-top: 5vw;
	align-items: space-around;
	justify-content: space-evenly;
	gap: 2vw;
	margin-left: 1vw;
	margin-right: 1vw;
}

#partners img {
	width: 15vw;
	
}



#accssold {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 30vw 5vw 20vw 20vw 20vw 20vw;
	grid-template-areas: "texttopper imgtopper" "disclose10 disclose10" "tilt descone" "desctwo extend" "hdc descthree" "descfour opti";
	width: 90%;
	margin-left: 4%;
    gap: 2vw;
	margin-top: 5vw;
}



#texttopper p {
	font-size: 1.5vw;
	text-align: right;
	color: #1f3855;
	font-family: sans-serif;
	margin-top: 10vw
}

#texttopper h1 {
	font-size: 2vw;
	text-align: center;
	color: #ff0000;
	font-family: sans-serif;
}

#texttopper h1::after {
	content: "Perfect!";
	font-weight: bold;
	font-size: 3vw;
	color: #af14a5;
	position: absolute;
	margin-left: -18vw;
	margin-top: 6vw;
	transform: rotate(-30deg);
}

#textopper {
	grid-area: texttopper;
	position: relative;
	display: grid;
    place-content: center;
}

#imgtopper {
	grid-area: imgtopper;
	display: grid;
    place-content: center;
	
}

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

#disclose10 p {
	font-size: 3vw;
	color: #1b6ae6;
	font-family: sans-serif;
	text-align: center;
	
}

#tiltmounts {
	grid-area: tilt;
	
	display: grid;
    place-content: center;
}

#descone100 {
	grid-area: descone;
	display: grid;
    place-content: center;
}

#extendmounts {
	grid-area: extend;
	display: grid;
    place-content: center;	
}

#desctwo200 {
	grid-area: desctwo;
	display: grid;
    place-content: center;	
}

#hdcables {
	grid-area: hdc;
	display: grid;
    place-content: center;
}

#descthree300 {
	grid-area: descthree;
	display: grid;
    place-content: center;
	
}

#opticals  {
	grid-area: opti;
	display: grid;
    place-content: center;
}

#descfour400 {
	grid-area: descfour;
	display: grid;
    place-content: center;	
}


.desctext5l h1 {
	font-size: 2vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: center;
}



.desctext5r h1 {
	font-size: 2vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: center;
}

.desctext5l p {
	font-size: 1.5vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
}

.desctext5r p {
	font-size: 1.5vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: right;
}

.desctext5l ul li {
	list-style:none;
	color: #1f3855;
	text-align: left;
	font-family: sans-serif;
	font-size: 1.2vw;
}

.desctext5r ul li {
	list-style:none;
	color: #1f3855;
	text-align: right;
	font-family: sans-serif;
	font-size: 1.2vw;
}






#onthemove {
	display: grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: 30vw;
	grid-template-areas: "moveverb moveicon";
	padding: 5vw;
}


#moveverb {
	grid-area: moveverb;
	position: relative;
}

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

#moveicon img {
	width: 200%;
	
}



#moveverb ul li {
	position: relative;
	
}

#moveverb ul li::before {
	content: " ";
	display: inline-block; 
	width: 0.4vw; 
  height: 1.5vw;
  border: solid #ff0000; 
  border-width: 0 0.2em 0.2em 0;
	-webkit-transform: rotate(45deg); // tilts the shape
  -moz-transform: rotate(45deg);               
  -o-transform: rotate(45deg);
  transform: rotate(45deg); 
	position: absolute;
	left: -2vw;
}

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

#onthemove p{
	font-size: 1.5vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
	
}

#onthemove h1 {
	font-size: 3.5vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: left;
	
}

#onthemove ul li {
	list-style: none;
	font-size: 1.5vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
	
}




#localcontractor {
	display: grid;
	grid-template-columns: 45% 45%;
	grid-template-rows: auto;
	grid-template-areas: "localtext localrev";
	margin-left: 5vw;
	gap: 4vw;
}

.local-review h1 {
	font-family: sans-serif;
	color: #1f3855;
}

.local-review p {
	font-size: 1.2vw;
	font-family: sans-serif;
	color: #1f3855;
}

.local-review a {
	text-decoration: none;
	
}

#localleft ul li {
	list-style: none;
	color: #1f3855;
}

#localleft a {
	text-decoration: none;
	color: #1f3855;
	
}

#localleft {
	grid-area: localtext;
	
}

#localright {
	grid-area: localrev;
	
}

#localright p {
	font-size: 1.2vw;
	font-family: sans-serif;
	color: #1f3855;
	position: relative;
	
	
}

.reviewer::before {
	content: url(../images/5star.jpg);
	position: absolute;
	top: -1vw;
	right: 12vw;
}

#localright p::last-child  {
	text-align: right;
}

#localright p span {
	color: #3b86fa;
	
}

.reviewer {
	text-align: right;
	margin-right: 2vw;
}


@media screen and (max-width: 1024px) {
		
	.nav-links {
		width: 90%;
		
	}
	

nav {
  display: grid;
  grid-template-rows: 17.5vw;
  grid-template-columns: 20vw 20vw auto;
  background: url(../images/image-three.jpg);
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-size: cover;
  grid-template-areas: "logo intro navo";
  margin-bottom: -1vw;
  box-shadow: 0 10px 12px rgba(0,0,0,0.6);
  animation-name: navLinkFade;
}

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

#sellmore {
	display: grid;
	grid-template-columns: 30% 30% 30%;
	grid-template-rows: 15vw 45vw;
	grid-template-areas: "thetitle20 thetitle20 thetitle20" "choiceone choicetwo choicethree";
	place-content: center;
	width: 100%
	margin: auto;
	margin-top: 5vw;
	gap: 2vw;
}

.choicesbox p {
  font-family: sans-serif;
  color: #1F3855;
  font-size: 1.5vw;
}


#accssold {
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 40vw 5vw 30vw 30vw 30vw 30vw;
	grid-template-areas: "texttopper imgtopper" "disclose10 disclose10" "tilt descone" "desctwo extend" "hdc descthree" "descfour opti";
	width: 90%;
	margin-left: 4%;
    gap: 2vw;
	margin-top: 5vw;
}


#accssold img  {
	width: 75%;
	
}

.desctext5l h1 {
	font-size: 3vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: center;
}


#texttopper p {
	font-size: 2vw;
	text-align: right;
	color: #1f3855;
	font-family: sans-serif;
	margin-top: 10vw
}

#texttopper h1 {
	font-size: 3vw;
	text-align: center;
	color: #ff0000;
	font-family: sans-serif;
}

#texttopper h1::after {
	content: "Perfect!";
	font-weight: bold;
	font-size: 4vw;
	color: #af14a5;
	position: absolute;
	margin-left: -18vw;
	margin-top: 6vw;
	transform: rotate(-30deg);
}




.desctext5r h1 {
	font-size: 3vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: center;
}

.desctext5l p {
	font-size: 2vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
}

.desctext5r p {
	font-size: 2vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: right;
}

.desctext5l ul li {
	list-style:none;
	color: #1f3855;
	text-align: left;
	font-family: sans-serif;
	font-size: 2vw;
}

.desctext5r ul li {
	list-style:none;
	color: #1f3855;
	text-align: right;
	font-family: sans-serif;
	font-size: 2vw;
}




#onthemove {
	display: grid;
	grid-template-columns: 75% 25%;
	grid-template-rows: 30vw;
	grid-template-areas: "moveverb moveicon";
	padding: 5vw;
}

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


#onthemove p{
	font-size: 2vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
	
}

#onthemove h1 {
	font-size: 3vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: left;
	
}

#onthemove ul li {
	list-style: none;
	font-size: 2vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
	
}


#moveverb ul li::after {
  content: " ";        
  display: inline-block;

	width: 1em;
	height: 1em;
	border: solid 0.1em yellow;
   left: -3.5vw;   
  position: absolute;
  top: .4vw;
}  



#moveicon img {
	width: 100%;
	
}


#localcontractor {
	display: grid;
	grid-template-columns: 90%;
	grid-template-areas: "localtext" "localrev";
	grid-template-rows: auto;
	margin-left: 5vw;
	gap: 4vw;
	place-content: center;
}

.local-review p {
	font-size: 2vw;
	font-family: sans-serif;
}

#localright p {
	font-size: 2vw;
	font-family: sans-serif;
	color: #1f3855;
	position: relative;
	
	
}



#electbotleft ul {
	font-family: sans-serif;
	font-size: 1.2vw;
	color: #1f3855;
}

#electbottitle h1 {
	text-align: center;
	font-family: sans-serif;
	font-size: 2vw;
}


#electbotleft ul {
	font-family: sans-serif;
	font-size: 1.8vw;
	color: #1f3855;
}

#electclosingarg ul {
	font-family: sans-serif;
	font-size: 1.8vw;
	color: #1f3855;
}

#electclosingarg h1 {
	text-align: center;
	font-family: sans-serif;
	font-size: 2vw;
}



#explain {
	display: grid;
	grid-template-columns: 45% 4% 38%;
	grid-template-rows: 1vw 18vw 10vw 4vw 27vw;
	grid-template-areas: ". . ." "gr21 . all21" "gr21 . blu" ". . ." "all22 gr22 gr22";
	background-repeat: no-repeat;
	background-size: cover;
	place-content: center;
	margin-top: -1vw;
	background-color: #ffffff;
}


}

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


body {
		overflow-x: hidden;	
		
	}
	.nav-links {
		position: absolute;
		right: 2vw; 
		height: 50vh;
		top: 8vh;   
		background-color: rgba(32, 41, 58, 0.95);
		display: flex;
		flex-direction: column;
		align-items: center;			
		width: 83%;
		
		opacity: 0;
		transition: opacity 0.7s ease-in;
		z-index: -1; 
		border-radius: 30px;
		
	}
	
	
	
	.nav-links li {
		opacity: .5;
	
	}
	
	.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;
	
	
} */


#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: 2.5vw;
	border-radius: 5px;
}

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



.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 p {
	padding: 0;
	font-size: 2vw;
}



#intermedio {
	grid-template-columns: 60% 40%;
	grid-template-rows: auto;
	width: 96%;
	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;
	
	
}

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

}




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

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

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

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

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

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

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



#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 {
	box-shadow: 0 3px 4px rgba(0,0,0,0.6);	
	
}



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

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



#explain {
	display: grid;
	grid-template-columns: 80%;
	grid-template-rows: 1vw 22vw 48vw 14vw 22vw 50vw;
	grid-template-areas: "." "all21" "gr21" "blu" "all22" "gr22";
	background-repeat: no-repeat;
	background-size: cover;
	place-content: center;
	margin-top: -1vw;
	background-color: #ffffff;
}




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

#allabout22 {
	grid-area: all22;
	justify-self: start;
	margin-top: 4vw;
	
}

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

#grph41 {
	grid-area: gr21;
	background-image: url(../images/elpic31-400.jpg);
	box-shadow:  0 20px 50px rgba(0,0,0,0.6);
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 5vw;
}


.text21 h1 {
	font-size: 2.5vw;
	
	
}

.text21 h2 {
	font-size: 2.3vw
	
}


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

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

#grph42 {
	grid-area: gr22;
	background-image: url(../images/elpic33-400.jpg);
	box-shadow:  0 20px 50px rgba(0,0,0,0.6);
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 9vw;
	
}



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


#partners {
	display: grid;
	grid-template-columns: repeat(3, 25vw);
	grid-template-rows: auto;
	align-items: space-around;
	justify-content: space-evenly;
	gap: 4vw;
	margin-left: 2vw;
	margin-right: 2vw;
}

#partners img {
	width: 25vw;
	
}

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

#electricbottom {
	display: grid;
	grid-template-columns: 90%;
	grid-template-rows: auto;
	grid-template-areas: "electbottitle" "electbotleft" "electbotright" "electclosingarg";
	place-content: center;
	margin-top: 6vw;
	gap: 5vw;
}

#electbotright {
	min-height: 50vw;
	background-size: 50vw;
}


#electbotleft  ul {
	font-size: 4vw;
	
}


#electclosingarg ul {
	font-size: 4vw;
	
}


#electclosingarg h1 {
	font-size: 5vw;
}

#electbottitle h1 {
	font-size: 5vw;
}


#sellmore {
	display: grid;
	grid-template-columns: 80%;
	grid-template-rows: 45vw 75vw 75vw 75vw;
	grid-template-areas: "thetitle20" "choiceone" "choicetwo" "choicethree";
	place-content: center;
	width: 100%
	margin: auto;
	margin-top: 5vw;
	gap: 2vw;
}	


#thetitle20 h1 {
	font-size: 4.8vw;
	font-family: sans-serif;
	text-align: center;
		
}

#thetitle20 p {
	font-size: 3vw;
	font-family: sans-serif;
	
}


	
#choiceone:hover {
	width: 85%;
	z-index: 4;
	margin-left: 5.5vw;
		
}

#choicetwo:hover {
	width: 85%;
	z-index: 4;
	margin-left: 5.5vw;
		
}

#choicethree:hover {
	width: 85%;
	z-index: 4;
	margin-left: 5.5vw;
		
}

#choiceone h1::before {
	content: "Most walls";
	font-weight: bold;
	font-size: 3vw;
	color: #F00;
	position: absolute;
	margin-left: 3vw;
	margin-top: -2.5vw;
}

#choicetwo h1::before {
	content: "Interior drywall";
	font-weight: bold;
	font-size: 3vw;
	color: #F00;
	position: absolute;
	margin-left: 3vw;
	margin-top: -2.5vw;
}

#choicethree h1::before {
	content: "Above drywall-clad";
	font-weight: bold;
	font-size: 3vw;
	color: #F00;
	position: absolute;
	margin-left: 3vw;
	margin-top: -2.5vw;
}

.choicesbox h1::after{
	content: "Installation";
	font-weight: bold;
	font-size: 2vw;
	color: #1B6AE6;
	position: absolute;
	margin-left: -4vw;
	margin-top: 4.4vw;
}


.choicesbox ul li {
	font-size: 3vw;
	font-family: sans-serif;
	color: #1F3855;
	font-weight: bold;
}

.choicesbox ul li::marker {
	color: #1B6AE6;
	
}

.choicesbox h1 {
	color: #1F3855;
	font-family: sans-serif;
	font-size: 5vw;
	margin-top: 22vw;
}

.choicesbox span::after {
	content: "and up";
	font-weight: bold;
	font-size: 2vw;
	color: #F00;
	position: absolute;
	
}

.choicesbox p {
	font-family: sans-serif;
	color: #1F3855;
	margin-top: 12vw;
	font-size: 2.5vw;
}

.choicesbox span {
	color: #1B6AE6;
	font-size: 8vw;
}

.choicesbox img {
	width: 15vw;
	margin-top: 5vw;
	
	
}



#accssold {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 48vw 55vw 30vw 40vw 30vw;
	grid-template-areas: "texttopper" "imgtopper" "disclose10" "descone" "tilt" "desctwo" "extend" "descthree" "hdc" "descfour" "opti";
	width: 90%;
	margin-left: 4%;
	gap: 2vw;
	
}

#texttopper h1 {
	font-size: 5vw;
	text-align: center;
	color: #ff0000;
	font-family: sans-serif;
}

#texttopper h1::after {
	content: "Perfect!";
	font-weight: bold;
	font-size: 6vw;
	color: #af14a5;
	position: absolute;
	margin-left: -40vw;
	margin-top: 11vw;
	transform: rotate(-30deg);
}

#texttopper p {
	font-size: 3vw;
	text-align: left;
	color: #1f3855;
	font-family: sans-serif;
	margin-top: 18vw;
}

#imgtopper {
	grid-area: imgtopper;
	display: grid;
	place-content: center;
	margin-top: 20vw; 
	
}

#accssold img {
  width: 50%;
  margin-left: 20vw;
  margin-bottom: 10vw;
}

#tiltmounts {
	grid-area: tilt;
	display: grid;
	place-content: center;
}

#accssold img {
	width: 50%;
	margin-left: 20vw;
	margin-bottom: 10vw;
}

#descone100 {
	grid-area: descone;
	display: grid;
	place-content: center;
}

.desctext5l h1 {
	font-size: 5vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: center;
}

.desctext5l p {
	font-size: 3vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
}

.desctext5l ul li {
	list-style: none;
	color: #1f3855;
	text-align: left;
	font-family: sans-serif;
	font-size: 3vw;
}

#extendmounts {
	grid-area: extend;
	display: grid;
	place-content: center;
}

#desctwo200 {
	grid-area: desctwo;
	display: grid;
	place-content: center;
}
.desctext5r h1 {
	font-size: 5vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: center;
}

.desctext5r p {
	font-size: 3vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
}

.desctext5r ul li {
	list-style: none;
	color: #1f3855;
	text-align: left;
	font-family: sans-serif;
	font-size: 3vw;
}

#hdcables {
	grid-area: hdc;
	display: grid;
	place-content: center;
}

#descthree300 {
	grid-area: descthree;
	display: grid;
	place-content: center;
}


#opticals {
	grid-area: opti;
	display: grid;
	place-content: center;
}

#descfour400 {
	grid-area: descfour;
	display: grid;
	place-content: center;
}



#onthemove {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 60vw;
	grid-template-areas: "moveverb" "moveicon";
	padding: 5vw;
}

#moveicon img {
	width: 75%;
	
}

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

#onthemove h1 {
	font-size: 5vw;
	font-family: sans-serif;
	color: #ff0000;
	text-align: left;
}


#onthemove p {
	font-size: 3vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
}


#onthemove ul li {
	list-style: none;
	font-size: 2.5vw;
	font-family: sans-serif;
	color: #1f3855;
	text-align: left;
}

.reviewer::before {
	content: url(../images/5starsml.jpg);
	position: absolute;
	top: -.5vw;
	right: 18vw;
}

.local-review p {
	font-size: 3vw;
	font-family: sans-serif;
}

#localright p {
	font-size: 3vw;
	font-family: sans-serif;
	color: #1f3855;
	position: relative;
	
	
}

#localleft ul li {
	list-style: none;
	color: #1f3855;
	font-size: 3.5vw;
}



}