button {width: 40px; height: 40px; border-radius: 50%; display: inline-block; position: absolute; z-index: 9999;margin-top: 30%;}

.second, .seconde, .secondee  {display: none;}



#canvas-0, #canvas-1, #canvas-2 {z-index: 999; position: absolute;}

button.uk-button.uk-button-primary.sixth,  button.uk-button.uk-button-primary.seventh, button.uk-button.uk-button-primary.first, button.uk-button.uk-button-primary.firste, button.uk-button.uk-button-primary.third, button.uk-button.uk-button-primary.fourth, button.uk-button.uk-button-primary.fifth { 

font-size: 3em;

line-height: 1.5em;

height: 1.63332em;

width: 3em;

position: absolute;

left: 45%;

bottom: 35%;

padding: 0px;

cursor: pointer;

color: white;

font-size: 2.5em!important;

font-family: 'Roboto';

font-style: italic;

opacity: 1;

border: none;

background-color:transparent;

border-radius: 0;

transition: all 0.4s ease 0s;

-webkit-animation: flickerAnimation 4s infinite;

-moz-animation: flickerAnimation 4s infinite;

-o-animation: flickerAnimation 4s infinite;

animation: flickerAnimation 4s infinite;

}

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

button.uk-button.uk-button-primary.sixth, button.uk-button.uk-button-primary.seventh, button.uk-button.uk-button-primary.first, button.uk-button.uk-button-primary.firste, button.uk-button.uk-button-primary.third, button.uk-button.uk-button-primary.fourth, button.uk-button.uk-button-primary.fifth { 

left: 35%;

bottom: 15%;

}

div.section .video-js {

height: 100vh;

width: auto;

}

}



div.canvas img {

width: 100vw;

height: 100vh;

}

div.canvas img.mobile {

width: auto;

height: 100vh;

}

@keyframes spinner {

to {transform: rotate(360deg);}

}

.background {

background-image: url('imgs/spinner.gif');

background-position: center;

background-repeat: no-repeat;

}

.background::before {

content: '';

box-sizing: border-box;

position: absolute!important;

top: 50%;

left: 45%;

width: 50px;

height: 50px;

margin-top: -10px;

margin-left: -10px;

border-radius: 50%;

border: 2px solid #ccc;

border-top-color: #000;

animation: spinner .6s linear infinite;

}

  

  

  div.section {

    position: relative;

    background-color: #000000;

    height: 100vh;

    min-height: 25rem;

    width: 100%;

    overflow: hidden;

  }

  div.section video {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: 0;

    -ms-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -webkit-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

  }



  div.section .video-js {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: 0;

    -ms-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -webkit-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

  }

  .video-js .vjs-tech {

    position: absolute!important;

    top: 50%!important;

    left: 50%!important;

    width: auto!important;

    height: auto!important;

    min-height: 100%!important;

    min-width: 100%!important;

  }



  .vjs-poster {

    background-size: cover!important;

  }

  .vjs-loading-spinner{display:block!important;position:absolute;font-size:7em;line-height:1;width:1em;height:1em;opacity:.75;-webkit-animation:spin 1.5s infinite linear;-moz-animation:spin 1.5s infinite linear;-o-animation:spin 1.5s infinite linear;animation:spin 1.5s infinite linear;}

.vjs-default-skin .vjs-loading-spinner:before{content:"\e01e";font-family:VideoJS;position:absolute;top:0;left:0;width:1em;height:1em;text-align:center;text-shadow:0 0 .1em #000}

  div.section .container {

    position: relative;

    z-index: 2;

    padding-left: 0px;

  }

  

  

  html{ width:100%; height:100%;  overflow-y: scroll;}

  body{ width:100%; height:100%; background-color: #000000; } 

  

  



  .section .layer {

  position: relative;

  z-index: 9999;

  width: 100%;

  left: 0;

  -webkit-transform: translate3d(0,0,0);

  -ms-transform: translate3d(0,0,0);

  transform: translate3d(0,0,0);

}



  /* STICKY HEADER */ 

  div.header {

    padding-left: 2vh;

    padding-top: 5vh;

  }



  /* VIDEO AND PLAY BUTTON */ 

  .vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {

    content: "PLAY"!important;

  }

  .video-js .vjs-big-play-button {

    top: 35vh!important;

    left: 40vw!important;

    background-color: transparent!important;

    border: none!important;

    font-size: 2.5em!important;

    -webkit-animation: flickerAnimation 4s infinite;

    -moz-animation: flickerAnimation 4s infinite;

    -o-animation: flickerAnimation 4s infinite;

     animation: flickerAnimation 4s infinite;

  }

  button.uk-button.uk-button-primary.first, button.uk-button.uk-button-primary.second, button.uk-button.uk-button-primary.third, 

  button.uk-button.uk-button-primary.fourth,   button.uk-button.uk-button-primary.fifth, button.uk-button.uk-button-primary.sixth   { 

    font-size: 3em;

      line-height: 1.5em;

      height: 1.63332em;

      width: 3em;

      position: absolute;

      left: 45%;

    bottom: 35%;

      padding: 0px;

      cursor: pointer;

    color: white;

    font-size: 2.5em!important;

    font-family: 'Roboto';

    font-style: italic;

      opacity: 1;

      border: none;

      background-color:transparent;

      border-radius: 0;

      transition: all 0.4s ease 0s;

    -webkit-animation: flickerAnimation 4s infinite;

      -moz-animation: flickerAnimation 4s infinite;

      -o-animation: flickerAnimation 4s infinite;

      animation: flickerAnimation 4s infinite;

  }

  div.buttons.mobile button {

    left: 35%!important;

    bottom: 20vw!important;

  }

  @keyframes flickerAnimation {

    0%   { opacity:1; }

    50%  { opacity:0; }

    100% { opacity:1; }

  }

  @-o-keyframes flickerAnimation{

    0%   { opacity:1; }

    50%  { opacity:0; }

    100% { opacity:1; }

  }

  @-moz-keyframes flickerAnimation{

    0%   { opacity:1; }

    50%  { opacity:0; }

    100% { opacity:1; }

  }

  @-webkit-keyframes flickerAnimation{

    0%   { opacity:1; }

    50%  { opacity:0; }

    100% { opacity:1; }

  }

  /* HIDE CANVAS SHOW VIDEO */ 



button {

width: 40px; height: 40px;

display: inline-block;

position: absolute; 

z-index: 9999;

margin-top: 30%;}

.secondsecond, .firstsecond, .thirdsecond, .fourthsecond, .fifthsecond, .sixthsecond  {

display: none;

}

#canvas-0, #canvas-1, #canvas-2, #canvas-3, #canvas-4, #canvas-5, #canvas-6 {

  z-index: 999; 

  position: absolute;

}





  .vjs-icon-play, .video-js .vjs-play-control .vjs-icon-placeholder, .video-js .vjs-big-play-button .vjs-icon-placeholder:before {

    font-family: Roboto, Helvetica, sans-serif!important;

    font-style: italic!important;

  }

  .vjs-has-started .vjs-control-bar {

    display: none!important;

    visibility: hidden;

  }

  /* SECTIONS AND DESCRIPTIONS TYPOGRAPHY */ 



h1.title {

    margin-top: 5vh;

    font-family: 'Roboto', sans-serif;

    z-index: 99;

    color: #fff;

    font-size: 22pt;

  }

p.lead {

  max-width: 80%;

  line-height: 1.2;

    color: #fff;

    position: relative;

    font-family: 'Roboto', sans-serif;

    font-style: italic;

    font-size: 14pt;

    text-align: justify;
    text-decoration-color:fff ;

}

h1.display-3 {

  width: 100%;

    line-height: 1.5;

    color: #fff;

    position: relative;

    font-family: 'Roboto', sans-serif;

    font-size: 14pt;

    text-align: justify;

    margin-bottom: 2%;

}

h3 {

  width: 90%;

    line-height: 1.5;

    color: #fff;

    position: relative;

    top: 53%;

    transform: translateX(2%);

    padding: 2% 2% 2% 2%;

    font-family: 'Roboto', sans-serif;

    font-style: italic;

    font-size: 11pt;

    text-align: justify;

}

p.lead-header {

  color: #FFF;

    font-family: arial, verdana, sans-serif;

    font-size: 12px;

    margin-right: 10px;

    padding-top: 10px;

}

div#head-social {

  display: inline-flex;

}
a.social {

  padding-right: 3px;
  padding-left: 3px;
  font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: 13pt;

}



/* ANIMATION */ 



div.description {

  top: 87vh;

  padding-left:7vh;

  position: absolute;

  transition: all 1.1s ease-out;

  -webkit-transition: all 1.1s ease-out;



}

.video-mobile {

  visibility: hidden;

}

.video-desktop {

  visibility: visible;

}



/* WEBGL */



/*hide sidebar */ 



.sidebar-cables {

  display: none;

}

/* MOBILE */ 



  @media (max-width: 980px)  {

    .mobile {

      visibility: visible;

    }

    .desktop {

      visibility: hidden;

    }

 

    p.lead {
      max-width: 100%;

      font-size: 10pt;

      text-align: left;

    }

    h1.display-3 {

      text-align: left;

      font-size: 13pt;

    }

    div.description {

      top:67vh;

      text-align: left;

    }

    .fp-viewing-1 #desc-1, .fp-viewing-0 #desc-0, .fp-viewing-2 #desc-2, .fp-viewing-3 #desc-3, .fp-viewing-4 #desc-4, .fp-viewing-5 #desc-5, .fp-viewing-6 #desc-6, .fp-viewing-7 #desc-7, .fp-viewing-8 #desc-8,  .fp-viewing-9 #desc-9, .fp-viewing-10 #desc-10, .fp-viewing-11 #desc-11 {

      top: 47vh;

    }

    h1.title {



      font-size: 28pt;

    }

    div.description {

      padding-left: 2vh;

    }

  }



  @media (min-width: 981px)  {

    .fp-viewing-1 #desc-1, .fp-viewing-0 #desc-0, .fp-viewing-2 #desc-2, .fp-viewing-3 #desc-3, .fp-viewing-4 #desc-4, .fp-viewing-5 #desc-5, .fp-viewing-6 #desc-6, .fp-viewing-7 #desc-7, .fp-viewing-8 #desc-8,  .fp-viewing-9 #desc-9, .fp-viewing-10 #desc-10, .fp-viewing-11 #desc-11 {

      top: 57vh;

    }

    .mobile {

      visibility: hidden;

    }

    .desktop {

      visibility: visible;

    }

  }