body
{
  color: var(--main-color);
  background-color: var(--main-bg-color);
  font-family: var(--body-font);
  font-size: 0.9em;
  font-optical-sizing: auto;
  padding: 0;
}

strong
{
  font-weight: 600;
  color: var(--text-strong-color);
}

h1, h2, h3, h4, h5, dt
{
  font-family: var(--heading-font);
  color: var(--heading-color);
  margin-bottom: 0.5em;
  letter-spacing: -0.05em;
  font-weight: 600;
}

h1
{
  font-size: 2em;
  font-weight: normal;
}

h2
{
  font-size: 1.75em;
  font-weight: 450;
}

h3
{
  font-size: 1.25em;
  font-weight: 500;
}

h4
{
  font-size: 1em;
}

#outer-width
{
  width: 100%;
  margin: 0;
  padding: 0;
}

.set-width
{
  width: calc(100% - 2em);
  max-width: var(--set-width);
  margin: 0 auto;
  transition: width 0.5s;
}

span.text-ctrl
{
  cursor: pointer;
}

a, span.text-ctrl
{
  color: var(--link-color);
  transition: 0.35s;
  text-decoration: none;
}

a:hover, span.text-ctrl:hover
{
  color: var(--link-hover-color);
}

a.phone-link-disabled, a.phone-link-disabled:hover
{
  color: var(--main-color);
  cursor: text;
}

ul li:before, ul.tight-list li:last-child:before
{
  background-color: var(--stripe-color);
}

header
{
  background-color: var(--header-bg-color);
  position: relative;
  box-shadow: none;
  transition: box-shadow 1s;
}

body.with-fixed-nav #main-nav
{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  border-top-color: #fff;
  box-shadow: 0 0.25em 0.75em -0.5em rgba(111, 120, 132, 0.5);
}

#main-nav .set-width
{
  position: relative;
  background-image: ;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: auto 60%;
  transition: background-image 1s;
}

#main-nav .set-width::before
{
  content: ' ';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 5em;
  background: transparent url(../graphics/logo.svg) 100% 50% no-repeat;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.75s;
}

body.with-fixed-nav #main-nav .set-width::before
{
  opacity: 1;
}

#top-brand
{
  display: flex;
  padding: 1.5em 0;
}

#header-left
{
  width: 66.6666%;
}

#header-right
{
  width: 50%;
  display: block;
  text-align: right;
  padding: 0 1em 0 0;
}

#header-right h1
{
  font-size: 1.75em;
  letter-spacing: -0.05em;
  margin-bottom: 0;
  color: var(--header-color);
}

#header-right p
{
  font-size: 1em;
  margin-bottom: 0;
  color: var(--header-color);
}

#home-link
{
  display: block;
  background: transparent url(../graphics/logo.svg) 0 50% no-repeat;
  background-size: contain;
  aspect-ratio: 3/1;
  height: 4em;
  margin: 0;
}

#phone
{
  margin: 0.5em 0;
  color: #116DD8;
  font-size: 1.25em;
}

#phone a.phone-link
{
  color: #116DD8;
}

#media-view header, #media-view #main-nav
{
  display: none;
}

#post-header
{
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#content
{
  min-height: 30em;
  line-height: 1.75;
  padding: 1.5em 0 0 0;
  margin: 0;
  color: var(--content-color);
  background-color: var(--content-bg-color);
}

#content .set-width:last-child
{
  padding-bottom: 4em;
}

body.blog-style-folder #content .set-width:last-child
{
  padding-bottom: 0;
}

#media-view #post-header
{
  padding-top: 0;
}

body.no-padding-top #content
{
  padding-top: 0;
}

body.with-fixed-nav #post-header
{
  padding-top: 4em;
}

body.no-padding-top.with-fixed-nav #post-header
{
  padding-top: 4.5em;
}

#trigger-touch-nav
{
  display: none;
  width: 64px;
  height: 64px;
  background: transparent url(../graphics/nav-trigger-ready.svg) 50% 50% no-repeat;
  background-size: cover;
  cursor: pointer;
  transition: background-image 0.5s;
}

#trigger-touch-nav.trigger-active
{
  background-image: url(../graphics/nav-trigger-on.svg);
}

#trigger-touch-nav span
{
  display: none;
}

#trigger-touch-nav:hover
{
  background-image: url(../graphics/nav-trigger-ready-hover.svg);
}

#trigger-touch-nav.trigger-active:hover
{
  background-image: url(../graphics/nav-trigger-on-hover.svg);
}

#main-nav
{
  background-color: #282C34;
  transition: all 0.75s;
  font-size: 1.05em;
  font-weight: 500;
}

nav ul
{
  display: flex;
  margin: 0 auto;
}

nav li
{
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  transition: 0.5s;
}

nav li:before, #aux-nav li:before, #social li:before, #social-footer li:before
{
  content: '';
  display: none;
}

nav a
{
  display: block;
  padding: 1.25em 1.5em;
  cursor: pointer;
  transition: all 0.5s;
  color: #DFE4ED;
  background-color: transparent;
}

nav a:hover
{
  background-color: rgba(0,0,0,0.1);
}

nav li:hover > a, nav li:hover
{
  color: #fff;
  border-bottom-color: var(--stripe-color);
}

nav li.has-dropdown:hover > a, nav li.has-dropdown:hover
{
  border-bottom-color: #EEF5F7;
  background-color: #F8FBFE;
}

nav ul.dropdown
{
  display: block;
  position: absolute;
  z-index: 999;
  left: 0;
  margin-left: 0;
  margin-top: 0;
  width: 18rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
  background-color: #F8FBFE;
  box-shadow: 0 0.75em 0.5em -0.75em rgba(111, 120, 132, 0.75);
}

nav li.hide-dropdown ul.dropdown
{
  display: none;
}

nav li:hover ul.dropdown
{
  max-height: 40rem;
}

nav ul.dropdown li
{
  display: block;
  width: 100%;
}

nav ul.dropdown li a, nav ul.dropdown li:first-child a
{
  margin: 0;
  padding: 1em 1.5em;
  border-top: 1px dotted #E9EEF1;
}

nav ul.dropdown li:last-child
{
  border-bottom: 0.5em solid var(--stripe-color);
}

nav ul.dropdown li a:hover
{
  background-color: #F2F6FB;
}

nav a.current, nav a.current:hover
{
  pointer-events: none;
}

#content .unit.text.padding-right
{
  padding-right: 2em;
}

audio
{
  width: 60%;
}

audio:focus
{
  outline: none;
  border: 1px solid var(--border-light-color);
}

/* Hosted videos */

.unit.hosted-video video
{
  width: 100%;
  height: auto;
}

.unit.hosted-video video
{
  object-fit: contain;
}

dt
{
  font-size: 1em;
  font-weight: bold;
}

table
{
  background-color: #fff;
  border: 1px solid var(--border-light-color);
  width: 100%;
  font-size: 0.95em;
  margin: 0 0 1em 0;
}

tr
{
  border-bottom: 1px solid var(--border-light-color);
}

th
{
  background-color: #DCE5ED;
  color: #3B4956;
}

td, th
{
  text-align: left;
  border: none;
  padding: 0.5em;
  vertical-align: middle;
}

td.centre, th.centre
{
  text-align: center;
}

td.right, th.right
{
  text-align: right;
}

.text-center
{
  text-align: center;
}

dt
{
  padding: 0.25em 0;
}

dd
{
  padding: 0.25em 0.25em 1em 2em;
}

hr
{
  border-top-color: var(--border-light-color);
}

.unit.html p:last-child
{
  margin-bottom: 0;
}

.unit.g-img
{
  position: relative;
  overflow: hidden;
  font-size: 0.9em;
}

.unit.img .text-part
{
  padding: 0;  
}

.unit.g-img .text-part
{
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 0;
  background-color: rgba(256,256,256,0.975);
  transition: max-height 0.75s;
}

.unit.g-img:hover .text-part
{
  max-height: 50%;
}

body.hide-image-captions .unit.img .text-part
{
  display: none;
}

.unit.img .unit-buy
{
  display: inline;
}

figcaption, .figcaption, 
a figcaption, a .figcaption
{
  font-size: 1em;
  margin-bottom: 0;
  line-height: 1.25;
}

.unit-buy.unit-sold
{
  color: #BCBDC0;
}

.unit-for-sale
{
  position: relative;
}

.unit.card.folder-card .text-part
{
  padding: 1em 0.25em 0.25em 0.25em;
}

.unit.color-black, 
.unit.color-black .text-part
{
  background-color: #2E333C;
  color: #E8EAEE;
}

.unit.color-black h2, 
.unit.color-black h3, 
.unit.color-black h4
{
  color: #fff;
}

.unit.color-black ul li:before, 
.unit.color-black ul.tight-list li:last-child:before
{
  background-color: #fff;
}

.unit.color-white, 
.unit.color-white .text-part
{
  background-color: #fff;
}

.unit.color-white-opaque, 
.unit.color-white-opaque .text-part
{
  background-color: rgba(256,256,256,0.9);
  color: #565D67;
}

.unit.color-black-opaque, 
.unit.color-black-opaque .text-part
{
  background-color: rgba(35, 42, 50, 0.8);
  color: #fff;
}

.unit.color-black-opaque *
{
  color: #fff;
}

.unit.color-grey
{
  background-color: #DEE4E9;
  color: #5D646D;
}

.unit.color-grey h3
{
  color: #4F5761;
}

h2.persist-text-title
{
  font-size: 1.5em;
}

#media-ctrl-left, #media-ctrl-right
{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 3em;
}

#media-ctrl-right
{
  left: auto;
  right: 0;
}

#media-centre
{
  width: calc(100% - 6em);
  padding: 0;
  margin: 0 auto;
}

#media-centre.video
{
  position: relative;
  width: 100%;
}

#media-heading
{
  min-height: 1.25em;
  text-align: center;
}

:fullscreen #media-heading
{
  display: none;
}

#media-engage .media-buy-img, #media-engage .media-sold-img, #media-engage .media-more-imgs
{
  font-size: 1em;
  border: 1px solid var(--main-color);
  padding: 0.125em 0.5em;
  background-color: var(--main-bg-color);
  color: var(--heading-color);
}

#media-heading .no-heading
{
  visibility: hidden;
}

#media-engage .media-sold-img
{
  color: #BEBEBE;
  border-color: var(--border-light-color);
}

.unit.text #media-engage a:hover
{
  background-color: #EDEDED;
}

#media-close-button, #media-expand, a#media-prev, a#media-next
{
  transition: background-image 0.5s;
}

#media-close-button:hover
{
  background-image: url(../graphics/media-close-hover.svg);
}

#media-expand:hover
{
  background-image: url(../graphics/media-expand-hover.svg);
}

:fullscreen #media-expand:hover
{
  background-image: url(../graphics/media-shrink-hover.svg);
}

a#media-prev:hover
{
  background-image: url(../graphics/media-nav-prev-hover.svg);
}

a#media-next:hover
{
  background-image: url(../graphics/media-nav-next-hover.svg);
}

.media-text-divider
{
  padding-top: 1em;
}

#media-heading
{
  padding: 0;
}

#media-canvas
{
  position: relative;
  margin-top: 1em;
}

#media-canvas img
{
  pointer-events: none;
}

#swipe-mask
{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

#swipe-mask img
{
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

#media-text-section
{
  padding: 0 0 3em 0;
  text-align: center;
}

iframe
{
  margin: 0 0 1em 0;
}

/* Selection lists */

ul.pselect, ul.pselect *
{
  transition: 0.5s;
}

ul.pselect li:before
{
  content: '';
  display: none;
}

ul.pselect, ul.pselect ul
{
  padding: 0;
  margin: 0;
  border: 1px solid var(--border-light-color);
  border-top: none;
}

ul.pselect
{
  margin-bottom: 0.5em;
}

ul.pselect li
{
  border-top: 1px solid var(--border-light-color);
  background-image: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

ul.pselect a, ul.pselect span
{
  display: block;
  padding: 0.25em 0.5em;
  cursor: pointer;
}

ul.pselect a, ul.pselect span
{
  display: block;
  width: 100%;
  padding: 0.5em;
  color: #2A2A2A;
  background-color: #fff;
}

ul.pselect a:hover
{
  background-color: #F8F8F8;
  color: #000;
}

ul.pselect span
{
  background-image: url(../graphics/has-dropdown.png);
  background-position:  98% 50%;
  background-repeat: no-repeat;
  background-size: auto 25%;
}

ul.pselect span.not-available
{
  cursor: not-allowed;
  background-image: none;
  background-color: #F3F3F3;
  color: #D3D3D3;
}

ul.pselect ul
{
  position: absolute;
  left: -1px;
  width: calc(100% + 2px);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s;
  z-index: 99;
}

ul.pselect li:hover ul
{
  max-height: 20em;
}

ul.pselect:hover, ul.pselect:hover *
{
  border-color: var(--border-dark-color);
}

fieldset
{
  border: none;
}

input[type=text], input[type=number], input[type=email], input[type=tel], select, textarea
{
  background-color: #fff;
  color: var(--main-color);
  font-family: var(--body-font);
  font-size: 1.075em;
  border: 1px solid var(--border-light-color);
  border-radius: 0.5em;
}

input[type=text].error, input[type=number].error, input[type=email].error, input[type=tel].error, select.error, textarea.error, input.error::placeholder, textarea.error::placeholder
{
  background-color: #fff;
  color: #D07093;
  border-color: #EAA6BF;
}

input[type=text]:focus, input[type=number]:focus, input[type=email]:focus, input[type=tel]:focus, select:focus, textarea:focus, textarea:focus
{
  outline: none;
  border: 1px solid #3F3F3F;
}

button, .button
{
  color: var(--button-color);
  background-color: var(--button-bg-color);
  border: 0.25em solid var(--button-border-color);
  font-family: var(--body-font);
  font-size: 1em;
  transition: 0.5s;
  text-align: center;
  border-radius: 0.5em;
  font-weight: bold !important;
}

button.full-width-button, .button.full-width-button
{
  width: 100%;
}

#contactForm .button
{
  display: inline-block;
  width: 100%;
  font-size: 1em;
}

button:hover, .button:hover
{
  color: var(--button-hover-color);
  background-color: var(--button-bg-hover-color);
  border-color: var(--button-border-hover-color);
}

.tab-section label.tab-label
{
  border-top-left-radius: 0.25em;
  border-top-right-radius: 0.25em;
  border-color: var(--border-light-color);
  background-color: #F2F6FB;
  color: var(--text-strong-color);
  font-weight: bold;
}

.tab-section label.tab-label:hover
{
  background-color: #EBEEF2;
  color: var(--link-hover-color);
}

.tab-section input.tab-switch:checked + label
{
  background-color: var(--main-bg-color);
  color: var(--text-strong-color);
  border-bottom-color: #fff;
}

.tab-section.padding-none .unit.panel-content
{
  padding-top: 0;
}

.tab-ctrl-follower
{
  margin: -30px -1em 0 -1em;
  width: calc(100% + 2em);
  height: 30px;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, #F2F6FB 0%, #fff 100%);
  border-bottom: 1px solid var(--border-light-color);
}

#contactForm #clientAreaBox
{
  display: none;
}

/* Forms */

ul.error li:before
{
  background-color: var(--text-warning-color);
}

ul.error li
{
  padding-bottom: 0;
}

ul.error li:last-child
{
  padding-bottom: 1em;
}

.tip
{
  color: #11819E;
}

.warning
{
  color: var(--text-warning-color);
}

.unit.no-margin-bottom
{
  margin-bottom: 0;
}

.unit.margin-bottom
{
  margin-bottom: 2em;
}

input.readonly
{
  background-color: #E7E7E7;
  color: #A0A0A0;
}

input.pseudo-submit
{
  position: absolute;
  left: -999em;
}

p.check-ctrl-contr
{
  padding: 0 0 0.5em 0;
}

.check-ctrl input
{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark
{
  position: absolute;
  top: 0;
  left: 100%;
  padding: 0.25em;
  font-size: 1.5em;
  border: 1px solid var(--border-light-color);
  color: #fff;
}

.check-ctrl:hover input ~ .checkmark
{
  background-color: #E1E1E1;
  color: #E1E1E1;
}

.check-ctrl input:checked ~ .checkmark
{
  background-color: #fff;
  color: #4F4F4F;
}

.check-ctrl:hover input:checked ~ .checkmark
{
  background-color: #E1E1E1;
  color: #4F4F4F;
}

p.search-box
{
  border-color: var(--button-border-color);
}

p.search-box input, 
p.search-box .button
{
  border-radius: 0;
  border: none;
  padding: 0.5em 1em;
}

.folder-item-nav
{
  padding-top: 1em;
  font-size: 0.85em;
}

.folder-item-nav a i.fas, 
.folder-item-nav a i.fa-solid
{
  position: relative;
  top: -0.125em;
  width: 1.5em;
  font-size: 0.75em;
  padding: 0.25em;
  background-color: var(--link-color);
  color: #fff;
  border: none;
  border-radius: 0.25em;
  transition: background-color 0.5s;
  text-align: center;
}

.folder-item-nav a
{
  display: block;
}

.folder-item-nav a:hover i.fas, 
.folder-item-nav a:hover i.fa-solid
{
  color: #fff;
  background-color: var(--link-hover-color);
}

footer
{
  width: 100%;
  min-height: 15em;
  padding: 2em 0;
  font-size: 0.85em;
  background-color: var(--footer-bg-color);
}

footer .set-width
{
  display: flex;
}

#footer-left, #footer-right
{
  width: 50%;
}

#footer-right
{
  text-align: right;
}

#logo-footer
{
  display: block;
  width: 50%;
  aspect-ratio: 3/1;
  background: transparent url(../graphics/logo-mono-full-hz.svg) 0 50% no-repeat;
  background-size: contain;
}

footer, footer p, footer a
{
  color: var(--footer-color);
}

footer a:hover
{
  color: #CBD0D7;
}

#aux-nav
{
  list-style: none;
  padding: 0;
  margin: 0 0 0.25em 0;
  line-height: 1em;
}

#aux-nav li
{
  display: inline-block;
  margin: 0;
}

#aux-nav li:after
{
  display: inline-block;
  padding: 0 0.25em 0 0.5em;
  content: ' \2002 ';
}

#aux-nav li:last-child:after
{
  display: none;
}

#social
{
  font-size: 1.5em;
  margin: 0;
}

#social li a
{
  margin: 0 0 0.125em 0.125em;
  padding: 0.125em;
}

#social-footer
{
  font-size: 1.5em;
  margin: 0.25em 0 1em -0.25em;
}

#social-footer li, #social li
{
  display: inline-block;
  margin: 0;
  padding: 0;
}

#social-footer li a
{
  margin: 0 0.125em 0.125em 0;
  padding: 0.125em;
}

#social li a
{
  color: var(--header-color);
}

#social li a:hover
{
  color: #156AF7;
}

/* ----- GRID ----------------------------------- */

.unit.img-grid, .unit.pd-grid, .unit.folder-grid
{
  gap: 1em;
}

.unit.pd-card, 
.unit.folder-card, 
.unit.img-card
{
  text-align: center;
}

a.unit.card figure img, 
a.unit.card .figure img
{
  transition: transform 2s ease;
}

a.unit.card:hover figure img, 
a.unit.card:hover .figure img
{
  transform: scale(1.075);
}

.slide-canvas a.unit.card:hover figure img, 
.slide-canvas a.unit.card:hover .figure img
{
  transform: none;
}

.unit.pd-card .sold-label
{
  position: absolute;
  display: inline-block;
  top: 1em;
  right: 1em;
  padding: 0.5em 1em;
  background-color: var(--button-bg-hover-color);
  color: var(--button-hover-color);
  opacity: 1;
  transition: opacity 0.5s;
}

.unit.pd-card:hover .sold-label
{
  opacity: 0;
}

/* Custom ------------- */

.unit.graph-background
{
  background: transparent url(../graphics/graph-paper.svg) -1em -1em repeat;
}

.unit.slides.show-logo .unit.slide:first-child
{
  background: transparent url(../graphics/logo-slide-background.svg) no-repeat;
  background-size: contain;
}

#slideSelect
{
  bottom: 0;
}


@media all and (max-width: 1579px)
{
  .unit.slides.w-1-1
  {
    width: calc(100% + 2em);
    margin-left: -1em;
    margin-right: -1em;
  }
}

@media all and (max-width: 1160px)
{

  #mobile-detect
  {
    width: 1px;
    height: 1px;
  }

  .mobile-only
  {
    display: block;
  }
  
  #trigger-touch-nav
  {
    display: block;
    position: absolute;
    z-index: 999;
    top: 0.5em;
    right: 0.5em;
  }

  #top-brand
  {
    display: block;
    padding: 1em 0;
  }

  #header-left, #header-right
  {
    font-size: 0.75em;
    width: 100%;
    text-align: center;
  }

  #home-link
  {
    background-position: 50% 50%;
    height: 5em;
    margin: 0 auto 1em auto;
  }

  #phone, #social
  {
    display: block;
    width: 50%;
    margin-top: 0.75em;
    text-align: right;
  }

  #social
  {
    text-align: left;
    margin-top: 0.6em;
  }

  header
  {
    width: 100%;
    position: relative;
  }

  #main-nav
  {
    position: absolute;
    top: 8.5em;
    z-index: 999;
    display: block;
    max-height: 0;
    overflow: hidden;
    border-top: none;
    text-align: center;
    opacity: 0;
    transition: 0.5s;
  }
  
  #main-nav.nav-active
  {
    overflow: visible;
    max-height: 40em;
    opacity: 1;
  }

  #main-nav .set-width
  {
    width: 100%;
  }

  #main-nav ul
  {
    display: block;
  }

  #main-nav ul ul
  {
    display: none;
  }

  #main-nav *
  {
    border-bottom: none;
    background-color: var(--main-bg-color);
  }

  #main-nav ul.top-level
  {
    border-bottom: 0.5em solid var(--stripe-color);
    margin-left: 0;
    padding: 0;
  }

  #main-nav a, #main-nav a:hover
  {
    padding: 1.25em 0;
    border-top: 1px solid #22272F;
  }

  #main-nav a:hover
  {
    background-color: rgba(0,0,0,0.3);
  }

  .slides .persist-text
  {
    width: 75%;
    left: 25%;
  }

  .slides .persist-text.text-moved
  {
    width: 100%;
    left: 0;
  }

  a.phone-link, a.phone-link:hover
  {
    pointer-events: auto;
    color: var(--link-color);
    cursor: pointer;
  }
  
  a.phone-link:hover
  {
    color: var(--link-hover-color);
  }

  audio
  {
    width: 75%;
  }

  #media-view #media-centre
  {
    width: 100%;
  }

  #media-view #media-prev, #media-view #media-next, #media-view #media-expand
  {
    display: none;
  }

  #media-ctrl-left, #media-ctrl-right
  {
    position: absolute;
  }

  .unit.img.slide-in-caption .text-part
  {
    font-size: 1.5em;
    bottom: 50%;
  }

  #footer-left
  {
     width: 33.3333%;
  }

  #footer-right
  {
    width: 66.6666%;
  }

  #logo-footer
  {
    width: 80%;
  }
}

@media all and (max-width: 1024px)
{

/* -------- CUSTOM ----------------*/

  .w-1-4, .w-1-3, .w-1-2, .w-2-3, .w-3-4, 
  .w-1-4.margin-none, .w-1-4.margin-bottom, 
  .w-1-3.margin-none, .w-1-3.margin-bottom, 
  .w-1-2.margin-none, .w-1-2.margin-bottom, 
  .w-2-3.margin-none, .w-2-3.margin-bottom, 
  .w-3-4.margin-none, .w-3-4.margin-bottom
  {
    width: 100%;
  }

  .w-1-2.fixed-width
  {
    width: 50%;
  }

  #content .unit.text.padding-right
  {
    padding-right: 0;
  }

  audio
  {
    width: 100%;
  }

  .unit.hosted-video
  {
    padding: 0;
  }

  body.pg-root .unit.card.card-layered.text-center .text-part h2
  {
    font-size: 2em;
  }
}

@media all and (max-width: 800px)
{
  .unit.img-grid, .unit.pd-grid, .unit.folder-grid,
  .unit.cols-2, .unit.cols-4, .unit.cols-5, .unit.cols-6
  {
    grid-template-columns: 1fr;
  }

  .unit.card.card-h.card-offset .card-pos
  {
    flex-direction: column;
  }
  
  .unit.card.card-h.card-rev.card-offset .card-pos
  {
    flex-direction: column-reverse;
  }
  
  .unit.card.card-h.card-offset .card-img,
  .unit.card.card-h.card-offset.card-rev .card-img,
  .unit.card.card-h.card-offset .text-part, 
  .unit.card.card-h.card-offset.card-rev .text-part
  {
    width: calc(100% - var(--card-offset));
  }
  
  .unit.card.card-h.card-offset .text-part,
  .unit.card.card-h.card-offset.card-rev .card-img
  {
    margin: calc(var(--card-offset) * -2) var(--card-offset) auto var(--card-offset);
  }
  
  .unit.card.card-h.card-offset.card-rev .text-part
  {
    width: calc(100% - var(--card-offset));
    margin: 0 var(--card-offset) var(--card-offset) auto;
  }

  body.pg-root .unit.card.card-layered.text-center .text-part h2
  {
    font-size: 1.75em;
  }

  footer .set-width
  {
    display: block;
  }

  #footer-left, #footer-right
  {
    width: 100%;
    text-align: center;
  }

  #logo-footer
  {
    width: 25%;
    margin: 2em auto;
  }
}

@media all and (max-width: 600px)
{

  body.pg-root .unit.card.card-layered.text-center .text-part
  {
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0.5em;
    background-color: rgba(0,0,0,0.45);
  }

  body.pg-root .unit.card.card-layered.text-center .text-part h2
  {
    font-size: 1.15em;
  }
}