@font-face {
	font-family: "Gatwick";
	src: url('fonts/PPGatwick-Bold.otf');
}

@font-face {
	font-family: "Gatwick-Light";
	src: url('fonts/PPGatwick-Ultralight.otf');
}

@font-face {
	font-family: "Roboto-light";
	src: url('fonts/Roboto/Roboto-Light.ttf');
}

@font-face {
	font-family: "Roboto-regular";
	src: url('fonts/Roboto/Roboto-Regular.ttf');
}

@font-face {
	font-family: "Roboto-thin";
	src: url('fonts/Roboto/Roboto-Thin.ttf');
}


/* VARIABLES */

:root{

	/* Colors */
	--black-color: #1D1D1D;
	--medium-grey: #868686;
	--light-grey: #D8D8D8;
	--white: #FFFEF3;

	/* Degrade */
	--degrade-light-green: #E0F154;
	--degrade-dark-green: #57AF3C;
	--degrade-light-brown: #D38524;
	--degrade-dark-brown: #5A2404;


	/* Fonts */
	--ff-primary: 'Gatwick';
	--ff-primary-light: 'Gatwick-Light';
	
	--ff-secondary-light: 'Roboto-light';
	--ff-secondary-regular: 'Roboto-regular';
	--ff-secondary-thin: 'Roboto-thin';

}


/* Setup CSS */
*{
	margin: 0;
	padding: 0;
	font: inherit;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

html:focus-within{
	scroll-behavior: smooth;
}
html{ scroll-behavior: smooth; }

body{
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

img, picture, svg{
	max-width: 100%;
	display: block;
}

a{
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce){
	html:focus-within{
		scroll-behavior: auto;
	}

	*{
		-webkit-animation-duration: 0.01ms !important;
		        animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		        animation-iteration-count: 1 !important;
		-webkit-transition-duration: 0.01ms !important;
		     -o-transition-duration: 0.01ms !important;
		        transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}


/* -------------------- CSS--------------------  */


/* ALL */

/* Fixed Nav */

header{
	z-index: 5;
	position: fixed;
	top: 50px;
	left: 5%;
	right: 5%;
	width: 90%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.logo-fixed img{
	height: 50px;
}

.navMenuBurger{
	cursor: pointer;
	padding: 15px 10px;
}

.navMenuBurger span{
	display: block;
	width: 28px;
	height: 2px;
	border-radius: 50px;
	background-color: var(--white);
}
.navMenuBurger span.invertedMenuBars{
	background-color: var(--black-color);
}

.navMenuBurger > span:not(:last-child){
	margin-bottom: 7px;
}

.navMenuBurger, .navMenuBurger > span{
	-webkit-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.navMenuBurger.activeMenu{
	-webkit-transition-delay: .8s;
	     -o-transition-delay: .8s;
	        transition-delay: .8s;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.navMenuBurger.activeMenu > span:nth-child(2){
	width: 0;
}
.navMenuBurger.activeMenu > span:nth-child(1),
.navMenuBurger.activeMenu > span:nth-child(3){
	-webkit-transition-delay: .4s;
	     -o-transition-delay: .4s;
	        transition-delay: .4s;
}
.navMenuBurger.activeMenu > span:nth-child(1){
	-webkit-transform: translateY(9px);
	    -ms-transform: translateY(9px);
	        transform: translateY(9px);
}
.navMenuBurger.activeMenu > span:nth-child(3){
	-webkit-transform: translateY(-9px) rotate(90deg);
	    -ms-transform: translateY(-9px) rotate(90deg);
	        transform: translateY(-9px) rotate(90deg);
}



/* Menu Burger */
.nav-hidden-burger{
	position: absolute;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--black-color);
	color: var(--white);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.burger-links-container{
	font-size: 2rem;
	font-family: var(--ff-primary);
	text-align: center;
}
@media screen and (max-width: 1150px){

	.burger-links-container{
		font-size: 1.5rem;
	}
}

.link-burger{
	margin: 25px auto;
}

.link-burger a{
	color: var(--white);
	padding: 10px 20px;
	text-transform: uppercase;
}

.mail-burger{
	color: var(--white);
	font-family: var(--ff-primary-light);
	margin-bottom: 30px;
	font-size: 0.7rem;
	padding: 5px 10px;
	-webkit-transition: .4s ease-out;
	-o-transition: .4s ease-out;
	transition: .4s ease-out;
	position: absolute;
	bottom: 0;
}
.mail-burger:hover,
.mail-burger:focus{
	background-color: var(--white);
	color: var(--black-color);
}

/* Layers Animation Burger */

.container-layersAnim{
	width: 100%;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	z-index: -1;
	-webkit-transition: .4s ease-in-out;
	-o-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.container-layersAnim-Zindex{
	z-index: 3;
}

.top-layer-anim{
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: var(--white);
	-webkit-transition: all 0.9s cubic-bezier(0.6, 0.05, 0.4, 1);
	-o-transition: all 0.9s cubic-bezier(0.6, 0.05, 0.4, 1);
	transition: all 0.9s cubic-bezier(0.6, 0.05, 0.4, 1);
}
.activeLayers {
	bottom: 0;
}
.top-layer-2{
	-webkit-transition-delay: 0.3s;
	     -o-transition-delay: 0.3s;
	        transition-delay: 0.3s;
	background-color: var(--white);
}
.top-layer-3{
	-webkit-transition-delay: 0.5s;
	     -o-transition-delay: 0.5s;
	        transition-delay: 0.5s;
	background-color: var(--black-color);
}
.top-layer-4{
	-webkit-transition-delay: 0.3s;
	     -o-transition-delay: 0.3s;
	        transition-delay: 0.3s;
	background-color: var(--white);
}
.top-layer-5{
	-webkit-transition-delay: 0.2s;
	     -o-transition-delay: 0.2s;
	        transition-delay: 0.2s;
	background-color: var(--black-color);
}



/* ------------------------------------- Slider - Home ------------------------------------- */
.works-slider{
	width: 100%;
}

.work-slide{
	height: 100vh;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}

.work-slide:nth-child(1){
	background: url('img/projectImg/stubank/stand-stubank.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-o-object-fit: cover;
	   object-fit: cover;
}
.work-slide:nth-child(2){
	background: url('img/projectImg/astroSushi/astroSushi.jpg');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	-o-object-fit: cover;
	   object-fit: cover;
}
.work-slide:nth-child(3){
	background: url('img/projectImg/switch/nintendoSwitch-1.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.work-slide:nth-child(4){
	background: url('img/projectImg/cokot/cokot-macPage.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.work-slide:nth-child(5){
	background: url('img/projectImg/oshun/hero-oshun-banner.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
.work-slide:nth-child(6){
	background: url('img/projectImg/pulcinella/JAlbert_screenPremiere.webp');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}
/* .work-slide:nth-child(7){
	background: url('img/projectImg/cokot/cokot-macPage.jpg');
	background-position: 50% 50%;
	background-repeat: no-repeat;
} */

/* ------------------------------------- Slider - Home ------------------------------------- */

.link-effected, .link-effected-inverted, .small-link-effected, .small-link-effected-inverted{
	position: relative;
	display: inline-block;
}
.link-effected:after{
	content: '';
	position: absolute;
	-webkit-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	        transform: scaleX(0);
	width: 100%;
	height: 5px;
	bottom: 0;
	left: 0;
	background-color: var(--white);
	-webkit-transform-origin: bottom right;
	    -ms-transform-origin: bottom right;
	        transform-origin: bottom right;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.link-effected-inverted:after{
	content: '';
	position: absolute;
	-webkit-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	        transform: scaleX(0);
	width: 100%;
	height: 5px;
	bottom: 0;
	left: 0;
	background-color: var(--black-color);
	-webkit-transform-origin: bottom right;
	    -ms-transform-origin: bottom right;
	        transform-origin: bottom right;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.small-link-effected-inverted:after{
	content: '';
	position: absolute;
	-webkit-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	        transform: scaleX(0);
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--black-color);
	-webkit-transform-origin: bottom right;
	    -ms-transform-origin: bottom right;
	        transform-origin: bottom right;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.small-link-effected:after{
	content: '';
	position: absolute;
	-webkit-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	        transform: scaleX(0);
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: var(--white);
	-webkit-transform-origin: bottom right;
	    -ms-transform-origin: bottom right;
	        transform-origin: bottom right;
	-webkit-transition: -webkit-transform 0.3s ease-out;
	transition: -webkit-transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
.small-link-effected-inverted:hover:after, 
.small-link-effected:hover:after, 
.link-effected:hover:after, 
.link-effected-inverted:hover:after,
.small-link-effected-inverted:focus:after, 
.small-link-effected:focus:after, 
.link-effected:focus:after, 
.link-effected-inverted:focus:after{
	-webkit-transform: scaleX(1);
	    -ms-transform: scaleX(1);
	        transform: scaleX(1);
	-webkit-transform-origin: bottom left;
	    -ms-transform-origin: bottom left;
	        transform-origin: bottom left;
}

.title-slide{
	font-family: var(--ff-primary);
	color: var(--white);
	text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
	font-size: 6rem;
	z-index: 2;
	text-align: center;

	position: sticky;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);

	-webkit-transition: .4s ease-out;

	-o-transition: .4s ease-out;

	transition: .4s ease-out;
}

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

	.title-slide{
		font-size: 3.5rem;
	}
}
@media screen and (max-width: 650px){

	.title-slide{
		font-size: 2rem;
	}
}

.title-slide:hover > .hidden-work-ways, 
.title-slide:focus > .hidden-work-ways{
	opacity: 1;
}

.hidden-work-ways{
	opacity: 0;
	padding: 5px 10px;
	font-size: 0.8rem;
	font-family: var(--ff-secondary-regular);
	color: var(--black-color);
	background-color: white;
	-webkit-transition: .5s ease;
	-o-transition: .5s ease;
	transition: .5s ease;
	padding: 3px 10px;
	min-width: 300px;
	text-align: center;

	position: absolute;
	left: 50%;
	top: 120%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}


/* Infos Home Section */

.home-ended-section-container{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 80%;
	height: 95vh;
	padding-top: 5vh;
	margin: 0 auto;
}

.grid-work-link{
	font-family: var(--ff-primary);
	color: var(--black);
	font-size: 3rem;
	-webkit-transition: .3s;
	-o-transition: .3s;
	transition: .3s;
}
@media screen and (max-width: 1150px){

	.grid-work-link{
		font-size: 2rem;
	}
}
@media screen and (max-width: 650px){

	.grid-work-link{
		font-size: 1.4rem;
	}
}

.or-separator{
	margin: 50px 0 80px 0;
	font-family: var(--ff-primary);
	color: var(--black);
}

.mail-container{
	margin: 0 auto;
	max-width: 450px;
	width: 90%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.cta-mail-p{
	font-family: var(--ff-secondary-light);
	text-transform: uppercase;
	color: var(--medium-grey);
}
.arrow-mail{
	margin: 10px 0;
	color: var(--medium-grey);
}

.gradient-mail-container {
	background-image: -webkit-gradient(linear, left bottom, right top, 
		color-stop(0.25, var(--degrade-light-green) ), 
		color-stop(0.50, var(--degrade-dark-green) ),
		color-stop(0.75, var(--degrade-light-brown) ),
		color-stop(1, var(--degrade-dark-brown) )
		);
	height: 55px;
	width: 100%;
	max-width: 400px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.gradient-mail-container:hover, 
.gradient-mail-container:focus{
	border-radius: 45px;
	-webkit-box-shadow: 0 3px 6px lightgrey;
	        box-shadow: 0 3px 6px lightgrey;
}
.gradient-mail-container:hover .gradient-mail, 
.gradient-mail-container:focus .gradient-mail{
	background-color: transparent;
	color: var(--black-color);
	font-family: var(--ff-primary);
	border-radius: 45px;
}

.gradient-mail { 
	background-color: white;
	width: 98%;
	height: 88%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	color: var(--medium-grey);
	font-family: var(--ff-primary-light);
	font-size: 1rem;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.cta-mail-p-inverted, .arrow-mail-inverted, .gradient-mail-inverted{
	color: var(--white);
}


/* Footer */

footer{
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	padding: 10px;
	margin-bottom: 30px;
}

.rights{
	font-family: var(--ff-secondary-light);
	color: var(--medium-grey);
	font-size: 0.8rem;
}
.devBy{
	font-family: var(--ff-primary);
	color: var(--black);
	font-size: 0.6rem;
	margin-top: 10px;
}
.devBy i{
	color: var(--degrade-light-brown);
}



/* -------------------- CSS - Works Page--------------------  */

.mainWorkPage{
	width: 100%;
	margin-top: 100px;
}

.containerBySevenWork{
	width: 100%;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
.firstThreeWork-container, .secondeThreeWork-container, .aloneFullWork-container{
	margin: 100px auto;
}

/* Grid Works  */


/* Ligne Une - Grid */

.firstThreeWork-container{
	width: 100%;
	max-width: 1500px;
	padding: 0 5%;

	display: -ms-grid;

	display: grid;
	gap: 20px 50px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	grid-template-columns: repeat(auto-fill, minmax(40%, 450px)) ;
}
.workImgs{
	cursor: pointer;
}
.hoverGridImgEffect a{
	display: block;
	height: 90%;
	width: 100%;
	overflow: hidden;
}
.hoverGridImgEffect a:hover img,
.hoverGridImgEffect a:focus img{
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	        transform: scale(1.1);
}
.hoverGridImgEffect img{
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
}

.firstWorkGrid{
	-ms-grid-row: 1;
	-ms-grid-row-span: 2;
	grid-row: 1 / span 2;
	height: 700px;
}
.secondSmallWork{
	height: 300px;
}
.thirdMediumWork{
	height: 300px;
}



/* Ligne Deux - Grid */
.secondeThreeWork-container{
	width: 100%;
	max-width: 1500px;
	padding: 0 5%;

	display: -ms-grid;

	display: grid;
	gap: 50px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	grid-template-columns: repeat(auto-fill, minmax(40%, 450px));
}

.fourthWorkGrid{
	-ms-grid-column: 1;
	-ms-grid-column-span: 2;
	grid-column: 1 / span 2;
	height: 400px;
	width: 100%;
}
@media screen and (max-width: 1055px){

	.hoverGridImgEffect{
		margin-bottom: 50px;
	}

	.firstWorkGrid{
		height: 500px;
	}

	.fourthWorkGrid{
		-ms-grid-column: 1;
		grid-column: 1;
	}

	.firstThreeWork-container{
		margin-bottom: 0;
	}
}





/* Infos Works */

.quotesOfWorks{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 20px 0 10px 0;
}

.seventhMediumWork .quotesOfWorks, .seventhMediumWork .decorativBar{
	margin-left: 5%;
}

.quoteNameProjects{
	font-family: var(--ff-primary);
	color: var(--black-color);
	font-size: 1rem;
	margin-right: 20px;
}

.quoteProjectDomaine{
	font-family: var(--ff-secondary-light);
	color: var(--medium-grey);
	font-size: 1rem;
}

.decorativBar{
	width: 70px;
	height: 1px;
	background-color: var(--light-grey);
}

.workEnded{
	height: 400px;
}


/* ------ Project Details Page ------ */

.heroSection-project{
	width: 100%;

	overflow: hidden;
	-o-object-fit: cover;
	   object-fit: cover;
	max-height: 100vh;
}

.infos-hero, .describe-project-container{
	max-width: 1080px;
	width: 90%;
	margin: 50px auto;
}

.infos-hero h1{
	font-family: var(--ff-primary);
	color: var(--black-color);
	margin: 25px 0;
	font-size: 2rem;
	max-width: 60%;
}

.domainProject, .clientHero{
	font-family: var(--ff-secondary-light);
	color: var(--medium-grey);
}
.infos-hero a{
	font-family: var(--ff-secondary-regular);
	font-weight: bolder;
	color: var(--black-color);
}

.banner-project, .smartMockup-banner{
	height: 500px;
	overflow: hidden;
	-o-object-fit: cover;
	   object-fit: cover;
	position: relative;
	margin-bottom: 200px;
}



.describe-project-container{
	opacity: 0;
	margin: 0 auto 200px auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	-webkit-transform: translateY(10%);

	    -ms-transform: translateY(10%);

	        transform: translateY(10%);
	-webkit-transition: .5s ease-out;
	-o-transition: .5s ease-out;
	transition: .5s ease-out;
}
.describe-project-container img{
	width: 300px;
	height: auto;
	object-fit: cover;
}

.description-project{
	width: 50%;
	padding-left: 50px;
}

.description-project h2{
	font-family: var(--ff-primary);
	color: var(--black-color);
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.description-project p{
	margin: 10px auto;
	color: var(--medium-grey);
	font-family: var(--ff-secondary-light);
}
.describe-project-container strong{
	font-weight: bolder;
	color: var(--black-color);
}

.smartMockup-banner{
	height: 650px;
	margin-bottom: 100px;
}
.smartMockup-banner img{
	top: -10%;
}

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

	.banner-project{
		margin-bottom: 100px;
		height: 300px;
	}

	.describe-project-container{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		margin: 100px auto;
	}

	.describe-project-container img{
		width: 80%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

	.description-project{
		width: 80%;
		margin-top: 50px;
		padding-left: 0;
	}

	.smartMockup-banner{
		height: 450px;
		margin-bottom: 0;
	}
}


/* Grid Projects */

.container-gridProject{
	max-width: 1080px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin: 200px auto;
	-webkit-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
}

.ctns-grid-projects{
	height: 300px;
	width: 50%;
	padding: 10px;
	-webkit-transition: .5s ease-out;
	-o-transition: .5s ease-out;
	transition: .5s ease-out;
}
.ctns-grid-projects img{
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.changeGridOnRight{
	margin-right: 15%;
}
.changeGridOnLeft{
	margin-left: 15%;
}

.small-ctn-grid{
	width: 35%;
}


.project-title{
	font-size: 2rem;
	font-family: var(--ff-primary);
	color: var(--black-color);
	text-align: center;
	margin-bottom: 150px;
}

.carrousel-link-project{
	width: 90%;
	margin: 50px auto;
	max-width: 1080px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

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

	.container-gridProject{
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}
	.ctns-grid-projects, .small-ctn-grid{
		width: 40%;
	}
	.changeGridOnLeft, .changeGridOnRight{
		margin: 0;
	}
	.container-gridProject{
		margin: 0 auto 100px auto;
	}
}
@media screen and (max-width: 650px){

	.ctns-grid-projects, .small-ctn-grid{
		width: 90%;
	}
	.carrousel-link-project{
		width: 80%;
	}
}



/* Link Next Prev */

.prev-next-links{
	font-family: var(--ff-secondary-light);
	font-size: 1rem;
	color: var(--medium-grey);
	position: relative;
}
.prev-next-links strong{
	color: var(--black-color);
	font-family: var(--ff-secondary-regular);
	margin: 0 5px;
}

.prev-next-links i{
	color: var(--black-color);
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	        transform: translateY(-50%);
	right: 20%;
	-webkit-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
	opacity: 0;
}

.prev-next-links .inverted-i-link{
	top: 50%;
	-webkit-transform: scaleX(-1) translateY(-50%);
	    -ms-transform: scaleX(-1) translateY(-50%);
	        transform: scaleX(-1) translateY(-50%);
	left: 20%; 
	right: auto;
}

.prev-next-links:hover i, 
.prev-next-links:focus i{
	right: -20%;
	opacity: 1;
}

.prev-next-links:hover .inverted-i-link, 
.prev-next-links:focus .inverted-i-link{
	left: -20%;
	right: auto;
}



/* ------- ABOUT ------- */
.bodyAbout{
	background-color: var(--black-color);
}

.hero-about{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.heroBackground{
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -1;

	background-image: url('img/aboutImg/belgiumMap.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;

	height: 100%;
	width: 100%;
	-webkit-transform: rotateX(0deg);
	        transform: rotateX(0deg);
}


.title-hero-about{
	font-family: var(--ff-primary);
	font-size: 6rem;
	color: var(--white);
	position: absolute;

	-webkit-transition: .3s ease-out;

	-o-transition: .3s ease-out;

	transition: .3s ease-out;
}

.title-One-about{
	top: 15%;
	left: 10%;
}
.title-Two-about{
	top: 30%;
	right: 10%;
}

.whoIam{
	position: absolute;
	left: 10%;
	top: 30%;
	max-width: 300px;
	color: var(--white);
	font-family: var(--ff-primary-light);
}

.located{
	font-size: 1rem;
	color: var(--medium-grey);
	font-family: var(--ff-secondary-light);

	position: absolute;
	top: 55%;
	left: 25%;
}

.located strong{
	color: var(--white);
	font-family: var(--ff-secondary-regular);
}

.mail-container-about{
	position: absolute;
	bottom: 5%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}

.gradient-mail-about{
	background-color: var(--black-color);
}
.gradient-mail-container-about:hover{
	-webkit-box-shadow: 0 3px 12px black;
	        box-shadow: 0 3px 12px black;
}

.about-main{
	margin: 200px auto;
}

.whatIDo{
	text-align: center;
	font-family: var(--ff-secondary-thin);
	font-size: 3rem;
	color: var(--medium-grey);
	text-transform: uppercase;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--medium-grey);
}

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

	.title-hero-about{
		font-size: 4rem;
	}

	.whoIam{
		top: 25%;
	}
}

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

	.title-hero-about{
		font-size: 2.5rem;
	}
}

/* Marquee */

.marquee-container{
	width: 100%;
	height: 100vh;
	display: block;
	overflow: hidden;

	color: var(--white);
	font-family: var(--ff-primary);
	font-size: 3.5rem;
	text-transform: uppercase;

	position: relative;
	-webkit-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
}

.marquee{
	display: block;
	white-space: nowrap;
	width: 100%;
	margin: 20px auto;

	position: absolute;
	top: 0%;
	left: 0;
}

.txt-marquee{
	display: inline-block;
	padding-left: 100%;
	text-align: center;
	min-width: 100%;
	height: 100%;
	line-height: 30px;

	-webkit-animation: marquees 9s linear 222;

	        animation: marquees 9s linear 222;
}

/* --------- Marquees */

/* web */
.marquee-web{
	top: 10%;
}
.marquee-web2 .txt-marquee{ 
	-webkit-animation-delay: 3.2s; 
	        animation-delay: 3.2s; 
}
.marquee-web3 .txt-marquee{ 
	-webkit-animation-delay: 6.4s; 
	        animation-delay: 6.4s; 
}


/* Graphic */
.marquee-graphic{
	top: 25%;
}
.marquee-graphic2 .txt-marquee{ 
	-webkit-animation-delay: 5s; 
	        animation-delay: 5s; 
}

/* Photo */
.marquee-photo{
	top: 40%;
}
.marquee-photo2 .txt-marquee{ 
	-webkit-animation-delay: 5s; 
	        animation-delay: 5s; 
}

/* Archi */
.marquee-archi{
	top: 55%;
}
.marquee-archi2 .txt-marquee{
	-webkit-animation-delay: 3s;
	        animation-delay: 3s; 
}
.marquee-archi3 .txt-marquee{
	-webkit-animation-delay: 6s;
	        animation-delay: 6s; 
}

/*  3D Model */
.marquee-3D{
	top: 70%;
}
.marquee-3D3 .txt-marquee{
	-webkit-animation-delay: 5s;
	        animation-delay: 5s; 
}

/* Game */
.marquee-game{
	top: 85%;
}
.marquee-game2 .txt-marquee{
	-webkit-animation-delay: 4.5s;
	        animation-delay: 4.5s; 
}

.marqueesInverted .txt-marquee, .marqueesInverted2 .txt-marquee{
	-webkit-animation: marqueesInverted 9s linear 222;
	        animation: marqueesInverted 9s linear 222;
}
.marqueesInverted2 .txt-marquee{
	-webkit-animation-delay: 4.5s;
	        animation-delay: 4.5s; 
}

/* Fiche Hover  */

.hoverTicketMarquee{
	opacity: 0;

	z-index: 5;
	max-height: 200px;
	max-width: 200px;

	padding: 25px;

	position: absolute;
	top: 0;
	left: 0;

	-webkit-transform: scale(0.3);

	    -ms-transform: scale(0.3);

	        transform: scale(0.3);

	-webkit-transform-origin: center center;

	    -ms-transform-origin: center center;

	        transform-origin: center center;

	background-color: var(--light-grey);
	-webkit-box-shadow: 0 3px 12px var(--medium-grey);
	        box-shadow: 0 3px 12px var(--medium-grey);
	border-radius: 10px;

	-webkit-transition: .15s ease-out;
	-o-transition: .15s ease-out;
	transition: .15s ease-out;

}

.hoverTicketMarquee img{
	width: 100px;
	height: 100px;
}

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

	.marquee-3D2{
		display: none;
	}
}
@media screen and (max-width: 750px){

	.marquee-container{
		font-size: 2.5rem;
	}

	.marquee-web3{
		display: none;
	}

	.marquee-web2 .txt-marquee{ 
		-webkit-animation-delay: 4.6s; 
		        animation-delay: 4.6s; 
	}
}

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

	.marquee-photo2 .txt-marquee{ 
		-webkit-animation-delay: 4.5s; 
		        animation-delay: 4.5s; 
	}	
}

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

	.marquee-container{
		font-size: 2rem;
	}	
}

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

	.marquee-container{
		font-size: 1.5rem;
	}	
}


/* Fiche Hover  */

@-webkit-keyframes marquees{

	0%{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	100%{
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
}

@keyframes marquees{

	0%{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
	100%{
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
}

@-webkit-keyframes marqueesInverted{

	0%{
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	100%{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}

@keyframes marqueesInverted{

	0%{
		-webkit-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	100%{
		-webkit-transform: translateX(0);
		        transform: translateX(0);
	}
}


/* Ended About */

.ended-about-section{
	width: 100%;
	text-align: center;
	margin-bottom: 200px;
}
.ended-about-section .relation{
	color: var(--medium-grey);
	font-size: 1.2rem;
	font-family: var(--ff-secondary-light);
	text-transform: uppercase;
	margin-bottom: 20px;
}
.societyName{
	color: var(--white);
	font-family: var(--ff-primary);
	font-size: 0.9rem;
}


.footerAbout{
	margin-top: 150px;
}

.footerAbout .devBy{
	color: var(--light-grey)
}