/*! ------------------------------------------------
 * Project Name: Crispio - Coming Soon & Landing Page Template for Creatives
 * Project Description: Crispio is bold and creative coming soon, personal portfolio and landing page HTML template and fits perfectly for everyone in the creative industry.
 * Tags: mix_design, crispio, coming soon, under construction, template, coming soon page, landing page, one page, html5, css3
 * Version: 2.0.2
 * Build Date: April 2019
 * Last Update: January 2024
 * This product is available exclusively on Themeforest
 * Author: mix_design
 * Author URI: https://themeforest.net/user/mix_design
 * File name: color-1.css
 * ------------------------------------------------
 *
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  1. Base Template Colors
 *  2. Typography Colors
 *  3. Buttons & Triggers Colors
 *  4. Forms and Forms Reply Groups Colors
 *  5. Main Section Colors
 *  6. Menu Colors
 *  7. Countdown Colors
 *  8. Swiper Slider Custom Colors
 *  9. Popup Dialogs Colors
 *  10. Content Section Colors
 *  11. Custom Skillbars Colors
 *  12. Team Block Colors
 *  13. Contact Data Colors
 *  14. Google Map Colors
 *  15. Gallery Custom Colors
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */
/* ------------------------------------------------*/
/* Base Template Colors Start */
/* ------------------------------------------------*/
::-moz-selection {
    background-color: #606C38;
    color: #ffffff;
}

::selection {
    background-color: #606C38;
    color: #ffffff;
}

::-webkit-scrollbar {
    background: #303030;
}

::-webkit-scrollbar-track {
    background-color: #303030;
}

::-webkit-scrollbar-thumb {
    background-color: #606C38;
    background: -webkit-gradient(linear, left top, left bottom, from(#606C38), to(#264653));
    background: linear-gradient(to bottom, #606C38 0%, #264653 100%);
}

body {
    color: rgba(255, 255, 255, 0.7);
    background-color: #191919;
}

.color-layer-black-04 {
    background-color: rgba(0, 0, 0, 0.4);
}

.color-layer-dark-gradient {
    background: -moz-linear-gradient(315deg, rgba(41, 8, 58, 0.6) 0%, rgba(10, 62, 74, 0.6) 100%);
    background: -o-linear-gradient(315deg, rgba(41, 8, 58, 0.6) 0%, rgba(10, 62, 74, 0.6) 100%);
    background: linear-gradient(135deg, rgba(41, 8, 58, 0.6) 0%, rgba(10, 62, 74, 0.6) 100%);
}

/* ------------------------------------------------*/
/* Base Template Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Typography Colors Start */
/* ------------------------------------------------*/
h1 {
    color: #ffffff;
}

.headline__text {
    color: rgba(255, 255, 255, 0.7);
}

h2 {
    color: #ffffff;
}

.section-title__subtitle {
    color: #ffffff;
}

.section-title__subtitle .line {
    background-color: #ffffff;
}

h3 {
    color: #ffffff;
}

h3 small {
    color: #ffffff;
}

h3 small .line {
    background-color: #ffffff;
}

h5 {
    color: #ffffff;
}

p {
    color: rgba(255, 255, 255, 0.7);
}

p span {
    color: #ffffff;
}

.image__caption p {
    color: #111111;
    background-color: #ffffff;
}

.image__caption span {
    color: #111111;
    background-color: #ffffff;
}

.contact-content p {
    color: #111111;
}

.contact-content p a {
    color: #111111;
}

.no-touch .contact-content p a:hover {
    color: #606C38;
}

.socials-menu li a {
    color: #ffffff;
}

.no-touch .socials-menu li:hover a {
    color: #606C38;
}

.popup-title__title {
    color: #111111;
}

.popup-title__title.light {
    color: #ffffff;
}

.popup-title__text.light {
    color: rgba(255, 255, 255, 0.7);
}

blockquote .quote {
    color: #ffffff;
}

blockquote p {
    color: #ffffff;
}

blockquote cite {
    color: #ffffff;
}

/* ------------------------------------------------*/
/* Typography Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Buttons & Triggers Colors Start */
/* ------------------------------------------------*/
.menu-trigger.dark span::before,
.menu-trigger.dark span::after {
    background-color: #191919;
}

.menu-trigger span::before,
.menu-trigger span::after {
    background-color: #ffffff;
}

.menu-close::before,
.menu-close::after,
.popup-close::before,
.popup-close::after {
    background-color: #ffffff;
}

.no-touch .menu-close:hover::before,
.no-touch .menu-close:hover::after,
.no-touch .popup-close:hover::before,
.no-touch .popup-close:hover::after {
    background-color: rgba(255, 255, 255, 0.6);
}

.btn-s {
    color: #ffffff;
}

.btn-s .title {
    color: #ffffff;
}

.btn-s .hover {
    color: #606C38;
    background: -webkit-linear-gradient(-45deg, #606C38 0%, #264653 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-l .btn-caption {
    color: #ffffff;
}

.btn-l .btn-border {
    border: 1px solid #ffffff;
}

.btn-l .btn-hover {
    background: -moz-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: -o-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: linear-gradient(135deg, #606C38 0%, #264653 100%);
}

.no-touch .btn-l:hover .btn-caption {
    color: #111111;
}

.section-close {
    color: #ffffff;
    background: -moz-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: -o-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: linear-gradient(135deg, #606C38 0%, #264653 100%);
}

/* ------------------------------------------------*/
/* Buttons & Triggers Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Forms and Forms Reply Groups Colors Start */
/* ------------------------------------------------*/
.form-light input,
.form-light textarea {
    font-weight: 300;
}

.form-light ::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-light :-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-light ::-moz-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-light :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.form-light input:focus:required:invalid,
.form-light textarea:focus:required:invalid {
    color: #ffffff;
}

.form-light input:required:valid,
.form-light textarea:required:valid {
    color: #ffffff;
}

.form-light input,
.form-light textarea {
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
}

.form-light input:focus,
.form-light textarea:focus {
    border-bottom: 1px solid #606C38;
}

.form-light .inputs-description {
    color: rgba(255, 255, 255, 0.6);
}

.reply-group__icon {
    color: rgba(255, 255, 255, 0.4);
}

.reply-group__icon::before {
    background: -webkit-linear-gradient(-45deg, #606C38 0%, #264653 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.reply-group__title {
    color: #111111;
}

.reply-group__title.light {
    color: #ffffff;
}

.reply-group__text {
    color: #111111;
}

.reply-group__text.light {
    color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------*/
/* Forms and Forms Reply Groups Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Main Section Colors Start */
/* ------------------------------------------------*/
.header__container {
    background-color: #191919;
}

.main__intro {
    background-color: #191919;
}

.intro__socials {
    background-color: #ffffff;
}

.socials li a {
    color: #111111;
}

.no-touch .socials li:hover a {
    color: #606C38;
}

/* ------------------------------------------------*/
/* Main Section Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Menu Colors Start */
/* ------------------------------------------------*/
.menu {
    background-color: transparent;
}

.navigation__container {
    background-color: #121212;
}

.navigation li a {
    color: #ffffff;
}

.navigation li a .title {
    color: #ffffff;
}

.navigation li a .hover {
    color: #606C38;
    background: -webkit-linear-gradient(-45deg, #606C38 0%, #264653 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.photo-container {
    background-color: #000000;
}

.menu-media__contact .contact-container {
    background-color: #ffffff;
}

.menu-media__socials .socials-container {
    background-color: #191919;
}

/* ------------------------------------------------*/
/* Menu Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Countdown Colors Start */
/* ------------------------------------------------*/
.countdown.countdown-days {
    text-align: right;
}

.countdown.countdown-days #countdown {
    color: #111111;
    background-color: #ffffff;
}

.countdown.countdown-days .help-text {
    color: #111111;
    background-color: #ffffff;
}

/* ------------------------------------------------*/
/* Countdown Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Swiper Slider Custom Colors Start */
/* ------------------------------------------------*/
.slide-caption {
    color: #ffffff;
}

.slide-caption span {
    color: #111111;
    background-color: #ffffff;
}

.slide-caption span .line {
    background-color: #191919;
}

.slide-caption p {
    color: #111111;
    background-color: #ffffff;
}

.slider-controls {
    background: -moz-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: -o-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: linear-gradient(135deg, #606C38 0%, #264653 100%);
}

.main-swiper-control {
    color: #ffffff;
}

/* ------------------------------------------------*/
/* Swiper Slider Custom Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Popup Dialogs Colors Start */
/* ------------------------------------------------*/
.popup {
    background-color: #121212;
}

/* ------------------------------------------------*/
/* Popup Dialogs Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Inner Section Colors Start */
/* ------------------------------------------------*/
.inner {
    background-color: transparent;
}

.inner__info {
    background-color: #191919;
}

.media__wrapper {
    background-color: #191919;
}

/* ------------------------------------------------*/
/* Inner Section Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Custom Skillbars Colors Start */
/* ------------------------------------------------*/
.skillbar {
    border-bottom: 4px solid rgba(255, 255, 255, 0.1);
}

.skillbar-title {
    color: #ffffff;
}

.skillbar-bar {
    background: -webkit-gradient(linear, left top, right top, from(#606C38), to(#264653));
    background: -moz-linear-gradient(left, #ff2121 0%, #264653 100%);
    background: -o-linear-gradient(left, #606C38 0%, #264653 100%);
    background: linear-gradient(to right, #606C38 0%, #264653 100%);
}

.skill-bar-percent {
    color: #ffffff;
}

/* ------------------------------------------------*/
/* Custom Skillbars Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Team Block Colors Start */
/* ------------------------------------------------*/
.team__socials li a {
    color: rgba(255, 255, 255, 0.4);
}

.no-touch .team__socials li:hover a {
    color: #606C38;
}

/* ------------------------------------------------*/
/* Team Block Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Contact Data Colors Start */
/* ------------------------------------------------*/
.contact-data__item i {
    color: #ffffff;
}

.contact-data__item p {
    color: rgba(255, 255, 255, 0.7);
}

.contact-data__item p a {
    color: rgba(255, 255, 255, 0.7);
}

.no-touch .contact-data__item p a:hover {
    color: #606C38;
}

.contact-data__item ul a {
    color: rgba(255, 255, 255, 0.7);
}

.no-touch .contact-data__item ul li:hover a {
    color: #606C38;
}

/* ------------------------------------------------*/
/* Contact Data Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Google Map Colors Start */
/* ------------------------------------------------*/
#zoom-in,
#zoom-out {
    color: #ffffff;
    background: -moz-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: -o-linear-gradient(315deg, #606C38 0%, #264653 100%);
    background: linear-gradient(135deg, #606C38 0%, #264653 100%);
}

#zoom-in .btn-icon,
#zoom-out .btn-icon {
    color: #ffffff;
}

/* ------------------------------------------------*/
/* Google Map Colors End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Gallery Custom Colors Start */
/* ------------------------------------------------*/
.my-gallery__description h4 {
    color: #111111;
    background-color: #ffffff;
}

.my-gallery__description span {
    color: #111111;
    background-color: #ffffff;
}

.pswp__caption__center h4 {
    color: #ffffff;
}

.pswp__caption__center span {
    color: rgba(255, 255, 255, 0.8);
}

.pswp__caption__center p {
    color: rgba(255, 255, 255, 0.4);
}

.pswp__bg {
    background: #191919;
}

.pswp__caption,
.pswp__top-bar {
    background-color: rgba(0, 0, 0, 0.3);
}

.pswp__button--close {
    background-color: #ffffff;
}

/* ------------------------------------------------*/
/* Gallery Custom Colors End */
/* ------------------------------------------------*/