html {
	box-sizing: border-box;
	font-size: 16px;
	font-family: 'Source Sans Pro', sans-serif;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

img {
	max-width: 100%;
	height: auto;
}

html {
	scroll-behavior: smooth;
}

@keyframes reveal {
	from {
		transform: translateY(-200px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes appear {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes down {
	from {
		transform: translateY(-200px);
		opacity: 0;
	}

	to {
		transform: translateY(150px);
		opacity: 1;
	}
}

@media only screen and (max-width: 900px) {
	@keyframes down {
		from {
			transform: translateY(-200px);
			opacity: 0;
		}

		to {
			transform: translateY(100px);
			opacity: 1;
		}
	}
}

@keyframes up {
	from {
		transform: translateY(400px);
		opacity: 0;
	}

	to {
		transform: translateY(100px);
		opacity: 1;
	}
}

/* //////////////////////////////////////////////////////////////// */

.container {
	max-width: 1024px;
	margin: 0 auto;
	position: relative;
	margin-top: 0;
}

@media only screen and (max-width: 900px) {
	.container,
	.container-lite {
		padding: 0 1em;
		margin: 6em auto;
		flex-direction: column;
	}
}

.container-lite {
	max-width: 1024px;
	margin: 4em auto;
}

.stack {
	margin: 0 auto 6em;
	padding-top: 6em;
}

@media only screen and (max-width: 900px) {
	.stack {
		margin: 0 auto 2em;
	}
}

header {
	position: relative;
	background-color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	animation: .9s forwards reveal;
	opacity: 0;
	z-index: 2;
}

.header-logo {
	height: 60px;
	margin-right: 3em;
	animation: .9s forwards reveal;
	opacity: 0;
	animation-delay: .2s;
}

.header-info:nth-child(2) {
	animation: .9s forwards reveal;
	opacity: 0;
	animation-delay: .4s;
}

.header-info:nth-child(3) {
	animation: .9s forwards reveal;
	opacity: 0;
	animation-delay: .6s;
}

.header-info:nth-child(4) {
	animation: .9s forwards reveal;
	opacity: 0;
	animation-delay: .8s;
}
.header-info a {
	display: flex;
	color: white;
	text-decoration: none;
	justify-content: center;
	align-items: center;
}

.header-info img {
	width: 20px;
	height: 20px;
}

.info-data p {
	color: silver;
	font-size: .8em;
}

.info-data span {
	font-weight: bold;
	font-size: .9em;
}

.info-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: white;
	border-radius: 100%;
	margin: 1em;
}

nav {
	background-color: rgba(25,25,25,0.8);
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 800px;
	margin: 0 auto;
	animation: .9s forwards reveal;
	opacity: 0;
	animation-delay: 1.2s;
	position: sticky;
	top: 0;
	z-index: 9;
}

nav ul {
	display: flex;
	padding: 1em;
}

nav ul a {
	color: white;
	margin: 1em;
	font-weight: bold;
	text-decoration: none;
}

nav button {
	border: 0;
	background-color: maroon;
	padding: 1.4em;
}

nav button a {
	text-decoration: none;
	color: white;
}

@media only screen and (max-width: 822px) {
	nav {
		display: none;
	}
}

@media only screen and (max-width: 900px) {
	header {
		justify-content: center;
	}

	.info-data {
		display: none;
	}

	.header-logo {
		margin-right: 4em;
	}

	.info-image {
		margin: .6em;
	}
}

.hero {
	background-color: silver;
	height: 800px;
	background-image: url(img/Banner-Home.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	animation: .6s forwards appear;
	opacity: 0;
	animation-delay: .8s;
	margin-top: -84px;
	position: relative;
	z-index: 1;
}

@media only screen and (max-width: 1400px) {
	.hero {
		height: 700px;
	}
}

@media only screen and (max-width: 1200px) {
	.hero {
		height: 600px;
	}
}

.hero span {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	outline: solid 2em rgba(255,255,255,0.2);
	height: 500px;
	width: 500px;
	border-radius: 100%;
	animation: 1s forwards down;
	animation-delay: 1.2s;
	opacity: 0;
}

.hero img {
	height: 250px;
	opacity: 0;
	animation: 1s forwards appear;
	animation-delay: 2s;
}

@media only screen and (max-width: 1200px) {
	.hero span {
		height: 400px;
		width: 400px;
	}
}

@media only screen and (max-width: 900px) {
	.hero span {
		height: 280px;
		width: 280px;
	}
	.hero img {
		height: 160px;
	}
}

.hero span h1 {
	color: white;
	position: absolute;
	top: 0;
	left: 100px;
	width: 550px;
	font-weight: bold;
	font-size: 4em;
	animation: .9s forwards up;
	animation-delay: 1.4s;
	opacity: 0;
}

@media only screen and (max-width: 1200px) {
	.hero span h1 {
		font-size: 3em;
		width: 450px;
	}
}

.hero span button {
	color: white;
	position: absolute;
	top: 250px;
	left: 100px;
	border: 0;
	background-color: black;
	padding: 1em 2em;
	animation: .9s forwards up;
	animation-delay: 1.9s;
	opacity: 0;
	font-size: 1em;
	cursor: pointer;
	transition: .3s;
}

@media only screen and (max-width: 1200px) {
	.hero span button {
		top: 200px;
	}
}

@media only screen and (max-width: 900px) {
	.hero span button {
		top: 130px;
		left: 30px;
		font-size: .8em;
		padding: .6em .8em;
	}
}

.hero span button:hover {
	background-color: #222;
}

.box {
	margin-left: 320px;
}

@media only screen and (max-width: 1900px) {
	.box {
		margin-left: 120px;
	}
}

@media only screen and (max-width: 1400px) {
	.box {
		margin-left: 80px;
	}
}

@media only screen and (max-width: 900px) {
	.box,
	.box span {
		margin: 0 auto;
	}

	.box span {
		bottom: -162px;
	}

	.hero span h1 {
		font-size: 2em;
		width: 280px;
		left: 30px;
	}
}

.box a {
	color: white;
	text-decoration: none;
}

main {
	display: flex;
	animation: .6s forwards reveal;
	opacity: 0;
	animation-delay: 2.6s;
}

.intro {
	margin: 1em;
	position: relative;
	flex: 2;
	background-image: url(img/dots.png);
	display: flex;
	justify-content: flex-end;
}

.intro img {
	height: 400px;
	margin-top: 40px;
}

.intro span {
	position: absolute;
	bottom: -30px;
	right: -30px;
	height: 180px;
	width: 180px;
	background-color: silver;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	border-bottom: solid 6px red;
	font-weight: bold;
}

@media only screen and (max-width: 900px) {
	.intro span {
		right: -10px;
	}
}

.about {
	flex: 3;
	padding: 6em 0 0 3em;
	margin-bottom: -3em;
}

@media only screen and (max-width: 900px) {
	.about {
		margin-top: 4em;
		padding-left: 1em;
	}
}

.about p {
	line-height: 1.6;
	font-size: 1.2em;
}

.subtitle {
	font-weight: bold;
	color: red;
	font-size: 2em;
}

.title {
	font-weight: bold;
	font-size: 3em;
}

.about p {
	margin-top: 2em;
}

.services {
	text-align: center;
	background-image: url(img/bg-dot.png);
}

.cards {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 6em auto -6em;
	flex-wrap: wrap;
}

.card {
	text-align: left;
	height: 300px;
	border: solid 1px silver;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	justify-content: space-around;
	padding: 1em;
	margin: 1em;
	flex: 2;
	min-width: 400px;
}

@media only screen and (max-width: 900px) {
	.card {
		min-width: 300px;
	}
}

.card img {
	height: 50px;
}

.services h3 {
	font-weight: bold;
	font-size: 1.4em;
}

.services p {
	font-size: 1.2em;
}

.plus {
	background-image: url(img/tools-bg.jpg);
	background-size: cover;
	background-position: center;
	color: white;
}

.plus > .bg {
	background-color: rgba(10, 20, 34, 0.9);
}

.plus-info {
	display: flex;
	align-items: center;
}

.plus-text {
	flex: 1;
}

.plus-text h1 {
	font-size: 1.6em;
	padding-bottom: 1em;
}

.plus-list {
	flex: 1;
	margin-left: 4em;
}

.plus-list span {
	display: flex;
	margin: 3em 1em;
	font-size: 1.2em;
	align-items: center;
}

.plus-list span img {
	margin-right: 1em;
	width: 30px;
}

@media only screen and (max-width: 1130px) {
	.plus-info {
		flex-direction: column;
	}

	.plus-text {
		text-align: center;
		padding: 6em 2em 2em;
	}

	.plus-list {
		margin-left: 0;
	}
}

.brands {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 3em;
}

.brand h1,
.brand h2 {
	text-align: center;
}

@media only screen and (max-width: 830px) {
	.brands {
		flex-direction: column;
	}

	.brands img {
		flex-direction: column;
		margin: 1em;
	}
}

.sell {
	background-image: url(img/sell-bg.jpg);
	background-size: cover;
	background-position: center;
	color: white;
}

.sell .title {
	padding: 1em;
}

.sell .bg {
	background-color: rgba(20, 20, 20, 0.9);
}

.sell button {
	border: none;
	background-color: maroon;
	padding: 2em 2em;
}

.sell button a {
	color: white;
	text-decoration: none;
	font-size: 1.4em;
}

@media only screen and (max-width: 1130px) {
	.sell button {
		margin-bottom: 4em;
		margin-top: 2em;
	}

	.sell .plus-text,
	.sell .title {
		padding: 0;
		padding-top: 1em;
	}
}

.divider {
	height: 4px;
	width: 100%;
	background-color: maroon;
	margin-bottom: 6em;
}

.testimonials {
	background-image: url(img/testimonials.png);
	background-size: cover;
	color: white;
	padding: 4em 2em 10em;
	text-align: center;
}

.testimonials h1 {
	font-weight: bold;
	font-size: 2em;
}

.testimonials h2 {
	font-weight: bold;
	font-size: 3em;
}

.testimonials h3 {
	color: red;
}

.testimonials span {
	height: 1px;
	background-color: silver;
	width: 300px;
}

.testimonials .card {
	position: relative;
	background-color: white;
	color: black;
	z-index: 3;
	margin: 3em;
}

@media only screen and (max-width: 900px) {
	.testimonials {
		padding: 1em 2em;
	}

	.testimonials .card {
		margin: 4em auto;
		height: 320px;
	}

	.testimonials .card span {
		width: 240px;
	}

	.testimonials .cards {
		margin: 2em auto;
		justify-content: flex-start;
	}

	.testimonials .card h3 {
		padding-bottom: 1em;
	}

	.testimonials .card p {
		margin-top: 1em;
	}
}

.avatar {
	border-radius: 100%;
	height: 100px;
}

.quote {
	margin-top: 1em;
	width: 50px;
}

.testimonials .card:before {
	content: '';
	position: absolute;
	left: -30px;
	height: 320px;
	background-color: red;
	width: 30px;
	z-index: -1;
}

.footer {
	background-color: silver;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.footer-info {
	display: flex;
	justify-content: space-between;
	border-bottom: solid 1px gray;
	padding: 0 0 4em 0;
}

@media only screen and (max-width: 1100px) {
.footer-info {
		padding: 0 1em 4em;
	}
}

@media only screen and (max-width: 900px) {
	.footer-info {
		padding: 0 0 4em 0;
	}
}

.footer-info article {
	width: 300px;
}

.footer-info img {
	height: 80px;
}

.footer-info h4 {
	font-weight: bold;
	font-size: 1.2em;
}

.contact {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

@media only screen and (max-width: 900px) {
	.contact {
		flex-direction: column;
		align-items: flex-start;
	}
	.contact p {
		margin-bottom: 2em;
	}
}

.contact span {
	font-weight: bold;
	font-size: 1.4em;
}

.contact p {
	margin-top: .6em;
	font-weight: bold;
}

.bottom {
	background-color: black;
	color: white;
	text-align: center;
	padding: 2em
}

.bottom a {
	color: white;
}