*,
*::after,
*::before {
	box-sizing: border-box;
}

:root {
	font-size: 15px;
}

body {
  width : 100%;
  height : 100%;
	margin: 0;
	--color-text: #aaa;
	--color-bg: #fff;
	--color-link: #ddd;
	--color-link-hover: #fff;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

main{
	border: 3px solid r_ed;
	position: relative;
}

.cover{
	position: absolute;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	mix-blend-mode: multiply;
	opacity: .4;
}

h1{
	position: absolute;
	top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	border: 3px solid r_ed;
}
h1 img{
	width: 10vw;
	
}
ul,
li {
	list-style: none;
	padding: 0;
	margin: 0;
}

.nav {
	position: absolute;
	top: 2rem;
	z-index: 10;
	border: 3px solid r_ed;
}

.nav--left {
	left: 1rem;
}

.nav--right {
	right: 1rem;
}

.nav ul {
	display: flex;
	align-items: center;
	height: 1rem;

}

.nav li {
	display: block;
	margin: 0 1rem;
	padding: 0;
	font-size: calc(0.6rem + 0.55vw);
	font-family: "helvetica neue", helvetica, sans-serif;
}

.nav a {
	display: inline-block;
	opacity: .7;
	color: #fff !important;
}

.nav a span {
	position: relative;
}

.nav a span:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.35rem;
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.25);
	transition: transform 0.75s ease;
	transform-origin: right;
	transform: scaleX(0);
}

.nav a:hover span:before,
.nav a.is-active span:before {
	transform: scaleX(1);
	transform-origin: left;
}




  
.vert-text {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 15rem;
	display: flex;
	align-items: center;
	z-index: 10;
}
.vert-text span {
	display: block;
	color: #fff;
	text-transform: uppercase;
	line-height: 1.1;
	transform: rotate(-90deg) translateY(15rem);
	transform-origin: bottom left;
	font-size: 1.85rem;
	font-weight: 400;
	filter: drop-shadow(-7px 0px 5px rgba(0,0,0,0.3));
}


/****/

.content {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: calc(100vh - 13rem);
	position: relative;
	justify-content: flex-start;
	align-items: center;
}

@media screen and (min-width: 53em) {
	.content {
		height: 100vh;
		justify-content: center;
	}
}

.rgbKineticSlider {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

canvas {
    position: absolute;
    display : block;
    top:0;
    left : 0;
}




@media all and (max-width: 750px) {


	.cover{
		position: absolute;
		top: 0;left: 0;
		width: 100%;
		height: 100%;
		background-color: #333;
		mix-blend-mode: multiply;
		opacity: .2;
	}
	
	h1{
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		border: 3px solid r_ed;
	}
	h1 img{
		width: 20vw;
		
	}
	ul,
	li {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	
	nav {
		position: fixed;
		top: 1rem;
		z-index: 1000;
		border: 3px solid r_ed;
		display: none;
	}
	
	.nav--left {
		left: 1rem;
	}
	
	.nav--right {
		right: 1rem;
	}
	
	.nav ul {
		display: flex;
		align-items: center;
		height: 1rem;
	
	}
	
	.nav li {
		display: block;
		margin: 0 1rem;
		padding: 0;
		font-size: calc(0.6rem + 0.55vw);
		font-family: "helvetica neue", helvetica, sans-serif;
	}
	
	.nav a {
		display: inline-block;
		opacity: .7;
		color: #fff !important;
	}
	
	.nav a span {
		position: relative;
	}
	
	.nav a span:before {
		content: "";
		position: absolute;
		left: 0;
		bottom: -0.35rem;
		width: 100%;
		height: 1px;
		background-color: rgba(255, 255, 255, 0.25);
		transition: transform 0.75s ease;
		transform-origin: right;
		transform: scaleX(0);
	}
	
	.nav a:hover span:before,
	.nav a.is-active span:before {
		transform: scaleX(1);
		transform-origin: left;
	}
	
	
	
	
	  
	.vert-text {
		position: fixed;
		bottom: .5em;
		right: .5em;
		width: 15rem;
		display: flex;
		align-items: center;
		z-index: 10;
	}
	.vert-text span {
		display: block;
		color: #fff;
		text-transform: uppercase;
		line-height: 1.1;
		transform: rotate(-90deg) translateY(15rem);
		transform-origin: bottom left;
		font-size: 1.3rem;
		font-weight: 400;
		filter: drop-shadow(-7px 0px 5px rgba(0,0,0,0.3));
	}
	
	
	/****/
	
	.content {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: calc(100vh );
		position: relative;
		justify-content: flex-start;
		align-items: center;
	}
	
	@media screen and (min-width: 53em) {
		.content {
			height: 100vh;
			justify-content: center;
		}
	}
	
	.rgbKineticSlider {
		display: block;
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	
	canvas {
		position: absolute;
		display : block;
		top:0;
		left : 0;
	}
	
	main{
		border: 3px solid r_ed;
		position: relative;
	}
	
}




/****/


.ticker{
	background: rgb(144,176,255);
	background: linear-gradient(90deg, rgba(144,176,255,1) 0%, rgba(50,166,196,1) 68%);
}
/***/

.loop {
    padding-top: 30px;
    padding-bottom: 30px;
    overflow: hidden;
	border: 3px solid r_ed;
}
.loop__box {
    display: flex;
    width: 150vw;
}
.loop__box img {
    min-width: 100vw;
	border: 3px solid b_lue;
}
.loop__box img:first-child {
    animation: loop 24s -12s linear infinite;
}
.loop__box img:last-child {
    animation: loop2 24s linear infinite;
}

@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}

/************/

.next_eventbox{
	border: 3px solid r_ed;
	color: #333;
	font-size: 150%;
	font-weight: 900;
	text-align: center;
}
.next_eventbox .tit{
	font-size: 190%;
	font-weight: 900;
	line-height: 1;
}
.next_eventbox .tit span{
	font-size: 35%;
	opacity: .7;
	line-height: 0.5;
}

.next_eventbox .imgbox{
	width: 70vw;
	max-width: 600px;
	border: 3px solid r_ed;
	margin: 0 auto;
	position: relative;
}
.next_eventbox .imgbox img{
	width: 100%;
}


.next_eventbox .imgbox .sum_stamp{
	width: 60%;
	position: absolute;
	top: -50px;
	right: -80px;
	opacity: .8;
	mix-blend-mode: multiply;
}


.next_eventbox .databox{
	border-top: 2px solid #333;
	width: 600px;
	margin: 60px auto 0;
	padding: 45px 0;
	font-size: 60%;
	text-align: left;
	/*background-color: rgba(255, 255, 255, 0.6);
	filter: drop-shadow(0px 10px 7px rgba(0,0,0,0.05));*/
}
.next_eventbox .databox span{
	font-size: 70%;
	opacity: .8;
}
.next_eventbox .databox .tit2{
	font-size: 105%;
	font-weight: 600;
}
.next_eventbox .databox .opening{
	font-size: 85%;
	opacity: .9;
	border-radius: 6px;
	padding: 1em;
	background-color: #088eb0;
	color: #fff;
}

a{
	text-decoration: underline !important;
	color: #d31866 !important;
}


.next_eventbox .txtbox{
	width: 600px;
	margin: 0px auto 0;
	padding: 25px 0;
	font-size: 60%;
	text-align: left;
}


.next_eventbox .append{
	font-size: 90%;
	text-align: left;
	opacity: 0.8;
	border-top: 1px dashed #333;
	margin-top: 10px;
	padding-top: 20px;
}
.next_eventbox strong{
	font-weight: 900;
}


.btn_entry{
	background-color: #ffb406;
	width: 400px;
	margin: 60px auto 0;
	border-radius: 11px; 
	border: 2px solid #df923b;
	padding: 1em .2em;
	color: #fff;
	filter: drop-shadow(0px 10px 7px rgba(0,0,0,0.15));
	transition: .5s;
}

.btn_entry:hover{
	background-color: #ffd600;
	filter: drop-shadow(0px 10px 7px rgba(0,0,0,0.08));
}



/****/

.rotatepin{
	width: 50px;
	margin: 0px auto 0;
	position: relative;
	top: 88px;
}
@keyframes rotatepin {
	from {
	  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	to {
	  transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
	}
  }
  
  .rotatepin {
	animation: rotatepin 12s infinite linear;
  }


.access{
	text-align: center;
	border-top: 12px solid #f1f919;
	width: 80%;
	margin: 100px auto 0;
	padding-top: 70px;
}
.access span{
	font-size: 70%;
}

.access h3{
	font-size: 170%;
}








@media all and (max-width: 750px) {


	.ticker{
		background: rgb(144,176,255);
		background: linear-gradient(90deg, rgba(144,176,255,1) 0%, rgba(50,166,196,1) 68%);
	}
	/***/
	
	.loop {
		padding-top: 30px;
		padding-bottom: 30px;
		overflow: hidden;
		border: 3px solid r_ed;
	}
	.loop__box {
		display: flex;
		width: 1000px;
	}
	.loop__box img {
		min-width: 150vw;
		border: 3px solid b_lue;
	}
	.loop__box img:first-child {
		animation: loop 24s -12s linear infinite;
	}
	.loop__box img:last-child {
		animation: loop2 24s linear infinite;
	}
	
	@keyframes loop {
		0% {
			transform: translateX(100%);
		}
		to {
			transform: translateX(-100%);
		}
	}
	@keyframes loop2 {
		0% {
			transform: translateX(0);
		}
		to {
			transform: translateX(-200%);
		}
	}
	
	/************/

	.next_eventbox{
		border: 3px solid r_ed;
		color: #333;
		font-size: 150%;
		font-weight: 900;
		text-align: center;
	}
	.next_eventbox .tit{
		font-size: 190%;
		font-weight: 900;
		line-height: 1;
	}
	.next_eventbox .tit span{
		font-size: 35%;
		opacity: .7;
		line-height: 0.5;
	}
	
	.next_eventbox .imgbox{
		width: 70vw;
		max-width: 600px;
		border: 3px solid r_ed;
		margin: 0 auto;
		position: relative;
	}
	.next_eventbox .imgbox img{
		width: 100%;
	}
	
	
	.next_eventbox .imgbox .sum_stamp{
		width: 60%;
		position: absolute;
		top: -50px;
		right: -80px;
		opacity: .8;
		mix-blend-mode: multiply;
	}
	
	
	.next_eventbox .databox{
		border-top: 2px solid #333;
		width: 84vw;
		margin: 60px auto 0;
		padding: 45px 0;
		font-size: 60%;
		text-align: left;
		/*background-color: rgba(255, 255, 255, 0.6);
		filter: drop-shadow(0px 10px 7px rgba(0,0,0,0.05));*/
	}
	.next_eventbox .databox span{
		font-size: 70%;
		opacity: .8;
	}
	.next_eventbox .databox .tit2{
		font-size: 105%;
		font-weight: 600;
	}
	.next_eventbox .databox .opening{
		font-size: 85%;
		opacity: .9;
		border-radius: 6px;
		padding: 1em;
		background-color: #088eb0;
		color: #fff;
	}
	
	a{
		text-decoration: underline !important;
		color: #d31866 !important;
	}
	
	
	.next_eventbox .txtbox{
		width: 84vw;
		margin: 0px auto 0;
		padding: 25px 0;
		font-size: 60%;
		text-align: left;
	}
	
	
	.next_eventbox .append{
		font-size: 90%;
		text-align: left;
		opacity: 0.8;
		border-top: 1px dashed #333;
		margin-top: 10px;
		padding-top: 20px;
	}
	.next_eventbox strong{
		font-weight: 900;
	}

	.btn_entry{
		background-color: #ffb406;
		width: 80vw;
		margin: 60px auto 0;
		border-radius: 11px; 
		border: 2px solid #df923b;
		padding: 1em .2em;
		color: #fff;
		filter: drop-shadow(0px 10px 7px rgba(0,0,0,0.15));
		transition: .5s;
	}
	
	.btn_entry:hover{
		background-color: #ffd600;
		filter: drop-shadow(0px 10px 7px rgba(0,0,0,0.08));
	}
	
	
	
	/****/
	
	
	
	.access{
		text-align: center;
		border-top: 2px solid #555;
		width: 80%;
		margin: 100px auto 0;
		padding-top: 70px;
	}
	
	iframe{
		width: 80vw;
		margin: 0 auto;
	}
	
	
	
}