/*******Body******/
body:before{
  content:"";position:fixed;top:-10px;left:0;width:100%;height:10px;
  -webkit-box-shadow:0px 0px 20px rgba(0,0,0,1);-moz-box-shadow:0px 0px 20px rgba(0,0,0,1);box-shadow:0px 0px 20px rgba(0,0,0,1);z-index:100}
body {
  overflow: hidden;
  font-size:18px;
  font-family: 'Quicksand', sans-serif;
  background: url(/daniel-roch.jpg) no-repeat center center fixed;
  -webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
h1,h2{margin:0;padding:0}  
  
  
/*******Copyright******/
#site-logo{
  position:absolute;
  right:0;
  bottom:1em;
  text-transform:uppercase;
  font-size:2.2em;
  letter-spacing:0.1em;
  color:#ddd;
  text-shadow:1px 2px 2px #000;
  padding:10px}
#sitedesc{
  position:absolute;
  right:0;
  bottom:0;
  color:#ddd;
  font-size:1.6em;
  letter-spacing:-1px;
  padding:0 0.5em 0.5em;
  text-shadow:1px 2px 2px #000000}


/*Bloc*/
.post {
background-image: linear-gradient(left bottom, rgba(24,24,48,0.15) 0%, rgba(0,0,48,0.15) 100%);
background-image: -o-linear-gradient(left bottom, rgba(24,24,48,0.15) 0%, rgba(0,0,48,0.15) 100%);
background-image: -moz-linear-gradient(left bottom, rgba(24,24,48,0.15) 0%, rgba(0,0,48,0.15) 100%);
background-image: -webkit-linear-gradient(left bottom, rgba(24,24,48,0.15) 0%, rgba(0,0,48,0.15) 100%);
background-image: -ms-linear-gradient(left bottom, rgba(24,24,48,0.15) 0%, rgba(0,0,48,0.15) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	right top,
	color-stop(0, rgba(24,24,48,0.15)),
	color-stop(1, rgba(0,0,48,0.15))
);
  
  
}  

     
.post {
  border-radius: 0 0 2em 0;
  box-shadow: 0 0 1px 8px rgba(150, 150, 150, 0.1);
  color: #DDDDDD;
  margin: 1em;
  padding: 0.5em;
  width: 17%;}


/*Typo*/
h2{font-size:2.3em}
h2{
  letter-spacing: -3px;
  margin: 0.5em;
  padding: 0;
  text-align: center;
  text-shadow: 1px 2px 3px #000000;
  text-transform: uppercase;}    
h3 {
  letter-spacing: -1px;
  font-size: 1.4em;
  margin:1em 0 0 0;
  padding: 0;
  text-shadow:1px 1px 2px #000;
  text-transform:uppercase;
}
p{font-size:1em}
ul{font-size:1em}
a{color:#A39682}
a:hover{color:#C5404B}

    


/*cercle exterieur*/
#cercleext {
  height:32px;
  width:32px;
  border-radius:36px;
  padding:16px;
  cursor:pointer;
  text-align:center;
  color:white}
.cercleext {
  border: 2px solid rgba(222, 72, 84, 0.3);
  background: none repeat scroll 0 0 transparent;
  -webkit-animation:spin 3s infinite;
  -moz-animation:spin 3s infinite linear;
  animation:spin 3s infinite;}
.cercleext:hover {background:none repeat scroll 0 0 rgba(0, 0, 0, 0.5);}
@-moz-keyframes spin {
  0% {opacity:1;box-shadow:0 0 30px #BFD8BD; }
  100% {opacity:0.5}}
@-webkit-keyframes spin {
  0% {opacity:1;box-shadow:0 0 30px #BFD8BD; }
  100% {opacity:0.5}}
@keyframes spin {
  0% {opacity:1;box-shadow:0 0 30px #BFD8BD; }
  100% {opacity:0.5}}  
.circleextout{
  -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);
  -webkit-animation:spinout 2s linear;
  -moz-animation:spinout 2s linear;
  animation:spinout 2s linear;
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);}
  .circleextretour{
  -webkit-animation:spinin 2s linear;
  -moz-animation:spinin 2s linear;
  animation:spinin 2s linear;}
@-moz-keyframes spinout {
  0% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);}
  20% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  100% {-webkit-transform: scale(60);-moz-transform: scale(60);-o-transform: scale(60);transform: scale(60);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);background:none repeat scroll 0 0 rgba(255, 255, 255, 0)}}
@-moz-keyframes spinin{
  0% {-webkit-transform: scale(60);-moz-transform: scale(60);-o-transform: scale(60);transform: scale(60);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  80% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  100% {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}}
@-webkit-keyframes spinout {
  0% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);}
  20% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  100% {-webkit-transform: scale(60);-moz-transform: scale(60);-o-transform: scale(60);transform: scale(60);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);background:none repeat scroll 0 0 rgba(255, 255, 255, 0)}}
@-webkit-keyframes spinin{
  0% {-webkit-transform: scale(60);-moz-transform: scale(60);-o-transform: scale(60);transform: scale(60);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  80% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  100% {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}}
@keyframes spinout {
  0% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);}
  20% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  100% {-webkit-transform: scale(60);-moz-transform: scale(60);-o-transform: scale(60);transform: scale(60);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);background:none repeat scroll 0 0 rgba(255, 255, 255, 0)}}
@keyframes spinin{
  0% {-webkit-transform: scale(60);-moz-transform: scale(60);-o-transform: scale(60);transform: scale(60);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  80% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0);}
  100% {-webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale(1);}}




/*cercle Intérieur*/
#cercleint {
  border-radius: 20px 20px 20px 20px;
  height: 20px;
  margin: -4px 0 0 -4px;
  padding: 10px;
  width: 20px;}
.cercleint {
  background: none repeat scroll 0 0 rgba(222, 72, 84, 0.6);
  -webkit-animation:spin2 3s infinite;
  -moz-animation:spin2 3s infinite linear;
  animation:spin2 3s infinite;}
@-moz-keyframes spin2 {
0% {-moz-transform:opacity:1;box-shadow:0 0 10px #E38E95}
100% {-moz-transform:opacity:0}}
@-webkit-keyframes spin2 {
0% {-moz-transform:opacity:1;box-shadow:0 0 10px #E38E95}
100% {-moz-transform:opacity:0}}
@keyframes spin2 {
0% {-moz-transform:opacity:1;box-shadow:0 0 10px #E38E95}
100% {-moz-transform:opacity:0}}

.circleout{border:0;-moz-animation: none;background:transparent}
.circleretour{background:transparent;
-moz-animation: 1s linear 0s normal none infinite spin2
-webkit-animation:1s linear infinit spin2;
animation:1s linear infinit spin2;}
  
@-moz-keyframes spinout2 {
0% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3)}
100% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3)}}
@-webkit-keyframes spinout2 {
0% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3)}
100% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3)}}
@keyframes spinout2 {
0% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3)}
100% {background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3)}} 



/*Animation des blocs*/
#post1,#post2,#post3,#site-logo,#sitedesc {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}




/*Blocs à animer*/
#post1,#post2,#post3{position:absolute;opacity:0;display:none;}
#post1.encours{opacity:1;display:block;}
#post1.retour{opacity:0;display:block;}
#post2.encours{opacity:1;display:block;}
#post2.retour{opacity:0;display:block;}
#post3.encours{opacity:1;display:block;}
#post3.retour{opacity:0;display:block;}

/*post1.encours{
-webkit-animation-name:post1;-moz-animation-name:post1;-ms-animation-name:post1;animation-name:post1;}
#post1.retour{
-webkit-animation-name:post1r;-moz-animation-name:post1r;-ms-animation-name:post1r;animation-name:post1r;}
#post2.encours{
-webkit-animation-name:post2;-moz-animation-name:post2;-ms-animation-name:post2;animation-name:post2;}
#post2.retour{
-webkit-animation-name:post2r;-moz-animation-name:post2r;-ms-animation-name:post2r;animation-name:post2r;}
#post3.encours{
-webkit-animation-name:post3;-moz-animation-name:post3;-ms-animation-name:post3;animation-name:post3;}
#post3.retour{
-webkit-animation-name:post3r;-moz-animation-name:post3r;-ms-animation-name:post3r;animation-name:post3r;}

         
/*@-webkit-keyframes tada{0%{-webkit-transform:scale(1)}
10%{-webkit-transform:scale(0.9) rotate(-3deg)}
20%{-webkit-transform:scale(0.9) rotate(-3deg)}
30%{-webkit-transform:scale(1.1) rotate(3deg)}
40%{-webkit-transform:scale(1.1) rotate(-3deg)}
50%{-webkit-transform:scale(1.1) rotate(3deg)}
60%{-webkit-transform:scale(1.1) rotate(-3deg)}
70%{-webkit-transform:scale(1.1) rotate(3deg)}
80%{-webkit-transform:scale(1.1) rotate(-3deg)}
90%{-webkit-transform:scale(1.1) rotate(3deg)}
100%{-webkit-transform:scale(1) rotate(0)}} */
/*@-ms-keyframes tada{0%{-ms-transform:scale(1)}
10%{-ms-transform:scale(0.9) rotate(-3deg)}
20%{-ms-transform:scale(0.9) rotate(-3deg)}
30%{-ms-transform:scale(1.1) rotate(3deg)}
40%{-ms-transform:scale(1.1) rotate(-3deg)}
50%{-ms-transform:scale(1.1) rotate(3deg)}
60%{-ms-transform:scale(1.1) rotate(-3deg)}
70%{-ms-transform:scale(1.1) rotate(3deg)}
80%{-ms-transform:scale(1.1) rotate(-3deg)}
90%{-ms-transform:scale(1.1) rotate(3deg)}
100%{-ms-transform:scale(1) rotate(0)}}
@keyframes tada{0%{transform:scale(1)}
10%{transform:scale(0.9) rotate(-3deg)}
20%{transform:scale(0.9) rotate(-3deg)}
30%{transform:scale(1.1) rotate(3deg)}
40%{transform:scale(1.1) rotate(-3deg)}
50%{transform:scale(1.1) rotate(3deg)}
60%{transform:scale(1.1) rotate(-3deg)}
70%{transform:scale(1.1) rotate(3deg)}
80%{transform:scale(1.1) rotate(-3deg)}
90%{transform:scale(1.1) rotate(3deg)}
100%{transform:scale(1) rotate(0)}}*/







@media screen and (max-width: 1120px) {#site-logo,#sitedesc{left:0%}}
@media screen and (min-width: 1120px) {#site-logo,#sitedesc{right:0%}}
@media screen and (max-height: 480px) {#site-logo,#sitedesc{left:20%}}

/* Police */
@media screen and (min-width: 1250px) and (max-width: 1500px) {body {font-size:16px;}ul{font-size:16px;}}

@media screen and (min-width: 1100px) and (max-width: 1250px) {body {font-size:15px;}ul{font-size:15px;}}
@media screen and (min-width: 1000px) and (max-width: 1100px) {body {font-size:14px;}ul{font-size:14px;}h2{font-size:1.9em}}
@media screen and (min-width: 900px) and (max-width: 1000px) {body {font-size:13px;}ul{font-size:13px;}h2{font-size:1.8em}}
@media screen and (max-width: 900px) {body {font-size:12px;}ul{font-size:12px;}h2{font-size:1.6em}}

@media screen and (max-height: 500px) {#site-logo{font-size:1.4em}#sitedesc{font-size:0.8em}}
@media screen and (max-height: 580px) {#site-logo{font-size:2em}#sitedesc{font-size:1.4em}}



/*Par défaut*/
#cercleext{position:fixed;left:29%;top:57%}
/*Haut bas*/
@media screen and (min-height: 768px) and (max-height: 900px) {#cercleext{top:54%}}
@media screen and (min-height: 600px) and (max-height: 768px) {#cercleext{top:57%}}
@media screen and (max-height: 600px) {#cercleext{top:56%}}
/*Gauche Droite*/
@media screen and (max-width: 1150px) {#cercleext{left:27.5%}}
@media screen and (min-width: 1150px) and (max-width: 1330px) {#cercleext{left:28%}}
@media screen and (min-width: 1330px) and (max-width: 1510px) {#cercleext{left:28.5%}}
/*Cas particuliers*/
@media screen and (min-height: 600px) and (max-height: 768px) and (min-width: 1330px) and (max-width: 1510px) {
  #cercleext{top:55.5%;}} 
@media screen and (min-height: 768px) and (max-height: 900px) and (min-width: 1510px){
  #cercleext{top:57%;}}
@media screen and (max-height: 600px) and (min-width: 1330px) and (max-width: 1700px) {
  #cercleext{top:57%}}
@media screen and (max-height: 600px) and (min-width: 1650px) and (max-width: 2200px) {
  #cercleext{top:61%}}
  
@media screen and (max-height: 660px) and (max-width: 1050px) {
  #cercleext{top:56%}}  
  
@media screen and (max-height: 615px){
  .display1{display:none}}   


#post1 {left:0.5%;top:2%}
#post3 {left:25.5%;top:2%}
#post2 {left:50%;top:2%}


@media screen and (max-height: 320px){
  #post1,#post1.encours,#post1.retour,#post2,#post2.encours,#post2.retour{display:none}#post3{top:1%;left:1%}#site-logo{top:1%}#sitedesc{top:20%}h2{margin:0.1em}}
  
@media screen and (max-width: 780px) and (max-height: 1030px){
#cercleext{left:13%}}
@media screen and (max-width: 610px) and (max-height: 1030px){
#cercleext{left:5%;}ul{padding: 0;}}
@media screen and (max-width: 525px) and (max-height: 305px){
#site-logo, #sitedesc {left: 24%;}#cercleext{left:25%;top:48%}}
@media screen and (max-width: 305px) and (max-height: 525px){
.post{width:40%;}
#cercleext{left:-8%;top:52%}
#post1,#post1.encours,#post1.retour,#post2,#post2.encours,#post2.retour{display:none}
#post3{top:1%;left:1%}}
@media screen and (max-width: 330px) and (max-height: 490px){
#cercleext{top:50%}#cercleext.circleextout{left:50%}
#site-logo, #sitedesc {display:none;}.post{width:40%;}#post1,#post1.encours,#post1.retour,#post2,#post2.encours,#post2.retour{display:none}}  
@media screen and (max-width: 330px) and (max-height: 250px){
#cercleext{left:21%;top:45%}} 
@media screen and (max-width: 250px) and (max-height: 330px){
#cercleext{left:2%;top:48%}}


   
/*Animations par défaut*/
/*rochmedia*    
@-moz-keyframes post1 {
0% {left:30%;top:59%;-moz-transform:scale(0)}
30% {left:21%;top:29%;-moz-transform:scale(0)}
100% {left:0.5%;top:1%;-moz-transform:scale(1)}}
@-moz-keyframes post1r {
0% {left:0.5%;top:1%;-moz-transform:scale(1)}
70% {left:21%;top:29%;-moz-transform:scale(0)}
100% {left:27%;top:54%;-moz-transform:scale(0)}}
/*Ailleurs* 
@-moz-keyframes post3 {
0% {left:21%;top:47%;-moz-transform:scale(0)}
50% {left:21%;top:47%;-moz-transform:scale(0)}
100% {left:26%;top:1%;-moz-transform:scale(1)}}
@-moz-keyframes post3r {
0% {left:26%;top:1%;-moz-transform:scale(1)}
35% {left:26%;top:1%;-moz-transform:scale(1)}
75% {left:21%;top:47%;-moz-transform:scale(0)}
100% {left:21%;top:47%;-moz-transform:scale(0)}}
/*SeoMix* 
@-moz-keyframes post2 {
0% {left:30%;top:58%;-moz-transform:scale(0)}
50% {left:21%;top:35%;-moz-transform:scale(0)}
90% {left:50%;top:8%;-moz-transform:scale(1)}
100% {left:50%;top:8%;-moz-transform:scale(1)}}
@-moz-keyframes post2r {
0% {left:50%;top:8%;-moz-transform:scale(1)}
50% {left:21%;top:35%;-moz-transform:scale(0)}
100% {left:21%;top:35%;-moz-transform:scale(0)}}