/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {max-width: 100%;}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before,
blockquote:after,
q:before,
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: separate; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */
.clearfix:after { content: " "; display: block; clear: both; }

a {
  color: #e5605c;
  text-decoration: none;
}
.clear {
  clear: both;
}
body {
  font-family: Georgia, Helvetica;
  color: #4d4d4d;
}
body > header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
body > header nav {
  display: block;
  text-align: center;
  margin: 0 auto;
  max-width: 1080px;
  background: rgba(229,96,92,0);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  border-radius: 0 0 20px 20px;
  background: rgba(255,255,255,0.7);
  transition: background 0.5s linear;
}
body > header nav h1 {
  display: inline;
}
body > header nav h1 img {
  vertical-align: middle;
}
body > header nav a {
  background: rgba(255,255,255,0);
  color: #e5605c;
  font-weight: bold;
  font-style: italic;
  float: left;
  width: 195px;
  height: 80px;
  line-height: 80px;
  transition: background 0.2s linear;
}
body > header nav a:hover {
  background: rgba(255,255,255,0.3);
}
body > header nav a.logo {
  width: 300px;
}
body.scroll > header nav {
  background: #fff;
}
section {
  padding: 5em 0 3em 0;
  border-bottom: 10px solid #de3530;
}
section h1 {
  font-size: 2em;
  font-weight: bold;
  color: #e5605c;
  text-align: center;
  margin: 0 0 1em 0;
}
section h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 1em 0 0.5em 0;
}
section .container {
  max-width: 1080px;
  margin: 0 auto;
}
#carousel {
  padding: 0;
}
#carousel .container {
  height: 800px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
#carousel .container .slide {
  left: 0;
  top: 0;
  width: 100%;
  height: 800px;
  position: absolute;
  text-align: center;
  transition: -webkit-transform 0.5s cubic-bezier(0.42, 0, 0.51, 1);
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.51, 1);
  transition: transform 0.5s cubic-bezier(0.42, 0, 0.51, 1), -webkit-transform 0.5s cubic-bezier(0.42, 0, 0.51, 1);
  color: #fff;
}
#carousel .container .slide.next {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}
#carousel .container .slide.prev {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
#carousel .container .slide .image {
  background-size: cover;
  width: 100%;
  height: 100%;
}
#carousel .container .slide .content {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  width: 100%;
  height: 400px;
}
#carousel .container .slide h2 {
  font-size: 3em;
  font-style: italic;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  padding: 1em;
}
#carousel .container .slide .caption {
  font-size: 2em;
  color: #000;
  margin: 1em;
  background: rgba(255,255,255,0.5);
}
#carousel .container .slide a {
  padding: 1em;
  display: inline-block;
  background: #e5605c;
  border-radius: 100px;
  color: #fff;
}
#carousel nav a {
  position: absolute;
  top: 50%;
  height: 40px;
  width: 40px;
  background: url("arrow-left.svg");
  color: transparent;
  display: block;
  left: 10px;
  text-shadow: 0 0 10px #fff;
}
#carousel nav a.next {
  left: auto;
  right: 10px;
  background: url("arrow-right.svg");
}
#carte {
  background: url("symphony.png");
}
#carte h1 {
  text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
#carte .pizza {
  width: 328px;
  position: relative;
  float: left;
  margin: 1em;
  border-radius: 10px;
  z-index: 80;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  background: #fff;
}
#carte .pizza h2 {
  padding: 0 0.5em;
}
#carte .pizza p {
  font-size: 0.95em;
  padding: 1em;
}
#carte .pizza .price {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  padding: 1em;
  background: #e5605c;
  color: #fff;
}
#equipe {
  background: #e5605c;
}
#equipe h1 {
  color: #fff;
}
#equipe .member {
  background: #fff;
  float: left;
  padding: 1em;
  margin: 1em;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 20px #de3530;
}
#equipe .member h2 {
  color: #e5605c;
}
#equipe .member .image {
  height: 200px;
  width: 200px;
  border-radius: 200px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
#services {
  background: url("symphony.png");
}
#services ul {
  height: 100%;
  width: 350px;
  float: left;
}
#services ul li {
  margin: 0 1em 1em 0;
  border-radius: 4px;
  overflow: hidden;
}
#services ul li a {
  text-align: center;
  font-style: italic;
  font-size: 1.2em;
  display: block;
  padding: 0.5em;
  background: rgba(255,255,255,0.7);
}
#services ul li a.active {
  background: #e5605c;
  color: #fff;
}
#services ul li a:hover {
  background: rgba(229,96,92,0.2);
}
#services .services {
  float: left;
}
#services .service {
  background: #fff;
  width: 720px;
  display: none;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
#services .service.active {
  display: block;
}
#services .service .text {
  padding: 1em;
}
#nous-trouver {
  background: #390a09;
}
#evenements {
  background: #e5605c;
}
#evenements h2 {
  color: #fff;
  text-align: center;
  margin-top: -2em;
}
#evenements .entry {
  display: inline-block;
  padding: 1.5em;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  margin: 1em;
}
#evenements .Titre {
  font-size: 1.5em;
  color: #000;
  margin-bottom: 0.5em;
}
#evenements .Date {
  float: right;
  color: #e5605c;
}
#evenements .Illustration img {
  border: 2px solid #e5605c;
  width: 300px;
  margin-right: 1em;
}