body{
    font-family: "Agenda";
}

.bg-overlay{
    width: 100%;
    height: 100vh;
    position: fixed; /* Sit on top of the page content */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2); /* Black background with opacity */
    z-index: 0; /* Specify a stack order in case you're using a different order for other elements */
}

.homepage-wrapper{
  background: url('../images/bg-homepage.jpg');  
  background-repeat: no-repeat;
  background-size: cover;
  height: calc(100vh + 250px);
  width: 100%;
  min-height: 723px;
}

.page-content{
    height:100vh;
    position: relative;
    min-height: 723px;
}

.body-copy-1{
    font-family: 'Agenda-Medium';
    font-weight: normal;
    font-size: 18px;
}

a{
    color: #3D3D3D;
    text-decoration: underline;
}
a:hover, 
a:visited{
    color: #3D3D3D;
    text-decoration: underline;
}


.logo-wrapper{
    background-color: #4ab6c2;
    padding: 1rem 1rem;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

h1.headline{
    font-style: normal;
    font-weight: 700;
    font-size: 62px;
    line-height: 74px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: #000000 2px 1px 10px;
    display: block;
}

h1.headline span{
    font-weight: 400;
}

.headline-caption{
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    text-align: center;
    text-align: center;
    color: #FFFFFF;
    text-shadow: #000000 2px 1px 10px;
}


.page-content .top-wrapper{
    height: 250px;
    position: relative;
}
.page-content .top-wrapper .headline-wrapper{
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
}

.page-content .bottom-wrapper{
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.page-content .bottom-wrapper .content{
    position:relative;
    height: 375px;
}
.page-content .bottom-wrapper .content .cta-wrapper{
    text-align: center; 
    position: absolute; 
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
.page-content .bottom-wrapper .content .blurb-wrapper{
    position: absolute; 
    right:0px;
}



.continent-selector-wrapper{
    background: url('../images/bg-continent.png');  
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin-top: -280px;
    padding: 250px 0;
}
.continent-selector-wrapper .top-wrapper{
    height: calc(100vh - 80px);
    max-height: 1050px;
    
}
.continent-selector-wrapper .middle-wrapper{
    height: 100vh;
    text-align: center;
    margin-top: 5rem;
}
.continent-selector-wrapper .middle-wrapper .continent-wrapper{
    width: 100%;
}

.continent-selector-wrapper .middle-wrapper h2{
    color: #3D3D3D;
    font-size: 43px;
    margin-bottom: 5rem;
    display: block;
}

.continent-selector-wrapper .top-wrapper .headline-wrapper{
    position: relative;
}


.st0{fill:#375063;} /* EUROPE */
.st1{fill:#5A859E;} /* AFRICA */
.st2{fill:#37586D;} /* SOUTH AMERICA */
.st3{fill:#308FA5;} /* NORTH AMERICA */
.st4{fill:#0089A0;} /* AUSTRALIA */
.st5{fill:#D1111C;}
.st6{fill:#E84621;}
.st7{fill:#569EBA;} /* ASIA */
.st8{fill:none;}
.st9{fill:#FFFFFF;     cursor: pointer;}
.st10{font-family:'PTSans-Bold';}
.st11{font-size:48px;}
.st12{letter-spacing:9;}
.st13{font-size:34.992px;}
.st14{letter-spacing:6;}


.continent:hover > polygon,
.continent:hover > path,
.continent.active > polygon,
.continent.active > path{
    fill: #5E5E5E !important;
    cursor: pointer;
}

.content-label{
    cursor: pointer;
}


.country-selector-wrapper{
    background-image: url('../images/bg-africa.png');  
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    width: 100%;
    min-height: 900px;
    background-position: center;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}
.country-selector-wrapper .top-wrapper{
    padding: 5rem 0rem;
    height: auto;
    
}
.country-selector-wrapper .middle-wrapper{
    margin-top: 2rem;
    height: auto;
    text-align: center;
    
}
h4{
    color: #ffffff;
}

.country-list-wrapper{
    margin-top: 1rem;
    text-align: left;
}

.country-list-wrapper{
    height: 400px;
    overflow-y: scroll;
    padding: 0.5rem 1rem;
}

.country-list-wrapper .list-group{

}

.country-list-wrapper .list-group .list-group-item{
    text-transform: uppercase;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    font-size: 19px;
    font-family: "Agenda-Semibold";
    line-height: 24px;
    border: 1px solid #cccccc;
    background-color: rgba(255,255,255,0.8);
}
.country-list-wrapper .list-group .list-group-item input{
    margin: 0;
    margin-right: 1rem;
    
}

.country-list-wrapper .list-group .list-group-item label {
    display: inline-block;
    font-size: 22px;
    line-height: 20px;
}

.country-hover i{
    font-size: 28px;
    margin-right: 1rem;
}

.country-hover i.bi-check-square{
    font-size: 26px;
}

.country-hover i.bi-app{
    font-size: 26px;
}

.country-list-wrapper .list-group .list-group-item.country-hover:hover,
.country-list-wrapper .list-group .list-group-item.country-hover.active {
    color: #ffffff;
    border: 1px solid #3D3D3D;
    background-color: #3D3D3D;
    cursor: pointer;
}

.continent-name-wrapper{
    font-weight: bold;
    text-transform:uppercase;
    font-family: 'Agenda-Bold';
}


.results-wrapper{
    background: url('../images/bg-result-page.png');  
    background-repeat: no-repeat;
    background-size: cover;
    height:100vh;
    width: 100%;
    background-position: fixed;
}
.results-wrapper .top-wrapper{
    padding: 3rem 0rem 2rem;
    height: auto;
    
}

.where-to-next-wrapper .masthead-wrapper{

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height:100vh;
    max-height: 1050px;
    width: 100%;
    background-position: fixed;  
}

.where-to-next-wrapper .logo-main-wrapper{
    position: absolute;
    top: 0;
}

.where-to-next-wrapper .middle-wrapper{
    margin-top: 2rem;
}
.where-to-next-wrapper .middle-wrapper h3{
    font-weight: bold;
}


.where-to-next-wrapper .deals-wrapper{
    /* background-color: #F4F4F4; */
    padding: 3rem 0rem;
    margin-top: 2rem;
}

.where-to-next-wrapper .deals-wrapper h3{
    font-weight: bold;
}

.where-to-next-wrapper .bottom-wrapper{
    margin: 3rem 0rem;
}

.strong{
    font-weight: bold;
}




.travel-profile-wrapper{
    position: relative;
}

.travel-profile-wrapper .download-overlay{
    position: absolute;
    visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.2); /* Black background with opacity */
    z-index: 0; /* Specify a stack order in case you're using a different order for other elements */    
}

.travel-profile-wrapper .download-overlay a{
    font-size: 14px;
}

.travel-profile-wrapper:hover .download-overlay{
    visibility: visible;
}

a.btn-teal{
    border: 1px solid #4ab6c2;
    background-color: #4ab6c2;
    color: #fff!important;
    border-radius: 0;
    font-style: normal;
    text-decoration: none;
    font-family: 'Agenda-Semibold';
    text-align: center;
    font-size: 18px;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.8rem 1rem;
    width: 250px;
    height: 55px;
    letter-spacing: 0.1rem;
}
a.btn-teal:hover {
    color: #fff!important;
    border: 1px solid #4ab6c2;
    background-color: #4ab6c2;
}

a.btn-white-outline{
    border: 1px solid #3D3D3D;
    background-color: #ffffff;
    color: #3D3D3D;
    border-radius: 0;
    font-style: normal;
    text-decoration: none;
    font-family: 'Agenda-Semibold';
    text-align: center;
    font-size: 18px;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    letter-spacing: 0.1rem;
}
a.btn-white-outline:hover {
    color: #fff;
    border: 1px solid #3D3D3D;
    background-color: #3D3D3D;
}


a.btn-grey{
    border: 1px solid #3D3D3D;
    background-color: #3D3D3D;
    color: #ffffff;
    border-radius: 0;
    font-style: normal;
    text-decoration: none;
    font-family: 'Agenda-Semibold';
    text-align: center;
    font-size: 18px;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    letter-spacing: 0.1rem;
}
a.btn-grey:hover {
    color: #3D3D3D;
    border: 1px solid #3D3D3D;
    background-color: #ffffff;
}

a.btn-wide{
    width: 320px;
}

a.btn-grey .sub-caption{
    font-size: 10px;
    font-weight: normal;
    font-family: 'Agenda-Medium';
    text-transform: none;
    line-height: 11px;
}


button.btn-grey{
    border: 1px solid #3D3D3D;
    background-color: #3D3D3D;
    color: #ffffff;
    border-radius: 0;
    font-style: normal;
    text-decoration: none;
    font-family: 'Agenda-Semibold';
    text-align: center;
    font-size: 18px;
    display: inline-block;
    text-transform: uppercase;
    padding: 0.6rem 1rem;
    letter-spacing: 0.1rem;
}
button.btn-grey:hover {
    color: #3D3D3D;
    border: 1px solid #3D3D3D;
    background-color: #ffffff;
}

button.btn-wide{
    width: 320px;
}

button.btn-grey .sub-caption{
    font-size: 10px;
    font-weight: normal;
    font-family: 'Agenda-Medium';
    text-transform: none;
    line-height: 11px;
}



a.try-again{
    font-size: 16px;
}

#modalCountrySelector .modal-dialog{
    max-width: 100%;
    margin: 0;
}

#modalCountrySelector .modal-dialog .modal-content{
    height: 100vh;
    border-radius: 0;
    border:0 ;

}


.coupon-wrapper{
    width: 546px;
    height: 178px;
    background-image: url(../images/bg-klook-promo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin: 0 auto;
}

.coupon-wrapper .left-wrapper{
    position: absolute;
    right: 35px;
    top:40px;
}
.coupon-wrapper .promo-code-wrapper{
    width: 230px;
    text-align: left;
}
.coupon-wrapper .promo-code-wrapper .label{
    font-size: 18px;
}
.coupon-wrapper .promo-code-wrapper .promo-code{
    font-size: 25px;
    padding: 5px 0rem;
    line-height: normal;
    width: 100%;
    text-align: center;
    border: dashed 1px #5E5E5E;
    font-family: "Agenda-Semibold";
}

.deal-in-text{
    font-size: 32px;
    text-decoration: none;
    letter-spacing: 2px;
    height: 100%;
}
.deal-in-text a,
.deal-in-text a:hover{
    font-size: 32px;
    text-decoration: none;
    letter-spacing: 2px;
}

#recommended_country_name{
    font-style: normal;
    font-weight: 700;
    font-size: 62px;
    line-height: 74px;
    text-align: center;
    color: #FFFFFF;
    text-shadow: #000000 2px 1px 10px;
    display: block;
}

.txt-klook{
    color:#E5642A;
}

@media (max-width: 650px) {

    .homepage-wrapper{
        background: url('../images/bg-homepage-mob.png');  
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 667px;
    }
    .page-content{
        min-height: 667px;
    }
      
    .logo-wrapper{
        width: 250px;
        padding: 0.7rem 1rem;
    }

    h1.headline{
        font-style: normal;
        font-weight: 700;
        font-size: 28px;
        line-height: 28px;
        text-align: center;
        color: #FFFFFF;
    }
    .continent-selector-wrapper .middle-wrapper{
        height: auto;
    }
    .continent-selector-wrapper .middle-wrapper h2{
        font-weight: 700;
        font-size: 28px;  
    }
    .headline-caption{
        margin-top: 1rem;
        font-style: normal;
        font-weight: 300;
        font-size: 14px;
        text-align: center;
        text-align: center;
        color: #FFFFFF;
        line-height: 18px;
    }
    .page-content .bottom-wrapper {
        position: absolute;
        bottom: 0px;
        width: 100%;
    }
    .page-content .bottom-wrapper .content{
        position: initial;
        height: auto;
    }
    .page-content .bottom-wrapper .content .blurb-wrapper {
        position: relative;
        margin-bottom: 25px;
    }
    .page-content .bottom-wrapper .content .blurb-wrapper img{
        width: 300px;
    }    
    .page-content .bottom-wrapper .content .cta-wrapper {
        text-align: center;
        position: relative;
    }
    .coupon-wrapper {
        width: 100%;
    }
    .coupon-wrapper .left-wrapper {
        right: 35px;
        top: 55px;
    }
    .coupon-wrapper .promo-code-wrapper {
        width: 130px;
    }
    .coupon-wrapper .promo-code-wrapper .label {
        font-size: 16px;
    }
    .coupon-wrapper .promo-code-wrapper .promo-code {
        font-size: 12px;
        padding: 0.3rem 10px;
    }
    .coupon-wrapper .promo-code-wrapper .validity {
        font-size: 12px;
    }
    
    .country-selector-wrapper .top-wrapper{
        padding: 3rem 0rem;
    }
    
    .country-selector-wrapper .middle-wrapper {
        margin-top: 1rem;
    }
    
    #recommended_country_name {
        margin-top: 10px;
        font-size: 43px;
        line-height: 37px;
    }
}
/* [+] CUSTOM SCROLL BAR */

/* width */
.slim-scroll::-webkit-scrollbar {
  width: 5px;
}

/* Track */
.slim-scroll::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.slim-scroll::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
.slim-scroll::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* [-] CUSTOM SCROLL BAR */

.arrow-down-wrapper{
    position: absolute;
    top: calc(100vh - 50px);
    width: 100%;
    text-align: center; 
    cursor: pointer;
    margin-left: -15px;
}
.chevron::before {
	border-style: solid;
	border-width: 0.15em 0.15em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(-45deg);
	vertical-align: top;
	width: 0.45em;
    top: 0;
	transform: rotate(135deg);
    font-size: 55px;
    color: #4ab6c2;
}


.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.disabled-link{
    cursor: default;
    pointer-events: none;        
    text-decoration: none;
    background-color: #d1d1d1 !important;    
    border: 1px solid #d1d1d1 !important;
    color: #ffffff  !important;
}