@media screen and (min-width: 600px){
    
#body1 {   
    margin: 0;
    background-color: rgb(241, 241, 241);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
#modeller_body {   
    background-color: rgb(241, 241, 241);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#aterforsaljare_body {   
    background-color: rgb(241, 241, 241);
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


#container {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-rows: 1fr 8fr 0fr; 
    grid-template-columns: 1fr;
    grid-template-areas:
    "nav"
    "main"
    "ft"
    ;
}

.img_container {
    position: relative;
    text-align: center;
    color: white;
    height: 87vh;
    overflow: hidden;
    text-shadow: 2px 2px #00000080;
}

.img_container p{
    font-size: 60px;
}

#oss{
    margin-top: 80px;
    margin-bottom: 0px;
}

.img_container ul{
    font-size: 24px;
    text-align: left;
    list-style: circle;
}

.img_container ul li{
padding: 15px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.centered2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    text-align: left;
}

#uppgifter{
    font-size: 25px
}


#modeller_container {
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-rows: 1fr 8fr 0fr;
    grid-template-areas:
    "nav"
    "main"
    "ft"
    ;
    color: black;
}

#aterforsaljare_container{
    display: grid;
    width: 100%;
    height: 100vh;
    grid-template-rows: 1fr 8fr 0fr;
    grid-template-areas:
    "nav"
    "main"
    "ft"
    ;
    color: black;
}

#index_main {
    grid-area: main;
    width: 100%;
}

#nyheter_ul{

}

#nyheter_ul li {
    text-decoration: underline;
    display: flex;
}


#modeller_main {
    grid-area: main;
    margin: 1em;
    background-color: rgb(241, 241, 241);
    display: grid;
    padding: 50px;
    grid-template-rows: 0fr 0fr 1fr; 
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
    "h1 img"
    "p img"
    "ul img"
    ;
}

#tjanst_h1 {
    grid-area: h1;
    font-size: 50px;
    margin: 0px;
}

#tjanst_p {
    grid-area: p;
    padding-right: 200px;
    font-size: 20px;
}

#tjanst_ul {
    grid-area: ul;
    font-weight: bold;
    padding: 0px;
}

#referenser_ul {
    grid-area: ul;
    font-weight: bold;
    padding: 0px;
}

#referenser_ul li{
    display: inline;
    padding: 0px;
    font-size: 20px;
}

#tjanst_ul li {
    display: inline;
    font-size: 20px;
}

#tjanst_ul li p{
    height: 0px;
}

#tjanst_img {
    grid-area: img;
    width: 100%;
    object-fit: cover;
}


#partners_img {
    grid-area: img;
    width: 100%;
    height: 85%;
    object-fit: cover;
}

#referenser_img {
    grid-area: img;
    width: 100%;
    height: 95%;
    object-fit: cover;
}

#nyheter_img {
    grid-area: img;
    width: 100%;
    height: 95%;
    object-fit: cover;
}


#aterforsaljare_main{
    text-align: center;
}

#historia_main {
    padding-left: 15em;
    padding-right: 15em;
    padding-top: 64px;
}

#oppettider_main {
    padding-top: 64px;
    text-align: center;
}

#modeller {
    grid-area: h1;
}


nav {
    grid-area: nav;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    height: 13vh;

}

h1{
    font-size: 3em;
}

footer {
    grid-area: ft;
}

ul {
    list-style-type: none;
}

ul li {
    display: inline-block;
    padding: 0.35em;
}

ul li a {
    text-decoration: none;
    color: rgb(0, 177, 247);
    padding: 0.35em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0);
    font-size: 1.2em;
}

#selected {
    color: rgb(0, 69, 97);
}


.menu{
background-color: rgb(255, 255, 255);
position: ;
width: 100%;

}

.vit_nav2 {
    background-color: white;
    height: 64px;
    width: 100%;
    }

footer p{
    font-family: 'Times New Roman', Times, serif;
}

.h2_mod{
    grid-area: h2;
    margin: 10px;
}

.p_mod{
    font-size: 13px;
}

.bil_bilder{
    width: 280px;  
}

#karta{
height: auto;
width: auto;
}

#m-karta{
    display: none;
}

#audi-history-bild{
    width: 100%;
}

.menu-button{
    display: none;
}

.helgdag{
    color: red;
}

#flagga{
    float: right;
}

#imgflagga{
    width: 50px;
    padding-top: 50px;
}

#link{
    color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}


}





@media screen and (max-width: 600px){


    .menu{
        height: 100vh;
        width: 80vw;
        background:white;
        position: fixed;
        top: 0;
        left: -90vw;
        transition: left 0.3s;
        box-shadow: 10px 0px 21px -10px rgba(0,0,0,0.75);
        z-index: 10;
    }

    
    .menu-button{
        cursor: pointer;
        display: inline;
        color: white;
        padding: 1em;
    }
    
    .menu-button i.material-icons{
        font-size: 2.5rem;
    }
    
    .show-menu{
        left: 0;
    }
    
    .fade{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        display: none;
        z-index: 5;
    }
    
    .visible{
        display: block;
    }
    
    






    #body1 {   

        
        background-color: white;
        margin: 0;
        
    }
    #modeller_body {   
        background-color: white;
        margin: 0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    #aterforsaljare_body {   
        background-color: rgb(241, 241, 241);
        margin: 0;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    #container {
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-rows: 1fr 8fr 0fr; 
        grid-template-columns: 1fr;
        grid-template-areas:
        "nav"
        "main"
        "ft"
        ;
        color: white;
    }
    
    #modeller_container {
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-rows: 1fr 8fr 0fr;
        grid-template-areas:
        "nav"
        "main"
        "ft"
        ;
        color: black;
    }
    
    #aterforsaljare_container{
        display: grid;
        width: 100%;
        height: 100vh;
        grid-template-rows: 0fr 8fr 0fr;
        grid-template-areas:
        "nav"
        "main"
        "ft"
        ;
        color: black;
    }
    
    #index_main {
        grid-area: main;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;

    }
    
    #modeller_main {
        width: 95vw;
        grid-area: main;
        margin: 1em;
        background-color: white;
        display: grid;
        padding: 0px;
        grid-template-areas:
        "h1"
        "p"
        "ul"
        "img"
        ;
    }
    
    #aterforsaljare_main{
        text-align: center;
    }
    
    #historia_main {
        padding: 1em;
    }
    
    #modeller {
        grid-area: h1;
    }
    

    
    nav {
        grid-area: nav;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
    }
    
    h1{
        font-size: 3em;
        margin: 0;
    }
    
    footer {
        grid-area: ft;
    }
    
    ul {
        list-style-type: none;
        
    }
    
    ul li {
        padding: 0.35em;
    }
    
    ul li a {
        text-decoration: none;
        color:#fff;
        padding: 0.35em 0.9em;
        border: 1px solid rgba(255, 255, 255, 0);
        font-size: 1.2em;
    }

    #red {
        color: rgb(209, 0, 0);
    }

    
    .vit_nav2 {
        background-color: white;
        height: 64px;
        width: 100%;
        }
    
    footer p{
        font-family: 'Times New Roman', Times, serif;
    }
    
    .h2_mod{
        grid-area: h2;
        margin: 10px;
    }
    
    .p_mod{
        font-size: 13px;
    }
    
    .bil_bilder{
        width: 280px;  
    }
    
    #karta{
    height: auto;
    width: 100vw;
    display: none;
    }
    
    #m-karta{
        height: 82vh;
        width: auto;
    }

    #audi-history-bild{
        width: 100%;
    }

    .streck {
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
      }

    .streck-vit {
        width: 35px;
        height: 5px;
        background-color: rgb(255, 255, 255);
        margin: 6px 0;
    }

    #oppettider_main {
        padding-top: 64px;
        text-align: center;
    }

    .helgdag{
        color: red;
    }

    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
    }

    #imgvatten{
        height: 87vh;
    }

    #test{
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }

    #vi{
        font-size: 24px
    }

    #oss{
        font-size: 1.7em;
    }

    #selected{
        color:black;
    }

    .menu ul li{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    .menu ul li a{
        color: black;
    }

    #tjanst_p {
        grid-area: p;
        padding-right: 50px;
        font-size: 20px;
    }

    
#tjanst_ul {
    grid-area: ul;
    font-weight: bold;
    padding: 0px;
}

#tjanst_img {
    grid-area: img;
    width: 100%;
    object-fit: cover;
}

#referenser_img {
    grid-area: img;
    width: 100%;
    height: 95%;
    object-fit: cover;
}


#partners_img {
    grid-area: img;
    width: 100%;
    height: 85%;
    object-fit: cover;
}

#nyheter_img {
    grid-area: img;
    width: 100%;
    height: 95%;
    object-fit: cover;
}

.centered2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    text-align: left;
    font-size: 35px;
}

#uppgifter{
    font-size: 25px
}

#kontaktp{

}

#imgflagga{
    width: 50px;
}



.img_container {
    position: relative;
    text-align: center;
    color: white;
    height: 87vh;
    overflow: hidden;
    text-shadow: 2px 2px #00000080;
}

#link{
    color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

}