@sncf/bootstrap-sncf.communication
Version:
SNCF frontend framework
1,992 lines (1,692 loc) • 468 kB
CSS
@charset "UTF-8";
/* functions
========================================================================== */
/* imports
========================================================================== */
.text-xs {
font-size: 0.75rem;
line-height: 1.5; }
.text-sm {
font-size: 0.875rem;
line-height: 1.5; }
.text-base {
font-size: 1rem;
line-height: 1.375; }
.text-lg {
font-size: 1.125rem;
line-height: 1.5; }
@media (min-width: 576px) {
.text-sm-xs {
font-size: 0.75rem;
line-height: 1.5; }
.text-sm-sm {
font-size: 0.875rem;
line-height: 1.5; }
.text-sm-base {
font-size: 1rem;
line-height: 1.375; }
.text-sm-lg {
font-size: 1.125rem;
line-height: 1.5; } }
@media (min-width: 768px) {
.text-md-xs {
font-size: 0.75rem;
line-height: 1.5; }
.text-md-sm {
font-size: 0.875rem;
line-height: 1.5; }
.text-md-base {
font-size: 1rem;
line-height: 1.375; }
.text-md-lg {
font-size: 1.125rem;
line-height: 1.5; } }
@media (min-width: 1024px) {
.text-lg-xs {
font-size: 0.75rem;
line-height: 1.5; }
.text-lg-sm {
font-size: 0.875rem;
line-height: 1.5; }
.text-lg-base {
font-size: 1rem;
line-height: 1.375; }
.text-lg-lg {
font-size: 1.125rem;
line-height: 1.5; } }
@media (min-width: 1280px) {
.text-xl-xs {
font-size: 0.75rem;
line-height: 1.5; }
.text-xl-sm {
font-size: 0.875rem;
line-height: 1.5; }
.text-xl-base {
font-size: 1rem;
line-height: 1.375; }
.text-xl-lg {
font-size: 1.125rem;
line-height: 1.5; } }
/**
* Maintain ratio mixin. Great for responsive grids, or videos.
* https://gist.github.com/brianmcallister/2932463
*
* $ratio - Ratio the element needs to maintain.
*
* Examples
*
* A 16:9 ratio would look like this:
* .element {
* @include maintain-ratio(16 9);
* }
*/
/* colors
========================================================================== */
.text-grays100 {
color: #f2f2f2 !important; }
a.text-grays100:hover, a.text-grays100:focus {
color: #cccccc !important; }
.text-grays200 {
color: #d7d7d7 !important; }
a.text-grays200:hover, a.text-grays200:focus {
color: #b1b1b1 !important; }
.text-grays300 {
color: #b9b9b9 !important; }
a.text-grays300:hover, a.text-grays300:focus {
color: #939393 !important; }
.text-grays400 {
color: #747678 !important; }
a.text-grays400:hover, a.text-grays400:focus {
color: #4e5051 !important; }
.text-grays500 {
color: #4d4f53 !important; }
a.text-grays500:hover, a.text-grays500:focus {
color: #28292b !important; }
.text-grays600 {
color: #333 !important; }
a.text-grays600:hover, a.text-grays600:focus {
color: #0d0d0d !important; }
.text-grays700 {
color: #495057 !important; }
a.text-grays700:hover, a.text-grays700:focus {
color: #262a2d !important; }
.text-grays800 {
color: #343a40 !important; }
a.text-grays800:hover, a.text-grays800:focus {
color: #121416 !important; }
.text-grays900 {
color: #212529 !important; }
a.text-grays900:hover, a.text-grays900:focus {
color: black !important; }
.flatpickr-calendar {
background: transparent;
opacity: 0;
display: none;
text-align: center;
visibility: hidden;
padding: 0;
-webkit-animation: none;
animation: none;
direction: ltr;
border: 0;
font-size: 14px;
line-height: 24px;
border-radius: 5px;
position: absolute;
width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-ms-touch-action: manipulation;
touch-action: manipulation;
background: #fff;
-webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); }
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
opacity: 1;
max-height: 640px;
visibility: visible; }
.flatpickr-calendar.open {
display: inline-block;
z-index: 99999; }
.flatpickr-calendar.animate.open {
-webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.flatpickr-calendar.inline {
display: block;
position: relative;
top: 2px; }
.flatpickr-calendar.static {
position: absolute;
top: calc(100% + 2px); }
.flatpickr-calendar.static.open {
z-index: 999;
display: block; }
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
-webkit-box-shadow: none !important;
box-shadow: none !important; }
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
-webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; }
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
border-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0; }
.flatpickr-calendar .hasWeeks .dayContainer {
border-left: 0; }
.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
height: 40px;
border-top: 1px solid #e6e6e6; }
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
height: auto; }
.flatpickr-calendar:before,
.flatpickr-calendar:after {
position: absolute;
display: block;
pointer-events: none;
border: solid transparent;
content: '';
height: 0;
width: 0;
left: 22px; }
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.rightMost:after {
left: auto;
right: 22px; }
.flatpickr-calendar:before {
border-width: 5px;
margin: 0 -5px; }
.flatpickr-calendar:after {
border-width: 4px;
margin: 0 -4px; }
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
bottom: 100%; }
.flatpickr-calendar.arrowTop:before {
border-bottom-color: #e6e6e6; }
.flatpickr-calendar.arrowTop:after {
border-bottom-color: #fff; }
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
top: 100%; }
.flatpickr-calendar.arrowBottom:before {
border-top-color: #e6e6e6; }
.flatpickr-calendar.arrowBottom:after {
border-top-color: #fff; }
.flatpickr-calendar:focus {
outline: 0; }
.flatpickr-wrapper {
position: relative;
display: inline-block; }
.flatpickr-months {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.flatpickr-months .flatpickr-month {
background: transparent;
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9);
height: 34px;
line-height: 1;
text-align: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
text-decoration: none;
cursor: pointer;
position: absolute;
top: 0;
height: 34px;
padding: 10px;
z-index: 3;
color: rgba(0, 0, 0, 0.9);
fill: rgba(0, 0, 0, 0.9); }
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
display: none; }
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
position: relative; }
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
/*rtl:begin:ignore*/
/*
*/
left: 0;
/*
/*rtl:end:ignore*/
/*
*/ }
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
/*rtl:begin:ignore*/
/*
*/
right: 0;
/*
/*rtl:end:ignore*/
/*
*/ }
/*
/*rtl:begin:ignore*/
/*
/*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
color: #959ea9; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
fill: #f64747; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width: 14px;
height: 14px; }
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
-webkit-transition: fill 0.1s;
transition: fill 0.1s;
fill: inherit; }
.numInputWrapper {
position: relative;
height: auto; }
.numInputWrapper input,
.numInputWrapper span {
display: inline-block; }
.numInputWrapper input {
width: 100%; }
.numInputWrapper input::-ms-clear {
display: none; }
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none; }
.numInputWrapper span {
position: absolute;
right: 0;
width: 14px;
padding: 0 4px 0 2px;
height: 50%;
line-height: 50%;
opacity: 0;
cursor: pointer;
border: 1px solid rgba(57, 57, 57, 0.15);
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.numInputWrapper span:hover {
background: rgba(0, 0, 0, 0.1); }
.numInputWrapper span:active {
background: rgba(0, 0, 0, 0.2); }
.numInputWrapper span:after {
display: block;
content: "";
position: absolute; }
.numInputWrapper span.arrowUp {
top: 0;
border-bottom: 0; }
.numInputWrapper span.arrowUp:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid rgba(57, 57, 57, 0.6);
top: 26%; }
.numInputWrapper span.arrowDown {
top: 50%; }
.numInputWrapper span.arrowDown:after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid rgba(57, 57, 57, 0.6);
top: 40%; }
.numInputWrapper span svg {
width: inherit;
height: auto; }
.numInputWrapper span svg path {
fill: rgba(0, 0, 0, 0.5); }
.numInputWrapper:hover {
background: rgba(0, 0, 0, 0.05); }
.numInputWrapper:hover span {
opacity: 1; }
.flatpickr-current-month {
font-size: 135%;
line-height: inherit;
font-weight: 300;
color: inherit;
position: absolute;
width: 75%;
left: 12.5%;
padding: 7.48px 0 0 0;
line-height: 1;
height: 34px;
display: inline-block;
text-align: center;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px); }
.flatpickr-current-month span.cur-month {
font-family: inherit;
font-weight: 700;
color: inherit;
display: inline-block;
margin-left: 0.5ch;
padding: 0; }
.flatpickr-current-month span.cur-month:hover {
background: rgba(0, 0, 0, 0.05); }
.flatpickr-current-month .numInputWrapper {
width: 6ch;
width: 7ch\0;
display: inline-block; }
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
border-bottom-color: rgba(0, 0, 0, 0.9); }
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
border-top-color: rgba(0, 0, 0, 0.9); }
.flatpickr-current-month input.cur-year {
background: transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
cursor: text;
padding: 0 0 0 0.5ch;
margin: 0;
display: inline-block;
font-size: inherit;
font-family: inherit;
font-weight: 300;
line-height: inherit;
height: auto;
border: 0;
border-radius: 0;
vertical-align: initial;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield; }
.flatpickr-current-month input.cur-year:focus {
outline: 0; }
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
font-size: 100%;
color: rgba(0, 0, 0, 0.5);
background: transparent;
pointer-events: none; }
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: menulist;
background: transparent;
border: none;
border-radius: 0;
box-sizing: border-box;
color: inherit;
cursor: pointer;
font-size: inherit;
font-family: inherit;
font-weight: 300;
height: auto;
line-height: inherit;
margin: -1px 0 0 0;
outline: none;
padding: 0 0 0 0.5ch;
position: relative;
vertical-align: initial;
-webkit-box-sizing: border-box;
-webkit-appearance: menulist;
-moz-appearance: menulist;
width: auto; }
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
outline: none; }
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
background: rgba(0, 0, 0, 0.05); }
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
background-color: transparent;
outline: none;
padding: 0; }
.flatpickr-weekdays {
background: transparent;
text-align: center;
overflow: hidden;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 28px; }
.flatpickr-weekdays .flatpickr-weekdaycontainer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1; }
span.flatpickr-weekday {
cursor: default;
font-size: 90%;
background: transparent;
color: rgba(0, 0, 0, 0.54);
line-height: 1;
margin: 0;
text-align: center;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: bolder; }
.dayContainer,
.flatpickr-weeks {
padding: 1px 0 0 0; }
.flatpickr-days {
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
width: 307.875px; }
.flatpickr-days:focus {
outline: 0; }
.dayContainer {
padding: 0;
outline: 0;
text-align: left;
width: 307.875px;
min-width: 307.875px;
max-width: 307.875px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-ms-flex-pack: justify;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
opacity: 1; }
.dayContainer + .dayContainer {
-webkit-box-shadow: -1px 0 0 #e6e6e6;
box-shadow: -1px 0 0 #e6e6e6; }
.flatpickr-day {
background: none;
border: 1px solid transparent;
border-radius: 150px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #393939;
cursor: pointer;
font-weight: 400;
width: 14.2857143%;
-webkit-flex-basis: 14.2857143%;
-ms-flex-preferred-size: 14.2857143%;
flex-basis: 14.2857143%;
max-width: 39px;
height: 39px;
line-height: 39px;
margin: 0;
display: inline-block;
position: relative;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center; }
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
cursor: pointer;
outline: 0;
background: #e6e6e6;
border-color: #e6e6e6; }
.flatpickr-day.today {
border-color: #959ea9; }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
border-color: #959ea9;
background: #959ea9;
color: #fff; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
background: #569ff7;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
border-color: #569ff7; }
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
border-radius: 50px 0 0 50px; }
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
border-radius: 0 50px 50px 0; }
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
-webkit-box-shadow: -10px 0 0 #569ff7;
box-shadow: -10px 0 0 #569ff7; }
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
border-radius: 50px; }
.flatpickr-day.inRange {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
color: rgba(57, 57, 57, 0.3);
background: transparent;
border-color: transparent;
cursor: default; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
cursor: not-allowed;
color: rgba(57, 57, 57, 0.1); }
.flatpickr-day.week.selected {
border-radius: 0;
-webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; }
.flatpickr-day.hidden {
visibility: hidden; }
.rangeMode .flatpickr-day {
margin-top: 1px; }
.flatpickr-weekwrapper {
float: left; }
.flatpickr-weekwrapper .flatpickr-weeks {
padding: 0 12px;
-webkit-box-shadow: 1px 0 0 #e6e6e6;
box-shadow: 1px 0 0 #e6e6e6; }
.flatpickr-weekwrapper .flatpickr-weekday {
float: none;
width: 100%;
line-height: 28px; }
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
display: block;
width: 100%;
max-width: none;
color: rgba(57, 57, 57, 0.3);
background: transparent;
cursor: default;
border: none; }
.flatpickr-innerContainer {
display: block;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden; }
.flatpickr-rContainer {
display: inline-block;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.flatpickr-time {
text-align: center;
outline: 0;
display: block;
height: 0;
line-height: 40px;
max-height: 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.flatpickr-time:after {
content: "";
display: table;
clear: both; }
.flatpickr-time .numInputWrapper {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 40%;
height: 40px;
float: left; }
.flatpickr-time .numInputWrapper span.arrowUp:after {
border-bottom-color: #393939; }
.flatpickr-time .numInputWrapper span.arrowDown:after {
border-top-color: #393939; }
.flatpickr-time.hasSeconds .numInputWrapper {
width: 26%; }
.flatpickr-time.time24hr .numInputWrapper {
width: 49%; }
.flatpickr-time input {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
border: 0;
border-radius: 0;
text-align: center;
margin: 0;
padding: 0;
height: inherit;
line-height: inherit;
color: #393939;
font-size: 14px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield; }
.flatpickr-time input.flatpickr-hour {
font-weight: bold; }
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
font-weight: 400; }
.flatpickr-time input:focus {
outline: 0;
border: 0; }
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
height: inherit;
float: left;
line-height: inherit;
color: #393939;
font-weight: bold;
width: 2%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center; }
.flatpickr-time .flatpickr-am-pm {
outline: 0;
width: 18%;
cursor: pointer;
text-align: center;
font-weight: 400; }
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
background: #eee; }
.flatpickr-input[readonly] {
cursor: pointer; }
@-webkit-keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
@keyframes fpFadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0); }
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } }
/**
Ion.RangeSlider, 2.3.0
© Denis Ineshin, 2010 - 2018, IonDen.com
Build date: 2018-12-11 23:23:51
*/
.irs {
position: relative;
display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 12px;
font-family: Arial, sans-serif; }
.irs-line {
position: relative;
display: block;
overflow: hidden;
outline: none !important; }
.irs-bar {
position: absolute;
display: block;
left: 0;
width: 0; }
.irs-shadow {
position: absolute;
display: none;
left: 0;
width: 0; }
.irs-handle {
position: absolute;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: default;
z-index: 1; }
.irs-handle.type_last {
z-index: 2; }
.irs-min,
.irs-max {
position: absolute;
display: block;
cursor: default; }
.irs-min {
left: 0; }
.irs-max {
right: 0; }
.irs-from,
.irs-to,
.irs-single {
position: absolute;
display: block;
top: 0;
left: 0;
cursor: default;
white-space: nowrap; }
.irs-grid {
position: absolute;
display: none;
bottom: 0;
left: 0;
width: 100%;
height: 20px; }
.irs-with-grid .irs-grid {
display: block; }
.irs-grid-pol {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 8px;
background: #000; }
.irs-grid-pol.small {
height: 4px; }
.irs-grid-text {
position: absolute;
bottom: 0;
left: 0;
white-space: nowrap;
text-align: center;
font-size: 9px;
line-height: 9px;
padding: 0 3px;
color: #000; }
.irs-disable-mask {
position: absolute;
display: block;
top: 0;
left: -1%;
width: 102%;
height: 100%;
cursor: default;
background: rgba(0, 0, 0, 0);
z-index: 2; }
.lt-ie9 .irs-disable-mask {
background: #000;
filter: alpha(opacity=0);
cursor: not-allowed; }
.irs-disabled {
opacity: 0.4; }
.irs-hidden-input {
position: absolute !important;
display: block !important;
top: 0 !important;
left: 0 !important;
width: 0 !important;
height: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
outline: none !important;
z-index: -9999 !important;
background: none !important;
border-style: solid !important;
border-color: transparent !important; }
.irs--flat {
height: 40px; }
.irs--flat.irs-with-grid {
height: 60px; }
.irs--flat .irs-line {
top: 25px;
height: 12px;
background-color: #e1e4e9;
border-radius: 4px; }
.irs--flat .irs-bar {
top: 25px;
height: 12px;
background-color: #ed5565; }
.irs--flat .irs-bar--single {
border-radius: 4px 0 0 4px; }
.irs--flat .irs-shadow {
height: 1px;
bottom: 16px;
background-color: #e1e4e9; }
.irs--flat .irs-handle {
top: 22px;
width: 16px;
height: 18px;
background-color: transparent; }
.irs--flat .irs-handle > i:first-child {
position: absolute;
display: block;
top: 0;
left: 50%;
width: 2px;
height: 100%;
margin-left: -1px;
background-color: #da4453; }
.irs--flat .irs-handle.state_hover > i:first-child,
.irs--flat .irs-handle:hover > i:first-child {
background-color: #a43540; }
.irs--flat .irs-min,
.irs--flat .irs-max {
top: 0;
padding: 1px 3px;
color: #999;
font-size: 10px;
line-height: 1.333;
text-shadow: none;
background-color: #e1e4e9;
border-radius: 4px; }
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single {
color: white;
font-size: 10px;
line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
background-color: #ed5565;
border-radius: 4px; }
.irs--flat .irs-from:before,
.irs--flat .irs-to:before,
.irs--flat .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #ed5565; }
.irs--flat .irs-grid-pol {
background-color: #e1e4e9; }
.irs--flat .irs-grid-text {
color: #999; }
.irs--big {
height: 55px; }
.irs--big.irs-with-grid {
height: 70px; }
.irs--big .irs-line {
top: 33px;
height: 12px;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(-50%, #ddd), color-stop(150%, white));
background: -webkit-linear-gradient(top, #ddd -50%, white 150%);
background: linear-gradient(to bottom, #ddd -50%, white 150%);
border: 1px solid #ccc;
border-radius: 12px; }
.irs--big .irs-bar {
top: 33px;
height: 12px;
background-color: #92bce0;
border: 1px solid #428bca;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #428bca), to(#b9d4ec));
background: -webkit-linear-gradient(top, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
background: linear-gradient(to bottom, #ffffff 0%, #428bca 30%, #b9d4ec 100%);
-webkit-box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, 0.5); }
.irs--big .irs-bar--single {
border-radius: 12px 0 0 12px; }
.irs--big .irs-shadow {
height: 1px;
bottom: 16px;
background-color: rgba(66, 139, 202, 0.5); }
.irs--big .irs-handle {
top: 25px;
width: 30px;
height: 30px;
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #cbcfd5;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(30%, #B4B9BE), to(white));
background: -webkit-linear-gradient(top, white 0%, #B4B9BE 30%, white 100%);
background: linear-gradient(to bottom, white 0%, #B4B9BE 30%, white 100%);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 3px 1px white;
border-radius: 30px; }
.irs--big .irs-handle.state_hover,
.irs--big .irs-handle:hover {
border-color: rgba(0, 0, 0, 0.45);
background-color: #939ba7;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(30%, #919BA5), to(white));
background: -webkit-linear-gradient(top, white 0%, #919BA5 30%, white 100%);
background: linear-gradient(to bottom, white 0%, #919BA5 30%, white 100%); }
.irs--big .irs-min,
.irs--big .irs-max {
top: 0;
padding: 1px 5px;
color: white;
text-shadow: none;
background-color: #9f9f9f;
border-radius: 3px; }
.irs--big .irs-from,
.irs--big .irs-to,
.irs--big .irs-single {
color: white;
text-shadow: none;
padding: 1px 5px;
background-color: #428bca;
background: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
background: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
background: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
border-radius: 3px; }
.irs--big .irs-grid-pol {
background-color: #428bca; }
.irs--big .irs-grid-text {
color: #428bca; }
.irs--modern {
height: 55px; }
.irs--modern.irs-with-grid {
height: 55px; }
.irs--modern .irs-line {
top: 25px;
height: 5px;
background-color: #d1d6e0;
background: -webkit-gradient(linear, left top, left bottom, from(#e0e4ea), to(#d1d6e0));
background: -webkit-linear-gradient(top, #e0e4ea 0%, #d1d6e0 100%);
background: linear-gradient(to bottom, #e0e4ea 0%, #d1d6e0 100%);
border: 1px solid #a3adc1;
border-bottom-width: 0;
border-radius: 5px; }
.irs--modern .irs-bar {
top: 25px;
height: 5px;
background: #20b426;
background: -webkit-gradient(linear, left top, left bottom, from(#20b426), to(#18891d));
background: -webkit-linear-gradient(top, #20b426 0%, #18891d 100%);
background: linear-gradient(to bottom, #20b426 0%, #18891d 100%); }
.irs--modern .irs-bar--single {
border-radius: 5px 0 0 5px; }
.irs--modern .irs-shadow {
height: 1px;
bottom: 21px;
background-color: rgba(209, 214, 224, 0.5); }
.irs--modern .irs-handle {
top: 37px;
width: 12px;
height: 13px;
border: 1px solid #a3adc1;
border-top-width: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 3px; }
.irs--modern .irs-handle > i:nth-child(1) {
position: absolute;
display: block;
top: -4px;
left: 1px;
width: 6px;
height: 6px;
border: 1px solid #a3adc1;
background: white;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }
.irs--modern .irs-handle > i:nth-child(2) {
position: absolute;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
width: 10px;
height: 12px;
background: #e9e6e6;
background: -webkit-gradient(linear, left top, left bottom, from(white), to(#e9e6e6));
background: -webkit-linear-gradient(top, white 0%, #e9e6e6 100%);
background: linear-gradient(to bottom, white 0%, #e9e6e6 100%);
border-radius: 0 0 3px 3px; }
.irs--modern .irs-handle > i:nth-child(3) {
position: absolute;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 3px;
left: 3px;
width: 4px;
height: 5px;
border-left: 1px solid #a3adc1;
border-right: 1px solid #a3adc1; }
.irs--modern .irs-handle.state_hover,
.irs--modern .irs-handle:hover {
border-color: #7685a2;
background: #c3c7cd;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(30%, #919ba5), to(#ffffff));
background: -webkit-linear-gradient(top, #ffffff 0%, #919ba5 30%, #ffffff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #919ba5 30%, #ffffff 100%); }
.irs--modern .irs-handle.state_hover > i:nth-child(1),
.irs--modern .irs-handle:hover > i:nth-child(1) {
border-color: #7685a2; }
.irs--modern .irs-handle.state_hover > i:nth-child(3),
.irs--modern .irs-handle:hover > i:nth-child(3) {
border-color: #48536a; }
.irs--modern .irs-min,
.irs--modern .irs-max {
top: 0;
font-size: 10px;
line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
color: white;
background-color: #d1d6e0;
border-radius: 5px; }
.irs--modern .irs-from,
.irs--modern .irs-to,
.irs--modern .irs-single {
font-size: 10px;
line-height: 1.333;
text-shadow: none;
padding: 1px 5px;
background-color: #20b426;
color: white;
border-radius: 5px; }
.irs--modern .irs-from:before,
.irs--modern .irs-to:before,
.irs--modern .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #20b426; }
.irs--modern .irs-grid {
height: 25px; }
.irs--modern .irs-grid-pol {
background-color: #dedede; }
.irs--modern .irs-grid-text {
color: silver;
font-size: 13px; }
.irs--sharp {
height: 50px;
font-size: 12px;
line-height: 1; }
.irs--sharp.irs-with-grid {
height: 57px; }
.irs--sharp .irs-line {
top: 30px;
height: 2px;
background-color: black;
border-radius: 2px; }
.irs--sharp .irs-bar {
top: 30px;
height: 2px;
background-color: #ee22fa; }
.irs--sharp .irs-bar--single {
border-radius: 2px 0 0 2px; }
.irs--sharp .irs-shadow {
height: 1px;
bottom: 21px;
background-color: rgba(0, 0, 0, 0.5); }
.irs--sharp .irs-handle {
top: 25px;
width: 10px;
height: 10px;
background-color: #a804b2; }
.irs--sharp .irs-handle > i:first-child {
position: absolute;
display: block;
top: 100%;
left: 0;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #a804b2; }
.irs--sharp .irs-handle.state_hover,
.irs--sharp .irs-handle:hover {
background-color: black; }
.irs--sharp .irs-handle.state_hover > i:first-child,
.irs--sharp .irs-handle:hover > i:first-child {
border-top-color: black; }
.irs--sharp .irs-min,
.irs--sharp .irs-max {
color: white;
font-size: 14px;
line-height: 1;
top: 0;
padding: 3px 4px;
opacity: 0.4;
background-color: #a804b2;
border-radius: 2px; }
.irs--sharp .irs-from,
.irs--sharp .irs-to,
.irs--sharp .irs-single {
font-size: 14px;
line-height: 1;
text-shadow: none;
padding: 3px 4px;
background-color: #a804b2;
color: white;
border-radius: 2px; }
.irs--sharp .irs-from:before,
.irs--sharp .irs-to:before,
.irs--sharp .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #a804b2; }
.irs--sharp .irs-grid {
height: 25px; }
.irs--sharp .irs-grid-pol {
background-color: #dedede; }
.irs--sharp .irs-grid-text {
color: silver;
font-size: 13px; }
.irs--round {
height: 50px; }
.irs--round.irs-with-grid {
height: 65px; }
.irs--round .irs-line {
top: 36px;
height: 4px;
background-color: #dee4ec;
border-radius: 4px; }
.irs--round .irs-bar {
top: 36px;
height: 4px;
background-color: #006cfa; }
.irs--round .irs-bar--single {
border-radius: 4px 0 0 4px; }
.irs--round .irs-shadow {
height: 4px;
bottom: 21px;
background-color: rgba(222, 228, 236, 0.5); }
.irs--round .irs-handle {
top: 26px;
width: 24px;
height: 24px;
border: 4px solid #006cfa;
background-color: white;
border-radius: 24px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3); }
.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
background-color: #f0f6ff; }
.irs--round .irs-min,
.irs--round .irs-max {
color: #333;
font-size: 14px;
line-height: 1;
top: 0;
padding: 3px 5px;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px; }
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
font-size: 14px;
line-height: 1;
text-shadow: none;
padding: 3px 5px;
background-color: #006cfa;
color: white;
border-radius: 4px; }
.irs--round .irs-from:before,
.irs--round .irs-to:before,
.irs--round .irs-single:before {
position: absolute;
display: block;
content: "";
bottom: -6px;
left: 50%;
width: 0;
height: 0;
margin-left: -3px;
overflow: hidden;
border: 3px solid transparent;
border-top-color: #006cfa; }
.irs--round .irs-grid {
height: 25px; }
.irs--round .irs-grid-pol {
background-color: #dedede; }
.irs--round .irs-grid-text {
color: silver;
font-size: 13px; }
.irs--square {
height: 50px; }
.irs--square.irs-with-grid {
height: 60px; }
.irs--square .irs-line {
top: 31px;
height: 4px;
background-color: #dedede; }
.irs--square .irs-bar {
top: 31px;
height: 4px;
background-color: black; }
.irs--square .irs-shadow {
height: 2px;
bottom: 21px;
background-color: #dedede; }
.irs--square .irs-handle {
top: 25px;
width: 16px;
height: 16px;
border: 3px solid black;
background-color: white;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg); }
.irs--square .irs-handle.state_hover,
.irs--square .irs-handle:hover {
background-color: #f0f6ff; }
.irs--square .irs-min,
.irs--square .irs-max {
color: #333;
font-size: 14px;
line-height: 1;
top: 0;
padding: 3px 5px;
background-color: rgba(0, 0, 0, 0.1); }
.irs--square .irs-from,
.irs--square .irs-to,
.irs--square .irs-single {
font-size: 14px;
line-height: 1;
text-shadow: none;
padding: 3px 5px;
background-color: black;
color: white; }
.irs--square .irs-grid {
height: 25px; }
.irs--square .irs-grid-pol {
background-color: #dedede; }
.irs--square .irs-grid-text {
color: silver;
font-size: 11px; }
/**
* Swiper 4.5.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
* http://www.idangero.us/swiper/
*
* Copyright 2014-2019 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: September 13, 2019
*/
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1; }
.swiper-container-no-flexbox .swiper-slide {
float: left; }
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box; }
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0); }
.swiper-container-multirow > .swiper-wrapper {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto; }
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform; }
.swiper-slide-invisible-blank {
visibility: hidden; }
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto; }
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-transition-property: height, -webkit-transform;
transition-property: height, -webkit-transform;
transition-property: transform, height;
transition-property: transform, height, -webkit-transform; }
/* 3D Effects */
.swiper-container-3d {
-webkit-perspective: 1200px;
perspective: 1200px; }
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10; }
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* IE10 Windows Phone 8 Fixes */
.swiper-container-wp8-horizontal,
.swiper-container-wp8-horizontal > .swiper-wrapper {
-ms-touch-action: pan-y;
touch-action: pan-y; }
.swiper-container-wp8-vertical,
.swiper-container-wp8-vertical > .swiper-wrapper {
-ms-touch-action: pan-x;
touch-action: pan-x; }
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat; }
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none; }
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto; }
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto; }
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }
.swiper-button-lock {
display: none; }
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms opacity;
transition: 300ms opacity;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10; }
.swiper-pagination.swiper-pagination-hidden {
opacity: 0; }
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%; }
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0; }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33);
position: relative; }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
-webkit-transform: scale(0.66);
-ms-transform: scale(0.66);
transform: scale(0.66); }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
-webkit-transform: scale(0.33);
-ms-transform: scale(0.33);
transform: scale(0.33); }
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2; }
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer; }
.swiper-pagination-bullet-active {
opacity: 1;
background: #007aff; }
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0); }
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block; }
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 8px; }
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
-webkit-transition: 200ms top, 200ms -webkit-transform;
transition: 200ms top, 200ms -webkit-transform;
transition: 200ms transform, 200ms top;
transition: 200ms transform, 200ms top, 200ms -webkit-transform; }
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px; }
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
white-space: nowrap; }
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms left, 200ms -webkit-transform;
transition: 200ms left, 200ms -webkit-transform;
transition: 200ms transform, 200ms left;
transition: 200ms transform, 200ms left, 200ms -webkit-transform; }
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
-webkit-transition: 200ms right, 200ms -webkit-transform;
transition: 200ms right, 200ms -webkit-transform;
transition: 200ms transform, 200ms right;
transition: 200ms transform, 200ms right, 200ms -webkit-transform; }
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute; }
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: #007aff;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top; }
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
-webkit-transform-origin: right top;
-ms-transform-origin: right top;
transform-origin: right top; }
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0; }
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-hori