/* base.css - reset, html/body, typography, links, general elements */
html {
	overflow-x: hidden;
  scroll-behavior: smooth;
	scroll-padding-top: var(--space-4);
}
body {
	-webkit-font-smoothing: antialiased;
	margin-top: 0 !important;
}

a,
a:hover,
a:focus {
	color: inherit;
	outline: none !important;
}
::selection {
  color: var(--color-white);
  background: var(--color-primary);
}
::-moz-selection {
  color: var(--color-white);
  background: var(--color-primary);
}

body .fixed-pages {
	padding-bottom: var(--space-10);
}

.home-block-padding {
	padding-bottom: calc(var(--space-10) * 2);
}

.flex-row {
	display: flex;
	align-items: flex-start;
	margin: calc(-1 * var(--space-3));
}

.col-sidebar {
	min-width: 330px;
	max-width: 330px;
	padding: var(--space-3);
	margin-right: var(--space-4);
}
.col-sidebar.on-right {
	margin-right: 0;
	margin-left: var(--space-4);
}

.col-main {
	flex-grow: 10;
	padding: var(--space-3);
}

.col-main .general-content {
	margin-bottom: var(--space-6);
}

div[class*=" col-"] {
	margin-left: -.5px;
}

.ul-reset {
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 1199px) {
	.home-block-padding {
		padding-bottom: 70px;
	}
}

@media (max-width: 991px) {
	.flex-row {
		display: block;
	}
  .col-sidebar {
		padding: 0;
	}
}

@media (max-width: 767px) {
	body,
	html {
		width: 100%;
	}
}

/* general */
.extra-info-block {
	border-top: 1px solid var(--color-primary);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
  padding-bottom: var(--space-5);
  color: var(--color-black);
  font-size: 1.3rem;
}
.extra-info-block p {
	font-style: italic;
	margin: 0;
	line-height: normal;
}

.sidebar .sidebar-title {
	font-size: 1.4em;
	margin-bottom: var(--space-3);
}

.block-shadow {
	padding: var(--space-6) var(--space-5);
  border: var(--border-subtle);
	border-radius: var(--radius);
	margin-bottom: var(--space-4);
}

.block-gray {
	padding: var(--space-6) var(--space-5);
  background: var(--color-primary-bg);
	border-radius: var(--radius);
	margin-bottom: var(--space-4);
}

@media (max-width: 1199px) {
	.col-sidebar {
		min-width: var(--menu-sidebar-width);
		max-width: var(--menu-sidebar-width);
		margin-right: 0;
	}
  .block-shadow,
	.block-gray {
		padding: var(--space-4);
	}
}

.relative {
	position: relative;
}

.sm {
	vertical-align: middle;
	display: inline-block;
}
.sm:before {
	display: flex;
}

/* grid */
.grid-20 {
	width: 20%;
}
.grid-25 {
	width: 25%;
}
.grid-30 {
	width: 30%;
}
.grid-33 {
	width: 33.33333%;
}
.grid-66 {
	width: 66.66666%;
}
.grid-50 {
	width: 50%;
}
.grid-75 {
	width: 75%;
}

@media (min-width: 1200px) {
	.container {
		width: 100%;
		max-width: 1460px;
		padding: 0 var(--space-6);
	}
	.col-lg-20 {
		float: left;
		padding-left: var(--space-3);
		padding-right: var(--space-3);
		width: 20%;
	}
}

@media (max-width: 767px) {
	.container {
		padding: 0 var(--space-4);
	}
  .main-content {
  	margin-top: var(--space-10);
  }
}

/* titles */
.title-featured {
	margin-bottom: var(--space-6);
}
.title-featured .title {
  font-family: var(--font-heading);
	margin: 0;
	font-size: 2.5em;
}
.title-featured .title-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.title-featured .link {
	margin-left: var(--space-8);
	white-space: nowrap;
}
.title-featured .link i {
	margin-left: 7px;
}
.title-small,
.title-featured .title.title-small {
	font-size: 1.6em;
}

@media (max-width: 767px) {
	.title-featured {
		margin-bottom: var(--space-4);
	}
  .title-small,	.title-featured .title.title-small {
		font-size: 1.4em;
	}
  .title-featured .title-wrap {
		display: block;
	}
	.title-featured .link {
		margin: 0;
		margin-top: var(--space-1);
		display: inline-block;
		font-size: .9em;
	}
	.title-featured .title {
		font-size: 1.7em;
	}
  #login-popup .title-small,
	.cart-wrap .title-small,
	.mobile-popup .title-small {
		margin-bottom: var(--space-5);
	}
}

/* general content */
.general-content p,
.general-content.product-content p,
#account-dashboard .account-title .content {
	line-height: 1.75em;
	margin-bottom: var(--space-3);
	font-size: .97em;
}
.general-content h1,
.general-content .h1 {
	font-size: 2.2em;
}
.general-content h2,
.general-content .h2 {
	font-size: 2.0em;
}
.general-content h3,
.general-content .h3 {
	font-size: 1.8em
}
.general-content h4,
.general-content .h4 {
	font-size: 1.6em;
}
.general-content.faded .text {
	position: relative;
	height: 250px;
	overflow: hidden;
}
.general-content.faded .text.active {
	height: auto;
	overflow: visible;
}
.general-content.faded .text:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 1)));
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 100%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff',endColorstr='#ffffff', GradientType=0);
}
.general-content.faded .text.active:after {
	display: none;
}
.general-content .toggle-text {
	display: none;
	font-weight: 700;
}
.general-content.faded .toggle-text {
	display: block;
}
.general-content.faded .toggle-text i {
	margin-left: 7px;
}
.general-content li {
	line-height: 1.75em;
	font-size: 0.97em;
}

@media (max-width: 767px) {
	.general-content h1,
	.general-content.product-content h1,
	#account-dashboard .account-title .title {
		font-size: 1.5em;
	}
	.general-content h2,
	.general-content.product-content h2 {
		font-size: 1.4em;
	}
	.general-content h3,
	.general-content.product-content h3 {
		font-size: 1.3em
	}
	.general-content h4,
	.general-content.product-content h4 {
		font-size: 1.2em;
	}
  
  .is-mobile ul.list-inline li {
		padding: 0 8px !important;
	}
}

/* page padding */
/*
#collection-page,
#catalog-page,
#cart-page,
#service-page,
#textpage,
#brands-page,
#tags-page,
.fixed-pages {
	padding-bottom: calc(var(--space-10) * 2);
}
*/

/* keyframes */
@-webkit-keyframes jump {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	50% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	80% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes jump {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	20% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}
	50% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	80% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}