/* =====================================================
 Sensitive Personal Portfolio v1.0.0
 NOTE: Generated from SCSS
 
[Table Of Contents]
 A. Mixin Tools
 B. Common
 1. Header
 2. Home Page
 3. About Page
 4. Resume Page
 5. Portfolio Page
 6. Blog Page
 7. Contact Page
 8. Medias
======================================================== */
/* [A. Mixin Tools] ==================================== */
/* [B. Common] ========================================= */
@-webkit-keyframes menucollapsefade {
	0%, 60%, 100% {
		opacity: 1; }
	20%, 40% {
		opacity: 0; } }

@keyframes menucollapsefade {
	0%, 60%, 100% {
		opacity: 1; }
	20%, 40% {
		opacity: 0; } }

@-webkit-keyframes bounce {
	0%, 100% {
		-webkit-transform: scale(0); }
	50% {
		-webkit-transform: scale(1); } }

@keyframes bounce {
	0%, 100% {
		transform: scale(0);
		-webkit-transform: scale(0); }
	50% {
		transform: scale(1);
		-webkit-transform: scale(1); } }

body * {
	font-family: 'Roboto', Arial, Helvetica, sans-serif; }

a,
button,
select,
input {
	outline: none !important; }

.loading-container {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 99999 !important; }
	.loading-container .bounce-container {
		position: relative;
		width: 40px;
		height: 40px;
		top: calc(50% - 20px);
		left: calc(50% - 20px); }
		.loading-container .bounce-container .bounce1,
		.loading-container .bounce-container .bounce2 {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			opacity: 0.6;
			position: absolute;
			top: 0;
			left: 0;
			-webkit-animation: bounce 2.0s infinite ease-in-out;
			animation: bounce 2.0s infinite ease-in-out; }
		.loading-container .bounce-container .bounce2 {
			-webkit-animation-delay: -1.0s;
			animation-delay: -1.0s; }

.animated {
	animation-duration: 0.50s; }

.pages {
	position: fixed;
	left: 50px;
	width: calc(100% - 50px);
	height: 100%;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s; }
	.pages .sub-pages {
		position: absolute;
		margin: 30px auto;
		left: 0;
		right: 0;
		width: calc(100% - 60px);
		height: calc(100% - 60px);
		max-width: 1240px; }
		.pages .sub-pages .section {
			opacity: 0;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 9; }
			.pages .sub-pages .section.active {
				opacity: 1;
				z-index: 10; }
			.pages .sub-pages .section .main-container {
				padding: 50px; }
				.pages .sub-pages .section .main-container .main-title {
					text-align: center;
					font-weight: 700;
					font-size: 100px;
					line-height: 120px;
					margin-top: -25px; }
				.pages .sub-pages .section .main-container .main-desc {
					font-size: 19px;
					text-align: center;
					line-height: 24px;
					margin-top: -43px; }
				.pages .sub-pages .section .main-container .content-group {
					margin-top: 50px; }
					.pages .sub-pages .section .main-container .content-group .title {
						font-size: 16px;
						padding: 12px 15px 10px 15px; }

body.left-side-menu-expand .pages {
	width: calc(100% - 240px);
	left: 240px; }

.mfp-container {
	padding: 0; }

.mfp-wrap.popup-box-inline {
	max-width: 720px;
	left: 50%;
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%); }
	.mfp-wrap.popup-box-inline .mfp-close {
		font-size: 40px; }
	.mfp-wrap.popup-box-inline .popup-box {
		height: 600px; }
		.mfp-wrap.popup-box-inline .popup-box .image-area img {
			max-width: 100%; }
		.mfp-wrap.popup-box-inline .popup-box .btn-area {
			text-align: right; }
			.mfp-wrap.popup-box-inline .popup-box .btn-area a {
				font-weight: bold;
				text-decoration: none;
				height: 45px;
				min-width: 45px;
				line-height: 43px;
				text-align: center;
				display: inline-block;
				padding: 0 25px;
				cursor: pointer;
				background-color: transparent;
				-webkit-border-radius: 50px;
				-moz-border-radius: 50px;
				-ms-border-radius: 50px;
				border-radius: 50px;
				-moz-transition: 0.5s;
				-o-transition: 0.5s;
				-webkit-transition: 0.5s;
				transition: 0.5s; }
				.mfp-wrap.popup-box-inline .popup-box .btn-area a i {
					font-size: 24px;
					margin-left: 6px;
					position: relative;
					top: 4px; }
		.mfp-wrap.popup-box-inline .popup-box .content-area {
			padding: 25px;
			font-size: 14px; }
			.mfp-wrap.popup-box-inline .popup-box .content-area .title {
				font-weight: bold;
				font-size: 16px; }
			.mfp-wrap.popup-box-inline .popup-box .content-area .category {
				font-size: 12px; }
			.mfp-wrap.popup-box-inline .popup-box .content-area .content {
				margin-top: 20px;
				text-align: justify; }
				.mfp-wrap.popup-box-inline .popup-box .content-area .content blockquote {
					padding: 10px 20px;
					font-style: italic; }

/* [1. Header] ========================================= */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 50px;
	height: 100%;
	z-index: 2;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s; }
	header .logo-area {
		padding: 10px 0;
		position: relative;
		margin-bottom: 1px; }
		header .logo-area a {
			width: 50px;
			display: block;
			text-align: center;
			text-decoration: none; }
			header .logo-area a .avatar img {
				width: 36px;
				height: 36px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				border-radius: 50%; }
		header .logo-area:after {
			content: " ";
			position: absolute;
			left: 10px;
			bottom: 0;
			width: calc(100% - 20px);
			height: 1px; }
	header .links-area ul {
		margin: 0;
		padding: 0;
		list-style: none; }
		header .links-area ul li a {
			display: block;
			position: relative;
			padding: 4px 12px 4px 9px;
			font-size: 25px;
			text-decoration: none;
			white-space: nowrap;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
	header .expand-area {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0; }
		header .expand-area .expand-collapse {
			display: block;
			position: relative;
			text-align: right;
			padding: 8px 15px 4px 15px;
			font-size: 18px;
			cursor: pointer;
			text-decoration: none;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
			header .expand-area .expand-collapse span {
				position: absolute;
				top: 0;
				opacity: 0;
				visibility: hidden;
				text-align: center; }
			header .expand-area .expand-collapse i:before {
				content: "\f10e"; }
	header .logo-area a span,
	header .links-area a span,
	header .expand-area a span {
		min-width: 75px;
		position: absolute;
		z-index: 9;
		left: 120%;
		top: 8px;
		font-size: 12px;
		padding: 5px 9px;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		text-align: center;
		-moz-transition: 0.5s;
		-o-transition: 0.5s;
		-webkit-transition: 0.5s;
		transition: 0.5s;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		-ms-border-radius: 3px;
		border-radius: 3px; }
	header .logo-area a:hover span,
	header .links-area a:hover span,
	header .expand-area a:hover span {
		opacity: 1;
		visibility: visible; }
	header.menufade .logo-area,
	header.menufade .links-area,
	header.menufade .expand-area {
		animation: menucollapsefade 2s ease-in-out; }

body.left-side-menu-expand header {
	width: 240px;
	overflow: hidden; }
	body.left-side-menu-expand header .logo-area a {
		width: 100%;
		text-align: left;
		padding-left: 12px; }
		body.left-side-menu-expand header .logo-area a .avatar {
			width: 40px;
			display: inline-block; }
		body.left-side-menu-expand header .logo-area a span {
			font-weight: 600;
			opacity: 1;
			visibility: visible;
			position: relative;
			left: -5px;
			top: 1px;
			font-size: 15px;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			border-radius: 0; }
	body.left-side-menu-expand header .links-area ul li a {
		display: block;
		width: 100%;
		text-align: left;
		padding-left: 12px; }
		body.left-side-menu-expand header .links-area ul li a span {
			opacity: 1;
			visibility: visible;
			position: relative;
			left: -5px;
			top: -4px;
			font-size: 14px;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			border-radius: 0; }
	body.left-side-menu-expand header .expand-area {
		text-align: right; }
		body.left-side-menu-expand header .expand-area .expand-collapse {
			display: block; }
			body.left-side-menu-expand header .expand-area .expand-collapse i:before {
				content: "\f10d"; }
			body.left-side-menu-expand header .expand-area .expand-collapse span {
				visibility: hidden;
				opacity: 0; }

body.mobile-device header .links-area ul li a span {
	visibility: hidden; }

body.mobile-device.left-side-menu-expand header .links-area ul li a span {
	visibility: visible; }

.mobile-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px; }

/* [2. Home Page] ====================================== */
#home {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background: url("../images/main_bg.jpg");
	background-repeat: no-repeat;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s; }
	#home:after {
		background: rgba(0, 0, 0, 0.35) !important;
		position: absolute;
		content: " ";
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%; }
	#home .center {
		display: table;
		table-layout: fixed;
		height: 100%;
		width: 100%;
		padding-left: 12%;
		position: relative;
		z-index: 2; }
		#home .center .vertical-middle {
			display: table-cell;
			vertical-align: middle;
			opacity: 0; }
			#home .center .vertical-middle.active {
				opacity: 1; }
			#home .center .vertical-middle .title {
				font-size: 64px;
				font-weight: 600; }
			#home .center .vertical-middle .subtitle {
				font-size: 24px; }

/* [3. About Page] ===================================== */
#about .main-container .button-groups {
	margin-top: 50px;
	text-align: center; }
	#about .main-container .button-groups ul {
		padding: 0;
		margin: 0;
		list-style: none; }
		#about .main-container .button-groups ul li {
			display: inline-block;
			margin: 0 5px; }
			#about .main-container .button-groups ul li span {
				padding: 0 24px;
				position: relative;
				top: -4px; }
				#about .main-container .button-groups ul li span .la {
					position: relative;
					top: 4px; }
			#about .main-container .button-groups ul li a {
				font-weight: bold;
				text-decoration: none;
				height: 45px;
				min-width: 45px;
				line-height: 52px;
				text-align: center;
				display: inline-block;
				-webkit-border-radius: 50px;
				-moz-border-radius: 50px;
				-ms-border-radius: 50px;
				border-radius: 50px;
				-moz-transition: 0.5s;
				-o-transition: 0.5s;
				-webkit-transition: 0.5s;
				transition: 0.5s; }
				#about .main-container .button-groups ul li a:hover {
					border-color: transparent; }
				#about .main-container .button-groups ul li a .la {
					font-size: 26px; }

#about .main-container .content-group .service-container .card {
	border: none;
	margin-top: 25px; }
	#about .main-container .content-group .service-container .card .card-body {
		padding: 0; }
		#about .main-container .content-group .service-container .card .card-body .icon-area {
			margin-bottom: 10px; }
			#about .main-container .content-group .service-container .card .card-body .icon-area .la {
				font-size: 40px; }
		#about .main-container .content-group .service-container .card .card-body .name {
			font-weight: 600; }
		#about .main-container .content-group .service-container .card .card-body .description {
			text-align: justify;
			font-size: 13px; }

#about .main-container .content-group .pricing-container .card {
	margin-top: 25px;
	border: none; }
	#about .main-container .content-group .pricing-container .card .card-header {
		padding: 0;
		text-align: center;
		background-color: transparent;
		border: none; }
		#about .main-container .content-group .pricing-container .card .card-header .icon-area .la {
			font-size: 48px; }
		#about .main-container .content-group .pricing-container .card .card-header .title {
			border: none;
			background-color: transparent;
			font-weight: 600;
			font-size: 16px;
			padding: 7px 0 0 0; }
		#about .main-container .content-group .pricing-container .card .card-header .amount .currency {
			font-size: 18px;
			position: relative;
			font-weight: 500;
			top: -15px; }
		#about .main-container .content-group .pricing-container .card .card-header .amount .number {
			font-size: 36px;
			font-weight: bold;
			margin: 0 3px; }
		#about .main-container .content-group .pricing-container .card .card-header .amount .timing {
			font-size: 15px;
			position: relative;
			font-weight: 500;
			bottom: 3px; }
	#about .main-container .content-group .pricing-container .card .card-body ul {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center; }
		#about .main-container .content-group .pricing-container .card .card-body ul li {
			line-height: 28px;
			font-size: 15px; }
			#about .main-container .content-group .pricing-container .card .card-body ul li.disable {
				text-decoration: line-through; }
	#about .main-container .content-group .pricing-container .card .card-footer {
		background-color: transparent;
		border: none;
		text-align: center; }
		#about .main-container .content-group .pricing-container .card .card-footer a {
			font-weight: bold;
			text-decoration: none;
			padding: 8px;
			min-width: 200px;
			text-align: center;
			display: inline-block;
			-webkit-border-radius: 50px;
			-moz-border-radius: 50px;
			-ms-border-radius: 50px;
			border-radius: 50px;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
			#about .main-container .content-group .pricing-container .card .card-footer a:hover {
				border-color: transparent; }

#about .main-container .content-group .fun-facts-container .card {
	border: none;
	margin-top: 25px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	border-radius: 0; }
	#about .main-container .content-group .fun-facts-container .card .card-body .icon-area {
		margin-bottom: 5px; }
		#about .main-container .content-group .fun-facts-container .card .card-body .icon-area .la {
			font-size: 42px; }
	#about .main-container .content-group .fun-facts-container .card .card-body .text {
		font-size: 14px; }
		#about .main-container .content-group .fun-facts-container .card .card-body .text b {
			display: block;
			font-size: 26px;
			margin-right: 5px; }

#about .main-container .content-group .clients-container {
	margin-top: 25px;
	margin-bottom: -25px; }
	#about .main-container .content-group .clients-container .col {
		text-align: center; }
		#about .main-container .content-group .clients-container .col a {
			font-size: 92px;
			opacity: 0.45;
			text-decoration: none;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
			#about .main-container .content-group .clients-container .col a img {
				height: 96px; }
			#about .main-container .content-group .clients-container .col a:hover {
				opacity: 1; }

#about .main-container .content-group .testimonials-container {
	margin-top: 25px; }
	#about .main-container .content-group .testimonials-container .card {
		border: none; }
		#about .main-container .content-group .testimonials-container .card .card-header {
			background: transparent;
			text-align: center;
			border: none; }
			#about .main-container .content-group .testimonials-container .card .card-header img {
				width: 82px;
				margin: 0 auto;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-ms-border-radius: 50%;
				border-radius: 50%; }
		#about .main-container .content-group .testimonials-container .card .card-body p {
			font-size: 15px;
			text-align: center;
			margin-bottom: 0; }
		#about .main-container .content-group .testimonials-container .card .card-footer {
			padding: 0;
			text-align: center;
			border: none;
			background: transparent; }
			#about .main-container .content-group .testimonials-container .card .card-footer .name {
				font-weight: bold;
				font-size: 18px; }
			#about .main-container .content-group .testimonials-container .card .card-footer .title {
				border: none;
				background: transparent;
				font-size: 14px;
				padding: 0; }
	#about .main-container .content-group .testimonials-container .owl-dots {
		text-align: center;
		margin-top: 20px; }
		#about .main-container .content-group .testimonials-container .owl-dots .owl-dot {
			width: 12px;
			height: 12px;
			margin: 0 3px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			-ms-border-radius: 50%;
			border-radius: 50%; }

/* [4. Resume Page] ==================================== */
#resume .main-container .content-group .education-container .card,
#resume .main-container .content-group .experience-container .card {
	border: none;
	margin-top: 25px; }

#resume .main-container .content-group .education-container .card-header,
#resume .main-container .content-group .education-container .card-footer,
#resume .main-container .content-group .experience-container .card-header,
#resume .main-container .content-group .experience-container .card-footer {
	background-color: transparent;
	border: none; }

#resume .main-container .content-group .education-container .card-header,
#resume .main-container .content-group .experience-container .card-header {
	font-weight: 600;
	font-size: 16px;
	padding: 0; }

#resume .main-container .content-group .education-container .card-body,
#resume .main-container .content-group .experience-container .card-body {
	font-size: 12px;
	padding: 0 0 8px 0; }

#resume .main-container .content-group .education-container .card-footer,
#resume .main-container .content-group .experience-container .card-footer {
	text-align: justify;
	font-size: 14px;
	padding: 0; }

#resume .main-container .content-group .coding-skills-container ul,
#resume .main-container .content-group .personal-skills-container ul {
	margin: 0;
	padding: 0;
	list-style: none; }
	#resume .main-container .content-group .coding-skills-container ul li,
	#resume .main-container .content-group .personal-skills-container ul li {
		margin-top: 16px; }
		#resume .main-container .content-group .coding-skills-container ul li .label,
		#resume .main-container .content-group .personal-skills-container ul li .label {
			font-size: 14px;
			font-weight: 600; }
		#resume .main-container .content-group .coding-skills-container ul li .progress,
		#resume .main-container .content-group .personal-skills-container ul li .progress {
			height: 12px;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			border-radius: 0; }

/* [5. Portfolio Page] ================================= */
/*
#portfolio .main-container .grid-items {
	margin-top: 10px; }
	#portfolio .main-container .grid-items .card {
		border: none;
		margin-top: 30px; }
		#portfolio .main-container .grid-items .card .card-body,
		#portfolio .main-container .grid-items .card .card-footer {
			padding: 0; }
		#portfolio .main-container .grid-items .card .card-body .image-area {
			position: relative;
			overflow: hidden; }
			#portfolio .main-container .grid-items .card .card-body .image-area img {
				max-width: 100%;
				-moz-transition: 0.5s;
				-o-transition: 0.5s;
				-webkit-transition: 0.5s;
				transition: 0.5s; }
			#portfolio .main-container .grid-items .card .card-body .image-area span {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				-moz-transition: 0.5s;
				-o-transition: 0.5s;
				-webkit-transition: 0.5s;
				transition: 0.5s; }
				#portfolio .main-container .grid-items .card .card-body .image-area span .la {
					position: absolute;
					top: calc(50% - 30px);
					left: calc(50% - 30px);
					font-size: 60px; }
		#portfolio .main-container .grid-items .card .card-footer {
			text-align: center;
			padding: 10px 0;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			border-radius: 0; }
			#portfolio .main-container .grid-items .card .card-footer a {
				font-weight: bold;
				text-decoration: none; }
			#portfolio .main-container .grid-items .card .card-footer .category {
				font-size: 12px; }
		#portfolio .main-container .grid-items .card:hover .card-body .image-area span {
			opacity: 0.50; }
		#portfolio .main-container .grid-items .card:hover .card-body .image-area img {
			-moz-transform: scale(1.08);
			-ms-transform: scale(1.08);
			-o-transform: scale(1.08);
			-webkit-transform: scale(1.08);
			transform: scale(1.08); }
*/

#portfolio .filter
{
	text-align: right;
}
#portfolio .filter .f_btn
{
	display: inline-block;
	margin-left: 15px;
}
#portfolio .filter .f_btn label
{
	font-weight: bold;
	cursor: pointer;
}
#portfolio .filter .f_btn label input
{
	display: none;
}

#portfolio .main-container .card {
	margin-top: 30px; }
	#portfolio .main-container .card .card-body,
	#portfolio .main-container .card .card-footer {
		padding: 0; }
	#portfolio .main-container .card .card-body .image-area {
		position: relative;
		-webkit-border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px;
		-ms-border-radius: 5px 5px 0px 0px;
		border-radius: 5px 5px 0px 0px;
		overflow: hidden; }
		#portfolio .main-container .card .card-body .image-area img {
			max-width: 100%;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
		#portfolio .main-container .card .card-body .image-area span {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
			#portfolio .main-container .card .card-body .image-area span .la {
				position: absolute;
				top: calc(50% - 30px);
				left: calc(50% - 30px);
				font-size: 60px; }
		#portfolio .main-container .card .card-body .image-area .date {
			position: absolute;
			right: 15px;
			bottom: 15px;
			width: 50px;
			height: 50px;
			font-size: 12px;
			text-align: center;
			background-color: #eee;
			border-radius: 5px;
			padding-top: 2px; }
			#portfolio .main-container .card .card-body .image-area .date b,
			#portfolio .main-container .card .card-body .image-area .date strong {
				display: block;
				font-size: 21px;
				margin-bottom: -5px; }
	#portfolio .main-container .card .card-footer {
		text-align: center;
		padding: 10px 0;
		-webkit-border-radius: 0px 0px 5px 5px;
		-moz-border-radius: 0px 0px 5px 5px;
		-ms-border-radius: 0px 0px 5px 5px;
		border-radius: 0px 0px 5px 5px;
		}
		#portfolio .main-container .card .card-footer a {
			font-weight: bold;
			text-decoration: none; }
		#portfolio .main-container .card .card-footer .category {
			font-size: 12px; }
	#portfolio .main-container .card:hover .card-body .image-area span {
		opacity: 0.50; }
	#portfolio .main-container .card:hover .card-body .image-area img {
		-moz-transform: scale(1.08);
		-ms-transform: scale(1.08);
		-o-transform: scale(1.08);
		-webkit-transform: scale(1.08);
		transform: scale(1.08); }

/* [6. Blog Page] ====================================== */
#blog .main-container .card {
	border: none;
	margin-top: 30px; }
	#blog .main-container .card .card-body,
	#blog .main-container .card .card-footer {
		padding: 0; }
	#blog .main-container .card .card-body .image-area {
		-webkit-border-radius: 5px 5px 0px 0px;
		-moz-border-radius: 5px 5px 0px 0px;
		-ms-border-radius: 5px 5px 0px 0px;
		border-radius: 5px 5px 0px 0px;
		position: relative;
		overflow: hidden; }
		#blog .main-container .card .card-body .image-area img {
			max-width: 100%;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
		#blog .main-container .card .card-body .image-area span {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
			#blog .main-container .card .card-body .image-area span .la {
				position: absolute;
				top: calc(50% - 30px);
				left: calc(50% - 30px);
				font-size: 60px; }
		#blog .main-container .card .card-body .image-area .date {
			position: absolute;
			right: 15px;
			bottom: 15px;
			width: 50px;
			height: 50px;
			font-size: 12px;
			text-align: center;
			padding-top: 2px; }
			#blog .main-container .card .card-body .image-area .date b,
			#blog .main-container .card .card-body .image-area .date strong {
				display: block;
				font-size: 21px;
				margin-bottom: -5px; }
	#blog .main-container .card .card-footer {
		text-align: center;
		padding: 10px 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-webkit-border-radius: 0px 0px 5px 5px;
		-moz-border-radius: 0px 0px 5px 5px;
		-ms-border-radius: 0px 0px 5px 5px;
		border-radius: 0px 0px 5px 5px;
		}
		#blog .main-container .card .card-footer a {
			font-weight: bold;
			text-decoration: none; }
		#blog .main-container .card .card-footer .category {
			font-size: 12px; }
	#blog .main-container .card:hover .card-body .image-area span {
		opacity: 0.50; }
	#blog .main-container .card:hover .card-body .image-area img {
		-moz-transform: scale(1.08);
		-ms-transform: scale(1.08);
		-o-transform: scale(1.08);
		-webkit-transform: scale(1.08);
		transform: scale(1.08); }

/* [7. Contact Page] =================================== */
#contacts .map {
	margin-top: 50px !important;
	margin-bottom: -7px; }
	#contacts .map iframe {
		width: 100%;
		border: none; }

#contacts .main-container .content-group .get-in-touch-container {
	margin-top: 10px; }
	#contacts .main-container .content-group .get-in-touch-container ul {
		margin: 0;
		padding: 0;
		list-style: none; }
		#contacts .main-container .content-group .get-in-touch-container ul li {
			line-height: 36px; }
			#contacts .main-container .content-group .get-in-touch-container ul li i {
				font-size: 28px;
				position: relative;
				top: 5px;
				margin-right: 6px; }
			#contacts .main-container .content-group .get-in-touch-container ul li span {
				font-size: 14px; }
			#contacts .main-container .content-group .get-in-touch-container ul li a {
				font-weight: 400; }

#contacts .main-container .content-group .contact-form-container {
	margin-top: 20px; }
	#contacts .main-container .content-group .contact-form-container .form-group {
		position: relative; }
		#contacts .main-container .content-group .contact-form-container .form-group i {
			position: absolute;
			top: 9px;
			right: 10px;
			font-size: 19px; }
		#contacts .main-container .content-group .contact-form-container .form-group .form-control {
			font-size: 14px;
			padding-right: 35px;
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			-ms-border-radius: 0;
			border-radius: 0; }
			#contacts .main-container .content-group .contact-form-container .form-group .form-control:focus {
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				-ms-box-shadow: none;
				box-shadow: none; }
		#contacts .main-container .content-group .contact-form-container .form-group .no-resize {
			resize: none; }
	#contacts .main-container .content-group .contact-form-container .button-area {
		text-align: right; }
		#contacts .main-container .content-group .contact-form-container .button-area .btn-submit {
			font-weight: bold;
			text-decoration: none;
			height: 45px;
			min-width: 45px;
			line-height: 43px;
			text-align: center;
			display: inline-block;
			padding: 0 25px;
			cursor: pointer;
			-webkit-border-radius: 50px;
			-moz-border-radius: 50px;
			-ms-border-radius: 50px;
			border-radius: 50px;
			-moz-transition: 0.5s;
			-o-transition: 0.5s;
			-webkit-transition: 0.5s;
			transition: 0.5s; }
			#contacts .main-container .content-group .contact-form-container .button-area .btn-submit i {
				font-size: 24px;
				margin-left: 6px;
				position: relative;
				top: 4px; }

/* [8. Medias] ========================================= */
@media (min-width: 1024px) and (max-width: 1600px) {
	#home {
		background-position: 75% 10% !important; } }

@media (max-width: 1023px) {
	.mfp-wrap.popup-box-inline .popup-box .content-area .title {
		font-size: 18px; }
	.mfp-wrap.popup-box-inline .popup-box .content-area .category {
		font-size: 15px; }
	.mfp-wrap.popup-box-inline .popup-box .content-area .content * {
		font-size: 15px; }
	header {
		top: 0;
		left: 0;
		height: 50px;
		width: 100%;
		border: none !important; }
		header.open .btn-menu-toggle .line {
			background: none; }
			header.open .btn-menu-toggle .line:before {
				top: 0;
				bottom: auto;
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg); }
			header.open .btn-menu-toggle .line:after {
				top: auto;
				bottom: 0;
				-moz-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg); }
		header.open .links-area {
			opacity: 1;
			visibility: visible; }
			header.open .links-area ul li a span {
				display: none; }
		header .logo-area {
			padding: 7px 0; }
			header .logo-area:after {
				display: none; }
			header .logo-area .maximize {
				font-weight: 600;
				opacity: 1;
				visibility: visible;
				position: absolute;
				left: 45px;
				top: 8px;
				font-size: 15px; }
			header .logo-area a {
				width: calc(100% - 100px);
				display: block;
				text-align: left;
				padding-left: 8px;
				text-decoration: none; }
		header .expand-area {
			display: none; }
		header .links-area {
			position: absolute;
			left: 0;
			top: 50px;
			margin-top: 0;
			width: 100%;
			opacity: 0;
			visibility: hidden;
			text-align: center;
			-moz-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			-webkit-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s; }
			header .links-area ul li {
				display: inline-block; }
				header .links-area ul li a {
					display: inline-block;
					width: 48px;
					height: 48px;
					padding: 0;
					text-align: center;
					border-left: none;
					padding-left: 3px; }
					header .links-area ul li a .la {
						margin-top: 12px; }
					header .links-area ul li a span {
						top: 11px; }
		header .btn-menu-toggle {
			position: absolute;
			top: 0;
			right: 0;
			width: 50px;
			height: 50px;
			cursor: pointer; }
			header .btn-menu-toggle .line {
				margin: -1px 0 0 -10px;
				position: absolute;
				left: 50%;
				top: 50%;
				width: 22px;
				height: 2px; }
				header .btn-menu-toggle .line:before, header .btn-menu-toggle .line:after {
					content: '';
					position: absolute;
					left: 0;
					top: -7px;
					width: 100%;
					height: 2px;
					-moz-transition: all 0.3s ease 0s;
					-o-transition: all 0.3s ease 0s;
					-webkit-transition: all 0.3s ease 0s;
					transition: all 0.3s ease 0s; }
				header .btn-menu-toggle .line:after {
					top: auto;
					bottom: -7px; }
	.pages {
		left: 0;
		width: 100%; }
		.pages .sub-pages {
			margin: 50px 0 0 0;
			height: calc(100% - 50px);
			width: 100%; }
			.pages .sub-pages .section {
				height: 100%;
				width: 100%; }
				.pages .sub-pages .section .main-container {
					padding: 10px 16px 16px 16px; }
					.pages .sub-pages .section .main-container .content-group {
						margin-top: 30px !important; }
					.pages .sub-pages .section .main-container .main-title {
						margin-top: 15px; }
	#home {
		background-position: 75% 10% !important; }
		#home .center {
			text-align: center;
			padding: 0; }
			#home .center .vertical-middle {
				vertical-align: bottom;
				padding-bottom: 20px; }
				#home .center .vertical-middle .title {
					line-height: 64px;
					margin-bottom: 12px; }
	#about .main-container .clients-container {
		margin-top: 10px !important;
		margin-bottom: -10px; }
		#about .main-container .clients-container .col a {
			opacity: 1 !important; }
	#about .main-container .service-container .card {
		margin-top: 15px; }
		#about .main-container .service-container .card .card-body .name {
			font-size: 18px !important; }
		#about .main-container .service-container .card .card-body .description {
			font-size: 15px !important; }
		#about .main-container .service-container .card .card-body .icon-area .la {
			font-size: 52px !important; }
	#about .main-container .pricing-container .card .card-header .icon-area .la {
		font-size: 52px !important; }
	#about .main-container .fun-facts-container .card {
		margin-top: 15px; }
		#about .main-container .fun-facts-container .card .card-body .icon-area .la {
			font-size: 52px !important; }
		#about .main-container .fun-facts-container .card .card-body .text {
			font-size: 15px !important; }
	#about .main-container .testimonials-container .card-header {
		padding: 0; }
	#about .main-container .testimonials-container .card-footer .title {
		font-size: 15px !important; }
	#contacts .main-container .content-group .get-in-touch-container ul li span {
		font-size: 15px; }
	#contacts .map {
		margin-top: 30px !important; }
	#blog .main-container .card {
		margin-top: 15px; }
		#blog .main-container .card .card-body .image-area .date {
			font-size: 15px;
			width: 55px;
			height: 55px; }
		#blog .main-container .card .card-footer {
			padding: 10px 12px !important; }
			#blog .main-container .card .card-footer .name {
				font-size: 18px;
				white-space: nowrap;
				-ms-text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				overflow: hidden; }
			#blog .main-container .card .card-footer .category {
				font-size: 15px;
				white-space: nowrap;
				-ms-text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				overflow: hidden; }
	#blog .main-container .clearfix {
		padding: 0 5px; }
		#blog .main-container .clearfix .col {
			padding-right: 8px;
			padding-left: 8px; }
	#portfolio .main-container {
		padding-bottom: 0; }
		#portfolio .main-container .col {
			padding-right: 8px;
			padding-left: 8px; }
		#portfolio .main-container .filter {
			margin-bottom: 5px; }
		#portfolio .main-container .grid-items {
			margin-left: -8px;
			margin-right: -8px; }
			#portfolio .main-container .grid-items .card {
				margin-bottom: 15px;
				margin-top: 0; }
				#portfolio .main-container .grid-items .card .card-footer .name {
					font-size: 18px; }
				#portfolio .main-container .grid-items .card .card-footer .category {
					font-size: 15px; }
	#resume .content-group .card {
		margin-top: 15px !important; }
		#resume .content-group .card .card-header {
			font-size: 18px !important; }
		#resume .content-group .card .card-body,
		#resume .content-group .card .card-footer {
			font-size: 15px !important; }
	#resume .content-group .personal-skills-container .label,
	#resume .content-group .coding-skills-container .label {
		font-size: 15px !important; } }

@media (min-width: 972px) and (max-width: 1023px) {
	#blog .main-container .col {
		padding-left: 8px;
		padding-right: 8px; } }

@media (min-width: 481px) and (max-width: 640px) {
	.mfp-wrap.popup-box-inline .popup-box .content-area .title {
		font-size: 18px; }
	.mfp-wrap.popup-box-inline .popup-box .content-area .category {
		font-size: 15px; }
	.mfp-wrap.popup-box-inline .popup-box .content-area .content * {
		font-size: 15px; }
	.pages .sub-pages .section .main-container {
		padding: 10px 15px 15px 15px; }
		.pages .sub-pages .section .main-container .main-title {
			font-size: 64px !important;
			line-height: 64px; }
		.pages .sub-pages .section .main-container .main-desc {
			margin-top: -20px; }
		.pages .sub-pages .section .main-container .content-group {
			margin-top: 30px !important; }
	#contacts .main-container .main-title {
		font-size: 54px; }
	#contacts .main-container .main-desc {
		margin-top: -28px; }
	#contacts .main-container .content-group .get-in-touch-container ul li span {
		font-size: 15px; }
	#contacts .map {
		margin-top: 15px !important; }
	#blog .main-container .card {
		margin-top: 15px; }
		#blog .main-container .card .card-body .image-area .date {
			font-size: 15px;
			width: 55px;
			height: 55px; }
		#blog .main-container .card .card-footer {
			padding: 10px 12px; }
			#blog .main-container .card .card-footer .name {
				font-size: 18px;
				white-space: nowrap;
				-ms-text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				overflow: hidden; }
			#blog .main-container .card .card-footer .category {
				font-size: 15px;
				white-space: nowrap;
				-ms-text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				overflow: hidden; }
	#blog .main-container .clearfix {
		padding: 0 5px; }
		#blog .main-container .clearfix .col {
			padding-right: 8px;
			padding-left: 8px; }
	#portfolio .main-container {
		padding-bottom: 0; }
		#portfolio .main-container .main-title {
			font-size: 54px; }
		#portfolio .main-container .main-desc {
			margin-top: -28px; }
		#portfolio .main-container .col {
			padding-right: 8px;
			padding-left: 8px; }
		#portfolio .main-container .grid-items {
			margin-left: -8px;
			margin-right: -8px; }
			#portfolio .main-container .grid-items .card {
				margin-bottom: 15px; }
				#portfolio .main-container .grid-items .card .card-footer .name {
					font-size: 18px; }
				#portfolio .main-container .grid-items .card .card-footer .category {
					font-size: 15px; }
	#about .main-container .button-groups {
		margin-top: 15px; }
		#about .main-container .button-groups ul li {
			margin: 0; }
			#about .main-container .button-groups ul li:first-child {
				display: block;
				margin-bottom: 0px; }
	#about .main-container .content-group .fun-facts-container .card {
		margin-top: 15px; }
		#about .main-container .content-group .fun-facts-container .card .card-body .icon-area .la {
			font-size: 52px; }
		#about .main-container .content-group .fun-facts-container .card .card-body .text {
			font-size: 15px; }
	#about .main-container .content-group .clients-container {
		margin-top: 0; }
		#about .main-container .content-group .clients-container .col a {
			margin-top: 0;
			display: inline-block; }
	#about .main-container .content-group .testimonials-container .card-header {
		padding: 0; }
	#about .main-container .content-group .testimonials-container .card-footer .title {
		font-size: 15px !important; }
	#about .main-container .content-group .service-container .card {
		margin-top: 15px; }
		#about .main-container .content-group .service-container .card .card-body .name {
			font-size: 18px; }
		#about .main-container .content-group .service-container .card .card-body .description {
			font-size: 15px; }
		#about .main-container .content-group .service-container .card .card-body .icon-area .la {
			font-size: 52px; }
	#about .main-container .content-group .pricing-container .card .card-header .icon-area .la {
		font-size: 52px; }
	#resume .content-group .card {
		margin-top: 15px !important; }
		#resume .content-group .card .card-header {
			font-size: 18px !important; }
		#resume .content-group .card .card-body,
		#resume .content-group .card .card-footer {
			font-size: 15px !important; }
	#resume .content-group .personal-skills-container .label,
	#resume .content-group .coding-skills-container .label {
		font-size: 15px !important; } }

@media (max-width: 480px) {
	.mfp-wrap.popup-box-inline .popup-box .content-area .title {
		font-size: 18px; }
	.mfp-wrap.popup-box-inline .popup-box .content-area .category {
		font-size: 15px; }
	.mfp-wrap.popup-box-inline .popup-box .content-area .content * {
		font-size: 15px; }
	.pages .sub-pages .section .main-container {
		padding: 10px 15px 15px 15px; }
		.pages .sub-pages .section .main-container .main-title {
			font-size: 64px;
			line-height: 64px; }
		.pages .sub-pages .section .main-container .main-desc {
			margin-top: -20px; }
		.pages .sub-pages .section .main-container .content-group {
			margin-top: 30px !important; }
	#contacts .main-container .main-title {
		font-size: 54px; }
	#contacts .main-container .main-desc {
		margin-top: -28px; }
	#contacts .main-container .content-group .get-in-touch-container ul li span {
		font-size: 15px; }
	#contacts .map {
		margin-top: 15px !important; }
	#blog .main-container .card {
		margin-top: 15px; }
		#blog .main-container .card .card-body .image-area .date {
			font-size: 15px;
			width: 55px;
			height: 55px; }
		#blog .main-container .card .card-footer .name {
			font-size: 18px; }
		#blog .main-container .card .card-footer .category {
			font-size: 15px; }
	#blog .main-container .clearfix {
		padding: 0 5px; }
		#blog .main-container .clearfix .col {
			padding-right: 8px;
			padding-left: 8px; }
	#portfolio .main-container {
		padding-bottom: 0; }
		#portfolio .main-container .main-title {
			font-size: 54px; }
		#portfolio .main-container .main-desc {
			margin-top: -28px; }
		#portfolio .main-container .filter {
			margin-bottom: -10px; }
		#portfolio .main-container .grid-items .card {
			margin-top: 0; }
			#portfolio .main-container .grid-items .card .card-footer .name {
				font-size: 18px; }
			#portfolio .main-container .grid-items .card .card-footer .category {
				font-size: 15px; }
	#about .main-container .button-groups {
		margin-top: 15px; }
		#about .main-container .button-groups ul li {
			margin: 0; }
			#about .main-container .button-groups ul li:first-child {
				display: block;
				margin-bottom: 15px; }
	#about .main-container .content-group .fun-facts-container .card {
		margin-top: 15px; }
		#about .main-container .content-group .fun-facts-container .card .card-body .icon-area .la {
			font-size: 52px; }
		#about .main-container .content-group .fun-facts-container .card .card-body .text {
			font-size: 15px; }
	#about .main-container .content-group .clients-container {
		margin-top: 0; }
		#about .main-container .content-group .clients-container .col a {
			margin-top: 0;
			display: inline-block; }
	#about .main-container .content-group .testimonials-container .card-header {
		padding: 0; }
	#about .main-container .content-group .testimonials-container .card-footer .title {
		font-size: 15px !important; }
	#about .main-container .content-group .service-container .card {
		margin-top: 15px; }
		#about .main-container .content-group .service-container .card .card-body .name {
			font-size: 18px; }
		#about .main-container .content-group .service-container .card .card-body .description {
			font-size: 15px; }
		#about .main-container .content-group .service-container .card .card-body .icon-area .la {
			font-size: 52px; }
	#about .main-container .content-group .pricing-container .card .card-header .icon-area .la {
		font-size: 52px; }
	#resume .content-group .card {
		margin-top: 15px !important; }
		#resume .content-group .card .card-header {
			font-size: 18px !important; }
		#resume .content-group .card .card-body,
		#resume .content-group .card .card-footer {
			font-size: 15px !important; }
	#resume .content-group .personal-skills-container .label,
	#resume .content-group .coding-skills-container .label {
		font-size: 15px !important; } }

.blur-background
{
	background: rgba(64, 128, 128, 0.5) !important;
	backdrop-filter: blur(48px);
	background-color: none !important;
	border-radius: 8px;
}