@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
13. Googlemaps
14. Comments
-------------------------------------------------------------------*/

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

.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/logo.png) center no-repeat;
    background-size: 221px 21px;
    width: 221px; /*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;
}

.one-page h3 {
    text-transform: none;
    letter-spacing: 0;
    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
--------------------------------------------------------------------------------------------------------*/

/* =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 11px 0;
}

#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;
    height: 400px;
}

.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;
}

#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;
    height: 400px;
    margin: 5px;
    position: relative
}

.col1-3 {
    width: 300px;
    height: 400px;
    margin: 5px;
    float: left;
    position: relative
}

.col2-3 {
    width: 610px;
    height: 400px;
    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 {
    height: 205px;
}

.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, .3);
    z-index: 10;
    width: 100%;
    height: 100%;
}

.alternative .images .overlay {
    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 95px 35px;
    text-align: center;
    z-index: 100
}
.footer-content{
    margin-top:30px;
}

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: 40px;
    margin-bottom: 20px;
}

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

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

/* =14. Comments
--------------------------------------------------------------------------------------------------------*/
#comments {
    position: relative;
    height: auto !important;
    margin-bottom: -20px;
}

#comments ol.commentlist {
    list-style: none;
    line-height: 21px;
    padding: 15px 0px 0 0px;
    margin-left: 0;
}

#comments ol.commentlist li {
    padding-bottom: 20px;
}

#comments ul.children {
    overflow: inherit;
    padding-left: 55px;
}

#comments .user {
    float: left;
    height: 70px;
    width: 70px;
    position: relative;
    margin-top: 10px;
}

#comments .message {
    overflow: hidden
}

#comments .box {
    margin-left: 20px;
    position: relative
}

#comments h2 {
    font-size: 15px;
    padding-bottom: 0px;
    padding-top: 6px;
    color: #555;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 0px;
    letter-spacing: 0
}

#comments .meta {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8d8d8d
}

#comments .meta .reply {
    float: right
}


.hidden {
    display: none;
}


/* End Comments
--------------------------------------------------------------------------------------------------------*/