section[data-cattype="247"]{ padding: 0; position: relative; } section[data-cattype="247"] + section{ z-index: 120; } [data-cattype="247"] > .vertical-divider{ border-left: 2px solid #f8920a; height: 0; position: absolute; left: 50%; margin-left: -1px; top: -40%; content: ""; z-index: 130; } [data-cattype="247"].loaded > .vertical-divider{ height: 120px; } [data-cattype="247"] > .wrapper_cloud{ background-color: transparent; margin-top: -118px; z-index: 5; position: relative; } [data-cattype="247"] > .container{ padding: 30px 0 0 0; } [data-cattype="247"] .cloud { position: absolute; width: 100%; background-repeat: no-repeat; background-size: auto 100%; animation-iteration-count: infinite; animation-fill-mode: forwards; animation-timing-function: linear; animation-name: Float, FadeFloat; z-index: 1; bottom: 10%; } [data-cattype="247"] .cloud.random { background-image: url('.././../../data/ckfinder/images/clouds/long1.svg'); animation-duration: 100s ; animation-delay: -250s ; bottom: 6%; height: 50%; z-index: 3 ; animation-name: Float, FadeFloat40; } [data-cattype="247"] .cloud.random.bg1{ background-image: url('.././../../data/ckfinder/images/clouds/long1.svg'); display:none; } [data-cattype="247"] .cloud.random.bg2{ background-image: url('.././../../data/ckfinder/images/clouds/long2.svg'); display:none; } [data-cattype="247"] .cloud.random.bg3{ background-image: url('.././../../data/ckfinder/images/clouds/long3.svg'); display:none; } @keyframes Float { from { transform: translateX(-30%) translateZ(0); } to { transform: translateX(105%) translateZ(0); } } @keyframes FadeFloat20 { 0%,100% { opacity: 0; } 5%,90% { opacity: 0.2; } } @keyframes FadeFloat40 { 0%,100% { opacity: 0; } 5%,90% { opacity: 0.4; } } @keyframes FadeFloat60 { 0%,100% { opacity: 0; } 5%,90% { opacity: 0.6; } } @keyframes FadeFloat80 { 0%,100% { opacity: 0; } 5%,90% { opacity: 0.8; } } [data-cattype="247"] .cloudbase{ position: absolute; width: 100%; left: 0; bottom: -150px; height: 240px; background-image: url('.././../../data/ckfinder/images/clouds/baselong-big.svg'); background-size: auto 100%; background-repeat: repeat-x; background-position: center center; z-index: 5; } html:not(.reached-top).nav-up [data-cattype="247"] .cloudbase{ height: 270px; } [data-cattype="247"] .arc{ background: #f8920a; padding: 90px 150px 0 150px; position: relative; z-index: 100; display: inline-block; width: 900px; height: 500px; border-top-left-radius: 700px; border-top-right-radius: 700px; margin-top: -700px; text-align: center; shape-inside: ellipse(47% 39% at 52% 53%); } [data-cattype="247"] .arc:after{ content: ""; position: absolute; width: 100%; height: 280px; background: #fff; bottom: 0; left: 0; } [data-cattype="247"] .arc-shadow{ content: ""; position: absolute; width: 100%; height: 100%; background: #fff; border-top-left-radius: 700px; border-top-right-radius: 700px; width: 900px; height: 500px; shape-inside: ellipse(47% 39% at 52% 53%); top: 0; right: 0px; z-index: 90; } [data-cattype="247"].loaded .arc-shadow{ right: 10px; } [data-cattype="247"] .arc h1 { color: #000; font-size: 2.4em; line-height: 1.2; font-weight: 600; position: relative; z-index: 130; } [data-cattype="247"] .arc h1 .empower{ width: 100%; text-align: center; display: block; font-weight: 900; } [data-cattype="247"] .overview{ position: relative; z-index: 200; background: #fff; padding: 10px 15px 80px 15px; max-width: 100%; margin: -240px auto 0 auto; color: #666; } @media (max-width: 1400px) { [data-cattype="247"] > .vertical-divider{ top: -18%; } [data-cattype="247"] .cloudbase{ height: 210px; bottom: -85px; } [data-cattype="247"] .arc h1{ font-size: 2.2em; } [data-cattype="247"] .arc{ top: 60px; } [data-cattype="247"] > .wrapper_cloud{ margin-top: -80px; } } @media (min-width: 768px) and (max-width: 980px) { [data-cattype="247"] > .vertical-divider { top: 0; } [data-cattype="247"] .arc, [data-cattype="247"] .arc-shadow { padding: 60px; width: 100vw; height: 60vw; } [data-cattype="247"] > .wrapper_cloud { margin-top: -80px; } } @media (max-width: 767px) { section[data-cattype="247"]{ min-height: 700px; } [data-cattype="247"] .cloud { background-size: cover; } [data-cattype="247"] .cloud.random { min-width: 1000px; } [data-cattype="247"] > .container { padding-top: 0; } [data-cattype="247"] .arc{ padding: 20px; width: 100%; height: auto; margin-top: -10px; } [data-cattype="247"] .overview { margin-top: 0; } [data-cattype="247"] > .wrapper_cloud{ background-color: transparent; margin-top:0px; z-index: 5; position: relative; } [data-cattype="247"] .arc{ top: 0; } } @media (max-width: 480px) { [data-cattype="247"] .arc h1{ padding-bottom: 30px; } [data-cattype="247"] > .wrapper_cloud{ display: none; } [data-cattype="247"] .arc{ background: white; } }