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

/*------------------------------------------------------------------
[Table of contents]
1. Clearfix
2. Preloader
3. Typography
4. Headings
5. Main Nav
6. Main Content
7. Column Grid
8. Icons
9. Image Hover
10. Lists
11. Footer
12. Social
-------------------------------------------------------------------*/


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


/* =2. Preloader
--------------------------------------------------------------------------------------------------------*/
#preloader { position:absolute; top:0; left:0; right:0; bottom:0; background:#000; z-index:9999; }
#status { z-index:28; position:absolute; color:#fff; top:50%; height:400px; width:100%; margin-top:-200px; }
/* horizontal centering */
.parent {width:300px; margin:0px auto; position:relative; height:400px; z-index:11}
#content .parent {position:absolute;  }
.col2-3 .parent {width:610px; }
.col1-3.half .parent {height:194px; }
.child {text-align:center;}
/* vertical centering */
.parent {display: table}
.child {display: table-cell; vertical-align: middle; padding:0 50px; }
.child span { text-transform:uppercase; }
/* End Preloader
--------------------------------------------------------------------------------------------------------*/


/* =3. Typography
--------------------------------------------------------------------------------------------------------*/
html {overflow: -moz-scrollbars-vertical; overflow-y: scroll; -webkit-font-smoothing: antialiased; }
body { font: 14px Georgia, "Times New Roman", Times, serif; color:#555; background:#000;  }
strong { font-weight:600; }
em {font-size:17px; }
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; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; }
p { line-height:21px; padding:15px 0px 0 0px; }
p.small {font-size:12px; font-style:italic; }
p.alt {font-family:'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#8d8d8d }
.images p.small {color:#fff; text-align:center !important; padding-top:2px }
p.small span {font-size:11px; }
p.small span a {color:#2b2b2b; font-style:normal; font-size:12px;  }
#preloader p.small {font-size:11px; display:block; text-transform:uppercase; font-style:normal; font-weight:700;  letter-spacing:1px; margin-top:3px; font-family: "Open Sans", Arial, Helvetica, sans-serif; -o-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); -moz-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); -webkit-text-shadow:-1px -1px 0px rgba(0, 0, 0, 0.25); text-shadow:1px 1px 0px rgba(0, 0, 0, 0.25);}
p.big {font-size:16px; line-height:24px; font-style:italic; }
.white-right2 p.big, .white-bottom p.big, .white p.big {font-style:normal !important; } 
#heading p.big, .images p.big {color:#fff; display:block;/*margin-top:-7px;*/width: 42.4%;right: 0px;margin-right: 40px;margin-top: -118px; position:absolute }
.images p.big {margin-top:-11px; }
blockquote { line-height:27px; padding:19px 40px 17px 55px; margin:20px 0px 4px 0px; border-bottom:1px dotted #2b2b2b; border-top:1px dotted #2b2b2b; color:#333; font-size:20px; font-style:italic; }
blockquote:before {content:"“"; float:left; display:block; margin-left:-64px; font-family:Georgia, "Times New Roman", Times, serif; font-size:96px; margin-top:30px; font-weight:400 }
blockquote span {font-size:14px; display:block; margin-top:9px; color:#8d8d8d}
.uppercase {text-transform:uppercase }
p.small.uppercase {font-size:11px; }
p a { color:#8d8d8d; text-decoration:none; }
#heading p a, .images.no-icon p a {color:#fff; opacity:0.8; }
a p {color:#555; }
p a:hover { color:#555; }
#heading p a:hover, #heading p a.selected, .images.no-icon p a:hover {color:#fff; opacity:1; }
p.bottom {position:absolute; bottom:35px; width:220px; }
code {font:13px 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-style:normal; line-height:1.5; display:block; }
pre { padding:13px 40px 0 40px; }
span.arrow {font-family:'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:13px !important }
a:hover span.arrow {padding-left:5px; }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =4. Headings
--------------------------------------------------------------------------------------------------------*/
h1#logo { display:block; position:relative; float:left; z-index:12 }
h1#logo a { display:block; background:url(../images/bg-logo.png) center no-repeat; background-size:166px 21px; width:166px; /*try to keep it at 41px*/ height:41px; text-indent:-9999px; }
.tagline {float:left; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:12px; font-weight:400; padding:0px 0 0 20px; margin:0px auto; position:relative; display:table; height:41px; font-style:italic; z-index:12; color:#fff; opacity:0.8 }
.tagline span { display: table-cell; vertical-align: middle; }
.hentry h1, h2, h3, h4, h5 { line-height:1.3; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#2b2b2b; display:block; position:relative; letter-spacing:4px; text-transform:uppercase; font-weight:700; }
.hentry h1 a, h2 a, h3 a, h4 a, h5 a { color:#2b2b2b; text-decoration:none }
h2 {font-size:48px; color:#fff; padding-bottom:1px; }
.white-bottom h2 {font-size:24px; color:#2b2b2b; text-transform:none; letter-spacing:0; }
h3 {font-size:18px; letter-spacing:2px; padding-bottom:3px; padding-top:19px; }
.blog h3, .service h3 {text-transform:none; letter-spacing:0; padding-top:4px; padding-bottom:2px; font-size:19px; }
h4 {font-size:14px; color:#fff; letter-spacing:1px; }
.images.no-icon h4 {margin-top:0 }
h5 {font-size:15px; padding-bottom:0px; padding-top:15px; color:#555; font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight:600; text-transform:none; margin-bottom:-7px; letter-spacing:0 }
.align-top {padding-top:0 !important }
/* End Headings
--------------------------------------------------------------------------------------------------------*/
.hoveremail:hover {
	text-decoration:underline
}

/* =5. Main Nav
--------------------------------------------------------------------------------------------------------*/
nav { margin:0px auto; position:relative; display:table; height:41px; z-index:12; float:right; }
#nav { display: table-cell; vertical-align: middle; white-space:nowrap }
#nav li { float:left; margin:0px 0px 0px 25px; position:relative; padding:9px 0 5px 0; }
#nav li.active { border-bottom:2px solid #fff;}
#nav li a { color:#fff; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:12px; font-weight:600; text-decoration:none; text-transform:uppercase; display:inline-block; opacity:0.8; cursor:pointer; letter-spacing:1px }
#nav li a:hover, #nav li a.active, #nav li a.selected { opacity:1; }
#nav li ul {position:absolute; margin-top:10px; margin-left:-15px; left:0; padding:7px 15px; width:auto; background:#fff; -webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.2) ; box-shadow:0 1px 0 rgba(0, 0, 0, 0.2); display:none; }
#nav li ul:before {content:''; height:0; width:0; border-width:7px 7px 7px 7px; border-style:solid; border-color:rgba(251,251,251,0) rgba(255,255,255,0) rgba(255,255,255,1) rgba(255,255,255,0); position:absolute; top:-14px; margin-left:0px; border-top-style:inset; }
#nav li ul li {float:none; margin:0px; padding:0 }
#nav li ul li a {padding:6px 0 7px 0; border-bottom:1px dotted #2b2b2b; font-size:11px; color:#8d8d8d; display:block }
#nav li ul li a.last {border:0 }
#nav li ul li:hover a {color:#2b2b2b; }
#nav li:hover ul { display:block }
/* End Main Nav
--------------------------------------------------------------------------------------------------------*/


/* =6. Main Content
--------------------------------------------------------------------------------------------------------*/
header { position:relative; z-index:5555; width:920px; margin:0 auto; margin-top:40px; padding:23px 40px; background:url(../images/pic01z.jpg) center top no-repeat; height:400px; }
.portfolio header { background:url(../images/pic01c.jpg) center top no-repeat; }
.alternative header { background:url(../images/pic01b.jpg) center top no-repeat; }
.awards header { background:url(../images/pic01f.jpg) center top no-repeat; }
.press header { background:url(../images/pic01.jpg) center top no-repeat; }
.blog header { background:url(../images/pic01f.jpg) center top no-repeat; }
.contact header { background: none !important; height:87px !important }
.no-header-image header, .one-page header {background:none; height:auto; }
#content {width:100%; position:relative; z-index:56; height:auto; margin-top:5px;}
.container { padding:0px; width:930px; position:relative; margin:0 auto; height: auto !important;}
#heading {position:absolute; top:0; left:0; width:100%; z-index:11; }
#heading .parent {width:100%; }
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =7. Column Grid
--------------------------------------------------------------------------------------------------------*/
.col3-3 { width:920px; margin:5px; position:relative }
.col1-3 { width:300px; margin:5px; float:left; position:relative }
.col2-3 { width:610px; margin:5px; float:left; position:relative }
.col1-3.half {height:195px; }
.col1-3.connect {width:310px; height:400px; margin:0; float:left; overflow:hidden; z-index:10 }
.col1-3.half.connect {width:300px; height:195px; }
.col2-3.connect {margin:0; float:none; }
.white-right2:before {content:''; height:0; width:0; border-width:10px 10px 10px 10px; border-style:solid; border-color:rgba(251,251,251,0) rgba(255,255,255,1) rgba(255,255,255,0) rgba(255,255,255,0); position:absolute; left:-20px; top:38px; border-left-style:inset; }
.white-bottom:before {content:''; height:0; width:0; border-width:10px 10px 10px 10px; border-style:solid; border-color:rgba(251,251,251,0) rgba(255,255,255,0) rgba(255,255,255,1) rgba(255,255,255,0); position:absolute; top:-20px; margin-left:0px; border-left-style:inset; }
a:visited .white-right2:before { border-color:transparent rgba(255,255,255,1) transparent transparent !important; }
.white-right2, .white-bottom {background:#fff; padding:15px 40px 35px 40px; z-index:10; margin:0 }
.white-bottom {min-height:205px; height:auto !important; }
.white {background:#fff; padding:15px 40px 35px 40px; }
.col1-3.auto, .col2-3.auto, .col3-3.auto {height:auto !important;  }
.col2-3.white-bottom.auto {padding-bottom:36px; }
.element .col1-3, .element .col2-3, .element .col3-3 {margin:0 }
.element {overflow:hidden }
.column1 {width:260px; padding-right:40px; float:left }
.column2 {width:580px; border-left:1px dotted #2b2b2b; padding:0px 0px 20px 40px; margin-top:3px; float:left }
.column-count2 {-webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:35px; -moz-column-gap:35px; column-gap:35px; }
.borderline { border-bottom:1px dotted #2b2b2b; height:1px; position:relative; display:block; margin:18px 0px 5px 0px; width:100%; }
.borderline.second { margin:2px 0px 5px 0px; }
.overlay { display:block; position:absolute; top:0; left:0; background-color:rgba(0,0,0,.5); z-index:10; width:100%; height:100%; }
.overlay-home { display:block; position:absolute; top:0; left:0; /*background-color:rgba(0,0,0,.5);*/ z-index:10; width:100%; height:100%; }
.alternative .images .overlay .overlay-home {display:none }
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =8. Icons
--------------------------------------------------------------------------------------------------------*/
.icons { display:block; height:48px; width:48px; z-index:100; margin:0 auto; margin-bottom:12px; }
.images .icons {opacity:0;  }
.alternative .images .icons {opacity:1; position:absolute; right:40px; top:40px; }
.icons.text {width:auto; font-size:18px; color:#fff; font-style:italic; border:2px solid #fff; border-radius:300px; padding:11px 18px; display:inline-block; line-height:18px; }
.close { background:url(../images/bg-close.png) center no-repeat; background-size:48px 48px; position:absolute; right:35px; top:35px; z-index:28; width:48px; height:48px; display:block }
.icons.play {background:url(../images/bg-play.png) center no-repeat; background-size:48px 48px; }
.icons.illustration {background:url(../images/bg-illustration.png) center no-repeat; background-size:48px 48px; }
.icons.camera {background:url(../images/bg-camera.png) center no-repeat; background-size:48px 48px; }
.icons.drawing {background:url(../images/bg-drawing.png) center no-repeat; background-size:48px 48px; }
.icons.zoom {background:url(../images/bg-zoom.png) center no-repeat; background-size:48px 48px; }
.icons.link {background:url(../images/bg-link.png) center no-repeat; background-size:48px 48px; }
.icons.video {background:url(../images/bg-video.png) center no-repeat; background-size:48px 48px; }
.icons.quote {background:url(../images/bg-quote.png) center no-repeat; background-size:48px 48px; }
/* Social Icons */
.linkedin {background:url(../images/bg-linkedin.png) center no-repeat; background-size:50px 50px; }
.dribbble {background:url(../images/bg-dribbble.png) center no-repeat; background-size:50px 51px; }
.googleplus {background:url(../images/bg-googleplus.png) center no-repeat; background-size:50px 50px; }
.twitter {background:url(../images/bg-twitter.png) center no-repeat; background-size:50px 51px; } 
.facebook {background:url(../images/bg-facebook.png) center no-repeat; background-size:50px 51px; }
.behance {background:url(../images/bg-behance.png) center no-repeat; background-size:50px 50px; }
.skype {background:url(../images/bg-skype.png) center no-repeat; background-size:50px 51px; }
.vimeo {background:url(../images/bg-vimeo.png) center no-repeat; background-size:50px 50px; }
/* End Icons
--------------------------------------------------------------------------------------------------------*/


/* =9. Image Hover
--------------------------------------------------------------------------------------------------------*/
.images { display:block; position:relative; }
.images img {width:100%; display: block; max-width: 100% !important; z-index:9 }
img{box-shadow: #000 0 0 0}
.info-wrapper {margin-top:-58px; }
.title, .subtitle { z-index:1001; position:absolute; top:36px; left:40px; width:auto; cursor:pointer; pointer-events: none; }
.subtitle { top: 52px; left:40px !important; }
.title-wrap, .subtitle-wrap { overflow: hidden; position: relative; }
.title-wrap h4, .subtitle-wrap p { overflow: hidden; white-space: nowrap; color:#fff; padding:0px; margin:0 !important }
/* End Image Hover
--------------------------------------------------------------------------------------------------------*/


/* =10. Lists
--------------------------------------------------------------------------------------------------------*/
ul.unordered-list, .hentry ul { list-style: disc; line-height:21px; padding:15px 0px 0 0px; margin-left:24px; }
ul.list {line-height:21px; padding-top:15px; }
ol { list-style: decimal; line-height:21px; padding:15px 0px 0 0px; margin-left:24px;  }
ul.unordered-list a, .hentry ul a, ul.list a, ol a { color:#8d8d8d; text-decoration:none; }
ul.unordered-list a:hover, .hentry ul a:hover, ul.list a:hover, ol a:hover { color:#555; text-decoration:none; }
/* =End Lists
--------------------------------------------------------------------------------------------------------*/


/* =11. Footer
--------------------------------------------------------------------------------------------------------*/
footer { height:auto; position:relative; padding:0px 35px 35px 35px; text-align:center; z-index:100 }
footer p {display:inline-block; margin:0 10px; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size:14px; letter-spacing:2px; font-style:normal; text-transform:uppercase; color:#fff; opacity:0.7 }
footer p a { color:#fff; border:0 }
footer p span { font-family:Georgia, "Times New Roman", Times, serif; text-transform:none; letter-spacing:0; font-style:italic }
footer p a:hover { color:#fff; }
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =12. Social
--------------------------------------------------------------------------------------------------------*/
ul.social { letter-spacing:0; margin-top:10px;  }
.social li { display:inline-block; margin:0px 2px;}
.social li a { display:block; opacity:0.5 }
ul.social a {text-indent:-9000px; text-decoration:none; height:52px; width:52px;}
.social li a:hover {opacity:1 }
/* End Social
--------------------------------------------------------------------------------------------------------*/

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: black;
  outline: 1px solid slategrey;
}
/* =13. Googlemaps
--------------------------------------------------------------------------------------------------------*/
#map {width:610px; height:400px; 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
--------------------------------------------------------------------------------------------------------*/

/* form */
.error-email { color:red;font-size:12px; line-height: 12px !important; padding-top:10px !important}
.message { color: green; line-height: 12px !important; padding-top:10px !important }

/*scrollbar*/
/*scrollbar*/
#with-scrollbar {
	float: right !important;
	background-color:#fff;
	min-height: 597px;
}