section[data-cattype="240"]{ padding: 0; margin-top: -30px; } [data-cattype="240"] .panel-left, [data-cattype="240"] .panel-right{ display: inline-block; vertical-align: top; } [data-cattype="240"] .panel-left{ position: sticky; top: 0; width: 40%; } section[data-cattype="240"] iframe.fadeIn { animation: fadeIn 4s ease-in-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } section[data-cattype="240"] .displaybg { position: relative; overflow: hidden; background-size: cover; background-position: center; width: 50%; min-height: 40vh; } section[data-cattype="240"] .displaybg .video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; animation: fadeInVideo 4s ease-in-out forwards; } section[data-cattype="240"] .displaybg .video-bg { position: absolute; top: 50%; left: 50%; min-width: 100vh; min-height: ; border: 0; pointer-events: none; transform: translate(-50%, -50%); animation: fadeInVideo 4s ease-in forwards; } @keyframes fadeInVideo { from { opacity: 0; } to { opacity: 1; } } [data-cattype="240"] .panel-right{ width: 60%; padding-top: 70px; position: relative; } [data-cattype="240"] .panel-left .content{ max-width: 100%; text-align: right; right: 0; padding: 60px 30px; padding-left: 45%; position: relative; } [data-cattype="240"] .panel-left .content:before, [data-cattype="240"] .panel-left .content:after{ content: ""; position: absolute; width: 27px; height: 39vh; background-color: #ffc22b; margin-top: 54px; top: 0; left: 0; z-index: -1; } [data-cattype="240"] .panel-left .content:after{ background-color: #f87733; top: 39vh; } [data-cattype="240"] .panel-left .section-title{ font-size: 3.6em; color: #f87733; font-weight: 800; line-height: 1.1; } [data-cattype="240"] .wrapper_countdowns{ margin-top: 39px; } [data-cattype="240"] .wrapper_countdown{ margin: 18px 0; } [data-cattype="240"] .wrapper_countdown .number{ font-size: 5em; font-weight: 100; line-height: 1; } [data-cattype="240"] ul.list-servicebox{ display: flex; flex-flow: wrap; align-items: center; background: #eee; } [data-cattype="240"] ul.list-servicebox li{ width: 50%; min-height: 40vh; background: #ccc; } [data-cattype="240"] ul.list-servicebox .displaybg{ background-position: center center; background-repeat: no-repeat; background-size: cover; } [data-cattype="240"] ul.list-servicebox .writeup{ padding: 60px; background: #eeeeee; vertical-align: middle; position: relative; display: flex; flex-flow: wrap; align-items: center; justify-content: center; } [data-cattype="240"] ul.list-servicebox .writeup.link{ cursor: pointer; } [data-cattype="240"] ul.list-servicebox .writeup div.btn-more{ margin: 0.9em 0; font-size: 0.9em; color: #f87733; font-weight: 300; } [data-cattype="240"] ul.list-servicebox .writeup div.btn-more > span { width: 15px; height: 18px; background-repeat: no-repeat; background-position: center center; background-image: url('../../../data/ckfinder/images/angle-right-orange.svg'); display: inline-block; vertical-align: bottom; } [data-cattype="240"] ul.list-servicebox .writeup:hover div.btn-more{ color: #000; } [data-cattype="240"] ul.list-servicebox .writeup:hover div.btn-more > span { transform: translateX(15px); background-image: url('../../../data/ckfinder/images/angle-right-white.svg'); } [data-cattype="240"] ul.list-servicebox .writeup.link a.desc{ display: block; height: 100%; width: 100%; color: #333; } [data-cattype="240"] ul.list-servicebox .writeup.link:hover{ background: radial-gradient(ellipse at center, #ffc22b 0%,#ffb200 67%,#e6a100 100%);; } [data-cattype="240"] ul.list-servicebox .writeup.link:hover a.desc, [data-cattype="240"] ul.list-servicebox .writeup.link:hover *{ color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } [data-cattype="240"] ul.list-servicebox h2{ font-size: 2em; font-weight: 500; color: #000; margin-top: 0; } @media (max-width: 1400px) { [data-cattype="240"] .panel-left .content{ padding-left: 30px; padding-right: 30px; } [data-cattype="240"] .panel-left .content:before, [data-cattype="240"] .panel-left .content:after{ margin-top: 63px; width: 18px; height: 45vh; } [data-cattype="240"] .panel-left .content:after{ top: 45vh; } [data-cattype="240"] ul.list-servicebox .writeup{ padding: 0px 30px; line-height: 1.3; font-size: 0.9em; } [data-cattype="240"] ul.list-servicebox h2{ font-size: 1.5em; } section[data-cattype="240"] .displaybg .video-bg { width: 175%; } } @media (min-width: 768px) and (max-width: 980px) { } @media (max-width: 767px) { [data-cattype="240"] .panel-left, [data-cattype="240"] .panel-right{ position: relative; width: 100%; } [data-cattype="240"] .panel-left .content{ padding: 15px 30px; } [data-cattype="240"] .panel-left .section-title { font-size: 3.3em; padding-right: 0; } [data-cattype="240"] .wrapper_countdown .number{ font-size: 3em; } [data-cattype="240"] .panel-right{ padding: 0; } [data-cattype="240"] ul.list-servicebox{ display: block; } [data-cattype="240"] ul.list-servicebox li{ width: 100%; } [data-cattype="240"] ul.list-servicebox .displaybg{ width: 100vw; } [data-cattype="240"] ul.list-servicebox .writeup{ width: 100%; display: block; padding: 30px 15px; min-height: auto; } } @media (max-width: 480px) { [data-cattype="240"] .panel-left .content:before, [data-cattype="240"] .panel-left .content:after{ margin-top: 27px; } }