/* Webfonts */

@font-face {
    font-family: 'Reader Pro';
    src: url('../webfonts/hinted-ReaderPro-Light.eot');
    src: url('../webfonts/hinted-ReaderPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/hinted-ReaderPro-Light.woff2') format('woff2'),
        url('../webfonts/hinted-ReaderPro-Light.woff') format('woff'),
        url('../webfonts/hinted-ReaderPro-Light.ttf') format('truetype'),
        url('../webfonts/hinted-ReaderPro-Light.svg#ReaderPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/* Global */

html.h-100 {
    margin-top: 0 !important;
}

#wpadminbar {
    display: none;
}

html {
    font-size: 14px;
}

body {
    color: #000;
    font-family: 'Reader Pro',"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    height: 100%;
    line-height: 1.57;
    overflow: hidden;
}

.body-overlay {
    background-color: rgba(0,0,0,0.5);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1026;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease-out;
}

body.menu-open .body-overlay {
  opacity: 1;
  pointer-events: auto;
}


.cover {
    inset: 0;
}

.object-fit-cover {
    object-fit: cover;
}

.cursor-pointer {
    cursor: pointer;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(0); }
    10% { opacity: 1; transform: translateX(-50%) translateY(-10px); }
    90% { opacity: 1; transform: translateX(-50%) translateY(-10px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}

.mb-225rem {
    margin-bottom: 2.25rem;
}


/* Layout */

.row {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -32px;
}

.row > * {
    margin-bottom: 32px;
    padding-left: 16px;
    padding-right: 16px;
}

.row-pad-sm {
    margin-bottom: -16px;
    margin-left: -8px;
    margin-right: -8px;
}

.col-pad-sm {
    margin-bottom: 16px;
    padding-left: 8px;
    padding-right: 8px;
}

.col-5th {
    width: 20%;
}

.col-7th {
    width: 14.28571428%;
}

section:not(:last-child) {
    margin-bottom: 56px;
}

.p-32px {
    padding: 32px;
}


/* Typography */

a {
    color: #000!important;
    text-decoration: none!important;
}

h1 {
    font-size: 30px;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 20px;
}

.text-grey {
    color: #707070;
}



/* Buttons */

.btn {
    background-color: #1A2B3C;
    border: none;
    border-radius: 5px;
    color: #90C9FF!important;
    padding: 0.57rem 2.15rem;
    transition: 0.2s ease-out;
}

.btn:hover {
    background-color: #90C9FF;
    color: #1A2B3C!important;
}

.btn.btn-inverted {
    background-color: #90C9FF!important;
    color: #1A2B3C!important;
}

.btn:hover {
    background-color: #90C9FF;
    color: #1A2B3C!important;
}

.btn.btn-outline {
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 1px #ABABAB;
    color: #1A2B3C!important;
}

.btn.btn-danger {
    background-color: #FF353E;
    color: #fff!important;
}

.btn-lg {
    font-size: 1rem;
    padding: 1rem 2.15rem;

}

.navbar-search button {
    background-color: transparent;
    border: none;
    height: 50px;
    padding: 0;
    top: 0; right: 10px;
    width: 23px;
}

.navbar-search button svg {
    transform: translateY(-1px);
}

.btn-panel, .pin-toggle {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #D1D2D4;
    height: 28px;
    width: 28px;
    transition: 0.2s ease-out;
}

.pin-toggle {
    cursor: pointer;
}

.btn-panel svg, .pin-toggle svg {
    overflow: visible;
}

.btn-panel:hover, .pin-toggle.toggled {
    background-color: #1A2B3C;
    border-color: #1A2B3C;
}

.btn-panel:hover svg path, .pin-toggle svg path {
    transition: 0.2s ease-out;
}

.btn-panel:hover svg path , .pin-toggle.toggled svg path {
    stroke: #90C9FF;
}

.btn:disabled {
    background-color: #ABABAB;
    color: #fff!important;
    opacity: 1;
}

.col-account-form .btn, .col-login-form .btn {
    padding: 0.875rem 1rem;
}


/* Forms */

.form-control, .form-select {
    border: 1px solid #707070;
    border-radius: 0;
    color: #000;
    padding: 0.965rem 1.15rem;
}

.form-control:focus, .form-select:focus {
    box-shadow: none;
}

.form-control::placeholder {
    color: #707070;
    opacity: 1;
}

.navbar-search {
    background-color: #1A2B3C;
}

.navbar-search .form-control {
    background-color: transparent;
    border-color: #E7E9EB;
    color: #fff;
    padding-right: 43px;
    width: 500px;
}

.navbar-search .form-control::placeholder {
    color: #fff;
}

.form-check:not(.form-switch) .form-check-input[type=checkbox] {
    box-shadow: none!important;
    border-radius: 0;
    border-color: #D1D2D4!important;
    filter: grayscale(100%);
    float: none;
    margin: 3px 10px 0 0;
    height: 16px;
    width: 16px;
    min-width: 16px;
}

.form-check:not(.form-switch) .checkbox {
    box-shadow: none!important;
    border-radius: 3px;
    float: none;
    margin: 0 10px 0 0;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

.checkbox {
  accent-color: #1a2b3c;
}

.form-check-recent {
    padding-left: 20px;
    padding-right: 20px;
}

.form-switch {
  padding-left: 1.5rem;
}

.form-switch .form-check-input {
    background-color: transparent!important;
    border-color: #ABABAB!important;
    box-shadow: none!important;
    height: 20px;
    margin-left: 0;
    width: 32px;
}

.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: #1A2B3C!important;
    border-color: #1A2B3C!important;
}

.account-form .form-control, .account-form .form-select {
    border-color: #D1D2D4;
    padding: 0.535rem 0.875rem;
}

.col-account-form {
    width: 608px;
}


/* Dropdowns */

.navbar .dropdown-toggle:after, .posts-filter .dropdown-toggle:after {
    background-image: url('../img/chevron.svg');
    background-size: 100%;
    border: none!important;
    content: '';
    display: inline-block;
    margin-left: .5rem;
    position: relative;
    height: 5px;
    width: 8px;
    transform: translateY(-2px) scaleY(-1);
    transition: 0.2s;
    vertical-align: unset;
}

.posts-filter .dropdown-toggle {
    background-color: transparent;
    border: 0.5px solid #D1D2D4;
    border-color: #D1D2D4!important;
    color: #000!important;
}

.navbar .dropdown-toggle.show:after, .posts-filter .dropdown-toggle.show:after {
    transform: translateY(-2px) scaleY(1);
}

.navbar .dropdown-menu, .posts-filter .dropdown-menu {
    border: 0.5px solid #D1D2D4;
    border-radius: 5px;
    margin-top: 10px;
    padding: 24px;
    right: 0!important; left: auto!important;
    width: 250px;
}

.posts-filter .dropdown-menu {
    margin-top: 8px!important;
    width: auto;
}

.navbar .dropdown-menu .dropdown-item, .posts-filter .dropdown-menu .dropdown-item {
    background-color: transparent!important;
    padding: 0;
}

.navbar .dropdown-menu li:not(:last-child) .dropdown-item, .posts-filter .dropdown-menu li:not(:last-child) .dropdown-item {
    margin-bottom: 0.75rem;
}


/* Navbar */

.navbar {
    background-color: #1A2B3C;
    height: 80px;
    min-height: 80px;
    padding: 0 15px;
    z-index: 1030;
}

.navbar-logo {
    height: 50px;
    width: auto;
}


/* Hamburger */

.hamburger {
  cursor: pointer;
  width: 40px;
  height: 23px;
  position: relative;
  transition: 0.2s ease-in-out;
  z-index: 1032;
}


.hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #fff;
  left: 0;
  transition: 0.2s ease-out;
}

.hamburger span:nth-child(1) {
  top: 0px;
  transform: rotate(0deg);
}

.hamburger span:nth-child(2) {
  opacity: 1;
  top: 10px; left: 0;
}

.hamburger span:nth-child(3) {
  top: 20px;
  transform: rotate(0deg);
}

.menu-open .hamburger span:nth-child(1) {
  top: 10px;
  transform: rotate(135deg);
}

.menu-open .hamburger span:nth-child(2) {
  opacity: 0;
  left: -25px;
}

.menu-open .hamburger span:nth-child(3) {
  top: 10px;
  transform: rotate(-135deg);
}


/* Sidebar */

.sidebar {
    background-color: #1A2B3C;
    padding: 50px 20px 20px;
    min-width: 260px;
    transition: 0.3s ease-out;
    width: 260px;
    z-index: 1029;
}

.sidebar-inner {
    overflow-y: auto;
}

.sidebar-logo {
    margin-bottom: 30px;
}

.sidebar-items > div {
    border-top: 1px solid #707070;
    padding: 30px 0;
}

.sidebar-items > div:last-child {
    border-bottom: 1px solid #707070;
}

.sidebar-items, .sidebar-items a {
    color: #fff!important;
}


/* Inner */

.inner {
    background-color: #FAFBFE;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 64px;
    position: relative;
}

body.home .inner {
    padding: 64px 30px;
}


/* Modals */

.modal-dialog {
    max-width: 608px;
}

.modal-content {
    border: none;
    border-radius: 0;
    padding: 32px;
}

.modal-close {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
}


/* Intro Block */

.block-intro {
    border-bottom: 1px solid #000;
    padding-bottom: 27px;
}

.block-intro h1 span {
    font-size: 50px;
}

.block-intro p {
    font-size: 30px;
    line-height: 1.46666;
    max-width: 672px;
}


/* Featured Block */

.block-featured .row > div:nth-child(-n+3) {
    margin-bottom: 56px;
}

.block-featured .row > div:nth-child(n+4) {
    width: 20%;
}

.block-featured .row > div:nth-child(n+4) h3 {
    font-size: 1rem;
}


/* Product Resources Sidebar */

.product-resources-sidebar > div:not(:last-child) {
    border-bottom: 1px solid #707070;
    margin-bottom: 24px;
    padding-bottom: 24px;
}

.product-resources-item {
    line-height: 1.3;
}

.product-resources-item:not(:last-child) {
    margin-bottom: 15px;
}


/* Panels */

.panel {
    background-color: #fff;
    border: 1px solid #D1D2D4;
    height: 100%;
    padding: 10px;
}

.panel hr {
    border-color: #D1D2D4;
    margin-top: 1rem;
    margin-bottom: 1rem;
    opacity: 1;
}

.floated-icon {
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    z-index: 1;
}


/* Pagination */

.pagination .page-item {
    margin-top: 56px;
}

.pagination .page-item .page-link {
    color: #446;
    border: 1px solid #1A2B3C;
    background-color: #FAFBFE;
}

.pagination .page-item.active .page-link {
    background-color: #1A2B3C;
    border-color: #1A2B3C;
    color: #fff!important;
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}


/* Login Screens */

body.page-id-108 .sidebar, body.page-id-108 .navbar, body.page-id-108 .body-overlay,
body.page-id-110 .sidebar, body.page-id-110 .navbar, body.page-id-110 .body-overlay,
body.page-id-112 .sidebar, body.page-id-112 .navbar, body.page-id-112 .body-overlay,
body.page-id-4447 .sidebar, body.page-id-4447 .navbar, body.page-id-4447 .body-overlay{
    display: none!important;
}

body.page-id-108 .inner, 
body.page-id-110 .inner, 
body.page-id-112 .inner,
body.page-id-4447 .inner {
    height: 100%;
    margin-top: 0;
    padding: 0;
    overflow-y: hidden;
}

.login-logo {
    position: absolute;
    top: 32px; left: 32px;
}

.col-login-form {
    padding: 64px 0 16px;
}

.col-login-image {
    background-image: url('../img/bg-login.jpg');
    background-position: center;
    background-size: cover;
}

.login-inner {
    max-height: 100%;
    max-width: 400px;
    overflow-y: auto;
    padding: 0 16px;
}

/* Media Queries */

/* 1700px */
@media screen and (max-width: 1699px) {
    .col-7th {width: 20%;}
    .col-5th {width: 25%;}
}

/* 1440px */
@media screen and (max-width: 1439px) {
    .col-7th {width: 25%;}
    .col-5th {width: 33.33333%;}
    .inner {padding: 30px;}
    body.home .inner {padding: 30px;}
    .block-intro p {font-size: 24px;}
    .block-featured .row > div:nth-child(-n+2) {width: 50%;}
    .block-featured .row > div:nth-child(n+3) {margin-bottom: 32px; width: 33.33333%;}
    .block-featured .row > div:nth-child(n+3) h3 {font-size: 1rem;}
    .login-logo {top: 16px; left: 16px; width: 64px;}
}

/* 1200px */
@media screen and (max-width: 1199px) {
    .navbar {padding: 0 32px;}
    .navbar-search .form-control {width: 450px;}
    .sidebar {position: fixed; top: 80px; right: 0; transform: translateX(calc(100% + 1px)); z-index: 1028; padding: 0 16px 96px;}
    body.menu-open .sidebar {transform: translateX(0);}
    
}

/* 992px */
@media screen and (max-width: 991px) {
    .row {margin-left: -8px; margin-right: -8px; margin-bottom: -16px;}
    .row > * {margin-bottom: 16px; padding-left: 8px; padding-right: 8px;}
    .navbar {padding: 0 16px;}
    .navbar-search .form-control {width: 280px;}
    .inner {padding: 30px 16px;}
    body.home .inner {padding: 30px 16px;}
    .col-7th, .col-5th {width: 33.33333%;}
    .col-related-post:nth-child(3),.col-related-post:nth-child(4) {display: none;}
    .block-featured .row > div {margin-bottom: 16px!important;}
    .block-featured .row > div:nth-child(-n+2) {margin-bottom: 32px!important;}
    section:not(:last-child) {margin-bottom: 32px;}
    .col-login-image {opacity: 0.1; position: absolute; inset: 0}
    .login-logo {top: 40px; left: 70px; width: 120px;}
}

/* 768px */
@media screen and (max-width: 767px) {
    .navbar {height: 60px; min-height: 60px;}
    .navbar-logo {height: 36px;}
    .navbar-search {padding: 0 16px 16px; position: fixed; top: 60px; right: 0; left: 0;}
    .navbar-search .form-control {padding: 0.75rem 1rem; width: 100%!important;}
    .navbar-search button {height: 44px;}
    .navbar .dropdown-menu {width: auto;}
    .sidebar {top: 120px; padding-bottom: 140px;}
    .inner {margin-top: 60px;}
    .col-7th, .col-5th {width: 50%;}
    .sidebar-items > div {padding: 24px 0;}
    h1 {font-size: 24px;}
    .block-intro h1 span {font-size: 30px;}
    h2 {font-size: 20px;}
    .block-intro p {font-size: 14px;}
    .p-32px {padding: 16px;}
    .svg-bookmark {width: 15px;}
    .block-featured .row > div {width: 50%!important;}
    .block-featured .row > div:nth-child(-n+2) {margin-bottom: 16px!important;}
    .col-account-form {width: 100%;}
    .login-logo {top: 16px; left: 16px; width: 64px;}
}

/* 576px */
@media screen and (max-width: 575px) {
    .inner {padding: 16px;}
    body.home .inner {padding: 16px;}
    .panel .text-grey {font-size: 12px;}
    .block-featured .row > div {width: 100%!important;}
    .form-label {font-size: 0.875rem;}
}
