@charset "utf-8";
/* CSS Document */

@import url("//hello.myfonts.net/count/29455a");
 
@font-face {font-family: 'DidotLTPro-Roman';src: url('webfonts/29455A_0_0.eot');src: url('webfonts/29455A_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/29455A_0_0.woff') format('woff'),url('webfonts/29455A_0_0.ttf') format('truetype'),url('webfonts/29455A_0_0.svg#wf') format('svg');}
 
@font-face {font-family: 'DidotLTPro-Italic';src: url('webfonts/29455A_1_0.eot');src: url('webfonts/29455A_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/29455A_1_0.woff') format('woff'),url('webfonts/29455A_1_0.ttf') format('truetype'),url('webfonts/29455A_1_0.svg#wf') format('svg');}

/* =Clearfix
--------------------------------------------------------------------------------------------------------*/
.clear { clear: both; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }/* ----- clear fix for floats ----- */
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }/* hides clearfix from IE-mac */
.clearfix { display:block; }/* end hide from IE-mac */
.alignleft { float:left; }
.alignright { float:right; }
.aligncenter { margin:auto; display:block; }
.alignnone { clear:both; font-size:0; line-height:0; margin:0; padding:0; border:0; height:0; width:0; }
.centered { text-align:center; }
/* End Clearfix
--------------------------------------------------------------------------------------------------------*/


/* =Preloader
--------------------------------------------------------------------------------------------------------*/
#preloader { position:absolute; top:0; left:0; right:0; bottom:0; background-color:#edece8; z-index:999999; }
#status { /*display:none; */width:400px; height:400px; position:absolute; left:50%; top:50%; background-image:url(../images/logo-intro.png); background-repeat:no-repeat; background-position:center; margin:-200px 0 0 -200px; }
/* End Preloader
--------------------------------------------------------------------------------------------------------*/


/* =Typography
--------------------------------------------------------------------------------------------------------*/
html { font-size:100%; /*overflow: -moz-scrollbars-vertical; overflow-y: scroll; */}
body { font-family:'DidotLTPro-Roman', "Times New Roman", Times, serif; color:#000; background:#edece8; margin:20px; }
strong { font-weight:bold; }
a, a > * {-webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; color:#000; text-decoration:none }
p { font-family:'DidotLTPro-Roman', "Times New Roman", Times, serif; color:#000; font-weight:normal; font-size:32px; line-height:34px; margin:0; text-transform: uppercase;}
.col2-3 p { font-family: Arial, Helvetica, sans-serif; color:#000; font-weight:normal; font-size:14px; line-height:20px; margin:0; text-transform: none;}
p a { color:#6D6E71; }
p a:hover { color: #000; }
p.big {font-size:20px; line-height:30px; letter-spacing:-1px; }
p.paddingtop-5 {padding-top:5px; }
p span {color:#818181; font-size:11px; text-transform:uppercase; letter-spacing:1px; }
p.small {margin-bottom:6px; }
p.small span {color:#fff !important; }
p.button a {background:#fff; border:1px solid #d0ceca; padding:6px 10px 5px 10px; color:#191a22; font-weight:600; margin-top:6px; display:inline-block; text-decoration:none }
p.button a span {color:#191a22; }
/*p:first-child{ margin-top: 20px;} */
span.arrow {font-size:13px; }
span.bullet {background:url(../images/bg-bullet.png) no-repeat 0px 5px; background-size:6px 6px; padding-left:16px; margin-left:10px; }
span.title-italic {font-family:'DidotLTPro-Italic', "Times New Roman", Times, serif; text-transform: none;}
p span.title-italic { font-size: 32px; }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =Headings
--------------------------------------------------------------------------------------------------------*/
h1#logo {}
h1#logo a {display: block;}
h2 { font-family:'DidotLTPro-Roman', "Times New Roman", Times, serif; font-weight: normal; font-size: 8rem;}
h2.italic { font-family:'DidotLTPro-Italic', "Times New Roman", Times, serif;}
h2.name { letter-spacing: -0.1em;}
h2.name a { display: block; width: 100%;}
h3 {font-family:"adobe-caslon-pro", "Times New Roman", Times, serif; font-size:3rem; display: inline-block; font-style:italic; color:#191a22; line-height:36px; letter-spacing:-1px; margin:0; padding: 0; }
h4 {font-family:'DidotLTPro-Roman', "Times New Roman", Times, serif; }
h4 {font-size:24px; color:#f05c45; font-weight:bold; line-height:39px; margin:0px 0 15px 0; }
.project-detail h4, .team-detail h4 {margin:0 0 0 0; }
.works h4 {margin:10px 0 0 0}
h4.next-to-tab {margin:0px 0 0px 0; }
h4 a {text-decoration:none; }
h5 {font-size:18px; font-weight:600; color:#fff; line-height:1; display:inline-block; padding:8px 15px 3px 15px; }

span.line_wrap { position:relative; display:inline-block; }
span.line.orange { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #F37021; -webkit-transition: width 0.2s ease-in; }
span.line.lime { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #9ACA3F; -webkit-transition: width 0.2s ease-in; }
span.line.babyblue { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #44C8F5; -webkit-transition: width 0.2s ease-in; }
span.line.pink { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #F3859B; -webkit-transition: width 0.2s ease-in; }
span.line.purple { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #BF8AD6; -webkit-transition: width 0.2s ease-in; }
span.line.yellow { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #D7DF23; -webkit-transition: width 0.2s ease-in; }
span.line.mint { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #94FFD1; -webkit-transition: width 0.2s ease-in; }
span.line.cornflower { display:inline-block; position:absolute; left:0; top:50%; width:0; margin-top: -25px; border-top:20px solid #4f77f9; -webkit-transition: width 0.2s ease-in; }
span.line_wrap:hover span.line { width:100%; }

.social_icons li {float: left; padding: 10px;}
.social_icons {position: absolute; right: 20px; z-index: 9999;}
.social_icons .fa-facebook:hover { color: #F37021;}
.social_icons .fa-twitter:hover { color: #9ACA3F;}
.social_icons .fa-instagram:hover { color: #BF8AD6;}
/* End Headings
--------------------------------------------------------------------------------------------------------*/


/* =Main Content
--------------------------------------------------------------------------------------------------------*/
header { width:100%; position:relative; margin-bottom: 20px; }
header h3 { margin-top: 20px; }
.container { padding:0px; width:100%; position:relative; margin:0;}
.col1-1 { width:1500px; }
.col1-1-narrow { width:500px; height:500px; }
.col1-2 { width:550px; float:left; }
.col1-2.440 {padding-right:20px; width:440px; }
.col1-2.paddingleft-20 {padding-left:20px; width:440px; }
.col2-3 { width:620px; margin:10px; float:left; }
.col1-3 { width:300px; margin:10px; float:left; }
.col1-3.paddingright-20 {padding-right:20px; width:280px; }
.col1-3.pics { width:300px; height:auto; margin:5px; float:left; }
#blog .col1-3 {height:166px; }
.col1-3.blog {padding-top:1px }
.break { height:53px; position:relative; }
.images { display:block; position:relative; padding:4px; border:1px solid #cecece; background:#fff;}
.images.with-border { padding:4px; border:1px solid #d0ceca; background:#fff; margin:10px 0;}
.overflow {overflow:hidden; }
.logo { width:147px; height:106px; text-align:center; padding-top:37px; float:left; margin-right:6px; margin-bottom:6px;}
.barrier {height:4px; width:940px; background:#d0ceca; display:inline-block; margin:10px 10px 20px 10px; }
.project-detail {width:300px; float:left; margin-left:30px; }
.team-detail {width:250px; float:left; margin-left:20px; margin-top:10px; }
.news-detail {width:220px; float:left; }
iframe {margin: 20px 0;}
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =Main Nav
--------------------------------------------------------------------------------------------------------*/
.toggle {height:102px; width:100%; font-size:48px; font-weight:600; text-transform:uppercase; line-height:98px; cursor:pointer; }
.name { background:#edece8; height:102px; text-transform: uppercase; line-height:98px; }
.current .name {color:#000; }
.hidden { padding:0px; }
.hidden .space {position:relative; display:block; height:21px; }

.inner-toggle { color:#6D6E71; cursor:pointer; }
.inner-toggle.inner-current { color: #000 !important; }
.inner-toggle.inner-current span.title-italic { color: #000 !important; }
.inner-hidden { padding: 0px; }
.inner-hidden .space {position:relative; display:block; height:21px; }

/* End Main Nav
--------------------------------------------------------------------------------------------------------*/


/* =Image Hover
--------------------------------------------------------------------------------------------------------*/
.images img { display: block; max-width: 100% !important; width:100%; z-index:9 }

.tab:before {content:''; height:0; width:0; border-width:6px 6px 6px 6px; border-style:solid; border-color:#444 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); position:absolute; bottom:-12px; left:50%; margin-left:-6px; }
.tab.news:before {content:''; height:0; width:0; border-width:6px 6px 6px 6px; border-style:solid; border-color:rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #444; position:absolute; left:56px; top:19px;  }
.tab {background-color:#444; width:50px; height:50px; position:relative; display:inline-block; float:left; margin:9px 20px 0px 0px}
.tab.news { height:101px;}

.date { background:#444; padding:7px 0px 0 0px; color:#f6f5f1; font-size:22px; font-weight:600; text-align:center}
.date span {font-size:11px; text-transform:uppercase; letter-spacing:1px; display:block }
.news .border {width:34px; background:#666; height:1px; display:block; margin:0 auto; margin-top:50px; }

.icons { position:absolute !important; left:0px; top:0px; height:50px; width:50px; }
.email {background:url(../images/bg-email.png) no-repeat; background-size:24px 24px; }
.xing {background:url(../images/bg-xing.png) no-repeat; background-size:24px 24px; }
.google {background:url(../images/bg-googleplus.png) no-repeat; background-size:24px 24px; }
.tweat {background:url(../images/bg-tweat.png) no-repeat; background-size:24px 24px; } 
.twitter {background:url(../images/bg-twitter.png) center no-repeat #fff; background-size:32px 32px; } 
.facebook {background:url(../images/bg-facebook.png) no-repeat; background-size:24px 24px; }
.pinterest {background:url(../images/bg-pinterest.png) no-repeat; background-size:24px 24px; }
.instagram {background:url(../images/bg-instagram.png) no-repeat; background-size:24px 24px; }
.vimeo {background:url(../images/bg-vimeo.png) no-repeat; background-size:24px 24px; }
.skype {background:url(../images/bg-skype.png) no-repeat; background-size:24px 24px; }
.dribble {background:url(../images/bg-dribble.png) no-repeat; background-size:24px 24px; }
.link {background:url(../images/bg-link.png) center no-repeat; background-size:24px 24px; }
.video {background:url(../images/bg-video.png) center no-repeat; background-size:24px 24px; }
.bubble {background:url(../images/bg-bubble.png) center no-repeat; background-size:24px 24px; }
.quote {background:url(../images/bg-heart.png) center no-repeat; background-size:24px 24px; }
.slideshow {background:url(../images/bg-slideshow.png) center no-repeat; background-size:28px 15px; }
.aside {background:url(../images/bg-aside.png) center no-repeat; background-size:23px 23px; }
.close {background:url(../images/bg-close.png) center no-repeat; background-size:18px 18px; width:48px; height:48px; position:absolute; right:0px; top:0px; border:1px solid #c7c7c7;}
.design {background:url(../images/bg-design.png) center no-repeat; background-size:25px 22px; }
.magic {background:url(../images/bg-magic.png) center no-repeat; background-size:24px 24px; }
.coding {background:url(../images/bg-coding.png) center no-repeat; background-size:24px 24px; }

/*.collapse {display:none }
.current .collapse {background:url(../images/bg-close.png) center no-repeat; background-size:18px 18px; width:48px; height:48px; position:absolute; right:0px; top:25px; display:block; text-indent:-9999px; }*/
/* End Image Hover
--------------------------------------------------------------------------------------------------------*/


/* =jCarousel
--------------------------------------------------------------------------------------------------------*/
.jcarousel-skin-tango2 .jcarousel-direction-rtl { direction: rtl; }
.jcarousel-skin-tango2 .jcarousel-container-horizontal { width: 960px; }
.jcarousel-skin-tango2 .jcarousel-clip { overflow: hidden; }
.jcarousel-skin-tango2 .jcarousel-item-placeholder { background: #fff; color: #000; position:relative }
.jcarousel-skin-tango2 .jcarousel-next-horizontal { margin: 0px 0 0; z-index:20; display: block; position: absolute; top: 116px; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; display:inline-block; width:46px; height:78px; background:url(../images/bg-next.png) center no-repeat; background-size:15px 22px; right:20px; border: 0; border-left:1px solid #fff }
.jcarousel-skin-tango2 .jcarousel-next-disabled-horizontal {background:none !important; border:0; cursor:default }
.jcarousel-skin-tango2 .jcarousel-prev-horizontal { margin: 0px 0 0; z-index:20; display: block; position: absolute; top: 116px; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; display:inline-block; width:46px; height:78px; background:url(../images/bg-prev.png) center no-repeat; background-size:15px 22px; left:20px; border: 0; border-right:1px solid #fff }
.jcarousel-skin-tango2 .jcarousel-prev-disabled-horizontal {background:none !important; border:0; cursor:default }
/* End jCarousel
--------------------------------------------------------------------------------------------------------*/


/* =Lists
--------------------------------------------------------------------------------------------------------*/
ul.list { position:relative; margin:0px 0px 20px 0px; }
ul.category { position:relative; margin:0px 0px 25px 0px; }
ul.list li { padding-left:25px; background:url(../images/bg-bullet.png) no-repeat 3px 5px; background-size:6px 6px; font-weight:normal; font-size:14px; line-height:21px; }
ul.check li { background:url(../images/bg-check.png) no-repeat 3px 5px; background-size:13px 11px; }
ul.category li {background:none !important; padding-left:0; border-bottom:1px solid #d0ceca; padding-bottom:5px; margin-bottom:4px; }
ul.category li span {float:right; }
ul.list li a, ul.list li a span {color:#444; }
ul.list li a:hover, ul.list li a span:hover {color:#f05c45; }
/* =End Lists
--------------------------------------------------------------------------------------------------------*/


/* =Footer
--------------------------------------------------------------------------------------------------------*/
footer { padding:52px 0 0 0px; position:relative; font-size:11px; color:#58595B; line-height:18px; font-family:Arial, Helvetica, sans-serif; }
footer .alignright {text-align:right; }
footer .alignleft {}
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =Social
--------------------------------------------------------------------------------------------------------*/
ul.social { margin-bottom:9px; display:block;}
header ul.social {float:right; margin-right:9px; padding-top:56px; }
ul.social.team {float:left; width:25px; margin-top:19px; margin-left:5px; }
.social li { display:inline-block; margin:0px 1px;}
.social li a { display:block; }
ul.social a {text-indent:-9000px; text-decoration:none; height:24px; width:24px;}
ul.social.team li {margin:3px 0; }
/* End Social
--------------------------------------------------------------------------------------------------------*/