/* @override 
	https://br83vattqi.preview.infomaniak.website/themes/custom/urwlodge/css/lodge-room.css?*
	https://urwerk.com/lodge/themes/custom/urwlodge/css/lodge-room.css?* */

/* @group WELCOME POPUP */

.popup-welcome {
	position: relative;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;

	text-align: center;

	z-index: 100;
	background: var(--vert-anglais) url('img/urw-message-bg_2.jpg') no-repeat center top;
	background-size: cover;

	animation: FadeOutWelcome 1s ease-in-out 5s;
	animation-fill-mode: forwards;
}

@keyframes FadeOutWelcome {
	0% {
		transform: translateY(0);
	}

	99% {
		transform: translateY(-102vh);
	}

	100% {
		transform: translateY(-1000vh);
	}

}



@media (min-aspect-ratio:16/9) {
	#block-welcomepopup {
		background-position: center -20vh;
	}
}

#block-welcomepopup>div,
#block-welcomepopup>div>div,
#block-welcomepopup>div>div>div {
	height: 100%;
}

#block-welcomepopup>div>div>div {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
}

.popup-message {
	margin-top: 45vh;
	max-width: 1180px;
}

.popup-message h2 {
	font-size: ;
}

.popup-message p {
	font-size: 1.2rem;
}

.popup-header {
	max-width: 400px;
	margin: 6vh auto 0;
}

.popup-footer {
	margin-top: auto;
	margin-bottom: 4vh;
	text-align: center;
}


@media (max-width:600px) {
	#block-welcomepopup {
		background-position: center -10%;
	}

	.popup-message h2 {
		font-size: 2rem;
	}

	.popup-message p {
		font-size: 1rem;
	}
}

/* @end */

.path-my-collection #main {
	/*padding-top: 80px;*/
}

.path-my-collection .site-footer {
	display: none;
}

/* @group LODGE VOLUME */

#lodge-room-bg {
	/* ceiling */
	background-color: #DDD;
	/*background: radial-gradient(circle, rgba(223,223,223,1) 37%, rgba(214,214,214,1) 100%);*/
	background: radial-gradient(circle, #BBB 37%, #9c9c9c 100%);
	position: relative;
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	perspective: 7000px;
	transform: translate3d(0, 0, -1000px) scale(1.1);
}

.room {
	position: absolute;
	/*padding-top: 80px;*/
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	margin: -50vh 0 0 -50vw;
	pointer-events: none;
	opacity: 0;
	transform-style: preserve-3d;
}

.room--current {
	pointer-events: auto;
	opacity: 1;
}

.room__side {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	transform-style: preserve-3d;
}

.room__side--left,
.room__side--right {
	width: 4000px;
	/* depth */
	height: 100vh;
	background: #dbdbdb;
}

.room__side--back {
	width: 100vw;
	height: 100vh;
	background: #AAA;
	/*background: radial-gradient(circle, rgba(223,223,223,1) 37%, rgba(214,214,214,1) 100%);*/
	background: radial-gradient(circle, #C0C0C0 37%, #BBB 100%);
	box-shadow: 0 0 100px 0 rgba(50, 50, 50, .1);
	transform: translate3d(0, 0, -4000px) rotate3d(1, 0, 0, 0.1deg) rotate3d(1, 0, 0, 0deg);
	/* Rotation due to rendering bug in Chrome when loader slides up (images seem cut off) */
}

.room__side--right {
	right: 0;
	justify-content: flex-end;
	transform: rotate3d(0, 1, 0, -90.03deg);
	transform-origin: 100% 50%;
	/*background: linear-gradient(-35deg, rgba(217,217,217,1) 37%, rgba(204,204,204,1) 100%);*/
	background: radial-gradient(circle, #BCBCBC 37%, #B0B0B0 100%);
}

.room__side--left {
	justify-content: flex-start;
	transform: rotate3d(0, 1, 0, 90deg);
	transform-origin: 0 50%;
	/*background: linear-gradient(35deg, rgba(217,217,217,1) 37%, rgba(204,204,204,1) 100%);*/
	background: radial-gradient(circle, #BCBCBC 37%, #B0B0B0 100%);
}

.room__side--bottom {
	width: 100vw;
	/* depth */
	height: 4000px;
	background: #d0d0d0;
	background: rgb(213, 213, 211);
	background: radial-gradient(circle, #BBB 20%, #AAA 90%);
	transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -4000px, 0);
	transform-origin: 50% 0%;
	box-shadow: inset 0px 3px 300px rgba(190, 190, 190, .5);
}

.room__side--bottom {
	top: 100%;
}

/* @end */

#my-collection-title {
	position: absolute;
	right: 10%;
	top: 20vh;
	text-align: right;
	z-index: 99;
	font-family: mostinbold;
	color: #FFF;
	font-size: 4rem;
}

.view-content {
	position: relative;
	z-index: 2;
}

.view-my-watches {}

.view-empty {
	max-width: 700px;
	margin-left: auto;
	text-align: right;
	padding-top: 30vh;
	margin-right: 10%;
}

.my-collection-interface {
	position: absolute;
	z-index: 3;
	top: 40vh;
	right: 10%;
	width: 33%;
	overflow: visible;
	/*border: 1px solid #333;*/
}

.my-collection-interface {
	text-align: right;
}

.my-collection-interface .btn-ghost {
	color: #FFF;
}

/* @group SPECS */

.watch-specs {
	position: absolute;
	z-index: 210;
	left: 30%;
	bottom: 7vh;
	width: 65%;
	transform: translate3d(0, 0, 60rem);
}

.watch-specs h4,
.watch-specs {
	font-size: 13px !important;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.watch-specs>* {
	margin-right: 1.5rem;
	padding-right: 1.5rem;
	border-right: 2px solid #333;
}

.watch-specs .spec-value {}

.watch-specs>*:last-child {
	border-right: 0;
}

.watch-specs::before {
	content: '';
	display: block;
	width: 13%;
	height: 10vh;
	margin-top: calc(-5vh - .35rem);
	margin-right: 1rem;
	background: transparent url('img/mark.svg') no-repeat left top;
}

/* @end */

/* @group PAGINATION */

.ur-pagination {
	position: static;
	top: 2rem;
	left: auto !important;
	right: 0;
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.ur-pagination .swiper-pagination-bullet {
	position: static;
	opacity: .5;
	width: 1rem;
	height: 2rem;
	border-radius: 0;
	display: block;
	background: none;
	border-top: 2px solid #FFF;
	margin-bottom: .0 !important;
	transition: all .15s ease-in-out 0s;
}

.ur-pagination .swiper-pagination-bullet h4 {
	transition: all .15s ease-in-out 0s;
	position: absolute;
	right: 1.5rem;
	margin-top: -.65em;
	text-indent: -1.5rem;
	text-align: right;
	white-space: nowrap;
	font-size: 12px;
	letter-spacing: .1em;
	color: #FFF;
}

.ur-pagination .swiper-pagination-bullet:hover {
	width: 1.8rem;
}

.ur-pagination .swiper-pagination-bullet:hover h4 {
	padding-right: 1rem;
}

.ur-pagination .swiper-pagination-bullet-active {
	width: 9rem !important;
	border-top: 2px solid var(--vert-anglais);
	opacity: 1;
}

.ur-pagination .swiper-pagination-bullet-active h4 {
	font-size: 3.5rem;
	padding-right: 0 !important;
	right: 10rem;
	font-family: 'mostinoutline';
	color: var(--vert-anglais);
	letter-spacing: 0;
}

/* @end */

/* @group WATCHES */

.watch-item {
	width: 100%;
	height: 100vh;
	padding-top: 5rem;
}

.watch-item img {
	left: 20vw;
	max-width: 18vw;
	max-height: 18vw;
	object-fit: contain;
	position: absolute;
	transition:
		/*transform .5s linear,*/
		opacity .25s linear;
}


/* Animation elts swiper */
/* Pas mal de travail répétitif pour animer les éléments en fonction de leur nth child */

.watch-item img {
	/*transform: translateX(0) translateY(25vh) translateZ(10vh);*/
}

.watch-item.swiper-slide-active img {
	/*transform: translate3d(0,0,0);*/
	opacity: 1;
}

/* off viewport */

.watch-item>img:nth-of-type(4) {
	left: 20%;
	top: 50vh;
	transition-duration: .8s;
}

.watch-item>img:nth-of-type(2) {
	left: 40%;
	top: 15vh;
	transition-duration: .9s;
}

.watch-item>img:nth-of-type(3) {
	left: 30%;
	top: 45vh;
	transition-duration: 1s;
}

.watch-item>img:nth-of-type(1) {
	left: 10%;
	top: 30vh;
	transition-duration: 1.1s;
}

.watch-item>img:nth-of-type(5) {
	left: 10%;
	top: 10vh;
	transition-duration: 1.2s;
}

/* Soldat */

.watch-item .w-soldier,
.watch-item .w-soldier * {
	pointer-events: none;
}

.watch-item .w-soldier img {
	position: relative;
	width: auto;
	max-height: 60vh;
	z-index: 200;
	top: 20vh;
	max-width: none;
	opacity: 1;
	transform: translateZ(50rem);
	transition-delay: 0;
}

/* in viewport */

.watch-item.swiper-slide-active>img:nth-of-type(4) {
	left: 10%;
	top: 50vh;
}

.watch-item.swiper-slide-active>img:nth-of-type(2) {
	left: 33%;
	top: 15vh;
}

.watch-item.swiper-slide-active>img:nth-of-type(3) {
	left: 42%;
	top: 45vh;
}

.watch-item.swiper-slide-active>img:nth-of-type(1) {
	left: 7%;
	top: 30vh;
}

.watch-item.swiper-slide-active>img:nth-of-type(5) {
	left: 15%;
	top: 10vh;
}

/* > que 5e */

.watch-item.swiper-slide-active>img:nth-of-type(n+6) {
	opacity: 0;
	display: none;
}

/* Soldat */

.watch-item.swiper-slide-active .w-soldier img {
	opacity: 1;
	transform: translateZ(50rem);
}

/* @end */

.path-my-watches .site-footer {
	display: none;
}

@media (max-width:576px) {

	#my-collection-title {
		font-size: 1.5rem;
		position: ;
		right: auto;
		left: 1rem;
		top: 3.5rem;
	}

	.my-collection-interface {
		top: 7rem;
		left: 1rem;
	}

	.my-collection-interface .view-footer {
		position: fixed;
		bottom: 1rem;
		left: 1rem;
		right: 1rem;
		width: auto;
		text-align: center;
	}

	.my-collection-interface .view-footer .btn {
		display: inline-block;
		padding: .75rem 1.5rem;
	}

	/* @group PAGINATION SM */

	.ur-pagination {
		flex-direction: row;
		align-items: flex-start;
	}

	.ur-pagination .swiper-pagination-bullet {
		border-top: 0;
		width: 5px;
		border-bottom: 2px solid #FFF;
	}

	.ur-pagination .swiper-pagination-bullet h4 {
		display: none;
	}

	.ur-pagination .swiper-pagination-bullet-active h4 {
		display: block !important;
		position: absolute !important;
		left: 0 !important;
	}

	.ur-pagination .swiper-pagination-bullet:hover {
		width: 5px;
	}

	.ur-pagination .swiper-pagination-bullet-active {
		width: 1rem !important;
		border-top: 0;
		border-bottom: 2px solid var(--vert-anglais);
	}

	.ur-pagination .swiper-pagination-bullet-active h4 {
		font-size: 2.5rem;
		padding-right: 0 !important;
		right: 0;
		font-family: 'mostinoutline';
		color: var(--vert-anglais);
		letter-spacing: 0;
		text-indent: 0;
		text-align: left;
	}

	.ur-pagination .swiper-pagination-bullet:hover h4 {
		position: static;
		text-align: left;
		padding: 0;
	}

	/* @end */

	/* @group WATCHES SM */

	.watch-item img {
		left: 20vw;
		max-width: 33vw;
		max-height: 33vw;
		object-fit: contain;
		position: absolute;
	}

	/* off viewport */


	.watch-item>img:nth-of-type(1) {
		left: 15%;
		top: 30vh;
		transition-duration: 1.1s;
	}

	.watch-item>img:nth-of-type(2) {
		left: 70%;
		top: 20vh;
		transition-duration: .9s;
	}

	.watch-item>img:nth-of-type(3) {
		left: 76%;
		top: 30vh;
		transition-duration: 1s;
	}

	/*
		.watch-item > img:nth-of-type(4) {
			left: 20%;
			top: 50vh;
			transition-duration: .8s;
		}
		
		
		.watch-item > img:nth-of-type(5) {
			left: 10%;
			top: 10vh;
			transition-duration: 1.2s;
		}*/

	/* Soldat */

	.watch-item .w-soldier,
	.watch-item .w-soldier * {
		pointer-events: none;
	}

	.watch-item .w-soldier img {
		position: relative;
		width: auto;
		max-height: 40vh;
		z-index: 200;
		top: 20vh;
		max-width: none;
		transform: translateZ(50rem);
		transition-delay: 0;
	}

	/* in viewport */

	.watch-item.swiper-slide-active>img:nth-of-type(1) {
		left: 10%;
		top: 30vh;
	}

	.watch-item.swiper-slide-active>img:nth-of-type(2) {
		left: 63%;
		top: 20vh;
	}

	.watch-item.swiper-slide-active>img:nth-of-type(3) {
		left: 66%;
		top: 50vh;
	}


	/*.watch-item.swiper-slide-active > img:nth-of-type(4) {
			left: 10%;
			top: 50vh;
		}
		.watch-item.swiper-slide-active > img:nth-of-type(5) {
			left: 15%;
			top: 10vh;
		}*/

	/* > que 5e */

	.watch-item.swiper-slide>img:nth-of-type(n+4) {
		opacity: 0;
		display: none;
	}

	/* Soldat */

	.watch-item.swiper-slide-active .w-soldier img {
		opacity: 1;
		transform: translateZ(50rem);
	}

	/* @end */

	/* @group SPECS SM */

	.watch-specs {
		height: auto;
		bottom: 5rem;
		width: auto;
		display: flex;
		flex-flow: row wrap;
		left: 1rem;
		right: 1rem;

	}

	.watch-specs::before {
		display: none;
	}

	.watch-specs>div {
		max-width: 50%;
		flex: 1 1 50%;
		margin: 0 0 0rem 0;
		padding: 0 1rem 1rem;
		border: 0;
		font-size: 12px;
	}

	.watch-specs>div h4 {
		font-size: 12px !important;
	}

	.watch-specs>div:nth-child(odd) {
		border-right: 1px solid var(--vert-anglais);

	}

	/* @end */
}