/* 27 inch iMac ----------- */
@media only screen and (min-width : 2400px) {
    body {
		position: relative;
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		z-index:-1;
	  }

    main {
		-webkit-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.33);
		-moz-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.33);
		-ms-box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.33);
		box-shadow: 0px 0px 18px 4px rgba(0,0,0,0.33);
	}

	footer {
		position: sticky;
		bottom: 0;
		left: 0;
		z-index:-3;
	}
}

/* 24 inch iMac ----------- */
@media only screen and (min-width : 1600px) {
	header.shrink .brand {
		width: 6%;
	}

	.language {
		font-size: 22px;
	}

	.brand {
		width: 10%;
	}

	.logo-left {
		height: 34px;
		width: auto;
	}

	.logo-right {
		height: 34px;
		width: auto;
	}
}

/* 27 inch iMac ----------- */
@media only screen and (min-width : 2400px) {
}

@media only screen and (max-width : 1650px) {
}

@media only screen and (max-width : 1500px) {
    .purple-box {
        width: 65%;
        border: 4px solid #2c383d;
    }
}

@media only screen and (max-width : 1200px) {
    .purple-box {
        width: 75%;
    }
    .infos-important h5 {
        font-size: 2.9vw;
    }
}

@media only screen and (max-width : 1100px) {
}

@media only screen and (max-width : 1024px) {
    .films-item-text-solo {
        text-align: center;
    }

    @media only screen and (max-width : 991px) {
        .event-modal .event-modal-body {
            padding: 0 4rem 44px !important;
        }

        .event-modal .event-modal-footer {
            padding: 0 4rem 22px !important;
        }

        .event-modal .event-modal-section-content {
            grid-template-columns: 1fr;
            gap: 32px;
            padding-top: 36px;
        }

        .event-modal .event-modal-media {
            max-width: 680px;
        }
    }

    @media only screen and (max-width : 575px) {
        .event-modal .event-modal-header {
            min-height: 50px;
            padding: 12px 12px 3px;
        }

        .event-modal .event-modal-body {
            padding: 0 4rem 44px !important;
        }

        .event-modal .event-modal-section-heading {
            align-items: flex-start;
            flex-direction: column;
            gap: 16px;
        }

        .event-modal .event-modal-heading-copy {
            flex-basis: auto;
        }

        .event-modal .event-modal-ticket {
            margin: 0;
        }

        .event-modal .event-modal-divider {
            margin-top: 22px;
        }

        .event-modal .event-modal-section-content {
            gap: 26px;
            padding-top: 28px;
        }

        .event-modal .event-modal-section + .event-modal-section {
            margin-top: 52px;
        }

        .event-modal .event-modal-copy ul,
        .event-modal .event-modal-programme-details {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px 0;
        }

        .event-modal .event-modal-copy li,
        .event-modal .event-modal-detail {
            min-width: 0;
        }

        .event-modal .event-modal-footer {
            padding: 0 4rem 22px !important;
        }
    }

    .films-item img {
		width: 40%;
		margin: 5%;
	}

	#slider-eplv h2 {
		font-size: 4vw!important;
	}

	#slider-eplv p {
		font-size: 2.3vw!important;
	}

    .new-slider {
        font-size: 14px;
        left:-8%;
    }

    .purple-box {
        width: 100%;
        border: 3px solid #2c383d;
    }

    .modal-body h4 {
        margin-top: 10px;
        font-size: 1.3rem;
    }

    .notice {
		width: 90%;
		padding: 5%;
    }

    .promo-new {
        padding: 5px;
        font-size: 16px;
    }

    h4 {
		font-size: 1.3rem!important;
		margin-bottom: 5px;
	}

	.coords h4, .coords h5 {
		font-size: 1rem!important;
	}

	#map {
        height: 450px;
	}

	address {
		padding-bottom: 20px;
	}

	address.last {
		padding-bottom: 0;
	}

	.logo-left, .logo-right {
		height: 28px;
	}

    .modal-title {
        text-align: center;
    }
}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 768px) {
    .calendar-section {
        padding-right: 12px;
        padding-left: 12px;
    }

    .calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .calendar-heading-group,
    .calendar-date-navigation {
        width: 100%;
        justify-content: space-between;
    }

    .calendar-heading-group h2 {
        font-size: 1.7rem!important;
    }

    .calendar-date-navigation {
        gap: 6px;
    }

    #calendar-date-label {
        min-width: 0;
        flex: 1;
    }

    .calendar-scroll {
        margin-right: -12px;
    }

    #calendar {
        min-width: 100%;
    }

    #calendar {
        font-size: 1rem!important;
    }

    .planetarium-resource-cell {
        min-height: 106px;
    }

    .calendar-resource {
        min-height: 80px;
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-resource img {
        flex-basis: 80px;
        width: 80px;
        height: 80px;
    }

    .calendar-resource-arrow {
        display: none;
    }

    .calendar-resource.is-interactive .calendar-resource-copy {
        padding-bottom: 0;
    }

    .ui-datepicker {
        width: calc(100vw - 24px);
        max-width: 344px;
    }

    h1 {
        font-size: 5.5vw!important;
    }

    h2 {
        font-size: 4.5vw!important;
    }

    h3 {
        font-size: 3.5vw!important;
    }

    .minutes {
        font-size: 4vw!important;
    }

    .slider-caption {
        top: 60% !important;
    }

    .curved {
        bottom: -4px;
    }

    .new {
        top: 0;
        bottom: auto;
        -webkit-border-bottom-right-radius: 0;
        -webkit-border-bottom-left-radius: 0;
        -moz-border-radius-bottomright: 0;
        -moz-border-radius-bottomleft: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;

        -webkit-border-top-right-radius: 15px;
        -webkit-border-top-left-radius: 15px;
        -moz-border-radius-topright: 15px;
        -moz-border-radius-topleft: 15px;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
    }

    .filters {
        margin: 2% 3% 2% 3%;
    }

    .films-item h5, .films-item p {
        padding: 0 10px;
    }

    ul li:before {
        font-weight: normal;
    }

    .fc-list-item.fc-has-url {
        font-size: 100%;
    }

    .fc-toolbar h2 {
        font-size: 16px!important;
    }
    .fc table, body .fc {
        font-size: 0.85em!important;
    }

    .films-item-container p, .modal-body p, .modal-body ul {
        font-size: 0.75rem;
    }

    .modal-body h4 {
        font-size: 16px;
    }

    .fc-view-container {
        background-color:rgba(44,56,61,0.78);
    }

    small span.details, small.date span.details {
        display: block;
        width: 100%;
    }

    small.date span.details {
        margin-top: 0;
        text-align: left;
    }

    small span.details::before,  small.date span.details::before {
        content: "";
    }

	.hidden_desktop {
		display:block!important;
	}

	.hidden_mobile {
		display: none!important;
    }

    .films-item-container {
        padding: 0 5px 5% 5px;
    }

	.logo-eplv {
		right: -6%;
		width: 34%;
	}

    .copyright {
        font-size: 9px;
        padding: 20px;
        text-align: center;
    }

	#loading-center-absolute {
		right: 45%;
	}

	.modal-body img.modal-logo {
		margin: 5% auto 4% auto;
	}

	.copyright img.img-logo-cmm-mobile {
		height: 32px;
		margin: 3% auto 5% auto;
		width: auto;
	}

	.copyright img.img-logo-vdm-mobile {
		height: 22px;
		margin: 3% auto;
		width: auto;
	}

	.align-center-mobile {
		text-align: center;
	}

    .buy-tickets {
        margin: 0 auto 7% 0;
        padding: 3% 3% 5% 3%;
        width: 100%;
        text-align: center;
    }

    .fc-ltr .fc-list-item-marker {
        padding: 8px 0!important;
    }

    .fc-event-dot {
        display: inline-block;
        width: 5px!important;
        height: 5px!important;
        border-radius: 50%!important;
        -webkit-border-radius: 50%!important;
        -moz-border-radius: 50%!important;
        -ms-border-radius: 50%!important;
        -o-border-radius: 50%!important;
    }

    .fc button {
        font-size: 0.75em!important;
    }

    .fc-list-item-time, .fc-list-item-title, .fc-widget-header, .show-title {
        padding: 8px!important;
    }

    .fc-toolbar.fc-header-toolbar {
        margin-bottom: 2em!important;
    }

    .fc-toolbar .fc-left {
        width: 100%;
    }

    .fc-toolbar h2 {
        text-align: center;
        width: 100%;
    }

    .fc-toolbar .fc-right {
        float: left;
        width: 100%;
        margin-top: 10px;
    }

    body .fc-right {
        font-size: 1.5em!important;
    }

    .fc .fc-toolbar>*>* {
        float: none!important;
    }

    .cbp-l-filters-buttonCenter .cbp-filter-item {
        margin: 5px!important;
        display: block;
    }

    .video iframe, #videos object, #videos embed, .youtube-video {
        padding: .25rem;
    }

    .brand {
		width: 17%;
	}

	.nav-center {
		left: 50%;
		text-align: center;
	}

	.museums {
		padding: 0;
	}

	.tickets-link {
    	padding: 30px 20px;
	}

	#map {
		height: 350px;
	}

	.logo-left, .logo-right {
		height: 25px;
	}
}

@media only screen and (max-width : 650px) {
	#slider-eplv p {
		font-size: 2.8vw!important;
	}
}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 480px) {
    .brand {
		width: 20%;
	}

	.nav-center .btn:not(.ticket-cta) {
		font-size: 3vw!important;
	}

	#slider-eplv p {
		font-size: 4vw!important;
	}

    small.date {
        font-size: 80%!important;
    }

	.modal-body img.modal-logo {
		height: 33px;
	}

	.services i {
		font-size: 35px;
	}

	.tickets-link {
    	padding: 4% 2%;
	}

	ol, ul {
		padding-left: 10px;
	}

    body .fc-right {
        font-size: 1.6em!important;
    }

    .logo-left, .logo-right {
		height: 20px;
	}
}

@media only screen and (max-width : 322px) {
    body {
        font-size: 0.75em!important;
    }

	.brand {
		width: 25%;
	}

    .films-item h5 {
        font-size: 1rem;
    }

    .btn:not(.ticket-cta) {
        font-size: 0.6rem!important;
    }

    body .fc-right {
        font-size: 1.8em!important;
    }
}

/* The hero keeps its navigation and text readable on smaller screens. */
@media only screen and (max-width: 767px) {
    /* Clip page-level overflow without creating a scroll container that
       would interfere with sticky sections or the calendar's own scrolling. */
    html,
    body {
        overflow-x: clip;
    }

    :root {
        --page-content-gutter: 7%;
    }
    .hero-header {
        gap: 16px;
        padding: 24px;
    }

    .hero-brand {
        width: 140px;
    }

    .hero-navigation {
        gap: 16px;
    }

    .hero-navigation .hero-ticket-link {
        max-width: 180px;
        padding: 12px 16px;
        font-size: 12px;
    }

    .hero-navigation .language {
        font-size: 16px;
    }

    .hero-content {
        padding: 48px var(--page-content-gutter) 100px;
    }

    .planetarium-hero h1 {
        max-width: 580px;
        font-size: clamp(36px, 6.8vw, 52px)!important;
        line-height: 1.15;
    }

    .hero-title-break {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    .hero-header {
        gap: 12px;
        padding: 20px 16px;
    }

    .hero-brand {
        width: 110px;
    }

    .hero-navigation {
        gap: 12px;
    }

    .hero-navigation .hero-ticket-link {
        max-width: 160px;
        padding: 10px 12px;
    }
}

@media only screen and (max-height: 600px) {
    .hero-header {
        padding-block: 16px;
    }

    .hero-content {
        padding-top: 20px;
        padding-bottom: 64px;
    }

    .planetarium-hero h1 {
        font-size: clamp(28px, 7vh, 48px)!important;
    }
}

@media only screen and (max-width: 1100px) {
    .offer-card {
        grid-template-columns: 38% minmax(0, 1fr);
        gap: 32px;
        padding: 48px 32px;
    }

    .offer-card .offer-title {
        font-size: 28px!important;
    }

    .offer-copy {
        font-size: 18px;
    }
}

@media only screen and (max-width: 767px) {
    .offer-section {
        margin-top: -64px;
        padding: 0 var(--page-content-gutter) 32px;
        background: linear-gradient(to bottom, transparent 64px, #fff 64px);
    }

    .offer-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        min-height: 0;
        padding: 36px 24px;
    }

    .offer-card .offer-title {
        margin-top: 0;
        font-size: 26px!important;
    }

    .offer-copy {
        font-size: 17px;
        line-height: 1.5;
    }

    .offer-copy p {
        margin-bottom: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .sticky-menu {
        gap: 12px;
        padding: 15px 16px;
    }

    .sticky-menu .hero-ticket-link {
        max-width: 180px;
        padding: 10px 12px;
        white-space: normal;
    }

    .sticky-menu .language {
        font-size: 14px;
    }
}

@media only screen and (max-width: 360px) {
    .sticky-menu {
        gap: 8px;
        padding-inline: 12px;
    }

    .sticky-menu .sticky-navigation {
        gap: 10px;
    }

    .sticky-menu .hero-ticket-link {
        padding-inline: 10px;
    }
}

@media only screen and (max-width: 1100px) {
    .experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .experience-grid .experience-card {
        height: 440px;
    }

    .experience-card h3 {
        max-width: 330px;
        font-size: 28px!important;
    }
}

@media only screen and (max-width: 767px) {
    .experiences-section {
        padding-top: 28px;
        padding-bottom: 128px;
    }

    .experiences-intro h2 {
        margin-bottom: 24px;
        font-size: 32px!important;
    }

    .experiences-title-break {
        display: none;
    }

    .experiences-intro p {
        margin-bottom: 36px;
        font-size: 18px;
        line-height: 1.5;
    }

    .experience-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 14px;
    }

    .experience-grid .experience-card {
        width: 100%;
        height: auto;
        min-height: 220px;
        aspect-ratio: 183 / 247;
        padding: 16px 10px;
    }

    .experience-card h3 {
        position: absolute;
        top: 50%;
        left: 10px;
        right: 10px;
        max-width: none;
        transform: translateY(-50%);
        font-size: clamp(16px, 5.1vw, 22px)!important;
        line-height: 1.2;
    }

    .experience-card-arrow {
        right: 12px;
        bottom: 18px;
        width: 24px;
        height: 24px;
    }

    .experience-card-arrow svg {
        width: 16px;
        height: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .experiences-section {
        padding-inline: 12px;
    }

    .experiences-intro {
        padding-inline: 12px;
    }
}

@media only screen and (max-width: 1000px) {
    .astronomy-intro {
        padding: 64px 32px;
    }

    .astronomy-intro h2 {
        font-size: 40px!important;
    }

    .astronomy-more-layout {
        gap: 32px;
        padding: 56px 32px;
    }
}

@media only screen and (max-width: 767px) {
    .astronomy-overview {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    /* Put each feature's title, image and copy in separate mobile rows. */
    .astronomy-intro {
        display: contents;
    }

    .astronomy-intro h2 {
        grid-row: 1;
        margin: 0;
        padding: 60px 32px;
        font-size: clamp(32px, 11.3vw, 44px)!important;
    }

    .astronomy-intro .astronomy-copy {
        grid-row: 3;
        max-width: none;
        padding: 44px 32px 32px;
    }

    .astronomy-copy p:last-child {
        margin-bottom: 0;
    }

    .astronomy-intro .astronomy-ticket {
        grid-row: 4;
        justify-self: start;
        margin: 0 32px 48px;
    }

    .astronomy-copy,
    .astronomy-more-copy,
    .practical-info-copy p {
        font-size: 16px;
    }

    .astronomy-image {
        grid-row: 2;
        height: clamp(400px, 140vw, 620px);
    }

    .astronomy-more-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 48px var(--page-content-gutter);
    }

    .astronomy-more-copy {
        max-width: 100%;
        padding-top: 0;
    }

    .astronomy-schedule-columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .astronomy-more-layout > img {
        max-width: 480px;
        aspect-ratio: 1.4;
    }

    .astronomy-toggle {
        min-height: 76px;
        font-size: 18px;
    }
}

@media only screen and (max-width: 1000px) {
    .films-intro {
        grid-template-columns: 55% minmax(0, 1fr);
        gap: 32px;
        padding-bottom: 56px;
    }

    .films-intro h2 {
        font-size: 38px!important;
    }
}

@media only screen and (max-width: 767px) {
    .films-parallax {
        height: clamp(230px, 48vw, 340px);
    }

    .films-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 36px var(--page-content-gutter) 32px;
    }

    .films-intro h2 {
        font-size: clamp(30px, 7.7vw, 40px)!important;
    }

    .films-intro p {
        margin: 0;
        font-size: 16px;
    }

    .films-section .calendar-section {
        padding-inline: var(--page-content-gutter);
    }

    .films-section .calendar-scroll {
        margin-right: 0;
    }
}

@media only screen and (max-width: 767px) {
    .practical-info-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        max-width: 540px;
        margin-inline: auto;
        padding: 64px var(--page-content-gutter);
    }

    .practical-info-section h2,
    .practical-info-copy {
        grid-column: 1;
    }

    .practical-info-section h2 {
        font-size: clamp(36px, 9vw, 48px)!important;
    }

    .practical-info-copy h3 {
        margin-top: 0;
    }
}

@media only screen and (max-width: 767px) {
    .day-visit-section {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 540px;
        margin-inline: auto;
        padding: 48px var(--page-content-gutter) 80px;
    }

    .day-visit-heading {
        grid-area: 1 / 1;
        padding-right: 0;
        margin-bottom: 40px;
    }

    .day-visit-stop {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .day-visit-stop h3 { margin-top: 16px; }
    .day-visit-stop--shows { grid-row: 2; margin-bottom: 48px; }
    .day-visit-stop--films { grid-row: 3; width: 74%; margin-bottom: 140px; }
    .day-visit-stop--exhibition { grid-row: 4; margin-bottom: 120px; }
    .day-visit-stop--activities { grid-row: 6; width: 83%; justify-self: end; margin-bottom: 110px; }
    .day-visit-stop--vego { grid-row: 5; margin-bottom: 110px; }
    .day-visit-stop--shops { grid-row: 7; }

    .day-visit-stop--shows img { aspect-ratio: 1.15; }
    .day-visit-stop--films img { aspect-ratio: 0.77; }
    .day-visit-stop--exhibition img { aspect-ratio: 1.6; }
    .day-visit-stop--activities img { aspect-ratio: 1.04; }
    .day-visit-stop--shops img { aspect-ratio: 1.28; }

    /* Keep the supplied arrows in the open space between each mobile stop. */
    .day-visit-stop--shows > .day-visit-arrow--after {
        top: calc(100% + 12px);
        left: auto;
        right: 8%;
        width: 40px;
        aspect-ratio: 80 / 149;
        background-image: url('../img/day-visit/arrow-svg-5.svg');
    }

    .day-visit-stop--exhibition > .day-visit-arrow--before {
        top: auto;
        bottom: calc(100% + 22px);
        left: 0;
        width: 80px;
    }

    .day-visit-stop--activities > .day-visit-arrow { display: block; }

    .day-visit-stop--activities > .day-visit-arrow--before {
        bottom: calc(100% + 12px);
        left: -16%;
        width: 52px;
        aspect-ratio: 78 / 112;
        background-image: url('../img/day-visit/arrow-svg-4.svg');
    }

    .day-visit-stop--activities > .day-visit-arrow--after {
        top: calc(100% + 12px);
        right: 0;
        width: 42px;
        aspect-ratio: 80 / 149;
        background-image: url('../img/day-visit/arrow-svg-5.svg');
    }

    .day-visit-stop--vego > .day-visit-arrow--before,
    .day-visit-stop--vego > .day-visit-arrow--after { display: none; }

    .day-visit-stop--shops > .day-visit-arrow--before {
        top: auto;
        bottom: calc(100% + 12px);
        left: 0;
        width: 78px;
    }
}

@media only screen and (max-width: 1000px) {
    .access-layout { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
    .access-address-card { min-width: 240px; padding: 24px; }
    .access-address-card address { font-size: 16px; }
}

@media only screen and (max-width: 767px) {
    .access-section { padding: 40px 0; }
    .access-section h2 { margin: 0 24px 28px; }
    .access-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .access-map-panel {
        min-height: 0;
        border-radius: 0;
        overflow: visible;
    }
    .access-map-panel #map {
        width: 100%;
        height: clamp(280px, 85vw, 420px);
        min-height: 0;
    }
    .access-address-card {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        min-width: 0;
        margin: 16px 24px 0;
        padding: 28px;
    }
    .access-options { padding-inline: 24px; }
    .access-option { padding-block: 24px; }
    html[lang="en"] {
        .access-address-card {
            width: auto;
        }
    }
}

@media only screen and (max-width: 767px) {
    .site-footer .copyright {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: clamp(40px, 13vw, 96px);
        padding: clamp(28px, 8vw, 60px) 9.5% 12px;
    }

    .site-footer .footer-logos {
        width: 100%;
        justify-content: space-between;
        gap: 24px;
    }

    .site-footer .footer-logos img {
        height: clamp(24px, 8vw, 60px);
        max-width: calc(50% - 12px);
        object-fit: contain;
    }

    .site-footer .cky-banner-element {
        margin: 0;
        justify-content: center;
        font-size: clamp(12px, 3.2vw, 24px);
        min-height: 32px;
    }

    .back-to-top img {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }
}