/*
Theme Name: weltgestaltung
Author: iuno.co
Version: 22.4
*/

:root                                                                       {   --black: rgba(0,0,0,1);
                                                                                --black-10: rgba(0,0,0,0.1);
                                                                                --black-50: rgba(0,0,0,0.5);
                                                                                --black-0: rgba(0,0,0,0);
                                                                                --white: rgba(255,255,255,1);
                                                                                --white-0: rgba(255,255,255,0);
                                                                                --white-80: rgba(255,255,255,.8);
                                                                                --white-90: rgba(255,255,255,.9);
                                                                                --pink: rgba(255,11,235,1); }

::-moz-selection                                                            {   background-color: transparent; color: var(--pink); }
::selection                                                                 {   background-color: transparent; color: var(--pink); }

@font-face                                                                  {   font-family: "diatype"; font-display: swap; font-style: normal; font-weight: 400;
                                                                                src: url('webfonts/ABCDiatype-Regular.woff2') format('woff2'),
                                                                                     url('webfonts/ABCDiatype-Regular.woff') format('woff'); }
@font-face                                                                  {   font-family: "diatype"; font-display: swap; font-style: normal; font-weight: 500;
                                                                                src: url('webfonts/ABCDiatype-Medium.woff2') format('woff2'),
                                                                                     url('webfonts/ABCDiatype-Medium.woff') format('woff'); }
@font-face                                                                  {   font-family: "diatype"; font-display: swap; font-style: normal; font-weight: 700;
                                                                                src: url('webfonts/ABCDiatype-Bold.woff2') format('woff2'),
                                                                                     url('webfonts/ABCDiatype-Bold.woff') format('woff'); }

@font-face                                                                  {   font-family: "diatype"; font-display: swap; font-style: italic; font-weight: 400;
                                                                                src: url('webfonts/ABCDiatype-RegularItalic.woff2') format('woff2'),
                                                                                     url('webfonts/ABCDiatype-RegularItalic.woff') format('woff'); }
@font-face                                                                  {   font-family: "diatype"; font-display: swap; font-style: italic; font-weight: 500;
                                                                                src: url('webfonts/ABCDiatype-MediumItalic.woff2') format('woff2'),
                                                                                     url('webfonts/ABCDiatype-MediumItalic.woff') format('woff'); }
@font-face                                                                  {   font-family: "diatype"; font-display: swap; font-style: italic; font-weight: 700;
                                                                                src: url('webfonts/ABCDiatype-BoldItalic.woff2') format('woff2'),
                                                                                     url('webfonts/ABCDiatype-BoldItalic.woff') format('woff'); }


*                                                                           {   margin: 0; padding: 0; outline: none;
                                                                                font-family: "diatype", sans-serif; font-style: normal;
                                                                                -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
                                                                                -webkit-text-size-adjust: 100%;
                                                                                -webkit-appearance: none; }
html                                                                        {   /*overflow: hidden; height: 100%;*/ }
body                                                                        {   overflow-y: auto; overflow-x: hidden; height: 100%; background-color: var(--white); color: var(--black); font-size: 1.2rem }

a:link, a:visited                                                           {   color: var(--black); text-decoration: none; }
a:hover, a:focus                                                            {   color: var(--pink); text-decoration: none; }

main p a                                                                    {   text-decoration: underline !important; }

/* HEADER
-------------------------------------------------------------------------------- */
    header                                                                  {   position: absolute; top: 0; left: 0; z-index: 500; width: 100%; background-color: var(--white);
                                                                                height: 6rem; transition: all .1s ease-in-out; }
    header .logo                                                            {   position: relative; height: 2.5rem; top: 2.25rem; }

@media all and (min-width: 1200px) {
    header                                                                  {   transform: translateY(-6rem); }
}

    .logo                                                                   {   font-family: verveine; font-size: 2.3rem; line-height: 1; margin: 0 0 1rem 0; padding: 0 1rem 0 1rem; text-transform: uppercase; }
    header .logo                                                            {   font-family: verveine; font-size: 1.8rem; line-height: 2.4rem; margin: 0 0 1rem 0; padding: 0 1rem 0 1rem; text-transform: uppercase; }
    h1, .h1                                                                 {   font-family: verveine; font-size: 6rem; line-height: 1; margin: 0; padding: 0 1rem 0 1rem; text-transform: uppercase; position: relative; }
    h2, .h2                                                                 {   font-family: verveine; font-size: 2.3rem; line-height: 1; margin: 0 0 1rem 0; padding: 0 1rem 0 1rem; text-transform: uppercase; position: relative; }
    h3, .h3                                                                 {   font-family: verveine; font-size: 1.8rem; line-height: 1; margin: 0; padding: 0 1rem 0 1rem; text-transform: uppercase; position: relative; }
    h1 span, .h1 span, h2 span, .h2 span, h2 a                              {   font-family: verveine; }

/*    a h2::after                                                             {   content: ''; position: absolute; bottom: 50%; right: 100%; left: -2rem; top: 50%; width: auto; height: auto; background-color: rgba(255, 11, 235, 1); opacity: 0; transition: all .2s ease-in-out; transform: rotate(2deg); border-radius: 41% 70% 34% 85% / 80% 57% 34% 35%; } */
/*    a h2::before                                                            {   content: ''; position: absolute; bottom: -1.2rem; right: -2rem; left: -2rem; top: -1.3rem; width: auto; height: auto; border: 0 rgba(255, 11, 235, 1) solid; transition: all .3s ease-in-out; border-radius: 68% 54% 55% 65% / 70% 62% 52% 43% ; } */
    a:hover                                                                 {   color: var(--pink); }
/*    a:hover h2::after                                                       {   bottom: -0.8rem; right: -1.8rem; left: -1.8rem; top: -0.8rem; opacity: 1; }*/
/*    a:hover h2::before                                                      {   border-width: 0.5rem; } */
    a h2 span                                                               {   position: relative; z-index: +1; }

/* NAVIGATION
-------------------------------------------------------------------------------- */

    #side-navigation-show                                                   {   position: relative; width: 2rem; margin: 2.4rem 0 0 1rem; padding: .375rem 0; z-index: +1; }
    #side-navigation-show span                                              {   position: relative; display: block; float: right; width: 2rem; height: 0.67rem; transition: all .1s ease-in-out;
                                                                                border-width: 3px 0 0 0; border-style: solid; }

    #side-navigation-hide                                                   {   position: absolute; width: 2rem; margin: 2.5rem 0 0 1rem; padding: .375rem 0; z-index: +1; }
    #side-navigation-hide span                                              {   position: absolute; top: 0.65rem; display: block; width: 2rem; height: 2rem; transition: all .1s ease-in-out;
                                                                                border-width: 3px 0 0 0; border-style: solid; }
    #side-navigation-hide span:first-of-type                                {   transform-origin: center center; transform: rotate(45deg);}
    #side-navigation-hide span:last-of-type                                 {   transform-origin: center center; transform: rotate(-45deg); left: 1.25rem; }


    #side-navigation-show span                                              {   border-color: var(--black); }
    #side-navigation-show:hover span                                        {   border-color: var(--pink); }

    #side-navigation-hide span                                              {   border-color: var(--black); }
    #side-navigation-hide:hover span                                        {   border-color: var(--pink); }



    #side-navigation-hide                                                   {   display: block; }

    #side-navigation                                                        {   position: fixed; display: block; width: 20vw; top: 0; height: 100%; left: 0; z-index: 1000;
                                                                                transform: translateX(0); background-color: var(--white); transition: all .1s ease-in-out; }
    #side-navigation.show                                                   {   transform: translateX(0); }
    #side-navigation .flex-menu                                             {   height: 100%; }

    #side-navigation ul                                                     {   list-style: none outside none; padding: 1rem; }
    #side-navigation ul li                                                  {   display: block; position: relative; }
    #side-navigation ul li a                                                {   display: block; text-transform: uppercase; }
    #side-navigation ul li.highlight a                                      {   font-weight: bold; color: var(--pink); }
    #side-navigation ul li.current_page_item a                              {   font-weight: bold; }



    #side-navigation ul#menu-main li:nth-of-type(1).current-page-ancestor::after,
    #side-navigation ul#menu-main li:nth-of-type(1).current-menu-item::after    {   content: ""; position: absolute; top: -0.6rem; left: -1.5rem; width: 9.5rem; height: 4rem; display: block; z-index: -1;
                                                                                background-image: url('img/wg-marker-1.svg'); background-size: 100% auto; background-repeat: no-repeat; }
    #side-navigation ul#menu-main li:nth-of-type(2).current-page-ancestor::after,
    #side-navigation ul#menu-main li:nth-of-type(2).current-menu-item::after    {   content: ""; position: absolute; top: -1rem; left: -3.5rem; width: 14rem; height: 4rem; display: block; z-index: -1;
                                                                                background-image: url('img/wg-marker-2.svg'); background-size: 100% auto; background-repeat: no-repeat; }
    #side-navigation ul#menu-main li:nth-of-type(3).current-page-ancestor::after,
    #side-navigation ul#menu-main li:nth-of-type(3).current-menu-item::after    {   content: ""; position: absolute; top: -0.7rem; left: -2rem; width: 11rem; height: 3.5rem; display: block; z-index: -1;
                                                                                background-image: url('img/wg-marker-3.svg'); background-size: 100% auto; background-repeat: no-repeat; }
    #side-navigation ul#menu-main li:nth-of-type(4).current-page-ancestor::after,
    #side-navigation ul#menu-main li:nth-of-type(4).current-menu-item::after    {   content: ""; position: absolute; top: -0.5rem; left: -1.5rem; width: 10rem; height: 4rem; display: inline-block; z-index: -1;
                                                                                background-image: url('img/wg-marker-4.svg'); background-size: 100% auto; background-repeat: no-repeat; }

    #side-navigation ul#menu-imprint li:nth-of-type(1).current-menu-item::after    {   content: ""; position: absolute; top: -0.65rem; left: 4.5rem; width: 2rem; height: 2rem; display: inline-block; z-index: -1;
                                                                                background-image: url('img/wg-cross-1.svg'); background-size: 100% auto; background-repeat: no-repeat; }
    #side-navigation ul#menu-imprint li:nth-of-type(2).current-menu-item::after    {   content: ""; position: absolute; top: -0.2rem; left: 5.5rem; width: 2rem; height: 2rem; display: inline-block; z-index: -1;
                                                                                background-image: url('img/wg-cross-2.svg'); background-size: 100% auto; background-repeat: no-repeat; }
    #side-navigation ul#menu-imprint li:nth-of-type(3).current-menu-item::after    {   content: ""; position: absolute; top: -0.5rem; left: 6.5rem; width: 2rem; height: 2rem; display: inline-block; z-index: -1;
                                                                                background-image: url('img/wg-cross-3.svg'); background-size: 100% auto; background-repeat: no-repeat; }


    #side-navigation a.logo                                                 {   position: relative; }
    #side-navigation .logo::after                                           {   content: ""; position: absolute; top: -2.5rem; left: 10rem; width: 4rem; height: 4rem; display: none; z-index: -1;
                                                                                background-image: url('img/sonne.png'); background-size: 100% 100%; background-repeat: no-repeat; }


@media all and (min-width: 1200px) {
    #side-navigation-hide                                                   {   display: none; }
}

@media all and (min-width: 992px) and (max-width: 1200px) {
    #side-navigation                                                        {   width: 50vw; transform: translateX(-50vw); }
}

@media all and (max-width: 992px) {
    #side-navigation                                                        {   width: 100vw; transform: translateX(-100vw); }
}



/* BEHAVIOR
-------------------------------------------------------------------------------- */
    #scene                                                                  {   position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 1; overflow: hidden; display: block; opacity: 0;
                                                                                -webkit-transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                -moz-transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                -ms-transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                -o-transition: opacity 150ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                transition: opacity 1500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); }
    #scene-overlay                                                          {   position: fixed; top: 0; left: 0; width: 20vw; height: 100vh; margin: 0; padding: 0; z-index: 600; opacity: 1; background-color: var(--white);
                                                                                transition: all .1s ease-in-out; }
    #scene-overlay.show                                                     {   width: 100vw; opacity: 1; visibility: visible; }

    .wg-underlay                                                            {   position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; }

    .filter-yellow                                                          {   background: rgb(34,193,195); background: linear-gradient(90deg, rgba(237, 215, 100, 0.6) 0%, rgba(100, 100, 100, 0.3) 100%); mix-blend-mode: plus-lighter; }
    .filter-red                                                             {   background: rgb(34,193,195); background: linear-gradient(90deg, rgba(237, 100, 100, 0.6) 0%, rgba(100, 100, 100, 0.3) 100%); mix-blend-mode: plus-lighter; }
    .filter-green                                                           {   background: rgb(255,249,215); background: linear-gradient(90deg, rgba(49, 114, 10, 0.6) 0%, rgba(100, 100, 100, 0.3) 100%); mix-blend-mode: plus-lighter; }
    .filter-blue                                                            {   background: rgb(131,58,180); background: linear-gradient(90deg, rgba(100, 149, 237, 0.6) 0%, rgba(100, 100, 100, 0.3) 100%); mix-blend-mode: plus-lighter; }
    .filter-white                                                           {   background: rgb(255,249,215); background: linear-gradient(25deg, rgb(105,223,87) 0%, rgb(105,223,87) 50%, rgb(252,176,69) 100%); mix-blend-mode: hard-light; filter: grayscale(); }
    .filter-erik                                                            {   background: rgb(255,20,147); background: linear-gradient(90deg, rgba(255,20,147, 1) 0%, rgba(255,180,0, 1) 100%); mix-blend-mode: multiply; }

    #wg-content .kt-inside-inner-col                                        {   max-width: 800px; }
    #wg-content h1                                                          {   padding: 0 0 3rem 0; }
    #wg-content h2                                                          {   padding: 0; }
    #wg-hero                                                                {   border-left: 0.5rem var(--white) solid; border-right: 0.5rem var(--white) solid; border-bottom: 0.5rem var(--white) solid; }
    #wg-hero h1                                                             {   padding: 3rem 1.5rem 0 0; }
    #wg-hero p                                                              {   font-weight: bold; padding: 2rem 1.5rem 0 0; max-width: 900px; }

    #wg-galerie                                                             {    }

    main                                                                    {   position: relative; display: block; left: 20vw; width: 80vw; top: 0; margin-top: 0; height: auto; min-height: 100%; z-index: 100; }
    .col-wg                                                                 {   height: 100vh; border: 0 white solid; padding: 0; }
    .col-wg a                                                               {   height: 100vh; width: 100%; overflow: hidden; display: block; }
    .col-wg a h2                                                            {   margin: 0; padding: 0; }
    .col-wg a:hover                                                         {   color: rgba(255,11,235,1); background-color: rgba(255,11,235,0); }
    .col-wg a:hover span                                                    {   font-size: 20rem; line-height: 0.8; /*word-break: break-all;*/ margin: -3rem; width: calc(100% + 6rem); height: calc(100% + 6rem); display: block; position: relative; }

    .col-project                                                            {   height: calc(100vh / 3); min-height: 20rem; border: 0.5rem var(--white) solid; background-color: var(--white-0);
                                                                                -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                -ms-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
                                                                                transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); }
    .col-detail                                                             {   height: 30rem; border: 0.5rem white solid; }
    .col-manifest                                                           {   min-height: 100vh; border: 0.5rem white solid; }

    a.col-project                                                           {   width: 100%; overflow: hidden; display: block; }
    a.col-project h2                                                        {   margin: 0; padding: 0; width: 100%; text-align: center; }
    a.col-project:hover                                                     {   background-color: rgba(255,11,235,0); }
    a.col-project:hover span                                                {   color: rgba(255,11,235,1); font-size: 10rem; line-height: 0.8; /*word-break: break-all;*/ margin: -3rem; width: calc(100% + 6rem); height: calc(100% + 6rem); display: block; position: relative; }

    .contact a.col-project:hover span                                       {   font-size: inherit; line-height: 1; margin: inherit; width: inherit; height: inherit; }



    div.col-person                                                          {   position: relative; height: calc(100vh / 3); min-height: 30rem; border: 0.5rem var(--white) solid; width: 100%; overflow: hidden; display: block; background-size: cover; background-position: center;
                                                                                perspective: 500px; }
    .first a.col-person                                                     {   min-height: 30rem; }
    div.col-person .image                                                   {   positon: relative; height: 100%; width: 100%; text-align: center; }
    div.col-person h2                                                       {   margin: 0; padding: 1rem; width: 100%; text-align: left; }
    div.col-person h2 span.name                                             {   position: relative; display: block; color: var(--pink); font-size: 3rem; z-index: +2; margin-bottom: -1.5rem; }
    div.col-person h2 span.sub                                              {   position: relative; width: auto; display: inline-block; padding: 0.3rem 0.75rem;
                                                                                font-family: "diatype", sans-serif; font-size: 1rem; line-height: 1; background-color: var(--black); color: var(--white); text-transform: none; }
    div.col-person .info                                                    {   transform: rotateX(90deg); opacity: 0; position: absolute; top: 0; left: 0; padding: 1rem; background-color: var(--black-50); color: var(--white); height: 100%; width: 100%; z-index:10; overflow: auto; transition: transform 250ms; transform-style: preserve-3d; }
    div.col-person:hover .info                                              {   transform: rotateX(0deg); opacity: 1; }


    figure.wp-block-image                                                   {   position: relative; margin: 0; }
	figure.wp-block-image img                                               {   width: 100%; height: auto; }
    figure.wp-block-image figcaption                                        {   position: absolute; bottom: 1rem; left: 1rem; max-width: calc(100% - 2rem); width: auto; margin: 0; padding: 0.3rem 0.5rem;
                                                                                background-color: var(--black); color: var(--white); font-size: 0.8rem; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    main figure.wp-block-image figcaption a                                 {   color: var(--white) !important; }

    figure.wp-block-video                                                   {   position: relative; margin: 0; border: 1px var(--black-10) solid; }
    figure.wp-block-video video                                             {   display: block; }
    figure.wp-block-video figcaption                                        {   position: absolute; bottom: 1rem; left: 1rem; max-width: calc(100% - 2rem); width: auto; margin: 0; padding: 0.3rem 0.5rem;
                                                                                background-color: var(--black); color: var(--white); font-size: 0.8rem; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    figure.wp-block-video figcaption a                                      {   color: var(--white); text-decoration: underline; }

    figure.kb-gallery-figure                                                {   position: relative; margin: 0; }
    main figure.kb-gallery-figure figcaption                                {   position: absolute !important; bottom: 1rem !important; left: 1rem; max-width: calc(100% - 2rem); width: auto !important; margin: 0; padding: 0.3rem 0.5rem !important;
                                                                                background-color: var(--black) !important; color: var(--white) !important; font-size: 0.8rem !important; line-height: 1 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: +10; }
    main figure.kb-gallery-figure figcaption a                              {   color: var(--white) !important; }


    .kt-blocks-carousel .slick-prev::before                                  {   border-width: 0 !important; content: '‹'; transform: rotate(0) !important;
                                                                                position: relative; display: inline-block; top: 0px; left: 0px; width: 30px; height: 50px;
                                                                                line-height: 46px; font-size: 50px; font-family: verveine; }
    .kt-blocks-carousel .slick-prev svg                                     {   display: none; }
    .kt-blocks-carousel .slick-prev:hover::before                           {   color: var(--pink); }
    .kt-blocks-carousel .slick-next::before                                 {   border-width: 0 !important; content: '›'; transform: rotate(0) !important;
                                                                                position: relative; display: inline-block; top: 0px; left: 0px; width: 30px; height: 50px;
                                                                                line-height: 46px; font-size: 50px; font-family: verveine; }
    .kt-blocks-carousel .slick-next svg                                     {   display: none; }
    .kt-blocks-carousel .slick-next:hover::before                           {   color: var(--pink); }

    .kt-blocks-carousel .kt-carousel-arrowstyle-blackonlight button.slick-prev::before {   content: ''; height: 40px; width: 40px; background-image: url('img/iuno-left-1.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-blackonlight button.slick-prev,
    .kt-blocks-carousel .kt-carousel-arrowstyle-blackonlight button.slick-prev:hover {   opacity: 1 !important; left: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: left; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-blackonlight button.slick-next::before {   content: ''; height: 40px; width: 31px; background-image: url('img/iuno-right-1.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-blackonlight button.slick-next,
    .kt-blocks-carousel .kt-carousel-arrowstyle-blackonlight button.slick-next:hover {   opacity: 1 !important; right: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: right; }

    .kt-blocks-carousel .kt-carousel-arrowstyle-whiteondark button.slick-prev::before {   content: ''; height: 40px; width: 40px; background-image: url('img/iuno-left-2.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-whiteondark button.slick-prev,
    .kt-blocks-carousel .kt-carousel-arrowstyle-whiteondark button.slick-prev:hover {   opacity: 1 !important; left: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: left; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-whiteondark button.slick-next::before {   content: ''; height: 40px; width: 34px; background-image: url('img/iuno-right-2.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-whiteondark button.slick-next,
    .kt-blocks-carousel .kt-carousel-arrowstyle-whiteondark button.slick-next:hover {   opacity: 1 !important; right: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: right; }

    .kt-blocks-carousel .kt-carousel-arrowstyle-outlineblack button.slick-prev::before {   content: ''; height: 40px; width: 40px; background-image: url('img/iuno-left-3.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlineblack button.slick-prev,
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlineblack button.slick-prev:hover {   opacity: 1 !important; left: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: left; border: 0 !important; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlineblack button.slick-next::before {   content: ''; height: 40px; width: 31px; background-image: url('img/iuno-right-3.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlineblack button.slick-next,
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlineblack button.slick-next:hover {   opacity: 1 !important; right: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: right; border: 0 !important; }

    .kt-blocks-carousel .kt-carousel-arrowstyle-outlinewhite button.slick-prev::before {   content: ''; height: 40px; width: 40px; background-image: url('img/iuno-left-4.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlinewhite button.slick-prev,
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlinewhite button.slick-prev:hover {   opacity: 1 !important; left: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: left; border: 0 !important; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlinewhite button.slick-next::before {   content: ''; height: 40px; width: 29px; background-image: url('img/iuno-right-4.svg'); background-size: auto 100%; background-repeat: no-repeat; }
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlinewhite button.slick-next,
    .kt-blocks-carousel .kt-carousel-arrowstyle-outlinewhite button.slick-next:hover {   opacity: 1 !important; right: 1rem !important; height: 40px; width: 40px; background-color: rgba(0,0,0,0) !important; text-align: right; border: 0 !important; }


@media all and (max-width: 1200px) {
    #scene-overlay                                                          {   width: 0; }
    main                                                                    {   left: 0; width: 100vw; margin-top: 6rem; }
    .col-wg                                                                 {   height: calc(100vh - 6rem); }
}
@media all and (max-width: 992px) {
    .col-wg                                                                 {   height: calc((100vh - 6rem) / 2); }
}
@media all and (max-width: 768px) {
    .col-wg                                                                 {   height: calc((100vh - 6rem) / 4); }
    .home a.col-project                                                     {   height: calc((100vh - 6rem) / 4); min-height: calc((100vh - 6rem) / 4); }
}
@media all and (max-width: 576px) {
    main                                                                    {   border-bottom: 0rem var(--white) solid; }
}

/* PORTFOLIO
-------------------------------------------------------------------------------- */
.portfolio-filter															{	 }
.filter																		{	color: var(--black); margin: 0 1rem 1rem 0; padding: 0; background-color: transparent; border: 0;
																				font-family: verveine, sans-serif; font-style: normal; font-size: 1.5rem; line-height: 1; text-transform: uppercase; }
.alle .filter[rel="wg-alle"],
.wg-kunst-am-bau .filter[rel="wg-kunst-am-bau"],
.wg-buehnenbild .filter[rel="wg-buehnenbild"],
.wg-raumgestaltung .filter[rel="wg-raumgestaltung"],
.wg-installation .filter[rel="wg-installation"],
.wg-grafik .filter[rel="wg-grafik"],
.wg-web-und-interface .filter[rel="wg-web-und-interface"],
.wg-text .filter[rel="wg-text"],
.wg-foto-video .filter[rel="wg-foto-video"],
.wg-social-media .filter[rel="wg-social-media"],
.wg-illustration .filter[rel="wg-illustration"],
.wg-visualisierung .filter[rel="wg-visualisierung"]							{	color: var(--pink); }



.is-style-wg-kunst-am-bau,
.is-style-wg-buehnenbild,
.is-style-wg-raumgestaltung,
.is-style-wg-installation,
.is-style-wg-grafik,
.is-style-wg-web-und-interface,
.is-style-wg-text,
.is-style-wg-foto-video,
.is-style-wg-social-media,
.is-style-wg-illustration,
.is-style-wg-visualisierung													{	display: none; }

.alle .is-style-wg-kunst-am-bau,
.alle .is-style-wg-buehnenbild,
.alle .is-style-wg-raumgestaltung,
.alle .is-style-wg-installation,
.alle .is-style-wg-grafik,
.alle .is-style-wg-web-und-interface,
.alle .is-style-wg-text,
.alle .is-style-wg-foto-video,
.alle .is-style-wg-social-media,
.alle .is-style-wg-illustration,
.alle .is-style-wg-visualisierung											{	display: block; }

.wg-kunst-am-bau .is-style-wg-kunst-am-bau,
.wg-buehnenbild .is-style-wg-buehnenbild,
.wg-raumgestaltung .is-style-wg-raumgestaltung,
.wg-installation .is-style-wg-installation,
.wg-grafik .is-style-wg-grafik,
.wg-web-und-interface .is-style-wg-web-und-interface,
.wg-text .is-style-wg-text,
.wg-foto-video .is-style-wg-foto-video,
.wg-social-media .is-style-wg-social-media,
.wg-illustration .is-style-wg-illustration,
.wg-visualisierung .is-style-wg-visualisierung								{	display: block; }



/* ARBEITSWEISE
-------------------------------------------------------------------------------- */
#bfw-arbeitsweise p a                                                       {   text-decoration: none !important; display: inline-block; position: relative; }
#bfw-arbeitsweise p a::selection                                            {   color: var(--white); }

#bfw-arbeitsweise p a.link-1::after                                         {   content: ''; position: absolute; z-index: -1; top: auto; left: -0.5rem; bottom: -0.25rem; right: -1rem; width: auto; height: 0.5rem;
                                                                                background: url('img/wg-marker-pink-1.svg'); background-size: 100% 100%; background-position: center center; }
#bfw-arbeitsweise p a.link-2::after                                         {   content: ''; position: absolute; z-index: -1; top: auto; left: 0rem; bottom: -0.25rem; right: -0.5rem; width: auto; height: 0.5rem;
                                                                                background: url('img/wg-marker-pink-2.svg'); background-size: 100% 100%; background-position: center center; }
#bfw-arbeitsweise p a.link-3::after                                         {   content: ''; position: absolute; z-index: -1; top: auto; left: -1rem; bottom: -0.25rem; right: 0rem; width: auto; height: 0.5rem;
                                                                                background: url('img/wg-marker-pink-3.svg'); background-size: 100% 100%; background-position: center center; }
#bfw-arbeitsweise p a.link-4::after                                         {   content: ''; position: absolute; z-index: -1; top: auto; left: -1rem; bottom: -0.25rem; right: -1rem; width: auto; height: 0.5rem;
                                                                                background: url('img/wg-marker-pink-4.svg'); background-size: 100% 100%; background-position: center center; }

#bfw-arbeitsweise .tooltip-verveine                                         {   font-family: verveine; font-size: 1.7rem; line-height: 1; color: var(--pink); white-space: nowrap; }

#bfw-arbeitsweise .tooltip-marker-1                                         {   position: relative; white-space: nowrap; font-weight: 400; }
#bfw-arbeitsweise .tooltip-marker-1::after                                  {   content: ''; position: absolute; z-index: -1; top: -1.5rem; left: -1rem; bottom: -1rem; right: -1rem; width: auto; height: auto;
                                                                                background: url('img/wp-marker-pink-4.svg'); background-size: 100% 100%; background-position: center center; transform: rotate(-2deg); }

#bfw-arbeitsweise .tooltip-marker-2                                         {   position: relative; white-space: nowrap; font-weight: 400; }
#bfw-arbeitsweise .tooltip-marker-2::after                                  {   content: ''; position: absolute; z-index: -1; top: -0.5rem; left: -1rem; bottom: -0.5rem; right: -1rem; width: auto; height: auto;
                                                                                background: url('img/wp-marker-pink-2.svg'); background-size: 100% 100%; background-position: center center; }
#bfw-arbeitsweise .tooltip-marker-3                                         {   position: relative; white-space: nowrap; font-weight: 400; }
#bfw-arbeitsweise .tooltip-marker-3::after                                  {   content: ''; position: absolute; z-index: -1; top: -1.2rem; left: -1rem; bottom: -1rem; right: -1rem; width: auto; height: auto;
                                                                                background: url('img/wp-marker-pink-3.svg'); background-size: 100% 100%; background-position: center center; transform: rotate(3deg); }

#bfw-arbeitsweise .tooltip-circle                                           {   position: relative; white-space: nowrap; font-weight: 400; }
#bfw-arbeitsweise .tooltip-circle::after                                    {   content: ''; position: absolute; z-index: -1; top: -0.5rem; left: -2rem; bottom: -0.5rem; right: -1rem; width: auto; height: auto;
                                                                                background: url('img/wg-marker-2.svg'); background-size: 100% 100%; background-position: center center; }


.tooltip                                                                    {    }
.tooltip.show                                                               {   opacity: 1 !important; }
.tooltip .arrow                                                             {   display: none; }
.tooltip .tooltip-inner                                                     {   color: var(--white); max-width: 20rem; padding: 1rem;
                                                                                font-family: verveine; font-size: 1.7rem; line-height: 1;
                                                                                background: url('img/wp-marker-pink-5.svg'); background-size: 100% 100%; background-position: center center; }
/*<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>*/


/* FOOTER
-------------------------------------------------------------------------------- */
    .imprint-menu ul                                                        {   margin: 0; padding: 0; }
    .imprint-menu ul li                                                     {   font-size: 0.8rem; }

/* BEHAVIOR
-------------------------------------------------------------------------------- */
@media all and (max-width: 144px) {
}
@media all and (max-width: 1200px) {
}
@media all and (max-width: 992px) {
}
@media all and (max-width: 768px) {
}
@media all and (max-width: 576px) {
}



/* CONTENT
-------------------------------------------------------------------------------- */
