/*
 Theme Name:   Beaver Custom
 Theme URI:    https://www.understrap.com
 Description:  UnderStrap Child Theme - used for Beaver
 Author:       Beaver
 Author URI:   http://www.beaver-immo.ch
 Version:      1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: holger1411/understrap-child
*/

/* ======== GENERAL STYLE ======= */

:root {
    --primary:  #00b346;
    --bs-dark-rgb: 80,80,80;
    --bs-dark: #505050;
    --bs-primary: var(--primary);
    --bs-primary-rgb : 0, 179, 70;
}


body {
    background-color: rgb(246,246,246);
    font-family: var(--wp--preset--font-family--nunito);
}

/* main.container {
    font-family: var(--wp--preset--font-family--nunito);
} */

.container-max {
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto;
    padding-left: .5rem; 
    padding-right: .5rem;
}

/* === NAVBAR === */

.navbar-custom {
    min-height: 105px;
}

@media screen and (min-width: 600px) {
    .navbar-custom .wp-block-navigation li.wp-block-navigation-item a {
    padding: 1.5rem 1rem;
    background: linear-gradient(to bottom, transparent 50%, #00b346 50%);
    background-size: 100% 200%;
    transition: background-position .5s;
    display: flex;
    align-items: center;
    white-space: nowrap;
    height:105px;
    text-decoration: none;
    font-weight: 400;
    text-transform: uppercase;
    }
}


.navbar-custom .wp-block-navigation li.wp-block-navigation-item.current-menu-item a {
    background-color: #00b346cc;
}
.navbar-custom .wp-block-navigation li.wp-block-navigation-item a:hover, .navbar-custom .wp-block-navigation li.wp-block-navigation-item.cuurent-item a {
    background-position: 0 -100%;
}


.navbar-custom ul.wp-block-navigation__container {
    gap: 0;
}

.slider-style {
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 8s;
    animation-delay: 2s;
    animation-name: color-to-black;
    height: 200px;
}

 .slider-style img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 44%;
}


@keyframes color-to-black {
    0% {
        filter: grayscale(0);
    }
    50% {
        filter: grayscale(1);
    }
}

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

.page-title-large {
    font-weight: 700;
    font-size: var(--wp--preset--font-size--xx-large);
    line-height: 1.2;
    position: relative;
    margin-bottom: 2vmin;
}

.page-title-large::before {
    content: "";
    position: absolute;
    bottom: 8px;
    left: -5%;
    width: 50%;
    height: 12px;
    background-color: var(--wp--preset--color--primary-light);
    z-index: -1;
}


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

.footer-link-linkedin{
	background-image: url(./images/icon-linkedin-48.png);
	padding-left: 36px;
	padding-top: 4px;
	background-repeat: no-repeat;
	height: 36px;
	background-size: 48px;
	display: inline-block;
	background-position: -8px -8px;
}


.staticmap-container {
    position: relative;
}

.staticmap-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    
}

.staticmap-text a {
        background-color: rgba(0, 0, 0, .65);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.2s ease-in;
        width: 100%;
}


.staticmap-text a:hover {
  opacity: 1;
}



/*************************************
* Generalities
*************************************/
a:not(.wp-block-button__link, .wp-block-file__button, :has(.has-background), :has(.wp-block-image)) {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
    text-underline-offset: 5px;
    font-weight: 600;
}

a:visited:not(.wp-block-button__link, .wp-block-file__button), a:focus:not(.wp-block-button__link, .wp-block-file__button){
    text-decoration: underline solid #50505099;
}

a:not(.wp-block-button__link, .wp-block-file__button):hover {
    text-decoration: underline dotted currentColor;
}

/* Base for label styling in FORM */

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

[type="checkbox"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 1.25em; height: 1.25em;
    border: 1px solid #00b346;
    background: #e4e4e4;
}
[type="checkbox"]:checked + label:before{
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 1.25em; height: 1.25em;
    border: 1px solid #00b346;
    background: #00b346;
}

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  /*content: '✔';*/
  position: absolute;
  top: .1em; left: .1em;
  font-size: 1.4em;
  line-height: 0.8;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}

/* radio aspect ==== */

/* Base for label styling */
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  margin-right: .5rem;
  cursor: pointer;
}

/* radio aspect */

[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0; 
    top: 0;
    width: 1.125em; height: 1.125em;
    border: 2px solid #00b346;
    background: transparent;
}
[type="radio"]:checked + label:before{
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 1.25em; 
    height: 1.25em;
    border: 1px solid #00b346;
    background: #00b346 url(./images/icon-checked.svg);
    background-position: center center;
    background-size: 100%;
}

/* checked mark aspect */

[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  /*content: '✔';*/
  position: absolute;
  top: .1em; left: .1em;
  font-size: 1.4em;
  line-height: 0.8;
  /*color: #00b346;*/
  transition: all .2s;
}
/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled radio */
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="radio"]:disabled:checked + label:after {
  color: #999;
}
[type="radio"]:disabled + label {
  color: #aaa;
}


/*************************************
* Properties listing page
*************************************/

/* listing properties */

.listingproperties {
    color:#171717;
}

.listingproperties .filters {
    border: 2px solid var(--primary);
    font-size: 1em; 
    position:relative; 
    background-color: #f0f0f0;
}

.listingproperties  .nbresults{ 
    color: #fff; 
    background-color: var(--primary); 
    width: 100%; margin: 0 auto; 
    padding: 10px; 
    font-size: 1.25rem; 
}

.listingproperties .filters label {
    font-weight: 400;
    color:#171717;
 }
.listingproperties .filters label.green {
    font-weight: 400; 
    color:#00b346; 
    padding: .75rem 0; 
    display: block; 
    text-align: center;
}

.listingproperties .filters .categories ul {
    list-style-type: none;
    padding: 0 0 0 10px; 
    margin:0;
    font-weight: 400; 
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}


.listingproperties .filters .categories .subcategories{
    padding:20px 0 0;
    visibility: hidden;
    opacity: 0;
    height:0;
    transition: .25s ease-in-out;
}

.listingproperties .filters .subcategories.display
{
    visibility: visible;
    opacity: 1;
    height:100%;
}
.listingproperties .filters .categories .subcategories ul{list-style-type: none;padding: 0 0 0 10px; margin:0;}

.listingproperties .filters .sliders{
    padding: 36px;
}
.listingproperties .filters .sliders .valuesSlider{font-weight:200;}

.listingproperties .filters .noUi-horizontal{height:7px}
.listingproperties .filters .noUi-target{background: rgba(0,179,70,0.6); border: none;box-shadow: none; margin-top: 8px;}
.listingproperties .filters .noUi-connect{background: #505050;}
.listingproperties .filters .noUi-horizontal .noUi-handle{border:none;border-radius:50%;box-shadow:none;width: 15px; height: 15px;background: #00b346;left: -7.5px;top: -3.5px;}
.listingproperties .filters .noUi-horizontal .noUi-handle:after, .filters .noUi-horizontal .noUi-handle:before{display:none}


.listingproperties .filters .noUi-tooltip {
    color: var(--wp--preset--color--secondary);
    background-color: #fffe;
    font-size: 0.8125em;
    padding: 0px 3px;
    left: 25%;
}

.listingproperties .sidebarlocation .title{width:100%; background: #00b346; color:#fff;border: 3px solid #00b346;}
.listingproperties .sidebarlocation .lastsearch{width:100%; background: #505050; color:#fff; padding: 12px 8px; position:relative;}
.listingproperties .sidebarlocation .lastsearch .picture{border-right:2px solid #00b346; padding-right:8px; width:65%; float:left;
    height: 157px;
    overflow: hidden;}
.listingproperties .sidebarlocation .lastsearch .description{font-size:0.7em; width:32%; bottom: 8px; right: 0; position: absolute; }
.listingproperties .sidebarlocation .lastsearch .description .amount{color: #00b346;}

.listingproperties .map{border:2px solid #00b346; background-color: #222;}
/*.listingproperties .map img{max-width:100%;}*/
.listingproperties #mapGoogle{height:100%; height: 480px;}

.listingproperties .location{background: #505050; color:#fff; padding:15px; font-size:0.8em; margin-bottom: 30px;}
.listingproperties .location a {
    color:#fff;
    text-decoration:none;
}
.listingproperties .location:hover .hr_horizontal {
    background-position:left bottom;
}
.listingproperties .location .picture {
    margin: 0 auto;
    position: relative;
    height: 231px;
    overflow: hidden;
}
.listingproperties .location .hr_horizontal{
    width:100%;
    height:1px;
    background: #fff;
    background: linear-gradient(to right, #00b346 50%, #fff 50%);
    background-size: 201% 100%;
    background-position:right bottom;
    -webkit-transition: background-position .2s;
    -moz-transition: background-position .2s;
    transition: background-position .2s;
}
.listingproperties .location .location_animation_container {
    position:relative;
}
.listingproperties .location .location_animation_container .location_animation {
    position: absolute;
    top: 0;
    left:0;
    width:100%;
    height:30px;
    overflow:hidden;
}

.listingproperties .location .location_moreinfo_container {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0%;
    transition: 0.2s;
}

.listingproperties .location:hover .location_moreinfo_container {
    width: 30px;
    display: normal;
}
.listingproperties .location .picture .hover {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background-color: rgba(0,0,0, 0.5);
    color: #fff;
    opacity: 0;
    transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}
.listingproperties .location:hover .picture .hover {
    opacity: 1.0;
    transition: opacity .5s linear;
    -moz-transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
}
.listingproperties .location .picture .hover p {
    font-weight: 300;
    padding: 10px;
    text-align: left;
    width: 100%;
    display: block;
}
.listingproperties .location .picture .hover p i{
    font-size:30px;
    font-weight: normal;
}

.listingproperties .location .amount{color: #00b346; }

.listingproperties .fadeLoader{
    display: none;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,.5);
    z-index: 2;
}

.listingproperties .fadeLoader .loader {
    border: 10px solid #efefef;
    border-radius: 50%;
    border-top: 10px solid #00b346;
    width: 75px;
    height: 75px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    width: 5em;
    height: 5em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -2.5em;
    margin-top: -2.5em;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === projet neuf / program == */

.properties .property-item, a.program-item {
    background-color: var(--primary);
    color: #fff !important;
    filter: grayscale(.95);
    display: block;
    margin-bottom: 1rem;
    font-family: 'Nunito';
    box-shadow: 0 0 16px #2226;
    text-decoration: none;
    height: calc(100% - 2rem);
    transition: all .2s linear;
    font-weight: normal;
}

.properties .property-sold, .program-sold {
    opacity: .75; 
}

.properties .property-item h2, .program-item h2, .program-item h2 a{
    margin: 1rem 0;
    font-variant: small-caps;
    font-size: 24px;
    font-weight: 400;
    color: white;
}


.properties .property-item:hover, a.program-item:hover{
	text-decoration: none;
    box-shadow: 0 0 26px #2229;
    filter: grayscale(0);
}

.properties .property-item .property-thumbnail img {
	height: 200px;
	object-fit: cover;
    width: 100%;
}


.properties .property-item .property-details {
	padding: 1rem;
    color: white;
    font-weight: 400;
}

.properties .property-item .property-details .meta-property {
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	font-size: .875rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.properties .property-item .property-details .meta-property > div {
	border-bottom: #00b346 dotted 2px;
}

.properties .property-item .property-details .cat-properties span, .cat-program {
    padding: 2px 6px;
    margin: 0 4px 8px 0;
    font-size: .875rem;
    background-color: #2222;
    color: white;
    display: inline-block;
}

.properties .property-item .property-details .meta-property-town {
    padding-top: .75rem;
}

.program-item  {
    box-shadow: var(--wp--preset--shadow--natural);
    position: relative;
}

.program-item .program-localisation  {
    gap: .25rem;
}

.program-item .program-figures  {
    font-size: .875em;
}

.program-item .program-details {
    padding: 1rem 2rem;
    margin-bottom: 2rem;
    font-size: var(--wp--preset--font-size--small);
}

.program-item h2 a {
    font-size: var(--wp--preset--font-size--large);
}

.program-item .program-thumbnail img{
    height: 270px;
    max-width: 100%;
    object-fit: cover;
}

.sliders .noUi-target[disabled] .noUi-handle {
    background-color: #999;
}

.sliders .noUi-target[disabled] + div[class$=-label] label.green {
    color: #999;
}

/* === PROPERTY specific single === */


.property-single-header {
	padding: .5rem 1rem;
}

.property-single-reference {
    font-weight: 200;
    color:#666;
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
}

.property-single-content {
	padding: 1rem;
}

.property-single-subtitle {
    font-weight: 200;
    color:var(--wp--preset--color--primary);
    padding: 0px;
    margin: 1.5rem 0 2rem;
    font-size: 1.375rem;
    position: relative;
    text-transform: uppercase;
}

.property-single-subtitle::before {
    content: "";
    width: 60px;
    height: 4px;
    background: var(--wp--preset--color--primary-light);
    display: inline-block;
    position: absolute;
    bottom: -6px;
    left: -20px;
    border-radius: 3px;
}

/***************************************************
 general
***************************************************/

 .page-title  {
    font-weight: 300;
    color: var(--primary);
    border-bottom: solid 1px #00b346;
    font-variant: small-caps;
    font-size: var(--wp--preset--font-size--large);
}


@media (min-width: 992px) and (max-width: 1200px){

}
@media (min-width: 768px) and (max-width: 991px){
    .wp-block-navigationli:hover{
        background-position: initial;
    }
    .page-title, .is-style-title-underline-green  {
        font-weight: 500;
    }
    .wp-block-group-is-layout-constrained {
    padding-left: .75rem;
    padding-right: .75rem;
    }
    .wp-block-group-is-layout-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 767px){
    .page-title, .is-style-title-underline-green  {
        font-weight: 500;
    }
    #main-menu{
        line-height: inherit;
        padding: 1rem 0;
    }
    .wp-block-navigation li{
        padding: .5rem 0;
        font-size: 1.125rem;
    }
    .wp-block-navigation li .nav-link{
        margin: .5em 1rem;
        padding: 0;
    }
    .wp-block-navigationli:hover{
        background-position: initial;
    }

    /* grid layout */
    .wp-block-group-is-layout-grid {
        grid-template-columns: 1fr !important;
    }

    .wp-block-group-is-layout-constrained {
    padding-left: .5rem;
    padding-right: .5rem;
    }
}


/* === GENERAL CONTENT === */

.entry-content ul.wp-block-list {
    list-style: square;
    margin-block-start: .5rem;
}

.entry-content ul.wp-block-list li::marker{
    color: var(--primary);
    font-size: 20px;
}

/* status for programs / statut pour les programmes */

.sale-status {
    position: absolute;
    right: 0;
    top: 2rem;
    background:var(--wp--preset--color--primary);
    color: white;
    box-shadow: var(--wp--preset--shadow--natural);
}

.sale-status > span {
    padding: .125rem 1rem;
    display: inline-block;
    text-transform: uppercase;
}

.category-program {
    padding: .125rem 1rem;
    position: absolute;
    right: 0;
    top: .5rem;
    background: #f1f1f1ee;
    color: #666;
    box-shadow: var(--wp--preset--shadow--natural);
}


/* ===== UTILITIES ===== */

.alert-info {
    padding: 2rem 1rem;
    background: #00b34624;
    color: black;
    border-left: 3px solid var(--primary);
    font-weight: bold;
}

.full-width-banner {
    width: calc( 100vw - 8px);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

/* loader square*/

.loader-sq-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 470px;
    background-color: #3331;
  }


  .loader-sq, .loader-sq:before, .loader-sq:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
  }
  .loader-sq {
    color: var(--primary);
    font-size: 7px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
  }
  .loader-sq:before,
  .loader-sq:after {
    content: '';
    position: absolute;
    top: 0;
  }
  .loader-sq:before {
    left: -3.5em;
    animation-delay: -0.32s;
  }
  .loader-sq:after {
    left: 3.5em;
  }
  
  @keyframes bblFadInOut {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
    40% { box-shadow: 0 2.5em 0 0 }
  }
      

  /* ============ icons block -- filter ---  PROPERTY ======== */

  .icons-property.is-layout-grid {
    margin: 2rem 0;
    display: inline-grid;
  }

  .icons-property .wp-block-group p {
    font-size: var(--wp--preset--font-size--small);
    text-align: center;
    line-height: 1;
    margin-block-start: 0.375rem !important;
    margin: 0;
    color: #7a7a7a;
  }

  .icons-property .wp-block-group p.has-primary-color {
    font-weight: 600;
    background-color: #fff8;
    padding: .25rem 0;
  }

  .icons-property .wp-block-group figure {
    height: 80px;
    padding: 0 1rem;
}

.icons-property .wp-block-group figure img {
    max-width: 75px;
    filter: contrast(.5);
}


/* === PAGINATION ==  */

nav.pagination {
    gap: 1rem;
    margin: 1rem 0;
}

nav.pagination > * {
    padding: .375rem .75rem;
}

nav.pagination > a {
    background-color: #2221;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
    transition: all .15s ease-out ;
}

nav.pagination > a:hover {
    background-color:var(--wp--preset--color--primary);
    color: white;
}

nav.pagination > .current {
    background-color:var(--wp--preset--color--primary-light);
}

.block-notched {
    clip-path: polygon(0 0 ,100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

/*HOMEPAGE */

.homepage-prestations .wp-block-group  {
   filter: grayscale(1);
    position: relative;
    overflow: hidden;
    padding: 0;
}

.homepage-prestations .wp-block-group:hover  {
   filter: grayscale(0);
}


.homepage-prestations .wp-block-group figure a::before {
    content: "";
    width: 0%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--primary);
    transition: width 0.15s ease-out;
}

.homepage-prestations .wp-block-group figure a::after {
    content: "+";
    color: white;
    position: absolute;
    background: var(--primary);
    right: -30px;
    bottom: 0;
    text-align: center;
    padding: 0px 8px;
    font-weight: 600;
    font-size: 18px;
    transition: right 0.2s ease-out;
}

.homepage-prestations .wp-block-group figure a:hover::after {
    right: 0;
}

.homepage-prestations .wp-block-group figure a:hover::before {
    width: 100%;
}

.homepage-prestations .wp-block-group figure a:hover {
    border-bottom-width: 5px;
}

.homepage-slider .cb-slide {
    position: relative;
}

.homepage-slider .slide-category {
    position: absolute;
    left: 0px;
    margin: 0;
    padding: .25rem .5rem;
    background: var(--wp--preset--color--secondary);
    color: white;
    bottom: 0px;
    font-family: sans-serif;
    font-size: 14px;
}

.homepage-slider .wp-block-heading {
    position: absolute;
    left: 0;
    top: -1px;
    clip-path: polygon(0 0 ,100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    background-color: var(--wp--preset--color--primary);
    color: white;
    padding: .5rem;
}

.key-figure-company {
    border-left: 3px solid var(--wp--preset--color--primary-light);
    padding-left: 1rem;
}

/* carrousel initial */

.cb-carousel-block {
--wp--custom--carousel-block--navigation-size: 1.5rem;
--wp--custom--carousel-block--navigation-sides-offset: -2rem;
--wp--custom--carousel-block--navigation-color: white;
--wp--custom--carousel-block--pagination-bullet-color: var(--wp--preset--color--primary-light);
--wp--custom--carousel-block--pagination-bullet-active-color: var(--wp--preset--color--primary);
--wp--custom--carousel-block--image-margin-top: .0;
--wp--custom--carousel-block--image-margin-bottom: 0;
--wp--custom--carousel-block--pagination-bullet-size: .75rem;
}

.cb-carousel-block .cb-button-prev, .cb-carousel-block .cb-button-next {
    background: var(--wp--preset--color--primary);
    padding: 1.5rem;
    border-radius: 50%;
}

.wp-block-template-part:has(>.is-position-sticky) {
	--wp-admin--admin-bar--position-offset: var( --wp-admin--admin-bar--height, 0px );
	position: sticky;
	top: calc( 0px + var( --wp-admin--admin-bar--position-offset, 0px ) );
	z-index: 10;
}