*{
    
}

hr{
    border-width: 5px;
    border-color:#EAE8DB;
    border-style:solid;
}
a{
    text-decoration:none;
    color:inherit;
}

a:hover{
    text-decoration:none;
    color:inherit;
}

li{
    list-style:none;
}

body{
    font-family: 'Open Sans', sans-serif;
    align-content: center;
    width:100%;
    background-color:#f6f6f6;
    font-size:1rem;
    
}

ul, menu, dir{
    -webkit-padding-start: 0px;
}

.projectpage{
}

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}


@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: .3;}
}
    
#loader{
    width:100vw;
    height:100vh;
    background-color:#f6f6f6;
    position:fixed;
}
#loading{
    position:absolute;
    top:0px;
    width:100%;
    background-color:white;
}
#pubctrpg{
    background-image:url(images/pubctr/ridinlowbannerBLUR.png);
    background-size:130%;
    background-position:top;
    
}

#makeshiftpg{
    background-image:url(images/makeshift/makeshiftBLUR.png);
    background-size:200%;
    background-position:top;
}

#albumartpg{
    background-image:url(images/albumart/albumartBLUR.jpg);
    background-size:130%;
    background-position:top;
}


#harvestrpg{
    background-image:url(images/harvestr/harvestrBLUR.png);
    background-size:130%;
    background-position:top;
}

#thingiversepg{
    background-image:url(images/thingiverse/thingiverseBLUR.jpg);
    background-size:130%;
    background-position:top;
}

#scrintpg{
    background-image:url(images/scrint/scrintBLUR.jpg);
    background-size:130%;
    background-position:top;
}

#jeopardypg{
    background-image:url(images/jeopardy/jeopardybg.jpg);
    background-size:130%;
    background-position:top;
    filter:blur(40)

}
#logo{
    width:100%;
    position:relative;
    left:00px;
    transition:left .3s ease-in;
}

#plogo{
    width:70%;
    padding-left:15%;
}
.slidey{
        animation:bounce .3s ease backwards;
    }

@keyframes bounce{
    0%{left:0%}
    80%{left:-5%}
    100%{left:0%}
}
#logohit{
    position:absolute;
    width:50%;
    height:50%;
    top:25%;
    left:25%;
}


#header{
    font-family: 'Space Mono', sans-serif;
    font-weight:700;
    font-size:1em;
    position:relative;
    background-color:white;
}

/** NAV **/



.navlink:hover{
    background-color:#f93;
    color:white;
}
.navlink{
    cursor:pointer;
    text-align: center;
    list-style-type: none;
}

.bodylink{
    font-weight:800;
}
.bodylink:hover{
    background-color:#f93;
    color:white;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/** **/





.bodytype{
    font-family: 'Open Sans', sans-serif;
    font-size:1rem;
    text-align: left !important;
    
}

.bump{
    margin-top:3%;
}

/** HOVERING SHENANIGANS **/
#content{
    overflow:scroll;
    height:100vh;
}

.project{
    position:relative;
    height:25vh;
    width:100%;
    background-size:996px;
    background-position:center;
    transition: background .4s cubic-bezier(.66,.02,.55,.96), height .4s cubic-bezier(.66,.02,.55,.96);
}

.coverwrap{
    opacity:0;
    background-color:#f93;
    transition:opacity .4s cubic-bezier(.66,.02,.55,.96);
    width:100%;
    height:100%;
}

.sectiontitle{
padding:0;
margin:0;
    opacity:0;
    position:absolute;
    top:45%;
    text-align:center;
    width:100%;
    font-size:2em;
    color:white;
    font-family: 'Space Mono', sans-serif;
    transition:opacity .4s cubic-bezier(.66,.02,.55,.96),top .4s cubic-bezier(.66,.02,.55,.96);
}

.take{
    opacity:.9 !important;
}
.add{
    opacity:1 !important;
}

.move{
    top:43% !important;
}

.bigger{
    background-position:50% 100% !important;
}

.embiggen{
    height:50vh;
}

.enshorten{
    height:17.5vh;
}


/** ABOUT **/

#about{
    height:100vh;
    background-color:#f6f6f6;
    position:absolute;
    max-width:950px;
    z-index:2;
    overflow:scroll;
    width:100%;
}

.introduction{
    font-family: 'Space Mono', sans-serif;
    font-style:italic;
}

.explanation{
    font-size:1.4rem;
    font-family: 'Space Mono', sans-serif;
    font-weight:700;
}

.x{
    position:relative;
    left:20px;
    top:35px;
    width:20px;
    cursor:pointer;
    
}

.aboutlink{
    text-decoration-style:dotted;
    text-decoration:underline;
}
.aboutlink:hover{
    color:#fff;
    background-color:black;
}


/** CONTACT **/

#contact{
    height:100vh;
    background-color:#f93;
    position:absolute;
    max-width:950px;
    z-index:4;
    color:black;
    overflow:scroll;
}

.contactlinks:hover{
    background-color:black;
    color:#f93;
    
}
/** **/

/** MORE WORK **/
#expand{
    height:100vh;
    background-color:#f6f6f6;
    position:absolute;
    max-width:950px;
    z-index:5;
    color:black;
    overflow:scroll;
}

.expandlink:hover{
background-color:black;
color:white;
}

/** **/

.initialH{
    display:none;
}

#footer{
    position:fixed;
    bottom:0px;
    padding:2px;
    width:100%;
    opacity: .8;
    font-size:.1em;
}


/** GENERAL PROJECT STUFF **/




::-webkit-scrollbar { 
    display: none; 
}

.v{
    position:fixed;
    left:14%;
    top:65px;
    width:30px;
    cursor:pointer;
    z-index:2;
    margin-left:0;
    transition: margin .3s ease;
    padding-right:0%;
    display:none;
    
}

.moreinfo{
    background-color:white;
    padding-top:50px;
    position:relative;
}

.pic{
    box-shadow: 1px 1px 10px #EAE8DB;
    display:block;
    vertical-align: middle;
    line-height: 0;
    font-size:0;
}
/** HARVESTR **/

#harvestr{
    background-image:url(images/harvestr/harvestr.jpg);
}

#harvestrnav{
    position:fixed;
    top:40px;
    right:50px;
    background-color:#f93;
    width:200px;
    height:325px;
    padding:10px;
}
/** MAKESHIFT **/


#makeshift{
    background-image:url(images/mshiftbanner.jpg);

}



/** ALBUM ART **/

#albumart{
    background-image:url(images/albumart/3301.jpg);

}



/** PUB CTR **/

#pubctr{
    background-image:url(images/pubctrbanner.jpg);

}
/** THINGIVERSE **/

#thingiverse{
    background-image:url(images/thingiversebanner.jpg);
}

/** UNBOX **/

#unbox{
    background-image:url(images/unbox/unbox28.jpg);
}
#mobilehome{
    display:none;
}

/** SCRINT **/


#scrint{
    background-image:url(images/scrintbanner.jpg);
}

#sleeplink{
    color:#f93;
}

#sleeplink:hover{
    color:#000;
}

/** MOTION **/

#motion{
background-image:url(images/reel.gif);
}

.projectpage #motion:hover{
background-image:url(images/reel.gif);
}


/** JEOPARDY **/


#jeopardy{
background-image:url(images/jeopardybanner.jpg)
}

/** SOCIAL MEDIA LINKS **/

#socmed{
width:80%;
margin-left:10%;
height:50px;
position:relative;
}

.socmed{
height:50%;
width:50%;
background-size:contain;
background-repeat:no-repeat;
float:left;
background-position:50%;
}

#vimeo{
background-image: url(images/vimeo.png);
}

#vimeo:hover{
background-image:url(images/vimeohover.png);
}

#instagram{

background-image: url(images/insta.png);

}

#instagram:hover{
background-image:url(images/instahover.png);
}
/**TABLET ********************************************************************
*********************************************************************** **/

@media only screen and (max-width:800px){
    #plogo{
        width:160%;
        position:relative;
        z-index:10;
        right:30%;
}
    #logo{
        
    }
    #logohit{
        width:100%;
        left:0;
        z-index:11;
    }
    #nav{
        font-size:.85em;
    }
    
    .sectiontitle{
        font-size:3em;
    }
    #socmed{
    width:100%;
    margin-left:0;
    }
    
    .socmed{
    height:100%;
    }
}



/**MOBILE ********************************************************************
*********************************************************************** **/

@media only screen and (max-width:550px){
    #header{
        width:100%;
    }
    
    #logo{
        pointer-events:none;
    }
    #logohit{
        display:none;
        pointer-events:none;
    }
    
    #nav{
        font-size:1.4em;
    }
    
    #navlink{
        width:30%;
    }
    
    #plogo{
        padding-left:35%;
        width:30%;
        position:static;
        pointer-events:none;
    }   
    
    
    
    #mobilehome{
        display:block;
        position:absolute;
        width:100%;
        height:77%;
        top:0px;
        pointer-events: all;
    }
    
    #mobilehome:hover{
        cursor:pointer;
    }

    
    #about{
    height:100vh;
    background-color:#f6f6f6;
    position:fixed;
    top:0px;
    left:0px !important;
    padding-top:30px;
    width:100vw;
    z-index:2;
}
    #contact{
    height:100vh;
    position:fixed;
    top:0px;
    left:0px !important;
    padding-top:30px;
    width:100vw;
    z-index:2;
}

#expand{

    height:100vh;
    position:fixed;
    top:0px;
    left:0px !important;
    padding-top:30px;
    width:100vw;
    z-index:2;
}
    
    #mejpg{
        position:fixed;
        top:0;
        z-index:-2;
        opacity:.3;
        width:114%;
        animation: fadeIn 2s ease backwards;
    }
  
    
    #content{
    height:100%;
    overflow:visible;
}
    .project{
    position:relative;
    height:200px;
    width:100%;
    background-size:cover;
}
    .bigger{
        background-size:cover !important;
    }
    
    .sectiontitle{
        opacity:1;
        background-color:rgba(255,255,255,.8);
        color:black;
    }
    
.v{
    position:fixed;
    left:20px;
    top:20px;
    width:50px;
    cursor:pointer;
    background-color:white;
    padding:10px;
    opacity:.5;
    display:block;
    
}
    
.x{
    position:fixed;
    left:80%;
    top:20px;
    width:50px;
    cursor:pointer;
    padding:10px;
    
}
    
    .pic{
        margin-top:3%    }
    
    #header{
        left:0;
    }
    body{
        height:820px;
    }
    
    .sectiontitle{
        font-size:2em;
    }
    
    h1, p{
        padding:5%;
    }
    .projectpage{
        background-image:none !important;
    }
    
    .project{
        margin-bottom:5%;
        box-shadow: 2px 2px 5px #EAE8DB;
    }
}
