.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)}
.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)}

.okerbg.trans, .acf-fields > .acf-tab-wrap.okerbg.trans {background-color: rgba(178, 166, 22, 0.85)}
.aquabg.trans, .acf-fields > .acf-tab-wrap.aquabg.trans {background-color: rgba(76, 136, 160, 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: #bac6d2}

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

.softgreyborder {border-color: #bac6d2}

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

/* AQUA */
.aquabg,
.acf-fields > .acf-tab-wrap.aquabg,
.beforeaquabg:before,
nav a:hover,
.afteraquabg:after {background-color: #4c88a0}

.aqua, a.aqua, a.aqua:hover, a.aqua:visited, a.aqua:focus, a.aqua:active,
.beforeaqua:before,
.afteraqua:after {color: #4c88a0}

.aquaborder {border-color: #4c88a0}

svg.aqua [fill="#FFFFFF"], svg.aqua [fill="#ffffff"] {fill: #4c88a0}

/* SOFTGREY */
.seabg,
.acf-fields > .acf-tab-wrap.seabg,
.beforeseabg:before,
.afterseabg:after {background-color: #d9e5ea}

.sea, a.sea, a.sea:hover, a.sea:visited, a.sea:focus, a.sea:active,
.beforesea:before,
.aftersea:after {color: #d9e5ea}

.seaborder {border-color: #d9e5ea}

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



/* oker */
.okerbg, 
.acf-fields > .acf-tab-wrap.okerbg,
.beforeokerbg:before,
.afterokerbg:after {background-color: #d8a23e}

.oker, a.oker, a.oker:hover, a.oker:visited, a.oker:focus, a.oker:active, 
.beforeoker:before, 
.afteroker:after {color: #d8a23e}

.okerborder {border-color: #d8a23e}

svg.oker [fill="#FFFFFF"], svg.petrol [fill="#ffffff"] {fill: #d8a23e}


/* 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}


/* 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,
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,
.beforecremebg:before,
.aftercremebg:after {background-color: #85857d}

.creme, a.creme, a.creme:hover, a.creme:visited, a.creme:focus, a.creme:active,
.beforecreme:before,
.aftercreme:after {color: #85857d}

.cremeborder {border-color: #85857d}

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

/* Zand */
.zandbg,
.acf-fields > .acf-tab-wrap.zandbg,
.beforezandbg:before,
.afterzandbg:after {background-color: #ece6df}

.zand, a.zand, a.zand:hover, a.zand:visited, a.zand:focus, a.zand:active,
.beforezand:before,
.afterzand:after {color: #ece6df}

.zandborder {border-color: #ece6df}

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

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

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

.greyborder {border-color: #646363}

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

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

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

.orangeborder {border-color: #f59c00}

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

/* ANTRACIET */
.hardcoalbg,
.acf-fields > .acf-tab-wrap.hardcoalbg,
.beforehardcoalbg:before,
.afterhardcoalbg:after {background-color: #54544a}

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

.hardcoalborder {border-color:  #54544a}

svg.hardcoal [fill="#FFFFFF"], svg.hardcoal [fill="#ffffff"] {fill: #54544a}


.lightgreybg,
.acf-fields > .acf-tab-wrap.lightgreybg,
nav a.active,
.beforelightgreybg:before,
.afterlightgreybg:after {background-color: #ededed;}

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

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

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

/* 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.hardcoal,
nav a.hardcoal:hover,
.afterwhite:after {color: #FFF}

.whiteborder {border-color: #FFF}

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


/* HIGHLIGHTS */
.highlight_one {color: #fff; background-color: #d8a23e}

.highlight_two {color: #fff; background-color: #54544a}

.highlight_three {color: #fff; background-color: #4c88a0}

.highlight_four { color:#85857d; background-color: #fff }

.highlight_five { color: #fff; background-color: #d9e5ea }

@media (min-width:1200px) {
    .news-facebook .spacer-left-15 {border-color: #beac94}
}