/* HOW WE WORK MOBILE DEFAULTS */
.bg-color-dkgray {
    background: #555;
    color: #fff;
}
.section-wrap {
    padding: 15px 0;
}
.block-intro-text {
    max-width: 800px;
    display: block;
    margin: 0 auto;
    padding: 0 20px;
}
.block-section .gb-block-button:last-child {
    margin-bottom: 0;
}
.bot-how-work-label span {
    display: block;
    font-size: 24px;
    margin-bottom: 15px;
}
.bot-how-work-desc,
.bot-how-work-support-desc {
    margin: 15px auto 0;
    padding: 0 15px;
    max-width: 420px;
}
.bot-how-work-img {
    height: 140px;
    object-fit: cover;
}
.bot-how-work-support-img {
    height: 120px;
}
.how-work-description {
    display: none;
}
.mobile-align-right {
    text-align: right;
}
.mobile-align-left {
    text-align: left;
}
.label-1-how-work > .bot-1-how-work-wrap {
    margin-left: -44px;
}
.label-1-how-work > span{
	color: #2a9d8f;
}
.label-2-how-work > span{
	color: #f4a261;
}
.label-3-how-work > span{
	color: #5891aa;
}
.bot-how-work-support-label {
    font-weight: 700;
}
.mobile-hide {
	display: none;
}
.bot-how-work h2 {
    color: #fff;
}

@media screen and (max-width:767px){
	.btn.text-24 {
		font-size: 16px !important;
	}
}

.bot-how-work-feature {
    position: relative;
}


/* HOW WE WORK INTERACTIONS */
@media screen and (min-width:768px){
	.bot-how-work-label span {
		font-size: 32px;
	}
	.bot-how-work-images {
		display: flex;
		margin-bottom: 40px;
	}
}

@media screen and (min-width:1100px){
	.mobile-hide {
		display: inline-block;
	}
	.bot-how-work-label span {
		font-size: 40px;
	}
	.label-1-how-work > .bot-1-how-work-wrap {
		margin-left: 0;
	}
	.bot-how-work-desc,
	.bot-how-work-support-desc {
		opacity: 0;
		visibility: hidden;
		transition: all .5s ease;
	}
	.mobile-align-right,
	.mobile-align-left {
		text-align: inherit;
	}
	.bot-how-work-images {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.bot-how-work-img {
		height: 160px;
	}
	.bot-how-work-support-img {
		height: 140px;
	}
	.how-work-item.item-center {
		margin: 0 -80px;
	}
	.bot-1-how-work-img {
		margin-left: -53px;
	}
	.bot-how-work-images > div{
		width: 420px;
		margin-bottom: 60px;
	}
	.support-item.is-hidden {
		opacity: 0;
		visibility: hidden;
		transition: none;
	}
	.how-work-item{
		transition: all .5s ease;
	}
	.bot-how-work-label:hover ~ .bot-how-work-desc,
	.support-item.is-active .bot-how-work-support-desc{
		opacity: 1;
		visibility: visible;
	}
	.bot-how-work-feature.is-active .how-work-item{
		opacity: .5;
	}
	.how-work-item:hover{
		opacity: 1 !important;
	}
	.how-work-description {
		display: block;
		opacity: 1;
		transition: all .5s ease;
	}
	.bot-how-work-support-desc {
		text-align: right;
		margin: 0;
	}
	.bot-how-work-desc p,
	.bot-how-work-support-desc p,
	.how-work-description p {
		font-size: 20px;
	}
	.how-work-description.is-hidden {
		opacity: 0;
	}
	.bot-how-work-item.support-item {
		display: flex;
		justify-content: right;
		position: absolute;
		right: 0;
		top: 300px;
	}
	.bot-how-work-images > div.below-work-items {
		width: 100%;
		flex: auto;
		position: relative;
	}
	.how-work-description {
		position: absolute;
		width: 100%;
		top: 300px;
	}
	.mobile-align-right.how-work-img-wrap {
		order: 2;
	}
	.bot-how-work-support-desc{
		order: 1;
	}
}

/* HOW WE WORK RESPONSIVE */
@media screen and (min-width:768px){
	.section-wrap {
		padding: 30px 0;
	}
/* 
	h2.block-headline {
		font-size: 40px;
	}
 */
	h2.block-headline,
	.block-intro-text{
		margin-bottom: 40px;
	}
}
@media screen and (min-width:1024px){
	.section-wrap {
		padding: 60px 0;
	}
}
@media screen and (min-width:1200px){
	.section-wrap {
		padding: 90px 0;
	}
}