body {
    margin: 0 auto; 
    padding: 0; 
    font-family: 'Lato';
    font-size: 18px; 
    overflow-x: hidden; 
    line-height: 28px; 
}

/* GENERAL */
nav, h1, h2, h3, .button, em, footer {
    color: #006341;
}
#menu {
    display: none; 
}
h1 {
    font-size: 50px; 
}
h2 {
    font-size: 30px; 
}
h3 {
    font-size: 25px; 
}
.button {
    padding: 15px 20px; 
    border-radius: 35px; 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 25px; 
}
.button:hover {
    cursor: pointer; 
    color: black; 
    transition: color 0.3s ease-in-out; 
}
svg {
    margin: 0; 
    width: 100vw; 
    padding: 0; 
}
svg:first-of-type {
    margin-bottom: -10px; 
}
em {
    font-weight: bold; 
    font-style: normal; 
}
footer, .button, nav div, #nav-dropdown {
    background: #FFAC3A; 
}
main {
    margin: 0; 
    padding: 50px 100px; 
}
#underrubrik {
    text-align: center; 
}
.div {
    width: 100%; 
    padding-top: 150px; 
}
.div-flex {
    display:flex; 
    justify-content: space-between; 
}
.div-2 img, .div-2 p {
    width: 45%; 
    margin:0; 
}
.div-2 p {
    margin-top: auto;  
    margin-bottom: auto; 
}
.div:first-child {
    padding-top: 50px; 
}
.div:last-child {
    padding-bottom: 150px; 
}

/*---------------------------------------------------------------------*/



/*  NAV  */
nav {
    position: fixed; 
    top: 0%; 
    width: 100%; 
    z-index: 10; 
    transition: top 0.5s; 
}
#nav {
    height: 50px; 
    width: 100%; 
    padding: 10px 50px; 
    display:flex; 
    position: relative;
}
nav img {
    border-radius: 10px; 
    width: 100px; 
    height: 100px; 
}
#img {
    position: relative; 
}
#img::before {
    content: "";
    position: absolute; 
    background: transparent; 
    width: 20px;
    height:50px; 
    top: 60px; 
    right: 100%; 
    border-top-right-radius: 15px; 
    box-shadow: 0 -30px 0 0 #FFAC3A; 
}
#img::after {
    content: "";
    position: absolute; 
    background: transparent; 
    width: 20px;
    height:50px; 
    top: 60px; 
    left: 100%; 
    border-top-left-radius: 15px; 
    box-shadow: 0 -30px 0 0 #FFAC3A; 
}
#nav-content{
    display:flex;  
    position: absolute; 
    top: 50%; 
    transform: translate(0%, -100%);
    left: 200px; 
    padding: 0; 
}
nav div div div {
    position: relative;
    padding: 0; 
}
.nav-link {
    margin: 0 20px; 
    font-weight: bold;
}
#nav-dropdown-arrow {;
    transform: rotate(90deg);
    padding-left: 10px; 
    font-weight: bold; 
    margin-top: -2px; 
}
nav a {
    color: #006341;
    text-decoration: none; 
}
nav a:hover, #nav-link-dropdown:hover i, .active, #menu:hover {
    color: #003322; 
}
i:hover {
    cursor: pointer; 
}
/*-----*/
#nav-link-dropdown {
    position: relative; 
}
nav ul {
    list-style: none; 
}
#nav-link-dropdown:hover > #nav-dropdown {
    display: block !important; 
}
#nav-dropdown {
    position: absolute;
    top: 100%; 
    left: -15%;
    padding: 20px;
    border-radius: 15px; 
    width: 100%;
    display: none; 
}
#nav-dropdown::before {
    content: "";
    position: absolute; 
    background: transparent; 
    top: 17px;
    left: -14px; 
    height: 50px; 
    width: 15px; 
    border-top-right-radius: 15px; 
    box-shadow: 0 -10px 0 0 #FFAC3A; 
}
#nav-dropdown::after {
    content: "";
    position: absolute; 
    background: transparent; 
    top: 17px;
    right: -14px; 
    height: 50px; 
    width: 15px; 
    border-top-left-radius: 15px; 
    box-shadow: 0 -10px 0 0 #FFAC3A; 
}
#nav-dropdown li {
    list-style: none; 
    display: block;  
    padding-bottom: 10px; 
    width: 100%; 
}
#nav-dropdown li:first-child {
    padding-top: 12px; 
}
.openDropdown {
    display: block !important; 
}
.closeDropdown {
    display: none !important; 
}
/*---------------------------------------------------------------------*/


/* TITLAR */
.title-div {
    width: 100vw; 
    height: 100vh; 
    position: relative;
    margin: 0; 
    padding: 0; 
}
#title-vilka div, #title-valkommen div, #title-tjanster div {
    position: absolute; 
    top: 50%;
    left: 50%; 
    padding: 0;
    width: 75%; 
    height: 80%; 
    transform: translate(-50%, -50%);
}

.title-page {
    height: 60vh; 
    position: relative;
    margin: 0; 
    background-image: url(bilder/title-bild.jpeg); 
    background-attachment: fixed; 
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position:center; 
    padding: 0; 
}
.title-page h1 {
    text-align: center; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
}
/*------*/
#title-preem {
    background-image: url(bilder/title-bild.jpeg);
    background-attachment: fixed; 
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: top; 
}
#title-preem-div {
    position: absolute; 
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
    text-align: center; 
    margin:0; 
}
#title-preem-div div {
    width: 100vw; 
    padding: 0 20px; 
    background: rgba(255, 172, 58, 0.8);
}
#title-preem p {
    text-align: justify; 
    color: black;
    text-shadow: 0 0 10px lightgray;
    text-align: center; 
    margin: auto; 
    width: 50%; 
}
/*------*/
#title-vilka div div{
    position: relative;
    width: 100%; 
    padding: 0; 
}
#title-vilka div div div {
    position: absolute; 
    top: 50%; 
    left: 0%; 
    transform: translate(0%, -50%);
    width: 45%; 
    padding: 0; 
}
#title-vilka p {
    margin-bottom: 60px;
}
#title-vilka-bildspel {
    position: absolute; 
    top: 50%; 
    right: 0%; 
    transform: translate(0%, -50%); 
    max-width:40%; 
    max-height: 60%;
    width: auto; 
    height: auto;
    z-index: 5; 
}
/*------*/
#title-tjanster {
    background: #eee; 
}
#title-tjanster div div {
    position: relative; 
    width: 100%; 
}
#title-tjanster div div div {
    position: absolute; 
    top: 50%; 
    left: 0%; 
    height: auto; 
    transform: translate(0%, -50%);
}
#title-tjanster div div div div {
    position: static; 
    display: flex; 
    transform: translate(0%, 0%);
}
#title-tjanster div div div div:last-child {
    width: auto;
    margin: auto; 
}
#title-tjanster .button {
    margin-right: 30px; 
    margin-top: 50px; 
}
#title-tjanster .button:last-child {
    margin-right: 0; 
}
#title-tjanster p {
    margin: 0; 
}
#title-tjanster p:first-child {
    padding-right: 50px; 
}
/*------*/
#title-valkommen div div {
    position: relative; 
    width: 85%; 
    margin:auto; 
}
#title-valkommen div div div {
    position: absolute; 
    text-align: center;
    top: 50%; 
    left: 0%; 
    height: auto; 
    transform: translate(0%, -50%);
}
#title-valkommen p {
    text-align: justify; 
}
/*---------------------------------------------------------------------*/

/* TJÄNSTER */

#tjanster {
    width: 100%; 
    display: flex; 
    flex-flow: wrap; 
    justify-content: space-between; 
}
#tjanster div {
    width: 45%; 
    text-decoration: none; 
    text-align: center; 
    padding: 0; 
}
#tjanster a {
    text-decoration: none; 
    padding: 0; 
}
#tjanster p {
    padding: 0; 
}
#tjanster img {
    width: auto; 
    height: auto; 
    max-height: 50%; 
    max-width: 100%; 
    min-width: 80%; 
    margin: auto; 
}
#tjanster img:hover {
    filter: brightness(80%);
}
/*---------------------------------------------------------------------*/
/* TANKA */
#tanka-div {
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
}
#tanka-div p {
    width: 45%; 
}
#tanka-div img {
    max-width: 45%; 
    max-height: 50%; 
    width: auto; 
    height: auto;
}

.tanka-drivmedel p:first-child {
    border-radius: 30px; 
    font-size: 30px; 
    font-weight: bold; 
    margin: auto; 
    color: white; 
    text-align: center; 
    padding: 15px; 
    width: 50px; 
    margin-bottom: 30px; 
}
.tanka-drivmedel p:last-child {
    color: #006341; 
}
#tanka-drivmedel-div {
    display: block; 
}
.tanka-drivmedel {
    display: flex; 
    width: 100%; 
    margin: 10px 0; 
}
.tanka-drivmedel p:first-child {
    margin-left: 0; 
    margin-top: auto; 
    margin-bottom: auto;
}
.tanka-drivmedel p:last-child {
    margin-right: 0; 
}
.tanka-drivmedel:nth-child(4) p:first-child {
    font-size: 25px;  
    line-height: 20px; 
    width: 50px; 
}
.tanka-drivmedel:nth-child(4) p:last-child {
    margin-top: auto;
    margin-bottom: auto; 
}
/*---------------------------------------------------------------------*/
/* MAT */
#mat-div {
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
}
#mat-div img, #mat-div p {
    width: 45%; 
}
#mat-div img {
    height: 50%; 
}

#mat-bildspel-div {
    display:block; 
}
#mat-bildspel i {
    font-size: 70px; 
    margin-top: auto; 
    margin-bottom: auto; 
    align-self: center; 
    color: lightgray; 
    font-weight: bold; 
}
#mat-bildspel i:hover {
    color: grey; 
}
#mat-bildspel i::selection {
    background: none; 
}
#mat-bildspel {
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
    align-items: center; 
}
#mat-bildspel img {
    width: 80%; 
    height: 80%; 
}
#mat-bildspel-cirklar {
    display: flex; 
    flex-flow: nowrap; 
    margin: auto; 
    width: 100px; 
    padding-top: 30px; 
}
#mat-bildspel-cirklar div {
    width: 15px; 
    margin: auto; 
    height: 15px; 
    border-radius: 20px; 
    background: lightgray; 
}
#mat-bildspel-cirklar div:hover {
    background: grey; 
    cursor: pointer; 
}
#mat-bildspel-cirklar div:first-child {
    background: grey; 
}
/*---------------------------------------------------------------------*/
/* BILTVÄTT */

#biltvatt-div {
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
}
#biltvatt-div img, #biltvatt-div p {
    width: 45%; 
}

#biltvatt-div img {
    height: 50%; 
}

#biltvatt-table tr {
    display: flex; 
    justify-content: space-between; 
}
#biltvatt-table tr:not(:last-child) {
    margin-bottom: 20px; 
}
#biltvatt-table tr td:first-child {
    display: block; 
    width: 60%; 
}
#biltvatt-table tr td:last-child {
    padding-top: 5px; 
}

/*---------------------------------------------------------------------*/
/* HYRA SLÄP */
#slap-boka {
    text-align: center; 
    font-size: 25px; 
    padding-bottom: 30px; 
}

#slap-boka a {
    text-decoration: none; 
    color: #006341; 
    font-weight: bold; 
}

#hyrslap-div, #envagsslap-div {
    display: block; 
    width: 100%; 
    text-align: center; 
}

#hyrslap, #envagsslap {
    display: flex; 
    flex-flow: wrap; 
    padding-top: 30px; 
    justify-content: space-between; 
    padding-bottom: 30px; 
}

.slap {
    width: 25%; 
    padding: 20px; 
    background: white; 
    box-shadow: 0 0 10px lightgray; 
    margin-bottom: 50px; 
    display: block;
    position: relative !important; 
}

.slap:nth-child(n+4) {
    display: none; 
}

.slap img {
    max-width: 100%; 
    width: auto; 
    margin: auto; 
    max-height: 30%; 
    height: auto; 
}
.slap h3 {
    text-align: center; 
}
.slap p {
    color: #006341; 
    font-weight: bold;
    text-align: end;    
    position: absolute; 
    right: 10%; 
    bottom: 5%; 
}
.slap ul {
    text-align: left; 
}

/*---------------------------------------------------------------------*/
/* MASTERCARD */
#kort-div {
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
}
#kort-div img, #kort-div ul {
    width: 45%; 
    margin:0; 
}
#kort-div ul li:not(:last-child) {
    padding-bottom: 20px; 
}
#kort-div img {
    height: 50%; 
}
#kort-disclaimer {
    color: #aaa; 
    padding-top: 50px; 
    font-style: italic; 
}
#kort-disclaimer ul li {
    list-style:  none; 
}

/*---------------------------------------------------------------------*/
/* NYHETER */
#nyheter-div {
    display: block; 
}
.nyhet {
    display: flex; 
    width: 100%; 
    justify-content: space-between; 
    margin-bottom: 50px; 
}
.nyhet-text {
    display: block; 
    width: 100%;
}
.nyhet img {
    float: right;
    margin: 17px 0 30px 30px; 
}
.nyhet p:not(:last-child){
    color: #006341; 
    font-size: 14px; 
}
.nyhet a {
    color: #008c5c; 
}
#nyheter-div hr {
    margin-bottom: 40px; 
}
/*---------------------------------------------------------------------*/
/* KONTAKTA OSS */
#kontakta-div {
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
}
#kontakta-div img, #kontakta-div div {
    width: 45%; 
    margin: 0; 
}
#kontakta-div img {
    height: 300px; 
}
#kontakta-div div {
    display: block; 
}
#kontakta-div div p:last-child {
    font-weight: bold; 
}
/* KONTAKTA FORM */
#kontakta-form h2 {
    text-align: center; 
    padding-bottom: 20px; 
}
#kontakta-form form {
    width: 100%;
    justify-content: space-between; 
}
#kontakta-form input {
    margin-bottom: 20px; 
    height: 25px; 
}
#kontakta-form input:not([type=submit]), #kontakta-form textarea {
    background: #eee; 
    border: 1px solid #bbb;
    border-radius: 10px; 
    padding: 20px; 
    box-sizing: border-box; 
}
#kontakta-form form div {
    display: flex; 
    justify-content: space-between; 
}
#kontakta-form form div input {
    width: 49%; 
}
#kontakta-form input[type=email] {
    width: 100%; 
}
#kontakta-form textarea {
    min-width: 100%; 
    max-width: 100%; 
    min-height: 150px; 
    max-height: 300px; 
}
#kontakta-form input[type=submit] {
    margin-top: 20px; 
}
input::placeholder, textarea::placeholder {
    color: #333; 
}
#kontakta-form input, #kontakta-form textarea {
    outline: none; 
    font-family: 'Lato';
}

/*---------------------------------------------------------------------*/
/* OM OSS */
.om-oss-div {
    display: flex;
    width: 100%; 
    justify-content: space-between; 
}
.om-oss-div img, .om-oss-div p {
    width: 45%; 
}
.om-oss-div img {
    height: 50%; 
}

/*---------------------------------------------------------------------*/
/* FOOTER */
footer {
    padding: 60px 150px; 
}
footer div {
    display: flex; 
    font-weight: bold;
    justify-content: space-between; 
}
footer div p {
    width: 28%; 
    padding: 0; 
}
footer div p:last-child {
    text-align: end; 
}
footer a {
    color: #008c5c;
    font-weight: normal; 
}
#disclaimer {
    padding-top: 30px; 
}

/*---------------------------------------------------------------------*/
/* RESPONSIVE */

@media screen and (max-width: 1100px) {
    #title-vilka {
        height: 150vh; 
    }
    #title-vilka div div div {
        height: auto; 
        position: static; 
        margin: 0; 
        padding: 0; 
        transform: translate(0, 0);
        width: 100%; 
    }
    #title-vilka div div {
        padding: 20px; 
    }
    #title-vilka p {
        text-align: justify; 
    }
    #title-vilka-bildspel {
        max-width: 100%; 
        position: static; 
        max-height: 50%;
        height: auto; 
        margin: 0; 
        padding: 100px 0 0 0; 
        transform: translate(0, 0);
    }
}

/* surfplatta */
@media screen and (max-width: 1023px) {
    main {
        padding: 50px; 
    }
    footer {
        padding: 60px; 
    }
    h1 {
        font-size: 40px; 
    }
    #title-tjanster .button {
        font-size: 18px; 
    }
    .tanka-drivmedel p:first-child {
        font-size: 30px; 
        padding: 10px; 
        width: 50px; 
    }
    #kontakta-form form div {
        display: block;
        width: 100%; 
    }
    #kontakta-form form div input {
        width: 100%; 
    }
    .slap ul {
        padding-bottom: 20px; 
        margin-left: -10px; 
    }
    .slap p {
        bottom: 2%; 
    }
    .slap h3 {
        font-size: 20px; 
    }
}

@media screen and (max-width: 900px) {
    .tanka-drivmedel p:first-child {
        font-size: 20px; 
        padding: 5px; 
        width: 40px; 
    }
    .tanka-drivmedel p:last-child {
        font-size: 15px; 
    }
    .tanka-drivmedel {
        padding: 0 10px; 
    }
}

/* ändra nav */
@media screen and (max-width:820px) {
    .nav-link {
        margin: 0 10px;  
    }
    nav {
        font-size: 15px; 
    }
    #nav img {
        width: 80px; 
        height: 80px; 
        border-radius: 8px; 
    }
    #nav {
        padding: 10px 30px;  
        height: 40px; 
    }
    #img::before {
        border-top-right-radius: 10px; 
    }
    #img::after {
        border-top-left-radius: 10px ; 
    }
    #img::before, #img::after {
        top: 50px; 
    }
    #nav-content {
        left: 150px ; 
    }
    #nav i {
        font-size: 20px; 
    }
    #nav-dropdown::before, #nav-dropdown::after {
        top: 12px; 
    }
    #title-preem p {
        width: 60%;
        line-height: 25px; 
    }
    
    .slap h3, .slap p {
        font-size: 16px; 
    }
    .slap ul {
        font-size: 14px; 
        line-height: 20px; 
        padding-bottom: 10px; 
    }
    .slap {
        padding: 15px; 
    }
    .om-oss-div {
        font-size: 15px; 
    }
    #title-tjanster div div div div:not(:last-child) {
        display: block !important; 
    }
    #title-tjanster div div div div p {
        text-align: justify; 
        width: 100%; 
    }
    #title-tjanster div div div div p:first-child {
        padding-bottom: 10px; 
    }
    .tanka-drivmedel:nth-child(4) p:first-child {
        font-size: 20px; 
    }
    
    #mat-div, #kort-div, .nyhet, #kontakta-div {
        display: block; 
    }
    #mat-div p {
        width: 100%; 
        padding-bottom: 20px; 
    }
    #mat-div img {
        width: 100%; 
    }
    
    #kort-div img, #kort-div ul, .nyhet div, .nyhet img, .om-oss-div img, .om-oss-div p {
        width: 100% !important; 
    }
    
    #kort-div ul {
        margin-left: -10px; 
        padding-top: 20px; 
    }
    .nyhet img {
        margin: 0; 
        float:none; 
    }
    #kontakta-div div, #map {
        width: 100% !important; 
    }
    
    #biltvatt-div {
        display: block; 
    }
    #biltvatt-div img, #biltvatt-div p {
        width: 100%; 
    }
    
    #kort-div ul {
        font-size: 16px; 
    }
    .om-oss-div {
        display: block; 
        font-size: 18px; 
    }
}

@media screen and (max-width: 800px) {
    .title-div p {
        font-size: 90%; 
    }
    #title-tjanster.button {
        font-size: 80%; 
    }
}

/* släp 2 per rad */
@media screen and (max-width: 750px) {
    .slap {
        width: 40%; 
    }
    #hyrslap .slap:nth-child(3), #envagsslap .slap:nth-child(3) {
        display:none; 
    }
    footer div {
        flex-flow: wrap; 
    }
    footer div p {
        width: 40%; 
        text-align: left !important; 
    }
    .title-div p {
        font-size: 80%; 
    }
    #title-tjanster .button {
        font-size: 70%;
        padding: 8px 10px; 
    }
    #title-tjanster, #title-valkommen {
        height: 150vh; 
    }
    #tjanster p  {
        padding-bottom: 10px; 
    }
}

@media screen and (max-width: 700px) {
    h1 {
        font-size: 32px; 
    }
    #tjanster p  {
        padding-bottom: 20px; 
    }
    #tanka-div img, #tanka-div p {
        width: 100%;
    }
    #tanka-div img {
        max-width: 100%; 
    }
    #tanka-div {
        display: block; 
    }
}


/* mobil */
@media screen and (max-width: 600px) {
    h1 {
        font-size: 35px; 
        line-height: 40px; 
    }
    #tjanster div {
        width: 100%; 
    }
    #tjanster div:not(:last-child) {
        padding-bottom: 50px; 
    }
    footer div, #biltvatt-div, #kort-div {
        display: block; 
    }
    #title-preem, .title-page {
        background-attachment:scroll; 
    }
    
    #biltvatt-table tr td:first-child {
        width: 70%; 
    }
    #biltvatt-table tr td h3 {
        font-size: 20px; 
    }
    #biltvatt-table tr td p {
        font-size: 15px; 
    }
    #mat-bildspel i {
        font-size: 40px; 
    }
    #mat-bildspel img {
        height: 200px; 
    }
    footer div p, #biltvatt-div img, #biltvatt-div p, #kort-div img, #kort-div ul{
        width: 100%; 
    }
    #mat-div img {
        height: 70%; 
    }
    #kort-disclaimer {
        margin-left: -10px; 
    }
    #slap-boka {
        line-height: 40px; 
    }
    footer div p:not(:last-child) {
        padding-bottom: 20px; 
    }
    
    #nav {
        height: 50px; 
        padding: 0; 
    }
    nav img {
        width: 40px !important; 
        height: 40px !important; 
    }
    #img {
        position: absolute; 
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -45%);
    }
    #img::before, #img::after {
        width: 0; 
        height: 0; 
    } 
    #nav-content {
        top: 100%;
        transform: translate(0, 0);
        left: -100%; 
        transition: left 0.7s; 
        display: block; 
        background: #FFAC3A; 
        margin: 0; 
        padding: 20px; 
        position: relative; 
        width: 40%; 
        height: 150vh; 
    }
    #nav-dropdown {
        position: static; 
        margin: 0; 
        padding: 0 0 0 20px; 
    }
    #nav-dropdown li, #nav-dropdown li:first-child {
        padding: 0; 
    }
    #nav-dropdown::before, #nav-dropdown::after {
        width: 0; 
        height: 0; 
    }
    #menu {
        display: block; 
        position: absolute; 
        top: 50%; 
        left: 10px; 
        transform: translate(0, -50%);
        font-size: 30px !important; 
    }
    #menu:hover {
        cursor: pointer; 
    }
    
    .hideNav {
        left: -100% !important;
    }
    .showNav {
        left: 0% !important; 
    }
    
    #title-preem div p {
        width: 80%; 
    }
    #title-vilka-bildspel {
        height: 35% !important; 
    }
    #title-tjanster .button {
        font-size: 65%; 
        padding: 3px 5px; 
    }
    #title-tjanster .button:nth-child(3), #title-tjanster .button:nth-child(5) {
        width: 30px; 
        text-align: center; 
    }
    #title-valkommen div div {
        width: 100%; 
    }
    
    #tjanster p {
        padding: 0; 
    }
    
    
    .slap ul {
        padding-bottom: 25px; 
    }
}