@charset "UTF-8";
/* CSS Document */

	/*						*/
	/* header 				*/
	/*						*/
	
		header.light .background {
			background-color: var(--light_green);
		}


	/*						*/
	/*	Hero  				*/
	/*						*/
	
		section#hero > figure .hero-background {
			background-image: url("../../images/pages/dormitories/hero/hero-background.webp");
			background-color: var(--light_green);
		}
		section#hero > figure .hero-decor i {
			background-image: url("../../images/pages/dormitories/hero/hero-decor.webp");
		}
		section#hero > figure .hero-image {
			background-image: url("../../images/pages/dormitories/hero/hero-image.webp");
		}


	/*						*/
	/*	Custom styles 		*/
	/*						*/
	
	
		/* Our dormitories */
	
			section#our-dormitory .background {
				padding-block:50px;
			}
			section#our-dormitory h2.stripe { background-image: url(../../images/title/dark_orange.svg); }	
			
			section#our-dormitory .intro-text {}
			section#our-dormitory .intro-text p {
				font-size: 1.5rem;
			}
			section#our-dormitory .services {
    			margin: 25px 0 25px 0;
			}
			@media screen and (min-width:   0px) and (max-width: 699px) { 
				section#our-dormitory .services { margin: 15px 0; }
			}
			section#our-dormitory .services ul {
				width: calc(100% + 20px);
				margin-bottom: 25px;
			}
			@media screen and (min-width:   0px) and (max-width: 699px) { 
				section#our-dormitory .services ul { width: calc(100% + 20px); }
			}
			section#our-dormitory .services ul li {
				display: inline-block;
				position: relative;
				width: calc(100% / 7 - 22px);
				margin-right: 16px;
				aspect-ratio:1/1;
				vertical-align: top;
				border: 1px solid gray;
			}
			@media screen and (min-width:   0px) and (max-width: 699px) { 
				section#our-dormitory .services ul li {
					width: 80px;
					margin-right: 5px;
					margin-bottom: 10px;
				}
			}
			
			section#our-dormitory .services ul li i {
				display: block;
				position: absolute;
				left:  15%;
				right: 15%;
				aspect-ratio:1/1;
				top: 5%;
				background-size: 80%;
				background-position: center; 
				background-repeat: no-repeat;
			}
			section#our-dormitory .services ul li em {
				display: block;
				position: absolute;
				text-align: center;
				width: 100%;
				text-align: center;
				bottom: 5%;
				font-size: 1.25rem;
			}
			
			section#our-dormitory .services ul li[data-label="free wifi"] i { background-image:url(../../images/pages/dormitories/pictos/wifi.svg); }
			section#our-dormitory .services ul li[data-label="bathroom" ] i { background-image:url(../../images/pages/dormitories/pictos/bathroom.svg); }
			section#our-dormitory .services ul li[data-label="laundry"  ] i { background-image:url(../../images/pages/dormitories/pictos/laundry.svg); }
			section#our-dormitory .services ul li[data-label="kitchen"  ] i { background-image:url(../../images/pages/dormitories/pictos/kitchen.svg); }
			section#our-dormitory .services ul li[data-label="garden"   ] i { background-image:url(../../images/pages/dormitories/pictos/garden.svg); }
			section#our-dormitory .services ul li[data-label="sports"   ] i { background-image:url(../../images/pages/dormitories/pictos/sports.svg); }
			section#our-dormitory .services ul li[data-label="storage"  ] i { background-image:url(../../images/pages/dormitories/pictos/storage.svg); }

			section#our-dormitory .services ul li[data-label="free wifi"] em:before { content:"free wifi"; }
			section#our-dormitory .services ul li[data-label="bathroom" ] em:before { content:"bathroom"; }
			section#our-dormitory .services ul li[data-label="laundry"  ] em:before { content:"laundry"; }
			section#our-dormitory .services ul li[data-label="kitchen"  ] em:before { content:"kitchen"; }
			section#our-dormitory .services ul li[data-label="garden"   ] em:before { content:"garden"; }
			section#our-dormitory .services ul li[data-label="sports"   ] em:before { content:"sports"; }
			section#our-dormitory .services ul li[data-label="storage"  ] em:before { content:"storage"; }


			.dormitories {
				margin: 50px 0;
			}
			.dormitories .d-item {
				font-size: 0;
				line-height: 0;
				padding: 0; margin: 0;
				display: flex;
				flex-wrap:nowrap;
				flex-direction: row;
				column-gap: 25px;
				margin-bottom: 50px;
			}
			@media screen and (min-width:   0px) and (max-width: 699px) { 
				.dormitories .d-item {
					flex-direction: column;
					row-gap: 25px;
				}
			}
			.dormitories .d-item > figure { flex: 1; }
			.dormitories .d-item > figcaption { flex: 1; }
			
			.dormitories .d-item figure {
				position: relative;
				width: 100%;
				/* aspect-ratio:1/1; */
				overflow: hidden;
			}
			.dormitories .d-item figure .decor {
				pointer-events: none;
				position: absolute;
				inset:0;
				aspect-ratio:3/2;
			}
			.dormitories .d-item figure .decor i {
				display: block;
				position: absolute;
				z-index: 2;
				height:         100px;
				margin-bottom: -100px;
				aspect-ratio:1/1;
				background-image: url("../../images/pages/dormitories/hero/hero-decor.webp");
				background-position: 0 0;
				background-size: 100% 100%;
				transform-origin: top;
			}
			.dormitories .d-item figure .decor i:first-child { left: 0; top: 0; }
			.dormitories .d-item figure .decor i:last-child  { right: 0; bottom: 0; transform: rotate(180deg); }
			
			.dormitories .d-item figcaption {
				font-size: 1rem;
				line-height: 1.2;
				position: relative;
			}
			.dormitories .d-item figure .scroller {
				position: relative;
				width: auto;
				height: inherit;
				aspect-ratio:3/2;
				overflow: hidden;
				white-space: nowrap;
			}
			.dormitories .d-item figure .scroller span {
				display: inline-block;
				width: 100%;
				aspect-ratio:3/2;
				background-size: cover;
				background-repeat: no-repeat;
			}
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span {
				display: block;
				position: absolute;
				inset:0;
			}
			
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span {
			}
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(2),
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(3),
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(4),
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(5),
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(6),
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(7) {
				left: 10%; 
				opacity: 0;
				transition:left 1s ease, opacity 0.5s ease;
				-webkit-animation: tween 1s forwards;
				   -moz-animation: tween 1s forwards;
				     -o-animation: tween 1s forwards;
				        animation: tween 1s forwards;
			}
			.dormitories .d-item figure[data-kind="silder"][data-behavior="restart"] .scroller span {
				-webkit-animation: none!important;
				   -moz-animation: none!important;
				     -o-animation: none!important;
				        animation: none!important;
			}
			
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span { }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(1) { animation-delay:calc(3s * 1 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(2) { animation-delay:calc(3s * 2 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(3) { animation-delay:calc(3s * 3 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(4) { animation-delay:calc(3s * 4 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(5) { animation-delay:calc(3s * 5 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(6) { animation-delay:calc(3s * 6 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="tween"] .scroller span:nth-child(7) { animation-delay:calc(3s * 7 - 1s); }
			.dormitories .d-item figure[data-kind="silder"][data-behavior="restart"] .scroller span { animation-delay: none!important; }
			
			        @keyframes tween { 0% { left:10%; opacity:0; } 100% { left:0; opacity:1; } }
			     @-o-keyframes tween { 0% { left:10%; opacity:0; } 100% { left:0; opacity:1; } }
			   @-moz-keyframes tween { 0% { left:10%; opacity:0; } 100% { left:0; opacity:1; } }
			@-webkit-keyframes tween { 0% { left:10%; opacity:0; } 100% { left:0; opacity:1; } }
			

						
			#our-dormitory .dormitories h3 {
				font-size: 2.5rem;
				line-height: 1;
				margin-bottom: 10px;
				color: var(--blue);
			}
			#our-dormitory .dormitories p {
				font-size: 1.25rem;
				margin-bottom: 10px;
			}
			#our-dormitory .dormitories .options {
				margin: 25px 0;
			}
			#our-dormitory .dormitories .options ul {
				font-size: 1.25rem;
			}
			#our-dormitory .dormitories .options ul li { display: block; }
			#our-dormitory .dormitories .options ul li i {
				display: block;
				position: relative;
				width: 20px;
				height: 20px;
				margin-bottom: -20px;
				font-size: 20px;
				line-height: 20px;
				color: var(--blue);
				top: -1px;
			}
			#our-dormitory .dormitories .options ul li i:before { content: "\E940"; }
			#our-dormitory .dormitories .options ul li em {
				display: block;
				position: relative;
				margin: 0 0 5px 29px;
				font-size: 1.25rem;
				text-wrap: balance;
			}
		
			#our-dormitory .dormitories h4 {
				font-size: 2rem;
				color: var(--blue);
				margin-bottom: 10px;
			}
			
			#our-dormitory .dormitories .rooms {}
			#our-dormitory .dormitories .rooms ul {}
			#our-dormitory .dormitories .rooms ul li {
				display: inline-block;
				vertical-align: top;
				list-style: none;
				border: 1px solid gray;
				padding: 10px 15px 5px 15px;
				margin-right: 15px;
				min-width: 190px;
				margin-bottom: 15px;
			} 
			#our-dormitory .dormitories .rooms ul li[data-label="double"] {}
			#our-dormitory .dormitories .rooms ul li[data-label="single"] {}
			#our-dormitory .dormitories .rooms ul li p.room-type {
				font-size: 1.2rem;
				font-weight: 600;
				text-transform: uppercase;
			} 
			#our-dormitory .dormitories .rooms ul li p.contract-length {
				font-size: 0.9rem;
				font-weight: 400;
			} 
			
			#our-dormitory .dormitories .rooms ul li p.price {
				font-size: 2.5rem;
			} 
			#our-dormitory .dormitories .rooms ul li p.price .value {
				font-weight: 400;
			} 
			#our-dormitory .dormitories .rooms ul li p.price .value:before { content:"€"; }
			#our-dormitory .dormitories .rooms ul li p.price .suffix {
				font-size:1rem;
			}