/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 17 2022 | 00:30:00 */
.logo-wrapper {
    position: relative;
    align-items: left;
  }
  .logo {
    width: 220px;
	height: 120px;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
  }
  svg {
    width: 65%;
    height: 65%;
  }
@media (min-width: 1024px) {
 .logo-wrapper {
    position: relative;
    align-items: left;
  }
  .logo {
    width: 320px;
	height: 200px;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
  }
  svg {
    width: 60%;
    height: 60%;
  }
  
  #brae path {
    stroke-width: 1;
    stroke-dasharray: 2000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 0.0;
    fill: rgba(0, 0, 0, 1);
    stroke: #000;
    -webkit-animation: thin-animation 2.3s linear forwards;
            animation: thin-animation 2.2s linear forwards;
	  animation-delay: 0.5s;
  }
/*controlls the animation of the <rect> tag*/
.line {
   stroke-width: 1;
    stroke-dasharray: 2000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 0.0;
    fill: rgba(255, 255, 255, 0);
    stroke: #000;
    -webkit-animation: thin-animation 1.8s linear forwards;
            animation: thin-animation 1.8s linear forwards;
    animation-delay: 2.2s;
}
#beronilla path {
    stroke-width: 1;
    stroke-dasharray: 2000;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-opacity: 0.0;
    fill: rgba(255, 255, 255, 0);
    stroke: #000;
    -webkit-animation: thin-animation 1.4s linear forwards;
            animation: thin-animation 1.4s linear forwards;
    animation-delay: 2.2s;
  }
  
  path.st0{
    opacity: 0;
    -webkit-animation: fadeIn 1s ease-in forwards;
            animation: fadeIn 1s ease-in forwards;
    animation-delay: 4s;
    animation-iteration-count: 1;
  }
  
  @-webkit-keyframes thin-animation {
    0% {
      stroke-dashoffset: 2000;
      stroke-opacity: 0.6;
      fill: rgba(255, 255, 255, 0);
    }
    50% {
      fill: rgba(255, 255, 255, 0);
    }
    98% {
      fill: rgba(255, 255, 255, 0.5);
    }
    100% {
      fill: #000;
      stroke-opacity: 1;
      stroke-dashoffset: 0;
    }
  }
  @keyframes thin-animation {
    0% {
      stroke-dashoffset: 2000;
      stroke-opacity: 0.6;
      fill: rgba(0, 0, 0, 0);
    }
    80% {
      fill: rgba(0, 0, 0, 0.1);
    }
    98% {
      fill: rgba(0, 0, 0, 1);
    }
    100% {
      fill: #000;
      stroke-opacity: 1;
      stroke-dashoffset: 0;
    }
  }
  
  
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
      fill: rgba(0, 0, 0, 0);
    }
    99% {
      opacity: 0.5;
      fill: rgba(0, 0, 0, 0.2);
    }
    100% {
      opacity: 1;
      fill: rgba(0, 0, 0, 1);
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      fill: rgba(0, 0, 0, 0);
    }
    99% {
      opacity: 0.5;
      fill: rgba(0, 0, 0, 0.2);
    }
    100% {
      opacity: 1;
      fill: rgba(0, 0, 0, 1);
    }
  }
}
@media (max-width: 800px){
	.logo {
    width: 290px;
	height: 190px;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
  }
}