@charset "utf-8";
@import url("file:///C|/Users/hahdez29/Desktop/Cube 2.0 Final/webfonts/fabfeltscript_bold/stylesheet.css");

/* CSS Document */




.rowOne {
	background-color: hsla(214,80%,92%,1.00);
}
.rowOne_content {
	position: relative;
}
.rowOne_content h1 {
	color: hsla(0,0%,44%,1.00);
	font-family: bebas-neue;
	font-style: normal;
	font-weight: 400;
	font-size: 4em;
	text-align: center;
}

.rowOne_content h2 {
	color: hsla(0,0%,52%,1.00);
	font-family: bebas-neue;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	font-size: 3em;
}
.rowOne_content p {
	font-family:'Raleway', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1.2em;
	text-align: center;
}

.pc {
	display: block;
	width: 750px;
	height: 491px;
	margin-left: auto;
	margin-right: auto;
	background-position: center center;
	background-repeat: no-repeat;
	margin-top: 3px;
	padding: 0;
	position: relative;
	background-image: url(../images/laptop.png);
}
.pc_screen {
	display: block;
	padding-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 8px;
	position: absolute;
	left: 118px;
	top: 89px;
	width: 520px;
}


.rowTwo {
	background-color: #0B263D;
}


.rowTwo_content  h2 {
	font-family: bebas-neue;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	font-size: 2.5em;
	color: hsla(211,85%,92%,1.00);
}



.rowthree {
	margin: 0;
	padding: 0;
	background-color: hsla(214,80%,92%,1.00);
}
.rowthree_content h1 {
	text-align: center;
	font-family: bebas-neue;
	font-style: normal;
	font-weight: 400;
	font-size: 4em;
	color: hsla(0,0%,44%,1.00);
}

.container.rowthree_content {
	border-right: thin solid hsla(0,0%,72%,1.00);
	border-left: thin solid hsla(0,0%,72%,1.00);
	padding: 0;
	background-color: hsla(214,76%,92%,1.00);
}



/* Vertical Nav */




.colLeft {
	margin: 0;
	padding: 0;
	width: 21%;
	float: left;
	height: auto;
	text-transform: uppercase;
}

#verticalNav {
	margin: 0;
	padding-top: 34px;
	width: 100%;
}


.colLeft ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
}
#verticalNav li {
	position: relative;
}





.colLeft li a{
	display: block;
	color: #000;
	padding-top: 8px;
	padding-right: 16px;
	padding-left: 67px;
	padding-bottom: 8px;
	text-decoration: none;
	font-size: 1em;
}

.colLeft li a:hover {
	background-color: #0D6AAD;
	color: #FFFFFF;
}

.active{
	background-color: hsla(208,33%,68%,1.00);
	color: hsla(0,0%,99%,1.00);
}

  
.colRight {
	width: 79%;
	float: right;
	padding-top: 15px;
	padding-bottom: 15px;
	border-left: thin solid hsla(0,0%,58%,1.00);
}


.rowthree_content .row {
	margin-top: 5px;
	margin-bottom: 20px;
	width: auto;
	border-bottom: 0.5px solid hsla(0,0%,46%,1.00);
	padding-bottom: 21px;
	padding-left: 0px;

}
.row_left {
	padding: 0;
	margin: 0;
	height: auto;
}




.img_row {
	float: left;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	cursor: pointer;
	width: 100%;
}
.row h2 {
	display: block;
	margin-top: 29px;
	margin-bottom: 27px;
	font-family:'Raleway', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 1.5em;
	text-transform: uppercase;
}
.row .right p {
	font-family:'Raleway', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1.2em;
}
.icon-Eng   {
	background-image: url(../images/icon_nav/Eng_icon.png);
	display: block;
	width: 40px;
	height: 30px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 0%;
	margin-right: 18px;
	position: absolute;
	top: 3px;
	left: 4px;
}
.icon-Project   {
	background-image: url(../images/icon_nav/project_icon.png);
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 0%;
	margin-right: 18px;
	position: absolute;
	top: 3px;
	left: 8px;
}
.icon-Serv   {
	background-image: url(../images/icon_nav/serv_icon.png);
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 0%;
	margin-right: 18px;
	position: absolute;
	top: 3px;
	left: 8px;
}
.icon-human   {
	background-image: url(../images/icon_nav/human_icon.png);
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 0%;
	margin-right: 18px;
	position: absolute;
	top: 3px;
	left: 8px;
}
.icon-vendors   {
	background-image: url(../images/icon_nav/Vendor_icon.png);
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 0%;
	margin-right: 18px;
	position: absolute;
	top: 3px;
	left: 8px;
}

.icon-sales   {
	background-image: url(../images/icon_nav/sale_icon.png);
	display: block;
	width: 30px;
	height: 30px;
	float: left;
	background-repeat: no-repeat;
	background-position: center 0%;
	margin-right: 18px;
	position: absolute;
	top: 3px;
	left: 8px;
}
.img-responsive {
	cursor: pointer;
}
.w3-modal-content .w3-container.w3-teal h2 {
	text-transform: uppercase;
}



@media (max-width:320px){
.img_row {
	display: block;
	width: 71px;
}





}

@media (max-width:767px){
.pc {
	position: absolute;
	visibility: hidden;
	width: 0px;
}
.pc_screen {
	position: absolute;
	visibility: hidden;
	width: 0px;
}
.mobileDevice_Mov {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.colLeft {
	position: absolute;
	visibility: hidden;
}
.colRight {
	display: block;
	width: 100%;
}
.TopModuleNav {
	width: 100%;
	padding: 0;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.TopModuleNav ul {
	padding: 0;
	list-style: none;
}
.TopModuleNav ul li {
	float: left;
	text-align: center;
	font-style: normal;
	font-weight: 300;
	padding-bottom: 0px;
	display: inline;
	margin-left: 4%;
	margin-right: 0%;
}
.TopModuleNav ul li a {
	display: inline-block;
	width: 76px;
	font-family:'Raleway', sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 1em;
	color: #0B263D;
	margin-left: 0px;
	max-width: 100px;
	height: 54px;
	line-height: 20px;
	padding: 0;
	margin-bottom: 0px;
	position: relative;
}

li a .icon-salesT {
	background-image: url(../images/icon_nav/sale_icon_t.png);
	background-repeat: no-repeat;
	width: 80px;
	height: 67px;
	min-width: 80px;
	display: block;
}
li a .icon-EngT {
	width: 80px;
	height: 67px;
	display: block;
	background-image: url(../images/icon_nav/Eng_icon_t.png);
	background-repeat: no-repeat;
	min-width: 80px;
}
li a .icon-ProjectT {
	display: block;
	width: 80px;
	height: 67px;
	min-width: 80px;
	background-image: url(../images/icon_nav/project-mng_t.png);
	background-repeat: no-repeat;
}
li a .icon-ServT {
	display: block;
	width: 80px;
	height: 67px;
	min-width: 80px;
	background-image: url(../images/icon_nav/service-mng_t.png);
	background-repeat: no-repeat;
}

	li a .icon-humanT{
		display: block;
		width: 80px;
		height: 67px;
		min-width: 80px;
		background-image: url(../images/icon_nav/human_icon_t.png);
		background-repeat: no-repeat;
}

	li a .icon-vendorsT{ 
		display: block;
		width: 80px;
		height: 67px;
		min-width: 80px;
		background-image: url(../images/icon_nav/Vendor_icon_t.png);
		background-repeat: no-repeat;
	}
















}

@media (min-width:768px){
.mobileDevice_Mov {
	visibility: hidden;
	position: absolute;
	display: block;
}
.TopModuleNav {
	position: absolute;
	visibility: hidden;
}


}

@media (max-width:636px){
.TopModuleNav ul li   {
	margin-left: 1em;
}


}

@media (max-width:584px){
.TopModuleNav {
	display: block;
	width: 422px;
}
.TopModuleNav ul li {
	margin-left: -9px;
}

.TopModuleNav ul li a {
	font-size: 0.8em;
}


}

@media (min-width:768px) and (max-width:991px){
.colLeft li a {
	font-size: 0.8em;
}


}

@media (max-width:447px){
.TopModuleNav {
	width: 95%;
}
.TopModuleNav ul li a {
	font-size: 0;
	width: 70px;
	margin-right: 0%;
	margin-left: 44px;
}
.img_row {
	width: 0px;
	display: block;
}







}

@media (max-width:371px){
.TopModuleNav {
	width: 95%;
}
.TopModuleNav ul li a {
	font-size: 0;
	width: 70px;
	margin-right: 0%;
	margin-left: 25px;
}


}

@media (max-width:504px){
.img_row {
	width: 407px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

}