* {
	margin: 0px;
	padding: 0px;
}

body {
line-height: 1;
background: #F6EFB5;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #154360;
font-size: 16px;
line-height: 22px;
}

.jumbotron {
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size:36px;
	line-height:24px;
	background: #F6EFB5;
	color:green;
	text-align:center;
}

.entete {
	width:1520px;
	height:300px;
	padding:15px;
}

.footer {
	width:1520px;
	height:50px;
	padding:15px;
}

.banniere {
	width:1220px;
	height:300px;
	padding:15px;
}

.slideshow {
    width: 1500px;
    color: blue;
	font-weight:bold;
	text-align: center;
}

.email,.heures {
    font-family: 'Pacifico', cursive;
	font-size:18px;
	line-height: 30px;
	color:blue;
}

.effets {
  background-color:green;
  height:50px;
  width:300px;
  transition:background-color 2s linear 1s, width 3s ease-in 500ms, height 1s linear 1s;
  color:white;
  transform:rotate(15deg);
  border-color:#BB2747;
  border-style:solid;
  border-width:6px;
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Safari 4.0 - 8.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

/* Standard syntax */
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

.p1 {
    color: #873B59;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 48px;
	text-align: center;
    line-height: 24px;
    width:1000px;
}
.p2 {
    color: #4C0B5F;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 24px;
    line-height: 24px;
    width:1200px;
	
}


#infoClient {
	color: violet;
}

.footer-segment {
float: left;
margin-right: 20px;
width: 210px;
}

#fourth {
margin-right: 0;
}

#fourth p {
padding-right: 5px;
}

a {
color:#6B4A28;
}

a:hover {
color: #496998;
}
	
hr {
background-color: #E7E7E7;
border: 0;
height: 1px;
margin-bottom: 18px;
clear: both;
}

p {
margin-bottom: 18px;
}

li {
padding-left: 5px;
}

aside h3 {
font-size: 18px;
line-height: 1.5em;
text-shadow: 0px 2px 3px #ddd;
}

footer {
margin-bottom: 20px;
clear:both;
}

#footer-area {
border-top: 4px solid #ddd;
margin-top: -4px;
padding: 18px 0;
overflow: hidden;
}

#images {
    left: 0px;
    width: 1450px;
    overflow: hidden;
    opacity: 0.5;
    filter: alpha(opacity=50); 
}


#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 20px;
    display: none;
}

.toggler { width: 750px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 750px; height: 150px; padding: 0.4em; position: relative; background: #F5F6CE; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }



#demo {
	font-size: 36px;
	color: #EA3E1C;
	background:#E9F8F6;
	text-align:center;
}


//*ajouts jquery *//

#premier {
border: 2px;
color: blue;
height: 40px;
width: 1350px;

}

form {
    max-width: 1200px;
    margin: auto;
    background: #F7F8E0;
    padding: 10px;
    
}


#resizable { width: 750px; height: 100px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }
  
.toggler { width: 500px; height: 200px; position: relative; }
  #button { padding: .5em 1em; text-decoration: none; }
  #effect { position: relative; }
  .newClass { width: 240px;  padding: 1em; letter-spacing: 0; margin: 0; }
  .anotherNewClass { text-indent: 40px; letter-spacing: .2em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.1em; }
  
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
 
#merci {
	color: #4B088A;
	text-align:center;
	font-weight:bold;
}

#p10 {
	font-size: 24px;
	color: #380B61;
	text-align:center;
	font-weight:bold;
}