section[data-cattype="702"] { min-height: 50vh; padding: 0; position: relative; background-attachment: fixed !important; background-position: bottom !important; } section[data-cattype="702"] > .container{ position: sticky; top: 0; padding: 9vh 0; width: 100%; max-width: 100%; } [data-cattype="702"] .section-title{ color: #121922; } [data-cattype="702"] .section-title .yellow{ color: #fec21c; } [data-cattype="702"] .list-step{ text-align: left; transition-timing-function: cubic-bezier(.23,1,.32,1); transition-duration: .5s; } [data-cattype="702"] .list-step li { width: 75vh; height: 66vh; border-radius: 21px; border: none; margin: 18px; position: relative; padding: 2.1em 2.4em; background-position: center; background-size: contain; background-repeat: no-repeat; -moz-box-shadow: 3px 3px 13px 0px rgba(0,0,0,0.51); } [data-cattype="702"] .list-step li > a{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } [data-cattype="702"] .caption { width: 100; position: absolute; bottom: 0; text-align: center; left: 0; right: 0; } [data-cattype="702"] .owl-carousel{ display: none !important; } @media (max-width: 1400px) { [data-cattype="702"] .list-step li::before { height: 100%; } } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 980px) { section[data-cattype="702"].wrapper_middle[data-screen="on"]{ overflow-x: visible; max-width: 100vw; } section[data-cattype="702"] > .container{ padding: 6vh 0; } } @media (max-width: 767px) { } @media (max-width: 480px) { section[data-cattype="702"].wrapper_middle[data-screen="on"] { overflow-x: hidden; height: auto !important; padding: 30px 0px 0px 0px !important; min-height: auto; } section[data-cattype="702"] > .container { padding: 0; } [data-cattype="702"] .list-step li { width: 90vw; padding-top: 0; height: 45vh; } [data-cattype="702"] .list-step li::before { height: 100%; } [data-cattype="702"] .list-step li > span{ font-size: 6em; top: 0em; right: 0em; } [data-cattype="702"] .list-step li h3 { font-size: 1.2em; } [data-cattype="702"] .list-step li h3:first-letter{ color: #5fa7d9; font-size: 2.1em; font-weight: 700; text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.6); } [data-cattype="702"] .caption { position: relative; bottom: -10px !important; text-align: center; left: 0; right: 0; font-size: 15px; height: 35px; } [data-cattype="702"] .owl-carousel { display: block !important; margin: 0; padding: 0; } [data-cattype="702"] .grid-mobile li { width: 100%; height: 100%; list-style: none; margin: 10px 10px 40px 10px; position: relative; } [data-cattype="702"] .owl-item li { list-style: none; } [data-cattype="702"] .overlay { background-color: #00000054; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: 0.3s; } [data-cattype="702"] .bg { width: 100% !important; height: 250px; background-size: contain; background-repeat: no-repeat; margin: auto; display: block; background-position: center; } [data-cattype="702"] .owl-theme .owl-controls .owl-buttons div { color: #FFF; display: inline-block; zoom: 1; *display: inline; margin: 5px; padding: 3px 10px 3px 10px; font-size: 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 50%; background: #f79206; filter: Alpha(Opacity=50); width: 33px; height: 33px; } [data-cattype="702"] .owl-buttons { position: absolute; left: 0; right: 0; top: 35%; } [data-cattype="702"] .owl-prev { left: 5px; } [data-cattype="702"] .owl-next { right: 5px; } [data-cattype="702"] .owl-prev, [data-cattype="702"] .owl-next { border-radius: 50%; width: 35px; height: 35px; font-size: 20px; padding: 5px 0px 5px 0px; line-height: 0; background: #f79206; color: #fff; position: absolute; top: 110px !important; border: transparent; } [data-cattype="702"] .owl-prev span, [data-cattype="702"] .owl-next span { display: none; } [data-cattype="702"] .owl-prev::after { content: "\f104"; font-family: FontAwesome; } [data-cattype="702"] .owl-next::after { content: "\f105"; font-family: FontAwesome; } [data-cattype="702"] .owl-dots { display: none; } [data-cattype="702"] .num { font-size: 16px; color: #8c8c8c; } .owl-prev.disabled, .owl-next.disabled { opacity: 0.5; pointer-events: none; } .custom-nav { display: flex; justify-content: space-between; margin-top: 10px; } .num { text-align: center; margin-top: 10px; } }