#content { height: 60vh; min-height: 200px; } #content h2 { margin-top: 33vh; } #content_all { color: #fffdfc; padding-top: 100px; position: relative; top: 0; width: 120%; } #content_all_img { background: url("/img/bg_content.png"); background-size: cover; /*width: 100vw;*/ height: 150vh; left: 0; margin-top: -50vh; position: relative; } #content_all .columns { font-size: 100px; margin: 0 auto; max-width: 80vw; position: relative; top: -133vh; } #content_all .text { font-size: 18px; font-weight: 400; line-height: 26px; padding-right: 80px; padding-top: 1vh; text-align: left; } #content_all h2 { font-size: 100px !important; letter-spacing: -0.04em; line-height: 90px; text-shadow: 0 0 1rem #333; } #content_all .text, .text-title { text-shadow: 0 0 1rem #333; } #content_all .columns > .column:nth-of-type(1) { font-size: 1em; letter-spacing: -0.04em; line-height: 90px; } #content_all .color-emphasis { color: #1e33da; } #content_first { backdrop-filter: blur(5px); color: #e77064; flex: none; flex-grow: 0; font-size: 40px; font-style: normal; font-weight: 600; height: 35px; letter-spacing: 0.2em; line-height: 95%; margin-bottom: 40px; margin-top: 20vh; opacity: 0.4; order: 0; text-align: center; text-transform: uppercase; width: 50%; left: 5vw; font-size: 3rem; max-width: 100vw; width: 100%; } #content_second { width: 50%; right: -20vw; backdrop-filter: blur(5px); color: rgba(255, 255, 255, 0.35); flex: none; flex-grow: 0; font-family: "GT Walsheim Pro"; font-size: 230px; font-style: normal; font-weight: 700; height: 170px; line-height: 65px; margin-bottom: 100px; opacity: 0.25; order: 1; text-align: center; max-width: 100vw; width: 100%; } .flip-handle { background: transparent; height: 10vh; position: relative; top: -25vh; width: 2vw; } .flip-container { color: #fffdfc; padding-top: 15vh; transform-origin: right; } .flip-container.flip-from-left { transform-origin: left; } .flip-container + .flip-container { height: 90vh; margin-top: -15vh; min-height: 91vh; padding-top: 0; } .flip-container .container-text { left: 30vw; position: relative; text-align: left; width: 50%; } .flip-container.flip-from-left .container-text { left: 613px; width: 320px; } .flip-container .color-emphasis { color: #1e33da; margin: 0 auto; max-width: 760px; } .flip-container .text-title { font-size: 60px; font-weight: 600; letter-spacing: -0.04em; line-height: 110%; margin-bottom: 20px; margin-top: 158px; } .flip-container .text-description { font-size: 18px; font-weight: 400; line-height: 26px; margin-bottom: 20px; width: 380px; } .flip-container .phone-container { background: rgba(225, 196, 183, 0.2); border-color: rgba(255, 255, 255, 0.4); border-radius: 70px; border-width: 2px; box-sizing: border-box; height: 700px; left: 66vw; position: relative; top: -540px; width: 342px; } .flip-container.flip-from-left .phone-container { left: 183px; top: -540px; } .flip-container .phone-container img { height: auto; margin-top: 70px; width: 318px; } .flip-container .call-to-action { align-items: center; background: transparent; border: 2px solid #743ad5; border-radius: 70px; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; flex: none; flex-direction: row; flex-grow: 0; gap: 10px; height: 56px; justify-content: center; order: 2; padding: 12px 36px; width: 198px; /*border-image-slice: 1;*/ /*border-width: 5px;*/ /*border-image-source: linear-gradient(to left, #743ad5, #d53a9d);*/ } #content-2 { margin-top: 50vh; } #flipping_zone { margin-top: -180vh; position: relative; }