@charset "UTF-8";
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent; position: relative;
z-index: 1; }
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
touch-action: manipulation;
-moz-backface-visibility: hidden; }
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden; -webkit-transform: translate3d(0px, 0px, 0px); }
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0); }
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.owl-carousel .owl-item img {
display: block;
width: 100%; }
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none; }
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
background: none;
color: inherit;
border: none;
padding: 0 !important;
font: inherit; }
.owl-carousel.owl-loaded {
display: block; }
.owl-carousel.owl-loading {
opacity: 0;
display: block; }
.owl-carousel.owl-hidden {
opacity: 0; }
.owl-carousel.owl-refresh .owl-item {
visibility: hidden; }
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.owl-carousel.owl-grab {
cursor: move;
cursor: grab; }
.owl-carousel.owl-rtl {
direction: rtl; }
.owl-carousel.owl-rtl .owl-item {
float: right; } .no-js .owl-carousel {
display: block; } .owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both; }
.owl-carousel .owl-animated-in {
z-index: 0; }
.owl-carousel .owl-animated-out {
z-index: 1; }
.owl-carousel .fadeOut {
animation-name: fadeOut; }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } } .owl-height {
transition: height 500ms ease-in-out; } .owl-carousel .owl-item { }
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease; }
.owl-carousel .owl-item .owl-lazy[src^=""], .owl-carousel .owl-item .owl-lazy:not([src]) {
max-height: 0; }
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d; } .owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000; }
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url(//sinerbit.com/wp-content/themes/sinerbit/assets/styles/owl.video.play.png) no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease; }
.owl-carousel .owl-video-play-icon:hover {
-ms-transform: scale(1.3, 1.3);
transform: scale(1.3, 1.3); }
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none; }
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease; }
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%; }.owl-theme .owl-nav {
margin-top: 10px;
text-align: center;
-webkit-tap-highlight-color: transparent; }
.owl-theme .owl-nav [class*='owl-'] {
color: #FFF;
font-size: 14px;
margin: 5px;
padding: 4px 7px;
background: #D6D6D6;
display: inline-block;
cursor: pointer;
border-radius: 3px; }
.owl-theme .owl-nav [class*='owl-']:hover {
background: #869791;
color: #FFF;
text-decoration: none; }
.owl-theme .owl-nav .disabled {
opacity: 0.5;
cursor: default; }
.owl-theme .owl-nav.disabled + .owl-dots {
margin-top: 10px; }
.owl-theme .owl-dots {
text-align: center;
-webkit-tap-highlight-color: transparent; }
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline; }
.owl-theme .owl-dots .owl-dot span {
width: 10px;
height: 10px;
margin: 5px 7px;
background: #D6D6D6;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border-radius: 30px; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
background: #869791; }:root { --header-height: 113px; --logowidth: 185px;  --dark-color: #030303;
--light-color: #FCFDFD;
--grey-color: #57575C;
--bg-dark: #151416;
--bg-light: #F0F0F0;
--highlight-bg-color: var(--alt-color);
--highlight-color: var(--main-color); --success-color: #0f834d;
--error-color: #e2401c;
--warning-color: #F1B055;
--info-color: #3d9cd2; --filter-to-dark: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7480%) hue-rotate(295deg) brightness(95%) contrast(97%);
--filter-to-light: brightness(0) saturate(100%) invert(100%) sepia(19%) saturate(594%) hue-rotate(92deg) brightness(107%) contrast(98%); --titlefont: 'Actay Wide', sans-serif;
--titlesize: 80px;
--titleletterspacing: initial;
--bodyfont: 'Actay', sans-serif;
--bodysize: 20px;
--bodylineheight: initial; --ratio-hr: 620/350;
--ratio-vr: 300/380;
--ratio-sq: 408/393; --radius: 16px; --shadow: 0px 4px 15px 0px #7785AA2E; --default-trans: all 0.3s;
--slow-trans: all 0.8s;
--scale-up: 1.10;
--scale-down: 0.97;
} @media (max-width: 96em) {
:root {
--titlesize: 64px;
--bodysize: 18px;
}
} @media (max-width: 80em) {
:root {
--titlesize: 56px;
}
} @media (max-width: 64em) {
:root {
--titlesize: 48px;
--header-height: 97px;
}
} @media (max-width: 30em) {
:root {
--titlesize: 40px;
--bodysize: 18px;
}
} @media (max-width: 24em) {} h1 {
font-size: var(--titlesize);
}
h2 {
font-size: calc(0.80 * var(--titlesize));
}
h3 {
font-size: calc(0.40 * var(--titlesize));
} @media (max-width: 64em) {
h3 {
font-size: calc(0.50 * var(--titlesize));
}
} html.dark-mode {
--main-color: var(--dark-color);
--alt-color: var(--light-color);
--body-color: var(--light-color);
--body-alt-color: #D9D9D9;
--bg-color: var(--bg-dark);
--bg-alt-color: var(--bg-light);
--cf7-field-bg: #1D1B1E;
--filter-to-main: var(--filter-to-dark);
--filter-to-alt: var(--filter-to-light);
}
html.light-mode {
--main-color: var(--light-color);
--alt-color: var(--dark-color);
--body-color: var(--dark-color);
--body-alt-color: var(--grey-color);
--bg-color: var(--bg-light);
--bg-alt-color: var(--bg-dark);
--cf7-field-bg: #E6E6E6;
--filter-to-main: var(--filter-to-light);
--filter-to-alt: var(--filter-to-dark);
} html.dark-mode .section-alt {
--main-color: var(--light-color);
--alt-color: var(--dark-color);
--body-color: var(--dark-color);
--body-alt-color: var(--grey-color);
--bg-color: var(--bg-light);
--bg-alt-color: var(--bg-dark);
--cf7-field-bg: #E6E6E6;
--filter-to-main: var(--filter-to-light);
--filter-to-alt: var(--filter-to-dark);
}
html.light-mode .section-alt {
--main-color: var(--dark-color);
--alt-color: var(--light-color);
--body-color: var(--light-color);
--body-alt-color: #D9D9D9;
--bg-color: var(--bg-dark);
--bg-alt-color: var(--bg-light);
--cf7-field-bg: #1D1B1E;
--filter-to-main: var(--filter-to-dark);
--filter-to-alt: var(--filter-to-light);
} .switcher {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
border: var(--border-w) solid var(--alt-color);
border-radius: var(--radius);
transition: var(--default-trans);
}
.switcher::before {
content: '';
position: absolute;
width: calc(var(--unit) - var(--border-w));
height: calc(var(--unit) - (2 * var(--border-w)));
top: 0;
left: 0;
bottom: 0;
background-color: var(--alt-color);
border-radius: calc(var(--radius) - (2 * var(--border-w))) 0 0 calc(var(--radius) - (2 * var(--border-w)));
transition: var(--default-trans);
}
input:checked + .switcher::before {
border-radius: 0 calc(var(--radius) - (2 * var(--border-w))) calc(var(--radius) - (2 * var(--border-w))) 0;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
} .theme-switch {
--unit: 38px;
--border-w: 2px;
position: relative;
display: inline-block;
width: calc(var(--unit) * 2);
height: var(--unit);
cursor: pointer;
}
.theme-switch::before,
.theme-switch::after { content: '';
display: inline-block;
width: calc(var(--unit) * 0.50);
height: calc(var(--unit) * 0.50);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
position: absolute;
top: 0;
z-index: 1;
}
.theme-switch::before { background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/icon-moon.svg);
filter: var(--filter-to-main);
left: var(--border-w);
transform: translateX(50%) translateY(50%);
}
.theme-switch::after { background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/icon-sun.svg);
filter: var(--filter-to-alt);
right: var(--border-w);
transform: translateX(-50%) translateY(50%);
}
.theme-switch[data-mode="is-light"]::before {
filter: var(--filter-to-alt);
}
.theme-switch[data-mode="is-light"]::after {
filter: var(--filter-to-main);
}
.theme-switch input { opacity: 0;
width: 0;
height: 0;
} @keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes scroll-down {
0% {height:0px}
100% {height:50px}
}
#main-header,
.section[section-index="0"],
.section[section-index="1"],
.section[section-index="2"] {
animation: fadeIn 0.35s ease-out;
}
.fadein {
animation: fadeIn 1s ease-out;
} :root { --padding: 140px;
--container: 12vw;
--spacing-v: 30px; 
}
.container {
padding: 0 var(--container);
position: relative;
z-index: 50;
}
.container.container-xs {
padding: 0 calc(var(--container) * 2);
}
.container.container-fullwidth {
padding: 0;
}
.container.container-offcanvas {
z-index: 95;
} @media (min-width: 120.0625em) {
:root {
--container: 15vw;
}
} @media (max-width: 105em) {
:root {
--padding: 120px;
--container: 7.5vw;
}
} @media (max-width: 80em) {
:root {
--padding: 100px;
--container: 5vw;
--spacing-v: 24px;
}
} @media (max-width: 40em) {
:root {
--container: 4vw;
--spacing-v: 20px;
}
.container.container-xs {
padding: 0 var(--container);
}
} @media (max-width: 24em) {
:root {
--padding: 70px;
}
} .section {
padding: var(--padding) 0;
background-color: var(--main-color);
position: relative;
}
.section-main + .section-main,
.section-alt + .section-alt {
padding-top: 0;
}
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section p {
color: var(--body-color)
} .grid {
display: grid;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.flex-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-around {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
} @media (min-width: 64.0625em) { .hide-for-desktop {
display: none !important;
}
}
@media (min-width: 40.0625em) and (max-width: 64em) { .hide-for-tablet {
display: none !important;
}
}
@media (max-width: 40em) { .hide-for-mobile {
display: none !important;
}
} .archive-pagination {
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 20px;
margin-top: calc(var(--padding) * 0.50);
}
.archive-pagination > a,
.archive-pagination > span {
display: block;
width: 30px;
aspect-ratio: 1/1;
padding: 8px 6px 3px;
background-color: transparent;
border-radius: 6px;
border: 1px solid #E0E0E0;
text-align: center;
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 0.90);
color: var(--dark-color);
line-height: calc(var(--bodysize) * 0.90);
transition: var(--default-trans);
}
.archive-pagination > a:hover {
background-color: var(--dark-color);
border-color: var(--dark-color);
color: var(--light-color);
}
.archive-pagination > a.prev,
.archive-pagination > a.next {
border: none;
} .archive-pagination > span.current {
background-color: var(--grey-color);
color: var(--light-color);
} @media (max-width: 40em) {
.archive-pagination a:not(.prev):not(.next):not(.first):not(.last),
.archive-pagination span.dots {
display: none;
}
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none !important;
}
*:before,
*:after {
box-sizing: border-box;
}
html {
max-width: 100%;
overflow-x: hidden;
scroll-behavior: smooth;
font-family: var(--bodyfont);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: var(--bodysize);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
font-family: var(--bodyfont);
font-size: var(--bodysize);
line-height: var(--bodylineheight);
color: var(--body-color);
background-color: var(--main-color);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic; }
mark {
background: var(--highlight-bg-color);
color: var(--highlight-color);
padding: 0 3px;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
vertical-align: middle;
}
svg:not(:root) {
overflow: hidden;
}
figure {
}
hr {
box-sizing: content-box;
height: 0;
margin-top: var(--spacing-v);
margin-bottom: var(--spacing-v);
border: 0;
border-top: 1px solid var(--alt-color);
opacity: 0.6;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: var(--bodyfont);
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid var(--alt-color);
padding: 20px;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input,
textarea,
select,
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
}
[role="button"] {
cursor: pointer;
}
iframe {
border: none;
}
summary::-webkit-details-marker {
display: none;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
left: 0;
} em {
font-style: italic;
}
.logo {
width: var(--logowidth);
}
.ancora {
display: block;
width: 100%;
transform: translateY(calc(-1 * var(--header-height) - 0.40 * var(--padding))) !important;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-family: var(--titlefont);
font-weight: bold;
line-height: 1em;
letter-spacing: var(--titleletterspacing);
color: var(--body-color);
}
p {
padding: 0;
margin: 0 0 var(--spacing-v) 0;
font-size: var(--bodysize);
font-family: var(--bodyfont);
line-height: 1.4em;
}
p:last-of-type {
margin-bottom: 0;
}
p a {
border-bottom: 1px dotted var(--body-color) !important;
transition: var(--default-trans);
display: inline;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 105%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 0.3s;
}
p a:hover {
background-size: 100% 1px;
} ul,
ol {
display: inline-block;
text-align: left;
list-style-position: outside;
margin-left: 30px;
margin-top: calc(var(--padding) * 0.25);
margin-bottom: calc(var(--padding) * 0.25);
}
ul {
list-style-type: initial;
}
ol {
list-style-type: decimal;
}
ul li,
ol li {
line-height: 1.6em;
display: list-item;
}
p:not(:last-of-type) + ul,
p:not(:last-of-type) + ol {
margin-top: 0;
}
blockquote {
position: relative;
}
blockquote::before {
content: '';
display: block;
width: 84px;
height: 76px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/quote.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
opacity: 1;
}
blockquote > p {
margin: calc(var(--spacing-v) * 2) 0 var(--spacing-v) !important;
font-size: calc(1.2 * var(--bodysize));
}
blockquote > .signature {
color: var(--body-alt-color);
}
blockquote button {
margin-top: var(--spacing-v);
}
a {
display: inline-block;
line-height: 1;
text-decoration: none;
background-color: transparent;
position: relative;
color: inherit;
}
a.link::before {
content: '';
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
background-color: var(--alt-color);
transition: var(--default-trans);
}
a.link:hover::before {
width: 100%;
}
a.link::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-left: 12px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
position: relative;
top: 0;
left: 0;
rotate: -90deg;
transition: transform 0.70s;
}
a.link:hover::after {
transform: rotateY(-360deg);
}
a.link-nomark::after {
display: none;
}
a.link-dotted {
border-bottom: 1px dotted var(--body-color);
}
a:focus,
a:active,
a:hover {
text-decoration: none;
outline: 0;
}
a.link.link-main {
color: var(--body-color);
}
a.link.link-main::before {
background-color: var(--body-color);
}
a.link.link-main::after {
filter: var(--filter-to-alt);
}
a.link.link-grey {
color: var(--grey-color);
}
a.link.link-grey::before {
background-color: var(--grey-color);
}
a.link.link-dark {
color: var(--dark-color);
}
a.link.link-dark::before {
background-color: var(--dark-color);
}
a.link.link-light {
color: var(--light-color);
}
a.link.link-light::before {
background-color: var(--light-color);
}
a.link.link-alpha {
opacity: 0.70;
}
a.link.link-alpha:hover {
opacity: 1;
}
a.link-noint::before {
display: none;
}
a.anchor {
position: relative;
top: calc(-1 * var(--header-height));
}
button {
background-color: transparent;
border: none;
}
button.cta {
font-family: var(--bodyfont);
position: relative;
line-height: 1em;
}
button.cta::before {
content: '';
display: block;
width: 100%;
height: 1px;
background: var(--alt-color);
position: absolute;
left: 0;
bottom: -4px;
transition: var(--default-trans);
}
button.cta:hover::before {
animation:cta-hover 1.2s;
}
@keyframes cta-hover {
0% {width:0%}
100% {width:100%}
}
button.cta.cta-alt::before {
background: var(--main-color);
}
button.cta .cta-label {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 0.90);
letter-spacing: 0.025em;
color: var(--main-color);
}
button.cta.cta-alt .cta-label {
color: var(--alt-color);
}
button.cta.cta-button {
padding: 12px 16px 10px;
transition: var(--default-trans);
border-radius: var(--radius);
border-width: 2px;
border-style: solid;
}
button.cta.cta-button::before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
border-radius: var(--radius);
transition: var(--default-trans);
z-index: -1;
}
button.cta.cta-button:hover::before {
opacity: 1; animation: none;
}
button.cta-main.cta-button {
background-color: var(--alt-color);
border-color: var(--alt-color);
}
button.cta-main.cta-button:hover {
background-color: transparent;
border-color: var(--alt-color);
}
button.cta-main.cta-button::before {
display: none;
}
button.cta-main.cta-button .cta-label {
color: var(--main-color);
}
button.cta-main.cta-button:hover .cta-label {
color: var(--alt-color);
}
button.cta-alt.cta-button {
background-color: var(--main-color);
border-color: var(--main-color);
}
button.cta-alt.cta-button:hover {
background-color: transparent;
border-color: var(--main-color);
}
button.cta-alt.cta-button::before {
display: none;
}
button.cta-alt.cta-button .cta-label {
color: var(--alt-color);
}
button.cta-alt.cta-button:hover .cta-label {
color: var(--main-color);
}
button.cta-light.cta-button {
background-color: var(--light-color);
border-color: var(--light-color);
}
button.cta-light.cta-button:hover {
background-color: var(--dark-color);
border-color: var(--dark-color);
}
button.cta-light.cta-button::before {
display: none;
}
button.cta-light.cta-button .cta-label {
color: var(--dark-color);
}
button.cta-light.cta-button:hover .cta-label {
color: var(--light-color);
}
button.cta-light.cta-button .cta-mark {
filter: var(--filter-to-dark);
}
button.cta-light.cta-button:hover .cta-mark {
filter: var(--filter-to-light);
}
button.cta-dark.cta-button {
background-color: var(--dark-color);
border-color: var(--dark-color);
}
button.cta-dark.cta-button:hover {
background-color: var(--light-color);
border-color: var(--dark-color);
}
button.cta-dark.cta-button::before {
display: none;
}
button.cta-dark.cta-button .cta-label {
color: var(--light-color);
}
button.cta-dark.cta-button:hover .cta-label {
color: var(--dark-color);
}
button.cta-dark.cta-button .cta-mark {
filter: var(--filter-to-light);
}
button.cta-dark.cta-button:hover .cta-mark {
filter: var(--filter-to-dark);
}
button.cta-muted.cta-button {
background-color: transparent;
border-color: var(--alt-color);
}
button.cta-muted.cta-button::before {
background-color: var(--alt-color);
}
button.cta-muted.cta-button .cta-label {
color: var(--alt-color);
}
button.cta-muted.cta-button:hover .cta-label {
color: var(--main-color);
}
button.cta-active {
background-color: var(--bg-color) !important;
border-color: var(--bg-color) !important;
}
button.cta-active:hover {
background-color: var(--alt-color) !important;
border-color: var(--alt-color) !important;
}
button.cta-active:hover .cta-label {
color: var(--main-color) !important;
}
button.cta-button {
display: flex;
flex-wrap: nowrap;
}
button.cta-button .cta-mark {
--unit: 12px;
width: var(--unit);
height: var(--unit);
margin-left: 12px;
position: relative;
top: 2px;
}
button.cta-button .cta-mark::before {
content: '';
display: inline-block;
width: var(--unit);
height: var(--unit);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-main);
}
button.cta-button.cta-alt .cta-mark::before {
filter: var(--filter-to-alt);
}
button.cta-button:hover .cta-mark::before {
filter: var(--filter-to-alt);
}
button.cta-button.cta-alt:hover .cta-mark::before {
filter: var(--filter-to-main);
}
#breadcrumbs {
width: 100%;
margin-bottom: calc(var(--spacing-v) * 0.50);
}
#breadcrumbs,
#breadcrumbs a {
position: relative;
border-bottom: none !important;
font-family: var(--bodyfont);
font-size: calc(var(--bodysize) * 0.80);
color: var(--body-alt-color);
transition: var(--default-trans);
}
#breadcrumbs a:hover {
color: var(--body-color);
}
#breadcrumbs .breadcrumb_last {
color: var(--body-color);
}
#breadcrumbs a::before {
content: '';
position: absolute;
bottom: -2px;
width: 0;
height: 1px;
transition: var(--default-trans);
background-color: var(--body-color);
}
#breadcrumbs a:hover::before {
width: 100%;
}
#breadcrumbs > span > span {
margin-left: 4px;
margin-right: 4px;
}
#breadcrumbs > span > span:first-of-type {
margin-left: 0;
}
#breadcrumbs > span > span.breadcrumb_last {
margin-right: 0;
}
#breadcrumbs .breadcrumbs-separator {
margin: 0;
}
.modal-link {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.modal-link .modal-icon {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.modal-link .modal-icon img {
width: 100%;
height: 100%;
display: block;
}
.grecaptcha-badge {
z-index: 100;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: var(--default-trans);
}
.grecaptcha-badge.in {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.fancybox-infobar {
display: none;
}
.fancybox-slide {
padding: 0;
}
.fancybox-toolbar .fancybox-button--play,
.fancybox-toolbar .fancybox-button--fullscreen,
.fancybox-toolbar .fancybox-button--thumbs,
.fancybox-toolbar .fancybox-button--share {
display: none !important;
}
.fancybox-show-thumbs .fancybox-inner {
right: 0 !important;
bottom: 120px;
}
.fancybox-thumbs__list a::before {
transition: all 0s;
border: 0;
opacity: 0;
}
.fancybox-thumbs__list a.fancybox-thumbs-active::before {
border: 3px solid var(--alt-color);
transition: all 0s;
}
.fancybox-thumbs {
position: absolute;
background-color: transparent;
text-align: center;
top: unset;
bottom: 0;
right: 0;
width: 100%;
height: auto !important;
margin: 0;
padding: 10px 0 30px;
-webkit-tap-highlight-color: transparent;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
box-sizing: border-box;
}
.fancybox-thumbs .fancybox-thumbs__list {
display: inline-block;
}
body.compensate-for-scrollbar { margin-right: unset;
} @media (max-width: 80em) {
button.cta.cta-button {
padding: 10px 24px;
}
} @media (max-width: 53.0625em) {
blockquote::before {
width: 63px;
height: 57px;
}
} .gsap-refresh {
width: 0;
height: 0;
opacity: 0;
} ::placeholder,
::-webkit-input-placeholder {
color: var(--alt-color);
opacity: 0.75;
} .wpcf7-not-valid-tip, 
.wpcf7-validation-errors,
.wpcf7-response-output {
display: none !important;
}
.wpcf7-not-valid {
border: 1px solid var(--error-color) !important;
}
.wpcf7-list-item {
margin: 0;
display: block;
}
.wpcf7-list-item:not(:only-of-type) {
margin-bottom: 10px;
}
.cf7-form {
--cf7-fontsize: var(--bodysize);
--cf7-letterspacing: unset;
--field-margin: calc(var(--spacing-v) * 0.50);
--field-padding-v: 12px;
--field-padding-h: 20px;
} .cf7-form .form-area + .form-area {
margin-top: calc(var(--spacing-v) * 1.20);
}
.cf7-form .form-area-title {
width: 100%;
margin-bottom: calc(var(--spacing-v) * 0.80);
}
.cf7-form h5.form-area-title {
margin-top: calc(var(--spacing-v) * 0.30);
margin-bottom: 6px;
color: var(--body-alt-color);
}
.cf7-form h4.form-area-title + h5.form-area-title {
margin-top: 0;
}
.cf7-form .form-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.cf7-form .form-row.single-input {
display: flex;
flex-wrap: wrap;
position: relative;
}
.cf7-form .form-row.single-input .field-submit {
--unit: 12px; }
.cf7-form .form-row.single-input .field-submit button {
font-size: 0;
position: absolute;
right: var(--field-padding-h);
top: 50%;
height: var(--unit);
width: var(--unit);
margin: 0;
transform: translateY(calc(-50% - (var(--field-margin) * 0.50)));
transition: var(--default-trans);
}
.cf7-form .form-row.single-input .field-submit button::after {
content: '';
height: 100%;
width: 100%;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
display: block;
position: absolute;
top: 0;
left: 0;
rotate: -90deg;
transition: transform 0.70s;
}
.cf7-form .form-row.single-input .field-submit button:hover::after {
transform: rotateY(-360deg);
}
.cf7-form .form-row.last {
margin-top: calc(var(--spacing-v) * 0.50);
align-items: center;
row-gap: calc(var(--padding) * 0.50);
}
.cf7-form .field {
width: 49.5%;
margin-bottom: var(--field-margin);
position: relative;
}
.cf7-form .field-100 {
width: 100%;
}
.cf7-form .field-40 {
width: 39.5%;
}
.cf7-form .field-20 {
width: 19.5%;
}
.cf7-form .field:not(.field-acceptance):not(.field-sided) label {
pointer-events: none;
font-size: var(--cf7-fontsize);
letter-spacing: var(--cf7-letterspacing);
color: var(--body-color);
opacity: 0.65;
display: block;
position: absolute;
left: var(--field-padding-h);
top: 50%;
transform: translateY(-50%);
z-index: 1;
transition: var(--default-trans);
}
.cf7-form .field.field-textarea label {
top: 0.5em !important;
transform: translateY(0) !important;
}
.cf7-form .field:not(.field-acceptance):not(.field-sided).is-focused label {
top: 0;
font-size: calc(var(--cf7-fontsize) * 0.70);
transform: translateY(-50%);
}
.cf7-form .field-input input,
.cf7-form .field-textarea textarea,
.cf7-form .field-select select {
-webkit-appearance: none;
-moz-appearance: none;
font-size: var(--cf7-fontsize);
letter-spacing: var(--cf7-letterspacing);
width: 100%;
position: relative;
background-color: var(--cf7-field-bg);
color: var(--alt-color);
padding: var(--field-padding-v) var(--field-padding-h);
border: 1px solid var(--cf7-field-bg);
border-radius: calc(var(--radius) * 0.75);
transition: var(--default-trans);
}
.cf7-form .field-textarea,
.cf7-form .field-upload {
width: 100%;
}
.cf7-form .field-upload .wpcf7-file {
width: 100%;
}
.cf7-form .field-upload {
--unit: 18px;
pointer-events: none;
text-align: left !important;
}
.cf7-form .field-upload .wpcf7-form-control-wrap {
position: unset;
}
.cf7-form .field-upload > span::before {
content: '';
display: block;
width: var(--unit);
height: var(--unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/icon-upload.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
left: var(--unit);
top: calc(var(--unit) * 0.70 + var(--unit) * 0.05);
filter: var(--filter-to-alt);
}
.cf7-form .field-upload input {
color: var(--grey-color);
font-size: calc(0.70 * var(--bodysize));
cursor: default;
white-space: normal;
}
.cf7-form .field-upload input::-webkit-file-upload-button {
visibility: hidden;
}
html[lang="it"] .cf7-form .field-upload input::before {
content: 'Carica file';
}
html[lang="en"] .cf7-form .field-upload input::before {
content: 'Upload file';
}
html[lang="fr"] .cf7-form .field-upload input::before {
content: 'Chargez file';
}
html[lang="it"] .cf7-form .field-upload.field-cv input::before {
content: 'Carica il tuo CV';
}
html[lang="en"] .cf7-form .field-upload.field-cv input::before {
content: 'Upload your CV';
}
html[lang="fr"] .cf7-form .field-upload.field-cv input::before {
content: 'Chargez votre CV';
}
.cf7-form .field-upload input::before {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 0.90);
letter-spacing: 0.025em;
color: var(--alt-color);
display: inline-block;
background: transparent;
border: 2px solid var(--alt-color);
border-radius: var(--radius);
padding: calc(var(--unit) * 0.70) var(--unit) calc(var(--unit) * 0.70) calc(2.5 * var(--unit));
outline: none;
margin-bottom: 10px;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
transition: all 0.3s;
pointer-events: auto;
}
.cf7-form .field-upload input:active {
outline: 0;
}
.cf7-form .field-upload input:hover::before {
background-color: var(--cf7-field-bg);
}
.cf7-form .field-upload input:active::before {
background-color: var(--cf7-field-bg); 
}
.cf7-form .field-caption {
font-size: calc(0.66 * var(--bodysize));
color: var(--alt-color);
margin-top: 10px;
}
.cf7-form .field-select::before {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
filter: var(--filter-to-alt);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/chevron.svg);
background-repeat: no-repeat;
background-position: center;
top: 50%;
right: 0;
z-index: 1;
transform: translateY(-50%);
pointer-events: none;
}
.cf7-form .field-select::after { content: '';
width: 100%;
height: 100%;
background-color: var(--cf7-field-bg);
position: absolute;
bottom: 0;
left: 0;
border-radius: calc(var(--radius) * 0.75);
opacity: 1;
transition: var(--default-trans);
pointer-events: none;
}
.cf7-form .field-select:has(.wpcf7-not-valid)::after {
border: 1px solid var(--error-color);
}
.cf7-form .field-select.is-focused::after {
opacity: 0;
}
.cf7-form .field-select:not(.is-focused) select {
opacity: 0;
}
.cf7-form .field-select.is-focused select {
opacity: 1;
}
.cf7-form .field-acceptance,
.cf7-form .field-toggle {
color: var(--alt-color);
font-size: calc(var(--cf7-fontsize) * 0.78);
letter-spacing: var(--cf7-letterspacing);
position: relative;
}
.cf7-form .field-acceptance > span {
display: inline-block;
}
.cf7-form .field-acceptance input[type="checkbox"] {
width: 15px;
height: 15px;
position: relative;
top: 2px;
margin-right: 6px;
background-color: var(--cf7-field-bg);
border: 1px solid var(--grey-color);
border-radius: 2px;
}
.cf7-form .field-acceptance input[flag="checked"]::before {
width: 15px;
height: 15px;
position: absolute;
font-size: 15px;
content: '✔';
color: var(--body-color);
line-height: 15px;
padding: 0;
top: 0;
left: 2px;
} .cf7-form .field-acceptance,
.cf7-form .field-toggle,
.cf7-form .field-submit {
width: unset;
margin-bottom: 0;
}
.cf7-form .field-acceptance + .field-acceptance,
.cf7-form .field-toggle + .field-toggle {
margin-top: calc(var(--field-margin) * 1);
}
.cf7-form .field-submit {
color: var(--body-color);
}
.field-toggle {
margin-top: 12px;
display: flex;
align-items: center;
}
.field-toggle .wpcf7-list-item {
margin: 0 12px 0 0;
display: inline-block;
}
.field-toggle > span input[type="checkbox"] {
width: 40px;
height: 24px;
position: relative;
}
.field-toggle > span input[type="checkbox"]::before,
.field-toggle > span input[type="checkbox"]:checked::before {
content: '';
font-size: 0;
cursor: pointer;
display: inline-block; 
background-color: var(--cf7-field-bg);
border-radius: 100px;
padding: 12px 20px; 
position: relative;
transition: border 0.3s, color 0.3s;
}
.field-toggle > span input[type="checkbox"]::after,
.field-toggle > span input[type="checkbox"]:checked::after {
content: '';
display: block;
position: absolute;
width: 17px;
height: 17px;
background-color: var(--alt-color);
border-radius: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: left 0.3s;
pointer-events: none;
}
.field-toggle > span input[type="checkbox"]::after {
left: 30%;
}
.field-toggle > span input[flag="checked"]:checked::after {
left: 70%;
background-color: var(--alt-color);
}  .field-sided {
--unit: 50px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: calc(var(--spacing-v) * 0.50);
color: var(--alt-color);
padding-bottom: var(--field-margin);
}
[data-class="wpcf7cf_group"] {
width: 100%;
margin-top: calc(var(--field-margin) * -1);
margin-bottom: calc(var(--field-margin) * 2);
color: var(--alt-color);
}
[data-class="wpcf7cf_group"] .field-group-title {
margin-bottom: var(--field-margin);
color: var(--alt-color);
font-size: calc(var(--bodysize) * 0.90);
}
.field-sided > label {
width: 79%;
}
.field-sided > span {
width: 15%;
}
.field-sided .wpcf7-radio {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: center;
}
.field-sided .wpcf7-radio.wpcf7-not-valid {
border: none !important;
}
.field-sided .wpcf7-list-item {
margin: 0;
width: var(--unit);
height: var(--unit);
text-align: center;
background-color: var(--cf7-field-bg);
border: 1px solid var(--cf7-field-bg);
border-radius: calc(var(--radius) * 0.75);
align-items: center;
justify-content: center;
display: flex;
position: relative;
justify-self: center;
}
.field-sided .wpcf7-list-item.first {
justify-self: start;
}
.field-sided .wpcf7-list-item.last {
justify-self: end;
}
.field-sided .wpcf7-radio.wpcf7-not-valid .wpcf7-list-item{
border: 1px solid var(--error-color) !important;
}
.field-sided .wpcf7-list-item input[type="radio"] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: calc(var(--radius) * 0.75);
cursor: pointer;
}
.field-sided .wpcf7-list-item input[type="radio"]:checked::before {
content: '✔';
display: block;
position: absolute;
top: 50%;
left: 50%;
font-size: calc(var(--bodysize) * 2);
transform: translateX(-50%) translateY(-50%);
opacity: 0.5;
}
.field-sided .wpcf7-radio:has(input[type="radio"]:checked) .wpcf7-list-item-label {
opacity: 0.25;
}
.field-sided .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
opacity: 0.40;
}
.field-sided .wpcf7-list-item-label {
color: var(--alt-color);
pointer-events: none;
white-space: nowrap;
z-index: 1;
}
.cf7-form .field input[type="email"],
.cf7-form .field input[type="text"],
.cf7-form .field input[type="tel"] {
}
form[data-status="submitting"] {
pointer-events: none;
} @media (max-width: 53.0625em) {
.field-sided {
flex-wrap: wrap;
}
.field-sided > label {
width: 100%;
}
.field-sided > span {
width: 100%;
}
.field-sided .wpcf7-radio {
display: flex;
flex-wrap: nowrap;
gap: 16px;
align-items: center;
}
.field-sided .wpcf7-list-item {
justify-self: unset;
}
} @media (max-width: 40em) {
.cf7-form .form-row.last > div {
width: 100%;
}
} @media (max-width: 30em) {
.cf7-form .form-area + .form-area {
margin-top: 0;
}
.cf7-form .form-area:first-of-type h4 {
margin-top: 0;
}
.cf7-form .form-area-title {
margin-top: calc(var(--spacing-v) * 1.20);
}
.cf7-form h5.form-area-title {
margin-top: calc(var(--spacing-v) * 0.80);
}
.cf7-form .field-acceptance,
.cf7-form .field-toggle {
font-size: calc(var(--cf7-fontsize) * 0.9);
}
.cf7-form .field:not(.field-submit) {
width: 100%;
}
} access-widget-ui::part(container) {
--lead-color: #1b1b1b !important;
}
:host {
--lead-color: #1b1b1b;
}
.floatable-wrapper {
bottom: 36px !important;
left: 36px !important;
} @media (max-width: 40em) {
.floatable-wrapper {
bottom: 80px !important;
right: 0 !important;
left: unset !important;
}
} header {
position: fixed;
top: 25px;
left: var(--container);
width: calc(100% - var(--container) * 2);
z-index: 95;
}
#main-header {
color: var(--main-color);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(0, 0, 0, 0.25);
padding: 22px 20px;
border-radius: var(--radius);
transition: var(--default-trans);
}
html.light-mode #main-header.menu-layer-is-active {
background: rgba(255, 255, 255, 0.05);
}
#main-header > div {
align-items: center;
gap: 40px;
}
#main-header .logo > a {
display: block;
width: 100%;
height: 100%;
}
#main-header .logo > a > img {
width: 100%;
transition: var(--default-trans);
}
#main-header .navigation ul.menu {
--icon-unit: 14px;
--icon-margin: 10px;
list-style-type: none;
margin: 0;
display: flex;
gap: calc(32px + var(--icon-unit) + var(--icon-margin));
position: relative;
}
#main-header .navigation ul.menu li {
display: block;
line-height: unset;
}
#main-header .navigation ul.menu li.open-hover::after {
content: '';
display: inline-block;
width: var(--icon-unit);
height: var(--icon-unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/chevron.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
position: absolute;
top: 50%;
margin-left: var(--icon-margin);
transform: translateY(-60%);
filter: var(--filter-to-light);
}
#main-header .navigation ul.menu li > a {
opacity: 1;
color: var(--light-color);
transition: var(--default-trans);
}
#main-header .menu-cta .cta-button {
background-color: var(--light-color);
border-color: var(--light-color);
}
#main-header .menu-cta .cta-button .cta-label {
color: var(--dark-color);
}
#main-header .menu-cta .cta-button .cta-mark {
filter: var(--filter-to-dark);
}
@media (min-width: 64.0625em) { #main-header.is-active {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--light-color) !important;
box-shadow: var(--shadow);
}
#main-header.is-active .logo > a > img {
filter: var(--filter-to-dark);
}
#main-header.is-active .navigation ul.menu li.open-hover::after {
filter: var(--filter-to-dark);
}
#main-header.is-active .navigation ul.menu li > a {
color: var(--dark-color);
}
#main-header.is-active .navigation ul.menu li > a::before {
background-color: var(--dark-color);
}
#main-header.is-active .menu-cta .cta-button {
background-color: var(--dark-color);
border-color: var(--dark-color);
}
#main-header.is-active .menu-cta .cta-button:hover {
background-color: transparent;
}
#main-header.is-active .menu-cta .cta-button:hover .cta-label {
color: var(--dark-color);
}
#main-header.is-active .menu-cta .cta-button .cta-label {
color: var(--light-color);
}
#main-header.is-active .menu-cta .cta-button .cta-mark {
filter: var(--filter-to-light);
}
#main-header.is-active .menu-cta .cta-button:hover .cta-mark {
filter: var(--filter-to-dark);
}  
}
#main-header .menu-toggle {
--unit: 40px;
--height: 2px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: var(--unit);
height: var(--unit);
cursor: pointer;
transition: var(--default-trans);
}
#main-header .menu-toggle > div {
position: relative;
transition: var(--default-trans);
}
#main-header .menu-toggle > div > span {
display: block;
height: var(--height);
width: var(--unit);
margin-bottom: 4px;
background: var(--light-color);
margin-left: auto;
transition: var(--default-trans);
}
#main-header .menu-toggle:hover > div > span {
background: var(--light-color);
}
#main-header .menu-toggle > div > span:last-of-type {
margin-bottom: 0;
}
#main-header .menu-toggle.is-open > div {
rotate: 45deg;
}
#main-header .menu-toggle.is-open > div > span {
width: calc(var(--unit) * 0.78);
margin-bottom: 0;
}
#main-header .menu-toggle.is-open > div > span:last-of-type {
rotate: -90deg;
position: relative;
top: calc(-1 * var(--height));
} .hover-menu {
position: relative;
padding-top: 20px;
opacity: 0;
height: 0;
pointer-events: none;
transition: var(--default-trans);
}
.hover-menu.is-active {
opacity: 1;
height: auto;
pointer-events: auto;
}
.hover-menu-container {
width: 100%;
background-color: var(--light-color);
border-radius: var(--radius);
box-shadow: var(--shadow);
--panel-padding: 40px;
}
@media (max-width: 91.0625em) {
.hover-menu-container {
--panel-padding: 30px;
}
}
.hover-menu-container .submenu-panel {
color: var(--main-color);
opacity: 0;
height: 0;
}
.hover-menu-container .submenu-panel.is-active {
opacity: 1;
height: auto;
}
.hover-menu-container .submenu-panel:not(.is-active) {
pointer-events: none;
}
.hover-menu-container .submenu-panel .submenu-parent {
width: 29%;
padding: var(--panel-padding);
border-right: 1px solid #E0E0E0;
}
.hover-menu-container .submenu-panel .submenu-parent > * {
color: var(--dark-color);
}
.hover-menu-container .submenu-panel .submenu-parent a::before,
.hover-menu-container .submenu-panel .submenu-children a::before {
background-color: var(--dark-color);
}
.hover-menu-container .submenu-panel .submenu-parent h3 {
margin-bottom: calc(var(--spacing-v) * 0.50);
}
.hover-menu-container .submenu-panel .submenu-parent p {
font-size: calc(var(--bodysize) * 0.80);
color: var(--grey-color);
}
.hover-menu-container .submenu-panel .submenu-parent a {
font-size: calc(var(--bodysize) * 0.80);
margin-top: var(--spacing-v);
}
.hover-menu-container .submenu-panel .submenu-children {
width: 69%;
padding: var(--panel-padding);
}
.hover-menu-container .submenu-panel .submenu-children > div[data-col="1"]:only-child {
width: 100%;
}
.hover-menu-container .submenu-panel .submenu-children > div[data-col] {
width: 49%;
}
.hover-menu-container .submenu-panel .submenu-children:has(div[data-col = "3"]) > div[data-col] {
width: 33%;
display: flex;
flex-direction: column;
}
.hover-menu-container .submenu-panel .submenu-child:not(:last-of-type) {
margin-bottom: 20px;
}
.hover-menu-container .submenu-panel .submenu-children:has(>div[data-col = "3"]) .submenu-child:not(:last-of-type) {
margin-bottom: 5px;
}
.hover-menu-container .submenu-panel .submenu-grandchild:not(:last-of-type) {
margin-bottom: 16px;
}
.hover-menu-container .submenu-panel .submenu-child {
--icon-unit: 20px;
--icon-margin: 12px;
color: var(--dark-color);
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor] {
border-radius: calc(var(--radius) * 0.75);
padding: 16px 12px;
height: 100%;
width: 100%;
}
.hover-menu-container .submenu-panel .submenu-children:not(:has(>div[data-col = "3"])) [data-col="2"] .submenu-child[data-bgcolor] {
height: unset;
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor].is-light {
color: var(--light-color);
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor].is-light img {
filter: var(--filter-to-light);
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor].is-light a::before {
background-color: var(--light-color);
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor].is-dark {
color: var(--dark-color);
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor].is-dark img {
filter: var(--filter-to-dark);
}
.hover-menu-container .submenu-panel .submenu-children:has(>div[data-col = "3"]) .submenu-child a {
font-size: 0.8rem;
white-space: nowrap;
}
@media (max-width: 96.0625em) {
.hover-menu-container .submenu-panel .submenu-children:has(>div[data-col = "3"]) .submenu-child a {
font-size: 0.8rem;
}
}
.hover-menu-container .submenu-panel .submenu-child[data-bgcolor].is-dark a::before {
background-color: var(--dark-color);
}
.hover-menu-container .submenu-panel .submenu-child a::before {
left: calc(var(--icon-unit) + var(--icon-margin));
}
.hover-menu-container .submenu-panel .submenu-child a:hover::before {
width: calc(100% - var(--icon-unit) - var(--icon-margin));
}
.hover-menu-container .submenu-panel .submenu-child img {
width: calc(var(--icon-unit) * 1.50);
height: calc(var(--icon-unit) * 1.50);
margin-right: var(--icon-margin);  
}
.hover-menu-container .submenu-panel .submenu-child a img,
.hover-menu-container .submenu-panel .submenu-grandchild a img {
width: var(--icon-unit);
height: var(--icon-unit);
margin-right: var(--icon-margin);
transition: var(--default-trans);
}
.hover-menu-container .submenu-panel .submenu-child a:hover img {
scale: 1.20;
}
.hover-menu-container .submenu-panel .submenu-child > span {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.20);
}
.hover-menu-container .submenu-panel .submenu-grandchildren {
margin-top: 18px;
} .menu-layer {
position: fixed;
display: block;
width: 100%;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
height: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch !important;
pointer-events: none;
transition: var(--default-trans);
}
.menu-layer.is-active {
opacity: 1;
height: 100vh;
pointer-events: auto;
}
.menu-layer .menu-bg {
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
background-color: var(--alt-color);
pointer-events: none;
}
.menu-layer .menu-container {
overflow: auto;
width: 100%;
height: 100%;
position: relative;
padding-top: calc(var(--header-height) + 2 * var(--spacing-v));
padding-bottom: calc(var(--padding) * 1);
}
.menu-layer .menu-container > .navigation {
width: 100%;
font-size: calc(1.75 * var(--bodysize));
font-family: var(--titlefont);
font-weight: bold;
position: relative;
}
.menu-layer .menu-container > .navigation ul.menu {
list-style-type: none;
margin: 0;
display: flex;
gap: 40px;
flex-direction: column;
justify-content: start;
position: relative;
}
.menu-layer .menu-container > .navigation ul.menu li {
display: inline-block;
left: 0;
line-height: unset;
}
.menu-layer .menu-container > .navigation ul.menu > li.menu-item-has-children > a::after {
content:'';
width: 20px;
height: 20px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-main);
display: block;
position: absolute;
top: 50%;
left: calc(100% + 12px);
transform-origin: center;
transform: translateY(-50%);
transition: all 0.70s;
}
.menu-layer .menu-container > .navigation ul.menu > li.menu-item-has-children.is-open > a::after {
transform: translateY(-50%) rotateX(180deg);
}
.menu-layer .menu-container > .navigation ul.menu li > a {
color: var(--main-color);
opacity: 1;
transition: var(--default-trans);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu {
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
row-gap: calc(var(--spacing-v) * 0.5);
opacity: 0;
height: 0;
transition: var(--default-trans);
}
.menu-layer .menu-container > .navigation ul.menu li > ul.sub-menu.is-active {
visibility: initial;
opacity: 1;
height: auto;
margin-top: calc(var(--spacing-v)/2);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li {
width: 100%;
height: 0;
opacity: 0;
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu.is-active li {
height: auto;
opacity: 1;
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor] {
width: unset;
min-width: 55%;
border-radius: calc(var(--radius) * 0.75);
padding: 16px 12px;
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor].is-light,
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor].is-light a {
color: var(--light-color);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor].is-light img {
filter: var(--filter-to-light);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor].is-dark,
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor].is-dark a {
color: var(--dark-color);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor].is-dark img {
filter: var(--filter-to-dark);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor] ul.sub-menu {
margin: 20px 0 0 0;
display: grid;
row-gap: calc(var(--spacing-v) * 0.5);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor] > a {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.20);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor] > a > img {
width: 30px;
height: 30px;
margin-right: 12px;
position: relative;
top: -2px;
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li > a {
font-family: var(--bodyfont);
font-size: var(--bodysize);
font-weight: normal;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li > a > img {
width: 20px;
height: 20px;
margin-right: 12px;
position: relative;
top: -2px;
filter: var(--filter-to-main);
}
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li:last-of-type {
margin-bottom: 0;
}
.menu-layer .menu-container > .navigation .menu-cta {
font-size: calc(var(--bodysize) * 0.90);
margin-top: 40px;
}
@media (max-width: 64em) {
#main-header {
padding: 16px 18px;
}
}
@media (max-width: 40em) {
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor] {
min-width: 70%;
}
}
@media (max-width: 30em) {
.menu-layer .menu-container > .navigation ul.menu > li > ul.sub-menu li[data-bgcolor] {
width: 100%;
}
} body.error404 .section-pagetitle {
text-align: center;
padding-bottom: var(--padding);
}
body.error404 .section-pagetitle .section-heading {
margin-bottom: 0;
}
body.error404 .section-pagetitle .section-heading > * {
width: 100%;
}
body.error404 .section-pagetitle .section-heading .title {
margin-bottom: calc(var(--padding) * 2);
}
body.error404 #breadcrumbs {
margin-bottom: var(--spacing-v);
} body.error404 section.section-pagetitle .heading-animation {
position: absolute;
top: 0;
right: 0;
width: 100vw;
height: 100%;
opacity: 0.85;
}
body.error404 section.section-pagetitle .heading-animation video {
width: 100%;
height: 100%;
object-fit: cover;
} @media (max-width: 53.0625em) {
body.error404 .section-pagetitle .section-heading .title {
margin-bottom: calc(var(--padding) * 1.25);
}
} @media (max-width: 40em) {
body.error404 .section-pagetitle .section-heading .title {
margin-bottom: var(--padding);
}
}   section.section-pagetitle {
padding: calc(var(--padding) * 1.5) 0;
background-color: var(--dark-color);
}
section.section-pagetitle .section-heading {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section.section-pagetitle .section-heading > div {
width: 48%;
}
section.section-pagetitle .section-heading #breadcrumbs,
section.section-pagetitle .section-heading #breadcrumbs a {
color: #D9D9D9;
}
section.section-pagetitle .section-heading #breadcrumbs .breadcrumb_last {
color: var(--light-color);
}
section.section-pagetitle .section-heading .title {
margin-bottom: calc(var(--padding) / 3);
}
section.section-pagetitle .section-heading h1,
section.section-pagetitle .section-heading p,
section.section-pagetitle .text p {
color: var(--light-color);
}
section.section-pagetitle button.cta {
margin-top: var(--spacing-v);
}   @media (max-width: 64em) {
section.section-pagetitle .section-heading > div {
width: 100%;
}
} @media (max-width: 53.0625em) {
section.section-pagetitle {
padding-bottom: var(--padding);
} } @media (max-width: 24em) {
section.section-pagetitle {
padding: calc(var(--padding) * 2) 0;
}
} .mediaback-container {
--mediaback-height: 130vh;
position: absolute;
width: 100%;
height: var(--mediaback-height);
z-index: 1;
opacity: 0;
pointer-events: none; animation: fadeIn 0.50s 0.05s ease-out forwards;
}
.mediaback-container::before {
content: '';
position: absolute;
width: 100%;
height: calc(var(--mediaback-height) * 0.40);
bottom: 0;
display: block;
z-index: 1;
background: #030303;
background: linear-gradient(180deg,rgba(3, 3, 3, 0) 2%, rgba(3, 3, 3, 1) 90%);
}
.mediaback-container img,
.mediaback-container video {
width: 100%;
height: var(--mediaback-height);
position: absolute;
top: 0;
left: 0;
object-fit: cover;
} body:not(.cpt-progetti-archive) section.section-pagetitle.is-mediaback + section.section-alt,
body.cpt-progetti-archive section.section-pagetitle.is-mediaback + section.section {
z-index: 1;
}
html.light-mode section.section-pagetitle.is-mediaback + section.section.section-main {
--main-color: var(--dark-color);
--alt-color: var(--light-color);
--body-color: var(--light-color);
--body-alt-color: #D9D9D9;
--bg-color: var(--bg-dark);
--bg-alt-color: var(--bg-light);
--cf7-field-bg: #1D1B1E;
--filter-to-main: var(--filter-to-dark);
--filter-to-alt: var(--filter-to-light);
}
html.light-mode section.section-pagetitle.is-mediaback + section.section.section-main + section.section-main {
z-index: 1;
padding-top: var(--padding);
} html.light-mode section.section-pagetitle.is-mediaback + section.section-grid.section-main .grid-container .single-item,
html.light-mode section.section-pagetitle.is-mediaback + section.section-masonry.section-main .masonry-container .single-item {
background-color: var(--bg-color);
} @media (min-width: 120.0625em) {
.mediaback-container {
--mediaback-height: 110vh;
}
} @media (max-width: 91.0625em) {
.mediaback-container {
--mediaback-height: 140vh;
}
} @media (max-width: 64em) {
.mediaback-container {
--mediaback-height: 85vh;
}
} @media (max-width: 53.0625em) {
.mediaback-container {
--mediaback-height: 90vh;
}
} @media (max-width: 24em) {
.mediaback-container {
--mediaback-height: 85vh;
}
} section .section-heading {
margin-bottom: calc(var(--padding) * 0.35);
position: relative;
}  section.section-form details.single-accordion {
background-color: var(--bg-color);
border-radius: calc(var(--radius) * 3);
}
section.section-form details.single-accordion > summary  {
--icon-unit: 42px;
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
padding: calc(var(--spacing-v) * 2.5) calc(var(--spacing-v) * 2);
cursor: pointer;
}
section.section-form details.single-accordion > summary::after {
content: '';
height: var(--icon-unit);
width: var(--icon-unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
display: block;
position: absolute;
top: calc(50% - (var(--icon-unit) / 2));
right: calc(var(--spacing-v) * 2);
transition: transform 0.70s;
}
section.section-form details[open].single-accordion > summary::after {
transform: rotateX(-180deg);
}
section.section-form details.single-accordion > summary .accordion-title {
margin: 0;
position: relative;
}
section.section-form details.single-accordion > summary .accordion-title::before {
content: '';
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
background-color: var(--alt-color);
transition: var(--default-trans);
}
section.section-form details.single-accordion > summary:hover .accordion-title::before {
width: 100%;
}
section.section-form details.single-accordion > .details-content  {
padding: 0 calc(var(--spacing-v) * 2) calc(var(--spacing-v) * 2.5);
} section.section-form .tab-header {
display: flex;
flex-wrap: wrap;
gap: 20px;
width: 100%;
font-size: var(--bodysize);
padding-bottom: 20px;
}
section.section-form button.tablinks {
padding: 10px 20px !important;
border: none !important;
border-radius: calc(var(--radius) * 0.75);
}
section.section-form button.tablinks .cta-label {
font-family: var(--bodyfont) !important;
font-size: var(--bodysize) !important;
color: var(--alt-color) !important;
}
section.section-form details button.tablinks {
background-color: transparent !important;
}
section.section-form button.tablinks {
background-color: var(--main-color) !important;
}
section.section-form button.tablinks.active {
background-color: var(--cf7-field-bg) !important;
}
section.section-form button.tablinks .cta-label {
transition: var(--default-trans);
}
section.section-form button.tablinks:hover {
background-color: var(--alt-color) !important;
}
section.section-form button.tablinks:hover .cta-label {
color: var(--main-color) !important;
}
section.section-form .tab-content {
position: relative;
width: 100%;
display: none;
margin-top: calc(var(--padding) * 0.40);
-webkit-animation: fadeEffect .5s;
animation: fadeEffect .5s;
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
} section.section-form .info-container {
padding-top: var(--padding);
}
section.section-form .info-container > div {
gap: var(--spacing-v);
}
section.section-form .info-container > div + div {
margin-top: calc(var(--padding) * 0.35);
}
section.section-form .info-container .info-title {
margin: 0;
}
section.section-form .info-container .info-socials {
align-items: center;
gap: 18px;
}
section.section-form .info-container .info-socials > div {
--icon-unit: 38px;
width: var(--icon-unit);
height: var(--icon-unit);
background-color: var(--alt-color);
border-radius: 999vw;
transition: var(--default-trans);
}
section.section-form .info-container .info-socials > div:hover {
scale: 1.20;
}
section.section-form .info-container .info-socials a {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
section.section-form .info-container .info-socials a img {
height: calc(var(--icon-unit) * 0.65);
aspect-ratio: 1/1;
filter: var(--filter-to-main);
}
section.section-form .info-container .info-extra {
align-items: flex-end;
}
section.section-form .info-container .addresses-container {
width: 66%;
}
section.section-form .info-container .addresses-container .address + .address {
margin-top: calc(var(--spacing-v) * 1.30);
}
section.section-form .info-container .addresses-container .address * {
font-size: calc(var(--bodysize) * 1.30);
}
section.section-form .info-container .addresses-container .address > div + div {
margin-top: calc(var(--spacing-v) * 0.40);
}
section.section-form .info-container .addresses-container .address .main-address > p {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.60);
}
section.section-form .info-container .addresses-container .address .address-link a {
font-size: calc(var(--bodysize) * 1);
} section.section-form .info-cards {
grid-template-columns: repeat(3, 1fr);
margin-top: var(--padding) !important;
}
section.section-form .info-cards .single-item {
display: grid;
gap: 0;
padding: 40px 20px;
background-color: var(--bg-color);
border-radius: var(--radius);
transition: var(--default-trans);
height: 100%;
}
section.section-form .info-cards .single-item:hover {
scale: var(--scale-down);
}
section.section-form .info-cards .item-upper {
display: grid;
align-content: flex-start;
gap: calc(var(--spacing-v) * 0.75)
}
section.section-form .info-cards .single-item .item-img {
--icon-unit: 75px;
width: var(--icon-unit);
height: var(--icon-unit);
padding: calc(var(--icon-unit) * 0.10);
background-color: var(--cf7-field-bg);
border: 1px solid var(--grey-color);
border-radius: 999vw;
position: relative;
}
section.section-form .info-cards .single-item .item-img > img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
filter: var(--filter-to-alt);
}
section.section-form .info-cards .single-item .item-title {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.20);
}
section.section-form .info-cards .item-lower {
margin-top: var(--spacing-v);
align-self: flex-end;
} @media (max-width: 80em) {
section.section-form details.single-accordion {
border-radius: calc(var(--radius) * 2);
}
section.section-form details.single-accordion > summary {
--icon-unit: 30px;
padding: calc(var(--spacing-v) * 2) calc(var(--spacing-v) * 1.5);
}
section.section-form details.single-accordion > summary::after {
right: calc(var(--spacing-v) * 1.5);
}
section.section-form details.single-accordion > .details-content  {
padding: 0 calc(var(--spacing-v) * 1.5) calc(var(--spacing-v) * 2);
}
} @media (max-width: 64em) {
section.section-form details.single-accordion > summary .accordion-title::before {
display: none;
}
section.section-form .info-container .info-extra > div {
width: 100%;
}
section.section-form .info-cards {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 53.0625em) {
section.section-form .info-cards {
grid-template-columns: repeat(1, 1fr);
}
} @media (max-width: 40em) {
section.section-form details.single-accordion {
border-radius: calc(var(--radius) * 1);
}
section.section-form details.single-accordion > summary {
--icon-unit: 28px;
padding: calc(var(--spacing-v) * 1.5) calc(var(--spacing-v) * 1);
}
section.section-form details.single-accordion > summary::after {
right: calc(var(--spacing-v) * 1);
}
section.section-form details.single-accordion > summary .accordion-title::before {
display: none;
}
section.section-form details.single-accordion > .details-content  {
padding: 0 calc(var(--spacing-v) * 1) calc(var(--spacing-v) * 1.5);
}
section.section-form .tab-header {  
overflow-x: scroll;
flex-wrap: nowrap;
white-space: nowrap;
}
section.section-form .info-container .addresses-container .address > div + div {
margin-top: 0;
}
section.section-form .info-container .addresses-container .address .main-address > p {
font-size: calc(var(--bodysize) * 1.30);
}
} @media (max-width: 30em) {
section.section-form details.single-accordion > summary {
--icon-unit: 24px;
}
} @media (max-width: 24em) {
section.section-form details.single-accordion > summary {
--icon-unit: 20px;
}
} section.section-banner .banner-container {
background: var(--bg-alt-color);
padding: calc(var(--padding) * 0.9) calc(var(--container) * 0.30);
border-radius: var(--radius);
align-items: center;
gap: var(--spacing-v);
overflow: hidden;
position: relative;
}
section.section-banner .banner-container > div {
z-index: 1;
}
section.section-banner .banner-container .banner-text {
width: 54%;
}
section.section-banner .banner-container .banner-text + div {
text-align: right;
}
section.section-banner .banner-container .title {
color: var(--main-color);
margin-bottom: var(--spacing-v);
}
section.section-banner .banner-container .text p {
color: var(--main-color);
} section.section-main + section.section-banner.section-alt,
section.section-alt + section.section-banner.section-main {
padding-top: 0;
}
section + section.section-banner::before {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
}
section.section-main + section.section-banner.section-alt::before,
section.section-alt + section.section-banner.section-main::before {
background-color: var(--alt-color);
} @media (max-width: 80em) {
section.section-banner .banner-container {
padding: calc(var(--padding) * 0.75) calc(var(--container) * 1);
}
} @media (max-width: 40em) {
section.section-banner .banner-container {
gap: calc(var(--spacing-v) * 1.5);
}
section.section-banner .banner-container > div {
width: 100% !important;
}
section.section-banner .banner-container .banner-text + div {
text-align: left;
}
} section.section-cards .text-container {
width: 70%;
}
section.section-cards .text-container {
margin-bottom: calc(var(--padding) * 0.35);
} section.section-cards.fullwidth-cards .single-card {
align-items: center;
background-color: var(--bg-dark);
border-radius: var(--radius);
padding: calc(var(--spacing-v) * 2) calc(var(--spacing-v) * 1.5);
box-shadow: 0px 3.55px 26.63px 0px #9DA7C233;
margin-bottom: calc(var(--spacing-v) * 2);
position: relative;
}
section.section-cards.fullwidth-cards .single-card.last-card {
margin-bottom: 0;
}
section.section-cards.fullwidth-cards .single-card + div:not(.single-card) { pointer-events: none;
}
section.section-cards.fullwidth-cards .single-card .card-content {
width: 50%;
}
section.section-cards.fullwidth-cards .single-card .card-tagline {
--icon-unit: 20px;
--icon-margin: 10px;
color: #D9D9D9;
margin-bottom: var(--spacing-v);
}
section.section-cards.fullwidth-cards .single-card .card-tagline img {
width: var(--icon-unit);
height: var(--icon-unit);
margin-right: var(--icon-margin);
filter: var(--filter-to-light);
}
section.section-cards.fullwidth-cards .single-card h3 {
color: var(--light-color);
font-size: calc(var(--titlesize) * 0.60);
margin-bottom: var(--spacing-v);
}
section.section-cards.fullwidth-cards .single-card .card-text p {
color: #D9D9D9;
}
section.section-cards.fullwidth-cards .single-card a > button {
margin-top: calc(var(--padding) * 0.35);
}
section.section-cards.fullwidth-cards .single-card .card-img {
width: 40%;
position: relative;
overflow: hidden;
border-radius: var(--radius);
aspect-ratio: var(--ratio-sq);
}
section.section-cards.fullwidth-cards .single-card.is-imgsx .card-img {
order: -1;
}
section.section-cards.fullwidth-cards .single-card .card-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
section.section-cards.fullwidth-cards .single-card.is-imgcontain .card-img img {
object-fit: contain;
} section.section-cards.side-cards .cards-container {
position: relative;
}
section.section-cards.side-cards .cards-container .slick-list {
margin-left: calc(-1 * var(--spacing-v));
margin-right: calc(-1 * var(--spacing-v));
}
section.section-cards.side-cards .single-card {
display: flex;
align-items: center;
position: relative;
min-height: 50vh;
padding: var(--spacing-v);
transition: var(--default-trans);
opacity: 0;
visibility: hidden;
}
section.section-cards.side-cards .single-card.slick-current {
opacity: 1;
visibility: visible;
}
section.section-cards.side-cards .single-card.last-card { }
section.section-cards.side-cards .single-card + div:not(.single-card) { pointer-events: none;
}
section.section-cards.side-cards .single-card .card-heading {
width: 49%;
position: relative;
}
section.section-cards.side-cards .single-card .card-tagline {
color: var(--alt-color);
margin-bottom: calc(var(--spacing-v) * 0.80);
}
section.section-cards.side-cards .single-card h3 {
color: var(--body-color);
font-size: calc(var(--titlesize) * 0.60);
}
section.section-cards.side-cards .single-card .card-backdrop {
width: 100%;
position: absolute;
top: 50%;
left: 0;
translate: 0 -5%;
color: var(--body-color);
opacity: 0.06;
font-size: 15vw;
font-family: var(--titlefont);
line-height: 1em;
text-align: left;
white-space: nowrap;
pointer-events: none;
}
section.section-cards.side-cards .single-card .card-content {
width: 49%;
padding: 40px 20px;
background-color: var(--light-color);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--default-trans);
z-index: 1;
}
section.section-cards.side-cards .single-card .card-icon {
height: 50px;
position: relative;
margin-bottom: calc(var(--spacing-v) * 0.80);
}
section.section-cards.side-cards .single-card .card-icon img {
height: 100%;
width: 100%;
object-fit: contain;
object-position: left;
}
section.section-cards.side-cards .single-card .card-text p {
color: var(--grey-color);
}
section.section-cards.side-cards .single-card .card-content button {
margin-top: calc(var(--spacing-v) * 1);
} @media (max-width: 53.0625em) {
section.section-cards.fullwidth-cards .single-card .card-img {
aspect-ratio: var(--ratio-vr);
}
} @media (max-width: 40em) {
section.section-cards .text-container {
width: 100%;
}
section.section-cards.fullwidth-cards .single-card {
row-gap: calc(var(--spacing-v) * 2);
padding-left: 18px;
padding-right: 18px;
}
section.section-cards.fullwidth-cards .single-card .card-content,
section.section-cards.fullwidth-cards .single-card .card-img {
width: 100%;
}
section.section-cards.fullwidth-cards .single-card .card-img {
aspect-ratio: var(--ratio-hr);
} section.section-cards.side-cards .single-card .card-backdrop {
top: 0;
translate: 0 -15%;
font-size: 35vw;
}
section.section-cards.side-cards .single-card {
row-gap: calc(var(--spacing-v) * 2);
}
section.section-cards.side-cards .single-card .card-heading,
section.section-cards.side-cards .single-card .card-content {
width: 100%;
}
}  section.section-cards.offcanvas-cards .cards-container {
position: relative;
}
section.section-cards.offcanvas-cards .single-card {
width: calc(100% + var(--container));
padding-right: var(--container);
padding-left: var(--offset);
border-radius: calc(var(--radius) * 2.5) 0 0 calc(var(--radius) * 2.5);
background-color: var(--light-color);
z-index: 1;
--title-color: var(--dark-color);
--text-color: var(--grey-color);
--cta-bg: var(--dark-color);
--cta-border: var(--dark-color);
--cta-color: var(--light-color);
}
section.section-cards.offcanvas-cards .single-card.scrollX-card.is-sticky {
position: absolute;
left: 0;
transform: translateX(100vw);
} section.section-cards.offcanvas-cards .single-card.is-custom.is-dark {
--title-color: var(--light-color);
--text-color: var(--light-color);
--cta-bg: var(--light-color);
--cta-border: var(--light-color);
--cta-color: var(--dark-color);
}
section.section-cards.offcanvas-cards .single-card.is-custom.is-light {
--title-color: var(--dark-color);
--text-color: var(--grey-color);
--cta-bg: var(--dark-color);
--cta-border: var(--dark-color);
--cta-color: var(--light-color);
}
section.section-cards.offcanvas-cards .single-card.is-custom .card-text + a button.cta-custom:hover,
section.section-cards.offcanvas-cards .single-card.is-custom .card-text + a button.cta-custom:hover::before {
background-color: transparent !important;
} section.section-cards.offcanvas-cards .single-card {
align-items: center;
box-shadow: 0px 3.55px 26.63px 0px #9DA7C233;
position: relative;
}
section.section-cards.offcanvas-cards .single-card .card-icon {
position: absolute;
width: 150px;
left: calc(var(--offset) * 0.50);
bottom: 15px;
height: calc(var(--offset) * 0.50);
max-height: 25px;
transform: rotate(-90deg) translateY(-50%);
transform-origin: top left;
}
section.section-cards.offcanvas-cards .single-card .card-icon img {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center left;
}
section.section-cards.offcanvas-cards .single-card.is-custom.is-dark .card-icon img {
filter: var(--filter-to-light);
}
section.section-cards.offcanvas-cards .single-card.is-custom.is-light .card-icon img {
filter: var(--filter-to-dark);
}
section.section-cards.offcanvas-cards .single-card .card-icon img {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center left;
}
section.section-cards.offcanvas-cards .single-card .card-media {
width: 45%;
position: relative;
overflow: hidden;
aspect-ratio: var(--ratio-sq);
}
section.section-cards.offcanvas-cards .single-card .card-media img {
height: 100%;
width: 100%;
object-fit: contain;
}
section.section-cards.offcanvas-cards .single-card .card-media video {
width: 100%;
height: 100%;
}
section.section-cards.offcanvas-cards .single-card .card-content {
width: 50%;
padding: calc(var(--spacing-v) * 2) 0;
}
section.section-cards.offcanvas-cards .single-card h3 {
color: var(--title-color);
font-size: calc(var(--titlesize) * 0.60);
margin-bottom: var(--spacing-v);
}
section.section-cards.offcanvas-cards .single-card .card-text p {
color: var(--text-color);
}
section.section-cards.offcanvas-cards .single-card .card-text + a button.cta-custom {
margin-top: var(--spacing-v);
background-color: var(--cta-bg);
border-color: var(--cta-border);
}
section.section-cards.offcanvas-cards .single-card .card-text + a button.cta-custom:hover {
background-color: var(--cta-color);
}
section.section-cards.offcanvas-cards .single-card .card-text + a button.cta-custom .cta-label {
color: var(--cta-color);
}
section.section-cards.offcanvas-cards .single-card .card-text + a button.cta-custom:hover .cta-label {
color: var(--cta-bg);
} @media (max-width: 64em) {
section.section-cards.offcanvas-cards .single-card {
margin-top: var(--spacing-v);
}
} @media (max-width: 40em) {
section.section-cards.offcanvas-cards .single-card {
row-gap: calc(var(--spacing-v) * 2);
padding: 40px var(--container) 40px var(--offset);
}
section.section-cards.offcanvas-cards .single-card .card-icon {
left: unset;
bottom: unset;
transform: none;
transform-origin: initial;
--unit: 25px;
height: var(--unit);
top: calc(40px - var(--unit) * 0.50);
left: calc(var(--offset) * 0.50 - var(--unit) * 0.50);
transform: translateX(-100%) translateY(50%);
rotate: -90deg;
transform-origin: left;
}
section.section-cards.offcanvas-cards .single-card .card-icon img {
object-position: center right;
}
section.section-cards.offcanvas-cards .single-card .card-content,
section.section-cards.offcanvas-cards .single-card .card-media {
width: 100%;
padding: 0;
}
} section.section-cta.is-puzzle {
--section-height: 100vh;
display: grid;
align-items: center;
padding: 0;
}
section.section-cta.is-puzzle .section-heading {
width: 100%;
text-align: center;
position: absolute;
top: calc(var(--section-height) * 0.50);
left: 50%;
transform: translate(-50%, -50%);
z-index: 50;
pointer-events: auto;
}
section.section-cta.is-puzzle .title + a button {
margin-top: var(--spacing-v);
}
section.section-cta.is-puzzle button.cta-button:hover {
background-color: var(--main-color);
} section.section-cta.is-puzzle .puzzle-container {
--image-w: 16%;
position: relative;
width: 100%;
height: var(--section-height);
overflow: hidden;
pointer-events: none;
}
section.section-cta.is-puzzle .puzzle-container .single-puzzle {
position: absolute;
width: var(--image-w);
transform: translateX(-50%) translateY(-50%);
z-index: 1;
}
section.section-cta.is-puzzle .puzzle-container .single-puzzle img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
} @media (max-width: 80em) {
section.section-cta.is-puzzle .puzzle-container {
--image-w: 18%;
}
} @media (max-width: 80em) {
section.section-cta.is-puzzle {
--section-height: 75vh;
}
section.section-cta.is-puzzle .puzzle-container {
--image-w: 22%;
}
} @media (max-width: 40em) {
section.section-cta.is-puzzle .puzzle-container {
--image-w: 25%;
}
} @media (max-width: 30em) {
section.section-cta.is-puzzle .puzzle-container {
--image-w: 28%;
}
}  section.section-gallery .related-slider-nav {
margin-top: calc(var(--spacing-v) * 2);
}
section.section-gallery .related-slider-nav div {
text-align: right;
}
section.section-gallery .related-slider-nav div > button {
height: calc(var(--titlesize) * 0.80);
aspect-ratio: 1/1;
background-color: transparent !important;
transition: var(--default-trans);
}
section.section-gallery .related-slider-nav div > button:hover {
scale: 1.4;
}
section.section-gallery .related-slider-nav div > button > span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
rotate: -45deg;
transition: var(--default-trans);
}
section.section-gallery .related-slider-nav div > button.related-slider-prev > span::before {
transform: rotate(180deg)
}
section.section-gallery .gallery-carousel {
margin-top: calc(var(--spacing-v) * 2);
}
section.section-gallery .nav-container + .gallery-carousel {
margin-top: calc(var(--spacing-v) * 1);
}
section.section-gallery .gallery-carousel .owl-stage-outer {
overflow: unset;
}
section.section-gallery .gallery-carousel .single-gallery-item {
height: 440px;
position: relative;
overflow: hidden;
border-radius: var(--radius);
transition: var(--default-trans);
}
section.section-gallery .gallery-carousel .single-gallery-item:hover {
scale: var(--scale-down);
}
section.section-gallery .gallery-carousel .single-gallery-item.hr {
aspect-ratio: var(--ratio-hr);
}
section.section-gallery .gallery-carousel .single-gallery-item.vr {
aspect-ratio: var(--ratio-vr);
}
section.section-gallery .gallery-carousel .single-gallery-item.sq {
aspect-ratio: var(--ratio-sq);
}
section.section-gallery .gallery-carousel .single-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: var(--default-trans);
} section.section-gallery .pin-spacer { background-color: var(--main-color);
}
section.section-gallery .scrollX-container {
display: flex;
flex-wrap: nowrap;
gap: calc(var(--spacing-v) * 3);
margin-top: calc(var(--spacing-v) * 2);
padding-bottom: calc(var(--spacing-v) * 1.5);
}
section.section-gallery .scrollX-container .scrollX-item {
height: 440px;
position: relative;
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(2n) {
margin-top: calc(var(--padding) * 0.90);
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(3n) {
margin-top: calc(var(--padding) * 0.40);
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(4n) {
margin-top: calc(var(--padding) * 1.10);
}
section.section-gallery .scrollX-container .scrollX-item > a {
overflow: hidden;
border-radius: var(--radius);
transition: var(--default-trans)
}
section.section-gallery .scrollX-container .scrollX-item:hover > a {
scale: var(--scale-down);
}
section.section-gallery .scrollX-container .scrollX-item.hr {
aspect-ratio: var(--ratio-hr);
}
section.section-gallery .scrollX-container .scrollX-item.vr {
aspect-ratio: var(--ratio-vr);
}
section.section-gallery .scrollX-container .scrollX-item.sq {
aspect-ratio: var(--ratio-sq);
}
section.section-gallery .scrollX-container .scrollX-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: var(--default-trans);
}
section.section-gallery .scrollX-container .scrollX-item .item-feature {
max-width: 150px;
padding: 18px 12px;
background-color: var(--alt-color);
border-radius: var(--radius);
position: absolute;
bottom: 0;
right: 0;
transform: translateX(var(--spacing-v));
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(1n) .item-feature {
translate: 0 calc(var(--spacing-v) * 0.75);
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(2n) .item-feature {
translate: calc(var(--spacing-v) * 0.50) calc(var(--spacing-v) * -1.10);
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(3n) .item-feature {
top: 0;
bottom: unset;
left: 0;
transform: none;
translate: calc(var(--spacing-v) * -1) calc(var(--spacing-v) * -1);
}
section.section-gallery .scrollX-container .scrollX-item:last-of-type .item-feature {
transform: none;
translate: none;
left: calc(var(--spacing-v) * -0.80);
bottom: calc(var(--spacing-v) * 1);
}
section.section-gallery .scrollX-container .scrollX-item .item-feature > div + div {
margin-top: 8px;
}
section.section-gallery .scrollX-container .scrollX-item .item-feature .highlight {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.60);
color: var(--main-color);
}
section.section-gallery .scrollX-container .scrollX-item .item-feature .caption {
font-size: 16px;
color: var(--main-color);
opacity: 0.8;
width: min-content;
display: table-caption;
} @media (max-width: 96em) {
section.section-gallery .gallery-carousel .single-gallery-item,
section.section-gallery .scrollX-container .scrollX-item {
height: 350px;
}
} @media (max-width: 64em) {
section.section-gallery .scrollX-container{
overflow: scroll;
} section.section-gallery .scrollX-container::-webkit-scrollbar {
display: none;
} section.section-gallery .scrollX-container{
-ms-overflow-style: none; scrollbar-width: none; }
} @media (max-width: 40em) {
section.section-gallery .scrollX-container .scrollX-item {
margin: 0 !important;
}
section.section-gallery .scrollX-container .scrollX-item .item-feature {
left: 0;
transform: none !important;
translate: none !important;
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(1n) .item-feature {
left: calc(var(--spacing-v) * -0.50);
bottom: calc(var(--spacing-v) * -0.50);
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(2n) .item-feature {
left: calc(var(--spacing-v) * -1);
bottom: calc(var(--spacing-v) * 1.50);
}
section.section-gallery .scrollX-container .scrollX-item:nth-of-type(3n) .item-feature {
bottom: unset;
left: calc(var(--spacing-v) * -1);
top: calc(var(--spacing-v) * 1);
}
section.section-gallery .scrollX-container .scrollX-item:last-of-type .item-feature {
transform: none;
translate: none;
left: unset;
right: calc(var(--container) * -0.50);
bottom: calc(var(--spacing-v) * 2);
}
} @media (max-width: 30em) {
section.section-gallery .gallery-carousel .single-gallery-item,
section.section-gallery .scrollX-container .scrollX-item {
height: 300px;
}
} section.section-grid.is-center .section-heading,
section.section-grid.is-center .text-container,
section.section-grid.is-center .cta-container {
text-align: center;
}
section.section-grid:not(.is-center) .section-heading,
section.section-grid:not(.is-center) .text-container {
width: 70%;
}
section.section-grid .text-container {
margin-bottom: calc(var(--padding) * 0.35);
}
section.section-grid .grid-container {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-v);
transition: var(--default-trans);
}
section.section-grid .grid-container .single-item {
--icon-unit: 56px;
display: grid;
align-content: flex-start;
gap: 0;
padding: 40px 20px;
background-color: var(--bg-color);
border-radius: var(--radius);
transition: var(--default-trans);
height: 100%;
}
html.dark-mode section.section-grid.section-alt .grid-container .single-item,
html.light-mode section.section-grid.section-main .grid-container .single-item {
background-color: var(--light-color);
box-shadow: var(--shadow);
}
html.light-mode section.section-grid.section-alt .grid-container .single-item {
background-color: var(--bg-dark);
box-shadow: none;
}
section.section-grid .grid-container a:not(.is-empty) > .single-item:hover {
scale: var(--scale-down);
}
section.section-grid .grid-container .item-upper {
--arrow-unit: 18px;
display: grid;
align-content: flex-start;
gap: calc(var(--spacing-v) * 0.75);
position: relative;
}
section.section-grid .grid-container a:not(.is-empty) > .single-item .item-upper::before {
content: '';
width: var(--arrow-unit);
height: var(--arrow-unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
position: absolute;
top: calc(var(--icon-unit) * 0.50 - var(--arrow-unit) * 0.50);
right: 0;
rotate: -90deg;
transition: transform 0.70s;
}
section.section-grid.is-featuredimg .grid-container a:not(.is-empty) > .single-item .item-upper::before {
top: calc(-0.5 * var(--arrow-unit));
right: calc(0.5 * var(--arrow-unit));
filter: var(--filter-to-main);
z-index: 2;
}
section.section-grid.is-featuredimg:not(.is-bottomicon) .grid-container a:not(.is-empty) > .single-item .item-upper::after {
content: '';
width: var(--arrow-unit);
height: var(--arrow-unit);
background-color: var(--alt-color);
border-radius: 999vw;
position: absolute;
top: calc(-0.5 * var(--arrow-unit));
right: calc(0.5 * var(--arrow-unit));
transform-origin: center;
scale: 3;
z-index: 1;
}
section.section-grid .grid-container a:not(.is-empty) > .single-item:hover .item-upper::before {
transform: rotateY(-360deg);
}
section.section-grid .grid-container .single-item .item-img {  max-width: calc(var(--icon-unit) * 2);
height: var(--icon-unit);
overflow: hidden;
position: relative;
}
section.section-grid.is-featuredimg .grid-container .single-item .item-img {
max-width: unset;
width: 100%;
height: auto;
aspect-ratio: var(--ratio-hr);
border-radius: 0;
}
section.section-grid .grid-container .single-item .item-img > img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0; object-fit: contain;
object-position: left;
}
section.section-grid .grid-container .single-item .item-img.is-inverted > img {
filter: var(--filter-to-alt);
}
section.section-grid.is-featuredimg .grid-container .single-item .item-img > img {
object-fit: cover;
object-position: center;
}
section.section-grid .grid-container .single-item .item-title {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.40);
min-height: 2em;
color: var(--alt-color);
}
section.section-grid .grid-container .item-lower {
margin-top: var(--spacing-v);
align-self: flex-end;
position: relative;
}
section.section-grid .grid-container .excerpt {
color: var(--body-alt-color);
}
section.section-grid .cta-container {
margin-top: var(--spacing-v);
} section.section-grid.is-bottomicon .grid-container a:not(.is-empty) > .single-item .item-upper::before {
display: none;
}
section.section-grid.is-bottomicon .grid-container a:not(.is-empty) > .single-item .item-lower::before {
--arrow-unit: 18px;
content: '';
width: var(--arrow-unit);
height: var(--arrow-unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
position: absolute;
top: calc(var(--icon-unit) * 0.50 - var(--arrow-unit) * 0.50);
right: 0;
rotate: -90deg;
transition: transform 0.70s;
}
section.section-grid.is-bottomicon .grid-container a:not(.is-empty) > .single-item:hover .item-lower::before {
transform: rotateY(-360deg);
}
section.section-grid.is-bottomicon .grid-container .single-item {
align-content: space-between;
}
section.section-grid.is-bottomicon .grid-container .single-item .item-img {
width: auto;
height: var(--icon-unit);
border-radius: 0;
}
section.section-grid.is-bottomicon .grid-container .single-item .item-img > img {
height: 100%;
width: auto;
position: absolute;
top: 0;
left: 0;
object-fit: contain;
} section.section-grid .layout-control {
width: calc((100% - var(--container) * 2) * 0.25);
height: calc(var(--titlesize) * 0.80);
align-items: center;
gap: var(--spacing-v);
position: absolute;
top: 0;
right: var(--container);
}
section.section-grid .slider-controls > button {
height: calc(var(--titlesize) * 0.80);
aspect-ratio: 1/1;
background-color: transparent !important;
transition: var(--default-trans);
}
section.section-grid .slider-controls > button:hover {
scale: 1.4;
}
section.section-grid .slider-controls > button > span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
rotate: -45deg;
transition: var(--default-trans);
}
section.section-grid .slider-controls > button.layout-slider-prev > span::before {
transform: rotate(180deg)
} .items-switch {
--unit: 38px;
--border-w: 2px;
position: relative;
display: inline-block;
width: calc(var(--unit) * 2);
height: var(--unit);
cursor: pointer;
}
.items-switch::before,
.items-switch::after { content: '';
display: inline-block;
width: calc(var(--unit) * 0.50);
height: calc(var(--unit) * 0.50);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
position: absolute;
top: 0;
z-index: 1;
}
.items-switch::before { background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/icon-slider.svg);
filter: var(--filter-to-main);
left: var(--border-w);
transform: translateX(50%) translateY(50%) rotate(90deg);
}
.items-switch::after { background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/icon-grid.svg);
filter: var(--filter-to-alt);
right: var(--border-w);
transform: translateX(-50%) translateY(50%);
}
.items-switch[data-layout="is-grid"]::before {
filter: var(--filter-to-alt);
}
.items-switch[data-layout="is-grid"]::after {
filter: var(--filter-to-main);
}
.items-switch input { opacity: 0;
width: 0;
height: 0;
}
section.section-grid .grid-container.flex {
--items: 3;
flex-wrap: nowrap;
gap: 0;
}
section.section-grid .grid-container.flex > a {
padding-right: var(--spacing-v);
min-width: calc((100% + var(--spacing-v)) / var(--items));
flex: 0 0 calc((100% + var(--spacing-v)) / var(--items));
transition: transform 0.3s;
}
section.section-grid .grid-container.flex > a:last-child {
padding-right: 0;
}
section.section-grid .grid-container.flex > a:last-child .single-item {
margin-right: var(--spacing-v);
} @media (max-width: 64em) {
section.section-grid .grid-container {
grid-template-columns: repeat(2, 1fr);
}
section.section-grid .grid-container .single-item .item-title {
font-size: calc(var(--bodysize) * 1.20);
} section.section-grid .grid-container.flex {
--items: 2;
overflow-x: scroll;
padding: var(--spacing-v) var(--container);
margin-left: calc(-1 * var(--container));
margin-right: calc(-1 * var(--container));
}
} @media (max-width: 53.0625em) {
section.section-grid .grid-container {
grid-template-columns: repeat(1, 1fr);
}
section.section-grid .grid-container .single-item .item-title {
min-height: unset;
}
} @media (max-width: 40em) {
section.section-grid:not(.is-center) .section-heading,
section.section-grid:not(.is-center) .text-container {
width: 100%;
} section.section-grid .layout-control {
width: 100%;
justify-content: flex-start;
position: relative;
top: initial;
right: initial;
margin-bottom: var(--spacing-v);
}
section.section-grid .grid-container.flex {
--items: 1.25;
}
} @media (max-width: 24em) { section.section-grid .grid-container.flex {
--items: 1.20;
}
} main > .section-hero:first-of-type {
padding-top: var(--header-height);
}
section.section-hero .section-heading {
margin-bottom: 0;
}
section.section-hero {
display: grid;
align-items: center;
min-height: 100vh;
position: relative;
background-color: var(--dark-color);
}
section.section-hero + section.section {
padding-top: var(--padding) !important;
}
section.section-hero .container {
width: 40%;
padding: 0;
margin: 0 auto;
text-align: center;
}
section.section-hero > a ~ .container {
pointer-events: none;
}
section.section-hero > a ~ .container .hero-text .section-heading > div + a {
pointer-events: auto;
}
section.section-hero .hero-text .section-heading > div + a button.cta {
margin: calc(var(--spacing-v) * 1.30) auto 0;
}
section.section-hero .hero-text .section-heading > div + a button.cta .cta-mark::before {
filter: var(--filter-to-dark);
}
section.section-hero[disable-modal="1"] > a {
pointer-events: none;
cursor: initial;
}
section.section-hero > a {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.section-hero video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
filter: grayscale(1);
}
section.section-hero img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
section.section-hero .overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
opacity: 0.2;
pointer-events: none;
}
section.section-hero .hero-slider {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
section.section-hero .hero-slider .single-hero-item {
position: relative;
width: 100vw;
height: 100vh;
}
section.section-hero .hero-slider .single-hero-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: var(--default-trans);
}
section.section-hero .container .title,
section.section-hero .container p,
section.section-hero .container span,
section.section-hero .container button,
section.section-hero .container button a,
section.section-hero .container #breadcrumbs a {
color: var(--light-color);
}
section.section-hero .container #breadcrumbs a::before {
background-color: var(--light-color);
}
section.section-hero .container .title {
font-size: var(--titlesize);
}
section.section-hero .container .text {
font-size: var(--bodysize);
font-family: var(--bodyfont);
color: var(--light-color);
margin-top: var(--spacing-v);
}
section.section-hero .scroll-down {
justify-self: center;
position: absolute;
bottom: var(--padding);
opacity: 0;
animation: fadeIn 1s 1.5s ease;
animation-fill-mode: forwards;
}
section.section-hero .scroll-down::before {
content: '';
display: block;
width: 2px;
height: 0px;
border-radius: 999vw;
background: var(--light-color);
position: absolute;
left: calc(50% - 1px);
bottom: -10px;
transform: translateY(100%);
opacity: 0.5;
transition: var(--default-trans);
animation: scroll-down 1.8s 1.5s infinite;
}
main > .section-hero:only-child > .scroll-down {
display: none;
}
@keyframes scroll-down {
0% {height:0px}
100% {height:50px}
} @media (max-width: 64em) {
section.section-hero .container {
width: 60%;
top: -8vh;
}
section.section-hero .scroll-down {
font-size: calc(var(--bodysize) * 1.1);
}
} @media (max-width: 53.0625em) {
section.section-hero .container {
width: 75%;
}
} @media (max-width: 40em) {
section.section-hero .container {
width: 100%;
padding: 0 var(--container);
}
section.section-hero .scroll-down {
bottom: calc(var(--padding) * 1.5)
}
} @media (max-width: 30em) {
section.section-hero .scroll-down {
bottom: calc(var(--padding) * 2)
}
} section.section-hoverlist .section-heading {
margin-bottom: var(--spacing-v);
}
section.section-hoverlist .hoverlist-list {
width: 40%;
}
section.section-hoverlist .hoverlist-list .title {
font-size: var(--bodysize);
font-family: var(--bodyfont);
font-weight: normal;
}
section.section-hoverlist .hoverlist-list .single-link {
float: left;
clear: both;
}
section.section-hoverlist .hoverlist-list .single-link:not(.active) > a {
pointer-events: none;
}
section.section-hoverlist .hoverlist-list .single-link.active > a {
pointer-events: auto;
}
section.section-hoverlist .hoverlist-list .single-link + .single-link {
margin-top: calc(var(--spacing-v) * 1.30);
}
section.section-hoverlist .hoverlist-list .single-link a {
flex-wrap: nowrap;
align-items: flex-start;
padding-right: calc(var(--titlesize) * 0.45 + var(--titlesize) * 0.30);
}
section.section-hoverlist .hoverlist-list .single-link.active a {
gap: calc(var(--titlesize) * 0.30);
padding-right: 0;
}
section.section-hoverlist .hoverlist-list .single-link a .link-mark::before {
content: '';
display: inline-block;
width: 0;
height: calc(var(--titlesize) * 0.45);
position: relative;
top: calc(var(--titlesize) * 0.05);
transform: rotate(-90deg);
background-color: transparent;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
opacity: 0;
visibility: hidden;
transition: var(--default-trans);
}
section.section-hoverlist .hoverlist-list .single-link.active a .link-mark::before {
width: calc(var(--titlesize) * 0.45);
opacity: 1;
visibility: visible;
}
section.section-hoverlist .hoverlist-list .link-title {
display: inline-block;
font-size: var(--titlesize);
font-family: var(--titlefont);
color: var(--alt-color);
opacity: 0.5;
transition: var(--default-trans);
}
section.section-hoverlist .hoverlist-list .single-link.active .link-title {
opacity: 1;
}
section.section-hoverlist .hoverlist-img {
width: 55%;
position: relative;
}
section.section-hoverlist .hoverlist-img a {
width: 100%;
}
section.section-hoverlist .hoverlist-img .single-img {
width: 100%;
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
transition: var(--default-trans);
}
section.section-hoverlist .hoverlist-img .single-img:first-of-type {
position: relative;
}
section.section-hoverlist .hoverlist-img .single-img.active {
opacity: 1;
visibility: visible;
}
section.section-hoverlist .hoverlist-img .single-img .link-img {
overflow: hidden;
position: relative;
aspect-ratio: 715/560;
}
section.section-hoverlist .hoverlist-img .single-img .link-img img {
height: 100%;
width: 100%;
object-fit: contain;
object-position: top;
} section.section-hoverlist.hoverlist-alt .section-heading,
section.section-hoverlist.hoverlist-alt .hoverlist-img {
width: 50%;
}
section.section-hoverlist.hoverlist-alt .hoverlist-list,
section.section-hoverlist.hoverlist-alt .hoverlist-content {
width: 40%;
}
section.section-hoverlist.hoverlist-alt .hoverlist-head {
row-gap: var(--spacing-v)
}
section.section-hoverlist.hoverlist-alt .hoverlist-head + .hoverlist-body {
margin-top: calc(var(--padding) * 0.35);
position: relative;
}
section.section-hoverlist.hoverlist-alt .section-heading {
margin-bottom: 0;
}
section.section-hoverlist.hoverlist-alt .hoverlist-list {
display: grid;
row-gap: calc(var(--spacing-v) * 0.50);
}
section.section-hoverlist.hoverlist-alt .hoverlist-list .single-link {
position: relative;
margin-right: auto;
}
section.section-hoverlist.hoverlist-alt .hoverlist-list .single-link::before {
content: '';
display: block;
width: 3px;
height: 0;
background-color: var(--body-color);
position: absolute;
top: -4px;
left: -12px;
transition: var(--default-trans);
}
section.section-hoverlist.hoverlist-alt .hoverlist-list .single-link.active::before {
height: calc(100% + 4px);
}
section.section-hoverlist.hoverlist-alt .hoverlist-list .single-link + .single-link {
margin-top: 0;
}
section.section-hoverlist.hoverlist-alt .hoverlist-list .link-title {
font-family: var(--bodyfont);
color: var(--body-color);
font-size: var(--bodysize);
font-weight: normal;
}
section.section-hoverlist.hoverlist-alt .hoverlist-single-alt {
width: 100%;
opacity: 0;
visibility: hidden;
position: absolute;
top: 0;
transition: var(--default-trans);
pointer-events: none;
}
section.section-hoverlist.hoverlist-alt .hoverlist-single-alt.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
position: relative;
}
section.section-hoverlist.hoverlist-alt .hoverlist-img .single-img {
position: relative;
opacity: 1;
visibility: visible;
}
section.section-hoverlist.hoverlist-alt .hoverlist-img .single-img .link-img {
border-radius: var(--radius);
aspect-ratio: 16/9;
}
section.section-hoverlist.hoverlist-alt .hoverlist-img .single-img .link-img img {
object-fit: cover;
object-position: center;
}
section.section-hoverlist.hoverlist-alt .hoverlist-content {
align-content: center;
}
section.section-hoverlist.hoverlist-alt .hoverlist-content button {
margin-top: var(--spacing-v);
} section.section-hoverlist.hoverlist-fullscreen {
min-height: 75vh;
display: flex;
align-items: center;
}
section.section-hoverlist.hoverlist-fullscreen .container {
width: 100%;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-list {
width: 100%;
display: grid;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-list .title a.link::before {
background-color: var(--light-color);
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-list .single-link {
float: none;
clear: unset;
margin-right: auto;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-img .single-img {
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: var(--default-trans);
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-img .single-img.active {
opacity: 1;
visibility: visible;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-img .single-img .link-img {
aspect-ratio: unset;
height: 100%;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-img .single-img .link-img img {
object-fit: cover;
object-position: center;
transition: scale 1s;
}
section.section-hoverlist.hoverlist-fullscreen .hoverlist-img .single-img.active .link-img img {
scale: 1.05;
} @media (max-width: 40em) {
section.section-hoverlist .hoverlist-list,
section.section-hoverlist .hoverlist-img {
width: 100%;
}
section.section-hoverlist.hoverlist-default .hoverlist-img {
margin-top: calc(var(--spacing-v) * 2);
} section.section-hoverlist.hoverlist-alt .section-heading,
section.section-hoverlist.hoverlist-alt .hoverlist-img,
section.section-hoverlist.hoverlist-alt .hoverlist-list,
section.section-hoverlist.hoverlist-alt .hoverlist-content {
width: 100%;
}
section.section-hoverlist.hoverlist-alt .hoverlist-list {
margin-left: calc(var(--container) * 0.50);
}
section.section-hoverlist.hoverlist-alt .hoverlist-content {
margin-top: var(--spacing-v);
}
} section.section-list .text-container {
margin-bottom: calc(var(--padding) * 0.35);
}
section.section-list .list-container {
display: grid;
gap: var(--spacing-v)
}
section.section-list .single-list,
section.section-list .single-accordion {
padding: 30px 20px;
background-color: var(--bg-color);
border-radius: var(--radius);
border: 1px solid #E0E0E0;
transition: var(--default-trans);
position: relative;
}
html.dark-mode section.section-list.section-alt .single-list,
html.light-mode section.section-list.section-main .single-list,
html.dark-mode section.section-list.section-alt .single-accordion,
html.light-mode section.section-list.section-main .single-accordion {
background-color: var(--light-color);
}
html.dark-mode section.section-list.section-main .single-list,
html.dark-mode section.section-list.section-main .single-accordion {
border-color: var(--bg-dark);
}
html.light-mode section.section-list.section-alt .single-accordion,
html.light-mode section.section-list.section-alt .single-list {
background-color: var(--bg-dark);
border-color: var(--bg-dark);
}
section.section-list .single-list .list-title,
section.section-list .single-accordion .list-title {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.40);
line-height: calc(var(--bodysize) * 1.40);
color: var(--alt-color);
width: 85%;
}
section.section-list .list-link .single-list .list-title {
width: 92%;
}
section.section-list .single-list .list-text,
section.section-list .single-accordion .list-text {
margin-top: calc(var(--spacing-v) * 0.70);
}
section.section-list .single-list .list-text *,
section.section-list .single-accordion .list-text * {
color: var(--body-alt-color);
}
section.section-list .cta-container {
margin-top: var(--spacing-v);
} section.section-list .single-list .list-index {
font-size: calc(var(--bodysize) * 1.30);
color: var(--body-alt-color);
margin-bottom: calc(var(--spacing-v) * 0.70);
} section.section-list a > .single-list:hover {
scale: var(--scale-down);
}
section.section-list .list-link .single-list::before { --arrow-unit: calc(var(--bodysize) * 1.40);
content: '';
width: var(--arrow-unit);
height: var(--arrow-unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
rotate: -90deg;
scale: 0.90;
transition: transform 0.70s;
position: absolute; top: 30px; 
right: 20px;  
}
section.section-list .list-link .single-list:hover::before {
transform: rotateY(-360deg);
} section.section-list .single-accordion {
padding: 0;
}
section.section-list .single-accordion:not([open]):hover {
scale: var(--scale-down);
}
section.section-list .single-accordion summary {
cursor: pointer;
position: relative; padding: 30px 20px;
}
section.section-list .single-accordion .details-content {
padding: 0 20px 30px;
} section.section-list .list-container.list-post {
gap: 0;
}
section.section-list .list-post .single-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
background-color: transparent !important;
border: none;
padding: calc(var(--spacing-v) * 1.25) 0;
--img-spacing: 20%;
}
section.section-list .list-post .single-list:hover {
z-index: 1;
scale: unset;
}
section.section-list .list-post .single-list::after {
content: '';
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
background-color: #E0E0E0;
opacity: 0.5;
z-index: -1;
transition: var(--default-trans);
}
section.section-list .list-post .single-list:hover::after {
opacity: 1;
}
section.section-list .list-post .single-list .list-title {
opacity: 0.5;
transition: var(--default-trans);
}
section.section-list .list-post .single-list:hover .list-title {
opacity: 1;
padding-left: 30px;
}
section.section-list .list-post a .list-img {
width: 28%;
aspect-ratio: var(--ratio-vr);
border-radius: var(--radius);
position: absolute;
top: 50%;
right: var(--img-spacing);
transform: translateY(-50%);
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: var(--default-trans);
}
section.section-list .list-post a.active .list-img {
opacity: 1;
visibility: visible;
}
section.section-list .list-post a.active:nth-of-type(1n) .list-img {
rotate: 3.29deg;
}
section.section-list .list-post a.active:nth-of-type(2n) .list-img {
rotate: 2.49deg;
}
section.section-list .list-post a.active:nth-of-type(3n) .list-img {
rotate: -3.95deg;
}
section.section-list .list-post a.active:nth-of-type(4n) .list-img {
rotate: 11.98deg;
}
section.section-list .list-post a.active:nth-of-type(5n) .list-img {
rotate: -4.41deg;
}
section.section-list .list-post .single-list .list-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
section.section-list .list-post .single-list .list-cat {  align-self: center;
margin-left: auto;
font-size: calc(var(--bodysize) * 0.90);
color: var(--alt-color);
opacity: 0.5;
transition: var(--default-trans);
}
section.section-list .list-post .single-list:hover .list-cat {
opacity: 1;
} @media (max-width: 64em) {
section.section-list .single-list::before { --arrow-unit: calc(var(--bodysize) * 1.20);
}
section.section-list .single-list .list-title,
section.section-list .single-accordion .list-title {
font-size: calc(var(--bodysize) * 1.20);
line-height: calc(var(--bodysize) * 1.20);
}
section.section-list .single-list .list-index {
font-size: calc(var(--bodysize) * 1.20);
}
section.section-list .list-post a.active .list-title {
opacity: 1;
padding-left: 0 !important;
}
} @media (max-width: 53.0625em) {
section.section-list .list-post .single-list .list-title {
width: 100%;
}
section.section-list .list-post .single-list:hover .list-title {
padding-left: unset;
}
section.section-list .list-post .single-list .list-cat {
width: 100%;
text-align: left;
margin-top: calc(var(--spacing-v) * 0.50);
}
} @media (max-width: 40em) {
section.section-list .list-post .single-list {
--img-spacing: 5%;
}
} .section-main + .section-list.section-iconlist.section-main .listicon-panel,
.section-alt + .section-list.section-iconlist.section-alt .listicon-panel {
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: calc(var(--spacing-v) * 1.25) calc(var(--spacing-v));
}
html.dark-mode .section-main + .section-list.section-iconlist.section-main .listicon-panel {
background-color: var(--bg-color);
}
html.light-mode .section-alt + .section-list.section-iconlist.section-alt .listicon-panel {
background-color: var(--bg-dark);
box-shadow: none;
}
section.section-list.section-iconlist .single-list {
--icon-unit: 48px;
display: flex;
flex-wrap: nowrap;
gap: 20px;
padding: 12px 0px;
background-color: transparent !important;
border-radius: 0;
border: none;
}
section.section-list.section-iconlist .single-list .list-icon {
min-width: var(--icon-unit);
height: var(--icon-unit);
border-radius: 4px;
overflow: hidden;
background-color: var(--cf7-field-bg);
position: relative;
}
section.section-list.section-iconlist .single-list .list-icon > img {
width: calc(var(--icon-unit) * 0.50);
height: calc(var(--icon-unit) * 0.50);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
filter: var(--filter-to-alt);
object-fit: contain;
}
section.section-list.section-iconlist .single-list .list-text {
margin-top: calc(var(--icon-unit) * 0.25);
}
section.section-list.section-iconlist .single-list .list-text > p {
color: var(--body-color);
font-size: calc(var(--bodysize) * 1.20);
}
section.section-list.section-iconlist .cta-container {
margin-top: calc(var(--padding) * 0.35);
} @media (max-width: 40em) {
section.section-list.section-iconlist .single-list .list-text > p {
font-size: var(--bodysize);
}
} section.section-list.section-careers .single-accordion > summary::before {
--arrow-unit: calc(var(--bodysize) * 1.40);
content: '';
width: var(--arrow-unit);
height: var(--arrow-unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
scale: 0.90;
transition: transform 0.70s;
position: absolute;
top: 50%;
right: 20px;
translate: 0 -50%;
}
section.section-list.section-careers details[open].single-accordion > summary::before {
transform: rotateX(-180deg);
}
section.section-list.section-careers .single-accordion .list-title {
width: 92%;
}
section.section-list.section-careers .single-accordion .badge-careers {
display: inline-block;
font-size: var(--bodysize);
font-weight: normal;
color: var(--body-alt-color);
background-color: var(--cf7-field-bg);
padding: 6px 12px;
border-radius: calc(var(--radius) * 0.75);
margin-bottom: calc(var(--spacing-v) * 0.50);
}
section.section-list.section-careers .single-accordion .list-text + a {
margin-top: var(--spacing-v);
}
section.section-list.section-careers + section.section-careers.section-form .form-title-container {
text-align: center;
}
section.section-list.section-careers + section.section-careers.section-form .form-title-container a > button {
margin-top: calc(var(--padding) * 0.35);
} section.section-list.section-careers .careers-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
position: relative;
}
section.section-list.section-careers .careers-container .list-container {
width: 62%;
order: 1; }
section.section-list.section-careers .careers-container .benefits-container {
width: 36%;
height: fit-content;
display: grid;
gap: calc(var(--spacing-v) * 0.75);
padding: 30px 20px;
background-color: var(--light-color);
border-radius: var(--radius);
border: 1px solid #E0E0E0;
position: relative;
}
html.light-mode section.section-list.section-careers .careers-container .benefits-container {
background-color: var(--bg-dark);
border-color: var(--bg-dark);
}
section.section-list.section-careers .careers-container .single-benefit {
--icon-unit: 48px;
display: flex;
flex-wrap: nowrap;
gap: 20px;
}
section.section-list.section-careers .careers-container .single-benefit .benefit-icon {
min-width: var(--icon-unit);
height: var(--icon-unit);
border-radius: 4px;
background-color: var(--cf7-field-bg);
overflow: hidden;
position: relative;  
}
section.section-list.section-careers .careers-container .single-benefit .benefit-icon > img {
width: calc(var(--icon-unit) * 0.50);
height: calc(var(--icon-unit) * 0.50);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
object-fit: contain;
filter: var(--filter-to-alt);
}
section.section-list.section-careers .careers-container .single-benefit .benefit-text {
margin-top: calc(var(--icon-unit) * 0.50 - 0.5em);
}
section.section-list.section-careers .careers-container .single-benefit .benefit-text p {
color: var(--body-color);
} @media (max-width: 53.0625em) {
section.section-list.section-careers .careers-container {
gap: var(--spacing-v);
}
section.section-list.section-careers .careers-container .list-container {
order: unset;
}
section.section-list.section-careers .careers-container .list-container,
section.section-list.section-careers .careers-container .benefits-container {
width: 100%;
}  
} section.section-careers .form-layer {
--form-w: 40%;
--bg-unit: 105vh;
position: fixed;
display: block;
width: 100%;
height: 100vh;
top: 0;
right: -100%; -webkit-overflow-scrolling: touch !important;
pointer-events: none;
transition: var(--slow-trans);
}
section.section-careers .form-layer::before {
content: '';
display: block;
width: 200vw;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: rgb(0,0,0);
background: linear-gradient(-90deg, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 90%);
opacity: 0;
transition: var(--slow-trans);
}
section.section-careers .form-layer.is-active::before {
opacity: 0.30;
}
section.section-careers .form-layer.is-active {
right: 0;
pointer-events: auto;
}
section.section-careers .form-layer .form-bg {
overflow: hidden;
width: calc(100% - var(--form-w));
height: 100%;
display: flex;
flex-wrap: wrap;
position: absolute;
top: 0;
left: 0;
}
section.section-careers .form-layer .form-container {
overflow: scroll;
width: var(--form-w);
height: 100%;
align-items: center;
position: relative;
padding-top: calc(var(--padding) * 0.50);
padding-bottom: calc(var(--padding) * 1);
padding-left: calc(var(--container) * 0.50);
padding-right: calc(var(--container) * 0.50);
background-color: var(--main-color);
left: calc(100% - var(--form-w));
}
section.section-careers .form-layer .form-container::-webkit-scrollbar { display: none;
}
section.section-careers .form-layer .form-container { -ms-overflow-style: none; scrollbar-width: none; }
section.section-careers .form-layer .form-container .close-icon {
--line-w: 24px;
--line-h: 2px;
width: var(--line-w);
height: var(--line-w);
position: absolute;
top: calc(var(--spacing-v) * 0.50);
right: calc(var(--spacing-v) * 0.50);
cursor: pointer;
rotate: 45deg;
}
section.section-careers .form-layer .form-container .close-icon > span {
display: block;
border-radius: 999vw;
background: var(--alt-color);
position: absolute;
transition: var(--default-trans);
}
section.section-careers .form-layer .form-container .close-icon > span:first-of-type {
width: var(--line-h);
height: 100%;
left: calc(50% - (var(--line-h) * 0.50));
}
section.section-careers .form-layer .form-container .close-icon > span:last-of-type {
width: 100%;
height: var(--line-h);
top: calc(50% - (var(--line-h) * 0.50));
}
section.section-careers .form-layer .form-container .form-title {
text-align: center;
margin-bottom: calc(var(--padding) * 0.35);
} @media (max-width: 64em) {
section.section-careers .form-layer {
--form-w: 60%;
overflow: visible;
}
section.section-careers .form-layer .form-container {
padding-left: var(--container);
padding-right: var(--container);
}
} @media (max-width: 40em) {
section.section-careers .form-layer {
--form-w: 90%;
}
section.section-careers .form-layer .form-container .cf7-form .field-textarea textarea {
height: 150px;
}
} section.section-logos .gallery-slider .owl-stage-outer {
overflow: unset;
}
section.section-logos .gallery-slider + .gallery-slider .owl-stage {
border-top: 1px solid #E0E0E0;
}
section.section-logos .gallery-slider .item {
--portrait-factor: 1.50;
--item-height: 60px;
width: 100%;
position: relative;
padding-bottom: 60%;
}
section.section-logos .gallery-slider .item img {
display: block;
width: 75%;
max-width: 100%;
object-fit: contain;
max-height: var(--item-height);
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
section.section-logos .gallery-slider .item[data-orientation="v"] img {
max-height: calc(var(--item-height) * var(--portrait-factor));
} section.section-logosliderv {
--min-height: 500px;
--height-unit: 55vh;
--slide-items: 3;
--gap-unit: 20px;
}
section.section-logosliderv .section-heading {
margin-bottom: 0;
}
section.section-logosliderv .section-heading .title {
font-size: calc(var(--titlesize) * 0.50);
}
section.section-logosliderv .logosliderv-content {
width: 49%;
display: grid;
align-content: center;
text-align: center;
gap: var(--spacing-v);
background-color: var(--bg-color);
border-radius: var(--radius);
padding: 30px 20px;
}
section.section-logosliderv .logosliderv-container {
width: 49%;
display: flex;
justify-content: space-between;
position: relative;
overflow: hidden;
height: var(--height-unit);
}
section.section-logosliderv .single-sliderv {
--icon-unit: 48px;
--slider-width: 32%;
display: flex;
flex-direction: column;
width: var(--slider-width);
font-size: calc(var(--bodysize) * 0.90);
}
section.section-logosliderv .single-sliderv[data-slider="2"] {
flex-direction: column-reverse;
}
section.section-logosliderv .single-sliderv .single-item {
background-color: var(--bg-color);
border-radius: var(--radius);
padding: 16px;
transition: var(--default-trans);
min-height: calc(var(--height-unit) / var(--slide-items));
margin-bottom: calc(var(--gap-unit) / (var(--slide-items) - 1));
}
section.section-logosliderv .single-sliderv .single-item a {
width: 100%;
height: 100%;
}
section.section-logosliderv .single-sliderv .single-item.is-link:hover {
scale: calc(var(--scale-down) * 0.95);
}
section.section-logosliderv .single-sliderv .single-item .item-img {
width: var(--icon-unit);
height: var(--icon-unit);
margin-bottom: calc(var(--spacing-v) * 1.25);
overflow: hidden;
position: relative;
}
section.section-logosliderv .single-sliderv .single-item .item-img > img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
section.section-logosliderv .single-sliderv .single-item .item-title {
font-weight: bold;
color: var(--body-color);
}
section.section-logosliderv .single-sliderv .single-item .item-text {
color: var(--body-alt-color);
margin-top: 6px;
} @media (min-width: 120.0625em) {
section.section-logosliderv {
--height-unit: 45vh;
}
section.section-logosliderv .single-sliderv {
--icon-unit: 58px;
}
} @media (max-width: 96em) {
section.section-logosliderv {
--height-unit: 58vh;
}
section.section-logosliderv .single-sliderv {
--icon-unit: 42px;
}
section.section-logosliderv .single-sliderv .single-item .item-img {
margin-bottom: var(--spacing-v);
}
} @media (max-width: 80em) {
section.section-logosliderv {
--height-unit: 60vh;
}
} @media (max-width: 64em) {
section.section-logosliderv {
--height-unit: 30vh;
}
section.section-logosliderv .logosliderv-content,
section.section-logosliderv .logosliderv-container {
width: 100%;
}
section.section-logosliderv .logosliderv-content + .logosliderv-container {
margin-top: var(--spacing-v);
}
section.section-logosliderv .logosliderv-content {
min-height: var(--height-unit);
}
} @media (max-width: 53.0625em) {
section.section-logosliderv {
--height-unit: 40vh;
}
section.section-logosliderv .logosliderv-content {
min-height: unset;
padding: 40px 20px;
}
} @media (max-width: 40em) {
section.section-logosliderv {
--height-unit: 50vh;
}
} @media (max-width: 39.99em) {
section.section-logosliderv {
--gap-unit: 10px;
}
section.section-logosliderv .container {
padding: 0;
}
section.section-logosliderv .logosliderv-content + .logosliderv-container {
height: unset;
}
section.section-logosliderv .logosliderv-content {
margin: 0 var(--container)
}
section.section-logosliderv .logosliderv-container {
display: grid;
gap: var(--gap-unit);
}
section.section-logosliderv .single-sliderv {
--slider-width: 100%;
flex-direction: unset !important;
}
section.section-logosliderv .single-sliderv[data-slider="2"] {
transform: translateX(-50%);
}
section.section-logosliderv .single-sliderv .single-item {
min-width: 40vw;
margin-bottom: unset;
margin-right: var(--gap-unit);
}
} @media (max-width: 29.99em) {
section.section-logosliderv .single-sliderv {
--icon-unit: 38px;
}
section.section-logosliderv .single-sliderv .single-item {
min-width: 48vw;
}
} section.section-map {
padding: 0;
}
section.section-map .container {
align-items: center;
}
section.section-map .map-text {
width: 40%;
padding-top: calc(var(--padding) * 0.40);
padding-bottom: calc(var(--padding) * 0.40);
padding-left: var(--container);
padding-right: calc(var(--container) * 0.40);
}
section.section-map .map-text .section-heading {
margin-bottom: calc(var(--spacing-v) * 1.50);
}
section.section-map .map-text .map-links > div a {
color: var(--body-color);
font-size: calc(var(--bodysize) * 1.60);
font-family: var(--titlefont);
font-weight: bold;
line-height: 1em;
letter-spacing: var(--titleletterspacing);
}
section.section-map .map-text .map-links > div + div {
margin-top: calc(var(--spacing-v) * 0.60);
}
section.section-map .map-text .map-cta {
color: var(--body-alt-color);
margin-top: calc(var(--spacing-v) * 2);
}
section.section-map .map-text .map-cta .cta-title {
margin-bottom: var(--spacing-v);
}
section.section-map .map-container {
width: 60%;
}
section.section-map .google-map {
aspect-ratio: 40/25;
} @media (max-width: 64em) {
section.section-map .map-text .map-links > div a {
font-size: calc(var(--bodysize) * 1.25);
}
section.section-map .google-map {
aspect-ratio: 40/30;
}
} @media (max-width: 53.0625em) {
section.section-map .map-text {
width: 100%;
padding: calc(var(--padding) * 0.50) var(--container);
}
section.section-map .map-container {
width: 100%;
}
} @media (max-width: 30em) {
section.section-map .google-map {
aspect-ratio: 1/1;
}
} section.section-masonry .section-heading {
width: 100%;
}
section.section-masonry .section-heading > div {
gap: var(--spacing-v);
align-items: center;
}  
section.section-masonry .text-container {
width: 70%;
margin-bottom: calc(var(--padding) * 0.35);
}
section.section-masonry .masonry-container {
transition: var(--default-trans);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-v);
}
html.dark-mode section.section-masonry.section-alt .masonry-container .single-item,
html.light-mode section.section-masonry.section-main .masonry-container .single-item {
background-color: var(--light-color);
box-shadow: var(--shadow);
}
html.light-mode section.section-masonry.section-alt .masonry-container .single-item {
background-color: var(--bg-dark);
box-shadow: none;
}
section.section-masonry .masonry-container .single-item {
--img-height: 280px;
--arrow-unit: 18px;
display: grid;
align-content: flex-start;
gap: calc(var(--spacing-v) * 0.50);
padding: 40px 20px;
background-color: var(--bg-color);
border-radius: var(--radius);
line-height: normal;
transition: var(--default-trans);
}
section.section-masonry .masonry-container a.single-item:hover {
scale: var(--scale-down);
}  section.section-masonry .masonry-container .w-33 {
grid-column: span 4;
}
section.section-masonry .masonry-container .w-50 {
grid-column: span 6;
}
section.section-masonry .masonry-container .w-66 {
grid-column: span 8;
}
section.section-masonry .masonry-container .w-100 {
grid-column: span 12;
}
section.section-masonry .masonry-container .single-item .item-img {
width: 100%;
height: var(--img-height);
overflow: hidden;
position: relative;
}
section.section-masonry .masonry-container .single-item .item-img > img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: top center;
}
section.section-masonry .masonry-container .single-item .item-title h3 {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.40);
min-height: 2em;
color: var(--alt-color);
}
section.section-masonry .masonry-container .single-item.w-100 .item-title h3 {
min-height: unset;
}
section.section-masonry .masonry-container .item-text p {
color: var(--body-alt-color);
}
section.section-masonry .masonry-container .single-item.w-100 .item-img {
width: 39%;
order: 1;
}
section.section-masonry .masonry-container .single-item.w-100 .item-img > img {
object-position: right center;
}
section.section-masonry .masonry-container .single-item .grid {
gap: calc(var(--spacing-v) * 0.50);
}
section.section-masonry .masonry-container .single-item.w-100 .grid {
width: 59%;
align-content: center;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) .grid {
width: 100%;
} section.section-masonry .masonry-container[data-custom="5"] {
grid-template-columns: repeat(2, 1fr);
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] {
grid-row: span 2;
padding-right: 20px;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
overflow: hidden;
position: relative;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item .grid {
width: 69%;
align-content: end;
padding: 40px 0;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .grid {
width: 60%;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .grid {
align-content: start;
z-index: 1;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-title h3 {
font-size: calc(var(--bodysize) * 2.40);
}
section.section-masonry .masonry-container[data-custom="5"] .single-item .item-img {
width: 28%;
height: 100%;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-img {
position: absolute;
bottom: 0;
right: 0;
width: 51%;
height: 55%;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item .item-img > img {
object-position: right center;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-img > img {
object-position: right bottom;
}
section.section-masonry .masonry-container.is-image {
display: block;
position: relative;
}
section.section-masonry .masonry-container.is-image img {
width: 100%;
height: auto;
object-fit: contain;
} @media (max-width: 108.0625em) {
section.section-masonry .masonry-container .single-item {
--img-height: 250px;
}
} @media (max-width: 96em) {
section.section-masonry .masonry-container .single-item {
--img-height: 240px;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-title h3 {
font-size: calc(var(--bodysize) * 2.10);
}
} @media (max-width: 86.4275em) {
section.section-masonry .masonry-container .single-item {
--img-height: 220px;
}
} @media (max-width: 75.0625em) {
section.section-masonry .masonry-container .single-item {
--img-height: 200px;
}
} @media (max-width: 64em) {
section.section-masonry .masonry-container .w-33,
section.section-masonry .masonry-container .w-66 {
grid-column: span 6;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) {
grid-column: span 12;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) .item-img {
width: 39%;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) .item-img > img {
object-position: left center;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) .grid {
width: 59%;
align-content: center;
}
section.section-masonry .masonry-container .single-item .item-title h3 {
font-size: calc(var(--bodysize) * 1.20);
}
section.section-masonry .masonry-container[data-custom="5"] .single-item {
align-content: space-between;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .grid {
width: 100%;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-title h3 {
font-size: calc(var(--bodysize) * 1.45);
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-img {
position: relative;
width: 80%;
height: unset;
bottom: unset;
right: -20px;
margin-left: auto;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-img > img {
object-position: bottom right;
}
} @media (max-width: 53.0625em) {
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .item-img {
width: calc(100% + 40px);
margin-left: -40px;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item[data-item="1"] .grid {
padding-bottom: 0;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item .grid {
width: 75%;
}
section.section-masonry .masonry-container[data-custom="5"] .single-item:not([data-item="1"]) .item-img {
position: absolute;
width: 40%;
right: -15%;
}
} @media (max-width: 40em) {
section.section-masonry .section-heading .title {
width: 100%;
}
section.section-masonry .text-container {
width: 100%;
}
section.section-masonry .masonry-container .w-33,
section.section-masonry .masonry-container .w-50,
section.section-masonry .masonry-container .w-66,
section.section-masonry .masonry-container .w-100 {
grid-column: span 12;
padding: 40px 20px 40px !important;
}
section.section-masonry .masonry-container .single-item > .flex {
justify-content: space-between;
gap: calc(var(--spacing-v) * 0.50);
}
section.section-masonry .masonry-container .single-item.w-100 .grid {
width: 100%;
align-content: unset;
}
section.section-masonry .masonry-container:not(.is-custom) .single-item .item-img {
height: unset;
margin-bottom: var(--spacing-v) !important;
}
section.section-masonry .masonry-container .single-item.w-100 .item-img {
width: 100%;
order: unset;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) .item-img {
width: 100%;
}
section.section-masonry .masonry-container .single-item.w-100 .item-img > img {
object-position: top center;
}
section.section-masonry .masonry-container .single-item[data-to100="1"]:not(.w-100) .grid {
width: 100%;
align-content: center;
}
section.section-masonry .masonry-container .single-item .item-title h3 {
min-height: unset;
}
section.section-masonry .masonry-container[data-custom="5"] {
grid-template-columns: repeat(1, 1fr);
}
} section.section-onlytext .section-heading {
width: 42%;
margin-bottom: 0;
}
section.section-onlytext.is-stacked .section-heading {
width: 70%;
}
section.section-onlytext .section-heading > div + div {
margin-top: calc(var(--spacing-v) * 1.5) ;
}
section.section-onlytext .section-heading .tagline {
width: 70%;
font-size: calc(var(--bodysize) * 1.60);
font-family: var(--titlefont);
color: var(--body-color);
}
section.section-onlytext.is-stacked .section-heading .tagline {
width: 100%;
}
section.section-onlytext .text-container {
width: 52%;
}
section.section-onlytext.is-stacked .text-container {
width: 70%;
margin-top: var(--spacing-v);
}
section.section-onlytext .text-container .text p,
section.section-onlytext .text-container .text ul,
section.section-onlytext .text-container .text ol {
color: var(--body-alt-color);
}
section.section-onlytext .text-container .text ul a,
section.section-onlytext .text-container .text ol a {
border-bottom: 1px dotted var(--body-alt-color) !important;
transition: var(--default-trans);
}
section.section-onlytext .text-container .text ul a::before,
section.section-onlytext .text-container .text ol a::before {
content: '';
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
background-color: var(--body-alt-color);
transition: var(--default-trans);
}
section.section-onlytext .text-container .text ul a:hover::before,
section.section-onlytext .text-container .text ol a:hover::before {
width: 100%;
}
section.section-onlytext .text-container .text + a button {
margin-top: var(--spacing-v);
} @media (max-width: 64em) {
section.section-onlytext .section-heading .tagline {
width: 100%;
font-size: calc(var(--bodysize) * 1.25);
}
} @media (max-width: 40em) {
section.section-onlytext .section-heading,
section.section-onlytext.is-stacked .section-heading {
width: 100%;
}
section.section-onlytext .text-container,
section.section-onlytext.is-stacked .text-container {
width: 100%;
margin-top: calc(var(--spacing-v) * 2);
}
} section.section-paragraphs .section-heading,
section.section-paragraphs .text-container {
text-align: center;
}
section.section-paragraphs ul,
section.section-paragraphs ol {
color: var(--body-color);
}
section.section-paragraphs ul a,
section.section-paragraphs ol a {
border-bottom: 1px dotted var(--body-color) !important;
transition: var(--default-trans);
}
section.section-paragraphs ul a::before,
section.section-paragraphs ol a::before {
content: '';
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
background-color: var(--body-color);
transition: var(--default-trans);
}
section.section-paragraphs ul a:hover::before,
section.section-paragraphs ol a:hover::before {
width: 100%;
}
section.section-paragraphs .text-container .text + a button {
margin-top: var(--spacing-v);
}
section.section-paragraphs .container > div + .paragraphs-container {
margin-top: calc(var(--padding) * 0.75);
}
section.section-paragraphs .paragraph-ancora {
transform: translateY(calc(-1 * var(--header-height) - 0.40 * var(--padding))) !important;
}
section.section-paragraphs .single-paragraph {
position: relative;
padding-bottom: calc(var(--padding) * 0.5);
}
section.section-paragraphs .single-paragraph:last-of-type {
padding-bottom: 0;
}
section.section-paragraphs .single-paragraph .title + .text {
margin-top: var(--spacing-v);
}
section.section-paragraphs .single-paragraph h3 {
font-size: calc(var(--titlesize) * 0.40);
}
section.section-paragraphs .single-paragraph .text h3 {
font-size: calc(var(--titlesize) * 0.30);
margin-bottom: calc(var(--spacing-v) * 0.40);
}
section.section-paragraphs .single-paragraph ul a,
section.section-paragraphs .single-paragraph ol a {
border-bottom: 1px dotted var(--body-color) !important;
transition: var(--default-trans);
}
section.section-paragraphs .single-paragraph p a,
section.section-paragraphs .single-paragraph ul a,
section.section-paragraphs .single-paragraph ol a {
border-bottom-color: var(--grey-color) !important;
}
section.section-paragraphs .single-paragraph ul a::before,
section.section-paragraphs .single-paragraph ol a::before {
content: '';
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
background-color: var(--body-color);
transition: var(--default-trans);
}
section.section-paragraphs .single-paragraph ul a:hover::before,
section.section-paragraphs .single-paragraph ol a:hover::before {
width: 100%;
}
section.section-paragraphs .single-paragraph p a::before,
section.section-paragraphs .single-paragraph ul a::before,
section.section-paragraphs .single-paragraph ol a::before {
background-color: var(--grey-color);
}
section.section-paragraphs .single-paragraph button.cta {
margin-top: var(--spacing-v);
} @media (max-width: 40em) {
section.section-paragraphs .section-heading,
section.section-paragraphs .text-container {
text-align: unset;
}
section.section-paragraphs .single-paragraph {
padding-bottom: calc(var(--padding) * 0.75);
}
section.section-paragraphs .single-paragraph h3 {
font-size: calc(var(--titlesize) * 0.60);
}
section.section-paragraphs .single-paragraph .text h3 {
font-size: calc(var(--titlesize) * 0.50);
margin-bottom: var(--spacing-v);
margin-top: calc(var(--spacing-v) * 1.65);
}
} section.section-related .single-related {
width: 32.5%;
}
section.section-related .single-related > a,
section.section-related .single-related-item > a {
transition: var(--default-trans);
}
section.section-related .single-related:hover > a,
section.section-related .single-related-item:hover > a {
scale: var(--scale-down);
}
section.section-related .single-related > a,
section.section-related .single-related-item > a {
display: block;
overflow: hidden;
aspect-ratio: var(--ratio-sq);
position: relative;
border-radius: var(--radius);
}
section.section-related .single-related > a::before,
section.section-related .single-related-item > a::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
position: relative;
z-index: 1;
opacity: 0.8;
}
section.section-related .single-related > a > div,
section.section-related .single-related-item > a > div {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
section.section-related .single-related .related-img img,
section.section-related .single-related-item .related-img img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--default-trans);
}
section.section-related .single-related .related-text,
section.section-related .single-related-item .related-text {
position: relative;
z-index: 1;
height: 100%;
display: flex;
flex-wrap: wrap;
padding: 48px 40px;
color: var(--light-color);
}
section.section-related .single-related .related-text h3,
section.section-related .single-related-item .related-text h3 {
--unit: calc(1em * 0.75);
width: 100%;
color: var(--light-color);
position: relative;
padding-right: calc(var(--unit) + 12px);
}
section.section-related .single-related .related-text h3::after,
section.section-related .single-related-item .related-text h3:after {
content: '';
width: var(--unit);
height: var(--unit);
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg-light.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
position: absolute;
top: 0;
right: 0;
rotate: -90deg;
transition: transform 0.70s;
}
section.section-related .single-related:hover .related-text h3::after,
section.section-related .single-related-item:hover .related-text h3:after {
transform: rotateY(-360deg);
} section.section-related .related-slider .owl-related-slider {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
section.section-related .related-slider .single-related-item {
width: 100%;
aspect-ratio: var(--ratio-sq);
position: relative;
}
section.section-related .related-slider-nav {
position: relative;
}
section.section-related .related-slider-nav div {
position: absolute;
right: 0;
bottom: calc(var(--padding) * 0.35);
}
section.section-related .related-slider-nav div > button {
height: calc(var(--titlesize) * 0.80);
aspect-ratio: 1/1;
background-color: transparent !important;
transition: var(--default-trans);
}
section.section-related .related-slider-nav div > button:hover {
scale: 1.4;
}
section.section-related .related-slider-nav div > button > span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
rotate: -45deg;
transition: var(--default-trans);
}
section.section-related .related-slider-nav div > button.related-slider-prev > span::before {
transform: rotate(180deg)
} @media (max-width: 40em) {
section.section-related .single-related {
width: 100%;
}
section.section-related .related-slider-nav {
display: none;
}
.owl-related .owl-dots {
text-align: center;
margin-top: var(--spacing-v);
}
.owl-related button.owl-dot {
padding: 10px !important;
}
.owl-related button.owl-dot >span {
display: block;
width: 10px;
height: 10px;
border-radius: 999vw;
background-color: var(--alt-color);
opacity: 0.5;
transition: var(--default-trans);
}
.owl-related button.owl-dot.active >span {
opacity: 0.8;
}
} section.section-mediazoom .mediazoom-media {
width: calc(100% - var(--container) * 2);
max-height: 100vh;
position: relative;
border-radius: var(--radius);
aspect-ratio: var(--ratio-hr);
overflow: hidden;
margin: 0 auto;
z-index: 1;
}
section.section-mediazoom .mediazoom-media > a {
width: 100%;
height: 100%;
transition: var(--default-trans);
} section.section-mediazoom .mediazoom-media img {
height: 100%;
width: 100%;
object-fit: cover;
} section.section-mediazoom .mediazoom-media.is-covered:hover > a {
scale: var(--scale-up);
}
section.section-mediazoom .mediazoom-media.is-covered > a::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-filled-2x.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-light);
transform: translateX(-50%) translateY(-50%);
transition: var(--default-trans);
}
section.section-mediazoom .mediazoom-media.is-video:not(.is-covered) video {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
} section.section-mediazoom::before {
content: '';
width: 100%;
height: 20%;
position: absolute;
left: 0;
top: 0;
}
.section-pagetitle + .section-mediazoom {
padding-top: 0;
}
.section-pagetitle + .section-mediazoom::before {
background-color: var(--dark-color);
}
.section-main + .section-mediazoom.section-alt {
padding-top: 0;
}
.section-main + .section-mediazoom.section-alt::before {
background-color: var(--main-color);
}
.section-alt + .section-mediazoom.section-main {
padding-top: 0;
}
.section-alt + .section-mediazoom.section-main::before {
background-color: var(--alt-color);
}
.section-main + .section-mediazoom.section-main,
.section-alt + .section-mediazoom.section-alt {
padding-bottom: 0;
}
.section-main + .section-mediazoom.section-main + .section-main,
.section-alt + .section-mediazoom.section-alt + .section-alt {
padding-top: var(--padding);
} @media (max-width: 40em) {
section.section-mediazoom {
padding-top: 0;
}
section.section-mediazoom .mediazoom-media {
width: 100%;
}
section.section-mediazoom .mediazoom-media {
border-radius: 0;
}
}  section.section-steps .steps-controls {
width: 100%;
height: calc(var(--titlesize) * 0.80);
text-align: right;
align-items: center;
gap: var(--spacing-v);
margin-top: calc(var(--spacing-v) * 2);
}
section.section-steps .steps-controls > button {
height: calc(var(--titlesize) * 0.80);
aspect-ratio: 1/1;
background-color: transparent !important;
transition: var(--default-trans);
}
section.section-steps .steps-controls > button:hover {
scale: 1.4;
}
section.section-steps .steps-controls > button > span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
rotate: -45deg;
transition: var(--default-trans);
}
section.section-steps .steps-controls > button.steps-slider-prev > span::before {
transform: rotate(180deg)
}
section.section-steps .stepsX-container {
--items: 3;
display: flex;
flex-wrap: nowrap;
margin-top: var(--spacing-v);
padding-bottom: calc(var(--spacing-v) * 1.5);
}
section.section-steps .stepsX-container > div {
padding-right: var(--spacing-v);
width: calc(100% / var(--items));
min-width: calc(100% / var(--items));
position: relative;
transition: transform 0.3s;
}
section.section-steps .stepsX-container > div:last-child {
padding-right: 0;
}
section.section-steps .stepsX-container .step-index {
--unit: 40px;
--unit-space: 6px;
position: relative;
}
section.section-steps .stepsX-container .step-index::before {
content: '';
display: block;
width: calc(100% - var(--unit) + var(--unit-space));
height: 1px;
position: absolute;
top: 50%;
left: calc(var(--unit) + var(--unit-space));
transform: translateY(-50%);
background-color: var(--alt-color);
opacity: 0.30;
}
section.section-steps .stepsX-container .step-index > div {
margin-bottom: var(--spacing-v);
width: var(--unit);
height: var(--unit);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--titlefont);
font-size: var(--bodysize);
color: var(--alt-color);
background-color: var(--main-color);
border-radius: 999vw;
border: 1px solid var(--alt-color);
position: relative;
}
section.section-steps .stepsX-container .step-index.is-custom > div {
background-color: var(--custom-color);
border-color: var(--custom-color);
}
section.section-steps .stepsX-container .step-index.is-custom > div.is-light {
color: var(--dark-color);
}
section.section-steps .stepsX-container .step-index.is-custom > div.is-dark {
color: var(--light-color);
}
section.section-steps .stepsX-container .step-index > div span {
position: relative;
top: calc(var(--bodysize) * 0.15);
}
section.section-steps .stepsX-container .stepX-item {
--icon-unit: 75px;
padding: 40px 20px;
background-color: var(--bg-color);
border-radius: var(--radius);
transition: var(--default-trans); }
section.section-steps .stepsX-container .stepX-item .step-img {
height: var(--icon-unit);
overflow: hidden;
position: relative;
margin-bottom: calc(var(--spacing-v) * 0.80);
}
section.section-steps .stepsX-container .stepX-item .step-img > img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: left;
}
section.section-steps .stepsX-container .stepX-item .step-img.is-inverted > img {
filter: var(--filter-to-alt);
}
section.section-steps .stepsX-container .stepX-item .step-title {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.40);
line-height: 1em;
min-height: 2em;
color: var(--alt-color);
}
section.section-steps .stepsX-container .stepX-item .step-text {
margin-top: calc(var(--spacing-v) * 0.50);
}
section.section-steps .stepsX-container .stepX-item .step-text p {
color: var(--body-alt-color);
} @media (max-width: 64em) {
section.section-steps .stepsX-container {
--items: 2;
overflow-x: scroll;
margin-top: calc(var(--spacing-v) * 2);
}
} @media (max-width: 40em) {
section.section-steps .stepsX-container {
--items: 1.25;
}
section.section-steps .stepsX-container .stepX-item .step-title {
font-size: calc(var(--bodysize) * 1.20);
}  
} @media (max-width: 24em) {
section.section-steps .stepsX-container {
--items: 1.20;
}
} section.section-team .section-heading {
margin-bottom: 0;
text-align: center;
z-index: -1;
}
section.section-team .section-heading .title {
font-size: calc(var(--titlesize) * 3);
line-height: 0.95em;
margin-bottom: calc(-1 * var(--titlesize) * 0.95);
}
section.section-team .team-container {
grid-template-columns: repeat(4, 1fr);
column-gap: calc(var(--spacing-v) * 0.50);
row-gap: calc(var(--spacing-v) * 1.50);
position: relative;
}
section.section-team .single-member  {
--unit: calc(var(--spacing-v) * 0.50);
display: block;
overflow: hidden;
aspect-ratio: var(--ratio-vr);
position: relative;
border-radius: var(--radius);
}
section.section-team .single-member::after {
content: '';
display: block;
width: 100%;
height: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.50) 100%);
position: absolute;
bottom: 0;
opacity: 0;
transition: var(--default-trans);
}
section.section-team .single-member:hover::after {
opacity: 0.50;
height: 100%;
}
section.section-team .single-member .member-img img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--default-trans);
}
section.section-team .single-member:hover .member-img.is-hover > img {
opacity: 0;
pointer-events: none;
}
section.section-team .single-member .member-img-hover img {
z-index: -1;
}
section.section-team .single-member .member-img img::before {
content: '';
display: block;
width: 100%;
height: 100%;
background: #000000;
position: absolute;
z-index: 1;
opacity: 1;
mix-blend-mode: color;
transition: var(--default-trans);
}
section.section-team .single-member:hover .member-img img::before {
opacity: 0;
}
section.section-team .single-member .member-unitlogo {
height: 40px;
position: absolute;
top: calc(var(--unit) * 1.10);
right: calc(var(--unit) * 1.10);
z-index: 1;
opacity: 0;
transition: var(--default-trans);
}
section.section-team .single-member:hover .member-unitlogo {
opacity: 1;
}
section.section-team .single-member .member-unitlogo img {
width: 100%;
height: 100%;
object-fit: contain;
}
section.section-team .single-member .member-text {
width: 100%;
position: absolute;
bottom: 0;
z-index: 1;
padding: var(--unit);
color: var(--light-color);
transform: translateY(100%);
transition: var(--default-trans);
}
section.section-team .single-member:hover .member-text {
transform: translateY(0);
}
section.section-team .single-member .member-text .member-name {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.10);
transform: translateY(250%);
transition: var(--default-trans);
}
section.section-team .single-member:hover .member-text .member-name {
transform: translateY(0);
}
section.section-team .single-member .member-text .member-role {
font-size: calc(var(--bodysize) * 0.90);
} section.section-team .single-member.before-member,
section.section-team .single-member.after-member {
background-color: transparent;
display: grid;
align-items: center;
}
section.section-team .single-member.before-member::before,
section.section-team .single-member.after-member::before,
section.section-team .single-member.before-member::after,
section.section-team .single-member.after-member::after {
display: none;
}
section.section-team .single-member.before-member .text span,
section.section-team .single-member.after-member .text span {
color: var(--alt-color);
font-family: var(--titlefont);
}
section.section-team .single-member.before-member .text span {
font-size: calc(var(--titlesize) * 0.60);
}
section.section-team .single-member.after-member .text span {
display: block;
font-size: calc(var(--titlesize) * 0.40);
}
section.section-team .single-member.after-member button {
margin-top: var(--spacing-v);
} @media (max-width: 64em) {
section.section-team .single-member::after {
opacity: 1;
height: 100%;
}
section.section-team .single-member:hover::after {
opacity: unset;
}
section.section-team .single-member:hover .member-img.is-hover > img {
opacity: 1;
pointer-events: unset;
}
section.section-team .single-member:active .member-img.is-hover > img {
opacity: 0;
pointer-events: none;
}
section.section-team .single-member .member-img img::before {
opacity: 0;
}
section.section-team .single-member .member-unitlogo { display: none;
}
section.section-team .single-member .member-text {
transform: translateY(0);
}
section.section-team .single-member .member-text .member-name {
transform: translateY(0);
}
} @media (max-width: 53.0625em) {
section.section-team .team-container {
grid-template-columns: repeat(3, 1fr);
}
section.section-team .single-member.after-member .text span {
font-size: calc(var(--titlesize) * 0.60);
}
} @media (max-width: 40em) {
section.section-team .section-heading .title {
font-size: calc(var(--titlesize) * 2.5);
margin-bottom: calc(-1 * var(--titlesize) * 0.80);
}
section.section-team .team-container {
grid-template-columns: repeat(2, 1fr);
}
} @media (max-width: 30em) {
section.section-team .single-member .member-unitlogo {
height: 32px;
}
} section.section-testimonials .section-heading {
width: 75%;
}
section.section-testimonials .testimonial-slider {
position: relative;
z-index: 50;
} section.section-testimonials .related-slider-nav {
position: relative;
}
section.section-testimonials .related-slider-nav div {
position: absolute;
right: var(--container);
bottom: calc(var(--padding) * 0.35);
}
section.section-testimonials .related-slider-nav div > button {
height: calc(var(--titlesize) * 0.80);
aspect-ratio: 1/1;
background-color: transparent !important;
border: 1px solid var(--alt-color);
border-radius: 999vw;
opacity: 0.4;
transition: var(--default-trans);
}
section.section-testimonials .related-slider-nav div > button + button {
margin-left: calc(var(--spacing-v) * 0.60);
}
section.section-testimonials .related-slider-nav div > button:hover {
opacity: 1;
}
section.section-testimonials .related-slider-nav div > button > span::before {
content: '';
display: inline-block;
width: 14px;
height: 14px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-alt);
rotate: -45deg;
position: relative;
top: 2px;
transition: var(--default-trans);
}
section.section-testimonials .related-slider-nav div > button.related-slider-prev > span::before {
transform: rotate(180deg)
} section.section-testimonials .single-testimonial {
padding: 0 var(--container);
}
section.section-testimonials .single-testimonial.type_video {
padding: 0;
}
section.section-testimonials .testimonial-media.is-image {
width: 12%;
aspect-ratio: 1/1;
align-self: flex-start;
border-radius: 999vw;
overflow: hidden;
}
section.section-testimonials .testimonial-media img {
height: 100%;
width: 100%;
object-fit: cover;
}
section.section-testimonials .testimonial-media.is-image + blockquote { width: 82%;
}
section.section-testimonials .testimonial-media.is-video {
width: 50%;
position: relative;
aspect-ratio: 755/572;
overflow: hidden;
}
section.section-testimonials .testimonial-media.is-video:hover > * {
scale: var(--scale-up);
}
section.section-testimonials .testimonial-media.is-video > a {
width: 100%;
height: 100%;
transition: var(--default-trans);
}
section.section-testimonials .testimonial-media.is-video > a::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-filled-2x.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-light);
transform: translateX(-50%) translateY(-50%);
transition: var(--default-trans);
}
section.section-testimonials .testimonial-media.is-video video {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
section.section-testimonials .testimonial-media.is-video + blockquote {
width: 42%;
padding-right: var(--container);
} @media (min-width: 120.0625em) {
section.section-testimonials .testimonial-media.is-video {
aspect-ratio: 5/3;
}
} @media (max-width: 96em) {
section.section-testimonials .testimonial-media.is-video {
aspect-ratio: 5/3;
}
} @media (max-width: 53.0625em) {
section.section-testimonials .single-testimonial.type_video {
align-items: flex-start;
}
section.section-testimonials .testimonial-media.is-video {
width: 45%;
aspect-ratio: 755/572;
}
section.section-testimonials .testimonial-media.is-video > a::before {
width: 70px;
height: 70px;
}
section.section-testimonials .testimonial-media.is-video + blockquote {
width: 48%;
}
} @media (max-width: 40em) {
section.section-testimonials .single-testimonial.type_video {
padding: 0 var(--container);
}
section.section-testimonials .testimonial-media.is-image {
width: 100%;
aspect-ratio: var(--ratio-hr);
border-radius: 0;
}
section.section-testimonials .testimonial-media.is-video {
width: 100%;
aspect-ratio: var(--ratio-hr);
}
section.section-testimonials .testimonial-media.is-image + blockquote,
section.section-testimonials .testimonial-media.is-video + blockquote {
width: 100%;
padding: 0;
top: calc(var(--spacing-v) * -1);
}
} section.section-highlights {
min-height: 100vh;
}
section.section-highlights .section-heading {
margin-bottom: 0;
position: absolute;
top: calc(50vh - var(--padding));
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
section.section-highlights .section-heading .title {
text-align: center;
font-size: calc(var(--titlesize) * 2.5);
line-height: 0.95em;
opacity: 0.20;
}
section.section-highlights .highlights-container {
position: relative;
}
section.section-highlights .single-item {
--unit: calc(0.80 * var(--titlesize));
max-width: 40%;
display: table;
padding: 32px 20px;
background-color: var(--bg-color);
border-radius: var(--radius);
position: relative;
translate: 0 -20%;
}
section.section-highlights .single-item:nth-of-type(1n) {
left: calc(var(--container) * 1);
translate: none;
}
section.section-highlights .single-item:nth-of-type(2n) {
left: 100%;
transform: translateX(-100%);
}
section.section-highlights .single-item:nth-of-type(3n) {
left: 0;
}
section.section-highlights .single-item:nth-of-type(4n) {
left: 55%;
transform: none;
}
section.section-highlights .single-item .item-upper {
gap: var(--spacing-v);
}
section.section-highlights .single-item .item-highlight {
font-family: var(--titlefont);
font-size: var(--unit);
line-height: 1em;
color: var(--alt-color);
}
section.section-highlights .single-item .item-img {
width: var(--unit);
height: var(--unit);
position: relative;
padding: calc(var(--unit) * 0.10);
background-color: var(--cf7-field-bg);
border: 1px solid var(--grey-color);
border-radius: 999vw;
}
section.section-highlights .single-item .item-img img {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
filter: var(--filter-to-alt);
}
section.section-highlights .single-item .item-caption {
color: var(--alt-color);
margin-top: calc(var(--spacing-v) * 0.50);
} @media (min-width: 120.0625em) {
section.section-highlights .container {
padding: 0 calc(var(--container) * 1.5);
}
section.section-highlights .single-item {
top: 200px;
}
} @media (max-width: 64em) {
section.section-highlights {
min-height: unset;
}
section.section-highlights .section-heading {
top: 50%;
}
section.section-highlights .single-item {
top: 100px;
}
} @media (max-width: 53.0625em) {
section.section-highlights .single-item {
max-width: 50%;
}
section.section-highlights .single-item:nth-of-type(4n) {
left: 40%;
}
} @media (max-width: 40em) {
section.section-highlights .section-heading .title {
font-size: calc(var(--titlesize) * 2);
}
section.section-highlights .single-item {
max-width: 55%;
}
section.section-highlights .single-item:nth-of-type(2n) {
left: 100%;
transform: translateX(-110%);
}
section.section-highlights .single-item:nth-of-type(4n) {
left: 25%;
transform: none;
}
} @media (max-width: 40em) {
section.section-highlights .single-item {
max-width: 65%;
}
} @media (max-width: 24em) {
section.section-highlights .single-item {
max-width: 75%;
}
section.section-highlights .single-item:nth-of-type(4n) {
left: 50%;
transform: translateX(-50%);
}
} section.section-blog {
background-color: var(--dark-color);
padding-bottom: 0;
}
section.section-blog .blog-main {
margin: 0 calc(var(--container) * 0.50);
padding: calc(var(--padding) * 0.70) 0;
border-radius: calc(var(--radius) * 3);
background-color: var(--light-color);
box-shadow: var(--shadow);
color: var(--dark-color);
position: relative;
z-index: 1;
}
section.section-blog .blog-main p {
color: var(--grey-color);
}
section.section-blog .blog-main ul,
section.section-blog .blog-main ol {
color: var(--grey-color);
}
section.section-blog .blog-main ul a,
section.section-blog .blog-main ol a {
border-bottom: 1px dotted var(--grey-color) !important;
}
section.section-blog + section {
padding-top: calc(var(--padding) * 2);
margin-top: calc(-1 * var(--padding));
}
section.section-blog + section.section-main {
padding-top: var(--padding);
margin-top: 0;
} @media (min-width: 120.0625em) {
section.section-blog .blog-main {
margin: 0 calc(var(--container) * 1);
}
section.section-blog .blog-main > .container {
padding: 0 calc(var(--container) * 0.5);
}
} @media (max-width: 80em) {
section.section-blog .blog-main {
border-radius: calc(var(--radius) * 2);
}
} @media (max-width: 40em) {
section.section-blog + section {
padding-top: 0;
margin-top: 0;
}
section.section-blog .blog-main {
border-radius: 0;
margin: 0;
box-shadow: none;
}
}  section.section-featuredpost {
background-color: var(--dark-color);
color: var(--light-color);
padding-top: 0;
}
section.section-featuredpost .featured-meta {
width: 40%;
}
section.section-featuredpost .featured-meta .post-date {
display: none;
width: 100%;
color: #C4C4C4;
margin-bottom: calc(var(--spacing-v) * 0.50);
}
section.section-featuredpost .featured-meta > div + div {
margin-top: calc(var(--spacing-v) * 1.5);
}
section.section-featuredpost .featured-meta h2 {
font-size: calc(var(--titlesize) * 0.60);
color: var(--light-color);
}
section.section-featuredpost .featured-meta .post-excerpt {
color: var(--light-color);
}
section.section-featuredpost .featured-meta button.cta-light.cta-button:hover {
background-color: var(--dark-color);
border-color: var(--light-color);
}
section.section-featuredpost .featured-img {
width: 50%;
}
section.section-featuredpost .featured-img > a {
display: block;
overflow: hidden;
aspect-ratio: 990/500;
position: relative;
border-radius: var(--radius);
transition: var(--default-trans);
}
section.section-featuredpost .featured-img:hover > a {
scale: var(--scale-down);
}
section.section-featuredpost .featured-img img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--default-trans);
} body.blog-listing .section-blog {
padding: 0;
}
body.blog-listing .section-blog .blog-main > .container {
padding: 0 calc(var(--container) * 0.50);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: calc(var(--spacing-v) * 2);
}
body.blog-listing .section-blog .blog-main .archive-nav {
width: 19%;
position: relative;
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist {
display: grid;
row-gap: calc(var(--spacing-v) * 0.50);
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link {
position: relative;
padding-left: 12px;
margin-right: auto;
opacity: 0.5;
transition: var(--default-trans);
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link.active,
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link:hover {
opacity: 1;
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link::before {
content: '';
display: block;
width: 3px;
height: 0;
background-color: var(--dark-color);
position: absolute;
top: -4px;
left: 0;
transition: var(--default-trans);
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link.active::before {
height: calc(100% + 4px);
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .link-title {
font-family: var(--titlefont);
color: var(--dark-color);
font-size: var(--bodysize);
}
body.blog-listing .section-blog .blog-main .archive-listing {
width: 80%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: calc(var(--spacing-v) * 2) calc(var(--spacing-v) * 1.30);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item {
display: grid;
gap: var(--spacing-v);
height: 100%;
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .item-upper {
display: grid;
align-content: flex-start;
gap: 0;
position: relative;
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .item-img {
width: 100%;
height: auto;
aspect-ratio: var(--ratio-hr);
overflow: hidden;
border-radius: var(--radius);
margin-bottom: var(--spacing-v);
transition: var(--default-trans);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .item-img:hover {
scale: var(--scale-down);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .item-img > img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .post-date {
display: none;
font-size: var(--bodysize);
color: var(--grey-color);
margin-bottom: calc(var(--spacing-v) * 0.50);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .item-title {
color: var(--dark-color);
font-size: calc(var(--bodysize) * 1.40);
margin-bottom: calc(var(--spacing-v) * 0.30);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .post-taxlist {
font-size: calc(var(--bodysize) * 0.90);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .excerpt {
margin-bottom: var(--spacing-v);
} @media (max-width: 64em) {
body.blog-listing section.section-pagetitle {
padding-bottom: calc(var(--padding) * 0.5);
}
} @media (max-width: 53.0625em) {
section.section-featuredpost .featured-img > a {
aspect-ratio: var(--ratio-sq);
}
body.blog-listing .section-blog .blog-main .archive-nav,  
body.blog-listing .section-blog .blog-main .archive-listing {
width: 100%;
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--spacing-v);
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link {
margin: 0;
padding: 0;
}
body.blog-listing .section-blog .blog-main .archive-nav .blog-taxlist .single-link::before {
display: none;
}
} @media (max-width: 40em) {
section.section-featuredpost .container {
gap: calc(var(--spacing-v) * 2);
flex-direction: column-reverse;
}
section.section-featuredpost .featured-meta,
section.section-featuredpost .featured-img {
width: 100%;
}
section.section-featuredpost .featured-img > a {
aspect-ratio: 990/500;
}
body.blog-listing .section-blog .blog-main > .container {
padding: 0 var(--container);
}
body.blog-listing .section-blog .blog-main .archive-listing {
grid-template-columns: repeat(1, 1fr);
}
body.blog-listing .section-blog .blog-main .archive-listing .single-item .item-title {
font-size: calc(var(--bodysize) * 1.20);
}
} @media (max-width: 30em) {
section.section-featuredpost .featured-img > a {
aspect-ratio: var(--ratio-sq)
}
} body.single-post main {
background-color: var(--dark-color);
}
body.single-post .section-pagetitle {
text-align: center;
padding-bottom: 0;
}
body.single-post .section-pagetitle .section-heading > * {
width: 100%;
}
body.single-post .section-pagetitle .section-heading {
margin-bottom: calc(var(--spacing-v) * 2);
}
body.single-post #breadcrumbs {
margin-bottom: var(--spacing-v);
}
body.single-post .section-pagetitle .post-date {
display: none;
width: 100%;
color: var(--light-color);
margin-bottom: calc(var(--spacing-v) * 0.50);
}
body.single-post section.section-pagetitle .section-heading .title {
margin-bottom: 0;
font-size: calc(var(--titlesize) * 0.60);
}
body.single-post .section-blog .blog-main .container > div + div {
margin-top: calc(var(--spacing-v) * 1.5);
}
body.single-post .section-blog .post-featuredimg > a {
overflow: hidden;
position: relative;
aspect-ratio: 990/500;
border-radius: var(--radius);
overflow: hidden;
margin-top: calc(-1 * (var(--padding) + var(--padding) * 0.70));
transition: var(--default-trans);
}
body.single-post .section-blog .post-featuredimg:hover > a {
scale: var(--scale-down);
}
body.single-post .section-blog .post-featuredimg img {
height: 100%;
width: 100%;
object-fit: cover;
}
body.single-post .section-blog .post-meta {
--unit: 40px;
column-gap: var(--unit);
row-gap: var(--spacing-v);
}
body.single-post .section-blog .post-meta > div:not(:first-child) {
padding-left: var(--unit);
border-left: 1px solid #E0E0E0;
}
body.single-post .section-blog .post-meta span {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.20);
}
body.single-post .section-blog .post-toc .toc-title {
font-size: var(--bodysize);  
}
body.single-post .section-blog .post-toc ul {
margin: calc(var(--spacing-v) / 1.5) 0 0 calc(var(--spacing-v) / 1.25);
font-size: var(--bodysize);
}
body.single-post .section-blog .post-toc ul li + li {
margin-top: 4px;
}
body.single-post .section-blog .post-toc ul li a {
border-bottom: 1px dotted var(--grey-color) !important;
transition: var(--default-trans);
display: inline;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0 105%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size 0.3s;
}
body.single-post .section-blog .post-toc ul li a:hover {
background-size: 100% 1px;
}
body.single-post .section-blog .blog-main .section-paragraphs {
margin-top: calc(var(--spacing-v) * 2);
}
body.single-post .section-blog .blog-main h2 {
font-size: calc(var(--titlesize) * 0.40);
color: var(--dark-color);
}
body.single-post .section-blog .blog-main h3 {
font-size: calc(var(--titlesize) * 0.30);
color: var(--dark-color);
margin-bottom: calc(var(--spacing-v) * 0.40);
} @media (max-width: 80em) {
body.single-post section.section-pagetitle .section-heading .title {
font-size: calc(var(--titlesize) * 0.80);
}
} @media (max-width: 40em) {
body.single-post .section-blog .post-meta span {
font-size: calc(var(--bodysize) * 1);
}
body.single-post .section-blog .post-meta > div {
width: 100%;
}
body.single-post .section-blog .post-meta > div:not(:first-child) {
padding-left: 0;
border: none;
}
body.single-post .section-blog .post-toc ul li + li {
margin-top: 10px;
}
body.single-post .section-blog .blog-main h2 {
font-size: calc(var(--titlesize) * 0.60);
}
body.single-post .section-blog .blog-main h3 {
font-size: calc(var(--titlesize) * 0.50);
margin-bottom: var(--spacing-v);
margin-top: calc(var(--spacing-v) * 1.65);
}
} @media (max-width: 30em) {
body.single-post .section-blog .post-featuredimg {
aspect-ratio: var(--ratio-sq);
}
} body.cpt-single .section-pagetitle {
text-align: center;
padding-bottom: var(--padding);
}
body.cpt-single .section-pagetitle .section-heading {
margin-bottom: 0;
}
body.cpt-single .section-pagetitle .section-heading > * {
width: 100%;
}
body.cpt-single .section-pagetitle .section-heading .post-badge {
height: 32px;
margin-bottom: calc(var(--spacing-v) * 1.25);
position: relative;
}
body.cpt-single .section-pagetitle .section-heading .post-badge img {
height: 100%;
}
body.cpt-single .section-pagetitle .section-heading .title {
margin-bottom: calc(var(--padding) * 2);
}
body.cpt-single #breadcrumbs {
margin-bottom: var(--spacing-v);
}   @media (max-width: 53.0625em) {
body.cpt-single .section-pagetitle .section-heading .title {
margin-bottom: calc(var(--padding) * 1.25);
}
} @media (max-width: 40em) {
body.cpt-single .section-pagetitle .section-heading .title {
margin-bottom: var(--padding);
}
} body.page-template-tpl-progetti section.section-list .title {
color: var(--body-color);
font-size: var(--bodysize);
font-family: var(--bodyfont);
font-weight: normal;
}
body.page-template-tpl-progetti section.section-list .list-post .single-list:hover .list-title {
padding-left: 0;
}  body.page-template-tpl-progetti-image section.hoverlist-fullscreen {
min-height: unset;
height: 100vh !important;
align-items: unset;
overflow: hidden;
position: relative;
z-index: 1;
}
body.page-template-tpl-progetti-image section.hoverlist-fullscreen:not(.is-hovered) .hoverlist-list .link-title {
color: var(--body-color);
opacity: 1;
}
body.page-template-tpl-progetti-image section.section-hoverlist.hoverlist-fullscreen:not(.is-hovered) .hoverlist-list .title {
color: var(--body-color);
}
body.page-template-tpl-progetti-image section.hoverlist-fullscreen.is-hovered .hoverlist-list .link-title,
body.page-template-tpl-progetti-image section.section-hoverlist.hoverlist-fullscreen.is-hovered .hoverlist-list .title { color: var(--dark-color);
}
body.page-template-tpl-progetti-image section.hoverlist-fullscreen .hoverlist-list .single-link a .link-mark::before {
filter: var(--filter-to-dark);
}
body.page-template-tpl-progetti-image section.hoverlist-fullscreen .hoverlist-img .single-img .link-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}  @media (min-width: 75em) {
body.single-progetti main {
position: relative;
display: flex;
flex-wrap: nowrap;
}
body.single-progetti main > section {
min-width: 100vw;
max-width: 100vw;
height: 100vh;
}
} body.single-progetti #main-header {
transition: var(--default-trans);
}
body.single-progetti .icon-close {
--unit: 36px;
position: fixed;
top: 25px;
right: 10px;
width: var(--unit);
height: var(--unit);
opacity: 0;
z-index: 60;
opacity: 0;
animation: fadeIn 0.8s 2s forwards;
transition: var(--default-trans);
cursor: pointer;
}
body.single-progetti .icon-close.is-fadeout {
scale: 0;
pointer-events: none;
}
body.single-progetti .icon-close a {
width: 100%;
height: 100%;
transition: var(--default-trans);
}
body.single-progetti .icon-close a:hover {
rotate: 90deg;
}
body.single-progetti .icon-close a::before {
content: '';
display: inline-block;
width: 100%;
height: 100%;
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/icon-close.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
filter: var(--filter-to-dark);
}
body.single-progetti main { --main-color: var(--light-color);
--alt-color: var(--dark-color);
--body-color: var(--dark-color);
--body-alt-color: var(--grey-color);
--bg-color: var(--bg-light);
--bg-alt-color: var(--bg-dark);
--cf7-field-bg: #E6E6E6;
--filter-to-main: var(--filter-to-light);
--filter-to-alt: var(--filter-to-dark);
}
body.single-progetti {
background-color: var(--light-color);
}
body.single-progetti section {
padding: calc(var(--padding) * 0.50) 0;
background-color: var(--light-color);
color: var(--dark-color);
}
body.single-progetti section p {
line-height: normal;
}
body.single-progetti section.project-bg::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--project-color-bg);
}
body.single-progetti section.project-bg + section:not(.project-bg)::before {
content: '';
width: calc(var(--container) * 0.70);
height: 100%;
position: absolute;
top: 0;
left: -3px;
background-color: var(--project-color-bg);
}
body.single-progetti .project-container {
padding: 0 calc(var(--container) * 0.50);
height: 100%;
display: flex;
align-items: center;
}
main > .project-intro {
padding-top: var(--header-height);
}
body.single-progetti section:not(.project-intro) h1.title,
body.single-progetti section:not(.project-intro) h2.title {
margin-bottom: var(--spacing-v);
} body.single-progetti .pin-spacer > main .section[section-index="1"] {
animation: none;
}
body.single-progetti {
animation: fadeIn 0.35s ease-out;
} body.single-progetti .scrollingtext-container {
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%) rotate(-90deg);
z-index: 60;
pointer-events: none;
}
body.single-progetti .scrollingtext-container .marquee {
color: var(--project-color);
font-family: var(--titlefont);
font-size: calc(var(--titlesize) * 1.25);
}
body.single-progetti .scrollingtext-container .marquee-loop span {
padding-right: var(--spacing-v);
} @media (max-width: 96em) {
body.single-progetti .scrollingtext-container .marquee {
font-size: calc(var(--titlesize) * 0.80);
}
} @media (max-width: 64em) {
body.single-progetti .scrollingtext-container {
transform: translateY(-50%) rotate(0deg);
}
body.single-progetti .scrollingtext-container .marquee {
font-size: calc(var(--titlesize) * 1);
}
} body.single-progetti main > section:last-of-type:not(.project-cards) .project-container {
padding-right: calc(var(--container) * 1.50);
}
body.single-progetti .scrollingtext-cat {
position: absolute;
top: 0;
right: var(--container);
transform: translateX(50%) rotate(-90deg);
z-index: 45;
pointer-events: none;
}
body.single-progetti .scrollingtext-cat .marquee {
color: var(--project-color-bg);
font-family: var(--titlefont);
font-size: calc(var(--titlesize) * 1);
}
body.single-progetti .scrollingtext-cat .marquee-loop span {
padding-right: var(--spacing-v);
} @media (max-width: 96em) {
body.single-progetti main > section:last-of-type:not(.project-cards) .project-container {
padding-right: calc(var(--container) * 3);
}
body.single-progetti .scrollingtext-cat {
right: calc(var(--container) * 2);
}
body.single-progetti .scrollingtext-cat .marquee {
font-size: calc(var(--titlesize) * 1);
}
} @media (max-width: 80em) {
body.single-progetti main > section:last-of-type:not(.project-cards) .project-container {
padding-right: calc(var(--container) * 4);
}
body.single-progetti .scrollingtext-cat {
right: calc(var(--container) * 2.75);
}
body.single-progetti .scrollingtext-cat .marquee {
font-size: calc(var(--titlesize) * 1.10);
}
} @media (max-width: 64em) {
body.single-progetti .scrollingtext-cat {
top: unset;
bottom: var(--spacing-v);
right: 0;
transform: translateX(50%) rotate(0deg);
}
body.single-progetti main > section.project-cards .scrollingtext-cat {
bottom: calc(var(--padding) * 1.50);
}
body.single-progetti .scrollingtext-cat .marquee {
font-size: calc(var(--titlesize) * 0.75);
}
} @media (max-width: 40em) {
body.single-progetti main > section:not(.project-cards) .scrollingtext-cat {
bottom: calc(var(--padding) * 1);
}
body.single-progetti .scrollingtext-cat .marquee {
font-size: calc(var(--titlesize) * 1.25);
}
} body.single-progetti .project-related-link {
position: absolute;
bottom: calc(var(--padding) * 0.50);
right: calc(var(--spacing-v) * 1.50);
transform: rotate(-90deg) translateX(100%) translateY(-50%);
transform-origin: right center;
z-index: 60;
}
body.single-progetti .project-related-link a {
font-size: calc(var(--bodysize) * 2);
color: var(--body-color);
font-family: var(--titlefont);
}
body.single-progetti .project-related-link a.link::after {
width: 0.5em;
height: 0.5em;
rotate: -45deg;
}
body.single-progetti .project-related-link a.link:hover::after {
transform: rotateY('-360deg');
} @media (max-width: 64em) {
body.single-progetti .project-related-link {
bottom: calc(var(--padding) * 1);
}
} section.project-intro .scroll-down {
justify-self: center;
position: absolute;
bottom: var(--padding);
opacity: 0;
animation: fadeIn 1s 1.5s ease;
animation-fill-mode: forwards;
}
section.project-intro .scroll-down::before {
content: '';
display: block;
width: 2px;
height: 0px;
border-radius: 999vw;
background: var(--alt-color);
position: absolute;
left: calc(50% - 1px);
bottom: -10px;
transform: translateY(100%);
opacity: 0.5;
transition: var(--default-trans);
animation: scroll-down 1.8s 1.5s infinite;
}
main > .section-intro:only-child > .scroll-down {
display: none;
}
@keyframes scroll-down {
0% {height:0px}
100% {height:50px}
} @media (max-width: 105em) {
body.single-progetti .project-cards .project-related-link {
right: calc(var(--spacing-v) * 1);
}
body.single-progetti .project-cards .project-related-link a {
font-size: calc(var(--bodysize) * 1.25);
}
} @media (max-width: 86.4275em) {
body.single-progetti .project-cards .project-related-link {
right: unset;
left: calc(var(--container) * 0.50);
transform: none;
}
} @media (max-width: 74.9375em) {
body.single-progetti section {
padding: var(--padding) 0;
}
body.single-progetti section.project-bg + section:not(.project-bg)::before {
display: none;
}
body.single-progetti .project-container {
padding: 0 var(--container);
}
} @media (max-width: 86.4275em) {
body.single-progetti .project-cards .project-related-link {
left: calc(var(--container) * 1);
}
} @media (max-width: 53.0625em) {
body.single-progetti .project-container {
height: unset;
align-items: unset;
}
} @media (max-width: 53.0625em) {
body.single-progetti .project-related-link {
position: relative;
bottom: unset;
left: unset;
transform: none;
right: unset;
padding: 0 var(--container);
margin-top: var(--padding);
}
body.single-progetti .project-cards .project-related-link {
left: unset;
}
body.single-progetti .project-related-link a,
body.single-progetti .project-cards .project-related-link a {
font-size: calc(var(--bodysize) * 1.25);
}
} .marquee div {
display: inline-block;
}
.marquee-loop {
white-space: nowrap;
animation: marquee-anim 120s linear infinite;
}
@keyframes marquee-anim {
0% {
margin-left: 0;
}
100% {
margin-left: -50%;
}
}  section.project-intro.media-backdrop .section-heading {
margin-bottom: 0;
}
section.project-intro.media-backdrop {
display: grid;
align-items: center;
min-height: 100vh;
position: relative;
background-color: var(--dark-color);
}
section.project-intro.media-backdrop > a ~ .container { pointer-events: none;
--body-color: var(--light-color);
--body-alt-color: #D9D9D9;
color: var(--light-color);
}
section.project-intro.media-backdrop > a ~ .container .hero-text .section-heading > div + a {
pointer-events: auto;
}
section.project-intro.media-backdrop > a {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.project-intro.media-backdrop video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; }
section.project-intro.media-backdrop img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
section.project-intro.media-backdrop .overlay {
display: none; position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #000000;
opacity: 0.2;
pointer-events: none;
}
section.project-intro.media-backdrop .hero-slider {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
section.project-intro.media-backdrop .hero-slider .single-hero-item {
position: relative;
width: 100vw;
height: 100vh;
}
section.project-intro.media-backdrop .hero-slider .single-hero-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: var(--default-trans);
}
section.project-intro.media-backdrop .intro-text h1 {
font-size: calc(var(--titlesize) * 0.80);
}
section.project-intro.media-backdrop .intro-text .text {
width: 40%;
}
section.project-intro.media-backdrop .intro-text .text p {
color: var(--body-alt-color);
}
section.project-intro.media-backdrop .intro-text .intro-highlights {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(var(--spacing-v) * 2);
margin-top: calc(var(--spacing-v) * 3);
}
section.project-intro.media-backdrop .intro-text .single-highlight {
height: 100%;
}
section.project-intro.media-backdrop .intro-text .single-highlight > div {
width: 100%;
}
section.project-intro.media-backdrop .intro-text .single-highlight > div + div {
margin-top: calc(var(--spacing-v) * 0.35);
}
section.project-intro.media-backdrop .intro-text .single-highlight .highlight-title {
color: var(--body-alt-color);
}
section.project-intro.media-backdrop .intro-text .single-highlight .highlight-text {
font-family: var(--titlefont);
} section.project-intro.media-beside {
padding: 0;
}
section.project-intro.media-beside .container {
height: 100%;
align-items: center;
}
section.project-intro.media-beside .container > div {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 50%;
height: 100%;
}
section.project-intro.media-beside .intro-text {
padding-top: var(--padding);
padding-bottom: var(--padding);
padding-left: calc(var(--container) * 0.50);
padding-right: calc(var(--container) * 0.50);
}
section.project-intro.media-beside .intro-text h1 {
font-size: calc(var(--titlesize) * 0.60);
}
section.project-intro.media-beside .intro-text .text {
margin-top: calc(var(--spacing-v) * 0.50);
}
section.project-intro.media-beside .intro-text .text p {
color: var(--body-alt-color);
}
section.project-intro.media-beside .intro-text .intro-highlights {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-v);
}
section.project-intro.media-beside .intro-text .single-highlight {
height: 100%;
}
section.project-intro.media-beside .intro-text .single-highlight > div {
width: 100%;
}
section.project-intro.media-beside .intro-text .single-highlight > div + div {
margin-top: calc(var(--spacing-v) * 0.35);
}
section.project-intro.media-beside .intro-text .single-highlight .highlight-title {
color: var(--body-alt-color);
}
section.project-intro.media-beside .intro-text .single-highlight .highlight-text {
font-family: var(--titlefont);
}
section.project-intro.media-beside .intro-media {
position: relative;
overflow: hidden;
}
section.project-intro.media-beside .intro-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
section.project-intro.media-beside .intro-media > a[data-fancybox="modal-video"] {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.project-intro.media-beside video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
filter: grayscale(1);
}
section.project-intro.media-beside .intro-slider {
width: 100%;
height: 100%;
}
section.project-intro.media-beside .intro-slider .single-intro-item {
position: relative;
width: 100%;
height: 100vh;
}
section.project-intro.media-beside .intro-slider .single-intro-item img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
transition: var(--default-trans);
} @media (max-width: 74.9375em) {
main > .project-intro {
padding-top: calc(var(--padding) * 1.50);
} section.project-intro.media-backdrop .intro-text .text {
width: 100%;
margin-top: calc(var(--spacing-v) * 0.50);
}
section.project-intro.media-backdrop .intro-text .intro-highlights {
grid-template-columns: repeat(2, 1fr);
} section.project-intro.media-beside {
padding: calc(var(--padding) * 1.5) 0 0;
}
section.project-intro.media-beside .container > div {
width: 100%;
height: 100%;
}
section.project-intro.media-beside .intro-text {
padding: 0 var(--container);
}
section.project-intro.media-beside .intro-media {
margin-top: calc(var(--spacing-v) * 2);
aspect-ratio: var(--ratio-hr);
}
section.project-intro.media-beside .intro-slider .single-intro-item {
position: relative;
width: 100%;
height: calc(100vw / (var(--ratio-hr)));
}
} @media (max-width: 64em) {
section.project-intro .scroll-down {
font-size: calc(var(--bodysize) * 1.1);
}
} @media (max-width: 40em) {
section.project-intro .scroll-down {
bottom: calc(var(--padding) * 1.5)
} section.project-intro.media-backdrop .intro-text .intro-highlights {
gap: var(--spacing-v);
} section.project-intro.media-beside .intro-media {
aspect-ratio: var(--ratio-sq);
}
section.project-intro.media-beside .intro-slider .single-intro-item {
height: calc(100vw / (var(--ratio-sq)));
}
} @media (max-width: 24em) {
main > .project-intro {
padding-top: calc(var(--padding) * 2);
} section.project-intro.media-backdrop .intro-text .intro-highlights {
grid-template-columns: repeat(1, 1fr);
} section.project-intro.media-beside .intro-text .intro-highlights {
grid-template-columns: repeat(1, 1fr);
}
} section.project-cards::before { display: none;
}
section.project-cards .container {
gap: calc(var(--spacing-v) * 4);
}
section.project-cards .cards-content {
width: 45%;
}
section.project-cards .cards-content p {
color: var(--body-alt-color);
}
section.project-cards .cards-list {
width: 30%;
display: grid;
gap: calc(var(--spacing-v) * 0.80);
}
section.project-cards .cards-list .single-card {
--icon-unit: 56px;
display: grid;
gap: 15px;
padding: 40px 20px;
background-color: var(--light-color);
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--default-trans);
}
section.project-cards .cards-list .single-card .card-icon {
width: auto;
height: var(--icon-unit);
}
section.project-cards .cards-list .single-card .card-icon > img {
width: auto;
height: 100%;
object-fit: contain;
}
section.project-cards .cards-list .single-card .card-title {
font-family: var(--titlefont);
font-size: calc(var(--bodysize) * 1.20);
}
section.project-cards .cards-list .single-card .card-text {
font-size: calc(var(--bodysize) * 0.90);
}
section.project-cards .cards-list .single-card .card-text p {
color: var(--body-alt-color);
} section.project-cards.is-arranged .cards-list {
width: 45%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: calc(var(--spacing-v) * 0.50);
}
section.project-cards.is-arranged .cards-list .single-card {
width: calc(50% - var(--spacing-v) * 0.25);
align-content: flex-start;
height: 100%;
}
section.project-cards.is-arranged .cards-list .single-card:nth-child(1),
section.project-cards.is-arranged .cards-list .single-card:nth-child(3) {
position: relative;
top: calc(var(--spacing-v) * 2);
} @media (max-width: 53.0625em) {
section.project-cards .container {
flex-wrap: wrap;
gap: calc(var(--spacing-v) * 2);
}
section.project-cards .cards-content,
section.project-cards .cards-list {
width: 100% !important;
}
section.project-cards .cards-content {
margin-bottom: 0;
}
section.project-cards .cards-list .single-card {
height: unset !important;
}
} @media (max-width: 30em) {
section.project-cards .cards-list .single-card {
width: 100% !important;
top: 0 !important;
}
} section.project-iconlist .iconlist-media {
width: 48%;
position: relative;
}
section.project-iconlist .iconlist-media img {
height: 100%;
width: 100%;
object-fit: contain;
}
section.project-iconlist .iconlist-content {
width: 49%;
}
section.project-iconlist .list-container {
display: grid;
gap: calc(var(--spacing-v) * 0.80);
}
section.project-iconlist .list-container .single-list {
--icon-unit: 48px;
display: flex;
flex-wrap: nowrap;
gap: 20px;
}
section.project-iconlist .list-container .single-list .list-icon {
min-width: var(--icon-unit);
height: var(--icon-unit);
overflow: hidden;
position: relative;
}
section.project-iconlist .list-container .single-list .list-icon > img {
width: var(--icon-unit);
height: var(--icon-unit);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
object-fit: contain;
}
section.project-iconlist .list-container .single-list .list-text {
margin-top: calc(var(--icon-unit) * 0.35);
}
section.project-iconlist .list-container .single-list .list-text p {
color: var(--body-alt-color);
} @media (max-width: 53.0625em) {
section.project-iconlist .iconlist-media,
section.project-iconlist .iconlist-content {
width: 100%;
}
section.project-iconlist .iconlist-content {
order: -1;
margin-bottom: calc(var(--spacing-v) * 2);
}
} section.project-media .media-medium {
width: 48%;
position: relative;
}
section.project-media .media-medium.is-hr {
aspect-ratio: var(--ratio-hr);
}
section.project-media .media-medium.is-sq {
aspect-ratio: var(--ratio-sq);
}
section.project-media .media-medium img {
height: 100%;
width: 100%;
object-fit: contain;
}
section.project-media .media-medium > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.project-media .media-medium > a[data-fancybox="modal-video"] {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
}
section.project-media .media-medium video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
}
section.project-media .media-content {
width: 49%;
}
section.project-media .media-content:only-child {
margin: 0 auto;
}
section.project-media .media-content p {
color: var(--body-alt-color);
} @media (max-width: 53.0625em) {
section.project-media.is-img .media-medium {
aspect-ratio: unset;
}
section.project-media.is-img .media-medium > a {
position: relative;
}
section.project-media .media-medium,
section.project-media .media-content {
width: 100%;
}
section.project-media .media-content {
order: -1;
margin-bottom: calc(var(--spacing-v) * 2);
}
body.single-progetti main > section.project-media:last-of-type .media-content {
order: 1;
margin-bottom: 0;
margin-top: calc(var(--spacing-v) * 2);
}
} section.project-mediafullscreen .mediafullscreen-medium {
width: 100%;
height: 100%;
position: relative;
}
section.project-mediafullscreen .mediafullscreen-medium img {
width: 100%;
height: 100%;
object-fit: contain;
}
section.project-mediafullscreen .mediafullscreen-medium > a[data-fancybox="modal-video"] {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.project-mediafullscreen video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
} @media (max-width: 74.9375em) {
section.project-bg + section.project-mediafullscreen.project-bg,
section.default-bg + section.project-mediafullscreen.default-bg {
padding-top: 0;
}
section.project-mediafullscreen .mediafullscreen-medium {
aspect-ratio: var(--ratio-hr);
}
} section.project-mediahalfscreen {
padding: 0 !important;
}
section.project-mediahalfscreen .container {
height: 100%;
align-items: center;
}
section.project-mediahalfscreen .container > div {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 50%;
height: 100%;
}
section.project-mediahalfscreen .mediahalfscreen-text {
padding-top: var(--padding);
padding-bottom: var(--padding);
padding-left: calc(var(--container) * 0.50);
padding-right: calc(var(--container) * 0.50);
}
section.project-mediahalfscreen .mediahalfscreen-text .text p {
color: var(--body-alt-color);
}
section.project-mediahalfscreen .mediahalfscreen-medium {
position: relative;
overflow: hidden;
}
section.project-mediahalfscreen .mediahalfscreen-medium img {
width: 100%;
height: 100%;
object-fit: cover;
}
section.project-mediahalfscreen .mediahalfscreen-medium > a[data-fancybox="modal-video"] {
cursor: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/play-stroked.png) 24 24, auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section.project-mediahalfscreen video {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
} @media (max-width: 74.9375em) {
section.project-mediahalfscreen {
padding-bottom: var(--padding);
}
section.project-mediahalfscreen .container > div {
width: 100%;
height: 100%;
}
section.project-mediahalfscreen .mediahalfscreen-text {
padding: 0 var(--container) var(--padding);
}
section.project-mediahalfscreen .mediahalfscreen-medium {
margin-bottom: var(--padding);
aspect-ratio: var(--ratio-hr);
}
} @media (max-width: 40em) {
section.project-mediahalfscreen .mediahalfscreen-medium {
aspect-ratio: var(--ratio-sq);
}
} section.default-bg + section.project-mediaoverflow.project-bg::after {
content: '';
width: calc(var(--container) * 0.75);
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--light-color);
}
section.project-bg + section.project-mediaoverflow.default-bg::after {
content: '';
width: calc(var(--container) * 0.75);
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: var(--project-color-bg);
}
section.project-mediaoverflow .overflow-medium {
max-width: calc(var(--container) * 2.5);
position: absolute;
top: 50%;
left: calc(-1 * var(--container) * 0.50);
transform: translateY(-50%);
z-index: 1;
}
section.project-mediaoverflow .overflow-medium > div {
position: relative;
width: 100%;
}
section.project-mediaoverflow .overflow-medium > div img {
height: 100%;
width: 100%;
object-fit: contain;
}
section.project-mediaoverflow .text-content {
width: 100%;
padding-left: calc(var(--container) * 1.75);
}
section.project-mediaoverflow .text p {
color: var(--body-alt-color);
}
section.project-mediaoverflow button {
margin-top: var(--spacing-v);
} @media (max-width: 74.9375em) {
section.project-mediaoverflow {
padding-top: 0 !important;
}
section.project-mediaoverflow::after {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: calc(var(--padding) * 2) !important;
}
section.project-mediaoverflow .overflow-medium {
max-width: calc(100% - var(--container) * 2);
height: calc(var(--padding) * 4);
position: relative;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
margin-bottom: calc(var(--spacing-v) * 2);
}
section.project-mediaoverflow .overflow-medium > div {
position: absolute;
width: 100%;
height: 100%;
}
section.project-mediaoverflow .text-content {
padding-left: 0;
}
} section.project-text .text-content {
width: 100%;
}
section.project-text .text p {
color: var(--body-alt-color);
}
section.project-text button {
margin-top: var(--spacing-v);
} @media (max-width: 74.9375em) {
section.project-text {
padding-top: 0;
}
} footer {
padding-top: var(--padding);
background: var(--main-color);
color: var(--alt-color);
font-size: calc(var(--bodysize) * 0.90);
position: relative;
z-index: 90;
}
footer > .container {
margin-bottom: calc(var(--padding) * 0.75);
}
footer > .container:last-of-type {
margin-bottom: 0;
padding-bottom: calc(var(--padding) * 0.35);
}
#footer-cta .call-to-action,
#footer-switch,
#footer-partners {
width: 12%;
}
footer .footer-title {
font-size: var(--bodysize);
margin-bottom: calc(var(--spacing-v) * 0.80);
}
footer p {
font-size: calc(var(--bodysize) * 0.90);
}
#footer-identity > div,
#footer-identity > div > div,
#footer-links .links > div,
#footer-partners > div {
margin-bottom: calc(var(--spacing-v) * 0.70);
line-height: 1em;
}
#footer-identity > div:last-of-type,
#footer-identity > div > div:last-of-type,
#footer-links .links > div:last-of-type,
#footer-partners > div:last-of-type {
margin-bottom: 0;
}
#footer-cta {
width: 100%;
align-items: center;
gap: calc(var(--padding) * 0.50);
}
#footer-cta .title {
font-family: var(--titlefont);
font-size: var(--titlesize);
line-height: 1em;
}
#footer-form {
width: 40%;
}
#footer-form .form-text > div {
margin-bottom: var(--spacing-v);
}
#footer-socials {
width: 30%;
}
#footer-socials > div:not(:last-of-type) {
margin-bottom: var(--spacing-v);
}
#footer-socials a {
margin: 0;
padding: 0;
font-size: var(--bodysize);
font-family: var(--titlefont);
font-weight: bold;
line-height: 1em;
letter-spacing: var(--titleletterspacing);
}
#footer-identity {
width: 40%;
}
#footer-identity .contacts-email,
#footer-identity .contacts-phone {
row-gap: calc(var(--spacing-v) * 0.70);
}
#footer-identity .contacts-email > div,
#footer-identity .contacts-phone > div {
margin-bottom: 0;
line-height: 1em;
}
#footer-identity .contacts-email > div:not(:first-of-type),
#footer-identity .contacts-phone > div:not(:first-of-type) {
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid var(--alt-color);
}
#footer-links {
width: 30%;
}
#footer-links .links-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
}  #footer-partners button:hover {
border-color: var(--light-color);
background-color: var(--light-color);
scale: var(--scale-down);
}
#footer-partners button .cta-mark::before {
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
filter: none;
}
#footer-partners button:hover .cta-mark {
border-color: var(--dark-color);
background-color: var(--light-color);
filter: none;
}   html.light-mode #footer-partners button .cta-mark::before {
background-image: url(//sinerbit.com/wp-content/themes/sinerbit/assets/images/arrow-45deg.svg);
filter: none;
}
html.light-mode #footer-partners button:hover .cta-mark {
border-color: var(--dark-color);
background-color: var(--light-color);
filter: none;
}
#absolute-footer {
align-items: center;
gap: calc(var(--spacing-v) * 0.70);
}
#footer-legals {
font-size: calc(var(--bodysize) * 0.80);
gap: calc(var(--spacing-v) * 0.70);
}
#footer-certifications {
gap: calc(var(--spacing-v) * 0.70);
}
#footer-declaration p {
font-size: calc(var(--bodysize) * 0.80);
opacity: 0.70;
}
#footer-declaration a {
border-bottom: 1px dotted var(--body-color);
}
#footer-declaration a::before {
content: '';
height: 1px;
width: 0;
position: absolute;
bottom: -1px;
left: 0;
background-color: var(--alt-color);
transition: var(--default-trans);
}
#footer-declaration a:hover::before {
width: 100%;
}
footer .footer-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
footer .footer-backdrop > * {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
overflow: hidden;
filter: grayscale(1);
opacity: 0.40;
}
html.light-mode footer .footer-backdrop > * {
opacity: 0.15;
} @media (max-width: 96em) {
#footer-cta .call-to-action,
#footer-switch,
#footer-partners {
width: 15%;
}
} @media (max-width: 80em) {
#footer-cta .call-to-action,
#footer-switch,
#footer-partners {
width: 20%;
}
} @media (max-width: 75em) {
#footer-certifications {
order: 1;
}
} @media (max-width: 64em) {
footer > .container {
margin-bottom: var(--padding);
}
#footer-legals {
width: 100%;
}
} @media (max-width: 53.0625em) {
#footer-cta .call-to-action {
width: unset;
}
#footer-form,
#footer-identity {
width: 55%;
}
#footer-switch {
width: 10%;
}
#footer-links {
width: 42.5%;
}
#footer-partners {
width: 100%;
margin-top: calc(var(--padding) * 0.50);
}
} @media (max-width: 40em) {
footer > .container {
margin-bottom: calc(var(--padding) * 0.70);
row-gap: calc(var(--padding) * 0.45);
}
#footer-cta > div {
width: 100%;
}
#footer-form,
#footer-identity {
width: 100%;
}
#footer-socials {
width: 60%;
}
#footer-switch {
width: 30%;
text-align: right;
}
#footer-links {
width: 60%;
}
#footer-partners {
width: 30%;
margin-top: 0;
gap: calc(var(--padding) * 0.45);
}
#absolute-footer {
gap: var(--spacing-v);
}
#footer-legals {
gap: calc(var(--spacing-v) * 0.50);
}
} @media (max-width: 30em) {
#footer-socials {
width: 75%;
}
#footer-switch {
width: 20%;
}
#footer-links,
#footer-partners {
width: 100%;
}  
#footer-links .links-container {
justify-content: space-between;
gap: 0;
}
#footer-links .links-container .links {
width: 45%;
}
#footer-partners > div {
display: flex;
}
} @media (max-width: 24em) {
footer > .container {
margin-bottom: var(--padding);
row-gap: var(--padding);
}
footer > .container:last-of-type {
padding-bottom: calc(var(--padding) * 0.50);
}
#footer-cta {
gap: var(--spacing-v);
}
#footer-socials {
width: 60%;
}
#footer-switch {
width: 35%;
}
#footer-identity .contacts-email > div:not(:first-of-type),
#footer-identity .contacts-phone > div:not(:first-of-type) {
margin-left: 12px;
padding-left: 12px;
}
#footer-links .links-container .links {
width: 48%;
}
#absolute-footer {
margin-top: calc(var(--padding) * 1.75);
}
#footer-certifications {
scale: 0.80;
transform-origin: left;
}
} footer[data-layout="2"] #footer-cta {
--gap-unit: calc(var(--padding) * 0.30);
gap: var(--gap-unit);
}
footer[data-layout="2"] #footer-cta .title {
width: 100%;
}
footer[data-layout="2"] #footer-cta .call-to-action,
footer[data-layout="2"] #footer-socials {
width: unset;
}
footer[data-layout="2"] #footer-socials {
display: flex;
flex-wrap: wrap;
gap: var(--gap-unit);
}
footer[data-layout="2"] #footer-socials > div:not(:last-of-type) {
margin: 0;
}
footer[data-layout="2"] #footer-partners {
width: 18%;
}
footer[data-layout="2"] #footer-switch {
width: unset;
text-align: unset;
} @media (max-width: 80em) {
footer[data-layout="2"] #footer-switch {
width: 100%;
order: 1;
}
} @media (max-width: 64em) {
footer[data-layout="2"] #footer-partners {
width: unset;
}
} @media (max-width: 40em) {
footer[data-layout="2"] #footer-socials {
width: 100%;
margin-top: var(--gap-unit);
}
} @media (max-width: 30em) {
footer[data-layout="2"] #footer-partners {
width: 100%;
}
} @media (max-width: 24em) {
footer[data-layout="2"] #footer-socials {
display: grid;
gap: var(--gap-unit);
}
}
 @-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 (print), (prefers-reduced-motion: reduce) {
.animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
}[data-class="wpcf7cf_group"], .wpcf7cf_remove, .wpcf7cf_add {
display:none;
}
.wpcf7cf_repeater_sub {
margin-bottom: 20px;
}
.wpcf7cf_repeater_controls, .wpcf7cf_step_controls {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 20px;
}
.wpcf7cf_multistep .wpcf7cf_step { width: 100%;
}
.wpcf7cf_multistep .wpcf7cf_step .step-title {
display: none;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots {
display: flex;
width: 100%;
margin-bottom: 20px;
flex-wrap: wrap;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot .step-index {
display: inline-block;
border-radius: 50%;
background: #dfdfdf;
color: #000000;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot {
border-bottom: 5px solid #dfdfdf;
text-align: center;
flex: 1;
padding: 15px;
min-width: 120px;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed {
border-bottom: 5px solid #333;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active {
border-bottom: 5px solid #333;
font-weight: bold;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.completed .step-index {
background-color: #333;
color: #ffffff;
}
.wpcf7cf_multistep .wpcf7cf_steps-dots .dot.active .step-index {
background-color: #333;
color: #ffffff;
}
.wpcf7cf_step_controls .disabled {
pointer-events: none;
cursor: default;
opacity: .5;
}