html
{
	scroll-behavior: smooth;
}

body
{
	margin: auto;
	color: #F5F1F8;
	background-color: #020202;
	color-text: #7500FF;
  	overflow-x: hidden;
	cursor: url("../img/cursor.png"), auto;
}

a:hover, button:hover, li:hover
{
	cursor: url("../img/cursor2.png"), auto;
	transition: all 2s ease-in-out;
}

.btn-primary:hover, .btn-primary.focus, .btn-primary:focus, .btn-primary:active, .active
{
	background-color: transparent !important;
}

p::selection, a::selection, h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, img::selection, .scrolling::selection, em::selection, mark::selection, strong::selection
{
	color: white;
	background-color: #7500FF;
}

.container-fluid
{
	padding: 0px;
}

.navbar, .section_projets, .section_presentation
{
	padding-left: 15px;
	padding-right: 15px;
	z-index: 80;
}

.section_presentation
{
	margin-top: 25px;
	margin-bottom: 25px;
}

.navbar
{
	padding-top: 15px;
}

a, a:hover
{
	text-decoration: none;
}

.projet a
{
	color: #F5F1F8;
	text-decoration: none;
	transition: all 0.2s ease-in !important;
}

.projet a:hover + h3
{
	color: #7500FF;
	text-decoration: none;
}

.projet a:hover
{
	border-top: solid #7500FF 1px;
}

.section_texte a, .section_accueil a, .section_presentation a
{
	color: white;
	text-decoration: underline;
}

.section_texte a:hover, .section_accueil a:hover, .section_presentation a:hover
{
	color: #7500FF;
	text-decoration: underline;
}

h1
{
	font-family: 'NeueMontreal';
	font-size: 20px;
	line-height: 25px;
	text-transform: uppercase;
}

.rafale
{
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	position: relative;
	z-index: 10;
}

.logo3D
{
	width: 100%;
	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
	mix-blend-mode: exclusion;
	z-index: 11;
	margin-top: 0px !important;
}

span
{
	color: #7500FF;
}

.vjs-big-play-button span
{
	color: #F5F1F8 !important;
	box-shadow: 2px 5px 16px 0px black !important;
}

h2
{
	font-size: 20px;
	line-height: 25px;
}

h3
{
	font-size: 20px;
	line-height: 25px;
}

p
{
	font-size: 15px;
	line-height: 17px;
}

h2, h3, p
{
	font-family: 'NeueMontreal';
	text-transform: uppercase;
}

.zoom
{
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.zoom img
{
	-moz-transition: all 0.8s;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}

.zoom:hover img
{

	moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}


.btn-primary
{
	color: #F5F1F8;
	border: solid #F5F1F8 1px;
	border-radius: 30px;
	padding: 0px 20px 0px 20px;
	background-color: #020202;
	font-family: 'NeueMontreal';
	transition: all 0.1s ease-in !important;
	font-size: 20px;
	text-transform: uppercase;
	box-shadow: 2px 5px 16px 0px black;
}

.btn-primary:hover, .btn-primary.focus, .btn-primary:focus
{
	outline: none !important;
	box-shadow: none !important;
	background-color: #7500FF !important;
	border-color: #7500FF !important;
	box-shadow: 2px 5px 16px 0px black !important;
}

.btn-outline-primary, .btn-outline-primary a
{
	color: #F5F1F8;
	border: solid #F5F1F8 1px;
	border-radius: 30px;
	padding: 0px 20px 0px 20px;
	background-color: #020202;
	font-family: 'NeueMontreal';
	transition: all 0.1s ease-in !important;
	font-size: 20px;
	text-transform: uppercase;
	box-shadow: 2px 5px 16px 0px black;
}

.btn-outline-primary:hover, .btn-primary.focus, .btn-primary:focus
{
	outline: none !important;
	box-shadow: none !important;
	background-color: #7500FF !important;
	border-color: #7500FF !important;
	box-shadow: 2px 5px 16px 0px black !important;
}

.btn-secondary
{
	color: #F5F1F8;
	border: solid #F5F1F8 1px;
	border-radius: 30px;
	padding: 0px 10px 0px 10px;
	margin: 10px 15px 25px 0px;
	background-color: #020202;
	font-family: 'NeueMontreal';
	transition: all 0.1s ease-in !important;
	font-size: 20px;
	text-transform: uppercase;
	box-shadow: 2px 5px 16px 0px black;
}

.meme1, .meme2, .meme3, .meme4, .meme5
{
	margin: 0px 15px 0px 15px;
	position: absolute;
	z-index: 1000;
	width: 256px;
}

.btn-secondary:hover, .btn-secondary.focus, .btn-secondary:focus, .btn-secondary:active
{
	outline: none !important;
	box-shadow: none !important;
	background-color: #7500FF !important;
	border-color: #7500FF !important;
	box-shadow: 2px 5px 16px 0px black !important;
}


.fleurs img
{
	pointer-events: none;
}

.tablink
{
	margin-bottom: 10px;
}

.tabcontent 
{
  display: none;
  height: 100%;
}

nav
{
	z-index: 98;
}

.filterDiv 
{

  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

.btn-filter 
{
	color: #F5F1F8;
	border: solid #F5F1F8 1px;
	border-radius: 30px;
	padding: 0px 20px 0px 20px;
	background-color: #020202;
	font-family: 'NeueMontreal';
	transition: all 0.1s ease-in !important;
	font-size: 20px;
	margin-right: 8px;
	text-transform: uppercase;
}

.btn-filter:hover 
{
  	outline: none !important;
	box-shadow: none !important;
	background-color: #7500FF;
	border-color: #7500FF !important;
}

.btn-filter.active 
{
  	outline: none !important;
	box-shadow: none !important;
	background-color: #7500FF !important;
	border-color: #7500FF !important;
}

.bandeau
{
	position: sticky;
	top: 0;
	z-index: 10;
	box-shadow: 2px 5px 16px 0px black;
}

.scroll-limit
{
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 10;
}

.scrolling
{
	position: relative;
    font-size: 20px;
	font-family: 'NeueMontreal';
    animation: defilement 60s infinite linear;
	color: white;
	background-color: #7500FF;
	line-height: 25px;
}

.scrolling2
{
	position: relative;
    font-size: 20px;
	font-family: 'NeueMontreal';
    animation: defilement2 150s infinite linear; 
	color: white;
	background-color: #7500FF;
	line-height: 25px;
}

.scrolling:after
{
	content: attr(data-text);
	position: absolute;
	white-space: nowrap;
}


@keyframes defilement 
{
 0%, 100% {
margin-left:0%;
}
 99.99% {
margin-left:-100%;
}
}

@keyframes defilement2 
{
 0%, 100% {
margin-left:-100%;
}
 99.99% {
margin-left:100%;
}
}

.dust
{
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	mix-blend-mode: difference;
	opacity: 25%;
	pointer-events: none;
}

.fleur01
{
	position: fixed;
	z-index: 99;
	left: 0;
	bottom: 0;
	width: 120px;
}

.fleur02
{
	position: fixed;
	z-index: 99;
	left: 20%;
	bottom: 0;
	width: 112px;
}

.fleur03
{
	position: fixed;
	z-index: 99;
	left: 30%;
	bottom: 0;
	width: 112px;
}

.fleur04
{
	position: fixed;
	z-index: 99;
	right: 10%;
	bottom: 0;
	width: 120px;
}


.fleur05
{
	position: fixed;
	z-index: 99;
	right: 0;
	bottom: 0;
	width: 85px;
}

.fleur06
{
	transform: rotate(180deg) !important;
	position: absolute;
	z-index: 99;
	left: 12%;
}

.fleur07
{
	transform: rotate(180deg) !important;
	position: absolute;
	z-index: 99;
	left: 20%;
}

.fleur08
{
	transform: rotate(180deg) !important;
	position: absolute;
	z-index: 99;
	left: 50%;
}

.fleur09
{
	transform: rotate(180deg) !important;
	position: absolute;
	z-index: 99;
	right: 25%;
}

.fleur10
{
	transform: rotate(180deg) !important;
	position: absolute;
	z-index: 99;
	right: 15%;
}

.sous-titre, .tags
{
	border-top: solid #F5F1F8 1px;
	padding: 18px 0px 4px 0px;
}

.section_projets, .section_memes, .section_texte, .section_supports, .section_tags, .section_3d, .section_presentation
{
	padding-left: 15px;
	padding-right: 15px;
}

.section_memes
{
	margin-top: -10px;
}

.memes
{
	margin-top: 15px;
}

.info_meme
{
	margin-top: 10px;
}

.section_projets
{
	margin-top: 20px;
	margin-bottom: -80px;
}

.btn-filter
{
	margin-bottom: 10px;
}

.projet
{
	margin: 50px 0px 0px 0px;
}

.supports_col
{
	margin-top: 15px;
	margin-bottom: 15px;
}

h2
{
	margin-bottom: -50px;
}

.rotate
{ 
	animation: perspect 9s infinite linear;
	padding-top: 70px;
	padding-bottom: 70px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: -20px;
}

.rotate2
{ 
	animation: perspect 10s infinite linear;
	padding-top: 70px;
	padding-bottom: 70px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: -20px;
}

.rotate3
{ 
	animation: perspect 11s infinite linear;
	padding-top: 70px;
	padding-bottom: 70px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: -20px;
}

.rickroll
	{
		position: fixed;
		z-index: 1000;
		bottom: 0%;
		right: 0%;
		margin-bottom: 15px;
		margin-right: 15px;
	}

.langues
{
	position: fixed;
		z-index: 1000;
		bottom: 0%;
		margin-bottom: 15px;
		margin-left: 15px;
}

@keyframes perspect {
   0% {transform:perspective(1000px) rotateY(0deg)}
   25% {transform:perspective(1000px) rotateY(90deg)}
   50% {transform:perspective(1000px) rotateY(180deg)}
   75% {transform:perspective(1000px) rotateY(270deg)}
   100% {transform:perspective(1000px) rotateY(360deg)}
}

.carousel-item video
{
	width: 100%;
}


@media (min-width: 576px) 
{

}

@media (min-width: 768px) 
	{
		
	.section_presentation
		{
			margin-top: 70px;
			margin-bottom: 50px;
		}

		.carousel-item video
{
	width: 52%;
}
		
	.rotate
	{ 
		padding-top: 70px;
		padding-bottom: 70px;
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: -50px;
	}
		
	.rotate2
	{ 
		padding-top: 90px;
		padding-bottom: 90px;
		padding-left: 20px;
		padding-right: 20px;
		margin-bottom: -50px;
	}		
		
	.rotate3
	{	 
		padding-top: 120px;
		padding-bottom: 120px;
		padding-left: 40px;
		padding-right: 40px;
		margin-bottom: -50px;
	}
		
	
	.fleur01
	{
		width: 150px;
	}

	.fleur02
	{
		width: 142px;
	}

	.fleur03
	{
		width: 142px;
	}

	.fleur04
	{
		width: 150px;
	}

	.fleur05
	{
		width: 115px;
	}
	
	.navbar, .section_projets, .section_memes, .section_texte, .section_supports, .section_tags, .section_3d, .section_presentation
	{
		padding-left: 25px;
		padding-right: 25px;
	}
		
	.navbar
	{
		padding-top: 0px;
	}

		
	.section_projets
	{
		margin-top: -50px;
	}
	
	h1
	{
		font-family: 'NeueMontreal';
		font-size: 30px;
		line-height: 35px;
	}

	h2
	{
		font-size: 30px;
		line-height: 35px;
	}

	h3
	{
		font-size: 30px;
		line-height: 35px;
	}

	p
	{
		font-size: 18px;
		line-height: 19px;
	}
	
	.presentation
	{
		margin-bottom: 120px;	
	}
	
	.scrolling, .scrolling2
	{
		font-size: 30px;
		border-top: solid #7500FF 1px;
		border-bottom: solid #7500FF 1px;
		line-height: 35px;
	}
	
	.btn-primary, .btn-outline-primary, .btn-filter
	{
		margin-top: 20px;
		border: solid #F5F1F8 1px;
		border-radius: 50px;
		padding: 0px 20px 0px 20px;
		background-color: #020202;
		font-family: 'NeueMontreal';
		font-size: 20px;
	}
	
	.btn-filter
	{
		margin-bottom: -8px;
		margin-right: 10px;
	}
	
	#myBtnContainer
	{
		margin-top: 100px;
		margin-bottom: 20px;
	}
	
	.projet
	{
		margin: 50px 0px 50px 0px;
	}
	
	.memes
	{
		margin-top: 30px;
	}
		
	.meme1, .meme2, .meme3, .meme4, .meme5
	{
		width: 456px;
	}
	
	.info_meme
	{
		margin: 0px 15px 0px 15px;
	}
	
	.sous-titre, .tags
	{
		border-top: solid #F5F1F8 1px;
		padding: 5px 0px 4px 0px;
	}
		
	.titre
		{
			padding-bottom: 30px;
		}
	
	.projet a:hover
	{
		border-top: solid #7500FF 1px;
	}
		
	.btn-secondary
	{
		color: #F5F1F8;
		border: solid #F5F1F8 1px;
		border-radius: 30px;
		padding: 0px 10px 0px 10px;
		margin: 30px 15px 25px 15px;
		background-color: #020202;
		font-family: 'NeueMontreal';
		transition: all 0.1s ease-in !important;
		font-size: 20px;
	}
		
	.tablink
	{
		margin-bottom: 0px;
	}

	.rickroll
	{
		position: fixed;
		z-index: 1000;
		bottom: 0%;
		right: 0%;
		margin-bottom: 25px;
		margin-left: 25px;
	}
		
	.langues
{
	position: fixed;
	z-index: 1000;
	bottom: 0%;
	margin-bottom: 25px;
	margin-left: 25px;
}
	

	.rafale
	{
		object-fit: cover;
		width: 100vw;
		height: 100vh;
		position: relative;
		z-index: 10;
	}

	.section_projets
	{
		margin-top: -90px;
		margin-bottom: -120px;
	}
		
	.section_memes
		{
			margin-top: -5px;
			margin-bottom: -50px;
		}
	
}


@media (min-width: 992px) 
{ 
 
}

@media (min-width: 1200px) 
{
	
	.rickroll
{
	position: fixed;
	z-index: 1000;
	bottom: 0%;
	right: 0%;
	margin-bottom: 25px;
	margin-right: 25px;
}

.carousel-item video
{
	width: 35% !important;
}
	
	.langues
{
	position: fixed;
	z-index: 1000;
	bottom: 0%;
	margin-bottom: 25px;
	margin-right: 25px;
}
	
	.btn-primary, .btn-outline-primary, .btn-filter
	{
		margin-top: 20px;
		border: solid #F5F1F8 1px;
		border-radius: 50px;
		padding: 0px 20px 0px 20px;
		background-color: #020202;
		font-family: 'NeueMontreal';
		font-size: 30px;
	}
	
	.section_projets
	{
		margin-top: -90px;
		margin-bottom: -100px;
	}
	
	.section_memes
	{
		margin-top: 0px;
		margin-bottom: -90px;
	}
	
	
	h1
	{
		font-family: 'NeueMontreal';
		font-size: 50px;
		line-height: 55px;
		margin-bottom: 15px;
		text-transform: uppercase;
	}

	h2
	{
		font-size: 50px;
		line-height: 55px;
	}

	h3
	{
		font-size: 50px;
		line-height: 55px;
	}

	p
	{
		font-size: 25px;
		line-height: 27px;
	}
	
	
	.scrolling, .scrolling2
	{
		font-size: 50px;
		border-top: solid #7500FF 1px;
		border-bottom: solid #7500FF 1px;
		line-height: 55px;
	}
	
	.btn-secondary
	{
		padding: 0px 14px 0px 14px;
		margin: 30px 15px 25px 15px;
		font-size: 30px;
	}
	
	.rafale
	{
		margin-bottom: -20px;
		margin-top: 0px;
	}
	
	.rafale2
	{
		margin-bottom: 5px;
	}
	
	.rotate
	{ 
		padding-top: 70px;
		padding-bottom: 70px;
		margin-bottom: -50px;
	}
		
	.rotate2
	{ 
		padding-top: 140px;
		padding-bottom: 140px;
		padding-left: 30px;
		padding-right: 30px;
		margin-bottom: -50px;
	}		
		
	.rotate3
	{	 
		padding-top: 260px;
		padding-bottom: 260px;
		padding-left: 120px;
		padding-right: 120px;
		margin-bottom: -50px;
	}
	
	.logo3D
{
	width: 50%;
	margin-top: 120px;
	margin-bottom: 50px;
}
	
.carousel-cell video
	{
		height: 700px;
	}


	
}



















@font-face {
    font-family: 'NeueMachinaRegular';
    src: url('../font/NeueMachina-Regular.woff2') format('woff2'),
         url('../font/NeueMachina-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueMachinaBold';
    src: url('../font/NeueMachina-Ultrabold.woff2') format('woff2'),
         url('../font/NeueMachina-Ultrabold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../font/neuemontreal-regular-webfont.woff2') format('woff2'),
         url('../font/neuemontreal-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}