/* add your css style rules here */


a {
  color: inherit;
  text-decoration: none;
}

body {
  color: white;
  font-family: STKaiti;
  background-image: -webkit-linear-gradient(top , silver, white);
  background-image:    -moz-linear-gradient(top left, silver, white);
  background-image:     -ms-linear-gradient(top left, silver, white);
  background-image:      -o-linear-gradient(top left, silver, white);
  background-image:         linear-gradient(top left, silver, white);
}

.step {
  width: 800px;
  height: 450px;
  padding: 40px 60px;

  font-size: 48px;
  text-align: center;

  opacity: 0.3;
}

.step.active {
  opacity: 1;
}

.slide {
  background-image: -webkit-linear-gradient(top , #000000, #5A77A9);
  background-image:    -moz-linear-gradient(top , #000000, #5A77A9);
  background-image:     -ms-linear-gradient(top , #000000, #5A77A9);
  background-image:      -o-linear-gradient(top , #000000, #5A77A9);
  background-image:         linear-gradient(top , #000000, #5A77A9);
}

code {
  background-color: yellow;
  font-size: 14px;
}

h3 {
  margin: auto 10px;
}
h4 {
  margin: auto 10px;
  color: black;
}
h6 {
  position: absolute;
  top: 100%;
  left: 100%;
  margin-top: -5%;
  margin-left: -15%;
  text-align: right;
  font-size: 14px;
}
.container {
  align: center;
  height: 60%;
  width: 100%
}
.exception-left {
  position: absolute;
  display: inline-block;
  float: left;
  height: 50%;
  width: 49%;
  top:0;
  left:30%;
  background:url(images/1-1-2.png);
  background-size:50% 60%;
  background-repeat:no-repeat;
}
.exception-right {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 49%;
  background:url(images/1-1-1.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}

.attack-left {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 49%;
  background:url(images/1-2-1.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.attack-right {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 49%;
  background:url(images/1-2-2.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.crash-left {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 80%;
  background:url(images/1-3.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.monitor-system {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 80%;
  background:url(images/1-4.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.monitor-cpu {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 80%;
  background:url(images/1-5.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.monitor-latency {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 80%;
  background:url(images/1-6.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.user-popular {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  background:url(images/1-7.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.user-location {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  background:url(images/1-8.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.user-bestseller {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  background:url(images/1-9.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.elk-overview {
  position: relative;
  display: inline-block;
  height: 80%;
  width: 80%;
  background:url(images/1-10.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.elk-visualization {
  position: relative;
  display: inline-block;
  height: 80%;
  width: 80%;
  background:url(images/1-11.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.elk-biz {
  position: relative;
  display: inline-block;
  height: 80%;
  width: 80%;
  background:url(images/1-12.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.elk-adopt {
  position: relative;
  display: inline-block;
  height: 80%;
  width: 80%;
  background:url(images/1-13.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.elk-splunk {
position: relative;
display: inline-block;
height: 80%;
width: 80%;
background:url(images/1-14.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
.elk-hadoop {
position: relative;
display: inline-block;
height: 80%;
width: 80%;
background:url(images/1-15.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
.elk-lucene {
position: relative;
display: inline-block;
height: 80%;
width: 80%;
background:url(images/1-16.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
.elk-eval {
position: relative;
display: inline-block;
margin: 10% auto;
height: 40%;
width: 80%;
background:url(images/1-17.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
.elk-industry {
position: relative;
display: inline-block;
margin: 10% auto;
height: 80%;
width: 80%;
background:url(images/1-18.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
.elk-itiaoling {
position: relative;
display: inline-block;
margin: 10% auto;
height: 80%;
width: 80%;
background:url(images/1-19.png);
background-size:100% 100%;
background-repeat:no-repeat;
}
.cluster-monitor {
  position: relative;
  display: inline-block;
  height: 80%;
  width: 80%;
  background:url(images/3-1.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.crm-monitor {
  position: relative;
  display: inline-block;
  height: 80%;
  width: 80%;
  background:url(images/3-2.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
}