@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Oswald/Oswald-Regular.ttf');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/Oswald/Oswald-Bold.ttf');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: lighter;
  src: url('/fonts/Oswald/Oswald-Light.ttf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 100;
  src: url('/fonts/Proxima Nova/Proxima Nova Thin.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: italic;
  font-weight: 100;
  src: url('/fonts/Proxima Nova/Proxima Nova Thin Italic.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/Proxima Nova/Proxima Nova Light.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/Proxima Nova/Proxima Nova Light Italic.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Proxima Nova/Proxima Nova Regular.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/Proxima Nova/Proxima Nova Regular Italic.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Proxima Nova/Proxima Nova Semibold.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/Proxima Nova/Proxima Nova Semibold Italic.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: bold;
  src: url('/fonts/Proxima Nova/Proxima Nova Bold.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: italic;
  font-weight: bold;
  src: url('/fonts/Proxima Nova/Proxima Nova Bold Italic.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/Proxima Nova/Proxima Nova Extrabold.otf');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/Proxima Nova/Proxima Nova Extrabold Italic.otf');
}

:root {
  --color-info: #94c9ed;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary: #17365d;
  --color-primary-light: #24518a;
  --color-active: var(--color-primary);
  --color-border: #f5f2e4;
  --color-shade: rgba(0, 0, 0, 0.8);
  --color-shade-clear: rgba(0, 0, 0, 0);

  --grey: #4a4a4a;
  --grey-dark: #313131;
  --light-grey: #e6e6e6;
  --light-grey-2: #f8f8f8;
  --light-grey-3: #e9e9e9;

  --font-family: 'Proxima Nova', serif;
  --font-family-title: 'Oswald', sans-serif;
  --font-family-heading: 'Oswald', sans-serif;
  --font-family-buttons: 'Proxima Nova', serif;

  --container-large-desktop: 970px;

  --navbar-height: 95px;
  --navbar-height-mobile: 60px;
  --navbar-bg: var(--color-white);
  --logo-height: 84px;

  --menu-slidebar-width: 250px;

  --home-second-life-bg: #fcfbf7;
  --home-heading-height: 650px;
  --home-about-height: 200px;

  --footer-bg: #f2ecd8;

  --product-thumbnail-width: 175px;

  --news-thumbnail-width: 300px;
  --news-thumbnail-height: 350px;

  --post-sidebar-bg: #fcfbf7;

  --pagination-color: var(--grey);
  --pagination-hover-color: var(--color-white);
  --pagination-active-color: var(--color-white);
  --pagination-active-bg: var(--grey-dark);
}

body {
  opacity: 1;
  transition: opacity 0.25s;
  font-family: var(--font-family);
}

body h1,
body h2,
body h3,
body h4,
body h5 {
  font-family: var(--font-family-title);
}