@charset "UTF-8";
/*!
 * Trendex | HTML Product Landing Page
 * Author: Web_Trendy
 * Copyright 2019 © Web_Trendy (https://codecanyon.net/user/web_trendy/portfolio)
 * Licensed under Envato (https://codecanyon.net/licenses/standard)
 *
 * "Life is balance of holding on and letting go." --Rumi
 *
 */
/*------------------------------------------------------------------
[Table of contents]

1.0 Variables
2.0 Google Fonts
3.0 Set Font-families
4.0 Custom Cursor Styles
5.0 General Styles
6.0 Home Page
7.0 About Page
8.0 Services Page
9.0 Works Page
10.0 Contact Page
11.0 Blog Page
12.0 Single Blog Page
13.0 Single Works Page
14.0 Footer 
15.0 Animations
16.0 Media Queries

-------------------------------------------------------------------*/
/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Noto+Serif:400,700&display=swap");
:root {
  --background-color: #070707;
  --background-color-darker: #000000;
  --border-color: #252525;
  --text-color: #eeeeee;
  --light-text-color: #888888; }

/*--------------------------------------------------------------
2.0 Google Fonts
--------------------------------------------------------------*/
/*To change the fonts, get the font link from (https://www.google.com/fonts) and replace with this line, then update the font-family section below.*/
/*--------------------------------------------------------------
3.0 Set Font-families
--------------------------------------------------------------*/
body {
  font-family: 'Roboto', sans-serif; }

h1, h2, h3, h4 {
  font-family: 'Noto Serif', serif; }

/*--------------------------------------------------------------
5.0 General Styles
--------------------------------------------------------------*/
.overflow-x-hidden {
  overflow-x: hidden; }

.primary-color {
  color: #ff3313; }

.line-height-1 {
  line-height: 1; }

/*--------------------------------------------------------------
6.0 Home Page
--------------------------------------------------------------*/
body {
  background-color: var(--background-color);
  color: var(--text-color); }

.text-black {
  color: #000000; }

.text-sub {
  color: var(--light-text-color); }

.tl-n10 {
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px); }

.border-radius-theme {
  border-radius: 15px; }

/*Top Section*/
section.top .mask-wrapper {
  max-height: 100vh; }
section.top .mask {
  max-height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  -webkit-filter: saturate(1.5);
          filter: saturate(1.5); }
section.top .info {
  border-left: 2px solid #ff3313; }

/*About Section*/
section.about .logo {
  width: 50px; }

/*Features Section*/
section.features .feature-wrapper .content {
  position: relative; }
  section.features .feature-wrapper .content:before {
    content: '';
    background: -webkit-gradient(linear, left top, right top, from(#b70f7c), to(#ec7209));
    background: linear-gradient(90deg, #b70f7c, #ec7209);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 15px;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out; }
section.features .feature-wrapper .header {
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out; }
section.features .feature-wrapper .description {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  opacity: 0;
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out; }
section.features .feature-wrapper:hover .content:before, section.features .feature-wrapper:focus .content:before {
  height: calc(100% + 50px); }
section.features .feature-wrapper:hover .header, section.features .feature-wrapper:focus .header {
  -webkit-transform: translateY(-50px);
          transform: translateY(-50px); }
section.features .feature-wrapper:hover .description, section.features .feature-wrapper:focus .description {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 200ms;
          transition-delay: 200ms;
  opacity: 1; }

/*Demo Section*/
section.demo .demo-wrapper {
  position: relative;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--light-text-color); }
  section.demo .demo-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -1;
    opacity: 0;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out; }
  section.demo .demo-wrapper:hover img, section.demo .demo-wrapper:focus img {
    opacity: 0.05;
    -webkit-transform: scale(1);
            transform: scale(1); }
  section.demo .demo-wrapper.h-2x {
    height: 300px; }

/*Options Section*/
section.options .option-wrapper {
  border: 1px solid var(--border-color); }

/*Call to Action 1 Section*/
section.cta-1 .image-wrapper {
  position: relative; }
  section.cta-1 .image-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 300px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(0, 0, 0, 0.5)));
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5)); }

/*Call to Action 2 Section*/
section.cta-2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  -webkit-filter: brightness(0.5) saturate(1.5);
          filter: brightness(0.5) saturate(1.5); }
section.cta-2 .image-wrapper {
  position: relative; }
  section.cta-2 .image-wrapper:before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 300px;
    width: 100%;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.5)));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); }

/*Other Products Section*/
section.products .product-wrapper {
  -webkit-transition: all 300ms ease-out;
  transition: all 300ms ease-out; }
  section.products .product-wrapper:hover, section.products .product-wrapper:focus {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px); }

/*--------------------------------------------------------------
14.0 Footer
--------------------------------------------------------------*/
footer.site-footer {
  /*background-color: darken($dark-color, 20%);*/
  background: -webkit-gradient(linear, left top, right top, from(#b70f7c), to(#ec7209));
  background: linear-gradient(90deg, #b70f7c, #ec7209);
  font-size: 90%; }
  footer.site-footer .logo {
    width: 200px; }
  footer.site-footer a {
    text-decoration: none;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    font-weight: 300;
    color: black; }
    footer.site-footer a:hover, footer.site-footer a:focus {
      color: white; }
  footer.site-footer .cp {
    border-top: 1px solid rgba(255, 255, 255, 0.2); }
    footer.site-footer .cp a {
      color: #f2eee0; }
      footer.site-footer .cp a:hover, footer.site-footer .cp a:focus {
        color: #f2eee0; }

/*--------------------------------------------------------------
1.0 Variables
--------------------------------------------------------------*/
/*--------------------------------------------------------------
2.0 General Styles
--------------------------------------------------------------*/
.wpcc-cursor {
  --top: 0;
  --left: 0;
  --cursor-width: 30px;
  --img-width: 30px;
  --color: #000000;
  --blending-mode: normal;
  --default-cursor-normal: 'initial';
  --default-cursor-link: 'pointer';
  --click-point-x: -50%;
  --click-point-y: -50%; }
  .wpcc-cursor:not(.active) {
    display: none; }
  .wpcc-cursor div {
    position: fixed !important;
    pointer-events: none;
    z-index: 99999999999;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    mix-blend-mode: var(--blending-mode); }

.no-cursor {
  cursor: none; }
  .no-cursor a {
    cursor: none; }

.default-cursor {
  cursor: default; }

/*--------------------------------------------------------------
3.0 Cusror Styles
--------------------------------------------------------------*/
/*Image Cursor*/
.cursor-image .cursor-el1 {
  width: auto;
  height: auto;
  top: 0;
  left: 0; }
  .cursor-image .cursor-el1 img {
    display: block;
    width: var(--cursor-width) !important;
    top: 0;
    left: 0;
    height: auto !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    -webkit-transform: translate(var(--click-point-x), var(--click-point-y));
            transform: translate(var(--click-point-x), var(--click-point-y)); }
.cursor-image .cursor-el2 {
  display: none; }

/*Text Cursor*/
.cursor-text .cursor-el1 {
  width: auto;
  height: auto;
  top: 0;
  left: 0; }
  .cursor-text .cursor-el1 svg {
    width: var(--cursor-width) !important;
    margin-top: -50%;
    margin-left: -50%;
    -webkit-animation: 10000ms spin infinite;
            animation: 10000ms spin infinite;
    -webkit-animation-fill-mode: backwards;
            animation-fill-mode: backwards;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear; }
  .cursor-text .cursor-el1 text {
    text-transform: uppercase;
    word-spacing: 32px;
    font-weight: bold;
    fill: var(--color); }
.cursor-text .cursor-el2 {
  display: none; }

/*Cursor 1*/
.cursor-1 .cursor-el1 {
  width: var(--cursor-width);
  height: var(--cursor-width);
  border: calc(var(--cursor-width)/25) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-2);
  left: calc(var(--cursor-width)/-2);
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out; }
.cursor-1 .cursor-el2 {
  width: calc(var(--cursor-width)/5);
  height: calc(var(--cursor-width)/5);
  border-radius: 50%;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-10);
  left: calc(var(--cursor-width)/-10);
  -webkit-animation: c1-anim-reverse 200ms ease-out;
          animation: c1-anim-reverse 200ms ease-out; }
.cursor-1.link-hover .cursor-el1 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  opacity: 0; }
.cursor-1.link-hover .cursor-el2 {
  -webkit-animation: c1-anim 200ms ease-out;
          animation: c1-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-1.input-hover {
  display: none; }

/*Cursor 2*/
.cursor-2 .cursor-el2 {
  width: calc(var(--cursor-width)/5);
  height: calc(var(--cursor-width)/5);
  border-radius: 50%;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-10);
  left: calc(var(--cursor-width)/-10);
  -webkit-animation: c6-anim-reverse 200ms ease-out;
          animation: c6-anim-reverse 200ms ease-out; }
.cursor-2.link-hover .cursor-el2 {
  -webkit-animation: c6-anim 200ms ease-out;
          animation: c6-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-2.input-hover {
  display: none; }

/*Cursor 3*/
.cursor-3 .cursor-el1 {
  width: var(--cursor-width);
  height: var(--cursor-width);
  background-color: var(--color);
  opacity: 0.5;
  border-radius: 50%;
  top: calc(var(--cursor-width)/-2);
  left: calc(var(--cursor-width)/-2);
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out; }
.cursor-3 .cursor-el2 {
  width: calc(var(--cursor-width)/5);
  height: calc(var(--cursor-width)/5);
  border-radius: 50%;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-10);
  left: calc(var(--cursor-width)/-10);
  -webkit-animation: c1-anim-reverse 200ms ease-out;
          animation: c1-anim-reverse 200ms ease-out; }
.cursor-3.link-hover .cursor-el1 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  opacity: 0; }
.cursor-3.link-hover .cursor-el2 {
  -webkit-animation: c1-anim 200ms ease-out;
          animation: c1-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-3.input-hover {
  display: none; }

/*Cursor 4*/
.cursor-4 .cursor-el1 {
  width: calc(var(--cursor-width)/5);
  height: calc(var(--cursor-width)/5);
  border-radius: 50%;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-10);
  left: calc(var(--cursor-width)/-10);
  -webkit-animation: c6-anim-reverse 200ms ease-out;
          animation: c6-anim-reverse 200ms ease-out; }
.cursor-4 .cursor-el2 {
  width: calc(var(--cursor-width)/5);
  height: calc(var(--cursor-width)/5);
  border-radius: 50%;
  opacity: 0.7;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-10);
  left: calc(var(--cursor-width)/-10);
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
  /*animation: c6-anim-reverse $transitionDuration*2 $transitionTiming;*/ }
.cursor-4.link-hover .cursor-el1 {
  -webkit-animation: c6-anim 200ms ease-out;
          animation: c6-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-4.input-hover {
  display: none; }

/*Cursor 5*/
.cursor-5 .cursor-el1 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  border: calc(var(--cursor-width)/15) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  -webkit-animation: c5-anim-reverse 200ms ease-out;
          animation: c5-anim-reverse 200ms ease-out; }
.cursor-5.link-hover .cursor-el1 {
  -webkit-animation: c5-anim 200ms ease-out;
          animation: c5-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-5.input-hover {
  display: none; }

/*Cursor 6*/
.cursor-6 .cursor-el1 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  border: calc(var(--cursor-width)/25) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out;
  -webkit-animation: c6-anim-reverse 200ms ease-out;
          animation: c6-anim-reverse 200ms ease-out; }
.cursor-6 .cursor-el2 {
  width: calc(var(--cursor-width)/3);
  height: calc(var(--cursor-width)/3);
  border-radius: 50%;
  background-color: var(--color);
  top: calc(var(--cursor-width)/-6);
  left: calc(var(--cursor-width)/-6); }
.cursor-6.link-hover .cursor-el1 {
  -webkit-animation: c6-anim 200ms ease-out;
          animation: c6-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-6.input-hover {
  display: none; }

/*Cursor 7*/
.cursor-7 .cursor-el1 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  border: calc(var(--cursor-width)/15) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  -webkit-animation: c5-anim-reverse 200ms ease-out;
          animation: c5-anim-reverse 200ms ease-out; }
.cursor-7 .cursor-el2 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  border: calc(var(--cursor-width)/15) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  opacity: 0.5;
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out; }
.cursor-7.link-hover .cursor-el1 {
  -webkit-animation: c5-anim 200ms ease-out;
          animation: c5-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-7.link-hover .cursor-el2 {
  opacity: 0; }
.cursor-7.input-hover {
  display: none; }

/*Cursor 8*/
.cursor-8 .cursor-el1 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  border: calc(var(--cursor-width)/15) solid var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  -webkit-animation: c5-anim-reverse 200ms ease-out;
          animation: c5-anim-reverse 200ms ease-out; }
.cursor-8 .cursor-el2 {
  width: calc(var(--cursor-width)/1.5);
  height: calc(var(--cursor-width)/1.5);
  background-color: var(--color);
  border-radius: 50%;
  top: calc(var(--cursor-width)/-3);
  left: calc(var(--cursor-width)/-3);
  opacity: 0.5;
  -webkit-transition: all 100ms ease-out;
  transition: all 100ms ease-out; }
.cursor-8.link-hover .cursor-el1 {
  -webkit-animation: c5-anim 200ms ease-out;
          animation: c5-anim 200ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }
.cursor-8.link-hover .cursor-el2 {
  opacity: 0; }
.cursor-8.input-hover {
  display: none; }

/*--------------------------------------------------------------
4.0 Animations
--------------------------------------------------------------*/
@-webkit-keyframes c1-anim {
  to {
    width: calc(var(--cursor-width)/1.1);
    height: calc(var(--cursor-width)/1.1);
    top: calc(var(--cursor-width)/-2.2);
    left: calc(var(--cursor-width)/-2.2);
    opacity: 0.3; } }
@keyframes c1-anim {
  to {
    width: calc(var(--cursor-width)/1.1);
    height: calc(var(--cursor-width)/1.1);
    top: calc(var(--cursor-width)/-2.2);
    left: calc(var(--cursor-width)/-2.2);
    opacity: 0.3; } }
@-webkit-keyframes c1-anim-reverse {
  from {
    width: calc(var(--cursor-width)/1.1);
    height: calc(var(--cursor-width)/1.1);
    top: calc(var(--cursor-width)/-2.2);
    left: calc(var(--cursor-width)/-2.2);
    opacity: 0.3; }
  to {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10); } }
@keyframes c1-anim-reverse {
  from {
    width: calc(var(--cursor-width)/1.1);
    height: calc(var(--cursor-width)/1.1);
    top: calc(var(--cursor-width)/-2.2);
    left: calc(var(--cursor-width)/-2.2);
    opacity: 0.3; }
  to {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10); } }
@-webkit-keyframes c4-anim {
  to {
    width: calc(var(--cursor-width)/1.5);
    height: calc(var(--cursor-width)/1.5);
    top: calc(var(--cursor-width)/-3);
    left: calc(var(--cursor-width)/-3);
    background-color: var(--color);
    opacity: 0.3; } }
@keyframes c4-anim {
  to {
    width: calc(var(--cursor-width)/1.5);
    height: calc(var(--cursor-width)/1.5);
    top: calc(var(--cursor-width)/-3);
    left: calc(var(--cursor-width)/-3);
    background-color: var(--color);
    opacity: 0.3; } }
@-webkit-keyframes c4-anim-reverse {
  from {
    width: calc(var(--cursor-width)/1.5);
    height: calc(var(--cursor-width)/1.5);
    top: calc(var(--cursor-width)/-3);
    left: calc(var(--cursor-width)/-3);
    background-color: var(--color);
    opacity: 0.3; }
  to {
    width: var(--cursor-width);
    height: var(--cursor-width);
    top: calc(var(--cursor-width)/-2);
    left: calc(var(--cursor-width)/-2);
    background-color: transparent;
    opacity: 1; } }
@keyframes c4-anim-reverse {
  from {
    width: calc(var(--cursor-width)/1.5);
    height: calc(var(--cursor-width)/1.5);
    top: calc(var(--cursor-width)/-3);
    left: calc(var(--cursor-width)/-3);
    background-color: var(--color);
    opacity: 0.3; }
  to {
    width: var(--cursor-width);
    height: var(--cursor-width);
    top: calc(var(--cursor-width)/-2);
    left: calc(var(--cursor-width)/-2);
    background-color: transparent;
    opacity: 1; } }
@-webkit-keyframes c5-anim {
  50% {
    width: calc(var(--cursor-width)/2.5);
    height: calc(var(--cursor-width)/2.5);
    top: calc(var(--cursor-width)/-5);
    left: calc(var(--cursor-width)/-5);
    background-color: var(--color); }
  100% {
    width: calc(var(--cursor-width)/0.5);
    height: calc(var(--cursor-width)/0.5);
    top: calc(var(--cursor-width)/-1);
    left: calc(var(--cursor-width)/-1);
    background-color: var(--color);
    opacity: 0.3; } }
@keyframes c5-anim {
  50% {
    width: calc(var(--cursor-width)/2.5);
    height: calc(var(--cursor-width)/2.5);
    top: calc(var(--cursor-width)/-5);
    left: calc(var(--cursor-width)/-5);
    background-color: var(--color); }
  100% {
    width: calc(var(--cursor-width)/0.5);
    height: calc(var(--cursor-width)/0.5);
    top: calc(var(--cursor-width)/-1);
    left: calc(var(--cursor-width)/-1);
    background-color: var(--color);
    opacity: 0.3; } }
@-webkit-keyframes c5-anim-reverse {
  from {
    width: calc(var(--cursor-width)/0.5);
    height: calc(var(--cursor-width)/0.5);
    top: calc(var(--cursor-width)/-1);
    left: calc(var(--cursor-width)/-1);
    background-color: var(--color);
    opacity: 0.3; }
  to {
    width: var(--cursor-width);
    height: var(--cursor-width);
    top: calc(var(--cursor-width)/-2);
    left: calc(var(--cursor-width)/-2); } }
@keyframes c5-anim-reverse {
  from {
    width: calc(var(--cursor-width)/0.5);
    height: calc(var(--cursor-width)/0.5);
    top: calc(var(--cursor-width)/-1);
    left: calc(var(--cursor-width)/-1);
    background-color: var(--color);
    opacity: 0.3; }
  to {
    width: var(--cursor-width);
    height: var(--cursor-width);
    top: calc(var(--cursor-width)/-2);
    left: calc(var(--cursor-width)/-2); } }
@-webkit-keyframes c6-anim {
  to {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10);
    border-width: calc(var(--cursor-width)/15); } }
@keyframes c6-anim {
  to {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10);
    border-width: calc(var(--cursor-width)/15); } }
@-webkit-keyframes c6-anim-reverse {
  from {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10);
    border-width: calc(var(--cursor-width)/15); }
  to {
    width: var(--cursor-width);
    height: var(--cursor-width);
    border: calc(var(--cursor-width)/25) solid var(--color);
    border-radius: 50%;
    top: calc(var(--cursor-width)/-2);
    left: calc(var(--cursor-width)/-2); } }
@keyframes c6-anim-reverse {
  from {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10);
    border-width: calc(var(--cursor-width)/15); }
  to {
    width: var(--cursor-width);
    height: var(--cursor-width);
    border: calc(var(--cursor-width)/25) solid var(--color);
    border-radius: 50%;
    top: calc(var(--cursor-width)/-2);
    left: calc(var(--cursor-width)/-2); } }
@-webkit-keyframes c-scale {
  to {
    width: calc(var(--cursor-width)*3);
    height: calc(var(--cursor-width)*3);
    top: calc(var(--cursor-width)*-1.5);
    left: calc(var(--cursor-width)*-1.5);
    opacity: 1; } }
@keyframes c-scale {
  to {
    width: calc(var(--cursor-width)*3);
    height: calc(var(--cursor-width)*3);
    top: calc(var(--cursor-width)*-1.5);
    left: calc(var(--cursor-width)*-1.5);
    opacity: 1; } }
@-webkit-keyframes c-scale-reverse {
  from {
    width: calc(var(--cursor-width)*3);
    height: calc(var(--cursor-width)*3);
    top: calc(var(--cursor-width)*-1.5);
    left: calc(var(--cursor-width)*-1.5);
    opacity: 1; }
  to {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10); } }
@keyframes c-scale-reverse {
  from {
    width: calc(var(--cursor-width)*3);
    height: calc(var(--cursor-width)*3);
    top: calc(var(--cursor-width)*-1.5);
    left: calc(var(--cursor-width)*-1.5);
    opacity: 1; }
  to {
    width: calc(var(--cursor-width)/5);
    height: calc(var(--cursor-width)/5);
    top: calc(var(--cursor-width)/-10);
    left: calc(var(--cursor-width)/-10); } }
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }
@keyframes spin {
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0); } }
/*--------------------------------------------------------------
2.0 Hover Cursor Styles
--------------------------------------------------------------*/
.hover-cursor {
  --hc-bgcolor: #ff3c38;
  --hc-width: 50px;
  pointer-events: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: var(--hc-bgcolor);
  width: calc( var(--hc-width) / 2 );
  height: calc( var(--hc-width) / 2 );
  border-radius: 50%;
  position: fixed !important;
  pointer-events: none;
  z-index: 99999999999;
  top: calc( var(--hc-width) * -0.25);
  left: calc( var(--hc-width) * -0.25);
  opacity: 0;
  color: black;
  -webkit-transition: all 200ms ease-out;
  transition: all 200ms ease-out; }
  .hover-cursor:not(.hc-1) .hover-cursor-text {
    display: none; }
  .hover-cursor .hover-cursor-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms; }
    .hover-cursor .hover-cursor-icon svg, .hover-cursor .hover-cursor-icon img {
      width: calc( var(--hc-width) / 3 ); }
  .hover-cursor .hover-cursor-text {
    font-size: calc( var(--hc-width) / 7 );
    line-height: 1;
    padding-top: 5px;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    opacity: 0;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms; }
  .hover-cursor.active {
    width: var(--hc-width);
    height: var(--hc-width);
    top: calc( var(--hc-width) * -0.5);
    left: calc( var(--hc-width) * -0.5);
    opacity: 1; }
    .hover-cursor.active .hover-cursor-icon {
      -webkit-transform: scale(1);
              transform: scale(1);
      opacity: 1; }
    .hover-cursor.active .hover-cursor-text {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      opacity: 1; }
  .hover-cursor.hc-1 .hover-cursor-icon {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px); }
    .hover-cursor.hc-1 .hover-cursor-icon svg, .hover-cursor.hc-1 .hover-cursor-icon img {
      width: calc( var(--hc-width) / 4 ); }
  .hover-cursor.hc-1.active .hover-cursor-icon {
    -webkit-transform: translateY(0);
            transform: translateY(0); }

/*--------------------------------------------------------------
4.0 Media Queries
--------------------------------------------------------------*/
@media only screen and (max-width: 576px) {
  section.top h1.title {
    font-size: 2.5rem; }
  section.top .min-vh-100 {
    min-height: auto !important; }

  .tl-n10 {
    -webkit-transform: none;
            transform: none; }

  .cursor {
    display: none; } }
/* :) Let's meke internet BEAUTIFUL*/
/*
 _       __     __       ______                    __
| |     / /__  / /_     /_  __/_______  ____  ____/ /_  __
| | /| / / _ \/ __ \     / / / ___/ _ \/ __ \/ __  / / / /
| |/ |/ /  __/ /_/ /    / / / /  /  __/ / / / /_/ / /_/ /
|__/|__/\___/_.___/    /_/ /_/   \___/_/ /_/\__,_/\__, /
                                                 /____/
*/

/*# sourceMappingURL=styles.css.map */