.pt20{
	padding-top:20px;
}
.mb20 {
	margin-bottom:20px;
}
.mtb20 {
	margin: 20px 0;
}
.style_guide .border-bot {
	border-bottom:1px solid #f1f1f1;
}
.style_guide .border-bot:last-child {
	border-bottom:0;
}
.vcenter {
    display: flex;
    align-items: center;
}
.style_guide .tab-pane {
	/* margin: 50px 0; */
}
.style_guide ul.tabs-menu  {
	list-style: none;
    margin-left: 10px;
}
.sideMenu.sticky{
    position: fixed;
    top: 10px;
    width: 259px;
}
.style_guide ul.tabs-menu li {
	padding-left:10px;
}
.style_guide ul.tabs-menu li.active {
	background: #f4f4f4;
    border-left: 3px solid #ff0000;
}
.style_guide ul.tabs-menu li a {
	color: #606060;
    line-height: 3;
	text-decoration:  none;
}
.style_guide .tab-pane img.logo {
	display:block;
	margin: 0 auto;
}
.style_guide .tab-pane h3 {
	font-size:30px;
	font-weight: 300;
	text-align: center;
	color:#000;
}
.style_guide .tab-pane h3.comp_title {
	font-size:18px;
	font-weight: 500;
	text-align: left;
	margin-bottom:0;
	line-height: 36px;
	color:#000;
}
.style_guide .page_no {
	width:100%;
	text-align: right;
	font-size:10px;
	color:#a3a3a3;
	margin-bottom:40%;
	padding: 5px 0;
}
.style_guide .page_length {
	/* padding:40% 0; */
}
.style_guide .tab-view {
	border-bottom:1px solid #f1f1f1;
	padding-bottom: 30px;
	margin-bottom: 15px;
}
.style_guide .tab-view ul.style_cat li {
	font-size: 22px;
    font-weight: 200;
	color:#000;
}	
.style_guide .tab-pane h4 {
	font-size:30px;
	font-weight: 300;
	text-align: left;
	border-bottom: 1px solid #f1f1f1;
	color:#000;
	/* text-align: center; */
	margin-bottom: 25px;
	padding-bottom: 15px;
}
.style_guide p.worning {
	color: rgb(218, 41, 28);
}
.style_guide p.emphasis {
	font-style: italic;
}
.style_guide li {
	margin-bottom:0;
	line-height: 22px;
}
.style_guide .border-bot li {
	line-height: 18px;
	font-size:13px;
}
.style_guide .border-bot ol, .style_guide .border-bot ul {
	margin: 0 0 9px 20px;
}
.style_guide p.info-12 {
	font-size:12px;
}
.style_guide dl dt {
	font-weight:700;
	display: list-item;
    list-style-type: disc;
}
/*====Typography====*/
.typography h2.typo-sect-title {
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #444444;
    font-size: 22px;
    line-height: 1.3;
    font-weight: bold;
    text-transform: none;
    font-style: normal;
}
.typography .fontdownloadSect {
    background: #F8F8F8;
	padding-bottom: 12px;
}
.fontdownloadSect .download {
    display: block;
    color: #383434;
    padding: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fontdownloadSect .download i {
    float: left;
    padding: 5px;
    margin-right: 5px;
    font-size: 14px;
}
.fontdownloadSect .download .meta {
    float: left;
}
.fontdownloadSect .download .meta h4 {
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #444444;
    font-size: 16px;
    margin-bottom: 3px;
	line-height: 1.3;
    font-weight: bold;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
	padding-bottom:0;
}
.fontdownloadSect .download .meta .desc {
    font-size: 13px;
    color: #999;
}

.typography .fontsCont {
	margin:30px 0;
}
.typography .fontsCont h3.family-name, .fontsCont h3.font-usage {
	font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #444444;
    font-size: 18px;
    line-height: 1.3;
    font-weight: bold;
    text-transform: none;
    font-style: normal;
    text-decoration: none;
    margin-top: 0;
    margin-bottom: 10px;
	text-align:left;
}
.typography .usage-badge {
    font-family: Lato,sans-serif;
    display: inline-block;
    border-radius: 8px;
    padding: 0 6px;
    font-size: 9px;
    line-height: 16px;
    background: #CCC;
    text-transform: uppercase;
    font-weight: 400;
    color: #fff;
    vertical-align: top;
}
.fontsCont .font {
	margin:20px 0;
}
.first-font .font-preview-character {
    display: block;
    font-size: 90px;
    line-height: 1;
    color: #565454;
}
.first-font .font-preview {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
    font-size: 18px;
    padding: 0 20px 0 0;
    margin-right: 30px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-right: 2px solid #EEE;
}
.first-font .font-name {
    display: block;
    color: #565454;
    line-height: 1.5;
    margin-top: 5px;
    font-size: 14px;
    margin-bottom: 5px;
}
.first-font .font-weight {
    color: #000;
    font-size: 13px;
    margin-bottom: 5px;
}
.first-font .font-style {
    color: #000;
    font-size: 13px;
    margin-bottom: 5px;
}

.fontsCont .code-css.visible {
    display: block;
}
.code {
    display: none;
    background: #FFF;
    border-radius: 3px;
    color: #666;
    margin: 20px 0;
    border: 1px solid #DDD;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
}
.code header {
    background: #F7F7F7;
    border-radius: 3px 3px 0 0;
    padding: 8px 10px;
    border-bottom: 1px solid #DDD;
    font-size: .85rem;
}

.CodeMirror {
    position: relative;
    overflow: hidden;
    background: #fff;
    color: #000;
	height: auto;
    font-size: 12px;
}
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
    position: absolute;
    z-index: 6;
    display: none;
}
.CodeMirror-vscrollbar {
    right: 0;
    top: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
.CodeMirror-hscrollbar {
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
    right: 0;
    bottom: 0;
}
.CodeMirror-gutter-filler {
    left: 0;
    bottom: 0;
}
.CodeMirror-scroll {
    margin-bottom: -30px;
    margin-right: -30px;
    padding-bottom: 30px;
    height: 100%;
    outline: 0;
    position: relative;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.CodeMirror-scroll {
    overflow: auto;
}
.CodeMirror-measure {
    position: absolute;
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}
div.CodeMirror-cursors {
    visibility: visible;
    position: relative;
    z-index: 3;
}
.CodeMirror-gutter-wrapper {
    position: absolute;
    z-index: 4;
    height: 100%;
}
.cm-s-solarized .CodeMirror-linenumber {
    color: #999;
}
.cm-s-solarized .CodeMirror-gutters {
    padding: 0 9px 0 0;
    border-right: 1px solid #DDD;
}
.CodeMirror-gutters {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
    padding-bottom: 30px;
    z-index: 3;
	border-right: 1px solid #ddd;
    background-color: #f7f7f7;
    white-space: nowrap;
}
.CodeMirror-gutter-elt {
    position: absolute;
    cursor: default;
    z-index: 4;
}
.CodeMirror-linenumber {
    padding: 10px 3px 0 5px;
    min-width: 20px;
    text-align: right;
    color: #999;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.CodeMirror pre {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding-left: 8px;
    border-width: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    margin: 0;
    white-space: pre;
    word-wrap: normal;
    line-height: 1.3;
    color: inherit;
    z-index: 2;
    position: relative;
    overflow: visible;
	padding: 10px 4px;
}
.cm-s-solarized .cm-tag {
    color: #93a1a1;
}
.cm-s-solarized .cm-string {
    color: #859900;
}

.mod-block-typostyles .style-spec-meta {
    font-size: 13px;
    color: #999;
    margin-bottom: 5px;
    float: left;
    width: 180px;
    padding-right: 10px;
    line-height: 1.4
}

.mod-block-typostyles .style-spec-meta>span {
    display: block
}

.mod-block-typostyles .style-spec-meta strong {
    color: #444;
    font-weight: 400
}

.mod-block-typostyles .meta-background i,.mod-block-typostyles .meta-color i {
    background: #F8F8F8;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px
}

.mod-block-typostyles .value,.mod-block-typostyles .key {
    padding: 0 2px
}

.mod-block-typostyles .key {
    margin: 0 -2px
}

.mod-block-typostyles .meta-background .value {
    text-transform: uppercase
}

.mod-block-typostyles .meta-color .value {
    text-transform: uppercase
}

.mod-block-typostyles .style-spec-preview {
    float: left;
    width: 430px;
    margin-right: 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #EEE;
    position: relative;
    min-height: 155px
}

.mod-block-typostyles .preview {
    display: block;
    padding: 10px
}

.mod-block-typostyles .preview:focus {
    outline: 0
}

.mod-block-typostyles .style-spec-colors {
    float: left;
    width: 150px
}

.mod-block-typostyles .style-spec-colors ul {
    margin-bottom: 10px;
    position: relative
}

.mod-block-typostyles .meta-description {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #F8F8F8;
    font-size: 12px;
    padding: 10px;
    line-height: 1.3;
    color: rgba(0,0,0,.6)
}

.mod-block-typostyles .style-spec-meta h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom:  10px;
    padding-bottom:  0;
}

.mod-block-typostyles .font-group-description {
    line-height: 1.6;
    margin-bottom: 20px;
    white-space: pre-line;
    min-height: 27px;
    font-size: 1rem
}


@media only screen and (max-width:426px) {
	section.head-banner h1 {
		font-size: 40px;
	}
	.style_guide .tab-pane h4 {
		font-size: 20px;
		font-weight: 600;
	}
}