.rel{position:relative;z-index:1;overflow:hidden}
html,body{width:100%;margin:0;padding:0;background:white;color:#181818;font:400 16px/20px 'Montserrat',sans-serif}
.wrapper{position:relative;z-index:1;min-width:1000px;height:100%}

/* Welcome */
.welcome{position:fixed;z-index:3;top:0;left:0;display:none;width:100%;min-width:1000px;height:100%;overflow:visible}
.welcome .gradient{position:absolute;top:0;left:0;width:100%;height:100%}
.welcome .gradient{
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 95%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 95%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
}
.welcome .valign{position:relative;z-index:3;top:50%;margin-top:-63px}
.welcome .line{width:90%;height:1px;margin:0 auto;background:rgba(0,0,0,0.15);overflow:hidden}
.welcome .logo{display:block;margin:30px auto 15px}
.welcome .slogan{display:block;margin:0 auto 30px}
/* .Welcome */

/* Header */
.header{position:fixed;z-index:1;top:0;left:0;width:100%;min-width:1000px;height:100%;background:rgba(255,255,255,0);overflow:visible}
.header .inner{height:101px;line-height:43px;padding:20px 0}
.header .social{float:right;height:35px;margin:8px 6% 0 0;padding:29px 0;overflow:hidden}
.header .social a{position:relative;display:inline-block;float:left;width:25px;height:25px;margin-left:33px;border:1px solid rgba(0,0,0,0.25);color:rgba(0,0,0,0.5);text-decoration:none;font-size:13px;text-align:center;overflow:visible}
.header .social a{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.header .social a span{position:relative;display:block}
.header .social a span.hidaway{
  position: absolute;
  top: 26px;
  left: 0;
  content: "";
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}
.header .social a span.hidaway::before{color:white}
.header .social a span,.header .social a span::before{width:25px;height:25px}
.header .social a{
  -webkit-font-smoothing: antialiased
}
.header .social a span {
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.header .social a:hover span,
.header .social a:active span,
.header .social a:focus span {
  -webkit-transform: translateY(-26px);
  -moz-transform: translateY(-26px);
  transform: translateY(-26px);
  color:white;
}
.header .social a:hover span.hidaway::before{
   color:rgba(0,0,0,0.9);
}

.header .menu{width:350px;margin-left:3%;padding-left:3%;overflow:hidden}
.header .menu a.togglemenu{position:absolute;z-index:13;left:6%;display:block;float:left;width:20px;height:3px;padding:49px 0;background:white;overflow:hidden}
.header .menu a.togglemenu span{display:block;height:3px;background:rgba(0,0,0,0.4)}
.header .menu a.togglemenu span::before{content:"";position:absolute;display:block;width:100%;height:3px;margin-top:-6px;background:rgba(0,0,0,0.4)}
.header .menu a.togglemenu span::after{content:"";position:absolute;display:block;width:100%;height:3px;margin-top:6px;background:rgba(0,0,0,0.4)}
.header .menu .links{position:relative;left:-200px;display:none;height:43px;padding:29px 0}
.header .menu .links{
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -moz-opacity: 0;
   -khtml-opacity: 0;
   opacity: 0;
}
.header .menu .links a{position:relative;display:inline-block;float:left;height:25px;margin-right:38px;padding:9px 0;color:rgba(0,0,0,0.5);text-decoration:none;text-transform:uppercase;font:700 12px/25px 'Montserrat',sans-serif;letter-spacing:3px}
.header .menu .links a{
  -webkit-font-smoothing: antialiased;
}
.header .menu .links a span {
  -webkit-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  position:relative;
  display:inline-block;
}
.header .menu .links a span::before {
  position: absolute;
  top: 26px;
  content: attr(data-hover);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  color:white/*#5a376c;*/
}
.header .menu .links a:hover span {
  -webkit-transform: translateY(-26px);
  -moz-transform: translateY(-26px);
  transform: translateY(-26px);
  color:white
}
.header .menu .links a:hover span::before{
   color:rgba(0,0,0,0.9);
}
/* .Header */

/* Work */
.work{z-index:2;margin-top:50%;overflow:visible}
.work a.item{position:relative;display:block;width:100%;height:50%;color:#181818;text-decoration:none;font:300 22px "Open Sans",Verdana,Arial,sans-serif}
.work a.item{
   -webkit-font-smoothing: antialiased;
}
.work a.item .table{
   -webkit-transition: all .9s;
   -o-transition: all .9s;
   transition: all .9s;
}
.work a.item .wireframe{position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover}
.work a.item .wireframe{
   -webkit-transition: all 1.3s;
   -o-transition: all 1.3s;
   transition: all 1.3s;
}
.work a.item .cell{
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -moz-opacity: 0;
   -khtml-opacity: 0;
   opacity: 0;
}
.work a.item .cell.transition{
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   -moz-opacity: 1;
   -khtml-opacity: 1;
   opacity: 1;
   -webkit-transition: all 1.3s;
   -o-transition: all 1.3s;
   transition: all 1.3s;
}
.work a.item .table{display:table;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover}
.work a.item .row{display:table-row;width:100%;height:100%}
.work a.item .row{
-webkit-transition: all .7s;
-o-transition: all .7s;
transition: all .7s;
}
.work a.item .cell{position:relative;z-index:2;display:table-cell;padding:3% 4%;vertical-align:middle}
.work a.item .cell .client{margin-right:2%;vertical-align:middle}
.work a.item .cell header{display:inline;line-height:30px}
.work a.item .cell .info{display:block;max-width:50%;margin-top:2%;font-size:14px;line-height:18px}
.work a.item:hover .table{
   -moz-transform: scale(1.02);
   -webkit-transform: scale(1.02);
   -o-transform: scale(1.02);
   -ms-transform: scale(1.02);
   transform: scale(1.02);
}
.work a.item .wireframe.active,
.work a.item:hover .wireframe{
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -moz-opacity: 0;
   -khtml-opacity: 0;
   opacity: 0;
}
.work a.item:hover .cell.transition{
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   -moz-opacity: 0;
   -khtml-opacity: 0;
   opacity: 0;
}
/* .Work */

.last-page{position:relative;z-index:3;width:100%;height:100%;overflow:visible}

/* About */
.about{position:absolute;z-index:3;width:100%;height:33.33333%;background:url(../images/about.gif) 0 0 repeat;font:300 14px/20px "Open Sans",Verdana,Arial,sans-serif;overflow:visible}
.about .inner{width:800px;margin:0 auto;padding:40px 0 80px;color:#ccc;text-align:center}
.about header{margin-bottom:40px}
.about header .top{position:relative;height:27px;color:white;font:400 30px/22px 'Montserrat',sans-serif;text-transform:uppercase;overflow:hidden}
.about header .top img{display:block;height:25px;margin:2px auto 0}
.about header .bottom{position:relative;height:14px;color:#505050;font:400 17px/14px 'Montserrat',sans-serif;letter-spacing:28px;text-transform:uppercase;overflow:hidden}
.about header .top .text{position:absolute;bottom:0;width:100%;height:0;overflow:hidden}
.about header .bottom .text{position:absolute;top:0;width:100%;height:0;overflow:hidden}
.about header .top .text .hidden{position:absolute;top:100%;width:100%;height:100%;margin-top:-27px}
.about header .bottom .text .hidden{position:absolute;top:0;width:100%;height:100%;padding-left:14px}
.about .full-text{height:120px;overflow:hidden}
.about .full-text .hidden{margin-top:100px;text-align:left}
.about .full-text p{margin-bottom:20px;text-indent:20px}
.about .full-text p:last-child{margin-bottom:0}
.about .full-text h3{margin:0 0 20px 20px;padding:5px 0 0 1px;font:300 14px/18px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:1px}
.about .more{position:absolute;z-index:4;top:100%;width:100%;height:31px;background:url(../images/about.gif) 0 0 repeat}
.about .more a{position:relative;display:block;width:120px;margin:0 auto;height:31px;text-align:center;color:#eee;font:300 12px/31px 'Montserrat',sans-serif;text-transform:uppercase;letter-spacing:3px;text-decoration:none;overflow:hidden}
.about .more a span{display:block;height:31px;line-height:31px}
.about .more a span {
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
}
.about .more a span::before {
  position: absolute;
  top: 33px;
  display:block;
  width:100%;
  height:31px;
  line-height:31px;
  content: attr(data-html);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.about .more a:hover span,
.about .more a:active span
,.about .more a:focus span {
  -webkit-transform: translateY(-33px);
  -moz-transform: translateY(-33px);
  transform: translateY(-33px);
}
/* .About */

/* Contact */
.contact{position:absolute;z-index:2;width:100%;height:66.66667%;min-height:590px;top:33.33333%;background:url(../images/contact.jpg) no-repeat right bottom;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover}
.contact .inner{width:800px;margin:0 auto;padding-top:94px}
.contact header{position:relative;height:0;margin-bottom:25px;overflow:hidden}
.contact h2{position:absolute;bottom:0;width:100%;height:25px;color:rgba(0,0,0,0.35);font-size:21px;line-height:25px;text-align:center;text-transform:uppercase}
.contact .form-line{left:-800px;padding-top:29px}
.contact input{width:437px;margin:0;border:none;border-bottom:1px solid #bbbab6;padding:5px 6px;background:none;color:#181818;font:300 12.5px "Open Sans",Verdana,Arial,sans-serif;letter-spacing:3px}
.contact input.wrong{border-color:#404040;color:#404040}
.contact .form-line-textarea{padding-top:14px}
.contact .form-line-textarea .line{position:absolute;top:9px;left:-800px;width:100%;height:48px;border-bottom:1px solid #bbbab6}
.contact .form-line-textarea .wrong{border-color:#404040}
.contact .form-line-textarea .line:nth-child(2){top:58px}
.contact .form-line-textarea .line:nth-child(3){top:107px}
.contact textarea{position:relative;z-index:2;left:-800px;width:788px;height:147px;margin:0;border:none;padding:5px 6px;background:none;color:#181818;font:300 12.5px/49px "Open Sans",Verdana,Arial,sans-serif;letter-spacing:3px}
.contact textarea.wrong{color:#5a376c}
.contact a.contact-submit{position:relative;z-index:2;left:-168px;display:block;width:143px;height:34px;margin-top:28px;border:1px solid #c6c6c6;padding:0 10px 0 13px;color:#181818;text-decoration:none;font:300 12.5px/35px "Open Sans",Verdana,Arial,sans-serif;text-align:center;letter-spacing:3px;text-transform:uppercase;overflow:hidden}
.contact a.progress{
	cursor:default
}
.contact a.contact-submit{
  -webkit-font-smoothing: antialiased
}
.contact a.contact-submit span.send {
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position:relative;
  z-index:2;
  display:block;
  width:143px;
  height:34px;
  text-align:center
}
.contact a.contact-submit span.send::before {
  position: absolute;
  top: 36px;
  display:block;
  width:143px;
  height:34px;
  text-align:center;
  content: attr(data-html);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.contact a.contact-submit span.sent::before {
  content: attr(data-html)!important;
}
.contact a.contact-submit:hover span.send,
.contact a.contact-submit:active span.send,
.contact a.contact-submit:focus span.send {
  -webkit-transform: translateY(-36px);
  -moz-transform: translateY(-36px);
  transform: translateY(-36px);
}
.contact a.contact-submit .fill{position:absolute;z-index:1;top:0;left:0;display:block;width:0;height:34px;background:#e9e9e9}
.contact .direct-email{position:absolute;bottom:97px;right:420px;height:0;color:rgba(255,255,255,0.6);font:300 12.5px/20px "Open Sans",Verdana,Arial,sans-serif;overflow:hidden}
.contact .direct-email .select{display:inline-block;float:right;height:16px;margin-left:10px;font-size:16px;line-height:16px;font-weight:600}

.contact .social{position:absolute;bottom:78px;right:0;height:0;margin-right:143px;overflow:hidden}
.contact .social a{position:relative;display:inline-block;float:left;width:25px;height:25px;margin-right:33px;border:1px solid rgba(255,255,255,0.5);color:rgba(255,255,255,0.6);text-decoration:none;font-size:13px;text-align:center;overflow:hidden}
.contact .social a{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.contact .social a span{position:relative;display:block}
.contact .social a span.hidaway{
  position: absolute;
  top: 26px;
  left: 0;
  content: "";
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact .social a span.hidaway::before{color:white}
.contact .social a span,.contact .social a span::before{width:25px;height:25px}
.contact .social a{
  -webkit-font-smoothing: antialiased
}
.contact .social a span {
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.contact .social a:hover span,
.contact .social a:active span,
.contact .social a:focus span {
  -webkit-transform: translateY(-26px);
  -moz-transform: translateY(-26px);
  transform: translateY(-26px);
  color:white;
}
.contact .social a:hover span.hidaway::before{
   color:rgba(255,255,255,1);
}
/* .Contact */

/* Fullscreen */
.fullscreen{position:fixed;z-index:98;top:0;left:0;display:none;width:100%;min-width:1000px;height:100%;min-height:640px;background:rgba(255,255,255,0);overflow:hidden}
.fullscreen .interface{width:100%;height:100%;overflow:hidden}
.fullscreen .interface .loading{position:absolute;z-index:103;top:50%;left:50%;display:none;width:40px;height:40px;margin:-20px 0 0 -20px}
svg path,
svg rect{
  fill: rgba(255,255,255,0.8);
}
.fullscreen .interface a.close{position:absolute;z-index:103;top:28px;right:28px;display:none;width:25px;height:25px;border:1px solid rgba(255,255,255,0.5);color:white;text-decoration:none;font-size:13px;line-height:25px;text-align:center;overflow:hidden}
.fullscreen .interface a.close{
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.fullscreen .interface a.close span{position:relative;display:block}
.fullscreen .interface a.close span.hidaway{
  position: absolute;
  top: 26px;
  left: 0;
  content: "";
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
}
.fullscreen .interface a.close span.hidaway::before{color:white}
.fullscreen .interface a.close span,.fullscreen .interface a.close span::before{width:25px;height:25px}
.fullscreen .interface a.close{
  -webkit-font-smoothing: antialiased
}
.fullscreen .interface a.close span {
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.fullscreen .interface a.close:hover span,
.fullscreen .interface a.close:active span,
.fullscreen .interface a.close:focus span {
  -webkit-transform: translateY(-26px);
  -moz-transform: translateY(-26px);
  transform: translateY(-26px);
  color:white;
}
.fullscreen .interface a.close:hover span.hidaway::before{
   color:rgba(255,255,255,1);
}

.fullscreen .interface a.prev,.fullscreen .interface a.next{position:absolute;z-index:103;top:50%;display:none;width:114px;height:200px;margin-top:-100px;color:white;text-decoration:none}
.fullscreen .interface a.prev{left:0}
.fullscreen .interface a.next{right:0}
.fullscreen .interface a.prev span,.fullscreen .interface a.next span{position:relative;z-index:103;top:0;display:block;width:112px;height:200px;padding-left:2px;font:700 12.5px/200px "Open Sans",Verdana,Arial,sans-serif;letter-spacing:2px;text-align:center}
.fullscreen .interface a.prev span,.fullscreen .interface a.next span{
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.fullscreen .back{position:absolute;z-index:100;top:0;left:-100%;width:300%;height:100%;overflow:hidden}
.fullscreen .back .screen{position:relative;z-index:100;float:left;width:33.33%;height:100%}
.fullscreen .back .screen,.fullscreen .back .screen .bg{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fullscreen .back .center{width:33.34%}
.fullscreen .back .screen .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover;overflow:hidden}
.fullscreen .back .screen.left,.fullscreen .back .screen.left .bg,.fullscreen .back .screen.right,.fullscreen .back .screen.right .bg{z-index:102}
.fullscreen .back .center .bg{z-index:100;top:25%;height:50%}
.fullscreen .back .center .bg.clickable{cursor:pointer}
.fullscreen .back .center .bg.scrollable{cursor:n-resize}
.fullscreen .tip{position:absolute;z-index:101;top:0;left:0;display:none;width:96px;padding:2px 6px;background:rgba(255,255,255,0.75);font:11px/16px "Open Sans",Verdana,Arial,sans-serif;text-transform:lowercase;text-align:center}
/* .Fullscreen */

/* Fontello */
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?32246424');
  src: url('../font/fontello.eot?32246424#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?32246424') format('woff'),
       url('../font/fontello.ttf?32246424') format('truetype'),
       url('../font/fontello.svg?32246424#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
 
[class^="icon-"]:before, [class*=" icon-"]:before {
   position:absolute;
   top:0;
   left:0;
   font-family: "fontello";
   font-style: normal;
   font-weight: normal;
   speak: none;
   display: inline-block;
   text-decoration: inherit;
   text-align: center;
   font-variant: normal;
   text-transform: none;
   line-height:25px;
}
.icon-cancel:before { content: '\e800'; }
.icon-email:before { content: '\e801'; }
.icon-facebook:before { content: '\e802'; }
.icon-instagram:before { content: '\e803'; }
.icon-googleplus:before { content: '\e804'; }
/* .Fontello */