:root {
   --font-extralight: 'Assistant-ExtraLight';
   --font-light: 'Assistant-Light';
   --font-regular: 'Assistant-Regular';
   --font-semibold: 'Assistant-SemiBold';
   --font-bold: 'Assistant-Bold';
   --font-extrabold: 'Assistant-ExtraBold';
}

@font-face {
   font-family: 'Assistant-Regular';
   src: url('../fonts/Assistant-Regular.eot');
   src: url('../fonts/Assistant-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Assistant-Regular.woff2') format('woff2'), url('../fonts/Assistant-Regular.woff') format('woff'), url('../fonts/Assistant-Regular.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: 'Assistant-Bold';
   src: url('../fonts/Assistant-Bold.eot');
   src: url('../fonts/Assistant-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Assistant-Bold.woff2') format('woff2'), url('../fonts/Assistant-Bold.woff') format('woff'), url('../fonts/Assistant-Bold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'Assistant-ExtraBold';
   src: url('../fonts/Assistant-ExtraBold.eot');
   src: url('../fonts/Assistant-ExtraBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Assistant-ExtraBold.woff2') format('woff2'), url('../fonts/Assistant-ExtraBold.woff') format('woff'), url('../fonts/Assistant-ExtraBold.ttf') format('truetype');
   font-weight: bolder;
   font-style: normal;
}

@font-face {
   font-family: 'Assistant-ExtraLight';
   src: url('../fonts/Assistant-ExtraLight.eot');
   src: url('../fonts/Assistant-ExtraLight.eot?#iefix') format('embedded-opentype'), url('../fonts/Assistant-ExtraLight.woff2') format('woff2'), url('../fonts/Assistant-ExtraLight.woff') format('woff'), url('../fonts/Assistant-ExtraLight.ttf') format('truetype');
   font-weight: lighter;
   font-style: normal;
}

@font-face {
   font-family: 'Assistant-Light';
   src: url('../fonts/Assistant-Light.eot');
   src: url('../fonts/Assistant-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Assistant-Light.woff2') format('woff2'), url('../fonts/Assistant-Light.woff') format('woff'), url('../fonts/Assistant-Light.ttf') format('truetype');
   font-weight: lighter;
   font-style: normal;
}

@font-face {
   font-family: 'Assistant-SemiBold';
   src: url('../fonts/Assistant-SemiBold.eot');
   src: url('../fonts/Assistant-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Assistant-SemiBold.woff2') format('woff2'), url('../fonts/Assistant-SemiBold.woff') format('woff'), url('../fonts/Assistant-SemiBold.ttf') format('truetype');
   font-weight: bold;
   font-style: normal;
}

strong, b {
   font-family: Assistant-Bold;
   font-weight: bold;
}

html {
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: auto;
}

body {
   margin: 0px;
   font-family: Assistant-Regular, sans-serif;
   background: white;
   color: white;
   scrollbar-width: 0px;
   overflow-x: hidden;
   max-width: 100vw;
}

html, body {
   overflow-x: hidden;
}

.blur {
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);
}

input:focus {
   outline: none;
}

.section {
   background: black;
   margin-bottom: 8px;
}

.alertOutline {
   outline-color: red!important;
}

/* width */

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

body, body *, html {
   scrollbar-width: none;
}

h1, h2, h3, h4, h5, h6 {
   text-rendering: optimizeLegibility !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale;
}

h1 {
   font-family: Assistant-Bold, sans-serif;
   font-size: 1.5em;
}

h2 {
   font-family: Assistant-Regular, sans-serif;
   font-size: 1.2em;
}

h4 {
   font-family: Assistant-Light, sans-serif;
}

.svgWhite {
   fill: white;
}

.section-header {
   margin: 0em 2em;
   display: flex;
}

#navBar {
   position: fixed;
   display: flex;
   top: 0px;
   width: 100%;
   max-width: 100vw;
   padding-bottom: 0px;
   z-index: 50;
   -webkit-transition: 0.5s;
   transition: 0.5s;
   background: rgba(255, 255, 255, 1);
   padding-top: 15px;
   height: 44px;
   box-shadow: 0 6px 3px rgba(0, 0, 0, 0.3);
}

#logoContainer {
   position: absolute;
    width: 103px;
    height: 35px;
    margin: auto;
    margin-left: 50%;
    transform: translate(-50%);
    background: url(../img/Logo-tempo-escritorio-small.png);
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 0.5s;
    background-size: contain;
}

/* elements */

.blurredBackground {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.85;
}

@supports (--webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(5px) brightness(90%)) {
   .blurredBackground {
      opacity: 0.85;
      --webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px) brightness(90%);
   }
}

#alertsWrapper {
   position: fixed;
   display: flex;
   top: 0;
   width: 100vw;
   height: 100vh;
   box-sizing: border-box;
   pointer-events: none;
   z-index: 900;
   background: rgba(255, 255, 255, 0);
   transition: all 0.3s;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

#alertsWrapper.active {
   background: rgba(255, 255, 255, 0.7);
}

#alertsWrapper>div {
   padding: 10px;
   background-color: black;
   color: white;
   margin-bottom: 10px;
   margin-right: 10px;
   border-radius: 6px;
   max-width: 66vw;
   pointer-events: all;
   display: none;
}

#menu {
   width: 250px;
   max-width: 0;
   height: 100vh;
   position: fixed;
   left: 0px;
   top: 0px;
   background: rgba(0, 0, 0, 0.7);
   z-index: 1000;
   overflow: hidden;
   transition: max-width 0.3s ease-in-out;
   backdrop-filter: blur(5px) brightness(90%);
   --webkit-backdrop-filter: blur(5px);
}

#menuContent {
   height: 100vh;
   max-height: 100vh;
   width: 250px;
   position: relative;
   left: 0;
   top: 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.menuIconWraper {
   position: fixed;
   margin: 15px 20px;
   left: 0;
   top: 0;
   transition: margin 0.3s ease-in-out;
   cursor: pointer;
   z-index: 1000;
}

.menuIconWraper img.menuIcon {
   max-height: 100%;
   width: 30px;
   margin: 0;
}

#closeMenuIcon {
   display: none;
   position: absolute;
}

#menuItemsWraper {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.menuItem {
   width: 100vh;
   height: 5em;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   font-family: Assistant-Bold;
   background: rgba(0, 0, 0, 0);
   color: rgb(255, 255, 255);
   transition: background 0.3s linear, color 0.3s linear;
   cursor: pointer;
}

.menuItem:hover {
   background: rgba(255, 255, 255, 1);
   color: rgb(0, 0, 0)
}

.w-100 {
   width: 100%;
}

.h-100 {
   height: 100%;
}

.flex-row {
   display: flex;
   flex-direction: row;
   -webkit-flex: 0;
   flex-shrink: 0;
}

.flex-col {
   display: flex;
   flex-direction: column;
   -webkit-flex: 0;
   flex-shrink: 0;
}

.flex-item-100 {
   flex-basis: 100%;
   -webkit-flex: 0;
   flex-shrink: 0;
}

.flex-item-50 {
   flex-basis: 50%;
   -webkit-flex: 0;
   flex-shrink: 0;
}

.flex-item-33 {
   flex-basis: 33.333%;
   -webkit-flex: 0;
   flex-shrink: 0;
}

.flex-item-25 {
   flex-basis: 25%;
   -webkit-flex: 0;
   flex-shrink: 0;
}

.grid-item {
   position: relative;
   display: block;
   width: 100%;
}

.pagination {
   font-size: 1.5em;
   display: flex;
   width: 100%;
   justify-content: center;
   flex-flow: wrap;
   background: black;
}

.pagination span {
   cursor: pointer;
   color: white;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
}

.pagination span.active {
   font-weight: bolder;
   color: white;
   cursor: default;
}

.pagination span:hover:not(.active) {
   font-weight: bolder;
}

#navbarContentWrapper {
   position: absolute;
   right: 0px;
}

#navbarContentWrapper .socialContainer.desktop {
   display: none;
}

#navbarContentWrapper .socialContainer.mobile {
   display: flex;
}

#navBar #navbarContentWrapper .socialContainer.mobile img {
   filter: none;
   cursor: pointer;
}

#navBar #navbarContentWrapper span {
   cursor: pointer;
}

#navBar #navbarContentWrapper span {
   display: none;
}

/* div.genericPopupWrapper {
   position: fixed;
   display: none;
   width: 100vw;
   height: 100vh;
   max-width: 100vw;
   max-height: 100vh;
   box-sizing: border-box;
   z-index: 900;
   transition: all 0.3s;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   overflow: hidden;
   top: 0;
} */

div.genericPopupWrapper {
   position: fixed;
   display: none;
   width: 100vw;
   height: 100vh;
   max-width: 100vw;
   max-height: 100vh;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   z-index: 900;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   overflow: hidden;
   top: 0px;
   left: 0px;
}

/* .popUp {
   width: 100%;
   max-width: 100vw;
   max-height: 100vh;
   background: rgba(0, 0, 0, 0.9);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   display: flex;
   flex-direction: column;
   color: white;
   justify-content: flex-start;
   align-items: center;
   padding: 25px;
   box-sizing: border-box;
   pointer-events: all;
   position: absolute;
   overflow-y: auto;
} */

.popUp {
   width: 100%;
   max-width: 100vw;
   max-height: 100vh;
   background: rgba(0, 0, 0, 0.9);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   color: white;
   -webkit-box-pack: start;
   -ms-flex-pack: start;
   justify-content: flex-start;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   padding: 25px;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   pointer-events: all;
   position: relative;
   overflow-y: auto;
}

.popUp .loginButton {
   filter: grayscale(1);
   margin-bottom: 15px;
}

.popUp input {
   -webkit-appearance: none;
   background: none;
   color: white;
   outline-color: white;
   outline-width: 1px;
   outline-style: solid;
   outline-offset: -1px;
   width: 100%;
   height: 40px;
   padding-left: 10px;
   margin: 0px;
   margin-bottom: 15px;
   border: none;
   box-sizing: border-box;
   font-family: var(--font-light);
   font-size: 1.2em;
   transition: all 0.5s;
}

.popUp button {
   width: 100%;
   height: 40px;
   background: rgba(255, 255, 255, 0.5);
   border: none;
   color: white;
   font-weight: bolder;
   margin-bottom: 10px;
}

.popUp .previousPopup {
   position: absolute;
   width: 20px;
   height: 20px;
   top: 2px;
   left: 2px;
}

.popUp .closePopup {
   position: absolute;
   width: 20px;
   height: 20px;
   top: 2px;
   right: 2px;
}

.popUp #goToRegister {
   cursor: pointer;
}

#registerModule.popUp {
   display: none;
}

.popUp .checkBoxModule {
   display: flex;
   width: 100%;
   align-items: center;
   margin-bottom: 15px;
   transition: all 0.5s;
   outline-color: transparent;
   outline-width: 1px;
   outline-style: solid;
}

.popUp .checkBoxModule .checkBox {
   width: 25px;
   height: 25px;
   min-width: 25px;
   min-height: 25px;
   background: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

.popUp .checkBoxModule p {
   padding-left: 15px;
   font-family: var(--font-extralight);
   font-size: 0.8em;
   margin: 0;
}

/*** FOOTER ***/

#footer {
   width: 100%;
   overflow: hidden;
   padding: 25px 20px;
   box-sizing: border-box;
   margin-bottom: 0px;
   padding-bottom: 10px;
   display: block;
   flex-direction: column;
   background: black;
   color: white;
}

#subscribeFooterContainer p {
   font-size: 0.7em;
   text-align: justify;
}

input#subscribeFooterInput {
   background: black;
   color: white;
   outline-color: white;
   outline-width: 1px;
   outline-style: solid;
   outline-offset: -1px;
   width: 100%;
   height: 30px;
   padding-left: 10px;
   margin: 0px;
   border: none;
   box-sizing: border-box;
}

input#subscribeFooterInput:focus {
   outline-offset: 0;
}

#inputTextWraper {
   margin-right: 0px;
   margin-bottom: 10px;
}

#inputButtonWraper {
   margin-left: 0px;
}

#subscribeFooterButton {
   width: 100%;
   height: 30px;
   background: white;
   border: none;
   color: black;
   font-weight: bolder;
   margin-bottom: 10px;
}

#inputButtonWraper label {
   font-size: small;
}

#socialFooterContainer {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   flex-flow: wrap;
}

.socialContainer {
   display: flex;
   flex-direction: row;
   flex-flow: wrap;
   justify-content: center;
}

#socialFooterContainer .socialContainer span {
   flex-basis: 100%;
   text-align: center;
   font-size: 1.5em;
}

.socialContainer img {
   width: 30px;
   height: 30px;
   margin: 0 10px;
   /* filter: invert(1) grayscale(1); */
}

#intelectualRightsDisclaimer {
   width: 100%;
   text-align: justify;
   box-sizing: border-box;
   padding-bottom: 0px;
   font-family: Assistant-ExtraLight;
   font-size: 0.7em;
}