.detailProjectBox3{
	background-color: #e4e5e7;
	margin: 0;
	padding-top: 74px;
	padding-bottom: 63px;
	position: relative;
	margin-bottom: 60px;
}
.backgroundBox3{
	width: 70%;
	margin: 0 auto;
}
.colTextBox{
    background-color: #FFF;
    position: absolute;
    z-index: 10;
    right: 18%;
    top: 25%;
    width: 40%;
    padding-left: 70px;
    padding-top: 30px;
    padding-bottom: 40px;
    padding-right: 70px;
    text-align: justify;
}
.colTextBox p{
	color: #909090;
	font-weight: lighter;
}
.colImageBox img{
	width: 100%;
	height: auto;
}

h2 {
	font-size: 2.275rem;
}

   

/*  #################################   MOBILE CSS   ##########################  */

@media screen and (min-width: 1025px) and (max-width: 1366px){  

	.colTextBox{
		right: 10%;
		top: 13%;
		width: 45%;
	}
}


/*  Landscape tablets 1024px */
@media (max-width: 1024px) {
	.backgroundBox3 {
	    width: 90%;
	}
	.colTextBox{
	    right: 5%;
	    top: 20%;
		width: 60%;
		max-width: 60%;
	    padding-left: 20px;
	    padding-top: 20px;
	    padding-bottom: 20px;
	    padding-right: 20px;
	}
	.colTextBox h2{
		font-size: 32px;
	}
}	
/*  Landscape phones and portrait tablets */
@media (max-width: 768px) {
	.backgroundBox3{
		width: 100%;
	}
	.colTextBox{
		position: relative;
		right: 0;
		top: 0;
		width: 100%;
		max-width: 100%;
		padding: 20px;
	}
	.detailProjectBox3{
		margin-bottom: 0;
	}
	.colTextBox h2{
		font-size: 32px;
		text-align: center;
	}
	.colImageBox{
		text-align: center;
	}
	.colImageBox img{
	    width: 100%;
	    height: auto;
	}
}