/* ==============================
   Phone
   ============================== */
@media (max-width: 480px) and (min-width: 320px){
    nav.navbar.mobile-out{
        display: none !important;
    }
    .mobile-off{display: none;}
    .height-xs-60{
        max-height: 60vh;
    }
    h2,h3,h4,h5{
        font-weight: bold;
    }
    h1 {
        font-size: 30px;
        line-height: 42px;
        font-weight: bold;
    }
    body .open-menu div {
        width: 45px;
        height: 45px;
    }
        .main--menu ul.mm--menu>li>a{line-height: 1.2 !important;}
        body .open-menu.opened div span:nth-child(2) {
            width: 0% !important;
        }
        .open-menu div span {
            width: 24px !important;
        }
        .other-menu-options li {margin-bottom: 5px !important;}
    img.sevenly--logo{width: 170px}
        .navigation--scroll.container-fluid.actived::before{border-radius: 0 !important;}
        header .navigation--scroll {
            padding: 15px 15px;
        }
        body header.sticky.actived {
            width: 100%;
            border-radius: 0px;
            top: 0px;
        }
        .bigItems span:not(.normal) {
            font-size: 5.7vw !important;
            line-height: 1.2;
        margin-bottom: 0px;
        }
    .open-menu{
        opacity: 1 !important;
    }
    .bigItems span {
        font-size: 5.7vw !important; 
        width: 100%;
        margin-bottom: 20px;
    }
    body .number-effect {
        display: inline-flex;
        border: 3px solid black;
        border-radius: 200px;
        width: 28px;
        font-size: 3.6vw;
        align-items: center;
        justify-content: center;
        height: 28px;
        margin: 4px 5px;
        font-weight: 900;
    }
    .decoration {  
        width: calc(100% - 15px) !important; 
        font-size: 14px !important; 
    }
    .decoration img {
        max-width: 40px;
    }
    body .fz-30 {
        font-size: 24px;
        font-weight: 400 !important;
        line-height: 1.3;
    }
    body .btn.btn-large {
        font-size: 16px;
        padding: 9px 50px 9px 34px;
        line-height: 25px;
        width: 100% !important;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .carousel--home-scroll {
        display: flex;
        padding: 0;
        list-style: none;
        gap: 0 10px;
        width: 230%;
    }
    .carousel--home-scroll{
        min-width: 300%;
    }
    body .pt-25vh {
        padding: 25vh 0px 10px 0px;
    }
    body .scrolling img{height: 65px;}
    body .video--scrolling-h1 h1 {
        font-size: 24vw !important; 
    }
    body .videoinit {
        width: 33%;
        display: block;
        position: relative;
        z-index: 999;
        border: 0px solid #fff;
        height: 75px;
        top: 3px;
    }
    body .videoinit video{
        width: 136px
    }
    body .video--scrolling-h1 h1.flex-scrolling-h1 {
        gap: 0 5px;
    }
    body #init-scrolling {
        min-height: 70vh !important;
        padding: 0;
        height: 89vh !important;
    }
    body footer .navbar-nav { 
        gap: 0 0px;
    }
    body .hyperlink--big-h1 {
        font-size: 14vw;
        font-weight: 900;
    }
    body ul.navbar-nav a {
        padding-left: 13px !important;
        text-wrap: nowrap;
    }
    body footer ul.navbar-nav a span{
        font-size: 12px;
    }
    footer img{width: 200px;}
    body .fz-80 {
        font-size: 30px; 
    }
    .fz-20 {
        font-size: 18px;
        line-height: 1.5;
    }
    body p{
        font-size: 18px;
        line-height: 1.6;
    }
    section.height-fit{height: auto !important;
        padding-top: 180px;
    }
    
    section.height-fit .vertical-align {
        position: relative;
        top: 0%;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }
    .revert{flex-direction: column-reverse;}
    .mb-xs-60{margin-bottom: 60px !important;}
    .mb-xs-40{margin-bottom: 40px !important;}
    .mb-xs-20{margin-bottom: 20px !important;}
    body .center-svg svg { 
        left: -7px;
        top: -124px;
        width: 72%;
    }
    body .mouserhover--parallax img {
        scale: 1.1;
    }
    body .mouserhover--parallax.img-3 {
        left: 9vh;
        bottom: 33vh;
        margin: auto;
        min-width: 83%;
        height: auto;
    }
    body h1.keepit span,
    body h1.keepit {
        text-transform: uppercase;
        color: #012a30;
        font-weight: 900;
        font-size: 16vw !important;
        line-height: .95 !important;
    }
    body .revealImg {
        clip-path: inset(50%);
        position: relative;
        right: 0px;
        top: 7px;
        overflow: hidden;
        display: block;
        margin-bottom: 40px;
    }
    body .ly7,
        body .header--title {
        color: #003036;
        font-weight: bold;
        font-size: 18px;
        line-height: 1.3;
    }
    .progresive-list li{
        flex-wrap: wrap;
        padding: 40px 0px !important;
        height: auto !important;
    }
    .progresive-list li p:nth-child(3){
        width: 100%;
        margin-top: 40px;
    }
    .backToTopX{
        display: none !important;
    }
    .col-xs-12 button{width: 100%;margin-top: 40px;}
    .col-xs-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    body .pt-xs-90{padding-top: 90px !important;}
    body .astronaut{
        width: 64%;
    }
        body .rockA {
            position: absolute;
            left: -63%;
            width: 110%;
            top: 0;
            bottom: 0;
            animation: floatA 15s infinite ease-in-out;
            margin: auto;
            height: 100%;
            object-fit: cover;
        }
                body .rockB {
                    position: absolute;
                    right: -63%;
                    width: 110%;
                    top: 0;
                    bottom: 0;
                    animation: floatB 15s infinite ease-in-out;
                    margin: auto;
                    height: 100%;
                    object-fit: cover;
                }
    body .mouserhover--parallax.img-1 {
        left: 32px;
        top: 0px;
        min-width: 50%;
    }
    body .mouserhover--parallax.img-2 {
        right: 10px;
        top: 20vh;
        min-width: 50%;
    }
    footer.height-100 {
        max-height: 70vh !important;
    }
    body .x-gap-60>* {
        padding-left: 15px;
        padding-right: 15px;
    }
    body .progresive-list.servicesmod li p {
        width: 75%;
    }
        .portfolio-grid.work-4col li,
        .blog-grid.work-4col li{
            width: 100% !important;
        }
    .mt-xs-120{margin-top: 120px !important;}
    .xs-wrap{flex-wrap: wrap    ;}
    .portfolio-filter{
        gap: 20px;
        margin-bottom: 30px;
    }
    section.portfolio img { 
        object-fit: cover;
    }
    section.test{
        height: auto !important;
    }
    .info_project p{margin: 0 !important;}
    main section.bg_black_xs, section.pauto{
        height: 100vh !important;
    }
    section.test:not(.pauto)  .vertical-align {
        position: relative;
        top: 0%;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }
    .xs-height-60{
        max-height: 60vh;
    }
}