@charset "utf-8";
/* CSS Document */

body{
	margin: 0px;
	height: 100%;
	overflow: scroll;
}

main {
	margin-top: 130px;
	overflow: hidden;
}

.previousSlide, .nextSlide {
	display: inline-block;
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	color: black;
	font-weight: bold;
	font-size: 18px;
	transition: background-color 0.3s ease;
	padding: 16px;
	border-radius: 0 3px 3px 0;
}

.nextSlide {
	display: inline-block;
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 0%;
	width: auto;
	color: black;
	font-weight: bold;
	font-size: 18px;
	transition: background-color 0.3s ease;
	padding: 16px;
	border-radius: 3px 0 0 3px;
}

.nextSlide:hover, .previousSlide:hover {
	background-color: #FF7E00;
	color: white;
}

.dotDiv {
	text-align: center;
}

.dot1, .dot2, .dot3, .dot4, .dot5, .dot6, .dot7 {
	cursor: pointer;
	border-radius: 50%;
	height: 12px;
	width: 12px;
	display: inline-block;
	background-color: #7B7A7A;
	transition: background-color 0.3s ease;
}

.active, .dot1:hover, .dot2:hover, .dot3:hover, .dot4:hover, .dot5:hover, .dot6:hover, .dot7:hover {
	background-color: #FF7E00;
}

.infrastructureSolutions {
	height: 100%;
	width: 100%;
	font-family: Helvetica;
	position: relative;
	margin-bottom: 12%;
}

.virtualBoxApplianceHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 26px;
}

.virtualBoxApplianceContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
	justify-content: center;
}

.virtualBoxApplianceLeft {
	width: 50%;
	height: 100%;
}

.virtualBoxApplianceLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.virtualBoxApplianceLeft img:hover {
	transform: scale(1.1);
}

.slideshow1 {
	position: relative;
	margin: auto;
}

.slides1 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides1 img {
	height: auto;
	display: block;
	margin: auto;
}

.virtualBoxApplianceRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.virtualBoxApplianceRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.virtualBoxApplianceRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.dataSolutions {
	position: relative;
	margin-top: 10%;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
}

.dataSolutionHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 1.5vw;
}

.dataSolutionContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
}

.dataSolutionLeft {
	width: 50%;
	height: 100%;
}

.dataSolutionLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.dataSolutionLeft img:hover {
	transform: scale(1.1);
}

.dataSolutionRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.dataSolutionRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.dataSolutionRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.slideshow2 {
	position: relative;
	margin: auto;
}

.slides2 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides2 img {
	height: auto;
	display: block;
	margin: auto;
}

.monitoringTools {
	position: relative;
	margin-top: 10%;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
}

.monitoringToolsHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 1.5vw;
}

.monitoringToolsContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
}

.monitoringToolsLeft {
	width: 50%;
	height: 100%;
}

.monitoringToolsLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.monitoringToolsLeft img:hover {
	transform: scale(1.1);
}

.slideshow3 {
	position: relative;
	margin: auto;
}

.slides3 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides3 img {
	height: auto;
	display: block;
	margin: auto;
}

.monitoringToolsRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.monitoringToolsRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.monitoringToolsRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.onAndOffPremises {
	position: relative;
	margin-top: 10%;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
}

.onAndOffPremisesHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 1.5vw;
}

.onAndOffPremisesContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
}

.onAndOffPremisesLeft {
	width: 50%;
	height: 100%;
}

.onAndOffPremisesLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.onAndOffPremisesLeft img:hover {
	transform: scale(1.1);
}

.slideshow4 {
	position: relative;
	margin: auto;
}

.slides4 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides4 img {
	height: auto;
	display: block;
	margin: auto;
}

.onAndOffPremisesRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.onAndOffPremisesRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.onAndOffPremisesRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.hyperConvergedInfrastructure {
	position: relative;
	margin-top: 10%;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
}

.hyperConvergedInfrastructureHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 1.5vw;
}

.hyperConvergedInfrastructureContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
}

.hyperConvergedInfrastructureLeft {
	width: 50%;
	height: 100%;
}

.hyperConvergedInfrastructureLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.hyperConvergedInfrastructureLeft img:hover {
	transform: scale(1.1);
}

.slideshow5 {
	position: relative;
	margin: auto;
}

.slides5 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides5 img {
	height: auto;
	display: block;
	margin: auto;
}

.hyperConvergedInfrastructureRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.hyperConvergedInfrastructureRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.hyperConvergedInfrastructureRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.instantMessagingSystem {
	position: relative;
	margin-top: 10%;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
}

.instantMessagingSystemHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 1.5vw;
}

.instantMessagingSystemContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
}

.instantMessagingSystemLeft {
	width: 50%;
	height: 100%;
}

.instantMessagingSystemLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.instantMessagingSystemLeft img:hover {
	transform: scale(1.1);
}

.instantMessagingSystemRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.instantMessagingSystemRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.instantMessagingSystemRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.slideshow6 {
	position: relative;
	margin: auto;
}

.slides6 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides6 img {
	height: auto;
	display: block;
	margin: auto;
}

.aiComputing {
	position: relative;
	margin-top: 10%;
	height: 100%;
	width: 100%;
	font-family: Helvetica;
}

.aiComputingHeader {
	background-image: linear-gradient(to bottom right, white, #FF7E00);
	color: black;
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	font-size: 1.5vw;
}

.aiComputingContent {
	position: relative;
	border: 1px solid black;
	margin-left: 5%;
	margin-right: 5%;
	height: 450px;
	margin-top: 3%;
	display: flex;
}

.aiComputingLeft {
	width: 50%;
	height: 100%;
}

.aiComputingLeft img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

.aiComputingLeft img:hover {
	transform: scale(1.1);
}

.aiComputingRight {
	border: 1px solid black;
	padding: 2%;
	width: 50%;
	overflow: scroll;
	overflow-x: hidden;
}

.aiComputingRight h1 {
	color: #FF7E00;
	font-size: 36px;
	font-family: Helvetica;
}

.aiComputingRight li {
	font-family: Times News Roman;
	font-size: 22px;
	color: black;
}

.slideshow7 {
	position: relative;
	margin: auto;
}

.slides7 {
	position: relative;
	animation: fadein 2s;
	width: 100%;
	height: 400px;
	display: none;
}

.slides7 img {
	height: auto;
	display: block;
	margin: auto;
}

/*mobile version*/
@media only screen and (max-width: 1100px) {
	main {
		margin-top: 80px;
	}
	
	.virtualBoxApplianceHeader {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.virtualBoxApplianceContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.virtualBoxApplianceLeft {
		width: 100%;
	}
	
	.virtualBoxApplianceLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides1 {
		height: auto;
	}
	
	.virtualBoxApplianceRight {
		width: 98%;
		height: 200px;
	}
	
	.virtualBoxApplianceRight li {
		font-size: 18px;
	}
	
	.dataSolutionHeader{
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.dataSolutionContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.dataSolutionLeft {
		width: 100%;
	}
	
	.dataSolutionLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides2 {
		height: auto;
	}
	
	.dataSolutionRight {
		width: 98%;
		height: 200px;
	}
	
	.dataSolutionRight h1 {
		font-size: 24px;
	}
	
	.dataSolutionRight li {
		font-size: 18px;
	}
	
	.monitoringToolsHeader {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.monitoringToolsContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.monitoringToolsLeft {
		width: 100%;
	}
	
	.monitoringToolsLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides3 {
		height: auto;
	}
	
	.monitoringToolsRight {
		width: 98%;
		height: 200px;
	}
	
	.monitoringToolsRight h1 {
		font-size: 24px;
	}
	
	.monitoringToolsRight li {
		font-size: 16px;
	}
	
	.onAndOffPremisesHeader {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.onAndOffPremisesContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.onAndOffPremisesLeft {
		width: 100%;
	}
	
	.onAndOffPremisesLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides4 {
		height: auto;
	}
	
	.onAndOffPremisesRight {
		width: 98%;
		height: 200px;
	}
	
	.onAndOffPremisesRight h1 {
		font-size: 24px;
	}
	
	.onAndOffPremisesRight li {
		font-size: 16px;
	}
	
	.hyperConvergedInfrastructureHeader {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.hyperConvergedInfrastructureContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.hyperConvergedInfrastructureLeft {
		width: 100%;
	}
	
	.hyperConvergedInfrastructureLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides5 {
		height: auto;
	}
	
	.hyperConvergedInfrastructureRight {
		width: 98%;
		height: 200px;
	}
	
	.hyperConvergedInfrastructureRight h1 {
		font-size: 24px;
	}
	
	.hyperConvergedInfrastructureRight li {
		font-size: 16px;
	}
	
	.instantMessagingSystemHeader {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.instantMessagingSystemContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.instantMessagingSystemLeft {
		width: 100%;
	}
	
	.instantMessagingSystemLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides6 {
		height: auto;
	}
	
	.instantMessagingSystemRight {
		width: 98%;
		height: 200px;
	}
	
	.instantMessagingSystemRight h1 {
		font-size: 24px;
	}
	
	.instantMessagingSystemRight li {
		font-size: 16px;
	}
	
	.aiComputingHeader {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 14px;
	}
	
	.aiComputingContent {
		display: block;
		height: auto;
		margin-right: 0%;
		margin-left: 0%;
	}
	
	.aiComputingLeft {
		width: 100%;
	}
	
	.aiComputingLeft img {
		max-width: 80%;
		max-height: 80%;
	}
	
	.slides7 {
		height: auto;
	}
	
	.aiComputingRight {
		width: 98%;
		height: 200px;
	}
	
	.aiComputingRight h1 {
		font-size: 24px;
	}
	
	.aiComputingRight li {
		font-size: 16px;
	}
}

/*animations*/
@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}