/* Common styles */

.home h2 {
	font-weight: 400;
	margin-bottom: 7px;
}
@media (max-width: 480px) {
	.home hr.margin,
	.home hr.margin.double {
		margin: 0;
		height: 0;
	}
}

/* Reports */
.home .reports .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home .reports .article.header:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 100px;
	background: #a8a8a8;
}
.home .reports .columns .buttons {
	width: fit-content;
    	flex-direction: row;
}
.home .reports .columns > div:last-child {
	white-space: nowrap;
	filter: drop-shadow(0 0 8px #cfd8dc);
	will-change: filter; /* Safari */
}
.home .reports a.button.image {
	position: relative;
	border: 1px solid #cfd8dc;
	transition: .3s margin;
	will-change: filter; /* Safari */
}
.home .reports a.button.image:not(:first-child) {
	margin-left: -230px;
}
.home .reports a.button.image:not(:last-child):hover {
	margin-right: 170px;
}
@media (max-width: 1190px) {
	.home .reports .columns {
		flex-direction: column;
		text-align: center;
	}
	.home .reports .columns .buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: auto;
	}
	.home .reports .columns > div {
		flex-basis: auto;
		width: 100%;
	}
	.home .reports .columns.reverse > div:not(:last-child) {
		margin: 0 0 40px 0;
	}
	.home .reports .columns.reverse > div:not(:first-child) {
		margin: 0;
	}
}
@media (max-width: 860px) {
	.home .reports {
		overflow: hidden;
	}
}
@media (max-width: 550px) {
	.home .reports {
		overflow: visible;
	}
	.home .reports .columns.reverse > div:last-child {
		white-space: normal;
		margin-bottom: -10px;
	}
	.home .reports a.button.image,
	.home .reports a.button.image:not(:first-child),
	.home .reports a.button.image:not(:last-child):hover {
		margin: 10px;
		transition: none;
	}
	.home .reports a.button.image img {
		width: 135px;
		height: 185px;
	}
}


/* Dashboards */
.home .dashboards .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home .dashboards .columns .buttons {
	width: fit-content;
    	flex-direction: row;
}
.home .dashboards .columns > div:last-child {
	margin-top: 10px;
	white-space: nowrap;
	filter: drop-shadow(0 0 8px #cfd8dc);
	will-change: filter; /* Safari */
}
.home .dashboards a.button.image {
	position: absolute;
	margin-top: 10px;
	opacity: 0;
	will-change: filter; /* Safari */
	pointer-events: none;
}
.home .dashboards a.button.image.active {
	opacity: 1;
	pointer-events: initial;
}
.home .dashboards a.button.image:first-child {
	z-index: 1;
}
.home .dashboards a.button.image:last-child {
	position: initial;
}
.home .dashboards a.switcher {
	position: absolute;
	width: 10px;
	height: 10px;
	border: 2px solid #338adb;
	border-radius: 50%;
	margin: 15px 0 0 0;
	left: calc(50% - 25px);
}
.home .dashboards a.switcher.active {
	background: #338adb;
}
@media (max-width: 1190px) {
	.home .dashboards .columns {
		flex-direction: column;
		text-align: center;
	}
	.home .dashboards .columns .buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: auto;
	}
	.home .dashboards .columns > div {
		flex-basis: auto;
		width: 100%;
	}
	.home .dashboards .columns > div:not(:last-child) {
		margin: 0 0 40px 0;
	}
	.home .dashboards .columns > div:not(:first-child) {
		margin: 0;
	}
}


/* Forms */
.home .forms .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}

.home .forms .columns .buttons {
	width: fit-content;
   	flex-direction: row;
}
.home .forms .columns > div:last-child {
	margin-top: 60px;
	white-space: nowrap;
	filter: drop-shadow(0 0 8px #cfd8dc);
	will-change: filter; /* Safari */
}
.home .forms a.button.image {
	position: relative;
	border: 1px solid #cfd8dc;
	transition: .3s margin;
	will-change: filter; /* Safari */
}
.home .forms a.button.image:nth-child(1) {
	margin-top: 60px;
}
.home .forms a.button.image:nth-child(2) {
	z-index: 1;
}
.home .forms a.button.image:nth-child(3) {
	margin-top: -60px;
}
.home .forms a.button.image:not(:first-child) {
	margin-left: -200px;
}
.home .forms a.button.image:hover {
	transform: scale(1.2);
	transition: 0.2s;
}
.home .forms a.button.image:nth-child(1):hover {
	margin-left: -20px;
}
.home .forms a.button.image:nth-child(1):hover ~ a.button.image:nth-child(2) {
	margin-left: -180px;
}
.home .forms a.button.image:nth-child(1):hover ~ a.button.image:nth-child(3) {
	margin-left: -200px;
}
.home .forms a.button.image:nth-child(3):hover {
	margin-left: -180px;
	margin-top: -80px;
}
.home .forms a.button.image:not(:hover) {
	transform: scale(1);
	transition: 0.2s;
}
.home .forms .article h2 {
	margin-top: 5px;
}
.home .forms .article span.label {

	background: #A8A8A8;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	padding: 4px;
	border-radius: 5px;
}

@media (max-width: 1190px) {
	.home .forms .columns {
		flex-direction: column;
		text-align: center;
	}
	.home .forms .columns .buttons {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: auto;
	}
	.home .forms .columns > div {
		flex-basis: auto;
		width: 100%;
	}
	.home .forms .columns.reverse > div:not(:last-child) {
		margin: 0 0 40px 0;
	}
	.home .forms .columns.reverse > div:not(:first-child) {
		margin: 0;
	}
	.home .forms a.button.image:nth-child(2) {
		z-index: 0;
	}
	.home .forms a.button.image:nth-child(1):hover ~ a.button.image:nth-child(2),
	.home .forms a.button.image:nth-child(1):hover ~ a.button.image:nth-child(3) {
		margin-left: -230px;
	}

	.home .forms a.button.image:nth-child(1),
	.home .forms a.button.image:nth-child(2),
	.home .forms a.button.image:nth-child(3),
	.home .forms a.button.image,
	.home .forms a.button.image:hover,
	.home .forms a.button.image:nth-child(1):hover,
	.home .forms a.button.image:nth-child(3):hover,
	.home .forms a.button.image:not(:hover) {
		margin: 10px;
		transform: none;
	}
	.home .forms a.button.image {
		position: relative;
		border: 1px solid #cfd8dc;
		transition: .3s margin;
		will-change: filter; /* Safari */
	}
	.home .forms a.button.image:nth-child(3):hover {
		margin-left: -230px;
	}
	.home .forms a.button.image:not(:first-child) {
		margin-left: -230px;
	}
	.home .forms a.button.image:not(:last-child):hover {
		margin-right: 170px;
	}
}
@media (max-width: 860px) {
	.home .forms {
		overflow: hidden;
	}
}
@media (max-width: 550px) {
	.home .forms {
		overflow: visible;
	}
	.home .forms .columns.reverse > div:last-child {
		white-space: normal;
		margin-bottom: -10px;
	}
	.home .forms a.button.image:nth-child(1):hover ~ a.button.image:nth-child(2),
	.home .forms a.button.image:nth-child(1):hover ~ a.button.image:nth-child(3) {
		margin: 10px;
	}
	.home .forms a.button.image,
	.home .forms a.button.image:nth-child(1),
	.home .forms a.button.image:nth-child(2),
	.home .forms a.button.image:nth-child(3),
	.home .forms a.button.image:hover,
	.home .forms a.button.image:nth-child(1):hover,
	.home .forms a.button.image:nth-child(2):hover,
	.home .forms a.button.image:nth-child(3):hover,
	.home .forms a.button.image:not(:hover) {
		margin: 10px;
		transition: none;
		transform: none;
	}

	.home .forms a.button.image img {
		width: 135px;
		height: 185px;
	}
}

@media (max-width: 480px) {
	.home .forms .columns.reverse > div:last-child {
		white-space: normal;
		margin-bottom: 30px;
	}
}

/* Demo */
.home .demo .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 860px) {
	.home .demo .columns {
		text-align: center;
	}
}

/* Designer */
.home .designer .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 860px) {
	.home .designer .columns {
		text-align: center;
	}
}


/* Server */
.home .server .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 860px) {
	.home .server .columns {
		text-align: center;
	}
}

/* Cloud */
.home .cloud .columns {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 860px) {
	.home .cloud .columns {
		text-align: center;
	}
}