/* RESPONSIVE PAGE PORTRAIT OPTION */
@media screen and (max-width: 1100px) and (max-height:1400px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 31.2vh;
}
.modalProgreso .validacionSection .progresoBox ,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 195px;
}
.modalProgreso .exitosoSection .progresoStars {
  max-width: 280px;
  bottom: 150px;
}
/*  */

/* INTRO */
#intro {
  height: 60%;
}
.item {
  height: 60vh;
}
/*  */
}

@media screen and (max-width: 800px) and (max-height:1100px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 37.5vh;
}
.modalProgreso .validacionSection .progresoBox ,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 175px;
  bottom: 5px;
}

.modalProgreso .exitosoSection .progresoStars {
  max-width: 250px;
  bottom: 125px;
}
/*  */

/* INTRO */
#intro {
  height: 85%;
}
.item {
  height: 85vh;
}
.item .avion {
  top: 15vh;
}
/*  */
}

@media screen and (max-width: 600px) and (max-height:900px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 42vh;
}
.modalProgreso .validacionSection .progresoBox ,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 140px;
}
.modalProgreso .exitosoSection .progresoStars {
  max-width: 220px;
  bottom: 100px;
}
/*  */

/* INTRO */
#intro {
  height: 85%;
}
.item {
  height: 85vh;
}
.item .carro {
  top: 120px;
}
.item .avion {
  top: 90px;
}
#intro .nubesMain .nube01 {
  height: 6.9vh;
  top: 100px;
}
#intro .nubesMain .nube02 {
  height: 6.5vh;
  top: 190px;
}
#intro .nubesMain .nube03 {
  height: 6.9vh;
  bottom: 200px;
}
.backgroundYellow .itemLegend ,
.backgroundBlue .itemLegend ,
.backgroundGreen .itemLegend {
  bottom: 15vh;
}

#intro .enviarLink {
  padding: 0 2rem;
  font-size: 16px;
  bottom: 33vh;
}
/*  */
}

@media screen and (max-width: 600px) and (max-height:800px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 40vh;
}
.modalProgreso .validacionSection .progresoBox ,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 100px;
}
.modalProgreso .exitosoSection .progresoStars {
  max-width: 190px;
  bottom: 85px;
}
/*  */

/* INTRO */
.backgroundYellow .itemLegend ,
.backgroundBlue .itemLegend ,
.backgroundGreen .itemLegend {
  bottom: 115px;
}
#intro .nubesMain .nube01 {
  height: 6.9vh;
  top: 100px;
}
#intro .nubesMain .nube02 {
  height: 6.5vh;
  top: 190px;
}
#intro .nubesMain .nube03 {
  height: 6.9vh;
  bottom: 200px;
}

.item .celular {
  width: 45vw!important;
  bottom: 200px;
}

.item .sombra_celular {
  width: 65vw!important;
  bottom: 195px;
  right: 10%;
}

.item .carro {
  top: 150px;
  width: 35vw!important;
}

.item .avion {
  top: 80px;
  width: 30vw!important;
}

.item .globo {
  width: 35vw!important;
  bottom: 210px;
  left: 55%;
}

.item .personaje {
  width: 30vw!important;
}

.item .sombra {
  width: 50vw!important;
}
/*  */
}

@media screen and (max-width: 600px) and (max-height:700px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 50vh;
}
/*  */
}

@media screen and (max-width: 600px) and (max-height:600px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 53vh;
}
/*  */

/* INTRO */
#intro {
  height: 93%;
}
.item {
  height: 93vh;
}
.backgroundYellow .itemLegend p, .backgroundBlue .itemLegend p, .backgroundGreen .itemLegend p {
  font-size: 14px;
}
.backgroundYellow .itemLegend ,
.backgroundBlue .itemLegend ,
.backgroundGreen .itemLegend {
  bottom: 93px;
}
#intro .owl-theme .owl-nav.disabled+.owl-dots {
  margin-top: -50px;
}
#intro .nubesMain .nube01 {
  height: 6.3vh;
  top: 85px;
}
#intro .nubesMain .nube02 {
  height: 5.9vh;
  top: 150px;
}
#intro .nubesMain .nube03 {
  height: 6.3vh;
  bottom: 185px;
}
.item .carro {
  top: 110px;
}
.item .avion {
  top: 75px;
}
/*  */
}

@media screen and (max-width: 600px) and (max-height:500px)
and (orientation:portrait)  {
/* MODAL PROGRESO */
.modalProgreso {
  height: 58vh;
}
/*  */

/* INTRO */
#intro {
  height: 100%;
}
.item {
  height: 100vh;
}
#intro .nubesMain .nube01 {
  height: 5.9vh;
  top: 75px;
}
#intro .nubesMain .nube02 {
  height: 5.4vh;
  top: 125px;
}
#intro .nubesMain .nube03 {
  height: 5.9vh;
  bottom: 165px;
}
.item .carro {
  top: 75px;
}

.item .avion {
  top:50px;
}
/*  */
}
/*  */


/* RESPONSIVE PAGE LANDSCAPE OPTION */
@media screen and (max-height:900px)
and (orientation:landscape)  {
/*  MODAL PROGRESO */
.modalRestriction {
  height: 61vh;
}
.modalProgreso .validacionSection .progresoBox {
  max-width: 225px;
}
.modalProgreso {
  height: 61vh;
}
/*  */

/* INTRO */
#intro {
  height: 100%;
}
.item {
  height: 100vh;
}

.item .celular {
  width: 25vw!important;
  right: 15%;
}

.item .sombra_celular {
  width: 35vw!important;
  right: 16%;
}

.item .carro {
  width: 20vw!important;
  top: 33vh;
  right: 5%;
}

.item .avion {
  width: 17vw!important;
  top: 18vh;
  right: 20%;
}

.item .globo {
  width: 15vw!important;
  bottom: 17vh;
  left: auto;
  right: 15%;
}

.item .personaje {
  width: 16vw!important;
  bottom: 10vh;
  right: 25%;
}

.item .sombra {
  width: 25vw!important;
  bottom: 10vh;
  right: 29%;
}

#intro .enviarLink {
  bottom: 30.5vh;
}
/*  */
}

@media screen and (max-height:800px)
and (orientation:landscape)  {
.modalRestriction {
  height: 66vh;
}
/* INTRO */
.item .celular {
  width: 20vw!important;
  right: 13%;
  bottom: 10vh;
}

.item .sombra_celular {
  width: 30vw!important;
  right: 14%;
  bottom: 10vh;
}

.item .carro {
  width: 18vw!important;
  top: 35vh;
  right: 3%;
}

.item .avion {
  width: 15vw!important;
  top: 18vh;
  right: 18%;
}

.item .globo {
  width: 13vw!important;
  bottom: 15vh;
  left: auto;
  right: 13%;
}

.item .personaje {
  width: 14vw!important;
  bottom: 10vh;
  right: 25%;
}

.item .sombra {
  width: 23vw!important;
  bottom: 10vh;
  right: 27%;
}
#intro .enviarLink {
  bottom: 32.5vh;
}
#intro .leyendaIntro {
  top: -20vh;
}

.backgroundYellow .itemLegend ,
.backgroundBlue .itemLegend ,
.backgroundGreen .itemLegend {
  bottom: 10vh;
}
/*  */
}


@media screen and (max-height:600px)
and (orientation:landscape)  {
/*  MODAL PROGRESO */
.modalProgreso {
  height: 70vh;
}
.modalProgreso .validacionSection .progresoBox,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 185px;
}
.modalProgreso .exitosoSection .progresoStars {
  max-width: 285px;
  bottom: 130px;
}
/*  */

/* INTRO */
#intro .owl-theme .owl-nav.disabled+.owl-dots {
  display: none!important;
}
.backgroundYellow .itemLegend ,
.backgroundBlue .itemLegend ,
.backgroundGreen .itemLegend {
  bottom: 93px;
}
#intro .leyendaIntro {
  top: -30px;
}
.item .celular {
  width: 25vw!important;
}
.item .sombra_celular {
  width: 40vw!important;
}
.item .carro {
  width: 25vw!important;
  right: 0;
}
.item .avion {
  width: 20vw!important;
  right: 50px;
}
#intro .nubesMain .nube01 {
  height: 10.3vh;
  top: 95px;
}
#intro .nubesMain .nube02 {
  height: 8.5vh;
  top: 165px;
}
#intro .nubesMain .nube03 {
  height: 10.3vh;
  bottom: 165px;
}
.item .globo {
  width: 16vw!important;
}
.item .personaje {
  width: 15vw!important;
}
.item .sombra {
  width: 30vw!important;
}
/*  */
}

@media screen and (max-height:500px)
and (orientation:landscape)  {
/*  MODAL PROGRESO */
.modalProgreso {
  height: 75.5vh;
}
.modalProgreso .validacionSection .progresoBox,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 133px;
}
.modalProgreso .exitosoSection .progresoStars {
  max-width: 225px;
  bottom: 100px;
}
.modalProgreso .validacionSection,
.modalProgreso .exitosoSection {
  padding: 20px 0 0 0;
}
.modalProgreso .validacionSection .modalTitle,
.modalProgreso .exitosoSection .modalTitle {
  padding: 0 0 15px 0;
}
/*  */

/* INTRO */
.backgroundYellow .itemLegend p, .backgroundBlue .itemLegend p, .backgroundGreen .itemLegend p {
  font-size: 14px;
}
.backgroundYellow .itemLegend, .backgroundBlue .itemLegend, .backgroundGreen .itemLegend {
  bottom: 70px;
}
.item .carro {
  top: 120px;
}
.item .avion {
  top: 100px;
}
.item .celular {
  width: 18vw!important;
  bottom: 45px;
}
.item .sombra_celular {
  width: 30vw!important;
  bottom: 40.5px;
}
.item .carro {
  width: 22vw!important;
}
.item .globo {
  width: 15.5vw!important;
  bottom: 66px;
}
.item .personaje {
  width: 12vw!important;
  bottom: 40px;
}
.item .sombra {
  width: 25vw!important;
  bottom: 40px;
}
/*  */
}

@media screen and (max-height:400px)
and (orientation:landscape)  {
/*  MODAL PROGRESO */
.modalProgreso {
  height: 82vh;
}
.modalProgreso .validacionSection .progresoBox,
.modalProgreso .exitosoSection .progresoBox {
  max-width: 100px;
}
.modalProgreso .exitosoSection .progresoStars {
  max-width: 240px;
  bottom: 60px;
}
.modalProgreso .validacionSection .modalTitle,
.modalProgreso .exitosoSection .modalTitle {
  padding: 0 0 20px 0;
}
/*  */

/* INTRO */
.backgroundYellow .itemLegend p, .backgroundBlue .itemLegend p, .backgroundGreen .itemLegend p {
  font-size: 13px;
}
.backgroundYellow .itemLegend, .backgroundBlue .itemLegend, .backgroundGreen .itemLegend {
  bottom: 55px;
}
#intro .leyendaIntro {
  top: -100px;
}

#intro .nubesMain .nube01 {
  height: 5.9vh;
  top: 75px;
}
#intro .nubesMain .nube02 {
  height: 5.4vh;
  top: 125px;
}
#intro .nubesMain .nube03 {
  height: 5.9vh;
  bottom: 165px;
}
.item .carro {
  top: 75px;
}
.item .avion {
  top: 65px;
}
.item .celular {
  width: 18vw!important;
  bottom: 45px;
}
.item .sombra_celular {
  width: 30vw!important;
  bottom: 40.5px;
}
.item .carro {
  width: 22vw!important;
}
.item .globo {
  width: 15.5vw!important;
  bottom: 66px;
}
.item .personaje {
  width: 12vw!important;
  bottom: 40px;
}
.item .sombra {
  width: 25vw!important;
  bottom: 40px;
}
/*  */
}
/*  */