* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

@font-face {
  font-family: 'Acumin-Pro';
  src: url('../assets/Acumin-Pro.ttf');
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  color: #666666;
  background-color: #ececec;
}

.wrapper {
    max-width: 2400px;
    margin: 0 auto;
}

.sticky-body {
  overflow: hidden;
}

p {
  font-size: 20px;
  margin: 0 auto;
}

@media (max-width: 576px) {
  p {
    font-size: 16px;
  }
}

/*	1	nav*/
nav.navig {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 4rem;
  background-color: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 26%);
}

nav .logo {
  line-height: 4rem;
  font-size: 30px;
  height: 100%;
  text-decoration: none;
  text-transform: lowercase;
  padding: 0;
  padding-left: 6vw;
  color: black;
  font-family: 'Lato', sans-serif;
}

ul.lista_menu {
  margin: 0;
  margin-right: 20vw;
}

ul.lista_menu a {
  text-decoration: none;
  padding: 0.5rem 12px;
  transition: 0.5s;
  color: #292929;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.hamburger {
  display: none;
}

ul.lista_menu a:hover,
.active-page {
  box-shadow: 0 0.5rem 0.5rem -0.4rem #413e3d;
  background-color: #f3f3f3;
}

@media (max-width: 1118px) {
  .hamburger {
    display: block;
    position: absolute;
    top: 2rem;
    right: 2rem;
    transform: translateY(-50%);
    z-index: 500;
  }
  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
    background-color: rgb(0, 0, 0);
    z-index: 500;
  }

  ul.lista_menu {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    left: -100%;
    top: 0;
    text-align: center;
    line-height: normal;
    padding: 70px 0;
    transition: 0.3s;
    z-index: 100;
    align-items: center;
  }

  .lista_menu.active {
    left: 0;
  }

  ul.lista_menu a {
    font-size: 1.25rem;
    font-weight: 700;
    padding: 1rem 18px;
  }
  ul.lista_menu a:hover,
  .active-page {
    box-shadow: 0 0 0 0 #ffffff;
    background-color: #ffffff;
    color: #4a7a2a;
  }
}

@media (min-width: 992px) and (max-width: 1100px) and (orientation: portrait) {
  nav .logo {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  nav .logo {
    font-size: 23px;
  }
}

@media (max-width: 576px) {
  nav .logo {
    font-size: 20px;
  }
}

/* 2 header */

header {
  width: 100%;
  height: 100vh;
  background-image: url(../zdjecia/5kolumbia/z.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* arrow down */
div.arrow-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
div.arrow-wrapper .arrow-down {
  position: absolute;
  right: 8%;
  bottom: -14vw;
}
div.arrow-down .fas {
  font-size: 40px;
  color: rgb(12, 112, 9);
}
@media (max-width: 900px) {
  div.arrow-wrapper .arrow-down {
    right: 2%;
    bottom: -18vw;
  }
}

@media (max-width: 576px) {
  div.arrow-wrapper .arrow-down {
    right: 2%;
    bottom: -6vw;
  }
  div.arrow-down .fas {
    font-size: 25px;
  }
}

@media (max-width: 530px) {
  div.arrow-wrapper .arrow-down {
    right: 2%;
    bottom: -10vw;
  }
}

@media (max-width: 368px) {
  div.arrow-wrapper .arrow-down {
    right: 2%;
    bottom: -14vw;
  }
}

/* 2.1 arhuacos wrapper & arhuacos1 */
.arhuacos-wrapper,
.choco-wrapper {
  font-family: 'Acumin-Pro', 'Open Sans', sans-serif;
  letter-spacing: 0.3px;
}

.description1 {
  width: 50%;
  margin: 3vw auto 5vw;
}

.arhuacos-wrapper h2 {
  text-align: center;
  font-weight: 900;
  margin-top: 4vw;
}

@media (max-width: 576px) {
  .arhuacos-wrapper,
  .choco-wrapper {
    letter-spacing: 0.1px;
  }

  .description1 {
    width: 90%;
  }
  .arhuacos-wrapper h2 {
    width: 100%;
    text-align: center;
    font-weight: 600;
    margin-top: 50px;
    margin-bottom: 45px;
    padding: 0 15px;
    font-size: 17px;
  }
}

/* 2.2 arhuacos2 background attachment */
div.background-attachment {
  height: 35vw;
  background-image: url('../zdjecia/5kolumbia/bAttachment-arhuacos.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
@media (max-width: 576px) {
  div.background-attachment {
    height: 55vw;
    background-position: -450px;
  }
}

/* 2.3 arhuacos3 */
.description3 {
  width: 50%;
  margin: 5vw auto 3vw;
}

.gallery-small-vertical {
  margin: 40px auto 0;
  width: 60%;
  margin-top: 40px;
  text-align: center;
}

.gallery-small-vertical img {
  transition: 1s;
  /*padding: 7px;*/
  margin: 7px;
  width: 12vw;
  box-shadow: 8px 10px 15px 0px rgba(56, 56, 56, 1);
  border-radius: 5px;
}
.gallery-small-vertical img:hover {
  opacity: 0.7;
}

@media (max-width: 576px) {
  .description3 {
    width: 90%;
  }
  .gallery-small-vertical {
    margin: 40px auto 30px;
    width: 90%;
    margin-top: 40px;
    text-align: center;
  }
  .gallery-small-vertical img {
    margin: 3px;
    width: 27vw;
  }
}

/* 2.4 arhuacos4 */
.description4 {
  width: 50%;
  margin: 4vw auto;
}
@media (max-width: 576px) {
  .description4 {
    width: 90%;
  }
}

/* 2.5 arhuacos5 */
.description5 {
  width: 95%;
  margin: 5vw auto;
}
.small-pictures-container {
  margin-top: 7vw;
  margin-bottom: 5vw;
  text-align: center;
}
.description5 img {
  width: 23%;
  margin: 0 10px;
  border-radius: 5px;
}
@media (max-width: 1260px) {
  .description5 img {
    width: 46%;
    margin: 5px 3px;
  }
}
@media (max-width: 576px) {
  .description5 img {
    width: 46%;
    margin: 5px 5px;
  }
}

/* 2.6 arhuacos6 */
.description6 {
  width: 100%;
  margin: 5vw auto;
}
.description6-text1,
.description6-text2,
.description6-text3,
.description6-text4 {
  margin: 0 auto 40px;
  width: 50%;
  /*text-align: center;*/
  text-align: left;
}
.description6-text2 {
  margin-top: 40px;
  margin-bottom: 70px;
}
.description6-text3 {
  margin: 6vw auto;
}


.description6-img {
  text-align: center;
  margin-top: 4vw;
}
.description6-img img {
  width: 30%;
  border-radius: 5px;
}

.carousel {
  width: 60%;
  margin: 3vw auto;
}
.carousel-inner {
  border-radius: 5px;
}

@media (max-width: 576px) {
  .description6-text1,
  .description6-text2,
  .description6-text3,
  .description6-text4 {
    margin: 30px auto 40px;
    width: 90%;
  }
  .description6-img img {
    width: 90%;
  }

  .carousel {
    width: 100vw;
  }
  .carousel-inner {
    border-radius: 0px;
  }
}

/*  four pictures hover*/
.container-hover {
  width: 60vw;
  display: flex;
  height: 80vh;
  margin: 10vh auto;
}

.photo-box {
  position: relative;
  flex-grow: 1;
  background-size: cover;
  background-position: center;
  transition: flex-grow 0.3s ease-in-out;
}

.photo-box::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
}

.photo-box:hover {
  flex-grow: 3;
}

.photo-box:hover::before {
  background-color: rgba(0, 0, 0, 0);
}

.box-one {
  /* background-image: url('zdjecia/5kolumbia/d.jpg'); */
  background-image: url('../zdjecia/5kolumbia/d.jpg');
}

.box-two {
  background-image: url('../zdjecia/5kolumbia/a.jpg');
  background-position: left;
}

.box-three {
  background-image: url('../zdjecia/5kolumbia/c.jpg');
}

.box-four {
  background-image: url('../zdjecia/5kolumbia/b.jpg');
  /* background-position: left; */
}
@media (max-width: 1400px) {
  .photo-box:hover {
    flex-grow: 2.5;
  }
}

@media (max-width: 576px) {
  .container-hover {
    width: 98%;
    height: 40vh;
    margin: 6vh auto;
  }

  .box-two {
    background-position: left;
  }

  .photo-box:hover {
    flex-grow: 4;
  }
}

/* 2.7 arhuacos2 background attachment2 */
div.background-attachment2 {
  height: 35vw;
  background-image: url('../zdjecia/5kolumbia/bAttachment-arhuacos2.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: bottom;
  margin-top: 130px;
}
@media (max-width: 576px) {
  div.background-attachment2 {
    margin-top: 30px;
    margin-bottom: 40px;
    height: 55vw;
    background-position: -500px;
  }
}
/* 2.8 arhuacos main gallery */

.gallery-main-arhuacos {
  width: 80%;
  margin: 120px auto 50px auto;
  text-align: center;
}

.gallery-main-arhuacos img {
  transition: 1s;
  /*padding: 7px;*/
  margin: 7px;
  width: 13vw;
  border-radius: 5px;
  box-shadow: 8px 10px 15px 0px rgba(56, 56, 56, 1);
}

.gallery-main-arhuacos img:hover {
  filter: grayscale(100%);
  transform: scale(1.1);
}
div.btn-more-photos {
  text-align: center;
  margin-bottom: 20px;
}
div.btn-more-photos h2 {
  margin-top: 120px;
  font-size: 24px;
}

div.btn-more-photos a {
  margin-top: 30px;
  font-size: 20px;
  letter-spacing: 1px;
  background-color: #28a745;
}

@media (max-width: 768px) {
  .gallery-main-arhuacos {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 0px;
  }

  .gallery-main-arhuacos img {
    width: 30vw;
    /*padding: 3px;*/
    margin: 3px;
    box-shadow: 2px 3px 3px 0px rgba(56, 56, 56, 1);
  }
  div.btn-more-photos h2 {
    margin-top: 60px;
    font-size: 16px;
  }
  div.btn-more-photos a {
    margin-top: 10px;
    font-size: 15px;
  }
}

/* 3.1 Choco - section rainy header */
section.choco-wrapper {
  margin-top: 200px;
  /* background-image: linear-gradient(to bottom, #ffffff, #eaeefd, #ccdffc, #a4d3f8, #6ec8f0,
    #a4d3f8, #ccdffc, #eaeefd, #ffffff); */
}
section.choco-wrapper h2 {
  text-align: center;
  font-weight: 900;
  margin-top: 5vw;
}
section.rainy-header {
  height: 100vh;
  background-image: url('../zdjecia/5kolumbia/rainy-header.jpg');
  background-position: center;
  background-size: cover;
  margin-bottom: 60px;
  /* background-attachment: fixed; */
  animation: backgroundColor 15s linear infinite;
}

/*section.rainy-header::before {*/
/*  content: '';*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background-image: url('../zdjecia/5kolumbia/rain.png');*/
/*  filter: opacity(0.4);*/
/*  animation: rainAnimation 0.57s linear infinite;*/
/*}*/

/*@keyframes rainAnimation {*/
/*  0% {*/
/*    background-position: 0% 0%;*/
/*  }*/

/*  0% {*/
/*    background-position: 15% 100%;*/
/*  }*/
/*}*/

@keyframes backgroundColor {
  0% {
    filter: brightness(0.7);
  }

  50% {
    filter: brightness(1);
  }

  100% {
    filter: brightness(0.7);
  }
}

@media (max-width: 576px) {
  section.choco-wrapper {
    margin-top: 80px;
  }
  section.choco-wrapper h2 {
    width: 100%;
    text-align: center;
    font-weight: 600;
    margin-top: 30px;

    margin-bottom: 10px;
    font-size: 17px;
  }

  section.rainy-header {
    background-position: -200px;
  }
}

/* 3.1 Choco background-atta. */
div.background-attachment-choco {
  height: 35vw;
  background-image: url('../zdjecia/5kolumbia/bAttachment-choco.jpg');
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p.text {
  margin-top: 30px;
  margin-bottom: 30px;
}

@media (max-width: 576px) {
  div.background-attachment-choco {
    height: 60vw;
    margin: 30px auto;
  }
  section.choco-wrapper .h2-choco {
    margin-top: 80px;
  }
}

/* 4.5 YT iframe */
div.yt-video-wrapper {
  margin-top: 40px;
  padding: 20px 0;
}
div.yt-container {
  width: 60%;
  margin: 40px auto;
}

div.video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* arrow up wrapper */
div.arrow-wrapper-up {
  position: relative;
}

div.arrow-up {
  position: absolute;
  right: 8%;
  top: 250px;
}
div.arrow-up .fas {
  font-size: 40px;
  color: rgb(12, 112, 9);
}

@media (max-width: 576px) {
  div.yt-video-wrapper {
    margin-top: 10px;
  }
  div.yt-container {
    width: 100%;
    margin: 0 auto;
  }

  div.arrow-up {
    right: 6%;
    top: 110px;
  }

  div.arrow-up .fas {
    font-size: 25px;
  }
}

/*				5 footer   */

footer {
  margin: 8vw auto 1vw;
  width: 80vw;
  height: 8vw;
  /*background-color: white;*/
  text-align: center;
}

div.foot {
  width: 80vw;
  padding: 2% 2% 4% 2%;
}

div.foot a {
  color: black;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 13px;
  border-radius: 4px;
  opacity: 0.8;
}

div.foot a:hover {
  color: rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}

div.icons img {
  display: inline-block;
  margin: 60px 10px 50px 10px;
  padding: 0px;
  transition: 0.5s;
  width: 3vw;
}
div.icons img:hover {
  transform: rotateY(180deg);
}

footer .year p {
  padding: 3vw;
  font-weight: bold;
  font-size: 1rem;
  color: #292929;
}
@media (max-width: 1100px) {
  div.icons img {
    width: 4vw;
  }
}
@media (max-width: 824px) {
  footer {
    margin-top: 10vw;
  }

  div.foot a {
    font-size: 16px;
    padding: 5px 10px;
  }

  div.icons img {
    margin-top: 40px;
    margin-bottom: 60px;
    width: 5vw;
  }
}
@media (max-width: 630px) {
  div.icons img {
    width: 7vw;
  }
}
@media (max-width: 359px) {
  div.foot a {
    font-size: 14px;
    padding: 5px 10px;
  }
}