@charset "UTF-8";
/* ==========================================================================
   PC LIVE HISTORY
   ========================================================================== */

#dates {
  width: 270px;
  height: 0px;
  overflow: hidden;
}

#next,
#prev {
  position: absolute;
  left: 49%;
  font-size: 70px;
  width: 38px;
  height: 22px;
  background-position: 0 -44px;
  background-repeat: no-repeat;
  text-indent: -9999px;
  overflow: hidden;
  z-index: 100;
}
#next:hover,
#prev:hover {
  background-position:  0 0;
}
#next {
  top: 750px;
  background-image: url('../images/next_v.png');
}
#prev {
  top: 90px;
  background-image: url('../images/prev_v.png');
}
#next.disabled,
#prev.disabled {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  -moz-opacity:0.2;
  opacity:0.2;
}

.main {
  height: 690px;
  background: rgba(255,255,255,0);
  padding-top: 10px;
}

#timeline {
  /*height: 650px;*/
  height: 680px;
  width: 50vw;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
#issues {
  width: 700px;
  /*height: 650px;*/
  height: 680px;
  overflow: hidden;
/*  float: left; */
}
#issues li {
  width: 700px;
  /*height: 640px;*/
  height: 680px;
  overflow: hidden;
}
#issues li img {
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */   
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */      
  zoom: 1;
  z-index: 0;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

#issues li.selected img.scale,
#issues li.selected img.scaleB {
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  -o-transform: scale(1,1);
  -ms-transform: scale(1,1);
  transform: scale(1,1);
}
#issues li img.scale {
  -webkit-transform: scale(0.6,0.6);
  -moz-transform: scale(0.6,0.6);
  -o-transform: scale(0.6,0.6);
  -ms-transform: scale(0.6,0.6);
  transform: scale(0.6,0.6);
}

#issues li img.scaleB {
  -webkit-transform: scale(1.35,1.35);
  -moz-transform: scale(1.35,1.35);
  -o-transform: scale(1.35,1.35);
  -ms-transform: scale(1.35,1.35);
  transform: scale(1.35,1.35);
}
#issues li.selected img.rotateL {
  -moz-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);

  -webkit-transition: all 0.5s linear 0.5s;
  -moz-transition: all 0.5s linear 0.5s;
  -o-transition: all 0.5s linear 0.5s;
  -ms-transition: all 0.5s linear 0.5s;
  transition: all 0.5s linear 0.5s;
}
#issues li img.rotateL {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#issues li.selected img.rotateR {
  -moz-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  -webkit-transition: all 0.8s linear 0.2s;
  -moz-transition: all 0.8s linear 0.2s;
  -o-transition: all 0.8s linear 0.2s;
  -ms-transition: all 0.8s linear 0.2s;
  transition: all 0.8s linear 0.2s;
}
#issues li img.rotateR {
  -moz-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}
#issues li.selected img.rotateX {
  -moz-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transition: all 0.8s linear 0.2s;
  -moz-transition: all 0.8s linear 0.2s;
  -o-transition: all 0.8s linear 0.2s;
  -ms-transition: all 0.8s linear 0.2s;
  transition: all 0.8s linear 0.2s;
}
#issues li img.rotateX {
  -moz-transform: rotateX(360deg);
  -webkit-transform: rotateX(360deg);
  -o-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
#issues li.selected img.rotateY {
  -moz-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transition: all 0.8s linear 0.2s;
  -moz-transition: all 0.8s linear 0.2s;
  -o-transition: all 0.8s linear 0.2s;
  -ms-transition: all 0.8s linear 0.2s;
  transition: all 0.8s linear 0.2s;
}
#issues li img.rotateY {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#issues li h4, #issues li h3 {
/*  margin-left: 20px;*/
  position: relative;
}
#issues li h4 {
  font-size: 26px;
/*  margin-top: 10px;*/
  text-shadow: #000 1px 1px 2px;
}
#issues li h3 {
  font-size: 130%;
  text-shadow: #000 1px 1px 2px;
}
#issues li .history_text, #issues li .history_text2 {
  margin: 0;
  position: relative;
  z-index: 1;
  background: rgba(114,113,113,0.3);
  padding: 20px;
}
.history {
  position: relative;
  /*height: 640px;*/
  height: 680px;
}
.history_title {
  position: relative;
  height: 70px;
 z-index: 10;
}

.history .data {
  margin-top: 5px;
}
.history .data:first-child {
  margin-top: 0;
}
.history .date {
  display: inline;
  color: #fff;
  font-size: 100%;
}
.history .place {
  display: inline;
  margin-left: 5px;
}

#year2018 .history_img {
  margin-top: 25px;
}
#year2018 .history_text {
  float: right;
  top: -160px;
}

#year2017 .history_img {
  margin-top: 20px;
}
#year2017 .history_img img {width: 580px;}
#year2017 .history_text {
  float: left;
  top: -155px;
}
#year2017 .history_text2 {
  float: right;
  top: -346px;
  /* text-align: right; */
}

#year2016 .history_img {
  margin-top: 25px;
}
#year2016 .history_text {
  float: right;
  top: -175px;
}
#year2015-2 .history_img img {
  float: right;
  /*margin-left: 30px;*/
  margin-top: 25px;
  width: 660px;
}
#year2015-2 .history_text {
  float: left;
  top: -90px;
}
#year2015 .history_title {
  float: left;
}
#year2015 .history_img img {
  float: left;
  /*margin-left: 30px;*/
  margin-top: 25px;
  width: 680px;
}
#year2015 .history_text {
  float: right;
  top: 5px;
}
#year2014 .history_img img {
  float: right;
  margin-top: 25px;
  width: 660px;
  margin-left: 40px;
}
#issues  li#year2014 .history_text {
  float: left;
  top: -120px;
  margin-bottom: -225px;
}
#year2014 .history_text2 {
  float: right;
  top: -195px;
  /*right: 20px;*/
}
#year2014 .history_text2 .date, #year2014 .history_text2 .place {
  display: block;
  text-align: right;
}
#year2013 .history_title {
  float: left;
}
#year2013 .history_img img {
  float: left;
  /*margin-left: 30px;*/
  margin-top: 25px;
  width: 680px;
}
#year2013 .history_text {
  float: right;
  top: 5px;
}
#year2013 .date, #year2013 .place {
  display: block;
}
#year2012 .history_img img:nth-child(1) {
  float: right;
  margin-top: 25px;
  width: 550px;
}
#year2012 .history_img img:nth-child(2) {
  float: left;
  margin-left: 25px;
  margin-top: -270px;
}
#year2012 .history_img img:nth-child(3) {
  margin-top: 300px;
  position: relative;
  left: 170px;
}
#year2012 .history_text {
  float: right;
  top: -140px;
  text-align: right;
}
#year2012 .date, #year2012 .place {
  display: block;
}
#year2011 .history_text {
  top: 50px;
}
#year2011 .history_img img {
  float: left;
  width: 680px;
  margin-top: -60px;
}
#year2010 .history_text {
  float: right;
  top: 15px;
  text-align: right;
}
#year2010 .date, #year2010 .place {
  display: block;
}
#year2010 .history_img img:nth-child(1) {
  float: right;
  margin-top: 25px;
  width: 550px;
}
#year2010 .history_img img:nth-child(2) {
  float: left;
  margin-top: -70px;
  width: 310px;
}

#year2009 .history_img img:nth-child(1) {
  float: left;
  margin-top: 25px;
  width: 550px;
}

#year2009 .history_img img:nth-child(2) {
  float: right;
  margin-top: -50px;
  margin-right: 15px;
}
#year2009 .history_text {
  float: left;
  top: 80px;
}
#year2008 .history_img img:nth-child(1) {
  float: right;
  margin-top: 240px;
  margin-right: -300px;
  width: 370px;
}

#year2008 .history_img img:nth-child(2) {
  float: left;
  margin-top: -530px;
  width: 370px;
}
#year2008 .history_text {
  float: right;
  top: 60px;
}
#year2008 .date, #year2008 .place {
  display: block;
}
#year2007 .history_img {
  text-align: center;
}
#year2007 .history_img img {
  margin-top: 25px;
  width: 500px;
}
#year2007 .history_text {
  top: -15px;
  float: left;
  width: 55%;
  left: 10px;
}
#year2007 .date, #year2007 .place {
  display: block;
}
#year2007 .history_text2 {
  float: right;
  top: -140px;
  right: 10px;
}
#year2007 .history_text2 .data {
  margin-top: 0;
}