@font-face {
   	font-family: "graebenbach-regular";
   	src: url('/fonts/graebenbach-regular-webfont.woff') format('woff');
	src: url('/fonts/graebenbach-regular-webfont.eot') format('eot');
	src: url('/fonts/graebenbach-regular-webfont.woff2') format('woff2');
	src: url('/fonts/graebenbach-regular-webfont.ttf') format('ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
   	font-family: "graebenbach-italic";
   	src: url('/fonts/graebenbach-italic-webfont.woff') format('woff');
	src: url('/fonts/graebenbach-italic-webfont.woff2') format('woff2');
	src: url('/fonts/graebenbach-italic-webfont.eot') format('eot');
	src: url('/fonts/graebenbach-italic-webfont.ttf') format('ttf');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "graebenbach-medium";
	src: url('/fonts/graebenbach-medium-webfont.woff') format('woff');
	src: url('/fonts/graebenbach-medium-webfont.woff2') format('woff2');
	src: url('/fonts/graebenbach-medium-webfont.eot') format('eot');
	src: url('/fonts/graebenbach-medium-webfont.ttf') format('ttf');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "graebenbach-medium-italic";
	src: url('/fonts/graebenbach-medium-italic-webfont.woff') format('woff');
	src: url('/fonts/graebenbach-medium-italic-webfont.woff2') format('woff2');
	src: url('/fonts/graebenbach-medium-italic-webfont.eot') format('eot');
	src: url('/fonts/graebenbach-medium-italic-webfont.ttf') format('ttf');
	font-weight: bold;
	font-style: italic;
}

body {
	font-size:62.5%;
}

h1 {
   	font-family: "graebenbach-medium", Arial, Helvetica, sans-serif;
   	font-size:  6rem;
   	line-height:  80%;
}	

.h1svg {
	font-weight: 500;
	font-size:  0.75rem;
	line-height:  110%;
	font-family: "graebenbach-medium", Arial, Helvetica, sans-serif;
}


.slide, h2 {
   	font-family: "graebenbach-medium", Arial, Helvetica, sans-serif;
   	font-size:  2rem;
   	line-height: 110%;
	transition: .2s;
}
.liens{
   	text-align: right;
   	display: flex;
	align-self: flex-end;
	/*background-color: #ccc;*/
}

.slide:hover{
	/* font-family: 'graebenbach-medium-italic'; */
	transform: translate(-10px, 00%);
	transition: .2s;
}

.titre {
   	display: inline-block;
   	align-self: flex-end;
	/*background-color: #ddd;*/
	width: 70%;
}
   		
header{
   	display: flex;
   	justify-content: space-between;
   	/*background-color: #eee;*/
   	position: absolute;
    top: 0.8rem;
   	right: 0.4rem;
   	left: 0.4rem;
}
   		
a{
	text-decoration: none;
   	color: black;

}
   		
body{
	background: linear-gradient(#afafa8 72%, #0fffab 85%) no-repeat;
	background-color: #bdbdb6;
	height : 100vh;
}
   		
.mail{
    text-decoration: underline;
	transition: .2s;
}
   		
.mail:hover {
   	color: #bdbdb6;
    font-family: "graebenbach-italic", Arial, Helvetica, sans-serif;
	transition: .2s;   
}
   		
p {
   	font-family: "graebenbach-regular", Arial, Helvetica, sans-serif;
   	font-size: 3.3vh; 
   	line-height: 105%;
}
   		
.text{
	max-width: 45.8vw;
	padding-right: 2rem;	 
}
   		
footer{
   	display: flex;
	align-items: flex-end;
  	justify-content: space-between;
 	position: absolute;
  	padding-bottom: 0.6rem;
  	padding-right: 0.6rem;
  	padding-left: 0.8rem;
  	bottom: 0;
}

.design{
	cursor: grab;
   	position:  absolute;
   	top:  calc(95vh - (50vw/1.5));
   	left:  40vw;
   	transform: rotate(8deg); 
   	padding-top: 1.5vh;
   	padding-bottom: 2vh;
   	padding-right: 4.5vh;
   	padding-left: 4.5vh;
	font-size: 4vh;
   	line-height: 93%;
   	border-radius: 50%;
   	border: 0.4vh solid black; 
   	z-index: 5;
   	background-color: #afafa8;
   	transition: .2s;
}
   		
.design:hover{
   	transform: rotate(-8deg);
   	transition: .2s;
}
   		
#un{
   	position: absolute;
   	top: 6rem;
   	left: 2rem; 
}
   		
#rond1{
   	position : absolute;
   	top : 20vh;
   	right :30vw;
   					
}
   		
#rond2{
   	position : absolute;
   	top : 55vh;
   	left : 30vw;
}
   		
#rond3{
   	position : absolute;
   	top : 15vh;
   	left: 15vw;
}
   		
.box{
	border-radius: 50% ;
   	background:  #0fffab;
   	z-index: 4;
	height: 8vh;
	width: 8vh;
	content: ''
}

@media (max-width:500px) { 


 body {
	padding:0.4rem;
} 

	h1{
		font-size:  15.2vw;
		width: 100%;
		padding-left: 0.3rem;
	}
	.liens{
		position: fixed;
		padding: 0.4rem;
		padding-top: 2rem;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background: linear-gradient(rgba(80, 47, 255, 0), #0fffab 50%);
 }
 .titre {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	padding-top: 0.4rem;
    padding-bottom: 5vh;
	z-index: 6;
	background: linear-gradient(#bdbdb6 50%, transparent 100%) no-repeat;
	width: 100%;
}

 .box{
	display: none;
 }
 .text{
	position: absolute;
	top: 70vh;
	max-width: none;
	background-color: #0fffab;
	left: 0;
	padding-top: 90vw;
	padding-bottom: 18vw;
	width: 100%;
    margin-left: -0.4rem;
	padding-right: 0.4rem;
	padding-left: 0.4rem;

 }
 p{
	font-size: 1.1rem;
 }
 footer{
	position: relative;
	top: calc(50vh - (70vw/1.5));
	/* background-color: #502FFF; */
	padding-left: 0rem;
	padding-right: 0rem;
}

ul{
	display: flex;
	justify-content:space-between;
	align-items: flex-end;
	width: 100%;
}
.slide:hover{
	/* font-family: 'graebenbach-medium-italic'; */
	transform: none;
}
.design{
   	top:  25vh;
	size: 90%;
	position: absolute;
	right: 5vw;
	left: auto;
}
}