/* ======================================================
   THEME VARIABLES
   ====================================================== */
:root {
  --primary: #3e6d92;
  --primary-dark: #333;
  --primary-muted: #555;

  --text-main: #444;
  --text-muted: #777;

  --bg-light: #fff;
  --bg-soft: #eee;
  --bg-muted: #ddd;
}

/* ======================================================
   BASE
   ====================================================== */
header, nav, .main-menu, .top-bar {   /* adjust selectors to match your site */
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

body {
  color: var(--text-muted);
  background: var(--bg-light);
}

h1, h2, h3, h4, h5, h6 {
  color: #222;
}

h2 {
  color: #888;
}

h2 i {
  color: #999;
}

a {
  color: var(--primary);
}

a:hover,
.scrollspyNav .active a {
  color: var(--primary);
}

blockquote small {
  color: inherit;
}

/* ======================================================
   PANELS
   ====================================================== */
.panel-default > .panel-heading {
  background: var(--primary);
}

.panel-default > .panel-heading:hover {
  background: var(--bg-light);
}

.panel-default > .panel-heading:hover a {
  color: var(--primary);
}

.panel-title > a {
  color: #fff;
}

.panel-title > a:hover {
  text-decoration: none;
}

/* ======================================================
   PARALLAX / HERO
   ====================================================== */
#home,
#paralaxSlice1,
#paralaxSlice2,
#paralaxSlice3,
#paralaxSlice4 {
  background-color: var(--primary);
}

#home {
  background-image: url('../images/theme-pics/paralax-blue-3.jpg');
}

#paralaxSlice1 {
  background-image: url('../images/theme-pics/paralax-1.jpg');
}

#paralaxSlice2 {
  background-image: url('../images/theme-pics/paralax-blue-2.jpg');
}

#paralaxSlice3 {
  background-image: url('../images/theme-pics/paralax-blue-3.jpg');
}

#paralaxSlice4 {
  background-image: url('../images/theme-pics/paralax-4.jpg');
}

.paralaxText :is(blockquote, h1, h2, h3, i, p) {
  color: #fff;
}

.paralaxText blockquote::before,
.paralaxText blockquote::after {
  color: #fff;
}

h1.noSubtitle::after,
h2.subTitle::after {
  background-color: var(--primary);
}

/* ======================================================
   ICON LISTS
   ====================================================== */
ul.iconsList li a {
  color: var(--text-main);
}

ul.iconsList i,
ul.iconsList li a:hover {
  color: var(--primary);
}

/* ======================================================
   BUTTONS
   ====================================================== */
.btn {
  background: var(--primary);
  color: #fff;
  border: 2px solid #fff;
}

.btn:hover {
  background: #fff;
  color: var(--primary);
  border-color: #eee;
  text-shadow: none;
}

.btn-primary {
  background: #006dcc;
}

.btn-primary:is(:hover, :focus, :active, .active, [disabled]) {
  background: var(--primary-muted);
}

.btn-info    { background: #49afcd; }
.btn-success { background: #5bb75b; }
.btn-warning { background: #faa732; }
.btn-danger  { background: #da4f49; }

.btn-link,
.btn-link:is(:hover, :active, [disabled]) {
  background: none;
  border: none;
  box-shadow: none;
  color: #49afcd;
}

.btnWrapper {
  border: 1px solid #ccc;
}

/* ======================================================
   HEADER / NAVIGATION
   ====================================================== */
#mainHeader {
  background-color: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}

#mainHeader .navbar-inner {
  background: #444;
}

#mainMenu ul li a,
#resMainMenu ul li a {
  color: #444;
}

.navbar-default .navbar-nav > li > a:is(:hover, :focus),
.navbar-default .navbar-nav > .active > a {
  background: var(--primary);
  color: #fff;
}

/* ======================================================
   FOOTER
   ====================================================== */
footer {
  color: var(--text-muted);
  background: var(--bg-soft);
  border-top: 1px solid #555;
}

#footerRights {
  background-color: #fff;
  color: #999;
}

p.credits {
  color: var(--text-main);
}

p.credits a {
  color: var(--primary);
}

/* ======================================================
   SLIDER / FLEXSLIDER
   ====================================================== */
.flexslider {
  box-shadow: none;
}

.flexslider h1 {
  background: var(--primary);
  color: #fff;
}

.flexslider h2 {
  background: #333;
  color: #fff;
}

.slides .txt div {
  background: #444;
  color: #fff;
}

.flexslider .flex-direction-nav a {
  background-color: var(--primary);
}

.flexslider .flex-control-paging li a {
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.flexslider .flex-control-paging li a:is(:hover, .flex-active) {
  background: #fff;
  border-color: #fff;
}

.flexslider .flex-control-nav {
  background: none;
}

.flexslider .caption p {
  background: #fff;
  color: var(--text-main);
}

#flexHome h1,
#flexHome h2 {
  background: none;
  color: #fff;
}

/* ======================================================
   FILTER / PROJECTS
   ====================================================== */
nav#filter a {
  background: var(--bg-soft);
  color: var(--text-main);
}

nav#filter a:is(:hover, .current) {
  background: var(--primary);
  color: #fff;
}

li.filterTitle {
  color: #4f6266;
}

section#projectDescription {
  background: #f8f8f8;
}

.mask {
  background: var(--primary);
}

.iconLinks a span {
  color: #fff;
}

/* ======================================================
   PRICING
   ====================================================== */
.pricingBloc {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.pricingBloc ul li {
  border-bottom: 1px solid #ddd;
  color: var(--text-main);
}

.pricingBloc ul li:last-child {
  border-bottom: none;
}

.pricingBloc h2 {
  background: #555;
  color: #888;
}

.pricingBloc h3 {
  background: #777;
  color: #fff;
}

.pricingBloc p {
  background: var(--bg-soft);
  color: var(--text-main);
}

.pricingBloc.focusPlan {
  border-color: #d1d1d1;
}

.pricingBloc.focusPlan h2 {
  background: #333;
  color: #fff;
}

.pricingBloc.focusPlan h3 {
  background: var(--primary);
  padding: 1.25em;
  color: #fff;
}

/* ======================================================
   FORMS / ERRORS
   ====================================================== */
.form-control {
  background: #ededed;
  color: var(--text-main);
  border: none;
}

.form-control:focus {
  background: var(--bg-muted);
  box-shadow: none;
}

.error {
  color: #b94a48;
  background: #f2dede;
  border-color: #eed3d7;
}

label.error {
  background: #b94a48;
  color: #fff;
  border: none;
}

/* ======================================================
   MISC
   ====================================================== */
#projectQuote,
#projectQuote h3 {
  background: var(--bg-muted);
  color: var(--text-main);
}

.boxFeature i {
  color: var(--primary);
}

.slice {
  background: #fff;
}

.ctaBox {
  border: 2px solid rgba(0, 0, 0, 0.05);
}

.ctaBoxFullwidth {
  border: none;
}

.ctaBox blockquote {
  color: #fff;
}

/* ======================================================
   COLOR THEMES
   ====================================================== */
.color1,
.bulle.color1,
.ctaBox.color1,
.slice.color1 {
  background: #f7f7f7;
  color: var(--text-main);
}

.color1 :is(a, blockquote, h1, h2, h3, h4) {
  color: var(--text-main);
}

.color1 a.btn {
  color: #fff;
}

.color1 a.btn:hover {
  color: var(--primary);
}

.color4,
.bulle.color4,
.ctaBox.color4,
.slice.color4 {
  background: var(--primary);
  color: #fff;
}

.color4 :is(a, blockquote, h1, h2, h3, h4) {
  color: #fff;
}

.color4 h1.noSubtitle::after,
.color4 h2.subTitle::after {
  background: #fff;
}

/* ======================================================
   ICONS
   ====================================================== */
.iconRounded {
  border: 2px solid var(--primary);
  background: #fff;
  color: var(--primary);
}

.iconRounded:hover,
.color1 .iconRounded:hover {
  background: var(--primary);
  color: #fff;
}

.color4 .iconRounded {
  background: #fff;
  color: var(--primary);
}