Blurbs 14

Home » Components » Blurbs » 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%;
	}
}