/* FONT - Generated by Font Squirrel (http://www.fontsquirrel.com) America/New_York */

@font-face {
    font-family: 'caveatregular';
    src: url('../Fonts/caveat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ambleregular';
    src: url('../Fonts/Amble-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'amblebold';
    src: url('../Fonts/Amble-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {

  --color-charcoal: #444444;
  --color-charcoal-dark: #262626;
  --color-charcoal-xdark: #0f0f0f;
  --color-charcoal-light: #6F6F6F;
  --color-charcoal-xlight: #CCCCCC;

  --color-green: #688226;
  --color-green-dark: #688226;
  --color-green-light: #88aa32;

  --color-error: #be1820;
  --color-success: #80b641;

  --color-white: #fff;
  --color-black: #000;


  /* Font sizes */
  --default-font-size: 1.6rem;

  /* Fonts */
  --font: 'ambleregular', sans-serif;
  --font-bold: 'amblebold', sans-serif;
  --font-cursive: 'caveatregular', 'Comic Sans MS', cursive;

}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* in base file because it defines what 1rem is and therefore layout for rest of site */
/*root font size set here, so can use rem on all other elements*/
/*REMs NOT SUPPORTED BELOW IE 9*/
html {
    /*font-size: 10px;*/ /*using 10px - makes it easier - 1rem is 10px |  BUT now user cant change font size in browser - overriding it */  
    /* THEREFORE we change it to a percentage - which is a percentage of the browser default font size - usually 16px */
    font-size: 62.5%; /*if browser default is 16px, then this is now 10px*//*1rem is 10px*/
}

html{background-color: var(--color-charcoal-dark);}

      html, body {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        color: var(--color-charcoal);
        font-family: var(--font);
        letter-spacing: .2px;
      }

      
/* CONTENT LINKS */
a{color: var(--color-charcoal); font-size: 1.7rem; font-family: var(--font); line-height: 160%; text-decoration: underline; font-weight: normal; transition: .2s;}
a:link {color: var(--color-charcoal); text-decoration: underline;} 
a:visited {color: var(--color-charcoal); text-decoration: underline;}
a:active {color: var(--color-charcoal); text-decoration: underline;}
a:hover {color: var(--color-green); text-decoration: underline;}

a.white{color: var(--color-white); font-family: var(--font); line-height: 160%; text-decoration: none; font-weight: normal; transition: .2s;}
a.white:link {color: var(--color-white); text-decoration: none;} 
a.white:visited {color: var(--color-white); text-decoration: none;}
a.white:active {color: var(--color-white); text-decoration: none;}
a.white:hover {color: var(--color-green); text-decoration: none;}

a.char{color: var(--color-charcoal); font-family: var(--font); line-height: 160%; text-decoration: underline; font-weight: normal; transition: .2s;}
a.char:link {color: var(--color-charcoal); text-decoration: underline;} 
a.char:visited {color: var(--color-charcoal); text-decoration: underline;}
a.char:active {color: var(--color-charcoal); text-decoration: underline;}
a.char:hover {color: var(--color-green); text-decoration: underline;}

a.green{color: var(--color-green-light); font-family: var(--font); line-height: 160%; text-decoration: underline; font-weight: normal; transition: .2s;}
a.green:link {color: var(--color-green-light); text-decoration: underline;} 
a.green:visited {color: var(--color-green-light); text-decoration: underline;}
a.green:active {color: var(--color-green-light); text-decoration: underline;}
a.green:hover {color: var(--color-white); text-decoration: underline;}


/*MAIN STRUCTURAL DIVS*/

#header{width: 100%; height: 6rem; background-color: #FFFFFF;}
#headerInner{position: relative; width: 1160px; margin-left: auto; margin-right: auto;}

#logoWrapper{position: absolute; z-index: 2000;}
#logo{margin: 1rem .5rem .5rem .5rem;}


.innerWrapper {width: 1160px; margin-left: auto; margin-right: auto;}
.innerPadding {padding: 5rem 0rem 5.5rem 0rem;}
.innerPadding2 {padding: 5rem 1rem 5.5rem 1rem;}
.innerPaddingBottom {padding: 0rem 0rem 5rem 0rem;}

.sectionWhite{width: 100%; background-color: #FFFFFF;}

.sectionGrey{width: 100%; background-color: #313131;}
.sectionGrey p{color: #FFFFFF;}
.sectionGrey h3{color: #FFFFFF;}

.sectionGreyLight{width: 100%; background-color: var(--color-charcoal-xlight);}

.sectionCamp{width: 100%; background-color: var(--color-charcoal-dark); background-image: url('../images/bg_roofTopTent.jpg'); background-size: cover; background-position: center; padding: 12rem 0rem;}
.sectionCamp div.narrowCamp{width: 60%; margin: 0rem auto; text-align: center;}
.sectionCamp p{color: var(--color-white); text-align: center;}

.sectionKaokoland{width: 100%; background-color: var(--color-charcoal-dark); background-image: url('../images/bg_Kaokoland.jpg'); background-size: cover; background-position: center; padding: 12rem 0rem;}
.sectionKaokoland div.narrow{width: 60%; margin: 0rem auto; text-align: center;}
.sectionKaokoland p{color: var(--color-white); text-align: center;}



/*MAIN PIC*/
/* #picWrapper{width: 100%; background-color: var(--color-charcoal);} */
/* #mainPic{display: block; width: 100%;} */


/*SLIDE*/
#slideWrapper{position: relative; width: 100%; text-align: center; background-color: var(--color-white); overflow: none;}
#slideDiv{position: relative; width: 100%; background-color: var(--color-white); margin-top: 0px; margin-bottom: 0px; overflow: hidden;}
.imgSlide{position: relative; display: block; width: 100%; margin-bottom: 0px;} /*for images ie7 and below and for top images no slide */
/*#slideDiv figure img{display: block; width: 100%;}*/

/*SLIDE PIC*/
#picCurve{position: absolute; height: 7rem; width: 100%; bottom: 0; background-image: url('../images/curve.png'); background-repeat: no-repeat; background-position: bottom center; z-index: 1000;}
.picTxtWrapper{position: absolute; width: 90%; margin: 9% 5% 0px 5%; text-align: center; z-index: 2000;}
.picTxt{width: 50rem; margin: 0px auto; text-align: center; font-family: var(--font-cursive); font-size: 7.2rem; font-weight: 700; line-height: 130%; color: var(--color-white); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6); margin-bottom: 2rem;}
.picTxtLong{width: 50rem; margin: 0px auto; text-align: center; font-family: var(--font-cursive); font-size: 7.2rem; font-weight: 700; line-height: 130%; color: var(--color-white); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6); margin-bottom: 2rem;}


/* MAIN CONTENT IMAGES */
#slideWrapper2{position: relative; width: 100%; height: 52rem; text-align: center; background-color: var(--color-white); background-repeat: no-repeat; background-size: cover; background-position: center center;}
#picCurve2{position: absolute; height: 7rem; width: 100%; bottom: 0; background-image: url('../images/curve.png'); background-repeat: no-repeat; background-position: bottom center; z-index: 1000;}
.picTxtWrapper2{position: absolute; width: 90%; margin: 12% 5% 0px 5%; text-align: center; z-index: 2000;}
.picTxt2{width: 100%; margin: 0px auto; text-align: center; font-family: var(--font-cursive); font-size: 7.2rem; font-weight: 700; line-height: 130%; color: var(--color-white); text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.6); margin-bottom: 2rem;}

.picCamp{background-image: url('../images/slide_Camping.jpg');}
.picCanyon{background-image: url('../images/slide_HoarusibCanyon.jpg');}
.picRiver{background-image: url('../images/slide_HoarusebRiver.jpg');}
.picDrive{background-image: url('../images/slide_NamibianRoad.jpg');}

/*<img class="imgSlide" src="images/slide_NamibianRoad.jpg"*/

/*<img class="imgSlide" src="images/slide_HoarusebRiver.jpg" alt="Hoaruseb Riverbed, Puros" />*/




/* NAVIGATION */

#menuWrapper{position: absolute; right: .8rem; top: 3rem;}
/* #menuWrapper{float: right; margin: 1.5rem 1rem .8rem 1rem;} */

#menuIcon{display: none; float: right; margin-top: .5rem; margin-right: 2rem; height: 5rem; width: 5rem; cursor: pointer;}

#navDiv{
position: relative;
margin-top: 0px;
}
  
/* CONTENT LINKS main nav links */

a.main{position: relative; display: block; float: left; padding: 1px 12px 12px 8px; color: var(--color-charcoal); font-size: 1.7rem; font-family: var(--font-bold); text-decoration: none; transition: 0.3s; line-height: 120%;}
a.main:link {color: var(--color-charcoal); text-decoration: none;} 
a.main:visited {color: var(--color-charcoal); text-decoration: none;}
a.main:active {color: var(--color-charcoal); text-decoration: none;}
a.main:hover {color: var(--color-green); text-decoration: none;}


a.mainLive{position: relative; display: block; float: left; padding: 1px 15px 15px 10px; color: var(--color-green); font-size: 1.7rem; font-family: var(--font-bold); text-decoration: none; transition: 0.3s; line-height: 120%;}
a.mainLive:link {color: var(--color-green); text-decoration: none;} 
a.mainLive:visited {color: var(--color-green); text-decoration: none;}
a.mainLive:active {color: var(--color-green); text-decoration: none;}
a.mainLive:hover {color: var(--color-green); text-decoration: none;}

/*div.main{position: relative; display: block; float: left; padding: 1px 15px 15px 10px; color: var(--color-charcoal); font-size: var(--default-font-size); font-family: open_sansbold; text-decoration: none; line-height: 120%; cursor: pointer; cursor: hand;}*/


/*.mainLive2{position: relative; display: block; float: left; padding: 1px 15px 15px 10px; color: var(--color-green); font-size: var(--default-font-size); font-family: open_sansbold; text-decoration: none;  line-height: 120%; cursor: pointer; cursor: hand;}*/


#navClose{display: none; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background-color: #333333; cursor: pointer; cursor: hand; transition: background-color .4s;}
#navClose p{margin-top: 50%; transform: translateY(-50%); color: #666666; font-size: 20px; text-align: center; line-height: 1; }
#navClose:hover{background-color: #efe5d3;}


/*GENERAL*/
h1{ margin: 0rem 0rem 2.5rem 0rem;
    font-size: 4.8rem;
    color: var(--color-charcoal-dark);
    font-family: var(--font);
    font-weight: normal;
    line-height: 120%;
    text-align: center;
}

h2{ margin: 0rem 0rem 2.5rem 0rem;
    font-size: 5.2rem;
    color: var(--color-green);
    font-family: var(--font-cursive);
    font-weight: 700;
    line-height: 120%;
    text-align: center;
}
h2.light{color: var(--color-green-light);}
h2.content{margin: 3.5rem 0rem 2.5rem 0rem;}

h3{ margin: 3rem 0rem 1rem 0rem;
    font-size: 2.4rem;
    color: var(--color-charcoal);
    font-family: var(--font-bold);
    font-weight: normal;
    line-height: 120%;
    text-align: center;
}

h3.light{font-family: var(--font);
}

h4{ margin: 3rem 0rem 1rem 0rem;
    font-size: 1.8rem;
    color: var(--color-charcoal);
    font-family: var(--font);
    font-weight: bold;
    line-height: 120%;
    text-align: center;
}

p{  padding: 0;
    margin: 0rem 0rem 1.5rem 0rem;
    font-size: 1.7rem;
    color: var(--color-charcoal);
    font-family: var(--font);
    line-height: 160%;
    text-align: justify;}

p.center{text-align: center;}

p.intro{
    margin: 0rem 0rem .5rem 0rem;
    padding-top: 1rem;
}

p.indent{padding-left: 2rem;}

p.breadcrumb{padding-left: 3.5rem; background-image: url('../images/arrowBack.png'); background-repeat: no-repeat; background-position: left center; font-family: var(--font);}

p.bold{font-family: var(--font);}

.text-2col{column-width: 30rem; column-gap: 5rem;}

span.black{color: var(--color-black);}

.center{text-align: center;}

.noTopMargin{margin-top: 0rem;}

div.indent{padding-left: 2rem;}

div.break{clear: both; height: .1rem;}

div.divider{clear: both; margin: 0px 0px 50px 0px; padding: 0rem; height: 1px; border-style: solid; border-color: var(--color-charcoal-xlight); border-width: 1px 0px 0px 0px;}

div.narrowCentre{width: 70%; margin: 0rem auto; text-align: center;}
div.narrowCentre p{text-align: center;}

div.narrow{width: 70%; margin: 0rem auto;}

a img{outline: none; border-style: none;}
    
.text-nowrap {
    white-space: nowrap;
}

.icon{vertical-align: middle;}

.small{font-size: 1rem; line-height: 50%;}

ul.indent{padding-left: 2rem;}

li{font-size: var(--default-font-size); margin-left: 15px; margin-bottom: 8px;}

table{font-size: var(--default-font-size);}
td{font-size: var(--default-font-size);}


/* HOME ICONS AMENITIES */
.amenitiesPad{padding: 0rem 1rem 0rem 1rem;}
.amenitiesFlex{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0rem auto 1rem auto;
    justify-content: center;
    align-items: top;
    flex-direction: row;
}
.amenitiesFlex-bloc{
    position: relative;
    flex-basis: 0; /*to keep columns equal width*/
    flex-grow: 1; /*to keep columns equal width*/
    margin: 0px 10px;
    padding-bottom: 1rem;
    text-align: center;
}

.amenitiesFlex-bloc p{margin: .8rem .5rem .5rem .5rem; font-family: var(--font-cursive); font-size: 2rem; text-align: center; color: var(--color-green); line-height: 120%;}


/* HOME ACTIVITIES FLEX */

.cost{font-style: italic;}

.activityFlex{
    width: 100%;
    display: flex;
    /*flex-wrap: wrap;*/
    margin: 2rem auto 3rem auto;
    justify-content: center;
    align-items: top;
    flex-direction: row;
}
.activityFlex-bloc{
    position: relative;
    flex-basis: 30%; /*to keep columns equal width*/
    flex-grow: 1; /*to keep columns equal width*/
    margin: 0px 10px;
    padding-bottom: 1rem;
    text-align: center;
    background-color: var(--color-white);
    box-shadow: 1px 2px 9px 1px rgba(0,0,0,0.65);
    -webkit-box-shadow: 1px 2px 9px 1px rgba(0,0,0,0.65);
    -moz-box-shadow: 1px 2px 9px 1px rgba(0,0,0,0.65);
    cursor: pointer;
    overflow: hidden;
    transition: .3s;
}

.activityFlex-bloc:hover .activityFlex-bloc-pic{
    
    transform: scale(1.05);
}

.activityFlex-bloc-pic{height: 30rem; background-size: cover; background-position: center; transition: .4s;}
.elephant{background-image: url('../images/activity_Elephants.jpg');}
.himba{background-image: url('../images/activity_ovaHimba.jpg');}
.drive{background-image: url('../images/activity_gameDrive.jpg');}
.activityFlex-bloc-txt{padding: 1rem 3rem; text-align: center;}
.activityFlex-bloc-txt p{text-align: center;}


/* THREE PIC FLEX */
.threePicFlex{
    width: 100%;
    display: flex;
    /*flex-wrap: wrap;*/
    margin: 2rem auto 3rem auto;
    justify-content: center;
    align-items: top;
    flex-direction: row;
}
.threePicFlex-bloc{
    position: relative;
    flex-basis: 30%; /*to keep columns equal width*/
    flex-grow: 1; /*to keep columns equal width*/
    margin: 0px 10px;
    background-color: #313131;
    height: 35rem; background-size: cover; 
    background-position: center;
    overflow: hidden;
}

.threePicFlex-blocAlt{
    position: relative;
    flex-basis: 30%; /*to keep columns equal width*/
    flex-grow: 1; /*to keep columns equal width*/
    margin: 0px 10px;
    /*background-color: #313131;*/
    /*height: 35rem;*/
    /*overflow: hidden;*/
}

.threePicFlex-blocAlt img{width: 100%;}

/* BUTTONS */

/*Button Black General link button*/
a.buttonLogout {
    display: inline-block;
    font-size: 1.2rem;
    font-family: var(--font);
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--color-charcoal); 
    border-radius: 2rem; 
    padding: .6rem 1rem;
    /* box-shadow: 0px .2rem .5rem rgba(0,0,0,0.4); */
    transition: all .4s;
  }
  a.buttonLogout:link {color: var(--color-white); text-decoration: none;} 
  a.buttonLogout:visited {color: var(--color-white); text-decoration: none;}
  a.buttonLogout:active {color: var(--color-white); text-decoration: none;}
  a.buttonLogout:hover{color: var(--color-white); text-decoration: none; background-color: var(--color-green); box-shadow: 0px 2px 4px rgba(0,0,0,0.2);}

/*Button Black General link button*/
a.buttonBlk {
  display: inline-block;
  font-size: 1.8rem;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-black); 
  padding: .8rem 3.4rem;
  margin: 2rem auto;
  border-radius: 2rem;
  box-shadow: 0px .2rem .5rem rgba(0,0,0,0.4);
  transition: all .5s;
}
a.buttonBlk:link {color: var(--color-white); text-decoration: none;} 
a.buttonBlk:visited {color: var(--color-white); text-decoration: none;}
a.buttonBlk:active {color: var(--color-white); text-decoration: none;}
a.buttonBlk:hover{background-color: var(--color-green-light); box-shadow: 0px 2px 4px rgba(0,0,0,0.2); text-decoration: none;}


/*Button Charcoal*/
a.buttonChar {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-charcoal-dark); 
  padding: .8rem 1.8rem;
  margin: 2rem auto;
  box-shadow: 0px .2rem .5rem rgba(0,0,0,0.4);
  transition: all .5s;
}
a.buttonChar:link {color: var(--color-white); text-decoration: none;} 
a.buttonChar:visited {color: var(--color-white); text-decoration: none;}
a.buttonChar:active {color: var(--color-white); text-decoration: none;}
a.buttonChar:hover{background-color: var(--color-green); box-shadow: 0px 2px 4px rgba(0,0,0,0.2);}


/*Button Green*/
a.buttonGreen {
  display: inline-block;
  font-size: 1.8rem;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--color-green-dark); 
  padding: .8rem 4.4rem;
  margin: 2rem auto;
  border-radius: 2.5rem;
  box-shadow: 0px .2rem .5rem rgba(0,0,0,0.4);
  transition: all .5s;
}
a.buttonGreen:link {color: var(--color-white); text-decoration: none;} 
a.buttonGreen:visited {color: var(--color-white); text-decoration: none;}
a.buttonGreen:active {color: var(--color-white); text-decoration: none;}
a.buttonGreen:hover{background-color: var(--color-green-light); box-shadow: 0px 2px 4px rgba(0,0,0,0.2);}


/*Button Green Outline Ghost*/
a.buttonGreenGhost {
  display: inline-block;
  font-size: 1.8rem;
  color: var(--color-green);
  text-decoration: none;
  background-color: transparent;
  border: solid 2px var(--color-green); 
  padding: .8rem 3.4rem;
  margin: 2rem auto;
  border-radius: 2rem;
  transition: all .5s;
}
a.buttonGreenGhost:link {color: var(--color-green); text-decoration: none;} 
a.buttonGreenGhost:visited {color: var(--color-green); text-decoration: none;}
a.buttonGreenGhost:active {color: var(--color-green); text-decoration: none;}
a.buttonGreenGhost:hover{background-color: var(--color-green); color: var(--color-white); box-shadow: 0px 2px 4px rgba(0,0,0,0.2);}


/* FOOTER */
.sectionFooter{width: 100%; background-color: transparent; margin-top: 0rem; padding-top: 6rem; padding-bottom: 3rem; background-image: url('../images/bg_footer.jpg'); background-repeat: repeat-x; background-position: top;}
.sectionFooter p{text-align: center;}
.footerCopy{margin: 20rem 1rem 6rem 1rem; font-size: 1.5rem;}

.privacyContacts{font-weight: 700; margin-top: 3rem;}
.privacyContacts p{font-weight: 700;}

/*SCROLL TO TOP */   
.scrollToTop{display: none; width: 5rem; position: fixed; right: 0rem; bottom: 0rem; background-color: #000000; font-size: 1.4rem; color: #FFFFFF; padding: .6rem; border-style: solid; cursor: pointer; cursor: hand; z-index: 100;}
.scrollToTop:hover{background-color: var(--color-green);}