/****************************************************************************************************
*** fonts
****************************************************************************************************/

@font-face { font-family: 'Chonburi'; src: url('../fonts/chonburi-v14-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-v33-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-v33-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('../fonts/merriweather-v33-latin-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/***************************************************************************************************
*** vendor override: tiny-slider.js
***************************************************************************************************/

/*** navigation dots ***/
.tns-nav { text-align: center; margin: 10px 0; }
.tns-nav > [aria-controls] { width: 1rem; height: 1rem; padding: 0; margin: 0 5px; border-radius: 50%; background: rgba(255, 255, 255, 1); border: 1px solid rgb(var(--bs-dark-rgb)); }
[class*="bg-primary"] .tns-nav > [aria-controls] { border-color: rgb(255, 255, 255); }
.tns-nav > .tns-nav-active { background: rgba(var(--bs-dark-rgb), 1); }

/****************************************************************************************************
*** system elements
****************************************************************************************************/

a[type=button] { appearance: none; -webkit-appearance: none; } /* prevents link with attribute "type=button" from being displayed as system element */
::selection { background: var(--bs-primary); color: rgb(255, 255, 255); text-shadow: none; }
:active, :focus { outline: none !important; }
:focus { outline: none !important; }

html, body { width: 100%; margin: 0; padding: 0;  scroll-behavior: smooth; overscroll-behavior-y: none; --video-border-radius: 0; --video-border: 0; /* removes border from video player */ }
html { scroll-behavior: smooth; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: var(--bs-primary); scroll-padding-top: 5rem; }
body { position: relative; height: 100%; -ms-word-wrap: break-word; word-wrap: break-word; }

/*** Background ***/
#background { position: fixed; background: #eaf7ee url('/theme/public/assets/images/background.webp'); background-repeat: no-repeat; background-size: cover; z-index: -1; width: 100vw; height: 100vh; margin-top: auto; }

/*** Topbanner ***/
#banner-fader { position: relative; width: 100%; max-width: 100vw; overflow: hidden; line-height: 0; }
#banner-fader .banner-fader__image { position: absolute; top: 0; left: 50%; width: auto; max-width: none; height: auto; transform: translateX(-50%); opacity: 0; transition: opacity 900ms ease; }
#banner-fader .banner-fader__image.is-active { opacity: 1; z-index: 1; }
#banner-fader .banner-fader__image:first-child { position: relative; }
#top-banner { position: absolute; top: 0; z-index: 1; left: 50%; transform: translateX(-50%); }
#top-banner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 400px; background-image: url('/theme/public/assets/images/banner-overlay.png'); background-repeat: no-repeat; z-index: -1; }
#top-logo { position: absolute; top: 0; left: 0; }

/*** Navigation (Desktop) ***/
nav#main-menu { padding: 0; }
nav#main-menu .nav-item .nav-link { font-family: "Merriweather"; font-weight: bold; font-size: 1.2rem; letter-spacing: 1px; padding: 1rem 1.5rem; border-right: 1px solid rgba(var(--bs-dark-rgb), .15); }
nav#main-menu .nav-item.active .nav-link, nav#main-menu .nav-item .nav-link:hover { background-color: rgba(255, 255, 255, 0.5); }