.img-fluid {
	max-width: 100%;
	height: auto;
}
.container {
	max-width: 100%;
}
h1 {
	font-family: Segoe UI, sans-serif;
	font-size: 44px;
}
h2 {
	font-size: 32px;
	font-family: Segoe UI, sans-serif;
	font-weight: 500;
}
h3 {
	font-family: Segoe UI, sans-serif;
	font-size: 24px;
}
p {
	font-family: Segoe UI, sans-serif;
	font-size: 18px;
}
.btn {
	font-family: Segoe UI, sans-serif;
	font-size: 22px;
}
.banner-btn {
	font-weight: 500;
}
.header-d {
	display: none;
	width: 100%;
}
.header-m {
	display: block;
	width: 100%;
}
.header,
.banner1,
.products,
.banner2,
.banner3,
.banner4,
.banner5,
.m365,
.surface_wrapper,
.footer {
	max-width: 1400px;
	margin: 0 auto;
}
.wrapper {
	margin-bottom: 40px;
}
.navigation {
	display: flex;
	flex-direction: column;
	text-align: end;
}
.navigation p {
	display: block;
	cursor: pointer;
}
.nav-link,
.navigation p {
	padding: 20px;
}
.active {
	border-bottom: 2px solid #000000;
}
.nav-link a,
.navigation p {
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
	font-family: Segoe UI, sans-serif;
	font-size: 18px;
}
.nav-link {
	display: none;
}
/* Products */
.products {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.product {
	width: 50%;
}
/* Banners */
.banner {
	display: flex;
	flex-direction: column;
}
.banner1 {
	background-color: #9ac6e5;
	color: #325a61;
}
.banner2 {
	background-color: #fae4a2;
	color: #672a6f;
}
.banner3 {
	background-color: #f2a790;
	color: #672a6f;
}
.banner4 {
	background-color: #c0dbd2;
	color: #30436c;
}
.banner5 {
	background-color: #0b24b8;
	color: #ffffff;
}
.banner2 .btn,
.banner3 .btn {
	color: #672a6f;
}
.banner2 .circle,
.banner3 .circle {
	border: 1px solid #672a6f;
}
.banner4 .btn {
	color: #30436c;
}
.banner4 .circle {
	border: 1px solid #30436c;
}
.banner5 .btn {
	color: #7dcaf9;
}
.banner5 .circle {
	border: 1px solid #7dcaf9;
}
.content-wrapper {
	padding: 30px;
}
.content p {
	padding: 20px 0px;
}
.inline-block {
	display: inline-block;
}
.circle {
	border-radius: 50%;
	display: inline-block;
	height: 30px;
	width: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner-btn {
	margin: 0px;
}

/* surface_wrapper */
.m365 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-color: #c5b4e3;
}
.m365-content,
.surface-content {
	padding: 30px;
}
.m365-texts {
	position: relative;
	padding: 20px 0px;
}
.m365-icons-mobile {
	display: block;
	position: absolute;
	top: -50px;
	right: 0px;
	max-width: 70px;
}
.m365-img {
	background-image: url(../images/m365-lp.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 500px;
}

.m365-icons-mobile {
	display: block;
}
.m365-icons-desktop {
	display: none;
}
.btn-m365,
.btn-surface {
	color: #ffffff;
	background-color: #386eda;
	border-radius: 5px;
	padding: 10px 15px;
	text-decoration: none;
}

.btn-white {
	color: #1a1a1a !important;
	background-color: #fff !important;
}

.btn-white:hover {
	color: #1a1a1a !important;
	background-color: #f4f4f4 !important;
}

.surface_wrapper {
	background-color: #f2f2f2;
	color: #000000;
	display: flex;
	flex-direction: column;
}
.surface-texts {
	padding: 20px 0px;
}
.surface-title,
.m365-title {
	padding: 20px 0px;
}
.footer {
	background-color: #f2f2f2;
	padding: 30px;
}
@media screen and (min-width: 768px) {
	.header-d {
		display: block;
	}
	.header-m {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	h1 {
		font-family: Segoe UI, sans-serif;
		font-size: 50px;
	}
	h2 {
		font-size: 40px;
	}
	h3 {
		font-size: 34px;
	}
	p {
		font-family: Segoe UI, sans-serif;
		font-size: 20px;
	}
	.btn {
		font-size: 24px;
	}

	.nav-link {
		display: block;
	}
	.navigation {
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: center;
	}
	.navigation p {
		display: none;
	}
	.nav-link {
		padding: 10px 15px;
	}
	.nav-link a,
	.navigation p {
		font-size: 20px;
	}
	.product {
		width: 25%;
	}
	/*Banners*/
	.banner {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.m365,
	.surface_wrapper {
		flex-direction: row;
		justify-content: space-between;
	}
	.surface_wrapper {
		min-height: 500px;
	}
	.content,
	.banner-img {
		flex: 1 1 0;
	}
	.content-wrapper {
		padding: 20px 50px;
	}
	.banner2,
	.banner4 {
		flex-flow: row-reverse;
	}
	.banner1 .banner-img,
	.banner3 .banner-img,
	.banner5 .banner-img {
		text-align: end;
	}
	.banner2 .banner-img,
	.banner5 .banner-img {
		text-align: start;
	}
	.m365 {
		flex-direction: row;
		justify-content: space-between;
	}
	.m365-icons-mobile {
		display: none;
	}
	.m365-icons-desktop {
		display: block;
	}
	.m365-img {
		flex-basis: 50%;
		align-self: center;
		padding: 10px;
	}
	.m365-icons {
		max-width: 20%;
		flex-basis: 25%;
		align-self: center;
	}
	.m365-content {
		flex-basis: 50%;
	}
	.surface-img {
		align-self: flex-end;
	}
}

@media screen and (min-width: 1200px) {
	.content-wrapper {
		padding: 10px 60px;
	}
	.surface-texts {
		max-width: 480px;
	}
}