/* Årehyddan shared site CSS
   Loaded from Site.master. Keep menu/footer/shared page typography here. */

@font-face {
    font-family: 'mostranuova';
    src: url('/assets/fonts/MostraNuova-Heavy.otf') format('opentype');
}

.arehyddan-navbar {
    background-color: #353535;
    margin-bottom: 0 !important;
}

.arehyddan-brand {
    color: #a3b3cc !important;
}

.arehyddan-nav-link {
    color: #ffffff !important;
}

.arehyddan-nav-active {
    font-weight: 800 !important;
}

.hidden {
    display: none !important;
}

.countdown {
    font-size: 28pt;
    color: #323232;
}

.bodyfont {
    font-size: 1.2rem !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
}

.wood {
    background-image: url('/images/default/woodenplank.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

html,
body,
header,
.intro-4 {
    font-family: 'roboto slab', Arial, sans-serif;
}

body {
    font-weight: 400;
}

.toptext {
    color: #555555 !important;
}

.goldtext {
    color: #D4AF37;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 500;
    font-size: 16pt;
}

.menutext {
    color: #444444;
    font-family: Montserrat, Arial, sans-serif;
    font-weight: 300;
    font-size: 14pt;
}

.view.intro-4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Default.aspx-specific responsive typography */
@media (max-width: 740px) {
    body.are-page-default .bullets {
        font-size: 4vw !important;
    }

    body.are-page-default h4 {
        font-size: 5vw !important;
        font-weight: 700;
    }

    body.are-page-default h1 {
        margin-bottom: 0 !important;
        font-size: 20px;
        font-weight: 700;
    }

    body.are-page-default h2 {
        margin-bottom: 0 !important;
        font-size: 16px;
        font-weight: 400;
    }

    body.are-page-default h5 {
        font-size: 14px;
        font-weight: 300;
    }

    body.are-page-default .countdown {
        font-size: 20px;
        color: #323232;
        font-weight: 400;
    }

    body.are-page-default .intromovie {
        height: 300px !important;
        width: 100%;
    }
}

@media (max-width: 600px) {
    body.are-page-default .bullets {
        font-size: 4vw !important;
    }

    body.are-page-default .btnbig {
        display: none;
    }

    body.are-page-default .btnsmall {
        display: block !important;
    }

    body.are-page-default h1 {
        margin-bottom: 0 !important;
        font-size: 5vw !important;
        font-weight: 700;
    }

    body.are-page-default h2 {
        margin-bottom: 0 !important;
        font-size: 4vw !important;
        font-weight: 400;
    }

    body.are-page-default h3 {
        margin-bottom: 0 !important;
        font-size: 4vw !important;
        font-weight: 400;
    }

    body.are-page-default h4 {
        font-size: 4vw !important;
        font-weight: 400;
    }

    body.are-page-default h5 {
        font-size: 3vw !important;
        font-weight: 300;
    }

    body.are-page-default header .intro-4 li {
        margin-bottom: 0 !important;
        font-size: 5vw;
    }

    body.are-page-default .intromovie {
        height: 300px !important;
        width: 100%;
    }
}

@media (min-width: 560px) and (max-width: 740px) {
    body.are-page-default .bullets {
        font-size: 4vw !important;
    }

    body.are-page-default h1 {
        margin-bottom: 0 !important;
        font-size: 5vw !important;
        font-weight: 700;
    }

    body.are-page-default h2 {
        margin-bottom: 0 !important;
        font-size: 4vw !important;
        font-weight: 400;
    }

    body.are-page-default h3 {
        margin-bottom: 0 !important;
        font-size: 3vw !important;
        font-weight: 400;
    }

    body.are-page-default h4 {
        font-size: 3vw !important;
        font-weight: 700;
    }

    body.are-page-default h5 {
        font-size: 3vw !important;
        font-weight: 300;
    }

    body.are-page-default .intromovie {
        height: 300px !important;
        width: 100%;
    }

    body.are-page-default header .intro-4 li {
        margin-bottom: 0 !important;
        font-size: 5vw;
    }

    body.are-page-default header .intro-4 li h5 {
        margin-bottom: 0 !important;
    }
}

@media (min-width: 800px) and (max-width: 850px) {
    body.are-page-default .bullets {
        font-size: 4vw !important;
    }

    body.are-page-default h1 {
        margin-bottom: 0 !important;
        font-size: 5vw !important;
        font-weight: 700;
    }

    body.are-page-default h2 {
        margin-bottom: 0 !important;
        font-size: 4vw !important;
        font-weight: 400;
    }

    body.are-page-default h3 {
        margin-bottom: 0 !important;
        font-size: 3vw !important;
        font-weight: 400;
    }

    body.are-page-default h4 {
        font-size: 3vw !important;
        font-weight: 700;
    }

    body.are-page-default h5 {
        font-size: 3vw !important;
        font-weight: 300;
    }

    body.are-page-default .intromovie {
        height: 300px !important;
        width: 100%;
    }

    body.are-page-default header .intro-4 li {
        margin-bottom: 0 !important;
        font-size: 5vw;
    }

    body.are-page-default header .intro-4 li h5 {
        margin-bottom: 0 !important;
    }
}

/* Menuitem page responsive typography */
@media (max-width: 740px) {
    body.are-page-menuitem .bullets {
        font-size: 4vw !important;
    }

    body.are-page-menuitem h4 {
        font-size: 5vw !important;
        font-weight: 700;
    }

    body.are-page-menuitem h1 {
        margin-bottom: 0 !important;
        font-size: 28px;
        font-weight: 700;
    }

    body.are-page-menuitem h2 {
        margin-bottom: 0 !important;
        font-size: 20px;
        font-weight: 400;
    }

    body.are-page-menuitem .countdown {
        font-size: 20px;
        color: #323232;
        font-weight: 400;
    }

    body.are-page-menuitem .intromovie {
        height: 300px !important;
        width: 100%;
    }
}

@media (min-width: 560px) and (max-width: 740px),
       (min-width: 800px) and (max-width: 850px) {
    body.are-page-menuitem .bullets {
        font-size: 4vw !important;
    }

    body.are-page-menuitem h4 {
        font-size: 5vw !important;
        font-weight: 700;
    }

    body.are-page-menuitem .intromovie {
        height: 300px !important;
        width: 100%;
    }

    body.are-page-menuitem header .intro-4 li h1 {
        margin-bottom: 0 !important;
        font-size: 5vw;
    }

    body.are-page-menuitem header .intro-4 li h5 {
        margin-bottom: 0 !important;
    }
}

/* Boende hero */
body.are-page-boende .hero-banner {
    background-image: url('/images/boende/boendebanner.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #000;
    width: 100%;
    height: 60vh;
    min-height: 250px;
}

@media (max-width: 768px) {
    body.are-page-boende .hero-banner {
        height: 40vh;
    }
}

body.are-page-boende .streak.hero-banner {
    background-color: transparent !important;
}

body.are-page-boende .streak.streak-photo::before {
    display: none !important;
}

body.are-page-boende .streak.streak-photo.streak-lg.hero-banner {
    background-image: url('/images/boende/boendebanner.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: 50% 40% !important;
    width: 100% !important;
    display: block;
}

@media (max-width: 767.98px) {
    body.are-page-boende .streak.streak-photo.streak-lg.hero-banner {
        background-size: cover !important;
        height: 40vh !important;
        min-height: 260px !important;
    }

    body.are-page-boende .streak.hero-banner > .mask {
        background: rgba(0, 0, 0, 0.25);
        height: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.are-page-boende .streak.streak-photo.streak-lg.hero-banner {
        background-size: cover !important;
        height: 50vh !important;
        min-height: 380px !important;
    }

    body.are-page-boende .streak.hero-banner > .mask {
        background: rgba(0, 0, 0, 0.25);
        height: 100%;
    }
}

@media (min-width: 992px) {
    body.are-page-boende .streak.streak-photo.streak-lg.hero-banner {
        background-size: cover !important;
        height: 65vh !important;
        min-height: 480px !important;
    }

    body.are-page-boende .streak.hero-banner > .mask {
        background: rgba(0, 0, 0, 0.25);
        height: 100%;
    }
}