@font-face {
    font-family: 'Helvetica';
    src: url('fuentes/Helvetica-BoldOblique.eot');
    src: url('fuentes/Helvetica-BoldOblique.eot?#iefix') format('embedded-opentype'),
        url('fuentes/Helvetica-BoldOblique.woff2') format('woff2'),
        url('fuentes/Helvetica-BoldOblique.woff') format('woff'),
        url('fuentes/Helvetica-BoldOblique.svg#Helvetica-BoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('fuentes/Helvetica-Light.eot');
    src: url('fuentes/Helvetica-Light.eot?#iefix') format('embedded-opentype'),
        url('fuentes/Helvetica-Light.woff2') format('woff2'),
        url('fuentes/Helvetica-Light.woff') format('woff'),
        url('fuentes/Helvetica-Light.svg#Helvetica-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('fuentes/Helvetica-Bold.eot');
    src: url('fuentes/Helvetica-Bold.eot?#iefix') format('embedded-opentype'),
        url('fuentes/Helvetica-Bold.woff2') format('woff2'),
        url('fuentes/Helvetica-Bold.woff') format('woff'),
        url('fuentes/Helvetica-Bold.svg#Helvetica-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('fuentes/Helvetica-LightOblique.eot');
    src: url('fuentes/Helvetica-LightOblique.eot?#iefix') format('embedded-opentype'),
        url('fuentes/Helvetica-LightOblique.woff2') format('woff2'),
        url('fuentes/Helvetica-LightOblique.woff') format('woff'),
        url('fuentes/Helvetica-LightOblique.svg#Helvetica-LightOblique') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('fuentes/Helvetica-Oblique.eot');
    src: url('fuentes/Helvetica-Oblique.eot?#iefix') format('embedded-opentype'),
        url('fuentes/Helvetica-Oblique.woff2') format('woff2'),
        url('fuentes/Helvetica-Oblique.woff') format('woff'),
        url('fuentes/Helvetica-Oblique.svg#Helvetica-Oblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica';
    src: url('fuentes/Helvetica.eot');
    src: url('fuentes/Helvetica.eot?#iefix') format('embedded-opentype'),
        url('fuentes/Helvetica.woff2') format('woff2'),
        url('fuentes/Helvetica.woff') format('woff'),
        url('fuentes/Helvetica.svg#Helvetica') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
  margin: 0;
  padding:0;
  font-family: 'Helvetica';
  height:12000px;
  overflow:hidden;
  scroll-behavior: smooth!important;
  background-color:white;
}
* {
  box-sizing: border-box;
  font-family: 'Helvetica'!important;

  /* scroll-behavior: smooth!important; */
}
html{
  background-color:white!important;;
}
.content{
  /* width: 100vw;; */
  height:100vh;
}
#go:hover{
  cursor: pointer;
}
#conocenos:hover, #gei:hover, .volver2:hover,.btn-nosotros:hover{
  opacity: .5;
  transition: opacity 1s ease-in-out;
  cursor: pointer;
}
/* #conocenos, #gei, #volver2{
  transition: opacity 1s ease-in-out;
} */
a{
  text-decoration: none!important;;
  list-style: none;
  color: inherit;
  font-size: 15px;
}
a:hover{
  text-decoration: none!important;;
  list-style: none;
  color: gray;
}
.mailinfo{
  width:500px;
  height: 500px;
  padding: 30px 30px 30px 0px;
  z-index: 64564;
}
#location:hover{
 cursor: pointer;
 opacity: .5;
 transition: opacity 1s ease-in-out;
}
@-webkit-keyframes fadeOut {
  0% {
            opacity:1;
  }
  100% {
            opacity:0;
  }
}

@keyframes fadeOut {
  0% {
            opacity:1;
  }
  100% {
            opacity:0;
  }
}
@-webkit-keyframes pulso {
  0% {
    -webkit-transform: scale();
            transform: scale();


  }
  50% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale();
            transform: scale();

  }
}

@keyframes pulso {
  0% {
    -webkit-transform: scale();

            transform: scale();

  }
  50% {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
  }
  100% {
    -webkit-transform: scale();
            transform: scale();

  }
}

/* Position text in the middle of the page/image */
.bg-logo {
  background:transparent!important;
  position: absolute;
  top: 40vh;
  z-index: 2;
  width: 20%;
  text-align: center;
  animation: pulso 2s ease-in-out infinite;
}
svg.preload{
  width: 20%;
}

#container{
  position: fixed;
  top:0;
  left: 0;
  width: 500%;
  height: 120vh;
  display: flex;
  background-size: 100% 100vh;
  /* background-image: url(img/fondo_test.png); */
  scroll-behavior: smooth!important;
}
.menu-button {
  position: fixed;
  padding: 25px;
  top: 3vh;
  left: 1vw;
  width: 50px;
  cursor: pointer;
  -webkit-transition: .3s;
  transition: .3s;
  background-image: url(recursos/menu.svg);
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-filter: drop-shadow(0px 3px 2px rgba(0,0,0, .4));
filter: drop-shadow(0px 3px 2px rgba(0,0,0, .4));
  z-index: 31231;
  /*margin: 14px;
  border-radius: 5px;*/
  opacity:0;
  transition: opacity 1s ease-in-out;

}
.menu-button.close{
  display: none;
  background-image: url(recursos/menu.svg);
  -webkit-filter: drop-shadow(0px 3px 2px rgba(0,0,0, .4));
filter: drop-shadow(0px 3px 2px rgba(0,0,0, .4));
  z-index: 31231;
  opacity:0.6!important;
}
#menu{
  box-shadow: 5px 0 15px -4px gray;

}
.menu{
  display: none;
  opacity: 0;
  width: 400px;
  position: fixed;
  height: 100vh;
  /* background-image: url(recursos/fondo-menu.svg); */
  background-color:white;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 1s ease-in-out, left 1s ease-in-out;
  z-index: 31231;
  /* box-shadow: -10px 0px 10px 1px black; */

}
.fondo1, .fondo2, .fondo3, .info, .rss{
  position: absolute;
  display: flex;
  flex-direction: row;
  bottom:0;
}
.fondo1{
  bottom:-10px;
  width: 16%;
  left: -8px;
  animation: bottom 1.2s ease-in-out;
}
.fondo2{
  margin-left: 5vw;
  width: 20%;
  animation: bottom 1.2s ease-in-out .1s;
}
.fondo3{
  margin-left: 12vw;
  width: 20%;
  animation: bottom 1.2s ease-in-out 0.2s;
}
.info{
  margin-left: 2vw;
  width: 60%;
  animation: bottom 1.5s ease-in-out 0.3s;
  bottom:9vh;
}
.rss:hover{
  opacity: .8;
  transition: opacity .2s ease-in-out;
  cursor: pointer;
}
.rss{
  width: 7%;
  margin-left: 2.5vw;
  bottom:5vh;
}
.rss.face{
  animation: bottom 2s ease-in-out 0.4s;

}
.rss.insta{
  margin-left: 6vw;
  animation: bottom 2s ease-in-out 0.5s;
}
ul.main{
  color:#8d8c80;
  font-family: helvetica;
  font-size: 20px;
  margin-top: 10vh;
  font-weight: 700;
  letter-spacing: .6;
}
li.main{
  margin-top: 5vh;
  text-decoration: none;
  list-style: none;
}
li:hover{
  cursor:pointer;
  opacity: 0.7;
}
@-webkit-keyframes left-menu {
  0% {
    transform: translateX(-400px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes left-menu {
  0% {
    transform: translateX(-400px);
  }
  100% {
    transform: translateX(0);
  }
}
@-webkit-keyframes right-menu {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400px);
  }
}

@keyframes right-menu {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-400px);
  }
}
.active{
  display: block;
}
#container .section{
position: relative;
width: 100vw;
height: 120vh;
padding-right: 500px;
box-sizing: border-box;
display: flex;
transition: opacity 2s ease-in-out, filter 2s ease-in-out;
filter: blur(8px);
-webkit-filter: blur(8px);
}

/* fondos */
#primera{
/* background-image: url('img/fondo_cielo.png');
background-repeat: no-repeat;
background-size: contain; */
margin-left: 50vw;
padding-top: 50vh;
width: 110vw;
height: 100vh;
}
#segunda{
  width: 100vw;
  height: 100vh;
}
.bg-cielo{
position: absolute;
top:0px;
width: 90vw;
height: 100vh!important;
z-index: -10;
animation: bg-transition 3s ease-in-out 3s;
transition: opacity 1s, left 1s;
left: -250px;
}
#img-cielo{
height: 100vh!important;
z-index: -12;
position: absolute;
left: -250px;

}
::i-block-chrome #img-cielo::before, #img-cielo::before {
  height: 20vh!important;
  z-index: -12;
  position: absolute;
  left: -180px;}



@-webkit-keyframes bg-transition {
  0% {
left: -250px;

            opacity:0.6;
  }
  100% {
    left: -10px;

            opacity:1;
  }
}

@keyframes bg-transition {
  0% {
left: -250px;

            opacity:0.6;
  }
  100% {
    left: -10px;

            opacity:1;
  }
}
/* @-webkit-keyframes bg-fondo {
  0% {
    background-image: transparent;
  }
  100% {
    background-image: url('img/fondo_txt.png');
  }
}

@keyframes bg-fondo {
  0% {
    background-image: transparent;
  }
  100% {
    background-image: url('img/fondo_txt.png');
  }
} */


#texto{
  background-image: url('img/fondo_txt.png')!important;;
  /* background-position: -230px 0px!important;; */
  background-repeat: no-repeat!important;;
  /* background-size:1200px 110vh!important;; */
  /* transition: all 3s ease-in!important;; */
}

#container .section .content{
  display: flex;
  z-index: 7;
}
#somos{
  margin-top: 5vw;
  display:none;
  visibility: hidden;
}
#somos, #fecha{
  width: 30vw;
  display:none;
}

#conocenos{
  width: 10vw;
  height:10vh;
  display:inline-block
  /* margin-top: 5vh; */
}

#fecha2{
  position: relative;
  top: 60vh;
  transition: opacity 2s linear;
}

#mesa{
  position: relative;
  top: 53vh;
  left: 98vw;
}

.spinner {
  width: 40px;
  height: 40px;
  background: transparent!important;;
  border-radius: 50%;
  position: absolute;
  top: 57vh;
  left: 20vw;
  transition:opacity 1s linear;
  display: none!important;
}

.spinner:after, .spinner:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.spinner-4:before, .spinner-4:after {
  position: absolute;
  z-index: 4382793;
  /* top: 50%;
  left: 50%; */
  background: gray;
  -webkit-animation: pulse 3s linear infinite;
          animation: pulse 3s linear infinite;
  opacity: 0;
}
.spinner-4:after {
  -webkit-animation: pulse 2s linear 2.3s infinite;
          animation: pulse 2s linear 2.3s infinite;
}
.spinner-4:hover::after, .spinner-4:hover::before{
  -webkit-animation: pulse 1s ease-in-out infinite;
          animation: pulse 1s ease-in-out infinite;
          cursor: pointer!important;
}

#triangle{
  width: 150vw;
  margin-left: 8vw;
  margin-top: 15vh;
}
.circle1, .circle2, .circle3, .circle4{
  transition: opacity 1s ease-in-out;
}

.fondo_txt {
    width: 75%;
    height: 90%;
    position: absolute;
    top: 0px;
    left: 2845px;
    transition: opacity 2s;
    z-index: -1;
  }
@keyframes fadeInRight {
   0% {
      transform: translateX(20px);
   }
   100% {
      transform: translateX(0);
   }
}
/*
  .spinner:before, .spinner:after {
    position: absolute;
    top: 70vh;
    left: 110vw;
    width: 50px;
    height: 50px;
    background: orangered;
    -webkit-animation: pulse 3s linear infinite;
            animation: pulse 3s linear infinite;
    opacity: 1;
  }
  .spinner:after {
    -webkit-animation: pulse 2s linear 2.3s infinite;
            animation: pulse 2s linear 2.3s infinite;
  } */

  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
      opacity: 0;
    }
  }

  @keyframes pulse {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1.3);
              transform: scale(1.3);
      opacity: 0;
    }
  }
  #subida-milan{
    position: relative;
    opacity: 0;
    margin-top: 3vh;
    transition: left .5s ease-in-out;
  }
  #milan{
    width: 48vw;
    margin-top: 2vh;
    position: relative;
    opacity: 0;
    transition: left .5s ease-in-out;
  }
  #fecha{
    display: flex;
    margin-left: 2vw;
    margin-top: 20vh;
    position: relative;
    opacity: 0;
    transition: left .5s ease-in-out;
    width: 45vw;
  }

#modal{
  width: 100vw!important;;
  height: 100vh;
}
.iziModal-content{
  width: 100vw!important;;
  height: 100vh!important;;
  overflow: hidden;
}

.iziModal .iziModal-header{
  box-shadow: none!important;
  border:none!important;
}
.iziModal-header .iziModal-noSubtitle{
  background-color: white!important;
}

#tercera, #cuarta, #quinta, #sexta, #septima, #octava{
  height: 100vh;
}
#tercera{
  width: 160vw;
}
/* .txt1,.titulo1{
  display: none;
  opacity: 0;
} */
#cuarta{
  /* background-image: url(recursos/Recurso_render.png); */
  background-repeat: no-repeat;
  width: 312vw;
  background-size: contain;
  height: 110vh;
  position: absolute;
  /* background-position: 200px 0px; */
  z-index: 4839279;
}
.render{
  width: 312vw;;
  height: 102vh;
  z-index: 483279;
}
#indicador{
  position: fixed;
  top: 10px;
  left:10px;
  background-color: beige;
  color:black;
  font-size: 10px;
  z-index: 35463;
}
 .mesa, .mesa:hover {
    width: 40px;
    height: 40px;
    background: transparent!important;;
    border-radius: 50%;
    /* position: absolute; */
    transition:opacity 1s linear;
    cursor: pointer;
    z-index: 8437923;
  }

  .mesa:after, .mesa:before, .mesa:hover {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 8437923;

  }

  .mesa-4:before, .mesa-4:after, .mesa-5:before, .mesa-5:after, .mesa-6:before, .mesa-6:after, .mesa-7:before, .mesa-7:after {
    position: absolute;
    /* top: 50%;
    left: 50%; */
    background: #43413F;
    -webkit-animation: pulse 3s linear infinite;
            animation: pulse 3s linear infinite;
    opacity: 0;
  }
  /* #ventana{
    position: relative;
    top: 69vh;
    left: 220vw;
  } */
  .mesa.mesa-4:before, .mesa.mesa-4:after{
    top: 54vh;
    left: 360vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;
  }
  .mesa.mesa-5:before, .mesa.mesa-5:after{
    top: 50vh;
    left: 510vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;

  }
  .mesa.mesa-6:before, .mesa.mesa-6:after{
    top: 13vh;
    left: 450vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;

  }
  .mesa.mesa-7:before, .mesa.mesa-7:after{
    top: 60vh;
    left: 511vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;

  }

  .mesa-4:after,  .mesa-5:after,   .mesa-6:after,   .mesa-7:after {
    -webkit-animation: pulse 2s linear 2.3s infinite;
            animation: pulse 2s linear 2.3s infinite;
  }

  .mesa-4:hover::after, .mesa-4:hover::before, .mesa-5:hover::after, .mesa-5:hover::before, .mesa-6:hover::after, .mesa-6:hover::before, .mesa-7:hover::after, .mesa-7:hover::before {
    -webkit-animation: pulse 1s ease-in-out infinite;
            animation: pulse 1s ease-in-out infinite;
            cursor: pointer!important;
            transition: animation 1s ease-in-out;
  }






  #close-btn{
    position: absolute;
    right: 2vw;
    top:2vh;
    cursor: pointer;
    z-index: 432;
    transition: display 2s linear!important;
  }
  #f-1, #f-2,#f-3{
    width: 2vw;
  }
  .f-pos{
    display: flex;
    right: 33.4vw;
    top:76vh;
    position: absolute;
    animation: bottom 4s linear;
  }

.iziModal-content{

}
@-webkit-keyframes left {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
        opacity: 1;
  }
}

@keyframes left {
  0% {
    transform: translateX(-10px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
        opacity: 1;
  }
}
@-webkit-keyframes left2 {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
        opacity: 1;
  }
}

@keyframes left2 {
  0% {
    transform: translateX(-30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
        opacity: 1;
  }
}

@-webkit-keyframes top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes top {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@-webkit-keyframes top2 {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
  opacity: 1;
  }
}

@keyframes top2 {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}



@-webkit-keyframes right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
        opacity: 1;
  }
}

@keyframes right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
        opacity: 1;
  }
}
@-webkit-keyframes bottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes bottom {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}


@-webkit-keyframes bottom2 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes bottom2 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  50% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}



@-webkit-keyframes bottom3 {
  0% {
    transform: translateY(20px);
    opacity: 0.2;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes bottom3 {
  0% {
    transform: translateY(20px);
    opacity: 0.2;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.5;
  }
  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@-webkit-keyframes bottom4 {
  0% {
    transform: translateY(50px);
    opacity: 0.2;
  }

  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes bottom4 {
  0% {
    transform: translateY(50px);
    opacity: 0.2;
  }

  100% {
    transform: translateY(0);
        opacity: 1;
  }
}


@-webkit-keyframes bottom5 {
  0% {
    transform: translateY(70px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
        opacity: 1;
  }
}

@keyframes bottom5 {
  0% {
    transform: translateY(70px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
        opacity: 1;
  }
}


svg#ttx-milan, svg#ttx-milan2,svg#ttx-milan3{
  width: 40vw;
}
.titulo-img{
  margin-top: 10vh;
  margin-left:10vw;
  animation: top 2.4s ease-in-out;
}

.cuerpo-img{
  display: flex;
  justify-content: flex-end;
  position: relative;
  right: 0;
  left: 130px;
  animation: bottom 1.8s ease-in-out;
}
svg#ttx1{
  width: 8vw;;
  /* padding-left: 6vw; */
  position: relative;
  right: 0;
}

.carousel-item.modal-milan {
    width: 57vw!important;;
    height: 100vh!important;;
  }


#milan-carousel{
width:50vw!important;
margin-left: 10vw;
margin-top: 5vh;
}
.carousel-item{
  width: 50vw;
  height: 80vh;
}

/* li.c-3d{
  position: absolute!important;
  width: 100px;
  height: 100px;
} */
.img-coleccion{
  width: 600px;
  height: auto;
}
svg#close{
  width: 1vw;
  position: relative;
  right: 0;
}

.carousel-indicators{
  position: absolute;
  z-index: 3;
  top: 78vh;
  left: 5vw;
  width: 500px;
}
.carousel-control-next, .carousel-control-prev{}
.carousel-control-prev{

}
svg#control-next, svg#control-prev{
  width: 10px!important;
}
.col-4.pic-milan{
  height: 100vw!important;
  position: absolute!important;
  right:0!important;
}
.carousel-control-next, .carousel-control-prev{
  top:83vh;
  width: 10%!important;;
  z-index: 10;
  height: 50px;
}
.carousel-control-next{
  margin-right: 12%;
}
.carousel-control-prev{
  margin-left: 12%;
}

.carousel-control-next-icon, .carousel-control-prev-icon{
  width: 12px;
  height: 12px;
}
.iziModal .iziModal-header-buttons {
    position: absolute;
    right: 34vw;
    top: 2vw;
    z-index: 4444;
    width: 15px;
  }
/* #test{
    width: 900px;
    padding-top: -10vh;
    position: relative;
    top: -27vh;
    left: -11vw;
} */
/* .rotate{
  width:640px;
} */




#view360, #view360-2, #view360-3{
  margin-top: -16vh;
  z-index: 312;
  animation: bottom2 3s ease-in-out;
}
#view360-4{
  margin: auto;
  justify-content: center;
  position: absolute;
  left: 7vw;
  top: 15vh;
}
.autorotate, .autorotate>a{
	width:96.5%;
	display:block;
	padding:5px;
	background-color:transparent;
	color:#515151;
	text-decoration:none!important;
  list-style: none!important;
	text-align:center;
  font-family: helvetica;
  display:none!important;;
}



.evento{
  width:30px;
  display: flex;
  justify-content: flex-end;

}
/* #fondo_room > div:nth-child(2){
  background-image: url('img/bckground-milan.png');
}
#fondo_room > canvas{

}
#fondo_room {
 background-image: url('img/bckground-milan.png');
 background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
animation: right 2s ease-in-out;
padding:0px;
}
#fondo_room > div:nth-child(3){
  position: absolute;
  display: block!important;
  /* top: 50vh; */
  /* top: 20vh;
  left: 150vw; */

/* modal proyectos */

li.active{
  -webkit-filter: grayscale(0%)!important;; /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%)!important; /* FF 35+ */
}
.carousel-indicators.indicador-proyectos li:first-child{
/* margin-right: 500px; */
margin-left:0px!important;
/* width:200px; */
}
.carousel-indicators.indicador-proyectos li{
/* margin-right: 500px; */
margin-left:203px!important;
/* width:200px; */
}

#prev, #next{
  width: 2vw;
}

#galeria-proyectos{
left:11vw!important;
}
#go{
  position: absolute;
  z-index: 872;

}




/* Carousel dos  */



.t-proyecto{
  width: 100vw;
  margin:auto;
  text-align:center;
}
#t-proyecto{
  width: 40vw;
  position: relative;
  top:5vh;
  animation: top 2.4s ease-in-out;
}
#c-proyecto{
  width: 30vw;
  /* margin-left:2vw; */
  /* position: absolute;
  top: 19vh;
  left:65vw!important; */
  animation: right 3s ease-in-out;
}
.project{
  position: flex;
  flex-direction: row;
}

#prev-mod, #next-mod, #prev-mod-2, #next-mod-2, #prev-mod-3, #next-mod-3{
  width: 2vw;
  z-index: 4000;
  position: fixed;
  left: 1vw;
}
#next-mod, #next-mod-2, #next-mod-3{
  left: 4vw;
}
.col-4.d-modal{
  padding-left: 0px!important;
  position: relative;
  left:-1vw;
}
ul.carousel, ul.carousel2, ul.carousel3{
  animation: bottom 3s ease-in-out;
  /* padding-right: 20vw; */
}

.detalle{
  /* animation: bottom 2s ease-in-out; */
  /* display:none; */
  animation: bottom 2s ease-in-out;
}
#detalle1,#detalle2,#detalle3,#detalle4,#detalle5,#detalle6,#detalle7{
  width: 57vw!important;;
  animation: bottom 2s ease-in-out;
  display:none;
}
li.items.main-pos #detalle1, li.items.main-pos #detalle2, li.items.main-pos #detalle3, li.items.main-pos #detalle4, li.items.main-pos #detalle5, li.items.main-pos #detalle6, li.items.main-pos #detalle7{
  display: block;
  animation: bottom 2s ease-in-out;
}

li.items.main-pos{
height: 100vh;
width: 100%;
}
li.items.main-pos img{
  width: 100%;
  height: 500px;
}
/* li.items2.main-pos2 img, .main-pos2 img{
  width: 95%;
  height: 500px;
} */
li.items.right-pos, li.items.left-pos, li.items.back-pos{
  top:30vh;
  left: 1vw;
  /* width: 100vw; */
}

li.items.right-pos img, li.items.left-pos img, li.items.back-pos img{
  width: 300px!important;;
  height: 200px!important;;
  top:40vh;
}
li.items{
  background: transparent;
  display: inline-block;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  overflow: hidden;
}

.items{
  position: absolute;
}
li img{
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
}
li img:hover{
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
  transition: transform 1s ease-in-out, filter 1s ease-in-out;

}
.main-pos{
  z-index: 3000;
  left: -1vw;
  transition: opacity 1s ease-in-out 1s, transform 1s ease-in-out;
  /*background-image: url('https://dl.dropbox.com/u/32649907/imgs/shadow.png');*/
}
.main-pos:hover{
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  transform: scale(1.02);
}
.flechas-modal-proyecto{
  margin-top: 30vh;
  left: 1.5vw;
}
.left-pos{
  opacity: .3;
  z-index: 500;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
  margin-left: 71vw;
  transition: opacity 2s ease-in-out 1s;
}

.back-pos{
  opacity: 0;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  transition: opacity 2s ease-in-out 2s;
}

.right-pos{
  opacity: .3;
  margin-left: 54vw;
  z-index: 100;
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  transform: scale(.75);
  transition: opacity 2s ease-in-out 1s;
}


/* .swiper-wrapper{
  display:none;
} */

.swiper-slide.a1, .swiper-slide.a2, .swiper-slide.a3, .swiper-slide.a4,.swiper-slide.a5, .swiper-slide.a6, .swiper-slide.a7{
  display: none;
  transition: all 1s ease-in-out!important;
  animation: top 1s ease-in-out!important;
}
.swiper-slide.b1, .swiper-slide.b2, .swiper-slide.b3, .swiper-slide.b4,.swiper-slide.b5, .swiper-slide.b6, .swiper-slide.b7{
  display: none;
  transition: all 1s ease-in-out!important;
  animation: top 1s ease-in-out!important;
}
.swiper-slide.c1, .swiper-slide.c2, .swiper-slide.c3{
  display: none;
  transition: all 1s ease-in-out!important;
  animation: top 1s ease-in-out!important;
}
#close2{
  right:2vw!important;;
}
#catalogo{
  width: 9vw;
  position: absolute;
  right:4vw;
  top:69vh;
  animation: right 2s ease-in-out;
}
#gei{
  width: 8vw;
  position: absolute;
  left:10vw;
  top:55vh;
  animation: bottom 2s ease-in-out;
  z-index: 65767;
  transition: opacity 1s;

}
#gei:hover{
  opacity:0.3;
  transition: opacity 1s;
  cursor: pointer;
}

    .swiper-container {
      width: 100vw;
      height: 97vh;
      padding:20px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      animation: top 1s ease-in-out;
      transition: all 1s ease-in-out;
    }
    #date, #date2,#date3, #date4, #date5,#date6, #date7{
      width: 3.75vw;
      animation: right 2s ease-in-out;
      margin-top: -7vh;
    }
    #view, #view2, #view3{
      overflow: hidden!important;;
      opacity: 0;
    }
    #next2, #prev2, #next2-2, #prev2-2, #next2-3, #prev2-3{
      top:95vh;
      left: -3vw;
    }
    #next2,   #next2-2, #next3,   #next2-3{
      left: 3vw;
    }
    img.view, .swiper-slide>img{
      height: 800px;
      width: 100%;
    }
    #rev-living, #rev-living2{
      height: 200px!important;
      line-height: 1.1;
      margin-top: 10vh;
      opacity: 1;
    }
#rev-living3{
  height: 700px!important;
  line-height: 1;
  margin-top: 3vh;
  opacity: 1;
  overflow: scroll;
}
.iziModal ::-webkit-scrollbar-thumb{
  border-radius: 300px!important;;
  background-color: #8A8980;
}
.iziModal ::-webkit-scrollbar{
  width: 3px!important;
  border-radius: 300px!important;;

}
    .rev_trans h6{
      animation: top 1s ease-in-out .2s;
    }
    .rev_trans p.rev1{
      animation: top 1s ease-in-out .3s;
    }
    .rev_trans p.rev2{
      animation: top 1s ease-in-out .4s;
    }
    .rev_trans p.rev3{
      animation: top 1s ease-in-out .43s;
    }
    .rev_trans p.rev4{
      animation: top 1s ease-in-out .45s;
    }
    .rev_trans p.rev5{
      animation: top 1s ease-in-out .46s;
    }
    .rev_trans p.rev6{
      animation: top 1s ease-in-out .5s;
    }
    .rev_trans p.rev7{
      animation: top 1s ease-in-out .56s;
    }

.txt{
  font-size: 15px;
  color:white;
  opacity: 0;
  transition: opacity 1s;
  cursor: pointer;
  position: absolute;

}
    .txt-4{
      top: 34vh;
      left: 23vw;
      z-index: 8237;
    }
.spinner-pr0 {
  width: 30px;
  height: 30px;
  background: transparent;
  border-radius: 50%;
  position: absolute;
  top: 37vh;
  left: 25vw;
  transition:opacity 1s linear;

}
.spinner-pr0:after, .spinner-pr0:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.spinner-pr:before, .spinner-pr:after {
  position: absolute;
  /* top: 50%;
  left: 50%; */
  background: white;
  -webkit-animation: pulse 3s linear infinite;
          animation: pulse 3s linear infinite;
  opacity: 0;
}
.spinner-pr:after {
  -webkit-animation: pulse 2s linear 2.3s infinite;
          animation: pulse 2s linear 2.3s infinite;
}
.spinner-pr:hover::after, .spinner-pr:hover::before{
  -webkit-animation: pulse 1s ease-in-out infinite;
          animation: pulse 1s ease-in-out infinite;
          cursor: pointer!important;
}

/* spinner2 */

.txt-5{
  top: 6.8vh;
  left: 39vw;
}
#close3{
  cursor: pointer;
}
.spinner-pr1{
width: 30px;
height: 30px;
background: transparent!important;
border-radius: 50%;
position: absolute;
top: 10vh;
left: 41vw;
transition:opacity 1s linear;
}
.spinner-pr1:after, .spinner-pr1:before {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
}

.spinner-5:before, .spinner-5:after {
position: absolute;
/* top: 50%;
left: 50%; */
background: white;
-webkit-animation: pulse 3s linear infinite;
      animation: pulse 3s linear infinite;
opacity: 0;
}
.spinner-5:after {
-webkit-animation: pulse 2s linear 2.3s infinite;
      animation: pulse 2s linear 2.3s infinite;
}
.spinner-5:hover::after, .spinner-5:hover::before{
-webkit-animation: pulse 1s ease-in-out infinite;
      animation: pulse 1s ease-in-out infinite;
      cursor: pointer!important;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
    opacity: 0;
  }
}
a:hover{
  opacity: 0.5;
  transition: opacity .7s ease-in-out;
}
#close3{
    right:2vw!important;;
}
.btn{
  padding: .395rem .75rem!important;
}
#quinta{

  padding-top:10vh;
  /* z-index: 65765; */
  margin-left: 240vw;
}

.bosque{
width: 470vw;
position: absolute;
height: 100vh;
background-image: url(recursos/fondo2-in.png);
background-attachment: fixed; /* Establecemos una posicion fija para la imagen */
background-size: cover!important;
background-repeat: no-repeat;
/* background-position: -230px 0px; */
margin-left: 200vw;
z-index: -911;
top: 0;
}
.bosque-img{
  width: 470vw;
  position: absolute;
  height: 100vh;
  background-image: url(recursos/fondo2.png);
  background-attachment: fixed; /* Establecemos una posicion fija para la imagen */
  background-size: cover!important;
  background-repeat: no-repeat;
  margin-left: 200vw;
  z-index: -921;
  top: 0;

}
#sexta{
  /* background-image: url(recursos/fondo3.png); */
  background-repeat: no-repeat;
  width: 110vw;
  background-attachment: fixed; /* Establecemos una posicion fija para la imagen */
  background-size: cover!important;
  /* margin-left: -90vw;
  margin-right: -20vw; */
}
/* #septima{
  background-image: url(recursos/fondo3.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 15%;
  background-color:transparent!important;
} */
.customform{
  left: 40vw;
  width: 100vw;
}
.volver{
  position: relative;
  left: 5vw;
  width: 200px;
  background-image:url('recursos/principal.png');
  background-position:-180px;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0!important;
  padding:0!important;
}
.volver2{
  height: 100vh;
  width: 55px;
  position: absolute;
  right: 15vw;
  top: 5vh;
  z-index: 657567;
  padding: 3px
}
.volver2:hover{
  cursor: pointer;
}
.card{
  background-color:transparent!important;
  border:none!important;
}
:root {
  background: #414141;
}

.spin-nosotros{

}
.spin-nosotros {
  width: 40px;
  height: 40px;
  background: transparent!important;;
  border-radius: 50%;
  position: absolute;
  top: 53vh;
  margin-left: 63vw;
  transition:opacity 1s linear;
  z-index: 658757;
}

.spin-nosotros:after, .spin-nosotros:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  z-index: 658757;

}

.spin-nosotros2:before, .spin-nosotros2:after {
  position: absolute;
  /* top: 50%;
  left: 50%; */
  background: gray;
  -webkit-animation: pulse 3s linear infinite;
          animation: pulse 3s linear infinite;
  opacity: 0;
  z-index: 658757;

}
.spin-nosotros2:after {
  -webkit-animation: pulse 2s linear 2.3s infinite;
          animation: pulse 2s linear 2.3s infinite;
}
.spin-nosotros2:hover::after, .spin-nosotros2:hover::before{
  -webkit-animation: pulse 1s ease-in-out infinite;
          animation: pulse 1s ease-in-out infinite;
          cursor: pointer!important;
}

/* #octava{
background-color:white;
  background-size: contain;
  background-repeat: no-repeat;
  width: 10vw;

} */

/* medidas de mitigcion */

#Capa_mitigacion{
  width: 280vw;
  position: relative;
  top: -28vh;
  left:15vw;
  -webkit-filter: drop-shadow(1px 2px 2px rgba(0,0,0, .02));
filter: drop-shadow(1px 1px 2px rgba(0,0,0, .02));
}
#medidas_mitigacion_t {
  width: 25vw;
  z-index: 837219;
  position:relative;
  /* opacity:0; */
  animation: top2 2s ease-in-out;
  margin-top:13vh;
}

#mitigacion_titulo{
  width: 43vw;
  z-index: 837219!important;
/* opacity:0; */
position: relative;
/* margin-top: -vh; */
animation: left2 2s ease-in-out;


}
#bajada_mitigacion{
  width: 35vw;
  position:absolute;
  z-index: 837219;
  /* opacity:0; */
  /* margin-top: vh; */
  margin-left: 10vw;
  animation: bottom4 2s ease-in-out;

}
#Cuerpo_mitigacion{
  width: 35vw;
  position:absolute;
  z-index: 837219;
  /* opacity:0; */
  transition: bottom 3s ease-in-out;
  margin-left: 10vw;
  margin-top: 4vh;
  animation: bottom4 2s ease-in-out;

}


.recurso-1{
  width: 23vw;
  top:14vh;
  position: absolute;
  margin-left: 80vw;

}
#parrafo1{
  width: 16vw;
  top:21vh;
  position: absolute;
  margin-left: 85vw;
  opacity:1;
  z-index: 837219;

}
#parrafo2{
  width: 18vw;
  top:59vh;
  position: absolute;
  margin-left: 85vw;
  opacity:0;
  z-index: 837219;

}
.recurso-2{
  width: 25vw;
  top: 40vh;
  position: absolute;
  margin-left: 139vw;
}
#parrafo3{
  width: 18vw;
  top: 45vh;
  position: absolute;
  margin-left: 148vw;
  z-index: 487832;
}
#parrafo4{
  width: 17vw;
  top: 70vh;
  position: absolute;
  margin-left: 148vw;
  z-index: 43723;
}
.recurso-3{
  width: 24vw;
  top: 9vh;
  position: absolute;
  margin-left: 193vw;
}
#parrafo5{
  width: 16vw;
  top: 16vh;
  position: absolute;
  margin-left: 200vw;
  z-index: 43723;

}
#parrafo6{
  width: 20vw;
  top: 37vh;
  position: absolute;
  margin-left: 200vw;
  z-index: 43723;
}
#parrafo7{
  width: 20vw;
  top: 63vh;
  position: absolute;
  margin-left: 200vw;
  z-index: 43723;
}
.recurso-4{
  width: 18vw;
  top: 37vh;
  position: absolute;
  margin-left: 269vw;
}
#parrafo8{
  width: 18vw;
  top: 48vh;
  position: absolute;
  margin-left: 269.8vw;
  z-index: 837219;

}
#parrafo9{
  width: 18.4vw;
  top: 63vh;
  position: absolute;
  margin-left: 269.8vw;
  z-index: 837219;

}
.recurso-5{
  width: 18vw;
  top: 15vh;
  position: absolute;
  margin-left: 309vw;
}
#parrafo10{
  width: 18vw;
  top: 25vh;
  position: absolute;
  margin-left: 311vw;
  z-index: 837219;

}
#parrafo11{
  width: 19vw;
  top: 41vh;
  position: absolute;
  margin-left: 311.6vw;
  z-index: 837219;

}


/* nosotros */
.fondo-nosotros{
  position: relative;
  left: 48vw;
  top: -36vh;;
  height: 100vh;
  z-index: 67878;
}
/* #sec-nosotros{
  position: relative;
  top:26vh;
  left:342vw;
  z-index: 32;
} */
#nosotros{
  width: 35vw;
  position: relative;
  left: 30vw;
  top: 20vh;
  z-index: 332432;
}
#bajadanosotros{
  width: 30vw;
  position: relative;
  left: 10.4vw;
  /* right: 24.4vw; */
  top: 30vh;
}
#nt-conocenos{
  position: relative;
  width: 36vw;
  top: 32vh;
  left: 35vw;
  z-index:38723;
  /* right: 9.5vw; */
}

#contacto{
  width: 50vw;
  position: relative;
  left: 10vw;
  top: 10vh;
}
#exito{
  display: none;
  position: absolute;
  left:1035vw;
  top:27vh;
  width: 25vw;
  height: 52vh;
  background-color: rgba(139, 138, 128, 0.4);;
  justify-content: center;
  border-radius: 10px;
  padding: 5px;
  transition: all 1s ease-in-out;
  opacity: 0;
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
  text-align: center;
  color:#8c8a80;
  z-index: 4837923;
}
#mensaje{
  width: 25vw;
  margin-bottom:2%;
  margin-top: 10%;
}
.row.datos{
  margin-top: -10px;
}
.mensaje{
font-size:20px;
color:#8c8a80;
font-family:'Helvetica', Helvetica;
font-weight:600!important;
/* position: relative;
left: 100vw;
top: 10vh */
}
.descargar{
      width: 7vw;
      position: absolute;
      right:1vw;
      top: 42vh;
}
.noscontactaremos{
  position: absolute;
  top:37vh;
  left: 5.5vw;
  color:white;
  font-size: 18px;
}
.contacto{
  font-size:20px;
  color:#8c8a80;
  position: relative;
  left: 100vw;
  top: 30vh;
  font-weight: bolder;
}
.contacto p{
  font-size:12px;
  font-weight: lighter;
}
.area{
  position: relative;
  left: 100vw;
  top: 12vh
}
.area2{
  position: relative;
  left: 100vw;
  top: 15vh
}
.selector{
  position: relative;
  left: 100vw;
  top: 20vh
}

.custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before{
  border-color: #8c8a80;
  background-color: #8c8a80;
}
span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  transform: translate(-50%, -50%);
  color: rgba(139, 138, 128, 1);
  font-weight: bolder;
}

span#procent::after {
  content: '%';
}
#salir{
  width: 1vw;
}
.row.salir{
  position: relative;
  display: flex;
  justify-content: flex-end;
  right: 1.4vw;
  font-size: 15px;
  color:white;
  font-weight: 800;
}
.row.salir:hover{
  cursor: pointer;
  opacity: 0.1;
  transition:all .4s ease-in-out;
}
.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  left: 1.5vw;
  top:-8vh;
}
@media only screen and (max-width: 990px){
    .progress{ margin-bottom: 20px; }
}

.customform .was-validated .form-control:valid {
  border-color: #ced4da;
  background-image: none;
}
.customform .was-validated .form-control:valid:focus {
  color: #495057;
  background-color: #fff;
  border-color: #ced4da;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.customform .was-validated .form-control[required]:valid {
  border-color: #28a745;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.customform .was-validated .form-control[required]:valid:focus {
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}
textarea.form-control{
  height: 200px;
}
textarea {
  resize: none;
}
.form-control{
  background-color: rgba(139, 138, 128, 0.05)!important;
  border:none!important;
  color:#495057;
}
/* .btn.btn-enviar{
  top:30vh!important;
} */
#procent{
  color: white!important;
}
.btn-enviar{
  background-color:#8B8A80;
  border-radius: 12px!important;
  color:white!important;
  width: 85px;
  z-index: 8972;
  position:relative;
  height: 32px;
  top: -4vh!important;
  /* left: 1065vw; */
  /* margin-top: -4vh!important;; */
}
.btn-enviar:hover{
opacity: .3;
transition: opacity .3s ease-in-out, all .2s ease-in-out;;
}
.informacion{
  color:#8B8A80!important;
  z-index: 3988921;
}
.informacion p, .informacion h6{
  font-size:14px;
}
.informacion h6{
  margin-top: 3vh;
}
.custom-control-input:checked~.custom-control-label::before{
  color:#8B8A80!important;;
    border-color: #8c8a80;
    background-color: #8c8a80;
    outline: none !important;

}
.custom-switch .custom-control-label::before{
      left: 20.75rem;
      outline: none !important;
}
.custom-switch .custom-control-label::after {
    top: calc(.25rem + 2px);
    left: calc(20.75rem + 2px);
    outline: none !important;

  }
  .custom-control-label, .custom-control-label:before{
    left:-2.4vw;
    outline: none !important;
    color:#8B8A80!important;;

  }


/* MODAL REVESTIMIENTO */
#rev_{
  position: absolute;
  z-index: 9487329;
  left:78vw;
  animation: right 2s ease-in-out .2s;
  height: 400px;
}

.fondo_conocenos img{
  width: 20vw;
  height: 100vh;
  position: absolute;
  left: 0;
}
/* .trans1{
  animation: right 2s ease-in-out .2s;
}
.trans2{
  animation: right 2s ease-in-out .5s;
}
.trans3{
  animation: right 2s ease-in-out .6s;
}
.trans4{
  animation: right 2s ease-in-out .7s;
} */

@media only screen and (max-width: 600px) {

  svg.preload{
    width: 50%;
  }
  #container .section{
  position: relative;
  width: 100vw;
  height: 100vh!important;;
  padding-right: 500px;
  box-sizing: border-box;
  display: flex;
  transition: opacity 2s ease-in-out, filter 2s ease-in-out;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  }
  #container{
    position:fixed;
    top:0;
    left: 0;
    width: 500%;
    height: 100vh!important;
    display: flex;
    background-size: 100% 100vh;
    /* background-image: url(img/fondo_test.png); */
    scroll-behavior: smooth!important;
  }
.content{
    height: 100vh!important;
  }
#primera{
  margin-left: 0vw;
  /* height: 90vh!important; */
}
#img-cielo{
  /* left: -523vw; */
}
#somos{
  margin-top: 0vw;
  display:none;
  visibility: hidden;
}
#somos, #fecha{
  width: 80vw;
  display:none;
}
.somos-1, .fabricamos-1{
  fill:white!important;
}
#conocenos{
  width: 30vw;
  height:30vh;
  margin-top: -10vh;
  display:inline-block
  /* margin-top: 5vh; */
}

/* segunda */
#segunda{
  margin-left: 30%;
  width: 200vw;
  margin-top: 15vh;
}
#subida-milan{
  width: 70vw;
  position: relative;
  opacity: 0;
  margin-top: 6vh;
  transition: left .5s ease-in-out;
}
#milan{
  width: 68vw;
  margin-top: 8vh;
  position: relative;
  opacity: 0;
  transition: left .5s ease-in-out;
}
#fecha{
  display: flex;
  margin-left: 15vw;
  margin-top: 25vh;
  position: relative;
  opacity: 0;
  transition: left .5s ease-in-out;
}
/* tercera */
#tercera{
  width: 600vw;
  margin-left: 25%;
}
#texto{
  background-image: url('img/fondo_txt.png')!important;;
  background-position: 40px 0px!important;;
  background-repeat: no-repeat!important;;
  background-size: contain;
  /* transition: all 3s ease-in!important;; */
}
#triangle{
  width: 450vw;
  /* margin-left: 8vw; */
  margin-top: 20vh;
}
.mesa, #ventana, #proy{
  display: none!important;;
}

/* cuarta */
#cuarta{
  /* background-image: url(recursos/Recurso_render.png); */
  background-repeat: no-repeat;
  width: 812vw;
  background-size: contain;
  height: 100vh!important;
  position: absolute;
  /* background-position: 200px 0px; */
  z-index: 4839279;
}

.render{
  width: 850vw;
  height: 100vh!important;;
  z-index: 483279;
  margin-left: 10vw;
}

#quinta{

  padding-top:10vh;
  /* z-index: 65765; */
  margin-left: 640vw;
}

#Capa_mitigacion{
  width: 320vw;
  position: relative;
  top: -40vh;
  left:15vw;
  -webkit-filter: drop-shadow(1px 2px 2px rgba(0,0,0, .02));
  filter: drop-shadow(1px 1px 2px rgba(0,0,0, .02));
}
.recurso-1{
  width: 45vw;
  top:12vh;
  position: absolute;
  margin-left: 110vw;
}
#parrafo1{
  width: 45vw;
  top:17vh;
  position: absolute;
  margin-left: 120vw;
  opacity:1;
  z-index: 837219;

}
#parrafo2{
  width: 45vw;
  top:54vh;
  position: absolute;
  margin-left: 120vw;
  opacity:0;
  z-index: 837219;

}
.recurso-2{
  width: 40vw;
  top: 21vh;
  position: absolute;
  margin-left: 180vw;
}
#parrafo3{
  width: 40vw;
  top: 25vh;
  position: absolute;
  margin-left: 185vw;
  z-index: 487832;
}
#parrafo4{
  width: 43vw;
  top: 44vh;
  position: absolute;
  margin-left: 185vw;
  z-index: 43723;
}
.recurso-3{
  width: 40vw;
  top: 9vh;
  position: absolute;
  margin-left: 245vw;
}
#parrafo5{
  width: 46vw;
  top: 13vh;
  position: absolute;
  margin-left: 250vw;
  z-index: 43723;

}
#parrafo6{
  width: 48vw;
  top: 33vh;
  position: absolute;
  margin-left: 250vw;
  z-index: 43723;
}
#parrafo7{
  width: 48vw;
  top: 53vh;
  position: absolute;
  margin-left: 250vw;
  z-index: 43723;
}
.recurso-4{
  width: 40vw;
  top: 24vh;
  position: absolute;
  margin-left: 320vw;
}
#parrafo8{
  width: 45vw;
  top: 32vh;
  position: absolute;
  margin-left: 323vw;
  z-index: 837219;

}
#parrafo9{
  width: 45vw;
  top: 44vh;
  position: absolute;
  margin-left: 323vw;
  z-index: 837219;

}
.recurso-5{
  width: 43vw;
  top: 12vh;
  position: absolute;
  margin-left: 370vw;
}
#parrafo10{
  width: 40vw;
  top: 20vh;
  position: absolute;
  margin-left: 378vw;
  z-index: 837219;

}
#parrafo11{
  width: 40vw;
  top: 32vh;
  position: absolute;
  margin-left: 379vw;
  z-index: 837219;

}
#medidas_mitigacion_t{
  width: 60vw;
}
#mitigacion_titulo{
  top: -5vh;
  width: 80vw;
}
#bajada_mitigacion{
  width: 70vw;
  top: 42vh;
}
#Cuerpo_mitigacion{
  width: 70vw;
  top: 44vh;

}

.fondo-nosotros{
  position: relative;
  left: 28vw;
  margin-top:20vh;
  height: 100vh;
  z-index: 67878;
}
/* #sec-nosotros{
  position: relative;
  top:26vh;
  left:342vw;
  z-index: 32;
} */
#nosotros{
  width: 70vw;
  position: relative;
  left: 40vw;
  top: 18vh;
  z-index: 332432;
}
#bajadanosotros{
  width: 70vw;
  position: relative;
  left: -11vw;
  /* right: 24.4vw; */
  top: 28vh;
}
#nt-conocenos{
  position: relative;
  width: 80vw;
  top: 42vh;
  left: -90vw;
  z-index:38723;
  /* right: 9.5vw; */
}
h6 > strong{
  font-size: 12px;
}
.mailinfo, .call, #location{
  font-size: 10px
}
.customform{
  left: 5vw;
  width: 120vw;
}
#mensaje{
  width: 60vw;
}
textarea.form-control{
  height: 200px;
  width: 380px;
}
#namecustom,
#emailcustom{
  width: 380px;
}
.custom-control-label, .custom-control-label:before{
  left:-6vw;
  outline: none !important;
  color:#8B8A80!important;;
}
.mensaje-1{
width: 50vw;
}
.btn-enviar{
  background-color:#8B8A80;
  border-radius: 12px!important;
  color:white!important;
  width: 85px;
  z-index: 8972;
  position:relative;
  height: 32px;
  top: 2vh!important;
  right:10vw;
  /* left: 1065vw; */
  /* margin-top: -4vh!important;; */
}
.volver{
  position: relative;
  left: 8vw;
  width: 100px;
  background-image:url('recursos/principal.png');
  background-position:-180px;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh!important;
  margin: 0!important;
  padding:0!important;
}
.volver2{
  height: 100vh!important;
  width: 55px;
  position: absolute;
  right: 25vw;
  top: 5vh;
  z-index: 657567;
  padding: 3px
}

.informacion h6{
  margin-top: 1vh;
}
.bosque{
width: 470vw;
position: absolute;
height: 100vh;
background-image: url(recursos/fondo2-in.png);
background-attachment: fixed; /* Establecemos una posicion fija para la imagen */
background-size: cover!important;
background-repeat: no-repeat;
/* background-position: -230px 0px; */
margin-left: 700vw;
z-index: -911;
top: 0;
}
.bosque-img{
  width: 470vw;
  position: absolute;
  height: 100vh;
  background-image: url(recursos/fondo2.png);
  background-attachment: fixed; /* Establecemos una posicion fija para la imagen */
  background-size: cover!important;
  background-repeat: no-repeat;
  margin-left: 700vw;
  z-index: -921;
  top: 0;

}
.fondo_conocenos img{
  width: 20vw;
  height: 100vh;
  position: absolute;
  left: 0;
}
}

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 3) {
#segunda{
  margin-left: 50%;
}


#subida-milan{
  width: 70vw;
  position: relative;
  opacity: 0;
  margin-top: -5vh;
  transition: left .5s ease-in-out;
}
#milan{
  width: 68vw;
  margin-top: 7vh;
  position: relative;
  opacity: 0;
  transition: left .5s ease-in-out;
}
#fecha{
  display: flex;
  margin-left: 10vw;
  margin-top: 25vh;
  position: relative;
  opacity: 0;
  transition: left .5s ease-in-out;
}


}









/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {

  svg#ttx-milan, svg#ttx-milan2,svg#ttx-milan3{
    width: 50vw;
  }
}


@media only screen and (min-width: 1599px) {
    #mod-fn{
        height:120vh;
    }
        #mod-fn img{
        height:120vh;
    }

    .fondo-nosotros{
      position: relative;
      left: 48vw;
      top: -36vh;;
      height: 100vh;
      z-index: 67878;
    }
    
  .mesa.mesa-4:before, .mesa.mesa-4:after{
    top: 54vh;
    left: 365vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;
  }
  .mesa.mesa-5:before, .mesa.mesa-5:after{
    top: 60vh;
    left: 512vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;

  }
  .mesa.mesa-6:before, .mesa.mesa-6:after{
    top: 10vh;
    left: 455vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;

  }
  .mesa.mesa-7:before, .mesa.mesa-7:after{
    top: 60vh;
    left: 511vw;
    position:absolute;
    background: #43413F!important;;
    z-index: 878932;

  }

  #fecha{
    display: flex;
    margin-left: 0vw;
    margin-top: 20vh;
    position: relative;
    opacity: 0;
    transition: left .5s ease-in-out;
    width: 40vw;
  }

/* posicion circulo porcentaje */

#exito{
  display: none;
  position: absolute;
  left:1035vw;
  top:27vh;
  width: 25vw;
  height: 52vh;
  background-color: rgba(139, 138, 128, 0.4);;
  justify-content: center;
  border-radius: 10px;
  padding: 5px;
  transition: all 1s ease-in-out;
  opacity: 0;
  transition: opacity 1s ease-in-out, filter 1s ease-in-out;
  text-align: center;
  color:#8c8a80;
  z-index: 4837923;
}
#mensaje{
  width: 25vw;
  margin-bottom:2%;
  margin-top: 10%;
}
.row.datos{
  margin-top: -10px;
}
.mensaje{
font-size:20px;
color:#8c8a80;
font-family:'Helvetica', Helvetica;
font-weight:600!important;
/* position: relative;
left: 100vw;
top: 10vh */
}
.descargar{
      width: 7vw;
      position: absolute;
      right:1vw;
      top: 42vh;
}
.noscontactaremos{
  position: absolute;
  top:37vh;
  left: 5.5vw;
  color:white;
  font-size: 18px;
}
.contacto{
  font-size:20px;
  color:#8c8a80;
  position: relative;
  left: 100vw;
  top: 30vh;
  font-weight: bolder;
}


span#procent {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 30px;
  transform: translate(-50%, -50%);
  color: rgba(139, 138, 128, 1);
  font-weight: bolder;
}

span#procent::after {
  content: '%';
}
#salir{
  width: 1vw;
}
.row.salir{
  position: relative;
  display: flex;
  justify-content: flex-end;
  right: 1.4vw;
  font-size: 15px;
  color:white;
  font-weight: 800;
}
.row.salir:hover{
  cursor: pointer;
  opacity: 0.1;
  transition:all .4s ease-in-out;
}
.canvas-wrap {
  position: relative;
  width: 300px;
  height: 300px;
  left: 3vw;
  top:-4.5vh;
}


  #fecha2{
    position: relative;
    top: 61vh;
    transition: opacity 2s linear;
  }

  .volver{
  position: relative;
  left: -1vw;
  width: 200px;
  background-image:url('recursos/principal.png');
  background-position:-180px;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0!important;
  padding:0!important;
}
.main-pos, .main-pos2{
  width: 1067px;
  height: 640px;
}
a:link, a:visited, a:active, a:hover {
    text-decoration:none!important;
    opacity: 0.5;
}
#primera{

margin-left: 54vw;
}
#segunda{
  margin-top:10vh;
}
  #cuarta{
      width: 318.2vw;
      z-index: 3729382;
  }

.customform{
  left: 36vw;
  width: 100vw;
  z-index:73982;
}

li.items.main-pos img{
  height: 600px;
}
li.items.right-pos, li.items.left-pos, li.items.back-pos{
  left:3vw!important;
}
.left-pos{
  margin-left:70vw;
}
#next-mod{
  /* margin-left: .5vw; */
}
#detalle1, #detalle2, #detalle3, #detalle4, #detalle5, #detalle6, #detalle7{
  width: 59.4vw!important;
}
img.view, .swiper-slide>img{
  height: auto!important;
}

.menu{
  background-position: -10px;
  background-size: cover;
}
.col-4.d-modal{
    padding-left:27px!important;
}

/* .btn-enviar{
  left: 74.7vh;
} */
.custom-control-label, .custom-control-label:before{
  left:-2vw;
  outline: none !important;
  color:#8B8A80!important;;
}

.card{
padding-top:10vh!important;
}

    .volver2{
      right: 23vh;
    }
}

/* #fondo_room > div:nth-child(3) > span:nth-child(2){
background-image: url('recursos/viewer.svg')!important;
margin-right:1vw!important;
} */

@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
    /* insert styles here */
}


/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {
    /* insert styles here */
    *{
    }
}

/* (1280x1024) SXGA Display */
@media  screen and (max-width: 1280px) {
    /* insert styles here */
    *{
    }
}

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    /* insert styles here */
    *{
    }
}

/* (1680x1050) WSXGA+ Display */
@media  screen and (max-width: 1680px) {
    /* insert styles here */
    *{
    }
}

/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    /* insert styles here */
    *{
    }
}

/* (1600x900) HD+ Display */
@media  screen and (max-width: 1600px) {
    /* insert styles here */
    *{
    }
}
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1400px) {
    #subida-milan{
      position: relative;
      opacity: 0;
      margin-top: 0vh;
      transition: left .5s ease-in-out;
      margin-left: -.2vw;
    }
    #fecha{
      display: flex;
      margin-left: 7vw;
      margin-top: 25vh;
      position: relative;
      opacity: 0;
      transition: left .5s ease-in-out;
    }
    #nosotros{
      width: 35vw;
      position: relative;
      left: 28vw;
      top: 20vh;
      z-index: 332432;
    }
    #bajadanosotros{
      width: 30vw;
      position: relative;
      left: 8.7vw;
      /* right: 24.4vw; */
      top: 32vh;
    }
    #nt-conocenos{
      position: relative;
      width: 35vw;
      top: 34vh;
      left: 34vw;
      z-index:38723;
      /* right: 9.5vw; */
    }
    .customform{
      left: 45vw;
      width: 100vw;
      z-index:73982;
      margin-top: 4vh;
    }
    .informacion p, .informacion h6{
      font-size:12px;
    }
    .informacion h6{
      margin-top: -3vh;
    }
.volver{
  left: 8vw;
}
    .volver2{
      right: 35vh;
    }
    #primera{
    margin-left: 45vw;
    }
    #fecha2{
      width: 2vw;
      position: relative;
      top: 57vh;
      transition: opacity 2s linear;
    }

    #mensaje{
      width: 25vw;
      margin-bottom:2%;
      margin-top: 5%;
    }

#Capa_mitigacion{
  width: 280vw;
  position: relative;
  top: -27vh;
  left:15vw;
  -webkit-filter: drop-shadow(1px 2px 2px rgba(0,0,0, .02));
filter: drop-shadow(1px 1px 2px rgba(0,0,0, .02));
}
.recurso-1{
  width: 23vw;
  top:10vh;
  position: absolute;
  margin-left: 80vw;

}
#parrafo1{
  width: 15vw;
  top:15vh;
  position: absolute;
  margin-left: 88vw;
  opacity:1;
  z-index: 837219;

}
#parrafo2{
  width: 15vw;
  top:60vh;
  position: absolute;
  margin-left: 88vw;
  opacity:0;
  z-index: 837219;

}
.recurso-2{
  width: 25vw;
  top: 40vh;
  position: absolute;
  margin-left: 139vw;
}
#parrafo3{
  width: 16vw;
  top: 45vh;
  position: absolute;
  margin-left: 148vw;
  z-index: 487832;
}
#parrafo4{
  width: 16vw;
  top: 72vh;
  position: absolute;
  margin-left: 148vw;
  z-index: 43723;
}
.recurso-3{
  width: 24vw;
  top: 8vh;
  position: absolute;
  margin-left: 193vw;
}
#parrafo5{
  width: 16vw;
  top: 16vh;
  position: absolute;
  margin-left: 200vw;
  z-index: 43723;

}
#parrafo6{
  width: 20vw;
  top: 40vh;
  position: absolute;
  margin-left: 200vw;
  z-index: 43723;
}
#parrafo7{
  width: 20vw;
  top: 70vh;
  position: absolute;
  margin-left: 200vw;
  z-index: 43723;
}
.recurso-4{
  width: 18vw;
  top: 35vh;
  position: absolute;
  margin-left: 269vw;
}
#parrafo8{
  width: 18vw;
  top: 46vh;
  position: absolute;
  margin-left: 269.8vw;
  z-index: 837219;

}
#parrafo9{
  width: 18.4vw;
  top: 63vh;
  position: absolute;
  margin-left: 269.8vw;
  z-index: 837219;

}
.recurso-5{
  width: 18vw;
  top: 15vh;
  position: absolute;
  margin-left: 309vw;
}
#parrafo10{
  width: 18vw;
  top: 25vh;
  position: absolute;
  margin-left: 311vw;
  z-index: 837219;

}
#parrafo11{
  width: 19vw;
  top: 41vh;
  position: absolute;
  margin-left: 311.6vw;
  z-index: 837219;

}

}
@media only screen and (min-width: 1440px) and (max-width: 1519px) {

}
@media only screen and (min-width: 1520px) and (max-width: 1619px)  {

}
/* @supports (overflow:-webkit-marquee) and (justify-content:inherit) {
  #medidas_mitigacion_t {
    width: 20vw;
    z-index: 837219;
    top:5vh;
    margin-top:30vh;
  }

  #mitigacion_titulo{
    width: 43vw;
    top:5.6vh;;
    z-index: 837219!important;
    margin: 0px;
  }
  #bajada_mitigacion{
    width: 20vw;
    top:1vh;

    z-index: 837219;
    margin: 0px;

  }
  #Cuerpo_mitigacion{
    width: 20vw;
    top:6vh;
  }
/* type your custom css code here */