html {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 1.75em;
    font-weight: 700;
    color: #696969;
    line-height: 1.6em;
    padding: 25px 0 15px 0;
}

h2 {
    font-size: 1.4em;
    font-weight: 700;
    color: #696969;
    line-height: 1.6em;
    padding: 25px 0 5px 0;
}

h3 {
    font-size: 1em;
    font-weight: 700;
    color: #696969;
    line-height: 1.6em;
    padding: 25px 0 5px 0;
}

p {
    color: #696969;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    padding: 0 0 20px 0;
}

sup {
    font-size: 0.5em;
    line-height: 0.5em;
}

strong {
    font-weight: 900;
}

.text-margin {
    max-width: 800px;
    margin: 0 auto;
}

.text-full {
    max-width: 1024px;
    margin: 0 auto;
}

.italic {
    font-style: italic;
    margin-bottom: 20px;
}

.bold {
    font-weight: 900;
    margin-top: 20px;
}

header {
    max-width: 300px;
    margin: 1.3em auto;
    padding: 0.5em 1em;

}

/* Nav styles */
nav {
    background-color: #F8F8F8;
    height: 50px; 
}

nav a {
    color: #858585;
    text-decoration: none;
    padding: 3px 5px;
}

a:link, a:visited {
    color: #858585;
}

nav a:hover, nav a:active {
    color: #6D915A;
    border-bottom: 2px solid #6D915A;
}

.featurebox p:hover, .featurebox p:active, .featurebox h2:hover, .featurebox h2:active {
    color: #6D915A;
}

.features a:hover, .features a:active, .features h2:hover, .features h2:active {
    color: #6D915A;
}

.this-page {
    font-weight: 700;
    border-bottom: 2px solid #858585;
}

#desktop-nav {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0.4em 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#desktop-nav ul {
    display: flex;
}

#desktop-nav li {
    padding-right: 3em;
}

#desktop-nav ul ul {
    background-color: rgba(255, 255, 255, 0.8);
    margin-top: 1.1em;
    display: none;
    position: absolute;
}

#desktop-nav ul ul li {
    padding: 1em;
}

#mobile-nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
}

#mobile-nav img {
    width: 30px;
}

#mobile-nav ul {
    display: none;
    position: absolute;
    top: 240px;
    background-color: hsla(0, 0%, 100%, 0.9);
    padding: 0 1.5em;
    margin-left: -1em;
}

#mobile-nav ul ul {
    left: 20px;
    top: 0;
    background-color:#ffffff00;
    position: relative;
    display: block;
}

#mobile-nav ul li {
    margin: 1.8em 0;
}

.myButton {
    background-color: #D3DECD;
    text-align: center;
    width: 120px;
    padding: 10px 0;
    border-radius: 5px;
    display: block;
    text-decoration: none;    

}
.hus .myButton {
    width: 49%;
}

.myButton:link, .myButton:visited {
    font-weight: 400;

}

.myButton:hover, .myButton:active {
    background-color: #6D915A;
    color: #ffffff;
    font-weight: 700;
}

.buttonbox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
}

/* Main styles: */

.ctaWrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    max-width: 1024px;
    margin: 0 auto;
}

.cta {
    background-color: rgba(254, 93, 49, 0.95);
    box-shadow: 0px 0px 8px #343434db;
    max-width: 300px;
    height: 380px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    padding: 10px 15px;
    top: 260px;
    margin: 20px 0;
}

.cta h2, .cta p, .cta a {
    color: #fff;
    padding: 5px;
    text-align: center;
}

.cta h2 {
    animation: mycolor 0.3s 6;
    animation-direction: alternate-reverse;
}

@keyframes mycolor {
    from {color: #ffff3a;}
    to {color: #ffffff;}
}

.heroimg {
    height: 400px;
    background-image: url(../images/kampen-start.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center -150px;
}

.features {
    max-width: 1024px;
    margin: 50px auto 20px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#feature1 {
    background-image: url(../images/ledigt.jpg);
}

#feature2 {
    background-image: url(../images/mina-sidor.jpg);
}
#feature3 {
    background-image: url(../images/felanmalan.jpg);
}

#feature4 {
    background-image: url(../images/miljo-hallbarhet.jpg);
}

.featurebox {
    background-position: center;
    background-size: cover;
    width: 49%;
    height: 370px;
    margin-bottom: 1.1em;
}

.featuretxt {
    background-color: hsla(0, 0%, 100%, 0.8);
    padding: 0 20px;
    max-width: 60%;
    float: right;
    margin-top: 40%;
}

.featuretxt h2 {
    padding: 10px 0;
}

.bannerimg {
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
}

.mypageimg {
    background-image: url(../images/mina-sidor-wide.jpg);
}

.aboutimg {
    background-image: url(../images/omoss-wide.jpg);
}

.howto {
    display: flex;
    justify-content: space-between;
    max-width: 1024px;
    margin: 50px auto;
}

.howto li {
    color: #696969;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5em;
    list-style-type: square;
    list-style-position: inside;
}

.howto li {
    margin-bottom: 1.5em;
}

.howto div {
    max-width: 45%;
}

.howto div:last-child {
    background-color: #F8F8F8;
    padding: 15px 25px;
}

.howto h2 {
    color: #6D915A;
}

.howto .myButton {
    width: 80%;
    margin: 80px auto 0 auto;
}

.personnel {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 1044px;
    margin: 10px auto;
}

.personnel div {
    min-width: 29%;
    background-color: #ebebeb;
    padding: 0 0 20px 0;
    margin: 20px;
}

.personnel img {
    width: 100%;
}

.personnel p {
    padding: 3px 20px;
}

.title {
    font-style: italic;
}

.personnel h2 {
    padding: 5px 5px 5px 30px;
    margin: 10px 20px 15px -10px;
    color: #ffffff;
    background-color: #6D915A;
}

.kampen-pris {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 800px;
    margin: 10px auto;
}

.kampen-pris img {
    width: 32%;
    margin-top: 20px;
}

iframe {
    margin-left: 60px;
    width: 600px;
    height: 550px;
    border: none;
}

/* Object styles */
.category {
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;
    max-width: 1024px;
    margin: 10px auto 50px auto;
}

.category a {
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    color: #696969;
    line-height: 1.6em;
    padding: 0.5em 0;
    text-align: center;
    color: #ffffff;
    background-color: #85858560;
    text-decoration: none;
    width: 24%;
}

.category a:hover, .category a:active {
    color: #ffffff;
    background-color: #6D915A;

}

#current {
    color: #858585;
    background-color: #D3DECD;
}

#category1 {
    background-image: url(../images/fastigheter/algen-13.jpg);
}

#category2 {
    background-image: url(../images/fastigheter/bjorklunden-10.jpg);
}
#category3 {
    background-image: url(../images/fastigheter/hjulet-4.jpg);
}

#category4 {
    background-image: url(../images/fastigheter/solrosen.jpg);
}

.categorybox {
    background-position: center;
    background-size: cover;
    width: 49%;
    height: 300px;
    margin-bottom: 1.1em;
}

.hus {
    max-width: 1024px;
    margin: 1em auto;
    background-color: #F8F8F8;
    padding-bottom: 70px;
    min-height: 180px;
}

.hus h2 {
    padding: 5px 0;
}

.hus p {
    padding: 0 0 5px 0;

}

.husbild {
    width: 360px;    
    float: left;
    margin-right: 2em;
}

.husbild-w {
    display: none;
    width: 100%;
}

.objText {
    padding: 2px;
}

.showMore {
    display: none;
    padding: 0 25px;
}
.showMore a {
    margin: 2em 0 1em 0;
}
.startText {
    height: 178px;
    padding: 25px;
}

.startCont {
    height: 1.5em;
    overflow: hidden;
}

.show {
    cursor: pointer;
    color: #6D915A;
    font-weight: 900;
    background-color: hsla(0, 0%, 100%, 0.8);
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.05);
    padding: 1.3em;
    float: right;
}

.showLess {
    cursor: pointer;
    color: #6D915A;
    font-weight: 900;
    background-color: hsla(0, 0%, 100%, 0.8);
    box-shadow: -3px 3px 8px rgba(0, 0, 0, 0.1);
    padding: 1.3em;
    float: right;
    display: none;
}

.show:hover, .showLess:hover {
    font-weight: bold;
    color: #ffffff;
    background-color: #D3DECD;
}

/* footer styles: */

footer {
    margin-top: 80px;
    background-color: #F8F8F8;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;

}

footer div {
    display: flex;
    align-items: center;
    margin: 20px 20px;
}

footer a {
    text-decoration: none; 
    font-weight: 300;
}

footer p {
    padding: 0;
}

footer img {
    margin-right: 10px;
    width: 1.6em;
}

.allButFooter {
    min-height: calc(100vh - 180px);
}

/* Media queries */

@media (max-width: 1050px) {
    #desktop-nav {
        padding: 0.4em 0px;
        margin: 0 18px;
    }

    .cta {
        margin: 20px 20px;
    }

    .features {
        padding: 0 20px;
    }

    .category {
        margin: 10px 20px 40px 20px;
    }

    .heroimg {
        background-position: center;
    }

    .text-full {
        margin: 0 40px;
    }

    .hus {
        margin: 1em 20px;
    }

    .howto {
        margin: 50px 40px;
    }

    .personnel {
        margin: 10px 30px;
    }

    .personnel div {
        min-width: 45%;

    }

}


@media (max-width: 900px) {
    .heroimg {
        height: 300px;
    }

    .bannerimg {
        height: 200px;
    }

    .cta {
        max-width: 300px;
        height: 280px;
        position: absolute;
        padding: 10px 20px;
        top: 260px;
    }

    .cta h2 {
        font-size: 1.2em;
        padding: 0px;
    }

    .cta p {
        font-size: 0.9em;
        padding: 0px;
    }

    #desktop-nav {
        display: none;
    }

    #mobile-nav {
        display: flex;
    }

    .text-margin {
        margin: 0 40px;
    }

    .howto .text-margin {
        margin: 0 0px;
    }

    .kampen-pris {
        margin: 10px auto;
        padding: 0 40px;
    }

    .personnel div {
        min-width: 43%;

    }

}

@media (max-width: 800px) {
    .heroimg {
        background-attachment: inherit;
    }


    h1, h2, h3 {
        padding: 15px 0 15px 0;
    }

    .bannerimg {
        margin-bottom: 30px;
    }
}

@media (max-width: 740px) {

    .husbild {
        display: none;
    }
    
    .husbild-w {
        display: inline;
        width: 100%;
        margin-right: 2em;
    }

    .featuretxt {
        margin-top: 60%;
    }

    .howto {
        display: block;
        margin: 0px 40px;
    }

    .howto div {
        max-width: 100%;
    }

    .howto .myButton {
        margin: 15px auto 20px auto;
    }

    iframe {
        margin-left: 0px;
        max-width: 100%;
    }

    .personnel div {
        min-width: 40%;
    }
}

@media (max-width: 650px) {

    .heroimg {
        height: 250px;
    }
    
    .cta {
        max-width: 100%;
        height: auto;
        position: static;
        margin: 10px 0;
    }


    .features {
        margin: 20px auto;
    }

    .featurebox, .categorybox {
        width: 100%;
        height: 300px;
        margin-bottom: 1.1em;
    }

    .featuretxt {
        width: 60%;
        margin-top: 28%;
    }

    .hus .myButton {
        width: 100%;
    }

    .buttonbox {
        display: block;
    }

    .buttonbox .myButton:last-child {
        margin: 0em 2em 2em 0em;
    }

    .categorybox .featuretxt {
        margin-top: 35%;
    }

    .category a {
        width: 49%;
        margin-bottom: 10px;
    }

    .category {
        margin-bottom: 20px;
    }
  
    .kampen-pris img {
        width: 100%;
    }

    .personnel div {
        min-width: 80%;
    }

}

@media (max-width: 500px) {
    
    .heroimg {
        height: 180px;
    }

    footer {
        margin-top: 50px;
        padding: 1px 1em;
        display: block;
        height: 130px;
    }

    footer p {
        text-align: left;
        margin: 6px;
    }

    .allButFooter {
        min-height: calc(100vh - 230px);
    }

    .hus .myButton {
        width: 100%;    
    }

    .featuretxt {
        margin-top: 35%;
    }

    .categorybox .featuretxt {
        margin-top: 45%;
    }

    .howto .myButton {
        width: 100%;
    }

}

@media (max-width: 400px) {
    header {
        max-width: 200px;
        padding: 0em 1em;
    }

    #mobile-nav ul {
        top: 182px;
    }

    .categorybox .featuretxt {
        margin-top: 55%;
    }

    .category a {
        width: 100%;
    }

    .heroimg {
        background-position: center;
    }
    .bannerimg {
        height: 150px;
    }
}

@media (max-width: 330px) {
    h2 {
        font-size: 1.2em;
        line-height: 1.4em;
    }
    .categorybox .featuretxt {
        margin-top: 70%;
    }
}