/*
Theme Name: Travelholic
Theme URI: https://rarathemes.com/wordpress-themes/travelholic/
Template: chic-lite
Author: Rara Theme
Author URI: https://rarathemes.com/
Description: Travelholic is a feature-rich and easy-to-use WordPress travel blog theme for professional bloggers. This theme is for you if you want to share your travel expertise, launch your fashion or lifestyle blog, share food recipes, or create beauty and makeup, coaching, or any other niche blog. The theme is mobile-friendly, SEO optimized, Schema friendly, and loads faster to help you rank your website higher on search engines. You can easily choose from unlimited colors and 1000+ Google fonts to change your website look and feel with a single click. This theme comes with an Instagram section to flaunt your Instagram posts and a strategically placed newsletter section that can help you generate more leads. Travelholic is translation-ready, WooCommerce and RTL compatible. Check demo at https://rarathemes.com/previews/?theme=travelholic, read the documentation at https://docs.rarathemes.com/docs/travelholic/, and get support at https://rarathemes.com/support-ticket/.
Version: 1.0.0
Requires at least: 4.7
Requires PHP: 5.6
Tested up to: 6.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: travelholic
Tags: blog, one-column, two-columns, right-sidebar, left-sidebar, footer-widgets, custom-background, custom-header, custom-menu, custom-logo, featured-images, threaded-comments, full-width-template, rtl-language-support, translation-ready, theme-options, e-commerce
*/
/*--------------------------------------------------------------
# varible
--------------------------------------------------------------*/
:root {
--primary-font: 'IBM Plex Sans', sans-serif;
--secondary-font: 'Nanum Myeongjo', serif;
--font-color: #333333;
--primary-color: #c57e83;
--primary-color-rgb: 207, 156, 136;
--black-color: #000000;
--black-color-rgb: 0, 0, 0;
--white-color: #ffffff;
--white-color-rgb: 255, 255, 255;
}
/*============================
HOMEPAGE LAYOUT TWO
============================*/
body.post-layout-two .site-main article {
border-bottom: 1px solid rgba(var(--primary-color-rgb),0.2);
padding-bottom: 48px;
margin-bottom: 48px;
}
body.post-layout-two .site-main article .entry-header {
margin-bottom: 25px;
}
body.post-layout-two .site-main article .entry-title {
margin-top: 10px;
font-size: 2.22em;
}
.post-layout-two .site-main article span.category{
display: inline-block;
font-size: 0.6666em;
text-transform: uppercase;
font-weight: 700;
line-height: 1.49;
letter-spacing: 1px;
}
.post-layout-two .site-main article span.category a:hover{
color: #121212;
text-decoration: none;
}
.nav-menu .close {
display: none;
background-color: transparent;
padding: 0;
}
.style-one .secondary-menu .secondary-menu-list .close {
display: none;
background-color: transparent;
padding: 0;
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
}
.keyboard-nav-on .style-one .secondary-menu .secondary-menu-list.active .close {
display: block;
}
.keyboard-nav-on .style-one .secondary-menu .toggle-btn.active{
display: none;
}
.style-one .secondary-menu .secondary-menu-list .close::after,
.style-one .secondary-menu .secondary-menu-list .close::before{
content: "";
background: #333;
height: 2px;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
-webkit-transition: all ease 0.35s;
-moz-transition: all ease 0.35s;
transition: all ease 0.35s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.style-one .secondary-menu .secondary-menu-list .close::after{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.secondary-menu .secondary-menu-list .close {
display: none;
}
.style-one .secondary-menu ul ul{
opacity: 1;
}
/*========================
SITE BANNER
========================*/
.site-banner.style-one .banner-caption .cat-links {
margin-bottom: 2px;
display: table;
padding: 3px 10px;
margin-left: auto;
margin-right: auto;
}
.site-banner.style-one .banner-caption .banner-title {
padding: 0 10px;
}
.site-banner.style-one .owl-carousel .owl-nav button.owl-next,
.site-banner.style-one .owl-carousel .owl-nav button.owl-prev{
border: 1px solid rgba(var(--black-color-rgb), 0.1);
}
.site-banner.style-one .owl-carousel .owl-stage-outer+.owl-nav .owl-prev [class*="owl-"] {
background-image: url('data:image/svg+xml; utf-8, ');
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all ease 0.35s;
-moz-transition: all ease 0.35s;
transition: all ease 0.35s;
}
.owl-carousel>.owl-nav button.owl-next {
left: auto;
background-image: url('data:image/svg+xml; utf-8, ');
}
.site-banner.style-one button{
background: 0 0;
}
.post-layout-two .site-main article span.category a + a::before {
content: "";
background: rgba(var(--primary-color-rgb), 0.3);
width: 5px;
height: 5px;
display: inline-block;
border-radius: 100%;
vertical-align: middle;
margin: -2px 8px 0 5px;
}
.secondary-menu.style-one ul.nav-menu.ps{
overflow:unset !important;
}
/*========================
header layout
========================*/
@media screen and (max-width: 1024px) {
.style-one .secondary-menu .nav-menu{
display: none;
position: absolute;
top: 100%;
left: 15px;
right: 15px;
width: auto;
height: auto;
background: var(--white-color);
box-shadow: 0 5px 10px rgba(var(--black-color-rgb), 0.1);
padding: 0 20px;
max-height: 44vh;
overflow: auto;
visibility: visible;
z-index: 9;
-webkit-transition: none;
-moz-transition: none;
transition: none;
-webkit-transform: none;
-moz-transform: none;
transform: none;
}
.style-one .secondary-menu ul li a{
padding: 20px 0;
border-bottom: 1px solid rgba(var(--black-color-rgb), 0.1);
display: block;
}
.header-t{
position: relative;
}
.secondary-menu.style-one .toggle-btn {
display: block;
}
.style-one .secondary-menu ul li .submenu-toggle {
top: 0;
right: 0;
width: 20px;
height: 55px;
line-height: 55px;
}
.style-one .secondary-menu ul ul li.menu-item-has-children .submenu-toggle {
right: 0;
transform: none;
top: 0;
}
.style-one .secondary-menu ul li.menu-item-has-children .submenu-toggle.active {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.style-one .secondary-menu ul ul {
padding-left: 10px;
position: static;
visibility: visible;
opacity: 1;
box-shadow: none;
width: auto;
display: none;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.style-one .secondary-menu ul ul li {
padding-left: 0;
padding-right: 0;
}
.style-one .secondary-menu ul ul li a {
border-bottom-style: solid;
}
}
@media screen and (min-width:1025px){
.site-header.style-one .secondary-menu ul, .site-header.style-one .secondary-menu ul ul {
display: block !important;
}
}
@media only screen and (min-width:1024px) {
.style-one .secondary-menu ul > li .submenu-toggle {
display: none;
}
.style-one .secondary-menu ul > li.menu-item-has-children>a::after {
content: '';
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg class='svg-inline--fa fa-chevron-down fa-w-14' aria-hidden='true' data-prefix='fas' data-icon='chevron-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' data-fa-i2svg=''%3E%3Cpath fill='currentColor' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
top: 5px;
width: 13px;
height: 13px;
justify-content: center;
align-items: center;
flex-direction: column;
right: 8px;
}
.style-one .secondary-menu ul ul li.menu-item-has-children>a::after{
top: 19px;
transform: rotate(-90deg);
}
.secondary-menu .nav-menu>li:nth-last-of-type(1)>ul li.menu-item-has-children>a::after, .secondary-menu .nav-menu>li:nth-last-of-type(2)>ul li.menu-item-has-children>a::after, .secondary-menu .nav-menu>li:nth-last-of-type(3)>ul li.menu-item-has-children>a::after{
transform: rotate(90deg);
}
}
@media screen and (max-width: 1500px){
.site-banner .banner-caption {
bottom: 0;
}
}
@media screen and (max-width: 767px){
/*========================
SITE BANNER
========================*/
.site-banner.style-one .item img {
height: 320px;
object-fit: cover;
}
}