/* @group Availability Detail
------------------------------------ */

[data-page="availability-detail"] { background-color: var(--light-green); min-height: 100vh; }

/* @group Availability Header
------------------------------------ */
.availability-detail-header { position: relative; padding: 3.2rem 0 0; margin-top: 6.5rem; color: var(--beige); margin-bottom: 8rem; }
.availability-detail-header::before,
.availability-detail-header::after { content: ''; position: absolute; pointer-events: none; top: 0; }
.availability-detail-header::before { width: 14.4rem; height: 14.4rem; background: no-repeat url('../../img/layout/availability/deco-left.svg') left top; background-size: contain; left: 0; }
.availability-detail-header .back-to { margin-bottom: 9.2rem; }
.availability-detail-header .back-to .bttn { padding: 0 2.4rem; height: 5rem; }
.availability-detail-header .back-to .bttn:not(:hover) { color: var(--rust); }
.availability-detail-header .content h2 { color: var(--beige); margin: 0 0 4rem; }
.availability-detail-header .content ul { color: var(--white); }
.availability-detail-header .content ul li { font: 400 1.7em / 1em var(--rubric-font); letter-spacing: .176em; text-transform: uppercase; }
.availability-detail-header .content ul li:not(:last-of-type)::after { content: ''; display: inline-block; background-color: var(--white); width: 100%; height: .1rem; margin: 3rem 0;  }
@media only screen
and (min-width : 961px) {
    .availability-detail-header { margin-top: 0; margin-bottom: 4.1rem; padding: 4.4rem 0 0; }
    .availability-detail-header::before { width: 30rem; height: 30rem; left: 8rem; }
    .availability-detail-header::after { width: 20rem; height: 20rem; background: no-repeat url('../../img/layout/availability/deco-right.svg') left top; background-size: contain; left: 75%; }
    .availability-detail-header .back-to { margin-bottom: 4rem; }
    .availability-detail-header .back-to .bttn { padding: 0 2rem; height: 6.6rem; }
    .availability-detail-header .content h2 { font-size: 6.5em; margin: 0 0 3.8rem; }
    .availability-detail-header .content ul li { font-size: 1.8em; letter-spacing: .277em; display: inline-block; }
    .availability-detail-header .content ul li:not(:last-of-type)::after { width: .1rem; height: 3rem; margin: 0 6rem; vertical-align: middle; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1300px) {
    .availability-detail-header .content ul li:not(:last-of-type)::after { margin: 0 2rem; }
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Availability Header
------------------------------------ */



/* @group Availability Floorplan
------------------------------------ */
.availability-detail-floorplan { padding-bottom: 6rem; }
.availability-detail-floorplan .view-keyplan { text-align: right; margin: 0 0 4rem; }
.availability-detail-floorplan .img-box { height: 37.6rem; margin: 0 0 4rem; }
.availability-detail-floorplan .img-box img { object-fit: contain; }
.availability-detail-floorplan .bttns-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
.availability-detail-floorplan .bttns-wrapper .bttn.beige:not(:hover) { color: var(--rust); }
@media only screen
and (min-width : 961px) {
    .availability-detail-floorplan .view-keyplan { margin: 0 0 2.5rem; }
    .availability-detail-floorplan .view-keyplan .bttn { min-width: 22.6rem;  }
    .availability-detail-floorplan .img-box { height: 55.5rem; margin: 0 0 2.5rem; }
    .availability-detail-floorplan .bttns-wrapper .bttn { padding: 0 5.5rem; margin: 0 0 1rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .availability-detail-floorplan .bttns-wrapper .bttn { width: 100%; margin: 0 0 2rem; }
}
/* @end Availability Floorplan
------------------------------------ */



/* @group Availability Availables
------------------------------------ */
.availability-detail-availables { color: var(--dark-green); padding: 8rem 0 4.8rem; background-color: var(--beige); }
.availability-detail-availables h2 { margin: 0 0 4rem; }
.availability-detail-availables .boxes .box { padding-bottom: 4rem; margin-bottom: 4rem; position: relative; }
.availability-detail-availables .boxes .box::after { content: ''; display: block; width: 100%; height: .1rem; background-color: var(--dark-green); position: absolute; bottom: 0; left: 0; }
.availability-detail-availables .boxes .box ul { display: flex; justify-content: space-between; width: 100%; }
.availability-detail-availables .boxes .box ul li { font-weight: 600; display: inline-block; flex: 0 1 33%; position: relative; }
.availability-detail-availables .boxes .box .bttn { width: 100%; }
.availability-detail-availables .boxes .box .bttn:hover { background-color: var(--dark-green); color: var(--beige); }
@media only screen
and (min-width : 961px) {
    .availability-detail-availables { padding: 6.5rem 0 7rem; background-color: var(--dark-beige); }
    .availability-detail-availables h2 { font-size: 6.5em; color: var(--light-green); margin: 0 0 5rem; }
    .availability-detail-availables .boxes .box { position: relative; padding-bottom: 1.7rem; margin-bottom: 1.7rem; display: flex; align-items: center; }
    .availability-detail-availables .boxes .box::after { background-color: var(--soft-green); }
    .availability-detail-availables .boxes .box:last-of-type::after { content: none; }
    .availability-detail-availables .boxes .box ul { width: calc(100% - 15rem); }
    .availability-detail-availables .boxes .box ul li { padding-right: 1.5rem; }
    .availability-detail-availables .boxes .box .bttn { width: 15rem; padding: 0 2rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .availability-detail-availables .boxes .box ul { margin: 0 0 3rem; }
    .availability-detail-availables .boxes .box ul li:not(:first-of-type) { text-align: center; }
    .availability-detail-availables .boxes .box ul li:not(:last-of-type)::after { content: '|'; position: absolute; right: 0; }
}
/* @end Availability Availables
------------------------------------ */

/* @end */