.inner-txt{
  margin-top:30px;
  font-size:1.5em;
  color: #f7814d;
}
.inner-txt-min{
  margin-top:2px;
}
.div-border{
  width: 80%;
  height:100px;
  margin-bottom:20px;
  text-align: center;
}
.ridge{
  border: 20px ridge #e3e3e3;
}
.groove{
  border: 20px groove #e3e3e3;
}
.double{
  border: 20px double #77787b;
  margin-top: 10px;
}
.outline{
  margin-top: 10px;
  margin-left: 10px;
  border: 5px solid #77787b;
  outline: 5px solid #292929;
  outline-offset: 5px;
  line-height: 2em;
}
.box{
  width: 80%;
  height:100px;
  border: solid 5px #f00;
  background-color: #8552a1;
  margin-top: 10px;
  z-index: 1;
  position: relative;
}
.box:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
   background: #4aa929;
}

.box:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #00b4ff;
   background: #fff;
}
.box-outline{
  width: 80%;
  height:100px;
  border: solid 5px #f00;
  background-color: #8552a1;
  margin-top: 20px;
  margin-left: 15px;
  margin-bottom: 28px;
  z-index: 1;
  position: relative;
  outline: 5px solid #008792;
  outline-offset:5px;
}
.box-outline:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   border: 5px solid #ffea00;
   background: #4aa929;
   outline: 5px solid #fcaf17;
   outline-offset: 20px;
}
.box-outline:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 15px;
   left: 15px;
   right: 15px;
   bottom: 15px;
   border: 5px solid #00b4ff;
   background: #fff;
   outline: 5px solid #292929;
   outline-offset: 20px;
}
.box-bottom{
  width: 80%;
  height:100px;
  border-bottom: solid 5px red;
  background-color: #e3e3e3;
  margin-bottom: 50px;
  z-index: 1;
  position: relative;
}
.box-bottom:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 105px;
   width: 100%;
   height:5px;
   left: 0;
   border-top: 5px solid orange;
   background: yellow;
   border-bottom: 5px solid green;
}
.box-bottom:after {
   content: "";
   position: absolute;
   z-index: -1;
   top: 120px;
   left: 0;
   width: 100%;
   height:5px;
   border-top: 5px solid cyan;
   background: blue;
   border-bottom: 5px solid purple;
}
.box-cascade{
  width: 80%;
  height:100px;
  border: solid 5px #d3d7d4;
  background-color: #fff;
  position: relative;
  margin-top: 20px;
  margin-bottom: 35px;
  z-index: 1;
  position: relative;
}
.box-cascade:before {
   content: "";
   position: absolute;
   z-index: -1;
   border: solid 5px #d3d7d4;
   border-top: 0px;
   background-color: #fff;
   bottom: -15px;
   left: -5px;
   width: 100%;
   height:5px;
}
.box-cascade:after {
   content: "";
   position: absolute;
   z-index: -1;
   bottom:-25px;
   width: 100%;
   height:5px;
   border: solid 5px #d3d7d4;
   border-top: 0px;
   background-color: #fff;
   left: -5px;
}
.box-shadow {
    margin-top: 25px;
    margin-left:15px;
    margin-bottom:45px;
    border: 5px solid red;
    box-shadow:
      0 0 0 5px blue,
      0 0 0 10px yellow,
      0 0 0 15px green;
}
.box-bottom .inner-txt {
    margin-top: 20px;
    padding-top: 35px;
}