#intro {
    height: 100vh;
    width: 100%;
    background: center/cover no-repeat #0a263c url(../bilder/bakgrunder/malmo.jpg)
}

#intro-inner {
    position: absolute;
    top: 56%;
    left: 50%;
    width: 80%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

#slogan {
    letter-spacing: -.125rem;
    font: 300 4.125rem / 3rem "Cormorant Garamond", Serif;
    color: #f2f2f2;
    text-shadow: 0 0 .7rem #000
}

#slogan::before {
    content: "";
    display: block;
    margin: 1rem 0;
    width: 0;
    height: .25rem;
    -webkit-animation: 1.4s ease-out 1.5s 1 normal forwards running sloganDec;
    -moz-animation: 1.4s ease-out 1.5s 1 normal forwards running sloganDec;
    -o-animation: 1.4s ease-out 1.5s 1 normal forwards running sloganDec;
    animation: 1.4s ease-out 1.5s 1 normal forwards running sloganDec;
    background: #e6bf56
}

@-webkit-keyframes sloganDec {
    0% {
        width: 0
    }
    100% {
        width: 9rem
    }
}

@-moz-keyframes sloganDec {
    0% {
        width: 0
    }
    100% {
        width: 9rem
    }
}

@-o-keyframes sloganDec {
    0% {
        width: 0
    }
    100% {
        width: 9rem
    }
}

@keyframes sloganDec {
    0% {
        width: 0
    }
    100% {
        width: 9rem
    }
}

#slogan-subtext {
    font: 1.1rem/1.6rem "Montserrat", "Arial", "Helvetica", Sans-Serif;
    max-width: 53.125rem;
    text-shadow: 0 0 .3rem #333;
    color: #fff;
    margin-top: 2.5rem;
    padding: 0 0 .4rem 0
}

#contact-us {
    color: #fff;
    font: 1.1rem"Montserrat", "Arial", "Helvetica", Sans-Serif;
    text-decoration: none;
    letter-spacing: .05rem;
    display: block;
    width: 12rem;
    height: 3.2rem;
    border: .125rem solid #fff;
    line-height: 3.2rem;
    text-align: center;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

#contact-us:hover {
    cursor: pointer;
    background: rgba(255, 255, 255, .1);
}

#contact-us:hover #rarr {
    margin: 0 0 0 .3125rem
}

#scroll-down {
    position: absolute;
    left: 50%;
    bottom: 6.25rem;
    text-align: center;
    -webkit-transform: translate(-3.125rem, 0);
    -ms-transform: translate(-3.125rem, 0);
    -moz-transform: translate(-3.125rem, 0);
    -o-transform: translate(-3.125rem, 0);
    transform: translate(-3.125rem, 0);
    float: right;
    width: 6.25rem;
    height: 5rem;
    text-decoration: none;
}

#scroll-down-text {
    letter-spacing: .0625rem;
    font: 600 .775rem"Montserrat", "Arial", "Helvetica", Sans-Serif;
    text-transform: uppercase;
    color: #fff
}

.ball {
    position: relative;
    top: 1.25rem;
    margin: .125rem 0 0 0;
    -webkit-transform: translate(2.9375rem, 0);
    -ms-transform: translate(2.9375rem, 0);
    -moz-transform: translate(2.9375rem, 0);
    -o-transform: translate(2.9375rem, 0);
    transform: translate(2.9375rem, 0);
    width: .4375rem;
    height: .4375rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -webkit-box-shadow: 0 0 .0625rem 0 #898989;
    -moz-box-shadow: 0 0 .0625rem 0 #898989;
    box-shadow: 0 0 .0625rem 0 #898989;
    -webkit-animation: 5s infinite ballRippleAnimation;
    -moz-animation: 5s infinite ballRippleAnimation;
    -o-animation: 5s infinite ballRippleAnimation;
    animation: 5s infinite ballRippleAnimation
}

#ball1 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-delay: .2s
}

#ball2 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-delay: .4s
}

#ball3 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    -o-animation-delay: .2s;
    animation-delay: .6s
}

@-webkit-keyframes ballRippleAnimation {
    0% {
        transform: translate(2.9375rem, 0)
    }
    50% {
        transform: translate(2.9375rem, -.9375rem)
    }
    100% {
        transform: translate(2.9375rem, 0)
    }
}

@-moz-keyframes ballRippleAnimation {
    0% {
        transform: translate(2.9375rem, 0)
    }
    50% {
        transform: translate(2.9375rem, -.9375rem)
    }
    100% {
        transform: translate(2.9375rem, 0)
    }
}

@-o-keyframes ballRippleAnimation {
    0% {
        transform: translate(2.9375rem, 0)
    }
    50% {
        transform: translate(2.9375rem, -.9375rem)
    }
    100% {
        transform: translate(2.9375rem, 0)
    }
}

@keyframes ballRippleAnimation {
    0% {
        transform: translate(2.9375rem, 0)
    }
    50% {
        transform: translate(2.9375rem, -.9375rem)
    }
    100% {
        transform: translate(2.9375rem, 0)
    }
}

#services-subheading,
.segment-heading {
    position: relative;
    font: 3.4375rem"Montserrat", "Arial", "Helvetica", Sans-Serif;
    letter-spacing: .02rem;
    text-align: left;
    padding: 0 0 0 .625rem;
    color: #f2f2f2;
    text-shadow: 0 0 .8125rem #000
}

#tjanster {
    position: relative;
    width: 100%
}

#services-subheading {
    font-size: 1.875rem;
    font-weight: 500;
    margin-top: 1.5rem
}

#services-inner {
    position: relative;
    left: 50%;
    padding: 10rem 0;
    max-width: 56.25rem;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0)
}

#services-menu {
    max-width: 56.25rem;
    min-height: 37.5rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
    padding: 0
}

.service-item {
    list-style: none;
    padding: 1.25rem .625rem
}

.service-anchor {
    max-width: 25rem;
    display: block;
    color: #fff
}

.service-heading {
    color: #fff;
    font: 1.4375rem"Montserrat", "Arial", "Helvetica", Sans-Serif;
    letter-spacing: .0625rem
}

.service-description {
    color: #ccc;
    font: 500 1.1rem"Montserrat", "Arial", "Helvetica", Sans-Serif;
    font-weight: 300;
    padding: .3rem 0 0 0
}

#om {
    background: center/cover no-repeat url(../bilder/bakgrunder/om.jpg);
    position: relative;
    width: 100%;
    min-height: 40.625rem;
    max-height: 50rem;
    -moz-box-shadow: 0 0 .625rem 0 #000;
    -webkit-box-shadow: 0 0 .625rem 0 #000;
    box-shadow: 0 0 .625rem 0 #000
}

#about-inner {
    position: relative;
    top: 12rem;
    margin: auto;
    max-width: 55.9375rem
}

#photo {
    position: relative;
    top: 1.4375rem;
    height: 11.25rem;
    width: 11.25rem;
    float: left;
    margin: 0 0 .9375rem;
    background: #ccc;
    box-shadow: 0 0 .625rem -.125 #000;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    border-radius: .25rem
}

#description {
    color: #f2f2f2;
    padding: 0 .9375rem;
    font: 1.125rem/1.35"Montserrat", "Arial", "Helvetica", Sans-Serif;
    box-sizing: border-box;
    max-width: 43.75rem;
    text-shadow: 0 0 .8125rem #000
}

#referenser {
    width: 100%
}

#references-inner {
    padding: 10rem 0 0 0
}

.reference-letter {
    box-sizing: border-box;
    margin: 0 auto 11.25rem;
    padding: 0 1.25rem;
    position: relative;
    max-width: 50rem
}

.reference-text {
    color: #f2f2f2;
    font: italic 500 1.3rem/2rem"Cormorant Garamond", "PT Serif", Serif;
    letter-spacing: .05rem
}

.reference-author {
    color: #bababa;
    font: .9rem"Montserrat", "Arial", "Helvetica", Sans-Serif;
    letter-spacing: .05rem;
    margin: .5rem 0 0 1.875rem
}

@media only screen and (max-width:880px) {
    #scroll-down {
        display: none
    }
    #slogan {
        font-size: 3rem
    }
    #slogan-subtext {
        font-size: 1rem
    }
    #slogan::before {
        height: .1875rem
    }
}

@media only screen and (max-width:334px) {
    #services-list .services-anchor {
        font-size: 1.25rem
    }
}

@media only screen and (max-width:894px) {
    #description {
        float: left
    }
    #about-inner {
        top: 3.75rem
    }
}

@media only screen and (max-width:502px) {
    #about-inner {
        top: 1.875rem
    }
}

@media only screen and (max-width:825px) {
    #description {
        font-size: .8125rem
    }
    .reference-text {
        font-size: 1.0625rem
    }
    .reference-author {
        font-size: .875rem
    }
}

@media only screen and (max-width:250px),
only screen and (max-height:680px) {
    #scroll-down {
        display: none
    }
}}}