/*REALISATION ET COPYRIGHT JMG WEB DESIGN.COM 2015 */
/* CSS JMGWEBDESIGN.COM */

/* HTML5 */

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:sans-serif;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

strong{
	font-weight: bold;	
}


@charset "utf-8";
/* CSS styles */

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


html,body{
	font-family: Sans-serif;
	width:100%;
	height:100%;
	color:#000000;
	background:#FFFFFF;
	margin:0;
	padding:0;
}


#langue
{
	display: inline-block;
	position: fixed;
	z-index: 1200;
	margin-left: 50px;
	margin-top: 10px;
	font-size: 20px;
	font-family: type;
}

#langue a
{
	color: black;
	text-decoration: none;
}

#langue a:hover
{
	color: white;
	text-decoration: underline;
	text-shadow: 2px 2px 1px black;

}

.logo{
	display: inline-block;
	position: fixed;
	z-index: 1100;
	margin-left: 100px;
	margin-top: 10px;
	font-size: 20px;
	font-family: type;

}



nav
{
	display: inline-block;
	position: absolute;
	right: 0;
	text-decoration: none;
	width: 100%;
	text-align: center;
	margin:0px;
	padding:0px;
	position: fixed;
	z-index: 1000;
	font-family: type;
	
	background: #3cb0fd;
	height: 40px;
	
	
	
		
}

nav, nav ul
{
	list-style:none;
	border-radius: 0px 0px 0px 0px;
	padding: 0;
	line-height: 40px;
	margin: 0px 0px 0px 0px;
	text-align: center;
	
		
}

nav ul
{
	position: absolute;
	right: 0;
	text-decoration: none;
	margin-right: 50px;
	
}


nav a
{
	display: block;
	padding: 0;
	background: none;
	width: auto;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 14px;
	color: #000000;
	background: none;	
	text-decoration: none;
	font-weight: normal;
	text-align: center;
	letter-spacing: 2px;
	
	

	
}

nav li
{
	float: left;
	border-right: 1px solid #fff;
	
	
}


html>body nav li
{
	border-right: 1px solid transparent;
}

nav li ul
{
	position: relative;
	left: -999em;
	width: 120px;
	background: #3cb0fd; /* Old browsers */
	border-top: 1px solid #fff;
	padding-left: 0px;
	margin-left: 0px;
	background: rgba(177,217,238,0.8);
	font-size: 10px;
	
}



nav li ul li
{
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	
	text-align: justify;
	margin-left: 0px;
	background: #3cb0fd;
	width: 200px;
	height: 40px;
	font-size: 10px;
	
	
}

nav li ul li a
{
	font-size: 12px;
	
}

html>body nav li ul li
{
	border-top: 1px solid transparent;
}

nav li ul li:hover
{
	background: #3498db;
}

nav li ul ul
{
	margin: 0px 0 0 105px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	

}

nav li ul li ul li a
{
	font-size: 10px;
}

html>body nav li ul ul
{
	border-left: 1px solid transparent;
}

nav a:hover
{
	color: #ffffff;
	text-decoration: underline;
	text-shadow: 2px 1px 1px black;
	font-weight: bold;

}

nav li:hover ul ul, nav li.sfhover ul ul
{
	left: -999em;
}


nav li:hover ul, nav li li:hover ul, nav li.sfhover ul, nav li li.sfhover ul
{
	left: 0;
	min-height: 0;
}

.actif{
	color: white;
	text-decoration: none;
	text-shadow: 2px 2px 1px black;
}



.slide{
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
}

.slidetop{
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	-webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;

	}


.wrapper{
	width:900px;
	height:200px;
	margin:0 auto;
	position:relative;
}
.slideno{
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:60px;
	font-weight:bold;
	color:rgba(255,255,255,0.8);
}
.button{
	display:block;
	width:50px;
	height:50px;
	position:absolute;
	bottom:0px;
	left:90%;
	background-color:#333333;
	background-image:url(../img/puce_fleche.png);
	text-align: center;
	font-size: 40px;
}
.button:hover{
	background-color:#494949;
	cursor:pointer;
}

/******************************
 SLIDE 1 
*******************************/
#slide1{
	background-image:url(../img/location-saint-martin-rentals.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 650px;
	
	
}


#slide1 .parallaxbg{
	position:absolute;
	left: 0px;
	top:260px;
	font-size:40px;
	font-weight: bold;
	background-color:rgba(51,51,51,0.5);
	padding: 20px;
	margin: 20px;
	color:#ffffff;
}




#slide1 a{
	color: white;
}

#slide1 .btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: type;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-left: 170px;
  text-shadow: 2px 2px 4px #333333;

}

#slide1 .btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,1);

}


#slide1 .solde{
	display: inline-block;
	position: absolute;
	text-align: center;
	right: 200px;
	margin-top: 100px;
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 1.2px;
	color: black;
	text-transform: uppercase;
	border-radius: 10px;
  	border-bottom: 3px solid rgba(255,255,255,1);
  	border-right: 3px solid rgba(255,255,255,1);
  	background-color:rgba(255,255,255,0.8);
	padding: 20px;

		
}
#slide1 .solde img{
	display: inline-block;
	position: absolute;
	margin-left: 380px;
	margin-top: 0px;

	
	}

#slide1 .solde .prix{
	font-size: 26px;
	color: #999;
	text-shadow: 2px 2px 4px #fff;
	filter: dropshadow(color=#fff, offx=2, offy=2);


	}
#slide1 .solde .mois{
	font-size: 26px;
	
	}




/******************************
 SLIDE 2 
*******************************/
#slide2{
	background: url(../img/location-saint-martin-baie-orientale.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 700px;
}

#slide2 h2{
	position:absolute;
	width: auto;
	text-align: center;
	top:60px;
	right: 50px;
	font-size:40px;
	font-weight: bold;
	font-family: type;
	color:#ffffff;
	text-shadow: 2px 2px 4px #333333;
	filter: dropshadow(color=#333333, offx=2, offy=2);

}

#slide2 .apropos{
	position:absolute;
	left:0px;
	top:200px;
	font-size:20px;
	color:#ffffff;
	padding: 20px;
	margin: 20px;
	width: 650px;
	background-color: rgba(51,51,51,0.6);
	letter-spacing: 2px;
	line-height: 30px;
	


}

#slide2 h3{
	font-family: type;
	font-size:25px;
	font-weight: normal;
	text-shadow: 2px 2px 4px #000000;
	letter-spacing: 1.3px;
	margin-bottom: 50px;
	
	}

#slide2 .plus{
	font-family: magic;
	font-size:30px;
	font-weight: bold;
	margin-left: 300px;
	}
	
#slide2 .btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: type;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-left: 140px;
  text-shadow: 2px 2px 4px #333333;
  letter-spacing:normal;

}

#slide2 .btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,1);

}

#slide2 h4{
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:60px;
	font-weight:bold;
	color:rgba(255,255,255,0.8);
}

#slide2 a{
	color: white;
	text-decoration: none;	
}


#slide2 .reservation{
	position:absolute;
	width: auto;
	text-align: center;
	top:300px;
	right: 50px;
	color:#000000;
	background-color:rgba(255,255,255,1);
	padding: 10px;
	-webkit-border-radius: 10;
  	-moz-border-radius: 10;
  	border-radius: 10px;
  	border-bottom: 3px solid black;
  	border-right: 3px solid black;

 

}

#slide2 .reservation:hover{
	background-color:rgba(255,255,255,0.5);
	
}


#slide2 .resa-1{
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 2px;
	
	}

#slide2 .resa-2{
	display: block;
	font-family: type;
	font-size: 25px;
	letter-spacing: 1.3px;
	border-top: thick double #000000;
    border-bottom: thick double #000000;
    margin-bottom: -10px;
	}


#slide2 .resa-3{
	font-family: sans-serif;
	font-size: 36px;
	letter-spacing: 2px;
	}


/******************************
 SLIDE 3 
*******************************/
#slide3{
	background: url(/img/location-saint-martin-villa.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 680px;
}

#slide3 h2{
	position:absolute;
	width: auto;
	text-align: center;
	top:60px;
	right: 50px;
	font-size:40px;
	font-weight: bold;
	font-family: type;
	color:#ffffff;
	text-shadow: 2px 2px 4px #333333;
	filter: dropshadow(color=#333333, offx=2, offy=2);

}

#slide3 .apropos{
	position:absolute;
	left:0px;
	top:180px;
	font-size:20px;
	color:#ffffff;
	padding: 20px;
	margin: 20px;
	width: 650px;
	background-color: rgba(51,51,51,0.6);
	letter-spacing: 2px;
	line-height: 30px;
	


}

#slide3 h3{
	font-family: type;
	font-size:25px;
	font-weight: normal;
	text-shadow: 2px 2px 4px #000000;
	letter-spacing: 1.3px;
	margin-bottom: 20px;
	
	}

#slide3 .plus{
	font-family: magic;
	font-size:30px;
	font-weight: bold;
	margin-left: 300px;
	}
	
#slide3 .btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: type;
  font-size: 30px;
  font-weight: bold;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-left: 200px;
  text-shadow: 2px 2px 4px #333333;
  letter-spacing:normal;

}

#slide3 .btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,1);

}

#slide3 h4{
	position:absolute;
	bottom:0px;
	left:0px;
	font-size:60px;
	font-weight:bold;
	color:rgba(255,255,255,0.8);
}

#slide3 a{
	color: white;
	text-decoration: none;	
}


#slide3 .reservation{
	position:absolute;
	width: auto;
	text-align: center;
	top:250px;
	right: 50px;
	color:#000000;
	background-color:rgba(255,255,255,1);
	padding: 10px;
	-webkit-border-radius: 10;
  	-moz-border-radius: 10;
  	border-radius: 10px;
  	border-bottom: 3px solid black;
  	border-right: 3px solid black;

 

}

#slide3 .reservation:hover{
	background-color:rgba(255,255,255,0.5);
	
}


#slide3 .resa-1{
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 2px;
	 border-bottom: thick double #000000;
   
	
	}

#slide3 .resa-2{
	display: block;
	font-family: type;
	font-size: 25px;
	letter-spacing: 1.3px;
	margin-bottom: -10px;
	}


#slide3 .resa-3{
	font-family: sans-serif;
	font-size: 36px;
	letter-spacing: 2px;
	border-top: thick double #000000;
    
	}


/******************************
 SLIDE 4 
*******************************/

#slide4{
	height: 500px;
	/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* Opera */ 
background-image: -o-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center top, 0, center top, 553, color-stop(0, #FFFFFF), color-stop(1, #6ED9EC));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #6ED9EC 100%);
	
}





#slide4 h4{
	position:absolute;
	left: 480px;
	text-align: center;
	top:100px;
	font-family: type;
	font-size:45px;
	font-weight: bold;
	color:#ffffff;
	text-shadow: 2px 2px 4px #333333;
	filter: dropshadow(color=#333333, offx=2, offy=2);

}

#slide4 .contact{
	position:absolute;
	display: inline-block;
	left: 450px;
	text-align: center;
	top:160px;
	font-size:26px;
	font-weight: normal;
	color:#000000;
	padding: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	
}

#slide4 a{
	color: black;
	font-weight: bold;	
}

#slide4 a:hover{
	color: white;
	text-shadow: 2px 2px 4px #333333;
	filter: dropshadow(color=#333333, offx=2, offy=2);

		
}

#slide4 .type{
	font-family: type;	
}


#slide4 .bas {
	position:absolute;
	bottom: 10px;
	right: 10px;	
	color: white;
	font-size: 20px;
	font-weight: normal;
	
}

#slide4 .bas:hover {
	color: white;
	text-shadow: 2px 2px 1px black;

}


#slide4 .fleur{
 	position:absolute;	
 	top: 100px;
 	left: -100px;
}




#slide11{
	height: 1600px;
	/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* Opera */ 
background-image: -o-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center top, 0, center top, 553, color-stop(0, #FFFFFF), color-stop(1, #6ED9EC));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center top, circle farthest-corner, #FFFFFF 0%, #6ED9EC 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center top, #FFFFFF 0%, #6ED9EC 100%);
	
}

#slide11 h1{
	position: absolute;
	width: 100%;
	text-align: center;
	top: 200px;
	font-family: type;
	font-size: 40px;
}



#slide11 p{
	position: absolute;
	width: 60%;
	text-align: justify;
	top: 150px;
	font-family: sans-serif;
	font-size: 20px;
	padding: 200px;
	padding-right: 0px;

	
}


footer{
	position: abolute;
	}

footer table{
text-align: center;
margin-top: 20px;	
}

footer table.center{
	margin-left: auto;
	margin-right: auto;	
}

footer td{
	padding: 10px;	
	padding-bottom: 0px;
	padding-top: 10px;
	text-align:left;
	vertical-align: top;
	
}


footer a{
	color: black;
	text-decoration: none;	
}

footer a:hover{
	color: black;
	text-decoration: underline;	
}


.droits{
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}


.droits a{
	color: black;
	text-decoration: none;
	}

.droits a:hover{
	color: black;
	text-decoration: underline;
	}
	

@media (min-width: 1900px) {


#langue
{
	font-size: 60px;
}


.logo{
	margin-left: 300px;
	margin-top: 40px;
}


nav
{
	height: 100px;	
		
}

nav, nav ul
{
	line-height: 100px;
		
}

nav a
{
	font-size: 40px;
	
	
}

nav
{
	font-size: 40px;
	
	
}


nav li ul
{
	width: 260px;
}


nav li ul li
{
	width: 440px;
	height: 100px;
	
	
}

nav li ul li a
{
	font-size: 30px;
	
}

#slide1 {
	height: 1100px;	
}




#slide1 .solde{
	margin-top: 300px;
	font-size: 50px;
}

#slide1 .solde img{
	display: inline-block;
	position: absolute;
	margin-left: 510px;
	margin-top: 20px;
	
	}

#slide1 .solde .prix{
	font-size: 40px;


	}
#slide1 .solde .mois{
	font-size: 40px;
	
	}


#slide1 .parallaxbg{
	left: 0px;
	top:560px;
	font-size:60px;
	line-height: 70px;
	}





#slide1 .btn {
  font-size: 60px;
  margin-left: 170px;

}




/******************************
 SLIDE 2 
*******************************/
#slide2{
	height: 1100px;
}

#slide2 h2{
	top:200px;
	font-size:60px;
}

#slide2 .apropos{
	top:400px;
	font-size:40px;
	width: 1150px;
	letter-spacing: 2px;
	line-height: 50px;
	


}

#slide2 h3{
	font-size:50px;
	}

	
#slide2 .btn {
  font-size: 60px;
  margin-left: 450px;
}




#slide2 .reservation{
	top:600px;
	right: 50px;
}

#slide2 .resa-1{
	font-size: 60px;
	}

#slide2 .resa-2{
	font-size: 40px;
	}


#slide2 .resa-3{
	font-size: 50px;
	}


/******************************
 SLIDE 3 
*******************************/
#slide3{
	height: 1100px;
}

#slide3 h2{
	top:200px;
	margin-left: 800px;
	font-size:60px;

}

#slide3 .apropos{
		top:400px;
	font-size:40px;
	width: 1150px;
	letter-spacing: 2px;
	line-height: 50px;

}

#slide3 h3{
	font-size:50px;
	}

	
#slide3 .btn {
  font-size: 60px;
  margin-left: 300px;
}




#slide3 .reservation{
	top:600px;
	right: 50px;
}

#slide3 .resa-1{
	font-size: 60px;
	}

#slide3 .resa-2{
	font-size: 40px;
	}


#slide3 .resa-3{
	font-size: 50px;
	}

/******************************
 SLIDE 4 
*******************************/

#slide4{
	height: 800px;
}





#slide4 h4{
	left: 800px;
	font-size:60px;
	
}

#slide4 .contact{
	left: 550px;
	top:200px;
	font-size:50px;
}




footer{
	font-size: 30px;
	}


.droits{
font-size: 30px;
margin-top: 100px;
}


}
@media (max-width: 1024px) {


	body{
		width: 1200px;
	}
	
	.navigation{
		width: 1400px;
	}
	
	nav
{
	height: 80px;	
		
}

.logo{
	z-index: 0;
	
}

nav, nav ul
{
	line-height: 80px;
		
}

#langue
{
	font-size: 36px;
	margin-top: 15px;
	margin-left: 10px;	

}

nav ul{
	margin-left: 10px;	
}

nav a
{
	font-size: 30px;
	
	
}

nav li ul
{
	width: 160px;
}



nav li ul li
{
	width: 440px;
	height: 60px;
	
	
}

nav li ul li a
{
	font-size: 30px;
	
}

html>body nav li ul li
{
	border-top: 1px solid transparent;
}

nav li ul li:hover
{
	background: #3498db;
}

nav li ul ul
{
	margin: 0px 0 0 105px;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	

}

nav li ul li ul li a
{
	font-size: 10px;
}

html>body nav li ul ul
{
	border-left: 1px solid transparent;
}



	
	
	#slide1{
	background-image:url(../img/location-saint-martin-rentals.jpg) fixed;
	height: 650px;
	
}

	

#slide2 .reservation{
	top:250px;

}

#slide3{
	padding-top: 250px;
}

#slide3 h2{
	top:240px;
	
}

#slide3 .apropos{
	top:400px;
	
}

#slide3 .reservation{
	top:460px;
}

#slide4 h4{
	display: inline-block;
	text-align: center;
	top:50px;
	left: 480px;
	font-size:45px;
	
}

#slide11{
	height: 2000px;
	
	}

	
}