html{
    font-family: "Avenir",Arial,sans-serif;
    font-size:15px;
}
body,div,p{
    margin:0;
    padding:0;
}
#pagando font{
    visibility:hidden;
}
li{
padding:3px;
}
input,select{
    text-align:center;
    min-height:2rem;
    font-size:1.2rem;
}
.promo{
    margin-top:-37vh;z-index:89;position:relative;float:left; width:75% ;margin-left:12.5%;text-align:center;font-size:4rem;height:35vh;
      display: flex;
  border-radius: 5%;
  overflow: hidden;
  justify-content: center;
}

.row       {  width: 100%;text-align:center;}
.column-25 {  float:left; width:24%;text-align:left;}
.column-50 {  float:left; width:49%;text-align:left;}
.column-502 {  float:left; width:49%;text-align:left;margin-left:1%;} /*Se mantiene en movil*/
.column-60 {  float:left; width:59% ;text-align:left;}
.column-75 {  float:left; width:75% ;text-align:left;margin-left:12.5%;}
.column-70 {  float:left; width:69%;text-align:left;}
.column-702 {  float:left; width:69%;text-align:left;}
.column-802 {  float:left; width:83%;text-align:left;}
.column-30 {  float:left; width:29%;text-align:left;}
#emp .column-30 {  float:left; width:27%;text-align:left;}
.column-40 {  float:left; width:39%;text-align:left;}
.column-402 {  float:left; width:39%;text-align:left;}
.column-90 {  float:left; width:89%;text-align:left;}
.column-33 {  float:left; width:32.3%;text-align:left;}
.column-20 {  float:left; width:19% ;text-align:left;}
#header .column-15{
    float:left; width:13%;text-align:left;
}
.column-15 {  float:left; width:16%;text-align:left;}
.column-152{  float:left; width:16%;text-align:left;}
.column-13 {  float:left; width:13% ;text-align:left;}
.column-14 {  float:left; width:11% ;text-align:left;}  /*no en movil*/
.column-10 {  float:left; width:10% ;text-align:left;}
.column-5  {  float:left; width:5% ;text-align:left;}
.column-1  {  float:left; width:1% ;text-align:left;}
.column-0  {  float:left; width:0.5% ;text-align:left;}


#preloader{
background:white;
opacity:0.6;
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:0;
text-align:center;
z-index:9999;
}
.loader {
  z-index:99;
  font-size: 30px;
  font-weight:bold;
  margin: 25% 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: fixed;
  /*text-indent: -9999em;*/
  -o-animation: load4 2.3s infinite linear;
  -moz-animation: load4 2.3s infinite linear;
  -webkit-animation: load4 2.3s infinite linear;
  animation: load4 2.3s infinite linear;
}

#preloader section {
  align-self:center;
  direction: rtl;
  z-index:99;
  font-size: 30px;
  font-weight:bold;
  margin: 10% 10%;
  opacity:1;
}
h1{
  font-family: 'Rammetto One', cursive;
   font-size:4rem;
  letter-spacing:-2px;
  color:#ff8000;
  text-shadow:0px 0px 0 #0b0b61,
    1px 1px 0 #0b0b61,
    -2px -2px 0 #0b0b61,
    -3px -3px 0 #0b0b61,
    -4px -4px 0 #0b0b61,
    -5px -5px 0 #0b0b61,
    -6px -6px 0 #0b0b61,
    -7px -7px 0 #0b0b61,
    -8px -8px 0 #ff8000,
    -9px -9px 0 #ff8000,
    -10px -10px 0 #ff8000,
    -11px -11px 0 #ff8000,
    -12px -12px 0 #0b0b61,
    -13px -13px 0 #0b0b61,
    -14px -14px 0 #0b0b61, 
     10px -10px 0 hsla(0,0%,0%,.08),
      0 8px 8px hsla(0,0%,0%,.15);   
}
.c1 {
  display: inline-block;
  position: relative;
  height: 3.125em;
}
 .c1:before {
    content: "";
    display: block;
    width: 100%;
    border-radius: 50%;
    height: 1.563em;
    background: hsla(0, 0%, 0%, 0.1);
    display: block;
    position: absolute;
    bottom: -.10em;
    transform: scale(0.5);
    animation: shadow 1s linear infinite 0s;
  }
  .c1:after {
    content: "";
    display: block;
    width: 3.125em;
    height: 3.125em;
    background: #0b0b61;
    border-radius: 50%;
    position: relative;
    transform: rotate(45deg);
    top: -2.500em;
    margin: 0 0.446em;
    animation: jellijump 1s linear infinite 0s;
  }


.c2 {
  display: inline-block;
  position: relative;
  height: 2.500em;
}
.c2:before {
    content: "";
    display: block;
    width: 100%;
    border-radius: 50%;
    height: 1.250em;
    background: rgba(0, 0, 0, 0.1);
    display: block;
    position: absolute;
    bottom: -.1em;
    transform: scale(0.5);
    animation: shadow 1s linear infinite 0.2s;
  }
  .c2:after {
    content: "";
    display: block;
    width: 2.500em;
    height: 2.500em;
    background: #ff8000;
    border-radius: 50%;
    position: relative;
    transform: rotate(45deg);
    top: -2.500em;
    margin: 0 0.357em;
    animation: jellijump 1s linear infinite 0.2s;
  }


.c3 {
  display: inline-block;
  position: relative;
  height: 1.875em;
}
.c3:before {
    content: "";
    display: block;
    width: 100%;
    border-radius: 50%;
    height: 0.938em;
    background: hsla(0, 0%, 0%, 0.1);
    display: block;
    position: absolute;
    bottom: -.10em;
    transform: scale(0.5);
    animation: shadow 1s linear infinite 0.4s;
  }
 .c3:after {
    content: "";
    display: block;
    width: 1.875em;
    height: 1.875em;
    background: #0b0b61;
    border-radius: 50%;
    position: relative;
    transform: rotate(45deg);
    top: -2.500em;
    margin: 0 0.268em;
    animation: jellijump 1s linear infinite 0.4s;
  }

.c4 {
  display: inline-block;
  position: relative;
  height: 1.250em;
  }
 .c4:before {
    content: "";
    display: block;
    width: 100%;
    border-radius: 50%;
    height: 0.625em;
    background: hsla(0, 0%, 0%, 0.1);
    display: block;
    position: absolute;
    bottom: -.10em;
    transform: scale(0.5);
    animation: shadow 1s linear infinite 0.6s;
  }
  .c4:after {
    content: "";
    display: block;
    width: 1.250em;
    height: 1.250em;
    background: #ff8000;
    border-radius: 50%;
    position: relative;
    transform: rotate(45deg);
    top: -2.500em;
    margin: 0 0.179em;
    animation: jellijump 1s linear infinite 0.6s;
  }


@keyframes jellijump {
  5% {
    top: -2.500em;
  }
  20% {
    top: -1.875em;
  }
  40% {
    top: -0.625em;
    border-radius: 50%;
  }
  45% {
    border-radius: 60% 40% 60% 40%;
  }
  50% {
    top: 0em;
    border-radius: 70% 40% 80% 40%;
  }
  60% {
    top: -0.625em;
    border-radius: 90% 40% 90% 40%;
  }
  80% {
    top: -1.875em;
    border-radius: 40% 80% 40% 70%;
  }
  90% {
    border-radius: 60% 40% 60% 40%;
  }
  95% {
    top: -2.500em;
    border-radius: 50%;
  }
}

@keyframes shadow {
  0% {transform: scale(0.5);}
  50% {transform: scale(1);}
  100% {transform: scale(0.5);}
}

#divflota {
   background-color: #000;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   text-align:center;
   z-index:9999;
   display: none;

}
.puntos{
   position: relative;
   margin:5% 10% 10% 10%;
   background-color: white;
   color:#0b0b61;
   border-radius: 3px;
   height:80vh;
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em #0404B4, 2em -2em 0 0 #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 0 #0404B4;
  }
  12.5% {
    box-shadow: 0 -3em 0 0 #0404B4, 2em -2em 0 0.2em #0404B4, 3em 0 0 0 #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 0 #0404B4, 3em 0 0 0.2em #0404B4, 2em 2em 0 0 #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  37.5% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 0 #0404B4, 2em 2em 0 0.2em #0404B4, 0 3em 0 0 #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  50% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 0 #0404B4, 0 3em 0 0.2em #0404B4, -2em 2em 0 0 #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  62.5% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 0 #0404B4, -2em 2em 0 0.2em #0404B4, -3em 0 0 0 #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  75% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 0 #0404B4, -3em 0 0 0.2em #0404B4, -2em -2em 0 0 #0404B4;
  }
  87.5% {
    box-shadow: 0 -3em 0 0 #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 0 #0404B4, -3em 0 0 0 #0404B4, -2em -2em 0 0.2em #0404B4;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em #0404B4, 2em -2em 0 0 #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 0 #0404B4;
  }
  12.5% {
    box-shadow: 0 -3em 0 0 #0404B4, 2em -2em 0 0.2em #0404B4, 3em 0 0 0 #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 0 #0404B4, 3em 0 0 0.2em #0404B4, 2em 2em 0 0 #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  37.5% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 0 #0404B4, 2em 2em 0 0.2em #0404B4, 0 3em 0 0 #0404B4, -2em 2em 0 -0.5em #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  50% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 0 #0404B4, 0 3em 0 0.2em #0404B4, -2em 2em 0 0 #0404B4, -3em 0 0 -0.5em #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  62.5% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 0 #0404B4, -2em 2em 0 0.2em #0404B4, -3em 0 0 0 #0404B4, -2em -2em 0 -0.5em #0404B4;
  }
  75% {
    box-shadow: 0 -3em 0 -0.5em #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 0 #0404B4, -3em 0 0 0.2em #0404B4, -2em -2em 0 0 #0404B4;
  }
  87.5% {
    box-shadow: 0 -3em 0 0 #0404B4, 2em -2em 0 -0.5em #0404B4, 3em 0 0 -0.5em #0404B4, 2em 2em 0 -0.5em #0404B4, 0 3em 0 -0.5em #0404B4, -2em 2em 0 0 #0404B4, -3em 0 0 0 #0404B4, -2em -2em 0 0.2em #0404B4;
  }
}
#contenedor{
    position:relative;
    margin-top:16vh;
    left:0;top:0;
    width:100%;
    overflow:hidden;
}
.header,.graphic,#sustituye,#areservar,#ventajas,#comofunciona,#dondeestamos,.footer,#faqs{
width:100%;
overflow:hidden;
z-index:1;
}
#sustituye,.reserva,.graphic,#areservar,#ventajas,#comofunciona,#dondeestamos,.footer,#faqs{
position:relative;
}
#sustituye{
display:none;
height:65vh;
}
.header{
    position:fixed;
    left:0;
    top:0;
    height:17vh;
    z-index:89;
    display:flex;
    align-items:center;
}
.reserva{
    width:100%;
    height:65vh;
    display:flex;
    display: -webkit-flex;
    justify-content: space-around;
    background-image:url("../images/avionportada.jpg");
    background-size:120% 110%;
    background-repeat:no-repeat;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background-position:center;
}
#idiomas{
position:absolute;
width:98%;
bottom:-3px;
}
#idiomas img{
    float:right;
    padding:10px 5px 8px 5px;
    height:28px;
    cursor:pointer;
}
#idiomas img:hover{
    transform:scale(1.3);
}
#idiomas video{
    float:right;
    padding:10px 5px;
    height:20px;
    cursor:pointer;
}
#idiomas video:hover{
    transform:scale(1.3);
}
#bocadillo {
    position: absolute;
    z-index:9999;
    margin-top:-50px;
    margin-right:160px;
    height: 100px;
    width: 330px;
    background: white;
    border-radius: 40%;
    box-shadow: 1px 12px 33px rgba(0, 0, 0, 0.5);
    display:none;
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
}
#bocadillo h5{
 padding:10px 0; 
 margin:0;
 font-size:14px;
 color:#ff8000;
 text-decoration:underline;
  text-align:center;
}
#bocadillo p{
 width:90%;
 margin-left:5%;
 font-size:13px;
 color:#0b0b61;
 text-align:center;
}
#bocadillo:before {
    border: 25px solid white;
    content: '';
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom: -44px;
    right: 75px;
    transform: rotate(-8deg);
}
#campana{
    display:none;
    cursor:pointer;
    width:40px;
    padding:5px;
    animation: pulse 1s 10, pulse1 2s;
}
@keyframes pulse {
	30% {
    -webkit-transform: rotateX(60deg);
-webkit-transform-style: preserve-3d;
transform: rotateX(60deg);
transform-style: preserve-3d;	
	}
	70% {
    -webkit-transform: rotateX(40deg) ;
-webkit-transform-style: preserve-3d;
transform: rotateX(40deg);
transform-style: preserve-3d;
	}
}
@keyframes pulse1 {
	0% {
    -webkit-transform: scale(4);
    transform: scale(4);
	}
		25% {
    -webkit-transform: scale(3);
    transform: scale(3);
	}
		50% {
    -webkit-transform: scale(2);
    transform: scale(2);
	}
		100% {
    -webkit-transform: scale(1);
    transform: scale(1);
	}
}


#campana:hover{
    transform:scale(1.2);
}
#reserva{   
 flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#reserBar{
    width:75%;
    min-height:20vh;
    margin-top:10vh;
    display:flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    align-items:center;
    justify-content:space-around;
    align-content:center;
    background-color: white;
    border-style:solid;
    border-color:#ff8000;
    
}
#lcg,#relprecios,#relpreciosNO{
width:75%;
background: #ffffff;
border-top: none;
font-size: 1.1em;
cursor: context-menu;
display:none;
line-height:1.5em;
padding-top:10px;
}

#nameuser{
    display:flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items:center;
}
#menu{
    display:none;
    position:fixed;
    top:15vh;
    left:0;
    height:100%;
    width:20%;
    min-width:250px;
    border-right:1px solid #a5be0b;
    z-index:9999;
}
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:left;
}
#menu ul li{
    padding: 1rem;
    border-top:1px solid #a5be0b;
    cursor:pointer;
}
#menu ul li:hover{
    background-color:white;
}
.nav1{
    text-decoration: none;
    color:#000000;
}
.nav2{
    padding:1px 10px 8px 10px;
    font-weight:bold;
    width:120px;
    cursor:pointer;
}
.nav2:hover{
    color:#0b0b61;
}
.separador{
    border-left: 2px solid #a5be0b;
}
#des13{
    position:fixed;
    display:none;
    top:75px;
    right:0;
    width:20%;
    min-width:250px;
    background:#f9bf77;
    border-left:1px solid #f9bf77;
    border-bottom:1px solid #f9bf77;
    font-size:1rem;
    z-index:9999;
}
#des13 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
}
#des13 ul li{
    padding: 1.5em;
    border-top:1px solid #ff8000;
    cursor:pointer;
}
#des13 ul li:hover{
    background-color:white;
}
#des13 ul li a{
    display:flex;display: -webkit-flex;
    align-items:center;
    justify-content:center;
}

.itemRes{
    display:flex;
    display: -webkit-flex;
    flex: none;
    flex-direction:column;
    -webkit-flex-direction:column;
    align-items:center;
    font-weight:bold;
    background:white;
}
#fechaHoraE,#fechaHoraS{
    display:flex;display: -webkit-flex;
    justify-content:center;
    width:100%;
}
.itemRes label{
    font-size:1.2rem;
    border-bottom:1px solid;
    white-space:nowrap;
}
.classdiv{
    background-image:url("../images/precio.png");
    background-position:center;
    width:18vh;
    max-width:150px;
    height:65px;
    display:flex;display: -webkit-flex;
    align-items:center;
    justify-content:center;
    background-size:120% 110%;
    background-repeat:no-repeat;
}
#reserBar select,#reserBar input{
    padding:0.5em;
    margin-top:0.5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ff8000;
    border-radius:55px;
    text-align:center;
    cursor:pointer;
    font-family:inherit;
    background-color:transparent;
}
#reserBar button, #lcg button{
    background-color:#ff8000;
    border-radius:0.6rem;
    text-decoration: none;
    border:none;
    color:white;
    cursor:pointer;
    margin: 10px auto;
    padding: 10px 20px;
}
#reserBar button:hover, #lcg button:hover{
    font-size:1.1rem;
}
.graphic{
    top:-25px;
    height:20vh; 
    left:0;
    position:relative;
    background-image: url("../images/horizonte.jpg");
    background-size:cover;
}
.casa{
 height:45%; position:absolute; top:10px;left:10%; background:transparent; z-index:1;
}
.logoGraph{
 height:50%; position:absolute; left:49% ; top:10px;background:transparent; z-index:1
}
#cocheCamina {
    height:50%;top:25px; left:15% ; position:absolute;opacity:0;
    -webkit-animation-name: camina; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 20s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 5;
    animation-name: camina;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-iteration-count: 5;
}
@-webkit-keyframes camina{
    0% {left:15%;opacity:0;}
    5% {opacity:1;}
    12%{opacity:1;}
    15%{opacity:0;}
    19%,100%{left: 49%;opacity:0;}
}
@keyframes camina {
    0% {left:15%;opacity:0;}
    5% {opacity:1;}
    12%{opacity:1;}
    15%{opacity:0;}
    19%,100%{left: 49%;opacity:0;}
}
#busCamina {
   height:50%; top:13px;position:absolute; left:50%;opacity:0;
    -webkit-animation-name: busCamina; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 20s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 5;
    animation-name: busCamina, busVuelve;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: 5;
}
@-webkit-keyframes busCamina{
    0%,20%  {left: 50%;transform:rotateY(0deg);opacity:0;}
    25%  {opacity:1;}
    50%  {left:79%;transform:rotateY(0deg);opacity:1;}
    55% {left:79%;transform:rotateY(180deg);opacity:1;}
    77% {opacity:1;}
    80% {opacity:0;} 
    85% {left:49%;transform:rotateY(180deg);opacity:0;}
}
@keyframes busCamina {
    0%,20%  {left: 50%;transform:rotateY(0deg);opacity:0;}
    25%  {opacity:1;}
    50%  {left:79%;transform:rotateY(0deg);opacity:1;}
    55% {left:79%;transform:rotateY(180deg);opacity:1;}
    77% {opacity:1;}
    80% {opacity:0;} 
    85% {left:49%;transform:rotateY(180deg);opacity:0;}
}
#avionVuela {
    height:50%; left:85%; top:10px;position:absolute;
    -webkit-animation-name: avionVuela;
    -webkit-animation-duration: 20s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 5;
    animation-name: avionVuela;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: 5;
}
@-webkit-keyframes avionVuela{
    50% {left:85%; transform:rotate(0deg);top:10px; opacity:1;}
    89% {left: 130%; transform:rotate(-45deg); bottom:250px; opacity:0;}
   90%,100% {left: 85%; transform:rotate(0deg); top:10px; opacity:1;}
}
@keyframes avionVuela {
    50% {left:85%; transform:rotate(0deg);top:10px; opacity:1;}
    89% {left: 130%; transform:rotate(-45deg); top:-100px; opacity:0;}
   90%,100% {left: 85%; transform:rotate(-0deg); top:10px; opacity:1;}
}
.slogan{
    position:relative;
    float:left;
    top:60%;
    width:80%;
    left:10%;
    height:10%;
    display:flex;display: -webkit-flex;
    justify-content:space-between;
    color:white;
    cursor:context-menu;
   font-weight: bold;
text-shadow: 2px 3px 3px #000;
}
#slogan1{
    font-size:1.5rem; 
    font-family:'Quicksand', sans-serif;
    width:29.66%;
    text-align:left;
}
#slogan2{
    font-size:1.5rem; 
    font-family:'Quicksand', sans-serif;
    width:23.66%;
    text-align:center;
}
#slogan3{
    font-size:1.5rem; 
    font-family:'Quicksand', sans-serif;
    width:26.66%;
    text-align:right;
}
#areservar{
    display:none;
    background:white;
    min-height:80vh;
    top:10vh;
}

.seccion{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-around;
    left:0;
    width:100%;
    height:22vh;
}

.seccion img{
    width:6%;
    opacity:0.5;
}

#ventajas{
    float:left;
    display:flex;
    display: -webkit-flex;
    flex-direction:column;-webkit-flex-direction:column;
    justify-content:space-between;
    align-items:center;
    color:#0b0b61;
    font-size:2rem;
    width:100%;
    height:75vh;
    cursor:context-menu;
}
.titulo{
    width:100%;
    text-align:center;
    height:10%;
    font-weight:bold;
    font-size:2rem;
}
.cuerpo{
    display:flex;display: -webkit-flex;
    justify-content:space-around;
    width:75%;
    height:90%;
    padding-left:5%;
}
.columnas{
    display:flex;display: -webkit-flex;
    flex-direction:column;-webkit-flex-direction:column;
    justify-content:space-between;
   /*width:45%;*/
}
#ventajas .columnas {width: 50%}
.visto, .vistodcha {height: 100px}
.visto{
    font-size:1.6rem;
    display:flex;display: -webkit-flex;
    width:100%;
    align-items:center;
}
.vistodcha{
    font-size:1.6rem;
    display:flex;display: -webkit-flex;
    width:100%;
    justify-content:flex-end;
    align-items:center;
}
.des{
    display:none;
    font-size:1.1rem;
    color:grey;
    width:100%;
}
.letras{
    padding-left:2%;
    width:78%;
}

#comofunciona{
    display:flex;display: -webkit-flex;
    flex-direction:column;
    align-items:center;
    color:#0b0b61;
    cursor:context-menu;
}

.pasos{
    height:15vh;
    display:flex;display: -webkit-flex;
    width:75%;
}

.paso{
    width:33.33%;
    height:100%;
    display:flex;display: -webkit-flex;
    flex-direction:column;
    align-items:center;
    color:#0b0b61;
    font-size:1.2rem;
    font-weight:bold;
    cursor:pointer;
}

#paso1{
    background-color:#f9bf7740;
    border:1px solid #0b0b61;
}

.vuelca{
    width:67%;
    padding:2% 4%;
    font-size:1.2rem;
    border:1px solid #0b0b61;
}

#vuelca2{
    display:none;
}

#vuelca3{
    display:none;
}

.graphicCF{
    text-align:center;
    position:relative;
    width:115%;
    margin-left:-10%;
    height:18vh;
}

.graphicCF2{
    text-align:center;
    position:relative;
    width:95%;
    height:18vh;
}


#cocheCamina2 {
     height:50%; 
    -webkit-animation-name: camina2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 20s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 6;
    animation-name: camina2;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-delay: 0s;
    animation-iteration-count: 6;
    opacity:0;
}

@-webkit-keyframes camina2{
    70% {left: 40%;opacity:0;}
    80%,95% {opacity:1;}
    100% {left: 95%; opacity:0;}
}

@keyframes camina2 {
    70% {left: 40%;opacity:0;}
    82%,88% {opacity:1;}
    100% {left: 95%; opacity:0;}
}

#busCamina2 {
     height:50%; 
    -webkit-animation-name: busCamina2; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 20s; /* Safari 4.0 - 8.0 */
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 6;
    animation-name: busCamina2;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: 6;
}

@-webkit-keyframes busCamina2{
    0%,30%  {left: 40%;transform:rotateY(180deg);}
    50%  {left:13px;transform:rotateY(180deg);}
    51%  {left:13px;transform:rotateY(0deg);}
    70%,100% {left:40%;transform:rotateY(0deg);}
}

@keyframes busCamina2 {
    0%,30%  {left: 40%;transform:rotateY(180deg);}
    50%  {left:13px;transform:rotateY(180deg);}
    51%  {left:13px;transform:rotateY(0deg);}
    70%,100% {left:40%;transform:rotateY(0deg);}
}

#avionVuela2 {
 height:50%; 
    -webkit-animation-name: avionVuela2;
    -webkit-animation-duration: 20s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 6;
    animation-name: avionVuela2;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: 6;
}

@-webkit-keyframes avionVuela2{
    0% {left:-350px; transform:rotate(30deg); bottom:100px; opacity:0;}
    20%,100% {left: -7%; transform:rotate(0deg); bottom:-1px; opacity:1;}
}

@keyframes avionVuela2 {
    0% {left:-350px; transform:rotate(30deg); bottom:100px; opacity:0;}
    20%,100% {left: -7%; transform:rotate(0deg); bottom:-1px; opacity:1;}
}

#whats {
    -webkit-animation-name: whats;
    -webkit-animation-duration: 20s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 6;
    animation-name: whats;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: 6;
}

@-webkit-keyframes whats{
    0%,20% {opacity:0;}
    21%,32% {opacity:1;}
    42%,100% {opacity:0;}
}

@keyframes whats {
    0%,20% {opacity:0;}
    21%,32% {opacity:1;}
    42%,100% {opacity:0;}
}

#dondeestamos{
    display:flex;display: -webkit-flex;
    flex-direction:column;
    align-items:center;
    color:#0b0b61;
}

.footer{
    background-color: #0b0b61;
    color:white;
    cursor:context-menu;
    padding-top:2rem;
}
.foot{
    display:flex;display: -webkit-flex;
    align-items:center;
    justify-content:space-around;
}
.foot a{
    color:#ff8000;
    cursor:pointer;
    text-decoration:none;
    width:max-content;
    padding:0.5rem;
}
.foot a:hover{
    border-bottom:1px solid #ff8000;
}
.foot img{
width:1.3rem;
}
.foot div{
    display:flex;
    flex-direction:column;-webkit-flex-direction:column;
    justify-content:flex-start;
}
.foot div div{
display:block;
padding:0.7rem;
}

.hovernaranja:hover{
    background-color:#ff8000;
}

.calend{
    position:absolute;
    margin-top:5.3rem;
	width:160%;
	max-width:350px;
	font-size:1.8rem;
	background:white;
    display:none;
	border: 0.2rem solid #ff8000;
	border-radius:5%;
	padding:4px;
	z-index:99;
}
.pvpr {
width:5rem;
padding:0.6rem 0rem 0.6rem 0;
text-align:center;
margin-top:0;
background:#0b0b61;
color:white;
height:3.5rem;
border-style:double;
border-color:orange;
border-radius:10%;
}
/*Colores y tamaños*/
.verde{
color:#a5be0b;    
}
.fondoverde{
background:#a5be0b;    
}
.fondogris{
background:#cfcfcf;    
}
.fondocielo{
background:#c4e4f7;    
}
.fondoblanco{
background:#ffffff;    
}
.clarito{
color:#f9bf77;
}
.naranja{
color:#ff8000;
}
.misdat{
background:#0b0b61;
border: 0.2rem solid #ff8000;
color:white;
padding:1%;
text-align:center;
}
.avisos{
 color:#0b0b61;
 padding:5px;
 background:#c4e4f7;    ;
animation:pulse1 4s;
}
.azul{
color:#0b0b61;
}
.blanco{
color:white;
}
.peq{
font-size:0.9rem;    
}
.nor{
font-size:1.3rem;       
}
.gran{
font-size:1.5rem;    
}
.enor{
font-size:2rem;    
}
.jus{
text-align:justify;
}
.izq{
text-align:left;
}
.der{
text-align:right;
}
.cen{
text-align:center;
}
.pulsar{
cursor:pointer;
}
.pulsar:active{
top:5px;
-webkit-box-shadow: 0 8px 8px 0 #ff8000;
-moz-box-shadow: 0 8px 8px 0 #ff8000;
box-shadow: 0 8px 8px 0 #ff8000;
}
#formres select,
#formres input,
#formmisdatos input,
#formmisdatos select,
.forextras{
  display: block;
  width: 100%;
  min-height:50px;
  background-color: #f9bf7730;
  border:none;
  border-bottom:2px solid #f9bf77;
  line-height:25px;
}
.flors{
/*height:65px;
margin-left:1px;
margin-top:3px;*/
background:transparent;
z-index:-1;
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 10px 10px #ff8000;
-ms-box-shadow: 0 0 10px 10px #ff80000;
-o-box-shadow: 0 0 10px 10px #ff8000;
box-shadow: 0 0 10px 10px #ff8000;
}
.florno{
background:transparent;
z-index:-1;
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 1px 1px red;
-ms-box-shadow: 0 0 1px 1px red;
-o-box-shadow: 0 0 1px 1px red;
box-shadow: 0 0 1px 1px red;
}
.flor:hover{
transition:all .5s ease-in-out;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
-webkit-box-shadow: 0 0 15px 15px #ec731e;
-ms-box-shadow: 0 0 15px 15px #ec731e;
-o-box-shadow: 0 0 15px 15px #ec731e;
box-shadow: 0 0 15px 15px #ec731e;
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
#divextras{
    display:none;
}
.conpuntos{
text-decoration: red 2px line-through;
}
.extrasflex{
width:100%;
}
.nodisp{
opacity:0.4;
}




span.dropt {position:relative;border-bottom: thin dotted; background: #ffeedd;left:0;}
span.dropt span {position: absolute; left: -9999px;
margin: 4px 0 0 0; padding: 3px 3px 3px 3px;width:100%;min-width:360px; 
border-style:solid; border-color:black; border-width:1px;z-index: 6;}
span.dropt:hover span {left:0;background:  #fbc37f ;color:#0b0b61;} 

span.dropt2 {position:relative;border-bottom: thin dotted; background: #ffeedd;left:0;}
span.dropt2 span {position: absolute; left: -9999px;
margin: 4px 0 0 0; padding: 3px 3px 3px 3px;width:300%;min-width:360px; 
border-style:solid; border-color:black; border-width:1px;z-index: 6;}
span.dropt2:hover span {left:-140%;background:  #fbc37f ;color:#0b0b61;} 

/*
span.dropt:hover {text-decoration: none; background: #ff8000; z-index: 6; }
span.dropt span {position: absolute; left: -9999px;
  margin: 20px 0 0 0; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
*/

/*
span.dropt:hover span {margin: 20px 0 0 170px; background:  #fbc37f ; z-index:6;}

span.dropt2 {border-bottom: thin dotted; background: #ffeedd;}
span.dropt2:hover {text-decoration: none; background: #ff8000; z-index: 6; }
span.dropt2 span {position: absolute; left: -9999px;
  margin: 20px 0 0 0; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6;}
span.dropt2:hover span {position:absolute;left:40%; width:40%; background:  #fbc37f ;color:#0b0b61; 
margin: 20px 0 0 170px; background:  #fbc37f ; z-index:6;}
*/

/* Formulario de registro, inicio, etc  */
.todo{
  border:1px solid white;
  width:60%;
  height: 60%;/*350px;*/
  min-height:300px;
  max-height:350px;
  position: absolute;
  top:30%;
  left:50%;
  transform: translate(-50%, -50%);
  display: inline-flex; 
  display: -webkit-inline-flex;
  opacity:1;
  cursor:context-menu;
}
.fondo{  
  background-color: #ff8000;
  width: 100%;
  height:109%;
  top:50%;
  position: absolute;
  transform: translate(0,-50%);
  display: inline-flex;
  display: -webkit-inline-flex;
}
.frente{
  background-color: white;
  border-radius: 20px;
  height: 90%;
  width: 50%;
  top:6%;
  z-index: 10;
  position: absolute;
  right:0;
  margin-right: 3%;
  margin-left: 3%;
  transition: right .8s ease-in-out;
}

.mueve{
  right:45%;
}

.login0, .login1{
  width: 50%;
  height: 94%;
  font-size: 1rem;
  box-sizing: border-box;
  text-align:center;
}
.login0 .title,
.login1 .title{
  font-weight: 300;
  font-size: 1.6rem;
}
.login0 p,
.login1 p {
  font-weight: 100;
  padding:5px;
}
.text{
  color:white;
  margin-top:65px;
  margin-left: 12%;
  margin-right: 12%;
}

.login0 button,
.login1 button,
.botonres {
  background-color: #0b0b61;
  border: 2px solid white;
  border-radius: 10px;
  color:white;
  font-size: 1rem;
  box-sizing: content-box;
  font-weight: 300;
  padding:12px; /*10px;*/
  margin-top: 25px; /*20px;*/
  cursor:pointer;
  z-index:80;
}
.login, .registro{
  padding: 0 20px 20px 20px;
  text-align: center;
  height:100%;
}
.login h2,
.registro h2 {
  color: #0b0b61;
  font-size:1.5rem;
}
.inputbox{
  margin-top:1rem; 
}
.login input, 
.registro input{
  display: block;
  width: 100%;
  height: 40px;
  background-color: #f9bf7740;
  border: none;
  margin-bottom:20px;
  font-size: 1rem;
}

.login button,
.registro button,
.botonnaranja{
  background-color:#ff8000;
  border: none;
  color:white;
  font-size: 1rem;
  font-weight: 300;
  box-sizing: content-box;
  padding:12px;
  border-radius: 10px;
  width: 60px;
  position: relative;
  bottom: 0;
  cursor: pointer;
}
#politica{
background-color: #ff8000;
border: none;
margin-top:-5px;
width: 200%;
margin-left:-4%;
height: auto;    
color:white;
transition: opacity 0.8s ease-in-out;
}
#politica input{
min-height:1px;
font-size:0.9rem;
border: none;
width: auto;
height: auto;
margin-left:10px;
}
.parrafo{
  font-size:1.2rem;
  text-align:justify;
  padding:5px 3rem 1px 1rem;
}
.login p {
  cursor: pointer;
  color:white;
  font-size:1rem;
}
.login0, .login1{
 /*opacity: 1;*/
transition: opacity 1.8s ease-in-out;
}
.visibility{
  opacity: 0;
}
.hide{
  display: none;
}
/*  FIN de Formulartio inicio sesion ---------------------------------------*/



.radio {
    width: 99%;
}
.radio input[type="radio"]:checked + label {
    padding: 1rem 1rem;
    background-color: #ff8000;
    border-radius: 2px;
    color: white;
}
.radio label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding: 1px 15% 1px 1px;
    border-radius: 5px;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}
.radio input[type="radio"] {
    min-height:1px;
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    color: -internal-light-dark-color(black, white);
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    /*-webkit-appearance: textfield;*/
    background-color: -internal-light-dark-color(rgb(255, 255, 255), rgb(59, 59, 59));
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    border-color: -internal-light-dark-color(rgb(118, 118, 118), rgb(195, 195, 195));
    border-image: initial;
    border-radius: 2px;
}
.radio label:before {
    /*content: "";*/
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: none;
    border: 3px solid #0b0b61;
}
#faq2,#faq3,#faq4,#faq5,#faq6,#faq7,#faq8,#faq9,#faq10,#faq11,#faq12,#faq13,#faq14,#faq15,#faq16{
    display:none;
}
@media  (max-width: 1100px) {
     html {
    font-size: 14px;    
    } 
}
@media  (max-width: 980px) {

.snor{font-size:1.0rem;}
.sgran{font-size:1.2rem;}

.foot{
flex-flow:wrap;
}
 
.pasos,.cuerpo,.column-50,.column-40,.column-70,.todo,.column-75{
width:98%;
margin-left:1%;
}
#reserBar, #lcg{
    width:98%;
    font-size: 1.0em;
}
.column-14{
display:none;
}
#reserBar button,#lcg button{
    padding:0.5rem 1rem;
}

#idiomas video{
    height:17px;
}
.column-15{
width:33.3%;
}

.vuelca{
width:82%;
}
.graphic,.graphicCF,.graphicCF2{
height:10vh;
}
.seccion img{
width:10%;
}
#menu,#des13{
font-weight: bold;
}  
.promo{
   width:130% ;
   margin-left:-15%;
}
.nav2:first-child{
    margin-top:-25px;
}
}
@media  (max-width: 720px) {
#reserBar{
    
    height:auto;
    flex-flow: column nowrap;
    align-items:flex-start;
}
.itemRes{
    flex-direction:row;
    -webkit-flex-direction:row;
    width:98%;
    margin-left:2%;
    align-items:baseline;
}
.itemRes label{
    width:35%;
}
#fechaHoraE, #fechaHoraS, #ttipo{
    width:60%;
    display:inline-block;
    margin-left:2%;
}
#eurosres{
display:flex;
flex-direction:row;
-webkit-flex-direction:row;
margin-right: 15px;
margin-bottom: 10px;
width:55%;
align-items:center;
justify-content: space-evenly;
margin-top:15px;
}
.calend{
max-width:280px;
margin-left:10%;
margin-top:4rem;
}
#emp .column-30 {  float:left; width:49%;text-align:left;}
#emp .column-13 {  float:left; width:30%;text-align:left;}
#emp .column-10 {  float:left; width:15%;text-align:left;}
#emp .column-5 {  float:left; width:10%;text-align:left;}
html {
font-size: 13px;    
} 
.classdiv{
    height:50px;
}
#campana{
 width:30px;  
 margin-top:-5px;
 padding:0;
}
.inpuntos{
    max-width:98%;
}
#idiomas video{
    height:15px;
}
#bocadillo {
    margin-top:-80px;
}
}
@media  (max-width: 390px) {
html {
font-size: 12px;    
} 
span.dropt2:hover span {max-width:360px;}
}
@media  (max-width: 360px) {
html {
font-size: 11px;    
} 
}
@media   (max-width: 720px) and (max-height: 710px) {
html {
font-size: 12px;    
} 
}
@media  (max-height: 650px) {
html {
font-size: 10px;    
} 
}