:root {
	--header-full-height: 8%;
	--header-reduced-height: 4%;
	--header-mobile-height: 10%;
	--section-background-color: rgba(0,0,0, .3);

	--website-background-color: #1e1c1c;
}


body {
    animation: fadeInAnimation ease .7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
  
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@font-face {
  font-family: "kleptocracy";
  font-display: swap;
  src: url("../fonts/kleptocracy.ttf") format("truetype");
}

html, body, header {
	padding: 0;
	margin: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: var(--website-background-color);
	color: white;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}

a {
	color:  white;
	text-decoration: none;
}

/* Class for localizing */

.localizedContent {
	display: none;
}

.visible {
	display:  inline-block;
}

.visible-flex {
	display: flex !important;
}


/* Header part */
header {
	display: flex;
	height: var(--header-full-height);
	width: calc(100% - 50px);;
	padding:  25px 25px 0px 25px;
	position: fixed;
	z-index: 1000;
  transition:all 600ms ease;
  border-bottom: .3em solid rgba(47, 46, 46, .75);
}

	#headerLogo {
		display:  flex;
		width: 40%;
		height:  100%;
		justify-content: left;
	}

		#headerLogo a {
			display:  flex;
			height:  100%;
			width:  100%;
			align-items: center;
		}

		#headerLogo a img {
			height:  100%;
		}

	#headerMenu {
		display:  flex;
		width:  40%;
    transition:all 600ms ease;
	}

		#headerMenu ul {
			display:  flex;
			width:  100%;
			list-style: none;
			margin: 0;
			padding: 0;
			justify-content: start;
			align-items: center;
		}

			#headerMenu ul li {
				display: inline-block;
		        width: 33%;
				font-family: "kleptocracy";
				font-display: swap;
				font-size: 1.4em;
		        text-align: center;
				cursor: pointer;
				color:  white;
        		transition:all 400ms ease;
			}

			#headerMenu ul li {

				  /* you can change these variables to control the border */
				  --border-color: white;
				  --border-width: 3px;
				  --bottom-distance: 0px; /* you can increase this */
				  
				  display: inline-block;
				  background-image: linear-gradient(var(--border-color), var(--border-color));
				  background-size: 0% var(--border-width);
				  background-repeat: no-repeat;
				  transition: background-size 0.5s;

  				  background-position: 50% calc(100% + var(--bottom-distance));

				/*
				border-bottom: 3px white solid;
        		transition:all 600ms ease;
        		*/
			}

			#headerMenu ul li.active {
				background-size: 100% var(--border-width);
			}

			#headerMenu ul li:hover {
				background-size: 100% var(--border-width);
			}

			
			#flagFR, #flagEN {
				width: 1.4em;
			}

			.activeFlag {
				width: 2em !important;
			}

	#headerLangageSelection {
		display:  flex;
		width: 20%;
		height:  100%;
		justify-content: right;
		align-items: center;
	}

		#headerLangageSelection img {
			height:  40%;
			display:  inline-block;
			padding-left:  10px;
			cursor: pointer;
		}

	#headerMobileMenu {
		display: none;
	}

@media all and (max-width: 1250px) {
	header {
		height: var(--header-reduced-height);
	}
		#headerMenu {
			width: 58%;
		}

			#headerMenu ul li {
				font-size: 1em;
			}

		#headerLogo {
			width: 30%;
		}

		#headerLangageSelection {
			display:  flex;
			width: 12%; 
		}


		#headerLangageSelection img {
			height: auto !important;
		}

		#flagFR, #flagEN {
			width: 1.8em;
		}

		.activeFlag {
			width: 3em !important;
		}
}

@media only screen and (max-width: 1000px) {
	header {
		height: var(--header-mobile-height);
		padding: 1% 3% 1% 3%;
		width: 100%;
	}
		#headerMenu {
			display: none;
		}

		#headerLogo {
			width: 54%;
			height: 100%;
		}

			#headerLogo img {
				width: 100%;
				height: auto !important;
			}

		#headerLangageSelection {
			display:  flex;
			width: 40%; 
			justify-content: end;
		}

		#flagFR, #flagEN {
			width: 3em;
		}

		.activeFlag {
			width: 5em !important;
		}
}




/* Content part */
.contentPanel {
	overflow-x: hidden;
	align-items: center;
    transition: all 600ms ease;
} 

	div.localizedContent {
		height: 100%;
	}

	#content [data-anchor="projects"] article {
		display: flex;
		background-color: rgba(0,0,0, .3);
		width: 70%;
		height: 60%;
		overflow-y: hidden;
		overflow-x:  hidden;
    	transition: all 600ms ease;
		box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
	}


	@media all and (min-width: 2000px) {
		#content [data-anchor="projects"] article {
			width: 50%;
		}
	}

		#content [data-anchor="projects"] article section {
			padding: 2%;
			flex-direction: column;
			padding: 1% 5% 5% 5%;
			overflow-y: auto;
			justify-content: space-between;
			display: flex;
		}


		#content [data-anchor="projects"] article aside { 
			height:  100%;
    		transition: all 600ms ease;
		}

			#content [data-anchor="projects"] article aside img { 
				width:  auto;
				height: 100%;
    			transition: all 600ms ease;
			}

			#content [data-anchor="projects"] article section h2 { 
				width:  100%;
				text-align: center;
  				font-family: "kleptocracy";
  				font-display: swap;
			}

			#content [data-anchor="projects"] article section p { 
				text-align: left;
			}

		#storeButtonsContainer {
			text-align: center;
		}

		.storeButton:first-child {
			margin-right: 3%;
		}

			.storeButton {
				display: inline-block;
			}

				.storeButton a {
					display: inline-block;
				}

					.storeButton a img {
						height: 4em;
						width:  auto;
    					transition: all 600ms ease;
					}

					@media all and (max-width: 1250px) {
						.storeButton a img {
							height: 2.8em;
						}
					}


	#content [data-anchor="company"] article {
		display: flex;
		width: 70%;
		max-height: 30%;
		overflow-y: hidden;
		overflow-x:  hidden;
    	transition: all 600ms ease;
    	display: flex;
	}

	#content [data-anchor="company"] article:last-of-type {
		margin-top: 5%;
	}	


		#content [data-anchor="company"] article:last-of-type section {
			margin-left:  0%;
			margin-right:  1%;
		}	

		#content [data-anchor="company"] article aside { 
			height: 100%;
			width: auto;
		}
			#content [data-anchor="company"] article aside img { 
				width: auto;
				height: 100%;
				display: inline-table;
			}


		#content [data-anchor="company"] article section {
			width:  100%;
			margin-left:  1%;
			background-color: var(--section-background-color);
			padding: 1% 4% 1% 4%;
			flex-direction:  column;
			display: none;
			align-items: center;
			overflow-y: auto;
		}



			#content [data-anchor="company"] article section h2 { 
				font-family: "kleptocracy";
  				font-display: swap;
			}


	#content [data-anchor="contact"] article {
		display: flex;
		width: 70%;
		max-height: 30%;
		overflow-y: hidden;
		overflow-x:  hidden;
    	transition: all 600ms ease;
    	display: flex;
	}


		#content [data-anchor="contact"] article aside { 
			height: 100%;
			width: auto;
		}
			#content [data-anchor="contact"] article aside img { 
				width: auto;
				height: 100%;
				display: inline-table;
			}


		#content [data-anchor="contact"] article section {
			width:  100%;
			margin-left:  1%;
			background-color: var(--section-background-color);
			padding: 1% 4% 1% 4%;
			flex-direction:  column;
			display: none;
			align-items: center;
			overflow-y: auto;
		}



			#content [data-anchor="contact"] article section h2 { 
				font-family: "kleptocracy";
  				font-display: swap;
			}

			#content [data-anchor="contact"] article section a { 
				cursor: pointer;
			}

	@media all and (max-width: 1250px) {
		#content [data-anchor="contact"] article {
			width: 85%;
			max-height: 20%;
		}

		#content [data-anchor="compagny"] article {
			width: 85%;
			max-height: 20%;
		}
	}


@media only screen and (max-width: 1000px) {
		aside {
			display: none;
		}

		article {
			font-size: 2em;
		}

		#content [data-anchor="company"] article {
			display: flex;
			width: 80%;
			max-height: 40%;
		}

		#content [data-anchor="company"] article:first-of-type {
			margin-top: 8%;
		}	


		#content [data-anchor="contact"] article {
			width: 80%;
			height: 60%;
			max-height: 60%;
		}

}




/* Modding plugin */
.fp-watermark {
	display: none !important;
}

#fp-nav ul li, .fp-slidesNav ul li {
	height: 20px !important;
	width:  20px !important;
	text-align:  center;
}

	#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
		height: 20px !important;
		width:  20px !important;
		margin: -8px 0 0 -8px !important;
		background-color: white !important;
	}

	#fp-nav ul li a span, .fp-slidesNav ul li a span {
		height: 10px !important;
		width:  10px !important;
		background-color: rgba(255, 255, 255, 0.46) !important;
	}

	#fp-nav ul li .fp-tooltip.fp-right {
		right: 30px !important;
		font-family: "kleptocracy" !important;
  		font-display: swap;
		font-size: 1.4em !important;
	}

@media only screen and (max-width: 1000px) {
	#fp-nav ul li, .fp-slidesNav ul li {
		height: 40px !important;
		width:  40px !important;
		text-align:  center;
	}

	#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
		height: 40px !important;
		width:  40px !important;
		margin: -16px 0 0 -16px !important;
		background-color: white !important;
	}

	#fp-nav ul li a span, .fp-slidesNav ul li a span {
		height: 20px !important;
		width:  20px !important;
		background-color: rgba(255, 255, 255, 0.46) !important;
	}

	#fp-nav ul li .fp-tooltip.fp-right {
		right: 50px !important;
		font-family: "kleptocracy" !important;
  		font-display: swap;
		font-size: 1.4em !important;
	}

}



/* Scroll bars */
::-webkit-scrollbar-track
{
	border: 5px solid var(--section-background-color);
	background-color: var(--section-background-color);
}

::-webkit-scrollbar
{
	width: 15px;
	background-color: #404040;
}

::-webkit-scrollbar-thumb
{
	background-color: #404040;
	border-radius: 10px;
}


/* Tools */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.spaceBetween {
	display: flex;
	justify-content: space-between;
}

.invisible {
	display:  none;
}

.noPadding {
	padding: 0 !important;
}