body{
background-image:url("/../images/fondSite.jpg");
background-repeat:no-repeat;
background-position:top center;
margin: 0;
background-color:#49322e;
}
#containerSite{
  background-color: rgba(255, 255, 255, 0.33);
    border: 1px solid #fff;
    margin: 20px auto;
    width: 1000px;
	height: 855px;
	box-shadow: 0px 0px 20px #000;
}
#logo{
margin: 10px auto;
width:587px;
height:165px;
}
#containerHaut{
width:100%;
}

#hautGauche{
width:665px;
height:334px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;

  border-collapse:collapse;
  float:left;

}
#hautDroite{
 background-color: #444a4f;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
    border-left: 1px solid #fff;

    display: block;
    float: right;
    height: 334px;
    width: 334px;

}
#hautDroite p{
 color: #fff;
    font-family: arial;
    font-size: 20px;
    text-align: center;
}
#containerBas{
width:100%;
}
#basGauche{
background-color:#5f443e;
width:665px;
height:334px;
  float:left;
    border-right:1px solid #fff;}
 
#basGauche p{ 
color:#fff;
font-family:arial;
}
  
#basDroite{
background-image: url("/../images/batiment.jpg");
  width: 333px;
  height: 334px;
  float: right;
  background-repeat: no-repeat;
  background-position:center;
}

.bouton{
  border: 1px solid #fff;
    font-size: 20px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    text-transform: uppercase;
    width: 210px;
	box-shadow: 0px 0px 10px #000;
	  margin-top: 40px;
	  	color:#fff;
	text-decoration:none;
	background-color:#64686c;
	  display: block;
	    text-shadow: 0px 1px 1px #000;
		transition: all 1s ease 0s;
	}
	
.bouton:hover{
background-color:#56595c;

}
.hotel{
font-family: 'Lora', serif;
color:#fff;
font-size:30px;
text-shadow: 0px 1px 1px #000;
}	

#containertexteBasGauche{
text-align:center;
width:250px;
  margin: 20px auto;
  font-family: arial;
  line-height:22px;
  float:left;
}

a{
color:#fff;
text-decoration:none;
}
a img{
color:transparent;
border:none\9;
margin:0 auto;
display:block;
}

a:hover{
opacity:0.8;
}

#boutonContact{
  border: 1px solid #fff;
    font-size: 20px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    float:right;
    width: 210px;
	box-shadow: 0px 0px 10px #000;
	margin-top: 40px;
	color:#fff;
	text-decoration:none;
	background-color:#816b65;
	display: block;
	text-shadow: 0px 1px 1px #000;
	  margin: 100px 60px;
	font-family: 'Lora', serif;
	transition: all 1s ease 0s;
	}
	#boutonContact a{
	color:#fff;
	}
	
	a#boutonContact:hover{	
	background-color:#7a635d;
	}
	
	
a#btnGoogle{
  border: 1px solid #fff;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  font-family: 'Lora', serif;
  font-size: 20px;
  position: relative;
  top: 250px;
  width: 177px;
  margin: 0 auto;
  color: #fff;
  display: block;
  background-image: url("/../images/pictoGoogleMap.png");
  background-position: right;
  background-repeat:no-repeat;
box-shadow:0px 0px 10px #000;
  text-shadow:0px 1px 1px #000;
  transition: all 1s ease 0s;
}

/*---------------SMARTPHONE_PORTRAIT-----------------*/
@media only screen and (max-width: 736px) {

body{
background-image:none;
}
#containerSite{
width: auto;
border:none;
height:auto;
box-shadow: none;
margin:0px;
}
#hautGauche{
float:none;
width:auto;
height:auto;
}
img{
  max-width: 100%;
    height: auto;
}
#hautDroite{
  padding-bottom: 50px;
  height: auto;
    width: 100%;
	  margin-bottom: 50px;
}

#logo{
width: 90%;
  height: auto;
  margin: auto;
  margin-bottom: 20px;
}

#containerBas{
/*margin-top:50px;*/
}

#boutonContact{
float:none;
margin: 0 auto;
}
#basGauche {
  padding-bottom: 25px;
  border-bottom: 1px solid #fff;
  width: 100%;
  float: none;
  height: auto;
}
#containertexteBasGauche{
float:none;
  margin: 20px auto;
}
#basDroite{
  width: 320px;
  
  height: 335px;
  float: none;
  margin: 0 auto;
}
}
/*---------------SMARTPHONE_PAYSAGE-----------------*/
@media only screen and (max-width: 736px) and (orientation:landscape){
body{
background-image:none;
}

#containerSite{
width:100%;
}


#basGauche {
  padding-bottom: 25px;
  border-bottom: 1px solid #fff;
  width: 100%;
  float: none;
  padding-top: 15px;
}
#basDroite{
  width: 333px;
  height: 335px;
  float: none;
  margin: 0 auto;
}
#hautGauche img{
width:100%;
max-height:auto}
#hautDroite{
float:none;
margin-bottom:0px;
}

#logo{
}
a img{
color: transparent;
  border: none\9;
  margin: 0 auto;
  display: block;
}
}
/*-------------------------------------------------------------------------------TABLETTE PORTRAIT------------------------------------------------------------------*/
@media only screen and (min-device-width: 737px) and (max-device-width: 1024px) and (orientation:portrait) {

#containerSite {
width:100%
}
#hautGauche{
width: 65%;
overflow: hidden;
}



#basGauche{

    width: 65%;
}
#hautDroite{
width: 34%;
    overflow: hidden;
    float: left;

}
#basDroite{
    width: 34%;
	    float: left;
}
#boutonContact{
    margin: 100px 0px 0px 0px;
	width: 200px;
	margin
}
}

/*-------------------------------------------------------------------------------TABLETTE PAYSAGE------------------------------------------------------------------*/
@media only screen and (min-device-width: 737px) and (max-device-width: 1024px) and (orientation:landscape) {



}