/********************************************************************************
 * slide 2
 ********************************************************************************/
#slide2 {
  font-family: Tahoma;
  font-weight: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#slide2 > div {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100em;
  height: 170em;
}

#slide2 > div > .background {
  position: absolute;
  display: block;
  left: 0;
  top: 61.6em;
  width: 100%;
  height: 62.0em;
  z-index: 0;
}

#slide2 .text-logo {
  left: 20.0em;
  top: 4.9em;
  text-align: left;
  color: #6699cc;
}

#slide2 .text-logo > span {
  font-size: 2.4em;
}

#slide2 .text-logo > span  > span {
  font-size: 1.25em;
}

#slide2 .top-logo {
  left: 37.2em;
  top: 2.3em;
  width: 19.7em;
  height: 12.9em;
  background-image: url(../images/slide2/top_logo.png);
}

#slide2 .blr-flag {
  left: 60.6em;
  top: 2.8em;
  width: 20em;
  height: 10em;
  background-image: url(../images/slide2/blr_flag.png);
}

#slide2 .time-line {
  top: 60.3em;
  left: -30em;
  width: 256em;
}

/*#slide2 .time-line svg.line {*/
  /*top: 0;*/
  /*left: 0;*/
  /*width: 320em;*/
  /*height: 2.6em;*/
/*}*/

#slide2 .time-line div.line {
  top: 0;
  left: 0;
  width: 100%;
  height: 2.6em;
  white-space: nowrap;
  text-align: left;
}

#slide2 .time-line div.line > div.p1 {
  display: inline-block;
  width: .8em;
  height: 100%;
  background-image: url(../images/slide2/line1.png);
  background-position: 0 0;
  background-size: 2px 2.6em;
  background-repeat: no-repeat;
  opacity: .75;
}

#slide2 .time-line div.line > div.p2 {
  display: inline-block;
  width: .8em;
  height: 100%;
  background-image: url(../images/slide2/line2.png);
  background-position: 0 0;
  background-size: 2px 2.6em;
  background-repeat: no-repeat;
  opacity: .75;
}

#slide2 .time-line .year-num {
  top: 5em;
  width: 9.6em;
  height: 3.4em;
  margin-left: -4.8em;
  line-height: 3.4em;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  color: #ffffff;
}

#slide2 .time-line .year-num > span {
  display: inline-block;
  font-size: 2.5em;
  vertical-align: middle;
}

#slide2 .time-line .circle {
  width: 6.4em;
  height: 6.4em;
  margin-left: -3.2em;
  margin-top: -3.2em;
  border: 2px solid #666666;
  border-radius: 3.2em;
  background-color: #ffffff;
}

#slide2 .time-line .circle-tail {
  opacity: .75;
  width: 2px;
  background-image: url(../images/slide2/dash-line.png);
  background-size: 2px 13px;
  background-position: 0 100%;
  background-repeat: repeat;
  /*border-left: 1px dashed #cccccc;*/
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
}

#slide2 .time-line .circle .text {
  position: absolute;
  display: block;
  left: 4.2em;
  top: 4.8em;
  width: 20em;
  font-size: 1.2em;
  color: #6699cc;
  text-align: left;
  text-transform: uppercase;
}

#slide2 .time-line .circle .text > span {
  font-size: 1.2em;
}

#slide2 .time-line-cursor {
  top: 59.1em;
  width: 5.7em;
  height: 5.7em;
  background-image: url(../images/slide2/cursor.png);
  cursor: pointer;
}

#slide2 .time-line-cursor.img2 {
  background-image: url(../images/slide2/cursor2.png);
}

#slide2 .time-line-cursor.drop {
  -webkit-transition: margin-left .5s ease-in-out;
  -moz-transition: margin-left .5s ease-in-out;
  -ms-transition: margin-left .5s ease-in-out;
  -o-transition: margin-left .5s ease-in-out;
  transition: margin-left .5s ease-in-out;
}

/********************************************************************************
 * сфера деятельности
 ********************************************************************************/
#slide2 .do-list-container {
  left: 57.5em;
  top: 61.6em;
  width: 41.8em;
  height: 60em;
  overflow: hidden;
}

#slide2 .do-list {
  left: 0;
  top: 15.5em;
  width: 41.8em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: left;
}

#slide2 .do-list > div {
  position: relative;
}

#slide2 .do-list .top {
  margin-bottom: 1em;
}

#slide2 .do-list .top > span {
  font-size: 2.0em;
}

#slide2 .do-list .top > span > span {
  font-size: 1.25em;
}

#slide2 .do-list .item {
  position: relative;
  padding-left: 8em;
  margin-bottom: 1em;
  line-height: 2em;
}

#slide2 .do-list .item:before {
  position: absolute;
  left: 3.6em;
  top: .4em;
  width: 1.2em;
  height: 1.2em;
  background-color: #666666;
  box-shadow: 0 0 2px rgba(102,102,102,.8);
  content: "";
}

#slide2 .do-list .item > span {
 font-size: 1.6em;
}

#slide2 .do-list .item > span > span {
  font-size: 1.3em;
}

/* animation */
#slide2:not(.anim1) .do-list > div {
  opacity: 0;
  -webkit-transform: translate(0px, -350px);
  -moz-transform: translate(0px, -350px);
  -ms-transform: translate(0px, -350px);
  -o-transform: translate(0px, -350px);
  transform: translate(0px, -350px);
}

#slide2.anim1 .do-list > div {
  opacity: 1;
}

#slide2.anim1 .do-list > .p1 {
  -webkit-transition: -webkit-transform 2s ease-out 0, opacity 2s linear 0;
  -moz-transition: -moz-transform 2s ease-out 0, opacity 2s linear 0;
  -ms-transition: -ms-transform 2s ease-out 0, opacity 2s linear 0;
  -o-transition: -o-transform 2s ease-out 0, opacity 2s linear 0;
  transition: transform 2s ease-out 0, opacity 2s linear 0;
}
#slide2.anim1 .do-list > .p2 {
  -webkit-transition: -webkit-transform 2s ease-out 1.5s, opacity 2s linear 1.5s;
  -moz-transition: -moz-transform 2s ease-out 1.5s, opacity 2s linear 1.5s;
  -ms-transition: -ms-transform 2s ease-out 1.5s, opacity 2s linear 1.5s;
  -o-transition: -o-transform 2s ease-out 1.5s, opacity 2s linear 1.5s;
  transition: transform 2s ease-out 1.5s, opacity 2s linear 1.5s;
}
#slide2.anim1 .do-list > .p3 {
  -webkit-transition: -webkit-transform 2s ease-out 3s, opacity 2s linear 3s;
  -moz-transition: -moz-transform 2s ease-out 3s, opacity 2s linear 3s;
  -ms-transition: -ms-transform 2s ease-out 3s, opacity 2s linear 3s;
  -o-transition: -o-transform 2s ease-out 3s, opacity 2s linear 3s;
  transition: transform 2s ease-out 3s, opacity 2s linear 3s;
}
#slide2.anim1 .do-list > .p4 {
  -webkit-transition: -webkit-transform 2s ease-out 4.5s, opacity 2s linear 4.5s;
  -moz-transition: -moz-transform 2s ease-out 4.5s, opacity 2s linear 4.5s;
  -ms-transition: -ms-transform 2s ease-out 4.5s, opacity 2s linear 4.5s;
  -o-transition: -o-transform 2s ease-out 4.5s, opacity 2s linear 4.5s;
  transition: transform 2s ease-out 4.5s, opacity 2s linear 4.5s;
}

/********************************************************************************
 * кружки слева
 ********************************************************************************/
#slide2 .circle-in-left {
  left: 3em;
  top: 77.8em;
  width: 47em;
  text-align: left;
  color: #ffffff;
  text-transform: uppercase;
}

#slide2 .circle-in-left > div {
  position: relative;
  height: 17em;
  padding-left: 12em;
  line-height: 2.5em;
}

#slide2 .circle-in-left .circle {
  left: 0;
  top: 0;
  width: 10em;
  height: 10em;
  border: .2em solid #ffffff;
  border-radius: 5em;
}

#slide2 .circle-in-left .circle.p1 {
  background-image: url(../images/slide2/circle11.png);
}

#slide2.canim1 .circle-in-left .circle.p1:hover {
  background-image: url(../images/slide2/circle11.png);
}
#slide2.canim2 .circle-in-left .circle.p1:hover {
  background-image: url(../images/slide2/circle12.png);
}

#slide2.canim3 .circle-in-left .circle.p1:hover,
#slide2.canim4 .circle-in-left .circle.p1:hover {
  background-image: url(../images/slide2/circle13.png);
}
#slide2.canim5 .circle-in-left .circle.p1:hover {
  background-image: url(../images/slide2/circle14.png);
}

#slide2 .circle-in-left .circle.p2 {
  background-image: url(../images/slide2/circle21.png);
}

#slide2.canim1 .circle-in-left .circle.p2:hover {
  background-image: url(../images/slide2/circle21.png);
}
#slide2.canim2 .circle-in-left .circle.p2:hover {
  background-image: url(../images/slide2/circle22.png);
}
#slide2.canim3 .circle-in-left .circle.p2:hover {
  background-image: url(../images/slide2/circle23.png);
}
#slide2.canim4 .circle-in-left .circle.p2:hover {
  background-image: url(../images/slide2/circle24.png);
}
#slide2.canim5 .circle-in-left .circle.p2:hover {
  background-image: url(../images/slide2/circle25.png);
}

#slide2 .circle-in-left span {
  font-size: 2em;
}

#slide2 .circle-in-left span {
  font-size: 1.25em;
}

/********************************************************************************
 * нижняя часть
 ********************************************************************************/
#slide2 .bottom-items {
  left: 0em;
  top: 123.6em;
  white-space: nowrap;
}

#slide2 .bottom-items > div {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 25em;
  text-align: left;
}

#slide2 .bottom-items > div .p1 {
  height: 7em;
  color: #666666;
  padding-left: 11px;
  white-space: nowrap;
}

/*#slide2 .bottom-items > .nesvidz .p1 {*/
  /*height: 10.4em;*/
/*}*/

#slide2 .bottom-items > div .p1 span {
  font-size: 2.1em;
}

#slide2 .bottom-items > div .p2 {
  width: 100%;
  height: 15.6em;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

#slide2 .nesvidz .p2 {
  height: 12.2em;
  background-image: url(../images/slide2/nesvidz.png);
  background-size: 24.3em 9.6em;
}

#slide2 .mirskij .p2 {
  height: 12.2em;
  background-image: url(../images/slide2/mirskij.png);
  background-size: 24.6em 15.6em;
}

#slide2 .bottom-items > .struve .p1 {
  padding-left: 5em;
}

#slide2 .struve .p2 {
  height: 12.2em;
  background-image: url(../images/slide2/struve.png);
  background-size: 13.6em 12.5em;
}

#slide2 .belovezh .p2 {
  height: 12.2em;
  background-image: url(../images/slide2/zubr.png);
  background-size: 20.6em 10.5em;
}

#slide2 .bottom-items > div .p3 {
  height: 10.4em;
  line-height: 1.7em;
  color: #6699cc;
  padding-left: 11px;
  white-space: nowrap;
}

#slide2 .bottom-items > div .p3 span {
  font-size: 1.5em;
}

#slide2 .bottom-items .suffix {
  position: absolute;
  top: 44em;
  left: 10em;
  width: 80em;
  color: #6699cc;
  text-align: center;
}

#slide2 .bottom-items .suffix > span {
  font-size: 1.5em;
}
