.ezdrapka h1 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 0px;
}

button {
  cursor:pointer;
}

.ezdrapka-step-4 {
  display: none;
}

.ezdrapka-show-scratched {
  color: #fff;
}

.ezdrapka p {
  color: #fff;
}

.ezdrapka.sub {
  color: #8f532e;
  font-weight: 700;
  font-size: 18px;

}

.ezdrapka.modal-box {
  /*max-width: 620px !important;*/ /*Emma przygotowal wezszy nieco, bo w specce nie bylo jeszcze info o domyslnej szerokosci - przetestowac na roznych urzadzeniach*/
}

.ezdrapka.modal-body {
  text-align: center;

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4c0909+0,c62d2f+100 */
  background: #4c0909; /* Old browsers */
  background: -moz-linear-gradient(top, #4c0909 0%, #c62d2f 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #4c0909 0%,#c62d2f 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #4c0909 0%,#c62d2f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c0909', endColorstr='#c62d2f',GradientType=0 ); /* IE6-9 */
}

button.ezdrapka.close-modal, .ezdrapka-form-submit, .ezdrapka.close-instructions {
  background: #fff;
  padding: 15px 40px;
  border: none;
  border-radius: 5px;
  color: #590909;
  font-weight: 700;
  font-size: 24px;
}

.ezdrapka.close-modal{
    color: #fff;
}

.ezdrapka .win-text {
  text-align: center;
  font-size: 16px;
}

.ezdrapka .win-text p {
  font-size: 16px;
}

.ezdrapka.rounded-checkbox{
  -webkit-appearance: none;
     -moz-appearance: none;
     display: inline-block;
     position: relative;
     background-color: #f1f1f1;
     color: #666;
     height: 15px;
     width: 15px;
     border: 0;
     border-radius: 5px;
     cursor: pointer;
     margin-right: 7px;
     outline: none;
}

.ezdrapka.rounded-checkbox:checked
{
     background-color: #c3c3c3;
}

input[type="checkbox"]:checked:after {
    /* Heres your symbol replacement - this is a tick in Unicode. */
    content: "\2713";
    color: #000;
    /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}

input[type=text] {
  width: 100%;
  border-radius: 5px;
  outline: none;
  margin-bottom: 10px;
}

textarea:focus, input:focus, input{
    border-width:0px;
    border:none;
    outline: none;
}

.ezdrapka-step-1, .ezdrapka-step-2, .ezdrapka-step-3 {
  padding-left: 75px;
  padding-right: 75px;
}

.ezdrapka.ezdrapka-instructions {
  background: rgba(0, 0, 0, 0);
}

.win-col-left {
  width: 60%;
  float:left;
}

.win-col-right {
  width: 40%;
  float:left;
}
@media (max-width: 768px) {
  .win-col-left {
    width: 100%;
    float:none;
  }

  .win-col-right {
    width: 100%;
    float:none;
  }

  .ezdrapka-step-1, .ezdrapka-step-2, .ezdrapka-step-3 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ezdrapka.ezdrapka-instructions {
    background: rgba(0, 0, 0, 0.9);
  }
}

table {
  text-align: left;
  color: #fff;
  font-size: 10px
}

.ezdrapka .daneosobowe {
  padding-top: 15px;
  color: #fff;
  font-size: 10px;
  text-align: justify;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #550b0c;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #550b0c;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #550b0c;
}

.ezdrapka.modal-sandbox {
  width: 98% !important;
}