/* ------------------------------------------------------ */
/*			# reset rules #   				  	          */
/* ------------------------------------------------------ */

/* --- remove margins --- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, a, em, img, fieldset, strong, ol, ul, li, dl, dt, dd, pre,
form, input, select, textarea, label, table, tr, th, td { margin: 0; padding: 0 }

/* --- define default attributes for other tags --- */
body { font-family: "Prompt",sans-serif }
a { cursor: pointer }
a:focus { outline: none }
a img { border: 0 }
table { font-size: 100% }
ol, ul { list-style: none }
.spacer { height:20px }
.bigspacer { height:60px }
.clearer { clear:both }
.right { float: right }
.left { float: left }
.container { box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; position: relative; width: 1190px }

/* --- Banner --- */
.banner { background: rgba(0, 0, 0, 0) url("../images/bgTop.jpg") no-repeat scroll center center / cover; height: 500px }
.fond-1 { background: rgba(0, 0, 0, 0) url("../images/fond-1.png") no-repeat scroll center bottom / cover }
.fond-2 { background: rgba(0, 0, 0, 0) url("../images/fond-2.png") no-repeat scroll center bottom / cover }
.fond-3 { background: rgba(0, 0, 0, 0) url("../images/fond-3.png") no-repeat scroll center bottom / cover }

/* --- Flyer --- */
.flyer { background-color: rgba(230, 111, 72, 0.9); color: #ffffff; margin: 80px 0; font-size: 25px; font-family: "Raleway",sans-serif; font-weight: 300; margin: 45 0 130px; padding: 30px 10px; text-align: center; width: 300px }
.flyer h1 { font-family: "Prompt",sans-serif; border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 22px; font-weight: bold; height: 48px; margin-bottom: 15px }
.flyer .title { font-size: 35px; letter-spacing: -2px; font-family: "Prompt",sans-serif; color: #FFFFFF; }
.flyer .sub-title {	border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 27px; height: 60px; margin-bottom: 15px }
.flyer .tel { font-size: 34px; font-family: "Prompt",sans-serif; color: #FFFFFF }
.flyer a { color: #FFFFFF; text-decoration: none }

/* --- Menu --- */
.menu { height: 20px; margin: 0 auto; padding-top: 20px; text-align: center; width: 328px; font-family: "Raleway" }
.menu .active a { color: rgba(230, 111, 72, 1) }
.menu li { padding-left: 17px; padding-right: 16px; float:left; font-size:14px; color:#fff; list-style:none; text-transform:uppercase; font-weight:700 }
.menu li + li { border-left: 1px solid #000 }
.menu li a {color:#fff; text-decoration:none }
.menu li a:hover{ border:none; color: rgba(230, 111, 72, 1) }

/* --- Titre --- */
h2 { background-color: rgba(230, 111, 72, 1); height: 100px; width: 100%; color: #ffffff; font-family: "Prompt",Arial,sans-serif; font-size: 50px; font-weight: lighter; text-align: center; line-height:100px }

/* --- Info --- */
.information { padding: 40px 0 }
.information h3 { margin: 10px 0 20px; text-align: center }
.titre2 {font-size: 15px;}
.information p { color: #707070; font-family: "Raleway",sans-serif; font-weight: 300; line-height: 28px; font-size: 16px; }
.information .info-bloc { float: left; width: 454px; padding: 20px 25px; font-size: 18px }
.information .info-bloc:nth-child(1) { padding: 20px 25px 20px 0 }
.information .info-bloc:nth-child(2) { width: 206px; padding-top: 0; border-right: 1px solid rgba(230, 111, 72, 0.6); border-left: 1px solid rgba(230, 111, 72, 0.6) }
.information .info-bloc:nth-child(3) { padding: 20px 0 20px 28px; font-size: 16px; width: 385px; }
.information .info-bloc:nth-child(3) p { line-height: 32px; }
.information .list-room { margin-left: 26px }
.information .list-room li { height: 32px; color: #666666; }
.information .list-room li strong {	font-size: 20px; font-weight: 500; color: rgba(230, 111, 72, 1) }
.information .number {	font-size: 80px; font-weight: lighter; font-family: "Prompt",Arial,sans-serif; color: rgba(230, 111, 72, 1); height: 80px; line-height: 80px;text-align: center; margin: 10px }

/* --- Localisation --- */
.localisation { padding: 40px 0 }
.localisation .list { line-height: 24px; color: #666; font-family: "Raleway",sans-serif; font-size: 16px; height: auto; margin: auto; padding: 20px; width: 800px }
.localisation .list .img-circle { border: 2px solid rgba(230, 111, 72, 1); border-radius: 50%;  float: left;  margin: 0 20px 0 0; }
.localisation .list .img-circle img { margin: 6px; }
.localisation .list .text { float: left; width: 708px }
.localisation .list + .list { border-top: 1px solid rgba(230, 111, 72, 0.6) }
.loca { height: 390px; overflow: hidden }
.loca iframe { height: 470px }

/* --- Photos --- */
.photos { padding: 40px 0 }
.photos .item { text-align: center; padding-bottom: 20px; }
.photos .filter { display: inline-block; height: 45px }
.photos .filter li { margin-right: 10px; float:left; height: 45px; line-height: 45px; padding-bottom: 10px }
.photos .filter li:last-child { margin-right: 0 }
.photos .filter li a { letter-spacing: 2px; background: #2f2f2f none repeat scroll 0 0; border-radius: 4px; color: #fff; font-size: 14px; font-weight: 700; padding: 10px 14px; text-align: center; text-decoration: none; text-transform: uppercase }
.photos .filter li a:hover { background: rgba(230, 111, 72, 1) }
.photos .filter li a.selected { background: rgba(230, 111, 72, 1) }
.photos .photo-bloc { width: auto; float: left; padding: 10px 13px }
.photos .photo-bloc img { border-radius: 6px }

/* --- contact --- */
.contact { padding: 40px 0 }
.contact .send { text-align: center; width: 100% }
.contact .send .btn-send { border: 0; margin-top: 15px; background: rgba(230, 111, 72, 1) none repeat scroll 0 0; border-radius: 4px; color: #ffffff; font-size: 14px; font-weight: 700; padding: 10px 14px; text-align: center; text-decoration: none; text-transform: uppercase }
.contact .send .btn-send:hover { background: #666666; color: #ffffff }
.contact a { color: rgba(230, 111, 72, 1); text-decoration: none }
.contact a:hover { color: #666666 }
.contact .adress { color: #666666; font-family: "Roboto","sans-serif"; font-size: 18px; font-weight: 300; text-align: center }
.contact .adress div { display: inline-block; padding-bottom: 25px; }
.contact .adress div + div { padding-left: 40px; }
.contact ul li + li { width: 20% }
.contact form {	margin: 0 25% }
.contact form input { box-sizing: border-box; padding: 15px; background: #ededed none repeat scroll 0 0; border: 0 none; border-radius: 4px; color: #555555; font-family: "Roboto","sans-serif"; font-size: 13px; font-weight: 300; width: 100% }
.contact form input + input { margin-top: 10px }
.contact form input:nth-child(2) { width: 48% }
.contact form input:nth-child(3) { width: 50%; margin-left: 5px }
.contact form textarea { box-sizing: border-box; margin: 10px 0; background: #ededed none repeat scroll 0 0; width: 100%; border: medium none; border-radius: 4px; height: 153px; padding: 15px; resize: none; color: #555555; font-family: "Roboto","sans-serif"; font-size: 13px; font-weight: 300 }
.isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; }
.contact .form-alert { background-color: #ffdbdb; color: #cf0000; font-size: 16px; margin: 0 25%; padding: 5px 0; text-align: center }
.contact .form-succes { font-size: 22px; padding: 30px 0; text-align: center }
.contact input[type=number] {-moz-appearance: textfield }
.contact input::-webkit-inner-spin-button, input::-webkit-outer-spin-button { -webkit-appearance: none; margin:0 }
.contact input::-o-inner-spin-button, input::-o-outer-spin-button { -o-appearance: none;	margin:0 }

/* --- Footer --- */
.footer { background: #101010 none repeat scroll 0 0; color: #fff; height: 80px; }
.footer li {height: 40px; border-right:1px solid #343434; float:left; margin: 20px 0; list-style: none;	line-height: 40px }
.footer li:last-child{ border-right:none }
.footer li a { padding: 0 15px; text-decoration: none; font-size: 14px; color: #fff }
.footer li a:hover{	color: rgba(230, 111, 72, 1) }
.footer p { height: 80px; line-height: 80px }
.footer .nrcreation:hover a {color: rgba(230, 111, 72, 1) }
.footer .nrcreation a {color: #ffffff; text-decoration: none }
.footer li.last { border-right:none }
.footer .btn-ft { margin: 26px 0 0 10px; }

.RESPONSIVE { width: 50px; height: 50px; position:fixed; top: 0; border-left: 0; background-color: white }

/* --- Responsive Tablet --- */
@media (min-width: 640px) and (max-width: 1080px) {
	.RESPONSIVE { background-color: green }
	.container { width: auto }
	.fond-1, .fond-2, .fond-3 { background: none }
	.information .info-bloc { }
	.information .info-bloc:nth-child(1) { width: 100%; text-align: center; padding: 0 0 20px 0; }
	.information .info-bloc:nth-child(2) { width: 40%; padding: 0 5% 0 0; border: 0 }
	.information .info-bloc:nth-child(3) { width: 55%; padding: 0; }
	.information .info-bloc:nth-child(3) p { font-size: 14px }
	.information .list-room { margin-left: 0; text-align: center }
	.localisation .list { width: 100%; padding: 20px 0; }
	.contact form {	margin: 0 15px }
	.contact .form-alert { margin: 0 15px }
	.photos .filter { height: auto }
	.photos .photo-bloc { padding: 10px 0; width: 33% }
	.photos .photo-bloc img { width: 90% }
	.footer p { height: auto; line-height: 20px; padding-top: 20px; width: 50%; font-size: 12px }
	.localisation .list { min-height: 75px; height: auto }
	.localisation .list .text { width: 84% }
	.footer { height: auto }
	.footer p { text-align: center; width: 100%; float: none }
	.footer ul { float: none; text-align: center }
	.footer li { width: 33%; }
	.footer .btn-ft { display: none }
}

/* --- Responsive Phone --- */
@media (min-width: 20px) and (max-width: 640px) {
	.RESPONSIVE { background-color: red }
	.menu { width: 100% }
	.menu li { width: 33%; padding: 0; }
	.container { width: auto; padding-left: 10px; padding-right: 10px }
	.fond-1,.fond-2, .fond-3 { background: none }
	.banner { height: 440px }
	.flyer { margin: 30px auto; width: 100%; box-sizing: border-box; padding: 20px 10px; }
	.flyer h1 { font-size: 20px; height: 40px }
	.flyer .title { font-size: 30px }
	h2 { font-size: 30px; line-height: 70px; height: 70px; }
	h3 { font-size: 20px; }
	.information, .contact, .localisation, .photos { padding: 25px 0 }
	.information .info-bloc { width: 100%; text-align: center; padding: 0 0 20px 0; }
	.information .info-bloc:nth-child(1) { width: 100%; text-align: center; padding: 0 0 20px 0; }
	.information .info-bloc:nth-child(2) { width: 100%; padding: 0 0 20px 0; border: 0 }
	.information .info-bloc:nth-child(3) { width: 100%; padding: 0; }
	.information .info-bloc:nth-child(3) p { font-size: 14px }
	.information .list-room { margin-left: 0; text-align: center }
	.localisation .list { width: 100%; padding: 20px 0; }
	.localisation .list .img-circle { margin: 0 auto 12px; width: 66px; float: none }
	.localisation .list .text { width: 100%; text-align: center }
	.contact form {	margin: 0 15px }
	.contact .form-alert { margin: 0 15px }
	.photos .filter { height: auto }
	.photos .photo-bloc { padding: 0 0 10px 0; width: 100% }
	.photos .photo-bloc img { width: 100% }
	.localisation .list { min-height: 75px; height: auto; font-size: 12px; line-height: 18px; padding: 16px 0; }
	.loca iframe { height: 350px }
	.loca { height: 270px }
	.contact .adress div { padding: 0 0 18px 0; width: 100% }
	.contact .adress div + div { padding: 0 0 18px 0 }
	.contact form input:nth-child(2) { width: 100% }
	.contact form input:nth-child(3) { width: 100%; margin-left: 0 }
	.photos .filter li a { font-size: 12px; letter-spacing: 1px; padding: 5px 8px }
	.photos .filter li { height: 28px; line-height: 28px; margin-right: 5px; padding-bottom: 7px }
	.footer { height: auto }
	.footer p { height: auto; line-height: 20px; padding-top: 20px; width: 100%; font-size: 12px; text-align: center; float: none; }
	.footer ul {width: 100%; float: none; display: inline-block }
	.footer li { width: 33%; text-align: center }
	.footer .btn-ft { display: none }
	.information .info-bloc:nth-child(3) p { line-height: 22px; font-size: 16px; }
	.information p { line-height: 22px; font-size: 16px; }
	.titre2 {font-size: 20px;}
}