/*--------------------------------------------------------- List Shortcode ---------------------------------------------------------*/ .list-shortcode{ display: flex; } .list-shortcode.md-align-left{ justify-content: flex-start; } .list-shortcode.md-align-center{ justify-content: center; } .list-shortcode.md-align-right{ justify-content: flex-end; } .list-shortcode ol { counter-reset: li; padding-left: 36px; } .list-shortcode ol > li { position: relative; margin: 0 0 15px 0; padding: 4px 8px; list-style: none; text-align: left; } .list-shortcode ol > li:before { content: counter(li); counter-increment: li; position: absolute; top: 50%; left: -35px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 35px; height: 35px; margin-right: 8px; padding: 6px; border: 1px solid; border-radius: 50%; text-align: center; transform: translateY(-50%); } .list-shortcode li:hover, .list-shortcode li:hover:before { transition: all 300ms; } .list-shortcode ul{ width: 100%; } .list-shortcode ul > li { list-style: none; position: relative; margin-top: 18px; } .list-shortcode ul li:first-child { margin-top: 0; } .list-shortcode ul li span { padding-right: 16px; font-size: 16px; } .list-shortcode ul li p { display: inline-block; font-size: 14px; width: calc(100% - 50px); vertical-align: middle; } .list-shortcode ul li p, .list-shortcode ol li p{ line-height: 1.4em; }