

.benefit-cards.il-comp{
 padding: 0;
}

/**/

.benefit-cards__header {
 text-align: center;
 position: relative;
 padding: 30px 10px 10px 10px;
}

.benefit-cards__header h3 {
 color: #fff;
}

.benefit-cards__card {
 /*position: relative;
 z-index: 1;
 width: 100%; */
 margin: 16px 7px;
}


@media(min-width:768px){
 .benefit-cards__wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:center;
 }
}

@media (min-width:768px) and (max-width:991px) {
 .benefit-cards__card {
	max-width: 48%;
	flex-basis: 48%;
 }
}

@media (min-width:992px) and (max-width:1024px) {
 .benefit-cards__card {
	max-width: calc( 32.3% - 10px);
	flex-basis: calc( 32.3% - 10px);
 }
}

@media (min-width:1025px) {
 .benefit-cards__card.view-four-boxes {
	max-width: calc( 24% - 15px);
	flex-basis: calc( 24% - 15px);
 }
 .benefit-cards__card.view-three-boxes {
	max-width: calc( 32.3% - 15px);
	flex-basis: calc( 32.3% - 15px);
 }
}




/********************************************************/

.benefit-cards .flip-box__panel {
 min-height: 280px;
 /*margin: 0 auto;
 /*position: relative;*/
 perspective: 1000px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.benefit-cards__front {
 color: #fff;
 -webkit-transform: rotateY(0) rotateX(0);
 -moz-transform: rotateY(0) rotateX(0);
 transform: rotateY(0) rotateX(0);
 height: 100%;
 position: absolute;
 width: 100%;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: all .6s ease-in-out;
 -moz-transition: all .6s ease-in-out;
 -ms-transition: all .6s ease-in-out;
 -o-transition: all .6s ease-in-out;
 transition: all .6s ease-in-out;
 /*background-size: cover!important;
 background-repeat: no-repeat!important;
 overflow: hidden;
 background-attachment: scroll;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 text-align: center;*/
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.benefit-cards__front:before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
}

.benefit-cards__inner {
 padding: 0 15px;
 text-align: center; 
 margin-top: 20px; 
}

.benefit-cards__inner img{
 width: 60px;
 height: 60px;
}


.benefit-cards__inner i{
 font-size: 60px;
 width: 60px;
 height: 60px;
}

.benefit-cards__inner h4{
 color: #fff;
}

.benefit-cards__inner p{
 color: #fff;
}

.benefit-cards .flip-box__panel.flip_true .benefit-cards__back {
 -webkit-transform: rotateX( -178deg) rotateY(0);
 -moz-transform: rotateX(-178deg) rotateY(0);
 transform: rotateX( -178deg) rotateY(0);
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-backface-visibility: hidden;
 -moz-backface-visibility: hidden;
 backface-visibility: hidden;
 -webkit-transition: all .6s ease-in-out;
 -moz-transition: all .6s ease-in-out;
 -ms-transition: all .6s ease-in-out;
 -o-transition: all .6s ease-in-out;
 transition: all .6s ease-in-out;
 background-size: cover!important;
 background-repeat: no-repeat!important;
 overflow: hidden;
 background-attachment: scroll;
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #3c6ecd;
 color: #fff;
}
.benefit-cards .flip-box__panel.flip_true .benefit-cards__back .benefit-cards__inner {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 height: 100%;
}

.benefit-cards .flip-box__panel.flip_true:hover .benefit-cards__front {
 -webkit-transform: rotateX( 178deg) rotateY(0);
 -moz-transform: rotateX(178deg) rotateY(0);
 transform: rotateX( 178deg) rotateY(0);
}

.benefit-cards .flip-box__panel.flip_true:hover .benefit-cards__back {
 -webkit-transform: none;
 -moz-transform: none;
 transform: none; 
}

.benefit-cards .flip-box__panel.flip_false {
 min-height: 180px;
}
.benefit-cards .flip-box__panel.flip_false .benefit-cards__back {
 min-height: auto;
}
@media (max-width:1024px) {
 .benefit-cards__card .flip-box__panel.flip_true .benefit-cards__back {
	-webkit-transform: rotateX( 1deg) rotateY(0);
	-moz-transform: rotateX(1deg) rotateY(0);
	transform: rotateX( 1deg) rotateY(0);
 }
 .benefit-cards__card .flip-box__panel.flip_true .benefit-cards__front {
	/*-webkit-transform: none;
	-moz-transform: none;
	transform: none;*/
	-webkit-transform: rotateX(-178deg) rotateY(0);
	-moz-transform: rotateX(-178deg) rotateY(0);
	transform: rotateX(-178deg) rotateY(0);
 }
}

