@font-face {
    font-family: 'danielregular';
    src: url('fonts/Daniel-Regular-webfont.eot');
    src: url('fonts/Daniel-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Daniel-Regular-webfont.woff2') format('woff2'),
         url('fonts/Daniel-Regular-webfont.woff') format('woff'),
         url('fonts/Daniel-Regular-webfont.ttf') format('truetype'),
         url('fonts/Daniel-Regular-webfont.svg#danielregular') format('svg');
    font-weight: normal;
    font-style: normal;}

    @font-face {
    font-family: 'aleoregular';
    src: url('fonts/Aleo-Regular-webfont.eot');
    src: url('fonts/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Aleo-Regular-webfont.woff2') format('woff2'),
         url('fonts/Aleo-Regular-webfont.woff') format('woff'),
         url('fonts/Aleo-Regular-webfont.ttf') format('truetype'),
         url('fonts/Aleo-Regular-webfont.svg#aleoregular') format('svg');
    font-weight: normal;
    font-style: normal;}

     @font-face {
    font-family: 'typewriter_condensed';
    src: url('fonts/typewcond_regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;}
  @font-face {
    font-family: 'typewriter_condensed';
    src: url('fonts/typewcond_bold.otf') format('opentype');
    font-weight: normal;
    font-style: bold;}

     @font-face {
    font-family: 'daisywheel';
    src: url('fonts/daisywhl.otf') format('opentype');
    font-weight: normal;
    font-style: normal;}


 @font-face {
    font-family: 'TTKP';
    src: url('fonts/TT-KP-RE.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;}

 @font-face {
    font-family: 'CodeNewRoman';
    src: url('fonts/Code New Roman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;}
 @font-face {
    font-family: 'Manofik';
    src: url('fonts/ManofikPERSONALUSEONLY-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;}
    
body 
{background-color: white;}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgb(10,10,10); 
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lightgrey; 
}
	
/*Header*/

#header
{
	text-align: center;
	position: fixed;
	width: 100vw;
	height:20vh;
}

#HeadTitle
{	position: relative;
	height: 70%;
}
#titleItineraire
{
  mix-blend-mode: screen;  height: 100%;
}

#TildeL
{
	top: -40%; position: relative; height: 20%;
}
#TildeR
{
	top: -40%; position: relative;  height: 33%
}

#menu
{
position: absolute;
top:20vh;
left:10vw;
z-index: 1;}

#content
{
	height: 80vh;
	position: absolute;
	top: 20vh;
	overflow: hidden;
	width: 100%;
/*	-ms-overflow-style: none;  /* Internet Explorer 10+ */
/*    scrollbar-width: none;  /* Firefox */
    mix-blend-mode: screen;
}
#content::-webkit-scrollbar { 
   /* display: none;  /* Safari and Chrome */
}

.ligneBlanche
{
	mix-blend-mode: screen;
	position: relative;
	left: 10%;
	height: 10%;
width: 80%;
background-image: url("images/009_Ligne.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;

}

#ALaDerive
{
	position: absolute;left: 10%; top:40%;mix-blend-mode: screen; height:  35%;
}

.margin
{
	margin-left: 10%;
	margin-right: 10%;

}

table
{width: 100%}
.collone0
{
width: 13%;
}
.collone1
{
width: 17%;
}

.collone2
{
width: 70%;
}
.soustitre
{
  margin: 0
}

/*Texte*/
.text
{
	font-family: Typewriter_Condensed, Daisywheel, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 24px;
	width: 44%;
	display: inline-block;
	 vertical-align: top;
	 font-style: normal;
	 margin-left: 28%;
	 margin-right: 28%;
   padding-right: 25%;
   height: 100%;
}


.carte
{
	display: block;
width: 100%;  
  margin: auto;
	 vertical-align: top;
}

.sousLigne
{
	  mix-blend-mode: screen;
  position: absolute;
  top: 60%;
  width: 100%;
  bottom: 100%;
  display: block;
  visibility: hidden;
}
.button
{width: 100%;
    cursor: pointer;
}

.button:hover + .sousLigne {
  visibility: visible;
}
.sousLigne:hover
{visibility: visible;}

.photo
{
  width: 100%;
}
/*MISE EN FORME GLOBALE h ET p */

h1{	
	/*font-family: CodeNewRoman, Daisywheel, Arial, Helvetica, sans-serif;*/
font-size:34px;
font font-style:normal;
text-align:center;
color:rgb(240,240,240);
margin-bottom: 8px;}
h2{ 
  /*font-family: CodeNewRoman, Daisywheel, Arial, Helvetica, sans-serif;*/
font-size:34px;
font font-style:normal;
color:rgb(240,240,240);
margin-bottom: 0px;}
h3{ 
  /*font-family: CodeNewRoman, Daisywheel, Arial, Helvetica, sans-serif;*/
font-size:26px;
font font-style:normal;
color:rgb(240,240,240);
margin: 0px;}
p
{
font-size:24px;
text-align:justify;
color:rgba(255,255,255,100);
}

.traceItineraire
{width:20vw;position:relative;left: 30vw;top:100px;mix-blend-mode: screen;}

/*flex pour les logos*/

/* page d'accueil*/
#title
    {   position: absolute;
    	width: 34%;
        top: 40%;
        left: 50%;
        margin-left: -17%;
        text-align: center;
    	font-size: 72px;
    	mix-blend-mode: screen;
    }
#titleContact
{
  height: 100%;
}

#itineraire 
{
    position: absolute;
    left: 15%;
    bottom: 20%;  
    width: 10%;
    mix-blend-mode: screen;
}

#contacts
{
    position: absolute;
    right: 15%;
    bottom: 20%; 
        width: 15%;
 
    mix-blend-mode: screen;
}

#programme
{
    position: absolute;
    left: 20%;
    top: 15%;
        width: 10%;

    mix-blend-mode: screen;
}

#projet
{position: absolute;
right: 20%;
top: 15%;
mix-blend-mode: screen;
    width: 8%;

    
}
#edition2022
{
    position: absolute;
    right: 40%;
    bottom: 15%; 
        width: 15%;
 
    mix-blend-mode: screen;

    
}


@media only screen and (max-width: 1200px) and (orientation:portrait) {
	
#projet
{
	width: 30%;
	left: 50%;
	margin-left: -15%;
	top: 12%;
}
.traceItineraire
{visibility: hidden;}

#itineraire
{
	width: 38%;
	left: 50%;
	margin-left: -19%;
	bottom: 33%;
}
#programme
{
	width: 38%;
	left: 50%;
	margin-left: -19%;
	top: 28%;
}
#contacts
{
	width: 50%;
	left: 55%;
	margin-left: -30%;
	bottom:  19%;
}

#edition2022
{
  width: 38%;
  left: 50%;
  margin-left: -19%;
  bottom: 10%;
}

#title
{
	width: 70%;
	margin-left: -35%;
	margin-top: 5%;
}


}


@media only screen and (max-width: 1200px) 
{
	.carte
	{display: block;
}
	.text
	{display: block;
		width: 80%;
	margin-left: 10%;
	 margin-right: 10%}

   #titleItineraire
{height: 55%;
margin-top:5%;}
	 #titleProgramme
   {
    height: 80%;
    margin-top: 5%;
   }
   #titleContact
   {
    height: 66%;
    margin-top: 5%;
   }

.traceItineraire
{
visibility: hidden;}
#TildeL
{
visibility: hidden;}
#TildeR
{
visibility: hidden;}
#ALaDerive
{
	content: url("images/[A].jpg");
}
}
 @media screen and (orientation:portrait) {  }
 @media screen and (orientation:landscape) { 
 }