# flip-boxes/1.4/assets/css/flipboxes-layout.css

Cool Flipbox – Shortcode & Gutenberg Block, version 1.4. 282 lines.

- Page: https://pluginprobe.com/plugins/flip-boxes/1.4/code/assets/css/flipboxes-layout.css
- Raw: https://pluginprobe.com/plugins/flip-boxes/1.4/raw/assets/css/flipboxes-layout.css
- Modified: 2018-12-06T13:20:42+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/flip-boxes/1.4/code/assets/css/flipboxes-layout.css#L10-L20`.

```css
/*
* 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;
}
```