/* ===== Start My Effect ===== */

/* Scale IMG */
.scale-img { overflow: hidden; display: block; }
.scale-img img { -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }
.scale-img:hover > img { -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; -moz-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }

/* Effect */
.effect { display: block; overflow: hidden }
.effect img { transition: all 1s !important; }
.effect:hover img { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); transition: all 1s }
.effect-1 { position: relative; overflow: hidden; transition: all 0.75s; -webkit-transition: all 0.75s; -moz-transition: all 0.75s; -ms-transition: all 0.75s; }
.effect-1:after { position: absolute; top: 0; left: -66%; z-index: 2; display: block; content: ''; width: 50%; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 100%); -webkit-transform: skewX(-10deg); transform: skewX(-10deg); }
.effect-1:hover:after { -webkit-animation: shine .75s; animation: shine .75s; }
@-webkit-keyframes shine {100% { left: 125%; }}
@keyframes shine {100% { left: 125%; }}
.effect-2 { display: flex; justify-content: center; align-items: center; position: relative;/* width: 100%; *//* height: 100%; *//* left: 0; *//* top: 0; *//* right: 0; *//* bottom: 0; */text-align: center; }
.effect-2:before, .effect-2:after { box-sizing: inherit; content: ''; position: absolute; z-index: 9; width: calc(100% - 20px); height: calc(100% - 20px); left: 10px; top: 10px; transform-origin: center; }
.effect-2:before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; transform: scale3d(0, 1, 1); }
.effect-2:after { border-left: 1px solid #fff; border-right: 1px solid #fff; transform: scale3d(1, 0, 1); }
.effect-2:hover { background: rgba(0, 0, 0, 0.45); }
.effect-2:hover:before, .effect-2:hover:after { transform: scale3d(1, 1, 1); transition: transform 0.5s; }
.effect-2 > img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; }
.effect-2:hover > img { opacity: 0.8; }
.effect-3 > img { transform: translateY(0px); animation: float 6s ease-in-out infinite; }
@keyframes float {	0% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); transform: translatey(0px); }	50% { box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); transform: translatey(-20px); } 100% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); transform: translatey(0px); }}
.effect-4{ transform: translateY(0px); animation: float1 5s ease-in-out infinite; }
@keyframes float1 {
    0% {  transform: translatey(0px); }
    50% {  transform: translatey(-20px); }
    100% {  transform: translatey(0px); }
}

.effect-star-blink{animation: grow-rotate 2s infinite ease-in-out;}
@keyframes grow-rotate {
    0% {  transform: scale(0.5) rotate(0deg); }
    50% { transform: scale(1) rotate(180deg); }
    100% { transform: scale(0.5) rotate(360deg); }
}

/* Effetc go and back */
.go-and-back{transform: translateX(0px); animation: drifted 40s ease-in-out infinite;}
@keyframes drifted { 0% {  transform: translateX(0) } 50% {  transform: translateX(200px); } 100% {  transform: translateX(0px); }}

.go-drifted { transform:translateX(0px); animation:drifted1 1s ease-in-out infinite;}
@keyframes drifted1 {0% { transform:translate(0, 0) }50% { transform:translate(-2px, 0); }100% { transform:translate(0, 0); }}
@keyframes drifted2 {0% { transform:translate(-4px, 0) }50% { transform:translate(0, 0); }100% { transform:translate(-4px, 0); }}

/* Effetc change lightmode */
.changelightmode img{filter: brightness( 60% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}
.changelightmode:hover img{filter: brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}

/* Effetc change darkmode */
.changedarkmode img{filter: brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}
.changedarkmode:hover img{filter: brightness( 60% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}

/* Hover xam */
.hover_xam { position:relative; overflow:hidden; }
.hover_xam::before { content:""; background:rgba(255, 255, 255, .5); bottom:0; left:0; position:absolute; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -khtml-opacity:1; -o-opacity:1; -ms-opacity:1; -webkit-opacity:1; -moz-opacity:1; opacity:1; width:0; height:0; z-index:2; }
.hover_xam::after { content:""; background:rgba(255, 255, 255, .5); top:0; right:0; position:absolute; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -khtml-opacity:1; -o-opacity:1; -ms-opacity:1; -webkit-opacity:1; -moz-opacity:1; opacity:1; width:0; height:0; z-index:2; }
.hover_xam:hover::before, .hover_xam:hover::after { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-transition-duration:1.3s; -moz-transition-duration:1.3s; -ms-transition-duration:1.3s; -o-transition-duration:1.3s; transition-duration:1.3s; -khtml-opacity:0; -o-opacity:0; -ms-opacity:0; -webkit-opacity:0; -moz-opacity:0; opacity:0; height:100%; width:100%; }

/* Effect hover underline */
.ef_hover_underline > a:after {content: "";width: 0;height: 3px;background-color: var(--color-main);position: absolute;bottom: 0;left: 0;visibility: hidden;opacity: 0;transition: all 0.4s ease;}
.ef_hover_underline:hover > a:after, .ef_hover_underline > a.active:after {visibility: visible;opacity: 1;width: 100%;}

/* Start effect phone ring ring animation */
.alo-circle-effect{-webkit-animation: alo-circle-img-anim 1s infinite ease-in-out;-moz-animation: alo-circle-img-anim 1s infinite ease-in-out;-ms-animation: alo-circle-img-anim 1s infinite ease-in-out;-o-animation: alo-circle-img-anim 1s infinite ease-in-out;animation: alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;}
@-moz-keyframes alo-circle-img-anim {0% {  transform: rotate(0) scale(1) skew(1deg);}10% {transform: rotate(-25deg) scale(1) skew(1deg);} 20% { transform: rotate(25deg) scale(1) skew(1deg);} 30% { transform: rotate(-25deg) scale(1) skew(1deg);} 40% {  transform: rotate(25deg) scale(1) skew(1deg);} 50% { transform: rotate(0) scale(1) skew(1deg);} 100% { transform: rotate(0) scale(1) skew(1deg);}}
@-webkit-keyframes alo-circle-img-anim { 0% {  transform: rotate(0) scale(1) skew(1deg);} 10% { transform: rotate(-25deg) scale(1) skew(1deg);} 20% {transform: rotate(25deg) scale(1) skew(1deg);} 30% {  transform: rotate(-25deg) scale(1) skew(1deg);} 40% {  transform: rotate(25deg) scale(1) skew(1deg);} 50% { transform: rotate(0) scale(1) skew(1deg);} 100% { transform: rotate(0) scale(1) skew(1deg);}}
@-o-keyframes alo-circle-img-anim { 0% {transform: rotate(0) scale(1) skew(1deg);} 10% { transform: rotate(-25deg) scale(1) skew(1deg);} 20% { transform: rotate(25deg) scale(1) skew(1deg);} 30% { transform: rotate(-25deg) scale(1) skew(1deg);} 40% {transform: rotate(25deg) scale(1) skew(1deg);} 50% { transform: rotate(0) scale(1) skew(1deg);} 100% {transform: rotate(0) scale(1) skew(1deg);}}
@keyframes alo-circle-img-anim { 0% { transform: rotate(0) scale(1) skew(1deg);} 10% { transform: rotate(-25deg) scale(1) skew(1deg);} 20% {transform: rotate(25deg) scale(1) skew(1deg);} 30% {transform: rotate(-25deg) scale(1) skew(1deg);} 40% { transform: rotate(25deg) scale(1) skew(1deg);} 50% {transform: rotate(0) scale(1) skew(1deg);} 100% { transform: rotate(0) scale(1) skew(1deg);}}

/* Effect slide down */
.ef-slide-down{animation: slide-down 0.7s;}
@keyframes slide-down {0% {transform: translateY(-100%);} 100% { transform: translateY(0);}}

/*Hover RotateY */
.hrv-rotateY img { transition: all 0.9s ease 0s !important; }
.hrv-rotateY:hover { text-decoration: none; }
.hrv-rotateY:hover img { transition-delay: 1s; transition: all 0.7s ease 0s; transform: rotateY(180deg); text-decoration: none; }

/* Blink */
.blink { -webkit-animation-name: blink; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blink; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blink; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes blink {	0% { opacity: 1; }	50% { opacity: 0; }	100% { opacity: 1; }}
@-webkit-keyframes blink {	0% { opacity: 1; }50% { opacity: 0; }100% { opacity: 1; }}

/*Shake animation*/
.shake-anim { -webkit-animation: shake-anim 1s infinite ease-in-out; animation: shake-anim 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
@keyframes shake-anim {	0% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); }	10%, 30% { -moz-transform: rotate(-25deg) scale(1) skew(1deg); }	20%, 40% { -moz-transform: rotate(25deg) scale(1) skew(1deg); }	100%, 50% { -moz-transform: rotate(0) scale(1) skew(1deg); }}
@-webkit-keyframes shake-anim {	0%, 100%, 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); }	10%, 30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }	20%, 40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); }}

/* Effect rotate  */
.auto-rotate-effect{-webkit-animation: rotation 60s infinite linear;-moz-animation: rotation 60s infinite linear;-o-animation: rotation 60s infinite linear;-ms-animation: rotation 60s infinite linear;animation: rotation 60s infinite linear;}
@-webkit-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}
@-moz-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}
@-o-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}
@-ms-keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}
@keyframes rotation { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(359deg);}}

/* Mirrored Animation */
.mirrored-effect {position: relative;}
.mirrored-effect:after,.mirrored-effect:before {content: "";position: absolute;top: 50%;width: 10px;height: 100%;transform: translateY(-50%);background-color: rgba(255, 255, 255, .75);z-index: 11;}
.mirrored-effect:after {right: -5%;animation: light-right 2.5s infinite alternate linear;}
.mirrored-effect:before {left: -5%;animation: light-left 2.5s infinite alternate linear;}
@keyframes light-left { 0% {left: -5%;opacity: 0} 50% {left: 50%;opacity: 1} to {left: 105%;opacity: 0}}
@keyframes light-right {0% {right: -5%;opacity: 0 } 50% {right: 50%;opacity: 1} to {right: 105%;opacity: 0}}

/* Mask image  */
/* .mask1{-webkit-mask-image: url('../images/mask1.png');  -webkit-mask-repeat: no-repeat;-webkit-mask-size: 100%;} */

/* Animation keyframes */
@keyframes spin {to { transform: rotate(360deg); }}
@keyframes rotate {from { transform: rotate(0); }to { transform: rotate(360deg); }}
@keyframes fadeup {from { opacity: 0; transform: translateX(-20px); }to { opacity: 1; transform: translateX(0); }}
@keyframes pulse-animation {0% { transform: scale3d(1, 1, 1); opacity: 0; } 10% { transform: scale3d(1.1, 1.1, 1.1); opacity: 1; } 100% { transform: scale3d(1.6, 1.6, 1.6); opacity: 0; }}
@keyframes border-animation { 0% { transform: scale3d(0.6, 0.6, 0.6); opacity: 0; } 20% { transform: scale3d(1.2, 1.2, 1.2); opacity: 1; } 100% { transform: scale3d(1.4, 1.4, 1.4); opacity: 0; } }

/* Effect slide down */
.ef-slide-down{animation: slide-down 0.7s;}
@keyframes slide-down {0% {transform: translateY(-100%);} 100% { transform: translateY(0);}}

/* Effect border rotate  */
.border-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #fff; border-radius: 92% 110% 100% 90%; }
.border-circle:nth-child(1) { -webkit-animation: spin 6s linear infinite; -moz-animation: spin 6s linear infinite; -o-animation: spin 6s linear infinite; animation: spin 6s linear infinite; }
.border-circle:nth-child(2) { -webkit-animation: spin2 6s linear infinite; -moz-animation: spin2 6s linear infinite; -o-animation: spin2 6s linear infinite; animation: spin2 6s linear infinite; }
.border-circle:nth-child(3) { -webkit-animation: spin3 6s linear infinite; -moz-animation: spin3 6s linear infinite; -o-animation: spin3 6s linear infinite; animation: spin3 6s linear infinite; }
.border-circle:nth-child(4) { -webkit-animation: spin4 6s linear infinite; -moz-animation: spin4 6s linear infinite; -o-animation: spin4 6s linear infinite; animation: spin4 6s linear infinite; }
@keyframes spin {
from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin2 {
from { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }
to { -webkit-transform: rotate(-288deg); -moz-transform: rotate(-288deg); -ms-transform: rotate(-288deg); -o-transform: rotate(-288deg); transform: rotate(-288deg); }
}
@keyframes spin3 {
from { -webkit-transform: rotate(-144deg); -moz-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); }
to { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
}
@keyframes spin4 {
from { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); }
to { -webkit-transform: rotate(-144deg); -moz-transform: rotate(-144deg); -ms-transform: rotate(-144deg); -o-transform: rotate(-144deg); transform: rotate(-144deg); }
}

/* Effect img move change  */
.moveImgEffect { min-height: 417px; }
.moveImgEffect .targetMoveImg:nth-child(1) { animation-name: changprd; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; position: absolute; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }
.moveImgEffect .targetMoveImg:nth-child(2) { animation-name: changprd1; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; position: absolute; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }
@keyframes changprd {  0% { left: 0%; top: 0%; z-index: 2; }  50% { left: 40%; top: 0%; }  100% { left: 0%; top: 0%; z-index: 1; }}
@keyframes changprd1 {  0% { right: 0%; bottom: 0px; left: unset; z-index: 1; }  50% { right: 50%; bottom: 0px; left: unset; }  100% { right: 0%; bottom: 0px; left: unset; z-index: 2; }}

/* Effect change slide zoom in  */
.targetImgRunAnimation img { -webkit-animation: zoom 30s; animation: zoom 30s; }
.targetParentRunAnimation .swiper-slide-active .targetImgRunAnimation img { -webkit-transform: scale(1); transform: scale(1); -webkit-animation: cssAnimation 8s 1 ease-in-out forwards; animation: cssAnimation 8s 1 ease-in-out forwards; }
@keyframes cssAnimation { from { -webkit-transform: scale(1) translate(0px); } to { -webkit-transform: scale(1.2) translate(0px); } }
@-webkit-keyframes cssAnimation { from { -webkit-transform: scale(1) translate(0px); } to { -webkit-transform: scale(1.2) translate(0px); } }

/* Marquee animation  */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; animation: scroll 10s linear infinite; }
@keyframes scroll {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}

/* Notify phone effect  */
.notify-phone { animation: notifyPhone 1s infinite ease-in-out }
@keyframes notifyPhone {
0% { transform: rotate(0) scale(1) skew(1deg) }
10% { transform: rotate(-25deg) scale(1) skew(1deg) }
20% { transform: rotate(25deg) scale(1) skew(1deg) }
30% { transform: rotate(-25deg) scale(1) skew(1deg) }
40% { transform: rotate(25deg) scale(1) skew(1deg) }
50% { transform: rotate(0) scale(1) skew(1deg) }
100% { transform: rotate(0) scale(1) skew(1deg) }
}

/* Border run  */
/* animation: lineRun 2s linear infinite; */
@keyframes lineRun {0% {clip-path:inset(0% 100% 0% 0%)}25% {clip-path:inset(0% 0% 100% 0%)}50% {clip-path:inset(0% 0% 0% 100%)}75% {clip-path:inset(100% 0% 0% 0%)}100% {clip-path:inset(0% 100% 0% 0%)}}

/* ===== End My Effect ===== */