/*custom*/
.w3-allerta {
  font-family: "Allerta Stencil", Sans-serif;
}

.w3-merriweather {
  font-family: "Noto Serif", Verdana, sans-serif;
  font-stretch: ultra-condensed;
  letter-spacing: -1px;
}

.xw3-bottombarx {
  border-bottom: 2px dashed;
}

h5 {
  font-weight: 400;
}


input[type="file"] {
  display: none;
}

.custom-file-upload {
  border: 1px none #ccc;
  display: inline-block;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
}

body {
  background: #f1f1f1 url("../gfx/brand/pliktla.png") no-repeat right top fixed;
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}


.w3-purple,
.w3-hover-purple:hover {
  color: #fff !important;
  background-color: #6B003E !important;
}

.w3-deep-purple,
.w3-hover-deep-purple:hover {
  color: #fff !important;
  background-color: #8C3B96 !important;
}


/* zakladki gorne */
.tab_block {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.tab_number {
  float: left;
  width: 20%;
  height: 47px;
  font-size: 26px;
  padding-top: 5px;
  margin: auto;
}

.tab_name {
  float: left;
  width: 100%;
  font-weight: bold;
  text-align: center;
}

.tab_line_l {
  float: left;
  width: 40%;
  height: 26px;
  border-bottom: 2px solid #8C3B96;
}

.tab_line_x {
  float: left;
  width: 40%;
  height: 26px;
  border-bottom: 2px none #f0f0f0;
}

.tab_number2 {
  float: left;
  width: 20%;
  height: 47px;
  font-size: 18px;
  padding-top: 3px;
  margin: auto;
}

.tab_line_lx {
  float: left;
  width: 40%;
  height: 20px;
  border-bottom: 2px solid #8C3B96;
  overflow: hidden
}

/* tytuly sekcji */
.tytul_0 {
  min-height: 120px;
  color: white;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100%),
    url('../gfx/brand/ap.jpg') 50% 50% no-repeat;
  background-size: cover;
}

.tytul_1 {
  min-height: 120px;
  color: white;
  background: linear-gradient(to right, rgba(140, 59, 150, 1) 0%, #771284 1%, rgba(119, 18, 132, 0.9) 11%, rgba(119, 18, 132, 0.7) 35%, rgba(198, 65, 196, 0.41) 53%, rgba(214, 90, 215, 0) 78%, rgba(229, 112, 231, 0) 100%),
    url('../gfx/brand/ap.jpg') 50% 10% no-repeat;
  background-size: cover;
}

.tytul_2 {
  min-height: 120px;
  color: white;
  background: linear-gradient(to right, rgb(33, 64, 154) 0%, rgb(33, 64, 154) 1%, rgba(33, 64, 154, 0.9) 11%, rgba(33, 64, 154, 0.7) 35%, rgba(33, 64, 154, 0.41) 53%, rgba(214, 90, 215, 0) 78%, rgba(229, 112, 231, 0) 100%),
    url('../gfx/brand/ap.jpg') 50% 100% no-repeat;
  background-size: cover;
}

.tytul_3 {
  min-height: 120px;
  color: white;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100%),
    url('../gfx/brand/uslogin.jpg') 50% 30% no-repeat;
  background-size: cover;
}

.tytul_4 {
  min-height: 120px;
  color: white;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100%),
    url('../gfx/brand/phone.jpg') 50% 50% no-repeat;
  background-size: cover;
}

.tytul_5 {
  min-height: 120px;
  color: white;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 12%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0) 100%),
    url('../gfx/brand/people.jpg') 50% 50% no-repeat;
  background-size: cover;
}

.tytul_6 {
  min-height: 120px;
  color: #ffffff;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.45) 80%, rgba(0, 0, 0, 0) 100%),
    url('../gfx/brand/ap.jpg') 50% 80% no-repeat;
  background-size: cover;
}

.sentenceCase {
  text-transform: lowercase;
}

.sentenceCase:first-letter {
  text-transform: uppercase;
}

/*progress bar,  prev&next buttons */

input {
  padding: 10px;
  width: 100%;
  border: 1px solid #aaaaaa;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color:#ffdddd; 
 }

input.invalid2 {
  background-color: #ffdddd;
  border: 1px solid #f12222!important;
  color: #fff;
}

textarea.invalid {
  background-color: #ffdddd!important;
}

select.invalid {
  background-color: #ffdddd!important;
}


/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 6px;
  cursor: pointer;
}

button:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #4CAF50;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 30px;
  width: 30px;
  border: 2px none white;
  font-family: "Allerta Stencil", Sans-serif;
  background-color: #bbbbbb;
  border: 2px none #114466;
  border-radius: 100%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  height: 30px;
  width: 30px;
  opacity: 1;
  border: 2px solid #771284;
  color: #771284;
  background-color: #ffffff;
  position: relative;
  top: -1px;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #16b41c;
  border: 2px none #114466;
  color: white;
  opacity: 1;
}

/* Make circles that indicate the steps of the form mobile: */
.step_s {
  height: 30px;
  width: 30px;
  border: 2px none white;
  font-size: 18px;
  background-color: #bbbbbb;
  border: 2px none #114466;
  border-radius: 100%;
  display: inline-block;
  opacity: 0.5;
}

.step_s.active {
  height: 30px;
  width: 30px;
  font-size: 18px;
  opacity: 1;
  border: 2px solid #771284;
  color: #771284;
  background-color: #ffffff;
}

/* Mark the steps that are finished and valid: */
.step_s.finish {
  background-color: #4CAF50;
  border: 2px none #114466;
  color: white;
  opacity: 1;
}

.w3-ltblue,
.w3-hover-ltblue:hover {
  color: #0064aa !important;
  background-color: #eff5fc !important
}

.w3-text-ltblue,
.w3-hover-text-ltblue:hover {
  color: #eff5fc !important
}

.w3-border-ltblue,
.w3-hover-border-ltblue:hover {
  border-color: #eff5fc !important
}

.w3-input {
  padding: 0px 10px;
}

.w3-select {
  padding: 1px 0;
  height: auto;
  width: 50%;
}

@media screen and (min-width: 601px) and (max-width:992px) {
  .textbl {
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media screen and (min-width: 993px) {
  .textbl {
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

.truncate {
  display: block;
  text-align: left;
  white-space: nowrap;
  width: 250px;
  overflow: hidden;
  text-overflow: "*";
}



@media screen and (max-width: 1240px) {
  .scraper {
    display: none;
  }
}

a:link {
  text-decoration: none;
}

.maxw {
  padding: 0;
  margin: 0 auto;
  text-align: center;
  max-width: 1242px;
}


.shad1 {
  -webkit-filter: drop-shadow(5px 5px 5px #222);
  filter: drop-shadow(5px 5px 5px #222);
}

.shad2 {
  -webkit-filter: drop-shadow(1px 1px 1px #666);
  filter: drop-shadow(1px 1px 1px #666);
  text-shadow: 1px 1px 1px #666;
}

.shad3 {
  -webkit-filter: drop-shadow(1px 1px 0px #fff);
  filter: drop-shadow(1px 1px 0px #fff);
}

.shad4 {
  -webkit-filter: drop-shadow(1px 1px 0px #111);
  filter: drop-shadow(1px 1px 0px #111);
}

.shad5 {
  text-shadow: 2px 2px 2px #000000, 2px 2px 4px #0a0a0a;
}



/* The custom input radio */
.contradio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.contradio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.chckmradio {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #cacaca;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.contradio:hover input~.chckmradio {
  background-color: #a5a5a5;
}

/* When the radio button is checked, add a blue background */
.contradio input:checked~.chckmradio {
  background-color: #8C3B96;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.chckmradio:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.contradio input:checked~.chckmradio:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.contradio .chckmradio:after {

  top: 9px;
  left: 9px;
  width: 0px;
  height: 8px;
  border-radius: 50%;
  background: white;

}

/* The custom input checkbox */
.contcheck {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /*font-size: 18px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.contcheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.chckmcheck {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #cacaca;
}

/* On mouse-over, add a grey background color */
.contcheck:hover input~.chckmcheck {
  background-color: #a5a5a5;
}

/* When the checkbox is checked, add a blue background */
.contcheck input:checked~.chckmcheck {
  background-color: #8C3B96;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chckmcheck:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.contcheck input:checked~.chckmcheck:after {
  display: block;
}

/* Style the checkmark/indicator */
.contcheck .chckmcheck:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


.xsoftoback1 {
  -webkit-box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
  -moz-box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
  box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
}

.-xsoftoback2 {
  -webkit-box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
  -moz-box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
  box-shadow: 0px 0px 25px 10px #ffffff inset, 500px 0px 25px 10px #832e96 inset;
}


.-bkgover1 {
  -webkit-box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
  -moz-box-shadow: 0px 0px 25px 10px #ffffff inset, 0px 0px 25px 15px #ffffff inset;
  box-shadow: 0px 0px 25px 10px #ffffff inset, 500px 0px 25px 10px #832e96 inset;
}

.frame {
  transition: transform .2s;
}

/* Animation // border:5px solid #fff;*/
.frame:hover {
  transform: scale(1.2);
  /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.framemor {
  transition: transform .2s;
}

/* Animation // border:5px solid #fff;*/
.framemor:hover {
  transform: scale(2.0);
  /* (200% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.bg-pan-top {
  animation: bg-pan-top 5s infinite alternate forwards;
}

@keyframes bg-pan-top {
  0% {
    background-position: 50% 80%;
  }

  100% {
    background-position: 50% 10%;
  }
}

.bg-pan-topone {
  animation: bg-pan-top 5s ease-in-out 1 normal forwards;
}

@keyframes bg-pan-top {
  0% {
    background-position: 50% 90%;
  }

  100% {
    background-position: 50% 10%;
  }
}

.bg-pan-right {
  animation: bg-pan-right 5s infinite alternate backwards;
}

@keyframes bg-pan-right {
  0% {
    background-position: 50% 50%;
  }

  100% {
    background-position: 10% 50%;
  }
}

.ico1, .ico2, .ico3, .ico4 {
  height:220px;
  transition: background-image 0.5s;
  background-repeat: no-repeat;
  background-size: 180px 180px;
  background-position: center top;
  background-origin: content-box;
}
.ico1 {	 background-image:linear-gradient(to right,  rgba(248, 249, 250, 0.7) 0%, rgba(244, 244, 246, 0.488) 53%),  url('../gfx/icons/ico1b.jpg'); }
.ico2 {	 background-image:linear-gradient(to right,  rgba(248, 249, 250, 0.7) 0%, rgba(244, 244, 246, 0.488) 53%),  url('../gfx/icons/ico2b.jpg'); }
.ico3 {	 background-image:linear-gradient(to right,  rgba(248, 249, 250, 0.7) 0%, rgba(244, 244, 246, 0.488) 53%),  url('../gfx/icons/ico3b.jpg'); }
.ico4 {	 background-image:linear-gradient(to right,  rgba(248, 249, 250, 0.7) 0%, rgba(244, 244, 246, 0.488) 53%),  url('../gfx/icons/ico4b.jpg'); }
.ico1:hover {    background-image: url('../gfx/icons/ico1b.jpg');}
.ico2:hover {    background-image: url('../gfx/icons/ico2b.jpg');}
.ico3:hover {    background-image: url('../gfx/icons/ico3b.jpg');}
.ico4:hover {    background-image: url('../gfx/icons/ico4b.jpg');}
.flink  {   color:black; text-transform: uppercase; text-shadow: #666;}
.flink:hover { color:#0052c2;}