@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-portrait {
    width: 300px;
    height: 300px;
    border-radius: 50%;
	background-image:url(../img/a-propos/harqueta_portrait_165613_2.jpg);
    /*Keeps our custom cursor on the user's screen*/
    position: fixed;
    /*makes sure the background images will sort of fit the cursor*/
    background-size: cover;
	pointer-events: none; 
	transition: width 0.5s height 0.5s;
	z-index:2000
}

/*--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:160px;
	background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1) 45%);
	pointer-events:none;
	z-index:99;
} 

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

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

h1 {
	font-size:3.5rem;
	line-height:100%;
	text-align:left;
}

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

p {
	font-size: 1rem;
	text-align:left;
	padding:7px 0 7px 0;
}

span {
	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;
}

h5 {
	font-size: 0.7rem;
	line-height: 120%;
	text-align:left;
}

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

a:hover {
	text-decoration:underline; 
}

#titre {
	position:relative;
	min-height:55px;
	margin-top:-65px;
	margin-bottom:35px;
	z-index:98;
}

.flex-wrapper {
	margin-top:300px;
	padding-right:35px;
	padding-left:35px;
}

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

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

.text img {width:22px;}

.gallery img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important; 
z-index:98;
}

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

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

/* 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.34%; margin-top:0;}
	.header .t-col-6	{width: auto;}
	.header .m-col-l 	{width: 66.66%; margin-top:-5px; margin-bottom:25px;}
	#lineargradient		{height:180px;background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1) 43%);}
}

@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;}
	#lineargradient		{height:160px;background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1) 43%);}
	.home {top:32px;}
}
/* end header */


@media (min-width: 980px) {
	.flex-grid	{margin-bottom:15px;}
	.flex-grid:first-child {margin-top:0;}
	.d-col-2 	{width: 16.67%;}
	.d-col-3 	{width: 20%;}
	.d-col-6	{width: 66.66%;}
	.text 		{margin-right:20%}
	.gallery .flex-grid-gallery {flex-flow: row wrap;}
	.gallery .flex-grid-gallery .d-col-3	{width:33.33%;}
}

@media only screen and (min-width: 567px) and (max-width: 980px) {	
	.flex-grid	{flex-flow: row wrap;}
	.flex-grid:first-child .t-col-6 {margin-top:0;}
	.t-col-3	{width: 20%; margin-bottom:20px;	}
	.t-col-6	{width: 66.66%;margin-bottom:15px}
	.gallery .flex-grid-gallery {flex-flow: row wrap;}
	.gallery .flex-grid-gallery .d-col-3	{width:33.33%;}
	.gallery .flex-grid-gallery .t-col-6	{width: 33.33%;}
	.text {margin-right:10%}
	h1 {font-size: 3rem;}
	h2 {font-size: 1.1rem;}
	span {font-size: 1.1rem;}
	.text img {width:20px;}
	h3 {font-size: 0.9rem;}
	h4 {font-size: 0.7rem;}
	h5 {font-size: 0.65rem;}
}

@media only screen and (min-width: 0px) and (max-width: 567px) {
	.flex-wrapper {margin-top:212px;}
	#titre {min-height:40px;}
	.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;}
	.gallery .flex-grid-gallery {flex-flow: row wrap;}
	.gallery .flex-grid-gallery .m-col-12 {width: 100%;}
	.text {margin-right:2%}
	h1 {font-size: 2.5rem;}
	h2 {font-size: 0.85rem;}
	span {font-size: 0.85rem;}
	.text img {width:15px;}
	h3 {font-size: 0.85rem;}
	h4 {font-size: 0.65rem;}
	h5 {font-size: 0.55rem;}	
}

@media (max-width: 567px) and (orientation:portrait) {
	h2 {font-size: 0.7rem;}
	h3 {font-size: 0.7rem;}
	span {font-size: 0.7rem;}
}

footer {
	margin-top:55px;
	padding-bottom:35px;
}