/*!
Theme Name: _digitalcanon_0209_updated
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _s
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

_s is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Media
    ## Captions
    ## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
     ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */



































/*--------------------------------------------------------------
# CANON
--------------------------------------------------------------*/
ul
{
  margin: 0 !important;
}

div, a, span
{
  text-decoration: none !important;
  padding: 0;
  margin: 0;
  font-family: halyard-display, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400!important;
  color: black !important;
  font-size: 2.1vh;
  line-height: 2.6vh;
  letter-spacing: -0.02vh;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; 
  /*-webkit-filter: blur(0.000001px);*/
}
.reflection,
.reflection span,
.reflection a
{
  font-size: 1.8vh;
  font-weight: 500 !important;
  margin: 0;
}


.back_wrap  a,
.back_wrap  span
{
  color: white !important;
}
.about b{
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: 400;
}
.back_wrap div
{
  color: #00000000 !important;
}

#page
{
  z-index: 100;
}

a:hover
{
  text-decoration: underline !important;
}




































/*--------------------------------------------------------------
# FONT
--------------------------------------------------------------*/
div, a, span
{
  font-size: 2.1vh;
  line-height: 2.6vh;
}

.artworks .el_title,
.context_l_extra,
.year,
.website,
.website span,
.website a
{
  font-size: 2.1vh;
  line-height: 2vh;
}

.sec_title,
.menu .upper_menu,
.context_l_title
{
  font-size: 3.5vh;
  line-height: 3.5vh;
}

.title, .artist
{
  font-size: 5.6vh;
  line-height: 3.6vh;
}

.sup_span, 
h6,
h6 span,
h6 a,
.artworks .image_el span
{
  font-size: 1.8vh;
  font-weight: 500 !important;
  margin: 0;
}

sup
{
  font-size: 1.2vh;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}




































/*--------------------------------------------------------------
# Top_title
--------------------------------------------------------------*/

.top_title
{
  width: 100vw;
  height: 4vh;
  position: fixed;
  left: 0;
  top: 0;
  color: white !important;
  z-index: 100000;
}

.top_title a,
.top_title div,
.top_title span
{
  position: absolute;
  margin: 0;
  padding: 0;
  color: white !important;
  display: inline-block;
}

.go_btn_back , .go_btn_front
{
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
}

.go_btn_back:hover , .go_btn_front:hover
{
  cursor: pointer;
  text-decoration: underline !important;
}

.go_btn_front
{
  display: none !important;
}

.top_title .column1
{
  background-color: #000000e6;
  width: 77.77vw;
  height: 50%;
}
.page-template-page_menu 
.top_title .column1{
  width: 81.25vw
}
.top_title .column3
{
  background-color: #000000e6;
  width: 11.11vw;
  left: 72.21vw;
  height: 50%;
}

.top_title .column4
{
  background-color: #000000e6;
  width: 5.55vw;
  left: 83.32vw;
  height: 50%;
}

.top_title .column5
{
  background-color: black;
  width: 11.11vw;
  left: 88.87vw;
  height: 50%;
}

.column3_ani
{
  height: 100% !important;
}

.column4_ani
{
  height: 100% !important;
}

.column5_ani
{
  height: 100% !important;
}

#intro_btn
{
  cursor: pointer;
    /*padding-left: 50%;*/;
}



































/*--------------------------------------------------------------
# Rotation
--------------------------------------------------------------*/
#pivot
{
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(0deg) scaleZ(0.05) scaleY(1.155) translateZ(-50vw);
  position: relative;
  position: absolute;
  position: fixed;
  transform-origin: top;
  top: 0;
  transition: transform 0s !important;
  transition-timing-function: cubic-bezier(.17,1.02,.66,.99);
}

.pivot_animate
{
  transform: rotateX(-30deg) rotateY(-180deg) rotateZ(0deg) scaleZ(0.05) translateZ(50vw) scaleY(1.155) !important;
}

.pivot_in_animate
{
  transform: rotateX(-30deg) rotateY(-360deg) rotateZ(0deg) scaleZ(0.05) translateZ(-50vw) scaleY(1.155) !important;
}

.side_wrap_right, .side_wrap_left
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  float: left;
  transform: rotateY(90deg) translateZ(50vw);
  -moz-transform: rotateY(90deg) translateZ(50vw);
  -webkit-transform: rotateY(90deg) translateZ(50vw);
  background: linear-gradient(#7595f8, #7595f86b, #cacaca54);
  transform-origin: top;
}

.side_wrap_left
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  float: left;
  transform: rotateY(-90deg) translateZ(50vw);
  -moz-transform: rotateY(-90deg) translateZ(50vw);
  -webkit-transform: rotateY(-90deg) translateZ(50vw);
  background: linear-gradient(#7595f8, #7595f86b, #cacaca54);
  transform-origin: top;
}

.top_wrap
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  float: left;
  transform: rotateX(90deg) translateY(50vw) translateZ(100vw);
  -webkit-transform: rotateX(90deg) translateY(50vw) translateZ(100vw);
  transform-origin: bottom;
  background: linear-gradient(to right, rgba(255, 255, 255,0.75),rgba(255, 255, 255, 0));
  overflow: hidden !important;
}

#back_content
{
  position: absolute;
  float: left;
  transform: rotateY(180deg) translateZ(50vw);
  -webkit-transform: rotateY(180deg) translateZ(50vw);
  transform-origin: top;
  overflow: visible;
  transition: transform 1.5s;
  transition-timing-function: cubic-bezier(.17,1.02,.66,.99);
}

#front_content
{
  opacity: 1;
  position: relative;
  float: left;
  margin-top: 0vh;
  transform: translateZ(50vw) scaleY(1);
  -webkit-transform: translateZ(50vw) scaleY(1);
  transform-origin: top;
  -webkit-transform-origin: top;
  transition: transform 1.5s;
  transition-timing-function: cubic-bezier(.17,1.02,.66,.99);
}

#fixed_front_content
{
  height: auto;
  position: relative;
  overflow: visible !important;
  top: 0vh;
}

.site-content
{
  width: 100vw;
  height: 92vh;
  left: 0;
  overflow: auto;
  position: relative;
}
}
























/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
body
{
  background-color: #b4b4b3;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: visible;
}

.body_animate
{
  background-color: #272727;
}

div, a
{
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

p
{
  margin: 0;
}

.images_line
{
  pointer-events: none;
  position: absolute !important;
  width: 27.78vw!important;
  left: 72.15vw !important;
}
.images{
  font-size: 0!important
}

.images_line .el_wrap
{
  width: 100% !important;
}



































/*--------------------------------------------------------------
# Backside
--------------------------------------------------------------*/
.back .content-area
{
  position: relative;
}

.context_l .el_wrap div
{
    /*display: none;*/;
}

.context_l
{
  overflow: hidden;
}

.context_l .el_wrap
{
  height: 4vh;
    /*mix-blend-mode: multiply;*/
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  float: left;
  z-index: 10000;
  /*background-color: #101010e8;*/
}


.context_l .el_wrap:nth-child(3n+1)
{
}

.context_l .el_wrap:nth-child(2) .bottom_shadow,
.context_l .el_wrap:nth-child(3) .bottom_shadow,
.context_l .el_wrap:nth-child(4) .bottom_shadow
{
  display: none;
}

.front .sec
{
  overflow: hidden !important;
    /*transform-style: flat;*/
  padding-bottom: 2vh;
    /*margin-top: -3vh*/;
}

.fixed .front .sec
{
  padding-bottom: 0vh;
}

.longlist_el
{
  background: black;
}

.context_l_title
{
  position: relative;
  padding-left: 27.75vw;
  height: 4vh;
}

.context_l_cat_title
{
  position: absolute;
}

.context_l_extra
{
  position: absolute;
  left: 77.8vw;
  top: 0;
}

.sec_longlist .el_wrap
{
  width: 100vw;
  height: 2vh;
    /*opacity: 0*/;
}

.sec_longlist .longlist_el
{
  display: inline-block;
  float: left;
  height: 100%;
  color:white !important
}

.sec_longlist .longlist_voornaam
{
  width: 16.65vw;
  padding-left: 5.5vh
}

.sec_longlist .longlist_tussenvoegsel
{
  width: 5.55vw;
}

.sec_longlist .longlist_achternaam__organisatienaam
{
  width: 11.1vw;
}

.sec_longlist .longlist_werk
{
  width: 33.3vw;
}

.sec_longlist .longlist_1960
{
  width: 5.55vw;
  border-left: 1px solid black;
}

.sec_longlist .longlist_1970
{
  width: 5.55vw;
}

.sec_longlist .longlist_1980
{
  width: 5.55vw;
}

.sec_longlist .longlist_1990
{
  width: 5.55vw;
}

.sec_longlist .longlist_2000
{
  width: 5.55vw;
}

.sec_longlist .longlist_2010
{
  width: 5.55vw;
}

.sec_about
{
  opacity: 0;
}
.sec_about p{
  color: white !important;
  display: block !important
}
.back_wrap
{
  top: 10vh;
  right: 5vh;
  background: #ff000070;
  position: absolute;
  width: calc(100vw - 5vh);
  transform-origin: top;
  -webkit-transform-origin: top;
  height: 100vh;
  filter: contrast(0.08) brightness(1);
  -webkit-transition: all .1.5s;
  -moz-transition: all .1.5s;
  -o-transition: all .1.5s;
  transition: all .1.5s;
}

.back_wrap_animate
{
  position: relative;
  right: 0;
  width: 100%;
  opacity: 1;
  filter: contrast(1) brightness(1);
  background: #c8d8ff40;
  !important;
}

.back
{
  position: relative;
  left: 0vw;
  transform-origin: top;
  -webkit-transform-origin: top;
  top: 0vw;
  width: 100vw;
  z-index: 10;
  -webkit-transition: all .1.5s;
  -moz-transition: all .1.5s;
  -o-transition: all .1.5s;
  transition: all .1.5s;
}

.about
{
  background-color: black;
}

.sec_about
{
  padding-left: 5.55vw;
  padding-right: 5.55vw;
}

.sec_about span,.sec_about p
{
  display: inline-block;
}

.back.back .sec_title, .further_reading
{line-height: 2vh;
  background: #ff2e38;
  height: 4vh;
  position: relative;
  z-index: 100000;
}

.sec_longlist .sec_title{
  height: 4vh !important
}
.sec_longlist .sec_title:hover{
   /*background:#000000e6;*/
   text-decoration: underline !important;
   cursor: pointer;
}
.sec_longlist{
    top: -7vh;
    position: absolute;
  }
.further_reading{
  display: none;
    width: 100%;
    float: left;
    color: black !important;
}
.back_wrap .further_reading{
    color: black !important;
}
.longlist_content{
  display: none;
    padding-top: 2vh;
    padding-bottom: 2vh;
}
.longlist .sec_longlist{
  padding-bottom: 4vh;
  position: relative;
}
#fixed_front_content
{
  position: relative;
  float: left;
  transform: translateX(0px) translateY(0px) translateZ(50vw) scaleY(1);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(50vw) scaleY(1);
  float: left;
  transform-origin: top;
  -webkit-transform-origin: top;
}

.front_wrap
{
  background: linear-gradient(to right, rgba(155, 210, 255, 0.4),  rgba(255,255,255,0.1));
    /*background : linear-gradient(to right, rgba(131, 173, 175, 0.4),  rgba(255,255,255,0.1));*/
  transform-origin: top;
  -webkit-transform-origin: top;
  width: 100vw;
  left: 0vw;
  margin-left: 0;
  overflow: auto;
  overflow: hidden;
  top: 0;
  -webkit-transition: pointer-events 1.5s;
  -moz-transition: pointer-events 1.5s;
  -o-transition: pointer-events 1.5s;
  transition: pointer-events 1.5s;
  -webkit-transition: width 1.5s 0.7s;
  -moz-transition: width 1.5s 0.7s;
  -o-transition: width 1.5s 0.7s;
  transition: width 1.5s 0.7s;
  -webkit-transition: margin-left 1.5s 0.7s;
  -moz-transition: margin-left 1.5s 0.7s;
  -o-transition: margin-left 1.5s 0.7s;
  transition: margin-left 1.5s 0.7s;
  -webkit-transition: opacity 1.5s;
  -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.front_wrap_animate
{
  pointer-events: none;
  width: 88.9vw;
  margin-left: 11.1vw;
  opacity: 0.2;
}

.fixed .front_wrap
{
  margin-top: 2vh;
  padding-bottom: 0;
}

.fixed_front_wrap_ani
{
  margin-top: 4vh;
}

.front
{
  position: relative;
  transform-origin: top;
  -webkit-transform-origin: top;
  left: 0vw;
  width: 100vw;
}

.back .append_div
{
  padding: 0.5vh;
  padding-top: 0.2vh
    /*background-color:black*/;
}

.back_intro
{
  display: block !important;
  left: 0 !important;
  float: left !important;
  margin-left: 0vh !important;
  width: 100vw;
  position: absolute;
  background-color: #101010e8;
  height: auto !important;
  z-index: 100000;
}

.back_intro:hover
{
  background: #ff2e38;
}

.back #primary
{
  pointer-events: none;
}

.nonempty
{
  background: rgba(0,0,0,0) !important;
}



































/*--------------------------------------------------------------
# Dots
--------------------------------------------------------------*/
.side_wrap_left .side .right_shadow_dots
{
  right: 0;
  position: absolute;
  width: 30vh;
  transform: scaleY(0.1);
  transform-origin: left top;
  -webkit-transform: scaleY(0.1);
  -webkit-transform-origin: left top;
  height: 1000%;
}

.side_wrap_left .side .right_shadow_dots::before
{
  content: "";
  transform: skewY(45deg) scal;
  transform-origin: left top;
  -webkit-transform: skewY(45deg) scal;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots_black.png');
  width: 100%;
  height: 100%;
  background-position: top left;
  position: absolute;
}

.side_wrap_left .side_back .right_shadow_dots
{
  right: 0;
  position: absolute;
  width: 30vh;
  transform: scaleY(0.1);
  transform-origin: left top;
  -webkit-transform: scaleY(0.1);
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots_black.png');
  height: 1000%;
}

.right_shadow
{
  opacity: 0.75;
  position: absolute;
  top: 0;
  overflow: hidden;
  transform: skewY(45deg);
  transform-origin: left top;
  -webkit-transform: skewY(45deg);
  -webkit-transform-origin: left top;
  float: left;
  width: 10vh;
  height: calc(100% - 10vh);
  background: linear-gradient(to right ,rgb(246, 246, 246) ,rgba(246, 246, 246, 0.5) 30%,rgba(246, 246, 246, 0));
}

.right_shadow_ani
{
  opacity: 0.1;
}

.right_shadow::before
{
  filter: invert(0.2);
  content: "";
  transform: skewY(-45deg);
  transform-origin: left top;
  -webkit-transform: skewY(-45deg);
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots_l.png');
  background-size: contain;
  width: 20%;
 /* something ridiculously big */
  height: 300%;
 /* something ridiculously big */
  background-position: top left;
  position: absolute;
}

.bottom_shadow
{
  overflow: hidden;
  position: relative;
  transform: skewX(45deg);
  transform-origin: left top;
  -webkit-transform: skewX(45deg);
  -webkit-transform-origin: left top;
  height: 10vh;
  float: left;
  width: 100%;
  background: linear-gradient(#2d65f45c,rgba(246, 246, 246, 0.04)60%,rgba(246, 246, 246, 0)61%);
}

.bottom_shadow_ani
{
  opacity: 0.3;
}

.bottom_shadow::before
{
  filter: invert(0.3);
  content: "";
  transform: skewX(-45deg);
  transform-origin: left top;
  -webkit-transform: skewX(-45deg);
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots.png');
  background-size: contain;
  width: 150%;
 /* something ridiculously big */
  height: 20%;
 /* something ridiculously big */
  background-position: top left;
  position: absolute;
}

.back .bottom_shadow
{
  filter: invert(0.6);
  transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  margin-top: -3vh;
  display: none;
}

.back .bottom_shadow::before
{
  content: "";
  transform: skewX(-45deg) rotate(180deg);
  transform-origin: center 66.66%;
  -webkit-transform: skewX(-45deg) rotate(180deg);
  -webkit-transform-origin: center 66.66%;
  background-image: url('bottom_shadow_dots.png');
  background-size: contain;
  width: 150%;
  height: 20%;
  background-position: top left;
  position: absolute;
  display: none;
}

.artworks .sec_credits .el_wrap:nth-child(1) .right_shadow,
.artworks .sec_credits .el_wrap:nth-child(2) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(1) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(2) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(1) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(2) .right_shadow
{
  left: 33.3vw;
}

.artworks .sec_credits .el_wrap:nth-child(3) .right_shadow,
.artworks .sec_credits .el_wrap:nth-child(4) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(3) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(4) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(3) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(4) .right_shadow
{
  left: 27.75vw;
}

.back .right_shadow
{
  transform: rotate(180deg) skewY(45deg);
  -webkit-transform: rotate(180deg) skewY(45deg);
  filter: invert(0.6);
  left: 3vh;
  right: auto;
  height: 100%;
  transform-origin: left;
  -webkit-transform-origin: left;
  display: none;
}

.bottom_shadow_backtop
{
  position: absolute !important;
  transform: skew(45deg) scaleY(-1) !important;
  -webkit-transform: skew(45deg) scaleY(-1) !important;
  filter: invert(0.6) !important;
  width: 100% !important;
    /* top: -3vh; */
    /* left: -3vh; */;
}

.longlist .bottom_shadow_backtop, .about .bottom_shadow_backtop
{
  margin-top: 0;
}

.bottom_shadow_backtop::before
{
  transform: skewX(45deg) !important;
  -webkit-transform: skewX(45deg) !important;
}

.context_l_conetents
{
  color: white;
  background-color: #000000e6;
    padding-left: 5.55vw;
    padding-right: 5.55vw;
  position: relative;
  cursor: pointer;
  padding-top: 2.6vh
}


































/*--------------------------------------------------------------
# front
--------------------------------------------------------------*/
.front .append_div
{
  width: calc(100% - 3vh);
  background-color: #efefefe0;
  padding: 0.5vh;
  padding-top: 2vh;
  margin-top: -2vh;
  float: left;
  min-height: 6vh;
  height: auto;
  -webkit-transition: height 3.5s;
  -moz-transition: height 3.5s;
  -o-transition: height 3.5s;
  transition: height 3.5s;
}
.fixed .append_div{
  padding-top: 2vh !important;
}

.year,.website
{
  padding-bottom: 0 !important;
}

.append_div_ani
{
  /*height: 6vh !important;*/
}

.title, .artist
{
  height: 6vh;
  width: 100% !important;
}

.sec_discription .append_div,
.sec_context .append_div
{
  padding-top: 4vh;
  padding-bottom: 2vh;
}

.sec_discription .right_shadow,
.sec_context .right_shadow
{
  right: 0;
}







































































/*--------------------------------------------------------------
# artworks
--------------------------------------------------------------*/
#intro
{
    position: fixed;
    z-index: 100000;
    width: 22.22%;
    background: #ffffffed;
    right: 0%;
    top: 12vh;
    padding: 0.5vh;
    box-shadow: 0.5vh 0.5vh 1vh #000000bd;
    /* height: 50vh; */
    /* height: 50vh; */
    /* height: 50vh; */
}

.intro_sitemap,.intro_backside{
    width: 66.66vw;
    padding: 0vh;
    margin-left: -0.5vh;
    text-indent: 0.5vh;
    display: block;
}
.intro_sitemap:hover,
.intro_backside:hover
{
  background-color: #1156ffd6
}
.intro_sitemap:hover ~ .intro_sitemap_img{
  display: block;
}
.intro_sitemap_img{
  display: none;
  left: 11.11vw;
  width: 11.11vw;
  position: absolute;
}
.intro_backside:hover ~ .intro_backside_img{
  display: block;
}
.intro_backside_img{
  display: none;
  left: 11.11vw;
  width: 11.11vw;
  position: absolute;
}
#intro .x_button{
  background-color: #1156ffd6
}
.artworks .sec_title
{
  height: 0vh;
  overflow: hidden;
  background: linear-gradient(#2d65f442, #2d65f442);
  text-transform: uppercase;
}

.artworks .sec_title_shadow
{
  display: none;
  margin-top: -1.8vh;
  width: 6vh;
  height: 6vh;
  position: absolute;
  left: 0;
  transform: rotate(45deg);
  transform-origin: left top;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: left top;
  background: linear-gradient(to bottom, #1e5799 0%,#a2c8e5 100%);
  opacity: 0.7;
}

.artworks
{
  position: relative;
  width: 100vw;
  height: auto;
  left: 0;
}

.artworks .line
{
  padding-top: 2vh;
  position: relative;
  width: 100vw;
  height: auto;
  left: 0;
  top: 0;
  overflow: hidden;
}

.fixed .line
{
  padding-top: 0;
}
.post_nav{
    padding-bottom: 4vh;
    background-color: #ffffffed;
    padding-top: 0vh !important;
}
.post_nav .el_wrap .el_title{
  width: 100%
}
.otherartists .el_wrap>div:nth-child(2){
  margin-top: 4vh
}
.post_nav_wrap{
  background-color: #ffffffed;
    width: 100vw;
}
.post_nav_wrap:hover{
  background-color: #1156ffd6;

}
.post_nav .el_title{
  width: 100vw !important;
  padding-bottom: 4vh;
}
.post_nav_wrap .title_all{
    width: 33.33%;
    display: inline-block;
}
.post_nav_wrap .artist_all{
    display: inline-block;
}
.artworks .el_wrap
{
  overflow: visible;
  display: inline-block;
  float: left;
  position: relative;
  height: auto;
  /*box-shadow: 0.5vh 0.5vh 1vh #000000bd;*/
}
.images_el_wrap .append_div{
  position: relative;
  height: 60vh !important;
  overflow: hidden;
}
.images{
  overflow: hidden;
}
.image_el_video {
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    position: relative;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe_wrap {
    position: relative;
    padding-bottom: 200%;
    transform: translateY(-35.95%);
}
.images iframe{
  width: 100%;
  height: 100%
}

.artworks .sec_context
{
  padding-bottom: 12vh;
}

.artworks .sec_credits .el_wrap:nth-child(1),
.artworks .sec_context .el_wrap:nth-child(1)
{
  width: 33.3vw;
  left: 0vw;
  margin-left: 0 !important;
}
.artworks .sec_context .el_wrap:nth-child(1){
  width: 50vw;
}

.artworks .sec_credits .el_wrap:nth-child(2),
.artworks .sec_context .el_wrap:nth-child(2)
{
  width: 33.3vw;
}
.artworks .sec_context .el_wrap:nth-child(2){
  width: 50vw;
}
.artworks .sec_credits .firstline .el_wrap{
  width: 100vw !important
}
.firstline .el_wrap{
    padding-right: 33.33vw;
}
.artworks .sec_credits .firstline .el_wrap .append_div{
  column-count: 2
}
.artworks .sec_credits .el_wrap:nth-child(3),
.artworks .sec_context .el_wrap:nth-child(3)
{
  width: 33.3vw;
}
.artworks .sec_context .el_wrap:nth-child(3){
  width: 50vw;
}

.artworks .sec_credits .el_wrap:nth-child(2)
{
  width: 16.65vw;
}

.artworks .sec_credits .el_wrap:nth-child(3)
{
  width: 33.3vw;
}

.artworks .sec_credits .el_wrap:nth-child(4)
{
  width: 16.65vw;
}
/*.artworks .sec_discription .el_wrap,
.artworks .sec_context .el_wrap{
    width: calc(72.15vw + 3vh);
    margin-left: 0 !important;
    margin-top:-3vh;
}*/
.artworks .sec_discription .el_wrap:nth-child(1)
{
  width: 50vw;
  left: 0vw;
  margin-left: 0 !important;
}

.artworks .sec_discription .el_wrap:nth-child(2)
{
  width: 50vw;
}

.artworks .sec_discription .el_wrap:nth-child(3)
{
  width: 50vw;
}

.artworks .sec_discription .el_wrap:nth-child(2),
.artworks .sec_context .el_wrap:nth-child(2)
{
  margin-top: 0vh !important;
}

.images
{
  white-space: nowrap;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


#intro_mobile
{
  white-space: normal;
}

.artworks .image_el
{position: absolute;
  top: 4vh;
  height: 55vh;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  white-space: initial;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
  color: rgba(0,0,0,0) !important;
}
.artworks .image_el span{
  background-color: rgba(255,255,255,0);
  display: block;
  padding-left: 0.5vh;
  padding-right: 0.5vh
}

.artworks .image_el img
{
  -webkit-transition: all 1s;
  transition: all 1s;
  height: 100%;
  margin: 0 auto;
  display: block;
  position: absolute;
  width: auto;
    left: 0;
    right: 0;
  z-index: -1;
  opacity: 1;
}
.artworks .image_el:hover{
  color: rgba(0,0,0,1) !important;
  text-shadow: 1px 1px 0.4vh #ffffff, -1px 1px 0.4vh #ffffff, -1px -1px 0.4vh #ffffff, 1px -1px 0.4vh #ffffff;
  /*background-color: #ffffffed;*/
}
.artworks .image_el{
  -webkit-transition: opacity 1s; /* Safari */
  transition: opacity 1s;
}
.artworks .image_el:hover iframe{
  position: absolute;
  border:none;
}
.player .vp-title{
  display: none!important
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
.arrow,.x_button
{
  border-radius: 5vh;
  width: 3vh;
  height: 3vh;
  background: #1156ffd6;
  position: absolute;
  top: 50%;
  display: none;
  border-radius: 5vh;
    background-image: url('arrow-01.svg');
    cursor: pointer;
}
.arrow_dia{
display: inline-block;
position: relative;
width: 1.8vh;
height: 1.8vh;
transform: rotate(135deg);
}
.x_button{
    background-color: #ff2e38;
    right: 0.5vh;
    top: 0.5vh;
    display: block;
    background-image: url('x-01.svg');
}
.back .x_button{
    right: 0.5vh !important;
    top: 0vh !important;
  }
.longlist_content .x_button{
    top: 2.5vh !important;
    z-index: 100000;
  }
.arrow:hover,
.x_button:hover{
  filter: invert(1);
  cursor: pointer;
}

.arrowdown
{
    right: 0.5vh;
    bottom: 1.5vh;
  top: auto;

  transform: rotate(-90deg);
}

.arrowleft
{
  left: 0.5vh;
}

.arrowright
{
  right: 0.5vh;
  transform: rotate(180deg);
}

/*fixed--------------------------------------------------------------*/
.artworks .shr_13
{
  width: 66.66vw!important;
  left: 0vw;
}

.artworks .shr_1
{
  width: 16.65vw!important;
  overflow: hidden;
  max-height: 15vh;
}
.artworks .shr_4
{
  width: 16.65vw!important;
  max-height: 15vh;
}

.shr_ani
{
  /*margin-top: 2vh;*/
}

.artworks .title_wrap
{
  width: 33.3vw;
  display: inline-block;
  float: left;
  /*border-right: 0.8vh solid #1156ffd6;*/
}

.artworks .artist_wrap
{
  width: 33.3vw;
  display: inline-block;
  float: left;
  /*border-right: 0.8vh solid #1156ffd6;*/
}

.artworks .button
{
  display: flex;
}

.artworks .button .el_wrap div
{
  display: none;
}

.artworks .button .el_wrap div:nth-child(1),
.artworks .button .el_wrap div:nth-child(2)
{
  display: block;
}

.artworks .el_title
{
    left: 2vh;
    position: relative;
    width: calc(100% - 4vh);
    min-width: 2.775vw;
    height: 2vh;
    /* left: 0; */
    top: 0;
    padding-left: 0.5vh;
    padding-right: 0.5vh;
    /* background-color: black; */
    /*background-color: #1156ffd6;*/
    color: #8e8e8e !important;
    z-index: 100;
    text-transform: uppercase;
    line-height: 2vh;
    float: left;
}

#intro .title
{
  height: 4.5vh;
}

.dropdown
{
  height: 89.5vh;
    /*overflow-y: scroll;*/
  display: none;
  transform: translateX(0px) translateY(0px) translateZ(50vw) scaleY(1);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(50vw) scaleY(1);
  position: absolute;
  z-index: 100000;
  top: 10.5vh;
  width: 100vw;
  border-top: 1px solid #d2d2d2
}

.dropdown .dropdown_wrap
{
  height: 2.6vh;
  overflow: hidden;
  width: 100vw;
  background-color: #ffffffed;
}
.dropdown>div:last-child
{
    box-shadow: 0vh 0.5vh 0.5vh rgba(0,0,0,0.2);
  }
.dropdown .dropdown_wrap:hover
{
  cursor: pointer;
  background-color: #1156ffd6;
}

.dropdown .dropdown_wrap div
{
  float: left;
  margin-top: 0 !important;
  padding-top: 0vh !important;
  padding-bottom: 0vh !important;
  margin-bottom: 0vh !important;
  background-color: rgba(0,0,0,0)!important;
}

.dropdown .dropdown_wrap div:nth-child(1)
{
  width: 33.3% !important;
}

.dropdown .dropdown_wrap div:nth-child(2)
{
  width: 38.85% !important;
}

.dropdown .dropdown_wrap div:nth-child(3)
{
  width: 5.55% !important;
  max-height: 4vh;
}

.dropdown .dropdown_wrap div:nth-child(4)
{
  width: 22.2% !important;
  max-height: 4vh;
}

.images
{
  width: 100%;
  min-height: 36vh !important;
  max-height: 60vh !important;
  overflow: hidden;
}

.images_el_wrap
{
  width: 66.6vw !important;
}

.video
{
  width: 100%;
  height: 22vh !important;
  overflow: hidden;
}

/*--------------------------------------------------------------
# projected
--------------------------------------------------------------*/

.scroll
{
  display: none;
  width: 100vw;
  height: 2500px;
  -webkit-transition: all .8s;
  -moz-transition: all .8s;
  -o-transition: all .8s;
  transition: all .8s;
  position: relative;
  z-index: 1;
  background: rgba(23, 23, 23,0);
  transform: translateX(0px) translateY(0px) translateZ(-55.05vw) scaleY(1)
    -webkit-transform: translateX(0px) translateY(0px) translateZ(-55.05vw) scaleY(1);
}

.scroll_down_mobile
{
  transform: translateX(0px) translateY(0px) translateZ(50.05vw) scaleY(1);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(50.05vw) scaleY(1);
  position: fixed;
  z-index: 10000;
  bottom: 0;
  right: 0;
  background: black;
  width: 10vw;
  height: 10vw;
  display: none;
}

.scroll_ani
{
  display: block!important;
  background: rgba(23, 23, 23,1);
}

.scroll_ani_mobile_1
{
  margin-top: -100vh;
}

.scroll_ani_mobile_2
{
  margin-top: -200vh;
}

.scroll_ani_mobile_3
{
  margin-top: -300vh;
}

.scroll_ani_mobile_4
{
  margin-top: -400vh;
}

.scroll_ani_mobile_5
{
  margin-top: -500vh;
}

.scroll_ani_mobile_6
{
  margin-top: -600vh;
}

.scroll_ani_mobile_7
{
  margin-top: -700vh;
}

.img_info
{
  position: absolute;
  white-space: initial;
  top: 0;
  z-index: 0;
  padding: 0.5vh;
  display: none;
  pointer-events: none;
  line-height: 2.4vh
}
.projecting_line span:nth-child(7n+4) .img_info, 
.projecting_line span:nth-child(7n+5) .img_info, 
.projecting_line span:nth-child(7n+3) .img_info, 
.projecting_line span:nth-child(7n+6) .img_info{
    font-size: 1.8vh;
    line-height: 2.1vh;
    margin-top: -0.2vh;
}
.projecting_line span:nth-child(7n+1) .img_info,
.projecting_line span:nth-child(2) .img_info{
    margin-top: -0.2vh;
}

.projecting_ani_1
{
  display: block !important;
  pointer-events: inherit !important;
  opacity: 1 !important;
}

.projecting_ani_2
{
  opacity: 1 !important;
}

.projecting_back_ani_2
{
  opacity: 0.2 !important;
}

.projecting_back_ani_1
{
  pointer-events: inherit;
  opacity: 0.1 !important;
}

.projecting_line span
{
  position: relative;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  display: inline-block;
  font-size: 0 !important;
  line-height: 0 !important;
  width: 50%!important;
  vertical-align: top;
  background: #1156ffd6;
  box-shadow: 0.5vh 0.5vh 1vh #000000bd;
}
.projecting_whole img{
  width: 100% !important
}

.projecting_line span:nth-child(7n+1)
{
  width: 75%!important;
}

.projecting_line span:nth-child(7n+2)
{
  width: 25%!important;
}

.projecting_line span:nth-child(7n+4),
.projecting_line span:nth-child(7n+5),
.projecting_line span:nth-child(7n+3),
.projecting_line span:nth-child(7n+6)
{
  width: 25%!important;
  margin-top: 0!important;
}

.projecting_line span:nth-child(7n)
{
  width: 100%!important;
  margin-top: 5vh;
}

.projecting img:hover
{
  opacity: 0;
}

.projecting_distort_wrap img:hover
{
  opacity: 0;
}

.projecting_whole
{
  pointer-events: none;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  opacity: 0;
  position: fixed;
  z-index: 10000;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.projecting_whole_ani
{
  opacity: 1 !important;
  pointer-events: inherit;
}

.projecting_distort_wrap
{
  position: absolute;
  left: 0;
  width: 100vw;
  height: 5vh;
  overflow: hidden;
  z-index: 5000;
  -webkit-mask-image: linear-gradient(rgba(0,0,0,1), rgba(0, 0, 0, 0.3));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top, bottom;
}

.projecting_distort
{
  position: absolute;
  transform: skew(45deg) scaleY(3);
  -webkit-transform: skew(45deg) scaleY(3);
  top: 0;
  height: 100vh;
  filter: brightness(0.5) contrast(0.8);
}

.projecting_line_wrap
{
  position: absolute;
  top: 0;
}

.projecting_distort_img_wrap,.projecting_line_wrap_each_1,.projecting_line_wrap_each_0
{
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.projecting_distort_9{
  overflow: hidden;
}

  .projecting_right_shadow::before
  {
    background-image: none !important;
  }

  .projecting_right_shadow
  {
    background: none !important;
    /*opacity: 1 !important;*/
    position: fixed;
    display: none;
  }

  .projecting_right_shadow1_1
  {
    left: 0vw;
    top: 8vh;
    height: 4vh;
  }

  .projecting_right_shadow1_2
  {
    left: 0vw;
    top: 18vh;
    height: 30vh;
  }

  .projecting_right_shadow1_3
  {
    left: 0vw;
    top: 60vh;
    height: 8vh;
  }

  .projecting_right_shadow1_4
  {
    left: 0vw;
    top: 80vh;
    height: 8vh;
  }

  .projecting_right_shadow2_1
  {
    left: 33.33vw;
    top: 6vh;
    height: 2vh;
  }

  .projecting_right_shadow2_2
  {
    left: 33.33vw;
    top: 48vh;
    height: 12vh;
  }

  .projecting_right_shadow3_1
  {
    left: 66.66vw;
    top: 74vh;
    height: 6vh;
  }

  .projecting_right_shadow3_2
  {
    left: 66.66vw;
    top: 94vh;
    height: 6vh;
  }

  .projecting_right_shadow3_3
  {
    left: 83.325vw;
    top: 54vh;
    height: 6vh;
  }

  .projecting_line
  {
    width: 33.3vw;
    display: inline-block;
    float: left;
    background-color: #efefefe0;
    font-size: 0 !important;
    line-height: 0 !important;

    padding-top: 2vh;
  }

  .projecting_wrap
  {
    z-index: 100000;
    position: fixed;
    width: 33.3vw;
    overflow: hidden;
  }

  .projecting_line_wrap
  {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
  }

  .projecting_wrap_1_1
  {
    left: 0;
    top: 0vh;
    height: 8vh;
  }

  .projecting_line_wrap1_1
  {
    margin-top: -0vh;
  }

  .projecting_wrap_1_2
  {
    left: 0;
    top: 12vh;
    height: 6vh;
  }

  .projecting_line_wrap1_2
  {
    margin-top: -12vh;
  }

  .projecting_wrap_1_3
  {
    left: 0;
    top: 48vh;
    height: 12vh;
  }

  .projecting_line_wrap1_3
  {
    margin-top: -48vh;
  }

  .projecting_wrap_1_4
  {
    left: 0;
    top: 68vh;
    height: 12vh;
  }

  .projecting_line_wrap1_4
  {
    margin-top: -68vh;
  }

  .projecting_wrap_1_5
  {
    left: 0;
    top: 88vh;
    height: 12vh;
  }

  .projecting_line_wrap1_5
  {
    margin-top: -88vh;
  }

  .projecting_wrap_2_1
  {
    left: 33.33vw;
    top: 0vh;
    height: 8vh;
  }

  .projecting_line_wrap2_1
  {
    margin-top: -0vh;
  }

  .projecting_wrap_2_2
  {
    left: 33.33vw;
    top: 12vh;
    height: 36vh;
  }

  .projecting_line_wrap2_2
  {
    margin-top: -12vh;
  }

  .projecting_wrap_2_3
  {
    left: 33.33vw;
    top: 68vh;
    height: 12vh;
  }

  .projecting_line_wrap2_3
  {
    margin-top: -68vh;
  }

  .projecting_wrap_2_4
  {
    left: 33.33vw;
    top: 88vh;
    height: 12vh;
  }

  .projecting_line_wrap2_4
  {
    margin-top: -88vh;
  }

  .projecting_wrap_3_1
  {
    left: 66.66vw;
    top: 0vh;
    height: 8vh;
  }

  .projecting_line_wrap3_1
  {
    margin-top: -0vh;
  }

  .projecting_wrap_3_2
  {
    left: 66.66vw;
    top: 12vh;
    height: 48vh;
    width: 16.65vw;
  }

  .projecting_line_wrap3_2
  {
    margin-top: -12vh;
  }

  .projecting_wrap_3_3
  {
    left: 83.325vw;
    top: 12vh;
    height: 42vh;
    width: 16.65vw;
  }

  .projecting_line_wrap3_3
  {
    margin-top: -12vh;
    margin-left: -16.65vw;
  }

  .projecting_wrap_3_4
  {
    left: 66.66vw;
    top: 68vh;
    height: 6vh;
  }

  .projecting_line_wrap3_4
  {
    margin-top: -68vh;
  }

  .projecting_wrap_3_5
  {
    left: 66.66vw;
    top: 88vh;
    height: 6vh;
  }

  .projecting_line_wrap3_5
  {
    margin-top: -88vh;
  }

  .projecting_back_wrap
  {
    transform: translateX(5vh);
    display: block;
    z-index: 1;
    position: fixed;
    width: 33.3vw;
    overflow: hidden;
    /*opacity: 0.5;*/
    filter: brightness(0.5) contrast(0.8);
    /*filter: contrast(0.2)*/;
  }

  .projecting_back_wrap_1_1
  {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
  }

  .projecting_back_wrap_1_1
  {
    left: 0;
    top: 23vh;
    height: 30vh;
  }

  .projecting_line_back_wrap1_1
  {
    margin-top: -20vh;
    /*-23+3*/
  }

  .projecting_back_wrap_1_2
  {
    left: 0;
    top: 65vh;
    height: 8vh;
  }

  .projecting_line_back_wrap1_2
  {
    margin-top: -62vh;
  }

  .projecting_back_wrap_1_3
  {
    left: 0;
    top: 85vh;
    height: 8vh;
  }

  .projecting_line_back_wrap1_3
  {
    margin-top: -82vh;
  }

  .projecting_back_wrap_2_1
  {
    left: 33.33vw;
    top: 53vh;
    height: 20vh;
  }

  .projecting_line_back_wrap2_1
  {
    margin-top: -50vh;
  }

  .projecting_back_wrap_2_2
  {
    left: 33.33vw;
    top: 85vh;
    height: 8vh;
  }

  .projecting_line_back_wrap2_2
  {
    margin-top: -82vh;
  }

  .projecting_back_wrap_3_1
  {
    left: 66.66vw;
    top: 65vh;
    height: 8vh;
  }

  .projecting_line_back_wrap3_1
  {
    margin-top: -62vh;
  }

  .projecting_back_wrap_3_2
  {
    left: 83.325vw;
    top: 59vh;
    height: 14vh;
  }

  .projecting_line_back_wrap3_2
  {
    margin-top: -56vh;
    margin-left: -16.65vw;
  }

  .projecting_back_wrap_3_3
  {
    left: 66.66vw;
    top: 79vh;
    height: 14vh;
  }

  .projecting_line_back_wrap3_3
  {
    margin-top: -76vh;
  }

  .projecting_distort_wrap_0
  {
    top: 8vh;
    left: 0vw;
    width: calc(33.3vw + 6vh);
  }

  .projecting_distort_0
  {
    width: 33.3vw;
    margin-top: -8vh;
    transform-origin: left 8vh;
  }

  .projecting_distort_wrap_1
  {
    top: 8vh;
    left: 33.3vw;
    width: calc(66.66vw + 6vh);
  }

  .projecting_distort_1
  {
    width: 66.66vw;
    margin-top: -8vh;
    transform-origin: left 8vh;
  }

  .projecting_distort_wrap_2
  {
    top: 18vh;
    left: 0vw;
    width: calc(33.33vw + 6vh);
  }

  .projecting_distort_2
  {
    width: 33.33vw;
    margin-top: -18vh;
    transform-origin: left 18vh;
  }

  .projecting_distort_wrap_3
  {
    top: 60vh;
    left: 0vw;
    width: calc(33.33vw + 6vh);
  }

  .projecting_distort_3
  {
    margin-top: -60vh;
    width: 33.33vw;
    transform-origin: left 60vh;
  }

  .projecting_distort_wrap_4
  {
    top: 54vh;
    left: 83.325vw;
    width: calc(16.675vw + 6vh);
  }

  .projecting_distort_4
  {
    margin-left: -16.675vw;
    margin-top: -54vh;
    width: 16.675vw;
    transform-origin: left 54vh;
  }

  .projecting_distort_wrap_5
  {
    top: 80vh;
    left: 0vw;
    width: calc(66.66vw + 6vh);
  }

  .projecting_distort_5
  {
    margin-top: -80vh;
    width: 66.66vw;
    transform-origin: left 80vh;
  }

  .projecting_distort_wrap_6
  {
    top: 74vh;
    left: 66.66vw;
    width: calc(33.33vw + 6vh);
  }

  .projecting_distort_6
  {
    margin-top: -74vh;
    width: 33.33vw;
    transform-origin: left 74vh;
  }

  .projecting_distort_wrap_7
  {
    top: 94vh;
    left: 66.66vw;
    width: calc(33.33vw + 6vh);
  }

  .projecting_distort_7
  {
    margin-top: -94vh;
    width: 33.33vw;
    transform-origin: left 94vh;
  }

  .projecting_distort_wrap_8
  {
    top: 48vh;
    left: 33.33vw;
    width: calc(33.33vw + 6vh);
  }

  .projecting_distort_8
  {
    margin-top: -48vh;
    width: 33.33vw;
    transform-origin: left 48vh;
  }

  .projecting_distort_wrap_9
  {
    top: 60vh;
    left: 66.66vw;
    width: calc(16.675vw + 6vh);
  }

  .projecting_distort_9
  {
    margin-top: -60vh;
    width: 16.675vw;
    transform-origin: left 60vh;
  }

/*.projecting_distort:after {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  height: 3vh;
  margin-top: 47vh;
  width: 100%;
  background: linear-gradient(transparent, gray);
}*/
/*.projecting_distort img*/
/*--------------------------------------------------------------
# Menu

--------------------------------------------------------------*/
html, body{
  height: 100%
}
.page-template-page_menu{
background:linear-gradient(#d7d7d7 60%,#85858561 80%)
/*background-image: url('back.png');*/
}

  .menu
  {
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: 2vh;
    z-index: 100000000
  }

  canvas
  {
    width: 100vh !important;
    height: 100vh !important;
    position: absolute;
    left: calc(50vw - 50vh) !important;
    top: 0vh;
  }

  .menu_left
  {
width: 22.22vw !important;
position: absolute;
left: 0;
top: 0;
background: #ffffffed;
    padding-bottom: 2vh;

  }

  .menu_right
  {
width: 22.22vw !important;
    position: absolute;
    right: 0vw;
    top: 0;
    background-color: #000000e6;
    color: white;
    padding-bottom: 3vh;
  }

  .menu_left a,
.menu_right a
  {
    display: block;
    padding-left: 5vh
  }

  .menu_left a:hover
  {
  background-color: #1156ffd6;
  text-decoration: none !important;
  }
.menu_right a:hover{
  background: #ff2e38;
  text-decoration: none !important;
}
.upper_menu{
  padding-left: 0.5vh !important
}
.menu_right a
{
  color: white !important;
}

#fps
{
  display: none !important;
}

.bottom_shadow
{
  opacity: 0 !important;
  display: none !important
}

.right_shadow
{
  display: none;
}













/*--------------------------------------------------------------
# Mobile_Menu
--------------------------------------------------------------*/


#wrap_d3cube
{
  width: 100%;
  height: 100%;
}

.cube_animate
{
  transform: rotateX(-22deg) rotateY(38deg) rotateZ(0deg) scaleX(0.3) !important;
}

#d3cube
{
  width: 100vw;
  height: 100vw;
  top: 50vw;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg) scaleX(0.3);
  -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg) scaleX(0.3);
  -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg) scaleX(0.3);
  margin: auto;
  position: relative;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

#d3cube > div
{
  position: absolute;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 100vw;
  height: 56.25vw;
  float: left;
  overflow: hidden;
  opacity: 0.85;
}

#side1
{
  height: 100vw !important;
  transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(50vw);
  -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(50vw);
  -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(50vw);
  background-color: #FFF;
}

#side2
{
  transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(50vw);
  -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(50vw);
  -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(50vw);
  background-color: #ffaf1c;
}

#side3
{
  transform: translateX(0px) translateY(0px) translateZ(50vw);
  -moz-transform: translateX(0px) translateY(0px) translateZ(50vw);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(50vw);
  background-color: #58d568;
}

#side4
{
  transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(50vw);
  -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(50vw);
  -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(50vw);
  background-color: #ed3030;
}

#side5
{
  transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(50vw);
  -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(50vw);
  -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(50vw);
  background-color: #1c5ffe;
}

.top_title_mobile
{
  display: none;
}
















































/*!
Theme Name: _digitalcanon_0209_updated
Theme URI: https://underscores.me/
Author: Automattic
Author URI: https://automattic.com/
Description: Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: _s_mobile
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

_s is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Media
    ## Captions
    ## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
     ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */


/*--------------------------------------------------------------
# CANON
--------------------------------------------------------------*/
































/*--------------------------------------------------------------
# FONT
--------------------------------------------------------------*/
@media (min-aspect-ratio: 81/95)
{
div, a, span
{
  font-size: 2.1vh;
  line-height: 2.6vh;
}

.artworks .el_title,
.sec_title,
.context_l_extra
{
  font-size: 2.1vh;
  line-height: 2vh;
}

.menu .upper_menu,
.context_l_title
{
  font-size: 3.5vh;
  line-height: 3.5vh;
}
.menu .upper_menu{
  line-height: 3vh !important;

}
.title, .artist
{
  font-size: 4.8vh;
  line-height: 4vh;
}

.sup_span, 
h6,
h6 span,
h6 a,
.reflection,
.reflection span,
.reflection a,
{
  font-size: 1.8vh;
  font-weight: 500 !important;
  margin: 0;
}

sup
{
  font-size: 1.2vh;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}




































/*--------------------------------------------------------------
# Top_title
--------------------------------------------------------------*/

.top_title
{
  width: 100vw;
  height: 4vh;
  position: fixed;
  left: 0;
  top: 0;
  color: white !important;
  z-index: 100000;
}

.top_title a,
.top_title div,
.top_title span
{
  position: absolute;
  margin: 0;
  padding: 0;
  color: white !important;
  display: inline-block;
  line-height: 2vh !important
}

.go_btn_back , .go_btn_front
{
  position: absolute;
  width: 100%;
  height: 100%;
  display: inline-block;
}

.go_btn_back:hover , .go_btn_front:hover
{
  cursor: pointer;
  text-decoration: underline !important;
}

.go_btn_front
{
  display: none !important;
}

.top_title .column1
{
  background-color: #000000e6;
  width: 33.33vw;
  height: 50%;
}

.top_title .column3
{
    background-color: #000000e6;
    width: 51.4vw;
    left: 33.33vw;
    height: 50%;
}

.top_title .column4
{
    background-color: #000000e6;
    width: 7.65vw;
    left: 81.25vw;
    height: 50%;
}
.page-template-page_menu .top_title .column4{
  width: 18.75vw!important
}

.top_title .column5
{
  background-color: #000000e6;
  width: 11.11vw;
  left: 88.87vw;
  height: 50%;
}

.column_ani
{
  /*height: 100% !important;*/
}

#intro_btn
{
  cursor: pointer;
    /*padding-left: 50%;*/;
}



































/*--------------------------------------------------------------
# Rotation
--------------------------------------------------------------*/
#pivot
{
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(0deg) scaleZ(0.05) scaleY(1.155) translateZ(-50vw);
  position: relative;
  position: absolute;
  position: fixed;
  transform-origin: top;
  top: 0;
  transition: transform 1.5s;
  transition-timing-function: cubic-bezier(.17,1.02,.66,.99);
}

.pivot_animate
{
  transform: rotateX(-30deg) rotateY(-180deg) rotateZ(0deg) scaleZ(0.05) translateZ(50vw) scaleY(1.155) !important;
}

.pivot_in_animate
{
  transform: rotateX(-30deg) rotateY(-360deg) rotateZ(0deg) scaleZ(0.05) translateZ(-50vw) scaleY(1.155) !important;
}

.side_wrap_right, .side_wrap_left
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  float: left;
  transform: rotateY(90deg) translateZ(50vw);
  -moz-transform: rotateY(90deg) translateZ(50vw);
  -webkit-transform: rotateY(90deg) translateZ(50vw);
  background: linear-gradient(#7595f8, #7595f86b, #cacaca54);
  transform-origin: top;
}

.side_wrap_left
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  float: left;
  transform: rotateY(-90deg) translateZ(50vw);
  -moz-transform: rotateY(-90deg) translateZ(50vw);
  -webkit-transform: rotateY(-90deg) translateZ(50vw);
  background: linear-gradient(#7595f8, #7595f86b, #cacaca54);
  transform-origin: top;
}

.top_wrap
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  float: left;
  transform: rotateX(90deg) translateY(50vw) translateZ(100vw);
  -webkit-transform: rotateX(90deg) translateY(50vw) translateZ(100vw);
  transform-origin: bottom;
  background: linear-gradient(to right, rgba(255, 255, 255,0.75),rgba(255, 255, 255, 0));
  overflow: hidden !important;
}

#back_content
{
  position: absolute;
  float: left;
  transform: rotateY(180deg) translateZ(50vw);
  -webkit-transform: rotateY(180deg) translateZ(50vw);
  transform-origin: top;
  overflow: visible;
  transition: transform 1.5s;
  transition-timing-function: cubic-bezier(.17,1.02,.66,.99);
  /*background-color: #e7ecfe*/
}

#front_content
{
  opacity: 1;
  position: relative;
  float: left;
  margin-top: 0vh;
  transform: translateZ(50vw) scaleY(1);
  -webkit-transform: translateZ(50vw) scaleY(1);
  transform-origin: top;
  -webkit-transform-origin: top;
  transition: transform 1.5s;
  transition-timing-function: cubic-bezier(.17,1.02,.66,.99);
}

#fixed_front_content
{
  height: auto;
  position: relative;
  overflow: visible !important;
  top: 0vh;
}

.site-content
{
  width: 100vw;
  height: 92vh;
  left: 0;
  overflow: auto;
  position: relative;
}
}






















/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
body
{
  background-color: #b4b4b3;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.body_animate
{
  background-color: #272727;
}

div, a
{
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

p
{
  margin: 0;
}

.images_line
{
  pointer-events: none;
  position: absolute !important;
  width: 27.78vw!important;
  left: 72.15vw !important;
}

.images_line .el_wrap
{
  width: 100% !important;
}



































/*--------------------------------------------------------------
# Backside
--------------------------------------------------------------*/
.back .content-area
{
  position: relative;
}
.back .title{
    color: white !important
}
.context_l .el_wrap div
{color:white !important;
    /*display: none;*/;
}
.context_l .el_wrap .el_title{
    z-index: 100

}
.context_l
{
  overflow: hidden;
}
.fake_longlist_title,
.context_l .el_wrap,
.fake_longlist_cat
{
  height: 4vh;
    border-top: 1.2px solid white;
    /*mix-blend-mode: multiply;*/
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  float: left;
  z-index: 10000;
  background-color: none !important
}
.fake_longlist_title,
.fake_longlist_cat{
  top: 3vh;
  display: none;
  color: black
}
.fake_longlist_cat div{
    display: inline-block;
    float: left;
  background: #ff2e38 !important;
  color: black
}
.context_autoheight{
  height: auto !important;
}
.fake_longlist_title{
  height: 4vh !important;
  margin-top: -1vh;
  color: black
}
.fake_longlist_title div{
  background: #ff2e38 !important;
  color: black
}
.context_l .el_wrap .context_l_title{
  background-color: #000000e6;
}
.context_l .el_wrap .context_l_title:hover
{
  background: #ff2e38;
}

.context_l .el_wrap:nth-child(3n+1)
{
}

.context_l .el_wrap:nth-child(2) .bottom_shadow,
.context_l .el_wrap:nth-child(3) .bottom_shadow,
.context_l .el_wrap:nth-child(4) .bottom_shadow
{
  display: none;
}

.front .sec
{
  overflow: hidden !important;
    /*transform-style: flat;*/
  padding-bottom: 2vh;
    /*margin-top: -3vh*/;
}
.front .sec:last-child
{
  padding-bottom: 0vh;
}

.fixed .front .sec
{
  padding-bottom: 0vh;
}

.longlist_el
{
  background: #000000e6;
}

.context_l_title
{
  position: relative;
  padding-left: 27.75vw;
  height: 4vh;
}

.context_l_cat_title
{
  position: absolute;
}

.context_l_extra
{
  position: absolute;
  left: 77.8vw;
  top: 0;
}

.sec_longlist .el_wrap,
.fake_longlist_cat
{
    width: 100%;
  height: 2.6vh;
    /*opacity: 0*/;
}

.sec_longlist .longlist_el
{
    padding-left: 0.5vh;
  display: inline-block;
  float: left;
  height: 100%;
}

.sec_longlist .longlist_voornaam,
.fake_longlist_cat .longlist_voornaam
{
  width: 16.65vw;
  left: 5.55vw
}

.sec_longlist .longlist_tussenvoegsel,
.fake_longlist_cat .longlist_tussenvoegsel
{
  width: 5.55vw;
}

.sec_longlist .longlist_achternaam__organisatienaam,
.fake_longlist_cat .longlist_achternaam__organisatienaam
{
  width: 16.65vw;
}

.sec_longlist .longlist_werk,
.fake_longlist_cat .longlist_werk
{
  width: 27.85vw;
}

.sec_longlist .longlist_1960,
.fake_longlist_cat .longlist_1960
{
  width: 5.55vw;
  border-left: 1px solid #0000003d 
}

.sec_longlist .longlist_1970,
.fake_longlist_cat .longlist_1970
{
  width: 5.55vw;
}

.sec_longlist .longlist_1980,
.fake_longlist_cat .longlist_1980
{
  width: 5.55vw;
}

.sec_longlist .longlist_1990,
.fake_longlist_cat .longlist_1990
{
  width: 5.55vw;
}

.sec_longlist .longlist_2000,
.fake_longlist_cat .longlist_2000
{
  width: 5.55vw;
}

.sec_longlist .longlist_2010,
.fake_longlist_cat .longlist_2010
{
  width: 5.55vw;
}

.sec_about
{
  opacity: 1;
  display: none
}

.back_wrap
{
  top: 10vh;
  right: 5vh;
  background: #c8d8ff40;
  position: absolute;
  width: calc(100vw - 5vh);
  transform-origin: top;
  -webkit-transform-origin: top;
  height: 100vh;
  filter: contrast(0.08) brightness(1);
  -webkit-transition: all .1.5s;
  -moz-transition: all .1.5s;
  -o-transition: all .1.5s;
  transition: all .1.5s;
}

.back_wrap_animate
{
  position: relative;
  right: 0;
  width: 100%;
  opacity: 1;
  top: 0;
  filter: contrast(1) brightness(1);
  background: #c8d8ff40 !important;
}

.back
{
  position: relative;
  left: 0vw;
  transform-origin: top;
  -webkit-transform-origin: top;
  top: -1vh;
  width: 100%;
  z-index: 10;
  -webkit-transition: all .1.5s;
  -moz-transition: all .1.5s;
  -o-transition: all .1.5s;
  transition: all .1.5s;
}

.about
{
  background-color: #000000e6;
}

.sec_about
{
  padding-left: 5.55vw;
  padding-right: 5.55vw;
}

.sec_about span,.sec_about p
{
  display: inline-block;
}

.back .sec_title
{
  background: #ff2e38;
  height: 2vh;
  position: relative;
  z-index: 100000;
  color: black !important
}
.longlist .longlist_button:hover,
.colophon:hover{
  background-color: #000000e6!important;
  color:white !important;
}
#fixed_front_content
{
  position: relative;
  float: left;
  transform: translateX(0px) translateY(0px) translateZ(50vw) scaleY(1);
  -webkit-transform: translateX(0px) translateY(0px) translateZ(50vw) scaleY(1);
  float: left;
  transform-origin: top;
  -webkit-transform-origin: top;
}

.front_wrap
{
  background: linear-gradient(to right, rgba(210, 210, 210, 0.4),  rgba(210, 210, 210, 0.24)20%,  rgba(210, 210, 210, 0.24)80%);
    /*background : linear-gradient(to right, rgba(131, 173, 175, 0.4),  rgba(255,255,255,0.1));*/
  transform-origin: top;
  -webkit-transform-origin: top;
  width: 100vw;
  left: 0vw;
  margin-left: 0;
  overflow: auto;
  overflow: hidden;
  top: 0;
  -webkit-transition: pointer-events 1.5s;
  -moz-transition: pointer-events 1.5s;
  -o-transition: pointer-events 1.5s;
  transition: pointer-events 1.5s;
  -webkit-transition: width 1.5s 0.7s;
  -moz-transition: width 1.5s 0.7s;
  -o-transition: width 1.5s 0.7s;
  transition: width 1.5s 0.7s;
  -webkit-transition: margin-left 1.5s 0.7s;
  -moz-transition: margin-left 1.5s 0.7s;
  -o-transition: margin-left 1.5s 0.7s;
  transition: margin-left 1.5s 0.7s;
  -webkit-transition: opacity 1.5s;
  -moz-transition: opacity 1.5s;
  -o-transition: opacity 1.5s;
  transition: opacity 1.5s;
}

.front_wrap_animate
{
    pointer-events: none;
    width: 94.45vw;
    margin-left: 5.55vw;
    opacity: 0.2;
}

.fixed .front_wrap
{
  margin-top: 2vh;
  padding-bottom: 0;
}

.fixed_front_wrap_ani
{
  margin-top: 4vh;
}

.front
{
  position: relative;
  transform-origin: top;
  -webkit-transform-origin: top;
  left: 0vw;
  width: 100vw;
}

.back .append_div
{
  padding: 0.5vh;
  padding-top: 0.2vh;
    /*background-color:black*/;
}

.back_intro
{
    box-shadow: 0vh 0vh 2vh black;
  display: block !important;
  float: left !important;
  margin-left: 0vh !important;
  position: absolute !important;
  background-color: #000000e6;
  height: auto !important;
  z-index: 100000;
    width: 22.22%;
    left: auto !important;
    right: 0 !important;
    top: 14vh;
    padding:0.5vh;
}

.back_intro:hover
{
  background: #ff2e38;
}

.back #primary
{
  margin-top: 3vh;
  pointer-events: auto;
  margin-bottom: 3vh;  
  min-height: 0.0000001vh;
}
.back .longlist{
    height: 4vh;
    /*margin-bottom: -1vh !important;*/
  }

.nonempty
{
  background: rgba(0,0,0,0) !important;
}



































/*--------------------------------------------------------------
# Dots
--------------------------------------------------------------*/
.side_wrap_left .side .right_shadow_dots
{
  right: 0;
  position: absolute;
  width: 30vh;
  transform: scaleY(0.1);
  transform-origin: left top;
  -webkit-transform: scaleY(0.1);
  -webkit-transform-origin: left top;
  height: 1000%;
}

.side_wrap_left .side .right_shadow_dots::before
{
  content: "";
  transform: skewY(45deg) scal;
  transform-origin: left top;
  -webkit-transform: skewY(45deg) scal;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots_black.png');
  width: 100%;
  height: 100%;
  background-position: top left;
  position: absolute;
}

.side_wrap_left .side_back .right_shadow_dots
{
  right: 0;
  position: absolute;
  width: 30vh;
  transform: scaleY(0.1);
  transform-origin: left top;
  -webkit-transform: scaleY(0.1);
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots_black.png');
  height: 1000%;
}

.right_shadow
{
  opacity: 0.75;
  position: absolute;
  top: 0;
  overflow: hidden;
  transform: skewY(45deg);
  transform-origin: left top;
  -webkit-transform: skewY(45deg);
  -webkit-transform-origin: left top;
  float: left;
  display: none!important
  width: 10vh;
  height: calc(100% - 10vh);
  background: linear-gradient(to right ,rgb(246, 246, 246) ,rgba(246, 246, 246, 0.5) 30%,rgba(246, 246, 246, 0));
}

.right_shadow_ani
{
  opacity: 0.1;
}

.right_shadow::before
{
  filter: invert(0.2);
  content: "";
  transform: skewY(-45deg);
  transform-origin: left top;
  -webkit-transform: skewY(-45deg);
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots_l.png');
  background-size: contain;
  width: 20%;
 /* something ridiculously big */
  height: 300%;
 /* something ridiculously big */
  background-position: top left;
  position: absolute;
}

.bottom_shadow
{
  overflow: hidden;
  position: relative;
  transform: skewX(45deg);
  transform-origin: left top;
  -webkit-transform: skewX(45deg);
  -webkit-transform-origin: left top;
  height: 10vh;
  float: left;
  width: calc(100% - 3vh);
  background: linear-gradient(#2d65f45c,rgba(246, 246, 246, 0.04)60%,rgba(246, 246, 246, 0)61%);
}
.sec_context .line:last-child .append_div{
  /*columns: 2*/

}
.bottom_shadow_ani
{
  opacity: 0.3;
}

.bottom_shadow::before
{
  filter: invert(0.3);
  content: "";
  transform: skewX(-45deg);
  transform-origin: left top;
  -webkit-transform: skewX(-45deg);
  -webkit-transform-origin: left top;
  background-image: url('bottom_shadow_dots.png');
  background-size: contain;
  width: 150%;
 /* something ridiculously big */
  height: 20%;
 /* something ridiculously big */
  background-position: top left;
  position: absolute;
}

.back .bottom_shadow
{
  filter: invert(0.6);
  transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  margin-top: -3vh;
  display: none;
}

.back .bottom_shadow::before
{
  content: "";
  transform: skewX(-45deg) rotate(180deg);
  transform-origin: center 66.66%;
  -webkit-transform: skewX(-45deg) rotate(180deg);
  -webkit-transform-origin: center 66.66%;
  background-image: url('bottom_shadow_dots.png');
  background-size: contain;
  width: 150%;
  height: 20%;
  background-position: top left;
  position: absolute;
  display: none;
}

.artworks .sec_credits .el_wrap:nth-child(1) .right_shadow,
.artworks .sec_credits .el_wrap:nth-child(2) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(1) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(2) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(1) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(2) .right_shadow
{
  left: 33.3vw;
}

.artworks .sec_credits .el_wrap:nth-child(3) .right_shadow,
.artworks .sec_credits .el_wrap:nth-child(4) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(3) .right_shadow,
.artworks .sec_context .el_wrap:nth-child(4) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(3) .right_shadow,
.artworks .sec_discription .el_wrap:nth-child(4) .right_shadow
{
  left: 27.75vw;
}

.back .right_shadow
{
  transform: rotate(180deg) skewY(45deg);
  -webkit-transform: rotate(180deg) skewY(45deg);
  filter: invert(0.6);
  left: 3vh;
  right: auto;
  height: 100%;
  transform-origin: left;
  -webkit-transform-origin: left;
  display: none;
}

.bottom_shadow_backtop
{
  position: absolute !important;
  transform: skew(45deg) scaleY(-1) !important;
  -webkit-transform: skew(45deg) scaleY(-1) !important;
  filter: invert(0.6) !important;
  width: 100% !important;
    /* top: -3vh; */
    /* left: -3vh; */;
}

.longlist .bottom_shadow_backtop, .about .bottom_shadow_backtop
{
  margin-top: 0;
}

.bottom_shadow_backtop::before
{
  transform: skewX(45deg) !important;
  -webkit-transform: skewX(45deg) !important;
}

.context_l_conetents
{
  color: white;
  padding-bottom:10vh;
    background-color: #00000000;
  margin-left: 16.65vw;
  width: 65.65vw;
  position: relative;
  cursor: pointer;

    font-size: 2.45vh !important;
    line-height: 3.2vh !important;
}
.context_l_conetents div, 
.context_l_conetents a, 
.context_l_conetents span,
.sec_about p,
.sec_about span{
    font-size: 2.45vh !important;
    line-height: 3.2vh !important;
    font-weight: 400

}
.context_l_conetents h6 a,
.context_l_conetents h6 div, 
.context_l_conetents h6, 
.context_l_conetents h6 span{
    font-size: 1.8vh !important;
    line-height: 2.6vh !important;
}


































/*--------------------------------------------------------------
# front
--------------------------------------------------------------*/
.front .append_div,
.dropdown .dropdown_wrap div
{
    padding-bottom: 0.5vh !important;
  width: 100%;
  background-color: #ffffffed;
  padding: 0.5vh;
  padding-top: 4vh;
  margin-top: -2vh;
  float: left;
  min-height: 6.5vh;
  height: auto;
  -webkit-transition: height 3.5s;
  -moz-transition: height 3.5s;
  -o-transition: height 3.5s;
  transition: height 3.5s;
}
.fixed .append_div{
  padding-top: 2vh !important;
    margin-bottom: 1vh;
}
.fixed .append_div::after { 
  height: 2vh !important;
  content: <br>;
}
.firstline{
    margin-top: -1vh;}
.append_div_ani
{
  /*height: 6vh !important;*/
}

.title, .artist
{
  height: 6vh;
  width: 100% !important;
}

.sec_discription .append_div,
.sec_context .append_div
{
  padding-top: 4vh;
  padding-bottom: 2vh;
}

.sec_discription .right_shadow,
.sec_context .right_shadow
{
  right: 0;
}
 }