* {
box-sizing:border-box;
scroll-behavior: smooth !important;
}

@font-face {
font-family: 'Sono 800';
src: url('../fonts/Sono-ExtraBold.woff2') format("woff2"),
url('../fonts/Sono-ExtraBold.ttf') format("ttf"),
url('../fonts/Sono-ExtraBold.otf') format("otf");
font-style: normal;
}

@font-face {
font-family: 'Moche';
src: url('../fonts/Moche-Regular.woff2') format("woff2"),
url('../fonts/Moche-Regular.woff') format("woff"),
url('../fonts/Moche-Regular.eot') format("eot");
font-style: normal;
}


html {
height:100vh;
overflow-x:hidden;
overflow-y:scroll;
width:100vw;
background-color:#fff5ee;
cursor: url('../images/cursors/cursor1.png'), auto;
z-index: -2;
}
a:hover{
  cursor: url('../images/cursors/cursor2.png'), auto;
}
#openstreetmap:hover{
 cursor: url('../images/cursors/cursor3.png'), auto; 
}

body {
background-color:#fff5ee;
color:black;
font-display:swap;
font-family:'EB Garamond',arial,sans-serif;
font-weight:300;
position:absolute;
text-stroke:none;
}

h1 {
font:3.5em 'Moche','Sono 800','times',serif;
text-align:center;
z-index: -5;
margin-bottom:2vh;
}

h3 {
font-size:1.25em;
text-align:center
}

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

p {
font-size:1.25em;
hyphens:auto;
text-align:left;
text-align:inter-word;
word-break:break-word;
}

#logo {
height:12vh;
}

header {
  position: fixed;
text-align:center;
top:0;
width:100vw;
z-index:20
}


#pagetitle {
display:block;
margin-left:33.33vw;
position:absolute;
text-align:center;
top:20vh;
width:33.33vw;
border-radius: 30px;
z-index: 2;
}

#pagetitle h1 {
margin-bottom:0;
font-size: 3.5em;
padding:2.5%;
line-height:1.25em ;
}
#pagetitle p{
  font-size: 1.75em;
  text-align:center;
  margin-top:4.66vh;
  padding-left:2.5%;
  padding-right:2.5%;
  padding-bottom:2.5%;
  line-height:1.5em ;
}

.down-arrow {
animation:jumpInfinite 1.5s infinite;
left:calc(50% - 1.5%);
position:absolute;
top:calc(100vh - 12vh);
}

@keyframes jumpInfinite {
50% {
margin-top:10px
}

0%,100% {
margin-top:0
}
}


#introvideo{
background-size:cover;
height:100vh;
margin-bottom:6.66vh;
overflow:hidden;
overflow-y:hidden;
position:relative;
width:102vw;
z-index:0
}

#presentation {
margin:auto;
margin-bottom:6.66vh;
width:60%
}

#presentation p {
line-height:1.25em;
padding:1.5%;
width:100%;
}
#presentation a, #presentation .textbutton{
  font-weight: 700;
  text-decoration: underline solid black;
  text-underline-offset: 3px;
}
strong{
  font-weight: 700;
}
#introvideo video,#pfp {
width:100%
}
#pfp{
  border-radius: 30px;
}

#projets {
margin:auto;
margin-bottom:4.66vh;
width:100%;
z-index:-1;
}
#projets h3, #benefices h3{
margin-bottom: 4.66vh;
}
#projets img{
  width: 45%;
  margin-left: 27.25%;
}

@keyframes fadeIn {
0% {
opacity:0
}

100% {
opacity:1
}
}

::-webkit-scrollbar {
width:0px;
}

.row {
-ms-flex-wrap:wrap;
display:-ms-flexbox;
display:flex;
flex-wrap:wrap;
margin:auto;
margin-top: 4.66vh;
width:100%
}

.row a {
text-decoration:none
}

button,.textbutton {
cursor:pointer
}
.column {
-ms-flex:50%;
flex:50%;
max-width:50%;
overflow-x:hidden;
overflow-y:hidden;
padding:0 12px
}
.column2 {
-ms-flex:25%;
flex:25%;
max-width:25%;
overflow-x:hidden;
overflow-y:hidden;
padding:0 12px
}

.column img,.column2 img {
box-shadow:0 0 10px #fffc;
vertical-align:middle;
width:100%
}

.column figure,.column2 figure {
margin-bottom:2vh
}

.column video,.column2 video {
vertical-align:middle;
width:100%;
}

#benefices {
margin:auto;
margin-bottom:6.66vh;
width:80%;
}

#benefices p, #faq p {
left:5%;
line-height:1.4em;
width:100%;
padding:3%;
}

#benefices h2, #faq h2 {
  font-family: 'Moche';
margin-bottom: 2vh;
font-size:1.75em;
font-weight:700;
line-height: 1.5em;
text-align:center;
width:100%
}
.benefices{
  padding: 3%;
  border-radius: 40px;
  background-color: white;
  margin-bottom: 2vh;
}


footer {
background-color:#fff;
padding:2.5vh;
text-align:center
}

footer h1 {
font:2em 'Moche',arial,sans-serif;
font-display:swap;
z-index: 0;
margin-bottom:2vh
}

footer h2 {
font-size:.85em;
margin-top:0;
}

footer a{
  text-decoration: underline;
}

footer a:hover{
  cursor: url('../images/cursors/cursor2.png');
}

.mobile {
display:none
}

::selection {
 color: #fff5ee;
 background: #010203;
 }

 ::-moz-selection {
 color: #fff5ee;
 background: #010203;
 }
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
	  
header {
height:9vh;
}
	  
#links a{
	font-size: .85em;
	top:1%;
}
#logo{
	left:8vw;
}
#rdv a{
color:#010203;
font-size: .9em;
right:4vw;
}
#presentation,#benefices {
width:85%
}
.column2 {
-ms-flex:25%;
flex:25%;
max-width:25%;
overflow-x:hidden;
overflow-y:hidden;
padding:0 12px
}
#projets img{
  width: 60%;
  margin-left: 20%;
}
}
@media screen and (max-width: 800px) {
.column,.column2 {
-ms-flex:100%;
flex:100%;
max-width:100%
}

h1 {
font-size:3em;
text-align:center
}

.mobile {
display:block
}

header {
height:10vh;
}
#projets{
  width: 90%;
}
#projets img{
  width: 90%;
  margin-left: 5%;
}
#pagetitle {
margin-left:12.5vw;
top:14vh;
width:75vw
}

#pagetitle p{
    font-size:1.25em;
}

#pagetitle h1 {
font-size:3em;
margin-bottom:0;
padding:none;
text-align:center
}

#pagetitle h2,#scrollarrow h2 {
font-size:2em;
padding-top:1.5vh
}

.down-arrow {
top:calc(100vh - 10vh)
}

#introvideo video {
margin-left:-5vw;
min-height:100vh;
min-width:110vw
}

p {
text-align:left
}

#linksmobile {
color:#fff5ee;
font-size:1.5em
}

#linksmobile a {
color:#fff5ee
}

table,.desktop {
display:none
}

#presentation,#benefices {
width:85%
}

}