/* === Import fonts ===================================================================== */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700&display=swap');

/* === Main ============================================================================= */
html, body { width: 100%; height: 100%; margin: 0%; font-size: 17px; /* fonts */ font-family: 'Roboto', sans-serif; }

h1 { font-weight: 100; margin-top: 0; font-size: 2.4em; font-style: thin; color: #334E5A; }
h2 { font-weight: 100; margin-top: 0; font-size: 2.2em; font-style: thin; color: #334E5A; }
h3 { color: #334E5A; margin-top: 0; font-size: 1.8em; font-weight: 300; }
hr { display: inline-block; width: 10%; border-style: solid; border-width: medium; color: #fcf5e7; }

p { line-height: 150%; font-style: thin; color: #334E5A; }
label { line-height: 150%; font-size: 20px; font-style: thin; color: #334E5A; }
img { max-width: 100%; }

.textCenter { text-align: center; }
/*.marginTop { margin-top: 5%; }
.marginBottom { margin-bottom: 5%; }*/

.padded { padding: 40px; }
.noPadTop { padding-top: 0; }
.noPadBottom { padding-bottom: 0; }

@media screen and (max-width: 768px) {
	html, body { font-size: 15px; }

	h1 { font-size: 3em; }
	/* h2 {  } */
}

@media screen and (max-width: 500px) {
	html, body { font-size: 14px; }

	h1 { font-size: 2em; }
	/* h2 {  } */
}

/* === Hero ============================================================================= */
#logo {
	width: 140px;
	height: 46px;
	display: inline-block;
	float: left;
	transform: translateY(-10px);

	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 140px;
}

@media screen and (max-width: 960px) {
	#logo { display: none; }
}

/* === Hero ============================================================================= */
.heroImage { box-sizing: border-box; background-size: cover; background-position: center; height: 700px; width: 100%; }

.home { width: 100%; background: url(../img/home.jpg); background-size: cover; background-position: center; }
.wild { background-image: url(../img/wild-who.jpg); }
.destinations { background-image: url(../img/hero-destination.jpg); }
.activities { background-image: url(../img/hero-activities.jpg); }
.enquire { background-image: url(../img/hero-enquire.jpg); }
.biking { background-image: url(../img/hero-biking.jpg); }
.jeeping { background-image: url(../img/hero-jeeping.jpg); }
.southafrica { background-image: url(../img/hero-sa.jpg); }
.rwanda { background-image: url(../img/hero-rwanda.jpg); }

@media screen and (max-width: 1600px) {
	.heroImage { height: 600px; }
}
@media screen and (max-width: 1400px) {
	.heroImage { height: 500px; }
}
@media screen and (max-width: 960px) {
	.heroImage { height: 0; min-height: 200px; padding-top: 50%; }
}
@media screen and (max-width: 768px) {
	.home { padding-top: 400px; }
	/* .heroImage { padding-top: 500px; } */
}

/* === Navigation ======================================================================= */
nav { padding-top: 26px; position: fixed; top: 0; left: 0; right: 0; width: 100%; font-size: 18px; text-align: right; z-index: 5;  }
nav ul { list-style: none; padding: 0; margin: 0; }
nav ul li { display: inline-block; margin: 0 22px; }
nav ul li a { display: inline-block; text-decoration: none; color: #4a7486; border-bottom: 2px solid transparent; padding: 12px 0; }
nav ul li a:hover,
nav ul li a.active { border-color: #4a7486; } /* old-colour: #08415a; */
nav.white {
	background: white;
	-webkit-box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
			box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}

@media screen and (max-width: 960px) {
	nav { text-align: center; padding-top: 0; overflow-x: hidden; overflow-y: scroll; }
}

/* === Hamburger menu ============================================= */
.hamburger {
	display: none;
	position: fixed;
	right: 22px;
	top: 22px;
    padding: 15px;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,filter;
	z-index: 10;
    cursor: pointer;
}
.hamburger.active:hover, .hamburger:hover { opacity: .7 }
.hamburger.active .hamburger-inner, .hamburger.active .hamburger-inner:after, .hamburger.active .hamburger-inner:before { background-color: #4a7486; }
.hamburger-box { position: relative; display: inline-block; width: 40px; height: 24px }
.hamburger-inner { top: 50%; display: block; margin-top: -2px }
.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 40px; height: 4px; transition-timing-function: ease; transition-duration: .15s; transition-property: transform; border-radius: 4px; background-color: #4a7486; }
.hamburger-inner:after, .hamburger-inner:before { display: block; content: "" }
.hamburger-inner:before { top: -10px }
.hamburger-inner:after { bottom: -10px }

/* === Elastic + active ============================================= */
.hamburger--elastic .hamburger-inner { top: 2px; transition-timing-function: cubic-bezier(.68,-.55,.265,1.55); transition-duration: .275s }
.hamburger--elastic .hamburger-inner:before { top: 10px; transition: opacity .125s ease .275s }
.hamburger--elastic .hamburger-inner:after { top: 20px; transition: transform .275s cubic-bezier(.68,-.55,.265,1.55) }
.hamburger--elastic.active .hamburger-inner { transition-delay: 75ms; transform: translate3d(0,10px,0) rotate(135deg) }
.hamburger--elastic.active .hamburger-inner:before { transition-delay: 0s; opacity: 0 }
.hamburger--elastic.active .hamburger-inner:after { transition-delay: 75ms; transform: translate3d(0,-20px,0) rotate(-270deg) }
.hamburger--elastic-r .hamburger-inner { top: 2px; transition-timing-function: cubic-bezier(.68,-.55,.265,1.55); transition-duration: .275s }
.hamburger--elastic-r .hamburger-inner:before { top: 10px; transition: opacity .125s ease .275s }
.hamburger--elastic-r .hamburger-inner:after { top: 20px; transition: transform .275s cubic-bezier(.68,-.55,.265,1.55) }
.hamburger--elastic-r.active .hamburger-inner { transition-delay: 75ms; transform: translate3d(0,10px,0) rotate(-135deg) }
.hamburger--elastic-r.active .hamburger-inner:before { transition-delay: 0s; opacity: 0 }
.hamburger--elastic-r.active .hamburger-inner:after { transition-delay: 75ms; transform: translate3d(0,-20px,0) rotate(270deg) }

@media screen and (max-width: 960px) {
	nav {
		height: 0;
		background-color: #fff;
	}
	nav ul { padding: 80px 0; }
	nav ul li { display: block; margin-bottom: 12px; }
	.hamburger { display: block; }
	.hamburger.active + nav { height: 100%; }
}
/* === Hamburger END ============================================== */
/* === Containers ============================================= */
.container,
.container.description { max-width: 700px; margin-left: auto; margin-right: auto; }
.container.wide { max-width: 960px; }

.container:after { content: ''; display: table; clear: both; }

/* section { background: tomato; } */

.logoicon { width: 100%; height: 100%; }
.logo { margin-right: -7.4%; margin-top: -1%; margin-left: 1%; float: left; }

.wildwho description { width: 100%; height: 50%; }

.leftCol { text-align: justify; padding-right: 440px; }
.rightCol { text-align: justify; padding-left: 440px; }
.roundImage {
	float: right;
	width: 400px;
	height: 400px;
	border-radius: 100%;
	overflow: hidden;
}
.roundImage.left { float: left; }
.roundImage img { display: block; width: 100%; }

@media screen and (max-width: 960px) {
	.leftCol { padding-right: 340px; }
	.rightCol { padding-left: 340px; }
	.roundImage { width: 300px; height: 300px; }
}
@media screen and (max-width: 768px) {
	.leftCol { padding-right: 0; }
	.rightCol { padding-left: 0; }
	.roundImage.left { float: none; }
	.roundImage { float: none; margin: auto; margin-bottom: 32px; max-width: 100%; height: auto; }
}

/* === Columns ============================================= */
.colsHalf:after,
.colsThird:after { content: ''; display: table; clear: both; }

.colsHalf .col { width: 46%; display: inline-block; margin-bottom: 32px; }
.colsHalf .col img { max-width: 200px; }

.colsThird .col { width: 33%; display: inline-block; margin-bottom: 16px; float: left; }
.colsThird .col:nth-child(4),
.colsThird .col:nth-child(5) { float: none; }
.colsThird .col img { max-width: 200px; }

@media screen and (max-width: 768px) {
	.colsHalf .col,
	.colsThird .col { width: 100%; float: none; }
}

/* === Youtube embed ============================================= */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.description { margin-top: 5%; margin-right: 5%; margin-left: 5%; }

.bike description { width: 100%; height: 50%; }

.bikedescription { margin-bottom: 5%; margin-top: 5%; margin-right: 5%; margin-left: 5%; }

.jeep description { width: 100%; height: 50%; }

.jeepdescription { margin-bottom: 5%; margin-top: 5%; margin-right: 5%; margin-left: 5%; }

.wildwhoimage img { padding-left: 5%; border-radius: 50%; float: right; display: inline-block; }

.saimage img { margin-top: 5%; padding-left: 5%; border-radius: 50%; float: right; display: inline-block; }


.ac description { width: 100%; height: 60%; }

.acdescription { margin-top: 5%; margin-right: 5%; margin-left: 5%; margin-bottom: 15%; }


.acimage img { margin-bottom: 5%; padding-left: 5%; border-radius: 50%; float: right; display: inline-block; }

.acpara { text-align: justify; padding-top: 10%; padding-right: 45%; }


.bikingpara { text-align: justify; }

.southafricapara { width: 101%; text-align: justify; }

.wildwho quote { width: 100%; }
.destination quote { width: 100%; height: 10%; }
.desquote { background-color: white; }

.quoteWheat { background-color: #fcf5e7; }
.quote p { max-width: 700px; margin: auto; text-align: center; font-style: italic; }

/* .commitment { width: 100%; } */
/*.commitmenthead { text-align: center; }
.commitmenthead h1 { margin: 2%; }
.commitmenthead hr { border-width: medium; color: #fcf5e7; }

.africacommitment { width: 100%; height: 10%; }
.africacommitmenthead { margin: 5%; text-align: center; }
.africacommitmenthead hr { color: #fcf5e7; border-width: medium; }

.southcommitment { background-color: #fcf5e7; }
.southcommitmenthead { margin-left: 5%; margin-bottom: 5%; text-align: center; }*/
/* .southcommitmenthead hr { margin-left: 5%; border-width: medium; float: left; color: #feab7f; } */

.southpara p { margin-left: 5%; width: 80%; text-align: left; margin-top: 5%; }


.sub p { margin-bottom: 5%; margin-top: 3%; margin-right: 20%; margin-left: 20%; text-align: center; }
.wowtest { width: 100%; }

.SAofferings { width: 100%; }
.sarow1 { margin-bottom: 5%; margin-left: 10%; margin-right: 10%; }
.sacolumn1 { font-size: 200%; float: left; text-align: center; width: 33.3%; display: inline; float: left; }
.sarow2 { text-align: center; margin-left: 10%; margin-right: 10%; margin-top: 10%; }
.sacolumn2 { font-size: 200%; text-align: center; width: 33.3%; display: inline; float: left; }

.row1 { margin-bottom: 5%; margin-left: 10%; margin-right: 10%; margin-top: 10%; }
.column1 { margin-top: 5%; font-size: 200%; float: left; text-align: center; width: 33.3%; display: inline; float: left; }
.row2 { text-align: center; margin-left: 10%; margin-right: 10%; margin-top: 10%; }
.column2 { font-size: 200%; text-align: center; width: 33.3%; display: inline; float: left; }
.row3 { margin-bottom: 5%; text-align: center; margin-left: 20%; margin-right: 20%; margin-top: 10%; }
.column3 { margin-top: 5%; font-size: 200%; text-align: center; width: 50%; display: inline; float: left; }
.row4 { text-align: center; margin-left: 20%; margin-right: 20%; margin-top: 10%; }
.column4 { font-size: 200%; text-align: center; width: 50%; display: inline; float: left; }

.RWrow3 { margin-bottom: 5%; text-align: center; margin-left: 20%; margin-right: 20%; }
.RWcolumn3 { font-size: 200%; text-align: center; width: 50%; display: inline; float: left; }
.RWrow4 { text-align: center; margin-left: 20%; margin-right: 20%; margin-top: 10%; }
.RWcolumn4 { font-size: 200%; text-align: center; width: 50%; display: inline; float: left; }
#buttons { text-decoration: none; padding: 2%; background-color: #fcf5e7; color: black; text-align: center; color: #334E5A;  }
.myButton { margin: 2%; border-radius: 50px; background-color: white; display: inline-block; color: #334E5A; padding: 22px 32px; text-decoration: none;
	/* border: 2px solid #bdc4b8; */
	-webkit-box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
			box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
}
.myButton:hover { background-color: #bdc4b8; }

.despara h1 { padding-top: 10%; margin-bottom: 0%; }

.despara p { width: 50%; text-align: justify; }

.desdescription { width: 100%; height: 30%; }

.SAdescription { background-color: #fcf5e7; }

.SA { margin-top: 5%; margin-left: 10%; margin-right: 10%; }

#desbuttons { float: left; text-align: center; color: #334E5A; }

.mydesButton { width: 150%; border-radius: 50px; background-color: #edd6b7; display: inline-block; color: #334E5A; font-size: 20px; padding: 10% 2%; text-decoration: none; }

	.mydesbutton:hover { box-shadow: 1px 1px 5px #000000; }

.RWimage img { padding-left: 5%; margin-top: 5%; border-radius: 50%; float: left; display: inline; }
.rwpara { padding-left: 5%; margin-left: 50%; }

	.RWpara h1 { padding-top: 10%; margin-bottom: 0%; }

	.RWpara p { width: 100%; text-align: justify; }

.RW { margin-bottom: 5%; margin-top: 2%; margin-left: 10%; margin-right: 10%; }

#RWbuttons { float: left; text-align: center; color: #334E5A; }

.myRWButton { width: 150%; border-radius: 50px; background-color: #edd6b7; display: inline-block; color: #334E5A; font-size: 20px; padding: 10% 2%; text-decoration: none; }

	.myRWbutton:hover { box-shadow: 1px 1px 5px #000000; }

.footer { width: 100%; }



#information { background-color: #bdc4b8; padding: 2%; margin-bottom: -2%; color: black; line-height: 150%; text-align: center; color: #334E5A; text-align: center; font-size: 150%;  }

.fblogo { padding: 5px; display: inline-block; }

#icons { padding-top: 1%; padding-bottom: 2%; width: 100%; background-color: #bdc4b8; text-align: center; }

.footer hr { display: block; border-width: thin; color: #243f14; }


.video { margin-bottom: 5%; margin-left: 20%; width: 60%; height: 60%; }

.source { text-align: center; }

/* Slideshow container */
.slideshow-container { max-width: 1000px; position: relative; margin: auto; }

/* Next & previous buttons */
.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }

/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }

/* Caption text */
.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }

/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }

/* The dots/bullets/indicators */
.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }

.active1, .dot:hover { background-color: #717171; }

/* Fading animation */
.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; }

@-webkit-keyframes fade {
	from { opacity: .4 }
	to { opacity: 1 }
}

@keyframes fade {
	from { opacity: .4 }
	to { opacity: 1 }
}

a { color: #334E5A; text-decoration: none; }

.footer a:hover { color: black; }

.email img { margin-right: 30px; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.email:hover img { margin-right: 0; }

/* === Tables ============================================================================= */
table { border-collapse: collapse; width: 100%; }
table tr.mark { background: #f2f2f2; }
table thead { text-align: left; }
table thead th { padding: 8px; }
table tr td { padding: 8px; }

table ul { line-height: 1.8em; }

table h2 { margin-top: 0; margin-bottom: 8px; text-transform: uppercase; }


@media screen and (max-width: 768px) {
	table ul { padding-left: 16px; }
}

/* === Mailchimp embedded form ============================================================================= */
#mc_embed_signup{
	max-width: 600px;
	background:#fff;
	clear:left;
	margin: auto;
}
#mc_embed_signup .button {
	background-color: #bdc4b8;
	margin: 2%;
    border-radius: 50px;
    background-color: white;
    display: inline-block;
    color: #334E5A;
    padding: 22px 32px;
    text-decoration: none;
    -webkit-box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);

	height: auto;
	font-size: inherit;
	line-height: initial;
}
#mc_embed_signup .button:hover { background: #bdc4b8; }

@media screen and (max-width: 768px) {
	#mc_embed_signup .size1of2 { width: 100%; margin-left: 0; margin-right: 0; }
	#mc_embed_signup .mc-field-group { width: 100%; }
	#mc_embed_signup .mc-field-group select { width: 100%; }
}

input + label { padding-left: 10px; }