@font-face {
  font-family: Montreal;
  src: url("../font/FF-Monteral-02.otf");
}

@font-face {
  font-family: MyriadPro;
  src: url("../font/MyriadPro-Regular.otf");
}

@font-face {
  font-family: Questrial;
  src: url("../font/Questrial-Regular.ttf");
}

body {
  font-family: Questrial, sans-serif !important;
}

* {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: 15;
}

.scrittamobile {
  color: white;
  font-size: 5vw;
  width: 100%;
  position: absolute;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 0;
}

.slide {
  padding: 10vh 15vh;
  padding-bottom: 12vh;
  color: white;
  height: 100vh;
  background-color: black;
}

.fascia {
  height: 100vh;
  background-color: transparent;
  padding: 10vh;
}

.one {
  padding: 0;
  width: 100vw;
}

.six {
  padding: 0;
  height: 100vh;
}

.video-container-sigla {
  height: 100%;
  position: relative;
}

.sigla {
  height: 100%;
  background-color: black;
  cursor: pointer;
}

.video-container {
  width: 100vw;
  overflow: hidden;
}

.wrapper {
  display: flex;
  flex-direction: row;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
}

.outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  z-index: -1;
  background-image: url(../img/glitch.png);
  background-size: auto 100vh;
}

.outer-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

.frase-grande {
  margin-top: 45vh;
  margin-left: 50vw;
  transform: translate(-50%, -50%);
}

.titolo {
  text-align: center;
}

.barra {
  width: 100vw;
  height: 12vh;
  position: fixed;
  top: 88vh;
}

.barretta, .barretta-dinamica {
  width: 90vw;
  height: 1vh;
  position: fixed;
  top: 88vh;
  left: 5vw;
  background-color: #363636;
  z-index: 10;
  cursor: pointer;
}

.barretta-dinamica {
  width: 0;
  background-color: red;
  z-index: 11;
  pointer-events: none;
}

.pallino {
  width: 3vh;
  position: fixed;
  top: 87vh;
  left: 4vw;
  z-index: 12;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
}

.play, .volume, .info {
  height: 100%;
  padding: 3.5vh 0;
  cursor: pointer;
}

.play {
  margin-left: 2vw;
}

.volume {
  margin-left: 2vw;
}

.info {
  position: absolute;
  right: 2vw;
}

.titolo-barra {
  position: absolute;
  top: 4.5vh;
  left: 15vw;
  color: white;
  font-size: 2.5vh;
}

.logo {
  margin-top: 50vh;
  margin-left: 50vw;
  transform: translate(-50%, -50%);
}

.logo-evento {
  width: 85vh;
  margin-bottom: 4vh;
}

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

.grande {
  position: absolute;
  top: 35vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

.scopri {
  position: absolute;
  top: 70vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  font-size: 5vh;
  text-align: center;
  width: 41vh;
  padding: 2vh 0;
  font-weight: bold;
  border: 0.5vh solid white;
  cursor: pointer;
}

.testo-intro {
  font-size: 3.5vh;
  width: 97vh;
  margin-left: 55vh;
  margin-top: -5vh;
}

.titolo-fascia {
  font-size: 10vh;
  font-family: Montreal !important;
  color: #FF223D;
  margin-bottom: 3vh;
}

.blocco-frase {
  position: relative;
  width: 135vh;
}

.link {
  font-size: 3.5vh;
  margin-left: 3vh;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.link:hover {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.facebook .link:hover {
  color: blue;
}

.youtube .link:hover {
  color: #FF223D;
}

.mostra .link:hover {
  color: #4f4f4f;
}

.blocco-link {
  height: 10vh;
  float: left;
  margin-top: 5vh;
  margin-right: 15vh;
}

.youtube {
  margin-top: 20vh;
}

.mostra {
  margin-top: 35vh;
  margin-right: 0;
}

.blocco-testo-link {
  width: 175vh;
}

.social {
  height: 14vh;
}

.illu {
  height: 100%;
}

.illustrazione {
  position: absolute;
  top: 18vh;
  left: 85vh;
  height: 50vh;
}

.blocco-testo {
  width: 65vh;
}

.testo-big {
  font-size: 3.5vh;
}

.container-mostra{
  background-color: black;
  width: 100vw;
  height: 100vh;
  padding: 10vh 7vw;
  color: white;
}

.testo-mostra, .titolo-mostra{
  width: 38vw;
  margin-right: 5vw;
}

.video-grande{
  float: left;
  width: 43vw;
  height: 40vh;
  margin-bottom: 6vh;
}

.container-testo-mostra{
  float:left;
}

.video-mostra{
  clear: both;
  display: block;
  overflow: auto;
}

.video-singolo{
  width: 20vw;
  float: left;
  margin-right: 2vw;
}

.video-singolo:last-child{
  margin-right: 0;
}

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

.titolo-video{
  font-family: Montreal;
  color: #FF223D;
  font-size: 2.5vh;
  margin-bottom: 0;
  margin-top: 1vh;
}

.testo-video{
  font-size: 2vh;
  margin-bottom: 0;
}

.attenzione{
  color:#FF223D;
  display: none;
  font-size: 2vh;
}

@media only screen and (max-width: 1400px) {
  .attenzione{
    display: block;
  }
}