@charset "utf-8";
/* CSS Document */
.clear {
	clear: both;
}
h1{
	font-family: Salaryman;
}
h2 {
	font-family: Roboto, "Roboto Light", "Roboto Condensed";
}
p {
	font-family: Roboto, "Roboto Light", "Roboto Condensed";
	font-style: italic;
}
a {
	font-family: Salaryman;
}
footer a {
	font-family: Roboto, "Roboto Light", "Roboto Condensed";
}
header {
	background-color: rgba(0, 0, 0, 0.9);
	height: 225px;
}
.upper-header{
	width: 100%;
	display: inline;
}
.logo {
	width: 12.25%;
	float: left;
	margin: 2%;
}
.nav {
	list-style-type: none;
	padding: 0;
	margin: auto auto 1%;;
	width: 100%;
	
}
.nav li {
	display: inline;
	margin: auto;
	background-color: #D69292;
	padding: 1% 10% 1% 7.22%;
	cursor: pointer;
}
.nav li:hover {
	background-color: tan;
}
.nav li a {
	text-decoration: none;
	color: white;
}
.nav li a:hover {
	color: #D69292;
}
.company-name {
	float: left;
	font-size: 50pt;
	margin: 1%;
	padding: 0;
	color: white;
	
}
.cart-button {
	float: right;
	background-color: #D69292;
	text-decoration: none;
	color: white;
	padding: 15px;
	margin: 3% 3%;
}
.cart-button:hover {
	background-color: grey;
	color: #D69292;
}
.subtitle {
	width: 100%;
	font-size: 50pt;
	text-align: center;
	color: white;
	
}
.subtitle-text {
	font-size: 16pt;
	color: white;
	text-align: center;
	
}
.subtitle-container {
	margin: 0 0 5% 0;
}
.footer-links {
	color: white;
	background-color: black;
	text-decoration: none;
	margin: 5% 5%;
	padding: 1% 2%;
}
.footer-links:hover {
	color: #D69292;
	background-color: white;
}
.footer-text{
	color: white;
	font-size: 20pt;
	text-align: center;
	float: right;
}

.background-img {
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-height: 100%;
	min-width: 100%;
	z-index: -100;
	-ms-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: none;
}
@media only screen and (min-width: 2560px) {
	.logo{
		width: 10%;
	}
	.nav li {
		padding-left: 10.9%;
		height: 362px;
	}
	.cart-button {
		padding: 25px;
	}
	.company-name {
		font-size: 100pt;
	}
	body {
		background-color: grey;
	}
	
	.console-img {
		width: 30%;
		margin-top: -10%;
	}
	.subtitle {
		margin-bottom: 5%;
		margin-right: 25%;
	}
	
}
@media only screen and (max-width: 600px) {
	header {
		height: 100px;
	}
	.nav {
	  display: block;
	  position: absolute;
  	  top: 0;
 	  left: 0;
  	  background: black;
 	  width: 100vw;
  	  height: 100vh;
  	  overflow: hidden;
  	  color: white;
  	  transform: translateY(-100%);
 	  transition: transform 0.2s ease;
	}
	.logo {
		display: none;
	}
	.cart-button {
		display: none;
	}
	.ham {
		position: absolute;
  		z-index: 1000;
  		top: 20px;
  		right: 20px;
  		width: 36px;
  		height: 36px;
  		border: none;
 		cursor: pointer;
  		background-color: white;
 		background-image: url("https://ljc-dev.github.io/testing0/ham.svg");
 		background-size: 100%;	
	}
	.company-name {
		font-size: 35pt;
	}
	.explore-btn {
		display: none;
	}
	.subtitle {
		font-size: 35pt;
		text-align: center;
	}
	.console-img {
		width: 100%;
		margin-top: 5%;
	}
	.content-container2 {
		margin: 0;
	}
	.content-img1, .content-img2, .content-img3, .content-img4 {
		width: 100%;
		margin-top: 20%;
		margin-bottom: 35%;
	}
	.content-img1:hover, .content-img2:hover, .content-img3:hover, .content-img4:hover {
		width: 100%;
	}
	.footer-links {
		margin: 3%;
		display: block;
		text-align: center;
		padding: 10px;
	}
}