.wp-block-vagabond-plus-tabs-sidebar {
display: flex;
width: 100%;
max-width: 100% !important;
}
.wp-block.wp-block-vagabond-plus-tabs-sidebar {
display: block;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header {
display: flex;
gap: 1rem;
flex-direction: column;
align-items: flex-start;
border-right: 1px solid;
flex: 1;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div {
cursor: pointer;
white-space: nowrap;
font-size: 1.375rem;
width: 100%;
margin-right: 4rem;
position: relative;
padding-bottom: 8px;
opacity: 0.8;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div::before {
border-bottom: 1px solid var(--wp--preset--color--va-black);
position: absolute;
content: '';
width: 100%;
display: block;
bottom: 0;
opacity: 0.2;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div.active::before,
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div:hover::before,
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div:hover::after,
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div:hover,
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div.active {
opacity: 1;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div::after {
position: absolute;
content: '\003E';
bottom: 10px;
transform: scaleY(2);
opacity: 0.4;
margin-left: 10px;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div.active::after {
right: 5px;
opacity: 0.8;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header button.active {
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-sidebar .wp-block-vagabond-plus-tab {
display: none;
}
.wp-block-vagabond-plus-tabs-sidebar .wp-block-vagabond-plus-tab.show {
display: flex;
}
.wp-block-vagabond-plus-tabs-sidebar .wp-block-vagabond-plus-tab.show a {
pointer-events: all;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tab
> .wp-block-vagabond-plus-surflevel-card-gutenberg {
width: 25%;
flex: none;
}
@media only screen and (max-width: 1600px) { }
@media only screen and (max-width: 1250px) {
.wp-block-vagabond-plus-tabs-sidebar {
max-width: 460px !important;
}
.wp-block-vagabond-plus-tabs-sidebar .wp-block-vagabond-plus-tab {
gap: 0;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent; box-shadow: none;
}
.wp-block-vagabond-plus-tabs-sidebar .wp-block-vagabond-plus-tabs-smooth {
padding-left: 15px;
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-sidebar > .tabs-header {
margin-bottom: 0 !important;
gap: 0;
margin-right: 35px;
}
.wp-block-vagabond-plus-tabs-sidebar > .tabs-header div {
padding: 5px 0 5px 10px;
flex-grow: 1;
transform: translateY(2px);
position: relative;
z-index: 1;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.wp-block-vagabond-plus-tabs-sidebar
> .tabs-header
div::-webkit-focus-inner {
border: 0;
padding: 0;
}
.wp-block-vagabond-plus-tabs-sidebar > .tabs-header div.active {
border: 1px solid var(--wp--preset--color--va-black);
border-bottom-color: white;
border-bottom-width: 2px;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header {
flex-direction: row; margin-bottom: 0.5rem;
border-right: none;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-header {
margin-bottom: 0;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div {
margin-right: 0;
font-size: 1rem;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div::after,
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div::before {
display: none;
}
.wp-block-vagabond-plus-tabs-sidebar > .tabs-header div:first-child::before {
position: relative;
content: '';
display: inline-block !important;
border-bottom: none;
width: 5px;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-header {
padding-bottom: 15px;
gap: 20px;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent; box-shadow: none;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-header
button {
padding: 10px 0 2px;
border: none;
opacity: 0.7;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-header
button.active {
border: none;
border-bottom: 1px solid var(--wp--preset--color--va-black);
opacity: 1;
}
.wp-block-vagabond-plus-tabs-sidebar .tabs-header div.active::after {
right: auto;
}
.wp-block-vagabond-plus-tabs-sidebar {
flex-direction: column;
}
.wp-block-vagabond-plus-tabs-sidebar .wp-block-vagabond-plus-tabs-smooth {
pointer-events: all;
position: relative;
padding-top: 0.5rem;
margin-bottom: 1rem;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-content {
width: calc(var(--n) * 86% - 20px);
gap: 20px;
transform: translate(
calc(var(--tx, 0px) + var(--i, 0) / var(--n) * (-100% - 20px))
);
align-items: stretch;
border: none;
outline: none;
-webkit-tap-highlight-color: transparent; box-shadow: none;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tab
.wp-block-vagabond-plus-surflevel-card-gutenberg { padding: 1rem !important;
overflow: hidden;
border-left-width: 20px;
flex-grow: 1;
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-surflevel-card-gutenberg .level-container,
.wp-block-vagabond-plus-surflevel-card-gutenberg .levels-container {
min-height: auto;
padding-bottom: 3rem;
} .wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-container
.prev-btn { }
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-container
.next-btn {
width: calc(20% + 10px);
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-container::after {
right: calc(10% + 15px);
color: var(--wp--preset--color--va-black);
opacity: 0.6;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-container::before {
left: 0;
z-index: 1;
color: var(--wp--preset--color--va-black);
opacity: 0.6;
}
.wp-block-vagabond-plus-tabs-smooth.hide-prev-arrow .tabs-container::before,
.wp-block-vagabond-plus-tabs-smooth.hide-prev-arrow
.tabs-container
.prev-btn {
display: none;
}
.wp-block-vagabond-plus-tabs-smooth.hide-next-arrow .tabs-container::after,
.wp-block-vagabond-plus-tabs-smooth.hide-next-arrow
.tabs-container
.next-btn {
display: none;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.indicators {
margin: 0 auto;
padding: 15px 0;
}
.wp-block-vagabond-plus-tabs-sidebar
.wp-block-vagabond-plus-tabs-smooth
.tabs-header
button {
font-size: 0.8rem;
} .wp-block-vagabond-plus-tabs-sidebar.dark
.wp-block-vagabond-plus-tabs-smooth {
background-color: var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-sidebar.dark
.wp-block-vagabond-plus-tabs-smooth
.tabs-container::after {
color: white;
opacity: 0.6;
}
.wp-block-vagabond-plus-tabs-sidebar.dark
.wp-block-vagabond-plus-tabs-smooth
.tabs-container::before {
color: white;
opacity: 0.6;
}
.wp-block-vagabond-plus-tabs-sidebar.dark
.wp-block-vagabond-plus-tab
.wp-block-vagabond-plus-surflevel-card-gutenberg {
background: white;
}
.wp-block-vagabond-plus-tabs-sidebar.dark
.wp-block-vagabond-plus-tabs-smooth
.indicators
div {
border: 1px solid white;
}
.wp-block-vagabond-plus-tabs-sidebar.dark
.wp-block-vagabond-plus-tabs-smooth
.indicators
div.active {
background-color: white;
}
}.wp-block-vagabond-plus-tabs-smooth { overflow: hidden;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth {
display: block;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition {
display: flex;
flex-direction: row-reverse;
border-bottom: 1px solid;
padding-top: 3rem;
} .wp-block-vagabond-plus-tabs-smooth .tabs-header {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-header img {
cursor: pointer;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header .image-div {
flex: 1;
transition:
flex 0.3s ease,
transform 0.3s ease;
cursor: pointer;
overflow: hidden;
position: relative;
aspect-ratio: 1 / 1;
flex: 1 0 21%;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div
img {
width: 100%;
height: 75%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.3s ease;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div.active {  transform: scale(1.15);
flex: 75.1; }
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div.shrink {   transform: scale(0.75);
flex: 23.75; }
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header { display: flex;
justify-content: center;
align-items: stretch; gap: 14px;
flex-grow: 1;
flex-basis: 0;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-container {
flex-grow: 1;
flex-basis: 0;
overflow: hidden;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-header button {
cursor: pointer;
padding: 0.5em 1rem;
border: none;
background: white;
transition: background 0.3s ease;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-header button.active {
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-smooth .tabs-content {
--n: 3; display: flex;
align-items: flex-start;
overflow-y: hidden;
width: 100%;
width: calc(var(--n) * 100%);  transform: translate(calc(var(--tx, 0px) + var(--i, 0) / var(--n) * -100%));
cursor: pointer;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content,
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-content,
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header .image-div,
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header img {
cursor: pointer;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-content:active {
cursor: grabbing;
cursor: grabbing;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content {
flex-direction: column;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-content > div {
width: 100%;
width: calc(100% / var(--n)); -webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 0 30px; }
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content.smooth {
transition: transform calc(var(--f, 1) * 0.5s) ease-out;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-content.smooth {
transform: none;
}
.wp-block.wp-block-vagabond-plus-tabs-smooth .tabs-content > div {
pointer-events: all;
}
.wp-block-vagabond-plus-tabs-smooth .indicators {
display: flex;
gap: 1rem;
text-align: center;
font-size: 1.5rem;
justify-items: center;
position: relative;
width: -moz-fit-content;
width: fit-content;
margin-top: 1rem;
padding-left: 30px;
} .wp-block-vagabond-plus-tabs-smooth .tabs-container::before,
.wp-block-vagabond-plus-tabs-smooth .tabs-container::after {
position: absolute;
top: 50%;
font-size: 24px;
color: #333; transform: translateY(-50%) scaleY(2);
opacity: 0.4;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container.hide-indicators::before,
.wp-block-vagabond-plus-tabs-smooth .tabs-container.hide-indicators::after {
display: none;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .prev-btn,
.wp-block-vagabond-plus-tabs-smooth .tabs-container .next-btn {
position: absolute;
width: 30px;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .prev-btn {
transform: translateX(-30px);
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .next-btn {
right: 0;
transform: translateX(10px);
} .wp-block-vagabond-plus-tabs-smooth .tabs-container::before {
content: '\003C';
left: -1rem;
} .wp-block-vagabond-plus-tabs-smooth .tabs-container::after {
right: 0px;
content: '\003E';
}
.wp-block-vagabond-plus-tabs-smooth .indicators div {
cursor: pointer; transition: all 0.3s ease;
width: 15px;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid var(--wp--preset--color--va-black);
}
.wp-block-vagabond-plus-tabs-smooth .indicators div.active {
background-color: var(--wp--preset--color--va-blue);
}
.wp-block-vagabond-plus-tabs-smooth .indicators div:hover {
opacity: 0.6;
}
@media only screen and (max-width: 1250px) {
.wp-block-vagabond-plus-tabs-smooth.instant-transition {
display: flex;
flex-direction: column;
border-bottom: none;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-header {
height: 20vw;
min-height: 20vw;
margin-bottom: 3rem;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition .tabs-container {
flex-basis: auto;
}
.wp-block-vagabond-plus-tabs-smooth.instant-transition
.tabs-header
.image-div
img {
height: 100%;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container::before {
left: 0;
}
.wp-block-vagabond-plus-tabs-smooth .tabs-container .prev-btn {
transform: none;
}
.wp-block-vagabond-plus-tabs-smooth .indicators {
margin-top: 10px;
}
.wp-block-vagabond-plus-tabs-smooth .indicators div {
width: 7px;
}
}.sticker {
position: absolute;
} .sticker.top-left {
top: 0;
left: 0;
}
.sticker.top-right {
top: 0;
right: 0;
}
.sticker.bottom-right {
bottom: 0;
right: 0;
}
.sticker.bottom-left {
bottom: 0;
left: 0;
}  @keyframes rotate {
0% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
} @keyframes flipAnimation {
0%,
45% {
transform: rotateY(0deg);
}
55%,
100% {
transform: rotateY(180deg);
}
} .sticker.rotate-animation .sticker-inner {
animation: rotate 3s infinite ease-in-out;
transform-origin: center;
will-change: transform;
} .sticker-flip-container {
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
} .sticker.rotate-animation .sticker-flip-container.flip-animation {
animation: flipAnimation 20s infinite;
} .sticker-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
} .sticker-face {
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
width: 100%;
height: 100%;
} .sticker-face.sticker-back {
transform: rotateY(180deg);
} .sticker img {
width: 100%;
height: auto;
display: block;
}
@media only screen and (max-width: 782px) { .sticker.top-left,
.sticker.top-right,
.sticker.bottom-right,
.sticker.bottom-left {
right: auto;
top: 0;
left: 0;
bottom: auto;
transform: translate(-3.75vw, -3.75vw) !important;
}
.sticker .sticker-inner {
width: 9.5vw !important;
}
}
@media only screen and (max-width: 500px) {
.sticker.top-left,
.sticker.top-right,
.sticker.bottom-right,
.sticker.bottom-left {
right: 0;
top: 0;
left: auto;
bottom: auto;
transform: translate(4vw, -3.75vw) !important;
}
.sticker .sticker-inner {
width: 23vw !important;
}
}
@media only screen and (max-width: 330px) {
.sticker.top-left,
.sticker.top-right,
.sticker.bottom-right,
.sticker.bottom-left {
right: 0;
top: 0;
left: auto;
bottom: auto;
transform: translate(0vw, 0vw) !important;
}
.sticker .sticker-inner {
width: 20vw !important;
}
}