/* ==|== primary styles ======
D'après le Projet: Angry Bear LLC
(Author: j.Bernard
Date: January 2012)
=============== */
@import url("reset.css");
html {
  overflow-x: hidden;
  background: linear-gradient(to bottom, rgba(233,185,28,0.5) 0%, rgba(228,185,33,0.5) 1%, rgba(50,191,210,0.5) 48%, rgba(54,191,206,0.5) 49%, rgba(233,185,28,0.5) 100%);
  background-size: cover;
  height: 200vh;
}
html ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(255,255,255,0.51);
  background-color: rgba(19,46,5,0.51);
  border-radius: 10px;
}
::-webkit-scrollbar {
  width: 5px;
  background-color: rgba(255,255,255,0.2);
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #111;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#e9a616), to(#c05d07), color-stop(0.6, #eb1e55));
}
body {
  font-family: 'Open Sans Condensed', sans-serif;
  line-height: 1.2em;
  font-size: 9px;
  width: 320px;
}
@media screen and (min-width: 320px) {
  body {
    font-size: calc(9px + 10 * ((100vw - 320px) / 960));
    width: calc(320px + 960 * ((100vw - 320px) / 960));
  }
}
@media screen and (min-width: 600px) {
  body {
    width: calc(769px + 511 * ((100vw - 600px) / 680));
  }
}
@media screen and (min-width: 1280px) {
  body {
    font-size: 19px;
    width: 1280px;
  }
}
* a {
  text-decoration: none;
  color: #9d370b;
}
* a:hover {
  color: #85390c;
}
* li {
  list-style: none;
}
* :hover {
  cursor: point;
}
em,
em.title {
  font-style: italic;
}
.wb:before {
  content: "王兵 ";
  color: rgba(0,255,255,0.4);
}
.wb:after {
  content: "WANG BING";
  color: #ffa500;
}
/* --- Container-----------------------------*/
#container {
  width: 100%;
}
/* ---  Nav--------*/
#nav {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 66px;
  background: linear-gradient(to bottom, #000 0%, rgba(38,115,113,0.9) 59%, #5b7326 100%);
}
#nav #nav_logo {
  display: block;
  position: relative;
  height: 66px;
  margin-left: 5px;
}
/* --- Nav Medaillon - Static State ---------------------*/
#nav_medaillon a {
  display: block;
  position: absolute;
  z-index: 100;
  float: left;
  left: 5px;
  top: 5px;
  height: 33px;
  width: 50px;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/footer_nav_medaillon.png") no-repeat 0 0;
  background-size: 60%;
}
/* --- Nav Medaillon - Over State ----------------------*/
#nav_medaillon a:hover {
  background: url("http://www.lacor.info/film/wang_bing/lib/img/footer_nav_medaillon.png") no-repeat 0 -33px;
  background-size: 60%;
}
/* --- Nav  menus bar--------------------------*/
#nav #nav_buttons {
  display: inline-block;
  position: fixed;
  left: 75%;
  transform: translate(-50%);
  top: 0;
  width: 100%;
  height: 33px;
  z-index: 100;
}
#nav_buttons ul {
  list-style: none;
  margin: 0px;
  clear: both;
}
#nav_buttons ul li,
.wb {
  float: left;
  height: 66px;
  display: inline-block;
  margin: 35px 1em auto;
}
#nav_buttons ul li:first-child,
.wb:first-child {
  margin-left: 2em;
}
#nav_buttons ul li:last-child,
.wb:last-child {
  margin-right: 2em;
}
#nav_buttons ul li a {
  display: inline-block;
  height: 66px;
  color: rgba(0,255,255,0.4);
}
#nav_buttons ul li a:hover {
  color: rgba(182,166,139,0.3);
}
a.active {
  color: #ffa500 !important;
}
#work_title {
  text-align: center;
  font-size: 0.9em;
  margin-top: 80px;
  padding: 1em 0;
  color: #fff8dc;
}
/* --- References ---------------------------*/
#container #references_intervalle {
  display: block;
  width: 100%;
  margin: 0 auto;
  background-position: center;
}
#container #references {
  display: block;
  width: 100%;
}
#references #references_section {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100%;
  background-color: transparent;
}
#references_section #references_quote {
  display: block;
  position: absolute;
  width: 100%;
  height: 117px;
  left: 50%;
  transform: translate(-50%);
  top: 79px;
  color: #653117;
  line-height: 1.2em;
  font-size: 1.7em;
  letter-spacing: 0.1em;
  text-align: left;
  margin-left: 28vw;
  text-shadow: 1px 1px 1px #555;
}
#references_section #references_quote span {
  display: block;
  position: relative;
  line-height: 1rem !important;
  font-size: 0.8em;
}
#references_section #references_nav {
  display: block;
  position: absolute;
  top: 189px;
  left: 21px;
  height: 318px;
  width: 28vw;
}
#references_nav li {
  text-indent: -9999px;
  cursor: pointer;
}
#references_nav #director_tab {
  display: block;
  position: relative;
  width: 28vw;
  height: 64px;
  margin-top: 20px;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/references_tab_director.png") no-repeat 0 0;
}
@media screen and (max-width: 600px) {
  #references_nav #director_tab {
    background-size: 80%;
    background-position: 50% 0;
    height: 40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #director_tab {
    background-size: 120%;
    height: 40px;
  }
}
#references_nav #director_tab:hover {
  background-position: 0px -64px;
  border-radius: 20%;
}
@media screen and (max-width: 600px) {
  #references_nav #director_tab:hover {
    background-position: 50% -40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #director_tab:hover {
    background-position: 0px -40px;
  }
}
#references_nav #director_tab .ui-selected {
  background-position: 0px -64px;
  cursor: default;
  background-color: rgba(0,255,255,0.4);
}
@media screen and (max-width: 600px) {
  #references_nav #director_tab .ui-selected {
    background-position: 0px -40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #director_tab .ui-selected {
    background-position: 50% -40px;
  }
}
#references_nav #films_tab {
  display: block;
  position: relative;
  width: 28vw;
  height: 64px;
  margin-top: 20px;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/references_tab_films.png") no-repeat 0 0;
}
@media screen and (max-width: 600px) {
  #references_nav #films_tab {
    background-size: 80%;
    background-position: 50% 0;
    height: 40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #films_tab {
    background-size: 120%;
    height: 40px;
  }
}
#references_nav #films_tab:hover {
  background-position: 0px -64px;
  border-radius: 20%;
}
@media screen and (max-width: 600px) {
  #references_nav #films_tab:hover {
    background-position: 50% -40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #films_tab:hover {
    background-position: 0px -40px;
  }
}
#references_nav #films_tab .ui-selected {
  background-position: 0px -64px;
  cursor: default;
  background-color: rgba(0,255,255,0.4);
}
@media screen and (max-width: 600px) {
  #references_nav #films_tab .ui-selected {
    background-position: 0px -40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #films_tab .ui-selected {
    background-position: 50% -40px;
  }
}
#references_nav #themes_tab {
  display: block;
  position: relative;
  width: 28vw;
  height: 64px;
  margin-top: 20px;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/references_tab_themes.png") no-repeat 0 0;
}
@media screen and (max-width: 600px) {
  #references_nav #themes_tab {
    background-size: 80%;
    background-position: 50% 0;
    height: 40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #themes_tab {
    background-size: 120%;
    height: 40px;
  }
}
#references_nav #themes_tab:hover {
  background-position: 0px -64px;
  border-radius: 20%;
}
@media screen and (max-width: 600px) {
  #references_nav #themes_tab:hover {
    background-position: 50% -40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #themes_tab:hover {
    background-position: 0px -40px;
  }
}
#references_nav #themes_tab .ui-selected {
  background-position: 0px -64px;
  cursor: default;
  background-color: rgba(0,255,255,0.4);
}
@media screen and (max-width: 600px) {
  #references_nav #themes_tab .ui-selected {
    background-position: 0px -40px;
  }
}
@media screen and (max-width: 320px) {
  #references_nav #themes_tab .ui-selected {
    background-position: 50% -40px;
  }
}
/* --- References Content 1 --- partie 3 col------------*/
#references_section #references_content {
  display: block;
  position: absolute;
  width: 72vw;
  top: 189px;
  left: 31vw;
  height: 380px;
  color: #0d3f3f;
  text-align: justify;
  font-size: 1.1em;
  line-height: 1.3em;
}
@media screen and (min-width: 320px) {
  #references_section #references_content {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #references_section #references_content {
    height: 500px;
  }
}
#references_section #references_content a {
  color: #692f17;
}
#references_section #references_content a:hover {
  color: #d66f43;
  text-shadow: 1px 1px 0px #43d6d6;
}
#references_content ul {
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0 0 0 7%;
  list-style: none;
}
#references_content ul li {
  padding-bottom: 1.4em;
}
.li:before {
  content: '▸ ';
  color: #0cb0ae;
}
.chapt {
  font-weight: bold;
  color: #ff4500;
  font-size: 1.1em;
  text-transform: uppercase;
}
.theme {
  font-weight: bold;
  color: #0cb0ae;
  font-size: 1.1em;
  margin-bottom: 1.5em;
  font-variant: small-caps;
}
#references_content ul li.title,
#references_content ul li em.title {
  font-weight: bold;
}
/* --- References Content 2--- partie 2col------------*/
ul.right_column,
ul.left_column {
  display: block;
}
ul.right_column li {
  left: 1em;
}
ul.left_left_column {
  display: block;
  position: absolute;
  width: 100%;
  float: left;
  left: -115%;
  top: 350px;
}
ul.right_right_column {
  display: block;
  position: absolute;
  width: 100%;
  top: 350px;
  float: right;
  left: 0;
}
/* --- Director Content --------------------------*/
#references_content #director_content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 380px;
  width: 50%;
}
@media screen and (min-width: 320px) {
  #references_content #director_content {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #references_content #director_content {
    height: 500px;
  }
}
#director_content #director_callout {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 16vw;
  width: 16vw;
  background: url("https://www.lacor.info/film/wang_bing/lib/img/references_callout_director.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 600px) {
  #director_content #director_callout {
    top: 180px;
    left: -50%;
  }
}
#director_content #director_listing {
  display: block;
  position: absolute;
  top: 0;
  left: 20vw;
  height: 380px;
  width: 100%;
}
@media screen and (min-width: 320px) {
  #director_content #director_listing {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #director_content #director_listing {
    height: 500px;
  }
}
/* --- Films Content -----------------------*/
#references_content #films_content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 380px;
  width: 50%;
}
@media screen and (min-width: 320px) {
  #references_content #films_content {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #references_content #films_content {
    height: 500px;
  }
}
#references_content #films_callout {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 16vw;
  width: 16vw;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/references_callout_films.png") no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 600px) {
  #references_content #films_callout {
    top: 180px;
    left: -50%;
  }
}
#references_content #films_listing {
  display: block;
  position: absolute;
  top: 0;
  left: 20vw;
  height: 380px;
  width: 100%;
}
@media screen and (min-width: 320px) {
  #references_content #films_listing {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #references_content #films_listing {
    height: 500px;
  }
}
/* --- Themes Content -------------------------*/
#references_content #themes_content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 380px;
  width: 50%;
}
@media screen and (min-width: 320px) {
  #references_content #themes_content {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #references_content #themes_content {
    height: 500px;
  }
}
#references_content #themes_callout {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 16vw;
  width: 16vw;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/references_callout_themes.png") no-repeat no-repeat;
  background-size: contain;
  background-position: center;
}
@media screen and (max-width: 600px) {
  #references_content #themes_callout {
    top: 180px;
    left: -50%;
  }
}
#references_content #themes_listing {
  display: block;
  position: absolute;
  top: 0;
  left: 20vw;
  height: 380px;
  width: 100%;
}
@media screen and (min-width: 320px) {
  #references_content #themes_listing {
    height: calc(380px + 120 * ((100vh - 320px) / 960));
  }
}
@media screen and (min-width: 1280px) {
  #references_content #themes_listing {
    height: 500px;
  }
}
/* --- References Footer  --------------------*/
#references_section #references_footer {
  display: block;
  clear: both;
  position: absolute;
  top: 497px;
  left: 21px;
  width: 90%;
  height: 3px;
  background: url("http://www.lacor.info/film/wang_bing/lib/img/content_divider.png") no-repeat 0 0;
}
/* --- (min-width: 1365px) -----------------------------------------*/
mq-bigdesktop #nav {
  position: relative;
}
mq-bigdesktop #references_section #references_content {
  display: block;
  position: absolute;
  top: 255px;
  left: 400px;
  color: #2a2e2e;
  text-align: justify;
  font-size: 1.4em;
  line-height: 1.5em;
}
mq-bigdesktop #references_content #director_callout,
mq-bigdesktop #references_content #films_callout,
mq-bigdesktop #references_content #themes_callout {
  left: -130px;
}