.roles-container{padding: 60px 0;} 
ul.roles-list{display: flex; justify-content: center;}
ul.roles-list li.roles-item{padding: 0 15px;width:33.333%;height: auto;}
.roles-box{width: 100%;display: flex;flex-flow: column;align-items: center; padding: 28px 22px 35px; text-align: center; background: #f0f0f0;height: 100%;transition: all 0.2s ease-in;}
.roles-box h5{font-size: 30px; margin-bottom: 15px;}
.roles-box .roles-icon{width: 101px;margin: 0 auto 12px;}
.roles-box .roles-icon >img{width: 100%;height: 100%;object-fit: cover;}  
.roles-box p{margin-bottom: 45px;}
.roles-box .btn{margin-top: auto;}
/*.roles-position-slider.slick-slider .slick-list{overflow: visible;}*/
.roles-box:hover{transform: scale(1.03); color: #586271;}
.roles-box:hover .btn-outline-green{background: #00a091; color: #fff; border: 1px solid #00a091;}


/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width: 1199.98px){

}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width: 991.98px){
 
}
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width: 767.98px) { 
.roles-container {padding: 25px 0 30px;}
.roles-box .roles-icon{width: 78px;margin: 0 auto 12px;}
.roles-box h5{font-size: 20px;margin-bottom: 7px;} 
.roles-box p{margin-bottom: 15px;}
ul.roles-list li.roles-item .roles-box{font-size: 15px;line-height: 19px; padding: 12px 21px 22px;}
ul.roles-list li.roles-item {width: 300px;}
}
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width: 575.98px) {
}