/*START CUSTOM STYLES*/
/* common ***********************/
.subtitle {
  padding: 0 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 747px;
  color: rgba(50,50,93,0.85);
}
@media screen and (min-width: 768px) {
  .subtitle {
    padding: 0;
  }
}

.page-footer-block p.text {
    margin-top: 45px !important;
    margin-bottom: 139px !important;
}

/* HERO BLOCK */
.hero-container {
  margin-bottom: 0;
}
.hero-inner-wrapper {
  background: url(/upload/img/molekula_bez_zvuka.mp4) no-repeat top center;
}
.hero-inner-wrapper .text-container:before {
  background-size: auto 100%;
}
.hero-container .text-inner-wrapper .text {
  margin-bottom: 0;
}
.hero-container .text-inner-wrapper h4 {
  text-align: left;
  color: #fff;
}
.hero-container .text-inner-wrapper h1 br:nth-child(2) {
  display: none;
}
@media screen and (min-width: 768px) {
  .hero-inner-wrapper .text-container:before {
    background-size: 65% 100%;
  }
  .hero-container .text-inner-wrapper h1 br:nth-child(2) {
    display: block;
  }
}
  .hero-container #stamp {
    position: absolute;
    top: 50%;
    right: 70px;
    max-width: 33.8%;
    height: auto;
    width: 100%;
    transform: translateY(-50%);
  }
  @media screen and (max-width: 480px) {
    .hero-container #stamp {
      top: 8%;
      right: inherit;
      left: 50%;
      max-width: 66.8%;
      transform: translateX(-50%);
    }
  .hero-inner-wrapper::after {
    top: calc(50% + 18px);
  }
    .hero-inner-wrapper .text-container {
      padding: 32px 10px;
    }
  }
  @media screen and (min-width: 481px) and (max-width: 768px){
    .hero-container #stamp {
      right: 35px;
      max-width: 26%;
    }
  }
  
  @media screen and (min-width: 1140px) {
    .hero-container .text-inner-wrapper h4 {
      font-size: 26px;
    }
    .hero-inner-wrapper .text-container {
      height: 100%;
      padding-top: 80px;
      padding-bottom: 128px;
    }
    .hero-inner-wrapper .text-container h1 {
      margin-bottom: 48px;
      font-size: 42px;
    }
  }
  @media screen and (max-width: 480px) {
    .hero-container .text-inner-wrapper h4 {
      max-width: 100%; 
      margin-bottom: 0;
      text-align: center;
    }
  }
/* HIGHLIGHTS BLOCK START ***********************************************************/

.highlights-block {
  padding: 70px 0 132px !important;
  background: url(/upload/img/miravis-grey-background.png);
  background-size: auto 100%;
}
.highlights-block h4 {
  margin: 0 auto 20px;
  max-width: 210px;
}
.highlights-block .inner-wrapper {
  max-height: 390px;
  flex-wrap: nowrap;
  margin-top: 96px !important;
}
.highlights-block .inner-wrapper > .half {
  width: 50%;
}
.highlights-block .inner-wrapper .text-wrapper {
  height: 100%;
  padding: 62px 84px;
  text-align: left;
  background-color: #fff;
}
.highlights-block .inner-wrapper .text-wrapper ul {
  list-style: disc;
}
.highlights-block .inner-wrapper .text-wrapper ul li {
  font-size: 18px;
}
.highlights-block .inner-wrapper .video > iframe {
  width: 100%;
  height: 390px;
}

@media screen and (max-width: 480px) {
  .highlights-block {
    padding: 32px 0;
  }
  .highlights-block .inner-wrapper > .half {
    width: 100%;
  }
  .highlights-block .inner-wrapper {
    display: flex;
    flex-direction: column-reverse;
    max-height: none;
    margin-top: 62px;
  }
  .highlights-block .inner-wrapper .text-wrapper {
    margin: 0 10px;
    padding: 32px 10px;
  }
  .highlights-block .video {
    padding: 32px 10px;
  }
  .highlights-block .inner-wrapper .text-wrapper ul {
    margin: 0 24px;
  }
  .highlights-block .inner-wrapper .text-wrapper ul li {
    font-size: 16px;
  }
}

/* TEASER BLOCK START ***********************************************************/

.teaser-block.borders {
  border-bottom: 1px solid #9BBA52;
  border-top: 1px solid #9BBA52;
}
@media screen and (min-width: 768px) {
  .teaser-block .text-wrapper h3,
  .teaser-block .text-wrapper p {
    max-width: 648px;
  }
}
@media screen and (min-width: 1025px) {
  .teaser-block .text-wrapper {
    padding: 60px 100px 60px;
  }
}

/* PRODUCTS TEASER BLOCK START ***********************************************************/
.products-teaser .inner-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.products-teaser .teaser-box+.teaser-box {
  margin-top: 24px;
}
.products-teaser .teaser-box .link {
  position: absolute;
  right: 24px;
  bottom: 12px;
}
@media screen and (min-width: 768px) {
  .products-teaser .teaser-box,
  .products-teaser .teaser-box+.teaser-box {
    margin-top: 24px;
  }
}
@media screen and (min-width: 769px) {
  .products-teaser .teaser-box,
  .products-teaser .teaser-box+.teaser-box {
    margin-top: 0;
  }
}
/* .products-teaser {
  margin-top: 0;
} */
.products-teaser-caption {
  font-size: 16px;
  font-weight: 400;
  color: #32325d;
  width: 100%;
  padding: 0 10%;
  margin-top: 30px;
  text-align: center;
  display: inline-flex;
  opacity: .85;
}
@media screen and (min-width: 768px) {
  .products-teaser-caption {
    padding: 0 20%;
    margin-top: 60px;
  }
}
@media screen and (min-width: 768px) {
  .products-teaser .inner-wrapper {
    display: flex;
    max-width: 1140px;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.products-teaser .inner-wrapper>div {
  width: calc(100% - 30px);
  margin: 0 15px;
  margin-top: 24px;
  margin-bottom: 0;
}
@media screen and (min-width: 481px) {
  .products-teaser .inner-wrapper>div {
    width: calc((100% / 2) - 30px);
  }
}
@media screen and (min-width: 769px) {
  .products-teaser .inner-wrapper>div {
    width: calc((100% / 4) - 30px);
    margin: 0;
    margin-right: 8px;
  }
}
.products-teaser .teaser-box {
  margin-top: 24px;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .products-teaser .teaser-box {
    margin-top: 48px;
  }
}
.products-teaser .teaser-box img.opti {
  width: auto;
  max-width: 100%;
}
.products-teaser .teaser-box-inner {
  padding: 24px;
}
.products-teaser .teaser-box .link-button {
  padding: 12px 20px;
  font-size: 17px;
}
.text.fixed-height {
  min-height: 48px;
}
.list-with-ticks li span {
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .list-with-ticks li span {
    font-size: 13px;
  }
}
/* 
.link-button::before {
  display: none;
}

.link-button::after{
  width: 100%;
  height: 100%;
} */

/* TEXT BLOCK START ***********************************************************/
.content-block {
  background-color: #fff !important;
}
.content-block.blue-background {
  background-color: #0072ce;
}
.content-block .video {
  height: 100%;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-top: 24px;
}
.content-block img {
  height: 100%;
  max-width: 970px;
  margin: auto;
  padding: 45px 35px 10px;
}
.content-block h2 {
  max-width: 1140px;
  margin: auto;
  margin-bottom: 82px;
}
.content-block .text-wrapper {
  min-width: 156px;
  padding: 0;
}
.content-block .text-wrapper h3 {
  font-size: 26px;
}
.content-block h2 + h3 {
  margin: 32px 0;
  text-align: center;
}
.content-block h3 {
  color: #000;
  font-size: 32px;
  font-weight: normal;
}
.content-block h3.blue {
  color: #0072CE;
}
.content-block h3.green {
  color: #78BE20;
}
.content-block .inner-wrapper {
  justify-content: center;
}
.content-block .text-left, .content-block .text-left h3 {
  text-align: right;
}
.content-block .text-column {
  text-align: left;
  max-width: 278px;
}
.content-block .clear {
  clear: both;
}
.content-block .text-right h3 {
  color: #9b26b6;
}
.content-block .text-bottom {
  text-align: center;
  max-width: 550px;
  margin: auto;
}
.content-block .text-bottom h3 {
  color: #78be20;
  text-align: center;
}
.content-block.text-block {
  max-width: 747px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px 46px 10px;
}
.content-block.text-block h2 {
  text-align: center;
}
.content-block.text-block a {
  font-weight: bold;
  font-size: 14px;
  color: #aa0469;
}
.content-block.text-block p.desktop {
  display: none;
}
.content-block.text-block p.mobile {
  display: block;
}
.content-block.blue-background .inner-wrapper { 
  height: 356px;
  margin-top: 120px;
}
.content-block.blue-background h2:after {
  margin-top: 32px;
}
.content-block.blue-background .half { 
  padding: 0 !important;
  height: 100%;
}
.content-block.blue-background .text-wrapper { 
  margin: 0;
  height: 100%;
  padding: 62px 88px;
  background-color: #338ED8;
}
.content-block.blue-background .text-wrapper p { 
  text-align: left;
}
.content-block.blue-background .text-wrapper p.italic { 
  font-style: italic;
  margin-bottom: 0;
}
.content-block.blue-background img { 
  padding: 0;
}
.content-block.blue-background.with-video .inner-wrapper,
.highlights-block.with-video .inner-wrapper {
  height: inherit;
  overflow: hidden;
}
.highlights-block.with-video .inner-wrapper {
  max-height: inherit;
}
.content-block.blue-background.with-video .inner-wrapper .half {
  max-height: 315px;
}
/* .highlights-block.with-video .inner-wrapper .half {
  max-height: 315px;
} */
.content-block.with-video .video {
  padding-top: 0;
}
.content-block.with-video .video iframe {
  width: 100%;
}
.content-block.with-video .text-wrapper, 
.highlights-block.with-video .text-wrapper {
  min-height: 315px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  padding: 0 14%;
}
.highlights-block.with-video .text-wrapper {
  padding: 10px 10%;
}
.highlights-block.with-video .inner-wrapper .half {
  width: 100%;
}
@media screen and (min-width: 768px){
  .highlights-block.with-video .inner-wrapper .half {
    width: 50%;
  }
  .highlights-block.with-video .text-wrapper {
    padding: 0 14%;
  }
}
.content-block .inner-wrapper.text-column-wrapper {
  display: flex;
}
@media screen and (max-width: 480px) { 
  .content-block .inner-wrapper.text-column-wrapper {
    display: block;
  }
  .content-block {
    padding: 32px 10px;
  }
  .content-block .image-wrapper {
    overflow: auto;
    height: 312px;
    position: relative;
    padding: 10px;
  }
  .content-block .image-wrapper img {
    padding: 0;
    max-width: none;
    height: 100%;
    vertical-align: bottom;
    width: auto;
  }
  .content-block .text-right,
  .content-block .text-left,
  .content-block .text-left h3 {
    text-align: center;
  }
  .content-block .text-wrapper.text-left p.text {
    margin-bottom: 0;
  }
  .content-block .text-column {
    text-align: center;
    max-width: none;
  }
  .content-block .text-column h3 {
    padding-top: 0px;
    margin: 16px 0;
  }
  .content-block h2 + h3 {
    font-size: 22px;
  }
  .content-block .text-wrapper h3 {
    font-size: 18px;
  }
  .content-block.blue-background .inner-wrapper { 
    height: auto;
    margin-top: 88px;
  }
  .content-block.blue-background .text-wrapper {
    padding: 32px 10px;
  }
  .content-block.blue-background .text-wrapper p {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .content-block.text-block {
    padding-left: 0;
    padding-right: 0;
  }
  .content-block.text-block a {
    font-size: 16px;
  }
  .content-block.text-block p.desktop {
    display: block;
  }
  .content-block.text-block p.mobile {
    display: none;
  }
}
.blue-background h2 {
  text-align: center;
  margin-bottom: 6px;
}


/* ITEMS section ***********************/
.items-box {
  padding-left: 10px;
  padding-right: 10px;
}
.items-box.first {
  margin-top: 42px;
}
.items-box h3 {
  margin-bottom: 40px;
}
.item-box {
  position: relative;
  display: block;  
  /* margin-bottom: 40px; */
  background-color: #ffffff;
  box-shadow: 0px 2px 19px rgba(0,0,0,0.15);
  overflow: hidden;
}
.item-box .image-wrapper {
  position: relative;
  max-width: inherit;
  max-height: 364px;
  width: 100%;
  overflow: hidden;
}
.item-box .image-wrapper img {
  display: block;
  width: 100%;
}
.item-box .image-wrapper img.mobile {
  display: block;
}
.item-box .label-stamp {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px 10px;
  font-size: 17px;
  font-weight: bold;
  line-height: 28px;
  text-transform: uppercase;
  color: #fff;
  background-color: #4ca22f;
}
.item-box .text-wrapper {
  padding: 20px;
  overflow: hidden;
}
.item-box .text-wrapper h4 {
  text-transform: uppercase;
}
.item-box .text-wrapper ul li {
  float: left;
  margin-right: 20px;
}
@media screen and (min-width: 768px){
  .items-box {
    padding-left: 0;
    padding-right: 0;
  }
  .items-box.first {
    margin-top: 92px;
  }
  .item-box {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;   
  }
  .item-box .text-wrapper {
      padding: 0 40px;
      width: calc(100% - 350px);
  }
  .item-box .image-wrapper {
      max-width: 350px;
  }
  .item-box .image-wrapper img.mobile {
      display: none;
  }
}
.text,
.highlights-block.with-video .text-wrapper ul li {
  color: #000;
}
@media screen and (min-width: 1140px) {
  .hero-container .text-inner-wrapper {
    padding-right: 70px;
  }
}
/* NEW STYLES */
@media screen and (max-width: 480px) {
  .clockwise-animation.hero-container .image-container {
    height: inherit !important;
  }
.clockwise-animation .hero.text-container {
  min-height: inherit !important;
}
.clockwise-animation .hero-inner-wrapper .text-container {
  background-color: #0072ce !important;
}
  .checklist li {
    margin-left: 24px;
  }
  .checklist li a {
    font-size: 16px;
  }
.clockwise-animation .hero-inner-wrapper::after {
    height: 24px;
    width: 24px;
    top: calc(50% - 30px) !important;
    left: calc(50% - 12px) !important;
}
}
.clockwise-animation.hero-container .image-container {
  height: 524px;
}
.clockwise-animation .hero.text-container {
  min-height: 524px;
}
.checklist {
  position: relative;
}
.checklist li {
  position: relative;
  margin-bottom: 8px;
  padding: 0 0 10px 0;
  display: flex;
  align-items: center;
} 
.checklist li a { 
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  text-decoration: underline rgba(255, 255, 255, 0.5) 1px;
  text-underline-offset: 10px;
}
.checklist li a:hover { 
  color: #ffffff;
  text-decoration: underline rgba(255, 255, 255, 1) 1px;
  text-underline-offset: 10px;
}
.hero.text-container::after {
  display: none !important;
}
.clockwise-animation .hero-inner-wrapper .text-container {
  background-color: #0072ce !important;
}

@media screen and (max-width: 480px) {
  .clockwise-animation.hero-container .image-container .bottom-image {
    height: 245px !important;
  }
}

@keyframes rotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}
.clockwise-animation.hero-container {
  position: relative;
}
.clockwise-animation.hero-container .image-container {
  min-height: 480px;
  width: 100%;
  z-index: 1;
}
.clockwise-animation.hero-container .image-container > img {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
}
.clockwise-animation .hero-inner-wrapper {
  display: block;
  overflow: hidden;
}
.clockwise-animation .hero-inner-wrapper::after {
  content: "";
  background: url(/upload/img/miravis-icon.png);
  background-size: 100%;
  position: absolute;
  display: inline-block;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
  width: 48px;
  height: 48px;
}
@media screen and (max-width: 480px) { 
  .clockwise-animation .hero-inner-wrapper {
    display: flex;
    flex-direction: column-reverse;
  }
  .clockwise-animation .hero-inner-wrapper::after { 
    height: 24px;
    width: 24px;
    top: calc(50% - 75px);
    left: calc(50% - 12px) !important;
  }
}
.clockwise-animation .hero.text-container {
    max-height: 505px;
  z-index: 2;
}
.clockwise-animation .hero-inner-wrapper::after {
  z-index: 4;
}
.clockwise-animation .hero-inner-wrapper .text-container {
  background-color: #0072ce;
}
.clockwise-animation.hero-container .text-inner-wrapper {
  position: relative;
  z-index: 1;
}
.clockwise-animation .hero-inner-wrapper .text-container {
  width: 50%;
  height: 100%;
  background-color: #1ab8ec;
  z-index: 4;
  float: left;
}
.clockwise-animation .image-container {
  position: relative;
}

.clockwise-animation .image-container img {
  max-width: 100%;
}

.clockwise-animation .bottom-image {
  position: absolute;
  z-index: 1;
}

.clockwise-animation .image-container img.top-image {
  position: absolute;
  z-index: 2;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
}

.clockwise-animation .image-container img.top-image {
  animation: tickround 2s linear infinite;
  animation-iteration-count: 1;
  animation-delay: 0s;
}

.clockwise-animation .bottom-image.done {
  z-index: 3;
}
@media screen and (max-width: 480px) {
  .clockwise-animation .hero-inner-wrapper .text-container {
      padding: 32px 10px 32px 10px;
      transform: none;
      float: none;
      width: 100%;
      text-align: center;
  }
  .clockwise-animation.hero-container .image-container {
    min-height: 240px;
  }
  .clockwise-animation.hero-container .image-container > img {
    height: 240px !important;
    min-height: auto !important;
    visibility: visible !important;
    object-fit: cover !important;
  }
  .clockwise-animation .hero-inner-wrapper .text-container:before {
      background-size: 100%;
      background-color: #0072ce;
  }
  .clockwise-animation.hero-container .text-inner-wrapper {
      max-width: 100%;
      width: 100%;
  }
  .clockwise-animation .image-container img.top-image {
    transform: rotate(180deg);
    height: 480px !important;
  }
}
.clockwise-animation .hero-inner-wrapper::after {
  -webkit-animation: rotate 1s linear;
  -moz-animation: rotate 1s linear;
  -ms-animation: rotate 1s linear;
  -o-animation: rotate 1s linear;
  animation: rotate 1s linear;
  animation-iteration-count: 1;
  animation-delay: 1s;
}