@media (max-width: 767px) {
    .btn-container { margin-top: 2rem }
}

.navbar-brand .companylogo { height: 45px; }
@media (max-width: 991px) {
    .btn-container > .btn, .btn-container > .btn-group { margin-bottom: 1rem }
    .navbar-brand .companylogo { height: 30px; }
}



/*

@media (max-width: 991.98px) {
    .navbar-dark { background-color: rgb(26,35,46,0.5); }

    .logo-size { width: 130px; }
}

.bg-orange { background-color: #EA5513 !important; }

.navbar-light .navbar-toggler, .navbar-dark .navbar-toggler { border: none !important; border-color: transparent !important; }

    .navbar-light .navbar-toggler:focus, .navbar-dark .navbar-toggler:focus { outline: none !important; }

.navbar-collapse .nav-item a:hover, .navbar-collapse .nav-item.active a { font-weight: 600; }


*/

@media (min-width: 992px) {
    .btn-container > .btn, .btn-container > .btn-group { margin-right: 1.5rem; margin-bottom: 1rem }
}

@media (min-width: 1200px) {
    .content:not(.content--boxed):not(.content--full) { padding: 0 0 0 240px }
}

@media (min-width: 576px) and (max-width: 1199px) {
    .content:not(.content--boxed):not(.content--full) { padding: 102px 30px 0 }
}

@media (max-width: 575px) {
    .content:not(.content--boxed):not(.content--full) { padding: 87px 15px 0 }
}

@media (min-width: 576px) {
    .content--full { padding: 102px 30px 0 }
}

@media (max-width: 767px) {
    .content--full { padding: 87px 15px 0 }
}

.content-inner { margin: auto; padding: 30px 15px }
    .content-inner .example { margin-bottom: 5rem }

@media (max-width: 767px) {
    .content-inner .example .btn { margin-bottom: 1rem }
}

.header { width: 100%; height: 72px; color: #FFFFFF; padding: 0 30px 0 2rem; z-index: 10; display: flex; align-items: center; top: 0; left: 0; background: #FFF; border-bottom: 1px solid #e9ecef }

@media (max-width: 1199px) {
    .header { position: fixed }
}

@media (max-width: 575px) {
    .header { padding-left: 15px; padding-right: 15px }
}

.header::after { display: block; content: ""; clear: both }
.header .body-backdrop { position: absolute }
.navigation-trigger { float: left; padding: 2rem 2rem 2rem 2.4rem; margin-left: -2rem }
    .navigation-trigger:hover { cursor: pointer }
    .navigation-trigger.toggled .navigation-trigger-inner { transform: rotate(180deg) }
        .navigation-trigger.toggled .navigation-trigger-inner:before { transform: scale(1) }
    .navigation-trigger.toggled .navigation-trigger-line:first-child { width: 12px; transform: translateX(8px) translateY(1px) rotate(45deg) }
    .navigation-trigger.toggled .navigation-trigger-line:last-child { width: 11px; transform: translateX(8px) translateY(-1px) rotate(-45deg) }
.navigation-trigger-inner, .navigation-trigger-line { width: 18px; transition: all 300ms }
.navigation-trigger-inner { position: relative }
    .navigation-trigger-inner:before { content: ''; position: absolute; width: 40px; height: 40px; left: -11px; top: -14px; background-color: rgba(0,0,0,0.25); border-radius: 50%; transition: all 300ms; transform: scale(0) }
.navigation-trigger-line { height: 2px; background-color: #333; display: block; position: relative }
    .navigation-trigger-line:not(:last-child) { margin-bottom: 3px }

@media (min-width: 1200px) {
    .header-brand { min-width: calc(270px - 2rem) }
}

.header-brand > h1 { line-height: 100%; font-size: 1.3rem; font-weight: normal; margin: 0 }
    .header-brand > h1 > a { color: #999 }
.header-nav .nav-link { padding: 0 1rem; font-size: .765625rem; color: #adb5bd; transition: background-color 300ms }
    .header-nav .nav-link:hover { color: #343a40 }
.sidebar { width: 240px; position: fixed; left: 0; padding: 0 0.5rem 0.5rem 1.5rem; height: 100%; overflow: hidden; z-index: 1050; background-color: #fff; border-right: 1px solid #e9ecef }

@media (max-width: 1199px) {
    .sidebar { transition: transform 300ms, opacity 300ms }
        .sidebar:not(.toggled) { opacity: 0; transform: translate3d(-100%, 0, 0) }
        .sidebar.toggled { box-shadow: 5px 0 10px rgba(0,0,0,0.08); opacity: 1; transform: translate3d(0, 0, 0) }
}

.sidebar-brand { height: 72px; padding: 1rem 0 }
    .sidebar-brand > h1 { transform: translateY(50%); font-size: 1.09375rem; font-weight: normal; margin: 0 }
        .sidebar-brand > h1 > a { color: #343a40 }
.sidebar .scrollbar-inner > .scroll-element { margin-right: 0 }
.sidebar--hidden { background-color: #FFFFFF; transition: transform 300ms, opacity 300ms }
    .sidebar--hidden:not(.toggled) { opacity: 0; transform: translate3d(-100%, 0, 0) }
    .sidebar--hidden.toggled { box-shadow: 5px 0 10px rgba(0,0,0,0.08); opacity: 1; transform: translate3d(0, 0, 0) }
.navigation { list-style: none; padding: 0; padding-bottom: 4rem }
    .navigation .navigation-title { color: #adb5bd; font-weight: 600; margin: 0.875rem 0 0; padding: 1rem 0rem 0.875rem }
    .navigation .navigation-item { color: #fff; font-weight: 500 }
    .navigation .navigation-link { display: block; padding: 0.25rem 1rem; color: #495057; font-weight: 500; -webkit-transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s; border-radius: .375rem; text-decoration: none }
        .navigation .navigation-link:hover, .navigation .navigation-link.active { color: #288cff }
.scrollbar-inner { height: 100% }
    .scrollbar-inner > .scroll-element { transition: opacity 300ms; margin-right: 2px }
        .scrollbar-inner > .scroll-element.scroll-y { width: 3px; right: 0 }
        .scrollbar-inner > .scroll-element.scroll-x { height: 3px; bottom: 0 }
        .scrollbar-inner > .scroll-element .scroll-bar, .scrollbar-inner > .scroll-element .scroll-element_track { transition: background-color 300ms }
        .scrollbar-inner > .scroll-element .scroll-element_track { background-color: transparent }
    .scrollbar-inner:not(:hover) .scroll-element { opacity: 0 }
.page-title { position: relative; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid #e9ecef }
    .page-title .heading { margin: 0; padding: 0; color: #212529 }
        .page-title .heading a { color: #212529 }

@media (min-height: 600px) and (min-width: 767px) {
    .background-image-holder[data-holder-type="hero"] { height: 80vh }
}

.background-image-holder .holder-item { height: 100%; padding: 2rem 0 }

@media (max-width: 991px) {
    .background-image-holder .holder-item { height: auto; padding: 4rem 0 }
}

.background-image-holder .swiper-container, .background-image-holder .container { position: relative; height: 100% }
    .background-image-holder .swiper-container .swiper-slide .animated { opacity: 0 }
        .background-image-holder .swiper-container .swiper-slide .animated.animation-ended { opacity: 1 }
.bg-cover { position: relative }
.bg-size--cover { background-size: cover; background-repeat: no-repeat }
.bg-size--contain { background-size: contain; background-repeat: no-repeat }
.typeface-palette .typeface-entry { position: relative; display: block; padding: 2rem; background: #fff; border: 1px solid rgba(0,0,0,0.05); border-radius: .375rem }
.typeface-badge { position: absolute; top: 10px; right: 10px }
.color-palette .color-entry { position: relative; display: block; height: 170px; color: #FFF; border-radius: .375rem }
    .color-palette .color-entry .color-code { background: #fff; color: #495057; padding: 6px 10px; position: absolute; bottom: 12px; right: 12px }
.content-docs h2[id]::before, .content-docs h3[id]::before, .content-docs h4[id]::before { content: ""; display: block; height: 3rem; margin-top: -3rem }
.content-docs h2[id]:not(:first-child), .content-docs h3[id]:not(:first-child), .content-docs h4[id]:not(:first-child) { margin-top: 5rem }
.content-docs h2[id], .content-docs h3[id], .content-docs h4[id] { margin-bottom: 2rem }
.highlight pre { padding: 1.5rem; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem }
.code-example { margin: 2rem 0 }
.code-clipboard { position: relative }
.btn-clipboard { position: absolute; top: .5rem; right: .5rem; z-index: 10; display: block; padding: .25rem .5rem; font-size: 75%; color: #818a91; cursor: pointer; background-color: transparent; border: 0; border-radius: .25rem }
    .btn-clipboard:hover { color: #fff; background-color: #027de7 }
.toc-entry { display: block }
    .toc-entry a { display: block; padding: .125rem 1.5rem; color: #99979c }
        .toc-entry a:hover { color: #007bff; text-decoration: none }


.round { border: 1px solid #cccccc; width: 222px; height: 222px;  padding-top: 38px; border-radius: 50%;margin:auto; }
.round .title { font-size: 15px; font-weight: bold; margin-bottom: 14px; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -o-transition: all 0.6s; }
.round .intro { line-height: 24px; transition: all 0.6s; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; -o-transition: all 0.6s; }

footer figure { margin:0 10px; }

.brandlogo { text-align: center; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; padding: 40px; margin: auto; }
    .brandlogo img { margin: auto; display: block; }

.transform:hover { transform: rotateY(-180deg); transition: all 1s; }


@media (min-width: 992px) {
    nav:not(.bg-dark):hover { background: rgba(26,35,46,0.2) !important; }
}

@media (max-width: 991.98px) {
    .navbar-dark1, .navbar-dark { background-color: rgb(26,35,46,0.5); }
}

.navbar-dark .navbar-nav .nav-link { color: rgba(255, 255, 255, 1) !important; }

.navbar-light .navbar-nav .nav-link { color: rgba(0, 0, 0, 0.95) !important; }

.overlay-blue:before { background-color: rgba(234,85,19, 0.2); }

.overlay-blue:after { background-color: rgba(234,85,19, 0.2); }