html {
	padding:0;
	background-color:#ffffff;
	color:#000c20;
	font-family:'Montserrat Alternates', sans-serif;
	font-size:18px;
	line-height: 1.6;
}
	
h1 {
	font-size:24px;
	font-weight:normal;
	margin:0 0 50px 0;
	padding:0;
	text-align: center;
}

body {
	margin:0;
	padding:0;
	}

img {
	max-width: 100%;
}

.left {
	float: left
}

.right {
	float: right
}

.clear {
    clear: both;
    display: block;
    padding: 0;
    height: 0;
    font-size: 0;
}

#burger {
	display:none;
	position:absolute;
	top:0px;
	left:20px;
	}

#burger img {
	width:30px;
	}

#burger a {
	color:#ce9688;
	font-size:50px;
	text-decoration:none;
	}

#menu_top {
	font-size:18px;
	color:#ffffff;
	padding:20px;
	width: calc(100% - 40px);
	background-color:rgba(0,12,32,0.9);
	text-align:center;
	position:fixed;
    top:0;
	z-index:2;
	}

#menu_top ul {
	list-style-type:none;
	margin:0;
	padding:0;
	}

#menu_top ul li {
	display:inline-block;
	margin:0;
	padding:10px 20px;
	}

#menu_top a {
	text-decoration:none;
	color:#ffffff;
	}

#facebook {
	position:absolute;
	display:block;
	z-index:10;
	top:25px;
	right:25px;
	}

#facebook img {
	width:40px;
	}

header {
	height:600px;
	}
	
#logo {
	width:300px;
	margin-top:250px;
	z-index:1;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	}
	
#logo img {
	width:100%;
	}
	
#bandeau {
	background-image:url(images/bandeau/institut-beaute-rennes-centre.jpg);
	background-position:center center;
	background-size:cover;
	position:absolute;
	background-repeat:no-repeat;
	height:600px;
	width:100%;
	z-index:-1;
	} 

section {
	padding:5%;
	width:90%;
	}	

#presentation {
	display: flex;
    align-items: center;
	text-align:justify;
    justify-content: center;
	}

#presentation img, #presentation .texte {
	max-width: 500px;
	padding:15px
}

#presentation .lettrine {
	font-size:50px;
	}

#univers {
	background:linear-gradient(to bottom, #2b343e, #000c20);
	color: #FFF;
	}

.jcarousel-skin-pika .jcarousel-container-horizontal { 
	padding:30px 0 10px 0;
	overflow:hidden;
	}
	
.jcarousel-skin-pika .jcarousel-item-horizontal {
	margin-right:25px;
	}

.pika-thumbs li {
	width:150px;
	height:130px;
	overflow:hidden;
	float:left; 
	list-style-type:none;	
	margin:0px;
	cursor: pointer;
	}

.pika-thumbs li .clip {
	position:relative;
	height:100%;
	text-align: center;
	vertical-align: middle;
	overflow: hidden;
	}
	
.pika-stage {
	position: relative;
	padding: 10px;
	text-align:center;
	height:450px;
	}
	
.pika-stage img {
	height:100%;
	margin:0px;
	}

.pika-imgnav a {
	position: absolute;
	text-indent: -5000px;
	display: block;
	z-index:3;
	}

.pika-imgnav a.previous {
	background: url(../images/prev.png) no-repeat left 45%;
	height: 100%;
	width: 50px;
	top: 10px;
	left: 10px;
	cursor:pointer;
	}

.pika-imgnav a.next {
	background: url(../images/next.png) no-repeat right 45%;
	height: 100%;
	width: 50px;
	top: 10px;
	right: 10px;
	cursor:pointer;
	}

.pika-textnav, .pika-counter {
	display:none
	}

#tarifs {
	background-image:url(images/fleurs.png);
	background-repeat:no-repeat;
	background-position:bottom left;
	display: flex;
    justify-content: center;
	display: none;
	}

#tarifs img {
	height: 90px;
	}

#tarifs .col2 {
	padding: 100px 50px;
}

#tarifs .col3 {
	padding: 100px 0 0 0;
}
	
h2 {
	font-size:25px;
	font-weight:bold;
	margin:25px 0 0 0;
	padding:0;
}
	
h2 img {
	width:85px;
	margin-top:5px;
}
	
em {
	color:#999999;
}

#tarifs ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

#tarifs ul li {
	margin:9px 0;
	padding:0;
	background-image:url(images/pointilles.gif);
	background-position:0 85%;
	background-repeat:repeat-x;
	}

#tarifs ul .li {
	background-image:none;
	}
	
#tarifs ul li span {
	background-color:#ffffff;
	}
	
#tarifs ul li .left {
	padding-right:5px;
	}
	
#tarifs ul li .right {
	padding-left:5px;
	}
	
#tarifs ul .type {
	background-image:none;
	font-weight:bold;
	padding-top:7px
	}
	
#tarifs ul .forfait {
	background-image:none;
	font-style:italic;
	color:#999999;
	}
	
#tarifs .neutre {
	background-image:none;
	display:block;
	padding-top:5px;
	}	

#tarifs .carte {
	color:#ffffff;
	text-align:center;
	background-color:rgba(0,12,32,1);
	border-radius:20px;
	padding:20px 5%;
	margin:30px auto 0 auto;
	width:90%;
	}
	
h3 {
	font-size:22px;
	font-weight:normal;
	text-align:center;
	margin:0;
	padding:0;
}
	
h4 {
	font-size:22px;
	font-weight:normal;
	text-align:center;
	margin:10px 0 0 0;
	padding:0;
}

#rdv {
	}

#contact {
	background-image:url(images/place-champ-jacquet.jpg);
	background-position:top center;
	background-size:cover;
	background-repeat:no-repeat;
	color:#ffffff;
	display: flex;
    justify-content: center;
	}

#contact a {
	color:#ffffff;
	text-decoration:none;
	}

#contact .coord {
	text-align:right;	
	font-size:18px;
	max-width:350px;
	padding-right: 50px
	}

#contact .coord img {
	width:300px;
	margin-bottom: 30px
	}

#contact .map {
	max-width:540px;
	}

footer {
	background-color:rgba(0,12,32,1);
	color:#ffffff;
	text-align:center;
	padding:2%;
	}

footer a {
	color:#ffffff;
	text-decoration:none;
	}

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

#mentions {
	display:none;
	padding:5%;
	text-align:justify;
	}

#mentions a {
	color:#ffffff;
	text-decoration:underline;
	}

@media handheld, only screen and (max-width: 1023px), only screen and (max-device-width: 1023px) {
	#burger {
		display:block;
		z-index:10;
		}	
	
	.sticky {		
		position:relative;	
	}
	
	#bandeau, header {
		height:410px;
	}
	
	#logo {
		margin-top:130px;
	}
	
	#menu_top {
		display:none;
		height:370px;
		}
	
	#menu_top ul {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	#menu_top ul li {
		display:block;
		padding:3%;
		border-bottom:1px dashed #fff;
		}
		
	#menu_top.floatable {
		display:none!important;
		}	
	
	#menu_top ul li:last-child {
		border-bottom:none;
		}
	
	#menu_top a {
		font-size:20px;
		}
	
	section, footer {
		width:90%;
		padding:10% 5%;
	}
		
	.pika-stage {
		height:250px!important;
		}
		
	#presentation, #tarifs, #contact {
    	flex-direction: column;
		}
	
	#presentation img, #presentation .texte, #tarifs .col1, #tarifs .col2, #tarifs .col3, #contact .coord, #contact .map {
		padding: 0;
		max-width: 100%;
		text-align:center;	
	}
	#contact .map {
		margin: 30px 0;
	}

}