*, ::after, ::before {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 2vh; scroll-behavior: smooth; scroll-padding-top: 5rem; /* height of sticky header */}
body {font-family: 'Poppins'; font-weight: 300; line-height: 1.6; color: #222;} 
.container {max-width: 100%; margin: 0 auto;}
.innercontainer {max-width: 45rem; margin: 4rem auto; width: 100%; position: relative;}
.innercontainer.wide {max-width: 52rem; margin: 2rem auto; width: 100%; position: relative;}
.innercontainer.black {color: #222;}
.innercontainer p:last-child {margin-bottom: 0;}
.content ul, .content ol, .content p {margin-bottom: 2em;}
.content ul {margin-left: 1rem;}
.content ol {margin-left: 2rem;}
h1 {line-height: 1.2; font-weight: 600; margin: 0 0 1.25rem;}
h2, h3 {font-family: 'Poppins'; font-weight: 500; line-height: 1.2; font-size: 1.7rem; margin: 0 0 1.25rem; color: #222; max-width: 40rem;}
h4 {font-family: 'Poppins'; font-weight: 500; font-size: 1.1rem;}
.fullwidth-titles h2, .fullwidth-titles h3 {max-width: 100%;}
.accordion h3 {max-width: 100%;}
h2#davie-in-canada-billions-of-dollars-thousands-of-jobs {max-width: 100%;}
.content .carousel h3, body.posts .content h3 {font-size: 1.25rem; font-weight: 500; margin-top: 0.5rem; margin-bottom: 0.5rem!important;}
a {color: #279991;}
.content {font-family: 'Roboto Slab'; line-height: 1.7;}
.pretitle {font-family: 'Poppins'; font-weight: 600; text-transform: uppercase; font-size: 0.98rem; color: #279991; margin-bottom: 0.2rem;}
.inset {margin: 0 2.5rem; padding-bottom: 2rem;}
video, img {max-width: 100%; display: block; width: 100%;}
.align-left {text-align: left!important;}
p strong {font-weight: 600;}

#qa-benoit h4 {font-weight: 500;}
#qa-benoit h3 + h4 {font-weight: 300; position: relative; bottom: 1rem; margin-bottom: 1rem;}
#qa-benoit .avatar {position: absolute; left: 0;}
#qa-benoit .innercontainer.wide.content {padding-left: 13rem;}
@media (max-width: 90rem) { 
    #qa-benoit .avatar {position: relative;}
    #qa-benoit .innercontainer.wide.content {padding-left: 0;}
}

#davie-academy {display: none!important;}


.strategic-framework-title h3 {margin: 1rem auto 0; max-width: 29rem; text-align: center; font-weight: 500; line-height: 1.3; max-width: 40rem;}
.centered-titles h2, .centered-titles h3 {text-align: center;}

/* SPLASH */
@keyframes fadeout {
    from {opacity: 1;}
    to {opacity: 0; pointer-events: none;}
}
@keyframes fadein {
    0% {opacity: 0;}
    35% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes zoominfast {
    0% {transform: scale(0.9); opacity: 1;}
    35% {opacity: 1;}
    100% {transform: scale(1); opacity: 0;}
}
.popover {
    position: fixed; 
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999999;
    opacity: 0;
    animation-name: fadein;
    animation-duration: 0.8s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    display: flex;
    background: rgba(0, 44, 61, 0.85);
    cursor: pointer;
}
.popover > div {
    background: #269890;
    padding: 2.5rem clamp(1rem, 4vw, 2.5rem);
    color: white;
    width: 100%; 
    max-width: 31rem;
    margin: auto;
    cursor: auto;
    position: relative;
    font-weight: 400;
}
.popover a {color: white;}
.popover a.closebutton {
    border: 0; 
    background: rgba(255,255,255,0); 
    border-radius: 0; 
    width: 2rem; 
    height: 2rem;
    color: transparent;
    overflow: hidden;
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
}
.popover a.closebutton::before, .popover a.closebutton::after {
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    width: 1rem;
    background: white;
    content: "";
    display: block;
    position: absolute;
}
.popover a.closebutton::after {transform: translate(-50%) rotate(-45deg);}


.splash {
    background: rgba(0, 44, 61, 0.85);
    display: none; 
    justify-content: center; 
    align-items: center; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 99;
    width: 100%;
    height: 100vh;
    padding: 0 22vw;
    animation-name: fadeout;
    animation-duration: 0.8s;
    animation-delay: 1.8s;
    animation-fill-mode: forwards;
}
.splash img {
    width: 100%; 
    max-width: 60rem;
    animation-name: zoominfast;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}
.home .splash {display: flex;}
.home #loading.splash {display: none;}
#loading {background: white;}

/* LIST RIGHT */

.section.list-right .innercontainer {margin-bottom: 0;}
.section.list-right.blue .innercontainer {margin-top: 0;}
.section.list-right.blue .innercontainer ul {padding-bottom: 1em;}
.section.list-right h2 {max-width: 30rem; margin: 2.5rem 0 -2rem; font-size: 2.3rem;}
.section.list-right .innercontainer > h3 {font-size: 1.25rem; font-weight: 600; margin-top: 0.5rem; margin-bottom: 0.5rem;}
.section.list-right img {position: absolute; margin: 2rem 0 0 -7rem; width: 5rem;}
.section.list-right p:last-child {padding-bottom: 0;}
.section.list-right .innercontainer > * {margin-left: 3rem}
.section.list-right .innercontainer > ul {padding-left: 1rem;}
.section.list-right.list-inside .innercontainer > h3,
.section.list-right.list-inside .innercontainer > h3 + p {padding-left: 6.5rem;}
.section.list-right.list-inside img {left: 9.5rem;}


/* VALUES */

.section.values h2 {max-width: 30rem; margin-bottom: 5rem; font-size: 2.3rem;}


/* DAVIE BY NUMBERS */

#davie-by-numbers {text-align: center; margin-bottom: 3rem;}
#davie-by-numbers h2 {margin: 0 auto 0.5rem; padding: 0;}
#davie-by-numbers h2 + p {font-weight: 500; font-family: "Poppins"; color: #222;}
#davie-by-numbers ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem 1.25rem; margin: 0;}
#davie-by-numbers ul li {background: white; list-style: none; padding: 1rem; font-size: 0.9rem; line-height: 1.5;}
#davie-by-numbers ul li p {margin-bottom: 0;}
#davie-by-numbers ul li > span {color: #269991; display: block; font-size: 2rem; font-weight: 600; font-family: "Poppins";}
#davie-by-numbers ul + ul {margin-top: 1.25rem;}
#davie-by-numbers ul + ul li {background: #043e5d; color: white;}
#davie-by-numbers ul + ul li h3 {font-size: 2rem; color: white; font-weight: 500; font-weight: 600;}
#davie-by-numbers ul + ul li img {height: 5rem; display: block; margin: 0.5rem 0 1rem;}



/* WHO WE ARE */

.section.who-we-are {padding-top: 6rem; padding-bottom: 2rem;}
.section.who-we-are .container {flex-direction: row; justify-content: flex-start;}
.section.who-we-are .container h2 {max-width: 26rem; font-size: 1.9rem; line-height: 1.3;}
.section.who-we-are .container ul {padding-left: 5rem; font-size: 1.2rem; line-height: 1.6;}
.section.who-we-are .container ul li {list-style: none; padding: 0 0 1rem;}
.section.who-we-are .container ul li a {color: white; text-decoration: none; display: block; position: relative;}
.section.who-we-are .container ul li a::after {content: ""; background: url(/img/singlearrowright.svg) center center / contain no-repeat; display: inline-block; vertical-align: middle; height: 0.5rem; width: 1rem; margin-left: 0.6rem;}
 


/* PROGRAMS */

div#programs {padding-top: 2rem;}
div#programs .img {margin: 3rem 0 2rem; position: relative;}
div#programs img {display: block; max-width: 100%;}
div#programs > div {display: flex; gap: 2rem; margin-bottom: 3rem;}
div#programs > div > div {width: 50%; display: flex; flex-direction: column; justify-content: center;}
div#programs > div > div p {line-height: 1.7;}
div#programs > div > div a {color: #222; font-family: "Poppins"; font-weight: 500; display: block; text-decoration: none; margin: -0.5rem 0 0; transition: all 0.2s ease-in-out;}
.button::after,
.section ul.mosaic li a > span > span.readmore::after,
.section.large .flex ul li a::after,
div#programs > div > div a::after {
    content: "";
    background: url(/img/singlearrowright.svg) -2.8rem center / contain repeat-x;
    display: inline-block; 
    vertical-align: middle; 
    height: 0.9rem; 
    width: 1.4rem; 
    margin-left: 1rem;
    filter: invert(100%);
}
.button::after {right: 1rem; margin-top: 0.22rem; position: absolute; filter: invert(0%); height: 0.9rem;}
.section ul.mosaic li a > span > span.readmore::after {right: 0; margin-top: -0.05rem; position: absolute; filter: invert(0%); height: 0.9rem;}
.section.large .flex ul li a::after {right: 0; position: absolute; filter: invert(0%); height: 1.6rem;}
.section ul.mosaic li a:hover > span > span.readmore,
.section.large .flex ul li a:hover,
div#programs > div > div a:hover {opacity: 0.6;}
.button:hover::after,
.section ul.mosaic li a:hover > span > span.readmore::after,
.section.large .flex ul li a:hover::after,
div#programs > div > div a:hover::after {background-position: center center; background-repeat: no-repeat;transition: all 0.4s ease-in-out;}

div#programs > div:nth-child(even) {flex-direction: row-reverse;}
@media (max-width: 60rem) { 
    div#programs > div:nth-child(2n),
    div#programs > div {flex-direction: column;}
    div#programs > div > div {width: 100%;}
}


.section.list-right.blue > .container .innercontainer > h3,
body:not(.who-we-are) .section .inset h3 {font-size: 1.7rem; font-weight: 500; margin-top: 0; margin-bottom: 1.1rem;}
.section.list-right.blue > .container .innercontainer > h3 {line-height: 1.4; max-width: 32rem; margin-bottom: 1.5rem;}
.section .inset h3:first-child {margin-top: 0.5rem;}
.section .inset + p {margin-top: 3rem;}
body.who-we-are .section .inset + p {margin-top: 2rem; margin-bottom: 2rem; padding-bottom: 0;}
body.who-we-are .section .inset + p:last-child {margin-bottom: 0;}
.impact .section.list-right .innercontainer > h2 {margin: -1rem 0 3rem -21.5rem;}



/* HEADER */
@keyframes slideDown {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}
}
.section.header {
    position: absolute; 
    width: 100%; 
    padding-top: 0; 
    padding-bottom: 0; 
    z-index: 15; 
    overflow: visible; 
    background: transparent; 
    top: 0;
}
body.people .section.header {display: none;}
body:not(.menuopen) .section.header.sticky {position: fixed; background: white; border-bottom: 1px solid rgba(0,0,0,0.2);
    animation-name: slideDown;
    animation-duration: 0.6s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
}
.section.header::before {content: ""; position: absolute; left: 0; height: 1px; width: 100%; background: rgba(255,255,255,0.7); bottom: 0; z-index: 99;}
.section.header.sticky::before {content: none;}
body:not(.menuopen,.programs) .section.header.sticky #togglemenu > span > span,
body:not(.menuopen,.programs) .header.sticky #togglemenu::before {filter: brightness(0.22) sepia(100%) hue-rotate(164deg) saturate(3);}
.section.header.sticky img,
.section.header img + img {display: none;}
.section.header.sticky img + img {display: block;}
body.menuopen .section.header.sticky img {opacity: 0;}
.section.header > .container {position: relative; display: flex; flex-direction: row; justify-content: space-between; width: 100%;}
.section.header > .container > div:first-child {padding-top: 1.35rem; padding-bottom: 1rem; display: flex;  gap: 1rem;}
.section.header.sticky #togglemenu {padding-top: 0.5rem;}
.section.header > .container > a {padding-top: 2.75rem;}
.section.header a {color: white; text-decoration: none; font-weight: 500; display: block; position: relative;}
.section.header img {height: 1.5rem; display: block; width: auto;}
.section.header ul li {list-style: none; display: block; font-size: 0.85rem; padding: 0;}
.section.header ul li a {margin: 0.6rem 0; font-size: 1.2rem; display: inline-block; transition: opacity 0.2s ease-in-out;}
.section.header ul li a:hover {opacity: 0.6;}
.section.header ul.menu > li:not(.active) > ul {height: 0!important;}
.section.header ul.menu > li > ul {overflow: hidden; transition: height 0.3s ease-in-out;}
.section.header ul li.active > a {border-bottom: 1px solid white; opacity: 1!important;}
.section.header .menus {
    display: flex; 
    position: fixed; 
    top: 50vh; 
    right: 0; 
    width: 50%;
    min-width: calc(31.5rem + 4.5rem);
    justify-content: flex-start; 
    align-items: flex-start; 
    pointer-events: none; 
    z-index: 2; 
    transform: translateY(-50%);
}
.menuopen .section.header {position: fixed;}
.menuopen .section.header .menus {pointer-events: all; opacity: 1;}
.section.header .menus > div {display: flex; flex-direction: column; justify-content: center; position: relative; padding: 0 4rem;}
.section.header ul.menu > li {position: relative;}
.section.header ul.menu > li > ul li {list-style: none;}
.section.header ul.menu > li > ul li a {font-size: 0.8rem}
.section.header ul.menu > li > ul li ul {display: block;}
.section.header ul.menu > li > ul li a {padding: 0.25rem 0; margin-top: 0; margin-bottom: 0;}
.section.header ul.menu > li > ul li ul li a {margin-left: 1.5rem; font-weight: 300;}
.section.header ul.menu > li > ul a {padding-top: 0; font-weight: 400;}
.section.header::after {
    content: "";
    height: 100vh; 
    width: 50%;
    min-width: calc(31.5rem + 4.5rem);
    top: 0;
    right: 0;
    z-index: 1;
    position: fixed;
    pointer-events: none;
}
.menuopen .header::after {background: rgba(0, 44, 61, 0.85);}
@media screen and (max-width: 59rem) {
    .section.header .menus, .section.header::after {min-width: 0; width: 100%;}
}
body:not(.home) .section.header + script + .section.bgimage + .section.title + .section + .section:not(.title,.afterlightergray) {margin-top: -2rem;}

body.smallheader .section.bgimage.fixedbg {background-attachment: scroll; max-width: 45rem; margin: 6rem auto 0;}
body.smallheader .section.bgimage.fixedbg .img {max-width: 45rem; position: absolute;}
body.smallheader .section.header::before {background: transparent;}
body.smallheader:not(.menuopen) .section.header.sticky #togglemenu > span > span, 
body.smallheader:not(.menuopen) .header.sticky #togglemenu::before,
body.smallheader .section.header.sticky img {filter: none!important;}
body.programs .section.header:not(.sticky) .container > *:nth-child(1),
body.smallheader .section.header .container > *:nth-child(1),
body.smallheader:not(.menuopen) .section.header .container > *:nth-child(2) {filter: brightness(0.22) sepia(100%) hue-rotate(164deg) saturate(3);}


/* Langswitcher */
.header .lang-switcher { display: flex; align-items: center; padding-right: 1em;  --x: -.15em; position: relative; font-size: .9rem; margin-left: .4em;  }
.header .lang-switcher::before,.header .lang-switcher::after { content: ""; width: .5em; height: 2px; background: #222; position: absolute; right: 0; --offset: var(--x); transform: translate(var(--offset), 0em) rotate(var(--r, 45deg)); border-radius: 100vmin; transition: transform 450ms;}
.header .lang-switcher::before { --r: -45deg;  --offset: calc(var(--x) * -1); }

.header .lang-switcher ul { position: absolute; bottom: -.5rem; left: -.5rem;  transform: translateY(100%); opacity: 0; transition: 450ms;  pointer-events: none; text-transform: none; color: #222; padding: .5rem .7rem; border-radius: var(--borderRadius) ; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; background: #FFF; z-index: 101; }
.header .lang-switcher ul li a { padding: .1rem 0;  color: #222; font-size: .9rem;  margin: 0; font-weight: 400; opacity: 1!important;}
.header .lang-switcher ul li.active a {opacity: 0.25!important;}
.header .lang-switcher ul::before { content: ""; position: absolute; width: 100%; top: -1.5rem; left: 0; height: 1.7rem; }
.header .lang-switcher:is(:hover, .hover) ul { opacity: 1; pointer-events: all; transform: translateY(calc(100% + .75rem)); }
.header .lang-switcher:is(:hover, .hover) { --x: .17em}

.header:not(.sticky) .lang-switcher { color: white; }
.header:not(.sticky) .lang-switcher::before,.header:not(.sticky) .lang-switcher::after { background: white;}

body.menuopen .lang-switcher { display: none; }


/* PEOPLE */
.section.personheader {background: #f1f2f2; padding-top: 3.5rem; padding-bottom: 3.5rem;}
.section.personheader > div {display: flex; max-width: 52rem; margin: 0 auto; align-items: flex-end; gap: 3rem; color: #222;}
.section.personheader h1 {font-weight: 500; font-size: 1.7rem; margin-bottom: 0.2rem;}
.section.personheader h1 + div {margin-bottom: 1rem;}
.section.personheader .socials {margin-bottom: 0.5rem;} 
.section.personheader a.close {position: absolute; right: 4vw; top: 1.5rem; width: 24px; height: 14px;}
.section.personheader a.close::before, .section.personheader a.close::after {width:100%; height: 2px; background: #222; content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(45deg);}
.section.personheader a.close::after {transform: translateY(-50%) rotate(-45deg);}
.section.personheader + .section .innercontainer.wide {margin-top: 0.5rem;}
.section.personheader + .section .innercontainer.wide h2 {font-size: 1.2rem;}
@media screen and (max-width: 59rem) {
    .section.personheader > div {flex-direction: column; align-items: center; gap: 1rem; text-align: center;}
    .section.personheader ul.socials {justify-content: center;}
}
@media (min-height: 700px) and (min-width: 42rem) {
    .section.personheader a.close {width: 36px; height: 21px;}
    .section.personheader a.close::before, .section.personheader a.close::after {height: 3px;}
}
.avatar {object-fit: cover; background: white; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;}
.avatar img {width: 10rem; height: auto; max-width: 10rem;}


/* SECTIONS */

.section {padding: 3.5rem 4.5rem; position: relative; overflow: hidden; z-index: 1; background: white;}
.section > .container {display: flex; flex-direction: column; justify-content: flex-end; height: 100%;}
.section.fullheight a {display: inline-block; padding: 1rem 0;}
.section a.arrow {padding-left: 2.6rem; background: url(/img/arrow-right-white.svg) left center / auto 2rem no-repeat;}
.section a.arrow.right.flat {padding-left: 2.8rem; background: url(/img/arrow-right-flat.svg) left center / auto 1rem no-repeat;}
.section a.arrow.down {background-image: url(/img/arrow-down-white.svg);}
.section.green {background: #279991; color: white;}
.section.blue {background: #023e5e; color: white;}
.section.blue h3, .section.blue h2 {color: white;}
.section.lightgray {background: #f4f4f4;}
.section.green p {font-size: 2.1rem; font-weight: 500;}
.section.white {background: white;}
.section.pink {background: #f28f73; color: white}
.section.large p, .large p {font-size: 1.5rem; line-height: 1.5; font-family: "Poppins";}
.section.large .innercontainer p {margin-bottom: 1rem;}
.section.large > .container > .flex {padding: 2rem 0 0;}
.section.larger p {font-family: 'Roboto Slab'; font-size: 1.25rem; line-height: 1.6;}
.section.large .flex {gap: 6rem;}
.section.large .flex ul {min-width: 14rem; white-space: nowrap; margin-left: 0;}
.section.large .flex ul li {list-style: none; margin: 0.5rem 0;}
.section.large .flex ul li a {color: white; text-decoration: none; display: block; font-weight: 400;}
.section.bgimage {background: #333 url() center center / cover no-repeat; color: white;}
.section.bgimage.fixedbg {background-attachment: fixed;}
.section.bgimage.fixedbg.video {position: fixed; top: 0; z-index: 0;}
.section.bgimage.fixedbg.video + .section + .section {margin-top: 41vw;}
.section.bgimage div.img {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background: transparent url() center center / cover no-repeat;}
.section.mediumheight.bgimage div.img {height: 58vh;}
.section.bgimage::before {
    position: absolute;
    content: "";
    width: 100vw;
    height: 100vh;
    left: 0; top: 0;
    z-index: 1;
}
body.posts  .section.header + .section.bgimage::before {background:rgba(2, 62, 94, 0);}
.section.bgimage.hastext::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.75) 100%);
}
.section.largeheight {height: 88vh;}
.section.mediumheight {height: 58vh}
.section.fullheight {height: calc(100vh + 1px); max-height: 100vw;}
.section.fullheight h1, .section.fullheight h2 {line-height: 1.3; font-weight: 500; font-size: 2.1rem; margin-bottom: 1rem; color: white;}
.section.fullheight div {font-weight: 500; font-size: 1rem; margin-bottom: 0.6rem; position: relative; z-index: 1;}
.section.fullheight a {color: white; text-decoration: none; font-size: 0.7rem;}
.section.invert, .section.invert a {color: #023e5e;}
.section.invert a.arrow {background-image: url(/img/arrow-right.svg);}
.section.invert h2 {color: #222222;}
.section.largepadding {padding-top: 5rem; padding-bottom: 5rem;}
.section.largepadding .innercontainer {margin-top: 0; margin-bottom: 0;}
.section.title {background: transparent;}
.section.title + .section.largepadding {padding-bottom: 4rem;}
.section .flex {display: flex;}
.section .grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem 1.25rem; text-align: center; margin: 3rem 0 3rem;}
.section .grid p {margin: 0; line-height: 1.6;}
.section .grid h3 {font-weight: 500; font-size: 1.1rem; font-family: "Poppins"; margin-bottom: 0.75rem;}
.section .grid h4 {font-weight: 500; font-size: 0.95rem; font-family: "Poppins"; line-height: 1.4;}
.section .grid video, .section .grid img {margin: 0 auto 1rem; width: 100%; max-width: 7rem; display: block;}
.section .grid.three-up {grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));}
.section .grid.four-up {grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));}
.section .grid.fullwidth-video lottie-player {width: 100%; margin: 0; max-width: 100%;}
.section .innercontainer.wide .grid.four-up {grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem 2rem;}
.section .grid.four-up.logos > div {background: white; position: relative; padding: 0;}
.section .grid.four-up.logos > div > p > a {padding: 0 1rem; display: block;}
.section .grid.four-up.logos > div > p, .section .grid.four-up.logos > div > p > a > img {margin: 0; position: relative; width: 100%; height: 100%; object-fit: contain;}
.section .grid.four-up.logos > div > p > a > img {max-width: 100%;}
.section .grid.five-up {grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 3rem 1.5rem; margin-bottom: 1rem;}
.section .grid.five-up p {font-size: 0.8rem; margin-left: auto; margin-right: auto; max-width: 9rem;}
.section .grid.five-up img {max-width: 6rem; margin-bottom: 1rem;}

.section .grid.key-attributes {gap: 3rem 2rem; margin-bottom: 0.5rem;}
.section .grid.key-attributes p {font-size: 0.9rem;}
.section .grid.key-attributes h3 {margin-left: auto; margin-right: auto; max-width: 12rem;}
.section .grid.key-attributes > div:first-child h3 {max-width: 10rem;}

.section .grid.davie-offers {gap: 3rem 2rem; margin-bottom: 0.5rem;}
.section .grid.davie-offers h3 {margin-bottom: 0.25rem;}
.section .grid.davie-offers p {margin-left: auto; margin-right: auto; max-width: 12rem; font-size: 0.95rem; line-height: 1.5;}

.section .grid.core-objectives {margin-bottom: 0;}
.section .grid.core-objectives lottie-player {max-width: 10rem; margin: 0 auto 0.75rem;}
.section .grid.core-objectives p {margin-left: auto; margin-right: auto; max-width: 14rem;}

.section .grid.grid.fullwidth-video {margin-top: 0;}
.section .grid.grid.fullwidth-video p + p {position: relative; bottom: 2rem; margin-left: auto; margin-right: auto; max-width: 10rem;}

@media (max-width: 80rem) { 
    .section .flex {flex-direction: column;}
    .section.large .flex {gap: 2rem;}
    .section.bgimage.fixedbg.video + .section + .section {margin-top: 64vw;}
}

@keyframes zoomin {
    0% {transform: scale(1);}
    100% {transform: scale(1.15);}
}
@keyframes fadein {
    from {opacity: 0; transform: translateY(1rem);}
    to {opacity: 1; transform: translateY(0);}
}
.section .small .img {overflow: hidden;}
.section .small .img.opaque,
.section.opaque:not(.title) > * {opacity: 0;}
.section.fullheight + .section.opaque,
.section .small .img.notopaque,
.section.notopaque:not(.title,.header, .personheader) > * {
    animation-name: fadein;
    animation-duration: 1.25s;
    animation-delay: 0.5s;
    animation-fill-mode: backwards;
}
.section .avatar {width: 10rem;}

.section .small .img.notopaque img,
.section.bgimage.fixedbg.notopaque div.img {animation: zoomin 20s; animation-fill-mode: forwards; transform-origin: center center;}
.section .innercontainer.firstleadparagraph p:first-child {font-size: 2rem; font-family: 'Poppins'; line-height: 1.4;}
@media (min-width: 142vh) { 
    .section .innercontainer.firstleadparagraph p:first-child {position: relative; right: 8.5rem;}
}
.section.notopaque .zoomin {
    animation-name: zoomin;
    animation-duration: 10s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}


/* MOSAIC */

.section ul.mosaic {display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.5rem; margin: 3rem 0;}
.section ul.mosaic li {list-style: none; position: relative; font-family: 'Poppins'; background: #043e5d;}
.section ul.mosaic li.hidden {display: none;}
.section ul.mosaic li a {display: flex; flex-direction: column; text-decoration: none;}
.section ul.mosaic li a > .img {height: 11rem; overflow: hidden; [position: relative;]}
.section ul.mosaic li a > .img img {height: 100%; width: 100%; object-fit: cover; opacity: 0.7; transform: scale(1); transition: all 0.3s ease-in-out;}
.section ul.mosaic li a:hover > .img img {opacity: 0.3; transform: scale(1.15);}
.section ul.mosaic li a > span {
    position: relative; 
    line-height: 1.4; 
    bottom: 0; 
    width: 100%; 
    background: rgb(4, 62, 93,0.9); 
    color: white; 
    padding: 1.2rem 1rem; 
    height: 10rem;
    display: flex; 
    flex-direction: column;
}
.section ul.mosaic li a > span > span {display: block; font-size: 1rem; font-weight: 500; line-height: 1.3; flex-grow: 1;}
.section ul.mosaic li a > span > span.title > span {max-height: 4rem; display: block; overflow: hidden; text-overflow: ellipsis;}
.section ul.mosaic li a > span > span.meta {font-size: 0.55rem; font-weight: 600; padding-bottom: 0.8rem; flex-grow: 0;}
.section ul.mosaic li a > span > span.meta > span {color: #279991;}
.section ul.mosaic li a > span > span.readmore {
    font-size: 0.6rem; 
    font-weight: 600; 
    text-transform: uppercase; 
    flex-grow: 0;
    position: relative; 
}


.link_to_all {text-align: right; font-family: "Poppins";}
.link_to_all a {color: #222; font-weight: 500; text-decoration: none; font-size: 90%; display: inline-block; position: relative;}
.section .link_to_all + ul.mosaic {margin-top: 1rem;}
.link_to_all.davie-tv {position: absolute; right: 5rem; margin-top: -1rem; z-index: 2;}
.section.blue .link_to_all a {color: white;}
.link_to_all a::before {content: ""; left: 0; bottom: 0; height: 2px; background: #222; width: 0; position: absolute; transition: width 0.3s ease-in-out;}
.link_to_all a:hover::before {width: 100%;}

.section.afterlightgray, .section.afterlightergray, .section.afterblue {padding-bottom: 5.5rem;}
.section.afterwhite::after, .section.afterlightgray::after, .section.afterlightergray::after, .section.afterblue:after {
    content:"";
    width: 100%;
    height: 15rem;
    position: absolute;
    z-index: -1;
    left: 0;
    background: #F4F4F4;
    bottom: 0;
}
.section.afterwhite::after {background: white;}
.section.afterblue::after {background: #023e5e;}
.section.afterlightergray::after {background: #fbf9f9;}


/* VIDEO */

.video {padding: 0; height: 41vw; width: 100%;}
.video .video-container {padding-bottom: 56.25%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)!important; width: 100%; opacity: 1!important;}
.video .playbutton {
    position: absolute; 
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)!important;
    width: 5rem;
    height: 5rem;
    background: url(/img/play.svg) center center / contain no-repeat;
    z-index: 19;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.video.loaded .playbutton {opacity: 1;}
.video.playing .playbutton {opacity: 0; background: url(/img/pause.svg) center center / contain no-repeat;}
.video.paused::before, .video.playing::before {content: none;}
.video.playing .playbutton:hover {opacity: 1;}
.video .video-container .vimeoplayer, .video .video-container .vimeoplayer iframe {height: 100%; width: 100%; position: absolute; opacity: 0;}
.video.paused .video-container .vimeoplayer, .video.paused .video-container .vimeoplayer iframe,
.video.playing .video-container .vimeoplayer, .video.playing .video-container .vimeoplayer iframe {opacity: 1;}

@media (max-width: 90rem) { 
    .section.video {height: 65vw; margin-left: -9%; margin-right: -9%; width: 118%;}*/
    .section.bgimage.fixedbg.video + .section + .section {margin-top: 65vw;}
}
@media (min-width: 200vh) { 
    .section.video {height: 82vh;}
    .section.bgimage.fixedbg.video + .section + .section {margin-top: 82vh;}
}

/* TITLE */

.section.title {position: absolute; left: 0; transform: translateY(-50%); padding-top: 0; padding-bottom: 0; z-index: 5; width: 100%;}
.section.title > .container {position: relative; display: block;}
.section.title > .container > * {font-weight: 500; font-size: 1.75rem; margin: 0; padding: 1.2rem 4.5rem 1.2rem 0; line-height: 1.1; color: white; background: #269890; display: inline-block;}
.section.title > .container > *::before {content: ""; top: 0; position: absolute; width: 50vw; right: 100%; height: 100%; background: #269890;}



/* HARBOUR */

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

#harbour .infobox {position: absolute; bottom: 0; right: 0; background: #124a6a; color: white; width: 25vw; font-size: 1vw; padding: 2vw 1.75vw;}
#harbour .infobox h3 {color: white; font-size: 1.6vw; padding: 0 0 0.7vw; margin: 0;}
#harbour .bullet {width: 1rem; height: 1rem; background: white; border-radius: 100%; border: 0.08rem solid #124a6a; transform: translate(-50%,-50%)!important; z-index: 2;}
#harbour .bullet::before {
    content: ""; 
    border: 0.25rem solid rgba(255,255,255,0.4); 
    opacity: 1; 
    height: 2rem;
    width: 2rem; 
    position: absolute; 
    margin: -0.58rem 0 0 -0.58rem; 
    border-radius: 100%;
    animation-name: pulsate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    z-index: -1;
}
#harbour .bullet.selected::before {opacity: 0!important;}
#harbour .line {display: none; border-left: 0.12rem solid #124a6a; border-bottom: 0.09rem solid #124a6a; transform: skewX(45deg)!important; transform-origin: 0% 0%; opacity: 1!important;}
#harbour .bullet.selected + .line {display: block;}
#harbour .innerharbour {overflow: hidden; margin: 2vw; height: calc(100% - 4vw); position: absolute; width: calc(100% - 4vw);}
#harbour .footnote {position: absolute; bottom: 0; left: 0; width: 40rem; max-width: 60vw; font-size: 0.75rem; color: white;}
@media (max-width: 40rem) { 
    #harbour {margin-bottom: 15rem; overflow: visible; background: #124a6a;}
    #harbour .innerharbour {overflow: visible; transform: none!important; opacity: 1!important;}
    #harbour .infobox {
        top: calc(100% + 2vw); 
        border-radius: 0; 
        height: 15rem; 
        width: calc(100% + 4vw); 
        left: 0; 
        margin: 0 -2vw;
        padding: 2rem 4.5vw;
        font-size: 0.75rem;
    }
    #harbour .infobox h3 {font-size: 1.2rem; margin-bottom: 0.3rem;} 
    #harbour .line {transform: scaleY(3) !important;}
    #harbour .footnote {text-align: center; width: 100%; max-width: 100%; font-size: 0.6rem;}
}



/* TABS */

ul.tabs {display: flex; font-family: 'Poppins'; font-weight: 500; font-size: 1.35rem; margin-bottom: 1.2rem;}
ul.tabs li {list-style: none;}
ul.tabs li a {padding: 0; text-decoration: none; text-decoration: none; cursor: pointer; color: #012031; white-space: nowrap;}
ul.tabs li + li {margin-left: 2.3rem;}
ul.tabs li.active a {border-bottom: 1px solid #012031;}
ul.tabs + div h3 {display: none;}
.hidden {opacity: 0; pointer-events: none; position: absolute; width: 0; height: 0; overflow: hidden;}
.visible {opacity: 1;}
ul.tabs + * > * {transition: opacity 0.3s ease-in-out;}


.grid + .downloadbar {position: relative; top: 1rem; margin-bottom: 7rem;}
.downloadbar {margin-top: 3rem; background: #053f5e; color: white; padding: 1.5rem; display: flex; justify-content: space-between;}
.downloadbar span {font-family: 'Roboto Slab';}
.downloadbar a {
    color: white; 
    text-transform: uppercase; 
    font-size: 0.6rem; 
    text-decoration: none; 
    font-weight: 600; 
    padding: 0.3rem 2rem 0.3rem 0;
    display: block;
    line-height: 1.4;
    background: url(/img/download.svg) right center / contain no-repeat;
    align-self: center;
    font-family: "Poppins";
}
.footernavbar {margin-top: 5rem; border-top: 0.05rem solid silver; display: flex; justify-content: space-between; padding-top: 1.5rem;}
.footernavbar a {color: #222222; font-size: 0.7rem; font-weight: 600; text-decoration: none; font-family: 'Poppins';}
.footernavbar > div {display: flex; gap: 2.25rem;}
.postshare {display: flex; justify-content: flex-end; position: relative; top: 3rem; font-size: 0.7rem; align-items: center;}
.postshare > span {color: #222; font-family: 'Poppins'; font-weight: 400; display: inline-block; margin-right: 0.2rem;}
.postshare > ul {display: flex; margin: 0;}
.postshare > ul li {list-style: none; margin-left: 0.65rem;}
.postshare > ul li a {background: #053f5e; color: white; display: flex; justify-content: center; align-items: center; width: 1.75rem; height: 1.75rem; border-radius: 100%;}
.postshare > ul li a img {filter: saturate(0) brightness(5); width: 60%;}
.facts {text-align: left!important; font-size: 0.9rem;}
.facts > div {position: relative; line-height: 1.6;}
.facts > div::before {
    content: "";
    display: inline-block;
    width: 3rem;
    height: 0.3rem;
    background: #269991;
    bottom: 0.5rem;
    position: relative;
}
.allnews {justify-content: flex-end; margin-top: -2rem;}
.allnews, .postfilters {font-size: 0.8rem; display: flex; gap: 1.75rem; position: relative; top: 2rem;}
.postfilters li {display: block;}
.allnews a, .postfilters li a {list-style: none; color: #222; text-decoration: none; font-family: 'Poppins'; font-weight: 500;}
.postfilters li.active a {border-bottom: 1px solid #222;}


.blueboxes {gap: 1.5rem!important; margin-bottom: 4rem!important;}
.bluebox {background: #053f5e; color: white; padding: 1.5rem 1rem; text-align: left;}
.bluebox ul {margin-left: 0.75rem;}
.bluebox h3 {color: white; font-weight: 500;}
.bluebox a {color: white;}

/* ACCORDION */

.accordion {margin-bottom: 2rem;}
.accordion h3 {color: white!important; font-weight: 500; cursor: pointer; padding: 1rem 0; margin: 0; font-size: 1.4rem; user-select: none; font-size: 1rem; display: flex; justify-content: space-between; align-items: center;}
.accordion h3::after {
    content: "";
    background: url(/img/chevron_down.svg) center center / contain no-repeat;
    display: inline-block;
    vertical-align: middle;
    height: 0.5rem;
    width: 1rem;
    margin-left: 0.6rem;
}
.accordion > div {border-top: 1px solid white;}
.accordion > div:last-child {border-bottom: 1px solid white;}
.accordion > div > div {height: 0; transition: all 0.3s ease-in-out; overflow: hidden; opacity: 0;}
.accordion > div > div p {margin-bottom: 0; padding-bottom: 1.5rem;}
.accordion > div.active > div {height: auto; opacity: 1;}
.accordion > div.active h3::after {
    background: url(/img/chevron_up.svg) center center / contain no-repeat;
}
.section.lightgray .accordion h3 {color: #222!important;}
.section.lightgray .accordion > div {border-color: #222;}
.section.lightgray .accordion > div:last-child {border-color: #222;}
.section.lightgray .accordion h3::after {filter: invert(80%)}

.button {
    color: white; 
    display: inline-block;
    text-decoration: none;
    padding: 0.65rem 1rem;
    font-family: 'Poppins';
    font-weight: 500;
    font-size: 0.8rem;
    width: 100%;
    max-width: 15rem;
    background: #053f5e;
    cursor: pointer;
    position: relative;
}
.largebutton {display: flex; align-items: flex-end; margin: 0 -3rem 3.5rem; padding: 2rem 3rem 1rem;}
.largebutton > div:first-child {flex-grow: 1;}
.largebutton.green, .largebutton.green .button {color: white; background-color: #269890;}

.form > div.submit input {
    background: #f0f1f1 url(/img/singlearrowright_blue.svg) calc(100% - 1rem) center / auto 0.75rem no-repeat; 
    color: #053f5e; 
    border: 0; 
    text-transform: uppercase;
    padding-left: 1rem;
    padding-right: 4rem;
}

.interactive_videoholder {position: relative; margin: auto; height: 50vh; max-height: 700px; width: 100%; background: #f4f4f4; margin: 1rem 0;}
.interactive_videoholder lottie-player {height: 100%; max-height: 100%;}
.interactive_videoholder .textballoon {
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%);
    font-size: 0.85rem; 
    padding: 1.5rem;
    background: #fff;
    font-family: 'Poppins';
    border-radius: 0.5rem;
    line-height: 1.4;
    max-width: 18rem;
}
.interactive_videoholder .textballoon p {margin-bottom: 0.75rem;}
.interactive_videoholder .textballoon::after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    width: 0; 
    height: 0; 
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1rem solid #fff;
    margin-right: calc(-1rem + 1px);
    transform: translateY(-50%);
    margin-top: -3.8vw;
}
.interactive_videoholder lottie-player + .textballoon::after {
    margin-right: 0;
    right: auto;
    left: 0;
    border-left: 0;
    border-right: 1rem solid #fff;
    margin-left: calc(-1rem + 1px);
    margin-top: 3.15vw;
}
.interactive_videoholder .textballoon h3 {font-size: 1.2rem;}
.interactive_videoholder lottie-player + .textballoon {left: auto; right: 0;}
@media (max-width: 140vh) { 
    .interactive_videoholder {height: auto; max-height: 100%; padding: 1.5rem 0;}
    .interactive_videoholder .textballoon {
        position: relative; 
        top: 0; 
        left: 50%!important; 
        bottom: 0; 
        right: 0; 
        transform: translateX(-50%);
        width: 100%;
        max-width: 24rem;
        padding: 0;
        text-align: center;
        background: none;
    }
    .interactive_videoholder .textballoon::after {content: none;}
}
@media (min-width: 140vh) { 
    .interactive_videoholder .textballoon {background: none; text-align: center; padding: 0;}
    .interactive_videoholder .textballoon::after {content: none;}
}


.shadowbox {background: white; box-shadow: 0 0 1rem rgba(0,0,0,0.2);}



/* CONTACT */
.contactlocations {display: flex; flex-direction: column; gap: 4.5rem 0;}
.contactlocations > div > div p:last-child {margin: 0;}
.contactlocations > div > div:first-child {flex-grow: 1;}
.contactlocations > div:nth-child(even) > div:first-child {display: flex; justify-content: flex-end;}
.contactlocations > div > div:first-child img {max-width: 42rem;}
.contactlocations > div {position: relative; display: flex; gap: 2rem;}
.contactlocations > div:nth-child(even) {flex-direction: row-reverse;}
.contactlocations > div > div:last-child {width: 15rem; min-width: 15rem; display: flex; flex-direction: column; justify-content: center;}
.contactlocations h4 {margin-top: 0.5rem;}
.contactlocations h4, .contactlocations p a:first-child {text-transform: uppercase; font-size: 0.9rem;}
.contactlocations p {margin-bottom: 1.25rem; line-height: 1.6;}
.contactlocations p a {color: #222; font-weight: 600; text-decoration: none;}
.contactlocations p a:first-child {color: #222; font-family: "Poppins"; font-weight: 500; text-decoration: none; border-bottom: 3px solid #222;}
.contact-intro ul {margin: 3.7rem 0 2.1rem; display: flex; gap: 0 3rem;}
.contact-intro ul li {list-style: none; font-size: 1.25rem; font-weight: 600; font-family: "Poppins";}
.contact-intro ul li strong {font-weight: 600; border-bottom: 4px solid #222;}
.contact-intro ul li a {text-decoration: none; color: #222;}


/* POSTS */

.posts .container .innercontainer {margin-top: 0;}
.posts .content h1 {font-weight: 300; line-height: 1.1; padding-bottom: 2.2rem; font-size: 3rem;}
.posts .content .date {font-family: 'Poppins'; font-weight: 600; font-size: 0.75rem; margin-bottom: 2.5em;}



/* FOOTER */

.section.footer, .section.afterfooter {background: #F1F2F2; color: #043E5D; font-size: 0.75rem;}
.section.footer {padding-top: 3.5rem; padding-bottom: 2rem;}
.section.footer a {color: #043E5D; text-decoration: none;}
.section.footer > .container {display: block;}
.section.footer > .container .columns {position: relative; display: flex; justify-content: space-between;}
.section.footer > .container .columns img {height: 1.5rem;}
.section.footer > .container .columns > div {display: flex; gap: 4rem;}
.section.footer > .container .columns > div:first-child {flex-grow: 1;}
.section.footer > .container .columns > div:last-child {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;}
.section.footer > .container .columns > div ul li {list-style: none; padding-bottom: 0.9rem;}
.section.footer > .container .columns > div ul li a {color: #043E5D; font-weight: 600; text-transform: uppercase;}
.section.footer > .container .columns > div ul + ul li a {font-weight: 300;}

ul.socials {display: flex; gap: 1rem!important;}
ul.socials li {list-style: none;}
ul.socials li a {display: block;}
ul.socials li a img {display: block; height: 1.25rem!important; opacity: 1; transition: opacity 0.15s ease-in-out;}
.blue ul.socials li a img {filter: saturate(0%) brightness(5);}
.blue ul.socials {justify-content: center; margin-top: 1.4rem;}
ul.socials li.circle a {background: #333; border-radius: 100%; padding: 0.25rem}
ul.socials li.circle a img {transform: scale(0.8); filter: saturate(0%) invert(100%) brightness(1.2);}
ul.socials li a:hover img {opacity: 0.7;}

.section.afterfooter {border-top: 2px solid #d2d3d3; padding-top: 1.25em; padding-bottom: 1.25rem;}
.section.afterfooter > .container .columns {display: flex; justify-content: space-between; font-size: 0.55rem; color: #222;}
.section.afterfooter > .container .columns ul {display: flex; gap: 2rem;}
.section.afterfooter > .container .columns ul li {list-style: none;}
.section.afterfooter > .container .columns ul li a {text-decoration: none; color: #222;}


h2#explore {margin-left: calc(100% - 7rem); font-size: 1.2rem; width: 7rem;}
#timeline2 {margin-top: 3rem;}

@media (max-width: 115rem) { 
    .twocols > .container {margin: 0; max-width: 100%;}
}
@media (min-width: 115rem) { 
.twocols.lightgray_blue {background: linear-gradient(to right, #f4f4f4 50%, #023e5e 50%); z-index: 1; position: relative; border-bottom: 8rem solid white;}
.twocols .container {display: flex;}
.twocols .container .section {width: 50%;}
.twocols .container .section:nth-child(1) {padding-left: 0;}
.twocols .container .section:nth-child(2) {padding-right: 0;}
.twocols .section > .container {justify-content: flex-start;}
}


@media (max-width: 42rem) { 
    html {font-size: 15px;}
    .section.mediumheight.bgimage div.img,
    .section.mediumheight {height: 65vw;}
    #timeline1.timeline.carousel > ul {width: 100%;}
    #timeline1.timeline.carousel ol {display: none}
    #timeline1.timeline.carousel .prev, #timeline1.timeline.carousel .next {display: block!important; top: 0;}
    #timeline2 {margin-top: 5rem;}
    #timeline2.timeline.carousel > ul {width: 100%;}
    #timeline2.timeline.carousel ol {display: none}
    #timeline2.timeline.carousel .prev, #timeline2.timeline.carousel .next {display: block!important; top: 0;}
    h2#explore {margin-left: 0; width: auto;}
}
@media (max-width: 130vh) { 
    .section.list-right .innercontainer > h2 {margin-left: 0rem; padding-left: 0rem;}
    .section.list-right .innercontainer > * {margin-left: 0; padding-left: 7rem;}
    .section.list-right.list-inside .innercontainer > * {padding-left: 0rem;}
    .section.list-right.list-inside .innercontainer img {left: 6.5rem;}
    body.innovation .section.list-right .innercontainer > p,
    .section.list-right.blue .innercontainer > h3 {padding-left: 0;}
}
@media (min-width: 117vh) { 
    .container {max-width: 62rem;}
    .container.small {max-width: 55rem;}
}
@media (max-width: 110vh) { 
    .section {padding-left: 9vw; padding-right: 9vw;}
    .section.who-we-are .container {flex-direction: column;}
    .section.who-we-are .container ul {padding: 1rem 0 0 0;}
    ul.tabs {display: none;}
    ul.tabs + div h3 {display: block;}
    ul.tabs + div > div:not(:first-child) h3 {padding-top: 1rem;}
    ul.tabs + div .hidden {opacity: 1; position: relative; pointer-events: all; width: auto; height: auto; overflow: auto;}
    .nobronmobile br {display: none;}
}
@media (max-width: 90vh) { 
    .section {padding-left: 4.5vw; padding-right: 4.5vw;}
    .inset {margin: 0;}
}
@media (max-width: 90rem) { 
    .section.footer > .container .columns {display: block;}
    .section.footer > .container .columns > div:last-child {flex-direction: row; padding-top: 2rem;}
    .section.footer > .container .columns > div:last-child .socials {position: relative; top: 1rem; margin-left: -0.2rem;}
    .section.footer > .container .columns > div {flex-direction: column; gap: 1rem;}
    .section.footer > .container .columns > div > div img {width: auto; margin-bottom: 1.5rem;}
}
@media (max-width: 25rem) { 
    .section.footer > .container .columns > div:last-child {flex-direction: column; align-items: flex-start;}
    .section.footer > .container .columns > div:last-child .socials {top: 0.25;}
    .section.afterfooter > .container .columns {flex-direction: column; gap: 0.75rem; margin-top: 0.25rem;}
}

body.browser_safari .section.bgimage.fixedbg {background-attachment: initial;}