{"title":"3D Flip Card","data":[{"id":"feqroj","name":"piotnetbricks-creator","parent":0,"children":[],"settings":{"label":"3D Flip Card","name":"3d_flip_card","icon":{"library":"themify","icon":"ti-star"},"categories":"general","controlsRepeater":[{"tab":"content","type":"group","name":"settings","label":"Settings","id":"axpfzm"},{"tab":"content","type":"text","name":"title","label":"Title","id":"yiofwn","default":"The Title"},{"tab":"content","type":"textarea","name":"desc","label":"Description","id":"ebptjq","default":"Description"},{"tab":"content","type":"text","name":"button_text","label":"Button Text","id":"tdrcus","default":"Button Text"},{"tab":"content","type":"link","name":"button_link","label":"Button Link","id":"ogords"},{"tab":"content","type":"image","label":"Background Image","id":"bnwrmg","name":"background_image"}],"piotnetbricksSttSpeed":500,"piotnetbricksTooltipContent":"text","piotnetbricksTooltipTextEditor":"Fill your text","piotnetbricksTooltipDuration":"300","piotnetbricksTooltipDistance":"5","piotnetbricksTooltipAnimationType":"scale","piotnetbricksTooltipPlacement":"top","piotnetbricksCVByDateAndTimeActions":"show","piotnetbricksFadeMultipleBgSpeed":7000,"piotnetbricksFadeMultipleBgFadeOutSpeed":1500,"renderTemplate":"<?php\n$background_image_url = !empty($background_image) ? $background_image['full'] : '';\n?>\n<div class=\"box-container\">\n\t<div class=\"box-item\">\n    <div class=\"flip-box\">\n      <div class=\"flip-box-front text-center\" style=\"background-image: url('<?php echo $background_image_url; ?>');\">\n        <div class=\"inner color-white\">\n          <h3 class=\"flip-box-header\"><?php echo $title; ?><\/h3>\n          <p><?php echo $desc; ?><\/p>\n          <img src=\"https:\/\/s25.postimg.cc\/65hsttv9b\/cta-arrow.png\" alt=\"\" class=\"flip-box-img\">\n        <\/div>\n      <\/div>\n      <div class=\"flip-box-back text-center\" style=\"background-image: url('<?php echo $background_image_url; ?>');\">\n        <div class=\"inner color-white\">\n          <h3 class=\"flip-box-header\"><?php echo $title; ?><\/h3>\n          <p><?php echo $desc; ?><\/p>\n          <?php\n          $this->set_link_attributes( 'a', $button_link );\n          ?>\n          <a <?php echo $this->render_attributes( 'a' ); ?> class=\"flip-box-button\"><?php echo $button_text; ?><\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\t<\/div>\n<\/div>","css":".text-center {\n  text-align: center;\n}\n\n.color-white {\n  color: #fff;\n}\n\n.box-container {\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  padding: 35px 15px;\n  width: 100%;\n}\n\n@media screen and (min-width:1380px) {\n  .box-container {\n    flex-direction: row\n  }\n}\n\n.box-item {\n  position: relative;\n  -webkit-backface-visibility: hidden;\n  width: 415px;\n  margin-bottom: 35px;\n  max-width: 100%;\n}\n\n.flip-box {\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n  -webkit-transform-style: preserve-3d;\n  perspective: 1000px;\n  -webkit-perspective: 1000px;\n}\n\n.flip-box-front,\n.flip-box-back {\n  background-color: #000;\n  background-size: cover;\n  background-position: center;\n  border-radius: 8px;\n  min-height: 475px;\n  -ms-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);\n  transition: transform 0.7s cubic-bezier(.4,.2,.2,1);\n  -webkit-transition: transform 0.7s cubic-bezier(.4,.2,.2,1);\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\n\n.flip-box-front {\n  -ms-transform: rotateY(0deg);\n  -webkit-transform: rotateY(0deg);\n  transform: rotateY(0deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n.flip-box:hover .flip-box-front {\n  -ms-transform: rotateY(-180deg);\n  -webkit-transform: rotateY(-180deg);\n  transform: rotateY(-180deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n.flip-box-back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  \n  -ms-transform: rotateY(180deg);\n  -webkit-transform: rotateY(180deg);\n  transform: rotateY(180deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n.flip-box:hover .flip-box-back {\n  -ms-transform: rotateY(0deg);\n  -webkit-transform: rotateY(0deg);\n  transform: rotateY(0deg);\n  -webkit-transform-style: preserve-3d;\n  -ms-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n}\n\n.flip-box .inner {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  padding: 60px;\n  outline: 1px solid transparent;\n  -webkit-perspective: inherit;\n  perspective: inherit;\n  z-index: 2;\n  \n  transform: translateY(-50%) translateZ(60px) scale(.94);\n  -webkit-transform: translateY(-50%) translateZ(60px) scale(.94);\n  -ms-transform: translateY(-50%) translateZ(60px) scale(.94);\n  top: 50%;\n}\n\n.flip-box-header {\n  font-size: 34px;\n}\n\n.flip-box p {\n  font-size: 20px;\n  line-height: 1.5em;\n}\n\n.flip-box-img {\n  margin-top: 25px;\n}\n\n.flip-box-button {\n  display: inline-block;\n  background-color: transparent;\n  border: 2px solid #fff;\n  border-radius: 2px;\n  color: #fff;\n  cursor: pointer;\n  font-size: 20px;\n  font-weight: bold;\n  margin-top: 25px;\n  padding: 15px 20px;\n  text-transform: uppercase;\n}"}}]}