*,
*:before,
*:after {
	box-sizing: border-box
}

@media (max-width: 568px) {
	.no-mobile {
		display: none !important
	}
}

@media (max-width: 374px) {
	.mobile-lg {
		display: none !important
	}
}

@media (min-width: 569px) {
	.mobile-only {
		display: none !important
	}
}

@media (max-width: 1024px) {
	.desktop-med-only {
		display: none !important
	}
}

body {
	margin: 0;
	font-size: 16px;
	font-family: "Avenir Next", "Avenir", "Avenir Next W04", "Avenir Next W01", sans-serif;
	color: #232323
}

body.dark-bg {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #2e2e2e;
	color: white
}

body.dark-bg a {
	color: white
}

p,
h1,
h2,
h3,
h4,
ul {
	margin: 0
}

.hidden {
	display: none !important
}

.content-wrapper {
	max-width: 99%;
	margin: 0 auto;
	padding: 0 12px
}

h2 {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	font-size: 24px
}

h3 {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	font-size: 16px;
	font-weight: bold
}

.btn,
.header__btn {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	display: inline-block;
	height: 44px;
	padding: 0 16px;
	border-radius: 2px;
	color: #232323;
	font-size: 16px;
	line-height: 48px;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	-webkit-transition: all .2s ease;
	transition: all .2s ease
}

.btn,
.header__btn,
.btn:hover,
.header__btn:hover,
.btn:focus,
.header__btn:focus,
.btn:active,
.header__btn:active {
	text-decoration: none
}

.btn:hover,
.header__btn:hover {
	background-color: #fafafa
}

.dark-bg .btn,
.dark-bg .header__btn {
	background-color: #4b4b4b
}

.btn--fire,
.header__btn {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9F2F), to(#FF6026));
	background-image: -webkit-linear-gradient(#FF9F2F, #FF6026);
	background-image: linear-gradient(#FF9F2F, #FF6026)
}

.btn--fire a,
.header__btn a {
	color: white
}

.btn--fire:hover,
.header__btn:hover {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#EB8826), to(#EB4E1E));
	background-image: -webkit-linear-gradient(#EB8826, #EB4E1E);
	background-image: linear-gradient(#EB8826, #EB4E1E)
}

.btn-group {
	display: -webkit-inline-box;
	display: inline-flex;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5)
}

.btn-group * {
	display: block;
	box-shadow: none
}

.btn-group *:not(:last-child) {
	border-right: 1px solid #ddd
}

.btn-group :first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0
}

.btn-group :last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0
}

.btn-group .active {
	background-color: #e3e3e3
}

.dark-bg .btn-group *:not(:last-child) {
	border-right-color: #373737
}

.dark-bg .btn-group .active {
	background-color: #373737
}

.toast {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	display: none;
	position: fixed;
	left: 16px;
	bottom: 24px;
	border-radius: 2px;
	padding: 0 16px;
	background: #232323;
	height: 48px;
	line-height: 54px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.3)
}

.toast a {
	color: white
}

.tooltip {
	position: relative
}

.tooltip:before {
	content: '';
	width: 0;
	height: 0;
	border-left: solid 5px transparent;
	border-right: solid 5px transparent;
	border-bottom: solid 5px #404040;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	-webkit-transform: translateX(-50%) translateY(-2px);
	transform: translateX(-50%) translateY(-2px);
	top: calc(100% - 2px);
	left: 50%;
	-webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	z-index: 3
}

.tooltip:after {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	font-family: "Avenir Next", "Avenir", "Avenir Next W04", "Avenir Next W02", sans-serif;
	color: #232323;
	text-transform: none;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	content: attr(data-tooltip);
	padding: 6px;
	line-height: 1.4;
	top: calc(100% + 3px);
	left: 50%;
	width: 200px;
	text-align: center;
	-webkit-transform: translateX(-50%) translateY(-2px);
	transform: translateX(-50%) translateY(-2px);
	background: #404040;
	color: white;
	font-size: 14px;
	z-index: 10;
	border-radius: 2px;
	-webkit-transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
	transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), -webkit-transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1)
}

.tooltip:after a {
	color: white
}

.tooltip:hover:before {
	display: block;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0)
}

.tooltip:hover:after {
	display: block;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0)
}

.icon--info {
	position: relative;
	margin-left: 2px;
	top: 4px
}

.dark-bg .icon--info {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1)
}

.skip-to-content {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	-webkit-clip-path: inset(1px 1px 1px 1px);
	clip-path: inset(1px 1px 1px 1px);
	-webkit-clip-path: inset(1px, 1px, 1px, 1px);
	clip-path: inset(1px, 1px, 1px, 1px)
}

.skip-to-content:focus {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
	top: 4px;
	left: 4px;
	padding: 4px;
	width: auto;
	height: auto;
	background-color: #232323;
	overflow: visible;
	-webkit-clip-path: none;
	clip-path: none;
	text-decoration: none;
	z-index: 101
}

.skip-to-content:focus a {
	color: white
}

div[data-tab]:not(.active) {
	display: none
}

header {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	background-color: #373737
}

header a {
	color: white
}

@media (min-width: 769px) {
	header {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: space-between;
		z-index: 100
	}
}

header a:focus {
	background-color: rgba(255, 255, 255, 0.1)
}

.header__logo {
	display: -webkit-box;
	display: flex;
	margin-left: -2px;
	height: 48px
}

@media (min-width: 769px) {
	.header__logo {
		margin-left: 4px
	}
}

.header__logo a {
	display: inline-block;
	height: 100%
}

.powered-by {
	position: relative;
	top: 3px;
	margin: 0 4px 0 6px
}

.luid-logo {
	opacity: .8
}

.luid-logo:hover {
	opacity: 1
}

.luid-logo img {
	position: relative;
	top: 16px
}

.header__nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: -webkit-box;
	display: flex;
	display: flex;
	height: 42px;
	background-color: #262626;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
	overflow-x: auto
}

@media (min-width: 769px) {
	.header__nav {
		align-self: stretch;
		height: auto;
		background-color: inherit;
		box-shadow: none;
		overflow-x: initial
	}
}

.header__link {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	display: block;
	position: relative;
	padding: 0 8px;
	height: 100%;
	font-size: 16px;
	line-height: 42px;
	white-space: nowrap;
	background-color: transparent;
	-webkit-transition: background-color 0.1s ease;
	transition: background-color 0.1s ease
}

.header__link,
.header__link:hover,
.header__link:focus,
.header__link:active {
	text-decoration: none
}

@media (min-width: 769px) {
	.header__link {
		line-height: 48px
	}
}

.header__link:hover,
.header__menu-parent:focus-within .header__link {
	background-color: rgba(255, 255, 255, 0.1)
}

.header__link--active:after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 8px;
	right: 8px;
	height: 4px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9F2F), to(#FF6026));
	background-image: -webkit-linear-gradient(top, #FF9F2F, #FF6026);
	background-image: linear-gradient(to bottom, #FF9F2F, #FF6026)
}

.blue-theme .header__link--active:after {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#4AC4E2), to(#109CBF));
	background-image: -webkit-linear-gradient(top, #4AC4E2, #109CBF);
	background-image: linear-gradient(to bottom, #4AC4E2, #109CBF)
}

.header__login {
	justify-self: flex-end;
	margin-left: auto;
	opacity: .7
}

.header__btn {
	margin-top: 6px;
	margin-right: 8px;
	align-self: center;
	font-weight: bold
}

@media (min-width: 569px) {
	.header__btn {
		padding: 0 10px;
		height: 30px;
		line-height: 30px
	}
}

@media (min-width: 769px) {
	.header__btn {
		margin-top: 9px
	}
}

@media (min-width: 769px) {
	.header__menu-parent {
		position: relative
	}
}

.header__menu-parent:hover .header__link,
.header__menu-parent:focus-within .header__link {
	background-color: rgba(255, 255, 255, 0.1)
}

.header__menu-parent:hover .header__menu,
.header__menu-parent:focus-within .header__menu {
	visibility: visible;
	-webkit-transition-delay: 0s;
	transition-delay: 0s
}

.header__menu-parent .header__link[href="#"] {
	cursor: default
}

.header__menu {
	margin: 0;
	padding: 0;
	list-style-type: none;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	visibility: hidden;
	position: absolute;
	top: 90px;
	left: 0;
	margin: 2px 8px;
	max-width: 382px;
	width: calc(100% - 16px);
	border-radius: 2px;
	background-color: #232323;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
	z-index: 2;
	-webkit-transition: 0.0s 0.1s;
	transition: 0.0s 0.1s
}

.header__menu a {
	color: white
}

@media (min-width: 769px) {
	.header__menu {
		top: calc(100% + 1px);
		left: auto;
		right: 0;
		margin: 0;
		width: auto
	}
}

.header__menu li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2)
}

.header__menu li a {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	display: block;
	position: relative;
	padding: 8px 8px 7px 40px;
	font-size: 15px;
	white-space: nowrap;
	-webkit-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease
}

.header__menu li a,
.header__menu li a:hover,
.header__menu li a:focus,
.header__menu li a:active {
	text-decoration: none
}

.header__menu li a:hover {
	background-color: rgba(255, 255, 255, 0.1)
}

.header__menu li:last {
	border-bottom: none
}

.tool-logos__data {
	position: absolute;
	top: 14px;
	left: 12px
}

.tool-logos__a11y {
	position: absolute;
	top: 14px;
	left: 14px
}

.open-alert {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: -webkit-box;
	display: flex;
	position: relative;
	padding: 8px 44px 8px 8px;
	background-color: #109CBF;
	-webkit-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease
}

.open-alert a {
	color: white
}

.open-alert,
.open-alert:hover,
.open-alert:focus,
.open-alert:active {
	text-decoration: none
}

.open-alert:hover {
	background-color: #0f94b6
}

.open-alert p {
	-webkit-box-flex: 1;
	flex-grow: 1;
	margin: 0;
	font-size: 16px
}

.open-alert__icon {
	display: none
}

@media (min-width: 769px) {
	.open-alert__icon {
		display: block;
		align-self: flex-start;
		margin-right: 10px
	}
}

.open-alert__action {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	display: block
}

@media (min-width: 769px) {
	.open-alert__action {
		display: inline-block;
		padding-left: 20px
	}
}

.open-alert__close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 10px;
	opacity: .8
}

.open-alert__close:hover {
	opacity: 1
}

main {
	margin: 0 auto;
	width: 100%;
	max-width: 1290px
}

@media (min-width: 769px) {
	main {
		padding-top: 24px
	}
}

@media (min-width: 1300px) {
	main {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
		justify-content: space-between
	}
}

.main-column {
	padding: 0 8px
}

@media (min-width: 1024px) {
	.main-column {
		flex-basis: 99%;
		min-width: 99%
	}
}

@media (min-width: 1300px) {
	.main-column {
		margin-right: 20px
	}
}

.sidebar {
	margin: 0 auto;
	max-width: 972px;
	padding: 0 8px
}

@media (min-width: 1300px) {
	.sidebar {
		flex-basis: 310px;
		margin-right: 20px;
		min-width: 310px;
		align-self: flex-start
	}
}

.nav-list {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: -webkit-box;
	display: flex;
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	margin: 0 auto 32px;
	width: 100%;
	max-width: 972px;
	height: 40px;
	border-bottom: 1px solid #EBEBEB
}

.nav-list li {
	height: 100%
}

.dark-bg .nav-list {
	border-bottom-color: rgba(255, 255, 255, 0.1)
}

.nav-link {
	display: block;
	position: relative;
	padding: 0 10px;
	height: 100%;
	color: rgba(35, 35, 35, 0.9);
	font-size: 16px;
	line-height: 40px;
	background-color: transparent;
	-webkit-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease
}

.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
	text-decoration: none
}

.dark-bg .nav-link {
	color: white
}

.nav-link:hover {
	background-color: rgba(235, 235, 235, 0.5)
}

.nav-link.active {
	color: #232323
}

.nav-link.active:after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0px;
	right: 0px;
	height: 4px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9F2F), to(#FF6026));
	background-image: -webkit-linear-gradient(top, #FF9F2F, #FF6026);
	background-image: linear-gradient(to bottom, #FF9F2F, #FF6026)
}

.dark-bg .nav-link.active {
	color: white
}

div[data-tab] {
	margin: 0 auto 64px;
	max-width: 972px
}

h1 {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	margin-bottom: 24px;
	font-size: 32px
}

.controls {
	display: -webkit-box;
	display: flex;
	flex-wrap: wrap
}

.control {
	margin-bottom: 48px;
	margin-right: 40px
}

.subcontrol {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	justify-content: space-between
}

.subcontrol__label {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	font-size: 15px;
	opacity: .8
}

.swatches {
	display: -webkit-box;
	display: flex;
	margin-right: -10px
}

.swatches.no-margin {
	margin-right: 0
}

.swatches.no-margin .swatch {
	margin-right: 0
}

.swatch {
	-webkit-box-flex: 140px;
	flex: 140px 0 1;
	margin-bottom: 12px;
	height: 140px;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	-webkit-transition: box-shadow 0.1s ease;
	transition: box-shadow 0.1s ease
}

@media (min-width: 769px) {
	.swatch {
		margin-right: 10px
	}
}

.swatch.jscolor {
	position: relative
}

.swatch.jscolor:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 0, 0, 0.15)
}

.swatch.jscolor:hover:after {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	content: url(../img/click-me-dots.svg);
	color: white
}

button.swatch {
	border: none;
	padding: 0;
	cursor: pointer
}

.labels {
	display: -webkit-box;
	display: flex;
	margin-right: -10px;
	margin-bottom: 48px
}

.labels input,
.labels p {
	-webkit-box-flex: 140px;
	flex: 140px 0 1;
	min-width: 0;
	text-align: center;
	font-size: 10px;
	line-height: 44px;
	font-family: "Input Mono", "Input Mono Reg", "Courier", monospace
}

@media (min-width: 569px) {
	.labels input,
	.labels p {
		font-size: 14px
	}
}

@media (min-width: 769px) {
	.labels input,
	.labels p {
		margin-right: 10px;
		font-size: 18px
	}
}

@media (min-width: 1024px) {
	.labels input,
	.labels p {
		font-size: 22px
	}
}

.labels input {
	height: 44px;
	border: 1px solid #6a6a6a;
	border-radius: 2px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3)
}

.dark-bg .labels input {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #1c1c1c;
	border: none
}

.dark-bg .labels input a {
	color: white
}

.labels.no-margin {
	margin-right: 0
}

.labels.no-margin input,
.labels.no-margin p {
	margin-right: 0
}

.labels.small-fonts input,
.labels.small-fonts p {
	font-size: 14px
}

.actions {
	margin-bottom: 64px
}

.actions .btn,
.actions .header__btn {
	margin-right: 16px
}

.in-context {
	margin-bottom: 48px
}

.in-context h2 {
	margin-bottom: 24px
}

.in-context canvas,
.in-context svg {
	margin-right: 48px
}

#pie-a,
#pie-b {
	background-color: red
}

.how-to-use {
	max-width: 620px
}

.how-to-use h2,
.how-to-use ul {
	margin-bottom: 12px
}

.how-to-use li {
	margin-bottom: 4px
}

.how-to-use p {
	margin-bottom: 12px;
	line-height: 1.5
}

figure {
	margin: 24px 32px;
	text-align: center
}

figure>img {
	max-width: 100%
}

figcaption {
	font-style: italic
}

.magnet {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
	max-width: 620px;
	padding: 8px;
	background-color: #232323
}

.magnet a {
	color: white
}

@media (min-width: 1300px) {
	.magnet {
		margin-top: 38px
	}
}

.magnet__title {
	margin: 0 auto 20px;
	max-width: 400px;
	padding: 0 2px;
	font-size: 30px;
	line-height: 1;
	text-align: left
}

.magnet__desc {
	margin: 20px auto;
	max-width: 400px;
	font-size: 16px;
	line-height: 1.375
}

.magnet__content {
	margin: 0 auto 6px;
	max-width: 400px
}

.magnet__content p {
	text-align: center
}

.ck_form_container {
	margin-bottom: 18px
}

#ck_success_msg {
	color: #6FE382
}

#ck_error_msg {
	color: #F00
}

.ck_control_group {
	margin: 0 auto 18px
}

.ck_control_group.floatl--active .floatl__label {
	background-color: transparent;
	background: none
}

.ck_control_group input.floatl__input {
	font-size: 16px;
	font-family: "Avenir Next", "Avenir", "Avenir Next W04", "Avenir Next W02", sans-serif;
	color: #232323;
	width: 100%;
	height: 44px;
	font-size: 16px
}

@media (min-width: 569px) {
	.ck_control_group input.floatl__input {
		height: 52px;
		font-size: 19px
	}
}

@media (min-width: 769px) {
	.name-fields-wrapper {
		display: -webkit-box;
		display: flex
	}
	.name-fields-wrapper>* {
		-webkit-box-flex: 1;
		flex-grow: 1
	}
	.name-fields-wrapper>*:first-child {
		margin-right: 10px
	}
	.name-fields-wrapper>*:last-child {
		margin-left: 10px
	}
}

.magnet__content--compact .ck_form_container {
	margin-bottom: 16px
}

.magnet__content--compact .ck_control_group {
	margin-bottom: 12px
}

@media (min-width: 769px) {
	.magnet__content--compact .ck_first_name_field_group {
		margin-right: 5px
	}
}

@media (min-width: 769px) {
	.magnet__content--compact .ck_last_name_field_group {
		margin-left: 5px
	}
}

.magnet__content--compact input.floatl__input {
	height: 46px;
	font-size: 16px
}

.magnet__content--compact .btn.btn--cta,
.magnet__content--compact .btn--cta.header__btn {
	width: 100%;
	height: 46px;
	font-size: 18px;
	font-weight: bold;
	border: none
}

.magnet__secondary {
	margin: 0;
	font-size: 14px;
	opacity: .7
}

footer {
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-top: 64px;
	border: 1px solid transparent;
	text-align: center;
	background-color: #232323
}

footer a {
	color: white
}

.footer__img {
	display: block;
	margin-top: 32px
}

.footer__cols {
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-width: 50%;
	-moz-column-width: 50%;
	column-width: 50%;
	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	margin-top: 32px;
	text-align: left
}

@media (min-width: 769px) {
	.footer__cols {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
		-webkit-column-width: 25%;
		-moz-column-width: 25%;
		column-width: 25%;
		-webkit-column-gap: 32px;
		-moz-column-gap: 32px;
		column-gap: 32px;
		margin-top: 64px
	}
}

.footer__col {
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	break-inside: avoid;
	margin-bottom: 40px
}

@media (min-width: 769px) {
	.footer__col {
		margin-bottom: 48px
	}
}

.footer__col h4 {
	font-family: "Rajdhani", "DIN", sans-serif;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: .03em;
	position: relative;
	margin: 0 0 24px;
	opacity: .8
}

.footer__col h4:after {
	content: "";
	display: block;
	position: absolute;
	bottom: -8px;
	width: 20px;
	height: 3px;
	border-radius: 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#FF9F2F), to(#FF6026));
	background: -webkit-linear-gradient(#FF9F2F, #FF6026);
	background: linear-gradient(#FF9F2F, #FF6026);
	-webkit-transform: skew(-25deg);
	transform: skew(-25deg)
}

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

.footer__col ul li a {
	display: inline-block;
	padding: 8px 0;
	font-size: 16px;
	opacity: .9
}

.footer__col ul li a,
.footer__col ul li a:hover,
.footer__col ul li a:focus,
.footer__col ul li a:active {
	text-decoration: none
}

@media (min-width: 769px) {
	.footer__col ul li a {
		padding: 6px 0
	}
}

.footer__col ul li a:hover {
	text-decoration: underline;
	opacity: 1
}

.footer__copyright {
	margin: 32px 0 16px;
	opacity: .8;
	font-size: 13px
}

.w130 {
	width: 130px
}