:root {
  /* div */
  --containerValue: 100%;
  --negativeMarginX: -0.75rem;
  --basePadding: 1.5rem;
  /* colors */
  --color_main: #31a3dd;
  /*blu*/
  --color_secondary: #FFC300;
  /*orange*/
  --orange: #ed7d21;
  --blue: #31a3dd;
  --blue_facebook: #4c66a4;
  --blue_linkedin: #006599;
  --purple_instagram: #8a3ab9;
  --dark: #697076;
  --black: #2a2e34;
  --white: #FFFFFF;
  --grey: #999999;
  --grey_dark: #707981;
  --gray_light: #f1f1f1;
  --grey_fake: #EEEEEf;
  --btn_grey: #31353a;
  /* fonts */
  --serif: 'Times New Roman';
  --sans-serif: 'Lato';
  --bs-table-bg: #fff;
}

@media screen and (min-width: 1400px) {
  :root {
    --containerValue: calc(1320px - var(--basePadding));
    --negativeMarginX: calc((var(--viewportWidth) - var(--containerValue)) / -2);
    --positiveMarginX: calc(-1*var(--negativeMarginX));
  }
}