/* Homepage */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: none;
    text-decoration: none;
}

html, body {
    margin: auto;
    scroll-behavior: smooth;
}

.body {
    background: var(--surface-primary);
    color: var(--text-primary);
    -webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out;
}

h1, h2, .transition-text {
    text-transform: uppercase;
}
h1 {
    color: var(--text-invert);
    
	 font-family: var(--h-g-h2-font);
	 font-weight: var(--h-g-h2-weight);
	 font-size: var(--h-g-h2-font-size);
	 line-height: var(--h-g-h2-line-height);
}
.accent-heading {
    color: var(--gold-inspired);
    
	 font-family: var(--h-t-h1-font);
	 font-weight: var(--h-t-h1-weight);
	 font-size: var(--h-t-h1-font-size);
	 line-height: var(--h-t-h1-line-height);
}

.screen {
    background: var(--off-white);
    position: relative;
}

.screen.hero {
    min-height: 85vh;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( to top, rgba(8, 8, 11, .8) 0px, rgba(8, 8, 11, 0.0) 100% );
}

h1 {
    z-index: 2;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: calc(var(--transition-height) + 64px);
    line-height: 1;
}

h2 {
    
	 font-family: var(--h-g-h2-font);
	 font-weight: var(--h-g-h2-weight);
	 font-size: var(--h-g-h2-font-size);
	 line-height: var(--h-g-h2-line-height);
	 color: var(--text-primary);
}

h2 .accent-heading {
    
	 font-family: var(--h-t-h2-font);
	 font-weight: var(--h-t-h2-weight);
	 font-size: var(--h-t-h2-font-size);
	 line-height: var(--h-t-h2-line-height);
	 color: var(--text-brand-onlight);
}



/* Parallax */

:root {
    --parallax-max-width: var(--wide-widget-max-width);
}

.parallax {
    width: 100%;
    max-width: var(--parallax-max-width);
    margin: auto;
    position: relative;
    margin-top: calc(var(--transition-height) / 2);
    margin-bottom: calc(var(--transition-height) / 2);
}

.parallax > * {
    position: absolute;
    width: 100%;
}

.parallax .box1 {
    width: 562px;
    top: 0;
    z-index: 5;
    height: fit-content;
}

.box1-inner {
    padding: 64px 52px;
    background: var(--surface-onprimary);
    color: var(--text-primary);  
    width: 100%;
    height: 100%;
}

.parallax1 .box1-inner {
    box-shadow: -4px 4px 7px 0px rgba(0, 0, 0, 0.1);
}
.parallax1 .smallBox {
    box-shadow: 4px 4px 7px 0px rgba(0, 0, 0, 0.2);
}

.parallax2 .smallBox {
    box-shadow: -4px 4px 7px 0px rgba(0, 0, 0, 0.2);
}
.parallax2 .box1-inner {
    box-shadow: 4px 4px 7px 0px rgba(0, 0, 0, 0.1);
}

.box1-inner .button-row {
    flex-wrap: wrap;  
    margin-bottom: 0;
}

 .button-row > a.outline-button  {
	 border: var(--accent-button-border);
	 padding: var(--button-padding);
	 line-height: 1;
	 display: block;
	 font-weight: bold;
	 font-size: var(--button-font-size);
	 cursor: pointer;
	 width: auto;
}
 .button-row > a.outline-button,  .button-row > a.outline-button:first-child {
	 padding: var(--button-outline-padding);
	 color: var(--text-primary);
	 background: unset;
}
.button-row > a.outline-button:hover {
	 border: var(--accent-button-border-hover);
	 padding: var(--button-outline-padding-hover);
}

.parallax-image {
    width: 720px;
    height: 625px;
    overflow: hidden;
}

.parallax-image img {
    width: 100%;
}

.parallax .smallBox {
    background: var(--surface-gold-aa);
    color: var(--text-invert);
    width: 270px;
    z-index: 5;
    padding: 20px 24px;
}

.parallax .smallBox p {
    margin: 0;
     font-family: var(--b-s-font);
     font-weight: var(--b-s-weight);
     font-size: var(--b-s-font-size);
     line-height: var(--b-s-line-height);
}


    
.transition.only-text {
    height: 140px;
    margin: 32px 0;
}

.transition.only-text .vertical.topline {
    top: 0;
    height: 140px;
}

.transition.only-text .transition-text {
    top: 36px;
}

.final-box {
    position: relative;
    background: var(--surface-invert);
    padding: 64px;    
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--surface-invert);
}

.final-box .short-line {
    margin-right: calc(100% - 5rem);
}
    
    .final-box .short-line.wide {
        display: block;
    }
    
    .final-box .short-line.mobile {
        display: none;
    }

.final-box h2 {
    color: var(--text-invert);
    width: fit-content;
}

.final-box h2 .accent-heading {
    color: var(--text-brand-ondark);
}

.final-box p {
    color: var(--text-invert);
     font-family: var(--b-s-font);
     font-weight: var(--b-s-weight);
     font-size: var(--b-s-font-size);
     line-height: var(--b-s-line-height);
     width: fit-content;
    max-width: 650px;
    padding-left: 64px;
}

.transition.dark {
    position: relative;
    top: auto;
}

.transition.dark .angled {
    transform: translateY(1px);
}

.transition.dark .vertical.topline {
    height: calc(var(--transition-height)* 1.2);
    top: 42%;
}

.transition.dark .transition-text {
    position: relative;
    width: 100%;
    transform: none;
    margin: auto;
    text-align: center;
    top: auto;
    left: auto;
    background: var(--surface-invert);
    color: var(--text-brand-ondark);
}

.final-box .button-row a {
    color: var(--text-invert) !important;
}

.vid-car-wrap {
    
    background: linear-gradient(
        to bottom,
        var(--surface-invert) 60%,
        transparent 60%
      );
}

.video-carousel {
    background: transparent;
    gap: 16px;
}

.video-carousel.fit {
    padding-bottom: 72px;
}

@media (min-width: 1233px) {
 .screen {
     
    height: 728px;
 }   
}

@media (max-width: 1232px) {
    
    .screen {
        height: auto;
        min-height: 80vh;
    }
    .transition .transition-text {
            top: 100%;
    }
    
    .parallax {
        max-width: var(--widget-max-width);
    }
    
    .parallax > * {
        position: relative;
    }
    
    .corner-box {
        padding: 0;
    }
    
    .corner-box-corner {
        display: none;
    }
    
    .parallax .box1 {
        width: 100%;
        top: 64px !important;
    }
    
    .box1-inner {
        padding: 48px 24px;
    }
    
    .box1-inner .button-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .parallax-image {
        padding: 12px;
        width: 100%;
        max-width: 625px;
        margin: auto;
        height: auto;
        overflow: visible;
    }
    
    .parallax-image .corner-box-corner {
        display: none;
    }
    
    .parallax .smallBox {
        position: absolute;
        right: 50% !important;
        left: auto !important;
        transform: translateX(50%);
        bottom: -16px !important;
        top: auto !important;
    }
    
    .transition.only-text {
        height: 120px;
        margin: 32px 0;
    }
    
    .transition.only-text .vertical.topline {
        top: 0;
        height: 120px;
    }
    
    .transition.only-text .transition-text {
        top: 40px;
    }
    
    .final-box {
        padding: 64px 20px;    
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    }
    
    .final-box h2, .final-box p {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
    }
    
    .final-box .short-line {
        width: 5rem;
        margin: auto;
    }
    
    .final-box .short-line.wide {
        display: none;
    }
    
    .final-box .short-line.mobile {
        display: block;
    }
    
    .final-box .button-row {
        flex-wrap: nowrap;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 1366px) {
    body {
        margin-top: 71px;
    }
}



/*

.parallax .box1 {
    background: var(--surface-onprimary);
    color: var(--text-primary);
    width: 40%;
    top: 10px;
    z-index: 5;
    padding: 2rem;
}

.parallax .box1 p {
    padding-bottom: 1rem;
}

.parallax .parallax-image {
    background: var(--off-black);
    width: 80vh;
    bottom: 64px;
    z-index: 4;
}

.parallax .parallax-image img {
    width: 100%;
    height: 100%;
    display: block;
}

.parallax .smallBox {
    background: var(--surface-gold-aa);
    color: var(--text-invert);
    width: 25%;
    bottom: 0;
    z-index: 5;
    padding: 1rem;
}

*/

p {
}

.parallax .box1 a {
    
}

/* Parallax 1 */

.parallax1 .box1 {
    left: 0;
}

.parallax1 .parallax-image {
    right: 0;
}

.parallax1 .smallBox {
    right: 0;
}

/* Parallax 2 */

.parallax2 .box1 {
    right: 0;
}

.parallax2 .parallax-image {
    left: 0;
}

.parallax2 .smallBox {
    left: 0;
}

/*.parallax1 .box1::after {
    content: "";
    padding: 1rem;
    border: 1px solid var(--gold);
    left: 0;
    bottom: 0;
    
}*/

.transition {
    bottom: 0;
}

.transition .angled {
    
    transform: translateY(1px);
}