.blackbg.trans, .acf-fields > .acf-tab-wrap.blackbg.trans {background-color: rgba(0, 0, 0, 0.60)}
.whitebg.trans, .acf-fields > .acf-tab-wrap.whitebg.trans {background-color: rgba(255, 255, 255, 0.85)}
.greenbg.trans, .acf-fields > .acf-tab-wrap.greenbg.trans {background-color: rgba(135, 183, 38, 0.85)}
.cremebg.trans, .acf-fields > .acf-tab-wrap.cremebg.trans {background-color: rgba(223, 225, 203, 0.85)}
.hardcoalbg.trans, .slick-arrow, .acf-fields > .acf-tab-wrap.hardcoalbg.trans {background-color: rgba(80, 90, 95, 0.85)}
.greybg.trans, .acf-fields > .acf-tab-wrap.greybg.trans {background-color: rgba(209, 210, 212, 0.85)}
.orangebg.trans, .acf-fields > .acf-tab-wrap.orangebg.trans {background-color: rgba(244, 121, 32, 0.85)}
.bloklandbluebg.trans, .acf-fields > .acf-tab-wrap.bloklandbluebg.trans {background-color: rgba(0, 90, 185, 0.85)}
.bloklandgreenbg.trans, .acf-fields > .acf-tab-wrap.bloklandgreenbg.trans {background-color: rgba(120, 190, 30, 0.85)}
.bloklandorangebg.trans, .acf-fields > .acf-tab-wrap.bloklandorangebg.trans {background-color: rgba(255, 165, 0, 0.55)}
.bloklandgreybg.trans, .acf-fields > .acf-tab-wrap.bloklandgreybg.trans {background-color: rgba(100, 100, 100, 0.85)}
.lightgreybg.trans, .acf-fields > .acf-tab-wrap.lightgreybg.trans {background-color: rgba(164, 156, 153, 0.85)}
.softgreybg.trans, .acf-fields > .acf-tab-wrap.softgreybg.trans {background-color: rgba(186, 198, 210, 0.85)}

.mosterdbg.trans, .acf-fields > .acf-tab-wrap.mosterdbg.trans {background-color: rgba(178, 166, 22, 0.85)}
.petrolbg.trans, .acf-fields > .acf-tab-wrap.petrolbg.trans {background-color: rgba(0, 107, 131, 0.85)}
.bordeauxbg.trans, .acf-fields > .acf-tab-wrap.bordeauxbg.trans {background-color: rgba(131, 41, 78, 0.85)}
.nobg {background: none}



/* SOFTGREY */
.softgreybg,
.acf-fields > .acf-tab-wrap.softgreybg,
.beforesoftgreybg:before,
.aftersoftgreybg:after {background-color: #a1a4c6}

.softgrey, a.softgrey, a.softgrey:hover, a.softgrey:visited, a.softgrey:focus, a.softgrey:active,
.beforesoftgrey:before,
.aftersoftgrey:after {color: #a1a4c6}

.softgreyborder {border-color: #a1a4c6}

svg.softgrey [fill="#FFFFFF"], svg.softgrey [fill="#ffffff"] {fill: #a1a4c6}

/* BROWN */
.brownbg,
.acf-fields > .acf-tab-wrap.brownbg,
.beforebrownbg:before,
.afterbrownbg:after {background-color: #b68f64}

.brown, a.brown, a.brown:hover, a.brown:visited, a.brown:focus, a.brown:active,
.beforebrown:before,
.afterbrown:after {color: #b68f64}

.brownborder {border-color: #b68f64}

svg.brown [fill="#FFFFFF"], svg.brown [fill="#ffffff"] {fill: #b68f64}


/* Mosterd */
.mosterdbg, 
.acf-fields > .acf-tab-wrap.mosterdbg,
.beforemosterdbg:before,
.aftermosterdbg:after {background-color: #B2A616}

.mosterd, a.mosterd, a.mosterd:hover, a.mosterd:visited, a.mosterd:focus, a.mosterd:active, 
.beforemosterd:before, 
.aftermosterd:after {color: #B2A616}

.mosterdborder {border-color: #B2A616}

svg.mosterd [fill="#FFFFFF"], svg.petrol [fill="#ffffff"] {fill: #B2A616}


/* Petrol */
.petrolbg, 
.acf-fields > .acf-tab-wrap.petrolbg,
.beforepetrolbg:before,
.afterpetrolbg:after {background-color: #006B83}

.petrol, a.petrol, a.petrol:hover, a.petrol:visited, a.petrol:focus, a.petrol:active, 
.beforepetrol:before, 
.afterpetrol:after {color: #006B83}

.petrolborder {border-color: #006B83}

svg.petrol [fill="#FFFFFF"], svg.petrol [fill="#ffffff"] {fill: #006B83}


/* Bordeaux */
.bordeauxbg, 
.acf-fields > .acf-tab-wrap.bordeauxbg,
.beforebordeauxbg:before,
.afterbordeauxbg:after {background-color: #83294E}

.bordeaux, a.bordeaux, a.bordeaux:hover, a.bordeaux:visited, a.bordeaux:focus, a.bordeaux:active, 
.beforebordeaux:before, 
.afterbordeaux:after {color: #83294E}

.bordeauxborder {border-color: #83294E}

svg.bordeaux [fill="#FFFFFF"], svg.bordeaux [fill="#ffffff"] {fill: #83294E}


/* BLACK */
.blackbg,
.acf-fields > .acf-tab-wrap.blackbg,
.beforeblackbg:before, 
.afterblackbg:after {background-color: #000}

.black, a.black, a.black:hover, a.black:visited, a.black:focus, a.black:active, 
.beforeblack:before,
.afterblack:after {color: #000} 

.blackborder {border-color: #000}

svg.black [fill="#FFFFFF"], svg.black [fill="#ffffff"] {fill: #000000}

/* WHITE */
.whitebg, 
.acf-fields > .acf-tab-wrap.whitebg,
header .headslider ul.slide-dots li:after,
.slick ul.slide-dots li:after,
.beforewhitebg:before, 
.afterwhitebg:after {background-color: #FFF}

.white, a.white, a.white:hover, a.white:visited, a.white:focus, a.white:active,  
.slick-arrow,
.beforewhite:before, 
nav a.active.white,
.afterwhite:after {color: #FFF}

.whiteborder {border-color: #FFF}

svg.white [fill="#FFFFFF"], svg.white [fill="#ffffff"] {fill: #ffffff}

/* GREEN */
.greenbg, 
.acf-fields > .acf-tab-wrap.greenbg,
.beforegreenbg:before,
.aftergreenbg:after {background-color: #87b726}

.green, a.green, a.green:hover, a.green:visited, a.green:focus, a.green:active, 
.beforegreen:before, 
.aftergreen:after {color: #87b726}

.greenborder {border-color: #87b726}

svg.green [fill="#FFFFFF"], svg.green [fill="#ffffff"] {fill: #87b726}

/* CREME */
.cremebg, 
.acf-fields > .acf-tab-wrap.cremebg,
.beforecremebg:before, 
.aftercremebg:after {background-color: #dfe1cb}

.creme, a.creme, a.creme:hover, a.creme:visited, a.creme:focus, a.creme:active,  
.highlight .no-image h2:first-of-type,
.highlight .no-image p:last-of-type,
.beforecreme:before, 
.aftercreme:after {color: #dfe1cb}

.cremeborder {border-color: #dfe1cb}

svg.creme [fill="#FFFFFF"], svg.creme [fill="#ffffff"] {fill: #dfe1cb}

/* GREY */
.greybg, 
.acf-fields > .acf-tab-wrap.greybg,
.beforegreybg:before, 
.aftergreybg:after {background-color: #999999}

.grey, a.grey, a.grey:hover, a.grey:visited, a.grey:focus, a.grey:active,  
.beforegrey:before, 
.aftergrey:after {color: #999999}

.greyborder {border-color: #999999}

svg.grey [fill="#FFFFFF"], svg.grey [fill="#ffffff"] {fill: #999999}

/* ORANGE */
.orangebg,
.acf-fields > .acf-tab-wrap.orangebg,
.beforeorangebg:before, 
.afterorangebg:after {background-color: #f47920}

.orange, a.orange, a.orange:hover, a.orange:visited, a.orange:focus, a.orange:active,  
.beforeorange:before, 
.afterorange:after {color: #f47920}

.orangeborder {border-color: #f47920}

svg.orange [fill="#FFFFFF"], svg.orange [fill="#ffffff"] {fill: #f47920}

/* BLUE */
.bluebg,
.acf-fields > .acf-tab-wrap.bluebg,
.beforebluebg:before, 
.afterbluebg:after {background-color: #43538f}

.blue, a.blue, a.blue:hover, a.blue:visited, a.blue:focus, a.blue:active,  
.beforeblue:before, 
.afterblue:after {color: #43538f}

.blueborder {border-color: #43538f}

svg.blue [fill="#FFFFFF"], svg.blue [fill="#ffffff"] {fill: #43538f}


/* ANTRACIET */
.hardcoalbg,
.acf-fields > .acf-tab-wrap.hardcoalbg,
header .headslider ul.slide-dots li:hover:after, 
header .headslider ul.slide-dots li.slick-active:after,
.slick-arrow:hover,
.mobileMenu,
.slick ul.slide-dots li:hover:after,
.slick ul.slide-dots li.slick-active:after,
.beforehardcoalbg:before,
.afterhardcoalbg:after {background-color: #505a5f}

.hardcoal, a.hardcoal, a.hardcoal:hover, a.hardcoal:visited, a.hardcoal:focus, a.hardcoal:active,  
.beforehardcoal:before, 
.afterhardcoal:after {color: #505a5f}

.hardcoalborder {border-color:  #505a5f}

svg.hardcoal [fill="#FFFFFF"], svg.hardcoal [fill="#ffffff"] {fill: #505a5f}


/* BLOKLAND GREEN */
.bloklandgreenbg,
.acf-fields > .acf-tab-wrap.bloklandgreenbg,
.beforebloklandgreenbg:before, 
.afterbloklandgreenbg:after {background-color: #78BE1E}

.bloklandgreen,
.beforebloklandgreen:before,
.afterbloklandgreen:after {color: #78BE1E}

.bloklandgreenborder {border-color: #78BE1E !important;}

svg.bloklandgreen [fill="#FFFFFF"], svg.bloklandgreen [fill="#ffffff"] {fill: #78BE1E}

/* BLOKLAND ORANGE */
.bloklandorangebg,
.acf-fields > .acf-tab-wrap.bloklandorangebg,
.beforebloklandorangebg:before, 
.afterbloklandorangebg:after {background-color: #ffa500}

.bloklandorange,
.beforebloklandorange:before,
.afterbloklandorange:after {color:#ffa500}

.bloklandorangeborder {border-color: #ffa500 !important}

svg.bloklandorange [fill="#FFFFFF"], svg.bloklandorange [fill="#ffffff"] {fill: #ffa500}

/* BLOKLAND BLUE */
.bloklandbluebg,
.acf-fields > .acf-tab-wrap.bloklandbluebg,
.beforebloklandbluebg:before, 
.afterbloklandbluebg:after {background-color: #005AB9}

.bloklandblue,
.beforebloklandblue:before,
.afterbloklandblue:after {color:#005AB9}

.bloklandblueborder {border-color: #005AB9 !important}

svg.bloklandblue [fill="#FFFFFF"], svg.bloklandblue [fill="#ffffff"] {fill: #005AB9}

/* BLOKLAND GREY */
.bloklandgreybg,
.acf-fields > .acf-tab-wrap.bloklandgreybg,
.beforebloklandgreybg:before, 
.afterbloklandgreybg:after {background-color: #646464}

.bloklandgrey,
.beforebloklandgrey:before,
.afterbloklandgrey:after {color: #646464}

.bloklandgreyborder {border-color: #646464 !important}

svg.bloklandgrey [fill="#FFFFFF"], svg.bloklandgrey [fill="#ffffff"] {fill: #646464}


/* BLOKLAND LIGHTGREY */
.lightgreybg,
.acf-fields > .acf-tab-wrap.lightgreybg,
.beforelightgreybg:before, 
.afterlightgreybg:after {background-color: #eee;}

.lightgrey,
.beforelightgrey:before,
.afterlightgrey:after {color: #eee}

.lightgreyborder {border-color: #eee !important}

svg.lightgrey [fill="#FFFFFF"], svg.bloklandlightgrey [fill="#ffffff"] {fill: #eee}



/* HIGHLIGHTS */
.highlight_one {color: #B2A616; background-color: #FFF}

.highlight_two {color: #006B83; background-color: #FFF}

.highlight_three {color: #83294E; background-color: #FFF}

.highlight_four { color:#fff; background-color: #83294E }

.highlight_five { color: #505a5f; background-color: #83294E }

.highlight_one h4, .highlight_two h4, .highlight_three h4, .highlight_five h4, .highlight_one p, .highlight_two p, .highlight_three p, .highlight_five p {
    color:#505a5f !important;
}
@media (min-width:1200px) {
    .news-facebook .spacer-left-15 {border-color: #beac94}
}