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-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/image-three.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;
	
	}


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













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



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



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


}



#comp-grid {
	display: grid;
	grid-template-columns: 5vw 70vw 5vw;
	grid-template-rows: 30vw;
	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;

}

#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 20px 25px rgba(0,0,0,0.6);
	margin-bottom: 4vw;
	
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4vw;
	border-radius: 5px;
	
}

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

}



.container {
	display: grid;
	display: -ms-grid;
	-ms-grid-rows: 20vw 20vw;
	grid-template-rows: 20vw;
	grid-template-columns: 15vw 15vw 15vw 15vw 15vw;
	gap: 4vw;
	height: 30vw;
	place-content: center;
	
	background-image: url(../images/concreto8.jpg);
	
}



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

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



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


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

.child-1 img {
	height: 10vw;

}

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

}

.child-2 img {
	height: 10vw;

}


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


}


.child-3 img {
	height: 9vw;
	margin-top: 18px;
}

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


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

}

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


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

}



#verbcycle {
	display: grid;
	grid-template-columns: 50% 50%;
	width: 95%;
	grid-template-areas: "introverb introverb" "buildstate buildcy";
	margin: auto;
	margin-top: 2vw;
	position: relative;
}


#introverbiage {
	grid-area: introverb;
	background-color: #F76410;
	border-radius: 20px;
	margin: auto;
}

#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: 2.5vw;
	color: #2E79F4;
	
}

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


#introverbiage p {
	
	font-family: Quicksand, Montserrat, courier, sans-serif;
    color: #FFFFFF;
	font-size: 1vw;
}


#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/build360.jpg);
	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: 37vw;
	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 {
	font-size: .7vw;
	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: grid;
	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/metal-broken10.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/image14-blend.jpg);
	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;

}


#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: -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) {
		
	.nav-links {
		width: 90%;
		
	}
	


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


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






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


body {
		overflow-x: hidden;	
		
	}

nav {
	background:  url(../images/image-three-600.jpg);
	background-size: cover;
}
.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: 3.5vw;
	
}

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



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

#verbcycle {
	display: grid;
	grid-template-columns: 50% 50%;
	width: 95%;
	grid-template-areas: "introverb introverb" "buildstate buildstate" "buildcy buildcy";
	margin: auto;
	margin-top: 2vw;
	position: relative;
}


#introverbiage h1{
	
	font-size: 3.5vw;
}

#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: 100vw;
	
}

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

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

}




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

#capleft {
	background-image: url(../images/metal-broken10.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;
	
	
}

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



#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/image15-blend.jpg);
	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;
}





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


}