/***********************************************/
/*****************  product.html ***************/
/***********************************************/
/* Scroll Top */
.top-product{
	display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 10px; 
    z-index: 99; 
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
	width:70px;
}

/* Services section*/
.service-section{
	height: 100%;
	background: url(../imgs/product.jpg) no-repeat center / cover;
	border-bottom:1px #fff solid;
}

.service-section-center {
	padding-right: 0;
    padding-left: 0;
	padding-top: 3rem;
	padding-bottom:	3rem;
    margin-right: auto;
    margin-left: auto;
	text-align: center;
	text-transform: capitalize;
}
@media (max-width: 991px) {
	.service-section-center h1 {
		margin-top:6%;
	}
}

@media (max-width: 768px) {
	.service-section-center {
		padding-top: 6rem;
		padding-bottom:	0;
	}
}

/* product section (wrapper) */
.prd-banking-section > .container,
.prd-workflow-section > .container,
.prd-fintech-section > .container{
	width:960px;
    margin:25px auto;
	/*border:red 5px solid;*/	 /*debug*/
}

.space:not(:first-child),.space:not(:last-child) {
	padding-right:2px;
	padding-left:2px;
}

/* Product section (grid)*/
.grid{
	padding: 15px;
	height: 300px;
	width: 300px;
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 30px;
	border-radius: 16px;
	font-size: 18px;
	font-family: Raleway-Medium;
	color: #006084;
	background-color: #FFFFFF;
	text-align: center;
	position: relative;
}

.grid.grid-alt {
	color: #FFFFFF;
	font-size: 28px;
	font-family: Raleway-SemiBold;
	font-weight: bold;
}

.t { 
	display: table; 
	height: 100%; 
	width: 100%;
}
.td { 
	display: table-cell; 
	vertical-align: middle; 
	height: 100%;
	width: 100%;
}

.grid.grid-alt.grid1{
	background: #66C3D3;
}

.grid.grid-alt.grid2{
	background: #3590AF;
}

.grid.grid-alt.grid3{
	background: #006084;
}

@media (max-width:992px) and (min-width:768px) {
	.prd-banking-section > .container,
	.prd-workflow-section > .container,
	.prd-fintech-section > .container{
		width:640px;
	/*	border:blue 5px solid;	*/ /*debug*/
	}

}

@media (max-width: 767px) {
	.prd-banking-section > .container,
	.prd-workflow-section > .container,
	.prd-fintech-section > .container{
		width:320px;
	/*	border:yellow 5px solid; */ /*debug*/
	}

	.grid{
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5%;
	}
}

.grid:hover .prd-overlay{
  opacity: 0.9;
}

.prd-overlay{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	border-radius: 16px;
	background: #56D1DB;
}

.prd-text {
	color: #FFFFFF;
	font-family: Raleway-Medium;	
	font-size:20px;
	padding-left:10px;
	padding-right:10px;
}

/* Product section - Banking and Finance*/
.prd-banking-section {
	padding-top:50px;
	height:100%;
	background-color: #F9F9F9;
	color: #808080;
	border:1px #F9F9F9 solid;
}

.prd-banking-section h1{
	color: #006084;
	text-align: center;
	padding-bottom: 2%;
}

/* Product section - Workflow System*/
.prd-workflow-section {
	padding-top:50px;
	height:100%;
	background-color: #E6E6E6;
	color: #808080; 
	border:1px #E6E6E6 solid;
}

/* Product section - FinTech Research & Development*/
.prd-fintech-section {
	padding-top:50px;
	padding-bottom:100px;
	height:100%;
	background-color: #CCCCCC;
	color: #808080; 
	border:1px #CCCCCC solid;
}

@media (max-width: 768px) {
	.prd-fintech-section {
		padding-bottom:300px;
	}
}