@import url('https://fonts.googleapis.com/css?family=Lato|Roboto');

$font-base: 16 !default;
$small-max: 767px !default;
$medium: 768px !default;
$large: 922px !default;
$x-large: 1200px !default;

$theme-font-color: createColor($black) !default;
$theme-background-color: createColor($white) !default;

$body-font-family: 'Roboto', sans-serif !default;
$body-font-size: calculateRem(16) !default;
$body-font-weight: 400 !default;
$body-line-height: 1.6 !default;

$hr-color: var(--color-light-grey-lighter) !default;
$hr-height: calculateRem(2) !default;
$hr-margin: calculateRem(20) 0 !default;

:root {
  --theme-font-size: #{$body-font-size};
  --theme-font-color: #{$theme-font-color};
  --theme-background-color: #{$theme-background-color};
  --theme-body-font-family: #{$body-font-family};
}

html {
  font-size: 100%;
  &.has-clip {
    overflow: hidden;
  }
}

body, html {
  min-height: 100%;
  position: relative;
}

body {
  --font-weight: #{$body-font-weight};
  --line-height: #{$body-line-height};
  --font-color: var(--theme-font-color);
  --background-color: var(--theme-background-color);
  --font-family: var(--theme-body-font-family);

  background-color: var(--background-color);
  color: var(--font-family);
  font-family: var(--font-family);
  font-style: normal;
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  min-height: 100%;
  padding: 0;
}

body, html, h1, h2, h3, h4, h5, h6, ul, ol, p, dt, dd, div  {
  --font-size: var(--theme-font-size);

  font-size: var(--font-size);
  margin: 0;
  padding: 0;
}

hr {
  --background-color: #{$hr-color};
  --height: #{$hr-height};
  --margin: #{$hr-margin};

  background-color: var(--background-color);
  border: none;
  height: var(--height);
  margin: var(--margin);
}

p {
  --margin: 0 0 #{calculateRem(10)} 0;
  margin: var(--margin);
}

p, span, small, i, b, strong {
  color: inherit;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
  position: relative;
}

*, ::after, ::before {
  box-sizing: border-box;
}

@keyframes spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}