@charset "UTF-8";
.huatulco_header {
    background-image: url(../img/huatulco/header.jpg);
    position: relative;
    background-repeat: no-repeat;
    background-position: center top;
    padding-top: 67%;
    background-size: cover;
    width: 100%;
}
.section_content {
    overflow-x: hidden;
    overflow-y: hidden;
}
.header_white {
    position: absolute;
    bottom: -5px;
    width: 100%;
    padding-top: 10%;
    background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 82.99%);
    background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 82.99%);
    background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 82.99%);
    background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 82.99%);
}
.hux_mex {
    position: relative;
}
.hux_pic {
    width: 100%;
    height: auto;
    z-index: 2000;
    position: absolute;
    bottom: -19%;
}
#fish_yelllow {
    position: absolute;
    z-index: 55;
    bottom: 5%;
    left: 47%;
    width: 22%;
    height: auto;
}
#fish_2 {
    width: 32%;
    height: auto;
    position: absolute;
    bottom: -39%;
    left: 14%;
    z-index: 9999;
}
.intro_hux {
    padding-top: 27%;
}
.tri_box {
    position: relative;
}
.tri_img {
    width: 30%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
}
.intro_hux_content {
    padding-left: 5%;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 37%;
}
.hux_content_info {
    padding-left: 5%;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 10%;
    padding-bottom: 10%;
}
.text_intro_hux {
    margin-top: 21px;
}
.mex_map {
    width: 60%;
    height: auto;
    position: absolute;
    right: 4%;
    top: 6.1%;
}
.oax_map {
    width: 90%;
    height: auto;
}
.oaxaca_map {
    text-align: center;
    padding-top: 8%;
    padding-bottom: 8%;
}
.intro_pic_content {
    width: 100%;
    height: auto;
    margin-top: 6.5%;
}
.earth_2018 {
    position: absolute;
    top: -41px;
    right: 15%;
}
.seahorse {
    position: absolute;
    right: 33%;
    width: 8%;
    height: auto;
    bottom: -17%;
    z-index: 3000;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@keyframes jackInTheBox2 {
  from {
    opacity: 1;
    -webkit-transform: scale(1) rotate(3deg);
    transform: scale(1) rotate(3deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox2 {
  -webkit-animation-name: jackInTheBox2;
  animation-name: jackInTheBox2;
  -webkit-animation-duration: 14s;
  animation-duration: 14s;
}
.transport_box {
}
.transport_text {
    float: left;
    padding-top: 17%;
}

.tours_text {
    float: left;
    padding-top: 8%;
}

.transport_pic {
    float: right;
    width: 40%;
}
.transport_box {
    padding-top: 19%;
}
.button_hux {
    padding-top: 20px;
}
.footer_page {
    background-color: #FFFFFF;
    margin-top: 60px;
}