$white: #fff;
$black: #000;
$light-grey: #eceeed;
$medium-grey: #d8d8d6;
$grey: #666;

$orange: #ffd58f;
$orange2: #ff6a00;
$orange3: #ffa105;
$orange4: #fbb040;
$error: #f00;
$red: #f75959;
$lightred: #ffcfcf;
$green: #30c86e;
$green2: #5ecc6b;
$light-green: #93e79d;
$blue: #7490ca;
$purple: #5404d7;
$purple-light: #e7e6f5;
$yellow: #f0ab2b;
$opacity-blue: rgba(53, 66, 105, 0.5);
$min-opacity-blue: rgba(53, 66, 105, 0.1);
$like-color: #46d38d;
$disagree-color: #f75959;
$more-info-color: #ffb704;
$dont-understand-color: #faaf3f;
$harvesting-yellow: #fff8c0;
$harvesting-green: #7ed321;
$harvesting-green-light: rgba(126, 211, 33, 0.6);
$harvesting-blue: #00b6ff;
$harvesting-blue-light: rgba(0, 182, 255, 0.4);

$opacity-purple: rgba(84, 4, 215, 0.5);
$linear-gradient: linear-gradient(90deg, $light-grey, $white);

$sentiment-level-0: $red;
$sentiment-level-1: $orange4;
$sentiment-level-2: $light-green;
$sentiment-level-3: $green2;

$warning-alert: $orange;
$warning-alert-text: $orange2;
$timeline-box-number-color: $white;

$app-max-width: 1400px;
$navbar-height: 60px;
$navbar-line-height: 64px;

$alert-mobile-position: 140px;
$alert-mobile-height: 80px;

$margin-section-xxl: 240px;
$margin-section-xl: 200px;
$margin-section-l: 160px;
$margin-section-ml: 140px;
$margin-section-m: 120px;
$margin-section: 90px;
$margin-section-xs: 80px;
$margin-section-xxs: 70px;
$margin-section-xxxs: 60px;
$margin-section-tiny: 30px;

$fonts-dir: 'https://bluenove-assembl-fonts.s3-eu-west-1.amazonaws.com' !default;

@font-face {
  font-family: 'latoRegular';
  src: url('#{$fonts-dir}/Lato-Regular.eot');
  src: local('☺'), url('#{$fonts-dir}/Lato-Regular.woff') format('woff'), url('#{$fonts-dir}/Lato-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoMedium';
  src: url('#{$fonts-dir}/Lato-Medium.eot');
  src: local('☺'), url('#{$fonts-dir}/Lato-Medium.woff') format('woff'), url('#{$fonts-dir}/Lato-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoBold';
  src: url('#{$fonts-dir}/Lato-Bold.eot');
  src: local('☺'), url('#{$fonts-dir}/Lato-Bold.woff') format('woff'), url('#{$fonts-dir}/Lato-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoLight';
  src: url('#{$fonts-dir}/Lato-Light.eot');
  src: local('☺'), url('#{$fonts-dir}/Lato-Light.woff') format('woff'), url('#{$fonts-dir}/Lato-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoSemiBold';
  src: url('#{$fonts-dir}/Lato-Semibold.eot');
  src:
    local('☺'),
    url('#{$fonts-dir}/Lato-Semibold.woff') format('woff'),
    url('#{$fonts-dir}/Lato-Semibold.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoItalic';
  src: url('#{$fonts-dir}/Lato-Italic.eot');
  src: local('☺'), url('#{$fonts-dir}/Lato-Italic.woff') format('woff'), url('#{$fonts-dir}/Lato-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoLightItalic';
  src: url('#{$fonts-dir}/Lato-LightItalic.eot');
  src:
    local('☺'),
    url('#{$fonts-dir}/Lato-LightItalic.woff') format('woff'),
    url('#{$fonts-dir}/Lato-LightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'LatoHairline';
  src: url('#{$fonts-dir}/Lato-Hairline.eot');
  src:
    local('☺'),
    url('#{$fonts-dir}/Lato-Hairline.woff') format('woff'),
    url('#{$fonts-dir}/Lato-Hairline.ttf') format('truetype');
}

// font fold back
$fold-back-font-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;

$font-family: 'latoRegular', $fold-back-font-sans-serif;
$font-family2: 'LatoMedium', $fold-back-font-sans-serif;
$font-family3: 'LatoBold', $fold-back-font-sans-serif;
$font-family4: 'LatoLight', $fold-back-font-sans-serif;
$font-family5: 'LatoSemiBold', $fold-back-font-sans-serif;
$font-family6: 'LatoItalic', $fold-back-font-sans-serif;
$font-family7: 'LatoLightItalic', $fold-back-font-sans-serif;

$font-size-xxxs: 8px;
$font-size-xxs: 10px;
$font-size-xs: 12px;
$font-size-s: 14px;
$font-size-sm: 16px;
$font-size-m: 18px;
$font-size-ml: 25px;
$font-size-l: 30px;
$font-size-xl: 36px;
$font-size-xll: 42px;
$font-size-xxl: 48px;

$title-letter-spacing: 1.7px;
$button-letter-spacing: 1.7px;
$text-letter-spacing: 1.7px;

$btn-radius: 0;
$btn-text-transform: uppercase;

$btn-light-border-width: 2px;
$btn-light-border-style: solid;

$btn-dark-border-width: 2px;
$btn-dark-border-style: solid;

$partner-logo-width: 200px;
$partner-logo-height: 100px;

$line-height-base: 1.428571429 !default;
$line-height: 1.4;
$line-height-small: 1.27;
$line-height-big: 1.5;
$lines-to-show: 3;

$small-hyphen-width: 50px;
$large-hyphen-width: 75px;

$tree-indentation: 20px;
$post-space: 40px;
$post-width: 925px;

$card-popin: 1.02;

// Bootstrap screen sizes https://getbootstrap.com/docs/3.3/css/

$screen-xxs-max: 480px;

$screen-xs-max: 767px;

$screen-sm-min: 768px;
$screen-sm-max: 991px;

$screen-md-min: 992px;
$screen-md-max: 1199px;

$screen-lg-min: 1200px;
$screen-xl-min: 1440px;

$top-post-sticky-top: 60px;

// Proper media-queries examples https://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries

/* Large desktops and laptops */
// @media (min-width: $screen-lg-min) {
//
// }

/* Landscape tablets and medium desktops */
// @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
//
// }

/* Portrait tablets and small desktops */
// @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
//
// }

/* Landscape phones and portrait tablets */
// @media (max-width: $screen-xs-max) {
//
// }

/* Portrait phones and smaller */
// @media (max-width: $screen-xxs-max) {
//
// }
