@charset "UTF-8";
.auto-translate-selector {
position: relative;
display: inline-block;
min-width: 60px;
font-family: Arial, sans-serif;
z-index: 1000;
} .auto-translate-selector.dropdown-text-selector {
min-width: 150px;
}
.auto-translate-selector .current-language {
padding: 8px 12px;
background-color: #f8f9fa;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
white-space: nowrap;
user-select: none;
}
.auto-translate-selector .current-language:hover {
background-color: #e9ecef;
border-color: #999;
}
.auto-translate-selector .current-language .language-text {
flex: 1;
margin-right: 5px;
}
.auto-translate-selector .language-arrow {
font-size: 10px;
margin-left: 8px;
color: #666;
transition: transform 0.3s ease;
}
.auto-translate-selector.active .language-arrow {
transform: rotate(180deg);
}
.auto-translate-selector .language-dropdown {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background-color: white !important;
border: 1px solid #ddd !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: none !important;
z-index: 999999 !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
min-width: 100% !important;
max-height: 300px !important;
overflow-y: auto !important;
}
.auto-translate-selector.active .language-dropdown,
.auto-translate-selector .language-dropdown.open {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.auto-translate-selector .language-option {
padding: 10px 12px;
cursor: pointer;
transition: background-color 0.2s;
border-bottom: 1px solid #f0f0f0;
display: block;
}
.auto-translate-selector .language-option:last-child {
border-bottom: none;
}
.auto-translate-selector .language-option:hover {
background-color: #666;
color: white;
}
.auto-translate-selector .language-option.active {
background-color: #f0f0f0;
font-weight: bold;
}
.auto-translate-selector .language-option.active:hover {
background-color: #666;
color: white;
} .floating-language-selector {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.floating-language-selector .auto-translate-selector {
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
position: static;
} .floating-language-selector .auto-translate-selector.dropdown-flags-selector {
min-width: auto;
width: auto;
box-shadow: none;
} .floating-language-selector .auto-translate-selector.dropdown-flags-selector .current-flag-icon {
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
} .floating-language-selector .auto-translate-selector .language-dropdown {
top: auto !important;
bottom: 100% !important;
left: auto !important;
right: 0 !important;
border-top: 1px solid #ddd !important;
border-bottom: none !important;
border-radius: 4px 4px 0 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
} .floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout) {
top: auto !important;
bottom: 100% !important;
left: auto !important;
right: 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
min-width: 32px !important;
width: auto !important;
max-width: 40px !important;
background: white !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4px !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.floating-language-selector .auto-translate-selector.dropdown-flags-selector:hover .language-flags-dropdown:not(.flags-grid-layout),
.floating-language-selector .auto-translate-selector.dropdown-flags-selector.hover-active .language-flags-dropdown:not(.flags-grid-layout),
.floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout).open {
max-height: 380px !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout) .flag-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 !important;
padding: 0 !important;
width: 100% !important;
text-align: center !important;
} .floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout {
top: auto !important;
bottom: 100% !important;
left: auto !important;
right: 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
justify-items: center !important;
align-items: center !important;
width: calc(28px * 3 + 8px * 2 + 16px) !important;
min-width: calc(28px * 3 + 8px * 2 + 16px) !important;
max-width: calc(28px * 3 + 8px * 2 + 16px) !important;
padding: 8px !important;
gap: 8px !important;
max-height: calc(20px * 13 + 8px * 12 + 20px) !important; overflow-y: auto !important;
overflow-x: hidden !important;
background: white !important;
}
.floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout .flag-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
width: 28px !important;
min-width: 28px !important;
height: 20px !important;
min-height: 20px !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout .flag-option-icon {
width: 28px !important;
height: 20px !important;
min-width: 28px !important;
min-height: 20px !important;
margin: 0 !important;
flex-shrink: 0 !important;
} .floating-language-selector .auto-translate-selector.dropdown-iso-selector {
min-width: auto;
width: auto;
background-color: white;
padding: 0 0;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
} .floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout) {
top: auto !important;
bottom: 100% !important;
left: auto !important;
right: 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
min-width: 50px !important;
width: auto !important;
max-width: 80px !important;
background: white !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4px !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.floating-language-selector .auto-translate-selector.dropdown-iso-selector:hover .language-iso-dropdown:not(.iso-grid-layout),
.floating-language-selector .auto-translate-selector.dropdown-iso-selector.hover-active .language-iso-dropdown:not(.iso-grid-layout),
.floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout).open {
max-height: 400px !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout) .iso-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 2px 0 !important;
padding: 4px 0 !important;
width: 100% !important;
text-align: center !important;
} .floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout {
top: auto !important;
bottom: 100% !important;
left: auto !important;
right: 0 !important;
margin-top: 0 !important;
margin-bottom: 5px !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
justify-items: center !important;
align-items: center !important;
width: calc(50px * 3 + 4px * 2 + 12px) !important;
min-width: calc(50px * 3 + 4px * 2 + 12px) !important;
max-width: calc(50px * 3 + 4px * 2 + 12px) !important;
padding: 6px !important;
gap: 2px !important;
max-height: calc(20px * 13 + 2px * 12 + 65px) !important; overflow-y: auto !important;
overflow-x: hidden !important;
background: white !important;
}
.floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout .iso-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
min-width: 40px !important;
min-height: 20px !important;
padding: 0 !important;
flex-shrink: 0 !important;
} .floating-language-selector .auto-translate-selector.horizontal-text-selector {
position: static;
background-color: white;
padding: 8px 12px;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.floating-language-selector .auto-translate-selector.flags-selector {
position: static;
background-color: white;
padding: 8px 12px;
border-radius: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
} .language-selector-menu-item {
margin-left: 15px !important;
list-style: none !important;
position: relative !important;
display: inline-block !important;
}
.language-selector-menu-item .auto-translate-selector {
margin: 0 !important;
display: inline-block;
vertical-align: middle;
position: relative;
z-index: 99999;
}
.language-selector-menu-item .auto-translate-selector .language-dropdown {
z-index: 999999 !important;
position: absolute !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector {
min-width: auto;
width: auto;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout) {
min-width: 32px !important;
width: auto !important;
max-width: 40px !important;
left: auto !important;
right: 0 !important;
transform: translateX(0) !important;
background: white !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4px !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector:hover .language-flags-dropdown:not(.flags-grid-layout),
.language-selector-menu-item .auto-translate-selector.dropdown-flags-selector.hover-active .language-flags-dropdown:not(.flags-grid-layout),
.language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout).open {
padding: 4px !important;
min-width: 32px !important;
max-width: 40px !important;
background: white !important;
left: auto !important;
right: 0 !important;
transform: translateY(0) !important;
max-height: 380px !important; overflow-y: hidden !important;
overflow-x: hidden !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout) .flag-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 4px 0 !important;
padding: 0 !important;
width: 100% !important;
text-align: center !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout) .flag-option-icon {
margin: 0 auto !important;
display: block !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
justify-items: center !important;
align-items: center !important;
left: auto !important;
right: 0 !important;
transform: translateX(0) !important;
width: calc(28px * 3 + 8px * 2 + 16px) !important;
min-width: calc(28px * 3 + 8px * 2 + 16px) !important;
max-width: calc(28px * 3 + 8px * 2 + 16px) !important;
padding: 8px !important;
gap: 8px !important;
max-height: 380px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: white !important;
}
.language-selector-menu-item .auto-translate-selector.dropdown-flags-selector:hover .language-flags-dropdown.flags-grid-layout,
.language-selector-menu-item .auto-translate-selector.dropdown-flags-selector.hover-active .language-flags-dropdown.flags-grid-layout,
.language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout.open {
transform: translateY(0) !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout .flag-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
width: 28px !important;
min-width: 28px !important;
height: 20px !important;
min-height: 20px !important;
padding: 0 !important;
flex-shrink: 0 !important;
}
.language-selector-menu-item .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout .flag-option-icon {
width: 28px !important;
height: 20px !important;
min-width: 28px !important;
min-height: 20px !important;
margin: 0 !important;
flex-shrink: 0 !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-iso-selector {
min-width: auto;
width: auto;
background: white !important;
padding: 0 !important;
border-radius: 4px !important;
}
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .current-language-iso {
background: white !important;
padding: 6px 10px 4px 10px !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout) {
min-width: 50px !important;
width: auto !important;
max-width: 80px !important;
left: 50% !important;
transform: translateX(-50%) !important;
background: white !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 4px !important;
overflow-y: hidden !important;
overflow-x: hidden !important;
}
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector:hover .language-iso-dropdown:not(.iso-grid-layout),
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector.hover-active .language-iso-dropdown:not(.iso-grid-layout),
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout).open {
padding: 4px !important;
min-width: 50px !important;
max-width: 80px !important;
background: white !important;
left: 50% !important;
transform: translateX(-50%) translateY(0) !important;
max-height: 400px !important; overflow-y: hidden !important;
overflow-x: hidden !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout) .iso-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 2px 0 !important;
padding: 0 8px !important;
width: 100% !important;
text-align: center !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
justify-items: center !important;
align-items: center !important;
left: 100% !important;
transform: translateX(-100%) !important;
width: calc(50px * 3 + 4px * 2 + 12px) !important;
min-width: calc(50px * 3 + 4px * 2 + 12px) !important;
max-width: calc(50px * 3 + 4px * 2 + 12px) !important;
padding: 6px !important;
gap: 2px !important;
max-height: 430px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: white !important;
}
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector:hover .language-iso-dropdown.iso-grid-layout,
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector.hover-active .language-iso-dropdown.iso-grid-layout,
.language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout.open {
transform: translateX(-100%) translateY(0) !important;
} .language-selector-menu-item .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout .iso-option {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
min-width: 40px !important;
min-height: 28px !important;
padding: 0 !important;
flex-shrink: 0 !important;
} ul.menu .language-selector-menu-item,
nav ul .language-selector-menu-item,
#menu-primary .language-selector-menu-item,
#main-menu .language-selector-menu-item,
.menu .language-selector-menu-item,
.main-navigation .language-selector-menu-item {
display: inline-block !important;
vertical-align: middle;
position: relative !important;
} .goog-te-banner-frame {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
body {
top: 0 !important;
}
.skiptranslate {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
.skiptranslate iframe {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
#google_translate_element {
position: fixed !important;
top: -9999px !important;
left: -9999px !important;
width: 200px !important;
height: auto !important;
opacity: 0 !important;
visibility: hidden !important;
z-index: -1 !important;
}
.goog-te-gadget {
font-size: 11px !important;
}
.goog-te-gadget .goog-te-combo {
margin: 4px 0;
padding: 6px;
border-radius: 4px;
border: 1px solid #ddd;
background: white;
color: #333;
} .goog-te-balloon-frame {
display: none !important;
visibility: hidden !important;
}
.goog-te-spinner-pos {
display: none !important;
}
.goog-te-menu-value {
display: none !important;
}
.goog-te-menu-frame {
display: none !important;
} iframe[class*="skiptranslate"] {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
} .goog-te-gadget,
.goog-te-gadget *,
.skiptranslate,
.skiptranslate * {
pointer-events: none !important;
}
body.translated .goog-te-gadget,
body.translated .goog-te-gadget * {
pointer-events: none !important;
} iframe[src*="translate"] {
pointer-events: none !important;
} .auto-translate-selector.flags-selector {
display: inline-block;
}
.auto-translate-selector.flags-selector .flags-container {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.auto-translate-selector.flags-selector .flag-item {
width: 32px;
height: 24px;
cursor: pointer;
border: 2px solid transparent;
border-radius: 3px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.auto-translate-selector.flags-selector .flag-item:hover {
border-color: #afb5b7;
transform: scale(1.1);
}
.auto-translate-selector.flags-selector .flag-item.active {
border-color: #d9dadb;
box-shadow: 0 0 0 2px rgba(0188 191 193, 0.2);
}
.auto-translate-selector.flags-selector .flag-item .flag-icon {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .auto-translate-selector.horizontal-text-selector {
display: inline-block;
font-family: Arial, sans-serif;
background-color: white;
padding: 8px 12px;
border-radius: 4px;
}
.auto-translate-selector.horizontal-text-selector .horizontal-languages-container {
display: inline-flex;
align-items: center;
gap: 0;
white-space: nowrap;
}
.auto-translate-selector.horizontal-text-selector .horizontal-lang-item {
cursor: pointer;
padding: 4px 8px;
font-weight: normal;
color: #333;
transition: all 0.2s ease;
user-select: none;
}
.auto-translate-selector.horizontal-text-selector .horizontal-lang-item:hover {
color: #333;
font-weight: normal;
text-decoration: underline;
}
.auto-translate-selector.horizontal-text-selector .horizontal-lang-item.active {
color: #b1b1b1;
font-weight: bold;
text-decoration: underline;
}
.auto-translate-selector.horizontal-text-selector .horizontal-lang-separator {
color: #666;
padding: 0 2px;
user-select: none;
} .auto-translate-selector.dropdown-iso-selector {
position: relative;
display: inline-block;
min-width: 60px;
}
.auto-translate-selector.dropdown-iso-selector .current-language-iso {
cursor: pointer;
display: inline-block;
padding: 4px 8px;
background: transparent;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 4px;
transition: all 0.2s ease;
min-width: fit-content;
}
.auto-translate-selector.dropdown-iso-selector .current-language-iso:hover {
border-color: #999;
background-color: rgba(0, 0, 0, 0.05);
}
.auto-translate-selector.dropdown-iso-selector .current-iso-text {
font-weight: normal;
color: #333;
font-size: 14px;
user-select: none;
}
.auto-translate-selector.dropdown-iso-selector .language-iso-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 5px;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
list-style: none;
padding: 0;
margin: 5px 0 0 0;
min-width: 50px;
max-width: 80px;
width: auto;
visibility: hidden;
opacity: 0;
transform: translateY(-10px);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease, visibility 0s linear 0.3s;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 999999;
}
.auto-translate-selector.dropdown-iso-selector:hover .language-iso-dropdown,
.auto-translate-selector.dropdown-iso-selector.hover-active .language-iso-dropdown,
.auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.open {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease, visibility 0s linear 0s;
} .auto-translate-selector.dropdown-iso-selector:hover .language-iso-dropdown:not(.iso-grid-layout),
.auto-translate-selector.dropdown-iso-selector.hover-active .language-iso-dropdown:not(.iso-grid-layout),
.auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.open:not(.iso-grid-layout) {
max-height: 500px;
padding: 4px;
}
.auto-translate-selector.dropdown-iso-selector .iso-option {
display: block;
margin: 2px 0;
cursor: pointer;
padding: 4px 0;
border-radius: 3px;
transition: all 0.2s ease;
text-align: center;
}
.auto-translate-selector.dropdown-iso-selector .iso-option:hover {
background-color: rgba(0, 0, 0, 0.08);
transform: scale(1.05);
}
.auto-translate-selector.dropdown-iso-selector .iso-option.active {
background-color: rgba(0, 0, 0, 0.12);
font-weight: bold;
}
.auto-translate-selector.dropdown-iso-selector .iso-text {
font-size: 14px;
color: #333;
user-select: none;
}
.auto-translate-selector.dropdown-iso-selector .iso-option.active .iso-text {
color: #666;
font-weight: bold;
} .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 4px;
padding: 6px;
width: calc(50px * 3 + 4px * 2 + 12px) !important; min-width: calc(50px * 3 + 4px * 2 + 12px) !important;
max-width: calc(50px * 3 + 4px * 2 + 12px) !important;
overflow-y: auto;
overflow-x: hidden;
max-height: 372px;
} .floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout {
width: calc(50px * 3 + 4px * 2 + 12px) !important;
min-width: calc(50px * 3 + 4px * 2 + 12px) !important;
max-width: calc(50px * 3 + 4px * 2 + 12px) !important;
}
.auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout .iso-option {
display: flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
min-height: 20px;
padding: 0 !important;
} .auto-translate-selector.dropdown-flags-selector {
position: relative;
display: inline-block;
}
.auto-translate-selector.dropdown-flags-selector .current-language-flag {
cursor: pointer;
display: inline-block;
padding: 0;
background: transparent;
border: none;
}
.auto-translate-selector.dropdown-flags-selector .current-flag-icon {
width: 28px;
height: 20px;
object-fit: cover;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 3px;
display: block;
transition: transform 0.2s ease;
}
.auto-translate-selector.dropdown-flags-selector .current-language-flag:hover .current-flag-icon {
transform: scale(1.05);
border-color: #007cba;
}
.auto-translate-selector.dropdown-flags-selector .language-flags-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 5px;
background: white !important; border: 1px solid #ddd;
border-radius: 4px;
list-style: none;
padding: 0;
margin: 5px 0 0 -8px;
visibility: hidden;
opacity: 0;
z-index: 999999;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
min-width: auto;
max-height: 0;
overflow: hidden;
transform: translateY(-10px);
transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease, padding 0.6s ease, visibility 0s linear 0.6s;
} .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px;
padding: 8px;
width: calc(28px * 3 + 8px * 2 + 16px) !important; min-width: calc(28px * 3 + 8px * 2 + 25px) !important; max-width: calc(28px * 3 + 8px * 2 + 16px) !important;
overflow-y: auto;
overflow-x: hidden; }
.auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout .flag-option {
display: flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
width: 100%;
min-height: 20px;
height: 20px;
flex-shrink: 0; }
.auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout .flag-option-icon {
width: 28px !important; height: 20px !important; min-width: 28px !important;
min-height: 20px !important;
margin: 0;
flex-shrink: 0; }
.auto-translate-selector.dropdown-flags-selector:hover .language-flags-dropdown,
.auto-translate-selector.dropdown-flags-selector.hover-active .language-flags-dropdown,
.auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.open {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: max-height 0.6s ease, opacity 0.6s ease, transform 0.6s ease, padding 0.6s ease, visibility 0s linear 0s;
}
.auto-translate-selector.dropdown-flags-selector:hover .language-flags-dropdown:not(.flags-grid-layout),
.auto-translate-selector.dropdown-flags-selector.hover-active .language-flags-dropdown:not(.flags-grid-layout),
.auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.open:not(.flags-grid-layout) {
max-height: 500px;
padding: 4px;
}
.auto-translate-selector.dropdown-flags-selector:hover .language-flags-dropdown.flags-grid-layout,
.auto-translate-selector.dropdown-flags-selector.hover-active .language-flags-dropdown.flags-grid-layout,
.auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout.open { max-height: 372px;
padding: 8px;
}
.auto-translate-selector.dropdown-flags-selector .flag-option {
display: block;
margin: 12px 0;
cursor: pointer;
padding: 2px;
border-radius: 3px;
transition: all 0.2s ease;
flex-shrink: 0; }
.auto-translate-selector.dropdown-flags-selector .flag-option:hover {
background-color: rgba(0, 124, 186, 0.1);
transform: scale(1.05);
}
.auto-translate-selector.dropdown-flags-selector .flag-option.active {
background-color: rgba(0, 124, 186, 0.2);
}
.auto-translate-selector.dropdown-flags-selector .flag-option-icon {
width: 28px !important; height: 20px !important; min-width: 28px !important;
min-height: 20px !important;
object-fit: cover;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 3px;
display: block;
flex-shrink: 0; } @media (max-width: 768px) {
.auto-translate-selector.flags-selector .flag-item {
width: 28px;
height: 21px;
}
.auto-translate-selector.dropdown-flags-selector .language-flag-wrapper {
width: 20px;
height: 15px;
}
} .wrap img.flag-thumbnail {
width: 18px !important;
height: 13px !important;
max-width: 18px !important;
max-height: 13px !important;
object-fit: cover !important;
display: inline-block !important;
vertical-align: middle !important;
margin-right: 8px !important;
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 3px !important;
}
.wrap .flag-thumbnail.missing {
width: 18px !important;
height: 13px !important;
max-width: 18px !important;
max-height: 13px !important;
line-height: 13px !important;
text-align: center;
color: #777;
background: #f3f4f5;
border: 1px dashed rgba(0,0,0,0.2);
border-radius: 3px;
} .auto-translate-languages-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px 15px !important;
max-width: 900px;
}
.auto-translate-languages-grid label {
display: flex !important;
align-items: center;
margin: 5px 0;
white-space: nowrap;
font-size: 13px;
}
.auto-translate-languages-grid input[type="checkbox"] {
margin-right: 5px;
flex-shrink: 0;
}
.auto-translate-languages-grid .flag-thumbnail {
flex-shrink: 0;
margin-right: 5px;
} @media (max-width: 1024px) {
.auto-translate-languages-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.auto-translate-languages-grid {
grid-template-columns: 1fr !important;
}
} .auto-translate-donation-popup {
position: fixed;
bottom: -400px;
right: 20px;
width: 320px;
max-width: calc(100% - 40px);
background: #ffffff;
border: 2px solid #007cba;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
z-index: 100000;
opacity: 0;
transform: translateY(0);
transition: bottom 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), 
opacity 0.5s ease,
transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.auto-translate-donation-popup.show {
bottom: 20px;
opacity: 1;
transform: translateY(0);
}
.auto-translate-donation-popup.hide {
bottom: -400px;
opacity: 0;
transform: translateY(20px);
}
.auto-translate-donation-close {
position: absolute;
top: 8px;
right: 8px;
background: transparent;
border: none;
font-size: 24px;
line-height: 1;
color: #666;
cursor: pointer;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
z-index: 10;
}
.auto-translate-donation-close:hover {
background: #f0f0f0;
color: #333;
transform: scale(1.1);
}
.auto-translate-donation-content {
padding: 20px;
}
.auto-translate-donation-title {
font-size: 16px;
font-weight: bold;
color: #007cba;
margin: 0 0 12px 0;
line-height: 1.4;
}
.auto-translate-donation-text {
font-size: 13px;
line-height: 1.6;
color: #333;
margin: 0 0 12px 0;
}
.auto-translate-donation-text:last-of-type {
margin-bottom: 16px;
}
.auto-translate-donation-qr {
text-align: center;
margin: 16px 0;
padding: 12px;
background: #f9f9f9;
border-radius: 8px;
}
.auto-translate-donation-qr form {
display: inline-block;
margin: 0;
padding: 0;
}
.auto-translate-donation-qr input[type="image"] {
max-width: 100%;
height: auto;
border: none;
cursor: pointer;
transition: opacity 0.3s ease;
}
.auto-translate-donation-qr input[type="image"]:hover {
opacity: 0.9;
}
.auto-translate-donation-qr img[width="1"] {
display: none; }
.auto-translate-donation-thanks {
font-size: 14px;
font-weight: 600;
color: #007cba;
text-align: center;
margin: 16px 0 0 0;
padding-top: 12px;
border-top: 1px solid #e0e0e0;
} @media (max-width: 782px) {
.auto-translate-donation-popup {
right: 10px;
bottom: -400px;
width: calc(100% - 20px);
max-width: 320px;
}
.auto-translate-donation-popup.show {
bottom: 10px;
}
.auto-translate-donation-popup.hide {
bottom: -400px;
}
} @media (max-width: 768px) {
.auto-translate-selector.dropdown-text-selector {
min-width: 120px;
}
.floating-language-selector {
bottom: 10px;
right: 10px;
} .floating-language-selector .auto-translate-selector .language-dropdown {
right: 0 !important;
left: auto !important;
}
.floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown:not(.flags-grid-layout) {
right: 0 !important;
left: auto !important;
transform: translateY(0) !important;
}
.floating-language-selector .auto-translate-selector.dropdown-flags-selector .language-flags-dropdown.flags-grid-layout {
right: 0 !important;
left: auto !important;
transform: translateY(0) !important;
}
.floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown:not(.iso-grid-layout) {
right: 0 !important;
left: auto !important;
transform: translateY(0) !important;
}
.floating-language-selector .auto-translate-selector.dropdown-iso-selector .language-iso-dropdown.iso-grid-layout {
right: 0 !important;
left: auto !important;
transform: translateY(0) !important;
}
.auto-translate-selector .current-language {
padding: 6px 10px;
font-size: 14px;
}
}
 
.frame {
display: grid; width: 600px;
height: 407px;
align-items: stretch;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
border: 5px dashed rgba(255, 255, 255, 0.2);
transition: all .3s; }
.frame:hover {
border: 6px dashed rgba(255, 255, 255, 0.02);
transition: all .3s; }
.frame .slice {
width: calc(100% + 0.5px);
height: calc(100% + 0.5px);
background-image: var(--img);
background-size: 800% 800%;
position: relative;
opacity: .2; }
.frame .slice:nth-of-type(1) {
transition: all 1.895137s;
background-position: 0% 0%;
transform: translateX(4.4328vw) translateY(-17.68579vh) rotate(0.69211turn); }
.frame .slice:nth-of-type(2) {
transition: all 1.26054523s;
background-position: 14.28571429% 0%;
transform: translateX(-16.27669vw) translateY(13.45974vh) rotate(0.97688turn); }
.frame .slice:nth-of-type(3) {
transition: all 1.46971754s;
background-position: 28.57142857% 0%;
transform: translateX(19.71075vw) translateY(-11.36709vh) rotate(0.82221turn); }
.frame .slice:nth-of-type(4) {
transition: all 1.25755237s;
background-position: 42.85714286% 0%;
transform: translateX(1.68439vw) translateY(1.78957vh) rotate(0.94362turn); }
.frame .slice:nth-of-type(5) {
transition: all 1.1449217s;
background-position: 57.14285714% 0%;
transform: translateX(47.41878vw) translateY(-21.25936vh) rotate(0.98994turn); }
.frame .slice:nth-of-type(6) {
transition: all 1.95821883s;
background-position: 71.42857143% 0%;
transform: translateX(-28.41187vw) translateY(20.28829vh) rotate(0.10109turn); }
.frame .slice:nth-of-type(7) {
transition: all 1.62432043s;
background-position: 85.71428571% 0%;
transform: translateX(30.6147vw) translateY(14.21965vh) rotate(0.2666turn); }
.frame .slice:nth-of-type(8) {
transition: all 1.58473016s;
background-position: 100% 0%;
transform: translateX(2.23272vw) translateY(-24.8135vh) rotate(0.89367turn); }
.frame .slice:nth-of-type(9) {
transition: all 1.74038224s;
background-position: 0% 14.28571429%;
transform: translateX(-6.54976vw) translateY(-23.55583vh) rotate(0.69279turn); }
.frame .slice:nth-of-type(10) {
transition: all 1.70510137s;
background-position: 14.28571429% 14.28571429%;
transform: translateX(9.79073vw) translateY(-22.60469vh) rotate(0.90793turn); }
.frame .slice:nth-of-type(11) {
transition: all 1.10603487s;
background-position: 28.57142857% 14.28571429%;
transform: translateX(48.73226vw) translateY(-7.17041vh) rotate(0.0041turn); }
.frame .slice:nth-of-type(12) {
transition: all 1.67665147s;
background-position: 42.85714286% 14.28571429%;
transform: translateX(-13.2576vw) translateY(14.18062vh) rotate(0.97073turn); }
.frame .slice:nth-of-type(13) {
transition: all 1.78190052s;
background-position: 57.14285714% 14.28571429%;
transform: translateX(-14.83961vw) translateY(-5.40722vh) rotate(0.4714turn); }
.frame .slice:nth-of-type(14) {
transition: all 1.65543613s;
background-position: 71.42857143% 14.28571429%;
transform: translateX(-26.66979vw) translateY(17.26872vh) rotate(0.96907turn); }
.frame .slice:nth-of-type(15) {
transition: all 1.21276868s;
background-position: 85.71428571% 14.28571429%;
transform: translateX(-8.1072vw) translateY(23.77454vh) rotate(0.70596turn); }
.frame .slice:nth-of-type(16) {
transition: all 1.21881979s;
background-position: 100% 14.28571429%;
transform: translateX(-25.47056vw) translateY(-21.5523vh) rotate(0.37977turn); }
.frame .slice:nth-of-type(17) {
transition: all 1.47540868s;
background-position: 0% 28.57142857%;
transform: translateX(25.54159vw) translateY(-18.64428vh) rotate(0.94917turn); }
.frame .slice:nth-of-type(18) {
transition: all 1.06979987s;
background-position: 14.28571429% 28.57142857%;
transform: translateX(42.56046vw) translateY(7.45969vh) rotate(0.227turn); }
.frame .slice:nth-of-type(19) {
transition: all 1.437168s;
background-position: 28.57142857% 28.57142857%;
transform: translateX(44.81843vw) translateY(0.80246vh) rotate(0.11677turn); }
.frame .slice:nth-of-type(20) {
transition: all 1.01178761s;
background-position: 42.85714286% 28.57142857%;
transform: translateX(39.61153vw) translateY(5.67319vh) rotate(0.62758turn); }
.frame .slice:nth-of-type(21) {
transition: all 1.84285234s;
background-position: 57.14285714% 28.57142857%;
transform: translateX(4.382vw) translateY(12.67604vh) rotate(0.36876turn); }
.frame .slice:nth-of-type(22) {
transition: all 1.86697939s;
background-position: 71.42857143% 28.57142857%;
transform: translateX(41.36373vw) translateY(-20.93189vh) rotate(0.87981turn); }
.frame .slice:nth-of-type(23) {
transition: all 1.30300006s;
background-position: 85.71428571% 28.57142857%;
transform: translateX(7.27489vw) translateY(23.82726vh) rotate(0.32422turn); }
.frame .slice:nth-of-type(24) {
transition: all 1.83056146s;
background-position: 100% 28.57142857%;
transform: translateX(39.7438vw) translateY(11.14775vh) rotate(0.32082turn); }
.frame .slice:nth-of-type(25) {
transition: all 1.98750712s;
background-position: 0% 42.85714286%;
transform: translateX(23.32602vw) translateY(11.80547vh) rotate(0.16452turn); }
.frame .slice:nth-of-type(26) {
transition: all 1.78243403s;
background-position: 14.28571429% 42.85714286%;
transform: translateX(-39.79678vw) translateY(22.84155vh) rotate(0.35153turn); }
.frame .slice:nth-of-type(27) {
transition: all 1.28780638s;
background-position: 28.57142857% 42.85714286%;
transform: translateX(31.46014vw) translateY(23.84592vh) rotate(0.26138turn); }
.frame .slice:nth-of-type(28) {
transition: all 1.34540401s;
background-position: 42.85714286% 42.85714286%;
transform: translateX(-15.84603vw) translateY(-11.77581vh) rotate(0.92742turn); }
.frame .slice:nth-of-type(29) {
transition: all 1.91732291s;
background-position: 57.14285714% 42.85714286%;
transform: translateX(29.20341vw) translateY(21.58929vh) rotate(0.96166turn); }
.frame .slice:nth-of-type(30) {
transition: all 1.66523882s;
background-position: 71.42857143% 42.85714286%;
transform: translateX(-17.39995vw) translateY(13.2894vh) rotate(0.40756turn); }
.frame .slice:nth-of-type(31) {
transition: all 1.31406081s;
background-position: 85.71428571% 42.85714286%;
transform: translateX(44.03593vw) translateY(-21.14592vh) rotate(0.63165turn); }
.frame .slice:nth-of-type(32) {
transition: all 1.80191225s;
background-position: 100% 42.85714286%;
transform: translateX(6.19573vw) translateY(-2.07875vh) rotate(0.8969turn); }
.frame .slice:nth-of-type(33) {
transition: all 1.08401865s;
background-position: 0% 57.14285714%;
transform: translateX(33.09844vw) translateY(-23.86804vh) rotate(0.18259turn); }
.frame .slice:nth-of-type(34) {
transition: all 1.27950638s;
background-position: 14.28571429% 57.14285714%;
transform: translateX(-41.49627vw) translateY(18.22547vh) rotate(0.19016turn); }
.frame .slice:nth-of-type(35) {
transition: all 1.42898506s;
background-position: 28.57142857% 57.14285714%;
transform: translateX(-32.53904vw) translateY(-5.11359vh) rotate(0.90259turn); }
.frame .slice:nth-of-type(36) {
transition: all 1.77410379s;
background-position: 42.85714286% 57.14285714%;
transform: translateX(31.51153vw) translateY(12.45239vh) rotate(0.88372turn); }
.frame .slice:nth-of-type(37) {
transition: all 1.78581841s;
background-position: 57.14285714% 57.14285714%;
transform: translateX(-14.70969vw) translateY(-24.8311vh) rotate(0.46023turn); }
.frame .slice:nth-of-type(38) {
transition: all 1.91820736s;
background-position: 71.42857143% 57.14285714%;
transform: translateX(-30.70006vw) translateY(-3.73763vh) rotate(0.59983turn); }
.frame .slice:nth-of-type(39) {
transition: all 1.00051212s;
background-position: 85.71428571% 57.14285714%;
transform: translateX(41.09926vw) translateY(-3.0884vh) rotate(0.73199turn); }
.frame .slice:nth-of-type(40) {
transition: all 1.8542353s;
background-position: 100% 57.14285714%;
transform: translateX(3.3465vw) translateY(24.37323vh) rotate(0.43568turn); }
.frame .slice:nth-of-type(41) {
transition: all 1.22775932s;
background-position: 0% 71.42857143%;
transform: translateX(46.93839vw) translateY(18.0873vh) rotate(0.09963turn); }
.frame .slice:nth-of-type(42) {
transition: all 1.59407453s;
background-position: 14.28571429% 71.42857143%;
transform: translateX(34.05829vw) translateY(19.61024vh) rotate(0.39497turn); }
.frame .slice:nth-of-type(43) {
transition: all 1.1697919s;
background-position: 28.57142857% 71.42857143%;
transform: translateX(-46.78518vw) translateY(-1.42341vh) rotate(0.56074turn); }
.frame .slice:nth-of-type(44) {
transition: all 1.19178078s;
background-position: 42.85714286% 71.42857143%;
transform: translateX(-8.3411vw) translateY(-6.22786vh) rotate(0.78286turn); }
.frame .slice:nth-of-type(45) {
transition: all 1.59889569s;
background-position: 57.14285714% 71.42857143%;
transform: translateX(15.10997vw) translateY(4.13458vh) rotate(0.61345turn); }
.frame .slice:nth-of-type(46) {
transition: all 1.85561142s;
background-position: 71.42857143% 71.42857143%;
transform: translateX(-10.8332vw) translateY(3.36989vh) rotate(0.11912turn); }
.frame .slice:nth-of-type(47) {
transition: all 1.04824501s;
background-position: 85.71428571% 71.42857143%;
transform: translateX(-23.56681vw) translateY(16.63752vh) rotate(0.78015turn); }
.frame .slice:nth-of-type(48) {
transition: all 1.36697415s;
background-position: 100% 71.42857143%;
transform: translateX(-9.36077vw) translateY(-14.67765vh) rotate(0.21023turn); }
.frame .slice:nth-of-type(49) {
transition: all 1.267741s;
background-position: 0% 85.71428571%;
transform: translateX(22.32024vw) translateY(-12.18959vh) rotate(0.76488turn); }
.frame .slice:nth-of-type(50) {
transition: all 1.99335974s;
background-position: 14.28571429% 85.71428571%;
transform: translateX(-36.65916vw) translateY(-8.14409vh) rotate(0.27932turn); }
.frame .slice:nth-of-type(51) {
transition: all 1.69450708s;
background-position: 28.57142857% 85.71428571%;
transform: translateX(10.98691vw) translateY(-8.81887vh) rotate(0.43437turn); }
.frame .slice:nth-of-type(52) {
transition: all 1.90069626s;
background-position: 42.85714286% 85.71428571%;
transform: translateX(-12.36768vw) translateY(-3.30038vh) rotate(0.96383turn); }
.frame .slice:nth-of-type(53) {
transition: all 1.38749194s;
background-position: 57.14285714% 85.71428571%;
transform: translateX(28.52462vw) translateY(16.46441vh) rotate(0.21938turn); }
.frame .slice:nth-of-type(54) {
transition: all 1.48425383s;
background-position: 71.42857143% 85.71428571%;
transform: translateX(35.82644vw) translateY(-6.39567vh) rotate(0.12552turn); }
.frame .slice:nth-of-type(55) {
transition: all 1.89403446s;
background-position: 85.71428571% 85.71428571%;
transform: translateX(-44.0189vw) translateY(11.19932vh) rotate(0.22096turn); }
.frame .slice:nth-of-type(56) {
transition: all 1.69086006s;
background-position: 100% 85.71428571%;
transform: translateX(27.66402vw) translateY(12.09464vh) rotate(0.38736turn); }
.frame .slice:nth-of-type(57) {
transition: all 1.93320432s;
background-position: 0% 100%;
transform: translateX(43.8185vw) translateY(2.6248vh) rotate(0.35723turn); }
.frame .slice:nth-of-type(58) {
transition: all 1.8519944s;
background-position: 14.28571429% 100%;
transform: translateX(-38.28625vw) translateY(-12.70353vh) rotate(0.34052turn); }
.frame .slice:nth-of-type(59) {
transition: all 1.20997302s;
background-position: 28.57142857% 100%;
transform: translateX(-20.55327vw) translateY(14.94934vh) rotate(0.37182turn); }
.frame .slice:nth-of-type(60) {
transition: all 1.99285393s;
background-position: 42.85714286% 100%;
transform: translateX(-34.77603vw) translateY(24.68068vh) rotate(0.33686turn); }
.frame .slice:nth-of-type(61) {
transition: all 1.78574376s;
background-position: 57.14285714% 100%;
transform: translateX(-2.24871vw) translateY(-16.35925vh) rotate(0.76475turn); }
.frame .slice:nth-of-type(62) {
transition: all 1.73212031s;
background-position: 71.42857143% 100%;
transform: translateX(22.35518vw) translateY(-4.50139vh) rotate(0.3145turn); }
.frame .slice:nth-of-type(63) {
transition: all 1.53711971s;
background-position: 85.71428571% 100%;
transform: translateX(-32.50181vw) translateY(-3.42711vh) rotate(0.99228turn); }
.frame .slice:nth-of-type(64) {
transition: all 1.99831264s;
background-position: 100% 100%;
transform: translateX(-11.29064vw) translateY(11.67501vh) rotate(0.61589turn); }
.frame:hover .slice {
opacity: 1;
transform: translate(0, 0) rotate(0); }
.imac {
padding: 4% 6%;
margin: 0 auto;
max-width: 620px;
}
.screen {
background: #2f2f2f;
border-radius: 6px; position: relative;
width: 100%;
}
.screen:before {
content: "";
display: block; padding-top: 64%;
}
.logo {
background: linear-gradient(90deg, #c1c1c3, #cccdd0);
border-radius: 0 0 3% 3%/ 0 0 33.33% 33.33%; position: relative;
width: 100%;
}
.logo:before {
content: "";
display: block; padding-top: 9%;
}
.logo:after {
content: "";
left: 50%;
margin-left: -2.4%;
position: absolute;
top: 20%;
width: 4.8%;
padding-top: 4.8%;
}
.viewport {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: 1.5%;
background: #333;
}
.leg {
margin: 0 auto; position: relative;
width: 20%;
}
.leg:before {
content: "";
display: block; padding-top: 75%;
background: linear-gradient(#bebebf 26%, #b3a1a1);
}
.foot { position: relative;
width: 20%;
margin: 0 auto; perspective: 200px;
}
.foot:before {
content: "";
display: block; padding-top: 40%; transform: rotateX(68deg);
transform-origin: center top;
background: linear-gradient(#b5a6a6, #a6a6a6 53%, #ccc 67%, #aaa 86%, #eee 88%, #868686 95%, #a9a9a9 95%, #000);
border-radius: 0 0 10% 10% / 0 0 30% 30%;
box-shadow: 0 -10px 5px rgba(255, 255, 255, 0.1) inset, 0 -17px 6px rgba(0, 0, 0, 0.1) inset;
} .imac .viewport {
transition: background-position 8s ease;
background-position: 0 0;
background-size: 100% auto;
overflow: hidden;
cursor: pointer;
}
.imac:hover .viewport {
background-position: 0 100%;
}
.imac .viewport:after {
background: radial-gradient(circle at right bottom, transparent 75%, rgba(255, 255, 255, 0.05) 75%, transparent);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
}
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;400;500;600;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");  html {
box-sizing: border-box; }
*, *:before, *:after {
box-sizing: inherit; }
::-moz-selection { background: #8d9592; }
::selection {
background: #8d9592; }
body {
background: linear-gradient(135deg, #FEEB02, rgba(51, 41, 131, 0.95));
font-family: 'Roboto Mono', monospace !important;
font-weight: 300;
overflow-x: hidden; }
strong {
font-family: 'Roboto Mono', monospace !important;
font-weight: 500; }
a {
color: #333; }
.et_pb_scroll_top.et-pb-icon {
background: rgba(0, 0, 0, 0); }
.et_pb_scroll_top:before {
content: "!";
font-weight: bolder;
font-size: 3rem;
color: #333; }
a.wame {
display: block;
position: fixed;
width: 10rem;
bottom: 2rem;
right: 2rem;
z-index: 9999999; } .logo_y {
font-family: 'Space Grotesk', monospace;
display: flex;
position: absolute;
top: 3vh;
left: 0;
width: 275px;
color: #fff;}
.logo_y h3 {
display: block;
position: absolute;
background-image: url(https://www.31416k.com/wp-content/uploads/2026/01/3-w.svg);
background-repeat: no-repeat;
background-size: contain;
width: 80px;
height: 67px;
top: 0px;
left: -5px;
}
.logo_y h2 {
font-size: 4.5rem;
font-weight: 700;
line-height: 1.2;
margin-top:.5rem;
margin-left: 45px;
color: #fff; }
.logo_y h2::after {
content: "©";
font-family: 'Roboto';
position: absolute;
transition: 0.5s;
top: 1.65rem;
left: 5.5rem;
font-size: 1rem;
color: #fff; }
.logo_y span.btn-list {
font-size: 4.7rem;
width: 5px;
height: 80px;
top: 15px;
position: relative;
overflow: hidden;
transition: width .4s ease;
color: #fff; }
.logo_y:hover span {
width: 450px; }
.logo_y:hover span.btn-list n {
transform: translateY(20px);
color: #fff; }
.logo_y:hover h2::after{
top: 1.65rem;
left: 18rem;
transition: all 0.4s ease;
}
span.btn-list n {
position: absolute;
transition: all 0.3s ease-out;
transform: translateY(100px); }
.logo_y span.btn-list2 n {
display: block;
position: absolute;
background-image: url(https://www.31416k.com/wp-content/uploads/2026/01/1416-w.svg);
background-repeat: no-repeat;
background-size: contain;
width: 0;
height: 0;
top: 155px;
left: 125px;
}
.logo_y:hover span.btn-list2 n {
width: 190px;
height: 70px;
top: 15px;
left: 50px;
transition: all 0.3s ease-out;
} .et_header_style_left .logo_container {
display: none; }
.mobile_menu_bar:before {
color: white; 
font-size: 40px;}
.et_mobile_menu {
top: 9rem;
border: none;
background-color: rgba(255, 255, 255, 0.85) !important; }
.et_mobile_menu li a {
color: #424242 !important;
border: none; }
#top-menu {
font-weight: 500; }
#top-menu a:hover {
text-decoration: underline !important; }
ul.sub-menu {
background-color: rgba(255, 255, 255, 0.85) !important;
border: none !important;
}
ul.sub-menu a{
color: #424242 !important;
font-size:15px !important;
}
@media (max-width: 982px) {
ul.sub-menu {
background-color: rgba(255, 255, 255, 0) !important;
}
ul.sub-menu a{
font-size:14px !important;
}
}
.texto-const {
height: 50vh;
width: 45%;
margin-top: 7rem;
margin-left: 12rem;
text-align: left;
font-size: 4rem;
line-height: 1;
color: white; }
@media (max-width: 1400px) {
.texto-const {
margin-top: 10vh;
margin-left: 5rem;
font-size: 3rem;
width: 60%; } }
@media (max-width: 820px) {
.texto-const {
margin-top: 10vh;
margin-left: 0;
font-size: 2rem;
width: 100%; } }
.texto-const::after {
content: "";
display: block;
position: relative;
height: 8px;
width: 10rem;
margin-top: 3rem;
background-color: white; }
.et_pb_module.et_pb_image.et_pb_image_0.avion {
position: absolute;
top: 0;
max-width: 30rem;
left: 50%;
opacity: .4; }
@media (max-width: 820px) {
.et_pb_module.et_pb_image.et_pb_image_0.avion {
top: 5rem;
width: 15rem; } }
.et_pb_module.et_pb_image.et_pb_image_0.avion:hover {
opacity: 1;
z-index: 999; }
.texto-2 {
font-size: 2rem;
font-weight: 400;
line-height: 1.2;
color: white;
margin-top: 3.5rem; }
.texto-2 h4 {
padding: 2rem 0;
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase; }
@media (max-width: 820px) {
.texto-2 {
font-size: 1.25rem; } }
@media (max-width: 820px) {
body.home .text-2 {
font-size: 1.25rem;
margin-top: -1.5rem !important; } }
.texto-3 {
font-size: 1.3rem;
font-weight: 400;
line-height: 1.2;
color: white; }
.texto-3 h4 {
padding: 2rem 0;
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
color: #424242; }
.texto-3 a:hover {
text-decoration: underline; }
@media (max-width: 820px) {
.texto-3 {
margin-top: -1rem; } }
a.btn-1 {
border-radius: 100px;
font-size: 1rem; }
@media (max-width: 820px) {
a.btn-1 {
margin-left: 0; } }
.pie a:hover {
text-decoration: underline; }
@media (max-width: 980px) {
.about-1 {
display: flex;
flex-wrap: wrap;
flex-direction: column; }
.about-1 .et_pb_column_4 {
order: -1; } }
@media (max-width: 980px) {
.img-garden {
margin-bottom: 3rem !important; } }
@media (max-width: 980px) {
.port-1 {
margin-top: -10rem !important; } }
@media (max-width: 980px) {
.port-3 {
display: flex;
flex-wrap: wrap;
flex-direction: column; }
.port-3 .et_pb_column_9 {
order: -2; } } .et-pb-arrow-next, .et-pb-arrow-prev {
position: absolute;
top: 50%;
z-index: 100;
font-size: 60px;
color: #424242; }
@media (max-width: 820px) {
.et-pb-arrow-next, .et-pb-arrow-prev {
display: none; } } .flor {
display: block;
position: absolute;
width: 500px;
opacity: .4; }
.flor:hover {
opacity: 1; }
@media (max-width: 820px) {
.flor {
margin-top: 13.5rem !important; } }
.formulario-contacto {
margin-top: 8rem;
margin-bottom: 10rem !important;
padding: 2rem;
background-color: rgba(255, 255, 255, 0.38); }
.et_pb_contact_submit.et_pb_button {
width: 8rem;
background-color: white;
border-color: white;
color: #424242;
border-radius: 100px;
font-size: 1rem;
text-transform: uppercase; }
.txt-contact, .et_pb_contact_field {
font-weight: 400;
font-size: .75rem; }
.et_pb_contact_field_options_title {
display: none; }