body {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh
}

.logo {
    height: 2.5em
}

.headerText {
    font-weight: 600
}

.top-bar {
    background-color: #fff;
    z-index: 5;
    top: 0;
    right: 0;
    padding-left: 10%;
    padding-right: 10%;
    height: 1.5em;
    color: rgba(78, 77, 77, 0.75)
}

.top-bar>div>a {
    font-size: .8em;
    color: rgba(78, 77, 77, 0.75)
}

.navbar-brand {
    padding: 0!important
}

.navbarcolor {
    background-color: rgba(255, 255, 255, 0.9)!important
}

.navbar {
    background-color: #fff;
    z-index: 999;
    padding: .2rem 1rem;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    box-shadow: 1px 5px 3px 0 rgba(0, 0, 0, 0.4)
}

.sticky {
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.4)
}

.nav-item {
    padding-left: .2em!important;
    padding-right: .2em!important
}

.nav-link:hover {
    color: #4C2775
}

.btn-primary,
.btn-primary:hover {
    background-color: #4C2775;
    border: 0
}

.btn-link,
.btn-link:hover {
    color: #4C2775
}

.form-control:focus {
    border-color: rgba(76, 39, 117, 0.45);
    box-shadow: 0 0 0 .2rem rgba(76, 39, 117, 0.45)
}

.paddingnav {
    padding-left: 10%;
    padding-right: 10%
}

.navbar-toggler-icon,
.navbar-toggler {
    color: #fff;
    background-color: #4c2775
}

.nav-link {
    color: #4e4d4d;
    font-size: 1.25em
}

.grey {
    color: #4e4d4d
}

.purple {
    color: #4c2775
}

.fullpage {
    margin: 0;
    flex: 1 0 auto;
    padding: 0
}

.CustomContainer {
    position: relative;
    padding-left: 10%;
    padding-right: 10%
}

.slope {
    width: 100%;
    padding: 5px;
    margin: 0 0 40px;
    position: relative;
    background: #4c2775
}

.slope:before {
    content: "";
    width: 100%;
    height: calc(100% + 26px);
    position: absolute;
    top: -13px;
    left: 0;
    z-index: -1;
    background: #4c2775;
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.4);
    transform: skew(0deg, -1deg)
}

.slope2 {
    z-index: 5;
    width: 100%;
    padding: 5px;
    margin: 0 0 40px;
    position: relative;
    background: #4c2775
}

.slope2:before {
    content: "";
    width: 100%;
    height: calc(100% + 26px);
    position: absolute;
    top: -13px;
    left: 0;
    z-index: -1;
    background: #4c2775;
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.4);
    transform: skew(0deg, 1deg)
}

.carousel-content {
    color: #000;
    display: flex;
    align-items: center
}

#text-carousel {
    width: 80%;
    height: auto;
    padding: 50px
}

.carousel-itemText {
    color: #fff
}

.link {
    color: #3871FE!important;
    float: right;
    font-style: italic
}

.carouseltext-control-prev,
.carouseltext-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    opacity: .5
}

.carouseltext-control-prev:hover,
.carouseltext-control-prev:focus,
.carouseltext-control-next:hover,
.carouseltext-control-next:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .9
}

.carouseltext-control-prev {
    left: 0
}

.carouseltext-control-next {
    right: 0
}

.grid {
    column-count: 4;
    column-gap: 1em;
    width: 100%
}

.cell {
    break-inside: avoid;
    border: 1px solid #E5E5E5;
    position: relative;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;
    margin-bottom: 2vh
}

.bus {
    background: url(/img/bus.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

.contactLabel {
    font-weight: 600;
    color: #fff
}

.contact {
    float: none;
    margin: 0 auto;
    width: 60%
}

.contact>div {
    background-color: rgba(78, 77, 77, 0.76);
    border-radius: 5px;
    float: none;
    margin: 0 auto
}

.contactFromulier {
    position: relative;
    background-color: rgba(78, 77, 77, 0.76);
    border-radius: 5px
}

.contactGegevens {
    background-color: rgba(76, 39, 117, 0.76);
    border-radius: 5px
}

.contactGegevens>p,
.contactGegevens>h5,
.contactGegevens>p>a {
    color: #fff;
    font-weight: 600
}

.cellHeader {
    width: 100%;
    border-radius: 5px
}

.cellContent {
    color: rgba(84, 84, 84, 0.83);
    padding: 18px;
    line-height: 1.5em
}

.spacer {
    width: 100%;
    height: 1px;
    background-color: #E5E5E5
}

.whenn {
    font-weight: 700
}

.fabookLogo {
    z-index: 20;
    position: absolute;
    top: 10px;
    right: -10px
}

.inner {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    width: 1.5em;
    font-size: 2em;
    background-color: rgba(48, 87, 144, 0.8)
}

.fabookLogo::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    right: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: rgba(48, 87, 144, 1) transparent transparent
}

.profileFacebook {
    height: 6vh;
    width: auto
}

div#GallarySlip {
    margin: 0 auto;
    text-align: center
}

div#GallarySlip ul {
    padding: 0
}

div#GallarySlip li {
    display: inline-block;
    width: 25%;
    margin: 1%
}

div#GallarySlip img {
    width: 100%;
    height: auto
}

.sliphoveritemTitle {
    overflow: hidden!important
}

fieldset {
    border: 1px groove #ddd!important;
    border-radius: 5px;
    padding: 0 1.4em 1.4em!important;
    margin: 0 0 1.5em!important
}

legend {
    font-size: 1.2em!important;
    font-weight: 700!important;
    text-align: left!important;
    width: auto;
    padding: 0 10px;
    border-bottom: none
}

[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

[type=radio]+img {
    cursor: pointer;
    height: 5em;
    width: auto
}

[type=radio]:checked+img {
    outline: 2px solid #4C2775
}

::-webkit-input-placeholder {
    font-style: italic
}

:-moz-placeholder {
    font-style: italic
}

::-moz-placeholder {
    font-style: italic
}

:-ms-input-placeholder {
    font-style: italic
}

.dienstenBackground {
    background: url(/img/dienstenBanner.jpg?v=2) no-repeat center center
}

.portolioBackground {
    background: url(/img/portfolioBanner.jpg?v=2) no-repeat center center
}

.nieuwsBackground {
    background: url(/img/nieuwsBanner.jpg?v=2) no-repeat center left
}

.contactBackground {
    background: url(/img/contactBanner.jpg?v=2) no-repeat 61% center
}

.banner {
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.4);
    height: 50vh;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important
}

.slide1 {
    background: url(/img/slider/1.jpg?v=2) no-repeat center center
}

.slide2 {
    background: url(/img/slider/2.jpg?v=2) no-repeat center center
}

.slide3 {
    background: url(/img/slider/3.jpg?v=2) no-repeat center center
}

.slide4 {
    background: url(/img/slider/4.jpg?v=2) no-repeat center center
}

.slide5 {
    background: url(/img/slider/5.jpg?v=2) no-repeat center center
}


.slider {
    box-shadow: 1px 2px 3px 0 rgba(0, 0, 0, 0.4);
    height: 100vh;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important
}

.cdiv {
    padding: 0
}

ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0!important;
    padding: 0
}

ul.social-network li {
    display: inline;
    margin: 0 5px
}

.social-network a.icoFacebook {
    background-color: #3B5998;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25)
}

.social-network a.icoInstagram {
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25)
}

.social-network a.icoYoutube {
    background: red;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25)
}

.social-circle li a {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    width: 2em;
    height: 2em;
    font-size: 2em
}

.social-circle li i {
    margin: 0;
    line-height: 2em;
    text-align: center
}

.social-circle li a:hover i,
.triggeredHover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms--transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    -ms-transition: all .2s;
    transition: all .2s
}

.social-circle i {
    color: #fff;
    -webkit-transition: all .8s;
    -moz-transition: all .8s;
    -o-transition: all .8s;
    -ms-transition: all .8s;
    transition: all .8s
}

.homepageCarrousel {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh
}

.marginTop {
    margin-top: 100vh!important
}

.scroll-downs {
    cursor: pointer;
    position: absolute;
    top: 85vh;
    right: 0;
    left: 0;
    margin: auto;
    width: 34px;
    height: 55px;
    z-index: 999
}

.mousey {
    width: 3px;
    padding: 10px 15px;
    height: 35px;
    border: 4px solid #fff;
    border-radius: 25px;
    opacity: .75;
    box-sizing: content-box
}

.scroller {
    width: 6px;
    height: 10px;
    border-radius: 25%;
    background-color: #fff;
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15, .41, .69, .94);
    animation-iteration-count: infinite
}

.page-link {
    color: #4c2775
}

.page-item.active .page-link {
    background-color: #4c2775;
    border-color: #4c2775
}

.DienstenGrid {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    position: relative
}

.DienstenCell {
    margin: .5%;
    width: 32%;
    break-inside: avoid;
    border: 1px solid #E5E5E5;
    position: relative;
    border-radius: 1px;
    cursor: pointer;
    margin-bottom: 2vh;
    background-color: #F2F2F2;
    transition: .3s all
}

.DienstenCell:hover {
    transition: .3s all;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.4)
}

.DienstenCell>img {
    width: 100%
}

.DienstenCellContent {
    color: rgba(84, 84, 84, 0.83);
    padding: 30px 40px;
    line-height: 1.5em;
    background-color: #F2F2F2;
    margin-bottom: 4em
}

.DienstenCellContent>h3 {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    transition: .3s all
}

.DienstenCellContent>h3:hover {
    color: #4c2775;
    transition: .3s all
}

.DienstenCellContent>p {
    font-size: 14px
}

.btn-diensten {
    color: #fff!important;
    border-radius: 0;
    border: #4c2775 4px solid;
    background-color: #4c2775;
    transition: all .3s;
    margin: 0;
    max-width: 14em
}

.btn-diensten:hover {
    background-color: transparent;
    border: #4c2775 4px solid;
    color: #4c2775!important;
    transition: all .3s
}

@keyframes scroll {
    0% {
        opacity: 0
    }
    10% {
        transform: translateY(0);
        opacity: 1
    }
    100% {
        transform: translateY(1em);
        opacity: 0
    }
}

.nselink {
    color: #4c2775;
    transition: all .3s
}

.nselink:hover {
    color: #2f1746;
    transition: all .3s
}

.inlineHeader {
    padding-left: 9.75em
}

.yt {
    width: 40em;
    height: 23em
}

.footer {
    flex: 1;
    box-shadow: 0 -4px 3px 0 rgba(0, 0, 0, 0.4);
    background-color: #4c2775;
    color: rgba(255, 255, 255, 0.75);
    padding: 1vh 10%;
    font-size: .7em
}

.footer>span>a {
    color: rgba(255, 255, 255, 0.75)
}

.dienstenDetails {
    text-transform: capitalize
}

.col-centered {
    float: none;
    margin: 0 auto
}

.contactop {
    position: relative;
    background-color: #F7F7F7;
    padding: 45px 30px
}

.contactop>h3 {
    font-weight: 700
}

.contactop>p {
    color: #737373
}

.detailsBTN {
    position: absolute;
    top: 45px;
    right: 30px
}

.success {
    position: absolute;
    z-index: 10;
    top: 18px;
    left: 18px;
    right: 18px
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #775B96 transparent transparent
}

.lds-ring div:nth-child(1) {
    animation-delay: -.45s
}

.lds-ring div:nth-child(2) {
    animation-delay: -.3s
}

.lds-ring div:nth-child(3) {
    animation-delay: -.15s
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.loading {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10
}

.readmorediesnten {
    position: absolute;
    bottom: 30px
}

.contactBTN {
    position: absolute;
    right: 30px;
    bottom: 0
}

.carousel-inner {
    min-height: 29vh!important
}

@media only screen and (max-width: 1176px) {
    .grid {
        column-count: 3
    }
    .contact {
        width: 80%
    }
    .DienstenCell {
        width: 49%
    }
    .DienstenGrid {
        width: 90%
    }
    .contactBTN {
        position: relative;
        margin-left: 30px
    }
}

@media only screen and (max-width: 767px) {
    .grid {
        column-count: 1
    }
    .detailsBTN {
        top: auto;
        bottom: 18px
    }
    .cell3,
    .cell4,
    .cell5,
    .cell6,
    .cell7,
    .cell8 {
        display: none!important
    }
    div#GallarySlip li {
        width: 100%!important
    }
    .CustomContainer {
        padding: 10px
    }
    .w-75 {
        width: 100%!important
    }
    .contact {
        width: 100%
    }
    .banner {
        height: 25vh
    }
    .homepageCarrousel {
        height: calc(100vh - 56px)
    }
    .DienstenCell {
        width: 100%
    }
    .DienstenGrid {
        width: 100%
    }
}

.newsItem {
    cursor: pointer;
    border: 1px solid #dfdfdf;
    padding: 18px;
    background-color: #F2F2F2;
    border-radius: 5px
}

.newsItemText {
    margin-bottom: 4em
}

.date {
    font-size: .9em;
    color: #d3d3d3;
    font-style: italic
}

#fb-share-button {
    position: absolute;
    background: #3b5998;
    border-radius: 3px;
    font-weight: 600;
    padding: 5px 8px;
    display: inline-block;
    right: 0
}

#fb-share-button:hover {
    cursor: pointer;
    background: #213A6F
}

#fb-share-button svg {
    width: 18px;
    fill: #fff;
    vertical-align: middle;
    border-radius: 2px
}

#fb-share-button span {
    vertical-align: middle;
    color: #fff;
    font-size: 14px;
    padding: 0 3px
}