/*Pre-Fit*/

/*fonts*/
@import url('//fonts.googleapis.com/css2?family=Manuale:wght@400;500;600;700&display=swap');
@import url('//fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;600&display=swap');
@import url('//fonts.googleapis.com/css2?family=Grenze:ital,wght@0,100;0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800&display=swap');
@import url('//fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
/*fonts*/

/*Pre-Fit*/

/*links*/
::selection {
  background: #6163dd; /* WebKit/Blink Browsers */
  color:white;
}

a {text-decoration:none; color:black; cursor:none;}
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:focus { text-decoration: none; }
a:hover, a:active { text-decoration: none; }

.image-detail-link {
}

/*links*/



/*body*/
html {
 cursor:none!important;
}

body {

    width:100%;
    height: 100%;
    /* background-color: #fafaff; */
    background: radial-gradient(#fafaff, #ededf4);
    background-repeat:no-repeat;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    /* -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; */
    opacity: 0;
    margin:0;
}
/*body*/


/* TextHighlight Selection*/

.noselect {
  -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 */
}
/* TextHighlight Selection*/


/* Header */

/* .header{
  position:fixed;
  top:2%;
  width: 100%;
  height:10%;
  height:5px;
  z-index: 10;
} */
/*
.New {
  position: relative;
  float:right;
  margin-right:3%;
  top:-15px;
  font-family: "Minipax-Bold";
  font-weight: Bold;
  font-size: 24px;
  color:black;
}

.Live {
  position: relative;
  float:right;
  margin-right:3%;
  top:-15px;
  font-family: "Minipax-Bold";
  font-weight: Bold;
  font-size: 24px;
  color:black;
}

.Credits {
  position: relative;
  float:right;
  margin-right:3%;
  top:-15px;
  font-family: "Minipax-Bold";
  font-weight: Bold;
  font-size: 24px;
  color:black;
}

.Intro {
  position: relative;
  float:right;
  margin-right:3%;
  top:-15px;
  font-family: "Minipax-Bold";
  font-weight: Bold;
  font-size: 24px;
  color:black;
}

.Search {
  position: relative;
  float:right;
  margin-right:3%;
  top:-15px;
  font-family: "Minipax-Bold";
  font-weight: Bold;
  font-size: 24px;
  color:black;
} */

.ambient {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 100;
  }

.gif {
  position: fixed;
  top: 45%;
  left: 50%;
  width: 60%;
  height: auto;
  transform: translate(-50%, -50%);
}

.gif img {
  width: 100%;
  height: auto;
}


.wrapper {
  max-width: 100%;
  overflow: hidden;
}
.wrapper p {
  font-family: "Manuale";
  font-size: 24px;
  margin-top: 8px;
  line-height:8px;
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}


.bottom2, .top2 {
  width: 100%;
  z-index: 15;
  background-color: rgba(242,242,247,0.8);
  position: fixed;
  color: #2b3eef;
  touch-action: manipulation;
  -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;
          -webkit-tap-highlight-color: transparent;
  pointer-events: auto!important;
}

.bottom2 {
 height: 10%;
 bottom: 0;
 left:0;

}
.top2 {
 height: 7%;
 top:0;
 left:0;

}

.bottom2 p, h1, .top2 p, h1 {
font-size: 21px;
font-family: "Archivo";
font-weight: 300;
line-height: 0;
/* cursor: pointer; */
}

.top2 p, .top2 h1 {margin-top: 40px;}

.bottom2 p, .bottom2 h1 {margin-top: 5px;}

.alignR p, .alignR h1 {
  float: right;
  text-align: right;
  margin-right:2%;
}
.alignL p, .alignL h1 {
  float: left;
  text-align: left;
  margin-left:2%;
}

.Intro, .Coordinates {margin-right: 0.5%;}
.Coordinates {margin-top: 15px;}
.Coordinates h1, .Coordinates2 h1 {font-size: 21px !important;}

.Credits {margin-left: 0.5%;}

.Zoom {
  margin-left: 2.5%;
  width: 10%;
}
.Zoom span {
  font-size: 50px;
}
.Zoom hr {
  width: 20px;
  height: 3px;
  color: #2b3eef;
  background-color: #2b3eef;
  cursor: pointer;
  border-width:0;
  line-height: 10px;
}
.border {
  padding: 16px;
  background: blue;
  box-sizing: border-box;
  cursor: pointer;
}
.left2, .right2 {
  height: 86%;
  width: 2.5%;
  z-index: 15;
  background-color: rgba(242,242,247,0.8);
  position: fixed;
}
.left2 {
 top:7%;
 left:0;
}
.border-left{
  top: 7%;
  left: 2.5%;
  height: 83%;
  bottom: 10%;
  width: 2%;
  z-index: 15;
  position: fixed;
  cursor: none!important;
}
.border-right{
  top: 7%;
  right: 2.5%;
  bottom: 10%;
  height: 83%;
  width: 2%;
  z-index: 15;
  position: fixed;
  cursor: none!important;
}
.border-top{
  top: 7%;
  right: 2.5%;
  left: 2.5%;
  height: 2%;
  width: 95%;
  z-index: 15;
  position: fixed;
  cursor: none!important;
}
/* .border-top:hover{
  background-color: red;
  opacity: 0.2;
} */
.border-bottom{
  bottom: 10%;
  height: 2%;
  right: 2.5%;
  left: 2.5%;
  width: 95%;
  z-index: 15;
  position: fixed;
  cursor: none!important
}
.right2 {
  top:7%;
 right:0;
}

.close-search {
  position: relative;
  display: inline-block;
  margin-right:2.5%;
  margin-top: 27px;
  width: 28px;
  height: 28px;
  /* cursor: pointer; */
  float: right;
}
.close-search:before, .close-search:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 28px;
  width: 1px;
  background-color: #2b3eef;
}
.close-search:before {
  transform: rotate(45deg);
}
.close-search:after {
  transform: rotate(-45deg);
}
.medium div span:last-child {
  color: transparent;
  }

.close-credits {
  position: relative;
  display: inline-block;
  margin-right:2.5%;
  margin-top: 24px;
  width: 33px;
  height: 33px;
  /* cursor: pointer; */
  float: right;
}
.close-credits:before, .close-credits:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 34px;
  width: 1px;
  background-color: #2b3eef;
}
.close-credits:before {
  transform: rotate(45deg);
}
.close-credits:after {
  transform: rotate(-45deg);
}


.CreditsInside {
    position: fixed;
    width: 97%;
    height: 93%;
    left: 1.5%;
    top: 2.5%;
    border: solid 1px #2b3eef;
    /* background-image: linear-gradient(to bottom, rgba(242,242,247,0.97), rgba(242,242,247,0.8), rgba(242,242,247,0.97)); */
    background-color: rgba(242,242,247,0.97);
    z-index: 100;
    /* opacity: 0; */
}

.CreditsContent {
  width: 77%;
  height: 90%;
  position: absolute;
  left:14%;
  right: 9%;
  top: 10%;
  overflow-y: scroll;
}

.CreditsContent p {
  font-family: "Archivo";
  font-weight: 200;
  font-size: 19px;
  line-height: 30px;
  width: 90%;

}
.CreditsContent h1 {
  font-family: "Archivo";
  font-weight: 300;
  font-size: 31px;
}
.CreditsContent h2 {
  font-family: "Archivo Black";
  font-weight: 500;
  font-size: 24px;
  line-height: 15px;
  padding-top: 50px;
}


.CreditsIntro {margin-bottom:90px;}
.CreditsTitle {margin-bottom:70px;}

.CreditsContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px #2b3eef ;
	border-radius: 10px;
	background-color: transparent;
  border-left: 2.25px solid transparent;
  border-right: 2.25px solid transparent;
  margin-top: 3%;
  margin-left: 18px;
  margin-bottom: 18px;
}
.CreditsContent::-webkit-scrollbar {
	width: 5px;
	background-color: transparent;
}
.CreditsContent::-webkit-scrollbar-thumb {
	background-color: #2b3eef;
  border-bottom: solid 15px #2b3eef;
}

.sponsor {
  width: 100%;
  height: 70px;
}
.sponsor img {
  float: left;
  width: auto;
  height: 55px;
  margin-right: 5%;
}

.producao {
  width: 100%;
  height: 70px;
}

.producao img {
  float: left;
  width: auto;
  height: 55px;
}

.re-center {
  position: relative;
  float: left;
  margin-left: calc(50% - 9% - 20px);
  margin-top: 20px;
  height: 22px;
  width: 22px;
  border: solid 2px #2b3eef;
  border-radius: 50%;
  /* cursor: pointer; */
}
.centered {
  position: absolute;
  float: left;
  left: 30%;
  top: 30%;
  height: 40%;
  width: 40%;
  background-color: #2b3eef;
  border-radius: 50%;
  /* cursor: pointer; */
  opacity: 0.5;
}

.btCursor {
  position: relative;
  display: inline-block;
  margin-left: 2.5%;
  margin-top: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* cursor: pointer; */
  float: left;
  /* background: radial-gradient(rgba(53, 65, 239, .3) 20%, rgba(53, 65, 239, .0) 70%, rgba(53, 65, 239, .0) 90%); */
  -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;
          -webkit-tap-highlight-color: transparent;
}
.btCursorBG{
  background: radial-gradient(rgba(53, 65, 239, .3) 20%, rgba(53, 65, 239, .0) 70%, rgba(53, 65, 239, .0) 90%);
  -webkit-transform: opacity 1.5s ease-in-out;
  -moz-transform: opacity 1.5s ease-in-out;
  transform: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}
.btCursorBGfade{
  opacity: 1;
  -webkit-transform: opacity 1.5s ease-in-out;
  -moz-transform: opacity 1.5s ease-in-out;
  transform: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}

.btCursor_cavalo {
  position: absolute;
  margin: auto;
  top:0;bottom:0;left:0;right:0;
  width: 38px;
  height: 38px;
  background-image: url('/static/img/cursor_cavalo.svg');
}
.btCursor_espada {
  position: absolute;
  margin: auto;
  top:0;bottom:0;left:0;right:0;
  width: 38px;
  height: 38px;
  background-image: url('/static/img/cursor_espada.svg');
}
.btCursor_connect {
  position: absolute;
  margin: auto;
  top:0;bottom:0;left:0;right:0;
  width: 38px;
  height: 38px;
  background-image: url('/static/img/cursor_connect.svg');
  display: none;
}


.reset {
  position: relative;
  display: inline-block;
  margin-left:22%;
  margin-top: 0px;
  width: 20px;
  height: 20px;
  /* cursor: pointer; */
  float: left;
  background-color: blue;
  display:none;
}

/* HOME */




/* register */


/* .nonfield {
  margin-top: 213px;
  z-index: 101;
} */
/* .errorlist li {  display: none;} */


/* .helptext ul {display: none;} */


/* End register */


/* Text Updates after actions */

/* Text Updates after actions */


/* Profile Update */


/* Profile Update */



/* OpenCall PostCreate */


/* OpenCall PostCreate */



/* Find PostCreate */


/* Find PostCreate */





/* content */

.Content {
  position: absolute;
  top:0; left:0;
  position: relative;
  width: 100%;
}
/* CY WORKS HERE AND CONTAINERS AS WELL*/
#cy {
  width: 100%;
  height: 100%;
  position: absolute;
  /* position: fixed; */
  left: 0;
  top: 0;
  /* border: 1px solid red; */
  display: block;
}
/* containers */


.container_detail {
  position: relative;
  width: 95%;
  height: auto;
  margin-top: 5%;
  background-color: red;
}
.container {
  /* position: absolute;
  top:0;
  left:0;;*/
  width: 100vw;
  /* max-width: 100vw;
  max-height: 180vh; */
  height: 100vh;
  padding-top: 50px;
  padding-bottom: 50px;
  /* border: solid 1px black!important; */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* background-color: yellow; */
  /* cursor:none!important; */

}

.container-homepage {
  position: relative;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  /* background-color: blue; */
}

/* End content */



/* profile */

/* endprofile */


/* Post Entrance (if logout) */


/* Post Entrance (if logout) */




/* Post */


/* EndPost */



/* searchbar */

.Searchbar {
  float: right;
  position: relative;
  top: 14px;
  width: 10%;
  margin-right: 2%;
  height: 100px;
  /* margin-bottom: 42px; */
}

.Searchbar input {
 background-color: transparent;
 width: 80%;
 height: 50px;
 margin-bottom: 0;
 border: none;
 font-family: "Archivo";
 font-weight: 100;
 font-size: 20px;
 color:#2b3eef;
}

.Searchbar input:focus {
outline: none;
}

.Searchbar ::placeholder {
  font-family: "Archivo";
  font-weight: 100;
  font-size: 21px;
  color:#2b3eef;
  margin-bottom: 0;
  margin-left: 0;
}

.Searchbar input:focus::placeholder {
color:transparent;
}

.lineasearch {
    margin-top: -60px;
    border-top: 2px solid #2b3eef;
    border-bottom:none;
    border-left:none;
    border-right:none;
}

.noResults {
  float: left;
  height: 29vh;
}

.noResults em {
  font-family: "Archivo";
  font-weight: 100;
  font-size: 28px;
  color:black;
}

/* searchbar */



/* CURSOR */
.cursor {
  position: absolute;
  /* transform: translate(-20px, -20px); */
  height: 35px;
	width: 35px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483649;
  display: flex;
  margin-left: 2px; margin-top:5px;
  align-items: center;
  justify-content: center;
  /* background-image: url('/static/img/cursor_espada.svg'); */
  padding:0;
}

.espada {  background-image: url('/static/img/cursor_espada.svg'); }
.pointer {  background-image: url('/static/img/cursor_pointer.svg'); }
.seta {  background-image: url('/static/img/cursor_seta.svg'); }
.scaled {}

.cursorvideo{}


.transition{
  font-size: 48px;
  transition: font-size 3s
  -webkit-transition: font-size 3s ;
  -moz-transition: font-size 3s ;
  -ms-transition: font-size 3s ;
  -o-transition: font-size 3s ;
}

.curs div{
  position: absolute;
  height: 35px;
  width: 35px;
  margin-left: -25px;
  margin-top: -18px;
  /* transform: translate(-25px, -25px); */
  border-radius: 50%;
  pointer-events: none;
  /* background-image: url('/static/img/cursor_cavalo.svg'); */
  z-index: 2147483649;;
  /* cont */
  /* display: flex;
  margin-left: -6px;
  align-items: center;
  justify-content: center;
  padding:0; */
}

.cursor_move{}

.espelhado {transform:scalex(-1);}
.direito {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}

.cavalo {background-image: url('/static/img/cursor_cavalo.svg');
}
.drag{
  background-image: url('/static/img/cursor_drag.svg');
}
.escala{
  background-image: url('/static/img/cursor_escala.svg');
}
.slideL{
  background-image: url('/static/img/cursor_slideL.svg');
  background-repeat: no-repeat;
}
.slideR{
  background-image: url('/static/img/cursor_slideR.svg');
  background-repeat: no-repeat;
}

/* background:
  radial-gradient(circle at 20% 0,
  rgba(17,17,17,1),
  rgba(17,17,17,0) 49%),
  radial-gradient(circle at 6.7% 75%,
  rgba(17,17,17,1),
  rgba(17,17,17,0) 75%),
  radial-gradient(circle at 93.3% 75%,
  rgba(17,17,17,1),
  rgba(17,17,17,0) 32%),
  rgba(222,222,222,0.6); */

/* animation: gradient 15s ease infinite; */
/* transition: transform 0.2s; */

/* @keyframes gradient {
0% {
  background-position: 0% 90%;
}
25% {
  background-position: 90% 30%;
}
50% {
  background-position: 30% 80%;
}
75% {
  background-position: 80% 0%;
}
100% {
  background-position: 0% 90%;
}
} */

.medium {
  font-family: "Archivo";
  font-weight: 200;
  font-size: 6px;
  letter-spacing: 0.1px!important;
  /* word-spacing: 4px; */
  line-height: 28px;
  margin: 0px;
  animation: linear 30s rotate reverse infinite;
}

.medium div span {
color: black;
}
.medium div span:last-child {
/* color: transparent; */
}


@keyframes rotate {
  from {
    transform: rotateZ(0deg); }
  to {
    transform: rotateZ(-360deg); }
}

.cursor2 {opacity: 0}



#playground canvas {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top:0;
  margin: 0;
  left:0px;
  /* background-color: rgba(rgba(255, 0, 0, 0.5);); */
}
/* PostByUser */

/* PostByUser */

/* DeletePostConfirm */


/* DeletePostConfirm */


/* .Boximmname a span {
  background-color: blue;
  font-weight: Bold!important;
  font-size: scale(1.5);
  color: white;
  width: 200%;
} */

.Boximmname a span {
  /* background: -webkit-linear-gradient(60deg, #0099cc, #ffffae);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}

/* .HighlightDiv {
    background-color: red;
} */



/* containers */



/* images-create */

/* images-create */


/* images-list */

.Boximmname{
  position: relative;
  float: left;
  margin-top: 100px;
  margin-left: 100px;
}

.Boximmname p {
  font-family: "Manuale";
  font-weight: 450;
  font-size: 150%;
  word-wrap: break-word;
  padding-left: 5px;
  margin-top: 0px;
  /* letter-spacing: 0.4px; */
}
.Boximmname p:hover {
  /* border-left: solid 1px black;
  border-top: solid 1px black; */
}

.text-scale {
    transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}
.text-scale2 {
    transform: scale(0.4, 0.4); /* Moz-browsers */
    zoom: 0.4; /* Other non-webkit browsers */
    zoom: 40%; /* Webkit browsers */
}

.zoom_in {
  position: fixed;
  width: 5vw;
  height: 4vw;
  bottom: 5%;
  right: 5%;
  border: solid 1px black;
}
.zoom_in:hover {
  background-color: black;
}

#zoom_out {
  position: fixed;
  width: 5vw;
  height: 4vw;
  bottom: 5%;
  left: 5%;
  border: solid 1px red;
}
#zoom_out:hover {
  background-color: red;
}

.item {
position: relative;
display: flex;
/* width: 100%; */
/* height: 100%; */
justify-self: center;
align-self: center;
justify-items: center;
align-items: center;
/* margin:10px; */
/* padding-bottom: 80px; */
background-color: white;
}

.item img{
  width: 90%;
  max-height: 50%;
  margin-left: 5%;
}

.Imagename {
  position: absolute;
  top: 90%;
  width: 89.5%;
  height: 30px;
  margin-left: 5%;
  background-color: white;
  border: solid 1px black;
  display: table;
}

.Imagename p {
  position: relative;
  font-family: "Archivo";
  font-weight: 300;
  font-size: 18px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}



.IntroQXT {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  opacity: 0;
}

.IntroContent {
  width: 100%;
  height: 100%;
  position: absolute;
  left:0;
  top: 0;
  overflow-y: scroll;
  background-color: rgba(20,20,18,1);
}

.IntroBackground {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  background-image: linear-gradient(rgba(20,20,18,0) 5%, rgba(20,20,18,1)15%, rgba(33,33,33,1)100%);
  z-index: 3;
}

.textointro {
  position: relative;
  margin-top: 42%;
  margin-left: 15%;
  width:80%;
  height: auto;
  color: white;
}


.textointro p {
  font-family: "Grenze";
  font-weight: 200;
  font-size: 21px;
  line-height: 30px;
  width: 90%;
}
.textointro span {
  font-family: "Grenze";
  font-weight: 400;
  font-size: 48px;
  margin-top: 15vh;
}

.textointro h1 {
  font-family: "Grenze";
  font-weight: 400;
  font-size: 31px;
  margin-top: 15vh;
}
.textointro h2 {
  font-family: "Grenze";
  font-weight: 300;
  font-size: 24px;
  line-height: 15px;
}

.textointro h5 {
  font-family: "Grenze";
  font-weight: 300;
  font-style: italic;
  font-size: 21px;
  line-height: 15px;
}

.marginB-text {
  margin-bottom: 15vh;
}

.backIntroImg {
  width: 100vw;
  height: calc(100vw / 1.78);
  position: relative;
}

.backIntroImg img {
  width: 100%;
  position: absolute;
  top:0;
  left:0;
 }

.backIntroMobile {display: none;}

.logo {
  width: 60%;
  height: calc(100vw / 7.2);
  margin: auto;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 4;
}

.log1 img, .log2 img, .log3 img, .log4 img, .log5 img {
  float: left;
  position: relative;
  height: 15vw;
  width: auto;
}

.Intro-close {
  position: absolute;
  display: inline-block;
  right:5%;
  top: 5%;
  width: 70px;
  height: 70px;
  /* cursor: pointer; */
  float: right;
}
.Intro-close:before, .Intro-close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 70px;
  width: 2px;
  background-color: white;
}
.Intro-close:before {
  transform: rotate(45deg);
}
.Intro-close:after {
  transform: rotate(-45deg);
}








/* images-list */




/* detail-list #f7f5fa */




.principale {
 position: fixed;
 width: 100vw;
 height: 100vh;
 left: 0;
 top: 0;
 overflow: hidden;
 /* background-color: RED; */
}

.principale video {
 position: absolute;
 margin: auto;
 height: auto;
 width: 100vw;
 height: 100vh;
 border-radius: 0%;
 justify-content: center;
 align-self: center;
}

.play-cover {
  object-fit: contain;
}

.pausa-cover {
object-fit: cover;
text-align: center;
}

.principale video["poster"]{
display:block;
margin: 0 auto;
max-height:100vh;
width:100vw;
z-index: -100;
object-fit: cover;
text-align: center;
}

video::-webkit-media-controls-enclosure {
  display:none !important;
}

.c-video {
  width:100%;
  position: relative;
  background-color: #191919;
}

.controls {
position: fixed;
bottom:10%;
left:6%;
width: 94%;
height: 50px;
z-index:2147483647;
/* background-color: yellow; */
}

.hide{
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.show {
  opacity: 1;
  transition: opacity 1.5s ease-in-out;
}


.quadrado {
  width:20px;
  height: 20px;
  margin: 0 auto;
  background-color: red;
}



.buttons {
position: absolute;
top:0;
left: 0;
height: auto;
width: 4%;
/* background-color: blue; */
}

.buttons button{
  height: 25px;
  width: 25px;
  border:0;
  outline:0;
  cursor:pointer;
  background-color: transparent;
  background-image: url('/static/img/play.svg');
  background-repeat: no-repeat;
}


.buttons button.play {
  height: 25px;
  width: 25px;
  background-image: url('/static/img/play.svg');
}

.buttons button.pause {
  height: 25px;
  width: 25px;
  background-image: url('/static/img/pause.svg');
}

.bar {
  margin-top:12px;
  margin-left:4%;
  margin-right:4%;
  height: 1px;
  width: 84%;
  background-color: #b0b0ad;
  display: inline-block;
}

.barline {
  height: 1px;
  width: 50%;
  background-color: #ffffff;
  z-index: 10;
}

.dragger {
  margin-top: -7px;
  margin-left: 8%;
  background-color: #ffffff;
  height: 13px;
  width: 13px;
  z-index: 10;
  display: none;
  cursor: grab;
}

.volume-slider {
position: absolute;
top:0;
left: 90%;
height: auto;
width: 6%;
color:white;
}

#vol-control {
  width:100%;
  background-color: white;
}


/* input[type="range" i] {
  -webkit-appearance: none;
  background-color: white;
  max-height: 1px;
  background: white;
}

input[type="range" i]::-webkit-slider-thumb {
  background: white;
  background-color: white;
  max-height: 1px;
} */

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: #b0b0ad;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: white;
  cursor: grab;
  -webkit-appearance: none;
  margin-top: -7.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #b0b0ad;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: white;
  background-color: none;
  border-radius: 25px;
  -moz-appearance: none;

}
input[type=range]::-moz-range-progress {
  width: 100%;
  height: 1px;
  cursor: pointer;
  box-shadow: none;
  background: white;
  border-radius: 25px;
  -moz-appearance: none;

}
input[type=range]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  border-radius: 10px;
  background: white;
  cursor: grab;
  -moz-appearance: none;
  margin-top: -7.5px;
}
input[type="range" i] {
  background-color: white;
  max-height: 1px;
  background: white;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

/* #durtimetext {
  float: left;
  display: inline-block;
  width: 5%;
  height: auto;
  background-color: purple;
  line-height: 0px;
  margin-left: 5%;
  margin-top: 0;
  font-family: "Supreme Trial";
  font-size: 12px;
  color: white;
} */

.menu { position: fixed; z-index:2147483647;}

.bottom, .top {
  height: 10%;
  width: 100%;
  /* background-color: #191919; */
  position: fixed;
  color: black;
  z-index:2147483647;
  touch-action: manipulation;
}

.bottom {
 bottom:0;
 left:0;
}
.top {
 top:0;
 left:0;
}

.bottom p, .top p {
font-size: 21px;
font-family: "Archivo";
font-weight: 300;
line-height: 0;
color: white;
z-index:2147483648;
}

.top-right p {
  float: right;
  text-align: right;
  margin-right:2.5%;
}
.top-left p {
  float: left;
  margin-top: 40px;
  text-align: left;
  margin-left:2.5%;
  color: white;
}

.bottom-center p{
  float: left;
  margin-left: calc(50% - 40px);
  margin-top: 30px;
  text-align: center;
  /* cursor:pointer; */
}

.bottom-center-image-circle {
  float: left;
  margin-top: 15px;
  margin-left: calc(50% - 40px);
  width: 50px;
  height: 30px;
  /* border: solid 1px white; */
  /* border-radius: 15px; */
}



.bottom-center-image p{
  margin-top: 15px;
  font-size: 21px;
  text-align: center;
  /* cursor: pointer; */
}

.freccia {
  position: absolute;
  width: 7%;
  height: 30px;
  right: 2.5%;
  top: 30px;
  /* cursor: pointer; */
  z-index: 102;
}

.arrow {
  width: 15px;
  height: 15px;
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  transform: rotate(135deg skew(5deg, 5deg));
  -webkit-transform: rotate(135deg) skew(5deg, 5deg);
  position: absolute;
  top:0;
  left: 2px;
  pointer-events: none;
}
.arrowline {
  width: 100%;
  height: 5px;
  border: solid white;
  border-width: 2px 0 0 0;
  display: inline-block;
  position: absolute;
  top:7.2px;
  left: 0;
  pointer-events: none;
}

.frecciasearch {
    position: fixed;
    width: 77px;
    height: 30px;
    left: 92.5vw;
    top: 30px;
    /* cursor: pointer; */
  }

  .arrowsearch {
    width: 15px;
    height: 15px;
    border: solid #2b3eef;
    border-width: 0 2px 2px 0;
    display: inline-block;
    transform: rotate(135deg skew(5deg, 5deg));
    -webkit-transform: rotate(135deg) skew(5deg, 5deg);
    position: absolute;
    top:0;
    left: 2px;
    pointer-events: none;
  }
  .arrowlinesearch {
    width: 100%;
    height: 5px;
    border: solid #2b3eef;
    border-width: 2px 0 0 0;
    display: inline-block;
    position: absolute;
    top:7.2px;
    left: 0;
    pointer-events: none;
  }



.left, .right {
  height: 80%;
  width: 2.5%;
  z-index: 15;
  /* background-color: #191919; */
  position: absolute;
  color: black;
  /* display: none; */
  /* z-index: 2147483648; */

}
.left {
 top:10%;
 left:0;
}
.right {
  top:10%;
 right:0;
}

.bottom-center-open {
  width: calc(95% - 2px);
  height: calc(80% - 2px);
  position: fixed;
  left: 2.5%;
  top: 10%;
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.5);
  /* background-color: yellow; */
  z-index: 20;
  color:white;
  /* overflow-y: scroll; */
  z-index:2147483648;

}

.bottom-center-open p {
  font-family: "Archivo";
  font-weight: 300;
  font-size: 18px;
}
.bottom-center-open h1 {
  font-family: "Archivo";
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 40px;
  line-height: 30px;
}
.bottom-center-open h2 {
  font-family: "Archivo";
  font-weight: 300;
  font-size: 24px;
  line-height: 10px;
  margin-bottom: 40px;
}

.center-open-intro {
  float: left;
  width: 40%;
  margin-top: 5%;
  height: 90%;
  margin-left: 5%;
}

.center-open-divider {
  float: left;
  width: 1px;
  margin-top: 5%;
  height: 80%;
  margin-left: 7%;
  background-color: white;
  display: inline-block;
}
.center-open-ficha, .center-open-legenda {
  float: left;
  width:30%;
  height: auto;
  margin-left: 10%;
  margin-bottom: 5px;
}

.center-open-ficha {
margin-top: 5%;
}

.center-open-ficha p, .center-open-legenda p {
}



.close-bottom-center {
  position: relative;
  display: inline-block;
  margin-right:2.5%;
  margin-top: 27px;
  width: 28px;
  height: 28px;
  /* cursor: pointer; */
  float: right;
}
.close-bottom-center:before, .close-bottom-center:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 28px;
  width: 1px;
  background-color: white;
}
.close-bottom-center:before {
  transform: rotate(45deg);
}
.close-bottom-center:after {
  transform: rotate(-45deg);
}


.image {
  width: 100vw;
  height: 100vh;
  top:0;
  left: 0;
  background-color: #191919;
}
.image img:hover {
  cursor: url('static/img/play.svg'), pointer;
}
.bottom-center-image-circle:hover {
  cursor: url('/static/img/play.svg');
}

.image img {
  max-height: 75%;
  max-width: 75%;
  height: auto;
  width: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: fill;
  cursor: none!important;
}

.imagefull img {
  max-height: 100%;
  height: auto;
  max-width: 100%;
  width: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: fill;
}

.mySlides {display:none;}

.prev, .next {
  width:25%;
  height: 90vh;
  position:absolute;
  z-index: 2147483647;
  top: 10vh;
}

.prev {left: 0%;}
.next {right: 0%;}


.bottom-center-open-image {
  width: calc(65% - 2px);
  height: calc(80% - 2px);
  position: fixed;
  left: 17.5%;
  top: 10%;
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.5);
  /* background-color: yellow; */
  z-index: 20;
  color:white;
  /* overflow-y: scroll; */
  z-index:2147483648;

}

.bottom-center-open-image p {
  font-family: "Archivo";
  font-weight: 300;
  font-size: 18px;
}
.bottom-center-open-image h1 {
  font-family: "Archivo";
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 40px;
  line-height: 30px;
}
.bottom-center-open-image h2 {
  font-family: "Archivo";
  font-weight: 300;
  font-size: 24px;
  line-height: 10px;
  margin-bottom: 40px;
}
.center-open-intro-image h1 {
  float: left;
  width: 98%;
  margin-top: 25px;
  text-align: center;
}

.center-open-ficha-image, .center-open-legenda-image {
  float: left;
  width:100%;
  width: 98%;
  text-align: center;
}

.center-open-ficha-image {
margin-top: 5%;
}

.center-open-ficha p, .center-open-legenda p {
}



/* contacta */


/* sidebar */

/* sidebar */

/* detail-list */



/* footer */

/* footer */

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

.onlyDesktop-logo {
  margin: auto;
  margin-top: 7vh;
  max-width: 30vw;
  height: auto;
  z-index: 100;
  display: none;
}
.onlyDesktop-text {
  margin: auto;
  margin-left: -10vw;
  margin-top: 7vh;
  width: 50vw;
  height: auto;
  z-index: 100;
  display: none;
  color white;
  text-align: center;
  color: white;
}

.onlyDesktop-text p {
  font-size: 18px;
  font-family: "Archivo Black";
}

.onlyDesktop-logoH {
  display: none;
}


/* 3D Player */

/* CURSOR */
/* Controls */
.arrows {
position: relative;
position: absolute;
bottom:10%;
right: 4%;
width: 63px;
height: 63px;
cursor: pointer;
z-index: 3;
touch-action: manipulation;
-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;
        -webkit-tap-highlight-color: transparent;
pointer-events: auto!important;
}

.arrow-left, .arrow-top, .arrow-right, .arrow-bottom {
position: absolute;
width: 25px;
height: 25px;
opacity: 0.4;
}
.arrow-left {
left: 0;
bottom: 18.5px;
background-color: none;
background-image: url('static/blog/img/arrow-left.svg');
}
.arrow-top {
left: 18.5px;
top: 0;
background-image: url('static/blog/img/arrow-top.svg');
}
.arrow-right {
right: 0;
bottom: 18.5px;
background-image: url('static/blog/img/arrow-right.svg');
}
.arrow-bottom {
left: 18.5px;
bottom: 0;
background-image: url('static/blog/img/arrow-bottom.svg');
}

.arrow-left:hover, .arrow-top:hover, .arrow-right:hover, .arrow-bottom:hover {
opacity: 1;
}

.arrowFull {
opacity: 1;
}
.arrowOp {
opacity: .5;
}
/* Origin */

.centerOrigin {
position: absolute;
bottom:10%;
left: 4%;
width: 63px;
height: 63px;
background-color: #3a3a3a;
cursor: pointer;
border: solid 1px rgba(255, 255, 255, 0.5);
z-index: 3;
touch-action: manipulation;
-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;
        -webkit-tap-highlight-color: transparent;
pointer-events: auto!important;
}

.centerOrigin-button {
position: relative;
display: inline-block;
margin-left:15px;
margin-top: 17.5px;
width: 28px;
height: 28px;
cursor: pointer;
float: left;
opacity: 0.5;
}
.centerOrigin-button:before, .centerOrigin-button:after {
position: absolute;
left: 15px;
content: '';
height: 28px;
width: 1px;
background-color: white;
}
.centerOrigin-button:before {
transform: rotate(90deg);
}
.centerOrigin-button:hover {
opacity: 1;
}

#principale {
 pointer-events: none!important;
 overflow: hidden; /* Hide scrollbars */
 touch-action: manipulation;
}

.eventsnone {
 pointer-events: auto!important;
 cursor: pointer;
}

.controls3d {
  position: fixed;
  bottom:10%;
  left:0%;
  width: 100%;
  height: 50px;
  z-index:2147483647;
  touch-action: manipulation;
/* background-color: yellow; */
}

/* CURSOR */
  .cursor3d {
    position: absolute;
    pointer-events: none;
    z-index: 2147483648;
    height: 30px;
    width: 30px;
    background-image: url('/static/img/cursor3D.svg');
  }
  .cursX {
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
    background-color: rgba(255,255,255,.3);
    margin-left: -5px;
    margin-top: -5px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
/* 3D Player END */


/* MEDIA QUERIES */


@media screen and (min-width: 1600px) and (min-height: 1100px) {

  .textointro h1 {
      margin-top: 12vh!important;
  }

}


@media screen and (min-width: 1600px) {

/* INTRO */
 .wrapper p {
  font-family: "Manuale";
  font-size: 28px;
  margin-top: 12px;
  line-height:12px;
}
.gif {
  top: 50%;
  width: 50%;
}

  .log1 img, .log2 img, .log3 img, .log4 img, .log5 img {
    height: 14vw;
  }
  .IntroBackground {
    background-image: linear-gradient(rgba(20,20,18,0) 5%, rgba(20,20,18,1)30%, rgba(33,33,33,1)100%);
  }
  .textointro {
    margin-top: 46%;
  }
  .textointro p {
    font-size: 24px!important;
  }
  .textointro h5 {
    font-size: 24px;
  }
  .textointro h1 {
    font-size: 42px;
  }
  .freccia {
    top: 50px;
  }
  .arrow {
    width: 25px;
    height: 25px;
    border-width: 0 3px 3px 0;
  }
  .arrowline {
    border-width: 3px 0 0 0;
    top: 12px;
  }

}


@media screen and (min-width: 1000px) and (max-width: 1440px)  {
  .textointro p {
    font-size: 21px;
  }
}

@media (pointer:none), (pointer:coarse) {
  .curs {
    display: none!important;
  }
  .cursor{
    display: none!important;
  }
  .cursor2{
    display: none!important;
  }
  .cursor3d{
    display: none!important;
  }
  .btCursor_cavalo {
    display: none!important;
  }
  .btCursor_espada {
    display: none!important;
  }
  .btCursor_connect {
    display: block!important;
  }
  .next {
    width:35%;
    height: 50vh;
    top: 0%;
  }

  .prev {left: 0%; display: none;}
  .next {right: 0%;}
}

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

 .Content {
   height: 100vh;
 }
  .container {
    cursor:normal!important;
  }
  #content3d {
    height: 0!important;
  }
  /* .curs {
    display: none!important;
  }
  .cursor{
    display: none!important;
  }
  .cursor2{
    display: none!important;
  }
  .cursor3d{
    display: none!important;
  }
  .btCursor_cavalo {
    display: none!important;
  }
  .btCursor_espada {
    display: none!important;
  }
  .btCursor_connect {
    display: block!important;
  } */

  .next {
    width:35%;
    height: 10vh;
    top: 90vh;
  }

  .prev {left: 0%; display: none;}
  .next {right: 0%;}

  .slideMobile {
   position: absolute;
   width: 30px;
   height: 30px;
   margin: auto;
   top:15px;right:0;left:0;
   background-image: url('/static/img/cursor_slideMobile.svg');
   background-repeat: no-repeat;
  }


  .border-left,
  .border-right,
  .border-top,
  .border-bottom{
    display: none;
  }
  /* 3dplayer */
  .centerOrigin {
  width: 43px;
  height: 43px;
 }
 .centerOrigin-button {
 margin-left: 5px;
 margin-top: 7.5px;
 top: 2px;
 }
 .centerOrigin-button:before, .centerOrigin-button:after {
 left: 16px;
 height: 23px;
}
.arrows {
width: 53px;
height: 53px;
/* background-color: red; */
}
.arrow-left, .arrow-top, .arrow-right, .arrow-bottom {
width: 20px;
height: 20px;
}
.arrow-left {
bottom: 16px;
}
.arrow-top {
left: 16px;
}
.arrow-right {
bottom: 16px;
}
.arrow-bottom {
left: 16px;
}

}

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

  .IntroBackground {
    background-image: linear-gradient(rgba(20,20,18,0) 5%, rgba(20,20,18,1)10%, rgba(33,33,33,1)100%);
  }
  .CreditsContent h2 {
    padding-top: 0px;
  }
  .textointro {
    margin-top: 52%;
  }
  .textointro h1{
   margin-top: 10vh;
  }
  .Searchbar {
    top: 12px;
    width: 13%;
  }

}

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

  .IntroBackground {
      background-image: linear-gradient(rgba(20,20,18,0) 2%,rgba(20,20,18,1)8%, rgba(20,20,18,1)10%, rgba(33,33,33,1)100%);
    }

  .textointro {
    margin-top: 42%;
  }

  .Searchbar {
    top: 12px;
    width: 25%;
    margin-right: 7%;
  }
  .Searchbar ::placeholder {
    font-size: 18px;
  }
  .Searchbar input {
    font-size: 18px;
  }
  .lineasearch {
    margin-top: -62px;
    border-top: 1px solid #2b3eef;
  }
  .btCursor {
    margin-left: -7%;
    margin-top: -9px;
    transform: scale(0.7);
  }
}

@media screen and (max-width: 668px), screen and (max-width: 851px) and (orientation: landscape) {

/* INTRO */
.backIntroImg{
  height: calc(100vw / 1.268);
}
.log1 img, .log2 img, .log3 img, .log4 img, .log5 img {
    height: 20vw;
}
.logo {
 width: 80%;
 height: calc(100vw / 5.2);
}
.textointro {
  margin-top: 56%;
  margin-left: 5%;
  width: 90%;
}
.textointro p {
  line-height: 24px;
  width: 100%;
}
.textointro h1 {
  line-height: 34px;
  margin-top: 4vh;
  margin-bottom: -10px;
}
.textointro h5 {
  font-size: 18px;
  margin-top: -10px;
}

.backIntroMobile {display: block;}
.backIntroDesktop {display: none;}
/* INTRO END  */


/* VIDEO */

.freccia {
    top: 13px;
}

.arrowline {
  border-width: 1px 0 0 0;
  top: 5.2px;
}
.arrow {
  width: 10px;
  height: 10px;
  border-width: 0 1px 1px 0;
}

.top p {
  font-size: 15px;
}
.top-left{
  width: 55%;
  height: 10vh;
}
.top-left p {
  margin-top: 10px;
  line-height: 22px;
  margin-left: 5%;
}

.bar {
  margin-left: 10%;
  width: 72%;
}
.buttons {
  position: absolute;
  top: 4px;
}
.buttons button {
  height: 17px;
  width: 18px;
}

.volume-slider {
  width: 10%;
  left: 87%;
}
input[type=range]::-webkit-slider-thumb {
  height: 12px;
  width: 12px;
  margin-top: -6px;
}

/* info panel */
.close-bottom-center {
  margin-top: 7px;
  margin-right: 1.5%;
  width: 22px;
  height: 22px;
}
.close-bottom-center:before, .close-bottom-center:after {
  height: 18px;
}

/* .bottom-center-open h1 {
  font-size: 18px;
  line-height: 22px;
}
.bottom-center-open p {
  font-size: 14px;
}

.center-open-intro, .center-open-ficha {
    margin-top: 3%;
}

.bottom-center p {
  margin-left: calc(50% - 25px);
}
.bottom p, .top p {
  font-size: 16px;
}
.bottom {
  margin-bottom: 10px;
} */
.btCursor {
  margin-left: -7%;
  margin-top: -9px;
  transform: scale(0.7);
}
/* info panel End */

/* VIDEO END  */

/* TOP  */
/* Search */
.Searchbar {
  top: 3px;
  width: 15%;
  margin-right: 3%;
}
.Searchbar ::placeholder {
  font-size: 18px;
}
.Searchbar input {
  font-size: 18px;
}
.lineasearch {
  margin-top: -62px;
  border-top: 1px solid #2b3eef;
}
/* Search End */
/* TOP End */

}



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

  /* INTRO */
  .wrapper p {
    font-family: "Manuale";
    font-size: 18px;
    margin-top: 6px;
    line-height:6px;
  }
  .gif {
    width: 100%;
  }
  /* MENU */

  /* CREDITS */

  /* close button */
  .close-credits:before, .close-credits:after {
    height: 28px;
  }
  .close-credits:before, .close-credits:after {
    left: 15px;
  }
  .close-credits {
    margin-top: 14px;
  }
  /* close button --End */


  /* Inside Credits adjustments */
  .CreditsContent h2 {
    font-size: 21px;
    line-height: 32px;
    width: 80%;
  }
  .CreditsContent {
    width: 90%;
    left: 5%;
  }
  .CreditsInside {
    height: 95%;
  }
  .CreditsInside h2 {
    font-size: 18px;
  }
  .CreditsContent p {
    font-size: 16px;
  }

  .sponsor img {
    height: 35px;
    margin-right: 7%;
  }
  .producao img {
    height: 45px;
  }
  /* Inside Credits adjustments --End */

  /* CREDITS  --END */

  .top2 p, .top2 h1 {
    margin-top: 30px;
  }
  .bottom2 p, h1, .top2 p, h1 {
    font-size: 18px;
  }
  .Searchbar {
    top: 3px;
    width: 25%;
    margin-right: 8%;
  }
  .btCursor {
    margin-left: -15%;
    margin-top: -9px;
    transform: scale(0.7);
  }

  /* INDEX close Button */
  .close-search {
    margin-top: 18px;
  }
  .close-search:before, .close-search:after {
    height: 24px
  }
  /* INDEX close Button --End */


  /* bottom adjustments */
  .bottom2 {
    height: 7%;
  }

  /* Cursor */
  .pluz, .menuz {
    width: 10px;
  }
  .pluz:before, .pluz:after {
    height: 15px;
  }
  .menuz:before {
    position: absolute;
    height: 15px;
    left: 35px;
  }

  .alignR p, .alignR h1 {
    margin-right: 4%;
  }
  /* plus & menus */

  .re-center {
    margin-top: 10px;
    height: 17px;
    width: 17px;
    margin-left: calc(50% - 18% - 15px);
  }

  .btCursor_connect {
    width: 48px;
    height: 48px;
  }

  .alignR p, .alignR h1 {
    margin-right: 2%;
  }
  .Coordinates h1, .Coordinates2 h1 {
    margin-top: 1%;
    font-size: 18px !important;
  }
  /* bottom adjustments  --End */

  /* MENU --End */

  /* Intro */
  .IntroBackground {
    background-image: linear-gradient(rgba(20,20,18,0) 0%,rgba(20,20,18,1)5%, rgba(20,20,18,1)10%, rgba(33,33,33,1)100%);
  }
  /* .logo {
    top: 15vh;
  } */
  .freccia {
    width: 15%;
    right: 5%;
  }
  .arrow {
    width: 12px;
    height: 12px;
  }
  .arrowline {
    top: 6.2px;
  }
  .textointro h1 {
    font-size: 24px;
  }
  .textointro span {
  font-size: 41px;
  }
  /* Intro --End */

  /*ISIDE CONTENTS*/
  .bottom p, .top p {
    font-size: 16px;
  }
  .bottom-center p {
    margin-left: calc(50% - 25px);
  }
  .bottom-center-open h1 {
    font-size: 16px;
    line-height: 21px;
  }
  .bottom-center-open p {
    font-size: 14px;
  }

  .bottom-center-open-image h1 {
    font-size: 18px;
    line-height: 21px;
  }
  .bottom-center-open-image p {
    font-size: 14px;
  }


}


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

  /* CREDITS */

  .close-credits:before, .close-credits:after {
    height: 24px;
  }
  .close-credits {
    margin-top: 10px;
  }
  .sponsor img {
    height: 30px;
  }

  /* CREDITS--end */

}

@media screen and (min-width: 320px) {
  .textointro p {
    font-size: calc(16px + 6 * ((100vw - 320px) / 680));
  }
}

@media screen and (max-height: 420px) {

  /* INTRO */
  .wrapper p {
    font-family: "Manuale";
    font-size: 18px;
    margin-top: 6px;
    line-height:6px;
  }

  /* MENU */

  .top2 {
    height: 11%;
}

/* CREDITS */

/* close button */
  .close-credits:before, .close-credits:after {
    height: 25px;
  }
  .close-credits:before, .close-credits:after {
    left: 18px;
  }
  .close-credits {
     margin-top: 14px;
  }
  /* close button --end */

  /* Inside Credits adjustments */
  .CreditsContent h2 {
    font-size: 18px;
    line-height: 32px;
    width: 80%;
 }
  .CreditsContent {
    width: 85%;
    left: 5%;
  }
  .CreditsInside {
    height: 95%;
  }
  .CreditsInside h2 {
  }
  .CreditsContent p {
    font-size: 16px;
  }

  .sponsor img {
     height: 35px;
     margin-right: 7%;
  }
  .producao img {
    height: 45px;
  }
  /* Inside Credits adjustments */

  /* CREDITS -- END*/

  .top2 p, .top2 h1 {
      margin-top: 30px;
  }
  .bottom2 p, h1, .top2 p, h1 {
    font-size: 18px;
  }

  /* Search */
  .Searchbar {
    top: 3px;
    /* width: 25%; */
    margin-right: 3%;
  }
  .Searchbar ::placeholder {
    font-size: 16px;
  }
  .Searchbar input {
    font-size: 16px;
  }
  .lineasearch {
    margin-top: -62px;
    border-top: 1px solid #2b3eef;
  }
  /* Search -- END */


  /* INDEX close Button */
  .close-search {
    margin-top: 18px;
  }
  .close-search:before, .close-search:after {
    height: 24px;
  }
  /* INDEX close Button -- End */

/* bottom adjustments CONTENT*/
/* info panel */
.close-bottom-center {
  margin-top: 7px;
  margin-right: 1.5%;
  width: 22px;
  height: 22px;
}
.close-bottom-center:before, .close-bottom-center:after {
  height: 18px;
}
.bottom-center-open {
    height: calc(74% - 2px);
    top: 13%;
}
.bottom-center-open h1 {
  font-size: 14px;
  line-height: 18px;
}
.bottom-center-open p {
  font-size: 11px;
}
.center-open-intro, .center-open-ficha {
    margin-top: 3%;
}
.bottom-center p {
  margin-left: calc(50% - 25px);
}
.bottom p, .top p {
  font-size: 16px;
}
.bottom {
  margin-bottom: 10px;
}
.top-left p {
  margin-top: 15px;
}
.freccia {
  width: 10%;
  top: 20px;
}
.arrowline {
  border-width: 1px 0 0 0;
  top: 5.2px;
}
.arrow {
  width: 10px;
  height: 10px;
  border-width: 0 1px 1px 0;
}
.buttons {
  top: 5px;
  width: 8%;
}
.buttons button {
  height: 20px;
  width: 20px;
}
.bar {
  margin-left: 6%;
  width: 80%;
}
.controls {
  left: 4%;
  width: 94%;
}
.volume-slider {
    width: 8%;
    left: 90%;
}

/* bottom adjustments CONTENT*/

/* bottom adjustments */
  .bottom2, .bottom  {
    height: 13%;
  }

/* plus & menus */
  .pluz, .menuz {
    width: 10px;
  }
  .pluz:before, .pluz:after {
    height: 15px;
  }
  .menuz:before {
    position: absolute;
    height: 15px;
    left: 35px;
  }

  .alignR p, .alignR h1 {
    margin-right: 4%;
  }
  /* plus & menus -- end */

  .re-center {
    margin-top: 10px;
    height: 17px;
    width: 17px;
    margin-left: calc(50% - 12% - 15px);
  }
  .btCursor {
    margin-left: -2.5%;
    margin-top: -5px;
    transform: scale(0.7);
  }
  .btCursor_connect {
    top:-10px;
    width: 48px;
    height: 48px;
  }

  .alignR p, .alignR h1 {
    margin-right: 2%;
  }
  .Coordinates h1, .Coordinates2 h1 {
      margin-top: 1%;
      font-size: 18px;
  }
  /* bottom adjustments --end */


  /* INFO IMAGE 3d Panel */
.bottom-center-open-image h1 {
    font-size:18px;
    margin-bottom: 20px
  }
.bottom-center-open-image p {
  font-size: 11px;
}
.center-open-ficha-image {
    margin-top: 0%;
}
.bottom-center-open-image {
    height: calc(78% - 2px);
}
.center-open-intro-image h1 {
    margin-top: 10px;
}

/* INTRO QXT */
.textointro h1 {
  font-size: 24px;
}
.textointro span {
font-size: 41px;
line-height: 100px;
}



}



@media screen and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {

  .onlyDesktop{
    display: block;
  }
  .onlyDesktop-logo {
    display: none;
  }
  .onlyDesktop-logoH {
    display: block;
    margin: auto;
    margin-top: 30vh;
    margin-left: 25vw;
    max-width: 50vw;
    height: auto;
    z-index: 100;
    display: block;
  }
  .onlyDesktop-text {
    display: block;
    margin-left: 0vw;
    margin-top: 8vw;
  }

  .onlyDesktop-text p {
    font-size: 18px;
    font-family: "Archivo Black";
    display: block;
  }

}



@media screen and (min-width: 320px) and (max-width: 812px) and (orientation: portrait) {

.onlyDesktop{
  display:block;
}

.onlyDesktop-logo {
  display:block;
}

.onlyDesktop-logoH {
  display:none;
}

.onlyDesktop-text {
  display:block;
}

}


/* MEDIA QUERIES */