:root {
    --padding: 201px;
}
.info{
    z-index:5;
}
.top-nav > li > a.active{
    color:var(--black);
}
.dropdown-toggle::after{
    display:none;
}
.dropdown-toggle svg{
    height:0.75em;
}
.dropdown-menu{
    border-radius:0;
    border-color:var(--light-gold);
}
.dropdown-item{
    color:var(--black);
    padding:0.5rem 1rem;
}
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item.active{
    background-color:var(--light-gold);
    color:var(--primary);
}
.navbar-light:not(.white) .navbar-nav .nav-link.active,
.navbar-light:not(.white) .navbar-nav .show>.nav-link{
    color:var(--primary);
}

.pb-collage {
    padding-bottom: var(--padding);
}

.btn{
    border-width:2px;
}
.btn-primary:visited{
    background-color:var(--primary);
    border-color:var(--primary);
    color:#fff;
}
.btn-primary:is(:hover, :focus, :visited:hover, :visited:focus){
    background-color:#fff;
    color:var(--primary);
    border-color:var(--primary);
}

.btn-primary[data-disable-hover]:is(:hover,:focus,:visited:hover, :visited:focus) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
}

.btn-white:visited{
    background-color: #FFF;
    border-color: #FFF;
    color: var(--primary);
}
.btn-white:is(:hover,:focus,:visited:hover,:visited:focus) {
    background-color:var(--primary);
    color:#fff;
    border-color:#fff;
}
.btn-transparent:visited{
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
}
.btn-transparent:hover,
.btn-transparent:focus,
.btn-transparent:visited:hover,
.btn-transparent:visited:focus{
    background-color:#fff;
    color:var(--primary);
    border-color:#fff;
}
.text-primary{
    color:var(--primary) !important;
}



/* Hutchinson Island */
.hero-picture{
    position:absolute;
    z-index:-2;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.hero-picture img{
    width:100%;
    height:100%;
    object-fit:cover;
}


.collage-grid{
    --gap: 0;
    --rows: 200px 200px;
    --columns: 12px 2fr 2fr 12px;
    display:grid;
    width:100%;
    max-width: 100%;
    grid-template-columns: var(--columns);
    grid-template-rows: var(--rows);
    gap: var(--gap);
    z-index:3;
    position:relative;
    margin-top: calc(0px - var(--padding));
}
.collage-grid img{
    height:100%;
    width:100%;
    object-fit:cover;
    border:1px solid #fff;
}
.collage-img-1{
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
}

.collage-img-2{
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
}

.collage-img-3{
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
}

.collage-img-5{
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
}


.col-two > li{
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--primary);
    
}

@media screen and (min-width: 576px) {
    .collage-grid{
    --rows: 270px 205px 280px 205px 220px;
    --columns: 1fr 3fr 3fr 1fr;
    --padding: 271px;
   
    }
    .pb-collage {
        padding-bottom: calc(var(--padding) + 100px);
        
    }
    
    .collage-img-1{
        grid-column: 2 / span 2;
        grid-row: 1 / span 1;
    }
    
    
    .collage-img-2{
        grid-column: 2 / span 2;
        grid-row: 3 / span 1;
    }
    
    .collage-img-3{
        grid-column: 2 / span 2;
        grid-row: 5 / span 1;
    }
    
    .collage-img-4{
        grid-column: 2 / span 1;
        grid-row: 2 / span 1;
    }
    .collage-img-5{
        grid-column: 3 / span 1;
        grid-row: 2 / span 1;
    }
    
    
    .collage-img-6{
        grid-column: 2 / span 1;
        grid-row: 4 / span 1;
    }
    
    .collage-img-7{
        grid-column: 3 / span 1;
        grid-row: 4 / span 1;
    }
}

@media screen and (min-width: 768px) {
    .collage-grid{
    --rows: 270px 265px 310px 265px 320px;
    --columns: 1fr 3fr 3fr 1fr;
    --padding: 271px;
   
    }
    .pb-collage {
        padding-bottom: calc(var(--padding) + 30px);
        
    }
}

@media (min-width:992px){
    .pb-collage {
        padding-bottom: calc(var(--padding) - 20px);
        
    }
    
    .pb-collage .col-12 > .justify-content-center{
        justify-content: flex-end!important;
        
    }
    .collage-grid{
    --rows: 50px 120px 80px 255px 75px 125px 150px 65px;
    --columns: 25px 85px 205px 10px 375px 280px;
    --padding: 252px;
    }
    
    .collage-img-1{
        grid-column: 1 / span 4;
        grid-row: 1 / span 3;
    }
    
    .collage-img-2{
        grid-column: 5 / span 1;
        grid-row: 2 / span 2;
    }
    
    .collage-img-3{
        grid-column: 3 / span 3;
        grid-row: 4 / span 2;
    }
    
    .collage-img-4{
        grid-column: 6 / span 1;
        grid-row: 3 / span 2;
    }
    .collage-img-5{
        grid-column: 6 / span 1;
        grid-row: 5 / span 2;
    }
    
    
    .collage-img-6{
        grid-column: 2 / span 2;
        grid-row: 6 / span 2;
    }
    
    .collage-img-7{
        grid-column: 4 / span 2;
        grid-row: 6 / span 3;
    }
    .col-two{
        column-count:2;
        column-gap:45px;
        list-style-position: inside;
        
    }
    
}

@media screen and (min-width: 1200px) {
    
    .collage-grid{
    --rows: 70px 140px 100px 275px 95px 145px 150px 85px;
    --columns: 45px 130px 250px 30px 420px 325px;
    --padding: 310px;
    }
    .pb-collage {
        padding-bottom: calc(var(--padding) + 40px);
        
    }
}

@media screen and (min-width: 1500px) {
    
    .collage-grid{
    --rows: 90px 160px 120px 295px 115px 165px 155px 105px;
    --columns: 95px 180px 300px 80px 470px 375px;
    width:1500px;
    --padding: 372px;
    }
    .pb-collage {
        padding-bottom: calc(var(--padding) + 70px);
        
    }
    
}

.cta .btn{
    max-width:unset;
}



/* News Container */
.tl-tag a{
    text-decoration:none;
    color:var(--primary);
    text-transform:uppercase;
    font-size:18px;
    letter-spacing:0.05rem;
    line-height:30px;
}
.tl-tag a:hover,
.tl-tag a:focus{
    text-decoration:underline;
}
.tl-tag.active a{
    font-weight:600;
    text-decoration:none;
}
.news-article-tpl p.text-primary:not(.h1){
    font-size:15px;
    letter-spacing:0.05rem;
    line-height:30px;
}
.news-article-tpl p.h1{
    line-height:50px;
}
.news-article-tpl .btn-news{
    height:100%;
    background-color:var(--primary);
    border-color:var(--primary);
    color:#fff;
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition: opacity .5s ease-in-out;
}
.news-article-tpl .btn-news a{
    color:#fff;
    text-decoration:none;
}

.news-article-tpl .main-link:hover .btn-news,
.news-article-tpl .main-link:focus-within .btn-news{
    background-color:var(--primary);
    border-color:var(--primary);
    color:#fff;
    opacity:1;
}
@media (hover:none){
    .news-article-tpl .btn-news{
        opacity:1;
    }
}
.news-article-tpl .gold-bg p,
.news-article-tpl .gold-bg h3{
    transition: opacity .15s ease-in-out;
}
.news-article-tpl .main-link:hover .gold-bg p,
.news-article-tpl .main-link:focus-within .gold-bg p,
.news-article-tpl .main-link:hover .gold-bg h3,
.news-article-tpl .main-link:focus-within .gold-bg h3{
    opacity:.3;
}
.news-article-tpl .main-link:hover{
    cursor:pointer;
}
.news-article-tpl a::after{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    z-index:5;
}



/* Individual News Post */
.news-post p.text-primary:not(.h1){
    font-size:15px;
    letter-spacing:0.05rem;
    line-height:30px;
}
.news-post li{
    letter-spacing: var(--letter-spacing);
}
@media (min-width:1200px){
    .news-post li{
        font-size: 21px;
    }
}
.news-post .neighbors a{
    text-decoration:none;
    color:var(--primary);
    font-size:18px;
    letter-spacing:0.05rem;
    line-height:30px;
}
.news-post .neighbors a:hover,
.news-post .neighbors a:focus{
    text-decoration:underline;
}



/* Residences Page */
section:not(.hero) .glide__slide div img{
    height:100%;
    width:100%;
    object-fit:cover;
}



/* Gallery */
.macy-item:hover,
.macy-item:focus-within{
    opacity:.5;
}



/* Contact */
.error{
    padding-left:10px;
    text-decoration:underline;
}



/* Floor Plan */
.nav-pills .nav-item{
    width:100%;
}
.nav-pills .nav-link{
    appearance:none;
    width:100%;
    background:none;
    border:none;
    padding:0;
    position:relative;
    height:106px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background:#fff;
}
.nav-pills .nav-link .outline-svg,
.nav-pills .nav-link .fill-svg{
    position:absolute;
    top:0;
    bottom:0;
    left:calc(50% - 86px);
    height:100%;
    width:auto;
    display:block;
    transition:opacity 0.3s ease-in-out;
}
.nav-pills .nav-link.active .outline-svg,
.nav-pills .nav-link .fill-svg{
    opacity:1;
}
.nav-pills .nav-link.active .fill-svg,
.nav-pills .nav-link .outline-svg{
    opacity:0;
}

.tab-pane .info{
    max-width:1000px;
}
.tab-pane .info .stat span:last-child{
    text-align:right;
    width:35%;
}
.tab-pane .info .stat.bold{
    font-weight:700;
}

@media (min-width:1200px){
    .tab-pane .info{
        column-count:2;
    }
}


.hero.model-hero picture > img{
    object-position:center 75%;
}
.hero.model-hero picture > img.align-to-top{
    object-position:center 25%;
}



/* legal pages */
.legal-page a{
    color:var(--black);
}
.legal-page a:hover,
.legal-page a:focus{
    color:var(--primary);
}
.legal-page li{
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: var(--letter-spacing);
}
.legal-page p + h2{
    margin-top:40px;
}

@media (min-width:1200px){
    .legal-page li{
        font-size: 21px;
    }
}

/* 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);
    }
}