body {
    width: 100%;
    font-family: 'Nunito Sans', calibri;
    background: #fff;
    overflow-x: hidden;
    margin: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

@media only screen and (min-width : 320px) and (max-width : 768px) {

    #topper {
        display: block !important;
    }

    #top img {
        text-align: center !important;
        width: 50% !important;
    }

    #top {
        text-align: center !important;
    }

    #bio {
        display: block !important;
        text-align: center !important;
    }

    .block2 {
        display: block !important;
        text-align: center !important;
    }

    #menu h1 {
        display: block !important;
        text-align: center;
    }

    #menu {
        display: block !important;
    }

    #menu ul {
        width: 100% !important;
        -webkit-padding-start: 0px !important;
        justify-content: center !important;
    }

    #home-buttons {
        width: 90%;
        margin: 5% 0;
        display: block !important;
    }

    #home-buttons a {
        display: block !important;
        padding: 4% 10% !important;
        margin: 5% 0;
        border: 4px solid #545454;
        text-align: center;
    }

    #projects > div {
        display: block!important;
        text-align: center!important;
    }

    .project img {
        width: 40%!important;
    }

    #projectData {
        display: none !important;
    }

    #mobileData {
        display: block !important;
    }

    .companyImg {
        display: none !important;
    }

    #workDetails>p {
        width: 90% !important;
        text-align: left !important;
    }

    #workBox {
        width: 90% !important;
    }
}

/*************
Top
**************/

#menu {
    margin: 1% 2%;
    display: flex;
    justify-content: space-between;
    font-family: 'Avenir Next';
}

#menu ul {
    display: inline-flex;
    list-style-type: none;
    justify-content: flex-end;
    width: 50%;
}

#menu a {
    text-decoration: none;
}

#menu ul a {
    margin: auto 3%;
    text-decoration: none;
    color: #333;
    border-bottom: 2px solid transparent;
    transition: all ease-in-out 0.5s;
}

#menu ul a:hover {
    border-color: #333;
}

#menu ul a:visited {
    color: #333;
}

#menu h1 {
    color: #333333;
    font-size: 24px;
    font-weight: 400;
    display: inline;
}

#menu h1 b {
    font-size: 30px;
    font-weight: 400;
}

#home-buttons {
    width: 64%;
    margin: 5% 18%;
    justify-content: space-between;
    display: flex;
}

#home-buttons a {
    padding: 2% 6%;
    border: 4px solid #545454;
    text-align: center;
    font-weight: bolder;
    text-decoration: none;
    color: black;
}

#home-buttons a:hover {
    cursor: pointer;
    border-color: #765ea4 #765ea4 #85754d #85754d;
}

#topper {
    display: flex;
    width: 55%;
    margin: 0% 25%;
    justify-content: flex-start;
}

.block2 {
    display: block;
    width: 55%;
    margin: 0% 25%;
    justify-content: flex-start;
}

.block2 p {
    line-height: 1.7;
}

.block2 p a {
    text-decoration: none;
    color: #1A237E;
    border-bottom: 2px solid transparent;
    transition: all ease-in-out 0.5s;
    font-weight: bold;
}

.block2 p a:hover {
    border-color: #1A237E;
}


#top {
    text-align: left;
    float: left;
    /* add this */
    align-self: center;
}

#top img {
    border-radius: 5%;
    width: 100%;
}


#bio {
    text-align: left;
    margin: 0 5%;
}

#bio h2 {
    font-weight: 900;
    margin: 0;
}

#bio p {
    line-height: 1.7;
    margin-top: 3%;
}

#bio p a {
    text-decoration: none;
    color: #1A237E;
    border-bottom: 2px solid transparent;
    transition: all ease-in-out 0.5s;
    font-weight: bold;
}

#bio p a:hover {
    border-color: #1A237E;
}

#links {
    text-align: center;
}

#links a {
    margin: auto 1%;
    color: #000;
    text-decoration: none;
}

#links a:link {
    text-decoration: none;
}

#links a:visited {
    text-decoration: none;
}

#links a:hover {
    text-decoration: underline;
}

#links a:active {
    text-decoration: underline;
}

.fa-th-large {
    font: normal normal normal 32px/1 FontAwesome !important;
}

.fa {
    transition: all ease-in-out 0.5s;
}

[type="git"]:hover {
    color: #333;
    cursor: pointer;
}

[type="fb"]:hover {
    color: #3B5999;
    cursor: pointer;
}

[type="twit"]:hover {
    color: #55ACEE;
    cursor: pointer;
}

[type="linkedin"]:hover {
    color: #4875B4;
    cursor: pointer;
}

.fa-heart {
    color: #C0392B;
    font-size: 30px;
}

/******************************
Subpages CSS
******************************/

#projectshead h1,
#workhead h1,
#abouthead h1 {
    width: 100%;
    text-align: center;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0.5em;
    padding-top: 0.2em;
    font-weight: normal;
}

/******************************************
Projects
******************************************/

#projects>div {
    display: flex;
    justify-content: flex-start;
    margin: 5% 20%;
    width: 60%;
}

.project img {
    width: 20%;
}

.project>div {
    margin-left: 5%;
}

.project>div>a {
    margin-right: 2%;
    text-decoration: none;
    color: #1A237E;
    border-bottom: 2px solid transparent;
    transition: all ease-in-out 0.5s;
    font-weight: bold;
}

.project>div>h2 {
    margin-top: 0;
}


.project>div>a:hover {
    border-color: #1A237E;
}


#pjmain {
    width: 100%;
    text-align: center;
}

#mobileData {
    display: none;
}

.block {
    margin: 3%;
    text-align: center;
    display: inline-block;
    color: #000;
    vertical-align: top;
    cursor: pointer;
}

.block img {
    height: 80%;
    -webkit-border-radius: 30%;
    -moz-border-radius: 30%;
    -o-border-radius: 30%;
}


/*************************************************
Tags
*************************************************/

tag {
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 5px 8px 5px 8px;
    margin: 8px;
    color: #fff;
    width: auto;
    background-color: #333;
    border: 1px dashed #000;
}

tag:hover {
    font-weight: bold;
    padding: inherit 7px;
    border: 1px solid #000;
}

#projects tag:hover {
    font-weight: normal;
    border: 1px dashed #000;
}

#pjmain tag {
    cursor: pointer;
}

tag[data-filter="paper"] {
    background-color: #27AE60;
}

tag[data-filter="app"] {
    background-color: #E67E22;
}

tag[data-filter="web"] {
    background-color: #C0392B;
}

tag[data-filter="hardware"] {
    background-color: #3498DB;
}

tag[data-filter="software"] {
    background-color: #DF0101;
}

tag[data-filter="fp"] {
    background-color: #34495E;
}



/******************************************
Work
******************************************/

.work-container {
    margin: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
}

.work-item {
    overflow: hidden;
    margin: 2%;
}

.work-link {
    text-decoration: none;
}

.work-img {
    width: 50%;
    height: auto;
}

/******************************************
Footer
******************************************/

#footer {
    width: 100%;
    background: #765ea4;
    display: flex;
    justify-content: space-between;
    ;
    bottom: -10px;
    padding: 2% 0;
}

#footer>div {
    margin: 0 2%;
    text-align: left;
}

#footer #links a {
    color: #fff;
}

#footer #links {
    width: 50%;
}

/***************
GALLERY
****************/

.gallery_container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.gallery {
    height: 50vh;
    flex-grow: 1;
}


div.gallery img {
    max-height: 100%;
    min-width: 100%;
    vertical-align: bottom;
    object-fit: cover;
}

div.desc {
    padding: 15px;
    text-align: center;
}