@import url("burger-menu.css");
@import url("buttons.css");
@import url("view-transition.css");
@import url("modal.css");

:root {
	--white-color:#fff;
	--black-color:#000;
	--darker-color:rgba(0, 0, 0, .6);
	--verydark-color:#18110D;
	--gold-color:#E3CB9F;
	--goldlight-color:#E3CB9F99;
	--goldlight2-color:#F8E4CD;
	--lightgray-color:#dcdcdc;
	--nav-height:67px;
	--footer-height:60px;
}

::-webkit-scrollbar {
	width: 3px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background-color: var(--verydark-color);
}

::-webkit-scrollbar-thumb {
	background: var(--gold-color);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--gold-color);
}

html {
    scroll-behavior: smooth;
}

body {
	min-height:100dvh;
	font-family: "Lora", sans-serif;
	font-size:16px;
	font-weight:300;
	color:var(--black-color);
}

a,
label {
	color:var(--black-color);
    text-decoration:none;
    transition:all .5s;
}

a:not(.default-btn):hover,
label:hover {
    opacity:.85;
}

a[nohref],
label {
	cursor:pointer;
}

.relative {
    position:relative;
}

.block {
    display:block;
}

.flex {
    display:flex;
}

.flex-col {
    flex-direction:column;
}

.flex-1 {
    flex:1;
}

.flex-1-1 {
    flex:1.1;
}

.flex-2 {
    flex:2;
}

.flex-vert-aligned {
    align-items:center;
}

.flex-hor-aligned {
    justify-content:center;
}

.full-width {
    width:100%;
}

:is(.full-height, #abs-id) {
	height:100%;
}

.medium-text {
	font-weight:500;
}

.bold-text {
	font-weight:700;
}

.fs-12 {
    font-size:12px;
}

.fs-13 {
    font-size:13px;
}

.fs-14 {
    font-size:14px;
}

.fs-15 {
    font-size:15px;
}

.fs-18 {
    font-size:18px;
}

.fs-20 {
    font-size:20px;
}

.fs-24 {
    font-size:24px;
}

.fs-30 {
    font-size:30px;
}

.fs-38 {
    font-size:38px;
}

.fs-45 {
    font-size:45px;
}

.uppercase {
	text-transform: uppercase;
}

.verydark-bg {
	background-color:var(--verydark-color);
}

.gold-text {
	color:var(--gold-color);
}

.goldlight-text {
	color:var(--goldlight-color);
}

.goldlight2-text {
	color:var(--goldlight2-color);
}

.padding-50 {
    padding:50px;
}

.padding-10 {
    padding:10px;
}

.ml-30 {
    margin-left:30px;
}

.mr-30 {
    margin-right:30px;
}

.mr-auto {
	margin-right:auto;
}

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

.object-fit-cover {
    object-fit:cover;
}

.lh-24 {
    line-height:24px;
}

.lh-28 {
    line-height:28px;
}

.lh-32 {
    line-height:32px;
}

.lh-55 {
    line-height:55px;
}

.lh-60 {
    line-height:60px;
}

:is(.remove, #abs-id) {
    display:none;
}

.grid-gap-5 {
	grid-gap: 5px;
}

.grid-gap-10 {
	grid-gap: 10px;
}

.grid-gap-20 {
	grid-gap: 20px;
}

.grid-gap-30 {
	grid-gap: 30px;
}

.grid-gap-100 {
	grid-gap: 100px;
}

.nav {
	height:var(--nav-height);
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:3;
	transition:all .5s;
	@media screen and (max-width:1024px) {
		.logo {
			margin-left:11.5%;
		}
		.container {
			flex:0;
		}
	}
	.nav-inner {
		height: inherit;
		@media screen and (max-width:1280px) {
			.nav-ul {
				grid-gap: 50px;
			}
		}
	}
	a {
		color:var(--gold-color);
	}
}
			
	.nav-ul > li {
		display: flex;
		align-items: center;
		position:relative;
		@media screen and (min-width:1025px) {
			&:after {
				content:"";
				position:absolute;
				bottom:0;
				width:0;
				height:3px;
				background-color:var(--gold-color);
				transition:all .5s;
			}
		}
		&.active,
		&:hover {
			@media screen and (min-width:1025px) {
				&:after {
					width:100%;
				}
			}
			@media screen and (max-width:1024px) {
				opacity:.85;
			}
		}
		a {
			height: 100%;
			display: flex;
			place-items: center;
		}
	}
	
.main,
.main-bg {
	background-size: cover;
	background-position: center;
	@media screen and (max-width:1024px) {
		background-position: center;
	}
}

dialog .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

dialog .dialog-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    border: 0;
    background: #000;
}

dialog .dialog-slider,
dialog .swiper-wrapper,
dialog .swiper-slide {
    height: 100%;
}

dialog button {
    background: transparent;
    border: none;
    box-shadow: none;
}



@media screen and (min-width:1025px) {
	body:not(.landing-page) .main-bg-texture {
		box-shadow: 4px 0 4px 0 rgba(0, 0, 0, .25) inset;
		background-size: cover;
	}
	body:not(.landing-page) .main-bg.hide-on-mobile {
		background-position: center;
		margin-top: 67px;
		margin-bottom: 60px;
	}
	body:not(.landing-page) .main-bg:not(.show-on-mobile):not(.hide-on-mobile) {
		background-attachment: fixed;
		background-size: 50% 100%;
	}
}
@media screen and (min-width:1025px) and (max-width:1280px) {
	body:not(.landing-page) .main-bg:not(.show-on-mobile):not(.hide-on-mobile) {
		background-size: 100%;
	}
}
@media screen and (max-width:1024px) {
	body:not(.landing-page) .main-bg-texture {
        background-size: auto;
        background-attachment: fixed;
		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25) inset;
	}
}
@media screen and (max-width:1024px) {
	.main.show-on-mobile,
	.main-bg.show-on-mobile {
		margin-top:var(--nav-height);
	}
	body:not(.landing-page) .main-bg.show-on-mobile {
		height:50dvh;
	}
}

.main {
	body:not(.landing-page) & {
		@media screen and (max-width:1024px) {
			min-height:100vh;
		}
		@media screen and (min-width:1025px) {
			height:100vh;
		}
		overflow-y: hidden;
	}
	@media screen and (min-width:1025px) {
		.scrollable-content {
			overflow-y:auto;
			padding-top:calc(var(--nav-height) * 1.5);
			padding-bottom:calc(var(--footer-height) * 1.5);
		}
	}
	ul {
		margin-top:20px;
		list-style: disc;
		list-style-position: inside;
	}
	
	p {
		&:not(:last-of-type) {
			margin-bottom:20px;
		}
		strong {
			font-weight:bold;
		}
	}
}

	
.container {
    width:100%;
	max-width:1197px;
	height:inherit;
    margin:auto;
    padding-left: 20px;
    padding-right: 20px;
}
	
	/* dd-menu */
	.has-dd-menu {
		position:relative;
		height: inherit;
		
		> ul {
			position:absolute;
			top:100%;
			z-index: 4;
			opacity:0;
			visibility:hidden;
			display:none;
			transition:all .5s ease-out allow-discrete;
			@media screen and (max-width:1024px) {
				right: 0;
				left: 0;
			}
		}
		
		&:hover > ul {
			opacity:1;
			visibility:visible;
			display:flex !important; /* this is VI */
		}
	}
	
		@starting-style {
			.has-dd-menu:hover > ul {
				opacity:0;
				visibility:hidden;
				display:none;
			}
		}
			
			.has-dd-menu > ul {
				a {
					display:block;
				}
			}
	/**/
	
	.footer {
		@media screen and (min-width:1025px) {
			height:var(--footer-height);
		}
		@media screen and (min-width:1025px) {
			body:not(.landing-page) & {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}
	}
	
	:is(.swiper-button-prev, .swiper-button-next, #abstract-id)	{
		background-image:none;
		background-color:var(--darker-color);
		width: 91px;
		height: 52px;
		@media screen and (max-width:1024px) {
			width: 45px;
			height: 30px;
		}
		transition:background-color .5s;
	}
	:is(.swiper-button-prev:hover, .swiper-button-next:hover, #abstract-id) {
		background-color:var(--black-color);
	}
	:is(.swiper-button-prev, #abstract-id) {
		left:0;
	}
	:is(.swiper-button-next, #abstract-id) {
		right:0;
	}

@media screen and (max-width:1024px) {
	.hide-on-mobile {
		display:none;
	}
	
    :is(.show-on-mobile, #abs-id) {
        display:block;
    }
	
	.flex-col-on-mobile {
		flex-direction: column;
	}
	
	.flex-hor-aligned-on-mobile {
		place-items: center;
	}
	
	.grid-gap-5-on-mobile {
		grid-gap: 5px;
	}
	
	.grid-gap-15-on-mobile {
		grid-gap: 15px;
	}
	
	.grid-gap-20-on-mobile {
		grid-gap: 20px;
	}
	
	.order--1-on-mobile {
		order:-1;
	}
	
	.full-width-on-mobile {
		width:100%;
	}
	
	.max-width-on-mobile {
		max-width:100%;
	}
	
	.fs-24-on-mobile {
		font-size:24px;
	}
	
	.fs-32-on-mobile {
		font-size:32px;
	}
	
	.fs-38-on-mobile {
		font-size:38px;
	}
	
	.lh-35-on-mobile {
		line-height:35px;
	}
	
	.lh-normal-on-mobile {
		line-height:normal;
	}
	
	.center-aligned-on-mobile {
		text-align:center;
	}
		
	.pt-20-on-mobile {
		padding-top:20px;
	}
	
	.pb-20-on-mobile {
		padding-bottom:20px;
	}
	
	.padding-20-on-mobile {
		padding:20px;
	}
	
	.ml-0-on-mobile {
		margin-left:0;
	}
	
	.ml-auto-on-mobile {
		margin-left:auto;
	}
	
	.mr-auto-on-mobile {
		margin-right:auto;
	}
}