/* --------------------------------------------------------------------------
    http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
-------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    /* Thought about changing font-size to 1em but:
    http://filamentgroup.com/lab/how-we-learned-to-leave-body-font-size-alone.html */
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display reset for older browsers */
footer, header, main, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

/* --------------------------------------------------------------------------
    http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
    Easier to change the box-sizing in plugins or other components that use
    content-box or other
   -------------------------------------------------------------------------- */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
    word-wrap: break-word;
}

/* --------------------------------------------------------------------------
    Page & Global Sections
   -------------------------------------------------------------------------- */
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 200;
}

.wrapper {
    margin: 0 auto;
    max-width: 60em;
}

a {
    color: #15b5e0;
    font-weight: 400;
    text-decoration: none;
}

h1 {
    font-size: 2.25em; /* 36px/16px */
}

h2 {
    font-size: 1.5em; /* 24px/16px */
}

/* Header & Nav */
header {
    border-bottom: 1px solid #e1e1e1;
    display: table;
    padding: 1.5em 1em;
    width: 100%;
}

.headerAvatar {
    display: table-cell;
    vertical-align: middle;
    width: 33%;
}

.avatar {
    border-radius: 99em;
    display: inline-block;
    height: 3.5em;
    vertical-align: middle;
    width: 3.5em;
}

.headerAvatarText {
    display: inline-block;
    padding: 0 0 0 0.75em;
    vertical-align: middle;
}

.headerAvatarText h3 {
    font-size: 1.5em;
    font-weight: 400;
}

.headerTitle {
    display: table-cell;
    vertical-align: middle;
    width: 34%;
}

.headerTitle h1 {
    font-weight: 400;
    text-align: center;
}

.headerTitle h2 {
    text-align: center;
}

nav {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 33%;
}

.navItem {
    border: 1px solid #fff;
    border-radius: 99em;
    /*color: inherit;*/
    display: inline-block;
    font-weight: 400;
    margin: 0 0.1em;
    padding: 0.3em 0.75em;
}

.navItem:active,
.navItem:focus,
.navItem:hover {
    border-color: #e1e1e1;
}

.navItemSelected {
    /*background-color: #15b5e0;*/
    color: inherit;
}

.navItemSelected:active,
.navItemSelected:focus,
.navItemSelected:hover {
    /*background-color: #15b5e0;*/
    border-color: #fff;
}

/* Footer */
footer {
    border-top: 1px solid #e1e1e1;
    padding: 3em 0 5em 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
    Home
   -------------------------------------------------------------------------- */
.portfolioList {
    overflow: hidden;
    padding: 1em;
}

.portfolioList li {
    float: left;
    margin: 0.5em 0;
    padding: 1em 1em 2em 1em;
    text-align: center;
    width: 33.3%;
}

.portfolioListItem {
    -webkit-box-shadow: 0px 3px 2px -2px rgba(0,0,0,0);
    -moz-box-shadow: 0px 3px -2px 0 rgba(0,0,0,0);
    box-shadow: 0px 2px 3px -2px rgba(0,0,0,0);
    color: inherit;
    display: block;
    font-weight: 400;
    padding: 1em 0 2em 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.portfolioListItem:focus,
.portfolioListItem:hover {
    -webkit-box-shadow: 0px 2px 2px -2px rgba(0,0,0,0);
    -moz-box-shadow: 0px 2px -2px 0 rgba(0,0,0,0);
    box-shadow: 0px 2px 2px -2px rgba(0,0,0,0);
    color: #15b5e0;
}

.portfolioListImg {
    border-radius: 1em;
    display: block;
    height: auto;
    margin: 0 auto 0.75em auto;
    max-width: 100%;
}

.portfolioListItem:focus .portfolioListImg,
.portfolioListItem:hover .portfolioListImg {
    opacity: 0.8;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* --------------------------------------------------------------------------
    Portfolio project
   -------------------------------------------------------------------------- */
.projectHeader .headerAvatar {
    width: 50%;
}

.projectHeader .headerAvatar a {
    color: inherit;
}

.projectHeader .nav {
    width: 50%;
}

.projectArticle {
    padding: 2.5em;
}

.projectHero {
    overflow: hidden;
}

.projectHeroDetails {
    float: left;
    width: 40%;
}

.projectHeroDetails h1 {
    font-size: 4.25em;
    padding: 0 0 0.2em 0;
}

.projectHeroDetails ul {
    padding: 1em 0 0 0;
    /*
    border-bottom: 1px dotted #e1e1e1;
    border-top: 1px dotted #e1e1e1;
    margin: 1em 0 0 0;
    padding: 0.75em 0;
    */
}

.projectHeroDetails li {
    padding: 0.25em 0;
}

.projectHeroText {
    float: left;
    font-size: 1.5em;
    line-height: 1.5em;
    padding: 1.4em 1em 0 1em;
    width: 60%;
}

.credit {
    border-top: 1px solid #f1f1f1;
    display: block;
    font-size: 0.7em;
    margin: 5px 0 0 0;
    padding: 2px 0 0 0;
}

.projectHeroColor {
    color: #fff;
    background-image: -webkit-linear-gradient(180deg, #2788a9 10%, #27ccfb 90%); /* Chrome 10+, Saf5.1+ */
    background-image: -moz-linear-gradient(180deg, #2788a9 10%, #27ccfb 90%); /* FF3.6+ */
    background-image: -ms-linear-gradient(180deg, #2788a9 10%, #27ccfb 90%); /* IE10 */
    background-image: -o-linear-gradient(180deg, #2788a9 10%, #27ccfb 90%); /* Opera 11.10+ */
    background-image: linear-gradient(180deg, #2788a9 10%, #27ccfb 90%); /* W3C */
    overflow: hidden;
}

.projectImageSection {
    display: table;
    padding: 3em 0;
    table-layout: fixed;
    text-align: center;
    width: 100%;
}

.projectImageSection div {
    display: table-cell;
    padding: 0 1em;
    text-align: center;
}

.projectImageSection1 div {
    width: 100%;
}

.projectImageSection3 div {
    width: 33.3%;
}

.projectImageSection img {
    max-width: 100%;
}

.projectImageShadow {
    /*box-shadow: 0 3px 10px 0 rgba(0,0,0,0.25);*/
}

.iphoneAppScreen {
    border: 1px solid #f1f1f1;
}

.projectPipCoin .projectImageSection {
    padding-bottom: 1em;
    padding-top: 1em;
}

.projectPipCoin .projectImageSection.pipcoinIcons {
    padding-top: 5em;
}

/* --------------------------------------------------------------------------
    Breakpoints & tweakpoints using ems
    http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
    http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/
    http://getbootstrap.com/css/
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
    Small screens
    Screens 0 to 479px wide will use these styles
   -------------------------------------------------------------------------- */
@media (max-width: 30em) { /* 480px/16px */
    body {
        font-size: .9em;
        padding: 0 1.5em;
    }

    header {
        border-bottom: 1px solid #e1e1e1;
        display: block;
        padding: 1.5em 1em;
        text-align: center;
    }

    .headerAvatar {
        display: block;
        width: auto;
    }

    .avatar {
        border-radius: 99em;
        height: 3em;
        width: 3em;
    }

    .headerAvatarText {
        display: inline-block;
        padding: 0 0 0 0.25em;
        text-align: left;
    }

    .headerTitle {
        display: block;
        padding: 0.5em 0 1em 0;
        width: auto;
    }

    nav {
        display: block;
        text-align: center;
        width: auto;
    }

    .navItem {
        font-size: 1.15em;
        font-weight: 400;
    }

    .portfolioList li {
        padding-bottom: 1em;
        width: 100%;  /* 1 column layout */
    }

    .portfolioListItem {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding-top: 0;
    }

    .projectHeader {
        padding-bottom: 0.75em;
        padding-top: 1em;
    }

    .projectHeader .headerAvatar {
        display: inline-block;
        width: 100%;
    }

    .projectHeader .avatar {
        height: 2.25em;
        width: 2.25em;
    }

    .projectHeader nav {
        padding: 0.75em 0 0 0;
        width: 100%;
    }

    .projectHeader .navItem {
        font-size: 1.15em;
    }

    .projectArticle {
        padding: 1em;
    }

    .projectHero {
        overflow: auto;
    }

    .projectHeroDetails {
        float: none;
        width: auto;
    }

    .projectHeroDetails h1 {
        font-size: 3.5em;
        text-align: center;
    }

    .projectHeroDetails h2 {
        text-align: center;

        display: none;
    }

    .projectHeroDetails ul {
        border-bottom: 1px dotted #e1e1e1;
        border-top: 1px dotted #e1e1e1;
        margin: 1em 0 0 0;
        padding: 0.75em 0;

        display: none;
    }

    .projectHeroText {
        float: none;
        font-size: 1.25em;
        font-weight: 300;
        line-height: 1.25em;
        padding: 0.25em 0 0 0;
        width: auto;
    }

    .projectImageSection {
        display: block;
        padding: 1em 0;
    }

    .projectImageSection1 div,
    .projectImageSection3 div {
        display: block;
        padding: 0 0 2em 0;
        text-align: center;
        width: 100%;
    }

    .projectImageSection1 div {
        padding: 0;
    }

    .projectPipCoin .projectImageSection.pipcoinIcons {
        padding-bottom: 2em;
        padding-top: 1em;
    }

    .logosIconsWrapper h1 {
        font-size: 3em;
    }
}

/* --------------------------------------------------------------------------
    Large screens
    Screens 480px wide and greater will use these styles
   -------------------------------------------------------------------------- */
@media (min-width: 30em) { /* 480px/16px */
    .portfolioList li {
        width: 33.3%; /* 3 column layout */
    }
}

/* --------------------------------------------------------------------------
    Medium screens
    Screens 768px to 991px (Large screen 992px) wide will use these styles
   -------------------------------------------------------------------------- */
/* @media (min-width: 48em) { /* 768px/16px */
    /* .portfolioList li {
        width: 50%; /* 2 column layout */
    /*}
}

/* --------------------------------------------------------------------------
    Large screens
    Screens 992px wide and greater will use these styles
   -------------------------------------------------------------------------- */
/* @media (min-width: 62em) { /* 992px/16px */
    /* .portfolioList li {
        width: 33.3%; /* 3 column layout */
    /*}
}

/* --------------------------------------------------------------------------
    IE9 and less
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
    Less than IE9
   -------------------------------------------------------------------------- */
.ltIE9 body {
    text-align: center;
}

.ltIE9 .grid {
    text-align: left;
}

.ltIE9 header {

}

/* --------------------------------------------------------------------------
    Less than IE8
   -------------------------------------------------------------------------- */
.ltIE8 .header {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
    ltIE7
   -------------------------------------------------------------------------- */
p {
    /*upgrade browser message*/
}