/* ============================================================
   NORMALIZE & RESET STYLES
   ============================================================ */

/*! normalize.css v1.1.3 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,main,nav,section{
    display:block
}
canvas,video{
    display:inline-block
}
html{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%
}
button,html,input,select,textarea{
    font-family:sans-serif
}
a:focus{
    outline:dotted thin
}
a:active,a:hover{
    outline:0;
    color:#fff
}
h1{
    font-size:2em;
    margin:.67em 0
}
h2{
    font-size:1.5em;
    margin:.83em 0
}
h3{
    font-size:1.17em;
    margin:1em 0
}
h4{
    font-size:1em;
    margin:1.33em 0
}
h5{
    font-size:.83em;
    margin:1.67em 0
}
h6{
    font-size:.67em;
    margin:2.33em 0
}
abbr[title]{
    border-bottom:1px dotted
}
b,strong{
    font-weight:700
}
blockquote{
    margin:1em 40px
}
code,pre{
    font-family:monospace,serif;
    font-size:1em
}
pre{
    white-space:pre;
    white-space:pre-wrap;
    word-wrap:break-word
}
small{
    font-size:80%
}
img{
    border:0;
    -ms-interpolation-mode:bicubic
}
svg:not(:root){
    overflow:hidden
}
figure{
    margin:0
}
button,input,select,textarea{
    font-size:100%;
    margin:0;
    vertical-align:baseline
}
button,input{
    line-height:normal
}
button,select{
    text-transform:none
}
button,html input[type=button],input[type=reset],input[type=submit]{
    -webkit-appearance:button;
    appearance:button;
    cursor:pointer
}
button[disabled],html input[disabled]{
    cursor:default
}
input[type=search]{
    -webkit-appearance:textfield;
    appearance:textfield;
    -moz-box-sizing:content-box;
    -webkit-box-sizing:content-box;
    box-sizing:content-box
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
table{
    border-collapse:collapse;
    border-spacing:0
}

/* ============================================================
   BASE STYLES
   ============================================================ */

 html,body{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:none
}
html{
    box-sizing:border-box;
    font-size:14px
}
*,*:before,*:after{
    box-sizing:inherit
}
::-moz-selection{
    background:#0061FF;
    color:#F1EED3;
}
::selection{
    background:#0061FF;
    color:#F1EED3;
}
::selection a {
 text-decoration: underline;
}

a{
    outline:none !important
}
a:selected{
    outline:1px dotted rgba(255,255,255,0.1)
}
.wf-loading h1,.wf-loading h2,.wf-loading h3 .wf-loading p,.wf-loading li{
    visibility:hidden !important
}
body{
    font-family:'Lato', Helvetica, Arial, sans-serif;
    line-height:24px;
    color:#F1EED3;
    margin:0;
    padding:0;
    background-color:#0E1B30;
}
.mb-40{
    margin-bottom:40px
}
.mb-60{
    margin-bottom:60px;
    overflow:hidden
}

/* ============================================================
   INTRO/HEADER SECTION
   ============================================================ */

.intro{
    padding:0 40px;
    color:#F1EED3;
    margin:0 auto;
    background-color: #0E1B30;
}
.intro-content{
    font-size:50px;
    max-width:1260px;
    margin:0 auto;
    padding:60px 0 0;
    overflow:hidden
}
.intro a{
    color:#d33131
}
.intro-title{
    margin:0 0 30px;
    font-size:17rem;
    letter-spacing: 0.5rem;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    font-style:italic;
    font-family:'Lato', serif
}
.intro-sub{
    margin:20px 0;
    font-size:6rem;
    line-height:7rem;
    margin:0 auto;
    font-style: italic;
    font-weight:500
}
.intro-sub-text,.intro-sub-text-end{
    border-bottom:1px dotted rgba(255,255,255,0.2)
}
.intro-sub.is-rendered{
    opacity:1
}
.is-rendered .intro-sub-text,.is-rendered .intro-sub-text-end{
    border-bottom:0
}

/* ============================================================
   ABOUT ME SECTION
   ============================================================ */

.about-me{
    color:#F1EED3;
    margin:0 auto;
    padding:60px;
    background-color:#0E1B30;
    font-size:1.5rem;
}
.about-me-content{
    display:flex;
    align-items:start;
    justify-content:space-between;
    flex-wrap: wrap;
}
.about-me-bio{
    flex:2;
    max-width:750px;
    display:inline-block;
    vertical-align:top
}
.about-me-bio-text{
    line-height:2.5rem;
    color:#F1EED3;
    text-decoration:none
}
.about-me-bio-text a{
    color:#70A6FF;
    transition:color 200ms ease-in-out;

}
.ben-headshot { 
    width: 100%;
    padding: 8px 40px;
    border-radius: 0 80px 0 80px;
}
.about-me-bio-text a:hover{
    text-decoration:underline;
    color:#0061FF;
}
.about-me-bio-text._l{
    margin:0;
    font-size:2rem;
    line-height:2.8rem
}
.about-me-bio-lead{
    font-size:2.8rem;
    line-height:3.5rem;
    margin:2rem 0 0
}
.about-me-content{
    max-width:1260px;
    margin:0 auto
}
.about-me-contact{
    flex:1;
    padding:0 20px
}
.about-me-accolades-title{
    padding-bottom:5px;
    font-weight:600;
    font-size:2rem;
    margin-bottom: 0;
    line-height:1.2;
}
.about-me-accolades-title a{
    color:#181818;
}
.about-me-accolades-title a:hover{
}
.accolades-articles {
    display: flex;
    gap: 0 3rem;
}
.accolades-articles > div {
    float: left;
}
.about-me-accolades-list{
    margin-top:10px;
    padding-left: 0;
    list-style-type:none
}
.about-me-accolades-list li{
    margin-bottom:1rem;
    font-size:1.3rem;
    line-height:1.5
}
.about-me-accolades-list a{
    color:#70A6FF;
    transition:color 200ms ease-in-out
}
.about-me-accolades-list a:hover{
    color:#0061FF;
    text-decoration:underline
}
.ben-lister-headshot{
    display:block;
    margin:0 auto;
    width:100%;
    max-width:350px;
    transition:filter 1000ms ease-in-out;
    filter:brightness(5)
}
.ben-lister-headshot.is-visible{
    filter:brightness(1)
}

/* ============================================================
   CONTACT INFO & SOCIAL LINKS
   ============================================================ */

.contact-info-list{
    list-style-type:none;
    padding:0 40px;
}
.contact-info-list-item {
    margin-bottom: 1rem;
}
.contact-info-list-item a {
    transition:all 200ms ease-in-out;
    cursor:pointer;
    color: #F1EED3;
}

.contact-info-list-item a:hover {
    color: #fff;
}

.contact-info-list-item:last-child{
    margin-right:0
}
.contact-twitter,.contact-github,.contact-dribbble,.contact-codepen,.contact-linkedin{
    display:inline-block;
    text-indent:-9999px;
    background:url(../images/social-icons.min.svg) no-repeat;
    background-size:600px 104px;
    pointer-events:all;
    height:125px
}
.social-email{
    background:url(../images/socialicons/cream/mail.svg) no-repeat
}
.social-twitter{
    background:url(../images/socialicons/cream/twitter.svg) no-repeat
}
.social-medium{
    background:url(../images/socialicons/cream/medium.svg) no-repeat
}
.social-github{
    background:url(../images/socialicons/cream/github.svg) no-repeat
}
.social-dribbble{
    background:url(../images/socialicons/cream/dribbble.svg) no-repeat
}
.social-linkedin{
    background:url(../images/socialicons/cream/linkedin.svg) no-repeat
}
.social-instagram{
    background:url(../images/socialicons/cream/instagram.svg) no-repeat
}
.social-codepen{
    background:url(../images/socialicons/cream/codepen.svg) no-repeat
}
.social-twitter,.social-medium,.social-github,.social-instagram,.social-dribbble,.social-codepen,.social-linkedin,.social-email{
    width:20px;
    height:20px;
    font-size: 1.25rem;
    line-height: 1;
    text-indent:30px;
    display:inline-block;
    background-position:center;
    background-size:20px 20px;
    pointer-events:all;
    fill:#F1EED3;
}
.contact-twitter{
    background-position:-133px 0;
    width:110px
}
.contact-email{
    background-position:-133px 0;
    width:110px
}
.contact-github{
    background-position:-493px 0;
    width:101px
}
.contact-dribbble{
    background-position:0 0;
    width:105px
}
.contact-codepen{
    background-position:-377px 0;
    width:100px
}
.contact-linkedin{
    background-position:-269px 0;
    width:83px
}
.contact-info-eml{
    text-align:center;
    padding:20px 0 0;
    font-size:2rem;
    max-width:900px;
    margin:0 auto;
    line-height:2.75rem
}
.contact-info-eml a{
    color:#F1EED3;
}
.bottom-portfolio-link{
    text-align:center;
    padding:80px 0 0;
    font-size:24px;
    line-height:2rem
}
.bottom-portfolio-link a{
    color:#fff
}

/* ============================================================
   CASE STUDIES SECTION
   ============================================================ */
.case-studies {
    width: 100%;
    margin-bottom: 2rem;
}
.cs-title {
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}
.cs-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 0 2rem;
}
.cs-column {
    flex: 1;
    margin: 0 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.cs-column:first-of-type {
    margin-left: 0;
}
.cs-column-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 4px;
}
.cs-column:hover img {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.05);
}
.cs-column-title {
    margin: 1rem 0 .75rem;
    color: #70A6FF;
    font-size: 1.1em;
    line-height: 1.3;
    font-weight: bold;
}
.cs-column-link {
    text-decoration: none;
    color: #70A6FF;
}
.cs-column-title:hover, .cs-column-link:hover {
    text-decoration: underline;
    color: #0061FF;
}
.cs-column-text {
    line-height: 1.5;
    margin: 10px 0 0;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.mt-1em {
    margin-top: 1em;
}
.mb-55 {
    margin-bottom: 55px;
}

/* ============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================ */

@media only screen and (max-width: 1335px){
    .intro-title{
        font-size:15rem;
        line-height:16rem
    }
    .intro-sub{
        font-size:4rem;
        line-height:5rem
    }
    .about-me-bio{
        max-width: none;
    }
    .about-me{
        padding-top:40px
    }
    .about-me-contact{
        padding:0
    }
    .intro-content{
        padding:20px 20px 0;
    }
    .about-me-content{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .about-me-accolades-title:first-child{
        margin-top:40px;
        padding-top:40px;
        border-top:1px solid #eee
    }
}
@media only screen and (max-width: 1280px){
    .intro-title{
        font-size:13rem;
        line-height:14rem
    }
    .intro-sub{
        font-size:4rem;
        line-height:5rem
    }

    .about-me-content{
        display: flex;
        align-items: start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .about-me-bio-lead,.about-me-accolades-title{
        font-size:1.9rem;
        line-height:2.4rem;
        margin-top:0
    }
    .about-me-accolades-list,.about-me-accolades-title{
        padding-left:0;
        margin-left:0
    }
    .about-me-bio{
        margin-right:0
    }
}
@media only screen and (max-width: 1279px){
    .intro-title{
        font-size:11.75rem;
        line-height:10.75rem
    }
    .intro-sub{
        font-size:3rem;
        line-height:4rem
    }
}
@media only screen and (max-width: 955px){
    .intro-title{
        font-size:8.5rem;
        line-height:9.5rem
    }

    .about-me-content{
        display: block;
    }
    .contact-info-list-item{
        width:100px;
        margin:0 20px 20px 0
    }
    .accolades-articles {
        flex-flow: column;
    } 
    .ben-headshot {
        border-radius: 0;
        width: 50%;
    }
    .contact-info-list {
        list-style-type: none;
        padding: 0 20px;
        margin: 40px 0;
        display: inline-block;
        vertical-align: top;
    }
}
@media only screen and (max-width: 775px){
    body{
        font-size:10px
    }
    .intro-title{
        font-size:7rem;
        line-height:8rem;
        margin:0 0 10px
    }
    .intro-sub{
        font-size:3rem;
        line-height:4rem
    }
    .about-me-bio{
        padding:20px;
        width:100%;
        display:block
    }
    .about-me-accolades{
        width:100%;
        margin:0 0;
        display:block
    }
    .intro-content{
        padding:40px 0 0;
    }
    .contact-info{
        padding:80px 0
    }
    .contact-twitter,.contact-github,.contact-dribbble,.contact-codepen,.contact-linkedin{
        background-size:300px 52px;
        height:62px
    }
    .contact-twitter{
        background-position:-67px 0;
        width:55px
    }
    .contact-github{
        background-position:-247px 0;
        width:51px
    }
    .contact-dribbble{
        background-position:0 0;
        width:53px
    }
    .contact-codepen{
        background-position:-189px 0;
        width:50px
    }
    .contact-linkedin{
        background-position:-135px 0;
        width:43px
    }
    .about-me{
        padding:20px 20px 0 20px
    }
}
@media (max-width: 690px){
    body {
        padding: 0 30px 30px;
    }
    .intro-title{
        font-size:5rem;
        line-height:7rem;
        letter-spacing: 0.25rem;
    }
    .intro-sub{
        font-size:2.5rem;
        line-height:3.5rem
    }
    .intro-content{
        padding:40px 0 0;

    }
    .about-me-bio,.about-me-contact{
        padding:0
    }
    .intro{
        padding:0 20px
    }
    .ben-headshot {
        border-radius: 0;
        width: 100%;
        padding: 20px;
    }
    .social-twitter,.social-medium,.social-github,.social-instagram,.social-dribbble,.social-codepen,.social-linkedin,.social-email{
        width:20px;
        height:20px;
        font-size: 2rem;
        line-height: 2;
        text-indent:0;
        display:inline-block;
        background: none;
    }
    
}
@media (max-width: 540px){
    .intro-title{
        font-size:3.5rem;
        line-height:5rem
    }
    .intro-sub{
        font-size:1.75rem;
        line-height:2.5rem;
        padding-bottom: 20px;
    }
    .intro {
    }
    .contact-info-list {
        margin: 0;
    }
    .about-me-bio-text._l {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
    .contact-info-list-item{
        width:100px;
        margin:10px
    }
    .contact-info-eml{
        font-size:1.5rem;
        width:90%;
        margin:0 auto;
        font-weight:600
    }
    .about-me-bio-lead{
        padding-right:0;
        margin-right:0
    }
    .bottom-portfolio-link{
        padding:5px;
        background-color:rgba(45,46,51,0.9);
        border-radius:5px;
        text-align:center;
        display:block;
        width:80%;
        margin:60px auto 0;
        opacity:1
    }
}
@media (max-width: 768px) {
    .cs-container {
        flex-direction: column;
    }
    .cs-column {
        margin: 15px 0;
    }
}
/*# sourceMappingURL=styles.css.map */