@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

html,body{
	display: block;
	height: 100%;
	width: 100%;
	margin: 0px;
	background: url(images/verne-sky.webp) center / cover no-repeat;
	background-attachment: fixed;
	font-family: 'Montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}

p {
    margin-top: 0;
    margin-bottom: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

mark{
    
background: black;
    
color: white;
}

/*
Preloader
*/
.loading{
  
transform-style: preserve-3d;
  
width: 100%;
  
height: 100%;
  
position: fixed;
  
top: 0;
  
left: 0;
  
z-index: 1200;
  
perspective: 500px;
}
#preloader{
	
width: 100%;
	
height: 100%;
	
background-color: #000000;
	
position: absolute;
	
top: 0;
	
left: 0;
	
display: flex;
	
align-items: center;
	
justify-content: center;
}

#status{
	
background: url(images/LOADER.webp) center / contain no-repeat;
	
width: 300px;
	
padding-top: 300px;
}

/*
Menu Structure
*/

.logo{

position: fixed;

left: 20px;

top: 24px;

width: 200px;

background: url(images/hey-verne.webp) center / contain no-repeat;

padding-top: 4%;

z-index: 999;
}

.logo a{
    
display: block;
    
width: 100%;
    
height: 100%;
    
position: absolute;
    
top: 0;
}

.menu{

width: 60px;

height: 60px;

overflow: hidden;

position: fixed;

top: 14px;

right: 14px;

background: rgb(0 0 0);

z-index: 900;

border-radius: 0;

box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);
}

.menu .burger{
    
color: white;
    
font-size: 30px;
    
width: 60px;
    
height: 60px;
    
margin-bottom: 10px;
    
cursor: pointer;
    
display: flex;
    
align-items: center;
    
justify-content: center;
}

.menu .burger:hover{}

.menu .links{
    
}

.overlay{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 890;

display: none;
}

.menu .links ul{
    
list-style-type: none;
    
margin-block-start: 0;
    
margin-block-end: 0;
    
margin-inline-start: 0px;
    
margin-inline-end: 0px;
    
padding-inline-start: 0;
}

.menu .links ul li{
    
}

.menu .links a{
    
color: white;
    
text-decoration: none;
    
width: 100%;
    
display: block;
    
padding-left: 12px;
}

.menu .links a:hover{
    
background: yellow;
    
color: black;
}

.hide-icon{

display: none;
}

/*
Navigation Structure
*/

.navigation{

position: absolute;

display: flex;

align-items: center;

justify-content: space-between;

width: calc(100% + 60px);

transform: translateX(-30px);

top: 50%;
}

.navigation .prev{
    
cursor: pointer;
    
font-size: 40px;
}

.navigation .next{
    
cursor: pointer;
    
font-size: 40px;
}

.navigation .prev:hover{
    
transform: scale(1.1);
}

.navigation .next:hover{
    
transform: scale(1.1);
}


/*
Main Tracks Structure
*/

.tracks {display: block;width: 100%;height: auto;}

.screen-1 {width: 100%;height: 600vh;border: 0px solid black;display: flex;align-items: center;}

.screen-2 {width: 100%;height: 300vh;border: 0px solid black;display: flex;align-items: flex-start;}

.screen-3 {width: 100%;height: 300vh;border: 0px solid black;display: flex;align-items: flex-start;}

.screen-4 {width: 100%;height: 300vh;border: 0px solid black;display: flex;align-items: flex-start;}

.screen-5 {width: 100%;height: 300vh;border: 0px solid black;display: flex;align-items: flex-start;}

.screen-6 {width: 100%;height: 150vh;border: 0px solid black;display: flex;align-items: flex-start;}

.screen-7 {width: 100%;height: auto;border: 0px solid black;display: flex;align-items: center;justify-content: center;}

.screen-8 {width: 100%;height: auto;border: 0px solid black;display: flex;align-items: flex-start;}
/*
Slider Structure
*/

.nav-slider{


}

.nav-slider .next{
    

}

.nav-slider .prev{
    

}

#espacio, #nosotros, #navega, #poderes, #tripulacion, #hacemos, #ofrecemos{
  transform-style: preserve-3d;
}

.owl-theme .owl-controls{
    display: none!important;
}

.socials{

z-index: 777;

position: fixed;

bottom: 6px;

left: 50%;

transform: translateX(-50%);

display: flex;

justify-content: space-around;

width: 220px;

background: black;

border-radius: 30px;
}

.socials a{
    
color: white;
    
padding: 5px;
    
font-size: 18px;
    
width: 34px;
    
height: 34px;
    
display: flex;
    
justify-content: center;
    
align-items: center;
    
text-decoration: none;
    
transition: all .4s ease;
}

.socials a:hover{
    
color: yellow;
}

/*
Main Structure
*/

.scene-verne {position: fixed;width: 100%;height: 100vh;z-index: 22;top: 0;left: 0;perspective: 200px;transform-style: preserve-3d;mix-blend-mode: multiply;}

.section {width: 1600px;position: absolute;height: 930px;transform-style: preserve-3d;left: 50%;}

.section .container{width: 1600px;position: relative;height: 930px;top: 0;left: 0;transform-style: preserve-3d;}

.section .container .layer{width: 1564px;position: absolute;height: 942px;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;}

.section .container .layer .image{width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);position: absolute;}

/*
Seccion 0
*/

.espacio {perspective-origin: 50% 50%;z-index: 7;transform: translateX(-50%);width: 100%;height: 100vh;}

.espacio .layer{
  transform: none;
  width: 100%;
  height: 100%;
}

.espacio .layer .image{
  background: url(images/layout-00/layer-1.webp) center / cover no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.espacio .layer .image button{background: #91e24b;color: black;text-transform: uppercase;padding: 20px 30px;border-radius: 40px;font-size: 30px;text-decoration: none;transition: padding .4s ease;}

.espacio .layer .image button:hover{padding: 26px 42px;}

.espacio .layer-01 {transform: translateX(-56%) translateY(-32%) translateZ(66px);pointer-events: none;}

.espacio .layer-01 .image {background: url(images/layout-00/layer-01.webp) center / cover no-repeat;}

.espacio .layer-02 {transform: translateX(-42%) translateY(-40%) translateZ(10px);pointer-events: none;}

.espacio .layer-02 .image {background: url(images/layout-00/layer-02.webp) center / cover no-repeat;}

.espacio .layer-03 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-50px);pointer-events: none;}

.espacio .layer-03 .image {background: url(images/layout-00/layer-03.webp) center / cover no-repeat;}

.espacio .layer-04 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-10px);}

.espacio .layer-04 .image {}

.outer-space{
  background: url(images/layout-00/space.webp) center / cover no-repeat;
  position: fixed;
  width: 100%;
  height: 100%;
}

/*
Seccion 1
*/

.somos-plataforma {perspective-origin: 50% 50%;z-index: 6;}

.somos-plataforma .layer-01 {transform: translateX(-50%) translateY(-50%) translateZ(100px);pointer-events: none;}

.somos-plataforma .layer-01 .image {background: url(images/layout-01/layer-01.webp) center / cover no-repeat;}

.somos-plataforma .layer-02 {transform: translateX(-50%) translateY(-50%) translateZ(50px);pointer-events: none;}

.somos-plataforma .layer-02 .image {background: url(images/layout-01/layer-02.webp) center / cover no-repeat;}

.somos-plataforma .layer-03 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-10px);}

.somos-plataforma .layer-03 .image {background: url(images/layout-01/layer-03.webp) center / cover no-repeat;}

.somos-plataforma .layer-04 {height: 108%;transform: translateX(-50%) translateY(-13%) translateZ(-200px);}

.somos-plataforma .layer-04 .image {background: url(images/layout-01/layer-04.webp) center / cover no-repeat;}

.somos-plataforma .layer-05 {height: 930px;transform: translateX(-50%) translateY(-50%) translateZ(-300px);}

.somos-plataforma .layer-05 .image {background: url(images/layout-01/layer-05.webp) center / cover no-repeat;}

.somos-plataforma .actions {transform: translateX(-68%) translateY(-58%) translateZ(0px);}

.somos-plataforma .actions .content{
    width: 388px;
    height: auto;
    display: block;
}

.somos-plataforma h1{

text-transform: uppercase;

font-weight: 600;

width: 400px;

color: black;

font-size: 50px;

line-height: 1.2;
}

.somos-plataforma h1 mark{

background: #cbfa40;

padding: 0.1em;

color: black;
}

.somos-plataforma .mark-01{

}

.somos-plataforma .mark-02{

}

.somos-plataforma .mark-01{
    
background: url(images/line-marker-01.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 0;
    
margin: 0;
}

.somos-plataforma .mark-02{
    
    background: url(images/marker-01.svg);
        
    color: black;
        
    box-sizing: border-box;
        
    background-repeat: no-repeat;
        
    background-size: 88%, 9px, contain;
        
    background-position: center;
        
    padding: 4% 3%;
        
    margin: 0;
    }



/*
Seccion 2
*/

.navega-descubre {perspective-origin: 50% 50%;z-index: 5;}

.navega-descubre .layer-01 {height: 100%;transform: translateX(-50%) translateY(-50%) translateZ(100px);pointer-events: none;}

.navega-descubre .layer-01 .image {background: url(images/layout-02/layer-01.webp) center / cover no-repeat;}

.navega-descubre .layer-02 {transform: translateX(-50%) translateY(-50%) translateZ(-34px);}

.navega-descubre .layer-02 .image {background: url(images/layout-02/layer-02.webp) center / cover no-repeat;display: flex;align-items: center;justify-content: center;}

.navega-descubre .layer-02 .trigger{
    
width: 322px;
    
height: 211px;
    
background: url(images/layout-02/noise.gif) center / contain no-repeat;
    
position: relative;
    
transform: translateX(246px) translateY(-153px);
    
cursor: pointer;
}

.navega-descubre .layer-02 .trigger:hover{}

.navega-descubre .layer-03{height: 108%;transform: translateX(-50%) translateY(0%) translateZ(-70px);}

.navega-descubre .layer-03 .image {background: url(images/layout-02/layer-03.webp) center / cover no-repeat;}

.navega-descubre .layer-04{height: 108%;transform: translateX(-50%) translateY(0%) translateZ(-70px);}

.navega-descubre .layer-04 .image {background: url(images/layout-02/layer-04.webp) center / cover no-repeat;}

.navega-descubre .layer-05{height: 100%;transform: translateX(-50%) translateY(-50%) translateZ(-299px);}

.navega-descubre .layer-05 .image {background: url(images/layout-02/layer-05.webp) center / cover no-repeat;}

.navega-descubre .actions {transform: translateX(-83%) translateY(-58%) translateZ(0px);width: 460px!important;}

.navega-descubre .actions .content{
    width: 388px;
    height: auto;
    display: block;
}

.navega-descubre h1{

text-transform: uppercase;

font-weight: 600;

width: 400px;

color: black;

font-size: 50px;

line-height: 1.2;

margin-block-end: 0.18em;
}
    
.navega-descubre h1 mark{
    
background: transparent;
    
padding: 0.1em;
    
color: #2889cb;
}

.navega-descubre mark{
    
background: #2889cb;
    
color: white;
}

.navega-descubre .mark-01{
    
background: url(images/marker-02.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 11px 9px;
    
margin: 0;
    }



/*
Seccion 3
*/

.nuestros-poderes {perspective-origin: 50% 50%;z-index: 4;}

.nuestros-poderes .layer-01 {height: 100%;transform: translateX(-64%) translateY(-44%) translateZ(100px);pointer-events: none;}

.nuestros-poderes .layer-01 .image {background: url(images/layout-03/layer-01.webp) center / cover no-repeat;}

.nuestros-poderes .layer-02 {transform: translateX(-46%) translateY(-40%) translateZ(50px);pointer-events: none;}

.nuestros-poderes .layer-02 .image {}

.nuestros-poderes .layer-02 .back-01 {background: url(images/layout-03/layer-02-green.webp) center / cover no-repeat;}

.nuestros-poderes .layer-02 .back-02 {background: url(images/layout-03/layer-02-yellow.webp) center / cover no-repeat;}

.nuestros-poderes .layer-02 .back-03 {background: url(images/layout-03/layer-02-blue.webp) center / cover no-repeat;}

.nuestros-poderes .layer-02 .back-04 {background: url(images/layout-03/layer-02-purple.webp) center / cover no-repeat;}

.nuestros-poderes .layer-03 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-10px);}

.nuestros-poderes .layer-03 .image {background: url(images/layout-03/layer-03.webp) center / cover no-repeat;}

.nuestros-poderes .layer-04 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-286px);}

.nuestros-poderes .layer-04 .image {background: url(images/layout-04/layer-04.webp) center / cover no-repeat;}

.nuestros-poderes .actions {transform: translateX(-50%) translateY(-50%) translateZ(0px);}

.nuestros-poderes .actions .content{
    width: 600px;
    height: auto;
    text-align: center;
    perspective: 200px;
}

.verne-poderes{
  transform-style: preserve-3d;
  perspective: 500px;
}

.nuestros-poderes h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 50px;

line-height: 1.2;

text-align: center;

margin-block-end: 0.18em;
}
    
.nuestros-poderes h1 mark{
    
color: #ffa956;
    
padding: 0.1em;
    
background: transparent;
}

.nuestros-poderes .slider{
    position: relative;
    transform-style: preserve-3d;
}

.nuestros-poderes .slider  .content-slide{

display: flex;

align-items: center;
}

.nuestros-poderes .slider  .slide .picture{

width: 300px;

padding-top: 46%;
}

.nuestros-poderes .slider  .slide .content{
    
text-align: left;
}

.nuestros-poderes .slider  .slide h2{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 32px;
}

.nuestros-poderes .slider  .slide p{

font-size: 14px;
}

.nuestros-poderes .slider  .slide .img-01{

background: url(images/layout-03/sliders/poderes-01.webp) center / contain no-repeat;
}

.nuestros-poderes .slider  .slide .img-02{

background: url(images/layout-03/sliders/poderes-02.webp) center / contain no-repeat;
}

.nuestros-poderes .slider  .slide .img-03{

background: url(images/layout-03/sliders/poderes-03.webp) center / contain no-repeat;
}

.nuestros-poderes .slider  .slide .img-04{

background: url(images/layout-03/sliders/poderes-04.webp) center / contain no-repeat;
}

.nuestros-poderes  .navigation{

}

.nuestros-poderes  .navigation .prev{
    
}

.nuestros-poderes  .navigation .next{
    
}

.nuestros-poderes mark{
    
background: #ffa956;
    
color: white;
}

.nuestros-poderes .mark-01{
    
background: url(images/marker-03.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 10px 10px;
    
margin: 0;
    }

/*
Seccion 4
*/

.la-tripulacion {perspective-origin: 50% 50%;z-index: 3;}

.la-tripulacion .layer-01 {height: 100%;transform: translateX(-50%) translateY(-50%) translateZ(100px);pointer-events: none;}

.la-tripulacion .layer-01 .image {background: url(images/layout-04/layer-01.webp) center / cover no-repeat;}

.la-tripulacion .layer-02 {transform: translateX(-50%) translateY(-50%) translateZ(50px);pointer-events: none;}

.la-tripulacion .layer-02 .image {background: url(images/layout-04/layer-02.webp) center / cover no-repeat;}

.la-tripulacion .layer-03 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-10px);}

.la-tripulacion .layer-03 .image {background: url(images/layout-04/layer-03.webp) center / cover no-repeat;}

.la-tripulacion .layer-04 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-286px);}

.la-tripulacion .layer-04 .image {background: url(images/layout-04/layer-04.webp) center / cover no-repeat;}

.la-tripulacion .actions {transform: translateX(-36%) translateY(-58%) translateZ(0px);width: 1564px;position: absolute;height: 942px;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;}

.la-tripulacion .actions .content{
    width: 510px;
    height: auto;
}

.la-tripulacion .slider  .content-slide{

display: flex;

align-items: center;

flex-wrap: wrap;

position: relative;

width: 100%;

max-width: 490px;
}

.verne-tripulacion{
    
height: 510px;
    
transform-style: preserve-3d;
}

.verne-tripulacion .navigation{
  
top: -10px;
  
width: 80px;
  
right: 20px;
}

.la-tripulacion .slider  .content-menu{

display: flex;

align-items: center;

flex-wrap: wrap;
}
    

.la-tripulacion h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 50px;

line-height: 1.2;

margin-block-end: 0.18em;
}
    
.la-tripulacion h1 mark{
    
background: transparent;
    
padding: 0.1em;
    
color: #7363b9;
}

.la-tripulacion .slider{
    transform-style: preserve-3d;
    transform-style: preserve-3d;
    perspective: 500px;
}

.la-tripulacion .slider .verne-tripulacion .slide{

display: flex;

align-items: center;

flex-wrap: wrap;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .picture{

width: 412px;

padding-top: 48%;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .content{
    
text-align: left;
}

.la-tripulacion .slider .verne-tripulacion .slide-t h2{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 32px;
}

.la-tripulacion .slider .verne-tripulacion .slide p{

font-size: 14px;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-01{background: url(images/layout-04/tripulacion/face-javier.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-02{background: url(images/layout-04/tripulacion/face-lily.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-03{background: url(images/layout-04/tripulacion/face-diego.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-04{background: url(images/layout-04/tripulacion/face-jessy.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-05{background: url(images/layout-04/tripulacion/face-alex.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-06{background: url(images/layout-04/tripulacion/face-lia.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-07{background: url(images/layout-04/tripulacion/face-omar.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-08{background: url(images/layout-04/tripulacion/face-ivan.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-09{background: url(images/layout-04/tripulacion/face-verne.webp) center / contain no-repeat;}

.la-tripulacion .slider .verne-tripulacion .color-1 mark{color: #3b7ac0;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-2 mark{color: #ff904e;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-3 mark{color: #7363b9;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-4 mark{color: #84d45d;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-5 mark{color: #4ebdff;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-6 mark{color: #d6455c;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-7 mark{color: black;font-weight: bold;background: #ffca4e;}
.la-tripulacion .slider .verne-tripulacion .color-8 mark{color: #000000;font-weight: bold;background: #ffef2e;}

.la-tripulacion .slider .verne-tripulacion .slide-t .img-01{background: url(images/layout-04/tripulacion/javier.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-02{background: url(images/layout-04/tripulacion/lily.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-03{background: url(images/layout-04/tripulacion/diego.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-04{background: url(images/layout-04/tripulacion/jessy.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-05{background: url(images/layout-04/tripulacion/alex.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-06{background: url(images/layout-04/tripulacion/lia.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-07{background: url(images/layout-04/tripulacion/omar.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-08{background: url(images/layout-04/tripulacion/ivan.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide .img-09{background: url(images/layout-04/tripulacion/verne.webp) center / contain no-repeat;}

.la-tripulacion .slider .verne-tripulacion .slide-t .close{
    
position: absolute;
    
top: 0;
    
right: 0;
    
cursor: pointer;
    
font-size: 40px;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .close:hover{
    transform: scale(1.1);
}

.la-tripulacion .slider .verne-tripulacion .slide-t p{
    font-size: 13px;
    }

.la-tripulacion .slider .profile{

width: 151px;

position: relative;

padding-top: 30%;

transition: all ease .2s;

cursor: pointer;
}

.la-tripulacion .slider .profile:hover{
    transform: scale(1.1) rotate(10deg);
}

.la-tripulacion .slider .profile a{
    
display: block;
    
width: 100%;
    
height: 100%;
    
position: absolute;
    
top: 0;
    
left: 0;
}

.la-tripulacion mark{
    
background: #7363b9;
    
color: white;
}

.la-tripulacion .mark-01{
     
background: url(images/marker-04.svg);
     
color: black;
     
box-sizing: border-box;
     
background-repeat: no-repeat;
     
background-size: 100%;
     
background-position: center;
     
padding: 10px;
     
margin: 0;
    }

/*
Seccion 5
*/

.que-hacemos {perspective-origin: 50% 50%;z-index: 2;}

.que-hacemos .layer-01 {height: 100%;width: 1730px!important;transform: translateX(-50%) translateY(-30%) translateZ(60px);pointer-events: none;}

.que-hacemos .layer-01 .image {background: url(images/layout-05/layer-01.webp) center / cover no-repeat;}

.que-hacemos .layer-02 {transform: translateX(-50%) translateY(-50%) translateZ(50px);pointer-events: none;}

.que-hacemos .layer-02 .image {background: url(images/layout-05/layer-02.webp) center / cover no-repeat;}

.que-hacemos .layer-03 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-10px);}

.que-hacemos .layer-03 .image {background: url(images/layout-05/layer-03.webp) center / cover no-repeat;}


.que-hacemos .actions {transform: translateX(-54%) translateY(-50%) translateZ(0px);width: 1564px;position: absolute;height: 942px;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;}

.que-hacemos .actions .content{
    width: 480px;
    height: auto;
}

.que-hacemos h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 50px;

line-height: 1.2;
}
    
.que-hacemos h1 mark{
    
background: rgb(255 189 22);
    
padding: 0.1em;
    
color: black;
}

.que-hacemos mark{
    
background: #cbfa40;
    
color: black;
}

.que-hacemos .mark-01{
    
    background: url(images/line-marker-05.svg);
        
    color: black;
        
    box-sizing: border-box;
        
    background-repeat: no-repeat;
        
    background-size: 100%;
        
    background-position: center;
        
    padding: 0;
        
    margin: 0;
    }

    .que-hacemos .mark-02{
    
        background: url(images/line-marker-05.svg);
            
        color: black;
            
        box-sizing: border-box;
            
        background-repeat: no-repeat;
            
        background-size: 100%;
            
        background-position: center;
            
        padding: 0;
            
        margin: 0;
        }

        .que-hacemos .mark-03{
    
background: url(images/marker-05.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 16px 13px;
    
margin: 0;
    
}

            .que-hacemos .mark-04{
    
                background: url(images/line-marker-05.svg);
                    
                color: black;
                    
                box-sizing: border-box;
                    
                background-repeat: no-repeat;
                    
                background-size: 100%;
                    
                background-position: center;
                    
                padding: 0;
                    
                margin: 0;
                }

/*
Seccion 6
*/

.que-ofrecemos {perspective-origin: 50% 50%;z-index: 1;}

.que-ofrecemos .layer-01 {height: 100%;transform: translateX(-45%) translateY(-56%) translateZ(70px);pointer-events: none;}

.que-ofrecemos .layer-01 .image {background: url(images/layout-06/layer-01.webp) center / cover no-repeat;}

.que-ofrecemos .layer-02 {transform: translateX(-54%) translateY(-40%) translateZ(50px);pointer-events: none;}

.que-ofrecemos .layer-02 .image {background: url(images/layout-06/layer-02.webp) center / cover no-repeat;}

.que-ofrecemos .layer-03 {height: 108%;transform: translateX(-33%) translateY(-52%) translateZ(-10px);}

.que-ofrecemos .layer-03 .image {background: url(images/layout-06/layer-03.webp) center / cover no-repeat;}

.que-ofrecemos .layer-04 {height: 108%;transform: translateX(-50%) translateY(-50%) translateZ(-286px);}

.que-ofrecemos .layer-04 .image {background: url(images/layout-06/layer-04.webp) center / cover no-repeat;}


.que-ofrecemos .actions {transform: translateX(-54%) translateY(-50%) translateZ(0px);}

.que-ofrecemos .actions .content{
    width: 545px;
    height: auto;
    position: relative;
}

.que-ofrecemos h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 50px;

line-height: 1.2;
}
    
.que-ofrecemos h1 mark{
    
background: #2889cb;
    
padding: 0.1em;
    
color: white;
}

.que-ofrecemos .slider{height: 330px;display: flex;align-items: center;justify-content: center;transform-style: preserve-3d;perspective: 500px;}

.que-ofrecemos .slider .slide{

display: flex;

align-items: center;

width: 10;
}

.que-ofrecemos .slider .slide .content-slide .picture{

width: 300px;

padding-top: 46%;
}

.que-ofrecemos .slider .slide .content-slide .content-text{
    
text-align: left;
    
width: 344px;
    
margin: auto;
}

.que-ofrecemos .slider .slide h1{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 32px;

line-height: 1.1;

}

.que-ofrecemos .slider .slide h2{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 20px;

color: #2889cb;
}

.que-ofrecemos .slider .slide p{

font-size: 14px;
}

.que-ofrecemos mark{
    
background: #2889cb;
    
color: white;
}

.que-ofrecemos .mark-01{
    
background: url(images/marker-06.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: contain;
    
background-position: center;
    
padding: 19px 10px;
    
margin: 0;
    }

    .verne-ofrecemos{
      transform-style: preserve-3d;
      perspective: 500px;
    }

/*
Main Structure
*/

.screen-7 {
}

.screen-7 .container-section {width: 100%;height: 100vh;position: relative;display: flex;align-items: center;justify-content: center;}

.screen-7 .map {background: url(images/verne-map.webp) center / cover no-repeat;height: 100vh;width: 100%;position: absolute;top: 0;left: 0;}

.screen-7 .box-pos {
    transform: translateX(-326px) translateY(-268px);
    mix-blend-mode: multiply;
}

.screen-7 .box-pos h1{text-transform: uppercase;color: #000000;font-size: 50px;width: 298px;line-height: 1.1;}

.screen-7 .box-pos mark{background: #7363b9;color: white;padding: 0.1em;}

.screen-8 {
}

.screen-8 .container-section {display: flex;align-items: center;justify-content: center;width: 100%;max-width: 980px;padding: 20px 0;margin: auto;}

.screen-8 .image {width: 100%;background: url(images/verne-contacto.webp) center / contain no-repeat;padding-top: 50%;mix-blend-mode: multiply;}

.screen-8 .box-pos {width: 100%;border-left: 1px solid black;padding: 0 20px;}

.screen-8 .box-pos h1{
}

.screen-8 .box-pos textarea{width: 100%;height: 200px;background: transparent;border: 1px solid #a7c734;}

.screen-8 .box-pos span{

color: black;

font-size: 13px;
}

.screen-8 .box-pos label{
    
text-transform: uppercase;
    
font-weight: 600;
    
letter-spacing: 2px;
    
font-size: 22px;
}

.screen-8 .box-pos button{background: black;color: white;border: 0px;padding: 1.2em;transition: all .4s ease;}

.screen-8 .box-pos button:hover{background: yellow;color: black;border: 0px;padding: 1.2em;}

.footer {background: black;padding: 70px 0;}

.footer .container-section {margin: auto;text-align: center;}

.footer .image {background: url(images/footer-verne.webp) center / contain no-repeat;width: 100%;max-width: 188px;height: 60px;margin: auto;}

.footer .box-pos {color: white;font-size: 14px;}

.footer a{

color: white;

text-decoration: none;
}

.footer a:hover{
    
background: red;
    
color: black;
    
text-decoration: none;
}

.video{

position: fixed;

top: 0;

left: 0;

z-index: 920;

background: #1c1a1c;

width: 100%;
}

.video .close{

position: fixed;

top: 16px;

right: 16px;

font-size: 30px;

color: black;

background: white;

cursor: pointer;

padding: 20px;

width: 60px;

height: 60px;

display: flex;

align-items: center;

justify-content: center;
}

.video video{
    
width: 100%;
    
height: 100vh;
}

.turn-off{
    
display: none;
}

.f-columns{

display: flex;

width: 100%;

max-width: 400px;

margin: 20px auto;

align-items: center;
}

.f-columns .image{
  
}

.f-columns .border{
  
height: 60px;
}


.f-columns .direction{
  
color: white;
  
width: 150px;
}






@media only screen and (max-width: 920px) {
    
    /*
Menu Structure
*/

.logo{

position: fixed;

left: 0px;

top: 16px;

width: 166px;

background: url(images/hey-verne.webp) center / contain no-repeat;

padding-top: 14%;

z-index: 999;
}

.logo a{
    
display: block;
    
width: 100%;
    
height: 100%;
    
position: absolute;
    
top: 0;
}

.menu{

width: 60px;

height: 60px;

overflow: hidden;

position: fixed;

top: 14px;

right: 14px;

background: rgb(0 0 0);

z-index: 900;

border-radius: 0;

box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
  6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
  12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
  22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
  41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
  100px 100px 80px rgba(0, 0, 0, 0.07);
}

.menu .burger{
    
color: white;
    
font-size: 30px;
    
width: 60px;
    
height: 60px;
    
margin-bottom: 10px;
    
cursor: pointer;
    
display: flex;
    
align-items: center;
    
justify-content: center;
}

.menu .burger:hover{}

.menu .links{
    
}

.overlay{

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 890;

display: none;
}

.menu .links ul{
    
list-style-type: none;
    
margin-block-start: 0;
    
margin-block-end: 0;
    
margin-inline-start: 0px;
    
margin-inline-end: 0px;
    
padding-inline-start: 0;
}

.menu .links ul li{
    
}

.menu .links a{
    
color: white;
    
text-decoration: none;
    
width: 100%;
    
display: block;
    
padding-left: 12px;
}

.menu .links a:hover{
    
background: yellow;
    
color: black;
}

.hide-icon{

display: none;
}

/*
Navigation Structure
*/

.navigation{

position: absolute;

display: flex;

align-items: center;

justify-content: space-between;

width: calc(100% + 16px);

transform: translateX(-10px);

top: 0%;
}

.navigation .prev{
    
cursor: pointer;
    
font-size: 40px;
}

.navigation .next{
    
cursor: pointer;
    
font-size: 40px;
}

.navigation .prev:hover{
    
transform: scale(1.1);
}

.navigation .next:hover{
    
transform: scale(1.1);
}


/*
Main Tracks Structure
*/

.tracks {display: block;width: 100%;height: auto;}

.screen-1 {width: 100%;height: 400vh;border: 0px solid black;display: flex;align-items: center;}

.screen-2 {width: 100%;height: 200vh;border: 0px solid black;display: flex;align-items: center;}

.screen-3 {width: 100%;height: 200vh;border: 0px solid black;display: flex;align-items: center;}

.screen-4 {width: 100%;height: 200vh;border: 0px solid black;display: flex;align-items: center;}

.screen-5 {width: 100%;height: 200vh;border: 0px solid black;display: flex;align-items: center;}

.screen-6 {width: 100%;height: 200vh;border: 0px solid black;display: flex;align-items: center;}

.screen-7 {width: 100%;height: auto;border: 0px solid black;display: flex;align-items: center;justify-content: center;}

.screen-8 {width: 100%;height: auto;border: 0px solid black;display: flex;align-items: flex-start;}
/*
Slider Structure
*/

.nav-slider{


}

.nav-slider .next{
    

}

.nav-slider .prev{
    

}

#espacio, #nosotros, #navega, #poderes, #tripulacion, #hacemos, #ofrecemos{
  transform-style: preserve-3d;
}

.owl-theme .owl-controls{
    display: none!important;
}

.socials{

z-index: 777;

position: fixed;

bottom: 6px;

left: 50%;

transform: translateX(-50%);

display: flex;

justify-content: space-around;

width: 220px;

background: black;

border-radius: 30px;
}

.socials a{
    
color: white;
    
padding: 5px;
    
font-size: 18px;
    
width: 34px;
    
height: 34px;
    
display: flex;
    
justify-content: center;
    
align-items: center;
    
text-decoration: none;
    
transition: all .4s ease;
}

.socials a:hover{
    
color: yellow;
}

/*
Main Structure
*/

.scene-verne {position: absolute;width: 100%;height: auto;z-index: 22;top: 0;left: 0;perspective: 200px;transform-style: preserve-3d;mix-blend-mode: multiply;}

.section {width: 100%;position: relative;height: 930px;transform-style: preserve-3d;left: 0;}

.section .container{width: 100%;position: relative;height: 100%;top: 0;left: 0;transform-style: unset;padding-right: 0;padding-left: 0;}

.section .container .layer{width: 100%;position: absolute;height: 983px;top: 0;left: 0;display: flex;align-items: center;justify-content: center;z-index: 1000;}

.section .container .layer .image{width: 100%;height: 100%;left: 0;top: 0;transform: unset;position: absolute;}

/*
Seccion 0
*/

.espacio {perspective-origin: unset;z-index: 7;transform: unset;width: 100%;height: 100vh;}

.espacio .layer{
  transform: none;
  width: 100%;
  height: 100%;
}

.espacio .layer .image{
  background: url(images/layout-00/layer-1.webp) center / cover no-repeat;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.espacio .layer .image button{background: #91e24b;color: black;text-transform: uppercase;padding: 20px 30px;border-radius: 40px;font-size: 18px;text-decoration: none;transition: padding .4s ease;}

.espacio .layer .image button:hover{padding: 26px 42px;}

.espacio .layer-01 {transform: translateX(0%) translateY(50px) translateZ(0px);pointer-events: none;z-index: 999!important;}

.espacio .layer-01 .image {background: url(images/layout-00/layer-01.webp) 24% / 170% no-repeat;background-position: 53% 91%;}

.espacio .layer-02 {transform: translateX(0%) translateY(116px) translateZ(10px);pointer-events: none;z-index: 999!important;}

.espacio .layer-02 .image {background: url(images/layout-00/layer-02.webp) center 28% / 231% no-repeat;}

.espacio .layer-03 {height: 108%;transform: translateX(0%) translateY(12px) translateZ(-50px);pointer-events: none;z-index: 999!important;}

.espacio .layer-03 .image {background: url(images/layout-00/layer-03.webp) 53% 24% / 253% no-repeat;}

.espacio .layer-04 {height: 100%!important;transform: unset;}

.espacio .layer-04 .image {}

.outer-space{
  background: url(images/layout-00/space.webp) center / cover no-repeat;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
}

/*
Seccion 1
*/

.somos-plataforma {perspective-origin: unset;z-index: 6;height: 300vh;}

.somos-plataforma .layer-01 {transform: translateX(0%) translateY(100%) translateZ(100px);pointer-events: none;}

.somos-plataforma .layer-01 .image {background: url(images/layout-01/layer-01.webp) center / cover no-repeat;background-position: 42% 46%;}

.somos-plataforma .layer-02 {transform: translateX(-50%) translateY(-50%) translateZ(50px);pointer-events: none;display: none!important;}

.somos-plataforma .layer-02 .image {background: url(images/layout-01/layer-02.webp) center / cover no-repeat;}

.somos-plataforma .layer-03 {height: 108%;transform: translateX(0%) translateY(0%) translateZ(-10px);}

.somos-plataforma .layer-03 .image {background: url(images/layout-01/layer-03.webp) center / 258% no-repeat;background-position: 58% 48%;}

.somos-plataforma .layer-04 {height: 108%;transform: translateX(0%) translateY(155%) translateZ(-200px);}

.somos-plataforma .layer-04 .image {background: url(images/layout-01/layer-04.webp) center / cover no-repeat;}

.somos-plataforma .layer-05 {height: 930px;transform: translateX(-50%) translateY(-50%) translateZ(-300px);display: none!important;}

.somos-plataforma .layer-05 .image {background: url(images/layout-01/layer-05.webp) center / cover no-repeat;}

.somos-plataforma .actions {transform: translateX(-50%) translateY(-65%) translateZ(0px);left: 50%!important;top: 50%!important;}

.somos-plataforma .actions .content{
    width: 100%;
    height: auto;
    display: block;
    padding: 20px;
    text-align: center;
}

.somos-plataforma h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 30px;

line-height: 1.2;

text-align: center;
}

.somos-plataforma h1 mark{

background: #cbfa40;

padding: 0.1em;

color: black;
}

.somos-plataforma .mark-01{

}

.somos-plataforma .mark-02{

}

.somos-plataforma .mark-01{
    
background: url(images/line-marker-01.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 0;
    
margin: 0;
}

.somos-plataforma .mark-02{
    
    background: url(images/marker-01.svg);
        
    color: black;
        
    box-sizing: border-box;
        
    background-repeat: no-repeat;
        
    background-size: 88%, 9px, contain;
        
    background-position: center;
        
    padding: 4% 3%;
        
    margin: 0;
    }



/*
Seccion 2
*/

.navega-descubre {perspective-origin: 50% 50%;z-index: 5;height: 200vh;}

.navega-descubre .layer-01 {height: 100%;transform: translateX(-50%) translateY(-50%) translateZ(0px);pointer-events: none;}

.navega-descubre .layer-01 .image {background: url(images/layout-02/layer-01.webp) center / cover no-repeat;}

.navega-descubre .layer-02 {transform: translateX(0%) translateY(88%) translateZ(0px);}

.navega-descubre .layer-02 .image {background: url(images/layout-02/layer-02.webp) center / cover no-repeat;background-position: 73% 50%;display: flex;align-items: center;justify-content: center;}

.navega-descubre .layer-02 .trigger{
    
width: 249px;
    
height: 168px;
    
background: url(images/layout-02/noise.gif) center / contain no-repeat;
    
position: relative;
    
transform: translateX(-2%) translateY(-80%);
    
cursor: pointer;
    
z-index: 1000;
}

.navega-descubre .layer-02 .trigger:hover{}

.navega-descubre .layer-03{height: 108%;transform: translateX(0%) translateY(0%) translateZ(0px);}

.navega-descubre .layer-03 .image {background: url(images/layout-02/layer-03.webp) center / 156% no-repeat;background-position: 50% 72%;}

.navega-descubre .layer-04{height: 108%;transform: translateX(0%) translateY(14%) translateZ(0px);}

.navega-descubre .layer-04 .image {background: url(images/layout-02/layer-04.webp) 44% / 199% no-repeat;}

.navega-descubre .layer-05{height: 100%;transform: translateX(0%) translateY(-34%) translateZ(0px);}

.navega-descubre .layer-05 .image {background: url(images/layout-02/layer-05.webp) center / cover no-repeat;}

.navega-descubre .actions {
  transform: translateX(-50%) translateY(8%) translateZ(0px);
  left: 50%!important;
  top: 50%!important;
  width: 100%!important;
  height: 258px!important;
  pointer-events: none;
  }

.navega-descubre .actions .content{
    width: 100%;
    height: auto;
    display: block;
    padding: 20px;
    text-align: center;
}

.navega-descubre h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 30px;

line-height: 1.2;

margin-block-end: 0.18em;

text-align: center;
}
    
.navega-descubre h1 mark{
    
background: white;
    
padding: 0.1em;
    
color: #2889cb;
}

.navega-descubre mark{
    
background: #2889cb;
    
color: white;
}

.navega-descubre .mark-01{
    
background: url(images/marker-02.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 11px 9px;
    
margin: 0;
    }

.navega-descubre .container{
  transform-style: preserve-3d;
}

/*
Seccion 3
*/

.nuestros-poderes {perspective-origin: 50% 50%;z-index: 4;height: 200vh;}

.nuestros-poderes .layer-01 {height: 100%;transform: translateX(0%) translateY(-44%) translateZ(100px);pointer-events: none;}

.nuestros-poderes .layer-01 .image {background: url(images/layout-03/layer-01.webp) center / 200% no-repeat;background-position: 50% 50%;}

.nuestros-poderes .layer-02 {transform: translateX(0%) translateY(-20%) translateZ(50px);pointer-events: none;}

.nuestros-poderes .layer-02 .image {background: url(images/layout-03/layer-02.webp) center / 400% no-repeat;background-position: 25% 182%;}

.nuestros-poderes .layer-03 {height: 108%;transform: translateX(0%) translateY(-50%) translateZ(-10px);}

.nuestros-poderes .layer-03 .image {background: url(images/layout-03/layer-03.webp) center / cover no-repeat;background-position: 50% 50%;}

.nuestros-poderes .layer-04 {height: 108%;transform: translateX(0%) translateY(-50%) translateZ(-286px);}

.nuestros-poderes .layer-04 .image {background: url(images/layout-04/layer-04.webp) center / cover no-repeat;}

.nuestros-poderes .actions {
  transform: translateX(-50%) translateY(-10%) translateZ(0px);
  left: 50%!important;
  top: 50%!important;
  }

.nuestros-poderes .actions .content{
    width: 100%;
    height: auto;
    text-align: center;
    perspective: 200px;
    padding: 20px;
}

.verne-poderes{
  transform-style: preserve-3d;
  perspective: 500px;
}

.nuestros-poderes h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 30px;

line-height: 1.2;

text-align: center;

margin-block-end: 0.18em;
}
    
.nuestros-poderes h1 mark{
    
color: #ffa956;
    
padding: 0.1em;
    
background: transparent;
}

.nuestros-poderes .slider{
    position: relative;
    transform-style: preserve-3d;
    height: 531px;
}

.nuestros-poderes .slider  .content-slide{

display: flex;

align-items: center;

flex-wrap: wrap;
}

.nuestros-poderes .slider  .slide .picture{

width: 100%;

padding-top: 56%;

margin: auto;
}

.nuestros-poderes .slider  .slide .content{
    
text-align: left;
}

.nuestros-poderes .slider  .slide h2{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 32px;

line-height: 1;

text-align: center;
}

.nuestros-poderes .slider  .slide p{

font-size: 14px;

text-align: center;
}

.nuestros-poderes .slider  .slide .img-01{

background: url(images/layout-03/sliders/poderes-01.webp) center / contain no-repeat;
}

.nuestros-poderes .slider  .slide .img-02{

background: url(images/layout-03/sliders/poderes-02.webp) center / contain no-repeat;
}

.nuestros-poderes .slider  .slide .img-03{

background: url(images/layout-03/sliders/poderes-03.webp) center / contain no-repeat;
}

.nuestros-poderes .slider  .slide .img-04{

background: url(images/layout-03/sliders/poderes-04.webp) center / contain no-repeat;
}

.nuestros-poderes  .navigation{

}

.nuestros-poderes  .navigation .prev{
    
}

.nuestros-poderes  .navigation .next{
    
}

.nuestros-poderes mark{
    
background: #ffa956;
    
color: white;
}

.nuestros-poderes .mark-01{
    
background: url(images/marker-03.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 10px 10px;
    
margin: 0;
    }

/*
Seccion 4
*/

.la-tripulacion {perspective-origin: 50% 50%;z-index: 3;height: 200vh;}

.la-tripulacion .layer-01 {height: 100%;transform: translateX(0%) translateY(-47%) translateZ(100px);pointer-events: none;}

.la-tripulacion .layer-01 .image {background: url(images/layout-04/layer-01.webp) center / cover no-repeat;background-position: 39% 56%;}

.la-tripulacion .layer-02 {transform: translateX(0%) translateY(-36%) translateZ(50px);pointer-events: none;}

.la-tripulacion .layer-02 .image {background: url(images/layout-04/layer-02.webp) center / 300% no-repeat;background-position: 31% 58%;}

.la-tripulacion .layer-03 {height: 108%;transform: translateX(0%) translateY(10%) translateZ(-10px);}

.la-tripulacion .layer-03 .image {background: url(images/layout-04/layer-03.webp) center / 399% no-repeat;background-position: 29% -24%;}

.la-tripulacion .layer-04 {height: 108%;transform: translateX(0%) translateY(-47%) translateZ(-286px);}

.la-tripulacion .layer-04 .image {background: url(images/layout-04/layer-04.webp) center / cover no-repeat;}

.la-tripulacion .actions {transform: translateX(-50%) translateY(-10%) translateZ(0px);width: 100%;position: absolute;height: 942px;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;padding: 0;}

.la-tripulacion .actions .content{
    width: 100%;
    height: auto;
    text-align: center;
}

.la-tripulacion .slider  .content-slide{

display: flex;

align-items: center;

flex-wrap: wrap;

position: relative;

width: 100%;

max-width: 490px;

padding: 20px;
}

.verne-tripulacion{
    
height: 510px;
    
transform-style: preserve-3d;
}

.la-tripulacion .slider  .content-menu{

display: flex;

align-items: center;

flex-wrap: wrap;

justify-content: center;

padding-top: 32px;
}
    

.la-tripulacion h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 30px;

line-height: 1.2;

margin-block-end: 0.18em;
}
    
.la-tripulacion h1 mark{
    
background: transparent;
    
padding: 0.1em;
    
color: #7363b9;
}

.la-tripulacion .slider{
    transform-style: preserve-3d;
    transform-style: preserve-3d;
    perspective: 500px;
}

.la-tripulacion .slider .verne-tripulacion .slide{

display: flex;

align-items: center;

flex-wrap: wrap;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .picture{

width: 412px;

padding-top: 48%;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .content{
    
text-align: left;
}

.la-tripulacion .slider .verne-tripulacion .slide-t h2{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 32px;
}

.la-tripulacion .slider .verne-tripulacion .slide p{

font-size: 14px;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-01{background: url(images/layout-04/tripulacion/face-javier.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-02{background: url(images/layout-04/tripulacion/face-lily.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-03{background: url(images/layout-04/tripulacion/face-diego.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-04{background: url(images/layout-04/tripulacion/face-jessy.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-05{background: url(images/layout-04/tripulacion/face-alex.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-06{background: url(images/layout-04/tripulacion/face-lia.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-07{background: url(images/layout-04/tripulacion/face-omar.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-08{background: url(images/layout-04/tripulacion/face-ivan.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-profile-09{background: url(images/layout-04/tripulacion/face-verne.webp) center / contain no-repeat;}

.la-tripulacion .slider .verne-tripulacion .color-1 mark{color: #3b7ac0;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-2 mark{color: #ff904e;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-3 mark{color: #7363b9;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-4 mark{color: #84d45d;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-5 mark{color: #4ebdff;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-6 mark{color: #d6455c;font-weight: bold;background: transparent;}
.la-tripulacion .slider .verne-tripulacion .color-7 mark{color: black;font-weight: bold;background: #ffca4e;}
.la-tripulacion .slider .verne-tripulacion .color-8 mark{color: #000000;font-weight: bold;background: #ffef2e;}

.la-tripulacion .slider .verne-tripulacion .slide-t .img-01{background: url(images/layout-04/tripulacion/javier.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-02{background: url(images/layout-04/tripulacion/lily.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-03{background: url(images/layout-04/tripulacion/diego.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-04{background: url(images/layout-04/tripulacion/jessy.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-05{background: url(images/layout-04/tripulacion/alex.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-06{background: url(images/layout-04/tripulacion/lia.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-07{background: url(images/layout-04/tripulacion/omar.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide-t .img-08{background: url(images/layout-04/tripulacion/ivan.webp) center / contain no-repeat;}
.la-tripulacion .slider .verne-tripulacion .slide .img-09{background: url(images/layout-04/tripulacion/verne.webp) center / contain no-repeat;}

.la-tripulacion .slider .verne-tripulacion .slide-t .close{
    
position: absolute;
    
top: 0;
    
right: 34px;
    
cursor: pointer;
    
font-size: 40px;
}

.la-tripulacion .slider .verne-tripulacion .slide-t .close:hover{
    transform: scale(1.1);
}

.la-tripulacion .slider .verne-tripulacion .slide-t p{
    font-size: 13px;
    }

.la-tripulacion .slider .profile{

width: 32.5%;

position: relative;

padding-top: 35%;

transition: all ease .2s;

cursor: pointer;

margin-top: -16px;

background-size: 113%!important;
}

.la-tripulacion .slider .profile:hover{
    transform: scale(1.1) rotate(10deg);
}

.la-tripulacion .slider .profile a{
    
display: block;
    
width: 100%;
    
height: 100%;
    
position: absolute;
    
top: 0;
    
left: 0;
}

.la-tripulacion mark{
    
background: #7363b9;
    
color: white;
}

.la-tripulacion .mark-01{
     
background: url(images/marker-04.svg);
     
color: black;
     
box-sizing: border-box;
     
background-repeat: no-repeat;
     
background-size: 100%;
     
background-position: center;
     
padding: 10px;
     
margin: 0;
    }

/*
Seccion 5
*/

.que-hacemos {perspective-origin: 50% 50%;z-index: 2;height: 200vh;}

.que-hacemos .layer-01 {height: 100%;width: 100%!important;transform: translateX(0%) translateY(100%) translateZ(60px);pointer-events: none;}

.que-hacemos .layer-01 .image {background: url(images/layout-05/layer-01.webp) center / 250% no-repeat;background-position: 73% 50%;}

.que-hacemos .layer-02 {transform: translateX(0%) translateY(-18%) translateZ(50px);pointer-events: none;}

.que-hacemos .layer-02 .image {background: url(images/layout-05/layer-02.webp) center center / cover no-repeat;background-position: 22% 70%;}

.que-hacemos .layer-03 {height: 108%;transform: translateX(0%) translateY(-56%) translateZ(-10px);background-position: 50% 50%;}

.que-hacemos .layer-03 .image {background: url(images/layout-05/layer-03.webp) center / cover no-repeat;}


.que-hacemos .actions {transform: translateX(-50%) translateY(-24%) translateZ(0px);width: 100%;position: absolute;height: 942px;top: 50%;left: 50%;display: flex;align-items: center;justify-content: center;padding: 20px;}

.que-hacemos .actions .content{
    width: 100%;
    height: auto;
    text-align: center;
}

.que-hacemos h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 30px;

line-height: 1.2;
}
    
.que-hacemos h1 mark{
    
padding: 0.1em;
    
color: black;
}

.que-hacemos mark{
    
background: #cbfa40;
    
color: black;
}

.que-hacemos .mark-01{
    
    background: url(images/line-marker-05.svg);
        
    color: black;
        
    box-sizing: border-box;
        
    background-repeat: no-repeat;
        
    background-size: 100%;
        
    background-position: center;
        
    padding: 0;
        
    margin: 0;
    }

    .que-hacemos .mark-02{
    
        background: url(images/line-marker-05.svg);
            
        color: black;
            
        box-sizing: border-box;
            
        background-repeat: no-repeat;
            
        background-size: 100%;
            
        background-position: center;
            
        padding: 0;
            
        margin: 0;
        }

        .que-hacemos .mark-03{
    
background: url(images/marker-05.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: 100%;
    
background-position: center;
    
padding: 16px 13px;
    
margin: 0;
    
}

            .que-hacemos .mark-04{
    
                background: url(images/line-marker-05.svg);
                    
                color: black;
                    
                box-sizing: border-box;
                    
                background-repeat: no-repeat;
                    
                background-size: 100%;
                    
                background-position: center;
                    
                padding: 0;
                    
                margin: 0;
                }

/*
Seccion 6
*/

.que-ofrecemos {perspective-origin: 50% 50%;z-index: 1;height: 200vh;}

.que-ofrecemos .layer-01 {height: 100%;transform: translateX(0%) translateY(-8%) translateZ(70px);pointer-events: none;}

.que-ofrecemos .layer-01 .image {background: url(images/layout-06/layer-01.webp) center / cover no-repeat;background-position: 66% 37%;}

.que-ofrecemos .layer-02 {transform: translateX(0%) translateY(-16%) translateZ(50px);pointer-events: none;}

.que-ofrecemos .layer-02 .image {background: url(images/layout-06/layer-02.webp) center / cover no-repeat;background-position: 34% 50%;}

.que-ofrecemos .layer-03 {height: 108%;transform: translateX(0%) translateY(4%) translateZ(-10px);background-position: 74% 50%;}

.que-ofrecemos .layer-03 .image {background: url(images/layout-06/layer-03.webp) center / cover no-repeat;background-position: 46% 50%;}

.que-ofrecemos .layer-04 {height: 108%;transform: translateX(0%) translateY(-46%) translateZ(-286px);}

.que-ofrecemos .layer-04 .image {background: url(images/layout-06/layer-04.webp) center / cover no-repeat;}


.que-ofrecemos .actions {transform: translateX(0%) translateY(700px) translateZ(0px);}

.que-ofrecemos .actions .content{
    width: 100%;
    height: auto;
    position: relative;
    padding: 20px;
    text-align: center;
}

.que-ofrecemos h1{

text-transform: uppercase;

font-weight: 600;

width: 100%;

color: black;

font-size: 30px;

line-height: 1.2;
}
    
.que-ofrecemos h1 mark{
    
background: #2889cb;
    
padding: 0.1em;
    
color: white;
}

.que-ofrecemos .slider{height: 330px;display: flex;align-items: center;justify-content: center;transform-style: preserve-3d;perspective: 500px;}

.que-ofrecemos .slider .slide{

display: flex;

align-items: center;

width: 100%;
}

.que-ofrecemos .slider .slide .content-slide .picture{

width: 300px;

padding-top: 46%;
}

.que-ofrecemos .slider .slide .content-slide .content-text{
    
text-align: left;
    
width: 100%;
    
margin: auto;
    
padding: 20px;
}

.que-ofrecemos .slider .slide h1{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 22px;

line-height: 1.1;

text-align: center;
}

.que-ofrecemos .slider .slide h2{

margin-block-start: 0;

margin-block-end: 0;

text-transform: uppercase;

font-size: 20px;

color: #2889cb;

text-align: center;
}

.que-ofrecemos .slider .slide p{

font-size: 14px;

text-align: center;
}

.que-ofrecemos mark{
    
background: #2889cb;
    
color: white;
}

.que-ofrecemos .mark-01{
    
background: url(images/marker-06.svg);
    
color: black;
    
box-sizing: border-box;
    
background-repeat: no-repeat;
    
background-size: contain;
    
background-position: center;
    
padding: 19px 10px;
    
margin: 0;
    }

    .verne-ofrecemos{
      transform-style: preserve-3d;
      perspective: 500px;
    }

/*
Main Structure
*/

.screen-7 {
}

.screen-7 .container-section {width: 100%;height: 100vh;position: relative;display: flex;align-items: center;justify-content: center;}

.screen-7 .map {background: url(images/verne-map-movile.webp) center / contain no-repeat;background-position: 61% 50%;height: 100vh;width: 100%;position: absolute;top: 0;left: 0;}

.screen-7 .box-pos {
    transform: translateX(-326px) translateY(-268px);
    mix-blend-mode: multiply;
    display: none;
}

.screen-7 .box-pos h1{text-transform: uppercase;color: #000000;font-size: 50px;width: 298px;line-height: 1.1;}

.screen-7 .box-pos mark{background: #7363b9;color: white;padding: 0.1em;}

.screen-8 {
}

.screen-8 .container-section {display: flex;align-items: center;justify-content: center;width: 100%;max-width: 980px;padding: 72px 0;margin: auto;flex-wrap: wrap;}

.screen-8 .image {width: 100%;background: url(images/verne-contacto.webp) center / contain no-repeat;padding-top: 90%;mix-blend-mode: multiply;}

.screen-8 .box-pos {width: 100%;border-left: 0;padding: 0 20px;}

.screen-8 .box-pos h1{
}

.screen-8 .box-pos textarea{width: 100%;height: 200px;background: transparent;border: 1px solid #a7c734;}

.screen-8 .box-pos span{

color: black;

font-size: 13px;
}

.screen-8 .box-pos label{
    
text-transform: uppercase;
    
font-weight: 600;
    
letter-spacing: 2px;
    
font-size: 22px;
}

.screen-8 .box-pos button{background: black;color: white;border: 0px;padding: 1.2em;transition: all .4s ease;}

.screen-8 .box-pos button:hover{background: yellow;color: black;border: 0px;padding: 1.2em;}

.footer {background: black;padding: 70px 0;}

.footer .container-section {margin: auto;text-align: center;}

.footer .image {background: url(images/footer-verne.webp) center / contain no-repeat;width: 100%;max-width: unset;height: 60px;margin: auto;}

.footer .box-pos {color: white;font-size: 12px;padding: 20px;}

.footer a{

color: white;

text-decoration: none;
}

.footer a:hover{
    
background: red;
    
color: black;
    
text-decoration: none;
}

.video{

position: fixed;

top: 0;

left: 0;

z-index: 1200;

background: #ff40ff;

width: 100%;
}

.video .close{

position: fixed;

top: 16px;

right: 16px;

font-size: 30px;

color: black;

background: white;

cursor: pointer;

padding: 20px;

opacity: 1;
}

.video video{
    
width: 100%;
    
height: 100vh;
}

.turn-off{
    
display: none;
}

.f-columns{

display: flex;

width: 100%;

max-width: 400px;

margin: 20px auto;

align-items: center;

justify-content: center;

flex-wrap: wrap;
}

.f-columns .image{
  
}

.f-columns .border{
  
height: 2px;
  
width: 100%;
  
max-width: 200px;
}


.f-columns .direction{
  
color: white;
  
width: 100%;
  
margin-top: 10px;
}
    
.rotate-in-2-cw {
  -webkit-animation: unset!important;
  animation: unset!important;
}

.verne-tripulacion .navigation{
  top: 46px;
  width: 80px;
  right: 20px;
  }
    
}



















/*
Animations
*/

.slit-in-horizontal {
	-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}



@-webkit-keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-fwd-tr {
  0% {
    -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
            transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
            transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
    opacity: 1;
  }
}

  
  .tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes tracking-in-expand {
    0% {
      letter-spacing: -0.5em;
      opacity: 0;
    }
    40% {
      opacity: 0.6;
    }
    100% {
      opacity: 1;
    }
  }

  .flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes flipInX {
    0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
    }
    40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    }
    60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
    }
    80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    }
    }
    @keyframes flipInX {
    0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    opacity: 0;
    }
    40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
    }
    60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
    }
    80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    }
    } 


    .tada {
        -webkit-animation-name: tada;
        animation-name: tada;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        }
        @-webkit-keyframes tada {
        0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }
        30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }
        40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }
        100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        }
        @keyframes tada {
        0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        }
        30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        }
        40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        }
        100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        }
        } 

        .rotate-in-2-cw {
          -webkit-animation: rotate-in-2-fwd-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: rotate-in-2-fwd-ccw 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }


        @-webkit-keyframes rotate-in-2-fwd-ccw {
          0% {
            -webkit-transform: translateZ(-200px) rotate(45deg);
                    transform: translateZ(-200px) rotate(45deg);
            opacity: 0;
          }
          100% {
            -webkit-transform: translateZ(0) rotate(0);
                    transform: translateZ(0) rotate(0);
            opacity: 1;
          }
        }
        @keyframes rotate-in-2-fwd-ccw {
          0% {
            -webkit-transform: translateZ(-200px) rotate(45deg);
                    transform: translateZ(-200px) rotate(45deg);
            opacity: 0;
          }
          100% {
            -webkit-transform: translateZ(0) rotate(0);
                    transform: translateZ(0) rotate(0);
            opacity: 1;
          }
        }
        
        .swing-out-top-bck {
          -webkit-animation: fade-out-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fade-out-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        }

        @-webkit-keyframes fade-out-bck {
          0% {
            -webkit-transform: translateZ(0);
                    transform: translateZ(0);
            opacity: 1;
          }
          100% {
            -webkit-transform: translateZ(-80px);
                    transform: translateZ(-80px);
            opacity: 0;
          }
        }
        @keyframes fade-out-bck {
          0% {
            -webkit-transform: translateZ(0);
                    transform: translateZ(0);
            opacity: 1;
          }
          100% {
            -webkit-transform: translateZ(-80px);
                    transform: translateZ(-80px);
            opacity: 0;
          }
        }
        
        
        .swing-in-top-bck {
          -webkit-animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
                  animation: swing-in-top-bck 0.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
        }

        @-webkit-keyframes swing-in-top-bck {
          0% {
            -webkit-transform: rotateX(70deg);
                    transform: rotateX(70deg);
            -webkit-transform-origin: top;
                    transform-origin: top;
            opacity: 0;
          }
          100% {
            -webkit-transform: rotateX(0deg);
                    transform: rotateX(0deg);
            -webkit-transform-origin: top;
                    transform-origin: top;
            opacity: 1;
          }
        }
        @keyframes swing-in-top-bck {
          0% {
            -webkit-transform: rotateX(70deg);
                    transform: rotateX(70deg);
            -webkit-transform-origin: top;
                    transform-origin: top;
            opacity: 0;
          }
          100% {
            -webkit-transform: rotateX(0deg);
                    transform: rotateX(0deg);
            -webkit-transform-origin: top;
                    transform-origin: top;
            opacity: 1;
          }
        }