Menu Responsivo não funciona | Web Design Responsivo: Páginas que se adaptam do mobile ao desk

$(document).ready(function(){
    var tamanhotela=$(window).height()
    $(window).scroll(function(){
        if($(this).scrollTop() > tamanhotela-60){
            $("header").addClass("menufixo")
        }else{
            $("header").removeClass("menufixo")
        }
    })
    $("#pag1").click(function(){
        $("html, body").animate({
            scrollTop:0
        }, 2000)
    })
    $("#pag2").click(function(){
        $("html, body").animate({
            scrollTop:$("#servicos").offset().top
        }, 2000)
    })
    $("#pag3").click(function(){
        $("html, body").animate({
            scrollTop:$("#quemsomos").offset().top
        }, 2000)
    })
    $("#pag4").click(function(){
        $("html, body").animate({
            scrollTop:$("#contato").offset().top
        }, 2000)
    })

//----------------SUBMENU ESCONDIDO-----------------------------------
    $(".main").click(function(){
        $(".submenu").animate({
            height:"toggle"
        },500)
    })
})

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Acer Haus - Jardins Ineligentes</title>
<meta name="viewport" content="device-widh, iniial-scale=1">
<script src="js/jquery-3.3.1.min.js"></script>
<link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/celular.css">
<script src="js/script.js"></script>
<link href="js/slick/slick-theme.css" rel="stylesheet">
<link href="js/slick/slick.css" rel="stylesheet">
<script src="js/slick/slick.min.js"></script>
</head>
<body>
    <section id="home" class="bgparallax">
    <img src="imagem/banner.png" class="subimg">
    </section>
    <header>
        <nav>
            <a href="#" id="pag1">Home</a>
            <a href="#" id="pag2">Serviços</a>
            <a href="#" id="pag3">Sobre</a>
            <a href="#" id="pag4">Contato</a>
        </nav>
        <div class="main"><i class="fa fa-bars"></i></div>
        <div class="submenu">
            <a href="#" id="pag1">Home</a>
            <a href="#" id="pag2">Serviços</a>
            <a href="#" id="pag3">Sobre</a>
            <a href="#" id="pag4">Contato</a>
        </div>
    </header>

CSS

@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1024px) and (min-width:600px){
body, html{
    width: 100%;
    height: 100%;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 16px;
    color: #666666;
    margin: 0 auto;
}
.bgparallax{
    margin: auto;
    background-size: cover;
}
.tituloprincipal{
    text-align: center;
    padding-top: 5%;
    font-size: 24px;
    width: 200px;
    margin: 5% auto;
    border-bottom: 1px solid #1FD1B8;
    font-family: exo-bold;
}
.imgsobre{
    border-radius: 50%;
    display: block;
    margin: auto;
}
.subtitulosession{
    text-align: center;
    font-family: exo-ligth;
    font-size: 20px;
}


/*  HOME */

header{
    text-align: center;
    width: 100%;
    height: 20%;
    z-index: 1;
}
nav{
    display: none;
}
.subimg{
    width: 100%;
}
.main{
    background-color: #333333;
    width: 100%;
    color: #FFFFFF;
    padding: 1%;
    font-size: 26px;
    cursor: pointer;
    box-sizing: border-box;
    height: 25%;
    z-index: -5;

}    
.submenu{
    background-color: #333333;
    width: 100%;
    color: #FFFFFF;
    padding: 1%;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    font-family: exo-bold;
    display: none;
}
.submenu a{
    display: block;
    color: #FFFFFF;
    padding: 1.5%;
    text-decoration: none;
    border-top: 1px solid #FFFFFF;
    width: 30%;
    margin: auto;
    z-index: -4;
}
.titulohome{
    margin: 0;
    color: #FFFFFF;
    font-size: 50px;
    margin-left: 5%;
    padding-top: 15%;
}
.subtitulo{
    text-align: center;
    font-size: 20px;
    width: 100px;
    margin: 5% auto;
    border-bottom: 1px solid #36ADF0;
}
.subtitulohome{
    margin: 0;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: lighter;
    margin-left: 5%;
}
.menufixo{
    position: fixed;
    margin-top: 0;
    top: 0;

Meu menu funciona normalmente no desktop com efeito parallax mas quando muda para mobile ele não funciona, quando clico em uma seção no menu ele me move para home