h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address,a,img{
	margin: 0;
	padding: 0;
}
img{
	border	: none;
}
a img{
	border	: none;
}
p{
	margin	:0px auto 6px auto;
}
a{
	text-decoration		: none !important;
	-webkit-box-sizing	: border-box; 
    -moz-box-sizing		: border-box;    
    box-sizing			: border-box; 
	outline				: none !important;
	color				: #222d33;
}
a:hover{
	text-decoration	: none;
	outline			: none;	
	color			: #222d33;
}
table{
	border			: 0px 0px;
	border-style	: none none none none;
	text-align		: left;
	vertical-align	: top;
	width			: 100%;	
}
td, tr{
	padding			: 0 4px;
	margin			: 0;
	border-style	: none none none none;
	text-align		: left;
	vertical-align	: top;
	valign			: top;
}
input {outline:none;}
div, input, textarea{
	display				: block;
	position			: relative;
	-webkit-box-sizing	: border-box; 
    -moz-box-sizing		: border-box;    
    box-sizing			: border-box; 
}
textarea:hover, 
input[type=text]:hover, 
textarea:active, 
input[type=text]:active, 
textarea:focus, 
input[type=text]:focus,
button:focus,
button:active,
button:hover
{
    outline				: 0px !important;
    -webkit-appearance	: none;
}
*:focus {
    outline	: none;
}

textarea:hover, 
input[type=text]:hover, 
textarea:active, 
input[type=text]:active, 
textarea:focus, 
input[type=text]:focus,
button:focus,
button:active,
button:hover,
textarea, 
input[type=text]
{
	-ms-user-select		: auto;
	-moz-user-select	: auto;
	-webkit-user-select	: auto;
	-o-user-select		: auto;
	user-select			: auto;
}

/* ------------------------------------------------------------------- */

.cleaner{
	display: block;
	clear: both;
	height:1px !important;
	width:100% !important;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner5{ 
	display: block;
	clear: both;
	height:5px !important;
	width:100% !important;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner10{
	display: block;
	clear: both;
	height:10px !important;
	width:100% !important;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner15{
	display: block;
	clear: both;
	height:20px !important;
	width:100% !important;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner20{
	display: block;
	clear: both;
	height:20px !important;
	width:100% !important;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner30{
	display: block;
	clear: both;
	height:30px !important;
	width:100% !important;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner40{
	display: block;
	clear: both;
	height:40px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner50{
	display: block;
	clear: both;
	height:50px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner60{
	display: block;
	clear: both;
	height:60px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}	
.cleaner70{
	display: block;
	clear: both;
	height:70px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner80{
	display: block;
	clear: both;
	height:80px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner90{
	display: block;
	clear: both;
	height:90px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.cleaner100{
	display: block;
	clear: both;
	height:100px;
	width:100%;
	border: 0px !important;
	padding: 0px !important;
	margin: 0px;
}
.left{
	text-align:left;
}
.mobile{
	display: none;
}

a{
	transition			: all 0.1s ease;
	-webkit-transition	: all 0.1s ease;
	-moz-transition		: all 0.1s ease;
	-o-transition		: all 0.1s ease;	
}
h1{
	line-height		: normal;
}
h2{
	font-size		: 40px;
    letter-spacing	: -1px;
	line-height: 40px;
}
h4{
	font-size		: 40px;
    line-height		: 40px;
    font-family		: 'Open Sans', Arial, sans-serif;
    font-weight		: 800;
    margin-bottom	: 30px;
    text-transform	: uppercase;
}
h5{
	font-size		: 24px;
	line-height		: normal;
    color			: #59abe3;
	margin-left		: 20px;
	margin-top		: 20px;
	margin-bottom	: 20px;
}

ul{
	padding-left: 40px;
    font-size: 16px;
}

/* --------------------------------------------------------- */

body, html{	
	width		: 100%;
	overflow-x	: hidden;
	
	font-size	: 20px;
	font-family	: 'Open Sans', Arial, sans-serif;
	font-weight	: 400;
	line-height	: 30px;
	
	color		: #2b3841;
}

/* --------------------------------------------------------- */

#menu{
	display		: block;
	position	: fixed;
	width		: 20vw;
	height		: 100vh;
	background	: #ffffff;
}

#menu .icons{
	display		: none;
}

#menu .logo{
	display		: block;
	position	: absolute;
	
	left		: 50%;
	top			: 5%;
	-ms-transform		: translateX(-50%);
	-webkit-transform	: translateX(-50%);
	-moz-transform		: translateX(-50%);
	transform			: translateX(-50%);	
	
	width		: 70%;
	max-width	: 220px;
	
	font-size	: 12px;
	color		: #686c6f;
	text-align	: center;
	line-height	: 12px;
}
#menu .logo .horizontal{
	display		: none;
}

#menu .logo span{
	margin-top	: 10px;
    display		: block;
}

#menu .items{
	display		: block;
	position	: absolute;
	
	left		: 0px;
	top			: 48%;
	-ms-transform		: translateY(-50%);
	-webkit-transform	: translateY(-50%);
	-moz-transform		: translateY(-50%);
	transform			: translateY(-50%);	
	
	width		: 100%;
	padding		: 0px 30px;
	
	font-size	: 12px;
	line-height	: 12px;
	color		: #686c6f;
	text-align	: center;
	
	-ms-user-select		: none;
	-moz-user-select	: none;
	-webkit-user-select	: none;
	-o-user-select		: none;
	user-select			: none;	
}
#menu .items a{
	font-size	: 24px;
	line-height	: 20px;
}
#menu .items a:hover, #menu .items a.active{
	color		: #26a3f8;
}
#menu .items p{
	margin		: 30px auto;
}

#menu .contacts{
	display		: block;
	position	: absolute;
	
	left		: 50%;
	bottom		: 50px;
	
	-ms-transform		: translateX(-50%);
	-webkit-transform	: translateX(-50%);
	-moz-transform		: translateX(-50%);
	transform			: translateX(-50%);	
	
	width		: 70%;
	max-width	: 220px;
	
	font-size	: 12px;
	color		: #686c6f;
	text-align	: center;
	line-height	: 12px;
}

/* --------------------------------------------------------- */

#content.full{
	display		: block;
    position	: absolute;
    top			: 0px;
	left		: 20vw;	
    bottom		: 0px;	
	width		: 80vw;
}

#content.docSlider, .docSlider-inner{
	width		: 80vw;
	left		: 20vw;		
}

#content .docSlider-inner .inner{
	position	: absolute;
    left		: 0px;
    right		: 0px;
    top			: 0px;
    bottom		: 0px;	
	
	overflow	: hidden;
	text-align	: center;
}

#content .inner .content.center{
	position			: absolute;
    left				: 50%;
    top					: 50%;	
	width				: 80%;
	
	-ms-transform		: translate(-50%, -50%);
	-webkit-transform	: translate(-50%, -50%);
	-moz-transform		: translate(-50%, -50%);
	transform			: translate(-50%, -50%);	
	
	text-align			: center;
}

#content .inner .content.full{
	position	: absolute;
    left		: 50%;
    top			: 50%;
}

#content a{
	color		: #ffea00;
}
#content a:hover{
	color		: #ffffff;
}

#content.full a{
	color		: #59abe3;
}
#content.full a:hover{
	color		: #111111;
}

#portfolio{
	background 			: url(../images/portfolio_bg.jpg) no-repeat center center;
	background-color 	: #007fdc;
	background-size 	: cover;
	
}

#portfolio .title{
	display		: block;
	position	: absolute;
	
	text-align	: center;
	color		: #ffffff;
	
	left		: 50%;
	top			: 50%;
	
	-ms-transform		: translate(-50%, -50%);
	-webkit-transform	: translate(-50%, -50%);
	-moz-transform		: translate(-50%, -50%);
	transform			: translate(-50%, -50%);		
}

#portfolio h1{
	font-family		: 'Anton', sans-serif;
	font-weight		: 400;
	font-size		: 60px;	
	text-transform	: uppercase;
	line-height		: 60px;
}

#portfolio h3{	
	font-size		: 14px;
	line-height: 14px;
	font-family		: 'Open Sans', Arial, sans-serif;
	font-weight		: 400;
	letter-spacing	: 0.15px;
	margin: 5px 0px;
}

#portfolio .mockup{	
	-ms-user-select		: none;
	-moz-user-select	: none;
	-webkit-user-select	: none;
	-o-user-select		: none;
	user-select			: none;
	
	display				: block;
	position			: absolute;	
	
    cursor				: hand;
    cursor				: pointer;
}

#portfolio .mockup_0{	
	width	: 298px;
	height	: 162px;
}

#portfolio .mockup_1{	
	width	: 162px;
	height	: 270px;
}

#portfolio .mockup_2{	
	width	: 189px;
	height	: 320px;
}

#portfolio .mockup_3{	
	width	: 320px;
	height	: 189px;
}

#portfolio video{	
	display			: block;
	position		: absolute;	
}

#portfolio .mockup_overlay{	
	display			: block;
	position		: absolute;	
	left			: 0px;
	right			: 0px;
	top				: 0px;
	bottom			: 0px;
}

#portfolio .mockup_0 .mockup_overlay{	
	background		: url(../images/mockup_phone_0.png) no-repeat center center;
	background-size	: cover;
}

#portfolio .mockup_1 .mockup_overlay{	
	background		: url(../images/mockup_phone_1.png) no-repeat center center;
	background-size	: cover;
}

#portfolio .mockup_2 .mockup_overlay{	
	background		: url(../images/mockup_phone_2.png) no-repeat center center;
	background-size	: cover;
}

#portfolio .mockup_3 .mockup_overlay{	
	background		: url(../images/mockup_phone_3.png) no-repeat center center;
	background-size	: cover;
}

#portfolio .mockup_0 video{	
	left		: 16px;
	top			: 16px;
	width		: 258px;
	height		: 134px;
}

#portfolio .mockup_1 video{	
	left		: 16px;
	top			: 16px;
	width		: 130px;
	height		: 230px;
}

#portfolio .mockup_2 video{	
	left		: 16px;
	top			: 16px;
	width		: 160px;
	height		: 280px;
}

#portfolio .mockup_3 video{	
	left		: 17px;
	top			: 16px;
	width		: 275px;
	height		: 155px;
}

#mockup_0{
	left	: -550px;
	top		: -85px;
}

#mockup_1{
	left	: -270px;
    top		: -370px;
}

#mockup_2{
	left	: -260px;
    top		: 70px;
}

#mockup_3{
	left	: -95px;
    top		: -270px;
}

#mockup_4{
	left	: 240px;
    top		: -340px;
}

#mockup_5{
	left	: 260px;
    top		: -15px;
}

#mockup_6{
	left	: -65px;
    top		: 85px;
}

#mockup_7{
	left	: -425px;
    top		: 100px;
}

#mockup_8{
	left	: -760px;
    top		: 80px;
}

#mockup_9{
	left	: -870px;
    top		: -120px;
}

#mockup_10{
	left	: -460px;
    top		: -400px;
}

#mockup_11{
	left	: -760px;
    top		: -290px;
}

#mockup_12{
	left	: -110px;
    top		: -610px;
}

#mockup_13{
	left	: 80px;
    top		: -540px;
}

#mockup_14{
	left	: -635px;
    top		: -570px;
}

#mockup_15{
	left	: -825px;
    top		: -605px;
}

#mockup_16{
	left	: -450px;
    top		: -580px;
}

#mockup_17{
	left	: 435px;
    top		: -75px;
}

#mockup_18{
	left	: -610px;
    top		: 270px;
}

#mockup_19{
	left	: 630px;
    top		: 120px;
}

#mockup_20{
	left	: -930px;
    top		: 280px;
}

#mockup_21{
	left	: -400px;
    top		: 390px;
}

#mockup_22{
	left	: -70px;
    top		: 280px;
}

#mockup_23{
	left	: 250px;
    top		: -510px;
}

#mockup_24{
	left	: 430px;
    top		: -350px;
}

#mockup_25{
	left	: 430px;
    top		: 125px;
}

#mockup_26{
	left	: 100px;
    top		: 280px;
}

#mockup_27{
	left	: 620px;
    top		: 280px;
}

#mockup_28{
	left	: 590px;
    top		: -230px;
}

#mockup_29{
	left	: 595px;
    top		: -560px;
}

#aboutus .inner{
	background: #edf3fa;
}

#clients .inner{
	background	: #222d33;
	color		: #ffffff;
}
#clients .inner h4{
	color		: #ffffff;
}

.customers>div{
	display				: block;
	position			: relative;
	margin				: 30px auto;
	max-width			: 200px;
	overflow			: hidden;
	height				: 110px;
	background-repeat	: no-repeat;
	background-size		: 1200px 330px;
	
	transition			: filter 3.0s 0.3s ease;
	-webkit-transition	: -webkit-filter 3.0s 0.3s ease;
	-moz-transition		: -moz-filter 3.0s 0.3s ease;
	-o-transition		: -o-filter 3.0s 0.3s ease;	
	
	background-image	: url(../images/customers.png);
}
.customers>div:hover{
	transition			: all 0.5s ease;
	-webkit-transition	: all 0.5s ease;
	-moz-transition		: all 0.5s ease;
	-o-transition		: all 0.5s ease;	
	
	-o-filter			: brightness(150%);
	-moz-filter			: brightness(150%);
	-webkit-filter		: brightness(150%);
	filter				: brightness(150%);	
}

.customer_0{
	background-position:0px 0px;
}  
.customer_1{
	background-position:-200px 0px;
}    
.customer_2{
	background-position:-400px 0px;
} 
.customer_3{
	background-position:-600px 0px;
}  
.customer_4{
	background-position:-800px 0px;
}  
.customer_5{
	background-position:-1000px 0px;
}  
.customer_6{
	background-position:0px -110px;
}  
.customer_7{
	background-position:-200px -110px;
}    
.customer_8{
	background-position:-400px -110px;
}  
.customer_9{
	background-position:-600px -110px;
}  
.customer_10{
	background-position:-800px -110px;
}  
.customer_11{
	background-position:-1000px -110px;
}  
.customer_12{
	background-position:0px -220px;
}  
.customer_13{
	background-position:-200px -220px;
}    
.customer_14{
	background-position:-400px -220px;
}  
.customer_15{
	background-position:-600px -220px;
}  
.customer_16{
	background-position:-800px -220px;
}  
.customer_17{
	background-position:-1000px -220px;
}  

#jobs {
	background	: #26a3f8;
    color		: #ffffff;
}
#jobs .inner .content.center{
	text-align	: left;
}
#jobs h4{
	width:100%;
	text-align:center;
}
#jobs h5{
	font-size		: 30px;
    line-height		: 30px;
	color			: #ffea00;	
	margin-left		: 0px;
	margin-bottom	: 10px;
}
#jobs span{
	font-size		: 12px;
    padding-right	: 10px;
}

#contacts .inner{
	background		: #edf3fa;
}
#contacts h4{
	margin-bottom	: 10px;
}
#contacts h5{
	font-size		: 24px;
	font-weight		: normal;
	margin-bottom	: 50px;
}

#contacts .inner .content.center{
	max-width		: 700px;
	margin			: 0px auto;
}

.form_input, .form_input>input, .form_input>textarea, #form_submit{
	display				: block;
	position			: relative;
	width				: 100%;
	
	transition			: all 0.5s ease;
	-webkit-transition	: all 0.5s ease;
	-moz-transition		: all 0.5s ease;
	-o-transition		: all 0.5s ease;		
}
.form_input>input, .form_input>textarea{
	border				: 2px solid #ffffff;	
	padding				: 20px 20px 20px 50px;	
	-webkit-box-shadow	: 0px 10px 34px 0px rgba(0,0,0,0.05);
	-moz-box-shadow		: 0px 10px 34px 0px rgba(0,0,0,0.05);
	-ms-box-shadow		: 0px 10px 34px 0px rgba(0,0,0,0.05);
	-o-box-shadow		: 0px 10px 34px 0px rgba(0,0,0,0.05);
	box-shadow			: 0px 10px 34px 0px rgba(0,0,0,0.05);	
	font-size			: 16px;
}
.form_input path{
	fill:#cecece;	
	transition:         all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-o-transition:      all 0.5s ease;	
}
.form_input:hover path, .form_input:focus path{
	fill	: #222d33;	
}

#form_submit{
	width				: 90%;
    max-width			: 340px;
			
    background			: #0090e2;
    color				: #ffffff;
		
    text-align			: center;
    text-transform		: uppercase;
		
	letter-spacing		: 3px;
    padding				: 20px;
	margin				: 40px auto 0px auto;
		
    cursor				: hand;
    cursor				: pointer;
    
	transition			: all 0.5s ease;
    -webkit-transition	: all 0.5s ease;
    -moz-transition		: all 0.5s ease;
    -o-transition		: all 0.5s ease;
    
	-webkit-border-radius	: 50px;
    -moz-border-radius		: 50px;
    border-radius			: 50px;
}

#form_submit:hover{
	-o-filter: 		brightness(115%);
	-moz-filter: 	brightness(115%);
	-webkit-filter: brightness(115%);
	filter: 		brightness(115%);	
}


#contacts .icon{
	position:absolute;
	display:block;
	left: 10px;
    top: 16px;
    width: 30px;
	height:30px;
	fill:#949ca0;
	
	transition:         all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition:    all 0.5s ease;
	-o-transition:      all 0.5s ease;		
}

input::-webkit-input-placeholder       {
	font-size:12px;
	font-weight:300;
	color:#949ca0;
	opacity: 1;
	transition:         all 0.1s ease;
	-webkit-transition: all 0.1s ease;
	-moz-transition:    all 0.1s ease;
	-o-transition:      all 0.1s ease;	
}
input::-moz-placeholder                {
	font-size:12px;
	font-weight:300;
	color:#949ca0;
	opacity: 1;
	transition:         all 0.1s ease;
	-webkit-transition: all 0.1s ease;
	-moz-transition:    all 0.1s ease;
	-o-transition:      all 0.1s ease;		
}
input:-moz-placeholder                 {
	font-size:12px;
	font-weight:300;
	color:#949ca0;
	opacity: 1;
	transition:         all 0.1s ease;
	-webkit-transition: all 0.1s ease;
	-moz-transition:    all 0.1s ease;
	-o-transition:      all 0.1s ease;	
}
input:-ms-input-placeholder            {
	font-size:12px;
	font-weight:300;
	color:#949ca0;
	opacity: 1;
	transition:         all 0.1s ease;
	-webkit-transition: all 0.1s ease;
	-moz-transition:    all 0.1s ease;
	-o-transition:      all 0.1s ease;	
}
input:focus::-webkit-input-placeholder {
	opacity: 0;
}
input:focus::-moz-placeholder          {
	opacity: 0;
}
input:focus:-moz-placeholder           {
	opacity: 0;
}
input:focus:-ms-input-placeholder      {
	opacity: 0;
}


.form_input.error>input{
	border-color:#ea8888;
}
.form_input.error .icon, .form_input.error:hover .icon, .form_input.error:focus .icon{
	fill:#ea8888 !important;	
}

#form{
	width:100%;
	transition:         all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition:    all 0.2s linear;
	-o-transition:      all 0.2s linear;	
}
#formDispatch{
	position	: absolute;
	left		: 0px;
	top			: 0px;
	bottom		: 0px;
	
	visibility	: hidden;
	width		: 100%;
	min-height	: 120px;
	
	transition:         all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition:    all 0.2s linear;
	-o-transition:      all 0.2s linear;	
}
#formSuccess{
	position	: absolute;
	left		: 0px;
	top			: 0px;
	bottom		: 0px;
	
	visibility	: hidden;
	width		: 100%;
	min-height	: 120px;
	
	transition:         all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition:    all 0.2s linear;
	-o-transition:      all 0.2s linear;	
}
#formError{
	position	: absolute;
	left		: 0px;
	top			: 0px;
	bottom		: 0px;	
	
	visibility	: hidden;
	color		: #EA8888;
	text-align	: center;
	width		: 100%;
	min-height	: 120px;
	
	transition:         all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition:    all 0.2s linear;
	-o-transition:      all 0.2s linear;
}

#formDispatch svg{
	position	: absolute;
    left		: 50%;
    top			: 50%;
	margin-left	: -20px;
	margin-top	: -25px;
	
	animation: 			1s ease 0.5s normal none infinite running anClock;
	-webkit-animation: 	1s ease 0.5s normal none infinite running anClock;
	-moz-animation: 	1s ease 0.5s normal none infinite running anClock;
	-ms-animation: 		1s ease 0.5s normal none infinite running anClock;
}
#formSuccess svg{
	position	: absolute;
    left		: 50%;
    top			: 50%;
	margin-left	: -30px;
	margin-top	: -30px;
}
#formError svg{
	display		: block;
	position	: relative;
	margin		: 10px auto 10px auto;
}

@-ms-keyframes anClock {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes anClock {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes anClock {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes anClock {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

/* --------------------------------------------------------- */

#popup_window{
	display				: none;
	z-index				: 500;
}

#popup_window.active{
	display				: block;
}

#popup_window{
	position			: fixed;
	left				: 0px;
	top					: 0px;
	right				: 0px;
	bottom				: 0px;	
}

#popup_bg{
	position			: absolute;
	left				: 0px;
	top					: 0px;
	right				: 0px;
	bottom				: 0px;
}

#popup_bg{
	background-color	: #222d33;
	background-color	: rgba(35, 45, 50, 0.95);
}

#popup_content{
	display				: block;
	position			: absolute;
	background			: #fafafa;
	left				: 50%;
	top					: 50%;s
	overflow			: hidden;
	-ms-transform		: translate(-50%, -50%);
	-webkit-transform	: translate(-50%, -50%);
	-moz-transform		: translate(-50%, -50%);
	transform			: translate(-50%, -50%);		
}

#popup_content.fixed{
	background			: #fafafa;
	left				: 0px;
	top					: 0px;
	right				: 0px;
	bottom				: 0px;
	width				: 100% !important;
    height				: 100% !important;
	margin				: 0px !important;
	overflow-y			: scroll;	
}

.popup_btn{
	width		: 50px;
    height		: 50px;
    position	: absolute;
    display		: block;
	top			: 50%;
	
	cursor				: hand;
	cursor				: pointer;
	
	-ms-transform		: translateY(-50%);
	-webkit-transform	: translateY(-50%);
	-moz-transform		: translateY(-50%);
	transform			: translateY(-50%);
}

#popup_btn_left{
    left		: 30px;	
}

#popup_btn_right{
    right		: 30px;	
}

/* --------------------------------------------------------- */

#page{
	background	: #edf3fa;
}
#page .inner{
	padding		: 80px;

	position	: absolute;
    left		: 0px;
    right		: 0px;
    top			: 0px;
    bottom		: 0px;
	overflow-y	: scroll;
	
	background	: #edf3fa;
}

/* --------------------------------------------------------- */

.icon_face_0{
	background: url('../images/icon_face_0.svg') no-repeat left top;
	background-size: 32px 32px;
}

.icon_face_1{
	background: url('../images/icon_face_1.svg') no-repeat left top;
	background-size: 32px 32px;
}

.icon_face_2{
	background: url('../images/icon_face_2.svg') no-repeat left top;
	background-size: 32px 32px;
}

.styleguide_line{
	background-color: #e4ecf5;
    padding: 5px 0px 5px 60px;
	background-position: 10px 4px;
	font-size: 14px;
}

.container.big{
	max-width:1650px;
}

h5.np{
	margin-left: 0px;
}
img.styleguide{
	max-width:100%;
	height:auto;
}

.carousel {
	max-width: 512px;
}

.flickity-page-dots {
 
}

.flickity-page-dots .dot {
    width: 8px;
    height: 8px;
    margin: 0 2px;
    opacity: .15;
}

/* --------------------------------------------------------- */

@media (max-height:800px){
	body, html {
		font-size: 16px;
		line-height: 24px;
	}
	#menu .items p {
		margin: 15px auto;
	}
	#menu .items a {
		font-size: 18px;
		line-height: normal;
	}
	.customers>div {
		margin: 0px auto;
	}
}

@media (max-width:1120px){
	#content.docSlider, .docSlider-inner {
		width	: 76vw;
		left	: 24vw;
	}
	#content.full{
		width	: 76vw;
		left	: 24vw;		
	}
	
	#menu {
		width	: 25vw;
	}
	#menu .logo {
		font-size	: 10px;
	}
	#menu .contacts {
		font-size	: 10px;
	}

	.customers>div {
		margin	: 0px auto;
	}	
}

@media (max-height:600px), (max-width:1100px){
	body{
		overflow-y	: scroll;
	}
	
	h5 {
		font-size: 18px;
	}
	
	.mobile{
		display: block;
	}

	#page .inner{
		padding		: 80px 30px;
	}
	
	#menu {
		top			: 0px;
		width		: 100%;
		height		: 65px;
		overflow	: hidden;
	}
	
	#menu .icons{
		position			: absolute;
		width				: 40px;
		height				: 40px;
		top					: 15px;
		right				: 15px;
		cursor				: hand;
		cursor				: pointer;
		fill				: #111;
	}
	
	#menu .icons.active{
		display		: block;
	}
	
	#menu .logo{
		left	: 30px;
		top		: 15px;
		height	: 40px;
		-ms-transform		: translateX(0%);
		-webkit-transform	: translateX(0%);
		-moz-transform		: translateX(0%);
		transform			: translateX(0%);	
	}
	#menu .logo span{
		display		: none;
	}#menu .logo .vertical{
		display		: none;
	}
	#menu .logo .horizontal{
		display		: block;
		height		: 100%;
		width		: auto;		
	}
	#menu .items{
		display		: none;
		top			: 40%;
	}
	#menu .contacts{
		display		: none;
	}
	
	#menu.active{
		height	: 100vh;
	}
	
	#menu.active .items{
		display		: block;
	}
	#menu.active .contacts{
		display		: block;
	}
	
	#portfolio .title {
		width: 90%;
	}
	
	#portfolio h1 {
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 5px;
	}
	
	#portfolio h3 {
		max-width: 300px;
		margin: 0px auto;
	}

	#content.docSlider, .docSlider-inner {
		width	: 100vw;
		left	: 0vw;
	}
	#content.full{
		width	: 100vw;
		left	: 0vw;
	}
	
	.docSlider-pager{
		display	: none;
	}
	
	.docSlider, .docSlider-page, .docSlider-inner, .docSlider-page .inner, .docSlider-page .content{
		display		: block !important;
		position	: relative !important;
		width		: 100% !important;
		height		: auto !important;
		
		left		: 0px !important;
		top			: 0px !important;
		
		-ms-transform		: translate(0%, 0%) !important;
		-webkit-transform	: translate(0%, 0%) !important;
		-moz-transform		: translate(0%, 0%) !important;
		transform			: translate(0%, 0%) !important;
	}
	#portfolio .inner{
		display		: block !important;
		position	: absolute !important;		
		left		: 0px !important;
		top			: 0px !important;
		right		: 0px !important;
		bottom		: 0px !important;
	}
	.docSlider-page .content.full{
		display		: block !important;
		position	: absolute !important;
		left		: 50% !important;
		top			: 50% !important;
	}
	
	#content .docSlider-inner .inner {
		padding		: 80px 20px;
	}
	
	h4 {
		font-size	: 30px;
		line-height	: 30px;
	}
	
	#portfolio {
		height		: 100vh !important;
		min-height	: 400px;
	}
		
	#popup_window{
		top : 60px;		
	}
	.popup_btn{
		display:none;
	}
	#popup_content{
		width		: 100% !important;
		height		: 100% !important;
		left		: 0px;
		top			: 0px;
		right		: 0px;
		bottom		: 0px;
		
		-ms-transform		: translate(0%, 0%);
		-webkit-transform	: translate(0%, 0%);
		-moz-transform		: translate(0%, 0%);
		transform			: translate(0%, 0%);	
	}
	
	#portfolio .inner .content.full{
		zoom						: 0.7; 
		-moz-transform				: scale(0.7);
		-moz-transform-origin		: 0 0;
		-o-transform				: scale(0.7);
		-o-transform-origin			: 0 0;
		-webkit-transform			: scale(0.7);
		-webkit-transform-origin	: 0 0;
		transform					: scale(0.7); 
		transform-origin			: 0 0;
	}


	
}

@media (max-width:460px){
	.customers>div{
		margin				: 0px auto;
		max-width			: 100px;
		height				: 55px;
		background-size		: 600px 165px;
	}
	.customer_0{
		background-position:0px 0px;
	}  
	.customer_1{
		background-position:-100px 0px;
	}    
	.customer_2{
		background-position:-200px 0px;
	} 
	.customer_3{
		background-position:-300px 0px;
	}  
	.customer_4{
		background-position:-400px 0px;
	}  
	.customer_5{
		background-position:-500px 0px;
	}  
	.customer_6{
		background-position:0px -55px;
	}  
	.customer_7{
		background-position:-100px -55px;
	}    
	.customer_8{
		background-position:-200px -55px;
	}  
	.customer_9{
		background-position:-300px -55px;
	}  
	.customer_10{
		background-position:-400px -55px;
	}  
	.customer_11{
		background-position:-500px -55px;
	}  
	.customer_12{
		background-position:0px -110px;
	}  
	.customer_13{
		background-position:-100 -110px;
	}    
	.customer_14{
		background-position:-200px -110px;
	}  
	.customer_15{
		background-position:-300px -110px;
	}  
	.customer_16{
		background-position:-400px -110px;
	}  
	.customer_17{
		background-position:-500px -110px;
	} 

}