@charset "UTF-8";
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *	1. Base
 *	2. Elements
 *	3. Collections
 *	4. Pages
 */
/* ==========================================================================
   1. Base
   ========================================================================== */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *	1. Base
 *    - 1.1. Color
 *    - 1.2. Font
 *    - 1.3. Mobile
 *	2. Elements
 *	   - 2.1. Spacing
 *    - 2.2. Typography
 *    - 2.3. Button
 *    - 2.4. Link
 *    - 2.5. Container
 * 3. Collections
 *    - 3.1. Grid
 *    - 3.2. Topnav
 *    - 3.3. Footer
 *    - 3.4. Banner
 *    - 3.5. Form
 *    - 3.6. Table
 *    - 3.7. Menu
 *    - 3.8. Pricing
 *    - 3.9. Promo
 *    - 3.10. Dropdown
 *    - 3.11. Tabs
 *    - 3.12. Sidenav
 *    - 3.13. Toast
 *    - 3.14. Modal
 */
/* ==========================================================================
   1. Base
   ========================================================================== */
/* 1.1. Color
   ========================================================================== */
/* 1.2. Font
   ========================================================================== */
/* 1.3. Mobile
   ========================================================================== */
/* ==========================================================================
   2. Elements
   ========================================================================== */
/* 2.1. Spacing
   ========================================================================== */
/* 2.2. Typography
   ========================================================================== */
/* 2.3. Button
   ========================================================================== */
/* 2.4. Link
   ========================================================================== */
/* 2.5. Container
   ========================================================================== */
/* ==========================================================================
   3. Collections
   ========================================================================== */
/* 3.1. Grid
   ========================================================================== */
/* 3.2. Topnav
   ========================================================================== */
/* 3.3. Footer
   ========================================================================== */
/* 3.4. Banner
   ========================================================================== */
/* 3.5. Form
   ========================================================================== */
/* 3.6. Table
   ========================================================================== */
/* 3.7. Menu
   ========================================================================== */
/* 3.8. Pricing
   ========================================================================== */
/* 3.9. Promo
   ========================================================================== */
/* 3.10. Dropdown
   ========================================================================== */
/* 3.11. Tabs
   ========================================================================== */
/* 3.12. Sidenav
   ========================================================================== */
/* 3.13. Toast
   ========================================================================== */
/* 3.14. Modal
   ========================================================================== */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Media CSS shorthand.
 *
 * Example:
 *
 * body {
 *     @include media(300px, 500px, 'screen') {
 *         // apply at 300-500px for screen display
 *         background: red;
 *     }
 * }
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Equal (eq).
 *
 * Example:
 *
 * body {
 *     @include eq(sm md) {
 *         // apply at sm and md
 *         background: red;
 *     }
 * }
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Greater Than (gt).
 *
 * Example:
 *
 * body {
 *     @include gt(sm) {
 *         // apply at md and lg
 *         background: red;
 *     }
 * }
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Greater Than or Equal (gte).
 *
 * Example:
 *
 * body {
 *     @include gte(md) {
 *         // apply at md and lg
 *         background: red;
 *     }
 * }
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Lower Than (lt).
 *
 * Example:
 *
 * body {
 *     @include lt(md) {
 *         // apply at sm
 *         background: red;
 *     }
 * }
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Lower Than or Equal (lte).
 *
 * Example:
 *
 * body {
 *     @include lte(md) {
 *         // apply at sm and md
 *         background: red;
 *     }
 * }
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * @param $n - width from range <1, $columns>
 * @param $columns - number of columns (> 0)
 */
/**
 * Version: 1.1.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

body, input, textarea, select, button {
  color: #39474e;
  font-size: 15px;
  font-family: Roboto, Open Sans, OpenSans, Arial;
  line-height: 1.4;
}

aside, header, footer, main, section, article, code {
  display: block;
}

a {
  text-decoration: none;
  color: #43a047;
  transition: color 0.4s;
}

a:hover {
  color: #ff5722;
}

a.active {
  color: #43a047;
}

a:focus {
  color: #ff5722;
}

a img {
  border: none;
}

strong, b, th {
  font-weight: 700;
}

ol, ul {
  list-style-type: none;
}

ol.-decimal, ul.-decimal {
  list-style-type: decimal;
}

ol.-circle, ul.-circle {
  list-style-type: circle;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

small {
  font-size: 14px;
}

*[id]:before {
  /* https://css-tricks.com/hash-tag-links-padding/ */
  display: block;
  content: " ";
  margin-top: -100px;
  height: 100px;
  visibility: hidden;
}

.modal,
[show-if-input],
[show-if-checked] {
  display: none;
}

/* ==========================================================================
   2. Elements
   ========================================================================== */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Usage:
 *
 * .<x><y><z> where:
 * - <x> - m/p (margin/padding)
 * - <y> - t/r/b/l (top/right/bottom/left)
 * - <z> - x/s/m/l (xs/sm/md/lg)
 *
 * Examples:
 *
 * .mbs - Margin Bottom Small
 * .prl - Padding Right Large
 *
 * Summary:
 *
 *	1. Margin
 *	2. Padding
 */
/* ==========================================================================
   1. Margin
   ========================================================================== */
.mtx {
  margin-top: 5px !important;
}

.mrx, .breadcrumb-item:before {
  margin-right: 5px !important;
}

.mbx, .footer-header {
  margin-bottom: 5px !important;
}

.mlx, .breadcrumb-item:before {
  margin-left: 5px !important;
}

.mts, .form-field + .form-field, .p-package .p-package-text, .p-products .p-products-item .p-products-item-subtitle, .p-products .p-products-item .p-products-item-text {
  margin-top: 10px !important;
}

.mrs {
  margin-right: 10px !important;
}

.mbs, .p-wizard-step .material-icons, .p-wizard-step .menu-toggle:before {
  margin-bottom: 10px !important;
}

.mls, .form-label-tooltip, .form-checkbox > label > .tooltip, .form-radio > label > .tooltip {
  margin-left: 10px !important;
}

.mtm, .p-package .p-package-price {
  margin-top: 20px !important;
}

.mrm, .p-wizard-next {
  margin-right: 20px !important;
}

.mbm, .footer-article, .pricing-item, .regulations ol.regulations-list > li {
  margin-bottom: 20px !important;
}

.mlm, .p-wizard-next {
  margin-left: 20px !important;
}

.mtl, .p-products .p-products-text, .user-item {
  margin-top: 40px !important;
}

.mrl {
  margin-right: 40px !important;
}

.mbl {
  margin-bottom: 40px !important;
}

.mll {
  margin-left: 40px !important;
}

/* ==========================================================================
   2. Padding
   ========================================================================== */
.ptx, .footer-copyright, .sidenav-link a {
  padding-top: 5px !important;
}

.prx {
  padding-right: 5px !important;
}

.pbx, .footer-copyright, .sidenav-link a {
  padding-bottom: 5px !important;
}

.plx {
  padding-left: 5px !important;
}

.pts, .image, .dropdown-list, .dropdown-list > ul > li {
  padding-top: 10px !important;
}

.prs, .pagination-item {
  padding-right: 10px !important;
}

.pbs, .image, .dropdown-list, .dropdown-list > ul > li {
  padding-bottom: 10px !important;
}

.pls, .pagination-item {
  padding-left: 10px !important;
}

.ptm {
  padding-top: 20px !important;
}

.prm, .image {
  padding-right: 20px !important;
}

.pbm {
  padding-bottom: 20px !important;
}

.plm, .image {
  padding-left: 20px !important;
}

.ptl {
  padding-top: 40px !important;
}

.prl {
  padding-right: 40px !important;
}

.pbl {
  padding-bottom: 40px !important;
}

.pll, .dropdown-list > ul > li {
  padding-left: 40px !important;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *	1. Global
 *	   - 1.1. Weight
 *	   - 1.2. Size
 *     - 1.3. Color
 *     - 1.4. Transform
 *     - 1.5. Align
 *     - 1.6. Whitespace
 *	2. Headings
 */
/* ==========================================================================
   1. Global
   ========================================================================== */
/* 1.1. Weight
   ========================================================================== */
.font-regular, h3, .h3 {
  font-weight: 400;
}

.font-bold, h1, .h1, h2, .h2, .button, .form-button, .p-search button, .link, .pagination-item, .badge, .footer-link.-header, .footer-header, .banner-title, .banner-subtitle, .form-label, .form-group > legend, .menu-toggle > span, .pricing-item-name, .pricing-item-label, .pricing-item-price, .tabs-link, .promo, .breadcrumb-item.-current, .sidenav-open,
.sidenav-close, .sidenav-profile .dropdown-link, .sidenav-link a, .p-package .p-package-subtitle, .p-package .p-package-title, .p-products .p-products-item .p-products-item-title, .p-products .p-products-item .p-products-item-price, .p-products .p-products-item .p-products-item-subtitle, .p-wizard-step, .hosting-packages tr.lead, .hosting-packages .hosting-link, .table-summary th {
  font-weight: 700;
}

/* 1.2. Size
   ========================================================================== */
.font-tiny, .badge, .footer-copyright, .form-error, .error-message, .tooltip-custom .tooltipster-box .tooltipster-content, .pricing-item-label, .breadcrumb, .sidenav-open span,
.sidenav-close span {
  font-size: 13px;
}

.font-small, .footer-article, .footer-article-date, .menu-link > a, .pricing-item-params, .tabs-link, .sidenav-profile .dropdown-link {
  font-size: 14px;
}

.font-normal, .footer-article-title, .pricing-item-price.-alt {
  font-size: 15px;
}

.font-large, h2, .h2, h3, .h3, .form-label-tooltip, .form-file .material-icons, .form-file .menu-toggle:before, .form-checkbox > label > .tooltip, .form-radio > label > .tooltip, .form-select .material-icons, .form-select .menu-toggle:before, .form-group > legend, .pricing-item-price, .promo, .sidenav-open i,
.sidenav-close i, .toast-icon, .dropdown-list > span, .p-products .p-products-item .p-products-item-title, .p-feature-icon > .material-icons, .p-feature-icon > .menu-toggle:before, .hosting-packages tr.lead.hosting-promo td {
  font-size: 18px;
}

.font-huge, h1, .h1, .banner-subtitle, .pricing-item-name, .promo b, .promo strong, .p-package .p-package-title, .p-package .p-package-price {
  font-size: 24px;
}

.font-giant, .banner-title, .banner-subtitle strong, .p-products .p-products-item .p-products-item-price, .p-wizard-step .material-icons, .p-wizard-step .menu-toggle:before, .p-wizard-next {
  font-size: 32px;
}

/* 1.3. Color
   ========================================================================== */
.font-light, .footer-article, .footer-article:hover, .pricing-item-label, .breadcrumb-item:before, .p-package .p-package-subtitle, .p-products .p-products-item .p-products-item-title {
  color: #c3c8cb;
}

.font-neutral, .footer-article-date, .form-group > legend, .sidenav-profile .dropdown-link, .sidenav-link a, .p-package .p-package-text, .p-products .p-products-item .p-products-item-text {
  color: #848e93;
}

.font-dark, .pagination-item.-current, .toast-close {
  color: #39474e;
}

.font-blue {
  color: #2196f3;
}

.font-orange {
  color: #ff5722;
}

.font-green, .dropdown-list:before, .dropdown-list > span {
  color: #43a047;
}

.font-white {
  color: white;
}

.font-primary, .banner-subtitle strong, .pricing-item-name, .pricing-item-price.-alt, .promo.-light .promo-accent, .sidenav-link.-current a, .p-products .p-products-item .p-products-item-price {
  color: #43a047;
}

.font-second, .sidenav-link a:hover {
  color: #ff5722;
}

/* 1.4. Transform
   ========================================================================== */
.text-upper, h1, .h1, .button, .form-button, .p-search button, .link, .pagination-item, .footer-link.-header, .footer-header, .banner-title, .banner-subtitle, .form-group > legend, .menu-toggle > span, .pricing-item-label, .promo .promo-content, .sidenav-open span,
.sidenav-close span, .sidenav-profile .dropdown-link, .sidenav-link a, .p-package .p-package-subtitle, .p-package .p-package-title, .p-package .p-package-price, .p-products .p-products-item .p-products-item-title, .p-products .p-products-item .p-products-item-price, .p-products .p-products-item .p-products-item-subtitle, .p-wizard-step {
  text-transform: uppercase;
}

.text-lower {
  text-transform: lowercase;
}

/* 1.5. Align
   ========================================================================== */
.text-left, .dropdown-list {
  text-align: left;
}

.text-center, h1, .h1, .button, .form-button, .p-search button, .link, .pagination-item, .form-group > legend, .menu-toggle:before, .promo .promo-content, .p-wizard-guide, .p-wizard-step, .p-feature-icon > .material-icons, .p-feature-icon > .menu-toggle:before, .hosting-packages td:not(:first-child) {
  text-align: center;
}

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

.text-right, .footer-article-date {
  text-align: right;
}

.text-top {
  vertical-align: top;
}

.text-middle, .button, .form-button, .p-search button, .link, .pagination-item, .menu-toggle:before, .menu-toggle > span {
  vertical-align: middle;
}

.text-bottom {
  vertical-align: bottom;
}

/* 1.6. Whitespace
   ========================================================================== */
.text-nowrap, .p-wizard-guide {
  white-space: nowrap;
}

/* ==========================================================================
   2. Headings
   ========================================================================== */
h1, .h1 {
  /* Border bottom */
}

h1:after, .h1:after {
  margin: 0 auto;
  content: " ";
  display: block;
  overflow: hidden;
  margin-top: 10px;
  background: rgba(57, 71, 78, 0.1);
  max-width: 360px;
  height: 2px;
}

.font-white h1:after, h1.font-white:after {
  background: rgba(255, 255, 255, 0.1);
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.hide {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.fluid {
  width: 100% !important;
  max-width: 100% !important;
}

@media all and (max-width: 480px) {
  .xs-hide {
    display: none !important;
  }
  .xs-invisible {
    visibility: hidden !important;
  }
  .xs-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media all and (min-width: 480px) and (max-width: 719px) {
  .sm-hide {
    display: none !important;
  }
  .sm-invisible {
    visibility: hidden !important;
  }
  .sm-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media all and (min-width: 720px) and (max-width: 959px) {
  .md-hide {
    display: none !important;
  }
  .md-invisible {
    visibility: hidden !important;
  }
  .md-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media all and (min-width: 960px) {
  .lg-hide {
    display: none !important;
  }
  .lg-invisible {
    visibility: hidden !important;
  }
  .lg-fluid {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.rounded, .p-search input, .p-feature-icon > .material-icons, .p-feature-icon > .menu-toggle:before {
  border-radius: 999px !important;
}

.ellipsis {
  border-radius: 100% !important;
}

.bg-gray, .hosting-packages tr:nth-child(even):not(.lead):not(.hosting-order) {
  background-color: #f3f3f3;
}

.bg-white {
  background-color: white;
}

/**
 * Version: 1.1.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Changelog:
 *
 * 1.1.0 - add scroll x/y element
 */
.to-left {
  float: left !important;
}

.to-right, .sidenav-profile {
  float: right !important;
}

.scroll.-x {
  overflow-x: auto;
}

.scroll.-y {
  overflow-y: auto;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.loader-area {
  position: relative;
}

.loader-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(../img/icons/ajax-loader.gif);
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 105;
}

.loader-cover.-white {
  background-color: rgba(255, 255, 255, 0.8);
}

.loader-cover.-gray {
  background-color: rgba(243, 243, 243, 0.8);
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */
.cf:before, .cf:after, .clearfix:before, .grid:before, .grid > .break:before, .tabs-links:before, .tabs-content:before, .clearfix:after, .grid:after, .grid > .break:after, .tabs-links:after, .tabs-content:after {
  content: " ";
  display: table;
}

.cf:after, .clearfix:after, .grid:after, .grid > .break:after, .tabs-links:after, .tabs-content:after {
  clear: both;
}

/**
 * Version: 1.1.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Changelog:
 *
 * 1.1.0 - add "-loading" modifier
 *
 * Usage:
 *
 * <tag class="button -<param>"> where:
 * - <param> - small/normal/large
 *
 * Examples:
 *
 * <div class="button"> Button </div>
 * <a class="button -large"> Large Button </a>
 */
.button, .form-button, .p-search button {
  display: inline-block;
  border: 2px solid #43a047;
  border-radius: 40px;
  transition: color 0.4s, border 0.4s;
  color: #43a047;
  padding: 0 30px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.button:hover, .form-button:hover, .p-search button:hover {
  color: #ff5722;
  border-color: #ff5722;
}

.button.-small, .-small.form-button, .p-search button.-small {
  font-size: 12px;
  height: 32px;
  line-height: 28px;
}

.button.-normal, .button, .form-button, .p-search button {
  font-size: 14px;
  height: 40px;
  line-height: 36px;
}

.button.-large, .-large.form-button, .p-search button.-large {
  font-size: 17px;
  height: 42px;
  line-height: 38px;
}

.button.-loading, .-loading.form-button, .p-search button.-loading {
  background: url(../img/icons/ajax-loader.gif) center center no-repeat;
  border-color: #848e93;
  color: transparent;
}
button.disabled {
  color: #848E93;
  border-color: #848E93;
}

/**
 * Version: 1.1.1
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Version:
 *
 * 1.1.0 - add disabled modifier
 * 1.1.1 - trim longer text to one line
 *
 * Usage:
 *
 * <tag class="link -<param>"> where:
 * - <param> - small/normal/large
 *
 * Examples:
 *
 * <div class="link"> Link </div>
 * <a class="link -large"> Large Link </a>
 */
.link, .pagination-item {
  display: inline-block;
  transition: color 0.4s, border 0.4s;
  color: #43a047;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
}

.link:hover, .pagination-item:hover {
  color: #ff5722;
}

.link.-small, .-small.pagination-item {
  font-size: 12px;
  height: 32px;
  line-height: 32px;
}

.link.-normal, .p-search button.pagination-item, .p-search button.link, .link, .pagination-item {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}

.link.-large, .-large.pagination-item {
  font-size: 17px;
  height: 42px;
  line-height: 42px;
}

.link.-disabled, .-disabled.pagination-item {
  color: #39474e;
  opacity: 0.4;
  cursor: default;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.container {
  width: 100%;
  max-width: 1080px;
  padding: 0 20px;
  margin: 0 auto;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * http://google.github.io/material-design-icons/#icon-font-for-the-web
 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
}

.material-icons, .menu-toggle:before {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  /* Custom */
  vertical-align: middle;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
/*code,
.code {
	@extend .mts, .mbs;
	@extend .font-tiny;
	padding: $space-sm $space-md;
	background: rgba($gray-light, 0.2);
	box-shadow: 0 1px 2px rgba(black, 0.2);
	white-space: pre;
}*/
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.badge {
  background: #ff5722;
  border-radius: 2px;
  padding: 1px 3px;
  color: white;
}

.badge.badge-gray {
    background: #848e93;
}

/*
Border ribbon
Element nadrzędny musi mieć ustawioną klasę .ribbon-box
*/
.ribbon-box {
  position: relative;
}

.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}

.ribbon:before, .ribbon:after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 7px 0;
  background-color: #2196f3;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  font: 700 12px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
}

.ribbon-top-left {
  top: -10px;
  left: -10px;
}

.ribbon-top-left:before, .ribbon-top-left:after {
  border-top-color: transparent;
  border-left-color: transparent;
}

.ribbon-top-left:before {
  top: 0;
  right: 45px;
}

.ribbon-top-left:after {
  bottom: 45px;
  left: 0;
}

.ribbon-top-left span {
  right: -2px;
  top: 34px;
  transform: rotate(-45deg);
}

/* ==========================================================================
  Birthday slider on main page
   ========================================================================== */
.slider-desktop img, .slider-mobile img {
  width: 100%;
  max-height: 100%;
}

.slider-desktop {
  display: none !important;
}

@media (min-width: 768px) {
  .slider-mobile {
    display: none !important;
  }
  .slider-desktop {
    display: block !important;
  }
}


/* ==========================================================================
   3. Collections
   ========================================================================== */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *	1. Row & Columns
 *     - 1.1. Widths
 *	2. Modifiers
 *     - 2.1. -no-gutter
 *
 * Examples:
 *
 * <div class="grid">
 *     <div class="xs-4"> width = 4/12 = 1/3 </div>
 *     <div class="xs-2"> width = 2/12 = 1/6 </div>
 *     <div class="xs-6"> width = 6/12 = 1/2 </div>
 * </div>
 *
 * <div class="grid -no-gutter">
 *     <div class="xs-12 sm-6"> width 1/1 or 1/2 </div>
 *     <div class="xs-12 sm-6"> width 1/1 or 1/2 </div>
 *     <div class="break xs-hide"></div>
 *     <div class="xs-12"> full width </div>
 * </div>
 */
/* ==========================================================================
   1. Row & Columns
   ========================================================================== */
.grid {
  display: block;
  margin: 0 -20px;
}

.grid > :not(.break) {
  float: left;
  display: block;
  min-height: 1px;
  padding: 0 20px;
}

/* 1.1. Widths
   This section produce classes (order is important because it's mobile first
   implementation - xs is applied to all sizes, sm to all expect xs etc.):
   xs-1, xs-2, ..., xs-n (where n is the $grid-columns),
   sm-1, sm-2, ..., sm-n,
   md-1, md-2, ..., md-n,
   lg-1, lg-2, ..., lg-n
   ========================================================================== */
.grid > .xs-1 {
  width: 8.33333%;
}

.grid > .xs-2 {
  width: 16.66667%;
}

.grid > .xs-3 {
  width: 25%;
}

.grid > .xs-4 {
  width: 33.33333%;
}

.grid > .xs-5 {
  width: 41.66667%;
}

.grid > .xs-6 {
  width: 50%;
}

.grid > .xs-7 {
  width: 58.33333%;
}

.grid > .xs-8 {
  width: 66.66667%;
}

.grid > .xs-9 {
  width: 75%;
}

.grid > .xs-10 {
  width: 83.33333%;
}

.grid > .xs-11 {
  width: 91.66667%;
}

.grid > .xs-12 {
  width: 100%;
}

@media all and (min-width: 480px) {
  .grid > .sm-1 {
    width: 8.33333%;
  }
  .grid > .sm-2 {
    width: 16.66667%;
  }
  .grid > .sm-3 {
    width: 25%;
  }
  .grid > .sm-4 {
    width: 33.33333%;
  }
  .grid > .sm-5 {
    width: 41.66667%;
  }
  .grid > .sm-6 {
    width: 50%;
  }
  .grid > .sm-7 {
    width: 58.33333%;
  }
  .grid > .sm-8 {
    width: 66.66667%;
  }
  .grid > .sm-9 {
    width: 75%;
  }
  .grid > .sm-10 {
    width: 83.33333%;
  }
  .grid > .sm-11 {
    width: 91.66667%;
  }
  .grid > .sm-12 {
    width: 100%;
  }
}

@media all and (min-width: 720px) {
  .grid > .md-1 {
    width: 8.33333%;
  }
  .grid > .md-2 {
    width: 16.66667%;
  }
  .grid > .md-3 {
    width: 25%;
  }
  .grid > .md-4 {
    width: 33.33333%;
  }
  .grid > .md-5 {
    width: 41.66667%;
  }
  .grid > .md-6 {
    width: 50%;
  }
  .grid > .md-7 {
    width: 58.33333%;
  }
  .grid > .md-8 {
    width: 66.66667%;
  }
  .grid > .md-9 {
    width: 75%;
  }
  .grid > .md-10 {
    width: 83.33333%;
  }
  .grid > .md-11 {
    width: 91.66667%;
  }
  .grid > .md-12 {
    width: 100%;
  }
}

@media all and (min-width: 960px) {
  .grid > .lg-1 {
    width: 8.33333%;
  }
  .grid > .lg-2 {
    width: 16.66667%;
  }
  .grid > .lg-3 {
    width: 25%;
  }
  .grid > .lg-4 {
    width: 33.33333%;
  }
  .grid > .lg-5 {
    width: 41.66667%;
  }
  .grid > .lg-6 {
    width: 50%;
  }
  .grid > .lg-7 {
    width: 58.33333%;
  }
  .grid > .lg-8 {
    width: 66.66667%;
  }
  .grid > .lg-9 {
    width: 75%;
  }
  .grid > .lg-10 {
    width: 83.33333%;
  }
  .grid > .lg-11 {
    width: 91.66667%;
  }
  .grid > .lg-12 {
    width: 100%;
  }
}

/* 1.2. Offsets
   ========================================================================== */
.grid > .xs-offset-1 {
  margin-left: 8.33333%;
}

.grid > .xs-offset-2 {
  margin-left: 16.66667%;
}

.grid > .xs-offset-3 {
  margin-left: 25%;
}

.grid > .xs-offset-4 {
  margin-left: 33.33333%;
}

.grid > .xs-offset-5 {
  margin-left: 41.66667%;
}

.grid > .xs-offset-6 {
  margin-left: 50%;
}

.grid > .xs-offset-7 {
  margin-left: 58.33333%;
}

.grid > .xs-offset-8 {
  margin-left: 66.66667%;
}

.grid > .xs-offset-9 {
  margin-left: 75%;
}

.grid > .xs-offset-10 {
  margin-left: 83.33333%;
}

.grid > .xs-offset-11 {
  margin-left: 91.66667%;
}

.grid > .xs-offset-12 {
  margin-left: 100%;
}

@media all and (min-width: 480px) {
  .grid > .sm-offset-1 {
    margin-left: 8.33333%;
  }
  .grid > .sm-offset-2 {
    margin-left: 16.66667%;
  }
  .grid > .sm-offset-3 {
    margin-left: 25%;
  }
  .grid > .sm-offset-4 {
    margin-left: 33.33333%;
  }
  .grid > .sm-offset-5 {
    margin-left: 41.66667%;
  }
  .grid > .sm-offset-6 {
    margin-left: 50%;
  }
  .grid > .sm-offset-7 {
    margin-left: 58.33333%;
  }
  .grid > .sm-offset-8 {
    margin-left: 66.66667%;
  }
  .grid > .sm-offset-9 {
    margin-left: 75%;
  }
  .grid > .sm-offset-10 {
    margin-left: 83.33333%;
  }
  .grid > .sm-offset-11 {
    margin-left: 91.66667%;
  }
  .grid > .sm-offset-12 {
    margin-left: 100%;
  }
}

@media all and (min-width: 720px) {
   .grid > .md-offset-0 {
    margin-left: 0;
  }
  .grid > .md-offset-1 {
    margin-left: 8.33333%;
  }
  .grid > .md-offset-2 {
    margin-left: 16.66667%;
  }
  .grid > .md-offset-3 {
    margin-left: 25%;
  }
  .grid > .md-offset-4 {
    margin-left: 33.33333%;
  }
  .grid > .md-offset-5 {
    margin-left: 41.66667%;
  }
  .grid > .md-offset-6 {
    margin-left: 50%;
  }
  .grid > .md-offset-7 {
    margin-left: 58.33333%;
  }
  .grid > .md-offset-8 {
    margin-left: 66.66667%;
  }
  .grid > .md-offset-9 {
    margin-left: 75%;
  }
  .grid > .md-offset-10 {
    margin-left: 83.33333%;
  }
  .grid > .md-offset-11 {
    margin-left: 91.66667%;
  }
  .grid > .md-offset-12 {
    margin-left: 100%;
  }
}

@media all and (min-width: 960px) {
  .grid > .lg-offset-0 {
    margin-left: 0;
  }
  .grid > .lg-offset-1 {
    margin-left: 8.33333%;
  }
  .grid > .lg-offset-2 {
    margin-left: 16.66667%;
  }
  .grid > .lg-offset-3 {
    margin-left: 25%;
  }
  .grid > .lg-offset-4 {
    margin-left: 33.33333%;
  }
  .grid > .lg-offset-5 {
    margin-left: 41.66667%;
  }
  .grid > .lg-offset-6 {
    margin-left: 50%;
  }
  .grid > .lg-offset-7 {
    margin-left: 58.33333%;
  }
  .grid > .lg-offset-8 {
    margin-left: 66.66667%;
  }
  .grid > .lg-offset-9 {
    margin-left: 75%;
  }
  .grid > .lg-offset-10 {
    margin-left: 83.33333%;
  }
  .grid > .lg-offset-11 {
    margin-left: 91.66667%;
  }
  .grid > .lg-offset-12 {
    margin-left: 100%;
  }
}

/* ==========================================================================
   2. Modifiers
   ========================================================================== */
/* 2.1. -no-gutter
   ========================================================================== */
.grid.-no-gutter {
  margin: 0;
}

.grid.-no-gutter > :not(.break) {
  padding: 0;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.topnav {
  z-index: 99;
  background: white;
}

@media all and (max-width: 849px) {
  .topnav .topnav-desktop {
    display: none !important;
  }
  .topnav .topnav-mobile {
    /**
 * Version: 1.1.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Changelog:
 *
 * 1.1.0 - add "-blink" modifier
 */
    /**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
    /**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
  }
  .topnav .topnav-mobile .topnav-cart {
    position: relative;
  }
  .topnav .topnav-mobile .topnav-cart.-blink {
    transition: none;
    transform: scale(1.1);
    background: #ff5722;
  }
  .topnav .topnav-mobile .topnav-cart-badge {
    display: block;
    border-radius: 100%;
    font-weight: 700;
    font-size: 9px;
    background: #ff5722;
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 13px;
    height: 13px;
    line-height: 13px;
    transition: transform 2.0s;
    text-align: center;
    padding: 0 3px;
    color: white;
  }
  .topnav .topnav-mobile .topnav-cart-badge.-blink {
    transition: none;
    transform: scale(1.8);
  }
  .topnav .topnav-mobile .topnav-bar {
    height: 50px;
    line-height: 50px;
  }
  .topnav .topnav-mobile .topnav-bar .topnav-brand {
    float: left;
    font-size: 0rem;
    line-height: 50px;
    max-height: 50px;
  }
  .topnav .topnav-mobile .topnav-bar .topnav-brand img {
    font-size: 0rem;
    vertical-align: middle;
  }
  .topnav .topnav-mobile .topnav-bar .topnav-group {
    float: right;
    display: inline-block;
    height: 50px;
    margin-right: -20px;
  }
  .topnav .topnav-mobile .topnav-bar .topnav-group > li {
    display: inline-block;
  }
  .topnav .topnav-mobile .topnav-bar .topnav-link {
    float: left;
    width: 50px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    color: #39474e;
  }
  .topnav .topnav-mobile .topnav-menu {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background: #39474e;
    overflow-y: auto;
    padding-bottom: 10px;
    z-index: 101;
  }
  .topnav .topnav-mobile .topnav-menu .topnav-second {
    margin-top: 10px;
    text-align: right;
  }
}

@media all and (max-width: 849px) and (min-width: 480px) {
  .topnav .topnav-mobile .topnav-menu .topnav-second > li {
    display: inline-block;
  }
}

@media all and (max-width: 849px) {
  .topnav .topnav-mobile .topnav-menu .topnav-second .topnav-link {
    color: #c3c8cb;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 4px 20px;
    display: block;
  }
  .topnav .topnav-mobile .topnav-menu .topnav-second .topnav-link.active {
    background: rgba(255, 255, 255, 0.1);
  }
  .topnav .topnav-mobile .topnav-menu .topnav-primary {
    float: left;
    display: block;
    min-height: 1px;
    padding: 0 0;
    width: 100%;
  }
}

@media all and (max-width: 849px) and (min-width: 480px) {
  .topnav .topnav-mobile .topnav-menu .topnav-primary {
    width: 50%;
  }
}

@media all and (max-width: 849px) {
  .topnav .topnav-mobile .topnav-menu .topnav-primary .topnav-link {
    color: white;
    display: block;
    padding: 6px 20px;
    margin-left: 20px;
  }
  .topnav .topnav-mobile .topnav-menu .topnav-primary .topnav-link.active {
    background: rgba(255, 255, 255, 0.1);
  }
  .topnav .topnav-mobile .topnav-menu .topnav-primary .topnav-link.-header {
    margin-top: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 0;
  }
}

@media all and (min-width: 850px) {
  .topnav .topnav-mobile {
    display: none !important;
  }
  .topnav .topnav-desktop {
    /**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
    /**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Changelog:
 *
 * 1.1.0 - add "-blink" modifier
 */
    /*.topnav-cart:hover .topnav-cart-menu {
	display: block;
}

.topnav-cart-menu {
	color: $gray-dark;
	text-align: left;
	font-size: $font-size-tiny;

	// from .dropdown-menu
	display: none;
	cursor: default;
	position: absolute;
	background: white;
	box-shadow: 0 1px 2px rgba(black, 0.4);
	max-height: $dropdown-max-height;
	min-width: $dropdown-min-width;
	margin-top: $dropdown-offset;
	overflow-y: auto;
	max-width: $dropdown-max-width;
	z-index: 105;

	// from .dropdown-menu.right
	right: 0;

	> div {
		padding: $space-xs $space-sm;
		line-height: $font-height;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}*/
    /**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
    /**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
  }
  .topnav .topnav-desktop .topnav-second {
    height: 30px;
    transition: margin 0.6s;
  }
  .topnav .topnav-desktop .topnav-second .to-right, .topnav .topnav-desktop .topnav-second .sidenav-profile {
    height: 30px;
  }
  .topnav .topnav-desktop .topnav-second .topnav-group {
    vertical-align: top;
    display: inline-block;
  }
  .topnav .topnav-desktop .topnav-second .topnav-group > li {
    display: inline-block;
  }
  .topnav .topnav-desktop .topnav-second .topnav-link {
    color: #c3c8cb;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 30px;
  }
  .topnav .topnav-desktop .topnav-second .topnav-link:hover {
    color: #848e93;
  }
  .topnav .topnav-desktop .topnav-second .topnav-link.active {
    color: #43a047;
  }
  .topnav .topnav-desktop .topnav-second .topnav-link .material-icons, .topnav .topnav-desktop .topnav-second .topnav-link .menu-toggle:before {
    font-size: 18px;
  }
  .topnav .topnav-desktop .topnav-cart {
    text-align: center;
    position: relative;
    display: inline-block;
    line-height: 30px;
    width: 30px;
    height: 30px;
    transition: padding 0.3s, height 0.3s, margin 0.6s;
    background: #5bbb60;
    position: relative;
    color: white;
    z-index: 10;
  }
  .topnav .topnav-desktop .topnav-cart:hover {
    color: white;
    padding-top: 5px;
    height: 35px;
  }
  .topnav .topnav-desktop .topnav-cart-badge {
    border-radius: 100%;
    font-weight: 700;
    font-size: 9px;
    position: absolute;
    background: #ff5722;
    right: 2px;
    min-width: 13px;
    height: 13px;
    line-height: 13px;
    transition: transform 2.0s;
    text-align: center;
    padding: 0 3px;
    bottom: 15px;
  }
  .topnav .topnav-desktop .topnav-cart-badge.-blink {
    transition: none;
    transform: scale(1.8);
  }
  .topnav .topnav-desktop .topnav-primary {
    height: 70px;
    position: relative;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-brand {
    float: left;
    font-size: 0rem;
    line-height: 70px;
    max-height: 70px;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-brand img {
    font-size: 0rem;
    vertical-align: middle;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-group {
    float: right;
    vertical-align: top;
    display: inline-block;
    margin-right: 30px;
    line-height: 70px;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-group > li {
    display: inline-block;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-link {
    font-weight: 700;
    color: #848e93;
    text-transform: uppercase;
    display: block;
    padding: 10px;
    line-height: normal;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-link:hover {
    color: #39474e;
  }
  .topnav .topnav-desktop .topnav-primary .topnav-link.active {
    color: #43a047;
  }
  .topnav .topnav-desktop .topnav-menu {
    display: none;
    line-height: normal;
    position: absolute;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    margin-top: 0px;
    overflow: hidden;
  }
}

@media all and (min-width: 850px) and (max-width: 959px) {
  .topnav .topnav-desktop .topnav-menu {
    min-height: auto !important;
  }
}

@media all and (min-width: 850px) {
  .topnav .topnav-desktop .topnav-menu-left {
    float: left;
    display: block;
    min-height: 1px;
    padding: 0 40px;
    width: 33.33333%;
    margin: 10px 0;
  }
}

@media all and (min-width: 850px) and (max-width: 719px) {
  .topnav .topnav-desktop .topnav-menu-left {
    width: 100%;
  }
}

@media all and (min-width: 850px) {
  .topnav .topnav-desktop .topnav-menu-left a {
    display: block;
    color: #39474e;
    padding: 10px 0;
  }
  .topnav .topnav-desktop .topnav-menu-left a:hover {
    color: #ff5722;
  }
  .topnav .topnav-desktop .topnav-menu-left a.active {
    font-weight: 700;
  }
  .topnav .topnav-desktop .topnav-menu-right {
    float: left;
    display: block;
    min-height: 1px;
    padding: 0 40px;
    width: 66.66667%;
    margin: 20px 0;
    border-left: 1px solid rgba(57, 71, 78, 0.1);
  }
}

@media all and (min-width: 850px) and (max-width: 719px) {
  .topnav .topnav-desktop .topnav-menu-right {
    display: none;
  }
}

@media all and (min-width: 850px) and (max-width: 959px) {
  .topnav .topnav-desktop .topnav-menu-right .topnav-menu-promo {
    margin-right: 0 !important;
  }
}

@media all and (min-width: 850px) {
  .topnav .topnav-desktop .topnav-menu-right .topnav-menu-promo header {
    font-weight: 700;
    text-transform: uppercase;
  }
  .topnav .topnav-desktop .topnav-menu-right .topnav-menu-image {
    position: absolute;
    right: 0;
  }
}

@media all and (min-width: 850px) and (max-width: 959px) {
  .topnav .topnav-desktop .topnav-menu-right .topnav-menu-image {
    display: none;
  }
}

@media all and (min-width: 850px) {
  .topnav .topnav-desktop .topnav-menu-right .topnav-menu-image.-top {
    top: 0;
  }
  .topnav .topnav-desktop .topnav-menu-right .topnav-menu-image.-bottom {
    bottom: 0;
  }
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Implement fixed position for desktop's navigation view and appropriate height.
 * Contain "-small" modifier for hiding part of the navigation.
 */
@media all and (min-height: 550px) and (min-width: 850px) {
  .topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .topnav-offset {
    padding-top: 100px;
  }
  .topnav.-small .topnav-second {
    margin-top: -30px;
  }
  .topnav.-small .topnav-cart {
    margin-top: 30px;
  }
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 * 1. Sticky footer
 * 2. Style
 *    - 2.1. Links
 *    - 2.2. News
 *    - 2.3. Copyright
 */
/* ==========================================================================
   1. Sticky footer
   http://ryanfait.com/sticky-footer/
   ========================================================================== */
@media all and (min-width: 720px) {
  html, body {
    height: 100%;
  }
  .footer-wrapper {
    min-height: 100%;
    margin-bottom: -350px;
  }
  .footer-wrapper:after {
    content: " ";
    display: block;
    height: 350px;
  }
}

/* ==========================================================================
   2. Style
   ========================================================================== */
.footer {
  position: relative;
  background: #39474e url(../img/market/world.png) center center no-repeat;
}

/* 2.1. Links
   ========================================================================== */
.footer-link {
  color: white;
  display: block;
  opacity: 0.9;
  padding: 3px 0;
}

/* 2.2. News
   ========================================================================== */
.footer-header {
  color: white;
  opacity: 0.9;
}

.footer-article {
  display: block;
}

.footer-article:hover .footer-article-title {
  color: #ff5722;
}

.footer-article-title {
  opacity: 0.9;
  transition: color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: white;
}

.footer-article-date {
  display: block;
}

.footer-article-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 2.3. Copyright
   ========================================================================== */
.footer-copyright-relative {
  position: relative;
}

@media all and (min-width: 720px) {
  .footer-copyright-relative {
    min-height: 350px;
  }
}

.footer-copyright {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0.4;
  color: white;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.image {
  position: relative;
  display: inline-block;
  height: 50px;
}

.image img {
  height: 100%;
  display: block;
  margin: 0 auto;
}

.image-front {
  max-width: 100%;
  backface-visibility: hidden;
  transition: all 0.5s ease-in-out;
  filter: grayscale(0.9);
  opacity: 0.4;
}

.image-back {
  max-width: 100%;
  filter: grayscale(0);
  opacity: 1;
  transform: rotateY(360deg);
  backface-visibility: hidden;
}

.slick-arrow {
  display: none !important;
}

/**
 * Version: 1.1.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Versions:
 *
 * 1.1.0 - new background (lake, girl), background fade color on mobile devices
 *
 * Summary:
 *
 *  1. Dots layer
 *  2. Backgrounds
 */
.banner {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media all and (min-width: 960px) {
  .banner {
    min-height: 400px;
  }
}

.banner-content {
  padding: 100px 0;
  position: relative;
  z-index: 10;
}

@media all and (min-width: 960px) {
  .banner-content {
    width: 100%;
    max-width: 520px;
    float: right;
  }
}

/* ==========================================================================
   1. Dots layer
   ========================================================================== */
.banner.-dark:after,
.banner.-light:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat;
}

.banner.-dark:after {
  background-image: url(../img/icons/dot-dark.png);
}

.banner.-light:after {
  background-image: url(../img/icons/dot-light.png);
}

@media all and (max-width: 959px) {
  .banner.-dark:after {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .banner.-light:after {
    background-color: rgba(255, 255, 255, 0.6);
  }
}

/* ==========================================================================
   2. Backgrounds
   ========================================================================== */
.banner-bg-cafe {
  background-image: url(../img/market/banner/cafe.jpg);
}

.banner-bg-lake {
  background-image: url(../img/market/banner/lake.jpg);
}

.banner-bg-girl {
  background-image: url(../img/market/banner/girl.jpg);
}

.banner-bg-promo-pol-roku-na-boku {
  background-image: url(../img/market/banner/pol-roku-na-boku.jpg);
}

.banner-bg-promo-pl-na-2-lata {
  background-image: url(../img/market/banner/pl-na-2-lata.jpg);
}

.banner-bg-promo-kreator-www {
  background-image: url(../img/market/banner/kreator-stron-www.jpg);
}

.banner-bg-data {
  background-image: url("../img/market/banner/data.jpg");
}

.banner-bg-server-vps {
  background-image: url("../img/market/banner/server-vps.jpg");
}
.banner-title {
  text-align: left;
}

.banner-title::after {
  content: none !important;
}

/**
 * Version: 1.1.1
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Changelog:
 *
 * 1.0.1 - fix select and file input clickable area
 * 1.1.0 - add tooltip
 * 1.1.1 - fix bug with too long text in select/file input
 *
 * Summary:
 *
 *	1. Basic
 *     - 1.1. Label
 *     - 1.2. Input
 *     - 1.3. Password
 *     - 1.4. File
 *     - 1.5. Text
 *     - 1.6. Checkbox
 *     - 1.7. Radio
 *     - 1.8. Select
 *     - 1.9. Button
 *     - 1.10. Error
 *	2. Advance
 *     - 2.1. Group
 *     - 2.2. Field
 */
/* ==========================================================================
   1. Basic
   ========================================================================== */
/* 1.1. Label
   ========================================================================== */
.form-label {
  display: inline-block;
  padding: 10px 10px;
}

.form-label-tooltip {
  line-height: 1;
  float: right;
  color: #2196f3;
}

.form-label.-required:after {
  content: "*";
  color: #ff5722;
}

/* 1.2. Input
   ========================================================================== */
.form-input, .form-password, .form-file > label, .form-text, .form-select > label, .p-search input {
  color: #39474e;
  padding: 0 10px;
  height: 40px;
  border-radius: 2px;
  border: 1px solid #c3c8cb;
  transition: border-color 0.4s;
  background: white;
  max-width: 100%;
  width: 100%;
}

.form-input:focus, .form-password:focus, .form-file > label:focus, .form-text:focus, .form-select > label:focus, .p-search input:focus {
  border-color: #ff5722;
}

.form-input:disabled, .form-password:disabled, .form-file > label:disabled, .form-text:disabled, .form-select > label:disabled, .p-search input:disabled {
  opacity: 0.4;
}

/* 1.3. Password
   ========================================================================== */
/* 1.4. File
   ========================================================================== */
.form-file {
  display: block;
  overflow: hidden;
  position: relative;
}

.form-file > input {
  width: 0;
  height: 0;
  z-index: -1;
  float: left;
  opacity: 0;
}

.form-file > label {
  line-height: 38px;
  display: block;
  padding: 0;
}

.form-file > label > span {
  display: block;
  padding-left: 10px;
  margin-right: 40px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.form-file > input:focus + label {
  border-color: #ff5722;
}

.form-file > input:disabled + label {
  opacity: 0.4;
}

.form-file .material-icons, .form-file .menu-toggle:before {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  margin-top: 0;
  float: right;
}

/* 1.5. Text
   ========================================================================== */
.form-text {
  padding-top: 10px;
  padding-bottom: 10px;
  resize: vertical;
  min-height: 160px;
}

/* 1.6. Checkbox
   ========================================================================== */
.form-checkbox, .form-radio {
  display: inline-block;
  margin-left: 10px;
}

.form-checkbox > input, .form-radio > input {
  float: left;
  opacity: 0;
}

.form-checkbox > label, .form-radio > label {
  display: block;
  margin-left: 24px;
}

.form-checkbox > label:before, .form-radio > label:before {
  float: left;
  display: block;
  content: " ";
  width: 14px;
  height: 14px;
  background: url(../img/icons/form.png) 0 0 no-repeat;
  margin-left: -24px;
  margin-top: 3px;
}

.form-checkbox > label > .tooltip, .form-radio > label > .tooltip {
  line-height: 1;
  float: right;
  color: #2196f3;
}

.form-checkbox > input:checked + label:before, .form-radio > input:checked + label:before {
  background-position: 0 -14px;
}

.form-checkbox > input:focus + label:before, .form-radio > input:focus + label:before {
  background-position: 0 -28px;
}

.form-checkbox > input:focus:checked + label:before, .form-radio > input:focus:checked + label:before {
  background-position: 0 -42px;
}

.form-checkbox > input:disabled + label:before, .form-radio > input:disabled + label:before {
  opacity: 0.4;
}

/* 1.7. Radio
   ========================================================================== */
.form-radio > label:before {
  background-position: -14px 0;
}

.form-radio > input:checked + label:before {
  background-position: -14px -14px;
}

.form-radio > input:focus + label:before {
  background-position: -14px -28px;
}

.form-radio > input:focus:checked + label:before {
  background-position: -14px -42px;
}

.form-radio > input:disabled + label:before {
  opacity: 0.4;
}

/* 1.8. Select
   ========================================================================== */
.form-select {
  display: block;
  overflow: hidden;
  position: relative;
}

.form-select > select {
  position: absolute;
  width: 100%;
  height: 40px;
  opacity: 0;
  color: #39474e;
}

.form-select > label {
  line-height: 38px;
  display: block;
  padding: 0;
}

.form-select > label > span {
  display: block;
  padding-left: 10px;
  margin-right: 40px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.form-select > select:focus + label {
  border-color: #ff5722;
}

.form-select > select:disabled + label {
  opacity: 0.4;
}

.form-select .material-icons, .form-select .menu-toggle:before {
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  margin-top: 0;
  float: right;
}

/* 1.9. Button
   ========================================================================== */
.form-button, .p-search button {
  background: transparent;
}

.form-button:focus, .p-search button:focus {
  color: #ff5722;
  border-color: #ff5722;
}

.form-button.-simple, .p-search button {
  border: none;
  padding-left: 0;
  padding-right: 0;
  color: #39474e;
}

.form-button.-simple:hover, .p-search button:hover, .form-button.-simple:focus, .p-search button:focus {
  color: #ff5722;
}

/* 1.10. Error
   ========================================================================== */
.form-error, .error-message {
  display: inline-block;
  background: #ff5722;
  padding: 5px 10px;
  border-radius: 2px;
  margin-top: 6px;
  position: relative;
  color: white;
}

.form-error:before,  .error-message:before {
  width: 0;
  height: 0;
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 10px;
  margin-top: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #ff5722;
}

/* ==========================================================================
   2. Advance
   ========================================================================== */
/* 2.1. Group
   ========================================================================== */
.form-group {
  border: none;
}

.form-group > legend {
  width: 100%;
}

/* 2.2. Field
   ========================================================================== */
.form-field {
  display: block;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Bower component: http://iamceege.github.io/tooltipster/
 * (custom theme - http://iamceege.github.io/tooltipster/#styling)
 *
 * Plugin default tooltip structure:
 *
 * <div class="tooltipster-base tooltipster-sidetip tooltip-custom tooltipster-top tooltipster-fade tooltipster-show" id="tooltipster-881447"
 *      style="z-index: 9999999; left: 38px; top: 324px; height: 42px; width: 272.047px; animation-duration: 350ms; transition-duration: 350ms;">
 *
 *     <div class="tooltipster-box">
 *         <div class="tooltipster-content">This is my image's tooltip message!</div>
 *     </div>
 *
 *     <div class="tooltipster-arrow" style="left: 137px;">
 *         <div class="tooltipster-arrow-uncropped">
 *             <div class="tooltipster-arrow-border"></div>
 *             <div class="tooltipster-arrow-background"></div>
 *         </div>
 *     </div>
 * </div>
 */
.tooltip-custom .tooltipster-box {
  background: #39474e;
  border: none;
  margin: 10px;
}

.tooltip-custom .tooltipster-box .tooltipster-content {
  padding: 5px 10px;
}

.tooltip-custom.tooltipster-top .tooltipster-arrow-border {
  border-top-color: transparent;
}

.tooltip-custom.tooltipster-right .tooltipster-arrow-border {
  border-right-color: transparent;
}

.tooltip-custom.tooltipster-bottom .tooltipster-arrow-border {
  border-bottom-color: transparent;
}

.tooltip-custom.tooltipster-left .tooltipster-arrow-border {
  border-left-color: transparent;
}

.tooltip-custom.tooltipster-top .tooltipster-arrow-background {
  border-top-color: #39474e;
}

.tooltip-custom.tooltipster-right .tooltipster-arrow-background {
  border-right-color: #39474e;
}

.tooltip-custom.tooltipster-bottom .tooltipster-arrow-background {
  border-bottom-color: #39474e;
}

.tooltip-custom.tooltipster-left .tooltipster-arrow-background {
  border-left-color: #39474e;
}

/**
 * Version: 1.0.1
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Changelog:
 *
 * 1.0.1 - fix compact modifier
 */
.table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table th,
.table td {
  padding: 7.5px 20px;
  margin: 0 -20px;
}

.table.fluid:not(.-bordered) {
  width: calc(100% + 40px) !important;
}

.table thead th a {
  color: #39474e;
}

/* ==========================================================================
   1. Modifiers
   ========================================================================== */
/* 1.1. Compact
   ========================================================================== */
.table.-compact th,
.table.-compact td {
  padding: 3.75px 10px;
}

/* 1.2. Bordered
   ========================================================================== */
.table.-bordered td {
  border-top: 1px solid rgba(132, 142, 147, 0.1);
}

/* 1.3. No-gutter
   ========================================================================== */
.table.-no-gutter th,
.table.-no-gutter td,
.table th.-no-gutter,
.table td.-no-gutter {
  padding: 7.5px 0;
}

/* ==========================================================================
   2. Responsive
   ========================================================================== */
@media all and (max-width: 479px) {
  .table.xs-responsive thead {
    display: none;
  }
  .table.xs-responsive tfoot, .table.xs-responsive tr + tr {
    display: block;
    margin-top: 40px;
  }
  .table.xs-responsive th, .table.xs-responsive td {
    display: block;
    text-align: left;
  }
  .table.xs-responsive th:before, .table.xs-responsive td:before {
    color: #848e93;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    content: attr(data-col);
    display: block;
  }
}

@media all and (max-width: 719px) {
  .table.sm-responsive thead {
    display: none;
  }
  .table.sm-responsive tfoot, .table.sm-responsive tr + tr {
    display: block;
    margin-top: 40px;
  }
  .table.sm-responsive th, .table.sm-responsive td {
    display: block;
    text-align: left;
  }
  .table.sm-responsive th:before, .table.sm-responsive td:before {
    color: #848e93;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    content: attr(data-col);
    display: block;
  }
}

@media all and (max-width: 959px) {
  .table.md-responsive thead {
    display: none;
  }
  .table.md-responsive tfoot, .table.md-responsive tr + tr {
    display: block;
    margin-top: 40px;
  }
  .table.md-responsive th, .table.md-responsive td {
    display: block;
    text-align: left;
  }
  .table.md-responsive th:before, .table.md-responsive td:before {
    color: #848e93;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    content: attr(data-col);
    display: block;
  }
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.menu .menu {
  display: none;
  margin-top: 7px;
}

.menu-toggle {
  margin-left: 30px;
}

.menu-toggle:before {
  content: "\E315";
  margin-left: -30px;
  width: 30px;
  transition: transform 0.2s;
}

.menu-toggle.-collapsed:before {
  transform: rotate(90deg);
}

.menu-toggle > span {
  cursor: pointer;
}

.menu-toggle + .menu-link,
.menu-toggle + .menu-toggle {
  margin-top: 7px;
}

.menu-link > a {
  display: block;
  color: #39474e;
}

.menu-link > a:hover {
  color: #ff5722;
}

.menu-link.active > a {
  color: #43a047;
}

.menu-link + .menu-link,
.menu-link + .menu-toggle {
  margin-top: 7px;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.panel {
  display: table;
  width: 100%;
}

.panel-shrink {
  vertical-align: middle;
  white-space: nowrap;
  display: table-cell;
  width: 1px;
}

.panel-grow {
  vertical-align: middle;
  display: table-cell;
  width: 100%;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *  1. Item box
 *  2. Item fields
 */
.pricing {
  text-align: center;
}

/* ==========================================================================
   1. Item box
   ========================================================================== */
.pricing-item {
  display: inline-block;
  vertical-align: middle;
  padding: 20px;
  margin: 0 10px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  width: 220px;
  transition: all ease-in-out 0.3s;
  border-top: 4px solid transparent;
}

@media all and (max-width: 720px) {
  .pricing-item {
    display: block;
    margin: 0 auto;
  }
  .pricing-item + .pricing-item {
    margin-top: 20px;
  }
}

.pricing-item:hover {
  transform: scale(1.1);
  z-index: 90;
  border-top: 4px solid #43a047;
}

.pricing-item.-primary {
  padding: 35px;
  border-top: 4px solid #43a047;
}

/* ==========================================================================
   2. Item fields
   ========================================================================== */
.pricing-server {
  min-height: 400px;
}

@media (min-width: 720px) {
  .pricing-item {
    min-height: 400px;
  }
  .rel {
    position: relative;
  }
}

#pricing-hide-if-null:before {
  content: none;
}

/**
 * Version: 2.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Version:
 *
 * 1.0.1 - fix style if active tab is also a "<a>" tag
 */
.tabs-links {
  display: block;
  position: relative;
  white-space: nowrap;
  overflow-y: hidden;
  -webkit-overflow-scrolling-x: touch;
}

.tabs-link {
  display: inline-block;
  line-height: 40px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}

.tabs-link.-active {
  background: white;
  color: #39474e;
}

.tabs-content {
  background: white;
  padding-left: 20px;
  padding-right: 20px;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *  1. Dots layer
 *  2. Backgrounds
 */
.promo {
  max-width: 600px;
  max-height: 350px;
  position: relative;
  border-radius: 2px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  display: block;
}

.promo .promo-content {
  transition: transform 0.4s;
  padding: 5px 10px;
  position: relative;
  z-index: 10;
}

.promo:hover .promo-content {
  transform: scale(1.05);
  cursor: pointer;
}

/* ==========================================================================
   1. Dots layer
   ========================================================================== */
.promo.-dark:after,
.promo.-light:after {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat;
}

.promo.-dark:after {
  background-image: url(../img/icons/dot-dark.png);
}

.promo.-light:after {
  background-image: url(../img/icons/dot-light.png);
}

/* ==========================================================================
   2. Backgrounds
   ========================================================================== */
.promo.-dark {
  background-color: #27312c;
}

.promo.-light {
  background-color: #e9e9e7;
}

.promo.-bg-lake {
  background-image: url(../img/market/promo/lake.jpg);
}

.promo.-bg-girl {
  background-image: url(../img/market/promo/girl.jpg);
}

/* ==========================================================================
   3. Accent
   ========================================================================== */
.promo.-light {
  color: #39474e;
}

.promo.-dark {
  color: white;
}

.promo.-dark .promo-accent {
  border-top: 2px solid #43a047;
  border-bottom: 2px solid #43a047;
}

/**
 * Version: 1.0.1
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Versions:
 *
 * 1.0.1 - fix dropdown width
 */
.dropdown {
  display: inline-block;
  position: relative;
}

.dropdown-link {
  transition: color 0.4s;
}

.dropdown-link:hover {
  color: #ff5722;
  cursor: pointer;
}

.dropdown-menu {
  display: none;
  cursor: default;
  position: absolute;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  max-height: 400px;
  min-width: 120px;
  margin-top: 5px;
  overflow-y: auto;
  max-width: 300px;
  z-index: 105;
}

.dropdown-menu.-right {
  right: 0;
}

.dropdown-menu.-left {
  left: 0;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.breadcrumb-item:before {
  content: " / ";
  display: inline-block;
}

.breadcrumb-item:first-child:before {
  display: none;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.pagination {
  overflow-x: auto;
  white-space: nowrap;
}

.pagination-item {
  font-size: 15px;
}

span.pagination-item,
span.pagination-item:hover {
  cursor: default;
  color: #848e93;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.sidenav {
  margin-left: -360px;
  height: 100%;
  width: 360px;
  max-width: 100%;
  background: white;
  padding: 0 20px;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  z-index: 100;
}

@media all and (min-width: 1300px) {
  .sidenav {
    display: block !important;
    margin-left: 0px !important;
  }
}

@media all and (min-width: 1300px) {
  .sidenav-offset {
    margin-left: 360px;
  }
}

.sidenav-open,
.sidenav-close {
  cursor: pointer;
}

@media all and (min-width: 1300px) {
  .sidenav-open,
  .sidenav-close {
    display: none;
  }
}

/* ==========================================================================
   1. Top
   ========================================================================== */
.sidenav-top {
  line-height: 40px;
}

.sidenav-logo {
  display: none;
  vertical-align: middle;
  margin-top: -6px;
}

@media all and (min-width: 1300px) {
  .sidenav-logo {
    display: inline-block;
  }
}

.sidenav-close {
  display: inline-block;
}

@media all and (min-width: 1300px) {
  .sidenav-close {
    display: none;
  }
}

.sidenav-profile .dropdown-link {
  line-height: 40px;
}

.sidenav-profile .dropdown-menu {
  line-height: 1.4;
  margin-top: -5px;
}



/* ==========================================================================
   2. Middle/Bottom
   ========================================================================== */
.sidenav-link a {
  display: inline-block;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * Summary:
 *
 *  1. Basic
 *  2. Modifiers
 *     - 2.1. Warning
 *     - 2.2. Error
 *     - 2.3. Success
 *     - 2.4. Info
 *     - 2.5. No-js
 */
/* ==========================================================================
   1. Basic
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 100%;
  z-index: 120;
}

.toast-offset {
  margin: 20px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: table;
}

.toast-icon {
  display: table-cell;
  background: #43a047;
  vertical-align: middle;
  width: 40px;
  color: white;
  text-align: center;
}

.toast-content {
  display: table-cell;
  padding: 5px 20px;
  padding-right: 40px;
  border-top: 3px solid #43a047;
  max-width: 420px;
  position: relative;
}

.toast-content .link, .toast-content .pagination-item {
  height: auto;
  line-height: 1.4;
}

.toast-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  cursor: pointer;
}

/* ==========================================================================
   2. Modifiers
   ========================================================================== */
/* 2.1. Warning
   ========================================================================== */
.toast.-warning .toast-icon {
  background: #ff5722;
}

.toast.-warning .toast-content {
  border-top-color: #ff5722;
}

/* 2.2. Error
   ========================================================================== */
.toast.-error .toast-icon {
  background: #ff5722;
}

.toast.-error .toast-content {
  border-top-color: #ff5722;
}

/* 2.3. Success
   ========================================================================== */
.toast.-success .toast-icon {
  background: #43a047;
}

.toast.-success .toast-content {
  border-top-color: #43a047;
}

/* 2.4. Info
   ========================================================================== */
.toast.-info .toast-icon {
  background: #2196f3;
}

.toast.-info .toast-content {
  border-top-color: #2196f3;
}

/* 2.5. No-js
   ========================================================================== */
.toast.-no-js {
  display: none;
}

.toast.-no-js .toast-close {
  display: none;
}

.no-js .toast.-no-js {
  display: block !important;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.modal-outer {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.modal-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: inherit;
  height: inherit;
  padding: 20px 10px;
}

.modal-box {
  position: relative;
  display: inline-block;
  text-align: left;
  border-radius: 2px;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  overflow-y: auto;
  max-height: 100%;
}

.modal-box.-fit {
  width: 100%;
  height: 100%;
}

.modal-box-close {
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  transition: color 0.3s;
  border-radius: 100%;
}

.modal-box-close:hover {
  color: #ff5722;
}

.modal-box-close i {
  vertical-align: baseline;
}

.dropdown-list {
  display: block;
  margin-left: 0;
}

.dropdown-list > ul > li {
  width: 100%;
  margin: 0 auto;
}

.dropdown-list > ul > li:nth-child(even) {
  background-color: #c3c8cb42;
}

.dropdown-list .menu-link:not(:last-child) {
  margin-bottom: 7px;
}

/* ==========================================================================
   4. Pages
   ========================================================================== */
/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * "W komplecie taniej"
 */
.p-package {
  max-width: 400px;
}

@media all and (min-width: 720px) {
  .p-package {
    margin: 0 auto;
    text-align: center;
  }
}

.p-package .p-package-price {
  display: block;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 *
 * "Poznaj naszą ofertę"
 */
@media all and (min-width: 720px) {
  .p-products {
    margin: 0 auto;
    text-align: center;
  }
}

.p-products .p-products-item {
  max-width: 360px;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.p-wizard {
  background-color: #235736;
  background-image: url(../img/icons/dot-dark.png), url(../img/market/banner/forest.jpg);
  background-repeat: repeat, no-repeat;
  background-position: center center;
  background-size: 2px, cover;
  color: white;
}

.p-wizard h1:after {
  background-color: rgba(255, 255, 255, 0.1);
}

.p-wizard-sample {
  font-size: 0rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  max-width: 100%;
}

@media all and (min-width: 960px) {
  .p-wizard-guide {
    line-height: 200px;
  }
}

.p-wizard-step {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

/**
 * Version: 1.1.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.p-search {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
}

.p-search input {
  padding-left: 20px;
  padding-right: 40px;
}

.p-search button {
  width: 40px;
  position: absolute;
  top: 0;
  right: 0;
}

.p-login {
  max-width: 360px;
  margin: 0 auto;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.p-feature-icon {
  float: left;
}

.p-feature-icon > .material-icons, .p-feature-icon > .menu-toggle:before {
  padding: 10px;
  border: 1px solid #39474e;
  line-height: 1;
}

.p-feature-text {
  margin-left: 60px;
}

/**
 * Version: 1.0.0
 * Author: Wojciech Mleczek <mleczek.wojtek@gmail.com>
 */
.p-php7 {
  min-height: 340px;
  color: white;
  background: #84489c url(../img/market/banner/pattern.jpg) center center no-repeat;
  background-size: cover;
}

.p-php7-mark-area {
  position: relative;
}

.p-php7-mark-img {
  position: absolute;
  top: -40px;
  right: 0;
}

.p-php7-content {
  max-width: 540px;
}

.hosting-packages {
  display: block;
  font-size: 14px;
}

.hosting-packages thead {
  background-color: #43a047;
  color: white;
}

.hosting-packages tr.lead {
  border-top: 2px solid #43a047;
}

.hosting-packages tbody {
  overflow: auto;
}

.hosting-packages td {
  padding: 10px 15px;
  min-width: 140px;
}

.hosting-packages td:first-child {
  padding: 10px 0 10px 10px;
}

.hosting-packages .tooltip-right {
  cursor: default;
}

.hosting-description {
  max-width: 556px;
}

.hosting-description .hide {
  display: none;
}

.hosting-link {
  cursor: pointer;
}

.hosting-link i {
  font-size: 1.5rem;
}


.scroll-buttons div {
  display: inline-block;
}

.scroll-buttons div i {
  font-size: 40px;
}

.user-item {
  margin: 0 auto;
  width: 30%;
  border-top: 4px solid #43a047;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

section.transfer {
  min-height: calc(100vh - 450px);
}

section.transfer ul {
  list-style-type: initial;
}

.transfer-login, .transfer-register {
  min-height: 290px;
}

.transfer-register p {
  text-align: left;
}

.table-summary thead tr {
  border-bottom: 2px solid #43a047;
}

.regulations ol.regulations-list {
  list-style-type: decimal;
}

.regulations ol.regulations-list > li {
  font-weight: bold;
}

.regulations ol.regulations-list > li p, .regulations ol.regulations-list > li ol {
  font-weight: normal;
}

.regulations ol.regulations-list > li .decimal, .regulations ol.regulations-list > li .disc {
  padding-left: 20px;
}

.regulations ol.regulations-list > li .decimal {
  list-style-type: decimal;
}

.regulations ol.regulations-list > li .disc {
  list-style-type: disc;
}

.numbered-list {
  list-style-type: decimal;
}

.numbered-list li {
  margin-bottom: 10px;
}

.numbered-list ol li, .numbered-list ul li{
  margin-bottom: 0;
  font-weight: normal;
}

.alpha-list {
  list-style-type: lower-alpha;
}

.alpha-list li {
  margin-bottom: 0;
}

.disc-list {
  list-style-type: disc;
}

.small-line-height {
  line-height: 1.1;
}


.user-item {
  margin: 0 auto;
  width: 30%;
  border-top: 4px solid #43a047;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

section.transfer {
  min-height: calc(100vh - 450px);
}

section.transfer ul {
  list-style-type: initial;
}

.transfer-login, .transfer-register {
  min-height: 290px;
}

.transfer-register p {
  text-align: left;
}

.table-summary thead tr {
  border-bottom: 2px solid #43a047;
}

.server-item .pricing-item-name {
  padding: 5px 16px 0;
}

@media (min-width: 720px) {
  .server-item {
    min-height: 570px;
    position: relative;
  }
  .server-pricing-bottom {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
  }

  .server-item {
  min-height: 595px;
}

.server-item .pricing-item-name {
  padding: 5px 25px 0;
}

@media (min-width: 720px) {
  #serwerownia {
    background: url("../img/market/banner/servers.jpg") no-repeat bottom center;
    background-size: cover;
  }
  #serwerownia > div {
    display: block;
    height: 430px;
    z-index: 1;
    color: white;
  }
  #serwerownia:before {
    content: none;
  }
}

.pricing-vps {
  min-height: 350px;
}

.pricing-vps .pricing-item {
  min-height: 300px;
}

#cart-table {
  margin: 0 auto;
  width: 100%;
}

#cart-table th:first-child {
  width:55%;
}

#cart-table th:nth-child(2), #cart-table th:nth-child(3) {
  width:20%;
}

#cart-table th:last-child {
  width: 5%;
}

.single-promo-item .photo-link img {
  opacity: 0.5;
  max-width: 100%;
  transition: all 0.5s ease-in-out;
}

.single-promo-item .photo-link img:hover {
  opacity: 1;
}

.single-promo-item:nth-child(even) .grid {
  flex-direction: row-reverse;
}

@media (min-width: 720px) {
  .single-promo-item {
    padding: 40px;
  }
  .single-promo-item .grid {
    display: flex;
  }
  .single-promo-item .grid:last-child {
    align-items: center;
  }
  .single-promo-item:nth-child(even) .grid {
    flex-direction: row-reverse;
  }
  .single-promo-item:nth-child(even) .grid > div:first-child {
    text-align: right;
  }
}}


.roman-list {
  list-style-type: upper-roman;
  margin-bottom: 1em;
  padding: 1em;
}

.roman-list > li {
  font-weight: bold;
  margin-bottom: 1em;
}

.numbered-list {
  list-style-type: decimal;
  font-weight: normal;
  margin-left: 1em;
}

.numbered-list li {
  margin-bottom: 0;
}

.letter-list {
  list-style-type: lower-alpha;
  margin-left: 1em;

}

.disc-list {
  list-style-type: disc;
  margin-left: 1em;

}

.nested-list {
  counter-reset: section;
  padding: 1em;
}

.nested-list > li {
  counter-increment: section;
  position: relative;
  font-weight: bold;
  margin-bottom: 1em;
}

.nested-list > li::before {
  content: counter(section) ". ";
  font-weight: bold;
}

/* Dla podlisty (1.1, 1.2, ...) */
.nested-list li > ol {
  margin-left: 20px;
  counter-reset: subsection;
  padding: 0;
}

.nested-list li > ol > li {
  counter-increment: subsection;
  position: relative;
  font-weight: initial;
  margin-bottom: 0;
}

.nested-list li > ol > li::before {
  content: counter(section) "." counter(subsection) " ";
  font-weight: initial;
}

/* Dla pod-podlisty (1.1.1, 1.1.2, ...) */
.nested-list li > ol > li > ol {
  margin-left: 20px;
  counter-reset: subsubsection;
}

.nested-list li > ol > li > ol > li {
  counter-increment: subsubsection;
  position: relative;
}

.nested-list li > ol > li > ol > li::before {
  content: counter(section) "." counter(subsection) "." counter(subsubsection) " ";
}