/* Sociallux AB  */

@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

/* Typsnitt */
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;1,100&display=swap');

/* ==========================================================================
Generellt 
========================================================================== */
:root {
    /* 	Colors */
    --primary-color: 142, 200, 237;
    --secondary-color: 89, 89, 93;

    --accent-color: 2, 89, 131;

    --white-color: 255, 255, 255;
    --black-color: 42, 42, 42;
    --grey-light-color: 230, 230, 230;
    --grey-dark-color: 94, 92, 95;

    /* 	Layout  */
    --col-padding: 3rem;
    --menu-height: 8rem;
    --menu-height-scrolled: 8rem;
    --section-width: 150rem;

    /* 	Typography */
    --base-size: 1.8rem;

    /*  Mobile nav */
    --activate-mobile-menu: 1500;
    --mobile-menu-height: 6rem;
    --mobile-menu-bg: var(--white-color);
    --menu-color: var(--black-color);

    /*  Others */
    --box-shadow: 0 1rem 3rem rgb(var(--black-color), .1);
}

/* Layout
========================================================================== */
.section-wrapper {
    background: rgb(var(--white-color));
}

.section-block {
    padding: 8rem 5rem;
}

/* Paddings */
.p-0 {
    padding: 0rem !important;
}

.p-4 .section-block {
    padding: 4rem 0rem;
}

.pt-0 .section-block {
    padding-top: 0rem;
}

.pt-2 {
    padding-top: 2rem;
}

.pb-0 .section-block {
    padding-bottom: 0rem;
}

.pb-0 {
    padding-bottom: 0rem !important;
}

.pb-2 {
    padding-bottom: 2rem;
}

.pb-4 {
    padding-bottom: 4rem;
}

/* Bredder */
.mw-none .section-block-wrapper {
    max-width: none;
}

.mw-1000 .section-block {
    max-width: 1000px;
    margin: 0 auto;
    display: block;
}

.mw-1200 .section-block {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
}

@media only screen and (max-width: 1024px) {
    .section-block {
        padding: 5rem 4rem;
    }
}

@media only screen and (max-width: 580px) {
    .section-block {
        padding: 3rem 2rem;
    }
}

/* Text och typsnitt
========================================================================== */
body {
    font-family: 'Poppins', sans-serif;
}

/* Rubriker */
.text-label {
    padding-bottom: 1.5rem;
    color: rgb(var(--accent-color));
    letter-spacing: .2rem;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 500;
}

.section-title {
    padding-bottom: 2.5rem;
    font-size: 3.8rem;
    font-weight: 400;
    letter-spacing: normal;
}

.small-title {
    padding-bottom: 1rem;
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding-top: 1rem;
}

.sub-title {
    font-size: 1.6rem;
    font-weight: 400;
}

@media only screen and (max-width: 580px) {
    .section-title {
        font-size: 3rem;
    }
}

@media only screen and (max-width: 380px) {
    .section-title {
        font-size: 2.6rem;
    }
}

/* Brodtext och lankar */
p {
    color: rgb(var(--black-color));
}

a {
    font-size: 1.8rem;
    color: rgb(var(--black-color));
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.a-underline {
    text-decoration: underline;
}

/* Listor */

.list-circle {
    list-style: none;
    margin: 0rem;
}

.list-circle li {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    color: rgb(var(--black-color));
    font-weight: 400;
}

.list-circle li::before {
    content: '\f111';
    position: absolute;
    top: 50%;
    left: -2.5rem;
    color: rgb(var(--primary-color));
    font-weight: 700;
    font-size: .8rem;
    font-family: 'Font Awesome 5 Pro';
    transform: translateY(-50%);
}

li {
    line-height: 1.6;
}

ol li {
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 1rem;
    color: rgb(var(--black-color));
    font-weight: 400;
}

ol li::marker {
    color: rgb(var(--primary-color));
}

/* Ovriga klasser */
.text-block {
    max-width: 95rem;
    margin: 0 auto;
}

.text-intro {
    max-width: 80rem;
    padding: 2rem 0rem 4rem 0rem;
}

.text-center {
    text-align: center;
}

.center {
    text-align: center;
}

.bold {
    font-weight: 700;
}

/* Knappar och speciella lankar
========================================================================== */
.btn,
.ContactSubmit {
    padding: 1.6rem 3.5rem;
    margin: 1rem 0rem;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    border: none;
}

.btn-primary-filled,
.ContactSubmit {
    color: rgb(var(--primary-color));
    background: rgb(var(--accent-color));
}

.btn-primary-filled:hover,
.ContactSubmit:hover,
.ContactSubmit:focus {
    background: rgb(var(--primary-color));
    color: rgb(var(--accent-color));
}

.btn-accent-border {
    color: rgb(var(--primary-color));
    background: transparent;
    border: 1.5px solid rgb(var(--primary-color));
}

.btn-accent-border:hover {
    color: rgb(var(--accent-color));
    background: transparent;
    border: 1.5px solid rgb(var(--accent-color));
}

.btn-center {
    margin: 0 auto;
}

/* Knapp med cirkel */
.circle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    padding: 0;
    margin: .5rem;
    font-size: 0;
    color: rgb(var(--secondary-color));
    text-decoration: none;
    transition: .3s ease;
}

.circle-icon:hover {
    color: rgb(var(--primary-color));
}

.circle-icon em:before,
.circle-icon i:before {
    font-size: var(--base-size);
}

/* Speciella lankar */
.arrow-link {
    padding-right: 1rem;
    color: rgb(var(--accent-color));
    padding-top: 1rem;
    letter-spacing: 1px;
    font-size: 1.5rem;
}

.arrow-link::after {
    content: ' \2023';
    display: inline-block;
    margin-left: .5rem;
    transition: transform .4s ease;
}

a.arrow-link:hover::after {
    transform: translateX(1rem);
    transition: transform .4s ease;
}

.arrow-link:hover {
    color: rgb(var(--primary-color));
}

/* Farger
========================================================================== */
/* Bakgrunder */
.bg-primary {
    background-color: rgb(var(--primary-color));
}

.bg-primary-light {
    background-color: rgba(var(--primary-color), 0.2);
}

.bg-light-grey {
    background-color: rgba(var(--grey-light-color), 0.2);
}

.bg-accent {
    background-color: rgb(var(--accent-color));
}

/* Text */
.text-primary {
    color: rgb(var(--primary-color));
}

.text-secondary {
    color: rgb(var(--secondary-color));
}

.text-accent {
    color: rgb(var(--accent-color));
}

.text-white {
    color: rgb(var(--white-color));
}

/* Lankfarger */
.blue-link {
    color: rgb(var(--accent-color));
}

.blue-link:hover {
    color: rgb(var(--black-color));
}

/* Split wrapper
========================================================================== */
.split-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.split-wrapper.reverse {
    flex-direction: row-reverse;
}

.split-content {
    width: 50%;
    padding: 5rem;
}

.split-image {
    width: 50%;
}

/* Centrera content */
.split-wrapper .align-center {
    align-self: center;
}

/* Speciella margins */
.split-wrapper .mt--10rem {
    margin-top: -10rem;
}

/* Speciella bredder */
.split-wrapper .w-60 {
    width: 60%;
}

.split-wrapper .w-40 {
    width: 40%;
}

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

    .split-content,
    .split-wrapper .w-60,
    .split-wrapper .w-40 {
        width: 100%;
        padding: 3rem 0;
        max-width: 80rem;
    }

    .split-image {
        width: 100%;
        min-height: 20rem;
    }

    .split-wrapper.reverse {
        flex-direction: row;
    }

    /* Speciella margins */
    .split-wrapper .mt--10rem {
        margin-top: 0;
    }

}

@media screen and (max-width: 580px) {
    .split-wrapper {
        background: transparent;
    }

    .split-content {
        padding: 3rem 0 3rem 0;
    }
}

/* Cards
========================================================================== */
.cards-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* Specifika bredder */
.cards-wrapper.w-33 .card-item {
    width: calc((100% / 3) - 2rem);
    margin: 1rem;
}

.cards-wrapper.w-25 .card-item {
    width: calc((100% / 4) - 2rem);
    margin: 1rem;
}

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

    .cards-wrapper.w-25 .card-item,
    .cards-wrapper.w-33 .card-item {
        width: calc((100% / 2) - 2rem);
        margin: 1rem;
    }
}

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

    .cards-wrapper.w-25 .card-item,
    .cards-wrapper.w-33 .card-item {
        width: 100%;
        margin: 1rem 0;
    }
}

/* Cards 7 */
.cards-7 .card-item {
    text-decoration: none;
    box-shadow: var(--box-shadow);
    background: #FFF;
    overflow: hidden;
}

.cards-7 .text-wrapper {
    padding: 2rem 3rem;
}

.cards-7 .small-title {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    border-bottom: 1px solid rgb(var(--primary-color));
}

.cards-7 p {
    font-size: 1.5rem;
}

/* Cards 11 */
.cards-11 .image-wrapper {
    width: 20rem;
    height: 20rem;
    border-radius: 100%;
    background: rgba(var(--primary-color), 0.2);
}

.cards-11 .text-wrapper {
    padding: 3rem;
}

.cards-11 .small-title {
    font-size: 1.9rem;
    font-weight: 700;
}

.cards-11 p,
.cards-11 a {
    display: block;
    padding-bottom: .3rem;
    font-size: 1.5rem;
    text-decoration: none;
}

.cards-11 em {
    margin-right: 1rem;
}

.cards-11 .socials-wrapper {
    margin-top: 1rem;
}

.cards-11 .socials-wrapper a {
    display: inline-block;
}

/* Parallax
========================================================================== */
.parallax {
    max-width: 100% !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 40rem;
}

@media only screen and (hover:none) {

    .parallax,
    .section-job {
        background-attachment: scroll;
        background-position: center center;
    }
}

/* Bakgrundsvideo
========================================================================== */
.bg-video {
    position: relative;
    margin-top: calc(-1 * var(--menu-height));
    background: rgba(0, 0, 0, 0.5);
}

.bg-video-wrapper video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
}

/* Header / Navigation
========================================================================== */
.top-header:not(.EditMode),
header:not(.EditMode) {
    display: none;
}


/* Top header */
.top-header {
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid rgb(var(--primary-color));
    overflow: hidden;
    background: rgba(var(--primary-color), 0.2);
}

.top-header.info {
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid rgb(var(--primary-color));
    overflow: hidden;
    background: rgb(var(--accent-color));
    font-size: 1.0rem;
    text-align: center;
}

.top-header.info p,
.top-header.info a {
    color: white;
    text-align: center;
    font-size: 1.8rem;
}

/* marquee  */
.marquee-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}

.marquee-content {
    animation: marquee 30s linear infinite;
}

.marquee-content {
    width: 150%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    overflow: hidden;
    top: 1rem;
}

.marquee-content span {
    width: 100%;
    white-space: nowrap;
}

.marquee-content .text-title,
.top-header.info a {
    color: rgb(var(--white-color));
    font-size: 1.4rem;
}

@keyframes marquee {
    0% {
        left: 40%;
    }

    100% {
        left: -140%;
    }
}

.scrolled .top-header {
    border-bottom: 1px solid rgb(var(--white-color));
}

.top-header ul {
    display: flex;
    justify-content: flex-end;
    padding: .5rem 2rem;
    margin: 0;
    list-style: none;
}

.top-header a {
    padding: 0 1rem;
    font-size: 1.4rem;
    color: rgb(var(--accent-color));
}

.top-header .fas {
    padding: 0.5rem;
}

.top-header a:hover {
    color: rgb(var(--black-color));
}

/* Header */
header {
    padding: 0;
    transition: all .2s ease;
}

header.scrolled {
    background-color: rgb(var(--white-color));
    box-shadow: 0 1rem 3rem rgba(17, 17, 17, .1);
    transition: all .2s ease;
}

header .container {
    display: grid;
    grid-template-columns: 1fr 0 auto 1fr;
    max-width: none;
    padding: 0 2rem;
}

/* Header logo */
.header-logo {
    flex-basis: 0;
    flex: 1 1 0px;
}

/* Nav */
nav.mainmenu a {
    font-size: 1.5rem;
}

nav.mainmenu ul>li>ul {
    width: 25rem;
}

nav.mainmenu ul>li>ul>li>ul>li {
    padding-left: 5rem;
}

/* CMS:et */
.EditMode nav.mainmenu ul>li>ul {
    width: 45rem;
}

.EditMode header {
    position: relative;
}

.EditMode.WebbEssDIY header {
    top: 0px !important;
}

.EditMode nav.mainmenu ul>li>ul>li>ul>li {
    padding-left: 0rem;
}

/* For att dolja hem i menyn  */
nav.mainmenu ul.TemplateMenu>li:first-child {
    display: none;
}

/* CTA-wrapper */
.header-cta-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-basis: 0;
    flex: 1 1 0px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.header-cta-wrapper .btn {
    min-width: unset;
    padding: 1rem 3rem;
    margin: 0 .5rem;
}

/* Mobilmeny */
header.mobile-menu .container {
    display: flex;
}

.mobile-menu .TemplateMenu {
    flex-wrap: wrap;
    padding: 2rem 0rem 5rem 0rem;
}

@media only screen and (max-width: 1500px) {
    .mobile-menu {
        height: auto;
    }
}

/* Media queries */
@media only screen and (max-width: 1150px) {
    .header-cta-wrapper .btn {
        padding: 1rem 1.6rem;
    }
}

@media only screen and (max-width: 1100px) {
    .mobile-menu {
        height: auto;
    }
}

@media only screen and (max-width: 480px) {
    .header-cta-wrapper .btn {
        display: none;
    }
}


/* ==========================================================================
Startsida 
========================================================================== */

/* Top-section
========================================================================== */
.top-section {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 115vh;
    margin-top: calc(-1 * var(--menu-height));
    overflow: hidden;
}

/* Usp */
.usp-wrapper {
    width: 100%;
    text-align: center;
}

.usp-wrapper h1 {
    color: rgb(var(--white-color));
    font-size: 6rem;
    padding-bottom: 2rem;
    letter-spacing: 1px;
    font-family: 'Rozha One', serif;
    line-height: 1;
}

.usp-wrapper h2 {
    color: rgb(var(--white-color));
    font-size: 2rem;
    padding-bottom: 2rem;
    font-weight: 300;
}

.top-section .arrow-link {
    color: rgb(var(--white-color));
}

.top-section .arrow-link:hover {
    color: rgb(var(--primary-color));
}

.top-section .btn {
    margin: 1.5rem;
}

.top-section .btn-accent-border:hover {
    color: rgb(var(--white-color));
    background: transparent;
    border: 1.5px solid rgb(var(--white-color));
}

/* Startsida: Intro
========================================================================== */
.section-intro {
    text-align: center;
}

.section-intro .section-block-wrapper {
    max-width: 95rem;
}

@media only screen and (max-width: 580px) {
    .section-intro {
        text-align: left;
    }
}

/* Startsida: HVB Hemmen
========================================================================== */
.hvb-wrapper .card-item .image-wrapper {
    height: 25rem;
}

/* Startsida: Nyheter
========================================================================== */
/* Layout */
.section-news .col-0 {
    padding-right: 6rem;
    border-right: 1px solid #eaeaea;
    width: 60%;
}

.section-news .col-1 {
    padding-left: 6rem;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Senaste inlagget */
.large-card-item .image-wrapper {
    height: 40rem;
}

.large-card-item .text-wrapper {
    padding: 2rem 0rem;
}

.large-card-item h2 {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    border-bottom: 1px solid rgb(var(--primary-color));
}

.large-card-item p {
    font-size: 1.6rem;
}

.side-list-item {
    padding-bottom: 1rem;
}

.side-list-item p {
    font-size: 1.5rem;
}

@media only screen and (max-width: 1300px) {
    .section-news .col-0 {
        padding-right: 3rem;
    }

    .section-news .col-1 {
        padding-left: 3rem;
    }
}

@media only screen and (max-width: 880px) {
    .section-news .col-0 {
        width: 100%;
        border-right: none;
        padding-bottom: 2rem;
        padding-right: 0rem;
    }

    .section-news .col-1 .code-part {
        display: none;
    }

    .section-news .col-1 {
        width: 100%;
        padding-left: 0rem;
    }
}

/* Startsida: Lediga tjanster
========================================================================== */
.section-job {
    background-image: url('/assets/images/beach-birds-2000px.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.section-job .section-block {
    padding-top: 35rem;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), linear-gradient(to top, white, white);
    background-size: 100% 35rem, 100% auto;
    background-position: center top, center 35rem;
    background-repeat: no-repeat;
}

.section-job .split-wrapper {
    align-items: center;
}

.section-job .split-image {
    max-height: 65rem;
}

@media only screen and (max-width: 1100px) {
    .section-job .section-block {
        padding-top: 35rem;
    }

    .section-job .split-image {
        max-height: 50rem;
    }
}

@media only screen and (max-width: 1100px) {
    .section-job .section-block {
        padding-top: 40rem;
    }
}

/* Startsida: Vara tjanster
========================================================================== */
.section-services {
    overflow: hidden;
}

.split-slider {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding-bottom: 5rem;
}

/* Bild-slider */
.split-slider .split-image-wrapper .slick-list {
    overflow: visible;
}

.split-slider .split-image-wrapper {
    width: 100%;
}

.split-slider .slide-image {
    height: auto;
    margin: 0 3rem 0 0;
}

.split-slider .image-wrapper {
    width: 100%;
    height: 100%;
    padding: 0 0 0 35%;
    transition: padding .8s ease;
}

.split-slider .slick-slide.slick-active .image-wrapper,
.split-slider .slick-slide.slick-active+.slick-slide .image-wrapper {
    padding: 0 35% 0 0;
    transition: padding .8s ease;
}

/* Text-slider */
.split-slider .split-text-wrapper {
    position: relative;
    width: 45%;
    margin-left: calc(-45% - 3rem);
    bottom: -5rem;
    padding: 10rem 7rem 7rem;
    background-color: rgb(var(--white-color));
}

.split-slider .split-text-wrapper p {
    max-width: 45rem;
}

/* slick knappar */
.split-slider .slick-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 4rem;
    height: 4rem;
    font-size: 0;
    background-color: rgba(var(--secondary-color), 1);
    border: 1px solid rgba(var(--secondary-color), 1);
    cursor: pointer;
    transition: .4s;
}

.split-slider .slick-arrow.slick-prev {
    right: 4rem;
}

.split-slider .slick-arrow:not(.slick-disabled):hover,
.split-slider .slick-arrow:not(.slick-disabled):focus {
    background-color: rgba(var(--secondary-color), .6);
    border: 1px solid rgba(var(--secondary-color), .6);
}

.split-slider .slick-prev:after,
.split-slider .slick-next:after {
    color: rgb(var(--white-color));
    font-size: 2rem;
}

/* Dots */
.split-slider .slick-dots {
    position: absolute;
    top: 5rem;
    padding: 0;
    margin: 0;
}

.split-slider .slick-dots li {
    margin: 0 5px;
}

.split-slider .slick-dots li:before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 4px;
    background-color: rgb(var(--black-color));
    transition: all .2s ease;
}

.split-slider .slick-dots li.slick-active:before {
    opacity: 1;
    width: 2rem;
    background-color: rgb(var(--primary-color));
    transition: all .2s ease;
}

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

    /* Bild-slider */
    .split-slider .slide-image {
        margin: 0 1rem 0 0;
    }

    /* Text-slider */
    .split-slider .split-text-wrapper {
        padding: 7rem 5rem 5rem;
        width: 50%;
        margin-left: calc(-50% - 1rem);
    }

    /* Dots */
    .split-slider .slick-dots {
        top: 3rem;
    }
}

@media only screen and (max-width: 1000px) {
    .split-slider {
        padding-bottom: 0;
    }

    /* Bild-slider */
    .split-slider .split-image-wrapper {
        width: 100%;
    }

    .split-slider .image-wrapper,
    .split-slider .slick-slide.slick-active .image-wrapper,
    .split-slider .slick-slide.slick-active+.slick-slide .image-wrapper {
        padding: 0;
    }

    /* Text-slider */
    .split-slider .split-text-wrapper {
        position: relative;
        bottom: unset;
        width: 100%;
        margin: 2rem 0 0;
    }
}

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

    /* Text-slider */
    .split-slider .split-text-wrapper {
        padding: 2rem 0 4.5rem 0;
    }

    /* Dots */
    .split-slider .slick-dots {
        top: 0;
    }
}

/* Startsida: Nyhetsbrev
========================================================================== */
.section-newsletter .col-0 {
    padding: 10rem 4rem;
    max-width: 95rem;
    margin: 0 auto;
}

.section-newsletter .text-center {
    color: rgb(var(--white-color));
}

.section-newsletter .Contact .ContactForm .ContactFormName,
.section-newsletter .Contact .ContactForm .ContactFormField,
.section-newsletter .Contact .ContactForm .ContactFormMessage,
.section-newsletter .Contact .ContactForm .ContactFormEmail p {
    display: none;
}

.section-newsletter .ContactForm div {
    margin-bottom: 0rem;
}

.section-newsletter .Contact .ContactForm input.ContactSubmit {
    color: rgb(var(--white-color));
    border: none;
    border-radius: 0rem 3rem 3rem 0rem;
    padding: 1.4rem 5rem;
    background-color: rgb(var(--black-color));
    color: rgb(var(--white-color));
    font-size: 1.7rem;
    cursor: pointer;
    margin-top: 0;
    height: 5.5rem;
    letter-spacing: 1px;
    margin-bottom: 0;
    font-weight: 300;
}

.section-newsletter .Contact .ContactForm .ContactFormEmail {
    display: block;
}

.section-newsletter .Contact .ContactForm div {
    display: none;
}

.section-newsletter .Contact .ContactForm input.ContactSubmit:hover {
    color: rgb(var(--accent-color));
    background-color: rgb(var(--primary-color));
}

.section-newsletter .Contact .ContactForm div {
    width: 100%;
    padding-bottom: 0;
}

.section-newsletter .Contact .ContactForm {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-newsletter .section-block .Contact .ContactForm input.text {
    font-size: 1.6rem;
    height: 5.5rem;
    font-weight: 300;
    border-radius: 3rem 0rem 0rem 3rem;
    width: 100%;
    border: 0px solid rgb(var(--black-color));
}

.section-newsletter p {
    font-size: 1.5rem;
}

@media only screen and (max-width: 640px) {
    .section-newsletter .Contact .ContactForm {
        flex-direction: column;
    }

    .section-newsletter .section-block .Contact .ContactForm input.text {
        border-radius: 3rem;
    }

    .section-newsletter .Contact .ContactForm input.ContactSubmit {
        border-radius: 3rem;
        margin-top: 10px;
        width: 100%;
    }
}

/* ==========================================================================
Undersidor
========================================================================== */
/* Hero
========================================================================== */
.hero {
    background-color: rgba(var(--primary-color), 0.5);
}

.hero h1 {
    text-align: center;
    font-family: 'Rozha One', serif;
    color: rgb(var(--accent-color));
    font-size: 5rem;
}

@media only screen and (max-width: 580px) {
    .hero .section-block {
        padding-top: 10rem;
    }

    .hero h1 {
        font-size: 4rem;
    }
}

/* Text och kontaktruta
========================================================================== */
.intro-contact .section-block-wrapper {
    display: flex;
    align-items: center;
}

.intro-contact .col-0 {
    width: 70%;
    padding-right: 10%;
}

.intro-contact .col-1 {
    width: 30%
}

@media only screen and (max-width: 980px) {
    .intro-contact .col-0 {
        width: 100%;
        padding-bottom: 4rem;
        padding-right: 0;
    }

    .intro-contact .col-1 {
        width: 100%;
        /* text-align: center;  */
    }

    .intro-contact .col-1 img {
        width: 60%;
    }
}

/* Navigation HVB-boenden */
.submenu {
    position: fixed;
    z-index: 1;
    margin-top: 1rem;
    max-width: 55rem;
    border-radius: 0px 10px 10px 0px;
    background: rgb(var(--accent-color));
    box-shadow: var(--box-shadow);
}

.submenu ul {
    display: flex;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.submenu li {
    display: flex;
    flex-direction: row;
}

.submenu a {
    color: rgb(var(--white-color));
    margin: 0 1rem;
    padding: 0.5rem 1rem;
    font-weight: 300;
    font-size: 1.5rem;
}

.submenu a:hover {
    color: rgb(var(--primary-color));
}

@media only screen and (max-width: 680px) {
    .submenu a {
        padding: 0.2rem;
    }
}

/* ==========================================================================
Undersida: Helgkollo
========================================================================== */
/* Parallax
========================================================================== */
.parallax-helgkollo {
    background-image: url('/assets/images/sociallux-helgkollo-bg-volleyboll-2000px.jpg');
}

/* ==========================================================================
Undersida: Samlingssida nyheter
========================================================================== */
.sub-news .cards-7 .card-item {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
}

.sub-news .cards-7 .card-item .news-item-details {
    flex-grow: 1;
}

/* ==========================================================================
Undersidor: Enskilda nyheter
========================================================================== */
.nyheter-undersida .section-block-wrapper {
    max-width: 95rem;
    margin: 0 auto;
}

.nyheter-undersida h1 {
    padding-bottom: 1rem;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: normal;
}

.nyheter-undersida h4 {
    padding-bottom: 4rem;
    color: rgb(var(--accent-color));
    letter-spacing: .2rem;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 500;
}

.nyheter-undersida .section-block img {
    padding-top: 4rem;
    max-width: 35rem;
}

@media only screen and (max-width: 1024px) {
    .nyheter-undersida .section-block-wrapper {
        padding-top: 10rem;
    }
}

@media only screen and (max-width: 680px) {
    .nyheter-undersida h1 {
        font-size: 2.8rem;
    }
}

/* ==========================================================================
Undersida: Arbeta hos oss
========================================================================== */
/* Arbeta hos oss
========================================================================== */
.section-jobb .cards-wrapper {
    padding-top: 4rem;
}

.section-jobb .card-item {
    display: flex;
    box-shadow: var(--box-shadow);
    background-color: rgb(var(--white-color));
    padding: 2rem;
    transition: .2s ease;
}

.section-jobb .card-item .info {
    padding-bottom: 2rem;
}

.section-jobb .card-item p {
    font-size: 1.5rem;
}

.section-jobb .card-item .fas {
    color: rgb(var(--accent-color));
    width: 3rem;
    text-align: center;
    font-size: 2rem;
}

.section-jobb .card-item:hover {
    background-color: rgba(var(--primary-color), 0.2);
    transition: .2s ease;
}

/* ==========================================================================
Undersida: Enskilda jobbannonser
========================================================================== */
.jobb .col-1 p {
    padding-bottom: 2rem;
    font-size: 1.5rem;
}

.jobb .col-1 a {
    font-size: 1.5rem;
}

.jobb .col-1 a:hover {
    text-decoration: underline;
}

.jobb .section-block-wrapper {
    align-items: unset;
}

/* ==========================================================================
Undersida: Ramavtal
========================================================================== */
.section-ramavtal .cards-wrapper {
    justify-content: center;
}

.section-ramavtal h4 {
    padding: 2rem;
    width: 20rem;
    margin: 1%;
    box-shadow: var(--box-shadow);
    background-color: rgb(var(--white-color));
    color: rgb(var(--accent-color));
    text-align: center;
    font-size: 1.6rem;
    filter: grayscale() opacity(.8);
    transform: scale(.94);
    transition: 0.2s ease-in-out;
}

.section-ramavtal h4:hover {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

@media only screen and (max-width: 480px) {
    .section-ramavtal h4 {
        width: 16rem;
    }
}

/* ==========================================================================
Undersida: Kontakt
========================================================================== */
/* Dolja bilden pa kontaktrutorna */
.sub-contact .section-team .image-wrapper,
.no-image .image-wrapper {
    display: none;
}

.sub-contact .section-team .text-wrapper {
    padding: 1rem;
}

/* Kontaktformular 
========================================================================== */
.section-form .section-block-wrapper {
    display: flex;
    align-items: center;
}

.section-form .ContactForm {
    margin-top: 4rem;
}

.section-form .ContactForm p {
    color: rgb(var(--accent-color));
    line-height: 1.8;
    font-weight: 600;
    font-size: 1.4rem;
}

.section-form .ContactForm input[type="text"],
.section-form .ContactForm textarea {
    border: none;
    background-color: #ebebeb;
}

/* ==========================================================================
Undersida: GDPR
========================================================================== */
.sub-gdpr .small-title {
    padding-top: 2rem;
}

/* ==========================================================================
Undersida: Intressaanmalan jourhem/familjehem
========================================================================== */
.section-jour-anmalan p,
.section-jour-anmalan a {
    font-size: 1.5rem;
}

/* ==========================================================================
Footer
========================================================================== */
.footer:not(.EditMode) {
    display: none;
}

.footer {
    background-color: rgb(var(--accent-color));
}

.footer {
    background-color: rgb(var(--accent-color));
    display: none;
}

.footer-container {
    max-width: 160rem;
    padding: 2rem;
    margin: 0 auto;
}

.footer .small-title {
    color: rgb(var(--primary-color));
    font-size: 2rem;
    letter-spacing: 1px;
    font-weight: 400;
}

.footer a,
.footer p,
.footer li {
    color: rgb(var(--white-color));
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.8;
}

/* Footer top */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 8rem 2rem 6rem 2rem;
    border-bottom: 1px solid rgb(var(--primary-color));
}

.footer-menu {
    width: 20%;
    margin: 1.5rem 0;
}

.footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer a {
    text-decoration: none;
    transition: .2s ease;
}

.footer a:hover {
    color: rgb(var(--primary-color));
}

/* Footer bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}

.footer-bottom p {
    font-size: 1.4rem;
}

.footer-bottom .circle-icon {
    width: 3rem;
    height: 3rem;
}

.footer-bottom em::before {
    font-size: 1.8rem;
}

/* WebbEss Stamp  */
.webbess-stamp {
    display: flex;
    align-items: center;
    padding: 0;
    font-size: 1.2rem;
    font-weight: normal;
    margin-bottom: 1rem;
}

.webbess-stamp img {
    width: 3rem;
    margin-left: 1rem;
    filter: invert();
}


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

    /* Footer top */
    .footer-menu {
        width: 48%;
    }
}

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

    /* Footer top */
    .footer-menu {
        width: 100%;
    }

    /* Footer bottom */
    .footer-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 2rem 0;
    }

    .footer-bottom .socials {
        margin-bottom: 1.5rem;
    }

}

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

    /* Footer top */
    .footer-top {
        padding: 8rem 0 4rem 0;
    }

    /* Footer bottom */
    .footer-bottom {
        padding: 2rem 0;
    }
}