@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f5e9e2!important;
    font-family: 'Raleway', sans-serif;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;
}

.h1, h1{
    &.font-sizeh2{
        font-size: 2rem;
    }
}

header {
    position: relative;
    z-index: 99;
}

a {
    color: #773344!important;
}

a:hover, a:active {
    color: #773344;
    text-decoration: none!important;
}

img {
    max-width: 100%;
}

dl, ol, ul {
    margin-top: 0;
    margin-bottom: 1rem;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    @media (min-width: 768px) {

        font-size: 16px;

    }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

.cta-btn {
    background-color: #720026!important;
}

.nav-btn {
    background-color: #f5e9e2!important;
    color: #720026!important;
    font-weight: 600!important;
    margin: 0 5px;
    transition: all .3s ease;
}

.nav-btn:hover {
    background-color: white!important;
    color: #720026!important;
    transition: all .3s ease;
}

.border-btm {
    border-bottom: 3px solid #720026!important;
}

.btn-prijslijst {
    font-size: 13px!important;
}

.bg-img {
    color: #fff;
    background-image: url('/app/assets/img/bg-hout-sm.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    position: relative;
    margin: 0;
    padding: 0;
}

.bg-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #000;
    opacity: .2;
}

@keyframes fadeIn {
    from {top: 20%; opacity: 0;}
    to {top: 100; opacity: 1;}

}

@-webkit-keyframes fadeIn {
    from {top: 20%; opacity: 0;}
    to {top: 100; opacity: 1;}

}

.wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    animation: fadeIn 1000ms ease;
    -webkit-animation: fadeIn 1000ms ease;
    z-index: 9;
    text-align: center;
}

.home-title {
    font-size: 32px;
    font-family: 'Raleway', sans-serif;
    margin-bottom: 0;
    line-height: 1;
    font-weight: 700;
}


body{ height:100vh; margin:0; }

header{ min-height:70px;  }
footer{ min-height:50px; }

/* Trick */
body{
    display:flex;
    flex-direction:column;
}

footer{
    margin-top:auto;
}



@media screen and (max-width:768px) {
    .home-title {
        font-size: 4vw;
    }
}


.dot {
    color: #bd353a;
}

p {
    margin-bottom: 15px;
    font-family: 'Raleway', sans-serif;
    font-weight: normal;
    font-size: 14px;
    @media (min-width: 768px) {

        font-size: 16px;

    }
}

.icons {
    text-align: center;

}

.section-hero {
    position: relative;
}

.section-hero .hero-content {
    z-index: 9;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    width: 100%;
}

.btn-banner {
    font-size: 15px!important;
    @media (min-width: 768px) {

        font-size: 16px !important;

    }
}

.btn-subgroep{
    color: #773344 !important;
    background-color: white !important;
    font-weight: 700 !important;
    border-radius: .25rem;
}

.section-hero .btn-cta {
    font-size: 14px!important;
    @media (min-width: 768px) {

        font-size: 16px !important;

    }
}

header nav.navbar {
    background-color: #773344;
}

.hero-title {
    font-size: 5vw!important;
}

.section-hero h3 {
    font-size: 4vw!important;
}

.card-columns .card {
    background: transparent!important;
    border: none!important;
}

.nav-pills .nav-link.active {
    color: #773344!important;
    background-color: white!important;
    font-weight: 700!important;
}

@media screen and (min-width: 1260px) {
    .hero-title {
        font-size: 55px!important;
    }

    .section-hero h3 {
        font-size: 35px!important;
    }
}

@media screen and (max-width: 575px) {
    .nav-item {
        border-bottom: 1px solid rgba(255,255,255, .3);
    }

    .nav-item:last-child {
        border-bottom: none!important;
    }

    .nav-item li:hover{
        background-color: #f5e9e2!important;
        color: #773344;
        transition: all .3s ease;
    }

}

.btn {
    border-radius: 0!important;
    border: none !important;
}

form .privacy span {
    color: white!important;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}

form .privacy span a {
    text-decoration: underline!important;
    color: white!important;
}

.navbar-toggler-icon {
    color: white!important;
}

.section-kijker{
    padding: 4rem 0;
    margin-top:3rem;
}

.bg-space{
    padding-top:3rem;
    background-color: #773344;
}

.section-contact, .section-promos {
    background-color: #773344;
    padding: 4rem 0;
    margin-top: -15px;
}

.section-contact form .form-group .form-control {
    border-radius: 0!important;
    height: calc(1.5em + 0.75rem + 20px);
}

.section-contact .contact-title h2 {
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.section-contact form textarea {
    min-height: 150px;
}

.section-contact form button[type=submit] {
    background-color: #720026;
    font-size: 15px;
    padding: 15px 25px;
}

.inner-match-height {
    position: relative;
    height: 100%;
}
.section-home {
    position: relative;
}

.section-home .block-wrapper {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 5px 10px;
    background: #f5e9e2;
}

.section-home .block-wrapper span {
    margin: 10px 0 0;
    text-align: center;
    color: #773344;
    font-weight: 500;
    text-transform: uppercase;
}

.section-home-tablet-mobile {
    padding-bottom: 0!important;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    max-width: 1660px;
    height: 100%;
    background: #773344;
}

.background-reverse {
    position: absolute;
    top: 0;
    right: 0;
    width: 22%;
    max-width: 1660px;
    height: 100%;
    background: #773344;
    z-index: -9;
}

@media screen and (max-width: 1600px) {
    .section-home-desktop .intro-content {
        padding: 0;
    }
}

@media screen and (max-width: 1200px) {
    .background, .background-reverse {
        display: none;
    }

    .section-home .block-wrapper {
        margin: 20px 0;
    }
    .section-home-tablet-mobile {
        display: block;
    }

    .section-home-desktop {
        display: none;
    }

}

@media screen and (min-width: 1200px) {
    .section-home-desktop {
        display: block;
    }

    .section-home-tablet-mobile {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .section-home-tablet-mobile .intro-content {
        padding: 40px 20px!important;
    }
}

.justify-content-center{
    justify-content: center;
}

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