@charset "UTF-8";
:root { --primary: #00D9A3;
--primary-dark: #00B88A;
--secondary: #1E3A5F;
--secondary-dark: #152A45;
--accent: #FF6B6B;
--white: #FFFFFF;
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-600: #4B5563;
--gray-800: #1F2937;
--gray-900: #111827; --gradient-primary: linear-gradient(135deg, #00D9A3 0%, #00B88A 100%);
--gradient-hero: linear-gradient(135deg, #0A1628 0%, #1E3A5F 50%, #2A5A8F 100%);
--gradient-text: linear-gradient(135deg, #00D9A3 0%, #00B88A 50%, #1E3A5F 100%); --gradient-text-animated: linear-gradient(
90deg,
#00D9A3 0%,
#00F5C4 20%,
#00D9A3 40%,
#1E3A5F 60%,
#00B88A 80%,
#00D9A3 100%
);
--gradient-text-holographic: linear-gradient(
135deg,
#00FFD1 0%,
#00D9A3 20%,
#7B68EE 40%,
#1E3A5F 60%,
#00B88A 80%,
#00FFD1 100%
); --gradient-text-light: linear-gradient(
90deg,
#00D9A3 0%,
#00F5C4 25%,
#FFFFFF 50%,
#00F5C4 75%,
#00D9A3 100%
);
--gradient-text-light-warm: linear-gradient(
90deg,
#00D9A3 0%,
#5FFFDA 30%,
#FFFFFF 50%,
#5FFFDA 70%,
#00D9A3 100%
); --nav-height: 0px; --spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-glow: 0 0 30px rgba(0, 217, 163, 0.3); --radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
--radius-full: 9999px; --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
} * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; -ms-overflow-style: none;
scrollbar-width: none;
}
html::-webkit-scrollbar {
display: none;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--gray-800);
overflow: hidden;
width: 100vw;
max-width: 100vw; -ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: var(--gray-900);
}
a {
color: inherit;
text-decoration: none;
transition: all var(--transition);
} .modern-nav {
position: fixed;
top: 1rem;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
height: auto;
padding: 0.625rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem; background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 100px;
box-shadow: 
0 8px 32px rgba(0, 0, 0, 0.1),
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.2); animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1); max-width: 95%;
width: auto;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateX(-50%) translateY(-20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
} .nav-brand {
display: flex;
align-items: center;
padding: 0.5rem 1.25rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-brand:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.2);
}
.brand-logo {
height: auto;
width: 160px;
max-height: 36px;
display: block;
object-fit: contain;
transition: all 0.3s ease;
}
.nav-brand:hover .brand-logo {
filter: drop-shadow(0 2px 8px rgba(0, 217, 163, 0.3));
} .brand-icon {
font-size: 1.25rem;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
} .nav-menu {
display: flex;
gap: 0.625rem;
align-items: center;
}
.nav-link {
position: relative;
font-weight: 600;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
padding: 0.5rem 0.875rem;
border-radius: 50px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.nav-link::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50px;
background: rgba(255, 255, 255, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-link:hover::before {
opacity: 1;
}
.nav-link:hover {
color: var(--white);
transform: translateY(-1px);
}
.nav-link.active {
color: var(--white);
background: rgba(0, 217, 163, 0.2);
box-shadow: 
0 0 20px rgba(0, 217, 163, 0.3),
inset 0 0 20px rgba(0, 217, 163, 0.1);
}
.nav-link.active::after {
display: none;
} .nav-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.5rem;
background: var(--gradient-primary);
color: var(--white);
font-weight: 600;
font-size: 0.875rem;
border-radius: 50px;
box-shadow:
0 4px 12px rgba(0, 217, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.nav-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.nav-cta:hover::before {
opacity: 1;
}
.nav-cta:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 
0 8px 20px rgba(0, 217, 163, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.nav-cta svg {
transition: transform 0.3s ease;
}
.nav-cta:hover svg {
transform: translateX(3px);
} .whatsapp-float {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 998;
width: 56px;
height: 56px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: var(--white);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg), 0 0 25px rgba(37, 211, 102, 0.4);
animation: pulse-float 2s infinite;
}
@keyframes pulse-float {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.whatsapp-float:hover {
transform: scale(1.1);
} .section {
position: relative;
width: 100vw;
max-width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: var(--nav-height);
} .fp-overflow {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} .fp-overflow {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
} .section .section-badge,
.section .section-title,
.section .service-card,
.section .portfolio-card,
.section .process-step,
.section .process-cta,
.section .testimonial-card,
.section .contact-method,
.section .contact-form {
opacity: 0;
} .section[data-anchor="accueil"] .hero-badge,
.section[data-anchor="accueil"] .hero-title,
.section[data-anchor="accueil"] .hero-subtitle,
.section[data-anchor="accueil"] .hero-cta,
.section[data-anchor="accueil"] .hero-stats {
opacity: 1 !important;
} .section.animated .section-badge,
.section.animated .section-title,
.section.animated .service-card,
.section.animated .portfolio-card,
.section.animated .process-step,
.section.animated .process-cta,
.section.animated .testimonial-card,
.section.animated .contact-method,
.section.animated .contact-form {
opacity: 1 !important;
} .section-badge,
.section-title,
.service-card,
.portfolio-card,
.process-step,
.process-cta,
.testimonial-card,
.contact-method,
.contact-form {
transition: none !important;
}
.section-content {
max-width: 1400px;
width: 100%;
height: calc(100vh - var(--nav-height) - 40px);
padding: 80px 2rem 0 2rem; display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
overflow-x: hidden; -ms-overflow-style: none;
scrollbar-width: none;
} .section-content::-webkit-scrollbar {
display: none;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.section-badge {
display: inline-block;
padding: 0.375rem 1rem;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.1) 0%, rgba(30, 58, 95, 0.1) 100%);
border: 1px solid rgba(0, 217, 163, 0.2);
border-radius: var(--radius-full);
color: var(--primary);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: var(--spacing-sm);
}
.section-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 900;
line-height: 1.1;
margin-bottom: var(--spacing-sm);
position: relative;
} .light-title {
color: var(--white);
text-shadow: 
0 2px 10px rgba(0, 0, 0, 0.3),
0 0 15px rgba(0, 217, 163, 0.08);
} .gradient-text {
background: var(--gradient-text-animated);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientFlow 8s ease infinite;
position: relative;
display: inline-block;
font-weight: 900; filter: drop-shadow(0 0 15px rgba(0, 255, 209, 0.25))
drop-shadow(0 0 25px rgba(0, 217, 163, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.3));
} @keyframes gradientFlow {
0%, 100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 15px rgba(0, 255, 209, 0.25))
drop-shadow(0 0 25px rgba(0, 217, 163, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.3));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 18px rgba(0, 255, 209, 0.35))
drop-shadow(0 0 30px rgba(0, 217, 163, 0.2))
drop-shadow(0 1px 6px rgba(0, 217, 163, 0.4));
}
} .gradient-text-holographic {
background: var(--gradient-text-holographic);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: holographicShift 6s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900;
}
@keyframes holographicShift {
0%, 100% {
background-position: 0% 50%;
filter: drop-shadow(0 0 15px rgba(0, 255, 209, 0.2))
drop-shadow(0 0 25px rgba(123, 104, 238, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.3));
}
50% {
background-position: 100% 50%;
filter: drop-shadow(0 0 18px rgba(123, 104, 238, 0.25))
drop-shadow(0 0 28px rgba(0, 255, 209, 0.2))
drop-shadow(0 1px 5px rgba(123, 104, 238, 0.35));
}
} .gradient-text-pulse {
background: var(--gradient-text-animated);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientPulse 4s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900;
}
@keyframes gradientPulse {
0%, 100% {
filter: drop-shadow(0 0 12px rgba(0, 255, 209, 0.2))
drop-shadow(0 0 20px rgba(0, 217, 163, 0.15))
drop-shadow(0 1px 4px rgba(0, 217, 163, 0.25));
}
50% {
filter: drop-shadow(0 0 20px rgba(0, 255, 209, 0.35))
drop-shadow(0 0 35px rgba(0, 217, 163, 0.25))
drop-shadow(0 1px 8px rgba(0, 217, 163, 0.4));
}
}  .gradient-text-light {
background: linear-gradient(
90deg,
#00D9A3 0%,
#00D9A3 20%,
#5FFFDA 35%,
#FFFFFF 50%,
#5FFFDA 65%,
#00D9A3 80%,
#00D9A3 100%
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: lightSweep 4s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900; filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.3))
drop-shadow(0 0 30px rgba(0, 255, 209, 0.2))
drop-shadow(0 1px 5px rgba(255, 255, 255, 0.4));
} @keyframes lightSweep {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} .gradient-text-light-warm {
background: linear-gradient(
90deg,
#00D9A3 0%,
#00D9A3 15%,
#5FFFDA 30%,
#AFFFEF 40%,
#FFFFFF 50%,
#AFFFEF 60%,
#5FFFDA 70%,
#00D9A3 85%,
#00D9A3 100%
);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: lightSweepWarm 3.5s ease-in-out infinite;
position: relative;
display: inline-block;
font-weight: 900; filter: drop-shadow(0 0 20px rgba(95, 255, 218, 0.35))
drop-shadow(0 0 35px rgba(255, 255, 255, 0.25))
drop-shadow(0 1px 6px rgba(0, 217, 163, 0.3));
} @keyframes lightSweepWarm {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} .hero-section {
background: var(--gradient-hero);
color: var(--white);
padding-top: var(--nav-height);
}
.particles {
position: absolute;
inset: 0;
background: 
radial-gradient(circle at 20% 50%, rgba(0, 217, 163, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(30, 58, 95, 0.2) 0%, transparent 50%);
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 1rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
margin-bottom: var(--spacing-sm);
}
.pulse-dot {
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--white);
margin-bottom: var(--spacing-sm);
line-height: 1.1; text-shadow: 
0 0 20px rgba(0, 217, 163, 0.15),
0 0 40px rgba(0, 217, 163, 0.08);
animation: titleGlow 4s ease-in-out infinite;
}
@keyframes titleGlow {
0%, 100% {
text-shadow: 
0 0 20px rgba(0, 217, 163, 0.15),
0 0 40px rgba(0, 217, 163, 0.08);
}
50% {
text-shadow: 
0 0 25px rgba(0, 217, 163, 0.22),
0 0 50px rgba(0, 217, 163, 0.12);
}
}
.hero-subtitle {
font-size: clamp(0.875rem, 1.5vw, 1rem);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--spacing-md);
line-height: 1.5;
}
.hero-cta {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
margin-bottom: var(--spacing-md);
}
.hero-stats {
display: flex;
gap: var(--spacing-xl);
justify-content: center;
padding-top: var(--spacing-md);
border-top: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
}
.stat {
text-align: center;
min-width: 100px;
}
.stat-number {
font-size: 1.75rem;
font-weight: 900;
color: var(--primary);
line-height: 1;
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
letter-spacing: 0.05em;
} .scroll-indicator {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
color: rgba(255, 255, 255, 0.6);
font-size: 0.625rem;
text-transform: uppercase;
letter-spacing: 0.1em;
z-index: 10;
}
.mouse {
width: 20px;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
position: relative;
}
.wheel {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 6px;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-full);
animation: scroll-down 2s infinite;
}
@keyframes scroll-down {
0% { opacity: 1; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
} .services-section {
background: var(--gray-50);
} .services-section .section-content {
padding-top: 60px;
}
.services-section .section-header {
margin-bottom: var(--spacing-sm);
}
.services-section .section-title {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 0.25rem;
}
.services-section .section-badge {
margin-bottom: var(--spacing-xs);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-sm);
max-width: 100%;
}
.service-card {
position: relative;
padding: var(--spacing-md);
background: var(--white);
border-radius: var(--radius-lg);
border: 2px solid var(--gray-200);
transition: all var(--transition);
overflow: visible;
}
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
.service-card.featured {
background: var(--gradient-hero);
color: var(--white);
border: none;
box-shadow: var(--shadow-lg), var(--shadow-glow);
}
.service-card.featured h3,
.service-card.featured p {
color: var(--white);
}
.featured-tag {
position: absolute;
top: -10px;
right: 12px;
z-index: 10;
padding: 0.35rem 0.75rem;
background: var(--gradient-primary);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
}
.service-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.1) 0%, rgba(30, 58, 95, 0.1) 100%);
border-radius: var(--radius-md);
color: var(--primary);
margin-bottom: var(--spacing-xs);
transition: all var(--transition);
}
.service-icon svg {
width: 24px;
height: 24px;
}
.service-card:hover .service-icon {
transform: scale(1.1);
}
.service-card.featured .service-icon {
color: var(--white);
}
.service-card h3 {
font-size: 0.9375rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.service-card p {
color: var(--gray-600);
font-size: 0.8125rem;
line-height: 1.4;
} .process-section {
background: var(--white);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
max-width: 100%;
margin-bottom: var(--spacing-lg);
}
.process-step {
text-align: center;
padding: var(--spacing-lg);
background: var(--gray-50);
border-radius: var(--radius-lg);
border: 2px solid var(--gray-200);
transition: all var(--transition);
}
.process-step:hover {
transform: translateY(-3px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.step-number {
width: 48px;
height: 48px;
margin: 0 auto var(--spacing-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 900;
color: var(--white);
background: var(--gradient-primary);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md), var(--shadow-glow);
}
.process-step h3 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.375rem;
}
.process-step p {
color: var(--gray-600);
font-size: 0.875rem;
}
.process-cta {
text-align: center;
padding: var(--spacing-lg);
background: var(--gradient-hero);
border-radius: var(--radius-xl);
color: var(--white);
}
.process-cta h3 {
color: var(--white);
font-size: 1.25rem;
margin-bottom: var(--spacing-sm);
} .contact-section {
background: var(--gray-50);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--spacing-xl);
align-items: start;
}
.contact-info .section-title {
text-align: left;
margin-bottom: var(--spacing-md);
}
.contact-info .section-badge {
margin-bottom: var(--spacing-sm);
}
.contact-methods {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.contact-method {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--white);
border-radius: var(--radius-md);
border: 2px solid var(--gray-200);
transition: all var(--transition);
}
.contact-method:hover {
border-color: var(--primary);
box-shadow: var(--shadow-sm);
}
.method-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-100);
border-radius: var(--radius-md);
color: var(--primary);
}
.method-icon.whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: var(--white);
}
.method-label {
font-size: 0.75rem;
color: var(--gray-600);
margin-bottom: 0.125rem;
}
.method-value {
font-weight: 700;
color: var(--gray-900);
font-size: 0.875rem;
} .contact-form {
padding: var(--spacing-lg);
background: var(--white);
border-radius: var(--radius-xl);
border: 2px solid var(--gray-200);
box-shadow: var(--shadow-md);
}
.form-group {
position: relative;
margin-bottom: var(--spacing-md);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.875rem;
font-family: inherit;
border: 2px solid var(--gray-200);
border-radius: var(--radius-md);
background: var(--white);
transition: all var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.1);
}
.form-group label {
position: absolute;
left: 1rem;
top: 0.75rem;
font-size: 0.875rem;
color: var(--gray-600);
pointer-events: none;
transition: all var(--transition);
}
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group input:focus + label,
.form-group textarea:focus + label {
top: -0.5rem;
left: 0.75rem;
font-size: 0.625rem;
background: var(--white);
padding: 0 0.375rem;
color: var(--primary);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-sm);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.form-message {
margin-top: var(--spacing-sm);
padding: 0.75rem;
border-radius: var(--radius-md);
text-align: center;
font-weight: 600;
font-size: 0.875rem;
display: none;
}
.form-message.success {
display: block;
background: rgba(0, 217, 163, 0.1);
color: var(--primary-dark);
border: 2px solid var(--primary);
}
.form-message.error {
display: block;
background: rgba(255, 107, 107, 0.1);
color: #D84343;
border: 2px solid var(--accent);
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 2rem;
font-size: 1rem;
font-weight: 500;
font-family: inherit;
border-radius: 12px;
border: none;
cursor: pointer;
transition: all var(--transition);
} .btn svg,
.nav-cta svg,
.modal-cta svg,
.card-cta svg {
fill: none;
stroke: currentColor;
color: inherit;
}
.btn-primary {
background: #00D9A3;
color: var(--white);
box-shadow: none;
border: none;
}
.btn-primary:hover {
background: #00F5B8;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.4);
color: var(--white);
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.btn-full {
width: 100%;
} .modern-footer {
padding: 1rem 0;
text-align: center;
color: var(--gray-600);
font-size: 0.75rem;
} #fp-nav {
z-index: 100 !important;
}
#fp-nav ul li a span {
background: var(--primary) !important;
} #fullpage::-webkit-scrollbar,
.fp-section::-webkit-scrollbar,
.fp-tableCell::-webkit-scrollbar,
.fp-scrollable::-webkit-scrollbar {
display: none;
}
#fullpage,
.fp-section,
.fp-tableCell,
.fp-scrollable {
-ms-overflow-style: none;
scrollbar-width: none;
}  @media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 1024px) { .modern-nav {
padding: 0.5rem 1rem;
gap: 1.25rem;
}
.nav-brand {
padding: 0.3rem 0.75rem;
}
.brand-logo {
width: 110px;
max-height: 24px;
}
.nav-menu {
gap: 0.25rem;
}
.nav-link {
padding: 0.3rem 0.625rem;
font-size: 0.75rem;
}
.nav-cta {
padding: 0.4rem 0.875rem;
font-size: 0.75rem;
} .section {
height: auto !important;
min-height: 100vh;
}
.section-content {
padding: 80px 1.5rem 40px 1.5rem;
height: auto !important;
min-height: calc(100vh - 120px);
} .hero-content {
padding: 0 1rem;
}
.hero-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
.hero-subtitle {
font-size: 0.9375rem;
} .services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.service-card {
padding: var(--spacing-md);
} .process-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
} .contact-grid {
gap: var(--spacing-lg);
}
} @media (max-width: 768px) { html, body {
overflow: visible !important;
} .section {
height: auto !important;
min-height: 100vh;
overflow: visible !important;
}
.fp-overflow {
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.section-content {
height: auto !important;
min-height: auto;
padding: 80px 20px 40px 20px; overflow: visible !important;
} .section:not(.hero-section) .fp-tableCell {
vertical-align: top !important;
}
.section:not(.hero-section) {
justify-content: flex-start !important;
}
.section:not(.hero-section) .fp-overflow {
display: block !important;
justify-content: flex-start !important;
} .modern-nav {
padding: 0.4rem 0.75rem;
gap: 0.75rem;
top: 0.5rem;
max-width: calc(100% - 1rem);
}
.nav-brand {
padding: 0.25rem 0.5rem;
}
.brand-logo {
width: 90px;
max-height: 20px;
}
.nav-menu {
display: none;
}
.nav-cta {
padding: 0.4rem 0.75rem;
font-size: 0.75rem;
gap: 0.25rem;
min-height: 36px;
} #fp-nav {
right: 0.5rem !important;
top: auto !important;
bottom: 80px !important;
transform: none !important;
}
#fp-nav ul li {
margin: 5px 0;
}
#fp-nav ul li a span {
width: 8px !important;
height: 8px !important;
} .hero-section .section-content {
padding: 70px 20px 30px 20px;
justify-content: center;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.hero-content {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 100%;
} .hero-badge {
font-size: 0.75rem; padding: 0.375rem 0.875rem;
margin-bottom: 20px; gap: 0.375rem;
}
.hero-badge .pulse-dot {
width: 5px;
height: 5px;
} .hero-title {
font-size: 1.75rem; line-height: 1.2;
margin-bottom: 15px; padding: 0 5px;
}
.hero-title br {
display: none; } .hero-subtitle {
font-size: 0.875rem; line-height: 1.5;
margin-bottom: 30px; padding: 0 10px;
color: rgba(255, 255, 255, 0.85);
max-width: 100%;
}
.hero-subtitle br {
display: none; } .hero-cta {
flex-direction: column;
width: 100%;
gap: 15px; margin-bottom: 40px; align-items: center;
}
.hero-cta .btn {
width: 100%;
max-width: 350px;
min-height: 50px; padding: 15px 25px;
font-size: 1rem; border-radius: var(--radius-lg);
justify-content: center;
}
.hero-cta .btn-primary {
order: 1;
}
.hero-cta .btn-secondary {
order: 2;
} .hero-stats {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px 30px;
padding-top: 20px;
width: 100%;
}
.stat {
min-width: 80px;
text-align: center;
flex: 0 0 auto;
}
.stat-number {
font-size: 1.5rem; font-weight: 900;
line-height: 1;
margin-bottom: 4px;
}
.stat-label {
font-size: 0.75rem; line-height: 1.3;
color: rgba(255, 255, 255, 0.7);
} .scroll-indicator {
display: none;
} .hero-section .particles {
opacity: 0.5; } .whatsapp-float {
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
}
.whatsapp-float svg {
width: 24px;
height: 24px;
}  .services-section .fp-tableCell {
vertical-align: top !important; padding-top: 0 !important;
}
.services-section .fp-overflow {
display: block !important;
justify-content: flex-start !important;
}  .services-section .fp-overflow,
.services-section .fp-overflow > .fp-scrollable {
padding-bottom: 400px !important;
box-sizing: border-box !important;
} .services-section .fp-overflow::after,
.services-section .fp-scrollable::after {
content: "";
display: block;
height: 400px;
width: 100%;
flex-shrink: 0;
} .services-section {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
.services-section .section-content {
padding-top: 100px !important; padding-bottom: 80px !important; padding-left: 20px;
padding-right: 20px;
justify-content: flex-start !important;
align-items: stretch;
margin-top: 0 !important;
transform: none !important;
position: relative !important;
top: 0 !important;
}
.services-section .section-header {
margin-bottom: 30px; }
.services-section .section-title {
font-size: 1.375rem;
}
.services-grid {
grid-template-columns: 1fr;
gap: 20px; }
.service-card {
padding: var(--spacing-md);
}
.service-card h3 {
font-size: 1rem;
}
.service-card p {
font-size: 0.8125rem;
}  .services-section .services-grid .service-card:last-child,
.services-section .services-grid .service-card:nth-child(6),
.services-section .service-card[data-service="support-maintenance"] {
margin-bottom: 80px !important;
}
.service-icon {
width: 36px;
height: 36px;
}
.service-icon svg {
width: 20px;
height: 20px;
}
.featured-tag {
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
top: -8px;
right: 8px;
}
.card-cta {
font-size: 0.75rem;
white-space: nowrap; justify-content: flex-start;
padding-top: 0.625rem;
margin-top: 0.625rem;
opacity: 1; }
.card-cta span {
flex-shrink: 0;
}
.card-cta svg {
width: 14px;
height: 14px;
flex-shrink: 0;
} .portfolio-carousel {
flex-direction: column;
gap: var(--spacing-sm);
}
.portfolio-track-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.portfolio-track {
gap: var(--spacing-md);
}
.portfolio-card {
flex: 0 0 85%;
min-width: 85%;
}
.portfolio-image {
height: 140px;
}
.portfolio-info {
padding: var(--spacing-md);
}
.portfolio-info h3 {
font-size: 1rem;
}
.portfolio-info p {
font-size: 0.8125rem;
}
.portfolio-tags span {
font-size: 0.625rem;
padding: 0.2rem 0.5rem;
} .carousel-btn {
width: 36px;
height: 36px;
}
.carousel-btn svg {
width: 16px;
height: 16px;
} .carousel-prev,
.carousel-next {
display: none;
}  .portfolio-section .carousel-btn.portfolio-prev,
.portfolio-section .carousel-btn.portfolio-next,
.swiper-slide[data-anchor="portfolio"] .carousel-btn.portfolio-prev,
.swiper-slide[data-anchor="portfolio"] .carousel-btn.portfolio-next {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
opacity: 0 !important;
}
.carousel-dots {
margin-top: var(--spacing-md);
}
.carousel-dot {
width: 8px;
height: 8px;
} .process-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.process-step {
padding: var(--spacing-md);
text-align: left;
display: flex;
gap: var(--spacing-md);
align-items: flex-start;
}
.step-number {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 1rem;
margin: 0;
}
.process-step h3 {
font-size: 0.9375rem;
margin-bottom: 0.25rem;
}
.process-step p {
font-size: 0.8125rem;
}
.process-cta {
padding: var(--spacing-md);
margin-top: var(--spacing-sm);
}
.process-cta h3 {
font-size: 1rem;
margin-bottom: var(--spacing-sm);
} .testimonials-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.testimonial-card {
padding: var(--spacing-md);
}
.testimonial-text {
font-size: 0.875rem;
}
.stars {
font-size: 1rem;
}
.author-avatar {
width: 40px;
height: 40px;
font-size: 0.875rem;
} .google-reviews-carousel {
flex-direction: column;
}
.reviews-track-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 0 0.5rem;
}
.google-review-card {
flex: 0 0 82%; min-width: 82%;
padding: var(--spacing-md);
scroll-snap-align: center;
}
.reviewer-avatar {
width: 40px;
height: 40px;
font-size: 1rem;
}
.reviewer-name {
font-size: 0.9375rem;
}
.review-text {
font-size: 0.875rem;
}
.google-rating-badge {
padding: var(--spacing-xs) var(--spacing-md);
}
.rating-number {
font-size: 1.25rem;
}
.reviews-prev,
.reviews-next {
display: none;
}  .contact-section .fp-tableCell {
vertical-align: top !important;
} .contact-section {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
.contact-section .section-content {
width: 100% !important;
max-width: 100% !important;
padding: 100px 20px 80px 20px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
} .contact-grid {
grid-template-columns: 1fr !important;
gap: 25px !important;
width: 100% !important;
max-width: 100% !important;
} .contact-info {
width: 100% !important;
max-width: 100% !important;
text-align: center;
}
.contact-info .section-title {
font-size: 1.375rem;
text-align: center;
}
.contact-info .section-badge {
display: block;
text-align: center;
}
.contact-methods {
gap: var(--spacing-sm);
width: 100% !important;
}
.contact-method {
padding: var(--spacing-sm) var(--spacing-md);
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.method-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.method-label {
font-size: 0.6875rem;
}
.method-value {
font-size: 0.8125rem;
word-break: break-word;
} .contact-form {
width: 100% !important;
max-width: 100% !important;
padding: var(--spacing-md) !important;
box-sizing: border-box !important;
margin: 0 auto !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.contact-form button,
.contact-form .btn {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.form-row {
grid-template-columns: 1fr !important;
gap: var(--spacing-sm) !important;
} .modern-footer {
width: 100% !important;
padding: 15px 20px !important;
text-align: center !important;
font-size: 0.75rem !important;
box-sizing: border-box !important;
}
.form-group {
margin-bottom: var(--spacing-sm);
}
.form-group input,
.form-group textarea {
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
}
.form-group label {
font-size: 0.8125rem;
}
.form-row {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.form-group textarea {
min-height: 100px;
} .modern-footer {
padding: var(--spacing-md) var(--spacing-sm);
font-size: 0.6875rem;
} .whatsapp-float {
bottom: 1rem;
right: 1rem;
width: 48px;
height: 48px;
}
.whatsapp-float svg {
width: 24px;
height: 24px;
} .section-badge {
font-size: 0.625rem;
padding: 0.3rem 0.75rem;
}
.section-title {
font-size: 1.375rem;
}
.light-title {
font-size: 1.375rem;
}
} @media (max-width: 480px) {
:root {
--spacing-xs: 0.375rem;
--spacing-sm: 0.5rem;
--spacing-md: 0.75rem;
--spacing-lg: 1rem;
--spacing-xl: 1.5rem;
} .modern-nav {
padding: 0.3rem 0.5rem;
gap: 0.375rem;
top: 0.375rem;
}
.nav-brand {
padding: 0.2rem 0.375rem;
}
.brand-logo {
width: 80px;
max-height: 18px;
}
.nav-cta {
padding: 0.35rem 0.625rem;
font-size: 0.6875rem;
min-height: 32px;
}
.nav-cta span {
display: none; }
.nav-cta svg {
width: 16px;
height: 16px;
} .section-content {
padding: 65px 16px 35px 16px;
} .hero-section .section-content {
padding: 60px 16px 25px 16px;
}
.hero-content {
padding: 0;
} .hero-badge {
font-size: 0.6875rem; padding: 0.3rem 0.75rem;
margin-bottom: 16px;
} .hero-title {
font-size: 1.5rem; line-height: 1.25;
margin-bottom: 12px;
padding: 0;
} .hero-subtitle {
font-size: 0.8125rem; line-height: 1.5;
margin-bottom: 25px;
padding: 0 5px;
} .hero-cta {
gap: 12px;
margin-bottom: 35px;
}
.hero-cta .btn {
max-width: 300px;
min-height: 48px;
padding: 12px 20px;
font-size: 0.9375rem; } .hero-stats {
gap: 15px 25px;
padding-top: 18px;
}
.stat {
min-width: 75px;
}
.stat-number {
font-size: 1.375rem; }
.stat-label {
font-size: 0.6875rem; } .services-section .fp-tableCell {
vertical-align: top !important;
}
.services-section .section-content {
padding-top: 90px !important;
padding-bottom: 100px !important; padding-left: 16px;
padding-right: 16px;
justify-content: flex-start !important;
margin-top: 0 !important;
transform: none !important;
}
.services-section .section-header {
margin-bottom: 25px;
}
.services-grid {
gap: 16px;
}
.service-card {
padding: var(--spacing-sm);
}
.service-card h3 {
font-size: 0.9375rem;
}
.service-card p {
font-size: 0.75rem;
} .portfolio-card {
flex: 0 0 90%;
min-width: 90%;
}
.portfolio-image {
height: 120px;
} .step-number {
width: 36px;
height: 36px;
min-width: 36px;
font-size: 0.875rem;
} .section-title,
.light-title {
font-size: 1.25rem;
}
.section-badge {
font-size: 0.5625rem;
} .contact-section .section-content {
padding: 90px 16px 70px 16px !important;
}
.contact-form {
padding: var(--spacing-sm) !important;
}
.contact-method {
padding: 10px 12px !important;
}
.method-value {
font-size: 0.75rem !important;
} #fp-nav {
right: 0.375rem !important;
bottom: 70px !important;
}
#fp-nav ul li a span {
width: 6px !important;
height: 6px !important;
} .whatsapp-float {
width: 48px;
height: 48px;
bottom: 16px;
right: 16px;
}
.whatsapp-float svg {
width: 22px;
height: 22px;
} .hero-section .particles {
opacity: 0.3;
}
} @media (max-width: 375px) { .modern-nav {
padding: 0.25rem 0.4rem;
gap: 0.25rem;
top: 0.25rem;
}
.nav-brand {
padding: 0.15rem 0.3rem;
}
.brand-logo {
width: 70px;
max-height: 16px;
}
.nav-cta {
padding: 0.3rem 0.5rem;
min-height: 30px;
} .section-content {
padding: 55px 12px 30px 12px;
} .hero-section .section-content {
padding: 55px 12px 20px 12px;
} .hero-badge {
font-size: 0.625rem; padding: 0.25rem 0.625rem;
margin-bottom: 14px;
gap: 0.25rem;
}
.hero-badge .pulse-dot {
width: 4px;
height: 4px;
} .hero-title {
font-size: 1.375rem; line-height: 1.2;
margin-bottom: 10px;
} .hero-subtitle {
font-size: 0.75rem; line-height: 1.5;
margin-bottom: 22px;
padding: 0;
} .hero-cta {
gap: 10px;
margin-bottom: 30px;
}
.hero-cta .btn {
max-width: 280px;
min-height: 46px;
padding: 10px 18px;
font-size: 0.875rem; } .hero-stats {
flex-direction: column;
gap: 12px;
padding-top: 15px;
align-items: center;
}
.stat {
min-width: auto;
width: 100%;
max-width: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stat:last-child {
border-bottom: none;
}
.stat-number {
font-size: 1.25rem; }
.stat-label {
font-size: 0.625rem; } .services-section .fp-tableCell {
vertical-align: top !important;
}
.services-section .section-content {
padding-top: 85px !important;
padding-bottom: 100px !important; padding-left: 12px;
padding-right: 12px;
justify-content: flex-start !important;
margin-top: 0 !important;
transform: none !important;
}
.services-section .section-header {
margin-bottom: 20px;
}
.services-grid {
gap: 14px;
} .contact-section .section-content {
padding: 85px 12px 60px 12px !important;
}
.contact-grid {
gap: 20px !important;
}
.contact-form {
padding: 12px !important;
}
.contact-method {
padding: 8px 10px !important;
}
.method-icon {
width: 32px !important;
height: 32px !important;
}
.method-value {
font-size: 0.6875rem !important;
}
.contact-info .section-title {
font-size: 1.125rem !important;
} .section-title,
.light-title {
font-size: 1.125rem;
}
.section-badge {
font-size: 0.5rem;
} .whatsapp-float {
width: 44px;
height: 44px;
bottom: 12px;
right: 12px;
}
.whatsapp-float svg {
width: 20px;
height: 20px;
} .hero-section .particles {
display: none;
} #fp-nav {
right: 0.25rem !important;
bottom: 60px !important;
}
#fp-nav ul li a span {
width: 5px !important;
height: 5px !important;
}
} @media (max-width: 768px) and (orientation: landscape) {
.section-content {
padding-top: 50px;
padding-bottom: 20px;
} .hero-section .section-content {
padding: 45px 20px 15px 20px;
min-height: 100vh;
}
.hero-content {
padding: 0 10px;
}
.hero-badge {
margin-bottom: 10px;
font-size: 0.625rem;
}
.hero-title {
font-size: 1.25rem;
margin-bottom: 8px;
}
.hero-subtitle {
font-size: 0.75rem;
margin-bottom: 15px;
} .hero-cta {
flex-direction: row;
gap: 12px;
margin-bottom: 15px;
}
.hero-cta .btn {
width: auto;
flex: 1;
max-width: 200px;
min-height: 40px;
padding: 8px 16px;
font-size: 0.8125rem;
} .hero-stats {
flex-direction: row;
flex-wrap: nowrap;
gap: 30px;
padding-top: 12px;
}
.stat {
min-width: auto;
border-bottom: none !important;
padding: 0;
}
.stat-number {
font-size: 1.125rem;
}
.stat-label {
font-size: 0.5625rem;
} .scroll-indicator {
display: none;
} .hero-section .particles {
opacity: 0.3;
} .whatsapp-float {
width: 40px;
height: 40px;
bottom: 10px;
right: 10px;
}
.whatsapp-float svg {
width: 18px;
height: 18px;
} .services-grid,
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
}  .service-card.clickable {
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: visible;
}
.service-card.clickable::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.05) 0%, rgba(30, 58, 95, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card.clickable:hover::before {
opacity: 1;
}
.service-card.clickable:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 
0 20px 40px rgba(0, 0, 0, 0.15),
0 0 40px rgba(0, 217, 163, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
} .card-cta {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: var(--primary);
font-weight: 600;
font-size: 0.75rem;
opacity: 0.8;
transition: all 0.3s ease;
}
.service-card.clickable:hover .card-cta {
opacity: 1;
gap: 0.75rem;
}
.card-cta svg {
transition: transform 0.3s ease;
}
.service-card.clickable:hover .card-cta svg {
transform: translateX(3px);
} .service-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
}
.service-modal.active {
display: flex;
}
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(10, 22, 40, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.4s ease;
}
.service-modal.active .modal-overlay {
opacity: 1;
}
.modal-container {
position: relative;
width: 100%;
max-width: 900px;
max-height: 90vh;
background: linear-gradient(135deg, rgba(20, 35, 60, 0.95) 0%, rgba(15, 25, 45, 0.95) 100%);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 
0 30px 60px rgba(0, 0, 0, 0.3),
0 0 80px rgba(0, 217, 163, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
overflow: hidden;
opacity: 0;
transform: scale(0.9) translateY(20px);
transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-modal.active .modal-container {
opacity: 1;
transform: scale(1) translateY(0);
}
.modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
z-index: 10;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
color: var(--white);
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: rotate(90deg) scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.modal-content {
max-height: 90vh;
overflow-y: auto;
padding: 3rem;
scrollbar-width: thin;
scrollbar-color: rgba(0, 217, 163, 0.5) transparent;
}
.modal-content::-webkit-scrollbar {
width: 8px;
}
.modal-content::-webkit-scrollbar-track {
background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
background: rgba(0, 217, 163, 0.5);
border-radius: 10px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
background: rgba(0, 217, 163, 0.7);
} .modal-header {
display: flex;
gap: 1.5rem;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-icon {
width: 80px;
height: 80px;
min-width: 80px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 217, 163, 0.2) 0%, rgba(30, 58, 95, 0.2) 100%);
border: 2px solid rgba(0, 217, 163, 0.3);
border-radius: 20px;
color: var(--primary);
position: relative;
}
.modal-icon.featured-modal {
background: linear-gradient(135deg, rgba(0, 217, 163, 0.3) 0%, rgba(0, 185, 138, 0.3) 100%);
border-color: var(--primary);
box-shadow: 0 0 30px rgba(0, 217, 163, 0.3);
}
.modal-popular-badge {
position: absolute;
top: -8px;
right: -8px;
background: var(--gradient-primary);
color: white;
font-size: 0.625rem;
font-weight: 700;
padding: 0.25rem 0.5rem;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.modal-badge {
display: inline-block;
padding: 0.375rem 0.875rem;
background: rgba(0, 217, 163, 0.1);
border: 1px solid rgba(0, 217, 163, 0.3);
border-radius: 20px;
color: var(--primary);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.modal-title {
font-size: 2rem;
font-weight: 900;
color: var(--white);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.modal-subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
} .modal-body {
display: flex;
flex-direction: column;
gap: 2rem;
}
.modal-section h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--white);
margin-bottom: 1rem;
}
.modal-section p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.7;
font-size: 1rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.9375rem;
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(0, 217, 163, 0.1);
border-color: rgba(0, 217, 163, 0.3);
transform: translateX(5px);
}
.feature-item svg {
min-width: 20px;
color: var(--primary);
}
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tech-tags span {
padding: 0.5rem 1rem;
background: rgba(0, 217, 163, 0.1);
border: 1px solid rgba(0, 217, 163, 0.2);
border-radius: 20px;
color: var(--primary);
font-size: 0.875rem;
font-weight: 600;
transition: all 0.3s ease;
}
.tech-tags span:hover {
background: rgba(0, 217, 163, 0.2);
transform: translateY(-2px);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.stat-card {
text-align: center;
padding: 1.5rem;
background: rgba(0, 217, 163, 0.1);
border: 2px solid rgba(0, 217, 163, 0.2);
border-radius: 16px;
transition: all 0.3s ease;
}
.stat-card:hover {
background: rgba(0, 217, 163, 0.15);
border-color: rgba(0, 217, 163, 0.4);
transform: translateY(-5px);
}
.stat-number {
font-size: 2rem;
font-weight: 900;
color: var(--primary);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
}
.projects-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.project-mini {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transition: all 0.3s ease;
}
.project-mini:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(10px);
}
.project-mini-icon {
width: 50px;
height: 50px;
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 217, 163, 0.2);
border-radius: 12px;
font-size: 1.5rem;
}
.project-mini strong {
display: block;
color: var(--white);
margin-bottom: 0.25rem;
}
.project-mini p {
color: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
margin: 0;
} .modal-footer {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--gradient-primary);
color: var(--white);
font-weight: 700;
font-size: 1rem;
border-radius: 50px;
box-shadow: 
0 8px 20px rgba(0, 217, 163, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.modal-cta:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 
0 12px 30px rgba(0, 217, 163, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.modal-cta svg {
transition: transform 0.3s ease;
}
.modal-cta:hover svg {
transform: translateX(5px);
} @media (max-width: 1024px) {
.service-modal {
padding: 1.5rem;
}
.modal-container {
max-width: 95%;
}
.modal-content {
padding: 2.5rem 2rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.service-modal {
padding: 0.75rem;
align-items: flex-start;
}
.modal-container {
max-height: 95vh;
border-radius: 16px;
margin-top: 2rem;
}
.modal-content {
padding: 1.5rem 1rem;
max-height: calc(95vh - 2rem);
}
.modal-header {
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.modal-icon {
width: 56px;
height: 56px;
min-width: 56px;
}
.modal-icon svg {
width: 28px;
height: 28px;
}
.modal-badge {
font-size: 0.625rem;
padding: 0.25rem 0.625rem;
}
.modal-title {
font-size: 1.375rem;
}
.modal-subtitle {
font-size: 0.9375rem;
line-height: 1.5;
}
.modal-body {
gap: 1.25rem;
}
.modal-section h3 {
font-size: 1.0625rem;
margin-bottom: 0.75rem;
}
.modal-section p {
font-size: 0.9375rem;
line-height: 1.6;
}
.features-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.feature-item {
padding: 0.75rem;
font-size: 0.875rem;
gap: 0.625rem;
}
.feature-item svg {
width: 18px;
height: 18px;
min-width: 18px;
}
.tech-tags {
gap: 0.5rem;
}
.tech-tags span {
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.stat-card {
padding: 1rem;
}
.stat-card .stat-number {
font-size: 1.5rem;
}
.stat-card .stat-label {
font-size: 0.75rem;
}
.projects-list {
gap: 0.75rem;
}
.project-mini {
padding: 1rem;
gap: 0.75rem;
}
.project-mini-icon {
width: 44px;
height: 44px;
min-width: 44px;
font-size: 1.25rem;
}
.project-mini strong {
font-size: 0.9375rem;
}
.project-mini p {
font-size: 0.8125rem;
}
.modal-footer {
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.modal-cta {
width: 100%;
justify-content: center;
padding: 0.875rem 1.5rem;
font-size: 0.9375rem;
}
.modal-close {
width: 36px;
height: 36px;
top: 0.75rem;
right: 0.75rem;
}
.modal-close svg {
width: 18px;
height: 18px;
}
}
@media (max-width: 480px) {
.service-modal {
padding: 0.5rem;
}
.modal-container {
border-radius: 12px;
margin-top: 1rem;
}
.modal-content {
padding: 1.25rem 0.875rem;
}
.modal-icon {
width: 48px;
height: 48px;
min-width: 48px;
}
.modal-icon svg {
width: 24px;
height: 24px;
}
.modal-title {
font-size: 1.25rem;
}
.modal-subtitle {
font-size: 0.875rem;
}
.modal-section h3 {
font-size: 1rem;
}
.modal-section p {
font-size: 0.875rem;
}
.feature-item {
padding: 0.625rem;
font-size: 0.8125rem;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-card .stat-number {
font-size: 1.375rem;
}
.project-mini-icon {
width: 40px;
height: 40px;
min-width: 40px;
font-size: 1.125rem;
}
.modal-cta {
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
}
.modal-close {
width: 32px;
height: 32px;
top: 0.625rem;
right: 0.625rem;
}
.modal-close svg {
width: 16px;
height: 16px;
}
} @media (max-width: 768px) {
.review-modal-container {
width: 95%;
max-height: 90vh;
padding: var(--spacing-md);
}
.review-modal-avatar {
width: 48px;
height: 48px;
font-size: 1rem;
}
.review-modal-name {
font-size: 1rem;
}
.review-modal-text {
font-size: 0.9375rem;
}
}
.modal-animate {
opacity: 0;
transform: translateY(20px);
}
.modal-animate.show {
animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-animate:nth-child(1) { animation-delay: 0.1s; }
.modal-animate:nth-child(2) { animation-delay: 0.2s; }
.modal-animate:nth-child(3) { animation-delay: 0.3s; }
.modal-animate:nth-child(4) { animation-delay: 0.4s; }
.modal-animate:nth-child(5) { animation-delay: 0.5s; } @media (max-width: 768px) { .swiper-slide.contact-section .section-content,
.contact-section .section-content { padding-top: 100px !important; min-height: 100vh !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
}  .contact-form input[type="email"],
.contact-form input[type="tel"] {
text-align: left !important;
} .form-group label[for="email"],
.form-group label[for="phone"] { left: 1rem !important;
right: auto !important;
text-align: left !important;
width: auto !important;  top: 50% !important;
transform: translateY(-50%) !important;
}  .form-group input[type="email"]:focus + label,
.form-group input[type="email"]:not(:placeholder-shown) + label,
.form-group input[type="tel"]:focus + label,
.form-group input[type="tel"]:not(:placeholder-shown) + label { top: -0.5rem !important;
left: 0.75rem !important; transform: none !important;
} @media (max-width: 768px) {
.contact-method { justify-content: flex-start !important; text-align: left !important;
} .contact-method .method-label,
.contact-method .method-value {
text-align: left !important;
}
} @media (min-width: 1025px) { .testimonials-section .section-content {
padding-top: 80px !important; justify-content: center !important;
gap: 0.5rem !important; } .testimonials-section .section-header {
margin-bottom: 1rem !important; 
}
.testimonials-section .section-badge { margin-bottom: 0.25rem !important; }
.testimonials-section .section-title { margin-bottom: 0.25rem !important; line-height: 1 !important; }
.testimonials-section .google-rating-header { margin-top: 0.25rem !important; }
.testimonials-section .google-rating-badge { padding: 0.25rem 1rem !important; } .google-review-card, 
.testimonial-card { padding: 1rem 1.25rem !important; 
min-height: 0 !important; } .reviewer-avatar, .author-avatar {
width: 32px !important;
height: 32px !important;
font-size: 0.8rem !important;
} .reviewer-name, .author-name { font-size: 0.9rem !important; margin-bottom: 0 !important; }
.review-date, .author-role { font-size: 0.75rem !important; } .stars, .review-stars {
font-size: 0.8rem !important;
margin-bottom: 0.25rem !important;
} .review-text, 
.testimonial-text {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
font-size: 0.85rem !important; 
line-height: 1.3 !important;  display: -webkit-box;
-webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
}
} @media (max-width: 768px) {  .hero-section .hero-content {
padding-left: 24px !important;
padding-right: 24px !important;
width: 100% !important;
box-sizing: border-box !important;
} .hero-section .hero-stats {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 15px !important; width: 100% !important;
} .hero-section .hero-stats .stat { flex: 0 0 calc(50% - 10px) !important; 
max-width: calc(50% - 10px) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
} .hero-section .hero-stats .stat:nth-child(3) {
flex: 0 0 100% !important; max-width: 100% !important;
margin-top: 5px !important; display: flex;
flex-direction: column;
align-items: center;
}
} @media (max-width: 768px) { .swiper-pagination,
.swiper-pagination.swiper-pagination-bullets,
.swiper-pagination.swiper-pagination-vertical { position: fixed !important;
top: auto !important;
right: auto !important;
left: 50% !important;
bottom: 24px !important;  transform: translateX(-50%) !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important; display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important; } .swiper-pagination .swiper-pagination-bullet {
margin: 0 !important; display: block !important;  }
}  @keyframes hlPulseGlow {
0% { transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 208, 132, 0.7); }
70% { transform: scale(1.15); 
box-shadow: 0 0 0 6px rgba(0, 208, 132, 0); }
100% { transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 208, 132, 0);
}
} .hero-badge .pulse-dot { border-radius: 50%; animation: hlPulseGlow 2s infinite ease-in-out; will-change: transform, box-shadow;
} @media (prefers-reduced-motion: reduce) {
.hero-badge .pulse-dot {
animation: none !important;
}
}  .form-message {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
border-radius: 8px;
font-size: 0.95rem;
line-height: 1.5;
display: none;
animation: slideInMessage 0.3s ease;
} @keyframes slideInMessage {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .form-message.success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #059669;
}
.form-message.success::before {
content: "✓ ";
font-weight: bold;
margin-right: 0.5rem;
} .form-message.error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #dc2626;
}
.form-message.error::before {
content: "✗ ";
font-weight: bold;
margin-right: 0.5rem;
} .contact-form button[type="submit"]:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.contact-form button[type="submit"]:disabled svg {
animation: rotate 1s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
} .contact-form button[type="submit"].success-animation {
background: #10b981 !important;
transform: scale(1.05);
transition: all 0.3s ease;
} .contact-form input.invalid,
.contact-form textarea.invalid {
border-color: #ef4444 !important;
}
.contact-form input.invalid:focus,
.contact-form textarea.invalid:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
} @media (max-width: 768px) {
.form-message {
font-size: 0.9rem;
padding: 0.875rem 1rem;
}
}.dark-section {
background: var(--gradient-hero) !important;
color: var(--white);
} .particles {
position: absolute;
inset: 0;
background: 
radial-gradient(circle at 20% 50%, rgba(0, 217, 163, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(30, 58, 95, 0.15) 0%, transparent 50%),
radial-gradient(circle at 50% 20%, rgba(0, 217, 163, 0.05) 0%, transparent 40%);
pointer-events: none;
z-index: 0;
animation: particles-float 20s ease-in-out infinite;
}
@keyframes particles-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -20px) scale(1.05); }
66% { transform: translate(-20px, 30px) scale(0.95); }
} #fp-viewing-services .section,
#fp-viewing-portfolio .section,
#fp-viewing-processus .section,
#fp-viewing-temoignages .section,
#fp-viewing-contact .section {
transform-origin: top center;
} .glass-card {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(0, 217, 163, 0.4) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 217, 163, 0.2) !important;
} .light-title {
color: var(--white) !important;
}
.dark-section h3,
.dark-section p {
color: rgba(255, 255, 255, 0.9);
}
.dark-section .section-badge {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: var(--primary);
} .dark-section .service-card.glass-card h3 {
color: var(--white);
}
.dark-section .service-card.glass-card p {
color: rgba(255, 255, 255, 0.8);
}
.dark-section .service-card.featured {
background: rgba(0, 217, 163, 0.15) !important;
border-color: var(--primary) !important;
}
.dark-section .service-icon {
background: rgba(0, 217, 163, 0.15);
color: var(--primary);
} .portfolio-carousel {
display: flex;
align-items: center;
gap: var(--spacing-md);
width: 100%;
max-width: 100%;
position: relative;
}
.portfolio-track-wrapper {
flex: 1;
overflow: hidden;
position: relative;
}
.portfolio-track {
display: flex;
gap: var(--spacing-lg);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
.portfolio-card {
flex: 0 0 calc(33.333% - var(--spacing-lg) * 2 / 3);
min-width: calc(33.333% - var(--spacing-lg) * 2 / 3);
padding: 0;
overflow: hidden;
transition: all var(--transition);
}
.portfolio-card.clickable {
cursor: pointer;
}
.portfolio-card:hover {
transform: translateY(-6px);
} .carousel-btn {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: var(--white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
z-index: 10;
}
.carousel-btn:hover {
background: rgba(0, 217, 163, 0.3);
border-color: var(--primary);
transform: scale(1.1);
}
.carousel-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
transform: none;
}
.carousel-btn:disabled:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
} .carousel-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: var(--spacing-lg);
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
cursor: pointer;
transition: all var(--transition);
padding: 0;
}
.carousel-dot:hover {
border-color: var(--primary);
background: rgba(0, 217, 163, 0.3);
}
.carousel-dot.active {
background: var(--primary);
border-color: var(--primary);
transform: scale(1.2);
}
.portfolio-image {
width: 100%;
height: 200px;
background: rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.placeholder-img {
color: rgba(255, 255, 255, 0.3);
}
.portfolio-info {
padding: var(--spacing-lg);
}
.portfolio-info h3 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--white);
}
.portfolio-info p {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--spacing-sm);
} .portfolio-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.portfolio-tags span {
padding: 0.25rem 0.75rem;
background: rgba(0, 217, 163, 0.2);
border: 1px solid rgba(0, 217, 163, 0.3);
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
color: var(--primary);
} .testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
max-width: 100%;
}
.testimonial-card {
padding: var(--spacing-xl);
text-align: center;
transition: all var(--transition);
}
.testimonial-card:hover {
transform: translateY(-4px);
}
.stars {
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
}
.testimonial-text {
font-size: 0.9375rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--spacing-lg);
font-style: italic;
}
.testimonial-author {
display: flex;
align-items: center;
gap: var(--spacing-md);
justify-content: center;
}
.author-avatar {
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: var(--white);
font-size: 1rem;
}
.author-name {
font-weight: 700;
color: var(--white);
margin-bottom: 0.25rem;
text-align: left;
}
.author-title {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: left;
} .dark-section .process-step.glass-card h3 {
color: var(--white);
}
.dark-section .process-step.glass-card p {
color: rgba(255, 255, 255, 0.8);
}
.dark-section .process-cta.glass-card {
background: rgba(0, 217, 163, 0.1) !important;
border-color: rgba(0, 217, 163, 0.3) !important;
}
.dark-section .process-cta.glass-card h3 {
color: var(--white);
} .dark-section .contact-method.glass-card {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
.dark-section .method-label {
color: rgba(255, 255, 255, 0.6);
}
.dark-section .method-value {
color: var(--white);
}
.dark-section .method-icon {
background: rgba(0, 217, 163, 0.15);
color: var(--primary);
}
.dark-section .contact-form.glass-card {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
.dark-section .form-group input,
.dark-section .form-group textarea {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
color: var(--white);
}
.dark-section .form-group input::placeholder,
.dark-section .form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.dark-section .form-group input:focus,
.dark-section .form-group textarea:focus {
background: rgba(255, 255, 255, 0.08);
border-color: var(--primary);
}
.dark-section .form-group label {
color: rgba(255, 255, 255, 0.6);
background: transparent;
}
.dark-section .form-group input:not(:placeholder-shown) + label,
.dark-section .form-group textarea:not(:placeholder-shown) + label,
.dark-section .form-group input:focus + label,
.dark-section .form-group textarea:focus + label {
color: var(--primary);
background: var(--secondary-dark);
}
.dark-section .modern-footer {
color: rgba(255, 255, 255, 0.6);
} .dark-section .btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border-color: rgba(255, 255, 255, 0.3);
}
.dark-section .btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--primary);
} @media (max-width: 1024px) { .portfolio-card {
flex: 0 0 calc(50% - var(--spacing-lg) / 2);
min-width: calc(50% - var(--spacing-lg) / 2);
}
.carousel-btn {
width: 40px;
height: 40px;
}
.testimonials-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
} .glass-card {
background: rgba(255, 255, 255, 0.1) !important;
}
}
@media (max-width: 768px) { .portfolio-carousel {
flex-direction: column;
gap: var(--spacing-sm);
padding: 0;
}
.portfolio-track-wrapper {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
}
.portfolio-track-wrapper::-webkit-scrollbar {
display: none;
}
.portfolio-track {
gap: var(--spacing-md);
padding: 0 var(--spacing-sm);
}
.portfolio-card {
flex: 0 0 85%;
min-width: 85%;
scroll-snap-align: center;
}
.portfolio-image {
height: 140px;
}
.portfolio-info {
padding: var(--spacing-md);
}
.portfolio-info h3 {
font-size: 0.9375rem;
margin-bottom: 0.375rem;
}
.portfolio-info p {
font-size: 0.75rem;
margin-bottom: var(--spacing-sm);
}
.portfolio-tags {
gap: 0.375rem;
}
.portfolio-tags span {
font-size: 0.625rem;
padding: 0.2rem 0.5rem;
} .carousel-prev,
.carousel-next {
display: none !important;
}
.carousel-dots {
margin-top: var(--spacing-md);
gap: 0.375rem;
}
.carousel-dot {
width: 8px;
height: 8px;
} .testimonials-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.testimonial-card {
padding: var(--spacing-md);
}
.testimonial-text {
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: var(--spacing-md);
}
.stars {
font-size: 1rem;
margin-bottom: var(--spacing-sm);
}
.testimonial-author {
gap: var(--spacing-sm);
}
.author-avatar {
width: 40px;
height: 40px;
font-size: 0.875rem;
}
.author-name {
font-size: 0.875rem;
}
.author-title {
font-size: 0.6875rem;
} .glass-card {
background: rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(8px);
border-width: 1px !important;
}
.light-section .glass-card {
background: rgba(255, 255, 255, 0.8) !important;
} .dark-section .process-step.glass-card,
.light-section .process-step.glass-card {
padding: var(--spacing-md);
}
.process-cta.glass-card {
padding: var(--spacing-md);
}
.process-cta h3 {
font-size: 1rem;
}
.process-cta .btn {
width: 100%;
justify-content: center;
} .dark-section .contact-method.glass-card,
.light-section .contact-method.glass-card {
padding: var(--spacing-sm) var(--spacing-md);
}
.dark-section .contact-form.glass-card,
.light-section .contact-form.glass-card {
padding: var(--spacing-md);
}
}
@media (max-width: 480px) { .portfolio-card {
flex: 0 0 90%;
min-width: 90%;
}
.portfolio-image {
height: 120px;
}
.portfolio-info {
padding: var(--spacing-sm);
}
.portfolio-info h3 {
font-size: 0.875rem;
}
.portfolio-info p {
font-size: 0.6875rem;
} .testimonial-card {
padding: var(--spacing-sm);
}
.testimonial-text {
font-size: 0.8125rem;
}
.author-avatar {
width: 36px;
height: 36px;
font-size: 0.75rem;
} .carousel-dot {
width: 6px;
height: 6px;
}
}  .fp-section {
transition: transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.fp-section.fp-completely {
transform: translateY(0);
} #fp-nav ul li a span {
background: rgba(255, 255, 255, 0.5) !important;
border: 2px solid rgba(255, 255, 255, 0.3);
}
#fp-nav ul li a.active span {
background: var(--primary) !important;
border-color: var(--primary);
box-shadow: 0 0 10px rgba(0, 217, 163, 0.5);
}
#fp-nav ul li .fp-tooltip {
color: var(--white) !important;
font-weight: 600;
}  .section .section-badge,
.section .section-title,
.section .service-card,
.section .portfolio-card,
.section .process-step,
.section .process-cta,
.section .testimonial-card,
.section .contact-method,
.section .contact-form {
opacity: 1;
} .section.not-visited .section-badge,
.section.not-visited .section-title,
.section.not-visited .service-card,
.section.not-visited .portfolio-card,
.section.not-visited .process-step,
.section.not-visited .process-cta,
.section.not-visited .testimonial-card,
.section.not-visited .contact-method,
.section.not-visited .contact-form {
opacity: 0 !important;
} .section.not-visited .section-badge,
.section.not-visited .section-title,
.section.not-visited .service-card,
.section.not-visited .portfolio-card,
.section.not-visited .process-step,
.section.not-visited .process-cta,
.section.not-visited .testimonial-card,
.section.not-visited .contact-method,
.section.not-visited .contact-form {
transition: none !important;
} .light-section {
background: linear-gradient(
135deg,
#FFFFFF 0%,
#F8FFFE 30%,
#F0FBF8 60%,
#E8F9F4 100%
) !important;
color: var(--gray-800);
} .light-section .particles {
background:
radial-gradient(circle at 20% 50%, rgba(0, 217, 163, 0.06) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(30, 58, 95, 0.04) 0%, transparent 50%),
radial-gradient(circle at 50% 20%, rgba(0, 217, 163, 0.03) 0%, transparent 40%);
} .light-section .glass-card {
background: rgba(255, 255, 255, 0.7) !important;
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 217, 163, 0.15) !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(30, 58, 95, 0.04) !important;
}
.light-section .glass-card:hover {
background: rgba(255, 255, 255, 0.85) !important;
border-color: rgba(0, 217, 163, 0.4) !important;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.12),
0 0 30px rgba(0, 217, 163, 0.15) !important;
} .light-section .section-title {
color: var(--secondary-dark) !important;
}
.light-section .light-title {
color: var(--secondary-dark) !important;
text-shadow: none;
}
.light-section h3 {
color: var(--gray-900);
}
.light-section p {
color: var(--gray-600);
} .light-section .section-badge {
background: rgba(0, 217, 163, 0.1);
border-color: rgba(0, 217, 163, 0.3);
color: var(--primary-dark);
} .light-section .service-card.glass-card h3 {
color: var(--gray-900);
}
.light-section .service-card.glass-card p {
color: var(--gray-600);
}
.light-section .service-card.featured {
background: var(--gradient-hero) !important;
border: none !important;
color: var(--white);
}
.light-section .service-card.featured h3,
.light-section .service-card.featured p {
color: var(--white);
}
.light-section .service-icon {
background: rgba(0, 217, 163, 0.12);
color: var(--primary-dark);
} .light-section .card-cta {
border-top-color: rgba(0, 217, 163, 0.15);
color: var(--primary-dark);
} .light-section .process-step.glass-card {
background: rgba(255, 255, 255, 0.8) !important;
border: 1px solid rgba(0, 217, 163, 0.15) !important;
}
.light-section .process-step.glass-card:hover {
border-color: var(--primary) !important;
box-shadow: 0 8px 24px rgba(0, 217, 163, 0.15) !important;
}
.light-section .process-step.glass-card h3 {
color: var(--gray-900);
}
.light-section .process-step.glass-card p {
color: var(--gray-600);
}
.light-section .process-cta.glass-card {
background: var(--gradient-hero) !important;
border: none !important;
}
.light-section .process-cta.glass-card h3 {
color: var(--white);
} .light-section .contact-method.glass-card {
background: rgba(255, 255, 255, 0.8) !important;
border-color: rgba(0, 217, 163, 0.12) !important;
}
.light-section .contact-method.glass-card:hover {
border-color: var(--primary) !important;
}
.light-section .method-label {
color: var(--gray-600);
}
.light-section .method-value {
color: var(--gray-900);
}
.light-section .method-icon {
background: rgba(0, 217, 163, 0.12);
color: var(--primary-dark);
}
.light-section .contact-form.glass-card {
background: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(0, 217, 163, 0.12) !important;
}
.light-section .form-group input,
.light-section .form-group textarea {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(30, 58, 95, 0.15);
color: var(--gray-900);
}
.light-section .form-group input::placeholder,
.light-section .form-group textarea::placeholder {
color: var(--gray-600);
}
.light-section .form-group input:focus,
.light-section .form-group textarea:focus {
background: var(--white);
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.15);
}
.light-section .form-group label {
color: var(--gray-600);
background: transparent;
}
.light-section .form-group input:not(:placeholder-shown) + label,
.light-section .form-group textarea:not(:placeholder-shown) + label,
.light-section .form-group input:focus + label,
.light-section .form-group textarea:focus + label {
color: var(--primary-dark);
background: var(--white);
}
.light-section .modern-footer {
color: var(--gray-600);
} .light-section .btn-secondary {
background: rgba(255, 255, 255, 0.9);
color: var(--secondary-dark);
border: 2px solid rgba(30, 58, 95, 0.2);
}
.light-section .btn-secondary:hover {
background: var(--white);
border-color: var(--primary);
color: var(--primary-dark);
} .light-section .gradient-text {
background: linear-gradient(
90deg,
#00B88A 0%,
#00D9A3 20%,
#1E3A5F 40%,
#00D9A3 60%,
#00B88A 80%,
#1E3A5F 100%
);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradientFlow 8s ease infinite;
filter: drop-shadow(0 0 8px rgba(0, 217, 163, 0.2))
drop-shadow(0 1px 3px rgba(30, 58, 95, 0.15));
}  .modern-nav,
.modern-nav *,
.nav-brand,
.nav-link,
.nav-cta,
#fp-nav ul li a span {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
} .modern-nav.menu-light {
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(30, 58, 95, 0.1);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(30, 58, 95, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
} .modern-nav.menu-light .nav-brand {
background: rgba(30, 58, 95, 0.06);
border-color: rgba(30, 58, 95, 0.1);
}
.modern-nav.menu-light .nav-brand:hover {
background: rgba(30, 58, 95, 0.1);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.15);
} .modern-nav.menu-light .brand-logo {
filter: brightness(0.15) saturate(1.2);
}
.modern-nav.menu-light .nav-brand:hover .brand-logo {
filter: brightness(0.15) saturate(1.2) drop-shadow(0 2px 8px rgba(0, 217, 163, 0.3));
} .modern-nav.menu-light .nav-link {
color: rgba(10, 22, 40, 0.7);
}
.modern-nav.menu-light .nav-link::before {
background: rgba(30, 58, 95, 0.08);
}
.modern-nav.menu-light .nav-link:hover {
color: var(--secondary-dark);
}
.modern-nav.menu-light .nav-link.active {
color: var(--secondary-dark);
background: rgba(0, 217, 163, 0.15);
box-shadow:
0 0 15px rgba(0, 217, 163, 0.2),
inset 0 0 15px rgba(0, 217, 163, 0.08);
} .modern-nav.menu-light .nav-cta {
background: var(--gradient-hero);
color: var(--white);
box-shadow:
0 4px 12px rgba(30, 58, 95, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.modern-nav.menu-light .nav-cta:hover {
box-shadow:
0 8px 20px rgba(30, 58, 95, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
} body.on-light-section #fp-nav ul li a span {
background: rgba(30, 58, 95, 0.3) !important;
border: 2px solid rgba(30, 58, 95, 0.2);
}
body.on-light-section #fp-nav ul li a.active span {
background: var(--primary) !important;
border-color: var(--primary);
box-shadow: 0 0 10px rgba(0, 217, 163, 0.4);
}
body.on-light-section #fp-nav ul li .fp-tooltip {
color: var(--secondary-dark) !important;
background: rgba(255, 255, 255, 0.9);
padding: 0.25rem 0.75rem;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} body.on-light-section .whatsapp-float {
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.15),
0 0 25px rgba(37, 211, 102, 0.3);
} body.on-light-section .scroll-indicator {
color: rgba(30, 58, 95, 0.5);
}
body.on-light-section .mouse {
border-color: rgba(30, 58, 95, 0.3);
}
body.on-light-section .wheel {
background: rgba(30, 58, 95, 0.5);
}  .google-rating-header {
margin-top: var(--spacing-lg);
display: flex;
justify-content: center;
}
.google-rating-badge {
display: inline-flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--radius-full);
}
.google-logo {
flex-shrink: 0;
}
.google-rating-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.google-rating-score {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.rating-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--white);
}
.rating-stars {
display: flex;
gap: 2px;
}
.rating-stars .star {
color: #FBBC04;
font-size: 1rem;
}
.rating-stars .star.filled {
color: #FBBC04;
}
.rating-stars .star.empty {
color: rgba(255, 255, 255, 0.3);
}
.google-rating-count {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
} .google-reviews-carousel {
display: flex;
align-items: center;
gap: var(--spacing-md);
width: 100%;
margin-top: var(--spacing-lg);
}
.reviews-track-wrapper {
flex: 1;
overflow: hidden;
position: relative;
}
.reviews-track {
display: flex;
gap: var(--spacing-lg);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
} .google-review-card {
flex: 0 0 calc(33.333% - var(--spacing-lg) * 2 / 3);
min-width: calc(33.333% - var(--spacing-lg) * 2 / 3);
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
border-radius: var(--radius-xl);
}
.review-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.reviewer-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.125rem;
color: var(--white);
}
.reviewer-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.reviewer-info {
flex: 1;
min-width: 0;
}
.reviewer-name {
font-weight: 600;
font-size: 1rem;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.review-meta {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: 4px;
}
.review-stars {
display: flex;
gap: 1px;
}
.review-stars .star {
color: #FBBC04;
font-size: 0.875rem;
}
.review-date {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.5);
}
.review-google-icon {
margin-left: auto;
opacity: 0.7;
}
.review-google-icon svg {
width: 18px;
height: 18px;
} .review-text {
font-size: 0.9375rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
flex: 1;
}
.review-text.truncated {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.review-text.expanded {
display: block;
}
.read-more-btn {
background: none;
border: none;
color: var(--primary);
font-size: 0.8125rem;
cursor: pointer;
padding: 0.5rem 0;
margin-top: var(--spacing-xs);
font-weight: 500;
transition: color 0.2s ease;
position: relative;
z-index: 10;
display: inline-block;
}
.read-more-btn:hover {
color: var(--primary-dark);
text-decoration: underline;
} .reviews-loading {
flex: 0 0 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-xl);
gap: var(--spacing-md);
min-height: 200px;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top-color: var(--primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.reviews-loading p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9375rem;
} .reviews-error {
text-align: center;
padding: var(--spacing-lg);
}
.reviews-error p {
color: rgba(255, 255, 255, 0.7);
}
.reviews-error a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.reviews-error a:hover {
text-decoration: underline;
} .reviews-prev,
.reviews-next {
flex-shrink: 0;
} @media (max-width: 1024px) {
.google-review-card {
flex: 0 0 calc(50% - var(--spacing-lg) / 2);
min-width: calc(50% - var(--spacing-lg) / 2);
}
}
@media (max-width: 768px) { .google-review-card {
flex: 0 0 82%;
min-width: 82%;
scroll-snap-align: center;
}
.google-rating-badge {
padding: var(--spacing-sm) var(--spacing-md);
}
.rating-number {
font-size: 1.25rem;
} .google-reviews-carousel {
padding: 0;
}
.reviews-track-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 0.5rem;
}
.reviews-track-wrapper::-webkit-scrollbar {
display: none;
}
#reviewsTrack {
gap: var(--spacing-md);
padding-right: 1rem; }
.reviews-prev,
.reviews-next {
display: none;
} .reviews-track-wrapper::after {
content: '';
flex: 0 0 0.5rem;
min-width: 0.5rem;
}
} .light-section .rating-number {
color: var(--gray-900);
}
.light-section .reviewer-name {
color: var(--gray-900);
}
.light-section .review-text {
color: var(--gray-800);
}
.light-section .google-rating-count {
color: var(--gray-600);
}
.light-section .review-date {
color: var(--gray-500);
}
.light-section .rating-stars .star.empty,
.light-section .reviews-loading p,
.light-section .reviews-error p {
color: var(--gray-500);
} .google-rating-link {
text-decoration: none;
display: inline-block;
transition: transform 0.3s ease;
}
.google-rating-link:hover {
transform: scale(1.03);
}
.google-rating-link:hover .google-rating-badge {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 217, 163, 0.3);
border-color: rgba(0, 217, 163, 0.5);
}
.google-rating-link .google-rating-badge {
cursor: pointer;
transition: all 0.3s ease;
} .review-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 9999999 !important; display: none;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.review-modal.active {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.review-modal-backdrop {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(10, 22, 40, 0.9) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1 !important;
}
.review-modal.active .review-modal-backdrop {
display: block !important;
opacity: 1 !important;
}
.review-modal-container {
position: relative !important;
max-width: 560px;
width: 90%;
max-height: 85vh;
overflow-y: auto;
padding: var(--spacing-xl, 2rem);
border-radius: var(--radius-xl, 1rem);
background: rgba(30, 41, 59, 0.95) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
z-index: 2 !important;
transform: scale(1) !important;
}
.review-modal.active .review-modal-container {
display: block !important;
opacity: 1 !important;
transform: scale(1) !important;
}
.review-modal-close {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
width: 40px;
height: 40px;
border: none;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
}
.review-modal-close:hover {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
transform: rotate(90deg);
}
.review-modal-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
padding-right: 40px;
}
.review-modal-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
color: var(--white);
flex-shrink: 0;
}
.review-modal-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.review-modal-info {
flex: 1;
min-width: 0;
}
.review-modal-name {
font-weight: 600;
font-size: 1.125rem;
color: var(--white);
margin-bottom: 4px;
}
.review-modal-meta {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.review-modal-stars {
display: flex;
gap: 2px;
}
.review-modal-stars .star {
color: #FBBC04;
font-size: 1rem;
}
.review-modal-date {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
}
.review-modal-google {
flex-shrink: 0;
opacity: 0.8;
}
.review-modal-body {
padding-top: var(--spacing-md);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.review-modal-text {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.9);
} @media (max-width: 640px) {
.review-modal-container {
width: 95%;
padding: var(--spacing-lg);
max-height: 90vh;
}
.review-modal-header {
flex-wrap: wrap;
}
.review-modal-avatar {
width: 48px;
height: 48px;
font-size: 1rem;
}
.review-modal-name {
font-size: 1rem;
}
.review-modal-text {
font-size: 0.9375rem;
}
}  .cookie-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 99999; opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease;
}
.cookie-overlay.is-visible {
opacity: 1;
visibility: visible;
} #cookie-consent-popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9); width: 90%;
max-width: 480px;
z-index: 100000;  background: rgba(15, 23, 42, 0.95);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
border-radius: 20px;
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } #cookie-consent-popup.is-visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
} .cookie-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
}
.cookie-icon {
font-size: 32px;
line-height: 1;
animation: floatCookie 3s ease-in-out infinite;
}
@keyframes floatCookie {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.cookie-text h3 {
font-size: 1.25rem;
color: #fff;
margin: 0;
font-weight: 700;
}
.cookie-text p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
line-height: 1.5;
}
.cookie-link {
font-size: 0.85rem;
color: #00D9A3;
text-decoration: none;
margin-top: 5px;
display: inline-block;
border-bottom: 1px solid transparent;
transition: border-color 0.3s;
}
.cookie-link:hover { border-color: #00D9A3; } .cookie-actions {
display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 25px; width: 100%;
}  #cookie-consent-popup .btn-sm {
display: inline-flex; align-items: center;
justify-content: center;
height: 48px !important; min-width: 140px; padding: 0 24px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease; margin: 0;
line-height: 1;
text-decoration: none;
box-sizing: border-box;
}
#cookie-consent-popup .btn-secondary {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.2);
}
#cookie-consent-popup .btn-secondary:hover {
background: rgba(255, 255, 255, 0.05);
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
}
#cookie-consent-popup .btn-primary {
background: #00D9A3;
color: #fff;
border: none;
box-shadow: 0 4px 15px rgba(0, 217, 163, 0.3);
}
#cookie-consent-popup .btn-primary:hover {
background: #00F5B8;
transform: translateY(-2px);
} body.cookie-no-scroll {
overflow: hidden !important;
height: 100vh !important;
} @media (max-width: 600px) {
.cookie-actions {
flex-direction: column-reverse; gap: 12px;
}
#cookie-consent-popup .btn-sm {
width: 100%; }
}.helloleads-swiper {
width: 100%;
height: 100vh;
}
.swiper-wrapper { }
.swiper-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden; } .swiper-slide[data-anchor="contact"] {
min-height: 100vh !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } .swiper-slide[data-anchor="contact"] .section-content {
height: auto !important;
min-height: 100vh !important; padding-bottom: 140px !important; } .swiper-pagination {
right: 20px !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: auto !important;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 9998;
}
.swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
background: rgba(255, 255, 255, 0.4) !important;
opacity: 1 !important;
border: 2px solid rgba(255, 255, 255, 0.6);
margin: 0 !important;
position: relative;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.swiper-pagination-bullet:hover {
background: rgba(255, 255, 255, 0.7) !important;
border-color: rgba(255, 255, 255, 0.9);
transform: scale(1.2);
}
.swiper-pagination-bullet-active {
background: var(--primary) !important;
border-color: var(--primary) !important;
width: 14px !important;
height: 14px !important;
box-shadow: 0 0 20px rgba(0, 217, 163, 0.5);
} .swiper-pagination-bullet[data-tooltip]::before {
content: attr(data-tooltip);
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s, transform 0.3s;
}
.swiper-pagination-bullet[data-tooltip]:hover::before {
opacity: 1;
transform: translateY(-50%) translateX(-4px);
} @media (max-width: 768px) { .swiper-slide[data-anchor="services"],
.swiper-slide[data-anchor="contact"] {
display: block !important; overflow-y: auto !important; overflow-x: hidden !important;
height: 100vh !important; touch-action: pan-y !important; 
-webkit-overflow-scrolling: touch;
} .swiper-slide[data-anchor="services"] .section-content,
.swiper-slide[data-anchor="contact"] .section-content {
height: auto !important; min-height: calc(100vh + 2px) !important; padding-bottom: 120px !important; 
padding-top: 100px !important; }
} @media (max-width: 768px) { .swiper-slide[data-anchor="contact"] { touch-action: pan-y !important; overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain; } .swiper-slide[data-anchor="contact"] .section-content {
height: auto !important;
min-height: 101vh !important; padding-bottom: 120px !important; display: block !important; }
}  body.hl-light-bullets { --swiper-pagination-bullet-inactive-color: #000000 !important;
--swiper-pagination-bullet-inactive-opacity: 0.6 !important;
} body.hl-light-bullets .swiper-pagination-bullet {
background-color: #000000 !important; opacity: 0.6 !important;
} body.hl-light-bullets .swiper-pagination-bullet-active {
background-color: var(--primary, #00d084) !important;
opacity: 1 !important;
--swiper-pagination-bullet-opacity: 1 !important;
}  body:not(.hl-light-bullets) {
--swiper-pagination-bullet-inactive-color: #FFFFFF !important;
--swiper-pagination-bullet-inactive-opacity: 0.5 !important;
}
body:not(.hl-light-bullets) .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
background-color: #FFFFFF !important;
opacity: 0.5 !important;
}  #particles-layer {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
pointer-events: none !important;
z-index: 1 !important; } .helloleads-swiper {
position: relative;
z-index: auto; } .swiper-slide .section-content {
position: relative;
z-index: 5; } .swiper-slide h1,
.swiper-slide h2,
.swiper-slide h3,
.swiper-slide p,
.swiper-slide button,
.swiper-slide .service-card,
.swiper-slide .portfolio-card,
.swiper-slide .process-step,
.swiper-slide .google-review-card {
position: relative;
z-index: 5;
}  .orientation-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.98);
z-index: 10000; display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
} .orientation-overlay.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .orientation-content {
text-align: center;
color: white;
padding: 2rem;
max-width: 400px;
} .orientation-icon {
margin-bottom: 1.5rem;
animation: rotatePhone 2s ease-in-out infinite;
} @keyframes rotatePhone {
0%, 100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-15deg);
}
75% {
transform: rotate(15deg);
}
} .orientation-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
} .orientation-text {
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
margin: 0;
} body.orientation-locked {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
} @media (max-height: 500px) {
.orientation-content {
padding: 1rem;
}
.orientation-icon svg {
width: 60px;
height: 60px;
}
.orientation-title {
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.orientation-text {
font-size: 0.9rem;
}
} .swiper-slide[data-anchor="contact"] .modern-footer {
position: relative !important; bottom: auto !important;
margin-top: 80px !important; padding: 20px 0 40px 0 !important;
width: 100%;
text-align: center;
} .modern-footer .footer-copyright,
.modern-footer a,
.modern-footer .separator {
color: #1e3a5f !important; font-size: 12px !important;
text-decoration: none !important;
opacity: 0.8 !important;
}
.modern-footer .footer-links {
display: flex !important;
gap: 15px !important;
margin-top: 5px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.modern-footer a:hover {
color: #00D9A3 !important; text-decoration: underline !important;
opacity: 1 !important;
} @media (max-width: 768px) {
.swiper-slide[data-anchor="contact"] .modern-footer {
position: relative !important; bottom: auto !important;
margin-top: 30px !important;
padding-bottom: 80px !important; }
.modern-footer .footer-links {
flex-direction: column !important;
gap: 8px !important;
}
.modern-footer .separator {
display: none !important;
}
}  .swiper-slide[data-anchor="contact"] .contact-form {
margin-bottom: 40px !important; } .swiper-slide[data-anchor="contact"] .contact-grid {
margin-bottom: 40px !important; } @media (max-width: 768px) {
.swiper-slide[data-anchor="contact"] .contact-form {
margin-bottom: 20px !important;
}
.swiper-slide[data-anchor="contact"] .contact-grid {
margin-bottom: 20px !important;
}
}  @media (min-width: 769px) {
.swiper-slide[data-anchor="contact"] .section-content {
padding-top: 120px !important; }
} @media (min-width: 769px) and (max-width: 1024px) {
.swiper-slide[data-anchor="contact"] .section-content {
padding-top: 100px !important;
}
} .swiper-slide[data-anchor="contact"] .modern-footer {
position: absolute !important;
bottom: 60px !important; left: 0 !important;
width: 100% !important;
z-index: 9999 !important;
pointer-events: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 0 !important;
background: transparent !important;
} .modern-footer .footer-copyright,
.modern-footer a,
.modern-footer .separator {
color: #1e3a5f !important;
font-size: 12px !important;
text-decoration: none !important;
opacity: 0.8 !important;
}
.modern-footer .footer-links {
display: flex !important;
gap: 15px !important;
margin-top: 5px !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
.modern-footer a:hover {
color: #00D9A3 !important;
text-decoration: underline !important;
opacity: 1 !important;
} .footer-social {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 16px !important;
margin: 12px 0 8px 0 !important;
}
.social-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
background: rgba(30, 58, 95, 0.08) !important; transition: all 0.3s ease !important;
text-decoration: none !important;
} .social-icon svg {
width: 20px !important;
height: 20px !important;
stroke: #1e3a5f !important; fill: none !important; opacity: 0.8 !important;
transition: stroke 0.3s ease !important;
} .social-icon:hover {
background: #00D9A3 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3) !important;
}
.social-icon:hover svg {
stroke: #ffffff !important; opacity: 1 !important; } @media (max-width: 768px) {
.swiper-slide[data-anchor="contact"] .modern-footer {
position: relative !important;
bottom: auto !important;
margin-top: 40px !important; padding-bottom: 80px !important;
}
.modern-footer .footer-links {
flex-direction: column !important;
gap: 8px !important;
}
.modern-footer .separator {
display: none !important;
} .footer-social {
gap: 20px !important;
margin: 16px 0 12px 0 !important;
}
.social-icon {
width: 40px !important;
height: 40px !important;
}
.social-icon svg {
width: 22px !important;
height: 22px !important;
}
}  .swiper-slide[data-anchor="contact"]::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
} .swiper-slide[data-anchor="contact"] {
scrollbar-width: none !important; -ms-overflow-style: none !important; } .swiper-slide[data-anchor="contact"] {
overflow-y: auto !important;
overflow-x: hidden !important;
}html body.et_divi_theme .swiper-slide.hero-section .hero-cta .btn,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta .btn,
html body .swiper-slide.hero-section .hero-cta .btn,
html .swiper-slide.hero-section .hero-cta .btn,
html body.et_divi_theme .swiper-slide.hero-section .hero-cta a.btn,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta a.btn,
html body .swiper-slide.hero-section .hero-cta a.btn,
html .swiper-slide.hero-section .hero-cta a.btn { all: unset !important; display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
padding: 1rem 2rem !important;
border-radius: 12px !important;
font-size: 1rem !important;
font-weight: 500 !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
cursor: pointer !important;
transition: all 300ms ease !important;
text-decoration: none !important;
box-sizing: border-box !important;
white-space: nowrap !important;
line-height: 1.5 !important;
margin: 0 !important;
letter-spacing: normal !important;
text-transform: none !important;
} html body.et_divi_theme .swiper-slide.hero-section .hero-cta .btn.btn-primary,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta .btn.btn-primary,
html body .swiper-slide.hero-section .hero-cta .btn.btn-primary,
html .swiper-slide.hero-section .hero-cta .btn.btn-primary,
html body.et_divi_theme .swiper-slide.hero-section .hero-cta a.btn.btn-primary,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta a.btn.btn-primary,
html body .swiper-slide.hero-section .hero-cta a.btn.btn-primary,
html .swiper-slide.hero-section .hero-cta a.btn.btn-primary,
html body.et_divi_theme .swiper-slide.hero-section a.btn-primary,
html body.et_divi_builder .swiper-slide.hero-section a.btn-primary,
html body .swiper-slide.hero-section a.btn-primary,
html .swiper-slide.hero-section a.btn-primary {
background: #00D9A3 !important;
background-color: #00D9A3 !important;
background-image: none !important;
color: #FFFFFF !important;
box-shadow: none !important;
border: none !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
padding: 1rem 2rem !important;
border-radius: 12px !important;
}
html body.et_divi_theme .swiper-slide.hero-section .hero-cta .btn.btn-primary:hover,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta .btn.btn-primary:hover,
html body .swiper-slide.hero-section .hero-cta .btn.btn-primary:hover,
html .swiper-slide.hero-section .hero-cta .btn.btn-primary:hover,
html body.et_divi_theme .swiper-slide.hero-section .hero-cta a.btn.btn-primary:hover,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta a.btn.btn-primary:hover,
html body .swiper-slide.hero-section .hero-cta a.btn.btn-primary:hover,
html .swiper-slide.hero-section .hero-cta a.btn.btn-primary:hover {
background: #00F5B8 !important;
background-color: #00F5B8 !important;
background-image: none !important;
color: #FFFFFF !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3) !important;
} html body.et_divi_theme .swiper-slide.hero-section .hero-cta .btn.btn-secondary,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta .btn.btn-secondary,
html body .swiper-slide.hero-section .hero-cta .btn.btn-secondary,
html .swiper-slide.hero-section .hero-cta .btn.btn-secondary,
html body.et_divi_theme .swiper-slide.hero-section .hero-cta a.btn.btn-secondary,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta a.btn.btn-secondary,
html body .swiper-slide.hero-section .hero-cta a.btn.btn-secondary,
html .swiper-slide.hero-section .hero-cta a.btn.btn-secondary,
html body.et_divi_theme .swiper-slide.hero-section a.btn-secondary,
html body.et_divi_builder .swiper-slide.hero-section a.btn-secondary,
html body .swiper-slide.hero-section a.btn-secondary,
html .swiper-slide.hero-section a.btn-secondary {
background: rgba(255, 255, 255, 0.1) !important;
background-color: rgba(255, 255, 255, 0.1) !important;
background-image: none !important;
color: #FFFFFF !important;
border: 2px solid rgba(255, 255, 255, 0.2) !important;
border-width: 2px !important;
border-style: solid !important;
border-color: rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
padding: 1rem 2rem !important;
border-radius: 12px !important;
}
html body.et_divi_theme .swiper-slide.hero-section .hero-cta .btn.btn-secondary:hover,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta .btn.btn-secondary:hover,
html body .swiper-slide.hero-section .hero-cta .btn.btn-secondary:hover,
html .swiper-slide.hero-section .hero-cta .btn.btn-secondary:hover,
html body.et_divi_theme .swiper-slide.hero-section .hero-cta a.btn.btn-secondary:hover,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta a.btn.btn-secondary:hover,
html body .swiper-slide.hero-section .hero-cta a.btn.btn-secondary:hover,
html .swiper-slide.hero-section .hero-cta a.btn.btn-secondary:hover {
background: rgba(255, 255, 255, 0.15) !important;
background-color: rgba(255, 255, 255, 0.15) !important;
background-image: none !important;
color: #FFFFFF !important;
border-color: rgba(255, 255, 255, 0.4) !important;
transform: translateY(-2px) !important;
} html body.et_divi_theme .swiper-slide.hero-section .hero-cta,
html body.et_divi_builder .swiper-slide.hero-section .hero-cta,
html body .swiper-slide.hero-section .hero-cta,
html .swiper-slide.hero-section .hero-cta {
display: flex !important;
gap: 1rem !important;
justify-content: center !important;
align-items: center !important;
flex-wrap: wrap !important;
margin: 0 0 1rem 0 !important;
padding: 0 !important;
} html body .swiper-slide.hero-section .btn span,
html .swiper-slide.hero-section .btn span {
display: inline !important;
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
}
html body .swiper-slide.hero-section .btn svg,
html .swiper-slide.hero-section .btn svg {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
flex-shrink: 0 !important;
}
html body .swiper-slide.hero-section .btn svg path,
html .swiper-slide.hero-section .btn svg path {
stroke: currentColor !important;
fill: none !important;
} @media (max-width: 768px) {
html body .swiper-slide.hero-section .hero-cta,
html .swiper-slide.hero-section .hero-cta {
flex-direction: column !important;
width: 100% !important;
gap: 0.75rem !important;
}
html body .swiper-slide.hero-section .btn,
html .swiper-slide.hero-section .btn {
width: 100% !important;
max-width: 300px !important;
}
} .swiper-slide.hero-section::before {
content: "";
display: none; }html body .modern-nav .nav-brand .brand-logo,
body .modern-nav .nav-brand .brand-logo,
.modern-nav .nav-brand .brand-logo {
width: 160px !important;
max-width: 160px !important;
height: auto !important;
max-height: 36px !important;
min-height: 30px !important;
display: block !important;
object-fit: contain !important;
} html body .modern-nav .nav-brand,
body .modern-nav .nav-brand,
.modern-nav .nav-brand {
padding: 0.5rem 1.25rem !important;
display: flex !important;
align-items: center !important;
} html body .modern-nav .nav-cta,
body .modern-nav .nav-cta,
.modern-nav .nav-cta,
html body .modern-nav a.nav-cta,
body .modern-nav a.nav-cta,
.modern-nav a.nav-cta {
padding: 0.625rem 1.5rem !important;
font-size: 0.875rem !important;
gap: 0.5rem !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
min-width: auto !important;
} html body .modern-nav .nav-link,
body .modern-nav .nav-link,
.modern-nav .nav-link {
padding: 0.5rem 0.875rem !important;
font-size: 0.875rem !important;
} html body .modern-nav,
body .modern-nav,
.modern-nav {
padding: 0.625rem 1.5rem !important;
gap: 2rem !important;
} html body .modern-nav .nav-menu,
body .modern-nav .nav-menu,
.modern-nav .nav-menu {
gap: 0.625rem !important;
} .modern-nav::after {
content: "";
display: none;
} @media (max-width: 768px) { html body .modern-nav,
body .modern-nav,
.modern-nav {
padding: 0.3rem 0.5rem !important;
gap: 0.5rem !important;
max-width: calc(100% - 1rem) !important;
top: 0.5rem !important;
} html body .modern-nav .nav-brand,
body .modern-nav .nav-brand,
.modern-nav .nav-brand {
padding: 0.2rem 0.4rem !important;
} html body .modern-nav .nav-brand .brand-logo,
body .modern-nav .nav-brand .brand-logo,
.modern-nav .nav-brand .brand-logo {
width: 85px !important;
max-width: 85px !important;
max-height: 20px !important;
} html body .modern-nav .nav-cta,
body .modern-nav .nav-cta,
.modern-nav .nav-cta,
html body .modern-nav a.nav-cta,
body .modern-nav a.nav-cta,
.modern-nav a.nav-cta {
padding: 0.4rem 0.8rem !important;
font-size: 0.75rem !important;
gap: 0.35rem !important;
min-height: 32px !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
} html body .modern-nav .nav-cta span,
body .modern-nav .nav-cta span,
.modern-nav .nav-cta span {
display: inline !important;
opacity: 1 !important;
visibility: visible !important;
} html body .modern-nav .nav-cta svg,
body .modern-nav .nav-cta svg,
.modern-nav .nav-cta svg {
width: 14px !important;
height: 14px !important;
flex-shrink: 0 !important;
}
} @media (max-width: 480px) {
html body .modern-nav,
body .modern-nav,
.modern-nav {
padding: 0.25rem 0.4rem !important;
gap: 0.4rem !important;
}
html body .modern-nav .nav-brand .brand-logo,
body .modern-nav .nav-brand .brand-logo,
.modern-nav .nav-brand .brand-logo {
width: 75px !important;
max-height: 18px !important;
}
html body .modern-nav .nav-cta,
body .modern-nav .nav-cta,
.modern-nav .nav-cta {
padding: 0.35rem 0.7rem !important;
font-size: 0.6875rem !important;
min-height: 30px !important;
}
} @media (max-width: 375px) {
html body .modern-nav,
body .modern-nav,
.modern-nav {
padding: 0.25rem 0.35rem !important;
gap: 0.35rem !important;
}
html body .modern-nav .nav-brand .brand-logo,
body .modern-nav .nav-brand .brand-logo,
.modern-nav .nav-brand .brand-logo {
width: 70px !important;
max-height: 16px !important;
}
html body .modern-nav .nav-cta,
body .modern-nav .nav-cta,
.modern-nav .nav-cta {
padding: 0.3rem 0.6rem !important;
font-size: 0.625rem !important;
gap: 0.25rem !important;
min-height: 28px !important;
}
html body .modern-nav .nav-cta svg,
body .modern-nav .nav-cta svg,
.modern-nav .nav-cta svg {
width: 12px !important;
height: 12px !important;
}
}.process-cta .btn-primary,
.process-cta .btn.btn-primary,
.process-section .btn-primary {
background: #00D9A3 !important;
background-image: none !important;
color: #FFFFFF !important;
border: none !important;
}
.process-cta .btn-primary:hover,
.process-cta .btn.btn-primary:hover,
.process-section .btn-primary:hover {
background: #00F5B8 !important;
background-image: none !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3);
} .contact-form .btn-primary,
.contact-form button.btn-primary,
.contact-form button[type="submit"],
.contact-section .btn-primary,
.contact-section button.btn-primary {
background: #00D9A3 !important;
background-image: none !important;
color: #FFFFFF !important;
border: none !important;
}
.contact-form .btn-primary:hover,
.contact-form button.btn-primary:hover,
.contact-form button[type="submit"]:hover,
.contact-section .btn-primary:hover,
.contact-section button.btn-primary:hover {
background: #00F5B8 !important;
background-image: none !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 217, 163, 0.3);
} .btn-primary,
button.btn-primary,
a.btn-primary {
background: #00D9A3 !important;
background-image: none !important;
color: #FFFFFF !important;
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
background: #00F5B8 !important;
background-image: none !important;
} .review-read-more {
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
color: #FFFFFF !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
cursor: pointer !important;
background: none !important;
border: none !important;
padding: 0 !important;
margin-top: 0.5rem !important;
transition: opacity 0.2s ease !important;
}
.review-read-more:hover {
opacity: 0.8 !important;
}
.review-read-more svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
fill: none !important;
}.review-avatar {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.25rem !important;
font-weight: 600 !important;
color: #FFFFFF !important;
flex-shrink: 0 !important;
} .google-review-card {
min-height: auto !important;
max-height: 450px !important;
padding: 1rem !important;
position: relative !important;
}
.google-review-card .review-text {
font-size: 0.9rem !important;
line-height: 1.5 !important;
max-height: 150px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 6 !important;
-webkit-box-orient: vertical !important;
margin: 0.75rem 0 !important;
}
.google-review-card .review-header {
margin-bottom: 0.75rem !important;
} .review-google-logo {
position: absolute !important;
top: 1rem !important;
right: 1rem !important;
z-index: 10 !important;
}
.review-google-logo svg {
width: 24px !important;
height: 24px !important;
} .review-read-more {
display: inline-flex !important;
align-items: center !important;
gap: 0.25rem !important;
margin-top: 0.5rem !important;
} .google-rating-badge .rating-stars,
#avgStars {
color: #FFC107 !important;
}
.google-rating-badge .rating-stars .star,
#avgStars .star {
color: #FFC107 !important;
} .google-review-card .review-stars {
color: #FFC107 !important;
} .review-modal-avatar {
width: 60px !important;
height: 60px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.5rem !important;
font-weight: 600 !important;
color: #FFFFFF !important;
flex-shrink: 0 !important;
} .review-modal-stars {
color: #FFC107 !important;
}.mfp-wrap .mfp-container button:hover{background:transparent!important}.mfp-wrap .mfp-arrow:active{position:absolute;top:50%}.mfp-wrap .mfp-close:active{position:absolute;top:-10px}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after,.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{font-family:ETmodules;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mfp-fade.mfp-bg{opacity:.001;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.mfp-fade.mfp-bg.mfp-ready{opacity:.8}.mfp-fade.mfp-bg.mfp-removing{opacity:0}.mfp-fade .mfp-wrap.mfp-wrap.mfp-ready .mfp-content{opacity:1}.mfp-fade .mfp-wrap.mfp-wrap.mfp-removing .mfp-content{opacity:0}.mfp-fade .mfp-wrap .mfp-content{opacity:.001;-webkit-transition:all .5s ease-out;transition:all .5s ease-out}.mfp-bg{z-index:1000000;overflow:hidden;background:#0b0b0b;opacity:.8;filter:alpha(opacity=80)}.mfp-bg,.mfp-wrap{top:0;left:0;width:100%;height:100%;position:fixed}.mfp-wrap{z-index:1000001;outline:none!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;width:100%;height:100%;left:0;top:0;padding:0 8px;-webkit-box-sizing:border-box;box-sizing:border-box}.mfp-container:before{content:"";display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom{cursor:pointer;cursor:-webkit-zoom-in;cursor:zoom-in}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close{cursor:-webkit-zoom-out;cursor:zoom-out}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#ccc;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#ccc}.mfp-preloader a:hover{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;display:block;outline:none;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:44px;height:44px;line-height:44px;position:absolute;right:0;top:0;text-decoration:none;text-align:center;opacity:.65;filter:alpha(opacity=65);padding:0 0 18px 10px;color:#fff;font-style:normal;font-size:28px;font-family:Arial,Baskerville,monospace}.mfp-close:focus,.mfp-close:hover{opacity:1;filter:alpha(opacity=100)}.mfp-close:active{top:1px}.mfp-close-btn-in .mfp-close{color:#333}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{color:#fff;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-counter{position:absolute;top:0;right:0;color:#ccc;font-size:12px;line-height:18px}.mfp-arrow{position:absolute;opacity:.55;filter:alpha(opacity=55);top:50%;margin:-32px 0 0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfp-arrow:hover{opacity:1;filter:alpha(opacity=100)}.mfp-arrow-left{left:10px}.mfp-arrow-right{right:10px}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}.mfp-arrow{background:none!important;margin-top:-32px!important;line-height:1em!important}.mfp-arrow,.mfp-arrow:after{width:48px!important;height:48px!important}.mfp-arrow:after{margin:0!important;top:0!important;border:none!important}.mfp-arrow-left{left:0!important}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after,.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{border:none;font-size:64px;color:#fff}.mfp-arrow-left:before,.mfp-arrow-right:before{display:none}.mfp-arrow-left .mfp-a,.mfp-arrow-left:after{content:"4"}.mfp-arrow-right .mfp-a,.mfp-arrow-right:after{content:"5"}.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close{font-size:64px;font-family:Open Sans,Arial,sans-serif;font-weight:200;top:-10px;opacity:.2}.mfp-iframe-holder .mfp-close:hover,.mfp-image-holder .mfp-close:hover{opacity:1}img.mfp-img{width:auto;max-width:100%;height:auto;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure,img.mfp-img{line-height:0}.mfp-figure:after{content:"";position:absolute;left:0;top:40px;bottom:40px;display:block;right:0;width:auto;height:auto;z-index:-1;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#bdbdbd;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#f3f3f3;word-wrap:break-word;padding-right:36px}.mfp-image-holder .mfp-content{max-width:100%}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-height:300px),screen and (max-width:800px) and (orientation:landscape){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}@media (max-width:900px){.mfp-arrow{-webkit-transform:scale(.75);transform:scale(.75)}.mfp-arrow-left{-webkit-transform-origin:0;transform-origin:0}.mfp-arrow-right{-webkit-transform-origin:100%;transform-origin:100%}.mfp-container{padding-left:6px;padding-right:6px}}
 @-webkit-keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
@keyframes bounce {
from,
20%,
53%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%,
43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0);
transform: translate3d(0, -30px, 0);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0);
transform: translate3d(0, -15px, 0);
}
90% {
-webkit-transform: translate3d(0, -4px, 0);
transform: translate3d(0, -4px, 0);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
} @-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%,
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
} @-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from,
11.1%,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0);
transform: translate3d(3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0);
transform: translate3d(-25px, 0, 0);
}
75% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0);
transform: translate3d(-5px, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0);
transform: translate3d(20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0);
transform: translate3d(-20px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
40%,
45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedIn {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
-webkit-transform-origin: center;
transform-origin: center;
opacity: 1;
}
to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
opacity: 1;
}
to {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
opacity: 1;
}
to {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%,
60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%,
80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-name: hinge;
animation-name: hinge;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
} @-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
} @-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
-webkit-transform-origin: left center;
transform-origin: left center;
}
}
.zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
-webkit-transform-origin: right center;
transform-origin: right center;
}
}
.zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
}
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated.delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated.delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
.animated.delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated.delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
.animated.fast {
-webkit-animation-duration: 800ms;
animation-duration: 800ms;
}
.animated.faster {
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
}
.animated.slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
@media (prefers-reduced-motion) {
.animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}.temp-sms-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.temp-sms-header {
text-align: center;
margin-bottom: 30px;
}
.temp-sms-header h2 {
color: #2c3e50;
font-size: 2em;
margin-bottom: 10px;
}
.temp-sms-header .description {
color: #7f8c8d;
font-size: 1.1em;
}
.temp-sms-content {
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 30px;
} .btn-primary, .btn-secondary, .btn-select, .btn-copy {
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: block;
margin: 0 auto 20px;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.btn-secondary {
background: #3498db;
color: white;
margin-top: 15px;
}
.btn-secondary:hover {
background: #2980b9;
}
.btn-select {
background: #27ae60;
color: white;
width: 100%;
margin-top: 10px;
}
.btn-select:hover {
background: #229954;
}
.btn-copy {
background: #95a5a6;
color: white;
padding: 8px 16px;
font-size: 14px;
margin-left: 10px;
}
.btn-copy:hover {
background: #7f8c8d;
} .loading {
text-align: center;
padding: 20px;
color: #7f8c8d;
}
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(102, 126, 234, 0.3);
border-top-color: #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .numbers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}
.numbers-grid h3 {
grid-column: 1 / -1;
color: #2c3e50;
margin-bottom: 10px;
}
.number-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 10px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.number-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.number-display {
font-size: 1.5em;
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
font-family: 'Courier New', monospace;
}
.number-source {
font-size: 0.85em;
color: #7f8c8d;
margin-bottom: 15px;
} .sms-display {
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid #ecf0f1;
}
.selected-number-info {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 25px;
border-radius: 10px;
margin-bottom: 25px;
text-align: center;
}
.selected-number-info h3 {
margin-top: 0;
font-size: 1.2em;
}
.number-box {
display: flex;
align-items: center;
justify-content: center;
margin: 15px 0;
}
.big-number {
font-size: 2em;
font-weight: bold;
font-family: 'Courier New', monospace;
background: rgba(255,255,255,0.2);
padding: 15px 25px;
border-radius: 8px;
} .messages-container {
background: #f8f9fa;
border-radius: 10px;
padding: 20px;
}
.messages-container h3 {
color: #2c3e50;
margin-top: 0;
}
.messages-list {
max-height: 600px;
overflow-y: auto;
}
.message-card {
background: white;
border-left: 4px solid #3498db;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: transform 0.2s ease;
}
.message-card:hover {
transform: translateX(5px);
}
.message-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 10px;
}
.message-from {
color: #2c3e50;
font-size: 0.95em;
}
.message-time {
color: #95a5a6;
font-size: 0.85em;
}
.message-body {
color: #34495e;
line-height: 1.6;
padding: 10px;
background: #f8f9fa;
border-radius: 5px;
word-wrap: break-word;
} .no-messages, .loading-messages, .error-message, .info-message {
text-align: center;
padding: 30px;
color: #7f8c8d;
font-size: 1.1em;
}
.error-message {
color: #e74c3c;
background: #fadbd8;
border-radius: 8px;
}
.info-message {
color: #3498db;
background: #d6eaf8;
border-radius: 8px;
} .warning-box {
background: #fff3cd;
border: 2px solid #ffc107;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
color: #856404;
text-align: center;
} @media (max-width: 768px) {
.temp-sms-container {
padding: 10px;
}
.temp-sms-content {
padding: 20px;
}
.numbers-grid {
grid-template-columns: 1fr;
}
.temp-sms-header h2 {
font-size: 1.5em;
}
.big-number {
font-size: 1.5em;
padding: 10px 15px;
}
.message-header {
flex-direction: column;
align-items: flex-start;
}
.number-box {
flex-direction: column;
gap: 10px;
}
.btn-copy {
margin-left: 0;
}
} @keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.message-card {
animation: slideIn 0.3s ease;
} .messages-list::-webkit-scrollbar {
width: 8px;
}
.messages-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.messages-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.messages-list::-webkit-scrollbar-thumb:hover {
background: #555;
}:root{--woocommerce:#720eec;--wc-green:#7ad03a;--wc-red:#a00;--wc-orange:#ffba00;--wc-blue:#2ea2cc;--wc-primary:#720eec;--wc-primary-text:#fcfbfe;--wc-secondary:#e9e6ed;--wc-secondary-text:#515151;--wc-highlight:#958e09;--wc-highligh-text:white;--wc-content-bg:#fff;--wc-subtext:#767676;--wc-form-border-color:rgba(32, 7, 7, 0.8);--wc-form-border-radius:4px;--wc-form-border-width:1px}.woocommerce .woocommerce-error .button,.woocommerce .woocommerce-info .button,.woocommerce .woocommerce-message .button,.woocommerce-page .woocommerce-error .button,.woocommerce-page .woocommerce-info .button,.woocommerce-page .woocommerce-message .button{float:right}.woocommerce .col2-set,.woocommerce-page .col2-set{width:100%}.woocommerce .col2-set::after,.woocommerce .col2-set::before,.woocommerce-page .col2-set::after,.woocommerce-page .col2-set::before{content:" ";display:table}.woocommerce .col2-set::after,.woocommerce-page .col2-set::after{clear:both}.woocommerce .col2-set .col-1,.woocommerce-page .col2-set .col-1{float:left;width:48%}.woocommerce .col2-set .col-2,.woocommerce-page .col2-set .col-2{float:right;width:48%}.woocommerce img,.woocommerce-page img{height:auto;max-width:100%}.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images{float:left;width:48%}.woocommerce #content div.product div.thumbnails::after,.woocommerce #content div.product div.thumbnails::before,.woocommerce div.product div.thumbnails::after,.woocommerce div.product div.thumbnails::before,.woocommerce-page #content div.product div.thumbnails::after,.woocommerce-page #content div.product div.thumbnails::before,.woocommerce-page div.product div.thumbnails::after,.woocommerce-page div.product div.thumbnails::before{content:" ";display:table}.woocommerce #content div.product div.thumbnails::after,.woocommerce div.product div.thumbnails::after,.woocommerce-page #content div.product div.thumbnails::after,.woocommerce-page div.product div.thumbnails::after{clear:both}.woocommerce #content div.product div.thumbnails a,.woocommerce div.product div.thumbnails a,.woocommerce-page #content div.product div.thumbnails a,.woocommerce-page div.product div.thumbnails a{float:left;width:30.75%;margin-right:3.8%;margin-bottom:1em}.woocommerce #content div.product div.thumbnails a.last,.woocommerce div.product div.thumbnails a.last,.woocommerce-page #content div.product div.thumbnails a.last,.woocommerce-page div.product div.thumbnails a.last{margin-right:0}.woocommerce #content div.product div.thumbnails a.first,.woocommerce div.product div.thumbnails a.first,.woocommerce-page #content div.product div.thumbnails a.first,.woocommerce-page div.product div.thumbnails a.first{clear:both}.woocommerce #content div.product div.thumbnails.columns-1 a,.woocommerce div.product div.thumbnails.columns-1 a,.woocommerce-page #content div.product div.thumbnails.columns-1 a,.woocommerce-page div.product div.thumbnails.columns-1 a{width:100%;margin-right:0;float:none}.woocommerce #content div.product div.thumbnails.columns-2 a,.woocommerce div.product div.thumbnails.columns-2 a,.woocommerce-page #content div.product div.thumbnails.columns-2 a,.woocommerce-page div.product div.thumbnails.columns-2 a{width:48%}.woocommerce #content div.product div.thumbnails.columns-4 a,.woocommerce div.product div.thumbnails.columns-4 a,.woocommerce-page #content div.product div.thumbnails.columns-4 a,.woocommerce-page div.product div.thumbnails.columns-4 a{width:22.05%}.woocommerce #content div.product div.thumbnails.columns-5 a,.woocommerce div.product div.thumbnails.columns-5 a,.woocommerce-page #content div.product div.thumbnails.columns-5 a,.woocommerce-page div.product div.thumbnails.columns-5 a{width:16.9%}.woocommerce #content div.product div.summary,.woocommerce div.product div.summary,.woocommerce-page #content div.product div.summary,.woocommerce-page div.product div.summary{float:right;width:48%;clear:none}.woocommerce #content div.product .woocommerce-tabs,.woocommerce div.product .woocommerce-tabs,.woocommerce-page #content div.product .woocommerce-tabs,.woocommerce-page div.product .woocommerce-tabs{clear:both}.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce #content div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs::after,.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::before,.woocommerce-page div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page div.product .woocommerce-tabs ul.tabs::before{content:" ";display:table}.woocommerce #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs::after,.woocommerce-page div.product .woocommerce-tabs ul.tabs::after{clear:both}.woocommerce #content div.product .woocommerce-tabs ul.tabs li,.woocommerce div.product .woocommerce-tabs ul.tabs li,.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,.woocommerce-page div.product .woocommerce-tabs ul.tabs li{display:inline-block}.woocommerce #content div.product #reviews .comment::after,.woocommerce #content div.product #reviews .comment::before,.woocommerce div.product #reviews .comment::after,.woocommerce div.product #reviews .comment::before,.woocommerce-page #content div.product #reviews .comment::after,.woocommerce-page #content div.product #reviews .comment::before,.woocommerce-page div.product #reviews .comment::after,.woocommerce-page div.product #reviews .comment::before{content:" ";display:table}.woocommerce #content div.product #reviews .comment::after,.woocommerce div.product #reviews .comment::after,.woocommerce-page #content div.product #reviews .comment::after,.woocommerce-page div.product #reviews .comment::after{clear:both}.woocommerce #content div.product #reviews .comment img,.woocommerce div.product #reviews .comment img,.woocommerce-page #content div.product #reviews .comment img,.woocommerce-page div.product #reviews .comment img{float:right;height:auto}.woocommerce ul.products,.woocommerce-page ul.products{clear:both}.woocommerce ul.products::after,.woocommerce ul.products::before,.woocommerce-page ul.products::after,.woocommerce-page ul.products::before{content:" ";display:table}.woocommerce ul.products::after,.woocommerce-page ul.products::after{clear:both}.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{float:left;margin:0 3.8% 2.992em 0;padding:0;position:relative;width:22.05%;margin-left:0}.woocommerce ul.products li.first,.woocommerce-page ul.products li.first{clear:both}.woocommerce ul.products li.last,.woocommerce-page ul.products li.last{margin-right:0}.woocommerce ul.products.columns-1 li.product,.woocommerce-page ul.products.columns-1 li.product{width:100%;margin-right:0}.woocommerce ul.products.columns-2 li.product,.woocommerce-page ul.products.columns-2 li.product{width:48%}.woocommerce ul.products.columns-3 li.product,.woocommerce-page ul.products.columns-3 li.product{width:30.75%}.woocommerce ul.products.columns-5 li.product,.woocommerce-page ul.products.columns-5 li.product{width:16.95%}.woocommerce ul.products.columns-6 li.product,.woocommerce-page ul.products.columns-6 li.product{width:13.5%}.woocommerce-page.columns-1 ul.products li.product,.woocommerce.columns-1 ul.products li.product{width:100%;margin-right:0}.woocommerce-page.columns-2 ul.products li.product,.woocommerce.columns-2 ul.products li.product{width:48%}.woocommerce-page.columns-3 ul.products li.product,.woocommerce.columns-3 ul.products li.product{width:30.75%}.woocommerce-page.columns-5 ul.products li.product,.woocommerce.columns-5 ul.products li.product{width:16.95%}.woocommerce-page.columns-6 ul.products li.product,.woocommerce.columns-6 ul.products li.product{width:13.5%}.woocommerce .woocommerce-result-count,.woocommerce-page .woocommerce-result-count{float:left}.woocommerce .woocommerce-ordering,.woocommerce-page .woocommerce-ordering{float:right}.woocommerce .woocommerce-pagination ul.page-numbers::after,.woocommerce .woocommerce-pagination ul.page-numbers::before,.woocommerce-page .woocommerce-pagination ul.page-numbers::after,.woocommerce-page .woocommerce-pagination ul.page-numbers::before{content:" ";display:table}.woocommerce .woocommerce-pagination ul.page-numbers::after,.woocommerce-page .woocommerce-pagination ul.page-numbers::after{clear:both}.woocommerce .woocommerce-pagination ul.page-numbers li,.woocommerce-page .woocommerce-pagination ul.page-numbers li{display:inline-block}.woocommerce #content table.cart img,.woocommerce table.cart img,.woocommerce-page #content table.cart img,.woocommerce-page table.cart img{height:auto}.woocommerce #content table.cart td.actions,.woocommerce table.cart td.actions,.woocommerce-page #content table.cart td.actions,.woocommerce-page table.cart td.actions{text-align:right}.woocommerce #content table.cart td.actions .input-text,.woocommerce table.cart td.actions .input-text,.woocommerce-page #content table.cart td.actions .input-text,.woocommerce-page table.cart td.actions .input-text{width:80px}.woocommerce #content table.cart td.actions .coupon,.woocommerce table.cart td.actions .coupon,.woocommerce-page #content table.cart td.actions .coupon,.woocommerce-page table.cart td.actions .coupon{float:left}.woocommerce .cart-collaterals,.woocommerce-page .cart-collaterals{width:100%}.woocommerce .cart-collaterals::after,.woocommerce .cart-collaterals::before,.woocommerce-page .cart-collaterals::after,.woocommerce-page .cart-collaterals::before{content:" ";display:table}.woocommerce .cart-collaterals::after,.woocommerce-page .cart-collaterals::after{clear:both}.woocommerce .cart-collaterals .related,.woocommerce-page .cart-collaterals .related{width:30.75%;float:left}.woocommerce .cart-collaterals .cross-sells,.woocommerce-page .cart-collaterals .cross-sells{width:48%;float:left}.woocommerce .cart-collaterals .cross-sells ul.products,.woocommerce-page .cart-collaterals .cross-sells ul.products{float:none}.woocommerce .cart-collaterals .cross-sells ul.products li,.woocommerce-page .cart-collaterals .cross-sells ul.products li{width:48%}.woocommerce .cart-collaterals .shipping_calculator,.woocommerce-page .cart-collaterals .shipping_calculator{width:48%;clear:right;float:right}.woocommerce .cart-collaterals .shipping_calculator::after,.woocommerce .cart-collaterals .shipping_calculator::before,.woocommerce-page .cart-collaterals .shipping_calculator::after,.woocommerce-page .cart-collaterals .shipping_calculator::before{content:" ";display:table}.woocommerce .cart-collaterals .shipping_calculator::after,.woocommerce-page .cart-collaterals .shipping_calculator::after{clear:both}.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-1,.woocommerce .cart-collaterals .shipping_calculator .col2-set .col-2,.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-1,.woocommerce-page .cart-collaterals .shipping_calculator .col2-set .col-2{width:47%}.woocommerce .cart-collaterals .cart_totals,.woocommerce-page .cart-collaterals .cart_totals{float:right;width:48%}.woocommerce ul.cart_list li::after,.woocommerce ul.cart_list li::before,.woocommerce ul.product_list_widget li::after,.woocommerce ul.product_list_widget li::before,.woocommerce-page ul.cart_list li::after,.woocommerce-page ul.cart_list li::before,.woocommerce-page ul.product_list_widget li::after,.woocommerce-page ul.product_list_widget li::before{content:" ";display:table}.woocommerce ul.cart_list li::after,.woocommerce ul.product_list_widget li::after,.woocommerce-page ul.cart_list li::after,.woocommerce-page ul.product_list_widget li::after{clear:both}.woocommerce ul.cart_list li img,.woocommerce ul.product_list_widget li img,.woocommerce-page ul.cart_list li img,.woocommerce-page ul.product_list_widget li img{float:right;height:auto}.woocommerce form .form-row::after,.woocommerce form .form-row::before,.woocommerce-page form .form-row::after,.woocommerce-page form .form-row::before{content:" ";display:table}.woocommerce form .form-row::after,.woocommerce-page form .form-row::after{clear:both}.woocommerce form .form-row label,.woocommerce-page form .form-row label{display:block}.woocommerce form .form-row label.checkbox,.woocommerce-page form .form-row label.checkbox{display:inline}.woocommerce form .form-row select,.woocommerce-page form .form-row select{width:100%}.woocommerce form .form-row .input-text,.woocommerce-page form .form-row .input-text{box-sizing:border-box;width:100%}.woocommerce form .form-row-first,.woocommerce form .form-row-last,.woocommerce-page form .form-row-first,.woocommerce-page form .form-row-last{width:47%;overflow:visible}.woocommerce form .form-row-first,.woocommerce-page form .form-row-first{float:left}.woocommerce form .form-row-last,.woocommerce-page form .form-row-last{float:right}.woocommerce form .form-row-wide,.woocommerce-page form .form-row-wide{clear:both}.woocommerce form .password-input,.woocommerce-page form .password-input{display:flex;flex-direction:column;justify-content:center;position:relative}.woocommerce form .password-input input[type=password],.woocommerce-page form .password-input input[type=password]{padding-right:2.5rem}.woocommerce form .password-input input::-ms-reveal,.woocommerce-page form .password-input input::-ms-reveal{display:none}.woocommerce form .show-password-input,.woocommerce-page form .show-password-input{background-color:transparent;border-radius:0;border:0;color:var(--wc-form-color-text,#000);cursor:pointer;font-size:inherit;line-height:inherit;margin:0;padding:0;position:absolute;right:.7em;text-decoration:none;top:50%;transform:translateY(-50%);-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-webkit-font-smoothing:inherit}.woocommerce form .show-password-input::after,.woocommerce-page form .show-password-input::after{font-family:WooCommerce;speak:never;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;margin-left:.618em;content:"\e010";text-decoration:none;margin-left:0;margin-top:-2px;vertical-align:middle;display:inline-block}.woocommerce form .show-password-input.display-password::after,.woocommerce-page form .show-password-input.display-password::after{color:#585858}.woocommerce #payment .form-row select,.woocommerce-page #payment .form-row select{width:auto}.woocommerce #payment .terms,.woocommerce #payment .wc-terms-and-conditions,.woocommerce-page #payment .terms,.woocommerce-page #payment .wc-terms-and-conditions{text-align:left;padding:0 1em 0 0;float:left}.woocommerce #payment #place_order,.woocommerce-page #payment #place_order{float:right}.woocommerce .woocommerce-billing-fields::after,.woocommerce .woocommerce-billing-fields::before,.woocommerce .woocommerce-shipping-fields::after,.woocommerce .woocommerce-shipping-fields::before,.woocommerce-page .woocommerce-billing-fields::after,.woocommerce-page .woocommerce-billing-fields::before,.woocommerce-page .woocommerce-shipping-fields::after,.woocommerce-page .woocommerce-shipping-fields::before{content:" ";display:table}.woocommerce .woocommerce-billing-fields::after,.woocommerce .woocommerce-shipping-fields::after,.woocommerce-page .woocommerce-billing-fields::after,.woocommerce-page .woocommerce-shipping-fields::after{clear:both}.woocommerce .woocommerce-terms-and-conditions,.woocommerce-page .woocommerce-terms-and-conditions{margin-bottom:1.618em;padding:1.618em}.woocommerce .woocommerce-oembed,.woocommerce-page .woocommerce-oembed{position:relative}.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}.woocommerce-account .woocommerce-MyAccount-content{float:right;width:68%}.woocommerce-account .woocommerce-MyAccount-content mark{background-color:transparent;color:inherit;font-weight:700}.woocommerce-page.left-sidebar #content.twentyeleven{width:58.4%;margin:0 7.6%;float:right}.woocommerce-page.right-sidebar #content.twentyeleven{margin:0 7.6%;width:58.4%;float:left}.twentyfourteen .tfwc{padding:12px 10px 0;max-width:474px;margin:0 auto}.twentyfourteen .tfwc .product .entry-summary{padding:0!important;margin:0 0 1.618em!important}.twentyfourteen .tfwc div.product.hentry.has-post-thumbnail{margin-top:0}@media screen and (min-width:673px){.twentyfourteen .tfwc{padding-right:30px;padding-left:30px}}@media screen and (min-width:1040px){.twentyfourteen .tfwc{padding-right:15px;padding-left:15px}}@media screen and (min-width:1110px){.twentyfourteen .tfwc{padding-right:30px;padding-left:30px}}@media screen and (min-width:1218px){.twentyfourteen .tfwc{margin-right:54px}.full-width .twentyfourteen .tfwc{margin-right:auto}}.twentyfifteen .t15wc{padding-left:7.6923%;padding-right:7.6923%;padding-top:7.6923%;margin-bottom:7.6923%;background:#fff;box-shadow:0 0 1px rgba(0,0,0,.15)}.twentyfifteen .t15wc .page-title{margin-left:0}@media screen and (min-width:38.75em){.twentyfifteen .t15wc{margin-right:7.6923%;margin-left:7.6923%;margin-top:8.3333%}}@media screen and (min-width:59.6875em){.twentyfifteen .t15wc{margin-left:8.3333%;margin-right:8.3333%;padding:10%}.single-product .twentyfifteen .entry-summary{padding:0!important}}.twentysixteen .site-main{margin-right:7.6923%;margin-left:7.6923%}.twentysixteen .entry-summary{margin-right:0;margin-left:0}#content .twentysixteen div.product div.images,#content .twentysixteen div.product div.summary{width:46.42857%}@media screen and (min-width:44.375em){.twentysixteen .site-main{margin-right:23.0769%}}@media screen and (min-width:56.875em){.twentysixteen .site-main{margin-right:0;margin-left:0}.no-sidebar .twentysixteen .site-main{margin-right:15%;margin-left:15%}.no-sidebar .twentysixteen .entry-summary{margin-right:0;margin-left:0}}.rtl .woocommerce .col2-set .col-1,.rtl .woocommerce-page .col2-set .col-1{float:right}.rtl .woocommerce .col2-set .col-2,.rtl .woocommerce-page .col2-set .col-2{float:left}