/*  Table of Content
-------------------------------------------------------------------------------------------------------------- 
    General Styles
        Header
        Nav
        Logo
        Footer
    Home
        Projects
        Testimonial
        Experience
    Form Styles
    Media Queries
    IE Fixes */


/*  General Styles
-------------------------------------------------------------------------------------------------------------- */
section { padding: 75px 0; }
.title { padding-bottom: 50px; }

/* General Styles :: Header ---------------------------------------------------------------------------------- */
header {
    background: fixed url('../../images/blurred.jpg') no-repeat top left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 800px;
    position: relative; }

.intro      { color: #ccc; padding: 150px 0 0 0; }
.intro em   { font-size: 12px; padding: 0 10px; }

#notable { 
    background: #000;
    background: rgba(0,0,0,.3);
    padding: 15px 0;
    position: absolute; bottom: 0;
    width: 100%;
    z-index: 2; }

#notable h4 { color: #888; font-size: 12px; line-height: 14px; }

/* General Styles :: Nav ------------------------------------------------------------------------------------- */
header > nav {
    background: #000;
    background: rgba(0,0,0,.3);
    padding: 15px 0;
    position: absolute; top: 0;
    width: 100%;
    z-index: 2; }

    header > nav ul,
    header > nav li { float: right; margin: 0; padding: 0; }
    header > nav li { float: left; margin-left: 30px; }

    header > nav a  {
        color: #fff;
        font-weight: 700;
        line-height: 40px;
        text-decoration: none;
        text-transform: uppercase; }

        header > nav a:hover { color: #82bb89; }
        
/* Waypoints Sticky */
.sticky {
	background: rgba(0,0,0,.85);
	padding: 5px 0;
    position: fixed; top: 0;
    width: 100%;
    z-index: 3; }

/* Tabbed Navigation */
.tabbed-nav { margin-bottom: 30px; }

.tabbed-nav ul,
.tabbed-nav li {
    margin: 0;
    padding: 0;
}

.tabbed-nav ul { display: block; }
.tabbed-nav li { float: left; width: 33.3%; }

.tabbed-nav li a {
    display: inline-block;
    border: 1px solid #ddd;
    border-right: none;
    background: #fff;
    color: #888;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 auto;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%; }

    .tabbed-nav li a.first-child { border-radius: 15px 0 0 15px; }
    .tabbed-nav li a.last-child { border-right: 1px solid #ccc; border-radius: 0 15px 15px 0; }
    .tabbed-nav li a:hover { color: #82bb89; }

    .tabbed-nav li a.active {
        background: #82bb89; 
        border: 1px solid #6cae75;
        color: #fff;
        cursor: default;
        text-decoration: none; }

/* General Styles :: Logo ------------------------------------------------------------------------------------ */
#logo {
    color: #f3f3f3;
    float: left;
    font-size: 24px;
    font-weight: 300;
    line-height: 36px; }

/* General Styles :: Footer ---------------------------------------------------------------------------------- */
footer {
    background: #333;
    padding: 25px 0;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase; }

footer ul,
footer li       { float: right; margin: 0; padding: 0; }
footer ul li    { float: left; margin-left: 15px; }
footer ul li a  { color: #888; text-decoration: none; }
footer ul li a:hover { color: #82bb89; }


/*  Home
-------------------------------------------------------------------------------------------------------------- */
/* Home :: Projects ------------------------------------------------------------------------------------------ */
.hover-anim .column { padding-bottom: 20px; }

.hover-anim figure {
    background: url('../../images/icons/zoom.png') no-repeat center center;
    cursor: pointer;
    overflow: hidden; 
    margin: 0;
    position: relative; }

.hover-anim figure img {
    display: block;
    position: relative;
    max-width: 100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px); }

    .no-touch .hover-anim figure:hover img,
    .hover-anim figure.cs-hover img {
        opacity: .4;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px); }

.hover-anim figcaption {
    background: #82bb89;
    color: #fff;
    opacity: 1;
    padding: 5%;
    position: absolute; bottom: 0;
    width: 90%;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
    -moz-transition: -moz-transform 0.5s, opacity 0.1s;
    transition: transform 0.5s, opacity 0.1s; }

    .no-touch .hover-anim figure:hover figcaption,
    .hover-anim figure.cs-hover figcaption {
        top: auto; bottom: 0;
        -webkit-transform: translateY(90%);
        -moz-transform: translateY(90%);
        -ms-transform: translateY(90%);
        transform: translateY(90%);
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transition: -webkit-transform 0.5s, opacity 0.1s 0.3s;
        -moz-transition: -moz-transform 0.5s, opacity 0.1s 0.3s;
        transition: transform 0.5s, opacity 0.1s 0.3s; }

.hover-anim figcaption h4 {
    color: #fff;
    letter-spacing: 0;
    margin: 0;
    padding: 0 0 3px; }

.hover-anim figcaption div {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 1em;
    text-transform: uppercase; }

.hover-anim figcaption a { color: #fff; float: right; }

/* Project Popup */
.project-preview { position: relative; }

.project-popup {
    background: #fff;
    display: none;
    height: 100%;
    position: absolute; top: 0; left: 0;
    z-index: 2; }
    
.project-close { cursor: pointer; position: absolute; top: 0; right: 0; z-index: 3; }

#clients,
#codesamples { background: #f8f8f8; border-top: 1px solid #eee; }

/* Home :: Projects ------------------------------------------------------------------------------------------ */
#testimonials { padding: 250px 0; background: fixed url('../../images/blurred.jpg') no-repeat top left; }

.testimonial {
    background: #fff;
    background: rgba(255,255,255,.4);
    color: #333;
    margin: 0 auto;
    padding: 40px;
    width: 600px; }

/* GREEN VERSION
#testimonials       { background: #82bb89; color: #fff; text-shadow: 0px -1px 0 #69a571; }
#testimonials h2    { color: #fff; }
*/

/* Home :: Experience ---------------------------------------------------------------------------------------- */
.graph { display: block; }

.bars { 
    background: url('../../images/graph-line_desktop.png') repeat;
    margin-bottom: 5px;
    padding: 3px 0; }

.bar-caption em { color: #ccc; font-size: 12px; }

.bar {
    background: #82bb89;
    color: #fff;
    font-size: 11px;
    height: 25px;
    line-height: 25px;
    padding-right: 2%;
    text-align: right; }

.bar-text { 
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase; }

    .w-100  { width: 0%; }
    .w-80   { width: 0%; background: #718773; background: rgba(113,135,115,.8); }
    .w-50   { width: 0%; background: #859d88; background: rgba(133,157,136,.8); }
    .w-20   { width: 0%; background: #8f8f8f; background: rgba(143,143,143,.8); }

    .nojs .w-100  { width: 100%; }
    .nojs .w-80   { width: 80%; }
    .nojs .w-50   { width: 50%; }
    .nojs .w-20   { width: 20%; }

.legend li {
    float: left;
    font-size: 11px;
    line-height: 8px;
    margin: 0;
    padding: 0;
    text-align: right;
    width: 115px; }

.animate-100     { width: 100%; -webkit-animation:width100 1.5s ease-out; -moz-animation:width100 1.5s ease-out; animation:width100 1.5s ease-out; }
.animate-80      { width: 80%; -webkit-animation:width80 1.5s ease-out; -moz-animation:width80 1.5s ease-out; animation:width80 1.5s ease-out; }
.animate-50      { width: 50%; -webkit-animation:width50 1.5s ease-out; -moz-animation:width50 1.5s ease-out; animation:width50 1.5s ease-out; }
.animate-20      { width: 20%; -webkit-animation:width20 1.5s ease-out; -moz-animation:width20 1.5s ease-out; animation:width20 1.5s ease-out; }

@-moz-keyframes width100        { 0%  { width: 0px; } 100% { width: 100%; } }
@-webkit-keyframes width100     { 0%  { width: 0px; } 100% { width: 100%; } }
@-moz-keyframes width80         { 0%  { width: 0px; } 100% { width: 80%; } }
@-webkit-keyframes width80      { 0%  { width: 0px; } 100% { width: 80%; } }
@-moz-keyframes width50         { 0%  { width: 0px; } 100% { width: 50%; } }
@-webkit-keyframes width50      { 0%  { width: 0px; } 100% { width: 50%; } }
@-moz-keyframes width20         { 0%  { width: 0px; } 100% { width: 20%; } }
@-webkit-keyframes width20      { 0%  { width: 0px; } 100% { width: 20%; } }


/*  Form Styles
-------------------------------------------------------------------------------------------------------------- */
form#contact {
    color: #888;
    background: #fff;
    margin-bottom: 20px;
    padding: 30px;
    position: relative; }

/* Form Styles :: Positioning -------------------------------------------------------------------------------- */
.field          { float: left; margin: 0 2%; position: relative; width: 46%; }
.field-long     { float: left; margin: 0 2% 20px 2%; position: relative; width: 96%; }
.optional       { display: none; }
.inview         { display: block; }

/* Form Styles :: Labels ------------------------------------------------------------------------------------- */
label           { display: block; margin: 10px 0; }
label small     { font-size: 12px; font-style: italic; font-weight: 400; }

/* Form Styles :: Inputs & Textareas ------------------------------------------------------------------------- */
input[type=text] {
    background: #f8f8f8;
    border: 1px solid #ddd;
    color: #888;
    margin: 0;
    padding: 10px 4%;
    width: 92%; }
    
textarea {
    background: #f8f8f8;
    border: 1px solid #ddd;
    color: #888;
    line-height: 21px;
    padding: 10px 4%;
    width: 92%; height: 125px; }
    
    textarea:focus,
    input[type=text]:focus {
        background: #eee;
        color: #888;
        outline: none; }

/* Form Styles :: Dropdown ----------------------------------------------------------------------------------- */
/* old - fc756f | new - 82bb89 */
.dropdown,
.select {
    position: relative;
    width: 100%;
    margin: 0;
    display: block; }

.dropdown > span {
    background: #f8f8f8;
    border: 1px solid #ddd;
    color: #888;
    cursor: pointer;
    display: block;
    line-height: 37px;
    overflow: hidden;
    padding: 0 10% 0 5%;
    position: relative;
    width: 85%; height: 37px; }

.dropdown > span:after {
    border-left: 1px solid #ddd;
    content: '\25BC';
    font-size: 12px;
    line-height: 20px;
    position: absolute; top: 10px; right: 0px;
    text-align: center;
    width: 38px; height: 20px; }
    
    .dropdown.active > span:after { content: '\25B2'; }

.dropdown ul {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; top: 0;
    width: 100%; }

.dropdown ul li {
    display: block;
    position: absolute; top: 0;
    width: 100%; }

.dropdown ul li span {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-top: 1px solid #f8f8f8;
    color: #888;
    cursor: pointer;
    display: block;
    font-size: 12px;
    line-height: 37px;
    overflow: hidden;
    padding: 0 5%;
    width: 90%; }

.dropdown > span,
.dropdown ul li span {
    -webkit-backface-visibility: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }

/* Select fallback styling */
.select { border: 1px solid #ddd; }

/* Active */
.active.dropdown > span,
.active.dropdown ul li span { /* box-shadow: 0 1px 1px rgba(0,0,0,0.1); */ }
.active.dropdown > span     { color: #82bb89; }

.active.dropdown ul li span {
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s; }

    .active.dropdown ul li span:hover { background: #82bb89; color: #fff; }

/* Form Styles :: Validation --------------------------------------------------------------------------------- */
input.required_field,
textarea.required_field { 
    background: #fbeeee;
    border: 1px solid #f0b2b2; }
    
.required_lbl { color: #cf4b4b; }

.required {
    color: #cf4b4b;
    font-size: 12px;
    margin: 0;
    position: absolute; bottom: 7px; right: 10px; }

    .dropdown .required     { right: 50px; z-index: 1005; }
    .field-long .required   { top: 50px; right: 12px }

/* Form Styles :: Success ------------------------------------------------------------------------------------ */
#success {
    background: #82bb89;
    color: #fff;
    display: none;
    position: absolute; top: 0; left: 0;
    width: 100%;
    z-index: 1006; }

    #success h4     { color: #fff; margin-bottom: 10px; }
    #success > div  { padding: 35px; }


/* Media Queries
-------------------------------------------------------------------------------------------------------------- */
/* Media Queries :: Tablet (Portrait :: Width 768px) --------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#notable h4 { line-height: 11px; }
	.legend li { width: 91px; }
  .bars { background: url('../../images/graph-line_desktop-low.png') repeat; }
}

/* Media Queries :: Mobile (Portrait :: Width 320px ) -------------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .legend li { width: 75px; }
  .bars { background: url('../../images/graph-line_mobile.png') repeat; }
}

/* Media Queries :: Mobile (Landscape :: Width 480px) -------------------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .legend li { width: 105px; }
  .bars { background: url('../../images/graph-line_tablet.png') repeat; }
}


/*  IE Fixes
-------------------------------------------------------------------------------------------------------------- */