@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');


.shippori-antique-b1-regular {
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#Preparati
{
    .Raleway-900 {
        font-size: 38px;
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: #28a92b;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    line-height: 100px;
    font-size: 50px;
    text-align: center;
    will-change: transform;
  }
  .box.active {
    background-color: red;
  }
  
  .box-a {
    top: 200px;
    background-color: #8d3dae;
  }
  
  .box-b {
    top: 600px;
  }
  
  .box-c {
    top: 1000px;
    background-color: #e26c16;
    will-change: transform;
  }

#monitorDebug {
    position: fixed;
    top:0;
    left: 50%;
    background:#000;
    color:white;
    padding:3px;
    border:1px solid red;
    z-index: 12000;
}

/* START =================== */
#startButton {
    display:none;
    opacity: 0;
    position: fixed;
    left: 50%;
    margin-top: -66px;
    margin-left: -66px;
    z-index: 90;
    top: 45%;
}

@media only screen and (min-width: 933px)
{

    #startButton
    {
        display:block;
        left:75%;
        top: 25%;
    }


}

@media only screen and (min-height: 1127px)
{
    #startButton
    {
        top: 25%;
    }
}



.copySmart {
    margin-top: .5em;
    font-size: 1.3em;
    width: 100%;
    line-height: 137%;
    
}

.copySmart.intro {
    text-align:center;
    display:none;
}

.textContainer {
    height: 1em;
    overflow: hidden;
    text-align: left;
    display: block;
}



.megaButtonPosition 
{

    position: absolute;
    text-align: center;
    margin-top: -150px;
    width: 100%;
    z-index: 92;
    top: 50%;
}

#cntRocket {

    width:100%;
    height:100%;

    /* Rocket ------------------*/
    &.inHome {
        position: relative;
        left: 0; top: 0; 
        width:100%;
        height:100%;
        z-index: 90;
    /* background:yellow;*/
    }

    &.bottomRight
    {
        position:fixed;
        left:inherit;
        top:inherit;
        bottom:0;
        right:0;
        width:128px;
        height:128px;
        z-index:40;
    }

    &.rocketFloat
    {
        position:fixed;
        left:calc(50% - 128px);
        top:calc(50% - 128px);
        width:256px;
        height:256px;
        z-index:90;
        border:2px dotted gray;
    }

    &.rocketFloat.right
    {
        left:calc(100% - 272px);
    }

    &.rocketFloat.left
    {
        left:16px;
    }

    &.rocketFloat.bottom
    {
        top:calc(100vh - 272px);
    }



    .loader {
        position:absolute;
        left:0;
        bottom:0;
        height:8px;
        background-color:var(--green);
        width:10px;
    }

}

    .rocketPark
    {
        position:absolute;
        z-index:90;
        /*border:2px dotted red;*/

        width:128px;
        height:128px;

&.miDown {
    left: 50%;
    top: 66%;
    margin-left: -100px;
}
        &.right {
            right: 0;
            top: -70px;
        }

        &.left {
            left: 0;
            top: -22px;
            width: 128px;
            height: 128px;
        }

        &.landing {
            bottom: 0;
            width: 240px;
            height: 300px;
            left: 0;
            margin-left:0;
        }

    /*
        &.landing {
            bottom: 0;
            width: 300px;
            height: 300px;
            left: 50%;
            margin-left: -150px;
        }
*/
    }

.gradBeige {
    /*
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(200,195,191,1) 43%);
*/
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(200,195,191,1) 43%, rgba(243,243,243,0) 73%);
}
.gradBW {
    background: white;
    background: linear-gradient(180deg, rgba(0,0,0) 0%, rgba(10,10,10) 49%, rgba(255,255,255,1) 58%);
}

/* Zone navicella */

.fullPageMobile {
    position: absolute;
    top:0;
    width: 100vw;
    height: var(--unit-100vh);

    /*background:yellow;*/
}
#divSpace2 {
    position: fixed;
    width: 100vw;
    height: 100vw;
    max-height: var(--unit-50vh);
    bottom:0;
    z-index:10;
    // display:none;
}

#divSpace1 {
    position: relative;
    width: 100vw;
    height: 100vw;
    margin-left: -14px;
    margin-top:90px;
    z-index:90;
    
}

#divSpaceFly {
    position:fixed;
    bottom:10px;
    right:10px;
    width:256x;
    height:256px;
    z-index:40;
    border:2px dotted gray;
}

.centralButton
{
    text-align:center
}

.centralButton.mobile {
    text-align: center;
    position: absolute;
    margin-top: -97px;
    width: 100%;
    z-index: 91;
}

.redButton 
{

    background:red;
    color:white;
    border-radius:100%;
    display: inline-block;
    
}

.redButton.outside 
{
    width: 132px;
    height: 132px;
    border-radius:100%;
    padding:16px;
    background-image: linear-gradient(-45deg, #b02a2a, #c30101);
    cursor:pointer;
}

.redButton.inside {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    padding: 9px;
    background-image: linear-gradient(-40deg, #f54141, #810303);
    transition: .5s linear;
}

.redButton.inside:hover {
    background-image: linear-gradient(-40deg, #ff5959, #3c0303);
}

.redButton.inside .text {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    text-align: center;
    transform: translate(0px, -10px);
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 24px;
}

.posRocketVideo {
    position:absolute;
    left:0;
    bottom:0px;
    z-index:-12;
}
.videoRocket {
    width:100vw;
    height:100vw;
}
#smooth-content {
    overflow: visible;
    width: 100%;
/*    height: 4000px;*/
}

.text.center {
     text-align:center;
}

#shipZone {
    position: absolute;
    right:20px;
    top: 85vh;
    z-index: 20;
    margin-left: -50px;
    text-align: center;
    width: 100px;
}
#shipZone:hover {cursor:pointer;}
#shipZone img {width:40px; position:absolute; transition: .5s linear;}
#shipZone:hover img {width:50px;}
#shipZone .shadow {
    margin: 80px 20px;
    z-index: -4;
    filter: blur(3px);
    opacity: .4;
}
.backAstro {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    background:white;
}

.overFrame {
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:3;
}
/*
.menuPushable {
    height: 100vh;
    overflow:hidden;
}
*/
.myRow {
    position:absolute;
    top:0px;
    width:100vw;
}

#frame2 {height:100vh; background:#daf23d; 
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(218,242,61,1) 32%, rgba(218,242,61,1) 76%, rgba(255,255,255,1) 100%);
    position:relative;
}


.lgSky
{
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,0.6450769761029411) 0%, rgba(0,212,255,0.5638444831057423) 27%, rgba(255,255,255,1) 55%);    
}

#claim1 {
    padding-top:9px;
    text-align: center;
}

#aniRocket {
    position: absolute;
    width: 320px;
    height: 320px;
    left: 50%;
    margin-left: -160px;
    bottom: 12%;
    z-index: -5;
}
#blocki {

    position:relative;

    .segment {
        height:341px;
        border-radius:1em;
    }
    .title {
        margin-bottom:.5em;        
        font-size:3em;
    }
    .iconCont {
        text-align:center;    
        font-size:80px;
        margin-top: 5px;
        color:#666;

    }
    .copySmart2 {
        font-size:1.2em;
    }

}

/*
#moonOlive {
    position: absolute;
    width: 250px;
    height: 250px;
    margin-left: -150px;
    left: 50%;
    bottom: 16%;
    border-radius: 100%;
    // background: radial-gradient(circle at 20%, rgba(2, 0, 36, 1) 0%, rgb(177 241 47) 0%, rgb(146 232 0 / 84%) 27%, rgba(254, 254, 254, 1) 75%); 
    background: url(/cdn/img/moon-2.png) 50% 50%;
    border: 1px solid #dbffa6;
    // background-position: 20% 20%; 
    background-size: 117%;
    opacity: .8;
    z-index: -10;
    filter:blur(10px);
}
*/
#moonOlive {
    position: absolute;
    width: 175px;
    height: 175px;
    margin-left: -150px;
    left: 70%;
    bottom: 23%;
    border-radius: 100%;
    background: url(/cdn/img/moon-2.png) 50% 50%;
    border: 1px solid #dbffa6;
    background-size: 117%;
    opacity: .8;
    z-index: -10;
    filter: blur(10px);
}

#topClouds {
    position: fixed;
    left:50%;
    width: 1000px;
    height: 300vh;
    background-size: 100%;
    z-index: -22;
    top: 0;
    max-width: 1127px;
    margin-left:-500px;
    opacity:0;
    background-image: url("/cdn/img/clouds.png");
}

#backBrands {
    position: fixed;
    left:0;
    width: 100%;
    z-index: -23;
    top: 58%;
    white-space: nowrap;
    opacity:0;
}

#backBrands .brand {

    width:120px;
    margin-right:12px;

}

.clouds
{
    z-index: 15;
    background-image: url("/cdn/img/clouds.png");
}



ul.v-slides {
    list-style-type: none;
    padding:0;
    margin: 0;
}
.v-slide 
{
    text-align:center;
    line-height: 1em;
    color: #b5cc18;

    span {
        color:#666;
    }
}

.megaButton {
/*    margin-top: 1em !important;*/
    font-size: 1.8em !important;
}
.centerMobile {text-align:center}

/*----------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------------------*/

:root {
    --padding: 3vmin;
    --color-background: #D0CBC7;
  }

  .copyBody {
    font-size: 1.2em;
    line-height: 125%;
}

/*============================================
GROUND CONTAINER
==============================================*/

.ground-container
{
    position: relative;
    /*overflow: hidden;*/

    h2 {
        font-family: "Raleway", sans-serif;
        font-size: 30px;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: normal;
        line-height: 100%;
    }
    
     .sectionFullPage
    {
        position: relative;
        padding: var(--padding);
        --pad2: calc(var(--padding)* 2);
        // width: calc(100vw - var(--pad2));
        width:100%;
        height: calc(100vh - var(--pad2));
        margin: 0 auto;
        z-index: 2;
    }

     .context {
        position:relative;
        min-height: 365px;
    }
    
    .section 
    {
        position: relative;
        padding: var(--padding);
        --pad2: calc(var(--padding)* 2);
        width:100%;
        margin: 0 auto;
        z-index: 2;

        &.left {

            text-align:left;
            
            .context .btnAction {
                position: absolute;
                right: 0;
            }

            .context .title {
                position: absolute;
                text-align: right;
                z-index: -80;
                background-image: linear-gradient(0, #5f680d, #edf165);
                background-clip: text;
                color: transparent;
                transform-origin: 0% 0%;
            }

        }

        &.right {

            text-align:right;
            
            .context .btnAction {
                position: absolute;
                right: 0;
            }

            .context .title {
                position: absolute;
                text-align: left;
                z-index: -80;
                background-image: linear-gradient(0, #5f680d, #edf165);
                background-clip: text;
                color: transparent;
                transform-origin: 0% 0%;
            }


        }

            .logo {
                position: absolute;
                width: 0;
                height: 60px;
                background-size: cover;
                z-index: 80;
                background-position: center;
                background-repeat: no-repeat;
            }


    }
    
     .parallax {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: -200px;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        transform-origin: top center;
    }
    
        
}


.devSml .ground-container
{
    position: relative;
    /*overflow: hidden;*/

    h2 {
        font-family: "Raleway", sans-serif;
        font-size: 30px;
        font-optical-sizing: auto;
        font-weight: 900;
        font-style: normal;
        line-height: 100%;
    }
    
     .copyLeft {
        padding-right:20px;
    }
    
     .copyRight {
        padding-left:20px;
    }
    
     .sectionFullPage
    {
        position: relative;
        padding: var(--padding);
        --pad2: calc(var(--padding)* 2);
        // width: calc(100vw - var(--pad2));
        width:100%;
        height: calc(100vh - var(--pad2));
        margin: 0 auto;
        z-index: 2;
    }

     .context {
        position:relative;
        min-height: 365px;
    }
    
    .section 
    {
        position: relative;
        padding: var(--padding);
        --pad2: calc(var(--padding)* 2);
        width:100%;
        margin: 0 auto;
        z-index: 2;


        p {
            font-size:18px;
        }

        &.right {

            text-align:right;
            h2 {
                padding-left:80px;
            }

            .context .title {
                text-align:left;
                top: -67px;
                font-size: 62px;
                z-index: -80;
                right: inherit;
                left: 7px;
                background-image: linear-gradient(0, #5f680d, #edf165);
                background-clip: text;
                color: transparent;
                transform-origin: 0% 0%;
                transform: perspective(928px) rotate3d(0,1,0,35deg);
                position: absolute;
            }

            .logo {
                height: 60px;
                top: 9px;
                right: 0;
                
            }
            
            .context .btnAction {
                position: absolute;
                right: 0;
            }



        }

        &.left 
        {
            h2 {
                padding-right:80px;
            }


            .context .title {
                text-align: right;
                top: -67px;
                font-size: 62px;
                z-index: -80;
                right: 12px;
                left: inherit;
                background-image: linear-gradient(0, #5f680d, #edf165);
                background-clip: text;
                color: transparent;
                transform-origin: 100% 0%;
                transform: perspective(928px) rotate3d(0,1,0,35deg);
                position: absolute;
            }

            .logo {
                height: 60px;
                top: 0px;
                left: 0;
            }

        }
    }
    
     
    
     .parallax {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: -200px;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        transform-origin: top center;
    }
    
        
}

html.devStd
{
    .ground-container
        {
//             padding-top: 300px;        

            .context {
                position: relative;
                min-height: 300px;
            }        

            h2 {
                font-size: 44px;        
            }

            .section{

                        min-height: 56vh;

                &.right .context .title {
                    position:absolute;
                    text-align:left;
                    top: -190px;
                    font-size: 159px;
                    z-index: -80;
                    right: inherit;
                    left: -9px;
                    background-image: linear-gradient(0, #5f680d, #edf165);
                    background-clip: text;
                    color: transparent;
                    transform-origin: 0% 0%;
                    transform: perspective(928px) rotate3d(0,1,0,35deg);
                }
                
                &.left .context .title {
                    position:absolute;
                    top: -180px;
                    font-size: 159px;
                    z-index: -80;
                    right: 0;
                    left: inherit;
                    background-image: linear-gradient(0, #5f680d, #edf165);
                    background-clip: text;
                    color: transparent;
                    transform-origin: 100% 0%;

                    transform: perspective(928px) rotate3d(0,1,0,-24deg);
                }
                p {
                    font-size: 20px;
                }        

                &.right .logo {
                    height: 150px;
                    right:0;
                    top:0;
                }

                &.left .logo {
                    height: 150px;
                    left:0;
                    top:0;

                }
            }


        }
}


.ground
{
    z-index: -1;
    background-image: url("/cdn/img/panoramic.jpg"); 	
}


.myBorder {
        outline: 8px solid #ffffff30 !important;
}

.myBorder:hover {
    outline: 8px solid #ffffffff !important;
}


/*----------------------------------------------------------------------------------------------------------------------------------*/
/*	723px	933px	1127px*/

@media only screen and (min-width: 723px)
{
    .vertDist{
        height:59px;
    }

    #divRocket {
        width:50vw;
        height:50vw;
      }
    
    .videoRocket {
        position:absolute;
        left:50%;
        top:54px;
        width:50vw;
        height:50vw;
        z-index:-12;
    }

    #Preparati 
    {
        .Raleway-900 {
            font-size: 54px;    
        }

        .copySmart.intro {
            width: 100%;
            padding: 0 4em;
            font-size: 1.4em;
        }
    }

    .centerMobile {text-align:inherit}


    #moonOlive {
        width: 320px;
        height: 320px;
        margin-left: 151px;
        top: 63px;
        left: 50%;
    }
    #aniRocket {
        position: absolute;
        width: 500px;
        height: 500px;
        top: 115px;
        right: 2%;
        left: inherit;
    }

    
}

@media only screen and (min-width: 933px)
{

    #claim1, .copySmart ,.v-slide 
    {
        text-align:left;
    }

    .rocketPark
    {
        width:200px;
        height:200px;

        &.left
        {
            top:inherit;
            left:0;
            bottom:0px;
            width:200px;
            height:200px;
        }

        &.right {
            right: 0;
            bottom: inherit;
            top: -94px;
        }

        &.vendi {
            left: 0;
            bottom: inherit;
            width: 200px;
            height: 200px;
            top: -0px;
        }
        &.landing {
            bottom: 0;
            width: 300px;
            height: 450px;
            left: 50%;
            margin-left: -150px;
        }

    }

    #Preparati {
    
            .copySmart.intro {
            width: 60%;
            font-size: 1.7em;
            text-align:left;
            padding:0;
        }
        
    }

    
    .copySmart {
        font-size: 2em;
    }

    .copyBody {
        font-size: 1.6em;
        line-height: 125%;
    }

    
    .megaButtonPosition {
        width: auto;
        top: 25%;
        right: 20%;
    }    

    #divSpace1 {
        position: absolute;
        left:0;
        top: 240px;
        width: 100%;
        height: 512px;
        margin-left:0;
        max-height:inherit;
        z-index:900;
    }
    
    #cntGround {
        max-width: 1127px;
        margin: 0 auto;
        position: relative;
    }
    #Preparati
    {
        .copyLeft {
            padding-right:280px;
        }
    
        .copyRight {
            padding-left:280px;
        }

        .Raleway-900 {
            font-size: 67px;    
        }
    }

    #divRocket {
        width:100%;
        height:512px;
      }
    
    #aniRocket {
        position: absolute;
        width: 500px;
        height: 500px;
        top: 95px;
        right: 10%;
        left:inherit
    }

    #moonOlive {
        width: 280px;
        height: 280px;
        margin-left: 151px;
        top: 84px;
        left: 50%;
    }
    :root {
    --padding: 10vmin;
    }    
}

/* 1127 ===================== */
@media only screen and (min-width: 1127px)
{
    #divSpace2 {
        width: 100vw;
        height: 60vh;
        max-height: var(--unit-60vh);
    }

    .megaButtonPosition {
        right: 25%;
    }    


    #aniRocket {
        position: absolute;
        width: 750px;
        height: 750px;
        top: 100px;
        right: 10%;
    }


    
}




.mySection .band ,.mySection.band
{
    padding:4em 0;
    
    &.olive {
        background:var(--yellow);
    }

    .Raleway-900 {
        font-size: 25px;
    }
    
    .ground-container 
    {
        .copySmart {
            margin-top: .5em;
            font-size: 1.4em;
            line-height: 151%;
        }
        .textContainer {
            height: 1em;
            overflow: hidden;
            text-align: left;
            display: block;
        }
    }
}




/*----------------------------------------------------------------------------------------------------------------------------------*/
/*	723px	933px	1127px*/

@media only screen and (min-width: 723px)
{

    .mySection .Raleway-900 {
        font-size: 38px;    
    }

    .mySection .copySmart {
        padding-right: 1em;
    }
    
}

@media only screen and (min-width: 933px)
{
    .mySection .Raleway-900 {
        font-size: 36px;    
    }
    .mySection.copySmart {
        padding-right: 1em;
    }

}

@media only screen and (min-width: 1127px)
{
   .mySection .Raleway-900 {
        font-size: 40px;
    }

     .mySection .copySmart.intro{
        display:block;
    }
   
        
}