/*********************************************************************************************************/
/*************************************************MAIN****************************************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

/* ::-webkit-scrollbar {
    display: none;
} */

.shadow {
    -webkit-box-shadow: 2.5px 2.5px 7.5px 2.5px rgba(0, 0, 0, 0.2);
    box-shadow: 2.5px 2.5px 7.5px 2.5px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.rotate1 {
    transform: rotateZ(-15deg);
}

.rotate2 {
    transform: rotateZ(10deg);
}

.underline{
    text-decoration: underline;
}

.keywords {
    text-indent: -500000px;
    display: inline-block;
    margin-bottom: -10%;
}

/*********************************************************************************************************/
/*************************************************TEXT****************************************************/

h1,
h2,
h3,
h4,
p,
a {
    font-family: 'Kanit', 'sans-serif';
    color: #FFFFFF;
}

h1,
h2,
h3,
h4,
a {
    font-weight: 700;
    text-transform: uppercase;
}

p {
    font-weight: 400;
}

a:hover {
    color: #8BB624;
    transition: 0.5s all ease;
}

/*********************************************************************************************************/
/*************************************************COLORS****************************************************/

.gradient {
    background: linear-gradient(180deg, rgba(23, 4, 46, 1) 35%, rgba(57, 17, 82, 1) 100%);
}

.purple1 {
    background-color: #160526;
}

.purple2 {
    background-color: #1B062E;
}

.purple3 {
    background-color: #2C0A4D;
}

.white {
    color: #FFFFFF;
}

.green {
    color: #8BB624;
}

/*********************************************************************************************************/
/*************************************************ANIM****************************************************/

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0px);
    opacity: 1;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-6-11 16:30:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.fade-in {
    -webkit-animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
    animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
    animation: fade-in-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

/*********************************************************************************************************/
/************************************************LANDSCAPE************************************************/

/************************************************LANDSCAPE MAIN************************************************/

@media screen and (orientation:landscape) {

    /************************Main************************/

    .landscape {
        display: inline-block;
    }

    .portrait {
        display: none;
    }

    h1,
    h2,
    h3,
    h4 {
        line-height: 2.6rem;
    }

    p,
    a {
        line-height: 1.6rem;
    }

    h1 {
        font-size: 3.6rem;
        margin-bottom: 2rem;
    }

    h2 {
        font-size: 2.6rem;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    /************************Body & Wrapper************************/

    body,
    .wrapper {
        width: 100%;
        min-height: 24rem;
    }

    .wrapper .wolken {
        position: fixed;
        width: 60%;
        opacity: 0.4;
        margin-left: 38.2%;
        margin-top: 1rem;
    }

    /************************Header************************/

    header {
        z-index: 20;
        width: 100%;
        height: 3rem;
        position: fixed;
    }

    .logo {
        width: 10%;
        margin-left: 45%;
        margin-top: 0.6rem;
    }

    .menue {
        display: none;
    }

    /************************Navigation************************/

    .navigation-portrait {
        display: none;
    }

    .navigation-portrait ul {
        display: none;
    }

    /************************Section************************/

    section {
        z-index: 10;
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding-left: 10%;
        padding-right: 10%;
        overflow: hidden;
    }

    .zero,
    .one,
    .two {
        padding-top: 10rem;
    }

    /************************Start************************/

    .start .zero {
        width: 100%;
        min-height: 100vh;
        align-items: center;
        text-align: center;
        padding-top: 12rem;
    }

    .start .zero .auto {
        width: 50%;
        margin-top: 3rem;
        margin-bottom: 8rem;
    }

    .start .zero .arrows {
        width: 3%;
    }

    /************************About************************/

    .about .one {
        width: 50%;
        min-height: 100vh;
        padding-top: 8rem;
        padding-bottom: 1rem;
        display: inline-block;
    }

    .about .one .smartphone {
        width: 42.5%;
        margin-left: 10%;
    }

    .about .two {
        width: 50%;
        min-height: 100vh;
        float: right;
    }

    .about .two .trenner {
        width: 50%;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }

    /************************Features************************/

    .features .zero {
        width: 100%;
        min-height: 100vh;
        align-items: center;
        text-align: center;
    }

    .features .box {
        width: 100%;
        align-items: center;
        display: flex;
        padding-top: 3rem;
    }

    .features .box .item {
        width: 25%;
        min-height: 24rem;
        display: inline-block;
        padding: 3%;
    }

    .features .item-img {
        height: 12rem;
    }

    .features .box .item img {
        height: 75%;
    }

    /************************Load************************/

    .load .one {
        width: 50%;
        min-height: 100vh;
        padding-top: 8rem;
        padding-right: 4%;
        display: inline-block;
    }

    .load .one .download {
        width: 50%;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .load .two {
        width: 50%;
        min-height: 100vh;
        float: right;
    }

    .load .scenery {
        width: 100%;
    }

    /************************Data************************/

    .data .zero {
        width: 100%;
        min-height: 100vh;
        margin-bottom: 2rem;
    }

    .data .zero p{
        margin-bottom: 2rem;
    }

    /************************Footer************************/

    footer {
        width: 100%;
        height: 8rem;
        padding-top: 3%;
    }

    .navigation-landscape {
        width: 60%;
        height: 3rem;
        margin-left: 20%;
    }

    .navigation-landscape ul {
        width: 33%;
        height: 3rem;
        display: inline-block;
        text-align: center;
    }

}

/************************************************LANDSCAPE SMALL************************************************/

@media screen and (orientation:landscape) and (max-width:1280px) {

    /************************Main************************/

    h3 {
        font-size: 1.2rem;
    }

    /************************Section************************/

    section {
        padding-left: 5%;
        padding-right: 5%;
    }

    /************************Start************************/

    .start .zero {
        padding-top: 14rem;
    }

    /************************About************************/

    .about .one .smartphone {
        width: 50%;
        margin-left: 10%;
    }

    /************************Features************************/

    .features .box .item {
        padding: 2%;
    }

    /************************Footer************************/

    .navigation-landscape ul {
        width: 32%;
    }

}

/************************************************LANDSCAPE GRAND************************************************/

@media screen and (orientation:landscape) and (min-width:1920px) {

    /************************Main************************/

    h1 {
        font-size: 4.6rem;
    }

    h2 {
        font-size: 3.0rem;
    }

    h3 {
        font-size: 2.0rem;
    }

    /************************Body & Wrapper************************/

    .wrapper .wolken {
        width: 80%;
        margin-left: 23.6%;
    }

    /************************Header************************/

    header {
        height: 4rem;
    }

    .logo {
        margin-top: 0.8rem;
    }

    /************************Section************************/

    section {
        padding-left: 5%;
        padding-right: 5%;
    }

    /************************Start************************/

    .start .zero {
        padding-top: 18rem;
    }

    /************************About************************/

    .about .one .smartphone {
        width: 35%;
        margin-left: 20%;
    }

    .about .two .trenner {
        margin-bottom: 4rem;
        margin-top: 2rem;
    }

    /************************Load************************/

    .load .one .download {
        margin-top: 5rem;
        margin-bottom: 4rem;
    }

    /************************Footer************************/

    footer {
        width: 100%;
        height: 8rem;
        padding-top: 3%;
    }

    .navigation-landscape {
        width: 60%;
        height: 3rem;
        margin-left: 20%;
    }

    .navigation-landscape ul {
        width: 33%;
        height: 3rem;
        display: inline-block;
        text-align: center;
    }

}

/*********************************************************************************************************/
/************************************************PORTRAIT************************************************/

/************************************************PORTRAIT MAIN************************************************/

@media screen and (orientation:portrait) {

    /************************Main************************/

    .landscape {
        display: none;
    }

    .portrait {
        display: inline-block;
    }

    h1 {
        line-height: 2.6rem;
    }

    h2,
    h3,
    h4 {
        line-height: 2.0rem;
    }

    p,
    a {
        line-height: 1.6rem;
    }

    h1 {
        font-size: 2.6rem;
        margin-bottom: 2rem;
    }

    h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 1.2rem;
        margin-bottom: 0.6rem;
    }

    /************************Body & Wrapper************************/

    body,
    .wrapper {
        width: 100%;
        min-height: 24rem;
    }

    .wrapper .wolken {
        position: fixed;
        width: 200%;
        opacity: 0.4;
        margin-left: 10%;
        margin-top: 2rem;
    }

    /************************Header************************/

    header {
        z-index: 20;
        width: 100%;
        height: 4rem;
        position: fixed;
    }

    .logo {
        width: 40%;
        margin-left: 5%;
        margin-top: 1.0rem;
    }

    .menue {
        width: 2%;
        margin-right: 5%;
        margin-top: 1rem;
        float: right;
    }

    /************************Navigation************************/

    .navigation-portrait {
        display: none;
        z-index: 20;
        width: 100%;
        min-height: 12rem;
        margin-top: 8rem;
        position: fixed;
        padding: 10%;
        text-align: center;
    }

    .navigation-portrait ul {
        width: 100%;
        height: 4rem;
    }

    /************************Section************************/

    section {
        z-index: 10;
        position: relative;
        width: 100%;
        min-height: 100vh;
        padding-left: 10%;
        padding-right: 10%;
        overflow: hidden;
    }

    .zero,
    .one,
    .two {
        padding-top: 4rem;
    }

    /************************Start************************/

    .start .zero {
        width: 100%;
        min-height: 100vh;
        align-items: center;
        text-align: center;
        padding-top: 12rem;
    }

    .start .zero .auto {
        width: 100%;
        margin-top: 3rem;
        margin-bottom: 8rem;
    }

    .start .zero .arrows {
        width: 15%;
    }

    /************************About************************/

    .about .one {
        width: 100%;
        min-height: 12rem;
        display: inline-block;
    }

    .about .one .smartphone {
        width: 60%;
        margin-left: 20%;
        margin-bottom: 4rem;
    }

    .about .two {
        width: 100%;
        min-height: 24rem;
        align-items: center;
        text-align: center;
    }

    .about .two .trenner {
        width: 80%;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }

    /************************Features************************/

    .features .zero {
        width: 100%;
        min-height: 100vh;
        padding-top: 12rem;
        text-align: center;
    }

    .features .box {
        width: 100%;
        align-items: center;
        display: inline-block;
        margin-top: 4rem;
    }

    .features .box .item {
        width: 100%;
        min-height: 12rem;
        margin-bottom: 4rem;
        display: inline-block;
    }

    .features .item-img {
        min-height: 4rem;
        margin-bottom: 2rem;
    }

    .features .box .item img {
        width: 30%;
    }

    /************************Load************************/

    .load .one {
        width: 100%;
        min-height: 12rem;
        align-items: center;
        text-align: center;
        display: inline-block;
    }

    .load .one .download {
        width: 80%;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .load .two {
        width: 100%;
        min-height: 12rem;
        float: right;
    }

    .load .scenery {
        width: 100%;
        margin-bottom: 2rem;
    }

    /************************Data************************/

    .data .zero {
        width: 100%;
        min-height: 12rem;
        margin-bottom: 2rem;
        padding-top: 8rem;
    }

    .data .zero p{
        margin-bottom: 2rem;
    }

    /************************Footer************************/

    footer {
        width: 100%;
        height: 12rem;
    }

    .navigation-landscape {
        width: 60%;
        height: 3rem;
        margin-left: 20%;
    }

    .navigation-landscape ul {
        width: 33%;
        height: 3rem;
        display: inline-block;
        text-align: center;
    }

}

/************************************************PORTRAIT IPAD************************************************/

@media screen and (orientation:portrait) and (min-width: 768px) {

    /************************Main************************/

    h1 {
        margin-bottom: 1.4rem;
    }

    h2 {
        margin-bottom: 1.4rem;
    }

    /************************Body & Wrapper************************/

    .wrapper .wolken {
        width: 130%;
    }

    /************************Header************************/

    header {
        height: 5rem;
    }

    .logo {
        width: 30%;
        margin-top: 1.1rem;
    }

    .menue {
        width: 1.5%;
        margin-top: 1.1rem;
    }

    /************************Navigation************************/

    .navigation-portrait {
        min-height: 4rem;
        margin-top: 18rem;
    }

    .navigation-portrait ul {
        height: 5rem;
    }

    /************************Section************************/

    section {
        padding-left: 5%;
        padding-right: 5%;
    }

    /************************Start************************/

    .start .zero {
        padding-top: 24rem;
    }

    .start .zero .arrows {
        width: 8%;
    }

    /************************About************************/

    .about .one .smartphone {
        width: 40%;
        margin-left: 30%;
    }

    .about .two .trenner {
        width: 40%;
        margin-bottom: 4rem;
        margin-top: 4rem;
    }

    /************************Features************************/

    .features .box .item {
        width: 49%;
    }

    .features .box .item img {
        width: 20%;
    }

    /************************Load************************/

    .load .one .download {
        width: 50%;
        margin-top: 4rem;
    }

    .load .scenery {
        width: 60%;
        margin-left: 20%;
    }

}