: root {
    --link - color: $link_color;
    --link - color - light: rgba($link_color, 0.65);
    --link - color - midlight: rgba($link_color, 0.75)
}
 @ media(min - width: 1200px) {
    .container {
        max - width: 1140px
    }
}
body {
    text - rendering: auto;
    -webkit - font - smoothing: antialiased;
    -moz - osx - font - smoothing: grayscale
}
body.helix - ultimate - preloader {
    overflow: hidden
}
body.helix - ultimate - preloader: before {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100 % ;
    height: 100 % ;
    z - index: 99998;
    background: rgba(255, 255, 255, 0.9)
}
body.helix - ultimate - preloader: after {
    content: "";
    font - family: "Font Awesome 5 Free";
    font - size: 36px;
    position: fixed;
    top: 50 % ;
    left: 50 % ;
    margin - top: -24px;
    margin - left: -24px;
    width: 48px;
    height: 48px;
    line - break: 48px;
    font - weight: 900;
    text - align: center;
    color:  # 007bff;
    -webkit - animation: fa - spin 2s infinite linear;
    animation: fa - spin 2s infinite linear;
    z - index: 99999
}
.row {
    --bs - gutter - x: 1.875rem
}
.container {
    padding - left: 15px;
    padding - right: 15px
}
 @ media(min - width: 1200px) {
    .container {
        max - width: 1140px
    }
}
.element - invisible {
    position: absolute;
    padding: 0;
    margin: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden
}
 # system - message - container {
    position: fixed;
    bottom: 0px;
    right: 15px;
    max - width: 350px
}
 # system - message - container.alert {
    font - size: 13px;
    line - height: 1.5
}
 # system - message - container.alert > .btn - close {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer
}
 # system - message - container joomla - alert {
    font - size: 13px
}
.com - users.view - registration # member - registration.modal - dialog, .com - users.view - registration # member - profile.modal - dialog, .com - users.view - profile # member - registration.modal - dialog, .com - users.view - profile # member - profile.modal - dialog {
    display: flex;
    align - items: center;
    min - height: calc(100 %  - 1rem)
}
.registration # member - registration # jform_privacyconsent_privacy - lbl {
    display: inline - flex
}
.registration # member - registration # jform_privacyconsent_privacy - lbl > a {
    position: initial;
    display: block;
    color:  # 666666
}
.registration # member - registration # jform_privacyconsent_privacy - lbl > a: hover, .registration # member - registration # jform_privacyconsent_privacy - lbl > a: focus {
    color:  # c80000
}
body.com - users.view - registration >  # sbox - window {
    overflow: hidden
}
body.com - users.view - registration >  # sbox - window >  # sbox - btn - close {
    top: 5px;
    right: 5px
}
.modal - dialog.jviewport - width80 {
    width: 80vw;
    max - width: none
}
.btn: focus {
    box - shadow: none!important
}
 @ media(max - width: 1440px) {
    .sp - dropdown.sp - dropdown - mega {
        width: 920px!important
    }
}
a {
    transition: color 400ms,
    background - color 400ms
}
a, a: hover, a: focus, a: active {
    text - decoration: none
}
label {
    font - weight: normal
}
legend {
    padding - bottom: 10px
}
img {
    display: block;
    max - width: 100 % ;
    height: auto
}
 # sp - top - bar {
    padding: 8px 0;
    font - size: 0.875rem
}
 # sp - top - bar.sp - module {
    display: inline - block;
    margin: 0 0 0 1.25rem
}
ul.social - icons {
    list - style: none;
    padding: 0;
    margin: -5px;
    display: inline - block
}
ul.social - icons > li {
    display: inline - block;
    margin: 5px 7px
}
.sp - module - content.mod - languages ul.lang - inline {
    margin: 0;
    padding: 0
}
.sp - module - content.mod - languages ul.lang - inline li {
    border: none;
    display: inline - block;
    margin: 0 5px 0 0
}
.sp - module - content.mod - languages ul.lang - inline li a {
    padding: 0!important
}
.sp - module - content.mod - languages ul.lang - inline li > a: before {
    display: none
}
.sp - module - content.latestnews > li > a > span {
    display: block;
    margin - top: 5px;
    font - size: 85 %
}
.sp - contact - info {
    list - style: none;
    padding: 0;
    margin: 0 - 10px
}
.sp - contact - info li {
    display: inline - block;
    margin: 0 10px;
    font - size: 90 % ;
    white - space: nowrap
}
.sp - contact - info li i {
    margin: 0 3px
}
 # sp - header {
    height: 90px;
    left: 0;
    position: relative;
    top: 0;
    width: 100 % ;
    z - index: 99;
    box - shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1)
}
 # sp - header.logo {
    height: 90px;
    display: inline - flex;
    margin: 0;
    align - items: center
}
 # sp - header.logo a {
    font - size: 40px;
    line - height: 1;
    margin: 0;
    padding: 0;
    font - weight: 700;
    color:  # fff
}
 # sp - header.logo p {
    margin: 5px 0 0
}
 # sp - header.header - sticky {
    position: fixed;
    z - index: 9999
}
body.predefined - header1.body - wrapper {
    width: calc(100 %  - 162px);
    margin - left: auto
}
body.predefined - header1 # sp - header {
    height: 100 % !important;
    position: fixed!important;
    left: 0;
    top: 0;
    width: 162px;
    z - index: 99;
    padding: 60px 35px 30px 35px;
    box - shadow: 0px 1px 15px rgba(255, 255, 255, 0.2)
}
body.predefined - header1 # sp - header.sp - header - inner {
    display: flex;
    height: 100 % ;
    flex - direction: column;
    justify - content: space - between
}
body.predefined - header1 # sp - header.sp - megamenu - wrapper {
    margin - bottom: auto
}
body.predefined - header1 # sp - header.sp - megamenu - wrapper.sp - megamenu - parent {
    margin: 0;
    letter - spacing: 1px;
    text - transform: uppercase
}
body.predefined - header1 # sp - header.sp - megamenu - wrapper.sp - megamenu - parent > li {
    display: block
}
body.predefined - header1 # sp - header.sp - megamenu - wrapper.sp - megamenu - parent > li.sp - has - child > a: after {
    content: ""
}
body.predefined - header1 # sp - header.sp - megamenu - wrapper.sp - megamenu - parent > li > a {
    padding: 0;
    line - height: 40px
}
body.predefined - header1 # sp - header.sp - megamenu - wrapper.sp - megamenu - parent > li > .sp - dropdown {
    left: 100 % ;
    top: 50 % ;
    padding - left: 35px;
    transform: translateY(-50 % )
}
body.predefined - header1 # sp - header.d - blocks {
    margin - top: 30px
}
body.predefined - header1 # sp - header.sp - contact - info {
    margin - bottom: 10px
}
body.predefined - header1 # sp - header.sp - contact - info li {
    font - size: 12px;
    font - weight: 400;
    line - height: 1.5;
    display: block;
    margin - bottom: 5px
}
body.predefined - header1 # sp - header ul.social - icons {
    line - height: 1.3;
    font - size: 14px
}
body.predefined - header1 # sp - header ul.social - icons > li a {
    color:  # fff
}
body.predefined - header1 # sp - header ul.social - icons > li a: hover {
    color:  # ff2c2c
}
body.predefined - header2 header # sp - header {
    background - color: rgba(17, 17, 17, 0.1)!important;
    border - bottom: 1px solid rgba(255, 255, 255, 0.25);
    position: absolute!important;
    transition: 0.3s
}
body.predefined - header2 header # sp - header.header - sticky {
    background - color: rgba(17, 17, 17, 0.8)!important;
    position: fixed!important
}
body.predefined - header2.sp - megamenu - parent > li > a {
    text - transform: uppercase;
    letter - spacing: 1px;
    opacity: 0.7
}
body.predefined - header2.sp - megamenu - parent > li > a: hover, body.predefined - header2.sp - megamenu - parent > li > a: focus {
    color:  # fff
}
body.predefined - header2.sp - megamenu - parent > li.active > a {
    color:  # fff;
    opacity: 1
}
body.menu - right - wrap # offcanvas - toggler {
    display: none!important
}
.com - sppagebuilder.layout - edit - iframe # sp - header {
    display: none
}
.com - sppagebuilder.layout - edit - iframe > .body - wrapper {
    width: 100 %
}
 @ media(min - height: 550px) {
    body.predefined - header1 # sp - header.sp - megamenu - wrapper {
        margin - top: 80px
    }
    body.predefined - header1 # sp - header.sp - megamenu - wrapper.sp - megamenu - parent > li: not(: last - child) {
        margin - bottom: 20px
    }
}
.social - icons - wrap {
    position: relative;
    font - size: 18px;
    color:  # cad1da
}
.social - icons - wrap i {
    margin - left: 4px
}
.social - icons - wrap.inner {
    position: absolute;
    top: 0;
    left: 100 % ;
    width: 200px;
    padding - left: 60px
}
.social - icons - wrap ul.social - icons {
    background:  # 000;
    padding: 10px 15px;
    display: none;
    position: relative;
    justify - content: space - between
}
.social - icons - wrap ul.social - icons: before {
    content: "";
    position: absolute;
    top: 50 % ;
    left: -8px;
    transform: translateY(-50 % );
    border - top: 9px solid transparent;
    border - bottom: 9px solid transparent;
    border - right: 9px solid # 000;
    width: 0;
    height: 0
}
.social - icons - wrap: hover ul.social - icons {
    display: flex;
    animation: fadeInLeft 0.5s
}
 # sp - title {
    min - height: 0
}
.sp - page - title {
    padding: 30px 0;
    background - repeat: no - repeat;
    background - position: 50 % 50 % ;
    background - size: cover;
    background - attachment: fixed
}
.sp - page - title.sp - page - title - heading, .sp - page - title.sp - page - title - sub - heading {
    margin: 0;
    padding: 0;
    color:  # fff
}
.sp - page - title.sp - page - title - heading {
    font - size: 50px;
    font - weight: bold;
    line - height: 1
}
.sp - page - title.sp - page - title - sub - heading {
    font - size: 18px;
    font - weight: normal;
    font - stretch: normal;
    font - style: normal;
    line - height: 1.56;
    letter - spacing: 2px;
    margin - top: 30px
}
.sp - page - title.breadcrumb {
    background: none;
    padding: 0;
    margin: 10px 0 0 0
}
.sp - page - title.breadcrumb > .active {
    color: rgba(255, 255, 255, 0.8)
}
.sp - page - title.breadcrumb > span, .sp - page - title.breadcrumb > li, .sp - page - title.breadcrumb > li + li: before, .sp - page - title.breadcrumb > li > a {
    color:  # fff
}
.body - innerwrapper {
    overflow - x: hidden
}
.layout - boxed.body - innerwrapper {
    max - width: 1240px;
    margin: 0 auto;
    box - shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}
 # sp - main - body {
    padding: 100px 0
}
.com - sppagebuilder # sp - main - body {
    padding: 0
}
 # sp - left.sp - module: first - child,  # sp - right.sp - module: first - child {
    margin - top: 0
}
 # sp - left.sp - module.sp - module - title,  # sp - right.sp - module.sp - module - title {
    margin: 0 0 30px;
    padding - bottom: 20px;
    font - size: 22px;
    font - weight: 700;
    border - bottom: 1px solid # f3f3f3
}
 # sp - left.sp - module ul,  # sp - right.sp - module ul {
    list - style: none;
    padding: 0;
    margin: 0
}
 # sp - left.sp - module ul > li,  # sp - right.sp - module ul > li {
    display: block;
    border - bottom: 1px solid # f3f3f3
}
 # sp - left.sp - module ul > li > a,  # sp - right.sp - module ul > li > a {
    display: block;
    padding: 5px 0;
    line - height: 36px;
    padding: 2px 0
}
 # sp - left.sp - module ul > li: last - child,  # sp - right.sp - module ul > li: last - child {
    border - bottom: none
}
 # sp - left.sp - module.categories - module ul,  # sp - right.sp - module.categories - module ul {
    margin: 0 10px
}
 # sp - left.sp - module.latestnews > div,  # sp - right.sp - module.latestnews > div {
    padding - bottom: 5px;
    margin - bottom: 5px;
    border - bottom: 1px solid # e8e8e8
}
 # sp - left.sp - module.latestnews > div: last - child,  # sp - right.sp - module.latestnews > div: last - child {
    padding - bottom: 0;
    margin - bottom: 0;
    border - bottom: 0
}
 # sp - left.sp - module.latestnews > div > a,  # sp - right.sp - module.latestnews > div > a {
    display: block;
    font - weight: 400
}
 # sp - left.sp - module.tagscloud,  # sp - right.sp - module.tagscloud {
    margin: -2px 0
}
 # sp - left.sp - module.tagscloud.tag - name,  # sp - right.sp - module.tagscloud.tag - name {
    display: inline - block;
    padding: 5px 10px;
    background:  # 808080;
    color:  # fff;
    border - radius: 4px;
    margin: 2px 0
}
 # sp - left.sp - module.tagscloud.tag - name span,  # sp - right.sp - module.tagscloud.tag - name span {
    display: inline - block;
    min - width: 10px;
    padding: 3px 7px;
    font - size: 12px;
    font - weight: 700;
    line - height: 1;
    text - align: center;
    white - space: nowrap;
    vertical - align: baseline;
    background - color: rgba(0, 0, 0, 0.2);
    border - radius: 10px
}
.view - login # sp - left, .view - registration # sp - left {
    flex: 1 0 50 % ;
    max - width: 50 % ;
    padding: 0px 30px 0px 120px
}
.view - login # sp - component, .view - registration # sp - component {
    flex: 1 0 50 % ;
    max - width: 50 % ;
    padding: 0px 160px 0px 120px;
    margin - top: 50px
}
.view - login # sp - main - body, .view - registration # sp - main - body {
    margin - top: 100px
}
.view - login.logout.form - horizontal.controls {
    margin: 0px;
    text - align: center
}
.view - login.logout.form - horizontal.controls.btn.btn - primary {
    font - size: 14px;
    font - weight: bold;
    letter - spacing: 1px;
    text - align: center;
    color:  # ffffff;
    text - transform: uppercase;
    padding: 14px 0px;
    border - radius: 0px;
    padding: 13px 10px;
    width: 106px
}
.view - login.logout.form - horizontal.controls.btn.btn - primary: hover, .view - login.logout.form - horizontal.controls.btn.btn - primary: focus, .view - login.logout.form - horizontal.controls.btn.btn - primary: active {
    box - shadow: none;
    background - color:  # c80000;
    border - color:  # c80000
}
.login img {
    display: inline - block;
    margin: 20px 0
}
.login.checkbox input[type = "checkbox"]{
    margin - top: 6px
}
.login.form - group {
    margin - bottom: 40px
}
.login.form - group.input - group - prepend {
    display: none
}
.login.form - group.form - control {
    display: block;
    width: 100 % ;
    padding: 0px;
    font - size: 1rem;
    line - height: 1.5;
    color:  # 666666;
    background - color:  # fff;
    background - clip: padding - box;
    border: none;
    border - radius: 0px;
    transition: border - color 0.15s ease - in - out,
    box - shadow 0.15s ease - in - out;
    border - bottom: 1px solid # d6d6d6
}
.login.form - group.form - control: hover, .login.form - group.form - control: focus, .login.form - group.form - control: active {
    box - shadow: none;
    border - bottom - color:  # ff2c2c
}
.login.form - group.form - check: after {
    display: none
}
.login.form - group.form - check label {
    top: 0px;
    font - weight: 500;
    color:  # b3b3b3
}
.login.form - group.form - check.form - check - input {
    -webkit - appearance: none;
    width: 24px;
    height: 24px;
    border - radius: 50 % ;
    background:  # d9d9d9;
    position: relative;
    top: 7px;
    margin - right: 10px
}
.login.form - group.form - check.form - check - input: focus {
    box - shadow: none;
    outline: none
}
.login.form - group.form - check.form - check - input: checked: before {
    visibility: visible;
    opacity: 1
}
.login.form - group.form - check.form - check - input: before {
    content: "";
    position: absolute;
    background: white;
    z - index: 3333;
    width: 100 % ;
    height: 100 % ;
    border - radius: 50 % ;
    border: 8px solid red;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease
}
.login.form - group.form - check + .form - group: after {
    display: none
}
.login.btn.btn - primary {
    font - size: 14px;
    font - weight: bold;
    letter - spacing: 1px;
    text - align: center;
    color:  # ffffff;
    text - transform: uppercase;
    padding: 14px 0px;
    border - radius: 0px;
    width: 106px
}
.login.btn.btn - primary: hover, .login.btn.btn - primary: focus, .login.btn.btn - primary: active {
    box - shadow: none;
    background - color:  # c80000;
    border - color:  # c80000
}
.login.list - group.list - group - item {
    padding: 5px 0px;
    border: none
}
.view - registration.registration.form - group {
    margin - bottom: 40px
}
.view - registration.registration.form - group.input - group - prepend {
    display: none
}
.view - registration.registration.form - group.form - control {
    display: block;
    width: 100 % ;
    padding: 0px;
    font - size: 1rem;
    line - height: 1.5;
    color:  # 666666;
    background - color:  # fff;
    background - clip: padding - box;
    border: none;
    border - radius: 0px;
    transition: border - color 0.15s ease - in - out,
    box - shadow 0.15s ease - in - out;
    border - bottom: 1px solid # d6d6d6
}
.view - registration.registration.form - group.form - control: hover, .view - registration.registration.form - group.form - control: focus, .view - registration.registration.form - group.form - control: active {
    box - shadow: none;
    border - bottom - color:  # ff2c2c
}
.view - registration.registration legend {
    font - size: 50px;
    font - weight: bold;
    color:  # 000;
    text - transform: uppercase
}
.view - registration.registration.row > .col - lg - 12 > .form - group::after {
    display: none
}
.view - registration.registration.btn.btn - primary {
    font - size: 14px;
    font - weight: bold;
    letter - spacing: 1px;
    text - align: center;
    color:  # ffffff;
    text - transform: uppercase;
    padding: 14px 0px;
    border - radius: 0px;
    padding: 13px 32px;
    margin: 10px 30px 0px 0px
}
.view - registration.registration.btn.btn - primary: hover, .view - registration.registration.btn.btn - primary: focus, .view - registration.registration.btn.btn - primary: active {
    box - shadow: none;
    background - color:  # c80000;
    border - color:  # c80000
}
.view - registration.registration.btn.btn - secondary {
    font - size: 14px;
    font - weight: bold;
    letter - spacing: 1px;
    text - align: center;
    color:  # ffffff;
    text - transform: uppercase;
    padding: 14px 0px;
    border - radius: 0px;
    padding: 13px 32px;
    margin - top: 10px;
    background - color:  # 1a1a1a
}
.view - registration.registration.btn.btn - secondary: hover, .view - registration.registration.btn.btn - secondary: focus, .view - registration.registration.btn.btn - secondary: active {
    box - shadow: none;
    background - color:  # c80000;
    border - color:  # c80000
}
.view - registration.registration.btn.btn - secondary: hover, .view - registration.registration.btn.btn - secondary: focus, .view - registration.registration.btn.btn - secondary: active {
    background - color:  # 000000;
    border - color:  # 000000
}
.form - links ul {
    list - style: none;
    padding: 0;
    margin: 0
}
.registration.modal {
    display: inline - block;
    position: inherit
}
.com - content.layout - edit.nav - tabs.nav - link, .com - content.layout - edit label.hasPopover, .registration label.hasPopover {
    display: inline - block!important
}
.registration.form - check - inline input[type = "radio"]{
    display: inline - block
}
.search.btn - toolbar {
    margin - bottom: 20px
}
.search.btn - toolbar span.icon - search {
    margin: 0
}
.search.btn - toolbar button {
    color:  # fff
}
.search.phrases.phrases - box.controls label {
    display: inline - block;
    margin: 0 20px 20px
}
.search.phrases.ordering - box {
    margin - bottom: 15px
}
.search.only label {
    display: inline - block;
    margin: 0 20px 20px
}
.search.search - results dt.result - title {
    margin - top: 40px
}
.search.search - results dt, .search.search - results dd {
    margin: 5px 0
}
.filter - search.chzn - container - single.chzn - single {
    height: 34px;
    line - height: 34px
}
.form - search.finder label {
    display: block
}
.form - search.finder.input - medium {
    width: 60 % ;
    border - radius: 4px
}
.finder.word input {
    display: inline - block
}
.finder.search - results.list - striped li {
    padding: 20px 0
}
.layout - blog # sp - main - body {
    padding: 0px 0px 150px 0px
}
.layout - blog # sp - main - body > .container {
    margin: 0px;
    padding: 0px;
    max - width: 100 %
}
.layout - blog.blog.dylan - blog - listing > .row + .row {
    max - width: 1350px;
    margin: 0 auto
}
.article - list.articles - leading {
    display: flex;
    flex - wrap: wrap;
    justify - content: center
}
.article - list.articles - leading.article: first - child.article - intro - image {
    background - color:  # ff2c2c
}
.article - list.articles - leading.article: first - child.article - intro - image img {
    mix - blend - mode: darken;
    height: 940px
}
.article - list.articles - leading.article: first - child.article - body {
    max - width: 1320px;
    margin: 0 auto;
    flex - direction: column;
    top: 18 % ;
    bottom: auto
}
.article - list.articles - leading.article: first - child.article - info {
    order: -1
}
.article - list.articles - leading.article: first - child.article - info.published {
    color:  # fff
}
.article - list.articles - leading.article: first - child.article - header {
    max - width: 50 %
}
.article - list.articles - leading.article: first - child.article - header a {
    font - size: 50px;
    margin - bottom: 20px;
    display: inline - block;
    line - height: 1.4
}
.article - list.articles - leading.article: first - child.article - header a: hover, .article - list.articles - leading.article: first - child.article - header a: focus, .article - list.articles - leading.article: first - child.article - header a: active {
    color:  # fff;
    text - decoration: underline
}
.article - list.articles - leading.article: first - child.article - introtext {
    max - width: 34 % ;
    display: block
}
.article - list.articles - leading.article: first - child.article - introtext p {
    font - size: 20px;
    line - height: 1.5;
    color:  # fff;
    margin - bottom: 55px
}
.article - list.articles - leading.article: first - child.readmore {
    display: block
}
.article - list.articles - leading.article: first - child.readmore a {
    font - size: 14px;
    font - weight: bold;
    letter - spacing: 1px;
    text - align: center;
    color:  # ff2c2c;
    text - transform: uppercase;
    background:  # fff;
    padding: 15px 30px;
    display: inline - block
}
.article - list.articles - leading.article: nth - child(2) {
    flex: 1 0 auto;
    max - width: 646px;
    margin - right: 30px;
    margin - top: -250px
}
.article - list.articles - leading.article: nth - child(2).article - intro - image img {
    height: 466px
}
.article - list.articles - leading.article: nth - child(2).article - header a {
    font - size: 40px
}
.article - list.articles - leading.article: last - child {
    flex: 1 0 auto;
    max - width: 646px;
    margin - top: -250px
}
.article - list.articles - leading.article: last - child.article - intro - image img {
    height: 466px
}
.article - list.article {
    margin - bottom: 30px;
    position: relative
}
.article - list.article: before {
    content: "";
    background - image: linear - gradient(to top,  # 000, rgba(0, 0, 0, 0)48 % );
    position: absolute;
    width: 100 % ;
    height: 100 % ;
    top: 0px;
    bottom: 0px;
    right: 0px
}
.article - list.article.article - intro - image, .article - list.article.article - featured - video, .article - list.article.article - featured - audio, .article - list.article.article - feature - gallery {
    overflow: hidden
}
.article - list.article.article - intro - image img, .article - list.article.article - featured - video img, .article - list.article.article - featured - audio img, .article - list.article.article - feature - gallery img {
    width: 100 %
}
.article - list.article.article - body {
    position: absolute;
    bottom: 25px;
    left: 40px;
    right: 40px
}
.article - list.article.article - introtext {
    display: none
}
.article - list.article.article - header h1 a, .article - list.article.article - header h2 a {
    font - size: 30px;
    font - weight: bold;
    color:  # ffffff
}
.article - list.article.article - header h1 a: hover, .article - list.article.article - header h1 a: active, .article - list.article.article - header h1 a: focus, .article - list.article.article - header h2 a: hover, .article - list.article.article - header h2 a: active, .article - list.article.article - header h2 a: focus {
    color:  # c80000
}
.article - list.article.readmore {
    display: none
}
.article - info.createdby {
    display: none
}
.article - info.category - name {
    display: none
}
.article - info.published {
    font - size: 18px;
    line - height: 1.56;
    letter - spacing: 2px;
    color:  # ffffff;
    margin - bottom: 15px;
    display: inline - block
}
.article - details > div {
    max - width: 1060px;
    margin: 0 auto;
    padding: 0px 15px
}
.article - details.article - header {
    position: relative
}
.article - details.article - header h1, .article - details.article - header h2 {
    font - size: 50px;
    font - weight: bold;
    line - height: 1.48;
    letter - spacing: -1.67px;
    color:  # 000;
    max - width: 50 % ;
    margin - bottom: 20px
}
.article - details.article - info.createdby, .article - details.article - info.category - name {
    display: inline - block;
    font - size: 18px;
    color:  # 666666;
    text - transform: uppercase;
    border - right: 1px solid # 979797;
    padding - right: 10px;
    margin - right: 10px;
    letter - spacing: 2px
}
.article - details.article - info.createdby a, .article - details.article - info.category - name a {
    color:  # 666666
}
.article - details.article - info.published {
    color:  # 666666;
    text - transform: uppercase
}
.article - details.article - full - image {
    max - width: 100 % ;
    margin - bottom: 42px;
    padding: 0px;
    background - color:  # ff2c2c
}
.article - details.article - full - image img {
    mix - blend - mode: darken
}
.article - details.article - featured - video, .article - details.article - featured - audio, .article - details.article - feature - gallery {
    margin - bottom: 2rem
}
.article - details.article - author - information {
    padding - top: 2rem;
    margin - top: 2rem;
    border - top: 1px solid # f5f5f5
}
.article - details.article - can - edit {
    position: relative;
    margin - bottom: 10px
}
.article - details.article - can - edit a {
    display: inline - block;
    background:  # 2a61c9;
    color:  # fff;
    padding: 5px 12px;
    border - radius: 3px;
    font - size: 14px
}
.related - article - list - container {
    margin - top: 15px
}
.related - article - list - container.related - article - title {
    font - size: 22px;
    padding - bottom: 15px;
    border - bottom: 1px solid # f3f3f3
}
.related - article - list - container ul.related - article - list {
    list - style: none;
    padding: 0
}
.related - article - list - container ul.related - article - list li {
    margin - bottom: 10px
}
.related - article - list - container ul.related - article - list li.article - header h2 {
    font - size: 1.2rem
}
.related - article - list - container ul.related - article - list li.article - header h2 a {
    color:  # 252525
}
.related - article - list - container ul.related - article - list li.article - header h2 a: hover {
    color:  # 044cd0
}
.related - article - list - container ul.related - article - list li.published {
    font - size: 14px
}
.tags {
    list - style: none;
    padding: 0;
    margin: 2rem 0 0 0;
    display: block
}
.tags > li {
    display: inline - block
}
.tags > li a {
    display: block;
    font - size: 0.875rem;
    padding: 0.5rem 1rem;
    border - radius: 6.25rem
}
.tags > li a: hover {
    color:  # fff
}
.pagenavigation.pagination::after, .pager::after {
    display: block;
    clear: both;
    content: ""
}
.pagenavigation.pagination > li, .pager > li {
    display: inline - block
}
.pagenavigation.pagination > li.previous, .pager > li.previous {
    float: left
}
.pagenavigation.pagination > li.next, .pager > li.next {
    float: right
}
.pagenavigation.pagination > li a, .pager > li a {
    display: inline - block;
    font - size: 14px;
    background:  # ff2c2c;
    border - radius: 0px;
    font - weight: bold;
    padding: 14px 50px;
    text - transform: uppercase;
    color:  # fff
}
.pagenavigation.pagination > li a: hover, .pager > li a: hover {
    background - color:  # c80000;
    color:  # fff
}
.pagenavigation {
    list - style: none;
    padding: 80px 15px 0px 15px;
    border - top: 1px solid rgba(156, 156, 156, 0.3);
    max - width: 1060px;
    margin: 0 auto
}
.pagenavigation.pagination > li.next {
    margin - left: 760px!important
}
 @ media(max - width: 767px) {
    .pagenavigation.pagination > li.next {
        margin - left: 105px!important
    }
}
 # article - comments {
    padding - top: 2rem;
    margin - top: 2rem;
    border - top: 1px solid # f5f5f5
}
.article - ratings {
    display: flex;
    align - items: center
}
.article - ratings.rating - symbol {
    unicode - bidi: bidi - override;
    direction: rtl;
    font - size: 1rem;
    display: inline - block;
    margin - left: 5px
}
.article - ratings.rating - symbol span.rating - star {
    font - family: "Font Awesome 5 Free";
    font - weight: normal;
    font - style: normal;
    display: inline - block
}
.article - ratings.rating - symbol span.rating - star.active: before {
    content: "";
    color:  # f6bc00;
    font - weight: 900
}
.article - ratings.rating - symbol span.rating - star: before {
    content: "";
    padding - right: 5px
}
.article - ratings.rating - symbol span.rating - star: hover: before, .article - ratings.rating - symbol span.rating - star: hover~span.rating - star: before {
    content: "";
    color:  # e7b000;
    font - weight: 900;
    cursor: pointer
}
.article - ratings.ratings - count {
    font - size: 0.785rem;
    color:  # 999
}
.article - ratings.fa - spinner {
    margin - right: 5px
}
.pagination - wrapper {
    align - items: center;
    margin - top: 100px
}
.pagination - wrapper.mr - auto {
    margin: 0 auto!important
}
.pagination - wrapper.pagination {
    margin - bottom: 0
}
.pagination - wrapper.pagination.page - item.active.page - link {
    background - color:  # ff2c2c
}
.pagination - wrapper.pagination.page - item.page - link {
    font - size: 20px;
    position: relative;
    display: block;
    line - height: 1.25;
    font - weight: 500;
    border: none;
    margin - right: 10px;
    padding: 5px 12px;
    border - radius: 0px;
    box - shadow: none
}
.pagination - wrapper.pagination.page - item.page - link: hover {
    background - color:  # ff2c2c;
    color:  # fff
}
.pagination - wrapper.pagination - counter {
    display: none
}
.article - social - share {
    float: right
}
.article - social - share.social - share - icon ul {
    padding: 0;
    list - style: none;
    margin: 0
}
.article - social - share.social - share - icon ul li {
    display: inline - block
}
.article - social - share.social - share - icon ul li: not(: last - child) {
    margin - right: 10px
}
.article - social - share.social - share - icon ul li a {
    border: 1px solid # ededed;
    font - size: 1rem;
    border - radius: 50 % ;
    height: 34px;
    line - height: 34px;
    text - align: center;
    width: 34px;
    display: inline - block
}
.article - social - share.social - share - icon ul li a: hover, .article - social - share.social - share - icon ul li a: focus {
    color:  # fff
}
.newsfeed - category.category {
    list - style: none;
    padding: 0;
    margin: 0
}
.newsfeed - category.category li {
    padding: 5px 0
}
.newsfeed - category # filter - search {
    margin: 10px 0
}
.category - module, .categories - module, .archive - module, .latestnews, .newsflash - horiz, .mostread, .form - links, .list - striped {
    list - style: none;
    padding: 0;
    margin: 0
}
.category - module li, .categories - module li, .archive - module li, .latestnews li, .newsflash - horiz li, .mostread li, .form - links li, .list - striped li {
    padding: 2px 0
}
.category - module li h4, .categories - module li h4, .archive - module li h4, .latestnews li h4, .newsflash - horiz li h4, .mostread li h4, .form - links li h4, .list - striped li h4 {
    margin: 5px 0
}
.article - footer - top {
    display: table;
    clear: both;
    width: 100 %
}
.article - footer - top.post_rating {
    float: left
}
.contentpane: not(.com - sppagebuilder) {
    padding: 20px
}
section # sp - bottom - top {
    padding - top: 70px
}
section # sp - bottom - top.sp - module - title {
    font - size: 20px;
    text - align: center
}
 # sp - bottom {
    padding: 60px 0 30px;
    line - height: 1.6
}
 # sp - bottom.sp - module {
    margin - bottom: 30px
}
 # sp - bottom.sp - module.sp - module - title {
    font - weight: 700;
    font - size: 20px;
    margin: 0 0 30px;
    text - transform: uppercase
}
 # sp - bottom.sp - module ul {
    list - style: none;
    padding: 0;
    margin: 0
}
 # sp - bottom.sp - module ul > li {
    display: block;
    margin - bottom: 8px
}
 # sp - bottom.sp - module ul > li: last - child {
    margin - bottom: 0
}
 # sp - bottom.sp - module ul > li > a {
    display: block
}
 # sp - footer {
    font - size: 14px;
    padding: 0;
    text - align: center;
    background - color:  # 000!important
}
 # sp - footer.sp - copyright {
    opacity: 0.6
}
 # sp - footer.container - inner {
    padding: 25px 0
}
 # sp - footer ul.menu {
    display: inline - block;
    list - style: none;
    padding: 0;
    margin: 0 - 10px
}
 # sp - footer ul.menu li {
    display: inline - block;
    margin: 0 10px
}
 # sp - footer ul.menu li a {
    display: block
}
 # sp - footer ul.menu li a: hover {
    background: none
}
 # sp - footer # sp - footer2 {
    text - align: right
}
html.coming - soon {
    width: 100 % ;
    height: 100 % ;
    min - height: 100 %
}
html.coming - soon body {
    width: 100 % ;
    height: 100 % ;
    min - height: 100 % ;
    display: -ms - flexbox;
    display: -webkit - box;
    display: flex;
    -ms - flex - align: center;
    -ms - flex - pack: center;
    -webkit - box - align: center;
    align - items: center;
    -webkit - box - pack: center;
    justify - content: center;
    padding - top: 40px;
    padding - bottom: 40px;
    text - align: center;
    background - repeat: no - repeat;
    background - position: 50 % 40 %
}
html.coming - soon.coming - soon - title {
    font - size: 100px;
    font - weight: 700;
    color:  # ffffff;
    margin - bottom: 55px
}
html.coming - soon.coming - soon - content {
    font - size: 40px;
    color:  # b4b4b4;
    font - weight: 500
}
html.coming - soon.coming - soon - logo {
    display: inline - block;
    margin - bottom: 2rem
}
html.coming - soon # coming - soon - countdown {
    margin - top: 4rem
}
html.coming - soon # coming - soon - countdown.coming - soon - days, html.coming - soon # coming - soon - countdown.coming - soon - hours, html.coming - soon # coming - soon - countdown.coming - soon - minutes, html.coming - soon # coming - soon - countdown.coming - soon - seconds {
    margin: 0;
    float: left;
    width: 25 %
}
html.coming - soon # coming - soon - countdown.coming - soon - days.coming - soon - number, html.coming - soon # coming - soon - countdown.coming - soon - hours.coming - soon - number, html.coming - soon # coming - soon - countdown.coming - soon - minutes.coming - soon - number, html.coming - soon # coming - soon - countdown.coming - soon - seconds.coming - soon - number {
    width: 100 % ;
    font - size: 4.5rem;
    letter - spacing: -1px;
    line - height: 1;
    font - size: 80px;
    color:  # fff;
    font - weight: bold
}
html.coming - soon # coming - soon - countdown.coming - soon - days.coming - soon - string, html.coming - soon # coming - soon - countdown.coming - soon - hours.coming - soon - string, html.coming - soon # coming - soon - countdown.coming - soon - minutes.coming - soon - string, html.coming - soon # coming - soon - countdown.coming - soon - seconds.coming - soon - string {
    font - size: 1.5rem;
    letter - spacing: -1px;
    display: block;
    text - transform: uppercase;
    color:  # fff;
    font - weight: 500
}
html.coming - soon.coming - soon - position {
    margin - top: 2rem
}
html.coming - soon.social - icons {
    margin - top: 4rem
}
html.coming - soon.coming - soon - login form {
    display: inline - block
}
html.offline body {
    background:  # f3f3f3
}
html.offline.offline - wrapper {
    padding: 50px;
    background - color:  # ffffff;
    border - radius: 10px
}
html.offline.coming - soon - content {
    color:  # 666666
}
html.offline.coming - soon - title {
    color:  # ff2c2c
}
html.offline.btn.btn - success {
    background - color:  # ff2c2c;
    border - color:  # ff2c2c
}
html.error - page {
    width: 100 % ;
    height: 100 %
}
html.error - page body {
    width: 100 % ;
    height: 100 % ;
    display: -ms - flexbox;
    display: -webkit - box;
    display: flex;
    -ms - flex - align: center;
    -ms - flex - pack: center;
    -webkit - box - align: center;
    align - items: center;
    -webkit - box - pack: center;
    justify - content: center;
    padding - top: 40px;
    padding - bottom: 40px;
    text - align: center;
    background - repeat: no - repeat;
    background - position: 50 % 40 %
}
html.error - page.error - logo {
    display: inline - block;
    margin - bottom: 2rem
}
html.error - page.btn.btn - secondary {
    font - size: 14px;
    font - weight: bold;
    letter - spacing: 1px;
    text - align: center;
    color:  # ffffff;
    text - transform: uppercase;
    padding: 14px 0px;
    border - radius: 0px;
    padding: 14px 34px;
    background - color:  # ff2c2c;
    border - color:  # ff2c2c
}
html.error - page.btn.btn - secondary: hover, html.error - page.btn.btn - secondary: focus, html.error - page.btn.btn - secondary: active {
    box - shadow: none;
    background - color:  # c80000;
    border - color:  # c80000
}
html.error - page.error - code {
    font - size: 300px;
    font - weight: bold;
    color:  # ffffff;
    margin: 0px
}
html.error - page.error - message {
    font - size: 30px;
    font - weight: bold;
    color:  # b4b4b4;
    margin - bottom: 60px
}
html.error - page.error - modules {
    margin - top: 2rem
}
.sp - social - share ul {
    display: block;
    padding: 0;
    margin: 20px - 5px 0
}
.sp - social - share ul li {
    display: inline - block;
    font - size: 24px;
    margin: 0 5px
}
.profile > div: not(: last - child) {
    margin - bottom: 30px
}
.dl - horizontal dt {
    margin: 8px 0;
    text - align: left
}
.page - header {
    padding - bottom: 15px
}
table.category {
    width: 100 %
}
table.category thead > tr, table.category tbody > tr {
    border: 1px solid # f2f2f2
}
table.category thead > tr th, table.category thead > tr td, table.category tbody > tr th, table.category tbody > tr td {
    padding: 10px
}
.contact - form.form - actions {
    background: none;
    border: none
}
 @ media print {
    .visible - print {
        display: inherit!important
    }
    .hidden - print {
        display: none!important
    }
}
.sp - preloader {
    height: 100 % ;
    left: 0;
    position: fixed;
    top: 0;
    width: 100 % ;
    z - index: 99999
}
.sp - preloader > div {
    border - radius: 50 % ;
    height: 50px;
    width: 50px;
    top: 50 % ;
    left: 50 % ;
    margin - top: -25px;
    margin - left: -25px;
    position: absolute;
    animation: spSpin 0.75s linear infinite
}
.sp - preloader > div: after {
    content: "";
    position: absolute;
    width: 49px;
    height: 49px;
    top: 1px;
    right: 0;
    left: 0;
    margin: auto;
    border - radius: 50 %
}
.sp - scroll - up {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 36px;
    height: 36px;
    line - height: 36px;
    text - align: center;
    font - size: 16px;
    color:  # fff;
    background:  # 333;
    border - radius: 3px;
    z - index: 1000
}
.sp - scroll - up: hover, .sp - scroll - up: active, .sp - scroll - up: focus {
    color:  # fff;
    background:  # 444
}
.control - group {
    margin - bottom: 1rem
}
select.form - control: not([multiple]), select.inputbox: not([multiple]), select: not([multiple]) {
    height: calc(2.25rem + 2px)
}
input[type = "text"]: not(.form - control), input[type = "email"]: not(.form - control), input[type = "url"]: not(.form - control), input[type = "date"]: not(.form - control), input[type = "password"]: not(.form - control), input[type = "search"]: not(.form - control), input[type = "tel"]: not(.form - control), input[type = "number"]: not(.form - control), select: not(.form - control) {
    display: block;
    width: 100 % ;
    padding: 0.5rem 0.75rem;
    font - size: 1rem;
    line - height: 1.25;
    color:  # 495057;
    background - color:  # fff;
    background - image: none;
    background - clip: padding - box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border - radius: 0.25rem;
    transition: border - color ease - in - out 0.15s,
    box - shadow ease - in - out 0.15s
}
input[type = "text"]: not(.form - control): focus, input[type = "email"]: not(.form - control): focus, input[type = "url"]: not(.form - control): focus, input[type = "date"]: not(.form - control): focus, input[type = "password"]: not(.form - control): focus, input[type = "search"]: not(.form - control): focus, input[type = "tel"]: not(.form - control): focus, input[type = "number"]: not(.form - control): focus, select: not(.form - control): focus {
    color:  # 495057;
    background - color:  # fff;
    border - color:  # 80bdff;
    outline: 0
}
.chzn - select, .chzn - select - deselect {
    width: 100 %
}
.chzn - container.chzn - container - single.chzn - single {
    display: block;
    width: 100 % ;
    padding: 0.5rem 0.75rem;
    font - size: 1rem;
    line - height: 1.25;
    height: calc(2.25rem + 2px);
    color:  # 495057;
    background - color:  # fff;
    background - image: none;
    background - clip: padding - box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border - radius: 0.25rem;
    transition: border - color ease - in - out 0.15s,
    box - shadow ease - in - out 0.15s;
    box - shadow: none
}
.chzn - container.chzn - container - single.chzn - single div {
    width: 30px;
    background: none
}
.chzn - container.chzn - container - single.chzn - single div > b {
    background: none;
    position: relative
}
.chzn - container.chzn - container - single.chzn - single div > b: after {
    content: "";
    font - family: "Font Awesome 5 Free";
    font - weight: 900;
    font - size: 0.875rem;
    position: absolute;
    top: 50 % ;
    left: 50 % ;
    transform: translate(-50 % , -50 % );
    -webkit - transform: translate(-50 % , -50 % )
}
.chzn - container.chzn - container - single.chzn - container - active.chzn - with  - drop.chzn - single {
    border - radius: 0.25rem 0.25rem 0 0
}
.chzn - container.chzn - container - single.chzn - search {
    padding: 0.625rem
}
.chzn - container.chzn - container - single.chzn - search input[type = "text"]{
    display: block;
    width: 100 % ;
    padding: 0.5rem 1.429rem 0.5rem 0.75rem;
    font - size: 0.875rem;
    line - height: 1.25;
    height: calc(2rem + 2px);
    color:  # 495057;
    background - color:  # fff;
    background - image: none;
    background - clip: padding - box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border - radius: 0.25rem;
    transition: border - color ease - in - out 0.15s,
    box - shadow ease - in - out 0.15s;
    box - shadow: none;
    -webkit - box - shadow: none
}
.chzn - container.chzn - container - single.chzn - search input[type = "text"]: focus {
    border - color:  # 80bdff;
    outline: 0;
    box - shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    -webkit - box - shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25)
}
.chzn - container.chzn - container - single.chzn - search: after {
    content: "";
    font - family: "Font Awesome 5 Free";
    font - weight: 900;
    font - size: 0.875rem;
    color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50 % ;
    right: 20px;
    transform: translateY(-50 % );
    -webkit - transform: translateY(-50 % )
}
.chzn - container.chzn - container - single.chzn - drop {
    border - color: rgba(0, 0, 0, 0.15);
    border - radius: 0 0 0.25rem 0.25rem;
    box - shadow: none;
    -webkit - box - shadow: none
}
.chzn - container.chzn - container - single.chzn - results li.highlighted {
    background - image: none!important
}
.chzn - container.chzn - container - multi.chzn - choices {
    display: block;
    width: 100 % ;
    padding: 0 0.75rem;
    min - height: calc(2.25rem + 2px);
    line - height: 1.25;
    background - color:  # fff;
    background - image: none;
    background - clip: padding - box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border - radius: 0.25rem;
    transition: border - color ease - in - out 0.15s,
    box - shadow ease - in - out 0.15s;
    box - shadow: none;
    -webkit - box - shadow: none
}
.chzn - container.chzn - container - multi.chzn - choices li.search - field input[type = "text"]{
    font - size: 0.875rem;
    font - weight: normal;
    line - height: 1.25;
    height: calc(2rem + 2px);
    background - color:  # fff
}
.chzn - container.chzn - container - multi.chzn - choices li.search - choice {
    margin: 5.5px 5px 0 0;
    padding: 5px 20px 5px 5px;
    background - image: none;
    background - color:  # f5f5f5;
    border - color: rgba(0, 0, 0, 0.1);
    box - shadow: none;
    -webkit - box - shadow: none
}
.chzn - container.chzn - container - multi.chzn - choices li.search - choice.search - choice - close {
    background: none;
    top: 5px;
    color: rgba(0, 0, 0, 0.2)
}
.chzn - container.chzn - container - multi.chzn - choices li.search - choice.search - choice - close: hover {
    color: rgba(0, 0, 0, 0.5)
}
.chzn - container.chzn - container - multi.chzn - choices li.search - choice.search - choice - close: after {
    content: "";
    font - family: "Font Awesome 5 Free";
    font - weight: 900;
    font - size: 0.875rem;
    position: absolute;
    top: 0;
    right: 0
}
.chzn - container.chzn - container - multi.chzn - with  - drop.chzn - container - active.chzn - choices {
    border - radius: 0.25rem
}
.chzn - container.chzn - container - multi.chzn - with  - drop.chzn - drop {
    margin - top: -4px;
    border: none;
    border - radius: 0;
    box - shadow: none;
    -webkit - box - shadow: none
}
.chzn - container.chzn - container - multi.chzn - with  - drop.chzn - drop.chzn - results: not(: empty) {
    padding: 0.75rem;
    background:  # fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border - top: 0;
    border - radius: 0 0 0.25rem 0.25rem
}
.chzn - container.chzn - container - multi.chzn - with  - drop.chzn - drop.chzn - results li.no - results {
    background: none
}
.form - horizontal.control - label {
    float: left;
    width: auto;
    padding - top: 5px;
    padding - right: 5px;
    text - align: left
}
.form - horizontal.controls {
    margin - left: 220px
}
.card - block {
    padding: 20px
}
.card - block ul {
    list - style: none;
    padding: 0;
    margin: 0;
    display: block
}
.card - block ul li {
    display: block
}
.alert.alert - error {
    color:  # 721c24;
    background - color:  # f8d7da;
    border - color:  # f5c6cb
}
 # sp - cookie - consent {
    position: fixed;
    font - size: 16px;
    font - weight: 500;
    bottom: 0;
    left: 0;
    width: 100 % ;
    z - index: 10001
}
 # sp - cookie - consent > div {
    padding: 20px;
    position: relative
}
.form - check - inline input[type = "radio"]{
    display: none
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format {
    position: relative;
    display: inline - block;
    vertical - align: middle;
    white - space: nowrap
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format.form - check - inline {
    margin: 0;
    margin - right: -5px
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format.form - check - inline label {
    display: inline - block;
    padding: 4px 12px;
    margin - bottom: 0;
    font - size: 13px;
    line - height: 18px;
    text - align: center;
    vertical - align: middle;
    cursor: pointer;
    background - color:  # f3f3f3;
    color:  # 333;
    border - top: 1px solid # b3b3b3;
    border - right: 1px solid # b3b3b3;
    border - bottom: 1px solid # b3b3b3;
    box - shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border - radius: 0
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format.form - check - inline label.btn - success {
    background:  # 46a546;
    color:  # fff
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format.form - check - inline label input[type = "radio"]{
    display: none!important
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format.form - check - inline: last - child label {
    border - top - right - radius: 3px;
    border - bottom - right - radius: 3px
}
 # attrib - helix_ultimate_blog_options # jform_attribs_helix_ultimate_article_format.form - check - inline: first - child label {
    border - left: 1px solid # b3b3b3;
    border - top - left - radius: 3px;
    border - bottom - left - radius: 3px
}
.com - contenthistory.btn - group {
    display: flex;
    justify - content: flex - end
}
.com - contenthistory.btn - group button {
    display: inline - block;
    padding: 4px 12px;
    margin - bottom: 0;
    font - size: 13px;
    line - height: 18px;
    text - align: center;
    vertical - align: middle;
    cursor: pointer;
    color:  # 333;
    text - shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background - color:  # f5f5f5;
    background - repeat: repeat - x;
    border: 1px solid # bbb;
    border - bottom - color:  # a2a2a2;
    -webkit - border - radius: 4px;
    -moz - border - radius: 4px;
    border - radius: 4px;
    box - shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05)
}
.com - contenthistory.btn - group button: hover {
    color:  # 333;
    background - color:  # e9e9e9
}
 # versionsModal {
    top: 10 %
}
 # versionsModal.modal - dialog {
    max - width: 80 %
}
 # versionsModal iframe {
    min - height: 300px
}
body.sppb - btn {
    padding: 13px 32px 14px 33px;
    font - size: 14px;
    line - height: 1.5;
    font - weight: bold;
    position: relative;
    z - index: 1;
    letter - spacing: 1px;
    text - transform: uppercase;
    border - color: transparent
}
body.sppb - btn: hover, body.sppb - btn: focus, body.sppb - btn: active {
    box - shadow: none
}
body.sppb - btn.sppb - btn - 3d {
    padding - top: 14px;
    padding - bottom: 13px
}
body.sppb - btn.sppb - btn - xlg {
    padding: 13px 53px 14px 52px
}
body.sppb - btn.sppb - btn - lg {
    padding: 13px 43px 14px 42px
}
body.sppb - btn.sppb - btn - sm {
    padding: 14px 28px 15px 28px;
    font - size: 12px
}
body.sppb - btn.sppb - btn - xs {
    padding: 10px 20px;
    font - size: 12px
}
body.sppb - btn.sppb - btn - default {
    background - color:  # ff2c2c;
    color:  # fff;
    border - color:  # ff2c2c
}
body.sppb - btn.sppb - btn - default:
hover {
    background - color:  # c80000;
    border - color:  # c80000
}
body.sppb - btn.sppb - btn - default .sppb - btn - gradient {
    background - image: linear - gradient(0deg,  # ff2c2c 0,  # c80000 100 % );
    color:  # fff
}
body.sppb - btn.sppb - btn - default .sppb - btn - rounded {
    border - radius: 6px
}
body.sppb - btn.sppb - btn - default .sppb - btn - outline {
    background - color: transparent;
    color:  # ff2c2c;
    border - color:  # ff2c2c
}
body.sppb - btn.sppb - btn - default .sppb - btn - outline:
hover {
    background - color:  # ff2c2c;
    color:  # fff
}
body.sppb - btn.sppb - btn - default .sppb - btn - outline.btn - white {
    border - color:  # fff;
    color:  # fff
}
body.sppb - btn.sppb - btn - default .sppb - btn - outline.btn - white:
hover {
    color:  # fff;
    background - color:  # ff2c2c;
    border - color:  # ff2c2c
}
body.sppb - btn.sppb - btn - default .sppb - btn - 3d {
    border - bottom - color:  # c80000
}
body.sppb - btn.sppb - btn - default .sppb - btn - 3d:
hover {
    border - bottom - color: transparent
}
body.sppb - btn.sppb - btn - link {
    padding: 0px;
    color:  # ff2c2c
}
body.sppb - btn.sppb - btn - link:
hover {
    text - decoration: underline
}
.section - border.sppb - row > div {
    height: 170px;
    display: flex;
    align - items: center;
    justify - content: center;
    border - width: 0px 1px 1px 0px;
    border - color: rgba(42, 61, 88, 0.1);
    border - style: solid
}
.section - border.sppb - row > div:
nth - child(3n + 3) {
    border - right - color: transparent
}
.section - border.sppb - row > div:
nth - child(n + 7) {
    border - bottom - color: transparent
}
.image - overly.sppb - testimonial - carousel - img - wrap {
    border - radius: 50 %
}
.image - overly.sppb - addon - single - image - container, .image - overly.sppb - img - container, .image - overly.sppb - testimonial - carousel - img - wrap {
    background - color:  # ff2c2c
}
.image - overly.sppb - addon - single - image - container img, .image - overly.sppb - img - container img, .image - overly.sppb - testimonial - carousel - img - wrap img {
    mix - blend - mode: darken
}
.feature - list ul {
    list - style: none;
    margin: 0px;
    padding: 0px
}
.feature - list ul li {
    margin - bottom: 10px
}
.feature - list ul li:
before {
    content: "";
    font - weight: 900;
    font - family: "Font Awesome 5 Free";
    color: rgba(255, 44, 44, 0.4);
    margin - right: 15px
}
.dylan - testimonial {
    position: relative
}
.dylan - testimonial.sppb - carousel - extended - dots ul {
    display: flex;
    align - items: center;
    justify - content: center
}
.dylan - testimonial.sppb - carousel - extended - dots ul li.active {
    width: 14px!important;
    height: 14px!important
}
.dylan - testimonial:
after, .dylan - testimonial:
before {
    position: absolute;
    content: "";
    width: 35 % ;
    height: 100 % ;
    background - image: linear - gradient(to left,  # ffffff, rgba(255, 255, 255, 0.51));
    right: 0px;
    top: 0px
}
.dylan - testimonial: before {
    left: 0px;
    z - index: 1;
    background - image: linear - gradient(to right,  # ffffff, rgba(255, 255, 255, 0.51))
}
.dylan - feature - list - left ul, .dylan - feature - list - right ul {
    list - style: none;
    padding: 0px;
    margin: 0px
}
.dylan - feature - list - left ul li, .dylan - feature - list - right ul li {
    margin - bottom: 18px
}
.dylan - feature - list - left ul li: before, .dylan - feature - list - right ul li: before {
    content: "";
    font - weight: 900;
    font - family: "Font Awesome 5 Free";
    color: rgba(255, 255, 255, 0.3);
    margin - right: 10px
}
.dylan - feature - list - right ul li {
    color:  # ffffff
}
.dylan - feature - list - right ul li: before {
    content: "";
    color: rgba(255, 255, 255, 0.9)
}
.dylan - content - center > .sppb - row - container > .sppb - row {
    align - items: center;
    justify - content: center
}
.sppb - addon.sppb - addon - single - image.sppb - magnific - popup.sppb - addon - image - overlay - icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    background: transparent;
    transform: translate(0, 0);
    margin: 0;
    text - indent: -9999px;
    cursor: zoom - in
}
.dylan - progress.sppb - chart - percent span {
    font - weight: bold;
    letter - spacing: -0.08px
}
.dylan - progress.sppb - addon - title {
    letter - spacing: -0.06px
}
.dylan - progress.sppb - pie - chart {
    height: 200px;
    width: 200px
}
.dylan - progress.sppb - chart - percent canvas {
    height: 200px;
    width: 200px
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - default {
    border: none
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - heading {
    padding: 20px 0px;
    background:  # fff;
    border - top: 1px solid # f3f3f3
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - heading.active.sppb - panel - title {
    color:  # ff2c2c
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - heading.active.sppb - toggle - direction {
    color:  # ff2c2c
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - heading.sppb - toggle - direction {
    color:  # 000
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - title {
    font - size: 20px;
    font - weight: bold;
    color:  # 000
}
.dylan - accordion.sppb - addon - accordion.sppb - panel - body {
    border - top - color: rgba(151, 151, 151, 0.15);
    background:  # fff;
    color:  # 666666;
    padding: 20px 20px 30px 0px;
    line - height: 27px
}
.form - builder - radio - item label::before {
    content: "";
    width: 24px;
    height: 24px;
    border - radius: 50 % ;
    background - color:  # 000!important;
    position: absolute;
    top: 4px;
    border: none;
    left: 0
}
.dylan - contact input:
not([type = "checkbox"]): not([type = "radio"]): hover, .dylan - contact input: not([type = "checkbox"]): not([type = "radio"]): focus, .dylan - contact input: not([type = "checkbox"]): not([type = "radio"]): active {
    border - bottom - color:  # ff2c2c!important
}
.dylan - contact.sppb - addon - form - builder - form.sppb - form - group select {
    -webkit - appearance: none;
    position: relative;
    background: url(.. / images / chevron - down - solid.svg)no - repeat 95 % 50 % !important;
    background - size: 11px!important;
    padding: 0px 0px 15px 0px!important
}
.dylan - contact.sppb - addon - form - builder - form.sppb - form - group select: hover, .dylan - contact.sppb - addon - form - builder - form.sppb - form - group select: focus, .dylan - contact.sppb - addon - form - builder - form.sppb - form - group select: active {
    border - bottom - color:  # ff2c2c!important
}
.dylan - contact.sppb - addon - form - builder - form.sppb - form - group.sppb - form - builder - field - 4: after {
    display: none
}
.dylan - contact.sppb - addon - form - builder - form.form - builder - radio - content label {
    margin: 0px 50px 4px 40px;
    font - size: 20px;
    font - weight: 500
}
.dylan - contact.sppb - addon - form - builder - form.form - builder - radio - item input: checked + label::before {
    border: 8px solid # ff2c2c;
    background - color:  # fff!important
}
.home2 - video - bg - wrap {
    margin - top: -120px!important
}
.home2 - video - bg - wrap.sppb - row - overlay {
    background - image: linear - gradient(to right,  # 031e41 0 % , rgba(0, 0, 0, 0.24)82 % )
}
.dylan - image - carousel div.sppb - carousel - extended - nav - control {
    right: 45px;
    width: 135px;
    top: 66 % !important
}
.dylan - image - carousel div.sppb - carousel - extended - nav - control.next - control.nav - control i, .dylan - image - carousel div.sppb - carousel - extended - nav - control.prev - control.nav - control i {
    font - size: 45px;
    padding - top: 7px;
    padding - left: 7px
}
.dylan - image - carousel div.sppb - carousel - extended - nav - control.prev - control.nav - control i {
    padding - left: 0px
}
.dylan - article - scroller.sppb - articles - carousel - img {
    position: relative;
    border - radius: 0px 0px 10px 10px
}
.dylan - article - scroller.sppb - articles - carousel - img: before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    border - radius: 0px 0px 10px 10px;
    background - image: linear - gradient(to top,  # 142947 22 % , rgba(255, 255, 255, 0.1)30 % , transparent 51 % );
    width: 100 % ;
    height: 100 %
}
.dylan - article - scroller.sppb - articles - carousel - img img {
    height: 518px;
    width: 100 % ;
    border - radius: 0px 0px 10px 10px
}
.dylan - article - scroller.sppb - articles - carousel - content {
    position: absolute;
    height: auto;
    background: transparent;
    bottom: -14px
}
.dylan - article - scroller.sppb - articles - carousel - content.sppb - articles - carousel - link {
    line - height: 1.35
}
.dylan - article - scroller.sppb - articles - carousel - content.sppb - articles - carousel - link: hover {
    color:  # ff2c2c!important
}
.dylan - article - scroller.sppb - articles - carousel - content.sppb - articles - carousel - meta - date {
    line - height: 1.56;
    letter - spacing: 2px
}
.dylan - article - scroller.sppb - articles - carousel - content.sppb - articles - carousel - meta - category {
    display: none
}
.dylan - article - scroller.bx - controls.bx - has - pager {
    position: absolute;
    width: 100 % ;
    top: auto;
    bottom: -60px;
    left: 50 %
}
.dylan - article - scroller.bx - controls.bx - has - pager.bx - controls - direction a {
    width: 50px;
    height: 50px;
    display: inline - block;
    border - radius: 50 % ;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.3);
    font - size: 30px
}
.dylan - article - scroller.bx - controls.bx - has - pager.bx - controls - direction a: hover, .dylan - article - scroller.bx - controls.bx - has - pager.bx - controls - direction a: focus, .dylan - article - scroller.bx - controls.bx - has - pager.bx - controls - direction a: active {
    color:  # fff;
    border - color:  # fff
}
.dylan - article - scroller.bx - controls.bx - has - pager.bx - controls - direction a.bx - next {
    left: 90px
}
.sppb - addon - articles - carousel.bx - pager.bx - default  - pager {
    display: none!important
}
.button - wrap.sppb - btn.sppb - btn - primary {
    background - color:  # ff2c2c
}
.button - wrap.sppb - btn.sppb - btn - primary:
hover, .button - wrap.sppb - btn.sppb - btn - primary: focus, .button - wrap.sppb - btn.sppb - btn - primary: active {
    background - color:  # c80000;
    border - color:  # c80000;
    cursor: pointer
}
.com - media.contentpane {
    padding: 10px!important
}
.com - media.well {
    background:  # f5f5f5;
    padding: 20px;
    border - radius: 4px;
    margin - bottom: 10px
}
.com - media.well.row {
    margin: 0;
    padding: 0
}
.com - media.well.row > div: first - child {
    width: calc(100 %  - 200px)
}
.com - media.well.row > div: last - child {
    width: 200px;
    float: right;
    text - align: right;
    padding - top: 30px
}
.com - media.well.row # folderlist {
    display: inline - block
}
.com - media.well.row # upbutton {
    display: none
}
.com - media.view - imagesList {
    padding: 0px 0px 10px 0!important
}
.com - media.view - imagesList: before {
    content: " ";
    display: table
}
.com - media.view - imagesList: after {
    display: block;
    clear: both;
    content: ""
}
.com - media.view - imagesList ul.manager {
    list - style: none;
    padding: 0;
    margin: 0
}
.com - media.view - imagesList ul.manager > li.thumbnail {
    width: 110px;
    float: left
}
.com - media.view - imagesList ul.manager > li.thumbnail > a > div: first - child {
    height: 60px;
    margin - bottom: 10px;
    text - align: center
}
.com - media.view - imagesList ul.manager > li.thumbnail > a > div: first - child > span {
    display: inline - block;
    width: 60px;
    height: 40px;
    margin: 0 auto;
    margin - top: 25px;
    position: relative;
    background - color:  # 92ceff;
    border - radius: 0 5px 5px 5px
}
.com - media.view - imagesList ul.manager > li.thumbnail > a > div: first - child > span: before {
    content: "";
    width: 50 % ;
    height: 12px;
    border - radius: 0 20px 0 0;
    background - color:  # 92ceff;
    position: absolute;
    top: -12px;
    left: 0px
}
.com - media.view - imagesList ul.manager > li.thumbnail > a > div: first - child img {
    display: inline - block
}
.sp - megamenu - parent {
    list - style: none;
    padding: 0;
    margin: 0 - 15px;
    z - index: 99;
    display: block;
    position: relative
}
.sp - megamenu - parent > li {
    display: inline - block;
    position: relative;
    padding: 0
}
.sp - megamenu - parent > li.menu - justify {
    position: static
}
.sp - megamenu - parent > li > a, .sp - megamenu - parent > li > span {
    display: inline - block;
    padding: 0 15px;
    line - height: 90px;
    font - size: 14px;
    margin: 0
}
.sp - megamenu - parent > li.active > a {
    font - weight: 500
}
.sp - megamenu - parent > li.sp - menu - badge {
    height: 20px;
    line - height: 20px;
    padding: 0 5px;
    font - size: 10px;
    letter - spacing: 1px;
    display: inline - block;
    text - transform: uppercase;
    background:  # d60000;
    color:  # fff;
    border - radius: 3px
}
.sp - megamenu - parent.sp - module {
    padding: 10px
}
.sp - megamenu - parent.sp - mega - group {
    list - style: none;
    padding: 0;
    margin: 0
}
.sp - megamenu - parent.sp - mega - group > li > a {
    display: block;
    text - transform: uppercase;
    font - size: 14px;
    font - weight: 600;
    margin - bottom: 10px
}
.sp - megamenu - parent.sp - mega - group.sp - mega - group - child {
    list - style: none;
    padding: 0;
    margin: 0
}
.sp - megamenu - parent.sp - dropdown {
    margin: 0;
    position: absolute;
    z - index: 10;
    display: none
}
.sp - megamenu - parent.sp - dropdown.sp - dropdown - inner {
    box - shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    padding: 20px
}
.sp - megamenu - parent.sp - dropdown.sp - dropdown - inner > .row: not(: first - child) {
    margin - top: 20px
}
.sp - megamenu - parent.sp - dropdown.sp - dropdown - items {
    list - style: none;
    padding: 0;
    margin: 0
}
.sp - megamenu - parent.sp - dropdown.sp - dropdown - main {
    top: 100 %
}
.sp - megamenu - parent.sp - dropdown.sp - dropdown - sub {
    top: 0
}
.sp - megamenu - parent.sp - dropdown.sp - dropdown - sub.sp - dropdown - inner {
    box - shadow: 0 0 5px rgba(0, 0, 0, 0.2)
}
.sp - megamenu - parent.sp - dropdown li.sp - menu - item {
    display: block;
    padding: 0;
    position: relative
}
.sp - megamenu - parent.sp - dropdown li.sp - menu - item > a, .sp - megamenu - parent.sp - dropdown li.sp - menu - item span: not(.sp - menu - badge) {
    font - size: 14px;
    line - height: 1;
    display: inline - block;
    padding: 12px 0;
    cursor: pointer
}
.sp - megamenu - parent.sp - dropdown li.sp - menu - item > a.sp - group - title, .sp - megamenu - parent.sp - dropdown li.sp - menu - item span: not(.sp - menu - badge).sp - group - title {
    text - transform: uppercase;
    font - weight: bold
}
.sp - megamenu - parent.sp - dropdown.sp - module {
    padding: 0
}
.sp - megamenu - parent.sp - dropdown.sp - module.sp - module - title {
    font - size: 14px;
    margin: 0 0 15px;
    text - transform: uppercase;
    font - weight: bold
}
.sp - megamenu - parent.sp - dropdown.sp - module.latestnews {
    margin: 0
}
.sp - megamenu - parent.sp - dropdown.sp - module.latestnews > li: not(: last - child) {
    margin: 0 0 15px
}
.sp - megamenu - parent.sp - dropdown.sp - module.latestnews > li a {
    font - size: 14px
}
.sp - megamenu - parent.sp - dropdown.sp - module.latestnews > li a span {
    opacity: 0.8
}
.sp - megamenu - parent.sp - dropdown - mega > .row {
    margin - top: 30px
}
.sp - megamenu - parent.sp - dropdown - mega > .row: first - child {
    margin - top: 0
}
.sp - megamenu - parent.sp - has - child: hover > .sp - dropdown {
    display: block
}
.sp - megamenu - parent.menu - animation - fade.sp - has - child: hover > .sp - dropdown {
    animation: spFadeIn 600ms
}
.sp - megamenu - parent.menu - animation - fade - up.sp - has - child: hover > .sp - dropdown {
    animation: spFadeInUp 400ms ease - in
}
.sp - megamenu - parent.menu - animation - fade - down.sp - has - child: hover > .sp - dropdown {
    animation: spFadeInDown 400ms ease - in
}
.sp - megamenu - parent.menu - animation - zoom.sp - has - child: hover > .sp - dropdown {
    animation: spZoomIn 300ms
}
.sp - megamenu - parent.menu - animation - rotate.sp - has - child: hover > .sp - dropdown {
    animation: spRotateIn 300ms
}
.sp - megamenu - parent.menu - animation - pulse.sp - has - child: hover > .sp - dropdown {
    animation: spPulse 300ms
}
body.ltr.sp - megamenu - parent > li.sp - has - child > a: after, body.ltr.sp - megamenu - parent > li.sp - has - child > span: after {
    font - family: "Font Awesome 5 Free";
    font - weight: 900;
    content: "";
    float: right;
    margin - left: 7px
}
body.ltr.sp - megamenu - parent > li.sp - menu - badge.sp - menu - badge - right {
    margin - left: 5px
}
body.ltr.sp - megamenu - parent > li.sp - menu - badge.sp - menu - badge - left {
    margin - right: 5px
}
body.ltr.sp - megamenu - parent.sp - dropdown.sp - dropdown - items.sp - has - child > a: after {
    font - family: "Font Awesome 5 Free";
    font - weight: 900;
    content: "";
    float: right;
    margin - left: 7px
}
body.ltr.sp - megamenu - parent.sp - dropdown.sp - menu - center {
    margin - left: 45px
}
body.ltr.sp - megamenu - parent.sp - dropdown.sp - dropdown - main.sp - menu - right {
    left: 0
}
body.ltr.sp - megamenu - parent.sp - dropdown.sp - dropdown - main.sp - menu - full {
    left: auto;
    right: 0
}
body.ltr.sp - megamenu - parent.sp - dropdown.sp - dropdown - main.sp - menu - left {
    right: 0
}
body.ltr.sp - megamenu - parent.sp - dropdown.sp - dropdown - sub {
    left: 100 %
}
 @ media(min - width: 576px) {
    .sp - menu - full.container {
        width: 540px
    }
}
 @ media(min - width: 768px) {
    .sp - menu - full.container {
        width: 720px
    }
}
 @ media(min - width: 992px) {
    .sp - menu - full.container {
        width: 960px
    }
}
 @ media(min - width: 1200px) {
    .sp - menu - full.container {
        width: 1140px
    }
}
 # offcanvas - toggler {
    display: block;
    height: 90px;
    line - height: 90px;
    font - size: 20px
}
 # offcanvas - toggler > span: hover {
    color:  # fff
}
.offcanvas - init {
    overflow - x: hidden;
    position: relative
}
.offcanvas - active.offcanvas - overlay {
    visibility: visible;
    opacity: 1
}
.offcanvas - overlay {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z - index: 9999;
    visibility: hidden;
    -webkit - transition: 0.6s;
    transition: 0.6s
}
.body - wrapper {
    position: relative;
    -webkit - transition: 0.6s;
    transition: 0.6s;
    backface - visibility: hidden
}
.close - offcanvas {
    position: absolute;
    top: 15px;
    z - index: 1;
    border - radius: 100 % ;
    width: 24px;
    height: 24px;
    line - height: 24px;
    text - align: center;
    font - size: 14px;
    background:  # 333;
    color:  # fff
}
.close - offcanvas: hover {
    background:  # 666;
    color:  # fff
}
.offcanvas - menu {
    width: 300px;
    height: 100 % ;
    position: fixed;
    top: 0;
    overflow: inherit;
    -webkit - transition: all 0.6s;
    transition: all 0.6s;
    z - index: 10000
}
.offcanvas - menu.offcanvas - inner {
    padding: 30px
}
.offcanvas - menu.offcanvas - inner.sp - module {
    padding: 0;
    margin: 0
}
.offcanvas - menu.offcanvas - inner.sp - module.sp - module - title {
    font - size: 1rem;
    font - weight: bold
}
.offcanvas - menu.offcanvas - inner.sp - module: not(: last - child) {
    margin - bottom: 20px
}
.offcanvas - menu.offcanvas - inner.sp - module ul {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - orient: vertical;
    -webkit - box - direction: normal;
    -ms - flex - direction: column;
    flex - direction: column;
    padding: 0;
    margin: 0;
    list - style: none
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li {
    border: 0;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    display: block
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li a, .offcanvas - menu.offcanvas - inner.sp - module ul > li span {
    display: block;
    font - size: 1rem;
    padding: 0.125rem 0;
    position: relative
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > a > .menu - toggler, .offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > .menu - separator > .menu - toggler {
    display: block;
    position: absolute;
    top: 50 % ;
    cursor: pointer;
    transform: translateY(-50 % );
    -webkit - transform: translateY(-50 % );
    font - family: "Font Awesome 5 Free";
    font - weight: 900
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > a > .menu - toggler: after, .offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > .menu - separator > .menu - toggler: after {
    content: ""
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent.menu - parent - open > a > .menu - toggler: after, .offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent.menu - parent - open > .menu - separator > .menu - toggler: after {
    content: ""
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent.menu - parent - open > .nav - header > .menu - toggler: after {
    content: ""
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > .nav - header > .menu - toggler {
    display: block;
    position: absolute;
    top: 50 % ;
    cursor: pointer;
    transform: translateY(-50 % );
    -webkit - transform: translateY(-50 % );
    font - family: "Font Awesome 5 Free";
    font - weight: 900
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > .nav - header > .menu - toggler: after {
    content: ""
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li ul {
    display: none
}
.offcanvas - menu.offcanvas - inner.sp - module ul > li ul li a {
    font - size: 0.875rem
}
body.ltr # offcanvas - toggler.offcanvas - toggler - right {
    float: right;
    margin - left: 20px
}
body.ltr # offcanvas - toggler.offcanvas - toggler - left {
    float: left;
    margin - right: 20px
}
body.ltr.offcanvs - position - left.body - wrapper {
    left: 0
}
body.ltr.offcanvs - position - left.offcanvas - menu {
    left: -300px
}
body.ltr.offcanvs - position - left.offcanvas - active.offcanvas - menu {
    left: 0
}
body.ltr.offcanvs - position - left.offcanvas - active.body - wrapper {
    left: 300px
}
body.ltr.offcanvs - position - right.body - wrapper {
    right: 0
}
body.ltr.offcanvs - position - right.offcanvas - menu {
    right: -300px
}
body.ltr.offcanvs - position - right.offcanvas - active.offcanvas - menu {
    right: 0
}
body.ltr.offcanvs - position - right.offcanvas - active.body - wrapper {
    right: 300px
}
body.ltr.close - offcanvas {
    right: 15px
}
body.ltr.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > a > .menu - toggler, body.ltr.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > .menu - separator > .menu - toggler {
    right: 0
}
body.ltr.offcanvas - menu.offcanvas - inner.sp - module ul > li.menu - parent > .nav - header > .menu - toggler {
    right: 0
}
body.ltr.offcanvas - menu.offcanvas - inner.sp - module ul > li ul {
    margin - left: 10px
}
 @ keyframes spFadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
 @ keyframes spFadeInUp {
    0 % {
        opacity: 0;
        transform: translateY(20px)
    }
    100 % {
        opacity: 1;
        transform: translateY(0)
    }
}
 @ keyframes spFadeInDown {
    0 % {
        opacity: 0;
        transform: translateY(-20px)
    }
    100 % {
        opacity: 1;
        transform: translateY(0)
    }
}
 @ keyframes spZoomIn {
    0 % {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3)
    }
    100 % {
        opacity: 1
    }
}
 @ keyframes spRotateIn {
    from {
        transform - origin: center;
        transform: rotate3d(0, 0, 1, -45deg);
        opacity: 0
    }
    to {
        transform - origin: center;
        transform: none;
        opacity: 1
    }
}
 @ keyframes spPulse {
    from {
        opacity: 0;
        transform: scale3d(1, 1, 1)
    }
    50 % {
        opacity: 0.5;
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}
 @ keyframes spSpin {
    to {
        transform: rotate(360deg)
    }
}
 @ media(max - width: 1480px) {
    .article - list.articles - leading.article: nth - child(2) {
        flex: 1 0 auto;
        max - width: 47.8 %
    }
    .article - list.articles - leading.article: last - child {
        flex: 1 0 auto;
        max - width: 47.8 %
    }
}
 @ media(max - width: 1400px)and(min - width: 992px) {
    body.helix - ultimate.sppb - row - container {
        max - width: 100 %
    }
    .sppb - row - container > .sppb - row > div > .sppb - column {
        padding - left: 0px!important;
        padding - right: 0px!important
    }
    .article - list.articles - leading.article: first - child.article - header {
        max - width: 100 %
    }
    .section - margin - 0 {
        margin - left: 0px!important;
        margin - right: 0px!important
    }
    .sppb - carousel - extended - outer - stage {
        height: 610px!important
    }
}
 @ media(max - width: 1380px) {
     # sp - menu - right > .sp - column > div,
     # sp - menu - right > .sp - column > ul {
        padding - left: 15px
    }
    .sp - megamenu - parent > li > a,
    .sp - megamenu - parent > li > span {
        padding: 0px 13px
    }
}
 @ media(min - width: 1200px) {
     # sp - bottom > .container {
        max - width: 1080px
    }
    .container {
        max - width: 1470px
    }
    body.helix - ultimate.sppb - row - container {
        max - width: 1470px;
        width: auto
    }
    .sppb - container {
        max - width: 1470px
    }
    .home - dark.sppb - section > .sppb - row - container {
        max - width: 1470px!important;
        width: auto!important
    }
}
 @ media(max - width: 1199px) {
    .dylan - responsive - block,
    .dylan - content - center {
        padding: 0px!important
    }
    .traning - feature.sppb - feature - box - title {
        width: 100 % ;
        margin: 0px 0px 0px 0px
    }
    .dylan - testimonial.sppb - carousel - extended - item {
        margin - right: 40px!important
    }
    .view - login # sp - left,
    .view - registration # sp - left {
        padding: 0px 30px 0px 30px
    }
    .view - login # sp - component,
    .view - registration # sp - component {
        padding: 0px 30px 0px 30px
    }
    .view - registration.registration legend {
        font - size: 30px
    }
}
 @ media(max - width: 991px) {
    body.predefined - header1.body - wrapper {
        width: 100 %
    }
    body.predefined - header1.body - wrapper # sp - header {
        width: 100 % ;
        height: 60px!important;
        flex - direction: column;
        padding: 0 15px
    }
    body.predefined - header1.body - wrapper # sp - header.sp - header - inner {
        flex - direction: row;
        height: auto
    }
    body.predefined - header1.body - wrapper # sp - header.logo {
        height: 50px
    }
    body.predefined - header1.body - wrapper # sp - header.logo a {
        font - size: 25px
    }
    body.predefined - header1.body - wrapper # offcanvas - toggler {
        height: 50px;
        line - height: 50px;
        font - size: 16px
    }
    body.predefined - header1.body - wrapper.social - icons - wrap {
        display: none
    }
     # offcanvas - toggler {
        display: block!important
    }
    body.sppb - btn {
        padding: 11px 27px 11px 28px
    }
    body.sppb - btn.sppb - btn - 3d {
        padding - top: 10px;
        padding - bottom: 10px
    }
    body.sppb - btn.sppb - btn - xlg {
        padding: 11px 50px 11px 51px
    }
    body.sppb - btn.sppb - btn - lg {
        padding: 11px 38px 11px 39px
    }
    body.sppb - btn.sppb - btn - sm {
        padding: 11px 25px 12px 24px
    }
    body.sppb - btn.sppb - btn - xs {
        padding: 9px 20px;
        font - size: 10px
    }
     # sp - main - body {
        padding: 60px 0
    }
    .section - border.sppb - row > div {
        height: 130px
    }
    .traning - feature.sppb - feature - box - title {
        width: 70 % ;
        text - align: center;
        margin: 0 auto
    }
    .dylan - testimonial: before,
    .dylan - testimonial: after {
        display: none
    }
    .dylan - progress.sppb - pie - chart {
        height: 200px!important;
        width: 200px!important
    }
    .dylan - progress canvas {
        height: 200px!important;
        width: 200px!important
    }
    .login.form - group {
        margin - bottom: 30px
    }
    .login.form - group.form - check {
        padding - bottom: 10px
    }
    .view - registration.registration.form - group {
        margin - bottom: 30px
    }
    html.error - page.error - code {
        font - size: 250px
    }
    .dylan - contact.sppb - addon - form - builder - form.form - builder - radio - content label {
        font - size: 18px
    }
    .dylan - contact.sppb - addon - form - builder - form.form - builder - radio - content label {
        font - size: 18px
    }
    .form - builder - radio - item label::before {
        width: 20px;
        height: 20px
    }
    .dylan - accordion.sppb - addon - accordion.sppb - panel - title {
        font - size: 18px
    }
    .view - login # sp - left,
    .view - registration # sp - left {
        margin: 0px;
        flex: 1 0 50 % ;
        max - width: 50 %
    }
    .view - login # sp - main - body,
    .view - registration # sp - main - body {
        margin - top: 40px
    }
    html.coming - soon.coming - soon - title {
        font - size: 60px;
        margin - bottom: 35px
    }
    html.coming - soon.coming - soon - content {
        font - size: 35px
    }
    html.coming - soon # coming - soon - countdown {
        margin - top: 3rem
    }
    html.coming - soon # coming - soon - countdown.coming - soon - days.coming - soon - number,
    html.coming - soon # coming - soon - countdown.coming - soon - hours.coming - soon - number,
    html.coming - soon # coming - soon - countdown.coming - soon - minutes.coming - soon - number,
    html.coming - soon # coming - soon - countdown.coming - soon - seconds.coming - soon - number {
        font - size: 50px;
        color:  # fff
    }
    html.coming - soon # coming - soon - countdown.coming - soon - days.coming - soon - string,
    html.coming - soon # coming - soon - countdown.coming - soon - hours.coming - soon - string,
    html.coming - soon # coming - soon - countdown.coming - soon - minutes.coming - soon - string,
    html.coming - soon # coming - soon - countdown.coming - soon - seconds.coming - soon - string {
        font - size: 20px
    }
    .view - login # sp - left,
    .view - registration # sp - left {
        padding - right: 15px;
        padding - left: 15px
    }
    .view - login # sp - component,
    .view - registration # sp - component {
        padding - left: 15px
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control {
        width: 50px!important;
        height: 50px!important;
        line - height: 50px!important
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control.next - control i,
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control.prev - control i {
        font - size: 35px;
        padding - top: 7px;
        padding - left: 7px
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control.prev - control i {
        padding - left: 0px
    }
    .article - list.articles - leading.article: first - child.article - intro - image img {
        height: 500px
    }
    .article - list.articles - leading.article: first - child.article - header {
        max - width: 100 %
    }
    .article - list.articles - leading.article: first - child.article - header a {
        font - size: 40px
    }
    .article - list.articles - leading.article: first - child.article - introtext {
        max - width: 100 %
    }
    .article - list.articles - leading.article: first - child.article - introtext p {
        font - size: 20px
    }
    .article - list.articles - leading.article: first - child.readmore a {
        padding: 12px 20px
    }
    .article - list.articles - leading.article: nth - child(2).article - intro - image img {
        height: 350px
    }
    .article - list.articles - leading.article: nth - child(2).article - header a {
        font - size: 30px
    }
    .article - list.articles - leading.article: last - child.article - intro - image img {
        height: 350px
    }
    .article - list.article.article - header h2 a {
        font - size: 24px
    }
    .article - list.article.article - body {
        left: 20px;
        right: 20px
    }
    .article - list.articles - leading.article: nth - child(2) {
        margin - top: 0px
    }
    .article - list.articles - leading.article: last - child {
        margin - top: 0px
    }
    .article - details.article - header h1,
    .article - details.article - header h2 {
        max - width: 100 % ;
        font - size: 35px;
        margin - bottom: 15px
    }
    .layout - blog # sp - main - body {
        padding: 0px 0px 70px 0px
    }
    .pagination - wrapper {
        margin - top: 50px
    }
     # sp - header.logo a {
        font - size: 30px
    }
    .offcanvas - menu.offcanvas - inner {
        margin - top: 50px
    }
    .dylan - article - scroller.bx - controls.bx - has - pager {
        display: none
    }
    .sp - page - title {
        padding: 90px 0px 30px 0px
    }
    .sp - page - title.sp - page - title - heading {
        font - size: 40px
    }
    .sp - page - title.sp - page - title - sub - heading {
        margin - top: 20px
    }
    .article - list.articles - leading.article: last - child {
        flex: 1 0 auto;
        max - width: 46.8 %
    }
    .article - list.articles - leading.article: nth - child(2) {
        flex: 1 0 auto;
        max - width: 46.8 %
    }
}
 @ media(max - width: 767px) {
    body.sppb - btn {
        padding: 10px 24px 10px 24px;
        font - size: 12px
    }
    body.sppb - btn.sppb - btn - 3d {
        padding - top: 9px;
        padding - bottom: 9px
    }
    body.sppb - btn.sppb - btn - xlg {
        padding: 10px 44px 10px 45px
    }
    body.sppb - btn.sppb - btn - lg {
        padding: 10px 34px 10px 35px
    }
    body.sppb - btn.sppb - btn - sm {
        padding: 10px 14px 10px 15px
    }
    body.sppb - btn.sppb - btn - xs {
        padding: 7px 12px;
        font - size: 10px
    }
     # sp - main - body {
        padding: 40px 0
    }
    .section - border.sppb - row > div {
        width: 50 %
    }
    .section - border.sppb - row > div: nth - child(3n + 3) {
        border - color: rgba(42, 61, 88, 0.1)
    }
    .section - border.sppb - row > div: nth - child(n + 7) {
        border - color: rgba(42, 61, 88, 0.1)
    }
    .section - border.sppb - row > div: nth - child(2n + 2) {
        border - right - color: transparent
    }
    .section - border.sppb - row > div: nth - child(n + 9) {
        border - bottom - color: transparent
    }
    .dylan - testimonial.sppb - carousel - extended - item {
        margin - right: 20px!important
    }
     # sp - bottom.sp - module.sp - module - title {
        font - size: 16px;
        margin: 0 0 12px
    }
    .login.form - group {
        margin - bottom: 20px
    }
    .login.form - group.btn.btn - primary {
        padding: 10px 0px
    }
    .login.form - group.form - control {
        font - size: 14px
    }
    .form - group.form - check.form - check - input {
        width: 20px;
        height: 20px
    }
    .form - group.form - check.form - check - input: before {
        border: 6px solid # ff2c2c
    }
    .view - registration.registration.form - group {
        margin - bottom: 20px
    }
    .view - registration.registration.btn.btn - primary {
        padding: 10px 20px;
        margin: 10px 20px 0px 0px;
        font - size: 12px
    }
    .view - registration.registration.btn.btn - secondary {
        border - radius: 0px;
        padding: 10px 20px;
        font - size: 12px
    }
    .view - login.logout.form - horizontal.controls.btn.btn - primary {
        padding: 10px 20px;
        font - size: 12px
    }
    html.error - page.error - code {
        font - size: 100px;
        margin - bottom: 10px
    }
    html.error - page.error - message {
        font - size: 20px;
        margin - bottom: 40px
    }
    html.error - page.btn.btn - secondary {
        padding: 10px 20px;
        font - size: 12px
    }
    .dylan - contact.sppb - addon - form - builder - form.form - builder - radio - content label {
        font - size: 16px
    }
    .dylan - accordion.sppb - addon - accordion.sppb - panel - heading {
        padding: 10px 30px 10px 10px
    }
    .dylan - accordion.sppb - addon - accordion.sppb - panel - title {
        font - size: 16px;
        font - weight: 500
    }
    .dylan - accordion.sppb - addon - accordion.sppb - panel - body {
        padding: 10px 10px 20px 10px;
        line - height: 24px
    }
    .view - registration.registration legend {
        font - size: 25px
    }
    .view - login # sp - main - body,
    .view - registration # sp - main - body {
        margin - top: 60px
    }
    .view - login # sp - left,
    .view - registration # sp - left {
        margin: 0px;
        flex: 1 0 100 % ;
        max - width: 100 %
    }
    .view - login # sp - component,
    .view - registration # sp - component {
        flex: 1 0 100 % ;
        max - width: 100 %
    }
    html.coming - soon.coming - soon - title {
        font - size: 35px;
        margin - bottom: 20px
    }
    html.coming - soon.coming - soon - content {
        font - size: 25px
    }
    html.coming - soon # coming - soon - countdown {
        margin - top: 2rem
    }
    html.coming - soon # coming - soon - countdown.coming - soon - days,
    html.coming - soon # coming - soon - countdown.coming - soon - hours,
    html.coming - soon # coming - soon - countdown.coming - soon - minutes,
    html.coming - soon # coming - soon - countdown.coming - soon - seconds {
        width: 50 % ;
        margin: 0px 0px 20px 0px
    }
    html.coming - soon # coming - soon - countdown.coming - soon - days.coming - soon - number,
    html.coming - soon # coming - soon - countdown.coming - soon - hours.coming - soon - number,
    html.coming - soon # coming - soon - countdown.coming - soon - minutes.coming - soon - number,
    html.coming - soon # coming - soon - countdown.coming - soon - seconds.coming - soon - number {
        font - size: 30px;
        color:  # fff
    }
    html.coming - soon # coming - soon - countdown.coming - soon - days.coming - soon - string,
    html.coming - soon # coming - soon - countdown.coming - soon - hours.coming - soon - string,
    html.coming - soon # coming - soon - countdown.coming - soon - minutes.coming - soon - string,
    html.coming - soon # coming - soon - countdown.coming - soon - seconds.coming - soon - string {
        font - size: 18px
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control {
        width: 100px;
        top: 60 % !important;
        right: 20px
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control {
        width: 40px!important;
        height: 40px!important;
        line - height: 40px!important
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control.next - control i,
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control.prev - control i {
        font - size: 25px;
        padding - top: 7px;
        padding - left: 7px
    }
    .dylan - image - carousel div.sppb - carousel - extended - nav - control.nav - control.prev - control i {
        padding - left: 0px
    }
    .article - list.articles - leading.article: first - child.article - body {
        top: 30 %
    }
    .article - list.articles - leading.article: first - child.article - header a {
        font - size: 26px;
        margin - bottom: 10px
    }
    .article - list.articles - leading.article: first - child.article - introtext p {
        font - size: 16px;
        margin - bottom: 40px
    }
    .article - list.articles - leading.article: first - child.readmore a {
        padding: 12px 20px
    }
    .article - list.articles - leading.article: nth - child(2) {
        flex: 1 0 100 % ;
        max - width: 44.8 % ;
        margin: 0px 30px 20px 0px
    }
    .article - list.articles - leading.article: nth - child(2).article - header a {
        font - size: 20px
    }
    .article - list.articles - leading.article: last - child {
        flex: 1 0 100 % ;
        max - width: 44.8 %
    }
    .article - list.articles - leading.article: last - child.article - intro - image img {
        height: 300px
    }
    .article - list.articles - leading.article: nth - child(2).article - intro - image img {
        height: 300px
    }
    .article - list.articles - leading.article: first - child.readmore a {
        padding: 10px 15px;
        font - size: 12px
    }
    .article - list.article.article - header h2 a {
        font - size: 20px
    }
    .article - details.article - header h1,
    .article - details.article - header h2 {
        font - size: 26px
    }
    .article - details.article - full - image {
        margin - bottom: 20px
    }
    .article - info.published {
        font - size: 16px
    }
    .article - details.article - info.createdby,
    .article - details.article - info.category - name {
        font - size: 16px
    }
    .article - list.articles - leading.article: first - child.article - intro - image img {
        height: 450px
    }
    .pager {
        padding: 30px 15px 0px 15px
    }
    .pager > li a {
        padding: 10px 30px
    }
    .article - list.article {
        margin - bottom: 20px
    }
    .layout - blog # sp - main - body {
        padding: 0px 0px 40px 0px
    }
    .pagination - wrapper {
        margin - top: 20px
    }
    .pagination - wrapper.pagination.page - item.page - link {
        font - size: 16px;
        margin - right: 5px
    }
    .menu - right - wrap {
        margin - top: 15px
    }
    body.menu - right - wrap.sppb - btn {
        padding: 8px 15px 8px 15px
    }
    .sp - slider - outer - stage {
        height: 500px!important
    }
    .view - login # sp - component,
    .view - registration # sp - component {
        margin - top: 20px
    }
    html.offline.offline - wrapper {
        padding: 15px
    }
    .sp - page - title.sp - page - title - sub - heading {
        margin - top: 18px
    }
    .sp - page - title.sp - page - title - heading {
        font - size: 30px
    }
}
 @ media(max - width: 575px) {
    .article - list.articles - leading.article: nth - child(2) {
        flex: 1 0 100 % ;
        max - width: 94 % ;
        margin: 0px 0px 20px 0px
    }
    .article - list.articles - leading.article: last - child {
        flex: 1 0 100 % ;
        max - width: 94 %
    }
    .article - list.articles - leading.article: first - child.article - body {
        top: 23 %
    }
}
 @ media(max - width: 480px) {
    .dylan - responsive - block > .sppb - container - inner > .sppb - row > div {
        flex: 100 % ;
        max - width: 100 %
    }
     # sp - header.logo a {
        font - size: 20px
    }
}
   @media (min-height: 550px) {
    body.predefined-header1 #sp-header .sp-megamenu-wrapper {
        margin-top: 60px !important;
    }
}