/* Timeline */ .container.outer { width: 100%; background: url("../../assets/img/body_bg.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity: 0.98; } .container.inner { width: 99%; min-height: calc(100vh - 48px); /* background-color:chartreuse; */ } div.divider { font-family: "Share Tech Mono", monospace; color: #3f517e; font-size: 2vh; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45); display: flex; justify-content: center; align-items: center; } div.divider::before, div.divider::after { content: ""; display: block; height: 0.09em; min-width: 30vw; } div.divider::before { background: linear-gradient(to right, rgba(240, 240, 240, 0), #fff); margin-right: 4vh; } div.divider::after { background: linear-gradient(to left, rgba(240, 240, 240, 0), #fff); margin-left: 4vh; } /* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */ .h-divider { margin: auto; /* margin-top: 80px; */ width: 80%; position: relative; } .h-divider .shadow { overflow: hidden; height: 20px; } .h-divider .shadow:after { content: ""; display: block; margin: -25px auto 0; width: 100%; height: 25px; border-radius: 125px/12px; box-shadow: 0 0 8px black; } .h-divider .text { width: 100px; height: 45px; padding: 10px; position: absolute; bottom: 100%; margin-bottom: -33px; left: 50%; margin-left: -60px; border-radius: 100%; box-shadow: 0 2px 4px #999; background: white; } .h-divider .text i { position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; border-radius: 100%; border: 1px dashed #aaa; text-align: center; line-height: 50px; font-style: normal; color: #999; } .h-divider .text2 { width: 70px; height: 70px; position: absolute; bottom: 100%; margin-bottom: -35px; left: 50%; margin-left: -25px; border-radius: 100%; box-shadow: 0 2px 4px #999; background: white; } .h-divider img { position: absolute; margin: 4px; max-width: 60px; border-radius: 100%; border: 1px dashed #aaa; } /* end of horizontal dividor */ hr { display: block; margin: 10px 0 -15px; width: 100%; height: 1px; border: 0; background-color: rgba(0, 0, 0, 0.35); } hr + h2 { display: inline-block; position: relative; left: 50%; margin: 0; padding: 5px 10px; border: 1px solid #453986; transform: translateX(-50%); color: #453986; font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-align: center; text-transform: uppercase; background-color: #fff; } hr + h2::first-letter { margin-left: 0.32em; }