/*
 *	Copyright (C) 2020  Yassine LADRAM
 *
 *	Author: Yassine LADRAM
 *	Author URL: https://yassineladram.fr/
 */

:root {
	color-scheme: light dark;
}

/* Animations */

@keyframes scroll-animation {
	0%, 100% { margin-top: -20px; margin-bottom: 17px; }
	85% { margin-top: -3px; margin-bottom: 0; }
}

@keyframes project-text-appear {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes label-appear {
	from { top: -20px; }
	to { top: 3px; }
}

@keyframes darkmode-bg-blink {
	0%, 100% { padding: 5px 15px 5px 60px; }
	17% { padding: 5px 15px 5px 60px; }
	19% { padding: 5px 18px 5px 57px; }
	21% { padding: 5px 15px 5px 60px; }
	23% { padding: 5px 18px 5px 57px; }
	25% { padding: 5px 15px 5px 60px; }
	70% { padding: 5px 15px 5px 60px; }
	72% { padding: 5px 18px 5px 57px; }
	74% { padding: 5px 15px 5px 60px; }
	94% { padding: 5px 15px 5px 60px; }
	97% { padding: 5px 12px 5px 63px; }
}

@keyframes darkmode-svg-blink {
	0%, 100% { left: 12px; fill: var(--main-color); }
	17% { left: 12px; fill: var(--main-color); }
	19% { left: 7px; fill: var(--grey-color-lvl-6); }
	21% { left: 12px; fill: var(--main-color); }
	23% { left: 7px; fill: var(--grey-color-lvl-6); }
	25% { left: 12px; fill: var(--main-color); }
	70% { left: 12px; fill: var(--main-color); }
	72% { left: 7px; fill: var(--grey-color-lvl-6); }
	74% { left: 12px; fill: var(--main-color); }
	94% { left: 12px; fill: var(--main-color); }
	97% { left: 17px; fill: var(--red-color); }
}

@keyframes darkmode-text-blink {
	0%, 100% { color: var(--main-color); }
	17% { color: var(--main-color); }
	19% { color: var(--grey-color-lvl-6); }
	21% { color: var(--main-color); }
	23% { color: var(--grey-color-lvl-6); }
	25% { color: var(--main-color); }
	70% { color: var(--main-color); }
	72% { color: var(--grey-color-lvl-6); }
	74% { color: var(--main-color); }
	94% { color: var(--main-color); }
	97% { color: var(--red-color); }
}

@keyframes darkmode-hide {
	0% { opacity: 1; right: -50px; }
	99% { opacity: 1; }
	100% { opacity: 0; right: -400px; }
}

@keyframes error-blink {
	0%, 100% { border-color: var(--red-color); padding-left: 15px; padding-right: 15px; }
	33% { padding-left: 10px; padding-right: 20px; }
	50% { border-color: var(--light-red-color); }
	66% { padding-left: 20px; padding-right: 10px; }
}

@keyframes sending-icon {
	from { top: 500px; }
	to { top: 230px; }
}

@keyframes sending-icon-fade {
	70% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes header-logo-active {
	0% { background: radial-gradient(var(--secondary-bg-color) 0, var(--grey-color-lvl-0) 0); }
	10% { background: radial-gradient(var(--secondary-bg-color) 10%, var(--grey-color-lvl-0) 10%); }
	20% { background: radial-gradient(var(--secondary-bg-color) 20%, var(--grey-color-lvl-0) 20%); }
	30% { background: radial-gradient(var(--secondary-bg-color) 30%, var(--grey-color-lvl-0) 30%); }
	40% { background: radial-gradient(var(--secondary-bg-color) 40%, var(--grey-color-lvl-0) 40%); }
	50% { background: radial-gradient(var(--secondary-bg-color) 50%, var(--grey-color-lvl-0) 50%); }
	60% { background: radial-gradient(var(--secondary-bg-color) 60%, var(--grey-color-lvl-0) 60%); }
	70% { background: radial-gradient(var(--secondary-bg-color) 70%, var(--grey-color-lvl-0) 70%); }
	80% { background: radial-gradient(var(--secondary-bg-color) 80%, var(--grey-color-lvl-0) 80%); }
	90% { background: radial-gradient(var(--secondary-bg-color) 90%, var(--grey-color-lvl-0) 90%); }
	100% { background: radial-gradient(var(--secondary-bg-color) 100%, var(--grey-color-lvl-0) 100%); }
}

@keyframes footer-logo-active {
	0% { background: radial-gradient(var(--secondary-bg-color) 0, var(--grey-color-lvl-7) 0); }
	10% { background: radial-gradient(var(--secondary-bg-color) 10%, var(--grey-color-lvl-7) 10%); }
	20% { background: radial-gradient(var(--secondary-bg-color) 20%, var(--grey-color-lvl-7) 20%); }
	30% { background: radial-gradient(var(--secondary-bg-color) 30%, var(--grey-color-lvl-7) 30%); }
	40% { background: radial-gradient(var(--secondary-bg-color) 40%, var(--grey-color-lvl-7) 40%); }
	50% { background: radial-gradient(var(--secondary-bg-color) 50%, var(--grey-color-lvl-7) 50%); }
	60% { background: radial-gradient(var(--secondary-bg-color) 60%, var(--grey-color-lvl-7) 60%); }
	70% { background: radial-gradient(var(--secondary-bg-color) 70%, var(--grey-color-lvl-7) 70%); }
	80% { background: radial-gradient(var(--secondary-bg-color) 80%, var(--grey-color-lvl-7) 80%); }
	90% { background: radial-gradient(var(--secondary-bg-color) 90%, var(--grey-color-lvl-7) 90%); }
	100% { background: radial-gradient(var(--secondary-bg-color) 100%, var(--grey-color-lvl-7) 100%); }
}

@keyframes button-submit-active {
	0% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 0, var(--grey-color-lvl-7) 0); }
	10% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 2px, var(--grey-color-lvl-7) 2px); }
	20% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 5px, var(--grey-color-lvl-7) 5px); }
	30% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 9px, var(--grey-color-lvl-7) 9px); }
	40% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 14px, var(--grey-color-lvl-7) 14px); }
	50% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 20px, var(--grey-color-lvl-7) 20px); }
	60% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 27px, var(--grey-color-lvl-7) 27px); }
	70% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 35px, var(--grey-color-lvl-7) 35px); }
	80% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 44px, var(--grey-color-lvl-7) 44px); }
	90% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 54px, var(--grey-color-lvl-7) 54px); }
	100% { background: radial-gradient(circle at center, var(--grey-color-lvl-6) 65px, var(--grey-color-lvl-7) 65px); }
}


/* Général */

body {
	-webkit-text-size-adjust: 100%;
	background-color: var(--main-bg-color);
	color: var(--main-font-color);
	font: 400 15px Avenir, sans-serif;
	margin: 0;
	min-width: 340px;
	padding: 0;
	scroll-behavior: smooth;
	word-wrap: break-word;
	overflow-x: hidden;
	overflow-y: auto;
}

@media only screen and (display-mode: standalone) and (orientation: portrait) and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3), only screen and (display-mode: standalone) and (orientation: portrait) and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2), only screen and (display-mode: standalone) and (orientation: portrait) and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) {

	body.fixed .header {
		top: 30px;
	}

	body.fixed .header:before {
		content: '';
		position: fixed;
		top: -5px;
		left: 0;
		right: 0;
		background-color: inherit;
		height: 35px;
	}

}

body.white-bg {
	background-color: var(--grey-color-lvl-0);
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*:not(input):not(textarea):not(button):focus, #scrollbar a:focus svg {
	transition: all 0s;
	outline: 0;
	background-color: var(--focus-color);
	border-radius: 5px;
}

a {
	color: var(--main-color);
	cursor: pointer;
	text-decoration: none;
}

a:hover, a.active {
	color: var(--secondary-color);
}

::selection {
	background-color: var(--grey-color-lvl-6);
	color: var(--grey-color-lvl-1);
}

.site-content {
	background-color: var(--secondary-bg-color);
	padding-top: 0;
}

body.fixed .site-content {
	padding-top: 70px;
}

h1::selection,
section > h2::selection {
	text-shadow: 3px 3px 0px var(--alt-main-color);
}

h1, h2 {
	border-bottom: 1px solid var(--alt-main-color);
	color: var(--main-font-color);
	font: 500 34px/40px Futura;
	letter-spacing: 3px;
	margin: 0 0 20px;
	text-align: center;
	padding: 0 0 30px;
}

h1 {
	border-top: 1px solid var(--alt-main-color);
	padding: 30px 0;
}

section {
	padding: 30px calc(50vw - 335px);
}

section.light {
	background-color: var(--secondary-bg-color);
}

#home {
	background-color: var(--grey-color-lvl-0);
	padding: 0;
	box-sizing: border-box;
	min-height: calc(100vh - 70px);
	position: relative;
}

#home-logo {
	fill: url(#logo-gradient) var(--main-color);
	width: 500px;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	padding: 0 0 15px;
	border-bottom: 1px solid var(--alt-main-color);
	z-index: 3;
}

#home svg,
#home .icon {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@keyframes home-logo-appear {
	0% { transform: translateX(-50%) translateY(-50%) scale(200); }
	50% { transform: translateX(-50%) translateY(-50%) scale(4); }
	100% { transform: translateX(-50%) translateY(-50%) scale(1); }
}

#home > div {
	margin: 0 auto;
	max-width: 100%;
	width: 500px;
	z-index: 3;
	padding: 0;
	font: 400 13px/23px Avenir, sans-serif;
	color: var(--main-font-color);
	/*background-color: inherit;*/
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) scale(200);
	animation: home-logo-appear 1s ease-out forwards;
	z-index: 100000;
}

@keyframes home-logo-boom-effect {
	0% { transform: translateX(-50%) translateY(-50%) scale(0); opacity: .2; }
	30% { transform: translateX(-50%) translateY(-50%) scale(2); opacity: .08; }
	100% { transform: translateX(-50%) translateY(-50%) scale(2.2); opacity: 0; }
}

#home > div:after {
	content: "";
	position: absolute;
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background-color: var(--main-font-color);
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%) scale(0);
	z-index: 2;
	animation: home-logo-boom-effect .8s ease-out 1s;
	opacity: .25;
}

#website-desc {
	font: inherit;
	text-align: left;
	margin: 0;
	padding: 10px;
	z-index: 2;
	position: relative;
}

#website-desc:after {
	position: absolute;
	content: '';
	bottom: 0;
	height: 20px;
	width: 10px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--grey-color-lvl-0);
	z-index: -1;
}

#darkmode-alert {
	transition: right .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
	animation: darkmode-bg-blink 2s infinite .2s;
	padding: 5px 15px 5px 60px;
    border-radius: 2px !important;
    background-color: rgba(0, 0, 0, .8);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 250px;
    z-index: 99999;
	box-shadow: 0 10px 25px 2px rgba(0, 0, 0, .65);
	cursor: pointer;
	max-width: calc(100vw - 105px);
}

#darkmode-alert p {
	animation: darkmode-text-blink 2s infinite .2s;
	line-height: 20px;
	font-size: 14px;
	text-align: left;
	color: var(--main-color);
	min-height: 40px;
	margin: 0;
	padding: 0;
	max-width: calc(100vw - 105px);
}

#darkmode-alert svg {
	animation: darkmode-svg-blink 2s infinite .2s;
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-20px);
	height: 40px;
	width: 40px;
	margin-right: 5px;
	fill: var(--main-color);
	border: 0;
}

#darkmode-alert:hover, #darkmode-alert:hover p, #darkmode-alert:hover svg {
	animation: none;
}

#darkmode-alert:hover {
	right: -5px;
	background-color: rgba(0, 0, 0, .5);
	box-shadow: 0 5px 15px 1px rgba(0, 0, 0, .3);
}

#darkmode-alert:hover p, #darkmode-alert:hover svg {
	opacity: .15;
}

#darkmode-alert:hover:after {
	content: 'Masquer \203a';
	color: var(--secondary-color);
	text-transform: uppercase;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	font: 400 13px Futura;
	width: 250px;
	letter-spacing: 2px;
}

#darkmode-alert.hidden {
	animation: darkmode-hide .3s forwards;
}

#home .icon {
	display: block;
	margin: -20px auto 0;
	width: 50px;
	height: 50px;
	animation: scroll-animation 1s infinite ease-in-out;
	text-align: center;
	z-index: 1;
	position: relative;
}

@keyframes home-arrow-appear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#home .icon svg {
	width: 50px;
	height: 50px;
	fill: var(--alt-main-color);
	border: 0;
	opacity: 0;
	animation: home-arrow-appear 5s ease-out forwards 2s;
}

section p {
	font: 400 15px/28px Avenir, sans-serif;
	margin: 5px 20px;
	color: var(--main-font-color);
	padding: 25px 0;
	text-align: center;
}

section > * {
	margin-left: 20px;
	margin-right: 20px;
}


/* Header */

.header {
	transition: all 0.3s;
	background-color: var(--grey-color-lvl-0);
	height: 70px;
	left: 0;
	line-height: 70px;
	padding: 0 calc(50vw - 450px);
	position: relative;
	right: 0;
	top: 0;
	z-index: 9;
}

body.fixed .header {
	position: fixed;
}

#header-logo {
	border-radius: 50%;
	cursor: default;
	float: left;
	font: 400 45px/70px sans-serif;
	padding: 0;
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	text-align: center;
	width: 70px;
	transition: opacity .3s;
	opacity: 0;
}

body.fixed #header-logo,
body.fixed #header-icon {
	opacity: 1;
}

#header-logo svg {
	fill: url(#logo-gradient) var(--main-color);
	height: 30px;
}

.menu {
	display: block;
	font-size: 0;
	right: calc(50vw - 300px);
	position: absolute;
	transition: right .3s;
	overflow: hidden;
}

body.fixed .menu {
	right: calc(50vw - 450px);
}

@keyframes menu-a-appear {
	0% { bottom: -50px; opacity: 0; }
	50% { bottom: 10px; }
	100% { bottom: 0; opacity: 1; }
}

.menu a {
	transition: border-bottom .5s;
	color: var(--grey-color-lvl-1);
	display: inline-block;
	font: 400 13px 'Futura';
	letter-spacing: 2px;
	line-height: 65px;
	padding: 2px 20px;
	text-transform: uppercase;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	position: relative;
	bottom: -50px;
	opacity: 0;
}

.menu a:nth-child(1) {
	animation: menu-a-appear .3s ease-in-out 1.4s forwards;
}

.menu a:nth-child(2) {
	animation: menu-a-appear .3s ease-in-out 1.6s forwards;
}

.menu a:nth-child(3) {
	animation: menu-a-appear .3s ease-in-out 1.8s forwards;
}

.menu a:nth-child(4) {
	animation: menu-a-appear .3s ease-in-out 2s forwards;
}

.menu a > span {
	transition: opacity .2s, bottom .2s;
	position: absolute;
	bottom: -20px;
	left: 50%;
	display: block;
	height: 2px;
	background-color: var(--main-color);
	width: calc(100% - 40px);
	transform: translateX(-50%);
	opacity: 0;
}

.menu a > span.active {
	transition: opacity .2s, bottom .2s;
	bottom: 6px;
	opacity: 1;
}

.menu a:hover {
	color: var(--secondary-color);
}

.menu a:focus, .footer a:focus {
	background-color: inherit;
}

#header-logo:active {
	animation: header-logo-active .1s;
	background-color: var(--secondary-bg-color);
}



/* Footer */

.footer {
	color: var(--grey-color-lvl-3);
	font: 400 13px/90px Futura;
	letter-spacing: 1px;
	margin: 0;
	padding: 0 calc(50vw - 345px);
	text-transform: uppercase;
	background-color: var(--main-bg-color);
}

.footer #footer-logo {
	cursor: default;
	background-color: transparent;
	border: 0;
	border-radius: 50px;
	display: block;
	font: 400 45px/55px sans-serif;
	height: 55px;
	margin: 17px auto 0;
	padding: 0;
	text-align: center;
	width: 55px;
}

.footer #footer-logo:active {
	animation: footer-logo-active .1s;
	background-color: var(--secondary-bg-color);
}

.footer #footer-logo svg {
	fill: var(--grey-color-lvl-6);
	height: 30px;
}

.footer #footer-logo:hover svg,
.footer #footer-logo:active svg {
	fill: var(--grey-color-lvl-5);
}

.footer span.copyright, .footer span.legal {
	width: 190px;
	margin: -17px 0 0;
	padding: 0 10px;
}

.footer span.copyright {
	float: left;
	margin-left: 20px;
	text-align: left;
}

.footer span.legal {
	float: right;
	margin-right: 10px;
	text-align: right;
}

.footer .legal a {
	padding: 0 10px;
	display: inline-block;
}

.footer .legal a.active {
	background-color: var(--grey-color-lvl-0);
}

.footer .legal a:focus, .menu a:focus {
	border-radius: 0;
	outline: 3px solid hsla(207, 100%, 45%, .15);
	outline-offset: -6px;
}

#legal-notice {
	background-color: var(--grey-color-lvl-0);
	clear: both;
	color: var(--grey-color-lvl-4);
	font: 400 12px Avenir, sans-serif;
	margin: 0 0 10px;
	padding: 10px calc(50vw - 335px);
	text-align: justify;
	display: none;
}

#legal-notice a[target=_blank]:after {
	content: '\00a0';
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHN0eWxlPSJmaWxsOiM1MjcwODk7Ij4gIDxwYXRoIGQ9Ik0xNyAxN0gzVjNoNVYxSDNhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDE0YTIgMiAwIDAgMCAyLTJ2LTVoLTJ6Ii8+ICA8cGF0aCBkPSJNMTkgMWgtOGwzLjI5IDMuMjktNS43MyA1LjczIDEuNDIgMS40MiA1LjczLTUuNzNMMTkgOVYxeiIvPjwvc3ZnPg==) no-repeat center right;
	padding-right: 9px;
    height: 15px;
    display: inline-block;
    background-size: auto 9px;
    vertical-align: baseline;
}

#legal-notice summary {
	width: max-content;
	max-width: calc(100% - 40px);
	margin: 10px auto;
	display: block;
	text-align: center;
	font-size: 13px;
	cursor: pointer;
	color: var(--main-color);
	list-style: none;
	position: relative;
}

#legal-notice span {
	margin-right: 4px;
    display: inline-block;
	vertical-align: middle;
	width: 14px;
}

#legal-notice span:before, #legal-notice span:after {
	transition: transform .2s;
	content: '';
	width: 8px;
    height: 2px;
	background-color: var(--main-color);
	display: inline-block;
	margin: 0 -6px 4px;
}

#legal-notice span:before, #legal-notice [open] span:after {
	transform: rotate(45deg);
}

#legal-notice span:after, #legal-notice [open] span:before {
	transform: rotate(-45deg);
}

#legal-notice summary::-webkit-details-marker {
	display: none;
}

#legal-notice summary:hover span:before, #legal-notice summary:hover span:after, #legal-notice [open] span:before, #legal-notice [open] span:after {
	background-color: var(--secondary-color);
}

#legal-notice summary:hover, #legal-notice [open] summary {
	color: var(--secondary-color);
}

#privacy-policy > p:nth-child(2) {
	font-weight: 700;
}

#legal-notice p,
#privacy-policy ul {
	margin: 10px 20px;
	padding: 0;
}

#legal-notice hr {
	border: 0;
	border-top: 1px solid var(--grey-color-lvl-7);
	margin: 0 10px;
}

#privacy-policy ul {
	list-style: none;
	text-align: justify;
	padding-left: 30px;
}

#privacy-policy ul li:before {
	content: '—';
	margin-right: 8px;
	margin-left: -20px;
	display: inline-block;
}






/* Section présentation */

#intro {
	padding-top: 10px;
	overflow: hidden;
	background-color: var(--main-bg-color);
}

#intro p {
	text-align: justify;
}

#profile-img {
	background: url(../img/pp.jpg) center 0/300px #d5d2ca;
	border-radius: 50%;
	height: 300px;
	margin: 0 auto 40px;
	transition: box-shadow 0.3s;
	width: 300px;
}

#school-diplomas {
	/*background: url(../img/intro-background.jpg) no-repeat center center;
	background-size: cover;*/
	margin-top: -50px;
	position: relative;
}

#school-diplomas section {
	background: linear-gradient(180deg, var(--main-bg-color) 15%, var(--secondary-bg-color) /*hsla(0, 0%, 94%, .75)*/ 75%);
	padding-bottom: 150px;
}

#school-diplomas h3 {
	font-family: Futura;
	font-weight: 400;
	margin-bottom: 0;
	letter-spacing: .5px;
}

#school-diplomas :nth-child(5),
#school-diplomas :nth-child(6) {
	opacity: .85;
}

#school-diplomas :nth-child(7),
#school-diplomas :nth-child(8) {
	opacity: .7;
}

#school-diplomas :nth-child(9),
#school-diplomas :nth-child(10) {
	opacity: .55;
}

#school-diplomas p {
	text-align: right;
	line-height: 23px;
	padding: 0;
	margin: 0;
}

#school-diplomas .icon {
	height: 50px;
	width: 50px;
	fill: var(--main-color);
	float: left;
	margin-top: 15px;
}


#pro-exp {
	position: relative;
}

#linkedin-link {
	padding-top: 7px;
}

#pro-exp > div > div svg:not(#devultra-logo), #pro-exp > div > div svg#devultra-logo path:last-child {
	translate: fill .2s;
	fill: var(--main-font-color);
}

#pro-exp > div > div svg#devultra-logo {
	translate: fill .2s;
	fill: url(#devultra-logo-gradient) var(--main-font-color);
}

#pro-exp > div > div.visible svg:not(#devultra-logo), #pro-exp > div > div.visible svg#devultra-logo path:last-child {
	fill: url(#gradient) var(--main-color);
}

#pro-exp > div > div.visible svg#devultra-logo {
	fill: url(#devultra-logo-gradient-hover) var(--main-color);
}

#pro-exp > div:first-child {
	position: absolute;
	top: -150px;
	left: -25vw;
	background-color: var(--main-bg-color);
	height: 500px;
	width: 150vw;
	margin: 0;
	transform: rotate(10deg);
	z-index: 1;
}

#pro-exp > div:last-child {
	position: relative;
	z-index: 2;
	margin-top: -175px;
}

#pro-exp > div > p {
	line-height: 23px;
	margin-bottom: 30px;
}

#pro-exp > div > div {
	transition: all .2s;
	margin: 0 -10px 0;
	padding: 5px 10px 50px;
	text-align: center;
	opacity: .5;
}

#pro-exp h3:before {
	content: '';
	border-top: 1px solid var(--main-color);
	width: 100%;
	z-index: 1;
	position: absolute;
	display: block;
	left: 0;
	top: 50%;
}

#pro-exp h3 > span {
	display: inline-block;
	padding: 0 5px;
	background-color: var(--main-bg-color);
	border: 0;
	position: relative;
	z-index: 2;
}

#pro-exp h3 {
	margin: 0;
	padding: 0;
	font: 400 14px Futura;
	color: var(--main-font-color);
	text-transform: uppercase;
	letter-spacing: 2px;
	position: relative;
	z-index: 2;
}

#pro-exp .visible {
	opacity: 1;
}

#pro-exp > div > div > p {
	padding: 5px 0;
	line-height: 21px;
	color: var(--main-font-color);
	text-align: center;
}

#pro-exp p {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

#pro-exp div > *:not(p) > a {
	text-align: right;
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
	line-height: 0;
	margin: 0 0 15px;
}

#scrollbar {
	position: relative;
	margin: 0 0 0 -20px;
	width: calc(100% + 40px);
}

#scrollbar > div {
	height: 110px;
	line-height: 120px;
	overflow-x: auto;
	font-size: 0;
	padding: 5px 0;
	text-align: left;
}

#scrollbar:before, #scrollbar:after {
	content: '';
    position: absolute;
    right: 0;
    width: 20px;
    height: 110px;
	top: 5px;
	z-index: 1;
}

#scrollbar:before {
	background: linear-gradient(90deg, var(--main-bg-color) 25%, var(--transparent-grey-color-lvl-8));
    left: 0;
}

#scrollbar:after {
	background: linear-gradient(-90deg, var(--main-bg-color) 25%, var(--transparent-grey-color-lvl-8));
    right: 0;
}

#scrollbar > div::-webkit-scrollbar {
	display: none;
}

#scrollbar > div::-moz-scrollbar {
	display: none;
}

#scrollbar > div {
	-ms-overflow-style: none;
}

#scrollbar ul {
	list-style: none;
	display: block;
	top: 0;
	left: 0;
	width: 671px;
	height: 110px;
	margin: 0;
	padding: 0;
}

#scrollbar li {
	display: inline-block;
	color: var(--grey-color-lvl-1);
	cursor: pointer;
	text-align: center;
	height: 100px;
	padding: 0 5px;
	margin: 0 32px;
	line-height: 100px;
	vertical-align: middle;
	position: relative;
}

#scrollbar ul li:first-child {
	margin-left: 20px;
}

#scrollbar ul li:last-child {
	margin-right: 20px;
}

#scrollbar svg {
	transition: opacity .3s;
	display: inline-block;
	vertical-align: middle;
	opacity: .75;
}

#scrollbar a:hover svg {
	opacity: 1;
}

#scrollbar a:focus svg {
	overflow: visible;
}

#rollingdeck-website .svg-color-1 {
	fill: #009888;
}

#rollingdeck-website .svg-color-2 {
	fill: #ff4500;
}

#rollingdeck-website .svg-color-3, #piscinelleaccessoires-website .svg-color-2 {
	fill: var(--grey-color-lvl-1);
}

#piscinelle-website svg {
	height: 75px;
}

#piscinelle-website .svg-color-1 {
	fill: var(--grey-color-lvl-2);
}

#rollingdeck-website svg,
#piscinelleaccessoires-website svg {
	width: 200px;
}

#piscinelleaccessoires-website .svg-color-1 {
	fill: #e2007a;
}

/* Section réalisations */

#project {
	clear: both;
	transform-style: preserve-3d;
}

#project section {
	background-color: transparent;
}

#project > a {
	transition: background-color .2s, height .5s ease;
	display: block;
	padding: 20px calc(50vw - 335px);
	cursor: pointer;
	color: var(--grey-color-lvl-4);
	height: 50px;
	overflow: hidden;
	z-index: 1;
	position: relative;
}

#project > a:not(.active):focus, #project > a.active[href=none]:focus {
	outline: 0;
}

#project > a:not(.active):not(:hover):focus {
	background-color: transparent;
}

#project > a:not(.active):focus svg {
	background-color: hsla(207, 100%, 45%, .15);
	border-radius: 5px;
}

#project > a:hover {
	background-color: var(--grey-color-lvl-0);
}

#project > a:active {
	background-color: var(--grey-color-lvl-7);
}

#project > a.active {
	transition: margin .3s ease .2s, padding .3s ease .2s, width .3s ease .2s, background-color .3s ease .2s, height .2s ease, box-shadow .2s ease;
	cursor: pointer;
	height: 300px;
	width: 650px;
	max-width: calc(100% - 20px);
	margin: 0 auto;
	padding: 20px 0;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
	z-index: 5;
}

#project > a.active * {
	cursor: pointer;
}

#project > a.active:after {
	transition: font-size .3s;
	content: 'Visiter ce site \276f';
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	text-align: center;
	font: 400 15px Futura;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--white-color);
	padding: 0 15px;
	border: 0;
}

#project > a.active[href=none] {
	cursor: not-allowed;
}

#project > a.active[href=none] * {
	cursor: not-allowed;
}

#project > a.active[href=none]:after {
	content: 'Bientôt disponible';
	text-decoration: line-through;
	color: rgba(225, 225, 225, .5);
}

#project > a.active[href=none].run-error-blinking:after {
	animation: error-blink .15s 5;
}

#project > a.active:hover:after, #project > a.active:focus:after {
	font-size: 18px;
}

#project > a.active:hover, #project > a.active:focus {
	box-shadow: 0 21px 45px rgba(0, 0, 0, .25);
}

#project > a.active:focus {
	outline: 2px solid hsla(0, 100%, 100%, .25);
	outline-offset: -5px;
	border-radius: 0;
}

#project h3 {
	color: inherit;
	line-height: 50px;
	margin: 0 20px;
	text-align: center;
	height: 50px;
	font-size: 0;
}

#project div {
	color: var(--white-color);
	opacity: 0;
	display: none;
}

#project > a.active div {
	animation: project-text-appear .3s ease .55s forwards;
	display: block;
}

#project p {
	cursor: text;
	margin: 0 10px;
	padding: 20px 0;
	text-align: left;
}

#project svg {
	fill: var(--grey-color-lvl-4);
	max-width: 100%;
	display: inline-block;
	vertical-align: middle;
}

#project > a.active svg {
	fill: var(--white-color);
}

#project > a:not(.active) .shine {
	display: none;
}

#project > a.active .shine {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(45deg, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, 0) 60%);
}

#project span, #project time {
	display: block;
	padding: 2px 10px;
}

#project span:before, #project time:before {
	content: '';
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: text-bottom;
	margin-right: 5px;
}

#project .project-year:before {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNy4zMzMzMzIgMzguNjY2NjY4Ij48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMCwzOC42NjY2NjcpIj48cGF0aCBzdHlsZT0iZmlsbDojZmZmIiBkPSJtIDEzLjI2MzE2LDIyLjEzMTU4IGggMS40NzM2OCBWIDE0LjgwNTI2IEwgMTkuNzEwNTMsOS42NTM5NDcgMTguNjc4OTUsOC41ODU1MjYgMTMuNDg0MjEsMTMuOTY1NzkgQyAxMy4zMzY4NCwxNC4wODAyNiAxMy4yNjMxNiwxNC4yNzEwNSAxMy4yNjMxNiwxNC41IFogTSAxNCwyNi43MTA1MyBDIDcuNTE1Nzg5LDI2LjcxMDUzIDIuMjEwNTI2LDIxLjIxNTc5IDIuMjEwNTI2LDE0LjUgMi4yMTA1MjYsNy43ODQyMSA3LjUxNTc4OSwyLjI4OTQ3MyAxNCwyLjI4OTQ3MyBjIDYuNDg0MjEsMCAxMS43ODk0Nyw1LjQ5NDczNyAxMS43ODk0NywxMi4yMTA1MjcgMCw2LjcxNTc5IC01LjMwNTI2LDEyLjIxMDUzIC0xMS43ODk0NywxMi4yMTA1MyB6IE0gMTQsMjkgQyAyMS43MzY4NCwyOSAyOCwyMi41MTMxNiAyOCwxNC41IDI4LDYuNDg2ODQzIDIxLjczNjg0LDAgMTQsMCA2LjI2MzE1OCwwIDAsNi40ODY4NDMgMCwxNC41IDAsMjIuNTEzMTYgNi4yNjMxNTgsMjkgMTQsMjkgWiIvPjwvZz48L3N2Zz4=) no-repeat center;
}

#project .website-href:before {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC42NjY2NjggMzguNjY2NjY4Ij48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMCwzOC42NjY2NjcpIj48cGF0aCBzdHlsZT0iZmlsbDojZmZmIiBkPSJtIDE2LjU5ODY5LDIuNDgwMjYzIGMgMi40ODAyNiwzLjA1MjYzIDUuMjI3NjMsNi45MDY1NzggNS40OTQ3MywxMS4yNTY1NzcgaCA0LjU3ODk1IEMgMjYuMzI4OTUsOC4wNTEzMTYgMjIuMDkzNDIsMy40MzQyMSAxNi41OTg2OSwyLjQ4MDI2MyBaIE0gMi4zMjc2MzIsMTMuNzM2ODQgSCA2LjkwNjU3OSBDIDcuMjExODQzLDkuMzg2ODQxIDkuOTIxMDUzLDUuNTMyODkzIDEyLjQwMTMyLDIuNDgwMjYzIDYuOTA2NTc5LDMuNDM0MjEgMi42NzEwNTMsOC4wNTEzMTYgMi4zMjc2MzIsMTMuNzM2ODQgWiBNIDEyLjQwMTMyLDI2LjUxOTc0IEMgOS45MjEwNTMsMjMuNDY3MSA3LjE3MzY4NCwxOS42MTMxNiA2LjkwNjU3OSwxNS4yNjMxNiBIIDIuMzI3NjMyIGMgMC4zNDM0MjEsNS42ODU1MiA0LjU3ODk0NywxMC4zMDI2MyAxMC4wNzM2ODgsMTEuMjU2NTggeiBtIDIuODYxODQsLTEyLjc4MjkgaCA1LjMwMzk1IEMgMjAuMjYxODQsOS44MDY1NzggMTcuNzA1MjYsNi4yNTc4OTMgMTUuMjYzMTYsMy4yNDM0MiBaIG0gLTEuNTI2MzIsMCBWIDMuMjQzNDIgQyAxMS4yOTQ3NCw2LjI1Nzg5MyA4LjczODE1OCw5LjgwNjU3OCA4LjQzMjg5NSwxMy43MzY4NCBaIG0gMS41MjYzMiwxMi4wMTk3NCBjIDIuNDQyMSwtMy4wMTQ0OCA0Ljk5ODY4LC02LjUyNSA1LjMwMzk1LC0xMC40OTM0MiBIIDE1LjI2MzE2IFogTSAxMy43MzY4NCwxNS4yNjMxNiBIIDguNDMyODk1IGMgMC4zMDUyNjMsMy45MzAyNiAyLjg2MTg0NSw3LjQ3ODk0IDUuMzAzOTQ1LDEwLjQ5MzQyIHogbSAxMi45MzU1MywwIGggLTQuNTc4OTUgYyAtMC4yNjcxLDQuMzUgLTMuMDE0NDcsOC4yMDM5NCAtNS40OTQ3MywxMS4yNTY1OCA1LjQ5NDczLC0wLjk1Mzk1IDkuNzMwMjYsLTUuNTcxMDYgMTAuMDczNjgsLTExLjI1NjU4IHogTSAxNC41LDI5IEMgNi40ODY4NDIsMjkgMCwyMi41MTMxNiAwLDE0LjUgMCw2LjQ4Njg0MyA2LjQ4Njg0MiwwIDE0LjUsMCAyMi41MTMxNiwwIDI5LDYuNDg2ODQzIDI5LDE0LjUgMjksMjIuNTEzMTYgMjIuNTEzMTYsMjkgMTQuNSwyOSBaIi8+PC9nPjwvc3ZnPg==) no-repeat center;
}

#project .team:before {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNiAzOC42NjY2NjgiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDM4LjY2NjY2NykiPjxwYXRoIHN0eWxlPSJmaWxsOiNmZmYiIGQ9Ik0gMjAuNTg4MTUsMjAuMyBIIDIyLjI2MDggViAxNS4zNyBIIDI3IFYgMTMuNjMgSCAyMi4yNjA4IFYgOC43IGggLTEuNjcyNjUgdiA0LjkzIGggLTQuNzM5MiB2IDEuNzQgaCA0LjczOTIgeiBNIDYuODE0NTMxLDIzLjIgYyAwLjY4MTQ1NCwwIDEuMzYyOTA3LC0wLjEyODg5IDIuMDQ0MzYsLTAuMjU3NzggQyA5Ljg1MDA5NSwyMi42MiAxMC43MTc0LDIyLjE2ODg5IDExLjQ2MDgsMjEuNTI0NDQgYyAwLjE4NTg1LC0wLjE5MzMzIDAuMzA5NzYsLTAuNDUxMTEgMC4zNzE3MSwtMC43MDg4OCBsIDEuNzM0NiwtNy42Njg4OSBjIDAsLTAuMDY0NDUgMC4wNjE5NSwtMC4xOTMzNCAwLjA2MTk1LC0wLjMyMjIzIDAsLTAuNzA4ODggLTAuNTU3NTUsLTEuMjg4ODggLTEuMjM5LC0xLjI4ODg4IC0wLjU1NzU1LDAgLTEuMDUzMTYsMC40NTExMSAtMS4xNzcwNiwwLjk2NjY2IEwgOS45MTIwNDYsMTguMTA4ODkgViAwIEggNy40MzQwMzQgViAxMS42IEggNi4xOTUwMjkgViAwIEggMy43MTcwMTcgViAxOC4wNDQ0NCBMIDIuNDE2MDYxLDEyLjQzNzc4IEMgMi4yOTIxNjEsMTEuOTIyMjIgMS43OTY1NTgsMTEuNDcxMTEgMS4yMzkwMDYsMTEuNDcxMTEgMC41NTc1NTI2LDExLjQ3MTExIDAsMTIuMDUxMTEgMCwxMi43NiBjIDAsMC4xMjg4OSAwLjA2MTk1MDI5LDAuMjU3NzggMC4wNjE5NTAyOSwwLjMyMjIyIEwgMS43OTY1NTgsMjAuNzUxMTEgQyAxLjg1ODUwOSwyMS4wMDg4OSAxLjk4MjQwOSwyMS4yNjY2NyAyLjE2ODI2LDIxLjQ2IDIuOTExNjYzLDIyLjEwNDQ0IDMuNzc4OTY4LDIyLjYyIDQuNzcwMTcyLDIyLjg3Nzc4IDUuNDUxNjI1LDIzLjA3MTExIDYuMTMzMDc4LDIzLjIgNi44MTQ1MzEsMjMuMiBaIG0gMCw1LjggYyAxLjM2ODU2NSwwIDIuNDc4MDEyLC0xLjE1NDExIDIuNDc4MDEyLC0yLjU3Nzc4IDAsLTEuNDIzNjYgLTEuMTA5NDQ3LC0yLjU3Nzc4IC0yLjQ3ODAxMiwtMi41Nzc3OCAtMS4zNjg1NjQsMCAtMi40NzgwMTEsMS4xNTQxMiAtMi40NzgwMTEsMi41Nzc3OCBDIDQuMzM2NTIsMjcuODQ1ODkgNS40NDU5NjcsMjkgNi44MTQ1MzEsMjkgWiIvPjwvZz48L3N2Zz4=) no-repeat center;
}

#project .srv-info:before {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNy4zMzMzMzIgMzguNjY2NjY4Ij48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMCwzOC42NjY2NjcpIj48cGF0aCBzdHlsZT0iZmlsbDojZmZmIiBkPSJtIDI0Ljg2MDczLDIyLjc1Njk1IC0yLjI2MTMyLDAuNjI1MDMgLTAuNjA1MTQsMi4zMzU2MyAyLjg2NjQ2LDIuOTYwNjYgYyAtMS43MTk4NywwLjY1NzkzIC0zLjYzMDg1LDAuMjk2MDcgLTUuMDAwMzgsLTAuOTg2ODggLTEuMzM3NjksLTEuMjgyOTUgLTEuOTEwOTgsLTMuMjIzODMgLTEuNDAxMzgsLTUuMDMzMTMgTCA2LjEwMTMyMSw5Ljg5NDUyNyBDIDQuMzQ5NTkzLDEwLjM4Nzk3IDIuNDcwNDY3LDkuNzk1ODM5IDEuMjYwMTgyLDguNDE0MTk4IDAuMDQ5ODk3Nyw3LjAzMjU1NiAtMC4zMzIyOTc1LDUuMDU4NzgyIDAuMzA0Njk0NSwzLjI4MjM4NiBMIDMuMTcxMTU4LDYuMjQzMDQ2IDUuNDAwNjMsNS42MTgwMTkgNi4wMDU3NzMsMy4yODIzODYgMy4xMzkzMDksMC4zMjE3MjQ1IEMgNC44NTkxODcsLTAuMzM2MTk4OCA2Ljc3MDE2MywwLjAyNTY1OTAyIDguMTM5Njk2LDEuMzA4NjEyIDkuNDc3Mzc4LDIuNTkxNTY1IDEwLjA1MDY3LDQuNTMyNDQzIDkuNTQxMDc4LDYuMzQxNzM0IEwgMjEuODk4NzIsMTkuMTA1NDcgYyAxLjc1MTczLC0wLjQ5MzQ0IDMuNjMwODUsMC4wOTg2OSA0Ljg0MTE0LDEuNDgwMzMgMS4yMTAyOSwxLjM4MTY0IDEuNTkyNDgsMy4zNTU0MiAwLjk1NTQ5LDUuMTMxODEgeiIvPjwvZz48L3N2Zz4=) no-repeat center;
}

#project .db-info:before {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzOC42NjY2NjgiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDM4LjY2NjY2NykiPjxwYXRoIHN0eWxlPSJmaWxsOiNmZmYiIGQ9Ik0gMCw5LjE1Nzg5NSBDIDAsNy40Nzg5NDcgNS40LDYuMTA1MjYzIDEyLDYuMTA1MjYzIGMgNi42LDAgMTIsMS4zNzM2ODQgMTIsMy4wNTI2MzIgViAzLjA1MjYzIEMgMjQsMS4zNzM2ODMgMTguNiwwIDEyLDAgNS40LDAgMCwxLjM3MzY4MyAwLDMuMDUyNjMgWiBtIDAsNy42MzE1NzUgYyAwLC0xLjY3ODk0IDUuNCwtMy4wNTI2MyAxMiwtMy4wNTI2MyA2LjYsMCAxMiwxLjM3MzY5IDEyLDMuMDUyNjMgViAxMC42ODQyMSBDIDI0LDkuMDA1MjYzIDE4LjYsNy42MzE1NzkgMTIsNy42MzE1NzkgYyAtNi42LDAgLTEyLDEuMzczNjg0IC0xMiwzLjA1MjYzMSB6IG0gMCw3LjYzMTU4IGMgMCwtMS42Nzg5NSA1LjQsLTMuMDUyNjMgMTIsLTMuMDUyNjMgNi42LDAgMTIsMS4zNzM2OCAxMiwzLjA1MjYzIHYgLTYuMTA1MjYgYyAwLC0xLjY3ODk1IC01LjQsLTMuMDUyNjMgLTEyLC0zLjA1MjYzIC02LjYsMCAtMTIsMS4zNzM2OCAtMTIsMy4wNTI2MyB6IE0gMTIsMjkgYyA2LjYyNzQzLDAgMTIsLTEuMzY2NzEgMTIsLTMuMDUyNjMgMCwtMS42ODU5MiAtNS4zNzI1NywtMy4wNTI2MyAtMTIsLTMuMDUyNjMgLTYuNjI3NDI5LDAgLTEyLDEuMzY2NzEgLTEyLDMuMDUyNjMgQyAwLDI3LjYzMzI5IDUuMzcyNTcxLDI5IDEyLDI5IFoiLz48L2c+PC9zdmc+) no-repeat center;
}

#project .responsive:before {
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzNC42NjY2NjggMzguNjY2NjY4Ij48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLjMzMzMzMzMsMCwwLC0xLjMzMzMzMzMsMCwzOC42NjY2NjcpIj48cGF0aCBzdHlsZT0iZmlsbDojZmZmIiBkPSJtIDIzLjM0NjQxLDE2LjUxNjcgMC4xODkzNiwtMC40NDY0NCBjIDAuMzYxMDEsLTEuNjg0ODggMC40MDQxNywtMy40NzAyMSAwLjA3Mzk3LC01LjI3MzE3IEMgMjIuOTk5NSw3LjQ2NTg0NiAyMS4xOTQwMiw0LjY0Njc1NyAxOC43NTI2NCwyLjczMDg3OCBMIDIwLjU4NjgyLDAgbCAtNy4wNjk5MywxLjM0NzU5MSAxLjMyMDk4LDcuMjExODMgMS41ODc3NywtMi4zNjM5NDQgYyAxLjU5NjA5LDEuMjk1MTUgMi43NDE1MSwzLjE3MzcwOCAzLjE0NDE3LDUuMzcxNzAzIGwgLTAuMDE2NzgsMS4wNzk5MyB6IE0gMjAuMDg2OTksMjUuMDI4NTUgMi40OTI3MTcsNy4wODA3NjcgNS45NzEwNjgsMy41MzI2MDMgOC4yMDI5MTUsNS44MDkzNjcgNi40MDU4MjYsNy42NDI1NjQgbCAwLjgxMTYsMC44Mjc5MDggMS43OTcwMTgsLTEuODMzMTk5IDIuMjYwODQ2LDIuMzA2MjY4IC0xLjc5NzAyMywxLjgzMzI2OSAwLjgxMTYwMywwLjgyNzg0IDEuNzk3MDksLTEuODMzMjAxIDIuMjYwODQsMi4zMDYzNDEgLTEuNzk3MDksMS44MzMyIDAuODExNjcsMC44Mjc5IDEuNzk3MDIsLTEuODMzMTkgMi4yNjA4NCwyLjMwNjI2IC0xLjc5NzAyLDEuODMzMjcgMC44MTE1MywwLjgyNzg0IDEuNzk3MDksLTEuODMzMiAyLjI2MDkyLDIuMzA2MzQgLTEuNzk3MDksMS44MzMyIDAuODQwNTksMC44NTc0MSAxLjc5NzA5LC0xLjgzMzIgMi4yMzE4NSwyLjI3Njc3IHogbSAtN2UtNSwyLjUxMzMgTCAyNiwyMS40NTA4MSA1Ljk0MjA3NCwwLjk4OTcyNjUgMCw3LjA1MTE5MSBaIE0gNS45MzAwNzIsMjkgMTIuOTk5OTMsMjcuNjUyNDEgMTEuNjc4OTUsMjAuNDQwNSAxMC4wOTExOCwyMi44MDQ1MiBDIDguNDk1MTY0LDIxLjUwOTM3IDcuMzQ5NjY5LDE5LjYzMDc0IDYuOTQ3MDg1LDE3LjQzMjgyIGwgMC4wMTY3MDMsLTEuMDggLTMuNzkzMzc1LC0zLjg2OTUyIC0wLjE4OTI5LDAuNDQ2NDQgYyAtMC4zNjEwODEsMS42ODQ4OCAtMC40MDQyNDYsMy40NzAxMyAtMC4wNzM5NjYsNS4yNzMwOSAwLjYxMDE2NSwzLjMzMTMyIDIuNDE1NjQzLDYuMTUwMzQgNC44NTcwOTYsOC4wNjYyMiB6Ii8+PC9nPjwvc3ZnPg==) no-repeat center;
}


/* BAZ Consulting */

#bazconsulting-project svg {
	height: 45px;
}

#bazconsulting-project:not(.active):hover .svg-color-1 {
	fill: var(--grey-color-lvl-4);
}

#bazconsulting-project:not(.active):hover .svg-color-2 {
	fill: var(--bazconsulting-project-main-color);
}

#bazconsulting-project:not(.active):hover .svg-color-3 {
	fill: var(--bazconsulting-project-secondary-color);
}

#bazconsulting-project.active {
	background: linear-gradient(45deg, var(--bazconsulting-project-transparent-bg-color) 0, var(--bazconsulting-project-bg-color) 450px), url(../img/bazconsulting.png) no-repeat top left / auto 340px var(--bazconsulting-project-bg-color);
}


/* The Spoon */

#thespoon-project svg {
	height: 38px;
}

#thespoon-project:not(.active):hover .svg-color-1 {
	fill: var(--thespoon-project-main-color);
}

#thespoon-project:not(.active):hover .svg-color-2 {
	fill: var(--grey-color-lvl-4);
}

#thespoon-project.active {
	background: linear-gradient(45deg, var(--thespoon-project-transparent-bg-color) 0, var(--thespoon-project-bg-color) 450px), url(../img/thespoon.png) no-repeat top left / auto 340px var(--thespoon-project-bg-color);
}


/* Mastermind */

#mastermind-project svg {
	height: 50px;
}

#mastermind-project:not(.active):hover .svg-color-1 {
	fill: var(--mastermind-project-main-color);
}

#mastermind-project.active {
	background: linear-gradient(45deg, var(--mastermind-project-transparent-bg-color) 0, var(--mastermind-project-bg-color) 450px), url(../img/mastermind.png) no-repeat top left / auto 340px var(--mastermind-project-bg-color);
}


/* Touitteur */

#touitteur-project svg {
	height: 40px;
}

#touitteur-project:not(.active):hover .svg-color-1 {
	fill: var(--touitteur-project-main-color);
}

#touitteur-project.active {
	background: linear-gradient(45deg, var(--touitteur-project-transparent-bg-color) 0, var(--touitteur-project-bg-color) 450px), url(../img/touitteur.png) no-repeat top left / auto 340px var(--touitteur-project-bg-color);
}












/* Section compétences */

#skill {
	margin-top: 60px;
	min-height: 400px;
	overflow: hidden;
	position: relative;
	background-color: transparent;
}

#skill.active > div:first-child {
	transition: all .3s ease-in-out 1.5s, background 1.5s ease-in-out;
	position: absolute;
	top: -30px;
	left: 50%;
	width: 200%;
	height: 150px;
	margin: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, 0));
	transform: translateX(-50%) rotate(1deg);
}

#skill:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%/*calc(100% - 6px)*/;
	background: radial-gradient(ellipse at 20% 100%, #6441A4, #0c1e3f 45%, #111);
	z-index: 0;
	/*border-top: 3px solid var(--grey-color-lvl-0);
	border-bottom: 3px solid rgba(0, 0, 0, .35);*/
}

#skill:not(.active) > div:first-child {
	transition: all .3s ease-in-out, background 1.5s ease-in-out .3s;
	position: absolute;
	background-color: var(--main-bg-color);
	height: 100%;
	top: 0;
	left: 0;
	width: 200%;
	margin: 0;
	z-index: 7;
	transform: translateX(-50%);
	opacity: .9;
}

#skill h2 {
	transition: all 1.5s ease-in-out;
	z-index: 8;
}

#skill.active h2 {
	color: hsl(210, 9%, 82%);
	border-bottom-color: hsl(207, 25%, 35%);
}

@keyframes space-bg {
	0% { opacity: .1; }
	50% { opacity: .5; }
	100% { opacity: .1; }
}

#skill:after {
	animation: space-bg 30s ease-in infinite;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(ellipse at 20% 100%, #ff9200, rgba(255, 255, 255, .15) 25%, rgba(255, 255, 255, 0));
	z-index: 1;
}

#skill * {
	z-index: 3;
	position: relative;
}

#skill-list {
	padding: 0;
	margin: 0;
	list-style: none;
	top: 140px;
	height: 280px;
	max-width: calc(100% - 40px);
	width: 1000px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute !important;
}

#skill-list li {
	width: 3px;
	height: 3px;
	border-radius: 10px;
	background-color: #fff;
	position: absolute !important;
	transition: box-shadow .5s;
	font-size: 0;
}

@keyframes skill-label-appear {
	0% { opacity: 0; transform: scale(.1); }
	75% { opacity: 1; transform: scale(1.2); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes skill-star-blinking {
	0% { box-shadow: none; }
	10% { box-shadow: 0 0 10px 2px #fff; }
	50% { box-shadow: 0 0 10px 2px #fff; }
	100% { box-shadow: none; }
}

#skill-list li.displayed {
	animation: skill-star-blinking 1s ease-out;
}

#skill-list li.displayed:before {
	content: attr(data-label);
	color: rgba(255, 255, 255, .75);
	font-family: Futura;
	font-size: 13px;
	letter-spacing: 1px;
	position: absolute !important;
	cursor: default;
	transition: all .3s;
	border-radius: 2px;
	padding: 1px 3px;
	opacity: 0;
	transform: scale(.1);
	animation: skill-label-appear .3s ease-in-out .5s forwards;
	left: 5px;
	top: 2px;
	width: fit-content;
}

#skill-list li.displayed:hover {
	box-shadow: 0 0 10px 2px #fff;
}

#skill-list li.displayed:hover:before {
	color: #fff;
	font-size: 15px;
	z-index: 9;
	background-color: #000;
}

@keyframes star-scrolling {
	0 { transform: translateY(0px); }
	100% { transform: translateY(-2000px); }
}

#star-area {
	width: 1px;
	height: 1px;
	animation: star-scrolling 180s linear infinite;
	z-index: 2;
	left: 0;
	top: 0;
	position: absolute !important;
	box-shadow: 343px 1717px #FFF, 763px 92px #FFF, 152px 705px #FFF, 1792px 262px #FFF, 1569px 1434px #FFF, 142px 1058px #FFF, 657px 266px #FFF, 769px 1371px #FFF, 1682px 83px #FFF, 78px 1163px #FFF, 1149px 1642px #FFF, 1673px 1789px #FFF, 294px 678px #FFF, 1559px 924px #FFF, 107px 1916px #FFF, 110px 1989px #FFF, 423px 472px #FFF, 451px 288px #FFF, 917px 1395px #FFF, 1004px 188px #FFF, 1055px 692px #FFF, 1056px 196px #FFF, 206px 600px #FFF, 262px 1578px #FFF, 1956px 988px #FFF, 204px 232px #FFF, 1561px 1710px #FFF, 363px 173px #FFF, 495px 1124px #FFF, 353px 1287px #FFF, 1129px 401px #FFF, 252px 1085px #FFF, 1208px 1380px #FFF, 657px 713px #FFF, 1971px 1646px #FFF, 1188px 420px #FFF, 1135px 377px #FFF, 1631px 1322px #FFF, 1214px 26px #FFF, 221px 1399px #FFF, 1860px 366px #FFF, 199px 316px #FFF, 443px 58px #FFF, 35px 1328px #FFF, 258px 1813px #FFF, 142px 1655px #FFF, 1744px 1939px #FFF, 540px 1874px #FFF, 192px 720px #FFF, 1550px 957px #FFF, 1648px 1979px #FFF, 121px 1336px #FFF, 1661px 526px #FFF, 1269px 64px #FFF, 1720px 1148px #FFF, 440px 1055px #FFF, 145px 1439px #FFF, 1150px 744px #FFF, 1126px 1806px #FFF, 27px 1340px #FFF, 1268px 1369px #FFF, 607px 499px #FFF, 1029px 1337px #FFF, 1468px 1831px #FFF, 1482px 299px #FFF, 689px 1453px #FFF, 90px 1443px #FFF, 498px 64px #FFF, 1977px 1215px #FFF, 1187px 323px #FFF, 1433px 1818px #FFF, 175px 72px #FFF, 58px 132px #FFF, 1534px 698px #FFF, 1863px 1170px #FFF, 794px 704px #FFF, 276px 1892px #FFF, 1051px 784px #FFF, 1015px 472px #FFF, 25px 297px #FFF, 730px 504px #FFF, 1996px 1601px #FFF, 318px 1062px #FFF, 1591px 963px #FFF, 1272px 1366px #FFF, 166px 1636px #FFF, 1310px 1359px #FFF, 1431px 1389px #FFF, 248px 665px #FFF, 257px 1913px #FFF, 1039px 791px #FFF, 1716px 228px #FFF, 1525px 1222px #FFF, 1676px 1956px #FFF, 1683px 626px #FFF, 1344px 1494px #FFF, 747px 939px #FFF, 233px 1125px #FFF, 1150px 1908px #FFF, 1567px 838px #FFF, 1122px 1246px #FFF, 494px 1112px #FFF, 1518px 1317px #FFF, 1137px 1893px #FFF, 220px 1955px #FFF, 1779px 102px #FFF, 111px 1818px #FFF, 1835px 203px #FFF, 857px 765px #FFF, 855px 859px #FFF, 586px 407px #FFF, 1559px 81px #FFF, 1788px 1293px #FFF, 1771px 1413px #FFF, 484px 514px #FFF, 1426px 849px #FFF, 1022px 1784px #FFF, 638px 431px #FFF, 593px 330px #FFF, 1466px 187px #FFF, 4px 1935px #FFF, 1876px 938px #FFF, 1567px 1807px #FFF, 510px 131px #FFF, 1431px 1993px #FFF, 923px 316px #FFF, 1818px 1284px #FFF, 850px 1816px #FFF, 1536px 807px #FFF, 163px 446px #FFF, 1956px 926px #FFF, 1875px 954px #FFF, 1783px 1375px #FFF, 1579px 1469px #FFF, 1962px 111px #FFF, 1787px 1868px #FFF, 1080px 701px #FFF, 1283px 1975px #FFF, 231px 951px #FFF, 1968px 1579px #FFF, 907px 425px #FFF, 923px 1018px #FFF, 1964px 769px #FFF, 83px 469px #FFF, 429px 1997px #FFF, 448px 1244px #FFF, 904px 199px #FFF, 705px 1642px #FFF, 1517px 7px #FFF, 1021px 952px #FFF, 956px 504px #FFF, 1165px 1198px #FFF, 557px 455px #FFF, 814px 1576px #FFF, 957px 451px #FFF, 19px 1152px #FFF, 48px 633px #FFF, 1151px 1866px #FFF, 388px 637px #FFF, 853px 1552px #FFF, 1186px 1446px #FFF, 960px 281px #FFF, 1633px 248px #FFF, 23px 281px #FFF, 1929px 697px #FFF, 620px 527px #FFF, 1444px 944px #FFF, 1882px 321px #FFF, 520px 969px #FFF, 928px 1080px #FFF, 569px 1238px #FFF, 485px 570px #FFF, 986px 785px #FFF, 1766px 513px #FFF, 23px 432px #FFF, 1398px 1410px #FFF, 679px 380px #FFF, 1221px 331px #FFF, 401px 1557px #FFF, 11px 789px #FFF, 1483px 1601px #FFF, 1195px 791px #FFF, 1666px 733px #FFF, 1367px 221px #FFF, 555px 1992px #FFF, 531px 856px #FFF, 743px 1991px #FFF, 1074px 1382px #FFF, 480px 1891px #FFF, 1185px 1818px #FFF, 947px 375px #FFF, 1580px 362px #FFF, 218px 1438px #FFF, 940px 1735px #FFF, 1194px 825px #FFF, 371px 1280px #FFF, 163px 852px #FFF, 625px 6px #FFF, 1404px 580px #FFF, 1630px 1017px #FFF, 1362px 1309px #FFF, 1661px 875px #FFF, 675px 1797px #FFF, 1564px 324px #FFF, 114px 482px #FFF, 858px 211px #FFF, 409px 327px #FFF, 1455px 1529px #FFF, 333px 327px #FFF, 1256px 1951px #FFF, 1715px 779px #FFF, 837px 1259px #FFF, 801px 548px #FFF, 170px 1083px #FFF, 269px 509px #FFF, 1802px 728px #FFF, 1497px 42px #FFF, 868px 1789px #FFF, 614px 1736px #FFF, 197px 397px #FFF, 1363px 381px #FFF, 227px 175px #FFF, 1248px 1841px #FFF, 255px 345px #FFF, 124px 196px #FFF, 1581px 710px #FFF, 612px 1130px #FFF, 1303px 1186px #FFF, 532px 775px #FFF, 1713px 1408px #FFF, 364px 444px #FFF, 443px 1273px #FFF, 993px 504px #FFF, 198px 1215px #FFF, 1319px 133px #FFF, 1250px 496px #FFF, 220px 1657px #FFF, 1955px 125px #FFF, 1208px 960px #FFF, 79px 1667px #FFF, 1549px 758px #FFF, 168px 330px #FFF, 985px 1103px #FFF, 123px 386px #FFF, 949px 685px #FFF, 1073px 280px #FFF, 1211px 955px #FFF, 594px 362px #FFF, 791px 1978px #FFF, 623px 908px #FFF, 1280px 874px #FFF, 493px 109px #FFF, 462px 278px #FFF, 759px 1577px #FFF, 1002px 1239px #FFF, 860px 1758px #FFF, 1131px 1127px #FFF, 1003px 1199px #FFF, 1472px 616px #FFF, 1779px 755px #FFF, 1202px 404px #FFF, 1367px 971px #FFF, 1012px 1916px #FFF, 1327px 1340px #FFF, 1257px 1239px #FFF, 652px 808px #FFF, 1451px 1137px #FFF, 1859px 680px #FFF, 270px 1441px #FFF, 74px 592px #FFF, 938px 908px #FFF, 1108px 1126px #FFF, 1219px 1008px #FFF, 1431px 1010px #FFF, 757px 445px #FFF, 307px 1304px #FFF, 1777px 1810px #FFF, 1050px 856px #FFF, 602px 663px #FFF, 1019px 1175px #FFF, 980px 1692px #FFF, 34px 849px #FFF, 1014px 1057px #FFF, 1679px 1127px #FFF, 1652px 931px #FFF, 1385px 535px #FFF, 168px 1463px #FFF, 1561px 1716px #FFF, 1686px 876px #FFF, 1460px 1327px #FFF, 1331px 49px #FFF, 242px 1295px #FFF, 1828px 1290px #FFF, 1849px 294px #FFF, 985px 874px #FFF, 1508px 1322px #FFF, 1783px 569px #FFF, 415px 163px #FFF, 1943px 1140px #FFF, 214px 990px #FFF, 515px 66px #FFF, 406px 1891px #FFF, 663px 1151px #FFF, 1778px 709px #FFF, 712px 210px #FFF, 1675px 597px #FFF, 248px 747px #FFF, 679px 567px #FFF, 809px 1117px #FFF, 873px 382px #FFF, 337px 1234px #FFF, 1521px 718px #FFF, 1986px 410px #FFF, 948px 793px #FFF, 1762px 60px #FFF, 174px 680px #FFF, 372px 642px #FFF, 1941px 508px #FFF, 1042px 844px #FFF, 1973px 1908px #FFF, 443px 1939px #FFF, 1003px 314px #FFF, 1600px 1812px #FFF, 1523px 536px #FFF, 59px 1044px #FFF, 167px 184px #FFF, 1466px 1560px #FFF, 795px 849px #FFF, 508px 214px #FFF, 660px 1258px #FFF, 860px 727px #FFF, 601px 7px #FFF, 1728px 894px #FFF, 1029px 863px #FFF, 1364px 1784px #FFF, 1847px 1832px #FFF, 1688px 1924px #FFF, 613px 840px #FFF, 521px 726px #FFF, 1933px 227px #FFF, 1344px 911px #FFF, 1923px 1183px #FFF, 266px 566px #FFF, 1133px 1375px #FFF, 1192px 1233px #FFF, 480px 1163px #FFF, 1859px 1030px #FFF, 1034px 1360px #FFF, 1630px 624px #FFF, 1896px 821px #FFF, 1918px 476px #FFF, 1285px 149px #FFF, 955px 1435px #FFF, 1200px 1698px #FFF, 887px 1373px #FFF, 922px 488px #FFF, 516px 627px #FFF, 141px 886px #FFF, 418px 111px #FFF, 886px 1416px #FFF, 1066px 861px #FFF, 1072px 925px #FFF, 1551px 261px #FFF, 1411px 2000px #FFF, 613px 1237px #FFF, 248px 1702px #FFF, 1881px 494px #FFF, 832px 345px #FFF, 1756px 911px #FFF, 9px 554px #FFF, 880px 375px #FFF, 1269px 780px #FFF, 1678px 1002px #FFF, 1457px 593px #FFF, 761px 524px #FFF, 246px 151px #FFF, 1899px 817px #FFF, 1474px 1602px #FFF, 1173px 373px #FFF, 1px 1569px #FFF, 584px 225px #FFF, 46px 676px #FFF, 926px 1590px #FFF, 1912px 363px #FFF, 1248px 1046px #FFF, 700px 1874px #FFF, 343px 1532px #FFF, 1696px 454px #FFF, 94px 1382px #FFF, 1234px 1330px #FFF, 1118px 520px #FFF, 767px 1761px #FFF, 906px 1826px #FFF, 465px 611px #FFF, 719px 137px #FFF, 1224px 938px #FFF, 1956px 1822px #FFF, 1494px 889px #FFF, 1815px 1560px #FFF, 1352px 592px #FFF, 736px 643px #FFF, 244px 1049px #FFF, 263px 941px #FFF, 306px 339px #FFF, 1549px 28px #FFF, 60px 601px #FFF, 1912px 1049px #FFF, 1241px 940px #FFF, 58px 1028px #FFF, 1953px 620px #FFF, 1589px 1585px #FFF, 1756px 357px #FFF, 428px 27px #FFF, 926px 19px #FFF, 929px 495px #FFF, 1947px 177px #FFF, 53px 1255px #FFF, 1154px 1522px #FFF, 774px 1421px #FFF, 1884px 1499px #FFF, 1260px 1537px #FFF, 667px 1980px #FFF, 1634px 595px #FFF, 1785px 182px #FFF, 369px 13px #FFF, 467px 146px #FFF, 1523px 1281px #FFF, 983px 1369px #FFF, 1266px 27px #FFF, 1304px 481px #FFF, 675px 1383px #FFF, 444px 587px #FFF, 142px 523px #FFF, 481px 289px #FFF, 1061px 1464px #FFF, 1546px 446px #FFF, 1179px 1900px #FFF, 1685px 1404px #FFF, 334px 1955px #FFF, 493px 722px #FFF, 949px 273px #FFF, 539px 864px #FFF, 1464px 1114px #FFF, 445px 390px #FFF, 1140px 1572px #FFF, 1788px 854px #FFF, 453px 397px #FFF, 855px 1662px #FFF, 1340px 1211px #FFF, 1129px 1607px #FFF, 1914px 252px #FFF, 363px 50px #FFF, 907px 994px #FFF, 479px 1784px #FFF, 1394px 994px #FFF, 540px 736px #FFF, 1077px 1256px #FFF, 1281px 1691px #FFF, 320px 1254px #FFF, 1101px 1109px #FFF, 109px 702px #FFF, 1479px 345px #FFF, 1993px 1842px #FFF, 952px 428px #FFF, 1611px 1278px #FFF, 793px 308px #FFF, 1162px 749px #FFF, 277px 514px #FFF, 1875px 1734px #FFF, 1330px 711px #FFF, 1052px 1833px #FFF, 1911px 1873px #FFF, 1517px 1414px #FFF, 1438px 1943px #FFF, 1829px 1331px #FFF, 1353px 1120px #FFF, 1542px 289px #FFF, 1739px 591px #FFF, 163px 1736px #FFF, 1108px 1675px #FFF, 1696px 1342px #FFF, 251px 468px #FFF, 711px 159px #FFF, 1173px 469px #FFF, 1972px 1396px #FFF, 949px 585px #FFF, 894px 568px #FFF, 1903px 386px #FFF, 78px 493px #FFF, 73px 25px #FFF, 1921px 1383px #FFF, 1190px 1764px #FFF, 81px 487px #FFF, 1209px 812px #FFF, 1035px 1471px #FFF, 47px 1799px #FFF, 1390px 1975px #FFF, 658px 540px #FFF, 98px 376px #FFF, 1457px 315px #FFF, 1571px 898px #FFF, 1057px 1940px #FFF, 1375px 126px #FFF, 157px 110px #FFF, 1620px 112px #FFF, 251px 1009px #FFF, 1488px 1993px #FFF, 538px 262px #FFF, 1126px 797px #FFF, 175px 687px #FFF, 305px 1713px #FFF, 1754px 80px #FFF, 291px 1682px #FFF, 1143px 478px #FFF, 1953px 1817px #FFF, 1731px 726px #FFF, 755px 1281px #FFF, 1085px 603px #FFF, 1678px 68px #FFF, 1036px 1552px #FFF, 377px 1510px #FFF, 501px 654px #FFF, 1531px 847px #FFF, 107px 1626px #FFF, 716px 1461px #FFF, 63px 479px #FFF, 571px 967px #FFF, 1983px 1371px #FFF, 1806px 808px #FFF, 871px 563px #FFF, 286px 907px #FFF, 836px 1217px #FFF, 44px 39px #FFF, 982px 819px #FFF, 801px 1878px #FFF, 1563px 1600px #FFF, 1379px 329px #FFF, 1688px 1766px #FFF, 240px 1069px #FFF, 1417px 389px #FFF, 1969px 827px #FFF, 1163px 1248px #FFF, 542px 1701px #FFF, 1853px 63px #FFF, 894px 1187px #FFF, 1484px 840px #FFF, 1918px 1194px #FFF, 807px 1996px #FFF, 895px 1284px #FFF, 191px 1212px #FFF, 1615px 1196px #FFF, 1330px 562px #FFF, 475px 1532px #FFF, 1550px 367px #FFF, 1913px 1461px #FFF, 943px 715px #FFF, 75px 592px #FFF, 161px 144px #FFF, 1780px 78px #FFF, 370px 527px #FFF, 237px 1216px #FFF, 1742px 617px #FFF, 1423px 1496px #FFF, 1094px 65px #FFF, 96px 1234px #FFF, 1563px 152px #FFF, 1435px 1554px #FFF, 228px 119px #FFF, 1214px 934px #FFF, 1368px 1925px #FFF, 1753px 470px #FFF, 1690px 826px #FFF, 1146px 1818px #FFF, 646px 1803px #FFF, 1078px 1729px #FFF, 1493px 1855px #FFF, 1248px 226px #FFF, 1572px 1592px #FFF, 1665px 1332px #FFF, 1773px 1645px #FFF, 885px 1309px #FFF, 701px 606px #FFF, 1600px 1140px #FFF, 1276px 1471px #FFF, 256px 1182px #FFF, 469px 212px #FFF, 1824px 366px #FFF, 22px 1741px #FFF, 734px 1642px #FFF, 1561px 1705px #FFF, 1410px 527px #FFF, 1167px 1011px #FFF, 804px 252px #FFF, 761px 398px #FFF, 1646px 578px #FFF, 1772px 1355px #FFF, 1083px 1276px #FFF, 366px 1362px #FFF, 1028px 1684px #FFF, 1470px 870px #FFF, 367px 1882px #FFF, 1432px 1801px #FFF, 952px 1359px #FFF, 309px 520px #FFF, 337px 1876px #FFF, 409px 1813px #FFF, 1933px 459px #FFF, 10px 33px #FFF, 1838px 1653px #FFF, 6px 1899px #FFF, 1985px 1206px #FFF, 1952px 1022px #FFF, 1728px 1900px #FFF, 945px 780px #FFF, 1484px 681px #FFF, 275px 496px #FFF, 458px 73px #FFF, 1106px 1323px #FFF, 904px 29px #FFF, 1124px 1579px #FFF, 513px 836px #FFF, 1570px 219px #FFF, 437px 1287px #FFF, 1816px 1373px #FFF, 216px 1311px #FFF, 1831px 673px #FFF, 1445px 1876px #FFF, 145px 1443px #FFF, 1998px 1654px #FFF, 1818px 1424px #FFF, 658px 718px #FFF, 1243px 29px #FFF, 1710px 788px #FFF, 662px 1282px #FFF, 1190px 1552px #FFF, 1132px 699px #FFF, 282px 1892px #FFF, 213px 1826px #FFF, 1409px 390px #FFF, 1253px 1830px #FFF, 1446px 1342px #FFF, 405px 1044px #FFF, 1305px 1121px #FFF, 1136px 1532px #FFF, 1589px 1062px #FFF, 1126px 817px #FFF, 1359px 1572px #FFF, 1959px 236px #FFF, 139px 1116px #FFF, 1775px 1124px #FFF, 664px 1561px #FFF, 992px 771px #FFF, 809px 163px #FFF, 420px 569px #FFF, 1027px 25px #FFF, 598px 1109px #FFF, 1342px 792px #FFF, 1434px 1829px #FFF, 1983px 764px #FFF, 272px 1524px #FFF, 916px 1227px #FFF, 761px 827px #FFF, 712px 612px #FFF, 1168px 749px #FFF, 1433px 718px #FFF, 1490px 1591px #FFF, 95px 574px #FFF, 796px 331px #FFF, 1356px 566px #FFF, 1457px 1778px #FFF, 1983px 314px #FFF, 1079px 486px #FFF, 1122px 1964px #FFF, 858px 1899px #FFF, 145px 1601px #FFF, 1684px 1234px #FFF, 631px 595px #FFF, 970px 166px #FFF, 1226px 1413px #FFF, 327px 1244px #FFF, 1946px 1317px #FFF, 762px 313px #FFF, 936px 745px #FFF, 1500px 1809px #FFF, 1422px 1749px #FFF, 506px 1873px #FFF, 790px 1146px #FFF, 847px 260px #FFF, 394px 1869px #FFF, 1396px 609px #FFF, 351px 184px #FFF, 1923px 1505px #FFF, 913px 919px #FFF, 1871px 1850px #FFF, 298px 1184px #FFF, 1711px 837px #FFF, 1038px 378px #FFF, 1666px 889px #FFF, 1142px 895px #FFF, 567px 911px #FFF;
}

#star-area:after {
	content: '';
	position: absolute !important;
	top: 2000px;
	width: 1px;
	height: 1px;
	box-shadow: 343px 1717px #FFF, 763px 92px #FFF, 152px 705px #FFF, 1792px 262px #FFF, 1569px 1434px #FFF, 142px 1058px #FFF, 657px 266px #FFF, 769px 1371px #FFF, 1682px 83px #FFF, 78px 1163px #FFF, 1149px 1642px #FFF, 1673px 1789px #FFF, 294px 678px #FFF, 1559px 924px #FFF, 107px 1916px #FFF, 110px 1989px #FFF, 423px 472px #FFF, 451px 288px #FFF, 917px 1395px #FFF, 1004px 188px #FFF, 1055px 692px #FFF, 1056px 196px #FFF, 206px 600px #FFF, 262px 1578px #FFF, 1956px 988px #FFF, 204px 232px #FFF, 1561px 1710px #FFF, 363px 173px #FFF, 495px 1124px #FFF, 353px 1287px #FFF, 1129px 401px #FFF, 252px 1085px #FFF, 1208px 1380px #FFF, 657px 713px #FFF, 1971px 1646px #FFF, 1188px 420px #FFF, 1135px 377px #FFF, 1631px 1322px #FFF, 1214px 26px #FFF, 221px 1399px #FFF, 1860px 366px #FFF, 199px 316px #FFF, 443px 58px #FFF, 35px 1328px #FFF, 258px 1813px #FFF, 142px 1655px #FFF, 1744px 1939px #FFF, 540px 1874px #FFF, 192px 720px #FFF, 1550px 957px #FFF, 1648px 1979px #FFF, 121px 1336px #FFF, 1661px 526px #FFF, 1269px 64px #FFF, 1720px 1148px #FFF, 440px 1055px #FFF, 145px 1439px #FFF, 1150px 744px #FFF, 1126px 1806px #FFF, 27px 1340px #FFF, 1268px 1369px #FFF, 607px 499px #FFF, 1029px 1337px #FFF, 1468px 1831px #FFF, 1482px 299px #FFF, 689px 1453px #FFF, 90px 1443px #FFF, 498px 64px #FFF, 1977px 1215px #FFF, 1187px 323px #FFF, 1433px 1818px #FFF, 175px 72px #FFF, 58px 132px #FFF, 1534px 698px #FFF, 1863px 1170px #FFF, 794px 704px #FFF, 276px 1892px #FFF, 1051px 784px #FFF, 1015px 472px #FFF, 25px 297px #FFF, 730px 504px #FFF, 1996px 1601px #FFF, 318px 1062px #FFF, 1591px 963px #FFF, 1272px 1366px #FFF, 166px 1636px #FFF, 1310px 1359px #FFF, 1431px 1389px #FFF, 248px 665px #FFF, 257px 1913px #FFF, 1039px 791px #FFF, 1716px 228px #FFF, 1525px 1222px #FFF, 1676px 1956px #FFF, 1683px 626px #FFF, 1344px 1494px #FFF, 747px 939px #FFF, 233px 1125px #FFF, 1150px 1908px #FFF, 1567px 838px #FFF, 1122px 1246px #FFF, 494px 1112px #FFF, 1518px 1317px #FFF, 1137px 1893px #FFF, 220px 1955px #FFF, 1779px 102px #FFF, 111px 1818px #FFF, 1835px 203px #FFF, 857px 765px #FFF, 855px 859px #FFF, 586px 407px #FFF, 1559px 81px #FFF, 1788px 1293px #FFF, 1771px 1413px #FFF, 484px 514px #FFF, 1426px 849px #FFF, 1022px 1784px #FFF, 638px 431px #FFF, 593px 330px #FFF, 1466px 187px #FFF, 4px 1935px #FFF, 1876px 938px #FFF, 1567px 1807px #FFF, 510px 131px #FFF, 1431px 1993px #FFF, 923px 316px #FFF, 1818px 1284px #FFF, 850px 1816px #FFF, 1536px 807px #FFF, 163px 446px #FFF, 1956px 926px #FFF, 1875px 954px #FFF, 1783px 1375px #FFF, 1579px 1469px #FFF, 1962px 111px #FFF, 1787px 1868px #FFF, 1080px 701px #FFF, 1283px 1975px #FFF, 231px 951px #FFF, 1968px 1579px #FFF, 907px 425px #FFF, 923px 1018px #FFF, 1964px 769px #FFF, 83px 469px #FFF, 429px 1997px #FFF, 448px 1244px #FFF, 904px 199px #FFF, 705px 1642px #FFF, 1517px 7px #FFF, 1021px 952px #FFF, 956px 504px #FFF, 1165px 1198px #FFF, 557px 455px #FFF, 814px 1576px #FFF, 957px 451px #FFF, 19px 1152px #FFF, 48px 633px #FFF, 1151px 1866px #FFF, 388px 637px #FFF, 853px 1552px #FFF, 1186px 1446px #FFF, 960px 281px #FFF, 1633px 248px #FFF, 23px 281px #FFF, 1929px 697px #FFF, 620px 527px #FFF, 1444px 944px #FFF, 1882px 321px #FFF, 520px 969px #FFF, 928px 1080px #FFF, 569px 1238px #FFF, 485px 570px #FFF, 986px 785px #FFF, 1766px 513px #FFF, 23px 432px #FFF, 1398px 1410px #FFF, 679px 380px #FFF, 1221px 331px #FFF, 401px 1557px #FFF, 11px 789px #FFF, 1483px 1601px #FFF, 1195px 791px #FFF, 1666px 733px #FFF, 1367px 221px #FFF, 555px 1992px #FFF, 531px 856px #FFF, 743px 1991px #FFF, 1074px 1382px #FFF, 480px 1891px #FFF, 1185px 1818px #FFF, 947px 375px #FFF, 1580px 362px #FFF, 218px 1438px #FFF, 940px 1735px #FFF, 1194px 825px #FFF, 371px 1280px #FFF, 163px 852px #FFF, 625px 6px #FFF, 1404px 580px #FFF, 1630px 1017px #FFF, 1362px 1309px #FFF, 1661px 875px #FFF, 675px 1797px #FFF, 1564px 324px #FFF, 114px 482px #FFF, 858px 211px #FFF, 409px 327px #FFF, 1455px 1529px #FFF, 333px 327px #FFF, 1256px 1951px #FFF, 1715px 779px #FFF, 837px 1259px #FFF, 801px 548px #FFF, 170px 1083px #FFF, 269px 509px #FFF, 1802px 728px #FFF, 1497px 42px #FFF, 868px 1789px #FFF, 614px 1736px #FFF, 197px 397px #FFF, 1363px 381px #FFF, 227px 175px #FFF, 1248px 1841px #FFF, 255px 345px #FFF, 124px 196px #FFF, 1581px 710px #FFF, 612px 1130px #FFF, 1303px 1186px #FFF, 532px 775px #FFF, 1713px 1408px #FFF, 364px 444px #FFF, 443px 1273px #FFF, 993px 504px #FFF, 198px 1215px #FFF, 1319px 133px #FFF, 1250px 496px #FFF, 220px 1657px #FFF, 1955px 125px #FFF, 1208px 960px #FFF, 79px 1667px #FFF, 1549px 758px #FFF, 168px 330px #FFF, 985px 1103px #FFF, 123px 386px #FFF, 949px 685px #FFF, 1073px 280px #FFF, 1211px 955px #FFF, 594px 362px #FFF, 791px 1978px #FFF, 623px 908px #FFF, 1280px 874px #FFF, 493px 109px #FFF, 462px 278px #FFF, 759px 1577px #FFF, 1002px 1239px #FFF, 860px 1758px #FFF, 1131px 1127px #FFF, 1003px 1199px #FFF, 1472px 616px #FFF, 1779px 755px #FFF, 1202px 404px #FFF, 1367px 971px #FFF, 1012px 1916px #FFF, 1327px 1340px #FFF, 1257px 1239px #FFF, 652px 808px #FFF, 1451px 1137px #FFF, 1859px 680px #FFF, 270px 1441px #FFF, 74px 592px #FFF, 938px 908px #FFF, 1108px 1126px #FFF, 1219px 1008px #FFF, 1431px 1010px #FFF, 757px 445px #FFF, 307px 1304px #FFF, 1777px 1810px #FFF, 1050px 856px #FFF, 602px 663px #FFF, 1019px 1175px #FFF, 980px 1692px #FFF, 34px 849px #FFF, 1014px 1057px #FFF, 1679px 1127px #FFF, 1652px 931px #FFF, 1385px 535px #FFF, 168px 1463px #FFF, 1561px 1716px #FFF, 1686px 876px #FFF, 1460px 1327px #FFF, 1331px 49px #FFF, 242px 1295px #FFF, 1828px 1290px #FFF, 1849px 294px #FFF, 985px 874px #FFF, 1508px 1322px #FFF, 1783px 569px #FFF, 415px 163px #FFF, 1943px 1140px #FFF, 214px 990px #FFF, 515px 66px #FFF, 406px 1891px #FFF, 663px 1151px #FFF, 1778px 709px #FFF, 712px 210px #FFF, 1675px 597px #FFF, 248px 747px #FFF, 679px 567px #FFF, 809px 1117px #FFF, 873px 382px #FFF, 337px 1234px #FFF, 1521px 718px #FFF, 1986px 410px #FFF, 948px 793px #FFF, 1762px 60px #FFF, 174px 680px #FFF, 372px 642px #FFF, 1941px 508px #FFF, 1042px 844px #FFF, 1973px 1908px #FFF, 443px 1939px #FFF, 1003px 314px #FFF, 1600px 1812px #FFF, 1523px 536px #FFF, 59px 1044px #FFF, 167px 184px #FFF, 1466px 1560px #FFF, 795px 849px #FFF, 508px 214px #FFF, 660px 1258px #FFF, 860px 727px #FFF, 601px 7px #FFF, 1728px 894px #FFF, 1029px 863px #FFF, 1364px 1784px #FFF, 1847px 1832px #FFF, 1688px 1924px #FFF, 613px 840px #FFF, 521px 726px #FFF, 1933px 227px #FFF, 1344px 911px #FFF, 1923px 1183px #FFF, 266px 566px #FFF, 1133px 1375px #FFF, 1192px 1233px #FFF, 480px 1163px #FFF, 1859px 1030px #FFF, 1034px 1360px #FFF, 1630px 624px #FFF, 1896px 821px #FFF, 1918px 476px #FFF, 1285px 149px #FFF, 955px 1435px #FFF, 1200px 1698px #FFF, 887px 1373px #FFF, 922px 488px #FFF, 516px 627px #FFF, 141px 886px #FFF, 418px 111px #FFF, 886px 1416px #FFF, 1066px 861px #FFF, 1072px 925px #FFF, 1551px 261px #FFF, 1411px 2000px #FFF, 613px 1237px #FFF, 248px 1702px #FFF, 1881px 494px #FFF, 832px 345px #FFF, 1756px 911px #FFF, 9px 554px #FFF, 880px 375px #FFF, 1269px 780px #FFF, 1678px 1002px #FFF, 1457px 593px #FFF, 761px 524px #FFF, 246px 151px #FFF, 1899px 817px #FFF, 1474px 1602px #FFF, 1173px 373px #FFF, 1px 1569px #FFF, 584px 225px #FFF, 46px 676px #FFF, 926px 1590px #FFF, 1912px 363px #FFF, 1248px 1046px #FFF, 700px 1874px #FFF, 343px 1532px #FFF, 1696px 454px #FFF, 94px 1382px #FFF, 1234px 1330px #FFF, 1118px 520px #FFF, 767px 1761px #FFF, 906px 1826px #FFF, 465px 611px #FFF, 719px 137px #FFF, 1224px 938px #FFF, 1956px 1822px #FFF, 1494px 889px #FFF, 1815px 1560px #FFF, 1352px 592px #FFF, 736px 643px #FFF, 244px 1049px #FFF, 263px 941px #FFF, 306px 339px #FFF, 1549px 28px #FFF, 60px 601px #FFF, 1912px 1049px #FFF, 1241px 940px #FFF, 58px 1028px #FFF, 1953px 620px #FFF, 1589px 1585px #FFF, 1756px 357px #FFF, 428px 27px #FFF, 926px 19px #FFF, 929px 495px #FFF, 1947px 177px #FFF, 53px 1255px #FFF, 1154px 1522px #FFF, 774px 1421px #FFF, 1884px 1499px #FFF, 1260px 1537px #FFF, 667px 1980px #FFF, 1634px 595px #FFF, 1785px 182px #FFF, 369px 13px #FFF, 467px 146px #FFF, 1523px 1281px #FFF, 983px 1369px #FFF, 1266px 27px #FFF, 1304px 481px #FFF, 675px 1383px #FFF, 444px 587px #FFF, 142px 523px #FFF, 481px 289px #FFF, 1061px 1464px #FFF, 1546px 446px #FFF, 1179px 1900px #FFF, 1685px 1404px #FFF, 334px 1955px #FFF, 493px 722px #FFF, 949px 273px #FFF, 539px 864px #FFF, 1464px 1114px #FFF, 445px 390px #FFF, 1140px 1572px #FFF, 1788px 854px #FFF, 453px 397px #FFF, 855px 1662px #FFF, 1340px 1211px #FFF, 1129px 1607px #FFF, 1914px 252px #FFF, 363px 50px #FFF, 907px 994px #FFF, 479px 1784px #FFF, 1394px 994px #FFF, 540px 736px #FFF, 1077px 1256px #FFF, 1281px 1691px #FFF, 320px 1254px #FFF, 1101px 1109px #FFF, 109px 702px #FFF, 1479px 345px #FFF, 1993px 1842px #FFF, 952px 428px #FFF, 1611px 1278px #FFF, 793px 308px #FFF, 1162px 749px #FFF, 277px 514px #FFF, 1875px 1734px #FFF, 1330px 711px #FFF, 1052px 1833px #FFF, 1911px 1873px #FFF, 1517px 1414px #FFF, 1438px 1943px #FFF, 1829px 1331px #FFF, 1353px 1120px #FFF, 1542px 289px #FFF, 1739px 591px #FFF, 163px 1736px #FFF, 1108px 1675px #FFF, 1696px 1342px #FFF, 251px 468px #FFF, 711px 159px #FFF, 1173px 469px #FFF, 1972px 1396px #FFF, 949px 585px #FFF, 894px 568px #FFF, 1903px 386px #FFF, 78px 493px #FFF, 73px 25px #FFF, 1921px 1383px #FFF, 1190px 1764px #FFF, 81px 487px #FFF, 1209px 812px #FFF, 1035px 1471px #FFF, 47px 1799px #FFF, 1390px 1975px #FFF, 658px 540px #FFF, 98px 376px #FFF, 1457px 315px #FFF, 1571px 898px #FFF, 1057px 1940px #FFF, 1375px 126px #FFF, 157px 110px #FFF, 1620px 112px #FFF, 251px 1009px #FFF, 1488px 1993px #FFF, 538px 262px #FFF, 1126px 797px #FFF, 175px 687px #FFF, 305px 1713px #FFF, 1754px 80px #FFF, 291px 1682px #FFF, 1143px 478px #FFF, 1953px 1817px #FFF, 1731px 726px #FFF, 755px 1281px #FFF, 1085px 603px #FFF, 1678px 68px #FFF, 1036px 1552px #FFF, 377px 1510px #FFF, 501px 654px #FFF, 1531px 847px #FFF, 107px 1626px #FFF, 716px 1461px #FFF, 63px 479px #FFF, 571px 967px #FFF, 1983px 1371px #FFF, 1806px 808px #FFF, 871px 563px #FFF, 286px 907px #FFF, 836px 1217px #FFF, 44px 39px #FFF, 982px 819px #FFF, 801px 1878px #FFF, 1563px 1600px #FFF, 1379px 329px #FFF, 1688px 1766px #FFF, 240px 1069px #FFF, 1417px 389px #FFF, 1969px 827px #FFF, 1163px 1248px #FFF, 542px 1701px #FFF, 1853px 63px #FFF, 894px 1187px #FFF, 1484px 840px #FFF, 1918px 1194px #FFF, 807px 1996px #FFF, 895px 1284px #FFF, 191px 1212px #FFF, 1615px 1196px #FFF, 1330px 562px #FFF, 475px 1532px #FFF, 1550px 367px #FFF, 1913px 1461px #FFF, 943px 715px #FFF, 75px 592px #FFF, 161px 144px #FFF, 1780px 78px #FFF, 370px 527px #FFF, 237px 1216px #FFF, 1742px 617px #FFF, 1423px 1496px #FFF, 1094px 65px #FFF, 96px 1234px #FFF, 1563px 152px #FFF, 1435px 1554px #FFF, 228px 119px #FFF, 1214px 934px #FFF, 1368px 1925px #FFF, 1753px 470px #FFF, 1690px 826px #FFF, 1146px 1818px #FFF, 646px 1803px #FFF, 1078px 1729px #FFF, 1493px 1855px #FFF, 1248px 226px #FFF, 1572px 1592px #FFF, 1665px 1332px #FFF, 1773px 1645px #FFF, 885px 1309px #FFF, 701px 606px #FFF, 1600px 1140px #FFF, 1276px 1471px #FFF, 256px 1182px #FFF, 469px 212px #FFF, 1824px 366px #FFF, 22px 1741px #FFF, 734px 1642px #FFF, 1561px 1705px #FFF, 1410px 527px #FFF, 1167px 1011px #FFF, 804px 252px #FFF, 761px 398px #FFF, 1646px 578px #FFF, 1772px 1355px #FFF, 1083px 1276px #FFF, 366px 1362px #FFF, 1028px 1684px #FFF, 1470px 870px #FFF, 367px 1882px #FFF, 1432px 1801px #FFF, 952px 1359px #FFF, 309px 520px #FFF, 337px 1876px #FFF, 409px 1813px #FFF, 1933px 459px #FFF, 10px 33px #FFF, 1838px 1653px #FFF, 6px 1899px #FFF, 1985px 1206px #FFF, 1952px 1022px #FFF, 1728px 1900px #FFF, 945px 780px #FFF, 1484px 681px #FFF, 275px 496px #FFF, 458px 73px #FFF, 1106px 1323px #FFF, 904px 29px #FFF, 1124px 1579px #FFF, 513px 836px #FFF, 1570px 219px #FFF, 437px 1287px #FFF, 1816px 1373px #FFF, 216px 1311px #FFF, 1831px 673px #FFF, 1445px 1876px #FFF, 145px 1443px #FFF, 1998px 1654px #FFF, 1818px 1424px #FFF, 658px 718px #FFF, 1243px 29px #FFF, 1710px 788px #FFF, 662px 1282px #FFF, 1190px 1552px #FFF, 1132px 699px #FFF, 282px 1892px #FFF, 213px 1826px #FFF, 1409px 390px #FFF, 1253px 1830px #FFF, 1446px 1342px #FFF, 405px 1044px #FFF, 1305px 1121px #FFF, 1136px 1532px #FFF, 1589px 1062px #FFF, 1126px 817px #FFF, 1359px 1572px #FFF, 1959px 236px #FFF, 139px 1116px #FFF, 1775px 1124px #FFF, 664px 1561px #FFF, 992px 771px #FFF, 809px 163px #FFF, 420px 569px #FFF, 1027px 25px #FFF, 598px 1109px #FFF, 1342px 792px #FFF, 1434px 1829px #FFF, 1983px 764px #FFF, 272px 1524px #FFF, 916px 1227px #FFF, 761px 827px #FFF, 712px 612px #FFF, 1168px 749px #FFF, 1433px 718px #FFF, 1490px 1591px #FFF, 95px 574px #FFF, 796px 331px #FFF, 1356px 566px #FFF, 1457px 1778px #FFF, 1983px 314px #FFF, 1079px 486px #FFF, 1122px 1964px #FFF, 858px 1899px #FFF, 145px 1601px #FFF, 1684px 1234px #FFF, 631px 595px #FFF, 970px 166px #FFF, 1226px 1413px #FFF, 327px 1244px #FFF, 1946px 1317px #FFF, 762px 313px #FFF, 936px 745px #FFF, 1500px 1809px #FFF, 1422px 1749px #FFF, 506px 1873px #FFF, 790px 1146px #FFF, 847px 260px #FFF, 394px 1869px #FFF, 1396px 609px #FFF, 351px 184px #FFF, 1923px 1505px #FFF, 913px 919px #FFF, 1871px 1850px #FFF, 298px 1184px #FFF, 1711px 837px #FFF, 1038px 378px #FFF, 1666px 889px #FFF, 1142px 895px #FFF, 567px 911px #FFF;
}

.comet-area {
	position: absolute !important;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2 !important;
}

.comet {
	position: absolute !important;
	background-color: #fff;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	transform: rotate(-35deg);
}

.comet:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	width: 0;
	height: 0;
	border-top: 1px solid transparent;
	border-bottom: 1px solid transparent;
	border-left: 85px solid #fff;
	position: absolute !important;
	left: 2px;
	top: 0;
}

.comet.alt-1 {
	animation: comet-alt-1 1s linear infinite;
}

.comet.alt-2 {
	animation: comet-alt-2 1s linear infinite;
}

.comet.alt-3 {
	animation: comet-alt-3 1s linear infinite;
}

.comet.alt-4 {
	animation: comet-alt-4 1s linear infinite;
}

@keyframes comet-alt-1 {
	0% { opacity: 0; right: 300px; top: 100px; }
	30% { opacity: .3; }
	60% { opacity: .3; }
	100% { opacity: 0; right: 1000px; top: 600px; }
}

@keyframes comet-alt-2 {
	0% { opacity: 0; right: 700px; top: 100px; }
	30% { opacity: 1; }
	60% { opacity: 1; }
	100% { opacity: 0; right: 1400px; top: 600px; }
}

@keyframes comet-alt-3 {
	0% { opacity: 0; right: 300px; top: 300px; }
	30% { opacity: 1; }
	60% { opacity: 1; }
	100% { opacity: 0; right: 1400px; top: 800px; }
}

@keyframes comet-alt-4 {
	0% { opacity: 0; right: 700px; top: 300px; }
	30% { opacity: 1; }
	60% { opacity: 1; }
	100% { opacity: 0; right: 1400px; top: 800px; }
}

#school-diplomas h2 {
	text-align: inherit;
	line-height: 40px;
	margin-left: 60px;
}

#school-diplomas h2,
#pro-exp h2 {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--main-color);
	font-weight: 400;
	font-family: Futura;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 12px;
	display: inline-block;
	vertical-align: baseline;
	width: calc(100% - 60px);
}

#pro-exp h2 {
	text-align: left;
	margin-top: 35px;
	width: 100%;
}


/* Section contact */

#contact-form {
	font-size: 0;
}

input,
textarea,
button {
	outline: 0;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: var(--grey-color-lvl-4);
}

input:hover::-webkit-input-placeholder,
textarea:hover::-webkit-input-placeholder {
	color: var(--grey-color-lvl-3);
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
	color: var(--secondary-color);
}

input,
textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--grey-color-lvl-0);
	border: 1px solid var(--secondary-bg-color);
	border-radius: 0;
	display: inline-block;
	font: 400 15px Avenir, sans-serif;
	padding: 12px 15px;
	transition: all .3s, box-shadow .5s;
	color: var(--grey-color-lvl-1);
}

input:hover,
input.error:hover,
textarea:hover,
textarea.error:hover {
	border-color: var(--alt-main-color);
}

input:focus,
input.error:focus,
textarea:focus,
textarea.error:focus {
	background-color: var(--grey-color-lvl-0);
	border-color: var(--secondary-color);
	color: var(--grey-color-lvl-1);
	box-shadow: 0 0 0 2px var(--focus-color);
    border-radius: 2px;
}

#contact-name,
#contact-email,
#contact-phone {
	margin: 0;
	width: calc(100% - 32px);
}

#contact-msg {
	clear: both;
	min-height: 130px;
	margin: 10px 0 0;
	resize: none;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

#contact-name-box,
#contact-email-box {
	display: inline-block;
	width: calc(50% - 5px);
	transition: all .3s ease-out;
	position: relative;
	overflow: hidden;
	padding: 2px;
	margin: -2px;
}

#contact-name-box,
#contact-email-box.reduced {
	margin-right: 8px;
}

#contact-phone-box {
	display: inline-block;
	width: 0;
	transition: all .3s ease-out .3s;
	position: relative;
	float: right;
	overflow: hidden;
}

#contact-name-box.reduced,
#contact-email-box.reduced {
	width: calc(33% - 5px);
}

#contact-phone-box.reduced {
	width: calc(33% - 4px);
	padding: 2px;
	margin: -2px;
}

#contact-form input.with-label + span {
	animation: label-appear .2s ease-in-out;
	display: block;
	position: absolute;
	top: 5px;
	left: 15px;
	font-size: 12px;
	color: var(--grey-color-lvl-4);
}

#contact-form input.with-label:focus + span {
	color: var(--secondary-color);
}

input.with-label {
	padding-top: 20px;
	padding-bottom: 4px;
	vertical-align: top;
}

input.run-error-blinking, textarea.run-error-blinking {
	animation: error-blink .15s 5;
}

input.error, textarea.error {
	border-color: var(--red-color);
	color: var(--red-color);
}

button.submit {
	background-color: transparent;
	border: 0;
	color: var(--main-color);
	cursor: pointer;
	font: 400 15px Futura;
	letter-spacing: 2px;
	margin: 10px 0;
	padding: 15px 0;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

button.submit:hover, button.submit:focus {
	background-color: var(--grey-color-lvl-7);
	color: var(--secondary-color);
}

button.submit:active {
	animation: button-submit-active .15s forwards;
}

button.submit:disabled {
	text-decoration: line-through;
	cursor: not-allowed;
}

#contact-form-info {
	border-top: 1px solid var(--grey-color-lvl-7);
	color: var(--grey-color-lvl-4);
	font: 400 11px/13px Avenir, sans-serif;
	line-height: inherit;
	margin: 0;
	padding: 5px 0 0;
	display: block;
	text-align: center;
}

#contact-form-callback {
	display: none;
	text-align: center;
}

#contact {
	position: relative;
	overflow: hidden;
}

#contact p.error {
	color: var(--red-color);
}

#contact-form-callback svg.appear {
	animation: sending-icon 1.5s;
}

#contact-form-callback svg {
	transition: fill .5s;
	fill: var(--main-color);
	height: 200px;
	position: absolute;
	top: 230px;
	left: 0;
	display: block;
	width: 100%;
}

#contact-form-callback.success svg {
	fill: var(--secondary-color);
}

#contact-form-callback.error svg {
	animation: sending-icon-fade 2s forwards 0.5s;
	fill: var(--light-red-color);
}





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

	body.fixed .menu {
		right: 0;
	}

}

@media only screen and (max-width: 750px) {
	
	#darkmode-alert p:after {
		content: 'Appuyez pour masquer';
		color: var(--secondary-color);
		text-transform: uppercase;
		display: block;
		font: 400 13px Futura;
		letter-spacing: 2px;
		text-align: right;
		margin-top: 5px;
	}

	#contact-name-box,
	#contact-email-box,
	#contact-phone-box,
	#contact-name-box.reduced,
	#contact-email-box.reduced,
	#contact-phone-box.reduced,
	#contact-msg {
		display: block;
		width: 100%;
		margin: 10px 0;
		float: none;
		height: 47px;
	}

	#contact-msg {
		height: auto;
	}

	#contact-form .submit {
		margin-top: 0;
	}

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

	.footer span.copyright,
	.footer span.legal {
		float: none;
		display: block;
		line-height: 50px;
		text-align: center;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	#header-icon {
		opacity: 0;
	}

	body.fixed #header-icon {
		display: block;
		position: relative;
		width: 70px;
		height: 70px;
		transition: transform 0.3s, opacity .3s;
		float: right;
		cursor: pointer;
		z-index: 9999;
	}

	body.fixed #header-icon span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		display: block;
		width: 16px;
		height: 2px;
		background-color: var(--grey-color-lvl-1);
		transition: background 0.1s;
	}

	body.fixed #header-icon span::before,
	body.fixed #header-icon span::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 22px;
		height: 2px;
		background-color: var(--grey-color-lvl-1);
		transition: transform 0.3s;
	}
	
	body.fixed #header-icon span::before {
		transform-origin: top left;
		transform: translateY(-6px) rotate(0);
	}

	body.fixed #header-icon span::after {
		transform-origin: bottom left;
		transform: translateY(6px) rotate(0);
		width: 10px;
	}

	body.fixed #header-icon.is--opened span {
		background: transparent;
	}

	body.fixed #header-icon.is--opened span::before {
		transform-origin: top left;
		transform: translateY(8px) rotate(-45deg);
		background-color: var(--white-color);
		
	}

	body.fixed #header-icon.is--opened span::after {
		width: 22px;
		transform-origin: bottom left;
		transform: translateY(-8px) rotate(45deg);
		background-color: var(--white-color);
	}

	body.fixed #header-icon.is--opened {
		transform: rotate(90deg);
	}

	body.fixed .menu, .menu {
		transition: right ease-out .3s, opacity ease-out .6s, box-shadow .4s ease .2s;
		top: 15px;
		position: fixed;
		padding: 55px 0 0;
		z-index: 0;
		opacity: 0;
		right: -200px;
		width: 200px;
		background-color: rgba(0, 0, 0, .65);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		box-shadow: 0 10px 25px 2px rgba(0, 0, 0, .65);
		display: block;
		text-align: right;
		border-radius: 2px;
	}

	body.fixed .menu a, .menu a {
		display: block;
		color: var(--white-color);
		width: auto;
	}

	body.fixed .menu span {
		display: none !important;
	}

	body.fixed .header.is--opened .menu {
		opacity: 1;
		right: 15px;
	}

}

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

	#skill-meter > div:nth-child(n) {
		display: block;
		margin: 0 auto;
		width: 100%;
	}

	#skill-meter > div:not(:nth-child(3)) h3 {
		width: 100%;
	}

}

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

	#project > a.active {
		height: 410px;
	}
}

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

	#darkmode-alert {
		border-radius: 15px;
		width: calc(100% - 60px);
	}

	#home {
		padding: calc(5vh) 0;
	}

}

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

	#pro-exp > div > div {
		margin-top: -10px;
		padding-top: 10px;
	}

}