.poire{
width: 100px;
    float: left;
    
}



.trut{
  float: left;  
    
}
.zer {
    text-align: center;
    display: block;
}

.tete {
    margin-left: 200px;
}


@media(max-width:1275px){
 .tete {
    margin-left: 100px;
}   
    
}

@media(max-width:1071px){
 .tete {
    margin-left: 50px;
}   
    
}

@media(max-width:981px){
 .tete {
    margin-left: 50px;
}   
    
}

@media(max-width:687px){
 .tete {
    margin-left: 20px;
}   
    
}


.logaz {
     
    float: right;
}

.log {
 
    float: left;
}

.ico {
    width: 150px;
}

.dede {

    margin-left: 200px;
}

@media(max-width:1628px){
    .dede {

    margin-left: 10px;
}
}

.point {

  width: 100%;
    padding-top: 20px;
     background:rgba(137, 139, 145, 0.4);

    background-image: url(img/pattern.png);
  
}




.opac {
    background-color: aliceblue;
    height: 100%;
}


  
  @-webkit-keyframes spincube {
    from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    16%      { -webkit-transform: rotateY(-90deg);                           }
    33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
    50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);           }
    66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg);           }
    83%      { -webkit-transform: rotateX(90deg);                            }
  }

  @keyframes spincube {
    from,to {
      -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    16% {
      -moz-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
      transform: rotateY(-90deg);
    }
    33% {
      -moz-transform: rotateY(-90deg) rotateZ(90deg);
      -ms-transform: rotateY(-90deg) rotateZ(90deg);
      transform: rotateY(-90deg) rotateZ(90deg);
    }
    50% {
      -moz-transform: rotateY(-180deg) rotateZ(90deg);
      -ms-transform: rotateY(-180deg) rotateZ(90deg);
      transform: rotateY(-180deg) rotateZ(90deg);
    }
    66% {
      -moz-transform: rotateY(-270deg) rotateX(90deg);
      -ms-transform: rotateY(-270deg) rotateX(90deg);
      transform: rotateY(-270deg) rotateX(90deg);
    }
    83% {
      -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
      transform: rotateX(90deg);
    }
  }

  .cubespinner {
    -webkit-animation-name: spincube;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;

    animation-name: spincube;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 12s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: 60px 60px 0;
    -moz-transform-origin: 60px 60px 0;
    -ms-transform-origin: 60px 60px 0;
    transform-origin: 60px 60px 0;
  }

  .cubespinner div {
    position: absolute;
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
   
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);

    text-align: center;
    font-size: 100px;
  }

  .cubespinner .face1 {
    -webkit-transform: translateZ(60px);
    -moz-transform: translateZ(60px);
    -ms-transform: translateZ(60px);
    transform: translateZ(60px);
   background-image: url(img/html.jpg);
  }
  .cubespinner .face2 {
    -webkit-transform: rotateY(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) translateZ(60px);
    transform: rotateY(90deg) translateZ(60px);
        background-image: url(img/ill.jpg);
  }
  .cubespinner .face3 {
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -moz-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
        background-image: url(img/id.jpg);
  }
  .cubespinner .face4 {
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
          background-image: url(img/ps.jpg);
  }
  .cubespinner .face5 {
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
      background-image: url(img/bra.jpg);
  }
  .cubespinner .face6 {
    -webkit-transform: rotateX(-90deg) translateZ(60px);
    -moz-transform: rotateX(-90deg) translateZ(60px);
    -ms-transform: rotateX(-90deg) translateZ(60px);
    transform: rotateX(-90deg) translateZ(60px);
          background-image: url(img/3d.jpg);
  }



.fa-pencil {
    font-size: 20px;
    color: #fff;
}

.icon-envelop {
    font-size: 18px;
    color: #fff;
   
}

.icon-main {
       font-size: 25px;
    color: #fff;
}

.icon-coat {
        font-size: 25px;
    color: #fff;
}

.ligne {
    
   font-family: 'Roboto';
    font-size: 14px;
    position: absolute;
    left: 56px;
    top:18px;
   color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
  text-shadow:  0 0 1vw var(--red),
                0 0 3vw var(--red),
                0 0 10vw var(--red),
                0 0 10vw var(--red),
                0 0 .4vw var(--gold),
              
}


.ligne:hover {
    font-size: 12px;
    position: absolute;
    left: 56px;
   color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
  text-shadow:  0 0 1vw var(--red),
                0 0 3vw var(--red),
                0 0 10vw var(--red),
                0 0 10vw var(--red),
                0 0 .4vw var(--gold),
                .3vw .3vw .1vw var(--brown);
}











.gie {
    color:aliceblue;
    font-size: 18px;
    padding: 8px;
    font-family: 'Dancing Script', cursive;
    margin-left:59px;
}

.pres {
    font-size: 16px;
    font-family: "family=Dancing+Script";
    line-height: 30px;
    text-align: center;
}

.cascade {
 padding: 20px;
width: 100%;
text-transform: uppercase;
color: #fff;
text-align: center;
letter-spacing: 16px;
padding-top: 25px;
font: 900 50px/1 'Source Sans Pro', Arial, sans-serif;
text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%),
 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%),
 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2),
 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3);
}


@media (max-width:450px){
    
.cascade {
 padding: 20px;
width: 100%;
text-transform: uppercase;
color: #fff;
text-align: center;
letter-spacing: 16px;
padding-top: 25px;
font: 900 30px/1 'Source Sans Pro', Arial, sans-serif;
text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%),
 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%),
 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2),
 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3);
}
}


.red {
    padding: 20px;
    float: left;
}


@media (max-width:1137px){
    
 .red {
    padding: 20px;
  width: 100%;
     display: block;
     float: none;
}   
    
}
.plume {
     text-align: center;
}

.icon-plume {
    font-size: 150px;
    color: #000;
}

.restora {
       font-size: 16px;
    font-family: "family=Dancing+Script";
    line-height: 30px;
 
    padding: 15px;
   
}

.pic {
         font-size: 20px;
    font-family: "family=Dancing+Script";
    line-height: 30px;
   
    padding: 5px;
}

.icon-pencil2 {
     font-size: 20px;
    color: #fff;
}





.vc {
 color: #080865;
   background-image: url(img/fd.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
}



.paula {
    background-color: rgba(48, 59, 49, 0.78);
    color: aqua;

}

.fdji {
    color: darkgray;
}


@media (max-width:1600px){
    
.stage {
    margin-left: 100px;
}    
    
}

@media (max-width:1289px){
    
.stage {
    margin-left: 200px;
}    
    
}

@media (max-width:671px){
    
.stage {
    margin-left: 30px;
}    
    
}

.bv {
    text-align: center;
    color:darkblue;
    font-size: 20px;
}

.pirat {
    color: firebrick;
}

.pirat:hover {
    color:darkgray;
}

.beber {
    margin-left: -71px;
}

#calendar-app {
  background-image: url(img/blue.jpg);
}





.icon-chien {
 
            font-size: 25px;
    color: #fff;

}

#disp {
    display: block;
}

#dusp {
    display: none;
}


@media (max-width:745px){
    
#dusp {
    display: block;
    width: 280px;
}
    #disp {
    display: none;
        z-index: 8000;
}
    
}





.bard {
    color: darkslateblue;
    font-size: 55px;
    margin-left: 20px;
    margin-right: 20px;
}

.mp {
    text-align: center;
}

.tred {
    width: 170px;
    animation-duration: 2s;
  animation-delay: 0.5s;


}




.mau {

}

.presa {
  font-size: 20px;
    font-family: "family=Dancing+Script";
    line-height: 30px;
    text-align: center;
}



.rr {
         font-size: 18px;
    font-family: "family=Dancing+Script";
    line-height: 40px;
  
    padding: 15px;
    margin-top: 25px;
}

.virt {
    padding: 15px;
}



.tre {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.tig {
    color: #fff;
    font-size: 15px;
}

.pestor {
    font-size: 18px;
    line-height:40px;
    margin-top: 25px;
    padding: 10px;
}





.zaze {
    margin-left: 50px;
    position: absolute;
    top: 20px;
}

.pipal {
      font-size: 16px;
    font-family: "family=Dancing+Script";
    line-height: 30px;
    color: #5a0b5a;
 
}

.pesto {
       font-size: 32px;
    padding: 8px;
    font-family: 'Dancing Script', cursive;
    text-align: center;
     color: #5a0b5a;
}

.festo {
         font-size: 32px;
    padding: 8px;

    text-align: center;
     color: #5a0b5a;
}

.dd {
    z-index: 3000;
}

.ght {
    font-size: 16px;

    color:darkorange;
    text-align: center;
    font-weight: 700;
    padding: 5px;
}

@media (max-width:1044px){
    
.ght {
    font-size: 14px;

    color:darkorange;
    text-align: center;
    
    padding: 2px;
}    
    
}

@media (max-width:534px){
    
.ght {
    font-size: 12px;

    color:darkorange;
    text-align: center;
    
    padding: 1px;
}    
    
}

.restota {
    font-size: 15px;
    line-height: 30px;
  
}

.tyh {

    list-style:circle;
}

.jk {
text-align: center;
    padding: 10px;
}

.fronti {
    color: coral;
    text-align: center;
    
}

.barda {
     color: darkslateblue;
    font-size: 75px;
    margin-left: 20px;
    margin-right: 20px;
}

.bvi {
      text-align: center;
    color:darkblue;
  font-family: "Roboto";
    font-size: 19px;
 
}








.bou {
    font-size: 18px;
}

.rek {
    text-align: center;
    padding: 10px;
}

.pout {
    font-size: 26px;
    float: left;
font-family: 'Great Vibes', cursive;
    text-align: center;
}







@import "compass/css3";
@import 'https://fonts.googleapis.com/css?family=Kreon:300,700';

.render {
    margin-top: 25px;
    letter-spacing: 10px;
  align-self: center;
  @include transition(all 0.3s ease);
  @include transform3d(rotateX(50deg) rotateZ(1deg));
  font-family: 'Kreon', serif;
  font-weight: 700;
  font-size: 35px;
  color: #f5f5f5;
    text-align: center;
  text-shadow:
    white 0.006em 0.006em 0.007em,
    #584e4e 1px 1px 1px,
    #584e4e 1px 2px 1px,
    #584e4e 1px 3px 1px,
    #584e4e 1px 4px 1px,
    #584e4e 1px 5px 1px,
    #584e4e 1px 6px 1px,
    #584e4e 1px 7px 1px,
    #584e4e 1px 8px 1px,
    #584e4e 1px 9px 1px,
    #584e4e 1px 10px 1px,
    #584e4e 1px 11px 1px,
    #584e4e 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 18px 6px,
    rgba(16, 16, 16, 0.2) 1px 22px 10px,
    rgba(16, 16, 16, 0.2) 1px 26px 35px,
    rgba(16, 16, 16, 0.4) 1px 30px 65px,
    white -0.15em -0.1em 100px;

}

.grapho {
    font-size: 12px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: 100px;
    
}

@media(max-width:1181px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: 50px;
}  
    
}
@media(max-width:982px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: -44px;
    margin-left: 100px;
}  
    
}


@media(max-width:901px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: -44px;
    margin-left: 100px;
}  
    
}

@media(max-width:802px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: -44px;
    margin-left: 50px;
}  
    
}

@media(max-width:771px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: -82px;
    margin-left: 10px;
    z-index: 9000;
}  
    
}

@media(max-width:566px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
   
    margin-left: 10px;
}  
    
}


@media(max-width:514px){
.grapho {
    font-size: 14px;
    text-align: center;
    padding: 10px;
   color: antiquewhite;
    width: 100%;
    margin-top: 7px;
    margin-left: 10px;
     z-index: 6;
}  
    
}

@media(max-width:496px){
.grapho {
   font-size: 12px;
text-align: center;
padding: 10px;
color:
antiquewhite;
width: 100%;
margin-top: -50px;
margin-left: -20px;
     z-index: 6;
}  
    
}

.angeL {
        color:antiquewhite;
    font-size: 30px;
    text-align: center;
 font-family: 'Dancing Script', cursive;
     margin-top: 15px;

}

.popol {
    font-size: 74px;
  
}

.loger {
    margin-top: 40px;
}





:root {
  --gold  : #fed128;
  --red   : #fa1c16;
  --brown : #806914;
}

@font-face {
  font-family: neon;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}


/* contain */
.contain {
  position: relative;
  z-index: 1;
}
.contain h1 {
  color: var(--gold);
  font-size: 12px;
  text-transform: uppercase;
  text-shadow:  0 0 1vw var(--red),
                0 0 3vw var(--red),
                0 0 10vw var(--red),
                0 0 10vw var(--red),
                0 0 .4vw var(--gold),
                .3vw .3vw .1vw var(--brown);
}










.fa-angle-left {
    color: var(--gold);
  font-size: 18px;

  text-transform: uppercase;
  text-shadow:  0 0 1vw var(--red),
                0 0 3vw var(--red),
                0 0 10vw var(--red),
                0 0 10vw var(--red),
                0 0 .4vw var(--gold),
    
}

.icon-mail {
       font-size: 16px;
    color: #fff;
}



.icon-crea {
         font-size: 16px;
    color: #fff;
}

.icon-ps {
          font-size: 16px;
    color:cornflowerblue;
}

.icon-ILL {
          font-size: 16px;
    color:coral;
}

.icon-ide {
     font-size: 18px;
    color: #fff;
}

.icon-velo {
           font-size: 18px;
    color: #fff;
}

#ball {
    height: 300px;
}

@media(max-width:1162px){

#ball {
    height: 250px;
}  
    
}

@media(max-width:996px){

#ball {
    height: 200px;
    opacity: 0.6;
}  
    
}










.wrapper {
    background-color: rgba(255, 255, 255, 0.83);
}

.icon-arrow-up2 {
    font-size: 51px;
    color: darkblue;
    display: none;
}

@media(max-width:746px){
    
  .icon-arrow-up2 {
    font-size: 51px;
    color: darkblue;
      display: block;
}  
    
}







.plo {
  
  animation: blinkopacitysmooth linear 1s infinite alternate;
}
@keyframes blinkopacitysmooth {   
  0% { opacity: 1; } 
  100% { opacity: 0; }  
}
}







.fa-envelope {    font-size: 89px;
}

.bvir {
    color: #fff;
    font-size: 17px;
}

.mimi {
    width: 800px;
}

.drt {
     background-color: aqua;
}

.nuel {
    margin-top: 80px;
    
}

.angels {
          color:antiquewhite;
    font-size: 30px;
    text-align: center;
 font-family: 'Dancing Script', cursive;
     margin-top:-34px;
    
}

@media (max-width:458px){
    
.angels {
          color:antiquewhite;
    font-size: 20px;
    text-align: center;
 font-family: 'Dancing Script', cursive;
     margin-top:-14px;
    
}  
    
}

.pointil {
      width: 100%;
    padding-top: 20px;
     background:rgba(137, 139, 145, 0.4);

    background-image: url(img/pattern.png);
}

.notif {
    font-size: 18px;
    color: darkslateblue;
    font-weight: 700;
}

.notifi {
      font-size: 16px;
    color: darkslateblue;
}


@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
figure.snip0016 {
font-family: 'Raleway', Arial, sans-serif;
color:
#fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 325px;
max-height: 900px;
width: 100%;
background:
#000000;
text-align: left;
float: left;
}

@media (max-width:906px){
    
 figure.snip0016 {
     font-family: 'Raleway', Arial, sans-serif;
    color: 
#fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 500px;
max-height: 900px;
width: 46%;
background:
#000000;
text-align: left;
float: left;
}

@media (max-width:786px){
    
 figure.snip0016 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width:335px;
  max-height:500px;
  width: 100%;
  background: #000000;
  text-align: left;
float: none;
}   
    
    
    
    
    
    
}








figure.snip0016 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0016 img {
  max-width: 100%;
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0016 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px 3em;
  width: 100%;
  height: 100%;
}
figure.snip0016 figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 100%;
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016 h2,
figure.snip0016 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip0016 h2 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(30%, 0%, 0);
  transform: translate3d(30%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0016 h2 span {
  font-weight: 800;
}
figure.snip0016 p {
  font-weight: 200;
  -webkit-transform: translate3d(0%, 30%, 0);
  transform: translate3d(0%, 30%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0016 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0016:hover img {
  opacity: 0.3;
}
figure.snip0016:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
figure.snip0016:hover figcaption p {
  opacity: 0.9;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  left: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}



.fdr {
    padding: 20px;
}

#trui {
  

    font-size: 16px;
}



.rez {
    font-family: "Roboto";
}
    
    

.oui {
    color: aqua;
}









.ret {
    text-align: center;
}

.lili {
       font-family: 'Roboto';
    font-size: 84px;
  
  color: darkslateblue;
  font-size: 12px;
 
}



.wxy {
    background-color: darkcyan;
}

.restorationn {
    
}