/*------------------------------------------------------------------
Theme Name:	PREMIUM LAYERS VCARD
Version:	1.0
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

	1. Global Styles
	2. Header
	3. Theme Extras
	4. Main Content
	5. Profile
	6. Portfolio
	7. Resume
		7.1. Skills Info 
		7.2. Services 
	8. Blog
	9. Contact
		9.1. Map Styles
		9.2. Contact Info

	10. Footer
	11. Blog - Single Post

-------------------------------------------------------------------*/

/*------------------------------------------------------------- 
		          1. GLOBAL STYLES
--------------------------------------------------------------- */


body, html {
	height: 100%;
	width: 100%;
	
	
}

body {
	background: #d9dbdd;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
		background: #333;
    }
}
/* Dark Mode */

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

p {
	font-size: 17px;
	font-weight: 400;
	line-height: 29px;
	color: #828282;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

a:hover {
	color: #ffd42d;
}

.no-padding {
	padding: 0px !important;
}

.main-content {
	margin: 100px 0;
	overflow: hidden;
}

/*------------------------------------------------------------- 
	          2. HEADER / NAV - LEFT CONTENT
--------------------------------------------------------------- */

.l-content {
	background: #000;
	width: 27.7%;
	padding: 0px;
}

.profile-pic {
	background: url(../images/profile-bg.jpg) no-repeat;
	height: 266px;
	position: relative;
}

.pic-bg {
	background: url(../images/pic-bg.png) no-repeat;
	width: 140px;
	height: 140px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: table-cell;
	margin: auto;
	vertical-align: middle;
	padding: 10px;
}

.navigation {
	padding: 0px;
	margin: 0px;
}

.navigation li {
	list-style: none;
}

.navigation li {
	border-bottom: 1px solid #222b2e;
	position: relative;
	list-style: none;
	background: -moz-linear-gradient(top,  #2c383c 0%, #2a363a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c383c), color-stop(100%,#2a363a));
	background: -webkit-linear-gradient(top,  #2c383c 0%,#2a363a 100%);
	background: -o-linear-gradient(top,  #2c383c 0%,#2a363a 100%);
	background: -ms-linear-gradient(top,  #2c383c 0%,#2a363a 100%);
	background: linear-gradient(to bottom,  #2c383c 0%,#2a363a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c383c', endColorstr='#2a363a',GradientType=0 );
}

.navigation li:last-child {
	border-bottom: none;
}

.navigation li a {
	padding: 23.7px 25px;
	display: table;
	width: 100%;
	text-align: right;
	font-size: 17px;
	color: #d1d1d1;
	position: relative;
}

.navigation li a i {
	font-size: 20px;
	position: relative;
	top: 1px;
	margin-left: 15px;
	color: #d1d1d1;
}

.navigation li a:hover, .navigation li a:hover i, .flex-active a, .flex-active a i {
	color: #2c383c !important;
}

.navigation li:before {
	content: '';
	position: absolute;
	top: 0px;
	width: 0%;
	height: 100%;
	right: 0px;
	background: #ffd42d;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.navigation li:hover:before ,
.navigation li.flex-active:before {
	content: '';
	width: 100% !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/*------------------------------------------------------------- 
	                3. THEME EXTRAS
--------------------------------------------------------------- */

.sep1 {
	height: 3px;
	width: 70px;
	background: #ffd42d;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
}

.sep2 {
	height: 6px;
	width: 50px;
	background: #ffd42d;
	margin: 20px 0;
}

.page-head {
	border-bottom: 1px solid #ededed;
	padding-bottom: 18px;
}

.page-head h3 {
	margin: 0px;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 700;
	color: #2c383c;
}

.page-head p {
	font-size: 13px;
	color: #2c383c;
	padding-top: 4px;
	text-align: right;
}

.np-controls a i {
	color: #2c383c;
	font-size: 30px;
	margin-left: 4px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .np-controls a i {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.np-controls a:hover i {
	color: #ffd42d;
}

.np-main {
	display: table;
	float: right;
}

.np-main p {
	float: left;
}

.np-controls {
	float: right;
	position: relative;
	top: 5px;
	margin-left: 15px;
}

/*------------------------------------------------------------- 
                 4. MAIN CONTENT - RIGHT CONTENT
--------------------------------------------------------------- */

.r-content {
	padding: 0px;
	width: 72.3%;
}

/*-------------------------------------------- 
                 5. PROFILE
---------------------------------------------- */

.profile {
	padding: 20px 30px 15px;
	background: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .profile {
		background: #333;
    }
}
/* Dark Mode */

.profile h2 {
	font-size: 32px;
	font-weight: 300;
	margin: 0px;
	line-height: 36px;
	color: #606060;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .profile h2 {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.profile h2 span {
	font-weight: 700;
	color: #000;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .profile h2 span {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.personal-info {
	border-top: 1px solid #ececec;
	padding-top: 15px;
	margin-top: 15px;
}

.personal-info h4 {
	color: #2c383c;
	margin: 25px 0 0;
	font-size: 24px;
	font-weight: 300;
}

.personal-info ul {
	padding: 0px;
}

.personal-info li {
	float: left;
	list-style: none;
	margin-right: 20px;
	margin-bottom: 20px;
	height: 43px;
	border: 1px solid #ededed;
	overflow: hidden;
}

.personal-info li em {
	padding: 0 15px;
	line-height: 43px;
	font-size: 16px;
	color: #9b9b9b;
	font-weight: 400;
	font-style: normal;
}

.personal-info li span {
	padding: 11px 15px;
	line-height: 42px;
	font-size: 16px;
	color: #484848;
	font-weight: 400;
	background: #f6f6f6;
	border-left: 1px solid #ededed;
}

/*-------------------------------------------- 
                6. PORTFOLIO
---------------------------------------------- */

.works {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
 	.works {
		background: #333;
    }
}
/* Dark Mode */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .works h3 {
		color: #D2D0D1;
    }
}
/* Dark Mode */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .works p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.portfolio-wrap {
	padding: 0 5px;
}

#filter-list {
	display: block;
	width: 100%;
	margin: 30px 10px;
	padding: 0px;
}

#filter-list li {
	display: inline-block;
	width: auto;
	padding: 0px 15px;
	font-size: 14px;
	margin: 0px;
	line-height: 35px;
	cursor: pointer;
	color: #b1b1b1;
}

#filter-list li:hover {
	background: #ffd42d;
	color: #2c383c;
}

#filter-list li.active {
	background: #ffd42d;
	color: #2c383c;
}

#portfolio {
	padding: 0px;
	display: block;
	width: 100%;
	text-align: center;
}

#portfolio .item {
	display: none;
	opacity: 0;
	padding: 0px 10px;
	width: 33.3333%;
	vertical-align: top;
	margin-bottom: 12px;
	color: #fff;
	font-size: 30px;
	text-align: center;
	-moz-box-sizing: border-box;
}

#portfolio .item a {
	display: inline-block;
	max-width: 100%;
	text-decoration: none;
	background: #fff;
}

#portfolio .item img {
	max-width: 100%;
}

.folio-img {
	position: relative;
}

.overlay {
	background: rgba(255,212,45,0.9);
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.folio-img:hover .overlay {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.folio-img h4 {
	font-size: 14px;
	font-weight: bold;
	color: #2c383c;
	margin: 0px 0 -3px;
}

.folio-img p {
	font-size: 11px;
	font-style: italic;
	color: #2c383c;
}

.overlay-inner {
	height: 37px;
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	margin: auto;
}

/*-------------------------------------------- 
                  7. RESUME
---------------------------------------------- */

.resume {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

.imgapple {
	width:199px;
	height: 74px;
	background-image: url('../images/resume/AppleTeacher_black.png');
	background-repeat: no-repeat;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	.imgapple {
		width:199px;
		height: 74px;
		background-image: url('../images/resume/AppleTeacher_white.png');
		background-repeat: no-repeat;
	}
}
/* Dark Mode */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .resume {
		background: #333;
    }
}
/* Dark Mode */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .resume h3 {
		color: #D2D0D1;
    }
}
/* Dark Mode */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .resume p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.resume h4 {
	color: #2c383c;
	margin: 0px;
	font-size: 24px;
	font-weight: 300;
	margin-top: 20px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .resume h4 {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.resume-info ul {
	padding: 0px;
}

.resume-info ul {
	margin-top: -15px;
}

.resume-info ul li {
	border-bottom: 1px solid #ededed;
	padding: 15px 0 20px;
	margin: 0px;
	list-style: none;
}

.resume-info p {
	margin: 0px;
	color: #828282;
	font-size: 15px;
	line-height: 24px;
	margin-top: 5px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .resume-info p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.resume-info h5 {
	font-size: 16px;
	font-weight: bold;
	color: #2c383c;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .resume-info h5 {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.year {
	color: #2c383c;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .year {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.year i {
	color: #aaaaaa;
	margin-right: 5px;
}

/* 7.1. Skills Info */

.skills-info {
	padding-bottom: 20px;
	border-bottom: 1px solid #ededed;
}

.skills-info ul {
	padding: 0px;
}

.skills-info ul li {
	list-style: none;
	margin-bottom: 2px;
}

.skills-info ul li p {
	font-size: 13px;
	color: #9a9a9a;
	margin-bottom: 1px;
}

.skills-info ul li p span {
	float: right;
	color: #6a6a6a;
}

.skills-bg {
	height: 20px;
	display: table;
	width: 100%;
	border: 1px solid #ededed;
	position: relative;
}

.skills-bg span {
	background: #ffd42d;
	height: 20px;
	display: table;
	position: absolute;
	top: 0px;
	left: 0px;
}

.skill1, .skill2, .skill3, .skill4, .skill5 {
	width: 0px;
	-webkit-transition: all .7s ease-in-out;
	-moz-transition: all .7s ease-in-out;
	-o-transition: all .7s ease-in-out;
	transition: all .7s ease-in-out;
}

/* 7.2. Services */

.services-info {
	border-bottom: 1px solid #ededed;
	padding-bottom: 30px;
}

.services-info ul {
	padding: 0px;
	border: 0 solid #ededed;
	border-width: 0 0 1px 1px;
	display: table;
	width: 100%;
	margin-top: 30px;
}

.services-info ul li {
	width: 33.3333%;
	padding: 35px 15px 20px;
	float: left;
	list-style: none;
	border: 0 solid #ededed;
	border-width: 1px 1px 0 0;
	height: 165px;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li i {
	color: #c0c0c0;
	text-align: center;
	font-size: 36px;
	display: table;
	margin: 0 auto;
	padding-bottom: 25px;
	margin-bottom: 14px;
	background: url(../images/sep.png) no-repeat bottom center;
	position: relative;
	width: 43px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li h5 {
	color: #c4c4c4;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li:hover i {
	padding-bottom: 8px;
	margin-bottom: 0px;
	background: none;
	color: #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li:hover h5 {
	padding-bottom: 25px;
	color: #fff;
	margin-bottom: 14px;
	background: url(../images/sep-lite.png) no-repeat bottom center;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li:hover {
	background: #ffd42d;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/*-------------------------------------------- 
                  8. BLOG
---------------------------------------------- */

.blog {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .blog {
		background: #333;
    }
}
/* Dark Mode */

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .blog h3, .blog p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

article {
	padding-bottom: 22px;
	border-bottom: 1px solid #ededed;
	margin-bottom: 30px;
}

article h3 {
	font-size: 16px;
	color: #2c383c;
	margin: 0px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    article h3 {
		color: #D2D0D1;
    }
}
/* Dark Mode */

article h3 a {
	color: #2c383c;
}

.post-meta {
	color: #a1a1a1;
	font-size: 12px;
	padding: 10px 0;
}

.post-meta i {
	margin-right: 8px;
	color: #b6b6b6;
	font-size: 17px;
}

.post-meta a {
	color: #a1a1a1;
	margin-right: 15px;
}

.post-meta a:hover {
	color: #222;
}

article p {
	font-size: 15px;
	line-height: 24px;
	color: #828282;
	margin-bottom: 0px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    article p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.link-post {
	padding-bottom: 0px;
	border: none;
	background: #ffd42d;
	padding: 60px 20px;
	margin-bottom: 35px;
}

.link-post i {
	font-size: 44px;
	color: #2c383c;
	text-align: center;
	display: table;
	margin: 0 auto 15px;
}

.link-post a {
	font-size: 25px;
	color: #2c383c;
	font-family: Neuton;
	font-style: italic;
	text-align: center;
	display: block;
	font-weight: 200;
}

.link-post a:hover {
	color: #2c383c;
	text-decoration: underline;
}

.quote-post {
	background: #2d383c;
	padding: 40px 40px 50px;
	padding-bottom: 0px;
	border: none;
	margin-bottom: 60px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .quote-post {
		background: #333
		;
    }
}
/* Dark Mode */

.quote-post blockquote {
	border: none;
	padding: 0px;
	color: #ffd42d;
	font-size: 27px;
	font-family: Neuton;
	font-weight: 200;
	font-style: italic;
	line-height: 30px;
	text-align: center;
}

.quote-post i {
	color: #fff;
	display: block;
	text-align: center;
	font-size: 30px;
}

.author-name {
	color: #FFF;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	display: table;
	margin: 10px auto 35px;
}

.no-border {
	border-bottom: 0px;
}

.blog-wrap {
	padding-top: 30px;
}

/*-------------------------------------------- 
                9. CONTACT
---------------------------------------------- */

.contact h4 {
	color: #2c383c;
	margin: 0px;
	font-size: 24px;
	font-weight: 300;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .contact h4 {
		color: #D2D0D1;
    }
}
/* Dark Mode */


/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .contact h3, .contact p, .contact i {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.contact {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .contact {
		background: #333
		;
    }
}
/* Dark Mode */

/* 9.1. Map Styles */

.gmap {
	padding: 0px;
	/*height: 360px;
	margin: 25px auto; */
	margin: 43px auto;
}

.gmap div {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#map {
	display: block;
	width: 100%;
	/*height: 360px;*/
	margin: 0 auto;
}

#map.large {
	height: 500px;
}

#map img {
	max-width: none !important;
	height: auto;
}

/* 9.2. Contact Info */

.contact-info p {
	font-size: 15px;
	line-height: 24px;
	margin: 12px 0;
}

.contact-info {
	padding-bottom: 25px;
	border-bottom: 1px solid #ededed;
	margin-bottom: 30px;
	display: table;
	width: 100%;
}

.contact-info ul {
	padding: 0px;
}

.contact-info ul li {
	float: left;
	font-size: 14px;
	color: #828282;
	list-style: none;
	margin-right: 18px;
}

.contact-info ul li i {
	margin-right: 5px;
	color: #4c4d4f;
	font-size: 16px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .contact-info ul li, .contact-info ul li i {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.contact-form form {
	margin: 20px 0;
}

.contact-form input {
	height: 52px;
	border-radius: 4px;
	border: 1px solid #ededed;
	padding: 0 18px;
	font-size: 12px;
	width: 100%;
	margin-bottom: 10px;
}

.contact-form textarea {
	height: 176px;
	border-radius: 4px;
	border: 1px solid #ededed;
	padding: 15px 18px;
	font-size: 12px;
	width: 100%;
	margin-bottom: 18px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .contact-form textarea, .contact-form input {
		background: #333;
		color: #D2D0D1;
    }
}
/* Dark Mode */

.contact-form button {
	width: 120px;
	height: 43px;
	background: #ffd42d;
	border-radius: 4px;
	font-size: 13px;
	color: #4e503b;
	border: none;
	float: right;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
.contact-form button {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.contact-form button:hover {
	background: #222;
	color: #ffd42d;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
.contact-form button:hover {
		background: #ffd42d;
    }
}
/* Dark Mode */

.statusMessage,.successmessage,.errormessage {
	display: none;
	margin: auto;
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid #ddd;
	margin: 0 auto;
	box-shadow: 0 0 8px #aaa;
	-moz-box-shadow: 0 0 8px #aaa;
	-webkit-box-shadow: 0 0 8px #aaa;
	padding: 20px 20px 0;
}

.statusMessage p {
	margin: 0;
	color: #888;
}

.successmessage p {
	margin: 0;
	color: #888;
}

.success-ico {
	background: url(../images/success.png);
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 15px;
	position: relative;
	top: -6px;
}

.error-ico {
	background: url(../images/error.png);
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 15px;
	position: relative;
	top: -6px;
}

.errormessage p {
	margin: 0;
	color: #888;
}

/*-------------------------------------------- 
                  10. FOOTER
---------------------------------------------- */

footer {
	background: #f1f1f1;
	height: 70px;
	padding: 20px 30px;
	position: relative;
	z-index: 99;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    footer {
		background: #333;
    }
}
/* Dark Mode */

footer p {
	color: #000000;
	font-size: 14px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    footer p {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.social {
	padding: 0px;
	display: table;
	float: right;
}

.social li {
	float: left;
	list-style: none;
	margin-left: 15px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .social i {
		color: #D2D0D1;
    }
}
/* Dark Mode */

.social li a {
	font-size: 19px;
	color: #2b373b;
}

.social li a:hover {
	color: #ffd42d;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .social i:hover {
		color: #ffd42d;
    }
}
/* Dark Mode */

/*-------------------------------------------- 
               11. BLOG - SINGLE POST
---------------------------------------------- */

.blog-single p {
	margin-bottom: 17px;
}

.blog-single-img {
	margin-bottom: 25px;
}

.comment-avatar {
	width: 80px;
	height: 80px;
	float: left;
	border: 1px solid #dcdcdc;
	padding: 8px;
	border-radius: 6px;
}

.comments-wrap ul {
	padding: 0px;
}

.comments-wrap ul li {
	list-style: none;
	display: table;
	width: 100%;
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid #f2f2f2;
}

.comment-info {
	margin-left: 97px;
}

.comment-info h6 {
	color: #3c3c3c;
	font-weight: 400;
	font-size: 14px;
	margin: 0px;
}

.comment-info h6 span {
	color: #b8b8b8;
	font-weight: 400;
	font-size: 11px;
	padding-left: 5px;
}

.comment-info p {
	color: #868686;
	font-size: 13px;
	margin: 0px 0px 4px;
}

.reply {
	width: 42px;
	height: 22px;
	border-radius: 4px;
	color: #2b373b;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
	background: #ffd42d;
	display: table;
}

.reply:hover {
	color: #ffd42d;
	background: #222;
}

.sub-comment {
	width: 85% !important;
	float: right;
}

.sub-sub-comment {
	width: 70% !important;
	float: right;
}

.blog-single h4 {
	color: #2c383c;
	margin: 0px 0px 30px;
	font-size: 24px;
	font-weight: 300;
}

/*-------------------------------------------- 
                LOADING STYLES
---------------------------------------------- */

#mask {
	background-color: #FFF;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 10000000000;
	top: 0px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    #mask {
		background: #333;
    }
}
/* Dark Mode */

.loader {
	position: absolute;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	top: 50%;
	left: 50%;
}

.imgloader {
	width: 64px;
	height: 64px;
	background-image: url('../images/loading.gif');
	background-repeat: no-repeat;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	.imgloader {
		width: 64;
		height: 64px;
		background-image: url('../images/loading_dm.gif');
		background-repeat: no-repeat;
	}
}
/* Dark Mode */

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.container {
	max-width: 760px;
	width: 760px;
	margin: 0 auto;
}

footer p {
	color: #000;
	font-size: 13px;
}

}

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

.container {
	max-width: 280px;
	width: 280px;
	margin: 0 auto;
}

.l-content {
	background: #000;
	height: auto;
	width: 100%;
	padding: 0px;
	display: table;
}

.r-content {
	padding: 0px;
	width: 100%;
}

.navigation li {
	float: left;
	width: 20%;
}

.navigation li a {
	font-size: 0px;
}

.navigation li a i {
	font-size: 20px;
	margin-left: 0px;
	color: #d1d1d1;
}

.profile-pic {
	background-size: 100% auto;
}

.personal-info li em {
	font-size: 13px;
}

.personal-info li span {
	font-size: 13px;
}

#portfolio .item {
	width: 100%;
}

.np-main {
	width: 100%;
}

.services-info ul li {
	width: 100%;
}

article h3 {
	margin: 15px 0 0;
}

footer p {
	font-size: 12px;
	text-align: center;
}

.social {
	padding: 0px;
	display: table;
	float: none;
	margin: 0 auto;
}

.flexslider {
	min-height: auto;
}

footer {
	height: 100px;
}

.sub-comment {
	width: 95% !important;
}

.sub-sub-comment {
	width: 90% !important;
}

}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.container {
	max-width: 470px;
	width: 470px;
	margin: 0 auto;
}

.navigation li a i {
	text-align: center;
	display: table;
	margin: 0 auto;
}

.services-info ul li {
	width: 50%;
}

#portfolio .item {
	width: 49%;
}

}