/* 300,400,700,900 */
body{background:#191919 url(../images/bg.jpg) no-repeat 50% 0;background-attachment: fixed;}
body *{font-family: 'Lato', sans-serif;}
#wrapper{position:relative;overflow:hidden;}
#wrap{margin:0 auto;font-weight:400;color:#fff;font-size: 16px;width:100%;}
	
	h2.title{font-weight:900;font-size:28px;text-align:center;text-transform:uppercase;padding-top:85px;}
	
#top{padding:45px 0 0 0;position:absolute;top:0;left:0;width:100%;z-index:50;}
#top.fix{position:fixed;padding-top:10px;padding-bottom:10px;background:#1d1d1d;}
	#logo{float:left;text-decoration:none;width:160px;height:92px;background:url(../images/logo.png) no-repeat 0 0;margin-left:40px;}
	#top.fix #logo{height:50px;background-size:contain;}
	#nav{float:right;padding-top:10px;}
		#nav a{display:block;float:left;font-size:16px;color:#b6b6b6;text-decoration:none;padding:10px 15px;text-transform:uppercase; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
		#nav a:hover{color:#fff;}
	#nav-mobile{display:none;}
	#top.fix #nav{padding-top:5px;}
	
#about{padding:190px 0 0px;text-align:center;color:#fff;font-size:16px;}
	#about h1{font-size:64px;font-weight:900;}
	#about h2{font-weight:400;padding:38px 0;font-size:26px;}
	#about p{line-height:1.5;font-size:18px;}

#portfolio{padding-top:90px;max-width:1322px;margin:0 auto;}
	#portfolio > p{font-weight:400;padding-bottom:22px;text-align:center;font-size:18px;}
	#portfolio .items{position:relative;width:100%;box-sizing:border-box;}
	#portfolio .items:after{content:"";display:block;clear:both;}
		#portfolio .items .item{box-sizing:border-box;background:#000;font-size:27px;color:#fff;display:block;text-decoration:none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;overflow:hidden;width:25%;float:left;/*height:220px;*/}
			
			#portfolio .items .item img{width:100%;display:block;position:relative;/*-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);filter: gray;filter: grayscale(100%);filter: url(../desaturate.svg#greyscale); */ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
			#portfolio .items .item:hover img{/* -webkit-filter: none;filter: none;*/ -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari */ transform: scale(1.1);}
			#portfolio .items .item:hover .title{opacity: 0.9; filter: alpha(opacity=90);}
			#portfolio .items .item .BWFilter{z-index:2;}
			#portfolio .items .item .title{position:absolute;padding-top:30px;padding-left:30px;font-weight:900;z-index:10;}
			#portfolio .items .item strong{}
		
		#portfolio .items .item.item-1{/*border:4px solid #fb2580;*/}
		#portfolio .items .item.item-1{color:#fb2580;}
		/*#portfolio .items .item.item-3{border:4px solid #25d9ff;}*/
		#portfolio .items .item.item-3{color:#25d9ff;}
		/*#portfolio .items .item.item-6{border:4px solid #85f011;}*/
		#portfolio .items .item.item-6{color:#85f011;}
		/*#portfolio .items .item.item-12{border:4px solid #ffc20a;}*/
		#portfolio .items .item.item-12{color:#ffc20a;}

		#portfolio .event{position:absolute;top:0px;left:0px;height:712px;background:#fff;z-index:130;display:none;color:#000;}
		#portfolio .description{width:33.3%;float:left;box-sizing:border-box;/*padding:35px 15px 35px 30px;*/ overflow: auto; height: 100%;}
			#portfolio .description h3{font-size:36px;font-weight:900;text-transform:uppercase;padding-bottom:15px;border-bottom:1px solid #333333;}
			#portfolio .description p{font-size:14px;padding:45px 0;line-height:1.3;}
			#portfolio .description .meta{font-size:18px;padding:30px 0 40px;font-weight:400;line-height:1.2;}
			#portfolio .description .details{font-size:14px;font-weight:400;}
			#portfolio .description strong{font-weight:700;}
				#portfolio .description .details ul{padding:10px 0 20px;}
					#portfolio .description .details li{padding-bottom:5px;list-style:disc;margin-left:20px;line-height:1.2;}
					#portfolio .description .details li:first-of-type{padding-bottom:5px;list-style:none;margin-left:0px;line-height:1.2;}
		#portfolio .gallery{width:66.6%;float:right;height:712px;overflow:hidden;position:relative;max-height:100%;}
			#portfolio .gallery .nav{position:absolute;bottom:20px;left:20px;z-index:12;}
				#portfolio .gallery .nav .nav-item{float:left;background:url(../images/gallery-nav.png) no-repeat 100% 0;width:18px;height:17px;margin-right:10px;cursor:pointer;}
				#portfolio .gallery .nav .nav-item.current{background-position:0 0;cursor:default;}
			#portfolio .gallery img{position:absolute;right:0;top:50%;z-index:11;display:none;margin-top:-356px;}
			#portfolio .gallery img.current{display:block;}
			#portfolio .gallery div.event-gallery-item{ height:712px; }
		#portfolio .event-close{position:absolute;top:1px;right:1px;width:55px;height:55px;background:url(../images/event-close.png) no-repeat 50% 50%;cursor:pointer;z-index:12;}
		#portfolio .event-nav{z-index:12;}
			#portfolio .event-nav > div{background:url(../images/event-nav.png) no-repeat 0 50%;cursor:pointer;width:55px;height:55px;float:left;margin-left:1px;position:absolute;bottom:50%;margin-bottom:-27px;z-index:12;}
			#portfolio .event-nav .event-prev{left:1px;}
			#portfolio .event-nav .event-next{background-position:100% 50%;right:1px;}
		
		#mask{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.5);top:0;left:0;z-index:10;display:none;}
		
#services{padding:0 100px;}
	#services .col{padding-top:60px;}
	#services h3{font-size:20px;font-weight:400;}
	#services li{font-size:14px;line-height:1.5;}

#clients{}
	#clients-wrap{background:#fff;}
	#clients p{text-align:center;font-size:18px;padding:30px 0 60px;}
	#clients p > strong{font-weight:400;}
	
	.clients-slider{background:#fff;padding:50px 100px 60px;position:relative;}
		.clients-slider .slider-nav{position:absolute;background:url(../images/slider-nav.png) no-repeat 100% 100%;top:50%;height:45px;margin-top:-22px;width:40px;cursor:pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
		.clients-slider .slider-nav.slider-left{left:38px;background-position:7px 50%;}
		.clients-slider .slider-nav.slider-left:hover{left:30px;}
		.clients-slider .slider-nav.slider-right{right:38px;background-position:-43px 50%;}
		.clients-slider .slider-nav.slider-right:hover{right:30px;}

		.clients-slider .slider-pagin{position:absolute;bottom:30px;left:0;width:100%;text-align:center;}
			.clients-slider .slider-pagin span{display:inline-block;margin:0 3px;background:#e6e6e6;cursor:pointer;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;width:12px;height:12px;}
			.clients-slider .slider-pagin span.current{background:#a3a3a3;cursor:default;}
		
		.clients-slider .slider-elements{position:relative;height:400px;overflow:hidden;}
			.clients-slider .slide-element{position:absolute;width:187px;top:0px;left:100%;}
				.clients-slider .slide-element .logo{height:100px;text-align:center;background-repeat:no-repeat;background-position:50% 50%;}

	.references-slider{padding:50px 100px 0px;position:relative;}
		.references-slider .slider-nav{position:absolute;background:url(../images/slider-nav-blu.png) no-repeat 100% 100%;top:50%;height:45px;margin-top:-22px;width:40px;cursor:pointer;z-index:20; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;    -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
		.references-slider .slider-nav.slider-left{left:38px;background-position:7px 50%;}
		.references-slider .slider-nav.slider-left:hover{left:30px;}
		.references-slider .slider-nav.slider-right{right:38px;background-position:-43px 50%;}
		.references-slider .slider-nav.slider-right:hover{right:30px;}

		.references-slider .slider-pagin{position:absolute;bottom:30px;left:0;width:100%;text-align:center;}
			.references-slider .slider-pagin span{display:inline-block;margin:0 3px;background:#e6e6e6;cursor:pointer;-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;width:12px;height:12px;}
			.references-slider .slider-pagin span.current{background:#a3a3a3;cursor:default;}
		
		.references-slider .slider-elements{position:relative;height:270px;overflow:hidden;}
			.references-slider .slide-element{position:absolute;width:33.33%;top:0px;left:100%;height:270px;}
				.references-slider .slide-element .reference{font-size:15px;height:135px;}
					.references-slider .slide-element .quote{font-style:italic;padding-bottom:5px;padding-right:30px;}
					.references-slider .slide-element .full{display:none;}
					.references-slider .slide-element .name{display:none;}
					.references-slider .slide-element strong{font-weight:700;}
					.references-slider .slide-element span{font-size:14px;color:#ffc20a;display:block;padding-top:5px;cursor:pointer;}
	
	.popup{position:fixed;background:rgba(41,41,41,0.95);width:570px;left:50%;margin-left:-285px;top:50%;z-index:20;display:none;-moz-box-shadow: 0px 0px 60px rgba(0,0,0,0.55); -webkit-box-shadow: 0px 0px 60px rgba(0,0,0,0.55); box-shadow: 0px 0px 60px rgba(0,0,0,0.55);}
		.popup .popup-content{padding:45px;font-size:15px;color:#fff;padding-right:60px;font-style:italic;line-height:1.3;}
			.popup .popup-content .name{padding-top:25px;font-style:normal;}
				.popup .popup-content .name strong{font-weight:700;color:#ffc20a}
		.popup .popup-close{position:absolute;top:0;right:0;width:55px;height:55px;background:#313131 url(../images/event-close.png) no-repeat 50% 50%;cursor:pointer;}
				
#contact{padding:0 150px 70px;}
	#contact p{text-align:center;padding:15px 0 60px;font-size:18px;}
	#contact .ico{margin-right:10px;}
	#contact .col-left{width:350px;float:left;font-size:14px;font-weight:400;line-height:1.4;}
		#contact .col-left h4{font-size:18px;padding-bottom:10px;font-weight:bold;}
	#contact .col-middle{width:250px;float:left;line-height:1.4;font-size:18px;}
		#contact .col-middle h4{font-size:18px;line-height:1.2;padding-bottom:10px;}
			#contact .col-middle h4 small{font-size:12px;}
	
	#contact .social{padding-top:50px;font-size:14px;padding-left:47px;}
		#contact .social a{float:left;display:block;text-decoration:none;margin-left:15px;overflow:hidden;text-indent:-9999px;background:url(../images/social.png) no-repeat 50% 50%;height:42px;width:42px; }
		#contact .social a.fb{ background-position: 10px 0; }
		#contact .social a.vimeo{ background-position: 100% 0; }
		
		#contact .col-middle .email,#contact .col-middle .telephone{padding-left:25px;margin-top:5px;}
		#contact .col-middle .email{background:url(../images/letter.png) no-repeat 0 50%;}
		#contact .col-middle .telephone{background:url(../images/tel.png) no-repeat 0 50%;}
		
	#contact .col-right{width:370px;float:right;}
		#contact-form{}
			#contact-form input,#contact-form textarea{border:1px solid #393939;background:#393939;display:block;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;padding:12px;font-size:14px;color:#fff;box-sizing:border-box;margin-bottom:10px;width:100%;resize:none;outline:none;}
			#contact-form input.error,#contact-form textarea.error{border-color:#f00;}
			#contact-form input.left{float:left;width:180px;}
			#contact-form input.right{float:right;width:180px;}
			#contact-form textarea{height:150px;}
			#contact-form button{border:2px solid #fff;text-align:center;padding:14px;font-size:16px;font-weight:700;background:transparent;color:#fff;cursor:pointer;float:right;margin-top:25px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;outline:none;}
			#contact-form button:hover{color:#000;background:#fff;}
			#contact-form .msg{color:#f00;}

		#contact input[type="checkbox"]{
			position: fixed;
			top: -100%;
			left: -100%;
			z-index: -1;
		}

		#contact label.labeled{
			color: #fff;
			padding-left: 25px;
			cursor: pointer;
			position: relative;
			display: block;
			font-size: 12px;
			font-weight: 100;
		}


		#contact label.labeled:before{
			content: ""!important;
			display: block;
			width: 15px;
			height: 15px;
			border: 1px solid #fff;
			position: absolute;
			left: 0;
			top: 0;
		}

		#contact input[type="checkbox"] + label:after{
			content: "";
			display: block;
			width: 7px;
			height: 10px;
			border: 2px solid #fb2580;
			border-left: none;
			border-top: none;
			position: absolute;
			left: 4px;
			top: 1px;
			opacity: 0;
			-webkit-transition: all 0.3s;
			-moz-transition: all 0.3s;
			-ms-transition: all 0.3s;
			-o-transition: all 0.3s;
			transition: all 0.3s;
		}
		#contact input[type="checkbox"]:checked + label:after{
			opacity: 1;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);
		}

		#contact label.labeled.error:before{
			border-color: #f00;
		}
		#contact input[type="checkbox"]:checked + label:before{
			border-color:#fff !important;
		}



#footer{background:#1d1d1d;padding:30px 0;color:#fff;}
	#footer .copy{font-size:12px;color:#b2b2b2;float:left;margin-left:40px;}
	#footer .logos{float:right;font-weight:400;line-height:1.3}
		#footer .logos strong{font-weight:900;}
		#footer .logos > div{padding-left:35px;padding-right:15px;}

/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano > .nano-content {
  position      : absolute;
  overflow      : scroll;
  padding:30px;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
  outline: none;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}
.nano-pane {
  
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .99;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
}
 .nano-pane > .nano-slider {
  background: #444;
  background : rgba(0,0,0,.25);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}


.inner{width:1322px;margin:0 auto;}	
		
.col{float:left;}
.col.col-1-3{width:33.3%;box-sizing:border-box;}

.ico{width:57px;height:57px;background:url(../images/icons.png) no-repeat 100% 100%;}
.ico.ico-brain{background-position:-57px 0;}
.ico.ico-brush{background-position:0px 0;}
.ico.ico-chat{background-position:-114px 0;}
.ico.ico-cart{background-position:-171px 0;}
.ico.ico-baloon{background-position:-228px 0;}
.ico.ico-man{background-position:-286px 0;}
.ico.ico-map{background-position:-342px 0;}
.ico.ico-cloud{background-position:-399px 0;}

.hr{border-bottom:1px dashed #fa247f;width:155px;padding-top:10px;margin-bottom:10px;}

.clearfix:after,.clear{content:"";display:block;clear:both;}
.f-satin{color:#25d9ff;}
.f-pink{color:#fb2580;}
.f-orange{color:#ffc20a;}
.f-green{color:#9ef523;}
.a-right{text-align:right}


.fleft{float:left;}
.fright{float:right;}

#type{display:none;content:"desktop"}

@media screen and (max-width: 1340px) {
	#portfolio{margin:0 auto;/*width:1004px;*/}/*668px, 501px, 334, 167*/
		#portfolio .items{}/* h: 135px, 270px, 405px  */
			#portfolio .items .item{background-size:cover !important;/*height:167px;*/font-size:19px;}

				
		#portfolio .event{width:100%;}
			#portfolio .description h3{font-size:30px}
		
	.clients-slider .slide-element{width:201px;}
/*	.references-slider .slide-element .reference{height:150px;}*/
		
	#contact{padding-left:0;padding-right:0;width:700px;margin:0 auto;}
		#contact .col-left,#contact .col-middle{float:none;width:300px;}
		#contact .address{width:233px}
		#contact .col-middle{padding-top:20px;}
	
	.inner{width:1004px;}	
}

@media screen and (min-width: 1024px) {
	body{
		background-size: cover;
	}
}
@media screen and (max-width: 1040px) {
	#top{padding-top:30px;}
	#top.fix{/*background:transparent;*/}
	#nav{display:none;}
	#nav-mobile{display:block;float:right;}
		#nav-mobile .nav-toggler{display:block;cursor:pointer;width:43px;position:relative;z-index:30;margin-right:30px;padding-top:5px;}
			#nav-mobile .nav-toggler .bar{background:#fff;height:5px;margin-bottom:10px;}
		#nav-mobile .nav-mobile{position:absolute;padding:95px 30px 30px;background:#181818;z-index:25;top:0;right:-180px;}
			#nav-mobile .nav-mobile a{padding:5px 0;text-align:right;margin:5px 0;display:block;color:#fff;text-transform:uppercase;color:#b6b6b6;font-size:18px;text-decoration:none;}
		#top.fix #nav-mobile .nav-mobile{padding-top:80px;}
	
	#portfolio{margin:0 auto;/*width:740px;*/}
		#portfolio .items{}
			#portfolio .items .item{background-size:cover !important;/*height:123px;font-size:16px;*/}
				#portfolio .items .item .title{ /*padding-top: 20px; padding-left: 15px;*/}

		
		#portfolio .event{height:auto;width:100%;margin-left:0;left:0;position:absolute;max-height:99999px;}
			#portfolio .gallery{float:none;height:500px;width:740px;margin:0 auto;}
			#portfolio .gallery div.event-gallery-item{ height:500px; }
				#portfolio .gallery img{height:auto;width:100%;margin-top: -299px;}
			#portfolio .description{float:none;width:100%;}
			.nano > .nano-content{ position:static; }
				#portfolio .description .details:after{content:"";display:block;clear:both;}
				#portfolio .description .details ul{float:left;width:50%;box-sizing:border-box;padding-right:20px;}
			#portfolio .event-nav{bottom:auto;top:444px;}
		
		
	#services{}
		#services .cols{width:600px;margin:0 auto;}
	
	.clients-slider{padding-left:50px;padding-right:50px;}
		.clients-slider .slider-nav.slider-left{left:8px;}
		.clients-slider .slider-nav.slider-left:hover{left:0px;}
		.clients-slider .slider-nav.slider-right{right:8px;}
		.clients-slider .slider-nav.slider-right:hover{right:0px;}
		
	
	#footer .inner{padding:0 20px;}
	#footer .copy{margin-left:20px;}
	
	
	.col.col-1-3{width:50%;}
	.inner{width:auto;}
	
	#type:after{content:"tablet";}
}


@media screen and (max-width: 1000px) {
	.references-slider .slide-element{width:50%;}
	
}
	
@media (max-width: 991px) and (min-width: 801px){
	#portfolio .items .item{width:33.33%;}
}

@media (max-width: 800px) and (min-width: 601px){
	#portfolio .items .item{width:50%;}
}


@media screen and (max-width: 770px) {
	#top{padding-top:20px;}
		#logo{background-image:url(../images/logo_small.png);width:87px;height:49px;margin-left:20px;}
		
	#about{padding-top:110px;}
		#about h1{font-size:32px;}
		#about h2{font-size:18px;}
		#about p{font-size:14px;}
	
	#portfolio{/*width:302px;*/}
		#portfolio .items{}
				#portfolio .items .item .title{padding-top:30px;padding-left:30px;}
				

		
		#portfolio .gallery{width:302px;height:250px;}
			#portfolio .gallery div.event-gallery-item{ height:250px; }
			#portfolio .gallery img{margin-top:0;top:0;}
			#portfolio .event-nav{top:188px;}
		#portfolio .description{padding:15px 10px;}
			#portfolio .description h3{font-size:34px;}
			#portfolio .description .details ul{float:none;width:100%;padding:0 0 10px;}
			
			#portfolio .description .meta{font-size:14px;}
		
	#services{padding:0;}
		#services .cols{width:auto;}
		.col.col-1-3{width:100%;text-align:center;}
		#services .ico{margin:0 auto;}
		#services .hr{margin-left:auto;margin-right:auto;}
		
	.references-slider{padding-left:50px;padding-right:50px;}
		.references-slider .slider-nav.slider-left{left:8px;}
		.references-slider .slider-nav.slider-left:hover{left:0px;}
		.references-slider .slider-nav.slider-right{right:8px;}
		.references-slider .slider-nav.slider-right:hover{right:0px;}
/*		.references-slider .slider-elements{height:450px;}
				.references-slider .slide-element .reference{height:225px;}*/
	
	.popup{width:302px;margin-left:-151px;}
		.popup .popup-content{padding-left:35px;}
	
	#contact{width:auto;}
	#contact > .fleft,#contact > .fright,#contact .col-right{float:none;width:300px;margin:0 auto;}
	#contact-form{padding-top:20px;}
	#contact-form input, #contact-form input.left,#contact-form input.right{width:100%;float:none;}
	
	#footer .copy,#footer .logos{float:none;width:300px;margin:0 auto;padding-bottom:10px;}
	#footer .logos{font-size:11px;}
		#footer .logos > div{padding-left:7px;padding-right:0;}
		#footer .logos > div.a-right{padding-left:0px}
			#footer .logos > div img{max-width:95px;}
	
	#type{content:"smartphone";}
}

@media screen and (max-width: 600px) {
	.references-slider .slide-element{text-align:center;width:100%;}
	#portfolio .items .item{width:100%;/*height:200px;*/font-size: 19px;}
}

@media screen and (max-width: 1040px) {
	#clients-wrap .inner{width:703px;}
}
@media screen and (max-width: 703px) {
	#clients-wrap .inner{width:502px;}
}
@media screen and (max-width: 502px) {
	#clients-wrap .inner{width:301px;}
}