@font-face {
	font-family: helvetica-medium;
	src: url(font/helvetica-medium.otf);
}

* {
	font-family: helvetica-medium;
	letter-spacing: 0.3px;
}

/* ——————————— DEBUT SELECTED TEXT ——————————— */

.frame ::-moz-selection {
  color: #BD9A60;
  background: white;
}

.frame ::selection {
  color: #BD9A60;
  background: white;
}

.cabaneb ::-moz-selection {
  color: #AFBC88;
  background: white;
}

.cabaneb ::selection {
  color: #AFBC88;
  background: white;
}

.cv ::-moz-selection {
  color: #CBABCC;
  background: white;
}

.cv ::selection {
  color: #CBABCC;
  background: white;
}

.talentdays ::-moz-selection {
  color: #DE4F12;
  background: white;
}

.talentdays ::selection {
  color: #DE4F12;
  background: white;
}

.fptp ::-moz-selection {
  color: #EDC832;
  background: white;
}

.fptp ::selection {
  color: #EDC832;
  background: white;
}

.distantes ::-moz-selection {
  color: #C9DCE7;
  background: white;
}

.distantes ::selection {
  color: #C9DCE7;
  background: white;
}

.usm ::-moz-selection {
  color: #AEAEAE;
  background: white;
}

.usm ::selection {
  color: #AEAEAE;
  background: white;
}

.uchronia ::-moz-selection {
  color: #6CB75A;
  background: white;
}

.uchronia ::selection {
  color: #6CB75A;
  background: white;
}

.weltformat ::-moz-selection {
  color: #6091FB;
  background: white;
}

.weltformat ::selection {
  color: #6091FB;
  background: white;
}

.about ::-moz-selection {
  color: gray;
  background: white;
}

.about ::selection {
  color: gray;
  background: white;
}

/* ——————————— FIN SELECTED TEXT ——————————— */

#col-gauche {
	width: calc(50% - 15px);
	background-color: white;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	transition-duration: 1s;
}

#col-droite {
	width: calc(50% - 15px);
	background-color: white;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 5;
	transition-duration: 1s;
}

.image {
	width: 100%calc(100% - 20px);
	margin: 10px;
}

.background-site {
	background-color: #EEE;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
}

#about {
	background-color: #EEE;
	width: 30px;
	height: 100%;
	position: fixed;
	top: 0;
	left: calc(50% - 15px);
	z-index: 0;
	cursor: help;
	z-index: 100;
}

.about-close {
	cursor: alias !important;
}

.about-on {
	width: calc(25% - 2.5px) !important;
	transition-duration: 1s;
}

#legende {
	margin: 0;
	z-index: 40;
	font-size: 12px;
	line-height: 14px;
}

.titre {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 60;
	font-size: 11px;
	line-height: 13.5px;
}

.titre-droite {
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: right;
	z-index: 60;
	font-size: 11px;
	line-height: 13.5px;
}

.description {
	position: absolute;
	bottom: 8px;
	left: 10px;
	z-index: 60;
	margin-right: 40px;
	font-size: 11px;
	line-height: 13.5px;
}

.description-droite {
	position: absolute;
	bottom: 8px;
	right: 10px;
	text-align: right;
	z-index: 60;
	margin-left: 40px;
	font-size: 11px;
	line-height: 13.5px;
}

.carousel-control-prev {
	cursor: w-resize;
	width: 50% !important;
}

.carousel-control-next {
	cursor: e-resize;
	width: 50% !important;
}

.lien {
	color: #272A2D !important;
	text-decoration: underline !important;
	cursor: hand !important;
}

.lien:hover {
	color: #272A2D !important;
}

#bouton-about {
	position: fixed;
	top: 10px;
	left: calc(50% - 15px);
	width: 30px;
	z-index: 150;
	cursor: help;
}

#contact {
	position: fixed;
	bottom: 6px;
	left: calc(50% - 25px);
	width: 50px;
	z-index: 150;
	text-align: center;
	font-size: 10px;
	line-height: 11px;
}

.nom {
	font-size: 11px !important;
	line-height: 12px !important;
	text-align: center !important;
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.contact {
	font-size: 11px !important;
	line-height: 12px !important;
	text-align: center !important;
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#carouselExampleFade1,
#carouselExampleFade2,
#carouselExampleFade3,
#carouselExampleFade4,
#carouselExampleFade5,
#carouselExampleFade6,
#carouselExampleFade7,
#carouselExampleFade8,
#carouselExampleFade9,
#carouselExampleFade10,
#carouselExampleFade11,
#carouselExampleFade12,
#carouselExampleFade13,
#carouselExampleFade14,
#carouselExampleFade15 {
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.applat {
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.nom-mobile {
	font-size: 11px !important;
	line-height: 12px !important;
	text-align: center !important;
	display: none;
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.col-gauche-about {
	width: calc(25% - 2.5px);
	position: absolute;
	left: calc(25% - 2.5px);
	top: 0;
	z-index: 3;
}

.col-droite-about {
	width: calc(25% - 2.5px);
	position: absolute;
	right: calc(25% - 2.5px);
	top: 0;
	z-index: 3;
}

a {
	text-decoration: none !important;
	color: black !important;
}

.about-liste-droite {
	padding-left: 0px !important;
}

.about-liste-gauche {
	padding-left: 0px !important;
}

.adresse {
	margin-bottom: 0px !important;
}

/* ——————————— DEBUT RESPONSIVE TABLETTE ——————————— */

@media (max-width: 1230px) {

	#col-gauche {
		width: calc(100% - 30px);
		left: 0;
		top: -10px;
		padding-top: 10px;
		display: block;
		position: relative;
		margin-left: 0px;
	}

	#col-droite {
		width: calc(100% - 30px);
		left: 0 !important;
		top: -20px;
		padding-top: 0.1px;
		position: relative;
		margin-left: 0px;
		margin-top: 0px;
		margin-bottom: -10px;
		padding-bottom: 0.1px;
	}

	.col-gauche-about {
		width: calc(50% - 10px);
		position: absolute;
		display: block;
		top: 0px;
		right: 20px;
		left: auto;
	}

	.col-droite-about {
		width: calc(50% - 10px);
		position: absolute;
		display: block;
		top: calc(5 * (37.5vw - 22.5px) + 5 * 10px);
		right: 20px;
	}

	.image-gauche {
		width: calc(100% - 20px);
		margin-right: 10px;
	}

	.image-droite {
		width: calc(100% - 20px);
		margin-left: 10px;
	}

	#about {
		position: fixed;
		right: 0px;
		left: auto;
		width: 20px;
	}

	#bouton-about {
		position: fixed;
		right: 0px;
		left: auto;
	}

	#contact {
		position: fixed;
		right: -10px;
		left: auto;
	}

	.nom {
		font-size: 10px !important;
		line-height: 11px !important;
	}

	.about-on {
		width: calc(50% - 10px) !important;
		transition-duration: 1s;
	}

	.titre {
		font-size: 10px !important;
		line-height: 11px !important;
	}

	.description {
		font-size: 10px !important;
		line-height: 11px !important;
	}

	.titre-droite {
		font-size: 10px !important;
		line-height: 11px !important;
		text-align: left;
		left: 10px;
	}

	.description-droite {
		font-size: 10px !important;
		line-height: 11px !important;
		text-align: left;
		left: -30px;
		margin-right: 40px;
	}

}

/* ——————————— FIN RESPONSIVE TABLETTE ——————————— */

/* ——————————— DEBUT RESPONSIVE MOBILE ——————————— */

@media (max-width: 500px) {

	.about-on {
		opacity: 0;
		width: calc(100% - 30px) !important;
	}

	.col-gauche-about {
		width: calc(100% - 30px);
		left: 0px;
	}

	.col-droite-about {
		width: calc(100% - 30px);
		left: 0px;
		top: calc(5 * (75vw - 37.5px) + 5 * 10px);
	}

	.nom {
		display: none;
	}

	.nom-mobile {
		display: block;
	}

}

/* ——————————— FIN RESPONSIVE MOBILE ——————————— */

html, body {
	overscroll-behavior: none;
	overflow: initial;
}