.elementor-6830 .elementor-element.elementor-element-db098f3 > .elementor-widget-container{padding:10% 10% 10% 10%;}.elementor-6830 .elementor-element.elementor-element-ba41c8f{text-align:center;}.elementor-6830 .elementor-element.elementor-element-ba41c8f .elementor-heading-title{color:var( --e-global-color-67aff59 );font-family:"Bebas Neue", Sans-serif;font-size:200px;font-weight:600;}.elementor-6830 .elementor-element.elementor-element-e6fd93b{color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:18px;font-weight:100;line-height:40px;letter-spacing:-0.6px;}.elementor-6830 .elementor-element.elementor-element-9538bb3 > .elementor-container{min-height:300px;}.elementor-6830 .elementor-element.elementor-element-9538bb3:not(.elementor-motion-effects-element-type-background), .elementor-6830 .elementor-element.elementor-element-9538bb3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-67aff59 );}.elementor-6830 .elementor-element.elementor-element-9538bb3{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-6830 .elementor-element.elementor-element-9538bb3 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}:root{--page-title-display:none;}body.elementor-page-6830:not(.elementor-motion-effects-element-type-background), body.elementor-page-6830 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://calipsotattoo.com/wp-content/uploads/2021/12/DampPortlyAiredaleterrier-size_restricted-1.gif");}/* Start custom CSS for html, class: .elementor-element-4f5133ba */.fullPageMenu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: #000;*/
    background-image: url(https://calipsotattoo.com/wp-content/uploads/2021/12/DampPortlyAiredaleterrier-size_restricted-1.gif);
    transition: 0.5s;
    z-index: 100;
}

.fullPageMenu.active {
    top: 0;
}

.fullPageMenu .banner {
    position: relative;
    width: 400px;
    height: 100%;

}

.fullPageMenu .banner img {
    position: absolute;
    top: 5vh;
    left: 2vw;
    width:30%;
    height: auto;
    /*mix-blend-mode: screen;*/
    
}

.fullPageMenu .nav {
    display: flex;
    justify-content: flex-start;
    padding-left: 10%;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-y: auto;

}

.fullPageMenu .nav ul {
    position: relative;
}

.fullPageMenu .nav ul li {
    position: relative;
    list-style: none;
    padding: 0 40px;
    margin: 5px 0;
    overflow: hidden;
    display: table;
}

.fullPageMenu .nav ul li:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: #ff013d;*/
    background-image:  url("https://calipsotattoo.com/wp-content/uploads/2021/12/grunge.png");
    background-size: cover;
    transition: transform 0.5s ease-in-out;
    transform: scaleY(0);
    transform-origin: bottom;
}

.fullPageMenu .nav ul li:hover:before {
    transition: transform 0.5s ease-in-out;
    transform: scaleY(1);
    transform-origin: top;
    
}

.fullPageMenu .nav ul li a {
    font-family: 'Bebas Neue', cursive;
    position: relative;
    color: #ff013d;
    text-decoration: none;
    font-size: 8em;
    font-weight: 900;
    line-height: 1em;
    display: inline-block;
    text-transform: uppercase;
    transition: 0.5s ease-in-out;
    
}

/*.titulo h2{*/
/*    -webkit-mask-image: url("https://calipsotattoo.com/wp-content/uploads/2021/12/grunge.png");*/
/*     -webkit-mask-size:contain;*/
/*}*/


.fullPageMenu .nav ul li a::before {
    content: attr(data-text);
    position: absolute;
    bottom: -100%;
    left: 0;
    color: white!important;
}

.fullPageMenu .nav ul li:hover a {
    transform: translateY(-100%);
    color: #f7e9d0;
}

.menuicon {
    position: fixed;
    top: 50%;
    right: 0%;
    width: 60px;
    height: 60px;
    background: url("https://calipsotattoo.com/wp-content/uploads/2021/12/opciones.png");
    background-size: 60px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 10px;
    z-index: 100;
    background-color: #ff013d;
    padding: 40px;
    border-radius: 5px 0 0 5px;
    transition: all 1s;
}

@media (max-width: 600px) {
    
    .menuicon{
        background-size: 50px;
        right:0px;
        top: 70vh;
        
    }
    
    .fullPageMenu .nav ul li a{
        font-size:4.5em;
        letter-spacing:0px;
        
    }
    
    .fullPageMenu .nav ul{
        padding-left:0!important;
    }
    
    .menuicon.active{
        background-size: 60px!important;
        right:0px!important;
        top: 70vh!important;
    }
}


.menuicon.active {
     background:  url(https://calipsotattoo.com/wp-content/uploads/2021/12/close.png);
    background-size: 60px;
    background-repeat: no-repeat;
    z-index: 1000;
    top:5vh;
    transition:all 1s;
   
    
}

@media(max-width:991px) {
    .banner { 
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-db098f3 */.logo img{
    width: 30%!important;
    max-width: 30%!important;
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e6fd93b */.texto a{
    color:#DF063E;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-8f40a60 */.logo2 img{
    width: 20%!important;
    max-width: 20%!important;
}/* End custom CSS */
/* Start custom CSS */body,html{
    overflow-x: hidden!important;
}


input::placeholder,textarea::placeholder{
    color:white!important;
    opacity: 1!important;
}

/*GLITCH EFFECT*/




.hero {
  font-size: clamp(40px, 10vw, 100px);
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 10px;

  /* Bright things in dark environments usually cast that light, giving off a glow */
  /*filter: drop-shadow(0 1px 3px);*/
}


.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(
    0% 12%,
    53% 12%,
    53% 26%,
    25% 26%,
    25% 86%,
    31% 86%,
    31% 0%,
    53% 0%,
    53% 84%,
    92% 84%,
    92% 82%,
    70% 82%,
    70% 29%,
    78% 29%,
    78% 65%,
    69% 65%,
    69% 66%,
    77% 66%,
    77% 45%,
    85% 45%,
    85% 26%,
    97% 26%,
    97% 28%,
    84% 28%,
    84% 34%,
    54% 34%,
    54% 89%,
    30% 89%,
    30% 58%,
    83% 58%,
    83% 5%,
    68% 5%,
    68% 36%,
    62% 36%,
    62% 1%,
    12% 1%,
    12% 34%,
    60% 34%,
    60% 57%,
    98% 57%,
    98% 83%,
    1% 83%,
    1% 53%,
    91% 53%,
    91% 84%,
    8% 84%,
    8% 83%,
    4% 83%
  );
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
    clip-path: polygon(
      0% 43%,
      83% 43%,
      83% 22%,
      23% 22%,
      23% 24%,
      91% 24%,
      91% 26%,
      18% 26%,
      18% 83%,
      29% 83%,
      29% 17%,
      41% 17%,
      41% 39%,
      18% 39%,
      18% 82%,
      54% 82%,
      54% 88%,
      19% 88%,
      19% 4%,
      39% 4%,
      39% 14%,
      76% 14%,
      76% 52%,
      23% 52%,
      23% 35%,
      19% 35%,
      19% 8%,
      36% 8%,
      36% 31%,
      73% 31%,
      73% 16%,
      1% 16%,
      1% 56%,
      50% 56%,
      50% 8%
    );
  }

  5% {
    clip-path: polygon(
      0% 29%,
      44% 29%,
      44% 83%,
      94% 83%,
      94% 56%,
      11% 56%,
      11% 64%,
      94% 64%,
      94% 70%,
      88% 70%,
      88% 32%,
      18% 32%,
      18% 96%,
      10% 96%,
      10% 62%,
      9% 62%,
      9% 84%,
      68% 84%,
      68% 50%,
      52% 50%,
      52% 55%,
      35% 55%,
      35% 87%,
      25% 87%,
      25% 39%,
      15% 39%,
      15% 88%,
      52% 88%
    );
  }

  30% {
    clip-path: polygon(
      0% 53%,
      93% 53%,
      93% 62%,
      68% 62%,
      68% 37%,
      97% 37%,
      97% 89%,
      13% 89%,
      13% 45%,
      51% 45%,
      51% 88%,
      17% 88%,
      17% 54%,
      81% 54%,
      81% 75%,
      79% 75%,
      79% 76%,
      38% 76%,
      38% 28%,
      61% 28%,
      61% 12%,
      55% 12%,
      55% 62%,
      68% 62%,
      68% 51%,
      0% 51%,
      0% 92%,
      63% 92%,
      63% 4%,
      65% 4%
    );
  }

  45% {
    clip-path: polygon(
      0% 33%,
      2% 33%,
      2% 69%,
      58% 69%,
      58% 94%,
      55% 94%,
      55% 25%,
      33% 25%,
      33% 85%,
      16% 85%,
      16% 19%,
      5% 19%,
      5% 20%,
      79% 20%,
      79% 96%,
      93% 96%,
      93% 50%,
      5% 50%,
      5% 74%,
      55% 74%,
      55% 57%,
      96% 57%,
      96% 59%,
      87% 59%,
      87% 65%,
      82% 65%,
      82% 39%,
      63% 39%,
      63% 92%,
      4% 92%,
      4% 36%,
      24% 36%,
      24% 70%,
      1% 70%,
      1% 43%,
      15% 43%,
      15% 28%,
      23% 28%,
      23% 71%,
      90% 71%,
      90% 86%,
      97% 86%,
      97% 1%,
      60% 1%,
      60% 67%,
      71% 67%,
      71% 91%,
      17% 91%,
      17% 14%,
      39% 14%,
      39% 30%,
      58% 30%,
      58% 11%,
      52% 11%,
      52% 83%,
      68% 83%
    );
  }

  76% {
    clip-path: polygon(
      0% 26%,
      15% 26%,
      15% 73%,
      72% 73%,
      72% 70%,
      77% 70%,
      77% 75%,
      8% 75%,
      8% 42%,
      4% 42%,
      4% 61%,
      17% 61%,
      17% 12%,
      26% 12%,
      26% 63%,
      73% 63%,
      73% 43%,
      90% 43%,
      90% 67%,
      50% 67%,
      50% 41%,
      42% 41%,
      42% 46%,
      50% 46%,
      50% 84%,
      96% 84%,
      96% 78%,
      49% 78%,
      49% 25%,
      63% 25%,
      63% 14%
    );
  }

  90% {
    clip-path: polygon(
      0% 41%,
      13% 41%,
      13% 6%,
      87% 6%,
      87% 93%,
      10% 93%,
      10% 13%,
      89% 13%,
      89% 6%,
      3% 6%,
      3% 8%,
      16% 8%,
      16% 79%,
      0% 79%,
      0% 99%,
      92% 99%,
      92% 90%,
      5% 90%,
      5% 60%,
      0% 60%,
      0% 48%,
      89% 48%,
      89% 13%,
      80% 13%,
      80% 43%,
      95% 43%,
      95% 19%,
      80% 19%,
      80% 85%,
      38% 85%,
      38% 62%
    );
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
    top: 0px;
    left: -20px;
  }

  15% {
    top: 10px;
    left: 10px;
  }

  60% {
    top: 5px;
    left: -10px;
  }

  75% {
    top: -5px;
    left: 20px;
  }

  100% {
    top: 10px;
    left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
    opacity: 0.1;
  }

  5% {
    opacity: 0.7;
  }

  30% {
    opacity: 0.4;
  }

  45% {
    opacity: 0.6;
  }

  76% {
    opacity: 0.4;
  }

  90% {
    opacity: 0.8;
  }

  1%,
  7%,
  33%,
  47%,
  78%,
  93% {
    opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
    font-weight: 100;
    color: #e0287d;
    filter: blur(3px);
  }

  20% {
    font-weight: 500;
    color: #fff;
    filter: blur(0);
  }

  50% {
    font-weight: 300;
    color: #1bc7fb;
    filter: blur(2px);
  }

  60% {
    font-weight: 700;
    color: #fff;
    filter: blur(0);
  }

  90% {
    font-weight: 500;
    color: #e0287d;
    filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite,
    font 7s step-end infinite, movement 8s step-end infinite;
}/* End custom CSS */