* {
    margin: 0;
    padding:0;
}


/* para garantir que estes elementos ocuparão toda a tela */
body, html {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    
}

#fundo-externo {
   /* para que não tenha rolagem se a imagem de fundo for maior que a tela */
    width: 100%;
    height: 100%;
    position: relative; /* criamos um contexto para posicionamento */
}
#fundo-mobile{
    display: none;
}

#fundo {
    display: block;
    position: relative; /* posição fixa para que a possível rolagem da tela não revele espaços em branco */
    width: 100%;
    height: 100%;

}
#fundo img {
    position: absolute;
    width: 100%;
    height: auto;
}
.logo-mobile{
    display: none;
}
.logo{
    display:block;
    position: absolute;
    width: 100%;
    top:200px;
  
     z-index: 1;
}
.logo img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.texto {
    width: 100%;
    color: white;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top:400px;
    
    z-index: 4;
  }
  .end {
    width: 100%;
    color: white;
    text-align: center;
    font-size: 18px;
    position: absolute;
    top:600px;
    
    z-index: 4;
  }

  
@media only screen and (min-width:300px) and (max-width:795px) {
    
    #fundo-mobile{
        display: block;
        position: relative; /* posição fixa para que a possível rolagem da tela não revele espaços em branco */
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    #fundo-mobile img{
        position: absolute;
        width: 100%;
        height: auto;
    }
   

    #fundo{
        display: none;
    }
    .logo{
        display:none;
    }
    .logo-mobile{
        
        top:200px;
        display: block;
        width: 100%;
        position: absolute;
         z-index: 3;
    }
    .logo-mobile img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .end {
       
        top:550px;
        
       
      }

   
}