/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
   * A better looking default horizontal rule
   */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
   * Remove default fieldset styles.
   */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
   */

textarea {
  resize: vertical;
}

/* ==========================================================================
     Author's custom styles
     ========================================================================== */

/* ==========================================================================
     Helper classes
     ========================================================================== */

/*
   * Hide visually and from screen readers
   */

.hidden,
[hidden] {
  display: none !important;
}

/*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
   * Hide visually and from screen readers, but maintain layout
   */

.invisible {
  visibility: hidden;
}

/*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/*--------------------------------------------------------------
  ### #### Fonts ### ####
  --------------------------------------------------------------*/

/*--------------------------------------------------------------
  ### #### General style ### ####
  --------------------------------------------------------------*/
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
img {
  max-width: 100%;
  height: auto;
}
body {
  overflow-x: hidden;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 0;
}
:root {
  --red: #ed1b35;
  --black: rgba(40, 40, 40, 1);
  --gray: rgba(183, 183, 183, 1);
  --accentRed: rgba(255, 187, 195, 1);
  --white: rgba(255, 255, 255, 1);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, Helvetica, sans-serif;
}
a,
p,
button,
input,
label,
textarea,
small,
span.counter {
  font-family: Arial, Helvetica, sans-serif;
}
.cnt {
  text-align: center;
}
.rgt {
  text-align: right;
}
.lft {
  text-align: left;
}
.np {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
figure {
  margin: 0;
  padding: 0;
  display: inline-block;
}
nav {
  margin: 0;
  padding: 0;
}
.mp {
  margin: 0;
  padding: 0;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--red);
  transition: all 0.12s ease-in;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}
::-moz-selection {
  color: #fff;
  background: var(--red);
}
::selection {
  color: #fff;
  background: var(--red);
}

.rel {
  position: relative;
}
.mob-non {
  display: none;
}
@media only screen and (max-width: 768px) {
  .mob-non {
    display: block;
  }
  .mob-np {
    padding-left: 0;
    padding-right: 0;
  }
  .mob-cnt {
    text-align: center;
  }
  .mob-mt0 {
    margin-top: 0;
  }
  .mob-mt30 {
    margin-top: 30px;
  }
  .mob-w50 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/*--------------------------------------------------------------
  Custom Grid
--------------------------------------------------------------*/
/* custom grid */
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.w460 {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.w640 {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
.w960 {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.w800 {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
}
.w1180 {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.w1280 {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.w1440 {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}
.w1640 {
  max-width: 1640px;
  width: 100%;
  margin: 0 auto;
}
.w1740 {
  max-width: 1740px;
  width: 100%;
  margin: 0 auto;
}
.w1840 {
  max-width: 1840px;
  width: 100%;
  margin: 0 auto;
}
[class^="col-"] {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}
[class^="col-"].col-1 {
  flex: 0 0 8.33333%;
  max-width: 8.33333%;
}
[class^="col-"].col-2 {
  flex: 0 0 16.66667%;
  max-width: 16.66667%;
}
[class^="col-"].col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
[class^="col-"].col-4 {
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}
[class^="col-"].col-5 {
  flex: 0 0 41.66667%;
  max-width: 41.66667%;
}
[class^="col-"].col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
[class^="col-"].col-7 {
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}
[class^="col-"].col-8 {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
}
[class^="col-"].col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
[class^="col-"].col-10 {
  flex: 0 0 83.33333%;
  max-width: 83.33333%;
}
[class^="col-"].col-11 {
  flex: 0 0 91.66667%;
  max-width: 91.66667%;
}
[class^="col-"].col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* Breakpoint 768px */
@media (max-width: 768px) {
  [class^="col-"].col-1,
  [class^="col-"].col-2,
  [class^="col-"].col-3,
  [class^="col-"].col-4,
  [class^="col-"].col-5,
  [class^="col-"].col-6,
  [class^="col-"].col-7,
  [class^="col-"].col-8,
  [class^="col-"].col-9,
  [class^="col-"].col-10,
  [class^="col-"].col-11,
  [class^="col-"].col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/** Main **/
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
.main.home {
  position: relative;
  margin: 40px;
  padding: 40px;
  background-image: url("../img/bg_home.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: calc(100vh - 14px);
}

/** header **/
header {
  position: relative;
  z-index: 100;
}
div.box-logo-h {
  position: absolute;
  left: 0;
  top: 5px;
}
figure.fig-logo-h {
  position: relative;
}
img.img-logo-h {
  position: relative;
  max-width: 250px;
  width: 100%;
  height: auto;
}

/** header list **/
div.box-h-list {
  position: relative;
  display: inline-block;
}
ul.ul-h {
  margin: 0;
  padding: 0;
}
ul.ul-h li.li-h {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 10px;
}
a.a-h,
a.a-h:is(:visited, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;
}
a.a-h:is(:hover, :active) {
  color: var(--black);
}
.a-h.a-profile{
  text-decoration:none;
}
.a-h.a-profile:hover p{
  color:var(--red);
}
ul.ul-h li.li-h-abs {
  margin-right: 40px;
}
a.a-h-abs,
a.a-h-abs:is(:visited, :active) {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
  color: var(--red);
}
a.a-h-abs:is(:hover, :active) {
  color: var(--black);
}
.btn-red,
.btn-red:is(:hover, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;

  background-color: var(--red);
  color: var(--white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 30px;
  border: 2px solid var(--red);

  transition: all 0.12s ease-in-out;
}
.btn-red:is(:hover, :active) {
  background-color: var(--white);
  color: var(--red);
}
.btn-border,
.btn-border:is(:hover, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;

  background-color: transparent;
  color: var(--red);
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 30px;
  border: 2px solid var(--red);

  transition: all 0.12s ease-in-out;
}
.btn-border:is(:hover, :active) {
  background-color: var(--red);
  color: var(--white) !important;
}

.btn-border-black,
.btn-border-black:is(:hover, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;

  background-color: transparent;
  color: var(--black);
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 40px;
  border-radius: 30px;
  border: 2px solid var(--black);

  transition: all 0.12s ease-in-out;
}
.btn-border-black:is(:hover, :active) {
  background-color: var(--black);
  color: var(--white) !important;
}

/** footer **/
.footer {
  position: relative;
  padding: 30px 80px;
  background-color: var(--red);
}
p.txt-logo-f {
  margin: 10px 0 0 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--white);
  font-weight: normal;
}
div.box-f {
  position: relative;
}
p.txt-box-f {
  margin: 0;
  font-size: 15px;
  line-height: 25px;
  color: var(--white);
}
p.txt-box-f-b,
p.txt-box-f-b a{
  color: var(--accentRed);
  text-decoration: none;
}
/** footer list **/
div.box-f-list {
  position: relative;
}
ul.ul-f {
  margin: 50px 0 0 0;
  padding: 0;
  list-style: none;
}
ul.ul-f li.li-f {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 15px;
}
a.a-f,
a.a-f:is(:hover, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  color: var(--accentRed);
  text-decoration: none;

  transition: color 0.12s ease-in-out;
}
a.a-f:is(:hover, :active) {
  color: var(--white);
}

/** home **/
div.row-home {
  margin-top: -40px;
}
div.box-home-info {
  position: relative;
}
div.col-home-bottom {
  margin-top: 500px;
}
p.p-home-info {
  margin: 0 0 20px 0;
  font-size: 90px;
  line-height: 90px;
  color: var(--red);
  font-weight: bold;			
}
p.p-home-info-b {
  font-size: 35px;
  line-height: 35px;
  margin-bottom: 60px;
}
div.box-home-btn {
  position: relative;
  margin-top: 100px;
}
.btn-black,
.btn-black:is(:hover, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;

  background-color: var(--black);
  color: var(--white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 40px;
  border-radius: 30px;
  border: 2px solid var(--black);

  transition: all 0.12s ease-in-out;
}
.btn-black:is(:hover, :active) {
  background-color: var(--white);
  color: var(--black);
}

/** main content home box */
div.box-home-red {
  position: relative;
  padding: 20px 50px 20px 40px;
  background-color: var(--red);

  max-width: 330px;
  width: 100%;
  margin: 0 auto 60px auto;
}
p.txt-box-home-red {
  margin: 0 0 40px 0;
  font-size: 22px;
  line-height: 25px;
  color: var(--white);
  font-weight: bold;
}
p.txt-box-home-red:last-child {
  margin: 0;
}
p.txt-box-home-red-b span {
  font-size: 80px;
  line-height: 80px;
}
p.txt-box-home-red-b {
  font-size: 42px;
  line-height: 42px;
}
div.box-home-item {
  max-width: 330px;
  width: 100%;
  margin: 0 auto 50px auto;
  display: flex;
}
div.col-home-item-a {
  position: relative;
  padding-left: 0;
  padding-right: 0;
  width: 80px;
}
div.col-home-item-b {
  position: relative;
  padding-left: 40px;
  width: calc(100% - 80px);
}
h3.h3-home-item {
  margin: 0 0 10px 0;
  font-size: 40px;
  line-height: 40px;
  color: var(--red);
  font-weight: bold;
}
p.txt-home-item {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--black);
  font-weight: 400;
}
p.txt-home-item a {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--black);
  font-weight: 400;
}
figure.fig-home-item {
  position: relative;
  width: 100%;
  height: 100%;
}
img.img-home-item {
  position: relative;
  width: 100%;
  height: 100%;
}

/** formularz **/
div.box-form {
  position: relative;
  padding: 60px 40px;
  /* background-color: var(--white); */
  border-radius: 20px;
  max-width: 1280px;
  width: 100%;
  margin: 60px auto 0 auto;
}
div.box-form-white {
  background-color: var(--white);
}
div.box-form-mt {
  margin-top: 140px;
}
.form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 300px);
  width: 100%;
}

/** formularz header **/
div.box-form-header {
  position: relative;
  margin-bottom: 90px;
  text-align: center;
}
h1.h1-form-header {
  margin: 0 0 30px 0;
  font-size: 30px;
  line-height: 30px;
  color: var(--red);
  font-weight: bold;
}
h1.h1-form-header-b {
  margin: 0 0 30px 0;
  font-size: 35px;
  line-height: 40px;
  color: var(--red);
  font-weight: normal;
  text-align: left;
}
div.box-form-header-info {
  position: relative;
  margin-top: 40px;
}
h2.h2-form-header {
  margin: 0;
  font-size: 20px;
  line-height: 20px;
}
h2.h2-form-header-mb {
  margin-bottom: 30px;
}
div.box-form-header-title {
  position: relative;
}
h2.h2-form-title {
  margin: 0;
  font-size: 16px;
  line-height: 20px;
}
div.box-form-header-b {
  position: relative;
  margin: 40px 0;
}
h2.h2-form-header-b {
  margin: 60px 0 0 0;
  font-size: 30px;
  line-height: 30px;
  color: var(--red);
  font-weight: bold;
}

/** formularz content **/
div.box-form-content {
  position: relative;
  margin-top: 40px;
}
small.form-small {
  display: block;
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 13px;
  line-height: 15px;
  color: #878787;

  position: absolute;
  top: 25px;
  right: 20px;
}
input#net_value {
  padding-right: 260px;
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}
.form-group-mb {
  margin-bottom: 40px;
}

.form-row {
  margin-bottom: 15px;
  display: flex;
  flex-wrap: wrap;
}

.form-col {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0 5px;
}
.form-col-3 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  padding: 0 5px;
}

.form-col-half {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
  margin-right: 10px;
}

.form-col-half-last {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
  margin-right: 0;
}

@media (max-width: 768px) {
  .form-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .form-col-half,
  .form-col-half-last {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 0;
    margin-right: 0;
  }
}

.form-row-small {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.form-col-small {
  flex: 0 0 calc(50% - 5px);
}

.form-input {
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  height: 59px;
  padding: 15px 20px;
  font-size: 15px;
  border: 1px solid var(--gray);
  border-radius: 30px;
  background-color: transparent;
  transition: border-color 0.3s ease;
  outline: none;
}

.form-input:focus {
  border-color: var(--red);
}

.form-label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label,
.form-error .form-label,
.form-filled .form-label{
  top: 0;
  left: 20px;
  font-size: 12px;
  background-color: var(--black);
  padding: 0 5px;
  color: var(--white);
  border-radius: 6px;
}
.form-input::placeholder {
  color: transparent;
}
.form-col.form-col-full {
  flex: 0 0 460px;
  padding: 0;
  box-sizing: border-box;
  margin: 0 auto;
}
.btn-form {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;
  background-color: var(--red);
  color: var(--white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 40px;
  border-radius: 30px;
  border: 2px solid var(--red);
  cursor: pointer;
  transition: all 0.12s ease-in-out;
  margin-top: 20px;
}
.btn-form:hover {
  background-color: var(--white);
  color: var(--red);
}
a.a-link,
a.a-link:is(:hover, :active) {
  display: inline-block;
  font-size: 15px;
  line-height: 25px;
  text-decoration: none;
  color: var(--black);

  transition: color 0.3s ease-in-out;
}
a.a-link:is(:hover, :active) {
  color: var(--red);
  text-decoration: none;
}
.text-center {
  text-align: center;
}

.form-checkbox-group {
  position: relative;
  margin: 15px 0;
  display: flex;
  align-items: flex-start;
}
.form-checkbox-group-ml {
  margin-left: 20px;
}
.form-checkbox-input {
  opacity: 0;
  position: absolute;
}
.form-checkbox-label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
  color: var(--black);
  user-select: none;
}
.form-checkbox-label-notcheckbox {
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
  color: var(--black);
  user-select: none;
}
.form-checkbox-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gray);
  border-radius: 3px;
  background-color: var(--white);
}
.form-checkbox-input:checked + .form-checkbox-label::before {
  background-color: var(--red);
  border-color: var(--red);
}
.form-checkbox-input:checked + .form-checkbox-label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-expand-link {
  color: var(--red);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  margin-top: 5px;
  display: inline-block;
}
.form-submit {
  width: 100%;
  max-width: 460px;
  background-color: var(--black);
  color: var(--white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 40px;
  border-radius: 30px;
  border: 2px solid var(--black);
  cursor: pointer;
  transition: all 0.12s ease-in-out;
  margin-top: 20px;
  font-size: 15px;
  line-height: 25px;
  text-decoration:none;
}
.form-submit:hover {
  background-color: var(--white);
  color: var(--black);
}
.form-expanded-content {
  display: none;
  margin-top: 15px;
  font-size:13px;
}
#form-register label a{
  color:var(--black);
  text-decoration:underline;
}
#form-register label a:hover{
  text-decoration: none;
}
/** header login **/
.header-login-user {
  color: var(--black);
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  line-height: 25px;
}
ul.ul-h li.li-h.li-h-login {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}
figure.fig-user-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
.user-icon {
  width: 40px;
  height: auto;
}

/** form info **/
div.form-info-container {
  position: relative;
  padding-right: 60px;
}
p.form-info {
  font-size: 15px;
  line-height: 24px;
  color: var(--black);
  margin-bottom: 16px;
}
p.form-info-b {
  font-size: 20px;
  line-height: 26px;
  color: var(--black);
  margin-bottom: 16px;
  font-weight: bold;
}

ul.form-requirements {
  list-style-type: none;
  padding: 0;
  margin: 0 0 30px 0;
}

ul.form-requirements li {
  margin-left: 10px;
  padding-left: 15px;
  font-size: 15px;
  line-height: 24px;
  color: var(--black);
  position: relative;
}

ul.form-requirements li:before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--black);
}

/** success message **/
.success-container {
  text-align: center;
  padding: 30px 0;
}

.success-icon {
  margin: 0 auto 30px;
  width: 80px;
  height: 80px;
}

.success-message {
  font-size: 24px;
  line-height: 32px;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 40px;
  text-align: center;
}

/** laureat form styles **/
.form-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--black);
}

.form-file-upload {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px;
  padding: 30px 0;
  border-top: 1px solid #a7a7a7;
  border-bottom: 1px solid #a7a7a7;
}

.file-upload-btn {
  background-color: #f8f8f8;
  border: 1px solid #a7a7a7;
  border-radius: 30px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  color: var(--black);
  cursor: pointer;

  max-width: 300px;
  width: 100%;
}
.file-upload-btn:is(:hover, :active) {
  background-color: #f0f0f0;
}
.file-upload-btn span {
  font-size: 12px;
  margin-left: 15px;
  color: #a7a7a7;
}

.file-upload-btn img {
  margin-right: 10px;
  width: 18px;
  height: 18px;
}

.file-formats {
  margin-bottom: 0;
  font-size: 13px;
  color: #888;
  cursor: default;
  transition: color 0.3s ease;
}

div.required-agreement {
  margin-top: 40px;
}

.form-submit-container {
  text-align: center;
  margin-top: 30px;
}

select.form-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("../img/arrow_down.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 35px;
}

/** konto styles **/
div.box-konto {
  position: relative;
  border-radius: 20px;
  width: 100%;
  margin: 60px auto 0 auto;
}

div.box-konto-header {
  display: none;
}

div.konto-content {
  margin-top: 20px;
}

div.konto-section {
  margin-bottom: 20px;
}

h2.konto-section-title {
  font-size: 22px;
  line-height: 28px;
  color: var(--red);
  font-weight: bold;
  margin-bottom: 10px;
}

p.konto-section-subtitle,
p.konto-section-subtitle a{
  font-size: 16px;
  line-height: 22px;
  color: var(--black);
  margin-bottom: 20px;
}

p.konto-section-subtitle a{
  text-decoration:underline;
}
p.konto-section-subtitle a:hover{
  text-decoration:none;
}

div.konto-panel {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

div.konto-panel-header {
  position: relative;
  padding: 15px 20px 15px 5px;
  margin: 0 30px 0 0;
}

h3.konto-panel-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
  margin: 0;

  font-weight: bold;
}

div.box-table {
  max-height: 240px;
  overflow-y: auto;
  padding: 0;
}
/* width */
div.box-table::-webkit-scrollbar {
  width: 8px;
}
div.box-table::-webkit-scrollbar-track {
  background: #dedede;
}
div.box-table::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 10px;
}
div.box-table::-webkit-scrollbar-thumb:hover {
  background: var(--black);
}

table.konto-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
}
table.konto-table {
  position: relative;
  z-index: 1;
}
table.konto-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

table.konto-table th {
  position: relative;
  z-index: 1;
  padding: 10px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background-color: var(--red);
}

table.konto-table td {
  padding: 15px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--black);
  background-color: #f8f8f8;
}
table.konto-table td.td-status {
  color: #a7a7a7;
}
a.a-td-status,
a.a-td-status:is(:hover, :active) {
  display: inline-block;
  font-size: 12px;
  line-height: 12px;
  text-decoration: none;
  max-width: 140px;
  width: 100%;

  background-color: var(--red);
  color: var(--white);
  font-weight: normal;
  padding: 5px 15px;
  border-radius: 30px;
  border: 2px solid var(--red);

  transition: all 0.12s ease-in-out;
}
a.a-td-status:is(:hover, :active) {
  background-color: var(--white);
  color: var(--red);
  cursor: pointer;
}

table.konto-table th,
table.konto-table td {
  border-bottom: none;
}
table.konto-table td {
  background-color: #e9e9e9;
  width: 30px;
}

@media (max-width: 768px) {
  div.box-table {
    overflow-x: auto;
  }

  table.konto-table {
    min-width: 600px;
  }

  div.box-konto {
    padding: 20px;
  }
}

div.konto-panel-header-losy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 50px;
  margin-bottom: 30px;
  padding-left: 20px;
  border: 1px solid #b7b7b7;
}

div.losy-label {
  padding: 25px 20px;
  font-size: 40px;
  line-height: 45px;
  font-weight: 700;
  color: var(--red);
}

div.losy-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 97px;
  background-color: var(--red);
  color: var(--white);
  font-size: 40px;
  font-weight: bold;
  border-radius: 50px;
}

/** zdrapki **/
div.box-konto-zdrapki {
  position: relative;
  margin-top: 30px;
}
div.col-konto-zdrapka {
  position: relative;
  padding: 0 5px;
  margin: 50px 0;
}
div.box-konto-zdrapka-item {
  position: relative;
}
div.bg-zdrapka {
  position: relative;
  background-image: url("../img/konto/zdrapka.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 110px;
  text-align: center;

  border-radius: 30px;
}
p.p-zdrapka-nr {
  margin: 0;
  font-size: 25px;
  line-height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--red);
  font-weight: bold;
}
div.box-zdrapka-btn {
  position: relative;
  margin-top: -20px;
  text-align: center;
}
button.btn-zdrapka,
button.btn-zdrapka:is(:hover, :active) {
  display: inline-block;
  font-size: 13px;
  line-height: 15px;
  text-decoration: none;

  background-color: var(--red);
  color: var(--white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 30px;
  border: 2px solid var(--red);

  transition: all 0.12s ease-in-out;
}
button.btn-zdrapka:is(:hover, :active) {
  background-color: var(--white);
  color: var(--red);
  cursor: pointer;
}

/** Modal zdrapki **/
.modal-zdrapka {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal-zdrapka.show {
  opacity: 1;
}
.modal-zdrapka-body h2 {
  margin-top: 40px;
}
.modal-zdrapka-content {
  position: relative;
  background-color: rgba(255, 255, 255, 0.95);
  margin: auto;
  padding: 40px;
  width: 100%;
  max-width: 1140px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.3s ease-in-out;
}

.modal-zdrapka.show .modal-zdrapka-content {
  transform: translateY(0);
}

.modal-zdrapka-header {
  position: relative;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.modal-close:hover {
  transform: scale(1.1);
}

.modal-title {
  margin-bottom: 60px;
  color: var(--red);
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.modal-title-big {
  margin-bottom: 10px;
  font-size: 40px;
  line-height: 40px;
  font-weight: bold;
  color: var(--red);
}
.fig-modal-zdrapka {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-modal-zdrapka {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}
.modal-bg-zdrapka {
  position: relative;
  background-color: transparent;
  border-radius: 80px;
  height: 350px;
  max-width: 850px;
  margin: 0 auto;
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.modal-retry-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 30px;
  z-index: 50;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  background-color: #e2d8b0;
  transition: opacity 0.5s ease-in-out;
}

.modal-retry-text {
  color: var(--red);
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.btn-zdrapka-modal,
.btn-zdrapka-modal:is(:hover, :active) {
  display: inline-block;
  font-size: 13px;
  line-height: 15px;
  text-decoration: none;
  background-color: var(--red);
  color: var(--white);
  font-weight: bold;
  text-transform: uppercase;
  padding: 15px 25px;
  border-radius: 30px;
  border: 2px solid var(--red);
  transition: all 0.12s ease-in-out;
  cursor: pointer;
}

.btn-zdrapka-modal:is(:hover, :active) {
  background-color: var(--white);
  color: var(--red);
}

@media (max-width: 768px) {
  .modal-zdrapka-content {
    width: 90%;
    padding: 20px;
  }

  .modal-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .modal-bg-zdrapka {
    height: 180px;
  }

  .modal-retry-text {
    font-size: 22px;
  }
}

/** formularz error **/
div.form-container-relative {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.form-error input,
.form-error select {
  border: 2px solid #ff3333 !important;
}
p.p-form-error {
  margin: 10px 0 0 0;
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
  color: #ff3333;
}

.box-form-header p.p-form-error {
  font-size: 15px;
}
/** konto zap-pozniej **/
div.box-konto-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  /* max-width: 540px;
  width: 100%; */
}
div.box-konto-content h2.konto-section-title {
  height: auto;
  text-align: center;
}

/** Cloud9Carousel styles **/
#carousel {
  position: relative;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  right: -100px;
}

.cloud9-item {
  width: 350px;
  height: auto;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.cloud9-item:hover {
  transform: scale(1.05);
}

#buttons {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 30px;
}
#buttons button {
  position: absolute;
  z-index: 100;
  top: 50%;
  transform: translateY(-50%);

  background-color: var(--red);
  color: var(--white);
  border: none;
  border-radius: 0;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
#buttons button.left {
  left: 0;
}
#buttons button.right {
  right: 0;
}

#buttons button:hover {
  background-color: var(--black);
}


/** carousel **/
div.col-home-carousel {
  position: relative;
  margin-top: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
.swiper-pagination-bullet-active {
  background-color: var(--red);
}
.item-home-carousel {
  max-width: 100%;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  padding: 50px 0;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  border-radius: 0;
  overflow: hidden;
  max-width: 320px;
  width: 100%;
}

.item-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 60px 20px;
  text-align: center;
  height: 100%;
}

.item-home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 0;
}
.item-home-card-img {
  position: relative;
  width: 100%;
  height: 280px;
}
.item-home-card img {
  max-width: 340px;
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 15px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.item-home-card-info {
  position: relative;
  text-align: center;
}
.item-home-card h3 {
  margin: 10px 0 0 0;
  font-size: 20px;
  line-height: 20px;
  color: var(--black);
}
.item-home-card p {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--black);
  margin-top:20px;
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0)
  );
}

/**
zdrapka
**/
#canvas-zdrapka {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  cursor: grab;
  touch-action: none;
  transition: opacity 0.5s ease-out;
  opacity: 1;
}

/* Wyświetlacz procentu zdrapania */
.scratch-percent {
  transition: opacity 0.3s ease;
}

/* Animacja kursora podczas zdrapywania */
#canvas-zdrapka:active {
  cursor: grabbing;
}

/* Animacja pulsowania dla napisu "Zdrapuj dalej..." */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-animation {
  animation: pulse 1.5s infinite ease-in-out;
}

/* Style dla konfetti */
.tsparticles-canvas-el {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/** alternative home **/
.home-alt div.row-home {
  margin-top: 60px;
}
.home-alt div.box-home-red {
  margin: 0;
}
.home-alt div.col-home-bottom {
  margin-top: 0;
  margin-bottom: 40px;
}
.row-home-card {
  margin-top: 60px;
}
.home-alt div.item-main-card {
  margin-bottom: 30px;
  padding: 20px 30px;
  background-color: #fff;
  text-align: center;
}
.home-alt.main.home {
  background-attachment: fixed;
}
.zdrap-swoja-szanse-notactive{
  background-color:grey!important;
  border-color:grey!important;
  cursor:not-allowed;
  pointer-events: none;
  color:#fff!important;
}
.zdrap-swoja-szanse-notactive:hover{
  background-color:grey!important;
  border-color:grey!important;
  cursor:not-allowed;
  pointer-events: none;
  color:#fff!important;
}

.hide-pesel{
  display:none
}
.hide-pesel.unhide{
  display:flex;
}

.a-logo-h{
  z-index: 10;
  position: relative;
}
/**
Mobile version
**/

/** mobile header **/
div.box-nav {
  position: relative;
}
@media only screen and (max-width: 1280px) {
  ul.ul-h li.li-h-abs {
    margin-right: 10px;
  }
  ul.ul-h li.li-h {
    padding: 0;
  }
  ul.ul-h li.li-h.li-h-login {
    margin-left: 10px;
    margin-right: 10px;
  }
  a.a-h-abs,
  a.a-h-abs:is(:visited, :active),
  a.a-h,
  a.a-h:is(:visited, :active) {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1180px) {
  .main.home {
    padding: 40px 20px;
  }
  div.box-logo-h {
    top: 5px;
  }
  img.img-logo-h {
    max-width: 200px;
  }
}
@media only screen and (max-width: 1096px) {
  div.box-form-mt {
    margin-top: 60px;
  }
  .main.home {
    margin: 0;
    padding: 0;
  }
  header {
    padding: 20px 0;
  }
}
div.mob-box-menu {
  display: none;
}
@media only screen and (max-width: 990px) {
  div.box-form-mt {
    margin-top: 0;
  }
  /** end **/
  div.mob-box-menu {
    display: inline-block;
  }
  .no-scroll {
    overflow: hidden;
  }

  /** mobile header position **/
  .header-np {
    padding-left: 0;
    padding-right: 0;
  }
  header#Header {
    padding: 0;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 5;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.9);

    transition: background-color 0.3s ease-in-out;
  }
  div.box-logo-h {
    top: 10px;
  }

  /** mobile navigation **/
  ul.ul-nav {
    margin: 0;
    padding: 0 0 0 15px;
    display: block;
  }
  ul.ul-h li.li-h,
  ul.ul-nav li {
    display: block;
  }
  a.a-h,
  a.a-h:is(:hover, :active) {
    display: block;
    font-weight: 400;
    color: #fff;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
    padding: 10px 0;
    margin-bottom: 0;
    margin-top: 0;

    /** reset **/
    background-color: transparent;
    border: none;
    text-transform: capitalize !important;
  }
  a.a-h.btn-border.btn-logout,
  a.a-h.btn-border.btn-logout:is(:visited, :active) {
    color: var(--black);
    background-color: #fff;
    font-size: 16px;
    text-align: center;
  }

  /** login mobile **/
  ul.ul-h li.li-h.li-h-login {
    display: block;
    margin: 60px 0 20px 0;
  }
  .header-login-user {
    color: #fff;
  }
  .user-icon path {
    stroke: #fff;
  }

  /** mobile menu content **/
  div.box-nav {
    position: fixed;
    left: 0;
    top: 75px;
    width: 100%;
    height: 100%;
    background-color: rgba(254, 1, 3, 0.9);
    z-index: 4;
    text-align: left;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 60px 0 120px 0;

    will-change: transform;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  div.box-nav::-webkit-scrollbar {
    width: 0;
  }
  div.mob-sec-m-sh {
    transform: translateX(0) !important;
  }

  /** mobile nav animation **/
  nav.nav-h {
    will-change: transform;
    transition: transform 0.4s ease-in-out;
  }
  nav.nav-h-sh {
    animation-name: mob-nav;
    animation-delay: 0.5s;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    opacity: 0;
  }
  @keyframes mob-nav {
    from {
      transform: translateX(-100px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
  /** Hamburger **/
  .ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .hamRotate.active {
    transform: rotate(45deg);
  }
  .hamRotate180.active {
    transform: rotate(180deg);
  }
  .line {
    fill: none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke: var(--red);
    stroke-width: 4;
    /* stroke-linecap: round; */
  }
  .line-color {
    stroke: #fff !important;
  }
  .ham-h .top {
    stroke-dasharray: 40 139;
  }
  .ham-h .bottom {
    stroke-dasharray: 40 180;
  }
  .ham-h.active .top {
    stroke-dashoffset: -98px;
  }
  .ham-h.active .bottom {
    stroke-dashoffset: -138px;
  }
  /** end mobile hamburger **/
}

/** mobile footer **/
@media only screen and (max-width: 1180px) {
  .footer {
    padding: 40px 30px;
  }
  .col-2.col-mob-f-full-a {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .col-2.col-mob-f-full-b {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .col-8.rgt.col-mob-f-full-c {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  div.box-f {
    margin-top: 40px;
  }
  ul.ul-f li.li-f {
    padding: 0;
  }
  li.li-f.li-f-mob {
    margin-top: 40px !important;
  }
}
@media only screen and (max-width: 580px) {
}

/** mobile forms **/
@media only screen and (max-width: 990px) {
  .form-container {
    min-height: 100%;
  }
  /* div.mob-form-non {
    display: none;
  } */
  div.box-form-header {
    margin-bottom: 60px;
  }
  div.box-form-content {
    margin-top: 20px;
  }
  div.box-form-header-info {
    margin-top: 0;
  }
  .main.home {
    min-height: 100%;
    padding: 140px 0 60px 0;
  }
  div.box-form {
    padding: 0;
  }
  div.box-form-white {
    margin: 0;
    background-color: transparent;
  }

  /** btn black mobile **/
  .btn-black,
  .btn-black:is(:hover, :active) {
    padding: 10px 15px;
    max-width: 320px;
    width: 100%;
  }
  div.box-form {
    margin: 0;
  }
}
.row-file-upload {
  display: grid;
  grid-template-columns: 340px 1fr;
  /*grid-template-columns: 130px 300px 1fr;*/
}

div.box-file-upload {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.row-file-upload-fv-info {
  display: grid;
  grid-template-columns: 33% 33% 1fr;
  margin-bottom: 40px;
  text-align: center;
}

.row-file-upload-fv-info div.box-file-upload {
  justify-content: center;
}

@media only screen and (max-width: 768px) {
  .form-input,
  div.form-container-relative {
    max-width: 100%;
  }
  h1.h1-form-header {
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
  }
  div.form-info-container {
    padding-right: 0;
  }

  /** mobile zmien hasło **/
  div.form-change-password p.form-info.form-info-b {
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 20px;
  }
  div.form-col-change-password {
    margin-top: 60px;
  }

  /** mobile form laureat file upload **/
  .row-file-upload {
    display: grid;
    grid-template-columns: 100%;
    text-align: center;
  }
  .row-file-upload-fv-info {
    display: grid;
    grid-template-columns: 100%;
    text-align: center;
  }
  div.box-file-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
  }

  /** mobile form laureat **/
  div.form-col-laureat-w50-a {
    flex: 0 0 60%;
    width: 60%;
  }
  div.form-col-laureat-w50-b {
    flex: 0 0 40%;
    width: 40%;
  }
  .form-checkbox-group-ml {
    margin-left: 5px;
  }
  div.box-form-header-info-mt {
    margin-top: 40px;
  }
  div.form-row-laureat {
    margin-bottom: 0;
  }
  div.box-form-header-laureat {
    position: relative;
  }
  div.box-form-header-laureat h2.h2-form-header {
    font-size: 16px;
    line-height: 20px;
    text-align: center;
  }
  h1.h1-form-header-b {
    font-size: 24px;
    line-height: 28px;
    text-align: center;
  }
  h2.h2-form-header-b {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }
}
@media only screen and (max-width: 580px) {
  input#net_value {
    padding-right: 145px;
  }
  small.form-small {
    font-size: 11px;
    max-width: 140px;
    right: -5px;
    top: 20px;
  }
}

/** mobile index/home  **/
@media only screen and (max-width: 1680px) {
  p.p-home-info {
    font-size: 60px;
    line-height: 60px;
  }
  p.p-home-info-b {
    font-size: 25px;
    line-height: 25px;
  }
}
@media only screen and (max-width: 1380px) {
  div.col-home-bottom,
  div.col-home-carousel {
    margin-top: 100px;
  }
  p.p-home-info {
    font-size: 60px;
    line-height: 60px;
  }
  p.p-home-info-b {
    font-size: 30px;
    line-height: 30px;
  }
}
@media only screen and (max-width: 1180px) {
  div.col-4.col-home-a,
  div.col-4.col-home-b,
  div.col-4.col-home-c {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  div.col-home-carousel {
    margin-top: 0;
  }
  div.col-home-a {
    margin-top: 60px;
  }
  div.box-home-info {
    margin-bottom: 40px;
  }
  div.col-home-item-b {
    padding-left: 20px;
    text-align: left;
  }
  h3.h3-home-item {
    font-size: 30px;
    line-height: 32px;
  }
  p.txt-home-item {
    font-size: 14px;
    line-height: 18px;
  }

  /** mobile box-home-red **/
  div.box-home-red {
    max-width: 236px;
    margin-bottom: 60px;
    padding: 30px 40px;
    text-align: left;
  }
  p.txt-box-home-red {
    font-size: 17px;
    line-height: 20px;
    margin-bottom: 20px;
  }
  p.txt-box-home-red-b span {
    font-size: 64px;
    line-height: 64px;
  }
  p.txt-box-home-red-b {
    font-size: 32px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  div.col-home-item-a {
    width: 60px;
  }
  div.col-home-item-b {
    padding-left: 30px;
    padding-right: 15px;
  }

  /** mobile karouzel **/
  div.col-4.col-home-a,
  div.col-4.col-home-b {
    padding-left: 50px;
    padding-right: 50px;
  }
  div.container-home {
    padding-left: 0;
    padding-right: 0;
  }
  div.col-4.col-home-c {
    padding-left: 0;
    padding-right: 0;
  }
  div.swiper-slide {
    max-width: 280px;
  }
  div.item-home-card {
    padding: 20px 15px;
  }
}

/** 
  Mobile konto
**/
@media only screen and (max-width: 1410px) {
  button.btn-zdrapka,
  button.btn-zdrapka:is(:hover, :active) {
    font-size: 12px;
    line-height: 15px;
    padding: 10px 5px;
  }
}
@media only screen and (max-width: 1260px) {
  div.losy-label {
    font-size: 25px;
    line-height: 25px;
  }
}
@media only screen and (max-width: 1180px) {
  div.col-4.col-konto-zdrapka {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 20px;
  }
  div.col-4.col-konto-zdrapka:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
  div.col-4.col-konto-zdrapka:last-child div.box-konto-zdrapka-item {
    flex: 0 0 50%;
    max-width: 50%;
    margin: 0 auto;
  }
  .item-home-carousel {
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 768px) {
  div.col-4.col-konto-zdrapka {
    flex: 0 0 50%;
    max-width: 50%;
  }
  div.box-konto {
    margin-top: 0;
    padding: 0;
  }
  div.col-konto-a,
  div.col-konto-b {
    padding-left: 0;
    padding-right: 0;
  }
  div.konto-section-mob-up {
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
  }
  div.box-konto-zdrapki {
    padding-left: 0;
    padding-right: 0;
  }

  /** mobile konto text **/
  h2.konto-section-title {
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
  }
  p.konto-section-subtitle {
    font-size: 14px;
    line-height: 18px;
    margin-top: 30px;
  }

  /** mobile konto paddings **/
  div.col-konto-main-np {
    padding-left: 0;
    padding-right: 0;
  }

  /** mobile konto table **/
  div.konto-content-mob-tab {
    background-color: #fff;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  div.losy-label {
    padding: 15px;
  }
  div.losy-label,
  div.losy-count {
    font-size: 16px;
    line-height: 16px;
  }
  div.losy-count {
    height: 60px;
    width: 100px;
  }
  div.konto-panel-header-losy {
    margin-right: 0;
  }
}
@media only screen and (max-width: 680px) {
  div.box-konto-zdrapki {
    margin-top: 60px;
  }
  div.box-konto-zdrapki {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* div.col-4.col-konto-zdrapka {
    width: 300px !important;
    flex: 0 0 300px !important;
    max-width: 300px !important;
    padding: 0 5px;
    scroll-snap-align: start;
  }
  .box-konto-zdrapki {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .box-konto-zdrapki .row.w1740 {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 20px 0;
    margin: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: auto;
  }
  /*  scrollbar */
  .box-konto-zdrapki .row.w1740::-webkit-scrollbar {
    display: none;
  }
  .box-konto-zdrapki .box-konto-zdrapka-item {
    margin: 0 auto;
    width: 100%;
  }
  div.bg-zdrapka {
    height: 80px;
  }
  .box-konto-zdrapki *,
  .box-konto-zdrapki *::before,
  .box-konto-zdrapki *::after {
    transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
  }
  */

  /** mobile modal **/
  .modal-zdrapka-body {
    padding-top: 80px;
  }
  .modal-title {
    margin-bottom: 30px;
  }
  .modal-close {
    width: 30px;
    height: 30px;
  }
  .modal-zdrapka-body h2.modal-title-big {
    font-size: 17px;
    line-height: 18px;
    margin-top: 60px;
  }
  .modal-zdrapka-body h2 {
    margin-top: 0;
    font-size: 18px;
    line-height: 18px;
  }
  .modal-title-big {
    font-size: 25px;
    line-height: 25px;
  }

  /** modal zdrapka **/
  .modal-bg-zdrapka {
    height: 120px;
  }
  .container-zdrapka,
  .ezdrapka-container{
    width:100%;
    height:120px;
  }
  .ezdrapka-gratulacje{
    font-size:20px;
  }
  .img-modal-zdrapka {
    max-height: 110px;
  }
  #zdrapka-front{
    width:100%!important;
    height:100%!important;
    border-radius: 30px;
  }
  button.btn-zdrapka,
  button.btn-zdrapka:is(:hover, :active) {
    font-size: 8px;
    line-height: 10px;
    padding: 10px;
  }
}

@media only screen and (max-width: 768px) {
  div.box-konto-content {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 30px;
  }
  div.box-konto-content h2.konto-section-title {
    font-size: 17px;
    line-height: 20px;
    font-weight: normal;
    color: var(--black);
  }
  div.box-konto-content h2.konto-section-title br {
    display: none;
  }
  div.col-konto-b-zap {
    margin-top: 40px;
  }

  /** mobile konto main **/
  .main.home.main-konto {
    padding-bottom: 0;
  }
}

/** pokaż zdrapki mobile **/
div.box-konto-btn-mob {
  display: none;
  position: relative;
  margin-top: 60px;
  margin-bottom: 100px;
  text-align: center;
}
div.box-konto-btn-mob button.btn-red {
  min-width: 160px;
  font-size: 11px;
  line-height: 13px;
}

@media only screen and (max-width: 768px) {
  div.box-konto-btn-mob {
    display: block;
  }
  div.box-konto-zdrapki {
    display: none;
  }
}
.pl30{
  padding-left:30px;
}
.toggle-password{
	position:absolute;
	top:20px;
	right:20px;
	cursor:pointer;	
	background:transparent;
}
.box-login-f-content .toggle-password{
	top:9px;
}
.toggle-password img {
  max-height:24px;
}
.toggle-password > span{
	padding: 0.375rem;
	border-radius:0;
	border:none;
	background:transparent;
}
input[name=haslo]{
	padding-right:40px;
}
.opacity75{
  opacity:0.75;
}