.gradient {
    background-image: linear-gradient(to bottom right, #85DBDB, #48C96C, #4865C9);
    border-radius: 4px;

}





.gradient-overlay {
    background-image: linear-gradient(200deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0), rgba(255, 255, 255, .4));
}



.row {
    margin-bottom: 40px;
    margin-top: 0px !important;
}

.portfolio-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    /* height: auto; */
    max-width: 100%;
    object-fit: contain;
    /*    margin-bottom: 40px;*/
}



body {
    margin: auto;
    font-family: helvetica, arial, sans-serif;
    /*    background-color: #252932;*/
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

main {
    margin-bottom: 120px;
    margin-top: 120px;
}

/*::::::::::::::::::::::::::::::::*/
/*TOP NAVIGATION*/
/*::::::::::::::::::::::::::::::::*/


.dropbtn {
    background-color: #171A22;
    background-image: url(images/logo_background.svg);
    background-repeat: no-repeat;
    color: white;
    padding: 16px 16px 16px 64px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}


/*BUTTON HOVER STATE*/
.dropbtn:hover,
.dropbtn:focus {
    background-color: #0E1118;
}

.dropdown {
    position: relative;
    display: block;
    background-color: #171A22;
}

/*MENU ITEMS*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #171A22;
    min-width: 160px;
    height: 650px;
    overflow: scroll;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    position: relative;
    left: 0;
    width: 100%;
    color: white;
    text-decoration: none;
    display: inline-block;
}

/*MENU ITEM HOVER STATE*/
.dropdown a:hover {
    background-color: #0E1118;
}

.show {
    display: block;
    position: relative;
    left: 0;
}

.nav-jnc-image {
    height: 60px;
    /*    float: left;*/
    margin: 20px;
}

.nav-jnc-image a {
    color: red;
    margin-top: 30px;
    /*    height: 60px;*/
    /*    float: left;*/
    /*    margin-right: 20px;*/
}




/*::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::*/





.nav-jnc-desktop {
    width: 100%;
    height: 40px;
    background-color: black;
    display: block;
    position: absolute;
    top: 0;

}


.nav-jnc-mobile {
    width: 100%;
    height: 40px;
    background-color: red;
    display: none;
    position: absolute;
    top: 0;

}



/*::::::::::::::::::::::::::::::::*/
/*DELETE EVERYTHING BELOW IF POSSIBLE*/


.row {
    margin-top: 80px;
}

.main-image {
    height: 300px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgb(88, 88, 90);
    background-size: cover;
}

.portfolio {
    background-color: red;
}

.navbar {
    /*    border-bottom: 6px solid rgba(37, 135, 195, 1);*/
    /*    height: 60px;*/
}


.page-content {
    margin-top: 200px;
}

p,
ul {
    font-weight: 300;
    letter-spacing: .02rem
}

.lead {
    letter-spacing: normal;
}

.jnc-name {
    float: left;
    height: 20px;
    color: white;
    font-size: 12px;
    margin-top: -6px;
    font-weight: 300;
    letter-spacing: .03rem;
    line-height: 1rem;
}

.text-jnc-title {
    left: 0;
    float: left;
    /*    position: relative;*/
    top: 30px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: auto;
}

.image-jnc-jeff {
    top: 1em;
    background-size: cover;
    background-position: center;
    height: 80px;
    border-radius: 50%;
    border: 6px solid rgba(37, 135, 195, 1);
    margin-right: 20px;
    float: left;
    /*    position: relative;*/
    /*        top: 1em;*/
    /*        left: 50px;*/
}

#blurb {
    float: left;
    margin: 0 40px 20px 0;
    letter-spacing: .05em;
    font-weight: 100;
    font-size: 1.2em;
    line-height: 30px;
    color: white;
    background-color: #1e2129;
}

.flex-container {
    display: flex;
    /*    position: fixed;*/
    /*    top: 60px;*/
    flex-wrap: wrap;
    background-color: #252932;
    margin-top: 64px;
    padding-left: 2%;
    padding-right: 2%;
}

.flex-item {
    min-width: 240px;
    height: 120px;
    background-size: 100px;
}

.flex-item:hover {
    /*    min-width: 400px;*/
    height: 120px;
    background-size: 100px;
    background-color: rgba(5, 172, 234, .3);
}

.button {
    width: 100%;
    float: left;
    height: 100%;
}

.experience {
    /*    margin-left: 27px;*/
    /*    width: 82%;*/
}

.bold-name {
    font-weight: 900;
}

.bg-jnc-primary {
    background-color: rgba(37, 41, 50, 1);
}

.bg-jnc-darkgrey {
    background-color: rgba(88, 88, 91, 1);
}

.card-jnc-size {
    max-width: 18rem;
    margin: 1rem;
}

.card-jnc-text {
    margin-bottom: .5rem;
    font-weight: 300;
    font-size: 14px;
    line-height: normal;
    letter-spacing: .03rem;
}

.card-jnc-title {
    margin-bottom: 1rem;
    letter-spacing: .03rem;
}

.blue {
    color: rgba(37, 135, 195, 1);
}

.grey {
    color: gray;
}

.company {
    font-weight: 200;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: .5px;
    color: #717171;
}

.company-logo {
    background-size: contain;
    background-position: center;
    height: 50px;
    width: 70px;
}

.details {
    font-weight: 100;
    line-height: 22px;
    letter-spacing: 1px;
    color: #252932;
}

.nav-jnc-mobile-show {
    display: none;
}




@media screen and (max-width: 755px) {
    .card-jnc-size {
        max-width: 100%;
    }
}


@media screen and (max-width: 1200px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.jnc-mobile-show {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a.jnc-nav-button-mobile {
        /*float: right;*/
        display: block;
    }

    .jnc-mobile-hide {
        /*color: red !important;*/
        display: none !important;
    }

    .nav-jnc-desktop {
        /*width:100%;*/
        /*height: 40px;*/
        background-color: black;
        display: none;
        /*position: absolute;*/
        /*top:0;*/
    }


    .nav-jnc-mobile {
        /*width:100%;*/
        /*height: 40px;*/
        background-color: red;
        display: block;
        /*position: absolute;*/
        /*top:0;*/
    }

    .topnav a:hover {
        background-color: #0E1118;
        color: white;
        font-weight: 300;
        border-bottom: 0px;
        border-left: solid 1px white;
    }



}

@media screen and (max-width: 1200px) {
    .topnav.responsive {
        position: relative;
        color: red;
    }

    /*OPEN MENU TOP LABEL*/
    .topnav.responsive .jnc-nav-button-mobile {
        position: absolute;
        left: 0;
        /*top: 10px;*/
        /*color: red;*/
    }

    /*OPEN MENU ITEMS*/
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        position: relative;
        top: 50px;
        /*color: red;*/
    }
}

@media screen and (max-width: 1200px) {
    .topnav.responsive {
        position: relative;
        color: red;
    }

    .topnav.responsive .jnc-nav-button-mobile {
        position: absolute;
        right: 0;
        top: 0;
    }
}