html, body {
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    font-family: 'Audiowide', cursive;

}

.container {
    text-align: center;
    height: 100%;
    background-color: transparent;
    width: 100%;
    transform: rotate3d(2, -1, -1, -0.2turn);

}

.path-slider {
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 45vw;
    animation: hover 4000ms linear infinite;

}

.path-slider2 {
    display: inline-block;
    position: absolute;
    top: 40%;
    left: 46vw;
    animation: hover 4000ms linear infinite;

}


.text-1 {
    position: absolute;
    padding: 3vmin;
    width: 30%;
    top: 10%;
    right: 5%;
    background-color: #a2a789;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
    0 0 30px rgba(255, 255, 255, 0.6);
    animation: hover 3000ms linear infinite;
    border-radius: 10%;
    color: white;
}

.text-2 {
    position: absolute;
    padding: 3vmin;
    width: 30%;
    bottom: 10%;
    left: 5%;
    background-color: #a2a789;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8),
    0 0 30px rgba(255, 255, 255, 0.6);
    animation: hover 3000ms linear infinite;
    border-radius: 10%;
    color: white;
    z-index: 99;
}

.text-1 h1, .text-2 h1, .text-2 a {
    font-size: .75vmax;
    text-decoration: none;
    color: white;
}

@media screen
and (max-width: 300px) {
    /* Styles */
    .path-slider {
        scale: 1;
        top: 40%;
    }

    .path-slider2 {
        scale: 1;
        top: 41%;
    }
}

@media screen
and (min-width: 300px)
and (max-width: 600px) {
    /* Styles */
    .path-slider {
        scale: 2.5;
        top: 65%;
        left: 40%;
    }

    .path-slider2 {
        scale: 2.5;
        top: 67.5%;
        left: 44%;
    }

    .text-1 {
        left: 10%;
        top: 15%;
        width: 70%;

    }

    .text-2 {
        left: 25%;
        width: 50%;
    }

    .text-1 h1, .text-2 h1 {
        font-size: 1.5vmax;
    }
}

@media screen
and (min-width: 600px)
and (max-width: 800px) {
    /* Styles */
    .path-slider {
        scale: 3;
        top: 50%;
    }

    .path-slider2 {
        scale: 3;
        top: 52%;
    }

    .text-1 {
        left: 15%;
        top: 15%;
        width: 70%;

    }

    .text-2 {
        left: 25%;
        width: 50%;
    }

    .text-1 h1, .text-2 h1 {
        font-size: 1.5vmax;
    }
}

@media screen
and (min-width: 800px)
and (max-width: 1000px) {
    /* Styles */
    .path-slider {
        scale: 4;
        top: 60%;
    }

    .path-slider2 {
        scale: 4;
        top: 62%;
    }

    .text-1 {
        left: 12%;
        top: 15%;
        width: 70%;

    }

    .text-2 {
        left: 20%;
        width: 50%;
    }

    .text-1 h1, .text-2 h1 {
        font-size: 1.5vmax;
    }
}

@media screen
and (min-width: 1000px)
and (max-width: 11300px) {
    /* Styles */
    .path-slider {
        scale: 5;
        top: 60%;
    }

    .path-slider2 {
        scale: 5;
        top: 62%;
    }
}

@media screen
and (min-width: 1300px)
and (max-width: 1750px) {
    /* Styles */
    .path-slider {
        scale: 7;
        top: 70%;
    }

    .path-slider2 {
        scale: 7;
        top: 73%;
    }


}

@media screen
and (min-width: 1750px) {
    /* Styles */
    .path-slider {
        scale: 9;
        top: 80%;
    }

    .path-slider2 {
        scale: 9;
        top: 83%;
    }
}


path {
    stroke-width: 10px;
    stroke: none;
    fill: none;
}

.icon__path {
    fill: #FFFFFF;
}

.path-slider__path {
    stroke: rgba(255, 255, 255, 1);
}

.path-slider__item {
    position: absolute;
    left: -7.5px;
    top: -55px;
    color: #FFFFFF;
    cursor: pointer;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    text-decoration: none;
    outline: none;
}

.path-slider__item:hover .item__circle, .path-slider__item:focus .item__circle {
    background-color: #aaa;
}

.item__circle {
    display: inline-block;
    width: 15px;
    height: 10px;
    background-color: #e8e8e8;
    border-radius: 30%;
    text-align: center;
    transition: 0.5s;
    box-shadow: rgba(0, 0, 0, 0.64) 0px 3px 8px;
}

.item__title {
    position: absolute;
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    font-variant: small-caps;
    white-space: nowrap;
    opacity: 0.8;
    transition: 0.5s;
    display: none;
}

.item__icon {
    width: 12px;
    height: 10px;
    position: relative;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%);
    object-fit: contain;
    image-resolution: from-image;
    image-rendering: pixelated;

}


.path-slider__current-item .item__icon {
    transform: translateY(-60%) translateX(-5%);

}

/*
.path-slider__current-item .item__circle {
    -webkit-transform: scale(1.8) rotate3d(2, 2, 2, -0.13turn);
    -ms-transform: scale(1.8) rotate3d(2, 2, 2, -0.13turn);
    transform: scale(1.8) rotate3d(2, 2, 2, -0.13turn);
}

.path-slider__current-item .item__circle img {
    width: 10px;
}
 */

.path-slider__current-item .item__circle {
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    transform: scale(1.8);

}


.path-slider__current-item .item__title {
    font-size: 25px;
    opacity: 1;
    -webkit-transform: translate(-50%, -20px);
    -ms-transform: translate(-50%, -20px);
    transform: translate(-50%, -20px);
}


.infinity__tracer {
    stroke-linecap: round;
    stroke-dasharray: 100;

    opacity: 0.8;
    animation: tracer 3000ms linear reverse infinite;
}

.infinity__tracer--1 {
    stroke: #dcdcdc;
    animation-duration: 16000ms;
    animation-delay: -3960ms;
}

.infinity__tracer--2 {
    stroke: #a2a789;
    animation-duration: 13000ms;
    animation-delay: -1980ms;
}

@keyframes tracer {
    to {
        stroke-dashoffset: 1000;
    }
}

#goToSite {
    cursor: pointer;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

#goToSite:hover {
    color: #000;
}

#companylogo {
    position: relative;
    object-fit: contain;
    width: 40%;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    max-height: 500px;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

#companylogo:hover {
    transform: scale(1.1);
}