/* CSS */
body {
background-image: url("../images/fond.jpg");

}
.Accueil {
	background-image: url("../images/Marche.jpg");	
}
.Chemin {
	background-image: url("../images/fondA.jpg");	
}
#shoes {
	width: 300px;
	margin-left: -30%!important;
	margin-top: -300px!important;
	opacity: 0.6;
	transition: 1s;
}
#shoes:hover{
	opacity: 1;
	transition: 1s;
}
#First {
	color: white;
	text-align: center!important;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
h1 {
	text-transform: uppercase;
	margin-top: 35%;
	font-size: 500%;
	padding:10px 10px;
	margin-bottom: 0px;
}
h2 {
	font-size: 26px;
}
h3 {
	font-size: 20px;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.Layout-20 {
	background-color: #E2DBDB;
	opacity: 0.8;
    top: 0;
	float: left;
    left: 0;
	padding: 3%;
	padding-top: 380px;
    height: 100%!important;
    width: 200px;
	position: fixed!important;
}
/*MENU VERTICAL*/
.Layout-10{
	 top: 0;
	background-color: #aeaeae;
	margin-left: 16%;/*307px;*/
    letter-spacing: 2px; 
	width: 55px;
	height: 100%;
	position: fixed!important;
	/*opacity: 0.9;*/
}
nav {
	transform-origin:top right;
/*	transform-origin: calc(100% - 55px) 20px 0;*/
	-ms-transform:rotate(-90deg); /* Internet Explorer */
	-moz-transform:rotate(-90deg); /* Firefox */
	-webkit-transform:rotate(-90deg); /* Safari et Chrome */
	-o-transform:rotate(-90deg);
	transform: rotate(-90deg);
    letter-spacing: 2px; 
	position: fixed!important;
	margin-left: -765px;/*-40%!important;*/
}
nav a {
	margin: 15px!important;
	padding: 15px;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 18px;
	color: black;
	font-weight: bold;
	transition: 0.2s;
}
nav a:hover{
	text-decoration: underline;
	color: white;
	transition: 0.2s;
}
ul{
	list-style: none;
	
}
.Menu {
 	display: inline-block !important;
	padding: 0;
}
#Chaussures {
	display: none;
	background-color: white!important;
	text-decoration: none!important;
	color: black;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-weight: bold;
	letter-spacing: 0.1px;
	padding: 2px;
	padding-bottom: 4px!important;
	transition: 0.2s;
	}
#Chaussures:hover{
	background-color: black!important;
	color: white!important;
		transition: 0.2s;
}
/*PAGE GALERIE*/
.galerie {
	width: 80%;
	display: inline-block;
	float: left;	
	margin-left: 24%;
	padding: 0;
}
p {
	display: inline-block; 
	
}
img{
	height: 30%;
	width: 30%;
	float: left;
}
/*PAGE DEMENAGER*/
.decale {
	margin-left: 25%;
	margin-top: 3%;
}
.Layout-35 {
	width: 35%;
	float: left;
	padding: 2%;
	
}
.Layout-20B {
	width: 20%;
	float: left;
	padding: 2%;
	
}
.txt{
	padding: 8%;
	background-color: white;
	opacity: 0.8;
	margin-left: 3%;
}
blockquote {
	width: 20%;
	padding: 2%;
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	text-align: center;
	margin-left: 15%;
	margin-top: 15%;
	background-color: blue;
	opacity: 0.8;
}
#Pistoletto { 
	 width: 100px; 
	 height: 100px; 
	 padding: 0.5em; 
	 float: left; 
	 margin: 10px 10px 10px 0; 
	background-color: black;
	opacity: 0.8;
	color: white;
	font-weight: bold;
}
#Cadere { 
	 width: 100px; 
	 height: 100px; 
	 padding: 0.5em; 
	 float: left; 
	 margin: 10px 10px 10px 0; 
	background-color: black;
	opacity: 0.8;
	color: white;
	font-weight: bold;
}
  #droppable { 
	  width: 100%;
	  padding: 0.5em; 
	  float: left; 
	  margin: 10px; 
}
  #droppable2 { 
	  width: 100%;
	  padding: 0.5em; 
	  float: left; 
	  margin: 10px; 
}
/*PAGE SE PERDRE*/
.Images {
	width: 100%;
}
.Legende{
	text-align: left;
	color: white;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.txt1{
	padding: 8%;
	background-color: white;
	opacity: 0.8;
}
.contenu{
	opacity: 0;
	transition: 1s;
}
.contenu:hover{
	opacity: 1;
	transition: 1s;
	/*background-color: #aeaeae;*/
}
/*PAGE TRACES*/
#A {
	float: left;
	margin-top: 90%!important;
	margin-left: -16%!important;
	width: 63%;
	-ms-transform:rotate(-90deg); /* Internet Explorer */
	-moz-transform:rotate(-90deg); /* Firefox */
	-webkit-transform:rotate(-90deg); /* Safari et Chrome */
	transform: rotate(140deg);
	transition: 1s;
}
#A:hover {
	 transform: scale(3);
	transition: 2s;
}
#B {
	margin-top: 70%!important;
	width: 138%!important;
	-ms-transform:rotate(40deg); /* Internet Explorer */
	-moz-transform:rotate(40deg); /* Firefox */
	-webkit-transform:rotate(40deg); /* Safari et Chrome */
	transform: rotate(40deg);
	transition: 1s;
}
#B:hover {
	 transform: scale(3);
	transition: 2s;
}
#C {
	margin-top: 70%!important;
	width: 65%!important;
	-ms-transform:rotate(30deg); /* Internet Explorer */
	-moz-transform:rotate(30deg); /* Firefox */
	-webkit-transform:rotate(30deg); /* Safari et Chrome */
	transform: rotate(50deg);
	transition: 1s;
}
#C:hover {
	 transform: scale(3);
	transition: 2s;
}
#D {
	margin-top: 80%!important;
	width: 65%!important;
	-ms-transform:rotate(30deg); /* Internet Explorer */
	-moz-transform:rotate(30deg); /* Firefox */
	-webkit-transform:rotate(30deg); /* Safari et Chrome */
	transform: rotate(120deg);
	transition: 1s;
}
#D:hover {
	 transform: scale(3);
	transition: 2s;
}
.Txtchemin{
	width: 80%;
	text-align: center;
	color: white;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
/*RESPONSIVE*/
@media only screen and (max-width: 600px) {
	.Accueil {
		background-image: url(../images/Mona.gif);
	}
	h1 {
		font-size: 40px;
		margin-top:50px;
	}
	h2 {
		font-size: 20px;
		width: 100px;
		margin-left: 180px;
	}
	#Chaussures {
		display: inline-block;
	}
	.Layout-20 {
		display: none;	
	}
	.Layout-10{
		margin: 0;
	}
	.Layout-35{
		width: 100%;
		margin-left: -60px;
	}
	.contenu {
		opacity: 1;
	}
	#Cadere {
		display: none; 
	}
	#Pistoletto {
		display: none; 
	}
	.Txtchemin{
		width: 100%;
	}
	#A {
		width: 200px;
		transform: none;
	}
}