/*
	Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
	Set body colors and margin.
*/
html {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: #222;
  background-color: #f5f5f5; }

/*
	Correct display in IE 9-.
	Give images display: block to be responsive.
*/
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu, img {
  display: block; }

/*
	Correct margin in IE 8.
*/
figure {
  margin: 1em 40px; }

/*
	Styles for  headers.
*/
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  margin: 0.7em 0;
  font-weight: 500; }
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: #555555;
    font-weight: 200; }

h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.15em; }

h4 {
  font-size: 1em; }

h5 {
  font-size: 0.8em; }

h6 {
  font-size: 0.7em; }

/*
	Correct box-sizing in Firefox.
	Style for horizontal rule.
*/
hr {
  box-sizing: content-box;
  line-height: 1.2;
  margin: 0.7em 0;
  height: 0;
  border: 0;
  border-top: 1px solid #cfcfcf; }

/*
	Style for all small text and size for sub and sup.
*/
small, sub, sup {
  font-size: 75%; }

/*
	Style for paragraph and preformatted elements.
*/
p, pre {
  margin: 0 0 0.6em; }

/*
	Style for lists.
*/
ul, ol {
  margin-top: 0;
  margin-bottom: 0.6em; }
  ul ul, ul ol, ol ul, ol ol {
    margin-bottom: 0; }

/*
	Styles for code and preformatted.
*/
samp, kbd, code, pre {
  font-family: monospace, monospace;
  font-size: 1em; }

kbd, code, pre {
  padding: 2px 4px;
  border-radius: 4px; }

code, pre {
  background-color: gainsboro; }

kbd {
  color: #fefefe;
  background-color: #222; }

pre {
  display: block;
  word-break: break-all;
  word-wrap: break-word; }
  pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0; }

/*
	Style for hyperlinks, remove underline.
	Remove gray background on active links in IE 10.
	Remove outline on focused links when they are also active or hovered.
*/
a {
  background-color: transparent;
  text-decoration: none;
  color: #2678b3; }
  a:active, a:hover {
    outline-width: 0;
    color: #3793d5; }
  a:visited {
    color: #1d5c89; }
    a:visited:active, a:visited:hover {
      color: #2678b3; }

/*
	Prevent the duplicate application of `bolder` in Safari 6.
*/
b, strong {
  font-weight: inherit; }

/*
	Correct font weight in Chrome, Edge, Safari.
*/
b, strong {
  font-weight: bolder; }

/*
	Correct font style in Android 4.3-.
*/
dfn {
  font-style: italic; }

/*
	Remove botom border in Firefox 39-.
	Correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted; }

/*
	Style for mark.
*/
mark {
  background-color: #ffff33;
  color: #222; }

/*
	Styling for hidden elements.
	Correct display for template in IE.
	Correct display for audio:not([controls]) in iOS 4-7.	
*/
[hidden], .hidden, template, audio:not([controls]) {
  display: none; }

audio:not([controls]) {
  height: 0; }

/*
	Correct display in IE 9-.
*/
audio, video, progress {
  display: inline-block; }

/*
	Styles for sub and sup.
	Prevent `sub` and `sup` elements from affecting the line height.
	Correct vertical alignment of progress in Chrome, Firefox, and Opera.
*/
sub, sup, progress {
  vertical-align: baseline; }

sub, sup {
  line-height: 0;
  position: relative; }

sub {
  bottom: -0.25em; }

sup {
  top: -0.5em; }

/*
	Remove the border on images inside links in IE 10-.
	Make images responsive.
*/
img {
  border-style: none;
  max-width: 100%; }

/*
	Hide the overflow in IE.
*/
svg:not(:root) {
  overflow: hidden; }

/*
	Show the overflow in IE and Edge.
*/
button, input, hr {
  overflow: visible; }

/*
	Style for buttons and input elements.
*/
button, input, optgroup, select, textarea {
  font-family: '"Helvetica Neue", Helvetica, sans-serif';
  font-size: 100%;
  line-height: 1.2;
  margin: 0; }

/*
	Remove the inheritance of text transform in Edge, Firefox, and IE.
*/
button, select {
  text-transform: none; }

/*
	Correct styling for iOS, Safari and Firefox.
*/
button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button; }
  button::-moz-focus-inner, html [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0; }
  button:-moz-focusring, html [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText; }

/*
	Style for fieldset.
*/
fieldset {
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  margin: 0 2px;
  padding: 0.35em 0.65em 0.75em; }

/*
	Add correct box sizing and remove padding in IE 10-.
*/
[type="checkbox"], [type="radio"], legend {
  box-sizing: border-box;
  padding: 0; }

/*

	Correct text wrapping and color inheritance from `fieldset` elements in Edge and IE.
	Remove the padding so developers are not caught out when they zero out `fieldset` 
	elements in all browsers.
*/
legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal; }

/*
	Remove the default vertical scrollbar in IE.
*/
textarea {
  overflow: auto; }

/*
	Correct the cursor style of increment and decrement buttons in Chrome.
	Make images responsive.
*/
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button, img {
  height: auto; }

/*
	Correct styling in Chrome and Safari.
	Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px; }
  [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none; }

/*
	Correct the inability to style clickable types in iOS and Safari.
	Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit; }

/*
	Mixin for button color variant. 
	Parameters:
	- $btn-variant-color                  :	The text color of the button variant.
	- $btn-variant-bg-color               :	The background color of the button variant.
	- $btn-variant-hover-style	          :	Hover/active/focus style of the button variant. [1]
	- $btn-variant-hover-style-percentage :	Hover/active/focus style of the button variant percentage modifier.
	Notes:
	- [1] : The values that $btn-variant-hover-style can take are `lighten` and `darken`. The inside condition
		only checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
	- [2] : Do not use this mixin directly, use `make-btn-style` instead.
*/
/*
	Mixin for the buttons.
	Parameters:
	- $btn-name                   :	The class name of the buttons.
	- $btn-border                 :	The border of the buttons.
	- $btn-border-radius          :	The border-radius of the buttons.
	- $btn-margin                 :	The margin of the buttons.
	- $btn-padding                :	The padding of the buttons.
	- $btn-color                  :	The text color of the buttons.
	- $btn-bg-color               :	The background color of the buttons.
	- $btn-hover-style            :	Hover/active/focus style of the buttons. [1]
	- $btn-hover-style-percentage :	Hover/active/focus style of the buttons percentage modifier.
	- $btn-cursor                 :	The cursor style when hovering over the buttons.
	- $btn-disabled-cursor        :	The cursor style when hovering over the buttons whie disabled.
	- $btn-disabled-opacity       :	The opacity of the buttons when disabled.
	Notes:
	- [1] : The values that $btn-hover-style can take are `lighten` and `darken`. The inside condition only 
		checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
	- [2] : This only creates a basic button style. For more styles use `make-btn-style`.
*/
/*
	Mixin for button styles. 
	Parameters:
	- $btn-name                         : The class name of the buttons. [1]
	- $btn-style-name                   : The class name of the button style.
	- $btn-style-color                  : The text color of the button style.
	- $btn-style-bg-color               : The background color of the button style.
	- $btn-style-hover-style	        : Hover/active/focus style of the button style. [2][3]
	- $btn-style-hover-style-percentage : Hover/active/focus style of the button style percentage modifier.[3]
	Notes:
	- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
		the specified style will not work correctly.
	- [2] : The values that $btn-style-hover-style can take are `lighten` and `darken`. The inside condition
		only checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
	- [3] : The values of $btn-style-hover-style and $btn-style-hover-style-percentage default to `lighten`
		and `7.5%` if not specified.
	- [4] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
		`make-btn`.
*/
/*
	Mixin for button sizes. 
	Parameters:
	- $btn-name           : The class name of the buttons. [1]
	- $btn-size-name      : The class name of the button size.
	- $btn-size-padding   : The padding of the button size.
	- $btn-size-font-size : The font-size of the button size.
	Notes:
	- [1] : The value of $btn-name must be the same as the value specified when using `make-btn`, otherwise
		the specified style will not work correctly.
	- [2] : This mixin should be used in combination with `make-btn` and is suggested that you use it after
		`make-btn`.
*/
.btn, a.btn, a.btn:visited {
  display: inline-block;
  border: 0;
  border-radius: 4px;
  margin: 2px 0;
  padding: 6px 12px;
  color: #2a2a2a;
  background: #eaeaea;
  cursor: pointer; }
  .btn:hover, .btn:active, .btn:focus, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited:hover, a.btn:visited:active, a.btn:visited:focus {
    background: #fdfdfd; }
  .btn.disabled, .btn[disabled], .btnfieldset[disabled], a.btn.disabled, a.btn[disabled], a.btnfieldset[disabled], a.btn:visited.disabled, a.btn:visited[disabled], a.btn:visitedfieldset[disabled] {
    cursor: not-allowed;
    opacity: 0.65; }

.btn.blue, a.btn.blue, a.btn.blue:visited {
  color: #eeeeee;
  background: #3f84b3; }
  .btn.blue:hover, .btn.blue:active, .btn.blue:focus, a.btn.blue:hover, a.btn.blue:active, a.btn.blue:focus, a.btn.blue:visited:hover, a.btn.blue:visited:active, a.btn.blue:visited:focus {
    background: #5597c3; }

.btn.green, a.btn.green, a.btn.green:visited {
  color: #eeeeee;
  background: #2db747; }
  .btn.green:hover, .btn.green:active, .btn.green:focus, a.btn.green:hover, a.btn.green:active, a.btn.green:focus, a.btn.green:visited:hover, a.btn.green:visited:active, a.btn.green:visited:focus {
    background: #3bcf57; }

.btn.red, a.btn.red, a.btn.red:visited {
  color: #eeeeee;
  background: #ea4848; }
  .btn.red:hover, .btn.red:active, .btn.red:focus, a.btn.red:hover, a.btn.red:active, a.btn.red:focus, a.btn.red:visited:hover, a.btn.red:visited:active, a.btn.red:visited:focus {
    background: #ee6a6a; }

.btn.lg {
  padding: 9px 15px;
  font-size: 135%; }

.btn.sm {
  padding: 4px 8px;
  font-size: 80%; }

/*
	Mixin for responsive, mobile-first grid. 
	Parameters:
	- $container-name    :	The class name of the container for the grid.
	- $container-padding :	The left and right padding of the container. [1]
	- $row-name          :	The class name of the grid's rows.
	- $col-name          :	The class name of the grid's columns.
	- $col-number        :	The amount of columns in the grid.
	- $xs-prefix         : 	Class prefix for extra small screens.
	- $sm-prefix         : 	Class prefix for small screens.
	- $md-prefix         : 	Class prefix for medium screens.
	- $lg-prefix         : 	Class prefix for large screens.
	- $hide-suffix       : 	Class suffix for hidden columns. [2]
	- $sm-breakpoint     : 	Breakpoint for small screens.
	- $md-breakpoint     : 	Breakpoint for medium screens.
	- $lg-breakpoint     : 	Breakpoint for large screens.
	Notes:
	- [1] : The padding of the container might cause the page to grow by $container-padding to the right. This 
			can be fixed either via @media queries or setting the padding to 0.
	- [2] :	Columns with the $hide-suffix will be only hidden in the screen size specified.
	- [3] :	Refer to https://github.com/Chalarangelo/mini.css/wiki/Grid for additional information.
*/
.grid-container {
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  width: 100%; }
  .grid-container * {
    box-sizing: border-box; }

.row:before, .row:after {
  content: "";
  display: table;
  clear: both; }

.col {
  float: left;
  padding: 12px; }

.xs-1 {
  width: 8.33333%; }

.xs-2 {
  width: 16.66667%; }

.xs-3 {
  width: 25%; }

.xs-4 {
  width: 33.33333%; }

.xs-5 {
  width: 41.66667%; }

.xs-6 {
  width: 50%; }

.xs-7 {
  width: 58.33333%; }

.xs-8 {
  width: 66.66667%; }

.xs-9 {
  width: 75%; }

.xs-10 {
  width: 83.33333%; }

.xs-11 {
  width: 91.66667%; }

.xs-12 {
  width: 100%; }

.sm-no,
.md-no,
.lg-no {
  display: block; }

.xs-no {
  display: none; }

@media (min-width: 768px) {
  .sm-1 {
    width: 8.33333%; }

  .sm-2 {
    width: 16.66667%; }

  .sm-3 {
    width: 25%; }

  .sm-4 {
    width: 33.33333%; }

  .sm-5 {
    width: 41.66667%; }

  .sm-6 {
    width: 50%; }

  .sm-7 {
    width: 58.33333%; }

  .sm-8 {
    width: 66.66667%; }

  .sm-9 {
    width: 75%; }

  .sm-10 {
    width: 83.33333%; }

  .sm-11 {
    width: 91.66667%; }

  .sm-12 {
    width: 100%; }

  .xs-no,
  .md-no,
  .lg-no {
    display: block; }

  .sm-no {
    display: none; } }
@media (min-width: 1024px) {
  .md-1 {
    width: 8.33333%; }

  .md-2 {
    width: 16.66667%; }

  .md-3 {
    width: 25%; }

  .md-4 {
    width: 33.33333%; }

  .md-5 {
    width: 41.66667%; }

  .md-6 {
    width: 50%; }

  .md-7 {
    width: 58.33333%; }

  .md-8 {
    width: 66.66667%; }

  .md-9 {
    width: 75%; }

  .md-10 {
    width: 83.33333%; }

  .md-11 {
    width: 91.66667%; }

  .md-12 {
    width: 100%; }

  .xs-no,
  .sm-no,
  .lg-no {
    display: block; }

  .md-no {
    display: none; } }
@media (min-width: 1280px) {
  .lg-1 {
    width: 8.33333%; }

  .lg-2 {
    width: 16.66667%; }

  .lg-3 {
    width: 25%; }

  .lg-4 {
    width: 33.33333%; }

  .lg-5 {
    width: 41.66667%; }

  .lg-6 {
    width: 50%; }

  .lg-7 {
    width: 58.33333%; }

  .lg-8 {
    width: 66.66667%; }

  .lg-9 {
    width: 75%; }

  .lg-10 {
    width: 83.33333%; }

  .lg-11 {
    width: 91.66667%; }

  .lg-12 {
    width: 100%; }

  .xs-no,
  .sm-no,
  .md-no {
    display: block; }

  .lg-no {
    display: none; } }
/*
	Mixin for the forms.
	Parameters:
	- $frm-name                  :	The class name of the form.
	- $frm-border                :	The border of the form elements.
	- $frm-border-radius         :	The border-radius of the form elements.
	- $frm-margin                :	The margin of the form elements.
	- $frm-padding               :	The padding of the form elements.
	- $frm-focus-color           :	The color used to mark the focused form element.
	- $frm-invalid-color         :	The color used to mark an invalid form element.
	- $frm-disabled-cursor       :	The cursor style when hovering over disabled form elements.
	- $frm-disabled-opacity      :	The opacity of the form elements when disabled.
	- $frm-readonly-bg-color     :  The background color of the form elements when they are readonly.
	- $frm-readonly-border-color :	The border color of the form elements when they are readonly.
	- $frm-select-height         :	The height for non-multiline select elements in the form.
	- $frm-label-margin          :	The margin for the form's label elements.
	- $frm-ctrl-group-name       :	The class name of the control groups in the form.
	- $frm-ctl-group-margin      :	The margin for control groups inside the form.
	- $frm-inline-name           :	The class name for forms with inline style.
	- $frm-aligned-name          :	The class name for forms with aligned style.
	- $frm-aligned-label-width   :	The width of labels in forms with aligned style.	
	Notes:
	- [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling.
		Please use the button styles and mixins provided to properly style them to your liking.
*/
.frm input[type="color"], .frm input[type^="date"], .frm input[type$="time"], .frm input[type="email"],
.frm input[type="month"], .frm input[type="week"], .frm input[type="text"], .frm input[type="password"],
.frm input[type="url"], .frm input[type="number"], .frm input[type="search"], .frm input[type="tel"],
.frm select, .frm textarea {
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none; }
.frm input:not([type]) {
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: none; }
.frm input, .frm select, .frm textarea {
  display: block;
  margin: 0.2em;
  padding: 0.3em; }
  .frm input:focus, .frm select:focus, .frm textarea:focus {
    border-color: #2678b3; }
  .frm input[disabled], .frm select[disabled], .frm textarea[disabled] {
    cursor: not-allowed;
    opacity: 0.65; }
  .frm input:invalid, .frm input:focus:invalid, .frm input:focus:invalid:focus, .frm select:invalid, .frm select:focus:invalid, .frm select:focus:invalid:focus, .frm textarea:invalid, .frm textarea:focus:invalid, .frm textarea:focus:invalid:focus {
    border-color: #e9322d; }
  .frm input[readonly], .frm select[readonly], .frm textarea[readonly] {
    background-color: gainsboro;
    border-color: #b5b5b5; }
.frm input[type="checkbox"], .frm input[type="radio"] {
  display: inline-block; }
.frm select {
  height: 1.9em; }
  .frm select[multiple] {
    height: auto; }
.frm label {
  margin: 0.5em 0 0 0.2em; }
.frm.inline input, .frm.inline select, .frm.inline textarea, .frm.inline label, .frm.aligned input, .frm.aligned select, .frm.aligned textarea, .frm.aligned label {
  display: inline-block; }
.frm.inline .ctrl-group {
  display: inline-block; }
.frm.aligned .ctrl-group label {
  text-align: right;
  vertical-align: middle;
  width: 15em;
  margin-top: 0; }
.frm .ctrl-group {
  margin: 0 0 0.3em 0; }

/*
	Mixin for the tables.
	Parameters:
	- $tbl-name                  :	The class name of the table.
	- $tbl-border                :	The border of the table and cells. [1]
	- $tbl-margin                :	The margin of the table cells.
	- $tbl-padding               :	The padding of the table cells.
	- $tbl-head-bg-color         :	The color of the thead background.
	- $tbl-head-color            :	The color of the thead text.
	- $tbl-body-bg-color         :	The color of the even-numbered rows in tbody.
	- $tbl-body-alt-bg-color     :	The color of the odd-numbered rows in tbody.
	- $tbl-body-color            :  The color of the text in tbody.
	- $tbl-horizontal-name       :	The class name for the horizontal style table.
	- $tbl-bordered-name         :	The class name for the bordered style table.
	Notes:
	- [1] : This style will apply to the table and cells. All styles applied to 
		the table (horizontal, bordered) will use the same style of border.
*/
.tbl {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #bdbdbd; }
  .tbl td, .tbl th {
    overflow: visible;
    border-left: 1px solid #bdbdbd;
    border-bottom: none;
    margin: 0;
    padding: 0.5em; }
  .tbl thead {
    background-color: #d9d9d9;
    color: #111;
    text-align: left; }
  .tbl tbody {
    background-color: #f5f5f5;
    color: #111; }
    .tbl tbody tr:nth-child(2n-1) {
      background-color: #ececec; }
  .tbl.hor td, .tbl.hor th {
    border-left: none;
    border-bottom: 1px solid #bdbdbd; }
  .tbl.bor td, .tbl.bor th {
    border-bottom: 1px solid #bdbdbd; }

/*
	Image thumbnail style mixin. [1]
	Parameters:
	- $thumb-name          : 	The class name for the thumbnail style.
	- $thumb-padding       :	The padding between the image and the border.
	- $thumb-border	       :	The style of the thumbnail's border.
	- $thumb-border-radius :	The border radius of the thumbnail.
	Notes:
	- [1] : This style only applies to `img` elements with the class specified in
		`$thumb-name`.
*/
/*
	Mixin for generic border style.
	Parameters:
	- $border-generic-name :	The class name for the generic border.
	Notes:
	- [1] : The border style uses rgba to create a 1px solid border with 0.25 
		opacity around an element, which makes it look properly bordered. 
		Might be incompatible with older browsers.
	- [2] : The border style overwrites any border style as it uses 
		`!important`, exercise caution when using.
*/
/*
	Mixin for generic border radius styles.
	Parameters:
	- $border-style-name   :	The class name for the generic border radius style.
	- $border-style-radius :	The radius for the generic border radius style.
	Notes:
	- [1] : The border style overwrites any border style as it uses 
		`!important`, exercise caution when using.
*/
/*
	Mixin for generic contextual color text styles.
	Parameters:
	- $colored-text-name  :	The class name for the contextual color text style.
	- $colored-text-color :	The color for the contextual color text style.
	Notes:
	- [1] : The contextual color text style overwrites any text color as it uses 
		`!important`, exercise caution when using.
*/
/*
	Mixin for generic contextual background text styles.
	Parameters:
	- $colored-bg-text-name  :	The class name for the contextual background text style.
	- $colored-bg-text-color :	The background color for the contextual background text style.
	Notes:
	- [1] : The contextual background text style overwrites any text color as it 
		uses  `!important`, exercise caution when using.
*/
/*
	Mixin for simple caret utility class.
	Parameters:
	- $caret-name  :	The class name for caret utility class.
	- $caret-size  :	The size of the caret utility element. [1]
	- $caret-color :	The color of the caret utility element.
	Notes:
	- [1] : The caret is built using the border trick. Sizes can be specified
		in either `px` or `em`, but they might take a bit of tweaking to
		get right.
*/
/*
	Mixin for simple close sign utility class.
	Parameters:
	- $close-name        :	The class name for close utility class.
	- $close-color       :	The color of the close utility element.
	- $close-cursor      :	The cursor for the close utility element.
	- $close-font-size   :	The font-size for the close utility element.
	- $close-font-weight :	The font-weight for the close utility element.
	- $close-hover-color :	The color of the close utility element when hovering over it.
*/
/*
	Mixin for quick float classes. [1]
	Parameters:
	- $drag-left-name  :	The class name for left drags.
	- $drag-right-name :	The class name for right drags.
	Notes:
	- [1] : These classes use `!important` to set the float properties, 
		exercise caution when using.
*/
/*
	Mixin for center block class.
	Parameters:
	- $center-block-name :	The class name for center block class.
*/
/*
	Mixin for clearfix class.
	Parameters:
	- $clearfix-name :	The class name for the clearfix class.
*/
/*
	Mixin for hidden class. [1]
	Parameters:
	- $hidden-name :	The class name for hidden elements.
	Notes:
	- [1] : This class uses `!important` to set the display property, 
		exercise caution when using.
*/
img.thumb {
  padding: 0.25em;
  border: 1px solid #ccc;
  border-radius: 4px; }

.bordered {
  border: 1px solid rgba(0, 0, 0, 0.25) !important; }

.rounded {
  border-radius: 4px !important; }

.circle {
  border-radius: 50% !important; }

.txt-blue {
  color: #3f84b3 !important; }

.txt-green {
  color: #2db747 !important; }

.txt-red {
  color: #ea4848 !important; }

.bg-blue {
  background-color: #3f84b3 !important; }

.bg-green {
  background-color: #2db747 !important; }

.bg-red {
  background-color: #ea4848 !important; }

.caret {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 0;
  height: 0;
  border-left: 0.35em solid transparent;
  border-right: 0.35em solid transparent;
  border-top: 0.35em solid #222; }

.close {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  color: #aaa;
  font-size: 1.3em;
  font-weight: 700;
  cursor: pointer; }
  .close:before {
    content: '\00d7'; }
  .close:hover {
    color: #777; }

.drg-left {
  float: left !important; }

.drg-right {
  float: right !important; }

.ct-block {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.cf:before, .cf:after {
  content: "";
  display: table;
  clear: both; }

.hidden {
  display: none !important; }

/*
	Mixin for navigation bar and complementary styles.
	Parameters:
	- $nav-name                                   :	The class name for the navigation bar.
	- $nav-vertical-name                          :	The class name for the vertical style of the navigation bar.
	- $nav-fixed-name                             :	The class name for the fixed style of the navigation bar.
	- $nav-logo-name                              :	The class name for the logo item of the navigation bar.
	- $nav-logo-size                              :	The font-size of the logo item of the navigation bar.
	- $nav-link-name                              :	The class name for the navigation links of the navigation bar.
	- $nav-padding                                :	The padding of the elements of the navigation bar. [1]
	- $nav-color                                  :	The text color of the navigation elements.
	- $nav-bg-color                               :	The background color of the navigation bar.
	- $nav-hover-style                            :	Hover/active/focus style of the navigation elements. [2]
	- $nav-hover-style-percentage                 :	Hover/active/focus style of the navigation elements percentage modifier.
	- $nav-disabled-cursor                        :	The cursor style when hovering over the navigation elements whie disabled.
	- $nav-disabled-opacity                       :	The opacity of the navigation elements when disabled.
	- $nav-fixed-left-right                       :	The orientation of the fixed navigation bar. [3][4]
	- $grid-columns-total                         :	Total amount fo columns in the used grid. [5]
	- $grid-coloumns-count-for-nav-fixed-vertical :	Desired amount of columns occupied by the vertical navigation bar in the grid. [5]
	- $nav-fixed-collapse-breakpoint              :	The breakpoint below which fixed navigation bars will collapse to a menu toggle button.
	- $nav-fixed-collapse-label-location          :	Location of the collapsed menu button label. [6]
	- $nav-fixed-collapse-label-margin            :	The margin for the collapsed menu button label.
	- $nav-fixed-collapse-label-font-size         :	The font size of the collapsed menu button label.
	Notes:
	- [1] : This padding applies to all elements of the navigation bar and all styles(e.g. vertical or fixed). 
		For vertical styles it adapts to apply properly. It also adapts to apply properly to the collapse 
		label of the navigation bar. Please specify only a single padding value (i.e. 6px, 1.25em etc.) to 
		avoid CSS errors and ultimately the style not being applied to some elements.
	- [2] : The values that $nav-hover-style can take are `lighten` and `darken`. The inside condition only 
		checks if the value is `lighten` and acts accordingly. Invalid values are treated as `darken`.
	- [3] : The values of $nav-fixed-left-right recognizes are `left` and `right`. However if invalid values
		are provided, due to the inside condition only checking for `left`, `right` will be used as the
		default value.
	- [4]: The values of $nav-fixed-left-right will apply to all fixed navigation bars. The horizontal bars
		should not be affected as they are 100% width, meaning that anchoring to left or right should have
		the same result.
	- [5] : These values are used to make the navigation bar work better with the grid system. Values do not have 
		to be the same as the grid or integer values, meaning that values like 12 and 1.5 could work great leaving
		a small gap just before the third column in the grid. If no grid is specified, you can use percentage
		values like 100 and 15 to get a 15% width for example.
	- [6] : The value $nav-fixed-collapse-label-location recognizes are `top-left`, `top-right`, `bottom-left`
		and `bottom-right`. Due to the way the conditional checking is implemented, `bottom-right` will be
		used as a default if no valid value is specified.
*/
.nav {
  box-sizing: border-box;
  background-color: #ddd; }
  .nav .logo {
    font-size: 135%;
    color: #272727; }
  .nav ul {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0; }
    .nav ul li {
      display: inline-block;
      margin: 0;
      white-space: nowrap; }
      .nav ul li * {
        display: inline-block;
        padding: 8px;
        color: #272727;
        margin: 0; }
      .nav ul li .link:hover, .nav ul li .link:active, .nav ul li .link:focus {
        color: #272727;
        background: #cacaca; }
      .nav ul li .link.disabled, .nav ul li .link[disabled] {
        cursor: not-allowed;
        opacity: 0.65; }
  .nav.vertical ul {
    display: block; }
    .nav.vertical ul li {
      display: block; }
      .nav.vertical ul li * {
        width: 100%;
        padding: 8px 0; }
  .nav.fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%; }
    .nav.fixed.vertical {
      height: 100%;
      width: 16.66667%; }
      .nav.fixed.vertical ul {
        width: 100%; }
        .nav.fixed.vertical ul li {
          display: block; }
  .nav + label {
    display: none;
    font-weight: 700;
    margin: 10px;
    font-size: 1.75em;
    padding: 8px;
    color: #272727;
    background-color: #ddd;
    width: auto;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0; }
    .nav + label:before {
      position: relative;
      content: '\2630'; }
    .nav + label:hover, .nav + label:active, .nav + label:focus {
      background: #cacaca; }

@media (max-width: 768px) {
  .nav {
    overflow: auto; }
    .nav.fixed {
      display: none; }
      .nav.fixed + label {
        display: block; }

  input[type="checkbox"]:checked + .nav.fixed {
    display: block;
    width: 100%;
    height: 100%; }
    input[type="checkbox"]:checked + .nav.fixed ul {
      display: block; }
      input[type="checkbox"]:checked + .nav.fixed ul li {
        display: block; }
        input[type="checkbox"]:checked + .nav.fixed ul li * {
          width: 100%;
          padding: 8px 0; }
    input[type="checkbox"]:checked + .nav.fixed + label:before {
      content: '\00d7'; } }