@font-face
{
    font-family: authentic;

    src: url(../fonts/AUTHENTICSans-90.otf);
}

@font-face
{
    font-family: authentic-bold;

    src: url(../fonts/AUTHENTICSans-130.otf);
}

*{
    box-sizing: border-box;
}




body
{
    font-family: authentic;

    overflow-x: hidden;

    margin: 0 auto;
    padding-top: 0;

    color: black;
    background: white;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.projects.stop
{
    overflow-y: hidden;
}

a
{
    text-decoration: none;
    color: black;
}

.homeClick{
    display: inherit;
    width: inherit;
}

a:hover
{
    transition: .3s;
    opacity: .7;
}
/*a:visited{
    color: rgb(135,0,255);
}*/

p a
{
    color: #FF4E02;
}
li a{
    color: #FF4E02;

}

p
{
    margin-block-start: 0;
    line-height: 1.5;

}

/*h1
{
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

         -o-user-select: none;
}*/
h2
{
    font-family: authentic;
    font-size: 24px;

    letter-spacing: 1px;
/*    text-transform: uppercase;
*/}

ul{
    list-style-type: none;
}

nav
{
    position:         sticky;
    position: -webkit-sticky; /* Safari */
    z-index: 11;
    top: 0;

    background-color: white;
    display: inline-block;


    justify-content: space-between;
}

.nav_header
{
    display: inline-block;

    font-family: authentic;
    font-size: 16px;
    background-color: white;
    padding-left: 15px;
    padding-right:15px;

    letter-spacing: 1px;
}
.nav_header a{
    color: black;
}

.nav_header a:hover{
    color: red;
}

.about
{
    position: absolute;
    z-index: 10;

    display: none;
    float: left;

    padding-right: 30px;
    padding-left: 30px;

    background: white;
}



.simple
{
        width: 50%;
        padding-right: 30px;
        padding-left: 30px;
        padding-top: 30px;
        line-height: 1.5;
        letter-spacing: 0.5px;
        hyphens: auto;
}

.aboutPage{
/*    position: absolute;*/
    z-index: 10;

    float: left;

    padding-right: 30px;
    padding-left: 30px;

    margin-bottom: 30px;

    background: white;
}


.me
{
    width: 100%;
    height: 100%;
    margin-left: 30px;

    background-image: url('../content/me.jpg');
    background-position: center;
    background-size: cover;
}

.me_half
{
    margin-right: 30px;
}

.info
{
    cursor: pointer;
}


.weworkHero
{
/*    border: 1px solid grey;*/
    background-color: #F5F5F5;
    background-image: url('../content/everout/splash.jpg');
}
.edifecsHero
{
/*    border: 1px solid grey;*/
    background-color: #F5F5F5;
    background-image: url('../content/edifecs/edifecs-logo.jpg');
}
.tgoHero
{
    border: 1px solid black;
    background-color: #000;
    background-image: url('../content/tgo/tgo_logo.svg');
}
/*.tgoHero:hover{
    background-image: url("../videos/tgo_hero.gif");
}*/
.rhodyHero
{
    background-color: #5554CB;
    background-image: url('../content/knyts/knytshero.jpg');
}
.mflaHero
{
    background-color: #5554CB;
    background-image: url('../content/mfla/mflahero.svg');
}
/*.rhodyHero:hover{
    background-image: url("../videos/rides_ani_logo.gif");
}*/
.museHero
{
    background-image: url('../content/muse/muse_hero.svg');
}
/*.museHero:hover{
    background-image: url("../videos/muse_hero.gif");    
}*/
.flareHero
{
    background-image: url('../content/flare/flare_hero.svg');
}
.merlHero
{
    background-color: black;
    background-image: url('../content/merl/merl_hero.svg');
}
.shuffleHero
{
    background-image: url('../content/shuffle/shuffle_hero.svg');
}
.zenniHero{
    background-image: url('../content/zenni/zenni_hero.svg');
}
.ihsHero{
    background-image: url('../content/ihs/ihs.svg');
}
.flagsHero{
    background-image: url('../content/flags/flags_hero.svg');
}
.uberHero{
    background-image: url('../content/uber/uber-hero.svg');
}
.linkedinHero{
    background-image: url('../content/linkedin/linkedin-hero.svg');
}
.bandcampHero{
    background-image: url('../content/bandcamp/splash.gif');
}
.ibmDiscoveryHero{
    background-image: url('../content/gaycity/hero.gif');
}
.rapid7Hero{
    background-image: url('../content/rapid7/vmhero.jpg');
}
.ggfHero{
    background-image: url('../content/ggf/ggf-hero.svg');
}


.heroInfo
{
    z-index: 1;
    /*position: absolute;*/  
    display: flex;
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;

    justify-content: space-between;
}
.heroInfo p
{
    letter-spacing: 1px;
    font-size:12px;

    color: white;
    font-family: authentic-bold;


    margin-block-start: 1.5em;
}
.blackText p
{
    color: black;
}
.heroLeft
{
    text-align: left;

    flex: 1;
}
.heroCent
{
    text-align: center;

    flex: 1;
}
.heroRite
{
    text-align: right;

    flex: 1;
}




.passwordHero{
    background-color: #F5F5F5;
    justify-content: center;
    vertical-align: middle;
}
#password{
    border: 1px black solid;
    position:absolute;
    top: 50%;
    text-align: center;
}


.row
{
    display: flex;
    flex-direction: row;
}

.row>*{
    flex: 1 1 auto;
}

.profpic{
    height: auto;
    width: 100%;
}

.patron{
    font-size: 1.5vw;

    position: relative;

    display: flex;
    flex-direction: row;

        width: 100%;
        height: auto;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 30px;

        flex-wrap: nowrap;
        justify-content: flex-start;

/*        hyphens: auto;
*/}


.yi{
    width: 25%;
    padding-left: 30px;
}
.er{
    width: 50%;
    padding-left: 45px;
}
.san{
    width: 25%;
    padding-left: 30px ;
}

/*ROWS AND MARGINS*/

.col_micro
{
    flex: 1;
}

.col_small
{
    flex: 2;
}

.col_half
{
    flex: 3;
}

.col_medium
{   
    flex: 4;
}

.col_large
{
    flex: 6;
}



.brutal{
}
/*.fake{
    display: none;
}*/

.project-line{
    display: flex;
    flex-direction: row;
    width: 100%;

    font-size: 1.5vw;
}

.project-line:hover{
    background-color: #FF4E02;
    color: white;
}


.project-link{
    border-top: solid black 1px;

    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}

.project-link.blank{

    border-top: none;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}


/*.landing_text
{
    font-family: times_light;
    font-size: 36px;

    margin: 0;

    text-align: left;
    text-indent: 72px;
    letter-spacing: -1px;
    hyphens: auto;

    font-variant-numeric: oldstyle-nums;
}*/

.first_para
{
    text-indent: 0;
}

.project-content
{
    padding-right: 30px;
    padding-left: 30px;
}

.project-row{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.heroImage
{
    position: relative;
    flex: 1;
    height: 100vh;


    display: flex;

    margin: 0;
    padding: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.landingHero{
    height: 50vh;
}

.landingHero:hover
{
    cursor: pointer;
    transition: .3s;

    opacity: .80;
}

.large{
    height: 85vh;
}




.expand-button{
    border-top: solid black 1px;
    border-bottom: solid black 1px;

    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
}

.expand-button:hover{
    background-color: #FF4E02;
    color: white;
    cursor: pointer;
}


.expand-container{
    margin-top: 30px;
    display: none;
}

.expand-container.show{
    display: block;
}







input[type='checkbox']
{
    display: none;
} .wrap-collapsible
{
    margin: 1.2rem 0;
} .lbl-toggle
{
    display: block;

    padding: 1rem 0 1rem 0;

    cursor: pointer;
    transition: all .25s ease-out; 

    
    background: white;
    color: black;
    /*border-top: solid black 1px;*/
    border-bottom: solid black 1px;
} .lbl-toggle:hover
{
    background-color: #EFEDEF;
} .lbl-toggle::before
{
    display: inline-block;

    margin-right: .7rem;

    content: ' ';
    transition: transform .2s ease-out; 
    transform: translateY(-2px);
    vertical-align: middle;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
} .toggle:checked + .lbl-toggle::before
{
    transform: rotate(90deg) translateX(-3px);
} .collapsible-content
{
    overflow: hidden;

    max-height: 0;

    transition: max-height .25s ease-in-out;
} .toggle:checked + .lbl-toggle + .collapsible-content
{
    height: auto;
    max-height: none;
} .toggle:checked + .lbl-toggle
{
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
} .collapsible-content .content-inner
{
    /*background: white;*/
} .collapsible-content p
{
    margin-bottom: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}












.textCont2{
    position: relative;

    display: block;

    width: 100%;
    height: auto;
    margin: 10% auto;

    max-width: 960px;

    font-size: 24px;
    line-height: 1.5;
}
.casestudy-pic{
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.textCont
{
    position: relative;

    display: flex;
    flex-direction: row;

    width: 100%;
    height: auto;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;

    flex-wrap: nowrap;
    justify-content: flex-start;
}

.showingWork{
    background-color: #F3F3F3
}
.showingContent{
    padding-left: 30px;
    padding-right: 30px;
}
.showingText{
    padding-left: 30px;
    padding-right: 30px;
}


.largeText
{
    font-family: authentic;
    font-size: 24px;
    line-height: 1.5;

}
.left.largeText{
    font-family: authentic-bold;
    padding-right: 60px;
}
.leftCont
{
    display: flex;
    flex-direction: column;

    vertical-align: middle;

    justify-content: center;
}

.blackBorder
{
    border: 1px black solid;
}
.greyBorder
{
    border: 1px solid #EFEDEF;
}
.rightCont
{
    display: flex;
    flex-direction: column;

    vertical-align: middle;

    justify-content: center;
}
.rightCont p
{
    margin: 0;
}


.project_hero_img
{
    width: 100%;
    height: auto;
}

.project_half_img
{
    width: 50%;
    height: auto;
}
.projInfoInternal{
    padding-right: 60px;
    font-family: authentic-bold;
}
.projInfoInternal p{
    letter-spacing: 1px;

}

.padding_for_project_section
{
    height: 100vh;
}



/*Video Embed
*/

.embed-container {
  --video--width: 1280;
  --video--height: 720;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
  margin-top: 3%;
  margin-bottom: 3%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.contentBox
{
    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
    margin-top: 3%;
    margin-bottom: 3%;

    vertical-align: middle;

    align-items: center;
    justify-content: center;
    align-self: center;
}

.boxVert
{
    width: auto;
    height: 85vh;
}
.boxHori
{
    width: 100%;
    height: auto;
}
.weworkVideo{
    margin-bottom: 12%;
}
.boxSquare
{
    width: auto;
    height: 100%;
}
.colHori
{
    width: 90%;
    height: auto;
    padding-right: 2%;
    padding-left: 2%;
}
.fullTrap
{
    width: 100%;
    height: auto;
}

.imageHalf
{
    width: 100%;
    height: auto;
}
.imageBox.full
{
    width: 100%;
    height: auto;

    align-items: flex-start;
    justify-content: flex-start;
}
.ninety
{
    width: 90%;
    height: auto;
    margin: 0 auto;
}
.imageBox.full.sansOwl
{
    height: 95vh;
}

.first
{
    padding-top: 3%;
}
.last
{
    padding-bottom: 0;
    padding-top: 1%;
}

.vert
{
    width: auto;
    height: 85vh;
    margin: 0 auto;
}
.hori
{
    width: 75%;
    height: auto;
    padding-top: 20%;
}

.square
{
    width: auto;
    height: 75%;
}
.leftSq
{
    width: 90%;
    height: auto;
}

.tanya{
    width: 60%;
    height: auto;
    float: right;
}

.twoUp{
    width: 100%;
    height: auto;
: 
}
img
{
    transition: opacity .3s;

    opacity: 1;
}

img[data-src]
{
    opacity: 0;
}

.copyright
{
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
}

.caption{
    padding-top: 15px;
    letter-spacing: 0.75px;
    width: 100%;
    text-align: center;
}


@media only screen and (max-width:1200px)
{
    .dip{
        display: none;
    }
}


@media only screen and (max-width:1024px)
{

   
    .heroImage
    {
        height: 65vh;
    }
    .heroInfo p
    {
        font-size: 16px;
    }
    .simple{
        width: 100%;
    }
    .projInfoInternal
    {
        font-size: 16px;
        padding-right: 0;
    }
    .project-content{
        flex-direction: column;
        padding-left: 15px;
        padding-right: 15px;
    }
    .project-row{
        flex-direction: column;
    }

   
    .landing_text
    {
        font-size: 24px;

        text-indent: 48px;
        letter-spacing: -.75px;
/*        hyphens: auto;*/
    }
    .first_para
    {
        text-indent: 0;
    }

    .patron{
        font-size: 1.5vw;

        padding-top: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .col_micro.yi{
        display: block;
        width: 50%;
        padding-left: 15px
    }



    .er{
        width: 100%;
        padding-left: 15px;
    }
    .col_micro.san{
        display: block;
        width: 100%;
        padding-left: 15px;

    }

    .project-link{
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }
    .project-link.blank{

        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 15px;
    }

    .showingText{
        font-size: 18px;
    }
}

@media only screen and (max-width:800px)
{
    nav
    {
/*        padding-right: 15px;
        padding-left: 15px;
*/    }
    h2{
        font-size: 16px;
    }
    h3{
        padding-left: 15px;
    }

    .brutal{
       /* display: none;*/
    }
    .fake{
        display: block;
    }

    .project-content
    {
/*        padding-right: 15px;
        padding-left: 15px;
*/    }
    .topBar.clicked
    {
        height: auto;
    }
    .info
    {
    }
    .about
    {
        width: auto;
        height: auto;
        padding-right: 15px;
        padding-left: 15px;

        flex-wrap: wrap;
    }
    .about .col_half
    {
        padding-top: 0;
    }
    .projInfoInternal
    {
        padding-left: 60px;
    }
    .simple{
        padding-right: 15px;
        padding-left: 15px;
        padding-top: 15px;

    }


    .largeText
    {
        font-size: 16px;
        letter-spacing: .5px;
        line-height: 1.5;
        padding-right: 0;
    }
    ol{
        margin-left: 20px;
    }

    .row
    {
        flex-direction: column;
    }
    .projInfoInternal
    {
        padding-left: 15px;
        padding-bottom: 3%;
    }

    /*.col_half
    {
        padding-left: 15px;
    }*/
    .col_half p
    {
        padding-right: 0;
    }

    .heroImage
    {
        height: 40vh;
        padding: 0 0;
        margin-bottom: 15px;
    }
    .heroInfo p
    {
        display: none;

    }

    .textCont
    {
        float: none;
        flex-direction: column;

        height: auto;
        margin: 0 auto;
        
    }
    .textCont p
    {
        font-size: 16px;
        font-weight: normal;
        letter-spacing: .5px;

    }
    .showingContent{
        padding-left: 15px;
        padding-right: 20px;
        margin-bottom: 10px;
    }
    .largeText.showingText{
        padding-left: 15px;
        padding-right: 15px;
    }
    .contentBox
    {
        margin-top: 6%;
        margin-bottom: 6%;
    }
    .boxVert
    {
        width: 100%;
        height: auto;
    }
    .boxHori
    {
    }
    .leftSq
    {
        width: 100%;
        padding-bottom: 15px;
    }
    .leftSq.blackBorder{
        padding-bottom: 0;
    }
    .twoUp{
        margin:0;
    }
    p
    {
        font-size: 16px;
        font-weight: normal;
        letter-spacing: .5px;
    }
    .project
    {
        width: 100%;
    }


    .textCont2{
        letter-spacing: .5px;
        font-size: 16px;

    }

    .yi{
        padding-bottom: 15px;
    }
    .er{
        padding-right: 15px;

    }
}

@media only screen and (max-width:600px)
{
    
    .profpic{
        width: 50%;
        padding-bottom: 15px;
    }
    .heroImage
    {
        height: 25vh;
    }
    .largeText
    {
        padding: 0;
    }
    .largeText.showingText{
        padding: 0 15px 0 15px;
    }
    .projInfoInternal
    {
        padding-left: 15px;
    }
    .nav_header
    {
        font-size: 12px;
        letter-spacing: 1px;
    }
    .simple{
        line-height: 1.5;
        letter-spacing: 0.5px;
        hyphens: auto;
    }

    .col_micro.yi{
        width: 100%;
        padding-right: 15px;    
    }
}

/*IPAD Landscape*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape)
{
}
/*IPAD Portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait)
{
    .contentBox
    {
        height: 50vh;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
    /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px)
{
    /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px)
{
    /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
{
    /* Styles */
}