@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700&subset=latin-ext");
html, body {
  height: 100%; }

body {
  width: 100%;
  display: block;
  font-family: 'Noto Sans', sans-serif; }
  @media (min-width: 1024px) {
    body {
      background-image: url("../images/bg.jpg");
      background-position: center center;
      -webkit-background-size: cover;
      background-size: cover;
      background-attachment: fixed; } }
  @media (max-width: 767px) {
    body {
      background-color: #f0f0f0; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    body {
      background-color: #f0f0f0; } }

.transition-250, .addcode-content form input[type=password], .addcode-content form input[type=text], .addcode-content form input[type=email], .iqos-btn, .hp-content .back-to, .intro-content .quest-line .watch-btn, .intro-content .quest-line .watch-span, .video-content .play-icon, .video-content .reload-icon, .quest-content .back-to, .gratulace-content .large-iqos-btn, .mega-iqos-btn, .modal-content .modal-btn, .quest-2 .q-btn, .quest-3 .q3-img, .quest-4 .q-btn, .quester-done .btn, .dot1-content .quester1 .q-options .circle-container .wheel, .dot1-content .quester2 .counter-bar-left, .dot1-content .quester2 .counter-bar-right, .dot2-content .quester2 .q-options .circle-container .wheel, .dot2-content .quester3 .counter-bar-left, .dot2-content .quester3 .counter-bar-right, .dot3-content .quester3 .counter-bar-left, .dot3-content .quester3 .counter-bar-right, .dot3-content .quester2 .q-options .circle-container .wheel, .dot3-content .counter-bar-left, .dot3-content .counter-bar-right, .option-box {
  -webkit-transition: all 250ms;
  -moz-transition: all 250ms;
  -ms-transition: all 250ms;
  -o-transition: all 250ms;
  transition: all 250ms; }

.horizontal-center, .addcode-content .blue-tooltip, .iqos-btn, .get-heets-box .heats-boxes, .container2, .gratulace-content .under-top, .gratulace-content .heets-big-img, .gratulace-content .large-iqos-btn, .gratulace-content .bottom-dark-link, .gratulace-content .data-size-content, .captcha-content, .iqos-way, footer .f-info, .agecheck-place .age-container, .agecheck-place .a-logo, .agecheck-place .first-p, .agecheck-place .g-line, .mega-iqos-btn, .modal-content .modal-btn, .modal-content .modal-link, .quest-2, .quest-2 .q2-alert, .quest-2 .q2-a-img, .quest-2 .q2-b-img, .quest-2 .q2-c-img, .quest-2 .q-btn, .quest-2 .q2-bar, .quest-3, .quest-3 .q3-img, .quest-3 .q3-alert, .quest-4, .quest-4 .q2-alert, .quest-4 .q4-bar, .quest-4 .q4-alert, .quest-4 .q4-buttons, .gratulace-alert, .inff3, .rozcestnik-a, .under-top2, .notfound-place .age-container, .notfound-place .a-logo, .notfound-place .first-p, .notfound-place .g-line, .dot1-content .quester1 .q-options, .dot2-content .quester2 .q-options, .dot3-content .quester2 .q-options {
  display: block;
  margin-left: auto;
  margin-right: auto; }

p, span, a, h1, h2, h3, input, label, button {
  font-family: 'Noto Sans', sans-serif; }

nav {
  min-height: 95px;
  background-color: #fff;
  padding: 10px 40px;
  flex: none;
  -o-flex: none;
  -moz-flex: none;
  -webkit-flex: none;
  -webkit-box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 5px 18px 0px rgba(0, 0, 0, 0.1);
  width: 100%;
  overflow-x: hidden; }
  @media (max-width: 767px) {
    nav {
      padding: 10px 0px 0px 0px;
      min-height: 45px; } }
  nav .nav-container .logo {
    width: 100%;
    max-width: 200px;
    margin-top: 13px; }
    @media (max-width: 767px) {
      nav .nav-container .logo {
        max-width: 100px;
        margin-top: 0px;
        display: block;
        margin-right: auto;
        margin-left: 15px; } }
  nav .nav-container .login-link {
    color: #308ce3;
    text-decoration: underline;
    font-weight: 300;
    float: right;
    margin-top: 29px; }
    @media (max-width: 767px) {
      nav .nav-container .login-link {
        margin-top: 3px;
        font-size: 11px;
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%; } }
  nav .nav-container .logout-icon {
    float: right;
    margin-top: 19px;
    width: 30px;
    height: 40px; }
    @media (max-width: 767px) {
      nav .nav-container .logout-icon {
        margin-top: 7px;
        width: 20px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      nav .nav-container .logout-icon {
        margin-top: 24px;
        width: 22px; } }
  @media (max-width: 767px) {
    nav .nav-container .user-info-place {
      display: block;
      width: 214px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 40px;
      margin-top: -8px; } }
  @media (max-width: 767px) {
    nav .nav-container .user-info-place-2 {
      display: block;
      width: 50px;
      margin-left: auto;
      padding-bottom: 0px;
      margin-top: -9px; } }
  nav .nav-container .user-info-place-2 img {
    margin-right: 15px; }
    @media (min-width: 768px) and (max-width: 1023px) {
      nav .nav-container .user-info-place-2 img {
        display: none; } }
    @media (min-width: 1024px) {
      nav .nav-container .user-info-place-2 img {
        display: none; } }
  nav .nav-container .user-email {
    font-size: 18px;
    color: #dcdcdc;
    float: right;
    font-weight: 400;
    margin-right: 18px;
    margin-top: 14px;
    text-align: right;
    line-height: 1.3; }
    @media (max-width: 767px) {
      nav .nav-container .user-email {
        font-size: 16px;
        color: #dcdcdc;
        float: right;
        font-weight: 400;
        margin-right: 14px;
        margin-top: 9px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      nav .nav-container .user-email {
        font-size: 15px;
        color: #dcdcdc;
        float: right;
        font-weight: 400;
        margin-right: 10px;
        margin-top: 19px; } }

.addcode-content {
  padding-top: 80px;
  padding-bottom: 50px; }
  @media (max-width: 767px) {
    .addcode-content {
      padding-top: 20px; } }
  .addcode-content h1 {
    font-size: 50px;
    font-weight: 300;
    color: #308ce3;
    margin-top: 0px; }
    @media (max-width: 767px) {
      .addcode-content h1 {
        font-size: 32px; } }
  .addcode-content .under-h1 {
    color: #707070;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 30px;
    margin-top: 15px; }
    @media (max-width: 767px) {
      .addcode-content .under-h1 {
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 20px; } }
  .addcode-content form {
    width: 100%;
    max-width: 356px;
    display: block;
    margin-left: auto;
    margin-right: auto; }
    .addcode-content form label {
      display: block;
      color: #707070;
      font-weight: 400;
      font-size: 19px;
      text-align: center;
      text-transform: uppercase;
      margin-bottom: 10px; }
      @media (max-width: 767px) {
        .addcode-content form label {
          font-size: 15px; } }
    .addcode-content form input[type=password], .addcode-content form input[type=text], .addcode-content form input[type=email] {
      width: 354px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      font-weight: 400;
      height: 65px;
      margin-bottom: 25px;
      background-color: #fff;
      text-align: center;
      color: #707070;
      font-size: 22px;
      -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.24);
      -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.24);
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.24);
      border: 0px solid transparent; }
      @media (max-width: 767px) {
        .addcode-content form input[type=password], .addcode-content form input[type=text], .addcode-content form input[type=email] {
          width: 270px;
          display: block;
          margin-left: auto;
          margin-right: auto;
          height: 50px;
          margin-bottom: 15px;
          background-color: #fff;
          text-align: center;
          color: #707070;
          font-size: 18px; } }
      .addcode-content form input[type=password]:focus, .addcode-content form input[type=password]:hover, .addcode-content form input[type=text]:focus, .addcode-content form input[type=text]:hover, .addcode-content form input[type=email]:focus, .addcode-content form input[type=email]:hover {
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.51);
        -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.51);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.51);
        outline: none; }
  .addcode-content .blue-tooltip {
    color: #308ce3;
    text-decoration: underline;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 40px; }
  .addcode-content .psw-info {
    font-size: 13px;
    color: #707070;
    text-align: center;
    margin-bottom: 30px;
    display: block; }
  .addcode-content .login-blue-link {
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    color: #308ce3;
    margin-bottom: 20px;
    font-weight: 300;
    text-decoration: underline;
    margin-top: 40px; }
  .addcode-content .mb-30 {
    display: block;
    margin-bottom: 30px; }
  .addcode-content .mt-10 {
    display: block;
    margin-top: 40px; }

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #dcdcdc; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #dcdcdc; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #dcdcdc; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #dcdcdc; }

.iqos-btn {
  width: 100%;
  max-width: 350px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  font-size: 22px;
  height: 64px;
  text-align: center;
  padding: 14px 10px;
  background-color: transparent;
  border: 2px solid #707070;
  color: #707070;
  text-transform: uppercase;
  font-weight: 400; }
  @media (max-width: 767px) {
    .iqos-btn {
      font-size: 16px;
      height: 50px;
      padding: 12px 10px; } }
  .iqos-btn:hover, .iqos-btn:focus {
    outline: none;
    border: 2px solid #6cd5ac;
    color: #6cd5ac;
    text-decoration: none; }

.hp-content {
  padding-top: 80px;
  padding-bottom: 40px;
  position: relative; }
  @media (max-width: 767px) {
    .hp-content {
      padding-top: 20px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .hp-content {
      padding-top: 40px; } }
  .hp-content .back-to {
    padding-left: 64px;
    z-index: 105;
    top: 51px;
    margin-bottom: 0px;
    position: absolute;
    color: #707070;
    color: #707070; }
    @media (max-width: 767px) {
      .hp-content .back-to {
        top: 12px;
        padding-left: 0px;
        font-size: 12px;
        text-align: center;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .hp-content .back-to {
        top: 22px;
        padding-left: 0px;
        font-size: 12px;
        text-align: center;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }
    .hp-content .back-to:hover, .hp-content .back-to:focus {
      opacity: 0.8;
      text-decoration: none; }
    .hp-content .back-to img {
      width: 23px; }
      @media (max-width: 767px) {
        .hp-content .back-to img {
          width: 14px; } }
  .hp-content h1 {
    text-align: center;
    font-weight: 300;
    color: #308ce3;
    font-size: 50px;
    margin-bottom: 60px; }
    @media (max-width: 767px) {
      .hp-content h1 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 30px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .hp-content h1 {
        font-size: 30px;
        margin-bottom: 50px; } }
  .hp-content .icon-col {
    position: relative;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 192px;
    margin-bottom: 20px; }
    @media (max-width: 767px) {
      .hp-content .icon-col {
        width: 100%;
        max-width: 100%;
        min-height: 100px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .hp-content .icon-col {
        width: 100%;
        min-height: 100px;
        max-width: 330px; } }
    .hp-content .icon-col .icon-box {
      position: relative;
      width: 100%; }
      @media (max-width: 767px) {
        .hp-content .icon-col .icon-box {
          max-width: 80px;
          float: left;
          margin-right: 10px; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .hp-content .icon-col .icon-box {
          max-width: 80px;
          float: left;
          margin-right: 10px; } }
      .hp-content .icon-col .icon-box .circle {
        width: 100%;
        margin-bottom: 15px; }
      .hp-content .icon-col .icon-box .arrow {
        position: absolute;
        right: -32%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%); }
        @media (max-width: 767px) {
          .hp-content .icon-col .icon-box .arrow {
            top: 88px;
            width: 12px;
            left: 34px;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg); } }
        @media (min-width: 768px) and (max-width: 1023px) {
          .hp-content .icon-col .icon-box .arrow {
            top: 88px;
            width: 12px;
            left: 34px;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg); } }
        @media only screen and (max-width: 1199px) {
          .hp-content .icon-col .icon-box .arrow {
            right: -18%; } }
  .hp-content .top {
    font-size: 14px;
    font-weight: 600;
    color: #308ce3;
    text-transform: uppercase; }
    @media (max-width: 767px) {
      .hp-content .top {
        margin-bottom: 0px;
        font-weight: 400;
        text-align: left; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .hp-content .top {
        margin-bottom: 0px;
        font-weight: 400;
        text-align: left; } }
  .hp-content .bottom {
    font-size: 16px;
    color: #707070;
    font-weight: 300; }
    @media (max-width: 767px) {
      .hp-content .bottom {
        font-size: 14px;
        text-align: left; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .hp-content .bottom {
        font-size: 14px;
        text-align: left; } }

.zacit-hp {
  margin-top: 30px;
  margin-bottom: 30px; }

.get-heets-box {
  padding: 0px 15px;
  margin-bottom: 50px; }
  @media (max-width: 767px) {
    .get-heets-box {
      margin-bottom: 0px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .get-heets-box {
      max-width: 330px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px; } }
  .get-heets-box .heats-boxes {
    max-width: 252px;
    width: 100%;
    margin-top: 33px;
    margin-bottom: 53px; }
    @media (max-width: 767px) {
      .get-heets-box .heats-boxes {
        max-width: 222px;
        width: 100%;
        margin-top: 40px;
        margin-bottom: 0px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .get-heets-box .heats-boxes {
        margin-bottom: 20px; } }

.get-heets-box p {
  text-align: center !important; }

.intro-content {
  padding-top: 80px;
  overflow: hidden;
  padding-bottom: 40px; }
  @media (max-width: 767px) {
    .intro-content {
      padding-top: 20px; } }
  .intro-content h1 {
    font-size: 50px;
    font-weight: 300;
    color: #308ce3;
    margin-top: 0px;
    margin-bottom: 15px; }
    @media (max-width: 767px) {
      .intro-content h1 {
        font-size: 32px;
        margin-bottom: 25px; } }
  .intro-content h4 {
    font-size: 14px;
    font-weight: bold;
    color: #308ce3; }
  .intro-content .quest-line {
    margin-bottom: 50px;
    position: relative;
    padding-right: 60px;
    max-width: 635px;
    display: block;
    margin-left: auto;
    margin-right: auto; }
    @media (max-width: 767px) {
      .intro-content .quest-line {
        padding-right: 0px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .intro-content .quest-line {
        padding-right: 0px; } }
    .intro-content .quest-line .circle-icon {
      width: 100%;
      max-width: 142px;
      margin-bottom: 10px; }
      @media (max-width: 767px) {
        .intro-content .quest-line .circle-icon {
          display: block;
          margin-right: auto;
          margin-left: auto;
          max-width: 110px; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .intro-content .quest-line .circle-icon {
          display: block;
          margin-right: auto;
          margin-left: auto;
          max-width: 110px; } }
    .intro-content .quest-line .name {
      font-size: 19px;
      color: #308ce3;
      text-transform: uppercase;
      font-weight: normal; }
      @media (max-width: 767px) {
        .intro-content .quest-line .name {
          text-align: center;
          font-size: 16px; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .intro-content .quest-line .name {
          text-align: center;
          font-size: 16px; } }
    .intro-content .quest-line .name-last {
      margin-top: 40px; }
    .intro-content .quest-line .desc {
      font-size: 16px;
      color: #707070;
      font-weight: 300;
      margin-bottom: 10px; }
      @media (max-width: 767px) {
        .intro-content .quest-line .desc {
          text-align: center; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .intro-content .quest-line .desc {
          text-align: center; } }
    .intro-content .quest-line .watch-btn {
      width: 100%;
      max-width: 212px;
      font-size: 15px;
      font-weight: 400;
      height: 44px;
      padding: 10px 12px;
      background-color: transparent;
      text-align: center;
      border: 2px solid #707070;
      color: #707070;
      display: block;
      text-transform: uppercase; }
      @media (max-width: 767px) {
        .intro-content .quest-line .watch-btn {
          display: block;
          margin-left: auto;
          margin-right: auto; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .intro-content .quest-line .watch-btn {
          display: block;
          margin-left: auto;
          margin-right: auto; } }
      .intro-content .quest-line .watch-btn:hover, .intro-content .quest-line .watch-btn:focus {
        outline: none;
        border: 2px solid #308ce3;
        color: #308ce3;
        text-decoration: none; }
    .intro-content .quest-line .watch-span {
      width: 100%;
      max-width: 200px;
      font-size: 15px;
      font-weight: 400;
      height: 44px;
      padding: 10px 12px;
      background-color: transparent;
      text-align: center;
      border: 2px solid #dcdcdc;
      color: #dcdcdc;
      display: block;
      text-transform: uppercase; }
      @media (max-width: 767px) {
        .intro-content .quest-line .watch-span {
          display: block;
          margin-left: auto;
          margin-right: auto; } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .intro-content .quest-line .watch-span {
          display: block;
          margin-left: auto;
          margin-right: auto; } }
      .intro-content .quest-line .watch-span:hover, .intro-content .quest-line .watch-span:focus {
        outline: none;
        border: 2px solid #dcdcdc;
        color: #dcdcdc;
        text-decoration: none; }
    .intro-content .quest-line .done-sign {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      right: 8px;
      background-image: url("../images/success.svg");
      background-position: 0px 0px;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      display: block; }
      .intro-content .quest-line .done-sign p {
        display: none; }
      @media (max-width: 767px) {
        .intro-content .quest-line .done-sign {
          top: 55px;
          left: 50%;
          -webkit-transform: translate(50%, -50%);
          -moz-transform: translate(50%, -50%);
          -ms-transform: translate(50%, -50%);
          -o-transform: translate(50%, -50%);
          transform: translate(50%, -50%); } }
      @media (min-width: 768px) and (max-width: 1023px) {
        .intro-content .quest-line .done-sign {
          top: 55px;
          left: 50%;
          -webkit-transform: translate(50%, -50%);
          -moz-transform: translate(50%, -50%);
          -ms-transform: translate(50%, -50%);
          -o-transform: translate(50%, -50%);
          transform: translate(50%, -50%); } }
  .intro-content .quest-line-now .done-sign {
    background-image: none;
    background-color: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #dcdcdc; }
    @media (max-width: 767px) {
      .intro-content .quest-line-now .done-sign {
        background-color: #f9f9f9; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .intro-content .quest-line-now .done-sign {
        background-color: #f9f9f9; } }
    .intro-content .quest-line-now .done-sign p {
      display: block;
      font-size: 20px;
      text-align: center;
      margin-bottom: 0px;
      color: #dcdcdc;
      position: relative;
      top: 11px; }
  .intro-content .quest-line-noactive .circle-icon {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%); }
  .intro-content .quest-line-noactive .name {
    color: #707070; }
  .intro-content .quest-line-noactive .watch-btn {
    color: #dcdcdc;
    border: 2px solid #dcdcdc; }
  .intro-content .quest-line-noactive .done-sign {
    background-image: none;
    background-color: transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #dcdcdc; }
    @media (max-width: 767px) {
      .intro-content .quest-line-noactive .done-sign {
        background-color: #f9f9f9; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .intro-content .quest-line-noactive .done-sign {
        background-color: #f9f9f9; } }
    .intro-content .quest-line-noactive .done-sign p {
      display: block;
      font-size: 20px;
      text-align: center;
      margin-bottom: 0px;
      color: #dcdcdc;
      position: relative;
      top: 11px; }

.container2 {
  width: 100%;
  max-width: 1300px;
  padding: 0px 10px; }
  @media (max-width: 767px) {
    .container2 {
      padding: 0px 15px; } }

.video-content {
  display: block;
  width: 100%;
  position: relative; }
  @media (max-width: 767px) {
    .video-content {
      padding-top: 10px; } }
  .video-content .p1 {
    text-align: center;
    color: #fff;
    font-size: 14px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 70px; }
    @media (max-width: 767px) {
      .video-content .p1 {
        position: relative;
        text-align: center;
        color: #308ce3;
        top: 5px; } }
  .video-content .p2 {
    text-align: center;
    color: #fff;
    font-size: 50px;
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 96px;
    text-transform: uppercase; }
    @media (max-width: 767px) {
      .video-content .p2 {
        position: relative;
        text-align: center;
        top: 0px;
        color: #308ce3;
        font-size: 18px;
        left: 0px;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%); } }
  .video-content .play-icon, .video-content .reload-icon {
    position: absolute;
    max-width: 180px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 99; }
    @media (max-width: 767px) {
      .video-content .play-icon, .video-content .reload-icon {
        -webkit-transform: translate(-50%, -40%);
        -moz-transform: translate(-50%, -40%);
        -ms-transform: translate(-50%, -40%);
        -o-transform: translate(-50%, -40%);
        transform: translate(-50%, -40%);
        max-width: 80px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .video-content .play-icon, .video-content .reload-icon {
        max-width: 130px; } }
    .video-content .play-icon:hover, .video-content .reload-icon:hover, .video-content .play-icon:focus, .video-content .reload-icon:focus {
      cursor: pointer;
      -webkit-transform: translate(-50%, -50%) scale(1.1);
      -moz-transform: translate(-50%, -50%) scale(1.1);
      -ms-transform: translate(-50%, -50%) scale(1.1);
      -o-transform: translate(-50%, -50%) scale(1.1);
      transform: translate(-50%, -50%) scale(1.1); }
  .video-content .reload-icon {
    display: none; }

.videoQuest {
  width: 100%; }

.quest-content {
  display: none;
  position: relative;
  padding-top: 30px;
  padding-bottom: 120px; }
  @media (max-width: 767px) {
    .quest-content {
      padding-top: 0px;
      padding-bottom: 20px; } }
  .quest-content .back-to {
    padding-left: 64px;
    z-index: 105;
    top: 51px;
    margin-bottom: 0px;
    position: absolute;
    color: #707070;
    color: #707070; }
    @media (max-width: 767px) {
      .quest-content .back-to {
        position: relative;
        top: 0px;
        padding-left: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: center; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-content .back-to {
        position: relative;
        top: 0px;
        padding-left: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: center; } }
    .quest-content .back-to:hover, .quest-content .back-to:focus {
      opacity: 0.8;
      text-decoration: none; }
    .quest-content .back-to img {
      width: 23px; }
  .quest-content h2 {
    font-size: 26px;
    color: #308ce3;
    text-transform: uppercase; }
    @media (max-width: 767px) {
      .quest-content h2 {
        font-size: 18px; } }
  .quest-content .under-h2 {
    font-size: 20px;
    color: #308ce3;
    font-weight: 300; }
    @media (max-width: 767px) {
      .quest-content .under-h2 {
        font-size: 14px; } }

.gratulace-content {
  padding-top: 80px;
  padding-bottom: 60px; }
  @media (max-width: 767px) {
    .gratulace-content {
      padding-top: 20px; } }
  .gratulace-content h1 {
    font-size: 50px;
    font-weight: 300;
    color: #308ce3;
    margin-top: 0px;
    margin-bottom: 40px; }
    @media (max-width: 767px) {
      .gratulace-content h1 {
        font-size: 32px;
        margin-bottom: 20px; } }
  .gratulace-content .under-top {
    width: 100%;
    margin-top: 20px;
    max-width: 520px;
    text-align: center;
    color: #707070;
    font-size: 20px;
    font-weight: 300;
    margin-bottom: 0px; }
    @media (max-width: 767px) {
      .gratulace-content .under-top {
        font-size: 16px; } }
    .gratulace-content .under-top a {
      color: #707070 !important; }
  .gratulace-content .heets-big-img {
    width: 100%;
    max-width: 330px;
    -webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.18);
    -moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.18);
    margin-top: 30px;
    margin-bottom: 50px; }
  .gratulace-content .large-iqos-btn {
    width: 100%;
    max-width: 500px;
    font-weight: 400;
    font-size: 22px;
    min-height: 64px;
    padding: 14px 10px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: transparent;
    border: 2px solid #707070;
    text-align: center;
    color: #707070;
    text-transform: uppercase;
    margin-bottom: 24px; }
    @media (max-width: 767px) {
      .gratulace-content .large-iqos-btn {
        font-size: 18px;
        min-height: 57px; } }
    .gratulace-content .large-iqos-btn:hover, .gratulace-content .large-iqos-btn:focus {
      outline: none;
      border: 2px solid #6cd5ac;
      color: #6cd5ac;
      text-decoration: none; }
  .gratulace-content .bottom-dark-link {
    font-size: 20px;
    color: #707070;
    font-weight: 300;
    text-align: center;
    text-decoration: underline;
    margin-top: 50px; }
    @media (max-width: 767px) {
      .gratulace-content .bottom-dark-link {
        margin-top: 30px;
        font-size: 16px; } }
  .gratulace-content .code-content {
    padding: 10px;
    max-width: 360px;
    width: 100%;
    display: block;
    margin: 30px auto;
    border: 2px solid #e7e7e7; }
    .gratulace-content .code-content span {
      text-align: center;
      display: block;
      margin: 0px auto;
      font-size: 16px;
      color: #707070; }
    .gratulace-content .code-content p {
      margin-bottom: 0px;
      color: #308ce3;
      font-size: 26px;
      text-transform: uppercase;
      font-weight: bold; }
  .gratulace-content .data-size-content {
    max-width: 520px;
    width: 100%;
    margin-top: 20px; }
    .gratulace-content .data-size-content .circle-num {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border: 1px solid #e7e7e7;
      display: block;
      margin-bottom: 22px;
      font-size: 22px;
      text-align: center;
      color: #707070;
      padding-top: 3px;
      margin-left: auto;
      margin-right: auto; }
      @media (max-width: 767px) {
        .gratulace-content .data-size-content .circle-num {
          margin-bottom: 5px; } }
    .gratulace-content .data-size-content .circle-p {
      margin-bottom: 22px;
      margin-top: 7px;
      font-size: 18px;
      color: #707070; }
      @media (max-width: 767px) {
        .gratulace-content .data-size-content .circle-p {
          text-align: center; } }
      .gratulace-content .data-size-content .circle-p a {
        color: #707070;
        font-weight: bold;
        text-decoration: underline; }
    .gratulace-content .data-size-content .end-p {
      margin-top: 30px;
      color: #707070;
      font-size: 16px;
      line-height: 1.8; }
      @media (max-width: 767px) {
        .gratulace-content .data-size-content .end-p {
          text-align: center; } }

/* The container */
.checkboxcontainer {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #707070;
  font-weight: 400;
  margin-top: 35px;
  margin-bottom: 40px !important;
  display: block;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto; }
  @media (max-width: 767px) {
    .checkboxcontainer {
      font-size: 20px !important; } }

@media (max-width: 767px) {
  .agecheck-form {
    max-width: 287px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden; } }
.agecheck-form label {
  text-transform: none !important; }

/* Hide the browser's default checkbox */
.checkboxcontainer input {
  position: absolute;
  opacity: 0; }

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

/* On mouse-over, add a grey background color */
.checkboxcontainer:hover input ~ .checkmark {
  background-color: #808080; }

/* When the checkbox is checked, add a blue background */
.checkboxcontainer input:checked ~ .checkmark {
  background-color: #308ce3; }

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

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

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

.captcha-content {
  margin-bottom: 30px; }
  .captcha-content .g-recaptcha {
    display: block;
    max-width: 305px;
    margin-left: auto;
    margin-right: auto; }

.alert-msg {
  font-size: 16px !important;
  text-transform: none !important;
  font-weight: 400;
  margin-top: -10px;
  text-align: center; }

.has-problem label {
  color: #D84315 !important; }
.has-problem input {
  margin-top: 10px;
  border: 1px solid #D84315 !important; }
.has-problem .alert-msg {
  color: #D84315 !important; }

.has-success label {
  color: #4CAF50 !important; }
.has-success input {
  margin-top: 10px;
  border: 1px solid #4CAF50 !important; }
.has-success .alert-msg {
  color: #4CAF50 !important; }

.captcha-alert {
  margin-top: 10px; }

.alert {
  border-radius: 0px !important; }

.iqos-way {
  width: 372px;
  height: 45px;
  margin-top: 15px;
  margin-bottom: 10px;
  -webkit-transform: translateX(24px);
  -moz-transform: translateX(24px);
  -ms-transform: translateX(24px);
  -o-transform: translateX(24px);
  transform: translateX(24px); }
  @media (max-width: 767px) {
    .iqos-way {
      -webkit-transform: translateX(13px) scale(0.6);
      -moz-transform: translateX(13px) scale(0.6);
      -ms-transform: translateX(13px) scale(0.6);
      -o-transform: translateX(13px) scale(0.6);
      transform: translateX(13px) scale(0.6);
      display: none; } }
  @media (width: 320px) {
    .iqos-way {
      -webkit-transform: translateX(-5px) scale(0.6);
      -moz-transform: translateX(-5px) scale(0.6);
      -ms-transform: translateX(-5px) scale(0.6);
      -o-transform: translateX(-5px) scale(0.6);
      transform: translateX(-5px) scale(0.6);
      display: none; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .iqos-way {
      -webkit-transform: translateX(-5px) scale(0.6);
      -moz-transform: translateX(-5px) scale(0.6);
      -ms-transform: translateX(-5px) scale(0.6);
      -o-transform: translateX(-5px) scale(0.6);
      transform: translateX(-5px) scale(0.6);
      display: none; } }
  .iqos-way span {
    width: 53px;
    height: 45px;
    display: block;
    float: left;
    background-position: 0px 0px;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative; }
  .iqos-way .sign-1 {
    left: -4px;
    background-image: url("../images/sign-1-off.svg"); }
  .iqos-way .sign-1.done {
    background-image: url("../images/sign-1.svg"); }
  .iqos-way .sign-1.waiting {
    background-image: url("../images/sign-1-waiting.svg"); }
  .iqos-way .sign-2 {
    left: -8px;
    background-image: url("../images/sign-2-off.svg"); }
  .iqos-way .sign-2.done {
    background-image: url("../images/sign-2.svg"); }
  .iqos-way .sign-2.waiting {
    background-image: url("../images/sign-2-waiting.svg"); }
  .iqos-way .sign-3 {
    left: -12px;
    background-image: url("../images/sign-3-off.svg"); }
  .iqos-way .sign-3.done {
    background-image: url("../images/sign-3.svg"); }
  .iqos-way .sign-3.waiting {
    background-image: url("../images/sign-3-waiting.svg"); }
  .iqos-way .sign-4 {
    left: -16px;
    background-image: url("../images/sign-4-off.svg"); }
  .iqos-way .sign-4.done {
    background-image: url("../images/sign-4.svg"); }
  .iqos-way .sign-4.waiting {
    background-image: url("../images/sign-4-waiting.svg"); }
  .iqos-way .sign-5 {
    left: -20px;
    background-image: url("../images/sign-5-off.svg"); }
  .iqos-way .sign-5.done {
    background-image: url("../images/sign-5.svg"); }
  .iqos-way .sign-5.waiting {
    background-image: url("../images/sign-5-waiting.svg"); }
  .iqos-way .sign-6 {
    left: -24px;
    background-image: url("../images/sign-6-off.svg"); }
  .iqos-way .sign-6.done {
    background-image: url("../images/sign-6.svg"); }
  .iqos-way .sign-6.waiting {
    background-image: url("../images/sign-6-waiting.svg"); }
  .iqos-way .sign-7 {
    left: -28px;
    background-image: url("../images/sign-7-off.svg"); }
  .iqos-way .sign-7.done {
    background-image: url("../images/sign-7.svg"); }
  .iqos-way .sign-7.waiting {
    background-image: url("../images/sign-7-waiting.svg"); }

footer {
  padding: 50px 0px 80px 0px;
  background-color: #fff; }
  @media (max-width: 767px) {
    footer {
      padding: 30px 0px 20px 0px; } }
  footer .f-info {
    width: 100%;
    max-width: 720px;
    text-align: center;
    line-height: 1.7;
    margin-bottom: 60px;
    color: #4b4b4b; }
    @media (max-width: 767px) {
      footer .f-info {
        margin-bottom: 20px; } }
  footer .logo-gray {
    margin-bottom: 10px; }
    @media (max-width: 767px) {
      footer .logo-gray {
        display: block;
        margin-left: auto;
        margin-right: auto; } }
  footer .f-copy {
    color: #b5b5b5; }
    @media (max-width: 767px) {
      footer .f-copy {
        text-align: center; } }
  footer .footer-link {
    float: right;
    color: #b5b5b5;
    font-weight: 600;
    text-transform: uppercase;
    margin-right: 20px; }
    @media (max-width: 767px) {
      footer .footer-link {
        text-align: center;
        display: block;
        margin-bottom: 7px;
        margin-left: auto;
        margin-right: auto;
        width: 100%; } }

.agecheck-place {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  overflow: scroll;
  background-color: #fff; }
  .agecheck-place .age-container {
    width: 100%;
    max-width: 640px;
    padding: 0px 15px;
    margin-top: 200px; }
    @media (max-width: 767px) {
      .agecheck-place .age-container {
        margin-top: 20px; } }
  .agecheck-place .a-logo {
    width: 100%;
    max-width: 200px;
    margin-bottom: 25px; }
    @media (max-width: 767px) {
      .agecheck-place .a-logo {
        max-width: 110px;
        margin-bottom: 15px; } }
  .agecheck-place .first-p {
    font-size: 20px;
    max-width: 400px;
    text-align: center;
    color: #707070;
    font-weight: 300; }
    @media (max-width: 767px) {
      .agecheck-place .first-p {
        font-size: 16px; } }
  .agecheck-place .g-line {
    width: 100px;
    height: 4px;
    background-color: #5d5d62;
    margin-top: 30px;
    margin-bottom: 32px; }
    @media (max-width: 767px) {
      .agecheck-place .g-line {
        height: 3px;
        background-color: #5d5d62;
        margin-top: 20px;
        margin-bottom: 18px; } }
  .agecheck-place .second-p {
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    color: #707070;
    margin-bottom: 50px; }
    @media (max-width: 767px) {
      .agecheck-place .second-p {
        font-size: 18px;
        margin-bottom: 25px; } }
  .agecheck-place .iqos-btn {
    font-weight: 400;
    font-size: 22px;
    width: 190px;
    text-align: center; }
    .agecheck-place .iqos-btn:focus, .agecheck-place .iqos-btn:hover {
      text-decoration: none; }
  .agecheck-place .iqos-btn-l {
    font-weight: 400;
    font-size: 22px;
    width: 100%;
    max-width: 520px;
    text-align: center;
    margin-top: 25px;
    height: 100%;
    min-height: 64px; }
    @media (max-width: 767px) {
      .agecheck-place .iqos-btn-l {
        font-size: 17px; } }
    .agecheck-place .iqos-btn-l:focus, .agecheck-place .iqos-btn-l:hover {
      text-decoration: none; }
  .agecheck-place .mb-20 {
    margin-top: 40px;
    display: block; }
  .agecheck-place .check-buttons {
    margin-bottom: 40px; }
    .agecheck-place .check-buttons .leftis {
      float: right; }
      @media (max-width: 767px) {
        .agecheck-place .check-buttons .leftis {
          float: none;
          font-size: 18px;
          height: 52px;
          margin-bottom: 15px; } }
    .agecheck-place .check-buttons .rightis {
      float: left; }
      @media (max-width: 767px) {
        .agecheck-place .check-buttons .rightis {
          float: none;
          font-size: 18px;
          height: 52px; } }

.disabled-btn {
  color: #dcdcdc;
  border-color: #dcdcdc; }
  .disabled-btn:focus, .disabled-btn:hover {
    color: #dcdcdc;
    border-color: #dcdcdc; }

/* Tooltip */
.qm + .tooltip > .tooltip-inner {
  background-color: #fff !important;
  color: #707070 !important;
  border: 1px solid #707070 !important;
  padding: 5px !important;
  font-size: 16px !important;
  width: 500px !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important; }

/* Tooltip on right */
.qm + .tooltip.bottom > .tooltip-arrow {
  border-right: 0px !important;
  border-left: 0px !important; }

/* Tooltip */
.tt + .tooltip > .tooltip-inner {
  background-color: #fff !important;
  color: #707070 !important;
  border: 1px solid #FF9401 !important;
  padding: 5px !important;
  font-size: 14px !important;
  width: 212px !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important; }

/* Tooltip on right */
.tt + .tooltip.bottom > .tooltip-arrow {
  border-right: 0px !important;
  border-left: 0px !important; }

.email-sent {
  padding: 50px 0px 60px 0px; }
  @media (max-width: 767px) {
    .email-sent {
      padding: 20px 0px 0px 0px; } }
  .email-sent h1 {
    font-size: 42px; }
    @media (max-width: 767px) {
      .email-sent h1 {
        font-size: 26px; } }
  .email-sent .under-h1 {
    font-size: 18px;
    margin-bottom: 50px; }
    @media (max-width: 767px) {
      .email-sent .under-h1 {
        font-size: 15px;
        margin-bottom: 30px; } }

.little-btn {
  width: 230px; }

.nebo-line {
  text-align: center;
  display: block;
  color: #707070;
  font-size: 13px;
  font-weight: 300;
  margin-top: 20px; }
  .nebo-line:before {
    content: "\A";
    width: 100px;
    height: 2px;
    background: #dcdcdc;
    display: inline-block;
    margin: 3px 7px; }
  .nebo-line:after {
    content: "\A";
    width: 100px;
    height: 2px;
    background: #dcdcdc;
    display: inline-block;
    margin: 3px 7px; }

.inf1 {
  text-align: center;
  color: #707070;
  font-size: 19px;
  font-weight: 300; }

.inf2 {
  text-align: center;
  color: #707070;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 20px; }

.mega-iqos-btn {
  width: 100%;
  max-width: 500px;
  font-weight: 400;
  min-height: 64px;
  font-size: 18px;
  padding: 14px 10px;
  background-color: transparent;
  border: 2px solid #707070;
  color: #707070;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  text-transform: uppercase;
  margin-bottom: 24px; }
  .mega-iqos-btn:hover, .mega-iqos-btn:focus {
    outline: none;
    border: 2px solid #6cd5ac;
    color: #6cd5ac; }

.check-mail {
  padding-bottom: 100px; }
  @media (max-width: 767px) {
    .check-mail {
      padding-bottom: 0px; } }

.modal-backdrop {
  background-color: transparent; }

body.modal-open > :not(.modal) {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px); }

.modal-dialog {
  max-width: 450px;
  top: 10%; }
  @media (max-width: 767px) {
    .modal-dialog {
      max-width: 300px;
      display: block;
      margin-left: auto;
      margin-right: auto; } }
  @media (max-width: 767px) {
    .modal-dialog {
      top: 20px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .modal-dialog {
      top: 40px; } }

.modal-large {
  width: 100% !important;
  max-width: 700px !important; }

.modal-header {
  padding: 8px 10px;
  border-bottom: 0px solid #e5e5e5; }

#rightModal .modal-header {
  border-top: 8px solid #6cd6ac; }

#cisteniModal .modal-header {
  border-top: 8px solid #6cd6ac; }

#wrongModal .modal-header {
  border-top: 8px solid #FF9401; }

.modal-content {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  border: 0px solid rgba(0, 0, 0, 0.2); }
  .modal-content h4 {
    font-size: 20px;
    color: #707070;
    font-weight: bold;
    margin-bottom: 30px; }
  .modal-content p {
    font-size: 16px;
    color: #707070;
    margin-top: 25px;
    margin-bottom: 30px; }
  .modal-content .modal-body {
    padding: 15px 50px; }
    @media (max-width: 767px) {
      .modal-content .modal-body {
        padding: 15px 10px; } }
  .modal-content .modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 0px solid #e5e5e5; }
  .modal-content .modal-btn {
    width: 100%;
    max-width: 350px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 16px;
    text-align: center;
    height: 50px;
    padding: 10px 10px;
    background-color: transparent;
    border: 2px solid #707070;
    color: #707070;
    text-transform: uppercase;
    font-weight: 400; }
    .modal-content .modal-btn:hover, .modal-content .modal-btn:focus {
      outline: none;
      border: 2px solid #6cd5ac;
      color: #6cd5ac;
      text-decoration: none; }
  .modal-content .modal-link {
    color: #298ae6;
    text-align: center;
    margin-top: 20px;
    text-decoration: underline; }

.quest-2 {
  padding-top: 20px;
  width: 100%;
  max-width: 750px;
  overflow-x: hidden;
  min-height: 540px;
  padding-bottom: 50px;
  position: relative; }
  @media (max-width: 767px) {
    .quest-2 {
      padding-bottom: 20px;
      padding-top: 5px; } }
  .quest-2 .mt-x {
    margin-top: 20px; }
  .quest-2 .q2-b, .quest-2 .q2-c {
    display: none; }
  .quest-2 h3 {
    font-size: 36px;
    color: #308ce3;
    margin-bottom: 15px; }
    @media (max-width: 767px) {
      .quest-2 h3 {
        font-size: 20px;
        margin-bottom: 5px;
        margin-top: 30px; } }
  .quest-2 .q2-alert {
    opacity: 0;
    width: 100%;
    max-width: 370px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid  #FF9401;
    margin-bottom: 10px; }
    .quest-2 .q2-alert p {
      font-size: 12px;
      color: #707070;
      margin: 0px; }
  .quest-2 .q2-a-img {
    width: 100%;
    max-width: 420px; }
  .quest-2 .q2-b-img {
    position: relative;
    max-width: 100%; }
  .quest-2 .q2-c-img {
    position: relative;
    top: 0px;
    -webkit-transform: rotate(32deg);
    -moz-transform: rotate(32deg);
    -ms-transform: rotate(32deg);
    -o-transform: rotate(32deg);
    transform: rotate(32deg); }
  .quest-2 .q-btn {
    width: 100%;
    max-width: 220px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    height: 50px;
    padding: 10px 10px;
    background-color: transparent;
    border: 2px solid #707070;
    color: #707070;
    text-transform: uppercase;
    font-weight: 400; }
    .quest-2 .q-btn:hover, .quest-2 .q-btn:focus {
      outline: none;
      border: 2px solid #6cd5ac;
      color: #6cd5ac; }
  .quest-2 .q-btn.mistake {
    border: 2px solid #FF9401;
    color: #FF9401; }
  .quest-2 .btn-1 {
    margin-top: 20px;
    margin-bottom: 32px; }
    @media (max-width: 767px) {
      .quest-2 .btn-1 {
        margin-bottom: 12px; } }
  .quest-2 .btn-2 {
    margin-bottom: 32px; }
    @media (max-width: 767px) {
      .quest-2 .btn-2 {
        margin-bottom: 12px; } }
  .quest-2 .btn-3 {
    margin-top: 20px;
    margin-bottom: 32px; }
    @media (max-width: 767px) {
      .quest-2 .btn-3 {
        margin-top: 12px; } }
  .quest-2 .q2-bar {
    margin-top: 40px;
    width: 138px;
    height: 24px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
    @media (max-width: 767px) {
      .quest-2 .q2-bar {
        top: 0px !important;
        margin-top: 0px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-2 .q2-bar {
        top: 0px !important;
        margin-top: 0px; } }
    .quest-2 .q2-bar .pop {
      width: 24px;
      height: 24px;
      position: relative;
      display: inline-block;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border: 1px solid #707070; }
      .quest-2 .q2-bar .pop img {
        width: 24px;
        display: none; }
    .quest-2 .q2-bar .pop.done {
      border: 0px solid transparent; }
      .quest-2 .q2-bar .pop.done img {
        display: block;
        position: relative; }
    .quest-2 .q2-bar .pop.active {
      border: 0px solid #707070;
      background-color: #308ce3; }
    .quest-2 .q2-bar .pop1 {
      margin-right: 29px; }
    .quest-2 .q2-bar .pop2 {
      margin-right: 29px; }

.quest-3 {
  padding-top: 20px;
  width: 100%;
  max-width: 1200px;
  min-height: 575px;
  padding-bottom: 50px;
  position: relative; }
  @media (max-width: 767px) {
    .quest-3 {
      padding-bottom: 0px;
      position: relative; } }
  .quest-3 .mt-x {
    margin-top: 60px; }
  .quest-3 .q2-b, .quest-3 .q2-c {
    display: none; }
  .quest-3 h3 {
    font-size: 32px;
    color: #308ce3;
    margin-bottom: 60px; }
    @media (max-width: 767px) {
      .quest-3 h3 {
        font-size: 18px;
        line-height: 1.3;
        margin-top: 0px;
        margin-bottom: 0px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-3 h3 {
        margin-bottom: 20px; } }
  .quest-3 .q3-img {
    width: 240px;
    height: 240px;
    background-position: 0px 0px;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-repeat: no-repeat; }
    @media (max-width: 767px) {
      .quest-3 .q3-img {
        width: 134px;
        height: 134px;
        margin-bottom: 20px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-3 .q3-img {
        width: 200px;
        height: 200px;
        margin-bottom: 20px; } }
    .quest-3 .q3-img:hover {
      cursor: pointer;
      -webkit-transform: scale(1.05);
      -moz-transform: scale(1.05);
      -ms-transform: scale(1.05);
      -o-transform: scale(1.05);
      transform: scale(1.05); }
  .quest-3 .q3-prvni {
    background-image: url("../images/01_normal.png"); }
    .quest-3 .q3-prvni img {
      width: 100%;
      opacity: 0; }
  .quest-3 .q3-druhy {
    background-image: url("../images/02_normal.png"); }
    .quest-3 .q3-druhy img {
      width: 100%;
      opacity: 0; }
  .quest-3 .q3-treti {
    background-image: url("../images/03_normal.png"); }
    .quest-3 .q3-treti img {
      width: 100%;
      opacity: 0; }
  .quest-3 .q3-ctvrty {
    background-image: url("../images/04_normal.png"); }
    .quest-3 .q3-ctvrty img {
      width: 100%;
      opacity: 0; }
  .quest-3 .q3-alert {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    max-width: 220px;
    border: 1px solid  #FF9401;
    margin-bottom: 40px;
    margin-top: 20px;
    display: none; }
    @media (max-width: 767px) {
      .quest-3 .q3-alert {
        margin-bottom: 15px;
        margin-top: 10px;
        padding: 4px;
        min-height: 94px;
        opacity: 0; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-3 .q3-alert {
        min-height: 64px;
        margin-bottom: 15px;
        margin-top: 10px;
        opacity: 0; } }
    .quest-3 .q3-alert p {
      font-size: 12px;
      color: #707070;
      text-align: center;
      margin: 0px; }
      @media (max-width: 767px) {
        .quest-3 .q3-alert p {
          line-height: 1.2; } }

.quest-4 {
  padding-top: 20px;
  width: 100%;
  max-width: 1100px;
  min-height: 320px;
  padding-bottom: 50px;
  position: relative; }
  @media (max-width: 767px) {
    .quest-4 {
      padding-top: 30px;
      padding-bottom: 20px; } }
  .quest-4 .mt-x {
    margin-top: 20px; }
  .quest-4 .q2-b, .quest-4 .q2-c {
    display: none; }
  .quest-4 h3 {
    font-size: 34px;
    color: #308ce3;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.2; }
    @media (max-width: 767px) {
      .quest-4 h3 {
        font-size: 18px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-4 h3 {
        font-size: 26px; } }
  .quest-4 .q2-alert {
    opacity: 0;
    width: 100%;
    max-width: 360px;
    background-color: #fff;
    padding: 10px;
    border: 1px solid  #FF9401;
    margin-bottom: 10px; }
    .quest-4 .q2-alert p {
      font-size: 12px;
      color: #707070;
      margin: 0px; }
  .quest-4 .q4-bar {
    margin-top: 40px;
    width: 252px;
    height: 24px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%); }
    @media (max-width: 767px) {
      .quest-4 .q4-bar {
        left: 0%;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
        position: relative;
        margin-top: 0px;
        bottom: 24px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-4 .q4-bar {
        left: 0%;
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
        transform: translateX(0%);
        position: relative;
        margin-top: 0px; } }
    .quest-4 .q4-bar .pop {
      width: 24px;
      height: 24px;
      position: relative;
      display: inline-block;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border: 1px solid #707070; }
      .quest-4 .q4-bar .pop img {
        width: 24px;
        display: none; }
    .quest-4 .q4-bar .pop.done {
      border: 0px solid transparent; }
      .quest-4 .q4-bar .pop.done img {
        display: block;
        position: relative; }
    .quest-4 .q4-bar .pop.active {
      border: 0px solid #707070;
      background-color: #308ce3; }
    .quest-4 .q4-bar .pop1 {
      margin-right: 29px; }
    .quest-4 .q4-bar .pop2 {
      margin-right: 29px; }
    .quest-4 .q4-bar .pop3 {
      margin-right: 29px; }
    .quest-4 .q4-bar .pop4 {
      margin-right: 29px; }
  .quest-4 .q4-alert {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    max-width: 510px;
    margin-bottom: 20px;
    margin-top: 20px;
    opacity: 0;
    min-height: 72px; }
    @media (max-width: 767px) {
      .quest-4 .q4-alert {
        padding: 10px;
        max-width: 510px;
        margin-bottom: 10px;
        margin-top: 8px; } }
    @media (min-width: 768px) and (max-width: 1023px) {
      .quest-4 .q4-alert {
        margin-top: 10px; } }
    .quest-4 .q4-alert p {
      font-size: 12px;
      color: #707070;
      text-align: center;
      margin: 0px;
      vertical-align: middle; }
  .quest-4 .q4-alert-2, .quest-4 .q4-alert-3, .quest-4 .q4-alert-4, .quest-4 .q4-alert-5 {
    display: none; }
  .quest-4 .q4-alert-1, .quest-4 .q4-alert-2, .quest-4 .q4-alert-3 {
    position: relative;
    top: 8px; }
    @media (max-width: 767px) {
      .quest-4 .q4-alert-1, .quest-4 .q4-alert-2, .quest-4 .q4-alert-3 {
        top: 0px; } }
  .quest-4 .q4-alert.mistake {
    border: 1px solid #FF9401; }
  .quest-4 .q4-alert.done {
    border: 1px solid #6cd5ac; }
  .quest-4 .q4-1 {
    display: block; }
  .quest-4 .q4-2 {
    display: none; }
  .quest-4 .q4-3 {
    display: none; }
  .quest-4 .q4-4 {
    display: none; }
  .quest-4 .q4-5 {
    display: none; }
  .quest-4 .q4-buttons {
    width: 100%;
    max-width: 510px;
    margin-top: 15px; }
  .quest-4 .q-btn {
    width: 100%;
    max-width: 220px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    font-size: 18px;
    height: 50px;
    padding: 10px 10px;
    background-color: transparent;
    border: 2px solid #707070;
    color: #707070;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px; }
    .quest-4 .q-btn:hover, .quest-4 .q-btn:focus {
      outline: none;
      border: 2px solid #6cd5ac;
      color: #6cd5ac;
      text-decoration: none; }
  .quest-4 .q-btn.mistake {
    border: 2px solid #FF9401;
    color: #FF9401; }
  .quest-4 .q-btn.done {
    border: 2px solid #6cd5ac;
    color: #6cd5ac; }
  .quest-4 .leftor {
    margin-right: auto;
    display: block; }
    @media (max-width: 767px) {
      .quest-4 .leftor {
        margin-left: auto; } }
  .quest-4 .rightor {
    margin-left: auto;
    display: block; }
    @media (max-width: 767px) {
      .quest-4 .rightor {
        margin-right: auto; } }
  .quest-4 .text-place {
    min-height: 80px;
    display: block; }

.pulse-container {
  width: 200px;
  height: 100%;
  margin: 0 auto 0; }

.pulse-button {
  position: relative;
  width: 100px;
  height: 100px;
  border: none;
  box-shadow: 0 0 0 0 rgba(48, 140, 227, 0.7);
  background-size: cover;
  cursor: pointer;
  -webkit-animation: pulse 1s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1s infinite cubic-bezier(0.66, 0, 0, 1);
  color: #308ce3 !important;
  border-color: #308ce3 !important; }

.pulse-button:hover {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  animation: none; }

@-webkit-keyframes pulse {
  to {
    box-shadow: 0 0 0 25px rgba(232, 76, 61, 0); } }
@-moz-keyframes pulse {
  to {
    box-shadow: 0 0 0 25px rgba(232, 76, 61, 0); } }
@-ms-keyframes pulse {
  to {
    box-shadow: 0 0 0 25px rgba(232, 76, 61, 0); } }
.jak-ziskat-link {
  text-align: center;
  color: #707070;
  text-decoration: underline;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px; }

.cisteni-navod {
  max-width: 200px;
  width: 100%;
  display: block;
  margin: 28px auto 34px auto; }

.gratulace-alert {
  max-width: 500px; }

.inff3 {
  font-size: 20px;
  color: #707070;
  width: 100%;
  max-width: 528px;
  line-height: 1.5; }

.rozcestnik-btn {
  max-width: 320px !important;
  margin-bottom: 35px; }
  @media (max-width: 767px) {
    .rozcestnik-btn {
      min-height: 52px !important; } }

.rozcestnik-a {
  text-align: center;
  text-decoration: underline;
  color: #308ce3;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 20px; }
  .rozcestnik-a:hover, .rozcestnik-a:focus {
    color: #308ce3; }

/*
Jedna trida vzdy pro footer a pro body zaroven
 */
/* The container */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 13px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-bottom: 30px !important; }
  @media (max-width: 767px) {
    .checkbox-container {
      font-size: 12px !important; } }
  .checkbox-container .checkmark {
    top: -3px !important;
    background-color: transparent;
    border: 1px solid #308ce3; }

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  left: 27px; }

/* Create a custom checkbox */
.checkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent; }

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: transparent;
  border: 1px solid #308ce3; }

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #308ce3; }

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

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block; }

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

input::-ms-clear, input::-ms-reveal {
  display: none; }

input[type='password'] + .password-eye {
  background-image: url(../images/eye-open.svg), url(../images/eye-closed.svg); }

input[type='text'] + .password-eye {
  background-image: url(../images/eye-open.svg); }

.password-eye {
  width: 35px;
  height: 30px;
  right: 6px;
  top: 56px;
  margin-right: 16px;
  position: absolute;
  z-index: 20;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer; }

.eye-form-group {
  position: relative; }

.under-top2 {
  width: 100%;
  margin-top: 20px;
  max-width: 900px;
  text-align: center;
  color: #707070;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 0px; }

html {
  overflow-x: hidden; }

body {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -o-flex-direction: column;
  -moz-flex-direction: column;
  -webkit-flex-direction: column; }

.addcode-content, .agecheck-place, .email-sent, .gratulace-content, .hp-content, .quest-content {
  flex: 1 0 auto;
  -o-flex: 1 0 auto;
  -moz-flex: 1 0 auto;
  -webkit-flex: 1 0 auto; }

.video-content, .intro-content, footer {
  flex: none;
  -o-flex: none;
  -moz-flex: none;
  -webkit-flex: none; }

@media only screen and (min-width: 992px) and (max-width: 1023px) {
  .done-sign {
    left: 15% !important; } }
/*

.hidden-timeline::-webkit-media-controls-timeline {
  display: none !important;
}
.hidden-timeline::-webkit-media-controls-play-button {
  opacity: 0;
}
*/
.notfound-place {
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  overflow: scroll;
  background-color: #fff; }
  .notfound-place .age-container {
    width: 100%;
    max-width: 940px;
    padding: 0px 15px;
    margin-top: 200px; }
    @media (max-width: 767px) {
      .notfound-place .age-container {
        margin-top: 20px; } }
  .notfound-place .a-logo {
    width: 100%;
    max-width: 200px;
    margin-bottom: 25px; }
    @media (max-width: 767px) {
      .notfound-place .a-logo {
        max-width: 110px;
        margin-bottom: 15px; } }
  .notfound-place .first-p {
    font-size: 48px;
    max-width: 400px;
    text-align: center;
    color: #707070;
    font-weight: 300; }
    @media (max-width: 767px) {
      .notfound-place .first-p {
        font-size: 28px; } }
  .notfound-place .g-line {
    width: 100px;
    height: 4px;
    background-color: #5d5d62;
    margin-top: 30px;
    margin-bottom: 32px; }
    @media (max-width: 767px) {
      .notfound-place .g-line {
        height: 3px;
        background-color: #5d5d62;
        margin-top: 20px;
        margin-bottom: 18px; } }
  .notfound-place .second-p {
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    color: #707070;
    letter-spacing: 3px;
    margin-bottom: 50px; }
    @media (max-width: 767px) {
      .notfound-place .second-p {
        font-size: 18px;
        margin-bottom: 25px; } }
  .notfound-place .iqos-btn {
    font-weight: 400;
    font-size: 22px;
    max-width: 490px;
    text-align: center;
    margin-bottom: 20px; }
    .notfound-place .iqos-btn:focus, .notfound-place .iqos-btn:hover {
      text-decoration: none; }
    @media (max-width: 767px) {
      .notfound-place .iqos-btn {
        font-size: 17px; } }
  @media (max-width: 767px) {
    .notfound-place .second-btn {
      min-height: 74px; } }
  .notfound-place .iqos-btn-l {
    font-weight: 400;
    font-size: 22px;
    width: 100%;
    max-width: 520px;
    text-align: center;
    margin-top: 25px;
    height: 100%;
    min-height: 64px; }
    @media (max-width: 767px) {
      .notfound-place .iqos-btn-l {
        font-size: 17px; } }
    .notfound-place .iqos-btn-l:focus, .notfound-place .iqos-btn-l:hover {
      text-decoration: none; }
  .notfound-place .mb-20 {
    margin-top: 40px;
    display: block; }
  .notfound-place .check-buttons {
    margin-bottom: 40px; }
    .notfound-place .check-buttons .leftis {
      float: right; }
      @media (max-width: 767px) {
        .notfound-place .check-buttons .leftis {
          float: none;
          font-size: 18px;
          height: 52px;
          margin-bottom: 15px; } }
    .notfound-place .check-buttons .rightis {
      float: left; }
      @media (max-width: 767px) {
        .notfound-place .check-buttons .rightis {
          float: none;
          font-size: 18px;
          height: 52px; } }

body.modal-open {
  overflow: visible; }

.quester-done {
  margin-top: 90px;
  margin-bottom: 70px; }
  .quester-done .btn {
    max-width: 194px;
    width: 100%;
    background-color: #308ce3;
    color: #fff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    font-size: 14px;
    text-transform: uppercase; }
    .quester-done .btn:focus, .quester-done .btn:hover {
      background-color: #35A1FF; }
  .quester-done .back-lnk {
    text-align: center;
    color: #707070;
    text-decoration: underline;
    font-size: 14px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 20px; }

.dot1-content {
  padding-top: 50px; }
  .dot1-content .quester {
    margin-bottom: 60px; }
    .dot1-content .quester h2 {
      font-weight: bold;
      font-size: 24px;
      color: #308ce3;
      line-height: 1.5;
      max-width: 670px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 45px; }
      @media (max-width: 767px) {
        .dot1-content .quester h2 {
          font-size: 16px; } }
      .dot1-content .quester h2 span {
        font-weight: bold;
        font-size: 30px; }
        @media (max-width: 767px) {
          .dot1-content .quester h2 span {
            font-size: 22px; } }
  .dot1-content .quester1 .q-options {
    max-width: 708px; }
    .dot1-content .quester1 .q-options .left-info {
      width: 93px;
      display: inline-block;
      text-align: right;
      color: #707070;
      padding-right: 8px;
      margin-bottom: 0px;
      position: relative;
      top: 10px; }
    .dot1-content .quester1 .q-options .right-info {
      width: 93px;
      display: inline-block;
      text-align: left;
      color: #707070;
      padding-left: 8px;
      margin-bottom: 0px;
      position: relative;
      top: 10px; }
    .dot1-content .quester1 .q-options .circle-container {
      max-width: 514px;
      width: 100%;
      display: inline-block;
      position: relative; }
      .dot1-content .quester1 .q-options .circle-container .dark-line {
        height: 1px;
        width: 95%;
        background-color: #707070;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 21px; }
      .dot1-content .quester1 .q-options .circle-container .wheel {
        width: 42px;
        height: 42px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #707070;
        display: inline-block;
        background-color: #fdfdfd;
        text-align: center;
        color: #707070;
        margin-left: 3px;
        margin-right: 3px;
        padding-top: 10px;
        position: relative;
        z-index: 5; }
        .dot1-content .quester1 .q-options .circle-container .wheel:hover {
          border: 1px solid #308ce3;
          background-color: #308ce3;
          color: #fff;
          cursor: pointer; }
      .dot1-content .quester1 .q-options .circle-container .wheel.active {
        border: 1px solid #308ce3;
        background-color: #308ce3;
        color: #fff; }
  .dot1-content .quester2 .counter-bar {
    width: 120px;
    height: 40px;
    display: block;
    background-image: url("../images/counter-bar.svg");
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: 0px 0px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    .dot1-content .quester2 .counter-bar input::-webkit-outer-spin-button,
    .dot1-content .quester2 .counter-bar input::-webkit-inner-spin-button {
      /* display: none; <- Crashes Chrome on hover */
      -webkit-appearance: none;
      margin: 0;
      /* <-- Apparently some margin are still there even though it's hidden */ }
    .dot1-content .quester2 .counter-bar input {
      width: 58px;
      position: absolute;
      top: 1px;
      left: 31px;
      height: 38px;
      border: 0px;
      background-color: transparent;
      outline: none;
      text-align: center;
      color: #707070; }
  .dot1-content .quester2 .counter-bar-left {
    width: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0; }
    .dot1-content .quester2 .counter-bar-left:hover {
      opacity: 1;
      cursor: pointer; }
  .dot1-content .quester2 .counter-bar-right {
    width: 31px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0; }
    .dot1-content .quester2 .counter-bar-right:hover {
      opacity: 1;
      cursor: pointer; }

.dot2-content {
  padding-top: 50px; }
  .dot2-content .quester {
    margin-bottom: 60px; }
    .dot2-content .quester h2 {
      font-weight: bold;
      font-size: 24px;
      color: #308ce3;
      line-height: 1.5;
      max-width: 670px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 45px; }
      @media (max-width: 767px) {
        .dot2-content .quester h2 {
          font-size: 16px; } }
      .dot2-content .quester h2 span {
        font-weight: bold;
        font-size: 30px; }
        @media (max-width: 767px) {
          .dot2-content .quester h2 span {
            font-size: 22px; } }
  .dot2-content .quester2 .q-options {
    max-width: 708px; }
    .dot2-content .quester2 .q-options .left-info {
      width: 93px;
      display: inline-block;
      text-align: right;
      color: #707070;
      padding-right: 8px;
      margin-bottom: 0px;
      position: relative;
      top: 10px; }
    .dot2-content .quester2 .q-options .right-info {
      width: 93px;
      display: inline-block;
      text-align: left;
      color: #707070;
      padding-left: 8px;
      margin-bottom: 0px;
      position: relative;
      top: 10px; }
    .dot2-content .quester2 .q-options .circle-container {
      max-width: 514px;
      width: 100%;
      display: inline-block;
      position: relative; }
      .dot2-content .quester2 .q-options .circle-container .dark-line {
        height: 1px;
        width: 95%;
        background-color: #707070;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 21px; }
      .dot2-content .quester2 .q-options .circle-container .wheel {
        width: 42px;
        height: 42px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #707070;
        display: inline-block;
        background-color: #fdfdfd;
        text-align: center;
        color: #707070;
        margin-left: 3px;
        margin-right: 3px;
        padding-top: 10px;
        position: relative;
        z-index: 5; }
        .dot2-content .quester2 .q-options .circle-container .wheel:hover {
          border: 1px solid #308ce3;
          background-color: #308ce3;
          color: #fff;
          cursor: pointer; }
      .dot2-content .quester2 .q-options .circle-container .wheel.active {
        border: 1px solid #308ce3;
        background-color: #308ce3;
        color: #fff; }
  .dot2-content .quester3 .counter-bar {
    width: 120px;
    height: 40px;
    display: block;
    background-image: url("../images/counter-bar.svg");
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: 0px 0px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    .dot2-content .quester3 .counter-bar input::-webkit-outer-spin-button,
    .dot2-content .quester3 .counter-bar input::-webkit-inner-spin-button {
      /* display: none; <- Crashes Chrome on hover */
      -webkit-appearance: none;
      margin: 0;
      /* <-- Apparently some margin are still there even though it's hidden */ }
    .dot2-content .quester3 .counter-bar input {
      width: 58px;
      position: absolute;
      top: 1px;
      left: 31px;
      height: 38px;
      border: 0px;
      background-color: transparent;
      outline: none;
      text-align: center;
      color: #707070; }
  .dot2-content .quester3 .counter-bar-left {
    width: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0; }
    .dot2-content .quester3 .counter-bar-left:hover {
      opacity: 1;
      cursor: pointer; }
  .dot2-content .quester3 .counter-bar-right {
    width: 31px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0; }
    .dot2-content .quester3 .counter-bar-right:hover {
      opacity: 1;
      cursor: pointer; }

/*.obx1{
  top: 10px;
}
.obx2{
  top: 20px;
}
.obx3{
  top: 0px;
}
.obx4{
  top: 20px;
}
.obx5{
  top: 20px;
}
.obx6{
  top: 30px;
}*/
.dot3-content {
  padding-top: 50px; }
  .dot3-content .top-progress-bar {
    margin-bottom: 40px; }
    .dot3-content .top-progress-bar span {
      display: block;
      text-align: center;
      color: #707070;
      margin-bottom: 10px; }
    .dot3-content .top-progress-bar img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 304px; }
  .dot3-content .quester {
    margin-bottom: 60px; }
    .dot3-content .quester h2 {
      font-weight: bold;
      font-size: 24px;
      color: #308ce3;
      line-height: 1.5;
      max-width: 670px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 35px; }
      @media (max-width: 767px) {
        .dot3-content .quester h2 {
          font-size: 16px; } }
      .dot3-content .quester h2 span {
        font-weight: bold;
        font-size: 30px; }
        @media (max-width: 767px) {
          .dot3-content .quester h2 span {
            font-size: 22px; } }
  .dot3-content .quester3 .counter-bar {
    width: 120px;
    height: 40px;
    display: block;
    background-image: url("../images/counter-bar.svg");
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: 0px 0px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    .dot3-content .quester3 .counter-bar input::-webkit-outer-spin-button,
    .dot3-content .quester3 .counter-bar input::-webkit-inner-spin-button {
      /* display: none; <- Crashes Chrome on hover */
      -webkit-appearance: none;
      margin: 0;
      /* <-- Apparently some margin are still there even though it's hidden */ }
    .dot3-content .quester3 .counter-bar input {
      width: 58px;
      position: absolute;
      top: 1px;
      left: 31px;
      height: 38px;
      border: 0px;
      background-color: transparent;
      outline: none;
      text-align: center;
      color: #707070; }
  .dot3-content .quester3 .counter-bar-left {
    width: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0; }
    .dot3-content .quester3 .counter-bar-left:hover {
      opacity: 1;
      cursor: pointer; }
  .dot3-content .quester3 .counter-bar-right {
    width: 31px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0; }
    .dot3-content .quester3 .counter-bar-right:hover {
      opacity: 1;
      cursor: pointer; }
  .dot3-content .quester2 .q-options {
    max-width: 708px; }
    .dot3-content .quester2 .q-options .left-info {
      width: 93px;
      display: inline-block;
      text-align: right;
      color: #707070;
      padding-right: 8px;
      margin-bottom: 0px;
      position: relative;
      top: 10px; }
    .dot3-content .quester2 .q-options .right-info {
      width: 93px;
      display: inline-block;
      text-align: left;
      color: #707070;
      padding-left: 8px;
      margin-bottom: 0px;
      position: relative;
      top: 10px; }
    .dot3-content .quester2 .q-options .circle-container {
      max-width: 514px;
      width: 100%;
      display: inline-block;
      position: relative; }
      .dot3-content .quester2 .q-options .circle-container .dark-line {
        height: 1px;
        width: 95%;
        background-color: #707070;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 21px; }
      .dot3-content .quester2 .q-options .circle-container .wheel {
        width: 42px;
        height: 42px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 1px solid #707070;
        display: inline-block;
        background-color: #fdfdfd;
        text-align: center;
        color: #707070;
        margin-left: 3px;
        margin-right: 3px;
        padding-top: 10px;
        position: relative;
        z-index: 5; }
        .dot3-content .quester2 .q-options .circle-container .wheel:hover {
          border: 1px solid #308ce3;
          background-color: #308ce3;
          color: #fff;
          cursor: pointer; }
      .dot3-content .quester2 .q-options .circle-container .wheel.active {
        border: 1px solid #308ce3;
        background-color: #308ce3;
        color: #fff; }
  .dot3-content .counter-bar {
    width: 120px;
    height: 40px;
    display: block;
    background-image: url("../images/counter-bar.svg");
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
    background-position: 0px 0px;
    margin-left: auto;
    margin-right: auto;
    position: relative; }
    .dot3-content .counter-bar input::-webkit-outer-spin-button,
    .dot3-content .counter-bar input::-webkit-inner-spin-button {
      /* display: none; <- Crashes Chrome on hover */
      -webkit-appearance: none;
      margin: 0;
      /* <-- Apparently some margin are still there even though it's hidden */ }
    .dot3-content .counter-bar input {
      width: 58px;
      position: absolute;
      top: 1px;
      left: 31px;
      height: 38px;
      border: 0px;
      background-color: transparent;
      outline: none;
      text-align: center;
      color: #707070; }
  .dot3-content .counter-bar-left {
    width: 31px;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0; }
    .dot3-content .counter-bar-left:hover {
      opacity: 1;
      cursor: pointer; }
  .dot3-content .counter-bar-right {
    width: 31px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0; }
    .dot3-content .counter-bar-right:hover {
      opacity: 1;
      cursor: pointer; }

.dot-gratulace h2 {
  font-size: 40px;
  color: #308ce3;
  line-height: 1.4;
  margin-bottom: 40px;
  margin-top: 80px; }
  @media (max-width: 767px) {
    .dot-gratulace h2 {
      font-size: 27px;
      color: #308ce3;
      line-height: 1.4;
      margin-bottom: 30px;
      margin-top: 40px; } }
.dot-gratulace h3 {
  font-size: 18px;
  color: #707070;
  line-height: 1.4; }

.q-option-xs {
  position: relative;
  max-width: 260px;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .q-option-xs .form-control {
    height: 50px;
    padding: 11px 12px;
    font-size: 16px;
    color: #707070;
    outline: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; }
  .q-option-xs select::-ms-expand {
    display: none; }
  .q-option-xs .s-arrow {
    position: absolute;
    width: 20px;
    top: 14px;
    right: 12px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg); }

.option-box {
  border: 1px solid #707070;
  padding: 15px;
  min-height: 112px;
  margin: auto;
  position: relative; }
  @media (max-width: 767px) {
    .option-box {
      max-width: 300px;
      margin-bottom: 10px;
      min-height: 90px;
      padding: 10px; } }
  @media (min-width: 768px) and (max-width: 1023px) {
    .option-box {
      max-width: 300px;
      margin-bottom: 10px;
      min-height: 90px;
      padding: 10px; } }
  .option-box p {
    position: absolute;
    max-width: 133px;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
    @media (max-width: 767px) {
      .option-box p {
        max-width: 220px; } }
  .option-box:hover {
    cursor: pointer;
    color: #fff;
    background-color: #308ce3;
    border: 1px solid #308ce3; }

.option-box.active {
  color: #fff;
  background-color: #308ce3;
  border: 1px solid #308ce3; }

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