/* NRGE Design AB */

/* Animationer */
@import url('/resources/scripts/aos/2.3.1/aos.css');

/* ==========================================================================
Generellt 
========================================================================== */
:root {
    /* 	Colors */
    --primary-color: 172, 138, 92;
    --primary-light-color: 225, 189, 142;

    --black-color: 0, 0, 0;
    --gray-dark-color: 58, 58, 58;
    --gray-color: 174, 174, 174;
    --gray-light-color: 243, 241, 237;
    --white-color: 255, 255, 255;

    /* 	Layout  */
    --section-width: 140rem;
    --col-padding: 3rem;
    --menu-height: 13rem;
    --menu-height-scrolled: 13rem;

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

    /* 	Mobile nav */
    --activate-mobile-menu: 0;
    --mobile-menu-height: 6rem;
    --mobile-menu-bg: var(--gray-light-color);
    --menu-color: var(--black-color);
}

@media only screen and (max-width: 580px) {
    :root {
        /* 	Typography */
        --base-size: 1.3rem;

        /* 	Mobile nav */
        --menu-height: 7rem;
        --menu-height-scrolled: 7rem;
    }
}

/* Layout
========================================================================== */
.section-block {
    padding: 20rem 5rem;
}

/* Paddings */
.pt-2 .section-block,
.pt-2:not(.section-wrapper) {
    padding-top: 2rem;
}

.pb-0 .section-block,
.pb-0:not(.section-wrapper) {
    padding-bottom: 0;
}

.pt-10 .section-block,
.pt-10:not(.section-wrapper) {
    padding-top: 10rem;
}

.pb-10 .section-block,
.pb-10:not(.section-wrapper) {
    padding-bottom: 10rem;
}

/* Margins */
.mb-3 {
    margin-bottom: 3rem;
}

.mt-10 {
    margin-top: 10rem;
}

.mt-12 {
    margin-top: 12rem;
}

/* Ovriga klasser */
.block {
    display: block;
}

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

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

    .pt-10 .section-block,
    .pt-10:not(.section-wrapper) {
        padding-top: 8rem;
    }

    .mt-10 {
        margin-top: 7rem;
    }
}

/* Text och typsnitt
========================================================================== */
body {
    font-family: "Google Sans", sans-serif;
}

/* Rubriker */
.text-label {
    padding-bottom: .5rem;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgb(var(--primary-color));
}

.section-title {
    padding-bottom: .3em;
    font-size: 4rem;
    font-weight: 100;
    line-height: 1.1;
    font-family: "Italiana", sans-serif;
    color: rgb(var(--black-color));
}

.small-title {
    padding-bottom: .7em;
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1.4;
    color: rgb(var(--black-color));
    text-transform: uppercase;
}

/* Brodtext och lankar */
p,
li {
    font-weight: 300;
    line-height: 1.5;
    color: rgb(var(--gray-dark-color));
}

.text-smaller {
    font-size: 1.3rem;
}

/* Ovriga klasser */
.text-block {
    max-width: 70rem;
}

.text-block-center {
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
}

.text-bold {
    font-weight: 600;
}

.text-italic {
    font-style: italic;
}

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

.text-uppercase {
    text-transform: uppercase;
}

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

    /* Rubriker */
    .section-title {
        font-size: 3.5rem;
    }

        .small-title {
        font-size: 1.9rem;
    }
}

/* Knappar och speciella lankar
========================================================================== */
.btn-wrapper {
    margin-top: 2rem;
}

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

/* Knappar */
.btn {
    min-width: 15rem;
    padding: 1.4rem 2rem;
    margin: 5px;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    transition: all .4s ease;
}

/* Arrow link */
.link {
    text-decoration: none;
}

.link .text-label {
    transition: .4s ease;
}

.link:hover .text-label {
    color: rgb(var(--gray-color));
}

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

/* Farger
========================================================================== */
/* Text */
.text-white {
    color: rgb(var(--white-color));
}

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

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

/* Bakgrundsbilder och videos 
========================================================================== */
.bg-image {
    position: relative;
    overflow: hidden;
}

.bg-image-wrapper {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Parallax */
.parallax {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

@media only screen and (hover:none) {
    .parallax {
        background-attachment: scroll;
        background-position: center center;
    }
}

/* 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;
}

@media screen and (max-width: 1300px) {
    .split-content {
        padding: 3rem;
    }
}

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

    .split-wrapper,
    .split-wrapper.reverse {
        flex-direction: column;
        background: transparent;
    }

    .split-content {
        width: 100%;
        max-width: 70rem;
        padding: 0 0 3rem;
        background: transparent;
    }

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

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

/* Header / Navigation
========================================================================== */
body:not(.EditMode, .SubPage) header {
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

body:not(.EditMode, .SubPage) header.show-header {
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

body:not(.EditMode) header .container {
    justify-content: center;
}

/* Logo */
body:not(.EditMode, .SubPage) .header-logo img {
    opacity: 0;
    transition: opacity .3s ease;
}

body:not(.EditMode, .SubPage) header.show-logo .header-logo img {
    opacity: 1;
}

.header-logo img {
    padding: 4.3rem 0;
}

@media only screen and (max-width: 580px) {
    .header-logo img {
        padding: 1.5rem 0;
    }
}

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

/* Fade med logo
========================================================================== */
body.IndexPage:not(.EditMode) .section-wrapper:not(.top-section) {
    z-index: 2;
    position: relative;
    background-color: rgb(var(--white-color));
}

body:not(.EditMode) .top-section {
    z-index: 1;
    position: sticky;
    top: 0;

    display: flex;
    align-items: center;
    height: 100vh;
    text-align: center;
    background-color: rgb(var(--white-color));
}

.top-section .section-block {
    width: 100%;
}

.top-section img {
    max-width: 90%;
}

@media only screen and (max-width: 1024px) {
    .top-section img {
        margin-top: -15rem;
    }
}

/* Pallaxer
========================================================================== */
.parallax-architecture,
.parallax-apartments,
.parallax-villas,
.parallax-residentals,
.parallax-about {
    display: flex;
    align-items: flex-end;
    height: 100vh;
}

.parallax-architecture .section-block,
.parallax-apartments .section-block,
.parallax-villas .section-block,
.parallax-residentals .section-block,
.parallax-about .section-block {
    padding-bottom: 2rem;
}

.parallax-architecture {
    background-image: url('/assets/images/living-room-spain-2000px.jpg');
}

.parallax-apartments {
    background-image: url('/assets/images/apartments-1200px.jpg');
}

.parallax-villas {
    background-image: url('/assets/images/villa-tradack-1500px.jpg');
}

.parallax-residentals {
    background-image: url('/assets/images/residentals-1600px.jpg');
}

.parallax-about {
    background-image: url('/assets/images/villa-skargarden-1500px.jpg');
}

.parallax .section-title {
    font-size: 4rem;
    text-shadow: 0 0px 2rem rgb(var(--black-color));
    padding-bottom: 10rem;
}

.parallax .small-title {
    padding-bottom: .1em;
    font-size: 2rem;
    font-family: "Italiana", sans-serif;
    text-shadow: 0 0px 2rem rgb(var(--black-color));
}

.parallax p {
    max-width: 24rem;
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 1.4;
    text-shadow: 0 0px 2rem rgb(var(--black-color), .5);
}

.parallax .text-wrapper {
    position: absolute;
    right: 3rem;
    bottom: 2rem;
}

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

    .parallax-architecture,
    .parallax-apartments,
    .parallax-villas,
    .parallax-residentals,
    .parallax-about {
        height: calc(100vh - var(--menu-height) - 3rem);
    }

    .parallax .text-wrapper {
        right: 2rem;
    }

    .parallax .section-title {
        font-size: 3.5rem;
    }
}

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

    .parallax-architecture,
    .parallax-apartments,
    .parallax-villas,
    .parallax-residentals,
    .parallax-about {
        height: calc(50vh - var(--menu-height) - 3rem);
    }

    .parallax .section-title {
        font-size: 3rem;
        padding-bottom: 12rem;
    }

    .parallax p {
        max-width: 17rem;
        line-height: 1.2;
        font-size: 0.9rem;
    }

    .parallax .text-wrapper {
        text-align: right;
    }

    .parallax .text-wrapper-start {
        position: absolute;
        top: 4rem;
    }
}

/* ==========================================================================
Undersidor
========================================================================== */

/* ==========================================================================
Undersida: Apartments
========================================================================== */
.section-project .section-block {
    padding-top: 10rem;
    padding-bottom: 5rem;
}

/* En bild */
.section-project .image-wrapper {
    width: 100%;
    margin: 5rem 0;
}

.section-project .image-wrapper .of-wrapper {
    width: 100%;
    height: 90vh;
}

/* Tre bilder */
.images-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5rem;
}

.images-grid-wrapper .of-wrapper:nth-child(3) {
    grid-row: 1 / 3;
}

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

    /* En bild */
    .section-project .image-wrapper {
        margin: 3rem 0;
    }

    .section-project .image-wrapper .of-wrapper {
        height: auto;
    }

    /* Tre bilder */
    .images-grid-wrapper {
        gap: 3rem;
    }
}

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

    /* En bild */
    .section-project .image-wrapper {
        margin: 2rem 0;
    }

    /* Tre bilder */
    .images-grid-wrapper {
        gap: 2rem;
    }
}

/* ==========================================================================
Footer
========================================================================== */
footer .container {
    max-width: none;
}

.text-map-wrapper {
    display: flex;
    flex-wrap: wrap;
}

/* Text */
.text-map-wrapper .text-wrapper {
    width: 30%;
    padding: 10rem;
}

.text-map-wrapper a {
    text-decoration: none;
}

.text-map-wrapper a:hover {
    color: rgb(var(--primary-color));
}

/* Karta */
.map-wrapper {
    width: 70%;
}

.map-wrapper iframe {
    width: 100%;
    height: calc(100vh - var(--menu-height));
    border: none;
}

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

    /* Text */
    .text-map-wrapper .text-wrapper {
        width: 40%;
        padding: 5rem;
    }

    /* Karta */
    .map-wrapper {
        width: 60%;
    }
}

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

    /* Text */
    .text-map-wrapper .text-wrapper {
        width: 100%;
        padding: 0 3rem 3rem;
        text-align: center;
    }

    /* Karta */
    .map-wrapper {
        width: 100%;
    }

    .map-wrapper iframe {
        height: 50vh;
    }
}