/*
 Theme Name: Zannit Theme
 Theme URI: https://www.zannit.com/
 Description: Plantilla personalizada para Zannit
 Author: Zannit
 Author URI: https://www.zannit.com
 Template: Divi
 Version: 1.0.0
*/
 
/* Theme customization starts here
------------------------------------------------------- */


/* three js */

#logo-container canvas{
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%);
}

#logo-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ1NSIgaGVpZ2h0PSI2NDIiIHZpZXdCb3g9IjAgMCAxNDU1IDY0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQyXzIyKSI+CjxwYXRoIG9wYWNpdHk9IjAuMTgiIGQ9Ik03Ny41IDI1MUwxMzMuNiAyNDkuOFYyNTRINjRWMjUxLjNMMTE4LjMgNDdMNjQgNDguMlY0NEgxMzEuOFY0Ni43TDc3LjUgMjUxWk0yMjMuNzM4IDI1NEwyMDkuOTM4IDIwMC45SDE2NC4wMzhMMTQ5LjMzOCAyNTRIMTQ1LjczOEwxODUuOTM4IDEwNy42TDE2OS43MzggNDRIMTgzLjgzOEwyMzguMTM4IDI1NEgyMjMuNzM4Wk0xNjQuNjM4IDE5Ny45SDIwOS4zMzhMMTg3LjczOCAxMTQuMkwxNjQuNjM4IDE5Ny45Wk0zNDQuMzc2IDQ0VjI1Ni40TDI3Mi4zNzYgODNWMjU0SDI2OC40NzZWNzMuN0wyNTYuMTc2IDQ0SDI2OS42NzZMMzQwLjQ3NiAyMTQuN1Y0NEgzNDQuMzc2Wk00NzEuODE3IDQ0VjI1Ni40TDM5OS44MTcgODNWMjU0SDM5NS45MTdWNzMuN0wzODMuNjE3IDQ0SDM5Ny4xMTdMNDY3LjkxNyAyMTQuN1Y0NEg0NzEuODE3Wk01MzkuNDE4IDQ0VjI1NEg1MjUuOTE4VjQ0SDUzOS40MThaTTY0Ny4wMDEgNDRWNDguMkw2MTcuNjAxIDQ2LjdWMjU0SDYwNC4xMDFWNDYuN0w1NzUuMzAxIDQ4LjJWNDRINjQ3LjAwMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIG9wYWNpdHk9IjAuMTgiIGQ9Ik04MDUuNSAyNTFMODYxLjYgMjQ5LjhWMjU0SDc5MlYyNTEuM0w4NDYuMyA0N0w3OTIgNDguMlY0NEg4NTkuOFY0Ni43TDgwNS41IDI1MVpNOTUxLjczOCAyNTRMOTM3LjkzOCAyMDAuOUg4OTIuMDM4TDg3Ny4zMzggMjU0SDg3My43MzhMOTEzLjkzOCAxMDcuNkw4OTcuNzM4IDQ0SDkxMS44MzhMOTY2LjEzOCAyNTRIOTUxLjczOFpNODkyLjYzOCAxOTcuOUg5MzcuMzM4TDkxNS43MzggMTE0LjJMODkyLjYzOCAxOTcuOVpNMTA3Mi4zOCA0NFYyNTYuNEwxMDAwLjM4IDgzVjI1NEg5OTYuNDc2VjczLjdMOTg0LjE3NiA0NEg5OTcuNjc2TDEwNjguNDggMjE0LjdWNDRIMTA3Mi4zOFpNMTE5OS44MiA0NFYyNTYuNEwxMTI3LjgyIDgzVjI1NEgxMTIzLjkyVjczLjdMMTExMS42MiA0NEgxMTI1LjEyTDExOTUuOTIgMjE0LjdWNDRIMTE5OS44MlpNMTI2Ny40MiA0NFYyNTRIMTI1My45MlY0NEgxMjY3LjQyWk0xMzc1IDQ0VjQ4LjJMMTM0NS42IDQ2LjdWMjU0SDEzMzIuMVY0Ni43TDEzMDMuMyA0OC4yVjQ0SDEzNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBvcGFjaXR5PSIwLjE4IiBkPSJNLTM0Ny41IDU4OEwtMjkxLjQgNTg2LjhWNTkxSC0zNjFWNTg4LjNMLTMwNi43IDM4NEwtMzYxIDM4NS4yVjM4MUgtMjkzLjJWMzgzLjdMLTM0Ny41IDU4OFpNLTIwMS4yNjIgNTkxTC0yMTUuMDYyIDUzNy45SC0yNjAuOTYyTC0yNzUuNjYyIDU5MUgtMjc5LjI2MkwtMjM5LjA2MiA0NDQuNkwtMjU1LjI2MiAzODFILTI0MS4xNjJMLTE4Ni44NjIgNTkxSC0yMDEuMjYyWk0tMjYwLjM2MiA1MzQuOUgtMjE1LjY2MkwtMjM3LjI2MiA0NTEuMkwtMjYwLjM2MiA1MzQuOVpNLTgwLjYyNDIgMzgxVjU5My40TC0xNTIuNjI0IDQyMFY1OTFILTE1Ni41MjRWNDEwLjdMLTE2OC44MjQgMzgxSC0xNTUuMzI0TC04NC41MjQyIDU1MS43VjM4MUgtODAuNjI0MlpNNDYuODE3MiAzODFWNTkzLjRMLTI1LjE4MjggNDIwVjU5MUgtMjkuMDgyOFY0MTAuN0wtNDEuMzgyOCAzODFILTI3Ljg4MjhMNDIuOTE3MiA1NTEuN1YzODFINDYuODE3MlpNMTE0LjQxOCAzODFWNTkxSDEwMC45MThWMzgxSDExNC40MThaTTIyMi4wMDEgMzgxVjM4NS4yTDE5Mi42MDEgMzgzLjdWNTkxSDE3OS4xMDFWMzgzLjdMMTUwLjMwMSAzODUuMlYzODFIMjIyLjAwMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIG9wYWNpdHk9IjAuMTgiIGQ9Ik0xMTA5LjUgNTk1TDExNjUuNiA1OTMuOFY1OThIMTA5NlY1OTUuM0wxMTUwLjMgMzkxTDEwOTYgMzkyLjJWMzg4SDExNjMuOFYzOTAuN0wxMTA5LjUgNTk1Wk0xMjU1Ljc0IDU5OEwxMjQxLjk0IDU0NC45SDExOTYuMDRMMTE4MS4zNCA1OThIMTE3Ny43NEwxMjE3Ljk0IDQ1MS42TDEyMDEuNzQgMzg4SDEyMTUuODRMMTI3MC4xNCA1OThIMTI1NS43NFpNMTE5Ni42NCA1NDEuOUgxMjQxLjM0TDEyMTkuNzQgNDU4LjJMMTE5Ni42NCA1NDEuOVpNMTM3Ni4zOCAzODhWNjAwLjRMMTMwNC4zOCA0MjdWNTk4SDEzMDAuNDhWNDE3LjdMMTI4OC4xOCAzODhIMTMwMS42OEwxMzcyLjQ4IDU1OC43VjM4OEgxMzc2LjM4Wk0xNTAzLjgyIDM4OFY2MDAuNEwxNDMxLjgyIDQyN1Y1OThIMTQyNy45MlY0MTcuN0wxNDE1LjYyIDM4OEgxNDI5LjEyTDE0OTkuOTIgNTU4LjdWMzg4SDE1MDMuODJaTTE1NzEuNDIgMzg4VjU5OEgxNTU3LjkyVjM4OEgxNTcxLjQyWk0xNjc5IDM4OFYzOTIuMkwxNjQ5LjYgMzkwLjdWNTk4SDE2MzYuMVYzOTAuN0wxNjA3LjMgMzkyLjJWMzg4SDE2NzlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBvcGFjaXR5PSIwLjE4IiBkPSJNMzU5LjUgNTk1TDQxNS42IDU5My44VjU5OEgzNDZWNTk1LjNMNDAwLjMgMzkxTDM0NiAzOTIuMlYzODhINDEzLjhWMzkwLjdMMzU5LjUgNTk1Wk01MDUuNzM4IDU5OEw0OTEuOTM4IDU0NC45SDQ0Ni4wMzhMNDMxLjMzOCA1OThINDI3LjczOEw0NjcuOTM4IDQ1MS42TDQ1MS43MzggMzg4SDQ2NS44MzhMNTIwLjEzOCA1OThINTA1LjczOFpNNDQ2LjYzOCA1NDEuOUg0OTEuMzM4TDQ2OS43MzggNDU4LjJMNDQ2LjYzOCA1NDEuOVpNNjI2LjM3NiAzODhWNjAwLjRMNTU0LjM3NiA0MjdWNTk4SDU1MC40NzZWNDE3LjdMNTM4LjE3NiAzODhINTUxLjY3Nkw2MjIuNDc2IDU1OC43VjM4OEg2MjYuMzc2Wk03NTMuODE3IDM4OFY2MDAuNEw2ODEuODE3IDQyN1Y1OThINjc3LjkxN1Y0MTcuN0w2NjUuNjE3IDM4OEg2NzkuMTE3TDc0OS45MTcgNTU4LjdWMzg4SDc1My44MTdaTTgyMS40MTggMzg4VjU5OEg4MDcuOTE4VjM4OEg4MjEuNDE4Wk05MjkuMDAxIDM4OFYzOTIuMkw4OTkuNjAxIDM5MC43VjU5OEg4ODYuMTAxVjM5MC43TDg1Ny4zMDEgMzkyLjJWMzg4SDkyOS4wMDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQyXzIyIj4KPHJlY3Qgd2lkdGg9IjE0NTUiIGhlaWdodD0iNjQyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
  background-repeat: repeat;
  background-size: 20%;
  opacity: 0.15;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, black 65%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, black 65%, transparent 72%);
}

#logo-container::before {
    content: "ZANNIT";
    font-family: "Titulares";
    position: absolute;
    font-size: clamp(30px, 10.5vw, 100px);
    top: 10%;
    color: #FFF8 !important;
    left: 40px;
    transform: translateY(-50%);
    width: 120px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    z-index: 1;
}


body {
  overflow-x: hidden;
  background: radial-gradient(100% 100% at var(--6-x-position) var(--6-y-position), #171717 0%, transparent),radial-gradient(100% 100% at var(--7-x-position) var(--7-y-position), #fbfefd 0%, transparent),radial-gradient(100% 100% at var(--8-x-position) var(--8-y-position), #000000 0%, transparent),radial-gradient(100% 100% at var(--9-x-position) var(--9-y-position), #000000 39%, transparent),#171717;
  color:#aaa !important;
  animation-name: main;
  animation-iteration-count: infinite;
  animation-duration: 25s;
  transition-timing-function: ease-in-out
  }
  
  @property --6-x-position { syntax: '<percentage>'; inherits: false; initial-value: 53.98437499999999%; }
  
  @property --6-y-position { syntax: '<percentage>'; inherits: false; initial-value: 50.70312500000001%; }
  
  @property --7-x-position { syntax: '<percentage>'; inherits: false; initial-value: 99.0234375%; }
  
  @property --7-y-position { syntax: '<percentage>'; inherits: false; initial-value: 15.898437500000002%; }
  
  @property --8-x-position { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
  
  @property --8-y-position { syntax: '<percentage>'; inherits: false; initial-value: 99.0234375%; }
  
  @property --9-x-position { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
  
  @property --9-y-position { syntax: '<percentage>'; inherits: false; initial-value: 29.609375000000004%; }
  
  
  :root {
  
  --6-x-position: 53.98437499999999%
  
  --6-y-position: 50.70312500000001%
  
  --7-x-position: 99.0234375%
  
  --7-y-position: 15.898437500000002%
  
  --8-x-position: 0%
  
  --8-y-position: 99.0234375%
  
  --9-x-position: 0%
  
  --9-y-position: 29.609375000000004%
  
  }
  
  
  @keyframes main { 25% {--6-x-position: 15%;--6-y-position: 15%;--7-x-position: 85%;--7-y-position: 80%;}50% {--6-x-position: 80%;--6-y-position: 15%;--7-x-position: 15%;--7-y-position: 85%;--8-x-position: 20%;--8-y-position: 20%;--9-x-position: 20%;--9-y-position: 20%;} }

/* CORNER MASK */


.gradient-test-to-visualice{
  --r: 20px;
  --s: 28px;
  --x: 69px;
  --y: 65px;
  --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0F03 72%);
  --_g: conic-gradient(at calc(0% + var(--r)) calc(100% - var(--r)), #000 50%, #F00 50%, #F00 75%, #000 75%);
  --_d: (var(--s) + var(--r));
  background: calc(0% + var(--_d) + var(--x)) 100% var(--_m), 0% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0% 100%, #0F0 100%, #00F calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)), var(--_g) calc(1 * var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1 * var(--_d) - var(--y));
  background-repeat: no-repeat;
}
/* A ver este codigo es bastante diabolico, así que vamos a explicarlo un poco. De hecho esto no es la mascara, son gradientes para ver un poco y entender.
r - radio esquinas, s - radio curva interna, x - offset horizontal , y - offset vertical.
m - ( la / es un hack de css. Lo que permite es concatenar en la propiedad mask o background los distintos gradientes ) seguido se calcula el tamaño del gradiente circular y se hace que todo lo que esté fuera del circulo sea invisible. Creando así las curvas de las esquinas exteriores.
g - variable para un gradiente conico. Este gradiente va a falsear a las nuevas esquinas ( despues le añadiremos offset )
d - aquí solo sumamos el tamaño de la curva interior y el radio
background - se define curva esquina 1, curva esquina 2, curva interior, gradiente conico ( posicion nueva con offset de esquina 1, gradiente conico ( posicion nueva offset de esquina 2
Lo que posiblemente más cueste de entender. Para tener offset los gradientes conicos ( nuevas esquinas ) y los gradientes radiales de las curvas exteriores SE SUPORPONEN. ESTE EJEMPLO ES PARA VISUALIZAR LA ESQUINA INFERIOR IZQUIERDA. TODO LO QUE ESTÁ EN COLOR DEBE DE ESTAR A OPACIDAD 0 PARA QUE FUNCIONE CON EL MASK. 
background-repeat - que no se repita la mascara a lo largo de todo el div.
Las variables las dejamos dentro del padre para poder usarlas en los elementos responsivos que queramos asociar.

Con cariño de Fran Rubí




/* desktop link container + mask */

.links-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 10px;
  width: 100%;
  height: 50vh;
  border-radius: 10px;
  overflow: visible;
  --r: 20px;
  --s: 20px;
  --x: clamp(50px, 12vw, 200px);
  --y: clamp(50px, 12vw, 200px);
  
}

.main {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  padding: 20px;
  cursor: pointer;
  
}

.ig {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.linkedin {
  grid-column: 4 / 5;
  grid-row: 2 / 4;
  background-color: #dadada;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ig , .linkedin {
  padding: clamp(10px, 5.5vw, 50px);
  border-radius: var(--r);
}

.mail {
  position: relative;
  bottom: calc(var(--x) + 35px);
  left: 10px;
  width: calc(var(--x) + 15px);
  height: calc(var(--y) + 15px);
  background-color: black;
  border-radius: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mail svg {
  filter: invert(1);
  transform: scale(1.2) translate(0px, -10px) !important;
}




.desktop-corner-mask{

  --_m: /calc(2*var(--r)) calc(2*var(--r)) radial-gradient(#000 70%,#0000 72%);
  --_g: conic-gradient(at calc(0% + var(--r)) calc(100% - var(--r)), #000 50%, #0000 50%, #0000 75%, #000 75%);
  --_d: (var(--s) + var(--r));
  mask: calc(0% + var(--_d) + var(--x)) 100% var(--_m), 0% calc(100% - var(--_d) - var(--y)) var(--_m), radial-gradient(var(--s) at 0% 100%, #0000 100%, #000 calc(100% + 1px)) calc(var(--r) + var(--x)) calc(-1 * var(--r) - var(--y)), var(--_g) calc(1 * var(--_d) + var(--x)) 0, var(--_g) 0 calc(-1 * var(--_d) - var(--y));
  mask-repeat: no-repeat;

  border-radius: var(--r);
}


/* Estilos para el contenedor que tendrá el efecto waves */
.waves-background {
  position: relative;
}


.waves-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  overflow: hidden;
  pointer-events: none; 
}

.waves-canvas {
  display: block;
  width: 100%;
  height: 100%;
}








/* version movil y tablets */

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

  .links-container {
    
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
  
  }
  
  .main {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
    height: 450px;
  }

  .mail {
    grid-column: 1 / 4;
    grid-row: 4 / 4;
    bottom: calc(var(--x) + 45px);
  }

  .mail svg {
    transform: scale(1.2) translate(0px, -5px) !important;
  }
  
  .ig {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    
  }
  
  .linkedin {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    
  }

  .linkedin , .ig  {
    max-height: 90px;
    align-self: anchor-center;
  }

 .linkedin svg , .ig svg {
    max-height: 80px;

  }

  #logo-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ1NSIgaGVpZ2h0PSI2NDIiIHZpZXdCb3g9IjAgMCAxNDU1IDY0MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzQyXzIyKSI+CjxwYXRoIG9wYWNpdHk9IjAuMTgiIGQ9Ik03Ny41IDI1MUwxMzMuNiAyNDkuOFYyNTRINjRWMjUxLjNMMTE4LjMgNDdMNjQgNDguMlY0NEgxMzEuOFY0Ni43TDc3LjUgMjUxWk0yMjMuNzM4IDI1NEwyMDkuOTM4IDIwMC45SDE2NC4wMzhMMTQ5LjMzOCAyNTRIMTQ1LjczOEwxODUuOTM4IDEwNy42TDE2OS43MzggNDRIMTgzLjgzOEwyMzguMTM4IDI1NEgyMjMuNzM4Wk0xNjQuNjM4IDE5Ny45SDIwOS4zMzhMMTg3LjczOCAxMTQuMkwxNjQuNjM4IDE5Ny45Wk0zNDQuMzc2IDQ0VjI1Ni40TDI3Mi4zNzYgODNWMjU0SDI2OC40NzZWNzMuN0wyNTYuMTc2IDQ0SDI2OS42NzZMMzQwLjQ3NiAyMTQuN1Y0NEgzNDQuMzc2Wk00NzEuODE3IDQ0VjI1Ni40TDM5OS44MTcgODNWMjU0SDM5NS45MTdWNzMuN0wzODMuNjE3IDQ0SDM5Ny4xMTdMNDY3LjkxNyAyMTQuN1Y0NEg0NzEuODE3Wk01MzkuNDE4IDQ0VjI1NEg1MjUuOTE4VjQ0SDUzOS40MThaTTY0Ny4wMDEgNDRWNDguMkw2MTcuNjAxIDQ2LjdWMjU0SDYwNC4xMDFWNDYuN0w1NzUuMzAxIDQ4LjJWNDRINjQ3LjAwMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIG9wYWNpdHk9IjAuMTgiIGQ9Ik04MDUuNSAyNTFMODYxLjYgMjQ5LjhWMjU0SDc5MlYyNTEuM0w4NDYuMyA0N0w3OTIgNDguMlY0NEg4NTkuOFY0Ni43TDgwNS41IDI1MVpNOTUxLjczOCAyNTRMOTM3LjkzOCAyMDAuOUg4OTIuMDM4TDg3Ny4zMzggMjU0SDg3My43MzhMOTEzLjkzOCAxMDcuNkw4OTcuNzM4IDQ0SDkxMS44MzhMOTY2LjEzOCAyNTRIOTUxLjczOFpNODkyLjYzOCAxOTcuOUg5MzcuMzM4TDkxNS43MzggMTE0LjJMODkyLjYzOCAxOTcuOVpNMTA3Mi4zOCA0NFYyNTYuNEwxMDAwLjM4IDgzVjI1NEg5OTYuNDc2VjczLjdMOTg0LjE3NiA0NEg5OTcuNjc2TDEwNjguNDggMjE0LjdWNDRIMTA3Mi4zOFpNMTE5OS44MiA0NFYyNTYuNEwxMTI3LjgyIDgzVjI1NEgxMTIzLjkyVjczLjdMMTExMS42MiA0NEgxMTI1LjEyTDExOTUuOTIgMjE0LjdWNDRIMTE5OS44MlpNMTI2Ny40MiA0NFYyNTRIMTI1My45MlY0NEgxMjY3LjQyWk0xMzc1IDQ0VjQ4LjJMMTM0NS42IDQ2LjdWMjU0SDEzMzIuMVY0Ni43TDEzMDMuMyA0OC4yVjQ0SDEzNzVaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBvcGFjaXR5PSIwLjE4IiBkPSJNLTM0Ny41IDU4OEwtMjkxLjQgNTg2LjhWNTkxSC0zNjFWNTg4LjNMLTMwNi43IDM4NEwtMzYxIDM4NS4yVjM4MUgtMjkzLjJWMzgzLjdMLTM0Ny41IDU4OFpNLTIwMS4yNjIgNTkxTC0yMTUuMDYyIDUzNy45SC0yNjAuOTYyTC0yNzUuNjYyIDU5MUgtMjc5LjI2MkwtMjM5LjA2MiA0NDQuNkwtMjU1LjI2MiAzODFILTI0MS4xNjJMLTE4Ni44NjIgNTkxSC0yMDEuMjYyWk0tMjYwLjM2MiA1MzQuOUgtMjE1LjY2MkwtMjM3LjI2MiA0NTEuMkwtMjYwLjM2MiA1MzQuOVpNLTgwLjYyNDIgMzgxVjU5My40TC0xNTIuNjI0IDQyMFY1OTFILTE1Ni41MjRWNDEwLjdMLTE2OC44MjQgMzgxSC0xNTUuMzI0TC04NC41MjQyIDU1MS43VjM4MUgtODAuNjI0MlpNNDYuODE3MiAzODFWNTkzLjRMLTI1LjE4MjggNDIwVjU5MUgtMjkuMDgyOFY0MTAuN0wtNDEuMzgyOCAzODFILTI3Ljg4MjhMNDIuOTE3MiA1NTEuN1YzODFINDYuODE3MlpNMTE0LjQxOCAzODFWNTkxSDEwMC45MThWMzgxSDExNC40MThaTTIyMi4wMDEgMzgxVjM4NS4yTDE5Mi42MDEgMzgzLjdWNTkxSDE3OS4xMDFWMzgzLjdMMTUwLjMwMSAzODUuMlYzODFIMjIyLjAwMVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIG9wYWNpdHk9IjAuMTgiIGQ9Ik0xMTA5LjUgNTk1TDExNjUuNiA1OTMuOFY1OThIMTA5NlY1OTUuM0wxMTUwLjMgMzkxTDEwOTYgMzkyLjJWMzg4SDExNjMuOFYzOTAuN0wxMTA5LjUgNTk1Wk0xMjU1Ljc0IDU5OEwxMjQxLjk0IDU0NC45SDExOTYuMDRMMTE4MS4zNCA1OThIMTE3Ny43NEwxMjE3Ljk0IDQ1MS42TDEyMDEuNzQgMzg4SDEyMTUuODRMMTI3MC4xNCA1OThIMTI1NS43NFpNMTE5Ni42NCA1NDEuOUgxMjQxLjM0TDEyMTkuNzQgNDU4LjJMMTE5Ni42NCA1NDEuOVpNMTM3Ni4zOCAzODhWNjAwLjRMMTMwNC4zOCA0MjdWNTk4SDEzMDAuNDhWNDE3LjdMMTI4OC4xOCAzODhIMTMwMS42OEwxMzcyLjQ4IDU1OC43VjM4OEgxMzc2LjM4Wk0xNTAzLjgyIDM4OFY2MDAuNEwxNDMxLjgyIDQyN1Y1OThIMTQyNy45MlY0MTcuN0wxNDE1LjYyIDM4OEgxNDI5LjEyTDE0OTkuOTIgNTU4LjdWMzg4SDE1MDMuODJaTTE1NzEuNDIgMzg4VjU5OEgxNTU3LjkyVjM4OEgxNTcxLjQyWk0xNjc5IDM4OFYzOTIuMkwxNjQ5LjYgMzkwLjdWNTk4SDE2MzYuMVYzOTAuN0wxNjA3LjMgMzkyLjJWMzg4SDE2NzlaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBvcGFjaXR5PSIwLjE4IiBkPSJNMzU5LjUgNTk1TDQxNS42IDU5My44VjU5OEgzNDZWNTk1LjNMNDAwLjMgMzkxTDM0NiAzOTIuMlYzODhINDEzLjhWMzkwLjdMMzU5LjUgNTk1Wk01MDUuNzM4IDU5OEw0OTEuOTM4IDU0NC45SDQ0Ni4wMzhMNDMxLjMzOCA1OThINDI3LjczOEw0NjcuOTM4IDQ1MS42TDQ1MS43MzggMzg4SDQ2NS44MzhMNTIwLjEzOCA1OThINTA1LjczOFpNNDQ2LjYzOCA1NDEuOUg0OTEuMzM4TDQ2OS43MzggNDU4LjJMNDQ2LjYzOCA1NDEuOVpNNjI2LjM3NiAzODhWNjAwLjRMNTU0LjM3NiA0MjdWNTk4SDU1MC40NzZWNDE3LjdMNTM4LjE3NiAzODhINTUxLjY3Nkw2MjIuNDc2IDU1OC43VjM4OEg2MjYuMzc2Wk03NTMuODE3IDM4OFY2MDAuNEw2ODEuODE3IDQyN1Y1OThINjc3LjkxN1Y0MTcuN0w2NjUuNjE3IDM4OEg2NzkuMTE3TDc0OS45MTcgNTU4LjdWMzg4SDc1My44MTdaTTgyMS40MTggMzg4VjU5OEg4MDcuOTE4VjM4OEg4MjEuNDE4Wk05MjkuMDAxIDM4OFYzOTIuMkw4OTkuNjAxIDM5MC43VjU5OEg4ODYuMTAxVjM5MC43TDg1Ny4zMDEgMzkyLjJWMzg4SDkyOS4wMDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzQyXzIyIj4KPHJlY3Qgd2lkdGg9IjE0NTUiIGhlaWdodD0iNjQyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=);
  background-repeat: repeat;
  background-size: 45%;
  opacity: 0.15;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, black 75%, transparent 85%);
    mask-image: radial-gradient(ellipse at 50% 50%, transparent 25%, black 75%, transparent 85%);
}

#logo-container::before {
  content: "ZANNIT";
  font-family: "Titulares";
  position: absolute;
  font-size: clamp(30px, 10.5vw, 250px);
  top: 10%;
  color: #FFF8 !important;
  left: 15px;
  transform: translateY(-50%);
  width: 120px;
  height: 45px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  z-index: 1;
}

}









/* OLD CARDS */
/* MAIN CARDS */
  .cards-cont {
    gap: 50px;
    left: -50px;
  }

  .card-divi{
    height: 100%;
    overflow: hidden;
  }  

  .card-divi .et_pb_code_inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .left .card-divi .et_pb_code_inner {
    justify-content: end;
    position: relative;
    right: 30px;
  }
  .right .card-divi .et_pb_code_inner {
    justify-content: start;
    position: relative;
    left: 30px;
}


  .card-divi .et_pb_code_inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card {
    width: 45%;
    height: 95%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: solid #000000 500px;
    border: solid #3e371d78 3px;
    border-radius: 25px;
  }
  
  .center .card{
    z-index: 100;
    width: 100%;
    outline-width: 80px;
  }

  .card h2 {
    font-size: 150%;
    transform: translateZ(50px);
    color: #ffffff;
    font-weight: 600;
    padding:15px;
  }
  
  @media only screen and (max-width: 980px){
    .cards-cont {
      gap: 50px;
      left: 0px;
    } 
    
    .card {
      width: 85%;
        min-height: 120px;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        display: flex;
        align-items: flex-end;
        outline: solid #000000 500px;
        border: solid #3e371d78 3px;
        border-radius: 10px;
        margin: 10px auto;
        justify-content: flex-start;
    }
    .center .card{
      z-index: 100;
      width: 90%;
      outline-width: 500px;
      min-height: 150px;
      
    }

    .left .card-divi .et_pb_code_inner {
      justify-content: center;
      position: relative;
      right: 0px;
    }
    .right .card-divi .et_pb_code_inner {
      justify-content: center;
      position: relative;
      left: 0px;
    }

  }

  /* MAIN CARDS */