@charset "utf-8";

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif, Arial, Helvetica;

  box-sizing: border-box;
}


:root {

    --main-bg-color : #F4F4F4;

	--primary-color1: #ED6D0D;
    --primary-color1-rgb: 237, 109, 13;

    --secondary-color1: #00acac;

    --tertiary-color1: #161E29;
    --tertiary-color1-rgb: 22, 30, 41;

    --scroll-bar-color: #ED6D0D;
    --scroll-bar-color-hover: #ce5c06;
    --scroll-bar-bg-color: #fdb278;


    --component-color: #ED6D0D; /*316efc 3D8DF5*/
	--component-color-rgb: 237, 109, 13;
	--component-color-light: rgb(var(--component-color-rgb), 0.05);
	--component-color-light2: rgb(var(--component-color-rgb), 0.1);
	--component-color-light3: rgb(var(--component-color-rgb), 0.2);
	--component-color-light4: rgb(var(--component-color-rgb), 0.9);
	--component-color2: #bcd0ff; /*hover color*/
	--component-color-text: #ED6D0D;
	--component-color3: #CCC; /*input border color - dcdddf*/

    --text-form-indicator: #FF003B;
    
}

body{
    /*background: var(--main-bg-color);*/
    -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--scroll-bar-color) var(--scroll-bar-bg-color); }

::-scrollbar { width: 10px;  }

::-webkit-scrollbar {
	width: 7px;
}

::-webkit-scrollbar-track {
	box-shadow: inset 0 0 2px var(--scroll-bar-bg-color); 
	/*background: #FFF;*/
	border-radius: 0 0 10px 10px;
}

::-webkit-scrollbar-thumb {
	background: var(--scroll-bar-color); 
	border-radius: 0 0 10px 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scroll-bar-color-hover); 
}



/*Bloc*/
.justify-content { display: flex; align-items: center; justify-content: center; text-align: center; }
.justify-content-left { display: flex; align-items: center; justify-content: left; text-align: left; }



/*Nav*/
/*-----------------------------------------------------*/

#navigation {
	width: 100%; height: 80px; position: fixed; z-index:102;
	background-color: rgba(255,255,255,0);
    display: flex; align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
    background-color: rgba(255,255,255,0);
	color: #555; transition: 0.35s; overflow: hidden;
}
#navigation.active { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); }
#navigation.open {
    width: 100%; height: 250px; padding-bottom: 10px;
    background: none;
    background-color: rgba(255,255,255,0.97);
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2);
}

#navigation1 {
	width: 100%; height: 0; position: fixed; z-index:100;
	/*background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);*/
	background-color: rgba(255,255,255,0);
	/*background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 47%, rgba(0,0,0,0) 100%);*/
	transition: 0.4s; overflow: hidden;
}
#navigation1.active {
    height: 80px;
    background-color: rgba(255,255,255,1);
    box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.2);
}

#logo { transition: 0.3s ease all; transform: scale(0) rotate(360deg) translateX(300px); opacity: 0; }
.active #logo  { transform: scale(1) rotate(0deg) translateX(0); opacity: 1; }
.logo-animate { transform: scale(0.92); transition: 0.1s; }


.bar1, .bar2, .bar3 { width: 30px; height: 3px;  background-color: var(--primary-color1); margin: 6px 0; transition: 0.3s; border-radius: 1px; }
.bar1 { width: 20px; -webkit-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px);}
.bar2 { width: 25px; opacity: 1; }
.bar3 {  -webkit-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px); }
.active .bar1, .active .bar2, .active .bar3 { background-color: #FFF;}

.open .bar1 { width: 30px; -webkit-transform: rotate(-45deg) translate(-6px, 7px); transform: rotate(-45deg) translate(-7px, 7px); }
.open .bar2 {opacity: 0; }
.open .bar3 { -webkit-transform: rotate(45deg) translate(-4px, -6px); transform: rotate(45deg) translate(-5px, -5px); }



.navigation-line { width: 90%; height: 2px; margin: 88px 0 0 10%; position: absolute; background-color: rgb(255, 255, 255, 0.9);}
.navigation-line1 { width: 10%; height: 2px; background-color: #e51f3f; animation: colorAnimate 20s infinite; }


.navigation-wrapper { width: 1400px; margin: auto;  }
.navigation-left { width: 20%; float: left; }
.navigation-right { width: 80%; float: left; }

.navigation-menu-icone { 
	position: relative; z-index: 103; float: right; right: 2%; padding: 5px 0; margin: 10px 0 0 0; cursor: pointer; 
}
.nav-linker { 
	margin: 0 40px; float: left; display: flex; align-items: center;
	font-size: var(--text-size-medium); line-height: var(--text-size-medium); font-weight: 700; color: #FFF;   
	transition: 0.2s;
} 
.nav-linker:hover { opacity: 0.8; transition: 0.1s; }

.active .nav-linker { color: #222; margin: 0 20px; } 

.open .nav-linker { width: 100%; color: #222; /*margin: 0 40px;*/ } 


.nav-linker-menu { 
    width: 50px; height: 50px;
	margin: 10px 0 0 0; padding: 8px 9px 12px 11px; float: right;  
    transition: 0.3s ease all;
    display: none;
    cursor: pointer;
}	
.active .nav-linker-menu { 
    margin: 5px 0 0 0; 
    transform: rotate(360deg);
    background-color: var(--primary-color1); border-radius: 100px;
    box-shadow: 0 0 30px rgb(0, 0, 0, 0.2);

    outline-style: solid; outline-color: rgb(237, 109, 13, 0.5); outline-width: 3px; 
	animation: animation-content-outline 0.8s ease infinite;
}

.nav-linker-menu2 { 
	margin: 3px 0 0 0; float: left; 
}
/* .nav-linker-menu2.animate { left: -100%; transition: ease-in-out 0.5s; } */

.nav-link-icon { width: 30px; margin: 0 10px 0 0; }


.navigation-search-layer {
	width: 95%; height: 80px; position: fixed; right: 0%; background-color: #FFF; z-index: 103;
	border: solid 2px #DDD; border-top: none; border-bottom: none; display: none;
}
#searchBtclose { margin: 25px 0 0 15px; transform: rotate(0deg) scale(0.8); transition: 0.2s; }
#searchBtclose:hover { transform: rotate(90deg) scale(1); transition: 0.2s; cursor: pointer; }



.nav ul {
	list-style-type: none; float: right;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/*background-color: #333;*/
}

.nav li {
	float: left;
}

.nav li a {
	font-size: 17px; line-height: 19px; color: #111; font-weight: normal;
	padding: 29px 20px 32px 20px; margin: 0px 10px 0 10px;
	display: block;
	text-align: center;
	text-decoration: none; float: left; transition: 0.1s;
}

.nav li a.active {
	color: #FF003B; animation: colormenuAnimate 20s infinite;
}

.secondary,.menu-secondary, .nav li .secondary {
	/*padding: 10px 0 16px 20px; margin: 20px 0 0 0px;*/ margin-left: 15px; padding-top: 20px;
	font-size: 17px; line-height: 19px; color: #FF003B;
}
.menu-secondary { color: #111; }
.secondary:hover {
	color: #FF003B; /*cursor: pointer;*/
}

.nav li a:hover {
	color: #FF003B; cursor: pointer;
}



.app { width: 100%; height: auto; overflow: hidden; }

.cover {
    width: 100%;
    height: 100%;
    background-color: #000000; overflow: hidden;
}
.cover-video { width: 100%; height: 100%; position: absolute; z-index: 1; overflow: hidden;  }
.cover-text { width: 100%; height: 100%; position: absolute; display: flex; align-items: center;  z-index: 3;  }
.cover-layer2 {
    width: 100%; height: 100%; position: absolute; z-index: 2;
    background: linear-gradient(90deg, rgb(0, 67, 94, 0.9) 0%, rgba(22, 30, 41,0.8) 70%);
}

.video_player { width: 100%; }

.cover-line-top {
    width: 100%; height: auto; position: absolute; z-index: 2; top: 0%; margin-top: -2px;
}
.cover-line-bottom {
    width: 100%; height: auto; position: absolute; z-index: 2; bottom: 0%; margin-top: -2px; overflow: hidden;
}
.rotate {
    transform: rotateX(180deg);
}

.cover-split-left  { 
    width: 55%;
    height: auto;
    padding: 0 10%;
    float: left;
}
.cover-split-right { 
    width: 45%;
    height: auto;
    float: left;
    position: relative;
}
.cover-layer {  
    width: 100%;
    height: auto;
    padding: 25px 10%;
    position: absolute;
}
.cover-img-container {
    width: 85%; height: auto; margin-left: 15%; margin-bottom: 20px; position: relative;
    display: flex; align-items: center; 
}
.cover-img-container.bottom { display: flex; align-items: flex-end;  }

.logo-cover { width: 40%; margin: 40px 0; }

.section {
    width: 100%;
    height: auto;
    float: left;
    position: relative;
    padding: 20px 0 40px 0;
    
}
.section.bg-grey { background-color: #F9F9F9;}

.tline { width: 20px; height: 3px; border-radius: 10px; background-color: var(--primary-color1); }



.cover-function {
    width: 100%;
    height: auto;
    padding: 50px 0 110px 0;
    position: relative;
    float: left;
    background-color: #000000;
    display: flex; align-items: flex-end; justify-content: center;
}
.cover-function-mobile { width: 100%; height: 300px; display: none; }

.cover-function-st1 {
    width: 40%; float: left;
    padding: 0 0 0 5%;
}
.cover-function-st2 {
    width: 60%; float: left; 
    padding: 0 3%;
}
.cover-function-top1 { margin-top: 100px; }
.cover-function-top2 { margin-top: 60px; }
.cover-function-top3 { margin-top: 80px; }

.icon-grid { 
    width: 100%; display: grid; 
    grid-row-gap: 30px;
    grid-column-gap : 0;
    grid-template-columns: 30% 5% 30% 5% 30%; 
    padding: 0 0;
}
.icon-grid2 { 
    width: 100%; display: grid; 
    grid-row-gap: 30px;
    grid-column-gap : 0;
    grid-template-columns: auto auto auto auto; 
    padding: 0 0;
}


.item1 {
    grid-column: 2 / 4; transform: translateY(120px);
}
.item2 {
    grid-column: 1 / 1; transform: translateX(40px) translateY(-30px); transition: 0.2s ease all;
}
.item3 {
    grid-column: 4 / 4; transform: translateX(-40px) translateY(-30px); transition: 0.2s ease all;
}
.item4 { transform: translateX(40px) translateY(50px); transition: 0.2s ease all; }
.item5 { transform: translateX(-40px) translateY(50px); transition: 0.2s ease all; }
.item1 .icon-bg, .big { width: 230px; height: 230px; }


.icon-bg.big { transform: scale(1.8); margin-left: 20px; }
.icon-set.big .text { margin-top: 70px; margin-left: 20px; }

.item1:hover ~ .item2,
.item1:hover ~ .item3,
.item1:hover ~ .item4,
.item1:hover ~ .item5
{ transform: translateX(0) translateY(0); }

.icon-set { 
   width: auto; margin: 0 20px; text-align: center;
   
}
.icon-set:hover > .icon-bg, .icon-bg.active { 
    background-color: #FFF;
    background: linear-gradient(90deg, #FFF, #fac59d , #FFF);
    background-size: 400% 400%;
    
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;

    transform: translateY(-10px) scale(1.2);
} 
.icon-set > .icon-bg .icon { color: #000000; opacity: 0.5; }
.icon-set:hover > .icon-bg .icon, .icon-bg .icon.active {
    color: #ff6600; opacity: 0.9;

    transform: rotate(360deg); transition: 0.5s ease all;

    -webkit-animation: MoveVertical 1s ease infinite;
    -moz-animation: MoveVertical 1s ease infinite;
    animation: MoveVertical 1s ease infinite; animation-delay: 0.45s;
}


.icon-set .text { 
    margin: 10px 0; padding: 0 10%;
    font-size: var(--text-size-big); line-height: calc(var(--text-size-big) + 2px); font-weight: 500; color: #FFF;
    transition: 0.2s ease all;
}
.icon-set .text2 { padding: 0 10%; font-size: var(--text-size-small); line-height: calc(var(--text-size-small) + 2px); color: rgb(255, 255, 255, 0.8); }

.icon-set:hover .text, .text.active { font-weight: 700; transform: scale(1.2); } 

.icon-bg { 
    width: 130px; height: 130px; padding: 0 0; margin: 0 auto 20px auto;
    display: flex; align-items: center; justify-content: center;
    color: #FFF;
    background-color: var(--primary-color1); border-radius: 200px;
    transition: 0.15s ease all;
}


.icon-set-link { 
    width: 100%; height: 10px; margin-top: 60px;
    background-color: var(--primary-color1); border-radius: 20px;
}



/**/
.tarif-grid { 
    width: 100%; display: grid; 
    grid-row-gap: 5px;
    grid-column-gap : 0;
    grid-template-columns: 33.33% 33.33% 33.33%; 
}

.tarif-grid .column {
    width: 100%; padding: 0 0 20px 0;
    background-color: #FFF;
    border: 3px solid transparent;
}
.tarif-grid .column.bs { 
    box-shadow: 0 0 30px rgb(0, 0, 0, 0.1);
    border: 3px solid #DDD;
}
.tarif-grid .column.border-color { 
    border: 3px solid var(--primary-color1);
    border-radius: 25px;
    overflow: hidden;
    outline-style: solid; outline-color: rgb(237, 109, 13, 0.4); outline-width: 5px; 
}

.tarif-grid .column.border-color:hover { 
    animation: animation-content-outline 0.7s ease infinite;
}

.tarif-grid .column.nor-border { border-right: none; }

.tarif-grid .column.box-shadow {  
    box-shadow: 0 0 30px rgba(var(--primary-color1-rgb), 0.2);
}

.tarif-grid .column.rl { border-radius: 0 0 0 0; }
.tarif-grid .column.rr { border-radius: 0 0 0 0; }

.tarif-grid .header.color {
    color: #FFF;
    background-color: var(--primary-color1);
    background: linear-gradient(90deg, var(--primary-color1), rgb(197, 85, 0) , var(--primary-color1));
    background-size: 400% 400%;
    
    -webkit-animation: AnimationName 3s ease infinite;
    -moz-animation: AnimationName 3s ease infinite;
    animation: AnimationName 3s ease infinite;
}

/* .tarif-grid .column.color:hover { } */
.tarif-grid .column .area { padding: 0 0 20px 0; }

.tarif-grid .column .area-color { padding: 40px 20px; text-align: center; }


.ic-visibility { visibility: hidden; }


.tarif-grid .column .area.b { font-weight: 700; }
.tarif-grid .row2 {
    width: 100%; height: 50px; padding: 10px 10% 10px 10%; 
    display: flex; align-items: center; 
    border-bottom: 2px solid #DDD;
}
.tarif-grid .row2.border-left { border-left: 2px solid #DDD;}
.tarif-grid .row2.border-top { border-top: 2px solid #DDD; }

.tarif-grid .row2 .ok,
.tarif-grid .row2 .no {
    margin-top: -10px;
    color: #32d800;
    transform: scale(0.8) translateY(6px);
}
.tarif-grid .row2 .no {
    color: #ff0000;
}
.tarif-grid .color .row2 { 
    color: #FFF; font-weight: 700;
}

.tarif-grid .area .row2.over { text-align: center; justify-content: center;  }
.tarif-grid .area .row2.over span {
    display: none; transition: 0.2s ease all;
    color: var(--text-color-grey);
}
.tarif-grid .area:hover > .row2.over span {
    display: block;
} 
.tarif-grid .row2.over span.line {
    text-decoration: line-through;
}


.tarif-grid .header,
.tarif-grid .header-demo {
    width: 100%; height: auto;
    padding: 20px 10% 10px 10%;
    margin-bottom: 0;
    background-color: var(--primary-color1);
    /*border-radius: 25px 25px 0 0;*/
}
.tarif-grid .header-demo {
    background-color: #FFF; border-radius: 30px;
}



/*Card testimonial*/
.card-testimonial {
    width: 100%; height: auto; margin: 20px 0; padding: 30px 3% 20px 3%;
    background-color: #F8F8F8; border-radius: 30px; border: 2px dashed #DDD;
    box-shadow: 0 0 40px rgb(0, 0, 0, 0.1);
    transition: 0.2s ease all;
}
.card-testimonial:hover {
    background-color: #FFFFFF; 
    transform: translateX(20px);
    box-shadow: 0 0 60px rgb(0, 0, 0, 0.15);
}

.card-testimonial.left { width: 70%; }
.card-testimonial.right { width: 70%; margin-left: 30%; }

.card-testimonial .img { width: 70px;  margin-right: 20px; border-radius: 100px; overflow: hidden; }
.card-testimonial .icon { 
    width: 50px; height: 50px;
    float: left;
    margin-right: 20px;
    opacity: 0.5;
}


/*Faq*/
.card-line4 { 
    width: 100%; padding: 13px 0; margin: 0 0; cursor: pointer; float: left;
    border-bottom: 2px solid #DDD;  /*border-left: none; border-right: none;*/ 
}
/* .card-line4 > .text {  } */

.card-line4-area { width: 94%; float: left;  }


.section-open { 
    width: 99%; padding: 15px 1% 18px 0; margin-top: -2px; transition: 0.2s ease all;
    color: var(--text-color-mediumblack); font-weight: 600;
}
.section-open.active {
    color: var(--text-primary-color1); font-weight: 700;
}
.section-open .icon { 
    transform: rotate(0deg); transition: 0.2s ease all; 
}
.section-open.active .icon { transform: rotate(90deg); color: var(--text-primary-color1); }

.section-open-area { 
    height: auto; overflow: hidden; opacity: 0; transition: 0.2s ease all;
}
.section-open-area.active { 
    height: auto; padding: 20px 0; margin-bottom: 10px; opacity: 1;
    color: var(--text-color-lightblack);
}

hr {  margin: 0 5% 30px 5%; border-bottom: 1px solid #CCC ; opacity: 0.3; }




.section-home { 
    width: 100%; min-height: 100px; padding: 40px 10% 30px 10%; margin-top: 50px; float: left; position: relative;
    background-color: var(--tertiary-color1); 
    color: var(--text-color-white);
}
.section-home-inner {
    width: 100%; float: left; position: relative; z-index: 2; 
    /*display: flex; align-items: center; */
}
.section-home-text { width: auto; height: auto; position: absolute; right: 0; top: -120px; }
.section-home-text .img { width: 100%; }



/*Footer*/
.icon-footer { width: 35px; height: 35px; margin: 0 3px; opacity: 0.85; }
.icon-footer2 { width: 140px; }

.footer-logo { width: 30%; margin-top: 50px;  }

.footer-line { width: 100%; height: 2px; margin: 30px 0 0px 0; background-color: rgb(255, 255, 255, 0.3); display: none; }



/*#00acac*/
/*Button*/
.button {  
    width: 240px; height: 52px; padding: 0 10px; border: none; position: relative; overflow: hidden;
    font-size: var(--text-size-medium);  color: #FFF; font-weight: bold; text-align: center;
    background-color: var(--secondary-color1); border-radius: 30px;
}
.button .text { margin-top: -1px; z-index: 2; position: relative; transition: 0.1s ease all; }
.button:hover .text { transform: translateY(-1px) scale(1.03); }
.button:hover { 
    color: var(--text-color-white); text-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2); cursor: pointer;
    background-color: var(--text-primary-color);
    animation: AnimatedButtonShadow2 2s linear infinite;
}
.button .effect { 
    width: 400px; height: 70px; position: absolute; margin: -17px 0 0 100%;
    background: linear-gradient( 135deg,
        rgb(233, 237, 13, 0) 0%,
		#00acac 37%,
		#009797 50%,
		#011e53 100%
	);
    transition: 0.2s ease all;
}
.button:hover .effect {
    margin: -17px 0 0 -15px; animation: AnimatedButton 3s ease infinite;
}


.button2 {  
    width: 240px; height: 52px; padding: 0 10px; border: none; position: relative; overflow: hidden;
    font-size: var(--text-size-medium);  color: #FFF; font-weight: bold; text-align: center;
    background-color: #000000; border-radius: 30px;
}
.button2 .text { margin-top: -1px; z-index: 2; position: relative; transition: 0.1s ease all; }
.button2:hover .text { transform: translateY(-1px) scale(1.03); }
.button2:hover { 
    color: var(--text-color-white); text-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2); cursor: pointer;
    background-color: var(--text-primary-color);
    animation: AnimatedButtonShadow2 2s linear infinite;
}
.button2 .effect { 
    width: 400px; height: 70px; position: absolute; margin: -17px 0 0 100%;
    background: linear-gradient( 135deg,
        rgb(233, 237, 13, 0) 0%,
		var(--primary-color1) 37%,
		var(--primary-color1) 50%,
		var(--primary-color1) 100%
	);
    transition: 0.2s ease all;
}
.button2:hover .effect {
    margin: -17px 0 0 -15px; animation: AnimatedButton 3s ease infinite;
}



.button3 {  
    width: 260px; height: 62px; padding: 0 10px; border: none; position: relative; overflow: hidden;
    font-size: var(--text-size-big); line-height: calc(var(--text-size-big) + 5px); color: #FFF; font-weight: bold; text-align: center;
    background-color: var(--primary-color1); border-radius: 30px;
}
.button3 .text { margin-top: -1px; z-index: 2; position: relative; transition: 0.1s ease all; }
.button3:hover .text { transform: translateY(-1px) scale(1.03); }
.button3:hover { 
    color: var(--text-color-white); text-shadow: 0px 0px 5px rgb(0, 0, 0, 0.2); cursor: pointer;
    background-color: var(--text-primary-color);
    animation: AnimatedButtonShadow2 2s linear infinite;
}
.button3 .effect { 
    width: 400px; height: 80px; position: absolute; margin: -17px 0 0 100%;
    background: linear-gradient( 135deg,
        rgb(233, 237, 13, 0) 0%,
		#00acac 37%,
		#009797 50%,
		#011e53 100%
	);
    transition: 0.2s ease all;
}
.button3:hover .effect {
    margin: -17px 0 0 -15px; animation: AnimatedButton 3s ease infinite;
}



.tcontent {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    transition: 0.2s ease all;
}
  
  .tslider-wrapper { 
    font-size: var(--text-size-extralarge); line-height: var(--text-size-extralarge);
    color: #aaa;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: left;
    /* justify-content: center; */
  }
  .tslider-wrapper.medium { 
    font-size: var(--text-size-extralarge2); line-height: var(--text-size-extralarge2);
  }
  
  .tslider {
    height: 50px; padding-top: 10px;
    overflow: hidden;
  }
  
  .tslider div {
    color: #fff;
    height: 50px;
    margin-bottom: 50px; 
    padding: 0 0;
    text-align: left;
    box-sizing: border-box;
  }
  .tslider div.black {
    color: var(--text-primary-color1);
  }
  
  .tslider-text1 {
    /* background: lightgreen; */
    animation: slide 7.5s linear infinite;
  }
  .tslider-text2 {
    /* background: skyblue; */
    opacity: 1;
  }
  .tslider-text3, .tslider-text4, .tslider-text5 {
    /* background: lightcoral; */
    opacity: 1;
  }

  @keyframes slide {
    0% {margin-top: -500px;}
  
    5% {margin-top: -400px;}
    20% {margin-top: -400px;}
  
    25% {margin-top: -300px;}
    40% {margin-top: -300px;}
  
    45% {margin-top: -200px;}
    60% {margin-top: -200px;}
  
    65% {margin-top: -100px;}
    80% {margin-top: -100px;}
    
    85% {margin-top: 0;}
    100% {margin-top: 0;}
  }


@keyframes AnimationName {
    0% { background-position:0% 50%; }
    50% { background-position:100% 50%; }
    100% { background-position:0% 50%;  }
}
@keyframes Rotation {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
@keyframes MoveVertical {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    10% { transform: translateY(0); }
}

@keyframes AnimatedButton {
    0% { transform: scale(1); }
    50% { transform: translateX(-50%) scale(3); }
    100% { transform: scale(1); }
}
@keyframes AnimatedButtonShadow1 {
    0% { box-shadow: 10px 1px 10px rgba(250, 3, 3, 0.3); }
    25% { box-shadow: 1px 10px 30px rgba(250, 3, 3, 0.6); }
    50% { box-shadow: -10px 1px 30px rgba(250, 3, 3, 0.6); }
    75% { box-shadow: 1px -10px 30px rgba(250, 3, 3, 0.6); }
    100% { box-shadow: 10px 1px 10px rgba(250, 3, 3, 0.3); }
}
@keyframes AnimatedButtonShadow2 {
    0% { box-shadow: 10px 1px 10px rgba(37, 87, 163, 0.3); }
    25% { box-shadow: 1px 10px 30px rgba(37, 87, 163, 0.6); }
    50% { box-shadow: -10px 1px 30px rgba(37, 87, 163, 0.6); }
    75% { box-shadow: 1px -10px 30px rgba(37, 87, 163, 0.6); }
    100% { box-shadow: 10px 1px 10px rgba(37, 87, 163, 0.3); }
}
@keyframes AnimationScale {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes animation-pix-outline {
    0% { outline-width: 3px; }
    50% { outline-width: 15px; }
	100% { outline-width: 3px; }
}
@keyframes animation-content-outline {
    0% { outline-width: 3px; }
    50% { outline-width: 10px; }
	100% { outline-width: 3px; }
}



@media screen and (max-width: 600px) {

    #navigation1 { display: none; }
    .navigation-wrapper { width: 90%; margin: auto;  }
    .navigation-left { width: 20%; }
    .navigation-right { width: 100%; margin-top: -10px; }
    /*.nav-linker-menu2 { display: none; }*/
    #logo { margin-top: 5px; padding: 10px 10px; background-color: #FFF; border-radius: 100px; box-shadow: 0 0 30px rgb(0, 0, 0, 0.2); }

    .nav-linker-menu { display: block; }

    .linker1, .linker2, .linker3, .linker4, .linker5, .linker6, .linker7, .linker8 { 
        opacity: 1; transform: translateY(50px);
        transition: 0.35s ease all;
    }
    .linker2 { transform: translateY(100px); }
    .linker3 { transform: translateY(150px); }
    .linker4 { transform: translateY(200px); }
    .linker5 { transform: translateY(250px); }
    .linker6 { transform: translateY(300px); }
    .linker7 { transform: translateY(350px); }
    .linker8 { transform: translateY(400px); }
    .open .linker1, .open .linker2, .open .linker3, .open .linker4, .open .linker5, .open .linke6, .open .linker7, .open .linker8 { 
        opacity: 1; transform: translateY(0px);
    }
    /**/

    .tarif-grid { 
        grid-row-gap: 5px;
        grid-column-gap : 0;
        grid-template-columns: 100%; 
    }

    .tarif-grid .area .row2.over span {
        color: var(--text-color-mediumblack); font-weight: 700;
        display: block; transition: 0.2s ease all;
    }

    .tarif-grid .column.nor-border { border: 3px solid #DDD;}
    .tarif-grid .row2 { width: 100%; height: auto; }


    .card-testimonial { margin: 20px 0; padding: 30px 10% 20px 10%;
    }
    .card-testimonial.left { width: 90%; }
    .card-testimonial.right { width: 90%; margin-left: 10%; }

    .card-testimonial .img { width: 50px; }
    .card-testimonial .icon { width: 40px;  }
    
    .footer-line { display: block; }


    /**/
    .logo-cover { width: 40%; margin: 40px 0 20px 0; }
    .cover, .cover-text, .cover-video, .cover-layer2 { height: 120%;  }
    .cover-line-bottom { bottom: -20%; }
    .cover-text { display: block; align-items: left;  z-index: 3;  }
    .cover-split-left  { 
        width: 100%;
        padding: 0 10%;
    }
    .cover-split-right { 
        width: 100%; margin-top: 20px;
    }
    .video_player { width: 200%; margin-left: -40%; }

    .cover-function {
        width: 100%;
        padding: 170px 0 30px 0; margin-bottom: 30px;
        display: block; align-items: none; justify-content: center;
    }
    .cover-function-mobile { display: block; }

    .cover-function-st1 {
        width: 100%;
        padding: 0 10%;
    }
    .cover-function-st2 {
        width: 100%; 
        padding: 0 0;
    }
    .cover-function-top1 { margin-top: 35px; }
    .cover-function-top2 { margin-top: 10px; }
    .cover-function-top3 { margin-top: -50px; }

    .icon-set-link { display: none; }

    .icon-grid { 
        width: 100%; display: grid; 
        grid-row-gap: 30px;
        grid-column-gap : 0;
        grid-template-columns: 50% 50%; /*47.5% 5% 47.5%*/
        padding: 0 5%;
    }
    .icon-grid2 { 
        width: 100%; display: grid; 
        grid-row-gap: 30px;
        grid-column-gap : 0;
        grid-template-columns: 50% 50%; 
        padding: 0 5%;
    }

    .item1 {
        grid-column: 1 / 1; transform: translateY(0);
    }
    .item2 {
        grid-column: 1 / 1; transform: translateX(0) translateY(0); 
    }
    .item3 {
        grid-column: 2 / 2; transform: translateX(-0) translateY(0); 
    }
    .item4 { transform: translateX(0) translateY(0);  }
    .item5 { transform: translateX(0) translateY(0);  }

    .icon-bg { width: 110px; height: 110px; }
    .fa-3x { font-size: 2.5em; }
    .fa-4x { font-size: 2.5em; }
    .item1 .icon-bg, .big { width: 130px; height: 130px; transform: translateX(0); }

    .icon-bg.big { transform: scale(1); margin-top: -10px; margin-left: 20px; }
    .icon-set.big .text, .icon-set.big .text2 { margin-top: 0; margin-left: 0; transform: translateX(20px); }

    .tslider div { text-align: center; }
    .tslider-wrapper { margin: auto; }

}


@media screen and (min-width: 600px){

    #navigation1 { display: none; }
    .navigation-wrapper { width: 90%; margin: auto;  }
    .navigation-left { width: 20%; }
    .navigation-right { width: 100%; margin-top: -10px; }
    /*.nav-linker-menu2 { display: none; }*/
    #logo { margin-top: 5px; padding: 10px 10px; background-color: #FFF; border-radius: 100px; box-shadow: 0 0 30px rgb(0, 0, 0, 0.2); }

    .nav-linker-menu { display: block; }

    .linker1, .linker2, .linker3, .linker4, .linker5, .linker6, .linker7, .linker8 { 
        opacity: 1; transform: translateY(50px);
        transition: 0.35s ease all;
    }
    .linker2 { transform: translateY(100px); }
    .linker3 { transform: translateY(150px); }
    .linker4 { transform: translateY(200px); }
    .linker5 { transform: translateY(250px); }
    .linker6 { transform: translateY(300px); }
    .linker7 { transform: translateY(350px); }
    .linker8 { transform: translateY(400px); }
    .open .linker1, .open .linker2, .open .linker3, .open .linker4, .open .linker5, .open .linke6, .open .linker7, .open .linker8 { 
        opacity: 1; transform: translateY(0px);
    }
    /**/


    .cover-function {
        width: 100%;
        padding: 40px 0 50px 0; margin-bottom: 30px;
        display: block; align-items: none; justify-content: center;
    }
    .cover-function-st1 {
        width: 100%; padding: 0 0 0 5%;
    }
    .cover-function-st2 {
        width: 100%; padding: 0 0;
    }
    .cover-function-top1 { margin-top: 40px; }
    .cover-function-top2 { margin-top: 0; }
    .cover-function-top3 { margin-top: -20px; }


    .icon-bg { width: 110px; height: 110px; }
    .fa-3x { font-size: 2.5em; }
    .fa-4x { font-size: 3.5em; }
    .item1 .icon-bg, .big { width: 170px; height: 170px; }
    .icon-bg.big { transform: scale(1.2); margin-left: 20px; }
    .icon-set.big .text, .icon-set.big .text2 { margin-left: 0; transform: translateX(20px); }
    .icon-set.big .text { margin-top: 30px; }

}


@media screen and (min-width: 992px){

    /* .cover-function {
        padding: 20px 0 70px 0;
    } */
    .item1 .icon-bg, .big { width: 200px; height: 200px; }

}


@media screen and (min-width: 1200px){

    #navigation1 { display: block; }
    .navigation-left { width: 15%; }
    .navigation-right { width: 85%; margin-top: 0; }      
    .nav-linker-menu { display: none; }
    #logo { margin-top: 0; padding: 0 0; background-color: transparent; border-radius: 0; box-shadow: none; }

    .navigation-wrapper { width: 1180px; margin: auto;  }

    .linker1, .linker2, .linker3, .linker4, .linker5, .linker6, .linker7, .linker8 {  opacity: 1; transform: translateY(0); }

    .cover-function {
        width: 100%;
        padding: 40px 0 60px 0; margin-bottom: 30px;
        display: block; align-items: none; justify-content: center;
    }
    .cover-function-st1 {
        width: 100%; padding: 0 0 0 5%;
    }
    .cover-function-st2 {
        width: 100%; padding: 0 0;
    }

    .icon-bg { width: 110px; height: 110px; }
    .fa-3x { font-size: 2.5em; }
    .fa-4x { font-size: 3.5em; }
    .item1 .icon-bg, .big { width: 200px; height: 200px; }
    .icon-bg.big { transform: scale(1.2);  margin-left: 40%; }
    .icon-set.big .text,.icon-set.big .text2 { margin-left: 0; transform: translateX(80px); }
    .icon-set.big .text { margin-top: 30px; }



}


@media screen and (min-width: 1600px){

    .navigation-wrapper { width: 1350px; margin: auto;  }

    .cover-function {
        padding: 30px 0 70px 0;
        display: flex; align-items: flex-end; justify-content: center;
    }
    .cover-function-st1 {
        width: 40%; padding: 0 0 0 5%;
    }
    .cover-function-st2 {
        width: 60%; padding: 0 3%;
    }
    .cover-function-top1 { margin-top: 100px; }
    .cover-function-top2 { margin-top: 60px; }
    .cover-function-top3 { margin-top: 80px; }

    .icon-bg { width: 120px; height: 120px; }
    .fa-3x { font-size: 2.8em; }
    .fa-4x { font-size: 3.8em; }
    .item1 .icon-bg, .big { width: 210px; height: 210px; }
    .icon-bg.big { transform: scale(1.4); margin-left: 15px; }
    .icon-set.big .text,.icon-set.big .text2 { transform: translateX(15px); }
    .icon-set.big .text { margin-top: 60px; }


}

@media screen and (min-width: 1800px){

    .navigation-wrapper { width: 1400px; margin: auto;  }

    .cover-function {
        padding: 40px 0 100px 0;
    }

    .icon-bg { width: 130px; height: 130px; }
    .fa-3x { font-size: 3em; }
    .fa-4x { font-size: 4em; }
    .item1 .icon-bg, .big { width: 230px; height: 230px; }
    .icon-bg.big { transform: scale(1.5);  margin-left: 20px; }
    .icon-set.big .text,.icon-set.big .text2 { transform: translateX(20px); }
    .icon-set.big .text { margin-top: 70px; }


}

@media screen and (min-width: 2000px){
    .icon-bg.big { transform: scale(1.5);  margin-left: 70px; }
    .icon-set.big .text,.icon-set.big .text2 { transform: translateX(70px); }
    .icon-set.big .text { margin-top: 70px; }
}