/******** Colors ********/
:root {
    --color-red: #c12017;
    --color-red-dark: #851714;
    --color-orange: #f1644a;
    --color-pink-dark: #a81b38;
  
    --color-black: #000;
    --color-white: #fff;
    --color-white-dark: #f2f2f2;
    --color-gray-lighter: #ebebeb;
    --color-gray-light: #ccc;
    --color-gray-light2: #f6f6f6;
    --color-gray-normal: #cdcdcd;
    --color-gray: #cccccc;
    --color-gray-dark: #919191;
    --color-gray-darker: #51535a;
    --color-gray-darker2: #999999;
    
    
    --color-gray-darker3: #20252b;
    --color-gray-darker4: #3d4047;
    --color-body: #333;

    --color-yellow: #ffda00;
    --color-green: #00d764;
  
    
    /******** Transition Timing ********/
    --transition-time: 0.2s;
  
    /******** Fonts ********/
    --body-font: 'Roboto', sans-serif;
    --body-size-xs: 14px;
    --body-size: 16px;
    --body-size-xl: 18px;
  
    /******** Spacer ********/
    --spacer: 1rem;
  
    /******** Breakpoints ********/
    --xs: 400px; /* Mini */
    --md: 768px; /* Tablet */
    --lg: 970px; /* Desktop */
    --xl: 1170px; /* Desktop XL */
  
    --xs-rem: 25rem; /* Mini */
    --md-rem: 48rem; /* Tablet */
    --lg-rem: 60.625rem; /* Desktop */
    --xl-rem: 73.125rem; /* Desktop XL */
  }