:root {
    --brown: #4C1E2C;
    --green: #23474C;
    --orange: #EE5B2F;
    --h1: 55px;
    --h2: 45px;
}

@font-face {
    font-family: 'utile-display';
    src: url('fonts/UtileDisplay-Medium.woff2') format('woff2'),
        url('fonts/UtileDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* scrollbar */
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 0;
	background-color: #F4F4F4;
}
::-webkit-scrollbar
{
	width: 10px;
	background-color: #F4F4F4;
}
::-webkit-scrollbar-thumb
{
	border-radius: 0;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
	background-color: #CEC160;
    transition: all .5s ease;
}
::-webkit-scrollbar-thumb:hover
{
	border-radius: 0;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #CEC160;
    transition: all .5s ease;
}
/* end scrollbar */

.brown {
    color: var(--brown);
}
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:10000;color: #fff;}
body, html {
    font-family: "DM Sans", sans-serif;
    font-size: 17px;
    line-height: 1.294117647058824em;
    color: #23474C;
    scroll-behavior: auto !important;
}
a {
    color: inherit;
}
a:hover {
    color: inherit;
    text-decoration: none;
}
.utile { font-family: "utile-display",sans-serif; }

/* TYPOGRAPHY */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    font-family: "utile-display",sans-serif;
}
h1, .h1 {
    font-size: var(--h1);
    line-height: 1.327272727272727em;
}
h2, .h2 {
    font-size: var(--h2);
    line-height: 1.333em;
}
h3, .h3 {
    font-size: ;
    line-height: ;
}
h4, .h4 {
    font-size: ;
    line-height: ;
}
h5, .h5 {
    font-size: ;
    line-height: ;
}
#tagline {
    font-size: 100px;
    line-height: 1em;
    color: var(--brown);
}
body, html {
    font-size: ;
    line-height: ;
}
small {
    font-size: 10px;
    line-height: ;
}
.elementor-button, .btn.btn-default {
    font-size: 20px;
    line-height: 1.35em;
    color: var(--orange);
    background-color: transparent;
    border: 2px solid var(--orange);
    padding: 9px 35px;
    border-radius: 0;
    position: relative;
    outline: none !important;
    box-shadow: none !important;
}
#intro .btn.btn-default {
    background-color: #F4F4F4;
}
.elementor-button::before, .btn.btn-default::before {
    content: '';
    width: 0;
    height: 100%;
    background: var(--orange);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transition: all .3s ease;
}
.elementor-button:hover::before, .btn.btn-default:hover::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--orange);
    position: absolute;
    left: 0;
    top: 0;
    transition: all .3s ease;
}
.elementor-button:hover, .btn.btn-default:hover {
    color: #fff !important;
}
.elementor-button:focus, .elementor-button:visited {
    color: var(--orange);
}
.elementor-button-content-wrapper, .btn.btn-default span {
    z-index: 1;
    position: relative;
}
/* END TYPOGRAPHY */

.padding-top {
    padding-top: 60px;
}
.padding-bottom {
    padding-bottom: 60px;
}
.container-left {
    padding-left: 10vw;
}
.container-right {
    padding-right: 10vw;
}

.elementor-counter-number {
    font-family: 'Work Sans';
    font-size: 2.75vw;
    xfont-size: 52px;
    line-height: 1em;
    font-weight: 800;
}

/* CONTENT */
video#bgvid {
    object-fit: cover;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
#intro {
    width: 100%;
    height: 200dvh;
    background: #F4F4F4;
    background-size: cover;
position: relative;}
.slide-1 {
    width: 100%;
    height: 100dvh;
    xbackground: url('img/ABC2024_Website_Masthead.jpg') no-repeat center center;
    xbackground-size: cover;
    position: sticky;
    top: 0;
}
#tagline {
    position: absolute;
    right: 60px;
    top: 50px;
    z-index: 1;
}
#title {
    position: absolute;
    left: 60px;
    bottom: 40px;
    margin-bottom: 0;
    z-index: 1;
}

#tagline, #title {
    filter: blur(5px);
    transition: all 1s ease;
}
.loaded #tagline, .loaded #title {
    filter: blur(0);
    transition: all 1s ease;
}

.home-title span{
    position: relative;
    overflow-x: clip;
    display: block;
}
.home-title span::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #CEC160;
    transform: translateX(-101%);
}
.home-title span:nth-of-type(2)::after {
	background: #23474C;
}
#title span::after {
	background: #4C1E2C;
}
.loaded .home-title span::after{
    animation: a-ltr-after 2s cubic-bezier(.77,0,.18,1) forwards;
}

.home-title span::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #F4F4F4;
    transform: translateX(0);
}
.loaded .home-title span::before{
    animation: a-ltr-before 2s cubic-bezier(.77,0,.18,1) forwards;
}

.home-title span:nth-of-type(1)::before,
.home-title span:nth-of-type(1)::after{
    animation-delay: 0s;
}

.home-title span:nth-of-type(2)::before,
.home-title span:nth-of-type(2)::after{
    animation-delay: 0.25s;
}

#title.home-title span::before, #title.home-title span::after {
    animation-delay: 0.5s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}

#impacts {
    position: relative;
}
#impacts::before {
    content: '';
    background: #4C1E2C;
    width: 100%;
    height: 150px;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    top: auto;
}

#additions::before {
    content: '';
    background: #4C1E2C;
    width: 100%;
    height: 300px;
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
}

.accordion-title {
    cursor: pointer;
}
.accordion-title::after {
    content: '';
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.25" height="29.25" viewBox="0 0 29.25 29.25"><g id="Icon_ionic-ios-add-circle-outline" data-name="Icon ionic-ios-add-circle-outline" transform="translate(-3.375 -3.375)"><path id="Path_22" data-name="Path 22" d="M24.363,16.875H19.125V11.637a1.125,1.125,0,0,0-2.25,0v5.238H11.637A1.077,1.077,0,0,0,10.512,18a1.089,1.089,0,0,0,1.125,1.125h5.238v5.238A1.09,1.09,0,0,0,18,25.488a1.119,1.119,0,0,0,1.125-1.125V19.125h5.238a1.125,1.125,0,0,0,0-2.25Z" fill="%23f4f4f4"/><path id="Path_23" data-name="Path 23" d="M18,5.344A12.651,12.651,0,1,1,9.049,9.049,12.573,12.573,0,0,1,18,5.344m0-1.969A14.625,14.625,0,1,0,32.625,18,14.623,14.623,0,0,0,18,3.375Z" fill="%23f4f4f4"/></g></svg>') no-repeat center center;
    background-size: contain;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.accordion-title.showing::after {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.25" height="29.25" viewBox="0 0 29.25 29.25"><g id="Group_289" data-name="Group 289" transform="translate(-1550 -2689)"><path id="Path_25" data-name="Path 25" d="M12,18H22.249" transform="translate(1547.5 2686)" fill="none" stroke="%23f4f4f4" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><path id="Path_23" data-name="Path 23" d="M18,5.344A12.651,12.651,0,1,1,9.049,9.049,12.573,12.573,0,0,1,18,5.344m0-1.969A14.625,14.625,0,1,0,32.625,18,14.623,14.623,0,0,0,18,3.375Z" transform="translate(1546.625 2685.625)" fill="%23f4f4f4"/></g></svg>') no-repeat center center;
    background-size: contain;
}
#tekoma.accordion-title::after {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.25" height="29.25" viewBox="0 0 29.25 29.25"><g id="Icon_ionic-ios-add-circle-outline" data-name="Icon ionic-ios-add-circle-outline" transform="translate(-3.375 -3.375)"><path id="Path_22" data-name="Path 22" d="M24.363,16.875H19.125V11.637a1.125,1.125,0,0,0-2.25,0v5.238H11.637A1.077,1.077,0,0,0,10.512,18a1.089,1.089,0,0,0,1.125,1.125h5.238v5.238A1.09,1.09,0,0,0,18,25.488a1.119,1.119,0,0,0,1.125-1.125V19.125h5.238a1.125,1.125,0,0,0,0-2.25Z" fill="%2323474c"/><path id="Path_23" data-name="Path 23" d="M18,5.344A12.651,12.651,0,1,1,9.049,9.049,12.573,12.573,0,0,1,18,5.344m0-1.969A14.625,14.625,0,1,0,32.625,18,14.623,14.623,0,0,0,18,3.375Z" fill="%2323474c"/></g></svg>') no-repeat center center;
    background-size: contain;
}
#tekoma.accordion-title.showing::after {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="29.25" height="29.25" viewBox="0 0 29.25 29.25"><g id="Group_289" data-name="Group 289" transform="translate(-1550 -2689)"><path id="Path_25" data-name="Path 25" d="M12,18H22.249" transform="translate(1547.5 2686)" fill="none" stroke="%2323474c" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/><path id="Path_23" data-name="Path 23" d="M18,5.344A12.651,12.651,0,1,1,9.049,9.049,12.573,12.573,0,0,1,18,5.344m0-1.969A14.625,14.625,0,1,0,32.625,18,14.623,14.623,0,0,0,18,3.375Z" transform="translate(1546.625 2685.625)" fill="%2323474c"/></g></svg>') no-repeat center center;
    background-size: contain;
}
.accordion-content {
    display: none;
}

.elementor-counter-title {
    text-align: center;
    line-height: 1.16667em !important;
    font-size: 18px !important;
    margin-bottom: 5px !important;
    font-family: "utile-display",sans-serif;
}

.graphic {
    padding-left: 15px;
    padding-right: 15px;
        background-size: auto 90% !important;
}

.elementor-editor-active .graphic {
    height: 200px;
}

.elementor-widget-counter > .elementor-widget-container {
    display: flex
;
    flex-direction: column;
    justify-content: flex-end;
}

/* END CONTENT */

.desktop-large {
	display:none;
}
@media (min-width: 1680px) {
	.desktop-large {
		display: block;
	}
}

.mobile { display: none; }

@media (max-width: 767.98px){ 
    :root {
        --h1: calc(55px * 0.6);
        --h2: calc(45px * 0.6);
    }
    .mobile { display: block; }
    .mobile.flex { display: flex; }
    .desktop { display: none; }
	
	video#bgvid {
    object-fit: cover;
    object-position: -40vw 10vw;
    width: 100%;
    height: 90vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.elementor-button, .btn.btn-default {
    font-size: 16px;
    line-height: 1.35em;
    color: var(--orange);
    background-color: transparent;
    border: 2px solid var(--orange);
    padding: 7px 20px;
    border-radius: 0;
    position: relative;
    outline: none !important;
    box-shadow: none !important;
}

    #intro {}
    #tagline {
        position: absolute;
        right: 30px;
        top: 30px;
        width: calc(100vw - 60px);
        font-size: 55px;
    }
    #title {
        bottom: 30px;
        left: 30px;
        font-size: 8vw;
        max-width: 100%;
    }
    .elementor > .e-con.e-flex {
        padding-left: 20px;
        padding-right: 20px;
    }
    .elementor-counter-number {
        font-size: 10vw;
    }
    #additions::before {
        height: 250px;
    }
}


@keyframes fadeInDown2 {
    0% {
       opacity: 0;
       transform: translateY(-50px);
    }
    100% {
       opacity: 1;
       transform: translateY(0);
    }
 } 

 .fadeInDown {
    animation-name: fadeInDown2;
}