/* ################################ GENERAL ################################# */
/*
  Torch color: #ee4c2c = rgb(238,76,44)
*/

.TORCHLURKLINK:link{
  text-decoration: none;
  color: black;
}

.TORCHLURKLINK:visited{
  text-decoration: none;
  color: black;

}



* {
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

html, body {
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 1.1rem; /*25px;*/ /*1.1rem*/
  margin: 0;
  padding:0;
  /*background: #004882;*/
}

a {
  color: #ee4c2c;
  text-decoration: none;
}

/* ################################# TITLES ##################################*/
/* set color and sizes*/

h1 {
  font-size: 2rem; /*80px*/
  height: 50vh;
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}


h2 {
  font-size: 2rem; /*40px*/
  color: #000000; /*color: rgb(0, 44, 122);*/
  font-family: 'Montserrat', sans-serif;
}

h3 {
  font-size: 1.75rem; /*40px*/
  height: 50vh;
  display: block; /*flex*/
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}


h6 {
  font-size: 3rem; /*40px*/
  color: #000000; /*color: rgb(0, 44, 122);*/
  font-family: 'Montserrat', sans-serif;
}

/* ################################# HEADER ##################################*/
	#header {
		background-color: #fff;
		border-bottom: solid 1px rgba(144, 144, 144, 0.25);
		box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
		color: #484848;
		cursor: default;
		font-size: 1.25em;
		height: 4.5em;
		left: 0;
		line-height: 4.4em;
		position: fixed;
		text-transform: uppercase;
		top: 0;
		width: 100%;
		z-index: 10000;
		z-index: 10001;
	}

		#header h1 {
			color: #000000; /*#484848;*/
      font-size: 1.25em; /*30px*/
			font-weight: 100;
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
		}

		#header nav {
			height: inherit;
			line-height: inherit;
			position: absolute;
			right: 1.25em;
			top: 0;
			vertical-align: middle;
		}

			#header nav ul {
				list-style: none;
				margin: 0;
				padding-left: 0;
			}

				#header nav ul li {
					border-radius: 4px;
					display: inline-block;
					margin-left: 2.5em;
					padding-left: 0;
				}

					#header nav ul li a {
						-moz-transition: color 0.2s ease-in-out;
						-webkit-transition: color 0.2s ease-in-out;
						-ms-transition: color 0.2s ease-in-out;
						transition: color 0.2s ease-in-out;
						color: #666; /*HERE: color of navigation buttons*/
						display: inline-block;
						text-decoration: none;
					}

						#header nav ul li a:hover {
							color: #ee4c2c; /*HERE: nav change colors when mouse over*/
						}

					#header nav ul li:first-child {
						margin-left: 0;
					}

					#header nav ul li .button {
						border-color: rgba(144, 144, 144, 0.25);
						box-shadow: none;
						height: 3em;
						line-height: 2.9em;
						margin-bottom: 0;
						padding: 0 1.5em;
						position: relative;
						top: -0.075em;
						vertical-align: middle;
					}


/* HEADER HOME PAGE */
		#header .container {
			position: relative;
		}

			#header .container h1 {
				left: 0;
			}

			#header .container nav {
				right: 0;
			}

		#header.alt {
			background-color: transparent;
			border: 0;
			box-shadow: none;
			height: 3.25em;
			line-height: 3.25em;
			position: absolute;
		}

			#header.alt h1 {
				color: #000000;
				left: 2.5em;
				top: 2em;
			}

				#header.alt h1 a {
					color: #dc143c; /*#FFF;*/ /*HERE: EPFL link in read HOME header*/
				}

			#header.alt nav {
				right: 2em;
				top: 2em;
			}

				#header.alt nav a {
					color: #000; /*ddd*/ /*HERE COLOR BUTTON HEADER HOME*/
				}

					#header.alt nav a:active, #header.alt nav a:hover {
						color: #ee4c2c; /*#FFF;*/
					}

			#header.alt .button {
				border-color: rgba(255, 255, 255, 0.5);
				color: #ffffff !important;
			}


		@media screen and (max-width: 980px) {

			#header {
				display: none;
			}

		}


#header img {
 height: 2rem; /*30px*/
}


/*
.header {
  height: 50vh;
  display: block;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  color: #FFFFFF;

  background-image:
   linear-gradient(
    45deg,
    #434343 0%,
    black 100%
  );
} */

/* ################################# HOME ####################################*/
#home {
  display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
    -moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		/*padding: 15em 0 6em 0;*/

    /*background-image: url("../images/net.jpg");
    opacity: 0.9;*/
    background-image:
     linear-gradient(
      120deg,
      #fdfbfb 0%,
      #ebedee 100%
    );

    background-size: cover;
		background-position: center;
		background-attachment: fixed;
		text-align: center;
		position: relative;
		cursor: default;
}

#home h1, #home h2, #home h3, #home h4, #home h5, #home h6 {
  color: #000000; /*#ffffff;*/
  font-family: 'Montserrat', sans-serif;
  margin 0;
}

#home h1 {
  margin-bottom: 0.5em;
  font-size: 50px;
}

#home h2 {
  font-size: 50px;
}

#home h3 {
  font-size: 30px;
}

#home h4 {
  font-size: 1.25rem; /*20px*/
  padding-bottom: 10rem; /*HERE: distance to footer*/
}


#home img {
  max-width: 35rem; /*700px*/
  padding-top: 10rem; /*15rem*/
  padding-bottom: 5rem;
}

.filter-green{
  /*fill: rgb(255,255,255);*/ /*filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);*/
  filter: brightness(100) invert(1);
  margin: 0;
  padding-bottom: 0px;
}

#home nav {
  height: inherit;
  line-height: inherit;
  position: absolute;
  right: 1.25em;
  top: 0;
  vertical-align: middle;
}

#home nav ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

#home nav ul li {
  border-radius: 4px;
  display: inline-block;
  margin-left: 2.5em;
  padding-left: 0;
}

#home nav ul li a {
  color: #FFFFFF; /*button color*/
  display: inline-block;
  text-decoration: none;
}


#home.alt nav { /* margins */
  right: 2em;
  top: 2em;
}

#home.alt nav a { /* button color same as before */
  color: #FFFFFF; /*#FFFFFF;*/
}

#home blockquote {
  font-size: 1.25rem;
  padding-top: 5rem; /*10rem*/
  max-width: 1000rem;
}

#home a {
  color: #ee4c2c;
  text-decoration: none;
}

/* ################################## MAIN ################################## */
main {
  padding-top: 8em;
}

#main header {
  font-size: 100px;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}


/* ############################# BUTTON HEADER ############################## */
#buttons-header .btn-container {
  justify-content: space-between;
  display: flex;
  padding-top: 8rem; /*10rem*/
  padding-bottom: 8rem; /*10rem*/
}

#buttons-header .btn {
  flex-grow: 1;
  /*max-width: 180px;
  min-width: 110px;*/
  /*margin-left: 300px;*/
  width: 90rem; /*1000px*/ /*HERE: space (horizontal occupied by the 3 buttons)*/
  margin-top: 2rem; /*6px*/
}

#buttons-header .btn .select {
    position: relative;
}


.btn {
  /*position: absolute;*/ /*NOPE*/
  max-width: 55rem; /*55rem*/
	margin-left: auto;
	margin-right: auto;
  top: 100%;
  left: 100%;
  /*transform: translate(-50%, -50%);*/
}

/*.btn select useless*/
.btn select {
  background: #fff;
  color: #000000;
  padding: 10px; /*10px*/
  width: 200px; /*200px*/
  height: 50px; /*50px*/
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom-width: 2px; /*2'px*/
  font-size: 20px; /*20px*/
  /*box-shadow: 0 5px 25px rgba(0,0,0,.5);
  -webkit-appearance: button;
  outline: none;*/
}

#buttons-header button {
  border-radius: 0px;
  /*
  display: block;

	margin: 0.75rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0.75rem;
  */

  width: 12rem; /*200px*/
  height: 6rem; /*100px*/

  background-color: rgba(238,76,44,0.0); /*rgba(0,0,0,0.1);*/
  color: rgba(238,76,44); /*white;*/

  font-weight: bold;
	font-size: 1.3rem; /*1.5rem*/

  border: 2px solid rgba(238, 76, 44, 0.6); /*rgba(255,255,255,0.1);*/

  transition-duration: 0.4s;
}

#buttons-header button:focus {
  outline: none;
}

#buttons-header button:hover {
  background-color: rgba(238,76,44,0.1); /*rgba(255,255,255,0.1);*/
  color: rgba(238,76,44); /*rgba(255,255,255);*/
  cursor:pointer;
}



/* ############################### PARAGRAPHS ############################### */
.width-limited {
	max-width: 55rem;

	/* Center horizontally: */
	margin-left: auto;
	margin-right: auto;
}

p {
	text-align: justify;
  color: #938F8E;
  font-size: 20px;
}

.width-limited-2 {
	max-width:400rem;

	/* Center horizontally: */
	margin-left: auto;
	margin-right: auto;
}


/* ################################# PLOT 1 ################################# */
#plot1 {
  max-width: 55rem;
  margin: 0 auto;

  /*
  margin-left: auto;
	margin-right: auto; */
  /*
  width: 30%;
  margin: 0 auto;*/
}

/* ############################# BUTTON PLOT 1 ############################## */
 #selectors button {
 	display: block;

 	margin: 0.75rem;
 	margin-left: auto;
 	margin-right: auto;
 	padding: 0.75rem;

   /*
 	border: 2px black solid;
 	border-radius: 1rem;*/

 	/*background: #ffffff; /*rgb(150, 200, 255);*/
   background-color: rgba(238,76,44,0.0);
   color: rgba(238,76,44);
   font-weight: bold;
   border: 2px solid rgba(238, 76, 44, 0.6);
   transition-duration: 0.4s;

 	font-size: 1rem;

   width: 200px;

   cursor: pointer;

 }

 #selectors button:hover {
   background-color: rgba(238,76,44,0.1); /*rgba(255,255,255,0.1);*/
   /*color: rgba(238,76,44);*/ /*rgba(255,255,255);*/
   cursor:pointer;
 }
 #selectors button:focus {
   outline: none;

 }


 /* SCROLL BUTTON - SELECTOR */
 #selectors .container {
   justify-content: flex-end;
   display: flex;
   padding-left: 7rem;
   padding-right: 7rem;
 }

 #selectors .selector {
   flex-grow: 1;
   max-width: 180px; /*180px*/
   min-width: 110px; /*110px*/
   margin-left: 10rem; /*30px*/
   margin-top: 6px; /*6px*/
 }

 #selectors .selector .select {
     position: relative;
 }

/*
 .selector {
   max-width: 55rem;
   margin-left: auto;
   margin-right: auto;
   top: 100%;
   left: 100%;
 }*/

 .selector select {
   background: #fff;
   color: #000000;
   padding: 10px;
   width: 200px;
   height: 50px;
   border-top: none;
   border-right: none;
   border-left: none;
   border-bottom-width: 2px;
   font-size: 20px;
   /*box-shadow: 0 5px 25px rgba(0,0,0,.5);
   -webkit-appearance: button;
   outline: none;*/
 }


/* ############################## TEAM SECTION ############################## */
.container p {
  color: #000000;
  line-height: 1.8;
}
/* ############################## IMAGES TEAM ############################### */
.image {
  border-radius: 4px;
  border: 0;
  display: inline-block;
  position: relative;
}

  .image img {
    border-radius: 4px;
    display: block;
  }

  .image.left, .image.right {
    max-width: 40%;
  }

    .image.left img, .image.right img {
      width: 70%; /*default: 100%*/ /*HERE: round image size in ABOUT ME section*/
    }

  .image.left {
    float: left;
    padding: 0 1.5em 1em 0;
    top: 0.25em;
  }

  .image.right {
    float: right;
    padding: 0 0 1em 1.5em;
    top: 0.25em;
  }

  .image.fit {
    display: block;
    margin: 0 0 2em 0;
    width: 100%;
  }

    .image.fit img {
      width: 100%;
    }

  .image.rounded {
    border-radius: 100%; /*default 100%*/
  }

    .image.rounded img {
      border: solid 0.5em rgba(144, 144, 144, 0.25); /*HERE: Image border*/
      border-radius: 100%; /*default 100%*/
    }

  .image.captioned {
    border-radius: 0;
    margin-bottom: 4em;
  }

    .image.captioned img {
      border-radius: 0;
    }

    .image.captioned h3 {
      background-color: #fff;
      box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.15);
      display: block;
      padding: 2em 1em;
    }

    @media screen and (max-width: 736px) {

      .image.captioned {
        margin-bottom: 2em;
      }

        .image.captioned h3 {
          padding: 1em;
        }

    }

  .image.main {
    display: block;
    margin: 0 0 3em 0;
    width: 100%;
  }

    .image.main img {
      width: 100%;
    }


/* ################################# ICONS ################################## */
.icon {
	text-decoration: none;
	border-bottom: none;
	position: relative;
  color: #ee4c2c;
}

.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

.icon > .label {
	display: none;
}

ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
}

ul.icons li {
  display: inline-block;
  padding: 0 1em 0 0;
}

  ul.icons li:last-child {
    padding-right: 0;
  }

  ul.icons li .icon:before {
    font-size: 1em; /* HERE: size of the logo in the footer*/
  }

#footer ul li a:hover {
  color: #ee4c2c;
}

#footer ul.icons li .icon:before {
  font-size: 3em; /* HERE: size of the logo in the footer*/
}


/* ############################## MODEL PANELS ############################## */
.model_panel_main {
  margin: 1.2rem 1.2rem 1.2rem 1.2rem; /*30px 30px 30px 30px;*/
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start; /*flex-start;*/
  flex-basis: 0;
  flex-grow: 1;
}

.model_panel_link {
  text-decoration: none;
  zoom: 1;
  margin: auto;
  padding-bottom: 5rem;
}

.model_panel {
  width: 40rem; /*700px;*/
  height: 25rem; /*400px;*/
  /*margin: 0 0 7rem 0;*/ /*0 0 100px 0;*/ /*HERE: sapce between the 2 boxes*/
  background: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.1em; /*1.65*/
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /*padding-bottom: 10rem;*/
  cursor: pointer;
}

.shadow_box {
  box-shadow: 0 0 4rem rgba(5,5,38,.1); /*25px*/
}

.transparent_box:hover {
  opacity: 0.5;
}


/* ------------------------ MODEL PANELS: hover text ------------------------ */
.hvrbox,
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}
.hvrbox img {
	max-width: 100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
  box-shadow: 0 0 4rem rgba(5,5,38,.1);

}
.hvrbox .hvrbox-layer_top {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}
/*----------------------------------------------------------------------------*/

.model_panel_header {
  margin: 0;
  font-size: 1.1rem; /*16px*/
  color: #000;
  flex-basis: 6rem; /*110px*/
  padding: 2rem 2rem 0; /*16px 16px 0*/
}

.model_panel_infos {
  padding: 2rem; /*20px*/
  padding-bottom: 0px;
  text-align: center; /*Here added*/
  display: flex;
  flex-direction: row;
  color: grey;
  /*font-size: 20px;*/
  flex-basis: 0;
  flex-grow: 1;
  overflow: hidden;
}

.model_panel_lefthalf {
  /*flex-basis: 110px;*/
  overflow: hidden;
  position: relative;
  padding-left: 6rem; /*HERE*/ /*120px*/
}

.model_panel_righthalf {
  flex-basis: 0;
  flex-grow: 1;
  /*margin-right: 10px;*/
  position: relative;
  left: -1.1rem; /*-8px*/ /*HERE: right-half shift to center it*/
  padding-left: 3rem; /*100px*/
}

.model_panel_lefthalf_header {
  position: relative;
  font-size: 1.25rem; /*20px*/
}

.model_panel_lefthalf_txt {
  position: relative;
  font-size: 1.10rem; /*15px*/
}

.model_panel_righthalf_header {
  position: relative;
  font-size: 1.25rem; /*20px*/
}

.model_panel_righthalf_txt {
  position: relative;
  font-size: 1.10rem; /*15px*/
}


.model_panel_bottom {
  padding-left: 10rem; /*50px*/
  padding-right: 10rem; /*50px*/
  padding-top: 1rem; /*25px*/
  padding-bottom: 6rem; /*100px*/
  text-align: center; /*Here added*/
  display: flex;
  flex-direction: row;
  color: grey;
  /*font-size: 20px;*/
  flex-basis: 0;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

.model_panel_bottom img {
    width:100%; /*200px*/
    /*height: auto;*/
}

.model_panel_bottom div {
  width: 7rem; /*130px*/
  height: 7rem; /*130px*/
  border-radius: 100rem; /*10px*/ /*HERE: square or round*/
  overflow: hidden;
  position: absolute;
  border: 4px solid #fff;
  box-sizing: border-box;
  background: #ddd;
  box-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,.3); /*3px 3px 8px*/
  left: 2rem; /*20px*/
  transform: scaleX(.9)rotate(45deg)scale(0.9); /*scaleY(.7)rotate(50deg)scale(.8);*/
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.model_panel_bottom div #one img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}


#onlyone {
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* ################################# FOOTER ################################# */

#footer {
padding: 8em 0 6em 0;
background: #f6f6f6;
color: #aaa;
text-align: center;
}

#footer a {
	-moz-transition: color 0.2s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out;
	-ms-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
	color: #aaa;
	text-decoration: none;
}

#footer a:active, #footer a:hover {
color: #666;
}

#footer .icons {
font-size: 1.5em;
}

#footer .icons li {
padding-right: 2.5em;
}

#footer .icons li:last-child {
	padding-right: 0;
}

#footer .copyright {
margin: 2em 0;
padding: 0;
text-align: center;
}

#footer .copyright li {
border-left: solid 1px rgba(144, 144, 144, 0.25);
display: inline-block;
list-style: none;
margin-left: 1.5em;
padding-left: 1.5em;
}

#footer .copyright li:first-child {
	border-left: 0;
	margin-left: 0;
	padding-left: 0;
}

@media screen and (max-width: 980px) {

	#footer {
		padding: 6em 0 4em 0;
	}

}

@media screen and (max-width: 736px) {

	#footer {
		padding: 3em 0 2em 0;
	}

		#footer .icons {
			font-size: 1em;
		}

}

@media screen and (max-width: 480px) {

	#footer {
		padding: 3em 0 1em 0;
	}

		#footer .copyright li {
			border-left: 0;
			display: block;
			margin: 0;
			padding: 0;
		}

}





/* ######################################################################## */
/* ######################################################################## */
/* ############################# JULIEN ################################### */
/* ######################################################################## */
/* ######################################################################## */

/* c'est un copié collé de filtersPage.css !*/
.titel-page{
font-size: 4.5rem;
font-weight: bold;
  text-align: center;
  color: #615f5f;

}

.titel-filter{
  text-align: center;
  /*color: #ebebeb;*/
  color: orangered;
}

.histo rect{
 /* fill: #ee4c2c; */
 fill: orangered;
 opacity: 0.9;
}
.histo text{
  color: black;
  font-weight: bold;
  font-family: Helvetica, sans-serif;
  font-size: 15px;
}

.histo path{
  color: black;
}

.histo .tick{
  color: black;
}

/*
body,html{

  background:  #f6f6f6;
  color: #ebebeb;
  font-family: 'Arial', sans-serif;
} */

/*
body{
  background-image: url("torch1000.svg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 10px 20px;
  background-size: 180px 180px;
}*/

.main_wrapper{ /* contains filtersPage :))*/
  /*width: 70%;*/
  /*height:100%*/
 /* margin: 0 auto;*/
}
/*---CSS for the Grid part------------!! dont know how it works ! :)) -------------------*/
.grid-wrapper{
  display: flex;
  margin: auto;
  width: 100%;
 /* height: 70%;*/
}
.grid-container{
  /*padding: 10px;*/
  width: 100%;
  /*height: 100%;*/
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 12%);
  grid-auto-rows: 1fr;

}

.grid-container::before {
  content: '';
  width: 0;
  padding-bottom: 100%;
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}
.grid-container > *:first-child {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}
/* Just to make the grid visible */
.grid-container > * {
  background: rgba(0,0,0,0.1);
  border: 1px grey solid;
}

.griditem{
 /*background-color: teal;*/
  /*the margin should be calculated in JS
  but margin : 4px is nice...*/
  margin: 4px;
  border-radius: 5px;
}
.griditem:hover{
  transform: scale(1.3);
  z-index: 2;
  /*border: 2px solid #3ee7ad;*/
  cursor: pointer;
}
.unitNumber{
  display: inline-block;
  font-size: 1.4vw;
  border-bottom-right-radius: 5px;
  padding: 2px;
  color: black;
  background-color: silver;
  opacity: 0.8;
}


/*-------CSS for the pop-ups--------*/

.modal-container{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0);
  transition: 1000ms ease-in-out;
  border: solid #615f5f 1px;
  border-radius: 5px;
  z-index: 10; /*pour le dessiner sur tout le reste*/
  background-color: #2e2d2e;
  width: 60%; /*width 500px*/
  height: 75%; /*max-width 80%*/
  /*background-color: rgba(255, 255, 255, 0.6); */
  backdrop-filter: blur(40px);
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(255,255,255,0.6); /* Black w/opacity/see-through */
}

.modal-container.active{
  transform: translate(-50%,-50%) scale(1);
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  height: 10%; /*% of the modal container*/
 /* border-bottom: 1px #3d3d3f solid; */
}

.modal-header a:link, .modal-header a:visited {
  /*display: inline-block;
  position: relative;
  top: 20%;
  */
margin-right: 3px;
margin-left: 3px;
  padding: 5px;
  background-color: white;
  text-decoration: none;
  color: rgb(71,69,69);
  border: 2px solid rgba(238, 76, 44, 0.6);
  font-weight: bold;
}

.modal-body{
  width: 100%;
  height: 90%; /*90% of the modal container*/

  overflow: auto; /* or scroll...*/
}

.modal-body::-webkit-scrollbar{
  width: 13px;
  height: 13px;
}

.modal-body::-webkit-scrollbar-track{
  border: 0px solid #ebebeb;
  border-radius: 10px;
  box-shadow: inset 0 0 5px #ebebeb;
  /*box-shadow: inset 0 0 2.5px 2px rgba(0,0,0,0.5);*/
}

.modal-body::-webkit-scrollbar-thumb{
 /* background: linear-gradient(45deg, rgb(236, 226, 226),rgb(32, 32, 34));*/
 background-color: rgba(97,95,95,1);

  border-radius: 20px;
}

.modal-container p{
  color: black;
  text-align: justify;
}

.displayTitel{
  color: black;
  text-align: center;
}

.close-div{
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  color:rgb(71,69,69);
  font-size: 1.9rem;
  position: absolute;
  top: 0px;
  right: 0px;
  margin-right: 3px;
}

.overlay{
 position: fixed;
 z-index: 1;
 opacity: 0;  /*au moment ou on lui donne une opacité il capte les mouses events a la place de ce qu'il y a desoous*/
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 /*background-color: rgb(249, 248, 253,0.6);*/
 transition: 1000ms ease-in-out;
 pointer-events: none;  /* pour l'opacité !*/
}

.overlay.active{
  opacity: 1;
  pointer-events: all;
}
/*/////CSS pour le modal-body composé du fixed-sidebar et du content-wrapper ///////*/


/*.fixed-sidebar{
  width: 20%;
  height: 90%;
  position: absolute;
}
*/
/*
.content-wrapper{
   margin-left: 22%;
} */

/*
.tablink{
  word-wrap: break-word;
  display: block;
  height: 8%;
  width: 100%;
  background-color: teal;

}
*/

/*display content et toggle de unClicked*/

/*
.displayContent{
  display: block;
}
.displayContent.unClicked{
  display: none; // par default tout est mis avec la classe unclicked dans le html sauf le id = defaultDisplay...
}

*/

.images {
  display: flex;
  justify-content: space-around;
}

/*---- CSS pour avoir 2 colonnes !!! --- */
.firstColumn{
  float: left;
  width: 40%;
  margin-top: 20%;

}
.secondColumn{
  float: left;
  width: 60%;

}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.swiper-container{
  /* see HTML !*/
}
.main_wrapper{
  width: 100%;
  margin: 0 auto;
}