@font-face{font-family: 'bat';src: url('../font/batmfa__.ttf');}
@font-face{font-family: 'stand';src: url('../font/scriptmtstd-bold.otf');}
body
{
	background-color:rgb(10,10,10);
	margin:0;
	font-family: Helvetica , 'ArialMT', 'Arial', sans-serif;
}


.hds {
position: absolute;
background: url(../images/head.png) 0 0 no-repeat;
background-size: 101%;
width: 100%;
height: 240px;
z-index: 1000;
text-align:center;
font-family: stand;
}
.head-title
{
width: 46%;
margin-top: -29px;
position: absolute;
width: 46%;
left: 27%;
}
.head-title2
{
animation: change 2s infinite;
-webkit-animation: change 2s infinite;
}
header p {
color: white;
font-size: 27px;
margin-top: 72px;
margin-left: 22px;
}
header img
{
	cursor:pointer;
}
.button-car
{
	width:140px;
	height:85px;
	background-color:rgb(191, 191, 191);
	border-radius:13%;
	position:absolute;
	border:1px solid #d2d2d2;
	box-shadow: 1px 1px 15px rgb(255, 255, 255);
	cursor:pointer;
	transition: all 0.4s linear;

}
.button-car:hover
{
box-shadow: 1px 1px 50px rgb(245, 144, 4);
}
.button-car img {
height:100%;
width: 100%;
}
.huge {
width:240px;
height:150px;
}
#but1
{
top: 35px;
left: 11%;
}
#but2
{
top: 35px;
right: 9%;
}
#but3
{
top: 135px;
right: 30%;
}
#but4
{
top: 135px;
left: 32%;
}
#but5
{
top: 195px;
left: 45%;
}
@keyframes change
{
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
@-webkit-keyframes change
{
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}
.panel {
position: fixed;
z-index: 2000;
}
#panel {
position: fixed;
left: -250px;
top: 150px;
width: 250px;
text-align: center;
z-index: 10;
border-radius: 10px;
text-align: center;
background-color: white;
opacity: 0.8;
}
#commander {
position: fixed;
width: 50px;
height: 212px;
top: 200px;
left: 0px;
z-index: 10;
background-image: url(../images/commande.png);
cursor: pointer;
}
#panel select {
height: 30px;
border-radius: 7%;
width: 100%;
}
.container-all {

width:100%;
padding-left:10px;
padding-top:290px;
text-align:center;
min-height:730px;
}
.photo, .description{
display:inline-block;
margin: 0 45px;
vertical-align: top;
text-align: left;
}
.photo {
margin-top:35px;
width:75%;
}
.description{
width:33%;
font-family: cursive;
color:white;
padding:10px;
border-radius:5%;
border:1px solid #dedede;
background-color: rgb(95, 95, 95);
text-align:left;
font-size:16px;
display:none;
margin-top:20px;
}
.photo img {
border-radius:5%;
box-shadow:0 0 10px white;
position: absolute;
opacity:0;
width:33%;
}
footer {
padding: 50px;
color: white;
font-family: glegoo;
font-size: 20px;
}
.bottom {
padding:20px;
border-radius:5%;
border:1px solid #dedede;
background-color: rgb(95, 95, 95);
}
@media all and (max-width: 1100px)
{
.huge  {
	width:140px;
	height:85px;
}
#but3 {
right: 23%;
}

#but4 {
left: 27%;
}
header p {
margin-top: 50px;
}
.head-title {
margin-top: -20px;
 }
}
@media all and (max-width: 900px)
{
#but3 {
right: 11%;
}

#but4 {
left: 13%;
}
#but5{
top: 134px;
}
.container-all {
padding-top: 250px;
}
.photo, .description {
width: 40%;
margin: 0 10px;
font-size:20px;
}
}
@media all and (max-width: 800px)
{
header p {
font-size: 20px;
}
.head-title {
margin-top: -17px;
}
#but5 {
left: 41%;
}
}
@media all and (max-width: 650px)
{
header p {
margin-top: 30px;
}
.head-title {
margin-top: -12px;
}
}
@media all and (max-width: 600px)
{
#but5 {
left: 39%;
top: 230px;
}
.container-all {
padding-top: 330px;
}
.photo, .description,.photo img {
width: 70%;
}
.description {
margin-top: 55%;
}
.button-car {
width: 100px;
height: 65px;
}
#but1,#but2 {
top: 60px;
}
#but3,#but4,#but5 {
top: 160px;
}
header p {
margin-top: 23px;
font-size:16px;
}
.container-all {
padding-top: 270px;
}
}