#nav 
{
    height: 50px !important;
    width: 100vw;
    transition: all .8s ease;
    position: absolute;
    top: 0px;
    z-index: 100;
    background-color : black !important;
    color: white;
}

[v-cloak] {display: none}


 
#nav ul
{
    margin-top: 21px;
    display: flex;
    flex-direction: row;
}

#nav ul li{
    height: 29px;
    margin-right: 18px;
}

#nav ul li.underline{
    border-bottom: 2px solid white;
}

#nav.fullscreen
{
    height: 100vh !important;
}

#nav-logo
{
    display: none;
}

body
{
    overflow: hidden;
}

body
{
    font-family: 'Monaco', 'Courier New';
}

section
{
    margin-top: 50px;
    height: calc(100vh - 50px);
    /* background-image: url("https://i.ibb.co/Nyjgkn5/background.gif"); */
    background-image: url(./images/background.gif);
    background-size: cover;
    color: white;
}
section > .row
{
    height: 100%;
    margin: 0px;
}

#header-wrapper
{
    position: absolute;
    transition: all .8s ease;
    margin-left: 10px;
    margin-top: 10px;
    margin-left: 20px;
}

#header-wrapper.fullscreen
{
    display: inline;
    margin-left: calc(50vw - 290px);
    margin-top: calc(50vh - 20px);
}

#logo  
{
    display: inline;
    color: #2196f3;
    font-size: 35px;
    transition: all .8s ease;
    position: absolute;
    left: 44vw;
    top: 0vh;
    z-index: 100;
}

#logo.fullscreen
{
    left : 0vw;
    top: 0;
    z-index: 0;
}

#logo svg{
    display: inline-block;
    position: absolute;
    top: -26px;
    left: -9px;
}

#logo svg#logo-circle{
    top: -26px;
    left: -6px;
}

#logo span
{
    margin-left: 4px;
}

#header-wrapper h4
{
    display: inline;
}
#circle-background{
    height : 135px;
    width : 135px;
    z-index: -1;
}
#logo-circle
{
    height : 100px;
    width : 100px;
}

#main-cell, #projects-cell, #contact-cell
{
    /* padding: 15px; */
    overflow-y  : auto;
}

#typed {
    font-size: 35px;
    margin-left: 15px;
}
#typed-strings
{
    display: none;
}
.typed-cursor  {
    font-size: 35px;
}

#fly-in-text   {
    position: absolute;
    width: 616px;
    height: 600px;
    display: inline-block;
    transition: all .8s ease;
    list-style: none;
    margin-top: 10px;
    margin-left: 100px;
}

#fly-in-text span
{
    display: inline;
    transition: all 1.2s ease;
    display: inline-block;
}

#logo.shifted{ transform: translateX(-510px) translateY(200px); }

#fly-in-text span.shifted:nth-child(1){ transform : translateX(-350px) translateY(-200px); }
#fly-in-text span.shifted:nth-child(2){ transform : translateX(-300px) translateY(200px); }
#fly-in-text span.shifted:nth-child(3){ transform : translateX(20px) translateY(-60px); }
#fly-in-text span.shifted:nth-child(4){ transform : translateX(46px) translateY(100px); }
#fly-in-text span.shifted:nth-child(5){ transform : translateX(-70px) translateY(250px); }
#fly-in-text span.shifted:nth-child(6){ transform : translateX(-65px) translateY(-32px); }
#fly-in-text span.shifted:nth-child(7){ transform : translateX(222px) translateY(-50px); }
#fly-in-text span.shifted:nth-child(8){ transform : translateX(90px) translateY(10px); }

#skills-ul
{
    margin-left: 25px;
}
#nav-buttons
{
    transition: all 1.8s ease;
}

#nav-buttons.hidden{
    display: none;
}

#headshot{
	background-color: rgba(19, 23, 27, 0.7);  
    width: 25%;
    padding: 0px;
}

#contact-cell
{
    height: 100%;
}

#contact-cell > .row
{
    margin-top: 50px;
    height: 100%;
}

#contact-table
{
    margin-left: 25px;
}

#contact-table td
{
    padding-top: 7px;
    padding-bottom: 7px;
}

.project-thumbnail
{
    max-width: 214px;
    max-height: 126px;
}

#project-collection li
{
    background-color: rgba(0,0,0,0);
    display: flex;
    cursor: pointer;
}

#project-collection li:hover
{
    background-color: rgba(0,0,0,0.5);
    display: flex;
}

#project-collection .proj-title
{
    margin-left: 10px;
}

#gallary-list-wrapper
{
    margin-top: 31px;
}

#project-modal
{
    height: 90vh;
    width: 65vw;
    max-height: unset;
    top : 5vh !important;
}

#project-image
{
    max-width: 90%;
    /* margin: auto; */
    max-height: 100%;
}

#project-image-div
{
    width: 90%;
    height : 100%;
    background-image : url( "images/no-image.jpg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    cursor: pointer;
}

#project-image-wrapper
{
    display: flex;
    justify-content: center;
    height: 60%;
}

#proj-image-prev, #proj-image-next 
{
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

#proj-image-prev i, #proj-image-next i
{
    margin: auto;
}

.proj-img-thumb-wrapper
{
    min-width: 215px;
    display: flex;
    justify-content: center;
}

/* For mobile phones: */
@media only screen and (max-width: 768px) 
{
    #header-wrapper{
        display : none;
    }

    #headshot
    {
        width : 100%;
    }
    #contact-cell > .row:nth-child(1)
    {
        margin-top : 0px;
    }
    #contact-table td
    {
        padding-top : 2px;
        padding-bottom : 2px;
    }
    #project-collection li
    {
        display : block;
        padding : 0px;
        padding-top : 5px;
    }
    .proj-img-thumb-wrapper
    {
        display : flex;
        justify-content : center;
    }
    #project-modal
    {
        width  : 100vw;
    }
    #project-modal .modal-content  
    {
        padding : 0px;
    }
    .proj-img-thumb-wrapper
    {
        min-width: unset;
    }
}

.page-dots {
    position: absolute;
    top: calc(60% - 0px);
    left: 50%;
    transform: translateX(-50%);
    cursor: default;
    display: flex;
    flex-direction: row;
}

.page-dots .dot {
    background-color: #fff;
    border: 1px solid rgba(25, 118, 210, 0.5);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    transition: background-color 0.2s ease;
    cursor: default;
    margin: 0 2px;
}