@charset "UTF-8";

/***************************************/
/*        RESET MARGINS & PADDING      */
/***************************************/

html, body, div, span, p, blockquote, pre, code, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, label, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
.centered ul li {
    list-style-type: none;
    display: inline-block;
}
html, body {
    height: 100%;
    font-size: 14px;
    font-family: "Poppins", "Helvetica", "Arial", sans-serif;
}
/*@media only screen and (min-width:481px) and (max-width: 720px) {*/


@media only all and (min-width: 320px) {

    /***************************************/
    /*              TYPOGRAPHY             */
    /***************************************/

    p {
        font-size: 14px;
        font-weight: 300;
        letter-spacing: .01em;
        line-height: 22px;
    }
    h1 {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .05em;
        margin-top: 24px;
        text-transform: uppercase;
    }
    h2 {
        font-weight: 400;
        font-size: 15px;
        font-weight: 600;
        margin: 4px 0 4px 0;
        letter-spacing: .05em;
        text-transform: uppercase;
/*        color: #201453;*/
        color: #f8f7f5;
    }
    h3 {
        font-size: 14px;
        font-weight: 300;
        letter-spacing: .03em;
        color: #201453;
        opacity: .6;
        margin-bottom: 6px;
    }
    h4 {
        font-weight: 400;
        font-size: 64px;
        line-height:22px;
        color: #201453;
        text-transform: uppercase;
        letter-spacing: .03em;
        display: inline;
    }
    h5 {
/*        font-family: 'Roboto Condensed', sans-serif;*/
        font-weight: 600;
        font-size: 30px;
        line-height: 40px;
        text-transform: uppercase;
        letter-spacing: -.01em;
        display: inline;
    }
    /***************************************/
    /*             NAVIGATION              */
    /***************************************/
    
    .titlebar {
        font-weight: 400;
        /*      letter-spacing:.08em;*/
        width: 100%;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        z-index: 100000;
        background-color: rgba(255, 255, 255, .0);
        /*      background-color: rgba(244,92,79, 1);*/
        opacity: 1;
        position: absolute;
        left: 0; right: 0;
        bottom: 285px;
    }
    .centered {
        font-weight: 400;
        letter-spacing: .08em;
        width: 86%;
        margin-left: auto;
        margin-right: auto;
    }
    .divider {
        border-top: 7px solid #37003C;
    }
    .name {
        font-size: 11px;
        float: left;
        color: #37003C;
        font-weight: 600;
        padding-top: 30px;
        text-transform: uppercase;
    }
    .nav {
        float: right;
        padding-top: 28px;
        text-transform: uppercase;
        list-style: none;
        display: none;
    }
    .nav li a {
        font-size: 12px;
        font-weight: 400;
        text-transform: uppercase;
        color: #37003C;
        text-decoration: none;
        opacity: 0.5;
        margin: 0 5px;
    }
    .nav li a:hover {
        color: #37003C;
        text-decoration: none;
        opacity: 1;
    }
    .nav li a:active {
        opacity: 1;
    }
    span.role {
        font-size: 12px;
        color: #37003C;
        opacity: 0;
        font-weight: 300;
        display: block;
        letter-spacing: -0.1em;
    }
    /****   STYLING OPEN/CLOSE BUTTON   ****/
    .button img{
        display: inline;
        position: absolute;
        right: 7.5%;
        top: 32px;
        z-index: 999;
        width: 24px;
    }

    /****     NAV OVERLAY      ****/
    .overlay{
        display: none;
        position: fixed;
        top: 0;
        width: 100vw; /* VIEWPORT WIDTH */
        height: 100vh; /*VIEWPORT HEIGHT*/
        z-index: 2;
        background: rgba(248, 247, 245, 0.9);
        overflow: hidden;
    }
    .wrap{    
        text-align: center;
        max-width: 1100px;
        margin: 50% auto;
    }
    .wrap ul.wrap-nav{
        text-transform: uppercase;
        top: calc( 50% - 200px );
/*        padding: 40px 0px 100px;*/
    }
    .wrap ul.wrap-nav > li{
        font-size: 22px;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        position: relative;
        padding: 20px 0; 
    }
    .wrap ul.wrap-nav > li a{
        color: #000;
        opacity: 0.87;
        display: block;
        padding: 8px 0;
        text-decoration: none;
    }
/*    .wrap ul.wrap-nav > li a:hover{
        color: #928D16;
        text-decoration:none;   
        opacity: 1;
    }*/
    .wrap ul.wrap-nav ul{
        padding: 20px 0;
    }
    .wrap ul.wrap-nav ul li{
        display: block;
        font-size: 16px;
        width: 100%;
        color: #919191;
    }
    .wrap ul.wrap-nav ul li a{
        color: #919191;
    }    

    /****     NAV CLONED      ****/

    .titlebar.cloned{
        background-color: rgba(248, 247, 245, .95);
    }
    .titlebar.cloned .divider{
        border-top: 7px solid #37003C;
    }
    .titlebar.cloned .name{
        color: #37003C;
    }
    .titlebar.cloned a{
        color: #37003C;
    }
    .titlebar.cloned .active{
        color: #37003C;
        opacity: 1;
    }
    .titlebar.cloned .nav li a:hover {
        color: #37003C;
        text-decoration: none;
        opacity: 1;
    }    
    /***************************************/
    /*               GLOBAL                */
    /***************************************/
  
    .container {
        width: 100%;
        min-height: 52%;
        padding: 20px 0;
    }
    .wrapper {
        width: 86%;
        margin: auto;
/*        padding: 80px 0 100px 0;*/
    }
    .header {
        width: 100vw; /* VIEWPORT WIDTH */
        height: 100vh; /*VIEWPORT HEIGHT*/
        position: relative;
        background: url(../_images/bg_pattern_red.png);
        padding-bottom: 285px;
        /*        background-color: #F45C4F;*/
    }
    .hero {
        position: absolute;
        top: calc( 50% - 200px );
        left: 0; right: 0;
        margin: 0 auto;
        color: #37003C;
        text-align: center;
        -webkit-transform: translateY(-50%);  
        -ms-transform: translateY(-50%);  
        transform: translateY(-50%);   
        max-width: 298px;     

    }
    .arrow {
        border: 2px solid #37003C;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        height: 40px;
        width: 40px;
        background: url("../_images/chevron.png")no-repeat center;
        background-size: 36%;
        position: absolute;
        opacity: 0.5;
        margin-top: 25%;
        left: 50%;
        transform: translate(-50%, 0);
    }
    a.anchor {
        display: block;
        position: relative;
        top: -100px;
        visibility: hidden;
    }
    .about {
/*        background: url(../_images/bg_pattern_3.png);*/
        background: #F8F7F5;
        color: #201453;
        margin: -265px 0 0 !important;
        padding: 0;
        position: relative;
        z-index: 1;
        /*MAKE THIS A MODIFIER INSTEAD*/
    }
    .about:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0; right: 0;
        width: 100%;
        height: 365px;
        background: url(../_images/bg_pattern_red.png);
        z-index: 0;
    }
    .intro-mobile{
        font-size: 12px;
        font-weight: 100;
        line-height: 22px;
        background: #fff;
    }
    .intro-mobile .col1{
/*        width: 83.25%;*/
        height: 246px;
        overflow: hidden;
    }
    .intro-mobile .col1 img{
        width: 160%;
        float: right;
        margin-top: -30px;
    }
    .intro-mobile .col2{
        padding: 2.5% 10.5% 10.5%;
    }
    .intro-mobile .connect img{
        width: 8%;
        display: inline-block;
        vertical-align: text-top;
        margin: 2px 18px 0 0;
    }
    .intro-mobile .connect ul li{
        list-style-type:none;
        text-decoration: none;
        margin: 4px 0;
        display: inline;
    }
    .intro-desktop .col2{
        width: 32%;
        padding: 9% 0 5% 6%;
    }
    .intro-desktop{
        display: none;
        font-weight: 100;
        line-height: 26px;
        background: url(../_images/profile.png)no-repeat right;
        background-size: 94%;
    }
    .intro-desktop .col1{
        width: 32%;
        padding: 9% 0 5% 6%;
    }
    .intro-desktop .connect ul li{
        list-style-type:none;
        text-decoration: none;
        margin: 4px 0;
    }
    .intro-desktop .connect img{
        width: 5%;
        display: inline-block;
        vertical-align: text-top;
        margin: 2px 16px 0 0;
    }
    .intro-desktop li a{
        color: #37003C;
        font-size: 13px;
        font-weight: 100;
        opacity: 0.5;
        text-decoration: none;
        letter-spacing: 0.05em;
    }
    .intro-desktop li a:hover{
        opacity: 1;
    }    
    .container__wrapper {
        background: #fff;
/*        padding: 0 68px;*/
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    .work {
/*        background: url(../_images/bg_pattern_2.png);*/
        background: #F8F7F5;
        margin: 0;
        padding: 0;
    }
    .animation {
        opacity: 0;
        -webkit-transform: translatey(25px);
        -webkit-transition: all .300s ease;
    }
    .cf:before, .cf:after {
        content: " ";
        /* 1 */
        display: table;
        /* 2 */
    }
    .cf:after {
        clear: both;
    }

    /***************************************/
    /*                ABOUT                */
    /***************************************/

    .rectangle {
        height: 5px;
        background: #201453;
        margin-bottom: 14px;
    }
    .bar {
        float: right;
        height: 26px;
        margin-top: 10px;
        opacity: 0.55;
        background-image: linear-gradient(45deg, #FFF 25%, #F45C4F 35%, #F45C4F 55%, #FFF 55%, #FFF 75%, #F45C4F 75%, #F45C4F);
        background-size: 4px 4px;
        /*	background: repeating-linear-gradient(
		  45deg,
		  #F45C4F,
		  #F45C4F 10px,
		  #fff 10px,
		  #fff 20px);*/
    }
    .data {
        float: left;
        height: 26px;
        background: #FFF;
        margin-top: 10px;
    }

    /***************************************/
    /*                WORK                */
    /***************************************/

    .gridcol1{
        width: 94.15%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 0 0 10px 0;
    }
    .gridcol2{
        width: 100%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 0 0 10px 0;
    }
    .subrow1 {
        display: flex;
        flex-direction: column;
    }
    .subrow2 {
        display: flex;
        flex-direction: column;
    }
    .subcol1 {
        width: 101%;
    }
    .subcol2 {
        width: 106%;
    }
    .subcol3 {
        width: 101%;
    }
    .subcol4 {
        width: 101%;
    }
    img {
        width: 100%;
        display: block;
    }
    .video {
        width: 100%;
        display: block;
    }
    .tile{
        opacity: 0;
        padding: 10px;
    }
    .tile:hover .overlay .line {
      -webkit-transition: width .4s .2s;
      transition: width .4s .2s;
      width: 20%;
    }
    .animation{
        opacity: 0;
        -webkit-transform: translatey(25px);
        -webkit-transition: all .300s ease;
    }
  
    /***************************************/
    /*               FOOTER                */
    /***************************************/
  
    .footer {
        background: #342A43;
        color: #f8f7f5;
        margin: 0;
        padding: 50px 0 40px;
    }
    .profile {
        margin-left: auto;
        margin-right: auto;
        width: 13%;
        padding: 14px 0 4px;
        display: block;
    }
    .hero-2 {
        margin-left: auto;
        margin-right: auto;
        width: 94%;
        text-align: center;
/*        padding: 20px 0 0 0;*/
    }
    .email-button{
        margin: 50px 0;
    }
    .email{
        border: 1px solid #F1EFEB;
        border-radius: 2px;
        color: #F1EFEB;
        font-weight: 500;
        letter-spacing: 0.03em;
        width: 24%;
        margin: 0 auto;
        padding: 21px 84px;
        text-decoration: none;
        text-transform: uppercase;
    }
    .email:hover{
        background-color: #F1EFEB;
        color:#F84056;
    }
    .footer ul li{
        margin: 0;
        padding: 10px 10px 0;
        list-style-type: none;
        display: inline-block;
    }
    .footer ul li a{
        color: #f8f7f5;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }
    .footer ul li a:hover{
        text-decoration: underline;
    }
}

    /***************************************/
    /*            MEDIA QUERIES            */
    /***************************************/


@media only all and (min-width: 620px) {
    h5 {
        font-size: 36px;
        line-height: 50px;
    }
    .centered {
        width: 88%;
    }
    .titlebar, .titlebar-2 {
        letter-spacing: .08em;
        height: 100px;
    }
    .name {
        font-size: 13px;
        padding-top: 40px;
    }
    .nav {
        display: block;
        padding-top: 40px;
    }
/*    .nav li a, .nav li:visited {
        font-size: 13px;
        font-weight: 400;
        text-decoration: none;
        color: #FFF;
        opacity: 0.5;
        margin-left: 36px;
    }*/
    .nav li a {
        font-size: 13px;
        font-weight: 400;
        text-decoration: none;
        opacity: 0.5;
        margin-left: 36px;
    }
    a:hover {
        color: #FFF;
        text-decoration: none;
        opacity: 1;
    }
    .nav li a:active {
        font-weight: 400;
        text-decoration: none;
        color: #FFF;
    }
    .button{
        display: none;
    }
    .hero {
        max-width: 536px;
/*        margin: auto;*/
    }
    .arrow {
        height: 44px;
        width: 44px;
        margin-top: 15%;
        display: block;
    }
    .wrapper {
        width: 88%;
    }
    .intro-mobile{
        font-size: 13px;
    }
    .intro-mobile .col1{
        height: 286px;
    }
    .intro-mobile .col1 img{
        width: 132%;
/*        margin-top: -30px;*/
    }
    .intro-mobile .col2{
        padding: 3% 8% 6%;
    }
    .intro-mobile .connect img{
        width: 5%;
    }
    .intro-mobile .connect ul li{
        list-style-type:none;
        text-decoration: none;
        margin: 4px 0;
        display: inline;
    }
    .gridcol1{
        width: 60.15%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 0 0 10px 0;
    }
    .gridcol2{
        width: 39.85%;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: 0 0 10px 0;
    }
    .subrow1, .subrow2 {
        display: flex;
        flex-direction: row;
    }
    .subcol1 {
        width: 62%;
    }
    .subcol2 {
        width: 35.64%;
    }
    .subcol3 {
        width: 40%;
    }
    .subcol4 {
        width: 60%;
    }
    .profile {
        width: 10%;
        padding: 12px 0 8px;
    }
    .projects {
        float: left;
        width: 100%;
        margin: 28px 12px;
    }
    .nav-bottom {
       height: 100px;
    }
    .hero-2 {
        width: 75%;
/*    padding: 65px 0 0 0;*/
    }
    .email{
        padding: 21px 124px;
    }
}
/*@media only screen and (min-width: 768px) {*/

@media only all and (min-width: 900px) {
    .container {
        min-height: 52%;
        margin: auto;
    }
    .wrapper {
        width: 80%;
        max-width: 1120px;
        margin: auto;
    }
    .centered {
        width: 92%;
    }
    h2 {
        font-size: 18px;
    }
    h5 {
        font-size: 50px;
        line-height: 58px;
        letter-spacing: -.01em;
    }
    span.role {
        font-size: 13px;
        opacity: 0.5;
        font-weight: 300;
        display: inline;
        letter-spacing: 0.1em;
    }
    .titlebar.cloned span.role {
        opacity: 0.5;
    }
    .titlebar-2 {
        font-weight: 400;
        width: 100%;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(52, 60, 71, .95);
        opacity: 1;
    }
    .nav li a:active, .nav li a.active {
        font-weight: 400 !important;
        text-decoration: none;
        color: #FFF;
        opacity: 1;
    }
    .nav-bottom {
       height: 100px;
    }   
    .hero {
        top: calc( 50% - 185px );
        max-width: 1024px;
        margin: auto;
    }
    .arrow{
/*        height: 50px;
        width: 50px;*/
        margin-top: 8%;       
    }
    .intro-mobile .col1{
        height: 365px;
    }
    .intro-mobile .col2{
        padding: 8% 10% 8%;
    }
    .intro-mobile .connect img{
        width: 4%;
    }
    .subcol2{
        width: 36%;
    }
    .profile {
        width: 9%;
        padding: 32px 0 10px;
    }    
    .hero-2 {
        width: 54%;
        padding: 24px 0 0 0;
    } 
}
@media only all and (min-width: 1024px) {
    .hero {
        max-width: 980px;
    }
    .intro-mobile{
        display:none;
    }
    .intro-desktop{
        display:block;
        background-size: 130%;
    }
    .subcol2 {
        width: 35.65%;
    }
    .profile {
        width: 6%;
    } 
}
@media only all and (min-width: 1280px) {
    .intro-desktop{
        background-size: 94%;
    }
    .subcol2 {
        width: 35.35%;
    }
}