/* * Common CSS for all layouts */ .cfb_wrapper { display: flex; flex-wrap: wrap; } .cfb-flip { -webkit-perspective: 800; perspective: 800; position: relative; text-align: center; margin-bottom:30px; } .cfb-face.front { height: auto!important; } .cfb-inner-data { word-break: break-all; width: 100%; word-break: break-word; } .cfb-face.back .cfb-flip_link a{ color:#fff; } .cfb-extra-label{ margin-top:5px; } .cfb-extra-label { margin-top: 20px; } .cfb-flip_link { width: 100%; text-align: Center; padding: 10px; } .cfb-link_text { display: inline-block; background-color: rgba(255, 255, 255, 1); font-size: 14px; font-family: "Open Sans"; font-weight: 300; font-style: normal; padding: 10px 20px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; word-break: break-word; } .cfb-link_text:hover{ font-weight: 900; } .cfb-back-desc { font-size: 14px; font-family: "Open Sans"; font-weight: 300; font-style: normal; } .cfb-data { display: flex; align-items: center; /* display: block; */ position: relative; top: 0; transform: none; height: auto; padding: 30px; } .cfb-front-desc { font-size: 14px; font-family: "Open Sans"; font-weight: 300; font-style: normal; } .cfb-face.front .cfb-title { font-size: 22px; font-family: "Open Sans"; font-weight: 600; font-style: normal; margin-bottom: 13px; word-break: break-word; } .cfb-link_text { padding: 3px 11px; } /** layout-4 **/ .cfb_wrapper.layout-4 .cfb-face.front { height: auto!important; transform-style: unset!important; } .cfb_wrapper.layout-4 .cfb-title { width: 100%; float: left; margin-top: 30px; word-break: break-word; } .cfb_wrapper.layout-4 .cfb-front-title { margin-top: 30px; color: #ffffff; width: 100%; float: left; text-align: Center; font-size: 20px; font-family: "Open Sans"; font-weight: 600; font-style: normal; } .cfb_wrapper.layout-4 .cfb-icon-img{ font-size:32px!important; } .cfb_wrapper.layout-4 .cfb-icon-img .fa { line-height: 60px; } .cfb_wrapper.layout-4 .cfb-face .cfb-data { padding: 8px; border: 5px solid white; } .cfb_wrapper.layout-4 .cfb-inner-data { padding: 4px; width: 100%; } .cfb_wrapper.layout-4 .cfb-icon-img { position: absolute; left: 50%; background: rgba(255, 255, 255, 1); height: 60px; width: 60px; bottom: -30px; border-radius: 60px; transform: translateX(-50%); text-align: center; display:inline-block; } .cfb_wrapper.layout-4 .cfb-image { width: 100%; max-width: 100%; float: left; position: relative; } .cfb_wrapper.layout-4 .cfb-desc { padding: 10px; } /* layout 5 */ .cfb_wrapper.layout-5 { color: white; } .layout-5 .cfb-icon-img { margin-bottom: 12px; } .cfb-data { padding: 16px; } /* * Layout 6 */ .cfb_wrapper.layout-6 { color: white; } .layout-6 .cfb-face { border-radius: 50%; background-color: rgba(34, 199, 42, 1); overflow: hidden; padding: 5px; } .cfb_wrapper.layout-6 .cfb-data { border: 2px solid white; border-radius: 50%; } .layout-6 .default .cfb-face.front .cfb-data { padding: 6px; } .layout-6 .cfb-title { font-size: 22px; font-family: "Open Sans"; font-weight: 600; font-style: normal; padding:10px; word-break: break-word; } .cfb_wrapper.layout-6 img { top: 0; left: 0; width: 100%; height: 100%; display: block; } .cfb_wrapper.layout-6 .cfb-image { position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; display: block; border-radius: 50%; overflow: hidden; } .cfb_wrapper.layout-6 .default .cfb-image { position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; } .layout-6 .cfb-content { padding: 10px 10px; } .layout-6 .cfb-back-desc p { margin-bottom: 2px; } .layout-6 .cfb-link_text { padding: 3px 9px; } /* * Layout 7 */ .cfb_wrapper.layout-7 .cfb-face.front { color: white; } .cfb_wrapper.layout-7 .cfb-line { position: relative; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); background-color: #ffffff; width: 100px; height: 2px; margin-bottom: 5px; } .layout-7 .cfb-face.back { background-size: cover!important; } /* * Layout 8 */ .layout-8 .cfb-face { background-size: cover!important; } /* * Layout 9 */ .cfb_wrapper.layout-9 .cfb-face.front { color: white; } .cfb_wrapper.layout-9 .cfb-data { display: block; } .cfb_wrapper.layout-9 .cfb-face.back { border: 2px solid; }