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

/* =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
--------------------------------------------------------------------------------------------------------*/


/* =Typography
--------------------------------------------------------------------------------------------------------*/
body { font: 18px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#999; background:#1b1c1e; letter-spacing:-1px; }
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; }
p { line-height:36px; font-size:25px; font-weight:300; letter-spacing:-1px }
.col2-3 p, .col1-1 p { padding:20px 40px 0px 40px; }
.col1-3 p { padding:14px 20px 0px 20px; }
p.comments { padding:14px 40px 0px 40px; }
.title p {font-size:18px; color:#a3a3a3; padding:0px 20px 0px 20px; font-weight:400; }
.infos p {font-size:18px; padding:0px 20px 0px 20px; font-weight:400; }
p.blockquote { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:normal; padding:21px 20px 20px 20px; clear:both }
p.blockquote span {font: 12px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#777; text-transform:uppercase; letter-spacing:1px; }
.col2-3 p.blockquote { padding:20px 40px 20px 60px; }
.col1-1 p.blockquote { padding:20px 80px 0px 80px; }
.no-heading {padding-top:20px !important; }
p span {color:#fc6f1a; }
a { color:#c7c7c7; text-decoration:none; }
a:hover { text-decoration:none; color:#fc6f1a; }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =Headings
--------------------------------------------------------------------------------------------------------*/
#logo-container {height:126px; width:100%; background-color:rgba(255, 255, 255, 0.98) !important; background-color:#fff; text-align:center;}
h1#logo { display:block; margin:0 auto; padding-top:39px; margin-bottom:0px; }
h1#logo a { display:inline-block; color:#242527; font-size:60px; font-weight:700; text-transform:uppercase; text-decoration:none; letter-spacing:-0.02em }
h1#logo a span {font-family:Arial, Helvetica, sans-serif; }
.slogan {color:#a3a3a3; font-size:11px; padding:0; margin-top:-14px; font-weight:400; letter-spacing:0; }
h2, h3, h4 { line-height:1.25; letter-spacing:-1px }
h2 { font-size:28px; font-weight:700; color:#c7c7c7; padding:47px 40px 0px 40px; }
h2.blog-heading { padding:31px 40px 0px 40px; }
.clients h2 {padding-bottom:23px; }
.col1-3 h2 { padding:21px 20px 0px 20px; }
h3 { font-size:52px; font-weight:300; color:#999; line-height:68px; padding:40px; padding-top:14px; letter-spacing:-3px }
h3 span {color:#fc6f1a; }
h4 { font-size:25px; font-weight:700; color:#c7c7c7; padding:47px 40px 0px 40px; }
.title h4 { color:#1b1c1e; padding:15px 20px 0px 20px; line-height:1; }
.infos h4 { padding:25px 20px 0px 20px; line-height:1; }
/* End Headings
--------------------------------------------------------------------------------------------------------*/
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}

/* =Main Content
--------------------------------------------------------------------------------------------------------*/
#wrapper { margin-top:0px; width:100%; height:229px; position:relative; z-index:29; margin-bottom:29px; }
.container { padding:0px; width:960px; position:relative; margin:0 auto;}
#container { margin-bottom:100px;}
.col1-1 { width:940px; margin:10px; background:#242527; }
.col1-3 { width:300px; height:300px; margin:10px; float:left; background:#242527; }
.col2-3 { width:620px; height:620px; margin:10px; float:left; background:#242527; }
.break { height:50px; position:relative; }
.images { display:block; position:relative; -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; overflow:hidden }
.title {height:84px; width:300px; background:#fbfbfb; position:absolute; bottom:0px; }
.logo { width:206px; height:99px; text-align:center; border:1px solid #1b1c1e; border-left:0px; padding-top:33px; float:left; margin-top:1px; margin-bottom:1px; }
.logo.last {border-right:0px; }
.portfolio, .about {overflow:hidden; }
.load-more {background:url(../images/bg-load.png) center 45px no-repeat #fc6f1a; background-size:26px 26px; display:block; height:216px; width:220px; font-size:18px; line-height:26px; padding:84px 40px 0px 40px; color:#fbfbfb; letter-spacing:-1px; cursor:pointer !important; text-align:center}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .load-more {background:url(../images/bg-load@2x.png) center 45px no-repeat #fc6f1a; }
}
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =Single Work
--------------------------------------------------------------------------------------------------------*/
.dedicated-page-navi {width:100%; height:10px; margin-bottom:29px; position:fixed; z-index:300; text-align:center; margin-top:0px; background-color:rgba(255, 255, 255, 0.98) !important; background-color:#fff; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); }
.close {position:absolute; top:10px; right:30px; width:58px; height:48px; background:url(../images/bg-close.png) center 10px no-repeat #fbfbfb; background-size: 18px 18px; background-color:rgba(255, 255, 255, 0.98) !important; background-color:#fff; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); cursor:pointer; }
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .close { background:url(../images/bg-close@2x.png) center 10px no-repeat #fbfbfb; }
}
.dedicated-page {padding-top:20px; }
.infos.single-work {width:300px; height:auto !important; border:0; padding:0; z-index:1; background:#242527; position:relative; }
.videos {width:450px !important; height:263px !important; border:none; margin:0px; display:block; z-index:8; }
.videos.single-work {width:610px !important; height:353px !important;  }
/* =End Single Work
--------------------------------------------------------------------------------------------------------*/


/* =Twitter
--------------------------------------------------------------------------------------------------------*/
#twitter_update_list { background:#fc6f1a; padding-top:40px; height:260px; }
ul.jta-tweet-list li { background:url(../images/bg-twitter.png) center 0px no-repeat; background-size:32px 32px; display:block; min-height:100px; font-size:18px; line-height:26px; padding:44px 40px 0px 40px; color:#fbfbfb; letter-spacing:-1px; text-align:center }
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  ul.jta-tweet-list li { background:url(../images/bg-twitter@2x.png) center 0px no-repeat; }
}
ul.jta-tweet-list li a.jta-tweet-link { color:#fbfbfb; text-decoration:none; font-size:18px !important; text-transform:none; -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; margin-right:4px; line-height:20px; }
ul.jta-tweet-list li a.jta-tweet-link:hover { text-decoration:none; color:#242527; }
ul.jta-tweet-list li a.jta-tweet-timestamp-link { font-size:12px !important; color:#fbfbfb; text-decoration:none; -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; text-transform:uppercase; display:block; cursor:default }
ul.jta-tweet-list li a.jta-tweet-timestamp-link:hover { text-decoration:none; color:#fbfbfb; }
span.jta-tweet-twitter-bird-icon, span.jta-tweet-twitter-bird-icon:hover { display:none }
a.jta-tweet-a { color:#242527; text-decoration:none; }
a.jta-tweet-a:hover { color:#242527; }
/* End Twitter
--------------------------------------------------------------------------------------------------------*/


/* =Googlemaps
--------------------------------------------------------------------------------------------------------*/
#map {width:620px; height:620px; margin:0; border:0}
#map:before, #map:after {	background: none; content: ''; left: 0;	position: absolute;	top: 0;	width: 100%; }
#map:after {	bottom: 0; top: auto; }
/* End Googlemaps
--------------------------------------------------------------------------------------------------------*/


/* =Image Hover
--------------------------------------------------------------------------------------------------------*/
.images img {width:100%; display: block; z-index:9 }
.infos {width:300px; height:300px; top:0; left:0px; border:0; padding:0; display:none; z-index:1; background:#242527; position:absolute; }
.infos-single-work {width:300px; height:300px;  }
.movable-content {z-index:2; position:absolute; width:300px; height:300px; }
.tab.first {margin-top:10px; }
.tab.last {border-bottom:1px solid #1b1c1e; }
.tab {border-top:1px solid #1b1c1e; width:280px; height:26px; padding:19px 0px 19px 20px; }
.tab:hover {background-color:#2c2d2f; color:#999; }
a .tab {color:#999; }
a .tab:hover {color:#999; }
.icons { float:left; height:24px; width:24px; margin-right:21px; margin-top:1px; background:url(../images/glyphicons.png) no-repeat; display:inline-block }
.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; } 
.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; }
.view-more {background:url(../images/bg-view-more.png) no-repeat; background-size:31px 17px; width:31px; margin-left:-3px; margin-top:4px;}
.zoom {background:url(../images/bg-zoom.png) no-repeat; background-size:25px 25px; }
.link {background:url(../images/bg-link.png) no-repeat; background-size:24px 24px; }
.pdf {background:url(../images/bg-file.png) no-repeat; background-size:24px 24px; }
.video {background:url(../images/bg-video.png) no-repeat; background-size:24px 24px; }
.bubble {background:url(../images/bg-bubble.png) no-repeat; background-size:24px 24px; }
.quote {background:url(../images/bg-heart.png) no-repeat; background-size:24px 24px; }
.slideshow {background:url(../images/bg-slideshow.png) no-repeat; background-size:28px 15px; width:28px; margin-top:5px; margin-left:-1px; }
.aside {background:url(../images/bg-aside.png) no-repeat; background-size:23px 23px; }
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.email {background:url(../images/bg-email@2x.png) no-repeat; }
.xing {background:url(../images/bg-xing@2x.png) no-repeat; }
.google {background:url(../images/bg-googleplus@2x.png) no-repeat; }
.tweat {background:url(../images/bg-tweat@2x.png) no-repeat; } 
.facebook {background:url(../images/bg-facebook@2x.png) no-repeat; }
.pinterest {background:url(../images/bg-pinterest@2x.png) no-repeat; }
.instagram {background:url(../images/bg-instagram@2x.png) no-repeat; }
.vimeo {background:url(../images/bg-vimeo@2x.png) no-repeat; }
.skype {background:url(../images/bg-skype@2x.png) no-repeat; }
.dribble {background:url(../images/bg-dribble@2x.png) no-repeat;  }
.view-more {background:url(../images/bg-view-more@2x.png) no-repeat; }
.zoom {background:url(../images/bg-zoom@2x.png) no-repeat; }
.link {background:url(../images/bg-link@2x.png) no-repeat; }
.pdf {background:url(../images/bg-file@2x.png) no-repeat; }
.video {background:url(../images/bg-video@2x.png) no-repeat; }
.bubble {background:url(../images/bg-bubble@2x.png) no-repeat; }
.quote {background:url(../images/bg-heart@2x.png) no-repeat; }
.slideshow {background:url(../images/bg-slideshow@2x.png) no-repeat; }
.aside {background:url(../images/bg-aside@2x.png) no-repeat; }
}
/* End Image Hover
--------------------------------------------------------------------------------------------------------*/


/* =Blog
--------------------------------------------------------------------------------------------------------*/
.reply { font: 12px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#fc6f1a; text-transform:uppercase; letter-spacing:1px; padding-top:4px; }
.blog-icon {border-bottom:1px solid #1b1c1e; width:280px; height:26px; padding:19px 0px 19px 20px; background:#2c2d2f; }
a .blog-icon:hover {background-color:#242527; color:#999; }
a .blog-icon {color:#999; }
a .blog-icon:hover {color:#999; }
.blog-icon.comment {width:860px; padding:19px 40px 19px 40px; }
.padding-right {padding-right:20px; }
.padding-left {padding-left:20px; }
.reply-comment {border-bottom:1px solid #1b1c1e; width:100%; height:1px; padding:51px 0 0 0; }
/* End Blog
--------------------------------------------------------------------------------------------------------*/


/* =Footer
--------------------------------------------------------------------------------------------------------*/
footer { background:#242527; width:100%; height:180px; margin:0px 0px 0 0px; padding:50px 0 0 0px;  }
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =Social
--------------------------------------------------------------------------------------------------------*/
ul.social { margin-top:25px; margin-bottom:0px; letter-spacing:0; }
.social li { display:inline-block; margin:0px 7px;}
.social li a { display:block; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
ul.social a {text-indent:-9000px; text-decoration:none; height:24px; width:24px;}
/*ul.social .facebook a {  background:url(../images/bg-facebook.png) center no-repeat }
ul.social .dribble a { text-indent:-9000px; text-decoration:none; height:24px; width:24px; background:url(../images/bg-dribble.png) center no-repeat }
ul.social .flickr a { text-indent:-9000px; text-decoration:none; height:24px; width:24px; background:url(../images/bg-flickr.png) center no-repeat }
ul.social .vimeo a { text-indent:-9000px; text-decoration:none; height:24px; width:24px; background:url(../images/bg-vimeo.png) center no-repeat }
ul.social .skype a { text-indent:-9000px; text-decoration:none; height:24px; width:24px; background:url(../images/bg-skype.png) center no-repeat }
ul.social .google a { text-indent:-9000px; text-decoration:none; height:24px; width:24px; }
ul.social .twitter a { text-indent:-9000px; text-decoration:none; height:24px; width:24px; background:url(../images/bg-tweat.png) center no-repeat }*/
/* End Social
--------------------------------------------------------------------------------------------------------*/


/* =Isotope
--------------------------------------------------------------------------------------------------------*/
.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
/**** Isotope CSS3 transitions ****/
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property:    -moz-transform, opacity; -ms-transition-property:     -ms-transform, opacity; -o-transition-property:         top, left, opacity; transition-property:         transform, opacity; }
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }
/* End: Recommended Isotope styles */

/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

#options { width:100%; height:103px; /*position:fixed;*/ z-index:300; text-align:center; margin-top:0px; background-color:rgba(255, 255, 255, 0.98) !important; background-color:#fff; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.1); box-shadow:0 1px 0 rgba(0, 0, 0, 0.1);}
#options ul { margin: 0; list-style: none; display:inline-block; padding-top:37px; }
#options li { float: left;  }
#options li a { color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; letter-spacing:0.05em; text-decoration:none; text-transform:uppercase; display:inline-block; padding:5px 17px;  margin:0px; }
#options li a:hover, #options li a.selected { color:#242527;}
#options.fixed { position: fixed; top: 0px; }
/* End Isotope
--------------------------------------------------------------------------------------------------------*/


.preloader { background:url(../images/ajax-loader.gif) center center no-repeat #ffffff; }

@media only screen and (min-width: 1600px) {
.container { padding:0px; width:1600px; position:relative; margin:0 auto; }
}

@media only screen and (min-width: 1280px) {
.container { padding:0px; width:1280px; position:relative; margin:0 auto; }
}

/* Standard 960 or larger (browsers) */
@media only screen and (min-width: 960px) {

}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.container { padding:0px; width:640px; position:relative; }
.col1-1 {width:620px; }
.blog-icon.comment {width:540px; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 767px) {
#wrapper {margin-bottom:5px; height:199px; }
.container { padding:0px; width:300px; position:relative;}
.col1-1 {width:300px; }
.col1-3 { width:300px; height:auto; padding-bottom:20px; }
.col1-3.no-padding, .col1-3.portfolio, .col1-3.about {padding-bottom:0px; }
.col1-3.portfolio, .col1-3.about {height:300px; }
.col2-3 { width:300px; height:auto; }
.element {margin:10px 0px !important; }
.blog-icon.comment {width:220px; }
.load-more {height:66px !important; width:220px;}

h1#logo a { display:inline-block; color:#242527; font-size:50px; font-weight:700; text-transform:uppercase; text-decoration:none; letter-spacing:-0.02em }
h3 {line-height:36px; font-size:25px; font-weight:300; padding:14px 20px 20px 20px !important; letter-spacing:-1px}
h2 { font-size:28px; font-weight:700; color:#c7c7c7; padding:21px 20px 0px 20px !important; }
.clients h2 {padding-bottom:23px !important; }

p { line-height:28px; font-size:18px; font-weight:400; letter-spacing:-1px; padding-left:20px !important; padding-right:20px !important; }

.logo { width:300px; height:89px; text-align:center; border:0px; border-top:1px solid #1b1c1e; padding-top:23px; float:left; }
.logo.last { border:0px; border-top:1px solid #1b1c1e; border-bottom:1px solid #1b1c1e; }
.logo.final { border:0px; border-top:1px solid #1b1c1e; }

#map {width:300px; height:300px; margin:0; border:0}

.break { height:20px; position:relative; }
.reply-comment {padding:21px 0 0; }
.blog-icon.comment {padding:19px 20px; width:260px; }
.blog-icon.comment .icons { display:none; }
.blog-icon .responsive {display:block; float:none; }
.blog-icon.responsive {height:auto !important; }
.images img {max-height:300px; }

#nav-bg {background:#fbfbfb; padding-top:10px; padding-bottom:10px; }
#nav-button {display:block; background:#FC6F1A; padding:7px 10px; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); width:26px; margin:0 auto; cursor:pointer; }
.nav-bar {background-color:#f5f5f5; border-radius:1px; box-shadow:0 1px 0 rgba(0, 0, 0, 0.25); display:block; width:18px; height:2px; margin:2px auto; }
#logo-container {height:106px; }
h1#logo {padding-top:19px; }

#options { height:auto; margin-top:0px; padding-bottom:10px; }
#options ul { padding-top:0px; }
#options li { float: none; height:auto; display:none }
#options li a { color:#a5a5a5; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; letter-spacing:0.05em; text-decoration:none; text-transform:uppercase; display:inline-block; padding:5px 17px;  margin:0px; }
#options.fixed { position: relative; top: 0px; }
}