#governance {
	position:relative;
	top:0px;
	left:0px;
	display:block;
}
#governance .governancebg{
	background-image:url('../img/common/bg.png');
	background-repeat: no-repeat;
	background-size:100% 100%;
	position:absolute;
	z-index:490;
	width:100%;
	height:100vh;
}
#governance .governanceContent{
	position:absolute;
	left:5%;
	top:80px;
	z-index:520;
	width:90%;
	height:85%;
}
#governance .governanceTitle{
	opacity:0;
	font-size:40px;
	font-weight:900;
	text-align:center;
	top:20px;
}
#governance .row1, #governance .row2, #governance .row3{
	opacity:0;
}
.box-item {
	color:#ffffff;
	position: relative;
	-webkit-backface-visibility: hidden;
	width: 100%;
	margin-bottom: 15px;
	max-width: 100%;
}

.flip-box {
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

.flip-box-front,
.flip-box-back {
	background-size: cover;
	background-position: center;
	border-radius: 25px;
	min-height: 160px;
	-ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
	transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
	-webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-box-front {
	-ms-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-box:hover .flip-box-front {
	-ms-transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-box-back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-ms-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-box:hover .flip-box-back {
	-ms-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.flip-box .inner {
	position: absolute;
	left: 0;
	width: 100%;
	padding: 10px;
	outline: 1px solid transparent;
	-webkit-perspective: inherit;
	perspective: inherit;
	z-index: 2;
	transform: translateY(-50%) translateZ(60px) scale(.94);
	-webkit-transform: translateY(-50%) translateZ(60px) scale(.94);
	-ms-transform: translateY(-50%) translateZ(60px) scale(.94);
	top: 50%;
}

.flip-box-header {
	font-size: 28px;
	font-weight:900;
}

.flip-box .prefix{
	position:relative;
	top:-10px;
}

.flip-box p {
	font-size: 14px;
	position:relative;
	top:-10px;
	max-height:40px;
}

.flip-box-img {
	margin-top: 10px;
}
/*----------------------------------------------*/

#governance #bpm, #governance #cpm, #governance #eam, #governance #ecm, #governance #ehsm, #governance #eqm, #governance #erm, #governance #grc, #governance #hdm, #governance #itsm, #governance #plm, #governance #ppm{
	font-size:12px;
	margin-top:15px;
	background-color:#ff9c00;
	color:#ffffff;
	text-transform:uppercase;
	padding:2px;
	border-radius:25px;
	max-width:150px;
	position:relative;
	left:50%;
	margin-left:-75px;
	cursor:pointer;
}
#governance #bpm:hover, #governance #cpm:hover, #governance #eam:hover, #governance #ecm:hover, #governance #ehsm:hover, #governance #eqm:hover, #governance #erm:hover, #governance #grc:hover, #governance #hdm:hover, #governance #itsm:hover, #governance #plm:hover, #governance #ppm:hover{
	background-color:#181818;
}
#governance .downloadContainer{
	display:none;
	position:fixed;
	z-index:1800;
	width:100%;
	height:100vh;
	top:0;
	left:0;
	background-color:rgba(255,255,255,0.5);
}
#governance .contactPopup{
	background-image:url('../img/common/innerbg.png');
	background-repeat: no-repeat;
	background-size:100% 100%;
	border-radius: 25px;
	width:100%;
	max-width:50%;
	position:fixed;
	z-index:800;
	top:25%;
	left:50%;
	margin-left:-25%;
	padding:15px 35px;
	border: 3px solid #fab234;
}
#governance .closeContactPopup{
	font-size:34px;
	position:absolute;
	right:20px;
	top:0px;
	color:#181818;
	cursor:pointer;
}
#governance .contactBlock2{
	border-radius:10px;
	padding:0px 10px;
	text-align:left;
}


/*----------------------------------------------*/
/*==================================================================================*/
/*Disable Mobile-----------------------------------*/
.mobilegovernance{
	display:none;
}
/*End of Disable Mobile----------------------------*/
/*==================================================================================*/


/*==================================================================================*/
@media only screen and (max-width: 575px) {	
	#governance {
		display:none;
	}
	.mobileGovernance{
		display:block;
	}
	.governanceTopSpace{
		height:70px;
		position:relative;
	}
	.mobileGovernance .scrollContent{
		background-color:#ffffff;
		border: 3px solid #4167b0;
		margin:10px 10px;
		padding:10px;
		border-radius:25px;
		position:relative;
		z-index:700;
	}
	.mobileGovernance .governanceTitle{
		font-size:30px;
		font-weight:900;
		text-align:center;
	}
	
	.mobileGovernance .downloadContainer{
		display:none;
		position:fixed;
		z-index:1800;
		width:100%;
		height:100vh;
		top:0;
		left:0;
		background-color:rgba(255,255,255,0.5);
	}
	.mobileGovernance .contactPopup{
		background-image:url('../img/common/innerbg.png');
		background-repeat: no-repeat;
		background-size:100% 100%;
		border-radius: 25px;
		width:100%;
		max-width:50%;
		position:fixed;
		z-index:800;
		top:25%;
		left:50%;
		margin-left:-25%;
		padding:15px 35px;
		border: 3px solid #fab234;
	}
	.mobileGovernance .closeContactPopup{
		font-size:34px;
		position:absolute;
		right:20px;
		top:0px;
		color:#181818;
		cursor:pointer;
	}
	.mobileGovernance .contactBlock2{
		border-radius:10px;
		padding:0px 10px;
		text-align:left;
	}

}
@media only screen and (min-width: 576px) and (max-width: 767px) {
	#governance {
		display:none;
	}
	.mobileGovernance{
		display:block;
	}
	.governanceTopSpace{
		height:70px;
		position:relative;
	}
	.mobileGovernance .scrollContent{
		background-color:#ffffff;
		border: 3px solid #4167b0;
		margin:10px 10px;
		padding:10px;
		border-radius:25px;
		position:relative;
		z-index:700;
	}
	.mobileGovernance .governanceTitle{
		font-size:30px;
		font-weight:900;
		text-align:center;
	}
	
	.mobileGovernance .downloadContainer{
		display:none;
		position:fixed;
		z-index:1800;
		width:100%;
		height:100vh;
		top:0;
		left:0;
		background-color:rgba(255,255,255,0.5);
	}
	.mobileGovernance .contactPopup{
		background-image:url('../img/common/innerbg.png');
		background-repeat: no-repeat;
		background-size:100% 100%;
		border-radius: 25px;
		width:100%;
		max-width:50%;
		position:fixed;
		z-index:800;
		top:25%;
		left:50%;
		margin-left:-25%;
		padding:15px 35px;
		border: 3px solid #fab234;
	}
	.mobileGovernance .closeContactPopup{
		font-size:34px;
		position:absolute;
		right:20px;
		top:0px;
		color:#181818;
		cursor:pointer;
	}
	.mobileGovernance .contactBlock2{
		border-radius:10px;
		padding:0px 10px;
		text-align:left;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#governance {
		display:none;
	}
	.mobileGovernance{
		display:block;
	}
	.governanceTopSpace{
		height:70px;
		position:relative;
	}
	.mobileGovernance .scrollContent{
		background-color:#ffffff;
		border: 3px solid #4167b0;
		margin:10px 10px;
		padding:10px;
		border-radius:25px;
		position:relative;
		z-index:700;
	}
	.mobileGovernance .governanceTitle{
		font-size:30px;
		font-weight:900;
		text-align:center;
	}
	
	.mobileGovernance .downloadContainer{
		display:none;
		position:fixed;
		z-index:1800;
		width:100%;
		height:100vh;
		top:0;
		left:0;
		background-color:rgba(255,255,255,0.5);
	}
	.mobileGovernance .contactPopup{
		background-image:url('../img/common/innerbg.png');
		background-repeat: no-repeat;
		background-size:100% 100%;
		border-radius: 25px;
		width:100%;
		max-width:50%;
		position:fixed;
		z-index:800;
		top:25%;
		left:50%;
		margin-left:-25%;
		padding:15px 35px;
		border: 3px solid #fab234;
	}
	.mobileGovernance .closeContactPopup{
		font-size:34px;
		position:absolute;
		right:20px;
		top:0px;
		color:#181818;
		cursor:pointer;
	}
	.mobileGovernance .contactBlock2{
		border-radius:10px;
		padding:0px 10px;
		text-align:left;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	#governance .governanceContent{
		position:absolute;
		left:7%;
		top:80px;
		z-index:520;
		width:90%;
		height:85%;
	}
	#governance .governanceTitle{
		opacity:0;
		font-size:36px;
		font-weight:900;
		text-align:center;
		top:20px;
	}
	/*==================================================================================*/
}