/*
* CSS document (for those who need it)
*/




/* ------------------------------ */
/* Helpers                        */
/* ------------------------------ */

/* Typo Helpers */
/* ------------ */

/* Font weights and styles */
.light {
	font-weight: 300 !important;
}

.regular {
	font-weight: 400 !important;
}

.medium {
	font-weight: 500 !important;
}

.semi {
	font-weight: 600 !important;
}

.bold {
	font-weight: 700 !important;
}

.italic {
	font-style: italic !important;
}

/* Letter spacings */
.letter-spacing-100 {
	letter-spacing: 0.1em !important;
}

.letter-spacing-150 {
	letter-spacing: 0.15em !important;
}

.letter-spacing-200 {
	letter-spacing: 0.2em !important;
}

/* Text decorations */
.underline,
.underline-hover:hover {
	text-decoration: underline !important;
}

.no-underline,
.no-underline-hover:hover {
	text-decoration: none !important;
}

/* Miscellaneous */
.uppercase {
	text-transform: uppercase !important;
}

.lowercase {
	text-transform: lowercase !important;
}

.wrap {
	white-space: normal !important;
}

.no-wrap {
	white-space: nowrap !important;
}




/* Backgrounds */
/* ----------- */

.bg-blue    { background-color: #62b5e5 !important; }
.bg-green   { background-color: #48a23f !important; }
.bg-yellow  { background-color: #cedc00 !important; }

.bg-white   { background-color: #fff !important; }

.bg-beige   { background-color: #f7faf6 !important; }

.bg-gray-6  { background-color: #f0f0f0 !important; }
.bg-gray-7  { background-color: #eee !important; /* color: #ededed; */ }
.bg-gray-17 { background-color: #d4d4d4 !important; }
.bg-gray-20 { background-color: #ccc !important; }
.bg-gray-40 { background-color: #999 !important; }
.bg-gray-60 { background-color: #666 !important; }
.bg-gray-66 { background-color: #555 !important; /* color: #575757; */ }
.bg-gray-80 { background-color: #333 !important; }
.bg-gray-85 { background-color: #262626 !important; }

.bg-black   { background-color: #000 !important; }




/* Colors */
/* ------ */

.blue    { color: #62b5e5 !important; }
.green   { color: #48a23f !important; }
.yellow  { color: #cedc00 !important; }

.white   { color: #fff !important; }

.beige   { color: #f7faf6 !important; }

.gray-6  { color: #f0f0f0 !important; }
.gray-7  { color: #eee !important; /* color: #ededed; */ }
.gray-17 { color: #d4d4d4 !important; }
.gray-20 { color: #ccc !important; }
.gray-40 { color: #999 !important; }
.gray-60 { color: #666 !important; }
.gray-66 { color: #555 !important; /* color: #575757; */ }
.gray-80 { color: #333 !important; }
.gray-85 { color: #262626 !important; }

.black   { color: #000 !important; }




/* Layout Helpers */
/* -------------- */

/* Text and content alignments */
.text-left {
	text-align: left !important;
}

.text-right {
	text-align: right !important;
}

.text-center {
	text-align: center !important;
}

.text-justify {
	text-align: justify !important;
}

/* Block alignments */
.left {
	margin-right: auto !important;
}

.right {
	margin-left: auto !important;
}

.center {
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Vertical alignments */
.top {
	vertical-align: top !important;
}

.bottom {
	vertical-align: bottom !important;
}

.middle {
	vertical-align: middle !important;
}

/* Displays */
.display-none {
	display: none !important;
}

.display-inline {
	display: inline !important;
}

.display-inline-block {
	display: inline-block !important;
}

.anchor,
.display-block {
	display: block !important;
}

.hidden {
	visibility: hidden !important;
}

.visible {
	visibility: visible !important;
}

/* Overflows */
.overflow-hidden {
	overflow: hidden !important;
}

.overflow-visible {
	overflow: visible !important;
}

.overflow-auto {
	overflow: auto !important;
}

.overflow-scroll {
	overflow: scroll !important;
}




/* Width Helpers */
/* ------------- */

.w5 { width: 5% !important; }
.w6 { width: 6% !important; }
.w7 { width: 7% !important; }
.w8 { width: 8% !important; }
.w9 { width: 9% !important; }
.w10 { width: 10% !important; }
.w11 { width: 11% !important; }
.w12 { width: 12% !important; }
.w13 { width: 13% !important; }
.w14 { width: 14% !important; }
.w15 { width: 15% !important; }
.w16 { width: 16% !important; }
.w17 { width: 17% !important; }
.w18 { width: 18% !important; }
.w19 { width: 19% !important; }
.w20 { width: 20% !important; }
.w25 { width: 25% !important; }
.w30 { width: 30% !important; }
.w33 { width: 33.3333% !important; }
.w35 { width: 35% !important; }
.w40 { width: 40% !important; }
.w45 { width: 45% !important; }
.w50 { width: 50% !important; }
.w55 { width: 55% !important; }
.w60 { width: 60% !important; }
.w65 { width: 65% !important; }
.w66 { width: 66.6666% !important; }
.w70 { width: 70% !important; }
.w75 { width: 75% !important; }
.w80 { width: 80% !important; }
.w85 { width: 85% !important; }
.w90 { width: 90% !important; }
.w100 { width: 100% !important; }




/* Spacing Helpers */
/* --------------- */

/*
m = margin
t = top
r = relative
*/

/* Margins top (relative sizes) */
.mtr025 { margin-top: 0.25em !important; }
.mtr050 { margin-top: 0.50em !important; }
.mtr075 { margin-top: 0.75em !important; }
.mtr100 { margin-top: 1.00em !important; }
.mtr125 { margin-top: 1.25em !important; }
.mtr150 { margin-top: 1.50em !important; }
.mtr175 { margin-top: 1.75em !important; }
.mtr200 { margin-top: 2.00em !important; }
.mtr225 { margin-top: 2.25em !important; }
.mtr250 { margin-top: 2.50em !important; }
.mtr275 { margin-top: 2.75em !important; }
.mtr300 { margin-top: 3.00em !important; }
.mtr325 { margin-top: 3.25em !important; }
.mtr350 { margin-top: 3.50em !important; }
.mtr375 { margin-top: 3.75em !important; }
.mtr400 { margin-top: 4.00em !important; }
.mtr450 { margin-top: 4.50em !important; }
.mtr500 { margin-top: 5.00em !important; }
.mtr600 { margin-top: 6.00em !important; }