@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
html { background: #000; font: normal 1em "Roboto", sans-serif, sans-serif; color: #fff; text-align: center; height: 100vh;margin:0;}
body { height: 100%; margin:0; width: 100%}
#video-viewport { position:absolute; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; }
video { display: block; width: 100vh; height: 100vh; margin:0; }
.fullsize-video-bg { height: 100%; overflow:auto; margin:0; }
.fullsize-video-bg .inner { display: table; width: 100%;  height: 100%; margin: 0 auto; padding: 0; position: relative; z-index: 2;}
.fullsize-video-bg .inner > div { text-align: center;
    display: inline-block;
    background: #9adef1;
    height: 100%;
    width: 100%; 
}
h1 { font-family: "Rubik", sans-serif; font-size: 4em;  font-weight: 600; margin:0;text-shadow: 0 4px 5px rgba(0,0,0,.5); color:#fff;}
h3{color: #191f82; margin-top: 8px; font-family: 'Open Sans',sans-serif;}
h4{margin-bottom: 8px; font-family: 'Open Sans',sans-serif; font-size:1.3em;}
h5{margin:3px; font-family: 'Roboto',sans-serif; font-size:1em; font-weight: 300;}
.cargo{margin-bottom:15px; color:#191f82; font-weight: 600;}
.bienvenidos{margin-top: 16%;}
#containertext{text-align: justify; padding-left: 4em;animation:backInLeft; animation-duration: 2s;}
#namecredits{text-align:justify; padding-left:4em;}
.titlecred{text-align: left;padding-top: 1em; margin-bottom: 0;font-size: 3em;}
.separador{width: 30%;margin-left:inherit; margin-bottom:12px;}
.nodisplay{display:none;}
.btnkids{    
  position: fixed;
  bottom: 4em;
  right: 10.9em;
  width: 15%;
}
.btnmundo{
   margin-top:2.5em;
   width: 15%;
   animation: pulse; 
   animation-duration: 1.6s;
}
.btnmundo:hover{
  cursor: pointer;
}
#avion {
  position: fixed;
  pointer-events: none;
  transition: all 300ms ease-out;
  padding: 2px;
}
.avion {
  transition: stroke-dashoffset 5s ease-out;
}
.avion.animate {
  stroke-dashoffset: 0;
  animation: lightSpeedInLeft; 
  animation-duration: 1s;
}
.logoposc{
  left: 5em;
  position: absolute;
  margin-top: 3%;
  width: 30%;
}
#creditosection{
  display:none;
  background-color: #23a0f2;
  width: 100vw;
  height:100vh;
  position:absolute;
  overflow:auto;
}
.mundocreditos{ width: 100%; height:auto; animation:backInRight; animation-duration: 2s;}