*{
margin: 0px;
padding: 0px;
}
html,
body{
font-family: -apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
color: #333333;
/*
color: #323232;
*/
font-size: 0px;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-moz-osx-font-smoothing: grayscale;
background: #FFFFFF;
}
body.stop{
/***********************
PREVENT SCROLLING
***********************/
height: 100% !important;
overflow: hidden !important;
/***********************
PREVENT SCROLLING iPhone
***********************/
position: fixed;
-webkit-transform: translatez(0);
padding: 0;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
@media screen and (min-width: 1025px){
body.desktop-default{
/***********************
PREVENT SCROLLING
***********************/
height: 100% !important;
overflow: hidden !important;
/***********************
PREVENT SCROLLING iPhone
***********************/
position: fixed;
-webkit-transform: translatez(0);
padding: 0;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
}
a{
color: inherit;
text-decoration: none;
cursor: pointer;
outline: none;
}
ul{
list-style-type: none;
}
input,
button{
font-family: inherit;
outline: none;
border: none;
-webkit-appearance: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #757575;
font-weight: 300;
}
::-moz-placeholder { /* Firefox 19+ */
color: #757575;
font-weight: 300;
}
:-ms-input-placeholder { /* IE 10+ */
color: #757575;
font-weight: 300;
}
:-moz-placeholder { /* Firefox 18- */
color: #757575;
font-weight: 300;
}
select{
color: #333333;
font-family: -apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
}
select:focus {
outline: none;
}
/*-------------
LAZY LOADING
--------------*/
/*
img,
*/
.b-lazy img,
.b-lazy{
-webkit-transition: opacity 500ms ease-in-out;
-moz-transition: opacity 500ms ease-in-out;
-o-transition: opacity 500ms ease-in-out;
transition: opacity 500ms ease-in-out;
opacity: 0;
}
/*
img,
*/
.b-lazy.b-loaded img,
.b-lazy.b-loaded{
opacity: 1;
}
/*-------------
BUTTONS
--------------*/
.btn{
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(256,256,256,0);
outline: none;
pointer-events:visiblePainted;
pointer-events:auto;
touch-action: manipulation;
}
/*-------------
HEADER
--------------*/
.header{
position: fixed;
-webkit-transform: translatez(0);
top: 0px;
left: 0px;
right: 0px;
font-size: 0px;
/*
background: #F7F7F7;
*/
padding-top: 15px;
padding-bottom: 0px;
background: #fff;
z-index: 99;
}
@media screen and (min-width: 1025px){
.header{
padding-top: 18px;
padding-bottom: 13px;
background: #fff;
border-bottom: 1px solid #DDDDDD;
z-index: 999997;
min-height: 45px;
}
}
/*-------------
BRANDING / LOGO
--------------*/
.b2b-branding,
.branding,
.map-branding{
display: inline-block;
vertical-align: top;
padding-left: 20px;
white-space: nowrap;
}
.b2b-branding,
.branding{
display: none;
}
@media screen and (min-width: 1025px){
.b2b-branding,
.branding{
display: inline-block;
vertical-align: top;
}
}
.map-branding{
margin-top: 15px;
}
.branding.hide{
display: none;
}
@media screen and (min-width: 1025px){
.branding.hide{
display: inline-block;
}
}
.brand{
display: none;
}
@media screen and (min-width: 1025px){
.brand{
display: block;
padding: 23px;
padding-top: 10px;
padding-bottom: 10px;
}
.brand img{
max-width: 220px;
}
}
.logo-mark{
display: inline-block;
vertical-align: top;
width: 40px;
height: 40px;
/*DESTIGOGO color*/
background: #FF8211;
background: -webkit-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -o-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -moz-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: linear-gradient(45deg, #FF3363, #FF8211 90%);
background: #007CFF;
border-radius: 100px;
text-align: center;
}
.logo{
display: inline-block;
vertical-align: top;
height: 40px;
margin-left: 3px;
margin-right: 2px;
margin-top: -1px;
}
.logo-mark-value{
vertical-align: top;
display: inline-block;
text-align: middle;
font-family: "Poppins",sans-serif;
font-weight: 600;
font-size: 30px;
line-height: 40px;
color: #fff;
padding-left: 2px;
text-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.word-mark{
display: inline-block;
vertical-align: top;
}
.word-mark-value{
display: inline-block;
vertical-align: top;
/*
margin-left: 4px;
*/
margin-left: 1px;
margin-left: 6px;
font-size: 22px;
line-height: 40px;
font-weight: 700;
color: #333333;
letter-spacing: 1px;
}
/*
@media screen and (min-width: 1025px){
.word-mark-value{
margin-left: 6px;
}
}
*/
.word-mark-value-light{
font-weight: 300;
}
.word-mark-value.destigogo{
display: inline-block;
vertical-align: top;
font-size: 28px;
margin-left: 8px;
line-height: 40px;
font-family: "Poppins",sans-serif;
font-weight: 700;
color: #333333;
}
.word-mark-image{
display: inline-block;
vertical-align: top;
margin-left: 2px;
height: 40px;
line-height: 40px;
padding-top: 0px;
}
.word-mark-image img{
display: inline-block;
vertical-align: middle;
/*
width: 100%;
*/
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/*-------------
BACK BUTTON
--------------*/
.back{
display: inline-block;
vertical-align: top;
padding-left: 13px;
padding-right: 10px;
border-radius: 5px;
white-space: nowrap;
font-size: 15px;
line-height: 42px;
font-weight: 400;
color: #007CFF;
display: none;
}
.back.show{
display: inline-block;
vertical-align: top;
}
.back p{
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 1025px){
.back{
position: absolute;
margin-left: 7px;
padding-left: 18px;
padding-right: 18px;
/*
left: 265px;
*/
/*
left: 445px;
*/
left: 4px;
width: 430px;
background: #FFFFFF;
}
.back:hover{
color: #00AAFF; /* 00AAFF */
}
}
/*
@media screen and (min-width: 700px){
.back{
left: 315px;
}
}
@media screen and (min-width: 900px){
.back{
left: 365px;
}
}
*/
/*-------------
BACK TO MAP BUTTON
--------------*/
.back-to-map{
display: inline-block;
vertical-align: top;
padding-left: 13px;
padding-right: 10px;
border-radius: 5px;
white-space: nowrap;
font-size: 16px;
line-height: 42px;
font-weight: 400;
color: #007CFF;
display: inline-block;
vertical-align: top;
}
.back-to-map p{
display: inline-block;
vertical-align: top;
}
@media screen and (min-width: 1025px){
.back-to-map{
display: none;
}
.back-to-map:hover{
color: #00AAFF; /* 00AAFF */
}
}
.chevron::before {
border-style: solid;
border-width: 3px 3px 0 0;
content: '';
display: inline-block;
height: 12px;
width: 12px;
left: 0px;
position: relative;
top: 13px;
transform: rotate(-135deg);
vertical-align: top;
}
@media screen and (min-width: 1025px){
.chevron::before {
border-width: 2px 2px 0 0;
}
}
/*
.chevron.right:before {
transform: rotate(45deg);
}
.chevron.bottom:before {
transform: rotate(135deg);
}
.chevron.right:before {
transform: rotate(-45deg);
}
*/
.current-destination-container{
display: inline-block;
vertical-align: top;
line-height: 42px;
padding-left: 15px;
white-space: nowrap;
}
.current-destination-image{
display: inline-block;
vertical-align: top;
margin-top: 1px;
width: 40px;
height: 40px;
border-radius: 100px;
overflow: hidden;
}
.current-destination-image img{
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.current-destination{
display: inline-block;
vertical-align: top;
padding-top: 2px;
padding-left: 5px;
white-space: nowrap;
}
@media screen and (min-width: 1025px){
.current-destination{
padding-top: 1px;
}
}
.current-destination-city{
display: block;
font-size: 17px;
color: #333333;
font-weight: 500;
line-height: 21px;
}
.current-destination-country{
display: block;
font-size: 13px;
color: #757575;
font-weight: 400;
line-height: 18px;
}
@media screen and (min-width: 1025px){
.current-destination-country{
font-size: 14px;
font-weight: 400;
}
}
/*-------------
SETTINGS
--------------*/
.settings{
position: absolute;
top: 15px;
right: 0px;
display: inline-block;
vertical-align: top;
text-align: right;
display: none;
pointer-events:visiblePainted;
pointer-events:auto;
}
@media screen and (min-width: 1025px){
.settings{
/*
position: relative;
top: auto;
right: auto;
margin-right: 7px;
float: right;
*/
position: absolute;
display: inline-block;
top: 18px;
right: 0px;
margin-right: 7px;
z-index: 9999999;
}
}
.menu-btn{
display: inline-block;
vertical-align: top;
margin-right: 0px;
margin-top: -5px;
width: 50px;
height: 50px;
text-align: center;
border-radius: 100px;
pointer-events:visiblePainted;
pointer-events:auto;
}
.menu-btn.map-menu-btn{
position: absolute;
top: 15px;
right: 0px;
}
@media screen and (min-width: 1025px){
.menu-btn{
margin-left: 5px;
}
.menu-btn.map-menu-btn{
display: none;
}
}
@media screen and (min-width: 1025px){
.menu-btn:hover{
background: #F7F7F7;
}
}
.menu-icon{
display: inline-block;
vertical-align: top;
padding-top: 9px;
}
.menu-dot {
margin-left: auto;
margin-right: auto;
width: 4px;
height: 4px;
border-radius: 2px;
background: #757575;
background: #333333;
margin-top: 5px;
}
@media screen and (min-width: 1025px){
.menu-btn:hover .menu-dot {
background: #333333;
}
}
/*-------------
MOBILE SETTINGS
--------------*/
.setting-title{
display: inline-block;
vertical-align: top;
}
.airport-option .setting-title{
width: calc(100% - 100px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description{
position: absolute;
right: 10px; /* 50px; */
font-size: 14px;
color: #757575;
padding-right: 20px;
font-weight: 300;
}
@media screen and (min-width: 1025px){
.description{
right: 5px;
}
}
.active .description{
font-weight: 300;
color: #333333;
}
.setting-value{
display: inline-block;
vertical-align: top;
/*
padding-right: 6px;
*/
float: right;
}
.contact-img{
margin-right: -8px;
margin-top: -4px;
}
.mail-contact{
font-size: 15px;
font-weight: 300;
}
/*-------------
DESKTOP SETTINGS
--------------*/
.desktop-settings{
position: relative;
display: inline-block;
vertical-align: top;
/*
display: none;
*/
}
@media screen and (min-width: 1025px){
.desktop-settings{
position: relative;
display: inline-block;
vertical-align: top;
}
}
/*-------------
CURRENCY + LANGUAGE OPTIONS
--------------*/
.language{
display: block;
}
.currency{
display: none !important;
}
:not(.popup-option).currency,
:not(.popup-option).language{
position: relative;
display: inline-block;
vertical-align: top;
margin: 2px 0px;
margin-right: 5px;
border-radius: 4px;
padding: 10px 14px;
}
:not(.popup-option).currency{
display: none !important;
}
/*-------------
LANGUAGE DESKTOP
--------------*/
.language.language-desktop{
display: none;
}
@media screen and (min-width: 1025px){
.language.language-desktop{
position: relative;
display: inline-block;
vertical-align: top;
}
}
/*-------------
LOGIN BUTTON
--------------*/
:not(.popup-option).user-login{
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 0px;
background: #007CFF;
color: #FFFFFF;
text-align: center;
border-radius: 4px;
padding: 10px 18px;
margin-top: 2px;
margin-bottom: 2px;
display: none;
}
.login-btn{
display: none;
}
.login-btn.show{
display: block;
}
:not(.popup-option).user-login.show{
display: inline-block;
vertical-align: top;
}
.currency:hover,
.language:hover{
background: #F7F7F7;
color: #333333;
}
.user-login:hover{
background: #0070e6;
}
.login-value,
.currency-value,
.language-value{
display: inline;
font-size: 14px;
font-weight: 500;
line-height: 17px;
}
.currency-symbol{
display: inline;
font-size: 14px;
font-weight: 500;
padding-left: 8px;
}
.language-flag,
.currency-flag,
.country-flag{
display: inline-block;
vertical-align: top;
padding-right: 6px;
overflow: hidden;
height: 16px;
}
.language-flag{
overflow: visible;
height: 16px;
line-height: 18px;
}
.country-flag{
height: 100%;
}
.currency-flag{
padding-left: 0px;
padding-right: 9px;
}
.currency .currency-flag{
display: none;
}
@media screen and (min-width: 1025px){
.currency .currency-flag{
display: inline-block;
}
}
.language-flag img,
.currency-flag img,
.country-flag img{
display: inline-block;
vertical-align: middle;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/*-------------
USER ACCOUNT BUTTON
--------------*/
.user-account,
.popup-user-account,
.logout-btn{
display: none;
}
.user-account.show{
position: relative;
display: inline-block;
vertical-align: top;
}
.user-account-icon{
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 0px;
width: 38px;
height: 38px;
border-radius: 100px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
margin-top: 1px;
overflow: hidden;
text-align: center;
}
/*-------------
USER ACCOUNT MENU
--------------*/
.user-account-head{
position: absolute;
display: inline-block;
vertical-align: top;
top: 20%;
left: 50%;
transform: translate(-50%, 0px);
width: 35%;
height: 35%;
border-radius: 100px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
}
.user-account-body{
position: absolute;
display: inline-block;
vertical-align: top;
top: 65%;
left: 50%;
transform: translate(-50%, 0px);
width: 85%;
height: 85%;
border-radius: 100px;
background: #FFFFFF;
border: 1px solid #DDDDDD;
}
.user-account-icon:hover,
.user-account-icon:hover .user-account-head,
.user-account-icon:hover .user-account-body{
border-color: #757575;
}
/*-------------
USER ACCOUNT MENU
--------------*/
.user-account-menu{
position: absolute;
display: inline-block;
vertical-align: top;
top: calc(100% + 17px);
left: calc(50% - 20px);
transform: translate(-50%, 0px);
background: #FFFFFF;
border: 1px solid #DDDDDD;
box-shadow: 0 6px 21px rgba(0,0,0,.1);
cursor: default;
display: none;
}
.user-account-menu:before {
content: "";
position: absolute;
bottom: 100%;
left: calc(50% + 20px);
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #DDDDDD transparent;
}
.user-account-menu:after {
content: "";
position: absolute;
bottom: 100%;
left: calc(50% + 20px);
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #FFFFFF transparent;
}
.user-account-container{
position: relative;
margin: 6px;
min-width: 120px;
text-align: left;
}
.user-account-menu-item{
position: relative;
display: block;
font-size: 13px;
line-height: 20px;
font-weight: 300;
padding: 6px 10px;
border-radius: 4px;
}
.user-account-menu-item.user-email{
color: #757575;
}
.user-account-menu-item:not(.user-email):hover{
/*
background: #F7F7F7;
color: #757575;
*/
text-decoration: underline;
}
.user-account-menu-divider{
position: relative;
display: block;
border-top: 1px solid #DDDDDD;
margin: 6px 10px;
padding: 0px;
border-radius: 0px;
}
/*-------------
LANGUAGE MENU
USER ACCOUNT MENU
--------------*/
.language-menu{
position: absolute;
display: inline-block;
vertical-align: top;
top: calc(100% + 17px);
left: 50%;
left: calc(50% - 70px);
transform: translate(-50%, 0px);
background: #FFFFFF;
border: 1px solid #DDDDDD;
box-shadow: 0 6px 21px rgba(0,0,0,.1);
cursor: default;
display: none;
}
.language-menu:before{
content: "";
position: absolute;
bottom: 100%;
left: 50%;
left: calc(50% + 70px);
margin-left: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #DDDDDD transparent;
}
.language-menu:after{
content: "";
position: absolute;
bottom: 100%;
left: 50%;
left: calc(50% + 70px);
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #FFFFFF transparent;
}
.language-menu-container{
position: relative;
padding: 12px;
min-width: 140px;
text-align: left;
/*
overflow-y: auto;
-webkit-overflow-scrolling: touch;
*/
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 444px; /* 3 * 140px (breedte language-menu-item) + 24px (padding); */
height: 160px; /* 4 * 34px (hoogte language-menu-item) + 24px (padding); */
width: 304px; /* 2 * 140px (breedte language-menu-item) + 24px (padding); */
height: 228px; /* 6 * 34px (hoogte language-menu-item) + 24px (padding); */
max-height: calc(100vh - 154px);
/*
max-height: calc(100vh - 234px);
*/
box-sizing: border-box;
}
.language-menu-item{
position: relative;
display: block;
font-size: 13px;
line-height: 22px;
font-weight: 300;
padding: 6px 10px;
border-radius: 4px;
width: calc(33.33% - 20px);
width: calc(50% - 20px);
/*
width: 140px;
*/
height: 22px;
}
.language-menu-item:hover{
background: #F7F7F7;
}
.language-menu-item .language-flag {
display: inline-block;
vertical-align: top;
padding-right: 6px;
overflow: visible;
height: 22px;
line-height: 20px;
}
.language-menu-item .language-value {
font-size: 13px;
line-height: 20px;
font-weight: 300;
}
/*-------------
SEARCH
--------------*/
@media screen and (min-width: 1025px){
.search-container{
position: fixed;
-webkit-transform: translatez(0);
z-index: 999997;
left: 360px;
top: 0px;
bottom: auto;
/*
width: 299px;
width: 399px;
width: calc(100% - 566px);
*/
width: calc(100% - 582px);
max-width: 650px;
/*
background: #FFFFFF;
border-right: 1px solid #DDDDDD;
border-right: 0.5px solid #DDDDDD;
*/
padding-top: 8px;
padding-bottom: 8px;
white-space: nowrap;
}
}
/*
@media screen and (min-width: 700px){
.search-container{
width: 349px;
}
}
@media screen and (min-width: 900px){
.search-container{
width: 399px;
}
}
*/
.search{
position: fixed;
-webkit-transform: translatez(0);
top: 55px;
left: 0px;
right: 0px;
padding-top: 4px;
padding-bottom: 0px;
/*
padding-bottom: 10px;
border-bottom: 1px solid #C8C7CC;
border-bottom: 0.5px solid #C8C7CC;
*/
/*
background: -webkit-linear-gradient(0deg, #ffffff, #f7f7f7);
background: -moz-linear-gradient(0deg, #ffffff, #f7f7f7);
background: linear-gradient(0deg, #ffffff, #f7f7f7);
*/
display: none;
}
@media screen and (min-width: 1025px){
.search{
position: relative;
top: auto;
left: auto;
right: auto;
/*
background: -webkit-linear-gradient(0deg, #ffffff, #f7f7f7);
background: -moz-linear-gradient(0deg, #ffffff, #f7f7f7);
background: linear-gradient(0deg, #ffffff, #f7f7f7);
*/
padding-top: 8px;
padding-top: 2px;
border: none;
display: block;
}
}
/*-------------
SITE-DESCRIPTION
--------------*/
.site-description{
display: none;
}
@media screen and (min-width: 1025px){
.site-description{
position: fixed;
-webkit-transform: translatez(0);
display: inline-block;
vertical-align: bottom;
left: 0px;
bottom: 0px;
padding-bottom: 25px; /* 32px; */
padding-left: 18px;
width: 360px;
background: #FFFFFF;
z-index: 999999;
display: none;
}
.site-description.show{
display: inline-block;
vertical-align: bottom;
}
.site-description p{
display: inline-block;
vertical-align: top;
color: #757575;
font-size: 13px;
font-weight: 300;
line-height: 20px;
padding-top: 1px;
padding-left: 5px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 50px);
}
.site-description a{
color: #007cff;
text-decoration: underline;
}
.site-description a:hover{
text-decoration: none;
}
/*-------------
BRAND + COPYRIGHT
--------------*/
.site-description-brand{
display: inline-block;
vertical-align: middle;
font-size: 19px;
letter-spacing: 1px;
font-weight: 700;
line-height: 24px;
padding-top: 20px;
padding-left: 5px;
color: #757575;
}
.site-description-brand span{
font-weight: 300;
}
.site-description-copyright{
display: inline-block;
vertical-align: middle;
font-size: 11px;
font-weight: 300;
letter-spacing: 0px;
line-height: 24px;
padding-top: 1px;
padding-left: 5px;
display: inline-block;
vertical-align: top;
}
}
/*-------------
PRIVACY POLICY
--------------*/
.privacy-policy{
position: absolute;
right: 30px;
padding-top: 21px;
}
.privacy-policy a {
display: inline-block;
vertical-align: top;
padding-left: 5px;
font-size: 13px;
font-weight: 300;
line-height: 22px;
color: #757575;
text-decoration: none;
/*
cursor: default;
*/
}
/*-------------
INPUT
--------------*/
.input{
position: relative;
padding: 20px;
padding-top: 5px;
padding-bottom: 5px;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
@media screen and (min-width: 1025px){
.input{
display: inline-block;
vertical-align: top;
width: calc(50% - 40px);
}
}
.input:last-child{
padding-bottom: 3px;
}
.input-field{
position: relative;
padding: 13px;
padding-top: 14px;
padding-bottom: 14px;
background: #F1F1F3;
font-size: 15px;
font-weight: 400;
line-height: 18px;
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: text;
}
@media screen and (min-width: 1025px){
.input-field{
padding: 13px;
background-color: #FFF;
/*
border-radius: 5px;
border: 1px solid #DDDDDD;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
*/
border-radius: 4px;
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}
.input-field:hover{
/*
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
*/
box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
#from{
margin-right: 10px;
font-weight: 500;
}
#to{
margin-left: 10px;
font-weight: 500;
}
}
.input-label{
display: inline-block;
vertical-align: top;
color: #757575;
padding-right: 6px;
font-size: 13px;
font-weight: 500;
line-height: 18px;
}
.input-label i{
display: inline;
padding-right: 4px;
opacity: 0.9;
}
.input-value{
display: inline;
text-transform: capitalize;
}
/*-------------
SWAP AIRPORTS
--------------*/
.swap-airports{
position: absolute;
display: inline-block;
vertical-align: top;
right: 35px;
bottom: 35px;
width: 38px;
height: 40px;
background: #FFFFFF;
color: #333333;
/*
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
*/
box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.15);
font-weight: 500;
border-radius: 5px;
z-index: 9;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
text-align: center;
}
@media screen and (min-width: 1025px){
.swap-airports{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
right: auto;
bottom: auto;
left: calc(50% - 20px);
top: 11px;
width: 40px;
height: 38px;
border-radius: 4px;
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: none;
}
}
.swap-airports.swap-airports-map{
bottom: 30px;
box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.15);
}
.swap-airports-label{
width: 38px;
height: 40px;
font-size: 15px;
line-height: 40px;
}
.swap-airports-label i{
line-height: 40px;
}
@media screen and (min-width: 1025px){
.swap-airports-label{
line-height: 38px;
}
.swap-airports-label i{
line-height: 38px;
}
}
.swap-airports.disabled{
opacity: 0.3;
cursor: no-drop;
}
.swap-airports.swap-airports-map.disabled{
opacity: 1;
}
.swap-airports.swap-airports-map.disabled .swap-airports-label i{
opacity: 0.3;
}
@media screen and (min-width: 1025px){
.swap-airports:not(.disabled):active{
background: #F7F7F7;
border-color: #F7F7F7;
}
}
/*-------------
ROUNDTRIP ONEWAY
--------------*/
.roundtrip-oneway{
padding: 15px;
padding-top: 0px;
padding-bottom: 0px;
white-space: nowrap;
display: none;
}
@media screen and (min-width: 1025px){
.roundtrip-oneway{
padding: 16px;
padding-top: 1px;
padding-bottom: 3px;
padding-left: 12px;
}
}
.roundtrip,
.oneway{
display: inline-block;
font-size: 13px;
padding: 10px;
padding-left: 12px;
padding-right: 12px;
border-radius: 5px;
margin: 4px;
color: #757575;
font-weight: 500;
}
.roundtrip.active,
.oneway.active{
color: #333333;
}
.roundtrip-label,
.oneway-label{
display: inline;
}
.roundtrip-label i,
.oneway-label i{
display: inline;
padding-right: 2px;
}
/*-------------
CONTENT
--------------*/
.site-content{
border: none;
}
@media screen and (min-width: 1025px){
.site-content{
padding-top: 76px;
}
}
/*-------------
TOP FILTERS
--------------*/
.filter-header{
position: relative;
font-size: 0px;
padding-top: 18px;
padding-bottom: 8px;
padding-left: 16px;
/*
border-bottom: 1px solid #B3B3B3;
border-bottom: 0.5px solid #B3B3B3;
*/
white-space: nowrap;
margin-top: 212px;
}
.dates-duration-desktop{
display: none;
}
@media screen and (min-width: 1025px){
.filter-header{
margin-top: 0px;
display: none;
}
.dates-duration-desktop{
display: block;
padding-top: 18px;
padding-bottom: 8px;
padding-left: 16px;
}
}
.filter-header-bg-top{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 60%;
background: -webkit-linear-gradient(0deg, rgba(256,256,256,0.95), rgba(256,256,256,0));
background: -moz-linear-gradient(0deg, rgba(256,256,256,0.95), rgba(256,256,256,0));
background: linear-gradient(0deg, rgba(256,256,256,0.95), rgba(256,256,256,0));
}
.filter-header-bg-bottom{
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 40%;
background: -webkit-linear-gradient(0deg, rgba(256,256,256,1), rgba(256,256,256,0.95));
background: -moz-linear-gradient(0deg, rgba(256,256,256,1), rgba(256,256,256,0.95));
background: linear-gradient(0deg, rgba(256,256,256,1), rgba(256,256,256,0.95));
}
.filter-header.fixed{
position: fixed;
-webkit-transform: translatez(0);
padding-bottom: 28px;
background: rgba(256,256,256,0);
margin-top: 0px;
top: 43px;
left: 0px;
right: 0px;
z-index: 9;
/*border-bottom: 1px solid #C8C7CC; /*#C8C7CC*/
/*border-bottom: 0.5px solid #C8C7CC; /*#C8C7CC*/
white-space: nowrap;
display: none;
}
/*
@media screen and (min-width: 1025px){
.filter-header.fixed{
display: block;
padding: 12px;
padding-bottom: 28px;
padding-left: 15px;
padding-right: 0px;
left: 300px;
right: 0px;
top: 60px;
}
}
*/
@media screen and (min-width: 1025px){
.filter-header.fixed{
display: block;
padding-top: 18px;
padding-bottom: 0px;
left: 0px;
top: 225px;
/*
width: 267px;
*/
width: 284px;
z-index: 999999;
display: none !important;
}
}
/*
@media screen and (min-width: 700px){
.filter-header.fixed{
width: 317px;
}
}
@media screen and (min-width: 900px){
.filter-header.fixed{
width: 367px;
}
}
*/
.fixed .filter-header-bg-top{
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 30px;
background: -webkit-linear-gradient(0deg, rgba(256,256,256,0.95), rgba(256,256,256,1));
background: -moz-linear-gradient(0deg, rgba(256,256,256,0.95), rgba(256,256,256,1));
background: linear-gradient(0deg, rgba(256,256,256,0.95), rgba(256,256,256,1));
}
.fixed .filter-header-bg-bottom{
position: absolute;
top: 30px;
left: 0px;
right: 0px;
bottom: 0px;
background: -webkit-linear-gradient(0deg, rgba(256,256,256,0), rgba(256,256,256,0.95));
background: -moz-linear-gradient(0deg, rgba(256,256,256,0), rgba(256,256,256,0.95));
background: linear-gradient(0deg, rgba(256,256,256,0), rgba(256,256,256,0.95));
}
@media screen and (min-width: 1025px){
.fixed .filter-header-bg-top{
background: #FFF;
}
.fixed .filter-header-bg-bottom{
background: -webkit-linear-gradient(0deg, rgba(256,256,256,0), rgba(256,256,256,1));
background: -moz-linear-gradient(0deg, rgba(256,256,256,0), rgba(256,256,256,1));
background: linear-gradient(0deg, rgba(256,256,256,0), rgba(256,256,256,1));
}
}
.filter-header.fixed.show{
display: block;
}
.filter-header.fixed.hide{
display: none;
}
/*-------------
DESKTOP FILTERS
--------------*/
.desktop-filters{
display: none;
}
@media screen and (min-width: 1025px){
.desktop-filters{
display: block;
position: fixed;
-webkit-transform: translatez(0);
padding-bottom: 28px;
background: rgba(256,256,256,0);
margin-top: 0px;
top: 0px;
left: 0px;
right: 0px;
z-index: 999998;
white-space: nowrap;
padding: 0px;
/*
left: 300px;
*/
left: 380px;
right: 0px;
top: 77px;
/*
top: 77.5px;
*/
background: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-left: 0.5px solid #DDDDDD;
}
}
/*
@media screen and (min-width: 700px){
.desktop-filters{
left: 350px;
}
}
@media screen and (min-width: 900px){
.desktop-filters{
left: 380px;
}
}
*/
/*-------------
FILTER BUTTON
--------------*/
.filter{
position: relative;
display: inline-block;
vertical-align: top;
padding: 8px;
padding-left: 11px;
padding-right: 11px;
/*
border: 1px solid #007CFF;
*/
background: #FFFFFF;
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
margin: 4px;
font-size: 13px;
line-height: 17px;
font-weight: 500;
border-radius: 5px;
z-index: 9;
}
/*-------------
FILTERS BUTTON TIJDELIJK UIT
--------------*/
.filters{
display: none !important;
}
.filter.desktop{
display: none;
}
@media screen and (min-width: 1025px){
.filter.mobile{
display: none;
}
.filter.desktop{
display: inline-block;
vertical-align: top;
}
.filter.hide{
display: none;
}
}
.filter:hover{
background: #F7F7F7;
border: 1px solid #F7F7F7;
border: 0.5px solid #F7F7F7;
}
.filter.active{
border: none;
padding: 8px;
padding-left: 11px;
padding-right: 11px;
margin: 4px;
/*
background: #00bffc;
border: 1px solid #00bffc;
border: 0.5px solid #00bffc;
*/
color: #fff;
background: #FF8211;
background: -webkit-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -o-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -moz-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: linear-gradient(45deg, #FF3363, #FF8211 90%);
background: #007CFF;
border: 1px solid transparent;
border: 0.5px solid transparent;
}
.duration{
display: none;
}
.duration.show{
display: inline-block;
vertical-align: top;
}
.filters-right{
display: inline-block;
vertical-align: top;
position: absolute;
right: 0px;
padding-right: 25px;
top: 0px;
padding-top: 10px;
z-index: 10;
background: #FFFFFF;
}
/*-------------
SORT
--------------*/
.sort-anywhere-container{
display: none;
}
.sort,
.sort-desktop{
display: none;
}
@media screen and (min-width: 1025px){
.sort-anywhere-container.show{
display: inline-block;
vertical-align: top;
margin-left: 10px;
}
.sort{
display: inline-block;
vertical-align: top;
font-weight: 500;
}
.sort-desktop.hide{
display: none;
}
.sort-desktop.hide-both{
display: none;
}
}
/*-------------
FLIGHT FILTERS
--------------*/
.flight-filters{
display: none;
}
.flight-filters.show{
display: block;
}
@media screen and (min-width: 1025px){
.flight-filters{
display: inline-block;
vertical-align: top;
}
.flight-filters.show{
display: inline-block;
vertical-align: top;
}
}
/*-------------
TRIPTYPE HEADER
--------------*/
.triptype-header{
padding-top: 16px;
}
@media screen and (min-width: 1025px){
.triptype-header{
display: none;
}
}
.triptype-header h2{
font-size: 28px;
display: inline;
line-height: 34px;
font-weight: 700;
}
.dropdown-arrow {
display: inline-block;
vertical-align: top;
height: 34px;
}
.dropdown-arrow i{
font-size: 20px;
display: inline;
line-height: 34px;
padding-left: 8px;
margin-top: -4px;
}
.triptype{
/*
display: inline-block;
vertical-align: top;
*/
padding: 9px;
padding-left: 20px;
padding-right: 19px;
/*
border-radius: 0px 5px 5px 0px;
border: 1px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
border-left: none;
*/
}
/*
.triptype:hover{
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
border-left: none;
}
*/
/*-------------
FLIGHTS CONTAINER
--------------*/
.flights-container{
position: relative;
background: #FFFFFF;
border: none;
}
.list{
background: #FFFFFF;
}
@media screen and (min-width: 1025px){
.flights-container{
position: absolute;
/*left: 300px;*/
left: 480px;
right: 0px;
top: 76px;
padding-left: 11px;
padding-right: 21px;
z-index: 99999;
}
.flights-container.map-true{
position: absolute;
left: 0px;
top: 248px;
top: 76px;
/*width: 275px;*/
width: 379px;
padding-left: 0px;
padding-right: 0px;
padding-top: 48px;
height: calc(100vh - 296px);
overflow: hidden;
overflow-y: auto;
}
}
/*
.flights-container::-webkit-scrollbar{
width: 0px;
height: 0px;
}
@media screen and (min-width: 1025px){
.flights-container::-webkit-scrollbar{
width: 12px;
height: 0px;
}
.flights-container::-webkit-scrollbar-track{
border-radius: 100px 100px 0px 0px;
background: #EEEEEE;
-webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.14);
-moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.14);
box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.14);
}
.flights-container::-webkit-scrollbar-thumb{
border-radius: 0px;
background: #C1C1C1;
border-radius: 100px;
-webkit-box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.14);
-moz-box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.14);
box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.14);
}
*/
}
/*
@media screen and (min-width: 700px){
.flights-container{
left: 350px;
}
.flights-container.map-true{
width: 325px;
}
}
@media screen and (min-width: 900px){
.flights-container{
left: 380px;
}
.flights-container.map-true{
width: 375px;
}
}
*/
/*-------------
FLIGHT RESULTS
--------------*/
.flights{
display: inline-block;
vertical-align: top;
width: 100%;
display: none;
font-size: 0px;
border: none;
display: none !important;
}
@media screen and (min-width: 918px){
.flights{
display: inline-block;
vertical-align: top;
/*
max-width: 500px;
border-right: 1px solid #DDDDDD;
border-right: 0.5px solid #DDDDDD;
*/
}
}
/*-------------
FLIGHTS TO DESTINATION
--------------*/
.flights-to-destination{
display: inline-block;
vertical-align: top;
width: 100%;
max-width: 690px;
font-size: 0px;
border: none;
display: none;
display: none !important;
}
#flights-to-result{
margin-top: 15px;
padding-bottom: 25px;
}
.map-true .flights-to-destination{
padding-left: 12px;
padding-right: 10px;
width: calc(100% - 20px);
max-width: auto;
}
/*-------------
SORT FLIGHTS TO DESTINATION
--------------*/
.sort-flights-container{
padding: 16px;
padding-top: 10px;
padding-bottom: 10px;
display: none;
}
@media screen and (min-width: 1025px){
.sort-flights-container{
padding: 4px;
border-radius: 5px;
overflow: hidden;
}
}
.sort-flights{
display: inline-block;
vertical-align: top;
width: calc(33.33% - 38px);
margin: 4px;
padding: 15px;
padding-top: 12px;
padding-bottom: 12px;
cursor: pointer;
color: #333333; /* #333333; */
/*
background: #F7F7F7; /* #F1F1F3; */
/*
border-bottom: 3px solid #F7F7F7; /* #F1F1F3; */
}
@media screen and (min-width: 1025px){
.sort-flights{
width: calc(33.33% - 38px);
padding: 15px;
padding-bottom: 12px;
/*
transition: all .2s ease-in-out;
*/
}
.sort-flights:first-child{
border-radius: 5px 0px 0px 5px;
}
.sort-flights:last-child{
border-radius: 0px 5px 5px 0px;
}
}
@media screen and (min-width: 1025px){
.sort-flights:hover{
background: #f7f7f7;
color: #333333;
border-radius: 5px;
/*
border-bottom: 3px solid #F7F7F7;
transition: all 0s ease-in-out;
*/
}
}
.sort-flights.active{
/*
background: #fff;
color: #00bffc;
box-shadow: 0 3px 21px rgba(0,0,0,.1);
*/
background: #F1F1F3;
color: #333333;
cursor: default;
border-radius: 5px;
/*
transition: all .2s ease-in-out;
*/
}
.sort-title{
display: block;
font-size: 13px; /* 12px */
font-weight: 500; /* 400 */
padding-bottom: 5px;
}
.sort-title .desktop{
display: none;
}
@media screen and (min-width: 800px){
.sort-title .mobile{
display: none;
}
.sort-title .desktop{
display: block;
}
}
.sort-price{
font-size: 15px;
font-weight: 500;
white-space: nowrap;
}
.sort-duration{
font-size: 12px;
font-weight: 400;
padding-left: 7px;
white-space: nowrap;
}
.duration-average{
display: none;
}
/*
@media screen and (min-width: 1050px){
.duration-average{
display: inline;
padding-left: 7px;
font-weight: 400;
}
}
*/
/*-------------
FLIGHT TO
--------------*/
.flight-to{
position: relative;
white-space: nowrap;
padding: 12px;
padding-left: 20px;
padding-right: 20px;
/*
border-bottom: 1px solid #DDDDDD; /*#C8C7CC*/
/*
border-bottom: 0.5px solid #DDDDDD; /*#C8C7CC*/
margin: 10px;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 0 3px 21px rgba(0,0,0,.1);
border-radius: 5px;
/*
overflow: hidden;
*/
display: none;
opacity: 0;
cursor: pointer;
}
.flight-to.show{
display: block;
opacity: 1;
transition: all 0.3s;
}
/*
.flight-to:hover{
background: #F9F9F9;
}
*/
@media screen and (min-width: 1025px){
.flight-to{
margin: 8px;
margin-bottom: 12px;
transition: all 0.2s;
}
.flight-to:hover{
background: #FFF;
box-shadow: 0 6px 31px rgba(0,0,0,.18);
transition: all 0.2s;
}
}
@media screen and (min-width: 1050px){
.flight-to{
padding: 0px;
border-radius: 7px;
box-shadow: 0 3px 21px rgba(0,0,0,.1);
}
}
.map-true .flight-to{
position: relative;
white-space: nowrap;
padding: 12px;
padding-left: 20px;
padding-right: 20px;
margin: 10px;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 0 3px 21px rgba(0,0,0,.1);
border-radius: 5px;
cursor: pointer;
transition: all 0s;
}
/*-------------
FLIGHT TO CONTAINER
--------------*/
.flight-to-container{
padding-top: 5px;
padding-bottom: 5px;
}
@media screen and (min-width: 1050px){
.flight-to-oneway .flight-to-container{
padding-top: 18px;
}
}
/*-------------
FLIGHT TO AIRLINE LOGOS
--------------*/
.flight-to-airline-logos{
position: relative;
display: inline-block;
vertical-align: top;
/*
background: #F7F7F7;
*/
border-radius: 3px;
width: 32px;
height: 32px;
margin-top: 16px;
margin-right: 0px;
/*
overflow: hidden;
*/
}
/*
@media screen and (min-width: 1025px){
.flight-to-airline-logos{
cursor: help;
}
}
*/
@media screen and (min-width: 1050px){
.flight-to-airline-logos{
margin-left: 20px;
margin-right: 0px;
}
}
.map-true .flight-to-airline-logos{
margin-left: 0px;
}
/*-------------
FLIGHT TO AIRLINE TOOLTIP
--------------*/
.flight-to-airline-logos .tooltip {
visibility: hidden;
background-color: #333333;
color: #fff;
font-size: 13px;
line-height: 17px;
text-align: left;
border-radius: 5px;
padding: 5px 10px;
position: absolute;
z-index: 1;
top: 55px;
left: 50%;
transform: translate(-50%, 0px);
opacity: 0;
text-transform: capitalize;
}
.flight-to-airline-logos .tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #333333 transparent;
}
@media screen and (min-width: 1025px){
.flight-to-airline-logos:hover .tooltip {
visibility: visible;
opacity: 1;
top: 45px;
transition: all 0.3s;
}
}
/*-------------
FLIGHT TO AIRLINE LOGOS
--------------*/
.nth-1,
.nth-2,
.nth-3,
.nth-4{
position: absolute;
display: none;
border-radius: 3px;
}
/*-------------
1 AIRLINE LOGO
--------------*/
.nth-1{
position: absolute;
top: 0px;
left: 0px;
display: inline-block;
vertical-align: top;
width: 32px;
line-height: 32px;
height: 32px;
border-radius: 5px;
}
.logos-2 .nth-1,
.logos-3 .nth-1,
.logos-4 .nth-1{
width: 15px;
line-height: 15px;
height: 15px;
border-radius: 3px;
}
.logos-2 .nth-2{
position: absolute;
bottom: 0px;
right: 0px;
display: inline-block;
vertical-align: top;
width: 15px;
line-height: 15px;
height: 15px;
}
/*-------------
3 AND 4 AIRLINE LOGOS
--------------*/
.logos-3 .nth-2,
.logos-4 .nth-2{
position: absolute;
top: 0px;
right: 0px;
display: inline-block;
vertical-align: top;
width: 15px;
line-height: 15px;
height: 15px;
}
.logos-3 .nth-3,
.logos-4 .nth-3{
position: absolute;
bottom: 0px;
left: 0px;
display: inline-block;
vertical-align: top;
width: 15px;
line-height: 15px;
height: 15px;
}
.logos-4 .nth-4{
position: absolute;
bottom: 0px;
right: 0px;
display: inline-block;
vertical-align: top;
width: 15px;
line-height: 15px;
height: 15px;
}
/*-------------
FLIGHT TO DEPARTURE, FLIGHTROUTE, ARRIVAL BOXES
--------------*/
.flight-to-departure,
.flight-to-flight,
.flight-to-arrival{
display: inline-block;
vertical-align: top;
width: calc(33.33% - 10px);
}
@media screen and (min-width: 1050px){
.flight-to-departure,
.flight-to-flight,
.flight-to-arrival{
width: calc(33.33% - 20px);
}
}
.map-true .flight-to-departure,
.map-true .flight-to-flight,
.map-true .flight-to-arrival{
width: calc(33.33% - 10px);
}
.flight-to-departure,
.flight-to-arrival{
padding-top: 7px;
text-align: center;
}
.flight-to-flight{
padding-top: 4px;
text-align: center;
}
@media screen and (min-width: 1050px){
.flight-to-flight{
}
}
/*-------------
FLIGHT TO DATE
--------------*/
.flight-to-dates{
position: relative;
display: inline-block;
vertical-align: top;
padding-top: 16px;
padding-bottom: 4px;
float: left;
}
.flight-to-oneway .flight-to-dates{
padding-top: 18px;
}
@media screen and (min-width: 1050px){
.flight-to-dates{
padding-top: 0px;
}
.flight-to-oneway .flight-to-dates{
padding-top: 0px;
padding-bottom: 2px;
}
}
.map-true .flight-to-dates{
padding-top: 16px;
padding-bottom: 4px;
}
.map-true .flight-to-oneway .flight-to-dates{
padding-top: 18px;
}
.flight-to-date{
display: block;
font-size: 13px;
font-weight: 500;
color: #333333; /* #333333; */
line-height: 22px;
text-align: left;
}
.flight-to-oneway .flight-to-date{
line-height: 34px;
}
.flight-to-day{
font-size: 13px;
line-height: 22px;
font-weight: 400;
color: #757575;
padding-left: 5px;
}
/*-------------
FLIGHT TO ROUTE
--------------*/
.flight-to-route{
position: relative;
height: 12px;
}
/*-------------
FLIGHT TO STROKE
--------------*/
.flight-to-stroke{
position: absolute;
width: calc(100% - 2px);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #DDDDDD;
text-align: center;
}
.direct .flight-to-stroke{
border: 1px solid #DDDDDD; /* #00d775; GREEN */
}
/*-------------
FLIGHT TO STOP
--------------*/
.flight-to-stop{
position: relative;
display: inline-block;
vertical-align: top;
background: #DDDDDD; /* #ff5452; RED */
border: 3px solid #fff;
/*
width: 7px;
height: 7px;
*/
width: 6px;
height: 6px;
border-radius: 100px;
margin-left: 4px;
margin-right: 4px;
}
.direct .flight-to-stop{
visibility: hidden;
}
/*-------------
FLIGHT TO FLIGHT DURATION
--------------*/
.flight-to-duration,
.flight-to-stops{
font-size: 12px;
color: #333333; /* #757575; */
line-height: 22px;
text-align: center;
}
.flight-to-stops{
color: #ff5452; /* RED */
}
.direct .flight-to-stops{
color: #00d775; /* GREEN */
}
/*-------------
FLIGHT TO DEPARTURE / ARRIVAL TIME
--------------*/
.flight-to-time{
display: block;
font-size: 22px;
color: #333333;
line-height: 28px;
font-weight: 400;
text-align: center;
}
.flight-to-airport{
position: relative;
font-size: 14px;
color: #757575;
line-height: 24px;
font-weight: 400;
text-align: center;
}
@media screen and (min-width: 1025px){
.flight-to-airport{
cursor: help;
}
}
/*-------------
AIRPORT TOOLTIP
--------------*/
.flight-to-airport .tooltip {
visibility: hidden;
background-color: #333333;
color: #fff;
font-size: 13px;
text-align: center;
border-radius: 5px;
padding: 2px 10px;
position: absolute;
z-index: 1;
top: 40px;
left: 50%;
transform: translate(-50%, 0px);
opacity: 0;
}
.flight-to-airport .tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #333333 transparent;
}
@media screen and (min-width: 1025px){
.flight-to-airport:hover .tooltip{
/*
.flight-to-departure:hover .tooltip,
.flight-to-arrival:hover .tooltip {
*/
visibility: visible;
opacity: 1;
top: 30px;
transition: all 0.3s;
}
}
.different .flight-to-airport{
color: #d21c1c;
background: rgba(255,84,82,.2);
line-height: 24px;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
border-radius: 5px;
}
/*-------------
FLIGHT TO INFO
--------------*/
.flight-to-info{
padding-top: 0px;
padding-bottom: 12px;
}
@media screen and (min-width: 1050px){
.flight-to-info{
display: inline-block;
vertical-align: top;
width: 66.67%;
padding-top: 12px;
padding-bottom: 12px;
}
}
.map-true .flight-to-info{
display: block;
width: auto;
padding-top: 0px;
padding-bottom: 12px;
}
/*-------------
FLIGHT TO SELECT
--------------*/
.flight-to-select{
position: relative;
border-top: 1px dashed #DDD;
white-space: nowrap;
overflow: hidden;
}
@media screen and (min-width: 1050px){
.flight-to-select{
display: inline-block;
vertical-align: top;
border: none;
border-left: 1px dashed #DDD;
width: calc(33.33% - 1px);
padding-top: 3px;
padding-bottom: 3px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.flight-to-oneway .flight-to-select{
margin-top: 20px;
margin-bottom: 20px;
}
}
.map-true .flight-to-select{
position: relative;
display: block;
width: auto;
border: none;
border-top: 1px dashed #DDD;
padding: 0px;
margin: 0px;
text-align: left;
}
.flight-to-airfare{
display: inline-block;
vertical-align: top;
float: right;
text-align: center;
padding-top: 21px;
padding-bottom: 5px;
}
.flight-to-oneway .flight-to-airfare{
padding-top: 18px;
}
@media screen and (min-width: 1050px){
.flight-to-airfare{
width: 100%;
padding-top: 12px;
padding-bottom: 0px;
}
.flight-to-oneway .flight-to-airfare{
padding-top: 0px;
padding-bottom: 8px;
}
}
.map-true .flight-to-airfare{
width: auto;
padding-top: 21px;
padding-bottom: 5px;
}
.map-true .flight-to-oneway .flight-to-airfare{
padding-top: 18px;
}
.flight-to-price{
display: inline-block;
vertical-align: top;
font-size: 17px;
font-weight: 600;
line-height: 22px;
padding: 6px;
padding-left: 20px;
padding-right: 20px;
border-radius: 100px;
/*
color: #007CFF;
background: #F0F0F7;
*/
background: -webkit-gradient(linear,left top,left bottom,from(#00d775),to(#00bd68));
background: -webkit-linear-gradient(top,#00d775,#00bd68);
background: -o-linear-gradient(top,#00d775 0,#00bd68 100%);
background: linear-gradient(-180deg,#00d775,#00bd68);
color: #FFF;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media screen and (min-width: 1050px){
.flight-to-price:hover{
background: #00BD68;
}
}
/*
@media screen and (min-width: 1050px){
.flight-to-price{
font-size: 19px;
padding: 6px;
padding-top: 7px;
padding-left: 20px;
padding-right: 20px;
}
}
*/
.flight-to-days{
display: inline-block;
vertical-align: top;
font-size: 15px;
font-weight: 500;
line-height: 22px;
padding: 5px;
padding-top: 6px;
color: #333333;
padding-right: 15px;
}
.flight-to-days.desktop{
display: none;
}
@media screen and (min-width: 1050px){
.flight-to-days.desktop{
display: inline-block;
vertical-align: top;
font-size: 15px;
font-weight: 500;
line-height: 18px;
padding: 0px;
padding-bottom: 10px;
}
.flight-to-days.mobile{
display: none;
}
}
.map-true .flight-to-days.desktop{
display: none;
}
.map-true .flight-to-days.mobile{
display: inline-block;
vertical-align: top;
}
/*-------------
WIKIVOYAGE (OFF IN HTML)
--------------*/
.wiki{
display: none;
}
@media screen and (min-width: 1250px){
.wiki{
position: fixed;
-webkit-transform: translatez(0);
top: 120px;
right: 0px;
display: inline-block;
vertical-align: top;
width: calc(100% - 901px);
height: calc(100% - 120px);
/*
display: none;
*/
/* smooth scroll iphone*/
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
.wiki-image{
margin-top: 35px;
margin-left: 45px;
width: 300px;
height: 220px;
}
.wiki-image img{
display: inline-block;
vertical-align: middle;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.wiki h3{
font-size: 30px;
padding-left: 45px;
padding-top: 30px;
font-weight: 600;
}
.wiki h4{
font-size: 20px;
padding-top: 2px;
padding-left: 45px;
font-weight: 300;
color: #757575;
/*
padding-bottom: 19px;
border-bottom: 1px solid #DDDDDD;
*/
}
.city-info p{
position: relative;
font-size: 16px;
line-height: 22px;
padding-top: 20px;
padding-left: 45px;
padding-right: 45px;
font-weight: 300;
color: #333333;
text-align: justify;
}
.city-info br {
display: none;
}
.wikilink a{
position: relative;
display: inline-block;
vertical-align: top;
font-size: 13px;
font-weight: 300;
color: #757575;
padding-top: 10px;
padding-bottom: 30px;
margin-left: 45px;
font-weight: 300;
color: #757575;
font-style: italic;
}
.wiki a:hover{
color: #333333;
}
/*-------------
DESTINATION CONTAINER
--------------*/
.city{
font-size: 17px;
display: block;
font-weight: 500;
line-height: 22px;
}
/*
@media screen and (min-width: 1025px){
.city{
font-size: 20px;
line-height: 26px;
}
}
*/
.country{
font-size: 14px;
display: block;
color: #757575;
line-height: 22px;
font-weight: 400;
}
/*
@media screen and (min-width: 1025px){
.country{
font-size: 15px;
color: rgba(256,256,256,0.7);
display: inline-block;
}
}
*/
.flag{
padding-top: 6px;
display: inline-block;
vertical-align: top;
line-height: 22px;
}
@media screen and (min-width: 1025px){
.flag{
padding-top: 1px;
line-height: 20px;
height: 28px;
}
}
.flag img{
width: 17px;
}
.cheap-flight{
position: relative;
white-space: nowrap;
padding: 12px;
padding-left: 20px;
padding-right: 20px;
border-bottom: 1px solid #DDDDDD; /*#C8C7CC*/
border-bottom: 0.5px solid #DDDDDD; /*#C8C7CC*/
overflow: hidden;
display: none;
cursor: pointer;
}
/*
.cheap-flight:last-child{
border: none;
}
*/
.cheap-flight.show{
display: block;
}
.cheap-flight:hover{
background: #F9F9F9;
}
@media screen and (min-width: 1025px){
.cheap-flight{
padding: 0px;
border: none;
margin: 8px;
margin-bottom: 30px;
width: calc(100% - 16px);
border-radius: 10px;
box-shadow: 0 6px 21px rgba(0,0,0,.1);
}
.cheap-flight.show{
display: inline-block;
vertical-align: top;
}
.cheap-flight:hover{
background: #FFF;
box-shadow: 0 6px 31px rgba(0,0,0,.18);
}
}
@media screen and (min-width: 800px){
.cheap-flight{
width: calc(50% - 16px);
}
}
@media screen and (min-width: 1050px){
.cheap-flight{
width: calc(33.33% - 16px);
}
}
@media screen and (min-width: 1400px){
.cheap-flight{
width: calc(25% - 16px);
}
}
@media screen and (min-width: 1700px){
.cheap-flight{
width: calc(20% - 16px);
}
}
@media screen and (min-width: 2000px){
.cheap-flight{
width: calc(16.666% - 16px);
}
}
@media screen and (min-width: 2400px){
.cheap-flight{
width: calc(14.2857% - 16px);
}
}
.map-true .cheap-flight{
position: relative;
white-space: nowrap;
padding: 12px;
padding-left: 20px;
padding-right: 20px;
border-bottom: 1px solid #DDDDDD; /*#C8C7CC*/
border-bottom: 0.5px solid #DDDDDD; /*#C8C7CC*/
overflow: hidden;
cursor: pointer;
margin: 0px;
width: calc(100% - 40px);
border-radius: 0px;
box-shadow: none;
}
.destination-background{
display: none;
}
/*
@media screen and (min-width: 1025px){
.destination-background{
display: block;
position: absolute;
top: 50%;
left: 0px;
right: 0px;
bottom: 0px;
background: -webkit-linear-gradient(180deg, rgba(256,256,256,0), rgba(0,0,0,0.5) 80%);
background: -moz-linear-gradient(180deg, rgba(256,256,256,0), rgba(0,0,0,0.5) 80%);
background: linear-gradient(180deg, rgba(256,256,256,0), rgba(0,0,0,0.5) 80%);
}
}
*/
.destination-image{
position: relative;
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #F0F0F7;
overflow: hidden;
margin-right: 15px;
border-radius: 12px;
}
@media screen and (min-width: 1025px){
.destination-image{
width: 100%;
padding-top: 85%;
/*
height: 300px;
*/
margin: 0px;
/*
background: #333333;
*/
border-radius: 0px;
}
}
.map-true .destination-image{
position: relative;
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #F0F0F7;
overflow: hidden;
margin-right: 15px;
border-radius: 12px;
padding-top: 0px;
}
.destination-image img{
position: absolute;
top: 0px;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
opacity: 1;
border-radius: 12px;
}
@media screen and (min-width: 1025px){
.destination-image img{
/*
opacity: 0.9;
*/
opacity: 1;
transition: 0.3s ease-in-out;
border-radius: 0px;
}
.cheap-flight:hover .destination-image img{
opacity: 1;
transition: 0.3s ease-in-out;
}
}
.destination{
position: relative;
display: inline-block;
vertical-align: top;
padding-top: 8px;
}
@media screen and (min-width: 1025px){
.destination{
position: relative;
display: block;
padding-top: 12px;
padding-left: 15px;
padding-bottom: 2px;
/*
left: 0px;
right: 0px;
bottom: 8px;
position: absolute;
color: #FFF !important;
text-shadow: rgba(0, 0, 0, 0.5) 0px 3px 10px, rgba(0, 0, 0, 0.25) 0px 6px 20px;
/*
text-align: center;
top: 50%;
left: 50%;
bottom: auto;
transform: translate(-50%, -50%);
*/
}
}
.map-true .destination{
position: relative;
display: inline-block;
vertical-align: top;
padding: 0px;
padding-top: 8px;
}
.airfare{
position: absolute;
display: inline-block;
vertical-align: top;
top: 12px;
right: 20px;
text-align: center;
padding-top: 21px;
}
@media screen and (min-width: 1025px){
.airfare{
position: absolute;
top: auto;
bottom: 13px;
}
}
.map-true .airfare{
position: absolute;
display: inline-block;
vertical-align: top;
top: 12px;
bottom: auto;
right: 20px;
text-align: center;
padding-top: 21px;
}
.price{
font-size: 17px;
display: block;
font-weight: 600;
line-height: 22px;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
border-radius: 100px;
color: #007CFF;
background: #F0F0F7;
}
@media screen and (min-width: 1025px){
/*
.price{
background: rgba(256,256,256,0.2);
color: #FFF;
transition: 0.3s ease-in-out;
}
*/
.cheap-flight:hover .price{
background: #007CFF;
color: #FFFFFF;
transition: 0.3s ease-in-out;
}
}
.flight-type{
font-size: 10px;
color: #757575;
line-height: 22px;
}
@media screen and (min-width: 1025px){
.flight-type{
/*
color: rgba(256,256,256,0.7);
*/
margin-top: -5px;
}
}
/*-------------
LOADER
--------------*/
.loader{
text-align: center;
display: none;
padding-top: 50px;
background: #FFFFFF;
}
.loader-2{
text-align: center;
display: none;
padding-top: 150px;
padding-bottom: 150px;
background: #FFFFFF;
}
.loader-2.show{
display: block;
}
.loader.to{
padding-top: 0px;
}
@media screen and (min-width: 1025px){
.loader,
.loader.to{
padding-top: 100px;
}
}
.spinner {
margin-left: auto;
margin-right: auto;
text-align: center;
border: 4px solid #F2F2F2;
border-top: 4px solid #FF6259;
border-top: 4px solid #007CFF;
border-radius: 50%;
width: 30px;
height: 30px;
-webkit-animation: spin 0.45s linear infinite;
-moz-animation: spin 0.45s linear infinite;
-o-animation: spin 0.45s linear infinite;
animation: spin 0.45s linear infinite;
}
@media screen and (min-width: 1025px){
.spinner {
width: 28px;
height: 28px;
}
}
.sort-spinner{
border: 3px solid #F2F2F2;
border-top: 3px solid #DDDDDD;
border-radius: 50%;
width: 11px;
height: 11px;
margin-top: 1px;
-webkit-animation: spin 0.45s linear infinite;
-moz-animation: spin 0.45s linear infinite;
-o-animation: spin 0.45s linear infinite;
animation: spin 0.45s linear infinite;
}
.show-tickets-spinner {
position: relative;
display: inline-block;
vertical-align: top;
margin: 5px;
margin-top: 15px;
border: 3px solid rgba(256,256,256,0.2);
border-top: 3px solid #FFFFFF;
border-radius: 50%;
width: 11px;
height: 11px;
-webkit-animation: spin 0.45s linear infinite;
-moz-animation: spin 0.45s linear infinite;
-o-animation: spin 0.45s linear infinite;
animation: spin 0.45s linear infinite;
}
.validity-spinner {
position: absolute;
top: 3.5px;
right: 4px;
display: inline-block;
vertical-align: top;
border: 3px solid #F2F2F2;
border-top: 3px solid #DDDDDD;
border-radius: 50%;
width: 11px;
height: 11px;
-webkit-animation: spin 0.45s linear infinite;
-moz-animation: spin 0.45s linear infinite;
-o-animation: spin 0.45s linear infinite;
animation: spin 0.45s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*-------------
POPUP
--------------*/
.popup{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 9999999;
display: none;
}
.popup.dates-popup{
z-index: 99999991;
}
.route-popup{
display: block;
visibility: hidden;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
.route-popup.show{
opacity: 1;
transform: translateY(0px);
visibility: visible;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
.route-popup.hide{
opacity: 0;
transform: translateY(100vh);
visibility: hidden;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
@media screen and (min-width: 600px){
.popup{
background: rgba(0,0,0,0.75);
}
.popup.from-to{
background: rgba(0,0,0,0.75);
}
.route-popup.hide{
opacity: 0;
transform: translateY(0px);
}
}
@media screen and (min-width: 1025px){
.route-popup{
background: rgba(0,0,0,0);
z-index: 99999;
background: #FFFFFF;
left: 0px;
right: auto;
top: 76px;
/*
bottom: auto;
*/
bottom: 0px;
width: 380px;
display: block;
visibility: hidden;
/*
border-radius: 0px 0px 5px 0px;
*/
}
.route-popup.show{
visibility: visible;
opacity: 1;
/*
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
*/
transform: translate(0px, 0px);
}
.route-popup.hide{
transform: translate(-380px, 0px);
visibility: visible;
opacity: 1;
}
}
.popup-container{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: #fff;
/*
overflow: auto;
*/
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.5);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.5);
box-shadow: 0 0 20px rgba(0,0,0,0.5);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#login-popup,
#signup-popup{
z-index: 1;
}
#session-popup{
height: auto;
text-align: center;
opacity: 0.95;
}
#use-here-popup{
height: auto;
top: auto;
bottom: 0px;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}
.popup-container.show{
transform: translateY(0px);
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
.popup-container.hide{
transform: translateY( calc(100vh + 20px) );
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
@media screen and (min-width: 600px){
.popup-container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: calc(100vh - 50px);
border-radius: 8px;
overflow: hidden;
/*
position: relative;
text-align: left;
display: inline-block;
vertical-align: middle;
width: 500px;
max-height: 90vh;
border-radius: 4px;
overflow: auto;
/* overflow-y: overlay; */
}
.popup-container:not(#menu-popup){
max-height: 750px;
}
#login-popup,
#signup-popup{
max-height: 650px;
}
#session-popup{
height: auto;
text-align: center;
opacity: 0.95;
}
#use-here-popup{
position: absolute;
top: 50%;
left: 50%;
height: auto;
width: 450px;
bottom: auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
#currency-popup,
#menu-popup{
top: 0px;
bottom: 0px;
left: auto;
right: 0px;
height: auto;
border-radius: 0px;
transform: translate(0px, 0px);
}
.popup-container.show{
transform: translate(-50%, -50%);
}
#currency-popup.show,
#menu-popup.show{
transform: translate(0px, 0px);
}
.popup-container.hide{
transform: translate(-50%, 100vh);
}
#currency-popup.hide,
#menu-popup.hide{
transform: translate(450px, 0px);
}
.show .popup-container{
transform: translate(-50%, -50%);
}
.hide .popup-container{
transform: translate(-50%, 100vh);
}
#from-popup,
#to-popup{
width: auto;
max-width: 410px;
height: auto !important;
bottom: auto !important;
-webkit-transition : all 0s ease-in-out !important;
-moz-transition : all 0s ease-in-out !important;
-ms-transition : all 0s ease-in-out !important;
-o-transition : all 0s ease-in-out !important;
transition : all 0s ease-in-out !important;
}
#from-popup.show,
#to-popup.show{
display: block;
top: 60px;
left: 20px;
right: 20px;
transform: translate(0px, 0px);
-webkit-transition : all 0s ease-in-out !important;
-moz-transition : all 0s ease-in-out !important;
-ms-transition : all 0s ease-in-out !important;
-o-transition : all 0s ease-in-out !important;
transition : all 0s ease-in-out !important;
}
#to-popup.show{
top: 100px;
}
#from-popup.hide,
#to-popup.hide{
display: none;
-webkit-transition : all 0s ease-in-out !important;
-moz-transition : all 0s ease-in-out !important;
-ms-transition : all 0s ease-in-out !important;
-o-transition : all 0s ease-in-out !important;
transition : all 0s ease-in-out !important;
}
}
@media screen and (min-width: 1025px){
.popup-container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 64.5vh;
overflow: hidden;
}
#login-popup,
#signup-popup{
height: 100%;
max-height: 650px;
/*
min-height: 510px;
*/
}
#use-here-popup{
height: auto;
width: 450px;
bottom: auto;
}
.popup-container.show{
transform: translate(-50%, -50%);
}
.popup-container.hide{
transform: translate(-50%, 100vh);
}
.route-popup .popup-container#route-info-popup{
position: absolute;
top: 0px;
left: 0px;
right: auto;
bottom: auto;
bottom: 0px;
/*
width: 100%;
*/
width: 380px;
height: auto;
max-height: 100%;
/*
border-radius: 0px 0px 5px 0px;
*/
border-radius: 0px;
transform: translate(0px, 0px);
/*
overflow: visible;
*/
overflow-x: hidden;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
#from-popup.show,
#to-popup.show{
display: block;
top: 13px;
left: 380px;
right: auto;
transform: translate(0px, 0px);
}
#to-popup.show{
left: calc(380px + ((100% - 560px) / 2));
}
}
@media screen and (min-width: 1216px){
#to-popup.show{
display: block;
left: auto;
left: calc(380px + 335px);
}
}
/*-------------
POPUP HEADER
--------------*/
.popup-header{
/*
background: -webkit-linear-gradient(0deg, #ffffff, #f7f7f7);
background: -moz-linear-gradient(0deg, #ffffff, #f7f7f7);
background: linear-gradient(0deg, #ffffff, #f7f7f7);
*/
padding-top: 45px;
padding-bottom: 15px;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
z-index: 9;
}
.flc-app #route-info-header{
position: fixed;
background: #fff;
left: 0px;
right: 0px;
top: 0px;
}
.small-height #route-info-header{
display: none;
}
@media screen and (min-width: 600px){
#from-popup .popup-header,
#from-popup .popup-close,
#to-popup .popup-header,
#to-popup .popup-close{
display: none !important;
}
}
@media screen and (min-width: 1025px){
.popup-header{
padding-top: 32px;
padding-bottom: 15px;
}
.route-popup .popup-header{
display: none;
}
}
.popup-header h3{
font-size: 30px;
padding-left: 25px;
}
@media screen and (min-width: 1025px){
.popup-header h3{
font-size: 24px;
padding-left: 20px;
}
}
/*-------------
CLOSE POPUP
--------------*/
.popup-close{
position: absolute;
right: 8px;
top: 8px;
height: 55px;
width: 55px;
border-radius: 100px;
text-align: center;
z-index: 9999;
color: #757575;
/*
background: #fff;
*/
}
/*
.mobile-true #dates-popup .popup-close{
background: #FFFFFF;
}
*/
.mobile-false .popup-close:hover{
background: #F7F7F7;
color: #333333;
}
@media screen and (min-width: 1025px){
.popup-close{
top: 11px;
}
}
@media screen and (min-width: 1025px){
.route-popup .popup-close{
display: none;
}
}
.popup-close-icon{
font-size: 24px;
line-height: 55px;
}
/*
@media screen and (min-width: 1025px){
.route-popup .popup-close-icon{
line-height: 45px;
}
}
*/
/*-------------
SAVE FILTERS
--------------*/
.save-filters{
position: fixed;
-webkit-transform: translatez(0);
right: 25px;
bottom: 20px;
border-radius: 7px;
text-align: center;
z-index: 9;
color: #FFFFFF;
background: #007CFF; /* 00bffc */
/* DESTIGOGO color
background: #FF8211;
background: -webkit-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -o-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -moz-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: linear-gradient(45deg, #FF3363, #FF8211 90%);
*/
}
@media screen and (min-width: 1025px){
.save-filters{
position: absolute;
right: 15px;
bottom: 15px;
}
#stops-popup .save-filters,
#stopover-time-popup .save-filters{
display: none;
}
.save-filters:hover{
background: #00AAFF;
}
}
.save{
padding: 35px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 17px;
line-height: 44px;
color: #FFFFFF;
font-weight: 500;
}
/*-------------
POPUP CONTENT
--------------*/
.popup-content{
position: relative;
height: calc(100% - 128px); /* 100% - 97.5px height of popup-header + padding 30px */
padding-bottom: 30px;
/* smooth scroll iphone*/
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: 0px;
}
#airlines-popup .popup-content{
height: calc(100% - 158px);
padding-bottom: 0px;
}
#signup-popup .popup-content,
#login-popup .popup-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 50px);
padding: 20px 25px;
height: auto;
max-height: calc(100% - 40px);
}
#signup-popup .payment-body,
#signup-popup .payment-success-body{
display: none;
}
#session-popup .popup-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 50px);
padding: 0px 25px;
height: auto;
}
#menu-popup .popup-content{
background: #F7F7F7;
}
#use-here-popup .popup-content{
padding: 25px 28px;
height: auto;
}
@media screen and (min-width: 600px){
#from-popup .popup-content,
#to-popup .popup-content{
height: auto;
padding-bottom: 0px;
}
}
.route-popup .popup-content{
height: calc(100% - 30px);
}
.flc-app .route-popup .popup-content{
margin-top: 97px;
height: calc(100% - 128px);
}
.small-height .route-popup .popup-content{
margin-top: 0px;
height: calc(100% - 30px);
}
@media screen and (min-width: 1025px){
.popup-content{
height: calc(100% - 70px); /* 100% - 69.5px height of popup-header*/
padding-bottom: 0px;
}
#menu-popup .popup-content{
background: #F7F7F7;
}
#use-here-popup .popup-content{
height: auto;
}
.route-popup .popup-content{
position: absolute;
margin-top: 0px;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
height: auto;
/*
max-height: calc(100vh - 96px);
padding-bottom: 20px;
*/
/*
max-height: calc(100vh - 91px);
padding-bottom: 15px;
*/
max-height: calc(100vh - 76px);
overflow: visible;
overflow-y: auto;
overflow-x: hidden;
}
.flc-app .route-popup .popup-content{
height: auto;
}
.small-height .route-popup .popup-content{
height: auto;
}
}
/*
.popup-content::-webkit-scrollbar{
width: 0px;
height: 0px;
}
@media screen and (min-width: 1025px){
.popup-content::-webkit-scrollbar{
width: 12px;
height: 0px;
}
.popup-content::-webkit-scrollbar-track{
border-radius: 0px;
background: #EEEEEE;
}
.popup-content::-webkit-scrollbar-thumb{
border-radius: 0px;
background: #C1C1C1;
border-radius: 0px;
}
}
*/
.popup-content.squares{
position: relative;
padding: 15px;
padding-bottom: 15px;
}
@media screen and (min-width: 1025px){
.popup-content.squares{
padding: 10px;
padding-bottom: 10px;
height: calc(100% - 90px); /* 100% - 69.5px height of popup-header + padding 25px */
}
}
/*-------------
POPUP OPTIONS
--------------*/
.popup-option{
position: relative;
padding: 25px;
padding-top: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #DDDDDD;
/*
border-bottom: 0.5px solid #DDDDDD;
*/
/*
white-space: nowrap;
*/
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
#filters-popup .popup-option,
#menu-popup .popup-option{
padding-top: 15px;
padding-bottom: 15px;
}
#menu-popup .popup-option{
background: #FFFFFF;
}
@media screen and (min-width: 1025px){
.popup-option{
padding: 20px;
}
}
.popup-option:last-child{
border: none;
}
.link-btn{
position: relative;
display: block;
border-bottom: 1px solid #DDDDDD;
background: #FFFFFF;
}
.link-btn:last-child{
margin-bottom: 50px;
}
.popup-option.login-btn::after,
.link-btn::after {
position: absolute;
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
height: 6px;
width: 6px;
top: 21px;
right: 21px;
transform: rotate(45deg);
color: #C8C7CC;
}
@media screen and (min-width: 1025px){
.popup-option.login-btn:hover::after,
.link-btn:hover::after {
color: #007cff;
}
}
/*
.popup-option.company{
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
}
*/
.popup-option.company i{
width: 22px;
}
.popup-option.company .setting-title{
font-size: 15px;
line-height: 19px;
font-weight: 500;
}
/*
@media screen and (min-width: 1025px){
.popup-option.company{
border-bottom: none;
padding-top: 12px !important;
padding-bottom: 11px !important;
}
}
*/
.popup-option.company.about .setting-title{
height: 19px;
}
.different-airports-mobile .popup-option:last-child{
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
}
#regions:hover,
#anywhere:hover{
background: #F7F7F7;
color: #333333;
}
.squares .popup-option{
position: relative;
display: inline-block;
vertical-align: top;
padding: 0px;
width: calc(50% - 20px);
height: 85px;
margin: 10px;
border: none;
border-radius: 12px;
white-space: nowrap;
background: #DDDDDD;
text-align: center;
overflow: hidden;
}
.squares img{
display: inline-block;
vertical-align: middle;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.squares .popup-option:hover{
opacity: 0.7;
}
.option{
font-size: 16px; /* 17px */
font-weight: 300;
line-height: 19px;
color: #333333; /* 575757 */
}
.option strong{
font-weight: 300;
color: #757575;
}
.active .option strong{
font-weight: 600;
}
.squares .option{
position: absolute;
top: 51%;
left: 50%;
transform: translate(-50%, -50%);
color: #FFFFFF;
font-weight: 600;
font-size: 19px;
line-height: 85px;
}
@media screen and (min-width: 1025px){
.option{
font-size: 16px;
}
}
.option-black{
font-size: 17px;
font-weight: 500;
line-height: 19px;
color: #333333;
}
@media screen and (min-width: 1025px){
.option-black{
font-size: 16px;
}
}
/*-------------
POPUP TITLE
--------------*/
.popup-title{
padding: 25px;
padding-top: 30px;
padding-bottom: 7px;
background: #F7F7F7;
white-space: nowrap;
/*
border-bottom: 1px solid #C8C7CC;
border-bottom: 0.5px solid #C8C7CC;
*/
border-bottom: 1px solid #DDDDDD;
/*
border-bottom: 0.5px solid #DDDDDD;
*/
}
@media screen and (min-width: 1025px){
.popup-title{
padding: 20px;
padding-top: 35px;
padding-bottom: 10px;
}
/*
.popup-title.company{
margin-bottom: 8px;
}
*/
}
.popup-title.profile-menu-title{
display: none;
}
.popup-title.profile-menu-title.show{
display: block;
}
.popup-title-value{
font-size: 14px; /* 13px */
font-weight: 500; /* 400 */
color: #757575; /* 8E8E93 - 007CFF */
text-transform: uppercase;
}
.small-logo{
display: inline-block;
vertical-align: top;
height: 28px;
margin-top: -5px;
margin-right: 5px;
}
.popup-title-value b{
font-size: 16px;
line-height: 19px;
font-weight: 700;
letter-spacing: 1px;
text-transform: none;
color: #333333;
}
.popup-title-value b span{
font-weight: 300;
}
/*-------------
FILTERED
--------------*/
.filtered{
font-size: 12px;
letter-spacing: 0.3px;
line-height: 16px;
color: #FFF;
font-weight: 500;
color: #007CFF; /* #FF6259; */
/*
background: #FF8211;
background: -webkit-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -o-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -moz-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: linear-gradient(45deg, #FF3363, #FF8211 90%);
*/
border-radius: 4px;
padding: 5px; /* 8px */
padding-top: 2px;
padding-bottom: 2px;
margin-left: 10px;
margin-top: -1px;
float: right;
display: inline-block;
vertical-align: top;
display: none;
}
/*-------------
POPUP CHECK
--------------*/
.check{
display: inline-block;
vertical-align: top;
float: left;
padding: 0px;
font-weight: 400;
display: inline-block;
vertical-align: top;
margin-top: -4px;
margin-right: 15px;
width: 24px;
padding-top: 1px;
padding-bottom: 1px;
border-radius: 100px;
border: 1px solid #C8C7CC;
line-height: 22px;
text-align: center;
color: rgba(256,256,256,0);
background: rgba(256,256,256,0);
}
#filters-popup .check{
margin-right: 5px;
margin-left: -5px;
border: none;
padding-top: 2px;
padding-bottom: 2px;
}
/*
.currency-option .check,
.duration-option .check{
float: right;
margin-right: 0px;
}
*/
/*-------------
POPUP ACTIVE OPTION
--------------*/
.active .option{
font-weight: 600;
color: #333333;
}
.active .check{
/*
border: none;
width: 26px;
padding-top: 2px;
padding-bottom: 2px;
color: #FFFFFF;
background: #333333;
*/
color: #333333;
background: rgba(256,256,256,0);
border-color: #757575;
}
.squares .active .option{
color: #FFFFFF;
}
/*
.duration-option.active .check,
.currency-option.active .check{
color: #FFF;
background: #007CFF;
border-color: #007CFF;
}
*/
/*-------------
RADIO BUTTON
--------------*/
.radio-button{
font-weight: 500;
color: #333333;
}
/*-------------
AIRPORTS DESKTOP
--------------*/
.airports-desktop{
display: none;
}
.airport-option{
position: relative;
padding: 25px;
padding-top: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
#filters-popup .airport-option{
padding-top: 15px;
padding-bottom: 15px;
}
@media screen and (min-width: 1025px){
.airports-desktop{
position: relative;
display: block;
margin-top: 75px;
padding-left: 12px;
padding-right: 8px;
margin-right: 20px;
/*
max-height: calc(100vh - 407px);
*/
max-height: calc(100vh - 395px);
/* smooth scroll iphone*/
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
display: none !important;
}
/*
.airports-desktop::-webkit-scrollbar{
width: 10px;
height: 10px;
}
.airports-desktop::-webkit-scrollbar-track{
border-radius: 100px;
background: #F1F1F3;
}
.airports-desktop::-webkit-scrollbar-thumb{
border-radius: 100px;
background: #DDDDDD;
}
*/
.airport-option{
position: relative;
white-space: nowrap;
line-height: 22px;
border: 8px solid #FFFFFF;
border-radius: 5px;
padding: 0px;
}
.airport-option .option{
font-size: 13px;
font-weight: 300;
line-height: 22px;
color: #333333;
}
.airport-option:hover {
border-color: #F7F7F7;
background: #F7F7F7;
}
.airport-option.active .option{
font-weight: 500;
color: #333333;
}
.airport-option .check{
font-weight: 400;
display: inline-block;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 20px;
height: 20px;
/*
float: right;
*/
float: left;
margin-right: 10px;
border-radius: 4px;
border: 1px solid #C8C7CC;
line-height: 22px;
text-align: center;
color: rgba(256,256,256,0);
background: rgba(256,256,256,0);
}
.airport-option.active .check{
color: #333333;
border: 1px solid #C8C7CC;
background: #FFFFFF;
}
.airport-option:hover .check{
border: 1px solid #C8C7CC;
}
.airport-option.active:hover .check{
border: 1px solid #C8C7CC;
color: #333333;
}
.airport-option .description{
position: absolute;
right: 0px;
font-size: 13px;
line-height: 22px;
padding: 0px;
padding-top: 1px;
color: #333333;
font-weight: 300;
}
.active .description{
color: #333333;
}
}
/*-------------
INPUT FIELDS
--------------*/
.location{
position: relative;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
}
@media screen and (min-width: 600px){
.location{
border: none;
/*
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
*/
}
}
.location-input{
position: relative;
display: inline-block;
vertical-align: middle;
width: calc(100% - 25px);
padding: 25px;
padding-right: 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: text;
font-size: 17px;
font-weight: 500;
line-height: 19px;
color: #333333;
background: rgba(256,256,256,0);
text-transform: capitalize;
}
.location-input::placeholder{
display: inline-block;
vertical-align: middle;
text-transform: none;
line-height: 19px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (min-width: 600px){
.location-input{
padding: 20px;
}
}
@media screen and (min-width: 1025px){
.location-input{
font-size: 16px;
padding: 15px;
width: 370px;
}
}
/*-------------
AUTOCOMPLETE
--------------*/
.ui-autocomplete{
z-index: 9999999;
position: relative;
padding-top: 1px;
padding-top: 0.5px;
overflow: hidden;
}
@media screen and (min-width: 600px){
/*
.ui-autocomplete{
max-width: 500px;
}
*/
.ui-autocomplete{
position: absolute;
width: calc(100% - 40px) !important;
right: 20px !important;
background: #FFFFFF;
border-radius: 4px;
top: 125px !important;
max-width: 410px !important;
}
.ui-autocomplete.ui-to{
top: 165px !important;
}
}
@media screen and (min-width: 1025px){
.ui-autocomplete,
.ui-autocomplete.ui-to{
/*
position: relative;
*/
max-width: 400px !important;
top: 70px !important;
}
}
.ui-autocomplete li{
position: relative;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 17px;
color: #333333;
padding: 20px 25px;
padding-left: 50px;
border: none;
/*
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
*/
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
@media screen and (min-width: 1025px){
.ui-autocomplete li{
padding: 15px 20px;
padding-left: 45px;
}
}
.ui-autocomplete li:before{
position: absolute;
left: 25px;
top: 20px;
font-family: FontAwesome;
content: "\f072";
display: inline-block;
vertical-align: middle;
font-size: 17px;
line-height: 17px;
-webkit-text-stroke: 1px #FFFFFF;
text-stroke: 1px #FFFFFF;
transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
}
@media screen and (min-width: 1025px){
.ui-autocomplete li:before{
left: 20px;
top: 15px;
}
}
.ui-autocomplete li:last-child{
border: none;
}
.ui-autocomplete li:hover{
background: #F7F7F7
}
.ui-autocomplete li:hover:before{
-webkit-text-stroke: 1px #F7F7F7;
text-stroke: 1px #F7F7F7;
}
/*---------------------
PROGRESS BAR
----------------------*/
#progress-bar {
position: absolute;
top: 0px;
width: 100%;
border-radius: 0px;
text-align: center;
}
@media screen and (min-width: 1025px){
#progress-bar {
top: auto;
bottom: -5px;
}
}
#progress {
width: 0%;
height: 5px;
/*DESTIGOGO color omgedraaid*/
background: #FF3363;
background: -webkit-linear-gradient(45deg, #FF8211, #FF3363 90%);
background: -o-linear-gradient(45deg, #FF8211, #FF3363 90%);
background: -moz-linear-gradient(45deg, #FF8211, #FF3363 90%);
background: linear-gradient(45deg, #FF8211, #FF3363 90%);
background: #007CFF;
/*
box-shadow: 0px 1px 8px rgba(255,98,89,0.5); /*#FF6259;*/
/*
background: #FF6259;
background: #007CFF;
box-shadow: 0px 1px 5px rgba(0,191,252, 0.3); /*#00bffc*/
border-radius: 0px;
animation: pulse 0.7s infinite alternate;
-webkit-animation: pulse 0.7s infinite alternate;
-moz-animation: pulse 0.7s infinite alternate;
-ms-animation: pulse 0.7s infinite alternate;
opacity: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
@keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}
@-webkit-keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}
@-moz-keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}
@-ms-keyframes pulse {
0% { opacity: 1; }
100% { opacity: 0.5; }
}
/*---------------------
AIRPORT LOADER
----------------------*/
.airport-loader{
position: relative;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
width: calc(100% - 30px);
text-align: center;
background: #FFFFFF;
}
@media screen and (min-width: 1025px){
.airport-loader{
margin: 0px;
margin-top: 15px;
/*width: calc(100% - 250px);*/
display: inline-block;
vertical-align: top;
}
}
.airport-loader p{
color: #757575; /* #757575; */
font-size: 16px;
font-weight: 400;
line-height: 24px;
animation: fade 0.7s infinite alternate;
-webkit-animation: fade 0.7s infinite alternate;
-moz-animation: fade 0.7s infinite alternate;
-ms-animation: fade 0.7s infinite alternate;
opacity: 0.1;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
@media screen and (min-width: 1025px){
.airport-loader p{
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
}
@keyframes fade {
0% { opacity: 0.1; }
100% { opacity: 0.5; }
}
@-webkit-keyframes fade {
0% { opacity: 0.1; }
100% { opacity: 0.5; }
}
@-moz-keyframes fade {
0% { opacity: 0.1; }
100% { opacity: 0.5; }
}
@-ms-keyframes fade {
0% { opacity: 0.1; }
100% { opacity: 0.5; }
}
/*-----------------------------
GOOGLE AUTOCOMPLETE STYLING
------------------------------*/
.pac-container {
margin-top: -1px !important;
font-size: 16px !important;
background: #fff !important;
border-radius: 0px !important;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
width: 100% !important;
overflow: hidden !important;
z-index: 99999999999999 !important;
}
@media screen and (min-width: 1025px){
.pac-container{
width: 400px !important;
margin-top: 0px !important;
}
}
.pac-item{
position: relative !important;
font-family: 'Roboto', sans-serif !important;
font-size: 14px!important;
font-weight: 300!important;
line-height: 14px!important;
color: #757575!important;
padding: 25px !important;
border: none !important;
border-top: 1px solid #DDDDDD !important;
border-top: 0.5px solid #DDDDDD !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
white-space: nowrap !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(256,256,256,0) !important;
}
@media screen and (min-width: 1025px){
.pac-item{
padding: 20px !important;
}
}
.pac-item-query{
font-family: 'Roboto', sans-serif !important;
font-size: 17px!important;
font-weight: 300!important;
line-height: 17px!important;
color: #333333!important;
padding: 0px !important;
padding-right: 10px !important;
}
.pac-matched{
font-weight: 300!important;
color: #333333!important;
}
.pac-item:hover,
.pac-item-query:hover,
.pac-matched:hover{
background: #F7F7F7 !important;
}
@media screen and (min-width: 1025px){
.pac-item:active{
background: #F7F7F7 !important;
}
}
@media screen and (min-width: 1025px){
.pac-item-query{
font-size: 16px !important;
}
.pac-matched{
font-size: 16px !important;
}
}
.pac-icon {
display: none !important;
}
.pac-item.pac-item-selected{
background: #F7F7F7 !important;
}
.pac-container:after {
background-image: none !important;
height: 0px !important;
padding: 0 !important;
margin: 0 !important;
}
/*-----------------------------
DATEPICKER STYLING
------------------------------*/
#datepicker{
-webkit-transition: 0.3s -webkit-filter linear;
-moz-transition: 0.3s -moz-filter linear;
-moz-transition: 0.3s filter linear;
-ms-transition: 0.3s -ms-filter linear;
-o-transition: 0.3s -o-filter linear;
transition: 0.3s filter linear, 0.3s -webkit-filter linear;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
#datepicker.blur{
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.dates-overlay{
position: absolute;
-webkit-transform: translatez(0);
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: rgba(0,0,0,0.05);
z-index: 9;
display: none;
}
.dates-overlay-container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: #FFFFFF;
box-shadow: 0 6px 21px rgba(0,0,0,.1);
padding: 20px;
border-radius: 6px;
width: 60%;
}
.dates-option{
position: relative;
text-align: left;
}
.dates-option .slider{
float: right;
}
.dates-option .slider-label{
position: relative;
display: inline-block;
vertical-align: top;
padding: 8px;
padding-left: 0px;
padding-right: 20px;
margin: 5px;
margin: 4.5px;
margin-right: 0px;
font-size: 14px;
line-height: 17px;
font-weight: 500;
border-radius: 5px;
z-index: 9;
}
.dates-continue{
position: relative;
border-radius: 4px;
text-align: center;
background: #4CD964;
background: #00d775;
padding: 35px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 17px;
line-height: 48px;
color: #FFFFFF;
font-weight: 700;
margin-top: 10px;
}
@media screen and (min-width: 1025px){
#dates-popup{
height: 70vh;
}
}
.title{
position: fixed;
-webkit-transform: translatez(0);
top: 0px;
left: 0px;
right: 0px;
}
@media screen and (min-width: 1025px){
.title{
position: absolute;
}
}
#dates-popup .title{
-webkit-transition: 0.3s -webkit-filter linear;
-moz-transition: 0.3s -moz-filter linear;
-moz-transition: 0.3s filter linear;
-ms-transition: 0.3s -ms-filter linear;
-o-transition: 0.3s -o-filter linear;
transition: 0.3s filter linear, 0.3s -webkit-filter linear;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
#dates-popup .title.blur{
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.title h3{
font-size: 30px;
line-height: 34px;
font-weight: 700;
padding: 20px;
padding-top: 45px;
-webkit-transition : all 0.1s linear;
-moz-transition : all 0.1s linear;
-ms-transition : all 0.1s linear;
-o-transition : all 0.1s linear;
transition : all 0.1s linear;
color: #333333;
}
@media screen and (min-width: 1025px){
.title h3{
font-size: 24px;
line-height: 30px;
padding-top: 25px;
padding-bottom: 15px;
}
}
.title.small h3{
padding-top: 20px;
font-size: 26px;
}
@media screen and (min-width: 1025px){
.title.small h3{
padding-top: 25px;
font-size: 24px;
line-height: 29px;
}
}
.sys-datepicker {
position: fixed;
-webkit-transform: translatez(0);
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 0px;
-webkit-transition : all 0.1s;
-moz-transition : all 0.1s;
-ms-transition : all 0.1s;
-o-transition : all 0.1s;
transition : all 0.1s;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
@media screen and (min-width: 1025px){
.sys-datepicker {
position: absolute;
top: 55px;
}
}
.sys-datepicker.small{
top: 115px;
}
@media screen and (min-width: 1025px){
.sys-datepicker.small{
top: 120px;
}
}
.sys-datepicker.dates-selected{
bottom: 62px;
}
.sys-datepicker-content {
width: 100%;
height: 100%;
overflow: hidden;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.sys-datepicker-body {
overflow: auto;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
position: relative;
height: calc(100% - 40px);
clear: left;
width: 100%;
transform: translateY(200px);
-webkit-transition : transform 0.2s ease-out;
-moz-transition : transform 0.2s ease-out;
-ms-transition : transform 0.2s ease-out;
-o-transition : transform 0.2s ease-out;
transition : transform 0.2s ease-out;
}
.sys-datepicker-body.show{
transform: translateY(0px);
}
@media screen and (min-width: 1025px){
.sys-datepicker-body {
width: 100%;
}
}
/*
.sys-datepicker-body::-webkit-scrollbar{
width: 0px;
height: 0px;
}
@media screen and (min-width: 1025px){
.sys-datepicker-body::-webkit-scrollbar{
width: 15px;
height: 0px;
}
.sys-datepicker-body::-webkit-scrollbar-track{
border-radius: 0px;
background: #EEEEEE;
}
.sys-datepicker-body::-webkit-scrollbar-thumb{
border-radius: 0px;
background: #BBBBBB;
border: 2px solid #EEEEEE;
border: 1.5px solid #EEEEEE;
}
}
*/
.sys-datepicker-day,
.sys-datepicker-days-dow,
.sys-datepicker-placeholder {
position: relative;
float: left;
text-align: center;
color: #333333;
}
.past{
cursor: default !important;
}
.sys-datepicker-day span{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 15px;
font-weight: 400;
}
.sys-datepicker-day.past span{
color: #757575;
font-weight: 300;
}
.sys-datepicker-day,
.sys-datepicker-placeholder {
display: table-cell;
vertical-align: middle;
box-sizing: border-box;
cursor: pointer;
border-radius: 0px;
margin-top: 2px;
margin-bottom: 2px;
width: calc( 100vw / 7 );
height: calc((100vw / 7) - 4px);
border-radius: 0px;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
.mobile-false .sys-datepicker-day,
.mobile-false .sys-datepicker-placeholder {
width: calc( (100vw - 17px) / 7 );
height: calc(((100vw - 17px) / 7 ) - 4px);
}
@media screen and (min-width: 600px){
.sys-datepicker-day,
.sys-datepicker-placeholder {
width: calc( 500px / 7);
height: calc((500px / 7) - 4px);
}
.mobile-false .sys-datepicker-day,
.mobile-false .sys-datepicker-placeholder {
width: calc( (500px - 17px) / 7 );
height: calc(((500px - 17px) / 7 ) - 4px);
}
}
@media screen and (min-width: 1025px){
.sys-datepicker-day,
.sys-datepicker-placeholder {
width: calc( 400px / 7 );
height: calc((400px / 7) - 4px);
}
.mobile-false .sys-datepicker-day,
.mobile-false .sys-datepicker-placeholder {
width: calc( (400px - 17px) / 7 );
height: calc(((400px - 17px) / 7 ) - 4px);
}
}
.sys-datepicker-placeholder {
cursor: default;
}
.sys-datepicker-day .bg{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.sys-datepicker-day-today .bg{
position: absolute;
top: 0px;
bottom: 0px;
left: 2px;
right: 2px;
border: 1px solid #DDDDDD;
border-radius: 100px;
}
.sys-datepicker-hover{
color: #333333;
}
.sys-datepicker-hover .bg{
position: absolute;
border: none;
top: 0px;
bottom: 0px;
left: 2px;
right: 2px;
background: #F7F7F7;
border-radius: 100px;
}
.sys-datepicker-hover.daterange .bg{
opacity: 0.2;
}
.sys-datepicker-day-selected{
color: #FFF;
}
.sys-datepicker-day.daterange,
.sys-datepicker-placeholder.daterange,
.sys-datepicker-day-selected.daterange,
.fromDate,
.toDate{
background: #8cdfff;
color: #FFF;
}
.fromDate,
.toDate{
color: #FFF;
}
.sys-datepicker-day-selected .bg{
position: absolute;
border: none;
top: 0px;
bottom: 0px;
left: 2px;
right: 2px;
background: #00bffc;
border-radius: 100px;
}
.fromDate{
border-radius: 100px 0px 0px 100px;
margin-left: 2px;
width: calc( (100vw / 7) - 2px);
}
.mobile-false .fromDate{
width: calc(((100vw - 17px) / 7 ) - 2px);
}
.fromDate span{
margin-left: -1px;
}
@media screen and (min-width: 600px){
.fromDate{
width: calc( (500px / 7) - 2px);
}
.mobile-false .fromDate{
width: calc(((500px - 17px) / 7 ) - 2px);
}
}
@media screen and (min-width: 1025px){
.fromDate{
width: calc( (400px / 7) - 2px);
}
.mobile-false .fromDate{
width: calc(((400px - 17px) / 7 ) - 2px);
}
}
.toDate{
border-radius: 0px 100px 100px 0px;
margin-right: 2px;
width: calc( (100vw / 7) - 2px);
}
.mobile-false .toDate{
width: calc(((100vw - 17px) / 7 ) - 2px);
}
.toDate span{
margin-left: 1px;
}
@media screen and (min-width: 600px){
.toDate{
width: calc( (500px / 7) - 2px);
}
.mobile-false .toDate{
width: calc(((500px - 17px) / 7 ) - 2px);
}
}
@media screen and (min-width: 1025px){
.toDate{
width: calc( (400px / 7) - 2px);
}
.mobile-false .toDate{
width: calc(((400px - 17px) / 7 ) - 2px);
}
}
.fromDate .bg{
left: 0px;
}
.toDate .bg{
right: 0px;
}
.sys-datepicker-header{
position: relative;
}
.sys-datepicker-days{
position: relative;
height: 41px;
border-bottom: 1px solid #DDDDDD;
}
.sys-datepicker-days-dow {
/*
position: relative;
font-size: 13px;
line-height: 19px;
width: calc(100% / 7);
color: #757575;
font-weight: 400;
padding-top: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #C8C7CC;
border-bottom: 0.5px solid #C8C7CC;
*/
position: relative;
width: calc(100% / 7);
text-align: center;
text-transform: lowercase;
letter-spacing: .3px;
font-size: 12px;
line-height: 22px;
color: #757575;
font-weight: 300;
padding-top: 15px;
padding-bottom: 5px;
}
.mobile-false .sys-datepicker-days-dow{
width: calc((100% - 17px) / 7 );
}
@media screen and (min-width: 600px){
.sys-datepicker-days-dow {
width: calc( 500px / 7 );
}
.mobile-false .sys-datepicker-days-dow{
width: calc((500px - 17px) / 7 );
}
}
@media screen and (min-width: 1025px){
.sys-datepicker-days-dow {
width: calc( 400px / 7 );
}
.mobile-false .sys-datepicker-days-dow{
width: calc((400px - 17px) / 7 );
}
.sys-datepicker-days-dow:last-child{
padding-right: 17px;
}
}
.sys-datepicker-month {
position: relative;
width: 100%;
float: left;
/*
background: -webkit-linear-gradient(0deg, #ffffff, #f7f7f7);
background: -moz-linear-gradient(0deg, #ffffff, #f7f7f7);
background: linear-gradient(0deg, #ffffff, #f7f7f7);
*/
}
.sys-datepicker-month-header {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
opacity: 0.5;
*/
padding-top: 15px;
padding-bottom: 2px;
padding-left: 20px;
font-size: 26px;
line-height: 28px;
font-weight: 700;
font-size: 23px;
line-height: 25px;
font-weight: 300;
/*
text-transform: lowercase;
*/
color: #303030;
padding-top: 20px;
}
.sys-datepicker-month-header span{
/*
display: block;
*/
font-size: 15px;
line-height: 17px;
padding-top: 5px;
font-weight: 300;
color: #757575;
padding-left: 3px;
font-size: 13px;
line-height: 17px;
padding-top: 5px;
font-weight: 300;
color: #757575;
}
.sys-datepicker-year {
clear: left;
float: left;
}
.sys-datepicker-buttons {
height: 25px;
padding: 2px 10px;
background: #ccc;
}
.sys-datepicker-buttons:after {
content: "";
width: 100%;
display: inline-block;
}
.sys-datepicker-button {
display: inline-block;
min-width: 20px;
height: 20px;
background: #ccc;
cursor: pointer;
border-radius: 5px;
font-size: .8rem;
line-height: 1.4;
text-align: center
}
.sys-datepicker-button + .sys-datepicker-button {
margin-left: 10px;
}
.sys-datepicker-button-today {
padding-left: 5px;
padding-right: 5px;
}
#dates {
position: fixed;
-webkit-transform: translatez(0);
top: 55px;
left: 0px;
right: 0px;
list-style: none;
font-size: 0px;
padding-top: 10px;
padding-bottom: 10px;
height: 57px;
color: #303030;
}
@media screen and (min-width: 1025px){
#dates{
position: absolute;
top: 60px;
}
}
#dates li {
display: inline-block;
vertical-align: top;
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
width: calc(50% - 40px);
position: relative;
font-size: 24px;
line-height: 36px;
font-weight: 300;
}
.dates-divider{
position: absolute;
top: 46.5%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
display: none;
}
.divider{
height: 1px;
width: 55px;
background: #DDDDDD;
-webkit-transform: rotate(-50deg);
transform: rotate(-50deg);
}
#dates span {
display: block;
font-size: 17px;
line-height: 19px;
font-weight: 300;
color: #757575;
}
#datepickerFrom{
text-align: left;
text-transform: capitalize;
}
#datepickerTo{
text-align: right;
text-transform: capitalize;
}
#datepicker{
position: relative;
height: 100%;
width: 100%;
}
.save-clear-airlines,
.save-clear-dates{
position: fixed;
-webkit-transform: translatez(0);
left: 0px;
right: 0px;
bottom: -62px;
height: 62px;
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
background: #FFFFFF;
z-index: 9;
}
@media screen and (min-width: 1025px){
.save-clear-dates{
position: absolute;
}
.save-clear-airlines{
display: none;
}
}
.save-clear-airlines,
.save-clear-dates.show{
bottom: 0px;
}
.clear-airlines,
.clear-dates{
position: absolute;
display: inline-block;
left: 10px;
bottom: 9px;
padding: 35px;
padding-left: 30px;
padding-right: 30px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 16px;
line-height: 44px;
background: #FFFFFF;
color: #303030;
z-index: 9;
font-weight: 400;
border-radius: 4px;
cursor: pointer;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
.clear-airlines:hover,
.clear-dates:hover{
background: #F7F7F7;
}
.save-airlines,
.save-dates{
position: absolute;
display: inline-block;
right: 25px;
bottom: 9px;
border-radius: 4px;
text-align: center;
z-index: 9;
color: #FFFFFF;
background: #007CFF; /* 00bffc */
/* DESTIGOGO color
background: #FF8211;
background: -webkit-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -o-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: -moz-linear-gradient(45deg, #FF3363, #FF8211 90%);
background: linear-gradient(45deg, #FF3363, #FF8211 90%);
*/
width: 140px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 17px;
line-height: 44px;
color: #FFFFFF;
font-weight: 500;
cursor: pointer;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
@media screen and (min-width: 1025px){
.save-dates{
right: 10px;
}
.save-dates:hover{
background: #00AAFF;
background: #0070e6;
}
}
/*-------------
NO FLIGHTS
--------------*/
.no-flights{
text-align: center;
display: none;
padding-top: 25px;
background: #FFFFFF;
}
@media screen and (min-width: 1025px){
.no-flights{
padding-top: 45px;
}
}
.no-flights h2{
color: #333333;
font-size: 30px;
line-height: 38px;
font-weight: 700;
padding-bottom: 7px;
}
.no-flights p{
color: #757575;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
/*-------------
NO CONNECTING FLIGHTS
--------------*/
.no-connecting-flights{
text-align: center;
display: none;
padding-top: 25px;
background: #FFFFFF;
}
@media screen and (min-width: 1025px){
.no-connecting-flights{
padding-top: 45px;
}
}
.no-connecting-flights h2{
color: #333333;
font-size: 30px;
line-height: 38px;
font-weight: 700;
padding-bottom: 7px;
}
.no-connecting-flights p{
color: #757575;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
/*-------------
SELECT DEPARTURE / DESTINATION
--------------*/
.select-departure,
.select-destination{
text-align: center;
display: none;
padding: 9px;
padding-top: 45px;
background: #FFFFFF;
}
.select-departure.show,
.select-destination.show{
display: block;
}
/*
@media screen and (min-width: 1025px){
.select-departure{
padding-top: 45px;
}
}
*/
.select-departure h2,
.select-destination h2{
color: #333333;
font-size: 26px;
line-height: 34px;
font-weight: 700;
padding-bottom: 7px;
}
.select-departure p,
.select-destination p{
color: #757575;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
/*-------------
MAP
--------------*/
.map-container{
position: fixed;
-webkit-transform: translatez(0);
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 999;
/*
transform: translateY(-200vh);
*/
outline: none;
touch-action: manipulation;
}
.map-container.free{
top: 50px;
}
@media screen and (min-width: 1025px){
.map-container{
position: absolute;
/*
left: 300px;
*/
left: 380px;
right: 0px;
top: 139px;
bottom: 0px;
/*
padding-left: 11px;
padding-right: 21px;
*/
display: inline-block;
vertical-align: top;
/*
transform: translateY(0px);
-webkit-transition : left 0.3s ease-in-out;
-moz-transition : left 0.3s ease-in-out;
-ms-transition : left 0.3s ease-in-out;
-o-transition : left 0.3s ease-in-out;
transition : left 0.3s ease-in-out;
*/
border-left: 1px solid #DDDDDD;
border-left: 0.5px solid #DDDDDD;
}
.map-container.small{
left: 380px;
/*
border-left: 1px solid #DDDDDD;
border-left: 0.5px solid #DDDDDD;
-webkit-transition : left 0.3s ease-in-out;
-moz-transition : left 0.3s ease-in-out;
-ms-transition : left 0.3s ease-in-out;
-o-transition : left 0.3s ease-in-out;
transition : left 0.3s ease-in-out;
*/
}
.map-container.free{
top: 139px;
bottom: 0px;
}
}
/*
@media screen and (min-width: 700px){
.map-container{
left: 350px;
}
}
@media screen and (min-width: 900px){
.map-container{
left: 380px;
}
}
*/
.map{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
/*
transform: translateY(100vh);
opacity: 0;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
*/
outline: none;
}
@media screen and (min-width: 1025px){
.map{
position: absolute;
/*
left: 19px;
right: 29px;
top: 8px;
bottom: 29px;
border-radius: 10px;
*/
/*
transform: translateY(0px);
opacity: 1;
-webkit-transition : all 0s;
-moz-transition : all 0s;
-ms-transition : all 0s;
-o-transition : all 0s;
transition : all 0s;
*/
}
}
/*
@media screen and (min-width: 1025px){
.map-airports{
right: 300px;
border-right: 1px solid #DDDDDD;
}
}
*/
/*
.map.show{
transform: translateY(0px);
opacity: 1;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
@media screen and (min-width: 1025px){
.map.show{
-webkit-transition : all 0s;
-moz-transition : all 0s;
-ms-transition : all 0s;
-o-transition : all 0s;
transition : all 0s;
}
}
*/
/*---------------------
ACTUAL MAP (MAP-CANVAS)
----------------------*/
.map-canvas{
position: absolute;
left: 0px;
right: 0px;
top: 35px;
bottom: 0px;
outline: none;
background: #BBE6F8;
display: block;
z-index: 0;
/*
background-color: #dbdcdf;
background-size: 100px 100px, 100px 100px, 10px 10px, 10px 10px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255,255,255,.5) 1px, transparent 1px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image: -moz-linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255,255,255,.5) 1px, transparent 1px),
-moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
*/
}
@media screen and (min-width: 1025px){
.map-canvas{
top: 0px;
}
}
/*---------------------
TOP MAP MOBILE
----------------------*/
.top-map-mobile{
position: fixed;
-webkit-transform: translatez(0);
top: 0px;
left: 0px;
right: 0px;
height: 160px; /*205px;*/
/*
background: -webkit-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.2));
background: -moz-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.2));
background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.2));
*/
background: -webkit-linear-gradient(0deg, rgba(256,256,256,0), #FFFFFF 80%);
background: -moz-linear-gradient(0deg, rgba(256,256,256,0), #FFFFFF 80%);
background: linear-gradient(0deg, rgba(256,256,256,0), #FFFFFF 80%);
z-index: 9;
pointer-events:none;
}
@media screen and (min-width: 1025px){
.top-map-mobile{
display: none;
}
}
/*-------------
BOTTOM MAP
--------------*/
.bottom-map{
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
height: 30px;
z-index: 9;
}
@media screen and (min-width: 1025px){
.bottom-map{
display: none;
}
}
/*-------------
MAP INPUT
--------------*/
.map-input{
position: absolute;
/*
left: 45px;
*/
left: 0px;
top: 60px; /*18px*/
right: 0px;
z-index: 9;
}
@media screen and (min-width: 600px){
.map-input{
max-width: 450px;
}
}
@media screen and (min-width: 1025px){
.map-input{
display: none;
}
}
.map-input .input{
padding-top: 3px;
padding-bottom: 3px;
}
.map-input .input-field{
background: #FFF;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
padding-top: 12px;
padding-bottom: 12px;
}
/*-------------
MAP-FILTERS
--------------*/
.map-filters{
position: absolute;
left: 0px;
top: 158px; /*108px*/
top: 152px;
right: 0px;
padding: 8px;
padding-left: 17px;
padding-right: 17px;
display: inline-block;
vertical-align: top;
white-space: nowrap;
/* smooth scroll iphone*/
overflow: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
z-index: 9;
}
.map-filters::-webkit-scrollbar{
width: 0px; /* for vertical scrollbars */
height: 0px; /* for horizontal scrollbars */
}
@media screen and (min-width: 600px){
.map-filters{
pointer-events:none;
}
}
@media screen and (min-width: 1025px){
.map-filters{
top: 14px;
left: 25px;
right: auto;
padding: 0px;
display: none;
}
}
/*-------------
MAP-FILTER-MOBILE BTN
--------------*/
.map-filter-mobile{
position: relative;
display: inline-block;
vertical-align: top;
padding: 8px;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
margin: 4px;
font-size: 13px;
line-height: 17px;
font-weight: 400;
border-radius: 4px;
z-index: 9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
pointer-events:visiblePainted;
pointer-events:auto;
}
.map-filter-mobile.hide{
display: none;
}
.map-filter-mobile:not(.map-stops).active{
background: #ffbf00;
border: 1px solid #ffbf00;
border: 0.5px solid #ffbf00;
color: #FFFFFF;
font-weight: 500;
}
.map-filter-label span{
font-size: 11px;
line-height: 15px;
font-weight: 500;
color: #FFFFFF;
border-radius: 100px;
background: #ffbf00; /* #ffcf40; */
padding: 2px;
padding-bottom: 1px;
padding-left: 8px;
padding-right: 8px;
margin-left: 4px;
}
.map-filter-mobile:not(.active):not(.disabled):hover{
background: #F7F7F7;
border: 1px solid #F7F7F7;
border: 0.5px solid #F7F7F7;
}
.zero-stops{
border-radius: 3px 0px 0px 3px;
margin-right: 0px;
}
.one-stops{
border-radius: 0px;
margin-left: 0px;
margin-right: 0px;
z-index: 9;
}
.two-stops{
border-radius: 0px 3px 3px 0px;
margin-left: 0px;
}
.map-stops-filters{
display: none;
}
.map-stops-filters.show{
position: relative;
display: inline-block;
vertical-align: top;
pointer-events:visiblePainted;
pointer-events:auto;
}
.map-stops.active{
background: #EEE;
border-color: #EEE;
border-top: 1px solid rgba(0,0,0,.05);
border-top: 0.5px solid rgba(0,0,0,.05);
border-left: 1px solid rgba(0,0,0,.05);
border-left: 0.5px solid rgba(0,0,0,.05);
cursor: default;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 5px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 2px 5px rgba(0,0,0,.05);
}
.map-stops.disabled{
opacity: 0.6;
cursor: no-drop;
}
/*-------------
MAP-FILTER BTN
--------------*/
.map-filter{
position: relative;
display: inline-block;
vertical-align: top;
padding: 12px;
padding-bottom: 9px;
padding-left: 22px;
padding-right: 22px;
z-index: 9;
/*
white-space: nowrap;
overflow: hidden;
*/
}
@media screen and (min-width: 1025px){
.open-stops-filters{
display: none;
}
.open-stops-filters.show{
display: inline-block;
vertical-align: top;
}
}
.map-filter.pro{
padding-right: 10px;
}
.map-filter:hover{
background: #F7F7F7;
}
.map-filter .filter-label{
position: relative;
display: block;
font-size: 13px;
line-height: 20px;
font-weight: 500;
white-space: nowrap;
}
.filter-label span.counter{
font-size: 11px;
line-height: 15px;
font-weight: 500;
color: #FFFFFF;
background: #ffbf00; /* #ffcf40; */
padding: 2px;
padding-bottom: 1px;
padding-left: 5px;
padding-right: 5px;
margin-left: 4px;
border-radius: 3px;
}
.map-filter .filter-value{
position: relative;
display: block;
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: #757575;
white-space: nowrap;
}
.chevron-down::before {
border-style: solid;
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
height: 4px;
width: 4px;
left: 7px;
top: 6px;
position: relative;
transform: rotate(-225deg);
vertical-align: top;
}
/*-------------
DROPDOWN-FILTERS
--------------*/
.dropdown-filters{
position: absolute;
background: #FFFFFF;
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
box-shadow: 0 6px 21px rgba(0,0,0,.1);
width: 250px;
overflow: hidden;
left: 0px;
top: 100%;
cursor: default;
z-index: 1;
display: none;
}
.open-same-airline-filters .dropdown-filters{
width: auto;
}
.dropdown-filters.skyscanner{
top: auto;
bottom: 100%;
left: -6px;
width: auto;
min-width: 173px;
}
.skyscanner-button.open .dropdown-filters.skyscanner{
display: block;
}
.dropdown-filters.passengers-filters{
left: 50%;
transform: translate(-50%, 0);
}
@media screen and (min-width: 358px){
.dropdown-filters.cabinClass-filters{
left: auto;
right: -24px;
}
}
/*
@media screen and (min-width: 1025px){
.dropdown-filters.skyscanner,
.dropdown-filters.passengers-filters,
.dropdown-filters.cabinClass-filters{
bottom: auto;
top: 100%;
left: -6px;
width: auto;
min-width: 173px;
transform: translate(0,0);
}
}
*/
/*
.skyscanner-button:hover .dropdown-filters.skyscanner{
display: block;
}
*/
.skyscanner-options{
padding: 8px;
}
.alliance-filters{
border-left: none;
}
.airline-filters{
width: 300px;
}
/*
.open-airline-filters:hover .airline-filters,
.open-airline-filters:active .airline-filters{
display: block;
}
*/
/*-------------
SAME AIRLINE
--------------*/
.same-airline,
.open-same-airline-filters{
display: none;
}
.same-airline.show,
.open-same-airline-filters.show{
position: relative;
display: inline-block;
vertical-align: top;
}
.same-airline-container{
position: relative;
padding: 18px;
padding: 12px;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
/*-------------
MAP FILTER TOOLTIP
--------------*/
.map-filter-tooltip{
position: absolute;
bottom: calc(100% + 17px);
left: 50%;
transform: translate(-50%, 0px);
background: #333333;
/*
box-shadow: 0 6px 21px rgba(0,0,0,.1);
*/
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
padding: 4px;
text-align: center;
}
.map-filter-tooltip::after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border-width: 4px;
border-style: solid;
border-color: #333333 transparent transparent transparent;
}
.map-filter-tooltip p {
font-size: 12px;
line-height: 22px;
font-weight: 300;
letter-spacing: 0.3px;
padding-left: 7px;
padding-right: 7px;
color: #FFF;
}
.map-filter:hover:not(.dropdown-filters) .map-filter-tooltip{
visibility: visible;
opacity: 1;
bottom: calc(100% + 10px);
transition: all 0.3s;
}
/*-------------
RESET MAP
--------------*/
.reset-map{
position: absolute;
left: 16px;
/*
bottom: 22px;
*/
bottom: 30px;
bottom: 31px;
bottom: 20px;
bottom: 36px;
display: inline-block;
vertical-align: top;
white-space: nowrap;
padding: 7px;
padding-left: 11px;
padding-right: 11px;
background: #d43242;
border: 1px solid #d43242;
border: 0.5px solid #d43242;
margin: 4px;
font-size: 13px;
line-height: 17px;
font-weight: 400;
border-radius: 4px;
z-index: 9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
display: none;
}
@media screen and (min-width: 1025px){
.reset-map{
top: 7px;
/*
right: auto;
left: 15px;
*/
left: auto;
right: 45px;
right: 56px;
right: 50px;
bottom: auto;
/*
left: auto;
right: 16px;
*/
}
}
.reset-map:hover{
background: #BE2D3B;
border: 1px solid #BE2D3B;
border: 0.5px solid #BE2D3B;
}
.reset-label{
letter-spacing: 0.3px;
color: #FFF;
}
.reset-map i{
margin-left: 4px;
-webkit-text-stroke: 1px #d43242;
text-stroke: 1px #d43242;
}
.reset-map:hover i{
-webkit-text-stroke: 1px #BE2D3B;
text-stroke: 1px #BE2D3B;
}
/*-------------
AIRPORT LEGEND
--------------*/
.legend{
position: absolute;
/*
right: 10px;
bottom: 22px;
*/
left: 9px;
bottom: 34px;
bottom: 9px;
display: inline-block;
vertical-align: top;
padding: 6px;
padding-left: 9px;
padding-right: 10px;
background: #FFFFFF;
border-radius: 4px;
font-size: 11px;
line-height: 17px;
font-weight: 400;
color: #333333;
border-radius: 3px;
z-index: 9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
cursor: default;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: manipulation;
transform: translateY(63px);
transition: transform 0.3s;
}
.legend.show{
transform: translateY(0px);
transition: transform 0.3s;
}
@media screen and (min-width: 1025px){
.legend{
bottom: 120px;
bottom: 9px;
transform: translateY(65px);
}
.legend.low{
bottom: 9px;
}
}
.legend-divider{
height: 8px;
}
.legend-title{
font-size: 11px;
line-height: 17px;
font-weight: 500;
color: #333333;
white-space: nowrap;
}
.legend li:not(.legend-title){
position: relative;
white-space: nowrap;
cursor: help;
touch-action: manipulation;
}
.legend-airport,
.legend-flights{
display: inline-block;
vertical-align: top;
line-height: 15px;
touch-action: manipulation;
}
.legend-airport-dot{
display: inline-block;
vertical-align: middle;
line-height: 17px;
border-radius: 100px;
background: #FFFFFF;
border: 1px solid #DDD;
border: 0.5px solid #DDD;
height: 9px;
width: 9px;
}
#blue-dot{
background: #007CFF;
border: 1px solid #003a77;
}
#yellow-dot{
height: 7px;
width: 7px;
margin-left: 1px;
margin-right: 1px;
background: #FCC105;
border: 1px solid #8e6c00;
}
#red-dot{
height: 5px;
width: 5px;
margin-left: 2px;
margin-right: 2px;
background: #F05B43;
border: 1px solid #a33f2f;
}
.legend-flights-line{
display: inline-block;
vertical-align: middle;
line-height: 17px;
height: 1px;
height: 1.2px;
width: 36px;
margin-right: 3px;
background: #df7f98;
opacity: 0.8;
touch-action: manipulation;
}
#seasonal-flight{
background: transparent;
background-image: linear-gradient(90deg, #df7f98, #df7f98 55%, transparent 45%, transparent 100%);
background-size: 8px 2px;
}
.legend-label{
font-size: 11px;
font-weight: 400;
color: #333333;
padding-left: 4px;
touch-action: manipulation;
}
/*-------------
LEGEND TOOLTIP
--------------*/
.legend-tooltip,
.legend-flights-tooltip{
visibility: hidden;
white-space: nowrap;
background-color: #333333;
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
font-size: 11px;
line-height: 17px;
text-align: center;
border-radius: 3px;
padding: 2px 8px;
position: absolute;
z-index: 9999;
top: -3px;
left: 100%;
opacity: 0;
}
.legend li .legend-flights-tooltip{
left: 98px;
}
.legend li .legend-tooltip::after,
.legend li .legend-flights-tooltip::after{
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -4px;
border-width: 4px;
border-style: solid;
border-color: transparent #333333 transparent transparent;
}
@media screen and (min-width: 1025px){
.legend li:hover .legend-tooltip,
.legend li:hover .legend-flights-tooltip{
visibility: visible;
opacity: 1;
left: calc(100% + 7px);
transition: all 0.3s;
}
.legend li:hover .legend-flights-tooltip{
left: 105px;
}
}
/*-------------
CLOSE LEGEND
--------------*/
.legend-close{
position: absolute;
right: 4px;
top: 3px;
height: 18px;
width: 18px;
border-radius: 100px;
text-align: center;
z-index: 9;
color: #757575;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
}
.legend.show .legend-close{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transition: transform 0.3s;
}
@media screen and (min-width: 1025px){
.legend-close{
top: 4px;
}
.legend-close:hover{
color: #333333;
}
}
.legend-close-icon{
font-size: 11px;
line-height: 20px;
}
/*-------------
SHOW FLIGHT DEALS
--------------*/
.show-flight-deals{
position: absolute;
left: 50%;
transform: translate(-50%, 0);
bottom: 30px;
display: inline-block;
vertical-align: top;
font-size: 17px;
font-weight: 600;
line-height: 22px;
padding: 10px;
padding-left: 18px;
padding-right: 15px;
border-radius: 100px;
/*
background: -webkit-gradient(linear,left top,left bottom,from(#00d775),to(#00bd68));
background: -webkit-linear-gradient(top,#00d775,#00bd68);
background: -o-linear-gradient(top,#00d775 0,#00bd68 100%);
background: linear-gradient(-180deg,#00d775,#00bd68);
*/
background: #007CFF;
color: #FFF;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
z-index: 9999;
white-space: nowrap;
display: none;
}
@media screen and (min-width: 1025px){
.show-flight-deals{
display: inline-block;
vertical-align: top;
bottom: 40px;
padding: 8px;
padding-left: 18px;
padding-right: 15px;
display: none;
}
}
/*
.show-flight-deals:hover{
background: #00BD68;
}
*/
.show-flight-deals i{
margin-left: 7px;
}
.show-flight-deals span{
font-weight: 400;
}
/*-------------
SHOW MAP BTN DESKTOP
--------------*/
.show-map{
display: none;
}
@media screen and (min-width: 1025px){
.show-map{
display: inline-block;
vertical-align: top;
margin-right: 3px; /*3px;*/
margin-left: 20px;
background: #FFFFFF;
display: none;
}
}
.slider-label{
position: relative;
display: inline-block;
vertical-align: top;
padding: 7px;
padding-left: 0px;
padding-right: 11px;
margin: 5px;
margin: 4.5px;
margin-right: 0px;
font-size: 13px;
line-height: 17px;
font-weight: 500;
border-radius: 5px;
z-index: 9;
}
.slider{
position: relative;
display: inline-block;
vertical-align: top;
height: 23px;
border: 1px solid #4CD964;
border: 1px solid #00d775;
width: 38px;
margin: 8px;
margin-left: 0px;
margin-right: 0px;
background: #4CD964;
background: #00d775;
border-radius: 100px;
cursor: pointer;
}
.off .slider{
border: 1px solid #E6E6E6;
background: #FFF;
}
.toggle{
position: absolute;
display: inline-block;
vertical-align: top;
left: auto;
right: 0px;
height: 23px;
width: 23px;
background: #FFF;
border-radius: 100px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.off .toggle{
right: auto;
left: 0px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/*---------------------
SHOW MAP BTN MOBILE
----------------------*/
.show-map-mobile{
display: none;
}
.show-map-mobile.show{
position: fixed;
-webkit-transform: translatez(0);
display: inline-block;
vertical-align: top;
left: 30px;
bottom: 30px;
z-index: 9999;
width: 53px;
height: 53px;
text-align: center;
border: 1px solid #FFF;
background: #ECEAEC;
background: -webkit-linear-gradient(180deg, #F7F7F7, #f1f1f1);
background: -moz-linear-gradient(180deg, #F7F7F7, #f1f1f1);
background: linear-gradient(180deg, #F7F7F7, #f1f1f1);
box-shadow: 0 4px 12px rgba(0,0,0,0.1), 0 8px 21px rgba(0,0,0,0.1);
cursor: pointer;
border-radius: 100px;
text-decoration: none;
z-index: 999;
overflow: hidden;
display: none;
}
@media screen and (min-width: 1025px){
.show-map-mobile.show{
display: none;
}
}
.show-map-mobile .fa-globe{
position: absolute;
font-size: 55px;
display: inline-block;
vertical-align: top;
padding-top: 24px;
color: #d0ebe9; /* #C5E7E4; */
left: 0px;
width: 53px;
}
.show-map-mobile .globe-bg{
position: absolute;
width: 47px;
height: 47px;
border-radius: 100px;
display: inline-block;
vertical-align: top;
top: 28px;
background: #8CC6BA;
left: 3px;
}
.show-map-mobile .fa-map-marker{
position: relative;
font-size: 28px;
display: inline-block;
vertical-align: top;
padding-top: 8px;
/*padding-right: 3px;*/
color: #008388; /* E84C3D; */
text-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
/*---------------------
CLOSE MAP BTN MOBILE
----------------------*/
.close-map{
position: absolute;
left: 4px;
top: 14px;
height: 55px;
width: 55px;
border-radius: 100px;
text-align: center;
z-index: 999;
color: #FFF;
border: none;
}
.close-map:hover{
background: rgba(0,0,0,0.1);
border: none;
}
.close-map-icon{
font-size: 24px;
line-height: 55px;
text-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}
/*---------------------
E-MAIL BOX
----------------------*/
.email-box {
position: fixed;
-webkit-transform: translatez(0);
/*
top: 132px;
*/
bottom: 37px;
bottom: calc(50% - 97px);
bottom: 169px;
right: 10px;
z-index: 9999999;
display: inline-block;
vertical-align: top;
text-align: left;
border-radius: 5px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 21px rgba(0,0,0,.1);
white-space: nowrap;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
}
.email-box.fade-in-email-box{
display: none;
}
@media screen and (min-width: 1025px){
.email-box.fade-in-email-box{
display: inline-block !important;
-webkit-animation: fade-in-email-box 0.4s;
-moz-animation: fade-in-email-box 0.4s;
-ms-animation: fade-in-email-box 0.4s;
}
@keyframes fade-in-email-box {
0% { opacity: 0; transform: translate(300px, 0px); }
90% { opacity: 1; transform: translate(-10px, 0px); }
100% { opacity: 1; transform: translate(0px, 0px); }
}
@-webkit-keyframes fade-in-email-box {
0% { opacity: 0; -webkit-transform: translate(300px, 0px); }
90% { opacity: 1; -webkit-transform: translate(-10px, 0px); }
100% { opacity: 1; -webkit-transform: translate(0px, 0px); }
}
@-moz-keyframes fade-in-email-box {
0% { opacity: 0; -moz-transform: translate(300px, 0px); }
90% { opacity: 1; -moz-transform: translate(-10px, 0px); }
100% { opacity: 1; -moz-transform: translate(0px, 0px); }
}
@-ms-keyframes fade-in-email-box {
0% { opacity: 0; -ms-transform: translate(300px, 0px); }
90% { opacity: 1; -ms-transform: translate(-10px, 0px); }
100% { opacity: 1; -ms-transform: translate(0px, 0px); }
}
}
.email-box-image{
position: relative;
display: inline-block;
vertical-align: top;
/*
height: 160px;
width: 170px;
*/
height: 130px;
width: 140px;
}
.email-box-image img{
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.email-box-text{
position: relative;
display: inline-block;
vertical-align: top;
text-align: left;
padding: 25px;
padding-top: 18px;
padding-bottom: 18px;
}
.email-box-text h3{
font-size: 18px;
line-height: 21px;
font-weight: 700;
color: #333333;
padding-bottom: 8px;
}
.email-box-text p{
font-size: 14px;
line-height: 16px;
font-weight: 400;
color: #757575;
}
/*-------------
CLOSE EMAIL BOX
--------------*/
.email-box-close{
position: absolute;
right: 8px;
top: 7px;
height: 18px;
width: 18px;
border-radius: 100px;
text-align: center;
z-index: 9;
/*
color: rgba(256,256,256,0.5);
*/
color: #757575;
}
@media screen and (min-width: 1025px){
.email-box-close:hover{
/*
color: #FFF;
*/
color: #333333;
}
}
.email-box-close-icon{
font-size: 12px;
line-height: 20px;
/*
text-shadow: 0px 2px 2px rgba(0,0,0,0.1);
*/
}
.email-box-input{
font-family: -apple-system,"Roboto","Helvetica Neue",Arial,sans-serif;
color: #333333;
margin-top: 11px;
white-space: nowrap;
}
.email{
font-size: 14px;
line-height: 17px;
color: #333333;
border: 1px solid #DDD;
border-right: none;
border-radius: 4px 0px 0px 4px;
padding: 8px 10px;
padding-top: 9px;
width: 200px;
}
.email::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #BBB;
}
.email::-moz-placeholder { /* Firefox 19+ */
color: #BBB;
}
.email:-ms-input-placeholder { /* IE 10+ */
color: #BBB;
}
.email:-moz-placeholder { /* Firefox 18- */
color: #BBB;
}
.submit{
font-size: 14px;
line-height: 17px;
background: #007CFF; /* #00AEEF; */
color: #FFFFFF;
font-weight: 500;
border-radius: 0px 4px 4px 0px;
padding: 9px 15px;
padding-top: 10px;
}
.submit:hover{
background: #0070e6;
}
/*-------------
SIDE BUTTON EMAIL SUBSCRIBE
--------------*/
.email-subscribe-position {
position: fixed;
z-index: 9999;
height: 2px;
width: 2px;
right: 0px;
bottom: calc(50% - 2px);
pointer-events: none;
}
.email-subscribe {
position: absolute;
left: -16px;
top: 50%;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform-origin: center left;
display: inline-block;
vertical-align: top;
text-align: left;
overflow: hidden;
font-size: 14px;
line-height: 17px;
background: #007CFF;
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.15);
color: #FFFFFF;
font-weight: 500;
border-radius: 4px 4px 0px 0px;
padding: 11px 12px;
padding-bottom: 16px;
white-space: nowrap;
display: none;
pointer-events:visiblePainted;
pointer-events:auto;
transition: left 0.05s;
}
.email-subscribe:hover{
left: -20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
transition: left 0.05s;
}
.email-subscribe i{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
/*---------------------
NATIVE ADS
----------------------*/
.native {
position: fixed;
-webkit-transform: translatez(0);
top: 138px;
right: 0px;
width: 300px;
height: calc(100% - 138px);
z-index: 999;
display: inline-block;
vertical-align: top;
text-align: left;
border-radius: 5px;
white-space: nowrap;
font-size: 15px;
display: none;
overflow: hidden;
overflow-y: auto;
}
@media screen and (min-width: 1025px){
.native {
display: block;
}
}
/*---------------------
GOOGLE ADS
----------------------*/
.ad-box {
position: fixed;
-webkit-transform: translatez(0);
overflow: hidden;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
height: 49px;
border-bottom: 1px solid #DDDDDD;
z-index: 999999;
display: inline-block;
vertical-align: top;
text-align: left;
background: #FFBF00;
border-radius: 0px;
white-space: nowrap;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 1;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
font-size: 15px;
display: none;
}
.ad-box.show#flc{
display: block !important;
}
#waldo-tag-4676,
#waldo-tag-4677{
height: 50px;
overflow: hidden;
margin-right: 50px !important;
max-width: calc(100% - 50px) !important;
}
@media screen and (min-width: 1025px){
#waldo-tag-4676,
#waldo-tag-4677{
height: auto;
margin-right: 0 !important;
border-radius: 3px !important;
max-width: none !important;
}
}
#waldo-tag-4672,
#waldo-tag-4673{
margin: 10px -5px;
margin-bottom: 20px;
text-align: center;
/*
border: 1px solid #DDDDDD;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 4px;
padding: 12px 0px;
*/
}
#waldo-tag-4672 > div:first-of-type iframe,
#waldo-tag-4673 > div:first-of-type iframe{
border-radius: 4px !important;
overflow: hidden !important;
}
.app_gdpr--2k2uB{
display: none !important;
}
@media screen and (min-width: 1025px){
.ad-box{
position: absolute;
top: auto;
bottom: 20px;
right: 9px;
left: auto;
height: auto;
min-height: 90px;
width: 728px;
border: none;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
background: rgba(256,256,256,0.5);
overflow: visible;
}
}
#Pixfuture-10150x728x90x1816{
width: auto !important;
left: 0px !important;
}
.adsbygoogle{
position: relative !important;
max-height: 90px !important;
border-radius: 3px !important;
overflow: hidden !important;
text-align: left !important;
}
.flc-text-blocked{
position: absolute;
top: 5px;
right: 5px;
width: 40px;
height: 40px;
z-index: 9;
display: inline-block;
vertical-align: top;
font-size: 20px;
line-height: 41px;
font-weight: 600;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 100px;
white-space: nowrap;
overflow: hidden;
background: #FFD966;
color: #FFFFFF;
}
#flc-text-mobile{
margin-left: -1px;
}
#flc-text-desktop{
display: none;
}
@media screen and (min-width: 1025px){
.flc-text-blocked{
top: -40px;
bottom: auto;
right: 0px;
border-radius: 3px;
font-size: 13px;
font-weight: 500;
line-height: 32px;
padding-left: 10px;
padding-right: 10px;
width: auto;
height: auto;
font-size: 13px;
background: #FFBF00;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
#flc-text-mobile{
display: none;
}
#flc-text-desktop{
display: inline-block;
}
}
.flc-text-blocked i{
margin-right: 7px;
}
.remove-ads:hover{
background: #f0ae14;
}
.ad-box-text{
position: relative;
z-index: -1;
/*
background: #D30000;
color: #FFF;
*/
background: #FFF;
padding: 22px 25px;
/*
min-width: calc(728px - 70px);
*/
border-radius: 3px;
display: none;
}
.parallax-container .ad-box-text{
padding: 15px
}
@media screen and (min-width: 1025px){
.ad-box-text.show#flc-text,
.ad-box-text.show#flc-text-2{
display: block !important;
z-index: 1;
}
}
.ad-box-text h3{
font-size: 18px;
line-height: 21px;
font-weight: 700;
padding-bottom: 8px;
display: none;
}
.parallax-container .ad-box-text h3{
display: block;
padding: 8px 0px;
}
.ad-box-text p{
font-size: 15px;
line-height: 20px;
font-weight: 400;
padding: 2px 0px;
}
.parallax-container .ad-box-text p{
padding: 5px 0px;
}
.ad-box-text .choose-a-plan{
font-weight: 600;
line-height: 20px;
font-weight: 500;
color: #007cff;
text-decoration: underline;
/*
color: #FFF;
*/
}
.ad-box-text .choose-a-plan:hover{
color: #000;
}
/*---------------------
SUPPORT US
----------------------*/
.support-us {
position: fixed;
-webkit-transform: translatez(0);
top: 132px;
right: 48px;
width: 400px;
overflow: hidden;
z-index: 9999999;
display: inline-block;
vertical-align: top;
text-align: left;
border-radius: 4px;
overflow: hidden;
background: #FFBF00;
color: #FFFFFF;
box-shadow: 0 6px 21px rgba(0,0,0,.1);
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
}
.support-us.fade-in-support-us{
display: none;
}
@media screen and (min-width: 1025px){
.support-us.fade-in-support-us{
display: inline-block !important;
-webkit-animation: fade-in-email-box 0.4s;
-moz-animation: fade-in-email-box 0.4s;
-ms-animation: fade-in-email-box 0.4s;
}
@keyframes fade-in-email-box {
0% { opacity: 0; transform: translate(300px, 0px); }
90% { opacity: 1; transform: translate(-10px, 0px); }
100% { opacity: 1; transform: translate(0px, 0px); }
}
@-webkit-keyframes fade-in-email-box {
0% { opacity: 0; -webkit-transform: translate(300px, 0px); }
90% { opacity: 1; -webkit-transform: translate(-10px, 0px); }
100% { opacity: 1; -webkit-transform: translate(0px, 0px); }
}
@-moz-keyframes fade-in-email-box {
0% { opacity: 0; -moz-transform: translate(300px, 0px); }
90% { opacity: 1; -moz-transform: translate(-10px, 0px); }
100% { opacity: 1; -moz-transform: translate(0px, 0px); }
}
@-ms-keyframes fade-in-email-box {
0% { opacity: 0; -ms-transform: translate(300px, 0px); }
90% { opacity: 1; -ms-transform: translate(-10px, 0px); }
100% { opacity: 1; -ms-transform: translate(0px, 0px); }
}
}
.support-us-text{
position: relative;
display: inline-block;
vertical-align: top;
text-align: left;
padding: 25px 20px;
padding-top: 18px;
padding-bottom: 18px;
}
.support-us-text h3{
font-size: 18px;
line-height: 21px;
font-weight: 700;
padding-bottom: 8px;
}
.support-us-text p{
font-size: 14px;
line-height: 16px;
font-weight: 400;
}
.support-us-text strong{
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
.support-btn{
display: inline-block;
vertical-align: top;
font-size: 16px;
line-height: 20px;
background: transparent;
background: rgba(256,256,256,0.3);
background: #FFFFFF;
color: #333333;
/*
border: 0.5px solid #FFF;
border: 1px solid #FFF;
*/
font-weight: 500;
border-radius: 4px;
padding: 9px 20px;
padding-top: 10px;
margin-top: 20px;
}
.support-btn:hover{
background: rgba(256,256,256,0.3);
color: #FFFFFF;
}
/*-------------
CLOSE SUPPORT US
--------------*/
.support-us-close{
position: absolute;
right: 8px;
top: 7px;
height: 18px;
width: 18px;
border-radius: 100px;
text-align: center;
z-index: 9;
color: rgba(256,256,256,0.7);
}
@media screen and (min-width: 1025px){
.support-us-close:hover{
color: #FFFFFF;
}
}
.support-us-close-icon{
font-size: 12px;
line-height: 20px;
}
/*-------------
TOGGLE ROUTE INFO
--------------*/
.toggle-route{
display: none !important;
}
@media screen and (min-width: 1025px){
.toggle-route{
position: absolute;
top: 54px;
right: -29px;
display: inline-block;
vertical-align: top;
background: #007CFF;
border: 1px solid #007CFF;
border: 0.5px solid #007CFF;
font-size: 13px;
line-height: 17px;
font-weight: 400;
border-radius: 0px 4px 4px 0px;
z-index: 9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
display: none;
}
.toggle-route.on{
display: inline-block;
vertical-align: top;
padding: 25px;
padding-left: 11px;
padding-right: 7px;
/*
display: none !important;
*/
}
.toggle-route.off{
display: inline-block;
vertical-align: top;
padding: 25px;
padding-left: 7px;
padding-right: 11px;
}
.toggle-route-label{
color: #FFF;
font-size: 18px;
}
.on .toggle-route-label i{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.off .toggle-route-label i{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
}
/*-------------
ROUTE INFO CONTAINER
--------------*/
.route-info-container{
overflow: visible;
}
/*-------------
INTENT MEDIA PARALLAX
--------------*/
#IntentMediaParallax{
display: none;
position: relative;
margin: 25px 20px;
border-radius: 4px;
border: 1px solid #000000;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
opacity: 0;
height: 0px;
overflow: hidden;
}
.IM_parallax_container{
display: none !important;
margin: 0px !important;
box-shadow: none !important;
}
@media screen and (min-width: 1025px){
#IntentMediaParallax{
display: block;
}
#IntentMediaParallax.show{
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
opacity: 1;
height: auto;
overflow: initial;
}
.IM_parallax_container{
display: block !important;
}
}
/***********************************************************
.parallax-container{
display: none !important;
}
@media screen and (min-width: 1025px){
.parallax-container{
display: block !important;
}
}
.IM_parallax_container{
display: none !important;
}
@media screen and (min-width: 1025px){
.IM_parallax_container{
display: block !important;
padding: 25px 20px !important;
padding-top: 10px !important;
margin: 0px !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
box-shadow: none !important;
border-radius: 0px !important;
}
.jJXlBZ{
border-radius: 4px !important;
overflow: hidden !important;
border: 1px solid #DDDDDD !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
}
***********************************************************/
/*-------------
ROUTE LOADER
--------------*/
.route-loader{
text-align: center;
padding-top: 80px;
padding-bottom: 80px;
background: #FFFFFF;
display: none;
}
/*-------------
FLIGHT PATH
--------------*/
.flight-path{
position: relative;
font-size: 0px;
padding: 25px;
padding-top: 0px;
padding-bottom: 30px;
}
@media screen and (min-width: 1025px){
.flight-path{
padding: 20px;
padding-top: 0px;
padding-bottom: 30px;
}
}
.flight-path-title,
.route-info-title,
.hotels-cars-title{
position: relative;
font-size: 17px;
line-height: 29px;
font-weight: 700;
padding-left: 25px;
white-space: nowrap;
}
.route-info-title{
position: relative;
display: inline-block;
vertical-align: top;
width: calc(100% - 50px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media screen and (min-width: 1025px){
.flight-path-title,
.route-info-title,
.hotels-cars-title{
padding-left: 20px;
}
.route-info-title{
width: calc(100% - 40px);
}
}
.flight-path-title{
padding-left: 0px;
padding-bottom: 2px;
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.flight-path-title span,
.route-info-title span,
.hotels-cars-title span{
font-size: 13px;
line-height: 29px;
color: #757575;
font-weight: 400;
padding-left: 10px;
}
.flight-path-container{
position: relative;
border: 1px solid #DDDDDD;
border-radius: 4px;
max-height: 192px;
overflow: hidden;
overflow-y: auto;
}
/*
.flight-path-container::-webkit-scrollbar{
width: 0px;
height: 0px;
}
@media screen and (min-width: 1025px){
.flight-path-container::-webkit-scrollbar{
width: 12px;
height: 0px;
}
.flight-path-container::-webkit-scrollbar-track{
border-radius: 0px;
background: #EEEEEE;
}
.flight-path-container::-webkit-scrollbar-thumb{
border-radius: 0px;
background: #C1C1C1;
border-radius: 0px;
}
}
*/
.flight-path-via{
position: relative;
font-size: 13px;
line-height: 34px;
padding-left: 8px;
padding-right: 8px;
color: #333333;
border-bottom: 1px solid #EEE;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
}
.flight-path-via.active{
background: #D6EBFE;
color: #1988F9;
border-top: 1px solid #D6EBFE;
border-bottom: 1px solid #D6EBFE;
margin-top: -1px;
cursor: default;
}
.flight-path-via:last-child{
border-bottom: none;
}
.flight-path-via:not(.active):hover{
background: #F7F7F7;
}
.flight-path-via .fa-long-arrow-right{
padding-left: 3px;
padding-right: 3px;
}
.via-duration{
font-size: 11px;
line-height: 33px;
display: inline;
float: right;
white-space: nowrap;
}
.via-destination{
position: relative;
display: inline-block;
vertical-align: top;
width: calc(100% - 65px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
/*-------------
SHOW TICKETS BUTTON
--------------*/
.show-tickets{
position: fixed;
-webkit-transform: translatez(0);
right: 25px;
/*
bottom: 20px;
*/
bottom: 25px;
border-radius: 7px;
text-align: center;
z-index: 9;
color: #FFFFFF;
background: #00d775;
z-index: 9999;
display: none !important;
}
.show-tickets.hide{
display: none;
}
@media screen and (min-width: 1025px){
.show-tickets{
display: none;
}
}
.show-tickets-label{
padding: 25px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 17px;
line-height: 48px;
color: #FFFFFF;
font-weight: 500;
}
/*-------------
SHOW ROUTE BUTTON
--------------*/
.show-route{
position: absolute;
/*
-webkit-transform: translatez(0);
*/
right: 20px;
bottom: 24px;
bottom: 41px;
border-radius: 4px;
text-align: center;
z-index: 9;
color: #FFFFFF;
background: #007CFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
z-index: 9999;
}
.show-route.hide{
display: none;
}
@media screen and (min-width: 1025px){
.show-route{
display: none;
}
}
.show-route-label{
padding: 20px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 15px;
line-height: 48px;
color: #FFFFFF;
font-weight: 700;
}
/*-------------
SHOW CONNECTING FLIGHTS BUTTON
--------------*/
.show-connecting{
position: relative;
display: inline-block;
vertical-align: top;
margin-top: 20px;
border-radius: 7px;
text-align: center;
z-index: 9;
color: #FFFFFF;
background: #00d775;
}
.show-connecting-label{
padding: 25px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 17px;
line-height: 48px;
color: #FFFFFF;
font-weight: 500;
}
/*-------------
ROUTE FILTERS
--------------*/
.route-filters{
position: relative;
font-size: 0px;
padding: 25px;
padding-top: 15px;
padding-bottom: 5px;
}
/*-------------
ROUTE NOTIFICATIONS
--------------*/
.route-notifications{
position: relative;
font-size: 0px;
padding: 25px;
padding-top: 26px;
padding-bottom: 18px;
}
.small-height .route-notifications{
margin-right: 50px;
}
@media screen and (min-width: 1025px){
.route-notifications{
margin-right: 0px;
padding: 20px;
padding-top: 26px;
padding-bottom: 18px;
}
}
.route-notification{
position: relative;
margin-bottom: 5px;
font-size: 13px;
font-weight: 400;
line-height: 35px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.route-notification-icon{
position: relative;
display: inline-block;
vertical-align: top;
width: 22px;
height: 22px;
border-radius: 100px;
text-align: center;
margin-right: 10px;
line-height: 35px;
margin-top: 6px;
}
.route-notification.success{
background: #e5fbf1;
color: #00d775;
}
.route-notification.fail{
background: #FFDBE6;
color: #FE2F66;
}
.route-notification.info{
background: #D6EBFE;
color: #1988F9;
}
.success .route-notification-icon{
background: #00d775;
}
.fail .route-notification-icon{
background: #FE2F66;
}
.info .route-notification-icon{
background: #1988F9;
}
.route-notification-icon i{
position: relative;
display: inline-block;
vertical-align: top;
}
.success .route-notification-icon i{
-webkit-text-stroke: 2px #00d775;
text-stroke: 2px #00d775;
color: #FFF;
font-size: 17px;
line-height: 22px;
}
.fail .route-notification-icon i{
-webkit-text-stroke: 2px #FE2F66;
text-stroke: 2px #FE2F66;
color: #FFF;
font-size: 18px;
line-height: 22px;
}
.info .route-notification-icon i{
-webkit-text-stroke: 1px #1988F9;
text-stroke: 1px #1988F9;
color: #FFF;
font-size: 15px;
line-height: 22px;
}
/*-------------
Active filters
--------------*/
.active-filters{
display: none;
}
@media screen and (min-width: 1025px){
.active-filters{
position: absolute;
display: inline-block;
vertical-align: top;
top: 7px;
left: 16px;
left: 5px;
width: 240px;
z-index: 9;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
/*
.small .active-filters{
left: 30px;
}
*/
}
.active-filter{
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px;
margin-bottom: 1px;
font-size: 13px;
font-weight: 500;
line-height: 35px;
padding-left: 10px;
padding-right: 35px;
width: calc(100% - 53px);
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
background: #FFBF00;
color: #FFFFFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s; /* Firefox < 16 */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera < 12.1 */
animation: fadein 0.5s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*
.active-filter:nth-child(2),
.active-filter:nth-child(3){
margin-left: 20px;
width: calc(100% - 36px);
}
*/
.active-filter-value{
font-weight: 300;
}
.active-filter-close{
position: relative;
display: inline-block;
vertical-align: top;
width: 22px;
height: 22px;
border-radius: 100px;
text-align: center;
line-height: 35px;
margin-top: 6px;
background: #FFD24D;
font-weight: 400;
position: absolute;
right: 10px;
top: 0px;
}
.active-filter-close:hover{
background: #FFD966;
}
.active-filter-close i{
position: relative;
display: inline-block;
vertical-align: top;
-webkit-text-stroke: 2px #FFD24D;
text-stroke: 2px #FFD24D;
color: #FFF;
font-size: 18px;
line-height: 22px;
}
.active-filter-close:hover i{
-webkit-text-stroke: 2px #FFD966;
text-stroke: 2px #FFD966;
}
/*-------------
ROUTE SEGMENTS
--------------*/
.route-segments{
position: relative;
/*
margin-bottom: 30px;
*/
}
/*-------------
ROUTE INFO
--------------*/
.route-info{
position: relative;
margin: 25px;
margin-top: 10px;
/*
border-radius: 5px;
*/
border-radius: 4px;
border: 1px solid #EEE;
border: 0.5px solid #EEE;
/*
border-left: none;
border-right: none;
border-top: none;
*/
background: #FFFFFF;
/*
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
*/
padding-bottom: 5px;
border-radius: 4px;
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/*
border: none;
box-shadow: 0 3px 21px rgba(0,0,0,.1);
*/
}
.route-info:hover{
z-index: 999999999;
}
@media screen and (min-width: 1025px){
.route-info{
margin: 20px;
margin-top: 5px;
margin-bottom: 25px;
}
.leg-1,
.leg-2,
.leg-3{
margin-bottom: 30px;
}
}
.route-info.non-stop{
position: relative;
}
/*
.route-info:before {
content: "";
position: absolute;
background: url(../img/dashed-border.svg) left top repeat-y;
border-left: 1px dashed #C8C7CC;
width: 1px;
left: 1px;
top: 13px;
bottom: 15px;
}
*/
.route-info-flight{
position: relative;
font-size: 0px;
padding: 13px;
padding-top: 7px;
padding-bottom: 6px;
color: #333333;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
}
.route-info-flight:before{
position: absolute;
left: -6px;
top: 11px;
content: "";
display: inline-block;
font-size: 9px;
text-align: center;
line-height: 15px;
border: 1px solid #C8C7CC;
background: #FFFFFF;
vertical-align: top;
width: 14px;
height: 14px;
border-radius: 100px;
display: none;
}
.leg-1 .route-info-flight:before,
.leg-2 .route-info-flight:before,
.leg-3 .route-info-flight:before{
content: "1";
display: inline-block;
vertical-align: top;
font-size: 9px;
text-align: center;
line-height: 15px;
width: 15px;
height: 15px;
font-size: 10px;
/*
color: #333333;
*/
color: #757575;
border: 1px solid #C8C7CC;
background: #FFFFFF;
left: 8px;
top: 13px;
}
.leg-2 .route-info-flight:before{
content: "2";
}
.leg-3 .route-info-flight:before{
content: "3";
}
/*
.route-info:hover .route-info-flight{
color: #333333;
}
.leg-1:hover .route-info-flight:before,
.leg-2:hover .route-info-flight:before,
.leg-3:hover .route-info-flight:before{
background: #333333;
border-color: #333333;
}
*/
.route-info-route-duration{
position: absolute;
/*
top: 10px;
left: 8px;
*/
top: -14px;
right: 9px;
font-size: 0px;
padding: 5px;
font-size: 11px;
line-height: 17px;
font-weight: 400;
background: #FFFFFF;
color: #757575;
text-align: left;
}
.route-info-duration{
float: right;
margin-left: 10px;
}
/*
.route-info-distance,
.route-info-duration{
display: block;
}
*/
.route-info-route{
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 50%;
font-size: 14px;
line-height: 29px;
font-weight: 400;
}
.route-info-route.dep{
max-width: calc(50% - 15px);
}
.leg-1 .route-info-route.dep,
.leg-2 .route-info-route.dep,
.leg-3 .route-info-route.dep{
padding-left: 20px;
max-width: calc(50% - 35px);
}
.route-info-route.des{
max-width: calc(50% + 15px);
}
.route-info-route i{
padding-left: 9px;
padding-right: 8px;
font-size: 14px;
line-height: 29px;
}
.route-info-route-iata{
padding: 9px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
border-radius: 4px;
font-size: 13px;
line-height: 29px;
font-weight: 400;
display: none;
}
/*
.route-info-flight:hover .route-info-route-iata{
background: #F7F7F7;
}
*/
.route-info-route-airport{
font-size: 13px;
line-height: 29px;
font-weight: 500;
/*
padding-left: 5px;
padding-right: 5px;
*/
}
/*-------------
BOOK ROW
--------------*/
.book-row{
position: relative;
margin-top: -1px;
padding: 5px 10px;
padding-bottom: 2px;
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
/*
text-align: right;
*/
z-index: 999;
}
.book-row a{
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-tap-highlight-color: rgba(256,256,256,0.6);
outline: none;
}
/**************
SET DATES
**************/
.set-dates{
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
width: calc(100% - 150px);
margin: 4px 0px;
margin-right: 8px;
border-radius: 4px;
text-align: left;
z-index: 9;
background: #F7F7F7;
border: 1px solid #F7F7F7;
transition: box-shadow 0.2s ease;
/*
background: #FFFFFF;
border: 1px solid #DDDDDD;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.set-dates:hover{
border-color: #DDDDDD;
background: #FFFFFF;
box-shadow: 0 4px 10px rgba(0,0,0,.1);
}
@media screen and (min-width: 1025px){
.set-dates{
width: calc(100% - 150px);
}
}
.set-dates-icon,
.set-dates-label{
padding-top: 0px;
padding-bottom: 0px;
font-size: 13px;
line-height: 44px;
font-weight: 500;
}
.set-dates-icon{
padding: 0px 10px;
font-size: 15px;
}
.set-dates-icon.edit{
display: none;
}
/*
@media screen and (min-width: 400px){
.set-dates-icon.edit{
display: inline;
padding-left: 0px;
padding-right: 15px;
float: right;
color: #757575;
opacity: 0.5;
}
}
*/
@media screen and (min-width: 1025px){
.set-dates-icon,
.set-dates-label{
line-height: 41px;
}
}
/**************
BOOK FLIGHTS
**************/
.book-flights{
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
width: 140px;
margin: 4px 0px;
border-radius: 4px;
text-align: center;
z-index: 9;
color: #FFFFFF;
background: #00d775;
/*
-webkit-animation: flickerAnimation 2s linear infinite;
-moz-animation: flickerAnimation 2s linear infinite;
-o-animation: flickerAnimation 2s linear infinite;
animation: flickerAnimation 2s linear infinite;
border-radius: 100px;
background: -webkit-gradient(linear,left top,left bottom,from(#00d775),to(#00bd68));
background: -webkit-linear-gradient(top,#00d775,#00bd68);
background: -o-linear-gradient(top,#00d775 0,#00bd68 100%);
background: linear-gradient(-180deg,#00d775,#00bd68);
*/
overflow: hidden;
}
/*
@keyframes flickerAnimation {
0% { opacity:1; }
50% { opacity:0.3; }
100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
0% { opacity:1; }
50% { opacity:0.3; }
100% { opacity:1; }
}
*/
.book-flights:before {
transform: scale(1);
-webkit-animation: pulseblob 1s infinite linear;
-moz-animation: pulseblob 1s infinite linear;
-ms-animation: pulseblob 1s infinite linear;
-o-animation: pulseblob 1s infinite linear;
animation: pulseblob 1s infinite linear;
}
.book-flights:after {
-webkit-animation: pulseblob 1.5s 1s infinite linear;
-moz-animation: pulseblob 1.5s 1s infinite linear;
-ms-animation: pulseblob 1.5s 1s infinite linear;
-o-animation: pulseblob 1.5s 1s infinite linear;
animation: pulseblob 1.5s 1s infinite linear;
}
.book-flights:after, .book-flights:before {
content: '';
position: absolute;
top: calc(50% - 22px);
left: calc(50% - 22px);
background: rgba(255,255,255,.4);
border-radius: 100px;
opacity: 0;
width: 44px;
height: 44px;
z-index: 100;
}
.book-flights:after, .book-flights:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@keyframes pulseblob {
0% {
transform: scale(.2);
opacity: 0
}
33% {
transform: scale(1);
opacity: 1
}
100% {
transform: scale(3);
opacity: 0
}
}
@media screen and (min-width: 1025px){
.book-flights{
width: 140px;
}
}
/*
.book-flights:hover{
background: #00bd68;
}
*/
.book-flights:hover:after, .book-flights:hover:before{
animation: step-end;
}
.book-flights-label{
padding: 25px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 15px;
line-height: 48px;
color: #FFFFFF;
font-weight: 700;
}
@media screen and (min-width: 1025px){
.book-flights-label{
line-height: 43px;
}
}
.book-flights-label i{
font-size: 13px;
line-height: 48px;
padding-left: 5px;
display: none;
}
@media screen and (min-width: 1025px){
.book-flights-label i{
font-size: 13px;
line-height: 43px;
}
}
/*-------------
AIRLINE SCHEDULE
--------------*/
.airline-schedule{
position: relative;
font-size: 0px;
padding: 8px;
padding-top: 10px;
padding-left: 11px;
padding-right: 8px;
z-index: 999;
text-align: center;
border-bottom: 1px solid transparent;
border-bottom: 0.5px solid transparent;
border-top: 1px solid transparent;
border-top: 0.5px solid transparent;
margin-top: -1px;
margin-bottom: -1px;
}
.airline-schedule.open{
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
transition: border-color 0.4s;
}
.airline-schedule:first-child{
border-top: none;
}
.airline-schedule:last-child{
border: none;
}
.airline-schedule-row{
position: relative;
text-align: left;
height: 32px;
}
/*
.airline-schedule:before{
position: absolute;
left: -5px;
top: 11px;
font-family: FontAwesome;
content: "\f072";
display: inline-block;
color: #757575;
vertical-align: middle;
font-size: 17px;
-webkit-text-stroke: 1px #FFFFFF;
text-stroke: 1px #FFFFFF;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
*/
/*
.leg-1 .airline-schedule:before,
.leg-2 .airline-schedule:before,
.leg-3 .airline-schedule:before{
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
}
*/
.airline-schedule-airline{
position: relative;
display: inline-block;
vertical-align: top;
min-width: calc(100% - 187px);
}
.airline-schedule-airline-img{
position: relative;
display: inline-block;
vertical-align: top;
width: 26px;
height: 26px;
line-height: 28px;
margin-top: 2px;
border-radius: 5px;
overflow: hidden;
}
.airline-schedule-airline-img img{
display: inline-block;
vertical-align: top;
width:100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.airline-schedule-airline-name{
font-size: 13px;
line-height: 32px;
padding-left: 10px;
color: #333333;
display: inline-block;
vertical-align: top;
transition: opacity 0.4s;
}
/*
.airline-schedule-airline-name.small{
display: block;
padding-left: 0px;
font-size: 11px;
line-height: 39px;
transition: opacity 0.4s;
}
*/
/*-------------
AIRLINE SCHEDULE WEBSITE
--------------*/
.airline-schedule-website,
.click-to-show-validity{
position: absolute;
bottom: calc(100% + 17px);
left: 50%;
transform: translate(-50%, 0px);
background: #333333;
/*
box-shadow: 0 6px 21px rgba(0,0,0,.1);
*/
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
padding: 4px;
text-align: center;
}
.airline-schedule-website::after,
.click-to-show-validity::after{
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border-width: 4px;
border-style: solid;
border-color: #333333 transparent transparent transparent;
}
.airline-schedule-website p,
.click-to-show-validity p {
font-size: 12px;
line-height: 22px;
font-weight: 300;
letter-spacing: 0.3px;
padding-left: 7px;
padding-right: 7px;
color: #FFF;
}
.airline-schedule-airline:hover .airline-schedule-website{
visibility: visible;
opacity: 1;
bottom: calc(100% + 10px);
transition: all 0.3s;
}
.mobile-false .airline-schedule-days:hover .click-to-show-validity{
visibility: visible;
opacity: 1;
bottom: calc(100% + 10px);
transition: all 0.3s;
}
.airline-schedule.open .airline-schedule-days:hover .click-to-show-validity{
visibility: hidden;
}
/*-------------
AIRLINE SCHEDULE DAYS
--------------*/
.airline-schedule-days{
position: absolute;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
border-radius: 4px;
line-height: 23px;
/*
overflow: hidden;
*/
/*
right: 9px;
top: 8px;
top: 13px;
*/
right: -1px;
padding-right: 4px;
top: 2.5px;
cursor: pointer;
white-space: nowrap;
}
.airline-schedule.open .airline-schedule-days{
background: transparent;
border-color: transparent;
}
.airline-schedule-times{
position: absolute;
bottom: calc(100% + 14px);
left: 50%;
transform: translate(-50%, 0px);
background: #333333;
/*
box-shadow: 0 6px 21px rgba(0,0,0,.1);
*/
border-radius: 4px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
padding: 4px;
text-align: center;
}
.airline-schedule-times::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -4px;
border-width: 4px;
border-style: solid;
border-color: #333333 transparent transparent transparent;
}
.airline-schedule-times p{
font-size: 12px;
line-height: 22px;
font-weight: 300;
letter-spacing: 0.3px;
padding-left: 7px;
padding-right: 7px;
color: #FFF;
}
.airline-schedule-day.active:hover .airline-schedule-times{
visibility: visible;
opacity: 1;
bottom: calc(100% + 7px);
transition: all 0.3s;
}
.airline-schedule-day{
position: relative;
display: inline-block;
vertical-align: top;
font-size: 12px;
line-height: 22px;
margin-top: 1px;
margin-top: 0.5px;
font-weight: 300;
color: #757575;
/*
opacity: 0.35;
*/
width: 22px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
border-radius: 5px;
margin-left: 3px;
margin-right: 0px;
text-align: center;
/*
cursor: default;
*/
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.airline-schedule.open .airline-schedule-day{
opacity: 0;
transition: all 0.3s;
}
/*
.open .airline-schedule-day{
color: #333333;
font-weight: 400;
}
*/
@media screen and (min-width: 1025px){
.airline-schedule-days:hover .airline-schedule-day{
color: #333333;
font-weight: 400;
}
}
/*
#su{
padding-left: 4px;
}
#sa{
padding-right: 4px;
}
*/
.airline-schedule-day.active{
opacity: 1;
font-weight: 400;
cursor: pointer;
color: #333333;
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
}
/***
.airline-schedule-day.active:hover{
background: #EEEEEE;
}
***/
/*---------------------
UNFOLD ICON
----------------------*/
.unfold{
position: absolute;
display: inline-block;
vertical-align: top;
background: #FFFFFF;
padding: 1px 1px 0px 2px;
border-radius: 3px;
/*
right: -14.5px;
*/
right: -12.5px;
top: 2px;
top: 1.5px;
bottom: 0px;
}
.unfold::before {
position: absolute;
border-style: solid;
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
vertical-align: top;
height: 3px;
width: 3px;
left: 2px;
position: relative;
top: 4px;
transform: rotate(-45deg);
color: #757575;
background: #FFF;
}
.open .unfold::before{
transform: rotate(135deg);
top: 3px;
color: #333333;
}
.unfold::after {
position: absolute;
border-style: solid;
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
height: 3px;
width: 3px;
position: relative;
top: 4px;
left: -2px;
transform: rotate(135deg);
color: #757575;
background: #FFF;
}
.open .unfold::after {
transform: rotate(-45deg);
top: 6px;
color: #333333;
}
.airline-schedule-days:hover .unfold::before,
.airline-schedule-days:hover .unfold::after {
color: #333333;
}
/*---------------------
HOTELS-CARS BUTTON
----------------------*/
/*
.hotels-cars-wrapper{
margin-bottom: 60px;
}
@media screen and (min-width: 1025px){
.hotels-cars-wrapper{
margin-bottom: 35px;
}
}
*/
.hotels-cars {
position: relative;
margin: 25px;
margin-top: 15px;
margin-bottom: 0px;
border-radius: 4px;
/*
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
*/
overflow: hidden;
background: #FFFFFF;
/*
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 21px rgba(0,0,0,.1);
*/
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
white-space: nowrap;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*
position: absolute;
*/
}
/*
.car-hire{
display: none !important;
}
*/
.hotels{
margin-top: 10px;
}
.hotels.leg-2,
.hotels.leg-3{
margin-top: 30px;
}
@media screen and (min-width: 1025px){
.hotels-cars{
margin: 15px;
}
.hotels.leg-2,
.hotels.leg-3{
margin-top: 10px;
}
}
@media screen and (min-width: 1025px){
.hotels-cars{
transition: all 0.2s ease;
}
.hotels-cars:hover{
/*
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
*/
box-shadow: 0 6px 21px rgba(0,0,0,.1);
}
}
.hotels-cars-image{
/*
position: relative;
display: inline-block;
vertical-align: top;
height: 70px;
width: 80px;
*/
position: relative;
display: block;
vertical-align: top;
height: 100%;
width: 100%;
height: 150px;
opacity: 0.9;
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}
.hotels-cars:hover .hotels-cars-image{
opacity: 1;
-webkit-transition: opacity 300ms ease-in-out;
-moz-transition: opacity 300ms ease-in-out;
-o-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;
}
.hotels-cars-image img{
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.hotels-cars-background{
background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 3%, rgb(0, 0, 0) 100%);
opacity: 0.6;
position: absolute;
height: 60%;
width: 100%;
left: 0px;
bottom: 0px;
}
.hotels-cars-text{
position: relative;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 130px);
width: calc(100% - 26px);
text-align: left;
padding: 13px;
padding-top: 0px;
padding-bottom: 0px;
position: absolute;
bottom: 0px;
}
.hotels-cars-text::after{
position: absolute;
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
height: 8px;
width: 8px;
top: 5px;
right: 20px;
transform: rotate(45deg);
color: #FFFFFF;
}
.hotels-cars-text h3{
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
font-size: 13px; /*15*/
line-height: 70px;
font-weight: 500;
color: #FFFFFF;
font-size: 17px;
line-height: 40px;
}
.hotels-cars-text i{
color: #757575;
width: 30px;
}
/*-------------
CHECKBOX OPTIONS
--------------*/
.checkbox-option{
position: relative;
padding: 25px;
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
.skyscanner .checkbox-option{
position: relative;
white-space: nowrap;
line-height: 22px;
border: 6px solid #FFFFFF;
border-radius: 5px;
padding: 5px 0px;
}
@media screen and (min-width: 1025px){
.checkbox-option{
position: relative;
white-space: nowrap;
line-height: 22px;
border: 6px solid #FFFFFF;
border-radius: 5px;
padding: 0px;
}
}
/*
.alliance-options{
padding: 12px;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
}
*/
.alliance-options,
.airline-options{
padding: 0px;
/*
margin-left: 1px;
margin-right: 1px;
*/
margin-bottom: 1px;
overflow: hidden;
overflow-y: auto;
}
@media screen and (min-width: 1025px){
.alliance-options,
.airline-options{
padding: 12px;
max-height: 380px;
}
}
.airline-options{
margin-top: 73px;
}
@media screen and (min-width: 1025px){
.airline-options{
margin-top: 0px;
}
}
.airline-option{
position: relative;
display: block;
}
/*
.airline-options::-webkit-scrollbar{
width: 12px;
height: 0px;
}
.airline-options::-webkit-scrollbar-track{
border-radius: 100px 100px 0px 0px;
border-radius: 0px;
background: #EEEEEE;
}
.airline-options::-webkit-scrollbar-thumb{
border-radius: 0px;
background: #C1C1C1;
border-radius: 100px;
-webkit-box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.14);
-moz-box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.14);
box-shadow: inset 0px 0px 16px 0px rgba(0,0,0,0.14);
}
*/
.selected-airline-options-title h2,
.available-airline-options-title h2,
.all-airline-options-title h2{
padding: 25px;
padding-top: 30px;
padding-bottom: 7px;
background: #F7F7F7;
white-space: normal;
border-bottom: 1px solid #DDDDDD;
border-top: 1px solid #DDDDDD;
margin-top: 0px;
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: #757575;
text-transform: uppercase;
}
.available-airline-options-title h2,
.all-airline-options-title h2{
border-top: none;
}
@media screen and (min-width: 1025px){
.selected-airline-options-title h2,
.available-airline-options-title h2,
.all-airline-options-title h2{
padding: 0px;
color: #333333;
background: rgba(0,0,0,0);
border: none;
text-transform: none;
margin: 7px 8px;
padding-bottom: 7px;
white-space: normal;
border-bottom: 1px solid #DDDDDD;
font-weight: 500;
font-size: 13px;
line-height: 18px;
padding-top: 12px;
}
.selected-airline-options-title h2{
padding-top: 2px;
}
}
.checkbox-option-value{
display: inline-block;
vertical-align: top;
width: calc(100% - 32px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 300;
line-height: 22px;
color: #333333;
padding-right: 5px;
}
@media screen and (min-width: 1025px){
.checkbox-option.select,
.checkbox-option:hover {
border-color: #F7F7F7;
background: #F7F7F7;
}
}
.active .checkbox-option-value{
font-weight: 500;
color: #333333;
}
.checkbox-option-checkbox{
font-size: 13px;
font-weight: 400;
display: inline-block;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 20px;
height: 20px;
/*
float: left;
*/
margin-right: 10px;
border-radius: 4px;
border: 1px solid #C8C7CC;
line-height: 22px;
font-weight: 500;
text-align: center;
color: transparent;
background: rgba(256,256,256,0);
/*TIJDELIJK RADIO BUTTON*/
border-radius: 100px;
}
.airline-option .checkbox-option-checkbox{
border-radius: 4px;
}
.active .checkbox-option-checkbox{
background: #FFFFFF;
color: #333333;
border: 1px solid #C8C7CC;
/*TIJDELIJK RADIO BUTTON*/
background: #FFBF00;
color: #FFBF00;
box-shadow: inset 0px 0px 0px 4px #FFFFFF;
}
.airline-option.active .checkbox-option-checkbox{
color: #ffff;
border: 1px solid #FFBF00;
background: #FFBF00;
box-shadow: none;
}
/*
.checkbox-option.select .checkbox-option-checkbox{
border: 1px solid #C8C7CC;
}
.checkbox-option.active.select .checkbox-option-checkbox{
border: 1px solid #C8C7CC;
color: #333333;
color: #FFBF00;
}
*/
/*-------------
SHOW INDIRECT
--------------*/
.show-indirect{
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 4px;
margin-bottom: 5px;
font-size: 13px;
font-weight: 500;
line-height: 22px;
padding: 10px;
padding-top: 9px;
padding-bottom: 9px;
width: calc(100% - 28px);
border-radius: 4px;
white-space: nowrap;
overflow: hidden;
background: #FFFFFF;
/*
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
*/
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 0.5s; /* Firefox < 16 */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera < 12.1 */
animation: fadein 0.5s;
display: none;
}
/*
BLURRED BACKGROUND (NOT SUPPORTED IN ALL BROWSERS)
background: rgba(256,256,256, 0.7);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: none;
*/
.show-indirect-checkbox{
font-size: 13px;
font-weight: 400;
display: inline-block;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 20px;
height: 20px;
/*
float: left;
*/
margin-right: 10px;
/*
margin-left: 2px;
*/
border-radius: 4px;
border: 1px solid #C8C7CC;
line-height: 22px;
text-align: center;
color: rgba(256,256,256,0);
background: rgba(256,256,256,0);
}
.active .show-indirect-checkbox{
color: #333333;
border: 1px solid #C8C7CC;
background: #FFFFFF;
}
/*-------------
SEARCH AIRLINES
--------------*/
.search-airline{
position: fixed;
-webkit-transform: translatez(0);
top: 98px;
left: 0px;
right: 6px;
padding: 25px;
padding-right: 19px;
padding-top: 14px;
padding-bottom: 0px;
background: #FFFFFF;
z-index: 9;
/*
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
*/
white-space: nowrap;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
.mobile-false .search-airline{
padding-right: 25px;
right: 17px;
}
@media screen and (min-width: 1025px){
.search-airline{
position: relative;
top: auto;
left: auto;
right: auto;
padding: 18px;
padding-top: 18px;
padding-bottom: 0px;
border: none;
background: rgba(256,256,256,0);
}
.mobile-false .search-airline{
right: 0px;
}
}
.search-airline-container{
position: relative;
}
.search-airline-label{
position: absolute;
left: 0px;
display: inline-block;
vertical-align: top;
color: #C8C7CC;
font-size: 14px;
font-weight: 500;
line-height: 45px;
text-align: center;
width: 32px;
}
@media screen and (min-width: 1025px){
.search-airline-label{
line-height: 38px;
}
}
.search-airline-label i{
padding-left: 2px;
opacity: 0.9;
}
.search-airline-input{
position: relative;
display: block;
width: 100%;
z-index: 9;
font-weight: 500;
font-size: 14px;
text-indent: 32px;
line-height: 24px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(256,256,256,0);
border-radius: 5px;
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
}
@media screen and (min-width: 1025px){
.search-airline-input{
line-height: 38px;
padding: 0px;
height: 38px;
}
}
.search-airline-input:focus{
border-color: #1988F9;
box-shadow: 0 0px 3px #1988F9;
}
.search-airline-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #757575;
font-size: 14px;
}
.search-airline-input::-moz-placeholder { /* Firefox 19+ */
color: #757575;
font-size: 14px;
}
.search-airline-input:-ms-input-placeholder { /* IE 10+ */
color: #757575;
font-size: 14px;
}
.search-airline-input:-moz-placeholder { /* Firefox 18- */
color: #757575;
font-size: 14px;
}
/*-------------
RESET AIRLINES
--------------*/
.reset-airlines{
position: absolute;
right: 4px;
bottom: 4px;
display: inline-block;
vertical-align: top;
white-space: nowrap;
padding: 7px;
padding-left: 8px;
padding-right: 5px;
background: #ffbf00;
border: 1px solid #ffbf00;
border: 0.5px solid #ffbf00;
margin: 4px;
font-size: 13px;
line-height: 14px;
font-weight: 400;
border-radius: 4px;
z-index: 9;
/*
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
*/
display: none;
}
@media screen and (min-width: 1025px){
.reset-airlines{
right: 3px;
bottom: 3px;
padding: 5px;
padding-left: 8px;
padding-right: 5px;
line-height: 14px;
}
}
.reset-label{
letter-spacing: 0.3px;
color: #FFF;
}
.reset-airlines i{
margin-left: 4px;
-webkit-text-stroke: 1px #ffbf00;
text-stroke: 1px #ffbf00;
}
/*-------------
STOPS FILTERS
--------------*/
.stops-container{
position: relative;
padding: 18px;
padding: 12px;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(256,256,256,0);
}
@media screen and (min-width: 1025px){
.stops-option.disabled{
opacity: 0.3;
}
.stops-option.disabled:hover{
cursor: no-drop;
}
}
/*-------------
LOGIN STYLING
--------------*/
.signup-title,
.payment-title,
.login-title,
.session-title{
position: relative;
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.payment-title{
max-width: 340px;
margin: auto;
text-align: left;
}
.payment-plan{
padding: 0px 1px;
}
.payment-success-content{
position: relative;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
}
.session-title{
padding-top: 0px;
}
.signup-title h3,
.payment-title h3,
.login-title h3,
.session-title h3{
font-size: 30px;
line-height: 38px;
font-weight: 700;
color: #3a3a3a;
padding-bottom: 7px;
}
.signup-title h3{
padding-bottom: 0px;
}
.signup-title p,
.login-title p,
.session-title p{
color: #757575;
font-size: 16px;
line-height: 24px;
font-weight: 400;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.payment-success-content p{
color: #00bd68;
font-weight: 500;
font-size: 16px;
line-height: 24px;
}
.page-reload-link{
margin: 0px 30px;
}
/*-------------
PAYMENT
--------------*/
.payment-body h4,
.payment-body p{
color: #757575;
font-size: 16px;
line-height: 24px;
font-weight: 400;
max-width: 320px;
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align: top;
line-height: 24px;
padding: 0px;
}
.payment-body h4{
float: right;
background: #e5fbf1;
color: #00d775;
font-weight: 400;
padding: 4px 15px;
border-radius: 100px;
margin: 2px 0px;
}
.stripe-billed-annually{
display: block;
/*
color: #757575;
font-size: 13px;
line-height: 19px;
*/
font-size: 11px;
line-height: 15px;
font-weight: 400;
padding-top: 5px;
}
.payment-success-icon{
position: relative;
content: "";
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 38px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='currentColor'%3E%3Cpath d='M32 64C14.4 64 0 49.6 0 32S14.4 0 32 0s32 14.4 32 32-14.4 32-32 32zm0-61.3C15.8 2.7 2.7 15.8 2.7 32S15.8 61.3 32 61.3 61.3 48.2 61.3 32 48.2 2.7 32 2.7z' fill='%2300bd68'/%3E%3Cpath d='M27.9 44.1c-.4 0-.7-.2-1-.4L16.4 32.2c-.5-.5-.5-1.4.1-1.9.5-.5 1.4-.5 1.9.1l9.5 10.4L45.7 20c.5-.6 1.3-.6 1.9-.1.6.5.6 1.3.1 1.9L28.9 43.6c-.3.3-.6.5-1 .5z' fill='%2300bd68'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
width: 60px;
height: 60px;
margin-bottom: 20px;
margin-top: 40px;
}
/*-------------
STRIPE
--------------*/
/* Change Autocomplete styles in Chrome*/
.payment-body input:-webkit-autofill,
.payment-body input:-webkit-autofill:hover,
.payment-body input:-webkit-autofill:focus
.payment-body textarea:-webkit-autofill,
.payment-body textarea:-webkit-autofill:hover
.payment-body textarea:-webkit-autofill:focus,
.payment-body select:-webkit-autofill,
.payment-body select:-webkit-autofill:hover,
.payment-body select:-webkit-autofill:focus {
-webkit-text-fill-color: #575757;
-webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}
.payment-body label {
position: relative;
width: calc(100% - 30px);
color: #8898AA;
font-weight: 400;
font-size: 16px;
line-height: 22px;
height: 21px;
overflow: hidden;
padding: 15px;
margin-left: 0px;
margin-bottom: 15px;
display: flex;
flex-direction: row;
background-color: #fff;
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
border-radius: 3px;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.12);
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 3px 0 rgba(0,0,0,.12);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
/*
.group label:not(:last-child) {
border-bottom: 1px solid #F0F5FA;
}
*/
.payment-body label.payment-tax-id{
display: none;
}
.payment-body label > span {
width: auto;
text-align: right;
margin-right: 10px;
font-size: 15px;
font-weight: 500;
line-height: 20px;
color: #333333;
opacity: 0.8;
}
.payment-body .payment-field {
background: transparent;
font-weight: 400;
font-size: 16px;
border: 0;
color: #575757;
outline: none;
flex: 1;
padding-right: 0px;
padding-left: 0px;
cursor: text;
}
.payment-body .payment-field::-webkit-input-placeholder { color: #CBCBCB; }
.payment-body .payment-field::-moz-placeholder { color: #CBCBCB; }
.payment-body .payment-outcome {
float: left;
width: 100%;
padding-top: 12px;
min-height: 24px;
text-align: center;
font-weight: 500 !important;
font-size: 13px !important;
}
.payment-body .payment-success,
.payment-body .payment-error {
display: none;
font-size: 13px;
}
.payment-body .payment-success.visible,
.payment-body .payment-error.visible {
display: inline;
font-weight: 500 !important;
font-size: 13px !important;
}
.payment-body .payment-error {
color: #E4584C;
font-weight: 500 !important;
font-size: 13px !important;
}
.payment-body .payment-success {
color: #00bd68;
font-weight: 500 !important;
font-size: 13px !important;
}
.payment-body .payment-success .token {
font-weight: 600 !important;
font-size: 13px !important;
}
#payment-country-selection{
width: calc(100% - 60px);
cursor: pointer;
height: 52px;
margin-top: -15px;
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
}
/*-------------
PAY BUTTON
--------------*/
.pay-btn{
position: relative;
display: block;
width: 100%;
padding: 14px !important;
font-size: 19px;
line-height: 24px;
margin-top: 25px;
background-color: #00d775;
border-radius: 4px;
color: #FFFFFF;
font-weight: 600;
/*
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
text-shadow: 1px 1px 2px rgba(0,0,0,.15);
*/
}
.pay-btn:hover{
background-color: #00bd68;
}
/*-------------
USE HERE
--------------*/
.use-here p{
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
.use-here-buttons{
text-align: right;
margin-top: 30px;
font-size: 0px;
}
.use-here-close,
.use-here-btn{
position: relative;
display: inline-block;
vertical-align: top;
width: calc(50% - 33px);
max-width: 120px;
padding: 14px !important;
font-size: 19px;
line-height: 24px;
background: #00d775;
border-radius: 4px;
color: #FFFFFF;
font-weight: 600;
text-align: center;
}
.use-here-btn:hover{
background: #00bd68;
}
.use-here-close{
color: #757575;
font-weight: 400;
background: #FFFFFF;
margin-right: 10px;
}
.use-here-close:hover{
background: #F7F7F7;
}
/*-------------
SESSION BUTTON
--------------*/
.session-continue{
position: relative;
display: block;
max-width: 200px;
padding: 14px !important;
font-size: 19px;
line-height: 24px;
margin: auto;
margin-top: 10px;
background-color: #007CFF;
border-radius: 4px;
color: #FFFFFF;
font-weight: 600;
}
.session-continue:hover{
background-color: #0070e6;
}
/*-------------
FORM GROUPS
--------------*/
.form{
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 340px;
}
.signup-title a,
.login-title .choose-a-plan{
font-weight: 500;
color: #007cff;
text-decoration: underline;
}
.signup-title a:hover,
.login-title .choose-a-plan:hover{
color: #333333;
}
/*-------------
FORM GROUPS
--------------*/
.form-group{
position: relative;
margin-bottom: 15px;
}
.form-group h2{
font-size: 15px;
font-weight: 500;
line-height: 22px;
margin-bottom: 5px;
color: #333333;
opacity: 0.8;
}
/*-------------
INPUT FIELDS
--------------*/
.form-input{
display: block;
width: calc(100% - 28px);
padding: 14px !important;
font-size: 16px;
line-height: 20px;
color: #575757;
background-color: #fff;
border: 1px solid #ccc;
border: 0.5px solid #ccc;
border-radius: 3px;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.12);
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.12);
box-shadow: 0 2px 3px 0 rgba(0,0,0,.12);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #CBCBCB;
font-weight: 400;
}
::-moz-placeholder { /* Firefox 19+ */
color: #CBCBCB;
font-weight: 400;
}
:-ms-input-placeholder { /* IE 10+ */
color: #CBCBCB;
font-weight: 400;
}
:-moz-placeholder { /* Firefox 18- */
color: #CBCBCB;
font-weight: 400;
}
.form-input.input-error{
border-color: #E4584C;
border-left-width: 3px;
width: calc(100% - 32px);
}
/*-------------
ERROR
--------------*/
.form-error{
color: #E4584C;
margin-top: 8px;
font-size: 13px;
font-weight: 500;
line-height: 17px;
display: none;
}
/*-------------
FORM AGREEMENT
--------------*/
.form-agreement{
color: #575757;
margin-top: 12px;
font-size: 12px;
line-height: 17px;
}
.form-agreement a{
text-decoration: none;
color: #6288a5;
font-weight: 400;
}
.form-agreement a:hover{
text-decoration: underline;
}
/*-------------
FORM FOOTER LINKS
--------------*/
.form-footer-links{
text-align: center;
padding-top: 5px;
}
.form-footer-links .choose-a-plan,
.form-footer-links a{
display: block;
font-size: 14px;
color: #757575;
font-weight: 400;
line-height: 20px;
margin-bottom: 10px;
text-decoration: underline;
}
.form-footer-links .choose-a-plan:hover,
.form-footer-links a:hover{
color: #333333;
}
/*-------------
FORM BUTTON
--------------*/
.form-btn{
position: relative;
display: block;
width: 100%;
padding: 14px !important;
font-size: 19px;
line-height: 24px;
margin-top: 25px;
background-color: #007CFF;
border-radius: 4px;
color: #FFFFFF;
font-weight: 600;
/*
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
text-shadow: 1px 1px 2px rgba(0,0,0,.15);
*/
}
.form-btn:hover{
background-color: #0070e6;
}
#signup-popup .form-btn{
background-color: #00d775;
}
#signup-popup .form-btn:hover{
background-color: #00bd68;
}
.login .spinner {
display: none;
}
.form .spinner {
position: absolute;
display: inline-block;
top: 0px;
line-height: 24px;
margin: 14px !important;
right: 11px;
text-align: center;
border: 4px solid rgba(256,256,256,0.2); /* background color */
border-top: 4px solid rgba(256,256,256,1); /* destigogo solid */
border-radius: 50%;
width: 18px;
height: 18px;
-webkit-animation: form_spinner_rotate 0.3s infinite linear;
animation: form_spinner_rotate 0.3s infinite linear;
}
@-webkit-keyframes form_spinner_rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*-------------
REMEMBER ME
--------------*/
.form-remember{
font-size: 15px;
font-weight: 400;
line-height: 22px;
color: #575757;
}
.form-remember-checkbox{
font-size: 13px;
font-weight: 400;
display: inline-block;
vertical-align: top;
margin: 0px;
padding: 0px;
width: 20px;
height: 20px;
/* float: left; */
margin-right: 8px;
margin-left: 0px;
border-radius: 4px;
border: 1px solid #C8C7CC;
line-height: 22px;
text-align: center;
color: rgba(256,256,256,0);
background: rgba(256,256,256,0);
}
.active .form-remember-checkbox{
color: #333333;
border: 1px solid #C8C7CC;
background: #FFFFFF;
}
/*-------------
FAIR USE POLICY
--------------*/
.fair-use{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 999999;
/*
background: rgba(0,0,0,0.5);
background: rgba(256,256,256,0.9);
*/
background: rgba(0,0,0,0.8);
color: #fff;
display: none;
text-align: center;
}
@media screen and (min-width: 1025px){
.fair-use{
position: absolute;
}
}
.fair-use-container{
position: absolute;
top: 50%;
left: 50%;
padding: 50px 25px;
width: calc(100% - 50px);
/* background: #FFF; */
transform: translate(-50%, -50%);
-webkit-transition : opacity 0.3s ease-in-out;
-moz-transition : opacity 0.3s ease-in-out;
-ms-transition : opacity 0.3s ease-in-out;
-o-transition : opacity 0.3s ease-in-out;
transition : opacity 0.3s ease-in-out;
}
@media screen and (min-width: 600px){
.fair-use-container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 490px;
border-radius: 4px;
overflow: hidden;
}
}
/*-------------
FAIR USE HEADER
--------------*/
.fair-use-header{
padding-top: 7px;
padding-bottom: 7px;
/*
border-bottom: 1px solid #C8C7CC;
border-bottom: 0.5px solid #C8C7CC;
*/
z-index: 9;
}
.fair-use-header h3{
font-size: 30px;
line-height: 38px;
font-weight: 700;
}
/*-------------
FAIR USE CONTENT
--------------*/
.fair-use-content{
position: relative;
height: calc(100% - 98px); /* 100% - 97.5px height of popup-header + padding 30px */
/* smooth scroll iphone*/
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: 0px;
}
@media screen and (min-width: 1025px){
.fair-use-content{
height: calc(100% - 70px); /* 100% - 69.5px height of popup-header*/
padding-bottom: 0px;
}
}
.fair-use-btn {
position: relative;
display: block;
max-width: 250px;
margin-left: auto;
margin-right: auto;
padding: 14px !important;
font-size: 19px;
line-height: 24px;
margin-top: 20px;
background: #00d775;
border-radius: 4px;
color: #FFFFFF;
font-weight: 600;
}
.fair-use-member-btn{
background: #007CFF;
margin-top: 10px;
}
.fair-use-upgrade-btn{
background: #FFBF00;
}
.fair-use-btn:hover{
background: #00bd68;
}
.fair-use-member-btn:hover{
background: #0070e6;
}
.fair-use-upgrade-btn:hover{
background: #f0ae14;
}
.fair-use-login{
margin-bottom: 10px;
margin-top: 15px;
}
.fair-use-login a{
font-size: 14px;
color: #757575;
font-weight: 400;
line-height: 20px;
text-decoration: underline;
}
.fair-use-login a:hover{
/*
color: #333333;
*/
color: #FFFFFF;
}
.fair-use-group {
position: relative;
margin-bottom: 15px;
margin-top: 30px;
}
.fair-use-content h2{
font-size: 18px;
line-height: 32px;
font-weight: 500;
opacity: 0.8;
}
.fair-use-content h4{
font-size: 18px;
line-height: 32px;
font-weight: 500;
opacity: 0.8;
padding-top: 30px;
}
.fair-use-content p{
color: #757575;
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
.fair-use-questions {
position: relative;
margin-bottom: 15px;
margin-top: 50px;
}
.fair-use-questions p{
color: #575757;
color: #757575;
font-size: 12px;
line-height: 17px;
}
.fair-use-questions a {
text-decoration: none;
color: #6288a5;
font-weight: 400;
}
.fair-use-questions a:hover {
text-decoration: underline;
}
/*-------------
SESSION EXPIRED
--------------*/
.session-alarm{
background: url(/img/alarm.svg) no-repeat 50%;
width: 75px;
height: 75px;
animation: alarm .3s ease infinite;
margin: auto;
margin-bottom: 10px;
opacity: 0.3;
}
@-webkit-keyframes alarm {
0% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
25% {
-webkit-transform: rotate(5deg) scaleX(-1);
transform: rotate(5deg) scaleX(-1);
}
75% {
-webkit-transform: rotate(-5deg) scaleX(-1);
transform: rotate(-5deg) scaleX(-1);
}
100% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
}
@-moz-keyframes alarm {
0% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
25% {
-webkit-transform: rotate(5deg) scaleX(-1);
transform: rotate(5deg) scaleX(-1);
}
75% {
-webkit-transform: rotate(-5deg) scaleX(-1);
transform: rotate(-5deg) scaleX(-1);
}
100% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
}
@-o-keyframes alarm {
0% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
25% {
-webkit-transform: rotate(5deg) scaleX(-1);
transform: rotate(5deg) scaleX(-1);
}
75% {
-webkit-transform: rotate(-5deg) scaleX(-1);
transform: rotate(-5deg) scaleX(-1);
}
100% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
}
@keyframes alarm {
0% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
25% {
-webkit-transform: rotate(5deg) scaleX(-1);
transform: rotate(5deg) scaleX(-1);
}
75% {
-webkit-transform: rotate(-5deg) scaleX(-1);
transform: rotate(-5deg) scaleX(-1);
}
100% {
-webkit-transform: rotate(0deg) scaleX(-1);
transform: rotate(0deg) scaleX(-1);
}
}
/*-------------
FOOTER
--------------*/
.footer{
position: relative;
overflow: auto;
padding-top: 30px;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 20px;
font-size: 0px;
}
.footer .word-mark {
display: none;
}
@media screen and (min-width: 800px){
.footer .word-mark{
display: inline-block;
vertical-align: top;
}
}
.footer .word-mark-value {
margin-left: 0px !important;
}
@media screen and (min-width: 1025px){
.footer{
margin: 0px 25px;
margin-bottom: 20px;
padding-top: 40px;
max-width: 1155px;
}
}
@media screen and (min-width: 1205px){
.footer{
margin: 0px auto;
}
}
.footer h3{
font-size: 14px;
font-weight: 500;
line-height: 18px;
padding-top: 10px;
padding-bottom: 8px;
/*
color: #757575;
*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer li{
display: inline-block;
vertical-align: top;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.footer a{
font-size: 13px;
font-weight: 300;
line-height: 22px;
color: #757575;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
.footer a:hover{
text-decoration: underline;
text-decoration-color: #757575;
}
.pricing-link{
padding-top: 12px;
}
.pricing-link a{
padding-top: 10px;
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
}
.footer-left{
position: relative;
}
@media screen and (min-width: 1025px){
.footer-left{
position: relative;
display: inline-block;
vertical-align: top;
float: left;
}
}
.footer-right{
position: relative;
}
@media screen and (min-width: 1025px){
.footer-right{
position: relative;
display: inline-block;
vertical-align: top;
float: right;
text-align: right;
width: calc(100% - 300px);
}
}
.footer-right-container{
position: relative;
display: inline-block;
vertical-align: top;
width: 50%;
text-align: left;
padding-bottom: 25px;
}
@media screen and (min-width: 800px){
.footer-right-container{
position: relative;
display: inline-block;
vertical-align: top;
width: 25%;
text-align: left;
padding-bottom: 0px;
}
}
.footer-bottom{
position: relative;
margin: 50px 25px;
font-size: 0px;
}
@media screen and (min-width: 1205px){
.footer-bottom{
margin: 50px auto;
max-width: 1155px;
}
}
.footer-bottom p{
display: inline-block;
vertical-align: top;
font-size: 14px;
font-weight: 300;
line-height: 22px;
color: #757575;
}
.footer-bottom a{
display: inline-block;
vertical-align: top;
margin-left: 20px;
font-size: 13px;
font-weight: 300;
line-height: 22px;
color: #757575;
text-decoration: none;
}
.footer-bottom a:hover{
color: #007CFF;
}
/***
.stops-container{
position: relative;
margin: 14px;
white-space: nowrap;
border-radius: 5px;
overflow: hidden;
font-size: 0px;
}
.stops-option{
position: relative;
display: inline-block;
vertical-align: top;
width: calc(33.33% - 30px);
z-index: 9;
padding: 8px;
padding-left: 11px;
padding-right: 11px;
background: #FFFFFF;
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
margin: 4px;
font-size: 13px;
line-height: 17px;
font-weight: 500;
border-radius: 5px;
text-align: center;
}
.stops-option:not(.disabled):not(.active):hover{
background: #F7F7F7;
border-color: #F7F7F7;
}
.stops-option.active{
background: #007CFF;
border-color: #007CFF;
color: #FFFFFF;
}
.stops-option.disabled{
opacity: 0.3;
}
.stops-option.disabled:hover{
opacity: 0.3;
cursor: no-drop;
}
******************************/
/* FONT PATH
https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin
* -------------------------- */
/* roboto-300 - latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
font-display: fallback;
src: url('/fonts/roboto-v18-latin-ext-300.eot'); /* IE9 Compat Modes */
src: local('Roboto Light'), local('Roboto-Light'),
url('/fonts/roboto-v18-latin-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/roboto-v18-latin-ext-300.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/roboto-v18-latin-ext-300.woff') format('woff'), /* Modern Browsers */
url('/fonts/roboto-v18-latin-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/roboto-v18-latin-ext-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: url('/fonts/roboto-v18-latin-ext-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('/fonts/roboto-v18-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/roboto-v18-latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/roboto-v18-latin-ext-regular.woff') format('woff'), /* Modern Browsers */
url('/fonts/roboto-v18-latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/roboto-v18-latin-ext-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-display: fallback;
src: url('/fonts/roboto-v18-latin-ext-500.eot'); /* IE9 Compat Modes */
src: local('Roboto Medium'), local('Roboto-Medium'),
url('/fonts/roboto-v18-latin-ext-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/roboto-v18-latin-ext-500.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/roboto-v18-latin-ext-500.woff') format('woff'), /* Modern Browsers */
url('/fonts/roboto-v18-latin-ext-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/roboto-v18-latin-ext-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
font-display: fallback;
src: url('/fonts/roboto-v18-latin-ext-700.eot'); /* IE9 Compat Modes */
src: local('Roboto Bold'), local('Roboto-Bold'),
url('/fonts/roboto-v18-latin-ext-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/roboto-v18-latin-ext-700.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/roboto-v18-latin-ext-700.woff') format('woff'), /* Modern Browsers */
url('/fonts/roboto-v18-latin-ext-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/roboto-v18-latin-ext-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/********************
USED MAP LOADS
********************/
.map-loads-container{
position: relative;
display: none;
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
padding-top: 15px;
margin-top: 15px;
}
.map-loads-bar{
position: relative;
width: 100%;
height: 10px;
border-radius: 100px;
background: #EEE;
overflow: hidden;
}
.used-loads-bar{
position: relative;
height: 100%;
border-radius: 100px;
background: #00d775;
}
.used-loads-bar.map-loads-75{
background: #FFBF00;
}
.used-loads-bar.map-loads-90{
background: #d43242;
}
.map-loads-text{
font-size: 16px;
font-weight: 300;
line-height: 24px;
color: #333333;
padding-bottom: 10px;
}
.map-loads-text .used-loads{
float: right;
font-weight: 500;
}
/******************
SKYSCANNER
******************/
.skyscanner-buttons{
font-size: 0px;
padding: 0px;
margin-left: -10px;
white-space: nowrap;
}
.skyscanner-button{
position: relative;
display: inline-block;
font-size: 13px;
padding: 14px 12px;
/*
padding-left: 12px;
padding-right: 12px;
*/
border-radius: 4px;
color: #333333;
font-weight: 500;
z-index: 99;
}
.skyscanner-button:hover{
z-index: 999;
}
.skyscanner-button:last-child{
margin-right: 0px;
}
.skyscanner-label{
display: inline;
position: relative;
padding-right: 13px;
}
.skyscanner-label:after{
/*
position: absolute;
content: '\f0dd';
font-family: FontAwesome;
top: -1.5px;
right: 0px;
color: #757575;
opacity: 0.5;
transition: opacity 0.2s ease;
*/
position: absolute;
/*
left: 7px;
top: 4px;
*/
top: 4px;
right: 0px;
border-style: solid;
border-width: 1px 1px 0 0;
content: '';
display: inline-block;
height: 4px;
width: 4px;
transform: rotate(-225deg);
vertical-align: top;
color: #757575;
transition: all 0.2s ease;
}
.skyscanner-button:hover .skyscanner-label:after{
color: #333333;
opacity: 1;
}
.skyscanner-button.open .skyscanner-label:after{
transform: rotate(-45deg);
}
/*
@media screen and (min-width: 1025px){
.skyscanner-button:hover .skyscanner-label:after{
transform: rotate(-225deg);
}
}
*/
/**************
SELECT PASSENGERS
***************/
.passenger-options{
padding: 12px;
margin-bottom: 1px;
overflow: hidden;
overflow-y: auto;
width: 225px;
}
@media screen and (min-width: 1025px){
.passenger-options{
max-height: 266px;
}
}
/*-------------
PASSENGER OPTIONS
--------------*/
.passenger-option{
position: relative;
font-size: 0px;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
white-space: nowrap;
-webkit-tap-highlight-color: rgba(256,256,256,0);
line-height: 22px;
border: 6px solid #FFFFFF;
border-radius: 5px;
padding: 4px 0px;
}
.passenger-option-value{
display: inline-block;
vertical-align: top;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: #333333;
width: calc(100% - 116px);
}
.passenger-option-value span{
position: relative;
display: block;
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: #757575;
white-space: nowrap;
}
/*
@media screen and (min-width: 1025px){
.passenger-option.select,
.passenger-option:hover {
border-color: #F7F7F7;
background: #F7F7F7;
}
}
*/
.select-passengers{
display: inline-block;
vertical-align: top;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: #333333;
text-align: center;
}
.min,
.select-passengers span,
.plus{
display: inline-block;
vertical-align: top;
font-size: 17px;
font-weight: 400;
line-height: 40px;
width: 40px;
}
.select-passengers span{
font-size: 15px;
font-weight: 500;
}
.min,
.plus{
border-radius: 4px;
background: #F7F7F7;
line-height: 38px;
width: 38px;
border: 1px solid #F7F7F7;
cursor: default;
}
.min.active,
.plus.active{
background: #FFFFFF;
border: 1px solid #DDDDDD;
cursor: pointer;
}
.min.active:hover,
.plus.active:hover{
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/*-------------
VALIDITY
--------------*/
.validity-schedule {
position: relative;
display: inline-block;
vertical-align: top;
font-size: 0px;
/*
padding-left: 11px;
padding-right: 11px;
*/
z-index: 999;
/*
margin-bottom: 5px;
padding-bottom: 5px;
margin-right: 3px;
margin-top: 7px;
*/
/*
margin-top: -35px;
margin-bottom: 15px;
text-align: right;
display: none;
padding-left: 8px;
padding: 7px 0px 20px 8px;
padding: 7px 5px 20px 13px;
margin-top: -42px;
margin-top: -41.5px;
margin-bottom: -8px;
margin-bottom: -7.5px;
background: #FFFFFF;
border-left: 1px solid #FFFFFF;
border-left: 0.5px solid #FFFFFF;
*/
text-align: center;
display: none;
background: #FFFFFF;
/*
margin-left: -7px;
margin-right: -4px;
margin-top: 5px;
*/
margin-left: 10px;
margin-right: 13px;
margin-top: 5px;
}
/*
.airline-schedule.open .validity-schedule{
border-left: 1px solid #DDDDDD;
border-left: 0.5px solid #DDDDDD;
}
*/
.validity-schedule-row{
position: relative;
padding: 10px 0px;
padding-bottom: 9px;
border-top: 1px solid #EEE;
border-top: 0.5px solid #EEE;
display: flex;
align-items: center;
justify-content: space-between;
}
.validity-no-flights{
color: #e11423;
font-weight: 400;
font-size: 13px;
line-height: 19px;
}
.validity-schedule-times-dates {
position: relative;
display: inline-block;
vertical-align: top;
width: calc(100% - 183px);
}
.validity-schedule-times-dates p{
font-size: 13px;
line-height: 15px;
display: inline-block;
white-space: nowrap;
}
.validity-schedule-times .validity-flight-times{
position: relative;
text-align: left;
}
.validity-schedule-times .validity-flight-time{
display: inline-block;
vertical-align: top;
text-align: left;
}
.validity-schedule-times .validity-flight-time p{
font-size: 13px;
line-height: 15px;
display: inline-block;
white-space: nowrap;
}
.validity-schedule-times .validity-flightno-aircraft{
position: relative;
display: inline-block;
vertical-align: top;
width: 42px;
height: 28px;
padding-top: 1px;
margin-left: auto;
margin-right: 0px;
text-align: left;
}
.validity-schedule-times .validity-flightno-aircraft p{
font-size: 9px;
line-height: 14px;
text-align: left;
/*
color: #FFFF00;
*/
opacity: 0.7;
}
.validity-schedule-times .validity-flightno-aircraft .validity-aircraft{
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
position: absolute;
right: 0px;
width: 42px;
top: 14px;
}
.validity-schedule-times .validity-flightno-aircraft .validity-aircraft p {
display: inline-block;
padding-left: 100%;
padding-right: 25px;
animation: step-end;
width: 130px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.datepicker--cell-day:not(.-disabled-).active:hover .validity-schedule-times .validity-flightno-aircraft .validity-aircraft p {
animation: marquee 5.5s linear infinite;
}
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
.validity-schedule-times-dates .validity-times{
padding-right: 10px;
width: 77px;
font-weight: 700;
}
/*
.validity-schedule-times-dates .validity-times span{
font-weight: 700;
letter-spacing: 0.2px;
padding-right: 1px;
}
*/
.validity-schedule-times-dates .validity-dates{
font-size: 10px;
color: #757575;
font-weight: 300;
}
.validity-schedule-days {
position: relative;
line-height: 15px;
float: right;
display: inline-block;
height: 15px;
border-radius: 4px;
line-height: 23px;
background: transparent;
border: 1px solid transparent;
border: 0.5px solid transparent;
height: 23px;
/*
position: absolute;
border-radius: 4px;
line-height: 23px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border: 0.5px solid #FFFFFF;
right: -1px;
top: 7px;
*/
}
.validity-schedule-day {
position: relative;
display: inline-block;
vertical-align: top;
font-size: 12px;
line-height: 22px;
/*
margin-top: 1px;
margin-top: 0.5px;
*/
font-weight: 300;
color: transparent;
width: 22px;
background: transparent;
border: 1px solid transparent;
border: 0.5px solid transparent;
border-radius: 5px;
margin-left: 3px;
margin-right: 0px;
text-align: center;
cursor: default;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.validity-schedule-day.active{
font-weight: 400;
color: #333333;
border: 1px solid #C8C7CC;
border: 0.5px solid #C8C7CC;
background: #FFFFFF;
}
.validity-schedule-day i{
position: relative;
padding-left: 4px;
}
.show-schedules,
.hide-schedules{
position: relative;
text-align: right;
}
.hide-schedules{
position: absolute;
right: 0px;
/*
bottom: 7px;
*/
top: 9px;
z-index: 99;
display: inline-block;
vertical-align: top;
display: none;
}
/**
@media screen and (min-width: 1025px){
.hide-schedules{
bottom: auto;
top: 10px;
top: 9.5px;
z-index: 9;
}
}
**/
.show-schedules-btn,
.hide-schedules-btn{
position: relative;
color: #007cff;
font-weight: 400;
font-size: 11px;
line-height: 23px;
padding: 5px 11px;
border-radius: 4px;
display: inline-block;
letter-spacing: 0.1px;
}
.hide-schedules-btn{
color: #e11423;
padding-right: 12px;
}
@media screen and (min-width: 1025px){
.show-schedules-btn:hover,
.hide-schedules-btn:hover{
text-decoration: underline;
}
}
/*-------------
SELECT FLIGHTSCHEDULE
--------------*/
.select-flightschedule{
position: relative;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DDDDDD;
border: 0.5px solid #DDDDDD;
color: #333333;
transition: box-shadow 0.2s ease;
background: transparent;
background-image: none;
-webkit-appearance: none;
overflow: hidden;
margin: 25px;
margin-top: 5px;
margin-bottom: 30px;
width: calc(100% - 50px);
}
@media screen and (min-width: 1025px){
.select-flightschedule{
margin: 20px;
margin-top: 5px;
margin-bottom: 30px;
width: calc(100% - 40px);
}
.select-flightschedule:hover{
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
.select-flightschedule select {
padding: 9px 13px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
cursor: pointer;
font-weight: 700;
font-size: 15px;
line-height: 26px;
}
.select-flightschedule:after {
position: absolute;
top: 16px;
right: 20px;
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
height: 5px;
width: 5px;
transform: rotate(-225deg);
vertical-align: top;
color: #333;
transition: all 0.2s ease;
}
/***
.flights-hotels-cars-container{
position: fixed;
top: 80px;
padding: 10px 21px;
width: calc(100% - 42px);
background: #FFFFFF;
z-index: 99999999999999999 !important;
border-bottom: 1px solid #DDDDDD;
border-bottom: 0.5px solid #DDDDDD;
display: none;
}
@media screen and (min-width: 1025px){
.flights-hotels-cars-container{
top: 0px;
padding: 6px 14px;
width: calc(100% - 28px);
}
}
.flights-hotels-cars{
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 13px;
line-height: 17px;
font-weight: 500;
padding: 9px 0px;
margin: 6px;
width: calc(33.33% - 14px);
border: 1px solid #DDDDDD;
border-radius: 5px;
background: #FFFFFF;
}
.flights-hotels-cars:not(.active):hover{
background: #F7F7F7;
}
.flights-hotels-cars.active{
border-color: #007CFF;
background: #007CFF;
color: #FFF;
cursor: default;
}
***/
/*-------------
FULLSCREEN POPUP (ivm IFRAME)
--------------*/
.fullscreen-popup{
position: fixed;
-webkit-transform: translatez(0);
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 999999;
background: rgba(0,0,0,0.75);
display: none;
touch-action: manipulation;
}
.fullscreen-notice{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 50px);
max-width: 300px;
padding: 0px 25px;
height: auto;
color: #FFFFFF;
text-align: center;
}
.fullscreen-icon{
position: relative;
display: inline-block;
vertical-align: top;
width: 32px;
height: 32px;
padding: 4px;
border-radius: 5px;
border: 1px solid #FFFFFF;
margin-bottom: 15px;
opacity: 0.8;
}
.fullscreen-icon svg{
width: 100%;
height: 100%;
color: #FFFFFF;
stroke-width: 1;
}
.fullscreen-notice p{
font-size: 16px;
line-height: 22px;
font-weight: 400;
padding: 5px 0px;
opacity: 0.9;
}
.fullscreen-notice b{
font-weight: 600;
}
.fullscreen-seconds{
font-weight: 600;
visibility: visisble;
opacity: 1;
}
.fullscreen-seconds.hide{
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 200ms ease-in-out;
-moz-transition: opacity 200ms ease-in-out;
-o-transition: opacity 200ms ease-in-out;
transition: opacity 200ms ease-in-out;
}
.fullscreen-continue{
position: relative;
display: inline-block;
vertical-align: top;
white-space: nowrap;
margin-top: 20px;
border-radius: 4px;
text-align: center;
color: #00d775;
/*
border: 1px solid #00d775;
border: 0.5px solid #00d775;
*/
width: 150px;
padding-top: 0px;
padding-bottom: 0px;
font-size: 13px;
line-height: 40px;
font-weight: 700;
text-transform: uppercase;
pointer-events:visiblePainted;
pointer-events:auto;
touch-action: manipulation;
}
.fullscreen-continue:before {
transform: scale(1);
-webkit-animation: pulseblob 1s infinite linear;
-moz-animation: pulseblob 1s infinite linear;
-ms-animation: pulseblob 1s infinite linear;
-o-animation: pulseblob 1s infinite linear;
animation: pulseblob 1s infinite linear;
}
/*
.fullscreen-continue:after {
-webkit-animation: pulseblob 1.5s 1s infinite linear;
-moz-animation: pulseblob 1.5s 1s infinite linear;
-ms-animation: pulseblob 1.5s 1s infinite linear;
-o-animation: pulseblob 1.5s 1s infinite linear;
animation: pulseblob 1.5s 1s infinite linear;
}
*/
.fullscreen-continue:after,
.fullscreen-continue:before {
content: '';
position: absolute;
top: calc(50% - 22px);
left: calc(50% - 22px);
background: rgba(255,255,255,.05);
border-radius: 100px;
opacity: 0;
width: 44px;
height: 44px;
z-index: 100;
}
.fullscreen-continue:after,
.fullscreen-continue:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*-------------
FULLSCREEN BACK BUTTON
--------------*/
.fullscreen-back{
position: fixed;
-webkit-transform: translatez(0);
left: 15px;
top: 15px;
width: 40px;
height: 40px;
display: inline-block;
vertical-align: top;
border-radius: 100px;
white-space: nowrap;
font-size: 15px;
line-height: 42px;
font-weight: 400;
z-index: 999998;
display: none;
background: rgba(0,0,0,0.3);
color: #FFFFFF;
/*
color: #757575;
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
*/
}
@media screen and (min-width: 1025px){
.fullscreen-back{
left: 24px;
top: 24px;
}
}
.fullscreen-back svg{
width: calc(100% - 14px);
height: calc(100% - 14px);
margin: 7px;
margin-left: 5px;
}
.fullscreen .fullscreen-back{
display: inline-block;
vertical-align: top;
}
/*-------------
JOIN FLC
--------------*/
.join-flc{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 9999999999;
background: rgba(0,0,0,0.75);
text-align: center;
overflow: hidden;
display: none;
}
.join-flc-wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
overflow: hidden;
overflow-y: auto;
/*
-webkit-overflow-scrolling: touch;
*/
}
/*
@media screen and (min-height: 500px){
.join-flc-wrapper{
overflow-y: hidden;
}
}
*/
.join-flc-popup{
position: relative;
margin: auto;
background: #FFFFFF;
-ms-box-shadow: 0 0 20px rgba(0,0,0,0.5);
-o-box-shadow: 0 0 20px rgba(0,0,0,0.5);
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
@media screen and (min-width: 450px){
.join-flc-popup{
border-radius: 8px;
width: calc(100% - 30px);
max-width: 400px;
}
}
@media screen and (min-width: 600px){
.join-flc-popup{
border-radius: 8px;
width: calc(100% - 30px);
max-width: 650px;
}
}
.join-flc-popup.show{
transform: translateY(0px);
visibility: visible;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
.join-flc-popup.hide{
transform: translateY(100vh);
visibility: hidden;
-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.3s ease-in-out;
}
.join-flc-close{
position: absolute;
right: 8px;
top: 8px;
height: 30px;
width: 30px;
border-radius: 100px;
text-align: center;
z-index: 9999;
color: #757575;
cursor: no-drop;
}
.join-flc-close.btn{
cursor: pointer;
}
.join-flc-close-icon{
font-size: 20px;
line-height: 31px;
}
.join-flc-container{
position: relative;
padding: 25px 20px;
padding-top: 40px;
}
.join-flc-header{
padding: 7px 0px;
z-index: 9;
}
.join-flc-logo{
display: inline-block;
vertical-align: top;
/*
height: 40px;
width: 40px;
*/
margin-right: 0px;
}
.join-flc-header h3{
font-size: 26px;
line-height: 38px;
font-weight: 700;
letter-spacing: 1px;
white-space: nowrap;
}
.join-flc-header h3 span{
font-weight: 300;
}
.join-flc-header h4{
font-size: 13px;
color: #757575;
font-weight: 700;
letter-spacing: 3px;
display: inline-block;
padding: 0px 10px;
border-radius: 4px;
margin-left: 0px;
font-size: 15px;
line-height: 20px;
letter-spacing: 4px;
color: #b9b18e;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.join-flc-shade {
position: absolute;
margin: -2px 0 0;
margin: -2.5px 0 0;
padding: 0;
display: inline-block;
background: #FFFFFF;
width: 100px;
height: 12px;
opacity: 0.25;
text-align: center;
}
.join-flc-content{
position: relative;
display: inline-block;
text-align: left;
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
font-size: 0px;
width: 100%;
max-width: 340px;
}
@media screen and (min-width: 600px){
.join-flc-content{
display: inline-block;
vertical-align: top;
width: 50%;
max-width: none;
}
}
.join-flc-btn{
position: relative;
display: block;
width: 100%;
padding: 14px !important;
font-size: 19px;
line-height: 30px;
background-color: #00d775;
border-radius: 8px;
margin-bottom: 15px;
color: #FFFFFF;
font-weight: 600;
}
@media screen and (min-width: 600px){
.join-flc-btn{
line-height: 24px;
}
}
.join-flc-btn:hover{
background-color: #00bd68;
}
.join-flc-features {
position: relative;
/*
padding: 15px 0px;
margin: 10px 0px;
*/
font-size: 15px;
line-height: 19px;
text-align: left;
/*
border-top: 1px solid #DDDDDD;
border-top: 0.5px solid #DDDDDD;
*/
padding-top: 15px;
}
/*
@media screen and (min-width: 365px){
.join-flc-features {
margin: 10px;
}
}
*/
.join-flc-feature {
position: relative;
padding: 8px 0px;
padding-left: 30px;
}
.join-flc-feature::before {
position: absolute;
left: 0px;
top: 4px;
content: "";
display: inline-block;
vertical-align: top;
font-size: 11px;
text-align: center;
line-height: 15px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='currentColor'%3E%3Cpath d='M32 64C14.4 64 0 49.6 0 32S14.4 0 32 0s32 14.4 32 32-14.4 32-32 32zm0-61.3C15.8 2.7 2.7 15.8 2.7 32S15.8 61.3 32 61.3 61.3 48.2 61.3 32 48.2 2.7 32 2.7z' fill='%23ffffff'/%3E%3Cpath d='M27.9 44.1c-.4 0-.7-.2-1-.4L16.4 32.2c-.5-.5-.5-1.4.1-1.9.5-.5 1.4-.5 1.9.1l9.5 10.4L45.7 20c.5-.6 1.3-.6 1.9-.1.6.5.6 1.3.1 1.9L28.9 43.6c-.3.3-.6.5-1 .5z' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
background-size: cover;
width: 26px;
height: 26px;
border-radius: 100px;
}
.join-flc-login {
text-align: center;
padding-top: 5px;
padding-bottom: 10px;
}
.join-flc-login p {
display: inline-block;
font-size: 14px;
color: #757575;
font-weight: 400;
line-height: 20px;
text-decoration: underline;
cursor: pointer;
}
.join-flc-login p:hover{
color: #333333;
}
/**************
FLC PLANS
**************/
.join-flc-plans {
position: relative;
border-radius: 4px;
white-space: nowrap;
margin: 15px 0px;
}
.join-flc-plan-container{
border-radius: 6px;
margin: 2px;
}
.join-flc-plan {
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
font-size: 11px;
letter-spacing: 0.5px;
line-height: 30px;
font-weight: 500;
text-transform: uppercase;
width: calc(33% - 6px);
border: 2px solid #FFFFFF;
}
.join-flc-plan.active {
border: 2px solid #333333;
border-radius: 6px;
border-color: #b9b18e;
box-shadow: 0 0px 3px #b9b18e;
}
.join-flc-plan:nth-child(2){
margin: 0px 4px;
}
.join-flc-plan-title,
.join-flc-plan-name,
.join-flc-plan-price,
.join-flc-plan-recurring{
height: 30px;
background: #F7F7F7;
}
.join-flc-plan-title{
background: #333333;
color: #FFFFFF;
border-radius: 4px 4px 0px 0px;
height: 36px;
line-height: 36px;
white-space: nowrap;
overflow: hidden;
}
#flc-monthly .join-flc-plan-title{
background: #F7F7F7;
}
/*
.active .join-flc-plan-name,
.active .join-flc-plan-price,
.active .join-flc-plan-recurring,
#flc-monthly.active .join-flc-plan-title{
background: #FFFFFF;
}
*/
.join-flc-plan-name{
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
}
.join-flc-plan-price{
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
}
.join-flc-plan-recurring{
font-size: 10px;
font-weight: 400;
border-radius: 0px 0px 4px 4px;
}
.join-flc-term{
position: relative;
padding-top: 5px;
padding-bottom: 15px;
text-align: center;
display: none;
}
#terms-annual{
display: block;
}
.join-flc-term p{
font-size: 11px;
line-height: 15px;
font-weight: 400;
text-align: center;
}
.join-flc-term b{
font-size: 11px;
line-height: 15px;
font-weight: 600;
text-align: center;
}