/* Определение переменных для цвета в корне документа */
:root {
  --back_basic_color: #F4F5F7; /* Основной цвет фона */
  --menu_basic_color: #2c3748; /* Основной цвет фона меню */
  --menu_basic_color_trans: #2c3748d8; /* Основной цвет фона меню */
  --doc_text_color: #2c3748; /* Основной цвет текста */
  --doc_back3_color: #5C677D; /* Темный цвет активного элемента*/
  --start_back1_color: #808CA4; /* 1 цвет фона стартовой карусели*/
  --start_back2_color: #f4f5f700; /* 2 цвет фона стартовой карусели*/
}

body,
.scroll-container,
.preloader > i  {
/**** общий фон и цвет текста   ****/
  background-color: var(--back_basic_color); 
  color: var(--doc_text_color);
}


a:visited,
a:active,
a:focus {
/**** общий фон и цвет текста   ****/
  color: var(--doc_text_color);
}


h1, h2, h3, h4 {
  color: var(--doc_text_color);
}

h5, h6 {
  color: var(--menu_basic_color);
}

/**** общий цвет текста для parallax ****/
.parallax,
.parallax h1,
.parallax h2,
.parallax h3,
.parallax h4,
.parallax h5,
.parallax h6,
.parallax input,
.parallax input:hover,
.parallax textarea,
.parallax textarea:hover {
  color: var(--back_basic_color);
}


/**** цвет текста и фон кнопок ссылок parallax ****/
.parallax .btn.btn-primary:hover {
  color: var(--menu_basic_color);
  background: var(--doc_back3_color); 
  border-color: var(--menu_basic_color); 	 		
}

/**** цвет текста и фон кнопок ссылок parallax ****/
.parallax .btn.btn-primary {
  color: var(--back_basic_color);
  background: var(--menu_basic_color); 
  border-color: var(--back_basic_color); 
}

.preloader {
  background: var(--back_basic_color);
}

/**** общий цвет текста ссылок ****/
a,
#home-slider .caption h1 span,
#start-slider .first-title,
#start-slider .second-title,
#twitter-carousel .item span, 
#single-portfolio .close-folio-item:hover, 
.contact-info ul li a:hover  {
  color: var(--back_basic_color);
}

.dropdown-menu li {
  color: var(--back_basic_color);
}



.slider-caption {
  background: var(--menu_basic_color_trans);
}
.slider-caption h5,
.folio-info h5 {
  color: var(--back_basic_color);
}


.slider_checked {
  color: var(--back_basic_color);
}



.dropdown-menu li p   {
  color: var(--doc_text_color);
}

.navbar-header {
  color: var(--back_basic_color);
}


/**** общий цвет фонов  ****/
.service-icon, 
.twitter-icon .fa-twitter, 
.twitter-left-control:hover, 
.twitter-right-control:hover, 
.post-icon, 
.entry-header .date:after, 
.dropdown-menu {
  background-color: var(--menu_basic_color);
}

/**** общий цвет фонов старта ****/
 
#start-slider .left-control:hover, 
#start-slider .right-control:hover,
#home-slider .left-control:hover, 
#home-slider .right-control:hover {
  background-color: var(--doc_back3_color);
  border-color: var(--menu_basic_color);
  color: var(--menu_basic_color);
}

#start-slider .left-control, 
#start-slider .right-control,
#home-slider .left-control, 
#home-slider .right-control {
  background-color: transparent;
  border-color: var(--back_basic_color);
  color: var(--back_basic_color);
}


#start-slider .caption {
  /**background-color: var(--menu_basic_color_trans);**/
  color: var(--back_basic_color); 
  /** background: radial-gradient(ellipse closest-side, var(--start_back1_color) 50%, var(--start_back2_color) 100%); **/
}


#start-slider h1 {
  color: var(--back_basic_color);
}

#start-slider .btn-start:hover {
  background-color: var(--doc_back3_color) ;
}

#start-slider a {
  color: var(--back_basic_color) ;
}

.gradient-animated-text {
  background: linear-gradient(90deg, var(--menu_basic_color), var(--doc_back3_color));
}


 .main-nav { /**** градиенты фонов секций ****/
  background: var(--menu_basic_color);
  
  /****
  linear-gradient(to right,
  var(--menu_basic_color) 0%, 
  var(--doc_back3_color) calc(var(--resize_index)*8),
  var(--doc_back3_color) calc(var(--resize_index)*15), 
  var(--menu_basic_color) calc(var(--resize_index)*40));
  
  ****/
}




/**** общий фон и цвет текста прогрессбара ****/
.progress-bar.progress-bar-primary  {
  color: var(--back_basic_color);
} 

.progress{
  background-color: var(--menu_basic_color); 

}


/**** цвет текста кнопок и меню ****/
.navbar-right li a {
  color: var(--back_basic_color);
}

/**** цвет текста и фон кнопок ссылок ****/
.btn.btn-primary {
  color: var(--back_basic_color); 
  background: var(--menu_basic_color);
  border-color: var(--back_basic_color);	
}

/**** цвет текста и фон кнопок ссылок ****/
.btn.btn-primary:hover   {
  color: var(--back_basic_color);
  background: var(--doc_back3_color); 
  border-color: var(--back_basic_color); 		
}

/**** цвета пункта меню под мышкой и того что в фокусе ****/
.navbar-nav li:not(.dropdown) a:hover,
.navbar-nav li:not(.dropdown) a:focus,
.navbar-nav li a:hover,
.navbar-nav li a:focus {
  color: var(--back_basic_color);
  background: var(--doc_back3_color); 
}

/**** цвета нажатого пункта меню ****/
.navbar-right li.active a {
  color: var(--menu_basic_color) !important;
  background: var(--back_basic_color) !important;
}



/**** цвет текста  и фон кнопок соцсетей ****/
.social-icons ul li a {
  color: var(--back_basic_color);
  border-color: var(--back_basic_color);
  background: var(--menu_basic_color);
}


.social-icons ul li a:hover,
.extra-menu .social-icons ul li a {
  color: #f5f5f5
}

.social-icons ul li a.envelope:hover,
.extra-menu .social-icons ul li a.envelope {
  background-color: #CECB26;
}
.social-icons ul li a.facebook:hover,
.extra-menu .social-icons ul li a.facebook {
  background-color: #3b5998;
}
.social-icons ul li a.telegram:hover,
.extra-menu .social-icons ul li a.telegram{
  background-color: #0088cc;
}
.social-icons ul li a.viber:hover,
.extra-menu .social-icons ul li a.viber {
  background-color: #7360f2;
}
.social-icons ul li a.whatsapp:hover,
.extra-menu .social-icons ul li a.whatsapp{
  background-color: #25D366;
}
.social-icons ul li a.instagram:hover,
.extra-menu .social-icons ul li a.instagram{
  background-color: #DD2A7B;
}
.social-icons ul li a.twitter:hover,
.extra-menu .social-icons ul li a.twitter{
  background-color: #2ac6f7;
}
.social-icons ul li a.dribbble:hover,
.extra-menu .social-icons ul li a.dribbble {
  background-color: #ff5b92;
}
.social-icons ul li a.linkedin:hover,
.extra-menu .social-icons ul li a.linkedin{
  background-color: #036dc0;
}
.social-icons ul li a.tumblr:hover,
.extra-menu .social-icons ul li a.tumblr{
  background-color: #ff6b00;
}




.carousel-fade .carousel-inner .item:after {
  background: var(--start_back2_color);
}


#home-slider .carousel-inner * {
  color: var(--back_basic_color);
}

#home-slider .carousel-inner {
  background: var(--menu_basic_color);
}


#home-slider .fa-angle-down {
  color: var(--back_basic_color);
}

.service-icon {
  color: var(--back_basic_color);
}

#services .overlay {
  background-color: var(--menu_basic_color);
  color: var(--back_basic_color); 
}

#single-services *,
#single-portfolio *,
#single-about *,
#single-footer * {
  color: var(--back_basic_color) !important;
}

#single-services,
#single-portfolio,
#single-about,
#single-footer {
  background: var(--menu_basic_color);
}


.services-overview a {
  color: var(--doc_text_color);
  background-color: var(--back_basic_color);;
}

.services-overview a:hover {
  color: var(--back_basic_color);
}

#about-us h2 {
  color: var(--back_basic_color);
}


#portfolio .overlay {
  background-color: var(--menu_basic_color);
  color: var(--back_basic_color); 
}

.folio-overview a {
  color: var(--back_basic_color);
  border-color: var(--back_basic_color);
  background-color: var(--menu_basic_color);
}

.folio-overview a:hover {
  color: var(--back_basic_color);
  border-color: var(--back_basic_color);
  background-color: var(--doc_back3_color);
}

.overlay .folio-info p {
  color: var(--back_basic_color);
}


#portfolio .text-overlay {
    color: var(--back_basic_color);
}


.fixed-height-list li::before {
  color: var(--doc_text_color); /* Цвет номера в списке о прайсе продукта*/
}

.featured .fixed-height-list li::before {
  color: var(--back_basic_color); /* Цвет номера в списке о прайсе продукта*/
}


.team-member {
  color: var(--doc_text_color);
}


#features h3 {
  color: var(--back_basic_color);
}


.single-table.featured {  
  color: var(--back_basic_color);
  background: 
  linear-gradient(to right,var(--doc_back3_color) 0%, 
  var(--menu_basic_color) 45%,
  var(--menu_basic_color) 55%, 
  var(--doc_back3_color) 100%);
}

.single-table.featured h3,
.single-table h3 { 
  color: var(--back_basic_color);
}

.single-table.featured .btn.btn-primary,
.single-table .btn.btn-primary,
#service-1,
#about-1,
#change-fol1 {
  background-color: var(--doc_back3_color);
}

.single-table.featured .btn.btn-primary:hover,
.single-table .btn.btn-primary:hover,
#service-1:hover,
#about-1:hover,
#change-fol1:hover  {
  color: var(--menu_basic_color) !important;
  background: var(--back_basic_color); 
  border-color: var(--back_basic_color); 		
}



.single-table.featured .fixed-height-list  {
  border-color: var(--back_basic_color);

}
.single-table {
  color: var(--back_basic_color);
  background-color: var(--menu_basic_color);
}


.single-table .fixed-height-list  {
  color: var(--back_basic_color);

}
.single-table .fixed-height-list li::before {  
  color: var(--back_basic_color);
}

.single-table.featured .fixed-height-list  {
  background-color: transparent;
  color: var(--back_basic_color);

}
.single-table.featured .fixed-height-list li::before {  
  color: var(--back_basic_color);
}




.post-icon {
  color: var(--back_basic_color);
}

.post-meta {
  color: var(--back_basic_color);
}

.blog-left-control, .blog-right-control {
  color: rgba(255,255,255,.7);
}

.blog-left-control:hover, .blog-right-control:hover {
  color: var(--back_basic_color);  
}


.form-control {
  border-color: var(--doc_text_color);
}

.form-control:focus {
  border-color: var(--doc_back3_color);
  color: var(--doc_text_color);
}



.contact-info ul li a {
  color: var(--back_basic_color);
}


#footer a,
#footer p{
  color:var(--doc_text_color); 
}

#footer .footer-bottom p {
  color:var(--back_basic_color); 
}

#footer .navbar-brand {
	color: var(--doc_text_color); 
}

#footer .footer-top .social-icons ul li a{
	color: var(--back_basic_color) !important; 
  border-color: var(--back_basic_color) !important; 
}


#footer a:hover, 
#footer a:focus {
	color: var(--doc_text_color); 
}

/**** общий цвет фонов футера ****/
.footer-top {
  background: linear-gradient(to top, var(--doc_back3_color) 30%, transparent 100%);
}

.footer-bottom {
  /**** background: linear-gradient(to bottom, var(--doc_back3_color) 10%, var(--menu_basic_color));
  ****/
  background: var(--doc_back3_color);
}


.faq_container {
  background-color: var(--menu_basic_color);
  color: var(--back_basic_color);
  border-color: var(--back_basic_color);
}