html{
overflow-x: hidden;

}

body{
font-family: "Open Sans", Roboto, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue";

color:#171949;
word-spacing: 0.5em;
overflow-x: hidden;
background:#ccc url(../images/fond.png) top left no-repeat ;
background-attachment: fixed;

}

#menu{

 
  
 opacity: 0;animation-name:slideone;animation-duration:3s;  animation-fill-mode: forwards;
}
 
 nav .nav-brand{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



.navbar .navbar-nav .nav-item .nav-link {

  font-size: 100%;
  text-transform: capitalize;
  font-family: sans-serif;
  color:#fff;
  font-family:arial;
  font-weight: bold;
}

.navbar .navbar-nav .nav-item .nav-link h2:hover {

 /**border-bottom:2px solid #ffc107;**/

    animation-name: mynav;
  animation-duration:2s;
  animation-fill-mode: forwards;
  color:#fff ;
 

  }


a{
    color:black;
    animation-duration: 3s;
}
a:hover{
   
   text-decoration: none;
    color:#000;
}
header{
color:#fff;
  
}


#textappel{opacity: 0;
     animation-name:slideone;
    animation-delay: 1s;
  animation-duration:3s;
  animation-fill-mode: forwards;
   }



#childrenoffer li a:hover{
  background-color: #ddd;

}

h1{
    
    
    font-size: 450%;
   
    line-height: 100%;
   color:#000;
    font-family: arial;
    text-transform :text-capitalize;
   
   
  }
 
 .castillo{
  font-family: century Gothic;
 }  
#grandimg{
opacity: 0;
     animation-name:slidefour;
    animation-delay: 1.5s;
  animation-duration:3s;
  animation-fill-mode: forwards;


}
#baniere{
background:none;

}
 h6{
  text-transform: uppercase;
}
h2{
 text-align: center;
   text-transform: uppercase;
   font-family: verdana;
  font-size: 90%;


}

.menu h2{
   text-align: center;
   text-transform: uppercase;
   font-family: verdana;
  font-size: 90%;
   }
h3{
    text-transform: uppercase;
    font-size: 90%;
    
}
h4{
    text-transform: uppercase;
}

ul li{
   list-style: none;
   font-family: Georgia, 'Times New Roman', Times, serif;
}
 



.input-search{
border-radius:30px;
width: 60%;
}


.fond-jaune{
  background:#ffc107 url(../images/fond-jaune.png) repeat-x;
 box-shadow: rgb(5,5,0,0.1) 2px 8px 10px 1px;
}
#a{
 opacity: 0;
}
#a.active{
animation-name:slideone;
animation-duration:1.5s;
animation-timing-function: cubic-bezier();
animation-fill-mode: forwards;
}



#nous-choisir{
 opacity: 0;
}
#nous-choisir.active{
animation-name:slideone;
animation-duration:1.5s;
animation-timing-function: cubic-bezier();
animation-fill-mode: forwards;
}
.fond-grenat{
  background-color: #7f0d17;
}
.color-grenat{
  color: #7f0d17;
}
#titreatouts{

  opacity: 0;
}

#titreatouts.active{
   animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

#nosatouts1{

opacity: 0;
}

#nosatouts1.active{
   animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

#nosatouts2{

opacity: 0;
}

#nosatouts2.active{
   animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

#nosatouts3{

opacity: 0;
}

#nosatouts3.active{
   animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}


#nosatouts4{

opacity: 0;
}

#nosatouts4.active{
   animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}
#nosavantages{

  opacity: 0;


}
#nosavantages.active{
    animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}
#freelancemada{

 opacity: 0;
}


#freelancemada.active{
  animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}


#nosoffres{
   opacity: 0;
}

#nosoffres.active{
  animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}


#graphisme{
  opacity: 0;
}

  #graphisme.active{
  animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

#seo{
  opacity: 0;
}

  #seo.active{
  animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}


#refonte{
  opacity: 0;
}

  #refonte.active{
  animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

#integrateurweb{
  opacity: 0;
}

  #integrateurweb.active{
  animation-name:slidefour;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

#webdesign{
  opacity: 0;
}

  #webdesign.active{
  animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}



#redacteur{
  opacity: 0;
}

  #redacteur.active{
  animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}


#myfooter{
   opacity: 0;
    background-color:#000;
    padding-top: 20px;
    color:#fff;
    border-top: #7f0d17 20px solid;
}
#myfooter.active{
  animation-name:slideone;
  animation-duration:1.5s;
animation-timing-function: cubic-bezier();
    animation-fill-mode: forwards;
}

footer ul li{
  list-style:none;
}





@keyframes carousel{
 0%{opacity:0;transform: translateY(-5px);}
  100%{  opacity:1;}
   /**100%{  opacity:1;}*/
 
}

@keyframes slidetwo{
 0%{opacity:0;transform: translateX(-200px);}
  100%{  opacity:1;}
   /**100%{  opacity:1;}*/
 
}
@keyframes slidethree{
 0%{opacity:0;transform: translateX(200px);}
  100%{  opacity:1;}
   /**100%{  opacity:1;}*/
 
}



 
















@keyframes slideone{
 0%{opacity:0;transform: translateY(-30px);}
  100%{  opacity:1;}
   /**100%{  opacity:1;}*/
 
}
@keyframes slidefour{
 0%{opacity:0;transform: translateY(30px);}
  100%{  opacity:1;}
   /**100%{  opacity:1;}*/
 
}

















  









#myrandom .carousel-item 
{


 
  transform: translateX(-25%);
 }

.shadow{
box-shadow: rgb(5,5,0,0.5) 2px 8px 30px 1px;

}
.shadow2{
box-shadow: rgb(5,5,0,0.1) 10px 8px 10px 1px;

}
.shadow3{
box-shadow: rgb(5,5,0,0.1) 30px 8px 10px 1px;

}
.radius{
border-radius: 50px;

}
 
 .incline{
transform: rotate(-0.010turn);

 }
.incline2{
transform: rotate(-0.02turn);

 }
 .incline3{
transform: rotate(0.03turn);


 }
/**#myrandom .carousel-item{
  transition: transform 500ms ease-in-out left;
    transition:  transform 500ms ease-in-out all;
    backface-visibility: visible;
    transform: none!important;

  }**/
#social-media{
position: fixed;

top:35rem;
z-index:999999;
  
  }
#social-media ul li a{
border-radius:5px;


 

} 
 
  



@keyframes slowpreloader{
 from{opacity:1;}
  to{ opacity:0;}
  
 
}
  #preloader {
animation-name: slowpreloader;
  animation-duration:6s;
animation-timing-function: ease-in-out;
    animation-fill-mode:forwards;
background-color:#000;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999; }
  #preloader .lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px; }
    #preloader .lds-ellipsis div {
      position: absolute;
      top: 27px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #7f0d17;
      animation-timing-function: cubic-bezier(0, 1, 1, 0); }
      #preloader .lds-ellipsis div:nth-child(1) {
        left: 6px;
        -webkit-animation: lds-ellipsis1 0.6s infinite;
        animation: lds-ellipsis1 0.6s infinite; }
      #preloader .lds-ellipsis div:nth-child(2) {
        left: 6px;
        -webkit-animation: lds-ellipsis2 0.6s infinite;
        animation: lds-ellipsis2 0.6s infinite; }
      #preloader .lds-ellipsis div:nth-child(3) {
        left: 26px;
        -webkit-animation: lds-ellipsis2 0.6s infinite;
        animation: lds-ellipsis2 0.6s infinite; }
      #preloader .lds-ellipsis div:nth-child(4) {
        left: 45px;
        -webkit-animation: lds-ellipsis3 0.6s infinite;
        animation: lds-ellipsis3 0.6s infinite; }

@-webkit-keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes lds-ellipsis1 {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
@-webkit-keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0); } }
@keyframes lds-ellipsis3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(0);
    transform: scale(0); } }
@-webkit-keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(19px, 0);
    transform: translate(19px, 0); } }
@keyframes lds-ellipsis2 {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  100% {
    -webkit-transform: translate(19px, 0);
    transform: translate(19px, 0); } }