:root {
    --colorobs1: #9123c4;
    --colorobs2: #ac12a6;
    --colorobs3: #c40d3b;
    --colorobs4: #e05f25;
    --colorobs5: #d96c0f;
    --colorobs6: #d5c62b;
    --colorobs7: #c0ba1e;
    --colorobs8: #c3cf2f;

    --colorlogo1: #9c0700;
    --colorlogo2: #edc821;
    --colorlogo3: #8c9901;
    --colorlogo4: #602e85;

    --colorgris1: #e3caca;

}

body {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='1080' preserveAspectRatio='none' viewBox='0 0 1920 1080'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1400%26quot%3b)' fill='none'%3e%3crect width='1920' height='1080' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1401%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1920 0L1265.94 0L1920 5.55z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1265.94 0L1920 5.55L1920 159.20000000000002L1175.56 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M1175.56 0L1920 159.20000000000002L1920 495.88L847.77 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M847.77 0L1920 495.88L1920 871.28L349.56 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 1080L364.39 1080L0 672.25z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 672.25L364.39 1080L871.39 1080L0 473.71000000000004z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 473.71000000000004L871.39 1080L912.0699999999999 1080L0 280.89000000000004z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 280.8900000000001L912.0699999999999 1080L1268.49 1080L0 148.9500000000001z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1400'%3e%3crect width='1920' height='1080' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='10.94%25' y1='-19.44%25' x2='89.06%25' y2='119.44%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1401'%3e%3cstop stop-color='rgba(145%2c 35%2c 196%2c 1)' offset='0.05'%3e%3c/stop%3e%3cstop stop-color='rgba(217%2c 108%2c 15%2c 1)' offset='0.54'%3e%3c/stop%3e%3cstop stop-color='rgba(195%2c 207%2c 47%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-size: cover;
    background-attachment: fixed;

}


/* NAV */
.btnSocial {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 55px;
    margin-right: 55px;
    margin-left: -55px;

}
.btnSocial a i {
    font-size: 4rem;
    transition: all .5s ease;
    text-decoration: none;
    color: var(--colorgris1);
}

.btnSocial a i:hover {
    transform: scale(.9);
    color: var(--colorlogo4);

}
/* */

/* CSS MAIN */
.logoSection {
    height: 70vh;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo1 {
    margin: 0 auto;
    width: 85vw;
    filter: drop-shadow(0px 0px 5px var(--colorgris1));
}
/* */



/* */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
  }
  
  .slider {
    overflow: hidden;
    background-color: white;
    margin: 0 15px;
    height: 80px;
    width: 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 10px #FFF;
    position: relative;
  }
  
  .slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
      inset 0px 0px 0px rgba(0, 0, 0, 0.1);
    animation: animate_2 2.5s ease-in-out infinite;
    animation-delay: calc(-0.5s * var(--i));
  }
  
  @keyframes animate_2 {
    0% {
      transform: translateY(250px);
      filter: hue-rotate(0deg);
    }
  
    50% {
      transform: translateY(0);
    }
  
    100% {
      transform: translateY(250px);
      filter: hue-rotate(180deg);
    }
  }
  
/* */