:root {
    --bs-primary: #54d7f3;
    --bs-primary-rgb: 84,215,243;
    --bs-secondary: #408697;
    --bs-secondary-rgb: 64,134,151;
    --bs-info: #8D8C8A;
    --bs-info-rgb: 141,140,138;
    --bs-light: #f6f6f6;
    --bs-light-rgb: 246,246,246;
    --bs-dark: #212529;
    --bs-dark-rgb: 33,37,41;
    --bs-success: #4ebb81;
    --bs-success-rgb: 78,187,129;
    --bs-warning: #ccab49;
    --bs-warning-rgb: 204,171,73;
    --bs-danger: #f44336;
    --bs-danger-rgb: 244,67,54;
    --bg-parallax-position: 0px;
}

body {
    position: relative;
    background-color: var(--bs-dark);
    color:var(--bs-light);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.text-muted {
    color:var(--bs-light);
}

a {
    text-decoration: none;
    color:var(--bs-primary);
}

/* Putting an image into the background of the header */
.header_background_image {
    position:absolute;
    z-index:-1;
    height:141vh;
    background-image:url(/img/header-bg.jpg);
    width:100%;
    background-size:cover;
    
    /* background-attachment: scroll; */
}

.header_background_image_gray {
    filter:grayscale(1);
}

.header_background_image.active {
    opacity: 1;
}

.header_background_image.inactive {
    opacity: 0;

}

.header_background_image.active,
.header_background_image.inactive {
    transition: opacity 2.5s ease-in-out;
}

@supports ( -webkit-touch-callout : none) {
    .header_background_image {
        background-attachment:scroll
    }
}
    
@supports not ( -webkit-touch-callout : none) {
    .header_background_image {
        background-attachment: fixed;
    }
}

/* Positioning a header container at 60% of the screen height */
.header {
    position:relative;  
    height:60vh;
    color:var(--bs-light);
    text-shadow: 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark);
}

/* Positioning the content of the header at the bottom of the header container */
/* The transition in the padding together with the padding for larger screens is to move the header content futher to the left on small screens */
.header-content {
    bottom:calc(-60vh + 8rem);
    position: relative;
    padding: 0 0 0 2rem;
    transition: padding-left .3s linear;
}

.header-content.blurred {
    /*padding-bottom: 0.6718749701976776rem;*/
    bottom:calc(-60vh + 10rem);
    padding-bottom: 1rem;
    padding-top: 0.5rem;
    background-color: rgba(var(--bs-dark-rgb), 0.2);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    
}

@media (min-width: 992px) {    
    .header-content{
        padding: 0 0 0 5rem;
    }
}

/* Styling for the primary heading in the header */
.header h2 {
    padding:0 0 1.5rem 0;
    font-size: 3rem;
    font-weight: bold;
    margin:0;
}

/* Styling for the secondary heading in the header */
.header h3 {
    padding:0;
    font-size: 1.5rem;
    margin:0;
}

/* Styling for the highlight in the headings in the header - underlining in primary color */
.header .highlight {
    color:var(--bs-white);
    padding-bottom: 3px;
    border-bottom: 2px solid var(--bs-primary)
}

/* The header that is intially below the header, but sticks to the top when the page is scrolled. */
/* While in the middle the background is transparent, but transistions to dark when the header is sticky */
/* see https://developers.google.com/web/updates/2017/09/sticky-headers */
nav{
    position:sticky;
    top:-1px;
    background-color:transparent;
    transition: all 0.5s ease;
    padding: 1rem 1rem 1rem 5rem; 
    color:var(--bs-light);
    text-shadow: 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark);
    z-index: 100;
}

/* On large screens when the header is sticky, the background transistions to dark. */
/* The isSticky class is set by JS */
/* On smaller screens the nav is shown as offcanvas */
@media (min-width: 992px) {    
    .isSticky{
        background-color:var(--bs-dark);
        transition: background-color 0.5s ease
    }
}

nav.blurred:not(.isSticky) {
    background-color: rgba(var(--bs-dark-rgb), 0.2);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


/* The following directives, style the navigation bar on larger screens. On small screens it is not shown as navbar, but offcanvas */
nav ul {
    list-style:none;
}

nav .container {
    margin-left:0;
    padding-left:0;
}

nav ul li:first-child a {
    margin-left:0;
    padding-left: 0 !important;
}


/* 
The navigation links are underlined when user hovers over them or when they become active (class .active added by scrollspy
The underlining is animated:
  - from left to right when scrolling down, so that it looks like progressing through them
  - from right to left then scrolling up, so it looks like progressing back to the start
  - from the middle when hovering over them         //TODO when leaving with mouse the revere anmiation is not from the middle
See: https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border
*/

.nav-link {
    color:var(--bs-light);
    display:inline-block;
    transition: color 0.3s ease;
    margin-right:.5rem;
}

.nav-link:focus, .nav-link:hover, .nav-link.active {
    color: var(--bs-white);
}

.nav-link:after {
    display:block;
    content: '';
    border-bottom: solid 2px var(--bs-primary);  
    transform: scaleX(0);  
    transition: transform 250ms ease-in-out;
    transform-origin: 100% 50%; 
}

.nav-link:hover:after {
    border-bottom: solid 2px var(--bs-primary);  
    transform: scaleX(1); 
    transform-origin: 50% 100%; 
}

.nav-link.active:after { 
    transform: scaleX(1); 
    transform-origin:  0% 50%;
}

.scrollingUp .nav-link:after{ 
    transform-origin: 0% 50%; 
}

.scrollingUp .nav-link:hover:after { 
    transform: scaleX(1); 
    transform-origin:   50% 100%; 
}

.scrollingUp .nav-link.active:after{ 
    transform: scaleX(1); 
    transform-origin:   100% 50%; 
}

/* On smaller screens the navbar is hidden and a hamburger menu button is shown instead */
.navbar-toggler {
    position: fixed;
    top:0.5rem;
    right:0.5rem;
    color:var(--bs-light) !important;
}     

.navbar-toggler .navbar-toggler-icon {
    color:var(--bs-light) !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><style>path{stroke:%2354d7f3;}</style><path stroke='%23f6f6f6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/></svg>");       
}

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


/* On smaller screens the hamburger menu button opens the main navigation as offcanvas at the right side of the screen */
.offcanvas.show {
    text-shadow: none !important;
}

.offcanvas.show .nav-link{
    padding-top: 0rem;
    padding-bottom: 0.6rem;
}

.offcanvas {
    background-color: var(--bs-dark);
}

.offcanvas-end {
    width:16rem !important;
}

.offcanvas-header .btn-close {
    color:var(--bs-light) !important;
    background: transparent url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2354d7f3'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") center/1em auto no-repeat;
    opacity: 1;
}

.offcanvas-header .btn-close:hover {
    opacity: 0.75;
}


/* On top of the navbar a thin progressbar is shown. It's width is set by a scroll handler in JS. */
body .progressContainer {
    left: 0;
    width: 100%;
    height: 0.1em;
    margin-bottom: 0px;
    position: fixed;
    top: 0px;
    overflow: hidden;
    background-color: transparent;
    content: "";
    display: table;
    table-layout: fixed;
    z-index: 999; 
}

body .progressBar {
    width: 0%;
    float: left;
    height: 100%;
    z-index: 99;
    max-width: 100%;
    background-color: var(--bs-primary);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease; 
}


/* Placeholder below the header before the first content section - just empty space to have a portion of the header background below the heading/navbar */
.header_filler {
    height:calc(80vh - 4.5rem);
    /* background: linear-gradient(to bottom, rgba(33,37,41, 0) 0%,rgba(33,37,41, 1) 75%, rgba(33,37,41, 1) 100%); */
}    
    


/* 
The site is structured in sections. On larger screens the left portion of a section holds the heading and is "sticky", 
while the right part holds the content and scrolls normally. On smaller screens the left secion is just pulled ahead and
shown above the content.
*/

section {
    display:block;
    position:relative;
    margin:0 !important;
    padding:0 !important;       
}

.left {
    vertical-align: middle;
    text-align: center;
    margin-top:auto;
    margin-bottom: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

}

.right {
    background-color:#cccccc;
    /* min-height: 100vh; TODO change on small screens ??? */
    padding-top: 5rem; 
    padding-bottom: 5rem;
}

.right.padded-section {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 992px) {
    section {
        padding:150px 0;
    }

    .left {
        height:100vh; 
        position:sticky; 
        float:left;
        top:0;
        z-index:10;
        background-size:cover;
        width:30%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .right {
        position:relative;
        width:70%;
        margin-left:30%;
        min-height: 100vh;
    }    

    .right.padded-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
}

/* 
Left and right side of a section are usually shown in different/contrasting colors. The following directives configure
background and font colors (incl. muted) for these color combinations.
*/
.left.bg-secondary, 
.right.bg-secondary,
.left.bg-secondary .icon-heading,
.right.bg-secondary .icon-heading {
    color:var(--bs-light);
}
 
.left.bg-secondary .text-muted, 
.right.bg-secondary .text-muted{
    color:var(--bs-light) !important;
    opacity: 0.9;
}


.left.bg-light {
    color:var(--bs-dark);
}

.right.bg-light {
    color:var(--bs-secondary);
}

.right.bg-light .text-muted{
    color:var(--bs-secondary) !important;
    opacity: 0.9;
}


.right.bg-dark {
    color:var(--bs-light);
}

.right.bg-dark .text-muted {
    color:var(--bs-light) !important;
    opacity: 0.85;
}

.right.bg-dark .icon-heading {
    color:var(--bs-primary);
}

.right.bg-info {
    color:var(--bs-light);
}

.right.bg-info .text-muted{
    color:var(--bs-light) !important;
    opacity: 0.9;
}


/* 
The left parts of the sections are holding the section title/heading and an icon. On larger screens more spacing is added as the 
left section is shown as full height of the screen. On smaller screens less spacing is used as it is more a traditional section header.
*/

.left .title {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


section .section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 1rem;
}

section .section-subheading {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    margin-bottom: 0.5rem;
    text-transform: none;
    /*font-family: 'Droid Serif','Helvetica Neue',Helvetica,Arial,sans-serif; */
    /* TODO font family */
}

section .section-icon {
    font-size: 4rem;
}

@media (min-width: 992px) {
    .left .title {
        height:calc(100vh);
        padding-top: 5rem;
    }
    
    section .section-subheading {
        margin-bottom: 75px;
    }
}


/* Flaticons are provided as font and therefore are handled in a similar way as text. */
.flaticon {
    display: inline-block;
    font: normal normal normal 14px/1 Flaticon;
    /*font-size: inherit;*/
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    /*-moz-osx-font-smoothing: grayscale;*/
    font-family: Flaticon;
    font-size: 1em;
    font-style: normal;  
}
  
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    display: inline-block;
    font: normal normal normal 14px/1 Flaticon;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;  
    font-family: Flaticon;
    font-size: 1em;
    font-style: normal;
    margin-left: 0em;
}
  
.flaticon-2x {
        font-size: 2em;
}

.flaticon-3x {
        font-size: 3em;
}

.flaticon-4x {
        font-size: 4em;
}

.flaticon-5x {
        font-size: 5em;
}

.flaticon-6x {
        font-size: 6em;
}


/* Social media links as shown are rounded 'buttons' in the about section and the footer */
ul.social-buttons {
    margin-bottom: 0; 
}

ul.social-buttons li a {
    font-size: 20px;
    line-height: 40px;
    display: block;
    width: 40px;
    height: 40px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    color: var(--bs-light);
    border-radius: 100%;
    outline: none;
    background-color: var(--bs-primary); 
}

ul.social-buttons li a:active, 
ul.social-buttons li a:focus, 
ul.social-buttons li a:hover {
    background-color: var(--bs-secondary); 
}



/* 
Section specific configuration for About section 
*/
@media (min-width: 992px) {
    /* On large screens add some additional padding to left and right portions to allow space for the photo to float over it */
    #about_section .right {
        padding-left: 62px;
    }
    #about_section .left {
        padding-right: 62px;
    }
}

.about_photo { 
    width: 120px;
}

#about_photo_float { 
    position: absolute;
    left:calc(100% - 60px);
    top:100px;
    z-index: 20;
}

.about-heading { /* same as more-heading */
    margin: 15px 0;
    text-transform: none; 
}



/* 
Section specific configuration for Timeline section - mainly taken over from themes
*/
.timeline {
    position: relative;
    padding: 0;
    list-style: none; 
}

.timeline:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 2px;
    margin-left: -1.5px;
    content: '';
    background-color: var(--bs-primary); 
}

.timeline > li {
    position: relative;
    min-height: 50px;
    margin-bottom: 50px; 
}

.timeline > li:after, 
.timeline > li:before {
    display: table;
    content: ' '; 
}

.timeline > li:after {
    clear: both; 
}

.timeline > li .timeline-panel {
    position: relative;
    float: right;
    width: 100%;
    padding: 0 20px 0 100px;
    text-align: left; 
}

.timeline > li .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0; 
}

.timeline > li .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0; 
}

.timeline > li .timeline-image {
    position: absolute;
    /*z-index: 100;*/
    left: 0;
    width: 80px;
    height: 80px;
    margin-left: 0;
    text-align: center;
    color: var(--bs-light);
    border: 7px solid var(--bs-primary);
    border-radius: 100%;
    background-color: var(--bs-primary); 
    border-width: 3px;
    transition: border .4s ease-in-out;
}

.timeline > li .timeline-image h4 {
    font-size: 10px;
    line-height: 14px;
    margin-top: 12px; 
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
    padding: 0 20px 0 100px;
    text-align: left; 
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0; 
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0; 
}

.timeline > li:last-child {
    margin-bottom: 0; 
    min-height: inherit;
}

.timeline .timeline-heading h4 {
    margin-top: 0;
    color: inherit; 
}

.timeline .timeline-heading h4.subheading {
    text-transform: none; 
}

.timeline .timeline-body > ul,
.timeline .timeline-body > p {
    margin-bottom: 0; 
}
  
@media (min-width: 768px) {
    .timeline:before {
        left: 50%; 
    }
    
    .timeline > li {
        min-height: 100px;
        /*
        margin-bottom: 100px; 
        */
        margin-bottom:50px;

    }
    
    .timeline > li .timeline-panel {
        float: left;
        width: 41%;
        padding: 0 20px 20px 30px;
        text-align: right; 
    }
    
    .timeline > li .timeline-image {
        left: 50%;
        /*
        width: 100px;
        height: 100px;
        margin-left: -50px; 
        */
        width: 90px;
        height: 90px;
        margin-left: -45px;

    }
    
    .timeline > li .timeline-image h4 {
        font-size: 13px;
        line-height: 18px;
        margin-top: 16px; 
    }
    
    .timeline > li.timeline-inverted > .timeline-panel {
        float: right;
        padding: 0 30px 20px 20px;
        text-align: left; 
    } 
}
  
@media (min-width: 992px) {
    .timeline > li {
        min-height: 150px; 
    }
    .timeline > li .timeline-panel {
        padding: 0 20px 20px; 
    }
    .timeline > li .timeline-image {
        /*
        width: 150px;
        height: 150px;
        margin-left: -75px; 
        */
        width: 120px;
        height: 120px;
        margin-left: -60px;

    }
    .timeline > li .timeline-image h4 {
        font-size: 18px;
        line-height: 26px;
        margin-top: 30px; 
    }
    .timeline > li.timeline-inverted > .timeline-panel {
        padding: 0 20px 20px; 
    } 
}
  
@media (min-width: 1200px) {
    .timeline > li {
        min-height: 170px; 
    }
    
    .timeline > li .timeline-panel {
        padding: 0 20px 20px 100px; 
    }
    
    .timeline > li .timeline-image {
        /*
        width: 170px;
        height: 170px;
        margin-left: -85px; 
        */
        width: 140px;
        height: 140px;
        margin-left: -70px;
    }
    
    .timeline > li .timeline-image h4 {
        margin-top: 40px; 
    }
    
    .timeline > li.timeline-inverted > .timeline-panel {
        padding: 0 100px 20px 20px; 
    } 
}
  
.timeline li:hover .timeline-image,
.timeline li.middle-viewport .timeline-image {
    border-color: var(--bs-primary);
    border-width: 6px;
}

.timeline li a {
    text-decoration: underline dotted;
    color:var(--bs-light);
}


/* Specific configuration for quotes, using a parallax effect */
.quote-parallax {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
    border-top: 2px solid var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
    background-color:rgba( var(--bs-primary-rgb) ,.2);   /* by default the background image has a light colored semi transparent overlay */ 
}

.quote-parallax::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    /*background-attachment: fixed;*/
    filter: grayscale(100%) brightness(50%);
    z-index: -100;
    background-position-y: var(--bg-parallax-position);
}

@supports ( -webkit-touch-callout : none) {
    .quote-parallax::before {
        background-attachment:scroll;
    }
}
    
@supports not ( -webkit-touch-callout : none) {
    .quote-parallax::before {
        background-attachment: fixed;
    }
}


.quote-parallax h3, 
.quote-parallax i, 
.quote-parallax .text-muted {
    color:var(--bs-light) !important;
    text-shadow: 0 0 3px var(--bs-dark), 0 0 3px var(--bs-dark), 0 0 3px var(--bs-dark), 0 0 3px var(--bs-dark);
    display: inline;
    font-weight: normal;
}

.quote-parallax i {    
    color:var(--bs-primary) !important;
}

#quote-saving-lives::before {
    background-image: url('img/quotes/ambulance-1423505_1920.jpg');   
    background-position: center center;
}

#quote-simplicity::before {
    /* want to always show the dog in full, therefore changing from cover to contain and filling the rest with the background color */
    background-image: url('img/quotes/picasso-dog.jpeg');
    filter: grayscale(100%) brightness(100%);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: white;
}

#quote-self-organization::before {
    background-image: url('img/quotes/lighthouse-2611199_1920.jpg');
    filter: grayscale(100%);
    background-position: center center;
}

#quote-learning::before {
    /* want to always show the dog in full, therefore changing from cover to contain and filling the rest with the background color */
    background-image: url('img/quotes/learn.jpg');
    filter: grayscale(100%) brightness(100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: white;
}


#do-something-great::before {
    /* want to always show the neon sign in full, therefore changing from cover to contain and filling the rest with the background color */
    background-image: url('img/quotes/clark-tibbs-oqStl2L5oxI-unsplash.jpg');
    background-color: black;
    height:100vh !important;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: grayscale(0) brightness(100%);
}

#do-something-great {
    background-color:transparent;
    height: calc(100vh - 7.5rem);    
    border-bottom: 0;
}

/*
Section specific configuration for Numbers & FunFacts
*/
.my-numbers, 
.funfacts {
    text-align:center;
    transition: box-shadow .3s;
    padding:0 !important;
}

.my-numbers:hover,
.funfacts:hover,
.my-numbers.middle-viewport,
.funfacts.middle-viewport {
    box-shadow: 0 0 11px rgba( var(--bs-light-rgb) ,.5);
}


.numberCounterGt { /* configuration for the Greater Then - initially hidden by opacity and then shown once the target is reached */
    transition: all 1s linear;
}
.numberCounter { /* Adding right margin to move the greater then sign and number again to the middle */
    margin-right: 1.25rem;
}


/* Section specific configuration for Agile */
.agile img {
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}
  
.agile:hover img,
.agile.middle-viewport img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.agile .img-fluid {
    width:100% !important;
}

.featured-text {
    border-left: 0.5rem solid var(--bs-primary);
}


/* Section specific configuration for Values (Sticky Notes) */

ul.sticky-notes, ul.sticky-notes li{
    list-style:none;
}

ul.sticky-notes{
    overflow:hidden;
    padding:0em 2em 2rem;

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

ul.sticky-notes li a,
ul.sticky-notes li {
    text-decoration:none;
    color: var(--bs-dark);
    background: var(--bs-primary);
    display:block;
    height:10em;
    width:10em;
    padding:1em;
    -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    box-shadow: 5px 5px 7px rgba(33,33,33,.7);
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;
    -webkit-transition:-webkit-transform .15s linear;
}

ul.sticky-notes li{
    margin:1em;
    display:inline-block;
}
  
ul.sticky-notes li p {
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    line-height: 1.2;
}
  
ul.sticky-notes li p.content {
    font-size:150%;
    line-height: 1.2;
}
  
ul.sticky-notes li p.tack {
    margin-bottom: 0px;
    padding-bottom: 0px;
}
  
ul.sticky-notes li:nth-child(even) p.content{  
    padding-top:0.15em;
}

ul.sticky-notes li:nth-child(3n) p.content{
    padding-top:0.3em;
}

ul.sticky-notes li:nth-child(5n) p.content{
    padding-top:0.45em;
}
  
ul.sticky-notes li:nth-child(even) {
    -o-transform:rotate(4deg);
    -webkit-transform:rotate(4deg);
    -moz-transform:rotate(4deg);
    position:relative;
    top:5px;
}
  
ul.sticky-notes li:nth-child(3n) {
    -o-transform:rotate(-3deg);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    position:relative;
    top:-5px;
}

ul.sticky-notes li:nth-child(5n) {
    -o-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    position:relative;
    top:-10px;
}

ul.sticky-notes li:hover,
ul.sticky-notes li:focus,
ul.sticky-notes li.middle-viewport {
    -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
    box-shadow:10px 10px 7px rgba(0,0,0,.7);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -o-transform: scale(1.25);
    position:relative;
    z-index:5;
}


/*
    Section specific configuration for More
*/
.more-heading { /* same as about-heading */
    margin: 15px 0;
    text-transform: none; 
}

.work-life-balance p {
    margin-bottom: 0px;
    line-height: 1.1em;
}

.work-life-balance .flaticon-2x {
    margin-right: 0.2em;
}

.language-skills h5 {
    text-align:left !important;
    font-size:90%;
    font-weight: normal !important;
}

.language-skills .progress {
    margin-bottom:15px;
}

.language-skills .progress-bar {
    background-color: var(--bs-secondary);
}

.tag-cloud-container {
    text-align : justify;
    font-size:80%;
}
  
ul.tag-cloud,
ul.tag-cloud li {
    display: inline;
    margin:0;
    padding:0 0.25em 0 0;
}
  
.level1 {
    font-size : 0.6em;
}

.level2 {
    font-size : 0.8em;
}

.level3 {
    font-size : 1.0em;
}

.level4 {
    font-size : 1.2em;
}

.level5 {
    font-size : 1.4em;
}

.level6 {
    font-size : 1.6em;
}

.level7 {
    font-size : 1.8em;
}

.level8 {
    font-size : 2.0em;
}

.level9 {
    font-size : 2.2em;
}

.level10 {
    font-size : 2.2em;
}


/*
Section specific configuration for the footer
*/
footer {
    padding-top: 3rem;
    padding-bottom: 2rem;
    text-align: center;
    background-color: transparent !important;
}


/* 
Section specific configuration for the Experience/Portfolio 
*/
#portfolio_section * {
    z-index: 2; 
    padding-top: 0;
    padding-bottom: 0;
}

.portfolio-item {
    margin: 0; 
} 

.portfolio-content {
    overflow:hidden;
}

.portfolio-link,
.portfolio-link:hover {
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--bs-light ) !important;
}

.portfolio-inline-caption {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(33, 37, 41,0.2) 0%, rgba(33, 37, 41,0.1) 30%, rgba(33, 37, 41,0.5) 60%, rgba(33, 37, 41,0.8) 100%);
}

.portfolio-inline-caption-inner {
    text-align: center;    
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.portfolio-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
    opacity: 0;
}

.portfolio-hover:hover {
    opacity: 1; 
}

.portfolio-hover-content {
    font-size: 20px;
    position: absolute;
    top: 30%;
    width: 100%;
    height: 20px;
    text-align: center;
    color: var(--bs-white); 
    text-shadow: 0 0 1px var(--bs-primary), 0 0 1px var(--bs-primary), 0 0 1px var(--bs-primary), 0 0 1px var(--bs-primary);
    transform: scale(0);
    transition: all .5s ease;
    opacity: 0;

}

.portfolio-hover:hover .portfolio-hover-content,
.portfolio-item.middle-viewport .portfolio-hover .portfolio-hover-content {
    transform: scale(1);
    opacity: 1;
}




.portfolio-item img {
    -ms-transform:scale(1.0);
    -webkit-transform:scale(1.0);
    transform:scale(1.0);
    transition:all .4s linear;
    height:auto;
    width:100%;
}
  
.portfolio-content:hover img,
.portfolio-item.middle-viewport .portfolio-content img {
    -ms-transform:scale(1.2);
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
}


/* 
Configuration for Portfolio Modals 
*/

.portfolio_modal {
    border-radius: 0 !important;
}

.portfolio_modal .modal-content {
    background-color: var(--bs-light);
    color: var(--bs-dark);
    border-radius: 0 !important;
}

.portfolio_modal .modal-body {
    padding:0;
}

.modal-split-left-half {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:300px;
}

.modal-split-right-half {
    background-color: white;
    padding: 1rem 1.85rem 1rem 1rem;
    box-sizing: border-box; /* make sure 50% is still 50% after you add padding */
    overflow-y: auto; /* scrollability here */
}

@media (min-width: 992px) {    

    /* For the split screen with image on the left and scrolling content on the right see: 
    https://stackoverflow.com/questions/57642753/flexbox-half-side-layout-left-side-image-fixed */
    .portfolio_modal .modal-split-container {
        display: flex;
        height: calc(100vh - 3.5rem - 2px); 
        /* height has to be similar to the height of the modal-dialog-centered - have to subtract the margin and the border. 
        Otherwise the content of the container are higher than the modal and the image will also scroll a little.
        The height has to be set, otherwise the flex won't work properly */
    }
    
    .modal-split-left-half {
        height:unset;
        flex: 0 0 50%; /* flex-basis: 50% */
    }
    
    .modal-split-right-half {
        flex: 0 0 50%; /* flex-basis: 50% */
    }
}

.modal-split-close {
    position: absolute;
    right: -1rem;
    top: -1rem;
    width: 3rem;
    height: 3rem;
    border-radius: 100%;
    background-color: var(--bs-primary);
    z-index: 4;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    opacity: 1 !important; /* overriding .btn-close */
    transition: background-size 0.15s linear;
}

.modal-split-close:hover,
.modal-split-close:focus {
    background-size: 1.33em;
}


/*
Configuration for hover/non-hover icons in the footer
*/
body.no-hover .hover-icon {
	display:none;
}

body.hover .no-hover-icon {
	display:none;
}


/*
Section specific configuration for the subway map.
*/

.subwayMap-inline-caption {
    width: 100%;
    height: calc(100vh - 0rem);   
    transition: all 0.5s;
    background-size: cover;
    background-image: url('/img/mapImage.jpg');
    position: relative;
}

.subwayMap-inline-caption-inner {
        background-color: rgba(var(--bs-dark-rgb), 0.7);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        padding: 1rem 2rem 0.25rem;
        bottom: 0%;
        position: absolute;
        width:100%;

}

.subwayMap-inline-caption-inner-inner {
    text-align: left;
    padding-left: 10%;
    color:white;
    text-shadow: 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark), 0 0 1px var(--bs-dark);    
    width:50%;
}

.subwayMap-inline-caption-inner:hover .subwayMapTryItText,
.subwayMap-inline-caption-inner:hover  h4 {
    text-decoration: underline;
}

.subwayMapTryItButton {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='20' fill='%23408697'/%3E%3Cpath d='M16.0077 26.3295C15.8243 26.5125 15.7206 26.7604 15.7192 27.0194C15.7178 27.2783 15.8188 27.5274 16.0001 27.7123C16.0885 27.8031 16.1942 27.8752 16.3109 27.9246C16.4276 27.974 16.553 27.9996 16.6797 28C16.8064 28.0003 16.9319 27.9754 17.0489 27.9267C17.1659 27.8779 17.2719 27.8063 17.3608 27.7161L24.2175 20.8286C24.5955 20.447 24.5955 19.8274 24.2175 19.4458L17.1454 12.29C16.7674 11.9121 16.1589 11.9121 15.7847 12.29C15.6023 12.4739 15.5 12.7224 15.5 12.9814C15.5 13.2403 15.6023 13.4888 15.7847 13.6728L22.1726 20.1334L16.0077 26.3295Z' fill='white'/%3E%3C/svg%3E");
    display: inline-block;
    height: 40px;
    width: 40px;
}

.subwayMapTryItText {
    padding-top: 6px;
    display: inline-block;
    vertical-align: top;
}

/*
Configuration of the container modal holding the subway map and the map itself.

See also: metroMap.css
*/

.metroSVG {
    display: inline;
    width: 100vw;
    height: 100vh;
}

.subwayMapContainerModal-close {
    position: absolute;
    right: 0.25rem;
    top: 0.25rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 100%;
    background-color: rgba( var(--bs-dark-rgb) ,.2);
    z-index: 4;
    line-height: 2.5rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.75 !important; /* overriding .btn-close */
    transition: background-size 0.15s linear;
}

.subwayMapContainerModal-close:hover {
    opacity: 1 !important;
}

/*
Configuration of the secondary modals for the subway map - the legend and the modals for the 'stations'
*/
.secondarySubwayMapModal {
    color:var(--bs-dark);
    font-size: 12px;
    width: unset !important;
    max-height: 100vh;
    height: unset;
}

.secondarySubwayMapModal .modal-dialog {
    margin-left: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    --bs-modal-margin: 0.5rem;
    max-height: calc(100vh - var(--bs-modal-margin) * 2)
}

.secondarySubwayMapModal .modal-content {
    max-height: calc(100vh - var(--bs-modal-margin) * 2)
}

.secondarySubwayMapModal .modal-body {
    padding: 0;
}

.secondarySubwayMapModal .modal-body-inner {
    padding: 1rem;
}

.secondarySubwayMapModal .modal-body h3{
    margin-top: 1rem;
    font-weight: normal;
    font-family: Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;
    text-transform: uppercase;
    font-size: 1.5em;
}

.secondarySubwayMapModal .table-sm td, 
.secondarySubwayMapModal .table-sm th {
    padding: 0rem;
}

span.square {
    font-size: 100%;
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    border: solid 1px #aaaaaa;
    padding-top: 0px;
    color: #ffffff;
    background-color:#0000ff;
}

span.grey {
    background: #cccccc;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em; 
    margin-bottom: 5px;
}


/*
Configuration of the scroll indication button in the secondary modals for the subway map.
*/
.scrollIndicator {
  position: absolute;
  bottom: 5px;
  left: 50%;  
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #000;
  font : normal 400 20px/1 'Josefin Sans', sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  padding-top: 40px;
  display: none;
}

.scrollIndicator span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb07 2s 2;
  animation: sdb07 2s 2;
  opacity: 0;
}

.scrollIndicator span:nth-of-type(2) {
  top: 16px;
  -webkit-animation-delay: .15s;
  animation-delay: .15s;
}

.scrollIndicator span:nth-of-type(3) {
  top: 32px;
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

@-webkit-keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes sdb07 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/*
Configuration for the image credit cards in the credits file
*/
.card.credits {
    color:var(--bs-dark);
    margin-bottom: 1.5rem;
}

.card.credits a {
    color:var(--bs-secondary);
}


/*
Section specific configuration for sections using a gradient in the background instead of solid colors.
The section will slowly get darker to the bottom, so when the next section comes, you see a difference between them, but while 
scrolling through the section you hardly notice the color change
*/

.bg-gradient {
    background: #ffffff; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ffffff , #f8f9fa); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ffffff, #f8f9fa); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ffffff, #f8f9fa); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ffffff, #f8f9fa) !important; /* Standard syntax */
}

.bg-gradient a {
    color: var(--bs-secondary);
    text-decoration: underline !important;
}

.bg-gradient pre {
    color: var(--bs-dark);
}