@font-face {
	font-family: NeoSans;
	src: url("font/c74edeaf658e851e2c71f78b2a28d352.eot");
	src: url("font/c74edeaf658e851e2c71f78b2a28d352.eot?#iefix") format("embedded-opentype"),
	url("font/c74edeaf658e851e2c71f78b2a28d352.woff2") format("woff2"),
	url("font/c74edeaf658e851e2c71f78b2a28d352.woff") format("woff"),
	url("font/c74edeaf658e851e2c71f78b2a28d352.ttf") format("truetype");
}

html, body {
	margin: 0;
	padding: 0;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}
body * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
article, audio, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary, video {
	display: block;
	margin: 0;
}
img, svg {
	vertical-align: middle;
}
a {
	background-color: transparent;
	cursor: pointer;
}
a:active, a:hover {
	outline: 0;
}
b, strong {
	font-weight: bold;
}
p {
	margin: 0;
	padding: 0 0 1em 0;
}
ul {
	margin: 0;
	padding-bottom: 1em;
}
dfn, i {
	font-style: italic;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
}
button {
	display: inline-block;
	padding: 0;
	overflow: visible;
}
button, input ,optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0;
	box-sizing: content-box;
}
button, select {
	text-transform: none;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled], html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
}
input[type="checkbox"], input[type="radio"] {
	vertical-align: middle;
}
input::-webkit-input-placeholder {
	color: #666;
	opacity: .75;
}
input::-moz-placeholder {
	color: #666;
	opacity: .75;
}
input:-ms-input-placeholder {
	color: #666;
	opacity: .75;
}
textarea {
	overflow: auto;
	resize: vertical;
}
textarea::-webkit-input-placeholder {
	color: #666;
	opacity: .75;
}
textarea::-moz-placeholder {
	color: #666;
	opacity: .75;
}
textarea:-ms-input-placeholder {
	color: #666;
	opacity: .75;
}
.clear:after {
	content: ' ';
	display: block;
	clear: both;
	float: none;
	height: 0;
	line-height: 0;
	overflow: hidden;
}

body {
	height: auto;
	font: 500 14px/20px NeoSans, Arial, sans-serif;
	text-align: center;
	color: #333;
	background-color: #fff;
}
body.loading {
	height: calc(100vh + 1px);
}

/* links */
a,
.mail{
	color: #333;
	text-decoration: none;
}
a:hover,
.mail:hover {
	text-decoration: underline;
}
.mail {
	cursor: pointer;
}

/**/
.svgSymbols {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}


/* page */
.page {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	transition: all .6s ease;
}

/* header */
.pageHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 69px;
	background-color: transparent;
	z-index: 5;
	transition: background-color .4s ease;
}
.pageHeader.visible {
	background-color: rgba(0, 0, 0, .75);
}
.logo {
	position: absolute;
	top: -65px;
	left: 30px;
	width: auto;
	height: 60px;
	transition: top .4s ease;
}
.pageHeader.visible .logo {
	top: 5px;
}

/* nav */
.nav {
	position: absolute;
	right: 30px;
	top: 25px;
	opacity: .5;
}
.pageHeader.visible .nav {
	opacity: 1;
}
.burger {
	display: none;
}
.nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav ul li {
	float: left;
	height: 16px;
	padding: 2px 10px 0 10px;
	border-right: 1px solid #ccc;
	line-height: 16px;
	text-align: left;
}
.nav ul li:last-of-type {
	padding-right: 0;
	border-right: 0 none;
}
.nav ul li a {
	text-transform: uppercase;
	color: #ccc;
}
.nav ul li a:hover {
	color: #fff;
}

/* page elements */
.pageSection {
	position: relative;
	min-height: calc(100vh - 210px);
	padding: 140px 0 70px 0;
	overflow: visible;
}
.pageSection h1 {
	display: inline-block;
	margin: 0 0 2rem 0;
	padding: 0 50px .75em 50px;
	font-size: 22px;
	line-height: 28px;
	text-transform: uppercase;
	border-width: 0 0 2px 0;
	border-style: solid;
	border-image: linear-gradient(to right, #fff, #333, #fff);
	border-image-slice: 1;
}
.sectionArticle {
	position: relative;
	width: 1240px;
	margin: 0 auto;
}
.sectionArticle h1 + p {
	padding-bottom: 3rem;
}
.articleBox {
	float: left;
	width: 47%;
	text-align: left;
}
.articleBox:nth-of-type(1) {
	padding-right: 3%;
}
.articleBox:nth-of-type(2) {
	padding-left: 3%;
}
.articleBox h2 {
	margin: 0;
	padding: 0 0 .75em 0;
	font-size: 18px;
	line-height: 26px;
}

/* reel */
.pageSection.reel .sectionArticle {
	height: calc(100vh - 210px);
}
.pageSection.reel iframe {
	height: calc(100vh - 240px - 3.5em);
}

/* start */
.pageSection.start {
	height: 100vh;
	padding: 0;
	background-color: #333;
}
.pageSection.start .sectionArticle {
	width: 100%;
	height: 100vh;
	background: url(img/start.jpg) no-repeat center center / cover;
	overflow: hidden;
}
#startVideo {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;
}
.scrollDown {
	display: block;
	position: absolute;
	bottom: 70px;
	left: 50%;
	width: 40px;
	height: 40px;
	color: #fff;
	background: url(/img/arrow.svg) no-repeat center center;
	transform: translateX(-20px);
	cursor: pointer;
	z-index: 3;
	-webkit-animation: 2s ease-in-out infinite scrollDownAni;
	animation: 2s ease-in-out infinite scrollDownAni;
}
.loader {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: transparent url(img/logo-weiss.svg) no-repeat center center;
	background-size: 20% auto;
	z-index: 2;
	transition: background-color .6s ease .4s, z-index 0s linear 1s;
}
body.loading .loader {
	background-color: #000;
	z-index: 7;
}

/* refList */
.refList {
	padding: 0;
	list-style-type: none;
}
.refList li {
	float: left;
	width: 400px;
	height: 225px;
	margin-bottom: 20px;
	line-height: 24px;
	color: #999;
	background-color: #333;
	cursor: pointer;
}
.refList li:nth-child(3n+2) {
	margin: 0 20px 20px 20px;
}
.refLink figure {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.refLink figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform-origin: top left;
	transform: scale(1) translateX(-50%) translateY(-50%);
	transition: transform .4s ease-in-out;
}
.refLink figure:hover img {
	transform: scale(1.1) translateX(-50%) translateY(-50%);
}
.refLink figure figcaption {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	color: #fff;
	background-color: rgba(33, 33, 33, .75);
	transition: bottom .4s ease-in-out;
}
.refLink figure:hover figcaption {
	bottom: 0;
}
.referenceDia,
.referenceDesc {
	display: none;
}

/* vimeo/youtube/diashow container */
.reference {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(33, 33, 33, .75);
	z-index: 1;
	opacity: 0;
	transform: scale(0);
	transition: transform .4s ease-in-out, opacity .4s ease-in-out, transform-orgin 0s;
}
.reference.visible {
	opacity: 1;
	transform: scale(1);
	z-index: 99;
}
.referenceClose {
	position: absolute;
	top: 20%;
	right: 15%;
	width: 32px;
	height: 32px;
	background: url(img/x.svg) no-repeat center;
	cursor: pointer;
	z-index: 2;
}
.referenceBox {
	position: absolute;
	top: 20%;
	right: 15%;
	bottom: 10%;
	left: 15%;
	background-color: #333;
	box-shadow: 0 0 30px #000;
	z-index: 1;
}
.referenceStage {
	float: left;
	width: 75%;
	background-color: #000;
}
.reference .referenceDia {
	display: block;
	float: left;
	position: relative;
	width: 75%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.referenceDia img {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 1;
	transform-origin: top left;
	transform: translateX(-50%) translateY(-50%);
}
.referenceDia img.top {
	z-index: 89;
}
.referenceDia img.prev {
	z-index: 99;
	transform: translateX(-150%) translateY(-50%);
	transition: transform .4s ease-in-out;
}
.referenceDia img.next {
	z-index: 99;
	transform: translateX(50%) translateY(-50%);
	transition: transform .4s ease-in-out;
}
.referenceBtn {
	display: none;
}
.referenceBtn.visible {
	display: block;
	position: absolute;
	top: calc(50% - 25px);
	width: 50px;
	height: 50px;
	opacity: .4;
	cursor: pointer;
	z-index: 5;
}
.referenceBtn.prev {
	left: 10%;
	transform: rotate(-45deg);
	-webkit-animation: 2s ease-in-out infinite refPrev;
	animation: 2s ease-in-out infinite refPrev;
}
.referenceBtn.prev:before {
	display: block;
	content: '';
	width: 50px;
	height: 50px;
	background: url(img/arrow.svg) no-repeat left center;
	background-size: 50px 25px;
	transform: rotate(90deg);
}
.referenceBtn.next {
	left: calc(10% + ( 9% * 7) - 50px );
	transform: rotate(45deg);
	-webkit-animation: 2s ease-in-out infinite refNext;
	animation: 2s ease-in-out infinite refNext;
}
.referenceBtn.next:before {
	display: block;
	content: '';
	width: 50px;
	height: 50px;
	background: url(img/arrow.svg) no-repeat right center;
	background-size: 50px 25px;
	transform: rotate(-90deg);
}
.reference .referenceDesc {
	display: block;
	float: left;
	width: calc(25% - 60px);
	max-height: calc(80% - 60px);
	padding: 30px;
	overflow-y: auto;
	text-align: left;
	color: #fff;
}
.referenceDesc h2 {
	margin: 0;
	padding: 0 0 .75em 0;
	font-size: 18px;
	line-height: 26px;
}
.referenceDesc a {
	color: #ccc;
}

/* iconList */
.iconList {
	list-style-type: none;
	padding: 1em 0 0 0;
}
.iconList li {
	display: block;
	padding: 4px 50px;
	margin-bottom: 4px;
	line-height: 32px;
	text-transform: uppercase;
	color: #333;
	background: #fff no-repeat 5px 5px;
	background-size: 30px 30px;
	border-radius: 4px;
}
.iconList li.threeD {
	background-image: url(img/icons/3d.svg);
}
.iconList li.vfx {
	background-image: url(img/icons/vfx.svg);
}
.iconList li.cut {
	background-image: url(img/icons/cut.svg);
}
.iconList li.post {
	background-image: url(img/icons/post.svg);
}
.iconList li.direction {
	background-image: url(img/icons/direction.svg);
}
.iconList li.camera {
	background-image: url(img/icons/camera.svg);
}
.iconList li.concept {
	background-image: url(img/icons/concept.svg);
}
.iconList li.production {
	background-image: url(img/icons/production.svg);
}
.iconList li.animation {
	background-image: url(img/icons/animation.svg);
}
.iconList li.shading {
	background-image: url(img/icons/shading.svg);
}
.iconList li.rendering {
	background-image: url(img/icons/rendering.svg);
}

/* about me */
.potrait {
	float: left;
	margin-right: 30px;
	border-radius: 5px;
}

/* customer */
.customersArticle {
	padding-top: 70px;
}
.customerBox {
	position: relative;
	top: 70px;
	width: 100%;
	height: 200px;
	background-color: #333;
	overflow: hidden;
}
.customerList {
	position: relative;
	width: 500%;
	padding: 0;
	list-style-type: none;
	z-index: 3;
	-webkit-animation: 3s linear infinite customerList;
	animation: 3s linear infinite customerList;
}
.customerList:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}
.customerList li {
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 350px;
	height: 200px;
	vertical-align: middle;
	text-align: center;
	overflow: hidden;
	color: #fff;
	background-color: #333;
	transition: all .6s ease-in-out
}
.customerList li.testimonialLink {
	cursor: pointer;
}
.customerList li img {
	display: block;
	margin: 0 auto;
}
.customerList li div {
	display: none;
}
.customerList li.active {
	background-color: #333;
}

/* testomonial */
.testimonial {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	z-index: 3;
	transform: scale(0);
	transition: transform .4s ease-in-out, opacity .4s ease-in-out, transform-orgin 0s;
}
.testimonial.visible {
	opacity: 1;
	transform: scale(1);
}
.testimonialClose {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	cursor: pointer;
}
.testimonialBox {
	position: absolute;
	left: calc(50% - 620px);
	width: 1180px;
	padding: 30px 30px 15px 30px;
	background-color: #ccc;
	border-radius: 5px;
}
.testimonialBox:after{
	display: block;
	width: 0;
	position: absolute;
	bottom: -50px;
	left: 45%;
	content: "";
	border-width: 0 20px 50px 0;
	border-style: solid;
	border-color: transparent #ccc;
}
.testimonialBox blockquote {
	max-height: calc(100vh - 320px);
	margin: 0;
	overflow-y: auto;
}
.testimonialBox span {
	display: block;
	padding-top: .5em;
	font-weight: 700;
}

/* contact */
.pageSection.contact {
	min-height: calc(100vh - 304px);
}
.contactForm {
	position: relative;
	background-color: #fff;
	z-index: 3;
}
.contactForm .message {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0 30px 60px 30px;
	text-align: center;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 0 20px #ccc;
	transform: scale(0);
	transition: transform .4s linear;
}
.contactForm .message.send {
	background: rgba(255, 255, 255, .9) url(img/formsend.gif) no-repeat center center;
	transform: scale(1);
}
.contactForm .message.transmitted {
	transform: scale(1);
}
.contactForm .message.transmitted span:before {
	content: '🙂';
	display: block;
	font-size: 60px;
	line-height: 80px;
	color: #007f00;
}
.contactForm .message.error {
	cursor: pointer;
	transform: scale(1);
}
.contactForm .message.error span:before {
	content: '🙁';
	display: block;
	font-size: 60px;
	line-height: 80px;
	color: #990000;
}
.formRow {
	padding-bottom: 10px;
}
input[type="text"], input[type="email"] {
	display: block;
	width: calc(100% - 2px);
	height: 30px;
	padding: 0;
	text-indent: 5px;
	line-height: 28px;
	background-color: #fff;
	border: 1px solid #333;
}
textarea {
	display: block;
	width: calc(100% - 12px);
	height: 150px;
	padding: 5px;
	background-color: #fff;
	border: 1px solid #333;
}
input[type="submit"] {
	float: right;
	display: block;
	height: 20px;
	padding: 5px 20px;
	line-height: 20px;
	background-color: #fff;
	border: 1px solid #333;
	cursor: pointer;
}
input[type="submit"]:hover {
	background-color: #333;
	color: #fff;
}
.icon {
	display: inline-block;
	width: 36px;
	font-family: Arial, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 26px;
	vertical-align: middle;
}
.social {
	margin-right: 5px;
}
.social:hover {
	text-decoration: none;
}
.social:hover svg path {
	fill: #ccc;
}

/* pageFooter */
.pageFooter {
	width: 100%;
	height: 24px;
	font-size: 12px;
	line-height: 24px;
	text-align: center;
	color: #999;
	background-color: #333;
	border-top: 1px solid #333;
}
.openImprint,
.openPrivacy {
	cursor: pointer;
}

/* imprint + privacy */
.imprint,
.privacy {
	display: none;
	text-align: left;
}
.imprint.visible,
.privacy.visible {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: calc(100% - 60px);
	height: calc(100vh - 60px);
	background-color: #fff;
	border: 30px solid #fff;
	box-shadow: inset 0 0 0 1px #ccc;
	z-index: 99;
}
.imprintHead,
.privacyHead {
	position: relative;
	height: 36px;
	background-color: #333;
}
.imprintHead h3,
.privacyHead h3 {
	margin: 0;
	padding: 0 0 0 30px;
	font-size: 20px;
	line-height: 36px;
	color: #fff;
}
.imprintClose,
.privacyClose {
	position: absolute;
	top: 2px;
	right: 2px;
	height: 32px;
	width: 32px;
	background: url(img/x.svg) no-repeat center;
	cursor: pointer;
}
.imprintBox,
.privacyBox {
	height: calc(100vh - 126px);
	padding: 30px 30px 0 30px;
	overflow-y: auto;
}
.imprintBox h3,
.privacyBox h3 {
	margin: 0;
	padding: 1.5em 0;
	font-size: 20px;
	line-height: 26px;
}
.imprintBox h3:first-of-type,
.privacyBox h3:first-of-type {
	padding-top: 0;
}
.imprintBox h4,
.privacyBox h4 {
	margin: 0;
	padding: 1em 0;
	font-size: 17px;
	line-height: 23px;
}
.imprintBox h3 + h4,
.privacyBox h3 + h4 {
	padding-top: 0;
}
.imprintBox p:last-of-type,
.privacyBox p:last-of-type{
	padding-bottom: 30px;
}

@media screen and (max-width: 1279px) {
	.sectionArticle {
		width: 940px;
	}
	.loader {
		background-size: 40% auto;
	}
	.refList li {
		width: 300px;
		height: 167px;
	}
	.testimonialBox {
		left: calc(50% - 470px);
		width: 940px;
	}
}

@media screen and (max-width: 1023px) {
	.sectionArticle {
		width: 820px;
	}
	.burger {
		position: relative;
		display: block;
		width: 30px;
		height: 20px;
		cursor: pointer;
		z-index: 7;
	}
	.burger span {
		position: absolute;
		left: 0;
		display: block;
		width: 30px;
		height: 1px;
		background-color: #fff;
		border: 1px solid #fff;
		border-radius: 3px;
		transform: rotate(0deg);
		transform-origin: 50% 50%;
		transition: all .4s ease-in-out;
	}
	.burger span:first-of-type {
		top: 0;
	}
	.burger span:nth-of-type(2) {
		top: 9px;
	}
	.burger span:last-of-type {
		top: 18px;
	}
	.nav.visible {
		opacity: 1;
	}
	.nav.visible .burger span:first-of-type {
		top: 9px;
		transform: rotate(-45deg);
	}
	.nav.visible .burger span:nth-of-type(2) {
		width: 0;
		left: 15px;
	}
	.nav.visible .burger span:last-of-type {
		top: 9px;
		transform: rotate(45deg);
	}
	.nav ul {
		display: block;
		position: fixed;
		top: 0;
		left: 100vw;
		width: 100vw;
		z-index: 5;
		transition: all .6s ease-in-out;
	}
	.nav.visible ul {
		left: 0;
		height: 100vh;
	}
	.nav ul li {
		display: block;
		float: none;
		width: 50%;
		height: 22px;
		margin: 1px 0 0 50%;
		padding: 10px;
		line-height: 22px;
		border-right: 0 none;
		background-color: rgba(0, 0, 0, .75);
	}
	.nav ul li:first-of-type {
		margin-top: 70px;
	}
	.nav ul li a {
		display: block;
		width: 100%;
	}
	.articleBox {
		float: none;
		width: 100%;
	}
	.articleBox:nth-of-type(1) {
		padding-right: 0;
	}
	.articleBox:nth-of-type(2) {
		clear: left;
		padding: 70px 0 0 0;
	}
	.loader {
		background-size: 30% auto;
	}
	.refList li {
		width: 400px;
		height: 225px;
	}
	.refList li:nth-child(3n+2) {
		margin: 0 0 20px 0;
	}
	.refList li:nth-child(odd) {
		margin: 0 20px 20px 0;
	}
	.referenceStage {
		float: none;
		width: 100%;
		height: 60%;
	}
	.reference .referenceDia {
		float: none;
		width: 100%;
		height: 60%;
	}
	.referenceBtn.visible {
		top: calc(30% - 25px);
	}
	.referenceBtn.next {
		left: calc(95% - 50px );
	}
	.reference .referenceDesc {
		float: none;
		width: calc(100% - 60px);
		max-height: calc(40% - 60px);
	}
	.testimonialBox {
		left: calc(50% - 300px);
		width: 760px;
	}
}

@media screen and (max-width: 879px) {
	.sectionArticle {
		width: 620px;
	}
	.loader {
		background-size: 40% auto;
	}
	.refList li {
		width: 300px;
		height: 169px;
	}
	.testimonialBox {
		left: calc(50% - 320px);
		width: 560px;
	}
}

@media screen and (max-width: 639px) {
	.sectionArticle {
		width: 420px;
	}
	.refList li {
		width: 200px;
		height: 113px;
	}
	.testimonialBox {
		left: calc(50% - 210px);
		width: 360px;
	}
}

@media screen and (max-width: 439px) {
	.pageSection {
		position: relative;
		min-height: calc(100vh - 210px);
		padding: 140px 0 70px 0;
	}
	.sectionArticle {
		width: calc(100% - 20px);
	}
	.refList li {
		width: 100%;
		height: calc( (100vw / 16) * 9 );
		margin-bottom: 10px;
	}
	.refList li:nth-child(3n+2) {
		margin: 0 0 10px 0;
	}
	.refList li:nth-child(odd) {
		margin: 0 0 10px 0;
	}
	.testimonialBox {
		left: 0;
		width: calc(100% - 60px);
	}
}

@-webkit-keyframes scrollDownAni {
	0% {
		bottom: 50px;
	}
	50% {
		bottom: 30px;
	}
	100% {
		bottom: 50px;
	}
}
@keyframes scrollDownAni {
	0% {
		bottom: 50px;
	}
	50% {
		bottom: 30px;
	}
	100% {
		bottom: 50px;
	}
}

@-webkit-keyframes customerList {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-350px);
	}
}
@keyframes customerList {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-350px);
	}
}

@-webkit-keyframes refPrev {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(15px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes refPrev {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(15px);
	}
	100% {
		transform: translateX(0);
	}
}

@-webkit-keyframes refNext {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-15px);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes refNext {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(-15px);
	}
	100% {
		transform: translateX(0);
	}
}