:root {
  --blue:       #AECECD;
  --text-blue:  #1C908E;
  --text-brown: #67605E;


  --light-grey: #CAC6C5;
  --heavy-grey: #67605E;
  --broken-white: #F0F1F1;


  --content-width: 830px;

  --background-color: white;

  --beforeafter-width: 250px;
  --beforeafter-height: 170px;
}


@font-face
{
	font-family: "IBM Plex";
	font-style: normal;
	src: 
	url("/dist/IBM-Plex-Sans/IBMPlexSans-Regular.ttf") format("truetype");
}

@font-face
{
	font-family: "IBM Plex";
	font-style: italic;
	src: 
	url("/dist/IBM-Plex-Sans/IBMPlexSans-Italic.ttf") format("truetype");
}

@font-face
{
	font-family: "IBM Plex";
	font-style: normal;
	font-weight: bold;
	src: 
	url("/dist/IBM-Plex-Sans/IBMPlexSans-Bold.ttf") format("truetype");
}

@font-face
{
	font-family: "IBM Plex";
	font-style: italic;
	font-weight: bold;
	src: 
	url("/dist/IBM-Plex-Sans/IBMPlexSans-BoldItalic.ttf") format("truetype");
}

@font-face
{
	font-family: "Poppins";
	font-style: normal;
	src: 
	url("/dist/Poppins/Poppins-Medium.ttf") format("truetype");
}

@font-face
{
	font-family: "Poppins";
	font-style: italic;
	src: 
	url("/dist/Poppins/Poppins-MediumItalic.ttf") format("truetype");
}

@font-face
{
	font-family: "Poppins";
	font-style: normal;
	font-weight: bold;
	src: 
	url("/dist/Poppins/Poppins-Bold.ttf") format("truetype");
}

@font-face
{
	font-family: "Poppins";
	font-style: italic;
	font-weight: bold;
	src: 
	url("/dist/Poppins/Poppins-BoldItalic.ttf") format("truetype");
}


 body
{
	background: var(--background-color);
	margin: 0;
	font-family: "Poppins";
	color: var(--text-brown);
	text-align: center;
	font-size: 12pt;
	position: relative;
}


#wholeContainer
{
	text-align: center;
	padding-bottom: 370px;
}

#wholeContainer > * > *
{
	text-align: left;
}

a
{
	color: var(--text-blue);
	text-decoration: none;
}

h2
{
	color: var(--text-brown);
	font-weight: bold;
	border-left: 4px var(--blue) solid;
	padding-left: 10px;
	margin-left: -14px;
	margin-top: 20px;
}

strong
{
	color: var(--text-blue);
}

.centered-section
{
	max-width: 100%;
	width: 830px;
	display: inline-block;
}


#large-nav
{
	padding-top: 10px;
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--background-color);
	top: -1px;
	z-index: 200;
}

.alligned-nav
{
	list-style-type: none;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

.sub-menu
{
	list-style-type: none;
	padding: 0;
	background: red;
	position: absolute;
	min-width: 10rem;
	padding: .5rem 0;
	margin: .125rem 0 0;
	font-size: 1rem;
	color: #212529;
	text-align: left;
	list-style: none;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: .25rem;
	z-index: 1000;
	padding-top: 8px;
	padding-bottom: 8px;
	visibility: hidden;

box-shadow: var(--light-grey) 0px 4px 5px 0px;
border-top: 0;
border-radius: 0 0 4px 4px;
}

.alligned-nav > li:hover .sub-menu
{
	visibility: visible;
}

.sub-menu > li  a
{
	font-style: normal;
	color: black;
	padding-left: 8px;
	padding-right: 8px;
	border-left: 4px  solid transparent;
}

.sub-menu > li > a:hover
{
	border-left: 4px var(--blue) solid;
	color: var(--text-blue) ;
}

.alligned-nav > li
{
	display: inline-block;
	border-bottom: 3px solid white;
	
}

.alligned-nav > li:not(:first-of-type)
{
	margin-left: 20px;
}

.alligned-nav > li > a
{
	font-weight: bold;
	color: var(--text-brown);
	font-size: 14pt;
	border-bottom: 0px solid var(--text-blue);
}

.alligned-nav > li > a:not(.dropdown-label):hover
{
	color: var(--text-blue);
	border-bottom: 4px solid var(--text-blue);
	transition: border-bottom 0.3s;
}

.alligned-nav > li a.phone
{
	color: var(--text-blue);
	float: right;
	position: absolute;
	display:inline;
	vertical-align: top;
	right: 20px;
}

a.phone
{
	color: var(--text-blue);
}

a.phone:hover
{
	color: var(--text-blue);
	border-bottom: 0.2em solid var(--text-blue);
	transition: border-bottom 0.3s;
}

span.phone.big
{
	font-size: 20pt;
}


.is-pinned
{
	box-shadow: var(--light-grey) 0px 2px 10px 0px;
}

.is-pinned #nav-logo
{
	height: 40px;
	transition: height 0.7s;
}


#nav-logo
{
	margin-bottom:10px;
}

.is-pinned .alligned-nav
{
	margin-top: 4px;
	transition: margin-top 0.7s;
}

body
{
	padding: 0;
	min-height: 100vh;
	padding-bottom: 370px;
}

.beforeafter-list
{
	text-align: center;
	margin-left: -20px;
}

.beforeafter
{
	text-align: left;
	width: var(--beforeafter-width);
	height: var(--beforeafter-height);
	background: var(--light-grey);
	display: inline-block;
	margin-bottom: 20px;
}

.beforeafter
{
	margin-left: 20px;
	position: relative;
}

.beforeafter > div
{
	background-color: var(--heavy-grey);
	height: 100%;
}


.right_panel, .popup {
    position: relative;
    width: 50%;
    right-left: 4px;
    right: 0;
    background-color: #f0f0f0;
    max-width: 100%;
}

.resize {
    background-color: #ccc;
    background-color: var(--blue);
    position: absolute;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

.popup {
  position: absolute;
  /*resize: both; !*enable this to css resize*! */
  overflow: auto;
  left: 0;
  overflow: hidden;
   user-select: none;
}

.popup-header {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196f3;
  color: #fff;
}

/*Resizeable*/

.popup .resizer-right {
  width: 5px;
  height: 100%;
  background: transparent;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: e-resize;
}

.lettrine:first-letter {
  font-size : 5em;
  color : var(--blue);
  margin-right:5px;
  float : left;
  margin-top: calc( 1em / 10 );
}

p
{
	text-align: justify;
}

.accroche
{
	font-size: 14pt;
}

.beforeafter img.after,
.beforeafter img.before
{
	position: absolute;
	object-fit: cover;
	width: var(--beforeafter-width);
	height: var(--beforeafter-height);
	user-select: none;
	pointer-events: none;
}

h3
{
	font-weight: bold;
	color: var(--text-blue);
}


footer
{
	margin-top: 100px;
	background: green;
	clip-path: url(#footer-shape);
	background-color: var(--blue);
	color: var(--text-brown);
	padding-left:10%;
	padding-top:10%;
	min-height: 340px;

	width: 100%;
	position: absolute;
	bottom: 0;
}

#footer-shape-container
{
	height: 0;
	width: 0;
}

.footer-column
{
	display: inline-block;
	vertical-align: top;
}

#footer-container
{
	display: inline-block;
}

.logo-footer
{
	max-height: 50px;
	margin-bottom: 10px;
	margin-top: -5%;
}

.inhoover
{
	display: none;
}

#main-logo-footer:hover .logo-footer
{
	display: none;
}

#main-logo-footer:hover .logo-footer.inhoover
{
	display: block;
}

.footer-column > ul
{
	list-style-type: none;
	font-size: 11pt;
}

footer
{
	font-weight: bold;
}

footer a
{
	color: var(--text-brown);
}

footer a:hover
{
	color: var(--text-blue);
}

.social-button
{
	position: relative;
}

.social-button img
{
	width: 40px;
}

.social-column > a
{
	display: block;
	margin-bottom: 5px;
}

.social-column
{
	padding-left: 20px;
}

.social-button img:nth-of-type(2)
{
	visibility:hidden;
	position: absolute;
	left: 0;
}

.social-button:hover img:nth-of-type(2)
{
	visibility:visible;
}

.social-button:hover img:nth-of-type(1)
{
	visibility:hidden;
}

#social-header
{
	position: absolute;
	left: 50%;
	top: -70px;
}

h5
{
	font-size: 60pt;
	color: var(--text-blue);
}

h4
{
	color: var(--text-brown);
	font-weight: bold;
	border-left: 4px var(--blue) solid;
	padding-left: 10px;
	margin-left: -14px;
	margin-top: 20px;
}

#main-logo-link:hover > img
{
	filter: drop-shadow(1px 5px 5px var(--text-blue));
}

#main-logo-footer
{
	display: block;
	position: relative;
}

h1
{
	font-size: 40pt;
margin-top: 40px;
margin-bottom: 40px;
color: var(--text-blue);
}

.carte
{
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	min-height: 200px;
	width: calc( 33% - 20px );
	vertical-align: top;
}

.carte:first-of-type()
{
	margin-left: 20px;
}

.carte:last-of-type()
{
	margin-right: 20px;
}

.carte-section
{
	max-width: 1200px;
	width: 100%;
	display: inline-block;
}

.carte h3
{
	font-size: 14pt;
	text-align: center;
}

.carte > div
{
	height: 200px;
}


.image-container
{
	position: relative;
	overflow: hidden;
}

.image-container > img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	object-fit: cover;
}

.carte h3
{
	margin-top: 15px;
}


.sandwitchNav
{
	display: none;
}

@media (max-width: 988px)
{
	.logo-footer
	{
		margin-top: unset;
	}

	footer
	{
		clip-path: none;
		padding-left: 0;
		padding-top: 20px;
		margin-top: 40px;
		min-height: unset;
	}

	.sandwitchNav
	{
		display: block;
	}
	
	#large-nav
	{
		display: none;
	}

	h5
	{
		font-size: 30pt;
	}


	.carte
	{
		width: 90%;
	}

	#wholeContainer > * > .carte-section
	{
		text-align: center;
	}
	
	footer
	{
		position: relative;
	}

	#wholeContainer
	{
		padding-bottom: 0px;
	}
}

#sandwitch
{
	position: fixed;
	top: 15px;
	left: 15px;
	z-index: 111;
	display: block;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	background: rgba(0,0,0,0.25);
	text-align: center;
	padding: 15px 0 0 14px;
	box-sizing: border-box;
	visibility: visible;
	z-index: 201;
}

#sandwitch:hover
{
	background: rgba(0,0,0,0.65);
}

#sandwitch > .lines
{
	display: block;
	line-height: normal;
	vertical-align: baseline;
	background-image: none;
	background-position: 0% 0%;
	background-repeat: repeat;
	margin-top: 0;
	width: 49%;
	height: 2px ;
	background-color: white;
	margin: 0;
	margin-bottom: 2px;
}

#sandwitch:hover .cross-button.to-close
{
	transform: rotate(-90deg);
}
/************************************************************************/
/* Cross button deffinition */
/************************************************************************/

.cross-button {
	margin-top: 1px;
	display: block;
	line-height: normal;
	vertical-align: baseline;
	height: 7px;
	width: 49%;
	background-color: transparent;
	background-image: linear-gradient(to right, currentColor, currentColor);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 2px;
	padding: 0;
	outline: 0;
	border: 0;
	color: var(--c-cream);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: .25s cubic-bezier(.17,.67,.89,1.4);
	transition-property: transform;
	will-change: transform;
}
.cross-button::before,
.cross-button::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	display: block;
	height: 2px;
	background: currentColor;
	transition: .25s;
	transition-property: transform, top;
	will-change: transform, top;
}
.cross-button::before {
	top: 7px;
}
.cross-button::after {
	top: calc(100% - 8px);
}

/* cross button */
.cross-button.to-close {
	background-image: none;
}
.cross-button.to-close::before,
.cross-button.to-close::after{
	top: 50%;
}
.cross-button.to-close::before {
	transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg);
}
.cross-button.to-close::after {
	transform: translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);
}

#sandwitch:hover .cross-button.to-close
{
	transform: rotate(-90deg);
}

/************************************************************************/

#nav-container
{
}

.is-visible
{
	display: block;
}

.not-visible
{
	display: none;
}

.sandwitchNav
{
}

.sandwitchNav nav
{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	z-index: 102;
	text-align: center;
	background: white;
	padding: 10px;
	padding-top: 30px;
}

.sandwitchNav nav ul
{
	list-style: none;
	padding: 0;
	text-align: center;
}

.sandwitchNav nav ul li a
{
	font-family: "Computer Modern";
	color: var(--blue);
}

.sandwitchNav nav  img.logo
{
	max-width: calc( 100% - 20px );
	max-width: 200px;
}

.sandwitchNav nav ul li
{
	font-weight: bold;
	color: var(--text-blue);
}

#carouselExampleSlidesOnly .d-none
{
	display: block !important;
}

.image-list img
{
	max-width: 100%;
	margin-bottom: 20px;
}


.snowflake
{
	color: var(--blue);
	
	font-size: 1em;
	font-family: Arial, sans-serif;
	text-shadow: 0 0 5px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}