:root {
	--inter: "Inter", sans-serif;
	--ebg: "EB Garamond", serif;
}

html {
	background: blue;
	background-image:url(img/cement-texture.jpg);
	background-attachment: fixed;
	color:white;
	background-position-x:center;
}

body {
	margin: auto;
	background-image:url(img/black-boxes-bg.png);
	background-attachment: fixed;
	background-position-y:100px;
	background-size:75%;
	min-height:100vh;
	background-repeat:no-repeat;
	font-family: var(--ebg);
	font-size: 1.25rem;
}
body.events-page {
	background-image:url(img/black-boxes-bg-2.png);
	background-size: 100%;
	background-position-y:50px;
}

header, main{
	padding: 0rem 2.5rem;
}

img {
	width:100%;
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--inter);
}

a {
	font-family: var(--inter);
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	color:blue;
	&:hover {
		color:white;
	}
}

p.register a {
	background:white;
	font-size: 1rem;
}

button {
	font-family: var(--inter);
}

header {
	display:grid;
	max-width:100%;
	grid-template-columns:auto min-content min-content;
	column-gap:2rem;
	align-items: center;
	font-family: var(--inter);
	font-size: 1.25rem;
	margin-top: 2.5rem;
	position:sticky;
	top:2.5rem;
}

nav {
	background:black;
	background-image:url(img/cement-texture.jpg);
	background-blend-mode:multiply;
	color:white;
	display:grid;
	grid-template-columns: 1.25fr 1fr;
	overflow: hidden;
	position:fixed;
	bottom:-425px;
	left:0;
	height:400px;
	width:100%;
	transition:.4s;
	&.show{
		bottom:0;
	}
	img {
		object-fit: cover;
		height:100%;
		width:100%;
		transform:scale(1.5);
	}

	ul.menu {
		text-align: right;
		list-style-type: none;
		margin: 0;
		padding: 0;
		padding-right:2rem;
		align-self: flex-start;

		li {
			margin-top: 1.5rem;
			a {
				color:white;
				&:hover, &.active {
					background:blue;
					color:white;

				}
			}
		}
	}
}

.logo img {
	width:165px;
}

button.nav {
	background:none;
	border:0;
	width: 2.5rem;
	height: 2.5rem;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	span {
		display: block;
		position: absolute;
		height: 4px;
		width: 100%;
		background: white;
		opacity: 1;
		left: 0;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
		&:nth-child(1){
			top: 0px;
		}
		&:nth-child(2) {
			top: 1rem;
		}
		&:nth-child(3) {
			top: 2rem;
		}
	}
}

button.nav.open {
	span {
		&:nth-child(1){
			top: 1rem;
			-webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			-o-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		&:nth-child(2) {
			opacity: 0;
			left: -60px;
		}
		&:nth-child(3) {
			top: 1rem;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			-o-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
	}
}

main {
	max-width: calc(768px - 4rem);
	margin: 2.5rem auto 5rem;
}

main.intro {
	display:grid;
	row-gap: 1rem;
}

a.cta {
	display:block;
	background-image:url(img/btn-bg.png);
	background-repeat: no-repeat;
	height:50px;
	width:190px;
	justify-self: center;
	display:flex;
	align-items: center;
	justify-content: center;
	&:hover {
		background-image:url(img/btn-bg-h.png);
	}
}


/*EVENTS*/
div.dates-tab-container {
	display:flex;
	align-items: center;
	position:sticky;
	top:8.5rem;
	column-gap: .75rem;
}

@keyframes bounce {
	0% {
		transform:translateX(0);
	}
	100% {
		transform:translateX(10px);
	}
}

div.scroll-next {
	/*animation-name: bounce;
	animation-duration:1s;
	animation-iteration-count:infinite;*/
	a {
		color:white;
	}
}

div.scroll-prev {
	transform: rotate(180deg);
	a {
		color:white;
	}
}

ul.dates-tab {
	width:100%;
	margin: 0;
	padding: 0;
	display:flex;
	flex-direction: row;
	overflow: scroll;
	column-gap:0rem;
	list-style-type: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
	li {
		button {
			color:white;
			background: none;
			border:0;
			font-size: 1rem;
			text-transform: uppercase;
			font-weight: bold;
			height:50px;
			width:190px;
			&.active {
				color:blue;
				background-image:url(img/btn-bg.png);

			}

		}
	}
}

main.events {
	min-height:100vh;
}

#oct7pnl {
	display:block;
}

.evt-pnl {
	display:none;
	margin-top: 2rem;
}


.evt-list,.evt-row {
	display:grid;
	column-gap:1.25rem;
	grid-template-columns: max-content auto;
	span {
		display:block;
	}
}

.evt-title {
	font-weight: bold;
}

.evt-ppl {
	font-style: italic;
}

.evt-time p {
	position:sticky;
	top:15rem;
}

.evt-time p.hide {
	opacity: 0;
}

.evt-item img {
	width:90%;
	margin-bottom: .5rem;
}

footer {
	background:white;
	display:block;
	padding:1rem 2rem;
}

ul.supporters {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	column-gap:2rem;
	row-gap:.5rem;
	margin:0;
	padding: 0;
	align-items: center;
	justify-content: space-around;
	img {
		height:2.5rem;
	}
}