/*
Theme Name:           Naisten Kymppi
Theme URI:            http://flatsome.uxthemes.com
Description:          Flatsome Child Theme
Author:               UX-Themes
Author URI:           https://uxthemes.com
Template:             flatsome
Version:              1.0.0
Text Domain:          naisten-kymppi
*/

/* Replace Flatsome's chevron icon-font glyphs with custom arrow shapes */
.icon-angle-right::before,
.icon-angle-left::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon-angle-right::before {
	-webkit-mask-image: url('assets/icons/arrow-right.svg');
	mask-image: url('assets/icons/arrow-right.svg');
}

.icon-angle-left::before {
	-webkit-mask-image: url('assets/icons/arrow-left.svg');
	mask-image: url('assets/icons/arrow-left.svg');
}

/* Flatsome's -1.5px baseline fix for font-icon glyphs isn't needed for our mask-based arrows */
.button i.icon-angle-right,
.button i.icon-angle-left,
button i.icon-angle-right,
button i.icon-angle-left {
	top: 0;
}

/* Flickity slider prev/next arrows are generated via inline SVG, not the icon font */
.flickity-prev-next-button .flickity-button-icon path {
	display: none;
}

.flickity-prev-next-button::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	height: 40%;
	transform: translate(-50%, -50%);
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.flickity-prev-next-button.previous::after {
	-webkit-mask-image: url('assets/icons/arrow-left.svg');
	mask-image: url('assets/icons/arrow-left.svg');
}

.flickity-prev-next-button.next::after {
	-webkit-mask-image: url('assets/icons/arrow-right.svg');
	mask-image: url('assets/icons/arrow-right.svg');
}

/* White button, primary color arrow by default; invert on hover */

.flickity-prev-next-button {
  color: var(--fs-color-primary) !important;
  width: 43px;
}

.flickity-prev-next-button.next {
	right: max(10px, calc(50% - 540px)) !important;
}

.flickity-prev-next-button.previous {
	left: max(10px, calc(50% - 540px)) !important;
}

.flickity-button-icon {
	background-color: #fff !important;
	color: var(--fs-color-primary) !important;
	transition: transform .3s, opacity .3s, background-color .3s, color .3s, box-shadow .3s;
}

.flickity-prev-next-button:hover .flickity-button-icon {
	background-color: var(--fs-color-primary) !important;
	color: #fff !important;
}

/* The arrow itself is drawn on the button (::after), so its color must flip too */
.flickity-prev-next-button:hover {
	color: #fff !important;
}

/* Remove Flatsome's circle-style border (e.g. slider-nav-circle) around the button icon */
.flickity-prev-next-button .arrow,
.flickity-prev-next-button svg,
.flickity-prev-next-button:hover .arrow,
.flickity-prev-next-button:hover svg {
	border: 0 !important;
}

/* Slider page dots: white inactive, primary color with white border when active */
.flickity-page-dots .dot {
	background-color: #fff !important;
	border-color: #fff !important;
}

.flickity-page-dots .dot.is-selected {
	background-color: var(--fs-color-primary) !important;
	border-color: #fff !important;
}

/* Heading sizes */
h1 {
	font-size: 3.75rem; /* 60px */
	color: var(--fs-color-primary);
}

h2 {
	font-size: 3.125rem; /* 50px */
}

h3 {
	font-size: 2.5rem; /* 40px */
}

h4,
h5,
h6 {
	font-size: 1.875rem; /* 30px */
}