Your IP : 216.73.216.95
.tm-swiper {
position: relative;
z-index: 1;
&:hover {
.swiper-nav-button {
@extend %NormalTransition;
opacity: 1;
visibility: visible;
}
}
.swiper-inner {
position: relative;
}
.swiper-container {
width: 100%;
}
.swiper-slide {
box-sizing: border-box;
text-align: left;
overflow: visible;
}
// Content Alignment.
&.v-stretch {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
height: auto;
> div {
height: 100%;
}
}
}
}
}
}
&.v-top {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
display: flex;
align-self: start;
}
}
}
}
}
&.v-middle {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
display: flex;
align-self: center;
}
}
}
}
}
&.v-bottom {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
display: flex;
align-self: flex-end;
}
}
}
}
}
&.h-left {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
display: flex;
justify-content: flex-start;
}
}
}
}
}
&.h-center {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
display: flex;
justify-content: center;
}
}
}
}
}
&.h-right {
> .swiper-inner {
> .swiper-container {
> .swiper-wrapper {
> .swiper-slide {
display: flex;
justify-content: flex-end;
}
}
}
}
}
// Smooth Transition.
&[data-autoplay='1'] {
.swiper-wrapper {
transition-timing-function: linear !important;
}
}
// Bullets.
&.highlight-centered-items {
.swiper-slide {
transition: opacity .25s linear;
&:not(.swiper-slide-active) {
opacity: .4;
}
}
}
&:not(.bullets-v-align-below) {
.swiper-pagination-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
}
}
.swiper-pagination-container {
.container,
.row,
.col-md-12 {
height: 100%;
}
}
.swiper-pagination-wrap {
height: 100%;
display: flex;
align-items: flex-end;
justify-content: center;
}
.swiper-pagination-inner {
pointer-events: auto;
}
.swiper-pagination {
position: relative;
user-select: none;
outline: none;
width: auto;
&.swiper-pagination-progressbar {
width: 100%;
height: 3px;
left: 0;
top: 0;
background: #bbb;
}
&.swiper-pagination-custom {
top: auto;
left: auto;
bottom: auto;
right: auto;
}
}
&.bullets-v-align-below {
.swiper-pagination-wrap {
position: static;
margin-top: 44px;
}
}
.swiper-pagination-bullet {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
margin: 0 5px;
width: 20px;
height: 20px;
border: 0;
border-radius: 0;
background: transparent;
opacity: 1;
position: relative;
outline: none;
color: #d8d8d8;
&:hover,
&.swiper-pagination-bullet-active {
color: #111;
&:before {
width: 12px;
height: 12px;
}
}
&.swiper-pagination-bullet-active {
cursor: default;
}
&:before {
@extend %NormalTransition;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 100%;
width: 8px;
height: 8px;
background: currentColor;
z-index: 1;
}
&:only-child {
visibility: hidden;
}
}
.fraction {
display: inline-block;
}
&.bullets-vertical {
.swiper-pagination-bullet {
display: block;
margin: 0;
+ .swiper-pagination-bullet {
margin-top: 10px;
}
}
}
&.pagination-style-02 {
.swiper-pagination-bullet {
width: 22px;
margin: 0 4px;
&:before {
border-radius: 0;
width: 22px;
height: 4px;
}
}
}
&.pagination-style-03 {
.fraction {
font-size: 18px;
font-weight: 500;
letter-spacing: 0.75px;
color: #111;
* {
display: inline-block;
vertical-align: middle;
}
.separator {
width: 60px;
height: 1px;
background: currentColor;
margin-left: 15px;
margin-right: 15px;
}
.current {
font-size: 30px;
letter-spacing: 1.25px;
}
}
}
&.pagination-style-04 {
.swiper-pagination-inner {
width: 94px;
height: 94px;
line-height: 94px;
border-radius: 50%;
background: #fff;
box-shadow: 0 20px 50px rgba(0, 0, 0, .05);
}
.fraction {
font-size: 17px;
font-weight: 500;
color: #111;
letter-spacing: 1.31px;
div {
display: inline-block;
}
}
.swiper-pagination-inner {
position: relative;
}
.swiper-alt-arrow-button {
position: absolute;
width: 21px;
height: 21px;
left: 50%;
top: 50%;
z-index: 12;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.swiper-alt-arrow-prev {
transform: translate(-10px, -35px);
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAJZJREFUGBltjUEKwyAURNVCs4klTREUWnsAz5P75LRZZCMFCVoj1lkk2LSz8H/nzfAJOWgYhpNS6ol5QOTHsNZq7/1lmqbGOfeqC19hKaUIIdwQWNe16boul8KyFfawEKKNMT42gJlSajnnS9Ebf4bHGHMuQGM/Cj44fDaOI5vnWeec9yt1AT44crTv+3sxrnXg304ptR/PET/We1JFoAAAAABJRU5ErkJggg==");
}
.swiper-alt-arrow-next {
transform: translate(-10px, 15px);
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAKBJREFUGBmFjb0KwyAUhWsaqoUMUcgQ6FLo5iv4TL6tW6FLiWKGhiIWgmK9BUNxaO9y7s93zkWMsVNKie7+FELo0Ugpp7ZtX79YuAOHAOKcH7TWl/xhX5tyYhzH8aqUWj8wAMMwdCGEcw3n1Ns8zw72W5L3fu37PsUYu2LAGBtr7VLmDYaFc85TSo/5AyaEPI0xUwFBm+8BeiHEHUDQ+vYGfjU7ajWU+XYAAAAASUVORK5CYII=");
}
&.bullets-horizontal {
.swiper-alt-arrow-prev {
transform: translate(-40px, -11px) rotate(-90deg);
}
.swiper-alt-arrow-next {
transform: translate(20px, -11px) rotate(-90deg);
}
}
}
&.pagination-style-05 {
.swiper-pagination-bullet {
width: 32px;
height: 32px;
margin: 0 4px;
color: #333;
&:before {
width: 6px;
height: 6px;
}
&:after {
@extend %NormalTransition;
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
opacity: 0;
border: 1px solid transparent;
border-radius: 50%;
}
&:hover,
&.swiper-pagination-bullet-active {
&:after {
opacity: 1;
border-color: currentColor;
}
}
&.swiper-pagination-bullet-active {
&:after {
opacity: .5;
width: 100%;
height: 100%;
}
}
}
}
&.pagination-style-06 {
.fraction {
font-size: 24px;
font-weight: 600;
letter-spacing: 3.2px;
color: #111;
* {
display: inline-block;
vertical-align: top;
}
.current {
font-size: 60px;
line-height: 1;
}
}
}
// Arrows.
.swiper-nav-buttons-wrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
.container,
.row,
.col-md-12 {
height: 100%;
}
}
.swiper-nav-buttons {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.swiper-nav-button {
transition: all .25s cubic-bezier(.645, .045, .355, 1), visibility .25s linear 2s, opacity .25s linear 2s;
background-image: none;
text-align: center;
user-select: none;
outline: none;
width: 48px;
height: 48px;
font-size: 18px;
color: #111;
border: 1px solid #ddd;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, .01);
opacity: 0;
visibility: hidden;
transform: none;
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
margin: 10px;
pointer-events: auto;
&.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
&:hover {
border-color: #111;
background: #111;
color: #fff;
}
i {
@extend %FontAwesomeRegular;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// Disable default arrows.
&:after {
display: none;
}
}
&.nav-show-always {
.swiper-nav-button {
opacity: 1;
visibility: visible;
}
}
.swiper-button-prev {
i {
&:before {
content: '\f104';
}
}
}
.swiper-button-next {
i {
&:before {
content: '\f105';
}
}
}
.nav-button-text {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
&.nav-style-02 {
.swiper-nav-button {
border-top-width: 0 !important;
border-bottom-width: 0 !important;
height: 100px;
width: 100px;
border-radius: 0;
}
.nav-button-text {
display: block;
}
.nav-button-icon {
display: none;
}
.swiper-button-prev {
border-left: 0 !important;
border-right: 1px solid #fff;
}
.swiper-button-next {
border-right: 0 !important;
border-left: 1px solid #fff;
}
}
&.nav-style-03 {
.swiper-nav-button {
i {
font-weight: 300 !important;
}
}
}
}
// Custom nav
.maxcoach-slider-buttons {
--button-gutter: 20px;
.button-wrap {
display: flex;
align-items: center;
margin-right: calc(var(--button-gutter) / -2);
margin-left: calc(var(--button-gutter) / -2);
}
.slider-btn {
transition: all .25s cubic-bezier(.645, .045, .355, 1), visibility .25s linear 1s, opacity .25s linear 1s;
width: var(--button-size, 80px);
height: var(--button-size, 80px);
font-size: var(--button-icon-size, 30px);
color: var(--button-color, #000);
background-color: var(--button-background, transparent);
background-image: none;
border-radius: 50%;
transform: none;
position: relative;
border: 1px solid var(--button-border, rgba(0, 0, 0, 0.19));
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 calc(var(--button-gutter) / 2);
&:hover {
--button-color: #fff;
--button-background: #000;
--button-border: #000;
}
}
.icon {
font-size: inherit;
color: inherit;
transition: none;
&.reverse {
transform: rotate(180deg);
}
}
}
@media (max-width: 766px) {
.tm-swiper {
&[data-sm-items='auto'] {
.swiper-slide {
width: auto !important;
img {
width: auto;
}
}
}
}
}
@media (min-width: 767px) {
.tm-swiper {
&[data-md-items='auto'] {
.swiper-slide {
width: auto !important;
img {
width: auto;
}
}
}
}
}
@media (min-width: 1024px) {
.tm-swiper {
&[data-lg-items='auto'] {
.swiper-slide {
width: auto !important;
img {
width: auto;
}
}
}
}
}