h1, .h1 { font-size: 68px; } @media (max-width: 1466px) { h1, .h1 { font-size: 52px; } } @media (max-width: 991px) { h1, .h1 { font-size: 40px; } } h2, .h2 { font-size: 42px; } @media (max-width: 991px) { h2, .h2 { font-size: 36px; } } h3, .h3 { font-size: 32px; } @media (max-width: 991px) { h3, .h3 { font-size: 28px; } } h4, .h4 { font-size: 24px; } h5, .h5 { font-size: 18px; } h6, .h6 { font-size: 16px; } a:focus, button:focus { outline: 0; } a { color: #66676d; transition: all .3s; } a:hover { text-decoration: none; color: #222; } ul, li { padding: 0; margin: 0; list-style-position: inside; } .btn { font-size: 14px; padding: 15px 24px; color: #ffffff; border-radius: 0; transition: .2s ease-out; position: relative; z-index: 1; overflow: hidden; border: 0; } .btn:active, .btn:focus { border: 0; box-shadow: none !important; } .btn.btn-lg { font-size: 16px; padding: 12px 28px; } .btn:hover { box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1); } .btn.btn-primary { background-color: #c98664 !important; } .btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus { color: #ffffff; background-color: #2B2C2E !important; } .btn.btn-outline-primary { color: #c98664; border: 1px solid #c98664; background-color: transparent !important; } .btn.btn-outline-primary::after { background-color: #c98664 !important; } .btn.btn-outline-primary:hover, .btn.btn-outline-primary:active, .btn.btn-outline-primary:focus { color: #ffffff; background-color: #c98664 !important; } .text-underline { text-decoration: underline; } a.text-underline:hover { color: #c98664; text-decoration: underline; } body { color: #66676d; background-color: #ffffff; font-family: "Work Sans", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-thumb { background-color: rgba(201, 134, 100, 0.5); } ::selection { color: #ffffff; background-color: #c27751; text-shadow: none; } :focus { outline: 0; } mark, .mark { padding: 0; } .page-header mark, .page-header .mark { padding: 3px 5px; text-transform: lowercase; } .page-header .title { font-weight: bold; color: #2B2C2E; position: relative; padding-left: 20px; margin-bottom: 0; } .page-header .title::before { position: absolute; content: ""; height: 100%; width: 7px; border-radius: 50px; background-color: #c98664; left: 0; top: 0; } /*------------------------------------------------------------------ # default styles -------------------------------------------------------------------*/ .section { padding: 24px 0; } .section-title h1 { font-size: 52px; text-transform: capitalize; margin-bottom: 20px; position: relative; padding-top: 25px; } @media (max-width: 1466px) { .section-title h1 { font-size: 42px; } } @media (max-width: 767px) { .section-title h1 { font-size: 34px; } } .social-links a { font-size: 15px; padding: 7px; color: rgba(0, 0, 0, 0.8); } .social-links a:hover { color: #c98664; } .social-links.is-circled a { padding: 7px 9px; color: #ffffff; } .social-links.is-circled a:hover { opacity: .7; } .social-links.is-circled a { display: block; text-align: center; font-size: 12px; text-transform: uppercase; color: #2B2C2E; } .social-links.is-circled a .icon { display: block; height: 42px; width: 42px; padding: 13px; border: 1px solid #2B2C2E; border-radius: 50%; margin-left: auto; margin-right: auto; margin-bottom: 8px; font-size: 16px; transition: .3s; color: #2B2C2E; } .social-links.is-circled a:hover svg { border-color: #c98664; background-color: #c98664; color: #ffffff; } .preloader { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: #ffffff; z-index: 999889898; } .preloader img { vertical-align: middle; border: 0; max-width: 100%; height: auto; } .card.post-card { border-radius: 0px; border: 0; text-align: center; } .card.post-card .card-body { padding: 0; padding-top: 20px; } .card.post-card .card-footer { margin-bottom: 50px; background-color: transparent; padding: 0; padding-top: 10px; } .post-title { font-weight: 600; color: #2B2C2E; font-family: "Lora", sans-serif; display: inline-block; line-height: 1.3; } a.post-title:hover, .post-title:hover a { color: #c98664; } .card-meta-tag { text-transform: uppercase; } .card-meta-tag .list-inline-item:not(:last-child) { margin-right: .5rem; } .card-meta-tag a { font-size: 14px; font-weight: 500; color: #c98664; } .card-meta-tag a:hover { color: #2B2C2E; } .card-meta { font-size: 12px; } .card-meta .list-inline-item:not(:last-child) { margin-right: 1.2rem; } .card-meta .card-meta-author { display: inline-block; } .card-meta .card-meta-author:hover { color: #c98664; } .card-meta .card-meta-author, .card-meta .card-meta-date { color: #9598a2; text-transform: uppercase; } .content { font-family: "Work Sans", sans-serif; font-size: 17px; } .content p { margin-bottom: 25px; } .content img { margin-bottom: 30px; } .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { font-family: "Work Sans", sans-serif; color: #2B2C2E; font-weight: 600; margin-bottom: 20px; margin-top: 30px; } .content ol, .content ul { margin-bottom: 25px; padding-left: 0; } .content ol li, .content ul li { margin-bottom: 10px; } .content img { margin-top: 10px; margin-bottom: 35px; } .content blockquote { padding: 20px 30px; padding-left: 70px; border: 1px solid rgba(201, 134, 100, 0.2); font-family: "Lora", sans-serif; color: #2B2C2E; font-weight: 600; font-size: 18px; margin: 30px 0; position: relative; } .content blockquote p { margin-bottom: 15px; } .content blockquote::before { content: "\f10d"; font-weight: 900; } .content blockquote svg { position: absolute; font-size: 28px; left: 20px; top: 25px; opacity: .5; color: #c98664; } .content blockquote cite { opacity: .7; font-style: normal; text-transform: uppercase; font-size: 13px; position: relative; } .content blockquote cite::before { position: absolute; content: ""; height: 1px; width: 20px; left: -30px; top: 50%; background-color: #2B2C2E; opacity: .5; } .content table { text-align: left; width: 100%; max-width: 100%; margin-bottom: 1rem; border: 1px solid #dee2e6; } .content table th, .content table td { padding: .75rem; vertical-align: top; border: 1px solid #dee2e6; } .content table thead { background: #f2f2f2; } .content table tbody { background: #f7f7f7; } .content a.collapse-head { border-bottom: 1px solid #dee2e6; } .content .notices { margin: 2rem 0; position: relative; overflow: hidden; } .content .notices p { padding: 10px; margin-bottom: 0; } .content .notices.note p { border-top: 30px solid #6ab0de; background: #f7f7f7; } .content .notices.note p::after { content: 'Note'; position: absolute; top: 2px; color: #ffffff; left: 2rem; } .content .notices.tip p { border-top: 30px solid #78C578; background: #f7f7f7; } .content .notices.tip p::after { content: 'Tip'; position: absolute; top: 2px; color: #ffffff; left: 2rem; } .content .notices.info p { border-top: 30px solid #F0B37E; background: #f7f7f7; } .content .notices.info p::after { content: 'Info'; position: absolute; top: 2px; color: #ffffff; left: 2rem; } .content .notices.warning p { border-top: 30px solid #E06F6C; background: #a8aab2; } .content .notices.warning p::after { content: 'Warning'; position: absolute; top: 2px; color: #fff; left: 2rem; } .code-tabs { border: 1px solid #ddd; overflow: hidden; margin-bottom: 20px; } .code-tabs .nav-tabs { margin-bottom: 0; padding: 0; } .code-tabs .nav-tabs .nav-item { padding-left: 0; border-right: 1px solid #ddd; } .code-tabs .nav-tabs .nav-item .nav-link { text-decoration: none; font-weight: 500; border: 0; text-transform: capitalize; } .code-tabs .nav-tabs .nav-item::before { display: none; } .code-tabs .nav-tabs .nav-item.active { background: #c98664; } .code-tabs .nav-tabs .nav-item.active .nav-link { color: #ffffff; } .code-tabs .tab-content { padding: 20px 15px; } .pagination .page-link { padding: 0; margin-left: 0; color: #2B2C2E; border: 0; height: 48px; width: 48px; line-height: 48px; text-align: center; font-weight: 600; border-radius: 0 !important; } .pagination .page-link.active, .pagination .page-link:focus, .pagination .page-link:hover { box-shadow: none; color: #ffffff; background-color: #c98664; } .form-control { padding: 0; border: 0; border-bottom: 1px solid #999; border-radius: 0 !important; height: 56px; font-size: 17px; font-weight: 500; transition: .3s ease; } .form-control:focus { box-shadow: none; color: #2B2C2E; border-bottom-color: #2B2C2E; } .form-control:focus ~ .input-group-append .input-group-text { border-bottom-color: #2B2C2E; } .input-group-text { background-color: transparent; border: 0; border-bottom: 1px solid #999; border-radius: 0 !important; transition: .3s ease; padding-right: 0; } .input-group-text .icon { font-size: 22px; } button.input-group-text:hover { color: #c98664; } /*------------------------------------------------------------------ # helper classes -------------------------------------------------------------------*/ .font-primary { font-family: "Lora", sans-serif; } .font-secondary { font-family: "Work Sans", sans-serif; } .font-weight-500 { font-weight: 500; } .font-weight-600 { font-weight: 600; } .text-primary { color: #c98664 !important; } a.text-primary:hover { color: #b96941 !important; } .bg-primary { background-color: #c98664 !important; } .bg-primary-light, body::-webkit-scrollbar { background-color: rgba(201, 134, 100, 0.1); } .text-dark { color: #2B2C2E; } .text-light { color: #a8aab2 !important; } a.text-dark:hover, a.text-light:hover { color: #c98664 !important; } .bg-light { background-color: #a8aab2 !important; } .bg-dark { background-color: #2B2C2E !important; } header.sidenav { position: fixed; width: 110px; height: 100%; top: 0; left: 0; z-index: 1000; background-color: #ffffff; transition: .25s ease; padding-top: 15px; padding-bottom: 40px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; } @media (max-width: 767px) { header.sidenav { width: 100%; height: 80px; background-color: #f9f3ef; padding: 0; flex-direction: row; } header.sidenav .is-top { display: flex; justify-content: space-between; width: 100%; align-items: center; padding-left: 25px; } header.sidenav .is-top > div { order: 1; display: flex; align-items: center; } header.sidenav .is-top .navbar-brand { order: 0; } } header.sidenav .sidenav-toggler { background-color: transparent; border: 0; margin-bottom: 55px; } header.sidenav .sidenav-toggler.logo-plain { margin-bottom: 25px; } @media (max-width: 767px) { header.sidenav .sidenav-toggler { margin-bottom: 0; } } header.sidenav .sidenav-toggler .toggler-icon { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; user-select: none; } header.sidenav .sidenav-toggler .toggler-icon .line { fill: none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke: #2B2C2E; stroke-width: 3; stroke-linecap: round; } header.sidenav .sidenav-toggler .toggler-icon .top { stroke-dasharray: 40 139; } header.sidenav .sidenav-toggler .toggler-icon .bottom { stroke-dasharray: 40 180; } header.sidenav .sidenav-toggler .toggler-icon.active { transform: rotate(45deg); } header.sidenav .sidenav-toggler .toggler-icon.active .top { stroke-dashoffset: -98px; } header.sidenav .sidenav-toggler .toggler-icon.active .bottom { stroke-dashoffset: -138px; } header.sidenav .navbar-brand { transform: rotate(-90deg); display: inline-flex; padding: 0; } header.sidenav .navbar-brand.plain { transform: rotate(0); } @media (max-width: 767px) { header.sidenav .navbar-brand { transform: rotate(0); } } .sidenav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(201, 134, 100, 0.2); z-index: 15; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); cursor: pointer; opacity: 0; visibility: hidden; transition: .3s ease; } .sidenav-overlay.show { opacity: 1; visibility: visible; } nav.sidenav-menu { position: fixed; top: 0; left: 110px; z-index: 99; background: #fcfcfc; height: 100%; width: 280px; display: flex; overflow-y: auto; padding: 15px 30px 44px 30px; transform: translate3d(-100%, 0, 0); transition: .2s ease; } nav.sidenav-menu.show { transform: translate3d(0, 0, 0); transition: .3s ease; } @media (max-width: 767px) { nav.sidenav-menu { top: 0; left: 0; z-index: 99992; } } nav.sidenav-menu .nav-item { display: block; } nav.sidenav-menu .nav-item.active .nav-link { color: #c98664 !important; } nav.sidenav-menu .nav-item:first-child { margin-top: 8px; } nav.sidenav-menu .nav-item:last-child { margin-bottom: 8px; } nav.sidenav-menu .nav-item .nav-link { font-weight: 500; color: #2B2C2E; position: relative; padding: 10px; } nav.sidenav-menu .nav-item .nav-link:hover { color: #c98664; } nav.sidenav-menu .nav-item .nav-link[data-toggle="collapse"]::after { content: "+"; float: right; font-size: 24px; line-height: 1; } nav.sidenav-menu .nav-item .nav-link[aria-expanded="true"]::after { content: "_"; line-height: 0.3; font-size: 22px; } nav.sidenav-menu .nav-item ul li a { font-size: 15px; padding: 7px 18px; display: inline-block; font-weight: 500; } .search-toggle { background-color: transparent; border: 0; transition: .3s ease; padding: 10px; font-size: 22px; } .search-toggle:hover { color: #c98664; } .search-block { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background-color: #ffffff; z-index: 9999988999889; padding: 0 50px; display: none; } .search-block form { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .search-block input { border: 0; border-bottom: 1px solid #ddd; font-size: 22px; width: 500px; max-width: 100%; padding: 15px 0; margin: auto; letter-spacing: -1px; transition: .3s ease; } .search-block.is-visible input { border-bottom-color: #c98664; } .search-block [data-toggle="search-close"] { cursor: pointer; position: absolute; top: 20px; right: 40px; } .page-content { margin-left: 110px; } @media (max-width: 767px) { .page-content { margin-left: 0; margin-top: 56px; } } .author-banner { padding: 30px 35px; height: 100%; position: fixed; top: 0; overflow-y: auto; width: calc(25% - 60px); max-width: 100%; } @media (max-width: 1200px) { .author-banner { width: calc(33.333333% - 70px); } } @media (max-width: 991px) { .author-banner { position: static; width: initial; margin-top: 15px; padding: 60px 35px; height: auto; } } @media (max-width: 767px) { .author-banner { margin-top: 40px; } } @media screen and (max-height: 470px) { .author-banner { display: block !important; } } .author-banner::-webkit-scrollbar { width: 12px; } .author-banner::-webkit-scrollbar-thumb { background-color: rgba(201, 134, 100, 0.2); } .partner-logos li { background-color: #ffffff; padding: 15px 20px; border: 1px solid #eee; margin-top: 14px; } .partner-logos li img { max-height: 25px; max-width: 130px; } .newsletter-block { color: #2B2C2E; padding: 80px 60px; } @media (max-width: 767px) { .newsletter-block { padding: 80px 30px; } } .newsletter-block .input-group-text, .newsletter-block .form-control { background-color: transparent; color: #2B2C2E; } .newsletter-block .form-control:focus { border-bottom-color: #2B2C2E; } .newsletter-block .form-control:focus ~ .input-group-append .input-group-text { border-bottom-color: #2B2C2E; } .newsletter-block ::-webkit-input-placeholder { color: rgba(43, 44, 46, 0.7); } .newsletter-block :-ms-input-placeholder { color: rgba(43, 44, 46, 0.7); } .newsletter-block ::placeholder { color: rgba(43, 44, 46, 0.7); } .newsletter-block button.input-group-text { color: rgba(43, 44, 46, 0.7); } .newsletter-block button.input-group-text:hover { color: #2B2C2E; } footer .newsletter-block { padding: 15px; } footer .newsletter-block .input-group { max-width: 350px; margin: auto; } .single-post-meta, .single-post-similer { margin-top: 70px; } .single-post-author { margin-top: 50px; } .post-meta-tags a { display: inline-block; background-color: #f7f8fa; color: #2B2C2E; padding: 6px 13px; font-weight: 500; font-size: 15px; } .post-meta-tags a:hover { background-color: transparent; color: #c98664; } .widget { margin-bottom: 45px; } .widget .widget-title { width: calc(100% - 8px); height: calc(100% - 8px); background: rgba(249, 243, 239, 0.5); display: block; margin: 4px; line-height: 40px; text-align: center; font-weight: 600; text-transform: uppercase; font-size: 14px; outline: 1px solid #f9f3ef; border: 1px solid #f9f3ef; outline-offset: 4px; padding-top: 2px; margin-bottom: 35px; } .sidebar-recent-post { counter-reset: rc-counter; } .sidebar-recent-post .recent-post-item { margin-top: 35px; padding: 0 10px; } .sidebar-recent-post .recent-post-item a { display: inline-block; } .sidebar-recent-post .recent-post-item a:hover { color: #c98664; } .sidebar-recent-post .recent-post-item .recent-post-image { height: 80px; width: 80px; position: relative; z-index: 1; } .sidebar-recent-post .recent-post-item .recent-post-image img { height: 100%; object-fit: cover; } .sidebar-recent-post .recent-post-item .recent-post-image::after { counter-increment: rc-counter; content: counter(rc-counter); position: absolute; background-color: #c98664; border: 2px solid #ffffff; top: -3px; right: -3px; z-index: 222; height: 30px; width: 30px; text-align: center; font-size: 12px; font-weight: bold; color: #ffffff; border-radius: 50px; line-height: 26px; } .sidebar-post-categories li a { border-top: 1px dotted #ddd; padding: 8px 0; display: block; font-size: 15px; } .sidebar-post-categories li a span { float: right; background-color: #ddd; font-size: 12px; padding: 5px 8px; line-height: 1; border-radius: 50px; color: black; } .sidebar-post-categories li a:hover { color: #c98664; } .sidebar-post-categories li a:hover span { background-color: #c98664; color: #ffffff; } .sidebar-post-categories li:last-child a { border-bottom: 1px dotted #ddd; } .sidebar-post-tags li a { border: 1px dotted #ddd; padding: 4px 10px; display: block; font-size: 15px; margin-bottom: 10px; } .sidebar-post-tags li a:hover { border-color: #c98664; color: #c98664; } .slick-slide { outline: 0; } .post-slider { overflow: hidden; position: relative; } .post-slider:hover .prevArrow { left: 20px; } .post-slider:hover .nextArrow { right: 20px; } .slider-sm .slick-arrow { height: 38px; width: 38px; line-height: 38px; } .slick-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 9; height: 50px; width: 50px; line-height: 50px; border-radius: 50%; background: rgba(201, 134, 100, 0.5); color: #ffffff; border: 0; transition: 0.3s; } @media (max-width: 575px) { .slick-arrow { display: none; } } .slick-arrow:focus { outline: 0; } .slick-arrow:hover { background: #c98664; } .prevArrow { left: -60px; } .nextArrow { right: -60px; }