* {
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    background-color: #FFFFFF;
}


/*#######################################
             HEADERN KOMMER HÄR
#######################################*/
header {
    width: 100%;
    height: 5em;
    background-color: #19535F;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


#radioArvid {
    width: 250px;
    height: 100%;
    background-image: url(radioArvid.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 10px;
    padding: 20px;
}

nav {
    height: 100%;
    width: 40%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-content: space-around;
}

.navlink {
    height: 100%;
    width: calc(100% / 3);
    background-color: ;
    text-decoration: none;
    line-height: 5em;
    text-align: center;
}

@media only screen and (max-width: 425px) {
    nav {
        display: none;
    }

}

.navlink a {
    text-decoration: none;
    width: 100%;
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
}

.navlink a:hover {
    background: #FF1654;
}

/*#######################################
             MAIN KOMMER HÄR
#######################################*/

.item1 {
    grid-area: bp1;
    background-image: url(lake.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.item2 {
    grid-area: sm1;
    background-image: url(redhouse.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.item3 {
    grid-area: sm2;
    background-image: url(winterroad.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.item4 {
    grid-area: sm3;
    background-image: url(wintervillage.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.item5 {
    grid-area: sm4;
    background-image: url(winterboat.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.item6 {
    grid-area: sm5;
    background-image: url(wintersnow.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}


.grid-container {
    height: 30em;
    display: grid;
    grid-template-areas:
        'bp1 bp1 bp1 bp1 sm1 sm1'
        'bp1 bp1 bp1 bp1 sm1 sm1'
        'bp1 bp1 bp1 bp1 sm2 sm2'
        'bp1 bp1 bp1 bp1 sm2 sm2'
        'sm3 sm3 sm4 sm4 sm5 sm5'
        'sm3 sm3 sm4 sm4 sm5 sm5';
    grid-gap: 1px;
    padding: 0;
    grid-template-columns: calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6);
    grid-template-rows: calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6) calc((100% - 1px)/6);
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #FFFFFF;
}

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

    .grid-container {
        min-height: 3em;
        width: 100%;
        grid-template-areas:
            'bp1 bp1 bp1 bp1'
            'bp1 bp1 bp1 bp1'
            'bp1 bp1 bp1 bp1'
            'bp1 bp1 bp1 bp1'
            'sm1 sm1 sm2 sm2'
            'sm1 sm1 sm2 sm2'
            'sm3 sm3 sm4 sm4'
            'sm3 sm3 sm4 sm4'
            'sm5 sm5 sm5 sm5'
            'sm5 sm5 sm5 sm5';
        grid-template-columns: calc((100% - 1px)/4) calc((100% - 1px)/4) auto auto;
        grid-template-rows: calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10) calc((100% - 1px)/10);
    }

    #vadret {
        display: none;
        height: 100%;
    }

}



.grid-container > div {
    background-color: #19535F;
    text-align: center;
    padding: 0;
    font-size: 30px;
}

.fogtext {
    background-image: linear-gradient(rgb(12, 18, 12, 0.15), rgb(12, 18, 12, 0.15));
    height: 100%;
    margin: 0;
}

.fogtext:hover {
    background-image: linear-gradient(rgb(12, 18, 12, 0), rgb(12, 18, 12, 0.0));
}

.fogtexten {
    padding: 10% 2% 2% 2%;
    text-align: left;
    font-size: 25px;
    text-shadow: -0.5px 0 black, 0 0.5px black, 0.5px 0 black, 0 -0.5px black;
}

.fogtexten h2 {
    font-size: 40px;
}

.weatherwidget-io {
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .fogtexten {
        font-size: 10px;
        text-align: center;
    }

    .fogtexten h2 {
        font-size: 20px;
    }

    .fogtexten p {
        display: none;
    }

    #vadretHolder {
        display: block;
    }

    #senasteNyttH2 {
        font-size: 40px;
    }

    #vaderfog {
        padding: 0;
    }
}

@media only screen and (max-width: 800px) {
    .fogtexten {
        font-size: 15px;
        text-align: center;
    }

    .fogtexten h2 {
        font-size: 30px;
    }

    .fogtexten p {
        display: none;
    }

    #vadretHolder {
        display: block;
    }

    #senasteNyttH2 {
        font-size: 60px;
    }

    #vadret {
        display: none;
    }
}

@media only screen and (min-width: 1600px) {
    #vadret {
        display: none;
    }
}
/*#######################################
            INFO RUTOR HÄR
#######################################*/
.bluecont {
    background-color: #247BA0;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    min-height: 250px;
}


.infoBox1 {
    width: calc(100% / 3);
    padding: 15px;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}



#plantSVG {
    background-image: url(plant.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

#ipodSVG {
    background-image: url(ipod.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

#globeSVG {
    background-image: url(worldwide.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.blueSVG {
    width: 8vw;
    height: 8vw;
}

.infoBox1Text {
    padding: 10% 10%;
    width: 80%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    display: inline-block;
    margin: 0;

}

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

    .bluecont {
        flex-direction: column;
    }

    .infoBox1 {
        flex-direction: column;
        width: 100%;
    }

    .blueSVG {
        height: 20vw;
        width: 20vw;
    }

}

/*#######################################
            POSTIKLAPPAR HÄR
#######################################*/
.whitecont {
    background-color: #FFFFFF;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    min-height: 100%;
}


.whitecontText h2,
.whitecontText p {
    font-size: 100%;
    font-weight: normal;
}

.whitecontText ul,
.whitecontText li {
    list-style: none;
}

.whitecontText ul {
    overflow: hidden;
    padding: 3em;
}

.whitecontText ul li a {
    text-decoration: none;
    color: #000;
    background: #247BA0;
    display: block;
    min-height: 120px;
    min-width: 4vw;
    padding: 1em;
    -moz-box-shadow: 5px 5px 7px rgba(33, 33, 33, 1);
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, .7);
    -moz-transition: -moz-transform .15s linear;
    -o-transition: -o-transform .15s linear;
    -webkit-transition: -webkit-transform .15s linear;
}

.whitecontText ul li {
    margin: 1em;
    float: left;

}

.whitecontText ul li h2 {
    font-size: 180%;
    font-weight: bold;
    padding-bottom: 10px;
}

.whitecontText ul li p {
    font-size: 120%;
}

.whitecontText ul li a {
    -webkit-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
}

.whitecontText ul li:nth-child(even) a { /* Inställningar för varranan ruta */
    -o-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    position: relative;
    top: 5px;
    background: #FFFFFF;
}

.whitecontText ul li:nth-child(5n) a {
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    position: relative;
    top: -10px;
}

.whitecontText ul li a:hover,
.whitecontText ul li a:focus {
    box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -moz-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-box-shadow: 10px 10px 7px rgba(0, 0, 0, .7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    position: relative;
    z-index: 5;
    background-color: #FF1654;
}

.whitecontText ol {
    text-align: center;
}

.whitecontText ol li {
    display: inline;
    padding-right: 1em;
}

.whitecontText ol li a {
    color: #fff;
}

.whitecontText {
    width: 80%;
    background-color:
}

/*#######################################
            FOOTER
#######################################*/
footer {
    background-color: #0C120C;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 100px;
    text-align: center;
}