/* 
Theme Name: Art Com Bureautique
Theme URI: https://artcombureautique.fr/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Art Com Bureautique
Author URI: https://artcombureautique.fr/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* exemple animation titre 1 */

.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 190px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}


/* exemple animation titre 2 */

.title-word {
	animation: color-animation 4s linear infinite;
  }
  
  .title-word-1 {
	--color-1: #DF8453;
	--color-2: #3D8DAE;
	--color-3: #E4A9A8;
  }
  
  .title-word-2 {
	--color-1: #DBAD4A;
	--color-2: #ACCFCB;
	--color-3: #17494D;
  }
  
  .title-word-3 {
	--color-1: #ACCFCB;
	--color-2: #E4A9A8;
	--color-3: #ACCFCB;
  }
  
  .title-word-4 {
	--color-1: #3D8DAE;
	--color-2: #DF8453;
	--color-3: #E4A9A8;
  }
  
  @keyframes color-animation {
	0%    {color: var(--color-1)}
	32%   {color: var(--color-1)}
	33%   {color: var(--color-2)}
	65%   {color: var(--color-2)}
	66%   {color: var(--color-3)}
	99%   {color: var(--color-3)}
	100%  {color: var(--color-1)}
  }
  
  /* Here are just some visual styles. 🖌 */
  
  .container {
	display: grid;
	place-items: center;  
	text-align: center;
  }
  
  .mon-titre {
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 8.5vw;
	text-transform: uppercase;
  }


/* exemple animation titre 3 */



  @import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.waviy {
  position: relative;
  -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0,0,0,.2));
  font-size: 60px;
}
.waviy span {
  position: relative;
  display: inline-block;
  color: #000000;
  text-transform: uppercase;
  animation: waviy 1s infinite;
  animation-delay: calc(.1s * var(--i));
  
}
@keyframes waviy {
  0%,24%,100% {
    transform: translateY(0)
  }
  20% {
    transform: translateY(-20px)
  }
}


/* exemple animation titre 4 */

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Poppins", sans-serif;
}



.nouveau-titre {
	position: relative;
}

.nouveau-titre h2 {
	color: #000000;
	font-size: 8em;
	position: absolute;
	transform: translate(-50%, -50%);
}

.nouveau-titre h2:nth-child(1) {
	color: transparent;
	-webkit-text-stroke: 2px #03a9f4;
}

.nouveau-titre h2:nth-child(2) {
	color: #03a9f4;
	animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
	0%,
	100% {
		clip-path: polygon(
			0% 45%,
			16% 44%,
			33% 50%,
			54% 60%,
			70% 61%,
			84% 59%,
			100% 52%,
			100% 100%,
			0% 100%
		);
	}

	50% {
		clip-path: polygon(
			0% 60%,
			15% 65%,
			34% 66%,
			51% 62%,
			67% 50%,
			84% 45%,
			100% 46%,
			100% 100%,
			0% 100%
		);
	}
}

/* exemple animation titre 5 */

@import url(https://fonts.googleapis.com/css?family=Montserrat);

svg {
    display: block;
    font: 10.5em 'Montserrat';
    width: 960px;
    height: 300px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #4D163D;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #840037;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #BD0034;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #BD0034;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

/* exemple animation titre 5 */



  .waviy2 {
	position: relative;
  }
  .waviy2 span {
	position: relative;
	display: inline-block;
	font-size: 40px;
	color: #000000;
	text-transform: uppercase;
	animation: flip 2s infinite;
	animation-delay: calc(.2s * var(--i))
  }
  @keyframes flip {
	0%,80% {
	  transform: rotateY(360deg) 
	}
  }


/* exemple animation titre 5 */

  @import url('https://fonts.googleapis.com/css?family=Titan+One');

.container-5 div{display:block;position:absolute; text-align:center;}

.container-5{
	width:390px;
	height:320px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
	}

h1{
	background:#fff;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:flex;
	font-family:'Titan One',cursive;
	font-size:90px;
	font-weight:700;
	flex-flow:row wrap;
	align-content:center;
	justify-content:center
	}

h1 span{width:100%;position:relative}

h1 span:before{
	background:linear-gradient(45deg,#fc5c7d,#6a82fb,#fc5c7d);
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	content:"";
	mix-blend-mode:screen
	}

[class*="blobs"]
	{mix-blend-mode:color;animation:blobs 15s ease-in-out infinite alternate}

.blobs_1{
	background:#ff1493;
	width:60px;
	height:60px;
	top:90px;
	left:210px
	}

.blobs_2{
	background:#ff4500;
	width:80px;
	height:80px;
	top:155px;
	left:230px
	}

.blobs_3{
	background:#00ff00;
	width:60px;
	height:60px;
	top:145px;
	left:20px
	}

.blobs_4{
	background:#ff0000;
	width:100px;
	height:100px;
	top:115px;
	left:100px
	}

.blobs_5{
	background:#ffff00;
	width:50px;
	height:50px;
	top:55px;
	left:70px
	}

.blobs_6{
	background:#00ffff;
	width:60px;
	height:60px;
	top:220px;
	left:55px
	}

.blobs_7{
	background:#ff8c00;
	width:50px;
	height:50px;
	top:210px;
	left:180px
	}
.blobs_8{
		background:#ffff00;
		width:50px;
		height:50px;
		top:75px;
		left:300px
		}

@keyframes blobs{
	0%{border-radius:26% 74% 61% 39% / 54% 67% 33% 46%}
	10%{border-radius:74% 26% 47% 53% / 68% 46% 54% 32%}
	20%{border-radius:48% 52% 30% 70% / 27% 37% 63% 73%}
	30%{border-radius:73% 27% 57% 43% / 28% 67% 33% 72%}
	40%{border-radius:63% 37% 56% 44% / 25% 28% 72% 75%}
	50%{border-radius:39% 61% 70% 30% / 61% 29% 71% 39%}
	60%{border-radius:27% 73% 29% 71% / 73% 51% 49% 27%}
	70%{border-radius:39% 61% 65% 35% / 74% 65% 35% 26%}
	80%{border-radius:55% 45% 37% 63% / 38% 30% 70% 62%}
	90%{border-radius:25% 75% 70% 30% / 39% 50% 50% 61%}
	100%{border-radius:66% 34% 33% 67% / 65% 73% 27% 35%}
	}