/*
Theme Name: Colibri WP Child 02
Theme URI: https://colibriwp.com/go/colibri-theme/
Template: colibri-wp
Author: Extend Themes
Author URI: https://colibriwp.com/
Description: Colibri is a beautiful, extremely customizable, multipurpose theme that you can use to create an amazing website by drag and drop. It comes with a predesigned home page, 5 header designs and over 35 ready to use content blocks that you can easily customize. You can also design your own custom blocks by combining over 25 drag and drop components. Colibri has lots of customization options (video background, slideshow background, header content types, etc) that will help you create a website that stands out in no time. It is also responsive so it works on mobile devices out of the box. Colibri is the only theme you will ever need! CHECK OUT THE DEMOS: https://colibriwp.com/go/demos
Tags: entertainment,food-and-drink,portfolio,one-column,two-columns,right-sidebar,grid-layout,custom-header,custom-menu,custom-logo,full-width-template,theme-options,translation-ready,featured-images,threaded-comments
Version: 1.0.87.1647427995
Updated: 2022-03-16 11:53:15

*/


------------------ /* Animation bannière produits */ --------------------------

#write {
	width : 200px;
	height : 200px;
}

#write::after {
    
          content: "";

        animation: textBanniere 6s linear forwards;
      }

      @keyframes textBanniere {
        0%{content: "";}
        1%{content: "L";}
        2%{content: "La";}
      
        4%{content: "La ";}
      
        6%{content: "La f";}
       
        8%{content: "La fa";}
      
        10%{content: "La fab";}
       
        12%{content: "La fabr";}
     
        14%{content: "La fabri";}
      
        16%{content: "La fabriqu";}
       
        18%{content: "La fabrique";}
     
        20%{content: "La fabrique ";}
      
        22%{content: "La fabrique d";}
       
        24%{content: "La fabrique du";}
      
        26%{content: "La fabrique du ";}
       
        28%{content: "La fabrique du s";}
     
        30%{content: "La fabrique du si";}
      
        32%{content: "La fabrique du siè";}
     
        34%{content: "La fabrique du sièg";}
     
        36%{content: "La fabrique du siège";}
      
        38%{content: "La fabrique du siège";}
   
        47%{content: "La fabrique du siège";}
     
        
        100%{content: "La fabrique du siège";}
      }

#clignotement::after{
    content: "|";
        animation: clignotement 1s none infinite;
}

@keyframes clignotement {
  0%   { opacity:1; }
  40%   {opacity:0; }
  100% { opacity:1; }
}

------------------ /* Animation bandeau page d'accueil */ --------------------------
body{
overflow-x: hidden;
}

#image_roue{
    width: 180px;
    transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
	
}

.rotation{
animation: turn 6s ease-in-out forwards;
}


@keyframes turn {
  
    50%{
        transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
        width: 180px;
    }
    100%{
        transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
        width: 120px;
		margin-top: 20px;
    }
}

#section_anime{
    position: relative;
     display: block;
    margin-top: 70px;
     height: 200px;
}

#text_solace{
    font-family: "Nova Square";
    display: flex;
    font-size: 68px;
    margin-top: 20px;
    margin-left: 95px;
    color: #0071bc;
  
}

#bandeau_fixe{
    background: white;
    margin-top: 0px;
    text-align: left;
    width: 100%;
    position: absolute;
}

.translation{
    animation: roue 6s ease-in-out forwards;
}



@keyframes roue{

    0%{
    transform: translate(0px,0px);
-webkit-transform: translate(0px,0px);
-moz-transform: translate(0px,0px);
}
	50%{
        transform: translate(88%,0px);
-webkit-transform: translate(88%,0px);
-moz-transform: translate(88%,0px);
margin-top: 0px;
    }
    100%{
        transform: translate(88%,0px);
-webkit-transform: translate(88%,0px);
-moz-transform: translate(88%,0px);
    }
}

#text{
    content: "";
	position: absolute;
    background: #0071bc;
	margin-top: 50px;
    height: 1px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
}

.anim_text{
    animation: hrAnim 3s ease-in-out 3s forwards;
}

@keyframes hrAnim{
    100% {
        transform: translateX(-50%) scaleX(0.6);
    }
}
--------/* hr de séparation blocks  */-------
#hr{
	content: "";
    background: #ffffff;
    height: 2px;
    width: 60%;
    left: 50%;
	display: flex;
	position: absolute;
	transform: translateX(-50%);
}
#hrLeft{
	content: "";
    background: #ffffff;
    height: 2px;
    width: 100%;
    left: 40%;
	display: flex;
	position: absolute;
	transform: translateX(-60%);
}

#hrRight{
	content: "";
    background: #ffffff;
    height: 2px;
    width: 100%;
    left: 70%;
	display: flex;
	position: absolute;
	transform: translateX(-60%);
}

------/* style bouton echantillon */-------
.contain_bouton{
    text-align: center;
	justify-content: center;
	
    
}
.small_bouton{
	width: 50%;
    background: white;
    border: solid 1px #0071bd;
	color: #0071bd;
    border-radius: 15px;
    padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 10px;
	padding-right: 10px;
    text-align: center;

    text-decoration: none;
	font-size: 18px;

}
.small_bouton:hover{
	background: #0071bd;
    color: white;
}

#bouton{
    width: 100%;
    background: white;
    border: solid 1px #0071bd;
	color: #0071bd;
    border-radius: 20px;
    display: flex;
    padding: 6px;
    text-align: center;
    justify-content: center;
    text-decoration: none;
	font-size: 20px;
	margin-top: 50px;

}
#bouton:hover{
    background: #0071bd;
    color: white;
}

----------/* Animation mosaïque accueil */----------
#section1{
	position: relative;
	left: 120%;
}
    .left{
        animation: left 0.5s ease-out forwards;
    }

    @keyframes left{
        100%{
            left : 0%;
			
        }
    }



----------/* Animation mosaïque accueil */----------

.footer>a{
    color: white !important;
    font-size: 1em;
    text-decoration: none;
    transition: 0.5s;
}

.footer>a:hover{
    color: rgb(205, 229, 255);
}

----------/* Responsive */----------
@media screen and (max-width: 768px){
    #section1 #section2 #section3 #section4 #section5{
        left: 0;
    }
	#text_solace{
		font-size: 40px;
	}
    
}