/* 
Theme Name: Didier Kacou Press
Theme URI: https://henri-issoufou.dev/
Description: Didier Kacou Press is a Worpress theme, created by Henri Issoufou
Author: Henri Issoufou
Author URI: https://henri-issoufou.dev/
Template: hello-elementor
Version: 1.0.1
Text Domain: didier-kacou-press
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
	
	html{
		scrollbar-width: thin;
	}
	/* width 
	::-webkit-scrollbar {
		width: 5px;
	}*/

	/* Track 
	::-webkit-scrollbar-track {
		background: #888;
	}*/

	/* Handle 
	::-webkit-scrollbar-thumb {
		background: #005680; 
	}*/

	/* Handle on hover 
	::-webkit-scrollbar-thumb:hover {
		background:#555; 
	}*/

    body{
        font-size: 16px;
        background-color: #151518;
        color: #ccc;
        overflow: hidden;
    }
    body.loaded{
		overflow: visible;
    }
    :root {
		scroll-behavior: unset !important;
	}
	h1{
		font-size: 3rem;
	}
	h2{
		font-size: 2.5rem;
	}
	body, a:hover, button:hover{cursor: none !important;}

	.hover-cursor-icon::before{
		content: "•";
		display: flex;
		color: #151518;
		font-size: 2rem;

	}
	.hover-cursor-icon svg{
		display: none;
	}
	a{
		color: var( --e-global-color-primary );
		text-decoration: none;
	}
	.comments-area a, .page-content a{
		text-decoration: none;
	}
	.pwgd-post-grid-item-btn{
		transition: linear .3s all;
	}
	.pwgd-post-grid-item-btn:hover{
		color: var( --e-global-color-primary ) !important;
		background-color: transparent !important;
		background-image: linear-gradient(-140deg, var( --e-global-color-primary ) -100%, #FFFFFF03 70%) !important;
	}
	.page-content-footer{
		padding: 4rem 0;
	}



/*
    header
*/
	.hfe-site-logo-img{
		position: fixed;
		top: 2rem;
		left: 2rem;
		z-index: 10;
	}
	.navToggle{
		border-bottom: none !important;
		cursor: pointer;
		right: 2em;
		position: fixed;
		top: 2em;
		z-index: 5;
		line-height: 0;
		display: block;
		width: 50px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50px;
		padding: 5px;
	}
	.navToggle {
		fill: #f2f2f2;
		stroke: #f2f2f2;
		color: #f2f2f2;
	}
	.navToggle svg line {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		-webkit-transition: -webkit-transform 0.5s ease;
		transition: transform 0.5s ease;
	}
	.navToggle svg .first {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.navToggle svg .second {
		-webkit-transition: opacity 0.2s ease;
		transition: opacity 0.2s ease;
	}
	.navToggle svg .third {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	.navToggle.active svg .first {
		-webkit-transform: translate(8.8px, 0.5px) rotate(45deg);
		transform: translate(8.8px, 0.5px) rotate(45deg);
	}
	.navToggle.active svg .second {
		opacity: 0;
	}
	.navToggle.active svg .third {
		-webkit-transform: translate(-11px, 9px) rotate(-45deg);
		transform: translate(-11px, 9px) rotate(-45deg);
	}

	/*Single header*/
		.page-header{
			height: 80vh;
			align-items: center;
			display: flex;
			max-height: 500px;
			position: relative;
			margin-bottom: 3rem;
		}
		.page-header figure{
			position: absolute;
			height: 100%;
			width: 100%;
			overflow: hidden;
			z-index: -1;
			display: flex;
			margin: 0;
		}
		.page-header figure::after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: .3;
		}
		.page-header figure img{
			width: 100%;
			object-fit: cover;
		}

		.post-details{
			display: flex;
			margin-bottom: 1.5rem;
			font-size: .85rem;
			font-weight: 500;
			color: #aaa;
			align-items: center;
			line-height: 0;
		}
		.post-details > div {
			align-items: center;
			display: inline-flex;
		}
		.post-details .icon{
			font-size: .9rem;
			color: #999;
			padding-right: .2rem;
			padding-left: .6rem;
		}
		.post-details .icon.icon-calendar2{
			padding-left: 0;
		}

		.related-posts {
			background: #0000004f;
			padding: 2rem 0;
		}
		.related-posts .yarpp-related h3{
			font-size: 1.75rem;
			padding: 0;
			margin-bottom: 1rem;
		}
		.related-posts .yarpp-thumbnails-horizontal{
			display: flex;
			flex-wrap: wrap;
		}
		.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail{
			width: 24%;
			margin: .5%;
			border: none;
			position: relative;
			height: auto;
			overflow: hidden;
		}
		.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail::after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			opacity: .3;
			z-index: 0;
		}
		.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail img{
			width: 100%;
			object-fit: cover;
			margin: 0;
			transition: linear all 3s;
		}
		.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail:hover img{
			transform: scale(1.1);
		}
		
		.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail .yarpp-thumbnail-title{
			position: absolute;
			bottom: 0;
			left: 0;
			color: #efefef;
			z-index: 1;
			padding: 1rem;
			font-size: 18px;
			font-weight: 400;
			line-height: 28px;
			z-index: 1;
		}
		.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail:hover .yarpp-thumbnail-title{
			color: 
		}

		.comments-section{
			padding-top: 3rem;
		}
		.comments-section #reply-title{
			font-size: 1.75rem;
			margin-bottom: 1rem;
		}
/*
    Navigation principale
*/
	#navigation-principale{
		display: flex;
		height: 100%;
		opacity: 0;
		overflow: hidden;
		position: fixed;
		text-align: center;
		-webkit-transition-duration: 0.5s;
		transition-duration: 0.5s;
		-webkit-transition-property: opacity, visibility;
		transition-property: opacity, visibility;
		width: 100%;
		vertical-align: middle;
		visibility: hidden;
		z-index: 4;
	}
	#navigation-principale.active{
		opacity: 1;
		visibility: visible;
	}
	#navigation-principale .menu{
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	#navigation-principale.active .menu .menu-item {
		-webkit-animation: fadeInSlideIn 0.5s forwards;
		animation: fadeInSlideIn 0.5s forwards;
	}
	#navigation-principale .menu-item {
		margin: 0.5rem 0;
	}
	#navigation-principale a {
		font-size: 2rem;
	}
	#navigation-principale a {
		color: #f2f2f2;
		border-bottom: 1px solid rgba(242, 242, 242, 0);
		-webkit-transition: border 0.2s ease;
		transition: border 0.2s ease;
		padding-bottom: 5px;
	}

	#navigation-principale .current-menu-item a{
		border-bottom: 4px solid;
	}
	#navigation-principale a:hover{
		border-bottom: 4px solid;
	}

/*
    home
*/
    /*.typewriter{
        text-align: center;
        color: #fff;
        font-size: 5rem;
        font-weight: 700;
    }*/

    .scroll-down a{
		padding-top: 60px;
		/*position: absolute;*/
		display: inline-block;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 0;
		width: 40px;
		margin: auto;
	}
	.scroll-down a > span {
		position: absolute;
		top: 0;
		left: 50%;
		width: 30px;
		height: 50px;
		margin-left: -15px;
		border: 2px solid #fff;
		border-radius: 50px;
		box-sizing: border-box;
	  }
	  .scroll-down a > span::before {
		position: absolute;
		top: 10px;
		left: 50%;
		content: '';
		width: 6px;
		height: 6px;
		margin-left: -3px;
		background-color: #fff;
		border-radius: 100%;
		-webkit-animation: sdb10 2s infinite;
		animation: sdb10 2s infinite;
		box-sizing: border-box;
	  }
	 @-webkit-keyframes sdb10 {
		0% {
		  -webkit-transform: translate(0, 0);
		  opacity: 0;
		}
		40% {
		  opacity: 1;
		}
		80% {
		  -webkit-transform: translate(0, 20px);
		  opacity: 0;
		}
		100% {
		  opacity: 0;
		}
	}
	@keyframes sdb10 {
		0% {
		  transform: translate(0, 0);
		  opacity: 0;
		}
		40% {
		  opacity: 1;
		}
		80% {
		  transform: translate(0, 20px);
		  opacity: 0;
		}
		100% {
		  opacity: 0;
		}
	}

	
	/*home-video*/
		.home-video.elementor-widget-video .elementor-custom-embed-image-overlay{
			height: 80vh;
		}
		.home-video.elementor-widget-video .elementor-wrapper{
			aspect-ratio: auto;
			/*aspect-ratio: var(--video-aspect-ratio);*/
		}
	
	/*PORTFOLIO*/

	.elpt-portfolio-content.simple .portfolio-item-infos-wrapper{
		z-index: 3;
	}
	.elpt-portfolio-filter{}
	.elpt-portfolio-filter button.portfolio-filter-item{
		background-color: transparent;
		background-image: linear-gradient(140deg, #FFFFFF11 0%, #FFFFFF05 70%);
		border-radius: 10px;
		padding: .8rem 1.5rem;
		margin-left: 5px;
		margin-right: 5px;
	}
	.elpt-portfolio-filter button.portfolio-filter-item:hover,
	.elpt-portfolio-filter button.portfolio-filter-item.item-active{
		color: var( --e-global-color-primary );
		background-color: transparent;
		background-image: linear-gradient(-140deg, #551EB030 0%, #FFFFFF03 70%);
	}	
	.elpt-portfolio-content .portfolio-item-infos-wrapper{
		display: flex;
		align-items: end;
		font-family: 'Abel';
	}
	.elpt-portfolio-content .portfolio-item-infos{
		text-align: left;
		top: initial;
		bottom: -25%;
	}
	.elpt-portfolio-content.simple .portfolio-item:hover .portfolio-item-infos{
		bottom: 0;
	}
	.elpt-portfolio-content .portfolio-item-title{
		font-size: 1.5rem;
	}
	.elpt-portfolio-content .portfolio-item-category{
		font-size: 1rem;
	}
	
	main.elemenfolio {
		padding-top: 100px;
	}
	main.elemenfolio .page-content-footer{
		padding-bottom: 0px;
	}
	.portfolio-sidebar {
		color: #aaa;
	}
	.portfolio-sidebar h1{
		color: #eee;
	}
	.portfolio-sidebar .description{
		margin-bottom: 1rem;
	}
	
	.portfolio-details{}

	.portfolio-details > div{
		display: flex;
		justify-content: space-between;
		margin: 0 0 .5rem;
		padding: 5px 0;
		border-bottom: 1px solid #333;
	}
	.portfolio-details .label{}
	.portfolio-details .value{}

	/*about*/
	.logo-client .swiper-slide-inner {
		padding: 1rem 1rem 1rem 1rem;
		background-color: transparent;
		background-image: linear-gradient(140deg, #ffffff33 0%, #fffffff5 70%);
		border-radius: 15px 15px 15px 15px;
	}

	.page-addtoany .addtoany_shortcode{
		position: fixed;
		right: 0;
		top: 44vh;
		width: 36px;
		height: 42px;
		overflow: hidden;
		border-width: 1px 0 1px 1px;
		border-style: solid;
		border-radius: 5px 0 0 5px;
		padding: 6px 0;
		z-index: 3;
		background: #22222294;
		border-color: #555;
		transition: linear .3s all;
	}
	.page-addtoany .addtoany_shortcode:hover{
		height: 155px;
	}
	.page-addtoany .addtoany_shortcode::before{
		content: "\f1e0";
		font-weight: 900;
		font-family: "Font Awesome 5 Free";
		margin: auto auto 5px;
		width: 16px;
		display: block;
		font-size: 20px;
	}



/*
	Page Blog
*/
	.smblog_masonry_numcol .grid-sm-border{
		border: none;
		overflow: hidden;
		position: relative;
	}
	.smblog_masonry_numcol .sm-grid-boxes-caption{
		padding: 1rem;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.smblog_masonry_numcol .sm-grid-boxes-caption{

	}
	.smblog_masonry_numcol .grid-sm-border > a{
		display: block;
		position: relative;
		overflow: hidden;
	}
	.smblog_masonry_numcol .grid-sm-border > a::after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.smblog_masonry_numcol .grid-sm-border .sm-post-title a{
		color: #ddd;
		font-weight: 500;
	}
	.sm-grid-boxes-news .sm-meta-part a{color: #aaa;}
	.sm-meta-date i{display: none;}
	
	.sm-grid-boxes-quote{
		display: none;
	}
	.grid-sm-border img {
		opacity: 0.5;
		transition: 3s all;
	}
	.grid-sm-border > a:hover  img {
		transform: scale(1.1);
	}

	.addtoany-container{
		display: flex;
		margin: 1rem 0;
	}
	.addtoany-container h3{
		font-weight: 700;
	}

/*CONTACT*/
	.btn-submit{
		display: flex;
		margin-top: 1rem;
		justify-content: flex-end;
		position: relative;
	}
	.btn-submit input{
		line-height: 1;
	}
	.btn-submit .wpcf7-spinner{
		position: absolute;
		top: 15px;
		right: -30px;
		margin: 0;
		background-color: #888;
	}


/*FOOTER*/
	#loader > div {
		position: fixed;
		width: 100vw;
		height: 100vh;
		max-width: inherit;
		background: #151518;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10000;
		opacity: 1;
		transition: linear .3s all;
	}
	#loader > div img{
		width: 70px;
		border-radius: 100px;
		animation-name: clign;
		animation-duration: 1.5s;
		animation-iteration-count: infinite;
	}
	@keyframes clign {
		0%    {opacity:0.1;}
		10%   {opacity:.2;}
		20%   {opacity:.4;}
		30%   {opacity:.6;}
		40%   {opacity:.8;}
		50%   {opacity: 1;}
		60%   {opacity:.8;}
		70%   {opacity:.6;}
		80%   {opacity:.4;}
		90%   {opacity:.2;}
		100%  {opacity:0.05;}
	}
	body.loaded #loader > div {
		top: -100%;
		opacity: 0;
	}

/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Desktop
--------------------------------------------------------------*/
@media only screen and (min-width: 1400px) {
	
}

@media only screen and (max-width: 1280px) {
	
}

@media screen and (max-width: 1199px) {
	.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail{
		width: 50%;
		max-width: 400px;
		margin: 1rem auto;
	}
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
	.elpt-portfolio-content .portfolio-item-infos{
		bottom: 0;
	}
	.elpt-portfolio-content.simple .portfolio-item .portfolio-item-infos{
		opacity: 1;
	}
	.elpt-portfolio-content.simple .portfolio-item .portfolio-item-infos-wrapper{
		opacity: .95;
	}
	.page-addtoany .addtoany_shortcode{
		height: auto;
		top: 36vh;
	}
}



/*--------------------------------------------------------------
## Tablette
--------------------------------------------------------------*/
@media only screen and (max-width: 979px) { /*960*/
	
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail{
		max-width: 320px;
	}
}
/*--------------------------------------------------------------
## 
--------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
	

}
/*--------------------------------------------------------------
## 
--------------------------------------------------------------*/

@media only screen and (max-width: 768px) {
	
}

/*--------------------------------------------------------------
## 
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
	.related-posts .yarpp-thumbnails-horizontal .yarpp-thumbnail{
		width: 100%;
		max-width: 320px;
	}
}

/*--------------------------------------------------------------
## 
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
	
}