/*#fullpage {*/
/*    width: 98vw !important;*/
/*    !*height: 100vh !important;*!*/
/*    !*overflow: hidden !important;*!*/
/*}*/

.section {
    height: 100vh !important;
    /* width: 100% !important; */
    overflow: hidden !important;
    background: white !important;
    transition: all .3s;
    /*display: none;*/
}


.frame_container {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.frame_container .phone {
    position: relative;
    z-index: 1;
    height: unset;
    max-width: unset;
}

.frame_container .screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    /* * */
    border: .2rem solid white;
}

.frame_border {
    /* * */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}


.section_title {
    color: var(--primary);
    font-size: 1.5rem;
    margin-top: 10rem;
}

/*#fullpage {*/
/*    height: 100vh;*/
/*    overflow: scroll;*/
/*}*/
.app_section {
    /*position: absolute;*/
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: relative; */
    width: 100%;
    transition: all .73s;
    height: 80vh;

    /* padding: 0 12rem; */

}


/*.app_section.app_center {*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    transition: all .3s;*/
/*}*/

.app-red {
    /*left: 0 !important;*/
    /*transform: translateX(0%) !important;*/
    /*top: 0;*/
    transition: all .73s ease-in;
    justify-content: space-between !important;

}

section.first_section {
    transition: all 1.3s;
    position: relative;
}

section.first_section.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 1.3s;
}

.app-red > .app_title {
    display: block;
    width: unset;
    opacity: 1;
    transition: all 1.3s;
}

.app_container {
    position: absolute;
    padding: 0 18rem;
    right: 50%;
    /*display: inline-block;*/
    /*height: unset;*/
    margin-bottom: -20rem;
    /*margin-right: 50%;*/
    /*margin-left: 0;*/
    transform: translate(50%, 3%) scale(.6);
    transition: all 1s ease-in-out !important;


}

.app_section.show .app_container {

    margin-bottom: 0;
    transition: all .73s;

}

.arrow_bottom {
    position: absolute;
    bottom: -5rem;
    left: 1rem;
    opacity: 0;
    height: 13rem;
    transition: all .5s;
}

.app-red > .arrow_bottom {
    bottom: 12rem;
    opacity: 1;
}

.app-red > .app_container {
    right: 50%;
    /*margin-left: 0rem;*/
    /*margin-right: 0;*/
    transform: translateX(90%) scale(.5);

    transition: all 1s ease-in-out !important;
}

.app-red > .app_title {
    margin-left: 30rem;
}


.opacity {
    -webkit-animation: fadeIn 1s linear;
    -o-animation: fadeIn 1s linear;
    animation: fadeIn 1s linear;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


#fullpage {


}

.app_title {
    display: flex;
    max-width: 50%;
    align-items: center;
    padding-right: 16rem;
}
.app_title img {
    transform: rotate(180deg);
    display: inline-block;
}


.bg-primary.fullpage .section {
    background: var(--primary) !important;
}

.bg-primary .app-red > .app_title {
   // filter: brightness(0) invert(1);
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;

}
.bg-primary .frame_container .screen{
    border: .2rem solid #006666;
}

.stepNumber {
    height: 4.5rem;
    width: 4.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3rem;
    margin-bottom: 3rem;}

.stepNumber .img {
    height: 3rem;
    width: 3rem;
    position: absolute;
    filter: brightness(0) invert(1);

}


.stepNumber .img.bottom {
    bottom: -2.9rem;
    right: 0.4rem;
    transform: rotateZ(
        226deg );
    );
}

.stepNumber .img.top {
    bottom: 2.6rem;
    left: -2.6rem;
    transform: rotateZ(
        39deg );
    );
}
@media (max-width: 1000px) {
    .app_section {
        padding:0 2rem !important;
    }
    .app-red > .app_container {
        transform: translateX(80%) scale(.45);
    }

}
@media (max-width: 830px) {
    .app_section {
        padding:0 0 !important;
    }
    .app-red > .app_container {
        transform: translateX(75%) scale(.4);
    }

}

@media (max-height: 660px) {
    .app_container {
        /* display: none; */
    }
}

@media (max-width: 700px) {
    .section_title {
        font-size: 1rem;
    }

    .app_container {
        margin-top: -31rem;
    }

    .app_section {
        display: block;
        padding: 0 .5rem;
    }

    .app_title {
        max-width: 100% !important;
        position: absolute;
        align-items: start;
        margin-top: 1rem;
        overflow: hidden;
    }

    .arrow_bottom {
        /* height: 3rem; */
    }

    .app-red > .app_container {
        height: unset;
        right: 50%;
        margin-left: 50%;
        margin-right: 0;
        transform: translateX(50%) scale(.3);

        transition: all 1s ease-in-out !important;
    }
}

.section.changeApp {
    height: 50rem !important;
}