/************************************* BASIC BLOCKS *************************************/

body {
	font-family: var(--font_paragraph);
	color: var(--color_dark_green);
	font-weight: 400;
	font-size: 20px;
	text-align: center;
	margin: 0;
}

@media only screen and (max-width: 950px) {
	body {
		font-size: 17px;
	}
}

#scrollable_page {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden auto;
	scroll-behavior: smooth;
}

#content_wrapper {
	background-color: var(--color_vanilla); 
}

#centered {
	position: fixed;
	top: 50%;
	left: 50%;
	height: 600px;
	width: 340px;
	margin-top: -300px;
	margin-left: -170px;
}

iframe {
	width: 100%;
	margin: 20px 0;
	border: none;
}



/************************************* ELEMENTS *************************************/

h1 {
	color: var(--color_brick);
	font-family: var(--font_title);
	text-transform: uppercase;
	font-size: 40px;
	margin: 0;
}

@media only screen and (max-width: 950px) {
	h1 {
		font-size: 30px;
	}
}

p {
	line-height: 40px;
	margin: 8px 0 0 0;
}

@media only screen and (max-width: 950px) {
	p {
		line-height: 32px;
		margin: 6px 0 0 0;
	}
}

button, .button {
	background-color: var(--color_brick);
	text-transform: uppercase;
	font-weight: 700;
	color: var(--color_vanilla);
	padding: 20px 90px;
	border-radius: 20px;
	font-size: smaller;
	border: none;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
}

.button {
	padding-bottom: 17px;
}

button:hover, .button:hover {
	opacity: 0.8;
}

button img, .button img {
	width: 20px;
	margin: -4px;
}

@media only screen and (max-width: 950px) {
	button, .button {
		padding: 20px 40px;
	}

	.button {
		padding-bottom: 17px;
	}
}



/************************************* HERO SCREEN *************************************/

#hero_pic {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: black;
}

#hero_pic_shade {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(0, 0, 0, 0.30) 20%, rgba(0, 0, 0, 0.12) 100%);
}

#hero_pic img {
	width: 100%; height: 100%; object-fit: cover;
	transition: 1s;
	position: absolute;
	left: 0;
}

#hero_text {
	/*text-shadow: 0 0 15px rgb(0, 0, 0);*/
	text-shadow: 5px 5px 30px #000000;
	/*text-align: left;*/
	padding: calc(50vh - 176px/2) 100px 0 100px; /* 100px is the height of the hero_text, 315px is the height of the navbar */
	height: 100vh; /* calc(100vh - 315px); */
	box-sizing: border-box;
}

#hero_text h1 {
	color: white;
}

#hero_text h3 {
	font-weight: 400;
	color: white;
	font-size: 37px;
	display: block;
	margin-top: 20px;
}

@media only screen and (max-width: 950px) {
	#hero_text {
		padding: calc(50vh - 170px/2) 40px 0 40px; /* 120px is the height of the hero_text, 315px is the height of the navbar */
	}

	#hero_text h3 {
		font-size: 28px;
		margin-top: 23px;
	}
}

#scroll_icon {
	cursor: pointer;
	width: 33px;
	position: absolute;
	bottom: 40px;
	left: calc(50vw - 15px);

	animation-name: scroll_icon;
	animation-timing-function: ease;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

@keyframes scroll_icon {
	0%   { bottom: 40px; }
	75%  { bottom: 40px; }
	83%  { bottom: 15px; }
	100% { bottom: 40px; }
}



/************************************* LES SENS DU RANDONNEUR *************************************/

#sens_voyageur {
	padding: 70px 60px 10px 60px;
	width: fit-content;
	display: flex;
	align-items: center;
	margin: 0 auto;
}

#sens_voyageur_img {
	position: relative;
	width: 570px;
	aspect-ratio: 1;
}

#sens_voyageur_img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#sens_voyageur_text {
	width: 580px;
	padding-right: 70px;
}

@media only screen and (max-width: 1200px) {
	#sens_voyageur {
		padding: 0;
		width: 100%;
		display: block;
	}

	#sens_voyageur_img {
		width: 450px;
		margin: 40px auto 0 auto;
	}

	#sens_voyageur_text {
		width: auto;
		padding-right: 0;
		text-align: center;
		padding: 60px 7vw 0 7vw;
	}
}

@media only screen and (max-width: 500px) {
	#sens_voyageur_img {
		width: 95%;
		margin: 30px auto 0 auto;
	}

	#sens_voyageur_text {
		padding-top: 60px;
	}
}



/************************************* PRÊT POUR L'AVENTURE ? *************************************/
/* the carousel is also used by the "TEMOIGNAGES" block  */
/* copy/pasted for "MORE HIKE PICS" in randos.css */

#instants_captures {
	padding: 60px;
	margin: 0 auto;
}

#instants_captures h1 {
	color: var(--color_blue);
}

#instants_captures .button {
	background-color: var(--color_brick);
	font-size: large;
}

.carousel {
	margin: 20px -60px;
	overflow-y: scroll;
	white-space: nowrap;
	padding: 0 60px;
	font-size: 0; /* to remove the whitespaces */
}

/* hide scrollbar for Chrome, Safari and Opera */
.carousel::-webkit-scrollbar {
    display: none;
}

/* hide scrollbar for IE, Edge and Firefox */
.carousel {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  scroll-behavior: smooth;
}

.carousel_pic {
	position: relative;
	display: inline-block;
	border-radius: 20px;
	margin-right: 20px;
	width: 350px;
	aspect-ratio: 7/10;
	background-size: cover;
	background-position: center;
}

.carousel_pic:last-of-type {
	margin-right: 60px;
}

#instants_captures .carousel_pic_overlay {
  padding: 90px 20px 16px 20px;
  border-radius: inherit;
}

#instants_captures .carousel_pic_overlay {
  padding: 55px 13px 13px 13px;
  border-radius: inherit;
  text-align: center;
  font-size: 17px;
}

@media only screen and (max-width: 500px) {
	#instants_captures {
		padding: 70px 40px 40px 40px;
	}

	#instants_captures .button {
		position: absolute;
		left: 40px;
		right: 40px;
	}

	.carousel {
		margin: 20px -40px;
		padding: 0 40px;

		/* this is to snap the pictures on mobile */
		scroll-snap-type: x mandatory;
		scroll-padding-left: 40px;
	}

	.carousel_pic {
		width: 100%;
		margin-right: 20px;

		/* this is to snap the pictures on mobile */
		scroll-snap-align: start;
	}

	.carousel_pic:last-of-type {
		margin-right: 40px;
	}
}



/************************************* BIO *************************************/

#bio {
	padding: 80px 60px 60px 60px;
	width: fit-content;
	display: flex;
	align-items: center;
	margin: 0 auto;
}

#bio > img {
	width: 300px;
	border-radius: 200px;
	z-index: 90;
}

#bio div {
	width: 650px;
	padding: 40px 60px 40px 210px;
	text-align: left;
	background-color: #DBE5E8;
	color: var(--color_blue);
	border-radius: 25px;
	margin-left: -150px;
}

#bio h1 {
	color: var(--color_blue);
}

@media only screen and (max-width: 1250px) {
	#bio {
		padding: 20px 0 0px 0;
		width: 100%;
		display: block;
	}

	#bio > img {
		width: 200px;
		margin-top: 40px;
	}

	#bio div {
		width: 100%;
		padding: 125px 7vw 20px 7vw;
		text-align: center;
		border-radius: 0;
		margin-left: 0;
		margin-top: -100px;
		margin-bottom: 40px;
		box-sizing: border-box;
	}
}



/************************************* TEMOIGNAGES *************************************/
/* copy/pasted for "MORE HIKE PICS" in randos.css */

#temoignages {
	padding: 0;
	margin: 10px auto;
}

#temoignages h1 {
	color: var(--color_dark_green);
	margin-bottom: 20px;
}

#temoignages .carousel {
	padding: 0 calc((100% - 1070px)/2);
	margin: 0;

	/* this is to snap the pictures on mobile */
	scroll-snap-type: x mandatory;	scroll-padding-left: calc((100% - 1070px)/2);
}

#temoignages .carousel_pic {
	width: 1070px;
	border-radius: 25px;
	aspect-ratio: 5/2;
	margin-right: 100px;

	/* this is to snap the pictures on mobile */
	scroll-snap-align: start;
}

#temoignages .carousel_pic:last-of-type {
	margin-right: calc((100vw - 1070px)/2);
}

.carousel_pic_overlay {
	border-radius: 25px;
	color: white;
	text-align: left;
	padding: 100px 20px 17px 20px;
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.50) 50%);
	position: absolute;
	bottom: 0;
	width: -webkit-fill-available;
	width: -moz-available;
	font-size: 20px;
	white-space: initial;
}

.carousel_pic_overlay p:first-of-type {
	font-size: 35px;
	line-height: 50px;
	font-family: var(--font_title);
	text-transform: uppercase;
}

.arrow {
	width: 50px;
	position: absolute;
	transform: translateY(190px);
	cursor: pointer;
	opacity: .4;
}

.arrow_left {
	left: calc((100% - 1210px)/2);
}

.arrow_right {
	right: calc((100% - 1210px)/2);
}

@media only screen and (max-width: 1250px) {
	#temoignages {
		margin: 65px auto 10px auto;
	}

	#temoignages .carousel_pic {
		width: 350px;
		aspect-ratio: 7/10;
		border-radius: 20px;
		background-size: auto 120%;
	}

	.carousel_pic_overlay {
		border-radius: 20px;
	}

	#temoignages .carousel {
		padding: 0 40px;
		scroll-padding-left: 40px;

		/* this is to NOT snap the pictures on mobile */
		scroll-snap-type: unset;
	}

	.carousel_pic_overlay {
		padding: 120px 20px 17px 20px;
		background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.60) 60%);
		font-size: 17px;
	}

	.carousel_pic_overlay p:first-of-type {
		font-size: 23px;
		line-height: 35px;
	}

	#temoignages .carousel_pic {
		margin-right: 20px;
	}

	#temoignages .carousel_pic:last-of-type {
		margin-right: 40px;
	}

	.arrow {
		display: none;
	}
}

@media only screen and (max-width: 500px) {
	#temoignages .carousel {
		/* this is to snap the pictures on mobile */
		scroll-snap-type: x mandatory;
	}

	#temoignages .carousel_pic {
		width: 100%;
	}
}




/************************************* FULLSCREEN PIC VIEWER *************************************/


#instants_captures .carousel_pic {
	cursor: pointer;
}


#fullscreen_pic_background {
	background: #000000de;
	backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;
	cursor: pointer;
}

.fullscreen_pic {
  z-index: 100;
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  margin: auto !important;
  max-width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  width: 530px;
  box-shadow: 0 0 15px 0 #00000057;
}

.close_icon {
	position: fixed;
	right: 20px;
	top: 20px;
	height: 45px;
	width: 45px;
	cursor: pointer;
}


/************************************* CAROUSEL SCROLLBAR *************************************/

.thumb {
	width: 40%;
  height: 7px;
  background-color: #AAA;
  border-radius: 8px;
  position: relative;
  border-top: 5px solid var(--color_vanilla);
  border-bottom: 5px solid var(--color_vanilla);
  border-left: 4px solid var(--color_vanilla);
  border-right: 4px solid var(--color_vanilla);
  margin-top: -5px;
  margin-bottom: -5px;
}

.thumb:focus {
  background-color: #777;
}

@media only screen and (max-width: 950px) {
	.carousel_scrollbar {
		display: none;
	}
}