@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300&subset=latin,latin-ext);

/* ============================================================================

============================================================================= */

/* -----------------------------------------------------------------------------

       CSS CONTENTS
        
        1. CSS reset
        2. 960 GS by nathan Smith 
        3. Elements
            3.1. Accordion
            3.2. Information boxes
            3.3. Buttons
            3.4. Tabs
            3.5. Check list
            3.6. Table
            3.7. Social icons
            3.8. Social streams
        4. Typography
        5. Header styles
        6. Page title
        7. Content wrapper styles
        8. Page styles
            8.1. Home page
            8.2. About
            8.3. Portfolio pages
            8.4. Blog pages
            8.5. Contact
        9. Footer styles
        10. Media queries


-------------------------------------------------------------------------------- */



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



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

/* `Container
----------------------------------------------------------------------------- */

html { overflow-y: scroll; }
html { background: url(../img/senkom_background.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.container_12 {margin-left: auto; margin-right: auto; width: 960px;}

/* `Grid >> Global
----------------------------------------------------------------------------- */
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {display: inline; float: left; margin-left: 10px; margin-right: 10px; margin-bottom: 50px;}
.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 {position: relative;}

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

/* `Grid >> 12 Columns
----------------------------------------------------------------------------- */
.container_12 .grid_1 {width: 60px;}
.container_12 .grid_2 {width: 140px;}
.container_12 .grid_3 {width: 220px;}
.container_12 .grid_4 {width: 300px;}
.container_12 .grid_5 {width: 380px;}
.container_12 .grid_6 {width: 460px;}
.container_12 .grid_7 {width: 540px;}
.container_12 .grid_8 {width: 620px;}
.container_12 .grid_9 {width: 700px;}
.container_12 .grid_10 {width: 780px;}
.container_12 .grid_11 {width: 860px;}
.container_12 .grid_12 {width: 940px;}


/* `Grid >> Nested columns
----------------------------------------------------------------------------- */
.container_12 [class^="grid_"] [class^="grid_"]{
    margin-bottom: 0px;
}


/* `Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------- */
.container_12 .prefix_1 {padding-left: 80px;}
.container_12 .prefix_2 {padding-left: 160px;}
.container_12 .prefix_3 {padding-left: 240px;}
.container_12 .prefix_4 {padding-left: 320px;}
.container_12 .prefix_5 {padding-left: 400px;}
.container_12 .prefix_6 {padding-left: 480px;}
.container_12 .prefix_7 {padding-left: 560px;}
.container_12 .prefix_8 {padding-left: 640px;}
.container_12 .prefix_9 {padding-left: 720px;}
.container_12 .prefix_10 {padding-left: 800px;}
.container_12 .prefix_11 {padding-left: 880px;}

/* `Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------- */
.container_12 .suffix_1 {padding-right: 80px;}
.container_12 .suffix_2 {padding-right: 160px;}
.container_12 .suffix_3 {padding-right: 240px;}
.container_12 .suffix_4 {padding-right: 320px;}
.container_12 .suffix_5 {padding-right: 400px;}
.container_12 .suffix_6 {padding-right: 480px;}
.container_12 .suffix_7 {padding-right: 560px;}
.container_12 .suffix_8 {padding-right: 640px;}
.container_12 .suffix_9 {padding-right: 720px;}
.container_12 .suffix_10 {padding-right: 800px;}
.container_12 .suffix_11 {padding-right: 880px;}

/* `Push Space >> 12 Columns
----------------------------------------------------------------------------- */
.container_12 .push_1 {left: 80px;}
.container_12 .push_2 {left: 160px;}
.container_12 .push_3 {left: 240px;}
.container_12 .push_4 {left: 320px;}
.container_12 .push_5 {left: 400px;}
.container_12 .push_6 {left: 480px;}
.container_12 .push_7 {left: 560px;}
.container_12 .push_8 {left: 640px;}
.container_12 .push_9 {left: 720px;}
.container_12 .push_10 {left: 800px;}
.container_12 .push_11 {left: 880px;}

/* `Pull Space >> 12 Columns
----------------------------------------------------------------------------- */
.container_12 .pull_1 {left: -80px;}
.container_12 .pull_2 {left: -160px;}
.container_12 .pull_3 {left: -240px;}
.container_12 .pull_4 {left: -320px;}
.container_12 .pull_5 {left: -400px;}
.container_12 .pull_6 {left: -480px;}
.container_12 .pull_7 {left: -560px;}
.container_12 .pull_8 {left: -640px;}
.container_12 .pull_9 {left: -720px;}
.container_12 .pull_10 {left: -800px;}
.container_12 .pull_11 {left: -880px;}

/* `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('../img/bkg.png') repeat !important;*/
    font: 14px Myriad Pro, sans-serif;
    line-height: 20px;
    color: #959595;
}

#page-wrap{
    background: rgba(255, 255, 255,0.80);
    width: 1000px;
    margin: 0 auto;
    /*border: 1px solid #bbbbbb;*/
}


/*   3. ELEMENTS
============================================================================= */

/* 3.1. Accordion
----------------------------------------------------------------------------- */
.grid_3 .accordion .content{
    padding-left: 0;
}

.accordion{
    position: relative;
    float: left;
}
.accordion .title{ 
    float: left; 
    margin-bottom: 3px;
    width: 100%;
    background: #f9f9f9;
    border: 1px solid #ececec;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

.accordion .title a{
    background: url('../img/accordion-open.png') no-repeat right center;
}

.accordion .title.active a{
    background: url('../img/accordion-close.png') no-repeat right center;
}

.accordion .title:last-child{
    margin-bottom: 0 !important;

}
.accordion .content{
    display:none;
    float: left;
    overflow: hidden;
    margin-bottom: 10px;
    margin-top: 10px;
}

.accordion-content-wrapp{
    float: left;
    width: 100%;
    margin-bottom: 10px;
}
.accordion .title a{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 15px;
    color: #5b5b5b;
    cursor:pointer;
    display: block;    
    font: bold 14px Myriad Pro,sans-serif;    
    display: block;
}


/* 3.2. Infromation boxes - INFO BOX
----------------------------------------------------------------------------- */
.infobox{
    background: #e0f2ff;
    border: 1px solid #c1def2;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

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


/* Infromation boxes - WARNING BOX
----------------------------------------------------------------------------- */
.warning-box{
    background: #f3efd3;
    border: 1px solid #dedabd;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.warning-box p{
    background: url('../img/warning-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 27px;
    color: #a19c7a;
    text-shadow: 0 1px 0 #fff;
}

/* Infromation boxes - SHOP BOX
----------------------------------------------------------------------------- */
.shop-box{
    background: #b4dafb;
    border: 1px solid #9fc7eb;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.shop-box p{
    background: url('../img/shop-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 27px;
    color: #fff;
    text-shadow: 0 1px 0 #a3c2fc;
}

/* 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('../img/note-box.png') no-repeat 0 center;
    margin: 10px;
    padding-left: 25px;
    color: #989426;
    text-shadow: 0 1px 0 #fff;
}

/* Infromation boxes - SUCCES BOX
----------------------------------------------------------------------------- */
.success-box{
    background: #ebfdd7;
    border: 1px solid #cef4a4;
    border-radius: 3px;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

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

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

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



/* 3.3. Buttons - big button style
----------------------------------------------------------------------------- */
.buttons-presentation{
    margin-bottom: 10px;
    float: left;
}

p + .btn{
    margin-top: 14px;
}

ul + .btn{
    margin-top: 14px;  
}

.btn + .btn{
    margin-left: 10px;
}
.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;
}

.btn.small,
.btn.black.small,
.btn.grey.small{
    font-size: 12px;
    padding: 8px 10px;
}

/* Black button */
.btn.black{
    padding: 10px 15px;
    float: left;

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

    background: rgb(115,115,115); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(115,115,115,1) 0%, rgba(81,81,81,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(115,115,115,1)), color-stop(100%,rgba(81,81,81,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(115,115,115,1) 0%,rgba(81,81,81,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(115,115,115,1) 0%,rgba(81,81,81,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(115,115,115,1) 0%,rgba(81,81,81,1) 100%); /* IE10+ */

    border: 1px solid #464646;
    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;
}

.btn.black:hover{
    background: rgb(81,81,81); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(81,81,81,1) 0%, rgba(115,115,115,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,81,81,1)), color-stop(100%,rgba(115,115,115,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(81,81,81,1) 0%,rgba(115,115,115,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(81,81,81,1) 0%,rgba(115,115,115,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(81,81,81,1) 0%,rgba(115,115,115,1) 100%); /* IE10+ */
}


/* GREY BUTTON */
/* Black button */
.btn.grey{
    padding: 10px 15px;
    float: left;

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

    background: rgb(251,251,251); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(233,233,233,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(233,233,233,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(233,233,233,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(233,233,233,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(233,233,233,1) 100%); /* IE10+ */

    border: 1px solid #cdcdcd;
    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;
}

.btn.grey:hover{
    background: rgb(233,233,233); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(233,233,233,1) 0%, rgba(251,251,251,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,233,233,1)), color-stop(100%,rgba(251,251,251,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(251,251,251,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(251,251,251,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(251,251,251,1) 100%); /* IE10+ */
}

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

a.btn.grey:hover{
    color: #888;
}


/* 3.4. Tabs
----------------------------------------------------------------------------- */
.tabs{
    width: 100%;
    overflow: hidden;
    float: left;
}

.tabs li{
    background: #f9f9f9;
    float: left;
    border-top: 1px solid #ececec;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    overflow: hidden;
    position: relative;
    padding: 0;
    line-height: 32px;
}

.tabs li:first-child{
    border-left: 1px solid #ececec;
}

.tabs li a{    
    color: #555;    
    padding: 0px 16px;
    font: 14px Myriad Pro, Arial, sans-serif;
    line-height: 33px;
    padding-top: 2px;
}

.tabs li.active{
    border-bottom: 1px solid white;
    background: #fff;
}

.tab-content-wrap{
    border: 1px solid #ececec;    
    margin-top: -1px;
    overflow: hidden;
    width: 100%;
    float: left;
}

.tab-content{
    padding: 15px;
    background: #fff;
}


/* 3.5. Check list
----------------------------------------------------------------------------- */
.check-list li{
    padding-left: 26px;
    padding-bottom: 5px;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 5px;
}



/* 3.6. Table
----------------------------------------------------------------------------- */
.data-table{
    width: 100%;
    border: 1px solid #ececec;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.data-table .heading{
    background: #f9f9f9;
    border-bottom: 1px solid #ececec;
}

.data-table .heading td{
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-right: 1px solid #ececec;
    color: #5b5b5b;
    font: 18px Myriad Pro;
}

.data-table .data td{
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border-bottom: 1px solid #ececec;
    border-right: 1px solid #ececec;
}

/* 3.7. Social icons
----------------------------------------------------------------------------- */
.social-presentation ul{
    float: left;
}

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

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

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


/* ADD THIS */
li.addthis{
    width: 30px;
    height: 30px;
    background: url('../img/addthis.png') no-repeat 0;
    background-position: -0px -31px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* SHARE THIS */
li.sharethis{
    width: 30px;
    height: 30px;
    background: url('../img/sharethis.png') no-repeat 0;
    background-position: -0px -31px;
}

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

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

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

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

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

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

/* 3.8. Social streams
----------------------------------------------------------------------------- */
.aside{
    width: 280px !important;
    padding-left: 20px;
}
.social-feed{
    float: left;
    width: 100%;
}

.aside .social-feed li{
    width: 54px;
    height: 54px;
    border: 1px solid #ebebeb;
    padding: 2px;
    float: left;
    margin-right: 7px;
}

.aside .social-feed li:nth-child(3n){
    margin-right: 0;
}
.aside .social-feed li a img, .social-feed li a img{
    width: 54px;
    height: 54px;
}


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

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

h2{
    font: 28px 'Roboto Condensed';
    color: #494949;
    /*text-transform: uppercase;*/
    margin-bottom: 22px;
}

h3{
    font: 26px 'Roboto Condensed';
    color: #494949;
    /*text-transform: uppercase;*/
    margin-bottom: 20px;
}

h4{
    font: 24px 'Roboto Condensed';
    color: #494949;
    /*text-transform: uppercase;*/
    margin-bottom: 18px;
}

h5{
    font: 22px 'Roboto Condensed';
    color: #494949;
    /*text-transform: uppercase;*/
    margin-bottom: 16px;
}

h6{
    font: 18px 'Roboto Condensed';
    color: #494949;
    /*text-transform: uppercase;*/
    margin-bottom: 14px;
}

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

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

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

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: 14px;
} 

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

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

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

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

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

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

blockquote{
    background: #f6f6f6 url('../img/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 'Roboto Condensed', 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: 158px;
    height: 78px;
    float: left;
    margin-right: 30px;
    margin-top: -23px;
    margin-bottom: -23px;
}

#contact-info{
    float: right;
}

.create-account{
    background: url('../img/user.png') no-repeat 0 2px;
    float: left;
    margin-right: 20px;
}

.create-account a{
    padding-left: 25px;
}

.e-mail-info{
    background: url('../img/mail.png') no-repeat 0 4px;
    float: left;
}

.e-mail-info a{
    padding-left: 27px;
}

/* Nav container
----------------------------------------------------------------------------- */
#nav-container{
    float: left;
    margin-top: 40px;
    width: 940px;

    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%;
    margin:0;
    list-style: none;
    float: left;
    width: 97%;
    margin-right: 10px;
}

#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: 999;

}

#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 a.active{
    background: #3f4145 !important;
    color: #8f8f8f !important;
}
#nav li ul li.active{
    background: #3f4145 !important;
    color: #8f8f8f !important;
}

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

/* MAIN NAVIGATION THIRD LEVEL
----------------------------------------------------------------------------- */
#nav li ul li ul {
    display: none;
}

#nav li ul li:hover ul {
    left: 100%;
    top: -1px;
    padding-top: 0 !important;
    padding-left: 5px;
}

/* SEARCH
----------------------------------------------------------------------------- */
#search{
    float: left;
    width: 170px;
    padding-right: 10px;
    padding-left: 10px;
    background: #fff;
    border-radius: 10px;
    margin-top: 12px;
    height: 24px;

}

#search-bkg{
    width: 127px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    font: 12px Myriad Pro;
    border: none;
    float: left;
}

#search-submit{
    background: url('../img/search.png') no-repeat 0 5px;
    width: 13px;
    border: none;
    text-indent: -9999px;
    float: left;
}

/* 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: 28px;
    /*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: 960px;
    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_3.service .description{
    width: 145px;
    float: left;
}

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

.grid_5.service .description{
    float: left;
    width: 305px;
}

.grid_6.service .description{
    float: left;
    width: 385px;
}

.grid_7.service .description{
    float: left;
    width: 465px;
}

.grid_8.service .description{
    float: left;
    width: 545px;
}

.grid_9.service .description{
    float: left;
    width: 625px;
}

.grid_10.service .description{
    float: left;
    width: 705px;
}

.grid_11.service .description{
    float: left;
    width: 685px;
}

.grid_12.service .description{
    float: left;
    width: 865px;
}


/* LATEST BLOG POSTS
----------------------------------------------------------------------------- */
.latest-blog-posts li{
    float: left;
    margin-bottom: 20px;
}

.latest-blog-posts li:last-child{
    margin-bottom: 0;
}

.latest-blog-posts li img{
    float: left;
    width: 140px;
    margin-right: 20px;
}

.latest-blog-posts .gsWrapper{
    float: left;
}

.latest-post-body{
    float: left;
}

.grid_8 .latest-post-body{
    width: 460px;
}

.latest-post-meta{
    float: left;
    width: 100%;
}

.latest-post-meta li{
    float: left;
    margin-right: 10px;
}
.latest-post-meta li.read-more{
    float: right;
    margin-right: 0;
}

/* TWEETS
----------------------------------------------------------------------------- */
.tweet-home ul{
    float: left;
}

.tweet-home li{
    background: url('../img/tweet-home.png') 0 30px no-repeat;
    padding-left: 63px;
    padding-bottom: 30px;
    border-bottom: 1px solid #d2d0d0;
    padding-top: 30px;
    float: left;
}

.tweet-home li:first-child{
    padding-top: 0;
    background: url('../img/tweet-home.png') 0 0 no-repeat;
}


/* Entry note
----------------------------------------------------------------------------- */
.entry-note{
    text-align: right;
    padding-bottom: 30px;
    border-bottom: 1px solid #d2d0d0;
    float: left; 
}

.entry-note .text{
    width: 700px;
    float: left;
    margin-right: 20px;
    border-right: 5px solid #ebebeb;
    padding-right: 40px;
}

.entry-note h1{
    margin-bottom: 0;    
}

.entry-note span{
    font: 30px 'Roboto Condensed', sans-serif;
}

.entry-note a.btn{
    display: table;
    margin: 0 auto;
    float: none;
    margin-top: 20px;
}


/* 8.2. ABOUT US PAGE
============================================================================= */
.skills-bars li{
    background: #f9f9f9;
    border: 1px solid #eee;
    margin-bottom: 20px;
}

.skills-bars li span{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    display: block;
    padding-right: 10px;
}

span.sixthy{
    width: 60%;
    color: #fff;
}

span.seventhy{
    width: 70%;
    color: #fff;
}

span.eighty{
    width: 80%;
    color: #fff;
}

span.seventhy-five{
    width: 75%;
    color: #fff;
}

.team img{
    margin-bottom: 20px;
}

.team-info{
    width: 100%;
    margin-bottom: 10px;
    float: left;
}

.name-position{
    width: 110px;
    float: left;
    margin-right: 10px;
}

.name-position h6{
    text-transform: none;
    font: bold 16px Myriad Pro, sans-serif;
}

.name-position h6{
    margin-bottom: 0;
}

.team-social{
    width: 100px;
    float: right;
    margin-top: 5px;
}

.team-social li{
    float: left;
    margin-right: 5px;
}

.team-social li a{
    text-indent: -9999px;
    display: block;
}

.team-social li:last-child{
    margin-right: 0;
}

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

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

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


/* 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('../img/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_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: 14px 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('../img/portfolio/portfolio-zoom.png');
    background-color: #171516;
    width: 35px;
    height: 35px;
    display: block;
    border-radius: 35px;
}

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

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

/* PORTFOLIO SINGLE
----------------------------------------------------------------------------- */
.carousel-pagination{
    float: right;
    margin-top: 10px;
}

.carousel-pagination a{
    float: left;
    margin-right: 4px;
}

.carousel-pagination a:last-child{
    margin-right: 0;
}

.carousel-pagination a{
    background: url('../img/carousel-bullet.png') no-repeat center;
    width: 10px;
    height: 10px;
    display: block;
    text-indent: -9999px;
}
.carousel-pagination a.selected{
    width: 10px;
    height: 10px;
    display: block;
    text-indent: -9999px;
}

.caroufredsel_wrapper{
    height: 256px !important;
}

#portfolio-carousel{
    height: auto !important;
}

#portfolio-carousel.carousel-li > li{
    width: 300px;
    margin-right: 20px;
    float: left;
    height: auto !important;
}

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

/* 8.4. BLOG
================================================================================ */
.blog-post{
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #d2d0d0;
}

/* POST INFO
----------------------------------------------------------------------------- */

.post-info{
    float: left;
    width: 605px;
    border-right: 5px solid #ebebeb;
    padding-right: 10px;
    margin-bottom: 40px;
}

.post-info h1{
    float: left;
    width: 100%;
    text-align: right;
    margin-bottom: 0;
}

.post-info > ul{
    float: right;
}

.post-info > ul li{
    float: left;
    margin-right: 30px;
    font: 22px 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    color: #959595;
}

.post-info > ul li a{
    font: 22px 'Roboto Condensed', sans-serif;
    color: #959595;
    padding-left: 3px;
}

.post-info > ul li:last-child{
    margin-right: 0;
}

/* POST INFO TAGS
----------------------------------------------------------------------------- */
.tags-span, .tags{
    float: left;
}

.tags li{
    margin-right: 5px !important;
}

.tags li:last-child{
    margin-right: 0 !important;
}

/* POST BODY
----------------------------------------------------------------------------- */
.post-body-container{
    width: 620px;
    float: left;
}

.post-body-container img, .post-body-container iframe{
    margin-bottom: 40px;
}

.post-body-container iframe{
    width: 620px;
    height: 328px;;
}

.post-meta{
    float: left;
    width: 170px;
    border-right: 5px solid #ededed;
    padding-right: 10px;
    margin-right: 25px;
}

.post-category{
    float: right;
    width: 55px;
    height: 55px;
    background: #ebebeb;
    margin-bottom: 10px;
}

.post-category a{
    text-indent: -9999px;
}

.post-date{
    display: block;
    float: left;
    width: 100%;
    text-align: right;
    font: 18px 'Roboto Condensed', sans-serif;
    color: #494949;
}

.post-text{
    float: left;
    width: 410px;
}

/* BLOG PAGINATION
----------------------------------------------------------------------------- */
.pagination{
    float: right;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-bottom: 0;
    border-bottom: none;
}

.pagination li{
    float: left;
    background: #252525;
    text-align: center;
    margin-left: 5px;
    font: 12px Myriad Pro, sans-serif;

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

.pagination li a{
    color: #fff;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 12px;
    padding-left: 12px;
    display: block;
}

.pagination li:hover a, .pagination li.active a{
    color: #fff;
}

.pagination li.arrow a{
    padding-top: 4px;
    padding-bottom: 6px;
}


/* BLOG SINGLE PAGE
----------------------------------------------------------------------------- */
.post-comments{
    width: 100%;
    float: left;
    margin-bottom: 40px;
}

.post-comments h1,
.post-comments h2,
.post-comments h3,
.post-comments h4,
.post-comments h5,
.post-comments h6{
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    font-size: 15px;
    margin-bottom: 20px;
}

.comments-li{
    margin-bottom: 50px;
}

.comments-li > li{
    width: 100%;
    margin-bottom: 30px;
}

.post-comments .comments-li .comment{
    float: left;
    min-height: 87px;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 20px;
}

.comment + .child{
    margin-top: 30px;
    margin-bottom: 30px;
    float: left;
}

.child .child{
    margin-top: 30px;
    margin-bottom: 0 !important;
    float: left;
}

/* COMMENT AVATAR
----------------------------------------------------------------------------- */

.comment .avatar{
    width: 50px;
    height: 50px;
    margin-right: 15px;
    float: left;
}

.avatar img{
    width: 50px;
    height: 50px;
}

/* COMMENT META
----------------------------------------------------------------------------- */
.comment-meta{
    color: #494949;
    font: bold 15px 'Helvetica Neue', Arial, sans-serif;
    margin: 0 0 10px 80px;
}

.comment-meta li{
    float: left;
    width: 100%;
    margin-bottom: 3px;
}

.comment-meta a{
    border-bottom: none;
    font: bold 15px 'Helvetica Neue', Arial, sans-serif;
    width: 100%;
    display: inline;
    margin-bottom: 3px;
    color: #494949;

    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.comment-meta a.author{
    font: bold 15px 'Helvetica Neue', Arial, sans-serif;
    color: #494949;
    margin-right: 5px;
}

.comment-body{
    margin-left: 80px;
}


/* BLOG POSTS CHILD COMMENT
----------------------------------------------------------------------------- */
.child{
    margin-left: 80px;
    float: left;
}


/* BLOG POSTS comment form
----------------------------------------------------------------------------- */

#respond h1,
#respond h2,
#respond h3,
#respond h4,
#respond h5,
#respond h6{
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 5px;
    font-size: 15px;
    margin-bottom: 20px;
}

#respond .text{
    background: #fbfbfb;
    border: 1px solid #e3e3e3;

    border-radius: 3px;
    float: left;
    width: 148px;
    padding: 5px 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    font: 12px 'Helvetica Neue', Arial, sans-serif;
    color: #727272;
}

#respond.email{
    margin-right: 0;
    float: left;
}

#respond .textarea{
    float: left;
    padding: 15px;
    font: 12px 'Helvetica Neue', Arial, sans-serif;
    color: #727272;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    background: #fbfbfb;
    border: 1px solid #e3e3e3;
}

#comment-reply{
    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;
}


/* SIDEBAR
-- --------------------------------------------------------------------------- */
.widget{
    float: left;
    width: 100%;
}

.widget > li{
    margin-bottom: 50px;
    width: 100%;
    float: left;
}

.widget > li .title{
    background: #ebebeb;
    height: 15px;
    margin-bottom: 15px;
    margin-top: 3px;
}

.widget > li h6{
    margin-bottom: 20px;
    background: #fff;
    margin-left: 10px;
    padding-left: 5px;
    padding-right: 10px;
    display: inline;
    position: relative;
    top: -6px;
}

.widget > li:last-child{
    margin-bottom: 0;
}

.widget li > ul{
    margin-left: 17px;
}

.widget li > ul li{
    margin-bottom: 5px;
}

.widget li li:last-child{
    margin-bottom: 0;
}

.widget_tag_cloud a{
    float: left;
    display: block;
    margin-right: 7px;
    margin-bottom: 5px;
}


/* 8.5. CONTACT PAGE
================================================================================ */
#map_canvas{
    width: 100%;
    height: 300px;
}

.contact-info li{
    margin-bottom: 5px;
}

/* CONTACT FORM */
.contact-form .text{
    background: #fbfbfb;
    border: 1px solid #e3e3e3;

    border-radius: 3px;
    float: left;
    width: 148px;
    padding: 5px 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    font: 12px 'Helvetica Neue', Arial, sans-serif;
    color: #727272;
}

.contact-form .email{
    margin-right: 0;
    float: left;
}

.contact-form .textarea{
    float: left;
    padding: 15px;
    font: 12px 'Helvetica Neue', Arial, sans-serif;
    color: #727272;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    background: #fbfbfb;
    border: 1px solid #e3e3e3;
}

.contact-form .submit{
    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;
}


/* 9. FOOTER
================================================================================ */
#footer-wrapper{
    width: 100%;
    background: #2e3134;
}

#tweet-sroll-wrapper{
    width: 100%;
    margin-bottom: 50px;
}

#tweet-sroll-wrapper .grid_12{
    margin-bottom: 0;
}

.tweet-icon{
    width: 43px;
    height: 33px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 30px;
    float: left;
    display: block;
}

.tweets-list-container{
    float: left;
    width: 867px;
    padding-top: 18px;
    padding-bottom: 18px;
}

.tweets-list-container p{
    color: #fff;
    font: 18px Myriad Pro, sans-serif;
}

.tweets-list-container li a:hover{
    color: #fff;
}


#footer h6{
    color: #fff;
    font-size: 16px;
}


#footer a.read-more{
    text-decoration: underline;
    cursor: pointer;
    float: left;
    font-style: normal;
}

#footer a.read-more:hover{
    color: #959595;
}

#footer .social-feed li{
    width: 56px;
    height: 56px;
    border: 2px solid #fff;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

#footer .social-feed li:nth-child(3n){
    margin-right: 0;
}

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

.copyright .breadcrumbs li:last-child a{
    border-right: none;
    padding-right: 0;
}

#recentcomments li{
    width: 100%;
    margin-bottom: 15px;
}

#recentcomments li a:hover{
    color: #959595;
}




/* 10. MEDIA QUERIES
================================================================================ */
@media only screen and (min-width: 768px) and (max-width: 959px){
    #content-wrapper,
    #page-wrap{
        width: 728px;
    }

    #header-inner{
        width: 688px;
    }

    #logo-info-container{
        width: 100%;
    }

    #nav-container{
        width: 100%;
    }

    #nav{
        width: 520px;
        margin-right: 10px;
    }

    #search{
        width: 130px;
    }

    #search-bkg{
        width: 90px;
    }

    img{
        max-width: 100%;
        height: auto;
    }
    
    iframe{
        max-width: 100%;
        height: auto;
    }

    /* GRIDS */
    .container_12{
        width: 708px !important;
    }

    .grid_1{
        width: 39px !important;
    }
    .grid_2{
        width: 98px !important;
    }
    .grid_3{
        width: 157px !important;
    }
    .grid_4{
        width: 216px !important;
    }
    .grid_5{
        width: 275px !important;
    }
    .grid_6{
        width: 334px !important;
    }
    .grid_7{
        width: 393px !important;
    }
    .grid_8{
        width: 452px !important;
    }
    .grid_9{
        width: 511px !important;
    }
    .grid_10{
        width: 570px !important;
    }
    .grid_11{
        width: 629px !important;
    }
    .grid_12{
        width: 688px !important;
    }

    /* HOME PAGE */
    .grid_3.service .description{
        width: 82px;
        float: left;
    }

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

    .grid_5.service .description{
        float: left;
        width: 200px;
    }

    .grid_6.service .description{
        float: left;
        width: 259px;
    }

    .grid_7.service .description{
        float: left;
        width: 318px;
    }

    .grid_8.service .description{
        float: left;
        width: 377px;
    }

    .grid_9.service .description{
        float: left;
        width: 436px;
    }

    .grid_10.service .description{
        float: left;
        width: 495px;
    }

    .grid_11.service .description{
        float: left;
        width: 554px;
    }

    .grid_12.service .description{
        float: left;
        width: 613px;
    }

    #portfolio-carousel.carousel-li > li{
        width: 216px;
    }

    #portfolio-carousel .caption-title{
        width: 100%;
        margin-right: 0;
    }
    
    .portfolio .caption-hover{
        display: none !important;
    }
    .portfolio:hover .caption-hover{
        display: none !important;
    }

    .caroufredsel_wrapper{
        height: 261px !important;
    }

    .grid_8 .latest-post-body{
        width: 292px;
    }

    #client-carousel.carousel-li > li{
        width: 170px;
    }

    .clients .caroufredsel_wrapper{
        width: 688px !important;
    }

    .tweets-list-container{
        width: 615px;
    }

    .entry-note .text{
        width: 489px;
    }

    
    /* ABOUT PAGE */
    .name-position{
       width: 100%;
       margin-right: 0;
       margin-bottom: 10px;
    }
    
    .team-social{
        width: 100%;
        float: left;
    }
    
    /* PORTFOLIO SINGLE */
    .nivoSlider{
        width: 393px !important;
    }
    
    .nivoSlider img{
        width: 393px !important;
    }
    
    /* BLOG */
    .post-info{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    
    .post-body-container{
        width: 100%;
    }
    
    .post-text{
        width: 242px;
    }
    
    .grid_4.aside{
        width: 196px !important;
    }
    
    .aside .social-feed li:nth-child(2n+1){
        margin-right: 10px;
    }
    
        /* ELEMENTS */
    .buttons-presentation .btn{
        float: left;
        margin-right: 10px;
        margin-left: 0;
        margin-bottom: 10px;
    }
    
    /* FOOTER */
    #footer .social-feed li:nth-child(2n){
        margin-right: 0;
    }

    #footer .social-feed li:nth-child(2n+1){
        margin-right: 20px;
    }

    .copyright{
        width: 688px !important;
    }
    .copyright p{
        width: 300px;
    }
   
}
    
@media only screen and (min-width: 480px) and (max-width: 767px){
#content-wrapper,
#page-wrap{
        width: 440px;
    }

    #header-inner{
        width: 400px;
    }

    #logo-info-container{
        width: 100%;
    }
    
    #logo{
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    #contact-info{
        float: left;
        width: 100%;
    }

     #nav-container #nav{
        display: none;
    }

    #nav-container{
        width: 100%;
    }

    #nav-container select{
        display: block;
        width: 380px;
        margin-top: 12px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 12px;
        height: 28px;
        background: #f6f6f6;
        border: 1px solid #ececec;
        color: #666;
        font: italic 12px Arial, sans-serif;
        float: left;
    }

    #search{
        display: none;
    }

    img{
        max-width: 100%;
        height: auto;
    }
    
    iframe{
        max-width: 100%;
        height: auto;
    }

    /* GRIDS */
    .container_12{
        width: 420px !important;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12{
        width: 400px !important;
    }

    /* NESTED COLUMNS NOW HAVE BOTTOM MARGIN */
    .container_12 [class*="grid_"] [class*="grid_"]{
        margin-left: 0 !important;
        margin-bottom: 40px;
    }

    .alpha{
        margin-bottom: 40px !important;
    }

    .omega{
        margin-bottom: 0 !important;
    }

    /* HOME PAGE */
    .grid_3.service .description{
        width: 325px;
        float: left;
    }

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

    .grid_5.service .description{
        float: left;
        width: 325px;
    }

    .grid_6.service .description{
        float: left;
        width: 325px;
    }

    .grid_7.service .description{
        float: left;
        width: 325px;
    }

    .grid_8.service .description{
        float: left;
        width: 325px;
    }

    .grid_9.service .description{
        float: left;
        width: 325px;
    }

    .grid_10.service .description{
        float: left;
        width: 325px;
    }

    .grid_11.service .description{
        float: left;
        width: 325px;
    }

    .grid_12.service .description{
        float: left;
        width: 325px;
    }

    #portfolio-carousel.carousel-li > li{
        width: 190px;
    }

    #portfolio-carousel .caption-title{
        width: 100%;
        margin-right: 0;
    }
    
    .portfolio .caption-hover{
        display: none !important;
    }
    
    .portfolio:hover .caption-hover{
        display: none !important;
    }

    .caroufredsel_wrapper{
        height: 192px !important;
    }

    .grid_8 .latest-post-body{
        width: 240px;
    }

    #client-carousel.carousel-li > li{
        width: 198px;
    }

    .clients .caroufredsel_wrapper{
        width: 400px !important;
    }

    .tweets-list-container{
        width: 327px;
    }

    .entry-note .text{
        width: 400px;
        margin-right: 0;
        padding: 0;
        border: 0;
        margin-bottom: 20px;
    }

    
    /* ABOUT PAGE */
    .name-position{
       width: 100%;
       margin-right: 0;
       margin-bottom: 10px;
    }
    
    .team-social{
        width: 100%;
        float: left;
    }
    
    /* PORTFOLIO */
    #portfolio-filter{
        border: none;
    }
    
    #portfolio-filter li{
        background: none;
        border: none;
        margin-bottom: 5px;
    }
    
    #portfolio-filter li::before{
        background: none;
    }
    
    #portfolio-filter li:hover::before, #portfolio-filter li.active::before{
        background: none !important;
    }
    
    .grid_4 .portfolio img{
        width: 400px;
        height: auto;
    }
    
    .nivoSlider{
        width: 400px !important;
    }
    
    .nivoSlider img{
        width: 400px !important;
    }
    
    /* BLOG */
    .post-info{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    
    .post-body-container{
        width: 100%;
    }
    
    .post-meta{
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        padding: 0;
        border: 0;
    }
    
    .post-category{
        display: table;
        margin: 0 auto;
        float: none;
    }
    
    .post-date{
        text-align: center;
    }
    
    .post-text{
        width: 100%;
    }
    
    .grid_4.aside{
        width: 400px !important;
        padding: 0;
    }
    
    .aside .social-feed li:nth-child(3n){
        margin-right: 10px;
    }
    
        /* ELEMENTS */
    .buttons-presentation .btn{
        float: left;
        margin-right: 10px;
        margin-left: 0;
        margin-bottom: 10px;
    }
    
    /* FOOTER */

    #footer .social-feed li:nth-child(2n+1){
        margin-right: 20px;
    }
    
    #footer .social-feed li:nth-child(5n){
        margin-right: 0;
    }

    .copyright{
        width: 400px !important;
    }
    .copyright p{
        width: 100%;
        text-align: center;
        margin-right: 0;
    }    
    
    .copyright .breadcrumbs{
        margin: 0 auto;
        float: none;
        display: table;
    }
}

@media only screen and (min-width: 320px) and (max-width: 479px){
#content-wrapper,
#page-wrap{
        width: 280px;
    }

    #header-inner{
        width: 240px;
    }

    #logo-info-container{
        width: 100%;
    }
    
    #logo{
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    #contact-info{
        float: left;
        width: 100%;
    }

     #nav-container #nav{
        display: none;
    }

    #nav-container{
        width: 100%;
    }

    #nav-container select{
        display: block;
        width: 220px;
        margin-top: 12px;
        margin-right: 10px;
        margin-left: 10px;
        margin-bottom: 12px;
        height: 28px;
        background: #f6f6f6;
        border: 1px solid #ececec;
        color: #666;
        font: italic 12px Arial, sans-serif;
        float: left;
    }

    #search{
        display: none;
    }

    img{
        max-width: 100%;
        height: auto;
    }
    
    iframe{
        max-width: 100%;
        height: auto;
    }

    /* GRIDS */
    .container_12{
        width: 260px !important;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12{
        width: 240px !important;
    }

    /* NESTED COLUMNS NOW HAVE BOTTOM MARGIN */
    .container_12 [class*="grid_"] [class*="grid_"]{
        margin-left: 0 !important;
        margin-bottom: 40px;
    }

    .alpha{
        margin-bottom: 40px !important;
    }

    .omega{
        margin-bottom: 0 !important;
    }

    /* HOME PAGE */
    .service .icon{
        float: none;
        margin: 0 auto;
    }
    
    .service .description h1, .service .description h2, .service .description h3, .service .description h4, .service .description h5, .service .description h6{
        text-align: center;
    }
    
    .grid_3.service .description{
        width: 100%;
        float: left;
    }

    .grid_4.service .description{
        float: left;
        width: 100%;
    }

    .grid_5.service .description{
        float: left;
         width: 100%;
    }

    .grid_6.service .description{
        float: left;
         width: 100%;
    }

    .grid_7.service .description{
        float: left;
         width: 100%;
    }

    .grid_8.service .description{
        float: left;
         width: 100%;
    }

    .grid_9.service .description{
        float: left;
         width: 100%;
    }

    .grid_10.service .description{
        float: left;
         width: 100%;
    }

    .grid_11.service .description{
        float: left;
         width: 100%;
    }

    .grid_12.service .description{
        float: left;
         width: 100%;
    }

    .section-title.carousel h5{
        padding-bottom: 30px;
    }

    .carousel-pagination{
        float: left;
        position: relative;
    }
    
    #portfolio-carousel.carousel-li > li{
        width: 240px;
    }

    #portfolio-carousel .caption-title{
        width: 100%;
        margin-right: 0;
    }
    
    .portfolio .caption-hover{
        display: none !important;
    }
    
    .portfolio:hover .caption-hover{
        display: none !important;
    }

    .caroufredsel_wrapper{
        height: 220px !important;
    }

    .latest-blog-posts li img{
        float: none;
        margin: 0 auto 10px;
        display: table;
    }
    
    .latest-post-body h1,
    .latest-post-body h2,
    .latest-post-body h3,
    .latest-post-body h4,
    .latest-post-body h5,
    .latest-post-body h6{
        text-align: center;
    }
    .grid_8 .latest-post-body{
        width: 240px;
    }

    #client-carousel.carousel-li > li{
        width: 238px;
    }

    .clients .caroufredsel_wrapper{
        width: 240px !important;
    }

    .tweets-list-container{
        width: 167px;
    }

    .entry-note .text{
        width: 240px;
        margin-right: 0;
        padding: 0;
        border: 0;
        margin-bottom: 20px;
    }
    
    .page-title .slogan{
        display: none;
    }

    
    /* ABOUT PAGE */
    .name-position{
       width: 100%;
       margin-right: 0;
       margin-bottom: 10px;
    }
    
    .team-social{
        width: 100%;
        float: left;
    }
    
    /* PORTFOLIO */
    #portfolio-filter{
        border: none;
    }
    
    #portfolio-filter li{
        background: none;
        border: none;
        margin-bottom: 5px;
    }
    
    #portfolio-filter li::before{
        background: none;
    }
    
    #portfolio-filter li:hover::before, #portfolio-filter li.active::before{
        background: none !important;
    }
    
    .grid_4 .portfolio img{
        width: 100%;
        height: auto;
    }
    
    .nivoSlider{
        width: 240px !important;
    }
    
    .nivoSlider img{
        width: 240px !important;
        height: auto;
    }
    
    /* BLOG */
    .post-info{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
    }
    
    .child{
        margin-left: 10px;
    }
    .post-body-container{
        width: 100%;
    }
    
    .post-meta{
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        padding: 0;
        border: 0;
    }
    
    .post-category{
        display: table;
        margin: 0 auto;
        float: none;
    }
    
    .post-date{
        text-align: center;
    }
    
    .post-text{
        width: 100%;
    }
    
    .grid_4.aside{
        width: 240px !important;
        padding: 0;
    }
    
    /* ELEMENTS */
    .buttons-presentation .btn{
        float: left;
        margin-right: 10px;
        margin-left: 0;
        margin-bottom: 10px;
    }
    
    .table{
        display: none;
    }
    /* FOOTER */

    #footer .social-feed li:nth-child(3n){
        margin-right: 0;
    }

    .copyright{
        width: 240px !important;
    }
    .copyright p{
        width: 100%;
        text-align: center;
        margin-right: 0;
    }    
    
    .copyright .breadcrumbs{
        margin: 0 auto;
        float: none;
        display: table;
    }
}


table.bayiler {
  color: #444;
  width: 100%;
}

table.bayiler thead tr {background: #f76a38; color: white;}
table.bayiler thead tr td {background: transparent !important;}
table.bayiler tbody tr:nth-child(even) { background: #f2f2f2;}
table.bayiler tbody tr:nth-child(odd) { background: #fff;}
table.bayiler td { padding: 5px 10px;}