Design &
Pattern Library

TYPOGRAPHY

:root {
  --font-primary: 'Roboto', sans-serif;
  --font-headlines: 'Roboto Condensed', sans-serif;
  --font-tertiary: 'Playfair Display', serif;
}

/* Font Helper Classes */
.roboto { font-family: 'Roboto', sans-serif!important; }
.roboto-condensed { font-family: 'Roboto Condensed', sans-serif!important; }
.playfair-display { font-family: 'Playfair Display', serif!important; }
.playfair-display-italic { font-family: 'Playfair Display', serif!important; font-style: italic; }

/* Gutenberg Helper Classes */
.uppercase { text-transform: uppercase!important; }

/* Font Weight Helper Classes */
.fw-100,
.fw-100i {
	font-weight: 100;
}
.fw-300,
.fw-300i {
	font-weight: 300;
}
.fw-400,
.fw-400i {
	font-weight: 400;
}
.fw-500,
.fw-500i {
	font-weight: 500;
}
.fw-600 {
	font-weight: 600;
}
.fw-700,
.fw-700i {
	font-weight: 700;
}
.fw-800 {
	font-weight: 800;
}
.fw-900,
.fw-900i {
	font-weight: 900;
}

SPACING

/* Size Variables */ 
:root {
	--spacer-sm: .5rem;
	--spacer-med: 1rem;
	--spacer-lg: 2rem;
	--spacer-xl: 2.5rem;
}

/* Spacing */
.m-auto { margin: auto!important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacer-sm)!important; }
.mt-2 { margin-top: var(--spacer-med)!important; }
.mt-3 { margin-top: var(--spacer-lg)!important; }
.mt-4 { margin-top: var(--spacer-xl)!important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacer-sm)!important; }
.mr-2 { margin-right: var(--spacer-med)!important; }

.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: var(--spacer-sm)!important; }
.mb-2 { margin-bottom: var(--spacer-med)!important; }
.mb-3 { margin-bottom: var(--spacer-lg)!important; }
.mb-4 { margin-bottom: var(--spacer-xl)!important; }

.ml-0 { margin-left: 0!important; }
.ml-1 { margin-left: var(--spacer-sm)!important; }
.ml-2 { margin-left: var(--spacer-med)!important; }
.ml-3 { margin-left: var(--spacer-lg)!important; }
.ml-4 { margin-left: var(--spacer-xl)!important; }

.p-all-1 { padding: var(--spacer-sm)!important; }
.p-all-2 { padding: var(--spacer-med)!important; }
.p-all-3 { padding: var(--spacer-lg)!important; }
.p-all-4 { padding: var(--spacer-xl)!important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacer-sm)!important; }
.pt-2 { padding-top: var(--spacer-med)!important; }
.pt-3 { padding-top: var(--spacer-lg)!important; }
.pt-4 { padding-top: var(--spacer-xl)!important; }
	
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--spacer-sm)!important; }
.pr-2 { padding-right: var(--spacer-med)!important; }
.pr-3 { padding-right: var(--spacer-lg)!important; }
.pr-4 { padding-right: var(--spacer-xl)!important; }

.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: var(--spacer-sm)!important; }
.pb-2 { padding-bottom: var(--spacer-med)!important; }
.pb-3 { padding-bottom: var(--spacer-lg)!important; }
.pb-4 { padding-bottom: var(--spacer-xl)!important; }

.pl-0 { padding-left: 0!important; }
.pl-1 { padding-left: var(--spacer-sm)!important; }
.pl-2 { padding-left: var(--spacer-med)!important; }
.pl-3 { padding-left: var(--spacer-lg)!important; }
.pl-4 { padding-left: var(--spacer-xl)!important; }

COLORS

/* --------------------------------------------------------------------------
	 ## Color Variables and Helper Classes
   -------------------------------------------------------------------------- */
:root {
  --color-primary: #222;

  --color-accent: #536ba2;
  --color-accent-dark: #37476b;
  
  --color-accent-light: #a4acbd;
  --color-accent-secondary: #b58e31;

  --color-white: #fff !important;
  --color-white-opacity: rgba(255,255,255, 0.9) !important; 

  --color-black: #222 !important;
  --color-black-opacity: rgba(0,0,0, 0.9) !important; 
  
  --color-success: #80A343;
  --color-feedback: #b58e31;
  --color-alert: #CC2723;
  
	--color-gray-light: #F0F2E9;
  --color-gray-dark: #7f807b;
  
  --border-color: #D6D6D6;
  --border-color-dark: #40403E;
  --border-color-accent-secondary: #b58e31;

  --box-shadow: 0 6px 9px 0 rgba(50,54,65,0.05);
  --box-shadow-dark: 0 8px 60px 0 rgba(0,0,0,0.25), 0 12px 90px 0 rgba(0,0,0,0.25);
}

/* Block Color Palette Colors 
 * declared in inc/theme-options.php
*/
.has-accent-color { color: var(--color-accent)!important; }
.has-accent-dark-color { color: var(--color-accent-dark)!important; }
.has-accent-light-color { color: var(--color-accent-light)!important; } 
.has-accent-secondary-color { color: var(--color-accent-secondary)!important; } 

.has-dark-gray-color { color: var(--color-gray-dark)!important; }
.has-light-gray-color { color: var(--color-gray-light)!important; }

.background-client-variable { background-color: #00629c!important; }

.has-black-color,
.has-black-color p {
	color: var(--color-black);
}

.has-white-background-color { background-color: var(--color-white)!important; }
.has-black-background-color { background-color: var(--color-black)!important; }

.has-accent-background-color { background-color: var(--color-accent)!important; }
.has-accent-dark-background-color { background-color: var(--color-accent-dark)!important; }
.has-accent-light-background-color { background-color: var(--color-accent-light)!important; }
.has-accent-secondary-background-color { background-color: var(--color-accent-secondary)!important; }

.has-dark-gray-background-color { background-color: var(--color-gray-dark)!important; }
.has-light-gray-background-color { background-color: var(--color-gray-light)!important; }

BORDER

/* Border Color Variables */
:root {
  
  /* Color - Blue */
  --color-accent: #536ba2;
  --color-accent-dark: #37476b;
  --color-accent-light: #a4acbd;
  
  /* Color - Gold */
  --color-accent-secondary: #b58e31;

  /* Border - Gray */
  --border-color: #D6D6D6;
  --border-color-dark: #40403E;
}

/* Border Helper Classes */
.border-color-dark { border-color: var(--border-color-dark)!important; }
.border-accent-color { border-color: var(--color-accent)!important; }
.border-accent-color-secondary { border-color: var(--color-accent-secondary)!important; }
.border-accent-light { border-color: var(--color-accent-light)!important; }
.border-accent-dark { border-color: var(--color-accent-dark)!important; }

.border { border: 1px solid var(--border-color); }
.bt  { border-top: 1px solid var(--border-color); }
.br { border-right: 1px solid var(--border-color); }
.bb { border-bottom: 1px solid var(--border-color); padding-bottom: 30px!important; }
.bl { border-left: 1px solid var(--border-color); }

.b-0  { border: 0 !important; }
.bt-0 { border-top: 0 !important; }
.br-0 { border-right: 0 !important; }
.bb-0 { border-bottom: 0 !important; }
.bl-0 { border-left: 0 !important; }

.bt-small { border-top: 2px solid var(--border-color); }
.br-small { border-right: 2px solid var(--border-color); }
.bb-small { border-bottom: 2px solid var(--border-color); }
.bl-small { border-left: 2px solid var(--border-color); }

.bt-medium { border-top: 5px solid var(--border-color); }
.br-medium { border-right: 5px solid var(--border-color); }
.bb-medium { border-bottom: 5px solid var(--border-color); }
.bl-medium { border-left: 5px solid var(--border-color); }

.bt-large { border-top: 10px solid var(--border-color); }
.br-large { border-right: 10px solid var(--border-color); }
.bb-large { border-bottom: 10px solid var(--border-color); }
.bl-large { border-left: 10px solid var(--border-color); }

LINE STYLING

/* Line Styling */
.line-styling { position: relative; padding-top: 12px!important; }
.line-styling::before { content: '';
  position: absolute; top: 0; left: 0;
  width: 16px; height: 4px;
  background: var(--color-accent-secondary);
}

ANIMATIONS

/* Animate Scale */
.animate-scale { overflow: hidden; }
.animate-scale img { backface-visibility: hidden;
	transition: all .35s;
	transform: scale(1);
}
.animate-scale:hover img {
	transform: scale(1.0125);
  opacity: .9;
}