/* resets */
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;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

@font-face {
    font-family: AvertaLight;
    src: url(/css/fonts/avertalight.ttf);
}

@font-face {
    font-family: Averta;
    src: url(/css/fonts/avertaregular.ttf);
}

@font-face {
    font-family: AvertaExtraBold;
    src: url(/css/fonts/avertaextrabold.ttf);
}

body {
    font-family:Averta, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

button {
    border-width:0;
    cursor:pointer;
}

.cta:hover {
    opacity:0.8;
    transition:opacity 0.5s;
    -webkit-transition:opacity 0.5s; 
}

.h1-wrapper.back .h1 {
    font-size:16px;
    margin:30px 0;
}

.h1, h1 {
    display:inline-block;
    color:#646464;
    font-size:32px;
    padding-bottom:10px;
    position:relative;
    text-transform:uppercase;
    text-decoration:none;
}

.h1:after, h1:after {
    background-color:#646464;
    content:"";
    bottom:0;
    height:1px;
    right:0;
    position:absolute;
    width:1000px;
}

h2 {
    color:#00555B;
    font-family:AvertaExtraBold;
    font-size:36px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:10px;
    line-height:36px;
    text-transform:uppercase;
    word-wrap: break-word;
}

h2.light {
    color:#fff;
}

h3 {
    color:#00AF99;
    font-family:AvertaLight;
    font-size:16px;
}

/* Navbar */
.navbar {
    color:#888;
    font-family:'avertalight';
    padding:16px 40px;
    position:relative;
    border-bottom:1px solid #EFEEEE;
}
.navbar-left {
    display:inline-block;
    width:140px;
}
.navbar-right {
    letter-spacing:1px;
    text-align:right;
    float:right;
    display:inline-block;
    vertical-align:top;
    margin:14px 0 5px 0;
}
.oddball-logo {
    display:inline-block;
    width:140px;
    height:28px;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url("/assets/oddball-logo-navbar.png");
    margin:5px 0;
}
.nav-link, .mobile-hamburger {
    text-transform:uppercase;
    font-size:16px;
    font-weight:300;
    margin:0 8px;
    padding:13px 3px 13px 3px;
    vertical-align:top;
    color:#272727;
    text-decoration:none;
    position:relative;
    z-index:3;
}
.nav-link:hover {
    font-family:Averta;
    font-weight:800;
    transition:font-weight 0.2s;
}
.mobile-hamburger {
    display:none;
    position:relative;
    bottom:40px;
    right:20px;
}
.nav-link.selected {
    background-size:100%;
    background-repeat:no-repeat;
    background-size:40px 40px;
    background-image:url('/assets/selected-nav-item.png');
    background-position:center 25%;
}
.nav-button {
    display:inline;
    text-transform:uppercase;
    border:1px solid #CBCBCB;
    font-size:16px;
    margin:10px 8px;
    padding:5px;
    vertical-align:top;
    color:#272727;
    cursor:pointer;
    text-decoration:none;
    position:relative;
    z-index:3;
}
.nav-button:hover {
    background-color:#024448;
    border-color:#024448;
    color:#FFF;
    transition:0.2s;
    -webkit-transition:0.2s; 
}
.nav-items {
    display:inline-block;
}

/* Footer */
.footer {
    background:#1D1D1D;
    background-image:url('/assets/oddball-sun.png');
    background-size: 350px 175px;
    background-repeat:no-repeat;
    background-position:85% 100%; 
    padding:75px 60px;
}
.oddball-logo-footer {
    display:inline-block;
    width:180px;
    height:36px;
    background-size: cover;
    background-repeat:no-repeat;
    background-image:url("/assets/oddball-logo-footer.png");
    margin:10px 0;
}
.contact-info {
    color:#FFF;
    font-family:'Helvetica Neue';
    font-size:16px;
    font-weight:300;
}

.cta {
    background-color:#01A287;
    color:#fff;
    display:inline-block;
    font-family:AvertaExtraBold;
    font-size:24px;
    letter-spacing:1px;
    padding:15px 25px;
    text-decoration:none;
    text-transform:uppercase;
    vertical-align:middle;
}
.cta.dark {
    background:#024448;
}

.cta:after {
    color:#FFE11B;
    content:"►";
    display:inline-block;
    font-size:20px;
    margin-left:10px;
    padding-bottom:3px;
    vertical-align:middle;
}

.h1-wrapper {
    margin:0 auto;
    margin-bottom:20px;
    max-width:960px;
}

.content-wrapper {
    margin:0 auto;
    max-width:960px;
    /* overflow:hidden; */
}
.content-wrapper.work {
    max-width:unset;

}

section {
    border-bottom:1px solid #EFEEEE;
    padding:50px 0;
}

section.hero {
    position:relative;
    text-align:center;
}

section.hero #scrollArrow {
    border:2px solid #FFE11F;
    border-top-width:0;
    border-right-width:0;
    cursor:pointer;
    display:inline-block;
    position:absolute;
    bottom:100px;
    left:50%;
    margin-left:-25px;
    height:50px; width:50px;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(4-5deg);
    -webkit-transform:rotate(-45deg);
}

.project {
    text-align:center;
}

.project.full {
    text-align:left;
}

.project-text {
    display:inline-block;
    max-width:540px;
    text-align:left;
    vertical-align:middle;
        padding:10px; 
}
@media only screen and (min-width: 720px) {
    .project-text {
        margin-right:50px;
    }

}

.project-text .project-description {
    line-height:1.3em;
    margin-top:30px;
    margin-bottom:30px;
}

.project-img {
    border:1px solid #FFE11F;
    border-radius:50%;
    display:inline-block;
    height:300px; width:300px;
    margin:20px 0;
    vertical-align:middle;
}
@media only screen and (min-width: 720px) {
    .project-img {
        padding:20px; 
    }
}

.project-img .img-background {
    background-color:#EFEEEE;
    border-radius:50%;
    height:300px; width:300px;
    position:relative;
    overflow:hidden;
}

.project-img img {
    border-radius: 50%;
    position: absolute;
    height: auto;
    left: -41px;
    top: -38px;
    width: 480px;
}


section.services .content-wrapper {
    text-align:center;
}

section.services {
    padding-bottom: 100px;
}
section.services .service {
    background-position:top left;
    background-repeat:no-repeat;
    background-size:contain;
    box-sizing:border-box;
    display:inline-block;
    text-align:left;
    vertical-align:top;
    margin-top: 30px;
    padding: 90px 0;
}

@media only screen and (min-width: 720px) {
    section.services .service {
         margin:30px;  
         padding:60px 40px;  
         max-width:380px; 
    }

}

section.services .service-text {
    color:#00AF99;
    font-size:20px;
}
@media screen and (max-width:720px) {
    section.services .dark {
            text-align: center;
    }
    section.services .service-text {
        text-align: center;
    }
    section.services .service {
        background-position: center;
    }
}

section.services .service[type="dev"] {
    background-image:url('/assets/service_dev.png');
}

section.services .service[type="design"] {
    background-image:url('/assets/service_design.png');
}

section.services .service[type="mgmt"] {
    background-image:url('/assets/service_mgmt.png');
}

section.services .service[type="biz"] {
    background-image:url('/assets/service_biz.png');
}

/* work page */

.project-imgs {
    display:block;
    margin-bottom:40px;
    text-align:center;
}

.project-imgs img {
    display:inline-block;
    vertical-align:top;
    margin-right:2%;
    margin-bottom:2%;
    min-width:320px;
    height:auto;
    width:45%;
    border:1px solid #c0c0c0;
}

.project-wrapper {
    margin:30px 0;
    padding:60px 0;
    position:relative;
}

.project-wrapper:after {
    border:5px solid #FFFAD6;
    border-radius:50%;
    content:"";
    bottom:0; top:0; width:650px;
    left:-325px;
    position:absolute;
    z-index:0;
}

.project-wrapper .project.full {
    position:relative;
    z-index:1;
    margin: 0 auto;
    max-width: 960px;
}

.project-wrapper[project="scholar-fisher"] .project-imgs img {
    min-width:240px;
    width:31%;
}

.project-wrapper[project="de-novo"] .project-imgs img {
    min-width:160px;
    width:23%;
}

.project-page[project="de-novo"]  h4 {
    margin-bottom:0;
}

/* individual work pages */

.project-page {
    
}

.project-page h4 {
    margin-bottom:30px;
}

.browser {
    border:2px solid #D0D0D0;
    padding:20px;
}

.browser .address-bar {
    border:2px solid #D0D0D0;
    box-sizing:border-box;
    color:#1BAAE4;
    display:block;
    margin-bottom:20px;
    padding:3px;
    text-decoration:none;
    width:100%;
}

.browser .menu {
    margin-bottom:20px;
    width:10%;
}

.browser img {
    height:auto;
    width:100%;
}

.browser.de-novo-center {
    border-width:0;
    text-align:center;

}

.browser.de-novo-center img {
    border:2px solid #d0d0d0;
    margin-bottom:20px;
    max-width:320px;
    display:inline-block;
}

.project-headline {
    box-sizing:border-box;
    font-size:32px;
    padding:50px;
    text-align:left;
}

.project-screenshot img,
.project-screenshot .screenshot-text {
    display:inline-block;
    line-height:1.3em;
    max-width:480px;
    vertical-align:top;
    margin-right:1.5%;
    margin-left:1.5%;
    margin-bottom:50px;
    width:43%;
}
.project-screenshot img {
    border: 1px solid #000000;

}

.project-page[project='de-novo'] img {
    height:auto;
    margin-right:5%;
    width:45%;
}


.project-page[project='de-novo'] .project-screenshot img {
    border:2px solid #d0d0d0;
    width:30%;
}

.project-page[project='de-novo'] .project-screenshot .screenshot-text {
    width:58%;
}

/* Common Styles */
/*h1 {
    font-family:'avertalight';
    font-size:30px;
    border-bottom:1px solid #646565;
    width:300px;
    text-align:right;
    color:#646565;
    padding:0 0 5px 0;
    font-weight:300;
}
h2.light {
    font-family:'avertablack';
    font-size:42px;
    color:#fff;
}
h2.dark {
    font-family:'avertablack';
    font-size:42px;
    color:#00555A;
}
.cta.light {
    background:#02A287;
    padding:10px 30px;
    margin:60px 0;
    border:none;
    color:#fff;
    font-size:26px;
    font-family:'avertablack'
}*/

/* Contact Page */
/*.contact-page {
    font-family:Averta;
}*/
.contact-page .intro-stripe {
    background:#024448;
    background-image:url('/assets/contact-stripe-background.png');
    background-repeat:no-repeat;
    padding:60px 70px 80px 70px;
}
.contact-page h2 {
    margin-top:40px;
    margin-bottom:50px;
}
.contact-page .intro-stripe-text {
    color:#00AF99;
    /*font-family:Averta;*/
    font-size:20px;
    line-height:1.4em;
}
.contact-page ::-webkit-input-placeholder { 
  color:#D9D9D9;
}
.contact-page ::-moz-placeholder { 
  color:#D9D9D9;
}
.contact-page :-ms-input-placeholder { 
  color:#D9D9D9;
}
.contact-page :-moz-placeholder { 
  color:#D9D9D9;
}
.contact-page .contact-form {
    padding:40px 0 60px 0;
}
.contact-page .contact-form h1 {
    font-family:AvertaLight;
    margin-left:70px;
    margin-bottom:40px;
}
.contact-page .contact-form .cta {
    margin:60px 0 60px;
}
.contact-page .contact-form form {
    padding:30px 100px 30px 70px;
    max-width:800px;
}
.contact-page .form-element {
    width:100%;
    display:table;
}
.contact-page .form-element-text {
    padding:5px;
    font-size:36px;
    font-family:AvertaExtraBold;
    width:1px;
    white-space:nowrap;
    vertical-align:top;
    display:table-cell;

}
.contact-page .contact-form .form-element input {
    display:inline-block;
    font-size:20px;
    padding:8px 16px;
    display:table-cell;
    width:100%;
    border:1px solid #00A287;
    margin:10px 20px;
}
.contact-page .contact-form .form-element textarea {
    display:inline-block;
    font-size:20px;
    padding:16px 16px;
    display:table-cell;
    width:100%;
    border:1px solid #00A287;
    margin:10px 20px;
    resize: none;
}

/* Referral Page */

.referral-page .intro-stripe {
    background:#024448;
    padding:60px 0 90px 70px;
}
.referral-page .intro-stripe-text {
    color:#00AF99;
    font-size:20px;
    max-width:480px;
    line-height:1.3em;
}
.referral-page {
}
.referral-page h2 {
    margin:0;
    margin-bottom:10px;
}
.referral-page .referral-form {
    padding:40px 0 60px 0;
}
.referral-page .referral-form h1 {
    margin-left:70px;
}
.referral-page .referral-form form {
    padding:30px 70px;
}
.referral-page .referral-form form .column {
    width:49%;
    display:inline-block;
    vertical-align:top;
    min-width:320px;
}
.referral-page .referral-form form .column h2 {
    margin-bottom:20px;
}
.referral-page .referral-form form .column label {
    font-size:20px;
    color:#00555A;
}
.referral-page .referral-form form .column span {
    color:#00AF99;
    font-size:14px;
    margin:0 0 0 10px;
}
.referral-page .referral-form form .column input {
    display:inline-block;
    font-size:20px;
    padding:8px 16px;
    display:table-cell;
    width:90%;
    border:1px solid #1D1D1D;
    margin:10px 10% 20px 0;
}
.referral-page .referral-form form .column textarea {
    display:inline-block;
    font-size:20px;
    padding:8px 16px;
    display:table-cell;
    width:90%;
    border:1px solid #1D1D1D;
    margin:10px 10% 20px 0;
    resize:none;
    height:200px;
}
.referral-page .referral-form form .button-container {
    text-align:center;
}
.referral-page .referral-form form button.cta.dark.large {
    color:#FFF;
    background:#024448;
    font-size:40px;
    margin:40px auto;
    padding:10px 40px;
    border:none;
    font-family:AvertaExtraBold;
}

/* About Page */
.about-page {
    font-family:Averta;
}
.about-page .intro-stripe {
    background:#00A287;
    background-image:url('../assets/about-intro-stripe-icon.png');
    background-repeat:none;
    background-size:230px 320px;
    background-repeat:no-repeat;
    background-position:right; 
    padding:100px 60px;
}
.about-page .intro-stripe .cta {
    padding:8px 30px;
}
.about-page .intro-stripe h2.light {
    margin:0;
}
.about-page .intro-stripe-text {
    color:#272727;
    font-size:16px;
    line-height:1.3em;
    margin:25px 0;
}
.about-page .skills {
    border-bottom:1px solid #EFEEEE;
    padding:70px 0;
}
.about-page h1 {
    font-family: AvertaLight;
    margin-left:70px;
}
.about-page .skill {
    display:inline-block;
    width:39%;
    min-width:250px;
    max-width:480px;
    padding:70px 5% 0 5%;
    vertical-align:top;
}
.about-page .skill-description {
    color:#272727;
    font-weight:300;
    line-height:1.3em;
}
.about-page .skill-examples {
    color:#00AF99;
    margin:20px 0;
    line-height:1.3em;
}
.about-page .skill-examples span {
    color:#FFE41F;
}
.about-page .process {
    background:url('../assets/about-process-icon.png');
    background-size:1000px 1000px;
    background-position:center bottom;
    border-bottom:1px solid #EFEEEE;
    background-repeat:no-repeat;
    padding:70px 0;
}
.about-page .process-description {
    color:#00AF99;
    font-size:30px;
    line-height:1.3em;
    margin:15px 70px;
}
.about-page .process-graphic {
    margin-left:10%;
}
.about-page .circle {
    position:relative;
    display:block;
    right:90px;
    top:50px;
    width:40px;
    height:40px;
    border:3px solid #FFE1AA;
    border-radius:50%;
    background:#fff;
}
.about-page .step {
    margin:0 auto;
    padding:0 67px;
    max-width:420px;
    position:relative;
}
.about-page .step .border-left {
    border-left: 2px solid #D0D0D0;
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
}
.about-page .step:first-child .border-left {
    top: 50%;
}
.about-page .step:last-child .border-left {
    bottom: 50%;
}

.about-page .step-text {
    color:#00555A;
    font-size:20px;
}
.about-page .team-members {
    margin:70px 0 70px 0;
    padding-bottom: 100px;
}
.about-page .team-members-description {
    color:#00AF99;
    font-size:30px;
    margin:15px 70px;
}
.about-page .team-member {
    display:inline-block;
    width:39%;
    min-width:320px;
    padding:70px 5% 0 5%;
    vertical-align:top;
}
.about-page .team-member-picture {
    border:1px solid #FFE11F;
    border-radius:50%;
    display:inline-block;
    height:300px; width:300px;
    margin:20px 0;
    display:block;
        margin:0 auto;
    padding:20px;
    vertical-align:middle;
}

.team-member-picture .img-background {
    background-color:#EFEEEE;
    border-radius:50%;
    height:300px; width:300px;
    position:relative;
    overflow:hidden;
}
.team-member-picture img {
    position:absolute;
    height:auto;
    width:300px;
}
.testimonial {
    font-style: italic;
    color: #c0c0c0;
    padding: 20px;
}
.about-page .team-member-picture.rob {}
.about-page .team-member-picture.travis {}
.about-page .team-member-picture.xiaolu {}
.about-page .team-member-picture.david {}
.about-page .team-member-picture.joe {}
.about-page .team-member-picture.max {}
.about-page .team-member-name {
    text-transform: uppercase;
    color:#00555A;
    font-family:AvertaExtraBold;
    font-size:20px;
    line-height:1.3em;
}
.about-page .team-member-links {
    text-align: center;
}
.about-page .team-member-links a {
    color: grey;
    padding: 0px 5px;

}
.about-page .team-member-links .fa-linkedin:hover, 
.about-page .team-member-links .fa-github:hover
 {
    color: black;
}
.about-page .team-member-links a:hover {
    color: black;

}
.about-page .team-member-links a:visited {
    color: grey;

}

.about-page .team-member-description {
    color:#272727;
    font-size:16px;
    line-height:1.3em;
}

/* newsletter */
.newsletter {
    background-color:#fff;
    box-sizing:border-box;
    border:1px solid #CCCCCC;
    display:none;
    padding:20px;
    position:absolute;
    bottom:-470px;
    right:0;
    height:450px;
    width:300px;
    z-index:4;

    transform-origin:right top;
    -ms-transform-origin:right top;
    -moz-transform-origin:right top;
    -webkit-transform-origin:right top;
    
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);

    -webkit-transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition:         transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.newsletter[show="true"] {
    display:block;
}

.navbar[newsletter="true"] .newsletter {
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);

    opacity:1;

    right:20px;
}

.newsletter-text {
    margin-bottom:20px;
}

.newsletter input {
    display:inline-block;
    font-size:20px;
    font-family:AvertaLight;
    margin-bottom:20px;
    padding:8px;
    width:100%;
    border:1px solid #cccccc;
}

@media screen and (max-width:720px) {
    .navbar {
        padding:16px 0;
    }
    .mobile-hamburger {
        display:inline;
        float:right;
    }
    .navbar-left {
        padding-left:20px;
    }
    .nav-items .nav-link.selected {
        background-image:none;
    }
    .navbar-right {
        margin:0;
        width:100%;
    }
    .nav-items .nav-link, .nav-button {
        background:#EFEEEE;
        margin:0;
        padding:20px;
        width:100%;
        float:none;
        display:block;
        text-align:left;
    }
    .nav-button {
        border:none;
    }
    .nav-items {
        max-width:0;
        max-height:0;
        overflow:hidden;
        position:relative;
        top:70px;
    }
    .nav-items.mobile-dropdown {
        overflow:visible;
        max-height:none;
        max-width:100%;
        width:100%;
        display:inline-block;
        position:absolute;
        left:0;
        -webkit-transition:max-width 0.8s; 
        transition:max-width 0.8s;
    }
    .about-page .skill {
        display:inline-block;
        width:80%;
        min-width:none;
        padding:70px 10% 0 10%;
    }
    .contact-page .intro-stripe {
        padding:60px 40px 80px 40px;
    }
    .contact-page .contact-form form {
        padding:30px 40px 30px 40px;
    }
    .contact-page .form-element-text {
        display:block;
    }
    .contact-page .contact-form .form-element input, textarea {
        display:block;
        padding:8px 16px;
        margin:10px 0 20px 0;
    }
    .contact-page .contact-form .form-element textarea {
        margin:0;
        height:200px;
    }
    .about-page .intro-stripe {
        padding:100px 40px;
        background-image:none;
    }
}
@media screen and (max-width:900px) {
    .about-page .team-member {
        display:inline-block;
        width:100%;
        min-width:none;
        max-width:none;
        padding:35px 0;
    }
    .about-page .team-member .team-member-picture {
        display:block;
        margin:0 auto;
    }
}
@media screen and (max-width:900px) {
    h2 {
        font-size: 28px;
    }
    .team-member-description, .team-member-name {
        text-align: center;
    }
    .about-page .team-member-picture {
        height:150px; width:150px;
    }
    .team-member-picture img {
        width: 150px !important;
    }
    .team-member-picture .img-background {
        height:150px !important; 
        width:150px !important;
    }
}