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