html,
body,
input {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
/* this is to prevent apple products from styling buttons and text boxes with standard apple ui elements */
input:not([type="radio"]):not([type="checkbox"]) {
-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;
}
html,
body {
margin: 0;
padding: 0;
/*width: 100%;
height: 100%; */
overflow-x: hidden;
font-size: 10px; /*100%;*/
/*left: 0;*/
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/******************************************************
Common utility classes
******************************************************/
.hidden {
display: none;
}
.invisible {
opacity: 0.0 !important;
-moz-opacity: 0.0 !important;
}
.fixed {
position: fixed;
}
.alpha80 {
background: url(http://images.africatravelresource.com/cdn/images/bg-blk-alpha-80.png) repeat scroll 0 0 transparent;
}
.alpha60 {
background: url(http://images.africatravelresource.com/cdn/images/bg-blk-alpha-60.png) repeat scroll 0 0 transparent;
}
.descriptive-font {
font-family: "BaskervilleOldFaceW01";
font-size: 14px;
letter-spacing: 0.5px;
color: #828282;
}
.script-font {
font-family: 'Nothing You Could Do', cursive;
}
.white {
color: #fff;
}
.green {
/*color: #99ff00;*/
/*color: rgba(85, 230, 127, 1.0);*/
color: #46bc68;
}
.bold {
font-weight: bold;
}
.text-center {
text-align: center;
}
.grey-background {
background-color: #606060;
}
.grey-background:hover {
background-color: #555555 !important;
}
/******************************************************
Main Layout
******************************************************/
#body-wrapper {
position: relative;
overflow: hidden;
}
#page-wrapper {
position: relative;
background-color: #fff;
}
/******************************************************
Page Banner
******************************************************/
#page-banner {
z-index: 2000;
position: fixed;
top: 0;
left:0;
width:100%;
height: 90px;
opacity: 1.0;
-moz-opacity: 1.0;
background-color: rgba(0, 0, 0, 0.0);
-moz-transition: opacity 0.7s ease-in-out, background-color 0.4s ease-in-out;
-webkit-transition: opacity 0.7s ease-in-out, background-color 0.4s ease-in-out;
transition: opacity 0.7s ease-in-out, background-color 0.4s ease-in-out;
}
#page-banner.faded {
opacity: 0.4;
-moz-opacity: 0.4;
}
#page-banner.hidden {
opacity: 0.0;
-moz-opacity: 0.0;
}
#page-banner.solid {
background-color: rgba(0, 0, 0, 1.0);
}
#page-banner .stack-left {
float: left;
padding: 33px 0 0 33px;
}
#page-banner .stack-right {
float: right;
padding:33px 24px 0 0;
}
/****************************************************
Main logo
*****************************************************/
#logo-wrapper {
position: absolute; /* changed from fixed to absolute to fix jittering banner in IE */
top: 0;
left: 50%; /* calc(50vw - 16px); JLB changed to make the logo visible in the googlebot renderer (and old versions of safari) */
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
}
#logo a {
display:inline-block;
background: url(http://images.africatravelresource.com/cdn/images/logo-sprite.png) no-repeat 0 center;
width: 106px;
height: 90px;
/* hide any text inside the link */
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
#logo a:hover {
background: url(http://images.africatravelresource.com/cdn/images/logo-sprite.png) no-repeat -106px center;
}
.home-body #logo a:hover {
background: url(http://images.africatravelresource.com/cdn/images/logo-sprite.png) no-repeat 0 center;
cursor: default;
}
#logo-strapline {
display:block;
font-size: 18px;
letter-spacing: 4px;
text-transform: capitalize;
margin-top: -8px;
opacity: 1.0;
-moz-opacity: 1.0;
-moz-transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
/*body.home-body #logo-strapline {
display: none;
}*/
/****************************************************
Root menu icon in top left corner of screen
*****************************************************/
/*#root-menu-toggle {
cursor: pointer;
}*/
/*#root-menu-toggle a {
display: inline-block;
width: 24px;
height:26px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -507px -33px
}*/
/*#root-menu-toggle a:hover,
#root-menu-toggle:hover a {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) -507px -122px no-repeat;
}*/
#root-menu-toggle a.open {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -535px -33px;
}
#root-menu-toggle a.open:hover {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -535px -123px;
}
.page-banner.root-menu-toggle.editor-mode-on {
background-color: #990000;
opacity: 0.8;
}
/****************************************************
selected section in banner
*****************************************************/
#selected-section > span {
font-size: 11px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
letter-spacing: 6px;
text-decoration: none;
vertical-align: top;
cursor: pointer;
}
#selected-section > span:hover {
/*color: #99ff00;*/
color: rgba(85, 230, 127, 1.0);
}
/****************************************************
search box in banner
*****************************************************/
/*#search-box {
background-color: rgba(0,0,0,0);
}*/
/*#search-box input {
width: 60px;
-moz-transition: width 0.7s ease-in-out;
-webkit-transition: width 0.7s ease-in-out;
transition: width 0.7s ease-in-out;
}*/
.search-box input {
font-size: 12px;
height: 20px;
padding: 3px 10px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat scroll -954px -9px #fff;
background-color: rgba(0,0,0,0);
letter-spacing:0.5px;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.5);
-moz-transition: width 0.7s ease-in-out;
-webkit-transition: width 0.7s ease-in-out;
transition: width 0.7s ease-in-out;
}
.search-box.transparent input {
border: 1px solid rgba(255, 255, 255, 1.0);
}
/*.search-box input:focus {
background: #8e98a1;
}*/
/*#search-box input.searching {
width: 184px;
}*/
/****************************************************
wishlist icon in banner
*****************************************************/
#wishlist-icon {
position: relative;
width: 30px;
height: 28px;
background:url(http://images.africatravelresource.com/cdn/images/sprites.png) 0 -60px no-repeat;
cursor: pointer;
padding: 0 !important;
margin: 33px 33px 0 0;
}
#wishlist-icon:hover {
background:url(http://images.africatravelresource.com/cdn/images/sprites.png) 0 -88px no-repeat;
}
/*#wishlist-counter {
font-size: 16px;
color: #ffffff;
line-height: 28px;
text-align: center;
cursor: pointer;
}*/
/****************************************************
telephone number in banner
*****************************************************/
#telno {
text-align: right;
}
#telno span a {
font-size: 11px;
font-weight: bold;
color: #fff;
text-transform: uppercase;
letter-spacing: 6px;
text-decoration: none;
vertical-align: top;
}
#telno span a:hover {
/*color: #99ff00;*/
color: rgba(85, 230, 127, 1.0);
}
#page-banner.searching #telno {
display: none;
}
/****************************************************
map directory search box
*****************************************************/
.map-directory.search-box {
position: absolute;
top: 0;
left: 90px;
margin-top: 28px;
width: calc(100% - 122px);
}
/*.map-directory.search-box input {
width: 184px !important;
}*/
/****************************************************
BgOverlay is the stripey grid that covers all background images
****************************************************/
.BgOverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background: url(http://images.africatravelresource.com/cdn/images/bg-stripe-grid.png) repeat;
/*background: url(http://images.africatravelresource.com/cdn/images/black-overlay.png) repeat;*/
/*background-color: rgba(0, 0, 0, 0.3);*/
}
#ThrobberContainer {
z-index: 9000;
position: fixed;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
}
#slideshow {
height: 100vh;
width: 100vw;
}
#slideshow .home-image {
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
}
/**********************************************************************************
Home Page Carousel styles
**********************************************************************************/
#home-mobile-message-carousel {
display: none;
}
#home-message-carousel {
position: relative;
display: block;
width: 560px;
padding: 48px 0px;
border: 7px solid #fff;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.3);
color: #ffffff;
text-align: center;
text-transform: uppercase;
}
#home-message-carousel a.home-carousel-msg-panel,
#home-message-carousel div.home-carousel-msg-panel {
display: block;
width: 90%;
margin: 0 auto;
color: #ffffff;
text-decoration: none;
opacity: 0.0;
transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
}
#home-message-carousel div.home-carousel-msg-panel.placeholder {
visibility: hidden;
}
#home-message-carousel a.home-carousel-msg-panel {
position: absolute;
top: 48px;
left: 0;
width: 560px;
z-index: 10;
}
#home-message-carousel a.home-carousel-msg-panel.active {
opacity: 1.0;
z-index: 20;
}
#home-message-carousel .home-carousel-msg-panel > span {
display: block;
font-weight: bold;
letter-spacing: 4px;
}
#home-message-carousel .home-carousel-msg-panel span.home-carousel-msg-panel-msg1 {
font-size: 18px;
}
#home-message-carousel .home-carousel-msg-panel span.home-carousel-msg-panel-msg2 {
padding: 24px 0;
font-size: 48px;
letter-spacing: 12px;
}
#home-message-carousel .home-carousel-msg-panel span.home-carousel-msg-panel-msg3 {
font-size: 22px;
}
#home-message-carousel .home-carousel-menu {
margin-top: 48px;
z-index: 20;
}
#home-message-carousel .home-carousel-menu > a {
display: inline-block;
padding: 0 16px;
font-weight: normal;
font-size: 14px;
letter-spacing: 4px;
color: #ffffff;
text-decoration: none;
transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
}
#home-message-carousel .home-carousel-menu > a.active {
/*color: #ffffff;*/
/*border-bottom: 1px solid #ffffff;*/
font-weight: bold;
}
/**********************************************************************************
Page Title styles
**********************************************************************************/
.home-page-title-wrapper {
width: 100%;
margin-top: 14px;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.home-page-title {
display: table;
margin: 0 auto;
border: 0;
padding: 45px 0 45px 0;
width: 1000px;
}
.home-page-title-quote-mark {
display: table-cell;
width: 62px;
text-align: right;
}
.home-page-title-quote-mark.bottom {
vertical-align: bottom;
text-align: left;
}
.home-page-title-quote-mark .open-quote {
display: block;
width: 47px;
height: 40px;
background: url(/Content/Images/sprites.png) no-repeat 0 -1010px;
}
.home-page-title-quote-mark .close-quote {
display: block;
width: 47px;
height: 40px;
background: url(/Content/Images/sprites.png) no-repeat 0 -1060px;
}
.home-page-title-text {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
display: table-cell;
width: 540px;
text-align: center;
color: #ffffff;
vertical-align: top;
}
.home-page-title-text span {
display: block;
font-weight: normal;
}
.home-page-title-text span.quote {
font-size: 18px;
letter-spacing: 3.5px;
line-height: 34px;
text-transform: none;
}
.home-page-title-text span.quote-source {
margin-top: 40px;
font-size: 18px;
letter-spacing: 6px;
text-transform: uppercase;
}
.home-page-title-text span.quote-source-location {
margin-top: 14px;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: capitalize;
}
@media screen and (max-width: 1280px) and (min-width: 768px) {
.home-page-title {
width: auto;
max-width: 1000px;
}
}
@media screen and (max-width: 767px) {
.home-page-title {
padding: 45px 20px 45px 20px;
width: 80%;
}
.home-page-title-text span.quote {
font-size: 16px;
line-height: 30px;
}
.home-page-title-text span.quote br {
display: inline;
content: ' ';
}
.home-page-title-text span.quote br:after {
content: ' ';
}
.home-page-title-quote-mark {
display: none;
}
.home-page-title-text span.quote-source {
font-size: 18px;
line-height: 24px;
}
}
#page-content {
background-color: #fff;
position: relative;
}
#page-content.home-content,
#page-content.about-content {
margin-top: 0px;
}
#page-content.contact-content {
margin-top: 72px;
}
/****************************************************************************
Page Title is the panel that sits in the bottom part of the main image
On Location pages it displays the name of the location
On the Home page it displays the carousel messages
*****************************************************************************/
.page-title {
z-index: 1000;
position: relative;
display: block;
width: 100vw;
padding-top: 0px;
margin-left: 0;
margin-top: -193px; /*248px;*/
background-color: rgba(0, 0, 0, 0);
text-transform: uppercase;
color: white;
text-align: center;
/*-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;*/
}
.page-title.home {
margin-top: -478px;
z-index: 900;
}
#page-content.experiences-content,
#page-content.resources-content,
#page-content.about-content {
margin-top: 0;
}
.page-title.experiences,
.page-title.resources,
.page-title.about,
.page-title.contact,
.page-title.collections {
margin-top: -149px; /*-221px;*/
}
.page-title .main-title {
position: relative;
width: 80%;
height: 192px; /*247px;*/
margin: 0 auto;
/*border-bottom: 1px solid black;*/
white-space: nowrap;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.page-title.home .main-title {
height: 148px;
}
.page-title.experiences .main-title,
.page-title.resources .main-title,
.page-title.about .main-title,
.page-title.contact .main-title,
.page-title.collections .main-title {
height: 148px; /*220px;*/
}
/*.page-title .main-title span.title-message {
opacity: 1.0;
-moz-opacity: 1.0;
transition: opacity 1s ease-in-out 0s;
}
.page-title .main-title span.title-message.inactive {
opacity: 0.0;
-moz-opacity: 0.0;
transition: opacity 1s ease-in-out 0s;
}*/
.page-title .main-title span {
position: absolute;
bottom: 90px;
width: 100%;
font-family: 'Nothing You Could Do', cursive;
font-size: 60px;
line-height: 72px;
text-transform: capitalize;
letter-spacing: 14px;
}
.page-title.transitional {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.page-title.removed {
position: absolute;
/*bottom: -255px;*/
margin-top: 0;
}
.sub-title {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.faded
{
opacity: 0.0;
-moz-opacity: 0.0;
}
/****************************************************************************
Page Title - Home Page
****************************************************************************/
.page-title.home .main-title span {
position: absolute;
display: block;
bottom: 80px; /*132px;*/
width: 100%;
font-size: 36px;
line-height: 48px;
white-space: normal;
text-transform: none;
}
.page-title .main-title span.title-message.inactive {
opacity: 0;
-moz-opacity: 0;
-moz-transition: opacity 1s ease-in-out 0s;
-webkit-transition: opacity 1s ease-in-out 0s;
transition: opacity 1s ease-in-out 0s;
}
/****************************************************************************
Page Title - Location Page
****************************************************************************/
.page-title.places .main-title span {
display: block;
bottom: 108px; /*163px;*/
}
/****************************************************************************
Page Title - Experiences Page
****************************************************************************/
.page-title.experiences .main-title span {
display: block;
text-transform: capitalize;
font-size: 48px;
bottom: 60px; /*132px;*/
}
/****************************************************************************
Page Title - Experiences Page
****************************************************************************/
.page-title.resources .main-title span {
display: block;
text-transform: capitalize;
font-size: 48px;
bottom: 60px; /*132px;*/
}
/****************************************************************************
Page Title - Other Page
****************************************************************************/
.page-title.contact .main-title span,
.page-title.about .main-title span,
.page-title.collections .main-title span {
display: block;
text-transform: initial;
font-size: 48px;
bottom: 60px; /*132px;*/
}
.page-title .main-title.scroll-down-image {
display: none;
}
/****************************************************************************
Page Sub Title - Location Page (displays the areas and country)
****************************************************************************/
.page-title .sub-title {
position: relative;
width: 100%;
height: 96px; /*151px;*/
padding-top: 0px;
margin: -96px 0 0 0; /*-151px 0 0 0;*/
}
.page-title .sub-title .area-location {
display: inline;
font-size: 14px;
letter-spacing: 8px;
margin-left: 24px;
line-height: 24px;
}
.page-title .sub-title .area-location.parent {
margin-left: 0px;
}
.page-title .sub-title a,
.page-title .page-title-data a,
.page-facilities .page-title-data a {
color: white;
text-decoration: none;
}
.page-title .sub-title a:hover,
.page-title .page-title-data a:hover,
.page-facilities .page-title-data a:hover {
color: rgba(85, 230, 127, 1.0); /* #99ff00;*/
}
.page-title .sub-title .areas {
display: inline;
}
/****************************************************************************
Page Title - Error page
****************************************************************************/
.page-title.error .main-title span {
display: block;
text-transform: initial;
font-size: 48px;
}
.page-title.error .sub-title span {
display: inline;
margin-left: 24px;
line-height: 24px;
}
/****************************************************************************
Page Facilities - Location Page (displays the ratings, trip count, guide price etc)
****************************************************************************/
.page-facilities {
position: relative;
display: block;
width: calc(100% - 96px);
padding: 32px 48px 0 48px;
margin-left: 0;
/*background-color: rgba(0,0,0,0.6);*/
margin-top: -80px; /*-135px;*/
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.page-facilities.hidden {
display: none;
}
.page-facilities.home {
padding-bottom: 0;
margin-top: 60px;
}
/*.page-facilities.experiences,
.page-facilities.resources {
display: none;
}*/
.page-facilities .page-title-data {
margin: 0 auto;
}
.page-facilities .page-title-data {
/*padding: 30px 0;*/
font-size: 18px;
display: table;
margin: 0px auto 0 auto;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.page-facilities.home .page-title-data {
padding-top: 30px;
}
.page-facilities .page-title-data:empty {
display: none;
}
.page-facilities .page-title-data .dynamic-columns:empty {
display: none;
}
/*.page-facilities.home .page-title-data {
margin-top: -24px;
padding-bottom: 24px;
}*/
.page-facilities .page-title-data .dynamic-columns {
/*-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;*/
/*-moz-column-width: 125px;
-webkit-column-width: 125px;
column-width: 125px;*/
-moz-column-gap: 25px;
-ms-column-gap: 25px;
-webkit-column-gap: 25px;
column-gap: 25px;
/*padding-bottom: 32px;*/
}
/*.page-facilities .page-title-data .dynamic-columns:empty {
display: none;
}*/
.page-title-data-item {
display: inline-block;
margin: 0 32px;
height: 30px;
vertical-align: top;
text-align: center;
letter-spacing: 6px;
text-transform: uppercase;
color: #ffffff;
/*width: 120px;*/
cursor: pointer;
}
.page-title-data-item:first-of-type {
margin-left: 0;
}
.page-title-data-item:last-of-type {
margin-right: 0;
}
.page-title-data-item:hover {
/*color: #9f0;*/
color: rgba(85, 230, 127, 1.0);
}
.page-title-data-item.no-hover:hover {
color: #ffffff;
cursor: default;
}
.page-title-data-item.hidden {
display: none;
}
.sub-title .page-title-data-item {
display: block;
margin: 26px auto 0 auto;
}
.page-title-data-item.scroll-down.scroll-down-action {
margin-top: 20px;
}
.page-title-data-item.scroll-down .data-count {
font-size: 12px;
line-height: 20px;
vertical-align: bottom;
text-align: center;
cursor: pointer;
}
.page-title-data-item.scroll-down .data-count:hover {
/*color: #99ff00;*/
color: rgba(85, 230, 127, 1.0);
}
.page-title-data-item.scroll-down .data-title span.scroll-down-image {
display: inline-block;
width: 32px;
height: 16px;
margin-top: 20px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -118px;
cursor: pointer;
}
.page-title-data-item .data-count {
display: inline;
font-size: 24px;
margin-bottom: 10px;
}
.page-title-data-item .data-count.mobile {
display: none;
}
.page-title-data-item .data-title {
display: inline;
font-size: 11px;
line-height: 18px;
vertical-align: top;
font-weight: bold;
}
/*.page-title-data-item.rating-data {
margin-right: 16px;
}*/
.page-title-data-item.rating-data .data-count {
text-align: right;
}
.page-title-data-item.rating-data .data-title {
float: left;
margin-right: 8px;
}
/*.page-title-data-item.price-data {
margin-left: 16px;
}*/
.page-title-data-item .media-mode.video-mode.inactive a,
.page-title-data-item .media-mode.video-mode.inactive a:hover,
.page-title-data-item .media-mode.images-mode.inactive a,
.page-title-data-item .media-mode.images-mode.inactive a:hover {
/*color: rgba(255, 255, 255, 0.5);*/
color: rgba(85,230,127, 1.0);
cursor: default;
}
/****************************************************************************
Trip Search Bar
****************************************************************************/
/*.trip-search-bar-wrapper {
position: relative;
display: block;
width: calc(100% - 96px);
height: 64px;
padding: 0 48px;
margin-top: -18px;
margin-left: 0;
background-color: rgba(0,0,0,0.6);
transition: all 0.8s ease-in-out;
}*/
.trip-search-bar-wrapper {
width: 100%;
padding-bottom: 48px;
background-color: #606060;
border-bottom: 1px solid #8a8a8a;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.trip-search-bar-header {
width: 100%;
text-align: center;
color: #ffffff;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 4px;
padding: 40px 0 24px 0;
}
.trip-search-bar-sub-header {
width: 100%;
text-align: center;
color: #ffffff;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
padding-bottom: 12px;
}
.trip-search-bar {
position: relative;
height: 64px;
width: 432px;
margin: 0 auto 24px auto;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
}
.trip-search-bar.faded {
opacity: 0.0;
-moz-opacity: 0.0;
}
.trip-search-bar > div {
display: inline-block;
float: left;
margin-top: 16px;
}
.trip-search-bar .mode-field-wrapper {
/*position: absolute;
left: 300px;*/
width: 432px;
}
.trip-search-action-button-wrapper {
position: relative;
width: 100%;
}
.trip-search-action-button-wrapper a {
display: block;
width: 100px;
height: 30px;
margin: 0 auto;
border: 1px solid #ffffff;
cursor: pointer;
color: #ffffff;
font-size: 14px;
line-height: 32px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
}
.trip-search-bar .mode-selector-wrapper .search-dropdown-wrapper,
.trip-search-bar .mode-field-wrapper .search-dropdown-wrapper {
position: relative;
width: calc(100% - 10px);
}
#similar-sample-trips-wrapper .trip-search-bar {
background-color: inherit;
transition: none;
-webkit-transition: none;
-moz-transition: none;
}
#similar-sample-trips-wrapper .trip-search-bar span {
color: #fff;
}
.trip-search-box {
display: inline-block;
position: relative;
min-width: 80px;
width: calc(100% - 10px);
height: 22px;
border: 1px solid #ccc;
padding: 4px;
background-color: #fff;
text-align: left;
vertical-align: bottom;
}
.trip-search-box input {
width: calc(100% - 10px);
padding-top: 1px;
padding-left: 5px;
color: #454545;
letter-spacing: 2.5px;
background: none;
border: 0;
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
.trip-search-box input:focus {
color: #454545;
background-color: #fff !important;
outline: 0;
width: calc(100% - 30px);
}
.trip-search-box.search-box .search-results {
height: 375px;
width: 432px;
/*bottom: 28px;*/
text-align: left;
top: 2px;
left: -5px;
letter-spacing: 2.5px;
}
a.trip-search-bar-button {
display: inline-block;
height: 28px;
padding: 0 16px;
font-size: 14px;
line-height: 28px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
color: #808080;
background-color: #fff;
}
/******************************************************
Home page interim screen
******************************************************/
#interim-page {
z-index: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: black;
visibility: hidden;
opacity: 0;
-moz-opacity: 0;
-moz-transition: opacity 1s ease-in-out, visibility 1s linear, z-index 0 linear 1s;
-webkit-transition: opacity 1s ease-in-out, visibility 1s linear, z-index 0 linear 1s;
transition: opacity 1s ease-in-out, visibility 1s linear, z-index 0 linear 1s;
}
#interim-page.active {
z-index: 2000;
visibility: visible;
opacity: 1.0;
-moz-opacity: 1.0;
}
#interim-page .close {
z-index: inherit;
position: fixed;
top: 0px;
left: 0px;
height: 90px;
width: 90px;
}
#interim-page .close a {
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
display: inline-block;
width: 24px;
height: 24px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -535px -33px;
}
/*#interim-screen {
z-index: 2000;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
/*width: 100%;
height: 100%;*/
/*background-color: #000;
opacity: 0.0;
-moz-opacity: 0.0;
visibility: hidden;
transition: all 1.0s ease-in-out;
}
#interim-screen.active {
opacity: 1.0;
-moz-opacity: 1.0;
visibility: visible;
}
#interim-screen .close {
z-index: 10;
position: absolute;
top: 40px;
left: 40px;
height: 20px;
width: 20px;
}
#interim-screen .close a {
display: inline-block;
width: 20px;
height: 20px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -535px -33px;
}*/
.interim-content-wrapper {
position: absolute;
/*top: calc(100vh - 312px);*/
top: 320px;
left: 0;
height: 312px;
width: 100%;
z-index: 10;
}
.expanding-line-wrapper {
position: absolute;
top: 320px;
left: 0;
height: 1px;
width: 100%;
margin: 0 auto;
}
.expanding-line {
position: absolute;
display: block;
height: 1px;
width: 40%;
background-color: #fff;
-moz-transition: width 0.8s ease-in-out 0s;
-webkit-transition: width 0.8s ease-in-out 0s;
transition: width 0.8s ease-in-out 0s;
}
.expanding-line.immediate {
transition-delay: 0s !important;
}
.expanding-line.left {
right: 50%;
width: 0;
}
.expanding-line.left.expanded {
width: 600px; /*40%;*/
}
.expanding-line.right {
left: 50%;
width: 0;
}
.expanding-line.right.expanded {
width: 600px; /*40%;*/
}
.interim-content {
padding-bottom: 32px;
border-bottom: 1px solid #e2ba00;
}
.interim-content-body {
width: 80%;
margin: 312px auto 0 auto;
/*border-top: 1px solid #fff;*/
/*padding-top: 36px;*/
transition: all 1s ease-in-out 1.25s;
}
.interim-content-body.immediate {
transition-delay: 0s !important;
}
.interim-content-body.interim {
margin-top: 0;
}
.interim-detail-column {
width: 33%;
display: inline-block;
vertical-align: top;
}
.interim-detail-column.left {
text-align: left;
}
.interim-detail-column.middle {
text-align: center;
}
.interim-detail-column.right {
text-align: right;
}
.interim-detail-column h2 {
color: #d9c820;
text-transform: uppercase;
font-size: 18px;
line-height: 48px;
letter-spacing: 5px;
}
.interim-detail-column a {
display: block;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
line-height: 48px;
letter-spacing: 5px;
}
.interim-section {
width: 1200px; /* 80% */
margin: 0 auto 64px auto;
/*padding-bottom: 64px;*/
text-align: center;
}
.interim-section h1 {
font-size: 24px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0 0 40px 0;
}
.interim-section h2 {
display: block;
font-size: 14px;
font-weight: normal;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0 0 40px 0;
}
.interim-section .places-search-wrapper {
width: 400px;
margin: 0 auto;
}
.interim-section .places-search-wrapper .places-search {
display: block;
width: 400px;
height: 44px;
margin-bottom: 1px;
}
.interim-section .places-search-wrapper .places-search input {
width: 360px;
height: 44px;
padding: 0 20px;
border: 0;
line-height: 44px;
font-size: 14px;
color: #c9c9c9;
text-transform: uppercase;
letter-spacing: 2px;
}
.interim-section .places-search-wrapper .places-search.results-item {
width: 400px;
height: 44px;
line-height: 44px;
font-size: 14px;
background-color: #b8b8b8;
text-transform: uppercase;
letter-spacing: 2px;
}
.interim-section .dynamic-columns {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 200px;
-webkit-column-gap: 200px;
column-gap: 200px;
}
.interim-section .dynamic-columns a {
display: block;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
/* Firefox is dumb */
break-inside: avoid;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
line-height: 40px;
letter-spacing: 5px;
white-space: nowrap;
}
.interim-section .dynamic-columns a:hover {
/*color: #99ff00;*/
color: rgba(85, 230, 127, 1.0);
}
.interim-section .dynamic-columns h1 a {
display: inline-block;
}
.interim-section .dynamic-columns.wishlist-columns a {
display: inline;
line-height: 28px;
font-size: inherit;
}
#add-current-item-to-wishlist-panel a span.current-item {
/*color: #9f0;*/
color: rgba(85, 230, 127, 1.0);
}
.menu-content-panel .additional-places-text {
padding: 24px 0;
text-transform: uppercase;
letter-spacing: 4px;
text-align: center;
color: #ffffff;
}
.additional-places-text a {
text-decoration: none;
color: inherit;
font-weight: bold;
}
.menu-content-panel .additional-places-text a:hover {
color: rgba(85, 230, 127, 1.0);
}
.additional-places-text.desktop {
display: block;
/*font-size: 14px;
line-height: 28px;*/
}
.additional-places-text.mobile {
display: none;
}
#wishlist-panel .interim-section {
margin-bottom: 32px;
}
.wishlist.additional-places-text {
padding-bottom: 32px;
font-size: 14px;
line-height: 28px;
text-transform: uppercase;
letter-spacing: 4px;
text-align: center;
/*background-color: #606060;*/
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.grey-background:hover .wishlist.additional-places-text {
background-color: #555555;
}
.wishlist.additional-places-text a {
text-decoration: none;
color: #ffffff;
}
.wishlist.additional-places-text a:hover {
color: #46bc68;
}
#explore-map-link {
width: 700px;
height: 240px;
display: inline-block;
position: relative;
}
#map-cover {
position: fixed;
left: 0;
width: 700px;
height: 240px;
background-color: #000000;
display: block;
/*position: relative;
margin: -242px auto 0 auto;
padding: 0;
border: 0;*/
z-index: -100;
opacity: 0;
-moz-opacity: 0;
/*transition: opacity 1s ease-in-out, z-index 0s linear 1s;*/
}
#map-cover.full-screen {
width: 100%;
height: 100%;
background-color: #000000;
z-index: 1300;
opacity: 1.0;
-moz-opacity: 1.0;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#map-cover.full-screen.reveal-map {
opacity: 0.0;
-moz-opacity: 0.0;
}
#map-cover.full-screen.reveal-map.beneath-map {
z-index: 1100;
}
#map-placeholder.map-placeholder {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
-moz-opacity: 0;
z-index: -100;
-moz-transition: opacity 1s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
-webkit-transition: opacity 1s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
transition: opacity 1s ease-in-out 0s, visibility 0s linear 0s, z-index 0s linear 0s;
}
#map-placeholder.map-placeholder.active {
visibility: visible;
opacity: 1.0;
-moz-opacity: 1.0;
z-index: 700;
}
/*****************************************************
Slideshow
*****************************************************/
.slideshow {
position: relative;
overflow: hidden;
height: 100%;
background-color: #000;
border-bottom: 1px solid #000;
/*margin-left: -1px;*/
}
.slideshow .images-loading {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.slideshow .images-loading > span {
display: inline-block;
width: 100%;
margin-top: calc(50vh - 12px);
text-align: center;
font-size: 24px;
color: #ffffff;
letter-spacing: 4px;
text-transform: uppercase;
}
.slideshow-image {
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.slideshow-image.inactive {
opacity: 0;
visibility: hidden;
}
/*.nav-button {
width: 48px;
height: 48px;
z-index: 10;
}*/
/*.nav-button.nav-next {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat scroll -739px 0;
background: url(http://images.africatravelresource.com/cdn/images/slideshow-next.png) no-repeat;
}
.nav-button.nav-next:hover {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat scroll -791px 0;
cursor: pointer;
}
.nav-button.nav-previous {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat scroll -739px -69px;
background: url(http://images.africatravelresource.com/cdn/images/slideshow-prev.png) no-repeat;
}
.nav-button.nav-previous:hover {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat scroll -791px -69px;
cursor: pointer;
}*/
/*.slideshow-nav-buttons {
position: absolute;
top: calc(100vh - 160px);
height: 120px;
width: 100%;
z-index: 1200;
}*/
.slideshow-button,
.experience-button,
.resource-button {
z-index: 100;
position: absolute;
display: inline-block;
top: calc(50% - 10px);
height: 19px;
width: 34px;
cursor: pointer;
text-align: center;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat 0 -118px;
}
.slideshow-button.left,
.experience-button.left,
.resource-button.left
{
left: 26px;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-moz-transition: left 0.4s ease-in-out;
-webkit-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.slideshow-button.left.removed {
left: -52px;
}
.slideshow-button.right,
.experience-button.right,
.resource-button.right {
right: 26px;
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
transition: right 0.4s ease-in-out;
}
.slideshow-button.right.removed {
right: -52px;
}
.slideshow-button.image-nav-underlay {
z-index: 95;
display: none !important;
top: calc(50% - 25px);
height: 50px;
width: 120px;
padding-left: 16px;
background: none;
background-color: rgba(0,0,0,0.4);
transform: none;
-webkit-transform: none;
-ms-transform: none;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 4px;
color: #ffffff;
text-align: left;
line-height: 50px;
}
.slideshow-button.image-nav-underlay.visible {
display: block !important;
}
.slideshow-button-text {
font-size: 10px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 18px;
text-align: center;
opacity: 1.0;
-moz-opacity: 1.0;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.slideshow-button-text.faded {
opacity: 0.0;
-moz-opacity: 0.0;
}
.slideshow.home-slideshow .slideshow-button {
/*display: none;*/
}
.slideshow.home-slideshow #slideshow-album-selector {
display: none;
}
#slideshow-panel-wrapper {
position: absolute;
/*z-index: 100;*/
bottom: 0;
width: 100%;
height: 122px;
}
/*#image-caption-wrapper.faded {
opacity: 1.0;
-moz-opacity: 1.0;
visibility: visible;
}*/
#image-caption-wrapper {
position: absolute;
bottom: 0;
width: 100%;
height: 220px;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
opacity: 0;
-moz-opacity: 0;
visibility: hidden;
-moz-transition: all 1.0s ease-in-out;
-webkit-transition: all 1.0s ease-in-out;
transition: all 1.0s ease-in-out;
}
#image-caption-wrapper.faded,
#slideshow-panel-wrapper.faded {
opacity: 1.0;
-moz-opacity: 1.0;
visibility: visible;
}
#image-caption {
position: absolute;
bottom: 34px;
left: 33px;
width: calc(100% - 300px);
font-size: 12px;
line-height: 28px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 4px;
}
#image-caption a {
color: #fff;
text-decoration: none;
}
/*#image-caption.faded {
opacity: 1.0;
-moz-opacity: 1.0;
visibility: visible;
}*/
#slideshow-controls-wrapper {
z-index: 100;
position: absolute;
right: 33px;
width: calc(25% - 136px);
height: 122px;
opacity: 0;
-moz-opacity: 0;
visibility: hidden;
-moz-transition: all 1.5s ease-in-out;
-webkit-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
#slideshow-controls-wrapper.faded {
opacity: 1.0;
-moz-opacity: 1.0;
visibility: visible;
}
#slideshow-controls {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 12px;
line-height: 28px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 4px;
text-align: right;
}
#slideshow-controls > div {
display: block;
position: relative;
}
/*#slideshow-controls.faded {
opacity: 1.0;
-moz-opacity: 1.0;
visibility: visible;
}*/
#slideshow-title-wrapper {
position: relative;
cursor: pointer;
white-space: nowrap;
}
#slideshow-album-selector {
z-index: 100;
position: absolute;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -378px -205px;
width: 18px;
height: 18px;
right: 35px;
top: calc(50% + 60px);
opacity: 1.0;
-moz-opacity: 1.0;
cursor: pointer;
}
#slideshow-hover-corridor {
z-index: 100;
position: absolute;
width: 72px;
height: 42px;
top: calc(50% + 17px);
right: 0;
}
#slideshow-selector {
z-index: 5000;
text-transform: uppercase;
white-space: nowrap;
font-size: 10px;
position: absolute;
top: calc(50% + 60px);
right: 72px;
display: none;
}
#slideshow-selector li {
height: 28px;
line-height: 28px;
margin-bottom: 1px;
float: left;
clear: left;
width: 200px;
padding-left: 15px;
background-color: #d6d6d6;
text-align: left;
color: #8d8d8d;
cursor: pointer;
}
#slideshow-selector li:hover {
background-color: #b2b2b2;
color: #696969;
}
/*.mouse-bridge {
position: absolute;
top: calc(50% - 35px);
right: 0;
width: calc(25% - 72px);
height: 50%;
z-index: 9;
}*/
/******************************************************
Details Pages (Experiences, Locations etc)
******************************************************/
.details-panel {
margin-top: 2vh;
}
nav.details-menu {
position: absolute;
top: calc(100vh + 266px);
left: 0vw;
width: 18vw;
/*transition: all 0.5s ease-in-out;
transition-delay: 0.5s;*/
}
nav.details-menu.on-stage {
left: 0vw;
}
nav.details-menu a {
display: block;
text-transform: uppercase;
text-decoration: none;
color: #a3a3a3;
font-size: 1.4em;
margin: 1vh 2vw;
}
div.details-body {
position: absolute;
top: calc(100vh + 266px);
left: 18vw;
width: 60vw;
}
div.details-body p {
margin: 2em 0;
}
div.details-extra {
position: absolute;
top: calc(100vh + 266px);
right: 0vw;
width: 18vw;
/*transition: all 0.5s ease-in-out;
transition-delay: 0.4s;*/
}
div.details-extra.on-stage {
right: 0vw;
}
.no-transition {
-moz-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
}
.actor-in-wings.fixed {
position: fixed;
top: 13vh;
}
.page-words {
border-bottom: 1px solid black;
border-top: 1px solid black;
margin-bottom: 20px;
padding: 40px 0;
text-align: justify;
}
/*************************************************************
Detail pages content
*************************************************************/
#content-wrapper {
/*display: table;*/
/*overflow: hidden;*/
/*padding-top: 255px;*/
width: 100%;
}
@media screen and (max-width: 767px) {
#content-wrapper {
width: 90%;
margin-left: auto;
margin-right: auto;
}
}
#content-wrapper.no-title {
padding-top: 0px;
}
.long-form .content-body-row {
display: table-row;
}
.content-body-row label {
font-size: 12px !important;
letter-spacing: 3px !important;
padding-top: 20px;
display: inline-block;
}
.long-form .survey .content-body-cell {
display: table-cell;
}
/*#content-menu-wrapper {
padding-top: 86px;
padding-left: calc(26.67% - 370px);
width: 26.67%;
background-color: #f7f7f7;
vertical-align: top;
}
#content-menu-wrapper.no-title {
padding-top: 0;
}
#content-menu-wrapper.bottom {
vertical-align: bottom;
}
#content-text-wrapper {
padding-top: 86px;
width: 73.3%;
background-color: #ffffff;
}
#content-text-wrapper.no-title {
padding-top: 0;
}*/
/*#content-menu {
position: relative;
width: 320px;
text-align: right;
border-right: 1px solid #c4c4c4;
}
#content-menu.fixed {
position: fixed;
top: 186px;
}
#content-menu.dropped {
position: absolute;
}*/
.rotate-to-view {
display: none;
}
#content-text {
position: relative;
/*width: 80%;
max-width: 1000px;
margin: 0 auto;*/
/*padding-top: 72px;*/
/*padding-left: 48px;*/
/*padding-bottom: 96px;*/
/*width: 592px;*/
font-family: arial; /*"BaskervilleOldFaceW01";*/
font-size: 16px;
line-height: 24px;
}
#content-text > p:first-child {
margin-top: 0;
}
#content-text header {
/*display: none;*/
margin-bottom: 20px;
}
#content-text header.opened {
margin-bottom: 36px;
}
#content-text header h2 {
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 20px;
}
#content-text header h2 a {
color: #e3ba00;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
font-size: inherit;
}
#content-text article {
margin-bottom: 32px;
-moz-transition: height 0.7s ease-in-out;
-webkit-transition: height 0.7s ease-in-out;
transition: height 0.7s ease-in-out;
height: 0;
overflow: hidden;
}
#content-text article.opened:last-of-type {
margin-bottom: 0;
}
#content-text article.opened {
height: auto;
margin-bottom: 48px;
}
#content-text article.closed {
margin-bottom: 0;
}
#content-text article .inline {
position: relative;
top: 0;
width: 100%;
margin-bottom: 0px;
padding-top: 24px;
padding-bottom: 48px;
padding-left: 0;
padding-right: 0;
}
#content-text article > .inline:last-of-type {
padding-bottom: 0;
}
/*#content-text article .inline.pad {
margin-bottom: 30px !important;
}*/
#content-text article div.inline div.guide > div.inline:not(.pad):last-of-type {
padding-bottom: 0px;
border-bottom: 0;
}
div.about-content article.opened div.guide div.inline + a {
display: inline-block;
margin-top: 30px;
}
#content-text article .article-close {
display: none;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -844px -19px;
height: 11px;
position: absolute;
right: 10px;
width: 12px;
}
#content-text article .article-close.top {
top: 36px;
}
#content-text article .article-close.bottom {
display: none;
bottom: 15px;
}
#content-text article .article-close:hover {
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -858px -19px;
}
#content-text header {
display: none;
}
#content-text header.editing {
display: block;
}
/*#content-menu-list {
list-style: none;
font-size: 1.1em;
line-height: 1.3em;
padding: 0;
vertical-align: top;
margin-right: 50px;
}
#content-menu-list li {
height: 37px;
padding-bottom: 5px;
}
#content-menu-list li.opened a, #content-menu-list li a:hover {
color: #e3ba00;
text-shadow: 0 0 1px #e3ca5b;
}
#content-menu-list li a {
color: #e3ba00;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
}
#content-menu-list li:last-of-type {
height: auto;
padding-bottom: 0;
}
#content-toolbox {
display: inline-block;
font-size: 1.1em;
line-height: 1.3em;
padding: 0px 30px 20px 0px;
vertical-align: top;
}
#content-toolbox div.fixed {
position: fixed;
top: 110px;
}*/
#content-text article h1.home {
font-family: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
}
#content-text article u,
#content-text article h1 {
display: inline-block;
/*font-family: 'Nothing You Could Do', cursive;*/
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 24px !important;
text-decoration: none;
line-height: 30px;
text-transform: uppercase;
letter-spacing: 4px;
color: rgb(130, 130, 130);
}
#content-text article u {
font-size: 18px !important;
padding-top: 16px;
}
/*.page-content.home-content #content-text article u:first-of-type,*/
.page-content.about-content #content-text article u:first-of-type {
font-size: 24px !important;
padding-top: 0;
}
#content-text article u.signature {
font-family: 'Nothing You Could Do', cursive !important;
text-transform: capitalize;
font-size: 30px !important;
}
#content-text article b,
#content-text article b a {
/*color: #535353;*/
color: #a0a0a0;
font-weight: bold;
}
#content-text article b:first-of-type {
/*display: block;*/
}
#content-text article b.script-font {
/*font-size: 28px;*/
}
#content-text article a {
color: #a0a0a0;
font-weight: bold;
}
#content-text article a:hover {
color: #000000;
}
#content-text article .guide > a[data-inline="true"]:not(.article-close)::before {
content: '\2022';
color: #46bc68;
margin-right: 6px;
display: inline-block;
}
/*#content-text h1, h6 {
color: #000000;
}*/
#content-text article h1,
#content-text article h2,
#content-text article h3,
#content-text article h4,
#content-text article h5,
#content-text article h6 {
display: inline;
font-weight: inherit;
font-size: inherit;
font-style: inherit;
}
#content-text article h6 {
font-weight: bold;
}
#content-text-wrapper p {
font-size: 1em;
line-height: 1.05em;
width: auto;
margin-top: 1.5em;
}
#content-menu article a.toggle.inline {
display: inline-block;
width: auto;
}
#content-text article .guide.pad {
margin-bottom: 30px;
}
select.best-experience-month-selector {
display: inline-block;
margin-left: 10px;
height: 37px;
font-size: inherit;
color: inherit;
}
/**********************************************************************************************
add to wish list section of content details page
**********************************************************************************************/
#add-to-wish-list-wrapper {
margin: 60px 0;
}
#add-to-wish-list-wrapper p {
margin-bottom: 32px;
font-size: 12px;
color: #909090;
letter-spacing: 4px;
text-transform: uppercase;
}
.content-action-button-wrapper {
width: 100%;
text-align: center;
}
p.button-prompt {
font-size: 12px;
line-height: 22px;
color: #a0a0a0;
text-transform: uppercase;
letter-spacing: 3px !important;
}
a.content-action-button {
display: inline-block;
width: 220px;
padding: 16px 24px;
line-height: normal;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 18px !important;
font-weight: normal !important;
color: #ffffff;
text-transform: uppercase;
text-align: center;
letter-spacing: 4px;
text-decoration: none;
cursor: pointer;
}
a.content-action-button.hidden {
display: none;
}
a.content-action-button.yellow {
color: #fff;
background-color: #e2bb00;
}
a.content-action-button.green {
color: #fff;
background-color: #46bc68;
}
a.view-wishlist-button.content-action-button.yellow {
background-color: #e2aa00;
}
a.content-action-button.inactive {
background-color: #c0c0c0;
cursor: default;
}
/**********************************************************************************************
Your Verdict
**********************************************************************************************/
#your-verdict-wrapper {
width: 420px;
margin: 0 auto;
padding: 24px;
border: 1px solid #909090;
}
.your-verdict-buttons {
width: 100%;
}
.your-verdict-button {
display: inline-block;
width: 100px;
padding: 0 16px;
vertical-align: top;
cursor: pointer;
text-align: center;
color: #656565;
text-transform: uppercase;
letter-spacing: 2.5px;
font-size: 12px;
line-height: 18px;
}
.your-verdict-button img {
display: block;
width: 32px;
height: 32px;
margin: 0 auto 16px auto;
}
.your-verdict-button span {
display: block;
}
.your-verdict-button.include.selected span.your-verdict-text {
display: none;
}
.your-verdict-button.include.selected:after {
content: 'included';
color: #46bc68;
font-weight: bold;
}
.your-verdict-button.exclude.selected span.your-verdict-text {
display: none;
}
.your-verdict-button.exclude.selected:after {
content: 'excluded';
color: #C21F1F;
font-weight: bold;
}
.your-verdict-button.maybe.selected span.your-verdict-text {
display: none;
}
.your-verdict-button.maybe.selected:after {
content: 'maybe';
color: #454545;
font-weight: bold;
}
#similar-sample-trips-wrapper {
width: 100%;
margin: 90px auto 0 auto;
background-color: #606060;
border-bottom: 1px solid #8a8a8a;
padding-bottom: 40px;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
#similar-sample-trips-wrapper:hover {
background-color: #555555;
}
/**********************************************************************************************
Content banners
**********************************************************************************************/
.content-banner {
width: 100%;
height: 135px;
background-size: cover;
background-position: center center;
text-align: center;
}
.content-banner.explore-banner {
background-image: url(http://images.africatravelresource.com/cdn/images/explore-banner.jpg);
}
.content-banner.your-trip-banner {
background-image: url(http://images.africatravelresource.com/cdn/images/your-trip-banner.jpg);
}
.content-banner p {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 4px;
color: #ffffff;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/**********************************************************************************************
Home page Explore widget
**********************************************************************************************/
#explore-wrapper {
margin: 0px auto 50px auto;
width: 100%;
background-color: #606060;
}
#page-content.home-content #explore-wrapper {
margin-top: 0;
}
#explore-wrapper.no-top-margin {
margin-top: 0;
}
#explore-wrapper .dynamic-columns {
width: 761px;
margin: 0 auto;
}
#explore-wrapper .explore-table-cell {
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
#explore-wrapper .explore-table-cell:hover {
background-color: #555555;
}
#explore-wrapper .explore-table-cell .explore-cell-header {
margin-top: 8px;
font-size: 24px;
font-weight: normal;
color: #fff;
text-transform: uppercase;
letter-spacing: 6px;
}
#explore-wrapper .explore-table-cell .explore-cell-text {
font-family: 'Nothing You Could Do', cursive;
font-size: 20px;
color: #fff;
text-transform: capitalize;
letter-spacing: 4px;
line-height: 40px;
margin-top: 16px;
}
#explore-wrapper .dynamic-columns {
-moz-column-count: 2;
-ms-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-width: 250px;
-ms-column-width: 250px;
-webkit-column-width: 250px;
-column-width: 250px;
-moz-column-gap: 0;
-ms-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
border-left: 1px solid #8a8a8a;
border-right: 1px solid #8a8a8a;
}
#explore-wrapper .dynamic-columns .explore-table-cell {
display: block;
padding: 36px;
border: none;
width: auto;
text-align: center;
cursor: pointer;
}
#explore-wrapper .dynamic-columns .explore-table-cell:first-of-type {
border-bottom: 1px solid #8a8a8a;
}
#explore-wrapper .dynamic-columns .explore-table-cell:nth-of-type(3) {
border-left: 1px solid #8a8a8a;
}
#explore-wrapper .dynamic-columns .explore-table-cell:last-of-type {
border-top: 1px solid #8a8a8a;
border-left: 1px solid #8a8a8a;
}
#explore-wrapper .dynamic-columns .explore-table-cell h2 {
font-size: 24px;
margin-top: 8px;
}
#explore-wrapper .dynamic-columns .explore-table-cell .explore-cell-text {
font-size: 20px;
}
#explore-wrapper .explore-table {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
display: table;
margin: 96px auto;
/*width: 900px;*/
}
.contact-content #explore-wrapper {
margin-bottom: 0;
border-bottom: 1px solid #8a8a8a;
}
.atr-button {
display: inline-block;
height: 50px;
width: 220px;
line-height: 50px;
font-size: 18px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
font-weight: bold;
margin-top: 36px;
}
.atr-button.disabled {
cursor: default;
}
.atr-button.yellow {
background-color: #e2ba00;
}
/**********************************************************************************************
Explore
**********************************************************************************************/
#content-explore-wrapper {
width: 100%;
margin-top: 96px;
clear: both;
overflow: hidden;
}
#content-explore {
width: 960px;
margin: 140px auto 0 auto;
}
@media screen and (min-width: 1200px) {
#content-explore {
width: 1200px;
}
}
#content-explore .title {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-transform: uppercase;
font-size: 24px;
color: #000000;
text-align: center;
}
#content-explore .sub-menu {
margin-top: 20px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-transform: uppercase;
font-size: 18px;
color: #000000;
text-align: center;
}
#content-explore .sub-menu span {
margin: 0 20px;
}
#content-explore .content-explore-items img {
width: 270px;
height: 270px;
padding-right: 12px;
padding-bottom: 24px;
}
#content-explore .content-explore-items img:last-of-type {
padding-right: 0;
}
#content-explore .content-explore-items {
width: 100%;
margin-top: 40px;
padding: 0;
}
#content-explore .content-explore-items .row.row-spacer {
margin-bottom: 36px;
}
#content-explore .content-explore-items .row .col-lg-3 {
width: calc(25% - 30px);
}
.explore-item-panel {
float: left;
width: 300px;
border-right: 1px solid #c3c3c3;
}
.explore-item-panel:last-of-type {
border-right: none;
}
/* obsolete */
.explore-item-image {
background-size: cover;
background-position: center center;
width: 224px;
height: 130px;
border: 1px solid #a0a0a0;
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Webkit Nightlies & Google Chrome Canary */
-webkit-transition: all 1.5s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
cursor: pointer;
}
/* obsolete */
.explore-item-image.coloured {
filter: none; /* applies to FF + IE */
-webkit-filter: grayscale(0);
}
.explore-item-body-text {
text-align: center;
height: 280px;
margin: 0 auto;
color: #e2bb00;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 4px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
.explore-item-body-text span {
display: block;
}
.explore-item-count {
font-size: 60px;
white-space: nowrap;
margin: 0 auto 50px auto;
}
.explore-item-category {
font-size: 30px;
}
.explore-item-preposition {
font-size: 12px;
padding: 24px 0;
}
.explore-item-location {
font-size: 30px;
}
.explore-all-items {
text-align: center;
}
.explore-all-items a {
color: #a6a6a6;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 4px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 12px;
}
/**********************************************************************************************
Your trip
**********************************************************************************************/
#your-trip-wrapper {
width: 100%;
margin-top: 96px;
clear: both;
overflow: hidden;
}
/*#sales-comment-wrapper {
width: 840px;
margin: 90px auto 0 auto;
position: relative;
}*/
#sales-comment-wrapper.contact {
margin: 200px auto 0 auto !important;
}
.sales-comment {
/*height: 450px;*/ /* this is a cludge. work out a better way of forcing the panels to display */
}
.sales-comment-nav {
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1.0s ease-in-out;
}
.sales-comment-nav.inactive {
opacity: 0;
/*visibility: hidden;*/
display: none;
}
.sales-comment-nav .sales-nav-button {
display: inline-block;
float: left;
height: 206px;
width: 228px;
text-align: center;
}
.sales-comment-nav .sales-nav-button a {
display: inline-block;
height: 32px;
width: 16px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 36px;
color: #a0a0a0;
text-decoration: none;
}
.sales-comment-nav .sales-nav-button a.sales-nav-previous {
background-image: url(http://images.africatravelresource.com/cdn/images/scroll-left-green.png);
}
.sales-comment-nav .sales-nav-button a.sales-nav-next {
background-image: url(http://images.africatravelresource.com/cdn/images/scroll-right-green.png);
}
.sales-person-image {
position: relative;
display: block;
width: 384px;
height: 217px;
margin: 0 auto;
}
.sales-person-image img {
/*position: absolute;*/
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.sales-person-image {
width: 270px;
height: auto;
}
.sales-comment-text br {
content: ' ';
width: 1em;
display: inline-block;
}
}
.sales-comment-text {
position: relative;
/*top: 206px;*/
left: 0;
width: 100%;
padding-bottom: 36px;
/*-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1.0s ease-in-out;*/
}
.sales-comment-text.inactive {
opacity: 0;
/*visibility: hidden;*/
display: none;
}
.sales-text {
margin-top: 36px;
font-family: 'Nothing You Could Do', cursive;
font-size: 24px;
text-align: center;
text-transform: initial;
letter-spacing: 4px;
line-height: 36px;
color: #46bc68;
/*-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;*/
}
.sales-text.inactive {
opacity: 0;
visibility: hidden;
}
.sales-person-name {
margin-top: 24px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 12px;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
color: #a6a6a6;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.sales-person-name.inactive {
opacity: 0;
visibility: hidden;
}
.sales-comment .content-action-button-wrapper {
margin-top: 96px;
}
@media screen and (max-width: 900px) and (orientation: landscape) {
#sales-comment-wrapper {
width: auto;
}
.sales-comment-nav .sales-nav-button {
width: calc(50% - 192px);
}
}
@media screen and (min-width: 1200px) {
#sales-comment-wrapper .sales-person-name {
top: 36px;
left: 36px;
}
#sales-comment-wrapper .sales-text {
bottom: 36px;
left: 36px;
font-size: 24px;
line-height: 36px;
}
}
#sales-comment-wrapper .get-in-touch {
position: absolute;
right: 13.3%;
width: 400px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
#sales-comment-wrapper .get-in-touch-text {
text-transform: uppercase;
letter-spacing: 4px;
font-size: 18px;
line-height: 36px;
}
#sales-comment-wrapper .get-in-touch-button {
display: inline-block;
width: 277px;
height: 55px;
margin-top: 24px;
background-image: url(http://images.africatravelresource.com/cdn/images/get-in-touch-button.jpg);
background-size: cover;
background-position: center center;
}
#content-body .sales-person-name {
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-transform: uppercase;
font-size: 20px;
color: #595959;
letter-spacing: 4px;
line-height: 24px;
}
#content-body .sales-person-role {
position: absolute;
bottom: 0;
left: 0;
padding-left: 40px;
display: inline-block;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
text-transform: uppercase;
font-size: 10px;
color: #7e7e7e;
letter-spacing: 2px;
line-height: 10px;
}
#content-spacer1 {
width: 100%;
margin: 0;
border: 0;
height: 16px;
background-color: #999999;
}
.horizontal-line {
width: 70%;
margin: 72px auto 36px auto;
height: 1px;
background-color: #b0b0b0;
}
.content-section-header {
margin-bottom: 24px;
color: rgb(130, 130, 130);
}
/**********************************************************************************************
Why travel with us
**********************************************************************************************/
#why-travel-wrapper {
clear: both;
width: 1050px;
margin-top: 44px;
border-top: 1px solid #b2b2b2;
padding-top: 44px;
padding-bottom: 44px;
}
.why-travel-with-us .title {
width: 100%;
text-align: center;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 24px;
color: #000000;
text-transform: uppercase;
letter-spacing: 4px;
}
.why-travel-with-us .reasons {
margin-top: 44px;
width: 100%;
text-align: center;
}
.why-travel-with-us .reasons .reason-item {
display: inline-block;
background: url(http://images.africatravelresource.com/cdn/images/checkboxTick.png) no-repeat;
background-position: top center;
width: 180px;
margin: 0 35px;
padding-top: 97px;
vertical-align: top;
font-family: "Arial";
font-size: 14px;
color: #a3a3a3;
letter-spacing: 0.5px;
line-height: 1.3em;
}
/**********************************************************************************************
Action buttons on home page
**********************************************************************************************/
#action-buttons-wrapper,
.action-buttons-wrapper {
width: 220px;
margin: 0px auto 60px auto;
}
#action-buttons-wrapper.col-4 {
width: 90%;
max-width: 1200px;
}
#action-buttons-wrapper .dynamic-columns {
-moz-column-count: 4;
-ms-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-width: 250px;
-ms-column-width: 250px;
-webkit-column-width: 250px;
-column-width: 250px;
-moz-column-gap: 0;
-ms-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
}
#action-buttons-wrapper .action-button,
.action-buttons-wrapper .action-button {
display: inline-block;
margin: 0;
text-align: center;
}
.contact-button {
/*display: inline-block;*/
width: 100%;
margin: 0 34px;
/*transform: translateX(-34px);*/
text-align: center;
}
#action-buttons-wrapper .action-button > a,
.action-buttons-wrapper .action-button > a,
.contact-button input {
display: block;
/*height: 50px;*/
width: 220px;
padding-top: 16px;
padding-bottom: 16px;
line-height: normal;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 18px !important;
font-weight: normal;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 4px;
text-decoration: none;
}
.action-buttons-wrapper .action-button > a {
width: inherit;
}
#action-buttons-wrapper .action-button:not(.deselected) > a,
.action-buttons-wrapper .action-button:not(.deselected) > a,
.action-button:not(.deselected) > a:hover,
.contact-button:not(.deselected) input,
.contact-button:not(.deselected) input:hover {
background-color: #46bc68 !important;
}
.action-button.deselected a, .contact-button.deselected input {
background-color: #a5c4ae;
}
#action-buttons-wrapper .action-prompt,
.action-buttons-wrapper .action-prompt,
.action-buttons-wrapper .action-prompt a,
.content-action-button-wrapper .action-prompt {
display: block;
margin-top: 18px;
width: 228px;
font-size: 12px;
line-height: 22px;
color: #a0a0a0;
text-transform: uppercase;
letter-spacing: 3px;
/*background-color: #fff !important;*/
}
.content-action-button-wrapper .action-prompt {
width: 100%;
}
.action-buttons-wrapper .action-prompt a {
cursor: pointer;
}
#action-buttons-wrapper .action-prompt:focus,
#action-buttons-wrapper input:focus {
outline: none;
outline-width: 0;
}
/**********************************************************************************************
Content footer
**********************************************************************************************/
#content-footer-wrapper {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
clear: both;
width: 100%;
margin-top: 0px;
/*margin: 0;*/
border: 0;
/*min-height: 300px;*/
/*background-color: #575757;*/
/*background-image: url(http://images.africatravelresource.com/cdn/images/footer-banner.jpg);
background-size: cover;
background-position: center center;*/
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
#content-footer-wrapper.seo-widget {
margin-top: 330px !important;
}
body:not(.search-page) #content-footer-wrapper:hover {
background-color: #474747;
}
.contact-content #content-footer-wrapper {
margin-top: 0px;
}
.atr-page-wrapper.my-account #content-footer-wrapper {
margin-top: 0;
}
.content-footer {
padding: 72px 48px;
}
.content-footer-title {
width: 100%;
text-align: center;
color: #ffffff;
text-transform: uppercase;
}
.content-footer-title span.brand-name {
display: block;
font-size: 30px;
font-weight: normal;
padding: 0 0 16px 0;
letter-spacing: 16px;
line-height: 48px;
}
.content-footer-title span.brand-name a {
color: #ffffff;
text-decoration: none;
}
.content-footer-title span.brand-name a:hover {
/*color: #99ff00;*/
color: rgba(85, 230, 127, 1.0);
text-decoration: none;
}
.content-footer-title h2.brand-strapline, .content-footer-title span.brand-strapline {
display: block;
font-size: 24px;
font-weight: normal;
margin: 16px 0 0 0px;
padding: 0;
color: #9f9f9f;
letter-spacing: 6px;
text-transform: capitalize;
}
.content-footer-title span.brand-strapline a {
color: inherit;
text-decoration: none;
}
@media screen and (max-width: 767px) and (orientation: portrait) {
.content-footer-title span.brand-strapline {
font-size: 14px;
line-height: 200%;
letter-spacing: 6px;
}
}
.content-footer-title .parent-links {
color: #9f9f9f;
display: block;
margin-top: 22px;
}
.content-footer-title .parent-links a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 12px;
white-space: nowrap;
}
.content-footer-title .parent-links a.left {
margin-right: 30px;
}
.content-footer-title .parent-links a.right {
}
.content-footer-links-wrapper {
margin-top: 48px;
text-align: center;
position: relative;
}
.content-footer-links-wrapper img.left {
position: absolute;
left: 0;
top: 0;
margin-top: -20px;
/*padding-right: 16px;*/
}
.content-footer-links-wrapper img.right {
position: absolute;
right: 0;
top: 0;
/*padding-left: 16px;*/
}
.content-footer-links {
width: 1200px;
margin: 0 auto;
text-align: center;
}
.content-footer-links span {
display: inline-block;
padding: 0 30px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 18px;
color: #9f9f9f;
}
.content-footer-links span a {
color: #ffffff;
text-decoration: none;
}
.content-footer-menu {
margin-top: 60px;
margin-left: auto;
margin-right: auto;
width: 480px;
display: table;
}
@media screen and (max-width: 560px) {
.content-footer-menu {
display: none;
}
}
.content-footer-menu .atr-table-row {
display: table-row;
}
.content-footer-menu .atr-table-row > div {
display: table-cell;
}
.content-footer-menu .atr-table-row > div:first-of-type {
text-align: right;
padding-right: 36px;
}
.content-footer-menu .atr-table-row > div:last-of-type {
text-align: left;
padding-left: 36px;
}
.content-footer-menu .atr-table-row > div a:hover {
color: #fff;
}
#lodge-map.map-body {
width: 100%;
height: 100%;
}
#trip-map.map-body {
height: calc(100% - 162px);
top: 90px;
width: 100%;
}
#thumbnails {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
overflow: hidden;
text-transform: uppercase;
}
#thumbnails .slideshowTitleFirst {
clear: both;
display: block;
padding: 0 5px 13px 3px;
line-height: 15px;
}
#thumbnails .slideshowTitle {
display: block;
clear: both;
padding: 10px 5px 5px 3px;
}
#thumbnails a {
display: block;
float: left;
filter: alpha(opacity=70);
-moz-opacity: .70;
opacity: .70;
width: 136px; /*79px;*/
height: 79px; /*46px;*/
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
#thumbnails a.mid {
margin: 0 7px 7px 0;
border: 3px solid white;
}
#thumbnails a.last {
margin: 0 0 7px 0;
border: 3px solid white;
}
#thumbnails a:hover, #thumbnails a.selected {
border: 3px solid #000000;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
/**********************************************************************************************
action toolbox at foot of page
**********************************************************************************************/
#action-toolbox {
position: fixed;
bottom: -60px;
width: 100%;
height: 30px;
background-color: #000000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
text-align: center;
transition: all 0.5s ease-in-out;
}
#action-toolbox.fixed {
bottom: 0;
/*transition-delay: 0.5s;*/
}
#action-toolbox.fixed.large {
height: 60px;
padding: 15px 0;
}
#action-toolbox span {
display: inline-block;
margin-right: 196px;
color: #ffffff;
font-size: 14px;
line-height: 30px;
letter-spacing: 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
word-spacing: 3px;
}
/**********************************************************************************************
Experiences page map
**********************************************************************************************/
#experience-map-wrapper {
width: 800px;
height: 600px;
border: 1px solid #333333;
/*background-color: red;*/
}
/**********************************************************************************************
This class can be used to prevent a user's fast clicking from highlighting elements
**********************************************************************************************/
.unselectable {
-ms-user-select: none; /* IE 10+ */
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
hr.divider {
width: 80%;
max-width: 1000px;
height: 1px;
color: #b0b0b0;
background-color: #b0b0b0;
text-align: center;
margin: 56px auto;
border: none;
}
hr.wishlist.divider {
width: 1200px;
max-width: 1200px;
}
#add-current-item-to-wishlist-panel hr.wishlist-divider {
margin-top: 32px;
max-width: none;
}
/**********************************************************************************************
New menu page styles
**********************************************************************************************/
body.menu {
background-color: #fff;
color: #000;
text-transform: uppercase;
}
body.menu #page-banner {
background-color: #000;
/*position: relative;*/
}
body.menu #logo-strapline {
display: none;
}
body.menu #logo-wrapper {
position: absolute;
}
body.menu #slideshow {
display: none;
}
body.menu #page-wrapper {
margin-top: 90px;
}
body.menu .menu-wrapper {
background-color: #606060;
}
body.menu #content-footer-wrapper {
margin-top:0px;
border-top: 1px solid #8a8a8a;
}
body.map #page-wrapper {
margin-top: 0px;
}
/*body.search-page #slideshow .slideshow-image,
body.menu #slideshow .slideshow-image {
z-index: 3000;
background-image: url(http://images.africatravelresource.com/cdn/africa/botswana/centralkalahari/0/stills/01central%20kalahari/22BKPC-IM1423-central-kalahari-1475.jpg);
background-size: cover;
background-position: center top;
opacity: 0.0;
-moz-opacity: 0.0;
transition: opacity 0.7s ease-in-out 1s;
}
body.search-page.menu-open #slideshow .slideshow-image,
body.menu.menu-open #slideshow .slideshow-image {
opacity: 1.0;
-moz-opacity: 1.0;
}
body.search-page.menu-open #slideshow,
body.menu.menu-open #slideshow {
display: block;
}*/
#menu-header-wrapper {
width:100%;
padding-top: 60px;
margin-bottom: 36px;
text-align: center;
}
#menu-header-wrapper h1 {
color: #ffffff;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 36px;
}
#menu-page-content {
width: 80%;
max-width: 1000px;
margin: 0 auto 0 auto;
padding: 0 24px 60px 24px;
}
#menu-page-content .menu-content-panel {
margin-bottom: 2px;
padding: 16px 32px;
/*background-color: #e8e8e8;*/
position: relative;
}
#menu-page-content .menu-content-panel .dynamic-columns {
-moz-column-width: 460px;
-webkit-column-width: 460px;
column-width: 460px;
}
#menu-page-content .menu-content-panel .dynamic-columns a {
display: block;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
/* Firefox is dumb */
break-inside: avoid;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 16px;
line-height: 48px;
letter-spacing: 5px;
white-space: nowrap;
text-align: center;
}
#menu-page-content .menu-content-panel .dynamic-columns a:hover {
color: #46bc68;
}
#page-cover {
/*z-index: 100;*/
position: absolute;
top: 0;
left: 0;
background-color: #000;
width: 100%;
opacity: 0.0;
-moz-opacity: 0.0;
transition: opacity 0.4s ease-in-out;
}
#page-cover.active {
opacity: 1.0;
-moz-opacity: 1.0
}
#page-wrapper.map {
height: 100vh;
z-index: 10;
}
#page-wrapper.menu {
opacity: 0.0;
-moz-opacity: 0.0;
transition: opacity 0.4s ease-in-out;
}
#page-wrapper.menu.active {
opacity: 1.0;
-moz-opacity: 1.0
}
.menu-wrapper .close-button-wrapper {
z-index: 5010;
position: fixed;
width: 90px;
/*background-color: #000;*/
}
.menu-content {
padding: 0 24px;
}
.menu-header-wrapper {
width: 100%;
padding-top: 32px;
}
.menu-header-wrapper .main-menu-element {
position: relative;
width: 320px;
margin: 0 auto;
text-align: center;
text-transform: uppercase;
padding: 0 0 32px;
}
.menu-wrapper .close,
.menu-wrapper .close-button-wrapper .close {
z-index: inherit;
float: left;
display: inline-block;
height: 90px;
width: 90px;
}
.menu-wrapper .close a,
.menu-wrapper .close-button-wrapper .close a {
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -535px -33px;
margin-left: 19px;
margin-top: 33px;
}
.menu-wrapper .close-sub-menu,
.menu-wrapper .close-button-wrapper .close-sub-menu {
z-index: inherit;
float: left;
display: inline-block;
height: 90px;
width: 60px;
margin-left: -33px;
}
.menu-wrapper .close-sub-menu.hidden,
.menu-wrapper .close-button-wrapper .close-sub-menu.hidden {
display: none;
}
.menu-wrapper .close-sub-menu a,
.menu-wrapper .close-button-wrapper .close-sub-menu a {
position: absolute;
display: inline-block;
width: 24px;
height: 24px;
background: url(http://images.africatravelresource.com/cdn/images/sprites.png) no-repeat -507px -33px;
margin-left: 33px;
margin-top: 33px;
}
.menu-content hr.divider {
margin: 0 auto 32px auto;
width: 100%;
/*max-width: 1000px;*/
}
.menu-content-body .interim-section hr.divider {
margin-top: 32px;
}
.interim-section hr.divider.wishlist-divider {
width: 100%;
max-width: none;
}
hr.divider.wishlist-divider {
max-width: 1200px;
}
#page-top-gradient {
z-index: 200;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120px;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
opacity: 1.0;
-moz-opacity: 1.0;
transition: opacity 0.7s ease-in-out;
}
#page-top-gradient.solid {
opacity: 0.0;
-moz-opacity: 0.0;
}
#page-bottom-gradient {
z-index: 80;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 200px;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.popup-bottom-gradient {
z-index: 10;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.popup-bottom-gradient:not(.kili) {
height: 100px;
}
.popup-bottom-gradient.kili {
height: 120px;
}
/**********************************************************************************************
SEO bs widget
**********************************************************************************************/
#seo-widget {
z-index: -1; /* overridden by the active class - this is needed to avoid a display glitch in chrome where the seo widget flashes at the top of the page briefly on page load */
overflow: hidden;
height: 220px;
position: absolute;
width: 100%;
text-align: center;
/*overflow: hidden;*/
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
bottom: 332px;
background-color: #606060;
padding-top: 40px;
margin-bottom: 1px;
color: #9f9f9f;
transition: background-color 0.5s ease-in-out;
}
#seo-widget.active {
z-index: 1500;
}
#seo-widget:hover {
background-color: #474747;
}
#seo-widget .seo-widget-button {
position: absolute;
width: 15%;
margin-top: -55px;
}
#seo-widget .seo-widget-button.left {
left: 0;
}
#seo-widget .seo-widget-button.right {
right: 0;
}
#seo-widget .seo-widget-button > a {
cursor: pointer;
display: inline-block;
position: relative;
height: 33px;
width: 40px;
background: rgba(0, 0, 0, 0) url("http://images.africatravelresource.com/cdn/images/sprites.png") no-repeat scroll 0 -156px;
}
#seo-widget .seo-widget-button.left > a {
right: -20px;
top: 60px;
}
#seo-widget .seo-widget-button.right > a {
left: -20px;
top: 61px;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
#seo-widget > h1 {
font-size: 22px;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 10px;
line-height: 48px;
}
#seo-widget .articles {
margin-left: 15%;
overflow: hidden;
position: absolute;
width: 70%;
}
#seo-widget .articles .article-scroller {
left: 0;
position: relative;
}
#seo-widget .articles article {
float: left;
/*padding: 0 20px;*/
position: relative;
text-align: justify;
line-height: 22px;
}
#seo-widget .articles article strong {
font-weight: bold;
}
#seo-widget .articles article.active {
visibility: visible;
}
#seo-widget .articles article:not(.active) {
visibility: hidden;
}
#seo-widget .articles article h2 {
font-size: 17px;
margin-bottom: 20px;
}