.hints-wrapper {
   position: relative
}

.special-inner-wrapper {
   max-width: 1280px;
}

.special-article-header {
   text-align: center
}

.special-article-header p {
   text-align: left
}

.special-article-header .img-wrapper {
   margin: 0 -15px
}

.special-article-header .hints-wrapper {
   margin-top: 35px;
   margin-bottom: 35px
}

.hints-wrapper {
   position: relative
}

.hint-toggle {
   position: relative;
   display: block;
   width: 50px;
   height: 50px;
   color: #fff;
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .3);
   box-shadow: 0 0 6px rgba(0, 0, 0, .3);
   border: 2px solid #fff;
   background-color: #ffdc00;
   border-radius: 50%;
   -webkit-transition: -webkit-transform .4s;
   transition: -webkit-transform .4s;
   transition: transform .4s;
   transition: transform .4s, -webkit-transform .4s;
   cursor: pointer
}

.hint-toggle .icon {
   max-width: 80%;
   height: auto
}

.hint {
   position: absolute
}

.hint.is-open .hint-toggle {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   background-color: #fff;
   color: #ffdc00;
   z-index: 3
}

.hint.is-open .hint-content {
   opacity: 1;
   visibility: visible
}

.hint-content,
.special-slider {
   background-color: #fff;
   -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .3);
   box-shadow: 0 0 6px rgba(0, 0, 0, .3);
   border-top: 3px solid #ffdc00
}

.hint-content {
   -webkit-transition: all .4s;
   transition: all .4s;
   opacity: 0;
   visibility: hidden;
   position: absolute;
   z-index: 2;
   top: 25px;
   width: 288px;
   padding: 40px 24px 24px
}

.hint-content p {
   margin-bottom: 0
}

.hint-content p:first-child {
   margin-top: 0
}

.special-item-wrapper {
   margin-bottom: 40px
}

.special-item-text {
   margin-left: -14px;
   margin-right: -14px;
   padding: 20px 131px 60px;
   color: #fff
}
span.first_letter{
    position: relative;
    top: 2px;
    left: 4px;
    font-size: 37px;
    color: #ffdc00;
    font-weight: 500;
 }
 .text-opening{
    text-align: center;
    font-size: 17px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 30px;
 }
   
@media screen and (max-width:400px) {
   .special-item-text {
      padding: 64px 42px 165px;
   }
    span.first_letter{
        font-size: 25px;
    }
}
@media screen and (max-width:576px) {
   .special-item-text {
      padding: 67px 59px 149px;
   }
   .special-item-text.left-green {
      padding-bottom: 80px;
   }   
   .special-item-text.right-green {
      padding-bottom: 80px;
   } 
}
.special-item-text h2 {
   margin: 0;
   font-size: 5rem
}

.special-item-text h3 {
   font-size: 1.625rem;
   font-weight: 400
}

.special-item-text.left-bg {
   background: url(../images/pampers/bg.png) no-repeat;
   background-size: 100% 100%;
}

.special-item-text.right-bg {
   background: url(../images/pampers/bg2.png) no-repeat;
   background-size: 100% 100%;
   padding: 91px 131px 40px;
}
@media screen and (max-width:576px) {
   .special-item-text.right-bg {
      padding: 91px 67px 40px;
   }
    span.first_letter{
        font-size: 39px;
    }   
}
@media screen and (min-width:768px) {
    span.first_letter{
        font-size: 40px;
    }  
    .text-opening{
        font-size: 18px;
        margin-bottom: 30px;
    } 
}
@media screen and (min-width:992px) {
    span.first_letter{
        font-size: 42px;
    }   
    .text-opening{
        font-size: 19px;
        margin-bottom: 30px;
    } 
}
@media screen and (min-width:1200px) {
   .special-item-text.right-bg {
      padding: 91px 133px 40px;
   }
   .text-opening{
        font-size: 20px;
        max-width: 93%;
        margin-bottom: 40px;
    }
    span.first_letter{
        font-size: 45px;
    }   
}
.special-item-text.left-green {
   background: url(../images/pampers/bg3.png) no-repeat;
   background-size:92% 100%;
   padding-top: 80px;
}

.special-item-text.right-green {
   background: url(../images/pampers/bg4.png) no-repeat;
   background-size: 100% 100%;
   padding-top: 63px;
}

.special-item-img {
   display: table;
   margin: 20px auto 20px;
   /* padding: 0 40px */
}

.special-item-img img {
   max-width: 400px;
}
@media screen and (min-width:1200px) {
   
   .special-item-img img {
      max-width: 400px;
      transform: scale(1.1);
   }
}
.special-slider {
   padding: 20px 20px 15px
}

.special-slider p {
   margin: 0;
   font-style: italic
}

.special-slider .slick-dots {
   padding: 0;
   list-style: none;
   text-align: center
}

.special-slider .slick-dots li {
   display: inline-block;
   margin: 15px 5px 0
}

.special-slider .slick-dots button {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   text-indent: -9999px;
   border: 0;
   background-color: #d1d1d1
}

.special-slider .slick-dots .slick-active button {
   background-color: #ffdc00
}

.special-slider .slick-arrow {
   position: absolute;
   bottom: 12px;
   padding: 0;
   background-color: transparent;
   border: 0;
   color: #ffdc00;
   cursor: pointer
}

.special-slider .slick-prev {
   left: 20px;
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg)
}

.special-slider .slick-next {
   right: 20px
}

.hint1 {
   bottom: 35vw;
   left: 35vw
}

.hint2 {
   bottom: 5vw;
   left: 5vw
}

.item1-hint1 {
   top: 117px;
   left: 0;
}

.item1-hint2 {
   bottom: 84px;
   right: 0
}

.item1-hint3 {
   bottom: 96px;
   left: 115px;
}

.item2-hint1 {
   top: 95px;
   left: 0;
}

.item2-hint2 {
   top: 100px;
   right: 0
}

.item2-hint3 {
   bottom: 147px;
   left: 111px
}

.item3-hint1 {
   top: 129px;
   left: 0;
}

.item3-hint2 {
   top: 170px;
   right: 163px;
}

.item3-hint3 {
   top: -30px;
   left: 140px
}

.motion-def {
   display: none;
}

.animate-block .special-item-img,
.animate-block .special-item-text {
   position: relative
}

.animate-block .special-item-img,
.animate-block .special-item-text,
.animate-block .special-slider,
.animate-block .special-slider-bg {
   opacity: 0;
   -webkit-transition: opacity 1s, top 1s, left 2s, right 2s;
   transition: opacity 1s, top 1s, left 2s, right 2s
}

.animate-block .special-item-text {
   top: 300px
}

.animate-block .special-item-img,
.animate-block .special-slider {
   -webkit-transition-delay: .8s;
   transition-delay: .8s
}

.animate-block:nth-child(even) .special-item-img {
   right: 100px
}

.animate-block:nth-child(odd) .special-item-img {
   left: 100px
}

.animate-block.in-view .special-item-img,
.animate-block.in-view .special-item-text,
.animate-block.in-view .special-slider,
.animate-block.in-view .special-slider-bg {
   opacity: 1
}

.animate-block.in-view .special-item-text {
   top: 0
}

.animate-block.in-view:nth-child(even) .special-item-img {
   right: 0
}

.animate-block.in-view:nth-child(odd) .special-item-img {
   left: 0
}

@media only screen and (min-width:320px) and (max-width:560px) {
    .hint-toggle{
        width: 45px;
        height: 45px;
    }
    .special-item-img img{
        max-width: 350px;
    }
   .item1-hint1 {
       top: 83px;
       left: 0;
   }
   .item1-hint2 {
       top: 239px;
       right: 0;
   }
   .item1-hint3 {
       top: 80px;
       left: 58px;
   }
   .item2-hint1 {
       top: 63px;
       left: 0;
   }
   .item2-hint2 {
       top: 5px;
       right: 0;
   }
   .item2-hint3 {
       top: 130px;
       left: 151px;
   }
   .item3-hint1 {
       top: 90px;
       left: -3px;
   }
   .item3-hint2 {
        top: -24px;
        right: 129px;
   }
   .item3-hint3 {
        top: 120px;
        left: 161px;
   }
}

@media only screen and (max-width:1260px) {
   .hint1 .hint-content {
       left: -111px
   }
   .hint2 .hint-content {
       left: -19px
   }
   .item1-hint1 .hint-content {
       left: 0;
   }
   .item1-hint2 .hint-content {
       right: 0;
   }
   .item1-hint3 .hint-content {
       left: -18px
   }
   .item2-hint1 .hint-content {
       left: 0;
   }
   .item2-hint2 .hint-content {
       right: 0;
   }
   .item2-hint3 .hint-content {
       left: 0;
   }
   .item3-hint1 .hint-content {}
   .item3-hint2 .hint-content {
       right: -27px
   }
   .item3-hint3 .hint-content {
       left: -128px
   }
   .special-item-text.left-bg {
       margin-top: 50px;
   }
   .special-item-text.left-green {
       margin-top: 30px;
   }
}

@media only screen and (min-width:1260px) {
   .special-article-header {
       position: relative;
       margin-top: 0px;
       margin-bottom: 0;
       padding: 58px 20px 40px
   }
   .motion-def {
       display: block;
       width: 120px;
       height: 120px;
       background-image: url('../images/pampers/pampers-decoration-yellow.gif');
       background-repeat: no-repeat;
       background-size: contain;
       position: absolute;

   }
   .motion-def:nth-child(2n){
       background-image: url('../images/pampers/pampers-decoration.gif');
   }
   .motion-def.left {}
   .motion-def.right {
       transform: scaleX(-1);
       -webkit-transform: scaleX(-1);
   }
   .motion-def.df1 {
       bottom: -94px;
       right: 0;
   }
   .motion-def.df2 {
       top: -125px;
       left: 0;
   }
   .motion-def.df3 {
       bottom: -120px;
       right: 0
   }
   .motion-def.df4 {
       top: -120px;
       left: 0px
   }
   .motion-def.df5 {
       bottom: -94px;
       right: 0
   }
   .motion-def.df6 {
       top: -125px;
       left: 0
   }
   .motion-def.df7 {
        height:70px ;
        top: 22px;
        left: -90px;
        position: relative;
   }
   .special-article-header .article-title {
       color: #a71269
   }
   .special-article-header .img-wrapper {
       position: absolute;
       z-index: -1;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: 0;
       margin: 0;
       height: 100%
   }
   .special-article-header .img-wrapper img {
       height: 100%;
       -o-object-fit: cover;
       object-fit: cover
   }
   .special-article-header .text-wrapper {
       max-width: 100%;
       margin: 0 auto
   }
   .special-article-header .text-wrapper>p {
       max-width: 426px;
       margin-bottom: 30px;
       font-size: 1.1875rem;
       margin-left: auto;
       font-style: italic;
       line-height: 1.5789473684;
       color: #202020
   }
   .special-article-header .hints-wrapper {
       position: static;
       height: 560px;
   }
   .hint-toggle {
       width: 50px;
       height: 50px;
       border-width: 4px
   }
   .hint-content {
       top: initial;
       bottom: 40px;
       width: 350px;
       margin-left: -138px;
       padding: 30px 30px 60px;
       border-width: 10px;
       font-size: 1.1875rem
   }
   .special-item-wrapper {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       margin-bottom: 0px;
   }
   .special-item-wrapper:first-child .special-item-img {
       margin-top: 160px;
       margin-left: 0;
       max-width: 100%;
   }
   .special-item-wrapper:nth-child(2) {
       margin-bottom: 147px
   }
   .special-item-wrapper:nth-child(2) .special-item-img {
       margin-top: -80px;
       margin-right: -56px;
       position: relative;
   }
   .special-item-wrapper:nth-child(2) .special-item-text {
       padding-left: 88px;
       padding-bottom: 152px
   }
   .special-item-wrapper:nth-child(3) .special-item-img {
       margin-top: -85px;
       margin-left: -49px
   }
   .special-item-wrapper:nth-child(3) .special-item-text {
       padding-right: 68px;
       padding-bottom: 130px
   }
   .special-item-wrapper:nth-child(even) .special-item-text {
       -webkit-box-ordinal-group: 3;
       -ms-flex-order: 2;
       order: 2
   }
   .special-item-text {
       width: 450px;
       -ms-flex-negative: 0;
       flex-shrink: 0;
       height: 100%;
       padding: 34px 90px 120px;
   }
   .special-item-text h2 {
       margin-bottom: 20px;
       font-size: 6.25rem
   }
   .special-item-text h3 {
       margin-bottom: 24px;
       font-size: 2.125rem
   }
   .special-item-text p {
       font-size: 1.1em;
       line-height: 1.5789473684
   }
   .special-item-img {
       padding: 0;
   }
   .special-item-img img {
       width: auto;
   }
   .special-item-text.left-green {
       margin-top: 40px;
       padding-top: 103px;
   }
   .special-item-text.right-green {
       padding-top: 103px;
   }
   .special-item-text.right-bg {
       padding: 135px 82px 37px;
   }
   .item1-hint3 {
       bottom: 39px;
       left: 79px;
   }
   .item2-hint3 {
       top: 195px;
       left: 164px;
   }
   .item2-hint2 {
       top: 115px;
       right: 14px;
   }
   .item3-hint1 {
       top: 190px;
        left: 10px;
   }
   .item3-hint2 {
       top: 170px;
       right: 163px;
   }
   .item3-hint3 {
       top: -30px;
       left: 140px;
   }
   .hint1 {
       bottom: 367px;
       right: 100px;
       left: initial;
   }
   .hint2 {
       bottom: 200px;
       right: 320px;
       left: initial
   }
   .item1-hint1 {
       top: 293px;
       left: 63px;
   }
   .item1-hint2 {
       bottom: 464px;
       right: 111px
   }
   .item1-hint3 {
       bottom: 418px;
       left: 327px;
   }
   .special-item-text.right-bg,
   .special-item-text.right-green {
       margin-top: 200px;
   }
   .special-slider-wrapper {
       position: relative
   }
   .special-slider-wrapper .img-wrapper {
       padding-left: 80px;
   }
   .special-slider {
       position: absolute;
       width: 42%;
       top: 50%;
       -webkit-transform: translateY(-50%);
       transform: translateY(-50%);
       padding: 60px 40px;
       border-width: 10px;
   }
   .special-slider p {
       font-size: 1.1875rem;
       line-height: 1.5789473684
   }
   .special-article-header .article-socials {
       margin-bottom: 37px;
   }
   .special-article-header .text-wrapper>p {
       max-width: 427px;
   }
   .special-article-header .hint-content {
       width: 400px;
       margin-left: -156px
   }
   .hint1 {
       bottom: 367px;
       right: 260px;
       left: initial
   }
   .hint2 {
       bottom: 236px;
       right: 520px;
       left: initial
   }
   .special-slider-wrapper .img-wrapper {
       padding-left: 215px
   }
   .special-slider {
       padding-top: 80px
   }
   .special-slider .slick-dots {
       margin-top: 40px
   }
   .special-slider .slick-arrow {
       bottom: 58px
   }
}
/* .special-item-text.left-bg p::before{
   content: '';
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background-image: url('../images/defendyl/bg.png') ;
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
} */
 @media screen and (max-width: 360px) {
   .special-item-img img {
      max-width: 100%;
   }
   .item1-hint1{
      top: 0;
   }
 }
 .dark-color{
    color: #45535d;
 }