/********************************************************************************
 * fonts
 ********************************************************************************/
@font-face {
  font-family: 'London';
  src: url('fonts/London.eot');
  src: url('fonts/London.eot?#iefix') format('embedded-opentype'),
  url('fonts/London.woff') format('woff'),
  url('fonts/London.ttf') format('truetype'),
  url('fonts/London.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HeliosCondLight';
  src: url('fonts/HeliosCondLight.eot');
  src: url('fonts/HeliosCondLight.eot?#iefix') format('embedded-opentype'),
  url('fonts/HeliosCondLight.woff') format('woff'),
  url('fonts/HeliosCondLight.ttf') format('truetype'),
  url('fonts/HeliosCondLight.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'HeliosCondBlack';
  src: url('fonts/HeliosCondBlack.eot');
  src: url('fonts/HeliosCondBlack.eot?#iefix') format('embedded-opentype'),
  url('fonts/HeliosCondBlack.woff') format('woff'),
  url('fonts/HeliosCondBlack.ttf') format('truetype'),
  url('fonts/HeliosCondBlack.svg#open_sansbold') format('svg');
  font-weight: normal;
  font-style: normal;
}

/********************************************************************************
 * global styles
 ********************************************************************************/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  color: inherit;
  text-decoration: inherit;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, body {
  font-family: Arial;
  font-size: 10px;
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/********************************************************************************
 * main content styles
 ********************************************************************************/
#content {
  position: relative;
  margin: 0 auto;
  width: 80em;
  height: 60em;
  -webkit-transform: rotateZ(0);
  -moz-transform: rotateZ(0);
  -ms-transform: rotateZ(0);
  -o-transform: rotateZ(0);
  transform: rotateZ(0);
}

.corner-button {
  position: absolute;
  bottom: 0;
  width: 9.3em;
  height: 7.8em;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 100;
  cursor: pointer;
}
.corner-button.left {
  left: 0;
  background-image: url(images/corner_left.png);
}
.corner-button.right {
  right: 0;
  background-image: url(images/corner_right.png);
}

#slide2,
#slide3,
#slide4,
#slide5 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -ms-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

#slide2 {
  background-image: url(images/slide2/back1_1.png);
}
#slide3 {
  background-image: url(images/slide3/back1.jpg);
}
#slide5 {
  background-color: #663300;
  /*background-image: url(images/slide5/back4_2.png);*/
}

/********************************************************************************
 * slide 2
 ********************************************************************************/
#slide2 header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3.7em;
  font-family: "Myriad Pro";
  font-weight: normal;
  text-align: center;
  line-height: 3.7em;
  color: #ffffff;
  text-shadow: 2px 1px 6px #1a2c37;
  z-index: 10;
}

#slide2 header > span {
  font-size: 2.8em;
  vertical-align: middle;
}

#slide2 .tree1,
#slide2 .tree2,
#slide2 .tree3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/slide2/tree1.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-transition: opacity .3s linear;
  -moz-transition: opacity .3s linear;
  -ms-transition: opacity .3s linear;
  -o-transition: opacity .3s linear;
  transition: opacity .3s linear;
}

#slide2 .tree2 {
  background-image: url(images/slide2/tree2.png);
}

#slide2 .tree3 {
  background-image: url(images/slide2/tree3.png);
}

#slide2 .tree1 {
  opacity: 1;
}

#slide2.tree2 .tree1,
#slide2.tree3 .tree1,
#slide2 .tree2,
#slide2 .tree3 {
  opacity: 0;
}

#slide2.tree2 .tree2,
#slide2.tree3 .tree3 {
  opacity: 1;
}

#slide2 .leaves {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

#slide2 .leaves .leaf {
  position: absolute;
  width: 11.1em;
  height: 8.4em;
  background-image: url(images/slide2/leaf1.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "London";
  line-height: 2em;
  text-align: center;
  color: #ffffff;
  text-shadow: 2px 1px 2em rgba(0,0,0,.9);
  padding-left: 1.5em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-transition: left .3s linear, opacity .3s linear;
  -moz-transition: left .3s linear, opacity .3s linear;
  -ms-transition: left .3s linear, opacity .3s linear;
  -o-transition: left .3s linear, opacity .3s linear;
  transition: left .3s linear, opacity .3s linear;
  opacity: 1;
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

#slide2 .leaves .leaf.hide {
  opacity: 0;
}

#slide2 .leaves .leaf > span {
  font-size: 3.75em;
}
#slide2 .leaves .leaf > span > span {
  font-size: 0.533em;
}

#slide2 .leaves .leaf.type2 {
  background-image: url(images/slide2/leaf2.png);
}

#slide2 .popup {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  -webkit-transition: opacity .3s linear, visibility .3s linear;
  -moz-transition: opacity .3s linear, visibility .3s linear;
  -ms-transition: opacity .3s linear, visibility .3s linear;
  -o-transition: opacity .3s linear, visibility .3s linear;
  transition: opacity .3s linear, visibility .3s linear;
  -webkit-transform: rotateY(0);
  -moz-transform: rotateY(0);
  -ms-transform: rotateY(0);
  -o-transform: rotateY(0);
  transform: rotateY(0);
}

#slide2.tree2 .popup.show,
#slide2.tree3 .popup.show {
  opacity: 1;
  visibility: visible;
}

#slide2 .popup .wnd {
  position: absolute;
  left: 0;
  top: 4em;
  width: 52.4em;
  height: 48.4em;
  background-image: url(images/slide2/text_bg.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 2em 2.5em 3em 4em;
}

#slide2.tree2 .popup .wnd {
  left: 9.7em;
}

#slide2.tree3 .popup .wnd {
  left: 15.5em;
}

#slide2 .popup .wnd > div {
  font-family: "Myriad Pro";
  font-size: 1.7em;
  font-weight: normal;
  line-height: 1.5em;
  color: #ffffff;
}

#slide2 .popup .wnd .title {
  font-family: "London";
  font-size: 3.7em;
}
#slide2 .popup .wnd .title > span {
  font-family: "London";
  font-size: 0.5em;
}

/********************************************************************************
 * slide 2
 ********************************************************************************/
#slide3 header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3.7em;
  font-family: "Myriad Pro";
  font-weight: normal;
  text-align: center;
  line-height: 3.7em;
  color: #626b6f;
  opacity: .69;
}

#slide3 header > span {
  font-size: 3.2em;
  vertical-align: middle;
}

#slide3 .back-image {
  position: absolute;
  left: 0;
  top: 35.8em;
  width: 80em;
  height: 13em;
  background-image: url("images/slide3/s1_back_img.png");
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide3 .cap {
  position: absolute;
  left: 71em;
  top: 2.1em;
  width: 5.4em;
  height: 5.4em;
}

#slide3 .cap .image {
  position: absolute;
  left: 0;
  top: 2.3em;
  width: 4.7em;
  height: 3.5em;
  background-image: url(images/slide3/s1_cap.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide3 .cap .number {
  position: absolute;
  left: 3.5em;
  top: 0;
  font-family: "HeliosCondBlack";
  line-height: 3.3em;
  text-align: left;
  color: #3c5a72;
  white-space: nowrap;
  opacity: 1;
  -webkit-transition: opacity .5s linear;
  -moz-transition: opacity .5s linear;
  -ms-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  transition: opacity .5s linear;
}

#slide3.hideValues .cap .number {
  opacity: 0;
}

#slide3 .cap .number > span {
  font-size: 2.9em;
}

#slide3 .cap .text {
  position: absolute;
  left: -4.3em;
  top: 5.3em;
  font-family: "Myriad Pro";
  line-height: 1.7em;
  text-align: left;
  color: #3c5a72;
  width: 11em;
  white-space: nowrap;
}

#slide3 .cap .text > span {
  font-size: 1.9em;
}



#slide3 .values-layer .value {
  position: absolute;
  font-family: "HeliosCondBlack";
  line-height: 3.3em;
  text-align: left;
  color: #3c5a72;
  white-space: nowrap;
  top: 19.6em;
  opacity: 1;
  -webkit-transition: top .5s linear,opacity .5s linear;
  -moz-transition: top .5s linear,opacity .5s linear;
  -ms-transition: top .5s linear,opacity .5s linear;
  -o-transition: top .5s linear,opacity .5s linear;
  transition: top .5s linear,opacity .5s linear;
  z-index: 1;
}

#slide3.hideValues .values-layer .value {
  opacity: 0;
}

#slide3 .values-layer .value > span {
  font-size: 2.9em;
}

#slide3 .values-layer .value1 { left: 12.9em; /*top:  9.9em;*/ }
#slide3 .values-layer .value2 { left: 28.2em; /*top: 13.3em;*/ }
#slide3 .values-layer .value3 { left: 42.9em; /*top: 16.2em;*/ }
#slide3 .values-layer .value4 { left: 56.0em; /*top: 13.0em;*/ }
#slide3 .values-layer .value5 { left: 70.7em; /*top: 19.6em;*/ }

#slide3 .contries-layer .value {
  position: absolute;
  left: -100em;
  top: -100em;
  font-family: "Myriad Pro";
  line-height: 3.3em;
  text-align: left;
  color: #3c5a72;
  white-space: nowrap;
}

#slide3 .contries-layer .value > span {
  font-size: 2.4em;
}

#slide3 .contries-layer .value1 { left:  6.8em; top: 46.7em; }
#slide3 .contries-layer .value2 { left: 23.5em; top: 48.0em; }
#slide3 .contries-layer .value3 { left: 36.6em; top: 46.5em; }
#slide3 .contries-layer .value4 { left: 51.9em; top: 47.4em; }
#slide3 .contries-layer .value5 { left: 64.2em; top: 45.7em; }

#slide3 .age-layer {
  position: absolute;
  top: 54.7em;
  left: 0;
  z-index: 101;
}

#slide3 .age-layer .age.selected:after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8.8em;
  height: 5.6em;
  margin-left: -4.4em;
  margin-top: -2.8em;
  background-image: url("images/slide3/s1_age_sel_marker.png");
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  content: " ";
}

#slide3 .age-layer .age,
#slide3 .age-layer .dot {
  position: absolute;
  left: 0;
  top: 0;
  height: 2.3em;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "London";
  color: #9e261d;
}

#slide3 .age-layer .age {
  line-height: 1.4em;
  cursor: pointer;
}

#slide3 .age-layer .age.selected {
  color: #273b4b;
}

#slide3 .age-layer .age > span {
  font-size: 2.9em;
}

#slide3 .age-layer .dot {
  width: .8em;
  background-image: url(images/slide3/s1_age_dot.png);
}

#slide3 .age-layer .dot1 { left: 13.7em; }
#slide3 .age-layer .dot2 { left: 22.0em; }
#slide3 .age-layer .dot3 { left: 30.5em; }
#slide3 .age-layer .dot4 { left: 39.4em; }
#slide3 .age-layer .dot5 { left: 48.3em; }
#slide3 .age-layer .dot6 { left: 57.2em; }
#slide3 .age-layer .dot7 { left: 64.9em; }

#slide3 .age-layer .age1 {
  left: 7.4em;
  width: 4.3em;
  /*background-image: url(images/s1_v14.png);*/
}
/*#slide3 .age-layer .age1.selected {*/
  /*background-image: url(images/s1_v14a.png);*/
/*}*/

#slide3 .age-layer .age2 {
  left: 16.3em;
  width: 3.6em;
  /*background-image: url(images/s1_v15.png);*/
}
/*#slide3 .age-layer .age2.selected {*/
  /*background-image: url(images/s1_v15a.png);*/
/*}*/

#slide3 .age-layer .age3 {
  left: 24.5em;
  width: 4.3em;
  /*background-image: url(images/s1_v16.png);*/
}
/*#slide3 .age-layer .age3.selected {*/
  /*background-image: url(images/s1_v16a.png);*/
/*}*/

#slide3 .age-layer .age4 {
  left: 32.7em;
  width: 5.1em;
  /*background-image: url(images/s1_v17.png);*/
}
/*#slide3 .age-layer .age4.selected {*/
  /*background-image: url(images/s1_v17a.png);*/
/*}*/

#slide3 .age-layer .age5 {
  left: 41.0em;
  width: 5.8em;
  /*background-image: url(images/s1_v18.png);*/
}
/*#slide3 .age-layer .age5.selected {*/
  /*background-image: url(images/s1_v18a.png);*/
/*}*/

#slide3 .age-layer .age6 {
  left: 50.3em;
  width: 4.3em;
  /*background-image: url(images/s1_v19.png);*/
}
/*#slide3 .age-layer .age6.selected {*/
  /*background-image: url(images/s1_v19a.png);*/
/*}*/

#slide3 .age-layer .age7 {
  left: 59.3em;
  width: 3.5em;
  /*background-image: url(images/s1_v20.png);*/
}
/*#slide3 .age-layer .age7.selected {*/
  /*background-image: url(images/s1_v20a.png);*/
/*}*/

#slide3 .age-layer .age8 {
  left: 67.5em;
  width: 4.3em;
  /*background-image: url(images/s1_v21.png);*/
}
/*#slide3 .age-layer .age8.selected {*/
  /*background-image: url(images/s1_v21a.png);*/
/*}*/




#slide3 .people-layer .people {
  -webkit-transition: margin .5s linear,top .5s linear,width .5s linear,height .5s linear;
  -moz-transition: margin .5s linear,top .5s linear,width .5s linear,height .5s linear;
  -ms-transition: margin .5s linear,top .5s linear,width .5s linear,height .5s linear;
  -o-transition: margin .5s linear,top .5s linear,width .5s linear,height .5s linear;
  transition: margin .5s linear,top .5s linear,width .5s linear,height .5s linear;
}

#slide3 .people-layer .people1 {
  position: absolute;
  left: 5.3em;
  top: 20.9em;
  width: 10.6em;
  height: 22.5em;
  background-image: url(images/slide3/s1_p1.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide3 .people-layer .people2 {
  position: absolute;
  left: 23.6em;
  top: 20.9em;
  width: 8.0em;
  height: 22.5em;
  background-image: url(images/slide3/s1_p2.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide3 .people-layer .people3 {
  position: absolute;
  left: 36.5em;
  top: 20.9em;
  width: 9.3em;
  height: 22.5em;
  background-image: url(images/slide3/s1_p3.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide3 .people-layer .people4 {
  position: absolute;
  left: 50.9em;
  top: 20.9em;
  width: 7.7em;
  height: 22.5em;
  background-image: url(images/slide3/s1_p4.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide3 .people-layer .people5 {
  position: absolute;
  left: 63.5em;
  top: 20.9em;
  width: 9.0em;
  height: 22.5em;
  background-image: url(images/slide3/s1_p5.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/********************************************************************************
 * slide 3
 ********************************************************************************/
#slide4 header {
  position: absolute;
  left: 22.3em;
  top: .7em;
  width: auto;
  height: auto;
  font-family: "Myriad Pro";
  font-weight: normal;
  text-align: left;
  line-height: 2.5em;
  color: #ffffff;
  text-shadow: .3em .3em .5em rgba(0,0,0,.84);
  z-index: 101;
}

#slide4 header > span {
  font-size: 2.5em;
  vertical-align: middle;
}

#slide4 .peopleBox {
  position: absolute;
  left: 1.4em;
  top: 1.2em;
  width: 4.3em;
  height: 4.2em;
  border-radius: .4em;
  opacity: .8;
  z-index: 100;
  cursor: pointer;
}
#slide4 .peopleBox.box1 {
  background-color: rgb(102, 51, 153);
}
#slide4 .peopleBox.box2 {
  left: 5.9em;
  top: 1.2em;
  background-color: rgb(255, 102, 51);
}
#slide4 .peopleBox.box3 {
  left: 1.4em;
  top: 5.6em;
  background-color: rgb(51, 153, 204);
}
#slide4 .peopleBox.box4 {
  left: 5.9em;
  top: 5.6em;
  background-color: rgb(153, 204, 51);
}
#slide4 .peopleBox.box5 {
  left: 3.3em;
  top: 3.3em;
  background-color: rgb(255, 204, 51);
}
#slide4 .peopleBox.box6 {
  display: none !important;
}
#slide4 .peopleBox:not(.selected) {
  box-shadow: .3em .3em .5em rgba(0,0,0,.85);
}
#slide4 .peopleBox.selected {
  opacity: 1;
}

#slide4 .diagram {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

#slide4 .diagram,
#slide4 .diagram * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#slide4 .diagram .back {
  position: absolute;
  left: 0;
  top: 0;
  width: 300%;
  height: 100%;
  background-image: url(images/slide4/back3.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide4 .diagram .foregr {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/slide4/diagram.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide4 .diagram .gray_line {
  position: absolute;
  left: 0;
  top: 29.5em;
  width: 51.5em;
  height: 1em;
  background-image: url(images/slide4/gray_line.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide4 .diagram .star {
  position: absolute;
  left: 48.9em;
  top: 27.8em;
  width: 5.6em;
  height: 6.5em;
  background-image: url(images/slide4/star.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .9;
  cursor: pointer;
}

#slide4 .diagram .peopleName {
  position: absolute;
  left: 0;
  top: 0;
  width: 3em;
  height: 1em;
  cursor: pointer;
}

#slide4 .diagram .peopleName.people1 {
  left: 89.3em;
  top: 43.2em;
  width: 17.2em;
  height: 2.7em;
}
#slide4 .diagram .peopleName.people2 {
  left: 2.6em;
  top: 17.7em;
  width: 16.3em;
  height: 2.7em;
}
#slide4 .diagram .peopleName.people3 {
  left: 36.4em;
  top: 10.2em;
  width: 16.3em;
  height: 2.7em;
}
#slide4 .diagram .peopleName.people4 {
  left: 47.1em;
  top: 54.0em;
  width: 17.2em;
  height: 2.7em;
}
#slide4 .diagram .peopleName.people5 {
  left: 95.5em;
  top: 47.5em;
  width: 17.2em;
  height: 2.7em;
}
#slide4 .diagram .peopleName.people6 {
  left: 219.5em;
  top: 25.4em;
  width: 17.2em;
  height: 2.7em;
}


#slide4 .textBlock {
  position: absolute;
  left: 6.5em;
  top: 6.2em;
  width: 66.8em;
  height: 50.4em;
  border: .1em solid #656565;
  z-index: 110;
  opacity: 0;
  -webkit-transition: opacity .3s linear;
}
#slide4 .textBlock.num1 {
  background-color: rgba(102,51,153,.9);
}
#slide4 .textBlock.num2 {
  background-color: rgba(255,102,51,.9);
}
#slide4 .textBlock.num3 {
  background-color: rgba(51,153,204,.9);
}
#slide4 .textBlock.num4 {
  background-color: rgba(153,204,51,.9);
}
#slide4 .textBlock.num5 {
  background-color: rgba(255,204,51,.9);
}
#slide4 .textBlock.num6 {
  background-color: rgba(255,255,255,.9);
}
#slide4 .textBlock .photo,
#slide4 .textBlock .text1,
#slide4 .textBlock .text2 {
  position: absolute;
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: "HeliosCondLight";
  text-align: center;
}

#slide4 .textBlock .text1 > div,
#slide4 .textBlock .text2 > div {
  font-size: 2.5em;
  line-height: 1em;
}

#slide4 .textBlock .name {
  font-family: "HeliosCondBlack";
  text-align: center;
  font-size: 3.3em;
}

#slide4 .textBlock .data {
  font-family: "HeliosCondBlack";
  text-align: center;
  font-size: 2.5em;
}



#slide4 .textBlock.num1 .photo {
  left: 2.9em;
  top: .4em;
  width: 16.3em;
  height: 30.5em;
  background-image: url(images/slide4/photo1.jpg);
}

#slide4 .textBlock.num1 .text1 {
  left: 19.6em;
  top: .5em;
  width: 46.6em;
  height: auto;
}
#slide4 .textBlock.num1 .text2 {
  left: .5em;
  top: 33.0em;
  width: 65.8em;
  height: auto;
}




#slide4 .textBlock.num2 .photo {
  left: 2.9em;
  top: .4em;
  width: 16.3em;
  height: 23.7em;
  background-image: url(images/slide4/photo2.png);
}

#slide4 .textBlock.num2 .text1 {
  left: 19.6em;
  top: .5em;
  width: 46.6em;
  height: auto;
}
#slide4 .textBlock.num2 .text2 {
  left: .5em;
  top: 24.7em;
  width: 65.8em;
  height: auto;
}



#slide4 .textBlock.num3 .photo {
  left: 2.9em;
  top: .4em;
  width: 16.3em;
  height: 23.0em;
  background-image: url(images/slide4/photo3.jpg);
}
#slide4 .textBlock.num3 .text1 {
  left: 19.6em;
  top: .5em;
  width: 46.6em;
  height: auto;
}
#slide4 .textBlock.num3 .text2 {
  left: .5em;
  top: 24.7em;
  width: 65.8em;
  height: auto;
}

#slide4 .textBlock.num3 .text1 > div,
#slide4 .textBlock.num3 .text2 > div {
  line-height: 1.2em;
}



#slide4 .textBlock.num4 .photo {
  left: 2.9em;
  top: 2.4em;
  width: 16.3em;
  height: 15.9em;
  background-image: url(images/slide4/photo4.jpg);
}
#slide4 .textBlock.num4 .text1 {
  left: 19.6em;
  top: .5em;
  width: 46.6em;
  height: auto;
}
#slide4 .textBlock.num4 .text2 {
  left: .5em;
  top: 22.5em;
  width: 65.8em;
  height: auto;
}

#slide4 .textBlock.num4 .text1 > div,
#slide4 .textBlock.num4 .text2 > div {
  line-height: 1.2em;
}




#slide4 .textBlock.num5 .photo {
  left: 2.9em;
  top: .4em;
  width: 16.3em;
  height: 22.4em;
  background-image: url(images/slide4/photo5.jpg);
}
#slide4 .textBlock.num5 .text1 {
  left: 19.6em;
  top: .5em;
  width: 46.6em;
  height: auto;
}
#slide4 .textBlock.num5 .text2 {
  left: .5em;
  top: 24.7em;
  width: 65.8em;
  height: auto;
}



#slide4 .textBlock.num6 .photo {
  display: none;
}
#slide4 .textBlock.num6 .text1 {
  left: .5em;
  top: .5em;
  width: 65.8em;
  height: auto;
}
#slide4 .textBlock.num6 .text1 > div {
  line-height: 1.3em;
  margin: .7em 0;
}

#slide4 .textBlock.num6 .text2 {
  display: none;
}


/********************************************************************************
 * slide 4
 ********************************************************************************/
#slide5 .top-right-text {
  position: absolute;
  right: 2em;
  top: 1em;
  font-family: HeliosCondLight;
  font-weight: normal;
  color: #ffffff;
  text-align: right;
}

#slide5 .top-right-text > span {
  font-size: 1.8em;
}

#slide5 .blrMap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/slide5/map.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#slide5 .blrMap2 {
  position: absolute;
  left: 13px;
  top: -1px;
  width: 788px;
  height: 598px;
  background-image: url(images/tmp_map.jpg);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .4;
}

#slide5 .places {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}

#slide5 .places .placeBox {
  position: absolute;
  display: none;
  border-radius: .5em;
}

#slide5 .places .city {
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  font-family: "Myriad Pro";
  color: #ffffff;
  text-align: left;
  font-weight: normal;
  z-index: 100;
  max-width: 21em;
  z-index: -1;
  pointer-events: none;
  cursor: default;
  -webkit-transition: opacity .3s linear, visibility .3s linear;
  -moz-transition: opacity .3s linear, visibility .3s linear;
  -ms-transition: opacity .3s linear, visibility .3s linear;
  -o-transition: opacity .3s linear, visibility .3s linear;
  transition: opacity .3s linear, visibility .3s linear;
  z-index: 3;
}

#slide5 .places .city.show {
  visibility: visible;
  opacity: 1;
}

/*#slide5.group1 .places .city.group1,*/
/*#slide5.group2 .places .city.group2,*/
/*#slide5.group3 .places .city.group3,*/
/*#slide5.group4 .places .city.group4 {*/
  /*display: block;*/
/*}*/

#slide5 .places .city > span {
  font-size: 1.6em;
}
/*#slide5 .places .city1 {*/
  /*left: 17.8em;*/
  /*top: 48.0em;*/
/*}*/
/*#slide5 .places .city2 {*/
  /*left: 53.0em;*/
  /*top: 12.3em;*/
/*}*/

#slide5 .places .placeBox.group1 {
  background-color: rgba(255,255,255,.6);
}
#slide5 .places .placeBox.group2 {
  background-color: rgba(255, 204, 51, .6);
}
#slide5 .places .placeBox.group3 {
  background-color: rgba(122, 215, 253, .6);
}
#slide5 .places .placeBox.group4 {
  background-color: rgba(251, 139, 77, .6);
}

#slide5.group1 .places .placeBox.group1,
#slide5.group2 .places .placeBox.group2,
#slide5.group3 .places .placeBox.group3,
#slide5.group4 .places .placeBox.group4 {
  display: block;
}

#slide5 header {
  position: absolute;
  left: 4.2em;
  top: .7em;
  width: auto;
  height: auto;
  font-family: "Myriad Pro";
  font-weight: normal;
  text-align: left;
  line-height: 2.0em;
  color: #ffffff;
  text-shadow: .3em .3em .5em rgba(26,44,55,.45);
  z-index: 101;
}

#slide5 header > span {
  font-size: 2.9em;
  vertical-align: middle;
}

#slide5 .tags {
  position: absolute;
  left: 4em;
  top: 3.8em;
  width: 40em;
  height: 1.8em;
  font-family: "Myriad Pro";
  font-weight: normal;
  text-align: left;
  line-height: 1.1em;
  background-color: #000;
  color: #a8a6a6;
  background-image: url(images/slide5/tags_back.png);
  background-position: 0 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  white-space: nowrap;
}
#slide5 .tags > span {
  font-size: 2.4em;
}
#slide5 .tags .w1.selected {
  color: #ffffff;
}
#slide5 .tags .w3.selected {
  color: #7ad7fd;
}
#slide5 .tags .w4.selected {
  color: #fb8b4d;
}
#slide5 .tags .w2.selected {
  color: #ffcc33;
}

#slide5 .colorBox {
  position: absolute;
  left: 4em;
  top: 7.5em;
  width: 7.2em;
  height: 7.1em;
  border-radius: .5em;
  cursor: pointer;
  z-index: 2;
}
#slide5 .colorBox:not(.selected) {
  box-shadow: .3em .3em .5em rgba(0,0,0,.85);
}
#slide5 .colorBox.box1 {
  left: 4em;
  top: 7.5em;
  background-color: rgba(255,255,255,.6);
}
#slide5 .colorBox.box2 {
  left: 12.1em;
  top: 7.5em;
  background-color: rgba(255,204,51,.6);
}
#slide5 .colorBox.box3 {
  left: 4em;
  top: 15.5em;
  background-color: rgba(51,153,204,.6);
}
#slide5 .colorBox.box4 {
  left: 12.1em;
  top: 15.5em;
  background-color: rgba(204,51,0,.6);
}

#slide5 .textBlock {
  position: absolute;
  display: none;
  left: 0;
  width: 31.7em;
  height: auto;
  min-height: 1em;
  overflow: visible;
  z-index: 150;
}
#slide5 .textBlock.anim {
  -webkit-transition: top .3s linear, height .3s linear;
  -moz-transition: top .3s linear, height .3s linear;
  -ms-transition: top .3s linear, height .3s linear;
  -o-transition: top .3s linear, height .3s linear;
  transition: top .3s linear, height .3s linear;
}

#slide5 .textBlock.c1:before {
  position: absolute;
  left: 0;
  top: -24px;
  width: 0;
  height: 0;
  content: "";
  border-top-color: transparent !important;
  border-right-color: transparent !important;
}
#slide5 .textBlock.c2:before {
  position: absolute;
  right: 1.3em;
  top: -24px;
  width: 0;
  height: 0;
  content: "";
  border-top-color: transparent !important;
  border-left-color: transparent !important;
}
#slide5 .textBlock.c3:before {
  position: absolute;
  left: 0;
  bottom: -24px;
  width: 0;
  height: 0;
  content: "";
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
}
#slide5 .textBlock.c4:before {
  position: absolute;
  right: 1.3em;
  bottom: -24px;
  width: 0;
  height: 0;
  content: "";
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}

#slide5 .textBlock.type1:before {
  border: 13px solid rgba(255,255,255,.6);
}
#slide5 .textBlock.type2:before {
  border: 13px solid rgba(255,204,51,.6);
}
#slide5 .textBlock.type3:before {
  border: 13px solid rgba(51,153,204,.6);
}
#slide5 .textBlock.type4:before {
  border: 13px solid rgba(204,51,0,.6);
}

#slide5 .textBlock > div {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: hidden !important;
  overflow-x: visible !important;
  padding-right: 1.3em;
}

#slide5 .textBlock > div > div {
  display: none;
  width: 100%;
  padding: .4em;
  color: #000000;
  font-family: "Myriad Pro";
  font-size: 1.3em;
  line-height: 1em;
  font-weight: normal;
  text-align: left;
}

#slide5 .textBlock .group1 {
  background-color: rgba(255,255,255,.6);
}
#slide5 .textBlock .group2 {
  background-color: rgba(255,204,51,.6);
}
#slide5 .textBlock .group3 {
  background-color: rgba(51,153,204,.6);
}
#slide5 .textBlock .group4 {
  background-color: rgba(204,51,0,.6);
}

#slide5:not(.group1) .textBlock .group1,
#slide5:not(.group2) .textBlock .group2,
#slide5:not(.group3) .textBlock .group3,
#slide5:not(.group4) .textBlock .group4 {
  display: none !important;
}

#slide5 .placeBox {
  cursor: pointer;
}


#slide5 .thinScrollBarCursor {
  background: transparent !important;
  opacity: 1 !important;
}

#slide5 .thinScrollBarCursor:after {
  position: absolute;
  right: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  background-color: #000;
  border-radius: 20px;
  content: "";
}