.experience-slider-background  {
-webkit-transition: all 500ms ease-in;
-moz-transition: all 500ms ease-in;
-ms-transition: all 500ms ease-in;
-o-transition: all 500ms ease-in;
transition: all 500ms ease-in;
}
 .experience-slider-text p a:before, .experience-slider-text p a:hover, .experience-slider-text p a {
-webkit-transition: all 100ms ease;
-moz-transition: all 100ms ease;
-ms-transition: all 100ms ease;
-o-transition: all 100ms ease;
transition: all 100ms ease;
}

.experience-slide-label { position: absolute; top: 200px; left: -50px;  background: url("./label-v02.png"); background-size: 100% 100%; z-index: 100  }
.experience-slide-label span {display: inline-block; padding: 10px 20px 15px; font-family: 'Oswald' !important;
  text-transform: uppercase; text-transform: uppercase;
  font-size: 40px; -moz-transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
  transform: rotate(-1deg);
  z-index: 9999999 !important; }

.module-offset-top-100 { position: relative; margin: -100px 0 0 0 }

.experience-slider-image { position: relative }

.experience-slider-text .headline,
.experience-slider-text .subheadline {
  font-family: 'Oswald' !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  color: #FFF;
  font-size: 50px;
  line-height: 1.2em;
}

.show-overflow { overflow: visible !important}

.experience-slider-image-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat }

.the-experience-swiper { height: auto }
.the-experience-swiper .swiper-slide { height: auto; }
.the-experience-swiper .swiper-wrapper { height: auto }
.experice-slider-row { max-width: calc(100% - 300px); margin: 0 auto; padding: 0 0 50px 0 }

.experience-swiper-pag { text-align: right; right: 150px !important; left: auto  !important; width: calc(100% - 150px); bottom: 50px !important;  }
.experience-swiper-pag .swiper-pagination-bullet { width: 14px; height: 14px; margin: 0 0 0 14px !important; background: #fff }

.experience-slider-text-inner { padding: 50px 0 50px 100px }

.experience-slider-text p {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 25px;
color: #fff;
}


.experience-swiper-boxed { position: relative }
.experience-slider-background { background: #f59b00; height: calc(100% - 100px); position: absolute; bottom: 0; left: 0; width: 100% }
.experience-slider-image { position: absolute; left: 0; width: 50%; height: calc(100% + 100px); background: #000; bottom: 0 }
.experience-slider-text { position: relative; z-index: 100; width: 50%; margin: 100px 0 0 50% }

.experience-slider-text p a { color: #fff; display: inline-block; text-decoration: none; border: 1px solid #fff; padding: 20px 100px 20px 30px; font-family: 'Oswald' !important;
  font-weight: 400 !important;
  font-size: 20px;
  letter-spacing: 3px; position: relative;
  text-transform: uppercase;
  cursor: pointer;
}

.experience-slider-text p a:before {
    content: '';
    position: absolute; 
    pointer-events: none;
    right: 20px;
    width: 60px;
    height: 100%;
    background: url("./arrow.svg");
    background-size: 40px 40px; background-position: center center; background-repeat: no-repeat;
    top: 0;
}

.experience-slider-text p a:hover {
  border-color: #000;
  background-color: #000;
}

.experience-slider-text p a:hover:before  {
  width: 90px; right: 0px; background-size: 50px 50px; 
}

@media screen and (max-width: 1200px) {
  .experice-slider-row { max-width: calc(100% - 200px); }
  .experience-swiper-pag { right: 100px !important; width: calc(100% - 100px) }
}
@media screen and (max-width: 1000px) {
  .experice-slider-row { max-width: calc(100% - 180px); }
  .experience-swiper-pag { right: 90px !important; width: calc(100% - 50px) }
  .experience-slider-text-inner { padding: 50px 0 50px 50px }
  .module-offset-top-100 { margin-top: -50px } 
  .experience-slider-background { height: calc(100% - 50px); }
  .experience-slider-text { margin: 50px 0 0 50% }
}

@media screen and (max-width: 950px) {
    .experience-slider-text { width: 100%; position: relative; margin: 50px 0 0 0 }
    .experience-slider-image { width: 100%; top: 0; height: 400px; bottom: auto; position: relative }
    .experience-slider-text-inner { padding: 0 0 100px 0}
}

@media screen and (max-width: 700px) {
    .experience-slider-image { width: 100%; top: 0; height: 300px;}
    .experience-slide-label { top: 100px; left: -25px }
    .experience-slide-label span { font-size: 30px }
    .experience-slider-text .headline, .experience-slider-text .subheadline { font-size: 40px }
}

@media screen and (max-width: 600px) {
    .experice-slider-row { max-width: calc(100% - 90px) }
    .experience-slider-image {  height: 300px; }
    .experience-slide-label span { font-size: 20px }
    .experience-slider-text .headline, .experience-slider-text .subheadline { font-size: 30px }
    
    .experience-slider-text p a { padding: 10px 60px 10px 20px; font-size: 16px; }
    .experience-slider-text p a:before { width: 40px; right: 10px; background-size: 30px 30px}
    .experience-slider-text p a:hover:before { width: 50px; right: 10px; background-size: 40px 40px}
    .experience-slider-text p a:hover {   padding: 10px 70px 10px 20px; }
}

@media screen and (max-width: 600px) {
    .experience-slider-image {  height: 250px; }
    .experience-slider-text-inner { padding: 0 0 40px 0 }
    .experience-swiper-pag { width: 100%; text-align: center; padding: 0; margin: 0; right: 0 !important; left: 0; position: relative  }
  }