| Server IP : 104.21.64.1 / Your IP : 216.73.216.145 Web Server : LiteSpeed System : Linux premium151.web-hosting.com 4.18.0-553.44.1.lve.el8.x86_64 #1 SMP Thu Mar 13 14:29:12 UTC 2025 x86_64 User : tempvsty ( 647) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/tempvsty/./eaabusiness.com/wp-content/themes/globeco/scss/pages/blog/flip/ |
Upload File : |
/* BLOG FLIP ITEM */
.news.posts_grid_flip {
margin: -40px 0 0;
.cws_vc_shortcode_grid {
margin: 0 -15px;
position: relative;
}
.item,
.grid-sizer {
width: 100%;
}
&.posts_grid_carousel .item {
width: 100% !important;
}
}
.news.posts_grid_flip .item {
font-size: 16px;
line-height: 1.625em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 15px 50px;
position: relative;
.post_post_info {
padding: 40px 44px;
background-color: #FFFFFF;
}
.post_post_info:first-child {
margin: 0;
}
.post_wrapper {
position: relative;
}
.pic {
overflow: hidden;
position: relative;
max-width: 100%;
z-index: 1;
.hover-effect {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
-ms-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
transition: opacity 0.3s;
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
&:hover .hover-effect {
opacity: 1;
}
.plus_wrapper span {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #ffffff;
opacity: 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
z-index: 2;
}
.plus_wrapper span:first-child {
width: 38px;
height: 2px;
}
.plus_wrapper span:first-child + span {
width: 2px;
height: 38px;
}
&:hover .plus_wrapper span {
opacity: 1;
}
}
.pic img {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
display: block;
width: 100%;
}
.pic:hover img {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.post_media_link {
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 3;
}
.post_info_header {
margin: 24px -25px 0;
font-size: 0;
line-height: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.post_meta {
font-size: 14px;
color: #7f7f8a;
position: relative;
margin: 0 25px;
display: block;
vertical-align: top;
a {
color: inherit;
}
}
.post_author {
white-space: nowrap;
padding: 0 0 0 54px;
}
.post_author_avatar {
position: absolute;
width: 40px;
height: 40px;
left: 0;
top: 50%;
margin: -20px 0 0;
img {
display: block;
width: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
}
.post_info_divider {
display: block;
width: 100%;
height: 1px;
background-color: #bcd0da;
margin: 7px 10px 0;
}
.post_categories {
max-width: 50%;
-webkit-flex-shrink: 0;
flex-shrink: 0;
text-align: right;
a {
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.3px;
}
}
.post_info_meta {
max-width: 50%;
-webkit-flex-shrink: 0;
flex-shrink: 0;
}
.post_title {
margin: 0;
font-size: 24px;
color: #232637;
a {
color: #232637;
}
}
.post_content {
line-height: 1.5em;
margin-top: 19px;
&:first-child {
margin: 0;
}
}
.post_info_footer {
margin: 33px 0 0;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
&:first-child {
margin: 0;
}
}
.post_likes {
font-size: 0;
line-height: 1;
white-space: nowrap;
.sl-icon {
display: inline-block;
vertical-align: top;
width: 30px;
height: 30px;
cursor: pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin: 0 15px 0 0;
position: relative;
font: 400 12px/1 'FontAwesome';
color: #ff4545;
background-color: #ffebeb;
-webkit-transition: color 0.3s, background-color 0.3s;
-moz-transition: color 0.3s, background-color 0.3s;
-ms-transition: color 0.3s, background-color 0.3s;
-o-transition: color 0.3s, background-color 0.3s;
transition: color 0.3s, background-color 0.3s;
&:before {
content: '\f004';
position: absolute;
display: block;
width: 13px;
height: 10px;
left: 50%;
top: 50%;
margin: -5px 0 0 -6px;
}
}
.sl-icon.unliked,
&:hover .sl-icon {
color: #ffebeb;
background-color: #ff4545;
}
.sl-count {
color: #ff4545;
font-size: 16px;
line-height: 30px;
font-weight: 700;
}
}
.post_info_header .post_likes {
margin: 0 25px;
}
.post_info_main {
margin: 9px 0 0;
&:first-child {
margin: 0;
}
.post_media_link {
position: static;
display: inline;
width: auto;
height: auto;
left: auto;
top: auto;
}
.post_more {
margin-top: 20px;
}
}
}
.news.posts_grid_flip .format-quote.item {
.post_title {
position: relative;
padding: 0 0 0 36px;
&:before {
content: '\f10d';
font-family: 'FontAwesome';
display: block;
position: absolute;
width: 30px;
left: 0;
top: 9px;
vertical-align: baseline;
font-size: 25px;
font-weight: 400;
line-height: 28px;
font-style: normal;
}
}
.author_name {
margin: 20px 0 0 36px;
}
}
.news.posts_grid_flip .format-link.item {
.post_title {
position: relative;
padding: 0 0 0 36px;
&:before {
content: '\f11a';
font-family: 'cwsicon';
display: block;
position: absolute;
width: 30px;
left: 0;
top: 9px;
vertical-align: baseline;
font-size: 25px;
font-weight: 400;
line-height: 28px;
font-style: normal;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
.posts_grid_flip .item {
background-color: transparent;
perspective: 1000px;
.post_wrapper {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: transform 0.8s;
-moz-transition: transform 0.8s;
-ms-transition: transform 0.8s;
-o-transition: transform 0.8s;
transition: transform 0.8s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
&:hover .post_wrapper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip_front {
background-color: #FFFFFF;
position: relative;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip_back {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
background-color: #ecf2f5;
border: solid 2px #c7d8e0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index: 3;
padding: 50px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: center;
justify-content: center;
.post_title {
font-size: 36px;
line-height: 42px;
color: #232637;
}
.post_title a {
color: #232637;
}
.post_content {
margin: 22px 0 0;
&:before {
content: '';
position: relative;
display: inline-block;
vertical-align: top;
margin: 0 0 20px;
width: 21px;
height: 2px;
}
}
.read_more_button {
color: #FFFFFF;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
border-width: 2px;
border-style: solid;
font-size: 18px;
line-height: 30px;
padding: 12px 38px;
text-transform: uppercase;
font-weight: 700;
-webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
-moz-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
-ms-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
-o-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
transition: color 0.3s, background-color 0.3s, border-color 0.3s;
display: inline-block;
vertical-align: top;
&:hover {
background-color: transparent;
}
}
}
}