@charset "utf-8";
   
*, *:before, *:after {
	cursor:none !important;
	box-sizing: inherit;
	font-family:'SaansRegular', sans-serif;
	font-weight:normal;
	padding:0;
	margin:0;
}

html, body {
	box-sizing:border-box;
	width: 100%;
    height: 100%;
	background-color:#FFF;
	color:black;
}

/*--cursor--*/

.cursor {
    /*The position is fixed so it can stay on screen
even when scrolling*/
	position: fixed;
    width: 8px; 
    height: 8px;
    border-radius: 50%;
    background-color: black;
	/*To put it on the center of the cursor*/
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
	 /* So the JS can work properly*/
    pointer-events:none;
	z-index:2000
}

.hover-cursor {
    width: 22px;
    height: 22px;
    background-color:#ffdd00;
    transition: width 0.5s height 0.5s;
}

/*--cursor--*/

#timeout {
position:fixed;
display:block;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(255, 255, 255, 0.5);
    backdrop-filter:blur(5px);
    -o-backdrop-filter:blur(5px);
    -ms-backdrop-filter:blur(5px);
    -moz-backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
z-index:3000;
}

#lineargradient	{
	position:fixed;
	width:100%;
	top:0;
	height:300px;
	background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1) );
	pointer-events: none;
	z-index:99;
} 

.header {
	position:fixed;
	width:100%;
	height:60px;
	top:0;
	padding:35px 35px 0 35px;
	z-index:101;
}

.enter {
	position:fixed;
	top:38px;
	right:35px;
	z-index:101;
}

h2 {
	font-size: 1.2rem;
	line-height: 120%;
	text-align:left;
}

h3 {
	font-size: 1rem;
	line-height:120%;
	text-align:left;
}

h4 {
	font-size: 0.8rem;
	line-height: 120%;
	text-align:left;
}

a{
	text-decoration: none;
	color:#000
}

a:hover{
	text-decoration:underline; 
}

.flex-wrapper {
	width:100%;
}

.flex-grid {
	display: flex;
	justify-content: space-between;
	text-align:left;
}

.flex-grid:nth-child(odd) div {padding: 0;}
.flex-grid:nth-child(even) div {padding: 0;}


/* Debut Swiper */
#swiper {
width:100%;
height:100%;
}

.swiper-slide {
background-position: center;
background-size: cover;
}
/* Fin Swiper */

/* start header */
@media (min-width: 980px) {
	.header .flex-grid {margin-bottom:3px;}
	.header .flex-grid:first-child {margin-top:0;}
	.header .d-col-2 {width: 20%;}
}

@media only screen and (min-width: 567px) and (max-width: 980px) {
	.header .flex-grid {flex-flow: row wrap;}
	.header .m-col-2	{width: 33.33%; margin-top:0;}
	.header .t-col-6	{width: auto;}
	.header .m-col-l 	{width: 66.66%; margin-top:-5px; margin-bottom:25px;}
	#lineargradient		{height:250px;background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));} 
}

@media only screen and (min-width: 0px) and (max-width: 567px) {
	.header .flex-grid 	{flex-flow: row wrap;}
	.header .m-col-2	{width: 30%; margin-top:0;}
	.header .m-col-l 	{width: 70%; margin-top:-5px; margin-bottom:20px; }
	.header .m-col-10 	{width:auto;}
	.enter {top:32px;}
}
/* end header */



@media (min-width: 980px) {
	.flex-grid	{margin-bottom:3px;}
}

@media only screen and (min-width: 567px) and (max-width: 980px) {	
	.flex-grid	{flex-flow: row wrap;}
	.t-col-3	{width: 20%	; margin-bottom:20px;}
	.t-col-6	{width: 66.66%;margin-top:0;margin-bottom:15px}
	.flex-grid:first-child .t-col-6 {margin-top:0;}
	h2 {font-size: 1.1rem;}
}

@media only screen and (min-width: 0px) and (max-width: 567px) {
	.flex-grid	{flex-flow: row wrap;}
	.m-col-2	{width: 30%;margin-top:0;margin-bottom:25px;}
	.m-col-10	{width: 70%;margin-top:0;margin-bottom:15px;}
	h2 {font-size: 0.85rem;}
}

@media (max-width: 567px) and (orientation:portrait) {
	#lineargradient		{height:200px;background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));} 
	h2 {font-size: 0.7rem;}
}