/* -------------------------------------------- */
/* Rikiki: Website */
/* Version: 2 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: SITE */
/* !-------------------------------------------- */
/* !Fonts */
/* !-------------------------------------------- */

@import url("https://use.typekit.net/uut7sba.css");

/* !-------------------------------------------- */
/* !Reset-styles */
/* !-------------------------------------------- */

/* A sane, non-nerve-wracking box sizing for everyone. Thanks @paul_irish and @thijs */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

html {
color: #000;
font-family: "trade-gothic-next", "Helvetica", "Arial", sans-serif;
font-size: small;
text-decoration: none;
}

body, h1, h2, h3, h4, p {
margin: 0;
padding: 0;
}

ul, ol, li, dl, dt, dd {
list-style: none;
margin: 0;
padding: 0;
}

/* !======================================================================================== */
/* !STAGE DEFINITIONS: General layout & viewport dependencies */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !STAGE: Home */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Stage setup */
body.stage-home {
    background: #03301F url("img/background_home_green.jpg") center center no-repeat;
background-size: cover;
}

body.stage-home:after {
display: block;
content: "";
    background: transparent url("img/background_home.svg") center center repeat;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
opacity: 0.04;
}

body.stage-home #ensemble-welcome {
position: relative;
z-index: 10;
}

/* --- Actor Identity */
body.stage-home #ensemble-welcome #actor-identity .actor-body {
height: 140px;
width: 960px;
margin: 30px auto 20px auto;
overflow: hidden;
}

/* --- Actor Entry */
body.stage-home #ensemble-welcome #actor-entry .actor-body {
height: 450px;
width: 960px;
margin: 0 auto 0 auto;
overflow: visible; /* needed for language switcher */
}

/* --- Actor Gallery */
body.stage-home #actor-gallery {
margin-top: 30px;
position: relative;
z-index: 10;
}

body.stage-home #actor-gallery .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}

/* !-------------------------------------------- */
/* !STAGE: Boutique */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Actor Navigation */
body.stage-boutique #actor-navigation {
position: fixed;
top: 0;
left: 0;
height: 185px;
width: 100%;
z-index: 200;
}

body.stage-boutique #actor-navigation .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}

/* --- Actor Ensemble Gallery */
body.stage-boutique #ensemble-gallery {
width: 960px;
margin: 215px auto 15px auto;
}

body.stage-boutique #ensemble-gallery #actor-galleryfilter {
float: left;
width: 245px;
margin-left: -15px;
}

body.stage-boutique #ensemble-gallery #actor-galleryfilter .actor-body {
padding-right: 60px;
}

body.stage-boutique #ensemble-gallery #actor-gallery {
float: left;
width: 730px;
}

body.stage-boutique #ensemble-gallery:after {
content: "";
display: block;
clear: left;
}

/* --- Actor Business card */
body.stage-boutique #actor-bizcard {
height: 125px;
width: 100%;
}

body.stage-boutique #actor-bizcard .actor-body {
width: 960px;
margin: 0 auto 0 auto;
padding-top: 25px;
}

/* --- Optional: Actor Imagebox as overlay */
body.stage-boutique.spotlight-overlay {
overflow: hidden;
}

body.stage-boutique.spotlight-overlay:before {
content: "";
display: block;
position: fixed;
top: -50px;
bottom: -50px;
left: -50px;
right: -50px;
background: transparent url("http://www.twotribes.de/clients/rikiki_web/style/img/demo_boutique_tall.jpg") 0 0 no-repeat; /* TODO: Dynamic replacement of url parameter */
background-size: cover;
opacity: 0.9;
z-index: 220;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}

/* DEPENDENCY: Modernizr.js / Test for CSS3 filters fails */
.no-filter body.stage-boutique.spotlight-overlay:before {
background-size: 1000%;
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
}

body.stage-boutique.spotlight-overlay #actor-imagebox {
display: block;
position: absolute;
top: 50%;
height: 725px;
width: 960px;
left: 50%;
margin-left: -480px;
margin-top: -362px;
z-index: 250;
}

/* !-------------------------------------------- */
/* !STAGE: About */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Actor Navigation */
body.stage-about #actor-navigation {
position: fixed;
top: 0;
left: 0;
height: 185px;
width: 100%;
z-index: 200;
}

body.stage-about #actor-navigation .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}

/* --- Actor Portrait */
body.stage-about #actor-portrait {
margin: 185px 0 15px 0;
}

body.stage-about #actor-portrait .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}

/* --- Actor Business card */
body.stage-about #actor-bizcard {
height: 125px;
width: 100%;
}

body.stage-about #actor-bizcard .actor-body {
width: 960px;
margin: 0 auto 0 auto;
padding-top: 25px;
}

/* !-------------------------------------------- */
/* !STAGE: Interior */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Actor Navigation */
body.stage-interior #actor-navigation {
position: fixed;
top: 0;
left: 0;
height: 185px;
width: 100%;
z-index: 200;
}

body.stage-interior #actor-navigation .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}

/* --- Actor Ensemble Interior */
body.stage-interior #ensemble-interior {
width: 960px;
margin: 215px auto 15px auto;
}

body.stage-interior #actor-interior {
width: 465px;
float: right;
}

body.stage-interior #actor-gallery {
width: 465px;
float: left;
}

body.stage-interior #ensemble-interior:after {
content: "";
display: block;
clear: both;
}

/* --- Actor Project (only works solo for subpages of the stage) */
body.stage-interior #actor-project {
margin: 215px 0 15px 0;
}

body.stage-interior #actor-project .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}


/* --- Actor Business card */
body.stage-interior #actor-bizcard {
height: 125px;
width: 100%;
}

body.stage-interior #actor-bizcard .actor-body {
width: 960px;
margin: 0 auto 0 auto;
padding-top: 25px;
}

/* !-------------------------------------------- */
/* !STAGE SPOTLIGHT: Slide-in/out map panel */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

body.stage #actor-map {
margin-top: -390px;
-webkit-transition: margin ease 1s;
-moz-transition: margin ease 1s;
-ms-transition: margin ease 1s;
transition: margin ease 1s;
}

body.stage.spotlight-map #actor-map {
margin-top: 184px;
-webkit-transition: margin ease 1s;
-moz-transition: margin ease 1s;
-ms-transition: margin ease 1s;
transition: margin ease 1s;
}

body.stage.spotlight-map #actor-map + .actor, 
body.stage.spotlight-map #actor-map + .actor-ensemble {
margin-top: 30px;
-webkit-transition: margin ease 1s;
-moz-transition: margin ease 1s;
-ms-transition: margin ease 1s;
transition: margin ease 1s;
}

body.stage #actor-map .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}


/* !======================================================================================== */
/* !ACTOR DEFINITIONS: Inner layout & styling, some viewport-dependent adaptions */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !ACTOR: Identity */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-identity {
color: #4D5855;
}

#actor-identity .actor-body {
position: relative;
}

#actor-identity .cell {
position: absolute;
}

/* --- Logo & tagline */
#actor-identity h1 {
    background: transparent url("img/logo.svg") 0 0 no-repeat;
background-size: 100%;
border: 3px solid #D0C39D;
border-radius: 26px;
height: 132px;
width: 118px;
top: 0;
left: 0;
overflow: hidden;
text-indent: -1000em;
font-family: "aktiv-grotesk-extended";
text-transform: uppercase;
}

#actor-identity h2 {
bottom: 28px;
left: 150px;
font-family: "aktiv-grotesk-extended";
font-size: 19px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
}

/* --- Contact information */
#actor-identity .identity-contact {
bottom: 30px;
left: 530px;
font-weight: bold;
font-size: 110%;
}

#actor-identity .identity-contact .molecule[itemprop="address"] {
margin-bottom: 10px;
}

/* Never show ZIP code and house location here */
#actor-identity .identity-contact span[itemprop="postalCode"], 
#actor-identity .identity-contact [itemprop="addressCountry"] + p {
display: none;
}

/* German visitors: Remove country, slip city on second line */
html[lang^="de"] #actor-identity .identity-contact [itemprop="addressCountry"] {
display: none;
}

html[lang^="de"] #actor-identity .identity-contact .molecule[itemprop="address"] p:first-child {
visibility: hidden;
}

html[lang^="de"] #actor-identity .identity-contact .molecule[itemprop="address"] p:first-child span {
visibility: visible;
}

html[lang^="de"] #actor-identity .identity-contact [itemprop="addressLocality"]:before {
content: "";
display: block;
}

/* Phone number (suppress iOS highlighting) */
#actor-identity [itemprop="telephone"] a[href^=tel] {
color: inherit;
text-decoration: none;
}

/* Email address */
#actor-identity .action-email {
color: #4D5855;
display: block;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-identity .action-email:hover {
color: #000;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* --- Opening hours */
#actor-identity .identity-hours {
bottom: 30px;
left: 724px;
font-size: 110%;
}

#actor-identity .identity-hours dt {
font-weight: bold;
}

#actor-identity .identity-hours dd {
margin-bottom: 10px;
min-height: 17px; /* whatever... cosmic rays */
}

#actor-identity .identity-hours dd:last-child {
margin-bottom: 0;
}

/* --- Social networks */
#actor-identity .identity-social {
position: static;
}

#actor-identity .identity-social .action-outlink {
position: absolute;
display: block;
    background: transparent url("img/sprite_buttons.svg") 0 0 no-repeat;
background-size: 33.93px 2152.39px;
height: 34px;
width: 34px;
right: 10px;
border-radius: 50%;
overflow: hidden;
text-indent: -1000em;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-identity .identity-social .action-outlink:hover {
box-shadow: 0 0 10px rgba(255,255,255,1);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

#actor-identity .identity-social .outlink-type-houzz {
background-position: 0 -1752px;
right: 50px;
bottom: 92px;
}

#actor-identity .identity-social .outlink-type-rss {
background-position: 0 -1877px;
right: 50px;
bottom: 55px;
}

#actor-identity .identity-social .outlink-type-twitter {
background-position: 0 -357px;
right: 50px;
bottom: 18px;
}

#actor-identity .identity-social .outlink-type-pinterest {
background-position: 0 -177px;
right: 10px;
bottom: 92px;
}

#actor-identity .identity-social .outlink-type-instagram {
background-position: 0 -2102px;
right: 10px;
bottom: 55px;
}

#actor-identity .identity-social .outlink-type-facebook {
background-position: 0 -267px;
right: 10px;
bottom: 18px;
}

/* !-------------------------------------------- */
/* !ACTOR: Entry */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-entry {
color: #fff;
}

#actor-entry .actor-body {
position: relative;
}

/* --- Language switcher */
#actor-entry .navigation-language {
position: absolute;
left: -20px;
bottom: 5px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: left;
-moz-transform: rotate(-90deg);
-moz-transform-origin: left;
-ms-transform: rotate(-90deg);
-ms-transform-origin: left;
transform: rotate(-90deg);
transform-origin: left;
}

#actor-entry .navigation-language .molecule {
float: left;
margin-right: 20px;
}

#actor-entry .navigation-language .action-lang {
color: #4D5855;
font-weight: bold;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-entry .navigation-language .action-lang:hover {
color: #000;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

html[lang^="de"] #actor-entry .navigation-language .lang-de .action-lang, 
html[lang^="de"] #actor-entry .navigation-language .lang-de .action-lang:hover, 
html[lang^="en"] #actor-entry .navigation-language .lang-en .action-lang, 
html[lang^="en"] #actor-entry .navigation-language .lang-en .action-lang:hover {
color: #fff;
}

/* --- Website main sections */
#actor-entry .navigation-sections .molecule {
background: rgba(0,0,0,0.2) 0 0 no-repeat;
background-size: 100%;
position: absolute;
font-family: "aktiv-grotesk-extended";
letter-spacing: 2px;
overflow: hidden;
}

#actor-entry .navigation-sections .molecule:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border: 7px solid rgba(208,195,157,0.7);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

#actor-entry .navigation-sections .molecule h2 {
height: 100%;
width: 100%;
}

#actor-entry .navigation-sections .action-nav {
display: block;
position: absolute;
height: 144px;
width: 144px;
line-height: 144px;
font-size: 80%;
border-radius: 50%;
background: rgba(255,255,255,0.9);
color: #A83B5E;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}

#actor-entry .navigation-sections .action-nav:hover {
background: rgba(255,255,255,1);
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

#actor-entry .navigation-sections .action-nav:before {
content: "";
display: block;
position: absolute;
height: 144px;
width: 144px;
top: -10px;
left: -10px;
border: 10px solid rgba(203,143,155,0.7);
border-radius: 50%;
-webkit-transition: border 1s ease;
-moz-transition: border 1s ease;
-ms-transition: border 1s ease;
transition: border 1s ease;
}

#actor-entry .navigation-sections .action-nav:hover:before {
border-color: rgba(168,59,64,1);
border-color: #A83B5E;
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
}

/* Boutique */
#actor-entry .navigation-sections .nav-target-boutique {
    background-image: url("img/img_home_boutique_8748@2x.jpg");
height: 439px;
width: 427px;
top: 0;
left: 0;
}

#actor-entry .navigation-sections .nav-target-boutique .action-nav {
bottom: 50px;
left: 230px;
}

/* Interior */
#actor-entry .navigation-sections .nav-target-interior {
    background-image: url("img/img_home_interior_0397@2x.jpg");
height: 287px;
width: 292px;
top: 152px;
left: 427px;
}

#actor-entry .navigation-sections .nav-target-interior .action-nav {
bottom: 50px;
left: 50px;
}

/* About */
#actor-entry .navigation-sections .nav-target-about {
    background-image: url("img/img_home_about_0750@2x.jpg");
font-size: 80%;
height: 152px;
width: 146px;
top: 0;
left: 427px;
}

#actor-entry .navigation-sections .nav-target-about .action-nav {
height: 66px;
width: 66px;
line-height: 66px;
bottom: 16px;
left: 19px;
}

#actor-entry .navigation-sections .nav-target-about .action-nav:before {
border-width: 5px;
top: -5px;
left: -5px;
height: 66px;
width: 66px;
}

/* Blog */
#actor-entry .navigation-sections .nav-target-blog {
    background-image: url("img/img_home_blog_0008@2x.jpg");
font-size: 80%;
height: 152px;
width: 146px;
top: 0;
left: 573px;
}

#actor-entry .navigation-sections .nav-target-blog .action-nav {
height: 66px;
width: 66px;
line-height: 66px;
bottom: 16px;
left: 19px;
}

#actor-entry .navigation-sections .nav-target-blog .action-nav:before {
border-width: 5px;
top: -5px;
left: -5px;
height: 66px;
width: 66px;
}

/* --- Randomized boutique filters */
#actor-entry .navigation-merchandise {
    background: rgba(0, 0, 0, 0.2) url("img/img_home_merchandise_8748@2x.jpg") 0 0 no-repeat;
background-size: 100%;
position: absolute;
height: 439px;
width: 241px;
top: 0;
left: 719px;
padding: 30px 20px 0 30px;
}

#actor-entry .navigation-merchandise:before {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border: 7px solid rgba(208,195,157,0.7);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

#actor-entry .navigation-merchandise .action-nav {
position: relative;
z-index: 10;
display: block;
color: #DBDCDC;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding-bottom: 3px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-webkit-transition: color 2s ease, padding 2s ease;
-moz-transition: color 2s ease, padding 2s ease;
-ms-transition: color 2s ease, padding 2s ease;
transition: color 2s ease, padding 2s ease;
}

#actor-entry .navigation-merchandise .action-nav:hover {
color: #fff;
padding-left: 20px;
-webkit-transition: color 0.5s ease, padding 0.5s ease;
-moz-transition: color 0.5s ease, padding 0.5s ease;
-ms-transition: color 0.5s ease, padding 0.5s ease;
transition: color 0.5s ease, padding 0.5s ease;
}

#actor-entry .navigation-merchandise .color-array {
padding: 2px 0 2px 0;
}

#actor-entry .navigation-merchandise .color-swatch {
display: inline-block;
overflow: hidden;
height: 13px;
width: 17px;
text-indent: -1000em;
}

/* !-------------------------------------------- */
/* !ACTOR: Navigation */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-navigation {
    background: #c2cfcb url("img/background_nav.jpg") center 0 no-repeat;
background-size: auto 215px; /* we expect 185px height for #actor-navigation to be set by stage */
font-family: "aktiv-grotesk-extended";
}

#actor-navigation .actor-body {
padding-top: 32px;
    background: transparent url("img/background_nav.svg") 185px -21px no-repeat;
height: 211px; /* we expect 185px height for #actor-navigation to be set by stage */
}

#actor-navigation .cell {
float: left;
}

#actor-navigation .molecule {
float: left;
}

#actor-navigation .actor-body:after {
content: "";
display: block;
clear: left;
}

/* --- General button treatment */
#actor-navigation .action {
display: block;
color: #4D5855;
text-decoration: none;
text-transform: uppercase;
text-align: center;
overflow: hidden;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-navigation .action:hover, 
#actor-navigation .item-active .action {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* --- Logo */
#actor-navigation .navigation-home {
width: 25%;
}

#actor-navigation .navigation-home .action-nav {
    background: transparent url("img/logo.svg") 0 0 no-repeat;
background-size: 100%;
height: 112px;
width: 100px;
text-indent: -1000em;
border-radius: 16px;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-navigation .navigation-home .action-nav:hover {
box-shadow: 0 0 20px rgba(192,8,127,0.5);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

/* --- Section navigation */
#actor-navigation .navigation-sections {
width: 50%;
}

#actor-navigation .navigation-sections .molecule {
width: 25%;
}

#actor-navigation .navigation-sections .action-nav {
position: relative;
overflow: visible;
background: rgba(255,255,255,0.6);
border-radius: 50%;
height: 120px;
width: 120px;
line-height: 120px;
letter-spacing: 2px;
font-weight: bold;
}

/* Transparent borders */
#actor-navigation .navigation-sections .action-nav:after {
position: absolute;
display: block;
content: "";
top: -5px;
left: -5px;
height: 110px;
width: 110px;
border: 10px solid rgba(77,88,85,0.3);
border-radius: 50%;
-webkit-transition: border 1s ease;
-moz-transition: border 1s ease;
-ms-transition: border 1s ease;
transition: border 1s ease;
}

#actor-navigation .navigation-sections .action-nav:hover:after, 
#actor-navigation .navigation-sections .item-active .action-nav:after {
border-color: rgba(192,8,127,0.3);
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
}

#actor-navigation .nav-group-main + .nav-group-support {
margin-left: 5%;
}

#actor-navigation .nav-group-support.molecule {
width: 17%;
}

#actor-navigation .nav-group-support .action-nav {
height: 82px;
width: 82px;
line-height: 82px;
margin-top: 18px;
}

/* Transparent borders */
#actor-navigation .nav-group-support .action-nav:after {
top: -5px;
left: -5px;
height: 72px;
width: 72px;
border: 10px solid rgba(41,35,92,0.2);
border-radius: 50%;
-webkit-transition: border 1s ease;
-moz-transition: border 1s ease;
-ms-transition: border 1s ease;
transition: border 1s ease;
}

#actor-navigation .nav-group-support .action-nav.nav-target-blog:after {
border: 10px solid rgba(0,158,226,0.15);
}

#actor-navigation .nav-group-support .action-nav.nav-target-blog:hover:after, 
#actor-navigation .nav-group-support.item-active .action-nav.nav-target-blog:after {
border-color: rgba(192,8,127,0.3);
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
}

/* --- Locator service */
#actor-navigation .navigation-locator {
float: right;
width: 175px;
}

#actor-navigation .navigation-locator .molecule {
position: relative;
overflow: visible;
background: rgba(255,255,255,0.35) center 12px no-repeat;
color: #fff;
border-radius: 50%;
height: 110px;
width: 110px;
margin-top: 4px;
font-family: "trade-gothic-next";
font-weight: bold;
line-height: 1.2em;
}

#actor-navigation .navigation-locator .molecule:after {
position: absolute;
display: block;
content: "";
top: -5px;
left: -5px;
height: 100px;
width: 100px;
border: 10px solid rgba(208,195,157,0.15);
border-radius: 50%;
-webkit-transition: border 1s ease;
-moz-transition: border 1s ease;
-ms-transition: border 1s ease;
transition: border 1s ease;
}

#actor-navigation .navigation-locator:hover .molecule:after, 
#actor-navigation .navigation-locator:hover .molecule.locator-distance:after, 
body.spotlight-map #actor-navigation .navigation-locator .molecule:after {
border-color: rgba(192,8,127,0.3);
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
}

#actor-navigation .navigation-locator .action {
overflow: visible;
text-transform: none;
}

/* Display of remaining opening hours */
#actor-navigation .navigation-locator .molecule.locator-duration {
    background-image: url("img/button_locator_time.svg");
padding: 20px 15px 0 15px;
}

#actor-navigation .navigation-locator .molecule.locator-duration span {
display: block;
margin-bottom: 15px;
}

#actor-navigation .navigation-locator .molecule.locator-duration span:first-child {
font-size: 120%;
}

#actor-navigation .navigation-locator .molecule.locator-duration.duration-day {
/* treatment when the store is still open */
}

#actor-navigation .navigation-locator .molecule.locator-duration.duration-night {
/* treatment when the store is closed */
}

#actor-navigation .navigation-locator .molecule.locator-duration.duration-morning {
/* treatment when the store is about to open again */
}

/* Display of distance to visitor */
#actor-navigation .navigation-locator .molecule.locator-distance {
background-color: rgba(255,255,255,0.2);
    background-image: url("img/button_locator_loc.svg");
background-position: 27px 13px;
height: 82px;
width: 82px;
margin-top: 18px;
margin-left: -18px;
padding: 25px 10px 0 10px;
}

#actor-navigation .navigation-locator .molecule.locator-distance:after {
top: -5px;
left: -5px;
height: 72px;
width: 72px;
border: 10px solid rgba(208,195,157,0.07);
border-radius: 50%;
-webkit-transition: border 1s ease;
-moz-transition: border 1s ease;
-ms-transition: border 1s ease;
transition: border 1s ease;
}

#actor-navigation .navigation-locator .molecule.locator-distance.distance-near {
/* treatment when the distance to visitor is near */
}

#actor-navigation .navigation-locator .molecule.locator-duration.distance-far {
/* treatment when the distance to visitor is far */
}

/* !-------------------------------------------- */
/* !ACTOR: Map */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-map {
position: relative;
}

#actor-map:before {
content: "";
display: block;
height: 5px;
width: 100%;
position: absolute;
bottom: 385px;
left: 0;
background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
z-index: 10;
}

#actor-map .actor-body {
background: #D0C39D;
}

#actor-map .map-viewer {
    background: rgba(0, 0, 0, 0.3) url("img/button_locator_loc.svg") center center no-repeat;
background-size: 70% 300%;
height: 345px;
overflow: hidden;
}

body.spotlight-map #actor-map .map-viewer {
-webkit-animation: shrinkmap 1s ease-in-out forwards 0.5s;
-moz-animation: shrinkmap 1s ease-in-out forwards 0.5s;
-ms-animation: shrinkmap 1s ease-in-out forwards 0.5s;
animation: shrinkmap 1s ease-in-out forwards 0.5s;
}

@-webkit-keyframes shrinkmap {
0% {background-size: 70% 300%;}
100% {background-size: 50% 70%;}
}

@-moz-keyframes shrinkmap {
0% {background-size: 70% 300%;}
100% {background-size: 50% 70%;}
}

@-ms-keyframes shrinkmap {
0% {background-size: 70% 300%;}
100% {background-size: 50% 70%;}
}

@keyframes shrinkmap {
0% {background-size: 70% 300%;}
100% {background-size: 50% 70%;}
}

#actor-map .map-controller {
height: 45px;
}

#actor-map .map-controller .molecule {
float: left;
}

#actor-map .map-controller .controller-panel {
float: right;
}

/* --- Transport modes */
#actor-map .map-controller .controller-transportmode {
margin-left: 65px;
}

#actor-map .map-controller .controller-transportmode .atom {
float: left;
margin-right: 10px;
}

#actor-map .map-controller .controller-transportmode .action-view {
display: block;
    background: #fff url("img/sprite_buttons_map.svg") -58px -4px no-repeat;
border-radius: 50%;
height: 31px;
width: 31px;
margin-top: 6px;
overflow: hidden;
text-indent: -1000em;
-webkit-transition: background-position 1s ease;
-moz-transition: background-position 1s ease;
-ms-transition: background-position 1s ease;
transition: background-position 1s ease;
}

#actor-map .map-controller .transportmode-walking .action-view:hover, 
#actor-map .map-controller .transportmode-walking.item-active .action-view {
background-position: 0 -4px;
-webkit-transition: background-position 0.5s ease;
-moz-transition: background-position 0.5s ease;
-ms-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
}

#actor-map .map-controller .transportmode-bicycling .action-view { 
background-position: -58px -45px;
}

#actor-map .map-controller .transportmode-bicycling .action-view:hover, 
#actor-map .map-controller .transportmode-bicycling.item-active .action-view {
background-position: 0 -45px;
-webkit-transition: background-position 0.5s ease;
-moz-transition: background-position 0.5s ease;
-ms-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
}

#actor-map .map-controller .transportmode-transit .action-view { 
background-position: -59px -90px;
}

#actor-map .map-controller .transportmode-transit .action-view:hover, 
#actor-map .map-controller .transportmode-transit.item-active .action-view {
background-position: 0 -90px;
-webkit-transition: background-position 0.5s ease;
-moz-transition: background-position 0.5s ease;
-ms-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
}

#actor-map .map-controller .transportmode-driving .action-view { 
background-position: -59px -144px;
}

#actor-map .map-controller .transportmode-driving .action-view:hover, 
#actor-map .map-controller .transportmode-driving.item-active .action-view {
background-position: 0 -144px;
-webkit-transition: background-position 0.5s ease;
-moz-transition: background-position 0.5s ease;
-ms-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
}

/* --- Adress input and distance text */
#actor-map .map-controller .controller-location {
margin-left: 10px;
}

#actor-map .map-controller .controller-location .atom {
float: left;
margin-right: 10px;
}

#actor-map .map-controller .controller-location label {
display: none;
}

#actor-map .map-controller .controller-location input {
font-family: "trade-gothic-next";
font-size: 13px;
height: 28px;
width: 230px;
margin-top: 7px;
}

#actor-map .map-controller .controller-location .action-submit {
display: block;
    background: #fff url("img/sprite_buttons_map.svg") -58px -191px no-repeat;
border: none;
border-radius: 50%;
height: 31px;
width: 31px;
margin-top: 6px;
overflow: hidden;
text-indent: -1000em;
cursor: pointer;
-webkit-transition: background-position 1s ease;
-moz-transition: background-position 1s ease;
-ms-transition: background-position 1s ease;
transition: background-position 1s ease;
}

#actor-map .map-controller .controller-location .action-submit:hover, 
#actor-map .map-controller .controller-location .action-submit:active {
background-position: 0 -191px;
-webkit-transition: background-position 0.5s ease;
-moz-transition: background-position 0.5s ease;
-ms-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
}

#actor-map .map-controller .controller-location .location-distance {
color: #fff;
font-weight: bold;
line-height: 45px;
}

/* --- Panel controls */
#actor-map .map-controller .controller-panel .atom {
float: left;
margin-right: 10px;
}

#actor-map .map-controller .controller-panel .panel-google {
margin-right: 20px;
}

#actor-map .map-controller .controller-panel .action-nav, 
#actor-map .map-controller .controller-panel .action-outlink {
display: block;
    background: #fff url("img/sprite_buttons_map.svg") -59px -247px no-repeat;
border-radius: 50%;
height: 31px;
width: 31px;
margin-top: 6px;
overflow: hidden;
text-indent: -1000em;
-webkit-transition: background-position 1s ease;
-moz-transition: background-position 1s ease;
-ms-transition: background-position 1s ease;
transition: background-position 1s ease;
}

#actor-map .map-controller .controller-panel .panel-google .action-outlink:hover {
background-position: -1px -247px;
}

#actor-map .map-controller .controller-panel .panel-dismiss .action-nav {
background-position: -59px -293px;
}

#actor-map .map-controller .controller-panel .panel-dismiss .action-nav:hover {
background-position: 0 -293px;
-webkit-transition: background-position 0.5s ease;
-moz-transition: background-position 0.5s ease;
-ms-transition: background-position 0.5s ease;
transition: background-position 0.5s ease;
}

/* !-------------------------------------------- */
/* !ACTOR: Portrait */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-portrait .actor-body {
color: #4D5855;
}

#actor-portrait .cell {
float: left;
}

#actor-portrait .portrait-person {
position: relative;
min-height: 771px;
width: 50%;
}

#actor-portrait .portrait-company {
width: 25%;
padding-right: 15px;
}

#actor-portrait .portrait-services {
width: 25%;
padding-left: 15px;
}

#actor-portrait .actor-body:after {
content: "";
display: block;
clear: left;
}

/* --- Q&A, Facts and photo */
/* Portrait photo */
#actor-portrait img {
position: relative;
left: -30px;
max-width: 100%;
}

/* Q&A list */
#actor-portrait .person-qa {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.65);
width: 50%;
padding: 0 15px 0 15px;
z-index: 10;
}

#actor-portrait .person-qa h2 {
color: #4B4270;
padding-top: 30px;
padding-bottom: 15px;
text-transform: uppercase;
font-family: "aktiv-grotesk-extended";
font-weight: bold;
letter-spacing: 2px;
}

#actor-portrait .person-qa dd {
padding-bottom: 0.7em;
line-height: 1.25em;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#actor-portrait .person-qa dt {
color: #4B4270;
font-weight: bold;
}

#actor-portrait .person-qa .item-structured {
padding-bottom: 15px;
}

/* Facts list */
#actor-portrait .person-facts {
position: relative;
left: -30px;
border: 1px solid #B8087F;
padding: 30px;
margin-top: 20px;
}

#actor-portrait .person-facts h2 {
color: #B8087F;
padding-left: 15px;
padding-bottom: 15px;
text-transform: uppercase;
font-family: "aktiv-grotesk-extended";
font-weight: bold;
letter-spacing: 2px;
}

#actor-portrait .person-facts li {
padding-left: 15px;
padding-bottom: 0.5em;
}

/* Privacy link */
#actor-portrait .person-privacy {
position: relative;
left: -30px;
background: #68736f;
color: #fff;
font-weight: bold;
padding: 20px 20px 20px 30px;
margin-top: 20px;
}

#actor-portrait .person-privacy .action {
    color: inherit;
}

#actor-portrait .person-privacy .action:hover {
    color: #b2c1bb;
}

/* --- Text columns (assuming structured text) */
#actor-portrait .portrait-company, 
#actor-portrait .portrait-services {
margin-top: 30px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#actor-portrait .portrait-company p, 
#actor-portrait .portrait-services p {
margin-bottom: 0.7em;
line-height: 1.25em;
}

#actor-portrait .portrait-company em, 
#actor-portrait .portrait-services em {
font-style: normal;
font-weight: bold;
color: #5d6863;
}

#actor-portrait .portrait-company h2, 
#actor-portrait .portrait-services h2 {
color: #216685;
text-transform: uppercase;
font-family: "aktiv-grotesk-extended";
font-weight: normal;
font-size: 120%;
letter-spacing: 1px;
margin-top: 1.4em;
margin-bottom: 1.4em;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

#actor-portrait .portrait-company h2:first-child, 
#actor-portrait .portrait-services h2:first-child {
margin-top: 0;
}

#actor-portrait .portrait-company blockquote, 
#actor-portrait .portrait-services blockquote {
color: #716992;
font-size: 120%;
font-weight: normal;
margin: 1.4em 0 0.7em 0;
padding: 0;
text-indent: -0.5em;
}

#actor-portrait .portrait-company blockquote p, 
#actor-portrait .portrait-services blockquote p {
display: inline;
}

#actor-portrait .portrait-company blockquote:before, 
#actor-portrait .portrait-services blockquote:before {
content: "„";
}

#actor-portrait .portrait-company blockquote:after, 
#actor-portrait .portrait-services blockquote:after {
content: "“";
}

/* !-------------------------------------------- */
/* !ACTOR: Interior */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-interior .cell {
float: left;
color: #4D5855;
}

#actor-interior .interior-audience,
#actor-interior .interior-objects {
min-height: 200px;
width: 220px;
float: left;
}

#actor-interior .interior-objects {
float: right;
}

#actor-interior .interior-process {
clear: left;
margin-top: 30px;
}

#actor-interior .actor-body:after {
content: "";
display: block;
clear: both;
}

/* --- Info boxes */
#actor-interior .interior-audience,
#actor-interior .interior-objects {
}

#actor-interior .interior-audience h2,
#actor-interior .interior-objects h2 {
font-family: "aktiv-grotesk-extended";
font-weight: normal;
font-size: 100%;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1.4em;
padding-left: 11px;
}

#actor-interior .interior-audience .item-structured,
#actor-interior .interior-objects .item-structured {
border: 1px solid #8B908E;
padding: 10px;
}

#actor-interior .interior-audience li,
#actor-interior .interior-objects li {
margin-bottom: 0.5em;
}

/* --- Text description */
#actor-interior .interior-process {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#actor-interior .interior-process h2 {
font-family: "aktiv-grotesk-extended";
font-weight: normal;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 1.4em;
margin-bottom: 1.4em;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

#actor-interior .interior-process h2:first-child {
margin-top: 0;
}

#actor-interior .interior-process p {
margin-bottom: 0.7em;
line-height: 1.25em;
}

#actor-interior .interior-process li {
position: relative;
margin-bottom: 0.5em;
padding-left: 15px;
}

#actor-interior .interior-process li:last-child {
margin-bottom: 0.7em;
}

#actor-interior .interior-process li:before {
background: #BDBCBB;
content: "";
display: block;
position: absolute;
top: 0.35em;
left: 0;
height: 7px;
width: 7px;
border-radius: 50%;
}

/* !-------------------------------------------- */
/* !ACTOR: Project */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-project .cell {
float: left;
color: #4D5855;
}

#actor-project .project-description {
width: 300px;
margin-right: 30px;
}

#actor-project .project-images {
width: 630px;
}

#actor-project .actor-body:after {
content: "";
display: block;
clear: left;
}

/* --- Project navigation */
#actor-project .project-navigation .atom {
float: left;
height: 120px;
width: 93px;
margin: 0 10px 30px 0;
border: 1px solid #888D8B;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

#actor-project .project-navigation .atom:last-child {
margin-right: 0;
}

#actor-project .project-navigation .atom .action-nav {
display: block;
position: relative;
height: 100%;
width: 100%;
padding: 60px 5px 5px 5px;
text-decoration: none;
text-align: center;
color: #4D5855;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-project .project-navigation .atom .action-nav:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#actor-project .project-navigation .atom .action-nav:before {
content: "";
display: block;
position: absolute;
top: 10px;
left: 50%;
margin-left: -17px;
height: 34px;
width: 34px;
    background: transparent url("img/sprite_buttons.svg") -1px -823px no-repeat;
background-size: 33.93px 2152.39px;
border: 3px solid #888D8B;
border-radius: 50%;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-project .project-navigation .atom .action-nav:hover:before {
box-shadow: 0 0 10px rgba(192,8,127,0.7);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

#actor-project .project-navigation .navigation-up .action-nav:before {
background-position: 1px -977px;
}

#actor-project .project-navigation .navigation-forward .action-nav:before {
background-position: 2px -901px;
}

#actor-project .project-navigation:after {
content: "";
display: block;
clear: left;
}

/* --- Project description & facts */
#actor-project .project-description {
margin-bottom: 30px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#actor-project .project-description h1 {
font-family: "aktiv-grotesk-extended";
font-weight: bold;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 0.1px;
margin-top: 1.4em;
margin-bottom: 1.4em;
padding-bottom: 3px;
border-bottom: 1px solid #4D5855;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

/* Facts table */
#actor-project .project-description .project-facts {
border-bottom: 1px solid #4D5855;
padding-bottom: 15px;
margin-bottom: 15px;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

#actor-project .project-description .project-facts dt {
display: inline;
line-height: 1.25em;
font-weight: bold;
}

#actor-project .project-description .project-facts dt:after {
content: ": ";
}

#actor-project .project-description .project-facts dd {
display: inline;
line-height: 1.25em;
}

#actor-project .project-description .project-facts dd:after {
content: "";
display: block;
height: 0.2em;
}

/* Project links */
#actor-project .project-description .project-links {
border-bottom: 1px solid #4D5855;
padding-bottom: 15px;
margin-bottom: 15px;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

#actor-project .project-description .project-links dt {
display: inline;
line-height: 1.25em;
font-weight: bold;
}

#actor-project .project-description .project-links dt:after {
content: ": ";
}

#actor-project .project-description .project-links dd {
display: inline;
line-height: 1.25em;
}

#actor-project .project-description .project-links .action-outlink {
text-decoration: none;
color: #000;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-project .project-description .project-links .action-outlink:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#actor-project .project-description .project-links dd:after {
content: "";
display: block;
height: 0.3em;
}

/* Long story (including all structuredText items */
#actor-project .item-structured h1,
#actor-project .item-structured h2,
#actor-project .item-structured h3,
#actor-project .item-structured h4 {
font-size: 100%;
font-weight: bold;
letter-spacing: 1px;
margin-top: 1.4em;
margin-bottom: 0.7em;
}

#actor-project .item-structured p {
line-height: 1.25em;
margin-bottom: 0.7em;
}

#actor-project .item-structured em {
font-style: normal;
font-weight: bold;
color: #5d6863;
}

#actor-project .item-structured strong {
font-style: normal;
font-weight: normal;
color: #000;
}

#actor-project .item-structured li {
margin-bottom: 0.5em;
position: relative;
padding-left: 15px;
}

#actor-project .item-structured li:before {
background: #BDBCBB;
content: "";
display: block;
position: absolute;
top: 0.35em;
left: 0;
height: 7px;
width: 7px;
border-radius: 50%;
}

#actor-project .item-structured li:last-child {
margin-bottom: 0.7em;
}

/* --- Image list with optional captions */
#actor-project .project-images .molecule {
margin-bottom: 20px;
overflow: hidden;
}

#actor-project .project-images .molecule img {
border: none;
width: 100%;
}

#actor-project .project-images .molecule .image-caption {
background: #efefef;
font-size: 90%;
padding: 10px;
}

/* !-------------------------------------------- */
/* !ACTOR: Gallery matrix */
/* !EXPRESSIONS: <none>, -metadata, -feature */
/* !-------------------------------------------- */

/* --- Standard gallery */
#actor-gallery .actor-body > h2 {
display: none;
}

#actor-gallery .gallery-shot {
background: #EFEFEF;
float: left;
height: 175px;
width: 175px;
margin: 0 10px 10px 0;
overflow: hidden;
}

#actor-gallery .gallery-shot:nth-child(4n) {
margin-right: 0;
}

#actor-gallery .gallery-shot img {
border: none;
width: 100%;
}

#actor-gallery .gallery-shot .action-zoom {
position: relative;
display: block;
height: 100%;
width: 100%;
}

#actor-gallery .gallery-shot .action-zoom:before {
position: absolute;
z-index: 50;
content: "";
display: block;
height: 100%;
width: 100%;
background: #000;
opacity: 0;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}

#actor-gallery .gallery-shot .action-zoom:hover:before {
opacity: 0.3;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}

#actor-gallery .gallery-shot .action-zoom:after {
position: absolute;
z-index: 60;
content: "";
display: block;
height: 34px;
width: 34px;
margin: -22px 0 0 -22px;
border: 5px solid #fff;
border-radius: 50%;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}

#actor-gallery .gallery-shot .action-zoom:hover:after {
opacity: 1;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}

#actor-gallery .actor-body:after {
content: "";
display: block;
clear: left;
}

/* Message: No items found */
#actor-gallery .message-notfound {
    background: transparent url("img/icon_gallery_notfound.jpg") 94% top no-repeat;
background-size: 32%;
min-height: 280px;
color: #4D5855;
text-align: center;
border: 10px solid #d1d1d1;
padding: 20px 25% 20px 25%;
margin-bottom: 30px;
}

#actor-gallery .message-notfound h3 {
font-family: "aktiv-grotesk-extended";
font-weight: normal;
font-size: 150%;
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 1.4em;
margin-bottom: 1.4em;
}

#actor-gallery .message-notfound p {
margin-bottom: 0.7em;
line-height: 1.25em;
}

#actor-gallery .message-notfound a {
color: inherit;
font-weight: bold;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-gallery .message-notfound a:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#actor-gallery .message-notfound em {
font-style: normal;
font-weight: bold;
color: #5d6863;
}

/* --- Gallery with visible metadata */
#actor-gallery.expression-metadata .actor-body > h2 {
display: block;
color: #4D5855;
font-family: "aktiv-grotesk-extended";
font-weight: bold;
font-size: 100%;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 1.4em;
}

#actor-gallery.expression-metadata .gallery-shot {
background: none;
border: 1px solid #8B908E;
color: #4D5855;
height: 277px;
width: 222px;
margin: 0 20px 20px 0;
}

#actor-gallery.expression-metadata .gallery-shot:nth-child(2n) {
margin-right: 0;
}

#actor-gallery.expression-metadata .gallery-shot .action-zoom {
background: #eee;
height: 46%;
width: 100%;
overflow: hidden;
}

#actor-gallery.expression-metadata .gallery-shot h3 {
font-family: "aktiv-grotesk-extended";
font-weight: normal;
font-size: 100%;
letter-spacing: 1px;
text-transform: uppercase;
margin: 10px 10px 10px 10px;
}

#actor-gallery.expression-metadata .gallery-shot p {
margin: 0 10px 10px 10px;
}

/* --- Gallery with visible metadata and feature treatment */
/* We assume only one horizontal line of boxes! */
#actor-gallery.expression-feature .actor-body > h2 {
display: block;
color: #4D5855;
font-family: "aktiv-grotesk-extended";
font-weight: bold;
font-size: 19px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 10px;
}

#actor-gallery.expression-feature .gallery-shot {
background: rgba(252, 3, 115, 0.3);
color: #fff;
width: 180px;
height: auto;
margin-right: 15px;
}

#actor-gallery.expression-feature .gallery-shot:last-child {
margin-right: 0;
}

#actor-gallery.expression-feature .gallery-shot .action-zoom {
background: #eee;
height: auto;
width: 100%;
}

#actor-gallery.expression-feature .gallery-shot h3 {
margin: 10px 10px 10px 10px;
}

#actor-gallery.expression-feature .gallery-shot p {
margin: 0 10px 10px 10px;
}

/* --- SPECIAL CASE: 2 limited galleries on homepage */
.stage-home #actor-gallery .actor-body {
    position: relative;
}

.stage-home #actor-gallery h2 {
display: inline-block;
height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.stage-home #actor-gallery .cell + h2 {
    position: absolute;
    top: 0;
    left: 585px;
}

.stage-home #actor-gallery .cell {
    width: auto;
    display: inline-block;
}

.stage-home #actor-gallery .cell + h2 + .cell {
    position: absolute;
    top: 34px;
    left: 585px;
}

.stage-home #actor-gallery .cell:after {
content: "";
display: block;
clear: both;
}

/* !-------------------------------------------- */
/* !ACTOR: Overlay Image Box */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-imagebox {
display: none;
background: #fff;
box-shadow: 0 0 60px #000;
}

#actor-imagebox .actor-body {
overflow: hidden;
color: #4D5855;
}

#actor-imagebox .imagebox-display {
background: #EFEFEF;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 725px;
}

#actor-imagebox .imagebox-inspector {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 215px;
padding: 100px 20px 10px 10px;
}

/* --- Close button */
#actor-imagebox .action-zoom {
display: block;
position: absolute;
z-index: 200;
top: 15px;
right: 0;
height: 34px;
width: 205px;
padding-left: 45px;
color: #4D5855;
text-decoration: none;
font-weight: bold;
line-height: 40px;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-imagebox .action-zoom:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#actor-imagebox .action-zoom:before {
display: block;
content: "";
position: absolute;
z-index: 210;
top: 0;
left: 0;
height: 29px;
width: 29px;
    background: transparent url("img/sprite_buttons.svg") center -735px no-repeat;
background-size: 33.93px 2152.39px;
border: 5px solid #8E9391;
border-radius: 50%;
overflow: hidden;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-imagebox .action-zoom:hover:before {
box-shadow: 0 0 10px rgba(192,8,127,0.7);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

/* --- Image container w/ paging buttons */
/* Image arrangements for horizontal/vertical auto-centering */
#actor-imagebox .imagebox-display {
text-align: center;
font-size: 0;
}

#actor-imagebox .imagebox-display:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

#actor-imagebox .imagebox-display img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}

/* Button arrangements */
#actor-imagebox .imagebox-display .action-page {
position: absolute;
display: block;
height: 56px;
width: 56px;
    background: transparent url("img/sprite_buttons.svg") center 0 no-repeat;
background-size: 33.93px 2152.39px;
border: 5px solid #fff;
border-radius: 50%;
text-indent: -1000em;
overflow: hidden;
top: 50%;
margin-top: -28px;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
-webkit-animation: fade-out 3s ease-in-out forwards;
-moz-animation: fade-out 3s ease-in-out forwards;
-ms-animation: fade-out 3s ease-in-out forwards;
animation: fade-out 3s ease-in-out forwards;
}

#actor-imagebox .imagebox-display:hover .action-page {
-webkit-animation: fade-in 0.5s ease-in-out forwards;
-moz-animation: fade-in 0.5s ease-in-out forwards;
-ms-animation: fade-in 0.5s ease-in-out forwards;
animation: fade-in 0.5s ease-in-out forwards;
}

@-webkit-keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
}

@-webkit-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-moz-keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
}

@-moz-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

@-ms-keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
}

@-ms-keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes fade-out {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes fade-in {
0% {opacity: 0;}
100% {opacity: 1;}
}

#actor-imagebox .imagebox-display .action-page:hover {
box-shadow: 0 0 20px rgba(192,8,127,0.7);
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-imagebox .imagebox-display .action-page-back {
left: 20px;
background-position: 3px -537px;
}

#actor-imagebox .imagebox-display .action-page-forward {
right: 20px;
background-position: 10px -629px;
}

/* --- Inspector metadata */
#actor-imagebox .imagebox-inspector h4 {
font-family: "aktiv-grotesk-extended";
font-weight: normal;
text-transform: uppercase;
margin-bottom: 10px;
}

#actor-imagebox .imagebox-inspector .inspector-metadata {
margin-bottom: 20px;
}

#actor-imagebox .imagebox-inspector .filter-option {
position: relative;
text-decoration: none;
font-weight: bold;
padding: 3px 0 3px 15px;
margin-left: 0;
}

#actor-imagebox .imagebox-inspector .filter-option:before {
background: #E9E9EA;
content: "";
display: block;
position: absolute;
top: 0.6em;
left: 2px;
height: 7px;
width: 7px;
border-radius: 50%;
}

#actor-imagebox .imagebox-inspector .color-swatch {
border: 1px solid #D5D6D6;
display: inline-block;
height: 17px;
width: 17px;
overflow: hidden;
text-indent: -1000em;
}

#actor-imagebox .imagebox-inspector .color-swatch {
margin-left: -1px;
}

/* --- Optional image caption */
#actor-imagebox .imagebox-inspector .inspector-caption {
margin-bottom: 50px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

/* --- Social buttons */
#actor-imagebox .imagebox-inspector .action-text {
position: relative;
display: block;
padding-left: 40px;
color: #4D5855;
text-decoration: none;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-bottom: 10px;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-imagebox .imagebox-inspector .action-text:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#actor-imagebox .imagebox-inspector .action-text:before {
    background: transparent url("img/sprite_buttons.svg") center 0 no-repeat;
background-size: 33.93px 2152.39px;
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 34px;
width: 34px;
border-radius: 50%;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-imagebox .imagebox-inspector .action-text:hover:before {
box-shadow: 0 0 10px rgba(192,8,127,0.7);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

#actor-imagebox .imagebox-inspector .outlink-type-pinit:before {
background-position: center -178px;
}

#actor-imagebox .imagebox-inspector .outlink-type-fbshareit:before {
background-position: center -267px;
}

#actor-imagebox .imagebox-inspector .outlink-type-tweetit:before {
background-position: center -356px;
}

#actor-imagebox .imagebox-inspector .action-mail:before {
background-position: center -456px;
}

/* !-------------------------------------------- */
/* !ACTOR: Gallery filter controls */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-galleryfilter {
color: #4D5855;
}

#actor-galleryfilter .cell {
margin-bottom: 20px;
}

/* --- Explanatory text */
#actor-galleryfilter .filter-explanation {
color: #8E9391;
padding-left: 15px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#actor-galleryfilter .filter-explanation p {
margin-bottom: 0.7em;
}

/* --- Filter sections: Headlines + "All" filters */
#actor-galleryfilter .cell h3 {
font-family: "aktiv-grotesk-extended";
font-weight: bold;
font-size: 100%;
letter-spacing: 2px;
text-transform: uppercase;
border-bottom: 1px solid #BDBCBB;
padding: 0 10px 3px 25px;
margin: 0 -10px 10px -10px;
}

#actor-galleryfilter .cell.item-active h3 {
color: #C0087F;
}

#actor-galleryfilter .filter-option-all {
text-transform: uppercase;
}

/* --- Filter sections: General option treatment */
#actor-galleryfilter .filter-option {
position: relative;
overflow: hidden;
margin: 0 -10px 0 -10px;
padding: 0 10px 0 10px;
}

/* Sliding bar for active filters */
#actor-galleryfilter .filter-option:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
padding: 0 10px 0 10px;
background: #EFEFEF;
top: 0;
right: 100%;
-webkit-transition: right 2s ease;
-moz-transition: right 2s ease;
-ms-transition: right 2s ease;
transition: right 2s ease;
}

#actor-galleryfilter .filter-option.item-active:before {
right: -10px;
-webkit-transition: right 2s ease;
-moz-transition: right 2s ease;
-ms-transition: right 2s ease;
transition: right 2s ease;
}

/* Filter entry */
#actor-galleryfilter .action-filter {
position: relative;
display: block;
text-decoration: none;
color: #4D5855;
padding: 3px 0 3px 15px;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-galleryfilter .filter-option .action-filter:hover, 
#actor-galleryfilter .filter-option.item-active .action-filter {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* Bullet point */
#actor-galleryfilter .action-filter:before {
background: #E9E9EA;
content: "";
display: block;
position: absolute;
top: 0.6em;
left: 2px;
height: 7px;
width: 7px;
border-radius: 50%;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}

#actor-galleryfilter .filter-option .action-filter:hover:before, 
#actor-galleryfilter .filter-option.item-active .action-filter:before {
background: #BDBCBB;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

/* Keyword counters */
#actor-galleryfilter .filter-option .keyword-count {
font-size: 80%;
}

#actor-galleryfilter .filter-option .keyword-count:before {
content: " [";
}

#actor-galleryfilter .filter-option .keyword-count:after {
content: "]";
}

/* --- Filter sections: Color swatches */
/* Assumes class "filter-[color]" to be used from keyword tagging of images! */
#actor-galleryfilter .color-array {
display: inline-block;
}

#actor-galleryfilter .color-swatch {
border: 1px solid #D5D6D6;
display: inline-block;
height: 17px;
width: 17px;
overflow: hidden;
text-indent: -1000em;
-webkit-transition: border 1s ease;
-moz-transition: border 1s ease;
-ms-transition: border 1s ease;
transition: border 1s ease;
}

#actor-galleryfilter .color-swatch + .color-swatch {
margin-left: -1px;
}

#actor-galleryfilter .filter-color .item-active {
padding-bottom: 0;
}

#actor-galleryfilter .filter-color .item-active .color-array {
padding-bottom: 3px;
border-bottom: 1px solid #C0087F;
}

#actor-galleryfilter .filter-color .action-filter:hover .color-swatch, 
#actor-galleryfilter .filter-color .item-active .color-swatch {
border-color: #C0087F;
-webkit-transition: border 0.5s ease;
-moz-transition: border 0.5s ease;
-ms-transition: border 0.5s ease;
transition: border 0.5s ease;
}

/* !-------------------------------------------- */
/* !ACTOR: Business card */
/* !-------------------------------------------- */

/* --- Inner layout */
#actor-bizcard {
    background: #68736f url("img/background_bizcard.jpg") center 0 no-repeat;
background-size: auto 125px; /* we expect 125px height for #actor-bizcard to be set by stage */
color: #fff;
font-size: 90%;
}

#actor-bizcard .cell {
float: left;
}

#actor-bizcard .bizcard-partners, 
#actor-bizcard .bizcard-brands, 
#actor-bizcard .bizcard-legal {
width: 25%;
}

#actor-bizcard .bizcard-social {
width: 25%;
position: relative;
padding: 0 40px 0 40px;
}

#actor-bizcard .bizcard-contact {
width: 20%;
}

#actor-bizcard .bizcard-publictransport {
width: 16%;
}

#actor-bizcard .bizcard-hours {
float: right;
width: auto;
}

#actor-bizcard .actor-body:after {
content: "";
display: block;
clear: left;
}

/* --- Visibility of stage-dependent content */
#actor-bizcard .bizcard-brands, 
#actor-bizcard .bizcard-partners, 
#actor-bizcard .bizcard-legal {
display: none;
}

body.stage-boutique #actor-bizcard .bizcard-brands, 
body.stage-interior #actor-bizcard .bizcard-partners, 
body.stage-about #actor-bizcard .bizcard-legal {
display: block;
}

/* --- Carried brands */
/* --- ONLY VISIBLE IN SOME STAGES! */
#actor-bizcard .bizcard-partners .atom {
float: left;
}

#actor-bizcard .bizcard-partners .atom:after {
content: ":";
display: inline-block;
margin: 0 0.1em 0 0.1em;
}

#actor-bizcard .bizcard-partners .atom:last-child:after {
display: none;
}

/* --- Carried brands */
/* --- ONLY VISIBLE IN SOME STAGES! */
#actor-bizcard .bizcard-brands .atom {
float: left;
}

#actor-bizcard .bizcard-brands .atom:after {
content: ":";
display: inline-block;
margin: 0 0.1em 0 0.1em;
}

#actor-bizcard .bizcard-brands .atom:last-child:after {
display: none;
}

/* --- Legal information */
/* --- ONLY VISIBLE IN SOME STAGES! */
#actor-bizcard .bizcard-legal .action-outlink {
display: block;
color: #fff;
text-decoration: none;
margin-bottom: 1em;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-bizcard .bizcard-legal .action-outlink:hover {
color: #b2c1bb;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* --- Social networks */
#actor-bizcard .bizcard-social h4 {
display: none;
}

#actor-bizcard .bizcard-social .action-outlink {
display: block;
float: left;
    background: transparent url("img/sprite_buttons.svg") 0 -2px no-repeat;
background-size: 33.93px 2152.39px;
margin: 0 10px 10px 0;
height: 34px;
width: 34px;
border-radius: 50%;
text-indent: -1000em;
overflow: hidden;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#actor-bizcard .bizcard-social .action-outlink:hover {
box-shadow: 0 0 20px rgba(192,8,127,0.5);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

#actor-bizcard .bizcard-social .outlink-type-twitter {
background-position: 0 -1277px;
}

#actor-bizcard .bizcard-social .outlink-type-instagram {
background-position: 0 -1378px;
}

#actor-bizcard .bizcard-social .outlink-type-facebook {
background-position: 0 -2px;
}

#actor-bizcard .bizcard-social .outlink-type-rss {
background-position: 0 -1507px;
}

#actor-bizcard .bizcard-social .outlink-type-houzz {
background-position: 0 -1631px;
}

#actor-bizcard .bizcard-social .outlink-type-pinterest {
background-position: 0 -86px;
}

/* --- Basic contact information */
#actor-bizcard .bizcard-contact h4 {
display: none;
}

#actor-bizcard .bizcard-contact p[itemprop="name"], 
#actor-bizcard .bizcard-contact span[itemprop="postalCode"] {
display: none;
}

#actor-bizcard .bizcard-contact div[itemprop="communication"] {
margin-top: 1em;
}

/* German visitors see house location, other visitors see the country */
#actor-bizcard .bizcard-contact p[itemprop="addressCountry"], 
#actor-bizcard .bizcard-contact p[itemprop="addressCountry"] + p {
font-weight: bold;
}

#actor-bizcard .bizcard-contact p[itemprop="addressCountry"] + p {
display: none;
}

html[lang^="de"] #actor-bizcard .bizcard-contact p[itemprop="addressCountry"] {
display: none;
}

html[lang^="de"] #actor-bizcard .bizcard-contact p[itemprop="addressCountry"] + p {
display: block;
}

/* Phone number (suppress iOS highlighting) */
#actor-bizcard [itemprop="telephone"] a[href^=tel] {
color: inherit;
text-decoration: none;
}

/* Email button */
#actor-bizcard .action-email {
color: #fff;
font-weight: bold;
display: block;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#actor-bizcard .action-email:hover {
color: #b2c1bb;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* --- Public transport */
#actor-bizcard .bizcard-publictransport h4 {
display: none;
}

#actor-bizcard .bizcard-publictransport dt {
font-weight: bold;
}

#actor-bizcard .bizcard-publictransport .publictransport-bus {
margin-top: 1em;
}

/* --- Opening hours */
#actor-bizcard .bizcard-hours h4 {
display: none;
}

#actor-bizcard .bizcard-hours dt {
font-weight: bold;
}

#actor-bizcard .bizcard-hours dd + dt {
margin-top: 1em;
}

/* !======================================================================================== */
/* !SUBSTANCE DEFINITIONS: Shared elements across stages */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !Color swatches */
/* !-------------------------------------------- */

/* filtering.color.blue.label */
.swatch-hue-Blue {background: #0068B2;}
.swatch-hue-Turquoise {background: #71D6CB;}
.swatch-hue-Petrol {background: #009D72;}
.swatch-hue-Green {background: #5ABC49;}

/* filtering.color.brown.label */
.swatch-hue-Brown {background: #73311B;}
.swatch-hue-Gold {background: #eb893b;}
.swatch-hue-Bronze {background: #BF8011;}
.swatch-hue-Copper {background: #A2692C;}

/* filtering.color.colorful.label */
.swatch-hue-colorful {
background: linear-gradient(36deg, #272b66 42.34%, transparent 42.34%) 0 0,
linear-gradient(72deg, #2d559f 75.48%, transparent 75.48%) 0 0,
linear-gradient(-36deg, #9ac147 42.34%, transparent 42.34%) 100% 0,
linear-gradient(-72deg, #639b47 75.48%, transparent 75.48%) 100% 0, 
linear-gradient(36deg, transparent 57.66%, #e1e23b 57.66%) 100% 100%,
linear-gradient(72deg, transparent 24.52%, #f7941e 24.52%) 100% 100%,
linear-gradient(-36deg, transparent 57.66%, #662a6c 57.66%) 0 100%,
linear-gradient(-72deg, transparent 24.52%, #9a1d34 24.52%) 0 100%, 
#43a1cd linear-gradient(#ba3e2e, #ba3e2e) 50% 100%;
background-repeat: no-repeat;
background-size: 50% 50%;
}

/* filtering.color.pink.label */
.swatch-hue-Pink {background: #BC3494;}
.swatch-hue-Purple {background: #624F81;}

/* filtering.color.red.label */
.swatch-hue-Red {background: #BB272D;}
.swatch-hue-Orange {background: #EB5A24;}
.swatch-hue-Yellow {background: #F6E821;}

/* filtering.color.white.label */
.swatch-hue-White {background: #fff;}
.swatch-hue-Beige {background: #fddfb2;}
.swatch-hue-Grey {background: #A8A8A8;}
.swatch-hue-Silver {background: #D5D6D6;}
.swatch-hue-Black {background: #000;}


/* !-------------------------------------------- */
/* !Custom project styling */
/* !-------------------------------------------- */

#actor-project.project-id-yaz-flagship {

}

#actor-project.project-id-yaz-hq {

}

#actor-project.project-id-family-mansion {

}

#actor-project.project-id-wilhelm-mansion {

}

#actor-project.project-id-mittermeier {

}

#actor-project.project-id-fashion-store {

}