/*
	Homesick
	madebysway.com
	2019-12
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
html {
	height:100%;
	min-height:100%;
	font-size:62.5%;
	overflow:auto;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
*,
*:before,
*:after {
	-webkit-box-sizing:inherit;
	-moz-box-sizing:inherit;
	box-sizing:inherit;
}
body {
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	min-height:720px;
	align-items:center;
	background-color:#fff;
	position:relative;
	overflow:visible;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display:block;
}
ol {
	list-style:lower-roman;
}
ul {
	list-style:disc;
}
li {
	margin-left:20px;
}
table {
	width:100%;
	border-collapse:separate;
	border-spacing:0;
}
caption,
th,
td {
	font-weight:normal;
	text-align:center;
	vertical-align:top;
}
button.disabled,
.btn.disabled {
	opacity:.5;
	cursor:default;
}
textarea,
input,
select {
	-webkit-appearance:none;
	-moz-appearance:none;
	outline:none;
}
input,
select {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
input:focus,
select:focus,
textarea:focus,
button:focus,
.hs-select .sel-val:focus {
	outline:none;
}
select,
.hs-select .sel-val {
	width:100%;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {
	color:rgba(0,0,0,.4);
}
img {
	border:0;
}


/* type */

body {
	color:#000;
	font-family:"Roboto",sans-serif;
	font-size:18px;
	font-weight:300;
	line-height:1.2;
}
button,
select {
	color:#fff;
	font-family:"Roboto",sans-serif;
	font-size:18px;
	font-weight:500;
}
textarea,
input,
select,
.hs-select .sel-val {
	color:#000;
	font-family:"Roboto",sans-serif;
	font-size:14px;
	font-weight:500;
	letter-spacing:.2em;
	text-align:center;
	text-transform:uppercase;
}
textarea::placeholder,
input::placeholder {
	color:rgba(0,0,0,.4);
	font-weight:300;
	transition:color 200ms;
}
textarea:hover::placeholder,
input:hover::placeholder,
textarea:focus::placeholder,
input:focus::placeholder {
	/*color:rgba(0,0,0,.6);*/
}
a {
	text-decoration:underline;
	color:#ec2b2c;
	transition:color 200ms;
}
a:hover {
	
}
a:focus {
	
}
b,
strong {
	font-weight:600;
}
dfn,
cite,
em,
i {
	font-style:italic;
}
sup,
sub {
	font-size:75%;
	height:0;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sup {
	bottom:1ex;
}
sub {
	top:.5ex;
}
small {
	font-size:75%;
}
big {
	font-size:125%;
}
h1, h2, h3, h4, h5 {
	display:inline-block;
	clear:both;
	color:#000;
	font-weight:700;
	font-family:"Barlow Semi Condensed",sans-serif;
	text-transform:uppercase;
	position:relative;
}
h1 {
	font-size:113px;
	line-height:120px;
	margin-bottom:36px;
}
h2 {
	font-size:32px;
	line-height:1;
	letter-spacing:0em;
	position:relative;
	margin-bottom:12px;
}
h3 {
	font-size:36px;
	letter-spacing:.02em;
	margin-bottom:10px;
}
h4 {
	font-size:20px;
	line-height:26px;
	letter-spacing:.02em;
}
h5 {
	font-size:14px;
	line-height:18px;
	letter-spacing:.02em;
}
label {
	font-size:12px;
	font-weight:300;
	letter-spacing:1em;
	text-transform:uppercase;
	vertical-align:top;
}
p,
ul,
ol {
	font-size:18px;
	font-weight:300;
	line-height:25px;
	margin-bottom:15px;
}
.no-select * {
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

#url-copy {
	position:absolute;
	top:-200%;
	text-transform:none;
}

/* ---- */

body.lock-scroll {
	overflow:hidden;
	box-sizing:content-box;
}

#preload {
	display:block;
	position:absolute;
	top:-2000px;
	width:auto;
	max-width:100%;
	font-size:10px;
	overflow:hidden;
}

@keyframes loader-spin {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(360deg);
	}
}
@keyframes fade-in {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes fade-out {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes loader-in {
	0% {
		transform:scale(.8);
	}
	100% {
		transform:scale(1);
	}
}
@keyframes loader-out {
	0% {
		transform:scale(1);
	}
	100% {
		transform:scale(1.2);
	}
}
#loader_wrap {
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.8);
	z-index:10;
}
body.loading #loader_wrap {
	display:block;
	animation:fade-in 250ms linear 1;
}
body.loading #loader {
	animation:loader-in 200ms cubic-bezier(0.175, 0.885, 0.320, 1.275) 1;
}
body.loader-out #loader_wrap {
	display:block;
	animation:fade-out 220ms linear 1;
}
body.loader-out #loader {
	animation:loader-out 250ms cubic-bezier(0.600, 0.040, 0.980, 0.335) 1;
}
#loader {
	display:block;
	position:absolute;
	width:50px;
	height:50px;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-25px;
	text-align:center;
	
	border:2px solid #000;
}

#loader .prog {
	width:100%;
	height:100%;
	color:#000;
	font-size:15px;
	font-weight:600;
	line-height:50px;
	letter-spacing:0.02em;
	font-family:"Arial",sans-serif;
	opacity:.8;
}


/* primary layout */

#header {
	position:absolute;
	width:100%;
	display:none;
	z-index:2;
}
body.loaded #header {
	display:block;
	animation:fade-in 500ms linear;
}
#header .social-links {
	position:absolute;
	top:75px;
	left:60px;
}
#header .social-links a {
	width:20px;
	height:20px;
	display:inline-block;
	margin:0px 2px;
	background-image:url('img/icons.png');
	background-size:380px 40px;
	transition:background 300ms;
}
#header .social-links a:hover,
#header .social-links a:focus {
	background-image:url('img/icons-o.png');
}
#header .social-links a._fb {
	background-position:0px 0px;
}
#header .social-links a._tw {
	background-position:-20px 0px;
}
#header .social-links a._ig {
	background-position:-20px -20px;
}
#header .social-links a._yt {
	background-position:0px -20px;
}

#header .logo {
	width:80px;
	height:80px;
	position:absolute;
	top:50px;
	left:50%;
	margin-left:-40px;
	border:3px solid #000;
	background-image:url('img/kb-logo.png');
	background-size:cover;
}

#header .reality-audio {
	position:absolute;
	top:58px;
	right:50px;
	width:300px;
	height:60px;
	background-image:url('img/360audio.png');
	background-size:cover;
}

.owrap {
	display:table;
	width:100%;
	height:100%;
}
.vwrap {
	display:table-cell;
	width:100%;
	vertical-align:middle;
}

#main {
	display:none;
	padding:210px 0px 60px 0px;
	transition:padding 600ms;
	z-index:1;
}
.wrap {
	position:relative;
	max-width:960px;
	margin:0 auto;
}
.inwrap {
	display:table-cell;
	vertical-align:middle;
}
#content {
	display:table;
	position:relative;
	width:550px;
	height:480px;
	margin:0px auto;
	opacity:0;
	transform:scale(.88);
	vertical-align:top;
	text-align:center;
	z-index:2;
	transition:width 600ms;
}


#footer {
	display:none;
	width:100%;
	position:fixed;
	bottom:0px;
	left:0px;
	padding:20px 0;
	background-color:#f0f0f0;
	border-top:1px solid #959595;
	z-index:10;
}


body.loaded #main,
body.loaded #footer {
	display:block;
}


/* inputs etc */

.inputs {
	max-width:480px;
	position:relative;
	margin:0 auto 40px auto;
}
.input-wrap {
	width:100%;
	max-width:380px;
	display:inline-block;
	margin:3px auto;
}

.inputs .conditional {
	display:none;
}
.inputs .conditional.on {
	display:inline-block;
}

input,
textarea,
select,
.hs-select .sel-val {
	margin:2px auto;
	padding:12px 6px;
	border:1px solid #bcbec0;
	border-radius:22px;
	background:#fff;
}
input,
textarea {
	display:block;
	width:100%;
	outline:none;
	-webkit-user-select:auto !important;
	-khtml-user-select:auto !important;
	-moz-user-select:auto !important;
	-ms-user-select:auto !important;
	user-select:auto !important;
	transition:300ms;
}
input:hover,
input:focus,
input.filled,
textarea:hover,
textarea:focus,
textarea.filled {
	color:#000;
	border-color:#000;
	box-shadow:0 0 0 3px #000;
	border-radius:24px;
}

.stage.out .input,
.stage.out .input:before
.stage.out .input:after {
	background:none !important;
}
input[type=checkbox] {
	display:inline-block;
	-webkit-appearance:none;
	-moz-appearance:none;
	width:16px;
	height:16px;
	padding:0px;
	border:2px solid rgba(255,255,255,.3);
	border-radius:2px;
	min-height:0px;
	vertical-align:middle;
	margin:2px 10px 0px 0px;
	outline:6px solid rgba(40,36,30,.8);
	outline-offset:-8px;
	transition:150ms;
}
input[type=checkbox]:hover,
input[type=checkbox]:focus {
	border-color:rgba(241,208,162,1);
}
input[type=checkbox]:checked {
	background-color:#aa4424;
	outline:2px solid rgba(40,36,30,.8);
	outline-offset:-4px;
}
input[type=file] {
	visibility:hidden;
	display:none;
	margin:0px;
}

.buttons {
	margin-top:40px;
	position:relative;
}

.btn {
	position:relative;
	display:block;
	width:auto;
	height:40px;
	min-height:40px;
	font-weight:300;
	line-height:36px;
	letter-spacing:0.05em;
	text-transform:none;
	text-align:center;
	color:#fff;
	margin:5px auto;
	padding:0 25px;
	border:0px;
	border-radius:22px;
	cursor:pointer;
	background:#000;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	transition:border 300ms, background 300ms, color 300ms, opacity 250ms;
}
.btn:not(.disabled):hover,
.btn:not(.disabled):focus {
	color:#db3731;
}
.btn:before,
.btn:after {
	width:20px;
	height:20px;
	position:absolute;
	top:10px;
	right:15px;
	cursor:pointer;
	background-size:380px 40px;
	background-position:0px 0px;
	transform:scale(1);
	transition:opacity 300ms, transform 200ms;
}
.btn:before {
	background-image:url('img/icons.png');
	opacity:1;
}
.btn:after {
	background-image:url('img/icons-o.png');
	opacity:0;
}
.btn:not(.disabled):hover:before,
.btn:not(.disabled):focus:before {
	opacity:0;
	transform:scale(1.1);
}
.btn:not(.disabled):hover:after,
.btn:not(.disabled):focus:after {
	opacity:1;
	transform:scale(1.1);
}
.btn.fixed-width {
	width:300px;
}
.btn-alt {
	color:#000;
	background-color:#fff;
	border:1px solid #000;
}

.btn-arrow {
	padding-right:40px;
}
.btn-arrow:before,
.btn-arrow:after {
	content:'';
	background-position:-40px 0px;
}

.btn-text {
	display:inline-block;
	width:auto;
	border:none;
	background:none;
	color:#000;
	padding:0px 35px;
	font-size:14px;
	font-weight:500;
	line-height:40px;
	border-radius:8px;
	text-transform:uppercase;
	text-decoration:underline;
	margin:0 auto;
}
.btn-text:before,
.btn-text:after {
	content:none;
	left:0px;
	transform:scale(.9);
}
.btn-text:not(.disabled):hover,
.btn-text:not(.disabled):focus {
	background:none;
	color:#db3731;
}
.btn-text:not(.disabled):hover:before,
.btn-text:not(.disabled):hover:after {
	transform:scale(1);
}


.select-wrap {
	position:relative;
	z-index:3;
	transform:translate3d(0,0,0);
}
.select-wrap.on,
.select-wrap.out {
	z-index:4;
}
.select-wrap.latest {
	z-index:5;
}
.select-wrap select {
	display:none;
	visibility:hidden;
}
.hs-select {
	font-size:0px;
	line-height:0px;
	text-align:left;
}
.hs-select .sel-val {
	height:44px;
	position:relative;
	z-index:1;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	cursor:pointer;
	line-height:1em;
	transition:300ms;
}

.select-wrap.empty .hs-select .sel-val {
	color:rgba(0,0,0,.4);
	font-weight:300;
}
.select-wrap.on .hs-select .sel-val {
	z-index:11;
}
.select-wrap:hover .hs-select .sel-val,
.select-wrap.selected .hs-select .sel-val,
.select-wrap.on .hs-select .sel-val {
	border-color:#000;
    box-shadow:0 0 0 3px #000;
	border-radius:24px;
}

.hs-select .sel-val:before {
	content:'';
	width:15px;
	height:9px;
	position:absolute;
	top:50%;
	right:15px;
	margin-top:-4px;
	
	background-image:url('img/icons.png');
	background-size:380px 40px;
	background-position:-62px -7px;
	
	transition:right 300ms, background 300ms;
}
.hs-select .sel-val:hover:before,
.hs-select .sel-val:focus:before {
	background-image:url('img/icons-o.png');
}
.hs-select .sel-opts {
	width:100%;
	max-height:0px;
	height:auto;
	margin-top:0px;
	overflow:hidden;
	position:absolute;
	z-index:0;
	border:0px solid #000;
	border-radius:22px;
	box-shadow:0px 0px 0px rgba(0,0,0,0);
	background-color:#fff;
	transition:max-height 150ms, margin 150ms, opacity 150ms, border 150ms, box-shadow 100ms;
}
.select-wrap.on .hs-select .sel-opts {
	max-height:180px;
	z-index:10;
	overflow-y:scroll;
	border:1px solid #000;
	box-shadow:0px 5px 10px rgba(0,0,0,.4);
	transition:max-height 300ms, margin 300ms, box-shadow 100ms;
}
.select-wrap.out .hs-select .sel-opts {
	box-shadow:0px 0px 0px rgba(0,0,0,0);
}
.hs-select .opt {
	position:relative;
	padding:15px 20px;
	font-size:16px;
	line-height:1em;
	font-weight:300;
	text-align:center;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	color:#6c6c6c;
	cursor:pointer;
	z-index:1;
	transition:color 150ms;
}
.hs-select .sel-opts .opt:nth-child(even) {
	background-color:#eee;
}
.hs-select .opt:hover,
.hs-select .opt:focus,
.hs-select .opt.sel,
.hs-select .opt.sel-set {
	color:#fff;
}
.hs-select .opt:after {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:-2;
	opacity:0;
	background-color:#000;
	transition:opacity 150ms;
}
.hs-select .opt.sel-set:after {
	content:'';
	opacity:.6;
}
.hs-select .opt:hover:after,
.hs-select .opt:focus:after,
.hs-select .opt.sel:after {
	width:100%;
	opacity:1;
}
.hs-select .opt.clear {
	color:#222;
	font-size:12px;
	text-align:right;
	display:none;
}
.select-wrap.selected .hs-select .opt.clear {
	display:block;
}
.hs-select .opt.clear:hover,
.hs-select .opt.clear.sel {
	color:#fff;
}
.hs-select .opt.clear:after {
	background-color:#bbb;
}
.hs-select .opt.clear i {
	display:inline-block;
	width:10px;
	height:10px;
	position:relative;
	margin-left:4px;
}
.hs-select .opt.clear i:before,
.hs-select .opt.clear i:after {
	content:'';
	width:10px;
	height:0px;
	position:absolute;
	top:5px;
	left:2px;
	border-top:2px solid #222;
	transform:rotate(45deg);
	transition:border 150ms;
}
.hs-select .opt.clear i:after {
	transform:rotate(-45deg);
}
.hs-select .opt.clear:hover i:before,
.hs-select .opt.clear:hover i:after,
.hs-select .opt.clear.sel i:before,
.hs-select .opt.clear.sel i:after {
	border-color:#fff;
}


.message-wrap {
	height:240px;
	margin-bottom:20px;
	border:1px solid #bcbec0;
	border-radius:22px;
	background-color:#fff;
	cursor:text;
	transition:300ms;
}
.message-wrap:hover,
.message-wrap.filled {
	border-color:#000;
    box-shadow:0 0 0 3px #000;
}

.input.message {
	width:360px;
	height:auto;
	min-height:40px;
	max-height:220px;
	margin:4px auto;
	padding:8px;
	font-family:"Merriweather",serif;
	font-style:italic;
	font-size:18px;
	font-weight:400;
	text-transform:none;
	letter-spacing:0em;
	line-height:20px;
	border:0px;
	box-shadow:none;
	background-color:transparent !important;
	resize:none;
	overflow:hidden;
	transition:300ms, height 0ms;
}

.show-errors .message-wrap.error .message {
	box-shadow:none;
}



.input.message:hover,
.input.message:focus,
.input.message.filled {
	
}

.message-wrap .counter {
	width:100px;
	height:20px;
	position:absolute;
	bottom:-5px;
	left:50%;
	margin-left:-50px;
	text-align:center;
	font-size:12px;
}

#imgtool {
	margin:30px auto 60px auto;
}

#imgtool .input-wrap {
	width:140px;
	height:140px;
	margin:0px 5px;
	position:relative;
	display:inline-block;
	border:2px dashed #000;
	vertical-align:top;
	box-sizing:content-box;
}
#imgtool .input-wrap label {
	display:none;
}
#imgtool .input-wrap.open label {
	width:140px;
	height:140px;
	position:relative;
	display:block;
	cursor:pointer;
}
#imgtool .input-wrap.open label:before {
	content:'';
	width:30px;
	height:30px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-25px;
	margin-left:-15px;
	
	background-image:url('img/icons.png');
	background-size:570px 60px;
	background-position:-120px 0px;
	
	transition:background 250ms;
}
#imgtool .input-wrap.open label:hover:before,
#imgtool .input-wrap.open label:focus:before {
	background-image:url('img/icons-o.png');
}
#imgtool .input-wrap.open label:after {
	content:'ADD PHOTO';
	width:100px;
	height:30px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:15px;
	margin-left:-50px;
	font-size:12px;
	line-height:30px;
	letter-spacing:0.01em;
}

#imgtool .input-wrap label:hover:before,
#imgtool .input-wrap label:hover:after {
	color:#db3731;
}


#imgtool .input-wrap .preview {
	max-width:140px;
	max-height:140px;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1;
}
#imgtool .input-wrap .preview canvas {
	width:140px;
	height:140px;
}
#imgtool .input-wrap.editing .preview {
	cursor:move;
}
#imgtool .input-wrap.editing .preview:before {
	content:'';
	width:30px;
	height:30px;
	position:absolute;
	bottom:2px;
	right:2px;
	background-image:url('img/icons.png');
	background-size:285px 30px;
	background-position:-75px 0px;
	opacity:0;
	transition:opacity 300ms;
}
#imgtool .input-wrap.editing:hover .preview:before {
	opacity:1;
}
#imgtool .input-wrap.validating .preview {
	opacity:.2;
}
#imgtool .input-wrap.validating:before {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:30px;
	margin-top:-25px;
	margin-left:-15px;
	box-sizing:border-box;
	border-radius:15px;
	border:6px solid #000;
	border-right-color:#fff;
	opacity:.6;
	
	transform-origin:50% 50%;
	transform:rotate(0deg);
	animation:loader-spin 2000ms linear 0s infinite;
}
#imgtool .input-wrap.validating:after {
	content:'UPLOADING';
	width:100px;
	height:30px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:15px;
	margin-left:-50px;
	font-size:12px;
	line-height:30px;
	letter-spacing:0.01em;
	text-transform:uppercase;
	opacity:.6;
}
#imgtool .input-wrap.validated .preview {
	opacity:.4;
}
#imgtool .input-wrap.validated:before {
	content:'✓';
	width:100%;
	font-size:50px;
	line-height:140px;
	color:green;
	font-weight:600;
	text-align:center;
}
#imgtool .input-wrap.invalid {
	border-color:#ca4142;
	box-shadow:0px 0px 5px rgba(202,65,66,.4);
}
#imgtool .input-wrap.invalid:before {
	content:'INVALID IMAGE';
	width:100%;
	font-size:16px;
	line-height:140px;
	color:#d21616;
	font-weight:600;
	text-align:center;
}
#imgtool .input-wrap.invalid .preview {
	opacity:.2;
}



#imgtool .imgtool-btns {
	position:absolute;
	bottom:-35px;
	left:0px;
	width:140px;
	height:25px;
	display:none;
	text-align:center;
	z-index:2;
}
#imgtool .input-wrap.editing .imgtool-btns {
	display:block;
}

#imgtool .imgtool-btns label {
	display:inline-block;
	padding-right:4px;
	letter-spacing:0.02em;
	vertical-align:middle;
}

#imgtool .tool-btn {
	width:20px;
	height:20px;
	min-height:20px;
	position:relative;
	display:inline-block;
	padding:0px;
	margin:0px 2px;
	color:#000;
	font-size:18px;
	font-weight:300;
	line-height:20px;
	vertical-align:middle;
	text-align:center;
	background-color:#e1e1e1;
	border-radius:10px;
}
#imgtool .tool-btn:hover,
#imgtool .tool-btn:focus {
	background-color:#000;
}
#imgtool .tool-btn:before,
#imgtool .tool-btn:after {
	content:'';
	width:12px;
	height:12px;
	top:4px;
	left:4px;
	background-size:266px 28px;
}
#imgtool .tool-btn._scale-dn:before,
#imgtool .tool-btn._scale-dn:after {
	background-position:-43px -15px;
}
#imgtool .tool-btn._scale-up:before,
#imgtool .tool-btn._scale-up:after {
	background-position:-57px -15px;
}
#imgtool .tool-btn._clear {
	position:absolute;
	top:0px;
	right:0px;
	margin:0px;
	background-color:#fff;
	border-radius:0px;
	box-shadow:-1px 1px 4px rgba(0,0,0,.2);
	z-index:2;
	display:none;
}
#imgtool .editing .tool-btn._clear,
#imgtool .validated .tool-btn._clear,
#imgtool .invalid .tool-btn._clear {
	display:block;
}
#imgtool .tool-btn._clear:hover,
#imgtool .tool-btn._clear:focus {
	background-color:#ca4142;
	color:#fff;
}
#imgtool .tool-btn._clear:before,
#imgtool .tool-btn._clear:after {
	
	background-position:-29px -15px;
	
	transition:none;
}

#imgtool .input-wrap.invalid .tool-btn._clear:after {
	width:140px;
	height:140px;
	top:0px;
	left:auto;
	right:0px;
	transition:none;
}
#imgtool .input-wrap.invalid .tool-btn._clear:hover:before,
#imgtool .input-wrap.invalid .tool-btn._clear:focus:before {
	width:140px;
	height:140px;
	top:0px;
	left:auto;
	right:0px;
}

#imgtool .input-wrap.invalid .tool-btn._clear:hover:after,
#imgtool .input-wrap.invalid .tool-btn._clear:focus:after {
	width:12px;
	height:12px;
	top:4px;
	left:4px;
	background-position:-29px -15px;
}






.show-errors .error .input,
.show-errors .error .sel-val,
.show-errors .message-wrap.error {
	background-color:rgba(230,190,190,.3);
	box-shadow:0px 0px 8px rgba(210,22,22,.6);
	border-color:rgba(210,22,22,.9);
	color:#d21616;
}
.show-errors .error:hover .input,
.show-errors .error:focus .input,
.show-errors .error:hover .sel-val,
.show-errors .error:focus .sel-val {
	border-color:rgba(210,22,22,.9) !important;
}


/* stages */

@keyframes stage-in {
	0% {
		opacity:0;
		transform:scale(.96);
	}
	100% {
		opacity:1;
		transform:scale(1);
	}
}
@keyframes stage-out {
	0% {
		opacity:1;
		transform:scale(1);
	}
	100% {
		opacity:0;
		transform:scale(1.04);
	}
}
.stage {
	position:absolute;
	width:100%;
	height:0px;
	top:-10000px;
	clear:both;
	z-index:-1;
	overflow:hidden;
	transition:opacity 300ms, transform 300ms;
	transition-timing-function:cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.stage.in {
	position:relative;
	height:auto;
	top:0px;
	z-index:1;
	overflow:visible;
	animation:stage-in 300ms cubic-bezier(0.075, 0.820, 0.165, 1.000) 1;
}
.stage.out {
	opacity:0;
	z-index:-1;
	overflow:visible;
	animation:stage-out 300ms cubic-bezier(0.600, 0.040, 0.980, 0.335) 1;
}

body.on-shared #content {
	width:720px;
	opacity:1;
	transform:scale(1);
	transition:transform 900ms cubic-bezier(0.075, 0.820, 0.165, 1.000), opacity 600ms linear;
}

body.on-intro #content {
	opacity:1;
	transform:scale(1);
	transition:margin 0ms linear, opacity 600ms linear;
}
body.on-intro .stage.intro.in {
	animation:stage-in 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000) 1;
}
body.off-intro #content {
	opacity:1;
	transform:scale(1);
	transition:margin 900ms cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
body.off-intro .stage.intro.out {
	animation:stage-out 300ms cubic-bezier(0.075, 0.820, 0.165, 1.000) 1;
}
body.on-hs #main {
	transition:none;
}
body.on-hs #content {
	
}

/* content */

.stage > .step {
	width:100px;
	height:25px;
	position:absolute;
	top:-55px;
	left:50%;
	margin-left:-50px;
	
	font-family:"Merriweather",serif;
	font-style:italic;
	font-size:18px;
}

.stage.shared {
	width:720px;
	text-align:center;
}
.stage.shared h1 {
	margin-bottom:20px;
}
.stage.shared .btn._begin {
	margin:0px auto;
}
.stage.shared .btn._begin:before,
.stage.shared .btn._begin:after {
	width:80px;
	background-position:-70px -50px;
}
.stage.shared .shared-video {
	display:none;
	width:100%;
	max-width:720px;
	height:auto;
	position:relative;
	margin-bottom:40px;
	overflow:hidden;
	font-size:0px;
	border:15px solid #000;
	box-shadow:0px 10px 40px rgba(0,0,0,.4);
	background-size:cover;
	background-position:center center;
	transition:background 500ms;
}
body.on-shared .stage.shared .shared-video {
	display:block;
}
.stage.shared.waiting .shared-video {
	background-color:#000;
}

@keyframes wait-anim-spin {
	0% {
		transform:rotateY(90deg);
	}
	100% {
		transform:rotateY(-90deg);
	}
}
.stage.shared .shared-video .wait-anim-wrap {
	position:absolute;
	top:50%;
	left:50%;
	perspective:400px;
}
.stage.shared .shared-video .wait-anim {
	width:80px;
	height:80px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-60px;
	margin-left:-40px;
	border:4px solid #fff;
	transform-style:preserve-3d;
	animation:wait-anim-spin 5000ms linear infinite;
	background-image:url('img/kb-logo-2.png');
	background-size:cover;
}
.stage.shared .shared-video .wait-anim span {
	width:100%;
	position:absolute;
	bottom:-30px;
	left:0px;
	font-size:10px;
	text-transform:uppercase;
	color:#fff;
}
.stage.shared .shared-video .wait-anim .e {
	position:absolute;
	top:50%;
	left:50%;
	transform-style:preserve-3d;
}
.stage.shared .shared-video .wait-anim .e:before {
	content:'';
	width:4px;
	height:80px;
	position:absolute;
	top:-40px;
	left:-42px;
	transform:rotateY(90deg);
	background-color:#fff;
}
.stage.shared .shared-video .wait-anim .e:after {
	content:'';
	width:4px;
	height:80px;
	position:absolute;
	top:0px;
	left:-2px;
	transform:rotateY(90deg) rotateX(90deg);
	background-color:#fff;
}
.stage.shared .shared-video .wait-anim .e._2 {
	transform:rotateZ(180deg);
}
.stage.shared.waiting .shared-video .wait-anim {
	display:block;
}


.stage.shared .shared-video .btn-play {
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
	opacity:1;
	background-size:cover;
	appearance:none;
	-webkit-appearance:none;
	border-radius:0px;
	border:0px;
	animation:fade-in 500ms linear;
}
.stage.shared .shared-video .btn-play:before {
	content:'';
	width:80px;
	height:80px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-40px;
	margin-left:-40px;
	background-color:#e1e1e1;
	border-radius:40px;
	transition:background 300ms;
	z-index:1;
}
.stage.shared .shared-video .btn-play:hover:before {
	background-color:#000;
}
.stage.shared .shared-video .btn-play:after {
	content:'';
	width:40px;
	height:40px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-20px;
	margin-left:-20px;
	background-image:url('img/icons.png');
	background-size:380px 40px;
	background-position:-340px 0px;
	transition:background-image 300ms, background-position 1ms;
	z-index:2;
}
.stage.shared .shared-video .btn-play:hover:after {
	background-image:url('img/icons-o.png');
}
.stage.shared.complete .shared-video .btn-play,
.stage.shared.landing .shared-video .btn-play {
	display:block;
}
.stage.shared .shared-video .btn-play.clicked {
	animation:fade-out 350ms linear 1 alternate both;
}
.stage.shared .shared-video .video-wrap {
	font-size:0px;
	line-height:0px;
	padding-bottom:56.25%;
	margin:0px;
	background-color:#000;
	z-index:1;
}
.stage.shared .shared-video video {
	position:absolute;
	top:0px;
	left:0px;
	margin:0px;
	opacity:1;
	transition:opacity 500ms;
}

.stage.shared.waiting .shared-video video {
	opacity:0;
}

.stage.shared .share-btns {
	display:none;
	margin-right:20px;
	vertical-align:top;
}
.stage.shared .share-btns .share-btn {
	display:inline-block;
	width:40px;
	height:40px;
	padding:0px;
	margin:0px 4px;
	border-radius:40px;
}
.stage.shared .share-btns .share-btn:before,
.stage.shared .share-btns .share-btn:after {
	content:'';
	width:25px;
	height:25px;
	top:8px;
	right:8px;
	background-size:238px 25px;
}
.stage.shared .share-btns .share-btn._dl:before,
.stage.shared .share-btns .share-btn._dl:after {
	background-position:-87px 0px;
}
.stage.shared .share-btns .share-btn._url:before,
.stage.shared .share-btns .share-btn._url:after {
	background-position:-112px 0px;
}
.stage.shared .share-btns .share-btn._fb:before,
.stage.shared .share-btns .share-btn._fb:after {
	background-position:-137px 0px;
}
.stage.shared .share-btns .share-btn._tw:before,
.stage.shared .share-btns .share-btn._tw:after {
	background-position:-162px 0px;
}
.stage.shared .share-btns .share-btn._mail:before,
.stage.shared .share-btns .share-btn._mail:after {
	background-position:-187px 0px;
}

.stage.shared .share-btns .share-btn._url {
	position:relative;
}
.stage.shared .share-btns .share-btn._url .info {
	display:none;
	width:100px;
	position:absolute;
	top:50px;
	left:50%;
	margin-left:-50px;
	padding:8px;
	background-color:#fff;
	color:#000;
	border:1px solid #bcbec0;
	border-radius:12px;
	box-shadow:0px 2px 5px rgba(0,0,0,.3);
	font-size:12px;
	line-height:14px;
	z-index:2;
}
.stage.shared .share-btns .share-btn._url.clicked .info {
	display:block;
}
.stage.shared .share-btns .share-btn._url.clicked-out .info {
	animation:fade-out 1000ms linear;
}


.stage.shared .share-copy {
	display:none;
	vertical-align:top;
	text-align:center;
	animation:fade-in 500ms linear;
}
.stage.shared .share-copy.complete {
	text-align:left;
}
.stage.shared .share-copy h2 {
	display:block;
	margin-bottom:2px;
}
.stage.shared .share-copy span {
	font-size:18px;
}
.stage.shared .cta {
	width:100%;
	margin:40px auto;
	font-size:14px;
	font-weight:600;
	line-height:24px;
	padding:10px;
	text-transform:uppercase;
	border:1px solid #bcbec0;
	border-radius:22px;
}

.stage.shared.waiting .share-copy.waiting {
	display:inline-block;
}
.stage.shared.complete .share-btns,
.stage.shared.complete .share-copy.complete {
	display:inline-block;
}
.stage.shared.landing .share-copy.landing {
	display:inline-block;
}


h1.lockup {
	margin-bottom:20px;
	line-height:75px;
}
h1.lockup .for-you {
	display:block;
	font-size:42px;
}



.disclaimer {
	display:block;
	max-width:480px;
	margin:0 auto;
	font-size:14px;
	color:#656565;
}




.error-info {
	position:absolute;
	top:-40px;
	width:100%;
	margin-top:10px;
	visibility:hidden;
	opacity:0;
	color:#d21616;
	font-size:15px;
	transition:opacity 250ms;
}
.show-errors .error-info {
	visibility:visible;
	display:block;
	opacity:1;
}

.share-options {
	margin:20px 0;
}
.share-options .btn-icon {
	width:30px;
	height:30px;
	margin:0px 6px;
	border:0px;
	border-radius:0px;
}
.share-options .btn-icon:first-child {
	margin-left:0px;
}
.share-options .btn-icon:last-child {
	margin-right:0px;
}
.share-options .btn-icon:before,
.share-options .btn-icon:after {
	width:25px;
	height:25px;
	top:2px;
	left:2px;
}
.share-options .btn-icon:hover,
.share-options .btn-icon:focus {
	background:rgba(0,0,0,0);
}


/* footer */

#footer .wrap {
	color:#6c6c6c;
	font-size:13px;
	line-height:20px;
	letter-spacing:0.1em;
	text-align:center;
	padding:0px 20px;
}
#footer .wrap a {
	display:inline-block;
	color:#6c6c6c;
	text-decoration:none;
	transition:color 300ms;
}
#footer .wrap a:hover {
	color:#ec2b2c;
	text-decoration:underline;
}



/* layout elements */


#layout-elements {
	position:absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	display:block;
	opacity:1;
	z-index:0;
	overflow:hidden;
}
#layout-elements .left {
	position:absolute;
	bottom:0;
	right:50%;
	margin-right:750px;
}
#layout-elements .right {
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:750px;
}
#layout-elements .left img,
#layout-elements .right img {
	position:absolute;
	transition:.7s;
	transition-timing-function:ease;
}
#layout-elements .left .dots {
	left:10px;
	bottom:110px;
}
#layout-elements .right .dots {
	right:-10px;
	bottom:230px;
	transition-delay:.1s;
}
#layout-elements .layout-img {
	box-shadow:0 0 20px rgba(0,0,0,.3);
}
#layout-elements .left ._1 {
	width:360px;
	height:230px;
	left:60px;
	bottom:90px;
	z-index:2;
	transition-delay:.3s;
}
#layout-elements .left ._2 {
	width:400px;
	height:260px;
	left:-10px;
	bottom:280px;
	transition-delay:.2s;
}
#layout-elements .right ._3 {
	width:400px;
	height:220px;
	right:60px;
	bottom:90px;
	z-index:2;
	transition-delay:.3s;
}
#layout-elements .right ._4 {
	width:400px;
	height:250px;
	right:-20px;
	bottom:250px;
	transition-delay:.2s;
}
.loading #layout-elements .left img,
.on-shared #layout-elements .left img {
	transform:translateX(-300px);
	opacity:0;
}
.loading #layout-elements .right img,
.on-shared #layout-elements .right img {
	transform:translateX(300px);
	opacity:0;
}

@media screen and (max-width:979px) {
	#layout-elements {
		display:none;
	}
	#header .social-links {
		top:55px;
		left:40px;
	}
	#header .logo {
		top:30px;
	}
	#header .reality-audio {
		width:240px;
		height:48px;
		top:44px;
		right:30px;
	}
	#main {
		padding-top:190px;
	}
	body.on-shared #main,
	body.on-intro #main {
		padding-top:160px;
	}
	#content {
		height:auto;
	}
}

@media screen and (max-width:767px) {
	body {
		min-height:100px;
	}
	#header .social-links {
		top:5px;
		left:10px;
		right:10px;
		text-align:center;
	}
	#header .logo {
		width:60px;
		height:60px;
		left:30px;
		top:30px;
		margin-left:0;
	}
	#header .reality-audio {
		width:240px;
		height:48px;
		top:35px;
		right:30px;
	}
	#main {
		padding-top:180px;
		padding-left:20px;
		padding-right:20px;
		padding-bottom:120px;
	}
	body.on-shared #main,
	body.on-intro #main {
		padding-top:140px;
	}
	body.on-shared #content {
		width:100%;
	}
	.stage.shared {
		width:100%;
	}
	.stage.shared .share-btns {
		margin-right:0px;
		margin-bottom:10px;
	}
	.stage.shared .share-copy.complete {
		text-align:center;
	}
	.stage.shared .cta {
		width:80%;
	}
}

@media screen and (max-width:639px) {
	#content {
		width:100%;
	}
	#footer .wrap {
		font-size:11px;
	}
}

@media screen and (max-width:519px) {
	h1.lockup {
		font-size:72px;
		line-height:60px;
	}
	#imgtool .input-wrap {
		margin-bottom:10px;
	}
	#imgtool .input-wrap.editing {
		margin-bottom:50px;
	}
	.stage.shared .shared-video {
		border-width:10px;
	}
	.stage.shared .shared-video .btn-play:before {
		width:50px;
		height:50px;
		margin-top:-25px;
		margin-left:-25px;
	}
	.stage.shared .shared-video .btn-play:after {
		width:25px;
		height:25px;
		margin-top:-12px;
		margin-left:-12px;
		background-size:238px 25px;
		background-position:-213px;
	}
}

@media screen and (max-width:419px) {
	#main {
		padding-top:160px;
		padding-left:10px;
		padding-right:10px;
	}
	body.on-shared #main,
	body.on-intro #main {
		padding-top:120px;
	}
	#header .logo {
		width:40px;
		height:40px;
		left:10px;
		top:35px;
	}
	#header .reality-audio {
		width:200px;
		height:40px;
		top:35px;
		right:10px;
	}
	textarea,
	input,
	select,
	.hs-select .sel-val {
		font-size:12px;
	}
	.input-wrap {
		max-width:300px;
	}
	.input.message {
		width:300px;
	}
	.stage.shared .shared-video {
		border-width:5px;
	}
	.stage.shared.landing .share-copy.landing {
		width:80%;
	}
}