body
{
	--bannerHeight:100vh;

	overflow:hidden !important;
}

header {
    border-bottom:none;
}

#banner {
	--d:10000ms;

    z-index:2;
    position:absolute;
    width:100%;
    min-height:450px;
    height:var(--bannerHeight);
    overflow:hidden;
}
/* #banner::after
{
	content:'';
	position:absolute;
	bottom:-16px;
	left:0;
	right:0;
	height:16px;
	box-shadow:0 0 12px #000E;
} */
#banner > .gallery {
	position:relative;
	display:none;
	width:100%;
	height:100%;
}
body.gallery #banner > .gallery {
	display:block;
}
#banner > .gallery > img {
	position:absolute;
	width:100%;
	height:100%;
	object-position:top;
	object-fit:cover;
	transition:opacity 2.5s ease-in-out;
}
#banner > .gallery > img[data-style="fade"] {
	opacity:0;
}
/* #banner > .gallery > :last-child,
#banner > .gallery > :nth-last-child(2) {
	display:block;
}
#banner > .gallery > :nth-last-child(2) {
	opacity:1;
}
#banner > .gallery > :last-child
{
	transition:opacity 2.5s ease-in-out;
} */
#banner > .gallery > img[data-style="fade"].current {
	opacity:1;
}



#banner > video {
	position:relative;
	top:0;
    left:50%;
    transform:translateX(-50%);
    min-width:100vw;
	height:100%;
    min-height:100vh;
    object-fit:cover;
}



#page > .banner {
    position:relative;
    height:var(--bannerHeight);
    overflow:hidden;
}

#page > .banner > .queue {
	opacity:.6;
	position:absolute;
	left:50%;
	bottom:30px;
	transform:translate(-50%, 50%);
	display:none;
	height:11px;
	padding:3px 6px;
	filter:drop-shadow(0 0 1px #000A);
	cursor:pointer;
	flex-direction:row;
	gap:7px;
	transition-duration:.1s;
}
body.gallery #page > .banner > .queue {
	display:flex;
}
/* #page > .banner > .queue > .dots {
	display:flex;
	height:13px;
	cursor:pointer;
	flex-direction:row;
	gap:7px;
	transition-duration:.1s;
} */
#page > .banner > .queue:hover {
	height:17px;
}
#page > .banner > .queue .dot {
	height:100%;
	aspect-ratio:1;
	box-sizing:border-box;
	border:3px solid #FFF;
	border-radius:999px;
	background-color:transparent;
	transition:.4s;
}
#page > .banner > .queue .dot:hover {
	background-color:#FFF;
}
#page > .banner > .queue .dot.current {
	background-color:#FFF;
}
#page > .banner > .queue:hover .dot.current {
	background-color:var(--mcci-blue);
	border:3px solid var(--mcci-blue);
}


#page > .banner > .timer {
	opacity:0.7;
	position:absolute;
	left:0;
	bottom:0;
	display:none;
	width:0;
	height:5px;
	background-color:#999;
	animation-name:timer_width;
	animation-duration:var(--d);
	animation-fill-mode:forwards;
	animation-timing-function:linear;
}
body.gallery #page > .banner > .timer {
	display:block;
}
@keyframes timer_width {
	from {
		width:0;
	}
	to {
		width:100%;
	}
}

#page > .down {
	opacity:0.5;
	position:fixed;
	left:50%;
	bottom:10%;
	transform:translateX(-50%);
    z-index:2;
	width:85px;
	height:60px;
	border-radius:3px;
	background-color:var(--mcci-blue);
	cursor:pointer;
}
body.project #page > .down {
    display:none;
}
#page > .down:hover {
	opacity:1;
	filter:drop-shadow(0 0 2px #0006);
}

#page > .down > img {
    position:relative;
	left:50%;
    top:50%;
	transform:translate(-50%, -50%) rotate(90deg);
    height:42px;
	transition:top .3s;
}
#page > .down:hover > img {
    top:65%;
}


#page > .background {
    position:absolute;
    left:0;
    right:0;
    top:var(--bannerHeight);
    bottom:0;
    z-index:3;
	min-height:calc(100vh - 100px);
	background-color:var(--theme1-main);
	box-shadow:0 0 12px #000E;
}

body > main {
	z-index:3;
	position:relative;
    width:100%;
    height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	padding-bottom:unset !important;
	background-color:unset !important;
}

#page {
    position:relative;
	z-index:1;
	box-sizing:border-box;
    width:100%;
	min-height:100%;
	padding-bottom:100px;
}

footer {
	position:absolute;
	bottom:0;
	z-index:99;
}

section#statements {
    position:relative;
    display:flex;
    width:100%;
    margin-top:150px;
	background-color:#FFF;
	box-shadow:var(--shadow);
}
section#statements > .pannels {
    width:100%;
    padding:10px;
}
.v2 section#statements > .pannels {
    width:unset;
}
section#statements > .pannels > .pannel {
    position:relative;
    height:100vh;
    width:100%;
    margin-left:auto;
    overflow:hidden;
}
section#statements > .pannels .image {
	max-width:calc(100% - 500px);
    height:100%;
	aspect-ratio:16/9;
    margin-left:auto;
    padding:10px;
}
section#statements > .pannels .image > img {
	width:100%;
    height:100%;
    object-position:right center;
    object-fit:cover;
}
/* section#statements > .pannels .image > img.portrait {
    object-fit:cover;
} */
section#statements > .side {
    z-index:2;
	position:absolute;
	top:0;
	left:0;
    width:500px;
	height:100%;
}
/* section#statements > .side::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:50px;
    background-image:linear-gradient(to top, rgba(255,255,255, 0), var(--theme1-main) 90%);
} */
/* section#statements > .side::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:50px;
    background-image:linear-gradient(to bottom, rgba(255,255,255, 0), var(--theme1-main) 90%);
} */
section#statements > .side > .sticky {
    z-index:2;
    position:sticky;
    top:0;
    width:100%;
    height:100vh;
}
section#statements > .side > .sticky > p {
    opacity:0;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin:0 auto;
    width:80%;
	padding:14px 16px;
    font-size:1.8em;
    transition:opacity 0.5s ease-in-out;
}
section#statements > .side > .sticky > p.current {
    opacity:1;
    z-index:2;
}

section#more {
    display:flex;
    width:100%;
    padding:50px 0;
    flex-direction:column;
    gap:80px;
}

section#more .best {
    display:grid;
    padding:0 11%;
    text-align:center;
    align-content:center;
	color:#FFF;
}
section#more .best h2 {
    margin-top:0;
    font-family:"Source Sans Pro", Arial, Helvetica, sans-serif;
    font-weight:bold;
}
section#more .best .separator {
    width:80%;
    height:2px;
	margin:10px auto;
    background-color:var(--mcci-blueAlt1);
}
section#more > .more > .row {
    width:80%;
    margin:0 auto;
    text-align:center;
}
.flipCards  {
    display:grid;
    box-sizing:border-box;
	padding:60px 0;
	background:var(--theme1-compliment);
	box-shadow:var(--shadow);
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:20px;
}
.flipCards > .flipCard  {
    perspective:800px;
}
.flipCard > .axis  {
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    box-shadow:0 0 3px #0009;
    transition:transform 0.8s;
    transform-style:preserve-3d;
}
.flipCard:hover > .axis {
    transform:rotateY(180deg);
}
.flipCard .side {
    box-sizing:border-box;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden; /* Safari */
    backface-visibility:hidden;
}
.flipCard .side.front {
    padding:36px 30px;
    background-color:#DADADA;
}
.flipCard .side.front > img {
    height:80px;
    margin:0 auto;
}
/* .flipCard .side.front > h2 {
    color:var(--mcci-blueAlt2);
} */
.flipCard .side.back {
    position:absolute;
    top:0;
    left:0;
    display:grid;
    padding:20px 30px;
    transform:rotateY(180deg);
    background:radial-gradient(at 100% 100%, var(--mcci-blueAlt2) 25%, var(--mcci-blueAlt1) 66%, var(--mcci-blue));
    color:#FFF;
    align-content:center;
}

section#more > .banner {
	z-index:-1;
	position:relative;
	margin:310px 0 330px;
    padding:55px 0;
    background-color:var(--mcci-blueAlt1);
    font-size:2em;
    text-align:center;
    color:#FFF;
}
section#more > .banner > img {
    z-index:-1;
	opacity:.2;
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	height:512px;
	/* filter:invert(48%) sepia(85%) saturate(2997%) hue-rotate(166deg) brightness(105%) contrast(102%); */
    filter:invert(61%) sepia(16%) saturate(280%) hue-rotate(151deg) brightness(98%) contrast(86%);
}

section#more > .video {
    width:80%;
    aspect-ratio:1284/724;
    margin:0 auto;
}
section#more > .video > iframe {
    width:100%;
    height:100%;
}

section#more > .banner > p {
    margin:0;
}


section#more > .cornerstone {
	padding:80px;
	background:var(--theme1-secondary);
	box-shadow:var(--shadow);
}





@media only screen and (max-width: 1000px) {
	section#statements > .side {
		right:0;
		width:unset;
		background-color:rgb(from var(--theme1-main) r g b / 10%);
		pointer-events:none;
	}
	section#statements > .side::before,
	section#statements > .side::after {
		content:unset;
	}
    section#statements > .side > .sticky > p {
        max-width:380px;
        background-color:#FFFA;
    }
    .flipCards  {
		grid-template-columns:1fr 1fr;
    }
}
@media only screen and (max-width: 560px) {

    .flipCards  {
        grid-template-columns:unset;
        gap:60px;
    }
}

@media (max-aspect-ratio: 16/9) {
  /* Styles apply when width less than 16/9 ratio */
    section#statements > .pannels .image > img {
        object-fit:cover;
    }
}