/*** 

====================================================================
	Task Section
====================================================================

***/

.task-section{
	position: relative;
	padding: 105px 0px 50px;
	background-color: #443986;
}

.task-section:before{
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	width: 30%;
	height: 100%;
	display: block;
	background-color: #ffffff;
}

.task-section .image-column{
	position: relative;
	margin-bottom: 40px;
}

.task-section .image-column .inner-column{
	position: relative;
    margin-right: 20px;
    margin-left: -250px;
}

.task-section .image-column .inner-column .image{
	position: relative;
	overflow: hidden;
}

.task-section .image-column .inner-column .image::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255, 255, 255,.2);
  border-radius: 0%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.task-section .image-column .inner-column .image:hover::before {
  -webkit-animation: circle .95s;
  animation: circle .95s;
}

.task-section .image-column .inner-column .image img{
	position: relative;
	width:100%;
	display: block;
}

.task-section .content-column{
	position: relative;
}

.task-section .content-column .inner-column{
	position: relative;
	margin-right: -115px;
	padding-left: 40px;
}

.task-section .content-column .inner-column .title{
	position: relative;
	color:var(--theme-color);
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.task-section .content-column .inner-column h2{
	position: relative;
	color:#ffffff;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.3em;
	margin-bottom: 45px;
}

.task-section .content-column .inner-column .btn-box{
	position: relative;
	margin-left: 58px;
	margin-top: 50px;
}