@charset "utf-8";
/* CSS Document */

body{
	padding:0;
	margin:0;
	width:100%;
}

body h1,h2,h3{
	font-family: 'Google Sans', sans-serif; 
	color:#000000;
}

body p{
	font-family: 'Montserrat', sans-serif;
	font-size: 1.1rem;
	color:#222222;
}

#wrapper{
	position:absolute;
	margin:0 auto;
	width:100%;
}

.hmlogo{
	position:fixed;
	top:5px;
	left:3%;
	width:7%;
	z-index: 9999;
}

.header{
	position:fixed;
	margin:0 auto;
	width:100%;
	height:94px;
	background-color:#FFFFFF;
	border-bottom: 8px solid #9c712a; 
	z-index: 999; 
}

.menu{
	position:relative;
	top:30px;
	left:30%;
	width:55%;
	display: flex;
	justify-content: space-between;
	gap:20px;
	 
}

.menu a{
	flex-grow:1;
	font-family: 'Montserrat', sans-serif; 
	font-size: 1em;
	font-weight: 500;
	text-decoration:none;
	color:#222222;
	border: 2px solid #FFFFFF;
	transition: all .4s ease;
	padding:8px;
	text-align:center;
}

.menu a:hover{
	border:2px solid #000000;
}



.hmbackground{
	position:relative;
	margin:98px auto;
	width:100%;
	height:500px;
	background-image:url("Background/HomeDesk3.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
	display: flex;
	flex-direction: column;
	
}

#hometagline{
	position:relative;
	margin:145px auto;
	color: #FFFFFF;
	font-size: 3.5rem;
	text-shadow: 8px 8px 35px #000000;
}

#hometagline3{
	position:relative;
	margin:-110px auto;
	font-size: 2rem;
	color: #EFEFEF;
	text-align: center;
	text-shadow: 8px 8px 35px #000000;
}

.carddiv{
	position:relative;
	margin:-150px auto;
	width:100%; 
	text-align: center;
}

.carddiv a:link{text-decoration:none;}
.carddiv h2{font-size:1.5rem;}
.carddiv p{font-size:1rem;}

.cardflex{
	position:relative;
	margin:0 auto;
	width:70%;
	display: flex;
	justify-content: space-between;
	gap:30px; 
}

.card{
	flex-basis:30%;
	height:300px;
	background-color:#FFFFFF;
	text-align: center; 
	border-radius:25px;
	box-shadow: 2px 2px 4px #000;
}

.cardtext{
	position:relative;
	margin:0 auto;
	width:90%;
}

.hmbtn{
	position:relative;
	margin:60px auto;
	width:20%;
	padding:10px;
	background-color: #9C712A;
	border: 1px solid #e7c372;
	font-family: 'Montserrat', sans-serif;
	font-size: .9em;
	color: #EFEFEF;
	font-weight: 600;
	transition: all .4s ease;
	text-align: center;
}

.hmbtn:hover{
	background-color:#EFEFEF;
	color:#003d79;
}

.storageinfo{
	position:relative;
	margin:250px auto;
	width:100%;
}

.storageflex{
	position:relative;
	margin:0 auto;
	width:80%;
	display: flex;
	justify-content: space-between;
	gap:40px;
	align-items: center;
}

.storageinfo img{
	border-radius:25px;
	border: 3px solid black;
}

.footerhm{
	position:absolute;
	bottom:-150px;
	left:0;
	width:100%;
	height:300px;
	background: #000000;
background: linear-gradient(352deg,rgba(0, 0, 0, 1) 4%, rgba(107, 102, 102, 1) 98%);
}

.footerhm a{
	text-decoration: none;
	color:antiquewhite;
}

.footerflex{
	position:relative;
	margin:25px auto;
	width:80%;
	display: flex; 
	justify-content: space-between;
	gap:20px;
	align-items: center; 
	
}

.footerbox{
	flex-grow:1;
}

.footerinfo{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:30px;
	text-align: center;
	font-family: 'Montserrat', sans-serif; 
	color:#EFEFEF;
	font-size: .9em;
}

 

#sidebar{display: none;}

 

.storagebackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:425px;
	background-image: url("Background/storageDesk4.jpg");
	background-attachment: scroll;
	background-position:top,left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.storagebackground h2{
	position:relative;
	margin:auto;
	color: #EFEFEF;
	text-shadow: 2px 2px 3px #000000;
	font-size: 2rem;
	z-index: 99;

}

.services{
	position:relative;
	margin: 50px auto;
	width:90%;
}

.detailsflex{
	position:relative;
	margin:10px auto;
	width:70%;
	display: flex;
	justify-content: space-between;
	gap:40px;
	font-family:'montserrat', sans-serif;
	font-size: .9em;
	color:#222;
	font-weight:600;
}

.subcontent{
	position:relative;
	margin:0 auto;
	width:100%:
}

.subcontent a:link{text-decoration:none;}

.servicetext{
	position:relative;
	margin:50px auto;
	width:90%;
	height:450px;
	padding-bottom: 200px;
}

details{
	padding:10px;
	border:1px solid #333;
	border-radius:20px;
}


summary{
	padding:10px;
	 
	border-radius:20px;
}

.detailsbox{flex-basis:50%; text-align: center;}

.followup{
	position:relative;
	margin:20px auto;
	width:80%;
	padding-bottom: 20px;
}

.facilitybackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:425px;
	background-image: url("Background/facilityDesk2.jpg");
	background-attachment: scroll;
	background-position:bottom,left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.facilitybackground h2{
	position:relative;
	margin:auto;
	color: #EFEFEF;
	text-shadow: 2px 2px 3px #000000;
	font-size: 2rem;
	z-index: 99;

}

.subinfo{
	position:relative;
	margin:0 auto;
	width:80%;
	text-align: center;
}

.subinfo a:link{text-decoration:none;}

.subflex{
	position: relative;
	margin:40px auto;
	width:100%;
	display:flex;
	justify-content: space-between;
	gap:20px;
}

.subbox{flex-basis:30%;}

.portfoliocontainer{
	position:relative;
	margin:50px auto;
	width:90%;
	height:950px;
	padding-bottom: 200px;
}


.portfolio{
	position:relative;
	margin:0 auto;
	width:80%;
}

.aboutbackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:425px;
	background-image: url("Background/ABoutDesk.jpg");
	background-attachment: scroll;
	background-position:bottom,left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.aboutbackground h2{
	position:relative;
	margin:auto;
	color: #EFEFEF;
	text-shadow: 2px 2px 3px #000000;
	font-size: 2rem;
	z-index: 99;
}

.subcontent2{
	position:relative;
	margin:0 auto;
	width:100%;
	height:1300px;
}

.abouttext{
	position:relative;
	margin: 10px auto;
	width:80%;
}


.about{
	position:relative;
	margin:0 auto;
	width:80%; 
}

.aboutflex{
	position:relative;
	margin:0 auto;
	width:80%;
	display: flex;
	justify-content: space-between;
	gap:40px;
	align-items: center;
}

.aboutimgbox{flex-basis: 50%;}
.aboutbox{flex-basis:50%;}

.contactbackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:425px;
	background-image: url("Background/contactdesk.jpg");
	background-attachment: scroll;
	background-position:bottom,left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.contactbackground h2{
	position:relative;
	margin:auto;
	color: #EFEFEF;
	text-shadow: 2px 2px 3px #000000;
	font-size: 2rem;
	z-index: 99;
}



@media screen and (max-width:1680px){
	
.hmlogo{
	position:fixed;
	top:5px;
	left:3%;
	width:8%;
	z-index: 9999;
}
	
	
}


@media screen and (max-width:1440px){
.hmlogo{
	position:fixed;
	top:5px;
	left:3%;
	width:9%;
	z-index: 9999;
}
	
	.menu{ 
	top:35px;
	left:30%;
	width:55%; 
	 
}

	
	.card{
		height:270px;
	}	
	
	.carddiv p{font-size:.9rem;}
	
.detailsflex{ 
	width:90%;	 
	gap:40px;	 
	font-size: .9em;	 
}
	
.portfolio{
	position:relative;
	margin:0 auto;
	width:100%;
}


	
	
}

@media screen and (max-width:1366px){
.hmlogo{
	position:fixed;
	top:5px;
	left:3%;
	width:10%;
	z-index: 9999;
}
	
	.menu{ 
	top:35px;
	left:30%;
	width:55%; 
	 
}
	
	.cardflex{width:75%;}

	
	.card{
		height:270px;
	}	
	
	.carddiv p{font-size:.9rem;}	
	
}

@media screen and (max-width:1280px){
	
.hmlogo{
	position:fixed;
	top:5px;
	left:3%;
	width:11%;
	z-index: 9999;
}

	
	.hmbackground{ 
	height:450px; 
	
}
	
#hometagline{ 
	margin:130px auto;
	color: #FFFFFF;
	font-size: 2.8rem; 
}

#hometagline3{ 
	margin:-110px auto;
	font-size: 1.5rem; 
}
	
	.detailsflex{width:98%;}

.carddiv h2{font-size:1.2rem;}
.carddiv p{font-size:.85rem;}
	
.subcontent	p{font-size: .9em;}
	.servicetext p{font-size: .9em;}
	.detailsbox p{font-size: .9em;}
	summary p{font-size: .9em;}
	
}

@media screen and (max-width:1180px){
	
	.card{height:250px;}	
	
}

@media screen and (max-width:820px){
	
	.hmlogo{width:15%;}
	.menu{
	position:relative;
	top:45px;
	left:22%;
	width:75%;
	display: flex;
	justify-content: space-between;
	gap:20px; 
	 
}
	
.menu a{font-size: .9em; padding:8px;}
	
	.cardflex{width:94%;}
	.hmbtn{width:35%; padding:15px;}
	.storageflex{
		width:94%;
		flex-direction: column;
	}
	
	.subinfo{padding-bottom: 300px;}
	
	.storageflex img{width:80%;}
	
	.aboutflex{flex-direction: column;}
	
	.subflex{flex-direction: column;}
	
	.portfoliocontainer{ 
	margin:-250px auto; 
	height:950px;
	padding-bottom: 400px;
}
	
.footerhm{
	position:absolute;
	bottom:-250px;
	left:0;
	width:100%;
	height:300px;
	background: #000000;
background: linear-gradient(352deg,rgba(0, 0, 0, 1) 4%, rgba(107, 102, 102, 1) 98%);
}
	
	#aboutfooter{bottom:-850px;} 

	
}

@media screen and (max-width:732px){
	.hmlogo{
	position:fixed;
	top:1px;
	left:32%;
	width:33%;
	z-index: 9999;
}
	
	.menu{display: none;}

	
	#hometagline{ 
	margin:130px auto;
	color: #FFFFFF;
	font-size:1.8rem; 
		text-align: center;
}
	
.hmbackground{
	position:relative;
	margin:98px auto;
	width:100%;
	height:500px;
	background-image:url("Background/HOMEMOB2.jpg");
	background-position:top, left;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
	display: flex;
	flex-direction: column;
	
}


#hometagline3{ 
	margin:-110px auto;
	font-size: 1.1rem; 
}

	
	.cardflex{
		flex-direction: column;
	}
	
	.cardflex img{width:20%;}
	
	.hmbtn{
		padding:22px;
		font-size: 1.2em;
	}
	
	.footerflex{
		flex-direction:column;
	}
	
	.footerflex iframe{
		width:90%;
		height: 100px;
	}
	
	.footerhm{padding-bottom:80px;}
	
	.footerinfo{font-size: .8em; padding-bottom: 20px;}
	
	#sidebar{
	display:block;
	background:#333333;
	position:fixed;
	width:200px;
	left:-200px;
	top:0; 
	opacity:.90;
	height:100%;
	transition: left 0.3s linear;
	z-index: 9999999;
}

	
	
#sidebar.visible{
	left:0;
	transition: left 0.3s linear;
}
		
#sidebar-btn{
	display:inline-block;
	vertical-align:middle;
	width:40px;
	height:15px;
	cursor:pointer;
	margin:20px;
	position:fixed;
	top:30px;
	right:15px;	
	z-index: 999999999;
}
			
#sidebar-btn span{
	height:3px;
	background:#222222;
	margin-bottom:5px;
	display: block;
}
	
#sidebar-btn span:nth-child(2){width:75%;}
#sidebar-btn span:nth-child(3){width:60%;}
	
ul{
	margin:0;
	padding:0;				
}
		
ul li{list-style:none; padding-top:10px;}
		
ul li a{
	font-family: 'Montserrat', sans-serif;
	font-size:1em;
	color:#FFFFFF;
	border-bottom:.25px solid #FFFFFF;
	display:block;
	width:152px;
	padding:15px 0 15px 10px;
	text-decoration:none;				
}
	
/*CSS for sub pages*/
	
.storagebackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:500px;
	background-image: url("Background/storageMob2.jpg");
	background-attachment: scroll;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}
	
	
.servicetext{
	position:relative;
	margin:50px auto;
	width:90%;
	height:950px;
	padding-bottom: 200px;
}
	
	.detailsflex{flex-direction: column;}


.facilitybackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:500px;
	background-image: url("Background/FacilityMob4.jpg");
	background-attachment: scroll;
	background-position:top, left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}
	
	.facilitybackground h2{margin:auto; font-size: 1.7rem;}
	
	.subcontent{
		margin:-40px auto;
	}

.subcontent	p{font-size: .95em;}
	
	.subflex{
		flex-direction: column;
	}
	
	.subinfo{padding-bottom:200px;}

	
.aboutbackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:500px;
	background-image: url("Background/AboutMob2.jpg");
	background-attachment: scroll;
	background-position:top,left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}
	
.aboutbackground h2{margin:auto; font-size: 1.7rem;}

	.aboutflex{flex-direction: column;}	
	
	.subcontent2{
	position:relative;
	margin:0 auto;
	width:100%;
	height:2600px;
}
	
.contactbackground{
	position:relative;
	margin:102px auto;
	width:100%;
	height:425px;
	background-image: url("Background/ContactMob.jpg");
	background-attachment: scroll;
	background-position:bottom,left;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}
	
.contactbackground h2{margin:auto; font-size: 1.7rem;}

	.portfoliocontainer{ 
	margin:-250px auto; 
	height:950px;
	padding-bottom: 600px;
}

	
}