html, body {
  margin: 0;
  padding: 0;
  height: 100%;

}

.mobile{
  display: none !important;
}
.desktop{
  display: flex !important;
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
}


:-webkit-any(article, aside, nav, section) h1,:-webkit-any(article, aside, nav, section) h2,:-webkit-any(article, aside, nav, section) h3,:-webkit-any(article, aside, nav, section) p,:-webkit-any(article, aside, nav, section) h4 {
  margin-block-start: 0;
  margin-block-end: 0;
}
a{
  text-decoration: none;
}
.fixed_bg {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: row;
}
.normalbg{
  background: linear-gradient(to bottom, white 50%, #CE0058 50%);
  height: 100vh;
  width: 100vw;
}
.blue{
  background: #161633;
  height: 100vh;
  width: 100vw;
}
.panel {
	width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 1.5em;
  text-align: center;
  color: white;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  z-index: 70;
}


.container {
  width: 500%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}


.panel .caption{
  display: flex;
  flex-direction: column;
}
.panel.align-top {
  align-items: flex-start;
}
/* NAVBAR */
nav{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: calc(136 / 1080 * 100vh);
  width: 100vw;
  position: fixed;
  top:0;
  z-index: 120;
}
nav .content{
  width: 100%;
  height: calc(63 / 1080 * 100vh);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  align-items: center;
}
.logo{
  width: calc((640 - 45) / 1920 * 100vw);
  padding-left: calc(45 / 1920 *100vw);
}
.logo img{
  height: calc(63 / 1080 * 100vh);
}
.social{
  width: calc((640 - 48) / 1920 * 100vw);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: calc(48 / 1080 * 100vh);
}
.social div{
  margin-right: calc(19.75 / 1080 *100vh);
}
.social svg{
  height: calc(24.79 / 1080 * 100vh);
  width: auto;
}
#hyper{
  width: calc((640 - 64) / 1920 * 100vw);
  display: flex;
  flex-direction: row;
  display: flex;
  justify-content: flex-end;
  padding-right: calc(64 / 1080 * 100vh);
  align-items: center;
}
#hyper a{
  margin-left: calc(30 / 1080 *100vh);
  color:#161633;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: calc(25 / 1080 * 100vh);
  line-height: calc(24 / 1080 * 100vh);
  text-align: center;
}
#hyper.active a{
  margin-left: calc(30 / 1080 *100vh);
  color:white;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: calc(20 / 1080 * 100vh);
  line-height: calc(24 / 1080 * 100vh);
  text-align: center;
}
#hyper.active_button a{
  margin-left: calc(30 / 1080 *100vh);
  color:white;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: calc(20 / 1080 * 100vh);
  line-height: calc(24 / 1080 * 100vh);
  text-align: center;
  transition: 0.2s;
}
#hyper a:hover{
  color: #CE0058;
}
button:hover{
  background: #00A6DD;
}
#hyper button{
  margin-left: calc(30 / 1080 *100vh);
  color:white;
  background: #CE0058;
  border: none;
  width: calc(104 / 1080 *100vh);
  height: calc(41 / 1080 *100vh);
  border-radius: 100px;
  font-size: calc(20 / 1080 * 100vh);
  line-height: calc(24 / 1080 * 100vh);
}
#hyper button:hover{
  background: #4BB1E0;
}
#hyper button.active{
  background: #4BB1E0;
}

/* SECCION 1 DESKTOP */
.sec1 .left .pop{
  position: relative;
  overflow: hidden;
  height: calc((61) / 1080 * 100vh);
  margin-top: calc(8 / 1080 * 100vh);
  margin-bottom: calc(21 / 1080 * 100vh);
}
.sec1 .slogan .pop{
  position: relative;
  overflow: hidden;
  height: calc(111.5 / 1080 * 100vh);
  margin-top: 0;
  margin-bottom: 0;
}

.browser {
  position: relative;
  overflow: hidden;
  height: calc(85.9 / 1080 * 100vh);
}
.sec1 form.searchbar {
  position: absolute;
  top:100%;
}
.panel.sec1 .left{
  display: flex;
  height: 100%;
  width: calc(640 / 1920 * 100%) ;
  background:#161633;
  align-items: flex-end;
  justify-content: center;
}

.panel.sec1 .left .caption{
  width: calc(550 / 1080 * 100vh);
  margin-bottom: calc(64 / 1080 * 100vh);
}
.panel.sec1 h1{
  font-family: 'Work Sans';
font-style: normal;
font-weight: 800;
font-size: calc(112 / 1080 *100vh);
line-height: 90%;
color: #CE0058;
text-align: left;
position: absolute;
top:100%;
}

.panel.sec1 span{
  font-family: 'Work Sans';
font-style: normal;
font-weight: 800;
font-size: calc(112 / 1080 *100vh);
line-height: 90%;
color: #00B2E3;
}
.panel.sec1 p{
  font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(50 / 1080 * 100vh);
line-height: calc(61 / 1080 * 100vh);
color: #FFFFFF;
text-align: left;
position: absolute;
top:100%;
}
.panel.sec1 .content{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.panel.sec1 .right{
  display: flex;
  height: 100%;
  width: calc(1280 / 1920 * 100%) ;
  align-items: flex-end;
  justify-content: flex-end;
}
.panel.sec1 .right .caption {
  margin-bottom: calc(58 / 1080 * 100vh);
  margin-right: calc(64 / 1920 * 100vw);
  width: calc(884 / 1080 * 100vh);
}
.panel.sec1 .right h2{
  font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(50 / 1080 * 100vh);
line-height: calc(61 / 1080 * 100vh);
text-align: right;
color: #FFFFFF;
position: absolute;
z-index: 2;
top:100%;
}
.panel.sec1 .right .pop{
  position: relative;
  height: calc(61 / 1080 * 100vh);
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}
.panel.sec1 .right .pop.rd{
  margin-bottom: calc(25 / 1080 * 100vh);
}
.panel.sec1 .right .pop.dir{
  margin-bottom: 0;
  height: calc(29/ 1080 * 100vh);
}
.panel.sec1 .right h2.st:before {
  content: "";
  display: block;
  width: calc(256 / 1080 * 100vh);
  height: calc(24 / 1080 * 100vh);
  background: #4BB1E0;
  left: 45.8%;
  top: 51.5%;
  position: absolute;
  z-index: -1;
}
.panel.sec1 .right h2.nd:before {
  content: "";
  display: block;
  width: calc(305 / 1080 * 100vh);
  height: calc(24 / 1080 * 100vh);
  background: #4BB1E0;
  left: 62.3%;
  top: 51.5%;
  position: absolute;
  z-index: -1;
}

.panel.sec1 .right h3{
  font-family:'Montserrat';
  font-style: italic;
  font-weight: 300;
  font-size: calc(24 / 1080 * 100vh);
  line-height: calc(29 / 1080 * 100vh);
  text-align: right;
  position: absolute;
  top:100%;
  color: #FFFFFF;
}

.busqueda form {
  padding: 0;
  background: none;
  position: absolute;
  top: 0vw;
}
form.searchbar input[type=text] {
  font-family: 'Montserrat', sans-serif;
  color: #CE0058;
  padding:0;
  font-size: 2.083vw;
  border: 2px solid #CE0058;
  float: left;
  width: calc(368 / 1080 * 100vh);
  height: calc(85.9 / 1080 * 100vh - 4px);
  background: #161633;
  border-radius: 5.32vh 0px 0px 5.32vh;
  text-align: center;
}
form.searchbar button {
  float: left;
  width: calc(91.28 / 1080 * 100vh);
  background: #CE0058;
  color: white;
  font-size: 17px;
  border: 0px;
  border-left: none;
  cursor: pointer;
  height: calc(85.9 / 1080 * 100vh);
  border-radius: 0px     5.32vh      5.32vh           0;
}
.fa{
  font-size: calc(28 / 1080 *100vh) !important;
}
::placeholder{
  color: #CE0058;
  font-style:italic;
  font-size: calc(40 / 1080 * 100vh);
line-height: calc(49 / 1080 * 100vh);
}


/* SECCION 2 DESKTOP */
.panel.sec2 .upper .pop {
  height: calc(108 / 1080 * 100vh);
  width: calc(752.33 / 1080 * 100vh);
  overflow: hidden;
  position: relative;
}
.panel.sec2 .lower .pop{
  height: calc(59 / 1080 * 100vh);
  overflow: hidden;
  position: relative;
}
.panel.sec2 .lower .pop.ruta{
  margin-top: calc(21 / 1080 * 100vh);
}
.panel.sec2 .lower .pop.ciudad {
  height: calc(39 / 1080 * 100vh);
  margin-top: calc(20 / 1080 * 100vh);
  display: flex;
  margin-bottom: calc(134 / 1080 * 100vh);
  justify-content: flex-end;
}
.panel.sec2 .lower .pop.conversemos{
  height: calc(29 / 1080 * 100vh);
  
}
.panel.sec2 .content{
  display: flex;
  height: 100%;
  width: 100vw;
  flex-direction: row;
}
.panel.sec2 .left{
  width: calc(1088 / 1920 * 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.panel.sec2 .left .upper {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
}
.panel.sec2 .upper h1{
  font-family: 'Work Sans';
font-style: normal;
font-weight: 800;
color:#CE0058;
  font-size: calc(120 / 1080 * 100vh);
  line-height: 90%;
  padding-left: calc(56 / 1920 * 100vw);
  position: absolute;
  top:100%;
}
.panel.sec2 span{
  color: #00B2E3;
  font-size: calc(120 / 1080 * 100vh);
line-height: 90%;
}
.panel.sec2 .left .lower {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel.sec2 .caption{
  width: calc(920 / 1080 * 100vh);
  display: flex;
}
.panel.sec2 h2{
  font-family:'Montserrat';
font-style: normal;
font-weight: 500;
font-size: calc(48 / 1080 * 100vh);
line-height: calc(59 / 1080 * 100vh);
color: #FFFFFF;
text-align: left;
position: absolute;
top:100%;
}

.panel.sec2 .pop.ruta h2:before {
  content: "";
  display: block;
  width: calc(451.8 / 1080 * 100vh);
  height: calc(24.13 / 1080 * 100vh);
  background: #4BB1E0;
  left: 0;
  top: 59.5%;
  position: absolute;
  z-index: -1;
}

.panel.sec2 h4{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: calc(32 / 1080 * 100vh);
  line-height: calc(39 / 1080 * 100vh);
  color: #FFFFFF;
  text-align: right;
  position: absolute;
  top:100%;
}
.panel.sec2 h3{
  font-family:'Montserrat';
  font-style: italic;
  font-weight: normal;
  font-size: calc(24 / 1080 * 100vh);
  line-height: calc(29 / 1080 * 100vh);
  color: #FFFFFF;
  text-align: left;
  position: absolute;
  top:100%;
}
.panel.sec2 h4::before {
  content: "";
  display: block;
  width: calc(31 / 1080 * 100vh);
  height: calc(31 / 1080 * 100vh);
  background: url(../img/mouse-pointer.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  left: calc(-33.94 / 1080 * 100vh);
  top: 12.5%;
  position: absolute;
  z-index: -1;
  background-position: center;
}
/* SECCION 2 FORMULARIO DESKTOP */
.sec2 .right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  padding-right: calc(64 / 1080 * 100vh);
}
.sec2 .cuadro-formulario{
  margin-top: calc(44 / 1080 * 100vh);
  width: calc((632) / 1080 * 100vh);
  height: calc((720) / 1080 * 100vh);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top:0;
  right:0;
  overflow: hidden;
}
.cuadro-formulario {
  position: absolute;
  right: 10%;
  top: 34.5%;
  height: 30%;
  width: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec2 .form {
  width: calc((632 - 130) / 1080 * 100vh);
  height: calc((720 - 130) / 1080 * 100vh);
  margin: auto;
  font-family: 'Montserrat';
  background: #161633;
  border-radius: 20px;
  padding: calc(65 / 1080 * 100vh);
  position: absolute;
  top: -100%;
  left: 0;
}

.form {
  width: calc((632 - 130) / 1080 * 100vh);
  height: calc((720 - 130) / 1080 * 100vh);
  margin: auto;
  font-family: var(--fuente_secundaria);
  background: #161633;
  border-radius: 20px;
  padding: calc(65 / 1080 * 100vh);
  position: absolute;
  top: 0%;
  left: 0;
}
.form h1 {
  font-family: 
  Montserrat;
  font-weight: 800;
  font-size: calc(56 / 1080 * 100vh);
  line-height: 100%;
  width: calc(491 / 1080 * 100vh);
  text-align: center;
  color: #FFFFFF;

}
.form p {font-family:'Montserrat';
  font-style: normal;
font-weight: normal;
font-size: calc(24 / 1080 * 100vh);
line-height:calc(29 / 1080 * 100vh);
color: #FFFFFF;
margin-top: calc(14 / 1080 * 100vh);
margin-bottom: calc(64 / 1080 * 100vh);
text-align: center;
}
.form .grupo {
  position: relative;
  margin-bottom:calc(29 / 1080 * 100vh);
}
.grupo input {
  background: none;
  font-size: 1.042vw;
  padding:0;
  display: block;
  width: 100%;
  height: calc(35 / 1080 * 100vh);
  border: none;
  border-bottom: 1px solid #CE0058;
  color: var(--color_secundario);
}
.grupo.collect{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: calc(41 / 1080 * 100vh);
}
.grupo.collect input {
  background: none;
  font-size: 1.042vw;
  padding: 0;
  display: block;
  margin-right: -5.76%;
  width: 46.62%;
  height: calc(35 / 1080 * 100vh);
  border: none;
  border-bottom: 1px solid #CE0058;
}
.grupo label {
  font-size: 16px;
  position: absolute;
  left: 0.260vw;
  top: 0.521vw;
  color: #c6c6c6;
  opacity: .6;
  transition: .3s ease all;
  pointer-events: none;
}
.form button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border: none;
  height:calc(72 / 1080 * 100vh);
  width: calc(368 / 1080 * 100vh);
  border-radius: 50px;
  background-color: #CE0058;
  transition: 1s ease;
  margin-bottom: calc(16 / 1080 * 100vh);
}
.form button a{
  font-size: calc(32 / 1080 * 100vh);
  line-height: calc(39 / 1080 * 100vh);
  COLOR: #fff;
  font-weight: 400;
  font-family: 'Montserrat';
}

.form input::placeholder{
  
font-family: 'Montserrat';
  color: #9E9E9E;
  font-style:normal;
  font-size: calc(20 / 1080 * 100vh);
line-height: calc(24 / 1080 * 100vh);
}

.form a{

  font-family: 'Montserrat';
font-style: normal;
font-weight: normal;
font-size: calc(16 / 1080 * 100vh);
line-height: calc(20 / 1080 * 100vh);
text-align: center;
color: #FFFFFF;
}
.politicas {
  display: flex;
  justify-content: center;
}

/* SECCION 3 DESKTOP */
.sec3 .left{
  width: calc(1280 / 1920 * 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sec3 img {
  height: auto;
  width: calc(706 / 1920 * 100vw);
}
.sec3 .left .upper, .sec3 .left .lower{
  display: flex;
  height: 50%;
  align-items: flex-end;
}
.sec3 .right{
  width: calc(640 / 1920 * 100vw);
  background: #161633;
  height: 100%;
}
.sec3 .left .images {
  display: flex;
  align-items: flex-end;
  height: 100%;

}
.sec3 .left .upper .images{
  overflow: hidden;
}

.sec3 .left .upper .images svg {
  height: calc(237 / 1920 * 100vw);
  margin-bottom: calc(-12 / 1920 * 100vw);
}

.sec3 .left .lower .images {
  display: flex;
  align-items: flex-start;
  height: calc(100% - (126 / 1080 * 100vh));
  padding-top: calc(126 / 1080 * 100vh);

}
.sec3 .right {
  display: flex;
  justify-content: center;
  height: 100%;
}
.sec3 .right .caption {
  width: calc(503 / 1920 * 100vw);
  display: flex;
  /* justify-content: center; */
  /* align-items: flex-start; */
  text-align: left;
  height:calc((100%) - 207 / 1080 * 100vh);
  margin-top: calc(207 / 1080 * 100vh);
}
.sec3 .right h1{
  font-size: calc(120 / 1080 * 100vh);
line-height: 90%;
font-family: 'Work Sans';
font-style: normal;
font-weight: 800;
color: #CE0058;
}
.sec3 .starwars {
  margin-top: calc(46 / 1080 * 100vh);
  position: relative;
  overflow-y: scroll;
  display: flex;
  height: calc(470 / 1080 * 100vh);
  flex-direction: column; 
}

.sec3 .right p{

  font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: calc(28 / 1080 * 100vh);
line-height: 150%;
color: #FFFFFF;
position: inherit;
margin-bottom: calc(15 / 1080 * 100vh);
}


/* SECCION 4 DESKTOP */
.panel.sec4{
  background:url(../img/envie-desktop.jpg);
  background-position: center;
  background-repeat: none;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start; 
}
.panel.sec4 h2{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-size: calc(50 / 1080 * 100vh);
  line-height: 90%;
  color: #00A6DD;
  text-align: left;
}
.panel.sec4 h1{
  font-family: Work Sans;
font-style: normal;
font-weight: 800;
font-size: calc(120 / 1080 * 100vh);
line-height: 90%;
color: #CE0058;
}
.panel.sec4 .caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: calc(168 / 1920 * 100vw);
}
.panel.sec4 button{
  font-family: 'Montserrat';
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  height:calc(72 / 1080 * 100vh);
  width: calc(368 / 1080 * 100vh);
  border-radius: 50px;
  background-color: #CE0058;
  transition: 0.5s ease;
  margin-bottom: calc(73 / 1080 * 100vh);
  margin-top: calc(23 / 1080 * 100vh );
  color:white;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  font-size: calc(32 / 1080 * 100vh);
  line-height: calc(39 / 1080 * 100vh);
}
.panel.sec4 button:hover{
  background-color: #00A6DD;
  transition: 0.5s ease;
 }
.panel.sec5 {
  background: url(../img/DSC03064.png);
  width: 94.5vw;
  position: relative;
}
.contact.active {
  position: fixed;
  top: 0;
  left: calc(2/3 * 100vw);
  height: 100vh;
  width: 100vw;
  z-index: 90;
  background: NONE;
  transition: 0.5s;
}
.contact{
  position: fixed;
  top:0;
  left: calc(3/3 * 100vw);
  height:100vh;
  width:100vw;  
  z-index: 90;
  background: NONE;
  transition: 0.5s;
}
.contact .caption {
  position: inherit;
  height: 100%;
  width: calc(1/3 * 100vw);
  background: #161633;
}
.contact .cuadro-formulario {
  position: inherit;
  right: inherit;
  top: inherit;
  height: 100%;
  width: 33.3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #161633;
  flex-direction: column;
}
.contact .form {
  padding:0;
  top: 25%;
  height: 100%;
  left:calc(8 / 1080 * 100vh);
  position: inherit;
}
.contact .social_button{
  margin-top: calc(122 / 1080 * 100vh);
  justify-content: center;
  padding-left: 0; 
}

.social_button{
  width: calc((640 - 48) / 1920 * 100vw);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: calc(48 / 1080 * 100vh);
}
.social_button div{
  margin-right: calc(19.75 / 1080 *100vh);
}
.social_button svg{
  height: calc(24.79 / 1080 * 100vh);
  width: auto;
}
.social_button svg path{
  fill:white;
}


@media (min-width: 280px) and (max-width: 768px) and (orientation: portrait) {
  .container {
    height: auto;
    flex-wrap: wrap;
    width: 100vw;
}
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(136 / 1080 * 100vh);
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 120;
  background: white;
  border: solid 1px #CE0058;
}
.desktop{
  display: none !important;
}
.mobile{
  display: flex !important;
}
.panel {
  height: 100vh;
}
.contact {
  position: fixed;
  top: 0;
  left: calc(5/3 * 100vw);
  height: 100vh;
  width: 100vw;
  z-index: 90;
  background: NONE;
  transition: 0.5s;
}

/* SECCION 1 */
.panel.sec1 {
  height: calc(100vh + (0.5472 * 100vh));
}

.panel.sec1 .content{
  flex-direction: column;
}

.sec1 .left .pop{
  height: calc((29) / 375 * 100vw);
  margin-top: calc(18 / 667 * 100vh);
  margin-bottom: calc(19 / 667 * 100vh);
}
.sec1 .slogan .pop{
  height: calc(65.14 / 375 * 100vw);
  margin-top: 0;
  margin-bottom: 0;
}

.browser {
  height: calc(66.64 / 667 * 100vh) !important;
}
.sec1 form.searchbar {
  position: absolute;
  top:0%;
}
.panel.sec1 .left{
  height: 100vh;
  width: 100vw;
  background:linear-gradient(to bottom, white calc(590 / 812 * 100vh), #CE0058 calc(222  / 812 * 100vh));;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: -1px;
}

.panel.sec1 .left .caption{
  width: calc(334 / 375 * 100vw);
  margin-bottom: calc(50 / 667 * 100vh);
}
.panel.sec1 h1{
font-size: calc(68 / 375 *100vw);
top:0;
}

.panel.sec1 span{
font-size: calc(68 / 375 *100vw);
}
.panel.sec1 p{
font-size: calc(24 / 375 * 100vw);
line-height: calc(29 / 375 * 100vw);
top:0;
}

.panel.sec1 .right{
  height: calc(0.5472 * 100vh);
  width: 100vw;
  background-color: #CE0058;
  justify-content: flex-end;
  align-items: center;
}
.panel.sec1 .right .caption {
  margin-bottom: 0;
  margin-right: 0;
  width: calc(328 * 375 * 100vw);
  align-items: center;
  display: flex;
}
.panel.sec1 .right h2{
  font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: calc(32 / 375 * 100vw);
line-height: calc(39 / 375 * 100vw);
text-align: right;
color: #FFFFFF;
position: absolute;
z-index: 2;
top:0%;
}
.panel.sec1 .right .pop {
  position: relative;
  height: calc(22 / 375 * 100vh);
  width: calc(328 / 375 * 100vw);
  justify-content: center;
  overflow: hidden;
}
.panel.sec1 .right .pop.rd{
  margin-bottom: 0;
}
.panel.sec1 .right .pop.dir{
  margin-bottom: 0;
  height: calc(29/ 1080 * 100vh);
}
.panel.sec1 .right h2.st:before {
  width: calc(161 / 375 * 100vw);
  height: calc(15 / 375* 100vw);
    left: -0%;
  top: 55.5%;
}
.panel.sec1 .right h2.nd:before {
  width: calc(192 / 375 * 100vw);
  height: calc(15 / 375* 100vw);
  left: 0;
  top: 52%;
}

.panel.sec1 .right h3{
  font-family:'Montserrat';
  font-style: italic;
  font-weight: 300;
  font-size: calc(24 / 1080 * 100vh);
  line-height: calc(29 / 1080 * 100vh);
  text-align: right;
  position: absolute;
  top:0%;
  color: #FFFFFF;
}

.busqueda form {
  padding: 0;
  background: none;
  position: absolute;
  top: 0vw;
}
form.searchbar input[type=text]::placeholder{
  color: #161633;
  font-style:italic;
  font-size:calc(20 / 375 * 100vw);
line-height: calc(24 / 375 * 100vw);
}
form.searchbar input[type=text] {
  color: #161633;
  font-size: calc(20 / 375 * 100vw);
  border: 2px solid #161633;
  width: calc(239 / 375 * 100vw);
  height: calc(57.07 / 375 * 100vw - 4px);
  background: #CE0058;
}
form.searchbar button {
  float: left;
  width: calc(91.28 / 375 * 100vw);
  background: #161633;
  color: #CE0058;
  font-size: 17px;
  border: 0px;
  border-left: none;
  cursor: pointer;
  height: calc(57.07 / 375 * 100vw);
  border-radius: 0px     5.32vh      5.32vh           0;
}
.fa{
  font-size: calc(28 / 375 *100vw) !important;
}
::placeholder{
  color: #161633;
  font-style:italic;
  font-size:calc(12 / 375 * 100vw);
line-height: calc(15 / 375 * 100vw);
}

/* SECCION 2 MOBILE */
.panel.sec2 {
  background-color: white;
  height: auto;
}
.panel.sec2 .upper .pop {
  height: calc(68.5 / 375 * 100vw);
  width: 100vw;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
}
.pop.paque {
  margin-top: calc(23 / 375  * 100vw);
  height: calc(57 / 375 * 100vw) !important;
}
.pop.paque:nth-child(2) {
  margin-top: 0;
}
.pop.paque h2{
  color:#CE0058 !important;
  font-size: calc(24 / 375 * 100vw) !important;
line-height: calc(29 / 375 * 100vw) !important;
}
.panel.sec2 .lower .pop{
  height: calc(51 / 375 * 100vw);
  overflow: hidden;
  position: relative;
  justify-content: center;
  display: flex;
  height: calc(29 / 375 * 100vw);
  margin-left: 0;
}
.panel.sec2 .lower .pop.ruta{

  margin-top: calc(19 / 375 * 100vw);
}
.panel.sec2 .lower .pop.ciudad {
  height: calc(44 / 375 * 100vw);
  margin-top: calc(19 / 375 * 100vw);
  display: flex;
  margin-bottom: calc(13 / 375 * 100vw);
  justify-content: center;
}
.panel.sec2 .lower .pop.conversemos {
  height: calc(40/ 375 * 100vw);
  margin-bottom: calc(24 / 375 * 100vw);
}
.panel.sec2 .content{
  display: flex;
  height: auto;
  width: 100vw;
  flex-direction: column;
  align-items: center;
}
.panel.sec2 .left {
  width: 100vw;
  height: auto;
  display: flex;
  flex-direction: column;
}
.panel.sec2 .left .upper {
  width: 100%;
  height: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: calc(54 / 375 * 100vw);
}
.panel.sec2 .upper h1{
  font-size: calc(68 / 375 * 100vw);
  line-height: 90%;
  padding-left: 0;
  position: absolute;
  top:0%;
  width: calc(330 / 375 * 100vw);
  text-align: left;
}
.panel.sec2 span{
  color: #00B2E3;
  font-size: calc(68 / 375 * 100vw);
line-height: 90%;
}
.liner_rutes{
  display: flex;
  width: 100vw;
  justify-content: flex-end;
}
.panel.sec2 .rutes {
  background: #CE0058;
  margin-bottom: calc(32 / 375 * 100vw);
  width: calc(311 / 375 * 100vw);
  margin-top: calc(32 / 375 * 100vw);
}
.panel.sec2 .left .lower {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel.sec2 .caption{
  width: calc(920 / 1080 * 100vh);
  display: flex;
}
.panel.sec2 h2{
  font-family:'Montserrat';
font-style: normal;
font-weight: 500;
font-size: calc(24 / 375 * 100vw);
line-height: calc(29 / 375 * 100vw);
color: white;
text-align: left;
position: inherit;
top:0%;
left: 0;
width: calc(234 / 375 * 100vw);
z-index: 60;
}

.panel.sec2 .pop.ruta h2:before {
  content: "";
  display: block;
  width: calc(219/ 375 * 100vw);
  height: calc(15 / 375 * 100vw);
  background: #4BB1E0;
  left: 0px;
  top: 53%;
  position: absolute;
  z-index: -1;
}
.panel.sec2 h4 {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: calc(16 / 375 * 100vw);
  line-height: calc(24 / 375 * 100vw);
  width: calc((234 - 41)  / 375 * 100vw);
  color: #FFFFFF;
  text-align: left;
  position: inherit;
  top: inherit;
  left: inherit;
  margin-left: calc(41 / 375 * 100vw);
}
.panel.sec2 h3 {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: normal;
  font-size: calc(16 / 375 * 100vw);
  line-height: calc(20 / 375 * 100vw);
  color: #FFFFFF;
  text-align: left;
  position: inherit;
  top: 0%;
  width: calc(234/ 375 * 100vw);
}
.panel.sec2 h4::before {
  content: "";
  display: block;
  width: calc(31 / 1080 * 100vh);
  height: calc(31 / 1080 * 100vh);
  background: url(../img/mouse-pointer.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  left: calc(-39 / 375 * 100vw);
  top: 12.5%;
  position: absolute;
  z-index: 0;
  background-position: center;
}
/* SECCION 2 FORMULARIO MOBILE */
.sec2 .right {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
  padding-right: 0;
  background: #161633;
}
.sec2 .cuadro-formulario {
  margin-top: 0;
  width: 100vw;
  height: calc((720) / 1080 * 100vh);
  display: flex;
  justify-content: center;
  align-items: center;
  position: inherit;
  height: auto;
  top: 0;
  right: 0;
  overflow: hidden;
}
.cuadro-formulario {
  position: absolute;
  right: 10%;
  top: 34.5%;
  height: 30%;
  width: 30vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec2 .form {
  width: calc(100vw - (74 / 375 * 100vw));
  height: auto;
  margin: auto;
  background: #161633;
  border-radius: 0px;
  padding: calc(37 / 375 * 100vw);
  padding-top: calc(47 / 375 * 100vw);
  position: inherit;
  top: 0;
  left: 0;
  margin-bottom: -3px;
}

.form {
  width: calc((632 - 130) / 375 * 100vw);
  height: calc((720 - 130) / 375 * 100vw);
  margin: auto;
  font-family: var(--fuente_secundaria);
  background: #161633;
  border-radius: 20px;
  padding: calc(65 / 375 * 100vw);
  position: absolute;
  top: 0%;
  left: 0;
}
.form h1 {
  font-weight: 800;
  font-size: calc(32 / 375 * 100vw);
  line-height: 100%;
  width: calc(248 / 375 * 100vw);
  text-align: center;
  margin: auto;
  color: #FFFFFF;

}
.form p {font-family:'Montserrat';
  font-style: normal;
font-weight: normal;
font-size: calc(16 / 375 * 100vw);
line-height:calc(20 / 375 * 100vw);
color: #FFFFFF;
margin-top: calc(14 / 375 * 100vw);
margin-bottom: calc(64 / 375 * 100vw);
text-align: center;
}
.form .grupo {
  position: relative;
  margin-bottom:calc(29 / 375 * 100vw);
}
.grupo input {
  background: none;
  font-size: calc(12 / 375 * 100vw);
  padding:0;
  display: block;
  width: 100%;
  height: calc(35 / 375 * 100vw);
  border: none;
  border-bottom: 1px solid #CE0058;
  color: #CE0058;
}
.grupo.collect{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: calc(41 / 375 * 100vw);
}
.grupo.collect input {
  background: none;
  font-size: calc(12 / 375 * 100vw);
  padding: 0;
  display: block;
  margin-right: -5.76%;
  width: 46.62%;
  height: calc(35 / 375 * 100vw);
  border: none;
  border-bottom: 1px solid #CE0058;
}
.grupo label {
  font-size: 16px;
  position: absolute;
  left: 0.260vw;
  top: 0.521vw;
  color: #c6c6c6;
  opacity: .6;
  transition: .3s ease all;
  pointer-events: none;
}
.form button {
  height:calc(41 / 375 * 100vw);
  width: calc(268 / 375 * 100vw);
  transition: 1s ease;
  margin-bottom: calc(7 / 375 * 100vw);
}
.form button a{
  font-size: calc(20 / 375 * 100vw);
  line-height: calc(24 / 375 * 100vw);
}

.form input::placeholder{
  font-size: calc(12 / 375 * 100vw);
  line-height: calc(16 / 375 * 100vw);
}

.form a{
font-size: calc(12 / 375 * 100vw);
line-height: calc(15 / 375 * 100vw);
}
.politicas {
  display: flex;
  justify-content: center;
  
}
/* SECCION 3 MOBILE */
.sec3.panel {
  height: auto;
  flex-direction: column-reverse;
}
.sec3 .left{
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.sec3 img {
  height: auto;
  width: calc(706 / 1920 * 100vw);
}
.sec3 .left .upper, .sec3 .left .lower {
  height: 100%;
}
.sec3 .right{
  width: calc(640 / 1920 * 100vw);
  background: #161633;
  height: 100%;
}
.sec3 .left .images {
  height: auto;
  padding-top: calc(23 / 375 * 100vw);
}
.sec3 .left .upper .images{
  overflow: hidden;
  background: #161633;
  width: 100vw;
}

.sec3 .left .upper .images svg {
  width: 100%;
  height: auto;
  margin-bottom: calc(-12 / 1920 * 100vw);
}

.sec3 .left .lower .images {
  display: flex;
  align-items: flex-start;
  height: calc(100% - (126 / 1080 * 100vh));
  padding-top: calc(126 / 1080 * 100vh);

}
.sec3 .right {
  display: flex;
  justify-content: center;
  height: auto;
  width: 100vw;
  margin-bottom: -1px;
  margin-top: -1px;
}
.sec3 .right .caption {
  width: calc(328 / 375 * 100vw);
  text-align: left;
  height:auto;
  margin-top: calc(92 / 375 * 100vw);
}
.sec3 .right h1{
  font-size: calc(120 / 1080 * 100vh);
line-height: 90%;
font-family: 'Work Sans';
font-style: normal;
font-weight: 800;
color: #CE0058;
}
.sec3 .starwars {
  margin-top: calc(50 / 375 * 100vw);
  position: inherit;
  overflow-y: inherit;
  height: auto;
}

.sec3 .right p {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: calc(16 / 375 * 100vw);
  line-height: 150%;
  color: #FFFFFF;
  position: inherit;
  margin-bottom: calc(20 / 375 * 100vw);
}

/* SECCION 4 MOBILE */
.panel.sec4 {
  background: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  height: auto;
  flex-direction: column;
}
.panel.sec4 .care {
  height: auto;
  background: #CE0058;
  width: 100vw;
  flex-direction: column;
  align-items: center;
  display: flex;
}
.panel.sec4 .kid {
  height: auto;
  background: url(../img/envie-mobile.jpg);
  background-size: cover;
  /* padding-bottom: calc(100vw * 1333 / 2000); */
  width: 100vw;
  height: calc(100vw * 2000/ 1333);
  flex-direction: column;
  align-items: center;
  display: flex;
}
.panel.sec4 h2 {
  font-size: calc(20 / 375 * 100vw);
  color: white;
  width: calc(328 / 375 * 100vw);
  text-align: left;
}
.panel.sec4 h1{
font-size: calc(68 / 375 * 100vw);
color: #161633;
width: calc(328 / 375 * 100vw);
text-align: left;
}
.panel.sec4 h1:nth-child(1){
color: white;
}
.panel.sec4 .caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
  padding-top: calc(52 / 375 * 100vw);
  background: #CE0058;
  margin-bottom: -11px;
  margin-top: -1px;
}
.panel.sec4 button{
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  height:calc(72 / 1080 * 100vh);
  width: calc(368 / 1080 * 100vh);
  border-radius: 50px;
  background-color: #CE0058;
  transition: 1s ease;
  margin-bottom: calc(73 / 1080 * 100vh);
  margin-top: calc(23 / 1080 * 100vh );
  
}.panel.sec4 button a{
  color:white;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: normal;
  font-size: calc(32 / 1080 * 100vh);
  line-height: calc(39 / 1080 * 100vh);
  }
.panel.sec5 {
  background: url(../img/DSC03064.png);
  width: 94.5vw;
  position: relative;
}
.contact.active {
  position: fixed;
  top: 0;
  left: calc(2/3 * 100vw);
  height: 100vh;
  width: 100vw;
  z-index: 90;
  background: NONE;
  transition: 0.5s;
}
.contact {
  position: fixed;
  top: 0;
  left: 300vw;
  height: 100vh;
  width: 100vw;
  z-index: 90;
  background: NONE;
  transition: 0.5s;
}
.contact .caption {
  position: inherit;
  height: 100%;
  width: calc(1/3 * 100vw);
  background: #161633;
}
.contact .cuadro-formulario {
  position: inherit;
  right: inherit;
  top: inherit;
  height: 100%;
  width: 33.3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #161633;
  flex-direction: column;
}
.contact .form {
  padding:0;
  top: 25%;
  height: 100%;
  left:calc(8 / 1080 * 100vh);
  position: inherit;
}
.contact .social_button{
  margin-top: calc(122 / 1080 * 100vh);
  justify-content: center;
  padding-left: 0; 
}

.social_button{
  width: calc((640 - 48) / 1920 * 100vw);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: calc(48 / 1080 * 100vh);
}
.social_button div{
  margin-right: calc(19.75 / 1080 *100vh);
}
.social_button svg{
  height: calc(24.79 / 1080 * 100vh);
  width: auto;
}
.social_button svg path{
  fill:white;
}

.soc {
  height: calc(85 / 375 * 100vw);
  width: 100vw;
  background: #161633;
  display: flex;
  justify-content: center;
  align-items: center;
}
.soc .social_button {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 0;
}
.clickeable{
  width: calc(328 / 375 * 100vw);
  display: flex;
}

/* MENU DESPLEGABLE */
.fixed_bg{
  display: none;
}
#container.active{
  position: absolute;
  right: -100vw;
  transition: 0.5s;
}
#container{
  position: absolute;
  right: 0;
  transition: 0.5s;
  overflow:hidden; 
}
.logo.mobile{
  z-index: 90;
  padding-left: calc(23 / 375 * 100vw );
}
#burger {
  z-index: 90;
  position: absolute;
  right: calc(23 / 375 * 100vw);
}
#burger_off{
  display: none;
}
#burger_off.active{
  display: flex;
}
#burger_on.active{
  display: none;
}
#desplegable.active{
  width: 100vw;
  height: 100vh;
  background: #161633;
  position: absolute;
  top:0;
  right: 0;
  transition: 0.5s;
}
#desplegable {
  width: 100vw;
  height: 100vh;
  background: #161633;
  position: absolute;
  top: 0;
  right: 100vw;
  display: flex;
  align-items: flex-end;
  transition: 0.5s;
}
#hyper {
  width: 100vw;
  display: flex;
  flex-direction: column;
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
  align-items: center;
  margin-bottom: calc(31 / 667 * 100vh);
}
#hyper a{
  color:white;
  font-size: calc(28 / 375 * 100vw);
  line-height: calc(34 / 375 * 100vw);
  margin-bottom: calc(32 / 667 * 100vh);
  margin-left: 0;
}
#hyper button {
  margin-left: 0;
  width: calc(164 / 375 *100vw);
  height: calc(55 / 375 *100vw);
   font-size: calc(28 / 375 * 100vw);
  line-height: calc(34 / 375 * 100vw);
  
}
#hyper p{
  font-family: 'Montserrat';
font-style: italic;
font-weight: 300;
font-size: calc(16 / 375 * 100vw);
line-height: calc(20  / 375 * 100vw);
text-align: center;
color:white;
width: calc(201 / 375 * 100vw);
margin-top: calc(144 / 667 * 100vh);
}
}