* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

.lb-image {
	width: 900px;
	height: 900px;
}
.lb-outerContainer,
.lb-dataContainer {
	width: 1000px;
	height: 1000px;
}
​
/* styles the large box at the top that contains the video */
.jumbotron {
	margin-top: 50px;
	height: 50vh;
	position: absolute;
	z-index: 0;
	color: rgb(248, 248, 248);
	box-shadow: 0px 1px 1px 1px rgb(184, 183, 183);
}
/* as the name implies, this styles the text contained in the large box */
.text-in-jumbotron {
	position: relative;
	z-index: -1;
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 50vh;
	padding: 35px;
	font-size: 18px;
	color: rgb(192, 192, 192);
	font-weight: bold;
	text-shadow: 1.5px 1.5px rgb(7, 7, 7);
}
/* styling for 'about' paragraphs on home page */
.about-tma {
	padding: 0px 0px 20px 0px;
	box-sizing: border-box;
	box-shadow: 0px 0px 1px 1px rgb(184, 183, 183);
	margin-top: 45px;
}

/* used to resize the box that contains the bxSLider, is left small FOR NOW due to small photo sizes (waiting on larger photos) */
.slider-container {
	margin: 0 auto;
	width: 300px;
}
/* styling for box surrounding photos on services page */
.photo-box {
	padding: 20px;
	margin: 20px auto;
	border: 10 px solid white;
	box-shadow: 0px 0px 5px 2px #ccc;
}
/* used to size every image on the website except the logo, this is due to the photos being very small in size (waiting on high res images) */
img:not(.logo) {
	width: 280px;
	height: 280px;
}
/* logo styling */
.logo {
	padding: 10px;
	justify-content: center;
}

.logo h4 {
	font-size: 12px;
	padding-bottom: 5px;
}
.logo img {
	height: 50px;
	width: 75px;
}
/* styling for paragraphs */
.words {
	width: 60%;
	padding: 25px 10px 0px 10px;
	margin: auto;
	font-size: 17px;
}
/* styling for headings  */
.paragraphHeadings {
	color: black;
	margin: 25px;
}
/* styles the nav */
nav {

	display: flex;
	justify-content: space-around;
	align-items: center;
	/* min-height: 8em; */
	height: 90px;
	background-color: white;
	font-family: "Poppins", sans-serif;
	box-shadow: 0px 0px 3px 3px rgb(138, 136, 136);
}
/* used to clean up the nav links */
.nav-links {

	display: flex;
	justify-content: space-around;
	font-size: 15px;
	width: 100%;
}
/* styling to control what happens when the nav links are hovered over (highlight basically) */
nav a:hover {
	color: rgba(94, 94, 95, 0.88);
}
/* styling for all a tags in the nav, helps to clean them up */
.nav-links a {
	text-decoration: none;
	letter-spacing: 4px;
	font-weight: bolder;
	font-size: 15px;
	color: black;
}
/* used for removal of the list bullets */
.nav-links li {
	list-style: none;
}
/* styling for the logo and the text with it */
.logo {
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 16px;
}
/* hides the burger on desktop view */
.burger {
	display: none;
}
/* styling for the body of the website */
body {
	text-align: center;
	font-family: "Poppins", sans-serif;
	background-image:linear-gradient(0deg, rgba(255 255 255 / 85%), rgba(255 255 255 / 85%)), url("bgpic.jpg");
	/* background-color: rgba(240, 33, 33, 0.88) !important;
	background-blend-mode: screen;
z-index:99999 */

}



/* styling for input and label on contact page */
input,
label {
	text-align: center;
	width: 400px;
	display: inline-block;
	padding: 5px 5px 5px 5px;
}
/* styling for the text box on contact page */
textarea {
	width: 400px;
	height: 200px;
	display: inline-block;
	padding: 5px 5px 5px 5px;
}
/* button styling on the contact page */
button {
	cursor:pointer;
	width: 80px;
	height: 40px;
	border-radius: 15px 15px 15px 15px;

	background-color: #5794f7;
}
/* button styling on hover (used on contact page) */
button:hover {
	background-color: #59eea0;
	color: white;
}
/* used to make the three bars of the burger black and the same size */
.burger div {
	width: 25px;
	height: 3px;
	background-color: black;
	margin: 5px;
	transition: all 0.3s ease;
}
/* styles all list items to keep things neat */
li {
	border: 1px;
	list-style-position: inside;
	text-align: justify-all;
	align-items: center;
	font-size: 17px;
}
/* styling for list headings */
.listHeadings {
	color: blue;
}
/* styling for the images on the media page, makes them have a border when hovered over */
.flickrFeed img:hover {
	border: 3px solid rgb(80, 163, 240);
}

.usedEquipmentFeed img:hover {
	border: 3px solid rgb(80, 163, 240);
}
.usedEquipmentFeed {
	margin-bottom: 500px;
}

iframe:hover {
	border: 3px solid rgb(80, 163, 240);
}

.partsTextBox textarea {
	margin: 10px;
	height: 150px;
	width: 600px;
	display: inline-block;
}

.partListings:hover {
	color: blue;
	cursor: pointer;
}
/* this is used to change the styling when the screen gets small enough to be considered mobile view */
@media screen and (max-width: 1000px) {
	/* body {
		overflow-x: hidden;
	} */
	/* puts the nav links into a column */
	.nav-links {
		position: absolute;
		right: 0px;
		height: 92vh;
		top: 5.5em;
		background-color: white;
		background-blend-mode: color;

		flex-direction: column;
		align-items: center;
		width: 30%;
		transform: translateX(100%);
		z-index: 99;
		/* display none when not active */
		display:none
	}
	/* styling for the list items */
	.nav-links li {
		opacity: 0;
	}
	/* stylign for the burger making it viewable when in mobile view */
	.burger {
		display: block;
		cursor: pointer;
	}
	/* class to be applied to the nav in the js, used to animate the nav bar into the page */
	.nav-active {
		transform: translateX(0%);
		transition: transform 0.5s ease-in;
		/* use display flex when active to show the pieces on the page */
		display:flex;

	}
}

/* used for animation of the nav links */
@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

/* these classes are used to amimate the burger and make it into an x when clicked on */
.toggle .line1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
	opacity: 0;
}

.toggle .line3 {
	transform: rotate(45deg) translate(-5px, -6px);
}

/* styling for the footer */
footer {
	color:grey;
position:inherit;
margin-top:250px;
	width:100%;
	/* margin-top: 90px; */
	bottom: 0;
	left: 0;
	padding: 20px 0px 20px 20px;
	height: auto;
	text-align: left;
	font-size: 14px;
	/* background-color: #5794f7; */
	background-color: rgba(238, 238, 238, 0.88) !important;
	background-blend-mode: color;
	font-family: "Poppins", sans-serif;
	font-weight: bold;
	box-shadow: 0px 0px 3px 3px rgb(138, 136, 136);
}
footer a{
	color:grey;
	font-size:12px;
}
.copyright-info {
	text-align: right;
	font-size: 10px;
	color: rgb(138, 136, 136);
	margin-right:10px
}

/* used for google maps styling */
/* .maps{
	height:300px;
	width: 300px;
	align-content: center;
	margin: 25px 0px 0px 25px;
	border: 10px solid black;
	box-shadow: 0px 0px 5px 2px #ccc;
	
} */