///////////////////
//theme variables//
///////////////////

//Colors

//Monochrome colors

//text color in light section (.ls)
$fontColor: #61728a;
//background color for light section (.ls) and font color in dark section (.ds)
$lightColor: #ffffff;
//text color for headings in light section (.ls) and background color for dark section (.ds)
$darkColor: #030f1c;
$darkColor2: #282f39;
//background color for light grey background light section (grey - .ls.ms)
$greyColor: #f4f6f9;
//background color for dark muted section (.ds.ms)
$darkgreyColor: #06182d;
//border colors for elements in light section (.ls) (and .bordered elements)
$borderColor: #61728a;
//rgba variant for bordered elements
$borderColorRGBA: rgba(#000, 0.1);
//background color for hero background elements in light section (.hero-bg)
$backgroundColor: #f5f5f5;

$boxShadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);


//section specific variables

// dark section - .ds

//font color in dark section (.ds)
$darkFontColor: #9a9a9a;
//border colors in dark section (.ds)
$darkBorderColor: #454545;
//background color for elements with background (.hero-bg etc.)
$darkBackgroundColor: rgba(#fff, 0.05);

//color section - .cs

//border colors in color section (.cs)
$colorBorderColor: rgba(#fff, 0.15);
$colorBackgroundColor: rgba(#fff, 0.1);

//dark grey background dark blue section - (.ds.bs)
$darkBlueColor: #0e2640;
$darkBlueColorLighter: #2f3e47;

//Accent Color schemes

//this variables is used in development process
//in production color variables are overridden in 'color_schemes' folder

//theme accent colors
$styleNumber: '' !default;
$colorMain: #ff4e3c !default;
$colorMain2: #fff000 !default;
$colorMain3: #ff7b3c !default;
$colorMain4: #ff633c !default;
$colorMain5: #ff3c45 !default;
//////bootstrap colors
//orange - warning
$colorPrimary: $colorMain !default;
//green
$colorSuccess: #4db19e !default;
//blue
$colorInfo: #007ebd !default;
//orange
$colorWarning: #eeb269 !default;
//red
$colorDanger: #dc5753 !default;

//universal muted background color
$universalBackgroundColor: rgba(150, 150, 150, 0.05) !default;
$universalBorderColor: rgba(200, 200, 200, 0.35) !default;

//Layout
//////side header
$sideHeaderWidth: 310px;
//inner side header padding
$sideHeaderLeftRightPadding: 30px;
//header transition
$headerTransition: 0.5s ease-in-out;

$grid-breakpoints: (
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

//_horizontal spacers
//reverse for smaller gutters has priority
$columns-horizontal-gutters-sum: 100 90 85 80 70 60 50 40 30 25 20 15 10 5 2 1 0;
$container-horizontal-padding: 0 1 2 5 10 20 30 60;

//_vertical spacers - vertical margins and padding for sections and columns
$section-vertical-padding: 0 1 2 3 5 10 15 20 25 30 35 40 45 50 55 60 65 70 75 80 85 90 95 100 105 115 120 125 130 140 145 150;
$columns-vertical-margins: 0 1 2 5 10 15 20 25 30 40 45 50 53 55 60;

//top and bottom borders height for sections with borders - 1px by default
$section-borders-height: 2 3 5;

//font size helpers - fs-xx
$font-size-helpers: 12 14 16 18 20 24 28 32 36 40 43 56;

$dividers-height: -50 0 2 3 5 7 10 15 20 25 30 33 35 40 45 50 55 60 64 65 70 80 85 90 95 100 110 120 130 145 150;

@mixin small-text() {
  font-size: 12px;
  line-height: 1.6em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@mixin cover() {
  content: '';
  position: absolute;
  display: block;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
}

@mixin widget-title() {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 27px;
  line-height: 1;
}

@mixin widget-a-before() {
  font-family: 'icomoon';
  content: '\e915';
  font-size: 14px;
  color: $colorMain;
  position: relative;
  padding-right: 10px;
}