body{
    display: flex;
    padding: 0;
    margin: 0;
    height:100vh;
}

nav{
    width: 25%;
    background-color: blue;
    min-width: 140px;
}


li{
    list-style-type: none;
    padding: 0px;
    padding-top: 6%;
}

a{
    text-decoration: none;
    color: aliceblue;
    font-size: large;
    font-family: 'Jost', sans-serif;
}

.carrossel{
    width: 80%;
    position: absolute;
}

p{
    font-size: 25px;
    font-family: 'Jost', sans-serif;
}

h2{
    font-family: 'Jost', sans-serif;
    font-size: 30px;
}


.dev{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.div{
    display: flex;
    
}

.seta{
    width: 50%;
    height: auto;
}

.dis{
    width: auto;
    height: auto;
    display: flex;
    
    flex-direction: column;
    justify-content: space-around;
}

.dis2{
    width: auto;
    height: auto;
    
    flex-direction: column;
    justify-content: space-between;
}

.slide2{
    width: 100%;
    height: auto;
}



.gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
  }
  
  .slide {
    display: none;
    text-align: center;
    max-width: 1800px;
  }
  
  .slide img {
    width: 100%;
    height: auto;
  }

  .slide video {
    width: 100%;
    height: auto;
  }
  
  #prevButton,
  #nextButton {
    margin-top: 10px;
  }
  



.display{
    width: 60%;
    
    min-width: 500px;
    padding: 8%;
    padding-top: 4%; padding-bottom: 4%;
    height:68,5vh;
    
    display: flex;
    
    flex-direction: column;
    justify-content: space-around;
}

.display2{
    width: 75%;
    min-width: 600px;
    padding: 8%;
    padding-top: 4%; padding-bottom: 4%;
    height:68,5vh;
    
    display: flex;
    
    flex-direction: column;
    justify-content: space-around;
}

.tam{
    width: 70%;
    padding-left: 15%; padding-right: 15%;
}

.tamvd{
    width: 100%;
}

.tammvd{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;   
}

h1{
    align-self: center;
    color: #0000ff;
    font-size: 100px;
    font-family: 'Jost', sans-serif;
    margin: 0;
}

.tela{
    width: 75%;
   
    padding-top: 2%;padding-bottom: 2%;
    display: flex;
    justify-content:flex-start;
}

.div-data{
    width: 100%;
    display: flex;
    justify-content: center;   
}

.div-data{
    width: 80%;
    display: flex;
    justify-content: center;   
}

.div-lente{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;   
}

.lente{
    width: auto;
    height: 90%;
}

.rota{
    width: 70%;
    height: auto;
}

.datasheet{
    position: relative;
    height: 103%;
}

.bum{
    padding-top: 30px;
    display: flex;
    justify-content:space-around;
    
}

.voltar{
    width: 10%;
    display: flex;
    justify-content: center;
}

button{
    padding-top: 15px; padding-bottom: 15px;
    padding-left: 50px; padding-right: 50px;
    background-color: rgba(240, 248, 255, 0);
    border-color: #0000ff;
    color: blue;
    border-radius: 10px;
    font-size: 20px;
    font-family: 'Jost', sans-serif;
}

.ton{
    padding-top: 10px; padding-bottom: 10px;
    padding-left: 25px; padding-right: 25px;
    font-size: 15px;
}

.screen{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20%;
}

.en{
    width: 40%;
    display: flex;
    flex-direction: column;
}



.li{
    list-style:circle;
    font-size: 100px;
    padding: 15%;
}


img{
    height: auto;
    width: auto;
}

.dropdown {
    position: relative;
    display: inline-block;
    clear: both;
    padding-bottom: 7%;
}

.dropdown-content {
    padding: 0;
    display: none;
    position:relative;
}

.dropdown:hover{
    padding-bottom: 5%;
}

.dropdown:hover a{
    color: rgba(255, 255, 255, 0.678);
}

.dropdown:hover .dropdown-content{
    display: block;
}



.list{
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.item{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}




    .tamm{
        width: 65%;
        height: auto;
    
    }

    .li{
        font-size: 150%;
        padding: 0;
        padding-top: 10%;
        width: auto;
        font-family: 'Jost', sans-serif;
    }

    .en{
        width: auto;
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    .pont{
        width: auto;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 0;
    }

    .pontt{
        width: 50%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
    }

    .icon{
        width: 30%;
        height: auto;
    }

    .scren{
        display: flex;
        justify-content:end;
        align-items: center;
        padding-left: 15%;
    }

    .screen{
        display: flex;
        justify-content:end;
        align-items: center;
        padding-left: 0;
    }

    .display2{
        padding: 2%;
        padding-top: 4%; padding-bottom: 4%;
        
    }
    
    .tela{
        width: 100%;
    }

    nav{
        width: 20%;
    }

    .list{
        justify-content: space-evenly;
        padding-top: 5%;
    }

  
    .logo{
        height: 10%;
        width: auto;
        display: flex;
        justify-content: end;
        padding-right: 2%;
    }

    .logo img{
        height: 70%;
        width: auto;
    }

    .displey{
    width: 80%;
    
    min-width: 500px;
    height:68,5vh;
    
    display: flex;
    
    flex-direction: column;
    }

    .displayy{
    padding: 8%;
    padding-top: 4%; padding-bottom: 0;
    
    height:90%;
    display: flex;
    
    flex-direction: column;
    justify-content: space-around;
    }
  
    /* Vertical */
    @media (orientation: portrait) {
        .tamm{
            width: 80%;
            height: auto;
            margin-top: 10%;
        }

        .lente{
            width: auto;
            height: 35%;
        }

        .rota{
            width: auto;
            height: 40%;
        }

        body{
            flex-direction: column;
        }

        nav{
            width: 100%;
            height: 60px;
            position: absolute;
        }

        .tamvd{
            width: 100%;
        }
        .tamvv{
            width: 100%;
        }

        .list{
            width: 100%;
            padding-top: 40px; padding-bottom: 40px;
            display: flex;
            flex-direction: row;
            padding: 0;
            justify-content: space-around;
            position: absolute;
        }

        .dropdown{
            position: relative;
            display: inline-block;
            clear: both;
            padding: 0;

        }

        .dropdown-content{
            background-color: #0000ff;
            display: none;
            position:relative;
        }


        .dropdown:hover a{
            color: rgba(255, 255, 255, 0.678);
        }

        .dropdown:hover .dropdown-content{
            display: block;
            padding: 20px;
        }

        
        .screen{
            justify-content:space-evenly;
            padding: 0;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        .display{
            height: 100vh;
            width: 100%;
            padding:0;
            display: flex;
            justify-content: space-evenly;
        }

        h2{
            margin-top: 15%;
            font-size: 40px;
        }

        p{
            font-size: 30px;
        }

        #prevButton,
        #nextButton {
            margin-top: 10px;
        }

        .display2{
            height: 100%;
            width: 100%;
            padding:0;
            padding-top: 10%; padding-bottom: 15%;
            justify-content: space-evenly;
        }

        .en{
            width: auto;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        H1{
        font-size:600%;
        }

        .li{
            font-size: 150%;
            padding-top: 50px;
            height: auto;
        }

        a{
            font-size: 120%;
        }

    

        .pont{
            width: auto;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 0;
        }

        .pontt{
            width: 100%;
            height: 40%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0;
        }

        .icon{
            width: 40%;
            height: auto;
        }

        .scren{
            display: flex;
            flex-direction: column;
            justify-content:space-between;
            align-items: center;
            padding-left: 0;
            height: 60%;
        }

        button{
            padding-top: 15px; padding-bottom: 15px;
            padding-left: 50px; padding-right: 50px;
            border-radius: 10px;
            font-size: 110%;
        }

        .div-data{
        width: 100%;
        height: 90%;
        }

        .tela{
            width: 90%;
            height: 100%;
        
            padding-top: 2%;padding-bottom: 2%;
            padding-left: 5%; padding-right: 5%;
            display: flex;
            flex-direction: column;
            justify-content:flex-start;
        }

        .datasheet{
            position: relative;
            padding-top: 8%;
            width: 100%;
            height: 100%;
        }
        
        .logo{
            height: 9%;
            width: auto;
            display: flex;
            justify-content: end;
            padding-right: 2%;
            }
    
            .logo img{
                height: 70%;
                width: auto;
            }
    
            .displey{
            width: 100%;
            
            min-width: 500px;
            height: 100vh;
            
            display: flex;
            
            flex-direction: column;
            }
    
            .displayy{
            padding: 8%;
            padding-top: 4%; padding-bottom: 0;
            
            height:90%;
            display: flex;
            
            flex-direction: column;
            justify-content: space-around;
            }
    }



/*////////////////////////////////////////////////////////////////////*/


    /* Celular - Vertical */
    @media (orientation: portrait) and (max-width: 500px) {
        body{
            height: auto;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        nav {
        width: 100%;
        height: 60px;
        background-color: #0000ff;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        }

        h1{
            font-size: 50px;
        }
        button{
            padding-top: 10px; padding-bottom: 10px;
            padding-left: 30px; padding-right: 30px;
         }
        h2{
            font-size: 10px;
        }
        p{
            font-size: 10px;
        }
        .displey{
            width: 100%;
            min-width: 100px;
            max-width: 500px;
            height: 100vh;
        }
        li a{
            font-size: 13px;
        }
        }
    



    /* Celular horizontal */
    @media (orientation: landscape) and (max-height: 500px) {
     body{
        height: auto;
     }
     nav{
        margin: 0px;
     }
     .list{
        padding: 0;
        padding-left: 20px;
     }
     h1{
        font-size: 60px;
     }
     .scren{
        margin-top: 20px; margin-bottom: 20px;
     }
     .icon{
        width: 80px;
     }
     .tamm{
        width: 70%;
     }
     button{
        padding-top: 10px; padding-bottom: 10px;
        padding-left: 30px; padding-right: 30px;
     }
    }




    /* Tablets */
    @media (min-width: 768px) and (max-width: 1023px) {
       
    }