﻿
.collection_filter_section {
    position: relative;
    background: var(--tertiary);
    padding: 15px 0;
}

.collection_filter_section .form-control,
.collection_filter_section .input-group-addon {
    border-color: #fff;
    box-shadow: none;
}

.collection_filter_section .input-group-addon {
    background-color: #fff;
    color: #000;
}

/*-----------------------------------------------------------------------------------------------*/

#timeline {
    background: var(--tertiary);
    padding: 0 0 15px;
}

.timeline_popover {
    position: absolute;
    top: 2px;
    right: 0;
    color: #fff !important;
    font-size: 20px;
    cursor: help;
    text-decoration: none !important;
    outline: 0 !important;
    background: var(--primary);
    width: 24px;
    padding: 4px 0;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    line-height: 16px;
    transition: background 0.3s linear;
}

.timeline_popover:hover {
    background: var(--primary-active);
}

.page_timeline #timeline {
    margin-top: 0;
}

.timeline_item {
    margin-bottom: 30px;
}

.timeline_item_image {
    position: relative;
    padding-top: 100%;
    margin: 0 0 10px;
    overflow: hidden;
}

.timeline_item_image a {
    background: transparent;
    transition: background 0.3s linear;
}

.timeline_item_image a:hover {
    background: rgba(0, 0, 0, 0.5);
}

.timeline_item_image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}

.sub_timeline_item_image {
    overflow: hidden;
    text-align: center;
}

    .sub_timeline_item_image img {
        height: 100%;
        object-fit: cover;
    }

.timeline_strapline {
    margin: 0;
    font-size: 1em !important;
}

.timeline_title {
    display: block;
    margin: 0 30px 0 0;
}

.sub_collection_title {
    margin: 0;
    color: var(--secondary);
    text-align: center;
}

.timeline_item h3 {
    position: relative;
    font-size: 1.5em;
    margin: 0;
}

.timeline_item p {
    margin-top: 15px;
    margin-bottom: 0;
    font-size: 1em;
    line-height: 1.2em;
}

.timeline_slider {
    -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.timeline_slider_track {
    position: relative;
    background: var(--primary);
    height: 25px;
    margin: 15px 0;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.timeline_slider_track_end {
    position: absolute;
    top: 0;
    height: 25px;
    width: 12px;
    z-index: 5;
}

/*.timeline_slider_track_end_left {
    background: url('../images/slider_end_left.png') repeat-x;
    left: -12px;
}

.timeline_slider_track_end_right {
    background: url('../images/slider_end_right.png') repeat-x;
    right: -12px;
}*/

.timeline_years_label {
    height: 1px;
    background: #000;
    position: relative;
    text-align: center;
    margin: 0 15px;
    margin-bottom: 10px;
    -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

.timeline_years_label:before,
.timeline_years_label:after {
    position:absolute;
    content: "";
    display: block;
    top: -15px;
    width: 1px;
    height: 15px;
    background: #000;
}

.timeline_years_label:before {
    left: 0;
}

.timeline_years_label:after {
    right: 0;
}

.timeline_years_label span {
    position: relative;
    background: var(--tertiary);
    padding: 0 5px;
    display: inline-block;
    top: -10px;
    text-transform: uppercase;
    z-index: 0;
}

.timeline_slider_handle {
    position: absolute;
    background: #c7c7c7;
    width: 19px;
    height: 45px;
    top: -10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 9;
}

.timeline_slider_handle_popup {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 0;
    text-align: center;
    display: none;
}

.timeline_slider_handle_popup_text {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 0.9em;
    line-height: 1em;
    text-align: left;
    transform: translateX(-50%);
}

.timeline_slider_handle_popup_text:before {
    content: " ";
    display: block;
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent rgba(0,0,0,0.4) transparent;
}

.timeline_slider_range {
    position: absolute;
    top: 10px;
    left: 0;
    background: var(--tertiary);
    width: 0;
    height: 5px;
    z-index: 6;
}

.timeline_years {
    position: relative;
    height: 24px;
    margin-bottom: 15px;
    z-index: 1;
}

.timeline_years .year {
    position: absolute;
    top: 0;
    color: var(--primary);
    font-size: 0.9em;
    font-weight: 700;
}

.timeline_ticks {
    background: url('../images/tick.png');
    height: 7px;
    position: absolute;
    z-index: 4;
    top: -7px;
    left: 0px;
    right: 0px;
}

.timeline_eras {
    height: 35px;
}

.timeline_eras .era {
    position: absolute;
    top: 0;
    font-size: 0.8em;
    max-width: 70px;
    text-align: center;
    line-height: 1.3em;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
}

.timeline_eras .era span {
    vertical-align: middle;
    display: inline-block;
    line-height: 1.3em;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_map_section {
    position: relative;
    overflow: hidden;
}

.collection_map_section .container {
    position: relative;
}

.collection_layers {
    position: relative;
    padding: 0 60px 0 0;
    text-transform: uppercase;
    font-size: 1.5em;
    line-height: 1.2em;
    text-align: center;
}

.collection_layers ul {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
}

.collection_layers ul li {
    position: relative;
    padding: 0 0 0 60px;
    background-image: url(../images/layers/inactive_layer.png);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 45px auto;
    color: #a4a4a4;
    text-align: left;
    cursor: pointer;
}

.collection_layers ul li.active {
    background-image: url(../images/layers/active_layer.png);
    color: var(--primary);
}

.collection_layers ul li.active + li {
    background-image: url(../images/layers/active_layer.png);
}

.collection_layers ul li::before,
.collection_layers ul li::after {
    position: absolute;
    content: "";
    top: 0;
    background: #a4a4a4;
    width: 3px;
    height: 100%;
    z-index: -1;
}

.collection_layers ul li.active::before,
.collection_layers ul li.active::after {
    background: #000;
}

.collection_layers ul li::before {
    left: 0;
}

.collection_layers ul li::after {
    left: 43px;
}

.collection_layers ul li:first-of-type {
    background-image: url(../images/layers/inactive_top_layer.png);
    padding: 13px 0 0 60px;
}

.collection_layers ul li.active:first-of-type {
    background-image: url(../images/layers/active_top_layer.png);
}

.collection_layers ul li:first-of-type::before,
.collection_layers ul li:first-of-type::after {
    top: 11px;
    height: calc(100% - 11px);
}

.collection_layers ul li:last-of-type {
    background-image: url(../images/layers/inactive_layer.png), url(../images/layers/inactive_layer.png);
    background-position: left top, left bottom;
    padding: 0 0 13px 60px;
}

.collection_layers ul li.active + li:last-of-type {
    background-image: url(../images/layers/active_layer.png), url(../images/layers/inactive_layer.png);
}

.collection_layers ul li.active:last-of-type {
    background-image: url(../images/layers/active_layer.png), url(../images/layers/active_layer.png);
}

.collection_layers ul li:last-of-type::before,
.collection_layers ul li:last-of-type::after {
    height: calc(100% - 11px);
}

.collection_categories {
    padding: 30px 60px 30px 0;
}

.collection_categories [class^="collection_categories_floor"] {
    display: none;
}

.collection_categories .collection_categories_floor1 {
    display: block;
}

.collection_categories .collection_cate {
    position: relative;
    display: flex;
    padding: 10px 30px;
    background: var(--primary);
    align-items: center;
    font-size: 1.2em;
    text-transform: uppercase;
    line-height: 1.2em;
    gap: 10px;
    color: #fff;
    transition: all 0.3s linear;
}

.collection_categories .collection_cate:hover {
    transform: scale(1.1);
    z-index: 9;
}

.collection_categories .collection_cate img {
    height: 30px;
    width: auto;
}

.collection_categories .collection_cate + .collection_cate {
    margin-top: 2px;
}

.collection_map {
    position: relative;
    margin: 0 -150px 0 -180px;
}

[class^="collection_map_floor_"] {
    display: none;
}

.collection_map_floor_1 {
    display: block;
}

.collection_map area {
    cursor: pointer;
}

.collection_map_popup {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 400px;
    background: #fff;
    color: #000;
    box-shadow: 5px 5px 10px #525252;
    margin: 0 0 15px;
    display: none;
}

.collection_map_popup::before {
    position: absolute;
    content: "";
    width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-right: 30px solid #fff;
	border-bottom: 15px solid transparent;
    top: 15px;
    left: -30px;
}

.collection_map_popup .map_popup_image {
    position: relative;
}

.collection_map_popup .map_popup_image img {
    max-height: 275px;
    margin: auto;
}

.collection_map_popup .map_popup_body {
    position: relative;
    padding: 15px;
}

.collection_map_popup .map_popup_body h3 {
    margin: 0 0 15px;
}

.collection_map_popup .map_popup_body .core_btn_category {
    padding: 5px 15px;
}

.collection_map_popup .map_popup_body .core_btn_category:hover {
    background: #000 !important;
}

.collection_map_popup .map_popup_body .map_popup_close {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 2em;
    cursor: pointer;
}

/*-----------------------------------------------*/
/*popup overrides*/

.popup_cate_1 {
    right: 180px;
}

.popup_cate_1::before {
    top: 150px;
}

.popup_cate_30 {
    top: 100px;
    right: 300px;
}

.popup_cate_30::before {
    top: 200px;
}

.popup_cate_3,
.popup_cate_10 {
    top: 150px;
    right: 50px;
}

.popup_cate_3::before,
.popup_cate_10::before {
    top: 150px;
}

.popup_cate_5 {
    top: 0;
    right: 280px;
}

.popup_cate_5::before {
    left: unset;
    right: -30px;
    top: 150px;
    transform: rotate(180deg);
}

.popup_cate_8 {
    top: 100px;
    right: 350px;
}

.popup_cate_8::before {
    left: unset;
    right: -30px;
    top: 175px;
    transform: rotate(180deg);
}

.popup_cate_6 {
    top: 200px;
    right: 400px;
}

.popup_cate_6::before {
    left: unset;
    right: -30px;
    top: 200px;
    transform: rotate(180deg);
}

.popup_cate_4 {
    top: 300px;
    right: 500px;
}

.popup_cate_4::before {
    left: unset;
    right: -30px;
    top: 250px;
    transform: rotate(180deg);
}

.popup_cate_7 {
    top: 200px;
    right: 350px;
}

.popup_cate_7::before {
    top: 100px;
}

.popup_cate_9 {
    top: 100px;
    right: 180px;
}

.popup_cate_9::before {
    top: 15px;
}

.popup_cate_11 {
    top: 100px;
    right: 300px;
}

.popup_cate_11::before {
    left: unset;
    right: -30px;
    top: 100px;
    transform: rotate(180deg);
}

.popup_cate_12 {
    top: 200px;
    right: 350px;
}

.popup_cate_12::before {
    left: unset;
    right: -30px;
    top: 100px;
    transform: rotate(180deg);
}

.popup_cate_13 {
    top: 400px;
    right: 500px;
}

.popup_cate_13::before {
    left: unset;
    right: -30px;
    top: 150px;
    transform: rotate(180deg);
}

.popup_cate_14 {
    top: 400px;
    right: 225px;
}

.popup_cate_14::before {
    top: 275px;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_banner_container {
    display: flex;
    gap: 30px;
}

.collection_banner_container img {
    height: 100%;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_article_title,
.collection_article_author {
    margin: 0 0 15px;
}

.collection_article_author {
    color: var(--secondary);
    font-size: 1.2em;
    line-height: 1.2em;
}

.collection_article_title + .collection_article_author {
    margin-top: -15px;
}

.collection_map_btn {
    background-image: url(../images/floorplan.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto calc(100% - 10px);
    padding: 30px 15px 30px 120px;
    margin: 15px 0 0;
    display: inline-block;
    color: #000;
    transition: color 0.3s linear;
}

.collection_map_btn:hover {
    color: var(--primary);
}

/*-----------------------------------------------------------------------------------------------*/

.collection_options_section {
    position: relative;
    overflow: hidden;
}

.collection_options_section > .container > .row,
.collection_options_section > .container > .row > .col-xs-12 {
    display: flex;
}

.about_collection {
    position: relative;
    padding: 45px 30px 45px;
    color: #fff;
}

.about_collection::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    background-color: #97ac77;
    background-image: url(../images/about.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    z-index: -1;
}

.about_collection h1,
.about_collection h2,
.about_collection h3,
.about_collection h4 {
    color: #fff;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_search_home {
    position: absolute;
    padding: 0 90px 0 0;
    top: -250px;
    z-index: 9;
    color: #fff;
}

.collection_search_home .search_home_title {
    display: block;
    margin: 0 0 10px;
    color: #fff;
    font-size: 2.2em;
    line-height: 1.2em;
}

.collection_search_home p {
    font-size: 1.4em;
}

.collection_search_home .form-control,
.collection_search_home .input-group-btn {
    border-color: #fff;
    box-shadow: none;
}

.collection_search_home .input-group-btn .btn {
    background-color: #fff;
    color: var(--primary);
    border-radius: 0;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_search_inline {
    position: relative;
    padding: 45px 45px;
    background-color: #30adc6;
    background-image: url(../images/search.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    width: 100%;
    color: #fff;
}

.collection_search_inline::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: -100vw;
    width: 100vw;
    background: #30adc6;
}

.collection_search_inline h2 {
    color: #fff;
}

.collection_search_inline p {
    font-size: 1.25em;
}

.collection_search_inline .form-control,
.collection_search_inline .input-group-addon {
    border-color: #fff;
    box-shadow: none;
}

.collection_search_inline .input-group-addon {
    background-color: #fff;
    color: #000;
}

.collection_search_inline .input-group-addon + .input-group-btn .btn {
    margin-left: 15px;
    border-radius: 0;
    text-transform: uppercase;
    border-radius: 0;
    color: #fff;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_spotlight_section {
    position: relative;
    padding: 30px 0;
    margin: 30px 0;
    background: var(--primary);
    color: #fff;
}

.collection_spotlight_section .row {
    display: flex;
    align-items: center;
}

.collection_spotlight_section .spotlight_strapline {
    font-size: 3.2em;
    line-height: 1.2em;
}

.collection_spotlight_section h2 {
    margin: 15px 0;
    font-size: 2em;
    color: #fff;
}

.collection_spotlight_section h2 a {
    color: #fff;
    transition: color 0.3s linear;
}

.collection_spotlight_section h2 a:focus,
.collection_spotlight_section h2 a:hover {
    color: #cd7190;
}

.collection_spotlight_section .spotlight_category {
    position: relative;
    background: #cd7190;
    display: inline-flex;
    padding: 5px 15px;
    gap: 15px;
    align-items: center;
    font-size: 1.5em;
    line-height: 1.2em;
}

.collection_spotlight_section .spotlight_category img {
    max-height: 30px;
}

.collection_spotlight_section .core_btn_spotlight_info {
    background: #75003d;
}

.collection_spotlight_section .core_btn_spotlight_info:focus,
.collection_spotlight_section .core_btn_spotlight_info:hover {
    background: #cd7190;
}

.collection_spotlight_section .core_btn_spotlight_cate {
    background: #cd7190;
}

.collection_spotlight_section .core_btn_spotlight_cate:focus,
.collection_spotlight_section .core_btn_spotlight_cate:hover {
    background: #75003d;
}

.collection_spotlight_section .share_buttons a {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 10px;
}

.collection_spotlight_section .share_buttons a + a {
    margin: 0 0 0 30px;
}

.collection_spotlight_section .share_buttons a svg {
    fill: #fff;
    transition: fill 0.3s linear;
}

.collection_spotlight_section .share_buttons a:hover svg {
    fill: #cd7190;
}

/*-----------------------------------------------------------------------------------------------*/

.collection_featured_section {
    position: relative;
    padding: 15px 0;
    margin: 0 0 -30px;
}

.featured_carousel .prev_item,
.featured_carousel .next_item {
    position: absolute;
    padding: 10px;
    background: #fff;
    color: #000;
    top: 50%;
    z-index: 99;
    cursor: pointer;
    transform: translate(0, -50%);
    transition: background 0.3s linear, color 0.3s linear;
}

.featured_carousel .prev_item:hover,
.featured_carousel .next_item:hover {
    background: var(--primary);
    color: #fff;
}

.featured_carousel .prev_item {
    left: 0;
}

.featured_carousel .next_item {
    right: 0;
}

.featured_carousel_item {
    position: relative;
    padding: 15px 0;
    transition: transform 0.3s linear;
}

.featured_carousel_item:hover {
    transform: scale(1.1);
    z-index: 99;
}

.featured_carousel_image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    min-height: 200px;
}

.featured_carousel_body {
    position: relative;
    background: rgba(var(--primary-rgb), 0.75);
    padding: 15px 65px;
    color: #fff;
    flex-grow: 1;
    opacity: 0;
    transition: opacity 0.3s linear;
}

.featured_carousel_item:hover .featured_carousel_body {
    opacity: 1;
}

.featured_carousel_body .featured_carousel_year {
    display: block;
    margin: 0 0 5px;
}

.featured_carousel_body .featured_carousel_category {
    position: relative;
    display: inline-block;
    background: #9292bb;
    padding: 5px 15px 5px 30px;
    margin: 0 0 0 -30px;
    color: #fff;
    font-size: 1.4em;
    line-height: 1.2em;
}

.featured_carousel_body h3 {
    color: #fff;
    font-size: 1.5em;
}

.featured_carousel_body .core_btn_carousel {
    background: #75003d;
    margin-top: 30px;
}

.featured_carousel_body .core_btn_carousel:focus,
.featured_carousel_body .core_btn_carousel:hover {
    background: #cd7190;
}
