section[data-cattype="244"]{ background-color: #f19818; padding: 18vh; position: sticky; z-index: 0; bottom: 0px; } [data-cattype="244"] .section-title{ color: #fff; font-size: 2.1em; } [data-cattype="244"] .hero-heading{ color: #fff; font-size: 3.3em; line-height: 1.1; margin-top: 5px; padding-bottom: 27px; margin-bottom: 27px; position: relative; } [data-cattype="244"] .hero-heading:before, [data-cattype="244"] .hero-heading:after { display: block; content: ''; position: absolute; bottom: 0; left: calc(50% - 8vw); z-index: 1; width: 15vw; padding: 0 10px; border-bottom: solid 2px #000; -webkit-transform: scaleX(0); -webkit-transition: transform 500ms ease-in-out; } [data-cattype="244"] .hero-heading:before { -webkit-transform: scaleX(1); border-bottom: solid 2px transparent; } [data-cattype="244"] .hero-heading.animated:after { -webkit-transform: scaleX(1); } [data-cattype="244"] p{ color: #000; text-shadow: none; margin-bottom: 25px; } [data-cattype="244"] .btn-talk{ color: #000; border-color: #fff; } [data-cattype="244"] .btn-talk:hover{ background-color: #fff; } @media (max-width: 1400px) { } @media (min-width: 768px) and (max-width: 980px) { section[data-cattype="244"]{ padding: 10vh 15px; } [data-cattype="244"] .hero-heading:before, [data-cattype="244"] .hero-heading:after { left: calc(50% - 15vw); width: 30vw; } } @media (max-width: 767px) { section[data-cattype="244"]{ padding: 10vh 15px; } [data-cattype="244"] .hero-heading:before, [data-cattype="244"] .hero-heading:after { left: calc(50% - 15vw); width: 30vw; } } @media (max-width: 480px) { }