//
// Variables
//

$colors: map-merge((
    "alabaster":     #f8f8f8,
    "athens-gray":   #f0f0f0,
    "wild-sand":     #f4f4f4,
    "rolling-stone": rgba(black,0.8),
    "mine-shaft":    #333333,
), $colors);

$theme-colors: map-merge((
    "black":     #222222,
    "brand":     #505cfd,
    "new-gray":  #d8d8d8,
    "new-white": #ffffff,
), $theme-colors);


$body-color:                        color("rolling-stone");
$border-color:                      color("athens-gray");
$border-radius:                     rem(3px);
$text-muted:                        #a3a6a8;



// Links
//
// Style anchor elements.

$link-color:                        $red_jipe; //theme-color("brand")
$link-hover-color:                  darken($link-color, 15%);
$link-hover-decoration:             none;


// Fonts
//
// Font, line-height, and color for body text, headings, and more.

$font-size-base:                    rem(14px);
$line-height-base:                  1.8;
$font-family-base:                  "Nunito", Arial;
$font-family-serif:                 "Playfair Display", sans-serif;

$h1-font-size:                      rem(30px);
$h2-font-size:                      rem(24px);
$h3-font-size:                      rem(20px);
$h4-font-size:                      rem(18px);
$h5-font-size:                      rem(17px);
$h6-font-size:                      rem(16px);

$h1-font-weight:                    600;
$h2-font-weight:                    600;
$h3-font-weight:                    600;
$h4-font-weight:                    600;
$h5-font-weight:                    600;
$h6-font-weight:                    600;

$headings-line-height:              1.3;
$headings-margin-bottom:            rem(10px);
$headings-color:                    theme-color("black");
$blockquote-font-size:              rem(18px);
$lead-font-size:                    rem(15px);
$lead-font-weight:                  400;
$hr-border-color:                   $border-color;

// Btns

$btn-font-weight:                   600;
$btn-font-size:                     rem(12px);
$btn-text-transform:                uppercase;
$btn-letter-spacing:                rem(1.8px);
$btn-padding-y:                     rem(16px);
$btn-padding-x:                     rem(30px);
$btn-padding-y-sm:                  rem(10px);
$btn-padding-x-sm:                  rem(24px);
$btn-padding-y-lg:                  rem(19px);
$btn-padding-x-lg:                  rem(36px);
$btn-border-width:                  2px;
$btn-border-radius:                 $border-radius;
$btn-border-radius-lg:              $border-radius;
$btn-border-radius-sm:              $border-radius;


// Forms

$input-border-width:                1px;
$input-border-color:                darken($border-color, 1%);
$input-border-radius:               $border-radius;
$input-focus-box-shadow:            none;
$input-focus-border-color:          darken($input-border-color, 8%);
$input-padding-y:                   $btn-padding-y + (rem($btn-border-width) / 2);
$input-padding-x:                   rem(14px);
$input-padding-y-sm:                $btn-padding-y-sm + (rem($btn-border-width) / 2);
$input-padding-x-sm:                $input-padding-x;
$input-padding-y-lg:                $btn-padding-y-lg + (rem($btn-border-width) / 2);
$input-padding-x-lg:                $input-padding-x;
$input-height-inner:                ($btn-font-size * $btn-line-height) + ($btn-padding-y * 2) + (rem($btn-border-width) * 2);
$input-height:                      $input-height-inner;
$input-height-inner-sm:             ($btn-font-size * $btn-line-height) + ($btn-padding-y-sm * 2) + (rem($btn-border-width) * 2);
$input-height-sm:                   $input-height-inner-sm;
$input-height-inner-lg:             ($btn-font-size * $btn-line-height) + ($btn-padding-y-lg * 2) + (rem($btn-border-width) * 2);
$input-height-lg:                   $input-height-inner-lg;


// Alert

$alert-padding-y:                   rem(18px);
$alert-padding-x:                   rem(18px);
$alert-border-width:                0;


// Breadcrumb

$breadcrumb-bg:                     transparent;
$breadcrumb-font-size:              rem(13px);
$breadcrumb-divider-font-size:      rem(10px);
$breadcrumb-divider-color:          $body-color;


// Pagination:

$pagination-color:                  $body-color;
$pagination-border-width:           0;
$pagination-padding-y:              rem(8px);
$pagination-padding-x:              rem(14px);
$pagination-hover-color:            theme-color("black");
$pagination-hover-bg:               color("wild-sand");
$pagination-active-color:           $body-bg;
$pagination-active-bg:              theme-color("brand");
$pagination-active-border-color:    $pagination-active-bg;


// Progress Bars

$progress-bg:                       darken(color("wild-sand"), .5%);
$progress-height:                   rem(14px);
$progress-border-radius:            0;


// Pie

$pie-size:                          150px;
$pie-box-shadow:                    0 0 60px rgba(0, 0, 0, .07);


// Pricing Tables

$pricing-background:                $body-bg;
$pricing-border-color:              $border-color;


// Nav, Tabs, Pills

$nav-link-padding-y:                rem(10px);
$nav-link-padding-x:                rem(16px);
$nav-tabs-border-width:             1px;
$nav-tabs-border-color:             $border-color;
$nav-tabs-link-active-bg:           transparent;
$nav-tabs-link-active-border-width: 2px;
$nav-tabs-link-active-border-color: theme-color("brand");
$tabs-padding-y:                    24px;
$tabs-padding-x:                    0;


// Modules/Section

$module-cover-padding-top:          1px;
$module-cover-padding-bottom:       0px;
$module-padding-top:                120px;
$module-padding-bottom:             100px;
$module-page-title-padding-top:     45px;
$module-page-title-padding-bottom:  45px;
$module-gray-background:            color("alabaster");
$module-overlay-color:              color("mine-shaft");
$module-gradient-left:              theme-color("brand");
$module-gradient-right:             #00dbde;


// Header

$header-height:                     74px;
$header-brand-text-transform:       none;
$header-brand-letter-spacing:       0;
$header-brand-font-weight:          600;
$header-brand-font-size:            rem(20px);
$header-link-text-transform:        uppercase;
$header-link-letter-spacing:        rem(.9px);
$header-link-font-weight:           600;
$header-link-font-size:             rem(12px);
$header-icon-font-size:             rem(17px);
$header-link-indents:               7px;
$header-icon-indents:               11px;
$header-transparent-link-clr:       color("white");
$header-transparent-link-clr-hvr:   rgba($header-transparent-link-clr, .7);


// Header Small

$header-small-height:               60px;
$header-small-background:           color("white");
$header-small-screen-background:    theme-color("black");
$header-small-border-color:         rgba($border-color, .8);
$header-small-link-clr:             theme-color("black");
$header-small-link-clr-hvr:         #962122;


// Sub-menu

$submenu-background:                color("white");
$submenu-box-shadow:                0 14px 32px 4px rgba(0, 0, 0, .1);
$submenu-border-radius:             2px;
$submenu-min-width:                 180px;
$submenu-mega-column-min-width:     $submenu-min-width;
$submenu-link-clr:                  #9d9d9d;
$submenu-link-clr-hvr:              rgba($submenu-link-clr, .65);
$submenu-text-transform:            uppercase;
$submenu-letter-spacing:            rem(1px);
$submenu-font-weight:               500;
$submenu-font-size:                 rem(12px);


// Widgets

$widget-margin-y:                   60px;


// Footer

$footer-padding-y:                  90px;
$footer-background:                 theme-color("black");
$footer-headings-color:             color("white");
$footer-link-color:                 #cecece;


// Offcanvas

$offcanvas-width:                   400px;
$offcanvas-background:              $footer-background;
$offcanvas-overlay-color:           rgba(0, 0, 0, .5);
$offcanvas-headings-color:          $footer-headings-color;
$offcanvas-link-color:              $footer-link-color;


// Comments - Shop Review

$avatar-border-radius:              100%;
$reply-link-border-radius:          $border-radius;


// Timeline

$timeline-border-color:             $border-color;
$timeline-border-radius:            $border-radius;


// Tooltip

$tooltip-bg:                        $body-bg;
$tooltip-arrow-color:               $tooltip-bg;
$tooltip-padding-y:                 rem(5px);
$tooltip-padding-x:                 rem(12px);
$tooltip-font-size:                 rem(11px);
$tooltip-border-radius:             rem(2px);
$tooltip-margin:                    4px;


// Preloader

$preloader-size:                    30px;
$preloader-color:                   theme-color("brand");
$preloader-background:              $body-bg;


// Scroll Top Button

$srcoll-top-border-radius:          100%;
$srcoll-top-position:               rem(25px);
$srcoll-top-font-size:              rem(14px);
$srcoll-top-size:                   rem(38px);