/* 

LOGO FONT: Montserrat Classic

--- 01 TYPOGRAPHY SYSTEM

- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights:
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights:
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
             
- Letter spacing
-0.5px
0.75px

--- 02 COLORS

https://imagecolorpicker.com/en

- Primary Color Pallet: 

#1b75bc

#032d68


- Secondary Color Pallet: 
#80c9ee
#49a7e8
#71a7d4
#043698




- Tertiary Color Pallet: 




https://maketintsandshades.com/

#032d68

- Primary 1 Color Tints

#1c4277
#355786
#4f6c95
#6881a4
#8196b4
#9aabc3
#b3c0d2
#cdd5e1
#e6eaf0

- Primary 1 Color Shades

#03295e
#022453
#021f49
#021b3e
#021734
#01122a
#010d1f
#010915
#00040a


#1b75bc

- Primary 2 (secondary) Color Tints
#3283c3
#4991c9
#5f9ed0
#76acd7
#8dbade
#a4c8e4
#bbd6eb
#d1e3f2
#e8f1f8

- Primary 2 (secondary) Color Shades
#1869a9
#165e96
#135284
#104671
#0e3b5e
#0b2f4b
#082338
#051726
#030c13



--- 03 IMAGES

-- https://unsplash.com/

--- 05 SHADOWS
box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);

--- 06 BORDER-RADIUS

Default: 9px
Medium: 11px

--- 07 WHITESPACE

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 28 / 32 / 48 / 64 / 80 / 96 / 128


*/

/* ////////////////////////////////////////////////////////////////////// */

/* General Formats ///////////////////////////////////////////// */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* html {
  /* font-size: 10px; */
/* 10px / 16px = 0.625 = 62.5% */
/* Percentage of user's browser font size setting */
/* font size of our webpage is 62.5% of the user's browser font size */
/* font-size: 62.5%; */
/* }  */

/* body { */
/* background-color: #004247; */

/* font-family: "Rubik", sans-serif;
  line-height: 1;
  font-weight: 400;
  color: #555; */

/* ONLY WORKS if there's nothing absolutely positioned in relation to body element */
/* All elements that overflow the viewport horizontally, will be hidden */
/* If setting below in body doesn't work, type the same line in 'html' element as well and it should work */
/* overflow-x: hidden; */
/* } */

/* text */

/* /////////// NEW FOR DENTAL ////////////////// */

/* Primary text color */
.text-blue-primary {
  color: #032d68;
}

.text-dark-blue {
  color: #021734c7;
}

/* Secondary text color (?) */
.text-light-blue {
  color: #1b75bc;
}

.text-lighter-blue {
  color: #e6eaf0;
}

.text-light-blue-2 {
  color: #104671;
}

.text-blue-secondary {
  color: #1b75bc;
}

.bg-dark-blue {
  background-color: #021734;
}

.bg-light-blue {
  background-color: #e8f1f8;
}

/* //////////////////// Previous /////////////////////////// */

/* .text-lighter-green {
  color: #e6eced;
}

.text-light-green {
  color: #b3c6c8;
} */

/* .text-less-light-green {
  color: #ccd9da;
}

.text-dark-green {
  color: #004247;
}

.text-darker-green {
  color: #00282b;
}

.text-tertiary {
  color: #f4947c;
}

.text-tertiary-light {
  color: #f4c4ac;
} */

.text-shadow {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.156);
}

.text-shadow-light {
  text-shadow: 1px 1px 1px rgba(164, 164, 164, 0.156);
}

/* bg */

/* .bg-less-dark-green {
  background-color: #1a5559;
}

.bg-dark-green {
  background-color: #004247;
} */

.bg-less-darker-green {
  background-color: #002e32;
}

/* .bg-darker-green {
  background-color: #00282b;
} */

/* gradient background */
/* .bg-light-gradient {
  background-image: linear-gradient(to right top, #ffffff, #eaeaea6f);
} */

/* shadow */
.box-shadow {
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.633);
}

/* btn */
/* //////////// Dental //////////////// */
.btn-blue-secondary:link,
.btn-blue-secondary:visited {
  background-color: #1b75bc;
  color: #e8f1f8;
}

.btn-blue-secondary:hover,
.btn-blue-secondary:active {
  background-color: #104671;
  color: #e8f1f8;
  border-color: #e8f1f8;
}

/* //////////// Previous //////////////// */
.btn,
.btn-white-gray,
.btn-white-gray:link,
.btn-white-gray:visited {
  background-color: #e6eced;
  /* border-color: #032d68; */
  /* border-color: #e8f1f8; */

  color: #001a1c;
  /* box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.156); */
}

.btn-white-gray:hover,
.btn-white-gray:active {
  /* background-color: #001415; */
  background-color: #104671;
  border-color: #e8f1f8;
  color: #e8f1f8;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.156);
}

/* .btn-dark-green,
.btn-dark-green:link,
.btn-dark-green:visited {
  background-color: #002124;
  border-color: #e6eced;
  color: #e6eced;
} */

/* .btn-dark-green:hover,
.btn-dark-green:active {
  background-color: #004247;
  border-color: #e6eced;
  color: #e6eced;
} */