html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: border-box;
}

body {
	background: #fff; /* Fallback for when there is no custom background color defined. */
}

hr {
	background-color: #cccccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

@import "lists";

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

figure {
	margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
}

.rz-ratio {
	display: flex;
	width: 100%;
	position: relative;

	&:before {
		content: '';
		width: 0;
		height: 0;
		display: block;
		padding-bottom: var(--rz-ratio-percent);
	}

	img {
		display: block;
		max-width: 100%;
		position: absolute;
		margin: 0;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.rz-ratio--portrait {
	--rz-ratio-percent: 128%;
}

.razzi-loading{
	@include razzi-loading();
}

.razziFadeInUp {
	animation-name: razziFadeInUp;
	animation-duration: 0.8s;
	animation-fill-mode: both;
	animation-timing-function:cubic-bezier(0.65, 0.8, 0.44, 0.99);
}

.razzi-gooey{
	width: 100%;
    height: 100%;
    background-color: var( --rz-background-color-light );
    display: flex;
    align-items: center;
    justify-content: center;

	span{
		display: block;
		float: left;
		width: 10px;
		height: 10px;
		margin: 0 8px;
		background-color: var( --rz-background-color-dark );
		border-radius: 50%;
		animation: bubble 1.2s -0.6s infinite ease-out;
	}
}

.razzi-gooey span:nth-child(2n){
	animation-delay: -1s;
}

.razzi-gooey span:nth-child(3n){
	animation-delay: 0s;
}

.razzi-svg-icon {
	display: inline-flex;

	svg {
		vertical-align: -0.125em;
		width: 1em;
		height: 1em;
		display: inline-block;
	}
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.border-color-dark {
	border-color: var( --rz-border-color-dark ) !important;
}

.razzi-scrollbar {
	overflow-y: auto;
	scrollbar-color: #1f1f1f #e2e2e278;
	scrollbar-width: thin;

	&::-webkit-scrollbar {
		width: 2px;
	}

	&::-webkit-scrollbar-track {
		background-color: #e2e2e2;
	}

	&::-webkit-scrollbar-thumb {
		background-color: #1f1f1f;
	}
}

.primary-color{
	color: var(--rz-color-primary);
}

.image-zoom {
	overflow: hidden;

	img {
		transition: transform .3s ease;
		vertical-align: middle;
	}

	&:hover {
		img {
			transform:scale(1.05);
			-ms-transform:scale(1.05); /* IE 9 */
			-moz-transform:scale(1.05); /* Firefox */
			-webkit-transform:scale(1.05); /* Safari and Chrome */
			-o-transform:scale(1.05); /* Opera */
		}
	}
}

// Tabs
.razzi-tabs {
	@-webkit-keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@-moz-keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.tabs-nav {
		margin: 0;
		padding: 0;
		overflow: hidden;
		list-style-type: none;

		li {
			float: left;
		}

		a {
			display: block;
		}
	}

	.tabs-content {
		position: relative;
	}

	.tabs-panel {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		opacity: 0;
		transition: opacity 0.2s ease;
		transform: translateY(10px);

		&.active {
			position: relative;
			z-index: 2;
			opacity: 1;
			top: 0;
			transform: translateY(0);
			transition: all 0.2s ease;
			transition-delay: 0.1s;
		}
	}
}

.hidden {
	display: none !important;
	visibility: hidden !important;
}


@import "tables";