body { background: rgb(46, 49, 51); letter-spacing: 1px; color: #fff; } .short-code-row { padding: 20px; } .page-header h3 em { font-weight: normal; } .github-link { margin-top: 40px; } .short-code-header, .form-group h4 { text-align: center; } .small-block { display: block; } .short-code-form { padding: 40px; } hr { border-top: 1px solid #444; } h1, .form-group h4 { line-height: 1.4; } .form-group .btn { margin-bottom: 20px; border-width: 4px; border-right: none; border-left: none; border-top: none; } .content { padding-top: 40px; padding-bottom: 40px; } .page-header, .page-sub-header { text-align: center; } .page-header { padding: 40px; margin: 0; border-bottom: none; } .page-sub-header { color: #999; margin-bottom: 40px; } .page-sub-header>h3>small { margin-left: 12px; } .box-shadow { box-shadow: 6px 6px 20px #000; } div.glyphicons ul { max-height: 300px; overflow: scroll; padding: 12px; margin: 0; } div.glyphicons ul li { display: inline-block; color: rgb(46, 49, 51); padding: 8px; margin: 4px; border: 1px solid rgb(46, 49, 51); border-radius: 4px; cursor: pointer; } div.glyphicons ul li:hover { background: rgb(46, 49, 51); color: #fff; } .features-list { margin-top: 40px; padding-left: 0; text-align: left; font-style: italic; font-size: 18px; list-style: none; } .features-list li:not(:first-of-type) { margin-top: 12px; } .glyphicon-pushpin { margin-left: 0; margin-right: 12px; } /* What You Need To Copy ==========================================================================*/ .button-wrapper .btn { margin: 20px 0px; } .button-wrapper { display: flex; flex-flow: column wrap; justify-content: space-around; } a.btn>span.glyphicon { margin-left: 12px; } @media (min-width: 520px) { .button-wrapper { align-items: center; flex-flow: row wrap; -ms-flex-flow: row wrap; -webkit-flex-flow: row wrap; } .btn-container-center>a.btn { margin-left: 12px; margin-right: 12px; } .btn-container-center { justify-content: center; } .btn-container-center>a.btn:first-of-type { margin-left: 0; } .btn-container-center>a.btn:last-of-type { margin-right: 0; } .btn-container-left>a.btn { margin-left: 12px; margin-right: 12px; } .btn-container-left { justify-content: flex-start; } .btn-container-left>a.btn:first-of-type { margin-left: 0; } .btn-container-left>a.btn:last-of-type { margin-right: 0; } .btn-container-right>a.btn { margin-left: 12px; margin-right: 12px; } .btn-container-right { justify-content: flex-end; } .btn-container-right>a.btn:first-of-type { margin-left: 0; } .btn-container-right>a.btn:last-of-type { margin-right: 0; } .btn-container-stretch>a.btn { margin-left: 12px; margin-right: 12px; } .btn-container-stretch { justify-content: space-between; } .btn-container-stretch>a.btn:first-of-type { margin-left: 0; } .btn-container-stretch>a.btn:last-of-type { margin-right: 0; } .btn-container-col-center { flex-direction: column; align-items: center; } .btn-container-col-left { flex-direction: column; align-items: flex-start; } .btn-container-col-right { flex-direction: column; align-items: flex-end; } /* TESTING */ .btn-fill-space .btn { margin: 20px; flex-grow: 1; transition-duration: 0.2s; } .btn-fill-space .btn:hover { flex-grow: 1.6; } .btn-always-col { flex-flow: column wrap; justify-content: space-around; } .btn-always-col>.btn { width: 100%; } }