2023-04-25 12:05:23 +02:00
|
|
|
|
2023-04-25 12:13:46 +02:00
|
|
|
#content_all {
|
|
|
|
position: relative;
|
2023-04-25 14:59:51 +02:00
|
|
|
top: 200vh;
|
2023-04-25 12:13:46 +02:00
|
|
|
padding-top: 100px;
|
2023-04-25 14:59:51 +02:00
|
|
|
color: #FFFDFC;
|
|
|
|
}
|
|
|
|
#content_all_img{
|
2023-04-25 12:13:46 +02:00
|
|
|
background: url('/img/bg_content.png');
|
|
|
|
background-size: cover;
|
|
|
|
}
|
2023-04-25 14:59:51 +02:00
|
|
|
|
|
|
|
#content_all .columns {
|
2023-04-25 12:13:46 +02:00
|
|
|
margin: 0 auto;
|
|
|
|
max-width: 80vw;
|
|
|
|
}
|
2023-04-25 14:59:51 +02:00
|
|
|
|
|
|
|
#content_all .text {
|
2023-04-25 12:13:46 +02:00
|
|
|
padding-top: 1vh;
|
|
|
|
padding-left: 80px;
|
|
|
|
}
|
2023-04-25 14:59:51 +02:00
|
|
|
|
2023-04-25 12:05:23 +02:00
|
|
|
|
2023-04-25 14:59:51 +02:00
|
|
|
#content {
|
2023-04-25 12:05:23 +02:00
|
|
|
height: 200px;
|
|
|
|
min-height: 200px;
|
|
|
|
}
|
2023-04-25 14:59:51 +02:00
|
|
|
#content h2 {
|
|
|
|
margin-top: 33vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
#content_first {
|
|
|
|
|
|
|
|
opacity: 0;
|
2023-04-25 12:05:23 +02:00
|
|
|
width: 1680px;
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2023-04-25 14:59:51 +02:00
|
|
|
#content_second {
|
|
|
|
opacity: 0;
|
|
|
|
margin-bottom: 100px;
|
2023-04-25 12:05:23 +02:00
|
|
|
width: 1680px;
|
|
|
|
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;
|
|
|
|
}
|
2023-04-25 15:54:47 +02:00
|
|
|
|
2023-04-25 17:22:09 +02:00
|
|
|
.flip-handle{
|
|
|
|
background: transparent;
|
|
|
|
height: 10vh;
|
|
|
|
width: 2vw;
|
|
|
|
position: relative;
|
|
|
|
top:-25vh;
|
|
|
|
}
|
2023-04-25 15:54:47 +02:00
|
|
|
|
|
|
|
.flip-container{
|
|
|
|
color: #FFFDFC;
|
|
|
|
padding-top: 15vh;
|
2023-04-25 17:22:09 +02:00
|
|
|
transform-origin: right;
|
2023-04-25 15:54:47 +02:00
|
|
|
}
|
2023-04-25 17:22:09 +02:00
|
|
|
.flip-container.flip-from-left{
|
|
|
|
transform-origin: left;
|
|
|
|
}
|
|
|
|
|
2023-04-25 15:54:47 +02:00
|
|
|
.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{
|
2023-04-25 17:22:09 +02:00
|
|
|
width: 320px;
|
|
|
|
left: 613px;
|
2023-04-25 15:54:47 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
2023-04-25 17:22:09 +02:00
|
|
|
left: 66vw;
|
2023-04-25 15:54:47 +02:00
|
|
|
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{
|
2023-04-25 17:22:09 +02:00
|
|
|
left: 183px;
|
2023-04-25 15:54:47 +02:00
|
|
|
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: 10px solid;
|
2023-04-25 17:22:09 +02:00
|
|
|
border-radius: 70px;
|
2023-04-25 15:54:47 +02:00
|
|
|
border-image-slice: 1;
|
|
|
|
border-width: 5px;
|
|
|
|
border-image-source: linear-gradient(to left, #743ad5, #d53a9d);
|
|
|
|
}
|