@media only screen and (max-width: 800px) {
     #contact-form-mobile{
     padding-top: 120px   
    }

    input{
        width:90%;
    }

    textarea{
        width:90%;
    }

    body{
        font-size:20px;
        margin:0;
        font-family: "Bebas Neue";
        font-weight: 400;
        font-style: normal;
    }

    :root{

        --frameHeight:100vh;
        --frameWidth:100%;
        --driverWidth:33.3333%;
        --driverHeight:calc(var(--frameHeight)*3)
    
    }

    #screen-1-button-1{
        width:99%;
        height:99%;
        
    }

    
    #screen-2-button-1{
        width:99%;
        height:99%;
       
        
    }

    #screen-2-button-2{
        width:99%;
        height:99%;
    }
    
    button{
        margin:0 auto;
        min-width:200px;
        padding:20px;
        font-size:30px;
        cursor:pointer;
        border: solid 1px;
        color: #fff;
        font-family: "Bebas Neue";
        background-color: rgba(255, 255, 255, 0.1);
        justify-content:center;
        border:solid #fff 2px;
        font-family: "Bebas Neue";
        font-weight: 400;
        font-style: normal;
        transition:all 1s;
        
    }

    button:hover{
        margin:0 auto;
        min-width:80%;
        padding:20px;
        font-size:30px;
        cursor:pointer;
        border: solid 1px;
        color: #fff;
        font-family: "Bebas Neue";
        background-color: rgba(0, 0, 0, 0);
        /*background-color: rgba(255, 255, 255, 1);*/
        border:solid #fff 2px;
        font-family: "Bebas Neue";
        font-weight: 400;
        font-style: normal;
    }

    .frame{
        width: 100%;
        height: var(--frameHeight);
        overflow:hidden;
        border: solid 1px;
    }

    .driver {
        display: flex;
        flex-wrap: wrap;
        width: 300%;
        max-width: 300%; /* opcional, para limitar el ancho */
        margin: auto;
        /*gap: 10px;*/ /* espacio entre elementos */
    }

    .item {
        
        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: calc(var(--frameHeight));
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;
        position:relative;
        font-size:50px;
        top:0px;
        left:0px;
        margin:0 auto;
        
    }

    .item-1 {

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        background-color: #4caf50;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:0px;
        left:0px;
        margin:0 auto;
        
    
    }

    .item-2 {

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        background-color: #063f08;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:0px;
        left:calc(100%/3*(-1));
        margin:0 auto;
        
    
    }

    .item-3{

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:0px;
        left:calc(100%/3*(-1));
        margin:0 auto;
        

    }

    .item-4 {

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:calc(var(--frameHeight)*(-1));
        left:0px;
        margin:0 auto;
        
    
    }

    .item-5 {

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:calc(var(--frameHeight)*(-1));
        left:calc(100%/3*(-1));
        margin:0 auto;
        
    }

    .item-6{

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        color: white;
        /*display: flex;
        align-items: center;
        justify-content: center;
        */
        font-weight: bold;
        transition:all 1s;
        position:relative;
        
        top:calc(var(--frameHeight)*(-1));
        left:calc(100%/3*(-1)*2);
        margin:0 auto;
        
        
    }

     .item-7 {

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;
        position:relative;
        
        top:calc(var(--frameWidth)*(-1)*2);
        left:0px;
       margin:0 auto;
    }

    .item-8 {

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: var(--frameHeight);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:calc(var(--frameHeight)*(-1)*2);
        left:calc(100%/3*(-1));
        margin:0 auto;
       
    }

    .item-9{

        flex: 0 0 calc(33.33333%); /* 3 columnas con espacio */
        height: calc(var(--driverHeight)/3);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        transition:all 1s;

        position:relative;
        top:calc(var(--frameHeight)*(-1)*2);
        left:calc(100%/3*(-1)*2);
        margin:0 auto;
        
        
    }

    

    .content{
        width:100%;
        height:100%;
    }

    .softwareVerticalMiddle{
        height:40vh;
        background-color:#4caf50;
        padding:20px;
        display:flex;
        color:#fff;
        background-image: url('../img/screen-2-background-01.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color:#10202f;
        border-bottom:solid #fff 1px;
        
    }

    .designVerticalMiddle{
        
        background-color:#09570b;
        color:#fff;
        height:40vh;
        background-image: url('../img/screen-2-background-02.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        background-color:#05092e;
        padding:20px;
        background-repeat: no-repeat;
    }

    .fixed-bottom {
        
        cursor:pointer;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #000000;
        color: white;
        display:flex;
        text-align: center;
        z-index: 1000;
    
    }
    .fixed-bottom-up {
        
        cursor:pointer;
        position: fixed;
        bottom: -10;
        width: 100%;
        background-color: #000000;
        color: white;
        display:flex;
        text-align: center;
        z-index: 1000;
    
    }
    
    .fixed-bottom-button{
        flex-grow:1;
        border:solid #fff 1px;
        padding:5px;
    }

    .fixed-bottom-button:hover{
        flex-grow:1;
        border:solid #fff 1px;
        padding:5px;
        background-color:gray;
        color:#000;
    }

    .screen{
        height:100%;
        width:100%;
        background-color:rgb(23, 23, 85);
        
        
    }
    .screen button{
        width:90%;
    }
 
    #screen-3-button-1{
        background-color:#2a3137;
        
    }

    #screen-3-button-2{
        background-color:#2a3137;
    }

    .contactHidden{
        position:fixed;
        top:85vh;
        border-top:solid 1px;
        left:0;
        z-index:500;
        width:100%;
        height:100vh;
        padding-left:10px;
        background-color:rgba(255, 255, 255, 0.5);
        transition:all 1s;
    }

    .contactDisplayed{

        position:fixed;
        top:0;
        border-top:solid 1px;
        left:0;
        z-index:500;
        width:100%;
        height:100vh;
        padding-left:10px;
        background-color:rgba(255, 255, 255, 1);
        transition:all 1s;

    }

    .UpIcon{
        background-image: url('../img/screen-2-background-03.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width:100px;
        height:100px;
        transform: rotate(180deg);
        transition:all 1s;
        z-index:501;
        position:relative;top:-70px;left:-50px;border-radius:50px;width:100px;height:100px;
        border:solid 1px;
      
    }

    .DownIcon{
        background-image: url('../img/screen-2-background-03.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width:100px;
        height:100px;
        transform: rotate(0deg);
        transition:all 1s;
        z-index:501;
        position:relative;top:0px;left:-50px;border-radius:0px;width:100px;height:100px;
        border:solid 1px;
    }
    
    #frame{
        display:block;
    }
    #desktopContainer{
        display:none;
    }
    /*--------------------------*/
    .contact-form-sent-initial{
        margin:0 auto;
        width:550px;
        height:0px;
        position:relative;
        top:-550px;
        transition:all 1s;
    }
    
    .contact-form-sent-finish{
        margin:0 auto;
        width:550px;
        height: 100vh;
        position:relative;
        top:0px;
        transition:all 1s;
    }

    
    .contact-name {
      font-size:12px;
    }
    

    .contact-name div{
        padding:10px;
        padding-left:0px;
        margin-bottom:5px;
    }
    

    .item-hightlighted{
        background-color:#0a242c;
        color:#fff;
        border:solid 1px;
        padding:10px;
        border-radius:4px;
    }

     #buttonForm{
        width:90%;
    }
   

    
    
}