.services {
position: relative;
transition:all .4s ease-in-out
}
.services > img {
margin: 0 auto
}
.services .cz_btn {
margin-top: 30px
}
.xtra-service-btn-left {
float: left
}
.xtra-service-btn-center {
float: none;
margin: 0 auto;
display: table
}
.xtra-service-btn-right {
float: right
}
.services.services_padding {
padding: 15px 25px 25px
}
.services.services_padding i {
left:25px;
top:25px
}
.services_b.services_padding i {
left: 0;
top: 15px
}
.services .service_custom i {
position: absolute;
left: 0;
top: 10px;
display: table;
transition:all .2s ease-in-out;
font-size: 2em;
line-height: 2em;
width: 2em;
height: 2em;
padding: 0;
text-align:center
}
.services div.service_text {
padding-left: 100px;
display: block;
transition: all .2s ease-in-out
}
.services .service_custom i{
box-sizing: content-box;
position: relative;
top: 0
}
.services.left .service_custom{float: left}
.services.right .service_custom{float: right}
.services_b.left .service_custom,
.services_b.right .service_custom {
float: none
}
.services_b.left {
text-align: left
}
.services_b.right {
text-align: right
}
.services_b .service_custom{display: inline-block;margin: 0 0 20px}
.services h3 {
border-bottom: 4px solid #F1F1F1;
display: inline-block;
padding: 0 0 8px;
transition: all .2s ease-in-out
}
.services a.btn {
float: right;
margin: 20px 0 0
}
.services.right .service_custom i {
left: auto;
right: 0
}
.services_b.right .service_custom i {
transform: none
}
.services.right div.service_text {
padding-left: 0;
padding-right: 100px;
text-align: right
}
.services_b.left div.service_text,
.services_b.right div.service_text {
padding-left: 0;
padding-right: 0
}
.services_b {
text-align: center;
padding: 25px 10px;
box-sizing: border-box
}
div.services.services_b div.service_text {
padding-left: 0
}
.services_b h3 {
border-bottom:0;
margin-bottom: 0
}
.services_b .service_custom i {
text-align: center;
position: relative;
top: -10px;
font-size: 40px
}
.services_b span.bar {
background-color:#F1F1F1;
display: block;
height: 4px;
margin: 10px auto 20px;
width: 50px;
transition:all .2s ease-in-out
}
.services_b:hover span.bar {
width: 200px
}
.services_b .service_custom i{
position:relative;
left: 50%;
transform: translateX(-50%);
display: inline-block
}
.services_b a.btn {
float: none;
margin: 20px 0 0 !important
}
.services_b p, .services p{
line-height: inherit
}
.services_b .service_img {
float: none;
display: table;
margin: 0 auto 20px;
box-sizing: content-box
}
.service_img {
float: left;
margin: 10px 20px 0 0;
text-align: center;
width: 80px
}
.services.right .service_img{
float:right;
margin:10px 0 0 20px
}
.services.services_b.right .service_img {
margin: 0 0 20px
}
.service_img img{
margin: 0 auto;
display: table;
max-width: 80px
}
.services_b.left .service_img {
margin-left: 0;
margin-right: 0
}
.services_b .service_img img {
max-width:100%
}
.services > div {
transition: all .2s ease-in-out
}
.services .services_img_have_hover img {
position: relative;
width: inherit;
opacity: 1;
transition: opacity .2s ease-in-out
}
.services .services_img_have_hover img:last-child,
.services:hover .services_img_have_hover img:first-child {
opacity: 0
}
.services .services_img_have_hover img:last-child {
position: absolute;
transform: translateY(-100%)
}
.services:hover .services_img_have_hover img:last-child {
opacity: 1 !important
}
.service_number {
margin: 0;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center
}
.services_b i.cz_sb_sep_icon{
width: 100%;
text-align: center;
animation: none;
height: 1.5em;
line-height: 1.5em;
font-size: 1.5em;
}
.service_text .cz_wpe_content {
overflow-wrap: initial
} .cz_hexagon {
position: absolute;
width: 82px; 
height: 47.34px;
margin: 23.67px 0;
padding: 0;
text-align: center;
background: none;
border: 0;
border-left: solid 3.5px;
border-right: solid 3.5px;
box-sizing: content-box !important
}
.cz_hexagon:before, .cz_hexagon:after {
content: "";
position: absolute;
background: inherit !important;
border-color: inherit !important;
z-index: 1;
left: 10px;
width: 57px;
height: 58px;
transform: scaleY(.5774) rotate(-45deg);
box-sizing: content-box !important
}
.cz_hexagon i {
position: relative;
border:none;
width: 100%;
height: 100%;
font-size: 36px;
line-height: 36px;
margin: 0;
padding: 0;
top: 5px;
z-index: 9;
left:auto;
vertical-align: middle;
transform: none
}
.services_b .cz_hexagon i {
top: 3px;
border: 0;
background: none;
border-radius: 100px;
}
.cz_hexagon:before {
top: -31.5px;
border-top: solid 4.8px;
border-right: solid 4.8px
}
.cz_hexagon:after {
bottom: -31.5px;
border-bottom: solid 4.8px;
border-left: solid 4.8px
}
.services_b .cz_hexagon{position: relative;margin:40px auto}
.services.style9 div.service_text{padding-left: 110px}
.services.right .cz_hexagon{right:0}
.services.style9.right div.service_text {padding-right: 110px}
.cz_sbi_fx_0:hover .service_custom, .cz_sbi_fx_0:hover .service_img {animation: socialZoomOut .4s forwards}
.cz_sbi_fx_1:hover .service_custom, .cz_sbi_fx_1:hover .service_img {animation: socialZoomIn .3s forwards}
.cz_sbi_fx_2:hover .service_custom, .cz_sbi_fx_2:hover .service_img {animation: socialFxB .3s forwards}
.cz_sbi_fx_3:hover .service_custom, .cz_sbi_fx_3:hover .service_img {animation: socialFxC .3s forwards}
.cz_sbi_fx_4:hover .service_custom, .cz_sbi_fx_4:hover .service_img {animation: socialFxD .3s forwards}
.cz_sbi_fx_5:hover .service_custom, .cz_sbi_fx_5:hover .service_img {animation: socialFxE .3s forwards}
.cz_sbi_fx_6:hover .service_custom, .cz_sbi_fx_6:hover .service_img {animation: socialFxF .4s forwards}
.cz_sbi_fx_7a:hover .service_custom, .cz_sbi_fx_7a:hover .service_img {transform: translateZ(0);animation: wobble .5s forwards}
.cz_sbi_fx_7:hover .service_custom, .cz_sbi_fx_7:hover .service_img {transform: translateZ(0);animation: wobble .5s infinite}
.cz_sbi_fx_8a:hover .service_custom, .cz_sbi_fx_8a:hover .service_img {transform: translateZ(0);animation: flash .5s forwards}
.cz_sbi_fx_8:hover .service_custom, .cz_sbi_fx_8:hover .service_img {transform: translateZ(0);animation: flash .5s infinite}
.cz_sbi_fx_9a:hover .service_custom, .cz_sbi_fx_9a:hover .service_img {transform: translateZ(0);animation: bounceFX .6s forwards}
.cz_sbi_fx_9:hover .service_custom, .cz_sbi_fx_9:hover .service_img {transform: translateZ(0);animation: bounceFX .6s infinite}
.cz_sbi_fx_10 .service_custom, .cz_sbi_fx_11 .service_custom, 
.cz_sbi_fx_10 .service_img, .cz_sbi_fx_11 .service_img {transition: all .4s ease}
.cz_sbi_fx_10:hover .service_custom, .cz_sbi_fx_10:hover .service_img {transform:rotateY(360deg)}
.cz_sbi_fx_11:hover .service_custom, .cz_sbi_fx_11:hover .service_img {transform:rotateX(360deg)}
.services .xtra-placeholder {
max-width: 100px
}
.services_b .service_custom.cz_hexagon i {
line-height: 1;
top: 0;
}
@media screen and (max-width:480px) {
.services.left .service_custom,
.services.right .service_custom,
.services.left .service_img,
.services.right .service_img {
float:none !important;
margin:0 auto 20px auto !important;
display:table
}
.services div.service_text,
.services.right div.service_text {
padding:0 !important;
text-align:center !important
}
.cz_hexagon {
position: relative;
margin: 0 auto 30px
}
}ul.cz_stylish_list,
.cz_post_content ul.cz_stylish_list,
.rtl ul.cz_stylish_list {
margin: 0;
padding: 0;
list-style: none !important
}
.cz_stylish_list li {
position: relative;
margin: 0 0 10px;
display: list-item;
width: 100%;
transition: all .2s ease-in-out
}
.cz_stylish_list li > a {
display: block;
color: inherit !important
}
.cz_stylish_list span > a {
display: inline-block
}
.cz_stylish_list i {
font-size: 1em;
width: 2em;
height: 2em;
line-height: 2em;
display: block;
text-align: center;
box-sizing: content-box;
transition: all .1s ease-in-out
}
.cz_stylish_list li > div > span {
line-height: 1.6;
display: block
}
.cz_stylish_list small {
opacity: 1;
display: table
}
.cz_stylish_list li > div,
.cz_stylish_list li > a > div {
color: inherit;
display: table-cell;
vertical-align: middle;
text-decoration: inherit
}
.cz_stylish_list .cz_sl_icon {
vertical-align: top
}
.cz_stylish_list .cz_sl_image i {
width: auto;
height: auto
}
.cz_stylish_list .xtra-sl-number {
font-style: normal
}
.cz_sl_icon.cz_sl_image i img {
display: inline-block;
vertical-align: middle
}
.cz_sl_icon_hover_zoom_in li:hover i {transform: scale(1.25, 1.25)}
.cz_sl_icon_hover_zoom_out li:hover i {transform: scale(0.875, 0.875)}
.cz_sl_icon_hover_blur li:hover i {animation: stylishListBlur .8s forwards}
.cz_sl_icon_hover_flash li:hover i {animation: stylishListFlashFx .8s forwards}
.cz_sl_icon_hover_absorber li:hover i {animation: stylishListAbsorber .8s forwards}
.cz_sl_icon_hover_wobble li:hover i {animation: stylishListWobbleSkew .8s forwards}
.cz_sl_icon_hover_zoom_in_fade li:hover i {animation: stylishListZoomIn .8s forwards}
.cz_sl_icon_hover_zoom_out_fade li:hover i {animation: stylishListZoomOut .8s forwards}
.cz_sl_icon_hover_push_in li:hover i {animation: stylishListPushIn .8s forwards}
@keyframes stylishListBlur {
0% {filter: blur(5px)}
100% {filter: blur(0)}
}
@keyframes stylishListFlashFx {
0% {opacity: .1}
100% {opacity: 1}
}
@keyframes stylishListAbsorber {
0%, 10%, 20%, 50%, 80% {transform: translateY(0)}
40% {transform: translateY(-8px)}
60% {transform: translateY(-8px)}
}
@keyframes stylishListWobbleSkew {
16.65% {transform: skew(-12deg)}
33.3% {transform: skew(10deg)}
49.95% {transform: skew(-6deg)}
66.6% {transform: skew(4deg)}
83.25% {transform: skew(-2deg)}
100% {transform: skew(0)}
}
@keyframes stylishListZoomIn {
0% {opacity: 0;transform: scale(.9)}
50% {opacity: 1;transform: scale(1)}
}
@keyframes stylishListZoomOut {
0% {opacity: 0;transform: scale(1.1)}
50% {opacity: 1;transform: scale(1)}
}
@keyframes stylishListPushIn {
0% {opacity: 0;transform: translateX(-30%)}
60% {opacity: 1;transform: translateX(10%)}
100% {opacity: 1;transform: translateX(0)}
}
@media screen and (max-width:768px) {
.cz_stylish_list span {
text-align: initial !important
}
}
@media screen and (max-width:480px) {
.center_on_mobile .cz_sl_icon,
.center_on_mobile li > div,
.center_on_mobile li > a > div,
.center_on_mobile small {
display: block
}
.center_on_mobile .cz_sl_icon > * {
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 10px
}
.center_on_mobile li > div > span,
.center_on_mobile li > a > div > span {
display: inline-block;
text-align: center !important
}
}