/**
* Theme Name: Arolax Child
* Description: This is a child theme of Arolex
* Author: <a href="http://themeforest.net/user/crowdytheme">CrowdyTheme</a>
* Template: arolax
* Version: 1.0
*/

:root{ --spm-green:#00b451; --spm-brgreen:#35e82c; --spm-beige:#dfdfdd; }
body { 
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 16px; font-weight: 600; color: #000; line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 { 
	font-family: "Alternate Gothic Condensed ATF", Sans-serif; font-weight: 800;
	text-transform: uppercase; line-height: 1.1; 
}
.elementor-element p { line-height: inherit; }
a[target="_blank"] { position: relative; }
a[target="_blank"]:after {
	content: '\e95f'; font-family: 'wcf-icon'; font-size: 10px; font-weight: 400; color: inherit; line-height: 1; letter-spacing: 0;
	position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; margin-left: 3px; transition: all 0.3s ease-out; 
}
a[target="_blank"]:hover::after { opacity: 1; visibility: visible; z-index: 1; }


/*=====================================================================*/
/* CONTENT */
/*=====================================================================*/
/* ** ``header */
.elementor .elementor-element.elementor-widget-wcf--nav-menu .wcf__nav-menu .wcf-nav-menu-nav.menu-layout-horizontal { row-gap: 0; }
/*--*/
.wc-btn-wrapper.style-1 .wc-btn-group { align-items: center; }
.wc-btn-wrapper.style-1 .wc-btn-group .wc-btn-primary {
    font-size: 30px; color: var(--spm-beige); text-transform: none;
    background-color: #000; padding: 0.6em 1.2em; border-radius: 10em;
}
.wc-btn-wrapper.style-1 .wc-btn-group .wc-btn-play { width: 4em; height: 4em; background: var(--spm-brgreen); color: #000; }
.wc-btn-wrapper.style-1 .wc-btn-group .wc-btn-play .arolax-wcf-icon { font-weight: 700; }
/*--*/
.elementor-widget-wcf--blog--search--form .wcf-search-form .wcf-search-form__input { padding-left: 0; }
/*=================*/
/*====== ... ======*/
.w-auto { width: auto !important; }
.w-100 { width: 100% !important; }
.gy-0 { row-gap: 0 !important; }
.translate-middle { transform: translate(-50%,-50%); }
.translate-middle-x { transform:translateX(-50%); }
.translate-middle-y { transform:translateY(-50%); }
.position-relative { position: relative !important; }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; overflow: visible; white-space: normal; }
table.table td { padding: 15px 10px; border: 2px solid #000; }
/* 
 ** Icon List Inline Right Icon
 ** hacky way to switch position n use top control for its padding-left gap bcz original gap is for padding-right adjustment only 
 ** ``footer
*/
.icon-order-last ul.elementor-icon-list-items.elementor-inline-items .elementor-icon-list-icon { order: 1; padding-left: var(--icon-vertical-offset, 10px); top: inherit; }
/*=================*/
/*====== t&c ======*/
/* ** (https://stackoverflow.com/a/26245056) */
.tnc-wrap h6 { font-size: 22px; letter-spacing: 0.025em; margin-bottom: 5px; }
.tnc-wrap p:not(:last-child) { margin-bottom: 8px; }
.tnc-wrap ul > li { list-style: disc; margin-bottom: 0.6em; }
.tnc-wrap ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; }
.tnc-wrap ol > li { 
    counter-increment: item; 
    position: relative; margin-bottom: 0.6em; padding-left: 2.2em;
}
.tnc-wrap ol > li:before { 
    content: counters(item, ".") ""; 
    display: inline-block; width: 1.5em; height: 1.5em; border: 2px solid #000; border-radius: 50%;
    font-weight: 700; letter-spacing: 0; text-align: center; line-height: 1.35;
    position: absolute; left: 0;
}
.tnc-wrap li ol > li:before { 
    font-size: 0.75em; border: none; top: 2px;
    /*width: 2em; height: 2em; line-height: 1.85;*/
}
/*=================*/
/*====== ... ======*/
.wcf__posts .content { display: flex; flex-direction: column; }
.wcf__posts .title { order: -1; }


/*=====================================================================*/
/* HEADER */
/*=====================================================================*/
.wcf__nav-menu.desktop-menu-active .menu-item a:after { background-color: #000 !important; height: 4px !important; }
.wcf__nav-menu.desktop-menu-active .current_page_parent.menu-item a:after,
.wcf__nav-menu.desktop-menu-active .current-menu-item.menu-item a:after { transform: scale(1); }
.wcf__nav-menu.mobile-menu-active .current_page_parent.menu-item a,
.wcf__nav-menu.mobile-menu-active .current-menu-item.menu-item a { background: var(--spm-beige); }
/*--*/
.logo-circle.fadeIn { animation: circling 24000ms linear infinite; }
.logo-circle:hover { animation-play-state: paused; }

@keyframes circling {
    0% { transform: translate(-50%,-50%) rotate(0deg); }
    100% { transform: translate(-50%,-50%) rotate(360deg); }
}


/*=====================================================================*/
/* FOOTER */
/*=====================================================================*/
.footnav .single__menu__nav li:not(:last-child) a:after {
    content: ''; display: inline-block; border-left: 1px solid; height: 0.8em; vertical-align: middle;
    position: relative; left: 13px; top: 0.2em;
}
.footnav .single__menu__nav li.current_page_item a { text-decoration: underline; }


/*=====================================================================*/
/* PAGE */
/*=====================================================================*/
/*==================*/
/*====== home ======*/
.heroslider .wcf__slider { opacity: 0; }
.heroslider .swiper-initialized.wcf__slider { opacity: 1; }
.heroslider .swiper-horizontal .wcf--image-box { direction: rtl; }
.heroslider .swiper-horizontal .wcf--image-box .thumb { flex-basis: 100%; }
.heroslider .swiper-horizontal .wcf--image-box .content { 
    max-width: clamp(200px, 40vw, 50%); flex-basis: 100%; 
    padding-top: 0; padding-bottom: 0; padding-right: 20px; 
}
.heroslider .swiper-horizontal .wcf--image-box .content .wrap { display: flex; flex-direction: column; height: 100%; }
.heroslider .swiper-horizontal .wcf--image-box .description, 
.heroslider .swiper-horizontal .wcf--image-box .subtitle, 
.heroslider .swiper-horizontal .wcf--image-box .title { color: #000; }
.heroslider .swiper-horizontal .wcf--image-box .title-wrap { padding-top: min(9vw, 130px); }
.heroslider .swiper-horizontal .wcf--image-box .title-wrap span { display: inline-block; }
.heroslider .swiper-horizontal .wcf--image-box .description { margin-top: auto; max-width: min(30vw, 270px); text-align: right; direction: ltr; }
/*--*/
.heroslider .ts-pagination { 
    max-width: min(40vw, 600px); max-width: clamp(200px, 40vw, 50%); width: 100%; padding-right: 20px; visibility: hidden;
    font-family: "Alternate Gothic Condensed ATF", Sans-serif; font-size: min(5.9vw, 100px); text-align: right; line-height: 1; 
}
.heroslider .ts-pagination.pagination-ready { visibility: visible; }
.heroslider .ts-pagination .mid-line { width: auto; height: auto; margin: 0; background: none; }
.heroslider .ts-pagination .mid-line:before { content: '/'; }
/*===================*/
/*====== store ======*/
.storeslider .wcf__slider { opacity: 0; }
.storeslider .swiper-initialized.wcf__slider { opacity: 1; }
.storeslider .ts-pagination { 
	visibility: hidden; z-index: 1;
    font-family: "Alternate Gothic Condensed ATF", Sans-serif; font-size: min(4.9vw, 40px); text-align: right; line-height: 1; 
    /*text-shadow: 0 0 5px rgba(255,255,255,1); -webkit-text-stroke: 1px rgba(255,255,255,0.4);*/
}
.storeslider .ts-pagination.pagination-ready { visibility: visible; }
.storeslider .ts-pagination .mid-line { width: auto; height: auto; margin: 0; background: none; }
.storeslider .ts-pagination .mid-line:before { content: '/'; }
.storeslider .ts-navigation { transform: translate(0,-50%); }



@media only screen and (min-width: 768px) {
	.heroslider .ts-navigation { display: none; }
}
@media only screen and (max-width: 767px) {
    .wc-btn-wrapper.style-1 .wc-btn-group .wc-btn-primary { font-size: 22px; }
    .wc-btn-wrapper.style-1 .wc-btn-group .wc-btn-play { font-size: 13px; }
    /*--*/
    .heroslider .swiper-horizontal .wcf--image-box { direction: ltr; display: block; }
    .heroslider .swiper-horizontal .wcf--image-box .content { max-width: 100%; padding-left: 20px; }
    .heroslider .swiper-horizontal .wcf--image-box .title-wrap { padding-top: 12px; }
    .heroslider .swiper-horizontal .wcf--image-box .description { max-width: 100%; text-align: left; }
	.heroslider .ts-pagination { max-width: inherit; width: auto; z-index: 1; }
    /*--*/
    .storeslider .ts-navigation .wcf-arrow .arolax-wcf-icon { font-size: 15px; }
}