/* Created by Bernardo de Barros Gonçalves de Souza Siciliani for Studio Augusta Arts & Productions */ 
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-repeat: no-repeat;
  vertical-align: middle;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-focus-ring-color: rgba(0, 0, 0, 0);
  focus-ring-color: rgba(0, 0, 0, 0);
  resize: none;
  outline: 0;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
html:focus {
  outline: none;
}
body {
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
body:focus {
  outline: none;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
dl dl, dl ol, dl ul, ol dl, ul dl {
  margin: 0;
}
ol ol, ol ul, ul ol, ul ul {
  margin: 0;
  list-style: none;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-size: 1em;
}
a {
  background-color: transparent;
}
a:focus {
  outline: thin dotted;
}
a:active, a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b, strong {
  font-weight: bolder;
}
code, kbd, samp {
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
audio, video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
img {
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
table {
  border-color: inherit;
  text-indent: 0;
}
button, input, optgroup, select, textarea {
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  transition: 1s all;
  cursor: pointer;
}
button, input {
  overflow: visible;
}
button, select {
  text-transform: none;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-input-placeholder {
  color: rrgba(48, 48, 49, 0.7);
  opacity: 1;
}
::placeholder {
  color: rgba(48, 48, 49, 0.7);
  opacity: 1;
}
:-ms-input-placeholder {
  color: rgba(48, 48, 49, 0.7);
}
::-ms-input-placeholder {
  color: rgba(48, 48, 49, 0.7);
}
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}
details {
  display: block;
}
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}
dialog:not([open]) {
  display: none;
}
summary {
  display: list-item;
}
canvas {
  display: inline-block;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
input {
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  box-shadow: inset 0 0 3px #000000;
  border: 1px solid black;
  background-color: white;
  outline: none;
  height: 40px;
}
button {
  cursor: pointer;
}
p {
  text-align: justify; /* Justifica el texto */ text-indent: 2em; /* Sangría al inicio del párrafo */ margin-bottom: 1em; /* Salto de línea entre párrafos */
} /* Aplica a todo el sitio */ ::-webkit-scrollbar {
  width: 8px; /* ancho de la barra vertical */ height: 8px; /* alto de la barra horizontal (si hay) */
}
::-webkit-scrollbar-track {
  background: #f1f1f1; /* fondo del área de la barra */
}
::-webkit-scrollbar-thumb {
  background: #888; /* color de la barra que se mueve */ border-radius: 6px; /* bordes redondeados */ transition: background-color 0.3s ease 0.2s; /* duración + tipo + delay */ cursor: pointer;
}
::-webkit-scrollbar-thumb:hover {
  background: #555; /* color al pasar el mouse */
} /*************************************************************************************/ @media screen and (-webkit-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait), screen and (-o-device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), screen and (-o-device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait), screen and (device-pixel-ratio: 1) and (device-width: 1024px) and (max-device-height: 600px) and (orientation: landscape), screen and (device-pixel-ratio: 1) and (device-width: 600px) and (max-device-height: 1024px) and (orientation: portrait) {
  html {
    font-size: 19.2px;
  } /* 16px x (6/5) */
} /* 1024x600 tablet with pixel ratio of 3/2 (GALAXY TAB) */ /* Because we have a solid device-pixel-ratio we can avoid the device height */ @media screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (-webkit-device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait), screen and (-o-device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape), screen and (-o-device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait), screen and (device-pixel-ratio: 1.5) and (device-width: 683px) and (orientation: landscape), screen and (device-pixel-ratio: 1.5) and (device-width: 400px) and (orientation: portrait), screen and (device-pixel-ratio: 3/2) and (device-width: 683px) and (orientation: landscape), screen and (device-pixel-ratio: 3/2) and (device-width: 400px) and (orientation: portrait) {
  html {
    font-size: 12.8px;
  } /* 16px x (2/3) x (6/5) */
}
h1, h2, h3 {
  line-height: 2em;
}
h1 {
  font-size: 3em;
}
h2 {
  font-size: 2em;
}
h3 {
  font-size: 1em;
}
.selectable {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
/* Created by Bernardo de Barros Gonçalves de Souza Siciliani for Studio Augusta Arts & Productions */
* {
  font-family: "Roboto", "Arial", sans-serif;
}
.txtbst1 {
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.txtbst2 {
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black;
}
.txtwst1 {
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
.shadow1 {
text-shadow:
  -1px -1px 0 #000,
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;
}
/* Ultra Slim */
.slim-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

/* Light */
.light-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

/* Regular */
.normal-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* Bold */
.bold-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

/* Ultra Bold */
.ultrabold-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

/* Italic Example */
.italic-text {
  font-family: 'Roboto', sans-serif;
  font-style: italic;
}

.hnote{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:red;
}
/* ASSETS Created by Bernardo de Barros Gonçalves de Souza Siciliani for Studio Augusta Arts & Productions */ 
.adjacenteImg{background-repeat: no-repeat;background-position: center; background-size: cover;width:60vw;height:60vw;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
@media only screen and (max-width: 767px) {
  .NAUTESONOMA {
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -75%);
    font-size: 5vw;
  }
  .PLAYME {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20vw;
    height: 20vw;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .NAUTESONOMA {
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%, -80%);
    font-size: 5vw;
  }
  .PLAYME {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15vw;
    height: 15vw;
  }
}
@media only screen and (min-width: 1025px) {
  .NAUTESONOMA {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -35%);
    font-size: 5vw;
  }
  .PLAYME {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10vw;
    height: 10vw;
    max-width: 100px;
    max-height: 100px;
  }
} /*END ICONS FORMAT*/ 
.ICON, .BUTTON {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  border-style: none;
  border: hidden;
  outline: none;
  transition: 1s all;
}
.CONTROLER {
  positoin: relative;
  float: left;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: 1px solid black;
  border-radius: 2px;
  color: black;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
.CONTROLER:active, .CONTROLERACTIVE {
  -webkit-filter: invert(1);
  filter: invert(1);
}
@media only screen and (max-width: 767px) {
.D15 {
  height: 15px;
  width: 15px;
}
.D20 {
  height: 20px;
  width: 20px;
}
.D25 {
  height: 25px;
  width: 25px;
}
.D30, .D30b, .D30c, .D30d {
  height: 30px;
  width: 30px;
}
.D45 {
  width: 45px;
  height: 45px;
}
.D50 {
  width: 40px;
  height: 40px;
}
.D60 {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 8px;
}
.ROUNDED {
  border-radius: 50%;
}
.D4030 {
  width: 40px;
  height: 30px;
}}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.D15 {
  height: 15px;
  width: 15px;
}
.D20 {
  height: 20px;
  width: 20px;
}
.D25 {
  height: 25px;
  width: 25px;
}
.D30, .D30b, .D30c, .D30d {
  height: 30px;
  width: 30px;
}
.D45 {
  width: 45px;
  height: 45px;
}
.D50 {
  width: 50px;
  height: 50px;
}
.D60 {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 8px;
}
.ROUNDED {
  border-radius: 50%;
}
.D4030 {
  width: 40px;
  height: 30px;
}}
@media only screen and (min-width: 1025px) {
.D15 {
  height: 15px;
  width: 15px;
}
.D20 {
  height: 20px;
  width: 20px;
}
.D25 {
  height: 25px;
  width: 25px;
}
.D30, .D30b, .D30c, .D30d {
  height: 30px;
  width: 30px;
}
.D45 {
  width: 45px;
  height: 45px;
}
.D50 {
  width: 50px;
  height: 50px;
}
.D60 {
  width: 60px;
  height: 60px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 8px;
}
.ROUNDED {
  border-radius: 50%;
}
.D4030 {
  width: 40px;
  height: 30px;
}}

.ROTATION180 {
  transform: rotate(180deg);
  margin-left: 6px;
}
.ION {
  filter: brightness(0.5) sepia(1) saturate(1000%);
}
.ION:hover {
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
}
.ION:active {
  filter: none;
}
.IOFF {
  filter: none;
}
.IOFF:hover, .IBLACK:hover {
  filter: brightness(0.5) sepia(1) saturate(1000%);
}
.IOFF:active, .IBLACK:active {
  filter: grayscale(100%) brightness(40%) sepia(100%) hue-rotate(50deg) saturate(1000%) contrast(0.8);
}
.IBLACK {
  filter: brightness(0);
}
#GENERALMENUICON, #LOGINICON, #SIGINICON, #NEWSLETTERICON, #CONTACTICON, #CALENDARICON, #SEARCHICON, #langselector {
  float: right;
}
.LOGO {
  background-image: url(../../Tea/logotype/LOGOTYPE.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 5px;
  margin-left: 20px;
  cursor: pointer;
}
#USER_LANGUAGE {
  width: 50px;
  height: 30px;
  margin: 0px 5px 0px 5px;
  cursor: pointer;
  float: right;
  background-color: transparent;
  border: 1px solid white;
  border-radius: 12px;
  color: white;
  font-size: 24px;
}
#USER_LANGUAGE option {
  color: black;
} /*END ICONS FORMAT*/ /*START LOADER*/ 
#BBLOADER, #BBLOADERFIXED {
  background-image: url(../../Tea/isotype/LOAD.png);
}
#B2LOADER {
  background-image: url(../../Tea/isotype/ISOTYPE_1_2BUSK.png);
}
#EMELOADER {
  background-image: url(../../Tea/isotype/ISOTYPE_1_EMERCATIA.png);
}
#GENLOADER {
  background-image: url(../../Tea/isotype/ISOTYPE_1_GENESI.png);
}
#DELFOSLOADER {
  background-image: url(../../Tea/isotype/DELFOS.png);
}
#FIEREBETLOADER {
  background-image: url(../../Tea/isotype/ISOTYPE_1_FIEREBET.png);
}
#ANRKTVLOADER {
  background-image: url(../../Tea/isotype/JUMPERANRKTV.png);
}
#BBLOADERFIXED {
  position: fixed;
    z-index: 9999;
}
#BBLOADER .BBload {
  border: 10px solid #120a5e;
}
#BBLOADERFIXED .BBload {
  border: 10px solid #120a5e;
}
#B2LOADER .BBload {
  border: 10px solid #ADD8E6;
}
#EMELOADER .BBload {
  border: 10px solid #B22222;
}
#GENLOADER .BBload {
  border: 10px solid #00008B;
}
#FIEREBETLOADER .BBload {
  border: 10px solid #953536;
}
#ANRKTVLOADER .BBload {
  border: 10px solid #FFCC00;
}
.BBload {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -60px;
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 70% auto;
}
.BBload img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.BBload:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 1s infinite linear;
  box-shadow: #120a5e -8px -9px 6px -6px;
}
#BBLOADER .BBload:after {
  box-shadow: #120a5e -8px -9px 6px -6px;
}
#BBLOADERFIXED .BBload:after {
  box-shadow: #120a5e -8px -9px 6px -6px;
}
#B2LOADER .BBload:after {
  box-shadow: #ADD8E6 -8px -9px 6px -6px;
}
#EMELOADER .BBload:after {
  box-shadow: #B22222 -8px -9px 6px -6px;
}
#GENLOADER .BBload:after {
  box-shadow: #00008B -8px -9px 6px -6px;
}
#FIEREBETLOADER .BBload:after {
  box-shadow: #953536 -8px -9px 6px -6px;
}
#ANRKTVLOADER .BBload:after {
  box-shadow: #FFCC00 -8px -9px 6px -6px;
}
.BBload1 {
  border: 10px solid #120a5e;
}
.BBload2 {
  border: 10px solid #ADD8E6;
}
.BBload3 {
  border: 10px solid #B22222;
}
.BBload4 {
  border: 10px solid #00008B;
}
.BBload5 {
  border: 10px solid #953536;
}
.BBload6 {
  border: 10px solid #FFCC00;
}
.BBload1, .BBload2, .BBload3, .BBload4, .BBload5, .BBload6 {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: 20vw;
  height: 20vw;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
}
.BBload1:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 3s infinite linear;
  box-shadow: #120a5e -8px -9px 6px -6px;
}
.BBload2:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 3s infinite linear;
  box-shadow: #ADD8E6 -8px -9px 6px -6px;
}
.BBload3:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 3s infinite linear;
  box-shadow: #B22222 -8px -9px 6px -6px;
}
.BBload4:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 3s infinite linear;
  box-shadow: #00008B -8px -9px 6px -6px;
}
.BBload5:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 3s infinite linear;
  box-shadow: #953536 -8px -9px 6px -6px;
}
.BBload6:after {
  content: '';
  background: trasparent;
  width: 140%;
  height: 140%;
  position: absolute;
  border-radius: 100%;
  top: -20%;
  left: -20%;
  opacity: 0.7;
  animation: rotate 3s infinite linear;
  box-shadow: #FFCC00 -8px -9px 6px -6px;
}
.Delfosload {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -60px;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  border: 5px solid #120a5e;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}
.Delfosload img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.Delfosload:after {
  content: '';
  background: trasparent;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 100%;
  top: 0%;
  left: 0%;
  opacity: 0.7;
  box-shadow: #993300 -5px 10px 10px -5px;
  animation: rotate 1s infinite linear;
}
@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
} /*END LOADER*/ /*START BIG CIRCLE*/ .CIRCLEHOLDER {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75vh;
  max-width: 600px;
  aspect-ratio: 1 / 1;
} /*.BIGCIRCLE {position: relative;border-radius: 50%;max-width: 550px;max-height: 550px;width: 47vw;height: 47vw;min-width: 500px;min-height: 500px;}*/ 

.BIGCIRCLE {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
@media (max-width: 600px) {
.BIGCIRCLE {
    position: absolute;
    float: left;
    width: 75vw;
    height: 75vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
}
.circle {
  cursor: pointer;
  position: absolute;
  min-width: 80px;
  width: 6vw;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 50%;
  transition: 1s all;
  background-color: #120a5e;
}
.inside {
  opacity: 0;
  transition: 1s all;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2vw;
}
.insidelittle {
  opacity: 0;
  transition: 2s all;
  position: absolute;
  top: 97%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 1.2vw;
}
.circle:hover > .insidelittle {
  opacity: 1;
  color: orange;
}
.circle:active > .inside {
  color: red;
}
.circle:active > .insidelittle {
  opacity: 0;
}
@media only screen and (max-width: 768px) {
  .circle:hover {
    min-width: 120px;
    width: 70vw;
    background-size: 10% 10%;
    background-position: top;
    background-color: rgba(0, 0, 51, 1);
    z-index: 3;
  }
  .circle:hover > .inside {
    opacity: 1;
    color: white;
    font-size: max(3vw, 1.5em, 1.5rem);
  }
}
@media only screen and (min-width: 600px) {
  .circle:hover {
    min-width: 120px;
    width: 50vw;
    background-size: 10% 10%;
    background-position: top;
    background-color: rgba(0, 0, 51, 1);
    z-index: 3;
  }
  .circle:hover > .inside {
    opacity: 1;
    color: white;
    font-size: max(3vw, 1.5em, 1.5rem);
  }
}
@media only screen and (min-width: 768px) {
  .circle:hover {
    min-width: 120px;
    width: 30vw;
    background-size: 10% 10%;
    background-position: top;
    background-color: rgba(0, 0, 51, 1);
    z-index: 3;
  }
  .circle:hover > .inside {
    opacity: 1;
    color: white;
    font-size: max(2vw, 0.9em, 0.9rem);
  }
} /* Posiciones individuales para los 15 círculos, distribuidos uniformemente */ .CIRCLEGROUP8 .circle1 {
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
}
.CIRCLEGROUP8 .circle2 {
  left: 85%;
  top: 15%;
  transform: translate(-85%, -15%);
}
.CIRCLEGROUP8 .circle3 {
  left: 100%;
  top: 50%;
  transform: translate(-100%, -50%);
}
.CIRCLEGROUP8 .circle4 {
  left: 85%;
  top: 85%;
  transform: translate(-85%, -85%);
}
.CIRCLEGROUP8 .circle5 {
  left: 50%;
  top: 100%;
  transform: translate(-50%, -100%)
}
.CIRCLEGROUP8 .circle6 {
  left: 15%;
  top: 85%;
  transform: translate(-15%, -85%);
}
.CIRCLEGROUP8 .circle7 {
  left: 0%;
  top: 50%;
  transform: translate(-0%, -50%);
}
.CIRCLEGROUP8 .circle8 {
  left: 15%;
  top: 15%;
  transform: translate(-15%, -15%);
}
.CIRCLEGROUP7 .circle1 {
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
}
.CIRCLEGROUP7 .circle2 {
  left: 90%;
  top: 20%;
  transform: translate(-90%, -20%);
}
.CIRCLEGROUP7 .circle3 {
  left: 100%;
  top: 60%;
  transform: translate(-100%, -60%);
}
.CIRCLEGROUP7 .circle4 {
  left: 70%;
  top: 95%;
  transform: translate(-70%, -95%);
}
.CIRCLEGROUP7 .circle5 {
  left: 30%;
  top: 95%;
  transform: translate(-30%, -95%);
}
.CIRCLEGROUP7 .circle6 {
  left: 1%;
  top: 60%;
  transform: translate(-1%, -60%);
}
.CIRCLEGROUP7 .circle7 {
  left: 10%;
  top: 20%;
  transform: translate(-10%, -20%);
}
.CIRCLEGROUP6 .circle1 {
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
}
.CIRCLEGROUP6 .circle2 {
  left: 90%;
  top: 20%;
  transform: translate(-90%, -20%);
}
.CIRCLEGROUP6 .circle3 {
  left: 90%;
  top: 75%;
  transform: translate(-90%, -75%);
}
.CIRCLEGROUP6 .circle4 {
  left: 50%;
  top: 100%;
  transform: translate(-50%, -100%);
}
.CIRCLEGROUP6 .circle5 {
  left: 10%;
  top: 20%;
  transform: translate(-10%, -20%);
}
.CIRCLEGROUP6 .circle6 {
  left: 10%;
  top: 75%;
  transform: translate(-10%, -75%);
}
.CIRCLEGROUP5 .circle1 {
  left: 15%;
  top: 85%;
  transform: translate(-15%, -85%);
}
.CIRCLEGROUP5 .circle2 {
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
}
.CIRCLEGROUP5 .circle3 {
  left: 85%;
  top: 85%;
  transform: translate(-85%, -85%);
}
.CIRCLEGROUP5 .circle4 {
  left: 7%;
  top: 25%;
  transform: translate(-7%, -25%);
}
.CIRCLEGROUP5 .circle5 {
  left: 93%;
  top: 25%;
  transform: translate(-93%, -25%);
}
.CIRCLEGROUP4 .circle1 {
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
}
.CIRCLEGROUP4 .circle2 {
  left: 100%;
  top: 50%;
  transform: translate(-100%, -50%);
}
.CIRCLEGROUP4 .circle3 {
  left: 50%;
  top: 100%;
  transform: translate(-50%, -100%)
}
.CIRCLEGROUP4 .circle4 {
  left: 0%;
  top: 50%;
  transform: translate(-0%, -50%);
}
.CIRCLEGROUP3 .circle1 {
  left: 50%;
  top: 0%;
  transform: translate(-50%, -0%);
}
.CIRCLEGROUP3 .circle2 {
  left: 90%;
  top: 75%;
  transform: translate(-90%, -75%);
}
.CIRCLEGROUP3 .circle3 {
  left: 10%;
  top: 75%;
  transform: translate(-10%, -75%);
} /*END BIG CIRCLE*/ /*START FLAGS*/ .FLAGcat, .FLAGpt, .FLAGes, .FLAGfr, .FLAGit, .FLAGde, .FLAGen {
  width: 60px;
  height: calc(60px * 2 / 3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.FLAGcat {
  background-image: url(../../Tea/flags/cat.png);
}
.FLAGpt {
  background-image: url(../../Tea/flags/pt.png);
}
.FLAGes {
  background-image: url(../../Tea/flags/es.png);
}
.FLAGfr {
  background-image: url(../../Tea/flags/fr.png);
}
.FLAGit {
  background-image: url(../../Tea/flags/it.png);
}
.FLAGde {
  background-image: url(../../Tea/flags/de.png);
}
.FLAGen {
  background-image: url(../../Tea/flags/en.png);
} /*END FLAGS*/ /*START SOCIAL IMAGE ICONS*/ .FACEBOOKICON {
  background-image: url(../../Tea/social/FACEBOOK.png);
}
.STRIPEICON {
  background-image: url(../../Tea/logotype/STRIPELG.png);
}
.INSTAGRAMICON {
  background-image: url(../../Tea/social/INSTAGRAM.png);
}
.GOOGLEICON {
  background-image: url(../../Tea/social/GOOGLEPLUS.png);
}
.TWITTERICON {
  background-image: url(../../Tea/social/TWITTER.png);
}
.LINKEDINICON {
  background-image: url(../../Tea/social/LINKEDIN.png);
}
.WHATSAPPICON {
  background-image: url(../../Tea/social/WHATSAPP.png);
}
.ANRKTVICON {
  background-image: url(../../Tea/social/ANRKTV.png);
}
.YOUTUBEICON {
  background-image: url(../../Tea/social/YOUTUBE.png);
}
.PINTERESTICON {
  background-image: url(../../Tea/social/PINTEREST.png);
}
.EMAILICON {
  background-image: url(../../Tea/social/EMAIL.png);
}
.YAHOOICON2 {
  background-image: url(../../Tea/social/YAHOO.png);
}
.VIBERICON {
  background-image: url(../../Tea/social/VIBER.png);
}
.SKYPEICON {
  background-image: url(../../Tea/social/TELEGRAM.png);
}
.SMSICON {
  background-image: url(../../Tea/social/SMS.png);
}
.CLIPBOARDICON {
  background-image: url(../../Tea/social/CLIPBOARD.png);
}
.SHAREIFRAME {
  background-image: url(../../Tea/social/SHAREIFRAME.png);
}
.GMAILICON {
  background-image: url(../../Tea/social/GMAILEMAIL.png);
}
.YAHOOICON {
  background-image: url(../../Tea/social/YAHOOEMAIL.png);
}
.HOTMAILICON {
  background-image: url(../../Tea/social/HOTMAILEMAIL.png);
}
.TERRAICON {
  background-image: url(../../Tea/social/TERRAEMAIL.png);
}
.TELEGRAMICON {
  background-image: url(../../Tea/social/TELEGRAM.png);
} /*END SOCIAL IMAGE ICONS*/ /*START NAVICONS*/ .WAVEAUDIO {
  background-image: url(../../Tea/navicons/WAVEAUDIO.png);
}
.ACCOUNT {
  background-image: url(../../Tea/navicons/ACCOUNT.png);
}
.AID {
  background-image: url(../../Tea/navicons/AID.png);
}
.AUCTIONS {
  background-image: url(../../Tea/navicons/AUCTIONS.png);
}
.ACTIVISM {
  background-image: url(../../Tea/navicons/ACTIVISM.png);
}
.ALEXANDRIA {
  background-image: url(../../Tea/navicons/ALEXANDRIA.png);
}
.ABOUT {
  background-image: url(../../Tea/navicons/ABOUT.png);
}
.AUDIO {
  background-image: url(../../Tea/navicons/AUDIO.png);
}
.BIGPLAY {
  background-image: url(../../Tea/navicons/BIGPLAY.png);
}
.BOUTIQUE {
  background-image: url(../../Tea/navicons/BOUTIQUE.png);
}
.BLOG {
  background-image: url(../../Tea/navicons/BLOG.png);
}
.BLOGGER {
  background-image: url(../../Tea/navicons/BLOGGER.png);
}
.BARRICADE {
  background-image: url(../../Tea/navicons/BARRICADE.png);
}
.BROWSE {
  background-image: url(../../Tea/navicons/BROWSE.png);
}
.BOOK {
  background-image: url(../../Tea/navicons/BOOK.png);
}
.CALENDAR {
  background-image: url(../../Tea/navicons/CALENDAR.png);
}
.SWITCHCALENDAR {
  background-image: url(../../Tea/navicons/SWITCHCALENDAR.png);
}
.CHAT {
  background-image: url(../../Tea/navicons/CHAT.png);
}
.CONTACT {
  background-image: url(../../Tea/navicons/CONTACT.png);
}
.CONTROLPANEL {
  background-image: url(../../Tea/navicons/CONTROLPANEL.png);
}
.CURRENT {
  background-image: url(../../Tea/navicons/CURRENT.png);
}
.CUSTOMER {
  background-image: url(../../Tea/navicons/CUSTOMER.png);
}
.COMMERCE {
  background-image: url(../../Tea/navicons/COMMERCE.png);
}
.COMMENT {
  background-image: url(../../Tea/navicons/COMMENT.png);
}
.CLIMBER {
  background-image: url(../../Tea/navicons/CLIMBER.png);
}
.DATABASE {
  background-image: url(../../Tea/navicons/DATABASE.png);
}
.DELETE {
  background-image: url(../../Tea/navicons/DELETE.png);
}
.DESK {
  background-image: url(../../Tea/navicons/DESK.png);
}
.DESCRIPTION {
  background-image: url(../../Tea/navicons/DESCRIPTION.png);
}
.DOWNLOAD {
  background-image: url(../../Tea/navicons/DOWNLOAD.png);
}
.DOWNLOAD1 {
  background-image: url(../../Tea/navicons/DOWNLOAD1.png);
}
.DEMOCRATIC {
  background-image: url(../../Tea/navicons/DEMOCRATIC.png);
}
.DESKTOP {
  background-image: url(../../Tea/navicons/DESKTOP.png);
}
.EVENTS {
  background-image: url(../../Tea/navicons/EVENTS.png);
}
.FUNDS {
  background-image: url(../../Tea/navicons/FUNDS.png);
}
.FUNDPLAN {
  background-image: url(../../Tea/navicons/FUNDPLAN.png);
}
.GENERAL_MENU {
  background-image: url(../../Tea/navicons/GENERAL_MENU.png);
}
.GRAFITTI {
  background-image: url(../../Tea/navicons/GRAFITTI.png);
}
.GENEALOGIC {
  background-image: url(../../Tea/navicons/GENEALOGIC.png);
}
.GHOSTPLAY {
  background-image: url(../../Tea/navicons/GHOSTPLAY.png);
}
.HALFHOR {
  background-image: url(../../Tea/navicons/HALFHOR.png);
}
.HIDE {
  background-image: url(../../Tea/navicons/HIDE.png);
}
.HELPER {
  background-image: url(../../Tea/navicons/HELPER.png);
}
.INVENTORY {
  background-image: url(../../Tea/navicons/INVENTORY.png);
}
.INVITATION {
  background-image: url(../../Tea/navicons/INVITATION.png);
}
.INTOUCH {
  background-image: url(../../Tea/navicons/INTOUCH.png);
}
.LANGUAGE {
  background-image: url(../../Tea/navicons/LANGUAGE.png);
}
.LIKE {
  background-image: url(../../Tea/navicons/LIKE.png);
}
.LOGIN {
  background-image: url(../../Tea/navicons/LOGIN.png);
}
.MAIL {
  background-image: url(../../Tea/navicons/MAIL.png);
}
.MAXIMIZE {
  background-image: url(../../Tea/navicons/MAXIMAZE.png);
}
.MINIMIZE {
  background-image: url(../../Tea/navicons/MINIMIZE.png);
}
.MENU_DOWN {
  background-image: url(../../Tea/navicons/MENU_DOWN.png);
}
.MENU_LEFT {
  background-image: url(../../Tea/navicons/MENU_LEFT.png);
}
.MENU_RIGHT {
  background-image: url(../../Tea/navicons/MENU_RIGHT.png);
}
.MENU_UP {
  background-image: url(../../Tea/navicons/MENU_UP.png);
}
.MULTIMEDIA {
  background-image: url(../../Tea/navicons/MULTIMEDIA.png);
}
.MEDIAPLUS {
  background-image: url(../../Tea/navicons/MEDIAPLUS.png);
}
.MYBLOG {
  background-image: url(../../Tea/navicons/MYBLOG.png);
}
.MOVEMENT {
  background-image: url(../../Tea/navicons/MOVEMENT.png);
}
.NEWS {
  background-image: url(../../Tea/navicons/BLOGGER.png);
}
.NEWSLETTER {
  background-image: url(../../Tea/navicons/NEWSLETTER.png);
}
.PAY {
  background-image: url(../../Tea/navicons/PAY.png);
}
.PRESSADV {
  background-image: url(../../Tea/navicons/PRESSADV.png);
}
.PROFILEPUBLICVIEW {
  background-image: url(../../Tea/navicons/PROFILEPUBLICVIEW.png);
}
.PICTURE_UPLOAD {
  background-image: url(../../Tea/navicons/PICTURE_UPLOAD.png);
}
.PICTURES {
  background-image: url(../../Tea/navicons/PICTURES.png);
}
.PLAY {
  background-image: url(../../Tea/navicons/PLAY.png);
}
.PORTFOLIO {
  background-image: url(../../Tea/navicons/PORTFOLIO.png);
}
.PRINT {
  background-image: url(../../Tea/navicons/PRINT.png);
}
.PRINTER {
  background-image: url(../../Tea/navicons/PRINTER.png);
}
.PASSPORT {
  background-image: url(../../Tea/navicons/PASSPORT.png);
}
.PEOPLE {
  background-image: url(../../Tea/navicons/PEOPLE.png);
}
.PDF {
  background-image: url(../../Tea/navicons/PDF.png);
}
.PARLAMENT {
  background-image: url(../../Tea/navicons/PARLAMENT.png);
}
.PURCHASEOK {
  background-image: url(../../Tea/navicons/PURCHASEOK.png);
}
.REGION {
  background-image: url(../../Tea/navicons/REGION.png);
}
.SHARE {
  background-image: url(../../Tea/navicons/SHARE.png);
}
.SEARCH {
  background-image: url(../../Tea/navicons/SEARCH.png);
}
.SENDFLY {
  background-image: url(../../Tea/navicons/SENDFLY.png);
}
.SHOW {
  background-image: url(../../Tea/navicons/SHOW.png);
}
.HIDE {
  background-image: url(../../Tea/navicons/HIDE.png);
}
.SHOP {
  background-image: url(../../Tea/navicons/SHOP.png);
}
.SIGNATURES {
  background-image: url(../../Tea/navicons/SIGNATURES.png);
}
.START_UP {
  background-image: url(../../Tea/navicons/START_UP.png);
}
.STRIKE {
  background-image: url(../../Tea/navicons/STRIKE.png);
}
.TEAM {
  background-image: url(../../Tea/navicons/TEAM.png);
}
.TREE {
  background-image: url(../../Tea/navicons/TREE.png);
}
.TICKETS {
  background-image: url(../../Tea/navicons/TICKETS.png);
}
.TICKETUP {
  background-image: url(../../Tea/navicons/TICKETUPLOAD.png);
}
.TRANSLATE {
  background-image: url(../../Tea/navicons/TRANSLATE.png);
}
.TRENCH {
  background-image: url(../../Tea/navicons/TRENCH.png);
}
.UPDATE {
  background-image: url(../../Tea/navicons/UPDATE.png);
}
.UPLOAD {
  background-image: url(../../Tea/navicons/UPLOAD.png);
}
.USERMENU {
  background-image: url(../../Tea/navicons/USER_MENU.png);
}
.VIDEO {
  background-image: url(../../Tea/navicons/VIDEO.png);
}
.VOTE {
  background-image: url(../../Tea/navicons/VOTE.png);
}
.WALL {
  background-image: url(../../Tea/navicons/MYWALL.png);
}
.WALLET {
  background-image: url(../../Tea/navicons/WALLET.png);
}
.WORKSHOP {
  background-image: url(../../Tea/navicons/WORKSHOP.png);
}
.ERASE_CONTACT {
  background-image: url(../../Tea/navicons/ERASE_CONTACT.png);
}
.EXPORT_CONTACTS {
  background-image: url(../../Tea/navicons/EXPORT_CONTACTS.png);
}
.IMPORT_CONTACTS {
  background-image: url(../../Tea/navicons/IMPORT_CONTACTS.png);
}
.KEYBOARD {
  background-image: url(../../Tea/navicons/KEYBOARD.png);
}
.SEARCH_CONTACTS {
  background-image: url(../../Tea/navicons/SEARCH_CONTACTS.png);
}
.SEND_EMAIL {
  background-image: url(../../Tea/navicons/SEND_EMAIL.png);
}
.CONTACT_DETAILS {
  background-image: url(../../Tea/navicons/CONTACT_DETAILS.png);
}
.EMAIL_CONTACTS {
  background-image: url(../../Tea/navicons/EMAIL_CONTACTS.png);
}
.novavilafest_CONTACTS {
  background-image: url(../../Tea/navicons/novavilafest_CONTACTS.png);
}
.ADDAPERSON {
  background-image: url(../../Tea/navicons/ADDAPERSON.png);
}
.PERSONALCARD {
  background-image: url(../../Tea/navicons/PERSONALCARD.png);
}
.BUSINESS {
  background-image: url(../../Tea/navicons/BUSINESS.png);
}
.UPAUCTION {
  background-image: url(../../Tea/navicons/UPAUCTION.png);
}
.UPLESSON {
  background-image: url(../../Tea/navicons/UPLESSON.png);
}
.UPCOURSE {
  background-image: url(../../Tea/navicons/UPCOURSE.png);
}
.UPAUCTIONBUREAU {
  background-image: url(../../Tea/navicons/UPAUCTIONBUREAU.png);
}
.UPFUNDRAISE {
  background-image: url(../../Tea/navicons/UPFUNDRAISE.png);
}
.UPPRODUCT {
  background-image: url(../../Tea/navicons/UPPRODUCT.png);
}
.UPSHOP {
  background-image: url(../../Tea/navicons/UPSHOP.png);
}
.UPIMAGE {
  background-image: url(../../Tea/navicons/UPIMAGE.png);
}
.ALBUM {
  background-image: url(../../Tea/navicons/ALBUM.png);
}
.UPVIDEO {
  background-image: url(../../Tea/navicons/UPVIDEO.png);
}
.RECORD {
  background-image: url(../../Tea/navicons/RECORD.png);
}
.REVISION {
  background-image: url(../../Tea/navicons/REVIEW2.png);
}
.REVIEW {
  background-image: url(../../Tea/navicons/REVIEW.png);
}
.VIDCHANNEL {
  background-image: url(../../Tea/navicons/VIDCHANNEL.png);
}
.UPAUDIO {
  background-image: url(../../Tea/navicons/UPAUDIO.png);
}
.PODCAST {
  background-image: url(../../Tea/navicons/PODCAST.png);
}
.AUDIOALBUM {
  background-image: url(../../Tea/navicons/AUDIOALBUM.png);
}
.UPPDF {
  background-image: url(../../Tea/navicons/UPPDF.png);
}
.PRODUCT {
  background-image: url(../../Tea/navicons/PRODUCT.png);
}
.UPPRODUCT {
  background-image: url(../../Tea/navicons/UPLOADPRODUCT.png);
}
.DOWNPRODUCT {
  background-image: url(../../Tea/navicons/DOWNLOADPRODUCT.png);
}
.BIBLIOTHEKE {
  background-image: url(../../Tea/navicons/BIBLIOTHEKE.png);
}
.UPBANNER {
  background-image: url(../../Tea/navicons/UPBANNER.png);
}
.UPLANDSCAPE {
  background-image: url(../../Tea/navicons/UPLANDSCAPE.png);
}
.UPPORTRAIT {
  background-image: url(../../Tea/navicons/UPPORTRAIT.png);
}
.MAPPING {
  background-image: url(../../Tea/navicons/MAPPING.png);
}
.FRIENDLY {
  background-image: url(../../Tea/navicons/FRIENDLY.png);
}
.TIP {
  background-image: url(../../Tea/navicons/TIP.png);
}
.OFFERHELP {
  background-image: url(../../Tea/navicons/OFFERHELP.png);
}
.DEMANDHELP {
  background-image: url(../../Tea/navicons/DEMANDHELP.png);
}
.CRITICALHELP {
  background-image: url(../../Tea/navicons/CRITICALHELP.png);
}
.WIKIPEDIAW {
  background-image: url(../../Tea/navicons/wikipediaW.png);
}
.YOUTUBE {
  background-image: url(../../Tea/navicons/youtube.png);
}
.LIVECALL {
  background-image: url(../../Tea/navicons/LIVECALL.png);
}
.QRCONTROL {
  background-image: url(../../Tea/navicons/QRCONTROL.png);
}
.FILTER {
  background-image: url(../../Tea/navicons/FILTER.png);
}
.COMVO {
  background-image: url(../../Tea/navicons/VOICECOMMAND.png);
}
.WALKT {
  background-image: url(../../Tea/navicons/WALKTHROUGH.png);
}
.DICTAR {
  background-image: url(../../Tea/navicons/DICTATE.png);
} /*END NAVICONS*/ /*START TICKET ICONS*/ .HEADER {
  background-image: url(../../Tea/tickets_icons/HEADER.png);
}
.IMAGE {
  background-image: url(../../Tea/tickets_icons/IMAGE.png);
}
.VIDEOT {
  background-image: url(../../Tea/tickets_icons/VIDEO.png);
}
.SINOPSIS {
  background-image: url(../../Tea/tickets_icons/SINOPSIS.png);
}
.DATETIME {
  background-image: url(../../Tea/tickets_icons/DATETIME.png);
}
.PLACE {
  background-image: url(../../Tea/tickets_icons/PLACE.png);
}
.SEATS {
  background-image: url(../../Tea/tickets_icons/SEATS.png);
}
.QRCODE {
  background-image: url(../../Tea/tickets_icons/QRCODE.png);
} /*END TICKET ICONS*/ /*START EDITOR ICONS*/ .UNLINK {
  background-image: url(../../Tea/editoricons/UNLINK.png);
}
.EMOSAD{background-image:url(../../Tea/emotions/SAD.png);}
.EMOLIKE{background-image:url(../../Tea/emotions/LIKE.png);}
.EMODISLIKE{background-image:url(../../Tea/emotions/DISLIKE.png);}
.EMOLOVE{background-image:url(../../Tea/emotions/LOVE.png);}
.EMOLAUGH{background-image:url(../../Tea/emotions/LAUGH.png);}
#CBTN1 {
  background-image: url(../../Tea/editoricons/BOLD.png);
}
#CBTN2 {
  background-image: url(../../Tea/editoricons/UNDERLINE.png);
}
#CBTN3 {
  background-image: url(../../Tea/editoricons/ITALIC.png);
}
#CBTN4 {
  background-image: url(../../Tea/editoricons/FONTSIZE.png);
}
#CBTN5 {
  background-image: url(../../Tea/editoricons/FONTCOLOR.png);
}
#CBTN6 {
  background-image: url(../../Tea/editoricons/HORIZONTALRULE.png);
}
#CBTN7 {
  background-image: url(../../Tea/editoricons/ORDEREDLIST.png);
}
#CBTN8 {
  background-image: url(../../Tea/editoricons/UNORDEREDLIST.png);
}
#CBTN9 {
  background-image: url(../../Tea/editoricons/LINK.png);
}
#CBTN10 {
  background-image: url(../../Tea/editoricons/UNLINK.png);
}
#CBTN11 {
  background-image: url(../../Tea/editoricons/TEXTIMAGE.png);
}
#CBTN12 {
  background-image: url(../../Tea/editoricons/TXTLEFT.png);
}
#CBTN13 {
  background-image: url(../../Tea/editoricons/TXTCENTER.png);
}
#CBTN14 {
  background-image: url(../../Tea/editoricons/TXTRIGHT.png);
}
#CBTN15 {
  background-image: url(../../Tea/editoricons/TXTJUST.png);
} /*END EDITOR ICONS*/ /*START WEATHER ICONS*/ .fa01d {
  background-image: url(../../Tea/weather/sun.png);
}
.fa01n {
  background-image: url(../../Tea/weather/moon.png);
}
.fa02d {
  background-image: url(../../Tea/weather/cloudsun.png);
}
.fa02n {
  background-image: url(../../Tea/weather/cloudmoon.png);
}
.fa03d {
  background-image: url(../../Tea/weather/cloudy.png);
}
.fa03n {
  background-image: url(../../Tea/weather/cloudy.png);
}
.fa04d {
  background-image: url(../../Tea/weather/clouded.png);
}
.fa04n {
  background-image: url(../../Tea/weather/clouded.png);
}
.fa09d {
  background-image: url(../../Tea/weather/rains.png);
}
.fa09n {
  background-image: url(../../Tea/weather/rains.png);
}
.fa10d {
  background-image: url(../../Tea/weather/sunrain.png);
}
.fa10n {
  background-image: url(../../Tea/weather/moonrain.png);
}
.fa11d {
  background-image: url(../../Tea/weather/storm.png);
}
.fa11n {
  background-image: url(../../Tea/weather/storm.png);
}
.fa13d {
  background-image: url(../../Tea/weather/snow.png);
}
.fa13n {
  background-image: url(../../Tea/weather/snow.png);
}
.fa50d {
  background-image: url(../../Tea/weather/windy.png);
}
.fa50n {
  background-image: url(../../Tea/weather/windy.png);
}
.fas {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 20px;
  height: 20px;
} /*START WEATHER ICONS*/
/* CSS Document */
.TEXTAREA{position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);width:90%;height:90%;margin:0;}
.glass {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 204, 0.2) 0%,
    rgba(255, 255, 255, 0.3) 25%,
    rgba(0, 0, 204, 0.1) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    rgba(0, 0, 204, 0.2) 100%
  );
}

.psdcheck{
    width:350px;
    height:150px;
    font-size:12px;
    background-color:transparent;
    text-align: left;
}
.valid {
	color: green;
}
.valid::after {
	position: relative;
	left: 5px;
	content: "✔";
}

.invalid {
	color: red;
}
.invalid::after {
	position: relative;
	left: 5px;
	content: "✖";
}
.radius{width:30px;height:30px;margin:0 auto;cursor:pointer;}
.updicbellow{position:absolute;width:auto;height:auto;max-width:100%; max-height:100%;left:50%;top:50%;transform:translate(-50%,-50%);cursor:pointer;}

.updicimg{position:absolute;min-width:10vw;min-height:7vw;max-width:70%; max-height:40vh;left:50%;top:50%;transform:translate(-50%,-50%);}

.CHOOSEIMG {
  position: relative;
  float: left;
  width: 50%;
  height: 50%;
  border: 1px solid white;
  border-radius: 8px;
  font-family: Text;
  cursor: pointer;
  background-color: rgba(0,0,204,0.3);
  color: white;
  font-size: max(1.2vw, 1.2em, 1.2rem);
  transition: 1s all;
}
.CHOOSEIMG:hover {
  border: 1px solid orange;
  background-color: rgba(0,0,204,0.5);
  color: orange;
}
.CHOOSEIMG:active {
  border: 1px solid green;
  background-color: rgba(0,0,204,0.2);
  color: green;
}
.CHOOSEIMGHOLDER {
  position: absolute;
  width: 99%;
  height: 99%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pointer {
  cursor: pointer;
}
.fileq1 {
  position: absolute;
  max-width: 99%;
  height: 90%;
  max-height: 40vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
#QUESTION {
  text-align: center;
}
#QUESTION span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


.btnw {
  position: relative;
  float: left;
  width: 100%;
  height: 60px;
  padding: 2%;
}
.sbmbtn, .sbmlike {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98%;
  height: 80%;
  transition: 1s all;
  text-shadow: -1px 2px 3px rgba(46, 49, 146, 0.5);
  box-shadow: -2px 3px 7px rgba(255, 255, 255, 0.5);
  border: 1px solid black;
  border-radius: 8px;
  overflow: hidden;
}
.sbmbtn:hover, .sbmlike:hover {
  text-shadow: -1px 2px 3px rgba(46, 49, 146, 0);
  box-shadow: -2px 3px 7px rgba(255, 255, 255, 0);
  border: 1px solid orange;
} 
progress.progress {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 20px;
  border-radius: 10px;
  background-color: #f3f3f3;
  border: 2px solid #ccc;
    z-index:4;
}
progress.progress::-webkit-progress-bar {
  background-color: #f3f3f3;
  border-radius: 10px;
}
progress.progress::-webkit-progress-value {
  background-color: #120a5e;
  border-radius: 10px;
}
progress.progress::-moz-progress-bar {
  background-color: #120a5e;
  border-radius: 10px;
}
.ANSWER {
  color: white;
  height: auto;
  max-height: 100%;
  overflow: auto;
}
#FORMA {
  float: right;
  position: relative;
  width: 100%;
  height: 100%;
}
fieldset {
  float: right;
  position: relative;
  width: calc(100% - 2%);
  height: auto;
  margin: 1%;
  padding: 1%;
  border-radius: 8px;
  border: 1px solid white;
  color: white;
}
fieldset legend {
  color: white;
}
#INPUTGHOSTER1 {
  height: 60vh;
}
textarea {
  height: 30vh;
  float: right;
  width: 95%;
  border-radius: 12px;
  border: 1px solid white;
  margin: 0px 2.5% 0px 2.5%;
  font-size: 18px;
  resize: none;
  text-align: justify;
  padding: 1%;
  box-sizing: border-box;
  overflow: auto;
  vertical-align: top;
  background-color: white;
  color: black;
}
.TEXTINPUT {
  float: right;
  width: 95%;
  height: 50px;
  border-radius: 12px;
  border: 1px solid black;
  margin: 0px 2.5% 0px 2.5%;
  text-align: center;
  font-size: 18px;
}
.TEXTINPUT2 {
  float: right;
  width: 95%;
  height: 300px;
  border-radius: 12px;
  border: 1px solid black;
  margin: 0px 2.5% 0px 2.5%;
  text-align: center;
  font-size: 18px;
}
#RICHTXT {
  display: none;
}
.TEXTEDITNAVBAR {
  position: relative;
  float: right;
  width: 100%;
  height: 36px;
  display: flex;
  z-index: 2;
  padding: 3px;
  background-color: rgba(102, 102, 102, 0.5);
}
.TEXTEDITAREA {
  position: relative;
  float: right;
  width: 100%;
  height: calc(100% - 46px);
  margin-top: 10px;
  border: #000000 1px solid;
  border-radius: 12px;
  background-color: white;
  word-wrap: break-word;
  font-family: 'Roboto';
}
.TEXTEDITAREA p {
  margin: 0;
} 
#InputsHolder {
  position: absolute;
  top: 0%;
  right: 0%;
  bottom: 50px;
  left: 0%;
  overflow-y: auto;
  overflow-x: hidden;
}
.SUBDSKB.off {
  display: none;
}
.SUBDSKB.on {
  display: block;
}
.BigCoForm {
  float: left;
  width: 100%;
  height: 100%;
  overflow-Y: auto;
  padding-bottom: 60px;
}
.BigCoFormInputsHolder {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 60px;
  overflow-y: scroll;
}
.BigCoFormSubmitHolder {
  position: absolute;
  left: 0px;
  top: calc(100% - 60px);
  right: 0px;
  bottom: 0px;
  background-color: rgba(102, 102, 102, 1);
}
.BigCoFormList1 {
  position: relative;
  float: left;
  width: 100%;
  height: 50px;
  padding: 5px;
  margin: 2px 0 2px 0;
  border: 1px solid black;
  border-radius: 8px;
}
.BigCoFormList2 {
  position: absolute;
  left: 0%;
  width: 10%;
  height: 100%;
}
.BigCoFormList3 {
  position: absolute;
  left: 10.1%;
  width: 89.9%;
  height: calc(100% - 10px);
  background-color: white;
}
.BigCoFormList4 {
  position: relative;
  float: right;
  width: 20%;
  height: 100%;
  background-color: rgba(0, 204, 0, 1);
}
.BigCoFormList4CheckBox {
  position: relative;
  float: left;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid black;
}
.SENDTO {
  width: 95%;
  height: 35px;
  border-radius: 5px;
  border: 1px solid black;
  margin: 1px 0px 1px 0px;
  text-align: center;
  font-size: 14px;
} 
#POPUPINTEWIN {
  position: fixed;
  top: 110px;
  width: calc(100% - 23%);
  bottom: 31px;
  padding: 5px;
  background-color: rgba(204, 204, 204, 0.8);
  overflow-y: auto;
  overflow-x: hidden;
}
.POPUPINTLIST {
  position: relative;
  float: left;
  width: 100%;
  height: 50px;
  padding: 5px;
  margin: 2px 0 2px 0;
  border: 1px solid black;
  border-radius: 8px;
}
.INTEWBT {
  position: relative;
  height: 50px;
  float: left;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 8px;
  border: 1px solid black;
  background-color: rgba(51, 51, 51, 1);
  color: rgba(255, 255, 255, 1);
}
.INTLISTBTNON, .INTLISTBTNOFF {
  position: relative;
  float: left;
  width: auto;
  height: 30px;
  border-radius: 8px;
  border: 1px solid black;
  padding: 3px;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
}
.INTLISTBTNON {
  background-color: rgba(0, 153, 0, 1);
}
.INTLISTBTNOFF {
  background-color: rgba(153, 0, 0, 1);
} 

#TAKETIHISIMAGETOCROP {
  display: none;
}
#scaleSlider {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  margin: 0 auto;
}
.canvas-common {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  cursor: move;
  pointer-events: auto;
  z-index: 5;
} 
.canvas-theke-1 {
  width: 60vw;
  height: 22.2vw;
  max-width: 600px;
  max-height: 222px;
}
.canvas-theke-2 {
  width: 60vw;
  height: 31.5vw;
  max-width: 600px;
  max-height: 315px;
}
.canvas-theke-3 {
  width: 40vw;
  height: 50vw;
  max-width: 400px;
  max-height: 500px;
}
.crop-result {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
}

/*******************************************************************************************************************************/
.stripeform{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;align-self:center;box-shadow:0px 0px 0px 0.5px rgba(50, 50, 93, 0.1),0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);border-radius:7px;}
.result-message{line-height:22px;font-size:16px;}
.result-message a{color:rgb(89, 111, 214);font-weight:600;text-decoration:none;}
.hidden{display:none;}
#card-error{color:rgb(105, 115, 134);text-align:left;font-size:13px;line-height:17px;margin-top:12px;}
#card-element{
position:relative;float:right;padding:12px;border-radius:12px;border:1px solid black;height:50px;margin:0px 2.5% 60px 2.5%;width:95%;background:white;}
#payment-request-button{margin-bottom:32px;}
/* Buttons and links */
/*button{background:#5469d4;color:#ffffff;border-radius:0 0 4px 4px;border:0;padding:12px 16px;font-size:16px;font-weight:600;cursor:pointer;display:block;transition:all 0.2s ease;box-shadow:0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);width:100%;}
button:hover{filter:contrast(115%);}
button:disabled{opacity:0.5;cursor:default;}*/
/* spinner/processing state, errors */
.spinner,.spinner:before,.spinner:after{border-radius:50%;}
.spinner{color:#ffffff;font-size:22px;text-indent:-99999px;margin:0px auto;position:relative;width:20px;height:20px;box-shadow:inset 0 0 0 2px;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);}
.spinner:before,
.spinner:after{position:absolute;content:"";}
.spinner:before{width:10.4px;height:20.4px;background:#5469d4;border-radius:20.4px 0 0 20.4px;top:-0.2px;left:-0.2px;-webkit-transform-origin:10.4px 10.2px;transform-origin:10.4px 10.2px;-webkit-animation:loading 2s infinite ease 1.5s;animation:loading 2s infinite ease 1.5s;}
.spinner:after{width:10.4px;height:10.2px;background:#5469d4;border-radius:0 10.2px 10.2px 0;top:-0.1px;left:10.2px;-webkit-transform-origin:0px 10.2px;transform-origin:0px 10.2px;-webkit-animation:loading 2s infinite ease;animation:loading 2s infinite ease;}
@-webkit-keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@keyframes loading{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@media only screen and (max-width:600px){.stripeform{width:100%;}}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Firefox */
input[type=number]{-moz-appearance:textfield;}
.PLUSCLICKL,.PLUSCLICKR{width:60px;height:60px;font-size:45px;position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;}
.PLUSCLICKL{left:0px;}
.PLUSCLICKR{right:0px;}
.TICKETAMOUNTSELECTOR{width:80px;height:60px;font-size:24px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding-left:15px;text-align:center;margin-top:0px;}.VIDEOLIST{position:relative;float:left;width:100%;min-height:90px;height:20vw;max-height:180px;border:1px solid black;border-radius:12px;background-color:white;}.VIDTHUMB{position:absolute;min-width:160px;width:30vw;max-width:340px;top:1px;bottom:1px;left:1px;background-position:center;background-size:cover;border-radius:12px;}
.CENTERED{position:inherit;left:50%;top:50%;transform:translate(-50%,-50%);}
.ACORD{position:relative;float:left;width:100%;background-color:white;transition:1s all;}
.ACORDON{min-height:200px;height:auto;overflow-y:auto;}
.ACORDOFF{height:0px;overflow:hidden;}
/* Created by Bernardo de Barros Gonçalves de Souza Siciliani for Studio Augusta Arts & Productions */ 
#imw {
  z-index: -10;
  position: fixed;
} /*START DAV NIV SET*/ /*DAV*/ .dav {
  color: black;
}
body.dav header, body.dav footer {
  background-color: #120a5e;
}
body.dav footer {
  border-top: 1px solid black;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
}
body.dav main {
  background-color: #f5f6fb;
}
body.dav .butbui {
  background-color: #120a5e;
}
body.dav .lnt, body.dav .rnt {
  background-color: #120a5e;
}
body.dav button.nav01 {}
body.dav button.nav01 span {
  color: orange;
}
body.dav button.btn30.off {
  filter: brightness(0);
}
body.dav button.btn30:hover {
  filter: sepia(1) saturate(45) hue-rotate(310deg) brightness(0.9);
}
body.dav button.btn30:active {
  filter: sepia(1) saturate(20) hue-rotate(36deg) brightness(0.5);
}
body.dav button.reveal {
  background-color: gray;
  border: 1px solid black;
  color: black;
}
body.dav #navbarhorAC2 {
  /*background-color: #e0e2f1;*/
    /*background-color: black;*/
}
body.dav button.btn30.on, body.dav button.ico.on, body.dav button.ico:hover, button.ico:active {
  background-color: #120a5e;
}
body.dav .navbarhor button.ico.off {
  color: black;
}
body.dav .navbarhor button.ico.off:hover {
  color: orange;
}
body.dav .navbarhor button.ico.off:active {
  color: green;
} /*NIV*/ .niv {
  color: white;
}
body.dav .VISIBLEWRAPPER, body.niv .VISIBLEWRAPPER{color:black;}
body.niv header, body.niv footer {
  background-color: black;
}
body.niv footer {
  border-top: 1px solid white;
  box-shadow: 0 -1px 3px rgba(255, 255, 255, 0.2);
}
body.niv main {
  background-color: #0a0836;
}
body.niv .butbui {
  background-color: black;
}
body.niv .lnt, body.niv .rnt {
  background-color: black;
}
body.niv button.nav01 {}
body.niv button.nav01 span {
  color: orange;
}
body.niv #navbarhorAC2 {
  background-color: #1c1a4d;
}
body.niv button.btn30:hover {
  filter: sepia(1) saturate(45) hue-rotate(310deg) brightness(0.9);
}
body.niv button.btn30:active {
  filter: sepia(1) saturate(20) hue-rotate(36deg) brightness(0.5);
}
body.niv button.reveal {
  background-color: black;
  border: 1px solid white;
  color: white;
}
body.niv button.fullcloserfpf {
  background-color: rgba(20, 20, 22, 1.00);
  color: white;
  border: 1px solid white;
}
body.niv button.btn30.on {
  background-color: transparent;
}
body.niv .outdoor {
  filter: brightness(0.5);
} /*END DAV NIV SET*/ /*START BASIC HOLDERS*/ header, footer {
  width: 100%;
}
header, footer {
  position: fixed;
  height: 30px;
  z-index: 7;
  display: inline-flex;
  transition: 1s all;
}
header {
  top: 0px;
}
footer {
  bottom: 0px;
}
header:hover, footer:hover {
  height: 40px;
}
header:hover button.ico, footer:hover button.ico {
  width: 40px;
  height: 40px;
  font-size: 35px;
}
main, main.mflat, main.mlnt, main.mrnt {
  position: fixed;
  top: 30px;        /* offset header */
  bottom: 30px;     /* offset footer */
  left: 0;
  right: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* smooth scroll en mobile */
}
main.mflat {
  left: 0px;
  right: 0px;
}
main.mlnt {
  left: 30px;
  right: 0%;
}
main.mrnt {
  left: 0%;
  right: 30px;
} 
/*EMD BASIC HOLDERS*/ 
.rnt, .lnt {
  position: fixed;
  width: 30px;
  top: 30px;
  bottom: 30px;
  transition: 1s all;
}
.rnt {
  z-index: 4;
}
.lnt {
  z-index: 5;
}
.lnt.off {
  left: -30px;
  background-color: transparent;
}
.rnt.off {
  right: -30px;
  background-color: transparent;
}
.lnt.on {
  left: 0px;
}
.rnt.on {
  right: 0px;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: 1;
  transition: 1s all;
  background-color: transparent;
  border: none;
}
.arrow:hover {
  font-size: 20px;
  color: rgba(255, 0, 4, 1.00);
}
.arrow:active {
  font-size: 12px;
  color: rgba(7, 179, 0, 1.00);
}
.arrow.on {
  transform: rotate(-180deg);
}
.lnt .arrow.off {
  left: 30px;
  color: inherit;
}
.rnt .arrow.off {
  right: 30px;
  color: inherit;
}
.lnt .arrow.on {
  left: 5px;
  color: white;
}
.rnt .arrow.on {
  right: 5px;
  color: white;
}
.bdl, .bdc, .bdr {
  position: relative;
  width: calc(100% / 3);
  height: 100%;
}
@media (min-width: 600px) {
    .dplnl, .dplnc, .dplnr {
      position: absolute;
      width: auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 1s all;
    }
    .dplnl {left: 0%;}
    .dplnc {left: 50%;transform: translateX(-50%);}
    .dplnr {right: 0%;}
}
.ibdf {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  text-align: center;
}
@media (max-width: 600px) {
     .dplnl, .dplnc, .dplnr {
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 1s all;
    }
    .dplnl {float:left;}
    .dplnc {float:left;}
    .dplnr {float:right;}   
}
.tpcf, .rpcf, .bpcf, .cpcf {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  transition: 1s all;
  z-index: 6;
}
.fpf {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  transition: 1s all;
  z-index: 10;
}
.ifpf {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  transition: 1s all;
  z-index: 15;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
}
.tpcf {
  top: 30px;
}
.rpcf {
  top: 30px;
  bottom: 30px;
  right: 0px;
}
.bpcf {
  bottom: 30px;
}
.lpcf {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.9);
  transition: 1s all;
  z-index: 5;
  top: 30px;
  bottom: 30px;
  left: 30px;
}
.cpcf, .fpf {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.wipf {
  position: relative;
  width: 100%;
  height: 100%;
}
.tpcf.on {
  width: 100%;
  height: calc(100% - 60px);
}
.bpcf.on {
  width: 100%;
  height: calc(100% - 60px);
}
.tpcf.off, .bpcf.off {
  width: 100%;
  height: 0%;
}
.fpf.on, .ifpf.on{
  width: 100vw;
  height: 100vh;
}
.rpcf.impose {
  width: 100vw;
  height: 100vh;
  top: 0%;
  bottom: 0%;
  z-index: 50;
}
.rpcf.on, .lpcf.on {
  width: 100%;
  height: calc(100%- 60px);
}
.rpcf.off, .lpcf.off {
  width: 0%;
  height: 100%;
}
.cpcf.on {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.cpcf.off, .fpf.off, .ifpf.off {
  width: 0%;
  height: 0%;
  opacity: 0;
} 
/*header elements*/ 
.ariOutput {
  color: white;
  transition: 1s all;
}
.ariOutput.on {
  opacity: 1;
}
.ariOutput.off {
  opacity: 0;
}
#langselector {
  width: auto;
  height: 30px;
  padding: 2px 8px;
  box-sizing: border-box;
  border: 1px solid #120a5e;
  border-radius: 4px;
  line-height: 1.2;
  font-size: 16px;
  color: white;
  background-color: #120a5e;
}
#langselector:hover {color: orange;border: 1px solid orange;} 
/*START BUTTONS*/ 
button.scale:hover {transform: scale(1.1);}
button.scale:active {transform: scale(0.95);}
.emostroke {
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
button.ico {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 2px;
  border: none;
  background: none;
  color: white;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.3s ease;
  border-radius: 6px;
}
button.ico.on {
  border: 2px solid orange;
  color: orange;
}
button.ico.off {
  background-color: transparent;
}
button.ico:hover {
  border: 2px solid orange;
  border-radius: 4px;
  color: orange;
}
button.ico:active {
  border: 2px solid green;
  transform: translateY(1px);
  color: green;
}
button.ico .HERO {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}
button.nav01 {
  position: relative;
  margin: 5px 5px 5px 5px;
  width: calc(100% - 10px);
  float: left;
  height: 30px;
  text-decoration: none;
  background-size:contain;
  border: 1px solid white;
    color:white;
}
button.nav01:hover {
  border: 1px solid orange;
    color:orange;
    transform: scale(1.01); /* crece un poquito */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* sombra al hacer hover */
    z-index: 2; /* asegura que se muestre sobre sus vecinos */
}
button.nav01:active {
  border: 1px solid green;
    color:green;
    transform: scale(0.99); /* achica un poquito */
    box-shadow: none; /* sin sombra */
    z-index: 2;
}
button.nav01 span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: orange;
}
/* modo cuadrícula */
.navsquare, .navsquare2 {
    float: left;
    width: calc(100% / 10 - 10px); 
    margin: 5px;
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    border: 1px solid #ccc;
    color:white;
    transition: 1s all;
    
}
.navsquare {

    width: calc(100% / 10 - 10px); 
    /* imagen */
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 30px 30px; 

}
.navsquare2 {

    width: calc(100% / 4 - 10px); 
    /* imagen */
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover; 

}
.navsquare:hover, .navsquare2:hover {
   
    border: 1px solid orange;
    color:orange;
    transform: scale(1.05); /* crece un poquito */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* sombra al hacer hover */
    z-index: 2; /* asegura que se muestre sobre sus vecinos */

}
.navsquare:active, .navsquare2:active {
   
    border: 1px solid green;
    color:green;
     transform: scale(0.95); /* achica un poquito */
    box-shadow: none; /* sin sombra */
    z-index: 2;

}
/* responsive: tablet */
@media (max-width: 1024px) {
  .navsquare, .navsquare2 {
    width: calc(100% / 3 - 10px); /* 3 por fila */
  }
}

/* responsive: mobile */
@media (max-width: 600px) {
  .navsquare, .navsquare2 {
    width: calc(100% / 2 - 10px); /* 2 por fila */
  }
}

button.bigico {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 5px solid white;
  background-color: transparent;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  transition: 1s all;
}
.bigico.off:hover {
  border: 7px solid red;
  font-size: 4.5em;
  color: red;
}
.bigico.off:active {
  border: 5px solid limegreen;
  font-size: 4em;
  color: limegreen;
}
.joinbtnholder {
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
  width: 100%;
  height: 75px;
  ;
}
.joinbtn font.flat, .joinbtn font.hover {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 1s all;
}
.joinbtn font.flat {
  opacity: 1;
}
.joinbtn font.hover {
  opacity: 0;
}
.joinbtn:hover font.flat {
  opacity: 0;
}
.joinbtn:hover font.hover {
  opacity: 1;
}
.joinbtn:hover {
  color: orange;
  border-color: orange;
}
.joinbtn:active {
  color: green;
  border-color: green;
}
button.butbui {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 50px;
  border: 1px solid white;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  transition: 1s all;
}
button.fullcloserfpf {
  position: fixed;
  width: 100%;
  top: 0%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
button.twothirdscloserfpf {
  position: fixed;
  width: 66%;
  left:0%;
  top: 0%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
button.onethirdveritasfpf {
  position: fixed;
  width: 34%;
  right:0%;
  top: 0%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.BUTBUI, .BUTBUI1, .BUTBUI2, .BUTBUI3, .BUTLIN1 {
  transition: 1s all;
  text-shadow: -1px 2px 3px rgba(46, 49, 146, 0.5);
  box-shadow: -2px 3px 7px rgba(255, 255, 255, 0.5);
  border: 1px solid black;
  border-radius: 8px;
  overflow: hidden;
}
body.dav .BUTBUI, body.dav .BUTBUI1, body.dav .BUTBUI2, body.dav .BUTBUI3, body.dav .BUTLIN1 {
  background-color: #120a5e;
  color: white;
}
body.niv .BUTBUI, body.niv .BUTBUI1, body.niv .BUTBUI2, body.niv .BUTBUI3, body.niv .BUTLIN1 {
  background-color: #120a5e;
  color: white;
}
body.dav .BUTBUI:hover, body.dav .BUTBUI1:hover, body.dav .BUTBUI2:hover, body.dav .BUTBUI3:hover, body.dav .BUTLIN1:hover {
  color: orange;
  border: 1px solid orange;
} /*END BUTTONS*/ /*styling inside popfull windows .pf*/ 

.inpf_01 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  border: 1px solid white;
}
.inpf_01_wrapper_01, .inpf_01_wrapper_02 {
  float: left;
  position: relative;
  height: 100%;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
  transition:1s all;
} 
.inpf_01_wrapper_01.on{width: 100%;}
.inpf_01_wrapper_01.off{width: 25%;}
.inpf_01_wrapper_02.on{width: 75%;}
.inpf_01_wrapper_02.off{width: 0%;}


/*styling basic page elements*/ /*START OUTDOOR SECTIOM*/ 
.outdoor {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  overflow: hidden;
  z-index: 4;
  transition: 1s all;
}
.outdoor.off {
  height: 0px;
}
.outannouncements {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -10%);
  width: 100%;
}
.outannouncements2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
.Announcement {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: red;
  opacity: 0;
  text-shadow: 5px 2px 3px rgba(0, 0, 0, 1);
}
.SLOGAN {
  width: 100%;
  transition: 1s all;
}
.SLOGANV {
  width: 100%;
  transition: 1s all;
}
@media only screen and (max-width: 767px) {
  .outdoor.on {
    height: 70vw;
  }
  .SLOGAN {font-size: 5.5vw;}
  .SLOGANV {font-size: 9vw;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .outdoor.on {
    height: 45vw;
  }
  .SLOGAN {font-size: 4.5vw;}
  .SLOGANV {font-size: 7vw;}
}
@media only screen and (min-width: 1025px) {
  .outdoor.on {
    height: 36vw;
    max-height: 475px;
  }
  .SLOGAN {font-size: 3.5vw;}
  .SLOGANV {font-size: 5vw;}
}
.Slogan1SUB {
  z-index: 0;
  position: relative;
  margin: 10% 0 0 0;
  line-height: 1.1;
  transform: translate3d(0, 0, 0);
  text-align: center;
  text-shadow: 5px 2px 3px rgba(0, 0, 0, 1);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: bold;
  color: rgba(185, 12, 15, 1);
}
.Slogan2SUB {
  z-index: 0;
  position: relative;
  margin: 0 auto;
  line-height: 1.2;
  transform: translate3d(0, 0, 0);
  text-align: center;
  text-shadow: 3px 2px 3px rgba(0, 0, 0, 1);
  font-size: clamp(1.8rem, 3vmax, 3rem);
  font-style: italic;
  color: rgba(255, 204, 0, 1);
}
@media only screen and (max-width: 767px) {
  #OTDTARG {
    position: absolute;
    left: 1%;
    right: 1%;
    bottom: 5px;
    height: auto;
    max-height: 160px;
    background-color: rgba(128, 128, 128, 0.7);
    border: 2px solid black;
    border-radius: 12px;
    z-index: 2;
  }
.Slogan1SUB {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  background: rgba(0, 0, 0, 0.5);
  border-radius:8px;
}
.Slogan2SUB {
  font-size: clamp(1.4rem, 2vmax, 2.8rem);
  background: rgba(0, 0, 0, 0.5);
  border-radius:8px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #OTDTARG {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 75%;
    height: auto;
    max-height: 160px;
    background-color: rgba(128, 128, 128, 0.7);
    border: 2px solid black;
    border-radius: 12px;
    z-index: 2;
  }
}
@media only screen and (min-width: 1025px) {
  #OTDTARG {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 75%;
    height: auto;
    max-height: 160px;
    background-color: rgba(128, 128, 128, 0.7);
    border: 2px solid black;
    border-radius: 12px;
    z-index: 2;
  }
}
#OTDTARG .targtop {
  position: relative;
  float: right;
  width: 100%;
  height: 60px;
}
#OTDTARG .targtop span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(24px, 2.8vw, 32px);
  color: rgba(0, 0, 51, 1);
  -webkit-text-stroke-width: 0.5%;
  -webkit-text-stroke-color: gray;
}
#OTDTARG .targbot {
  position: relative;
  float: right;
  width: 100%;
  height: 60px;
}
#OTDTARG p {
  font-size: 1.8em;
  color: black;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}
.thisbtn {
  position: relative;
  float: left;
  display: inline-block;
  align-items: center;
  text-align: left;
  padding: 10px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
  margin: 0 1% 0 1%;
  transition: 1s all;
}
.btntext {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 10px;
}
.like1 {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translate(0, -50%);
  border-radius: 50%;
  border: 1px solid black;
  font-size: 14px;
  padding: 3%;
  background-color: white;
  color: black;
}
#ARGO_OUTDOOR #ARGO_OUTDOOR_HERO {
  width: 15vw;
  height: 15vw;
  min-height: 75px;
  min-width: 75px;
  max-height: 150px;
  max-width: 150px;
}
#ARGO_INDOOR #ARGO_OUTDOOR_HERO {
  width: 10vw;
  height: 10vw;
  min-height: 80px;
  min-width: 80px;
}
#ARGO_OUTDOOR_HERO {
  position: absolute;
  left: 5px;
  bottom: 5px;
  background-color: red;
  border: 2px solid black;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 2;
  width: 15vw;
  height: 15vw;
  min-height: 75px;
  min-width: 75px;
  max-height: 150px;
  max-width: 150px;
} 
#OUTDOORCONTROLER{opacity:0;transition:1s all;}
#OUTDOORCONTROLER:hover{opacity:1;}




/*END OUTDOOR SECTION*/ /*********************START HERO****************************/ 
@media only screen and (min-width:769px) {
  .HEROHOLDER {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 15vw;
    height: 15vw;
  }
}
@media only screen and (min-width:321px) and (max-width:768px) {
  .HEROHOLDER {
    position: absolute;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    width: 35vw;
    height: 35vw;
  }
}
@media only screen and (max-width:320px) {
  .HEROHOLDER {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translate(-50%, -25%);
    width: 30vw;
    height: 30vw;
  }
}
.HEROBOX {
  position: relative;
  float: left;
  margin: 0 auto;
  width: inherit;
  height: inherit;
}
.HERO, .SUBHERO {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  overflow: hidden;
}
.HERO {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: inherit;
  height: inherit;
  border: 1px solid gray; /*background-color:black;*/
}
.SUBHERO {
  z-index: 1;
  position: absolute;
  left: 150%;
  top: 100%;
  transform: translate(-150%, -100%);
  width: 50%;
  height: 50%;
  border: 1px solid gray;
  transition: 1s all;
  color: white;
  cursor: pointer;
}
.SUBHERO:hover {
  z-index: 3;
}
.HERO:hover .HEROCONTROLERBOX {
  /*background-color: rgba(51, 51, 51, 0.5);*/
    opacity:1;
}
.HERO:hover .HEROWRAPPERBTN {
  opacity: 1;
}
.HEROCONTROLERBOX {
  float: right;
  position: relative;
  width: 50%;
  height: 100%;
  background-color: rgba(51, 51, 51, 0);
  transition: 1s all;
  opacity:0;
}
.HEROWRAPPERBTN {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 1s all;
  cursor: pointer;
}
.HEROWRAPPERBTN button {
  background-color: white;
  color: black;
  border: 1px solid black;
  transition: 1s all;
}
.HEROWRAPPERBTN button:hover {
  background-color: black;
  border: 1px solid white;
  color: white;
}
.HEROWRAPPERBTN button:active {
  background-color: black;
  border: 1px solid red;
  color: red;
}
.HEROBTN {
  border-radius: 8px;
  margin: 2px;
  width: calc(100% - 4px);
  cursor: pointer;
} /*********************END HERO****************************/ #ARGOOUTDOORCONTROLER {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100px;
  background-color: rgba(51, 51, 51, 0.5);
}
#ARGOOUTDOORWRAPPERBTN {
  position: absolute;
  top: 5%;
  transform: translateY(-5%);
}
#ARGOOUTDOORWRAPPERBTN button {
  border-radius: 8px;
  margin: 2px;
  width: 80px;
  background-color: white;
} /*********************START CONTROLER63****************************/ /*START OVERLAP SECTIONS AND OVERLAP ELEMENTS*/ body.dav .grade1 {
  background-color: rgb(18, 10, 94);
}
body.dav .grade2 {
  background-color: rgba(57, 63, 71, 1.00);
}
body.dav .grade3 {
  background-color: white;
}
body.niv .grade1 {
  background-color: rgb(18, 10, 94);
}
body.niv .grade2 {
  background-color: rgba(57, 63, 71, 1.00);
}
body.niv .grade3 {
  background-color: rgba(6, 7, 62, 1.00);
}
.welcome {
  position: relative;
  float: right;
  width: 100%;
  min-height: calc(100vh - 105px);
}
.wec2 {
  position: relative;
  float: right;
  width: 100%;
  height: 100vh;
}
.wec3 {
  position: relative;
  float: right;
  margin: 20px 20px 20px 20px;
  width: calc(100% - 40px);
  min-height: calc(100vh - 180px);
  border-radius: 12px;
  border: 1px solid black;
}
.wec3 button {
  position: absolute;
  letf: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 80%;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 55px 55px;
}
.welcomeoverlap {
  position: relative;
  float: right;
  width: 100%;
  min-height: calc(100vh - 105px);
}
.welcomevideolap {
  position: relative;
  float: right;
  width: 100%;
  min-height: calc(100vh - 90px);
  background-size: cover;
   background-position: center;
    overflow: hidden;
}
.welcomevideolap video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/*Desktop*/
@media (min-width: 1024px) {
  .video-container video {
    min-width: 100%;
    min-height: auto;
  }
}
/*Tablet*/
@media (min-width: 768px) and (max-width: 1023px) {
  .video-container video {
    min-width: 100%;
    min-height: 100%;
  }
}
/*Mobile*/
@media (max-width: 767px) {
 /*.welcome {min-height: auto;height: 80vh;}*/

 .video-container video {
    width: auto;
    height: 100%; /* Ajusta al alto, porque el ancho suele ser menor */
  }
}

.whc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}
.whcr {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.wborm{
    position: relative;
    float: left;
    width:calc( 100% - 4px);
    height: auto;
    background-color:white;
    border:1px solid black;
    border-radius: 8px;
    margin:2px;
    padding:50px;
}
.whct {
  position: relative;
  float: right;
  width: 100%;
  height: 100%;
  ;
}
.whct .topbar {
  position: absolute;
  top: 0%;
  width: 100%;
  height: 80px;
  background-color: rgba(102, 102, 102, 1);
  display: flex;
}
.whct .wrapper {
  position: absolute;
  top: 80px;
  width: 100%;
  height: calc(100% - 80px);
  background-color: black;
}
.whrf {
  position: relative;
  float: left;
  width: calc(100% - 30px);
  height: 100%;
  margin: 0 auto;
}
.Section0, .Section1, .Section2, .Section3, .Section4 {
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}
.Section0 {
  width: 100%;
  min-height: 50vh;
  overflow: hidden;
  border-radius: 12px;
}
.Section1 {
  background-size: auto calc(100% - 150px);
  background-position: 80% calc(0% + 120px);
}
.Section2 {
  background-size: auto 55%;
  background-position: 90% 67%;
}
.Section3 {
  background-size: auto calc(100% - 150px);
  background-position: 100% calc(0% + 120px);
}
.Section4 {
   background-size: auto 85%;
  background-position: 90% 67%;
}
.OverlapFixedTitle {
  position: fixed;
  color: rgba(255, 255, 255, 1);
  text-shadow: 5px 2px 3px rgba(0, 0, 0, 1.00);
}
.OverlapAbsoluteTitle {
  position: relative;
  font-size: 5.5vmax;
  color: rgba(255, 255, 255, 1);
  text-shadow: 5px 2px 3px rgba(0, 0, 0, 1.00);
  padding: 20px;
  top: 0px;
  left: 30px;
  float: left;
}
.OverlapNotTitle {
  position: relative;
  font-size: 38px;
  color: rgba(255, 255, 255, 0);
  text-shadow: 5px 2px 3px rgba(0, 0, 0, 0);
}
.OverlapTitle {
  width: 100%;
  padding: 20px;
  top: 50px;
  left: 30px;
  float: left;
  transition: 1s all;
  z-index: 1;
  font-size: 5.5vmax;
}
.OverlapText {
  position: relative;
  float: left;
  margin-bottom: 100px;
  padding: 15px;
  margin-top: 2%;
  left: 2%;
  width: 50vw;
  transition: 1s all;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid black;
  z-index: 0;
}
.OverlapText p {
  display: block;
  text-align: justify;
  margin: 0 auto;
  font-size: clamp(1.3vw, 1em, 1rem);
  color: rgba(0, 0, 0, 1);
}
.OverlapText ul li {
  position: relative;
  list-style: circle;
  font-size: inherit;
  text-align: left;
  color: inherit;
}
.OVERLAPBTN {
  width: 100%;
  margin-top: 20px;
  height: 50px;
  color: white;
}
body.niv .brochurebox1 {
  background-color: transparent;
}
body.niv .OverlapText {
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.7);
}
body.niv .OverlapText p {
  color: white;
}
.SLOGANCONTAINER {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 100vw;
}
.SLOGAN1 {
  margin: 0 auto;
  padding: 0px;
  width: 98%;
  transition: 1s all;
}
.PLAINSLOGAN {
  width: 100%;
  transition: 1s all;
  font-size: 6em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 1);
  text-shadow: 5px 2px 3px rgba(0, 0, 0, 1.00);
}
.TS1 {
  text-shadow: -2px 3px 5px white, -2px 3px 5px white, -2px 3px 5px orange, -2px 3px 5px white;
}
.TS2 {
  color: white;
  text-shadow: -2px 3px 5px black, -2px 3px 5px black, -2px 3px 5px black, -2px 3px 5px black;
}
.TS3 {
  text-shadow: -2px 3px 5px red, -2px 3px 5px red, -2px 3px 5px red, -2px 3px 5px red;
}
.SLOGAN1 {
  font-size: clamp(1.8rem, 8vw, 3.5rem);
}
.SLOGAN2 {
  font-size: clamp(1.2rem, 5vw, 2.5rem);
}
.txtpgw {
  position: relative;
  float: right;
  width: 100%;
  min-height: 100vh;
  padding: 5%;
  background-color: gray;
}
.txtph {
  padding: 5%;
  border: 1px solid black;
  border-radius: 12px;
  background-color: white;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.5);
}
.txtph ul li {
  text-align: left;
} 
/*Mobile*/
@media (max-width: 767px) {
    .OverlapText {width: 90%;}

}
/*START LIST ELEMENTS*/ 
.redtarg.on {
    position: absolute;
    bottom: -2%;
    left: 5%;
    width: 190%;
    height: 100px;
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    line-height: 100px;
    transform: rotate(-50deg);
    transform-origin: bottom left;
    pointer-events: none;
}
.redtarg.on {z-index:5;}
.redtarg.off {z-index:-5;}
.redtarg span {
    color: black;
    font-weight: bold;
    font-size: 2em;
    transform: rotate(-50deg);
    white-space: nowrap;
}
.redtarg.off span{display:none;}

.SROW, .SROW > .SVERT, .SROW > .SVERT1, .SROW > .SVERT2, .SROW > .SVERT3, .SROW > .SVERT4 {
  padding: 8px;
}
.SVERT {float: left;width: 25%;}
.SVERT1 {float: left;width: 20%;}
.SVERT2 {float: left;width: 16.6%;}
.SVERT3 {float: left;width: 33%;}
.SVERT4 {float: left;width: 50%;}
.SROW:after {
  SVERTCON:"";
  SVERTCON1:"";
  display: table;
  clear: both;
}
.SVERTCON {
  position: relative;
  width: 100%;
  padding-top: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid black;
}
.SVERTCON2 {
  position: relative;
  width: 100%;
  padding-top: 150%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid black;
  background-size:contain;
  background-position: center center;
}
.SVERTCON2 .SVERTIMG,.SVERTCON2 .SVERTIMG2,.SVERTCON .SVERTIMG,.SVERTCON .SVERTIMG2 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transition: opacity 1s ease;
}

/* Por defecto, la segunda imagen está oculta */
.SVERTCON2 .SVERTIMG:nth-child(2) , .SVERTCON .SVERTIMG:nth-child(2){
  opacity: 0;
}

/* En hover: la primera desaparece y la segunda aparece */
.SVERTCON2:hover .SVERTIMG:nth-child(1), .SVERTCON:hover .SVERTIMG:nth-child(1) {
  opacity: 0;
}
.SVERTCON2:hover .SVERTIMG:nth-child(2), .SVERTCON:hover .SVERTIMG:nth-child(2) {
  opacity: 1;
}
.SVERTCON1 {
  position: relative;
  width: 100%;
  padding-top: 160%;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid black;
}
.SVERTCONTAR {
  background-color: rgba(153, 153, 153, 0.8);
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0%;
}
.SVERTFIXED {
  position: relative;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid black;
  width: 100%;
  aspect-ratio: 1 / 1; /* height = width */
  bottom: 0;
}
@media screen and (max-width:900px) {
  .SVERT {width: 50%;}
  .SVERT1 {width: 25%;}
  .SVERT2 {width: 16.6%;}
  .SVERT3 {width: 100%;}
  .SVERT4 {width: 100%;}
}
@media screen and (max-width:600px) {
  .SVERT {width: 100%;}
  .SVERT1 {width: 50%;}
  .SVERT2 {width: 33%;}
  .SVERT3 {width: 100%;}
  .SVERT4 {width: 100%;}
}
.RelativeInside98 {
  position: relative;
  float: left;
  height: 99%;
  width: 99.3%;
  margin: 0.3% 0% 0% 0.3%;
  border-radius: 8px;
  background-color: gray;
}
.W4Button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  color: white;
  transition: 1s all;
  opacity: 1;
  text-align: center;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 50px 50px;
}
.W4Button:hover {
  background-size: 20px 20px; 
  background-position: left top;
}
.SVERTDESC {
  display: none;
  transition: display 0.3s ease;
}
.SVERTTIT {
  display: block;
  transition: display 0.3s ease;
}
.SVERTCON:hover .SVERTDESC {
  display: block;
}
.SVERTCON:hover .SVERTTIT {
  display: none;
}
.SVERTCON:hover .BUTBUI {
  height: 100%;
  width: 100%;
}
.fLine:nth-of-type(even) {
  background-color: #f2f2f2;
}
.fLine:nth-of-type(odd) {
  background-color: white;
}
.Fvalid:before {
  position: relative;
  content: "✔";
  color: green;
}
.Finvalid::before {
  content: "❌";
  color: red;
  position: relative;
  margin-right: 5px;
}
.fHeader {
  position: sticky;
  top: 45px;
  height: 60px;
  width: 98%;
  background-color: white;
  margin: 0 auto;
  border-radius: 8px 8px 0 0;
  border: 1px solid black;
  overflow: hidden;
  z-index: 2;
  margin-top: 50px;
}
.fLine {
  position: relative;
  margin: 0 auto;
  width: 98%;
  height: 50px;
  border: 1px solid black;
  overflow: hidden;
}
.fField {
  position: relative;
  width: 25%;
  float: left;
  height: 100%;
}
.fTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
}
.fObject {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(14px, 1.5vw, 24px);
}
.fIcon {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-10%, -50%);
  border-radius: 8px;
} /*END OVERLAP SECTIONS AND OVERLAP ELEMENTS*/ /*START PRIVATE NAVIGATION*/ .imwVLnav {
  float: left;
  position: fixed;
  top: 60px;
  bottom: 30px;
  transition: 1s all;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: rgba(50, 50, 50, 1.00);
  z-index: 3;
}
.imwVLnav.on {
  width: 150px;
}
.imwVLnav.on button {
  background-image: none;
  padding: 10px 20px;
}
.imwVLnav.off {
  width: 35px;
}
.imwVLnav.off button font {
  opacity: 0;
}
.imwVLnav.on button font {
  opacity: 1;
}
.imwVLnav button {
  height: 35px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  font-size: clamp(6px, 0.8vw, 10px);
}
body.dav .imw{background-color: lightgrey;color:black;}
body.niv .imw{background-color:rgba(21,21,21,1.00);color:white;}
.imw {
  position: relative;
  min-height: calc(100% - 30px);
  float: right;
  transition: 1s all;
  z-index: 0;
}
.imw.off {
  width: calc(100% - 150px);
}
.imw.on {
  width: calc(100% - 35px);
}
.imw.flat {
  width: 100%;
}
.ARGOMAINCONTENT {
  position: relative;
  float: left;
  width: 100%;
  min-height: 50%;
  height: auto;
  margin-bottom: 30px;
  border-radius: 12px;
}
.argoheaderfollow {
  position: -webkit-sticky;
  position: sticky;
  float: right;
  width: 100%;
  height: 30px;
  top: 30px;
  background-color: gray;
  z-index: 5;
  transition: 1s all;
}
.BUTTONSFRAME {
  position: relative;
  float: left;
  padding-left: 5px;
}
.TB {
  position: relative;
  float: left;
  display: inline-block;
}
.D30c {
  position: relative;
  float: left;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 2px 0 2px;
  filter: brightness(0%);
  transition: 1s all;
}
.D30d{
  position: relative;
  float: left;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 2px 0 2px;
  transition: 1s all;
}
.D30c font , .D30d font{
  position: absolute;
  transition: 1s all;
  color: rgba(0, 0, 0, 0);
  float: right;
  width: 0px;
}
.D30c:hover font, .D30d font:hover {
  color: rgba(0, 0, 0, 1);
  top: 50px;
  left: 0px;
  min-width: 100px;
  background-color: rgba(204, 204, 204, 1);
  border: 1px solid black;
  border-radius: 6px;
  padding: 5px;
  font-size: 10px;
}
@media only screen and (max-width: 767px) {
  .D30c {
    position: relative;
    float: left;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px 0 2px;
    filter: brightness(0%);
    transition: 1s all;
  }
.D30d{
  position: relative;
  float: left;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 2px 0 2px;
  transition: 1s all;
}
}
.argoheaderfollow:hover {
  height: 50px;
}
.argoheaderfollow:hover .D30c {
  height: 50px;
  width: 50px;
}
.argoheaderfollow:hover .ico {
  height: 50px;
  width: 50px;
} 

/*END PRIVATE NAVIGATION*/ /*START VISIBLEWRAPPER*/ 
@media only screen and (max-width: 767px) {
  .VISIBLEWRAPPER {
    float: right;
    position: relative;
    width: 96%;
    margin: 30px 2% 60px 2%;
  }
  .MEDIASET {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .VISIBLEWRAPPER {
    float: right;
    position: relative;
    width: 66%;
    margin: 30px 2% 60px 2%;
  }
  .MEDIASET {
    float: left;
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    width: 29%;
    height: calc(100vh - 155px);
    margin: 20px 0 50px 1%;
    border: 1px solid rgba(102, 102, 102, 0.5);
    border-radius: 8px;
    overflow: hidden;
  }
}
@media only screen and (min-width: 1025px) {
  .VISIBLEWRAPPER {
    float: right;
    position: relative;
    width: 66%;
    margin: 30px 2% 60px 2%;
  }
  .MEDIASET {
    float: left;
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    width: 29%;
    height: calc(100vh - 155px);
    margin: 20px 0 50px 1%;
    border: 1px solid rgba(102, 102, 102, 0.5);
    border-radius: 8px;
    overflow: hidden;
  }
}
.VISIBLETRIGGER {
  flota: left;
  position: relative;
  width: 99%;
  height: auto;
  margin-top: 30px;
  margin-left: 50%;
  margin-bottom: 10px;
  transform: translateX(-50%);
  padding: 5% 3% 3% 3%;
  border: 1px solid rgba(102, 102, 102, 0.5);
  border-radius: 8px;
  background-color: white;
}
.TITLETARGAS {
  position: relative;
  float: left;
  min-height: 30px;
  min-width: 20%;
  background-color: black;
  color: white;
  z-index: 1;
  border-radius: 8px;
  font-size: max(1vw, 0.6em, 0.6rem);
  padding: 1% 1%;
  width: auto;
}
.TITLEINSIDE {
  margin: 0 auto;
  position: relative;
}
.VISIBLETRIGGER p {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 1px;
  white-space: pre-wrap;
  font-size: 1vw;
}
.VISIBLELINES {
  position: relative;
  width: 100%;
  min-height: 5vh;
  padding: 2% 0 2% 0;
  overflow: hidden;
  font-size: max(1vw, 0.6em, 0.6rem);
}
.VISIBLELINES:nth-of-type(even) {
  background-color: rgba(255, 255, 204, 0.2);
}
.VISIBLELINES:nth-of-type(odd) {
  background-color: rgba(204, 204, 204, 0.1);
}
.CRight {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1%;
}
.Lleft {
  position: relative;
  float: left;
}
.wartps {
  float: right;
  position: relative;
  width: 66%;
  margin: 65px 2% 60px 2%;
}
.wpart1 {
  flota: left;
  position: relative;
  width: 99%;
  height: auto;
  margin-top: 0px;
  margin-left: 50%;
  margin-bottom: 10px;
  transform: translateX(-50%);
  padding: 5% 3% 3% 3%;
  border: 1px solid rgba(102, 102, 102, 0.5);
  border-radius: 8px;
  background-color: white;
}
.tpart1 {
  position: absolute;
  left: -5px;
  height: 50px;
  min-width: 20%;
  width: auto;
  background-color: black;
  color: white;
  z-index: 2;
  top: -25px;
  border-radius: 8px;
  padding: 5px;
}
.tbtnui {
  position: fixed;
  top: -15px;
  left: 31px;
  background-color: black;
  border-radius: 6px;
  z-index: 1;
}
.tbtnut {
  position: fixed;
  top: -15px;
  left: 1px;
  background-color: black;
  border-radius: 6px;
  z-index: 1;
}
.tpart1T {
  margin: 0 auto;
  position: relative;
  width: auto;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
}
.wpart1P {
  text-indent: 50px;
  text-align: justify;
  letter-spacing: 1px;
  white-space: pre-wrap;
  font-size: 1vw;
} 
/*END VISIBLEWRAPPER*/ 
/*START SIDE PÍCTURE*/ 
.SIDEIMG {
  position: relative;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: 0% auto;
  overflow: hidden;
} 
/*END SIDE PICTURE*/
/*START LAP CONTROLER*/
.LPCBTN{position:absolute;top:0%;left:0%;z-index:1;background-color:transparent;cursor:pointer;border-radius:50%;width:15px;height:15px;border:1px solid red;transition:1s all;}
.LPCBTN:hover{background-color:transparent;border-radius:1%;min-width:30px;height:30px;border:1px solid green}
.LPCBTNholder{position:relative;float:left;width:0%;height:0%;display:flex;transition:1s all;}
.LPCBTNholder .BUTBUI1{width:0%;height:0%;opacity:0;}
.LPCBTN:hover .LPCBTNholder{width:auto;height:30px;}
.LPCBTN:hover .LPCBTNholder .BUTBUI1{min-width:200px;height:30px;opacity:1;}
/*ENDLAPCONTROLER*/
/*page wrappers*/
.wrap6 {
  position: relative;
  width: 99%;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: 200px;
  border: 1px solid black;
  border-radius: 12px;
  background-color: white;
  margin-bottom: 10px;
  text-align: center;
}
.wupdtbtn1 {
  position: absolute;
  top: 5px;
  left: 5px;
  border: 1px solid black;
  background-color: black;
  border-radius: 6px;
}
.inner-right {
  position: absolute;
  width: 90%;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px;
  border-radius: 6px;
}


/*end page wrappers*/

#OPENNINGFILTER{position:absolute;z-index:3;left:0px;top:0px;right:0px;bottom:0px; background-color: rgba(0,0,51,0.9);overflow:hidden;color:white;}
.AWRAPP{position:relative;float:left;width:100%;height:calc(100vh - 105px);}
.AWRAPPED{position:absolute;top:50%;transform:translateY(-50%);width:100%;}
.AWRAPPED img{width:270px;height:auto;margin-top:3%;}
#NEMESISARGOSECTION{position:relative;float:left;width:100%;min-height:100vh;margin-bottom:30px;}
/* CSS Document */ /*START HORIZONTAL BAR BELOW OUTDOOR*/ 
.idhb {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  height: 30px;
  top: 0px;
  background-color: darkgrey;
  z-index: 4;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  transition: 1s all;
}
button.reveal {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 4ch;
  transition: 1s all;
  background-color: gray;
  font-size: 16px;
  height: 30px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 6px;
}
button.reveal:hover {
  max-width: 15ch;
}
.navbarhor {
  float: right;
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  transition: 1s all;
}
.navbarhor.on30 {
  height: 30px;
}
.navbarhor.on30B {
  height: 30px;
    background-color:black;
}
.navbarhor.on100 {
  height: 100px;
  background: linear-gradient(to bottom right, rgba(204, 204, 204, 0.5), rgba(18, 10, 94, 0.3), rgba(204, 204, 204, 0.5));
  display: flex;
  overflow-y: auto;
}
.navbarhor.on100 button {
  display: block;
}
.navbarhor.off {
  height: 0px;
  opacity: 0;
  z-index: -1;
}
.navbarhor.off button {
  display: none;
}
.navbarhor.auto {
  height: auto;
  z-index: 4;
}
@media screen and (max-width: 1024px) { /*Estilo hover solo para dispositivos móviles */ 
.idhb:hover {
    height: 60px;
  }
  .idhb:hover .navbarhor.on30 {
    height: 60px;
  }
  .idhb:hover .navbarhor.on30B{
    height: 60px;
  }
  .navbarhor .nav2 {
    left: 15%;
    top: 50%;
    transform: translate(-15%, -50%);
    width: 75%;
  }
  .idhb:hover .nav2::-webkit-scrollbar {
    height: 10px;
  }
  .idhb:hover .nav2 a button {
    width: 40px;
    height: 40px;
  }
}
.nav2 {
  position: absolute;
  display: flex;
  flex-wrap: nowrap;
  min-width: 85%;
  left: 5%;
  top: 50%;
  transform: translate(-5%, -50%);
  overflow-x: auto;
  transition: 1s all;
}
.nav2::-webkit-scrollbar-track {
  background-color: gray;
  border-radius: 2px;
}
.nav2::-webkit-scrollbar {
  height: 2px;
  background-color: gray;
}
.nav2::-webkit-scrollbar-thumb {
  background-color: orange;
  border-radius: 0;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.nav2 a {
  white-space: nowrap;
  margin: 0 0.5% 0.1% 0.5%;
}
button.btn30 {
  width: 30px;
  height: 30px;
  transition: filter 0.3s ease;
  border-radius: 50%;
}
button.btn30S {
  width: 30px;
  height: 30px;
  transition: 1s all;
}
button.btn30S:hover {
  width: 35px;
  height: 35px;
  border-radius:50%;
  border:1px solid red;
}
button.btn30S:active {
  width: 28px;
  height: 28px;
  border-radius:50%;
  border:1px solid green;
}
button.btn30.on {
  filter: sepia(1) saturate(5) hue-rotate(310deg) brightness(0.9);
}
button.btn30S.on {
  /*filter: sepia(1) saturate(5) hue-rotate(310deg) brightness(0.9);*/
  border-radius:50%;
  border:1px solid orange;
}
.ICON {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
  border-style: none;
  border: hidden;
  outline: none;
  transition: 1s all;
}
.navbarhor.on100 button {
  position: relative;
  min-width: 120px;
  height: 80px;
  margin: 0px 3px 0px 3px;
  display: inline-block;
  border-radius: 10px;
  border: 1px solid black;
  font-size: 10px;
  top: 50%;
  transform: translateY(-50%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid white;
}
.navbarhor.on100 button:hover {
  border: 1px solid red;
  color: red;
}
.navbarhor.on100 button:active {
  border: 1px solid green;
  color: green;
}
.navbarhoropenner {
  float: right;
  position: relative;
  width: 100%;
  margin-top: 0px;
  height: 15px;
  border: inset 1px black;
  border-radius: 6px;
}
.navbarhoropenner:hover {
  border: inset 1px red;
  color: red;
}
.navbarhoropenner:active {
  border: inset 1px green;
  color: green;
}
button.navbarhoropenner span.arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
button.navbarhoropenner span.up {
  transform: rotate(-180deg);
  bottom: 0;
  color: red;
}
body.dav .navbarhoropenner {
  background-color: white;
}
body.dav .navbarhoropenner span.arrow {
  color: black;
}
body.niv .navbarhoropenner {
  background-color: black;
}
body.niv .navbarhoropenner span.arrow {
  color: white;
} /*END OUTDOOR HORIZONTAL BAR*/ /*********************START CONTROLER63****************************/ .rmns {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.ROLLER63 {
  float: right;
  position: relative;
  border-left: 1px solid rgba(204, 204, 204, 0.6);
  background-color: rgba(71, 71, 71, 0.4);
  height: auto;
  min-height: calc(100vh - 120px);
  border-radius: 8px;
  transition: 1s all;
}
.ROLLER63 .graph-container {
  position: relative;
}
.ROLLER63 .graph-container svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}
.ROLLER63 .graph-container svg[viewBox] {
  display: block;
}
.ROLLER63.off {
  width: 80%;
}
.ROLLER63.on {
  width: calc(100% - 30px);
}
.CONTROLER63 {
  float: left;
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
  left: 0px;
  height: calc(100vh - 120px);
  border: 1px solid rgba(204, 204, 204, 0.6);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 8px;
  background-color: rgba(131, 131, 132, 1.00);
  transition: 1s all;
}
.CONTROLER63.off {
  width: 30px;
}
.CONTROLER63.on {
  width: 20%;
}
.CONTROLER63.off button font {
  display: none;
}
.CONTROLER63.on button {
  background-image: none;
  padding: 10px 20px;
  font-size: clamp(6px, 0.8vw, 10px);
}
.CONTROLER63LIST {
  position: relative;
  float: left;
  width: 100%;
  height: 35px;
  margin: 5px 0 5px 0;
}
.CTR63OFF .CONTROLER63LIST button font {
  display: none;
}
.CONTROLER63LISTINFO {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background-color: red;
  color: black;
  text-align: center;
  border-radius: 8px;
}
.ADDIMGTOBTN {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
} /*********************END CONTROLER63****************************/
/* CSS Document */ .CardPopup {
  position: absolute;
  border-radius: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid black;
  z-index: 10;
  overflow: hidden;
  overflow-Y: auto;
  transition: 1s all;
}
.CardPopup.on {
  width: 100%;
  height: 100%;
  opacity: 1;
}
.CardPopup.off {
  width: 0%;
  height: 0%;
  opacity: 0;
}
.ffpcard {
  position: fixed;
  left: 0px;
  top: 30px;
  right: 0px;
  bottom: 0px;
}
.outfpcard {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
}
.frelative {
  position: relative;
  float: right;
  height: 100%;
  width: 100%;
}
.fsbtbtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 98%;
  height: 80%;
}
.alt1 {
  color: red;
  margin: 0px;
  padding: 0px;
}
.TicketFrameOut {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  top: 2px;
  bottom: 2px;
  border-radius: 12px;
  background-color: rgba(51, 51, 51, 1);
  transition: 1s all;
}
.TicketHeader {
  height: 10px;
  top: 5px;
  border: 1px solid white;
  z-index: 5;
  overflow: hidden;
}
#TICKET_HEADER:hover {
  height: 250px;
}
.TicketMain {
  overflow: hidden;
  overflow-Y: auto;
  top: 15px;
  bottom: 80px;
  z-index: 3;
  position: absolute;
}
.TicketNav, .TicketNav2 {
  height: 60px;
  bottom: 10px;
}
.TicketNav {
  z-index: 4;
  border: 1px solid white;
  background-color: black;
}
.TicketNav2 {
  position: absolute;
  width: auto;
  border-radius: 12px;
  left: 75%;
  transform: translate(-50%, 0);
  background-color: rgba(6, 6, 6, 0.7);
  z-index: 5;
} /*START ECOM CARDS*/ 
.FON {
  z-index: 1;
  opacity: 1;
  width: 100%;
  height: 100%;
  /*overflow-y: auto;
  overflow-x: hidden;*/
}
.FOFF {
  z-index: -1;
  opacity: 0;
  height: 0px;
  width: 0px;
}
/*.FLY {
  transition: 1s all;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}*/
.TicketFrameOut2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 10px);
  top: 5px;
  bottom: 5px;
  border-radius: 12px;
  background-color: rgba(51, 51, 51, 1);
  transition: 1s all;
}
.TicketNextButtonOnImage {
  position: absolute;
  float: left;
  width: auto;
  min-height: 80px;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -20%);
  color: black;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 12px;
  text-align: center;
}
.TicketNextButton {
  position: relative;
  float: left;
  width: auto;
  min-height: 80px;
  left: 50%;
  top: 90%;
  transform: translate(-50%, 40%);
  color: black;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 12px;
  text-align: center;
}
.TicketFrame {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 32px;
  bottom: 2px;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(238, 238, 238)), to(rgb(187, 187, 187)));
  border-radius: 12px;
}
.TicketHeader, .TicketMain, .TicketNav, .TicketFullMain {
  position: absolute;
  width: 95%;
  border-radius: 12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(6, 6, 6, 0.7);
  transition: 2s all;
}
.TicketFullMain {
  overflow: hidden;
  overflow-Y: auto;
  top: 15px;
  bottom: 15px;
  z-index: 3;
  position: absolute;
}
.FON {
  z-index: 1;
  opacity: 1;
 /* position: relative;
  float: left;*/
  width: 100%;
  height: 100%;
  /*overflow-y: auto;*/
}
.FOFF {
  z-index: -1;
  opacity: 0;
  height: 0px;
  width: 0px;
}
.FLY {
  transition: 1s all;
 position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main_gridticket {
  position: relative;
  width: 100%;
  height: 100%;
}
#TICKET_HEADER_WRAPPER img {
  transition: 1s all;
}
#TICKET_HEADER_WRAPPER img:hover {
  width: 80px;
  height: 80px;
}
#TICKET_HEADER_WRAPPER h1, h2, h3, h4 {
  margin: 0 auto;
}
.stroked-text {
  -webkit-text-stroke: 2px red;
  text-stroke: 2px red; /*color: transparent; Make the text color transparent to only show the stroke */
}
.prevtic, .nexttic {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 30px;
  cursor: pointer;
}
.prevtic {
  left: 0px;
}
.nexttic {
  right: 0px;
}
.bigpic {
  width: 100%;
}
.adaptpic {
  height: 100%;
}
.picalways {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 1s all;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 100%;
} /*ENDECOM CARDS*/ 

@media only screen and (max-width: 1000px) {
  .TicketFrameOut {width: 99%;}
}
@media only screen and (max-width: 540px) {
  .TicketFrameOut {
    width: 99%;
  }
  .TicketNav {
    height: 40px;
  }
  .TicketMain {
    bottom: 60px;
  }
}
@media only screen and (max-width:768px) { /* For mobile phones:*/ .TicketFrame {
    width: 100%;
  }
}
@media only screen and (min-width:600px) { /* For tablets:*/ .TicketFrame {
    width: 70%;
  }
}
@media only screen and (min-width:768px) { /* For desktop:*/ .TicketFrame {
    width: 70%;
  }
}

.mySlides{display:none;}
.slideshow-container :first-child{display:block;}
.fade{-webkit-animation-name:fade;-webkit-animation-duration:1.5s;animation-name:fade;animation-duration:1.5s;}
.adressHeader{width:100%;height:50px;position:absolute;top:0px; background-color: rgba(0,0,0,0.5);overflow:hidden;transition:1s all; font-family:Arial, Helvetica, sans-serif;color:white;}
.adressHeader:hover{height:50%;overflow-y:auto;background-color: rgba(102,102,102,1);}
/* Created by Bernardo de Barros Gonçalves de Souza Siciliani for Studio Augusta Arts & Productions */ 
.pricing_wrapper {
  position: fixed;
  width: 100%;
  height: calc(100vh - 90px);
  border: 1px solid black;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 1);
  overflow-y: auto;
  padding-top: 50px; /* espacio para el header */
  box-sizing: border-box;
}

.pricing_header {
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  border-radius: 10px 10px 0 0;
  background-color: white;
  z-index: 10;
}

.pricing_post {
  position: relative; /* ya no absolute para que se acomode al contenido */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  gap: 5px; /* espacio entre columnas */
  overflow-x: hidden;
}

.columns {
    border-radius:12px;
    border: 1px solid rgba(61,110,224,1);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    overflow: hidden;
    position: relative;
    min-height: 300px; /* <--- altura mínima para que .price absolute se vea */
}

/* price sigue absolute, pero con ancho y altura adaptativa */
.price {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 100%;
    height: 100%; 
}

/* responsive mantiene tus reglas */
@media only screen and (max-width: 767px) {
    .columns {
        position: relative;
        width: 100%;
        min-height: 70vh;
        margin-bottom:50px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .columns {
        position: relative;
        width: 46%;
        min-height: 70vh;
    }
}
@media only screen and (min-width: 1025px) {
    .columns {
        position: relative;
        width: calc(94% / 5);
        min-height: 70vh;
    }
}


.price div {
  position: relative;
  float: left;
  width: 100%;
  padding: 1vw;
  text-align: center;
  
}

.themeprice, .titleprice, .subtitleprice { height: calc(30% / 3); font-size: 1em;}
.headprice { height: 10%; }
.textprice { height: 45%; font-size:13px; text-align: justify;}
.buttonprice { height: 15%; }

.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); }
.price:hover .headprice { background-color: #000066; color:red; }
.price .headprice {
  background-color: #111;
  color: white;
  font-size: 25px;
  padding: 1vw;
  transition: 1s all;
}

.grey { background-color: rgba(117,115,122,1.00);}
.grey1 { background-color: rgba(83,83,83,1); color:white; }
.white { background-color: white; }





























/*END UPLOAD BOX*/
  .pricing-title {
    font-size: 2rem;
    margin-bottom: .5rem;
    color: #fff;
    background-color: rgb(18, 10, 94);
    padding: 1rem;
    border-radius: 8px;
  }
  .pricing-subtitle {margin-bottom: 2rem;color:white;}
  .pricing-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 1300px;
    margin: 0 auto;
  }
  @media (min-width: 1280px) {
    .pricing-grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
  .pricing-card {
    border-radius: 1.25rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .pricing-card.popular {
    border: 2px solid rgb(18, 10, 94);
  }
  .pricing-card .card-header {
    background-color: lightslategray;
    padding: 1rem;
    color: #fff;
    text-align: center;
  }
  .pricing-card .card-theme {
    background-color: lightgray;
    padding: 0.75rem 1rem;
    text-align: center;
    font-weight: bold;
    color: #111827;
  }
  .plan-info {
    background-color: #fff;
    padding: 1rem;
    color: #374151;
  }
  .plan-info h5, .plan-info h6 {
    margin: 0.25rem 0;
  }
/* p limitado inicialmente */
  .plan-info p {
    font-size: 12px;
    margin-top: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.6s ease;
  }
  /* p expandido al hover del article */
  .pricing-card:hover .plan-info p {
      border:1px solir gray;
      border-radius:8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 25vw;
    background-color: #fff;
    z-index: 4;
    white-space: normal;
    font-size: 16px;
    padding: 1rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  }
/* CSS Document */ 
/*START POSTWRAPPER UPLOAD BOX*/ 
.postwrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0%;
  bottom: 0%;
  width: 100%;
  border: 1px solid black;
  border-radius: 12px;
}
.post_header {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  border-radius: 10px 10px 0 0;
}
.main_post {
  position: absolute;
  top: 50px;
  right: 0px;
  bottom: 50px;
  left: 0px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.post_footer {
  position: absolute;
  bottom: 0px;
  right: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  border: 1px solid black;
  border-radius: 0 0 10px 10px;
}
.btnwrapperpost_footer {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.imgSmall2 {
  position: absolute;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  transition: 1s all;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.imgSmall2:hover {
  width: 70px;
  height: 70px;
}
.leftpartpost_header {
  position: absolute;
  left:0%;
  top:50%;
  transform: translate(0%,-50%);
    width:calc(100% / 3)
}
.centerpartpost_header {
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
    width:calc(100% / 3)
}
.rightpartpost_header {
  position: absolute;
  left:100%;
  top:50%;
  transform: translate(-100%,-50%);
  width:calc(100% / 3)
} 

/*END UPLOAD BOX*/
.mxbtnw {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1;
  border: 1px solid gray;
  border-radius: 8px;
  background-color: #120a5e;
}
.wpw01 {
  position: relative;
  width: 100%;
  height:70%;  
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 12px;
  overflow: hidden;
}

.wallholder {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Tablets o pantallas menores a 1024px */
@media (max-width: 1024px) {
  .wallholder {
    width: 90%;
  }
}

/* Móviles o pantallas menores a 600px */
@media (max-width: 600px) {
  .wallholder {
    width: 100%;
  }
}

.imgSmall2 {
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  transition: 1s all;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.imgSmall2:hover {
  width: 70px;
  height: 70px;
}
.Owner {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.PASSBTN {
  position: absolute;
  width: 30px;
  top: 0px;
  bottom: 0px;
  border-radius: 12px;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.5);
  transition: 1s all;
  cursor: pointer;
  font-size: 4vw;
}
.PASSBTN:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
}
.PASSBTN:active {
  background-color: rgba(51, 51, 51, 1);
  color: red;
}
.THETABNAV {
  position: absolute;
  height: 100%;
  z-index: 2;
  top: 0px;
  bottom: 0px;
  right: 0px;
  width: 50px;
  background-color: black;
}
.MAINCONTAIN {
  position: absolute;
  float: left;
  width: calc(100% - 60px);
  top: 0px;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px;
  border: 1px solid black;
}
.MAINCONTAINOUT {
  position: absolute;
  float: left;
  width: 100%;
  top: 45px;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
}
.HALLEFT {
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.HALFRIGHT {
  position: relative;
  float: right;
  width: 50%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}
.QUESIMG {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  border-radius: 12px 0 0 12px;
  margin: 0% auto;
  overflow: hidden;
}
.GRAFITTIHOLDER {
  position: relative;
  margin: 10px 0 0px 0;
  width: 100%;
  height: auto;
}
body.dav .GRAFITTIHEADER{background-color: white;color:black;border: 1px solid gray;}
body.niv .GRAFITTIHEADER{background-color: black;color:white;border: 1px solid white;}
.GRAFITTIHEADER {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 40px;
  border-radius: 10px 10px 0 0;
  z-index:1;
}
body.dav .GRAFITTIMAIN{background-color: white;color:black;border: 1px solid gray;}
body.niv .GRAFITTIMAIN{background-color: black;color:white;border: 1px solid white;}
.GRAFITTIMAIN {
  position: relative;
  margin: 0 auto;
  width: 100%;
  min-height: 300px;
  z-index:0;
}
.POPPOSTUP {
  position: absolute;
  width: 100%;
  bottom: 40px;
  left: 0px;
  overflow: hidden;
  transition: 1s all;
}
.POPPOSTUP.off {
  width: 0%;
  z-index: -1;
  height: 0px;
}
.POPPOSTUP.on{
  z-index: 1;
  height: 300px;
}
.POPPOSTUP.off > .INTPOP {
  display: none;
}
.POPPOSTUP.on > .INTPOP {
  display: block;
}
.INTPOP {
  position: relative;
  float: left;
  margin: 1%;
  padding: 1%;
  border-radius: 8px;
  width: 98%;
  height: 450px;
  background-color: white;
}
body.dav .GRAFITTIFOOTER{background-color: white;color:black;border: 1px solid gray;}
body.niv .GRAFITTIFOOTER{background-color: black;color:white;border: 1px solid white;}
.GRAFITTIFOOTER {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 40px;
  border-radius: 0 0 10px 10px;
  z-index:1;
}
.wrappergnomi:hover {

  width: 60px;
  height: 60px;


}
.wrappergrafittifooter{
    right: 1%;
  position: absolute;
  width: auto;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
  font-family: text, MyEmoji;
    transition: 1s all;
}

.wrappergnomi {
  left: 1%;
  position: absolute;
  width: auto;
  height: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-family: text, MyEmoji;
  transition: 1s all;
  background-color: rgba(50, 50, 50, 1.00);
  border-radius:8px;

}
.adbtnemo{ 
  height: 100%;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;          /* relativo al contenedor */
  transition: font-size 0.5s ease;
  background: none;
  border: none;
}
.count {
  display: flex;
  position: absolute;
  top: -20%;
  right: -20%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: red;
  font-size: 1em; 
  transition: font-size 0.5s ease;
  justify-content: center;
  align-items: center;
}

.wrappergnomi:hover .adbtnemo {
  font-size: 2em;
}
.wrappergnomi:hover .count {
  height: 30px;
  width: 30px;
  font-size: 1.5em;
}
.emotionbtn, .wrappergnomi1 {
  position: relative;
  float: left;
  border-radius: 4px;
  margin-right: 5px;
  text-align: center;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  font-family: text, MyEmoji;
}
.emotionbtn {
  height: 16px;
  font-size: 9px;
  margin-top: 1px;
  border: 1px solid rgba(102, 102, 102, 1);
}
.wrappergnomi1 {
  background-color: white;
}
.CMJ, .CMD {
  font-size: 28px;
  padding: 2px;
  border-radius: 8px;
  font-family: "roboto", MyEmoji;
  cursor: pointer;
  transition: 1s all;
}
.CMJ:hover, .CMD:hover {
  border: 1px solid white;
  background-color: rgba(204, 204, 204, 1);
}
.CMJ:active, .CMD:active {
  border: 1px solid white;
  background-color: rgba(153, 51, 51, 1);
}
.CMJOFF, .CMD.off {
  background-color: black;
    color:white;
}
.CMJON, .CMD.on {
  background-color: white;
    color:black;
}
.POPPOSTUPD {
  position: relative;
  margin-right: 0px;
  width: 100%;
    transition:1s all;
}
.COMMENTDOWN {
  position: absolute;
  margin-top: 65vh;
  left: 0px;
  overflow: hidden;
  background-color: rgba(51, 51, 51, 0.5);
  transition: 1s all;
}
.POPPOSTUPD.off {
  height: 0px !important;
}
.POPPOSTUPD.on {

  height: 400px;
  width: 100%;
  z-index: 1;
  overflow-y: auto;
  padding: 5px 20px 5px 20px;
  border-radius: 8px;
  border: 1px solid gray;
}
.HOLDCOMMENTDOWN {
  position: relative;
  float: left;
  margin: 3px 0 0 3px;
  background-color: white;
  border-radius: 8px;
  transition: 1s all;
}
.HOLDCOMMENTDOWN.on, .HOLDON {
  width: calc(100% - 6px);
  height: auto;
  padding: 10px 20px 10px 20px;
}
.HOLDCOMMENTDOWN.off, .HOLDOFF {
  width: 0px;
  height: 0% !important;
  padding: 0% !important;
}
.RELATIVE100 {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.CMTBOX {
  position: relative;
  float: left;
  width: calc(100% - 4px);
  margin: 2px 2px 2px 2px;
  border-radius: 8px;
  background-color:rgba(20,26,49,1.00);
}
.CMOWNE {
  position: absolute;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border-radius: 50%;
  transition: 1s all;
  left: 5px;
  top: 5px;
  background-color: red;
}
.THECOM {
  font-size: 18px;
  margin-bottom: 20px;
  color:white;
    padding-left:10px;padding-right:10px;
}
.CMTREP {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border-top: 1px solid rgba(153, 153, 153, 1);
  height: 20px;
}
.RPLBTN1 {
  height: 16px;
  margin-top: 1px;
  border: 1px solid rgba(102, 102, 102, 1);
  border-radius: 4px;
  float: right;
  margin-right: 5px;
  text-align: center;
  vertical-align: middle;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  font-size: 9px;
}
.GNOANS {
  position: absolute;
  left: 0px;
  bottom: -50px;
  width: auto;
  white-space: nowrap;
  z-index: 1;
}
.UPANTISTROFOBTN {
  position: absolute;
  width: 95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* CSS Document */ /*******************************toggles btns*************************************/ 
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 23px;
  border-color: 1px solid black;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider, .slider1 {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2px;
  background-color: gray;
  -webkit-transition: .4s;
  transition: .4s;
} 
/* Custom class for changing pseudo-element background color */ 
.slider.checked:before {
  background-color: white;
}
.slider.checked1:before {
  background-color: black;
}
input:checked + .slider {
  background-color: gainsboro;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
} /* Rounded sliders */ 
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
.holdswitch {
  padding-left: 5%;
  width: 100%;
  height: 60px;
  float: left;
  margin: 1% 0 1% 0;
  border-radius: 8px;
  border: 1px solid black;
  position: relative;
}
.switch {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translate(-3%, -50%);
}
.ActiontoSwicth {
  position: absolute;
  right: 0%;
  width: calc(97% - 65px);
  border-radius: 8px;
  border-left: 1px solid black;
  height: 100%;
}
.controloption {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-25%, -50%);
  font-size: 1.3vw;
  color: white;
}
.apdcomport {
  position: -webkit-sticky;
  position: sticky;
  float: left;
  top: 45px;
  width: 100%;
  height: calc(100vh - 105px);
}
/**************************yet to correct****************************************/ 
.floatingBox {
  position: fixed;
  bottom: 50px;
  right: 50px;
  background-color: #fff;
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: right 0.3s;
  border-radius: 12px;
}
.floatingBox.on {
  z-index: 1000;
  width: 454px;
  height: 250px;
}

.floatingBox.off {
  z-index: -1;
  width: 0px;
  height: 0px;
}

.tabI {
  background-color: #120a5e;
  color: #fff;
  align-items: center;
  width: 20px;
  height: 100%;
  float: right;
  position: relative;
  cursor: move;
  transition: 1s all;
}
.closebtn {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 5px;
  cursor: pointer;
}
.resizebtn {
  background-color: transparent;
  border: none;
  color: #fff;
  padding: 5px;
  cursor: nwse-resize;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.drag-handle {
  width: 100%;
  flex: 1;
  cursor: grab;
}
.content {
  position: relative;
  float: left;
  width: calc(100% - 20px);
  height: 100%;
  padding: 10px;
  background-color: black;
} 
/* Estilo adicional para cuando se hace hover en la pestaña */ 
.tabI:hover {
  background-color: #2a2390;
  cursor: grabbing;
}
.content .videoFrame {
  padding: 20px;
}
/***********************************************************************************************/
.bottombar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px;
  border: 1px solid gray;
  transition:1s all;
}
.bottombar.on {
  bottom:30px;
  height: 100px;
  width: 90%;
  z-index: 5;
}
.bottombar.mini {
  bottom:-45px;
  height: 100px;
  width: 90%;
  z-index: 5;
}
.bottombar.off {
  bottom:0px;
  height: 0px;
  width:0%;
  z-index: -1;
}
/***********************************************************************************************/
.ARI4a{display:inline-block;width: auto;height: auto;}

/*.blinker {animation: blink 166.67ms infinite;border: 2px solid red;}
@keyframes blink {0% {border-color: red;}16.67% {border-color: blue;}33.33% {border-color: green;}50% {border-color: yellow;}66.67% {border-color: orange;}83.33% {border-color: purple;}100% {border-color: red;}}*/

.blinker {
  animation: blink 0.5s infinite; /* un poco más lento para que se note */
  border: 3px solid red !important; /* fuerza el borde */
  box-shadow: 0 0 8px red; /*  brillo alrededor */
  border-radius: 8px;      /* esquinas más visibles */
}
@keyframes blink {
  0%   { border-color: red; box-shadow: 0 0 4px red; }
  25%  { border-color: blue; box-shadow: 0 0 6px blue; }
  50%  { border-color: green; box-shadow: 0 0 6px green; }
  75%  { border-color: yellow; box-shadow: 0 0 6px yellow; }
  100% { border-color: red; box-shadow: 0 0 4px red; }
}
.ari-popup {
  /* estilo base */
  width: 250px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid black;
  border-radius: 8px;
  padding: 10px;
  z-index: 2000;
  box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.ari-popup.centered {
  /* modo centrado */
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 50vw;
  min-height: 30vh;
}

.ari-popup-message {
  margin-bottom: 60px;
  white-space: pre-line;
  text-align: center;
  line-height: 25px;
  background-color: white;
  border: 2px solid black;
  border-radius: 12px;
  padding: 8px;
}

.ari-popup-buttons {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.ari-popup-continue-button,
.ari-popup-cancel-button {
  flex: 1;
  min-height: 40px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid #444;
  background-color: #f0f0f0;
  font-weight: bold;
}

.ari-popup-continue-button:hover {
  background-color: #d4ffd4;
}
.ari-popup-cancel-button:hover {
  background-color: #ffd4d4;
}



















/* CSS Document */ 
.asisust {
  float: left;
  position: sticky;
  top: 35px;
  width: 100%;
  height: 50px;
  z-index: 2;
  transition: 1s all;
}
.ARGOSPOTWIN {
  float: right;
  margin: 20px 20px;
  width: 40vw;
  height: calc(100vh - 130px);
  border: 1px solid black;
  border-radius: 12px;
  background-color: gray;
  z-index: 0;
  transition: 1s all;
  overflow: hidden;
}
.vertcont {
  position: relative;
  float: left;
  width: 100%;
  z-index: 2;
}
.vertlist {
  float: left;
  position: relative;
  z-index: 2;
  margin: 10px 0 10px 5px;
  background: rgba(0, 0, 0, 1.00) center/cover no-repeat;
  border-radius: 12px;
  overflow: hidden;
  transition: 1s all;
  display: block;
  box-shadow: 5px 5px 10px;
}
.vertlist.off {
  width: 35%;
  min-width: 200px;
  height: 200px;
}
.vertlist.on {
  height: 420px;
  width: 99%;
  z-index: 2;
  float: left;
}
.vertlist button.vertitle {
  position: absolute;
  top: 2%;
  bottom: 5px;
  right: 5%;
  height: 80px;
  width: 50%;
  border-radius: 9px;
  z-index: 100;
  border: 1px solid black;
  box-shadow: -3px 5px 3px rgba(0, 0, 0, 0.5);
  transition: 1s all;
}
.vertlist button.vertitle:hover {
  background-color: black;
  outline: none;
  color: white;
}
.vertlist button.vertitle:active {
  box-shadow: -0px 0px 0px rgba(0, 0, 0, 1);
  outline: none;
  border: none;
}
.vertlist button.vertitle:hover .BBTYPE {
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
}
.vertlist .brief {
  z-index: 2;
  position: absolute;
  top: 2%;
  right: 30px;
}
.vertlist .brief p {
  opacity: 1;
  transition: all 1s;
  margin: 5% 5% 5% 5%;
  padding: 5% 5% 5% 5%;
  background-color: rgba(255, 255, 255, 1.00);
  border-radius: 12px;
  width: 80%;
}
.explist {
  position: absolute;
  right: 1%;
  bottom: 1%;
  width: 50px;
  height: 50px;
  font-size: 50px;
  background: transparent;
  border: none;
  color: red;
  transition: 1s all;
}
.explist.on {
  transform: rotate(180deg);
}
.explist.off {
  transform: rotate(0deg);
}
.explist:hover {
  width: 60px;
  height: 60px;
  font-size: 60px;
}
.txtlist {
  position: absolute;
  bottom: 0px;
  opacity: 0;
  transition: all 1s;
  margin: 5% 5% 5% 5%;
  padding: 2% 2% 2% 2%;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 12px;
  width: 80%;
  font-size: 22px;
  text-align: justify;
} /*START LANDING PAGE*/ .PAGELETTER {
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: 0%;
  background-color: white;
  color: black;
  padding: 50px;
  border-radius: 6px;
  overflow: hidden;
  overflow-Y: auto;
}
.BTNLINKTITLE {
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 5%;
  padding-bottom: 5%;
  background: linear-gradient(rgba(51, 51, 51, 0.5), rgba(153, 153, 153, 0.3), rgba(51, 51, 51, 0.5));
}
.BTNLINKTITLE2 {
  right: 0%;
  padding-top: 1%;
  padding-right: 3%;
  padding-bottom: 1%;
  padding-left: 3%;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8));
  border-radius: 0 0 0 12px;
}
.BTNLINKTITLE, .BTNLINKTITLE2 {
  position: absolute;
  height: auto;
  top: 0px;
  border: hidden;
  transition: 1s all;
  cursor: pointer;
  -webkit-text-stroke: 1px black;
  color: rgba(204, 0, 0, 1);
  text-decoration: none;
}
.BTNLINKTITLE:hover {
  background-color: black;
  color: white;
}
.BTNLINKTITLE2:hover {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1), rgba(255, 255, 255, 1));
  color: rgba(0, 51, 204, 1);
}
.BTNLINKTITLE:active, .BTNLINKTITLE2:active {
  background: linear-gradient(rgba(51, 51, 51, 0.3), rgba(153, 153, 153, 0.1), rgba(51, 51, 51, 0.3));
  color: white;
}
.titleindoor {
  width: 60%;
  float: right;
  padding: 10px auto;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  font-size: 48px;
  background-color: black;
} /* START ASIDE*/ .SPOTWIN {
  float: right;
  margin: 20px 20px;
  width: 30vw;
  height: 70vh;
  border: 1px solid black;
  border-radius: 12px;
  background-color: green;
  z-index: 0;
  transition: 1s all;
}
.sosten {
  float: left;
  position: sticky;
  top: 35px;
  width: 100%;
  height: 50px;
}
.IMGTESTBEHAVIOUR {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: black;
}
/* CSS Document */ /*************************************************************************************************************/ 
.TAB {
  position: absolute;
  right: 50px;
  z-index: 1;
  transition: 1s all;
  top: 50%;
  transform: translateY(-50%);
}
.TABOFF {
  width: 0%;
  opacity: 0;
}
.TABON {
  height: 100%;
  width: calc(50vw - 110px);
  min-width: 270px;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 14px 0 0 14px;
  border: 1px solid black;
  color: black;
}
.THETAB {
  transition: 1s all;
  overflow-y: auto;
}
.ENTIRETAB {
  position: relative;
  float: left;
  z-index: 0;
  width: calc(100% - 50px);
  height: 100%;
}
.QUESIMG .TicketFrameOut {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  top: 0px;
  bottom: 0px;
  border-radius: 12px;
  background-color: rgba(51, 51, 51, 1);
}
.HALFLEFTTAB {
  position: relative;
  float: left;
  z-index: 0;
  width: 50%;
  height: 100%;
} /*************************************************************************************************************/
/* CSS Document */ .cbgroup1 {
  width: 100%;
  height: 100%;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  background-color: transparent;
  color: orange;
  transition: 1s all;
}
.cbgroup1:hover {
  background-color: orange;
  color: darkblue;
}
.cbgroup1:active {
  background-color: black;
  color: white;
} 
/*START CALENDAR*/ /*START CALENDAR*/ 
#calendar_wrap {
  position: absolute;
  left: 0.1%;
  right: 0%;
  top: 30px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
}
.title_bar {
  width: 95%;
  height: 4vh;
  margin-bottom: 30px;
}
.previous_month {
  float: left;
  width: 33%;
  height: 4vh;
  text-align: center;
  border-radius: 15px;
}
.show_month {
  float: left;
  width: 33%;
  height: 4vh;
  text-align: center;
}
.next_month {
  float: left;
  width: 33%;
  height: 4vh;
  text-align: center;
  border-radius: 15px;
}
.week_days {
  width: 95%;
  text-shadow: 0 0 2px #000;
}
.days_of_week {
  float: left;
  width: 14.28%;
  text-align: center;
}
.cal_day {
  position: relative;
  float: left;
  margin-right: 0.4%;
  margin-bottom: 0.4%;
  width: 13.20%;
  height: 12vh;
  background-color: rgba(40, 9, 236, 0.5);
}
.non_cal_day {
  position: relative;
  float: left;
  margin-right: 0.4%;
  margin-bottom: 0.4%;
  width: 13.20%;
  height: 12vh;
  background-color: rgba(150, 150, 150, 0.5);
}
.day_heading {
  position: relative;
  float: left;
  width: 40px;
  height: 16px;
  padding: 6px;
  color: #000;
  font-size: 14px;
}
.openings {
  width: 100%;
  clear: left;
  text-align: center;
}
.clear {
  clear: both;
}
#EventDis {
  text-decoration: none;
  font-family: "Adobe Naskh";
  font-size: 2em;
}
.displayevent {
  width: 10vw;
  height: 7.5vh;
  position: relative;
  margin-top: -20px;
  -webkit-transition: width 2s, height 2s, background-color 0.9s ease-out;
  transition: width 2s, height 2s, background-color 0.9s ease-out;
  overflow: hidden;
  background-color: rgba(255, 36, 0, 1);
  border-radius: 15px;
}
.displayevent:hover {
  z-index: 3;
  width: 20vw;
  height: auto;
  margin-left: -3.5vw;
  margin-top: -5vh;
  border-radius: 15px;
  background-color: rgba(255, 162, 0, 1);
}
#GroupDis {
  font-size: 14px;
  color: black;
}
#PriceDis, #DateDis, #TimeDis {
  display: none;
}
.displayevent:hover #GroupDis {
  font-size: 20px;
}
.displayevent:hover #TimeDis, #PriceDis, #DateDis {
  display: block;
} 
/*END CALENDAR*/ /*START CALENDAR SDP*/ 
#SDPCALENDAR {
  float: right;
  position: relative;
  margin-top: 5px;
  width: 100%;
  min-height: 40vh;
  background-color: black;
  border: 1px solid white;
  border-radius: 10px;
  padding: 20px;
}
#SELYEAR {
  float: left;
  width: 50%;
  height: 100%;
  font-size: 18px;
  cursor: pointer;
  border-radius: 12px;
}
#SELMONTH {
  width: 50%;
  height: 100%;
  font-size: 18px;
  cursor: pointer;
  border-radius: 12px;
  display: block;
  float: left;
}
.DATEPICKER00 {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  height: 30px;
}
.title_barticket {
  position: absolute;
  width: 100%;
  height: 50px;
}
.main_gridticket {
  top: 60px;
  bottom: 3px;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.next_monthtickets, .previous_monthtickets {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
}
.previous_monthtickets {
  left: 0px;
  width: 20%;
  height: auto;
  text-align: center;
}
.next_monthtickets {
  right: 0px;
  width: 20%;
  height: auto;
  text-align: center;
}
.show_monthtickets {
  left: 50%;
  top: 10px;
  transform: translate(-50%, 0%);
  position: absolute;
  width: 20%;
  height: auto;
  text-align: center;
}
.week_daystickets {
  width: 100%;
  text-shadow: 0 0 2px #000;
  float: right;
}
.days_of_weektickets {
  text-align: center;
}
.cal_daytickets, .non_cal_daytickets, .days_of_weektickets {
  position: relative;
  float: left;
  margin-left: 0.3%;
  margin-right: 0.1%;
  margin-bottom: 0.4%;
  width: 13.6%;
  font-size: 1em;
  font-weight: 800;
}
.cal_daytickets {
  height: 30px;
  background-color: rgba(40, 9, 236, 0.5);
  padding: 2px 0 2px 0;
}
.non_cal_daytickets {
  height: 30px;
  background-color: rgba(150, 150, 150, 0.5);
  padding: 2px 0 2px 0;
}
.cleartickets {
  clear: both;
}
.cal_day button {
  z-index: 0;
  position: absolute;
  width: 100%;
  top: 0px;
  right: 0px;
  bottom: 0px;
  border: 1px solid black;
  border-radius: 8px;
  font-size: 10px;
  background-color: orange;
}
.cal_day button.on:hover {}
.cal_day button.on:active {} /*END CALENDAR SDP*/ /*END CALENDAR*/
/* CSS Document */ .grid {
  display: grid;
  grid-template-columns: repeat(10, 50px);
  gap: 5px;
  justify-content: center;
  margin-top: 20px;
}
.number-btn {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  transition: background-color 0.2s;
}
.number-btn.selected {
  background-color: green;
  color: white;
}
#selected-numbers {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: orange;
}
#error-msg {
  margin-top: 10px;
}
.text-red {
  color: #e53935; /* rojo fuerte */
}
.text-orange {
  color: #fb8c00; /* naranja vibrante */
}
.text-green {
  color: #43a047; /* verde éxito */
}
/* CSS Document */ #GENCARD {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
#GENCARD ul {
  list-style-type: none;
}
#GENCARD ul li {}
#GEN-B {
  position: absolute;
  left: 25%;
  right: 0%;
  top: 0px;
  bottom: 0px;
  padding: 0px;
} 
/*************************************GENESI**************************************/ 
.ZsZs {
  -webkit-box-shadow: inset 0px 0px 0px 3px #00000;
  -moz-box-shadow: inset 0px 0px 0px 3px #00000;
  box-shadow: inset 0px 0px 0px 3px #000000;
  border-radius: 13px;
}
.femaleli {
  position: relative;
  float: left;
  width: 100%;
  margin: 0 auto;
  height: 50%;
  overflow: hidden;
  cursor: default;
}
.maleli {
  position: relative;
  float: left;
  width: 100%;
  margin: 0 auto;
  height: 50%;
  overflow: hidden;
  cursor: default;
}
.clanheadli {
  width: 100%;
  left: 0%;
  top: 0px;
  bottom: 0px;
  position: absolute;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  cursor: default;
}
.lineageli {
  background-color: rgba(255, 153, 0, 1);
}
.clanhead {
  background-color: rgba(176, 255, 176, 1);
}
.male {
  background-color: rgba(155, 155, 227, 1);
}
.female {
  background-color: rgba(231, 171, 216, 1);
}
.godescendentbutton {
  width: 3%;
  top: 0.7%;
  bottom: 0.7%;
  left: 0.3%;
  position: absolute;
  border-radius: 13px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #00000;
  -moz-box-shadow: inset 0px 0px 0px 1px #00000;
  box-shadow: inset 0px 0px 0px 1px #000000;
  font-size: 1.5vw;
  transition: 1s all;
  cursor: pointer;
}
.goascendentbutton {
  width: 10%;
  top: 5%;
  bottom: 5%;
  right: 1%;
  position: absolute;
  border-radius: 13px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #00000;
  -moz-box-shadow: inset 0px 0px 0px 1px #00000;
  box-shadow: inset 0px 0px 0px 1px #000000;
  font-size: 1.5vw;
  transition: 1s all;
  font-weight: bold;
  cursor: pointer;
}
.goascendentbutton:hover, .godescendentbutton:hover, .personbutname:hover {
  background-color: rgba(45, 61, 125, 1);
  color: rgba(255, 255, 255, 1);
}
.goascendentbutton:active, .godescendentbutton:active, .personbutname:active {
  background-color: rgba(204, 51, 0, 1);
  color: rgba(45, 61, 125, 1);
}
.personbutname {
  max-width: 125px;
  top: 50%;
  left: 1%;
  position: absolute;
  border-radius: 13px;
  transform: translateY(-50%);
  padding: 5px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #00000;
  -moz-box-shadow: inset 0px 0px 0px 1px #00000;
  box-shadow: inset 0px 0px 0px 1px #000000;
  font-size: 1vw;
  transition: 1s all;
  font-weight: bold;
  cursor: pointer;
}
.personbutname4 {
  max-width: 125px;
  float: left;
  position: relative;
  border-radius: 13px;
  padding: 5px;
  -webkit-box-shadow: inset 0px 0px 0px 1px #00000;
  -moz-box-shadow: inset 0px 0px 0px 1px #00000;
  box-shadow: inset 0px 0px 0px 1px #000000;
  font-size: 1vw;
  transition: 1s all;
  font-weight: bold;
  cursor: pointer;
}
.DBTNAME {
  width: 90%;
}
.CBTNAME {
  width: 46%;
}
.BBTNAME {
  width: 30%;
}
.ABTNAME {
  width: 90%;
  margin-left: 10%;
}
.BTNAME {
  position: absolute;
  border-radius: 6px;
  padding: 5px;
  font-size: 1.1vw;
  -webkit-box-shadow: inset 0px 0px 0px 1px #00000;
  -moz-box-shadow: inset 0px 0px 0px 1px #00000;
  box-shadow: inset 0px 0px 0px 1px #000000;
  transition: 1s all;
  font-weight: bold;
  cursor: pointer;
  top: 50%;
  left: 1%;
  transform: translate(-1%, -50%);
}
.WIKIPEDIA {
  background-image: url(../../Tea/navicons/wikipediaW.png);
  transition: 1s all;
}
.WIKIPEDIA:hover {
  background-color: rgba(153, 0, 0, 1);
  height: 50px;
  width: 50px;
  z-index: 3;
}
.LINEAJE {
  background-image: url(../../Tea/navicons/TOFAVICON.png);
  transition: 1s all;
}
.ARMS {
  background-image: url(../../Tea/navicons/ARMS.png);
  transition: 1s all;
}
.ARMS:hover {
  background-color: rgba(153, 0, 0, 1);
  height: 50px;
  width: 50px;
  z-index: 3;
}
.LINEAGEBOX {
  position: absolute;
  top: 3px;
  border-radius: 8px;
}
.LINEBOX1 {
  left: 3.5%;
  width: calc(25% - 3.5%);
  height: 25%;
}
.LINEBOX2 {
  left: 2px;
  width: 33%;
  height: 33%;
}
.LINEBOX3 {
  left: 2px;
  width: 49%;
  height: 25%;
}
.LINEBOX4 {
  left: 2px;
  width: 89%;
  height: calc(50% - 2px);
}
.INFOBOX4 {
  position: absolute;
  bottom: 3px;
  border-radius: 8px;
  left: 2px;
  width: 89%;
  height: calc(50% - 6px);
}
.INFOBOX2 {
  position: absolute;
  border-radius: 8px;
  left: 2px;
  width: 33%;
  height: auto;
  bottom: 4%;
}
.INFOBOX3 {
  position: absolute;
  bottom: 3%;
  border-radius: 8px;
  left: 2px;
  width: 49%;
  height: 25%;
}
.COATOFARMS {
  width: 40;
  height: auto;
  display: inline-block;
}
div.scrollmenu {
  background-color: rgba(0, 0, 51, 0.5);
  overflow: auto;
  overflow-y: visible;
  white-space: nowrap;
  height: auto;
}
div.scrollmenu button {
  display: inline-block;
  height: 80px;
  width: 80px;
  color: white;
  text-align: center;
  padding: 1%;
  text-decoration: none;
  transition: 1s all;
}
.CUINA {
  cursor: pointer;
  height: 60px;
  width: 60px;
  background-size: contain;
  background-position: center;
}
div.scrollmenu button:hover {
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 8px;
  width: 120px;
  height: 120px;
  z-index: 2;
}
@media screen and (min-width:601px) {
  .DBTNAME, .CBTNAME, .BBTNAME, .ABTNAME {
    font-size: 9px;
  }
}
#MEDIABOX {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
#MEDIABOXIMGSLIDER {}
#MEDIABOXVID {}
#MEDIABOXAUDIO {}
#MEDIABOXNAV {
  position: absolute;
  right: 0%;
  top: 0px;
  bottom: 0px;
  width: 65px;
  overflow-Y: auto;
  overflow-X: hidden;
  background-color: black;
}
.BOXHOLDER {
  position: absolute;
  left: 0%;
  top: 0px;
  bottom: 0px;
  width: calc(100% - 65px);
  overflow-Y: auto;
  overflow-X: hidden;
  background-color: rgba(255, 255, 255, 0.3);
}
.JUSTABACKHOLDER {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
}
.HOLDOFF {
  display: none;
}
.HOLDON {
  display: block;
} 
/*************************************END GENESI**************************************/
/* CSS Document */ .wrapcounter {
  position: relative;
  float: left;
  width: 100%;
  min-height: 150px;
}
.holdthecounter {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  color: white;
  border-radius: 12px;
  border: 1px solid white;
  padding: 15px; /* Added padding for better spacing */
}
.countdown {
  display: flex;
  gap: 15px;
  justify-content: center; /* Center the countdown items */
}
.countdown div {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 20px;
  min-width: 80px;
  transition: all 0.3s ease;
  text-align: center; /* Ensure alignment */
}
.countdown div:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}
.countdown div span {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
}
.countdown div small {
  display: block;
  font-size: 1rem;
  margin-top: 5px;
  opacity: 0.8;
}
/* CSS Document */
/* Cursor parpadeante */
.typewriter-cursor {
  display: inline-block;
  width: 10px;
  background-color: currentColor;
  animation: blink 0.7s steps(1) infinite;
  vertical-align: bottom;
  margin-left: 2px;
}

@keyframes blink {
  50% { background-color: transparent; }
}
.cpf.on {width: 350px;
  height: 500px;z-index: 10000;}
.cpf.off{width: 0px;
  height: 0px;z-index: -1;}


.cpf {
  position: fixed;
  bottom: 30px;
  right: 2%;
  

  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  user-select: none;
  overflow: hidden;
  
  cursor: move; 
   transition: right 0.3s;
}
/* Handle para redimensionar: esquina inferior derecha */
.cpf::after {
  content: "R";
  position: absolute;
  width: 16px;
  height: 16px;
  right: 2px;
  bottom: 2px;
  padding:1%;
  cursor: se-resize;
  background: rgba(255,255,255,1.00);
  border-radius: 4px;
}

.user-msg {
    background: white;
    color: black;
    border-radius: 8px;
    padding: 10px 14px;       
    margin: 6px 0;
    text-align: right;
    line-height: 1.5;         
    word-wrap: break-word;    
}

.mfree-msg {
    background: black;
    color: white;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 6px 0;
    text-align: left;
    line-height: 1.5;
    word-wrap: break-word;
}
#CHAT.content, #MFREE.content{background: transparent;}

#CHATWINDOW2 {
  display: block;
}
#CHATWRAPPER {
  position: relative;
  float: left;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
#YOLCO_HEAD span {
  font-size: clamp(6px, 1vw, 12px);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  right: 2px;
}
#GHOSTUL {
  z-index: -2;
  opacity: 0;
}
#YOLCOBAR {
  width: 100%;
  height: 25px;
  background-color: rgba(51, 51, 51, 1);
  border-radius: 8px;
  padding-left: 5px;
  padding-right: 5px;
}
#ACCEPETFRIENDBT {
  float: right;
}
#DELFOSTEXT {
  float: left;
  width: 99%;
  height: 120px;
  border-radius: 12px;
  text-align: justify;
  resize: none;
  border: 1px black solid;
  padding: 20px;
}
#DELFOSBTN {
  float: left;
  width: 100%;
  height: 40px;
}
.FULLTEXTAREA {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 94%;
  height: 94%;
  border-radius: 12px;
  border: 1px solid black;
  font-size: clamp(6px, 1vw, 12px);
  resize: none;
  text-align: justify;
  box-sizing: border-box;
  margin: 0 auto;
}
#ARGONAUTAS {
  position: fixed;
  width: 15px;
  right: 0px;
  overflow: hidden;
  margin: 0 auto;
  top: 0px;
  bottom: 0px;
  background-color: rgba(39, 62, 94, 0.8);
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
  cursor: pointer;
  z-index: 3;
}
#ARGONAUTAS_LIST {
  position: absolute;
  top: 0px;
  bottom: 0px;
  padding: 5%;
  width: 100%;
  min-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
#ARGONAUTAS_LIST ul {
  list-style-type: none;
}
#ARGONAUTAS_LIST ul li {
  position: relative;
  float: left;
    left:-50px;
  margin: 5px;
  width: 100%;
  height: 40px;
  border: 1px solid transparent; /*background-color:rgb(0, 82, 204, 0.5)*/ ;
}
#ARGONAUTAS_LIST ul li input {
  position: absolute;
  right: 20px;
  top: 0px;
  width: 190px;
  font-size: clamp(6px, 1vw, 12px);
  color: black;
  line-height: 5px;
}
#ARGONAUTAS_LIST ul li input:hover {
  border-color: #272727;
  background-color: #0711C8;
  color: white;
}
#ARGONAUTAS_LIST ul li input:active {
  color: red;
}
.plirofories {
  width: 150px;
  height: 100px;
  background-color: gray;
  position: absolute;
  z-index: 3;
  top: 3px;
  left: 3px;
}
.status {
  position: absolute;
  left: 1px;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid black;
}
.status.on {
  background: #48A705;
}
.status.off {
  background: #909194;
}
.status.busy {
  background: #D1080B;
}
.status.absent {
  background: #F98B00;
}
.BTNCLI {
  position: absolute;
  left: 50px;
}
#YOLCO_HEAD {
  position: absolute;
  margin: 0 auto;
  top: 5px;
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px black solid;
}
.YOLCO_MAIN, .MFREEBOX_MAIN {
  position:absolute;
  width:100%;
  left:50%;
  transform:translateX(-50%);
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(255,255,255,0.35);
  border-radius: 12px;
  border: 1px black solid;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
  padding:0.5%;
}
.YOLCO_MAIN{
  top:35px;
  bottom:45%;
  
}
.MFREEBOX_MAIN {
  height:70%;
}
#CHATMESSAGES {
  padding-top: 30px;
  list-style-type: none;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
}
#YOLCO_FOOTER {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 20%;
}
.yolco {
  position: absolute;
  width: 95%;
  top: 0px;
  left: 50%;
  bottom: 90px;
  margin-left: 5px;
  transform: translateX(-50%);
}
#YOLCO_UL {
  padding-top: 30px;
  list-style-type: none;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  align-items: flex-start;
}
.emulateli {
  flex: 0 0 auto;
  position: relative;
  border-radius: 8px;
  text-indent: 10px;
  text-align: justify;
  width: calc(100% - 10px);
  height: auto;
  margin: 5px auto;
  padding: 2%;
  display: inline;
 font-size: clamp(12px, 1vw, 12px);
  zoom: 1;
}
.emulateli div {
  border-radius: 8px;
  text-indent: 10px;
  text-align: justify;
  width: 100%;
  height: 100%;
  padding: 2%;
 font-size: clamp(12px, 1vw, 12px);
  zoom: 1;
}
.MyChatColor {
  background-color: rgba(142, 142, 179, 1);
}
.HerChatColor {
  background-color: rgba(183, 117, 145, 1);
}
.emulateli span {
  float: right;
  font-size: clamp(6px, 1vw, 12px);
  margin-left: -30px;
  color: #000000;
  background-color: rgba(204, 204, 204, 1);
  padding: 3px;
  border-radius: 8px;
  margin-top: -15px;
}
.Meemulate {
  float: left
}
.Heremulate {
  float: right;
}
.emulateli p {
  font-size: clamp(6px, 1vw, 12px);
  color: black;
  font-weight: bold;
}


/***********************************************************************/
/*START DELFOS*/
#DELFOSMANTEIA {
  background-color: rgba(0, 0, 0, 1);
  transition: 1s all;
}
.DELFOSWRAPPER {
  position: fixed;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
}
.DELFOSBAR {
  bottom: 0.5%;
  left: 0.5%;
  position: fixed;
  height: 60px;
  width: 99%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 14px;
  border: 1px solid white;
  overflow: hidden;
}
.delfosrelativebar {
  position: absolute;
  top: 50%;
  left: 0%;
  right: 0%;
  transform: translateY(-50%);
  height: 50px;
}
#localVideo {
  position: absolute;
  right: 0.5%;
  bottom: 0.5%;
  width: 20vw;
  height: 15vw;
}
#remoteVideo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.DELFOSTITLE {
  color: rgba(102, 102, 102, 1);
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%, -5%);
}
#FONICHRISMOU{position:fixed;bottom:0px;left:50%;transform:translateX(-50%);transition:1s all;padding-bottom:30px;}
.FONI {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  transition: 1s all;
}
.FONION {
  z-index: 7;
  bottom:30px;
  height: 150px;
  width: 100%;
  border-radius: 8px 8px 0 0;
  border-top: 1px solid black;
}
.FONIOFF {
  z-index: -1;
  height: 0%;
  width: 0%;
  bottom: 0px;
}
.FONISUPER {
  z-index: 30;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 51, 0.8);
}
/*START DELFOS*/

/*END DELFOS*/
/* CSS Document */

/*********************FOR MULTIPLE CARROUSELS**********************************/
.carousel-container {position: relative;margin-top:20%;transform: translateY(-20%);width: 100%;}
.carousel {display: flex;transition: transform 0.5s ease-in-out;}
.carousel-item {position:relative;min-width:  20vw;min-height:  20vw;box-sizing: border-box;cursor:pointer;}

.carousel-item .ch1 img , .carousel-item .ch2  img, .carousel-item .ch3  img, .carousel-item .ch4  img, .carousel-item .ch5  img, .carousel-item .ch6  img, .carousel-item .ch7  img, .carousel-item .ch8  img, .carousel-item .ch9  img, .carousel-item .ch10  img, .carousel-item .ch11  img, .carousel-item .ch12  img, .carousel-item .ch13  img, .carousel-item .ch14  img, .carousel-item .ch15  img {width: 100%;height:100%;display: block;border: 1px solid lightgray;position:absolute;transition:1s all;border-radius:12px;}
    
.ch1, .ch2, .ch3, .ch4, .ch5, .ch6, .ch7, .ch8, .ch9, .ch10, .ch11, .ch12, .ch13, .ch14, .ch15{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width: 100%;height:100%;transition:1s all;}

 .carousel-item:hover .ch2  ,  .carousel-item:hover .ch3  ,  .carousel-item:hover .ch4  ,  .carousel-item:hover .ch7  ,  .carousel-item:hover .ch8  ,  .carousel-item:hover .ch9  , .carousel-item:hover .ch12  ,  .carousel-item:hover .ch13  ,  .carousel-item:hover .ch14    {z-index:1;width:30vw;height:30vw; border-radius: 12px;}
    
.carousel-item:hover .ch1  , .carousel-item:hover .ch6  , .carousel-item:hover .ch11   {z-index:1;width:30vw;height:30vw;left:0%;top:50%;transform:translate(-0%,-50%);border-radius:12px;}
    
.carousel-item:hover .ch5  , .carousel-item:hover .ch10  , .carousel-item:hover .ch15    {z-index:1;width:30vw;height:30vw;left:100%;top:50%;transform:translate(-100%,-50%);border-radius:12px;}
    
 .carousel-item:active .ch1  ,  .carousel-item:active .ch2  , .carousel-item:active .ch3  , .carousel-item:active .ch4  , .carousel-item:active .ch5  , .carousel-item:active .ch6  ,.carousel-item:active .ch7  , .carousel-item:active .ch8  , .carousel-item:active .ch9  ,.carousel-item:active .ch10  , .carousel-item:active .ch11, .carousel-item:active .ch12  , .carousel-item:active .ch13  , .carousel-item:active .ch14 , .carousel-item:active .ch15{width:28vw;height:28vw;}
.change{z-index:0;}
.init{z-index:1;}
    
.ch1:hover   .init,  .ch2:hover   .init , .ch3:hover    .init, .ch4:hover  .init, .ch5:hover    .init, .ch6:hover    .init,.ch7:hover    .init, .ch8:hover    .init, .ch9:hover    .init, .ch10:hover   .init , .ch11:hover    .init,.ch12:hover    .init,  .ch13:hover   .init ,  .ch14:hover    .init,.ch15   .init:hover  {opacity:0; }

 .ctext{opacity:0;position:absolute;z-index:1;height:30%;width:100%;top:100%;transform: translateY(-100%);background-color: rgba(255,255,255,0.51) ;transition:2s all;}

.ch:hover   .ctext  {opacity:1; }
.ctext:hover  {background-color: rgba(255,255,255,1.00); }

.prev, .next {position: absolute;top: 50%;transform:translateY(-50%);bottom:0%;background-color: rgba(0, 0, 0, 0.5);color: white;border: none;cursor: pointer;padding: 10px;z-index:2;}
.prev {left: 0;}
.next {right: 0;}
.hctext{position:relative;float:left;width:100%;height:100%;}
 .ctext1,.ctext2, .ctext3,.ctext4{position:absolute; height:25%; }
 .ctext1{ left:50%;top:0%; transform:translate(-50%,-0%);width:auto;}
 .ctext2{ left:50%;top:33.333%; transform:translate(-50%,-33.333%);width:auto;}
 .ctext3{ left:50%;top:66.666%; transform:translate(-50%,-66.666%);width:auto;}
 .ctext4{ left:50%;top:99.999%; transform:translate(-50%,-99.999%);width:100%;}
/* CSS Document */

 #RemoteVideo {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 80%;
                max-height: 80%;
                z-index: 0;
                border-radius: 8px;
            }
            #LocalVideo {
                position: absolute;
                bottom: 65px;
                right: 20px;
                width: 15vw;
                height: auto;
                z-index: 1;
                border-radius: 8px;
            }
            .delfosresponse {
                position: absolute;
                left: 50%;
                top: 65%;
                transform: translate(-50%, -65%);
                color: red;
                font-size: 20px;
                background-color: rgba(0,51,255,0.1);
                border-radius: 12px;
                font-family: Text;
                margin: 0 auto;
                padding: 10px;
            }
            .delfosrelativebar button {
                position: relative;
                float: left;
                width: calc(100% / 4);
                height: 100%;
                border-radius: 8px;
            }