/* 1. CSS RESET
================================================================================ */

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption,center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
b, strong {font-weight: bold;}
img {color: transparent; font-size: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;}
ol, ul {list-style: none;}
li {display: list-item;}
table {border-collapse: collapse; border-spacing: 0;}
th, td, caption {font-weight: normal; vertical-align: top; text-align: left;}
q {quotes: none;}
q:before, q:after {content: ''; content: none;}
sub, sup, small {font-size: 75%;}
sub,sup {line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
svg {overflow: hidden;}
a{list-style: none; text-decoration: none;}
a:active{outline: none;}
a:focus{ outline: none;}
:focus {outline: 0;}




/* Buttons - big button style
----------------------------------------------------------------------------- */

#btn{
    padding: 10px 15px;
    float: left;

    color: #fff;
    font: 15px Myriad Pro, sans-serif;

    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;

    box-shadow: 0 1px 1px #ccc;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    -o-box-shadow: 0 1px 1px #ccc;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;

    cursor: pointer;
}

a.btn,
a.btn:hover{
    color: #fff;
}



/*   2. 960GS BY NATHAN SMITH 
        licensed under GPL and MIT
============================================================================= */

/* `Container
----------------------------------------------------------------------------- */
.container_50 {margin-left: auto; margin-right: auto; width: 960px;}

/* `Grid >> Global
---------------------------------------------------------------------------- */
.grid_100 {display: inline; float: left; margin-left: 310px; margin-right: 10px; margin-bottom: 20px;}
.push_100, .pull_100 {position: relative;}
.grid_6 {display: inline; float: left; margin-left: 10px; margin-right: 10px; margin-bottom: 30px;}
.push_6, .pull_6 {position: relative;}
.grid_25 {display: inline; float: left; margin-left: -60px; margin-right: 10px; margin-bottom: 30px;}
.push_25, .pull_25 {position: relative;}
.grid_55 {display: inline; float: left; margin-left: 10px; margin-right: 10px; margin-bottom: 10px;}
.push_55, .pull_55{position: relative;}


/* 8.3. PORTFOLIO
================================================================================ */
#portfolio-filter{  
    border: 1px solid #a4a4a4;
    float: left;   
    border-radius: 5px;
    height: 30px;
}

#portfolio-filter li{
    float: left;
    background: #eaeaea;
    height: 30px;
    position: relative;
    border-left: 1px solid #a4a4a4;
}

#portfolio-filter li:before{
    content: "";
    background: url('../images/portfolio/filter.png') no-repeat 0 center;
    width: 11px;
    height: 32px;
    display: block;
    position: absolute;
    top: -1px;
    left: -7px;
}

#portfolio-filter li:first-child{
    border-left: none;
    border-radius: 4px 0 0 4px;
}

#portfolio-filter li:last-child{
    border-radius: 0px 4px 4px 0px;
}
#portfolio-filter li:first-child:before{
    background: none;
    padding-left: 10px !important;
}

#portfolio-filter li a{
    font: 13px Myriad Pro, sans-serif;
    color: #494949;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 7px;
    display: block;
}

#portfolio-filter:hover li:first-child:before,
#portfolio-filter li.active:first-child:before{
    background: none;
}

#portfolio-filter li:hover a, 
#portfolio-filter li.active a{
    color: #fff;
}

.portfolio-image{
    margin-bottom: 20px;
    display: block;
}

.grid_4 .caption-title{
    float: left;
    width: 200px;
    margin-right: 20px;
}

.grid_25 .caption-title{
    float: left;
    width: 700px;
    margin-right: 20px;
}
.grid_6 .caption-title{
    float: left;
    width: 360px;
    margin-right: 20px;
}


figcaption{
    border-bottom: 1px solid #d2d0d0;
    padding-bottom: 20px;
}

.caption-title .title{
    font: 22px Myriad Pro, sans-serif;
    color: #494949;
    font-weight: 600;
        width: 100%;
    display: block;
}

.caption-title .subtitle{
    font: 17px Myriad Pro, sans-serif;
    color: #959595;
    margin-top: 0;
        width: 100%;
    display: block;
}

.caption-hover{
    float: left;
    width: 80px;
    display: none;
}

.caption-hover li{
    float: left;
    margin-right: 5px;
}

.caption-hover li:last-child{
    margin-right: 0;
}

.portfolio-zoom a{
    background-image: url('../images/portfolio/portfolio-zoom.png');
    background-color: #171516;
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 35px;
}

.pagination.portfolio{
    margin-bottom: 50px;
    float: right;
}





/* Infromation boxes - ERROR BOX
----------------------------------------------------------------------------- */
.error-box{
    background: #fadddd;
    border: 1px solid #fcc1c1;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
	width: 556px;
}

.error-box div{
    background: url('error-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #d86d6d;
    text-shadow: 0 1px 0 #fff;
}


.infobox{
    background: #e0f2ff;
    border: 1px solid #c1def2;
	border-radius: 3px;
    float: left;
	margin-left: 230px;
    margin-bottom: 10px;
}

.infobox p{
    background: url('info-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #61adb0;
    text-shadow: 0 1px 0 #fff;
}


/* Infromation boxes - NOTE BOX
----------------------------------------------------------------------------- */
.note-box{
    background: #f8f6bc;
    border: 1px solid #e7e48b;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.note-box p{
    background: url('../images/note-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #989426;
    text-shadow: 0 1px 0 #fff;
}


/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------- */
.alpha {margin-left: 0; margin-bottom: 0;}
.omega {margin-right: 0; margin-bottom: 0;}

/* `Clear Floated Elements
----------------------------------------------------------------------------- */
.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.clearfix:before, .clearfix:after, .container_12:before, .container_12:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}
.clearfix:after, .container_12:after {clear: both;}


body{
    background: url('../images/bkg.png') repeat !important;
    font: 14px Myriad Pro, sans-serif;
    line-height: 20px;
    color: #959595;
}

#page-wrap{
    background: #fff;
    width: 1180px;
    margin: 0 auto;
    border: 1px solid #bbbbbb;
}



/* 4. TYPOGRAPHY
================================================================================ */

/* Headings
----------------------------------------------------------------------------- */
h1 {
    font: 22px 'BebasRegular';
    color: #494949;
    text-transform: uppercase;
    margin-bottom: 24px; 
}

h2{
    font: 19px 'BebasRegular';
    color: #494949;
    text-transform: uppercase;
    margin-bottom: 22px;
}

h3{
    font: 17px 'BebasRegular';
    color: #494949;
    text-transform: uppercase;
    margin-bottom: 20px;
}

h4{
    font: 24px 'BebasRegular';
    color: #494949;
    text-transform: uppercase;
    margin-bottom: 18px;
}

h5{
    font: 22px 'BebasRegular';
    color: #494949;
    text-transform: uppercase;
    margin-bottom: 16px;
}

h6{
    font: 18px 'BebasRegular';
    color: #494949;
    text-transform: uppercase;
    margin-bottom: 14px;
}

p{
    font: 16px Myriad Pro, sans-serif;
    line-height: 20px;
    color: #494949;
}

p + p{
    display: block;
    margin-top: 16px;
}

p + ul{
    display: block;
    margin-top: 16px;
}

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6{
    display: block;
    margin-top: 40px;
}

p + a.read-more{
    display: block;
    margin-top: 16px;
	color: red;
} 

p + img{
    margin-top: 20px;
}

p + strong{
    display: block;
    margin-top: 16px;
}

strong + p{
    display: block;
    margin-top: 16px;
}

strong + img{
    margin-top: 20px;
}

a{
    font: 16px Myriad Pro, sans-serif;
    color: #959595;
}

a.read-more{
    text-align: right;
    font-size: 16px;
    font-family: Myriad Pro, sans-serif;
    font-style: italic;
    font-weight: 400;
    color: #666;
}

blockquote{
    background: #f6f6f6 url('../images/quote.png') no-repeat 10px 10px;
    float: left;
    padding: 20px;
    text-indent: 30px;
    font: italic 16px Myriad pro;
}

p + blockquote, a + blockquote{
    display: block;
    margin-top: 20px;
}

blockquote + p, blockquote + a{
    display: block;
    margin-top: 20px;
    float: left;
}

img.float-left{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    margin-top: 15px;
}

span.dropcap-black{
    background: #494949;
    font: 20px 'BebasRegular', sans-serif;
    color: #fff;
    padding: 2px 8px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
}


/* 5. HEADER STYLES
============================================================================= */
#header{
    width: 100%;
    margin: 0 auto;
}

#header-inner{
    width: 940px;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: auto;
    margin-left: auto;
}

#logo-info-container{
    width: 940px;
    float: left;
}
#logo{
    width: 149px;
    height: 20px;
    float: left;
    margin-right: 30px;
}

/* Nav container
----------------------------------------------------------------------------- */
#nav-container{
    margin:0px 0px 0px 230px;
    float: left;
    width: 436px;

    background: rgb(63,65,69);
    background: -moz-linear-gradient(top, rgba(63,65,69,1) 0%, rgba(47,49,53,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,65,69,1)), color-stop(100%,rgba(47,49,53,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(63,65,69,1) 0%,rgba(47,49,53,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(63,65,69,1) 0%,rgba(47,49,53,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(63,65,69,1) 0%,rgba(47,49,53,1) 100%); /* IE10+ */

    border-radius: 5px;
}

#nav-responsive{
    display: none;
}

#nav{
    height: 100%;
    list-style: none;
    float: left;
    width: 437px;
}

#nav > ul{
    display: block !important;
    padding-bottom: 1px;
    height: 48px;
    padding-left: 1px;
}

#nav li{
    float: left;
    position: relative;
    padding: 15px 20px 15px 20px; 
    cursor: pointer;

    border-top: 1px solid #45484c;
    border-right: 1px solid #45484c;
    border-left: 1px solid #45484c;
    margin-right: 2px;
}

#nav li:first-child{
    border-radius: 3px 0 0 3px;
    border-left: 0px;
}

#nav li a{
    float: none;
    display: block;
    font: 14px Myriad Pro, sans-serif;
    color: #fff;   
}

.nav > li > a{
    border-right: 1px solid #ececec;
}

.nav > li:hover > a{
    border-right: 1px solid #d74142;
}

#nav li:hover a, 
#nav li a.active, 
#nav li:hover .icon-nav{
    color: #fff;
}

/* MAIN NAVIGATION SECOND LEVEL
----------------------------------------------------------------------------- */
#nav li ul{
    display: none;
    position: absolute;	
    padding-top: 15px;
    margin: 0;
    top: 100%;
    left: 0;
    z-index: 100;

}

#nav li ul li{
    border-top: 1px solid #444;
    border-right: 1px solid #444;
    border-left: 1px solid #444;
    padding: 12px 20px !important;  
    background: #3f4145;
}

#nav li ul li:first-child{
    border-radius: 4px 4px 0 0;
}

#nav li ul li:last-child{
    border-radius: 0 0 4px 4px;
}


#nav li ul li a{
    text-transform: none !important;
    font: 12px 'Myriad pro', sans-serif;
    line-height: 15px;
    color: #8f8f8f !important;

    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}

#nav li ul li:last-child{
    border-bottom: 1px solid #ececec;
}

#nav li ul li:hover{
    border-right: 1px solid #55575a;
    border-top: 1px solid #55575a;
    border-left: 1px solid #55575a;
}

#nav li ul li:last-child:hover{
    border-bottom: 1px solid #55575a;
}

#nav li ul li:only-child{
    border-radius: 4px;
}

#nav li ul li:hover > a{
    color: #fff !important;
}

#nav li ul li, #nav li ul li a{
    float: none;
}

#nav li ul li a {
    width: 130px;
    display: block;
}

/* 6. PAGE TITLE
================================================================================ */
.page-title{
    width: 100%;
    float: left;
    border-bottom: 1px solid #d2d0d0;
    margin-bottom: 40px;
}

.page-title .title{
    float: left;
    position: relative;
    bottom: -1px;
}

.page-title .title h1{
    color: #494949;
    font-size: 22px;
    text-transform: uppercase;
    padding-bottom: 30px;
    margin-bottom: 0;
}

.page-title .slogan{
    float: right;
}

.page-title .slogan h1{
    color: #a7a7a7;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* 7. CONTENT WRAPPER STYLES
================================================================================ */
#content-wrapper{
    margin: 0 auto;
    padding-bottom: 10px;
    width: 1140px;
    overflow: hidden;  
}

.section-title{
    width: 100%;
    float: left;
    border-bottom: 1px solid #d2d0d0;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

.section-title h1,
.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5{
    color: #494949;
    text-transform: uppercase;
    padding-bottom: 10px;
    display: inline;
    margin-bottom: 0;
}


/* 8. PAGES
============================================================================= */

/* 8.1. HOME PAGE
============================================================================= */

.service .icon{
    float: left;
    width: 55px;
    height: 55px;
    margin-right: 20px;
}

.service .description h1,
.service .description h2,
.service .description h3,
.service .description h4,
.service .description h5,
.service .description h6{
    margin-bottom: 5px;
}

.grid_4.service .description{
    float: left;
    width: 285px
}

/* CLIENT TESTIMONIALS
----------------------------------------------------------------------------- */

#client-carousel.carousel-li > li{
    width: 146px;
    margin-right: 0;
    float: left;
    height: auto !important;
    border: 1px solid #eee;
}

.clients .caroufredsel_wrapper{
    height: 98px !important;
}

/* 9. FOOTER
================================================================================ */
#footer-wrapper{
    width: 100%;
    background: #2e3134;
}
.copyright-container{
    width: 100%;
    float: left;
    margin: 0 auto;
    padding: 10px 0;
    margin-bottom: 0;
    background: #282a2d;
}

.copyright{
    margin-bottom: 0;
    width: 940px;
    float: none;
}

.copyright p{
    font: 12px Myriad Pro, sans-serif;  
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    width: 400px;
    margin-right: 15px;
}

.copyright span{
    color: #fff;
}
.copyright .breadcrumbs{
    padding-top: 4px;
    float: right;
    margin: 0;
}

.copyright .breadcrumbs li a{
    font: 12px Myriad Pro, sans-serif; 
    line-height: 12px;
    border-right: 1px solid #959595;
    padding-right: 7px;
    padding-left: 7px;
}

.copyright .breadcrumbs li{

    float: left;
}


/* 3.7. Social icons
----------------------------------------------------------------------------- */

.social-presentation li{
    float: left;
    margin-left: 6px;
}

.social-presentation li a{
    text-indent: -9999px;
}

.widget_social li, .team-social li, .social-presentation li{
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    margin-bottom: 10px !important;
}

.social-presentation li:hover{
    background-position: -0px -0px;
}

.social-presentation li a{
    width: 100%;
    height: 100%;
    padding-left: 40px;
    padding-top: 5px;
    display: block;
}

/* FACEBOOK */
li.facebook{
    width: 30px;
    height: 30px;
    background: url('../images/facebook.png') no-repeat 0;
    background-position: -0px -31px;
}

/* GOOGLE+*/
li.google_plus{
    width: 30px;
    height: 30px;
    background: url('../images/google.png') no-repeat 0;
    background-position: -0px -31px;
}


/* TWITTER */
li.twitter{
    width: 30px;
    height: 30px;
    background: url('../images/twitter.png') no-repeat 0;
    background-position: -0px -31px;
}
/* YOUTUBR */
li.youtube{
    width: 30px;
    height: 30px;
    background: url('../images/youtube.png') no-repeat 0;
    background-position: -0px -31px;
}


@font-face {
    font-family: 'BebasRegular';
    src: url('../font/BEBAS___-webfont.eot');
    src: url('../font/BEBAS___-webfont.eot@#iefix') format('embedded-opentype'),
         url('../font/BEBAS___-webfont.woff') format('woff'),
         url('../font/BEBAS___-webfont.ttf') format('truetype'),
         url('../font/BEBAS___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}