/* ============================================================= */
/* GRIFFIN GIORDA - PORTFOLIO                                    */
/* homeCustom.css                                                */
/* ============================================================= */


/* ============================================================= */
/* PAGE                                                          */
/* ============================================================= */

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f5f5f5;
}

.container {
    max-width: 1100px;
}


/* ============================================================= */
/* NAVIGATION                                                    */
/* ============================================================= */

.portfolio-navbar {
    position: sticky;

    top: 0;

    z-index: 1050;

    margin-bottom: 20px;

    border-radius: 0;

    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.12);
}


/* ------------------------------------------------------------- */
/* NAV BRAND                                                     */
/* ------------------------------------------------------------- */

.portfolio-navbar .navbar-brand {
    font-size: 16px;

    white-space: nowrap;
}


/* ------------------------------------------------------------- */
/* NAV LINKS                                                     */
/* ------------------------------------------------------------- */

.portfolio-navbar .navbar-nav > li > a {
    font-size: 13px;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


/* ------------------------------------------------------------- */
/* CURRENT SECTION                                               */
/* ------------------------------------------------------------- */

.portfolio-navbar .navbar-nav > .active > a,
.portfolio-navbar .navbar-nav > .active > a:hover,
.portfolio-navbar .navbar-nav > .active > a:focus {
    font-weight: 700;
}


/* ============================================================= */
/* SECTION ANCHORS                                               */
/* ============================================================= */

.section-anchor,
#top {
    scroll-margin-top: 75px;
}


/* ============================================================= */
/* HERO                                                          */
/* ============================================================= */

.hero-section {
    padding: 35px 30px;

    margin-bottom: 25px;

    background-color: #eeeeee;

    border-radius: 8px;
}


/* ============================================================= */
/* HERO HEADSHOT                                                 */
/* ============================================================= */

.hero-headshot {
    display: block;

    width: 200px;
    height: 200px;

    object-fit: cover;

    object-position:
        center 20%;

    margin-left: auto;
    margin-right: auto;

    border:
        5px solid #ffffff;

    border-radius: 50%;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.hero-headshot:hover {
    transform:
        scale(1.02);

    box-shadow:
        0 6px 18px
        rgba(0, 0, 0, 0.28);
}


/* ============================================================= */
/* HERO TEXT                                                     */
/* ============================================================= */

.hero-text {
    padding-top: 8px;
}


.hero-text h1 {
    margin-top: 0;

    margin-bottom: 8px;

    color: #444444;

    font-weight: 600;
}


.hero-text h3 {
    margin-top: 8px;

    margin-bottom: 18px;

    color: #337ab7;

    line-height: 1.35;
}


.hero-text p {
    margin-bottom: 15px;

    line-height: 1.6;
}


/* ============================================================= */
/* HERO CONTACT                                                  */
/* ============================================================= */

.hero-contact {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 15px;

    margin-top: 18px;
}


.contact-info {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 10px;

    color: #555555;

    font-size: 14px;
}


.contact-item {
    display: inline-flex;

    align-items: center;

    gap: 4px;
}


.contact-item strong {
    color: #333333;

    font-weight: 600;
}


.contact-divider {
    color: #aaaaaa;
}


.resume-action {
    margin-left: 4px;
}


.resume-action .btn {
    margin: 0;
}


/* ============================================================= */
/* PANELS                                                        */
/* ============================================================= */

.panel {
    margin-bottom: 25px;

    border-radius: 6px;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, 0.08);
}


.panel-heading {
    border-top-left-radius: 6px;

    border-top-right-radius: 6px;
}


.panel-title {
    font-size: 19px;

    font-weight: bold;
}


.panel-body {
    padding:
        22px 25px;

    font-size: 15px;

    line-height: 1.6;
}


.panel-body p {
    margin-bottom: 15px;
}


.panel-body ul {
    margin-top: 10px;

    margin-bottom: 18px;

    padding-left: 25px;
}


.panel-body li {
    margin-bottom: 5px;
}


/* ============================================================= */
/* FULL-WIDTH SECTION IMAGES                                     */
/* ============================================================= */

.section-photo-wide {
    display: block;

    width: 100%;

    max-width: none;

    height: 230px;

    object-fit: cover;

    margin:
        5px 0 25px 0;

    border:
        1px solid #dddddd;

    border-radius: 6px;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.10);
}


/* ============================================================= */
/* ABOUT ME IMAGE                                                */
/* ============================================================= */

.about-photo {
    height: 340px;

    object-fit: cover;

    object-position:
        center center;
}


/* ============================================================= */
/* STANDARD SECTION IMAGE                                        */
/* ============================================================= */

.section-photo {
    display: block;

    width: 100%;

    max-width: 440px;

    max-height: 250px;

    object-fit: cover;

    margin:
        15px auto 20px auto;

    border:
        1px solid #dddddd;

    border-radius: 6px;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.10);
}


/* ============================================================= */
/* ERP SCREENSHOT                                                */
/* ============================================================= */

.project-image {
    display: block;

    width: 88%;

    max-width: 760px;

    max-height: 390px;

    object-fit: contain;

    margin:
        15px auto 20px auto;

    background-color: #ffffff;

    border:
        1px solid #dddddd;

    border-radius: 6px;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.12);
}


/* ============================================================= */
/* SPLIT PROJECTS                                                */
/* ============================================================= */

.project-split {
    display: flex;

    align-items: center;

    gap: 30px;

    width: 100%;

    margin-top: 10px;

    margin-bottom: 10px;
}


.project-visual {
    flex:
        0 0 40%;

    max-width: 40%;
}


.project-copy {
    flex: 1;

    min-width: 0;
}


.project-side-image {
    display: block;

    width: 100%;

    max-width: 400px;

    max-height: 280px;

    object-fit: contain;

    margin:
        0 auto;

    background-color: #ffffff;

    border:
        1px solid #dddddd;

    border-radius: 6px;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.12);
}


.project-copy ul {
    margin-top: 12px;

    margin-bottom: 15px;
}


/* ============================================================= */
/* PROJECT HEADINGS                                              */
/* ============================================================= */

.project-heading {
    margin-top: 10px;

    margin-bottom: 4px;

    color: #337ab7;

    font-weight: bold;
}


.project-heading + p {
    margin-top: 4px;
}


/* ============================================================= */
/* PROFESSIONAL EXPERIENCE                                       */
/* ============================================================= */

.position-heading h4 {
    margin-top: 0;

    margin-bottom: 3px;

    color: #337ab7;

    font-weight: bold;
}


.position-heading strong {
    color: #555555;
}


.panel-body .text-right {
    padding-top: 2px;
}


/* ============================================================= */
/* JW MARRIOTT                                                   */
/* ============================================================= */

.experience-split {
    display: flex;

    align-items: center;

    gap: 30px;

    width: 100%;

    margin-top: 15px;
}


.experience-copy {
    flex: 1;

    min-width: 0;
}


.experience-visual {
    flex:
        0 0 38%;

    max-width: 38%;
}


.experience-photo {
    display: block;

    width: 100%;

    max-width: 390px;

    max-height: 240px;

    object-fit: cover;

    margin:
        0 auto;

    border:
        1px solid #dddddd;

    border-radius: 6px;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.10);
}


/* ============================================================= */
/* TECHNICAL SKILLS                                              */
/* ============================================================= */

.skills-column h4 {
    margin-top: 5px;

    margin-bottom: 10px;

    font-weight: bold;
}


.skills-column ul {
    padding-left: 22px;

    margin-bottom: 18px;
}


/* ============================================================= */
/* EDUCATION                                                     */
/* ============================================================= */

.education-section h3,
.panel-body h3 {
    margin-top: 5px;

    margin-bottom: 8px;

    font-weight: 600;
}


.education-photo {
    display: block;

    width: 100%;

    max-width: 320px;

    max-height: 220px;

    object-fit: cover;

    margin:
        10px auto 15px auto;

    border:
        1px solid #dddddd;

    border-radius: 6px;

    box-shadow:
        0 2px 6px
        rgba(0, 0, 0, 0.10);
}


/* ============================================================= */
/* BUTTONS                                                       */
/* ============================================================= */

.hero-section .btn,
.panel-body .btn {
    margin-right: 4px;

    margin-bottom: 4px;
}


.btn {
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


/* ============================================================= */
/* CONTACT                                                       */
/* ============================================================= */

.panel-primary .panel-body {
    padding-top: 28px;

    padding-bottom: 28px;
}


.contact-summary {
    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

    gap:
        20px 40px;

    margin-top: 22px;

    margin-bottom: 22px;
}


.contact-summary-item {
    display: flex;

    flex-direction: column;

    min-width: 170px;

    text-align: center;
}


.contact-label {
    margin-bottom: 4px;

    color: #777777;

    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}


.contact-value {
    color: #333333;

    font-size: 15px;
}


.contact-resume {
    margin-top: 8px;

    text-align: center;
}


/* ============================================================= */
/* BACK TO TOP                                                   */
/* ============================================================= */

.back-to-top-container {
    width: 100%;

    margin-top: 25px;

    padding-top: 12px;

    border-top:
        1px solid #eeeeee;

    text-align: right;
}


.back-to-top {
    display: inline-block;

    color: #337ab7;

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;
}


.back-to-top:hover,
.back-to-top:focus {
    color: #23527c;

    text-decoration: underline;
}


/* ============================================================= */
/* HORIZONTAL RULES                                              */
/* ============================================================= */

.panel-body hr {
    margin-top: 28px;

    margin-bottom: 28px;

    border-top:
        1px solid #dddddd;
}


/* ============================================================= */
/* FOOTER                                                        */
/* ============================================================= */

footer {
    padding-top: 10px;

    padding-bottom: 20px;

    color: #777777;

    font-size: 14px;
}


/* ============================================================= */
/* EARLY NAVBAR COLLAPSE                                         */
/* ============================================================= */

/*
    Bootstrap 3 normally waits until 767px to collapse.

    Your navbar contains enough links that it can become crowded
    well before that.

    These rules switch to the hamburger menu at 1080px.
*/

@media (max-width: 1080px) {

    .portfolio-navbar .navbar-header {
        float: none;
    }


    .portfolio-navbar .navbar-toggle {
        display: block;
    }


    .portfolio-navbar .navbar-collapse {
        border-top:
            1px solid transparent;

        box-shadow:
            inset 0 1px 0
            rgba(255, 255, 255, 0.10);
    }


    .portfolio-navbar .navbar-collapse.collapse {
        display: none !important;
    }


    .portfolio-navbar
    .navbar-collapse.collapse.in {
        display: block !important;
    }


    .portfolio-navbar .navbar-nav {
        float: none !important;

        margin:
            7.5px -15px;
    }


    .portfolio-navbar
    .navbar-nav > li {
        float: none;
    }


    .portfolio-navbar
    .navbar-nav > li > a {
        padding-top: 10px;

        padding-bottom: 10px;

        font-size: 14px;
    }


    .portfolio-navbar .collapsing {
        overflow: hidden !important;
    }

}


/* ============================================================= */
/* TABLET                                                        */
/* ============================================================= */

@media (max-width: 991px) {

    .section-photo-wide {
        height: 210px;
    }


    .about-photo {
        height: 300px;
    }


    .project-split {
        gap: 22px;
    }


    .project-visual {
        flex-basis: 42%;

        max-width: 42%;
    }


    .experience-split {
        gap: 22px;
    }


    .experience-visual {
        flex-basis: 40%;

        max-width: 40%;
    }

}


/* ============================================================= */
/* MOBILE                                                        */
/* ============================================================= */

@media (max-width: 767px) {

    /* --------------------------------------------------------- */
    /* NAVBAR                                                    */
    /* --------------------------------------------------------- */

    .portfolio-navbar .navbar-brand {
        max-width:
            calc(100% - 70px);

        overflow: hidden;

        text-overflow: ellipsis;

        font-size: 14px;
    }


    /* --------------------------------------------------------- */
    /* HERO                                                      */
    /* --------------------------------------------------------- */

    .hero-section {
        padding:
            25px 20px;

        text-align: center;
    }


    .hero-headshot {
        width: 175px;

        height: 175px;

        object-position:
            center 20%;

        margin-bottom: 20px;
    }


    .hero-text {
        padding-top: 0;

        text-align: center;
    }


    .hero-text h1 {
        font-size: 36px;
    }


    .hero-text h3 {
        font-size: 20px;

        line-height: 1.4;
    }


    /* --------------------------------------------------------- */
    /* HERO CONTACT                                              */
    /* --------------------------------------------------------- */

    .hero-contact {
        flex-direction: column;

        justify-content: center;

        gap: 12px;
    }


    .contact-info {
        justify-content: center;
    }


    .resume-action {
        margin-left: 0;
    }


    /* --------------------------------------------------------- */
    /* BANNERS                                                   */
    /* --------------------------------------------------------- */

    .section-photo-wide {
        height: 190px;
    }


    .about-photo {
        height: 270px;
    }


    /* --------------------------------------------------------- */
    /* PROJECTS                                                  */
    /* --------------------------------------------------------- */

    .project-image {
        width: 95%;

        max-height: 325px;
    }


    .project-split {
        flex-direction: column;

        align-items: stretch;

        gap: 20px;
    }


    .project-visual,
    .project-copy {
        flex: none;

        width: 100%;

        max-width: 100%;
    }


    .project-side-image {
        max-width: 500px;

        max-height: 280px;
    }


    /* --------------------------------------------------------- */
    /* EXPERIENCE                                                */
    /* --------------------------------------------------------- */

    .experience-split {
        flex-direction: column;

        align-items: stretch;

        gap: 20px;
    }


    .experience-copy,
    .experience-visual {
        flex: none;

        width: 100%;

        max-width: 100%;
    }


    .experience-photo {
        max-width: 500px;

        max-height: 260px;
    }


    /* --------------------------------------------------------- */
    /* EDUCATION                                                 */
    /* --------------------------------------------------------- */

    .education-photo {
        max-width: 300px;

        max-height: 210px;
    }


    /* --------------------------------------------------------- */
    /* EXPERIENCE DATES                                          */
    /* --------------------------------------------------------- */

    .panel-body .text-right {
        padding-top: 0;

        margin-top: 5px;

        margin-bottom: 15px;

        text-align: left;
    }


    /* --------------------------------------------------------- */
    /* BACK TO TOP                                               */
    /* --------------------------------------------------------- */

    .back-to-top-container {
        text-align: center;
    }


    /* --------------------------------------------------------- */
    /* PANEL                                                     */
    /* --------------------------------------------------------- */

    .panel-body {
        padding: 20px;
    }

}


/* ============================================================= */
/* SMALL PHONES                                                  */
/* ============================================================= */

@media (max-width: 480px) {

    .hero-section {
        padding:
            20px 15px;
    }


    .hero-headshot {
        width: 150px;

        height: 150px;
    }


    .hero-text h1 {
        font-size: 30px;
    }


    .hero-text h3 {
        font-size: 18px;
    }


    .hero-text p {
        font-size: 15px;
    }


    /* CONTACT */

    .contact-info {
        flex-direction: column;

        gap: 4px;
    }


    .contact-divider {
        display: none;
    }


    /* BANNERS */

    .section-photo-wide {
        height: 160px;
    }


    .about-photo {
        height: 220px;
    }


    /* PROJECTS */

    .project-image {
        width: 100%;

        max-height: 280px;
    }


    .project-side-image {
        width: 100%;

        max-height: 230px;
    }


    /* EXPERIENCE */

    .experience-photo {
        width: 100%;

        max-height: 220px;
    }


    /* CONTACT SUMMARY */

    .contact-summary {
        flex-direction: column;

        align-items: center;

        gap: 16px;
    }


    /* PANELS */

    .panel-title {
        font-size: 18px;
    }


    .panel-body {
        padding: 15px;

        font-size: 15px;
    }

}