/*!
 |-----------------------------------------------------------------------------------------------------------
 |
 |
 |
 | Root Variables
 |
 |
 |
 |-----------------------------------------------------------------------------------------------------------
*/
:root {
  /*
   |-----------------------------------------------------------
   |
   | Colors
   |
   |-----------------------------------------------------------
  */
  /*
   |--------------------------------
   | Monochrome
   |--------------------------------
  */
  --white: #ffffff;
  --black: #000000;
  --gray-1: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #6c757d;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --gray-10: #181818;
  /*
   |--------------------------------
   | Basic System Colors
   |--------------------------------
  */
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --type-page: #60C4B3;
  --type-post: #7CAAC7;
  --type-event: #AA89B9;
  --type-form: #D999B7;
  --type-gallery: #E88686;
  --type-image: #E5AF36;
  --type-video: #B5AC82;
  --type-doc: #83B583;
  --type-unknown: var(--gray);
  --info-1: #A6D1FF;
  --info-2: #6FB4FF;
  --info-3: #3798FF;
  --info-4: #007BFF;
  --info-5: #0060C8;
  --info-6: #004691;
  --info-7: #002B59;
  --info: var(--info-4);
  --text-color-on-info: var(--white);
  --success-1: #B4E0BE;
  --success-2: #85CD96;
  --success-3: #57BA6D;
  --success-4: #28a745;
  --success-5: #1F8336;
  --success-6: #175F27;
  --success-7: #0E3A18;
  --success: var(--success-4);
  --text-color-on-sucess: var(--white);
  --warning-1: #FFF0CA;
  --warning-2: #FFE7A9;
  --warning-3: #FFDE89;
  --warning-4: #FFD568;
  --warning-5: #C8A752;
  --warning-6: #91793B;
  --warning-7: #594B24;
  --warning: var(--warning-4);
  --text-color-on-warning: var(--dark);
  --danger-1: #F3B8BE;
  --danger-2: #EB8D96;
  --danger-3: #E4616D;
  --danger-4: #dc3545;
  --danger-5: #AC2A36;
  --danger-6: #7D1E27;
  --danger-7: #4D1318;
  --danger: var(--danger-4);
  --text-color-on-danger: var(--white);
  /*
   |--------------------------------
   | Site Colors
   |--------------------------------
  */
  --light: var(--gray-2);
  --gray: var(--gray-5);
  --dark: var(--gray-10);
  --primary-1: #DDEDFA;
  --primary-2: #8eb7f0;
  --primary-3: #4873ae;
  --primary-4: #002E6D;
  --primary-5: #022351;
  --primary-6: #021939;
  --primary-7: #010e20;
  --primary: var(--primary-4);
  --text-color-on-primary: var(--white);
  --text-color-on-primary-dark: var(--white);
  --secondary-1: #f9e4cd;
  --secondary-2: #feca90;
  --secondary-3: #f4ae60;
  --secondary-4: #f18d1e;
  --secondary-5: #be6a0c;
  --secondary-6: #995911;
  --secondary-7: #5e3508;
  --secondary: var(--secondary-4);
  --text-color-on-secondary: var(--white);
  --text-color-on-secondary-dark: var(--white);
  --third-1: #d6f2ff;
  --third-2: #89d6f8;
  --third-3: #4bbef0;
  --third-4: #009ADE;
  --third-5: #0679ac;
  --third-6: #055375;
  --third-7: #023044;
  --third: var(--third-4);
  --text-color-on-third: var(--white);
  --text-color-on-third-dark: var(--white);
  --fourth-1: #d4fff9;
  --fourth-2: #a7e2da;
  --fourth-3: #79beb5;
  --fourth-4: #52a69b;
  --fourth-5: #3a877d;
  --fourth-6: #1d5c54;
  --fourth-7: #09302b;
  --fourth: var(--fourth-4);
  --text-color-on-fourth: var(--dark);
  --text-color-on-fourth-dark: var(--white);

  /*
   |-----------------------------------------------------------
   |
   | Buttons
   |
   |-----------------------------------------------------------
  */
  --btn-letter-spacing: 0;
  --btn-border-width: 1px;
  --btn-border-style: solid;
  --btn-border-radius: var(--border-radius);
  --btn-border-radius-rounded: 100px;
  --btn-text-transform: none;
  --btn-font-weight: var(--font-weight-semi-bold);
  --btn-font-family: var(--font-family-sans-serif);
  --btn-sm-font-size: 14px;
  --btn-sm-padding-y: 8px;
  --btn-sm-padding-x: 20px;
  --btn-md-font-size: 16px;
  --btn-md-padding-y: 10px;
  --btn-md-padding-x: 25px;
  --btn-lg-font-size: 18px;
  --btn-lg-padding-y: 15px;
  --btn-lg-padding-x: 35px;

  /*
   |-----------------------------------------------------------
   |
   | Content Area
   |
   |-----------------------------------------------------------
  */
  /*
   |--------------------------------
   | Medium / Default
   |--------------------------------
  */
  --content-area-p-x: 45px;
  --content-area-p-x-tablet: 25px;
  --content-area-p-x-phone: 0px;
  /*
   |--------------------------------
   | Small
   |--------------------------------
  */
  --content-area-sm-p-t: 45px;
  --content-area-sm-p-b: 30px;
  --content-area-sm-p-t-tablet: 45px;
  --content-area-sm-p-b-tablet: 30px;
  --content-area-sm-p-t-phone: 45px;
  --content-area-sm-p-b-phone: 30px;
  /*
   |--------------------------------
   | Medium
   |--------------------------------
  */
  --content-area-md-p-t: 60px;
  --content-area-md-p-b: 30px;
  --content-area-md-p-t-tablet: 60px;
  --content-area-md-p-b-tablet: 30px;
  --content-area-md-p-t-phone: 60px;
  --content-area-md-p-b-phone: 30px;
  /*
   |--------------------------------
   | Large
   |--------------------------------
  */
  --content-area-lg-p-t: 90px;
  --content-area-lg-p-b: 60px;
  --content-area-lg-p-t-tablet: 90px;
  --content-area-lg-p-b-tablet: 60px;
  --content-area-lg-p-t-phone: 60px;
  --content-area-lg-p-b-phone: 30px;
  /*
   |--------------------------------
   | Extra Large
   |--------------------------------
  */
  --content-area-xl-p-t: 120px;
  --content-area-xl-p-b: 90px;
  --content-area-xl-p-t-tablet: 120px;
  --content-area-xl-p-b-tablet: 90px;
  --content-area-xl-p-t-phone: 60px;
  --content-area-xl-p-b-phone: 30px;
  /*
   |--------------------------------
   | XX Large
   |--------------------------------
  */
  --content-area-xxl-p-t: 150px;
  --content-area-xxl-p-b: 120px;
  --content-area-xxl-p-t-tablet: 150px;
  --content-area-xxl-p-b-tablet: 120px;
  --content-area-xxl-p-t-phone: 90px;
  --content-area-xxl-p-b-phone: 60px;

  /*
   |-----------------------------------------------------------
   |
   | Transition
   |
   |-----------------------------------------------------------
  */
  --transition-style-1: cubic-bezier(.25, .46, .45, .94);
  --transition-200: var(--transition-style-1) 200ms;
  --transition-300: var(--transition-style-1) 300ms;
  --transition-360: var(--transition-style-1) 360ms;
  --transition-400: var(--transition-style-1) 400ms;
  --transition-500: var(--transition-style-1) 500ms;