Blurbs 14
Blurbs 14
Nano Technology
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will.
Sonic Satellites
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using.
Space Missions
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using. a page when looking at its layout. The point of using
Nano Technology
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. t is a long established fact that a reader will.
Sonic Satellites
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using.
Space Missions
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using. a page when looking at its layout. The point of using
/* ===== Blurbs 14 ===== */
#blurbs-14 .card {
text-align: center;
padding: 5px 30px;
position: relative;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
#blurbs-14 .card:hover {
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}
#blurbs-14 .card:after {
content: '';
background-color: #fff;
height: 77%;
width: 100%;
border-radius: 35% 35% 0 0;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
#blurbs-14 .card .card-header {
color: #fff;
font-size: 35px;
width: 75px;
height: 75px;
margin: auto;
border-radius: 50%;
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
z-index: 1;
-webkit-transition: all 0.6s ease 0s;
-o-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#blurbs-14 .card:hover .card-header {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#blurbs-14 .card .card-header i {
opacity: 0;
-webkit-transition: all 0.6s ease 0s;
-o-transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
}
#blurbs-14 .card:hover .card-header i {
opacity: 1;
}
#blurbs-14 .card .card-header:before {
content: "";
width: 65px;
height: 65px;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
z-index: -1;
}
#blurbs-14 .col:nth-child(1) .card-header {
background: -webkit-gradient(linear, left top, right top, from(#700C14), to(#B91B21));
background: -o-linear-gradient(left, #700C14, #B91B21);
background: linear-gradient(to right, #700C14, #B91B21);
}
#blurbs-14 .col:nth-child(1) .card-header:before {
background: -webkit-gradient(linear, left top, right top, from(#B91B21), to(#700C14));
background: -o-linear-gradient(left, #B91B21, #700C14);
background: linear-gradient(to right, #B91B21, #700C14);
}
#blurbs-14 .col:nth-child(2) .card-header {
background: -webkit-gradient(linear, left top, right top, from(#305000), to(#6C9A00));
background: -o-linear-gradient(left, #305000, #6C9A00);
background: linear-gradient(to right, #305000, #6C9A00);
}
#blurbs-14 .col:nth-child(2) .card-header:before {
background: -webkit-gradient(linear, left top, right top, from(#6C9A00), to(#305000));
background: -o-linear-gradient(left, #6C9A00, #305000);
background: linear-gradient(to right, #6C9A00, #305000);
}
#blurbs-14 .col:nth-child(3) .card-header {
background: -webkit-gradient(linear, left top, right top, from(#063779), to(#1767C0));
background: -o-linear-gradient(left, #063779, #1767C0);
background: linear-gradient(to right, #063779, #1767C0);
}
#blurbs-14 .col:nth-child(3) .card-header:before {
background: -webkit-gradient(linear, left top, right top, from(#1767C0), to(#063779));
background: -o-linear-gradient(left, #1767C0, #063779);
background: linear-gradient(to right, #1767C0, #063779);
}
#blurbs-14 .card h3 {
font-size: 18px;
text-transform: capitalize;
margin: 0 0 5px;
font-weight: 900
}
@media(max-width: 992px) {
#blurbs-14 .card {
-webkit-box-flex: 100%;
-ms-flex: 100%;
flex: 100%;
}
}