/*   
Theme Name: Starterpistol
Author: Anthony Ramirez
Author URI: https://www.ramirezsolutions.com
*/

/****************************************
 Global Styles
****************************************/
body.dark-mode {
	background: var(--background-color-2);
	/* Fallback for when there is no custom background color defined. */
}

body.dark-mode,
.dark-mode p {
	color: #fff;
}

.dark-mode strong {
	color: var(--accent-color);
}

/****************************************
 Accordion
****************************************/
.dark-mode .accordion__title {
	color: var(--copy-2);
}

.dark-mode .accordion__title.is-open {
	color: var(--accent-color-2);
}

.dark-mode .accordion__title span {
  	-webkit-filter: invert(99%) sepia(23%) saturate(114%) hue-rotate(226deg) brightness(117%) contrast(100%);
    filter: invert(99%) sepia(23%) saturate(114%) hue-rotate(226deg) brightness(117%) contrast(100%);
}

.dark-mode .accordion__title.is-open span {
	-webkit-filter: invert(100%) sepia(97%) saturate(1510%) hue-rotate(304deg) brightness(99%) contrast(105%);
    filter: invert(100%) sepia(97%) saturate(1510%) hue-rotate(304deg) brightness(99%) contrast(105%);
}

/****************************************
 Back To Top
****************************************/
.dark-mode .backtotop a {
	background-color: var(--quaternary-color);
}

.dark-mode .backtotop a:before {
    -webkit-filter: none;
    filter: none;
}

/****************************************
 Buttons
****************************************/
.dark-mode a.button--transparent,
.dark-mode .button--transparent {
	background-color: transparent;
	border: 2px solid var(--accent-color);
	border-radius: 30px;
	color: var(--accent-color);
}

.dark-mode a.button--transparent:hover,
.dark-mode .button--transparent:hover {
	background-color: var(--accent-color);
	color: var(--primary-color-2);
}

/****************************************
 Blog
****************************************/
.dark-mode .blog-item--related .content h2 {
	font-size: var(--font-lg);
}

.page-template-blog-template-page.dark-mode .blog__meta,
.page-template-blog-template-page.dark-mode .blog__meta span,
.single.dark-mode .blog__meta,
.single.dark-mode .blog__meta span {
	color: var(--copy-2);
}

/****************************************
 Breadcrumbs
****************************************/
.dark-mode .breadcrumbs a,
.dark-mode .breadcrumbs a:hover,
.dark-mode .breadcrumbs a:focus,
.dark-mode .hero--internal.has-no-image .breadcrumbs a,
.dark-mode .hero--internal.has-no-image .breadcrumbs a:hover,
.dark-mode .hero--internal.has-no-image .breadcrumbs a:focus,
.page-template-referral-program.dark-mode .hero--internal .breadcrumbs a,
.page-template-referral-program.dark-mode .hero--internal .breadcrumbs a:hover,
.page-template-referral-program.dark-mode .hero--internal .breadcrumbs a:focus {
	color: var(--accent-color-2);
}

/****************************************
 Fields & Forms
****************************************/
.dark-mode .gform_footer .gform_button {
	background-color: var(--quaternary-color-2) !important;
	color: #fff !important;
}

.dark-mode .gform_footer .gform_button:hover,
.gform_footer .gform_button:focus { 
  	background-color: #fff !important;
	color: var(--primary-color-2) !important;
}

.dark-mode .gform_wrapper label.gfield_label, 
.dark-mode .gform_wrapper legend.gfield_label {
    color: var(--accent-color-2);
}

/****************************************
 Floating Buttons
****************************************/
.dark-mode .floating-buttons {
	background-color: var(--quaternary-color-2);
}

/****************************************
 Hero
****************************************/
.dark-mode .hero {
	background: var(--primary-color-2);
}

.dark-mode .hero--internal {
	background-color: var(--primary-color-2);
}

.dark-mode .hero h1 {
    color: #fff;
}

.dark-mode .cta--are-you-ready #circle text {
	fill: #fff;
}

.dark-mode .hero--internal #circle text {
	fill: var(--accent-color-2);
}

.dark-mode .cta--are-you-ready #circle img {
	-webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(95deg) brightness(107%) contrast(102%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(95deg) brightness(107%) contrast(102%);
}

.dark-mode .hero--internal #circle img {
	-webkit-filter: invert(95%) sepia(63%) saturate(1775%) hue-rotate(304deg) brightness(105%) contrast(99%);
    filter: invert(95%) sepia(63%) saturate(1775%) hue-rotate(304deg) brightness(105%) contrast(99%);

}

.dark-mode .hero--internal.has-no-image p.description {
	color: var(--copy-2);
}

/****************************************
 Links
****************************************/
.dark-mode a,
.dark-mode .pre-footer a {
	color: var(--link-color-2);
	text-decoration: none;
}

.dark-mode a:hover,
.dark-mode a:focus,
.dark-mode a:active {
    color: var(--link-hover-2);
}

/****************************************
 Mobile Menu
****************************************/
.dark-mode .hamburger,
.dark-mode .hamburger .fas.fa-bars {
	color: #fff;
}

.dark-mode .hamburger.is-fixed,
.dark-mode .hamburger.is-fixed .fas.fa-bars {
	color: #000;
}

/****************************************
 Page
****************************************/
.dark-mode .page__content {
	background-color: var(--tertiary-color-2);
}

.dark-mode .page__content h2,
.dark-mode .page__title h1 {
	color: var(--copy-2);
}

.dark-mode .kt-blocks-info-box-link-wrap {
	background-color: var(--quaternary-color-2);
	border: 1px solid var(--quaternary-color-2);
}

.dark-mode .kt-blocks-info-box-link-wrap:hover {
	background-color: var(--quaternary-color) !important;
	border: 1px solid var(--quaternary-color) !important;
}

.page-template-contact.dark-mode .phone a {
	color: var(--quaternary-color);
}

.page-template-contact.dark-mode .phone a:hover {
	color: #fff;
}

.page-template-contact.dark-mode .page__content .social-media--footer span[class*="socicon-"]:before {
	-webkit-filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(93deg) brightness(104%) contrast(102%);
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(93deg) brightness(104%) contrast(102%);
}

/****************************************
 Pip Nav
****************************************/
.dark-mode .pip-nav ul li.current,
.dark-mode .woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--secondary-color-2);
    color: var(--primary-color-2);
}

.dark-mode .pip-nav ul li a,
.dark-mode .woocommerce nav.woocommerce-pagination ul li a,
.dark-mode .woocommerce nav.woocommerce-pagination ul li span {
	color: var(--copy-2);
}

.dark-mode .pip-nav ul li a:hover, 
.dark-mode .pip-nav ul li a:focus,
.dark-mode .woocommerce nav.woocommerce-pagination ul li a:focus,
.dark-mode .woocommerce nav.woocommerce-pagination ul li a:hover {
	background-color: var(--link-hover-2);
	color: var(--copy-2);
}

/****************************************
 Pre-footer
****************************************/
.dark-mode .pre-footer {
	background-color: transparent;
}

.dark-mode .pre-footer ul.two-column li a:hover {
	color: var(--link-hover-2);
}

.dark-mode .pre-footer a {
	color: #fff;
}

.dark-mode .pre-footer a:hover {
	color: var(--link-color-2);
}

/****************************************
 Sections
****************************************/
.dark-mode .section h3 {
	color: var(--accent-color-2);
}

.dark-mode .section--blogs,
.dark-mode .section--statistics {
	background-color: var(--tertiary-color-2);
}

.dark-mode .section--statistics .numbers ul.two-column li {
	color: var(--accent-color-2);
}

.dark-mode .section--statistics .numbers ul.two-column li label {
	color: #fff;
}

.dark-mode .section--how-it-works {
	background-color: var(--quaternary-color-2);
}

.dark-mode .section--how-it-works .column-half.one {
	border-right: 1px solid #eee;
}

/****************************************
 Slider
****************************************/
.dark-mode .slider--testimonial-item {
    background-color: var(--quaternary-color-2);
}

.dark-mode .sap_owl_theme .owl-dots .owl-dot span {
	background-color: var(--accent-color-2) !important;
}

.sap_owl_theme .owl-dots .active span {
	background-color: var(--accent-color-2) !important;
}

/****************************************
 Site
****************************************/
.dark-mode .site-footer {
	background-color: transparent;
}

.dark-mode .site-menu--mobile,
.dark-mode .site-menu__close,
.dark-mode .mobile-menu ul li a {
    background-color: var(--primary-color-2);
}

.dark-mode .mobile-menu ul li a:hover {
    background-color: var(--tertiary-color-2);
}

.dark-mode .site-menu--mobile ul.sub-menu,
.dark-mode .mobile-menu ul li.menu-item-has-children ul.sub-menu li a {
    background-color: var(--link-hover-2);
	color: #000;
}

.dark-mode .mobile-menu ul li.menu-item-has-children ul.sub-menu li a:hover,
.dark-mode .mobile-menu ul li.menu-item-has-children ul.sub-menu li a:focus {
    background-color: #eee;
}

.dark-mode .site-menu--mobile ul.sub-menu li a {
	color: #000;
}

.dark-mode .site-logo img {
	-webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(10%) saturate(6445%) hue-rotate(191deg) brightness(115%) contrast(93%);
    filter: brightness(0) saturate(100%) invert(100%) sepia(10%) saturate(6445%) hue-rotate(191deg) brightness(115%) contrast(93%);
}

/****************************************
 Site Header
****************************************/
.dark-mode .site-header.is-fixed .logo--is-scrolling {
    height: 40px;
}

.dark-mode .site-header.is-fixed .site-logo img {
	-webkit-filter: brightness(0) saturate(100%) invert(9%) sepia(19%) saturate(2972%) hue-rotate(241deg) brightness(89%) contrast(98%);
    filter: brightness(0) saturate(100%) invert(9%) sepia(19%) saturate(2972%) hue-rotate(241deg) brightness(89%) contrast(98%);
}

/****************************************
 Social Icons
****************************************/

.page-template-contact.dark-mode .page__content .social-media--footer span[class*="socicon-"]:hover:before,
.dark-mode span[class*="socicon-"]:hover:before {
	-webkit-filter: invert(92%) sepia(56%) saturate(2671%) hue-rotate(291deg) brightness(105%) contrast(107%);
    filter: invert(92%) sepia(56%) saturate(2671%) hue-rotate(291deg) brightness(105%) contrast(107%);
}

.dark-mode .share-buttons .a2a_svg svg {
  	-webkit-filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(142deg) brightness(102%) contrast(102%);
    filter: invert(100%) sepia(1%) saturate(0%) hue-rotate(142deg) brightness(102%) contrast(102%);
}

.dark-mode .share-buttons .a2a_svg svg:hover {
	-webkit-filter: invert(71%) sepia(5%) saturate(1292%) hue-rotate(270deg) brightness(94%) contrast(92%);
    filter: invert(71%) sepia(5%) saturate(1292%) hue-rotate(270deg) brightness(94%) contrast(92%);
}

/****************************************
 Team Members
****************************************/
.dark-mode .team-members h3 {
	color: var(--accent-color-2);
}

/****************************************
 Work
****************************************/
.dark-mode .work-item a.button--secondary-color,
.dark-mode .work-item .button--secondary-color {
	background-color: var(--secondary-color-2);
    color: var(--copy) !important;
}

.dark-mode .work-item a.button--secondary-color:hover,
.dark-mode .work-item .button--secondary-color:hover {
	background-color: var(--link-hover-2);
}

/****************************************
 Media Queries
****************************************/
@media only screen and (max-width: 750px) {
	.dark-mode .section--how-it-works .column-half.one {
		border-bottom: 1px solid #fff;
		border-right: 0;
	}
}