@font-face {
	font-weight: normal;
	font-style: normal;
    font-family: 'Abril Fatface', cursive;
    src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before { box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }



/* PAGE TITRE SPAN */ 


#mille {
    font-size: 160px;
    padding-left: 350px;
    line-height: 50%;
}

#offrir {
    font-size: 80px!important;
    padding-left: 0px;
   
}
#morts {
    padding-left: 600px;
    font-size: 80px!important;
}

body {

    background:#FFF url("images/fondpagetitre.jpg") no repeat;
	font-weight: 500;
	font-size: 0,4em;

    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a:active,a:focus,a:link, a:hover
{
  text-decoration:none!important;  
    
}


/* Texte */ 

p {
        margin-top: 3%;
    margin-left: 100px;
    font-size: 20px;
    line-height: 1.7em;
}

.container {
    margin-top: 100px;
   
    max-width: 1200px;
    line-height: 130px;
    width: 80%;
    
    
    font-family: 'Maven Pro', sans-serif;
    font-size: 13px;
    color: black;
    line-height: 33px;
    
}

/* LOGO */

.logo {
    position: fixed;
    left: 9px;
    width: 15%;
    top: 20px;
	display:none;
}
.logo img{width:100%;height:auto;}


/* FOOTER */

#footer {background-color: #ffffff;font-family: 'Raleway',sans-serif;
position:absolute!important;bottom:0;left:0;width:100%;
padding:10px 0 0 0;z-index:99999999999;display:none;}

#footer img{max-height:50px; width: auto;}

.apropos {max-width: 800px;
margin-top: 155px;}

#about {font-family:'Raleway';
line-height: 6;
}

footer span {margin-left: 10px;}
footer a {margin-left: 10px;}

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

#logoiut, #logorennes1 {
    height: 75%;
float: right;
margin-right: 35px;
    margin-top: 10px;}


/* Continue */ 


#right{
    position: absolute;
    z-index: 1;
	bottom: 120px;
	right:20px;
	-webkit-transition: all 0.6s linear 0s; -moz-transition: all 0.6s linear 0s; transition: all 0.6s linear 0s!important;
	display:none;
}

#right:hover{opacity: 0.4;}

#right .ion {
    color: black;
    font-weight: normal;
    font-size: 20px;
	float:right;
	padding-top:7px;
	margin-left:14px;
	margin-right:15px;
}

.continue {
    font-family: 'Maven Pro', sans-serif;
    font-size: 16px;
    color: black;
    line-height: 33px; 
    font-weight: normal;
}

.clear
{
    clear:left;
}


/* Grid */

.grid {
    z-index: 999;
    font-family: 'Abril Fatface', cursive;
    line-height: 30px;

}

.grid__item {
    padding-right: 100px!important; 
    padding-top: 50px;
	height: calc(100vh - 40px);
	min-height: 460px;
	max-width: calc(100vw - 40px);
	background: #DDD;
	z-index: 1;
	position: relative;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
	font-size: 1.0em;
	font-weight: normal;
	color: #777;
}



/* Background colors */
.color-1 { background: transparent; }
.color-2 { background: #576b67; }
.color-3 { background: #383A35; }
.color-4 { background: #333; }
.color-5 { background: #fda9a9; }
.color-7 { background: #cde7d3; }
.color-8 { background: #DCECDD; }
.color-9 { background: #dedbba; }
.color-10 { background: #222; }
.color-11 { background: #515151; }



.link {

    height: auto;
    font-weight: normal!important;
	outline: none;
    padding-right: 200px;
	text-decoration: none;
	position: relative;
	font-size: 7em;
	line-height: 1;
    color: #000000; /*couleur titre avant survol*/
	display: inline-block;
}


 
 


/* Ligne et couleur au survol */
.link--kukuri {
	text-transform: none;
	overflow: hidden;
	line-height: 70%!important;
	white-space: normal;/**Fix pour retour à la ligne**/
	width:80%;/**Largeur du conteneur**/
	cursor:pointer;
}

.link--kukuri:hover {
	color: #c5c2b8;   
}

.link--kukuri::after {
	content: '';
	position: absolute;
	height: 10px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #F9F9F9;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

.link--kukuri::before {
	content: attr(data-letters);
 	white-space: normal;/**Retour à la ligne**/
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
    left: -8px;
	width: 0%;
	-webkit-transition: width 0.4s 0.3s;
	transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
	width: 100%;
}


/* Rapidité de la ligne */

@media screen and (max-width: 42em) {
	.link--kukuri { font-size: 3.5em; }
}