// Custom colors
$cyan: #00a3d3;
$light-grayish-cyan: #ecf0f1;
$dark-desaturated-blue: #34495e;
$orange: #f39c12;
$sldv-main-color: #ecf0f1;
$sldv-links-background-color: fade-out($orange, 0.8);

// Core vars
$primary-color: $cyan;
$secondary-color: $orange;
$body-background: #eee url(img/background.jpg);
$font-color: #333;
$font-family: Arial,Tahoma,Helvetica,FreeSans,sans-serif;
$link-color: $dark-desaturated-blue;
$width: 1200px;
$border-radius: 0;

$nav-background: $cyan;
$nav-color: white;
$nav-active-color: $dark-desaturated-blue;

$nav-button-background: $primary-color;
$nav-mobile-menu-background: $primary-color;
$nav-mobile-menu-item-color: white;
$nav-border-color: $primary-color;

$nav-mobile-bottom-bar-color: white;
$nav-mobile-bottom-bar-background: transparent;
$nav-mobile-bottom-bar-item-selected-background: $primary-color;

$title-font-family: Oswald,Tahoma,Helvetica,FreeSans,sans-serif;
$title-color: white;
$title-background: $dark-desaturated-blue;
$title-transform: uppercase;

$cell-border-radius: 3px;
$cell-image-padding: 0.7rem;
$cell-entry-hover-background: $sldv-links-background-color;
$cell-border: none;

$wcs-steps-spacing: 0.5rem;
$wcs-step-current-color: $dark-desaturated-blue;
$wcs-step-current-border-bottom: 4px solid $secondary-color;

$widget-background: hsla(0, 0%, 100%, 0.6);
$widget-focus-background: white;
$widget-border: 1px solid #ccc;
$widget-focus-border: 1px solid $font-color;

$button-color: white;
$button-hover-background: $dark-desaturated-blue;
$button-focus-outline: 4px solid $secondary-color;

$footer-background: #222;
$footer-color: $light-grayish-cyan;