@charset "utf-8";
/* Style des blocs de l'application */


#app{ overflow: hidden; }
.page-background-black { background-color: #111; }
.page-background-grey { background-color: #FAFAFA; }
.page-background-grey-medium { background-color: #F8F8F8; }

.page-background-product,.page-background-product2 {
    width: 100%; float: left; padding: 50px 0;
    background-color: #F8F8F8; background: url('img/back1.png'); background-size: cover; background-position: center center;
}
.page-background-product2 { padding: 50px 0 0 0; background: url('img/back2.jpg'); background-size: cover; background-position: center center; }

.page-background-vente {
    width: 100%; float: left; padding: 30px 0 30px 0;
    background-color: #B70037;
    /*background: linear-gradient(180deg, #EC0046 0%, #B70037 80%);*/
}
.page-background-home-set { margin: -90px 10% 0 10%; } 
.page-background-home { 
    width: 100%; padding: 50px 0; margin-top: -5px; position: relative; z-index: 50;
    background-color: #000E1C; /*background: url('img/back4.jpg'); background-size: cover; background-position: center center; */
}
.page-background-home2 { 
    width: 100%; padding: 00px 0 30px 0; margin-top: -5px; position: relative; z-index: 50;
    background-color: #111; background: url('img/back6.jpg'); background-size: cover; background-position: bottom center; 
}
/*.page-background-pix { background:url('../img/background_home2.jpg'); background-size: cover; background-position: bottom center; }*/

.blend-white { width: 100%; height: 10px; margin-top: -2px; position: relative; background-color: #FFF; z-index: 50; }

/*Banner*/
.banner-big-container, .banner-big, .banner-big-img, .banner-big-text, .banner-big2 { width: 100%; height: 750px; position: relative; /*overflow: hidden;*/ }
.banner-big-container { background-color: #000; overflow: hidden; }

.banner-big-img { position: relative; }

.carousel-container { 
    width: 100%; position: absolute;
    margin: auto; /*left: -20%;*/
} 
.carousel-text-container { 
    width: 100%; position: absolute; z-index: 11; transition: 0.3s;
    margin: auto; /*left: -20%;*/ /*background-color: #000;*/
} 
.carousel-slide { 
    width: 100%;
    height: inherit;
    display: flex;
}
.carousel-slide-text { 
    width: 100%; /*margin-left: -20%;*/
    height: inherit;
    display: flex;
}




.banner-big { position: absolute; z-index: 11; left: 0%; transition:  ease-in-out 0.8s;}
.banner-big.animate { left: -100%; transition: ease-in-out 0.8s; }
/*.btlink { 
    display: none;
}*/


.banner-big-inner { width: 65%; margin: 0 auto 80px auto; position: relative; z-index: 11; }
.banner-big-inner2 { width: 100%; margin: 0 auto 80px auto; position: relative; }



.banner-big-text {
    position: absolute; display: flex; align-items: flex-end; overflow: hidden; z-index: 10;
    background: linear-gradient(180deg, rgba(34,34,34,0) 60%, rgba(34,34,34,0.5) 100%); 
}
.banner-big-text2 {
    width: 100%; height: 450px; margin-top: 450px;/*51%*/ position: absolute; display: flex; align-items: flex-end; overflow: hidden; z-index: 10;
    background: linear-gradient(180deg, rgba(34,34,34,0.8) 60%, rgba(34,34,34,0.9) 100%); 
    border-radius: 500px; transition: 0.2s; 
}

@media screen and (min-width: 600px){
.banner-big-inner2:hover > .banner-big-text2 { margin-top: -30px; box-shadow: 0 0 20px rgb(0, 0, 0, 0.5); border-radius: 0; transition: 0.15s; }
.Lcb { margin-top: 0px; opacity: 1; transition: 0.3s; }
.banner-big-inner2:hover > .banner-big-inner .Lcb { margin-top: -20px; opacity: 0; transition: 0.3s; }
.banner-big-inner2:hover > .carousel-text-container { transform: translateY(-15px); transition: 0.2s; }
.banner-big-inner2:hover > .banner-big-inner div a .btlink {  transform: scale(1.2); }
}
@media screen and (max-width: 600px){
.banner-big-inner2 > .banner-big-inner div a .btlink {  transform: scale(0.9); }
}


.banner-big-img { position: absolute; z-index: 9; }
.carousel-slide-title { width: 100%;  position: absolute; z-index: 10; /*background-color: #000;*/ }

.banner-big2 {
    position: absolute; display: flex; align-items: flex-start; overflow: hidden; left: -130%; /*100%*/ z-index: 11;
    background-color: rgb(255, 255, 255, 0.98); overflow-y: auto;
    transform: scale(1.5); transition: ease-in-out 0.7s; 
    scrollbar-width: thin; scrollbar-color: rgb(255, 255, 255, 0.5) rgb(255, 255, 255,0);
}
.banner-big2.animate { left: 0%; transform: scale(1); transition: ease-in-out 0.6s; }

.banner-big2::-webkit-scrollbar {
	width: 5px;
}
.banner-big2::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgb(0, 0, 0,0.2); 
    background: rgb(255, 255, 255,0); 
	border-radius: 10px;
}
.banner-big2::-webkit-scrollbar-thumb {
	background: rgb(255, 255, 255,0.5); 
	border-radius: 10px;
}
.banner-big2::-webkit-scrollbar-thumb:hover {
	background: rgb(255, 255, 255,0.8); 
}

.banner-big-social-size { width: 45px; height: 45px;  }


.banner-medium {
    width: 100%; height: 650px; position: relative; display: flex; align-items: flex-end; overflow: hidden; 
}
.banner-medium-inner { width: 100%; height: inherit; position: absolute; display: flex; align-items: flex-end; }
.banner-medium-inner-text { width: 100%; height: inherit; position: relative; display: flex; align-items: flex-end; }


.banner-small,.banner-small2 {
    width: 100%; height: 550px; position: relative; overflow: hidden; display: flex; align-items: center; 
    background-color: #000; 
}
.banner-small-hover { 
	width: 80%; height: inherit; padding: 0 10%; position: relative; display: flex; align-items: flex-end;  justify-content: center; 
	background: linear-gradient(180deg, rgba(34,34,34,0) 0%, rgba(34,34,34,0.5) 80%); 
}
.banner-small2 { align-items: flex-end; }
.banner-small2-img-container {  width: 100%; height: inherit; position: absolute; z-index: 1;}
.banner-small2-slider {  width: 100%; height: inherit; position: relative; background-color: #13b1fa; }
.banner-small2-img {  width: 100%; height: 550px; position: relative; }



.banner-small-picture { 
    width: inherit; height: inherit; position: absolute; display: flex; align-items: center; overflow: hidden; justify-content: left; 
    bottom: -125%; opacity: 0; z-index: 3;
    perspective: 50px; transform: scale(1.5)  rotateX(30deg) rotateY(20deg); transition: 0.4s; 
}
.banner-small-picture.animate {
    opacity: 1; bottom: 0; 
    transform: scale(1)  rotateX(0deg) rotateY(0deg); transition: 0.3s;
    /*perspective: 50px; transform: translateY(-200px) scale(1) rotateX(50deg) rotateY(50deg);*/
}


.banner-small-picture2 { 
    width: inherit; height: inherit; position: absolute; display: flex; align-items: center; overflow: hidden; justify-content: left; 
    background-color: #000; opacity: 0.1; transition: 0.5s;
}
.banner-small-picture2.animate { opacity: 0.5; transition: 0.5s; } 

.banner-small-picture2:hover { opacity: 0.3; transition: 0.5s; } 


.banner-small.animate { filter: blur(2px); }



.banner-lil {
    width: 100%; min-height: 150px; padding: 50px 0; margin: 95px 0 20px 0; position: relative; display: flex; align-items: center; overflow: hidden; justify-content: center;
    background: linear-gradient(90deg, rgb(240, 230, 140, 0.2) 20%, rgb(240, 230, 140, 0.2) 80%);
}
.banner-lil2 {
    width: 100%; min-height: 50px; padding: 50px 0; margin: 95px 0 30px 0; position: relative; display: flex; align-items: center; overflow: hidden; justify-content: center;
    background: linear-gradient(90deg, rgb(240, 230, 140, 0.2) 20%, rgb(240, 230, 140, 0.2) 80%);
}

.banner-set-bottom {
    width: 100%; padding: 0 0 15px 0; float: left; position: absolute; bottom: 0; z-index: 3;
    /*background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 50%);*/
}
.banner-set-botton-center { 
    width: 150px; margin: auto; transform: scale(1.4);
}


h0 { 
    font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 100px; line-height: 110px;
    font-weight: normal; letter-spacing: 35px; color: var(--text-color-black); margin: 15px 0 20px 0; 
    text-align:justify; 
} 
.banner-title { 
    font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 80px; line-height: 80px;
    font-weight: normal; color: var(--text-color-black); margin: 5px 0 0 0; 

} 

#banner-histortique { width: 100%; min-height: 1000px; position: relative; overflow: hidden; }

.banner-special,.banner-special2,.banner-special3 {
    width: 100%; height: inherit; padding: 130px 0 100px 0; margin-left: 0%; float: left; position: absolute; display: flex; align-items: flex-end; overflow: hidden; 
    background-color: #000; /*box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);*/
    transition: 0.8s ease-in-out;
}
.banner-special2 { margin-left: 124%; transform: scale(1.5); } 
@media screen and (max-width: 600px){.banner-special2 { margin-left: 100%; transform: scale(1); }  }
.banner-special3 { margin-left: 200%; } 

.banner-special.animate { margin-left: -100%; transition: 0.8s ease-in-out; }
.banner-special2.animate { margin-left: 0%; transform: scale(1); transition: 0.8s ease-in-out; }



.banner-contact {
    width: 100%; min-height: 200px; padding: 300px 0 70px 0; position: relative; display: flex; align-items: flex-end; overflow: hidden; 
    background:url('img/cover_contact.jpg'); background-size: cover; background-position: top center;
}
.banner-contact-st1 { width: 40%; margin-right: 25%; float: left; }
.banner-contact-st2 { width: 35%; float: left; }
.banner-contact-set { margin-top: -70px; position: relative; }
.banner-contact-set-img1 { 
    width: 65%; margin: 27px 0 0 50px; position: absolute; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-radius: 200px; 
}
.banner-contact-set-img2 { 
    width: 65%; margin: 27px 0 0 0px; position: absolute; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-radius: 200px; 
}


/*banner nav*/
#banner-nav-set { 
	width: 50px;  position: absolute; padding: 0 30px; right: 0%; top: 35%; /*background-color: lawngreen;*/
}

.banner-nav-arrow { width: auto; margin: 0 0; list-style-type: none;  }
.banner-nav-arrow li { 
    width: 10px; height: 10px; margin: 5px 3px; float: left;
    background-color: rgb(255, 255, 255, 0); border: 2px solid #FFF; border-radius: 6px; 
}
.banner-nav-arrow li:hover { 
    width: 14px; height: 13px; margin: 3px 0 4px 1px; cursor: pointer;
    background-color: rgb(255, 255, 255, 1); 
 }
.banner-nav-arrow li.active {
    background-color: rgb(255, 255, 255, 1); 
}



.banner-solution-back { 
    width: 100%; height: inherit; position: absolute; z-index: 1;  /*background-color: khaki;*/ 
    /*transform: scale(1.1);*/ 
    animation: animation-back 20s ease infinite; 
}
.animation-back-in { animation: animation-back-in 2s ease-in-out forwards; }
.animation-solution-in { opacity: 0; animation: animation-solution-in 1.4s ease-in-out forwards; animation-delay: 0.25s; }

.banner-solution-back-crop { 
    width: 100%; height: inherit; position: absolute; z-index: 1;  /*background-color: khaki;*/ overflow: hidden;  
}

.banner-solution {
    width: 100%; height: 800px; margin-bottom: 100px; position: relative; display: flex; align-items: flex-end;
    /*background-color: #000; */
}
#banner-solution-img { 
    width: 1200px; margin: auto; position: relative; z-index: 3; 
}
#banner-solution-img:hover { animation: animation-bounce 3s ease infinite; }
.banner-solution:hover > #banner-solution-set3, .banner-solution:hover > #banner-solution-set4 { opacity: 1; transition: 0.3s; }

#banner-solution-text { position: relative; z-index: 4; }
#banner-solution-set { 
	width: 100px; position: absolute; padding: 0 30px; right: 0%; top: 80%;  z-index: 5; background-color: lawngreen; 
}
#banner-solution-set3,#banner-solution-set4 { 
    /*width: 100px;*/ position: absolute; padding: 0 30px; margin: 0 3%; top: 40%; z-index: 5; /*background-color: lawngreen; */
    opacity: 0; transition: 0.3s;
}
#banner-solution-set4 { right: 0%;  }

canvas {
    display: block; top: 0; left: 0; z-index: 2; /*Required to be behind all the stuff!*/
}
#overlay { 
    width: 100%; position: absolute;
    /*background-color: rgb(0, 0, 0,.3);*/
    mix-blend-mode: screen;  /*color: #ffee00;*/
}
#overlay2 { 
    width: 100%; position: absolute;
    /*background-color: rgb(0, 0, 0,.3);*/
    mix-blend-mode: screen;  /*color: #ffee00;*/
}

.banner-solution-img2 { width: 80%; }



/*card*/
.grid-solution-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 0;
    grid-column-gap : 50px;
    grid-template-columns: auto auto auto auto;
}

.card-solution { 
    width: 74%; float: left; padding: 20px 13% 40px 13%; overflow: hidden;
    border-top: 1px solid #CCC;
    /*background: linear-gradient(180deg, rgba(20,20,20,0) 70%, rgba(255, 174, 0, 0.1) 100%);*/
}

.card-solution:hover {  
    border-top: 1px solid #ff004c;
    background: linear-gradient(180deg, rgba(255, 174, 0, 0) 70%, rgba(255, 174, 0, 0.1) 100%); transition: .3s; 
}
.card-solution > img { transition: .3s; }
.card-solution:hover > img { transform: scale(1.1); transition: .3s; }
.card-solution:hover > .button-web { transform: translateY(15px);  }

.card-solution-content1 { width: 100%; position: relative; transition: .3s; }
.card-solution-content2 { width: 74%; position: absolute; margin-left: 100%; transition: .4s; }

.card-solution:hover > .card-solution-content1 { margin-left: -100%; opacity: 0; transition: .3s; }
.card-solution:hover > .card-solution-content2 { margin-left: 0%; transition: .4s; }


.grid-solution2-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 20px;
    grid-template-columns: auto auto auto;
}
.grid-solution2-container2 {
    width: 100%; 
    display: grid; 
    grid-row-gap: 40px;
    grid-column-gap : 50px;
    grid-template-columns: auto auto;
}

.card-solution2 { 
    width: 100%; float: left; padding: 0 0 0 0; position: relative; overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); cursor: pointer;
    /*background: linear-gradient(180deg, rgba(20,20,20,0) 70%, rgba(255, 174, 0, 0.1) 100%);*/
}
.card-solution2-text,.card-solution2-text2 { 
    width: 80%; height: 95%; padding: 0 10% 5% 10%; position: absolute; display: flex; align-items: flex-end; z-index: 10; /*background-color: #000; */
    transition: 0.5s;
}
.card-solution2-text2 { 
    align-items: center; margin-left: -120%; background-color: rgb(255, 255, 255, 0.95);
    transform: rotate(-50deg); opacity: 0;
}
.card-solution2:hover > .card-solution2-text2 { 
    margin-left: 0%; transform: rotate(0deg); opacity: 1; transition: 0.35s;
}
.card-solution2 > img { transition: 0.3s; }
.card-solution2:hover > img { transform: scale(1.2); transition: 0.3s; }

.card-solution2:hover > .card-solution2-text { opacity: 0; }

.card-solution2 > .card-solution2-text2 div .card-text-titlebig2 { margin-top: 40px; opacity: 0; }
.card-solution2:hover > .card-solution2-text2 div .card-text-titlebig2 { margin-top: 0px; opacity: 1; transition: 0.8s; }



.solution3-set { width: 100%; height: 900px; position: relative; overflow: hidden; }
.page-background-solution3 { 
    width: 80%; height: 850px; padding: 40px 10% 0px 10%; margin: 0 0 110px 0; position: relative; z-index: 50;
    background-color: #111; background: url('img/back5.jpg'); background-size: cover; background-position: center center; 
}

.grid-solution3-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 40px;
    grid-column-gap : 1px;
    grid-template-columns: auto auto auto auto;
}
.card-solution3 {
    width: 100%; height: 550px; padding: 20px 0 60px 0; position: relative; display: flex; align-items: flex-end; 
    background-color: #002333; transition: 0.3s;
}
.card-solution3-img { width: 94%; position: absolute; padding: 0 3%; margin: -200px 0 0 0; transition: 0.3s; z-index: 20; }
.card-solution3-img2 { margin-top: 10px; } 

.card-solution3:hover { 
    cursor: pointer; transform: translateY(-10px); /*box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); */
    /*filter: brightness(150%);*/ animation: animation-brightness 0.5s forwards; transition: 0.3s; 
}
.card-solution3:hover > div .card-solution3-img { transform: translateY(-50px); transition: 0.3s; }
.card-solution3 > div .card-solution3-img img { transition: 0.3s; }
.card-solution3:hover > div .card-solution3-img img { transform: scale(1.2); transition: 0.2s; }



.soin_pix_text { width: 500px; position: absolute; transform: rotate(-90deg); top: 45%; opacity: 0; transition: 0.3s;  }
.soin_pix { width: 100%; position: relative; transition: 0.3s; }
.soin_pix:hover { 
    /*box-shadow: 0 0 50px rgba(0, 0, 0, 0.3); */
    /*filter: brightness(150%);*/ animation: animation-rotate-brightness 0.8s forwards; /*transition: 0.3s; */
}
.soin_pix:hover > .soin_pix_text{ transform: translateX(-150px) rotate(-90deg); opacity: 1; transition: 0.5s; }





.grid-produit-container {
    width: 100%;
    display: grid;
    grid-row-gap: 0;
    grid-column-gap : 50px;
    grid-template-columns: auto auto auto;
    margin: 0 auto;
}

.card-produit { 
    width: 90%; /*height: 130px;*/ padding: 30px 5% 10px 5%; float: left;
    border-bottom: 1px solid #DDD; transition: .5s;
}
.card-produit-st1 { width: 40%; margin-right: 10%; float: left; }
.card-produit-st2 { width: 50%; float: left; }

.card-produit > .card-produit-st1 { transition: 0.3s; }
.card-produit:hover { 
    background-color: rgb(240, 230, 140, 0.05);
    background: linear-gradient(90deg, rgb(240, 230, 140, 0.0) 20%, rgb(240, 230, 140, 0.15) 80%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: 0.3s;
}
.card-produit:hover > .card-produit-st1 { transform: scale(1.1); transition: 0.3s; }
.card-produit:hover > .card-produit-st1 .tag-try { transform: translateX(13px) translateY(-10px) rotate(0deg); transition: 0.15s; }



.grid-produit2-container {
    width: 100%;
    display: grid;
    grid-row-gap: 0;
    grid-column-gap : 50px;
    grid-template-columns: auto auto;
}
.card-produit2 { 
    width: 90%; padding: 50px 5% 10px 5%;  float: left;
    border-bottom: 2px solid #DDD; transition: 0.5s;
}
.card-produit2-st1 { width: 34%; margin-right: 10%; float: left; }
.card-produit2-st2 { width: 56%; float: left; }

.card-produit2 > .card-produit2-st1 { transition: 0.3s; }
.card-produit2:hover { 
    background-color: rgb(240, 230, 140, 0.05);
    background: linear-gradient(90deg, rgb(240, 230, 140, 0.0) 20%, rgb(240, 230, 140, 0.15) 80%);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: 0.3s;
}
.card-produit2:hover > .card-produit2-st1 { transform: scale(1.1); transition: 0.3s; }
.card-produit2:hover > .card-produit2-st1 .tag-try { transform: translateX(13px) translateY(-10px) rotate(0deg); transition: 0.15s; }



.grid-produit3-container {
    width: 100%;
    display: grid;
    grid-row-gap: 0;
    grid-column-gap : 100px;
    grid-template-columns: auto;
}
.card-produit3 { 
    width: 86%; padding: 40px 7% 25px 7%; margin-bottom: 1px; float: left;
    background-color: #FFF; border-bottom: 1px solid #BBB; transition: 0.5s;
}
.card-produit3-st1 { width: 20%; margin-right: 8%; float: left; }
.card-produit3-st2 { width: 72%; float: left; }

.card-produit3 > .card-produit3-st1 { transition: 0.3s; }
.card-produit3:hover { 
    background-color: rgb(240, 230, 140, 0.05);
    background: linear-gradient(90deg, rgb(240, 230, 140, 0.0) 20%, rgb(240, 230, 140, 0.15) 80%);
    background-color: #FFF;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: 0.3s;
}
.card-produit3:hover > .card-produit3-st1 { transform: scale(1.1); transition: 0.3s; }
.card-produit3:hover > .card-produit3-st1 .tag-try { transform: translateX(13px) translateY(-10px) rotate(0deg); transition: 0.15s; }




.grid-produit4-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 0;
    grid-column-gap : 50px;
    grid-template-columns: auto auto auto auto;
}

.card-produit4 { 
    width: 74%; float: left; padding: 35px 13% 35px 13%; /*overflow: hidden;*/
    border-top: 1px solid #CCC;
    /*background: linear-gradient(180deg, rgba(20,20,20,0) 70%, rgba(255, 174, 0, 0.1) 100%);*/
}

.card-produit4:hover { 
    background-color: rgb(240, 230, 140, 0.05);
    background: linear-gradient(180deg, rgb(240, 230, 140, 0.0) 50%, rgb(240, 230, 140, 0.15) 100%);
    background-color: #FFF;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: 0.3s;
}
.card-produit4 > img{ transition: 0.3s; }
.card-produit4:hover > img{ transform: scale(1.1); transition: 0.3s; }
.card-produit4:hover > .card-produit-st4 .tag-try { transform: translateX(13px) translateY(-10px) rotate(0deg); transition: 0.15s; }



.owl-nav { margin-top: 50px; margin-left: 100%; position: absolute; z-index: 20; }
.grid-produit5-container {
    width: 100%;
    display: grid;
    grid-row-gap: 0;
    grid-column-gap : 80px;
    grid-template-columns: auto auto auto;
}
.grid-produit5-container2 {
    width: 100%;
    display: grid;
    grid-row-gap: 0;
    grid-column-gap : 0; /*70px*/
    grid-template-columns: auto auto auto auto auto;
}

.card-produit5_2 { 
    width: 70%; padding: 40px 15% 20px 15%; margin-bottom: 1px; float: left;
    transition: 0.5s;
}
.card-produit5_2-img { height: 220px; }

.card-produit5 { 
    width: 70%; padding: 40px 10% 20px 10%; margin: 0 0 0 5%; float: left; 
    /*transform: translateX(700px); transition: 0.3s;*/
}
.card-produit5-st1 { width: 95%; margin-right: 0; float: left; }
.card-produit5-st2 { width: 5%; float: left; }
.card-produit5-st1_ { width: 95%; margin-right: 0; float: left; }
.card-produit5-st2_ { width: 5%; float: left; }
.card-produit5-line { width: 2px; height: 400px; background-color: #CCC; transform: translateX(60px) rotate(15deg); transition: 0.3s; }
.card-produit5-line2 { width: 1px; height: 250px; margin-top: 10px; background-color: #FFF; transform: translateX(70px) rotate(15deg); transition: 0.3s; }
.card-produit5-line3 { width: 2px; height: 400px; background-color: #CCC; transform: translateX(80px) rotate(15deg); transition: 0.3s; }

.card-produit5 > .card-produit5-st1, .card-produit5_2 > .card-produit5-st1_ { transition: 0.3s; }
.card-produit5:hover, .card-produit5_2:hover { 
    background-color: rgb(240, 230, 140, 0.05);
    background: linear-gradient(180deg, rgb(240, 230, 140, 0.0) 80%, rgb(240, 230, 140, 0.15) 100%);
    background-color: #FFF;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: 0.3s;
    /*transform: rotate(15deg);*/
}
.card-produit5:hover > .card-produit5-st1, .card-produit5_2:hover > .card-produit5-st1_  { transform: scale(1.1); transition: 0.3s; }
.card-produit5:hover > .card-produit5-st2 .card-produit5-line, .card-produit5_2:hover > .card-produit5-st2_ .card-produit5-line2, .card-produit5_2:hover > .card-produit5-st2_ .card-produit5-line3 { 
    opacity: 0; transform: translateX(155px) rotate(0deg); transition: 0.3s; 
}
.card-produit5:hover > .card-produit5-st1 .tag-try, .card-produit5_2:hover > .card-produit5-st1_ .tag-try { transform: translateX(13px) translateY(-10px) rotate(0deg); transition: 0.15s; }


.big { transform: translateX(0px); transition: 0.3s; }
.big2 { transform: translateX(0px); transition: 0.6s; }
.big3 { transform: translateX(0px); transition: 0.9s; }
.big4 { transform: translateX(0px); transition: 1.2s; }
.big5 { transform: translateX(0px); transition: 1.5s; }
.medium { transform: translateX(500px); transition: 0.3s; }




.card-shadow { box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); }


a .card-effect {
    position: relative; text-decoration: none;
}
a .card-effect:before {
    content: '';
    width: 0; height: 0; position: absolute; top: -2px; left: -2px;
    background: transparent;
    border: 2px solid transparent;
}
a .card-effect:hover:before {
    animation: animate 0.5s linear forwards;
}
@keyframes animate {
    0% { 
        width: 0; height: 0;
        border-top-color: #262626;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    50% { 
        width: 100%;height: 0;
        border-top-color: #262626;
        border-right-color: #262626;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
    100% { 
        width: 100%; height: 100%;
        border-top-color: #262626;
        border-right-color: #262626;
        border-bottom-color: transparent;
        border-left-color: transparent;
    }
}


a .card-effect:after {
    content: '';
    width: 0; height: 0; position: absolute; top: -2px; left: -2px;
    background: transparent; border: 2px solid transparent;

}
a .card-effect:hover:after {
    animation: animate2 0.5s linear forwards;
}
@keyframes animate2 {
    0% { 
        width: 0; height: 0;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: #262626;
    }
    50% { 
        width: 0; height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #262626;
        border-left-color: #262626;
    }
    100% { 
        width: 100%; height: 100%;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #262626;
        border-left-color: #262626;
    }
}




.grid-card-neo-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 20px;
    grid-template-columns: auto auto;
}
.grid-card-neo2-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 20px;
    grid-template-columns: auto auto auto auto;
}

.card-neo { 
    width: 100%; float: left; padding: 0 0 0 0; position: relative; overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border-radius: 5px; cursor: pointer; transition: 0.2s ease;
    /*background: linear-gradient(180deg, rgba(20,20,20,0) 70%, rgba(255, 174, 0, 0.1) 100%);*/
}
.card-neo:hover { transform: translateY(10px) scale(1.05); transition: 0.2s ease; }
.card-neo > img { transition: 0.2s ease; }
.card-neo:hover > img { transform: scale(1.1); transition: 0.2s ease; }

.card-neo-text { 
    width: 80%; height: 95%; padding: 0 10% 5% 10%; position: absolute; display: flex; align-items: flex-end; z-index: 10; /*background-color: #000; */
    transition: 0.5s;
}






.grid-card-news2-container {
    display: grid; position: relative;
    grid-template-columns: auto auto auto;
    grid-gap: 0px;
    padding: 0px;
}
.grid-card-news-container {
    display: grid; position: relative;
    grid-template-columns: auto auto;
    grid-gap: 0px;
    padding: 0px;
}
.card-news,.card-news2 { 
	width: 85%; 
	height: 310px;
	/*position: relative;*/
	float: left; overflow: hidden; 
	margin: 0 0 10px 0; padding: 15px 7%;
	border-right: 1px solid #DDD; border-radius: 2px;
	/*box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.08);*/ transition: 0.2s;
}
.card-news2 {
    width: 93%; padding: 15px 3%; margin-bottom: 20px; 
    background-color: #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    grid-column-start: 1;
    grid-column-end: 3;
    /*grid-column: 1 / 3;*/
}
.card-news:hover,.card-news2:hover { 
    background-color: #FFF; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
.card-news2 > a div img { transition: 0.2s; }
.card-news2:hover > a div img { transform: scale(1.05); transition: 0.2s; }

.card-news-image {
	height: 140px; overflow: hidden; border-radius: 3px; position: relative;
	margin: 0 0 10px 0;
}
.card-news-image2 {
	height: 305px; overflow: hidden; border-radius: 3px;  position: relative;
	margin: 0 0 10px 0;
}





.grid-card-blog-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 20px;
    grid-column-gap : 30px;
    grid-template-columns: auto auto;
}
.card-blog { 
	width: 100%; height: 390px; padding-bottom: 20px; float: left; overflow: hidden; position: relative;
	margin: 10px 0; 
	background-color: #FFF; border-radius: 4px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); transition: 0.2s;
}
.card-blog-image {
	height: 300px; overflow: hidden; position: relative;
	margin: 0 0 10px 0;
}
.card-blog-image-text { 
	width: 90%; height: 90%; padding: 3% 5%; position: absolute; z-index: 2;
	background: linear-gradient(180deg, rgba(34,34,34,0.7) 0%, rgba(34,34,34,0) 25%);
	font-size: 14px; line-height: 20px; color: #FFF;
}
.card-blog2-image-text { 
	width: 90%; height: 90%; padding: 3% 5%; position: absolute; z-index: 2; display: flex; align-items: flex-end;
	background: linear-gradient(180deg, rgba(34,34,34,0) 60%, rgba(34,34,34,0.5) 100%);
	font-size: 14px; line-height: 20px; color: #FFF;
}

.card-blog:hover{ 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
.card-blog > .card-blog-image img { transition: 0.2s; }
.card-blog:hover > .card-blog-image img { transform: scale(1.1); transition: 0.2s; }
#card-blog-content { transform: rotate(50deg); margin-top: 30%; opacity: 0; transition: 0.5s; }
.card-blog:hover > .card-blog-image #card-blog-content { transform: rotate(0deg); margin-top: 0%; opacity: 1; transition: 0.2s; }





.card-commentaire {
	width: 90%; padding: 10px 5% 20px 5%; margin: 0 0 15px 0;
	background-color: #FFF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); border-radius: 4px;
}


.card-inline {
    width: 90%; padding: 0 5% 0 5%; float: left;
    /*border-top: 1px solid #CCC;*/ opacity: 0.9;
	/*background-color: #FFF; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15); border-radius: 4px;*/
}
.card-inline:hover { 
    opacity: 1; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 
    /*border-top: 1px solid #FFF;*/
}




/*tab*/
.tab_title {
	width: 100%; padding: 5px 0 20px 0; cursor: pointer;
}
.tab_panel { width: 100%; margin: -10px 0 40px 0; display: none; }
.tab-line { width: 100%; height: 2px; background-color: #002333; }
.tab-arrow { width: 20px; height: 20px; margin-top: 7px; float: right; opacity: 0.7; }






.block-produit-description { 
    width: 100%; float: left; padding: 15px 0 10px 0; margin: 20px 0;
    border: 2px solid #000; border-left: none; border-right: none; 
}


/*card promotion*/
.card-promotion { width: 70%; padding: 40px 15%; margin: 30px 0 40px 0; 
    /*outline-style: outset;
    outline-color: #F5A356;
    outline-width: 3px;*/
}


.card-promotion2 { width: 100%; height: 570px; overflow: hidden; }
.card-promotion2-st { 
    width: 80%; height: 500px; padding: 0 10% 70px 10%; position: relative; overflow: hidden; 
    background-color: rgb(0, 0, 0, 0); transition: 0.3s;
}
.card-promotion2:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.card-promotion2:hover > .card-promotion2-st .card-promotion2-st1 { width: 45%; margin-left:5%; transition: 0.5s; }
.card-promotion2:hover > .card-promotion2-st .card-promotion2-st2 { width: 45%; margin-right:5%; transform: scale(1.25); transition: 0.3s; }
.card-promotion2:hover > .card-promotion2-st { background-color: rgb(0, 0, 0, 0.1); transition: 0.3s; }

.card-promotion2 > .card-promotion2-st .card-promotion2-st1 a .button3-web { display: none; }
.card-promotion2:hover > .card-promotion2-st .card-promotion2-st1 a .button3-web { display: block; }

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

.card-promotion2 { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
/*.card-promotion2 > .card-promotion2-st .card-promotion2-st1 { width: 45%; margin-left:5%; transition: 0.5s; }
.card-promotion2 > .card-promotion2-st .card-promotion2-st2 { width: 45%; margin-right:5%; transform: scale(1.25); transition: 0.3s; }*/
.card-promotion2 > .card-promotion2-st { background-color: rgb(0, 0, 0, 0.4); transition: 0.3s; }

/*.card-promotion2 > .card-promotion2-st .card-promotion2-st1 a .button3-web { display: none; }*/
.card-promotion2 > .card-promotion2-st .card-promotion2-st1 a .button3-web { display: block; }

}


.card-promotion2-st1 { width: 50%; height: inherit; float: left; display: flex; align-items: flex-end; transition: 0.3s; }
.card-promotion2-st2 { width: 50%; height: inherit; margin: 50px 0 0 0; float: left; display: flex; align-items: center; text-align: right; transition: 0.3s; }
.card-promotion2-img { width: 90%; } 


.card-promotion3 { 
    width: 40%; height: 450px; padding: 0 5% 70px 5%; position: relative; display: flex; align-items: flex-end; overflow: hidden; float: left;
    background-color: #000; 
}



.card-promotion4 { width: 100%; height: 570px; margin-bottom: 160px;  }
.card-promotion4-st { 
    width: 90%; height: 650px; padding: 0 3% 70px 7%; position: relative; overflow: hidden; 
    background-color: rgb(0, 0, 0, 0); transition: 0.3s;
}
/*
.card-promotion4:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
.card-promotion4:hover > .card-promotion4-st .card-promotion4-st1 { width: 45%; margin-left:5%; transition: 0.5s; }
.card-promotion4:hover > .card-promotion4-st .card-promotion4-st2 { width: 45%; margin-right:5%; transform: scale(1.25); transition: 0.3s; }
.card-promotion4:hover > .card-promotion4-st { background-color: rgb(0, 0, 0, 0.3); transition: 0.3s; }
*/

.card-promotion4-st1 { width: 37%; height: inherit; margin: 140px 0 0 0;  float: left; display: flex; align-items: center; transition: 0.3s; }
.card-promotion4-st2 { width: 58%; height: inherit; margin: 50px 0 0 5%; float: left; display: flex; align-items: center; text-align: right; transition: 0.3s; }
.card-promotion4-img { width: 100%; } 



.grid-promotion5-container {
    width: 100%; 
    display: grid; 
    grid-row-gap: 40px;
    grid-column-gap : 50px;
    grid-template-columns: auto auto auto auto;
}

.card-promotion5 { width: 100%; float: left; position: relative; /*background-color: rgb(208, 255, 0, 0.2);*/ }
.card-promotion5_1,.card-promotion5_2 { 
    width: 95%; padding: 0 0 0 0; margin: 20px 2.5%; position: relative; overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /*background: linear-gradient(180deg, rgba(20,20,20,0) 70%, rgba(255, 174, 0, 0.1) 100%);*/ 
    transition: 0.7s;
}
.card-promotion5_2 {  width: 70%; margin-left: 27.5%; }
.card-promotion5_2-img { width: 135%; margin-left: -35%; }

.card-promotion5-text { 
    width: 80%; height: 95%; padding: 0 10% 5% 10%; position: absolute; display: flex; align-items: flex-end; z-index: 10; /*background-color: #000; */
    transition: 0.5s;
}
.card-promotion5-text2,.card-promotion5-text3 { 
    width: 80%; height: 95%; padding: 0 10% 7% 10%; position: absolute; display: flex; align-items: flex-end; z-index: 10; 
    background-color: rgb(0, 0, 0, 0);
    transition: 0.5s;
}
.card-promotion5-text2:hover { background-color: rgb(0, 0, 0, 0.5); }
.card-promotion5-text3 { background-color: rgb(255, 255, 255, 0); }
.card-promotion5-text3:hover { background-color: rgb(255, 255, 255, 0.5); }


.card-promotion6 { 
    width: 86%; height: 370px; padding: 40px 7%; margin: 20px 0 20px 0;  float: left;
    /*background: linear-gradient(180deg, rgb(239, 241, 241) 70%, rgb(222, 227, 230) 100%);*/ border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card-promotion6-st1 { width: 45%; height: inherit; margin-left: 5%; float: left; display: flex; align-items: center;  }
.card-promotion6-st2 { width: 50%; height: inherit; margin-left: 0%; float: left; display: flex; align-items: center;  }


.card-promotion7 { 
    width: 80%; height: auto; padding: 0 10% 20px 10%; margin: 10px 0 30px 0;  float: left; overflow: hidden;
    /*background: linear-gradient(180deg, rgb(239, 241, 241) 70%, rgb(222, 227, 230) 100%);*/ border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}






/*
.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-container2 {
    width: 100%;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}
.grid-container3 {
    width: 100%;
    display: grid;
    grid-template-columns: 100% 0%;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
}

.grid-container > div, .grid-container2 > div, .grid-container3 > div {
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
}
*/


/*
.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}
.item2 {
    grid-column-start: 2;
    grid-column-end: 4;
}
.item5 {
    grid-row-start: 1;
    grid-row-end: 3;
}*/



/* .video-size { width: 100%; height: auto; outline: none; }
.video-size-youtube { width: 100%; height: 450px; outline: none; } */
.video-size { width: 100%; height: auto; outline: none; display: none; }
.video-size-youtube { width: 100%; height: 480px; outline: none; }


/*Effects media & animation*/
.barMedia0{  width: 65px; height: 65px; margin-bottom: 20px; border: solid 2px rgba(255,255,255,1);  border-radius: 65px; opacity: 0.9; transition: 0.3s; }
.barMedia {  width: 65px; height: 65px; border: solid 3px rgba(200,200,200,1);  border-radius: 65px; opacity: 1; transition: 0.3s; transform: scale(0.9); }
.barMedia1{ width: 45px; height: 3px; background-color: #FFF; -webkit-transform: rotate(25deg) translate(12px, 17px); transform: rotate(25deg) translate(12px, 17px); border-radius: 2px; }
.barMedia2{ width: 45px; height: 3px; background-color: #FFF; -webkit-transform: rotate(-25deg) translate(-12px, 34px); transform: rotate(-25deg) translate(-12px, 34px); border-radius: 2px; }
.barMedia3{ width: 16px; height: 3px; background-color: #FFF; -webkit-transform: rotate(70deg) translate(8px, 16px);  transform: rotate(70deg) translate(8px, 16px); border-radius: 2px; transition: 0.3s; }
.barMedia4{ width: 16px; height: 3px; background-color: #FFF; -webkit-transform: rotate(-70deg) translate(-34px, -1px);  transform: rotate(-70deg) translate(-34px, -1px); border-radius: 2px; transition: 0.3s; }


.barMedia-anim:hover > div .barMedia {  -webkit-transform: scale(0.7); transform: scale(0.7); transition: 0.3s; }
.barMedia-anim:hover > div .barMedia .barMedia3{ width: 38px; -webkit-transform: rotate(90deg) translate(23px, 16px); transform: rotate(90deg) translate(23px, 16px); transition: 0.3s; }
.barMedia-anim:hover > div .barMedia .barMedia4{  -webkit-transform: rotate(-90deg) translate(-20px, -10px);  transform: rotate(-90deg) translate(-20px, -10px); opacity: 0; transition: 0.3s;}


.card-film2-text { 
    width: 90%; height: 100%; padding: 0 5%; 
    position: absolute; display: flex; align-items: center; z-index: 6; 
    /*background-color: rgba(20,20,20,0.1);*/ transition: 0.3s; 
}
.card-film2-text .text { transform: translateY(-20px); opacity: 0; transition: 0.2s; }
.card-film2-text:hover { background-color: rgba(20,20,20,0.4); transition: 0.3s; cursor: pointer; }
.card-film2-text:hover .text { transform: translateY(0); opacity: 1; transition: 0.2s; }


.card-film2-text2 { width: 90%; position: absolute; bottom: 0%; margin-bottom: 25px; }

.card-film2-text > div .card-film2-text2 > h3 { opacity: 0;  transition: 0.3s; }
.card-film2-text:hover > div .card-film2-text2 > h3 { opacity: 1;  transition: 0.3s; }

.card-film2-text > div .card-film2-text2 { transform: translateY(0);  transition: 0.3s; }
.card-film2-text:hover > div .card-film2-text2 { transform: translateY(-40px);  transition: 0.3s; }

.video-size-preview { width: 100%; height: auto; outline: none; }
.media-film2 { width: 100%; height: auto; border-radius: 10px; overflow: hidden; position: relative; }


.area-film2 {
    width: calc(100% - 40px); padding: 20px; float: left; display: flex; align-items: center;
    background-color: rgb(0, 0, 0, 0.7); border-radius: 10px;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.8) 100%);
}
.area-film3 { width: 100%; height: auto; float: left;  border-radius: 10px; }
#video_player_area { display: none; } 

.layer-text0 { 
    width: 74%; height: 100%; padding: 0 8%;  bottom: 0; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: left;
    color: #FFF; text-align: left;
    background: linear-gradient(-90deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.6) 100%);
    transition: 0.3s ease all;
}



/*Image comparison*/
.ba-slider-text,.ba-slider-text2 { 
    width: 20%; height: 99%; padding: 1% 5% 0 5%; position: absolute; display: flex; align-items: center; z-index: 10; /*background-color: rgb(0, 0, 0, 0.5); */
    transition: 0.5s;
}
.ba-slider-text2 { right: 0%; }
.ba-slider-text3 { 
    width: 90%; padding: 40px 5%; position: absolute; z-index: 9; /*background-color: rgb(0, 0, 0, 0.5); */
    transition: 0.5s;
}
/**/


.arrow-dot {
    width: 30px; height: 30px;  padding: 5px;
    border: 3px solid #FFF; border-radius: 50px;
}
.arrow-dot-inner {
    width: inherit; height: inherit; 
    background-color: #FFF; border-radius: 50px;
}

.arrow-dot2 {
    width: 10px; height: 10px;  padding: 2px;
    border: 2px solid #000; border-radius: 50px;
}
.arrow-dot2-inner {
    width: inherit; height: inherit; 
    background-color: #000; border-radius: 50px;
}

.arrow-dot3 {
    width: 15px; height: 15px;  padding: 5px;
    border: 3px solid #111; border-radius: 50px;
}
.arrow-dot3-inner {
    width: inherit; height: inherit; 
    background-color: #111; border-radius: 50px;
}

.arrow-dot4 {
    width: 35px; height: 35px;  padding: 5px;
    border: 3px solid #000; border-radius: 50px;
}
.arrow-dot4-inner {
    width: inherit; height: inherit; 
    background-color: #000; border-radius: 50px;
}






.card-text-titlebig { width: 80%; /*80%*/ font-family: "Gotham-Light", Arial, Helvetica, sans-serif; font-size: 30px; line-height: 37px; color: #000; margin: 10px 0 15px 0; }
.card-text-titlebig2 { width: 80%; /*80%*/ font-family: "Gotham-Light", Arial, Helvetica, sans-serif; font-size: 22px; line-height: 25px; color: #ff004c; margin: 10px 0 15px 0; }
.card-text-title { font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 24px; line-height: 27px; color: #000; margin: 10px 0; }
.card-text-title2 { font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 20px; line-height: 25px; color: #000; margin: 10px 0; }
.card-text-subtitle { font-family: "Gotham-Bold", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 23px; color: #000; margin: 5px 0; }
.card-text-subtitle3 { font-family: "Montserrat-Light", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 25px; color: #999; margin: 5px 0; }
.card-text-subtitle4 { font-family: "Montserrat-Light", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22px; color: #999; margin: 5px 0; }
.card-text-des { font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; color: #555; margin: 10px 0; }
.card-text-caption { font-family: "Montserrat-Light", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; color: #333; margin: 10px 0; }
.card-text-caption2{ font-family: "Montserrat-Light", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 21px; color: #999; margin: 10px 0; }
.card-caption-set { margin-top: -5px; float: left; }

.card-star { width: 100%; height: 14px; }


.tag-new,.tag-discover { 
    padding: 5px 10px; margin: -15px 0 0 -15px; position: absolute; z-index: 50;
    background-color: #ffee00; /*d0ff00*/ border-radius: 2px; 
    font-size:10px; color: #000; text-transform: uppercase;
}
.tag-discover { margin-top: -20px; background-color: #FDFBEE; border: 2px solid rgb(240, 230, 140, 0.8); color: rgb(71, 64, 0); text-transform: none; }
.tag-try { 
    padding: 5px 10px; margin: 20px 0 0 -25px; position: absolute; z-index: 50;
    background-color: #ff004c; border-radius: 2px; transform: rotate(-20deg);
    font-size:10px; color: lemonchiffon; text-transform: uppercase; transition: 0.2s;
}
.tag { 
    padding: 5px;
    font-size: 10px; color: #222;
    background-color: #ecfd00; border-radius: 2px;
}


/*Icons size*/
.icon-size-big { width: 150px; height: 150px; }
.icon-size-medium { width: 75px; height: 75px; }
.icon-size-medium2 { width: 45px; height: 45px; }
.icon-size-small { width: 35px; height: 35px; }



/*Care Range Grid*/
/*https://www.w3schools.com/css/css_grid.asp*/
.grid-range-container {
    width: 100%; /*height: 200px;*/ 
    display: grid;
    grid-row-gap: 34px;
    grid-column-gap : 0px;
    grid-template-columns: auto auto auto auto auto auto;
    /*grid-template-columns: 200px 200px 200px;*/
}

.grid-range-item {
    padding: 10px 0 0 0;
    /*border-bottom: 1px solid #DDD; */
    font-size: 14px; color: var(--text-color-black); text-align: center;
}
.grid-range-item:hover {
    background: linear-gradient(90deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.2) 50%, rgba(20,20,20,0) 100%);
    cursor: pointer;
    animation: animation-pop 0.7s infinite;
}

.grid-range-item > img { transition: 0.2s; }
.grid-range-item:hover > img { transform: scale(1.1); transition: 0.2s; }


.grid-range-item2 { opacity: 0.7; transition: 0.3s; }
.grid-range-item2:hover { opacity: 1; transition: 0.3s; }


/*Stat*/
.card-stat { width: 28%; float: right; }

.stat-bar { width: 98%; height: 10px; padding: 3px 1%; margin: 5px 0; background-color: #EEE; border-radius: 7px; }
.stat-bar-color { width: 100%; height: 10px; background-color: #FFC107; border-radius: 5px; }
.stat-row { 
	width: 100%; margin: 10px 0;
	font-size: 16px; line-height: 20px; color: #222;
 }



/*Text and content Anim*/
.text-effect { transform: translateX(300px); opacity: 0; transition: ease-in-out 0.5s; }
.text-effect2 { transform: translateX(300px); opacity: 0; transition: ease-in-out 0.5s; }
.text-effect3 { transform: translateX(300px); opacity: 0; transition: ease-in-out 0.5s; transition-delay: 0.2s; }
.text-effect4 { transform: translateX(300px); opacity: 0; transition: ease-in-out 0.5s; transition-delay: 0.3s; }
.text-effect5 { transform: translateX(300px); opacity: 0; transition: ease-in-out 0.5s; transition-delay: 0.4s; }
.text-effect6 { transform: translateX(300px); opacity: 0; transition: ease-in-out 0.5s; transition-delay: 0.5s; }
.text-effect.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.5s; }
.text-effect2.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.5s; transition-delay: 0.1s; }
.text-effect3.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.5s; transition-delay: 0.2s; }
.text-effect4.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.5s; transition-delay: 0.3s; }
.text-effect5.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.5s; transition-delay: 0.4s; }
.text-effect6.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.5s; transition-delay: 0.5s; }


.effect-left-right1 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; }
.effect-left-right2 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.05s; }
.effect-left-right3 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.1s; }
.effect-left-right4 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.15s; }
.effect-left-right5 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.2s; }
.effect-left-right6 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.25s; }
.effect-left-right7 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.3s; }
.effect-left-right8 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.35s; }
.effect-left-right9 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.4s; }
.effect-left-right10 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.45s; }
.effect-left-right11 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.5s; }
.effect-left-right12 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.55s; }
.effect-left-right13 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.6s; }
.effect-left-right14 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.65s; }
.effect-left-right15 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.7s; }
.effect-left-right16 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.75s; }
.effect-left-right17 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.8s; }
.effect-left-right18 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.85s; }
.effect-left-right19 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.9s; }
.effect-left-right20 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 0.95s; }
.effect-left-right21 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 1s; }
.effect-left-right22 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 1.05s; }
.effect-left-right23 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 1.1s; }
.effect-left-right24 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 1.15s; }
.effect-left-right25 { transform: translateX(-800px); opacity: 0; transition: ease-in-out 0.3s; transition-delay: 1.2s; }

.effect-left-right1.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; }
.effect-left-right2.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.05s; }
.effect-left-right3.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.1s; }
.effect-left-right4.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.15s; }
.effect-left-right5.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.2s; }
.effect-left-right6.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.25s; }
.effect-left-right7.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.3s; }
.effect-left-right8.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.35s; }
.effect-left-right9.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.4s; }
.effect-left-right10.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.45s; }
.effect-left-right11.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.5s; }
.effect-left-right12.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.55s; }
.effect-left-right13.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.6s; }
.effect-left-right14.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.65s; }
.effect-left-right15.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.7s; }
.effect-left-right16.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.75s; }
.effect-left-right17.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.8s; }
.effect-left-right18.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.85s; }
.effect-left-right19.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.9s; }
.effect-left-right20.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 0.95s; }
.effect-left-right21.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 1s; }
.effect-left-right22.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 1.05s; }
.effect-left-right23.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 1.1s; }
.effect-left-right24.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 1.15s; }
.effect-left-right25.animate { transform: translateX(0); opacity: 1; transition: ease-in-out 0.3s; transition-delay: 1.2s; }

.effect-right-left1 { transform: translateX(0px); opacity: 1; transition: ease-in-out 0.8s; }
.effect-right-left2 { transform: translateX(0px); opacity: 1; transition: ease-in-out 0.8s; transition-delay: 0.1s; }
.effect-right-left3 { transform: translateX(0px); opacity: 1; transition: ease-in-out 0.8s; transition-delay: 0.2s; }
.effect-right-left4 { transform: translateX(0px); opacity: 1; transition: ease-in-out 0.8s; transition-delay: 0.3s; }
.effect-right-left5 { transform: translateX(0px); opacity: 1; transition: ease-in-out 0.8s; transition-delay: 0.4s; }
.effect-right-left1.animate { transform: translateX(-400px); opacity: 0; transition: ease-in-out 0.8s; }
.effect-right-left2.animate { transform: translateX(-400px); opacity: 0; transition: ease-in-out 0.8s; transition-delay: 0.1s; }
.effect-right-left3.animate { transform: translateX(-400px); opacity: 0; transition: ease-in-out 0.8s; transition-delay: 0.2s; }
.effect-right-left4.animate { transform: translateX(-400px); opacity: 0; transition: ease-in-out 0.8s; transition-delay: 0.3s; }
.effect-right-left5.animate { transform: translateX(-400px); opacity: 0; transition: ease-in-out 0.8s; transition-delay: 0.4s; }







/*Footer*/
#footer {
	width: 100%; float: left; /*background-color: #F4F4F4;*/ padding: 30px 0 0 0; 
	background: url('img/back6.jpg'); background-position: center center; background-size: cover;
    overflow: hidden;
    /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.footer-wrapper{ width: 1200px; margin: auto; }

.footer-column {
	width: 24%; float: left; padding: 0 4% 0 2%; margin: 20px 0 0 0;
}
.footer-column2 {
	width: 40%; float: left;
}

.footer-column-half {
	width: 50%; float: left;
}
.icon-footer { width: 45px; height: 45px; opacity: 0.85; }
.icon-footer2 { width: 35px; height: 35px; opacity: 0.85; }

.footer-column-full {
	width: 100%; float: left; padding: 30px 0 30px 0;
	/*border-top: solid 1px #999; border-left: none; border-right: none;*/
}
.footer-line { width: 100%; height: 1px; margin: 0 auto 15px auto; float: left; background-color: #CCC; }
.footer-line1 { width: 50%; height: 1px; margin: 20px auto 0 50%; background-color: #CCC; }

.footer-title2 {
	margin: 0;
	font-family: "Gotham-Bold", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 17px; color: #333; font-weight: normal;
}
.footer-title {
	margin: 0;
	font-family: "Gotham-Light", Arial, Helvetica, sans-serif; font-size: 23px; line-height: 17px; color: #FF2740; font-weight: normal;
}


.footer-text{
	margin: 0;
	font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 15px; color: #444; font-weight: normal;
}

.footer-text1{
	margin: 0;
	font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 15px; color: #444; font-weight: normal;
}


.footer-items {
	margin: 15px 0;
	padding: 0;
	overflow: hidden;
}

.footer-items li {
	list-style-type: none;
}

.footer-items li a {
	font-family: "Gotham-Regular", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 19px; color: #555; font-weight: normal;
	display: block; padding: 3px 0;
}

.footer-items li a:hover {
	cursor: pointer;
}


.footer-items2 {
	margin: 15px 0;
	padding: 0;
	overflow: hidden;
}

.footer-items2 li {
	list-style-type: none;
}

.footer-items2 li a {
	font-family: "Gotham-Bold", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 26px; color: #555; font-weight: normal;
	display: block; padding: 3px 0;
}

.footer-items2 li a:hover {
	cursor: pointer;
}







/*Button*/
.button-web { 
    width: 150px; height: 40px; margin: 0 auto; position: relative;
    border-radius: 20px;
    transition: 0.2s; cursor: pointer;
}
.button { 
    width: 110px; height: 31px; padding: 2px 15px 7px 15px;  position: absolute; z-index: 2;
    background-color: #333; /*border: 1px dashed #FFF;*/ border-radius: 20px;
    font-family: "AdobeClean-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 11px; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); text-align: center;
    transition: 0.5s;
}
.button-color {
    width: 110px; padding: 12px 13px 13px 13px; margin: 0 0 0 -13px;
    background: linear-gradient(0deg, rgba(50, 50, 50,0.5) 0%, rgba(50,50,50,0) 60%, rgba(50, 50, 50, 0.2) 120px); border-radius: 20px;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/
}
.button-border { 
    width: 10%; height: 2px; padding: 10px 20px 11px 15px; margin: 7px 5px 5px 40%; position: absolute; z-index: 1;
    border: 2px solid #555; border-radius: 25px; opacity: 0;
    transition: 0.2s;
}
.button-border2 { 
    width: 110px; height: 25px; padding: 10px 21px 11px 15px; margin: -5px 5px 5px -5px; position: absolute; z-index: 1;
    border: 2px solid #555; border-radius: 25px;
    transition: 0.2s;
}

.button-web:hover > .button-border  {
    width: 110px; height: 25px; padding: 10px 25px 17px 15px; margin: -8px 5px 5px -7px;
    border: 2px solid #ff004c; opacity: 1; 
    animation: animation-pop-scale 0.7s infinite; transition: 0.2s;
}

.button-web:hover > .button-border2 {
    padding: 5px 20px 6px 5px; margin: 0px 5px 5px 0px;
}

.button-web:hover > .button  {
    background-color: #ff004c; transition: 0.8s;
    animation: animation-pop2 0.7s infinite;
}



.button2-web { 
    width: 150px; height: 40px; margin-right: 30px; margin-left: 15px; float: left; position: relative; 
    border-radius: 20px;
    transition: 0.2s; cursor: pointer;
}
.button2 {
    width: 100%; height: 31px; padding: 5px 15px 10px 15px; position: absolute; z-index: 2;
    background-color: rgb(0, 0, 0, 0.85); /*border: 1px dashed #FFF;*/ border-radius: 20px;
    font-family: "AdobeClean-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 15px; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); text-align: center;
    transition: 0.5s;
}
.button2-color {
    width: 100%; padding: 13px 13px 11px 13px; margin: -3px 0 0 -13px;
    background: linear-gradient(0deg, rgba(80, 80, 80, 0.5) 0%, rgba(255,132,0, 0) 60%, rgba(80, 80, 80, 0.2) 100%); border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.button2-border { 
    width: 10%; height: 2px; padding: 13px 20px 14px 15px; margin: 7px 5px 5px 40%; position: absolute; z-index: 1;
    border: 2px solid rgb(0, 0, 0, 0.8); border-radius: 25px; opacity: 0;
    transition: 0.2s;
}
.button2-border2 { 
    width: 100%; height: 25px; padding: 13px 21px 14px 15px; margin: -5px 5px 5px -5px; position: absolute; z-index: 1;
    border: 2px solid rgb(0, 0, 0, 0.8); border-radius: 25px;
    transition: 0.2s;
}

.button2-web:hover > .button2-border  {
    width: 100%; height: 25px; padding: 13px 25px 20px 15px; margin: -8px 5px 5px -7px;
    border: 2px solid #ff004c; opacity: 1; 
    animation: animation-pop-scale 0.7s infinite; transition: 0.2s;
}

.button2-web:hover > .button2-border2 {
    padding: 8px 20px 9px 5px; margin: 0px 5px 5px 0px;
}

.button2-web:hover > .button2  {
    background-color: #ff004c; transition: 0.8s;
    animation: animation-pop2 0.7s infinite;
}



.button3-web { 
    width: 180px; height: 40px; margin: 0 30px 0 15px; float: left; position: relative; 
    border-radius: 20px;
    transition: 0.2s; cursor: pointer; /*background-color: lawngreen;*/ outline: none;
}
.button3 {
    width: 150px; height: 31px; padding: 5px 15px 10px 15px; position: absolute; z-index: 2;
    background-color: rgb(255, 255, 255, 0.95); /*border: 1px dashed #FFF;*/ border-radius: 20px;
    font-family: "AdobeClean-Bold", Arial, Helvetica, sans-serif; color: #333; font-size: 15px; text-align: center;
    transition: 0.5s;
}
.button3-color {
    width: 150px; padding: 14px 13px 10px 13px; margin: -3px 0 0 -13px;
    background: linear-gradient(0deg, rgba(200, 200, 200, 0.5) 0%, rgba(255,132,0, 0) 60%, rgba(200, 200, 200, 0.2) 100%); border-radius: 20px;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/
}
.button3-border { 
    width: 10%; height: 2px; padding: 13px 20px 14px 15px; margin: 7px 5px 5px 40%; position: absolute; z-index: 1;
    border: 2px solid rgb(255, 255, 255, 0.8); border-radius: 25px; opacity: 0;
    transition: 0.2s;
}
.button3-border2 { 
    width: 150px; height: 25px; padding: 13px 21px 14px 15px; margin: -5px 5px 5px -5px; position: absolute; z-index: 1;
    border: 2px solid rgb(255, 255, 255, 0.8); border-radius: 25px;
    transition: 0.2s;
}

.button3-web:hover > .button3-border  {
    width: 150px; height: 25px; padding: 13px 25px 20px 15px; margin: -8px 5px 5px -7px;
    border: 2px solid #ff004c; opacity: 1; 
    animation: animation-pop-scale 0.7s infinite; transition: 0.2s;
}
.button3-web:hover > .button3 { color: #FFF; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); }

.button3-web:hover > .button3-border2 {
    padding: 8px 20px 9px 5px; margin: 0px 5px 5px 0px;
}

.button3-web:hover > .button3  {
    background-color: #ff004c; transition: 0.8s;
    animation: animation-pop2 0.7s infinite;
}



.button4-web { 
    width: 190px; height: 40px; margin: 0 auto; position: relative;
    border-radius: 20px;
    transition: 0.2s; cursor: pointer;
}
.button4 {
    width: 160px; height: 31px; padding: 2px 15px 7px 15px;  position: absolute; z-index: 2;
    background-color: #222; /*border: 1px dashed #FFF;*/ border-radius: 20px;
    font-family: "AdobeClean-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 14px; /*text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);*/ text-align: center;
    transition: 0.5s;
}
.button4-color {
    width: 160px; padding: 12px 13px 9px 13px; margin: 0 0 0 -13px;
    background: linear-gradient(0deg, rgba(50, 50, 50,0.5) 0%, rgba(50,50,50,0) 60%, rgba(50, 50, 50, 0.2) 120px); border-radius: 20px;
    /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);*/
}
.button4-border { 
    width: 160px; height: 2px; padding: 10px 20px 11px 15px; margin: 7px 5px 5px 0; position: absolute; z-index: 1;
    border: 2px solid #222; border-radius: 25px; opacity: 0;
    transition: 0.2s;
}
.button4-border2 { 
    width: 160px; height: 25px; padding: 10px 21px 11px 15px; margin: -5px 5px 5px -5px; position: absolute; z-index: 1;
    border: 2px solid #222; border-radius: 25px;
    transition: 0.2s;
}

.button4-web:hover > .button4-border  {
    width: 160px; height: 25px; padding: 10px 25px 17px 15px; margin: -8px 5px 5px -7px;
    border: 2px solid #ff004c; opacity: 1; 
    animation: animation-pop-scale 0.7s infinite; transition: 0.2s;
}

.button4-web:hover > .button4-border2 {
    padding: 5px 20px 6px 5px; margin: 0px 5px 5px 0px;
}

.button4-web:hover > .button4  {
    background-color: #ff004c; transition: 0.8s;
  
}




.button5-web { 
    width: 180px; height: 40px; margin: 0 30px 0 15px; float: left; position: relative; 
    border-radius: 20px;
    transition: 0.2s; cursor: pointer; /*background-color: lawngreen;*/ outline: none;
}
.button5 {
    width: 150px; height: 31px; padding: 5px 15px 10px 15px; position: absolute; z-index: 2;
    background-color: rgb(0, 0, 0, 0.95); /*border: 1px dashed #FFF;*/ border-radius: 20px;
    font-family: "AdobeClean-Bold", Arial, Helvetica, sans-serif; color: #FFF; font-size: 15px; text-align: center;
    transition: 0.5s;
}
.button5-color {
    width: 150px; padding: 14px 13px 10px 13px; margin: -3px 0 0 -13px;
    background: linear-gradient(0deg, rgba(200, 200, 200, 0.2) 0%, rgba(255,132,0, 0) 60%, rgba(200, 200, 200, 0.2) 100%); border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.button5-border { 
    width: 10%; height: 2px; padding: 13px 20px 14px 15px; margin: 7px 5px 5px 40%; position: absolute; z-index: 1;
    border: 2px solid rgb(0, 0, 0, 0.8); border-radius: 25px; opacity: 0;
    transition: 0.2s;
}
.button5-border2 { 
    width: 150px; height: 25px; padding: 13px 21px 14px 15px; margin: -5px 5px 5px -5px; position: absolute; z-index: 1;
    border: 2px solid rgb(0, 0, 0, 0.8); border-radius: 25px;
    transition: 0.2s;
}

.button5-web:hover > .button5-border  {
    width: 150px; height: 25px; padding: 13px 25px 20px 15px; margin: -8px 5px 5px -7px;
    border: 2px solid #ff004c; opacity: 1; 
    animation: animation-pop-scale 0.7s infinite; transition: 0.2s;
}
.button5-web:hover > .button5 { color: #FFF; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6); }

.button5-web:hover > .button5-border2 {
    padding: 8px 20px 9px 5px; margin: 0px 5px 5px 0px;
}

.button5-web:hover > .button5  {
    background-color: #ff004c; transition: 0.8s;
    animation: animation-pop2 0.7s infinite;
}




.button-web2 { 
     float: left; padding: 10px 10px 10px 10px; margin: -5px 5px 0 5px; /*background-color: lawngreen;*/
}
.button-web2_ { width: 260px; } 
.button-web2:hover { 
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    cursor: pointer;
    animation: animation-pop 0.7s infinite;
}
.button-web2 > img { transition: 0.2s; }
.button-web2:hover > img { transform: scale(0.9); transition: 0.2s; }


.button-web3 {
    padding: 10px 0; float: right; transition: 0.2s; 
}
.button-web3:hover { 
    background: linear-gradient(90deg, rgba(255, 0, 76,0) 0%, rgba(255, 0, 76,0.4) 50%, rgba(255, 0, 76,0) 100%);
    animation: animation-pop3 0.8s infinite; cursor: pointer; transition: 0.2s;
   
}
.button-web3 > div img { transition: 0.2s; }
.button-web3:hover > div img { transform: scale(1.2); transition: 0.2s; }




/*Animation*/
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }
.delay-7 { animation-delay: .7s; }
.delay-8 { animation-delay: .8s; }
.delay-9 { animation-delay: .9s; }
.delay-10{ animation-delay: 1s; }
.delay-11{ animation-delay: 1.1s; }

@keyframes animation-pop {
    0% { opacity: 1; }
    80% { opacity: 0.5; }
	100% { opacity: 1; }
}
@keyframes animation-pop2 {
    0% { opacity: 1; }
    80% { opacity: 0.8; }
	100% { opacity: 1; }
}
@keyframes animation-pop3 {
    0% { transform: translateX(0); }
    80% { transform: translateX(-10px); }
	100% { transform: translateX(0); }
}
@keyframes animation-pop4 {
    0% { transform: translateX(0); opacity: 0; }
    80% { transform: translateX(-10px); opacity: 1; }
	100% { transform: translateX(0); opacity: 0; }
}

@keyframes animation-pop-scale {
    0% { transform: scale(1); opacity: 1; }
    80% { transform: scale(1.05); opacity: 0.5; }
	100% { transform: scale(1); opacity: 1; }
}


@keyframes animation-bounce {
    0% { transform: translateY(0); }
    20% { transform: translateY(10px); }
    60% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

@keyframes animation-back {
    0% { transform: translateY(-50px) scale(1.1); }
    40% { transform: translateY(-10px) scale(1.05); }
    70% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(-50px) scale(1.1); }
}

@keyframes animation-back-in {
    0% { transform: translateY(-400px) scale(2); }
    40% { transform: translateY(-50px) scale(1.1); opacity: 1; }
    100% { transform: translateY(-30px) scale(1); opacity: 0; }
}

@keyframes animation-solution-in {
    0% { transform: translateY(0px) scale(0.5); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
    /*0% { transform: translateX(-1000px); }
    100% { transform: translateX(0); }*/
}

@keyframes animation-fade-in {
    0% { transform: translateY(100px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes animation-fade-in-scale {
    0% { transform: translateY(0px) scale(2.5); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes animation-fade-in-scale-rotate {
    0% { transform: translateX(100px) translateY(500px) rotate(150deg) scale(3.5); opacity: 0; }
    100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); opacity: 1; }
}

@keyframes animation-fade-in-perspective {
    0% { perspective: 50px; transform: translateY(200px) scale(1) rotateX(50deg) rotateY(50deg); opacity: 0; }
    100% { perspective: 0px; transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg); opacity: 1; }
}
@keyframes animation-fade-in-top-perspective {
    0% { perspective: 50px; transform: translateY(-200px) scale(1) rotateX(50deg) rotateY(50deg); opacity: 0; }
    100% { perspective: 0px; transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg); opacity: 1; }
}

@keyframes animation-text-banner  {
    0% { perspective: 50px; transform: translateY(-300px) scale(1) rotateX(50deg) rotateY(50deg); opacity: 0; }
    100% { perspective: 0px; transform: translateY(0px) scale(1) rotateX(0deg) rotateY(0deg); opacity: 1; }
}


@keyframes animation-brightness {
    0% { filter: brightness(100%); }
    30% { filter: brightness(130%); }
    100% { filter: brightness(100%); }
}

@keyframes animation-rotate-brightness {
    0%   { filter: brightness(100%); }
    50%  { transform: translateY(20px); filter: brightness(115%); }
    100% { transform: translateY(0); filter: brightness(100%); }
}




.hover-pop:hover { animation: animation-pop 1s infinite; }
.hover-fade-in-out { opacity: 1; transition: .2s; }
.hover-fade-in-out:hover { opacity: 0.85; transition: .2s; }
.hover-popop:hover { animation: animation-bounce 3s ease infinite; }
.hover-popop2:hover { animation: animation-pop3 1.2s ease infinite; }

.effect-pop { animation: animation-pop 1s infinite; }
.effect-pop2 { animation: animation-pop-scale 1s infinite;  }
.effect-pop3 { animation: animation-pop-scale 1.5s infinite; }
.effect-pop4 { animation: animation-pop-scale 1.5s infinite; animation-delay: .2s; }
.effect-pop5 { animation: animation-pop-scale 1.5s infinite; animation-delay: .4s; }
.effect-pop6 { animation: animation-pop4 1.5s infinite; }
.effect-pop7 { animation: animation-pop4 1.5s infinite; animation-delay: .2s; }
.effect-pop8 { animation: animation-pop4 1.5s infinite; animation-delay: .4s; }

.animation-fade-in { animation: animation-fade-in 1s forwards; }
.animation-fade-in-scale { animation: animation-fade-in-scale 1s forwards; }
.animation-fade-in-scale-rotate { animation: animation-fade-in-scale-rotate 1s forwards; }
.animation-fade-in-scale-rotate2 { animation: animation-fade-in-scale-rotate 1.2s forwards; }
.animation-fade-in-scale-rotate3 { animation: animation-fade-in-scale-rotate 1.4s forwards; }
.animation-fade-in-perspective { animation: animation-fade-in-perspective 1s forwards; }
.animation-fade-in-perspective2 { animation: animation-fade-in-perspective 1.7s forwards; }
.animation-fade-in-perspective3 { animation: animation-fade-in-perspective 0.7s forwards; }
.animation-fade-in-perspective4 { animation: animation-fade-in-perspective 0.9s forwards; }
.animation-fade-in-perspective5 { animation: animation-fade-in-perspective 1.2s forwards; }
.animation-fade-in-perspective5-delay { animation: animation-fade-in-perspective 1.2s forwards; animation-delay: 0.1s; }

.animation-fade-in-top-perspective3 { animation: animation-fade-in-top-perspective 0.7s forwards; }
.animation-fade-in-top-perspective5 { animation: animation-fade-in-top-perspective 1.2s forwards; }

.animation-text-banner { animation: animation-text-banner 1.7s forwards; /*animation-delay: .3s;*/ }
.animation-text-banner2 { animation: animation-text-banner 1.3s forwards; /*animation-delay: .3s; */ }





/*Line*/
.Line { width: 100%; height: 1px; background-color: #CCC;}
.Line2 { width: 100%; height: 2px; background-color: #FCF5C3;}
.Line3 { width: 100%; height: 1px; background-color: #AAA;}
.Line4 { width: 1px; height: 200px; background-color: #CCC;}
.Line5 { width: 100%; height: 2px; background-color: #CCC;}
.Line6 { width: 1px; height: 140px; background-color: #CCC;}

.Line-carousel-base { width: 100%; height: 7px; margin: 15px 0 20px 0; background-color: rgb(252, 245, 195, 0.2); border-radius: 40px;}
.Line-carousel { width: 1%; height: 7px;  }
.Line-carousel-color { width: 100%; height: 7px; background-color: rgb(252, 245, 195, 0.8); border-radius: 40px; transition: 0.5s; }
.Line-carousel.animate { width: 100%; }