@import url(https://fonts.googleapis.com/css?family=Roboto);
position: absolute;
top: 0;
font-size: 15rem;
font-weight: 800;
text-transform: uppercase;
color: #3C4447;
}

div.blog-card-area span.s2 {
	font-weight: 800;
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 15rem;
	text-transform: uppercase;
	color: #3C4447;
}

div.blog-card-area .card {
	position: relative;
	height: 350px;
	margin-bottom: 5em;
	background-color: #FFF;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
div.blog-card-area.bottom .card {
	height: unset;
}

@media (min-width:767px) {

	/* Image on the left side */
	div.blog-card-area .thumbnail {
		float: left;
		position: relative;
		left: 30px;
		top: -30px;
		height: 320px;
		width: 530px;
		-webkit-box-shadow: 10px 10px 60px 0px rgba(0, 0, 0, 0.75);
		-moz-box-shadow: 10px 10px 60px 0px rgba(0, 0, 0, 0.75);
		box-shadow: 10px 10px 60px 0px rgba(0, 0, 0, 0.75);
		overflow: hidden;
	}

	/* Image on the left side */
	div.blog-card-area.rtl-x .thumbnail {
		float: right;
		right: 30px;
		left: unset;
	}


	div.blog-card-area img.left {
		position: absolute;
		left: 50%;
		top: 50%;
		height: auto;
		width: 100%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	div.blog-card-area.rtl-x .right {
		margin-right: 590px;
		margin-left: 20px;
	}

	div.blog-card-area .right {
		margin-left: 590px;
		margin-right: 20px;
	}

}
@media (max-width:767px) {
	div.blog-card-area .right {
		padding: 1em;
	}
}

body.dark div.blog-card-area h1 {
	color: #242424;
}
body.dark div.blog-card-area.bottom h1 {
	padding: 2em;
}
div.blog-card-area h1 {
	padding-top: 15px;
	font-size: 25px;
	color: #4B4B4B;
}

div.blog-card-area .author {
	background-color: #9ECAFF;
	height: 30px;
	width: 110px;
	border-radius: 20px;
}

div.blog-card-area .author > img {
	padding-top: 5px;
	margin-left: 10px;
	float: left;
	height: 20px;
	width: 20px;
	border-radius: 50%;
}

div.blog-card-area h2 {
	padding-top: 8px;
	margin-right: 6px;
	text-align: right;
	font-size: 0.8rem;
}
div.blog-card-area .separator {
	margin-top: 10px;
	border: 1px solid #C3C3C3;
}

div.blog-card-area p {
	text-align: justify;
	padding-top: 10px;
	line-height: 150%;
	color: #4B4B4B;
}

div.blog-card-area h5 {
	position: absolute;
	left: 30px;
	bottom: -120px;
	font-size: 6rem;
	color: #C3C3C3;
}

div.blog-card-area h6 {
	position: absolute;
	left: 30px;
	bottom: -55px;
	font-size: 2rem;
	color: #C3C3C3;
}


div.blog-card-area li {
	padding-right: 40px;
	color: #7B7B7B;
}

div.blog-card-area .fab {
	position: absolute;
	right: 50px;
	bottom: -40px;
	box-sizing: border-box;
	padding-top: 18px;
	background-color: #1875D0;
	width: 80px;
	height: 80px;
	color: white;
	text-align: center;
	border-radius: 50%;
	-webkit-box-shadow: 10px 10px 50px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 10px 10px 50px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 50px 0px rgba(0, 0, 0, 0.75);
}

div.blog-card-area.height-auto .card{
	height: auto;
}



/* CARD 2 */

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400");
div.blog-card-area-2 html, body {
	font-family: "Roboto", sans-serif;
	color: #505357;
	padding: 0;
	margin: 0;
	font-size: 100%;
}

div.blog-card-area-2 html, body * {
	box-sizing: border-box;
}

div.blog-card-area-2 h3 {
	font-size: 2.5em;
	line-height: 1;
	text-transform: uppercase;
	font-weight: bold;
	font-style: normal;
	margin: 0 0 0 0;
}

div.blog-card-area-2 h5 {
	font-size: 0.75em;
	text-transform: uppercase;
	font-weight: 300;
	font-style: normal;
	margin: 0 0 10px 0;
	color: #BEBEBE;
}

div.blog-card-area-2 .bg-fifty-percent {
	position: fixed;
	width: 100%;
	height: 50vh;
	z-index: -1;
}
div.blog-card-area-2 .bg-fifty-percent.top {
	top: 0;
	background-color: #EEF5DB;
}
div.blog-card-area-2 .bg-fifty-percent.bottom {
	top: 50vh;
	background-color: #C7EFCF;
}

body.dark div.blog-card-area-2 .container {
	margin: 2em auto;
	padding: unset!important;
}
div.blog-card-area-2 .container .blog-item {
	position: relative;
	width: 100%;
	min-height: 200px;
	height: auto;
	background-color: #FFFFFF;
	overflow: hidden;
	/*	border-radius: 10px;*/
	margin: 0 0 30px 0;
}
div.blog-card-area-2 .container .blog-item .blog-content {
	position: relative;
	width: 65%;
	height: 100%;
	top: 0;
	left: 0;
	padding: 30px;
}
body.dark div.blog-card-area-2 .container .blog-item .blog-content p {
	padding: 1em 2em;
	color: #242424;
}
div.blog-card-area-2 .container .blog-item .blog-content p {
	line-height: 1.5em;
}
div.blog-card-area-2 .container .blog-item .blog-content a {
	display: inline-block;
	text-decoration: none;
	border: 1px solid #80D9FB;
	border-radius: 7px;
	background-color: #80D9FB;
	color: #FFFFFF;
	padding: 10px 20px;
	margin: 0;
	transition: background-color 300ms linear, color 300ms linear;
}
div.blog-card-area-2 .container .blog-item .blog-content a:hover {
	background-color: #FFFFFF;
	color: #80D9FB;
}
div.blog-card-area-2 .container .blog-item .blog-image {
	position: absolute;
	width: 35%;
	height: 100%;
	top: 0;
	right: 0;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* CARD 3 */

div.blog-card-area-3 .card {
	--card-gradient: rgba(0, 0, 0, 0.8);
	--card-gradient: #e7a977, #ebbe9b;
	--card-blend-mode: overlay;
	background-color: #fff;
	border-radius: 0.5rem;
	box-shadow: 0.05rem 0.1rem 0.3rem -0.03rem rgba(0, 0, 0, 0.15);
	padding-bottom: 1rem;
	background-image: linear-gradient(var(--card-gradient), white max(9.5rem, 27vh));
	overflow: hidden;
}
div.blog-card-area-3 .card img {
	background-size: cover;
	border-radius: 0.5rem 0.5rem 0 0;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	max-height: max(10rem, 17vh);
	aspect-ratio: 4/3;
	mix-blend-mode: var(--card-blend-mode);
}
div.blog-card-area-3 .card img ~ * {
	margin-left: 1rem;
	margin-right: 1rem;
}
div.blog-card-area-3 .card > :last-child {
	margin-bottom: 0;
}
div.blog-card-area-3 .card:hover, .card:focus-within {
	--card-gradient: #24a9d5 max(8.5rem, 20vh);
}

/* Additional demo display styles */
div.blog-card-area-3 * {
	box-sizing: border-box;
}

div.blog-card-area-3 body {
	display: grid;
	place-content: center;
	justify-items: center;
	min-height: 100vh;
	margin: 0;
	padding: 1rem;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
	color: #444;
	background-color: #e1faf1;
}

div.blog-card-area-3 .card h3 {
	margin-top: 1rem;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
}

div.blog-card-area-3 .card a {
	color: inherit;
}

div.blog-card-area-3 .card-wrapper {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
	grid-gap: 1.5rem;
	max-width: 100vw;
	width: 120ch;
	padding-left: 1rem;
	padding-right: 1rem;
}

div.blog-card-area.bottom h1 {
	padding: 2em;
}