a,
img {
	outline: none;
	border: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

div,
table {
	position: relative;
	z-index: 1;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

main,
article,
aside,
hgroup,
nav,
menu,
section,
summary,
details,
figcaption,
figure,
mark {
	display: block;
	position: relative;
	z-index: 1;
}

p {
	margin-bottom: 20px;
}

b,
strong {
	font-weight: normal;

}

.hidden {
	border: 0 !important;
	height: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	visibility: hidden !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

.invisible {
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}

.b0 {
	margin-bottom: 0px !important;
}

.b10 {
	margin-bottom: 10px !important;
}

.b20 {
	margin-bottom: 20px !important;
}

.b30 {
	margin-bottom: 30px !important;
}

.b40 {
	margin-bottom: 40px !important;
}

.b50 {
	margin-bottom: 50px !important;
}

.b60 {
	margin-bottom: 60px !important;
}

.b70 {
	margin-bottom: 70px !important;
}

.w5 {
	width: 5%;
}

.w10 {
	width: 10%;
}

.w20 {
	width: 20%;
}

.w30 {
	width: 30%;
}

.w40 {
	width: 40%;
}

.w50 {
	width: 50%;
}

.w60 {
	width: 60%;
}

.w70 {
	width: 70%;
}

.w80 {
	width: 80%;
}

.w90 {
	width: 90%;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

.top {
	vertical-align: top;
}

.middle {
	vertical-align: middle;
}

.bottom {
	vertical-align: bottom;
}

.middle {
	line-height: 0;
	font-size: 0;
}

.middle>.in,
.middle:before {
	display: inline-block;
	vertical-align: middle;
}

.middle:before {
	content: "";
	width: 0;
	height: 100%;
}

.middle>.in {
	line-height: 30px;
	font-size: 16px;
}

.nowrap {
	white-space: nowrap;
}

.red {
	color: #ce1e47;
}

#ribbon,
#ribbon svg {
	border: 0;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
}

#ribbon {
	overflow: hidden;
	height: 0;
	cursor: pointer;
	-webkit-transition: background 0.5s ease;
	transition: background 0.5s ease;
}

#ribbon svg {
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.body {
	width: 100%;
	height: 100vh;
	position: relative;
}

#root {
	width: 100%;
	height: 100vh;
	position: relative;
}

.content {
	width: 90%;
	margin: 0 auto;
}

.page-bg {
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
}

.contacts-container {
	position: absolute;
	height: 100vh;
	width: 100vw;
	box-sizing: border-box;
	overflow: hidden;
	min-height: 480px;
}

.page-bg .map {
	background: #fff;
	width: 100% !important;
	position: absolute !important;
	left: 0;
	top: 0;
	bottom: -25px;
	z-index: 0;
}

#map {
	filter: grayscale(100%);
}

.page-bg .map svg {
	border: 0;
	overflow: visible;
	position: absolute;
	z-index: 1;
}

.button {
	background: #000000;
	border: 5px solid rgba(0, 0, 0, 1);
	border-radius: 25px;
	box-sizing: border-box;
	display: inline-block;
	min-width: 230px;
	margin: 5px;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
}

.button span,
.button input {
	box-sizing: border-box;
	height: 40px;
	padding: 12px 40px;
	font-family: "museo_semibold";
	font-size: 15px;
}

.button,
.button span,
.button input {
	color: #ffffff;
	cursor: pointer;
}

.button input {
	background: none;
	border: 0;
	outline: none;
	display: block;
	min-width: 220px;
	line-height: 16px\9;
}

.button span {
	display: inline-block;
	line-height: 16px;
}

.button:hover {
	border-color: rgba(255, 255, 255, 0.5);
	-webkit-transform: scale(1.1, 1.1);
	transform: scale(1.1, 1.1);
}

.button.white {
	background: #ffffff;
	border-color: rgba(255, 255, 255, 1);
}

.button.white:hover {
	border-color: rgba(0, 0, 0, 0.5);
}

.button.white,
.button.white span,
.button.white input {
	color: #000000;
}

.button.red {
	background: #ce1e47;
	border-color: rgba(206, 30, 71, 1);
}

.button.red:hover {
	border-color: rgba(255, 255, 255, 0.5);
}

.button.red,
.button.red span,
.button.red input {
	color: #ffffff;
}

.slogan {
	display: flex;
	align-items: center;

	font-size: 36px;
	visibility: hidden;
	position: absolute;
	bottom: 45px;
	left: 5%;
	height: 49px;
}

.slogan svg {
	margin: 0 20px;
}

@media (max-width: 1000px) {
	.slogan {
		text-align: center;
		line-height: 14px;
		font-size: 14px;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		height: auto;
		bottom: 90px;
	}

	.slogan svg {
		margin: 0 10px;
		width: 35px;
	}
}

.page-index .slogan {
	visibility: visible;
}

footer .slogan,
footer .presentation-lnk {
	position: absolute;
	top: -15px;
	z-index: 1;
}

footer .slogan {
	left: 5%;
}

footer .presentation-lnk {
	right: 5%;
}

section.intro {
	overflow: hidden;
	position: absolute;
	left: 5%;
	right: 5%;
	top: 10%;
	bottom: 10%;
	margin-bottom: -25px;
}

section.intro>.content {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: auto;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 0;
	z-index: 10;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

section.intro>.content>.middle {
	max-width: 440px;
	max-height: 100%;
	overflow: auto;
}

section.intro .middle>.in {
	font-size: 15px;
}

section.intro .middle>.in p:last-child {
	margin-bottom: 0;
}

/* FOR CHAPTERS */
.page-anim .page-bg,
.page-anim .page-bg video,
.page-anim header a,
.page-anim header nav.portfolio,
.page-anim footer * {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.page-anim section.intro {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}

.page-anim header .logo:before,
.page-anim header .logo:after {
	-webkit-transition: all 0s ease 0.15s;
	transition: all 0s ease 0.15s;
}

.page-index footer {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	opacity: 1;
}

section.intro.projects .case.unfiltered,
section.intro.projects .case.collapsed,
section.intro.sources .case.unfiltered,
section.intro.sources .case.collapsed {
	display: none !important;
}

section.intro.projects {
	box-sizing: border-box;
	width: 100%;
	height: calc(100vh);
	min-height: calc(100vh);
	margin: 0;
	left: 0;
	right: auto;
	top: 0;
	bottom: auto;
}

.case,
.case-content .screen {
	background: #ffffff;
}

.case {
	box-sizing: border-box;
	min-height: calc(100vh);
	/*padding-bottom: 180px;*/
}

.case-content {
	box-sizing: border-box;
	min-width: 1100px;
	min-height: calc(100vh);
	overflow: hidden;
	line-height: 17px;

	font-size: 15px;
	color: #000000;
}

.case .case-content {
	padding-top: 60px;
}

.case .case-content .screen0 {
	position: relative;
}

.case-content .middle>.in {
	line-height: 17px;
	font-size: 15px;
}

.case-content .screen .content:after,
.case-content .clear:after,
.case-info:after {
	content: "";
	display: block;
	width: 100%;
	height: 0;
	clear: both;
}

.case-content .bg,
.case-content .screenshot,
.case-content .screenshot-mob,
.case-content .screenshot-phone,
.case-content .image,
.case-content .slider .item,
.case-content .bg div,
.case-content .screenshot div,
.case-content .screenshot-mob div,
.case-content .screenshot-phone div,
.case-content .image div,
.case-content .slider .item div {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

.case-content .screenshot div,
.case-content .screenshot-mob div,
.case-content .screenshot-phone div,
.case-content .image div {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.case-content .bg,
.case-content .bg div,
.case-content .slider .item div {
	background-size: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

/* .case-content .bg video {
	display: block;
	width: auto !important;
	height: auto !important;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
} */
.case-content .bg.fixed div,
.case-content .bg.fixed video {
	position: fixed;
}

.case-content .content.condensed {
	width: 80%;
}

.case-content .content.narrow {
	width: 80%;
	max-width: 1000px;
}

.case-content .screen.h100 {
	height: calc(100vh);
}

.case-content .title {
	margin-bottom: 15px;
	line-height: 27px;
	font-size: 25px;
}

.case-content .text p:last-child {
	margin-bottom: 0;
}

.case-content .text ul {
	list-style: none;
}

.case-content .text ul li {
	padding-left: 35px;
	position: relative;
	z-index: 1;
}

.case-content .text ul li:before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

.case-content .text b {}

.case-content .bubble {
	background: #ffffff;
	border: 3px solid #000000;
	box-sizing: border-box;
	padding: 25px 35px;
	text-align: left;
}

.case-content .bubble>.in {
	color: #333333;
}

.case-content .bubble:before {
	content: "";
	background: #ffffff;
	border: solid #000000;
	width: 40px;
	height: 22px;
	position: absolute;
	z-index: 0;
}

.case-content .bubble.left,
.case-content .bubble.left-top {
	border-radius: 0 15px 15px 15px;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.case-content .bubble.left2,
.case-content .bubble.left-bottom {
	border-radius: 15px 15px 15px 0;
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

.case-content .bubble.left:before {
	border-width: 3px 0 0 4px;
	border-radius: 0 0 1px 0;
	-webkit-transform: skewX(55deg);
	transform: skewX(55deg);
	top: -3px;
	left: -21px;
}

.case-content .bubble .in {
	line-height: 1.2;
}

.case-content .bubble.left-top:before {
	border-width: 4px 0 0 3px;
	border-radius: 1px 0 0 0;
	width: 22px;
	height: 40px;
	-webkit-transform: skewY(45deg);
	transform: skewY(45deg);
	top: -16px;
	left: -3px;
}

.case-content .bubble.left2:before {
	border-width: 0 0 3px 4px;
	border-radius: 0 0 1px 0;
	-webkit-transform: skewX(-55deg);
	transform: skewX(-55deg);
	top: auto;
	bottom: -3px;
	left: -21px;
}

.case-content .bubble.left-bottom:before {
	border-width: 0 0 4px 3px;
	border-radius: 0 0 1px 0;
	width: 22px;
	height: 40px;
	-webkit-transform: skewY(-45deg);
	transform: skewY(-45deg);
	top: auto;
	bottom: -16px;
	left: -3px;
}

.case-content .bubble.right,
.case-content .bubble.right-top {
	border-radius: 15px 0 15px 15px;
	-webkit-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

.case-content .bubble.right2,
.case-content .bubble.right-bottom {
	border-radius: 15px 15px 0 15px;
	-webkit-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
}

.case-content .bubble.right:before {
	border-width: 3px 4px 0 0;
	border-radius: 0 1px 0 0;
	-webkit-transform: skewX(-55deg);
	transform: skewX(-55deg);
	top: -3px;
	right: -21px;
}

.case-content .bubble.right-top:before {
	border-width: 4px 3px 0 0;
	border-radius: 1px 0 0 0;
	width: 22px;
	height: 40px;
	-webkit-transform: skewY(-45deg);
	transform: skewY(-45deg);
	top: -16px;
	right: -3px;
}

.case-content .bubble.right2:before {
	border-width: 0 4px 3px 0;
	border-radius: 1px 0 0 0;
	-webkit-transform: skewX(55deg);
	transform: skewX(55deg);
	bottom: -3px;
	right: -21px;
}

.case-content .bubble.right-bottom:before {
	border-width: 0 3px 4px 0;
	border-radius: 0 0 1px 0;
	width: 22px;
	height: 40px;
	-webkit-transform: skewY(45deg);
	transform: skewY(45deg);
	top: auto;
	bottom: -16px;
	right: -3px;
}

.case-content .screenshot,
.case-content .screenshot-mob {
	overflow: hidden;
}

.case-content .screenshot,
.case-content .screenshot-mob,
.case-content .video {
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
}

.case-content .screenshot {
	border: 1px solid #f2f2f2;
	border-radius: 7px;
}

.case-content .screenshot-mob {
	border-radius: 3px;
}

.case-content .screenshot-phone {
	border-radius: 3px;
}

.case-content .screenshot-phone:before {
	content: "";
	background: url(/img/phone-frame.png) 50% 0 no-repeat;
	background-size: contain;
	border-radius: 45px;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.15);
	width: 368px;
	height: 767px;
	position: absolute;
	left: -29px;
	top: -110px;
	z-index: -1;
}

.case-content .slider {
	width: 100%;
	line-height: 0;
	font-size: 0;
}

.case-content .slider .line {
	width: auto;
	min-width: 100%;
	height: 100%;
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 50%;
}

.case-content .slider .item {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	height: 100%;
}

.case-content .slider .item div {
	white-space: normal;
	line-height: 15px;
	font-size: 13px;
}

.case-content .video[data-movie] {
	width: 892px;
	height: 502px;
	overflow: hidden;
}

.case-content .video[data-movie] video {
	display: block;
	width: 100%;
	height: auto;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}

.case-content .video[data-movie] .video-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.case-content .video .controls {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	opacity: 0;
}

.case-content .video .controls.paused,
.case-content .video:hover .controls {
	opacity: 1;
}

.case-content .video .controls .play {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	cursor: pointer;
}

.case-content .video .controls .play:before,
.case-content .video .controls .play:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}

.case-content .video .controls .play:before {
	background: rgba(0, 0, 0, 0.8);
	border-radius: 50%;
	width: 140px;
	height: 140px;
	margin: -70px 0 0 -70px;
}

.case-content .video .controls .play:after {
	border-color: transparent #ffffff;
	border-width: 0 8px;
	border-style: solid;
	width: 14px;
	height: 34px;
	margin: -17px 0 0 -15px;
}

.case-content .video .controls.paused .play:after {
	border-color: transparent transparent transparent #ffffff;
	border-width: 17px 0 17px 30px;
	width: 0;
	height: 0;
	margin: -17px 0 0 -9px;
}

.case-content .video .controls .sound {
	background: rgba(0, 0, 0, 0.8);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	position: absolute;
	right: 20px;
	bottom: 15px;
	z-index: 2;
	cursor: pointer;
}

.case-content .video .controls .sound:before {
	content: "";
	background: url(/img/mute.png) 0 0 no-repeat;
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}

.case-content .video .controls .sound.muted:before {
	width: 100%;
}

.case-info {
	box-sizing: border-box;
	background: #e1e1e1;
	width: 100%;
	height: 180px;
	padding: 30px 5%;
	font-size: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;
	cursor: pointer;
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	display: none;
}

.case-info:before {
	content: "" !important;
	display: block !important;
	border: solid #000000;
	border-width: 0 0 2px 2px;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 50%;
	margin-left: -17px;
	bottom: 20px;
	z-index: 1;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.case-info:before {
	animation: caseInfo 1s infinite linear;
}

@keyframes caseInfo {
	0% {
		transform: rotate(-45deg) translateX(0px) translateY(0px);
	}

	50% {
		transform: rotate(-45deg) translateX(-5px) translateY(5px);
	}

	100% {
		transform: rotate(-45deg) translateX(0px) translateY(0px);
	}
}

.case-info .next-title,
.case-info .title,
.case-info .all-title {

	font-size: 25px;
}

.case-info .title,
.case-info .tags {
	z-index: 2;
	opacity: 0;
}

.case-info .next-title,
.case-info .all-title {
	width: 100%;
	text-align: center;
	position: absolute;
	left: 0;
	top: 40px;
	z-index: 1;
}

.case-info .all-title {
	display: none;
}

.case-info .title {
	max-width: 60%;
	float: left;
}

.case-info .tags {
	max-width: 40%;
	float: right;
}

.case-info .tags span {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
	font-size: 15px;
	position: relative;
	z-index: 1;
}

.case-info .tags span:before {
	content: "#";
}

.case-info .tags span:after {
	content: "";
	background: #000000;
	height: 2px;
	position: absolute;
	left: 2px;
	right: 0;
	bottom: 4px;
	z-index: 1;
	opacity: 0;
}

.case-info .tags span:hover:after {
	opacity: 1;
}

.case:last-child .case-info:before,
.case.single .case-info:before,
.case.single .case-info .next-title,
.case-expanded .case:last-child .case-info .next-title {
	display: none;
}

.case-expanded .case:last-child .case-info .all-title {
	display: block;
}

.case.load {
	background: #ffffff url(/img/loading.svg) 50% 50% no-repeat;
	max-height: calc(100vh);
	overflow: hidden;
}

.case.load .case-content {
	-webkit-transform: translateY(100px);
	transform: translateY(100px);
	opacity: 0;
}

.case.load .case-info {
	-webkit-transform: scale(1, 0);
	transform: scale(1, 0);
	opacity: 0;
}

.case.load-all {
	background: #ffffff;
}

.case.load-all:after {
	content: "";
	background: rgba(255, 255, 255, 0.25) url(/img/loading.svg) 50% calc(50% - 75px) no-repeat;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 20;
}

.case.preview {
	max-height: calc(100vh);
	overflow: hidden;
	cursor: pointer;
}

.case.preview .case-content {
	padding-top: 0;
}

.case.preview .screen,
.case.preview .screen0 .bg video,
.case.preview .screen0>div,
.case.preview .screen0 .content>div,
.case.preview .screen0 .content:before,
.case.preview .screen0 .content:after {
	opacity: 0;
}

.case.preview .screen0,
.case.preview .screen0 .bg,
.case.preview .screen0 .content,
.case.preview .screen0 .content .logo {
	opacity: 1;
}

.case.preview .screen0 .content {
	top: 50% !important;
	-webkit-transform: translateY(-50%) !important;
	transform: translateY(-50%) !important;
}

.case.preview .screen0 .content .logo {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	bottom: auto !important;
	right: auto !important;
	margin: -75px 0 0 0 !important;
	-webkit-transform: translateX(-50%) translateY(-50%) !important;
	transform: translateX(-50%) translateY(-50%) !important;
}

.case.preview .case-info {
	background: #ffffff;
}

.case.preview .case-info .next-title {
	opacity: 0;
}

.case.preview .case-info .title,
.case.preview .case-info .tags {
	opacity: 1;
}

/* tmp */
.case.error {
	border: dashed #ff0000;
	border-width: 1px 0;
	cursor: default;
}

.case.error .case-content {
	padding: 250px 0 0 0 !important;
	height: 100%;
	text-align: center;
	color: #ff0000;
}

@media (max-width: 648px) {
	section.intro.sources_mobile {
		top: 60px !important;
	}
}

.sources_index .tiles .column .item .title {
	transition: 500ms !important;
}

.sources_index:hover .tiles .column .item .title {
	transform: scale(0.7);
}

.sources_index .tiles .column .item:hover .title {
	transform: scale(1);
}


.page-about .page-bg {
	background-color: #ffffff;
	opacity: 1;
}

.page-about header menu a,
.page-about footer * {
	color: #000000;
}

.page-about header menu a:before {
	border-color: #000000;
}

.page-about header .logo:before {
	background-position: 0 0;
}

.page-about header .logo:after {
	background-position: -120px -40px;
}

.page-about section.intro.about {
	opacity: 1;
	z-index: 1;
}

.page-about section.nav.about {
	opacity: 1;
	z-index: 60;
}

section.nav.about {
	-webkit-user-select: none;
	user-select: none;
	width: 306px;
	height: 306px;
	overflow: hidden;
	position: absolute;
	top: -153px;
	left: 60%;
	margin-left: -153px;
	opacity: 0;
	z-index: -1;
}

section.nav.about:before,
section.nav.about:after,
section.nav.about .labels:before,
section.nav.about .labels:after {
	content: "";
	box-sizing: border-box;
	border-radius: 50%;
	border: 1px solid #e8e8e8;
	position: absolute;
	z-index: -1;
}

section.nav.about:before {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

section.nav.about:after {
	width: 40%;
	height: 40%;
	left: 30%;
	top: 30%;
}

section.nav.about .labels {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

section.nav.about .labels:before {
	width: 22%;
	height: 22%;
	left: 39%;
	top: 39%;
}

section.nav.about .labels:after {
	background: #000000;
	border: 0;
	width: 3%;
	height: 3%;
	left: 48.5%;
	top: 48.5%;
}

section.nav.about .label {
	width: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

section.nav.about .label span {
	display: inline-block;
	min-width: 30px;
	padding-top: 90px;
	text-align: center;
	font-size: 15px;
	color: #d9d9d9;
	cursor: pointer;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

section.nav.about .label:hover span,
section.nav.about .label.active span {
	color: #010101;
}

section.intro.about {
	-webkit-user-select: none;
	user-select: none;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin-bottom: 0;
	cursor: pointer;
}

section.intro.about .splash,
section.intro.about .back,
section.intro.about .back .image,
section.intro.about .back .image div,
section.intro.about .slider,
section.intro.about .slide .bg,
section.intro.about .slide .bg div,
section.intro.about .slide .title,
section.intro.about .slide .title div,
section.intro.about .texts,
section.intro.about .texts .text div {
	background: transparent url(/img/spacer.gif);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

section.intro.about .slide .title div {
	padding-left: 5%;
}

section.intro.about .splash {
	background: #ffffff;
	z-index: 10;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}

section.intro.about .back {
	width: auto;
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
}

section.intro.about .back .image {
	width: calc(30vw);
	position: fixed;
}

section.intro.about .back .image div {
	background-position: 50% 100%;
	background-repeat: no-repeat;
	width: 150%;
	left: -25%;
}

section.intro.about .slide,
section.intro.about .texts {
	line-height: 52px;

	font-size: 50px;
}

section.intro.about .slider {
	white-space: nowrap;
	font-size: 0;
	z-index: 20;
}

section.intro.about .slide {
	display: inline-block;
	vertical-align: bottom;
	width: 100%;
	height: 100%;
	white-space: normal;
}

section.intro.about .slide .bg div {
	background: #ffffff;
	padding-left: 1px;
	left: -1px;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

section.intro.about .slide .bg div:last-child {
	left: auto;
	right: -1px;
}

section.intro.about .slide .title {
	overflow: hidden;
}

section.intro.about .slide .title div {
	width: auto;
	height: auto;
	max-width: 45%;
	margin-left: -9px;
	text-transform: uppercase;
	line-height: 112px;
	font-size: 110px;
	left: 0;
	top: auto;
	bottom: 51%;
	-webkit-transform: translateX(calc(-20vw));
	transform: translateX(calc(-20vw));
}

section.intro.about .slide.active+.slide .title div {
	-webkit-transform: translateX(calc(20vw));
	transform: translateX(calc(20vw));
}

section.intro.about .slide .title b {
	display: block;
	margin-left: -3px;
	font-size: 132px;
}

section.intro.about .texts {
	z-index: 20;
}

section.intro.about .texts .text {
	width: 44%;
	height: 200%;
}

section.intro.about .texts .text div {
	width: auto;
	height: auto;
	max-width: 100%;
	top: auto;
	bottom: 55%;
}

section.intro.about .back.active {
	z-index: 5;
}

section.intro.about .texts.active .text {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

section.intro.about.start .splash {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

section.intro.about.start .slider {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}

section.intro.about.start .texts {
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

section.intro.about.start .slide .title {
	-webkit-transform: translateX(-70%) translateY(15%);
	transform: translateX(-70%) translateY(15%);
}

section.intro.about.start .slide .title div,
section.intro.about .slide.active .title div,
.draggable section.intro.about .slide .title div {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

section.intro.about .cursor {
	padding: 23px 0;
	margin: 20px 0 0 20px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	display: none;
}

section.intro.about .cursor div {
	background: #e3e3e3;
	width: 102px;
	height: 3px;
}

section.intro.about .cursor div:before {
	content: "";
	box-sizing: border-box;
	border: solid #e3e3e3;
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	margin-top: -21px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

section.intro.about .cursor .next {
	margin-bottom: 46px;
}

section.intro.about .cursor .next:before {
	border-width: 3px 3px 0 0;
	right: 4px;
}

section.intro.about .cursor .prev:before {
	border-width: 0 0 3px 3px;
	left: 4px;
}

.left-side section.intro.about .cursor .next,
.right-side section.intro.about .cursor .prev,
.right-side section.intro.about .cursor.end .next,
.left-side section.intro.about .cursor.begin .prev {
	display: none;
}



section.intro.contacts {
	overflow: visible;
	top: auto;
	margin-bottom: 0;
	opacity: 1;
	z-index: 233301111;
	display: block;
	position: absolute;
	transition: 0ms;
}

section.intro.contacts .links,
section.intro.contacts .address {
	line-height: 22px;

	color: #000;
	position: absolute;
	bottom: 0;
}

section.intro.contacts .links a,
section.intro.contacts .address a {
	display: inline-block;
	border-bottom: 1px solid;
}

section.intro.contacts .links a:hover,
section.intro.contacts .address a:hover {
	border-bottom: 0;
	padding-bottom: 1px;
}

section.intro.contacts .links {
	left: 0;
}

section.intro.contacts .links a {
	margin: 0 5px;
}

section.intro.contacts .address {
	width: 425px;
	line-height: 48px;
	font-size: 40px;
	right: 0;
}

section.intro.contacts .address a.phone {
	text-decoration: none !important;
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin: 5px 0 0 0;
}

section.intro.contacts .address a.phone * {
	opacity: 1 !important;
}

/* /FOR CHAPTERS */

.body:after {
	content: "";
	background: #ffffff url(/img/loading.svg) 50% 50% no-repeat;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0;
}

.loading .body:after {
	z-index: 40;
	opacity: 1;
}

.loading section {
	opacity: 0 !important;
}

.projectlist {
	padding: 140px 5% 0 5%;
}

.projectlist__line {
	display: flex;
	justify-content: space-between;
}

.market-place video {
	position: absolute;
	top: -85px;
	left: 0;
	right: 0;
	right: 0;
	width: 100%;
	height: 603px;
}

.projectlist .video1 {
	position: absolute;
	top: -400px !important;
	left: -36px !important;
	right: 0 !important;
	right: 0 !important;
	width: 127% !important;
	height: 169vh !important;

}

.projectlist .video2 {
	position: absolute;
	top: -368px !important;
	left: -36px !important;
	right: 0 !important;
	right: 0 !important;
	width: 120% !important;
	height: 1000px !important;
}

.projectlist .video3 {
	position: absolute;
	top: -368px !important;
	left: -36px !important;
	right: 0 !important;
	right: 0 !important;
	width: 120% !important;
	height: 1000px !important;
}

.projectlist .video4 {
	position: absolute;
	top: -368px !important;
	left: -36px !important;
	right: 0 !important;
	right: 0 !important;
	width: 120% !important;
	height: 1000px !important;
}

@media (max-width: 1000px) {
	.projectlist .video3 {
		position: absolute;
		top: -170px !important;
		left: -60px !important;
		right: 0 !important;
		right: 0 !important;
		width: 145% !important;
		height: 553px !important;

	}

	.projectlist .video4 {
		position: absolute;
		top: -170px !important;
		left: -60px !important;
		right: 0 !important;
		right: 0 !important;
		width: 145% !important;
		height: 553px !important;
	}


	.projectlist .video2 {
		position: absolute;
		top: -170px !important;
		left: -60px !important;
		right: 0 !important;
		right: 0 !important;
		width: 145% !important;
		height: 553px !important;

	}

	.projectlist .video1 {
		position: absolute;
		top: -309px !important;
		left: -36px !important;
		right: 0 !important;
		right: 0 !important;
		width: 127% !important;
		height: 124vh !important;


	}
}

.market-place .projectlist__bg {
	padding-top: 28%;
	overflow: hidden;

}

.market-stroke {
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
	line-height: 29px;
	color: #ffffff;

	white-space: nowrap;
	animation: slidein 30s linear infinite;
}

.market-place .projectlist__text {
	bottom: 110px;
}

.market-stroke-wrap {
	overflow: hidden;
	position: relative;
	top: -100px;
}

@keyframes slidein {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(-600%);
	}
}

.scroll-item_100.market-place {
	width: 100%;
	height: auto;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

@media (max-width: 1000px) {
	.scroll-item_100.market-place {
		height: inherit;
		margin-bottom: -30px;
	}

	.market-stroke-wrap {
		top: -81px;
	}

	.market-place video {
		position: absolute;
		top: -185px;
		left: 0;
		right: 0;
		right: 0;
		width: 124%;
		height: 601px;
	}

	.market-place .projectlist__bg {
		padding-top: 0px;
	}
}

.projectlist__line_z {
	position: relative;
	z-index: 2;
}

.projectlist__line>div {
	width: 50%;
	box-sizing: border-box;
}

.projectlist__line>div:first-child {
	padding-right: 20px;
}

.projectlist__line>div:last-child {
	padding-left: 20px;
}

.projectlist__item {
	margin-bottom: 39px;
	display: block;
}

.projectlist__bg {
	width: 100%;
	height: 220px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	margin-bottom: 20px;
}

.projectlist__bg:after {
	content: "";
	display: block;
	background: rgba(0, 0, 0, 0.4);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: 300ms opacity;
	opacity: 0;
	z-index: 4;
}

.projectlist__item:hover .projectlist__bg:after {
	opacity: 1;
}

.projectlist__item.big .projectlist__bg {
	height: 516px;
}

@keyframes pbgfirst {
	0% {
		opacity: 0;
	}

	11% {
		opacity: 0;
	}

	22% {
		opacity: 0;
	}

	33% {
		opacity: 1;
	}

	44% {
		opacity: 1;
	}

	55% {
		opacity: 1;
	}

	66% {
		opacity: 1;
	}

	77% {
		opacity: 1;
	}

	88% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes pbglast {
	0% {
		opacity: 0;
	}

	11% {
		opacity: 0;
	}

	22% {
		opacity: 0;
	}

	33% {
		opacity: 0;
	}

	44% {
		opacity: 0;
	}

	55% {
		opacity: 0;
	}

	66% {
		opacity: 1;
	}

	77% {
		opacity: 1;
	}

	88% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

.projectlist__bg-first {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.projectlist__bg:hover .projectlist__bg-first {
	animation: pbgfirst 1s infinite;
}

.projectlist__bg-last {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.projectlist__bg:hover .projectlist__bg-last {
	animation: pbglast 1s infinite;
}

.projectlist__bg[data-id="1"] {
	background-image: url("/cases/img/home/1.jpg");
}

.projectlist__bg[data-id="1"] .projectlist__bg-first {
	background-image: url("/cases/img/home/1_1.jpg");
}

.projectlist__bg[data-id="1"] .projectlist__bg-last {
	background-image: url("/cases/img/home/1_2.jpg");
}

.projectlist__bg[data-id="2"] {
	background-image: url("/cases/img/home/2.jpg");
}

.projectlist__bg[data-id="3"] {
	background-image: url("/cases/img/home/3.jpg");
}

.projectlist__bg[data-id="4"] {
	background-image: url("/cases/img/home/4.jpg");
}

.projectlist__bg[data-id="5"] {
	background-image: url("/cases/img/home/5.jpg");
}

.projectlist__bg[data-id="6"] {
	background-image: url("/cases/img/home/6.jpg");
}

.projectlist__bg[data-id="7"] {
	background-image: url("/cases/img/home/7.jpg");
}

.projectlist__bg[data-id="7"] .projectlist__bg-first {
	background-image: url("/cases/img/home/7_1.jpg");
}

.projectlist__bg[data-id="7"] .projectlist__bg-last {
	background-image: url("/cases/img/home/7_2.jpg");
}

.projectlist__bg[data-id="8"] {
	background-image: url("/cases/img/home/8.jpg");
}

.projectlist__bg[data-id="9"] {
	background-image: url("/cases/img/home/9.jpg");
}

.projectlist__bg[data-id="10"] {
	background-image: url("/cases/img/home/10.jpg");
}

.projectlist__bg[data-id="11"] {
	background-image: url("/cases/img/home/11.jpg");
}

.projectlist__bg[data-id="12"] {
	background-image: url("/cases/img/home/12.jpg");
}

.projectlist__bg[data-id="13"] {
	background-image: url("/cases/img/home/13.jpg");
}

.projectlist__bg[data-id="14"] {
	background-image: url("/cases/img/home/14.jpg");
}

.projectlist__bg[data-id="15"] {
	background-image: url("/cases/img/home/15.jpg");
}

.projectlist__bg[data-id="16"] {
	background-image: url("/cases/img/home/16.jpg");
}

.projectlist__bg[data-id="17"] {
	background-image: url("/cases/img/home/17.jpg");
}

.projectlist__bg[data-id="18"] {
	background-image: url("/cases/img/home/18.jpg");
}

.projectlist__bg[data-id="19"] {
	background-image: url("/cases/img/home/19.jpg");
}

.projectlist__bg[data-id="20"] {
	background-image: url("/cases/img/home/20.jpg");
}

.projectlist__bg[data-id="21"] {
	background-image: url("/cases/img/home/21.jpg");
}

.projectlist__bg[data-id="22"] {
	background-image: url("/cases/img/home/22_1.jpg");
}

.projectlist__bg[data-id="22"] .projectlist__bg-first {
	background-image: url("/cases/img/home/22_1.jpg");
}

.projectlist__bg[data-id="22"] .projectlist__bg-last {
	background-image: url("/cases/img/home/22_2.jpg");
}

.projectlist__bg[data-id="23"] {
	background-image: url("/cases/img/home/23.jpg");
}

.projectlist__bg[data-id="24"] {
	background-image: url("/cases/img/home/24.jpg");
}

.projectlist__bg[data-id="25"] {
	background-image: url("/cases/img/home/25.jpg");
}

.projectlist__bg[data-id="26"] {
	background-image: url("/cases/img/home/26.jpg");
}

.projectlist__bg[data-id="27"] {
	background-image: url("/cases/img/home/27.jpg");
}

.projectlist__bg[data-id="28"] {
	background-image: url("/cases/img/home/28.jpg");
}

.projectlist__bg[data-id="29"] {
	background-image: url("/cases/img/home/29.jpg");
}

.projectlist__bg[data-id="30"] {
	background-image: url("/cases/img/home/30.jpg");
}

.projectlist__bg[data-id="31"] {
	background-image: url("/cases/img/home/31.jpg");
}

.projectlist__bg[data-id="32"] {
	background-image: url("/cases/img/home/32.jpg");
}

.projectlist__bg[data-id="33"] {
	background-image: url("/cases/img/home/33.jpg");
}

.projectlist__bg[data-id="34"] {
	background-image: url("/cases/img/home/34.jpg");
}

.projectlist__bg[data-id="35"] {
	background-image: url("/cases/img/home/35.jpg");
}

.projectlist__bg[data-id="36"] {
	background-image: url("/cases/img/home/36.jpg");
}

.projectlist__bg[data-id="37"] {
	background-image: url("/cases/img/home/37.jpg");
}

.projectlist__bg[data-id="38"] {
	background-image: url("/cases/img/home/38.jpg");
}

.projectlist__bg[data-id="39"] {
	background-image: url("/cases/img/home/39.jpg");
}

.projectlist__bg[data-id="40"] {
	background-image: url("/cases/img/home/40.jpg");
}

.projectlist__bg[data-id="41"] {
	background-image: url("/cases/img/home/41.jpg");
}

.projectlist__bg[data-id="42"] {
	background-image: url("/cases/img/home/42.jpg");
}

.projectlist__bg[data-id="43"] {
	background-image: url("/cases/img/home/43.jpg");
}

.projectlist__bg[data-id="44"] {
	background-image: url("/cases/img/home/44.jpg");
}

.projectlist__bg[data-id="45"] {
	background-image: url("/cases/img/home/45.jpg");
}

.projectlist__bg[data-id="46"] {
	background-image: url("/cases/img/home/46_poster.jpg");
	overflow: hidden;
}


.projectlist__bg[data-id="46"] video {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 21vw;
	max-height: 21vw;
	border: none;
	outline: none;
}

.scroll-item_100.market-place {
	height: auto;
}

.projectlist__bg[data-id="47"] {
	background-image: url("/cases/img/home/47.jpg");
	overflow: hidden;

}

.active.half {}

.market-place .projectlist__item {
	margin-bottom: 14px;
}

@media (max-width: 1000px) {
	.projectlist__bg[data-id="46"] video {
		min-height: auto;
		max-height: none;
		width: 110vw;
	}

	.scroll-item_100.market-place {
		height: 298px;
	}
}

.projectlist__bg[data-id="46"] img {
	position: absolute;
	left: 24px;
	z-index: 3;
	bottom: 24px;
	width: 150px;
	height: auto;
}



.projectlist__title {
	font-size: 17px;
	line-height: 17px;
}

.projectlist__item:hover .projectlist__title {
	text-decoration: underline;
}

.hals2 {
	position: relative;
	top: -100%;
}

.projectlist__text {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 28px 50px;
	box-sizing: border-box;
	color: #fff;
	font-size: 14px;
	line-height: 17px;
	z-index: 5;
	transition: 300ms opacity, 300ms transform;
	opacity: 0;
	transform: translateY(10px);
}

.projectlist__item:hover .projectlist__text {
	opacity: 1;
	transform: translateY(0);
}

/* FOR ANIMATION */
header menu a:before,
header nav a:before,
header nav span:before,
footer a:before,
.button,
.button *,
.close,
.tags span,
.tags span:before,
.tags span:after,
.case-info:before,
.page-about section.intro.about .cursor .next {
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}

.body:after, header:before, header nav.portfolio,
/*header nav.tags,*/
header nav.portfolio .info.anim .item, section, .page-projects section.intro.projects .case, .page-projects section.intro.projects .case-content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#ribbon.anim,
section.nav.about .labels,
section.intro.about .splash,
section.intro.about .slider,
section.intro.about .slide .bg,
section.intro.about .slide .title,
section.intro.about .texts {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

section.intro.sources .tiles .column,
section.intro.sources .tiles .item,
section.intro.sources .tiles .item .title {
	transition: all 0.5s ease 0.15s;
}

section.intro.sources .tiles .column.active,
section.intro.sources .tiles .item.active,
section.intro.sources .tiles .item.active .title {
	transition: all 0.5s ease;
}

section.intro.about .texts {
	-webkit-transition: all 1s cubic-bezier(0.75, 0, 0, 1);
	transition: all 1s cubic-bezier(0.75, 0, 0, 1);
}

.left-side section.intro.about .texts {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

section.intro.about .slide .title div {
	-webkit-transition: all 1s ease 0.25s;
	transition: all 1s ease 0.25s;
}

.projectlist__item big.hidden {
	opacity: 0;
}

section.intro.about.start .slide .title {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.loading section.intro.sources .tiles .column,
.loading section.intro.sources .tiles .item,
.loading section.intro.sources .tiles .item .title,
.loading section.nav.about .labels,
.loading section.intro.about .splash,
.loading section.intro.about .slider,
.loading section.intro.about .slide .bg,
.loading section.intro.about .slide .title,
.loading section.intro.about .slide .title div,
.loading section.intro.about .texts,
.loading section.intro.about .slide .text,
section.intro.about.starting .splash,
section.intro.about.starting .slider,
section.intro.about.starting .slide .bg,
section.intro.about.starting .slide .title,
section.intro.about.starting .slide .title div,
section.intro.about.starting .texts,
section.intro.about.starting .slide .text,
.draggable section.nav.about .labels,
.draggable section.intro.about .slider,
.draggable section.intro.about .slide .title,
.draggable section.intro.about .texts,
.draggable section.intro.about .slide .text {
	-webkit-transition: all 0s linear !important;
	transition: all 0s linear !important;
}

.draggable section.intro.about .slide .bg {
	-webkit-transition: all 0.01s linear !important;
	transition: all 0.01s linear !important;
}

.loading section.intro {
	-webkit-transition: all 0s ease 0.5s, opacity 0.5s ease 0.25s;
	transition: all 0s ease 0.5s, opacity 0.5s ease 0.25s;
}

section.intro.anim .content,
section.intro.anim .button,
section.intro.anim .button span {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: all 5s ease-out;
	transition: all 5s ease-out;
}

.page-projects section.intro.projects .case-content .parallax-front {
	-webkit-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
}

.page-projects section.intro.projects .case-content .parallax-up {
	-webkit-transform: translateY(-50px);
	transform: translateY(-50px);
}

.page-projects section.intro.projects .case-content .parallax-down {
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
}

.page-projects section.intro.projects .case-content .bubble.parallax-front {
	/*-webkit-transition: none;
	transition: none;
	-webkit-transform: scale3d(.3, .3, .3);
	transform: scale3d(.3, .3, .3);*/
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-webkit-transform: scale(0.3, 0.3);
	transform: scale(0.3, 0.3);
	opacity: 0;
}

.page-projects section.intro.projects .case-content .bubble.parallax-up {
	/*-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);*/
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	opacity: 1;
}

@keyframes bounceIn {

	0%,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
		opacity: 1;
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		opacity: 1;
	}
}

section.nav.about .label {
	-webkit-transition: color 0.5s ease;
	transition: color 0.5s ease;
}

/* /FOR ANIMATION */

@media all and (max-width: 1480px) {

	section.intro.about .slide,
	section.intro.about .texts {
		font-size: 40px;
		line-height: 42px;
	}

	section.intro.about .slide .title div {
		line-height: 92px;
		font-size: 90px;
	}

	section.intro.about .slide .title b {
		font-size: 102px;
	}
}

@media all and (max-width: 1280px) {

	section.intro.about .slide,
	section.intro.about .texts {
		font-size: 30px;
		line-height: 32px;
	}

	section.intro.about .slide .title div {
		line-height: 52px;
		font-size: 50px;
	}

	section.intro.about .slide .title b {
		font-size: 62px;
	}
}

/* FOR MOBILE */
@media all and (max-width: 1000px) {
	section.intro.contacts {
		bottom: 3%;
	}
}

@media all and (max-width: 900px) {

	body,
	.middle>.in {
		line-height: 16px;
		font-size: 14px;
	}

	.body,
	.case-content {
		min-width: 320px;
		min-height: 480px;
	}

	.button {
		min-width: 210px;
	}

	.button span,
	.button input {
		height: 30px;
		padding: 7px 20px;
		font-size: 13px;
	}

	.button:hover {
		-webkit-transform: none;
		transform: none;
	}

	header {
		height: 115px;
		max-height: 115px;
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
	}

	/*временное смещение*/
	header menu.main {
		-webkit-justify-content: space-between;
		justify-content: space-between;
		width: 90%;
		top: 85px;
	}

	header menu.main a {
		font-size: 14px;
		margin-left: 5px;
	}

	header menu.lang {
		width: auto;
		left: 50%;
		right: auto;
		top: 10px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.tags-expanded header.hover .logo {
		opacity: 0;
	}

	header .tags span {
		border-radius: 11px;
		padding: 5px 10px 3px 5px;
		line-height: 10px;
		font-size: 8px;
	}

	header .tags span:after {
		display: none;
	}

	header .tags span.marked {
		margin-right: 5px;
	}

	header nav.portfolio,
	header nav.tags {
		padding-bottom: 16px;
	}

	header nav.portfolio {
		padding-right: 3%;
	}

	header nav.portfolio .info {
		height: 30px;
	}

	header nav.portfolio .info:before,
	header nav.portfolio .info:after {
		content: "";
		width: 25px;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 2;
	}

	header nav.portfolio .info:before {
		background: -moz-linear-gradient(left,
				rgba(255, 255, 255, 1) 30%,
				rgba(255, 255, 255, 0) 100%);
		background: -webkit-linear-gradient(left,
				rgba(255, 255, 255, 1) 30%,
				rgba(255, 255, 255, 0) 100%);
		background: linear-gradient(to right,
				rgba(255, 255, 255, 1) 30%,
				rgba(255, 255, 255, 0) 100%);
		left: 0;
		display: none;
	}

	header nav.portfolio .info:after {
		background: -moz-linear-gradient(left,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 1) 70%);
		background: -webkit-linear-gradient(left,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 1) 70%);
		background: linear-gradient(to right,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 1) 70%);
		right: 0;
	}

	header nav.portfolio .info.scrolled:before {
		display: block;
	}

	header nav.portfolio .info.scrolled-end:after {
		display: none;
	}

	header nav.portfolio .info .item {
		overflow: auto;
	}

	header nav.portfolio .title {
		padding: 0 15px 0 0;
		line-height: 15px;
		font-size: 15px;
	}

	header nav.portfolio .nav {
		width: 48px;
		padding: 0;
	}

	header nav.portfolio .nav span,
	.tags-arrows i {
		width: 24px;
	}

	header nav.portfolio .nav span:before,
	.tags-arrows i:before {
		width: 10px;
		height: 10px;
		top: 13px;
		-webkit-transform: scale(1, 1) rotate(45deg) !important;
		transform: scale(1, 1) rotate(45deg) !important;
	}

	header nav.portfolio .nav .prev:before,
	.tags-arrows .prev:before {
		left: 8px;
	}

	header nav.portfolio .nav .next:before,
	.tags-arrows .next:before {
		right: 8px;
	}

	footer {
		height: 15%;
	}

	footer .slogan {
		text-align: center;
		line-height: 14px;
		font-size: 12px;
		top: 0;
		left: 50%;
		-webkit-transform: translateX(-50%) scale(0, 0);
		transform: translateX(-50%) scale(0, 0);
		display: block;
		align-items: center;
	}

	footer .slogan span {
		white-space: nowrap;
	}

	footer .presentation-lnk {
		top: auto;
		bottom: 20%;
		left: 50%;
		right: auto;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	section.intro {
		top: 30%;
		bottom: 15%;
	}

	section.intro>.content>.middle {
		max-width: 100%;
	}

	section.intro .middle>.in {
		line-height: 15px;
		font-size: 13px;
	}

	.page-index footer .slogan {
		-webkit-transform: translateX(-50%) scale(1, 1);
		transform: translateX(-50%) scale(1, 1);
	}

	.page-projects header:before {
		bottom: -30px !important;
	}

	.page-projects header .logo:before {
		background-position: -220px 0;
	}

	.page-projects header .logo:after {
		background-position: -220px -30px;
	}

	.page-contacts header .logo:after {
		background-position: -166px -30px;
		width: 50px;
		height: 46px;
		bottom: 8px;
	}

	.page-projects header .logo:before {
		background-position: 0 0;
	}

	.page-projects header .logo:after {
		background-position: 0 -30px;
	}

	.page-sources header .logo:after {
		background-position: -55px -30px;
	}

	.page-about header {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}

	.page-about header .logo:after {
		background-position: -110px -30px;
	}

	.page-about.fixed header {
		-webkit-transform: translateY(-80px);
		transform: translateY(-80px);
	}

	.case {
		/*padding-bottom: 120px;*/
	}

	.case-content .content.narrow {
		width: 90%;
	}

	.case-content .middle>.in {
		line-height: 17px;
		font-size: 15px;
	}

	.case-content .text ul li {
		padding-left: 20px;
	}

	.case-content .bubble {
		padding: 15px 20px;
	}

	.case-content .screenshot-phone:before {
		border-radius: 22px;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
		width: 184px;
		height: 383.5px;
		left: -14.5px;
		top: -55px;
	}

	.case-content .video[data-movie] {
		width: 320px;
		height: 180px;
	}

	.case-content .video .controls .play:before {
		width: 70px;
		height: 70px;
		margin: -35px 0 0 -35px;
	}

	.case-content .video .controls .play:after {
		border-width: 0 4px;
		width: 7px;
		height: 16px;
		margin: -8px 0 0 -7px;
	}

	.case-content .video .controls.paused .play:after {
		border-width: 8px 0 8px 15px;
		width: 0;
		height: 0;
		margin: -8px 0 0 -5px;
	}

	.case-content .video .controls .sound {
		width: 25px;
		height: 25px;
		right: 10px;
		bottom: 10px;
	}

	.case-content .video .controls .sound:before {
		background-size: auto 100%;
	}

	.case-info {
		height: 120px;
		padding: 20px 5%;
	}

	.case-info:before {
		width: 25px;
		height: 25px;
		margin-left: -14px;
	}

	.case-info .title,
	.case-info .next-title {
		font-size: 18px;
	}

	.case-info .next-title {
		top: 30px;
	}

	.case-info .tags span {
		font-size: 12px;
	}

	section.intro.sources {
		top: 55px;
		bottom: 0;
		overflow: visible;
		position: relative;
	}

	.page-sources.tags-expanded section.intro.sources {
		top: 55px;
	}

	section.intro.sources .tiles {
		display: block;
		height: auto;
		min-height: 100%;
		/*padding-top: 45px;*/
	}

	section.intro.sources .tiles .column {
		width: 100%;
		display: block;
	}

	section.intro.sources .tiles .column .item {
		height: calc(50vh - 26px);
		min-height: 200px;
	}

	section.intro.sources .tiles .column1 .item1 .title,
	section.intro.sources .tiles .column2 .item2 .title {
		font-size: 40px;
	}

	section.intro.sources .tiles .column1 .item2 .title,
	section.intro.sources .tiles .column3 .item2 .title {
		font-size: 30px;
	}

	section.intro.sources .tiles .column3 .item1 .title {
		font-size: 25px;
	}

	section.intro.sources .tiles .column2 .item1 .title {
		font-size: 20px;
	}

	section.nav.about,
	section.intro.about .splash {
		display: none;
	}

	section.intro.about.start .slider,
	section.intro.about .slide .title,
	section.intro.about .slide .title div {
		-webkit-transform: none !important;
		transform: none !important;
	}

	section.intro.about .slider {
		height: auto;
		top: 90px;
		bottom: 0;
	}

	section.intro.about .slide {
		line-height: 22px;
		font-size: 20px;
	}

	section.intro.about .slide .bg {
		height: 36%;
		-webkit-transition: all 1s ease;
		transition: all 1s ease;
	}

	section.intro.about .slide .bg div {
		background-color: transparent;
	}

	section.intro.about .slide .bg .image {
		overflow: hidden;
		left: 0 !important;
		right: 0 !important;
	}

	section.intro.about .slide .bg .image div {
		background-repeat: no-repeat;
		background-position: 100% 50%;
		background-size: contain;
		height: 218px;
		padding-left: 0 !important;
		left: 0 !important;
		right: 0 !important;
		top: 50% !important;
		margin-top: -109px;
	}

	section.intro.about .slide .title {
		width: auto !important;
		height: auto !important;
		overflow: visible;
		left: 5% !important;
		right: 5% !important;
		top: 100% !important;
		margin-top: -67px;
	}

	section.intro.about .slide .title div {
		max-width: 100%;
		position: relative;
		bottom: auto;
	}

	section.intro.about .slide .title div,
	section.intro.about .slide .title b {
		margin: 0;
		line-height: 45px;
		font-size: 45px;
	}

	section.intro.about .slide .text {
		width: 90%;
		position: absolute;
		left: 5%;
	}

	section.intro.about .cursor {
		padding: 13px 0;
		margin: 0 0 0 -25px;
		top: auto;
		bottom: 10px;
		left: 50%;
	}

	section.intro.about .cursor div {
		width: 50px;
		height: 2px;
	}

	section.intro.about .cursor div:before {
		width: 20px;
		height: 20px;
		margin-top: -10px;
	}

	section.intro.about .cursor .next {
		margin-bottom: 0;
	}

	section.intro.about .cursor .prev {
		margin-top: 21px;
	}

	section.intro.about .cursor.end .prev {
		display: none;
	}

	section.intro.about .cursor .next:before {
		border-width: 2px 2px 0 0;
		right: 2px;
	}

	section.intro.about .cursor .prev:before {
		border-width: 0 0 2px 2px;
		left: 2px;
	}

	section.intro.about .cursor.forward .next {
		opacity: 0;
	}

	section.intro.about .cursor.forward .prev {
		-webkit-animation: arrow-anim 1s ease infinite;
		animation: arrow-anim 1s ease infinite;
	}

	section.intro.about .slide .title div {
		-webkit-transition: all 0s linear !important;
		transition: all 0s linear !important;
	}

	section.intro.contacts {
		bottom: 3%;
	}

	section.intro.contacts .content {
		line-height: 14px;
		font-size: 12px;
	}

	section.intro.contacts .content .bottom a {
		border-bottom: 1px solid !important;
		padding-bottom: 0 !important;
	}

	section.intro.contacts .bottom a.phone {
		margin: 5px 0;
	}

	section.intro.contacts .links {
		text-align: center;
	}

	section.intro.contacts .links a {
		margin: 0;
	}

	section.intro.contacts .address {
		width: auto;
		line-height: 26px;
		font-size: 22px;
		bottom: 120px;
	}

	.body:after {
		background-image: url(/img/mobile/loading.svg);
	}

	.page-projects section.intro.projects .case-content .bubble {
		-webkit-animation: none !important;
		animation: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		opacity: 1 !important;
	}

	.case-content .bg.fixed div,
	.case-content .bg.fixed video {
		position: absolute;
	}

	.projectlist {
		padding-top: 100px;
	}

	.projectlist__line {
		display: block;
	}

	.projectlist__line>div {
		width: auto;
		padding: 0;
	}

	.projectlist__line>div:first-child {
		padding-right: 0;
	}

	.projectlist__line>div:last-child {
		padding-left: 0;
	}

	.projectlist__title {
		font-size: 15px;
		line-height: 15px;
	}

	.projectlist__item {
		margin-bottom: 20px;
	}

	.projectlist__bg {
		margin-bottom: 10px;
	}

	.projectlist__item.big .projectlist__bg {
		height: 220px;
	}

	.page-sources section.intro.sources {
		visibility: visible !important;
		opacity: 1 !important;
	}
}

@media all and (max-width: 320px) {
	.case-content .middle>.in {
		line-height: 15px;
		font-size: 13px;
	}

	section.intro.contacts .address {
		line-height: 24px;
		font-size: 20px;
	}

	section.intro.about .slide {
		line-height: 18px;
		font-size: 16px;
	}

	section.intro.about .slide .title {
		margin-top: -60px;
	}

	section.intro.about .slide .title div,
	section.intro.about .slide .title b {
		line-height: 40px;
		font-size: 40px;
	}
}

@keyframes arrow-anim {
	0% {
		left: 0;
	}

	50% {
		left: -10px;
	}

	100% {
		left: 0;
	}
}

/* /FOR MOBILE */

.l-trigger {
	position: fixed;
	top: 90%;
	opacity: 0;
	pointer-events: none;
}

.intro.sources .case {
	padding-bottom: 0;
}

.page-sources header:before {
	bottom: 0 !important;
}

.page-projects header:before {
	bottom: 0 !important;
}

.page-sources.tags-expanded header:before {
	bottom: -55px !important;
}

.page-sources section.intro.about {
	overflow: hidden;
}

.page-sources .body,
.page-sources .case-content {
	min-width: 320px;
}

.page-sources header.scroll_fixed:before {
	background: #fff;
}

.page-sources.hash-mobile header:before,
.page-sources.hash-mobile header nav.tags {
	background: transparent !important;
}

.page-sources.fixed header:before {
	background: #fff !important;
}

.page-sources.fixed header menu a,
.page-sources.fixed header .tags span {
	color: #000;
}

.page-sources.fixed header menu a:before,
.page-sources.fixed header .tags span.marked {
	border-color: #000;
}

.page-sources.fixed header .tags span:after {
	background: #000;
}

.page-sources.fixed header nav.portfolio .nav span:before,
.hash-mobile .tags-arrows i:before {
	border-color: #000;
}

.page-sources header.scroll_fixed nav.tags {
	background: #fff;
}

header .tags span {
	border-color: transparent;
}

.tags-arrows {
	display: none;
}

@media all and (max-width: 770px) {
	.page-sources.fixed header:before {
		bottom: -80px;
	}
}

.sources-tags-overlay {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 0;
}

@media all and (max-width: 648px) {
	section.intro.about .cursor {
		bottom: 40px;
	}

	.page-sources.fixed header:before {
		bottom: -60px;
	}

	.page-sources.tags-expanded .tags-arrows {
		position: absolute;
		right: 0;
		bottom: -53px;
		padding-right: 3%;
		z-index: 1;
		display: block;
	}

	/*.page-sources.tags-expanded .tags-arrows:before{
		content: '';
		background: -moz-linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);
		background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);
		background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
		width: 80px;
		position: absolute;
		top: -9px;
		bottom: -2px;
		right: 0;
		pointer-events: none;
	}*/
	.page-sources header.hover:before {
		bottom: 0;
	}

	.page-sources .body,
	.page-sources .case-content {
		padding-top: 0;
	}

	.page-sources.tags-expanded header.hover {
		-webkit-transform: translateY(-80px);
		transform: translateY(-80px);
	}

	.page-sources.tags-expanded header.hover:before {
		bottom: -55px;
	}

	.sources-tags {
		/*white-space: nowrap;*/
		overflow: auto;
		top: 0 !important;
	}

	.sources-tags:after {
		content: "";
		display: inline-block;
		width: 50px;
	}

	/*.sources-tags-overlay{overflow: hidden;	height: 55px;}*/
}

#indexCanvas {
	width: 100% !important;
	height: 100% !important;
	cursor: pointer;
	position: absolute;
	transition: 300ms opacity;
}

.fadepage.alts-show #indexCanvas {
	opacity: 0.35 !important;
}

.page-index {
	overflow: hidden;
}

.body.page-index {
	overflow: hidden;
}

#ribbon,
#indexCanvas,
section.intro.about .back.active,
.page-about section.nav.about,
section.intro.sources_index,
section.intro.projects,
.contacts-container,
.projectlist,
.case,
.casenotfound {
	opacity: 0 !important;
	visibility: hidden !important;
}

.fadepage #indexCanvas,
.fadepage #ribbon,
.fadepage section.intro.about .back.active,
.fadepage .page-about section.nav.about,
.fadepage section.intro.sources_index,
.fadepage section.intro.projects,
.fadepage .page-contacts .contacts-container,
.fadepage .projectlist,
.fadepage .case,
.fadepage .casenotfound {
	transition: 500ms opacity, 500ms visibility;
	opacity: 1 !important;
	visibility: visible !important;
}