/* Color variables */
:root {
  --color-dark: #333333;
  --color-blue: #edf5fa;
  --color-purple: #d9bde4;	
  --color-pink: #fcf0f7;
	
  --color-light-blue: #4b858e;
  --color-lightest-blue:#a37ab2;	
  --color-grey: #edf5fa;
  --color-grey-alt:#edf5fa;
  --color-white: #fff;
  --color-grey-alt: #edf5fa;	
  --color-footer: #dfdfdf;
  --color-text: #333333;
}

/*----------------------------------------*/
/*----- Basic typo -----*/
/*----------------------------------------*/
body { color: var(--color-text); background-color: var(--color-white); }
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--color-text); }
a { color: var(--color-lightest-blue); }
a:hover { color: var(--color-text); }
/*----------------------------------------*/
/*----- Backgrounds -----*/
/*----------------------------------------*/
.bg-trans { background-color: transparent !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-grey { background-color: var(--color-grey) !important; }
.bg-grey-alt { background-color: var(--color-grey-alt) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-blue { background-color: var(--color-blue) !important; }
.bg-light-blue { background-color: var(--color-purple) !important; }
.bg-dark-blue { background-color: var(--color-dark) !important; }
.bg-pink { background-color: var(--color-pink) !important; }
.bg-purple { background-color: var(--color-purple) !important; }
/*----------------------------------------*/
/*----- Overlays -----*/
/*----------------------------------------*/
.dtr-overlay { background-color: var(--color-overlay); }
/*----------------------------------------*/
/*----- Text -----*/
/*----------------------------------------*/
/*== dark ==*/
.color-dark { color: var(--color-dark); }
/*== white ==*/
.color-white, .color-white h1, .color-white h2, .color-white h3, .color-white h4, .color-white h5, .color-white h6, .color-white a { color: var(--color-white); }
/*== white muted ==*/
.color-white-muted, .color-white-muted h1, .color-white-muted h2, .color-white-muted h3, .color-white-muted h4, .color-white-muted h5, .color-white-muted h6, .color-white-muted a { color: var(--color-text-muted-white); }
/*== grey ==*/
.color-grey { color: var(--color-text-grey) !important; }
.color-grey-muted { color: var(--color-text-grey-muted) !important; }
/*== blue ==*/
.color-blue { color: var(--color-light-blue) !important; }
/*----------------------------------------*/
/*----- Borders -----*/
/*----------------------------------------*/
.border-white { border-color: var(--color-white) !important; }
.border-white-muted, .border-white-muted li { border-color: rgba(255,255,255,0.10) !important; }
.border-grey { border-color: var(--color-border-grey) !important; }
.border-dark { border-color: var(--color-border-dark) !important; }
.border-blue { border-color: var(--color-light-blue) !important; }
/*----------------------------------------*/
/*----- Buttons -----*/
/*----------------------------------------*/
#submit, input[type="submit"] { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
#submit:hover, input[type="submit"]:hover { color: var(--color-white); }
.dtr-btn i { color: inherit !important; }
/* styled button */
.dtr-btn-styled { background: transparent !important; }
 
.dtr-btn-styled-dark { color: var(--color-text); }
.dtr-btn-styled-dark:hover { color: var(--color-text); }
/*-- white --*/
.btn-white { background-color: var(--color-white); border-color: var(--color-border-grey); color: var(--color-dark); }
.btn-white:hover { background-color: var(--color-white); border-color: var(--color-border-grey); color: var(--color-dark); }
/*-- grey --*/
.btn-grey { background-color: var(--color-text-grey-muted); border-color: var(--color-text-grey-muted); color: var(--color-dark); }
.btn-grey:hover { background-color: var(--color-hover-blue); border-color: var(--color-hover-blue); color: var(--color-dark); }
/*-- blue --*/
.btn-blue { background-color: var(--color-light-blue); border-color: var(--color-light-blue); color: var(--color-white); }
.btn-blue:hover { background-color: var(--color-light-blue); border-color: var(--color-light-blue); color: var(--color-white); }
/*----------------------------------------*/
/*----- Forms -----*/
/*----------------------------------------*/
label, input, select, textarea, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"] { color: var(--color-dark); }
select, textarea, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"] { background-color: var(--color-white); }
select, textarea, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], input[type="search"] { border-color: #e1e1e1; }
textarea:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus { border-color: var(--color-dark); outline: none; }
.dtr-form .error { color: var(--color-error); }
/* placeholder */
::-webkit-input-placeholder {
color: var(--color-placeholder-dark) !important;
opacity: 1;
font-size: 95%;
}
:-moz-placeholder {
color: var(--color-placeholder-dark) !important;
opacity: 1;
font-size: 95%;
}
::-moz-placeholder {
color: var(--color-placeholder-dark) !important;
opacity: 1;
font-size: 95%;
}
:-ms-input-placeholder {
color: var(--color-placeholder-dark) !important;
opacity: 1;
font-size: 95%;
}
/*===== form on dark background =====*/
.dtr-form-dark-bg select, .dtr-form-dark-bg textarea, .dtr-form-dark-bg input[type="text"], .dtr-form-dark-bg input[type="email"], .dtr-form-dark-bg input[type="url"], .dtr-form-dark-bg input[type="password"], .dtr-form-dark-bg input[type="number"], .dtr-form-dark-bg input[type="tel"], .dtr-form-dark-bg input[type="search"] { background-color: transparent; }
.dtr-form-dark-bg label, .dtr-form-dark-bg input, .dtr-form-dark-bg select, .dtr-form-dark-bg textarea, .dtr-form-dark-bg input[type="text"], .dtr-form-dark-bg input[type="email"], .dtr-form-dark-bg input[type="url"], .dtr-form-dark-bg input[type="password"], .dtr-form-dark-bg input[type="number"], .dtr-form-dark-bg input[type="tel"], .dtr-form-dark-bg input[type="search"] { color: var(--color-white); }
.dtr-form-dark-bg select, .dtr-form-dark-bg textarea, .dtr-form-dark-bg input[type="text"], .dtr-form-dark-bg input[type="email"], .dtr-form-dark-bg input[type="url"], .dtr-form-dark-bg input[type="password"], .dtr-form-dark-bg input[type="number"], .dtr-form-dark-bg input[type="tel"], .dtr-form-dark-bg input[type="search"] { border-color: rgba(255, 255, 255, .2); }
.dtr-form-dark-bg .dtr-form-subtext { color: var(--color-text-muted-white) !important; }
.dtr-form-dark-bg textarea:focus, .dtr-form-dark-bg input[type="text"]:focus, .dtr-form-dark-bg input[type="email"]:focus, .dtr-form-dark-bg input[type="url"]:focus, .dtr-form-dark-bg input[type="password"]:focus, .dtr-form-dark-bg input[type="number"]:focus, .dtr-form-dark-bg input[type="tel"]:focus, .dtr-form-dark-bg input[type="search"]:focus { border-color: rgba(255, 255, 255, .6); outline: none; }
/* placeholder */
.dtr-form-dark-bg ::-webkit-input-placeholder {
color: var(--color-placeholder-light) !important;
opacity: 1;
font-size: 95%;
}
.dtr-form-dark-bg :-moz-placeholder {
color: var(--color-placeholder-light) !important;
opacity: 1;
font-size: 95%;
}
.dtr-form-dark-bg ::-moz-placeholder {
color: var(--color-placeholder-light) !important;
opacity: 1;
font-size: 95%;
}
.dtr-form-dark-bg :-ms-input-placeholder {
color: var(--color-placeholder-light) !important;
opacity: 1;
font-size: 95%;
}
/*----------------------------------------*/
/*----- Header -----*/
/*----------------------------------------*/
/*===== Header =====*/
#dtr-header-global { background-color: var(--color-white); }
#dtr-header-global.trans-header { background-color: transparent; }
#dtr-header-global.on-scroll { background-color: var(--color-white); }
#dtr-header-global.on-scroll .on-scroll-color-dark { color: var(--color-dark) !important; }
/*----------------------------------------*/
/*----- Footer -----*/
/*----------------------------------------*/
.dtr-footer-main { background-color:var(--color-footer); } 
.dtr-footer-main h1, .dtr-footer-main h2, .dtr-footer-main h3, .dtr-footer-main h4, .dtr-footer-main h5, .dtr-footer-main h6 { color: var(--color-text); } 
.dtr-footer-main, .dtr-footer-main a { color: var(--color-text); }

/*----------------------------------------*/
/*----- Menu -----*/
/*----------------------------------------*/
/* menu for dark background */
.dtr-menu-light .nav-link { color: rgba(255, 255, 255, .5); }
.dtr-menu-light .active { color: var(--color-light-blue); }
.dtr-menu-light .nav-link:hover { color: var(--color-light-blue); }
.dtr-menu-light .active:hover { color: var(--color-light-blue); }
/* menu for light background */
.dtr-menu-dark .nav-link { color: var(--color-text); }
.dtr-menu-dark .active { color: var(--color-light-blue); }
.dtr-menu-dark .nav-link:hover { color: var(--color-lightest-blue); }
.dtr-menu-dark .active:hover { color: var(--color-light-blue); }
/* dropdown link color */
.sf-menu .sub-menu li a { color: var(--color-text); }
.sf-menu .sub-menu li a:hover, .sf-menu .sub-menu li .active { background: rgba(14,21,58,0.05); color: var(--color-dark); }
.sf-menu .sub-menu { background-color: var(--color-white); }
.sf-menu .sub-menu a { border-bottom-color: var(--color-border-menu); }
/*===== Responsive header =====*/
.dtr-responsive-header { background-color: var(--color-white); }
.dtr-hamburger-lines, .dtr-hamburger-lines:after, .dtr-hamburger-lines:before { background-color: var(--color-dark); }
.slicknav_nav, .slicknav_menu { background-color: var(--color-white); }
.slicknav_nav li, .slicknav_nav .dropdown-item { border-color: var(--color-border-grey); }
.slicknav_nav, .slicknav_nav a, .slicknav_menu .slicknav_menutxt { color: var(--color-dark); }
.slicknav_nav a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav .slicknav_row:hover a, .slicknav_nav a.active { color: var(--color-light-blue); }
.slicknav_nav .dropdown-item.active, .slicknav_nav .dropdown-item:hover, .slicknav_nav .dropdown-item:focus { background-color: transparent; }
/*----------------------------------------*/
/*----- Elements -----*/
/*----------------------------------------*/
/*====== preloader =====*/
.dtr-preloader { background: var(--color-preloader); }
.dtr-loader { color: var(--color-white); }
/*===== feature =====*/
.dtr-feature-circle-icon .dtr-feature-img, .dtr-feature-square-icon .dtr-feature-img, .dtr-feature-circle-lg-icon .dtr-feature-img, .dtr-feature-square-lg-icon .dtr-feature-img { background-color: var(--color-white); border-color: var(--color-border-feature); }
/*===== servicebox =====*/
.dtr-promobox { border-color: var(--color-border-grey); }
.dtr-promobox:hover { background-color: var(--color-promo-box); }
.dtr-promobox-number { color: var(--color-promo-number); }
.dtr-promobox:hover .dtr-promobox-number { color: var(--color-promo-number-hover); }
/*===== Testimonial =====*/
.dtr-client-info { background-color: var(--color-purple); }
.dtr-client-name { color: var(--color-text); }
.dtr-client-job { color: var(--color-text) !important; }
/*===== blog items =====*/
.dtr-post-img { border-color: var(--color-border-grey); }
.dtr-blog-cat { background-color: var(--color-blue); color: var(--color-text); }
.dtr-blog-cat a { color: inherit; }
.dtr-blog-meta span { color: var(--color-post-meta); }
/*===== Video Play =====*/
/* white */
.video-button-white .dtr-video-button-wrap-inner { background-color: var(--color-light-blue); }
.video-button-white .dtr-video-button::after { color: var(--color-white); }
.video-button-white .dtr-border-animation { border-color: var(--color-white); }
/* dark */
.video-button-dark .dtr-video-button-wrap-inner { background-color: var(--color-dark); }
.video-button-dark .dtr-video-button::after { color: var(--color-white); }
.video-button-dark .dtr-border-animation { border-color: var(--color-dark); }
/*===== social =====*/
#dtr-header-global .dtr-social a {  color: var(--color-dark); } 
#dtr-header-global .dtr-social a:hover {  color: var(--color-light-blue); } 
.dtr-social-circle .dtr-social-list a, .dtr-social-square .dtr-social-list a { background-color: var(--color-dark); color: var(--color-white) !important; }
.dtr-social-circle .dtr-social-list a:hover, .dtr-social-square .dtr-social-list a:hover { background-color: var(--color-dark); color: var(--color-white) !important; }
/*----------------------------------------*/
/*----- Misc -----*/
/*----------------------------------------*/
.dtr-border-top, .dtr-border-right, .dtr-border-bottom, .dtr-border-left, .dtr-border-top-2px, .dtr-border-right-2px, .dtr-border-bottom-2px, .dtr-border-left-2px, .dtr-border-2px, .dtr-border-list li { border-color: var(--color-border-grey); }
/*===== slick carousel =====*/
.dtr-slick-slider .slick-prev:before, .dtr-slick-slider .slick-next:before { color: var(--color-white); }
.dtr-slick-slider .slick-prev, .dtr-slick-slider .slick-next { background-color: var(--color-dark); border-color: var(--color-dark); }
.dtr-slick-slider .slick-prev:hover, .dtr-slick-slider .slick-next:hover { background-color: var(--color-dark); border-color: var(--color-dark); }
.dtr-slick-slider .slick-prev:hover:before, .dtr-slick-slider .slick-next:hover:before { color: var(--color-white); }
.dtr-slick-slider ul.slick-dots li button { background-color: var(--color-light-blue); opacity: .4; }
.dtr-slick-slider ul.slick-dots li button:hover, .dtr-slick-slider ul.slick-dots li.slick-active button { background-color: var(--color-light-blue); opacity: 1; }
/*===== accent bg hover =====*/
.accent-color { color: var(--color-light-blue) !important; }
/*===== accent link hover =====*/
.accent-color-hover:hover { color: var(--color-light-blue) !important; }