/**
 * @license
 *
 * Font Family: Cabinet Grotesk
 * Designed by: ITF
 * URL: https://www.fontshare.com/fonts/cabinet-grotesk
 * © 2022 Indian Type Foundry
 *
 * Font Styles:
 * Cabinet Grotesk Variable(Variable font)
 * Cabinet Grotesk Thin
 * Cabinet Grotesk Extralight
 * Cabinet Grotesk Light
 * Cabinet Grotesk Regular
 * Cabinet Grotesk Medium
 * Cabinet Grotesk Bold
 * Cabinet Grotesk Extrabold         
 * Cabinet Grotesk Black
 *
*/


/**
* This is a variable font
* You can controll variable axes as shown below:
* font-variation-settings: 'wght' 900.0;
*
* available axes:

* 'wght' (range from 100.0 to 900.0)

*/

@font-face {
  font-family: 'CabinetGrotesk-Variable';
  src: url('font/CabinetGrotesk-Variable.woff2') format('woff2'),
       url('font/CabinetGrotesk-Variable.woff') format('woff'),
       url('font/CabinetGrotesk-Variable.ttf') format('truetype');
       font-weight: 100 900;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Thin';
  src: url('../fonts/CabinetGrotesk-Thin.woff2') format('woff2'),
       url('../fonts/CabinetGrotesk-Thin.woff') format('woff'),
       url('../fonts/CabinetGrotesk-Thin.ttf') format('truetype');
       font-weight: 100;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Extralight';
  src: url('../fonts/CabinetGrotesk-Extralight.woff2') format('woff2'),
       url('../fonts/CabinetGrotesk-Extralight.woff') format('woff'),
       url('../fonts/CabinetGrotesk-Extralight.ttf') format('truetype');
       font-weight: 200;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Light';
  src: url('font/CabinetGrotesk-Light.woff2') format('woff2'),
       url('font/CabinetGrotesk-Light.woff') format('woff'),
       url('font/CabinetGrotesk-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Regular';
  src: url('font/CabinetGrotesk-Regular.woff2') format('woff2'),
       url('font/CabinetGrotesk-Regular.woff') format('woff'),
       url('font/CabinetGrotesk-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Medium';
  src: url('font/CabinetGrotesk-Medium.woff2') format('woff2'),
       url('font/CabinetGrotesk-Medium.woff') format('woff'),
       url('font/CabinetGrotesk-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Bold';
  src: url('font/CabinetGrotesk-Bold.woff2') format('woff2'),
       url('font/CabinetGrotesk-Bold.woff') format('woff'),
       url('font/CabinetGrotesk-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Extrabold';
  src: url('font/CabinetGrotesk-Extrabold.woff2') format('woff2'),
       url('font/CabinetGrotesk-Extrabold.woff') format('woff'),
       url('font/CabinetGrotesk-Extrabold.ttf') format('truetype');
       font-weight: 800;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'CabinetGrotesk-Black';
  src: url('font/CabinetGrotesk-Black.woff2') format('woff2'),
       url('font/CabinetGrotesk-Black.woff') format('woff'),
       url('font/CabinetGrotesk-Black.ttf') format('truetype');
       font-weight: 900;
       font-display: swap;
       font-style: normal;
}


/*geral*/
#desktop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  background-color: rgb(255, 255, 255);
  padding: 0px;
  z-index: 1;
  font-family: 'CabinetGrotesk-Bold';
}

/*menu*/
.topmenu {
  overflow: hidden;
  margin-top: 1vmin;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
  
.topmenu a {
  text-decoration: none;
  color: #ccc;
  font-size: 1.4vmin;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

}
  
.topmenu a:hover{
  color: #000000;
}
  
.topmenu a.active{
  color: #000000;
}


/*linha separadora*/
.line{
  width: 100% !important;
  height: 1.2vmin;
  border-bottom: 1pt solid #ccc;
}

/*lexico*/ /*position scroll bar*/ /*fade-in text*/ 
#lexicon {
  position: fixed;
  right: 5%;
  left: 0vmin;
  top: 5%;
  width: 35vmin;
  height: 100%;
  letter-spacing: 0.05vmin;
  font-size: 1.4vmin;
  background-color: white;
  overflow: auto;
  transform: scaleX(-1);
}

#words {
  position: fixed;
  right: 5%;
  left: 0vmin;
  top: 5%;
  width: 35vmin;
  height: 100%;
  letter-spacing: 0.05vmin;
  font-size: 1.3vmin;
  background-color: white;
  overflow: auto;
  transform: scaleX(-1);
}

.sleeve {
  transform: scaleX(-1);
  animation: fadein 15s;
  -moz-animation: fadein 15s; /* Firefox */
  -webkit-animation: fadein 15s; /* Safari and Chrome */
  -o-animation: fadein 15s; /* Opera */
}
@keyframes fadein {
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-moz-keyframes fadein { /* Firefox */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from {
      opacity:0;
  }
  to {
      opacity:1;
  }
}
@-o-keyframes fadein { /* Opera */
  from {
      opacity:0;
  }
  to {
      opacity: 1;
  }
}

/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px; 
  border-radius: 0px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 0px;
}

/*texto*/
p {
  color: #ccc;
  font-family: 'CabinetGrotesk-Regular';
  margin-bottom: 20pt;
  width: 32vmin;
  letter-spacing: 0.05vmin;
  text-align: left;
  line-height: 2vmin;
  text-underline-offset: 0.3vmin;
}

p.active {
  color: rgb(0, 0, 0);
}

/*sinopse*/
.popup-container-label {
  position: relative;
}

.label {
  margin: 0px;
  padding: 0px;
  outline: 0px;
  color: #000000;
  z-index: -1;
}

.label-box {
  font-family: 'CabinetGrotesk-Regular';
  border: 1pt solid #ccc;
  border-top: none;
  border-bottom: none;
  border-left: none;
  color: rgb(0, 0, 0);
  background-color: rgb(255, 255, 255);
  width: 41vmin;
  height: 100%;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: fixed;
  z-index: -1;
}

.label:hover {

  text-decoration: underline;
  text-underline-offset: 0.3vmin;
  z-index: -1;
}

.popup-detail-box {
  bottom: 25px;
  left: 3vmin;
  position: absolute;
  display: none;
  z-index: -1;
  font-size: 1.4vmin;
}

.popup-container-label:hover .popup-detail-box {
  display: block;
  z-index: -1;
}


/* SAFARI DISCLAIMER */
#viewport {
	position: fixed;
  z-index: 3;
}

.alert-safari {
	margin-left: 50%;
	color: rgb(0, 0, 0);
	margin-top: 35%;
}

.disclaimer {
  font-family: 'CabinetGrotesk-Bold';
  font-size: 1.7vmin;
  color: rgb(0, 0, 0);
}