/*
@-webkit-viewport { width: device-width; }
   @-moz-viewport { width: device-width; }
	@-ms-viewport { width: device-width; }
	 @-o-viewport { width: device-width; }
		@viewport { width: device-width; }
*/
::selection {
	background: #ffc259;
	color: #fff;
}
::-moz-selection {
	background: #ffc259;
	color:#fff;
}
.noselection {
	-webkit-touch-callout: none;
	  -webkit-user-select: none;
	   -khtml-user-select: none;
		 -moz-user-select: none;
		  -ms-user-select: none;
			  user-select: none;
}
::-webkit-input-placeholder {color: #fff;}
		 ::-moz-placeholder {color: #fff; opacity: 1;}
	 :-ms-input-placeholder {color: #fff;}

ARTICLE, ASIDE, DETAILS, FIGCAPTION, FIGURE, FOOTER, HEADER, HGROUP, MAIN, NAV, SECTION, SUMMARY {
	display: block;
}
.animate {
	-webkit-transition: all 0.75s ease-in-out 0.1s;
	   -moz-transition: all 0.75s ease-in-out 0.1s;
		 -o-transition: all 0.75s ease-in-out 0.1s;
			transition: all 0.75s ease-in-out 0.1s;
}
* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
A {
	color: #fff;
	
	-webkit-transition: color 0.2s;
	   -moz-transition: color 0.2s;
		 -o-transition: color 0.2s;
			transition: color 0.2s;
}
.desktop A:hover {
	text-decoration: none;
	color: #ffc259;
}

:focus,
:active {
	outline: 0 none;
}

HTML, BODY {
	min-width: 320px;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #617d8f;
	-webkit-text-size-adjust: none;
}
HTML {
	
}
HTML.fsvs {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
}
BODY {
	font-family: 'Roboto', Arial, Helvetica, Geneva, Verdana, Tahoma, sans-serif;
	font-size: 14px;
	color: #fff;
	overflow-y: scroll;
}
.fsvs BODY {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 9999;
	background-color: #617d8f;
}
#preloader P {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	margin: -24px 0 0;
	text-align: center;
}
#preloader P > B {
	display: inline-block;
	width: 1.3em;
	height: 1.3em;
	background-color: #fff;
	border-radius: 52%;
	margin: 0 2px;
	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
			animation: bouncedelay 1.4s infinite ease-in-out;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}
#preloader P > B:first-child {
	-webkit-animation-delay: -0.32s;
			animation-delay: -0.32s;
}
#preloader P > B:first-child + B {
	-webkit-animation-delay: -0.16s;
			animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0.0) }
			  40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
	0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); }
			  40% { transform: scale(1.0); -webkit-transform: scale(1.0); }
}

.body {
	position: relative;
	width: 1200px;
	height: 100%;
	margin: 0 auto;
}
.dev .body {
	border-left: 1px solid rgba(0,255,255,0.3);
	border-right: 1px solid rgba(0,255,255,0.3);
}
[class^="column-"] {
	position: absolute;
	height: 100%;
	top: 0;
}
.column-1 {
	width: 420px;
	left: 0;
}
.column-2 {
	width: 300px;
	left: 50%;
}
.roundlink {
	position: relative;
	z-index: 1;
}
.roundlink > * {
	position: relative;
	z-index: -1;
}
.roundlink .fa {
	font-size: 1em;
	border: 1px solid #fff;
	border-radius: 52%;
	width: 2.57em;
	height: 2.57em;
	line-height: 2.4em;
	text-align: center;
	
	-webkit-transition: border-color 0.2s;
	   -moz-transition: border-color 0.2s;
		 -o-transition: border-color 0.2s;
			transition: border-color 0.2s;
}
.desktop .roundlink:hover .fa {
	border-color: #ffc259;
}
.nav-click A + A {
	margin-left: 6px;
}

H1, H2, H3 {
	font-family: 'PF_beausans_pro';
	text-transform: uppercase;
	margin: 0;
}
H1 {
	font-size: 3.5em;
	margin-bottom: 0.8em;
	color: #ffc259;
}
H2 {
	font-size: 2em;
	margin-bottom: 0.8em;
	color: #fff;
}
H3 {
	font-size: 1.5em;
	margin-bottom: 0.8em;
	color: #fff;
}

HEADER {
	position: fixed;
	width: 100%;
	height: 100%;
	left: -100%;
	top: 0;
	z-index: 100;
}
HEADER > * {
	position: absolute;
	width: 100%;
	height: 0;
	left: 100%;
}
HEADER .logo {
	top: 4.8%;
	-webkit-transform: translate3d(0, -0.3em, 0);
	   -moz-transform: translate3d(0, -0.3em, 0);
		-ms-transform: translate3d(0, -0.3em, 0);
		 -o-transform:   translate(0, -0.3em);
			transform: translate3d(0, -0.3em, 0);
}
.mobile HEADER .logo.animate {
	-webkit-transition: all 0.5s ease-in-out 1.5s;
	   -moz-transition: all 0.5s ease-in-out 1.5s;
		 -o-transition: all 0.5s ease-in-out 1.5s;
			transition: all 0.5s ease-in-out 1.5s;
}
.mobile HEADER .logo .animate,
.mobile HEADER .slogan .animate {
	-webkit-transition: all 0.5s ease-in-out 1s;
	   -moz-transition: all 0.5s ease-in-out 1s;
		 -o-transition: all 0.5s ease-in-out 1s;
			transition: all 0.5s ease-in-out 1s;
}
.active-slide-1 HEADER .logo {
	top: 44%;
	-webkit-transform: translate3d(0, -11em, 0);
	   -moz-transform: translate3d(0, -11em, 0);
		-ms-transform: translate3d(0, -11em, 0);
		 -o-transform:   translate(0, -11em);
			transform: translate3d(0, -11em, 0);
}
HEADER .logo P {
	position: relative;
	margin: 0;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform:   translate(0, 0);
			transform: translate3d(0, 0, 0);
}
.active-slide-1 HEADER .logo P {
	-webkit-transform: translate3d(50%, 0, 0);
	   -moz-transform: translate3d(50%, 0, 0);
		-ms-transform: translate3d(50%, 0, 0);
		 -o-transform:   translate(50%, 0);
			transform: translate3d(50%, 0, 0);
}
HEADER .logo STRONG {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-left: 6px;
	font-family: 'Neuropol_Medium';
	font-size: 2.1em;
	font-weight: normal;
	line-height: 1.52ex;
	text-transform: lowercase;
	white-space: nowrap;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform:   translate(0, 0);
			transform: translate3d(0, 0, 0);
}
.active-slide-1 HEADER .logo STRONG {
	font-size: 10.5em;
	-webkit-transform: translate3d(-50%, 0, 0);
	   -moz-transform: translate3d(-50%, 0, 0);
		-ms-transform: translate3d(-50%, 0, 0);
		 -o-transform:   translate(-50%, 0);
			transform: translate3d(-50%, 0, 0);
}
HEADER .logo B {
	font-style: inherit;
	font-weight: inherit;
	margin-right: -0.1ex;
	-webkit-transform: translate3d(0, 0, 0);
}
HEADER .logo B + B {
	margin-right: 0;
	margin-left: 0.1ex;
}
HEADER .logo A {
	text-decoration: none;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-transition: none;
	   -moz-transition: none;
		 -o-transition: none;
			transition: none;
}
.desktop HEADER .logo A:hover {
	color: #fff;
}
HEADER .logo SPAN {
	display: block;
	position: relative;
	left: 0;
	font-family: 'PF_beausans_pro';
	font-size: 0;
	line-height: 1;
	font-weight: bold;
	text-align: right;
	text-transform: uppercase;
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
}
.active-slide-1 HEADER .logo SPAN {
	font-size: 2.5em;
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
}
.active-slide-1 HEADER .logo SPAN + SPAN {
	font-size: 1.5em;
	-webkit-transform: translate3d(0, 0, 0);
}

HEADER .slogan,
HEADER .search {
	top: 26%;
	margin-top: -6.3em;
	-webkit-transform: translate3d(0, 0, 0);
}
HEADER .slogan .column-1 {
	-webkit-transform: translate3d(200%, 0, 0);
	   -moz-transform: translate3d(200%, 0, 0);
		-ms-transform: translate3d(200%, 0, 0);
		 -o-transform:   translate(200%, 0);
			transform: translate3d(200%, 0, 0);
}
.active-slide-1 HEADER .slogan .column-1 {
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		 -o-transform:   translate(0, 0);
			transform: translate3d(0, 0, 0);
}
HEADER .slogan P {
	position: absolute;
	right: 0;
	margin: 0;
	padding: 0;
	font-family: 'PF_beausans_pro';
	font-size: 0;
	white-space: nowrap;
	opacity: 0;
	-webkit-transform: translate3d(0, 0, 0);
}
.active-slide-1 HEADER .slogan P {
	font-size: 2em;
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
}

HEADER NAV {
	top: 4.8%;
}
HEADER MENU {
	float: right;
	margin: 0 -1.57em 0 0;
	padding: 0;
	font-family: 'PF_beausans_pro';
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	white-space: nowrap;
}
HEADER MENU LI {
	display: inline-block;
	margin: 0 1.57em;
}
HEADER MENU A {
	display: block;
	padding: 3px;
	margin: -3px;
	text-decoration: none;
}
.mobile HEADER MENU A {
	color: #fff;
}
.slide-1 HEADER MENU LI:nth-child(1) A,
.slide-2 HEADER MENU LI:nth-child(2) A,
.slide-3 HEADER MENU LI:nth-child(3) A,
.slide-4 HEADER MENU LI:nth-child(4) A,
.slide-5 HEADER MENU LI:nth-child(5) A,
.active-slide-1 HEADER MENU LI:nth-child(1) A,
.active-slide-2 HEADER MENU LI:nth-child(2) A,
.active-slide-3 HEADER MENU LI:nth-child(3) A,
.active-slide-4 HEADER MENU LI:nth-child(4) A,
.active-slide-5 HEADER MENU LI:nth-child(5) A {
	color: #ffc259;
}

HEADER .lang {
	position: absolute;
	top: -1em;
	right: -4px;
	margin: 0;
	padding: 0;
	font-family: 'PF_beausans_pro';
	font-weight: bold;
	text-transform: uppercase;
}
HEADER .lang > * {
	display: inline-block;
	width: 3.21em;
	height: 3.21em;
	line-height: 3.21em;
	text-align: center;
}
HEADER .lang SPAN {
	border: 1px solid #fff;
	border-radius: 52%;
}
HEADER .lang A {
	text-decoration: none;
}

HEADER .search {
	
}
HEADER .search FIELDSET {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 32px;
	height: 32px;
	right: -4px;
	border: 0 none;
	overflow: hidden;
}
.searchopened HEADER .search FIELDSET {
	width: 250px;
}
HEADER .search A,
HEADER .search INPUT,
HEADER .search BUTTON {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	height: 32px;
	border: 0 none;
	font-size: 1.5em;
	color: #fff;
	background: transparent;
}
HEADER .search A,
HEADER .search BUTTON {
	width: 32px;
	right: 0;
	cursor: pointer;
	z-index: 1;
}
HEADER .search BUTTON I {
	z-index: -1;
}
HEADER .search INPUT[type="text"] {
	font-family: inherit;
	width: 200px;
	right: 48px;
	border-bottom: 2px solid #fff;
	border-radius: 0;
}
HEADER .search A {
	display: block;
}
.searchopened HEADER .search A {
	height: 0;
}
HEADER .button {
	display: none;
}
HEADER .button BUTTON {
	position: absolute;
	top: 1.5ex;
	right: 0;
	color: #fff;
	font-size: 1.3em;
	background-color: transparent;
	border: 0 none;
	padding: 0;
	margin: 0;
}

MAIN, #fake {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
MAIN {
	position: absolute;
	z-index: 10;
}
#fake {
	position: fixed;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}
.wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
}
.desktop .wrapper {
	-webkit-transition: -webkit-transform 0.75s ease-in-out 0.1s;
	   -moz-transition:    -moz-transform 0.75s ease-in-out 0.1s;
		 	transition:      ms-transform 0.75s ease-in-out 0.1s;
			transition:         transform 0.75s ease-in-out 0.1s;
}
.mobile .wrapper {
	-webkit-transition: -webkit-transform 0.9s ease-in-out 0s;
	   -moz-transition:    -moz-transform 0.9s ease-in-out 0s;
		 	transition:      ms-transform 0.9s ease-in-out 0s;
			transition:         transform 0.9s ease-in-out 0s;
}
.desktop .body .wrapper {
	-webkit-transform: translate3d(0, -400%, 0);
	   -moz-transform: translate3d(0, -400%, 0);
		-ms-transform: translate3d(0, -400%, 0);
			transform: translate3d(0, -400%, 0);
}
.desktop .active-slide-1 .wrapper,
.desktop .active-slide-5 .body .wrapper,
.mobile .active-slide-1 MAIN {
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}
.desktop .active-slide-2 .wrapper,
.desktop .active-slide-4 .body .wrapper,
.mobile .active-slide-2 MAIN {
	-webkit-transform: translate3d(0, -100%, 0);
	   -moz-transform: translate3d(0, -100%, 0);
		-ms-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
}
.desktop .active-slide-3 .wrapper,
.desktop .active-slide-3 .body .wrapper,
.mobile .active-slide-3 MAIN {
	-webkit-transform: translate3d(0, -200%, 0);
	   -moz-transform: translate3d(0, -200%, 0);
		-ms-transform: translate3d(0, -200%, 0);
			transform: translate3d(0, -200%, 0);
}
.desktop .active-slide-4 .wrapper,
.desktop .active-slide-2 .body .wrapper,
.mobile .active-slide-4 MAIN {
	-webkit-transform: translate3d(0, -300%, 0);
	   -moz-transform: translate3d(0, -300%, 0);
		-ms-transform: translate3d(0, -300%, 0);
			transform: translate3d(0, -300%, 0);
}
.desktop .active-slide-5 .wrapper,
.desktop .active-slide-1 .body .wrapper,
.mobile .active-slide-5 MAIN {
	-webkit-transform: translate3d(0, -400%, 0);
	   -moz-transform: translate3d(0, -400%, 0);
		-ms-transform: translate3d(0, -400%, 0);
			transform: translate3d(0, -400%, 0);
}

MAIN SECTION,
#fake I {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
}
#fake INS {
	display: table;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
#fake B {
	display: table-cell;
	width: 12.5%;
	height: 100%;
	border-left: 1px solid rgba(255,255,255,0.1);
}
#fake .body {
	width: 100%;
	margin: 0;
}
#fake [class^="column-"] {
	overflow: hidden;
	width: 25%;
}
#fake .column-1 {
	left: 12.5%;
}
#fake .body .wrapper {
	width: 400%;
}
#fake .column-1 .wrapper {
	left: -50%;
}
#fake .column-2 .wrapper {
	left: -200%;
}
.mobile #fake {
	display: none;
}

FOOTER {
	position: fixed;
	width: 100%;
	height: 0;
	left: 0;
	bottom: 5%;
	z-index: 100;
}
FOOTER P, FOOTER UL {
	margin: 0;
	padding: 0;
	text-align: right;
}
FOOTER .copy {
	margin-top: -5px;
	font-size: 0.8em;
}
FOOTER .socials {
	margin-top: -2em;
}
FOOTER .socials LI {
	display: inline-block;
	margin-left: 6px;
}
FOOTER .socials .roundlink SPAN {
	display: none;
}

#fake I,
.mobile MAIN SECTION {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
#fake I:nth-child(5),
#fake .body I:nth-child(1),
.mobile MAIN SECTION:nth-child(5)  {
	background-image: url('../img/bg_contacts.jpg');
}
#fake I:nth-child(4),
#fake .body I:nth-child(2),
.mobile MAIN SECTION:nth-child(4) {
	background-image: url('../img/bg_clients.jpg');
}
#fake I:nth-child(3),
#fake .body I:nth-child(3),
.mobile MAIN SECTION:nth-child(3) {
	background-image: url('../img/bg_portfolio.jpg');
}
#fake I:nth-child(2),
#fake .body I:nth-child(4),
.mobile MAIN SECTION:nth-child(2) {
	background-image: url('../img/bg_services.jpg');
}
#fake I:nth-child(1),
#fake .body I:nth-child(5),
.mobile MAIN SECTION:nth-child(1) {
	background-image: url('../img/bg_about.jpg');
}

MAIN [class^="column-"] {
	text-align: right;
	height: 62%;
	top: 33%;
	margin-top: -6em;
}
.dev MAIN [class^="column-"] {
	background: rgba(255,255,255, 0.1);
}

.contacts {
	font-family: 'PF_beausans_pro';
	font-weight: bold;
	white-space: nowrap;
}
.contacts P {
	margin: 0;
}
.contacts A {
	text-decoration: none;
	color: #ffc259;
}
.contacts .phone {
	font-size: 3.5em;
}
.contacts .email {
	font-size: 1.5em;
}
ADDRESS {
	margin: 0;
	font-style: normal;
	color: #ffc259;
	line-height: 1.4;
}
ADDRESS SPAN {
	font-size: 0.8em;
}

#about [class^="column-"] {
	height: 100%;
	top: 0;
	margin: 0;
}
#about [class^="column-"] > * {
	position: absolute;
	width: 100%;
	right: 0;
}
#about .unsere {
	height: 23%;
	bottom: 11%;
	margin: 0;
	padding-left: 40px;
	overflow: hidden;
}
#about .unsere DT,
#about .unsere DD {
	position: relative;
	height: 33.3%;
	margin: 0;
	padding: 0;
}
#about .unsere DT {
	width: 5.72em;
	top: 0.3ex;
	float: left;
	clear: left;
	font-family: 'PF_beausans_pro';
	font-size: 2em;
	text-transform: uppercase;
	line-height: 1;
	/* white-space: nowrap; */
}
#about .unsere DD {
	line-height: 1.16;
	padding-left: 14em;
}
#about .contacts {
	bottom: 39%;
	margin-bottom: -4px;
	direction: rtl;
}
#about .contacts .phone {
	display: inline-block;
	margin-right: -0.5ex;
	direction: ltr;
}
#about .feedback {
	margin: 0 0 9px;
	bottom: 30%;
}
#about .feedback .roundlink {
	
}
#about .feedback SPAN {
	display: inline-block;
	vertical-align: middle;
	margin-right: 12px;
	font-family: 'PF_beausans_pro';
	border-bottom: 1px dashed #fff;
	
	-webkit-transition: border-color 0.2s;
	   -moz-transition: border-color 0.2s;
		 -o-transition: border-color 0.2s;
			transition: border-color 0.2s;
}
.desktop #about .feedback .roundlink:hover SPAN {
	border-color: #ffc259;
}
#about .feedback .roundlink .fa {
	vertical-align: middle;
	line-height: 2.5em;
}
#about .feedback .roundlink .fa:before {
	font-size: 1.28em;
}
#about ADDRESS {
	bottom: 21%;
}
#about H1 {
	display: none;
}

.nav-click {
	position: absolute;
	right: 0;
	bottom: 0;
}

#services .services {
	
}
#services .services H2:after {
	content: ' \2014';
	font-weight: normal;
}
.services .box {
	line-height: 1.5;
}
.services .box P {
	margin: 0 0 1.5em;
}
#services .slide-pager {
	position: relative;
	display: table;
	width: 100%;
	height: 51%;
	padding: 0;
	margin: 6px 0 0;
	list-style: none;
	font-family: 'PF_beausans_pro';
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
}
#services .slide-pager LI {
	display: table-row;
	height: 20%;
}
#services .slide-pager A {
	text-decoration: none;
}
.mobile #services .slide-pager A {
	color: #fff;
}
#services .slide-pager A.active {
	color: #ffc259;
}
#services .text-top {
	position: absolute;
	width: 100%;
	margin: 0;
	right: 0;
	top: -12%
}

.bx-wrapper {
	position: absolute;
	left: 0;
	top: 6.3em;
	right: -10px;
	bottom: 3.8em;
	margin: 0;
	max-width: none !important;
	-webkit-overflow-scrolling: touch;
}
.bx-wrapper .bx-viewport {
	left: 0;
	background-color: transparent;
	border: 0 none;
	box-shadow: none;
	min-height: 100%;
	max-height: 100%;
}
.bx-wrapper .bx-viewport > DIV {
	height: 100%;
}
.bx-wrapper .box {
	height: 100%;
	padding-right: 10px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
MAIN .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar {
	left: -4px;
	width: 4px;
	border-radius: 4px;
}
MAIN .scrollbar-macosx > .scroll-element .scroll-bar {
	-webkit-transition: width 0.3s, left 0.3s;
	   -moz-transition: width 0.3s, left 0.3s;
		 -o-transition: width 0.3s, left 0.3s;
			transition: width 0.3s, left 0.3s;
}
MAIN .scrollbar-macosx > .scroll-element.scroll-y .scroll-bar {
	left: -4px;
	width: 4px;
	border-radius: 4px;
}
.desktop MAIN .scrollbar-macosx > .scroll-element.scroll-y:hover .scroll-bar {
	left: -8px;
	width: 8px;
}
.desktop .scrollbar-macosx:hover > .scroll-element .scroll-bar {
	background-color: #1e1f20;
	opacity: 0.3;
}

.circle-click {
	position: relative;
	display: inline-block;
	width: 8.57em;
	height: 8.57em;
	line-height: 8.4em;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	border: 3px solid #fff;
	border-radius: 52%;
	background-color: rgba(255, 255, 255, 0.2);
	text-decoration: none;
	z-index: 1;
	cursor: pointer;
	
	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
		 -o-transition: all 0.2s;
			transition: all 0.2s;
}
.desktop .circle-click:hover {
	color: #ffc259;
	border-color: #ffc259;
}
.circle-click SPAN {
	position: relative;
	display: inline-block;
	line-height: 1.5em;
	vertical-align: middle;
	z-index: -1;
}
.oz {
	margin: 3.5em 0 0;
}

#portfolio .column-1 {
	display: none;
}
.portfolio {
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	overflow: hidden;
	white-space: nowrap;
	direction: rtl;
}
.mobile .portfolio {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}
.dev .portfolio {
	background-color: red;
}
.portfolio .isotope {
	position: relative;
	height: 100%;
}
.portfolio .box {
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	direction: ltr;
	-webkit-transform: translate3d(0, 0, 1);
}
.portfolio .box A,
.portfolio .box IMG {
	display: block;
	color: #fff;
}
.portfolio .box SPAN {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: -100%;
	padding: 1em;
	overflow: hidden;
	font-size: 0.9em;
	white-space: normal;
	background-color: rgba(0,22,44,0.5);
	text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
		 -o-transition: all 0.3s;
			transition: all 0.3s;
}
.desktop .portfolio .box A:hover SPAN {
	bottom: 0;
}
#portfolio .nav-click {
	bottom: auto;
	top: -14%;
}
.mobile #portfolio .nav-click {
	display: none;
}

.clients .box {
	line-height: 1.5;
}
#clients .box IMG {
	display: inline-block;
	max-height: 5em;
	max-width: 11em;
}
#clients .slide-pager {
	position: relative;
	height: 100%;
	top: -14%;
	overflow: hidden;
}
#clients .slide-pager UL {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
	   -moz-transition:    -moz-transform 0.5s ease-in-out;
		 	transition:      ms-transform 0.5s ease-in-out;
			transition:         transform 0.5s ease-in-out;
}
#clients .slide-pager LI {
	position: relative;
	height: 12.5%;
}
#clients .slide-pager A {
	display: inline-block;
	position: relative;
}
#clients .slide-pager IMG {
	display: block;
	max-height: 2.86em;
	max-width: 9.5em;
	opacity: 0.5;
	
	-webkit-transition: opacity 0.2s;
	   -moz-transition: opacity 0.2s;
		 -o-transition: opacity 0.2s;
			transition: opacity 0.2s;
}
#clients .slide-pager A:hover IMG {
	opacity: 0.75;
}
.mobile #clients .slide-pager IMG {
	opacity: 0.5;
}
#clients .slide-pager A.active IMG {
	opacity: 1;
}

#contacts .column-1 {
	z-index: 2;
}
#contacts .contacts {
	padding-top: 1em;
}
#contacts ADDRESS {
	margin-top: 2.2em;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.75);
}
#contacts H3 {
	position: relative;
	margin-top: 1.4em;
	z-index: 10;
}
#contacts FORM {
	display: inline-block;
	width: 21.4em;
	margin-top: 3.5em;
}
#contacts FIELDSET {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0 none;
	z-index: 1;
}
#contacts FIELDSET:before {
	content: '';
	position: absolute;
	width: 36em;
	height: 36em;
	left: -36%;
	top: -46%;
	border-radius: 50%;
	background-color: #537081;
	opacity: 0.8;
	z-index: -1;
}
#contacts INPUT {
	font: inherit;
	width: 100%;
	height: 3em;
	margin-bottom: 1.2em;
	border: 0 none;
	text-align: right;
	color: #fff;
	background-color: transparent;
	border-bottom: 2px solid #fff;
	border-radius: 0;
}
#contacts BUTTON {
	position: absolute;
	right: 0;
	bottom: -12em;
	font-family: inherit;
	font-size: inherit;
}
#contacts INPUT:focus,
#contacts BUTTON:focus {
	outline: 0 none;
}

#modal {
	position: fixed;
	width: 100%;
	height: 100%;
	left: -100%;
	top: 0;
	z-index: 1000;
	background-color: rgba(0,0,0,0.75);
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}
.openedmodal #modal {
	-webkit-transform: translate3d(100%, 0, 0);
	   -moz-transform: translate3d(100%, 0, 0);
		-ms-transform: translate3d(100%, 0, 0);
			transform: translate3d(100%, 0, 0);
}
#modal .column-2 {
	height: auto;
	top: 4%;
	bottom: 4%;
}
#modal .roundlink {
	position: absolute;
	top: 1ex;
	right: 1ex;
	z-index: 9999;
}
#modal .roundlink .fa {
	border-color: transparent;
	background-color: rgba(0,22,44,0.75);
}
#modal .container {
	position: absolute;
	width: 200%;
	height: 100%;
	top: 0;
	right: 0;
	color: #333;
	padding: 1.3em;
	overflow: auto;
	background-color: #fff;
	-webkit-overflow-scrolling: touch;
	-webkit-transform: translate3d(0, 0, 0);
}
#modal .scroll-content {
	-webkit-box-sizing: border-box !important;
	   -moz-box-sizing: border-box !important;
			box-sizing: border-box !important;
}
#modal .container IMG {
	max-width: 100%;
}
#modal .container H2 {
	color: #333;
}

.scrollmouse {
	position: absolute;
	right: 0;
	top: -12em;
	text-align: center;
}
.scrollmouse .xboct {
	display: inline-block;
	height: 1.86em;
	padding-top: 3px;
	vertical-align: top;
}
.scrollmouse .dots {
	width: 1em;
	margin: 0 auto;
}
.scrollmouse .dots A {
	display: block;
	width: 1em;
	height: 1em;
	border: 2px solid #fff;
	border-radius: 50%;
	margin-top: 0.71em;
	text-decoration: none;
}
.active-slide-1 .scrollmouse .dots A:nth-child(1),
.active-slide-2 .scrollmouse .dots A:nth-child(2),
.active-slide-3 .scrollmouse .dots A:nth-child(3),
.active-slide-4 .scrollmouse .dots A:nth-child(4),
.active-slide-5 .scrollmouse .dots A:nth-child(5) {
	background-color: #fff;
}
.scrollmouse I {
	display: none;
	width: 0.428em;
	height: 0.428em;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	
	-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
			transform: rotate(45deg);
}
.active-slide-1 .scrollmouse I {
	display: block;
	-webkit-animation: mouse-scroll 1s infinite;
			animation: mouse-scroll 1s infinite;
}
.mobile .scrollmouse I {
	display: none;
	-webkit-animation: none;
			animation: none;
}
.scrollmouse I:nth-child(1) {
	-webkit-animation-delay: .5s;
			animation-delay: .5s;
}
.scrollmouse I:nth-child(2) {
	-webkit-animation-delay: .75s;
			animation-delay: .75s;
}
.scrollmouse I:nth-child(3) {
	-webkit-animation-delay: 1s;
			animation-delay: 1s;
}
.scrollmouse .mouse {
	height: 2.3em;
	width: 1.46em;
	border-radius: 10px;
	border: 2px solid #fff;
}
.mobile .scrollmouse .mouse {
	visibility: hidden;
}
.scrollmouse B {
	position: relative;
	display: block;
	height: 0.5em;
	width: 4px;
	background: #fff;
	border-radius: 2px;
	margin: 4px auto;
}
.desktop .active-slide-1 .scrollmouse B {
	-webkit-animation: mouse-wheel 1.2s infinite ease-in-out;
			animation: mouse-wheel 1.2s infinite ease-in-out;
}
@-webkit-keyframes mouse-wheel {
	0% {
		-webkit-transform: translate3d(0, 0, 0);
	}
	100% {
		-webkit-transform: translate3d(0, 2px, 0);
	}
}
@keyframes mouse-wheel {
	0% {
		-moz-transform: translate3d(0, 0, 0);
		 -ms-transform: translate3d(0, 0, 0);
		  -o-transform:   translate(0, 0);
			 transform: translate3d(0, 0, 0);
	}
	100% {
		-moz-transform: translate3d(0, 2px, 0);
		 -ms-transform: translate3d(0, 2px, 0);
		  -o-transform:   translate(0, 2px);
			 transform: translate3d(0, 2px, 0);
	}
}
@-webkit-keyframes mouse-scroll {
	  0% {opacity:  0;}
	 50% {opacity: .5;}
	100% {opacity:  1;}
}
@keyframes mouse-scroll {
	  0% {opacity:  0;}
	 50% {opacity: .5;}
	100% {opacity:  1;}
}

#todo {
	position: fixed;
	width: 100%;
	left: 0;
	top: 50%;
	display: none;
	margin: -26px 0 0;
	padding: 20px;
	text-align: center;
	z-index: 9999;
}

#tolog {
	position: fixed;
	display: none;
	left: 0;
	bottom: 0;
	padding: 1em;
	font-size: 1em;
	background-color: #c10;
	color: #fff;
	z-index: 9999;
}


@media only screen and (max-width: 1220px), only screen and (max-height: 800px) {
	BODY {
		font-size: 12px;
	}
	.active-slide-1 HEADER .logo STRONG {
		margin-left: 48px;
	}
	
}

@media only screen and (max-width: 1220px) {
	.body {
		width: 980px;
	}
}

@media only screen and (max-width: 980px) {
	.body {
		width: auto;
		margin: 0 1em;
	}
	.column-1 {
		width: 360px;
	}
	.column-2 {
		width: 260px;
	}
}

@media only screen and (max-width: 980px), only screen and (max-height: 600px) {
	BODY {
		font-size: 11px;
	}
	.active-slide-1 HEADER .logo STRONG {
		font-size: 9.5em;
		margin-left: 24px;
	}
}

@media only screen and (max-width: 760px), only screen and (max-height: 460px) {
	BODY {
		font-size: 10px;
	}
	.active-slide-1 HEADER .logo STRONG {
		font-size: 8.5em;
		margin-left: 12px;
	}
	H1 {
		font-size: 3em;
	}
}

@media only screen and (max-width: 760px) {
	.body {
		width: 580px;
		margin: 0 auto;
	}
	HEADER MENU LI {
		margin: 0 1em;
	}
	.column-1 {
		width: 280px;
	}
	.column-2 {
		width: 200px;
	}
	#about .unsere {
		padding-left: 20px;
	}
}

@media only screen and (max-width: 599px), only screen and (max-height: 439px) {
	.mobile #fake {
		display: block;
		font-size: 0;
		line-height: 0;
		white-space: nowrap;
		-webkit-transform: translate3d(0, 0, 0);
	}
	.mobile #fake INS,
	.mobile #fake .body {
		display: none;
	}
	.mobile MAIN SECTION {
		background: none !important;
	}
	.mobile .wrapper {
		-webkit-transition: none;
		   -moz-transition: none;
			 	transition: none;
	}
	.mobile #fake I {
		display: inline-block;
		width: 100%;
	}
	.mobile #fake I:nth-child(5) {
		background-image: url('../img/bg_contacts.jpg');
	}
	.mobile #fake I:nth-child(4) {
		background-image: url('../img/bg_clients.jpg');
	}
	.mobile #fake I:nth-child(3) {
		background-image: url('../img/bg_portfolio.jpg');
	}
	.mobile #fake I:nth-child(2) {
		background-image: url('../img/bg_services.jpg');
	}
	.mobile #fake I:nth-child(1) {
		background-image: url('../img/bg_about.jpg');
	}
	.mobile #fake .wrapper {
		-webkit-transition: -webkit-transform 0.5s ease-in-out;
		   -moz-transition:    -moz-transform 0.5s ease-in-out;
			 	transition:      ms-transform 0.5s ease-in-out;
				transition:         transform 0.5s ease-in-out;
	}
	
	.bx-wrapper {
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		bottom: auto;
		margin: 0;
		max-width: 100% !important;
	}
	.bx-wrapper .bx-viewport {
		min-height: 0;
		max-height: none;
		margin-bottom: 1em;
	}
	.bx-wrapper .box {
		padding-right: 0;
	}
	
	H1 {
		margin-bottom: 0.5em;
	}
	
	HEADER:before,
	FOOTER:before {
		content: '';
		position: absolute;
		width: 100%;
	}
	HEADER:before {
		height: 60px;
		left: 100%;
		top: 0;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
		background-image:   linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
	}
	FOOTER:before {
		height: 50px;
		left: 0;
		bottom: -2em;
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background-image:   linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	}
	HEADER .logo {
		font-size: 10px;
		top: 1.8em;
	}
	.searchopened HEADER .logo {
		opacity: 0;
	}
	HEADER .button {
		display: block;
	}
	[class^="column-"] {
		position: relative;
		height: auto;
		left: auto;
		width: auto;
	}
	MAIN [class^="column-"] {
		margin: 0;
		height: auto;
		top: auto;
	}
	MAIN .column-1 {
		margin-bottom: 2em;
	}
	FOOTER {
		bottom: 2em;
	}
	FOOTER [class^="column-"] {
		width: 50%;
		float: left;
	}
	FOOTER .socials {
	  margin-top: -1.4em;
	}
	
	#modal .column-2 {
		position: absolute;
		width: 100%;
		left: 0;
		top: 10px;
		bottom: 10px;
	}
	#modal .container {
		width: auto;
	}
	
	HEADER .slogan,
	.scrollmouse {
		display: none;
	}
	
	.mobile HEADER .logo.animate {
		-webkit-transition: all 0.5s ease-in-out 0s;
		   -moz-transition: all 0.5s ease-in-out 0s;
			 -o-transition: all 0.5s ease-in-out 0s;
				transition: all 0.5s ease-in-out 0s;
	}
	
	HEADER NAV {
		width: 16em;
		height: 100%;
		padding: 4em 2em 0 0;
		left: auto;
		top: 0;
		right: 0;
		background-color: rgba(0,0,0,0.75);
		text-align: right;
		
		-webkit-transform: translate3d(0, 0, 0);
		   -moz-transform: translate3d(0, 0, 0);
			-ms-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		
		-webkit-transition: -webkit-transform 0.5s ease-in-out;
		   -moz-transition:    -moz-transform 0.5s ease-in-out;
			 	transition:      ms-transform 0.5s ease-in-out;
				transition:         transform 0.5s ease-in-out;
	}
	.menuopened HEADER,
	.searchopened HEADER {
		z-index: 1000;
	}
	.menuopened HEADER NAV {
		-webkit-transform: translate3d(16em, 0, 0);
		   -moz-transform: translate3d(16em, 0, 0);
			-ms-transform: translate3d(16em, 0, 0);
				transform: translate3d(16em, 0, 0);
	}
	HEADER NAV .body {
		width: auto;
		margin: 0;
	}
	HEADER MENU {
		float: none;
		margin: 0 0 2em;
	}
	HEADER MENU LI {
		display: block;
		margin: 0 0 1em;
	}
	HEADER MENU A {
		display: inline-block;
		font-size: 1.5em;
	}
	
	HEADER .lang {
		position: static;
	}
	
	HEADER .search {
		top: 0;
		margin: 0;
		padding: 1em 0;
	}
	.searchopened HEADER .search {
		height: 100%;
		background-color: rgba(0,0,0,0.75);
		z-index: 1000;
	}
	HEADER .search FIELDSET {
		right: 4em;
	}
	
	MAIN SECTION {
		height: auto;
		min-height: 100%;
		padding: 56px 0 40px;
	}
	MAIN SECTION:after {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 0;
		left: 0;
		bottom: 0;
		border-bottom: 1px dashed #fff;
		opacity: 0.5;
	}
	
	#about [class^="column-"] > * {
		position: static;
		width: auto;
	}
	#about H1 {
		display: block;
	}
	#about .unsere {
		display: inline-block;
		width: 28em;
		height: 10em;
	}
	#about .contacts {
		margin-bottom: 0;
	}
	#about .feedback {
		margin: 2em 0;
	}
	ADDRESS {
		font-size: 1.1em;
	}
	
	.box .text {
		font-size: 1.1em;
	}
	
	#services .column-2:after {
		content: '';
		display: table;
		clear: both;
	}
	#services .text-top,
	#services .slide-pager {
		position: relative;
		right: auto;
		top: auto;
		float: left;
		width: 50%;
	}
	#services .text-top {
		margin-top: -4em;
	}
	#services .slide-pager {
		clear: left;
		height: 8em;
	}
	#services .oz {
		float: right;
		margin: 2em 0 0;
	}

	.nav-click {
		position: static;
	}
	
	#portfolio .column-1 {
		display: block;
	}
	#portfolio .column-2 {
		height: 290px;
	}
	
	#clients .slide-pager UL {
		margin: 0 -0.5em;
	}
	#clients .slide-pager LI {
		display: inline-block;
		margin: 0.5em;
	}
	#clients .nav-pager {
		display: none;
	}
	
	#contacts H3 {
		margin-top: 2em;
	}
	#contacts FORM {
		height: 28em;
		margin-top: 1em;
	}
	#contacts FIELDSET:before {
		width: 32em;
		height: 32em;
		left: -28%;
		top: -36%;
	}
	#contacts BUTTON {
		bottom: -10em;
	}
	#about .unsere {
		height: 11em;
	}
	#about .unsere DT {
		font-size: 1.7em;
		margin-bottom: 5px;
	}
	#about .unsere DD {
		padding-left: 10em;
		margin-bottom: 5px;
	}
}

@media only screen and (max-width: 599px) {
	.body {
		width: 360px;
		margin: 0 auto;
	}
}

@media only screen and (max-width: 380px) {
	.body {
		width: auto;
		margin: 0 1em;
	}
}




#msr {
	position: absolute;
	width: 100%;
	height: 1px;
	background: gold;
	left: 0;
	top: 188px;
	z-index: 10000;
	display: none;
}