/* --------------------------------------------------------------------
*
* Template dark style stylesheet
* 
* Template:		Hektor - Creative Agency and Portfolio HTML Website Template
* Author:		Themetorium
* URL:			https://themetorium.net/
*
-------------------------------------------------------------------- */


/* Table of Content
====================
*
* Global variables
* Style switch button
* General
* Logo
* Page header
* If class "tt-section-bg-on" is enabled on parent element
* Logo wall
* Content carousel 
* Testimonials list
*
*/ 


/* ------------------------------------------------------------- *
 * Global variables
 * Please note that the dark and light colors are reversed. Dark colors are light and light colors are dark!
/* ------------------------------------------------------------- */

body.tt-dark-mode-on {
	/* General */
	--tt-dark-color: #e3e0d8; /* Template light color. #e3e0d8 */
	--tt-light-color: #16171a; /* Template dark color. #16171a */

	--tt-bg-color: #16171a; /* Template background color. #16171a */
	--tt-accent-bg-color: #16171a; /* Template background color. #16171a */
	--tt-text-color: #e3e0d8; /* Template text color. #e3e0d8 */
	--tt-text-muted-color: #666; /* Template text muted color. #666 */
	--tt-border-color: #e3e0d8; /* Template borders color. #e3e0d8 */
	--tt-shadow-color: #e3e0d8; /* Template borders color. #e3e0d8 */

	/* Page transition */
	--tt-page-trans-overlay-bg-color: #1c1e21; /* Page transition overlay background color. #1c1e21 */

	/* Cursor ball */
	--tt-ball-border-color: #999; /* Ball border color. #999 */
}


/* ------------------------------------------------------------- *
 * Style switch button
/* ------------------------------------------------------------- */

.tt-style-switch {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-left: 40px;
}
@media (max-width: 1024px) {
	.tt-style-switch {
		margin-left: 0;
		margin-right: 20px;
	}
}

.tt-style-switch-inner {
	width: 36px;
	height: 36px;
	padding: 4px;
	line-height: 1;
	font-size: 15px;
	cursor: pointer;
	border-radius: 100%;
	transition: background-color .3s, color .3s;
}
.tt-style-switch-inner:hover {
}

.tt-style-switch svg {
	display: block;
	width: 100%;
	height: auto;
	fill: none;
	stroke: var(--tt-dark-color);
}
body.ph-image-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-style-switch svg,
body.ph-video-on.tt-ph-visible:not(.ph-bg-is-light-on) #tt-header:not(.tt-filled) .tt-style-switch svg {
	stroke: var(--tt-force-to-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-style-switch svg {
	stroke: var(--tt-light-color);
}

.tt-stsw-dark {
	display: none;
}
body.tt-dark-mode-on .tt-stsw-dark {
	display: block;
}
body.tt-dark-mode-on .tt-stsw-light {
	display: none;
}

/* If header layout-2 is enabled. */
#tt-header.tt-header-alter .tt-style-switch {
}
@media (max-width: 1024px) {
	#tt-header.tt-header-alter .tt-style-switch {
		margin-left: 0;
		margin-right: 25px;
	}
}

/* If portfolio slider is enabled. */
body.tt-portfolio-slider-on:not(.tt-m-menu-open) .tt-style-switch {
	display: none;
}


/* ------------------------------------------------------------- *
 * General
/* ------------------------------------------------------------- */

/* Selection */
body.tt-dark-mode-on ::selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color);
}
body.tt-dark-mode-on ::-moz-selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Firefox */
}
body.tt-dark-mode-on ::-webkit-selection {
	color: var(--tt-dark-color);
	-webkit-text-fill-color: var(--tt-dark-color);
	text-shadow: none;
	background: var(--tt-main-color); /* Safari */
}


/* ------------------------------------------------------------- *
 * Logo
/* ------------------------------------------------------------- */

body.tt-dark-mode-on .tt-logo-dark {
	display: none;
}
body.tt-dark-mode-on .tt-logo-light {
	display: block;
}


/* ------------------------------------------------------------- *
 * Page header
/* ------------------------------------------------------------- */

body.tt-dark-mode-on.ph-image-on:not(.ph-bg-is-light-on) .tt-sd-arrow svg, 
body.tt-dark-mode-on.ph-video-on:not(.ph-bg-is-light-on) .tt-sd-arrow svg {
	fill: var(--tt-light-color);
}


/* If the page header background image is light (effect only if the image exist)
================================================ */
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) {
	color: var(--tt-light-color);
}

/* Make logo dark */
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-light {
	display: none;
}
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-logo-dark {
	display: block;
}

/* Make menu items dark (for desctop only) */
@media (min-width: 1025px) {
	body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > a, 
	body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > .tt-submenu-trigger > a {
		color: var(--tt-light-color);
	}
	body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > a:hover, 
	body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li > .tt-submenu-trigger > a:hover,
	body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li.active > a, 
	body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible #tt-header:not(.tt-filled) .tt-main-menu-list > li.active > .tt-submenu-trigger > a {
		box-shadow: inset 0 0 0 2px var(--tt-light-color), 2px 4px 0 -1px var(--tt-light-color);
	}
}

/* Make mobile menu trigger dark */
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn-text {
	color: var(--tt-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::before, 
body.tt-dark-mode-on.ph-bg-is-light-on.tt-ph-visible:not(.tt-m-menu-active) #tt-header:not(.tt-filled) .tt-m-menu-toggle-btn span::after {
	background-color: var(--tt-light-color);
}

/* Make header buttons dark */
@media (min-width: 1025px) { 
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary {
		background-color: var(--tt-light-color);
	}
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary > *, 
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-secondary > *::after {
		color: var(--tt-dark-color);
	}
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-light-color);
	}
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline > *, 
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-outline > *::after {
		color: var(--tt-light-color);
	}
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-link > *, 
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-link > *::after {
		color: var(--tt-light-color);
	}
	body.tt-dark-mode-on.ph-bg-is-light-on #tt-header:not(.tt-filled) .tt-btn-line {
		background-color: var(--tt-light-color);
	}
}

/* Make page header elements dark */
body.tt-dark-mode-on.ph-bg-is-light-on #page-header,
body.tt-dark-mode-on.ph-bg-is-light-on #page-header a {
	color: var(--tt-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on .tt-sd-inner {
	background-color: var(--tt-light-color);
	color: var(--tt-dark-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on .tt-sd-arrow svg {
	fill: var(--tt-dark-color);
}

body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-social-buttons > ul > li a {
	color: var(--tt-light-color);
}

body.tt-dark-mode-on.ph-bg-is-light-on .ph-share-trigger,
body.tt-dark-mode-on.ph-bg-is-light-on .ph-share-buttons > ul > li a {
	color: var(--tt-light-color);
}

/* Make page header buttons dark */
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-secondary {
	background-color: var(--tt-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-secondary > *, 
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-secondary > *::after {
	color: var(--tt-dark-color);
}

body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-outline {
	box-shadow: inset 0 0 0 2px var(--tt-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-outline > *, 
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-outline > *::after {
	color: var(--tt-light-color);
}

body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner {
	color: var(--tt-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner:hover, 
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-big-round-ptn-inner:focus {
	color: #FFF;
}

body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-link > *, 
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-link > *::after {
	color: var(--tt-light-color);
}
body.tt-dark-mode-on.ph-bg-is-light-on #page-header .tt-btn-line {
	background-color: var(--tt-light-color);
}


/* ------------------------------------------------------------- *
 * If class "tt-section-bg-on" is enabled on parent element
/* ------------------------------------------------------------- */

body.tt-dark-mode-on .tt-section-bg-on {
	color: var(--tt-dark-color);
}


/* ------------------------------------------------------------- *
 * Logo wall
/* ------------------------------------------------------------- */

body.tt-dark-mode-on .tt-lv-img-dark {
	display: none;
}
body.tt-dark-mode-on .tt-lv-img-light {
	display: block;
}


/* ------------------------------------------------------------- *
 * Content carousel 
/* ------------------------------------------------------------- */

body.tt-dark-mode-on .tt-content-carousel.cc-pagination-outside:not(.tt-cc-hide-pagination) .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
	background-color: var(--tt-light-color);
}
body.tt-dark-mode-on .tt-content-carousel.cc-pagination-outside:not(.tt-cc-hide-pagination) .tt-cc-pagination-fraction {
	color: var(--tt-light-color);
}
body.tt-dark-mode-on .tt-content-carousel.tt-cc-pagination-outside:not(.tt-cc-hide-pagination) .tt-cc-pagination-progressbar {
	background-color: rgba(255, 255, 255, 0.3);
}
body.tt-dark-mode-on .tt-content-carousel.cc-pagination-outside:not(.tt-cc-hide-pagination) .tt-cc-pagination-progressbar .swiper-pagination-progressbar-fill {
	background-color: var(--tt-light-color);
}


/* ------------------------------------------------------------- *
 * Testimonials list
/* ------------------------------------------------------------- */

body.tt-dark-mode-on .tt-tli-inner {
	background-color: #202226;
}