@font-face {
    font-family: 'graphik';
    src: url('fonts/Graphik/Graphik-Regular-Web.woff2') format('woff2'),
         url('fonts/Graphik/Graphik-Regular-Web.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'graphik';
    src: url('fonts/Graphik/Graphik-Medium-Web.woff2') format('woff2'),
         url('fonts/Graphik/Graphik-Medium-Web.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}
@font-face {
    font-family: 'graphik';
    src: url('fonts/Graphik/Graphik-Bold-Web.woff2') format('woff2'),
         url('fonts/Graphik/Graphik-Bold-Web.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roxborough CF';
    src: url('fonts/Roxborough/roxborough-cf-medium.woff2') format('woff2'),
        url('fonts/Roxborough/roxborough-cf-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}
@font-face {
    font-family:'A2 Gothic X Condensed';
    src:    url('fonts/Gothic-X/A2GothicXCondensed-BoldWEB.woff')format('woff'),
            url('fonts/Gothic-X/A2GothicXCondensed-BoldWEB.woff2')format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


header * {
  transition: all 0.8s;
  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition-delay: 0s;
  -moz-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
}


html, body {
    background-color:#FFF8F0;
    background-color: rgb(235, 235, 235);
    padding:0;
    margin:0;
    font-family:'Graphik', Helvetica, sans-serif;
    font-weight:normal;
    line-height:1.3em;
    color:#231F20;
    font-size:.694vw;
    font-size:11px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:0.5s ease-in all;
    cursor: none;
    width:100%;
    overflow-x:hidden;
}

body *, body button{
    cursor:none !importants;
}

*:link, *:visited{
    color:#E3CCCC;
    text-decoration:none;
}

*:hover{
    cursor:none;
}

a{
    outline:0;
}

.cursor-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 11000;
    opacity:0;
}

.cursorDefault {
    position:relative;
    border:0px solid #1C1C1C; 
    border-radius:50%;
    width: 30px;
    height: 30px;
    opacity:1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition: border 0.2s cubic-bezier(.4,0,.6,1);
    transition: border 0.2s cubic-bezier(.4,0,.6,1);

}

.cls-1{
    fill:none;
    stroke:#231F20;
    stroke-miterlimit:10;
    stroke-width:4px;
    -webkit-transition: stroke 0.25s cubic-bezier(.4,0,.6,1);
    transition: stroke 0.25s cubic-bezier(.4,0,.6,1);
    }

.cursorLoad{
    border:15px solid #1754CF;
    border-radius:50%;
    -webkit-transition: border 0.2s cubic-bezier(.4,0,.6,1);
    transition: border 0.2s cubic-bezier(.4,0,.6,1);
}

#gridContainer{
    position:relative;
    width:100%;
    opacity:1;
    transform: translateY();
    display:grid;
    grid-template-columns: repeat(18, 5.555vw);
    overflow:hidden;
}

.smallTitle{
    font-family:'Graphik', Helvetica, sans-serif;
    font-weight:500;
    margin-top:5.555vw;
    color:#231F20;
    line-height:1.3em;
    font-size:11px;
}

.smallTitleB{
    font-family:'Graphik', Helvetica, sans-serif;
    line-height:1.3em;
    color:#231F20;
     align-self: start;
     font-weight:500;
     font-size:12px;
     margin:calc(11.642rem / 2) 0 calc(14.552rem + 2.775vw) 0; 
}


.smallTitleB{
     margin:calc(11.642rem / 2) 0 calc(14.552rem + 2.775vw) 0; 

     margin:24px 0 calc(14.552rem + 2.775vw) 0; 
}

#mainTitle{
    color:#FF4747;
    font-weight:600;
}

.smallTitleB b{
    font-weight:500;
}

.smallTitleB a{
    font-weight:500;
}

.smallTitle a{
    color:#231F20;

}

#logoContain{
    position:relative;
    grid-column-start:1;
    grid-column-end:19;
    height:50px;
    margin-bottom:5.555vw;

}

#nameCon{
    color:#FF4747;
    font-weight:500;
    z-index:99;
    width:50px;
    height:50px;
/*    top:5.555vw;
    right:5.555vw;
    position:fixed;*/

    position:absolute;
    right:5.555vw;
    border-radius:25px;
    outline:12.5px solid #EBEBEB;

}

#projects{
	grid-column-start:1;
	grid-column-end:19;
    margin:calc(36.38rem - 5.55vw - 42.9px + 1rem) 0;
}

#mainSection{
    display: inline-block;
    position:relative;
    height:auto;
    opacity:0;
}

.workOption{
    grid-column-start:2;
    grid-column-end:15;
    display:flex;
    align-content:center;
    position:relative;
    color:#231F20;
    height:calc(1.2 * 17.713rem);
    overflow:hidden;
}

.workOption .num{
    font-family:'Roxborough CF', serif;
    display:block;
    width:5.555vw;
    font-size:1.33rem;
    text-align:left;   
    -webkit-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
    color:#231F20;
    display:flex;
    align-self:center;
    text-align:center;
    line-height:1rem;
    vertical-align: middle;
    justify-content:center;
    font-weight:500;
}




.workOption .title, .workOption:visited .title{
    line-height:1em;
    position:relative;
    pointer-events:none;
    letter-spacing:0;
    -webkit-transition: transform 0s ease-in-out;
    transition: transform 0s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out .1s;
    transition: color 0.2s ease-in-out .1s;
    font-weight:normal;
    font-family:'A2 Gothic X Condensed', sans-serif;
    color:#231F20;
    text-transform: uppercase;
    font-size:11.642rem;
    font-size:14.552rem;
    font-size:18.19rem;

    font-size:17.713rem;
    top:2.5rem;

    /*

    transform:translate3d(0,125%,0);
    opacity:0;*/
}

.workOption:hover .title{
    -webkit-transition: transform 0s ease-in-out;
    transition: transform 0s ease-in-out;
    font-family:'A2 Gothic X Condensed', sans-serif;
    color:#FF4747;
    color:#FF5C5C;
    -webkit-transition: color 0.2s ease-in-out .1s;
    transition: color 0.2s ease-in-out .1s;
}

.workOption:hover .num{
    opacity:0;
    -webkit-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
}

.workOption .plus{
    position:absolute;
    height:1.8rem;
    height:10px;
    left:calc(2.775vw - 6px);
    top:calc(50% - 6px);
    z-index:2;
    overflow:hidden;
    width:calc(2.775vw + 6px);
}

.workOption .plus .horLine{
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: all .2s ease-out;
    height:2px;
    display:block;
    background-color:#E3CCCC;
    width:calc(5.555vw + .9rem);
    width:calc(2.775vw + 6px);
    /*width:calc(2.255vw + .5rem);*/
    position:absolute;
    top:4px;
    opacity:0;
    left:calc(2.775vw + 6px);
}

.workOption .plus .vertLine{
    -webkit-transition: -webkit-transform .2s ease-out;
    transition: all .2s ease-out;
    position:absolute;
    top:-1.5rem;
    height:1.5rem;

    top:-16px;
    height:16px;
    left:4.5px;
    display:block;
    background-color:#E3CCCC;
    width:2px;
}

.workOption:hover .plus .horLine{
/*    left:calc(7.7555vw);*/
    background-color:#FF4747;
    opacity:1;
/*    -webkit-transform: translateX(-1.8rem);
    transform: translateX(-1.8rem);
    -webkit-transform: translateX(calc(-11.111vw + .9rem));
    transform: translateX(calc(-11.111vw + .9rem));*/
    -webkit-transform: translateX(calc(-5.555vw));
    transform: translateX(calc(-5.555vw));
    -webkit-transition: -webkit-transform .4s ease-out;
    transition: all .4s ease-out;
}

.workOption:hover .plus .vertLine{
    -webkit-transform: translateY(1.5rem);
    transform: translateY(1.5rem);

    -webkit-transform: translateY(16px);
    transform: translateY(16px);
    -webkit-transition: -webkit-transform .2s ease-in;
    transition: all .2s ease-in;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
    background-color:#FF4747;
}

#ptContainer{
    pointer-events: none;
    position:fixed;
    z-index:3;
    overflow:hidden;
    display:block;
    bottom:0;
    width:33.3vw;
    height:44.4vw;
    opacity:1;
    position:absolute;
    left:61.255vw;
    left:33.333vw;
    top:calc(19.19rem + 5.555vw + (1.563rem * 3));
    top:calc(36.38rem + 1.25rem);
    transform:translate3d(5.555vw, 0, 0);
}

#profilePic{
    background:url('images/webp/profile_4x3.webp') center center no-repeat;
    pointer-events: none;
    z-index:4;
    overflow:hidden;
    display:block;
    opacity:0;
    background-position:center;
    background-size:cover;
    position: fixed;
    bottom:0;
    right:calc(5.555vw + 25px);
    height:100vh;
    width:75vh;
    }

#profilePic2{
    background:url('images/webp/profile_4x3.webp') center center no-repeat;
    pointer-events: none;
    z-index:4;
    overflow:hidden;
    display:block;
    opacity:0;
    background-position:center;
    background-size:cover;
    position: fixed;
    bottom:0;
    left:calc(94.444vw - 25px);
    height:100vh;
    width:75vh;
    }

.embedVid {
    margin:2.255vw 0 5.555vw 0;
}

.embedVid iframe{
    width:100%;
    height:18.75vw;
}

#imageContainer{
    position:absolute;
    z-index:3;
    overflow:hidden;
    border-radius:0;
    -webkit-transition:all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition:all 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width:100%;
    height:100%;
}

.workThumb{
    width:100%;
    height:100%;
    display:block;
    position: absolute;
    overflow: hidden;
    top:0;
}

.workThumb img{
    width:auto;
    height:100%;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    opacity:0;
}


#pt{
    opacity:0;
    width:100%;
    height:100%;
    z-index:6;
    position:absolute;
    top:0;
    left:0;
}

.socialLink{
    display:block;
     -webkit-transition: color 0.2s ease-in-out .1s;
    transition: color 0.2s ease-in-out .1s;
    color:#E3CCCC;
    color:#231F20;

}

.socialLink:hover, .pInfoB a:hover{
    color:#FF4747;
    -webkit-transition: color 0.2s ease-in-out .1s;
    transition: color 0.2s ease-in-out .1s;
}

.arrow{
    -webkit-transition: margin-left 0.1s ease-in-out .1s;
    transition: margin-left 0.1s ease-in-out .1s;
}

.socialLink:hover .arrow, .pInfoB a:hover .arrow{
    margin-left:.5rem;
    -webkit-transition: margin-left 0.1s ease-in-out .1s;
    transition: margin-left 0.1s ease-in-out .1s;

}



/* Project styles */


#projectPageB{
    position:relative;
    width:100%;
    z-index:2;
    opacity:0;
    transform: translateY();
    display:grid;
    grid-template-columns: repeat(18, 5.555vw);

}

#projectBorder{
    border-top:2px solid rgba(225,225,225);
    margin:calc(11.111vw + 50px) 0 5.555vw 0;
}

.projectBorder{
    border-top:2px solid rgba(225,225,225);
    display:block;
    height:1px;
    margin:calc(50vh - 5.55vw - (1.563rem * 3)) 0 5.555vw 0;
}

.projectBorderB{
     border-top:1px solid rgba(0,0,0,0.25);
    margin:calc(11.111vw + 50px) 0 5.555vw 0;
    margin:5.555vw 0 calc(50vh - 5.555vw) 0;
    display:block;
}

#bigNum404{
    font-family:'A2 Gothic X Condensed', sans-serif;
    height:100vh;
    font-size:50vh;
    line-height:90vh;
    font-weight:100;
    text-align:center;
    box-sizing:border-box;
}

.bigNum{
    font-family:'A2 Gothic X Condensed', sans-serif;
    box-sizing:border-box;
    color:#231F20;
    font-size:11.642rem;
    line-height:1.175em;
    padding:calc(4.768rem + .025em) 5.555vw 0 5.555vw; 
     padding:calc(4.768rem + .025em) 0 0 0; 
    display:flex;
    font-size:18.19rem;
    margin-top:calc(11.111vw + 50px);
    overflow-wrap: break-word;
    overflow:hidden;

    font-size:17.713rem;

}

.bigNum .num{
    font-family:'Roxborough CF', serif;
    display:block;
    width:5.555vw;
    font-size:2.441rem;
    text-align:left;   
    -webkit-transition:all 0.2s ease-in;
    transition:all 0.2s ease-in;
    color:#231F20;
    display:flex;
    align-self:center;
    line-height:1rem;
    vertical-align: middle;
    }

.bigNum .title{
        vertical-align:middle;
        display:flex;
        text-transform:uppercase;
        display: inline-block;
        overflow-wrap: break-word;
    }

.projDesc{
    font-size:7.451rem;
    line-height:1em;
    letter-spacing:-.05em;
    font-family:'Graphik', Helvetica, sans-serif;
    font-weight:normal;
    margin:calc(11.642rem / 2) 0 0 0;
}


#comingsoon{
    font-family:'A2 Gothic X Condensed', sans-serif;
    height:100vh;
    font-size:20vw;
    line-height:1.2em;
    text-align:center;
    box-sizing:border-box;
    z-index:2;
    color:#231F20;

    vertical-align: middle;
    position:absolute;
    top:1.75vw;
    width:100%;
/*    color:#E3CCCC;*/
}

#logo{
    display:block;
    background-repeat:no-repeat;
    position:fixed;
    z-index:99;
    width:100px;
    height:100px;
    position:fixed;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    top:calc(2.775vw - 50px);
    top:calc(5.555vw - 25px);
    left:calc(5.555vw - 25px);

    left:calc(2.775vw - 50px);
    bottom:calc(2.775vw - 50px);
    top:auto;


    left:calc(5.555vw - 25px);
    top:calc(5.555vw - 25px);
}

#logoHome{
    width:50px;
    height:50px;
    z-index:99;
    position:relative;
    display:block;
}

#logoPadding{
    margin-top:calc(50vh - 5.55vw - (1.563rem * 3));

}

#logoLoad{
    width:100px;
    height:100px;
    z-index:12;
    position:relative;
    display:block;
}

#logoExit{
    width:100px;
    height:100px;
    z-index:12;
    position:relative;
    display:block;
}

#logoHover{
    width:100px;
    height:100px;
    z-index:12;
    position:relative;
    display:block;
}

#logoBase{
    display:block;
    z-index:10;
    width:54px;
    height:54px;
    background-color:#000;
    margin:21px;
    border-radius:50%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    display:none;
}

#mainContainer{
    overflow:hidden;
    width:100%;
    top:0;
    position:absolute;
    display:block;
    z-index:2;
    min-height:100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

#aboutContainer{
    position:fixed;
/*    top:0;*/
    left:0;
    opacity:0;
    display:block;
    bottom:0;
}



#aboutContainer p{
    text-indent:0;
    padding:0;
    margin:0;
}

#aboutContainer h1{
    font-family:'Roxborough CF';
    font-size:5.96rem;
}

/*#aboutContainer p:first-child::first-letter {
    float: left;
    font-size: 54px;
    line-height: 42.9px;
    font-weight: bold;
    margin-right: 4px;
    /*padding-top:3px;
}*/

#aboutContainer p:first-child{
    text-indent:0;
/*    border-top: 1px solid #231F20;
    border-top:2px solid rgba(215,215,215);
    padding-top:14px;*/
}

#aboutContainer .col{
    font-family:'Graphik', Helvetica, sans-serif;
    font-weight:500;
    margin-top:5.555vw;
    color:#231F20;
    line-height:1.3em;
    font-size:12px;
    font-size:11px;
    margin-left:5.555vw;
    width:16.666vw;
    position:relative;
    margin-bottom:5.555vw;
    margin-left:calc(2.775vw);
    padding-left:calc(2.775vw);
    /*border-left:2px solid #231F20;*/
    float:left;
}

.projectTitle{
    position:relative;
    color:#E3CCCC;
    color:#231F20;
    margin:49.672rem 0 .666em 0;
    margin:calc(25vh + 2.2555vw) 0 5.2rem 0;
    margin:0 0 5.2rem 0;
    font-size:7.451rem;

    line-height:1em;
    font-weight:500;
    letter-spacing:-.05em;
    font-family:'Graphik', Helvetica, sans-serif;
    font-weight:normal;

}

.projectBody{
    font-family:'Graphik', Helvetica, sans-serif;
    overflow:hidden;
    position:relative;
    float:left;
    display:block;
    font-weight:normal;
    font-size:1.953rem;
    line-height:1.333em;

    font-size:1.777rem;
    color:#E3CCCC;
    color:#231F20;
}

.projectBody b{
    font-size:2.441rem;
    font-size:2.369rem;
    display:inline-block;
    line-height:1.333em;
    /*padding:1em 0;*/
    font-weight:600;
    font-weight:500;
    line-height:1.666em;

}

.projectBody a{
    text-decoration: underline;
    font-weight:500;
    color:#231F20;
}

.projectBody a:hover{
    color:#FF4747;
}

.indent{
    text-indent:6.66rem;
}

.contentTitle{
    font-family:'Graphik', Helvetica, sans-serif;
    position:relative;
    display:block;
    margin-left:2vw;
    margin-right:2vw;
    font-weight:600;
    font-size:2.441rem;
    display:inline-block;
    line-height:1.333em;
    color:#231F20;
    margin:0;
    padding-top:5.55vw;
    display:block;
    font-weight:500;
    letter-spacing:-0.025em;
    font-size:2.369rem;

}

.contentHolder{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.2555vw;
}

.bigMargin{
    margin-bottom:7.451rem;
}

.medMargin{
    margin-bottom:2.7775vw;
    margin-bottom:1.5vw;
}

.smallMargin{
    margin-bottom:3.815rem;
}

.smallTextMargin{
	margin-bottom:4.768rem;
}

.lowerImgCon img{
        transform:scale(1.25);
        opacity:0;
        z-index:10;
}

.lowerImgCon video{
        transform:scale(1.25);
        opacity:0;
}

.newPara{
      position:relative;
    margin-top:3.815rem;
}

.figma{
    height:50vw;
    width:100%;
}

.lowerImgCon{
    display:block;
    position:relative;
    overflow:hidden;
    width:0%;
    height: auto;
    line-height:1em;
    width:100%;
}

.darkBG{
    background-color:#F5F5F5;
}

.roundedA{
    border-radius:.5em;
}

.roundedB{
    border-radius:.5em 0 .5em .5em;
}

.roundedC{
    border-radius:0 .5em .5em .5em;
}

.roundedD{
    border-radius:.5em 0 0 .5em;
}

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

.projVid video{
    max-width:100%;
    height:auto;
}

.smallAnim{
    position:relative;
    float:left;
    margin:0;
    line-height:0;
}

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

.imgBG{
    position:relative;
}

.twoH{
    height:22.222vw;
}

.singleinfo{
    font-family:'Graphik', Helvetica, sans-serif;
    font-size:1.563rem;
    padding:5.55vw 0 3rem 0;
    align-self:start;
    font-weight:500;
    color:#231F20;
    font-weight:500;
    font-size:11px;
    font-size:12px;
    line-height:1.333em;
}

.singleinfo a{
    color:#231F20;
    font-weight:600;
    text-decoration:underline;
}

.singleinfo a:hover{
    color:#FF4747;
}

.singleinfo ol{
   list-style-type: decimal; 
   list-style-position: outside;
   padding-left:0;
}

.singleinfo b{
        line-height:1.666em;
}

.watchthisRight{
    position:absolute;
    right:12px;
    top:12px;
    z-index:99;
    display:block;
    color:#E3CCCC;
    color:#FFFAFF;
    opacity:.5;
}

.watchthis{
    font-family:'Graphik', Helvetica, sans-serif;
    font-weight:500;
    font-size:12px;
    letter-spacing:.05em;
    white-space:nowrap;
    padding:6px;
    background-color:rgba(0, 0, 0, 05);
    display:inline-block;
    border-radius:2px;
    opacity:0;
}

.watchthis img{
    vertical-align:middle;
/*    margin-right:.5em;*/
}

#projectFooter{
    display:block;
    color:#1c1819;
    box-sizing:border-box;
    border-top:2px solid rgba(225,225,225);
    border-top:2px solid rgba(215,215,215);
    border-top:1px solid rgba(198,198,198);
    /*border-top:2px solid #231F20;*/
    margin-top:5.55vw;
/*    padding-left:5.55vw;*/
}

.projNav{
    transition:all 0.3s ease-out;
    -webkit-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
    text-decoration: none;
    position:relative;
    padding:12px 0 11.111vw 0;
    height:100%;
    width:100%;
    color:#231F20;
    box-sizing:border-box;
    display:flex;
    text-align:right;
    flex-direction: row-reverse;

}

.projNav .projNext{
    font-family:'Graphik', Helvetica, sans-serif;
     font-weight:normal;
     font-weight:600;
     letter-spacing:-.05em;
     font-size:7.478rem;
    line-height:1em;

}

.projNav .projName{
    font-size:1.777rem;
    font-family:'Roxborough CF';
    letter-spacing:-.025em;
    line-height:1em;
}

.projNav:hover{
    color:#FF5C5C;
}

.nextText{
         align-self: center;
}





/* Image Widths */



.twoW{
    width:22.222vw;
}

.threeW{
    width:33.333vw;
}

.fourW{
    width:44.444vw;
}

.fiveW{
    width:55.555vw;
}

.sixW{
    width:66.666vw;
}

.sevenW{
    width:77.777vw;
}

.eightW{
    width:88.88vw;
}

.tenW{
    width:100vw;
}

.twoW img, .threeW img, .fourW img, .fiveW img, .sixW img, .sevenW img, .eightW img, .tenW img{
    position:relative;
    display: block;
    width:100%;
    max-width:100%;
    height:auto;
}

.twoW video, .threeW video, .fourW video, .fiveW video, .sixW video, .sevenW video{
    position:relative;
    display: block;
    width:100%;
    max-width:100%;
    height:auto;
}


/* Grid Columns */



.full{
	grid-column-start:2;
    grid-column-end:18;

    /*border-top:2px solid #000;*/
}

.ruler{
    display:block;
    grid-column-start:2;
    grid-column-end:18;
    height:1px;
    /*background-color:rgb(198,198,198);*/
    margin-top:24px;
}


.oneSix{
    grid-column-start:1;
    grid-column-end:6;
}

.twoFour{
    grid-column-start:2;
    grid-column-end: 4;
}

.oneTen{
    grid-column-start:1;
    grid-column-end: 10;
}

.twoThree{
    grid-column-start:2;
    grid-column-end:3;
}

.twoSeven{
    grid-column-start:2;
    grid-column-end: 7;
}

.twoNine{
    grid-column-start:2;
    grid-column-end: 9;
}

.twoTwelve{
    grid-column-start:2;
    grid-column-end:12;
}

.twoSixteen{
    grid-column-start:2;
    grid-column-end: 16;
}

.twoSeventeen{
    grid-column-start:2;
    grid-column-end: 17;
}

.twoEighteen{
    grid-column-start:2;
    grid-column-end: 18;
}

.fiveSeven{
    grid-column-start:5;
    grid-column-end:7;
}

.fiveSeventeen{
        grid-column-start:5;
    grid-column-end:17;
}

.sixSeven{
    grid-column-start:6;
    grid-column-end:7;
}

.sixEight{
    grid-column-start:6;
    grid-column-end:8;
}
.sixNine{
    grid-column-start:6;
    grid-column-end:9;
}
.sixTen{
    grid-column-start:6;
    grid-column-end:10;
}

.sixTwelve{
    grid-column-start:6;
    grid-column-end:12;
}

.sevenEleven{
    grid-column-start:7;
    grid-column-end:11;
}

.sevenNine{
    grid-column-start:7;
    grid-column-end:9;
}

.nineTwelve{
    grid-column-start:9;
    grid-column-end:12;
}

.twelveFourteen{
    grid-column-start:12;
    grid-column-end:14;
}

.twelveFifteen{
    grid-column-start:12;
    grid-column-end:15;
}

.thirteenFifteen{
    grid-column-start:13;
    grid-column-end:15;
}

.thirteenSixteen{
    grid-column-start:13;
    grid-column-end:16;
}

.fourteenSixteen{
    grid-column-start:14;
    grid-column-end:16;
}

.thirteenEighteen{
    grid-column-start:13;
    grid-column-end:18;
}
.threeNineteen{
    grid-column-start:3;
    grid-column-end:19;
}

.sixteenNineteen{
    grid-column-start:16;
    grid-column-end:19;
}

.sixteenEighteen{
    grid-column-start:16;
    grid-column-end:18;
}
.thirteenNineteen{
    grid-column-start:13;
    grid-column-end:19;
}

.nineNineteen{
    grid-column-start:9;
    grid-column-end:19;
}

.fifteenEighteen{
    grid-column-start:15;
    grid-column-end:18;
}

.twelveEighteen{
    grid-column-start:12;
    grid-column-end:18;
}

.threeFour{
    grid-column-start:3;
    grid-column-end:4;
}

.threeFive{
    grid-column-start:3;
    grid-column-end:5;
}

.fourFive{
    grid-column-start:4;
    grid-column-end:5;
}

.fourSix{
    grid-column-start:4;
    grid-column-end:6;
}

.fiveSeven{
    grid-column-start:5;
    grid-column-end:7;
}

.fiveFifteen{
    grid-column-start:5;
    grid-column-end:15;
}

.twoFour{
    grid-column-start:2;
    grid-column-end:4;
}

.twoSix{
    grid-column-start:2;
    grid-column-end:6;
}

.twoEight{
    grid-column-start:2;
    grid-column-end:8;
}

.threeNine{
    grid-column-start:3;
    grid-column-end:9;
}

.twoFive{
    grid-column-start:2;
    grid-column-end:5;
}

.fiveFifteen{
    grid-column-start:5;
    grid-column-end:15;
}

.halfNine{
    grid-column-start:2;
    grid-column-end: 18;
}

.eightEighteen{
    grid-column-start:8;
    grid-column-end:18;
}

.nineEleven{
    grid-column-start:9;
    grid-column-end:11;
}

.nineEighteen{
    grid-column-start:9;
    grid-column-end:18;
}

.tenTwelve{
    grid-column-start:10;
    grid-column-end:12;
}

.tenEighteen{
    grid-column-start:10;
    grid-column-end:18;
}

.tenSixteen{
    grid-column-start:10;
    grid-column-end:16;
}

.elevenThirteen{
    grid-column-start:11;
    grid-column-end:13;
}

.elevenFourteen{
    grid-column-start:11;
    grid-column-end:14;
}

.elevenSixteen{
    grid-column-start:11;
    grid-column-end:16;
}

.elevenSixteenH{
    grid-column-start:10.5;
    grid-column-end:16;
}

.elevenEighteen{
    grid-column-start:11;
    grid-column-end:18;
}

.twelveEighteen{
    grid-column-start:12;
    grid-column-end:18;
}

.threeNine{
    grid-column-start:3;
    grid-column-end: 9;
}

.threeEleven{
    grid-column-start:3;
    grid-column-end: 11;
}

.threeTwelve{
    grid-column-start:3;
    grid-column-end: 12;
}

.fourTwelve{
    grid-column-start:4;
    grid-column-end: 12;
}

.fourFourteen{
    grid-column-start:4;
    grid-column-end: 14;
}

.fourEight{
    grid-column-start:4;
    grid-column-end: 8;
}

.fourSeven{
    grid-column-start:4;
    grid-column-end: 7;
}

.fourSixteen{
    grid-column-start:4;
    grid-column-end: 16;
}

.threeSeven{
    grid-column-start:3;
    grid-column-end: 7;
}

.threeSix{
    grid-column-start:3;
    grid-column-end: 6;
}

.threeSixteen{
    grid-column-start:3;
    grid-column-end: 16;
}

.threeSeventeen{
    grid-column-start:3;
    grid-column-end: 17;
}

.sixNine{
    grid-column-start:6;
    grid-column-end: 9;
}


.twoTen{
    grid-column-start:2;
    grid-column-end: 10;
}

.fourTen{
    grid-column-start:4;
    grid-column-end: 10;
}

.fiveFifteen{
    grid-column-start:5;
    grid-column-end: 15;
}

.fiveThirteen{
    grid-column-start:5;
    grid-column-end: 13;

}

.sixFourteen{
    grid-column-start:6;
    grid-column-end: 14;
}

.elevenFifteen{
    grid-column-start:11;
    grid-column-end: 15;
}

.twelveFifteen{
    grid-column-start:12;
    grid-column-end: 15;
}

.fourNine{
    grid-column-start:4;
    grid-column-end: 9;
}

.fourSixteen{
    grid-column-start:4;
    grid-column-end: 16;
}

.fiveTen{
    grid-column-start:5;
    grid-column-end: 10;
}

.tenFourteen{
    grid-column-start:10;
    grid-column-end: 14;
}

.fourteenEighteen{
    grid-column-start:14;
    grid-column-end: 18;
}

.fourteenSeventeen{
    grid-column-start:14;
    grid-column-end: 17;
}

.fiveNine{
    grid-column-start:5;
    grid-column-end: 9;
}





/* animated classes */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition:all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition:all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3.6em, 0);
            transform: translate3d(0, 3.6em, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3.6em, 0);
            transform: translate3d(0, 3.6em, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}


@media only screen and (max-width: 1440px) {
    html, body {
        font-size:10px;
    }

}



@media only screen and (max-width: 1040px) {
    html, body {
        font-size:10px;
    }

    .workOption .title{
        font-size:14.552rem;
    }

    .workOption{
        height:calc(1.2 * 14.552rem);
    }

    .fullBreak{
        display:none;
    }



}




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

    html, body{
        cursor:auto !important;
    }

    cursor-wrapper{
        visibility: hidden;
    }

    #mainDesc{
        width:80vw;
        margin-bottom:5rem;
        margin-top:33.3vh;
        margin-left:0;
    }
    .mainTitle{
        font-size:24px;
        line-height:1.3em;
        display:block;
        width:60vw;
        padding-top:3.052rem;
    }

    #aboutPara{
        font-size:36px;
        padding:0 0 0 0;
    }

    #aboutSection{
        margin:0;
        height:50vh;
    }

    .socialLink{
        font-size:36px;
        line-height:1em;
    }

    .socialLink:hover{
        color:#FF4747;
    }

    .smallTitle{
        font-size:14px;
        margin-top:1rem;
        margin-top:11.111vw;
    }

    .smallTitleB{
        display:none;
    }

    .bigNum .num{
        display:none;
    }

    .bigNum .title{

    }


    #logoPadding{
   margin-top:25vw;
    }

    .mobileInfo{
        display:block;
        color:#E3CCCC;
    }

    #nameCon{
        grid-column-start:2;
        margin:0 0 5.55vw 0;
    }

    #accentLine{
        display:none;
    }
    .loadedCon{
        width:66.6vw;
        height:66.6vw;
        left:16.6vw;
        top:calc(50vh - (66.6vw / 2));
    }
    #ptContainer{
        pointer-events: none;
        width:66.6vw;
        height:66.6vw;
        left:16.6vw;
        top:calc(50vh - (66.6vw / 2));
        z-index:7;
        visibility: hidden;
    }

    .workThumb{
        opacity:0;
        width:100%;
        height:100%;
        z-index:9;
        position:absolute;
        top:0;
        left:0;
    }

    #profilePic, #imageContainer, #ptContainer{
        width:50vw;
        height:66.6vw;
        left:25vw;
        top:calc(50vh - (66.6vw / 2));
    }
    #projects{
        grid-column-start:2;
        grid-column-end:18;
        margin:25vw 0;
    }
    .workOption{
        font-size:18px;
        z-index:8;
        margin:1rem 0 1rem 0;
        height:12.5vw;
    }
    .workOption .title, .workOption .title:active{
        font-size:10vw;
        top:0px;
        line-height:12.5vw;
    }

    .workOption .plus{
        position:absolute;
        width:2rem;
        height:2rem;
        left:.5rem;
        top:calc(50% - 1rem);
        z-index:2;
        overflow:hidden;
    }

    .workOption .num{
        font-size:14px;
        -webkit-transition:all 0.2s ease-out;
        transition:all 0.2s ease-out;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
        line-height:1em;
        text-align:center;
        width:11.11vw;
        top:calc(5vw - 3px);
        height:18px;
        position:relative;
        align-self:unset;
        text-align:left;
        justify-content:left;

        display:none;
}


#aboutContainer{
    display:none;
}


    .embedVid iframe{
        height:50vw;
    }


    #work{
    display:none;
    opacity:1;
    position:relative;
    margin: 25vh  auto 21rem auto;
    }


    .workOption:hover .plus .horLine{
        background-color:#FF4828;
        opacity:1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-transition: -webkit-transform .4s ease-out;
        transition: all .4s ease-out;
    }

    .workOption:hover .plus .vertLine{
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: -webkit-transform .2s ease-in;
        transition: all .2s ease-in;
        -webkit-transition-delay: .2s;
        transition-delay: .2s;
    }

    .workOption:hover .num{
        opacity:100;
        color:#FF4828;
        -webkit-transition:all 0.2s ease-in;
        transition:all 0.2s ease-in;
    }

    #projectPage{
        position:relative;
        margin-top:calc(50vw - 5.4rem);
        z-index:2;
        opacity:0;
        transform: translateY();
        display:flex;
        flex-wrap:wrap;
        display:grid;
        grid-template-columns: repeat(9, 11.111vw);
    }

    #comingsoon{
    font-size:30vw;
    top:2vw;
    }

    .bigNum{
        margin-top:50vh;
        font-size:12.5vw;
        line-height:1.2em;
        border-top:0px;
        padding-left:11.111vw;
        padding-left:0;
        margin-bottom:5.55vw;
    }

    .ruler{

        margin:5.55vw 0;
        grid-column-start:2;
        grid-column-end:9;

    }

    #projectPageB{
        position:relative;
        z-index:2;
        opacity:0;
        transform: translateY();
        display:flex;
        flex-wrap:wrap;
        display:grid;
        grid-template-columns: repeat(9, 11.111vw);
    }

    #gridContainer{
        grid-template-columns: repeat(9, 11.111vw);
    }

    .projectTitle{
        grid-column-start:2;
        grid-column-end:9;
        font-size:54px;
        line-height:54px;
        font-size:40px;
        line-height:40px;
        padding:0px;
        margin-left:0px;
        margin-right:0px;
        margin-top:calc(11.11vw + 100px) ;

    }

    .projectBody, .midInfo2, .singleinfo{
        grid-column-start:2;
        grid-column-end:9;
        padding:0px;
        margin-left:0px;
        margin-right:0px;
        font-weight:400;
        font-size:18px;
        line-height:1.333em;
    }

    .largeTitle{
        font-size:12px;
        top:calc(10vw + 50px);
    }

    .largeTitleB{
        visibility: hidden;
        opacity:0;
    }

    .newPara{
      position:relative;
    margin-top:3.815rem;
    }

    .fourNine, .eightEighteen, .threeNine, .twoNine, .halfNine{
        grid-column-start:1;
        grid-column-end:10;
    }
    .threeSeventeen, .elevenThirteen, .threeSixteen, .fourEight, .fourTwelve, .sevenNine, .elevenFifteen, .threeSeven, .fiveNine, .twoEight, .twoTen, .tenEighteen, .threeTwelve, .twoTen, .tenEighteen{
        grid-column-start:2;
        grid-column-end:9;
    }


    .sixTen{
        grid-column-start:5;
        grid-column-end:10;
    }

    #socialLinks{
        display:none;
    }

    .fourSix{
        grid-row: 1;
        grid-column-start:4;
        grid-column-end:16;

        grid-column-start:2;
        grid-column-end:9;
    }

    .fourSixteen{
        grid-column-start:2;
        grid-column-end:9;
    }

    #anim1, #anim3{
        grid-column-start:1;
        grid-column-end:5;
    }
    #anim2, #anim4{
        grid-column-start:6;
        grid-column-end:10;
    }

    #anim1, #anim2{
        margin-bottom:11.11vw;
    }


    .eightW{
        width:100vw;
    }

    .fourW{
        width:77.777vw;
    }

    .twoW{
        width:55.55vw;
    }
    .twoH{
        height:55.55vw;
    }
    .fiveW{
        width:100vw;
    }

    .threeW{
        width:77.77vw;
    }


    .imgBG{
        height:auto;
    }
    .medMargin{
        margin-bottom:36px;
    }


    #projDesc{
        display:none;
    }

    #bod1{
        z-index:20;

    }
    .info{
        font-size:1.8rem;
    }

    .bigMargin{
        margin-bottom:7.2rem;
    }
    .imgCon{
        width:100%;
        margin-left:0;
    }
    .leftSide{
        margin:0;
    }
    .rightSide{
        margin:0;
    }
    .rightFloat{
        margin-top:7.2rem;
    }

    .projNav{
        font-size:40px;
        padding-top:5.555vw;
    }

    .projNav .projNext{
        font-family:'Graphik', Helvetica, sans-serif;
         font-weight:normal;
         font-weight:600;
         letter-spacing:-.05em;
         font-size:40px;
        line-height:1em;

    }

    .projNav .projName{
        font-size:20px;
        font-family:'Roxborough CF';
        letter-spacing:-.025em;
        line-height:1em;
    }

    .projNav:hover{
    }

    #projectFooter{
        grid-column-start:2;
        grid-column-end:9;
        width:100%;
    }

    #logo{
        display:block;
        left:calc(50vw - 50px);
        top:calc(10vw - 50px);
        left:calc(16.666vw - 25px);
        left:calc(50vw - 50px);
        top:calc(11.111vw - 25px);
        left:calc(11.111vw - 25px);
        background-repeat:no-repeat;
        position:fixed;
        z-index:20;
        -webkit-transition: all 0.1s ease;
        -moz-transition: all 0.1s ease;
        -o-transition: all 0.1s ease;
        -ms-transition: all 0.1s ease;
    }


    #projectBorderB{
    border-top:2px solid rgba(225,225,225);
    margin:11.111vw 0;
    display:block;
}

.projectBorder{
    margin:calc(25vh - 5.55vw - (1.563rem * 3)) 0 5.555vw 0;
}

.contentHolder{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    column-gap:0;

    margin:2.255vw 0 5.555vw 0;
}

.embedVid {
    margin:0;
}


}