* {
   /*outline: 1px solid red !important;*/
}

/* Block elements will have padding and border included in the element's total width and height */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
html {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Make HTML 5 elements display block-level for consistent styling */
header, section, footer, aside, nav, article, figure, figcaption {
    display: block;
}
/* Prevent images and other objects from overflowing parent */
img, embed, object, video {
    max-width: 100%;
}
/* Increase font size and give soft black color */
body {
  color: #454545;
  background-color: #fff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  text-align: center;
  margin: 0;
  padding: 0;
}
/* ---------- GLOBAL CLASSES ---------- */
.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

.anchor{
  display: block;
  height: 100px; /*same height as header*/
  margin-top: -100px; /*same height as header*/
  visibility: hidden;
}
.page {
  position: relative;
  top: 100px;
}
.contain-1200 {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.contain-960 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: inherit;
}
hr {
  margin: 40px auto;
}
.bold {
  font-weight: bold;
}
.thin {
  font-weight: normal;
}
.serif {
  font-family:  'Quattrocento',serif;
}
.rounded {
  border-radius: .375rem;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
.button {

}
.card {
  box-shadow: 5px 5px 25px 0px rgba(46,61,73,0.2);
  border-radius: .375rem;
  overflow: hidden;
  -webkit-transition: box-shadow 2s; /* Safari */
  transition: box-shadow .3s;
}
.card:hover {
  box-shadow:  1px 1px 7px 0 rgba(46,61,73,0.2);
}
.shadow {
  box-shadow: 5px 5px 25px 0px rgba(46,61,73,0.2);
  /* overflow: hidden; */
  -webkit-transition: box-shadow 2s; /* Safari */
  transition: box-shadow .3s;
}
.h3 {
  font-size: 2.75rem;
  text-transform: lowercase;
}
.h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
/*li {
  list-style: circle;
}*/
/* ---- PARALLAX IMAGES  ---- */
.parallax-1 {
  background-image: url("https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_2000/v1525760049/maputo-a-pe/Top_Ten2.jpg");
  height: 50vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax-2 {
  background-image: url("https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_2000/v1512375295/maputo-a-pe/pancho_2.jpg");
  height: 50vh;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax-3 {
  background-image: url("https://res.cloudinary.com/dtqevfsxh/image/upload/c_crop,g_south,h_3264,x_0,y_300/v1515781069/maputo-a-pe/group_1.jpg");
  height: 60vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* ---------- COLORS ---------- */
.blue {
  color: #34d4fe;
}
.blue-background {
  background-color: #34d4fe;
}
.grey {
  color: #3e3839;
}
.grey-background {
  background-color: #3e3839;
}
.slate {
  color: #424242;
}
.slate-background {
  background-color: #424242;
}
.orange {
  color: #f08a1f;
}
.orange-background {
  background-color: #f08a1f;
}
.yellow {
  color: #facf14;
}
.yellow-background {
  background-color: #facf14;
}
.brown {
  color: #dfa04a;
}
.brown-backgound {
  background-color: #dfa04a;
}
.white {
  color: #fff;
}
.white-background {
  background-color: #fff;
}
.black {
  color: #000;
}
.black-background {
  background-color: #000;
}
.fb-purple {
  color: #344c97;
}
/* ---------- GENERAL STYLES ---------- */
header {
  /*border: 4px yellow solid;*/
  width: 100%;
  height: 100px;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  overflow-y: visible;
}
.top-bar {
  /*border: 3px blue solid;*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  height: inherit;
}
.header-logo {
  /*border: 4px green solid;*/
  height: 85%;
  margin-left: 20px;
  margin-right: 20px;
  flex-shrink: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header-logo img {
  /*border: 2px orange solid;*/
  max-height: 100%;
  min-width: 130px;
  max-width: 100%;
}
.header-nav {
  /*border: 4px red solid;*/
  font-size: 1.2rem;
  display: flex;
  align-items: flex-end;
  width: 70%;
  margin-right: 30px;
  justify-content: space-around;
  overflow-y: visible;
}
.header-nav a {
  /*border: 2px black solid;*/
}
.nav-fb {
  max-width: 35px;
}






/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    height: 0;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: visible;
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
/* @media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
} */



/* ---HAMBURGER MENU---- */
#nav-icon3 {
  visibility: hidden;
  /*border: 1px blue solid;*/
  position: absolute;
  right: 10%;
  width: 50px;
  height: 35px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 6px;
  width: 100%;
  background: #000;
  border-radius: 9px;
}

#nav-icon3 span:nth-child(1) {
  top: 2px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 12px;
}

#nav-icon3 span:nth-child(4) {
  top: 22px;
}

#nav-icon3.open span:nth-child(1) {
  top: 14px;
  width: 0%;
  left: 50%;
}



/* ----- HERO CAROUSEL CLASSES ----- */
.hero {
  height: 60vh;
  position:relative;
  top: -10px;
  width: 100vw;
  /*border: 1px red solid;*/
}
.carousel-item .h5 {
  font-size: 3.125rem;
  font-style: italic;
  font-weight: 500;
}

.carousel-wrapper{
  height: 100%;
  position:relative;
  width: 100%;
  margin:0;
  /*border: 1px green solid;*/

}
.carousel-item{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:0px 75px;
  text-align: center;
  opacity:0;
  transition: all 0.5s ease-in-out;
}
.arrow{
  /*border: 1px blue solid;*/
  position:absolute;
  top:0;
  display:block;
  width:10%;
  height:100%;
  -webkit-tap-highlight-color: #4ac0e7;
  background: url("http://dancort.es/assets/img/css-carousel/carousel-arrow-light.png") 50% 50% / 30px no-repeat;
}

.arrow-prev{
  left:0;
}

.arrow-next{
    right:0;
    -webkit-transform: rotate(180deg);
     transform: rotate(180deg);
  }
.light{
  color:white;
}
/*Select every element*/
[id^="item"] {
    display: none;
  }
.item-1 {
    z-index: 2;
    opacity: 1;
  background:url('https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_2000/v1512376036/maputo-a-pe/train_5.jpg');
  background-size: cover;
  background-position: center;
  }
.item-2{
  background:url('https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_2000/v1512377303/maputo-a-pe/market_5.jpg');
   background-size:cover;
   background-position: bottom;

}
.item-3{
  background:url('https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_2000/v1512377628/maputo-a-pe/tin_2.jpg');
  background-size: cover;
  background-position: center;
}
.item-4{
  background:url('https://res.cloudinary.com/dtqevfsxh/image/upload/c_crop,g_south,h_3264,x_0,y_750/v1515781069/maputo-a-pe/group_1.jpg');
  background-size: cover;
  background-position: center;
}

/* Reset carousel (by turning all cards except the first one to transparent) when any link on page is clicked */
*:target ~ .item-1 {
    opacity: 0;
  }
/* When an arrow with this ID as it's href is clicked, change the opacity from transparent to fully opaque and bring it to front with z-index */
#item-1:target ~ .item-1 {
    opacity: 1;
  }
#item-2:target ~ .item-2,
#item-3:target ~ .item-3,
#item-4:target ~ .item-4 {
    z-index: 3;
    opacity: 1;
  }

  .about p {
    font-size: 1.25rem;
    line-height: 26px;
    font-weight: 400;
    margin: 2rem auto;
    max-width: 60%;
  }

  .video-contain {
    width: 60%;
    margin: 0 auto;
  }

  .videoWrapper {
  	position: relative;
  	padding-bottom: 56.25%; /* 16:9 */
  	padding-top: 25px;
    /* width: 80%; */
  	height: 0;
  }
  .videoWrapper iframe {
  	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  }

/* ------- TOURS  ------- */
.tour-flex {
  /*border: 1px blue solid;*/
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 1rem;
}
.tour-item {
  /* border: 1px grey solid; */
  width: 32%;
  margin-bottom: 2rem;
  /* border-radius: 20px; */
  overflow: hidden;
  position: relative;
  /* padding-bottom: 1rem; */
}
.tour-pic {
  /*border: 1px orange solid;*/
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.tour-pic img {
  /*border: 1px red solid;*/
  width: 100%;
}
.tour-detail {
  padding: 1rem 1.5rem;
  /* padding-bottom: 50px; */
  /* border: 1px red solid; */
  margin-bottom: 3rem;
}

.learn-more {
  border: 2px solid #454545;
  padding: 5px 45px;
  font-weight: bold;
  /* border-radius: 20px; */

}


.tour-detail .h4 {
  margin-top: 10px;
}

.full-detail-box {
  /* border: 1px blue solid; */
  width: 100%;
  /* height: 60px; */
  padding-top: 20px;
  padding-bottom: 20px;
  position: absolute;
  bottom: 10px;
}




.thumbnail {
  width: 20%;
}
.full{
    width:100%;
    height:100%;
    text-align: center;
    padding: 0px;
    padding-top: 150px;

    transition: background-color .25s ease-in;
    opacity: 1;
    width:0%;
    height:0%;
    position:fixed;
    background-color: rgba(0, 0, 0, 0);
    top:0;
    left:0;
}
.full img{
    opacity: 0;
    height:0;
    width:0;
    transition: opacity .25s ease-in;
}
.full .tour-description{
    opacity: 0;
    height:0;
    width:0;
    transition: opacity .25s ease-in;
    background-color: #fff;
}
.thumbnail:focus{
    outline:none;
}
.thumbnail:focus + .full{
    height:100%;
    width:100%;
    background-color: rgba(0,0,0,.8);

}
.thumbnail:focus + .full a img {
    opacity:1;
    padding: 30px;
    height:auto;
    width:auto;
    max-width:90%;
    max-height: 70%;
}
.thumbnail:focus + .full .tour-description {
    opacity: 1;
    padding: 30px;
    width: inherit;
}

/* ------ OUR GUIDES  ------ */

.guide-intro {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  max-width: 750px;
}

.guide-flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  /*border: 1px green solid;*/
  margin-bottom: 2rem;
}
.guide-item {
  min-height: 6rem;
  width: calc(100% / 5);
  /*border: 1px blue solid;*/
  padding: 1rem;
  margin: 0 1rem;
}
.guide-pic {
  border-radius: 50%;
  /*border: 6px black solid;*/
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.guide-bio .h5 {
  font-size: 1rem;
  font-weight: bold;
  margin: 1rem;
  text-transform: uppercase;
}
.guide-bio p {
  font-size: 1rem;
  font-style: italic;
}


/* ------ BOOKING  ------ */
.booking {
  display: flex;
  flex-flow: column nowrap;
  align-items: baseline;
}
.rates {
  max-width: 50%;
  margin: 0 auto;
  font-size: 1.25rem;
}
.booking > section {
  width: 100%;
}

.contact-container {
	width:100%;
	margin:0 auto;
	position:relative;
}




#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#dddddd;
	padding:25px;
	margin: 30px 0 50px 0;
  display: flex;
  flex-flow: row wrap;
  /*border: 1px blue solid;*/
  border-radius: 4px;
  justify-content: space-between;
}
#contact .h4 {
  flex-basis: 100%;
  font-weight: bold;
  margin-top: auto;
}
.contact-flex-item {
  width: 49%;
  margin: 1rem auto;
  /*border: 3px yellow solid;*/
}

.contact-email {
  color: blue;
}

fieldset {
	border: medium none;
	margin: 0 0 10px;
	min-width: 40%;
	padding: 0;
	width: 100%;
}
fieldset:last-child {
  margin: 0 auto;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width: 100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:144px;
	max-width:100%;
  resize:none;
  /*border: 4px red solid;*/

}

#contact button[type="submit"] {
	cursor:pointer;
	width:50%;
	border:none;
	background: #30cafe;
	color:#FFF;
	margin: 0 0 25px;
	padding:10px;
	font-size:15px;
  /*border: 3px yellow solid;*/

}

#contact button[type="submit"]:hover {
	background: #30cafe;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}




/* ------ TESTIMONIALS  ------ */

.testimonials {
  margin: 0 10%;
}

.client-quote {
  font-size: 1.25rem;
  font-style: italic;
  font-weight: bold;
  padding-bottom: 1rem;

}
.client {
  font-size: 1rem;
  padding-bottom: 2.5rem;
}

.press-block {
  /* background-color: #; */
  padding: 3rem 0;
}
.press-container {
  margin: 0 50px 0 50px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.press-div {
  margin: 10px;
  /* max-width: 15%; */
  /*border: 1px blue solid;*/
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.press-div img {
  max-height: 50px;
}



  /* ------ FOOTER  ------ */

footer {
    min-height: 8rem;
    width: 100%;
}
.footer-flex {
  /*border: 1px red solid;*/
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem;
  width: 100%;
}
.footer-flex-item {
  width: 50%;
  font-size: .9rem;
  line-height: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 3rem;
  /*border: 1px orange solid;*/
}
.footer-icon {
  margin: 1rem;
  max-width: 55px;
  border-radius: 10px;
}

.design-by {
  font-size: .775rem;
  position: relative;
  }






/* ---------- TABLET  ---------- */
@media screen and (min-width: 601px) and (max-width: 900px) {

  .header-nav a {
    font-size: .85rem;
    margin-right: 1.75rem;
  }

  .nav-fb {
    margin-right: 1rem;
    max-width: 25px;
    display: block;
  }

  .hero {
    height: 50vh;
  }

  .video-contain {
    width: 80%;
  }


  .tour-item {
    min-height: 300px;
    width: 48%;
    /*border: 4px green solid;*/
  }


  .guide-item {
    min-height: 6rem;
    width: calc(100% / 4);
  }


  .design-by {
    width: 40%;
  }




}
/* --- NAV FONT 800-900px  --- */
@media screen and (min-width: 800px) and (max-width: 900px) {

  .header-nav a {
    font-size: 1rem;
    margin-right: 20px;
  }



}
/* ---------- MOBILE  ---------- */
@media screen and (max-width: 600px) {

  .h3 {
    font-size: 2rem;
  }

 /*hides top nav and replaces with hamburger icon on mobile*/
  .header-nav {
    visibility: hidden;
  }
  #nav-icon3 {
    visibility: visible;
  }


  .hero {
    height: 50vh;
  }


  .video-contain {
    width: 100%;
  }


  .tour-item {
    min-height: 300px;
    width: 95%;
    /*border: 4px green solid;*/
  }

  .guide-item {
    min-height: 6rem;
    width: calc(100% / 3);
  }

  .contact-flex-item {
    width: 100%;
  }

  .footer-flex-item {
    width: 100%;
    text-align: inherit;
  }
}


/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  /* * {
     outline: 1px solid red !important;
  } */

  .parallax-1 {
    background-image: url("https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_1000/v1525760049/maputo-a-pe/Top_Ten2.jpg");
    height: 50vh;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .parallax-2 {
    background-image: url("https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_1000/v1512375295/maputo-a-pe/pancho_2.jpg");
    height: 50vh;
    background-attachment: scroll;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .parallax-3 {
    background-image: url("https://res.cloudinary.com/dtqevfsxh/image/upload/c_scale,w_1000/v1515781069/maputo-a-pe/group_1.jpg");
    height: 60vh;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .parallax-1 {
      background-image: url("");
      height: 0vh;
      /* background-attachment: fixed; */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .parallax-2 {
      background-image: url("");
      height: 0vh;
      /* background-attachment: fixed; */
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .parallax-3 {
      background-image: url("");
      height: 0vh;
      /* background-attachment: fixed; */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
}

/* ----------- iPhone X ----------- */
/* Portrait and Landscape */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
    .parallax-1 {
      background-image: url("");
      height: 0vh;
      /* background-attachment: fixed; */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .parallax-2 {
      background-image: url("");
      height: 0vh;
      /* background-attachment: fixed; */
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .parallax-3 {
      background-image: url("");
      height: 0vh;
      /* background-attachment: fixed; */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
}