/*
Greg Damm | Designer | Leader | Master Builder | Good Human
https://www.dammcreative.com
*/

/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
@import "dammcreative-base-images-I.css"screen and (min-width: 992px);
@import "dammcreative-base-images-II.css"screen and (min-width: 992px);


:root {
    --white-color: #FFFFFF;
    --gray-1-color: #D4D4D4;
    --gray-2-color: #AAAAAA;
    --gray-3-color: #808080;
    --gray-4-color: #555555;
    --gray-5-color: #2B2B2B;
    --gray-6-color: #1D1D1D;
    --gray-7-color: #0E0E0E;
    --black-color: #000000;
    --orangeKite-color: #FF3333;
    --kite-1-color: #CC3333;
    --kite-2-color: #993333;
    --kite-3-color: #801A1A;
    --kite-4-color: #660000;
    --kite-5-color: #330000;
    --orangeKite-invert-color: #00CCCC;
    --section-bg-color: #555555;
    --bright-accent-color: #F2CC8F;
    --secondary-color: #8ECAE6;
    --secondary-lighter: #023047;
    --custom-btn-bg-color: #FFB703;
    --link-color: #F2CC8F;
    --link-hover-color: #F2CC8F;
    --custom-btn-bg-hover-color: #F2CC8F;
    --p-color: #0E0E0E;
    --body-font-family: 'Oswald', sans-serif;
    --handwrite-font-family: 'Ankehand', cursive;
    --negative-font-family: 'OCRAStd', OCR-ext, monospace;
    --h1-font-size: 2.488rem;
    --h2-font-size: 2.074rem;
    --h3-font-size: 1.728rem;
    --h4-font-size: 1.44rem;
    --h5-font-size: 1.2rem;
    --h6-font-size: 1rem;
    --h7-font-size: 0.833rem;
    --h8-font-size: 0.694rem;
    --p-font-size: 1rem;
    --menu-font-size: 0.833rem;
    --btn-font-size: 0.833rem;
    --copyright-font-size: 0.694rem;
    --border-radius-large: 100px;
    --border-radius-medium: 20px;
    --border-radius-small: 10px;
    --font-weight-normal: 200;
    --font-weight-medium: 300;
    --font-weight-bold: 400;
    --font-weight-extra-bold: 500;
    --gregDammHighlightFilmsFB: url('../images/gregDammHighlightFilmsFB.png');
    --gregDammHighlightFilmsSM: url('../images/gregDammHighlightFilmsSM.png');
    --gregDammHighlightFilmsMB: url('../images/gregDammHighlightFilmsMB.png');
    --portfolioGregDammFB: url('../images/portfolioGregDammFB.png');
    --portfolioGregDammSM: url('../images/portfolioGregDammSM.png');
    --contactGregDamm: url('../images/contactGregDamm.svg');
    --contactGregDammFB: url('../images/contactGregDammFB.png');
    --contactGregDammSM: url('../images/contactGregDammSM.png');
    --contactGregDammKite: url('../images/contactGregDammKite.svg');
    --gregDammResume: url('../images/gregDammResume.svg');
    --gregDammResumeFB: url('../images/gregDammResumeFB.png');
    --gregDammResumeSM: url('../images/gregDammResumeSM.png');

    /*---------------------------------------
       LIGHT SWITCH CUSTOM GLOBAL CLASSES
    ----------------------------------------*/
    --bg-primary-light: #f5f5f5;
    --heading-primary-light: #f5f5f5;
    --bg-secondary-light: #e0e0e0;
    --text-primary-light: #000000;
    --accent-light: #00a8cc;
    --tooltip-bg-light: rgba(50, 50, 50, 0.8);
    --ripple-light: rgba(255, 255, 255, 0.3);

    --bg-primary-dark: #121212;
    --text-primary-dark: rgba(255, 255, 255, 0.8);
    --accent-dark: #00CCCC;
    --accent-dark-hover: #00e6e6;
}

/*---------------------------------------
   DAMM CREATIVE CUSTOM GLOBAL CLASSES        
----------------------------------------*/


/*-- VIDEO EMBEDS --*/

video {
    max-width: 90%;
    height: auto;
    display: block;
    margin: 20 auto;
}

/*-- STICKY FOOTER --*/

html,
body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100%;
    overflow: hidden;
}

.page-header,
.page-footer {
    flex-grow: 0;
    flex-shrink: 0;
}

.page-body {
    flex-grow: 1;
}

/*-- STICKY FOOTER ADDITIONS --*/

body {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-normal);
    color: var(--white-color);
    background-color: var(--black-color);
}

a {
    text-decoration: none;
}

html {
    font-size: calc(15px + .390625vw);
}

/*---------------------------------------
        GREG DAMM CREATIVE TYPOGRAPHY          
----------------------------------------*/

.handwritingFont {
    font-family: var(--handwrite-font-family);
}

.negativeFont {
    font-family: var(--negative-font-family, OCR-ext);
    font-variant-numeric: slashed-zero;
}

.resumeFont {
    font-family: var(--body-font-family);
}

/*---------------------------------------
  GREG DAMM CREATIVE DESIGN FLOURISHES          
----------------------------------------*/

.opac90 {
    filter: opacity(.9);
}

.opac80 {
    filter: opacity(.8);
}

.opac70 {
    filter: opacity(.7);
}

.opac60 {
    filter: opacity(.6);
}

.opac50 {
    filter: opacity(.5);
}

.opac40 {
    filter: opacity(.4);
}

.opac30 {
    filter: opacity(.3);
}

.opac20 {
    filter: opacity(.2);
}

.opac10 {
    filter: opacity(.1);
}

.opac0 {
    filter: opacity(.0);
}

/*---------------------------------------
            CONTACT ME BUTTON               
-----------------------------------------*/

.custom-btn {
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-medium);
    line-height: normal;
    padding-right: calc(6px + 1.525vw);
    padding-left: calc(6px + 1.525vw);
    transition: all .3s;
    color: var(--bright-accent-color);
    border: 2px solid var(--bright-accent-color);
    border-radius: var(--border-radius-large);
    background-color: rgba(91, 2, 2, .2);
    background-blend-mode: multiply;
}

.contact-section .custom-btn {
    font-size: var(--h5-font-size);
    font-weight: var(--font-weight-medium);
    margin-top: calc(4px + .525vw);
    margin-bottom: calc(4px + .525vw);
}

.custom-btn:hover {
    color: var(--black-color);
    background: var(--custom-btn-bg-hover-color);
}

.custom-border-btn:hover {
    color: var(--white-color);
    border-color: transparent;
    background: var(--custom-btn-bg-color);
}

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

.up-button {
    position: fixed;
    z-index: 500;
    top: 3vh;
    right: 2vw;
    display: flex;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    border-radius: var(--border-radius-large);
    background-color: rgba(255, 255, 255, .2);
    justify-content: center;
    align-items: baseline;
}

.up-button img {
    width: 1.6rem;
    height: auto;
    margin-top: .5rem;
    object-fit: cover;
    filter: opacity(.85);
}

.up-button:hover {
    transition: .1s ease-in;
    transform: rotate(3deg);
    background-color: rgba(142, 202, 230, .8);
}


/*---------------------------------------
            NAVIGATION BAR              
-----------------------------------------*/

/*-- SMALL | navbar | - UP-TO tablets --*/

.navbar {
    padding-top: calc(8px + 1.5625vh);
    padding-bottom: calc(0px + 1vh);
    padding-right: calc(0px + 1vw);
    padding-left: calc(4px + 1vw);
    background-color: transparent;
    box-shadow: 1px 1px 1px rgba(151, 51, 51, .2);
    align-content: baseline;
    background-blend-mode: difference;
    z-index: 99;
}

/*-- BIG | navbar | - tablets AND-UP --*/

@media (min-width:992px) {
    .navbar {
        padding-right: calc(2rem + 1.5vw);
        padding-left: calc(2rem + 1.5vw);
    }
}

.navbar-brand-image {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: -.75rem;
    margin-right: calc(8px + 1.5625vw);
    filter: opacity(.3) invert(1);
}

.navbar-bg-image {
    background: url("../images/filmBG1600.png");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.navbar-shadow {
    filter: drop-shadow(0rem 1rem 1rem rgba(204, 204, 0, .1));
}

.navbar-brand-text {
    font-family: var(--handwrite-font-family);
    font-size: var(--h4-font-size);
    font-weight: var(--font-weight-normal);
    line-height: normal;
    color: var(--orangeKite-color);
    filter: drop-shadow(0 0 2rem rgba(204, 204, 0, .8));
    filter: opacity(.4);
    flex-wrap: nowrap;
}

.navbar-nav .nav-link {
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-normal);
    line-height: normal;
    display: block;
    margin: .5rem;
    padding: .5rem;
    color: var(--white-color);
}

.navbar-nav .nav-link:hover {
    color: var(--link-hover-color);
}

.navbar-nav .nav-link.active {
    color: var(--white-color);
}

.navbar .dropdown-menu {
    display: inherit;
    min-width: fit-content;
    margin-top: .75rem;
    padding: .5rem;
    transition: all .3s;
    pointer-events: none;
    opacity: 0;
    border: 0;
    background: var(--white-color);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
}

.navbar .dropdown-menu::before {
    position: relative;
    width: 0;
    height: 0;
    content: '';
    border-right: 20px solid transparent;
    border-bottom: 15px solid var(--white-color);
    border-left: 20px solid transparent;
}

.navbar .dropdown-item {
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-medium);
    position: relative;
    display: inline-block;
    color: var(--p-color);
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:hover {
    color: var(--link-hover-color);
    background: transparent;
}

.navbar .dropdown-toggle::after {
    font-family: 'bootstrap-icons' !important;
    font-size: var(--copyright-font-size);
    font-weight: normal !important;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: relative;
    left: .1rem;
    content: '\f282';
    vertical-align: -.125em;
    text-transform: none;
    border: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.navbar-toggler {
    width: 30px;
    height: 35px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border: 0;
    outline: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler[aria-expanded='true'] .navbar-toggler-icon {
    background: transparent;
}

.navbar-toggler[aria-expanded='true'] .navbar-toggler-icon:before,
.navbar-toggler[aria-expanded='true'] .navbar-toggler-icon:after {
    top: 0;
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease,
        -webkit-transform 300ms 350ms ease;
}

.navbar-toggler[aria-expanded='true'] .navbar-toggler-icon:before {
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded='true'] .navbar-toggler-icon:after {
    transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 2px;
    transition: background 10ms 300ms ease;
    background: var(--white-color);
}

.navbar-toggler .navbar-toggler-icon:before,
.navbar-toggler .navbar-toggler-icon:after {
    position: absolute;
    right: 0;
    left: 0;
    width: 30px;
    height: 2px;
    content: '';
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease,
        -webkit-transform 300ms 50ms ease;
    background: var(--white-color);
}

.navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
}

/*---------------------------------------
          SECTION BACKGROUNDS
-----------------------------------------*/

.section-title {
    font-family: var(--negative-font-family);
    font-size: calc(1.475rem + 2.7vw);
    padding: calc(18px + 1.5625vw);
    font-variant-numeric: slashed-zero;
}

.section-pad {
    padding: calc(18px + 1.5625vw);
}


/*-- || [hero only] || EXTRA SMALL | - iPhones portrait --*/

.hero-bg-img {
    background-image: var(--gregDammHighlightFilmsMB, gray);
    background-position: top left;
    background-size: cover;
    background-origin: content-box;
    background-attachment: scroll;
}


/*-- || [hero only] || MEDIUM | - iPhone landscape --*/

@media (min-width:576px) {
    .hero-bg-img {
        background-image: var(--gregDammHighlightFilmsMB, gray);
        background-size: cover;
        background-origin: border-box;
    }
}


/*-- SMALL | for rest of section bg-imgs | - UP-TO tablets --*/

.portfolio-bg-image {
    background-image: linear-gradient(rgba(91, 2, 2, .9) 0%, rgba(91, 2, 2, .3) 100%, transparent),
        var(--portfolioGregDammFB, blue);
    background-position: center, 60% 30%;
    background-size: cover, 300%;
}

.contact-bg-image {
    background-image: var(--contactGregDamm, var(--contactGregDammSM, transparent)),
        linear-gradient(rgba(7, 24, 78, .4) 0%, rgba(7, 24, 78, .1) 100%, transparent),
        var(--contactGregDammKite);
    background-position: 15% 15%, center, 35% 30%;
    background-size: 350%, cover, 200%;
}


.resume-bg-image {
    background-image: linear-gradient(rgba(33, 158, 188, .9) 0%, rgba(33, 158, 188, .3) 100%, transparent),
        var(--gregDammResume, var(--gregDammResumeSM, transparent));
    background-position: center, 20% 50%;
    background-size: cover, 150%;
}


/*-- || [contact only] || MEDIUM | - iPad --*/

@media (min-width:768px) {

    .contact-bg-image {
        background-image: var(--contactGregDamm, var(--contactGregDammFB, transparent)),
            linear-gradient(rgba(7, 24, 78, .4) 0%, rgba(7, 24, 78, .4) 100%, transparent),
            var(--contactGregDammKite);
        background-position: 20%, center, 125%;
        background-size: cover, cover, 120%;
    }

}


/*-- BIG | for rest of section bg-imgs | - tablets AND-UP --*/

@media (min-width:992px) {

    .hero-bg-img {
        background-image: var(--gregDammHighlightFilms, var(--gregDammHighlightFilmsFB, gray)),
            /*--top right corner gradient light*/
            radial-gradient(25% 50% at 80% 30%, rgba(230, 255, 255, .3) 30%, transparent),
            /*--bottom left  corner gradient light*/
            radial-gradient(25% 50% at 20% 70%, rgba(230, 255, 255, .4) 30%, transparent);
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }

    .portfolio-bg-image {
        background-image: linear-gradient(rgba(91, 2, 2, .9) 0%, rgba(91, 2, 2, .3) 100%, transparent),
            var(--portfolioGregDamm, var(--portfolioGregDammFB, blue));
        background-position: center;
        background-size: cover;
    }

    .resume-bg-image {
        background-image: linear-gradient(rgba(33, 158, 188, .9) 0%, rgba(33, 158, 188, .3) 100%, transparent),
            var(--gregDammResume, var(--gregDammResumeFB, transparent));
        background-position: center;
        background-size: cover;
    }
}

/*-- HERO SECTION BG --*/

.hero-section {
    position: relative;
    box-sizing: border-box;
    height: fit-content;
    background-color: var(--black-color);
}

.hero-bg-img {
    background-repeat: no-repeat;
    filter: opacity(0.85);
}

/*-- PORTFOLIO SECTION BG --*/

.portfolio-section {
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: var(--gray-6-color);
}

.portfolio-bg-image {
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: opacity(.85);
}

/*-- CONTACT SECTION BG --*/

.contact-section {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
    background-color: var(--gray-6-color);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: stretch;
}

.contact-bg-image {
    position: relative;
    background-repeat: no-repeat;
    filter: opacity(.85);
    align-self: center;
}

svg.contactGregDammKite {
    fill: var(--white-color);
    filter: opacity(.5);
}

/*-- RESUME SECTION BG --*/

.resume-section {
    position: relative;
    box-sizing: border-box;
    height: fit-content;
    background-color: var(--gray-7-color);
}

.resume-bg-image {
    position: relative;
    background-repeat: no-repeat;
    background-position-y: 35%;
    background-blend-mode: hard-light, difference;
    font-family: var(--body-font-family);
}

/*---------------------------------------
        HERO SECTION SPECIFICS
-----------------------------------------*/

/*-- SMALL | hero-content-wrapper | - UP-TO tablets --*/

.hero-content-wrapper {
    height: fit-content;
    width: 100vw;
    padding-top: calc(8px + 1.5625vw);
    padding-right: calc(32px + 1.5625vw);
    padding-left: calc(32px + 1.5625vw);
    background-color: var(--gray-7-color);
    box-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
}

/*-- BIG | hero-content-wrapper | - tablets AND-UP --*/

@media (min-width: 992px) {
    .hero-content-wrapper {
        width: 82vw;
    }
}

/*-- SMALL | hero-window | - UP-TO tablets --*/

.hero-window {
    width: auto;
    height: 20vh;
    filter: drop-shadow(0 0 2rem rgba(204, 204, 0, .5));
    margin-top: 0px;
    margin-bottom: 1.5rem;
    box-shadow: 1px 1px 1px rgba(255, 255, 255, .5);
}

/*-- BIG | hero-window | - tablets AND-UP --*/

@media (min-width: 992px) {
    .hero-window {
        width: auto;
        height: 50vh;
        margin-top: calc(50px + 1.5625vw);
        margin-bottom: 0px;

    }
}

.playerCoach {
    /*  excelente - according to my direct reports anyway ;-)  */
    font-family: var(--negative-font-family);
    padding-top: calc(4px + 1vh);
    padding-bottom: calc(18px + 1.725vh);
    -webkit-animation: animated_text 10s ease-in-out infinite;
    -moz-animation: animated_text 10s ease-in-out infinite;
    animation: animated_text 10s ease-in-out infinite;
    /*--shimmer/focus color recipe */
    background: linear-gradient(-45deg, #1d1d1d, #1d1d1d, #2b2b2b, #2b2b2b);
    -webkit-background-clip: text;
    background-size: 300%;
    font-variant-numeric: slashed-zero;
    -webkit-text-fill-color: transparent;
}

@keyframes animated_text {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

.greetingsFriend {
    font-family: var(--handwrite-font-family);
    font-size: var(--h1-font-size);
    padding-top: calc(18px + 2vh);
    padding-bottom: calc(18px + 2.725vh);
    color: var(--gray-1-color);
}

.gregDammMission {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-medium);
    padding-top: calc(18px + 3vh);
    padding-bottom: calc(18px + 4vh);
    color: var(--gray-1-color);
}

.humanCenteredDesignGuy {
    font-weight: var(--font-weight-normal);
    line-height: 1;
    padding-top: calc(18px + 3vh);
    padding-bottom: calc(18px + 1.725vh);
    color: var(--orangeKite-color);
    filter: opacity(.3) invert(1);
    background-blend-mode: lighten;
}

/*---------------------------------------
      PORTFOLIO SECTION SPECIFICS        
-----------------------------------------*/

.card {
    border: 0;
}

.slide-bg-img {
    border: 1px;
    border-color: gray;
    filter: invert(1) opacity(.6);
}

.slide-title {
    font-family: var(--handwrite-font-family);
    font-weight: var(--font-weight-medium);
    padding-top: .5em;
    text-align: center;
    color: var(--kite-5-color);
    filter: invert(1) opacity(.8);
}

.slide-text {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-medium);
    padding-right: calc(20px + 5vw);
    padding-left: calc(20px + 5vw);
    text-align: center;
    color: var(--kite-3-color);
    filter: opacity(.7) invert(1);
}

.slide-footer {
    font-family: var(--body-font-family);
    font-weight: var(--font-weight-normal);
    font-style: italic;
    text-align: center;
    color: var(--white-color);
    filter: opacity(.7);
    padding-bottom: .25rem;

}

.portfolio-note {
    font-weight: var(--font-weight-normal);
    position: relative;
    text-align: center;
    color: var(--gray-2-color);
    background-color: rgba(91, 2, 2, .5);
    background-image: url('../images/35mmPostage.svg');
    background-size: cover;
    box-shadow: inset 0rem 0rem 1rem rgba(91, 2, 2, .8);
    background-blend-mode: color-burn;
}

.portfolio-note a {
    color: var(--orangeKite-invert-color);
}

/*---------------------------------------
      CONTACT SECTION SPECIFICS        
-----------------------------------------*/

.input-container {
    width: 100%;
}

.box-modal__container {
    position: fixed;
    z-index: 10000;
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 0rem .7rem;
    justify-content: center;
    align-items: center;
}

.box-modal {
    position: relative;
    z-index: 10000;
    width: 400px;
    background: rgb(209, 209, 209);
}

.box-modal img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.box-modal__content {
    display: flex;
    width: fit-content;
    min-height: 53vh;
    padding: 0rem 1.4rem;
    color: rgb(49, 177, 30);
    justify-content: center;
    align-items: center;
}

.skill-pill {
    font-weight: var(--font-weight-bold);
    overflow: auto;
    max-height: calc(100px + 1.5625vw);
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    border: var(--white-color);
    box-shadow: inset 0 -1rem 1rem 0 rgba(99, 99, 99, .9);
    filter: opacity(.3) invert(1);
    mix-blend-mode: hard-light;
}

/*------------ CONTACT FORM ------------*/

.contact-form {
    margin-bottom: calc(8px + 1.5625vh);
    color: var(--gray-3-color);
    padding: calc(-2px + 1.5625vh);
    border-radius: var(--border-radius-small);
    filter: opacity(.9);
}

/*---------------------------------------
      RESUME SECTION SPECIFICS        
-----------------------------------------*/

.resume-box {
    padding: .25rem;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--border-radius-large);
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.top-round {
    border-bottom: 0;
    border-start-start-radius: 1rem;
    border-start-end-radius: 1rem;
}

/*-- SMALL | top-flat | - UP-TO tablets --*/

.top-flat {
    border-top: 0;
    margin-top: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}


/*-- BIG | top-flat (splits into 2 columns and becomes rounded)|  --*/

@media (min-width:992px) {
    .top-flat {
        margin-top: 1.5rem;
    }
}

.bottom-round {
    border-end-start-radius: 1rem;
    border-end-end-radius: 1rem;
}

.bottom-flat {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}


.resume-box ul {
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 1rem;
    padding-right: 1rem;
    list-style: none;
}

.resume-box li {
    position: relative;
    margin: 0 0 .5rem;
    padding: 0 .5rem 0 3rem;
}

.resume-box li:first-child {
    margin-top: 1rem;

}

.resume-box li:last-child {
    margin-bottom: 0rem;
}

.resume-box li:after {
    position: absolute;
    top: .5rem;
    bottom: 0;
    left: 1rem;
    content: '';
    border-left: 1px dashed var(--orangeKite-color);
}

.resume-box .icon {
    line-height: 2rem;
    position: absolute;
    z-index: 1;
    right: 0;
    left: 0;
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-small);
    background: rgba(255, 255, 255, .5);
    align-items: center;
    justify-content: center;
}

.resume-box svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: #023047;
}

.resume-box .icon.dammIconActive {
    background: rgba(255, 255, 255, .8);

}

.resume-box .icon.dammIconActive svg {
    width: 3rem;
    height: 3rem;
    background: transparent;
    fill: var(--kite-1-color);
}

.resume-box .icon.dammIconOrigins {
    background: rgba(255, 255, 255, .6);
}

.resume-box .icon.dammIconOrigins svg {
    width: 2rem;
    height: 2rem;
    background: transparent;
    fill: var(--kite-2-color);
}

.resume-box .time.current {
    filter: opacity(.7);
    font-weight: var(--font-weight-extra-bold);
}

.resume-box .icon.iconArrowBottom {
    font-size: 1.5rem;
    padding-top: 1rem;
    color: var(--orangeKite-color);
    background: transparent;
    filter: opacity(.6);
    margin-top: -2rem;

}

.resume-box .time {
    font-size: var(--copyright-font-size);
    font-weight: var(--font-weight-bold);
    display: inline-block;
    margin-bottom: .5rem;
    margin-left: -.25rem;
    padding: .15rem .5rem;
    color: #ffffff;
    border-radius: var(--border-radius-large);
    background: var(--orangeKite-color);
    filter: opacity(.7);
}

.resume-box h5 {
    font-size: var(--h6-font-size);
    font-weight: var(--font-weight-medium);
    margin-bottom: .25rem;
    color: var(--secondary-color);
    filter: saturate(90%);
}

.resume-box p {
    font-size: var(--p-font-size);
    font-weight: var(--font-weight-medium);
    color: var(--secondary-lighter);
}

/*---------------------------------------
             SITE FOOTER        
-----------------------------------------*/

footer {
    position: bottom;
    min-height: fit-content;
    padding: 1.2rem 2rem;
}

.footer-bg-image {
    background: url('../images/filmBG1600.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top;
    background-blend-mode: lighten;
}

.footer-copyright {
    font-size: var(--copyright-font-size);
    width: 100%;
}

.btn_active{
    background-color: rgba(0,204,204,0.7) !important;
    border: 1px solid rgba(0,204,204,0.7) !important;
    cursor: pointer !important;
}

.font_active{
    color:rgba(0,204,204,0.7) !important;
}

@media (max-width: 700px) {
    .col {
        flex: auto !important;

    }
}

/*---------------------------------------
         TOOLTIP AND LIGHT SWITCH
-----------------------------------------*/

.light-theme {
    background-color: var(--bg-primary-light);
    color: var(--text-primary-light);
}

.light-theme header,
.light-theme footer {
    background-color: var(--bg-secondary-light);
}

.dark-theme header,
.dark-theme footer {
    background-color: var(--bg-primary-dark);
}

.light-theme .footer-copyright a{
    color: var(--accent-light);
}

.light-theme section p {
    color: var(--accent-light);
}

.light-theme header p {
    color: var(--tooltip-bg-light);
    font-size: 20px;
    font-weight: 600;
}

.light-theme h1 {
    color: var(--heading-primary-light);
}

.dark-theme {
    background-color: var(--bg-primary-dark);
    color: var(--text-primary-dark);
}

.dark-theme header p {
    color: var(--text-primary-dark);
    font-size: 20px;
    font-weight: 600;
}

.light-theme .navbar-brand-text {
    color: var(--heading-primary-light);
}

.tooltip {
    position: fixed;
    background-color:rgba(245, 209, 40, 0.5);
    color: #000000;
    font-size: 14px;
    display: block;
    pointer-events: none;
    z-index: 10;
    transition: left 0.2s, top 0.2s;
    width: 300px;
    height: 150px;
    padding: 15px;
}

.animated {
    opacity: 1;
    animation: fadeIn 0.5s ease-out;
}

@media (max-width: 768px) {
    .tooltip {
        font-size: 12px;
        max-width: 200px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.tooltip-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: tooltipRippleEffect 0.6s ease-out;
    pointer-events: none;
    background: var(--ripple-light);
}

.dark-theme .tooltip-ripple {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes tooltipRippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 1;
    background: var(--ripple-light);
}

.dark-theme .ripple {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes rippleEffect {
    to {
        transform: scale(8);
        opacity: 0;
    }
}

#lightSwitch {
    position: fixed;
    bottom: 20px;
    right: 41px;
    width: 60px;
    height: 90px;
    cursor: pointer;
    z-index: 1000;
    transition: transform 0.3s, box-shadow 0.3s;
    filter: opacity(0.85);
}

#lightSwitch:hover {
    transform: scale(1.1);
}

#lightSwitch img {
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}

#lightSwitch:hover img {
    transform: scale(1.1);
}

.light-theme .gallery img:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

.dark-theme .gallery img:hover {
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.2);
    filter: brightness(0.9);
}

.fit-content {
    width: fit-content;
}