@import url('reset.css');
body { font-family: 'Cookie', serif; background-color: #ffbf3b; }
body { color: rgba(255,255,255,1); }
.container { height: auto; max-width: 900px; overflow: hidden; margin-right: auto; margin-left: auto; }
.indexp { font-size: xx-large; color: #063; text-align: center;text-shadow: 1px 1px 1px rgba(255,255,255,0.9); }
.page { height: auto; max-width: 900px; margin-right: auto; margin-left: auto; font-size: xx-large; color: #063; width: 90%;/* [disabled]padding-top: 1em; */ }
.accueil { height: auto; max-width: 900px; margin-right: auto; margin-left: auto; font-size: xx-large; color: #063; width: 90%; padding-top: 1em; text-align: justify; }
.contact { height: auto; max-width: 900px; margin-right: auto; margin-left: auto; font-size: xx-large; color: #063; width: 90%;/* [disabled]padding-top: 1em; */ }
.contact img {height: auto; width: 95%; max-width: 400px;}
.ateliers { height: auto; max-width: 900px; margin-right: auto; margin-left: auto; font-size: x-large; color: #063; width: 90%;/* [disabled]padding-top: 1em; */ text-align: justify; }
.ateliers img {height: auto; width: auto;}
.invention { height: auto; max-width: 900px; margin-right: auto; margin-left: auto; font-size: x-large; color: #063; width: 95%; padding-top: 1em; }
.actus { height: auto; max-width: 900px; margin-right: auto; margin-left: auto; font-size: x-large; color: #063; width: 90%;/* [disabled]padding-top: 1em; */ }
h2 { font-size: xx-large; text-align: center; }
.img500 { height: auto; width: 100%; max-width: 500px;}
.imgLeft350 { height: auto;width: 100%; max-width: 350px; padding-left: 1em;text-align: center; }
.imgCentre { display: block; margin-left: auto;margin-right: auto;text-align: center;}
img { height: auto; width: 95%; max-width: 600px;}
hr {border: 0;height: 1px; background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image:-ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));}
.texteLeft { text-align: left; }
.texteCentre { text-align: center; }
.texteSlide { height: auto; max-width: 1200px; width: 95%; color: #063; text-align: center; -webkit-animation: slideIn 0.6s ease-in-out 3s backwards; -moz-animation: slideIn 0.6s ease-in-out 3s backwards; -ms-animation: slideIn 0.6s ease-in-out 3s backwards; animation: slideIn 0.6s ease-in-out 3s backwards; margin-right: auto; margin-left: auto; font-size: x-large; font-style: italic; padding-top: 0.5em;  }
.footer { height: auto; max-width: 1200px; width: 95%; color: #063; text-align: center; -webkit-animation: slideIn 0.6s ease-in-out 3s backwards; -moz-animation: slideIn 0.6s ease-in-out 3s backwards; -ms-animation: slideIn 0.6s ease-in-out 3s backwards; animation: slideIn 0.6s ease-in-out 3s backwards; margin-right: auto; margin-left: auto; font-size: x-large; font-style: italic; padding-top: 1em; padding-bottom: 1em; }
.ombreBlanche {text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9);}
.sp-side { max-width: 400px; height: auto;/* [disabled]position: absolute; */ right: 10px; top: 25%; 
-webkit-animation: slideIn 0.6s ease-in-out 0.6s backwards; 
-moz-animation: slideIn 0.6s ease-in-out 0.6s backwards; 
-ms-animation: slideIn 0.6s ease-in-out 0.6s backwards; 
animation: slideIn 0.6s ease-in-out 0.6s backwards;
/* [disabled]border: medium dashed #000; */ padding-top: 1em; }
.sp-side { width: 460px; height:auto;margin-right: auto; margin-left: auto;}
.sp-side { position: relative; right: 0px; top: 0%; }
.sp-side h2 {font-size: 70px;padding: 20px 0px;text-align: center;color: #fff;text-transform: uppercase;text-shadow: 1px 1px 2px rgba(0,0,0,0.8);font-family: 'Unlock', Arial, sans-serif;}
.sp-content h1.sp-title { font-size: 60px; line-height: 60px;/* [disabled]position: absolute; *//* [disabled]top: 50px; *//* [disabled]left: 160px; */ width: 400px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fff; background-color: rgba(255, 255, 255, 0.5);/* [disabled]padding-top: 135px; */ height: 140px; text-transform: uppercase; text-align: center; color: #30a443; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); font-family: 'Unlock', Arial, sans-serif; 
-webkit-animation: fadeInColor 1.2s linear 1.2s backwards;
-moz-animation: fadeInColor 1.2s linear 1.2s backwards;
-ms-animation: fadeInColor 1.2s linear 1.2s backwards; animation: fadeInColor 1.2s linear 1.2s backwards; }
.sp-content h1:last-child em {
font-family: 'Cookie', serif;
text-transform: none;
}
.sp-content h2 { font-size: 36px; text-align: center; color: #518f7e; font-family: 'Cookie', serif; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; -webkit-animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards; -moz-animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards; -ms-animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards; animation: fromBack 0.6s ease-in-out 2.6s backwards, fadeOut 0.5s linear 4.5s backwards; }
a {text-decoration: none; }
a { display: inline-block; background: #FFBF3B; color: #000;/* [disabled]font-family: 'Arial Narrow', Arial, sans-serif; *//* [disabled]text-transform: uppercase; */ font-size: x-large;/* [disabled]box-shadow: 1px 1px 4px rgba(0,0,0,0.2); */ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 10px; }
a:hover { color: #fff; background: #063;-webkit-border-radius: 100px;border-radius: 100px; }
.clr { clear: both; }
h1.main { font-size: 36px;/* [disabled]position: relative; *//* [disabled]font-weight: 400; */ text-shadow: 0px 1px 1px rgba(255,255,255,1); text-align: center;/* [disabled]z-index: 1000; *//*-webkit-animation: appear 0.6s ease-in-out 1s backwards; -moz-animation: appear 0.6s ease-in-out 1s backwards;*/ /* [disabled]padding-bottom: 0.2em; */ color: #063; }
.header { font-family: 'Arial Narrow', Arial, sans-serif; line-height: 24px; font-size: 11px; background: #000; opacity: 0.9; text-transform: uppercase; z-index: 9999; position: relative; -moz-box-shadow: 1px 0px 2px #000; -webkit-box-shadow: 1px 0px 2px #000; box-shadow: 1px 0px 2px #000; }
.header a { padding: 0px 10px; letter-spacing: 1px; color: #ddd; display: block; float: left; }
.header a:hover { color: #fff; }
.header span.right { float: right; }
.header span.right a { float: none; display: inline; }
p.demos { position: relative; z-index: 1000; padding: 4px; text-align: center;/* [disabled]-webkit-animation: appear 0.6s ease-in-out 6.2s backwards; -moz-animation: appear 0.6s ease-in-out 6.2s backwards; */ ; line-height: 2; }
p.demos a { display: inline-block; background: #FFBF3B; color: #000; font-family: 'Arial Narrow', Arial, sans-serif;/* [disabled]text-transform: uppercase; */ font-size: medium;/* [disabled]box-shadow: 1px 1px 4px rgba(0,0,0,0.2); */ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; padding-top: 2px; padding-right: 10px; padding-bottom: 2px; padding-left: 10px; }
p.demos a:hover { color: #fff; background: #063;-webkit-border-radius: 100px;border-radius: 100px; }
p.demos a.current-demo, p.demos a.current-demo:hover { font-weight: bold; background: #333; color: #fff; }
#tailleur{ font: bold xx-small Verdana, Geneva, sans-serif; color: #666; margin-right: auto; margin-left: auto; margin-top: 20px; text-align: center; margin-bottom: 20px; }
#tailleur img { text-align: center; display: block; height: 30px; width: 96px; margin-right: auto; margin-left: auto; }
#tailleur a{  text-decoration: none;font: bold xx-small Verdana, Geneva, sans-serif; color: #333; }
#tailleur a:hover{text-decoration:none;color: rgb(0,0,0); background-color: rgb(255,255,255);}
.admin { font-size: medium; color: #666; text-align: center; margin-right: auto; margin-left: auto; margin-bottom: 1em; }
.admin a{ text-decoration: none; font-size:medium; color: #666;}
.admin a:hover{ color: rgb(0,0,0); background-color: rgb(255,255,255); }
@-webkit-keyframes appear {  
0% {opacity: 0;}
100% {opacity: 1;}
}
@-moz-keyframes appear {  
0% {opacity: 0;}
100% {opacity: 1;}
}

@-webkit-keyframes fadeOut{
0%{opacity: 1;}
100%{opacity: 0;}
}
@-webkit-keyframes fadeInColor{
0%{opacity: 0;background-color: rgba(255,255,255,0);}
50%{opacity: 0.5;background-color: rgba(255,255,255,0);}
100%{opacity: 1;background-color: rgba(255,255,255,0.3);}
}
@-webkit-keyframes slideIn{
0%{opacity: 0;-webkit-transform: translateX(-200px);}
100%{opacity: 1;-webkit-transform: translateX(0px);}
}
@-webkit-keyframes sizeDownMove{
0%{-webkit-transform: scale(1);left: 100px;}
100%{-webkit-transform: scale(0.6);left: 0px;}
}
@-webkit-keyframes fromBack{
0%{-webkit-transform: scale(0);opacity: 0;}
100%{-webkit-transform: scale(1);opacity: 1;}
}
/* -moz- */
@-moz-keyframes fadeOut{
0%{opacity: 1;}
100%{opacity: 0;}
}
@-moz-keyframes fadeInColor{
0%{opacity: 0;background-color: rgba(255,255,255,0);}
50%{opacity: 0.5;background-color: rgba(255,255,255,0);}
100%{opacity: 1;background-color: rgba(255,255,255,0.3);}
}
@-moz-keyframes slideIn{
0%{opacity: 0;-moz-transform: translateX(-200px);}
100%{opacity: 1;-moz-transform: translateX(0px);}
}
@-moz-keyframes sizeDownMove{
0%{-moz-transform: scale(1);left: 100px;}
100%{-moz-transform: scale(0.6);left: 0px;}
}
@-moz-keyframes fromBack{
0%{-moz-transform: scale(0);opacity: 0;}
100%{-moz-transform: scale(1);opacity: 1;}
}
/**/
@keyframes fadeOut{
0%{opacity: 1;}
100%{opacity: 0;}
}
@keyframes fadeInColor{
0%{opacity: 0;background-color: rgba(255,255,255,0);}
50%{opacity: 0.5;background-color: rgba(255,255,255,0);}
100%{opacity: 1;background-color: rgba(255,255,255,0.3);}
}
@keyframes slideIn{
0%{opacity: 0;transform: translateX(-200px);}
100%{opacity: 1;transform: translateX(0px);}
}
@keyframes sizeDownMove{
0%{transform: scale(1);left: 100px;}
100%{transform: scale(0.6);left: 0px;}
}
@keyframes fromBack{
0%{transform: scale(0);opacity: 0;}
100%{transform: scale(1);opacity: 1;}
}
@media only screen and (max-width:700px){
.imgLeft350 { height: auto; max-width: 350px; padding-left: 0em; margin-right: auto; margin-left: auto; text-align: center; }
.accueil {height: auto; max-width: 900px; margin-right: auto; margin-left: auto;font-size: x-large; color: #063; width: 90%;padding-top: 1em;}
}

@media only screen and (max-width:550px){
h1.main { font-size: 30px; text-shadow: 0px 1px 1px rgba(255,255,255,1); text-align: center; color: #063; }

}

@media only screen and (max-width:460px){
h1.main { font-size: x-large; text-shadow: 0px 1px 1px rgba(255,255,255,1); text-align: center; color: #063; }
}