body, html

{

    background-color: #EDEDED !important;
    width:100%;

}



.intro

{



    margin-bottom: 0;

}



#topbar-wrapper

{

    position: fixed;

    width: 100%;

    height: 7%;

    left: 0;

    top: 0;

    background-color: black;

    opacity: 0;

    z-index: 100;

    transition: opacity .5s ease;

}



#contact-buttons

{

    position: fixed;

    height: 8.3%;

    z-index: 101;

    text-align: center;

    width: 100%;

}

#projects-button

{

    height: 100%;

    display: inline-block;

}



#projects-button > button 
{
    height: 100%;
}

#resume-button

{

    height: 100%;

    display: inline-block;

}



#resume-button > button 
{
    height: 100%;
}



#linkedIn-button
{
    height: 100%;
    display: inline-block;
}



#linkedIn-button > button
{
    height: 100%;
}



#name

{

    position: relative;

    left: 0%;

    width: 100%;

    transition: opacity .5s ease;

}



#name-wrapper

{

    position: fixed;

    left:50%; 

    transform:translateX(-50%);

}



#logo {
    position: relative;
    width: 80%;
}



#logo-wrapper
{
    display: flex;
    justify-content: center;
    position: fixed;
    z-index: 101;
}



#job

{

    position: relative;

    left: 0%;

    width: 100%;

    transition: opacity .5s ease;

}



#job-wrapper

{

    width: 100%;

    position: fixed;

    left:50%; 

    transform:translateX(-50%);

}



.intro h1

{

    margin-top: 0;

    font-weight: 900;

    text-transform: uppercase;

}



.intro h5

{

    text-transform: uppercase;

    background-color: #f5f5f5;

    padding: 10px;

    color: #333333;

    display: inline-block;

    font-size: 1.2rem;

}



.sidenav

{

    text-align: center;

    padding-top: 5%;

    padding-bottom: 5%;

    margin-bottom: 50px;

}



.button

{

    width: 100%;

    padding-top: 4%;

    padding-bottom: 4%;

}



#portfolio

{

    text-align: center;

    position: absolute;

    top: 70%;

    left: 50%; 

    transform: translateX(-50%);

}



.portfolio .col

{

    margin-bottom: 24px;

}



.portfolio h5

{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 15px;

}



.portfolio h6

{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 45px;

}



.portfolio hr

{

    width: 40px;

    margin-bottom: 45px;

}



.portfolio .portfolio-holder

{

    clear: both;

    text-align: center;

}



.portfolio img

{

    width: 33%;

    display: inline-block;

    float: left;

}



.contact .col

{

    margin-bottom: 24px;

}



.contact h5

{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 15px;

}



.contact h6

{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 45px;

}



.contact hr

{

    width: 40px;

    margin-bottom: 45px;

}



.contact .contact-holder

{

    padding-left: 40px;

    text-align: left;

}



.contact .contact-holder h6

{

    margin-bottom: 15px;

    text-align: left;

}



.contact .contact-holder p

{

    margin-bottom: 30px;

}



footer

{

    text-align: center;

    padding-top: 5%;

    padding-bottom: 3%;

}



.portfolioItem

{

    z-index: 1;

    display: inline-block;

    transition: all .35s ease;

    text-align: center;

    background-size:cover;

    background-position:center;

    display: flex;

    justify-content: center;

    min-width: 100%;

    min-height: 100%;

    position: relative;  

    display: inner;

    padding-top: 50%;

    padding-bottom: 50%;

}



.portfolioItem:hover{

    z-index: 1000;

    cursor: pointer;

    -webkit-filter: grayscale(85%);

    -moz-filter: grayscale(85%);

    -o-filter: grayscale(85%);

    -ms-filter: grayscale(85%);

    filter: grayscale(85%); 

}



.inner

{

    top: 0;

    z-index: 1;

    min-width: 100%;

    min-height: 100%;

    position: absolute;

    display: inline-block;

}



.portfolioItem:hover > .inner > .projecttitle

{

    color: white;

    transition-delay: .01s;

    background-color: #37474F;

}



.projecttitle

{

    z-index: 2;

    color: transparent;

    transition: color .35s ease;

    font-weight: 900;

    font-size: 2.4rem;

    text-transform: uppercase;

}





.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {

    -webkit-box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);

    -moz-box-shadow: 5px 5px 2.5px 0px rgba(0,0,0,0.75);

    box-shadow: 5px 5px 2.5px 0px rgba(0, 0, 0, 0.75);

    -webkit-transform: scale(1.08);

    transform: scale(1.08);

}



#vp

{

    background-image: url(../images/vp.jpg);

}



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



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



#wizard

{

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

}



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

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

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

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


#bellhapp

{

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

}

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

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

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

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

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

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

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

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


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



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



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



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



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



#links

{

    text-align: center;

    top: 70%;

    left: 50%; 

    padding-top: 5%;

}



.links .col

{

    margin-bottom: 24px;

}



.links h5

{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 15px;

}



.links h6

{

    text-align: center;

    text-transform: uppercase;

    margin-bottom: 45px;

}



.links hr

{

    width: 40px;

    margin-bottom: 45px;

}



.links .portfolio-holder

{

    clear: both;

    text-align: center;

}



.links img

{

    width: 33%;

    display: inline-block;

    float: left;

}



.project-Intro

{

    padding-top: 15%;

    padding-bottom: 5%;

    text-align: center;

}



.project-Intro > h1

{

    margin-top: 0;

    font-weight: 900;

    text-transform: uppercase;

}



.project-Intro > h5

{

    text-transform: uppercase;

    background-color: #f5f5f5;

    padding: 10px;

    color: #333333;

    display: inline-block;

    font-size: 1.2rem;

    width: 100%;

}



.projectLink

{

    z-index: 1;

    display: inline-block;

    transition: all .35s ease;

    text-align: center;

    background-size:cover;

    background-position:center;

    justify-content: center;

    min-width: 100%;

    position: relative;  

    display: inner;

    padding-top: 50%;

    padding-bottom: 50%;

}


.projectLink:hover{

    z-index: 1000;

    cursor: pointer;

    -webkit-filter: grayscale(85%);

    -moz-filter: grayscale(85%);

    -o-filter: grayscale(85%);

    -ms-filter: grayscale(85%);

    filter: grayscale(85%); 

}



.projectInner

{

    top: 0;

    z-index: 1;

    min-width: 100%;

    min-height: 100%;

    position: absolute;

}



.projectLink:hover > .projectInner > .linkTitle

{

    color: white;

    transition-delay: .01s;

    background-color: #37474F;

}



.linkTitle

{

    z-index: 2;

    color: transparent;

    transition: color .35s ease;

    font-weight: 900;

    text-transform: uppercase;

}



#projectTopBar

{

    background-color: black;

    z-index: 10000;

    position: fixed;

    top: 0;

    width: 100%;

    height: 10.45%;

    opacity: .5;

}



#projectLogo

{

    z-index: 10001;

    position: fixed;

    left: 0;

    height: 8.15%;

    top: 1.05%;

}

.project-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: initial;
}
.row-wrapper {
    margin: 0;
}
.project-square {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}
.project-square img {
    max-width: 100%;
    object-fit: contain;
}
.project-square iframe {
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    object-fit: contain;
}
.project-square p{
     text-align: center;
}
.project-square button{
     align-self: center;
     margin-top: 10px;
     margin-bottom: 10px;
}
.footer-heading{
    padding: 2vh;
     text-align: center;
}
/* Solid border */
hr.solid {
    border-top: 3px solid #bbb;
    width: inherit;
}

.youtubeVid {
    border: 2px solid black;
    border-radius: 15px;
    margin:5px;
    aspect-ratio: 16/9;
}