/*
Theme Name: Bordered
Theme URI: https://j4cob.net/themes/bordered
Author: J4cob.
Author URI: https://j4cob.net
Description: Bordered cv and blog theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Text Domain: bordered
Tags: one-column,custom-menu,featured-images,left-sidebar,translation-ready
*/

/*
** Please do not edit here. Create Child theme : https://codex.wordpress.org/Child_Themes
*/

body{font-family: 'Roboto Condensed', sans-serif;background: #F1F1F1;}
/* Navs & Profile
<=================================>*/
a{text-decoration: none!important;}
.nav-pills>li>a{color:#333;border-radius:0;transition: ease .5s all;text-align: center;font-size: 1.1em;}
.nav-pills>li.active a{background: #333;}
.nav-pills>li.active a:hover,.nav-pills>li.active a:focus{background: #333;color: #ddd;}
.brd{border: 3px solid #eee;border-radius: 4px;background: #FFF;}
.brd-img img{border: 3px solid #eee;border-radius: 4px;}
.profile{font-weight: 700;}
.profile img{max-width: 100%;height: 300px;width: 100%;object-fit: cover;border-radius: 4px 4px 0 0;}
.profile-header{background: #333;color: #FFF;text-align: center;display: block;border-radius: 4px 4px 0 0;padding: .333em;}
.profile-header a{color:inherit;text-decoration: none;}
.blog-title{font-size: 3em;}
.blog-title a:hover{color:#EEE;}
.blog-description{font-size: 1em;font-weight: normal;}
.profile .social{padding: 5px 0;text-align: center;border-top: 3px solid #eee;}
.profile .social a{color: #333;font-size: 1.7em;margin: 2px;transition: ease .5s all;}
.profile .social a:hover{color: #555;}
.h{margin-top:1em;margin-bottom: 1em;}
.h .h-ct{text-transform: uppercase;position: relative;z-index: 1;text-align: center;font-size:2em;}
.h .h-ct:before {border-top: 3px solid #dfdfdf;content: "";margin: 0 auto;position: absolute;top: 50%;left: 0;right: 0;bottom: 0;width: 100%;z-index: -1;}
.h .h-ct span {background: #fff;padding: 0 15px;border-radius: 3px;border: 3px solid #e7e7e7;}
.pd{padding: .777em 1em;}
.date a{color:#333;}
.title a{color:inherit}
.nf{font-size: 3em;font-weight: bold;text-align: center;}
/* Skills
<=================================>*/
#skill,#about,#post-page,#comments{padding: .777em 1em;}
#skill .title,#about .title,#post-page .title{font-size: 1.3em;font-weight: 700;}
#skill .progress{margin:0;margin-top: 1em!important;height: 25px;background: #F1F1F1;border-radius: 2px;}
#skill .progress-bar{font-size: 14px;font-weight: 700;background: #333;line-height: 25px;text-align: left;padding-left: 1em;text-shadow: 1px 1px 3px #333;}
/* Timeline
<=================================>*/
#timeline,#portfolio,#blog{padding: 0 1em;}
#timeline,#portfolio,#skill,#about,#post-page,.profile{margin-top: 2em;}
#timeline .brd{padding: .444em .666em;}
#timeline .title,#blog .title{font-size: 1.3em;font-weight: 700;padding:.333em 0;line-height: 100%;}
#timeline .sub-title{font-size: 12px;font-weight: normal;color:#999;}
#timeline p,#about p,#blog p,#post-page p{color: #555;}
/*#timeline .date,#blog .date,#post-page .date{color:#777;text-align: center;display: block;font-size: 12px;}*/
#timeline .owl-theme .owl-nav .disabled{opacity: 0;}
/* Porfolio
<=================================>*/
.owl-carousel .owl-item img{height: 250px;object-fit: cover;}
#portfolio .item .caption,#portfolio-m .content{position: absolute;width: 100%;height: 100%;text-align: center;top:0;left:0;background: #FFF;opacity: 0;z-index: 3;transition: ease .5s all;}
#portfolio .item a{position: relative;width: 100%;display: block;}
#portfolio .item .caption i{position: absolute;top:50%;margin:-15px 0 0 -15px;color:#000;}
#portfolio .item a:hover .caption,#portfolio-m .item:hover .content {opacity: .7;}
#portfolio .modal-dialog,
#portfolio .modal-content {bottom: 0;left: 0;position: absolute;right: 0;top: 0;}
#portfolio .modal-dialog {margin: 0;width: 100%;}
#portfolio .modal-content {border: none;-moz-border-radius: 0;border-radius: 0;-webkit-box-shadow: inherit;-moz-box-shadow: inherit;-o-box-shadow: inherit;box-shadow: inherit;overflow: auto;padding:20px;font-size: 1.3em;line-height: 120%;color:#333;}
#portfolio .modal-title{font-size: 3em;line-height: normal;}
#portfolio .modal-content img{max-width: 100%;height: auto;margin: 1em;}
#portfolio img,#portfolio-m img{border-radius: 5px;}
#portfolio-m .content{background: #333}
#portfolio-m .item {position: relative;}
#portfolio-m .title{position: absolute;top:40%;width:95%;font-size: 2em;color:#fff;opacity: 1;}
/*
#portfolio-m .content{position: absolute;width: 100%;height: 100%;text-align: center;top:0;left:0;
    border-radius:3px;background: rgba(0,0,0, .5);opacity:0;}*/
/* Blog
<=================================>*/
#blog,#portfolio-m{padding: 1em;-moz-column-count:3;-webkit-column-count: 3;column-count: 3;-moz-column-gap: .5em;-webkit-column-gap: .5em;column-gap: .5em;}
#blog .item,#portfolio-m .item {display: inline-block;margin-top: .5em;width:  100%;}
#blog .post,#portfolio-m .post {position:relative;display: block;background: #FFF;}
#blog .post img,#portfolio-m .post img{width: 100%;height: auto;object-fit: cover;border-radius: 3px 3px 0 0}
#blog .brd.normal .content,#portfolio-m .brd.normal .content,#blog .brd.img-text .content,#blog .brd.img-content .content{padding: .444em .666em;}
#blog .brd.only-content{padding: .666em .666em .444em;}
#blog .brd.img-content img{border-radius: 3px 3px 0 0;}
#blog .brd.img img{border-radius: 3px!important;}
#blog .item a{color:inherit}
/* Single - Page
<=================================>*/
#post-page .subtitle,#post-page .subtitle a{opacity: .9;margin-bottom: 1em;color:inherit}
#comments{margin-top: 1em;margin-bottom: 2em;}
/* Comment Template
<=================================>*/
.comment-list,.children{
    list-style-type: none;
    padding: 0;
}
.children {margin-left:60px;}
.commentmetadata,.comment-list p,.comment-reply-link{padding-left:58px;}
.comment-meta.commentmetadata{margin-top:-16px;}
.comment-list li{margin-top: 1em;}
.thread-even,.thread-odd{border-bottom: 3px solid #eee;padding-bottom: 1em;}
.comment-reply-link,.submit,#searchsubmit,.post-tags a,.post-links a{
    cursor: pointer;
    background-color: #333;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px 4px;
    text-transform: uppercase;
    width: auto;
}
.comment-reply-link:hover{color:#fff;}
.avatar{border-radius: 4px;}
#comments .fn{padding-left:5px;font-weight: bold;font-style: normal;}
#comments .fn a{color:#333;}
#comments .says{display:none;}
input[type=text],textarea,select{
    border: 3px solid #eee;border-radius: 4px;
    width: 100%;
}
.commentmetadata a,.comment-notes{color:#777;}
#left-sidebar .widget{margin-top:1rem}
#left-sidebar input[type=text]{
    display: inline;
    width: auto;
}
#left-sidebar .widget a{
    color:#333;
}
#left-sidebar .widget-title{
    border-bottom-color:#eee;
}
#left-sidebar #wp-calendar{width: 100%;}



/* Footer
<=================================>*/
footer{
    background-color: #333;
    color: #FFF;
    border-top: 3px solid #eee;
    border-radius: 4px 4px 0 0;
    min-height:100px;
    height: auto;
    margin-top:2em;
    width: 100%;
    padding-top:1em;
}
.copyright{
    border-top: 3px solid #666;
    padding:1em;
    margin-top:2em;
    color:#ccc;
}
.copyright a{
    color:#fff;;
    font-weight: bold;
}

/* Wordpress
<=================================>*/
.widget ul,.widget ol{
    list-style-type: none;
    padding: 0;
    color:#ccc;
}
.widget-title{
    font-size : 2em;
    border-bottom : 3px solid #666;
    margin-bottom: .5em;
}
.widget a{
    color:#ccc;

}
.widget a:hover{color:#fff;}
.tagcloud{
    display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.tagcloud a{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: .5em;
    font-size:1em!important;
    color:#333;
    background: #fff;
    border-radius: 3px;
    padding: 4px 10px 4px;
}
.tagcloud a:hover,
.tagcloud a:focus {
	color:#333;
	transform: scale(1.1);
}
.owl-carousel .owl-dots.disabled{display:block;}
/* Color Picker
<=================================>*/
.green{background: #27ae60!important;border-radius: 3px;border: 3px solid #27ae60;}
.blue{background: #2980b9!important;border-radius: 3px;border: 3px solid #2980b9;}
.purple{background: #8e44ad!important;border-radius: 3px;border: 3px solid #8e44ad;}
.yellow{background: #f1c40f!important;border-radius: 3px;border: 3px solid #f1c40f;}
.red{background: #e74c3c!important;border-radius: 3px;border: 3px solid #e74c3c;}
.white-text, .white-text p,.white-text .date{color:#FFF!important;}
.black-text, .black-text p,.black-text .date{color: #555!important;}

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    margin: 0;
    padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	/* Above WP toolbar. */
}