html, body{
    font-family: 'Raleway', sans-serif;
    background:#FFF;
    height: 100%;}

body{
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100vh;
    display: -webkit-box;
    display: flex;
	display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;}

.wrapper{ 
    margin: 0px;
    padding: 0px;
    flex: 1 0 auto;
    position: relative;}

.flex{
    display: -webkit-box;   
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;}


/* -------------------- NAVIGATIE -------------------- */
.wrapper > nav{
    background:transparent;
    position: absolute;
    float: none;
    margin: 0px auto;
    display: block;
    left:0px;
    right:0px;
    z-index: 100;}

    .nav .open > a, .nav .open >a:focus, .nav .open > a:hover{
        background: none;}

    .nav > li > a:focus, .nav > li > a:hover{
        background:none;}

    .navbar-header .glyphicon{
        color:#fff;
        font-size: 22px;
        font-weight:300;
        padding-top: 10px;}

     .navbar.transparent.navbar-inverse .navbar-inner {
        border-width: 0px;
        -webkit-box-shadow: 0px 0px;
        box-shadow: 0px 0px;
        background-color: rgba(0,0,0,0.0);
        background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(0,0,0,0.00)),color-stop( 100% , rgba(0,0,0,0.00)));
        background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);
        background-image: linear-gradient(180deg,rgba(0,0,0,0.00) 0%,rgba(0,0,0,0.00) 100%);}

.navbar-nav{
    min-height: 60px;
    display: inline-block;
    float: none;
    margin:0px auto;}

    nav .navbar-collapse {
      text-align: center;}

    .navbar-nav > li > a{
        color:#fff;
        font-size: 14px;
        padding: 30px 20px;
        margin: 0px 0px;
        font-weight: 400;
        text-decoration: none;
        letter-spacing: 0.08em;
        text-transform: uppercase;}

        .navbar-nav > li > a.nav-selected{
            font-weight:700;}

            .navbar-nav > li > a:hover{
                color:#f7bcad;}

.dropdown-menu {
    top: 60%;}

nav ul.socialmedianav > li > a{
    padding: 60px 0px 60px 5px;}

.navbar-header {
    float: none;}


.navbar-toggle {
    position: absolute;
    right: 15px;
    display: block;}


.navbar-collapse.collapse {
    display: none!important;}

.collapse.in {
    display: block !important;}



/* -------------------- HEADER -------------------- */
header.headerslider{
    border-bottom: 8px solid #f7bcad;
    height:75vh;
    min-height: 300px;
    overflow: hidden;
    position: relative;
    background:#4a494a;}

.logo{
    margin-top:-20vh;
    width: 35vh;
    min-width: 180px;
    height: auto;}

/* -------------------- CMS SLIDER -------------------- */
.ccm-image-slider-container, .ccm-image-slider{
    position: relative;
    height: 100%;
    z-index: 0;}

    .ccm-image-slider-text{
        text-align: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left:0;
        right:0;
        margin: auto;
        width:100%;
        height: 30%;
        z-index: 15;}

        .ccm-image-slider-title, .ccm-image-slider-text p{
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color:#FFF;
            width: auto;
            height: auto;
            overflow:hidden;}
    
            .ccm-image-slider-title{   
                font-size:4.5vw;
                line-height: 1;
                display: block;
                width: 100%;
                position: relative;
                font-weight: 700;
                padding: 0px 0px 20px 0px;}

                .ccm-image-slider-title:after{   
                    content:' ';
                    position:absolute;
                    display:block;
                    bottom:0px;
                    left: calc(50% - 10vw);
                    height:4px;
                    background:#f7bcad;
                    border-radius:5px;
                    width:20vw;}

            .ccm-image-slider-text p{  
                font-size:2.5vw;
                font-weight: 300;
                margin: 5px 0px 0px 0px;
                text-transform: none;
                text-decoration: none;}

                .ccm-image-slider-text p i.material-icons{
                    vertical-align:middle;}

.ccm-image-slider-inner{
    position: relative;
    height: 100%;}
.ccm-image-slider ul.rslides{
    height: 100%;
}
.ccm-image-slider ul.rslides li{
/*
    -webkit-backface-visibility: hidden;
    position: relative;
    display: none;
*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;}

    .ccm-image-slider ul.rslides li img{
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%, -50%);
        -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
        -o-transform:translate(-50%, -50%);
        transform:translate(-50%, -50%);
        margin-right:-50%;
        width: 101%;
        z-index: 5;
        height: auto;}

    .ccm-image-slider ul.rslides li div.ccm-image-overlay{
        display:block;
        width: 100vw;
        height: 100vh;
        position: absolute;
        z-index: 10;
        left:0px;
        right:0px;
        right:0px;
        background:rgba(84,83,84,0.75);}

    .ccm-image-slider ul.rslides li div.ccm-image-gradient{
        display:block;
        width: 100vw;
        height: 100vh;
        bottom: 0px;
        position: absolute;
        z-index: 10;
        left:0px;
        right:0px;
        right:0px;
        background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
        background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);}
        
.rslides_nav{
    background:none;
    height:45px;
    width: 45px;
    left: 3%;
    top: calc(60% + 22px);
    opacity: 1;
    overflow: hidden;
    position: absolute;
    text-decoration: none;
    z-index: 99;}

    .rslides_nav.next{
        left: auto;
        right:3%;}

    a.rslides_nav.prev, a.rslides_nav.next{
        text-align: center;
        vertical-align: middle;
        text-decoration: none!important;}

        a.rslides_nav.prev:before, a.rslides_nav.next:before{
            text-align: center;
            vertical-align: middle;
            font-family: 'Material Icons';
            content:'keyboard_arrow_right';
            color: #FFF;
            font-size:40px;
            line-height: 45px;
            display: block;}

            a.rslides_nav.next:before{
                margin:-1px -2px 0px 0px;
                content:'keyboard_arrow_right';}

            a.rslides_nav.prev:before{
                margin:-1px 0px 0px -2px;
                content:'keyboard_arrow_left';}

                a.rslides_nav.prev:hover:before, a.rslides_nav.next:hover:before{
                    color:#4d4f52;
                    text-decoration: none;}


/* -------------------- INTRO -------------------- */
.intro{
    position: relative;
    /*background-size: contain;*/
    padding:2vw;}

    .intro:before{
        content:' ';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity : 1;
        background: url(../images/auto-femke.png) no-repeat;
        background-position: right -720px bottom 0px;}

        .intro:after{
            content: "";
            display: table;
            clear: both;}

    .intro .rechts{
        text-align: right;
        padding-right: 0px;}

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

    .intro .links{
        text-align: left;
        padding-left: 0px;}

    .introtekst{
        text-align:center;
        width:50vw;
        padding:6vw;
        position:relative;
        display:block;
        margin:0px;}

        .introtekst p{
            font-weight:300;
            font-size:1.3em;
            line-height:1.6;}

a.button{
    background:#545354;
    padding: 10px 15px;
    font-size:1.4em;
    font-weight: 300;
    text-decoration: none;
    display: inline-block;
    border-radius:5px;
    color:#FFF;}

    a.button i{
        font-size: 1.45em;
        vertical-align: middle;}


    a.button:hover{
        background:#f7bcad;
        text-decoration:none;
        color:#545354;}

/* -------------------- CENTER -------------------- */
.prijzenwrapper{
    text-shadow:0px 1px 0px rgba(0,0,0,0.25);
    position: relative;
    background:#f7bcad;}

    .vrouw{
        position: absolute;
        margin-top: -30px;
        bottom: 0px;
        left: calc(-25% + 100px);}

    .prijscolumn{
        /*background:rgba(247,188,173,0.8);*/
        margin-bottom: 50px;
        margin-top: 50px;
        color: white;}

        .prijscolumn h1{
            text-align: center;}

        .prijscolumn ul li {
            color: #fff;
            width: 100%;
            list-style-type: none;
            font-size: 20px;
            font-weight: 700;
            padding-top: 15px;
            padding-bottom:0px;
            border-bottom: 1px rgba(255, 255, 255, 0.4) solid;}

        .prijscolumn ul {
            padding: 0;
            margin: 0px 0px 15px 0px;}

            .prijscolumn ul > ul{
                margin-bottom: 0px;}

        .prijscolumn ul li ul li {
            padding-right: 15px;
            font-size: 20px;
            font-weight: 400!important;
            float: right;
            width: auto;
            margin-top: -45px;
            border: 0;}

/* -------------------- PRODUCTEN -------------------- */
.producten{
    margin-top: 50px;
    font-weight:300;
    margin-bottom: 50px;}

    .producten h1{
        color:#545354;
        text-align: center;
        margin-bottom: 60px;}

.productwrapper{
    width:calc(50% - 2px);
    position: relative;
    margin-bottom: 8vw;
    display: inline-block;}

    .productcontainer{
        width:80%;
        margin: 0px auto;
        display: block;}

    .productimg{
        margin-top: -15%;
        width: 40%;
        float: left;
        background:url(../images/vorm.svg) bottom center no-repeat;
        background-size: contain;}

        .productimg img{
            width: 100%;
            height: auto;}

        .producttext{
            font-size: 0.9em;
            float: right;
            width: 55%;}

            .producttitle{
                text-transform:uppercase;
                color:#f7bcad;
                font-size: 1.5em;
                font-weight: 700;}

                .prijswrapper{
                    font-size:1.5em;}

                .prijswrapper:before{
                    content:'';
                    height: 1px;
                    width: 20%;
                    display: block;
                    margin-bottom: 5px;
                    background:#eaeaea;}

                .prijs{
                    font-weight: 700;
                    white-space: nowrap;}


/* -------------------- FOOTER -------------------- */
footer{
    background:#4a494a;
    padding:5vw 0;
    color: white;}

footer h1{
    margin-bottom: 30px;
    text-align: center;}

.contact ul{
    padding:0px;
    margin: 0px;}

.contact ul li {
    width: 50%;
    font-size:1.2em;
    font-weight:300;
    list-style-type: none;
    padding-top: 8px;
    padding-bottom: 8px;}

    .contact ul li + li{
        border-top: 1px rgba(247, 188, 173, 0.7) solid;}

    .contact ul li a{
        color:#f7bcad;
        text-decoration: none;}

footer input, footer textarea{
    padding: 15px 25px;}

footer input:focus, footer textarea:focus{
    background: #f7bcad;
    border:0px;
    box-shadow:0px;
    color: #4d4f52;}

footer .btn-primary{
    background:#f7bcad;
    border: 1px solid #f7bcad;
    padding: 10px 15px;
    color:#545354;}

footer .btn-primary:hover{
    background:#4a494a;
    border: 1px solid #f7bcad;
    padding: 10px 15px;
    color:#f7bcad;}


footer .form-control{
    border:0px;
    box-shadow:0px;
    padding: 15px 20px;
    height: auto;
}

/* -------------------- BACK TO TOP -------------------- */
#back-top{
    position:fixed;
    bottom:10px;
    right:10px;
    z-index:50;}

#back-top .material-icons{color:#FFF; text-shadow:0px 1px 1px rgba(0,0,0,0.4);}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;}


/* -------------------- ANIMATIE -------------------- */
a.button, .vrouw, .intro:before, .introtekst{
    -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}


/* -------------------- VORMFACTOR -------------------- */
.vf{ position: absolute; bottom:-40px; left: 0px; right: 0px; margin:0px auto; text-align: center;}
.vf a{height:20px; width:100%; text-align:left; font-size:10px; color:#000000!important; text-decoration:none; text-align: center; display:inline-block; zoom: 1; filter: alpha(opacity=2); opacity: 0.1;}
.vf a:hover {filter: alpha(opacity=100); opacity: 1;}
.vf img{height:8px; width:80px;}


/* -------------------- OVERIG -------------------- */
.clearfix:after{content:""; visibility:hidden; display:block; height:0; clear:both;}
.vcenter{display: -webkit-box; display: -moz-box; display: -webkit-flex; display: flex; display: -ms-flexbox; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}