/*
Theme Name: Watson
Text Domain: watson
Version: 1.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: cv, resume
Author: David
Author URI: https://www.mamu.com.tw
Theme URI: https://www.mamu.com.tw/watson/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.
*/

/*****************************************************************************
  ____                                  _____ _
 / ___|___  ___ _ __ ___   ___  ___    |_   _| |__   ___ _ __ ___   ___  ___
| |   / _ \/ __| '_ ` _ \ / _ \/ __|_____| | | '_ \ / _ \ '_ ` _ \ / _ \/ __|
| |__| (_) \__ \ | | | | | (_) \__ \_____| | | | | |  __/ | | | | |  __/\__ \
 \____\___/|___/_| |_| |_|\___/|___/     |_| |_| |_|\___|_| |_| |_|\___||___/
******************************************************************************/


/************ Dark Style Css **************************************
    Template Name: Watson - Resume/Vcard Template
    Author: cosmos-themes
    Envato Profile: https://themeforest.net/user/cosmos-themes
    version: 1.0
    Copyright: 2018
****************************************************************/


/*************************************
        Table of Content
        1. Body and Core Css
        2. Helper
        3. Layout
        4. Banner Section
        5. About Section
        6. Resume Section
        7. Portfolio Section
        8. Blog Section
        9. About Section
        10. Ajax Portfolio
        11. Blog Page Css
        12. Mobile Responsive Css
**************************************/


/*============ 1. Body and Core Css ============*/
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900");

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	text-decoration: none !important;
	list-style: none !important;
	outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

i,
em {
	font-style: normal;
}

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

body {
	font-size: 16px;
	font-family: "Microsoft JhengHei", "Roboto", sans-serif;
	line-height: 1.65;
	color: #e1e1e1;
	background-color: #6B6C6D;
}
h1,
h2,
h3,
h4,
h5,

h6 {
	font-family: "Microsoft JhengHei","Playfair Display", serif;
	color: #ffffff;
}

span {
	display: inline-block;
}

p {
	line-height: 1.65;
}

img {
	width: 100%;
	height: auto;
	/*max-height: 500px;*/
}

a,
a:hover,
a:focus {
	color: inherit;
}


/*********** Margin & Padding ***********/

.mt-0 {
	margin-top: 0 !important;
}
.mt-5 {
	margin-top: 5px !important;
}
.mt-10 {
	margin-top: 10px !important;
}
.mt-15 {
	margin-top: 15px !important;
}
.mt-20 {
	margin-top: 20px !important;
}
.mt-25 {
	margin-top: 25px !important;
}
.mt-30 {
	margin-top: 30px !important;
}
.mt-35 {
	margin-top: 35px !important;
}
.mt-40 {
	margin-top: 40px !important;
}
.mt-45 {
	margin-top: 45px !important;
}
.mt-50 {
	margin-top: 50px !important;
}
.mt-55 {
	margin-top: 55px !important;
}
.mt-60 {
	margin-top: 60px !important;
}
.mt-62 {
	margin-top: 62px !important;
}
.mt-65 {
	margin-top: 65px !important;
}
.mt-70 {
	margin-top: 70px !important;
}
.mt-75 {
	margin-top: 75px !important;
}
.mt-80 {
	margin-top: 80px !important;
}
.mt-85 {
	margin-top: 85px !important;
}
.mt-90 {
	margin-top: 90px !important;
}
.mt-95 {
	margin-top: 95px !important;
}
.mt-100 {
	margin-top: 100px !important;
}
/* Custom Margin Bottom */
.mb-0 {
	margin-bottom: 0 !important;
}
.mb-5 {
	margin-bottom: 5px !important;
}
.mb-10 {
	margin-bottom: 10px !important;
}
.mb-15 {
	margin-bottom: 15px !important;
}
.mb-20 {
	margin-bottom: 20px !important;
}
.mb-25 {
	margin-bottom: 25px !important;
}
.mb-30 {
	margin-bottom: 30px !important;
}
.mb-35 {
	margin-bottom: 35px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}
.mb-45 {
	margin-bottom: 45px !important;
}
.mb-50 {
	margin-bottom: 50px !important;
}
.mb-55 {
	margin-bottom: 55px !important;
}
.mb-60 {
	margin-bottom: 60px !important;
}
.mb-62 {
	margin-bottom: 62px !important;
}
.mb-65 {
	margin-bottom: 65px !important;
}
.mb-70 {
	margin-bottom: 70px !important;
}
.mb-75 {
	margin-bottom: 75px !important;
}
.mb-80 {
	margin-bottom: 80px !important;
}
.mb-85 {
	margin-bottom: 85px !important;
}
.mb-90 {
	margin-bottom: 90px !important;
}
.mb-95 {
	margin-bottom: 95px !important;
}
.mb-100 {
	margin-bottom: 100px !important;
}
.m-0 {
	margin: 0px !important;
}
/* Custom Padding top */
.pt-0 {
	padding-top: 0 !important;
}
.pt-5 {
	padding-top: 5px !important;
}
.pt-10 {
	padding-top: 10px !important;
}
.pt-15 {
	padding-top: 15px !important;
}
.pt-20 {
	padding-top: 20px !important;
}
.pt-25 {
	padding-top: 25px !important;
}
.pt-30 {
	padding-top: 30px !important;
}
.pt-35 {
	padding-top: 35px !important;
}
.pt-40 {
	padding-top: 40px !important;
}
.pt-45 {
	padding-top: 45px !important;
}
.pt-50 {
	padding-top: 50px !important;
}
.pt-55 {
	padding-top: 55px !important;
}
.pt-60 {
	padding-top: 60px !important;
}
.pt-65 {
	padding-top: 65px !important;
}
.pt-70 {
	padding-top: 70px !important;
}
.pt-75 {
	padding-top: 75px !important;
}
.pt-80 {
	padding-top: 80px !important;
}
.pt-85 {
	padding-top: 85px !important;
}
.pt-90 {
	padding-top: 90px !important;
}
.pt-95 {
	padding-top: 95px !important;
}
.pt-100 {
	padding-top: 100px !important;
}
/* Custom Padding top */
.pb-0 {
	padding-bottom: 0 !important;
}
.pb-5 {
	padding-bottom: 5px !important;
}
.pb-10 {
	padding-bottom: 10px !important;
}
.pb-15 {
	padding-bottom: 15px !important;
}
.pb-20 {
	padding-bottom: 20px !important;
}
.pb-25 {
	padding-bottom: 25px !important;
}
.pb-30 {
	padding-bottom: 30px !important;
}
.pb-35 {
	padding-bottom: 35px !important;
}
.pb-40 {
	padding-bottom: 40px !important;
}
.pb-45 {
	padding-bottom: 45px !important;
}
.pb-50 {
	padding-bottom: 50px !important;
}
.pb-55 {
	padding-bottom: 55px !important;
}
.pb-60 {
	padding-bottom: 60px !important;
}
.pb-65 {
	padding-bottom: 65px !important;
}
.pb-70 {
	padding-bottom: 70px !important;
}
.pb-75 {
	padding-bottom: 75px !important;
}
.pb-80 {
	padding-bottom: 80px !important;
}
.pb-85 {
	padding-bottom: 85px !important;
}
.pb-90 {
	padding-bottom: 90px !important;
}
.pb-95 {
	padding-bottom: 95px !important;
}
.pb-100 {
	padding-bottom: 100px !important;
}
.p-0 {
	padding: 0 !important;
}


/*============= 2. Helper  ==================*/

/********** Heading **********/

.page-heading {
	margin-bottom: 50px;
	margin-top: 50px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
	padding-bottom: 10px;
}

.page-heading .icon {
	float: right;
	font-size: 38px;
	line-height: 1em;
	color: #ffffff;
}

.page-heading h2 {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1em;
	text-transform: capitalize;
	color: #ffffff;
	position: relative;
	display: inline-block;
}

.subheading {
	position: relative;
	margin-bottom: 50px;
	text-align: center;
}

.subheading h3 {
	display: inline-block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1em;
	letter-spacing: .5px;
	position: relative;
	text-transform: uppercase;
	padding: 5px 10px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.6);
}

.subheading h3:before,
.subheading h3:after {
	position: absolute;
	content: "";
	width: 2px;
	height: 5px;
	background-color: rgba(255, 255, 255, 0.6);
	bottom: 0;
}

.subheading h3:before {
	left: 0;
}

.subheading h3:after {
	right: 0;
}


/********** Progress Bar **********/

.progress-title {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.progress {
	height: 10px;
	background-color: #404144;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	margin-bottom: 20px;
	overflow: visible;
}

.progress .progress-bar {
	-webkit-box-shadow: none;
	box-shadow: none;
	position: relative;
	background-color: white;
	width: 0;
	-webkit-transition: all 2s ease-out;
	-o-transition: all 2s ease-out;
	transition: all 2s ease-out;
}

.progress .progress-bar:after {
	content: "";
	display: block;
	border: 15px solid transparent;
	border-bottom: 21px solid transparent;
	position: absolute;
	top: -26px;
	right: -12px;
	border-bottom-color: #ffffff;
}

.progress .progress-value {
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
	position: absolute;
	top: -30px;
	right: 0;
}


/********** Form **********/

.input {
	display: block;
	position: relative;
}

.input__field {
	width: 100%;
	border: 2px solid #999;
	padding: 5px 10px;
	-webkit-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	position: relative;
	z-index: 1;
	background-color: transparent;
	color: #ffffff;
}

.input__field.cf-error {
	border-color: #ff0000;
}

.input__field:focus {
	outline: none;
	border-color: #ffffff;
}

.input__label {
	font-weight: 500;
	position: absolute;
	top: 7px;
	left: 12px;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	z-index: 0;
}

.input__field:focus + .input__label,
.input--filled .input__label {
	font-size: 14px;
	top: -25px;
	left: 0;
}

.input--filled .input__field {
	border-color: #ffffff;
}

textarea {
	resize: none;
	height: auto;
}


/********** Button **********/

.btn-main {
	border: 2px solid #ffffff;
	padding: 10px 20px;
	text-transform: uppercase;
	background-color: transparent;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	cursor: pointer;
	font-size: 14px;
	color: #ffffff;
	font-weight: 500;
	position: relative;
	line-height: 100%;
	letter-spacing: 1px;
	overflow: hidden;
}

.btn-main:hover,
.btn-main:focus {
	color: #000;
}

.btn-main:hover:after,
.btn-main:focus:after {
	opacity: 1;
	left: 0;
	width: 100%;
}

.btn-main:after {
	position: absolute;
	content: "";
	width: 30%;
	height: 100%;
	top: 0;
	left: 35%;
	background-color: #ffffff;
	opacity: 0;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
	z-index: -1;
}

blockquote {
	font-size: 18px;
	color: #ffffff;
	border-left: 4px solid #ffffff;
	font-style: italic;
	padding-left: 20px;
	margin: 40px 0;
	font-weight: 500;
}

/********** Preloader **********/

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	background-color: #2C2D2F;
	z-index: 10000;
}

.preloader .loader {
	position: absolute;
	top: 50%;
	width: 100%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.preloader .loader h4 {
	text-transform: uppercase;
	margin-bottom: 10px;
	font-weight: 700;
	color: heading-color;
}

.loader span {
	width: .6em;
	height: .6em;
	margin: .19em;
	background: #007DB6;
	-webkit-border-radius: .6em;
	border-radius: .6em;
	-webkit-animation: loading 1s infinite alternate;
	animation: loading 1s infinite alternate;
}

.loader span:nth-of-type(2) {
	background: #008FB2;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.loader span:nth-of-type(3) {
	background: #009B9E;
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.loader span:nth-of-type(4) {
	background: #00A77D;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.loader span:nth-of-type(5) {
	background: #00B247;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.loader span:nth-of-type(6) {
	background: #5AB027;
	-webkit-animation-delay: 1.0s;
	animation-delay: 1.0s;
}

.loader span:nth-of-type(7) {
	background: #A0B61E;
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

/*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */

@-webkit-keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes loading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/*============ 3. Layout ============*/

.header-main {
	position: fixed !important;
	top: 0;
	height: 100%;
	z-index: 300;
	width: 200px;
	background-color: #17181B;
	overflow: auto;
	left: 0;
	overflow-x: hidden;
	text-align: center;
	z-index: 999;
	border-right: 1px solid #202226;
}

.header-main .image-container {
	position: relative;
}

.header-main .image-container img {
	position: relative;
}

.header-main .image-container .header-name {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	padding: 10px 0;
	text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.header-main .image-container .header-name:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #17181B;
	opacity: .8;
	z-index: -1;
}

.header-main nav.nav-menu ul li {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom: 1px solid #202226;
	text-align: left;
}

.header-main nav.nav-menu ul li a {
	display: block;
	line-height: 45px;
	padding-left: 70px;
	position: relative;
	color: #777;
}

.header-main nav.nav-menu ul li a span.nav-menu-icon {
	position: absolute;
	left: 40px;
	display: inline-block;
	font-size: 20px;
}

.header-main nav.nav-menu ul li a.active {
	color: #fff;
}

header .header-mobile {
	position: fixed;
	top: 0;
	left: 0;
	height: 50px;
	width: 100%;
	background-color: #17181B;
	z-index: 10;
	display: none;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

header .header-mobile h2 {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	display: inline-block;
	color: #fff;
	font-size: 24px;
	text-transform: uppercase;
	line-height: 50px;
	white-space: nowrap;
}

header .header-mobile .header-toggle {
	font-size: 20px;
	line-height: 50px;
	cursor: pointer;
	width: 50px;
	text-align: center;
	border-left: 1px solid #3b3c43;
	float: right;
}

header .header-mobile .header-toggle i {
	color: #fff;
}

.header-main .nav-footer {
	margin-top: 2em;
	width: 100%;
}

.header-main .nav-footer .social {
	text-align: center;
	margin-bottom: 10px;
}

.header-main .nav-footer .social li {
	display: inline-block;
	font-size: 18px;
	margin-right: 10px;
}

.header-main .nav-footer .social li a {
	color: #777;
	-webkit-transition: color .2s ease;
	-o-transition: color .2s ease;
	transition: color .2s ease;
}

.header-main .nav-footer .social li:hover a {
	color: #fff;
}

.header-main .nav-footer .social li:last-child {
	margin-right: 0;
}

.header-main .nav-footer .copy p {
	font-size: 12px;
	color: #777;
}

.site-main {
	position: absolute;
	top: 0;
	left: 200px;
	right: 0;
	width: auto;
	height: 100%;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	overflow: hidden;
}

.site-main .pt-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	overflow: auto;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	z-index: 0;
}

.site-main .pt-page .section-container {
	max-width: 1040px;
	width: 90%;
	margin: 0 auto;
}

.site-main .page-active {
	visibility: visible;
	opacity: 1;
	z-index: 1;
}

.site-main .pt-page-ontop {
	z-index: 999;
}


/*============ 4. Banner Section ============*/

.banner-section {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}

.banner-section:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #151515;
	opacity: .5;
}

.banner-section .banner-content {
	color: #fff;
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	display: block;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.banner-section .banner-content h1 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 62px;
	font-weight: 500;
	color: #fff;
}

.banner-section .banner-content h1 span {
	font-weight: 900;
}

.banner-section .banner-content p {
	font-size: 28px;
}

.banner-section .banner-content p .cd-words-wrapper:after {
	background-color: #aaa;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	height: 34px;
}

.banner-section .banner-content p .cd-words-wrapper b {
	font-weight: 700;
	border-bottom: 2px solid #fff;
}

.banner-section #video-container {
	position: absolute !important;
	height: 100%;
	width: 100%;
	z-index: -1;
}

.banner-section .banner-slider {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

.banner-section #particles-js {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/*============ 5. About Section ============*/

.about-section {
	background-color: #2C2D2F;
}

.about-section .about h3 {
	font-size: 22px;
	font-weight: 700;
}

.about-section .about .signature {
	width: 50%;
}

.about-section .about .about-info ul li {
	line-height: 1em;
	margin-bottom: 15px;
}

.about-section .about .about-info ul li span.title {
	font-family: "Microsoft JhengHei","Playfair Display", serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
	border-bottom: 2px solid #ffffff;
	position: relative;
	display: inline-block;
	margin-right: 15px;
	padding-bottom: 1px;
	color: #ffffff;
}

.about-section .about .about-info ul li span.title:after {
	content: ':';
	position: absolute;
	right: -10px;
}

.about-section .services .service-item {
	text-align: center;
	margin-bottom: 40px;
	position: relative;
}

.about-section .services .service-item .icon {
	font-size: 50px;
	margin-bottom: 10px;
	line-height: 1em;
	color: #ffffff;
}

.about-section .services .service-item h4 {
	font-size: 18px;
	font-weight: 600;
}

.about-section .services .service-item p {
	font-size: 14.5px;
	line-height: 22px;
	margin-bottom: 0;
	margin-top: 15px;
	margin-bottom: 15px;
}

.clients .client-logo img {
	width: 100px;
	height: 100px;
	margin: auto;
	opacity: .7;
	-webkit-transition: opacity .4s ease;
	-o-transition: opacity .4s ease;
	transition: opacity .4s ease;
}

.clients .client-logo img:hover {
	opacity: 1;
}

.testimonials .testimonial-item {
	position: relative;
	padding: 5px;
}

.testimonials .testimonial-item .testimonial-content {
	background-color: #17181B;
	width: 100%;
	-webkit-border-radius: 50px 0 50px 0;
	border-radius: 50px 0 50px 0;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 100px;
	padding-right: 20px;
	font-size: 14px;
	position: relative;
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.2));
}

.testimonials .testimonial-item .testimonial-content p {
	margin-bottom: 0;
}

.testimonials .testimonial-item .testimonial-content:before {
	content: "\f10d";
	position: absolute;
	left: 5%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 50px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #e1e1e1;
}

.testimonials .testimonial-item .testimonial-content:after {
	position: absolute;
	content: "";
	left: 15px;
	top: 100%;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 11px solid #17181B;
}

.testimonials .testimonial-item .testimonial-meta {
	margin-top: 20px;
	margin-left: 15px;
}

.testimonials .testimonial-item .testimonial-meta img {
	width: 60px;
	height: 60px;
	float: left;
	-webkit-border-radius: 20px 0 20px 0;
	border-radius: 20px 0 20px 0;
	margin-right: 10px;
}

.testimonials .testimonial-item .testimonial-meta .meta-info h4 {
	font-size: 18px;
	font-weight: 400;
}

.testimonials .testimonial-item .testimonial-meta .meta-info p {
	font-size: 14px;
}


/*============ 6. Resume Section ============*/

.resume-section {
	background-color: #2C2D2F;
}

.resume-section ul.education,
.resume-section ul.experience {
	margin: 20px 0 50px;
	list-style: none;
	position: relative;
	padding: 0 0 0 50px;
	width: 100%;
}

.resume-section ul.education li,
.resume-section ul.experience li {
	position: relative;
	margin-left: 10px;
	padding: 20px;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.resume-section ul.education li:not(:first-child),
.resume-section ul.experience li:not(:first-child) {
	margin-top: 60px;
}

.resume-section ul.education li span.line-left,
.resume-section ul.experience li span.line-left {
	width: 2px;
	height: 100%;
	background-color: #e1e1e1;
	left: -10px;
	top: 0;
	position: absolute;
}

.resume-section ul.education li span.line-left:before,
.resume-section ul.education li span.line-left:after,
.resume-section ul.experience li span.line-left:before,
.resume-section ul.experience li span.line-left:after {
	content: "";
	width: 10px;
	height: 10px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	border: 2px solid #e1e1e1;
	position: absolute;
	left: -4px;
	top: -10px;
}

.resume-section ul.education li span.line-left:after,
.resume-section ul.experience li span.line-left:after {
	top: 100%;
}

.resume-section .education .content,
.resume-section .experience .content {
	margin-left: 10px;
}

.resume-section .education .content h4,
.resume-section .experience .content h4 {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .5px;
	line-height: 26px;
	margin: 0;
	text-transform: uppercase;
}

.resume-section .education .content h5,
.resume-section .experience .content h5 {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 12px;
	font-family: "Microsoft JhengHei","Roboto", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
}

.resume-section .education .content p.info,
.resume-section .experience .content p.info {
	font-size: 16px;
	margin-bottom: 0px;
}

.resume-section .education span.year,
.resume-section .experience span.year {
	height: 100%;
	left: -10px;
	top: 0;
	position: absolute;
}

.resume-section .education span.year span,
.resume-section .experience span.year span {
	font-size: 16px;
	position: absolute;
	-webkit-transform: translateX(-120%);
	-ms-transform: translateX(-120%);
	transform: translateX(-120%);
	color: #ffffff;
}

.resume-section .education span.year span.to,
.resume-section .experience span.year span.to {
	top: -18px;
}

.resume-section .education span.year span.from,
.resume-section .experience span.year span.from {
	bottom: -18px;
}

.resume-section .skills {
	margin-bottom: 30px;
}

.resume-section .skills .skill-item {
	padding: 0 20px;
}


/*============ 7. Portfolio Section ============*/

.portfolio-section {
	background-color: #2C2D2F;
}

.portfolio-section .portfolio-filter {
	margin-bottom: 30px;
}

.portfolio-section .portfolio-filter ul {
	display: inline-block;
	margin: 0 auto;
	-webkit-border-radius: 27px;
	border-radius: 27px;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	line-height: 0;
}

.portfolio-section .portfolio-filter ul li {
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	font-family: "Microsoft JhengHei","Roboto", sans-serif;
	position: relative;
	color: #e1e1e1;
	text-transform: uppercase;
	padding: 20px 20px;
	overflow: hidden;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.portfolio-section .portfolio-filter ul li.active {
	background-color: #ffffff;
	-webkit-border-radius: 27px;
	border-radius: 27px;
	color: #2C2D2F;
}

.portfolio-section {
	overflow: hidden;
}

.portfolio-section .item {
	padding-left: 1em;
	padding-right: 1em;
}

.portfolio-section .item figure {
	position: relative;
	overflow: hidden;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.portfolio-section .item figure:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.portfolio-section .item figure:hover:before {
	opacity: .7;
}

.portfolio-section .item figure:hover figcaption h4,
.portfolio-section .item figure:hover figcaption p {
	opacity: 1;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
}

.portfolio-section .item figure figcaption {
	position: absolute;
	left: 0;
	top: 50%;
	padding-left: 20px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #fff;
}

.portfolio-section .item figure figcaption h4,
.portfolio-section .item figure figcaption p {
	opacity: 0;
	color: #fff;
	-webkit-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	transition: all .1s ease-in;
}

.portfolio-section .item figure figcaption h4 {
	font-size: 20px;
	font-weight: 700;
	-webkit-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	transform: translateY(-50px);
}

.portfolio-section .item figure figcaption p {
	padding-top: 10px;
	-webkit-transform: translateY(50px);
	-ms-transform: translateY(50px);
	transform: translateY(50px);
}

.portfolio-section .item a figure:after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	bottom: 20px;
	right: 25px;
	color: #fff;
	font-size: 26px;
	opacity: 0;
	-webkit-transform: translateX(50px);
	-ms-transform: translateX(50px);
	transform: translateX(50px);
	-webkit-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	transition: all .1s ease-in;
}

.portfolio-section .item a figure:hover:after {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	opacity: 1;
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.portfolio-section .item a.image-link figure:after {
	content: "\f03e";
}

.portfolio-section .item a.video-link figure:after {
	content: "\f03d";
}

.portfolio-section .item a.audio-link figure:after {
	content: "\f03d";
}

.portfolio-section .item a.ajax-link figure:after {
	content: "\f15c";
}


/*============ 8. Blog Section ============*/

.blog-section {
	background-color: #2C2D2F;
}

.blog-section .blog-filter {
	margin-bottom: 30px;
}

.blog-filter-mobile {
	display: none;
}

.blog-section .blog-filter ul {
	display: inline-block;
	margin: 0 auto;
	-webkit-border-radius: 27px;
	border-radius: 27px;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	line-height: 0;
}

.blog-section .blog-filter ul li {
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	font-family: "Microsoft JhengHei","Roboto", sans-serif;
	position: relative;
	color: #e1e1e1;
	text-transform: uppercase;
	padding: 20px 20px;
	overflow: hidden;
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

.blog-section .blog-filter ul li.active {
	background-color: #ffffff;
	-webkit-border-radius: 27px;
	border-radius: 27px;
	color: #2C2D2F;
}

.blog-section .blog-filter ul li:hover {
	background-color: #ffffff;
	-webkit-border-radius: 27px;
	border-radius: 27px;
	color: #2C2D2F;
}

.blog-section .blog-item {
	position: relative;
	display: block;
	background-color: #2C2D2F;
	border: 1px solid #222324;
	margin-bottom: 50px;
	overflow: hidden;
}

.blog-section .blog-item .blog-image img {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.blog-section .blog-item:hover img {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

.blog-section .blog-item .blog-content {
	padding: 28px 16px 36px;
	text-align: center;
	width: 82%;
	position: relative;
	background-color: #2C2D2F;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px;
}

.blog-section .blog-item .blog-content .cat {
	margin-bottom: 7px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
}

.blog-section .blog-item .blog-content .blog-title {
	margin-bottom: 6px;
	font-size: 21px;
	letter-spacing: .5px;
	text-transform: capitalize;
}

.blog-section .blog-item .blog-content .blog-date {
	font-family: "Microsoft JhengHei",serif;
	font-style: italic;
	color: #e1e1e1;
	font-size: 14px;
}


/*============ 9. Contact Section ============*/

.contact-section {
	background-color: #2C2D2F;
}

.contact-section #map {
	width: 100%;
	height: 200px;
}

.contact-section .contact-info {
	text-align: center;
}

.contact-section .contact-info .info-item .icon {
	position: relative;
	display: inline-block;
	text-align: center;
	font-size: 30px;
	line-height: 1em;
	margin-top: 15px;
	margin-bottom: 15px;
}

.contact-section .contact-info .info-item h5 {
	font-size: 18px;
}

#contact-form .alert-container {
	text-align: center;
}

#contact-form .alert-container .alert {
	-webkit-border-radius: 0;
	border-radius: 0;
}


/*============ 10. Ajax Portfolio ============*/

.ajax-portfolio-popup {
	background-color: #2C2D2F;
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1000;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: -webkit-transform .5s;
	transition: -webkit-transform .5s;
	-o-transition: transform .5s;
	transition: transform .5s;
	transition: transform .5s, -webkit-transform .5s;
	overflow-y: scroll;
	overflow-x: hidden;
}

.ajax-portfolio-popup.on {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}

.ajax-portfolio-popup .navigation-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	height: 80px;
	background-color: #17181B;
	z-index: 10;
}

.ajax-portfolio-popup .navigation-wrap .popup-close {
	color: #fff;
	font-size: 30px;
	line-height: 80px;
	cursor: pointer;
}

.ajax-portfolio-popup .content-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-top: 80px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.ajax-portfolio-popup .content-wrap .popup-content {
	margin-top: 40px;
}

.ajax-portfolio-popup .ajax-loader {
	position: fixed;
	display: none;
	content: "";
	height: 60px;
	width: 60px;
	top: 30%;
	left: -webkit-calc(100vw/2 - 30px);
	left: calc(100vw/2 - 30px);
	-webkit-animation: rotation .6s infinite linear;
	animation: rotation .6s infinite linear;
	border-left: 6px solid #444;
	border-right: 6px solid #e3e3e3;
	border-bottom: 6px solid #e3e3e3;
	border-top: 6px solid #e3e3e3;
	-webkit-border-radius: 100%;
	border-radius: 100%;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

.ajax-portfolio-popup .single-work h1 {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: 1.5px;
}

.ajax-portfolio-popup .single-work .information li {
	display: inline-block;
	margin: 0 20px;
	font-size: 18px;
}

.ajax-portfolio-popup .single-work .information li span.title {
	font-family: "Microsoft JhengHei","Playfair Display", serif;
	font-size: 18px;
	font-weight: 700;
}


/*============ 11. Blog Page Css ============*/

.blog-page {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: auto;
	z-index: 1;
}

.blog-page .blog-container {
	max-width: 1040px;
	width: 90%;
	margin: 0 auto;
}

.blog-page {
	background-color: #2C2D2F;
	padding-bottom: 50px;
}

.blog-page .blog-image {
	text-align: center;
	max-width: 1920px;
	max-height: 500px;
	margin: auto;
}

.blog-page .blog-image img {
	max-height: 500px;
}

.blog-image img {
	object-fit: cover;
}

.blogs-masonry img {
	min-height: 200px;
	max-height: 200px;
	object-fit: cover;
}

.blog-page .blog-heading {
	background-color: #2C2D2F;
	margin-top: -100px;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
	letter-spacing: .5px;
}

.blog-page .blog-heading h1 {
	font-size: 40px;
	margin-bottom: 6px;
	letter-spacing: .5px;
}

.blog-page .blog-heading .cat {
	margin-bottom: 7px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
}

.blog-page .blog-heading .blog-date {
	font-family: "Microsoft JhengHei",serif;
	font-style: italic;
	color: #777;
	font-size: 14px;
}

.blog-page .blog-content {
	padding-bottom: 50px;
}

.blog-page .blog-comments .comment-list .comment {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dotted #e3e3e3;
}

.blog-page .blog-comments .comment-list .comment .author-img {
	float: left;
	margin-right: 20px;
}

.blog-page .blog-comments .comment-list .comment .author-img img {
	-webkit-border-radius: 100%;
	border-radius: 100%;
	max-width: 70px;
}

.blog-page .blog-comments .comment-list .comment .comment-text {
	overflow: hidden;
}

.blog-page .blog-comments .comment-list .comment .comment-text .reply {
	float: right;
}

.blog-page .blog-comments .comment-list .comment .comment-text .reply a {
	font-size: 10px;
	background-color: #ffffff;
	color: #222;
	padding: 3px 8px 4px 8px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-left: 7px;
}

.blog-page .blog-comments .comment-list .comment .comment-text h6.author {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 7px;
}

.blog-page .blog-comments .comment-list .comment .comment-text span.date {
	display: block;
	color: #999;
	font-size: 12px;
	line-height: 1em;
	margin-bottom: 5px;
}

.blog-page .blog-comments .comment-list .comment .comment-text p {
	color: #ffffff;
	font-size: 15px;
}

.blog-page pre {
	color: #FFFFFF !important;
}

.pagination-single {
	margin: 0 auto;
}

.previous-post {
	margin-right: 50px;
}

/*============ 12. Mobile Responsive Css ============*/

@media screen and (max-width: 991px) {
	.about-section .about-info {
		margin-top: 40px;
	}
	.about-section .about-info ul li {
		display: inline-block;
		position: relative;
		margin: 0 5px;
		padding: 0 5px;
	}
	.blog-page .blog-heading {
		margin-top: 0;
	}
	.blog-filter-mobile {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	header .header-main {
		left: -200px;
		-webkit-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		z-index: 1000;
	}
	header .header-main h2 {
		display: none !important;
	}
	header .header-mobile {
		display: block;
		-webkit-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	header .header-content.on .header-main {
		left: 0px;
	}
	#main {
		left: 0px;
		-webkit-transition: all .3s ease-in-out;
		-o-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
	}
	#main .pt-page,
	#main .blog-page {
		padding-top: 50px;
	}
	.banner-section .banner-content h1 {
		font-size: 50px;
	}
	.banner-section .banner-content p.cd-headline {
		font-size: 22px;
	}
	.previous-post {
		margin-right: 0;
		display: block;
	}
	.blog-filter-desktop {
		display: none;
	}
	.blog-filter-mobile {
		display: block;
	}
}

@media screen and (min-height: 610px) {
	.header-main .nav-footer {
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

@media screen and (max-width: 575px) {
	.about-section .about .signature {
		width: 70%;
	}
	.resume-section ul.education,
	.resume-section ul.experience {
		padding: 0;
	}
	.resume-section ul.education span.year,
	.resume-section ul.experience span.year {
		left: 42px;
	}
	.resume-section .skills .skill-item {
		padding: 0;
	}
	.portfolio-section .portfolio-filter ul {
		border: none;
	}
	.blog-section .blog-filter ul {
		/*border: none;*/
	}
}