@font-face {
    src: url('./Alef-Regular.ttf');
    font-family: 'Alef';
}



body {
  background-color: #EEEEEE;
 /* margin-left:100px;*/
  color:#222222;
  font-family: 'Alef';

}


.img {
	transition: opacity 0.5s linear;
}
.img img {
	margin-left:180px;/*180*/
	/*background:black;*/
	-webkit-box-shadow: 0 0px 10px rgba(0,0,0,.6);
	box-shadow: 0px 0px 10px #999;
}


.titreAlbumPhoto{
  height:0px;
  width:200px;
  position: relative;
  top: -28px;
  left: 180px;
  margin-bottom:0px;
  opacity: 1;
  font-style: italic;
  text-align: left;
}

.titreAlbumPhoto a{
 color:black;
}
.titreAlbumPhoto a:hover{
 text-decoration: underline;
}
a{
	text-decoration: none;
	font-family: 'Alef';
}
.titre {
	margin-left:180px;
	/*background-color:#111111;*/
	height:50px;
	margin-top:10px;
	color:#222222;
	min-height:100px;
	font-size:15px;
	text-align:center;
}

.legende {
	margin-left:180px;
	/*background-color:#111111;*/
	/*height:5px;*/
	margin-top:10px;
	color:#222222;
	min-height:10px;
  margin-bottom: 20px;
	font-size:15px;
	text-align:center;
}

.plusBouttonTexte{
  cursor: pointer;
	/*background-color:#444444;*/
	height:22px;
  width:22px;
  position: relative;
  top: 0px;
  left: 140px;
  margin: 0 0 -22px 0;
  padding: 0 0 0 0 ;
  opacity: 1;
  color:#222222;
  text-align: center;
  vertical-align: middle;
  font-size: 30px;
  margin-top: 50px;
  margin-bottom: -70px;
}
.plusBouttonTexte .txt{
  background-image:url("icones/carte.svg");
  height:22px;
  width:22px;
  position: relative;
  padding-top:0px;

  top: -7px;
  left: 0px;
}

.plusBouttonTexte span{
  position:relative;
  top:-12px;
}
.plusBoutton {
  background-color:red;
	height:0px;
  width:0px;
  position: relative;
  top: 0px;
  left: 150px;
  margin-bottom:0px;
  opacity: 1;
}

.InfoBouttonTexte{
  cursor: pointer;
	/*background-color:#444444;*/
	height:22px;
  width:22px;
  position: relative;
  top: 0px;
  left: 140px;
  margin: 0 0 -22px 0;
  padding: 0 0 0 0 ;
  opacity: 1;
  color:#222222;
  text-align: center;
  vertical-align: middle;
  font-size: 30px;
  margin-top: 50px;
  margin-bottom: -30px;
}
.info a{
  text-decoration:underline;
  color: #000000;
}
.InfoBouttonTexte .txt{
  background-image:url("icones/smallcamera.svg");
  height:22px;
  width:22px;
  position: relative;
  padding-top:0px;
  top: -7px;
  left: 0px;
}
.InfoBouttonTexte span{
  position:relative;
  top:-12px;
}

.InfoBoutton {
  background-color:red;
	height:0px;
  width:0px;
  position: relative;
  top: 0px;
  left: 150px;
  margin-bottom:0px;
  opacity: 1;
}


.info {
  opacity:0;
  background-color:rgba(254, 254, 254, 0.9);
	/*height:30px;
  width:30px;*/
  transition: opacity 0.5s linear;
  position: relative;
  top: 0px;
  left: 30px;
}
.info .content {
  padding: 30px;
}
.carte {
  opacity:0;
  background-color:rgba(254, 254, 254, 0.8);
	/*height:30px;
  width:30px;*/
  transition: opacity 0.5s linear;
  position: relative;
  top: 0px;
  left: 30px;
}
/*.carte:hover {
  opacity:1;
  transition: opacity 0.5s linear;
  height:300px;
  width:500px;
}
*/
#titrePageOut {
	margin-top: 20px;
	width:100%;
	text-align:center;
}

#titrePage {
	font-size: 23px;
	font-weight:bold;
	display:inline;
	border-bottom: 1px solid black;
}


.image {
	background-color:#EEEEEE;/*#262626;*/
 	transition:all 300ms linear;
}
.image:hover {
	/*background-color:#303030;*/
 	transition:all 300ms linear;
}

#indicateur {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
}


#titleSite {
	position: fixed;
	top:0px;
	left:8px;/*15px*/
	margin-top:25px;
	margin-bottom:60px;
	z-index:50;
	width:87px;
	font-size:25px;
	color:#111111;
	font-weight:bold;
	/*background:#666666;*/
	padding:0px;
	border: none;/*1px solid green;*/
	transition: all 1s ease 0s;
	text-align:left;
}

#titleSite a{
	font-size:20px;
	color:#111111;
	text-decoration:none;
	padding:0px;
}



#menu-boutons{
	position: fixed;
	top:60px;
	left:0px;/*5px*/
	margin-bottom:60px;
	width:140px;/*107px*/
	min-width:87px;
	font-size:17px;
	color:#333333;
	text-decoration:none;
	padding:10px;
	transition: all 1s ease 0s;
	text-align:left;
}

#menu-boutons a{
	color:#333333;
	text-decoration:none;
}

#menu-boutons h1:hover{
	border: 1px solid #666666;
}


.menu-boutons-item{
	padding: 0px;
	padding-bottom: 5px;
	margin: 0px;
	cursor: pointer;
}

.menu-boutons-item:hover{
	text-decoration: underline;
}

#positionBar {
     position: fixed;
     top: 200px;/*135*/
     margin-bottom:100px;
     left: 0;
     width: 160px;
     height:100%;
     overflow-y:auto;
}

#positionBar .item {
/*	border-radius: 10px;*/
	float:left;
	min-width:60px;
	width:60px;
	margin-left:5px;
	background-color:#555555;
	min-height:60px;
	margin-top:5px;
	border-style: solid;
	border-width: 1px;
	border-color:#555555;
        background-repeat: no-repeat;
	/*background-size: 60px;*/
	background-position: center;
	opacity:0.4;
	cursor: pointer;

}
#positionBar .item:hover {
	opacity:1;
	border-color:#AAAAAA;
}






#menu {
     position: fixed;
     top: 90px;
     left: -300px;
     width: 580px;/*420*/
     opacity:0;
     overflow-x:auto;
     z-index:99;
     visibility:hidden;
     padding-top: 10px;
     padding-bottom: 20px;
     transition:all 500ms linear;
     background-color:#EEEEEE;
     overflow-y:auto;
}


.menu-item{
/*	border-radius: 10px;*/
	float:left;
	min-width:122px;
	width:122px;
	margin-left:10px;
	min-height:180px;
	margin-top:5px;

        background-repeat: no-repeat;
	/*background-size: 120px;*/
	background-position: center;
	opacity:1;
}

.menu-item-bg:hover{
	border-style: solid;
	border-width: 1px;
	border-color:white;
	transition: all 0.5s linear;
	box-shadow:  0px 0px 10px #FFFFFF;
}

.menu-item-bg{
/*	border-radius: 10px;*/
	border-style: solid;
	border-width: 1px;
	border-color:#555555;
	float:left;
	min-width:120px;
	width:120px;
	margin-left:0px;
	background-color:#555555;
	min-height:120px;
	margin-top:0px;
	border-style: solid;
	border-width: 1px;
	border-color:#555555;
        background-repeat: no-repeat;
	/*background-size: 120px;*/
	background-position: center;
	opacity:1;
	transition: all 0.5s linear;
}

.menu-item-txt{
	min-height:165px;
	width:100%;
	text-decoration: none;
	color:#333333;
	text-align:center;
}

.menu-item-txt a{
	text-decoration: none;
	color:#AAAAAA;
}

#positionBar .item:hover {
	opacity:1;
	border-color:#AAAAAA;
}

.pied{
	min-height:165px;
	width:100%;
	text-decoration: none;
	color:#333333;
	text-align:center;
}

@media screen and (max-width: 768px) {
  .img img {
  	margin-left:0px;
  }

  .titreAlbumPhoto{
    left: 40px;
  }
  .titreAlbumPhoto a {
    color: black;
  }
  .titreAlbumPhoto a:visited {
    color: black;
  }

  .titre {
  	margin-left:0px;
  	/*background-color:#111111;*/
  	height:50px;
  	color:#222222;
  	min-height:100px;
  	font-size:15px;
  	text-align:center;
  }

  .legende {
  	margin-left:0px;
  	/*background-color:#111111;*/
  	/*height:50px;*/
  	color:#222222;
  	/*min-height:100px;*/
    margin-bottom: 20px;
  	font-size:15px;
  	text-align:center;
  }
  #menu-boutons, #positionBar{
    visibility: hidden;
  }
  #menu{
    visibility: hidden;
  }
  #titleSite {
  	position:inherit;
  	top:30px;
  	left:0px;/*15px*/

  	margin-bottom:60px;
  	z-index:50;
  	width:300px;
    text-align: center;
  	font-size:25px;
  	color:#111111;
  	font-weight:bold;
  }

  .InfoBouttonTexte{
    left: 0px;
  }
  .InfoBouttonTexte{
    position: relative;
    top: -30px;
    left: 0px;
}



.plusBouttonTexte{
  position: relative;
  top: -70px;
  left: 35px;
  font-size: 30px;
  margin-top: 50px;
}

.plusBoutton {
  top: -20px;
  left: 40px;
}
.info {
  opacity:0;
  background-color:rgba(254, 254, 254, 0.9);
	/*height:30px;
  width:30px;*/
  transition: opacity 0.5s linear;
  position: relative;
  top: 20px;
  left: -40px;
}
.info .content{
  font-size: 10pt;
  padding:10px;
  padding-top:0px;
}

.carte {
  top: 20px;
  left: -40px;
}
}