/*
  SHINKAIZEN PORTFOLIO STYLES
  CREATED BY HACHWAN (81)

  VERSION 1.0.0
*/

/*******************************\ 
    Global styles 
\*******************************/
body{color:#333;font-size: 16px;font-family: 'Khula', sans-serif;line-height: 1.8}

.bench9{font-family: 'BenchNine', sans-serif;}
.khula{;font-family: 'Khula', sans-serif;}

ul.listing{padding-left: 20px;}
ul.listing li{margin-bottom: 10px;}

/*******************************\ 
    Header styles 
\*******************************/
header{background-color: #DDD;height: 600px}

header h1{font-weight: bold;font-size: 60px;color: #fff;text-shadow: 1px 1px 100px #000;font-family: 'BenchNine', sans-serif;}
header h3{font-size: 26px;color:#fff;text-shadow: 1px 1px 100px #000;font-weight: bold;}
header p{color:#fff;text-shadow: 1px 1px 20px #000;}
header .row{height: 530px}

/* Navigation*/
header a.logo{display: block;float: left;pointer-events: none;} /*Temp disable logo*/
header a.logo img{max-width: 180px;max-height: 60px;}
header ul{list-style-type: none;padding-left: 0;margin-bottom: 0;margin-top: 25px;}
header ul li{display: inline-block;margin-right: 5px;color: #fff;font-weight: bold;}
header ul li a{padding:10px 20px 8px;display: block;color: #fff;border-radius: 6px;font-weight: bold;text-decoration: none !important;font-size: 18px;margin-bottom: 10px;}
header ul li a i{font-size: 80%;}
header ul li a:hover{background-color: #fff !important}

header ul li:nth-child(2) a{background-color:#1e88e5;border:2px solid #1e88e5;} /* Skills */
header ul li:nth-child(3) a{background-color:#00acc1;border:2px solid #00acc1;} /* Tools */
header ul li:nth-child(4) a{background-color:#43a047;border:2px solid #43a047;} /* Experience */
header ul li:nth-child(5) a{background-color:#fb8c00;border:2px solid #fb8c00;} /* Works */
header ul li:nth-child(6) a{background-color:#e53935;border:2px solid #e53935;} /* Contact */

header ul li:nth-child(2) a:hover{color:#1e88e5;border:2px solid #1e88e5;} /* Skills */
header ul li:nth-child(3) a:hover{color:#00acc1;border:2px solid #00acc1;} /* Tools */
header ul li:nth-child(4) a:hover{color:#43a047;border:2px solid #43a047;} /* Experience */
header ul li:nth-child(5) a:hover{color:#fb8c00;border:2px solid #fb8c00;} /* Works */
header ul li:nth-child(6) a:hover{color:#e53935;border:2px solid #e53935;} /* Contact */


/*******************************\ 
    Section styles 
\*******************************/
section{padding:80px 0;border-bottom: #eee 2px solid;}
section h2{margin-bottom: 30px;}
section h2:after{content:'';display: block;width:50px;margin:10px auto 60px;border-bottom:3px solid #999;}


/*******************************\ 
    Home page styles 
\*******************************/
#education h2:after{border-bottom:3px solid #1e88e5;}

#experience h2:after{border-bottom:3px solid #00acc1;}
/*#experience{background-color: #eee}*/
/*#experience{border-top: #eee 2px solid;border-bottom: #eee 2px solid;}*/
#experience .experience-row h3{font-size: 150%;font-weight: bold;}

/*Timeline (depreciated)*/
#experience .timeline{}
#experience .timeline .timeline-row{display: flex;}
#experience .timeline .timeline-row .timeline-year{width:100px;font-size: 60px;font-family: 'BenchNine', sans-serif;font-weight: bold;text-align: right;}
#experience .timeline .timeline-row .timeline-bullet{width: 80px;text-align: center;position: relative;}
#experience .timeline .timeline-row .timeline-bullet > div {width: 30px;height: 30px;background-color: #43a047;border-radius: 100%;display: inline-block;margin-top: 25px;}
#experience .timeline .timeline-row .timeline-bullet:before{content:'';border-left: 4px solid #43a047;display: block;height: calc(100% - 30px);position: absolute;left:38px;bottom:0;}
#experience .timeline .timeline-row:last-child .timeline-bullet:before{border-left: none;}
#experience .timeline .timeline-row .timeline-details{margin-top: 16px;margin-bottom: 50px;}
#experience .timeline .timeline-row .timeline-details h3{font-size: 180%;font-weight: bold;margin-bottom: 0;}
#experience .timeline .timeline-row .timeline-details h4{font-size: 120%;font-style: italic;}
#experience .timeline .timeline-row .timeline-details h5{margin-top: 10px;}

#skills h2:after{border-bottom:3px solid #43a047;}
#skills a{color: #1e88e5;}
#skills i{width: 20px}

/*#applications h2:after{border-bottom:3px solid #00acc1;}*/
#applications img{margin-right: 15px;}
#applications p{margin-bottom: 0;}
#applications p:not(.app-name){font-size: 12px;color: #aaa}
#applications p.app-name{font-size: 16px;margin-top: 5px;}

/*V1 Design*/
#works{background-color: #eee;}
#works h2:after{border-bottom:3px solid #fb8c00;}
#works .work-card{background-color: #fff; display: block;margin-bottom: 20px;-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);color:#333;}
#works .work-card:hover{text-decoration: none;}
#works .work-card .work-details{padding: 15px 15px 13px;border-top:1px solid #eee;}
#works .work-card .work-details p{margin-bottom: 0;}
#works .work-card .work-details p:first-child{margin-top: 0;}
#works .work-card .work-details p:last-child{color: #aaa; font-size: 12px;}

/*V2 Design*/
#works .featured-works .row > div{padding-top:140px;padding-bottom: 140px;}
#works .featured-works .row p{margin-top: 30px;margin-bottom: 30px;width: 75%;line-height: 1.5}
#works .featured-works .row a.btn {border:1px solid #000;color:#000;text-transform: uppercase;line-height: 1;letter-spacing: 2px;padding: 18px 20px 15px 20px;}
#works .featured-works .row a.btn i{font-size: 80%}
#works .featured-works .row.invert{color: #fff;}
#works .featured-works .row.invert a.btn {border:1px solid #fff;color:#fff;}

#works .other-works .row .work{width:100%;padding-bottom: 60%;position: relative; text-align:center;overflow: hidden;}
#works .other-works .row .work .overlay{width:100%;padding-bottom: 60%;background-color: rgba(0,0,0,.8);position: absolute;top: 0;left:0;;opacity:0;}
#works .other-works .row .work:hover .overlay{opacity: 1;}
#works .other-works .row .work .overlay-title{position: absolute;left:0;width: 100%;top:-30%;}
#works .other-works .row .work:hover .overlay-title{top:30%;}
#works .other-works .row .work .overlay-title p{white-space: nowrap;overflow: hidden; text-overflow: ellipsis;width:90%;margin:0 auto;color: #fff;font-weight: bold;font-size: 150%;}
#works .other-works .row .work .overlay-button{position: absolute;left:0;width: 100%;bottom:-30%;}
#works .other-works .row .work:hover .overlay-button{bottom:30%;}
#works .other-works .row .work .overlay-button button.btn{color: white;border:1px solid #fff;background-color: transparent}
#works .other-works .row .work .overlay-button button.btn i{font-size: 80%;}

#contact h2:after{border-bottom:3px solid #e53935;}
#contact .form-on-white input[type="submit"]{padding:24px 10px 20px;font-size: 20px;line-height: 1;background-color: #e53935;}
#contact .form-on-white input[type="submit"]:hover{cursor: pointer;-moz-transform: scale(1.1);-webkit-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);background-color: #b71c1c}

.border-grey{border:1px solid #ddd;}

/*******************************\ 
    Works styles 
\*******************************/
p.tags a{display: inline-block;background-color: #eee;color:#999;padding:7px 10px 4px;margin-right: 3px;}
p.tags a i{font-size: 80%;margin-right: 3px;}
p.tags a:hover{text-decoration: none;color:#666;background-color: #ccc}


/*******************************\ 
    Footer styles 
\*******************************/
footer{background-color: #333;padding:15px 0;}
footer p{color:#999;margin-bottom: 0;font-size: 12px;line-height: 1.8}
footer a{color: #1e88e5}


/**************************************************\ 
Print exclusions
\**************************************************/
@media print{
	.no-print, footer{
		display: none;
	}

	header, header .row{
		height: auto !important;
	}

	header h1{
		margin-top: 100px;
	}

	header h1, header h3{
		color: #000;
		text-align: center;
	}

	.full-width-print{
		width: 100% !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		flex: 0 0 100%;
    	max-width: 100%;	
	}

	.print-next-page{
		page-break-before: always;
	}
}


/**************************************************\ 
(XL+) Extra large devices only
\**************************************************/
@media screen and (min-width: 1200px){}


/**************************************************\ 
(LG+) Large devices and above
\**************************************************/
@media screen and (min-width: 992px){
	
}


/**************************************************\ 
(LG) Large devices only
\**************************************************/
@media screen and (min-width:992px) and (max-width: 1199px){}


/**************************************************\ 
(LG-) Large devices and below
\**************************************************/
@media screen and (max-width: 1199px){}


/**************************************************\ 
(MD+) Medium devices and above
\**************************************************/
@media screen and (min-width: 768px) {
	#experience .experience-row img.logo{width: 80%}
}

/**************************************************\ 
(MD) Medium devices only
\**************************************************/
@media screen and (min-width:768px) and (max-width: 991px) {}


/**************************************************\ 
(MD-) Medium devices and below
\**************************************************/
@media screen and (max-width: 991px){
	
}

/**************************************************\ 
(SM+) Small devices and above
\**************************************************/
@media screen and (min-width:576px) {}

/**************************************************\ 
(SM) Small devices only
\**************************************************/
@media screen and (min-width:576px) and (max-width: 767px) {}

/**************************************************\ 
(SM-) Small devices and below
\**************************************************/
@media screen and (max-width:767px) {
	#experience .experience-row img.logo{width: auto;max-width: 100%;display: none;}

	#works .other-works .row .work:hover .overlay-title{top:25%;}
	#works .other-works .row .work:hover .overlay-button{bottom:25%;}

	#works .featured-works .row p{margin-right: auto;margin-left: auto;}

}

/**************************************************\ 
(XS) Extra small devices only
\**************************************************/
@media screen and (max-width:575px) {}