Rominou34/soft-css

View on GitHub
src/min/papillon.min.css

Summary

Maintainability
Test Coverage
/*
* Soft CSS - The tweakable CSS framework
* Romain Arnaud - 2016-2017
*/
/*
* Soft CSS - The tweakable CSS framework
* Romain Arnaud - 2016
*/
/*
******************************************************************************
* COLOR PALETTE
******************************************************************************
*/
/*
* HOW TO USE
* - Define the default color each time ( $blue-default, $red-default, etc. )
* - The shades will be automatically calculated using lighten() and darken()
* - At the end, choose the colors of elements using the color palette
*   so you have an uniform color scheme
*/
/********************
*   COLOR PALETTE   *
********************/
/* THEME */
/* Put true here if your theme is a night one ( dark bakcground and white font ) */
/*** COMPLEMENTARY COLORS ***/
/* GREY */
/* Almost white */
/* Very light grey */
/* Darky dark */
/* Almost black */
/*** USED FOR THE ELEMENTS ***/
/* HEADER */
/*#ecf0f1;*/
/*
******************************************************************************
* LAYOUT CONTROL
******************************************************************************
*/
/*
***** NAVIGATION *****
*/
/********** SIZES **********/
/*
***** GRID LAYOUT *****
*/
/*
* -- Container threshold sizes --
* The name is a bit misleading as it isn't only used for containers but
* for the whole responsiveness of the website ( it's the value used in the
* media queries )
*/
/*
******************************************************************************
* FONTS
******************************************************************************
*/
/* basic text */
/* basic text sans serif */
/* basic text serif ? */
/* h1, h2, h3, h4, h5, h6 */
/* Header */
/* code */
/* Basic text */
/* Basic text */
/* Basic text */
/* Header */
/* We reset all the rules so it looks the same for all browsers */
/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css */
/* Latest tested: Android 6, Chrome 48, Edge 13, Firefox 44, Internet Explorer 11, iOS 9, Opera 35, Safari 9, Windows Phone 8.1 */
/*
 * Normalization
 */
abbr[title] {
  text-decoration: underline;
  /* Chrome 48+, Edge 12+, Internet Explorer 11-, Safari 9+ */
  text-decoration: underline dotted;
  /* Firefox 40+ */ }

audio:not([controls]) {
  display: none;
  /* Chrome 44-, iOS 8+, Safari 9+ */ }

b,
strong {
  font-weight: bolder;
  /* Edge 12+, Safari 6.2+, and Chrome 18+ */ }

button {
  -moz-appearance: button;
  -webkit-appearance: button;
  /* iOS 8+ */
  overflow: visible;
  /* Internet Explorer 11- */ }

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  /* Firefox 4+ */
  padding: 0;
  /* Firefox 4+ */ }

button:-moz-focusring, input:-moz-focusring {
  outline: 1px dotted ButtonText;
  /* Firefox 4+ */ }

button,
select {
  text-transform: none;
  /* Firefox 40+, Internet Explorer 11- */ }

details {
  display: block;
  /* Edge 12+, Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */ }

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /* Edge 12+, Internet Explorer 11- */
  overflow-y: scroll;
  /* All browsers without overlaying scrollbars */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* iOS 8+, Windows Phone 8.1+ */ }

hr {
  overflow: visible;
  /* Internet Explorer 11-, Edge 12+ */ }

input {
  -webkit-border-radius: 0; }

input[type="button"],
input[type="reset"],
input[type="submit"] {
  -moz-appearance: button;
  -webkit-appearance: button;
  /* iOS 8+ */ }

input[type="number"] {
  width: auto;
  /* Firefox 36+ */ }

input[type="search"] {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  /* Chrome 45+, Safari 9+ */ }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -moz-appearance: none;
  -webkit-appearance: none;
  /* Chrome 45+, Safari 9+ */ }

main {
  display: block;
  /* Android 4.3-, Internet Explorer 11-, Windows Phone 8.1+ */ }

pre {
  overflow: auto;
  /* Internet Explorer 11- */ }

progress {
  display: inline-block;
  /* Internet Explorer 11-, Windows Phone 8.1+ */ }

summary {
  display: block;
  /* Firefox 40+, Internet Explorer 11-, Windows Phone 8.1+ */ }

svg:not(:root) {
  overflow: hidden;
  /* Internet Explorer 11- */ }

template {
  display: none;
  /* Android 4.3-, Internet Explorer 11-, iOS 7-, Safari 7-, Windows Phone 8.1+ */ }

textarea {
  overflow: auto;
  /* Edge 12+, Internet Explorer 11- */ }

[hidden] {
  display: none;
  /* Internet Explorer 10- */ }

/*
 * Universal inheritance
 */
*,
:before,
:after {
  box-sizing: inherit; }

* {
  font-size: inherit;
  line-height: inherit; }

:before,
:after {
  text-decoration: inherit;
  vertical-align: inherit; }

button,
input,
select,
textarea {
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit; }

/*
 * Opinionated defaults
 */
/* specify the margin and padding of all elements */
* {
  margin: 0;
  padding: 0; }

/* specify the border style and width of all elements */
*,
:before,
:after {
  border-style: solid;
  border-width: 0; }

/* remove the tapping delay from clickable elements */
a,
area,
button,
input,
label,
select,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation; }

/* specify the standard appearance of selects */
select {
  -moz-appearance: none;
  /* Firefox 40+ */
  -webkit-appearance: none; }

select::-ms-expand {
  display: none;
  /* Edge 12+, Internet Explorer 11- */ }

select::-ms-value {
  color: currentColor;
  /* Edge 12+, Internet Explorer 11- */ }

/* use current current as the default fill of svg elements */
svg {
  fill: currentColor; }

/* specify the progress cursor of updating elements */
[aria-busy="true"] {
  cursor: progress; }

/* specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer; }

/* specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled] {
  cursor: default; }

/* specify the style of visually hidden yet accessible elements */
[hidden][aria-hidden="false"] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute; }

[hidden][aria-hidden="false"]:focus {
  clip: auto; }

/*
 * Configurable defaults
 */
/* specify the background repeat of all elements */
* {
  background-repeat: no-repeat; }

/* specify the root styles of the document */
:root {
  background-color: #ffffff;
  box-sizing: border-box;
  color: #000000;
  /*cursor: default;*/
  font: 100%/1.5 sans-serif; }

/* specify the text decoration of anchors */
a {
  text-decoration: none; }

/* specify the alignment of media elements */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/* specify the coloring of form elements */
button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit; }

/* specify the minimum height of form elements */
button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
  min-height: 1.5em; }

/* specify the font family of code elements */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace; }

/* specify the list style of nav lists */
nav ol,
nav ul {
  list-style: none; }

/* specify the font size of small elements */
small {
  font-size: 75%; }

/* specify the border styling of tables */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* specify the resizability of textareas */
textarea {
  resize: vertical; }

/* specify the background color, font color, and drop shadow of text selections */
::-moz-selection {
  background-color: #1c5ddd;
  /*#b3d4fc; /* required when declaring ::selection */
  color: #ffffff;
  text-shadow: none; }

::selection {
  background-color: #1c5ddd;
  /* required when declaring ::selection */
  color: #ffffff;
  text-shadow: none; }

/* Then we initialize the default values ( must be imported first so they can be
overridden ) */
/*************** CSS INITIALIZATION ***************/
:root {
  font-size: 16px; }

html {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  -webkit-font-smoothing: antialiased; }

body {
  font-family: Arial, "sans-serif";
  background-color: #fff;
  line-height: 1.4375;
  color: #101010;
  width: 100%;
  min-height: 100%;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s; }

html, p, div, article, form {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*************** ELEMENT DEFAULT RULES ***************/
/****
* A *
****/
/***** LINKS *****/
a {
  color: #195fc8; }

a:hover, a:visited:hover {
  color: #4586e8; }

a:visited {
  color: #7718c6; }

/***** ARTICLES *****/
article {
  display: block; }

/***** ASIDE *****/
aside {
  display: inline-block;
  width: 100%;
  min-height: 400px;
  vertical-align: top;
  max-width: 200px;
  margin: auto;
  background-color: #fff; }

/****
* B *
****/
/***** BLOCKQUOTE *****/
blockquote {
  background: rgba(69, 134, 232, 0.1);
  padding: 1em;
  line-height: 1.5;
  width: auto;
  display: inline-block;
  margin: 0.8em;
  border: 1px solid rgba(69, 134, 232, 0.1); }

blockquote:not(.reverse) {
  border-left: 4px solid #1c69de;
  text-align: left;
  float: left; }

blockquote.reverse {
  border-right: 4px solid #1c69de;
  text-align: right;
  float: right; }

blockquote p {
  display: inline; }

blockquote footer {
  font-size: calc(16px * 0.8);
  color: #848b96;
  margin-top: 0.5em; }

blockquote cite {
  font-style: italic; }

blockquote:not(.reverse) footer::before {
  content: '- '; }

blockquote.reverse footer::after {
  content: ' -'; }

/****
* C *
****/
/***** CAPTION *****/
caption {
  width: 100%;
  text-align: center; }

/***** CODE *****/
code {
  background-color: rgba(69, 134, 232, 0.1);
  font-family: "Source Code Pro", "monospace";
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 0 0.2em;
  color: #101010; }

pre > code {
  display: block;
  margin: 0.4em 1em;
  padding: 0.5em;
  text-align: left;
  border: 1px solid #3e4349;
  border-width: 1px 1px 1px 5px;
  word-wrap: break-word;
  max-width: 100%;
  white-space: pre-wrap; }

pre > code[data-lang] {
  padding-top: 2em; }

pre > code[data-lang]::before {
  content: attr(data-lang);
  display: inline-block;
  background-color: #3e4349;
  color: #fff;
  position: relative;
  top: calc(-1.33em - 1px);
  width: calc(100% + 1em - 2px);
  font-size: 150%;
  padding: 0 0.6em;
  left: calc(-0.5em - 1px);
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0; }

/****
* D *
****/
/***** DIV *****/
div {
  display: block; }

/****
* F *
****/
body > footer {
  width: 100%;
  padding: 2em 1em;
  background-color: #0e0e0e;
  color: #fff;
  text-align: center; }

/****
* H *
****/
/***** HEADER *****/
body > header {
  font-size: 96px;
  font-family: "Lobster", cursive;
  color: #ecf0f1;
  background-color: #4586e8;
  width: 100%;
  text-align: center; }

body > header > small {
  font-size: 25%;
  font-family: "Source Sans Pro", sans-serif;
  color: #dcdcdc;
  display: block;
  padding-bottom: 2em; }

body > header > img {
  height: 64px;
  width: auto;
  display: inline;
  margin: 24px; }

/***** H1, H1, H2, H3, H4, H5, H6 *****/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #101010;
  font-family: "Source Sans Pro", sans-serif;
  line-height: 2; }

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  color: #848b96;
  padding-left: 0;
  font-size: 75%; }

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  position: relative;
  color: #101010 !important;
  display: inline-block;
  padding-left: 0.6em; }

h1 a::before,
h2 a::before,
h3 a::before,
h4 a::before,
h5 a::before,
h6 a::before {
  content: '#';
  color: rgba(182, 208, 246, 0.75);
  position: absolute;
  left: 0;
  line-height: 250%;
  font-size: 80%; }

h1 a:hover::before,
h2 a:hover::before,
h3 a:hover::before,
h4 a:hover::before,
h5 a:hover::before,
h6 a:hover::before {
  color: #4586e8; }

h1 {
  font-size: 40px; }

h2 {
  font-size: 32px; }

h3 {
  font-size: 24px; }

h4 {
  font-size: 20px; }

h5 {
  font-size: 16px; }

h6 {
  font-size: 12px; }

/***** HR *****/
hr {
  width: 80%;
  max-width: 600px;
  display: block;
  margin: 2em auto;
  height: 3px;
  background-color: #4586e8; }

hr.secondary {
  background-color: #9d43e8; }

/****
* I *
****/
/***** IMG *****/
img {
  font-family: 'Helvetica';
  font-weight: 300;
  line-height: 2;
  text-align: center;
  max-width: 100%;
  height: auto;
  display: block;
  position: relative;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto; }

img:after {
  content: 'Problem loading " ' attr(alt) ' "';
  font-size: 16px;
  color: #848b96;
  display: block;
  position: absolute;
  border: 2px dashed #1c69de;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  background-color: rgba(69, 134, 232, 0.1);
  box-sizing: border-box; }

/****
* K *
****/
/***** KEYBOARD *****/
kbd {
  background-color: rgba(69, 134, 232, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border-width: 1px 1px 3px 1px;
  border-style: solid;
  border-color: #1c69de;
  padding: 0 2px; }

/****
* L *
****/
/***** LIST *****/
li {
  margin-left: 1em;
  padding: 0.5em 0; }

/***** MAIN *****/
main {
  display: block;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  background-color: #fff; }

/********** PSEUDO SELECTORS **********/
:target {
  outline: 0;
  animation: color-fadeout 1s 0s linear; }

/* We import the base classes */
/********** CONTAINERS **********/
.container,
.container-sm,
.container-md,
.container-lg {
  display: block;
  width: 100%;
  margin: 1em auto;
  padding: 0.5em; }

.container-sm {
  max-width: 730px; }

.container-md {
  max-width: 940px; }

.container-lg {
  max-width: 1180px; }

/*
* The following classes are classes that are never used by default, but you can
* use them to force the behaviour of an element ( for example if you want to
* force an element to float on the right use "right" )
*/
/********** TITLE **********/
/* Titles of a section with special style added */
.section-header {
  position: relative;
  left: 0.5em; }

.section-header::before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 60%;
  top: 20%;
  left: -0.5em;
  border-right: 6px solid #4586e8; }

/********** ELEMENTS ASPECT **********/
/* Change the aspect of a container to showcase something inside */
.showcase {
  background-color: rgba(69, 134, 232, 0.1);
  border: #1c69de;
  margin: 2em 1em;
  padding: 1em;
  box-shadow: 0 0 3px 1px #1c69de inset;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

/*** SPOILERS ***/
/* Applied on a span, it hides the text and displays it on hover */
span.spoiler {
  color: #101010;
  background-color: #101010; }

span.spoiler:hover {
  background-color: transparent; }

/* Applied on a div with, it toggle the display with a button */
div.spoiler-block button {
  margin: 0.5em auto;
  display: block; }

div.spoiler-block .spoiler-content {
  display: none; }

/* We import the fonticons-related classes */
/***** GLOBAL RULES *****/
a[target=_blank]::after {
  font-family: FontAwesome;
  content: "\f08e";
  padding-left: 0.5em; }

/* We import the files for the tables */
table {
  margin: 1em auto; }

table td {
  line-height: 1.6;
  padding: 0.2em 0.5em; }

/******** CLASSIC DESIGN ********/
thead, tfoot {
  font-weight: bold;
  line-height: 2; }

thead {
  background-color: #ced3db; }

table {
  border: 1px solid #646a72; }

table > :not(:last-child),
tbody > :not(:last-child) {
  border-bottom: 1px solid #acb4bf; }

/******** MINIMALISTIC DESIGN ********/
table.min thead,
table.min tbody,
table.min tfoot {
  background-color: #777;
  background-color: transparent; }

table.min,
table.min thead,
table.min tbody,
table.min td,
table.min tr,
table.min tfoot {
  border-width: 0; }

table.min thead {
  border-bottom: 2px solid #8e8e8e; }

table.min > :last-child {
  border-bottom: 2px solid #c5c5c5; }

table.min tfoot {
  border-top: 1px solid #a4a4a4; }

/******** FLAT DESIGN ********/
table.flat,
table.flat * {
  border-width: 0; }

/******** ALTERNATING ROWS ********/
table.alt tbody > tr:nth-child(even) {
  background: rgba(69, 134, 232, 0.1); }

/*table.alt tbody > tr:nth-child(odd) {background: #fff}*/
/******** REACTIVE DESIGN ********/
table.reactive :not(thead):not(tfoot) tr:hover {
  background-color: #fbfcfe;
  background-color: rgba(69, 134, 232, 0.1); }

table.reactive :not(thead):not(tfoot) tr td:hover {
  background-color: #b6d0f6;
  background-color: rgba(69, 134, 232, 0.1); }

/* We import the classes for the forms */
/*
********** INPUT GROUPS **********
*/
/* INPUT-COL */
.input-col {
  margin: 1em auto;
  width: auto; }

.input-col label {
  display: block; }

.input-col input {
  display: block;
  width: 100%; }

.input-col.center label,
.input-col.center input {
  text-align: center; }

/* INPUT-ROW */
.input-row {
  width: 100%;
  display: flex; }

.input-row label {
  flex-basis: 25%;
  flex: 1 0;
  text-align: right; }

.input-row input {
  flex-basis: 75%;
  flex: 3 1; }

/*
********** INPUT FIELDS **********
*/
input, label {
  line-height: 1.5em;
  padding: 0.25em 0.5em; }

input:focus {
  border: 1px solid #4586e8; }

/*** TEXT ***/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"] {
  border: 1px solid #acb4bf;
  border-radius: 2px;
  padding: 0.25em 0.5em; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus {
  outline: 0;
  border-color: #4586e8; }

input[type="text"].invalid,
input[type="email"].invalid,
input[type="password"].invalid,
input[type="search"].invalid,
input[type="url"].invalid {
  border-color: #cd2f2b !important; }

input[type="text"].valid,
input[type="email"].valid,
input[type="password"].valid,
input[type="search"].valid,
input[type="url"].valid {
  border-color: #36b147 !important; }

/*** BUTTON ***/
input[type="submit"] {
  display: block;
  margin: 1em auto; }

/* We import the layout for grids and columns */
.soft-row,
.soft-col {
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.soft-row,
.soft-col,
.soft-row div,
.soft-col div {
  box-sizing: border-box;
  text-align: inherit; }

.soft-row {
  width: 100%; }

.soft-row, .soft-col {
  height: auto;
  padding: 0; }

/*
.soft-col :first-child {
  margin-top: 0;
}

.soft-col :last-child {
  margin-bottom: 0;
}*/
.soft-col > div:not([class*="col"]):not(.soft-row),
.soft-row > div:not([class*="col"]) {
  -webkit-flex: 1 0;
  flex: 1 0; }

.soft-col > div:not(.soft-row):not(.soft-col):not(.container-sm):not(.container-md):not(.container-lg),
.soft-row > div:not(.soft-row):not(.soft-col):not(.container-sm):not(.container-md):not(.container-lg) {
  padding: 0.5em;
  margin: 10px; }

/* WIDTH */
.col-1, .space-1 {
  width: calc(100% / 12 - 20px); }

.col-2, .space-2 {
  width: calc(100% / 6 - 20px); }

.col-3, .space-3 {
  width: calc(100% / 4 - 20px); }

.col-4, .space-4 {
  width: calc(100% / 3 - 20px); }

.col-5, .space-5 {
  width: calc(500% / 12 - 20px); }

.col-6, .space-6 {
  width: calc(100% / 2 - 20px); }

.col-7, .space-7 {
  width: calc(700% / 12 - 20px); }

.col-8, .space-8 {
  width: calc(800% / 12 - 20px); }

.col-9, .space-9 {
  width: calc(900% / 12 - 20px); }

.col-10, .space-10 {
  width: calc(1000% / 12 - 20px); }

.col-11, .space-11 {
  width: calc(1100% / 12 - 20px); }

.col-12 {
  width: calc(100% - 20px); }

/* DIVs that are containers of a grid don't need margin */
.col-1.soft-col, .col-1.soft-row {
  width: calc(100% / 12); }

.col-2.soft-col, .col-2.soft-row {
  width: calc(100% / 6); }

.col-3.soft-col, .col-3.soft-row {
  width: calc(100% / 4); }

.col-4.soft-col, .col-4.soft-row {
  width: calc(100% / 3); }

.col-5.soft-col, .col-5.soft-row {
  width: calc(500% / 12); }

.col-6.soft-col, .col-6.soft-row {
  width: calc(100% / 2); }

.col-7.soft-col, .col-7.soft-row {
  width: calc(700% / 12); }

.col-8.soft-col, .col-8.soft-row {
  width: calc(800% / 12); }

.col-9.soft-col, .col-9.soft-row {
  width: calc(900% / 12); }

.col-10.soft-col, .col-10.soft-row {
  width: calc(1000% / 12); }

.col-11.soft-col, .col-11.soft-row {
  width: calc(1100% / 12); }

.col-12.soft-col, .col-12.soft-row {
  width: 100%; }

/* PUSH */
.offset-left-1 {
  margin-left: calc(100% / 12) !important; }

.offset-left-2 {
  margin-left: calc(100% / 6) !important; }

.offset-left-3 {
  margin-left: calc(100% / 4) !important; }

.offset-left-4 {
  margin-left: calc(100% / 3) !important; }

.offset-left-5 {
  margin-left: calc(500% / 12) !important; }

.offset-left-6 {
  margin-left: calc(100% / 2) !important; }

.offset-left-7 {
  margin-left: calc(700% / 12) !important; }

.offset-left-8 {
  margin-left: calc(800% / 12) !important; }

.offset-left-9 {
  margin-left: calc(900% / 12) !important; }

.offset-left-10 {
  margin-left: calc(1000% / 12) !important; }

.offset-left-11 {
  margin-left: calc(1100% / 12) !important; }

/* PULL */
.offset-right-1 {
  margin-right: calc(100% / 12) !important; }

.offset-right-2 {
  margin-right: calc(100% / 6) !important; }

.offset-right-3 {
  margin-right: calc(100% / 4) !important; }

.offset-right-4 {
  margin-right: calc(100% / 3) !important; }

.offset-right-5 {
  margin-right: calc(500% / 12) !important; }

.offset-right-6 {
  margin-right: calc(100% / 2) !important; }

.offset-right-7 {
  margin-right: calc(700% / 12) !important; }

.offset-right-8 {
  margin-right: calc(800% / 12) !important; }

.offset-right-9 {
  margin-right: calc(900% / 12) !important; }

.offset-right-10 {
  margin-right: calc(1000% / 12) !important; }

.offset-right-11 {
  margin-right: calc(1100% / 12) !important; }

.space-1,
.space-2,
.space-3,
.space-4,
.space-5,
.space-6,
.space-7,
.space-8,
.space-9,
.space-10,
.space-11 {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important; }

/*************** RESPONSIVE DESIGN ***************/
/* LARGE */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: 1180px) {
  .stack-lg:not(.soft-row) > div,
  .stack-lg :not(.soft-row):not(.stack-md):not(.stack-sm) > div {
    width: calc(100% - 20px); }

  .stack-lg.soft-col > :not(.soft-row):not(.soft-col) {
    display: block;
    width: calc(100% - 20px); }

  [class*="offset-left"] {
    margin-left: 0px !important; }

  [class*="offset-right"] {
    margin-right: 0px !important; } }
/* MEDIUM */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: 940px) {
  .stack-md:not(.soft-row) > div,
  .stack-md :not(.soft-row):not(.stack-sm) > div {
    width: calc(100% - 20px); }

  .stack-md.soft-col > :not(.soft-row):not(.soft-col) {
    display: block;
    width: calc(100% - 20px); }

  [class*="offset-left"] {
    margin-left: 0px !important; }

  [class*="offset-right"] {
    margin-right: 0px !important; } }
/* SMALL */
/* Set the value according to the one you put at the beginning */
@media screen and (max-width: 730px) {
  .stack-sm:not(.soft-row) > div,
  .stack-sm :not(.soft-row) > div {
    width: calc(100% - 20px); }

  .soft-col > :not(.soft-row):not(.soft-col) {
    display: block;
    width: calc(100% - 20px); }

  [class*="offset-left"] {
    margin-left: 0px !important; }

  [class*="offset-right"] {
    margin-right: 0px !important; } }
/* We import the classes for the buttons */
button,
.button {
  padding: 0.5rem;
  line-height: 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  margin: 0.5em;
  font-family: Arial, "sans-serif";
  box-sizing: border-box;
  background-color: #ced3db;
  color: #101010;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  position: relative;
  text-align: center; }

button:hover,
.button:hover,
.button:visited:hover,
button:focus,
.button:focus {
  cursor: pointer;
  background-color: #edf1f7;
  color: #101010;
  outline: 0; }

button:not(.outline):hover,
.button:not(.outline):hover,
.button:not(.outline):visited:hover,
button:not(.outline):focus,
.button:not(.outline):focus {
  box-shadow: 1px 2px 6px 0 #a2a2a2;
  top: -1px; }

.button:visited {
  color: inherit; }

button:disabled,
.button.disabled {
  background-color: #848b96; }

button:disabled:hover {
  background-color: #1c69de;
  cursor: not-allowed; }

button:not(:disabled):not(.loading):active,
.button:not(.disabled):not(.loading):active {
  outline: 0;
  background-color: #d8d8d8;
  box-shadow: 0 0 0 0 black; }

/********** MODIFIER CLASSES **********/
button.large,
.button.large {
  padding: 1rem;
  font-size: 1.5em; }

button.large:not(.outline):hover,
.button.large:not(.outline):hover,
button.large:not(.outline):focus,
.button.large:not(.outline):focus {
  box-shadow: 2px 4px 12px 0 #a2a2a2;
  top: -2px; }

button.loading,
.button.loading {
  padding: 0.7em 2em;
  content: '';
  pointer-events: none; }

button.large.loading,
.button.large.loading {
  padding: 0.8em 2.5em; }

button.loading:hover,
.button.loading:hover {
  cursor: wait; }

button.primary.loading::after,
button.secondary.loading::after,
button.success.loading::after,
button.info.loading::after,
button.danger.loading::after,
button.warning.loading::after,
button.black.loading::after,
.button.primary.loading:after,
.button.secondary.loading::after,
.button.success.loading::after,
.button.info.loading::after,
.button.danger.loading::after,
.button.warning.loading::after,
.button.black.loading::after {
  border-color: transparent transparent white white !important; }

button.loading::after,
.button.loading::after {
  animation: spin-right 500ms infinite linear;
  border: 2px solid #888;
  -webkit-border-radius: 2000px;
  -moz-border-radius: 2000px;
  border-radius: 2000px;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 16px;
  position: relative;
  width: 16px; }

button.large.loading::after,
.button.large.loading::after {
  height: calc(16px * 1.5);
  width: calc(16px * 1.5); }

button.btn-round,
.button.btn-round {
  -webkit-border-radius: 2em !important;
  -moz-border-radius: 2em !important;
  border-radius: 2em !important; }

button.outline,
.button.outline {
  border: 2px solid #2d2d2d;
  background-color: transparent;
  color: #2d2d2d;
  border-radius: 4px; }

button.outline:hover,
.button.outline:hover,
button.outline:focus,
.button.outline:focus {
  color: #fff;
  background-color: #2d2d2d; }

button.outline:not(:disabled):not(.loading):active,
.button.outline:not(:disabled):not(.loading):active {
  background-color: #0e0e0e; }

/*button.loading:after {
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    position: absolute !important;
}*/
/*************** COLORS ***************/
button.success,
button.info,
button.danger,
button.warning,
button.black,
button.primary,
button.secondary,
.button.success,
.button.info,
.button.danger,
.button.warning,
.button.black,
.button.primary,
.button.secondary {
  color: #fff; }

.button.success:hover,
.button.info:hover,
.button.danger:hover,
.button.warning:hover,
.button.black:hover,
.button.primary:hover,
.button.secondary:hover {
  color: #fff; }

/*
* PRIMARY
*/
button.primary,
.button.primary {
  background-color: #4586e8; }

button.primary:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.primary:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #6098eb; }

button.primary:not(:disabled):not(.loading):active,
.button.primary:not(.disabled):not(.loading):active {
  background-color: #2a74e5; }

button.primary:disabled,
.button.primary.disabled {
  background-color: #7ba9ef; }

button.primary.outline,
.button.primary.outline {
  color: #4586e8;
  background-color: transparent;
  border-color: #4586e8; }

button.primary.outline:hover,
.button.primary.outline:hover,
button.primary.outline:focus,
.button.primary.outline:focus {
  color: #fff;
  background-color: #4586e8; }

/*
* SECONDARY
*/
button.secondary,
.button.secondary {
  background-color: #9d43e8; }

button.secondary:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.secondary:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #ab5eeb; }

button.secondary:not(:disabled):not(.loading):active,
.button.secondary:not(.disabled):not(.loading):active {
  background-color: #8f28e5; }

button.secondary:disabled,
.button.secondary.disabled {
  background-color: #b97aef; }

button.secondary.outline,
.button.secondary.outline {
  color: #9d43e8;
  background-color: transparent;
  border-color: #9d43e8; }

button.secondary.outline:hover,
.button.secondary.outline:hover,
button.secondary.outline:focus,
.button.secondary.outline:focus {
  color: #fff;
  background-color: #9d43e8; }

/*
* GREEN
*/
button.success,
.button.success {
  background-color: #36b147; }

button.success:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.success:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #41c553; }

button.success:not(:disabled):not(.loading):active,
.button.success:not(:disabled):not(.loading):active {
  background-color: #2f9a3e; }

button.success:disabled,
.button.success.disabled {
  background-color: #58cc68; }

button.success.outline,
.button.success.outline {
  color: #36b147;
  background-color: transparent;
  border-color: #36b147; }

button.success.outline:hover,
.button.success.outline:hover,
button.success.outline:focus,
.button.success.outline:focus {
  color: #fff;
  background-color: #36b147; }

/* BLUE */
button.info,
.button.info {
  background-color: #296dd1; }

button.info:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.info:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #3f7ed9; }

button.info:not(:disabled):not(.loading):active,
.button.info:not(:disabled):not(.loading):active {
  background-color: #2460b7; }

button.info:disabled,
.button.info.disabled {
  background-color: #598fde; }

button.info.outline,
.button.info.outline {
  color: #296dd1;
  background-color: transparent;
  border-color: #296dd1; }

button.info.outline:hover,
.button.info.outline:hover,
button.info.outline:focus,
.button.info.outline:focus {
  color: #fff;
  background-color: #296dd1; }

/* RED */
button.danger,
.button.danger {
  background-color: #cd2f2b; }

button.danger:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.danger:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #d74340; }

button.danger:not(:disabled):not(.loading):active,
.button.danger:not(:disabled):not(.loading):active {
  background-color: #b42926; }

button.danger:disabled,
.button.danger.disabled {
  background-color: #dc5c59; }

button.danger.outline,
.button.danger.outline {
  color: #cd2f2b;
  background-color: transparent;
  border-color: #cd2f2b; }

button.danger.outline:hover,
.button.danger.outline:hover,
button.danger.outline:focus,
.button.danger.outline:focus {
  color: #fff;
  background-color: #cd2f2b; }

/* ORANGE */
button.warning,
.button.warning {
  background-color: #e7912c; }

button.warning:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.warning:not(.disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #ea9f47; }

button.warning:not(:disabled):not(.loading):active,
.button.warning:not(:disabled):not(.loading):active {
  background-color: #db8219; }

button.warning:disabled,
.button.warning.disabled {
  background-color: #edae63; }

button.warning.outline,
.button.warning.outline {
  color: #e7912c;
  background-color: transparent;
  border-color: #e7912c; }

button.warning.outline:hover,
.button.warning.outline:hover,
button.warning.outline:focus,
.button.warning.outline:focus {
  color: #fff;
  background-color: #e7912c; }

/* BLACK */
button.black,
.button.black {
  background-color: #2d2d2d; }

button.black:not(:disabled):not(.loading):not(.outline):hover:not(:active),
.button.black:not(:disabled):not(.loading):not(.outline):hover:not(:active) {
  background-color: #3c3c3c; }

button.black:not(:disabled):not(.loading):active,
.button.black:not(:disabled):not(.loading):active {
  background-color: #1d1d1d; }

button.black:disabled,
.button.black.disabled {
  background-color: #3c3c3c; }

button.black.outline,
.button.black.outline {
  color: #2d2d2d;
  background-color: transparent;
  border-color: #2d2d2d; }

button.black.outline:hover,
.button.black.outline:hover,
button.black.outline:focus,
.button.black.outline:focus {
  color: #fff;
  background-color: #2d2d2d; }

/* We import the classes for the menus */
nav {
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box; }

nav div,
nav a,
nav span {
  box-sizing: border-box; }

/*
********************************************************************************
* TOP NAVBAR
********************************************************************************
*/
nav.top {
  width: 100%;
  background-color: #13499a;
  color: #ecf0f1; }

nav.top.fixed {
  position: fixed;
  top: 0;
  z-index: 5; }

nav.top .links {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-transition: max-height 0.25s;
  -moz-transition: max-height 0.25s;
  -o-transition: max-height 0.25s;
  transition: max-height 0.25s; }

nav .toggle {
  display: none; }

nav .toggle:hover {
  cursor: pointer; }

nav .toggle::after {
  content: '\2630';
  color: #ecf0f1;
  font-size: 32px;
  line-height: 50px;
  text-align: center;
  width: 50px;
  display: block;
  margin-left: calc(50% - 25px);
  -webkit-transition: transform 0.25s;
  -moz-transition: transform 0.25s;
  -o-transition: transform 0.25s;
  transition: transform 0.25s; }

nav .toggle.cross::after {
  content: '\2716';
  transform: rotate(90deg); }

nav.top .links > a,
nav.top .links > div,
nav.top .links > a:visited {
  -webkit-flex: 1;
  flex: 1;
  text-align: center;
  color: #ecf0f1;
  background-color: #0d346d;
  z-index: 3; }

nav.top .links > :not(.submenu),
nav.top .links > .submenu span {
  padding: 0.5em 0; }

nav.top .links > :hover,
nav.top .links > a:visited:hover {
  background-color: #2569ce;
  cursor: pointer; }

/*
* TOP NAVBAR SUBMENU
*/
nav.top .submenu.active {
  background-color: #2569ce; }

nav.top .submenu {
  position: relative;
  -webkit-transition: background-color 0.1s, padding-bottom 0.4s;
  -moz-transition: background-color 0.1s, padding-bottom 0.4s;
  -o-transition: background-color 0.1s, padding-bottom 0.4s;
  transition: background-color 0.1s, padding-bottom 0.4s; }

nav.top .submenu span {
  width: 100%;
  display: block; }

nav.top .submenu span::before {
  -webkit-transition: color 0.2s;
  -moz-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  content: '\25BC';
  display: block;
  position: absolute;
  left: 10%;
  color: #ecf0f1; }

nav.top .submenu:hover::before {
  color: #ecf0f1; }

nav.top .submenu.active::before {
  color: transparent; }

nav.top .submenu.active :not(.dropdown) {
  padding: 0.5em 0; }

/*
* TOP NAVBAR SUBMENU DROPDOWN
*/
nav.top .submenu .dropdown {
  display: block;
  position: absolute;
  top: calc(1.4375 * 16px + 1em);
  width: 100%;
  max-height: 0;
  -webkit-transition: max-height 0.4s ease;
  -moz-transition: max-height 0.4s ease;
  -o-transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
  overflow: hidden; }

nav.top .submenu.active .dropdown {
  max-height: 800px; }

nav.top .submenu .dropdown a,
nav.top .submenu .dropdown div,
nav.top .submenu .dropdown span {
  display: block;
  width: 100%;
  background-color: #2569ce;
  color: #ecf0f1;
  -webkit-transition: padding 0.4s;
  -moz-transition: padding 0.4s;
  -o-transition: padding 0.4s;
  transition: padding 0.4s; }

nav.top .submenu .dropdown :not(.category):hover {
  background-color: #13499a; }

/*
* TOP NAVBAR SUBMENU CATEGORY
*/
nav.top .submenu .dropdown .category {
  padding: 0.4em 1em;
  text-align: left;
  color: #acb4bf; }

nav.top .submenu .dropdown .category:hover {
  cursor: default; }

nav.top .submenu .dropdown .category::before {
  content: '';
  width: 0;
  height: 0; }

/*
********************************************************************************
* SIDE MENU
********************************************************************************
*/
/*
* SIDE MENU BODY
*/
body.navside {
  margin-left: 240px;
  width: calc(100% - 240px); }

nav.side {
  position: fixed;
  left: 0;
  height: 100%;
  top: 0;
  z-index: 3;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 240px;
  overflow: hidden;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -o-transition: width 0.25s;
  transition: width 0.25s;
  background-color: #1d1d1d;
  color: #ecf0f1; }

nav.side div,
nav.side a,
nav.side span,
nav.side input {
  z-index: 3; }

/*
* SIDE MENU HEADER
*/
nav.side .header {
  width: 100%;
  background-color: #1a65d5;
  color: #ecf0f1;
  height: 150px;
  color: #ecf0f1;
  width: 100%;
  text-align: center;
  padding: 0.4em; }

nav.side .header * {
  color: #ecf0f1; }

nav.side .header input {
  background-color: #ecf0f1;
  border: 1px solid #2d2d2d;
  font-size: 16px;
  line-height: 20px;
  border-radius: 10px;
  width: 86%;
  margin: 0 7%; }

nav.side .toggle {
  display: none;
  width: 40px; }

/*
* SIDE MENU LINKS
*/
nav.side .links {
  display: block;
  height: calc(100vh - 150px - 50px);
  background-color: #1d1d1d;
  overflow: hidden;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -o-transition: width 0.25s;
  transition: width 0.25s; }

nav.side .links > a,
nav.side .links > div,
nav.side .links > :visited,
nav.side .links .category > a,
nav.side .links .category > :visited,
nav.side .links .submenu .dropdown > a,
nav.side .links .submenu .dropdown > :visited {
  color: #ecf0f1;
  background-color: #1d1d1d;
  padding: 0 0.6em;
  display: block;
  width: 100%;
  line-height: 3;
  text-align: left;
  overflow: hidden;
  -webkit-transition: width 0.25s, font-size 0.25s;
  -moz-transition: width 0.25s, font-size 0.25s;
  -o-transition: width 0.25s, font-size 0.25s;
  transition: width 0.25s, font-size 0.25s; }

nav.side .links > :not(.category):hover,
nav.side .links .category > :not(span):hover,
nav.side .links .submenu.active :first-child,
nav.side .links .submenu.active .dropdown,
nav.side .links .submenu.active .dropdown a {
  background-color: #282828; }

/*
* SIDE MENU DROPDOWN
*/
nav.side .links .submenu {
  padding: 0; }

nav.side .links .submenu:hover {
  cursor: pointer; }

nav.side .links .submenu .dropdown {
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
  -moz-transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
  -o-transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
  transition: max-height 0.4s ease, border-width 0.4s ease, border-color 0.4s ease;
  border-bottom: 0 solid transparent;
  overflow: hidden; }

nav.side .links .submenu.active .dropdown {
  max-height: 800px;
  border-bottom: 2px solid #9d9d9d; }

nav.side .links .submenu > span {
  padding: 0 0.6em;
  display: block;
  line-height: 3;
  width: 100%; }

nav.side .links .submenu > span::before {
  content: '+';
  border: 1px solid #ecf0f1;
  line-height: 1;
  width: 16px;
  display: inline-block;
  text-align: center;
  margin-right: 6px;
  border-radius: 2px; }

nav.side .links .submenu.active > span::before {
  content: '-';
  background-color: #ecf0f1;
  color: #0e0e0e; }

nav.side .links .submenu .dropdown > a {
  width: 100%;
  display: block;
  padding-left: 1.2em; }

nav.side .links .submenu.active .dropdown > :hover {
  background-color: #1d1d1d; }

/*
* SIDE MENU CATEGORY
*/
nav.side .links .category {
  width: 100%;
  padding: 0; }

nav.side .links .category > span {
  color: #646a72;
  font-size: 90%;
  padding: 0.4em 0.6em; }

nav.side .links .category > a {
  font-size: 16px;
  border-left: 2px solid #4586e8;
  padding-left: 1.2em; }

nav.side .links .category > div {
  font-size: 16px;
  border-left: 2px solid #4586e8; }

/*
* SIDE MENU FOOTER
*/
nav.side .footer {
  width: 100%;
  margin: 0;
  padding: 8px;
  height: 50px;
  background-color: #0e0e0e;
  font-size: 18px;
  text-align: center;
  color: #ecf0f1;
  overflow: hidden; }

/*
********************************************************************************
* ASIDE MENU
********************************************************************************
*/
nav.aside {
  display: flex;
  flex-direction: column;
  align-items: stretch; }

nav.aside a,
nav.aside .submenu :first-child,
nav.aside .submenu .dropdown a {
  width: 100%;
  display: block;
  color: #4586e8;
  border-left: 2px solid transparent;
  border-color: transparent;
  line-height: 1.2;
  box-sizing: border-box; }

nav.aside a,
nav.aside .submenu :first-child {
  padding: 0 0.2em;
  margin: 0.4em 0; }

nav.aside .submenu .dropdown a {
  width: calc(100% - 1em);
  margin: 0.3em 0;
  margin-left: 1em;
  padding: 0 0.4em;
  font-size: 90%; }

nav.aside .submenu,
nav.aside .submenu .dropdown {
  margin: 0 !important;
  padding: 0 !important; }

nav.aside .submenu :first-child:hover {
  cursor: pointer; }

nav.aside .submenu .dropdown {
  display: none;
  overflow: hidden; }

nav.aside .submenu.active .dropdown {
  display: block; }

nav.aside a.current,
nav.aside .submenu :first-child.current,
nav.aside .submenu .dropdown a.current {
  border-color: #4586e8; }

nav.aside .category {
  font-size: 120%;
  color: #848b96;
  font-style: bold;
  margin: 0.4em 0;
  border-bottom: 1px dashed #1c69de; }

/*
********************************************************************************
* TABLETS / NARROW DISPLAYS
********************************************************************************
*/
@media (max-width: 1000px) {
  nav.side {
    width: 150px; }

  nav.side .header,
  nav.side .links,
  nav.side .links .submenu .dropdown > a,
  nav.side .links .category > div,
  nav.side .links .category > a {
    font-size: calc(16px * 0.8); }

  nav.side .links .category > span {
    font-size: 100%; }

  body.navside {
    width: calc(100% - 150px);
    margin-left: 150px; } }
/*
********************************************************************************
* MOBILE DEVICES / VERY NARROW DISPLAYS
********************************************************************************
*/
@media (max-width: 600px) {
  nav.top {
    display: block; }

  nav.top .links {
    max-height: 0;
    overflow: hidden;
    display: block; }

  nav.top .links.show {
    max-height: 600px;
    display: block; }

  nav.top .links > a,
  nav.top .links > div {
    width: 100%;
    display: block;
    font-size: 16px; }

  nav.top .links > :not(.submenu),
  nav.top .links > .submenu span,
  nav.top .links > .submenu.active span {
    padding: 0.8em 0; }

  nav.top .links > :not(:last-child) {
    border-bottom: 2px solid #4586e8; }

  nav.top .submenu .dropdown {
    position: relative;
    top: 0; }

  nav.top .submenu .dropdown > a,
  nav.top .submenu .dropdown > div {
    background-color: #0d346d;
    padding: 0.8em 0;
    border-top: 1px solid #0d346d; }

  nav.top .submenu .dropdown > :hover {
    background-color: #2569ce; }

  nav.top .submenu .dropdown {
    max-height: 0; }

  nav.top {
    padding-left: 0; }

  nav.top .toggle {
    width: 80px;
    display: block;
    height: 50px;
    margin-right: calc(100% - 80px);
    background-color: #1a65d5; }

  nav.top .toggle.right {
    margin-right: 0;
    margin-left: calc(100% - 80px);
    display: block; }

  /*************************** SIDE MENU MOBILE *******************************/
  body.navside {
    width: 100% !important;
    margin-left: 0 !important; }

  nav.side {
    width: 0px;
    overflow: visible; }

  nav.side:not(.active) .header {
    padding: 0; }

  nav.side .header {
    font-size: 16px; }

  nav.side .header,
  nav.side .links {
    overflow: hidden; }

  nav.side:not(.active) .toggle {
    width: 50px;
    background-color: #1a65d5;
    -webkit-border-radius: 0 0 4px 0;
    -moz-border-radius: 0 0 4px 0;
    border-radius: 0 0 4px 0; }

  nav.side.active {
    width: 100%; }

  nav.side:not(.active) .links > a,
  nav.side:not(.active) .links > div {
    width: 100%;
    margin: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0; }

  nav.side.active .links {
    width: 100%; }

  nav.side.active .links > a,
  nav.side.active .links > div,
  nav.side.active .links .category > a,
  nav.side.active .links .category > div,
  nav.side.active .links .submenu .dropdown > a {
    width: 100%;
    margin: 0 auto;
    font-size: 18px;
    text-align: center; }

  nav.side .toggle {
    display: block; }

  nav.side.active .toggle {
    width: 50px; }

  nav.side .links .submenu .dropdown,
  nav.side .links .submenu.active .dropdown {
    border-bottom: 0 solid #000; }

  nav.side .links .category > span {
    border-bottom: 2px solid #4586e8; }

  nav.side .links .category > a,
  nav.side .links .category > div {
    border-left: 0 solid #000; }

  nav.side:not(.active) .footer {
    padding: 8px 0; }

  nav.side.active .footer {
    width: 100%;
    padding: 8px; } }
/* We import the custom elements */
.soft-popup, .soft-progress, .soft-notif {
  box-sizing: border-box; }

/*************** SOFT POPUPS ***************/
.soft-popupmask {
  width: 100vw;
  height: 100vh;
  z-index: 6;
  background-color: #444;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0; }

.soft-popup {
  z-index: 7;
  position: fixed;
  width: 80%;
  max-width: 800px;
  height: 50%;
  max-height: 400px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  background-color: #efefef;
  color: #0e0e0e;
  box-shadow: 0 4px 16px 0 #252525;
  vertical-align: middle;
  overflow: hidden; }

.soft-popup div {
  width: 100%;
  height: calc(100% - 5 * 16px);
  display: table; }

.soft-popup p {
  display: table-cell;
  vertical-align: middle;
  line-height: normal; }

.soft-popup span:nth-child(1) {
  font-weight: bold;
  font-size: calc(16px * 1.5);
  line-height: 2;
  width: 100%;
  display: block;
  color: #fff;
  box-shadow: 0 -2px 16px 2px #121212;
  background-color: #9d9d9d;
  border-bottom: 0.25em solid #7e7e7e; }

.soft-popup button {
  position: relative;
  padding: 0.5em 2em;
  bottom: 2em; }

.soft-popup.success span:nth-child(1) {
  background-color: #288234;
  border-color: #36b147; }

.soft-popup.info span:nth-child(1) {
  background-color: #1f529e;
  border-color: #296dd1; }

.soft-popup.warning span:nth-child(1) {
  background-color: #c07216;
  border-color: #e7912c; }

.soft-popup.danger span:nth-child(1) {
  background-color: #9a2320;
  border-color: #cd2f2b; }

/*************** SOFT PROGRESS BARS ***************/
.soft-progress {
  width: 100%;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  height: 0.5em; }

.soft-progress div {
  height: 100%;
  text-align: center;
  border: inherit inherit inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #4586e8; }

/*************** SOFT TOOLTIPS ***************/
.soft-tooltip {
  position: relative; }

.tooltip {
  position: absolute;
  display: block;
  visibility: hidden;
  border-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }

.tooltip div {
  padding: 0.6em;
  font-size: 14px;
  font-weight: normal;
  margin: 10px !important;
  border: 0 !important;
  color: #fff;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.75);
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  width: auto;
  text-align: center;
  z-index: 2;
  animation: plop 0.2s 0s ease-in-out;
  animation-fill-mode: both; }

.tooltip div::before,
.tooltip div::after {
  width: 0;
  height: 0;
  content: '';
  display: block;
  animation: plop 0.2s 0s ease-in-out;
  animation-fill-mode: both; }

.tooltip.top div::after {
  border: 12px solid;
  border-color: #222 transparent transparent transparent;
  border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
  position: absolute;
  left: calc(50% - 12px);
  bottom: -24px; }

.tooltip.right div::after {
  border: 12px solid;
  border-color: transparent #222 transparent transparent;
  border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
  position: absolute;
  top: calc(50% - 12px);
  left: -24px; }

.tooltip.bottom div::before {
  border: 12px solid;
  border-color: transparent transparent #222 transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
  position: absolute;
  left: calc(50% - 12px);
  top: -24px; }

.tooltip.left div::before {
  border: 12px solid;
  border-color: transparent transparent transparent #222;
  border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
  position: absolute;
  top: calc(50% - 12px);
  right: -24px; }

/*************** NOTIFICATIONS *****************/
.notif-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  position: fixed;
  right: 0;
  bottom: 0; }

.notification {
  display: block;
  margin: 0.5em;
  display: block;
  border: 1px solid #848b96;
  background-color: #edf1f7;
  box-shadow: 3px 6px 18px 0 #a2a2a2;
  font-size: 18px;
  text-align: center;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  max-width: 400px;
  min-width: 120px;
  z-index: 5;
  padding: 1em !important;
  animation: plop 0.2s 0s ease-in-out; }

.notification.info {
  border-color: rgba(41, 109, 209, 0.3);
  border-right: 8px solid #296dd1; }

.notification.success {
  border-color: rgba(54, 177, 71, 0.3);
  border-right: 8px solid #36b147; }

.notification.warning {
  border-color: rgba(231, 145, 44, 0.3);
  border-right: 8px solid #e7912c; }

.notification.danger {
  border-color: rgba(205, 47, 43, 0.3);
  border-right: 8px solid #cd2f2b; }

/***************** BANNER **********************/
.banner-top,
.banner-bot {
  display: -webkit-flex;
  display: flex;
  width: 100%;
  position: fixed;
  background-color: #0e0e0e;
  color: #ecf0f1;
  z-index: 100;
  padding: 0.5em;
  left: 0;
  box-sizing: border-box; }

.banner-top {
  top: 0; }

.banner-bot {
  bottom: 0; }

.banner-top .content,
.banner-bot .content {
  flex: 1 0;
  padding: 4px; }

.banner-top .close,
.banner-bot .close {
  flex: 0 0;
  margin: auto 8px;
  border-radius: 4px;
  padding: 4px;
  background-color: #4586e8;
  color: #ecf0f1;
  font-size: 16px;
  line-height: 2em;
  height: 2em;
  box-sizing: content-box; }

.banner-top .close:hover,
.banner-bot .close:hover {
  cursor: pointer;
  background-color: #1a65d5; }

/**************************************
*** MOBILE
**************************************/
@media screen and (max-width: 600px) {
  .soft-notif {
    width: 90%;
    max-width: 90%;
    right: 5%; } }
/* We import all the helpers classes */
/********** TEXT **********/
/* Makes the first letter of the paragraph shifted from the border */
.first-letter-spacing {
  text-indent: 2em; }

.first-letter-spacing :not(.first-letter-spacing) {
  text-indent: 0; }

/* Makes the first letter of the paragraph bigger */
.first-letter-big::first-letter {
  font-size: 200%; }

.first-letter-huge::first-letter {
  font-size: 400%; }

/* Makes the text float on the left */
.text-left {
  text-align: left !important; }

/* Makes the text justified */
.text-justify {
  text-align: justify !important; }

/* Makes the text float on the right */
.text-right {
  text-align: right !important; }

/* Center the text */
.text-center {
  text-align: center !important; }

/********** ELEMENTS PLACING **********/
/* Hides the element */
.hidden, [hidden] {
  display: none !important; }

/* Makes the element float on the left */
.left {
  float: left !important; }

/* Makes the element float on the right */
.right {
  float: right !important; }

/* Clears the float on an element */
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both; }

/* Center the element ( suppposing it has a width and it's display: block ) */
.center {
  margin-left: auto !important;
  margin-right: auto !important; }

/* Makes the element takes the full width of its parent */
.fullWidth {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important; }

/* Makes the element takes the full width of the screen */
.fullScreenW {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important; }

/* Makes the element takes the full height of its parent */
.fullHeight {
  height: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

/* Makes the element take the full height of the screen */
.fullScreenH {
  height: 100vh !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

/********** ELEMENTS BEHAVIOUR **********/
.disabled {
  pointer-events: none; }

/********** ELEMENTS ASPECT **********/
/* Sets a subtle background color */
.bg-subtle {
  background-color: rgba(69, 134, 232, 0.1) !important; }

.bg-subtle.secondary {
  background-color: rgba(157, 67, 232, 0.15) !important; }

/* Sets a border */
.border {
  border: 1px solid #1c69de !important; }

.border.secondary {
  border: 1px solid #851bdd !important; }

/********** SMALL CORRECTIONS ********/
/* Set no padding */
.no-padding {
  padding: 0 !important; }

/* Set a small padding */
.padding-sm {
  padding: 0.5em !important; }

/* Set a medium padding */
.padding-md {
  padding: 1em !important; }

/* Set a big padding */
.padding-lg {
  padding: 2em !important; }

/* Set no margin */
.no-margin {
  margin: 0 !important; }

/* Set a small margin */
.margin-sm {
  margin: 0.5em !important; }

/* Set a medium margin */
.margin-md {
  margin: 1em !important; }

/* Set a big margin */
.margin-lg {
  margin: 2em !important; }

/* The margin changes depending on the screen size */
.margin-auto {
  margin: auto !important; }

/*******************************************************************************
*** ELEMENTS SPECIFIC
*******************************************************************************/
ul.no-style li {
  list-style: none; }

/* We import the file adapting some things to mobile with media queries */
/*******************************************************************************
******************************** SCREEN SIZE ***********************************
*******************************************************************************/
/***********
* TABLET
***********/
@media screen and (max-width: 780px) {
  /* The padding changes depending on the screen size */
  .padding-auto {
    padding: 1em; } }
/***********
* MOBILE
***********/
@media screen and (max-width: 600px) {
  /* The padding changes depending on the screen size */
  .padding-auto {
    padding: 0.5em; } }
/*******************************************************************************
*************************** ELEMENT SPECIFIC QUERIES ***************************
*******************************************************************************/
/*******************
* MAIN + ASIDE
*******************/
@media screen and (max-width: 1224px) {
  aside {
    display: block;
    width: 100%; }

  main {
    width: 100%;
    display: block; } }
/*******************************************************************************
***** CONTAINERS
*******************************************************************************/
/*
* LARGE
*/
@media screen and (max-width: 1200px) {
  .container-lg {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto;
    margin-right: auto; } }
/*
* MEDIUM
*/
@media screen and (max-width: 960px) {
  .container-md {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto;
    margin-right: auto; } }
/*
* SMALL
*/
@media screen and (max-width: 750px) {
  .container-sm {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto;
    margin-right: auto; } }
/**************
* HEADER
**************/
@media screen and (max-width: 800px) {
  body > header {
    font-size: 10vw; } }
/*************
* NAVSIDE
*************/
@media screen and (max-width: 1040px) {
  body.navside > header {
    font-size: 8vw; } }
/* We import the animations */
/* CONFIGURE THE ANIMATIONS HERE */
/*************** CLASSES ***************/
/*** PLOP ***/
.animation-plop {
  animation: plop 200ms 0s ease-in-out;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1; }

/*** HEARTBEAT COLOR ***/
.animation-heartbeat-color {
  animation: heartbeat-color 0.75s 0s ease;
  animation-iteration-count: infinite; }

/*** HEARTBEAT SCALE ***/
.animation-heartbeat-scale {
  animation: heartbeat-scale 0.75s 0s ease;
  animation-iteration-count: infinite; }

/*** HEARTBEAT ***/
.animation-heartbeat {
  animation: heartbeat-color 0.75s 0s ease,  heartbeat-scale 0.75s 0s ease;
  animation-iteration-count: infinite; }

/*** FADEOUT ***/
.animation-fadeout {
  animation: fadeout 2s 0s ease;
  animation-fill-mode: both; }

#heartbeat {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 20%;
  -moz-border-radius: 20%;
  border-radius: 20%;
  background-color: #ffa3a3;
  border: 2px solid #cd2f2b;
  margin-left: 50px; }

/*************** ANIMATIONS ***************/
/*** PLOP ***/
@keyframes plop {
  0% {
    -webkit-transform: scale(0.01, 0.01);
    -ms-transform: scale(0.01, 0.01);
    transform: scale(0.01, 0.01);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1; } }
@-webkit-keyframes plop {
  0% {
    -webkit-transform: scale(0.01, 0.01);
    -ms-transform: scale(0.01, 0.01);
    transform: scale(0.01, 0.01);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1.3, 1.3);
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
    opacity: 1; } }
/*** SLIDE DOWN ***/
/*********** DISCONTINUED ***********/
@keyframes slide-down {
  0% {
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0); }
  100% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    transform: scale(1, 0); }
  100% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); } }
/*** SLIDE ***/
/************** DISCONTINUED *******/
@keyframes slide {
  0% {
    height: 0; }
  100% {
    height: 200px; } }
@-webkit-keyframes slide {
  0% {
    height: 0; }
  100% {
    height: 200px; } }
/*** HEARTBEAT SCALE ***/
@keyframes heartbeat-scale {
  0% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }
  40% {
    -webkit-transform: scale(1.02, 1.02);
    -ms-transform: scale(1.02, 1.02);
    transform: scale(1.02, 1.02); }
  60% {
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2); }
  70% {
    -webkit-transform: scale(1.15, 1.15);
    -ms-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15); }
  100% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); } }
@-webkit-keyframes heartbeat-scale {
  0% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); }
  40% {
    -webkit-transform: scale(1.02, 1.02);
    -ms-transform: scale(1.02, 1.02);
    transform: scale(1.02, 1.02); }
  60% {
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2); }
  70% {
    -webkit-transform: scale(1.15, 1.15);
    -ms-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15); }
  100% {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1); } }
/*** HEARTBEAT COLOR ***/
@keyframes heartbeat-color {
  0% {
    background-color: #c82a2a; }
  40% {
    background-color: #c33737; }
  60% {
    background-color: #d66969; }
  70% {
    background-color: #d75858; }
  100% {
    background-color: #c82a2a; } }
@-webkit-keyframes heartbeat-color {
  0% {
    background-color: #c82a2a; }
  40% {
    background-color: #c33737; }
  60% {
    background-color: #d66969; }
  70% {
    background-color: #d75858; }
  100% {
    background-color: #c82a2a; } }
/*** SPIN RIGHT ***/
@keyframes spin-right {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes spin-right {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg); } }
/*** COLOR FADE OUT ***/
@keyframes color-fadeout {
  0% {
    background-color: #b6d0f6; }
  100% {
    background-color: inherit; } }
@-webkit-keyframes color-fadeout {
  0% {
    background-color: #b6d0f6; }
  100% {
    background-color: inherit; } }
/*** OPACITY FADE OUT ***/
@keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@-webkit-keyframes fadeout {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*# sourceMappingURL=papillon.min.css.map */