@font-face {
    font-family: Roboto;
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('roboto-300-woff2.woff2') format('woff2')
        ,url('roboto-300-woff.woff') format('woff');
}
@font-face {
    font-family: Roboto;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('roboto-regular-woff2.woff2') format('woff2')
        ,url('roboto-regular-woff.woff') format('woff');
}
@font-face {
    font-family: Roboto;
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: local('')
        ,url('roboto-italic-woff2.woff2') format('woff2')
        ,url('roboto-italic-woff.woff') format('woff');
}
@font-face {
    font-family: Roboto;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('roboto-bold-woff2.woff2') format('woff2')
        ,url('roboto-bold-woff.woff') format('woff');
}
@font-face {
    font-family: Roboto;
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: local('')
        ,url('roboto-bold-italic-woff2.woff2') format('woff2')
        ,url('roboto-bold-italic-woff.woff') format('woff');
}
@font-face {
    font-family: Roboto;
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('roboto-900-woff2.woff2') format('woff2')
        ,url('roboto-900-woff.woff') format('woff');
}
@font-face {
    font-family: Roboto;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('roboto-500-woff2.woff2') format('woff2')
        ,url('roboto-500-woff.woff') format('woff');
}
@font-face {
    font-family: Palanquin Dark;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('palanquin-dark-regular-woff2.woff2') format('woff2')
        ,url('palanquin-dark-regular-woff.woff') format('woff');
}
@font-face {
    font-family: Palanquin Dark;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('palanquin-dark-500-woff2.woff2') format('woff2')
        ,url('palanquin-dark-500-woff.woff') format('woff');
}
@font-face {
    font-family: Palanquin Dark;
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('palanquin-dark-600-woff2.woff2') format('woff2')
        ,url('palanquin-dark-600-woff.woff') format('woff');
}
@font-face {
    font-family: Palanquin Dark;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: local('')
        ,url('palanquin-dark-bold-woff2.woff2') format('woff2')
        ,url('palanquin-dark-bold-woff.woff') format('woff');
}
 
 
:root{
    
    --bs-primary-rgb: 205 35 94;
    --bs-primary-hsl: 339 70.8% 47.1%;
    --bs-primary-hex: #cd235e;
    --bs-primary: rgb(205 35 94);
    --bs-dark-rgb: 20 20 20;
    --bs-dark-hsl: NAN 0% 7.8%;
    --bs-dark-hex: #141414;
    --bs-dark: rgb(20 20 20);
    --palanquin: 'Palanquin Dark', Helvetica, sans-serif;
    --yellow: #af9f89;
    --dark-gray: #454441;
}
body{
    position:relative;
    font-family:'Roboto', Helvetica, sans-serif;
    font-size:16px;
    overflow-x:hidden;
    letter-spacing:0.025rem;
}
a{
    color:var(--bs-primary);
    text-decoration:none;
}
img[width][height] {
    content-visibility: auto;
}
img {
    max-width: 100%;
    height: auto;
}
.img-full{
    width:100%;
    object-fit:cover;
}
.bg-dark{
    background-color:var(--bs-dark) !important;
}
.btn{
    text-transform:uppercase;
    border-width:2px;
    font-size:16px;
    font-weight:700;
    letter-spacing:0.025rem;
}
.btn-primary,
.btn-primary:visited{
    background-color:var(--bs-primary) !important;
    border-color:var(--bs-primary) !important;
}
.btn-outline-primary,
.btn-outline-primary:visited{
    color:var(--bs-primary) !important;
    border-color:var(--bs-primary) !important;
}
.btn-primary:hover,
.btn-primary:visited:hover,
.btn-primary:focus,
.btn-primary:visited:focus{
    color:var(--bs-primary) !important;
    border-color:var(--bs-primary) !important;
    background-color:#fff !important;
    box-shadow:none;
}
.btn-outline-primary:hover,
.btn-outline-primary:visited:hover,
.btn-outline-primary:focus,
.btn-outline-primary:visited:focus{
    background-color:var(--bs-primary) !important;
    border-color:var(--bs-primary) !important;
    color:#fff !important;
    box-shadow:none;
}
h2, .h2{
    font-size:34px;
    letter-spacing:0.05rem;
    line-height:32px;
}
h3, .h3{
    font-size:30px;
    letter-spacing:0.05rem;
    line-height:32px;
}
.text-primary{
    color:var(--bs-primary) !important;
}
@media (min-width:768px){
    h2, .h2{
        font-size:48px;
        line-height:32px;
    }
}



/* Navigation */
nav.navbar{
    top:0;
    left:0;
    z-index:1090;
    right:0;
    background-color:#fffcf7;
}

.navbar .navbar-brand svg{
    width:126px;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus{
    opacity:.5;
}

.nav-link{
    text-transform:uppercase;
    font-weight:700;
    font-family: var(--palanquin);
    letter-spacing:0.025rem;
    font-size:18px;
}
.navbar-light .navbar-nav .nav-link{
    color:var(--bs-dark);
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active{
    color:var(--bs-primary);
}

.nav-bkg {
    display: none;
}

.offcanvas-body .btn{
    width:100%;
    padding:1rem 0.75rem;
}
footer p{
    color:var(--bs-dark);
}
footer .social-links a{
    color:var(--bs-dark);
    font-size:24px;
}
footer .social-links a:hover,
footer .social-links a:focus{
    color:var(--bs-primary);
}
footer .social-links .list-inline-item:not(:last-child){
    margin-right:1.25rem;
}
footer .copyright{
    color:var(--bs-dark);
    font-size:12px;
}
footer .copyright a{
    color:var(--bs-dark);
}
.navbar-light .navbar-toggler{
    color:var(--bs-dark);
    border-color:var(--bs-dark);
    border-width:2px;
    padding:0.45rem 0.75rem;
}
.btn-close{
    background-image:none;
    color:var(--bs-dark);
    opacity:1;
    font-size:30px;
}
.mobile-phone{
    color:var(--bs-primary);
    font-size:30px;
}
.offcanvas-header{
    padding-bottom:0.5rem;
    padding-top:0.5rem;
}
.btn-close:focus{
    box-shadow:none;
    color:var(--bs-primary);
}
.offcanvas{
    background-color:#fffcf7;
}
    
@media (min-width:992px){
    .navbar .navbar-brand svg{
        width:146px;
    }
    
    .nav-link{
        font-size:30px;
    }
    .offcanvas-body{
        flex-direction:column;
        justify-content:space-between;
        height:100%;
        display:flex;
        flex-wrap:wrap;
    }
}
@media (min-width:1200px){

    .nav-link{
        padding-top:1rem;
        padding-bottom:1rem;
        font-size:24px;
        line-height:1;
    }
    .navbar>.container-fluid{
        padding-left:1rem;
        padding-right:1rem;
        z-index:1;
        position:relative;
    }
}
@media (min-width: 1740px){
    .d-super-none{
        display:none !important;
    }
    .d-super-inline-block{
        display:inline-block !important;
    }
    .pt-super-0{
        padding-top:0 !important;
    }
    .px-super-2{
        padding-right: .5rem!important;
        padding-left: .5rem!important;
    }
    .navbar-brand{
     margin-top:var(--md);
     margin-bottom:1rem;
    }
    
    nav.navbar{
        bottom:0;
        right:unset;
        background-color:transparent;
    }
    .navbar-expand-super .navbar-nav{
        flex-direction:column;
    }
    .navbar>.container-fluid{
        flex-direction:column;
    }
    .nav-bkg {
        bottom:0;
        top:0;
        position:absolute;
        left:0;
        z-index:0;
        display: block;
    }
    .nav-bkg svg{
        height:100%;
    }
    .nav-bkg svg.blue-nav-line{
        top:-5px;
        bottom:-5px;
        left:-5px;
        height:102%;
        position:absolute;
        z-index:3;
    }
    
     .navbar-expand-super{
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-super .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible!important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .navbar-expand-super .offcanvas-header {
        display: none;
    }
    .navbar-expand-super .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
    .navbar-expand-super .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-super .navbar-toggler {
        display: none;
    }
    
    .offcanvas-end{
        width:191px;
    }
    .navbar .navbar-brand svg{
        width:226px;
    }
}

@media (min-width: 1740px) and (max-width: 2000px) and (min-height: 1000px) {
    .nav-bkg {
        left: -6vh;
    }
    
    .menu-container .container {
        margin-right: 15vh;
    }
}

@media (max-width:575px){
    .offcanvas-body{
        flex-direction:column;
        justify-content:space-between;
        height:100%;
        display:flex;
        flex-wrap:wrap;
    }
}



/* Hero */
.background-image-holder{
    height:calc(100vh - 77px);
    position:relative;
    overflow-y:hidden;
}
.background-image-holder.home{
    overflow-y:hidden;
}
.background-image-holder .container-fluid,
.background-image-holder .container{
    position:relative;
    z-index:3;
}
.background-image-holder picture{
        z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: var(--bs-dark);
}
.background-image-holder picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity:.9;
}
.h1-xl{
    line-height:.7;
    font-size:24vw;
    font-weight:700;
    font-family: var(--palanquin);
}
@media (min-width:576px){
    .background-image-holder.home .h1-xl{
        font-size:15vw;
    }
    .background-image-holder{
        height:calc(100vh - 50px);
    }
}
@media (min-width:768px){
    .background-image-holder{
        height:100vh;
    }
}
@media (min-width:768px) and (orientation: landscape){
    .background-image-holder.home .h1-xl{
        font-size:15vw;
    }
}
@media (min-width:768px) and (orientation: portrait){
    .background-image-holder.home .h1-xl{
        font-size:25vw;
    }
}
@media (min-width:992px){
    .background-image-holder.home .h1-xl{
        font-size:20vw;
    }
}
@media (min-width:1200px){
    .background-image-holder.home .h1-xl{
        font-size:15vw;
    }
}
@media(min-width:1400px){
    .background-image-holder.home .h1-xl{
        font-size:16vw;
    }
}
@media (min-width:1740px){
    .background-image-holder.home .h1-xl{
        font-size:310px;
        line-height: 217px;
    }
    .background-image-holder{
        height:100vh;
    }
}



/* Donuts & Coffee */
.menu-text{
    color:var(--yellow);
}
.menu-title{
    text-transform:uppercase;
    font-weight:300;
}
.menu-container{
    min-height:100vh;
}
.filter-btn{
    background:transparent;
    color:var(--yellow);
    border:none;
    appearance:none;
    text-transform:uppercase;
    padding:0 5px;
    margin:0 15px 15px 15px;
}

.filter-btn:hover,
.filter-btn:focus{
    color:var(--bs-primary);
    text-decoration:underline;
}
.filter-btn.active{
    color:#fff;
    text-decoration:none;
}
.back-text{
    opacity:.17;
    position:absolute;
    top:0;
    left:var(--bs-gutter-x,.75rem);
    right:var(--bs-gutter-x,.75rem);
    text-align:center;
    font-size:75px;
    line-height:55px;
}
@media (min-width:576px){
    .back-text{
        font-size:110px;
        line-height:87px;
    }
}
@media (min-width:768px){
    .back-text{
        font-size:150px;
        line-height:115px;
    }
}
@media (min-width:992px){
    .back-text{
        font-size:200px;
        line-height:156px;
    }
}
@media (min-width:1200px){
    .back-text{
        font-size:256px;
        line-height:187px;
    }
}
@media (min-width:1400px){
    .back-text{
        font-size:275px;
        line-height:215px;
    }
}



/* Our Story */
.bio-container .back-text{
    font-size:60px;
    line-height:55px;
}
.bio-container h2{
    font-weight:300;
}
.bio-container.background-image-holder picture{
    /* top:unset; */
}
.bio-container.background-image-holder{
    height:100vh;
}
.bio-container .black-grad{
  background-image: -moz-linear-gradient( 90deg, rgba(20,20,20,0) 0%, rgb(20,20,20) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgba(20,20,20,0) 0%, rgb(20,20,20) 100%);
  background-image: -ms-linear-gradient( 90deg, rgba(20,20,20,0) 0%, rgb(20,20,20) 100%);
  position: absolute;
  left: 0px;
  right:0;
  top: 0;
  height: 400px;
  z-index: 2;
  content:'';
}
.bio-tpl p{
    color:var(--yellow);
    font-size:18px;
    line-height:30px;
}
.bio-tpl h3{
    color:var(--bs-primary);
    font-weight:500;
}
.grid-container p{
    color:var(--bs-primary);
}
.grid-container p.h3{
    font-weight:300;
}
.grid-container hr{
    background-color:var(--bs-primary);
    opacity:1;
    height:2px;
    margin:9px 0;
}
.grid-container{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-evenly!important;
}
.grid-container .donut-img{
    width:100%;
    flex:0 0 auto;
}
.donut-lines{
    display:none;
}
.donut-stats{
    flex: 0 0 auto;
    width: auto;
    margin-bottom:30px;
    padding:0 15px;
}
.carousel-section .carousel-control-prev{
    top:calc(50vh - 32px);
    bottom:unset;
    background:var(--bs-primary);
    border-radius:50%;
    display:block;
    width:64px;
    height:64px;
    font-size:30px;
    z-index:30;
    display:none;
}
.carousel-section .carousel-control-next{
    top:calc(50vh - 32px);
    bottom:unset;
    background:var(--bs-primary);
    border-radius:50%;
    display:block;
    width:64px;
    height:64px;
    font-size:30px;
    z-index:30;
    display:none;
}
.carousel-item.background-image-holder{
        height:100vh;
    }
@media (min-width:576px){
    .bio-container .back-text{
        font-size:107px;
        line-height:77px;
    }
}
@media (min-width:768px){
    .bio-container .back-text{
        font-size:145px;
        line-height:103px;
    }
    .bio-container.background-image-holder{
        height:75vh;
    }
    .carousel-item.background-image-holder{
        height:800px;
    }
    .carousel-section .carousel-control-prev{
        top:368px;
        display:block;
    }
    .carousel-section .carousel-control-next{
        top:368px;
        display:block;
    }
    .grid-container{
        display:grid;
        flex-wrap:unset;
        justify-content: unset!important;
        grid-template-rows:repeat(27, 15px [col-start]);
        grid-template-columns:repeat(32, 1fr [col-start]);
    }
    .donut-lines{
        display:block;
    }
    .grid-container .donut-img{
        flex:unset
    }
    .donut-stats{
        flex:unset;
        margin-bottom:0px;
        padding:0;
    }
    .grid-container .donut-img{
        grid-column: 8 / span 16;
        grid-row: 1 / span 27;
        z-index:10;
        position:relative;
    }
    .grid-container .donut-stat-1{
        grid-column: 1 / span 5;
        grid-row: 4 / span 3;
    }
    .grid-container .donut-line-1{
        grid-column: 7 / span 4;
        grid-row: 5 / span 1;
    }
    .grid-container .donut-stat-2{
        grid-column: 24 / span 8;
        grid-row: 3 / span 3;
    }
    .grid-container .donut-line-2{
        grid-column: 20 / span 4;
        grid-row: 4 / span 1;
    }
    .grid-container .donut-stat-3{
        grid-column: 26 / span 6;
        grid-row: 8 / span 3;
    }
    .grid-container .donut-line-3{
        grid-column: 20 / span 6;
        grid-row: 9 / span 1;
    }
    .grid-container .donut-stat-4{
        grid-column: 1 / span 6;
        grid-row: 13 / span 3;
    }
    .grid-container .donut-line-4{
        grid-column: 7 / span 4;
        grid-row: 14 / span 1;
    }
    .grid-container .donut-stat-5{
        grid-column: 26 / span 6;
        grid-row: 17 / span 3;
    }
    .grid-container .donut-line-5{
        grid-column: 19 / span 7;
        grid-row: 18 / span 1;
    }
}
@media (min-width:768px) and (orientation:landscape) {
    .bio-container.background-image-holder{
        height:200vh;
    }
}
@media (min-width:992px){
    .bio-container .back-text{
        font-size:196px;
        line-height:140px;
    }
    .bio-container.background-image-holder{
        height:110vh;
    }
    .grid-container{
        grid-template-rows:repeat(27, 17px [col-start]);
    }
    .grid-container .donut-img{
        grid-column: 8 / span 16;
        grid-row: 1 / span 27;
        z-index:10;
        position:relative;
    }
    .grid-container .donut-stat-1{
        grid-column: 1 / span 4;
        grid-row: 4 / span 3;
    }
    .grid-container .donut-line-1{
        grid-column: 5 / span 7;
        grid-row: 5 / span 1;
    }
    .grid-container .donut-stat-2{
        grid-column: 26 / span 5;
        grid-row: 3 / span 3;
    }
    .grid-container .donut-line-2{
        grid-column: 20 / span 6;
        grid-row: 4 / span 1;
    }
    .grid-container .donut-stat-3{
        grid-column: 27 / span 4;
        grid-row: 8 / span 3;
    }
    .grid-container .donut-line-3{
        grid-column: 20 / span 7;
        grid-row: 9 / span 1;
    }
    .grid-container .donut-stat-4{
        grid-column: 2 / span 4;
        grid-row: 13 / span 3;
    }
    .grid-container .donut-line-4{
        grid-column: 6 / span 3;
        grid-row: 14 / span 1;
    }
    .grid-container .donut-stat-5{
        grid-column: 27 / span 4;
        grid-row: 17 / span 3;
    }
    .grid-container .donut-line-5{
        grid-column: 21 / span 6;
        grid-row: 18 / span 1;
    }
    

}
@media (min-width:992px) and (orientation:portrait) {
    .bio-container.background-image-holder{
        height:65vh;
    }
}
@media (min-width:1200px){
    .bio-container .back-text{
        font-size:234px;
        line-height:165px;
    }
    .bio-container.background-image-holder{
        height:90vh;
    }
    .grid-container{
        grid-template-rows:repeat(27, 20px [col-start]);
    }
    
}
@media (min-width:1400px){
    .bio-container .back-text{
        font-size:271px;
        line-height:190px;
    }
    .bio-container.background-image-holder{
        height:140vh;
    }
}
@media (min-width:1740px){
    .bio-container.background-image-holder{
        height:120vh;
    }
    .carousel-item.background-image-holder{
        height:100vh;
    }
    .carousel-section .carousel-control-prev{
        top:calc(50vh - 32px);
    }
    .carousel-section .carousel-control-next{
        top:calc(50vh - 32px);
    }
}



/* Contact */
#map{
    height:calc(100vh - 100px);
    width:100%;
    pointer-events:none;
}
.contact-container .contact-info{
    z-index:4;
    position:absolute;
    top:0;
    left:0;
    right:0;
}
.contact-container .text-contact{
    color:var(--dark-gray);
    font-size:60px;
    line-height:.75;
    text-align:center;
}
@media (min-width:576px){
    .contact-container .text-contact{
        font-size:110px;
        line-height:75px;
    }
    
}
@media (min-width:768px){
    .contact-container .text-contact{
        font-size:146px;
        line-height:155px;
    }
    #map{
        height:calc(100vh - 100px);
    }
}

@media (min-width:992px){
    .contact-container .text-contact{
        font-size:200px;
        line-height:155px;
    }
}
@media (min-width:1200px){
    .contact-container .text-contact{
        font-size:238px;
        line-height:155px;
    }
}
@media (min-width:1400px){
    .contact-container .text-contact{
        font-size:278px;
        line-height:155px;
    }
}
@media (min-width:1740px){
    #map{
        height:100vh;
    }
}
@media (max-width:991px) and (orientation: landscape){
    #map{
        height:500px;
    }
}



/* Utilities */
:root {
    --sm: 35px;
    --md: 85px;
    --lg: 100px;
    --xl: 200px;/* I think we might need an xl spacing util, but I could be wrong -cw */
}
.mt-overlay,
.my-overlay {
    margin-top: calc(var(--sm) * -1);
}
.mb-overlay,
.my-overlay {
    margin-bottom: calc(var(--sm) * -1);
}
.py-unset,
.pt-unset {
    padding-top: unset;
}
.py-unset,
.pb-unset {
    padding-bottom: unset;
}
.pt-sm,
.py-sm {
    padding-top: var(--sm);
}
.pb-sm,
.py-sm {
    padding-bottom: var(--sm);
}
.pt-md,
.py-md {
    padding-top: var(--md);
}
.pb-md,
.py-md {
    padding-bottom: var(--md);
}
.pt-lg,
.py-lg {
    padding-top: var(--lg);
}
.pb-lg,
.py-lg {
    padding-bottom: var(--lg);
}
.pt-xl,
.py-xl {
    padding-top: var(--xl);
}
.pb-xl,
.py-xl {
    padding-bottom: var(--xl);
}
.my-unset,
.mt-unset {
    margin-top: unset;
}
.my-unset,
.mb-unset {
    margin-bottom: unset;
}
.mt-sm,
.my-sm {
    margin-top: var(--sm);
}
.mb-sm,
.my-sm {
    margin-bottom: var(--sm);
}    
.mt-md,
.my-md {
    margin-top: var(--md);
}
.mb-md,
.my-md {
    margin-bottom: var(--md);
}
.mt-lg,
.my-lg {
    margin-top: var(--lg);
}
.mt-lg-overlay {
    margin-top: calc(var(--lg) * -1);
}
.mb-lg,
.my-lg {
    margin-bottom: var(--lg);
}
.mt-xl,
.my-xl {
    margin-top: var(--xl);
}
.mb-xl,
.my-xl {
    margin-bottom: var(--xl);
}
@media (min-width: 576px) {
    .pt-unset-mob,
    .py-unset-mob {
        padding-top: unset;
    }
    .py-unset-mob,
    .pb-unset-mob {
        padding-bottom: unset;
    }
    .pt-sm-mob,
    .py-sm-mob {
        padding-top: var(--sm);
    }
    .pb-sm-mob,
    .py-sm-mob {
        padding-bottom: var(--sm);
    }
    .pt-md-mob,
    .py-md-mob {
        padding-top: var(--md);
    }
    .pb-md-mob,
    .py-md-mob {
        padding-bottom: var(--md);
    }
    .pt-lg-mob,
    .py-lg-mob {
        padding-top: var(--lg);
    }
    .pb-lg-mob,
    .py-lg-mob {
        padding-bottom: var(--lg);
    }
    .pt-xl-mob,
    .py-xl-mob {
        padding-top: var(--xl);
    }
    .pb-xl-mob,
    .py-xl-mob {
        padding-bottom: var(--xl);
    }
    .my-unset-mob,
    .mt-unset-mob {
        margin-top: unset;
    }
    .my-unset-mob,
    .mb-unset-mob {
        margin-bottom: unset;
    }
    .mt-sm-mob,
    .my-sm-mob {
        margin-top: var(--sm);
    }
    .mb-sm-mob,
    .my-sm-mob {
        margin-bottom: var(--sm);
    }    
    .mt-md-mob,
    .my-md-mob {
        margin-top: var(--md);
    }
    .mb-md-mob,
    .my-md-mob {
        margin-bottom: var(--md);
    }
    .mt-lg-mob,
    .my-lg-mob {
        margin-top: var(--lg);
    }
    .mb-lg-mob,
    .my-lg-mob {
        margin-bottom: var(--lg);
    }
    .mt-xl-mob,
    .my-xl-mob {
        margin-top: var(--xl);
    }
    .mb-xl-mob,
    .my-xl-mob {
        margin-bottom: var(--xl);
    }
}
@media (min-width: 768px) {
    .pt-unset-tab,
    .py-unset-tab {
        padding-top: unset;
    }
    .py-unset-tab,
    .pb-unset-tab {
        padding-bottom: unset;
    }
    .pt-sm-tab,
    .py-sm-tab {
        padding-top: var(--sm);
    }
    .pb-sm-tab,
    .py-sm-tab {
        padding-bottom: var(--sm);
    }
    .pt-md-tab,
    .py-md-tab {
        padding-top: var(--md);
    }
    .pb-md-tab,
    .py-md-tab {
        padding-bottom: var(--md);
    }
    .pt-lg-tab,
    .py-lg-tab {
        padding-top: var(--lg);
    }
    .pb-lg-tab,
    .py-lg-tab {
        padding-bottom: var(--lg);
    }
    .pt-xl-tab,
    .py-xl-tab {
        padding-top: var(--xl);
    }
    .pb-xl-tab,
    .py-xl-tab {
        padding-bottom: var(--xl);
    }
    .my-unset-tab,
    .mt-unset-tab {
        margin-top: unset;
    }
    .my-unset-tab,
    .mb-unset-tab {
        margin-bottom: unset;
    }
    .mt-sm-tab,
    .my-sm-tab {
        margin-top: var(--sm);
    }
    .mb-sm-tab,
    .my-sm-tab {
        margin-bottom: var(--sm);
    }    
    .mt-md-tab,
    .my-md-tab {
        margin-top: var(--md);
    }
    .mb-md-tab,
    .my-md-tab {
        margin-bottom: var(--md);
    }
    .mt-lg-tab,
    .my-lg-tab {
        margin-top: var(--lg);
    }
    .mb-lg-tab,
    .my-lg-tab {
        margin-bottom: var(--lg);
    }
    .mt-xl-tab,
    .my-xl-tab {
        margin-top: var(--xl);
    }
    .mb-xl-tab,
    .my-xl-tab {
        margin-bottom: var(--xl);
    }
}
@media (min-width: 992px) {
    .pt-unset-lap,
    .py-unset-lap {
        padding-top: unset;
    }
    .py-unset-lap,
    .pb-unset-lap {
        padding-bottom: unset;
    }
    
    .pt-sm-lap,
    .py-sm-lap {
        padding-top: var(--sm);
    }
    .pb-sm-lap,
    .py-sm-lap {
        padding-bottom: var(--sm);
    }
    .pt-md-lap,
    .py-md-lap {
        padding-top: var(--md);
    }
    .pb-md-lap,
    .py-md-lap {
        padding-bottom: var(--md);
    }
    .pt-lg-lap,
    .py-lg-lap {
        padding-top: var(--lg);
    }
    .pb-lg-lap,
    .py-lg-lap {
        padding-bottom: var(--lg);
    }
    .pt-xl-lap,
    .py-xl-lap {
        padding-top: var(--xl);
    }
    .pb-xl-lap,
    .py-xl-lap {
        padding-bottom: var(--xl);
    }
    .my-unset-lap,
    .mt-unset-lap {
        margin-top: unset;
    }
    .my-unset-lap,
    .mb-unset-lap {
        margin-bottom: unset;
    }
    .mt-sm-lap,
    .my-sm-lap {
        margin-top: var(--sm);
    }
    .mb-sm-lap,
    .my-sm-lap {
        margin-bottom: var(--sm);
    }    
    .mt-md-lap,
    .my-md-lap {
        margin-top: var(--md);
    }
    .mb-md-lap,
    .my-md-lap {
        margin-bottom: var(--md);
    }
    .mt-lg-lap,
    .my-lg-lap {
        margin-top: var(--lg);
    }
    .mb-lg-lap,
    .my-lg-lap {
        margin-bottom: var(--lg);
    }
    .mt-xl-lap,
    .my-xl-lap {
        margin-top: var(--xl);
    }
    .mb-xl-lap,
    .my-xl-lap {
        margin-bottom: var(--xl);
    }
    .mt-overlay,
.my-overlay {
    margin-top: calc(var(--md) * -1);
}
}
@media (min-width: 1200px) {
    .py-unset-desk,
    .pt-unset-desk {
        padding-top: unset;
    }
    .py-unset-desk,
    .pb-unset-desk {
        padding-bottom: unset;
    }
    .pt-sm-desk,
    .py-sm-desk {
        padding-top: var(--sm);
    }
    .pb-sm-desk,
    .py-sm-desk {
        padding-bottom: var(--sm);
    }
    .pt-md-desk,
    .py-md-desk {
        padding-top: var(--md);
    }
    .pb-md-desk,
    .py-md-desk {
        padding-bottom: var(--md);
    }
    .pt-lg-desk,
    .py-lg-desk {
        padding-top: var(--lg);
    }
    .pb-lg-desk,
    .py-lg-desk {
        padding-bottom: var(--lg);
    }
    .pt-xl-desk,
    .py-xl-desk {
        padding-top: var(--xl);
    }
    .pb-xl-desk,
    .py-xl-desk {
        padding-bottom: var(--xl);
    }
    .my-unset-desk,
    .mt-unset-desk {
        margin-top: unset;
    }
    .my-unset-desk,
    .mb-unset-desk {
        margin-bottom: unset;
    }
    .mt-sm-desk,
    .my-sm-desk {
        margin-top: var(--sm);
    }
    .mb-sm-desk,
    .my-sm-desk {
        margin-bottom: var(--sm);
    }    
    .mt-md-desk,
    .my-md-desk {
        margin-top: var(--md);
    }
    .mb-md-desk,
    .my-md-desk {
        margin-bottom: var(--md);
    }
    .mt-lg-desk,
    .my-lg-desk {
        margin-top: var(--lg);
    }
    .mb-lg-desk,
    .my-lg-desk {
        margin-bottom: var(--lg);
    }
    .mt-xl-desk,
    .my-xl-desk {
        margin-top: var(--xl);
    }
    .mb-xl-desk,
    .my-xl-desk {
        margin-bottom: var(--xl);
    }
}