html{
  /*background: url(../_images/login.jpg)no-repeat;*/
  background-size: cover;
  height: 100%;
}
html:before{
  content: '';
  width: 100vw;
  height: 100vh;
  -webkit-filter: blur(2px);
  filter: blur(2px);
}
@font-face {
  font-family: AshleyBold;
  src: url('fonts/Ashley-Bold.otf');
}
@font-face {
  font-family: AshleySemiBold;
  src: url('fonts/Ashley-SemiBoldItalic.otf');
}
@font-face {
  font-family: Ashley;
  src: url('fonts/Ashley-Regular.otf');
}
@font-face {
  font-family: AshleyLight;
  src: url('fonts/Ashley-Thin.otf');
}
/*=============== ANIMATION BUBBLE FISH ================*/
/* Franklin's Container */
.playamia .fish, .fish2,.fish3 {
  width: 150px;
  height: 100px;
  animation: swim 4s infinite; 
}
/* Franklin */
.playamia .fish-body {
position: relative;
    margin-top: 30px;
    margin-left: 32px;
    background-color: orange;
    border-radius: 50%;
    width: 75px;
    height: 50px;
}

.playamia .eye {
    position: absolute;
    margin-left: 50px;
    margin-top: 13px;
    z-index: 1;
    background-color: white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
}

.playamia .pupil {
position: absolute;
    z-index: 2;
    margin-left: 5px;
    margin-top: 5px;
    background-color: black;
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.playamia .fin {
      margin-top: -50px;
    background-color: orange;
    border-radius: 50%;
    transform: rotate(40deg);
    width: 40px;
    height: 25px;
}

.playamia .fin-bottom {
    margin-top: -10px;
    transform: rotate(-40deg);
}

/* FISH 2*/
.playamia .fish2{transform: rotate(180deg);right: 0;position: absolute;bottom: 0;animation: swimUP 3s infinite;}
.playamia .fish2 .eye{margin-top: 24px;}
.playamia .fish2 .fish-body,.playamia .fish2 .fin,.playamia .fish2 .fin-bottom{background: #ee4699;}

/* FISH 3*/
.playamia .fish3{transform: rotate(180deg);right: 0;position: absolute;top: 0;animation: swimziczac 6s infinite;}
.playamia .fish3 .eye{margin-top: 24px;}
.playamia .fish3 .fish-body,.playamia .fish3 .fin,.playamia .fish3 .fin-bottom{background: #154ea2;}
/* Bubbles */
.playamia .bubbles {
    position: absolute;
    bottom: 0;
    z-index: 5;
    margin-right: 50px;
    background-color: rgba(0,120,215,0.3);
    border-radius: 50%;
    opacity: .50;
    width: 40px;
    height: 40px;
    animation: up 4s infinite;
    box-shadow: inset 0 0 12px rgb(255 255 255 / 80%);
}

.playamia .bubble-2 {
  left: 350px;
  animation: up 2s infinite;
}

.playamia .bubble-3 {
  left: 750px;
  opacity: .30;
  animation: up 5s infinite;
}

.playamia .bubble-4 {
  left: 1150px;
  animation: up 6s infinite;
}

.playamia .bubble-5 {
  left: 50px;
  animation: up 5s infinite;
}

.playamia .bubble-6 {
  left: 300px;
  opacity: .30;
  animation: up 3s infinite;
}

.playamia .bubble-7 {
  left: 670px;
  animation: up 4s infinite;
}

.playamia .bubble-8 {
  left: 1050px;
  opacity: .30;
  animation: up 3s infinite;
}

/* Swim Animation */
@keyframes swim {
  0% {
    transform: translateY(-100px) translateX(0) rotate(30deg);
  }
  25% { 
    transform: translateY(50px) translateX(20vw) rotate(25deg);
  }
  50% {
    transform: translateY(100px) translateX(50vw) rotate(-10deg);
  }
  75% {
    transform: translateY(50px) translateX(75vw) rotate(-20deg);
  }
  100% {
    transform: translateY(-170px) translateX(100vw) rotate(-40deg);
  }
}

@keyframes swimUP {
  0% {
    transform: translateY(-100px) translateX(0) rotate(160deg);
  }
  25% { 
    transform: translateY(-50px) translateX(-25vw) rotate(175deg);
  }
  50% {
    transform: translateY(-100px) translateX(-55vw) rotate(180deg);
  }
  75% {
    transform: translateY(-50px) translateX(-80vw) rotate(165deg);
  }
  100% {
    transform: translateY(-170px) translateX(-100vw) rotate(200deg);
  }
}


@keyframes swimziczac {
  0% {
    transform: translateY(-100px) translateX(0px) rotate(160deg);
  }
  25% { 
    transform: translateY(50px) translateX(-22vw) rotate(180deg);
  }
  50% {
    transform: translateY(100px) translateX(-53vw) rotate(175deg);
  }
  75% {
    transform: translateY(50px) translateX(-85vw) rotate(170deg);
  }
  100% {
    transform: translateY(200px) translateX(-100vw) rotate(160deg);
  }
}

/* Bubbles Animation */
@keyframes up {
  100% {
    transform: translateY(-800px);
  }
}


/* ===================== */
.login-blur{overflow: hidden;background: #F7F7F7;}
.bg-login{
  background: dimgrey;
/*  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  width: 42%;
  height: 100vh;
  z-index: 1;
/*  filter: blur(4px);
  -webkit-filter: blur(4px);*/
}
.bg-login:after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 100vh;
  /*background: rgba(0,0,0,0.3);*/

}
.cont-flex{
  width: 100%;
  display: inline-flex;
}
.bg-form{
    display: flex;
    width: 58%;
    align-items: center;
    justify-content: center;
}
.ContForm{
  z-index: 9;
  width: 450px;
    height: auto;
    padding: 25px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    position: absolute;
}
.ContForm h1{margin-top: 0;}
small{margin-bottom: 10px;display: block;}
.item .alert{float: none;}
.bg-login{display: inline-flex;
    justify-content: center;
    align-items: center;}
.cont-logo{position: fixed;z-index: 1;}
/* ==== PLAYA MIA ====== */
.playamia{background: #f3faff;transition: 0.4s;}
.playamia .bg-login{background: #00d2ff;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #3a7bd5, #00d2ff);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #3a7bd5, #00d2ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */;background-size: cover;background-repeat: no-repeat;background-position: center;}
.playamia .img-pm{display: inline-block;}
.playamia .img-wt{display: none;}
.playamia .img-ct{display: none;}
/*.playamia .bg-login:after{background: rgba(0,120,215,0.3);}*/
.playamia .ContForm{ border: 1px solid rgba(0,120,215,0.3);position: absolute;}
.playamia h1{ font-family: 'AshleyBold'; }
.playamia .btn-login{background-color: #008bc8 !important;border-color: #005479 !important;transition: 0.4s;}
.playamia .btn-login:hover{background-color: #07aff8 !important;}
/*.playamia #view-Ps {color: #0071a3 !important;}*/
/* =================== */
/* ========= WILDTOURS ===========*/
.wildtours{background: #f2fff3;transition: 0.4s;}
.wildtours .img-pm{display: none;}
.wildtours .img-ct{display: none;}
.wildtours .img-wt{display: inline-block;}
.wildtours .bg-login{background: #e52d27;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #b31217, #e52d27);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #b31217, #e52d27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
;background-size: cover;background-repeat: no-repeat;background-position: center;z-index: 1;}
/*.playamia .bg-login:after{background: rgba(0,120,215,0.3);}*/
.wildtours .ContForm{ border: 1px solid rgba(7,83,11,0.3);position: absolute; }
.wildtours h1{ font-family: 'AshleyBold'; }
.wildtours .btn-login{background-color: #f44336 !important;border-color: #d32f2f !important;transition: 0.4s;}
.wildtours .btn-login:hover{background-color: #D32F2F !important;}
.trolley .btn-login{background-color: #7A1817 !important;border-color: #7A1817 !important;transition: 0.4s;}
.trolley .btn-login:hover{background-color: #4C0606 !important;}
.cont-paisaje{
  width: 58%;
    height: 100vh;
    position: fixed;
    top: 0;
}
.wildtours .fondo-selva{
    width: 1000vw;
    height: 80vh;
    display: block;
    background: url(../_images/bg-wild/bg-selva.jpg)repeat-x;
    position: absolute;
    background-size: contain;
    left: 0;

    top: 0;
    animation: selva 10s linear infinite;
  
}
/*.fondo-selva2{
  width: 100%;
    position: absolute;
    left: 100%;
    top: 0;
    animation: selvaT 10s infinite linear reverse;
}*/
.wildtours .fondo-hojas{
    background: url(../_images/bg-wild/bg-hojas.png);
    background-size: contain;
    background-repeat: repeat-x;
    height: 120px;
    width: 300%;
    position: absolute;
    bottom: 20vh;
    animation: selva 7s linear infinite;
}
.wildtours .fondo-cesped{
    background: url(../_images/bg-wild/bg-cesped.jpg);
    background-size: contain;
    background-repeat: repeat-x;
    position: absolute;
    height: 20vh;
    width: 1000vw;
    bottom: 0;
    animation: selva 5s linear infinite;
}

.wildtours .xrail{
    background: url(../_images/bg-wild/xrail.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    height: 205px;
    width: 382px;
    bottom: 5vh;
    right: 40%;
    animation: xrail 10s linear infinite;
}
.wildtours .llanta1{
    background: url(../_images/bg-wild/llanta.png);
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    width: 112px;
    height: 112px;
    bottom: 0px;
    left: -2px;
    animation: llanta 0.8s linear infinite;
}
.wildtours .llanta2{
    background: url(../_images/bg-wild/llanta.png);
    background-size: contain;
    position: absolute;
    background-repeat: no-repeat;
    width: 112px;
    height: 112px;
    bottom: 0px;
    right: 18px;
    animation: llanta 0.8s linear infinite;
}

@keyframes selva{
  
    100% {
        transform: translateX(-3400px);
    }
} 
@keyframes llanta{
  
    100% {
        transform: rotate(360deg);
    }
} 
/*@keyframes xrail{
    0% {
        right: 100%;
    }
    50% {
        right: 40%;
    }
    100% {
        right: 40%;
    }
}*/
/*@keyframes selvaT{
    to{
        left: 0px;
    }
    from{
        left: 100%;
    }
}*/
/*.playamia #view-Ps {color: #0071a3 !important;}*/

/* ========= TROLLEY ==========*/
.trolley .img-ct{display: inline-block;width: 250px;}
.trolley .img-pm{display: none;}
.trolley .img-wt{display: none;}
.trolley .bg-login{/*background: url("../_images/bg-trolley.jpg");background-size: cover;background-repeat: no-repeat;background-position: center;*/background: #7a1817;}
.trolley .container-page{
width: 58%;
height: 100vh;
position: fixed;
    top: 0;
}
.trolley .cont-principal{
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
    overflow: hidden;
}
.trolley .nubes{
width: 100%;
height: 75vh;
background: #2F80ED;  /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #56CCF2, #2F80ED);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #56CCF2, #2F80ED); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.trolley .nube-1{animation: nubes 20s linear infinite running;background: url(../_images/bg-trolley/nubes.png)no-repeat;height: 100%;background-position: right;width: 100%;    position: absolute;top: 100px;}
.trolley .nube-2{animation: nubes 35s linear infinite running;background: url(../_images/bg-trolley/nubes.png)no-repeat;height: 100%;background-position: right;width: 100%;    position: absolute;top: 50px;}
.trolley .nube-3{animation: nubes 30s linear infinite running;background: url(../_images/bg-trolley/nubes.png)no-repeat;height: 100%;background-position: right;width: 100%;    position: absolute;}
.trolley .nube-4{animation: nubes 40s linear infinite running;background: url(../_images/bg-trolley/nubes.png)no-repeat;height: 100%;background-position: right;width: 100%;    position: absolute;top: 160px;}
.trolley .nube-5{animation: nubes 30s linear infinite running;background: url(../_images/bg-trolley/nubes.png)no-repeat;height: 100%;background-position: right;width: 100%;    position: absolute;top: 220px;}
.trolley .nube-6{animation: nubes 25s linear infinite running;background: url(../_images/bg-trolley/nubes.png)no-repeat;height: 100%;background-position: right;width: 100%;    position: absolute;top: 190px;}
.trolley .txt-page{
  
}
.trolley .txt-page table{
  top: 2em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  left: 0;
  z-index: 9999;
  font-size: 2em;
  bottom: 0;
  color: #fff;
  text-align: center;
}
.trolley .txt-page h1{
margin-bottom: 0;
}
.trolley .btn-home{
width: 150px;
background: #247de8;
padding: 7px 15px;
font-size: 22px;
border-radius: 30px;
color: #fff;
text-decoration: none;
}
.trolley .btn-home:hover{
background: #2171d2;
}
.trolley .txt_404{
right: 0;
left: 0;
top: -190px;
bottom: 0;
margin: auto;
display: inline-flex;
justify-content: center;
width: 20vw;
align-items: center;
position: absolute;
}
.trolley .txt_404 span{
font-size: 14em;
font-weight: 600;
padding: 4px;
color: #1f4b80;
font-family: todayBold;
}
.trolley .playa{
position: absolute;
bottom: 45vh;
width: 100%;
}
.trolley .arena{
width: 100%;
background: #f7dc9a;
height: 48vh;
bottom: 0;
position: absolute;
border-bottom: 85px solid #000;
}
.trolley .separador{
  display: inline-block;
  width: 300vw;
  height: 10px;
  background: #fff;
  position: absolute;
  bottom: 28px;
  background: url('../_images/bg-trolley/separador.png');
  animation: selva 7s linear infinite;
}
.trolley .malecon{
  display: inline-block;
  width: 400vw;
  height: 134px;
  background: #fff;
  position: absolute;
  bottom: 85px;
  background: url('../_images/bg-trolley/malecon.png');
  animation: selva 7s linear infinite;
  z-index: 8;
}
/*.arena .starfish-1{
    width: 45px;
position: absolute;
left: 0;
margin-left: 1em;
bottom: 2em;
z-index: 2;
}
.arena .starfish-2{
    width: 35px;
position: absolute;
right: 0;
left: 0;
top: 5em;
margin: auto;
}
.arena .starfish-3{
  width: 48px;
position: absolute;
right: 0;
margin-right: 1em;
top: 15em;
}
.crab{
width: 50px;
position: absolute;
left: 0;
margin-left: 12em;
bottom: 2vh;
z-index: 2;
}
.palm-1{
width: 195px;
position: absolute;
right: 0;
margin-right: 1em;
z-index: 1;
}
.palm-2{
width: 195px;
position: absolute;
left: 0;
margin-left: 1em;
z-index: 1;
}*/
.trolley .palm-3{
    width: 300vw;
    height: 160px;
    background: url(../_images/bg-trolley/palm.svg);
    background-size: contain;
    background-repeat: repeat-x;
    z-index: 2;
    position: absolute;
    bottom: 128px;
    animation: selva 10s linear infinite;
}
.trolley .ball {
width: 100%;
height: 100%;
right: 0;
top: 3em;
}
.trolley .cont-img-umbrella{
width: 135px;
position: absolute;
animation: umbrella 4s linear infinite running;
-webkit-animation: umbrella 10s linear infinite running;
}
.trolley .cont-img-umbrella img{
  width: 100%;
}
.trolley .ola-1{margin-bottom: -50px;animation: 20s olas linear infinite running;background: url('../_images/bg-trolley/olas-1.png');}
.trolley .ola-2{margin-bottom: -50px;animation: 25s olas linear infinite running;background: url('../_images/bg-trolley/olas-2.png');}
.trolley .ola-3{margin-bottom: -52px;animation: 20s olas linear infinite running;background: url('../_images/bg-trolley/olas-3.png');}
.trolley .ola-4{margin-bottom: -52px;animation: 25s olas linear infinite running;background: url('../_images/bg-trolley/olas-4.png');}
.trolley .ola-5{margin-bottom: -54px;animation: 30s olas linear infinite running;background: url('../_images/bg-trolley/olas-5.png');}
.trolley .ola-6{margin-bottom: -52px;animation: 20s olas linear infinite running;background: url('../_images/bg-trolley/olas-6.png');}
.trolley .ola-7{margin-bottom: -58px;animation: 25s olas linear infinite running;background: url('../_images/bg-trolley/olas-7.png');}
.trolley .ola-8{margin-bottom: -50px;animation: 20s olas linear infinite running;background: url('../_images/bg-trolley/olas-8.png');}
.trolley .ola-1,.ola-2,.ola-3,.ola-4,.ola-5,.ola-6,.ola-7,.ola-8{
height: 7.8vh;
background-repeat-x: repeat;
background-size: cover;
width: 100vw;
}
.trolley .cont-destello{
  width:100%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}

.trolley .cont-sol{
width: 135px;
height: 135px;
position: relative;
margin-left: auto;
margin-right: auto;
}

.trolley .logo-princ{
  width: 100%;
  position: relative;
}

.trolley .destello{
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  animation: rotacion 4s linear infinite;
  -webkit-animation: rotacion 4s linear infinite;
  border-radius: 50%;
 
}

.trolley .sol{
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  animation: destello 5s linear infinite;
  -webkit-animation: destello 5s linear infinite;
  
}
.trolley .trolleyV{
  width: 312px;
  height: 238px;
  background: url('../_images/bg-trolley/trolley.png');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  left: 60px;
  bottom: 30px;
  z-index: 9;
}

@keyframes rotacion {
  50%{
      transform: rotate(180deg);
      box-shadow: inset 0px 0px 58px 0px rgba(248,229,54,0.6), 0px 0px 61px 9px rgba(248,229,54,0.6)
  }

  100%{
      transform: rotate(360deg);
      box-shadow: inset 0px 0px -58px 0px rgba(248,229,54,0.6), 0px 0px -61px -9px rgba(248,229,54,0.6)
  }

}

@keyframes destello {
  50%{
      box-shadow: 0 0 0 0 rgba(248,229,54,0.6);
  }

  100%{
      box-shadow: 0 0 0 0 rgba(248,229,54,0.6);
  }

}

@keyframes olas{
from{
  background-position: 100vw 0;
}

to{
  background-position: -100vw 0;
}
}

@keyframes nubes{
from{
  background-position: 100vw 0;
}

to{
  background-position: -100vw 0;
}
}
@keyframes umbrella {
0% {
    right: -100vw;
    top: 14em;
    transform: rotate(-180deg);
}

100% {
    right: 100vw;
    top: -8em;
    transform: rotate(-45deg);
}
}
@media screen and (max-width: 1366px){
.trolley .ola-1,.ola-2,.ola-3,.ola-4,.ola-5,.ola-6,.ola-7,.ola-8{
height: 6.8vh;
}
.trolley .cont-img-umbrella{
  width: 115px;
}
/*@keyframes umbrella {
0% {
    right: -100vw;
    top: 10em;
    transform: rotate(-180deg);
}

100% {
    right: 100vw;
    top: -8em;
    transform: rotate(-45deg);
}
}*/
}
.hoja-master .bg-login{
    background: #005C97;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #363795, #005C97);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #363795, #005C97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.hoja-master .btn-login{
    background-color: #363795 !important;
}
.hoja-master .btn-login:hover{background-color: #005C97 !important;}
.hoja-master .cont-logo{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(130px, 185px);
    align-items: center;
    width: 250px;
}


/* =================== */

.cont-form{
  background: rgba(255,255,255,0.4);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.5);
}
.cont-form a{
  color: #fff;
  text-shadow: 0 0 1px rgba(0,0,0,0.4);
}
.login_content{
  text-shadow: none;
}
.input-login:focus{
  border-color: #a94442  !important;
}

#user, #password, .input-forgot {
  box-shadow: none !important;
  border: 1px solid #ddddddb3 !important;
}

.btn-login{
  background-color: var(--default-primary-color) !important;
  color: var(--text-primary-color);
  border: 1px solid var(--dark-primary-color);
  width: 100px;
  float: right;
}

.btn-login:hover{
  background-color: var(--dark-primary-color) !important;
  color: var(--text-primary-color) !important;
  border: 1px solid var(--dark-primary-color);
}

.cont-logo-wild{
  width:215px;
  height: 80px;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}

.cont-sol{
  width: 90px;
  height: 90px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: -103px;
  left: 22px;
}

.logo-princ{
    width: 100%;
    position: relative;
}
#view-Ps{
  pointer-events: visible;
}

@media screen and (orientation:portrait){
  html{
      background-position-x: -50em !important;
  } 
}

@keyframes rotacion {
    50%{
        transform: rotate(180deg);
        box-shadow: inset 0px 0px 58px 0px #f8e536, 0px 0px 61px 9px #f8e536
    }

    100%{
        transform: rotate(360deg);
        box-shadow: inset 0px 0px -58px 0px #f8e536, 0px 0px -61px -9px #f8e536
    }

}

@keyframes destello {
    50%{
        box-shadow: 0 0 0 0 #f8e536;
    }

    100%{
        box-shadow: 0 0 0 0 #f8e536;
    }

}

@media screen and(orientation: portrait) {
    html{
      background: url(../_images/wild-resp.jpg)no-repeat;
    }
}
                            
@media (max-width:1024px) and (orientation:landscape) {
  .cont-form{
    width: 60vw !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: 92vh;
  }
  .login_content{
    max-width: 60vw !important;
  }
  .form-group{
    width: 50%;
  }
  .has-feedback button{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: absolute;
  }
  .separator{
    position:relative;
    margin-top: 40px;
  }
}

@media(max-width:360px){
  .cont-form {
      padding: 12px;
      margin-left: auto;
      width: 305px;
      margin-right: auto;
  }
}

/*@media(max-width: 360px){
  .cont-form{

  }
}*/