/* -------------------------------------------
	Base
---------------------------------------------- */

// Variables
@include set-default(
	(
		base: (
			// max-width of '.container'
			_container-width: 1220px,
			// max-width of '.container-fluid'
			_container-fluid-width: 1820px,
			// grid spaces
			_gutter-lg: 15px,
			_gutter-md: 10px,
			_gutter-sm: 5px,
			_gutter-xs: 1px,
			// background of grey section
			_grey-section-bg: #f6f7f9,
			// Body
			body: (
				margin: 0,
				background-color: #fff,
			),
			page-wrapper: (
				margin-left: false,
				margin-right: false,
			),
		),
	)
);
*, ::after, ::before {
	box-sizing: inherit;
}

html {
	font-size: 62.5%;
	font-size-adjust: 100%;
	font-weight: 400;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	overflow-x: hidden;
	max-width: var(--rio-site-width);
	margin: side-values(var(--rio-site-margin));
	padding: side-values(var(--rio-site-gap));
	background-color: var(--rio-site-bg-color);
	background-image: var(--rio-site-bg-image);
	background-repeat: var(--rio-site-bg-repeat);
	background-position: var(--rio-site-bg-position);
	background-size: var(--rio-site-bg-size);
	background-attachment: var(--rio-site-bg-attachment);
}

main {
	display: block;
	position: relative;
	padding-top: 3rem;
	padding-bottom: 6rem;
	flex: 1 1 auto;
}

body:not(.loaded) * {
	transition: all 0s !important;
}

.page-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	transition: margin .4s, opacity .5s;

	background-color: var(--rio-page-wrapper-bg-color);
	background-image: var(--rio-page-wrapper-bg-image);
	background-repeat: var(--rio-page-wrapper-bg-repeat);
	background-position: var(--rio-page-wrapper-bg-position);
	background-size: var(--rio-page-wrapper-bg-size);
	background-attachment: var(--rio-page-wrapper-bg-attachment);

	.loaded > & {
		opacity: 1;
	}
}

.main-content {
	&::after {
		content: '';
		display: block;
		clear: both;
	}
}

table {
	margin-bottom: 2rem;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	td, th {
		padding: 10px;
		text-align: #{$left};
		vertical-align: top;
		border-bottom: 1px solid #e9e9e9;
		&:first-child {
			padding-#{$left}: 0;
		}
	}
}

dl {
	dt {
		font-weight: 700;
		font-size: 1.1em;
	}
        dd {
                margin-bottom: .5rem;
        }
}

ul {
	padding-inline-start: 20px;
}

// added(925) issue: style borken????
ul, ol {
	margin-bottom: 2rem;
}

ol ol {
	list-style: upper-alpha;
	ol {
		list-style: lower-roman;
	}
}

.comment-text {
	> ul {
		list-style: disc;
		ul {
			list-style: circle;
			ul {
				list-style: square;
			}
		}
	}
	> ol {
		list-style: decimal;
		ol {
			list-style: upper-alpha;
			ol {
				list-style: lower-roman;
			}
		}
	}
}

.menu, .menu ul,
.mobile-menu, .mobile-menu ul,
.nav, .nav ul, .tabs,
.widget ul,
.list,
.breadcrumb,
.dropdown-box,
.pagination,
.commentlist,
.comments > ol,
.comment > ol,
.nav-filters,
.product-category ul,
.products,
.product-nav,
.product-tabs>div ul,
.woocommerce-error,
.product-col > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.breadcrumb,
.post-meta,
.post-cats,
.post .post-title,
.tagcloud,
.menu .menu-item >,
header,
.product-category,
.product_meta,
.product-cat,
.product .woocommerce-loop-product__title,
.widget_product_categories,
.yith-woocommerce-ajax-product-filter,
.riode-price-filter,
.pagination,
.mobile-icon-bar,
.mobile-menu-wrapper,
.card-header,
.cart_item,
.nav-tabs,
.nav-filters {
	a {
		color: inherit;
	}
}

.size-guide {
	color: inherit;
}

a {
	text-decoration: none;
	color: #222;
	transition: color .3s;

	&:hover,
	&:focus {
		color: var(--rio-primary-color);
	}
}

:focus {
	outline: 0;
}

figure {
	margin: 0;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle
}
hr {
	margin-bottom: 2rem; // updated(925)
	border: 0;
	border-top: 1px solid $border-color-light;
}
input { 
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	background: transparent;

	&:focus {
		outline: 0;
	}
}
ins {
	text-decoration: none;
}
i {
	font-style: normal;
}
button {
	&:focus {
		outline: none;
	}
}
input,
textarea,
button,
select,
optgroup {
	margin: 0;
}

blockquote {
	margin: 0 0 20px;
	padding: 0 20px;
	// border-#{$left}: 2px solid var(--rio-primary-color);
	// background: #f4f4f4;

	&:before {
		content: "";
		display: block;
		position: absolute;
		#{$left}: 0;
		width: 2px;
		top: 5px;
		bottom: 5px;
		background-color: #dae1e5;
	}

	&.is-style-large:before {
		background: none;
	} 
}

code {
	display: inline-block;
	border-radius: 4px;
	padding: 2px 5px;
	font-size: 1.4rem;
	color: var(--rio-primary-color);
}
pre {
	margin: 20px 0;
	padding: 20px;
	color: var(--rio-primary-color);
	background-color: #f2f3f5;
	overflow: auto;
	font-size: font-size(16px);
}
// added (925)
dd {
	margin-#{$left}: 1rem;
}

.scrollable,
.sidebar-content {
	-webkit-overflow-scrolling: touch;
	&::-webkit-scrollbar {
		height: 7px;
		width: 4px;
	}
	&::-webkit-scrollbar-thumb {
		margin-#{$right}: 2px;
		background: rgba(#000, 0);
		border-radius: 5px;
		cursor: pointer;
		transition: background .3s;
	}

	&:hover::-webkit-scrollbar-thumb {
		background: rgba(#000, 0.25);
	}
}
.scrollable-light:hover::-webkit-scrollbar-thumb {
	background: rgba(#fff,0.2);
}
.single-attachment .attachment > a {
	display: inline-block;
}

// Overlay Animation
@keyframes bouncedelay {
	0%,
	80%,
	100% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.2);
	}
}
@keyframes rotatedelay {
	0% {
		transform: rotateZ(0);
	}
	100% {
		transform: rotateZ(360deg);
	}
}
.loading-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all .3s ease-in-out;
	background: #fff;
	opacity: 1;
	visibility: visible;
	z-index: 999999;
	.loaded > & {
	  opacity: 0;
	  visibility: hidden;
	}
}

// .loading-wrap {
//     .loading:not(.loading-overlay),
//     .loading-overlay.loading::after {
//         animation: spin 650ms infinite linear;
//         border: 2px solid #fff;
//         border-radius: 32px;
//         border-top: 2px solid rgba(0,0,0,0.4) !important;
//         border-#{$right}: 2px solid rgba(0,0,0,0.4) !important;
//         border-bottom: 2px solid rgba(0,0,0,0.4) !important;
//         content: "";
//         display: block;
//         height: 20px;
//         top: 50%;
//         margin-top: -10px;
//         left: 50%;
//         margin-#{$left}: -10px;
//         #{$right}: auto;
//         position: absolute;
//         width: 20px;
//     }
//     .loading-overlay {
//         position: relative;

//         &.loading::after {
//             content: '';
//         }
//         &::before {
//             content: '';
//             position: absolute;
//             left: 0;
//             right: 0;
//             top: 0;
//             bottom: 0;
//             background: #fff;
//             opacity: .8;
//         }
//     }
// }

@keyframes reveal-1 {
	0% {
		transform: rotate3d(0,0,1,135deg) translate3d(0,0,0);
		border-radius: 50%;
	}

	20% {
		transform: rotate3d(0,0,1,135deg) translate3d(55%,55%,0);
		border-radius: 0;
	}

	80% {
		transform: rotate3d(0,0,1,495deg) translate3d(55%,55%,0);
		border-radius: 0;
	}

	100% {
		transform: rotate3d(0,0,1,495deg) translate3d(0,0,0);
		border-radius: 50%;
	}
}

@keyframes reveal-2 {
	0% {
		transform: rotate3d(0,0,1,135deg) translate3d(0,0,0);
		border-radius: 50%;
	}

	20% {
		transform: rotate3d(0,0,1,135deg) translate3d(55%,-55%,0);
		border-radius: 0;
	}

	80% {
		transform: rotate3d(0,0,1,495deg) translate3d(55%,-55%,0);
		border-radius: 0;
	}

	100% {
		transform: rotate3d(0,0,1,495deg) translate3d(0,0,0);
		border-radius: 50%;
	}
}

@keyframes reveal-3 {
	0% {
		transform: rotate3d(0,0,1,135deg) translate3d(0,0,0);
		border-radius: 50%;
	}

	20% {
		transform: rotate3d(0,0,1,135deg) translate3d(-55%,-55%,0);
		border-radius: 0;
	}

	80% {
		transform: rotate3d(0,0,1,495deg) translate3d(-55%,-55%,0);
		border-radius: 0;
	}

	100% {
		transform: rotate3d(0,0,1,495deg) translate3d(0,0,0);
		border-radius: 50%;
	}
}

@keyframes reveal-4 {
	0% {
		transform: rotate3d(0,0,1,135deg) translate3d(0,0,0);
		border-radius: 50%;
	}

	20% {
		transform: rotate3d(0,0,1,135deg) translate3d(-55%,55%,0);
		border-radius: 0;
	}

	80% {
		transform: rotate3d(0,0,1,495deg) translate3d(-55%,55%,0);
		border-radius: 0;
	}

	100% {
		transform: rotate3d(0,0,1,495deg) translate3d(0,0,0);
		border-radius: 50%;
	}
}
.bounce-loader {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	top: 50%;
	#{$left}: 50%;
	width: 20px;
	height: 20px;
	//margin: side-values(-9px 0 0 -35px);
	transition: all .2s;
	text-align: center;
	z-index: 10000;
	//animation: 2s ease-in-out 0s normal both infinite rotatedelay;
	.bounce1,
	.bounce2,
	.bounce3,
	.bounce4 {
	  display: block;
	  position: absolute;
		#{$left}: 0;
		top: 0;
	  width: 20px;
	  height: 20px;
	  margin-bottom: 5px;
	// border-radius: 100%;
	  background-color: #27c;
	  //box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
	  //animation: 1s ease-in-out 0s normal both infinite bouncedelay;
	}
	.bounce1 {
	  animation: 2s infinite reveal-1;
	}
	.bounce2 {
	  animation: 2s infinite reveal-2;
	}
	.bounce3 {
	  animation: 2s infinite reveal-3;
	}
	.bounce4 {
		animation: 2s infinite reveal-4;
	}

	.bounce3 {
		border: 3px solid #27c;
		background-color: transparent;
	}
}

// Animation
.appear-animate {
	transform:  translate3d(0, 0, 0) scale(1);
	will-change: transform, filter, opacity;
}

// Lazyload
.d-lazyload {
	height: 0 !important;
	background: var(--rio-lazy-load-bg, #f4f4f4);

	&[data-lazy$="png"] {
		background: none;
	}
}

.screen-reader-text,
script {
	display: none !important;
}

// Sticky Content(new)
@keyframes fixedTop {
	from {
		transform: translateY(-100%); 
		transform-origin: center top 0px;
	}
	to {
		transform: translateY(0);
	}
}
@keyframes fixedBottom {
	from {
		transform: translateY(100%); 
		transform-origin: center top 0px;
	}
	to {
		transform: translateY(0);
	}
}
.sticky-content {
	&.fix-top { top: 0; }
	&.fix-bottom { bottom: 0; }
	&.fixed {
		&.fix-top {
			animation: fixedTop .4s;
		}
		&.fix-bottom {
			animation: fixedBottom .4s;
		}
		position: fixed;
		left: 0;
		right: 0;
		opacity: 1;
		background: #fff;
		z-index: 1051;
		box-shadow: 0 0 10px 1px rgba(0,0,0,.1);
	}

	transition: opacity 0.5s;
}

// Fitvids
.fit-video .wp-video {
	width: 100% !important;
}

// Loading Icon
form.d-loading {
	opacity: .3;
}
.d-loading {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(255,255,255,.6);
	z-index: 10;

	&.small i {
		position: absolute;
		left: calc(50% - 10px);
		top: calc(50% - 10px);
		width: 20px;
		height: 20px;
	}

	i {
		position: absolute;
		left: calc(50% - 17px);
		top: calc(50% - 17px);
		width: 34px;
		height: 34px;
		border: 2px solid transparent;
		border-top-color: var(--rio-primary-color);
		border-radius: 50%;
		animation: spin .75s infinite linear;

		&:before {
			content: '';
			top: -2px;
			left: -2px;
			position: absolute;
			width: inherit;
			height: inherit;
			border: inherit;
			border-radius: inherit;
			animation: spin 1.5s infinite ease;
		}
	}
}
@keyframes spin {
	0% { transform: none; }
	to { transform: rotate(360deg); }
}

.more-loader {
	position: relative;
	text-align: center;
	margin-bottom: 3rem;
	> * {
		animation: 1.4s ease-in-out 0s normal both infinite running moredelay;
		background-color: #CCC;
		border-radius: 100%;
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.15);
		display: inline-block;
		height: 18px;
		width: 18px
	}
	.more1 {
		animation-delay: -.32s
	}
	.more2 {
		animation-delay: -.16s
	}
}

@keyframes moredelay {
	0%, 80%, 100% {
		transform: scale(0)
	}

	40% {
		transform: scale(1)
	}
}
@media (max-width: 767px) {
	.riode-disable-mobile-animation {
		.elementor-invisible,
		.appear-animate {
			opacity: 1;
			visibility: visible;
		}
	}
}

.d-lazy-back {
	background-image: none !important;
}

#wp-admin-bar-my-account .d-lazyload.avatar {
	padding-top: 0 !important;
	height: auto !important;
	width: auto !important
}

.image-gallery .image-wrap {
	display: flex;
}