@import url(fontawesome-all.min.css);
/* ---- Nunito (pesos + itálicas que indicaches) ---- */
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('../../fonts/subset-Nunito-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---- WindSong ---- */
@font-face {
  font-family: 'WindSong';
  src: url('../../fonts/subset-WindSong-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WindSong';
  src: url('../../fonts/subset-WindSong-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, fts, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure,
footer, fts, header, hgroup, menu, nav, section {
  display: block; }

html {
    margin:    0 auto;
    max-width: 1450px;
}  
body {
  line-height: 1;
  cursor: default; }
  

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 2; }

body {
  -webkit-text-size-adjust: none; }

mark {
  background-color: transparent;
  color: inherit; }

input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input, select, textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none; }

/* Basic */
@-ms-viewport {
  width: device-width; }

body {
  -ms-overflow-style:-ms-autohiding-scrollbar;
}
::-webkit-scrollbar {
  width: 0px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0px;
}

@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px; } }

html {
  box-sizing: border-box; }

*, *:before, *:after {
  box-sizing: inherit; }

html, body {
  height: 100%;
  overflow-x: hidden;
  width: 100%; }
  @media screen and (max-height: 640px) {
    html, body {
      height: auto;
      min-height: 100%; } }

body {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: top;
  -webkit-justify-content: top;
  -ms-justify-content: top;
  justify-content: top;
  background-color: #000000;
  padding: 6em 4em 4em 4em; }
  body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important; }
  body > * {
    position: relative;
    z-index: 2; }
  @media screen and (max-width: 1680px) {
    body {
      padding: 4em 3.5em 3.5em 3.5em; } }
  @media screen and (max-width: 736px) {
    body {
      padding: 3em 1em 1em 1em; } }
  @media screen and (max-width: 360px) {
    body {
      padding: 2em 1em 1em 1em; } }

/* BG */
#bg {
  -moz-transition: opacity, 4.5s ease-in-out;
  -webkit-transition: opacity 4.5s ease-in-out;
  -ms-transition: opacity 4.5s ease-in-out;
  transition: opacity 4.5s ease-in-out;
  height: 100%;
  left: 0em;
  opacity: 0.75;
  position:fixed;
  top: 0;
  width: 100%;
  z-index: 1; }
  #bg div {
    -moz-transition: opacity 4.5s ease;
    -webkit-transition: opacity 4.5s ease;
    -ms-transition: opacity 4.5s ease;
    transition: opacity 4.5s ease;
    background-size: cover;
    min-height:950px; 
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 130%; }
    #bg div.visible {
      -moz-animation: bg 45s linear infinite;
      -webkit-animation: bg 45s linear infinite;
      -ms-animation: bg 45s linear infinite;
      animation: bg 45s linear infinite;
      opacity: 1;
      visibility: visible;
      z-index: 1; }
      #bg div.visible.top {
        z-index: 2; }
      @media screen and (max-width: 1280px) {
        #bg div.visible {
          -moz-animation: bg 29.25s linear infinite;
          -webkit-animation: bg 29.25s linear infinite;
          -ms-animation: bg 29.25s linear infinite;
          animation: bg 29.25s linear infinite; } }
      @media screen and (max-width: 736px) {
        #bg div.visible {
          -moz-animation: bg 18s linear infinite;
          -webkit-animation: bg 18s linear infinite;
          -ms-animation: bg 18s linear infinite;
          animation: bg 18s linear infinite; } }
    #bg div:only-child {
      -moz-animation-direction: alternate !important;
      -webkit-animation-direction: alternate !important;
      -ms-animation-direction: alternate !important;
      animation-direction: alternate !important; }
  body.is-preload #bg {
    opacity: 0;}

@-moz-keyframes bg {
  0% {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -moz-transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%); } }

@-webkit-keyframes bg {
  0% {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -moz-transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%); } }

@-ms-keyframes bg {
  0% {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -moz-transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%); } }

@keyframes bg {
  0% {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  100% {
    -moz-transform: translateX(-25%);
    -webkit-transform: translateX(-25%);
    -ms-transform: translateX(-25%);
    transform: translateX(-25%); } }

/* Type */
body, input, select, textarea {
  color: rgba(255, 255, 255, 0.95);
  font-family: "Nunito", sans-serif;
  text-shadow: rgba(0, 0, 0, 1) 0.5px 0.5px 1px ;
  text-align: justify;
  font-size: 12pt;
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.5em; }
  @media screen and (max-width: 1680px) {
    body, input, select, textarea {
      font-size: 12pt; } }
  @media screen and (max-width: 1280px) {
    body, input, select, textarea {
      font-size: 12pt; } }
  @media screen and (max-width: 980px) {
    body, input, select, textarea {
      font-size: 12pt; } }
  @media screen and (max-width: 736px) {
    body, input, select, textarea {
      font-size: 12pt; } }
  @media screen and (max-width: 480px) {
    body, input, select, textarea {
      font-size: 12pt; } }
      

a {
  -moz-transition: border-bottom-color 0.2s ease, color 0.2s ease;
  -webkit-transition: border-bottom-color 0.2s ease, color 0.2s ease;
  -ms-transition: border-bottom-color 0.2s ease, color 0.2s ease;
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
  color: #ffffff;
  text-decoration: none;
  will-change: filter, color, font-size;
  transition: filter .2s ease-in-out, color .2s ease-in-out;}
  a:hover {
    filter:drop-shadow(rgba(97, 124, 221, 0.6) 0px 0px 4px);
    color: #94e87b!important;
    border-bottom-color: transparent;
    text-decoration: none;

   }

strong, b {
  color: #ffffff;
  font-weight: 700; }

em, i {
  font-style: italic; }

p {
  margin: 0 0 2em 0;
 }

 span {
  font-weight: 100;
  font-size: 0.8em;
  line-height: 0.8em;
 
 }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  margin: 0 0 0.5em 0; }
  h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none; }

h1 {
  opacity: 0;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: none;
  filter:drop-shadow(rgba(0, 0, 0, 0.85) 1px 1px 1px);
  background: linear-gradient(to right, #bfff00, #7ab4ef);
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

 /* Clase para o logo / texto especial */
.Mlg {
  opacity: 0;
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1.3em;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: none;
  filter: drop-shadow(rgba(0, 0, 0, 0.85) 1px 1px 1px);
  background: linear-gradient(to right, #bfff00, #7ab4ef);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
  font-weight: 600;
  font-size: 1.75em;
  line-height: 1.3em;
  text-align: center;
  text-shadow: none;
  filter:drop-shadow(rgba(0, 0, 0, 0.6) 1px 1px 1px);
  background: linear-gradient(to right, #bfff00, #7ab4ef);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  opacity: 0;
  font-family: "WindSong", cursive;
  text-align: center;
  font-weight: 400;
  font-style: normal;
  color:  rgba(255, 255, 255, 0.7);
  text-shadow: rgba(191, 255, 0, 0.7) 1px 1px 8px;
  font-size: 1.4em;
  margin-top: -0.5em;
  line-height: 1.5em;
  animation-name:anim-down;
  animation-duration:2s;
  animation-iteration-count:initial;}
  @media screen and (min-width: 981px) {
    h3 {text-align: left; font-size: 1.6em;}}  


h4 {
  font-weight: 500;
  font-size: 1.2em;
  line-height: 1.25em;
  text-shadow: none;
  filter:drop-shadow(rgba(0, 0, 0, 0.6) 1px 1px 1px);
  background: linear-gradient(to right, #bfff00, #7ab4ef);
  background-clip: text;
  -webkit-text-fill-color: transparent;
 }

h5 {
  font-weight: 600;
  line-height: 1.25em;
  text-align: left;
  text-shadow: none;
  filter:drop-shadow(rgba(0, 0, 0, 0.6) 1px 1px 1px);
  background: linear-gradient(to right, #bfff00, #7ab4ef);
  background-clip: text;
  -webkit-text-fill-color: transparent; }

h6 {
  font-weight: 200;
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.25em;
  text-align: center;
  text-shadow: none;
  color:  rgba(255, 255, 255, 0.75);}

sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em; }

sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em; }

blockquote {
  border-left: solid 8px rgba(255, 255, 255, 0.35);
  font-style: italic;
  margin: 0 0 2em 0;
  padding: 0.5em 0 0.5em 2em; }

code {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  border: solid 1px rgba(255, 255, 255, 0.35);
  font-family: "Nunito", monospace;
  font-size: 0.9em;
  margin: 0 0.25em;
  padding: 4.25em 4.65em; }

pre {
  -webkit-overflow-scrolling: touch;
  font-family: "Nunito";
  font-size: 0.9em;
  margin: 0 0 2em 0; }
  pre code {
    display: block;
    line-height: 1.75em;
    padding: 1em 1.5em;
    overflow-x: auto; }

hr {
  border: 0;
  border-bottom: solid 2px rgba(255, 255, 255, 0.35);
  margin: 2em 0; }
  hr.major {
    margin: 3em 0; }

/* Section/Article */
section.special, article.special {
  text-align: center; }

header p {
  color: rgba(255, 255, 255, 0.6);
  position: relative;
  margin: 0 0 2em 0; }

header h2 + p {
  font-size: 1.25em;
  margin-top: -1em;
  line-height: 1.5em; }

header h3 + p {
  font-size: 1.1em;
  margin-top: -0.8em;
  line-height: 1.5em; }

header h4 + p,
header h5 + p,
header h6 + p {
  font-size: 0.9em;
  margin-top: -0.6em;
  line-height: 1.5em; }

@media screen and (max-width: 980px) {
  header br {
    display: none; } }

@media screen and (max-width: 736px) {
  header br {
    display: inline; } }

@media screen and (max-width: 480px) {
  header br {
    display: none; } }
  

/* Icon */
.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative; }
  .icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400; }
  .icon > .label {
    display: none; }
  .icon:before {
    line-height: inherit; }
  .icon.solid:before {
    font-weight: 900; }
  .icon.brands:before {
    font-family: 'Font Awesome 5 Brands'; }

/* List */
ol {
  list-style: decimal;
  margin: 0 0 2em 0;
  padding-left: 1.25em; }
  ol li {
    padding-left: 0.25em; }

ul {
  list-style: disc;
  margin: 0 0 2em 0;
  padding-left: 1em; }
  ul li {
    padding-left: 0.5em; }

/* Icons */
ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0; }
  ul.icons li {
    display: inline-block;
    padding: 0 1em 0 0; }
    ul.icons li:last-child {
      padding-right: 0; }
    ul.icons li .icon:before {
      font-size: 1.25em; }
    ul.icons li a {
      color: inherit; }

 /* contc */
ul.contc {
  cursor: default;
  text-align: center;
  font-size: 0.85em;
  list-style: none; }
  ul.contc li {
    display: inline-block;
    padding: 0.2em 2.5em 0.2em 2.5em; }

    ul.contc li .icon:before {
      vertical-align: top;
      padding: 0 0 0.1em 0;
      margin: 0.3em 0 0.3em 0;
      font-size: 2.2em; }
    ul.contc li a {
      color: inherit; }     

/* Form */
.form-wrapper{
  animation: ffadeIn 3s ease-out;
  
}
.ftitle{
  text-align: center;
  margin-bottom: 10px;
}
.fsubtitle{
  text-align: center;
  margin-bottom: 30px;
}
.contact-form{
  width: 100%;
}

.form-row{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.form-column{
  flex: 1;
  min-width: 250px;
}
.form-label{
  display: block;
  font-style: italic;
  font-size:9pt;
  margin-bottom: 2px;
}
.form-input,
.form-textarea{
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  font-style: italic;
  transition: background-color 0.3s, transform 0.3s;
}
.form-input:focus,
.form-textarea:focus{
  background-color: rgba(255, 255, 255, 0.2);
  outline: none;
  transform: scale(1.03);
}
.form-textarea{
  resize: none;
}
::placeholder {
  color: rgba(255, 255, 255, 0.3);
  text-shadow: none;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: rgba(255, 255, 255, 0.3);
  text-shadow: none;
}
.submit-button{
  display: block;
  width: 120px;
  padding: 12px;
  background:rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 10pt;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.submit-button:hover{

  background: rgba(148, 232, 123, 0.3);
}

@keyframes ffadeIn{
  from{
      opacity: 0;
      transform: translateY(-20px);
  }
  to{
      opacity: 1;
      transform: translateY(0);
  }
}

@media (max-width: 768px){
  .form-wrapper{
      padding: 5px;
  }
  .form-row{
      flex-direction: column;
  }
}

@media (max-width: 540px){
  .form-wrapper{
      padding: 5px;
  }
  .form-row{
      flex-direction: column;
  }
  .form-column{
      min-width: 100%;
  }
  .form-label{
      font-size: 9pt;
  }
  .form-input,
  .form-textarea{
      padding: 10px;
  }
  .submit-button{
      padding: 14px;
      font-size: 10pt;
  font-weight: 500;
  }
}
/* Features */

 .features {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 2em 0;
  animation-duration: 2.5s;
  animation-name: anim-f7;
  animation-iteration-count:initial;
}

  .features article {
    padding: 1.75em 1.75em 0.1em 1.75em;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.30) 1px 1px 2px;
    font-size: 0.75em;
    text-align: center;
    margin: 1em 0em 0em 1.11em;
    width: calc(16.9% - 1.5em);
    scale: .3; opacity: 0;
    transform: translateY(100px);
    animation: anim-fade-in linear forwards;
    animation-timeline: view();
    animation-range: -100px 220px;
    
  }

    .features article:nth-child(2n) {
      margin-right: 0;
    }

    .features article .image {
      border-radius: 18px;
      filter:drop-shadow(rgba(0, 0, 0, 0.45) 0px 6px 12px);
      display: block;
      margin-bottom: 0.5em;
      margin-left: -1.75em;
      margin-top: -1.75em;
      position: relative;
      width: calc(100% + 3.5em);
    }

      .features article .image img {
        border-radius: 18px 18px 0px 0px;
        width: 100%;

      }

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

    .features article {
      margin: 1.25em 0em 0em 1.25em;
      width: calc(25% - 1.55em);
    }

  }

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

    .features article {
      padding: 1.5em 1.5em 1em 1.5em ;
      margin: 0.8em 0em 0em 1em;
      width: calc(33% - 1.2em);
    }

      .features article .image {
        margin-bottom: 0.25em;
        margin-left: -1.5em;
        margin-top: -1.5em;
        width: calc(100% + 3em);
      }

  }

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

   

      .features article {
        width: calc(50% - 0.5em);
        margin: 1.6em 0.3em 0em 0.2em !important;
      }

  }     
      
  /* Featurex */

  .featurex {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 2em 0;
    animation-duration: 2.5s;
    animation-name: anim-f7;
    animation-iteration-count:initial;
  }
  
    .featurex article {
      padding: 1.75em 1.75em 0.1em 1.75em ;
      background: rgba(255, 255, 255, 0.01);
      backdrop-filter: blur(10px);
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow:
  0 12px 20px -10px rgba(0, 0, 0, 0.6),
  0 6px 6px -5px rgba(0, 0, 0, 0.3);

      font-size: 0.9em;
      margin: 1.2em 0em 0em 1.2em;
      width: calc(50% - 1.75em);
      min-height: 220px;
      scale: .3; opacity: 0;
      transform: translateY(100px);
      animation: anim-fade-in linear forwards;
      animation-timeline: view();
      animation-range: -100px 220px; 
    }
   
  
      .featurex article:nth-child(2n) {
        margin-right: 0;
      }
  
      .featurex article .image {
        border-radius: 18px;
        display: block;
        margin-bottom: -0.1em;
        margin-left: -1.75em;
        margin-top: -1.75em;
        position: relative;
        width: calc(100% + 3.5em);
        
        
      }
  
        .featurex article .image img {
          border-radius: 18px;
          width: 100%;
        }
  
        .featurex article .imaxe {
      
          filter:drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 2px);
          display: block;
          margin-bottom: 1.5em;
         border-radius: 13px;
          margin-top: -1.3em;
          margin-left: -1.3em;
          margin-right: -1.3em;
          position: relative;
          width:calc(100% + 2.6em);
        }
    
          .featurex article .imaxe img {
           border-radius: 13px;
            filter:drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 2px);
            width: 100%;
    
          }
        
        .featurex article .map {
          filter: opacity(80%) hue-rotate(-10deg) sepia(20%) drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 2px);
          display: block;
          margin-bottom: -2em;
         border-radius: 13px;
          margin-top: -1.3em;
          margin-left: -1.3em;
          margin-right: -1.3em;
          position: relative;
          width:calc(100% + 2.6em);
   
          
        }
  
        .featurex article .video {
          border-radius: 18px;
          filter:drop-shadow(rgba(0, 0, 0, 0.55) 0px 0px 3px);
          display: block;
          margin-bottom: -0.1em;
          margin-left: -1.77em;
          margin-top: -1.72em;
          position: relative;
          width: calc(100% + 3.53em);
          height: calc(100% + 1.83em);  
        }
        .featurex article .video img {
          border-radius: 18px;
          width: 100%;
        }
    @media screen and (max-width: 981px) {
  
      .featurex article {
        margin: 0em 0em 1em 1em;
        width: calc(50% - 1.5em);
      
      }
  
    }
  
  
    @media screen and (max-width: 980px) {
  
     
  
        .featurex article {
          margin: 0.8em 0em 1em 0em;
        width: calc(100%);
        }
  
    }     
    

  /* Featurex_clone para animación de portada */

 .featurexx {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 2em 0;
  animation-duration: 5s;
  animation-name: anim-f72;
  animation-iteration-count:initial;
}

  .featurexx article {
    padding: 1.75em 1.75em 0.1em 1.75em ;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.30) 1px 1px 2px;
    font-size: 0.9em;
    margin: 1.2em 0em 0em 1.2em;
    width: calc(50% - 1.75em);
    min-height: 220px;
    scale: .3; opacity: 0;
    transform: translateY(100px);
    animation: anim-fade-in linear forwards;
    animation-timeline: view();
    animation-range: -100px 220px; 
  }
 

    .featurexx article:nth-child(2n) {
      margin-right: 0;
    }

    .featurexx article .image {
      border-radius: 18px;
      display: block;
      margin-bottom: -0.1em;
      margin-left: -1.75em;
      margin-top: -1.75em;
      position: relative;
      width: calc(100% + 3.5em);
      
      
    }

      .featurexx article .image img {
        border-radius: 18px;
        width: 100%;
      }

      .featurexx article .imaxe {
        border-radius: 18px 18px 0px 0px;
        filter:drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 3px);
        display: block;
        margin-bottom: -0.7em;
        margin-left: -1.75em;
        margin-top: -1.75em;
        position: relative;
        width: calc(100% + 3.5em);
        
      }
  
        .featurexx article .imaxe img {
          border-radius: 18px 18px 0 0;
          width: 100%;
        }
      
      .featurexx article .map {
        border-radius: 18px;
        display: block;
        margin-left: -1.77em;
        margin-top: -1.72em;
        position: relative;
        width: calc(100% + 3.53em);
        height: calc(100% + 1.83em);
        filter: opacity(70%) grayscale(40%) hue-rotate(-30deg) drop-shadow(rgba(0, 0, 0, 0.35) 0px 0px 3px);
        
      }

      .featurexx article .video {
        border-radius: 18px;
        filter:drop-shadow(rgba(0, 0, 0, 0.55) 0px 0px 3px);
        display: block;
        margin-bottom: -0.1em;
        margin-left: -1.77em;
        margin-top: -1.72em;
        position: relative;
        width: calc(100% + 3.53em);
        height: calc(100% + 1.83em);  
      }
      .featurexx article .video img {
        border-radius: 18px;
        width: 100%;
      }
  @media screen and (max-width: 981px) {

    .featurexx article {
      margin: 0em 0em 1em 1em;
      width: calc(50% - 1.5em);
    
    }

  }


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

   

      .featurexx article {
        margin: 0.8em 0em 1em 0em;
      width: calc(100%);
      }

  }     
  
   /* novis */

 .novis {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 2em 0;
  animation-duration: 2.5s;
  animation-name: anim-f7;
  animation-iteration-count:initial;
}

  .novis article {
    padding: 0.8em 1.75em 0.1em 1.75em ;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    box-shadow: rgba(0, 0, 0, 0.30) 1px 1px 2px;
  
    font-size: 0.9em;
    margin: 1.2em 0em 0em 1.2em;
    width: calc(33% - 1.15em);
    scale: .3; opacity: 0;
    transform: translateY(100px);
    animation: anim-fade-in linear forwards;
    animation-timeline: view();
    animation-range: -100px 220px;
    
  }

    .novis article:nth-child(2n) {
      margin-right: 0;
    }

    .novis article .image {
      
      filter:drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 2px);
      display: block;
      margin-bottom: 1em;
     border-radius: 8px;
      margin-top: 1em;
      position: relative;
      width:100%;
    }

      .novis article .image img {
       border-radius: 8px;
        filter:drop-shadow(rgba(0, 0, 0, 0.35) 0px 1px 2px);
        width: 100%;

      }

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

    .novis article {
      margin: 0em 0em 1em 1em;
    width: calc(50% - 1.5em);
    }

  }

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

    .novis article {
      margin: 0em 0em 1em 1em;
    width: calc(50% - 1.5em);
    }
  }

  @media screen and (max-width: 480px) {
      .novis article {
        margin: 0em 0em 1em 0em;
      width: calc(100%);
      }
  }     
  
/* Header */
#header h1 {
  font-size: 3.25em;
  margin: -0.8em 0 0 0; }

#header p {
  font-size: 1.35em;
  line-height: 1.65em; }

#header a {
  color: inherit; }

@media screen and (max-width: 1200px) { 
  #header h1 {
    font-size: 2em;
    margin: 0.7em 0 0 0; }
  #header p {
    font-size: 1em; } }

@media screen and (max-width: 480px) {
  #header {
    margin: 1.5em 0 2.8em 0; } }

/* Signup Form */
#signup-form {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  position: relative; }
  #signup-form input[type="text"],
  #signup-form input[type="password"],
  #signup-form input[type="email"] {
    width: 18em; }
  #signup-form > * {
    margin: 0 0 0 1em; }
  #signup-form > :first-child {
    margin: 0 0 0 0; }
  @media screen and (max-width: 480px) {
    #signup-form {
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; }
      #signup-form input[type="type"],
      #signup-form input[type="password"],
      #signup-form input[type="email"] {
        width: 100%; }
      #signup-form > * {
        margin: 1.25em 0 0 0; }
      #signup-form .message {
        bottom: -1.5em;
        font-size: 0.9em;
        height: 1em;
        left: 0;
        line-height: inherit;
        margin-top: 0;
        position: absolute; } }

/* Footer */
#footer {
  padding: 3em 0 0 0;
  color: rgba(255, 255, 255, 0.95);
  left: 0.25em;
  right: 0.25em;
  opacity: 0;
  text-align: center;
  position: relative; }
  #footer .icons {
    margin: 0 0 0 0; }
  #footer .copyright {
    font-size: 0.7em;
    font-weight: 300;
    list-style: none;
    padding: 0; }
    #footer .copyright li {
      border-left: solid 1px rgba(255, 255, 255, 0.25);
      display: inline-block;
      line-height: 1em;
      margin: 0 0 0 0.75em;
      padding: 0 0 0 0.75em; }
      #footer .copyright li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0; }
    #footer .copyright a {
      color: inherit; }
  #footer:hover {
    opacity: 1; }
  #footer > :last-child {
    margin-bottom: 0; }
  @media screen and (max-width: 1680px) {
    #footer {
      bottom: -1em;
      left: 0em;} }
  @media screen and (max-width: 736px) {
    #footer {
      bottom: 1em;
      left: 0em; } }
  @media screen and (max-width: 360px) {
    #footer {
      bottom: 1em;
      left: 0em;} }
  @media screen and (max-height: 640px) {
    #footer {
      bottom: 1em;
      left: 0em;
      margin: 0 0 0 0;
      position: relative; } }

  
 /* Fts */
 #fts {
  opacity: 1;
  top: 1em;
  box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px ;
  color: rgba(255, 255, 255, 0.98);
  padding: 0.25em 1.1em 0.025em 0.65em ;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  right: 10em;
  position:absolute; }
  #fts .icons {
    margin: 0 0 0.5em 0; }
  #fts .image {
  filter:drop-shadow(rgba(0, 0, 0, 0.25) 1px 1px 1px);
  }  
  #fts .image:hover{
  filter:drop-shadow(rgba(255, 255, 255, 0.45) 1px 2px 16px) brightness(110%);
  }    
  #fts .f7 {
    font-size: 0.85em;
    list-style: none;
    padding:2px; }
    #fts .f7 li {
      border-left: solid 1px rgba(255, 255, 255, 0.25);
      display: inline-block;
      line-height: 1.5em;
      margin: 0 0 0 0.9em;
      padding: 0 0 0 0.9em; }
      #fts .f7 li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0; }
    #fts .f7 a {
      color: inherit; }
  #fts > :last-child {
    margin-bottom: 0; }
  @media screen and (max-width: 1680px) {
    #fts {
      padding: 0.25em 1.1em 0.025em 0.65em ;
      top: 1.6em;
      text-align: center;
      right: 3em; } }
  @media screen and (max-width: 980px) {
    #fts {
      border-radius: 0px;
      padding: 0.25em 0em 0.025em 0em ;
      top: 1em;
      right: 0em;
      left: 0em;
      text-align: center;
      position: fixed; } }
  @media screen and (max-width: 360px) {
    #fts {
      border-radius: 0px;
      padding: 0.25em 0em 0.025em 0em ;
      top: 1em;
      right: 0em;
      left: 0em;
      text-align: center;
      position: fixed; } } 
      
/* Fts2 Duplicado para animación menú inicial */
#fts2 {
  opacity: 0;
  top: 1em;
  box-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.35) 1px 1px 2px ;
  color: rgba(255, 255, 255, 0.98);
  padding: 0.25em 1.1em 0.025em 0.65em ;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  right: 10em;
  position:absolute; }
  #fts2 .icons {
    margin: 0 0 0.5em 0; }
  #fts2 .image {
  filter:drop-shadow(rgba(0, 0, 0, 0.25) 1px 1px 1px);
  }  
  #fts2 .image:hover{
  filter:drop-shadow(rgba(255, 255, 255, 0.45) 1px 2px 16px) brightness(110%);
  }    
  #fts2 .f7 {
    font-size: 0.85em;
    list-style: none;
    padding:2px; }
    #fts2 .f7 li {
      border-left: solid 1px rgba(255, 255, 255, 0.25);
      display: inline-block;
      line-height: 1.5em;
      margin: 0 0 0 0.9em;
      padding: 0 0 0 0.9em; }
      #fts2 .f7 li:first-child {
        border-left: 0;
        margin-left: 0;
        padding-left: 0; }
    #fts2 .f7 a {
      color: inherit; }
  #fts2 > :last-child {
    margin-bottom: 0; }
  @media screen and (max-width: 1680px) {
    #fts2 {
      padding: 0.25em 1.1em 0.025em 0.65em ;
      top: 1.6em;
      text-align: center;
      right: 3em; } }
  @media screen and (max-width: 980px) {
    #fts2 {
      border-radius: 0px;
      padding: 0.25em 0em 0.025em 0em ;
      top: 1em;
      right: 0em;
      left: 0em;
      text-align: center;
      position: fixed; } }
  @media screen and (max-width: 360px) {
    #fts2 {
      border-radius: 0px;
      padding: 0.25em 0em 0.025em 0em ;
      top: 1em;
      right: 0em;
      left: 0em;
      text-align: center;
      position: fixed; } }         

/* Animacions */

@keyframes anim-fade-in { 
  to {scale: 1; opacity: 1; transform: translateY(0px); } }

@keyframes anim-fades { 
	from { opacity: 0;  } 
	to { opacity: 0.85; } }	  
  

@keyframes anim-up { 
	from { opacity: 0; transform: translateY(50px); } 
	to { opacity: 1; transform: translateY(0px); }  
}		

@keyframes anim-down { 
	from { opacity: 0; transform: translateY(-30px); } 
	to { opacity: 1; transform: translateY(0px);}  
}		

@keyframes anim-h3 { 
	from { opacity: 0; transform: translateY(-30px); } 
	to { opacity: 1; transform: translateY(0px);}  
}		

@keyframes anim-logo { 
	from { opacity: 0; transform: scale(135%); } 
	to { opacity: 1; transform: scale(100%); } 
   
}		

@keyframes anim-f7 { 
  from {transform: translateY(400px); } 
	to {transform: translateY(0px); } 
}		

@keyframes anim-f72 { 
  from {transform: translateY(1200px); } 
	to {transform: translateY(0px); } 
}		

.anim-up, .anim-down, .anim-f7, .anim-f72, .anim-fade-in {
	animation-duration: 2.5s; /* la animacion dura X segundos */
	animation-delay: 1.5s; /* esperamos X segundos antes de hacer la animacion */			
	animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
}

.anim-fades {
	animation-duration: 2.5s; /* la animacion dura X segundos */
	animation-delay: 2.5s; /* esperamos X segundos antes de hacer la animacion */			
	animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
}
.anim-logo, .anim-h3{
	animation-duration: 2.5s; /* la animacion dura X segundos */
	animation-delay: 0s; /* esperamos X segundos antes de hacer la animacion */			
	animation-fill-mode: both; /* aplica estilos de la animacion antes y despues de reproducirla */
}

.anim-up { animation-name: anim-up; }
.anim-down { animation-name: anim-down; }
.anim-logo { animation-name: anim-logo; }
.anim-f7 { animation-name: anim-f7; }
.anim-f72 { animation-name: anim-f72; }
.anim-fade-in { animation-name: anim-fade-in; }
.anim-h3 { animation-name: anim-h3; }
.anim-fades { animation-name: anim-fades; }

.anim-pause-2 { animation-delay: 2s; } /* la animacion empieza en 2 seg. */		
.anim-pause-3 { animation-delay: 3s; } /* la animacion empieza en 3 seg. */
.anim-pause-4 { animation-delay: 4s; } /* la animacion empieza en 4 seg. */
.anim-pause-5 { animation-delay: 5s; } /* la animacion empieza en 5 seg. */

/* todas las animaciones pausadas */
.paused * { 
	animation-play-state: paused;
}      
      
  /* Recursos------
  box-shadow: 2px 2px 8px 0 rgb(209, 102, 221), 4px 4px 16px 0 #d66, 0px 0px 24px 2px rgb(221, 197, 102); 
  box-shadow: -1px -1px 6px 0 rgb(122, 221, 102), 4px 4px 16px 2px rgb(92, 162, 235); 
  ----fin de recursos*/