/* EXTERNAL */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

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

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

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

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

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

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

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* INTERNAL */
/*------------------------------------*\
  # GLOBAL SETTINGS
\*------------------------------------*/
/*------------------------------------*\
## PREFIX
\*------------------------------------*/
/**
* Description: The prefix will be concatenated at the beginning of each class.
*
* If you do not want to use a prefix, keep the variable $prefix with the false value.
* If you want to use a prefix, replace the variable $prefix with a text string.
*
* @var {string, boolean} $prefix 
*/
/*------------------------------------*\
## FONT
\*------------------------------------*/
/*------------------------------------*\
## COLOR
\*------------------------------------*/
/**
* BASIC
*/
/**
* GRAY
*/
/**
* BLUE
*/
/*------------------------------------*\
## HEADINGS AND TEXT
\*------------------------------------*/
/*------------------------------------*\
## GRID
\*------------------------------------*/
/**
* GENERAL
*/
/**
* BREAKPOINTS
*/
body {
  font-family: sans-serif;
  font-weight: lighter;
  line-height: 1.5;
  font-size: 16px;
  color: #444444;
}
body * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
}
body *::after, body *::before {
  box-sizing: border-box;
}

/* HELPER AND GRID CLASSES */
/**
* GENERATE REPETITIVE CLASSES
*
* Description: This mixing is called to generate repetitive classes.
*
* @param {map} $map - Map variable where are hosted the keys and values to generate our classes.
* @param {string} $attribute - This is a string parameter with our property name *('color', 'background-color', 'padding', etc)*.
* @param {string} $separator ['base'] - This is a string parameter with our separator value.
*
* Map example:
*
* $colors: (
*   gray-1: $color-gray-1,
*   gray-2: $color-gray-2,
*   ...
* );
*
* Call example:
*
* .text-color {
*   @include generator($colors, 'color', $separator: ':');
* }
*
*
* Output example:
*
* .text-color-gray-1 {
*   color: #f9f9f9;
* }
*
* ...
*/
/**
* GENERATE COLUMN CLASSES
*
* Description: This mixing is called to generate all the column classes.
*
* @param {string} $breakpoint - This is a string parameter with our breakpoint value *('xm', 'sm', 'ms', 'lg')*.
*/
/**
* GENERATE  ALIGNMENT CLASSES 
*
* Description: This mixing is generating the alignment classes to elements.
* These classes can align elements in the horizontal and vertical axis.
*
* Map example:
*
* $contentAlignments: (
*       justify-content: (
*           left: flex-start,
*           center: center,
*           right: flex-end
*       ),
*       align-items: (
*           top: flex-start,
*           middle: center,
*           bottom: flex-end
*       ),
*   );
*
*
* Output example:
*
* .sm-right {
*   justify-content: flex-end;
* }
*
* ...
*/
/**
* BREAKPOINT MIXINGS
*
* Description: Creating our breakpoint mixings.
*/
/**
* SMALL (SM)
*/
/**
* MEDIUM (MD)
*/
/**
* LARGE (LG)
*/
/*------------------------------------*\
  # COLORS
\*------------------------------------*/
/**
* The color classes will be generated automatically using the colors map
* and calling the generator mixing.
*
* Example: text-color-black, background-color-black, border-color-black etc
*/
.pp-text-color-black {
  color: #000;
}
.pp-text-color-white {
  color: #FFF;
}
.pp-text-color-gray-light-1 {
  color: #FAFAFA;
}
.pp-text-color-gray-light-2 {
  color: #EFEFEF;
}
.pp-text-color-gray-light-3 {
  color: #DDDDDD;
}
.pp-text-color-gray-1 {
  color: #999999;
}
.pp-text-color-gray-2 {
  color: #888888;
}
.pp-text-color-gray-3 {
  color: #666666;
}
.pp-text-color-gray-dark-1 {
  color: #444444;
}
.pp-text-color-gray-dark-2 {
  color: #333333;
}
.pp-text-color-gray-dark-3 {
  color: #111111;
}
.pp-text-color-blue-1 {
  color: #408bfc;
}
.pp-text-color-blue-2 {
  color: #0062ff;
}
.pp-text-color-blue-3 {
  color: #054ada;
}

.pp-background-color-black {
  background-color: #000;
}
.pp-background-color-white {
  background-color: #FFF;
}
.pp-background-color-gray-light-1 {
  background-color: #FAFAFA;
}
.pp-background-color-gray-light-2 {
  background-color: #EFEFEF;
}
.pp-background-color-gray-light-3 {
  background-color: #DDDDDD;
}
.pp-background-color-gray-1 {
  background-color: #999999;
}
.pp-background-color-gray-2 {
  background-color: #888888;
}
.pp-background-color-gray-3 {
  background-color: #666666;
}
.pp-background-color-gray-dark-1 {
  background-color: #444444;
}
.pp-background-color-gray-dark-2 {
  background-color: #333333;
}
.pp-background-color-gray-dark-3 {
  background-color: #111111;
}
.pp-background-color-blue-1 {
  background-color: #408bfc;
}
.pp-background-color-blue-2 {
  background-color: #0062ff;
}
.pp-background-color-blue-3 {
  background-color: #054ada;
}

.pp-border-color-black {
  border-color: #000;
}
.pp-border-color-white {
  border-color: #FFF;
}
.pp-border-color-gray-light-1 {
  border-color: #FAFAFA;
}
.pp-border-color-gray-light-2 {
  border-color: #EFEFEF;
}
.pp-border-color-gray-light-3 {
  border-color: #DDDDDD;
}
.pp-border-color-gray-1 {
  border-color: #999999;
}
.pp-border-color-gray-2 {
  border-color: #888888;
}
.pp-border-color-gray-3 {
  border-color: #666666;
}
.pp-border-color-gray-dark-1 {
  border-color: #444444;
}
.pp-border-color-gray-dark-2 {
  border-color: #333333;
}
.pp-border-color-gray-dark-3 {
  border-color: #111111;
}
.pp-border-color-blue-1 {
  border-color: #408bfc;
}
.pp-border-color-blue-2 {
  border-color: #0062ff;
}
.pp-border-color-blue-3 {
  border-color: #054ada;
}

/*------------------------------------*\
    # HEADINGS 
\*------------------------------------*/
.pp-h1 {
  font-size: 27.648px;
}

.pp-h2 {
  font-size: 23.04px;
}

.pp-h3 {
  font-size: 19.2px;
}

.pp-h4 {
  font-size: 13.3333333333px;
}

/*------------------------------------*\
## SPECIAL CLASSES
\*------------------------------------*/
.pp-small {
  font-size: 11.1111111111px;
}

.pp-h1.pp-medium {
  font-size: 33.1776px;
}

.pp-h1.pp-large {
  font-size: 39.81312px;
}

/*------------------------------------*\
    # TEXT  
\*------------------------------------*/
/*------------------------------------*\
## TEXT WEIGHTS 
\*------------------------------------*/
.pp-bolder {
  font-weight: bolder;
}

.pp-bold {
  font-weight: bold;
}

.pp-regular {
  font-weight: normal;
}

.pp-light {
  font-weight: lighter;
}

.pp-thin {
  font-weight: 100;
}

/*------------------------------------*\
## TEXT TRANSFORM
\*------------------------------------*/
.pp-text-uppercase {
  text-transform: uppercase;
}

/*------------------------------------*\
  # SPACING
\*------------------------------------*/
/**
* The margin and padding classes will be generated automatically using the spacings map
* and calling the generator mixing.
*
* Example:  padding-top-1, margin-1, padidng-0, etc
*/
/*------------------------------------*\
## PADDINGS AND MARGINS
\*------------------------------------*/
.pp-nospacing {
  padding: 0;
  margin: 0;
}

.pp-padding-0 {
  padding: 0rem;
}
.pp-padding-1 {
  padding: 0.625rem;
}
.pp-padding-2 {
  padding: 1.25rem;
}
.pp-padding-3 {
  padding: 1.875rem;
}
.pp-padding-4 {
  padding: 2.5rem;
}
.pp-padding-5 {
  padding: 3.125rem;
}
.pp-padding-r1 {
  padding: 2vw;
}
.pp-padding-r2 {
  padding: 5vw;
}
.pp-padding-r3 {
  padding: 10vw;
}
.pp-padding-top-0 {
  padding-top: 0rem;
}
.pp-padding-top-1 {
  padding-top: 0.625rem;
}
.pp-padding-top-2 {
  padding-top: 1.25rem;
}
.pp-padding-top-3 {
  padding-top: 1.875rem;
}
.pp-padding-top-4 {
  padding-top: 2.5rem;
}
.pp-padding-top-5 {
  padding-top: 3.125rem;
}
.pp-padding-top-r1 {
  padding-top: 2vw;
}
.pp-padding-top-r2 {
  padding-top: 5vw;
}
.pp-padding-top-r3 {
  padding-top: 10vw;
}
.pp-padding-right-0 {
  padding-right: 0rem;
}
.pp-padding-right-1 {
  padding-right: 0.625rem;
}
.pp-padding-right-2 {
  padding-right: 1.25rem;
}
.pp-padding-right-3 {
  padding-right: 1.875rem;
}
.pp-padding-right-4 {
  padding-right: 2.5rem;
}
.pp-padding-right-5 {
  padding-right: 3.125rem;
}
.pp-padding-right-r1 {
  padding-right: 2vw;
}
.pp-padding-right-r2 {
  padding-right: 5vw;
}
.pp-padding-right-r3 {
  padding-right: 10vw;
}
.pp-padding-bottom-0 {
  padding-bottom: 0rem;
}
.pp-padding-bottom-1 {
  padding-bottom: 0.625rem;
}
.pp-padding-bottom-2 {
  padding-bottom: 1.25rem;
}
.pp-padding-bottom-3 {
  padding-bottom: 1.875rem;
}
.pp-padding-bottom-4 {
  padding-bottom: 2.5rem;
}
.pp-padding-bottom-5 {
  padding-bottom: 3.125rem;
}
.pp-padding-bottom-r1 {
  padding-bottom: 2vw;
}
.pp-padding-bottom-r2 {
  padding-bottom: 5vw;
}
.pp-padding-bottom-r3 {
  padding-bottom: 10vw;
}
.pp-padding-left-0 {
  padding-left: 0rem;
}
.pp-padding-left-1 {
  padding-left: 0.625rem;
}
.pp-padding-left-2 {
  padding-left: 1.25rem;
}
.pp-padding-left-3 {
  padding-left: 1.875rem;
}
.pp-padding-left-4 {
  padding-left: 2.5rem;
}
.pp-padding-left-5 {
  padding-left: 3.125rem;
}
.pp-padding-left-r1 {
  padding-left: 2vw;
}
.pp-padding-left-r2 {
  padding-left: 5vw;
}
.pp-padding-left-r3 {
  padding-left: 10vw;
}

.pp-margin-0 {
  margin: 0rem;
}
.pp-margin-1 {
  margin: 0.625rem;
}
.pp-margin-2 {
  margin: 1.25rem;
}
.pp-margin-3 {
  margin: 1.875rem;
}
.pp-margin-4 {
  margin: 2.5rem;
}
.pp-margin-5 {
  margin: 3.125rem;
}
.pp-margin-r1 {
  margin: 2vw;
}
.pp-margin-r2 {
  margin: 5vw;
}
.pp-margin-r3 {
  margin: 10vw;
}
.pp-margin-top-0 {
  margin-top: 0rem;
}
.pp-margin-top-1 {
  margin-top: 0.625rem;
}
.pp-margin-top-2 {
  margin-top: 1.25rem;
}
.pp-margin-top-3 {
  margin-top: 1.875rem;
}
.pp-margin-top-4 {
  margin-top: 2.5rem;
}
.pp-margin-top-5 {
  margin-top: 3.125rem;
}
.pp-margin-top-r1 {
  margin-top: 2vw;
}
.pp-margin-top-r2 {
  margin-top: 5vw;
}
.pp-margin-top-r3 {
  margin-top: 10vw;
}
.pp-margin-right-0 {
  margin-right: 0rem;
}
.pp-margin-right-1 {
  margin-right: 0.625rem;
}
.pp-margin-right-2 {
  margin-right: 1.25rem;
}
.pp-margin-right-3 {
  margin-right: 1.875rem;
}
.pp-margin-right-4 {
  margin-right: 2.5rem;
}
.pp-margin-right-5 {
  margin-right: 3.125rem;
}
.pp-margin-right-r1 {
  margin-right: 2vw;
}
.pp-margin-right-r2 {
  margin-right: 5vw;
}
.pp-margin-right-r3 {
  margin-right: 10vw;
}
.pp-margin-bottom-0 {
  margin-bottom: 0rem;
}
.pp-margin-bottom-1 {
  margin-bottom: 0.625rem;
}
.pp-margin-bottom-2 {
  margin-bottom: 1.25rem;
}
.pp-margin-bottom-3 {
  margin-bottom: 1.875rem;
}
.pp-margin-bottom-4 {
  margin-bottom: 2.5rem;
}
.pp-margin-bottom-5 {
  margin-bottom: 3.125rem;
}
.pp-margin-bottom-r1 {
  margin-bottom: 2vw;
}
.pp-margin-bottom-r2 {
  margin-bottom: 5vw;
}
.pp-margin-bottom-r3 {
  margin-bottom: 10vw;
}
.pp-margin-left-0 {
  margin-left: 0rem;
}
.pp-margin-left-1 {
  margin-left: 0.625rem;
}
.pp-margin-left-2 {
  margin-left: 1.25rem;
}
.pp-margin-left-3 {
  margin-left: 1.875rem;
}
.pp-margin-left-4 {
  margin-left: 2.5rem;
}
.pp-margin-left-5 {
  margin-left: 3.125rem;
}
.pp-margin-left-r1 {
  margin-left: 2vw;
}
.pp-margin-left-r2 {
  margin-left: 5vw;
}
.pp-margin-left-r3 {
  margin-left: 10vw;
}

/*------------------------------------*\
  # GRID
\*------------------------------------*/
*, *::after, *::before {
  box-sizing: border-box;
}

/*------------------------------------*\
## CONTAINERS
\*------------------------------------*/
.pp-container,
.pp-container-fluid {
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
}

.pp-container {
  max-width: 1200px;
  flex-grow: 1;
  width: auto;
}

.pp-container-fluid {
  width: 100%;
}

/*------------------------------------*\
### ROWS
\*------------------------------------*/
.pp-row, .pp-flex {
  display: flex;
  flex-wrap: wrap;
}

.pp-nowrap {
  flex-wrap: nowrap;
}

/*------------------------------------*\
#### COLUMNS
\*------------------------------------*/
/**
* EXTRA SMALL (XS)
*/
[class*=col-] {
  padding: 0.5rem;
}

.pp-col-xs {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}

/*------------------------------------*\
# COLUMNS
\*------------------------------------*/
.pp-col-xs-1 {
  width: 8.3333333333%;
}

.pp-col-xs-2 {
  width: 16.6666666667%;
}

.pp-col-xs-3 {
  width: 25%;
}

.pp-col-xs-4 {
  width: 33.3333333333%;
}

.pp-col-xs-5 {
  width: 41.6666666667%;
}

.pp-col-xs-6 {
  width: 50%;
}

.pp-col-xs-7 {
  width: 58.3333333333%;
}

.pp-col-xs-8 {
  width: 66.6666666667%;
}

.pp-col-xs-9 {
  width: 75%;
}

.pp-col-xs-10 {
  width: 83.3333333333%;
}

.pp-col-xs-11 {
  width: 91.6666666667%;
}

.pp-col-xs-12 {
  width: 100%;
}

/*------------------------------------*\
# OFFSET COLUMNS
\*------------------------------------*/
.pp-col-xs-offset-1 {
  margin-left: 8.3333333333%;
}

.pp-col-xs-offset-2 {
  margin-left: 16.6666666667%;
}

.pp-col-xs-offset-3 {
  margin-left: 25%;
}

.pp-col-xs-offset-4 {
  margin-left: 33.3333333333%;
}

.pp-col-xs-offset-5 {
  margin-left: 41.6666666667%;
}

.pp-col-xs-offset-6 {
  margin-left: 50%;
}

.pp-col-xs-offset-7 {
  margin-left: 58.3333333333%;
}

.pp-col-xs-offset-8 {
  margin-left: 66.6666666667%;
}

.pp-col-xs-offset-9 {
  margin-left: 75%;
}

.pp-col-xs-offset-10 {
  margin-left: 83.3333333333%;
}

.pp-col-xs-offset-11 {
  margin-left: 91.6666666667%;
}

.pp-col-xs-offset-12 {
  margin-left: 100%;
}

/*------------------------------------*\
# HIDDING ELEMENTS
\*------------------------------------*/
.pp-col-xs-first {
  order: -1;
}

.pp-col-xs-last {
  order: 1;
}

/*------------------------------------*\
# ORDERING
\*------------------------------------*/
.pp-xs-hide {
  display: none;
}

/**
* SMALL (SM), MEDIUM (MD), LARGE (LG)
*/
@media (min-width: 768px) {
  /*------------------------------------*\
  # COLUMNS
  \*------------------------------------*/
  .pp-col-sm-1 {
    width: 8.3333333333%;
  }

  .pp-col-sm-2 {
    width: 16.6666666667%;
  }

  .pp-col-sm-3 {
    width: 25%;
  }

  .pp-col-sm-4 {
    width: 33.3333333333%;
  }

  .pp-col-sm-5 {
    width: 41.6666666667%;
  }

  .pp-col-sm-6 {
    width: 50%;
  }

  .pp-col-sm-7 {
    width: 58.3333333333%;
  }

  .pp-col-sm-8 {
    width: 66.6666666667%;
  }

  .pp-col-sm-9 {
    width: 75%;
  }

  .pp-col-sm-10 {
    width: 83.3333333333%;
  }

  .pp-col-sm-11 {
    width: 91.6666666667%;
  }

  .pp-col-sm-12 {
    width: 100%;
  }

  /*------------------------------------*\
  # OFFSET COLUMNS
  \*------------------------------------*/
  .pp-col-sm-offset-1 {
    margin-left: 8.3333333333%;
  }

  .pp-col-sm-offset-2 {
    margin-left: 16.6666666667%;
  }

  .pp-col-sm-offset-3 {
    margin-left: 25%;
  }

  .pp-col-sm-offset-4 {
    margin-left: 33.3333333333%;
  }

  .pp-col-sm-offset-5 {
    margin-left: 41.6666666667%;
  }

  .pp-col-sm-offset-6 {
    margin-left: 50%;
  }

  .pp-col-sm-offset-7 {
    margin-left: 58.3333333333%;
  }

  .pp-col-sm-offset-8 {
    margin-left: 66.6666666667%;
  }

  .pp-col-sm-offset-9 {
    margin-left: 75%;
  }

  .pp-col-sm-offset-10 {
    margin-left: 83.3333333333%;
  }

  .pp-col-sm-offset-11 {
    margin-left: 91.6666666667%;
  }

  .pp-col-sm-offset-12 {
    margin-left: 100%;
  }

  /*------------------------------------*\
  # HIDDING ELEMENTS
  \*------------------------------------*/
  .pp-col-sm-first {
    order: -1;
  }

  .pp-col-sm-last {
    order: 1;
  }

  /*------------------------------------*\
  # ORDERING
  \*------------------------------------*/
  .pp-sm-hide {
    display: none;
  }
}
@media (min-width: 992px) {
  /*------------------------------------*\
  # COLUMNS
  \*------------------------------------*/
  .pp-col-md-1 {
    width: 8.3333333333%;
  }

  .pp-col-md-2 {
    width: 16.6666666667%;
  }

  .pp-col-md-3 {
    width: 25%;
  }

  .pp-col-md-4 {
    width: 33.3333333333%;
  }

  .pp-col-md-5 {
    width: 41.6666666667%;
  }

  .pp-col-md-6 {
    width: 50%;
  }

  .pp-col-md-7 {
    width: 58.3333333333%;
  }

  .pp-col-md-8 {
    width: 66.6666666667%;
  }

  .pp-col-md-9 {
    width: 75%;
  }

  .pp-col-md-10 {
    width: 83.3333333333%;
  }

  .pp-col-md-11 {
    width: 91.6666666667%;
  }

  .pp-col-md-12 {
    width: 100%;
  }

  /*------------------------------------*\
  # OFFSET COLUMNS
  \*------------------------------------*/
  .pp-col-md-offset-1 {
    margin-left: 8.3333333333%;
  }

  .pp-col-md-offset-2 {
    margin-left: 16.6666666667%;
  }

  .pp-col-md-offset-3 {
    margin-left: 25%;
  }

  .pp-col-md-offset-4 {
    margin-left: 33.3333333333%;
  }

  .pp-col-md-offset-5 {
    margin-left: 41.6666666667%;
  }

  .pp-col-md-offset-6 {
    margin-left: 50%;
  }

  .pp-col-md-offset-7 {
    margin-left: 58.3333333333%;
  }

  .pp-col-md-offset-8 {
    margin-left: 66.6666666667%;
  }

  .pp-col-md-offset-9 {
    margin-left: 75%;
  }

  .pp-col-md-offset-10 {
    margin-left: 83.3333333333%;
  }

  .pp-col-md-offset-11 {
    margin-left: 91.6666666667%;
  }

  .pp-col-md-offset-12 {
    margin-left: 100%;
  }

  /*------------------------------------*\
  # HIDDING ELEMENTS
  \*------------------------------------*/
  .pp-col-md-first {
    order: -1;
  }

  .pp-col-md-last {
    order: 1;
  }

  /*------------------------------------*\
  # ORDERING
  \*------------------------------------*/
  .pp-md-hide {
    display: none;
  }
}
@media (min-width: 1200px) {
  /*------------------------------------*\
  # COLUMNS
  \*------------------------------------*/
  .pp-col-lg-1 {
    width: 8.3333333333%;
  }

  .pp-col-lg-2 {
    width: 16.6666666667%;
  }

  .pp-col-lg-3 {
    width: 25%;
  }

  .pp-col-lg-4 {
    width: 33.3333333333%;
  }

  .pp-col-lg-5 {
    width: 41.6666666667%;
  }

  .pp-col-lg-6 {
    width: 50%;
  }

  .pp-col-lg-7 {
    width: 58.3333333333%;
  }

  .pp-col-lg-8 {
    width: 66.6666666667%;
  }

  .pp-col-lg-9 {
    width: 75%;
  }

  .pp-col-lg-10 {
    width: 83.3333333333%;
  }

  .pp-col-lg-11 {
    width: 91.6666666667%;
  }

  .pp-col-lg-12 {
    width: 100%;
  }

  /*------------------------------------*\
  # OFFSET COLUMNS
  \*------------------------------------*/
  .pp-col-lg-offset-1 {
    margin-left: 8.3333333333%;
  }

  .pp-col-lg-offset-2 {
    margin-left: 16.6666666667%;
  }

  .pp-col-lg-offset-3 {
    margin-left: 25%;
  }

  .pp-col-lg-offset-4 {
    margin-left: 33.3333333333%;
  }

  .pp-col-lg-offset-5 {
    margin-left: 41.6666666667%;
  }

  .pp-col-lg-offset-6 {
    margin-left: 50%;
  }

  .pp-col-lg-offset-7 {
    margin-left: 58.3333333333%;
  }

  .pp-col-lg-offset-8 {
    margin-left: 66.6666666667%;
  }

  .pp-col-lg-offset-9 {
    margin-left: 75%;
  }

  .pp-col-lg-offset-10 {
    margin-left: 83.3333333333%;
  }

  .pp-col-lg-offset-11 {
    margin-left: 91.6666666667%;
  }

  .pp-col-lg-offset-12 {
    margin-left: 100%;
  }

  /*------------------------------------*\
  # HIDDING ELEMENTS
  \*------------------------------------*/
  .pp-col-lg-first {
    order: -1;
  }

  .pp-col-lg-last {
    order: 1;
  }

  /*------------------------------------*\
  # ORDERING
  \*------------------------------------*/
  .pp-lg-hide {
    display: none;
  }
}
/*------------------------------------*\
### ROW REVERSING
\*------------------------------------*/
.pp-row.pp-row-reverse {
  flex-direction: row-reverse;
}

/*------------------------------------*\
  # DISTRIBUTION
\*------------------------------------*/
/*------------------------------------*\
## CONTENT DISTRIBUTION
\*------------------------------------*/
.pp-xs-around {
  justify-content: space-around;
}

.pp-xs-between {
  justify-content: space-between;
}

.pp-xs-evenly {
  justify-content: space-evenly;
}

@media (min-width: 768px) {
  .pp-sm-around {
    justify-content: space-around;
  }

  .pp-sm-between {
    justify-content: space-between;
  }

  .pp-sm-evenly {
    justify-content: space-evenly;
  }
}
@media (min-width: 992px) {
  .pp-md-around {
    justify-content: space-around;
  }

  .pp-md-between {
    justify-content: space-between;
  }

  .pp-md-evenly {
    justify-content: space-evenly;
  }
}
@media (min-width: 1200px) {
  .pp-lg-around {
    justify-content: space-around;
  }

  .pp-lg-between {
    justify-content: space-between;
  }

  .pp-lg-evenly {
    justify-content: space-evenly;
  }
}
/*------------------------------------*\
  # ALIGNMENT
\*------------------------------------*/
/*------------------------------------*\
## TEXT ALIGNMENT
\*------------------------------------*/
.pp-text-center {
  text-align: center;
}
.pp-text-right {
  text-align: right;
}
.pp-text-left {
  text-align: left;
}

/*------------------------------------*\
## CONTENT ALIGNMENT
\*------------------------------------*/
.pp-xs-left {
  justify-content: flex-start;
}

.pp-xs-center {
  justify-content: center;
}

.pp-xs-right {
  justify-content: flex-end;
}

.pp-xs-top {
  align-items: flex-start;
}

.pp-xs-middle {
  align-items: center;
}

.pp-xs-bottom {
  align-items: flex-end;
}

@media (min-width: 768px) {
  .pp-sm-left {
    justify-content: flex-start;
  }

  .pp-sm-center {
    justify-content: center;
  }

  .pp-sm-right {
    justify-content: flex-end;
  }

  .pp-sm-top {
    align-items: flex-start;
  }

  .pp-sm-middle {
    align-items: center;
  }

  .pp-sm-bottom {
    align-items: flex-end;
  }
}
@media (min-width: 992px) {
  .pp-md-left {
    justify-content: flex-start;
  }

  .pp-md-center {
    justify-content: center;
  }

  .pp-md-right {
    justify-content: flex-end;
  }

  .pp-md-top {
    align-items: flex-start;
  }

  .pp-md-middle {
    align-items: center;
  }

  .pp-md-bottom {
    align-items: flex-end;
  }
}
@media (min-width: 1200px) {
  .pp-lg-left {
    justify-content: flex-start;
  }

  .pp-lg-center {
    justify-content: center;
  }

  .pp-lg-right {
    justify-content: flex-end;
  }

  .pp-lg-top {
    align-items: flex-start;
  }

  .pp-lg-middle {
    align-items: center;
  }

  .pp-lg-bottom {
    align-items: flex-end;
  }
}
/*------------------------------------*\
  # WIDTHS
\*------------------------------------*/
.pp-width-100 {
  width: 100%;
}

/*------------------------------------*\
  # HEIGHT
\*------------------------------------*/
.pp-height-100 {
  height: 100%;
}

/*------------------------------------*\
  # IMAGE SIZE
\*------------------------------------*/
.pp-resize {
  height: auto;
  width: 100%;
}

.pp-downsize {
  max-width: 100%;
  height: auto;
}

/* ELEMENTS */
.header__container {
  background-image: linear-gradient(-90deg, white, #EFEFEF);
  align-items: center;
  min-height: 110vh;
  width: 100vw;
  line-height: 1;
}
.header__title {
  background: url("water.jpg") center/cover #333333;
  background-attachment: fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  word-break: break-word;
  font-size: 30vmin;
  font-weight: 900;
  padding: 1rem;
  width: 100%;
  margin: 0;
}
.header__span {
  word-break: break-all;
}

.nav__container {
  border: 1px solid var(--gray-color-1, #e2e2e2);
  position: -webkit-sticky;
  position: sticky;
  display: flex;
  top: 0;
}
.nav__li {
  border-right: 1px solid var(--gray-color-1, #e2e2e2);
  list-style: none;
}
.nav__li:first-child {
  border-left: 1px solid var(--gray-color-1, #e2e2e2);
}
.nav__li a {
  color: var(--black-color-3, #6b6b6b);
  padding: 1.5rem 2.5rem;
  text-decoration: none;
  display: block;
}

.image__container {
  width: 200px;
}
.image__profile {
  border: 5px solid var(--white-color-1, white);
  box-shadow: 0 1px 5px rgba(39, 39, 39, 0.411);
  border-radius: 50%;
  position: absolute;
  height: 150px;
  width: auto;
}

.about-section {
  background: linear-gradient(180deg, rgba(48, 107, 106, 0.9), #306b6a), url("water.jpg") center/cover !important;
  background-attachment: fixed !important;
}

.card {
  box-shadow: 0 1px 5px rgba(39, 39, 39, 0.72);
  transition: all 0.5s ease;
  border-radius: 6px;
}
.card:hover {
  box-shadow: 0 1px 20px rgba(39, 39, 39, 0.9);
}

/* TEMPORAL BEFORE REFACTOR */
/**********************************/
/*** COLORS
/**********************************/
:root {
  --white-color-1: rgb(255, 255, 255);
  --black-color-1: rgb(41, 41, 41);
  --black-color-2: rgb(63, 63, 63);
  --black-color-3: rgb(87, 87, 87);
  --gray-color-1: rgb(235, 235, 235);
  --gray-color-2: rgb(241, 241, 241);
  --blue-color-1: rgb(73, 160, 159);
  --blue-green-1: rgb(48, 107, 106);
  --blue-green-1-t90: rgba(48, 107, 106, 0.9);
  --blue-green-2: rgb(51, 71, 72);
  --blue-green-2-t90: rgba(47, 65, 66, 0.9);
  --red-color-1: rgb(240, 90, 93);
}

/*********************************/
/*** ABOUT
/*********************************/
.about-section {
  background: linear-gradient(180deg, var(--blue-green-1-t90), var(--blue-green-1)), url("../assets/images/leadspace-background.jpg") center fixed/cover;
  padding: 6rem 2rem;
  display: flex;
}

.card {
  box-shadow: 0 1px 5px rgba(39, 39, 39, 0.72);
  background-color: var(--white-color-1);
  transition: all 0.5s ease;
  padding: 1.5rem 2rem 3rem;
  border-radius: 6px;
  margin: 1.5rem;
}

.card:hover {
  box-shadow: 0 1px 20px rgba(39, 39, 39, 0.9);
}

.card-title,
.skills-title,
.resume-title,
.contact-title {
  font-size: 2rem;
}

.card-title::after,
.skills-title::after,
.resume-title::after,
.contact-title::after {
  background-color: var(--blue-green-1);
  margin-top: 0.3rem;
  display: block;
  content: "";
  height: 5px;
  width: 68px;
}

.card-subtitle,
.skill-subtitle {
  color: var(--black-color-2);
  text-transform: uppercase;
  font-weight: 550;
  font-size: 1rem;
  padding: 1rem 0 0.5rem 0;
}

.card-description {
  color: var(--black-color-3);
  font-size: 0.9rem;
  font-weight: 100;
}

.card-list,
.card-social {
  list-style: none;
  padding-left: 0;
}

.card-list {
  padding-bottom: 1rem;
}

.card-li {
  padding: 0.5rem 0;
}

.card-social {
  display: flex;
}

.social-icon {
  margin-right: 1rem;
}

.social-icon .fab {
  transition: color 0.3s ease;
  color: var(--black-color-3);
  font-size: 1.5rem;
}

.social-icon .fab:hover {
  color: var(--blue-green-1);
}

.card-li a {
  transition: color 0.3s ease;
  color: var(--black-color-3);
  text-decoration: none;
}

.card-li a:hover {
  color: var(--blue-color-1);
}

.card-buttom {
  border: 1px solid var(--blue-green-1);
  transition: all 0.3s ease-in;
  color: var(--blue-green-1);
  text-decoration: none;
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 100;
  margin-top: 2rem;
}

.card-buttom:hover {
  background-image: linear-gradient(200deg, var(--blue-green-1), var(--blue-green-2));
  color: var(--white-color-1);
}

.card-buttom .fas {
  margin-right: 0.3rem;
}

.card.whoami {
  width: 60%;
}

.card.information {
  width: 30%;
}

/*********************************/
/*** SKILLS
/*********************************/
.skills-section {
  background-color: var(--white-color-1);
  padding: 4rem 3.5rem;
}

.skills-title,
.resume-title,
.contact-title {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.skills {
  justify-content: space-around;
  display: flex;
}

.skills-container {
  margin: 2rem;
  width: 40%;
}

.skills-subtitle {
  display: inline-block;
  margin-top: 2.8rem;
}

.skills-ul {
  list-style: none;
  padding-left: 0;
}

.skills-li {
  margin-bottom: 1rem;
  display: block;
}

.skill-title {
  justify-content: space-between;
  margin: 0.5rem 0;
  display: flex;
}

.skill-title,
.skill-level {
  color: var(--blue-green-1);
  font-weight: 100;
}

.progress-bar,
.progress {
  border-radius: 0.5rem;
  height: 0.5rem;
}

.progress-bar {
  background-color: var(--gray-color-1, #e2e2e2);
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress {
  /* background: linear-gradient(30deg, var(--blue-green-1), var(--blue-green-2)); */
  background: linear-gradient(30deg, var(--blue-green-1), var(--blue-color-1));
}

.progress[aria-valuenow="25"] {
  width: 25%;
}

.progress[aria-valuenow="50"] {
  width: 50%;
}

.progress[aria-valuenow="75"] {
  width: 75%;
}

.progress[aria-valuenow="100"] {
  width: 100%;
}

/*********************************/
/*** RESUME
/*********************************/
.resume-section {
  background-image: linear-gradient(-90deg, var(--white-color-1), var(--gray-color-2));
  padding: 4rem 3.5rem;
  width: 100%;
}

.resume {
  justify-content: center;
  margin: 4.8rem 0 2.5rem;
  flex-wrap: wrap;
  display: flex;
}

.role {
  margin: 1rem;
  width: 22%;
  /*width: 25%;*/
}

.card__alternate {
  box-shadow: 0 1px 1px rgba(161, 161, 161, 0.72);
}

.card__alternate:hover {
  box-shadow: 0 1px 10px rgba(161, 161, 161, 0.72);
}

/*********************************/
/*** CONTACT
/*********************************/
.contact-section {
  background-color: var(--white-color-1);
  color: var(--black-color-3);
  text-align: center;
  padding-top: 4rem;
  font-size: 0.9rem;
  font-weight: 100;
}

.contact-section a {
  transition: color 0.3s ease;
  color: var(--blue-color-1);
  text-decoration: none;
  font-weight: 600;
}

.contact-section a:hover {
  color: var(--blue-green-1);
}

.contact-message {
  margin-bottom: 6rem;
  font-size: 1.3rem;
  padding: 0 3.5rem;
}

.contact-message p {
  line-height: 1.5;
  margin: 0;
}

.contact-title {
  color: var(--black-color-1);
  padding-bottom: 1rem;
}

.footer__nocopyright {
  background-image: linear-gradient(-90deg, var(--white-color-1), var(--gray-color-2));
  border-top: 1px solid var(--gray-color-1);
  justify-content: space-around;
  padding: 1.5rem 3.5rem 1.3rem 3.5rem;
  align-content: center;
  display: flex;
}

.fa-heart {
  color: var(--red-color-1);
  font-size: 0.8rem;
}

.footer__nocopyright p {
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  line-height: 1.6;
}

.footer__nocopyright .social-icon:last-child {
  margin-right: 0;
}

@media (max-width: 992px) {
  /*********************************/
  /*** ABOUT, SKILLS, RESUME
  /*********************************/
  .about-section,
.skills,
.resume {
    flex-wrap: wrap;
  }

  .about-section .card.whoami,
.about-section .card.information,
.skills .skills-container,
.resume .role {
    width: 100%;
  }
}
@media (max-width: 778px) {
  .header__container {
    min-height: 100vh;
  }

  .header__title {
    font-size: 32vmin;
  }

  /*********************************/
  /*** NAVIGATION
  /*********************************/
  .nav__container, .image__container {
    display: none;
  }

  /*********************************/
  /*** CONTACT
  /*********************************/
  .footer__nocopyright {
    flex-wrap: wrap;
  }
}
@media (max-width: 576px) {
  /*********************************/
  /*** ABOUT, SKILLS, RESUME
  /*********************************/
  body .about-section,
body .skills-section,
body .resume-section {
    padding: 2rem 0.5rem;
  }

  body .contact-message {
    padding: 0 0.5rem;
  }

  /*********************************/
  /*** NAVIGATION
  /*********************************/
  .nav-ul .nav-li a {
    padding: 1.5rem 1rem;
  }

  /*********************************/
  /*** CONTACT
  /*********************************/
  .footer__nocopyright {
    flex-direction: column;
    align-items: center;
  }
}

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