.hero { position: relative; background-image: url("/cms/assets/download/32806/word_cloud.png?token=a2d5512a16bb612c065b7ec63ac0b95cb0a7a07ea0e4c987316d43a5189ff723"); background-repeat: no-repeat; background-position: center top; background-size: auto; }

.card { transform-style: preserve-3d; transition: all 0.5s ease-in-out; }

.card-title { display: none; }

.card-container:hover .card { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.card-container:hover .card-name { display: none; }
.card-container:hover .card-title { display: block; }

/* .card-container { position: relative; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; -o-perspective: 1000; display: inline-block;
}
.card { width: 150px;  height: 150px; position: relative; -webkit-transform-style: preserve-3d; -webkit-transition: 0.5s; -moz-transform-style: preserve-3d; -moz-transition: 0.5s; -ms-transform-style: preserve-3d; -ms-transition: 0.5s; -o-transform-style: preserve-3d; -o-transition: 0.5s; transition: 0.5s;
}
.card-container:hover .card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg);	 transform: rotateY(180deg);				
}
.side { position: absolute; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
}
.back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); color: initial; background-color: #fff;
} */