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

Garanta sua matrícula hoje e ganhe + 2 meses grátis