/* CARD STYLE */
.what-we-do__card {
    width: 103px;
    height: 452px;
    background: #88B7FF;
    transition: width .45s cubic-bezier(.4,0,.2,1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
/* CARD OPEN */
.what-we-do__card.active {
    width: 765px;
}

/* INDEX */
.what-we-do__index {
    position: absolute;
    top: 25px;
    left: 25px;
    background: #fff;
	color: #65A2FF;
    padding: 4px 18px;
}

/* FRONT */
.what-we-do__front {
    position:relative;
}

.what-we-do__content .subtitle {
    color: #fff;
	font-weight: 500;
}

/* BUTTON STYLE */
.what-we-do__button {
    margin-top: 5.5rem;
    padding: 10px 20px;
    background-color: #65A2FF;
    color: #101011;
	font-size: 18px;
	font-weight: 500;
    display: inline-block;
    text-align: center;
	transition: all 0.25s ease;

}

.what-we-do__button:hover {
	    color: #fff;

}

/* OPEN ON CLICK */
.what-we-do__back {
    position:absolute;
    top:35px;
    left:0;
    height:100%;
    width:100%;
    opacity:0;
    pointer-events:none;
    padding:26px;
    transition: opacity .3s ease .15s;
}

.what-we-do__card.active .what-we-do__back {
    opacity:1;
    pointer-events:auto;
}

/* MOBILE RESPONSIVE */
@media(max-width:768px) {
   
	.what-we-do__card.active {
		height: 532px;
	}
	
    .what-we-do__card {
        width:100% !important;
        height:84px;
    }
	
	.what-we-do__index {
		top: 20px;
        right: 25px;
		left: auto;
		padding: 2px 11px;
	}
	
	.what-we-do__button {
		margin-top: 1em;
	}
	
}